ArtiGrid
Login
Login with ArtiGrid
This example shows how to create a login with a custom form using ArtiGrid, PHP validation with callbacks, session handling, and frontend feedback.
1. Custom form template
$html = '
<div class="container d-flex justify-content-center align-items-center">
<div class="col-md-8 col-lg-4">
<div class="card shadow-lg border-0">
<div class="card-body p-4">
<h4 class="text-center mb-4">Login Example</h4>
<div class="mb-3">
<label class="form-label">User *</label>
{user}
</div>
<div class="mb-3">
<label class="form-label">Password *</label>
{password}
</div>
<div class="d-grid">{action}</div>
</div>
</div>
</div>
</div>';
$grid->setSelectFormTemplate($html);
The placeholders {user}, {password} y {action} They will be automatically replaced by ArtiGrid.
2. ArtiGrid login configuration
$grid->table('users')
->template('bootstrap5')
->required(false)
->validation_required('user')
->validation_required('password')
->formFields(['user','password']);
Define the required fields, the form, and the table that will be used to validate the login.
3. Callback to verify login
return [
'beforeSelect' => [
['callback' => 'login', 'file' => 'functions.php'],
]
];
The function login It is executed before processing the form to validate the username and password:
function login($data){
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
$db = DB::connect();
$user = trim($data['user'] ?? '');
$pass = trim($data['password'] ?? '');
if ($user === '' || $pass === '') {
return [
'success' => false,
'message' => 'Empty username or password'
];
}
$q = new Queryfy($db);
$row = $q->table('users')
->where('user', $user)
->limit(1)
->get();
$row = $row[0] ?? null;
if ($row && password_verify($pass, $row['password'])) {
$permissions = getPermissionsByRole($row['rol']);
$_SESSION['artigrid_auth'] = [
'id' => $row['id'],
'rol' => $row['rol'],
'usuario' => $row['user'],
'permissions' => $permissions
];
return [
'success' => true,
'message' => 'Successful login',
'redirect' => 'management.php'
];
}
return [
'success' => false,
'message' => 'Incorrect username or password'
];
}
function getPermissionsByRole($role){
$map = [
'admin' => ['add', 'view', 'edit', 'delete'],
'editor' => ['view', 'edit'],
'viewer' => ['view']
];
return $map[$role] ?? [];
}
4. Frontend Management
document.addEventListener('artigrid_select_form_response', function(e){
const { response } = e.detail;
if (response.success && response.data?.success) {
if (response.data?.redirect) window.location.href = response.data.redirect;
} else {
const msg = response.data?.message || response.message || 'Unknown error';
Swal.fire({
icon: 'error',
title: 'Error',
text: msg,
confirmButtonText: 'Accept'
});
}
});
Listen for the form response. If the login is successful, redirect; if it fails, display an error message using SweetAlert2.
<?php
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
if (isset($_SESSION['artigrid_auth'])) {
header('Location: management.php');
exit;
}
$grid = new ArtiGrid();
$html = '
<div class="container d-flex justify-content-center align-items-center">
<div class="col-md-8 col-lg-4">
<div class="card shadow-lg border-0">
<div class="card-body p-4">
<h4 class="text-center mb-4">
Login Example
</h4>
<div class="mb-3">
<label class="form-label">User *</label>
{user}
</div>
<div class="mb-3">
<label class="form-label">Password *</label>
{password}
</div>
<div class="d-grid">
{action}
</div>
</div>
</div>
</div>
</div>';
$grid->setSelectFormTemplate($html);
$grid->table('users')
->template('bootstrap5')
->required(false)
->validation_required('user')
->validation_required('password')
->formFields(['user','password']);
echo $grid->render('select');
?>
//Create the file users.php in this path: callbacks/users.php
return [
'beforeSelect' => [
['callback' => 'login', 'file' => 'functions.php'],
]
];
//in functions.php
function login($data){
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
$db = DB::connect();
$user = trim($data['user'] ?? '');
$pass = trim($data['password'] ?? '');
if ($user === '' || $pass === '') {
return [
'success' => false,
'message' => 'Empty username or password'
];
}
$q = new Queryfy($db);
$row = $q->table('users')
->where('user', $user)
->limit(1)
->get();
$row = $row[0] ?? null;
if ($row && password_verify($pass, $row['password'])) {
$permissions = getPermissionsByRole($row['rol']);
$_SESSION['artigrid_auth'] = [
'id' => $row['id'],
'rol' => $row['rol'],
'usuario' => $row['user'],
'permissions' => $permissions
];
return [
'success' => true,
'message' => 'Successful login',
'redirect' => 'management.php'
];
}
return [
'success' => false,
'message' => 'Incorrect username or password'
];
}
function getPermissionsByRole($role){
$map = [
'admin' => ['add', 'view', 'edit', 'delete'],
'editor' => ['view', 'edit'],
'viewer' => ['view']
];
return $map[$role] ?? [];
}
// in front end
<script>
document.addEventListener('artigrid_select_form_response', function(e){
const { response } = e.detail;
console.log("Answer:", response);
if (response.success && response.data?.success) {
if (response.data?.redirect) {
window.location.href = response.data.redirect;
}
} else {
const msg = response.data?.message || response.message || 'Unknown error';
Swal.fire({
icon: 'error',
title: 'Error',
text: msg,
confirmButtonText: 'Accept'
});
}
});
</script>
Authentication, Roles & Permissions
ArtiGrid provides a simple authentication helper through the
auth() method, which allows you to access the current
logged-in user stored in the session.
The auth() method returns an array with the user data, such as:
id, usuario, rol and
permissions.
You can use this information to display user details in your interface, for example showing the username and role in the UI.
Additionally, ArtiGrid includes a can() method to validate
permissions easily. This allows you to control which actions (add, edit, delete, etc.)
are available for each user based on their assigned permissions.
By combining auth() and can(), you can build
role-based access control (RBAC) in a simple and flexible way.
<?php
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
if (!isset($_SESSION['artigrid_auth'])) {
header('Location: login.php');
exit;
}
$grid = new ArtiGrid();
$auth = $grid->auth();
if ($auth) {
echo "<div>";
echo "<h4>Bienvenido, {$auth['usuario']}</h4>";
echo "<p><strong>Rol:</strong> {$auth['role']}</p>";
echo "</div>";
}
if (!$grid->can('add')) {
$grid->unset('add', false);
}
if (!$grid->can('delete')) {
$grid->unset('delete', false);
}
if (!$grid->can('edit')) {
$grid->unset('edit', false);
}
if ($grid->canAny(['add', 'edit', 'delete'])) {
echo "<div>Management panel available</div>";
}
if ($grid->isRole('admin')) {
$grid->unset("refresh", false);
}
$grid->formFields([
'username',
'email',
'password',
'role'
]);
echo $grid->table("users")->render();
?>