×

CRUD System app in Laravel 9

CRUD System app in Laravel 9

LARAVEL Aug 12, 2023 Super Admin LARAVEL
LARAVEL

Laravel 9 CRUD System with an Tutorial for new student who are learning laravel, In this tutorial you will learn all step how to make form and table for laravel 9 crud system using bootstrap as designing.

CRUD simple mean: Its a major system in every computer programming language which are dealing with database. Here C mean create a new record in database table, R mean read a data from database table, U mean update a record in database table and D mean deleting a record in table which user want.

In this laravel app we will validate all inputs with error message for user to see whats wrong. Also upload a picture into database with validation and store into our project storage for our use.

CRUD system in Laravel 9

This tutorial follow the following steps for development of CRUD system:

  • Creating a new Laravel Project
  • Configuration
  • Customer model and Migration creating using Artisan Command
  • Customer Controller creating using artisan Command
  • Adjusting Routes
  • Blade files for Views
    1. Customer_new.blade.php
    2. Customer_update.blade.php
    3. Customer_list.blade.php
  • Project running in local server

Step 1: Creating a new Laravel Project

For this CRUD system we need firstly a Laravel project which we will create using Artisan comand. Open CMD and select a directory where you want to install project and write this command.

Composer create-project laravel/laravel CRUD

Step 2: Databse Configuration

Run Xampp/Wampp server and create a new database with the name of crud and open .env files in project and change database name.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud
DB_USERNAME=root
DB_PASSWORD=

Step 3: Customer model and Migration creating

Php artisan make:model Customer -m

Run this command for creating of Customer model and migration file which are located in Models App/Models/Customer.php and migration file in Database/migrations/2022_07_15_153837_create_ customers_table.php then open migration file and update up() function.

public function up()
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('customer_name');
            $table->string('customer_email');
            $table->string('customer_phone');
            $table->string('customer_bio');
            $table->timestamps();
        });
    }

After updating of migration file open again CMD and run this command

php artisan migrate

for tables migration indatabase

Step 4: Customer Controller creating

After migration wee need a Controller which we use to perform action for CRUD system. Use this command to create controller:

php artisan make:controller CustomerController

Then open controller which is located at App/Http/Controller/CustomerController and update with given code:

<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use App\Models\Customers;

class CustomerController extends Controller
{
    public function customer_show(){
        return view('customer.customer_new');
    }

    /* Data storing into database  */
    public function customer_save(Request $request){
        $request->validate([
            'name'=>'required',
            'email'=>'required',
            'phone'=>'required',
            'bio'=>'required'
        ]);

        $data = new Customers;
        $data->customer_name = $request->name;
        $data->customer_email = $request->email;
        $data->customer_phone = $request->phone;
        $data->customer_bio = $request->bio;

        $data->save();
        return redirect('/')->with('success','New Customer Added!');
    }

    //Fetching data and showing into a file
    public function customer_records(){
        $data = Customers::all();
        return view('/customer.customer_list', ['show_data'=>$data]);
    }

    //For fecthing for specific record update/dell
    public function customer_edit($id){
        $customer = Customers::where('id',$id)->first();
        return view('/customer.customer_update', ['customer_update' =>$customer]);

    }

      //updating customer record
    public function upp(Request $req, $id){
        $customer = Customers::where('id', $id)->first();
        $customer->customer_name = $req->name;
        $customer->customer_email = $req->email;
        $customer->customer_phone = $req->phone;
        $customer->customer_bio = $req->bio;
        $customer->save();
        return redirect('/')->with('success','Customer Record Updated!');
    }
    //customer delete method
    public function customer_delete($id){
        $customer = Customers::where('id', $id)->first();
        $customer->delete();
        return redirect('/')->with('success','Customer Record Deleted!');
    }
}

Step 5: Adjusting Routes

For routes creating open web.php file which is located in routes/web.php and paste given code int it:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CustomerController;

//Admin Routes
Route::get('/customer_new', [CustomerController::class, 'customer_show']);
Route::post('/customer_save', [CustomerController::class, 'customer_save']);

Route::get('/', [CustomerController::class, 'customer_records']);

//Fetching a specific record
Route::get('/customer_update/{c_id}', [CustomerController::class, 'customer_edit']);

//Updating a specific record
Route::put('/up/{c_id}', [CustomerController::class, 'upp']);

//For delete a record
Route::get('/customer_delete/{d_id}', [CustomerController::class, 'customer_delete']);

Step 6: Creating View/Blade files:

First of all create a customer folder in resource/view folder then create:

  • customer_list.blade.php
  • customer_new.blade.php
  • customer_update.blade.php

