Laravel ToDo List – Part 1

Yet another todo list! Too common but it works well in order to learn a framework.

This 1st part is a very simple implementation with just one user and not any styling. The goal is students to become familiar with the Laravel framework and learn the basics of the Model-View-Controller architecture. Initial design is pretty simple and will look like this:

The code for this example is at:
https://github.com/soc-2020/laratodo – Tag: v1.0

Prerequisites:
1. A web server stack like, XAMPP, AMPPS, MAMP, Laragon, or WAMP.
2. Composer (for Windows there is an installer available)

So here we go:

1. Create a fresh Laravel project:
composer create-project --prefer-dist laravel/laravel laratodo
Then cd into the project’s folder.

2. Create a MySQL Database. Select any name you like, we called it laratodo and grant all privileges to a user on this database.

3. Edit the .env file and update the database credentials, for example:
DB_DATABASE=laratodo
DB_USERNAME=user
DB_PASSWORD=1234

4. Now the application knows how to connect to the database. So we can create the tasks table. In order to do so create a migration:
php artisan make:migration create_tasks_table --create=tasks
In the migration file created, add the required fields for name (varchar) and completed (boolean):
$table->string("name");
$table->boolean("completed")->default(false);

Then run the migrate command to create the table. Two other migrations are already there by Laravel, users and failed_jobs and will create the respective tables:
php artisan migrate

5. Create a Model for this table named Task. Models are created by default in the app directory but might be better to put them in a Models directory. So create a directory Models under app and then run the following command to create the model:
php artisan make:model Models/Task

6. The application will have the following routes for the moment:
/
/tasks/completed
/task/add
/task/complete
/task/delete
/task/undo

These routes are defined in the routes/web.php file.

7. Create a controller named TodoController. This controller is referred by all routes.
php artisan make:controller TodoController

8. Add the methods: home, task_add, task_complete, task_delete, task_undo, and tasks_completed for the respective routes.
The code for these methods can be found in the TodoController at the app/Http/Controllers directory.

9. Create the views. Here we use the blade templating system and create a template.blade.php file which contains the basic structure of any page and yields what specific content each page wants to add.
The pages home.blade.php and completed.blade.php extend the template and add their content at the respective sections.
Views are located at the resources/views directory.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: