In the second article of the php crud operation series, we will learn about data display (reading). Here we will see how to fetch data with the help of PHP and how to display (read) the fetched data in the form of a table.
Steps to display (read) data
Create table: We will design a table to show the data to be saved in the database.
Write code: In this step, firstly the saved(CREATED) data is got and we will display the data with the help of a table.
So first of all let's see the code of the table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rays Coding :- PHP Crud Operation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header bg-dark d-flex justify-content-between">
<h4 class="text-center text-light">Rays Coding : PHP CRUD Operation</h4>
<a href="../form/form.php" class="btn bg-warning text-dark"><b>Add User</b></a>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>USER1</td>
<td>user1@gmail.com</td>
<td>1231231231</td>
<td> <img class="img-thumbnail" src="../profiles/1ozrr4mpkks91.png"></td>
<td>
<a href="#" title='Edit'><i class="fa-solid fa-pen-to-square"></i></a>
<a href="" title='Delete'><i class="fa-solid fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
This code is designed for a PHP CRUD operation (Create, Read, Update, Delete) system. It is used to manage user data. The main purpose of this code is to create a webpage where user data is displayed and new users can also be added.
Understanding the Code:
HTML Structure:
This code creates a basic webpage structure that has a table with the user's name, email, contact number, image, and action buttons (Edit and Delete).
This webpage uses the Bootstrap framework such that the design of the page looks responsive and modern. By using Bootstrap we can easily display the page well on mobile and desktop.
Card Layout:
The page is designed inside a card which has a card header and card body. The card header has the page title (Raise Coding: PHP CRUD Operations) and a button that takes you to the form page to add a new user.
The card body contains a table showing user details like name, email, contact, image, and actions (edit and delete).
Table and actions:
The table contains table rows with a dummy data (USER1) shown. This data is just for illustration.
At the end of each row, there are 2 icons: an edit (pencil) icon and a delete (trash) icon. From the edit icon, we can update the user details, and from the delete icon, we can delete the user (these actions are not implemented yet, they are just shown).
This page is the basic structure of a user management system where it is possible to display and manage user data. Here CRUD operations will be implemented through PHP like fetching, updating, or deleting data from the database.
Code of the fetch and display of the data
<?php
require_once('../connection/conn.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rays Coding :- PHP Crud Operation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header bg-dark d-flex justify-content-between">
<h4 class="text-center text-light">Rays Coding : PHP CRUD Operation</h4>
<a href="../form/form.php" class="btn bg-warning text-dark"><b>Add User</b></a>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Image</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$select_data = "SELECT * FROM `simple_table`";
$select_query = mysqli_query($conn, $select_data);
$rows = mysqli_num_rows($select_query);
if(mysqli_num_rows($select_query)>0)
{
while($row_data = mysqli_fetch_array($select_query))
{
?>
<tr>
<td><?php echo $row_data['id']?></td>
<td><?php echo $row_data['name']?></td>
<td><?php echo $row_data['email']?></td>
<td><?php echo $row_data['contact']?></td>
<td><img class="img-thumbnail" src="../profiles/<?php if(isset($row_data['profile'])){echo $row_data['profile']; }?>" alt="profile" width='100' height='100'></td>
<td>
<a href="../edit/edit.php?id=<?php echo $row_data['id'];?>" title='Edit'><i class="fa-solid fa-pen-to-square"></i></a>
<a href="../delete/delete.php?id=<?php echo $row_data['id'];?>" title='Delete'><i class="fa-solid fa-trash"></i></a>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
This PHP code shows a CRUD (create, read, update, delete) operation that retrieves data from a database table named simple_table and displays it on a webpage. It shows the user's name, email, contact, and profile picture in a table format. The purpose of the page is to show a simple user management system where you can add, edit, and then delete users.
The structure of the code is something like this: First, a database connection file is added using which data is fetched from the database. Next, the layout of the table is designed which display the ID, name, email, contact, and profile image of every user. There is also an edit and delete option in front of every record using which you can update any user.
When the page loads, select the query to fetch the data of all users from the database. If data is available, then the information of every user is displayed inside the table. Every user record also shows a profile image which is fetched from a specific folder (../profiles/). The code makes the webpage responsive and well-formatted using the Bootstrap framework.