Laravel 5.4 ToDo App: Setting Authentication and ToDo Functionality

by Ahmed Khan  March 30, 2017

In the last installment of this series on Laravel 5.4, I created the basic skeleton of a ToDo application. This skeleton comprises of databases, migration tables, models and controllers.

In this installment, I am going to add authentication component for the users. This will include creation and modification of Auth for users as per the users table. The process would also include creation and modification of views. Finally, I will set the routes for the app and then test its functionality.

Laravel 5.4 todo app authentication and functionality

You can download the complete code from GitHub or check the live demo of app.

Get Code on GithubLive Demo of Laravel 5.4 app

Create User Authentication Using Artisan

I will start with creating a user auth using Artisan. The simple command is:

artisan make:auth

Once the command finishes, you will notice that a new auth folder has been created inside the  controllers and views folders. Laravel Artisan commands create separate controllers for auth  and also generates views for login, register and forget password. You can test the login view by going to http://localhost/todoapp/public/login. When the page loads up, you will see the login form.

For the registration form, go to http://localhost/todoapp/public/register for register view.

Notice that the register view have less fields than our User model. I will edit the register form  to reflect the changes. You will also notice that the Login and Register links are automatically added to the menu.

By default, the User model has pre-built authentication. However, if you wish, you could easily add the authentication component of your choice. For this open auth.php file (located inside the config folder). Once the file is open in your editor, search for the following code block:

Now in order to change the authentication model, edit the line 'model' => App\User::class and change App\User::class to the model class which you want the auth to check for user authentication. For now leave it unchanged.

I will now edit the Auth register view.

Edit Register View of Auth

Now go to the resources/views/auth folder and open register.blade.php. Replace the existing code with the following:

Now, reload the register view in the browser. You will notice that a new field, Image has been added to the form.

Next, edit RegisterController of auth to handle the request.

Modify RegisterController of Auth

Now go to Controllers/Auth folder and open RegisterController.php file. Find the validator() method and add a new rule for the image:

The new validator() method will look like this.

I will now edit the create() method so that it can upload image to the userimages folder and save the paths to the database. First, add this line before the start of class:

Secondly, update the create() method with the following code:

What I have done is that whenever a validated request comes in create(), the image is saved using Storage::putFile method, that also gives a name to the uploaded file automatically . Next, I have encrypted the password with the Laravel helper bcrypt() and then save it in the database.

I will now register a new user to test the functionality. But, before that I will change the default storage for the images to the config folder. For this, open the filesystem.php file and change the value of  default from local to public and then save it.

Now, I have to link the storage with the public folder so that I can view the images on the page. For this, run the following Artisan command:

Register the First User

I will now fire up the register page and add a new user.

Once I hit the Register button, a new user will be registered without any error. This user will be logged in and redirected to the dashboard.

Update the ToDo Controller

Now let’s update the TodoController (created in the previous installment). Go to the Controllers folder and open TodoController.php file. Once the file opens, you will see that all the methods are empty.

I will first add auth middleware into the TodoController so that only an authenticated user can visit this page. I will begin with adding the Auth and Validator namespace at the top:

In all the methods inside this controller, I am going to define views that will be called when a particular method runs. I will create these views after updating the Todo controller.

Add Auth Middleware in Controller

I will create a __construct() method inside our TodoController and define the middleware so that the middleware is applicable on all the methods.

Update index() Method

The index() method will get all the todo items for a single user. The updated index() method will look like this:

I used the relation function which I created in the User model and got all the todo items for the user who is logged in using Auth::user()->todo()->get();. Then, I checked whether the todo items are empty. Finally, I returned all the data to the dashboard view (located inside the todo folder in view).

Create a Validation Method

I will now create a new protected validation method which will validate the form fields and make sure that these fields are not empty. For this, create a new protected method in the controller and name it validator(). This will take the array of values to be validated as arguments.

The above method confirms that the todo, description and category fields are not empty when the request is submitted.

Update the create() Method

I will now update the create() method so that it returns a form for adding a new todo item.

Updating store() Method

Next, I will work on the method that store new todo items.

This method will first validates that all the fields are valid and not empty. Then, it saves the data in the Todo table, corresponding to the authenticated user.

Update the show() Method

This method will show a single todo item of a user

Update the edit() Method

This method will return the form for editing a single todo.

Update the update() Method

This method will first check that the required fields are not empty, and then update the todo.

Update the destroy() Method

This method will delete a todo item.

After updating all the above mentioned methods, the complete code of the ToDoController will look like:

Create Views For Controllers

Now go to the views folder, create a new folder and name it todo. I am going to extends the layout from app.blade.php that came with the Auth I created earlier.

First, i will update the master template menu so that I can change the title on every page and add a new menu item Add Todo to the menu. Now go to the layouts folder and open app.blade.php file. Now replace the <title> tag inside <head> tag with this:

Also, add bootstraps CSS and JS in the <head> tag.

Now find the following code snippet

And replace it with this block:

Next, findd the following block:

Add the following <li> after @else:

The master template has been updated.

Create the Dashboard View

Inside the todo folder, create a new file and name it dashboard.blade.php. Open the file in the editor and paste the following code in it.

This is a simple view which will show the list of all todo items along with the user-provided image on the right. The list will also have icons to view,edit and delete specific todo items.

Create the Todo View

Create a new file inside the todo folder and name it todo.blade.php. Paste the following code in it.

Create Todo Add and Edit Form View

Create a new file inside the todo folder and name it addtodo.blade.php. Paste the following code in it.

Now, create another file with the name edittodo.blade.php and paste the following code in it.

Now we have created all the views let’s now create its routes in web.php file.

Create ToDo Routes

Go into the routes folder and open web.php file. At the moment, the file contains the following routes:

I need one root route (which redirects to the login page) and two resource routes (one for auth and the second for todo) in web.php. Now replace the code in the web.php file with the following block:

Updae Register and Login Routes

Now, in the Register and Login controllers, replace the following line:

With this:

Now, whenever a user is registered or logged in, he/she will be redirected to the dashboard automatically.

Working With the ToDo Application

The application is now complete!

I will now start testing all the functionalities of the app. To begin the process, I will try to login with the user that I registered earlier. Once logged in, I will be redirected to a new dashboard which will look very blank because I have not yet added any todo item:

I will now add a new todo item. For this, click Add Todo in the menu or the click here link in the dashboard. The view will be redirected to the Add todo form.

Fill in all the fields.

The new todo item will be added when I click the Add button.

Now, click the play button to view the todo.

Click the Edit button to edit the selected todo item.

I will now try updating a value without adding any description.

The form will display the error that a description is required.

Summarizing Part 2

In this part, I have created an authentication system for the users. I have updated the authentication system to fulfill user requirements. I updated Login and Register controller, along with the TodoController so that it can perform all the CRUD operations for an authenticated user. I have also created all the views for todo along with the modification of the the Register view of auth so that it can take a user image.

The complete code of the application is available at this github repo.

What I Am Going to Discuss in the Final Part?

In the final part of this series, I am going to test the todo application using Laravel Dusk. If you have any questions about the topic of this installment, feel free to add a comment below.

Create Laravel apps without the worry of server management.

Deploy your app on optimized PHP hosting servers for Laravel.

About Ahmed Khan

Ahmed was a PHP community expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is a software engineer with extensive knowledge in PHP and SEO. He loves watching Game of Thrones is his free time. Follow Ahmed on Twitter to stay updated with his works. You can email him at ahmed.khan@cloudways.com

Stay Connected:

You Might Also Like...