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.
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_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.
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
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 :
And now to check the put method, let’s modify the first created item
in postman with PUT method and the link :
, 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 .
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 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 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 :
Now in your terminal make the command
npm run hot
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
this repo is a sample of making api between Laravel 8 (backend) and Vue js 3 (frontend). it is simple todolist app…
Thanks for reading :)