Hello World, Welcome to Laravel tutorial series Learn laravel with example. In the previous tutorial we have learned that how to setup laravel on local system and how to create simple hello world with laravel. In this tutorial we will start to create todo app with laravel. I have divided the todo app tutorial in following parts,
- Add and Show Task
- Update and Delete Task
Today we will discuss about first part. In this part we will add task in database with form and show the all added task. Let’s start our journey.
- Create database l5 in phpmyadmin or in mysql database.
- Open the command line and run the following command
php artisan make:model Todo –m
The above command will create model for our todo app and also create the migration table. After running the query, you can find the model file in app folder and migration file in /database/migrations/2018_11_02_094933_create_todos_table. Migration file help us to create table in database with coding. In migration file we will define our column for todo app.
- Open the /database/migrations/2018_11_02_094933_create_todos_table and add the following code in up function and save the file.
Schema::create('todos', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('description');
$table->integer('status');
$table->timestamps();
});
- Run the following command to create the table.
php artisan migrate
- Now open the phpmyadmin and see the l5 database. You will see the following tables.
We have created the database and table. Now we create form where we will put the data and save in database.
- Create add.blade.php in /resource/views folder and add the following code.
@extends('common')
@section('title', 'Add Task')
@section('page_heading')
<h3 class="mb-3 d-inline">Add Task</h3>
@endsection
@section('content')
<table class="table table-bordered">
<form action="{{url('todo/store')}}" method="POST">
{{ csrf_field() }}
<tbody>
@if(Session::has('success'))
<tr class="bg-success">
<td colspan="2">
{{session('success')}}
</td>
</tr>
@endif
<tr>
<th colspan="4"><a href="{{url('/')}}" class="btn btn-secondary btn-sm"><< Task List</a></th>
</tr>
<tr>
<th>Title</th>
<td><input type="text" class="form-control" name="title" /></td>
</tr>
<tr>
<th>Description</th>
<td>
<textarea name="desc" class="form-control" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" class="btn btn-danger" />
</td>
</tr>
</tbody>
</form>
</table>
@endsection
In the above file you can see that we extend the common layout. Following is the common.blade.php file code. Place this file at same place.
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
<!-- Bootstrap 4 -->
<link rel="stylesheet" type="text/css" href="{{ asset('lib/bootstrap.min.css') }}" />
</head>
<body>
<div class="container">
<div class="row mt-5">
@yield('page_heading')
@yield('content')
</div>
</div>
</body>
</html>
I have implement this todo app with bootstrap 4 so do not forget to include the bootstrap file.
- Open /routes/web.php file and comment the existing route function add the following code in existing file.
// Route::get('/',function (){
// // return view('welcome');
// return view('todo');
// });
Route::get('/','TodoController@index');
Route::get('/todo/add','TodoController@add');
Route::post('/todo/store','TodoController@store');
In the above code, you can see the we have defined three methods in our Todo controller.
- Open the TodoController that you have created in the first tutorial and add the following in it.
function index(){
$todos=Todo::all();
$total=Todo::count();
return view('todo',['todos'=>$todos,'totalCount'=>$total]);
}
// View Add Todo
function add(){
return view('add');
}
function store(Request $request){
$todo=new Todo;
$todo->title=$request->input('title');
$todo->description=$request->input('desc');
$todo->save();
return redirect('todo/add')->with('success', 'Task has been added!');
}
- Open app/Todo.php and add the following code in the Todo class.
protected $fillable=['title','description'];
- Open the todo app in browser and you will see the following screen after adding some todo list.
You can download this full app source code from this link.