In this article series we are understanding CRUD (Create, Read, Update, Delete) operations in detail with the help of Laravel framework. In the first article we covered the steps of saving the data and creating a connection to the database. In this new article we will specifically understand the process of fetching the data and displaying it in a table format.
Steps to get and display data:
- Create File and Table: Firstly we will create a blade file in which structure of table will be defined using HTML and Bootstrap.
- Write Code: Write code to fetch and display data: In this step we will fetch data from the database and display it in a table.
Note: If you need help with database connection and data saving steps, you can refer to the earlier article which explains the topics in detail.
Create File:
In this step we will create a file named “show.blade.php”. In this file we will use HTML and Bootstrap to create a stylish and responsive table that will display the data retrieved from the database.
@extends('crud.layout')
@section('content')
<div class="container mt-5 p-0">
<div class="row">
<div class="col-lg-12">
<div class="card align-middle">
<div class="card-header">
<div class="col-lg-6">
<h4>Crud Operation In Laravel - Crud Table</h4>
</div>
<div class="col-lg-6 aling">
<a class="add_link" href="{{route('form')}}">Add New</a>
</div>
</div>
<div class="card-body">
<table class="table table-dark table-striped table-bordered table-hover table-responsive table-lg-responsive align-middle">
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<thead>
<tr>
<th>S NO</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Profile</th>
<th>Update Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user</td>
<td>user1@gmail.com</td>
<td>123123123</td>
<td>
<img class="img-fluid img-thumbnail" src="{{ asset('http://127.0.0.1:8000/crud_asset/image/user_1739027156.png') }}" style="width: 100px; height:50px">
</td>
<td><a href="#" class="password_update_link">Update Password</a></td>
<td>
<a href="#" class="update_link">Update</a>
<a href="#" class="delete_link">Delete</a>
</td>
</tr>
<tr>
<td>1</td>
<td>user</td>
<td>user1@gmail.com</td>
<td>123123123</td>
<td>
<img class="img-fluid img-thumbnail" src="{{ asset('http://127.0.0.1:8000/crud_asset/image/user_1739027495.jpg') }}" style="width: 100px; height:50px">
</td>
<td><a href="#" class="password_update_link">Update Password</a></td>
<td>
<a href="#" class="update_link">Update</a>
<a href="#" class="delete_link">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
HTML layout and card setup:
- The code has created a card titled "CRUD operations in Laravel - CRUD table".
- Inside it is a link "Add new" which is used to add a new record.
Displaying data in a table:
- Data is displayed inside a table, such as users' names, emails, contacts, and their profile pictures.
- There is an "Update password" link for each user and buttons for update/delete.
Displaying success/error messages:
- If an action is successful (such as add or update a record), a success message is displayed.
- If an error occurs, an error message is displayed, such as data failure.
Write Code for fetch the data:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\crud\CrudController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
// Route::get('/', function () {
// return view('welcome');
// });
Route::get('/', [CrudController::class, 'index'])->name('form');
Route::post('/submit_data', [CrudController::class, 'submit'])->name('submit.form');
Route::get('/crud/data', [CrudController::class, 'showdata'])->name('view.data');
<?php
namespace App\Http\Controllers\Crud;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\crud\CrudModel;
use Hash;
class CrudController extends Controller
{
public function showdata()
{
$cruddata = CrudModel::all();
return view('crud.pages.show', compact('cruddata'));
}
}
This code is from a Laravel controller named CrudController. The controller's job is to handle that request and return the appropriate response. In this case CrudController is given a method named showData(). The method uses CrudModel::all() which fetches all the records from CrudModel. These records are stored in a variable $crudata. After that, this data is passed to the view using compact('crudata').
Compact('crudata') means that the cruddata variable is being compressed into a file. The view file is referenced from crud.pages.show which is a blade view. This view will show the file USS data which is passed by the controller. This is how this code fetches data from the backend and shows it to the user on the frontend.
The main purpose of this code is to create a CRUD (create, read, update, delete) application. But in this case, only the "read" operation is performed. The showdata() method is just there to fetch the data and return a view. This controller is used to display data on a web page, and the data is simply retrieved and displayed to the user.
Code for the display the data:
@extends('crud.layout')
@section('content')
<div class="container mt-5 p-0">
<div class="row">
<div class="col-lg-12">
<div class="card align-middle">
<div class="card-header">
<div class="col-lg-6">
<h4>Crud Operation In Laravel - Crud Table</h4>
</div>
<div class="col-lg-6 aling">
<a class="add_link" href="{{route('form')}}">Add New</a>
</div>
</div>
<div class="card-body">
<table class="table table-dark table-striped table-bordered table-hover table-responsive table-lg-responsive align-middle">
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<thead>
<tr>
<th>S NO</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Profile</th>
<th>Update Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@php
$numver = 1;
@endphp
@foreach ($cruddata as $keys => $cruddata_val)
<tr>
<td>{{$numver++}}</td>
<td>{{$cruddata_val->name}}</td>
<td>{{$cruddata_val->email}}</td>
<td>{{$cruddata_val->contact}}</td>
<td>
<img class="img-fluid img-thumbnail" src="{{asset('crud_asset/image/'). '/'. $cruddata_val->profile}}" style="width: 100px; height:50px">
</td>
<td><a href="{{route('passwordview.data', ['id' => $cruddata_val->id])}}" class="password_update_link">Update Password</a></td>
<td>
<a href="{{route('updateview.data', ['id' => $cruddata_val->id])}}" class="update_link">Update</a>
<a href="{{route('delete.data', ['id' => $cruddata_val->id])}}" class="delete_link">Delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
Is using a foreach loop in the code, wherein each item of the $cruddata array is being processed through the loop. In each iteration $cruddata_val will be a user's data, such as name, email, contact, and profile image, displayed in a table row.
Each user's data is displayed in a table row by row, first showing the user's serial number ($number++), then their name, email, contact number, and profile image. For the profile image, the path to the image is dynamically generated using the asset() function.
Lastly, each row has links for actions such as "update password", "update", and "delete". When the user clicks on "update password" or "update" or "delete", it will redirect to the respective routes specifying the route() function.