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 todolistsetup 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 passwordDo 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 -mNow 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 --resourceNow 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 vuein 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 devBefore 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 hotHot 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 :)
If you are interested to read more about different subjects, please visit my blog : https://aalhommada.com/blog
