CRUD System app in Laravel 9
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
- Customer_new.blade.php
- Customer_update.blade.php
- 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:
Thank you for reading this tutorial!