Laravel 8 Tutorial for Beginner: Create your First To-Do App

By Parth Patel on Oct 02, 2020

In this Laravel tutorial, we will learn how to install laravel and how to create your first app in laravel for beginners. Now you can learn laravel easily without the need of watching laravel video series or laravel video tutorials. This laravel tutorial will explain all the necessary concepts in easy language for you to learn laravel easily and understand it better.

Introduction

Laravel is elegant, expressive and flexible PHP framework with extreme focus on clean code and speed which describes itself as “The PHP framework for web artisans”. It is a free and Open source PHP framework created by Taylor Otwell, based on Model View Controller (MVC) architecture.

Creating a web application from scratch can be daunting specially if you are beginner. A simple web application also contains various small and big pieces and creating those pieces every time you are creating a web app can be boring and repetitive and there is no point in reinventing wheels. That’s when Laravel comes to your rescue.

Laravel framework provides various PHP libraries and helper functions and can help you to focus on more important pieces while providing common functions and logic to speed up the development time and ease up the development.

Initially there is a bit of learning curve specially if you are a beginner and have no experience with any kind of web framework. But believe me, once you flow with it, you will not only love, you will become addicted to it. Laravel aims at creativity in development. It uses the word ‘Web Artisan’ to point out the creative hidden inside the developer’s heart.Result -> Efficient Application with fewer lines and well designed code.

To make it easier for you to learn, I wrote this laravel tutorial with beginner audience in mind. Thus you will find it easy to follow this tutorial for laravel to learn.

What you should know prior to using our Laravel tutorial?

• HTML/CSS (Duh!)
• Basic understanding of core PHP
• Intermediate PHP – This is sort of optional but if you have time, do learn some intermediate concepts like PHP OOP, abstraction etc.
• Basic Understanding of MVC Framework
• Perseverance – Even though it’s easy to learn Laravel, it will test your patience at various interval. At least I had some roadblocks because I knew PHP but I had no knowledge about frameworks. Even while learning the framework, or successfully completing projects, I was having confusion in the basic underlying concepts of the MVC Framework. But I didn’t give up.
• Passion – C’mon Web development is fun! At least Laravel made it enjoyable. It’s best to enjoy the learning journey.

Installation and Configuration

Laravel offers various ways to install in windows or mac. Best and easiest way to install Laravel is through Composer. Composer is dependency manager for PHP which you can install on your web server.

Prerequisites for installing Laravel 8

Before installing Laravel on your local platform (Localhost) you need to install following programs:

• Web Server – Apache or nGinx
• >= PHP 7.3
• Some PHP extensions which might be pre-installed:
  1. BCMath PHP Extension
  2. Ctype PHP Extension
  3. Fileinfo PHP
  4. JSON PHP Extension
  5. Mbstring PHP Extension
  6. OpenSSL PHP Extension
  7. PDO PHP Extension
  8. Tokenizer PHP Extension
  9. XML PHP Extension
• MySQL (Or Other Database sources, You can even use SQLite too)
• Composer
• An IDE will be really helpful for Laravel development. I recommend VS Code or Atom. Both are free to use.

Steps to Install Laravel in your Localhost:

For our example , execute

laravel new todo

Building Simple CRUD To-do Application in Laravel : Laravel Tutorial

Best way to learn programming is to practice. Thus, here we will be learning basic concepts of Laravel by developing a simple To-Do Laravel Web App which will do below functions with the help of this laravel tutorial.

• You can register and login to the web app
• You can add tasks to your to-do list
• You can edit as well as delete those tasks
• Your list is only visible to you thus it implements authentication using email id and password

Exploring Directory Structure

Laravel applications follow the Model-View-Controller architecture design pattern.

Source - SelfTaughtCoders.com

• Models represents the entities in database and helps you to query the database and return the data
• Views are the pages which will be displayed when accessed the app. View Component is used for the User Interface of the application.
• Controllers handle user requests, gets required data from the models and pass them to the Views. Controllers acts as an intermediary between Model and View Components to process the business logic and incoming request.

When you installed composer, and created your first Laravel web app, you might have noticed the app folder with different files and folders. I know if you are beginner, you may have a lot of questions about what are these folders for etc. etc.

Let’s understand some

app

    Console

    Exceptions

    Http

    Models

    Providers

bootstrap

config

database

    migrations

    seeds

public

resources

    css

    js
    
    lang  
  
    views

routes

storage

    app

    framework

    logs

tests

vendor

• App: This directory is the meat of the application and contains the core code.
  • Console: This directory contains all the custom Artisan commands created using make:command
  • Exceptions: This directory contains the application’s exception handler and is a good place to add custom exception classes to handle different exceptions thrown by your application
  • Http: This directory contains all your controllers, middleware and requests
  • Models This is a new director added since Laravel 8 to hold Model files. Earlier, models were stored at App folder, but now it can be stored inside App/Models folders too.
  • Providers: This directory contains all your service providers for the application. You can know more about service providers here
