The theme comes with an out of the box user management app. We have integrated this app using Ajax.
User
to perform the CRUD.
To access CRUD app, click the Laravel Examples/User Management
link in the left sidebar or add /laravel/user-management
to the URL.
The first thing you will see is a list of existing users. We have used Datatable in our app. Datatable provides ajax support to perform CRUD in the database.
Here you can see how we implemented datatable with Laravel.
<table class="datatables-users table">
<thead class="table-light">
<tr>
<th></th>
<th>Id</th>
<th>User</th>
<th>Email</th>
<th>Verified</th>
<th>Actions</th>
</tr>
</thead>
</table>
In datatable
, We have used processing: true
and serverSide: true
options to handle pagination
, search
, and page length
from the server-side.
Note: We have initialized datatables with column options to achieve better UI for User management app
// ajax setup
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var dt_user = dt_user_table.DataTable({
processing: true,
serverSide: true,
ajax: {
url: baseUrl + 'user-list',
dataSrc: function (json) {
ids = 0;
return json.data;
}
},
...
...
return data ? $('<table class="table"/><tbody />').append(data) : false;
}
}
}
});
We have created a resource controller to handle all the create, read, update, and delete ('CRUD') actions. You can find this resource controller at app -> Http -> Controllers -> laravel_example -> UserManagement.php
location.
In UserManagement
Controller, we have a public function called index
which handles the datatable's Ajax call to retrieve data.
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$columns = [
1 => 'id',
2 => 'name',
3 => 'email',
4 => 'email_verified_at',
];
...
...
if ($data) {
return response()->json([
'draw' => intval($request->input('draw')),
'recordsTotal' => intval($totalData),
'recordsFiltered' => intval($totalFiltered),
'code' => 200,
'data' => $data,
]);
} else {
return response()->json([
'message' => 'Internal Server Error',
'code' => 500,
'data' => [],
]);
}
}
We have a resource route that points to the resource Controller.
use App\Http\Controllers\laravel_example\UserManagement;
Route::resource('/user-list', UserManagement::class);
You can add new ones by clicking the Add New User
button (above the table on the right). On the Add user right sidebar, you will find a form that allows you to fill out the user`s name, email, contact, company, country, role, and plan. All pages are generated using blade templates.
We had provided an update/edit icon to update the user's information.
<!-- Offcanvas to add new user -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
<div class="offcanvas-header">
<h5 id="offcanvasAddUserLabel" class="offcanvas-title">Add User</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body mx-0 flex-grow-0">
<form class="add-new-user pt-0" id="addNewUserForm">
...
...
</form>
</div>
</div>
When we click on the update/edit icon. We are performing an Ajax
GET
request to retrieve the user.
// edit record
$(document).on('click', '.edit-record', function () {
var user_id = $(this).data('id');
// changing the title of offcanvas
$('#offcanvasAddUserLabel').html('Edit User');
// get data
$.get(`${baseUrl}user-list\/${user_id}\/edit`, function (data) {
$('#user_id').val(data.id);
$('#add-user-fullname').val(data.name);
$('#add-user-email').val(data.email);
});
});
The above GET
request is handled by the edit
function of the controller.
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id): JsonResponse
{
$user = User::findOrFail($id);
return response()->json($user);
}
We are validating create/update form using the formValidation javascript plugin. After successfully validating the form, we perform an Ajax POST
request to create/update the user.
// user form validation
const fv = FormValidation.formValidation(addNewUserForm, {
fields: {
name: {
validators: {
notEmpty: {
message: 'Please enter fullname'
}
}
},
...
...
}
});
});
In the UserManagement
controller, the store
function handles update/create requests.
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$userID = $request->id;
if ($userID) {
// update the value
$users = User::updateOrCreate(
['id' => $userID],
['name' => $request->name, 'email' => $request->email]
);
// user updated
return response()->json('Updated');
}
else{
...
...
}
}
To delete the user, we have provided a delete icon.
We have used sweetalert2
to get the delete confirmation.
// Delete Record
$(document).on('click', '.delete-record', function () {
var user_id = $(this).data('id');
// sweetalert for confirmation of delete
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
customClass: {
confirmButton: 'btn btn-primary me-4 waves-effect waves-light',
cancelButton: 'btn btn-outline-secondary waves-effect'
},
buttonsStyling: false
}).then(function (result) {
...
...
}
});
});
In the UserManagement
controller, destroy
function handles the delete request.
public function destroy($id)
{
$users = User::where('id', $id)->delete();
}
In default laravel migration schema,the password is not a nullable field. You must have to provide a password when you create a user.
Handling password is a complex strategy. There are lots of possibilities to handle a password.
We are not getting into these complexities. We provide freedom for the user to handle passwords as per their requirement.
In our CRUD app, we have used a random string generator function to generate a password.
$userID = $request->id;
$users = User::updateOrCreate(
['id' => $userID],
['name' => $request->name, 'email' => $request->email, 'password' => bcrypt(Str::random(10))]
);
If we discuss a real-world password handling scenario, create a random password while creating a user and send them a mail to reset the password.
You can remove our CRUD app by following simple steps:
user-management.blade.php
file. You can find it at views -> content -> laravel-example -> user-management.blade.php
location.UserManagement.php
controller file. You can find it at app -> Http -> Controller -> laravel_example -> UserManagement.php
location.UserManagement.php
controller.use App\Http\Controllers\laravel_example\UserManagement;
// laravel example
Route::get('/laravel/user-management', [UserManagement::class, 'UserManagement'])->name('laravel-example-user-management');
Route::resource('/user-list', UserManagement::class);
/lang/{en|fr|de|pt}.json // localization
/resources/menu/{horizontalMenu|verticalMenu}.json // menus
/public/assets/json/{search-horizontal|search-vertical}.json // search
laravel-user-management.js
file from resources -> js -> laravel-user-management.js
.vite.config.js
file for laravel-user-management.js
....
'resources/js/laravel-user-management.js', // Processing Laravel User Management CRUD JS File
...
webpack.mix.js
file for laravel-user-management.js
.// laravel working crud app related js
mix.js('resources/js/laravel-user-management.js', 'public/js/');