Retrieve data from the database with data table using Laravel
First, install a new Laravel app just running the below command in your terminal.
composer create-project --prefer-dist laravel/laravel laravel_basicStep 2: Update Your Database Credentials
After that update your database credentials in your .env file which is located in your project root.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database passwordStep 3: Make Migration
After adding the migration file now run the migrate command.
php artisan migrateStep 4: Add in view Page
Add the below code in your home.blade.php file.
Resources/Views/errors/view_test.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>Personal</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
{{-- data table --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">
<style>
body {
color: #999;
background: #f3f3f3;
font-family: 'Roboto', sans-serif;
}
.form-control {
border-color: #eee;
min-height: 41px;
box-shadow: none !important;
}
.form-control:focus {
border-color: #5cd3b4;
}
.form-control, .btn {
border-radius: 3px;
}
.signup-form {
width: 500px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form h2 {
color: #333;
margin: 0 0 30px 0;
display: inline-block;
padding: 0 0px 10px 0;
border-bottom: 3px solid #5cd3b4;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group row {
margin-bottom: 20px;
}
.signup-form label {
font-weight: normal;
font-size: 14px;
line-height: 2;
}
.signup-form input[type="checkbox"] {
position: relative;
top: 1px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #5cd3b4;
border: none;
margin-top: 20px;
min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
background: #41cba9;
outline: none !important;
}
.signup-form a {
color: #5cd3b4;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cd3b4;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<br>
<br>
<div class="signup-form">
<form action="{{ route('form/page_test/save') }}" method="post" class="form-horizontal">
{{ csrf_field() }}
<div class="row">
<div class="col-8 offset-4">
<h2>Personal</h2>
</div>
</div>
{{-- success --}}
@if(\Session::has('insert'))
<div id="" class=" alert alert-success">
{!! \Session::get('insert') !!}
</div>
@endif
{{-- error --}}
@if(\Session::has('error'))
<div id="" class=" alert alert-danger">
{!! \Session::get('error') !!}
</div>
@endif
<div class="form-group row">
<label class="col-form-label col-4">Username</label>
<div class="col-8">
<input type="text" class="form-control @error('username') is-invalid @enderror" name="username" placeholder="Enter UserName">
@error('username')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-4">Email Address</label>
<div class="col-8">
<input type="email" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Enter Email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-4">Phone Number</label>
<div class="col-8">
<input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone" placeholder="Enter Phone number">
@error('phone')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<div class="col-8 offset-4">
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</div>
</div>
</form>
</div>
{{-- <table> --}}
<div class="container">
<div class="container-fluid">
<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Date Create at</th>
</tr>
</thead>
<tbody>
@foreach($data as $value)
<tr>
<td>{{ $value->id }}</td>
<td>{{ $value->username }}</td>
<td>{{ $value->email }}</td>
<td>{{ $value->phone }}</td>
<td>{{ $value->created_at }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
{{-- </table> --}}
{{-- js --}}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
<script>
$(document).ready(function()
{
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0]+' '+data[1];
}
} ),
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
tableClass: 'table'
} )
}
}
} );
} );
</script>
</body>
</html>
Step 5: Run Development Server
After successfully update all run the development server just adding the below command in the terminal.
php artisan serveAfter this go to the browser and check using the login page.
http://localhost/laravel_basic/public/