• Bootstrap: This directory contains framework bootstrap as well as configuration files. It also contains Cache directory which contains framework generated cache files
• Config: This directory contains all your application’s configuration files.
• Database: This directory contains all database migrations and seeds. You can also store SQLite database file here
• Public: This directory contains assets like images, js files and CSS.
• Resources: This directory contains all view files and CSS or LESS or SASS files. It also contains lang directory to store language files.
• Routes: This directory contains all routes definitions for the application. php is the file which receives all the requests to your application and here you can redirect the requests to their respective controller methods.
• Storage: This directory contains blade templates, session files, cache files and other.
• Tests: This directory contains all the test files
• Vendor: This directory contains all composer dependencies

Steps to create your first Laravel Application using Laravel tutorial

1) Create Your Project:

If you didn’t create your project in installation section, create now by executing below command:

laravel new todo

2) Configure Database:

We need database for our application, so it’s best to configure our database before doing anything. Laravel supports following 4 databases −

• MySQL
• Postgres
• SQLite
• SQL Server

For this example, we will use SQLite as it is easy to configure and to use and you don’t have to install anything apart from creating just one empty file.

For other databases, you need to have that database installed in your system and then you can configure accordingly.

Laravel provides config/database.php to config database but it's better not to store database credentials there instead you can use .env file where you can different types of credentials and other data.

Laravel comes with default .env file at root.

•  In the file you will find code like below:

  DB_CONNECTION=mysql
  
  DB_HOST=127.0.0.1
  
  DB_PORT=3306
  
  DB_DATABASE=homestead
  
  DB_USERNAME=homestead
  
  DB_PASSWORD=secret

  Replace above all 6 lines with below 1 line - i.e Change the db_connection’s value to sqlite and delete rest of the db lines like below:

  DB_CONNECTION=sqlite

  Now in your database directory, create a file – database.sqlite (this is database file with extension .sqlite):

3) Make Auth:

Laravel also provides Authentication Scaffolding which means everything related to Authentication like User login, registration, forget password, two-factor authentication etc will be pre-built if you need and it is called Laravel Jetstream

There is two ways to add Jetstream to your new Laravel App. If you haven't created laravel project yet, add

--jet

flag to laravel new command like this:

laravel new todo --jet

Since, we already created project above, you can also install it via their package. First install jetstream packing using below command:

composer require laravel/jetstream

Laravel Jetstream supports two stack ~ Liveware or Inerta. Since, we want to keep this project simple, let's use Livewire and install jetstream using below command:

php artisan jetstream:install livewire

Then run "npm install && npm run dev" to build your assets.

At this point - all the configuration are done and we are ready to start building.

4) Migrations:

First step in developing any web application is to design database. Laravel offers great way to design database schema and tables and able to migrate it easily over different systems known as 'Migrations'.

Migrations are used to create, modify as well as share the application’s database schema. They are used with Laravel’s schema builder to build database schema easily. There are many benefits to create migrations for your database. You can easily rebuild your database structure using migration files on production or any other system.

Don’t worry if you find this explanation confusing. Believe me, you will get your way soon. Just follow along.

Execute below command:

php artisan make:migration create_tasks_table --create=tasks

You will find your newly created migration in /database/migrations folder –

Now let’s add two more column to tasks table by editing the newly created migration file.

...
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
	  $table->bigIncrements('id');
	  $table->string('description');
	  $table->integer('user_id')->unsigned()->index();
	  $table->timestamps();
    });
}
...

The new column named “description” will store the task description and column named “user_id” will store the id of the user who created the task. We added “ ->unsigned()->index()” after the user_if because it is a foreign key from users table.

Now We finished creating the database schema. To use this schema to create tables in the database, execute below command. Migrate command will update the changes made in schema to the actual database.

php artisan migrate

5) Eloquent Models

Eloquent is Laravel’s ORM which provides simple Active-record Implementation for working with database. Each Database table can have corresponding Eloquent model. Eloquent Model represents database entities and can be used to query data as well as insert and update data to the tables. So, let’s make a model for our tasks table using make:model command.

php artisan make:model Task

This command will create Task model in App directory as shown below.

6) One-to-Many Relationship

Relationships are used to connect tables. Eloquent provides way to connect their models through eloquent relationships. One-to-many relationship means when one model owns multiple amounts of another model.For our example: single user can have many tasks thus one-to-many relationship exists between User table and Task Table. It's very easy to define and use Eloquent relationship and the benefit is, you don’t have to run query at all. Eloquent will bind the models so you will have to only use functions.

Let’s edit Task Model and User Model to create Eloquent Relationship:

Task Model (task.php found in app/task.php):