Customer_list.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Customer List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-xl">
        <div class="row pt-5">
        <div class="col-md-12">
            <a href="/customer_new" class=" btn btn-sm btn-primary mb-3">Create New Customer</a>
            <div class="card">
                <div class="card-header text-center bg-primary">
                    Customers List
                </div>
                <div class="card-body">
                    @if(session('success'))
                       <div class="alert alert-warning">
                        <h5 class="text-center">{{session('success')}}</h5>
                       </div>
                    @endif
                    <table class="table">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Phone</th>
                            <th scope="col">Bio</th>
                            <th scope="col">Action</th>

                          </tr>
                        </thead>
                        <tbody class="table-group-divider">
                          @foreach ($show_data as $customer)
                          <tr>
                            <td>{{$customer->id}}</td>
                            <td>{{$customer->customer_name}}</td>
                            <td>{{$customer->customer_email}}</td>
                            <td>{{$customer->customer_phone}}</td>
                            <td>{{$customer->customer_bio}}</td>
                            <td>
                                <a href="/customer_update/{{$customer->id}}" class="btn btn-sm btn-info">Update</a>
                                <a href="/customer_delete/{{$customer->id}}" class="btn btn-sm btn-danger">Delete</a>
                            </td>
                          </tr>
                          @endforeach

                        </tbody>
                      </table>
                </div>
            </div>
        </div>
        </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Then

Customer_new.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Customer New Record</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-xl">
        <div class="row pt-5">
        <div class="col-md-12">
            <a href="/" class=" btn btn-sm btn-primary mb-3">Customer Records</a>
            <div class="card">
                <div class="card-header text-center bg-primary">
                    Add New Record
                </div>
                <div class="card-body">
                    <form action="{{url('/customer_save')}}" method="post">
                        @csrf
                        <div class="form-group m-3">
                            @if ($errors->has('name'))
                                <p class="text-danger">{{$errors->first('name')}}</p>
                            @endif
                           <label for="customer_name">Enter Your Name</label>
                            <input type="text" value="{{old('name')}}" name="name" class="form-control" id="">
                        </div>
                        <div class="form-group m-3">
                            @if ($errors->has('email'))
                            <p class="text-danger">{{$errors->first('email')}}</p>
                        @endif
                            <label for="customer_email">Enter Your Email</label>
                            <input type="email" value="{{old('email')}}" name="email" class="form-control" id="">
                        </div>
                        <div class="form-group m-3">
                            @if ($errors->has('phone'))
                            <p class="text-danger">{{$errors->first('phone')}}</p>
                        @endif
                            <label for="customer_phone">Enter Your Phone</label>
                            <input type="text" name="phone" value="{{old('phone')}}" class="form-control" id="">
                        </div>
                        <div class="form-group m-3">
                            @if ($errors->has('bio'))
                            <p class="text-danger">{{$errors->first('bio')}}</p>
                        @endif
                            <label for="customer_bio">Enter Your Bio</label>
                            <textarea class="form-control" name="bio" value="{{old('bio')}}" rows="5"></textarea>
                        </div>
                       <div class="form-group m-3">
                        <input type="submit" value="Save Data" class="btn btn-info">
                       </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Then

Customer_update.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Customer Update</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-xl">
        <div class="row pt-5">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-header text-center bg-primary">
                    Update Customer Record
                </div>
                <div class="card-body">
                    <form action="/up/{{$customer_update->id}}" method="post">
                        @method('put')
                        @csrf
                        <div class="form-group mb-3">
                            <input type="text" name="name" value="{{$customer_update->customer_name}}" class="form-control">
                        </div>
                        <div class="form-group mb-3">
                            <input type="email" name="email" value="{{$customer_update->customer_email}}" class="form-control">
                        </div>
                        <div class="form-group mb-3">
                            <input type="number" name="phone" value="{{$customer_update->customer_phone}}" class="form-control">
                        </div>
                        <div class="form-group mb-3">
                            <textarea name="bio" id="bio" rows="10" class="form-control">{{$customer_update->customer_bio}}</textarea>
                        </div>
                        <div class="form-group">
                           <input type="submit" value="Update" class="btn btn-info form-control">
                        </div>
                    </form>
                </div>
            </div>

        </div>
        </div>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

 

Step 7: Project running in local server

At the end for project running open your CMD and run this command:

php artisan serve

so open your project by given link:

localhost:8000

Thank you for reading this tutorial!

 

 


Tags

PHP LARAVEL HTML JAVASCRIPT JAVA

Your experience on this site will be improved by allowing cookies Cookie Policy