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

from pixabay

What we will work with :

What will be covered :

- 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 presetphp 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

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.blage.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 :

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

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

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