...
use App\Models\User;
class Task extends Model
{    
    public function user()
    {
    	return $this->belongsTo(User::class);
    }

	  
}

User Model (user.php found in app/user.php):

...
use App\Models\Task;
class User extends Authenticatable
{
    ...
    public function tasks()
    {
    	return $this->hasMany(Task::class);
    }

	  
}

7) Artisan Tinker - (Totally Optional)

Laravel provides a command-line interface known as Artisan. Artisan contains various commands and among them, we will now discuss about Tinker. Tinker allows you to interact with your entire Laravel application through console window without the need of accessing web interface. Major benefit of tinker is you can test relationships, debug data and access Eloquent ORM, jobs, tests, events etc. So we will also be using Tinker in our laravel tutorial. Let’s say you registered to the app and created two tasks. Now you check those tasks directly in the console window as below:

$ php artisan tinker
>App\User::first()->tasks;

Tinker directly access database so this is a great tool for testing functions as well as the data.

8) Controllers

Controllers are used to direct traffic between views and models and they can group multiple request handling logic into a single class. Thus, generally they receive all the request and based on their logic, they redirect or return respective data. In our example, now we are moving towards front-end, thus we should make controllers through which we can handle requests coming to our application. Execute below command to create controller for tasks:

php artisan make:controller TasksController

This will create TasksController and you can find that in app/Http/Controllers directory.

9) Routing

Routing means to accept the request and redirect it to appropriate function. Our app needs five routes which will do following:

1. Login
2. Register
3. Display list of all our tasks
4. Add new tasks
5. Delete existing tasks

Login and register are added by Laravel Jetstream so now we need to take care of only three routes.

Laravel provides various route files inside '/routes' folder for various use cases. For example: routing configuration for API will go in '/routes/api.php' file while routing configuration for our regular web application will go in '/routes/web.php'.

Now, let’s edit web.php. Below is the edited version of file. Make changes accordingly:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TasksController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::middleware(['auth:sanctum', 'verified'])->group(function(){
    Route::get('/dashboard',[TasksController::class, 'index'])->name('dashboard');

    Route::get('/task',[TasksController::class, 'add']);
    Route::post('/task',[TasksController::class, 'create']);
    
    Route::get('/task/{task}', [TasksController::class, 'edit']);
    Route::post('/task/{task}', [TasksController::class, 'update']);
});

Here, we have done two changes:

1. We have grouped all routes so we can apply auth:sanctum and verified middleware to all routes thereby restricting those pages to only verified, logged in users.
2. We have modified route for dashboard, which will now pass request to TaskController's Index function. And created routes for other actions.

10) Views – Blade Templates

Views are stored in resources/views directory. Views are the front-end of the Laravel application and it separates application logic and the presentation logic. We need to create and design following views:

1. dashboard.blade.php ( Dashboard will show list of tasks)
2. add.blade.php (Form which lets you to add new task)
3. edit.blade.php (Form which lets you to edit any task)

Laravel comes with decent layout which contains navbar called app.blade.php located in Views/layouts directory.

With the help of laravel’s blade engine, you can divide your pages into sub-sections and also can use the laravel’s default navbar section into your new views.

Now, in /resources/views folder, create add.blade.php and edit.blade.php files with the markup given below.

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            //here goes your page header
        </h2>
    </x-slot>

//here goes your body content

</x-app-layout>

In dashboard.blade.php too, replace all code with the above. We will edit the views later after defining our controller functions using Route-Model Binding concept.

11) Route-Model Bindng

Laravel has lot of amazing features to make web development easy, clean, and less time consuming. Among them, one of the most prominent feature is Route-Model Binding. It is a mechanism to inject a model instance into your routes. It means, you can pass the model object to the routes and also to views through routes which will help you to get the object values easily in the view.Don’t worry if explanation is confusing. With time, you will get to know.

Now let’s add functions handling above routes to TasksController.php. It should look like below.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;

class TasksController extends Controller
{
    public function index()
    {
        $tasks = auth()->user()->tasks();
        return view('dashboard', compact('tasks'));
    }
    public function add()
    {
    	return view('add');
    }

    public function create(Request $request)
    {
        $this->validate($request, [
            'description' => 'required'
        ]);
    	$task = new Task();
    	$task->description = $request->description;
    	$task->user_id = auth()->user()->id;
    	$task->save();
    	return redirect('/dashboard'); 
    }

    public function edit(Task $task)
    {

    	if (auth()->user()->id == $task->user_id)
        {            
                return view('edit', compact('task'));
        }           
        else {
             return redirect('/dashboard');
         }            	
    }

    public function update(Request $request, Task $task)
    {
    	if(isset($_POST['delete'])) {
    		$task->delete();
    		return redirect('/dashboard');
    	}
    	else
    	{
            $this->validate($request, [
                'description' => 'required'
            ]);
    		$task->description = $request->description;
	    	$task->save();
	    	return redirect('/dashboard'); 
    	}    	
    }
}

