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:
- Login
- User registration
- Forgot Password
- User-based list of tasks
- Add description and image per task
- 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.