## Table of contents - [Introduction](#introduction) - [Overview](#overview) - [Prerequisite](#prerequisite) - [Set up the project](#set-up-our-project) - [The database](#database) - [Model and migration](#model-and-migration) - [Dummy data](#dummy-data) - [The Controller](#controller) - [Views](#views) - [Routes](#routes) - [Conclusion](#conclusion) ## Introduction **Laravel** is a web application framework with expressive, elegant syntax. An awesome tool for building web apps. **Tailwindcss** is a utility-first CSS framework packed with many classes that can be composed to build any design, directly in your markup. In this tutorial we are going to use those tools to build a simple CRUD. If you are not familiar with this term **CRUD** simply means **create**, **read**, **update**, and **delete** which are the four basic operations of persistent storage. ## Overview Some screenshots of what we are going to build. ***posts list*** ![posts_list.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630493297953/IsBhmgQ4N.png) ***create post form*** ![create_post.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630492453661/khHYFVMNP.png) ***edit post form*** ![edit_post.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630492492298/_iJuBGQKW.png) ## Prerequisite I suppose that you already have **PHP**, **Composer **and a DBMS like **MYSQL **in your pc. I also suppose that you have basic knowledge in Laravel. ## Set up our project The first thing we need is to create a new laravel project. It is pretty simple, open your terminal and type the command below: ```bash composer create-project laravel/laravel laravel8-crud ``` After that, open the project folder with your favorite IDE or code editor and edit the `.env` file by filling your database name and credentials. ```.env DB_DATABASE=laravel8crud DB_USERNAME=root DB_PASSWORD= ``` We are ready to go. After setting the database credentials, we need to create a table and fill it with some dummy data is the model and migration. Let's create a model called **Post** and its migration file. ## Database Create a `Post` model and its migration with this command. ```bash php artisan make:model Post -m ``` When we type the command above, Laravel create two files. The first one is `Post.php`. ### Model and migration ***App/Models/Post.php*** ```php id(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } } ``` This file will help us to define the structure of our `posts` table in the database. We are going to fill it to match our needs. One post will have a `title` and a `content`. Update the file content with the code below. ***database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php*** ```php id(); $table->string('title'); $table->text('content'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } } ``` Let's move on and create some dummy posts with **factories** and **seeders**. ### Dummy data To create a factory, just type the command below command inside your project. ```bash php artisan make:factory PostFactory -m Post ``` We use `-m Post` to tell Laravel to generate a factory for our Post model. Update its contains with the code below. ***database/factories/PostFactory.php*** ```php Str::title($this->faker->sentence()), 'content' => $this->faker->text() ]; } } ``` We use faker PHP library to generate a random text for our title and content. After the Factory, we need a Seeder to use it. The command below will do the job for us. ```bash php artisan make:seeder PostSeeder ``` We have a new file inside the database/seeders folder called `PostSeeder.php`. Just update its contain with the code below. ***database/seeders/PostSeeder.php*** ```php create(); } } ``` We are almost done with the database, all we need to do is to run our migration and seed the database with fake posts. Type the two command below and we are ready to go. ```bash php artisan migrate ``` ```bash php artisan db:seed --class=PostSeeder ``` Now that we have our fifteen fake posts, we are going to create a controller to handle our logic. ## Controller The command below create A resource controller and also tell Laravel to fill it with our Post model. ```bash php artisan make:controller PostController --resource -m Post ``` Update its contain with the code below. ***App/Http/Controllers/PostController.php*** ```php paginate(10); return view('posts.index', compact('posts')); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { return view('posts.create'); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { $data = $request->validate([ 'title' => 'required', 'content' => 'required' ]); Post::create($data); return redirect()->route('posts.index')->with('success', 'Post created successfuly!'); } /** * Display the specified resource. * * @param \App\Models\Post $post * @return \Illuminate\Http\Response */ public function show(Post $post) { return view('posts.show', compact('post')); } /** * Show the form for editing the specified resource. * * @param \App\Models\Post $post * @return \Illuminate\Http\Response */ public function edit(Post $post) { return view('posts.edit', compact('post')); } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param \App\Models\Post $post * @return \Illuminate\Http\Response */ public function update(Request $request, Post $post) { $data = $request->validate([ 'title' => 'required', 'content' => 'required' ]); $post->update($data); return redirect()->route('posts.index')->with('success', 'Post updated successfuly!'); } /** * Remove the specified resource from storage. * * @param \App\Models\Post $post * @return \Illuminate\Http\Response */ public function destroy(Post $post) { $post->delete(); return redirect()->route('posts.index')->with('success', 'Post deleted successfuly!'); } } ``` Let me explain what we do in the code of the *controller* above. The **index** method stand for the page which will show the posts list. The other methods are well named so I think that we don't need more explanation. We have finished with our controller, we can make views to finally see the result in the browser. Create two folders named *layouts* and *posts* inside the **resources/views** folder. In the first folder(layouts). ## Views Create a blade file named *app.blade.php* and fill it with the code below. This file is our base layout, we are going to extend it and use its contain in other views. Thanks to `blade`, a template engine. ***resources/views/layouts/app.blade.php*** ```html @yield('title') - Laravel 8 CRUD {{-- Tailwindcss --}} @yield('content') ``` Inside the second folder(*posts*), let's create a file named `index.blade.php`. Fill the file with the code below. In case that you are confuse or don't understand something in this file, let me say you that it is just a loop for our posts list and a button(*New*) for opening the `create post page`. ***resources/views/posts/index.blade.php*** ```html @extends('layouts.app') @section('title', 'Posts') @section('content')

Posts

New

@if (session('success'))

Success

@endif

@foreach ($posts as $post)

@endforeach

@endsection ``` Now that our list of posts is ready, we are going to make a page and add form inside it. The form will help us create new posts. ***resources/views/create.blade.php*** ```html @extends('layouts.app') @section('title', 'Create post') @section('content')

Create a post

@endsection ``` We need a similar form to edit our posts. ***resources/views/posts/edit.blade.php*** ```html @extends('layouts.app') @section('title', 'Edit post') @section('content')

Edit a post

@endsection ``` Well, our views are ready, the final touch are routes. ## Routes Update the ***routes/web.php*** file. ```php

Posts

{{ $post->title }}

Create a post

Edit a post

samankassou

Make a simple CRUD with Laravel 8

Join Our Newsletter. No Spam, Only the good stuff.