Here you can see that I am passing “Task $task” object in the function as well as “Request $request” object with the help of Route-model binding mechanism.

Note: Don't forget to add 'use App\Models\Task;' otherwise you will get 'Class not found error'

12) Editing views

Now we have our controller functions set up and returning the appropriate views with the attached model objects.So now, we need to edit our views so that it displays the form if necessary and needed data using model objects passed through routes.

1. Display all tasks page

   Open dashboard.blade.php and edit it to the following.

   <x-app-layout>
   <x-slot name="header">
       <h2 class="font-semibold text-xl text-gray-800 leading-tight">
           {{ __('Dashboard') }}
       </h2>
   </x-slot>
   
   <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
           <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-5">
               <div class="flex">
                   <div class="flex-auto text-2xl mb-4">Tasks List</div>
                   
                   <div class="flex-auto text-right mt-2">
                       <a href="/task" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add new Task</a>
                   </div>
               </div>
               <table class="w-full text-md rounded mb-4">
                   <thead>
                   <tr class="border-b">
                       <th class="text-left p-3 px-5">Task</th>
                       <th class="text-left p-3 px-5">Actions</th>
                       <th></th>
                   </tr>
                   </thead>
                   <tbody>
                   @foreach(auth()->user()->tasks as $task)
                       <tr class="border-b hover:bg-orange-100">
                           <td class="p-3 px-5">
                               {{$task->description}}
                           </td>
                           <td class="p-3 px-5">
                               
                               <a href="/task/{{$task->id}}" name="edit" class="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Edit</a>
                               <form action="/task/{{$task->id}}" class="inline-block">
                                   <button type="submit" name="delete" formmethod="POST" class="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Delete</button>
                                   {{ csrf_field() }}
                               </form>
                           </td>
                       </tr>
                   @endforeach
                   </tbody>
               </table>
               
           </div>
       </div>
   </div>
   </x-app-layout>
   

   Tip:

   Blade template engine allows us to use php inside HTML without enclosing it inside “<?php  ?>”.

2. Add new task page

   Open add.blade.php and edit as following:

   <x-app-layout>
   <x-slot name="header">
       <h2 class="font-semibold text-xl text-gray-800 leading-tight">
           {{ __('Add Task') }}
       </h2>
   </x-slot>
   
   <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
           <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-5">
           
               <form method="POST" action="/task">
   
                   <div class="form-group">
                       <textarea name="description" class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white"  placeholder='Enter your task'></textarea>  
                       @if ($errors->has('description'))
                           <span class="text-danger">{{ $errors->first('description') }}</span>
                       @endif
                   </div>
   
                   <div class="form-group">
                       <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Task</button>
                   </div>
                   {{ csrf_field() }}
               </form>
           </div>
       </div>
   </div>
   </x-app-layout>

   Tip:

   {{  csrf_field() }} is used to generate csrf token and insert in the form. This token is used to verify that the authenticated logged user is the one making request in application. This is the security feature provided by Laravel out of the box.

3. Edit task page

   Open edit.blade.php and edit as following.

   <x-app-layout>
   <x-slot name="header">
       <h2 class="font-semibold text-xl text-gray-800 leading-tight">
           {{ __('Edit Task') }}
       </h2>
   </x-slot>
   
   <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
           <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-5">
           
               <form method="POST" action="/task/{{ $task->id }}">
   
                   <div class="form-group">
                       <textarea name="description" class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white">{{$task->description }}</textarea>	
                       @if ($errors->has('description'))
                           <span class="text-danger">{{ $errors->first('description') }}</span>
                       @endif
                   </div>
   
                   <div class="form-group">
                       <button type="submit" name="update" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Update task</button>
                   </div>
               {{ csrf_field() }}
               </form>
           </div>
       </div>
   </div>
   </x-app-layout>

   After editing this view, all the pieces are joined so you can now test your application.

   First register and then login and then check if you can create task, edit task and delete task.

13) Run the project in Localhost

To run the project, run this command in the terminal window – php artisan serve. Make sure you are in the root of your application in terminal.

Make sure to read instructions before cloning code from github

What’s next for this project:

There are still many possible things to include in this laravel project like

• Form Validation
• Allowing the user to create multiple list with multiple tasks
• User Profile
• And many more ….

I will be updating this laravel tutorial to add more features soon.

Conclusion:

Over this long laravel tutorial, we’ve learned how to install Laravel , configure database, basic concepts like routes, models, views and controllers by building your first Laravel application – todo Laravel application.

Hope so this laravel tutorial helped you to understand Laravel’s basic concepts as well as motivated you to learn further. Please comment your views about Laravel as well as about this tutorial and also you can comment with your concerns and issues. I will be glad to help you. Thanks.