Laravel Series : Build A To-Do List App with The 135 Rule (Part 1)

Sharing is caring!

Introduction

In this article, I will be building a to-do list application named “135 To-Do” in Laravel 5.7 with the 135 rule that I believe can help me to prioritise my daily tasks and complete that everyday with only 9 tasks I need to focus on.

The app will consist of below features:

1. Login
2. User registration
3. Forgot Password
4. User-based list of tasks
5. Add description and image per task
6. Task planning for tomorrow (end of the day)

Pain Point

There are too many things to be done every day, with different priority which cannot be set through Calendar.  In the real world, we will always be distracted by ad-hoc requests, some emergency tasks, family matters, meetings or client calls, and so on. If we cannot focus on the things we planned, we will get lost.

 

The Solution

Recently i have come across this article “Build A Better To-Do List : The 1-3-5 Rule“, i believe this will be a better way to organize my to-do list daily with 3 set of priority – “1 BigThing”, “3 Medium Things” and “5 Little Things”, in total 9 tasks that I can focus and complete those by end of the day.

 

Get Started

 

Project Setup

---

Step 1: Create a Laravel 5.7 app by running below command:

We can create the project using Composer, a dependency manager for PHP. This will generate a new Laravel application using the latest stable release into the directory 135todo

composer create-project --prefer-dist laravel/laravel 135todo

Or you may install via Laravel Installer:

composer global require laravel/installer

You need to set the composer’s system-wide vendor bin directory in your $PATH so the Laravel executable can be located by your system.

Terry’s Laravel Tips

Location for the composer vendor bin:
macOS      : $HOME/.composer/vendor/bin
Windows : C:\Users\[account name]\AppData\Roaming\Composer\vendor\bin
Linux       : $HOME/.config/composer/vendor/bin

laravel new 135todo

If you have PHP installed locally and you would like to serve your application, you may use the serve Artisan command.

php artisan serve

This command will start a development server at http://localhost:8000

 

Configuration

---

Step 2: Configure a new Laravel app with these 5 things:

1) Public Directory / Web Server Setup

Configure your web server’s document/web root to be the public directory.

The index.php in this directory serves as the front controller for all HTTP requests entering your application.

Terry’s Laravel Tips

XAMPP in Windows

First, modify httpd-vhosts.conf file in [xampp_dir]\apache\conf\extra:

NameVirtualHost *:80

<VirtualHost *:80>
ServerAdmin webmaster@135todo.test
DocumentRoot “D:/xampp/htdocs/135todo/public”
ServerName 135todo.test
</VirtualHost>

Then, add below line at the bottom of C:\Windows\system32\drivers\etc\hosts file:

127.0.0.1     135todo.test

More robust local development options are available via Homestead and Valet.

 

2) Writable directories: storage and bootstrap/cache

Mac Os / Linux

sudo chgrp -R www-data storage bootstrap/cache
sudo chmod -R ug+rwx storage bootstrap/cache

 

3) Environment file: .env

Keep .env.example and make a new file called .env

Then change the top part for APP_NAME and APP_URL:

APP_NAME="135 To-Do"
APP_ENV=local
APP_KEY=base64:YOUR_APP_KEY
APP_DEBUG=true
APP_URL=http://135todo.test

 

4) Application Key

The next thing you should do after installing Laravel is set your application key to a random string. If you installed Laravel via Composer or the Laravel installer, this key has already been set for you by below command.

php artisan key:generate

 

5) File Storage

The public disk is intended for files that are going to be publicly accessible. By default, the public disk uses the local driver and stores these files in storage/app/public. To make them accessible from the web, you should create a symbolic link from public/storage to storage/app/public by using below command:

php artisan storage:link

 

Refer to my previous tutorial about setting up a symbolic link for Windows / Mac Os / Linux here.

 

Authentication

---

Step 3: Generate default Laravel authentication system using the command.

php artisan make:auth

 

Database

---

Step 4: Create a database with db username and password.

You may create a database using phpMyAdmin or mysql command.

Then update .env file liked below:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=135todo
DB_USERNAME=135todo
DB_PASSWORD=123greatpassword

 

Welcome Page

---

Step 5: It’s time to change the content for Laravel default welcome page.

Default homepage for any new Laravel app is  welcome.blade.php in resources/views/ folder.

I replaced line “<title>Laravel</title>” to:

<title>{{ config('app.name') }}</title>

and the div content to below:

<div class="content">
  <div class="title m-b-md">
    {{ config('app.name') }}
  </div>
  <i>Do more with less</i>
  <hr />
  <br />

  <div class="links">
    @auth
    <a href="{{ url('/home') }}">Home</a>
    @else
    <a href="{{ route('login') }}">Login</a>

    @if (Route::has('register'))
    <a class="button" href="{{ route('register') }}">Register</a>
    @endif
    @endauth
  </div>
</div>

You may see below screenshot for “135 To-Do” app when you browse to “http://135todo.test”.

 

 

---

I will continue next part that covers more on Authentication, Models, Migration and Seeding topics.

Thanks for reading my Laravel Series that hope you get more insights on how to setup a new Laravel app.