Laravel , CRUD ( create, read, update and delete ) app, with Tailwind CSS and Blade.

from pixabay

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.
• Blade template : Blade is the simple, yet powerful templating engine that is included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates.
• Tailwind css: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

What will be covered :

• initial Laravel app
• make Model, Controllers, and connect to database
• Go through CRUD (create, read, update, delete ) and explain the step of every one of it.
• work with Blade to show the the front end of the app.

- make new Laravel project

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

make a new project with name blog

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

make the tailwind ui auth with the commands:

composer require laravel-frontend-presets/tailwindcss --dev  // to //                                           install the preset
php artisan ui tailwindcss --auth
npm install && npm run dev
php artisan serve  // then go to localhost:8000 so you can see your   //                     new laravel app.

you can see now that there is a new folders in view directory , with names : auth and layout . and see that there is a new folders in public folder for css and js, in css directory you can see app.css which contain tailwind css style.

for more information about installing tailwind ui auth with laravel you can check the link : https://laravel-frontend-presets.github.io/tailwindcss/

As a side note , if you have a problem with laravel mix ,you have to run

npm run dev

and if it did not work just make the following commands:

npm remove laravel-mix
npm install laravel-mix --save-dev
npm install cross-env --save-dev
npm rum watch

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=blog // your database name 
DB_USERNAME=root // your database user name 
DB_PASSWORD=     // your database password

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 Post model

php artisan make:model Post

you need to add the following code inside your new Post Model , so go to app/Models/Post.php

• note that the protected $fillable values tell the app which values need to be filled and be shown
• the function user : used to show that every post belong to a user, so we can get the name of the user that make the post , as we will see later.
• the function sluggable : used to make a slug ( which can used as a friendly title) from the title of the post , you have to install it first through composer .

read more a bout sluggable package in the link https://github.com/cviebrock/eloquent-sluggable#installation

app/Models/Post.php

make migration post

php artisan make:migration posts

now you have a new php file in database/migrations/some_date_create_post_posts.php

To create a new schema for a posts table and fill it with the required column names, fill in the up function the following code

database/migrations/date_create_post_table.php

make the command migrate so you migrate the tables to the database, so it create it for you in your database

php artisan migrate

- make controllers

controllers are a classes to manage the behavior of handling requests ,for example UserController 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 pages and for posts

php artisan make:controller PagesController 
php artisan make:controller PostsController --resource

In PagesController add the following code :

app/Http/Controllers/PagesController.php

In PostsController come in our case most of the CRUD work .

add the following code in PostsController:

app/Http/Controllers/PostsController.php

In PostsController you can see all the resources ( which mean create, read , update, delete ) actions already created for us when we add — resource to the command that create PostsController

- Make view pages

the main page :

make in resources/view directory a new file index.blade.php , and remove web.blade.php, and add the following code to it

resources/views/index.blade.php

Make another page in the same root with the name search.blade.php , where we will use it for search functionality

resources/views/search.blade.php

In resources/view/layout/app.blade.php , adjust the layout as you wish , note that above the @guest in line 32 add

<a class="no-underline hover:underline" href="/">Home</a>
<a class="no-underline hover:underline" href="/blog">Blog</a>

which are the links for the different pages in the navbar , so in my case it will be links for HOME and BLOG pages:

resources/views/layouts/app.blade.php

Make a simple footer footer.blade.php , and add it in the layouts dir

resources/views/layouts/footer.blade.php

So now you can see the web app working

you can see the code for this app in the repo :

aalhommada/laravel-crud

You can check the web app after deploying to heroku in the link:

Laravel

Thanks for reading :)

If you are interested to read more about different subjects, please visit my blog : https://aalhommada.com/blog