Make todo list app with Laravel, vue js and bootstrap.

You have to know a basic knowledge of Laravel , Vue.js and bootstrap.

What we will work with :

  • Laravel : is a web application framework with expressive, elegant syntax. primarily used for building custom web apps using PHP. It’s a web framework that handles many things that are annoying to build yourself, such as routing, templating HTML, and authentication.
  • Vue js : Vue.js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue. js is also used both for desktop and mobile app development.
  • Bootstrap css: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

What will be covered :

  • Initial Laravel project
  • Add Vue js as a frontend.
  • Make api ( laravel as a backend and vue as a frontend).

1 - make new Laravel project :

At first you need composer , node.js , php to be installed on your computer

make a new project with name Todolist

laravel new project blog  // if you have laravel installed globally or
composer create-project --prefer-dist laravel/laravel todolist

setup databases .

I will use MySQL as a database , but you can use what ever you want, just make sure to add the right configuration

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todolist // your database name
DB_USERNAME=root // your database user name
DB_PASSWORD= // your database password

Do not forget to make start for Apache and MySQL in XAMPP control panel.

make model

when you create a new Laravel project , a User model will be already created for you , and for now we need to make a Item model, and -m to make migration.

php artisan make:model Item -m

Now we need to create a new schema for item table and fill it with the required column names, so fill in the up function inside your new Item migration file the following code:

So go to app\database\migrations\some-date_create_items_table.php

make migration to Item , to connect it to your database and make the corresponding tables .

php artisan migrate

You can see now that your tables exist in your database .

- make controllers

controllers are a classes to manage the behavior of handling requests ,for example ItemController class might handle all incoming requests related to users, including showing, creating, updating, and deleting users. By default, controllers are stored in the app/Http/Controllers directory.

we will make controllers for Item, make sure to make the name in CamelCase :

php artisan make:controller ItemController --resource

Now we need to point some routes in controller class , Usually we do it in web.php so when working with blade template we usually create the routes and make a blade templates in resources/views/web.php ,

But for now we will do it in : Routes > api

add the following code to ItemController

run the following commands one by one in your project terminal , so you run the Laravel backend app

php artisan serve

and go to http://127.0.0.1:8000/ so you can watch your new todolist app.

NOTE : you will not see anything for now but , I need to run the server to check the routed with postman .

Now we can use postman as is an API client that makes it easy for developers to create, share, test and document APIs.

at first lets add an item , make sure to make Headers ( Content-Type : application/json ) so if you add the link with POST method : http://127.0.0.1:8000/api/item/store

and write some todo item in the body :

Now after you create your first todo item in the previous step lets check the Get method , you do not need to add any thing to headers or the body in this case :

http://127.0.0.1:8000/api/items

And now to check the put method, let’s modify the first created item

in postman with PUT method and the link :

http://127.0.0.1:8000/api/item/1

, make sure to make Headers ( Content-Type : application/json ), and the body as the following picture :

And the last method which is DELTE method, you do not have to add any thing to headers or body .

http://127.0.0.1:8000/api/item/1

After preparing the backend , we need to make the frontend part with Vue js .

2- Add Vue js as a frontend :

In a new terminal do the following commands one by one :

npm install
npm install vue

in resources/js dir make a new folder with name vue or components , where you can add your new vue js files

For Styling I will use bootstrap , so we need to install it in the following commands one by one :

composer require laravel/ui
php artisan ui bootstrap
npm install bootstrap@next @popperjs/core --save-dev
npm install bootstrap @popperjs/core --save-dev
npm install
npm run dev

Before continue with the frontend part we need to adjust welcome.blade.php by clean the body and add the code :

and in webpack.mix.js we need to add .vue() , so the code with be like the following :

3- Make the components and Api preparation :

In resources/js/app.js you need to import vue , so add the following code to it .

NOTE: that we import App from components/app.vue , which we will create and add some code to it in the next step .

Now working with the new components folder where we will add the new files : app.vue, addItemForm.vue, listItem.vue, listView.vue

In app.vue add the following code :

AddItemForm.vue

listView.vue

listItem.vue

Now in your terminal make the command

npm run hot

Hot Module Replacement (or Hot Reloading) allows you to, not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser.

You can see now your todo list app in your browser http://127.0.0.1:8000/

You can check the code in this repo on GitHub

Thanks for reading :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdullah Al Hommada

Abdullah Al Hommada

Full Stack Web Developer with a great passion for creating beautiful projects. aalhommada.com