Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create Controller
php artisan make:controller StudentController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller StudentController
app\Http\Controllers\StudentController.php
//app\Http\Controllers\StudentController.php
<?php
namespace App\Http\Controllers;
use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Models\Student;
class StudentController extends Controller
{
public function index()
{
return view('students');
}
public function records(Request $request)
{
if ($request->ajax()) {
if ($request->input('start_date') && $request->input('end_date')) {
$start_date = Carbon::parse($request->input('start_date'));
$end_date = Carbon::parse($request->input('end_date'));
if ($end_date->greaterThan($start_date)) {
$students = Student::whereBetween('created_at', [$start_date, $end_date])->get();
} else {
$students = Student::latest()->get();
}
} else {
$students = Student::latest()->get();
}
return response()->json([
'students' => $students
]);
} else {
abort(403);
}
}
}
Database Migration php artisan make:model Student -m
C:\xampp\htdocs\laravel\my-app>php artisan make:model Student -m
database/migrations/create_students_table.php
//database/migrations/create_students_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('standard');
$table->integer('percentage');
$table->string('result');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('students');
}
};
run this migration
C:\xampp\htdocs\laravel\my-app>php artisan migrate
database table data
CREATE TABLE `students` (
`id` bigint(20) UNSIGNED NOT NULL,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`standard` int(11) NOT NULL,
`percentage` int(11) NOT NULL,
`result` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `students` (`id`, `name`, `standard`, `percentage`, `result`, `created_at`, `updated_at`) VALUES
(1, 'Cairocoders Ednalan', 5, 75, '75', '2022-12-01 08:38:25', '2022-12-02 02:56:45'),
(2, 'Charde Marshall', 8, 75, '75', '2022-12-02 16:00:00', '2022-12-03 03:23:50'),
(3, 'Airi Satou', 7, 85, '85', '2022-12-03 16:00:00', '2022-12-05 03:24:27'),
(4, 'Angelica Ramos', 5, 95, '95', '2022-12-22 00:38:25', '2022-12-22 00:38:25'),
(5, 'Ashton Cox', 6, 95, '95', '2022-12-22 00:38:25', '2022-12-22 00:38:25'),
(6, 'Bradley Greer', 7, 80, '80', '2022-12-22 00:38:25', '2022-12-22 00:38:25'),
(7, 'Brenden Wagner', 8, 80, '82', '2022-12-22 00:38:25', '2022-12-22 00:38:25'),
(8, 'Brielle Williamson', 9, 85, '85', '2022-12-22 00:38:25', '2022-12-22 00:38:25'),
(9, 'Bruno Nash', 10, 80, '86', '2022-10-04 03:25:23', '2022-10-06 03:25:23'),
(10, 'Caesar Vance', 7, 90, '90', '2022-11-01 03:25:23', '2022-11-01 03:25:23'),
(11, 'Cara Stevens', 8, 90, '91', '2023-01-02 03:25:23', '2023-01-02 03:25:23'),
(12, 'Cedric Kelly', 2, 90, '92', '2023-01-01 03:25:23', '2023-01-01 03:25:23');
View Blade Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
https://datatables.net/
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
resources/views/students.blade.php
https://jqueryui.com/datepicker/
//resources/views/students.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 Datatables Date Range Filter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="text-center">Laravel 9 Datatables Date Range Filter</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text btn btn-primary text-white" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" id="start_date" placeholder="Start Date" readonly>
</div>
</div>
<div class="col-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text btn btn-primary text-white" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" id="end_date" placeholder="End Date" readonly>
</div>
</div>
</div>
<div>
<button id="filter" class="btn btn-primary">Filter</button>
<button id="reset" class="btn btn-warning">Reset</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table class="display" id="records" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Standard</th>
<th>Percentage</th>
<th>Result</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!-- Datatables -->
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<!-- Momentjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
$(function() {
$("#start_date").datepicker({
"dateFormat": "yy-mm-dd"
});
$("#end_date").datepicker({
"dateFormat": "yy-mm-dd"
});
});
// Fetch records
function fetch(start_date, end_date) {
$.ajax({
url: "{{ route('students/records') }}",
type: "GEt",
data: {
start_date: start_date,
end_date: end_date
},
dataType: "json",
success: function(data) {
// Datatables
var i = 1;
$('#records').DataTable({
"data": data.students,
// responsive
"responsive": true,
"columns": [{
"data": "id",
"render": function(data, type, row, meta) {
return i++;
}
},
{
"data": "name"
},
{
"data": "standard",
"render": function(data, type, row, meta) {
return `${row.standard}th Standard`;
}
},
{
"data": "percentage",
"render": function(data, type, row, meta) {
return `${row.percentage}%`;
}
},
{
"data": "result"
},
{
"data": "created_at",
"render": function(data, type, row, meta) {
return moment(row.created_at).format('DD-MM-YYYY');
}
}
]
});
}
});
}
fetch();
// Filter
$(document).on("click", "#filter", function(e) {
e.preventDefault();
var start_date = $("#start_date").val();
var end_date = $("#end_date").val();
if (start_date == "" || end_date == "") {
alert("Both date required");
} else {
$('#records').DataTable().destroy();
fetch(start_date, end_date);
}
});
// Reset
$(document).on("click", "#reset", function(e) {
e.preventDefault();
$("#start_date").val(''); // empty value
$("#end_date").val('');
$('#records').DataTable().destroy();
fetch();
});
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
>?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
use App\Http\Controllers\StudentController;
//Route::get('/', function () {
// return view('welcome');
//});
Route::get('students', [StudentController::class, 'index'])->name('students');
Route::get('students/records', [StudentController::class, 'records'])->name('students/records');
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
