Laravel 8 Tutorial for Beginner: Create your First To-Do App
Laravel is an elegant, expressive, and flexible PHP framework with an 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 especially if you are a 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 the 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 a learning curve especially 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 it, you will become addicted to it. Laravel aims at creativity in development. It uses the word ‘Web Artisan’ to point out the creativity hidden inside the developer’s heart. The result from -> Efficient Application with fewer lines and well-designed code.
To make it easier for you to learn, I wrote this Laravel tutorial with a beginner audience in mind. Thus you will find it easy to follow this tutorial for Laravel to learn.
What you should know before 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 intervals. 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 about 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 it on Windows or Mac. The best and easiest way to install Laravel is through Composer. Composer is a 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 the following programs:
- Web Server – Apache or Nginx
- >= PHP 7.3
- Some PHP extensions that might be pre-installed:
- BCMath PHP Extension
- Ctype PHP Extension
- Fileinfo PHP
- JSON PHP Extension
- Mbstring PHP Extension
- OpenSSL PHP Extension
- PDO PHP Extension
- Tokenizer PHP Extension
- 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:
Steps for Mac users (Click Here)
Steps for Windows users (Click Here)
For our example, execute
laravel new todoBuilding Simple CRUD To-do Application in Laravel: Laravel Tutorial
The best way to learn to program 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 the below functions with the help of this Laravel tutorial.
- You can register and log into 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.
- Models represent the entities in the database and help you to query the database and return the data
- Views are the pages that will be displayed when accessing the app. View Component is used for the User Interface of the application.
- Controllers handle user requests, get required data from the models, and pass them to the Views. Controllers act as an intermediary between Model and View Components to process the business logic and incoming requests.
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 a 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 the 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 in the App folder, but now they can be stored inside the App/Models folders too.
- Providers: This directory contains all your service providers for the application. You can learn more about service providers here
- Bootstrap: This directory contains framework bootstrap as well as configuration files. It also contains a 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 files here
- Public: This directory contains assets like images, JS files, and CSS.
- Resources: This directory contains all view files and CSS LESS or SASS files. It also contains a language directory to store language files.
- Routes: This directory contains all route definitions for the application. PHP is the file that 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 others.
- Tests: This directory contains all the test files
- Vendor: This directory contains all composer dependencies
Steps to create your first Laravel Application using the Laravel tutorial
1) Create Your Project:
If you didn’t create your project in the installation section, create now by executing the below command:
laravel new todo2) Configure Database:
We need a database for our application, so it’s best to configure our database before doing anything. Laravel supports the 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 it accordingly.
Laravel provides config/database.php to config database but it's better not to store database credentials there instead you can use a .env file where you can different types of credentials and other data.
Laravel comes with a default .env file at the root.
- In the file you will find code like the one below:Replace above all 6 lines with below 1 line - i.e Change the db_connection’s value to SQLite and delete the rest of the DB lines like below:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secretNow in your database directory, create a file – database.SQLite (this is a database file with the extension .sqlite):DB_CONNECTION=sqlite
3) Make Auth:
Laravel also provides Authentication Scaffolding which means everything related to Authentication like User login, registration, forget the password, two-factor authentication, etc will be pre-built if you need and it is called Laravel Jetstream
There are two ways to add Jetstream to your new Laravel App. If you haven't created the Laravel project yet, add
--jet
flag to Laravel new command like this:
laravel new todo --jetSince we already created the project above, you can also install it via their package. First, install jetstream packing using the below command:
composer require laravel/jetstreamLaravel Jetstream supports two stacks ~ Liveware and Inertia. Since we want to keep this project simple, let's use Livewire and install Jetstream using the below command:
php artisan jetstream:install livewire
Then run "npm install && npm run dev" to build your assets.
At this point - all the configurations are done and we are ready to start building.
4) Migrations:
The first step in developing any web application is to design a database. Laravel offers a great way to design database schema and tables and can 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 creating 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 the below command:
php artisan make:migration create_tasks_table --create=tasksYou will find your newly created migration in /database/migrations folder –
Now let’s add two more columns to the 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 the 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 the user's table.
Now We finished creating the database schema. To use this schema to create tables in the database, execute the below command. Migrate command will update the changes made in the schema to the actual database.
php artisan migrate5) Eloquent Models
Eloquent is Laravel’s ORM which provides simple Active-record Implementation for working with the database. Each Database table can have a 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 the make: model command.
php artisan make:model TaskThis command will create a Task model in the App directory as shown below.
6) One-to-Many Relationship
Relationships are used to connect tables. Eloquent provides a 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: a single user can have many tasks thus, a one-to-many relationship exists between the User table and Task Table. It's very easy to define and use Eloquent relationships and the benefit is, you don’t have to run queries at all. Eloquent will bind the models so you will have to only use functions.
Let’s edit the Task Model and User Model to create an 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 Tinker. Tinker allows you to interact with your entire Laravel application through a console window without the need to access the web interface. The 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 accesses the 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 requests, and based on their logic, they redirect or return respective data. In our example, now we are moving towards the front end, thus we should make controllers through which we can handle requests coming to our application. Execute the below command to create a controller for tasks:
php artisan make:controller TasksControllerThis will create TasksController and you can find that in the app/Http/Controllers directory.
9) Routing
Routing means accepting the request and redirecting it to the appropriate function. Our app needs five routes which will do the following:
- Login
- Register
- Display a list of all our tasks
- Add new tasks
- 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 the '/routes' folder for various use cases. For example, routing configuration for API will go in the '/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 the 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 made two changes:
- 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.
- We have modified the route for the dashboard, which will now pass requests to TaskController's Index function. And created routes for other actions.
10) Views – Blade Templates
Views are stored in the resources/views directory. Views are the front-end of the Laravel application and they separate application logic and presentation logic. We need to create and design the following views:
- dashboard.blade.php ( Dashboard will show a list of tasks)
- add.blade.php (Form which lets you add new tasks)
- edit.blade.php (Form which lets you edit any task)
Laravel comes with a decent layout that contains a navbar called app.blade.php located in the Views/layouts directory.
With the help of Laravel’s blade engine, you can divide your pages into sub-sections and also use Laravel’s default navbar section in 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 the Route-Model Binding concept.
11) Route-Model Binding
Laravel has a lot of amazing features to make web development easy, clean, and less time-consuming. Among them, one of the most prominent features 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 the explanation is confusing. With time, you will get to know.
Now let’s add functions handling the 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 the “Task $task” object in the function as well as the “Request $request” object with the help of the Route-model binding mechanism.
Note: Don't forget to add 'use App\Models\Task;' otherwise, you will get the '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 they display the form if necessary, and needed data using model objects passed through routes.
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 ?>”.
Add a new task page
Open add.blade.php and edit as follows:
<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 it in the form. This token is used to verify that the authenticated logged user is the one making requests in the application. This is the security feature provided by Laravel out of the box.
Edit task page
Open edit.blade.php and edit as follows.
<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 log in, and then check if you can create a task, edit a task, and delete the 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 at the root of your application in the terminal.
Make sure to read the 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 lists 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 the database, and 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 with 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.
