Step 1: Database Table Creation (db.php)
CREATE TABLE employees (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
position VARCHAR(255) NOT NULL,
office VARCHAR(255) NOT NULL,
age VARCHAR(255) NOT NULL,
start_date DATETIME NOT NULL,
salary INT(10) NOT NULL
);
This SQL query creates a table called employees with columns for id, name, position, office, age, start_date, and salary.
Step 2: Database Configuration (config.php)
<?php
// Database credentials
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '654321');
define('DB_NAME', 'name_db');
// Attempt to connect to MySQL database
$connection = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connection
if($connection === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
The config.php file contains the connection settings for your MySQL database. Adjust the credentials according to your server.
Step 3: Data Table Display (index.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="titulo-tabla">Record Data Table Using PHP</h3>
<hr>
<?php
require_once "config.php";
$sql = "SELECT * FROM employees";
if($result = mysqli_query($connection, $sql)) {
if(mysqli_num_rows($result) > 0) {
?>
<table id="ejemplo" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start Date</th>
<th>Salary</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($result)) { ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['position']; ?></td>
<td><?php echo $row['office']; ?></td>
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['start_date']; ?></td>
<td>$<?php echo $row['salary']; ?></td>
<td>
<a href="read.php?id=<?php echo $row['id']; ?>"><i class="fa fa-eye"></i></a>
<a href="update.php?id=<?php echo $row['id']; ?>"><i class="fa fa-edit"></i></a>
<a href="delete.php?id=<?php echo $row['id']; ?>"><i class="fa fa-trash"></i></a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
mysqli_free_result($result);
} else {
echo "<p>No records found.</p>";
}
mysqli_close($connection);
?>
</div>
</div>
</div>
</body>
</html>
The index.php file connects to the database and displays all the records from the employees table in a table format with options for viewing, updating, and deleting records.
Step 4: Custom Styling (style.css)
:after, :before {
box-sizing: border-box;
}
a {
color: #337ab7;
text-decoration: none;
}
i {
margin-bottom: 4px;
}
.btn {
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.titulo-tabla {
color: #606263;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
font-weight: bold;
}
This file contains some basic styling for the layout and UI components, such as buttons and tables.
Step 5: JavaScript Configuration (js.js)
var idioma = {
"sProcessing": "Processing...",
"sLengthMenu": "Show _MENU_ records",
"sZeroRecords": "No results found",
"sInfo": "Showing records _START_ to _END_ of _TOTAL_ records",
"sSearch": "Search:",
"oPaginate": {
"sFirst": "First",
"sNext": "Next",
"sPrevious": "Previous",
"sLast": "Last"
}
};
$(document).ready(function() {
$('#ejemplo').DataTable({
"language": idioma,
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true
});
});
This script initializes the DataTable functionality with language configuration.
Step 6: Create New Employee (create.php)
<?php
require_once "config.php";
$name = $position = $office = $age = $start_date = $salary = "";
$name_err = $position_err = $office_err = $age_err = $start_date_err = $salary_err = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Validate and sanitize form inputs
// Insert form data into the database
// Redirect to index page
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Record</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="signup-form">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Create Employee Record</h2>
</div>
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?= (!empty($name_err)) ? 'has-error' : ''; ?>">
<label>Name</label>
<input type="text" name="name" class="form-control" value="<?= $name; ?>">
<span class="help-block"><?= $name_err;?></span>
</div>
<!-- Similar input fields for position, office, age, start date, and salary -->
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
This page allows users to submit a form to add a new employee record. It validates the inputs and submits them to the database.
Step 7: Create Style for Create Form (css-create-style.css)
body {
background-color: #f1f1f1;
font-family: 'Roboto', sans-serif;
}
.help-block {
color: red;
}
.form-control {
font-size: 15px;
}
.form-control, .form-control:focus {
border-color: #3ca23c;
}
This CSS file styles the create form page with background and form control styling.
