Simple CRUD Operations in PHP MySQL with Bootstrap

Create, Read, Update, Delete (CRUD) in PHP mysql and bootstrap. In this post, i will show you from scratch on how make CRUD app in PHP MySQL with Bootstrap.

In this example post, i will create customers crud app in PHP MySQL with bootstrap. And also display success and error message, when data will be insert, update, delete from database in PHP.

As well as you can use this source code of PHP MySQL with Bootstrap CRUD app personally and professionally.

In this post, you will learn step by step on how to read, insert, update and delete records using PHP MySQL. And also make simple crud app

How to Make Simple CRUD in PHP MySQL and Bootstrap

Use the below steps to make simple crud (create, read, update and delete) app in PHP MySQL with bootstrap:

Step 1 – Create CRUD APP Directory

In step 1, you need to navigate your local server direcotry. And inside this directory create a PHP MySQL CRUD app direcotry.

For example, i will use xampp server with windows system. So, i willl navigate to C/xampp/htdocs/.

Note that, I have created directory name “demo” inside my local web server(C/xampp/htdocs/). Then open this folder in any text editor (i will use sublime text editor). You can also give any name of PHP MySQL CRUD app directory.

Step 2 – Create Database and Table

In step 2, you need to start your phpmyadmin. Then run the following query to create database and table into your phpmyadmin:

CREATE DATABASE my_db;


CREATE TABLE `customers` (
`custId` INT(11) NOT NULL AUTO_INCREMENT,
`fname` VARCHAR(255) NULL DEFAULT NULL,
`lname` VARCHAR(255) NULL DEFAULT NULL,
`email` VARCHAR(255) NULL DEFAULT NULL,
`created` DATETIME NULL DEFAULT NULL,
PRIMARY KEY (`custId`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=1;

INSERT INTO `customers` (`custId`, `fname`, `lname`, `email`, `created`) VALUES (NULL, 'Tiago', 'Sam', '[email protected]', NULL), (NULL, 'Anil', 'Kumar', '[email protected]', NULL);

Step 3 – Connecting Database To CRUD App

In step 3, navigate to your PHP MySQL CRUD app directory. And inside this directory  create a php file that named mydbCon.php. It’s used to connect phpmyadmin mysql database to PHP MySQL CRUD App (demo).

Then add the following code into mydbCon.php file:

<?php

    $hName='localhost'; // host name

    $uName='root';   // database user name

    $password='';   // database password

    $dbName = "php_mysql_crud"; // database name

    $dbCon = mysqli_connect($hName,$uName,$password,"$dbName");

      if(!$dbCon){
          die('Could not Connect MySql Server:' .mysql_error());
      }
?>

Step 4 – Fetch And Display All Data From Database in Html Table

In step 4, You have also navigate to PHP MySQL CRUD app directory in above step. So, now you need to create one file name customers.php inside your CRUD App directory.

This file code will fetch all customers and display in html table using PHP MySQL. So add the following code into customers.php file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP Code to Fetch All Data from MySQL Database and Display in html Table</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
   
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-2">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
              <?php include 'msg.php';  ?>
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
        </div>

        <div class="col-md-12">
            <div class="float-left">
                <h2>Customers List</h2>
            </div>            
            <div class="float-right">
                <a href="add.php" class="btn btn-success">Add New Customer Record</a>
            </div>
           

            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Email</th>
                  <th scope="col">Action</th>
                </tr>
              </thead>
              <tbody>
                <?php

                include 'mydbCon.php';

                $query="select * from customers limit 200"; // Fetch all the data from the table customers

                $result=mysqli_query($dbCon,$query);

                ?>

                <?php if ($result->num_rows > 0): ?>

                <?php while($array=mysqli_fetch_row($result)): ?>

                <tr>
                    <th scope="row"><?php echo $array[0];?></th>
                    <td><?php echo $array[1];?></td>
                    <td><?php echo $array[2];?></td>
                    <td><?php echo $array[3];?></td>
                    <td> 
                      <a href="edit.php?custId=<?php echo $array[0];?>" class="btn btn-primary">Edit</a>
                      <a href="delete.php?custId=<?php echo $array[0];?>" class="btn btn-danger">Delete</a>
                </tr>

                <?php endwhile; ?>

                <?php else: ?>
                <tr>
                   <td colspan="3" rowspan="1" headers="">No Data Found</td>
                </tr>
                <?php endif; ?>

                <?php mysqli_free_result($result); ?>

              </tbody>
            </table>
        </div>
    </div>        
</div>

</body>
</html>

Step 5 – Create Add/Insert Data Html Page

In step 5, create html page that name add.php. Because It will show the add or insert customer form.

So add the following code into add.php file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insert data from form to mysql database php</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-2">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h2>Add Record From Database PHP</h2>
            </div>
           
            <form action="insert-process.php" method="post">

                <div class="form-group">
                    <label>First Name</label>
                    <input type="text" name="fname" class="form-control" required="">
                </div>                        

                <div class="form-group">
                    <label>Last Name</label>
                    <input type="text" name="lname" class="form-control" required="">
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" required="">
                </div>

                <input type="submit" class="btn btn-primary" name="submit" value="save">
            </form>
        </div>
    </div>        
</div>

</body>
</html>

The insert html page will be look like shown in below image:

Step 6 – Create insert-proccess.php

Now, create insert-proccess.php file inside PHP CRUD App directory. Because it is used to insert data into MySQL database.

So, add the following code into insert-proccess.php file:

<?php

if(count($_POST)>0)
{    
     include 'mydbCon.php';

     $fname = $_POST['fname'];
     $lname = $_POST['lname'];
     $email = $_POST['email'];
 
     $query = "INSERT INTO customers (fname,lname,email)
     VALUES ('$fname','$lname','$email')";
 
     if (mysqli_query($dbCon, $query)) {
        $msg = 1;
     } else {
        $msg = 4;
     }

}
  header ("Location: customers.php?msg=".$msg."");
?>

Step 7 – Create Edit Html Page

In step 7, create another html page that name edit.php, which is used to display edit data on form in php from MySQL database.

So add the following code into edit.php file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit and Update Data PHP</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-2">

  <div class="page-header">
      <h2>Update Data From Database PHP</h2>
  </div>

    <div class="row">
        <div class="col-md-12">
			<?php


			include 'mydbCon.php';

			$query = "SELECT * FROM customers WHERE custId='" . $_GET["custId"] . "'"; // Fetch data from the table customers using id

			$result=mysqli_query($dbCon,$query);

			$customer = mysqli_fetch_assoc($result);


			?>
            <form action="update-process.php" method="POST">

              <input type="hidden" name="custId" value="<?php echo $_GET["custId"]; ?>" class="form-control" required="">

              <div class="form-group">
                <label for="exampleInputEmail1">First Name</label>
                <input type="text" name="fname" class="form-control" value="<?php echo $customer['fname']; ?>" required="">
              </div>                

              <div class="form-group">
                <label for="exampleInputEmail1">Last Name</label>
                <input type="text" name="lname" class="form-control" value="<?php echo $customer['lname']; ?>" required="">
              </div>              

              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" name="email" class="form-control" value="<?php echo $customer['email']; ?>" required="">
              </div>

              <button type="submit" class="btn btn-primary" value="submit">Submit</button>

            </form>
        </div>
    </div>        
</div>

</body>
</html>

The edit html page will be look like shown in below image:

Step 8 – Create update-proccess.php

In step 8, create update-proccess.php file, because it is used to update form data from MySQL database using Id in PHP.

So, add the following code into update-proccess.php file:

<?php

if(count($_POST)>0){

include 'mydbCon.php';

$query = "UPDATE customers set custId='" . $_POST['custId'] . "', fname='" . $_POST['fname'] . "', lname='" . $_POST['lname'] . "', email='" . $_POST['email'] . "' WHERE custId='" . $_POST['custId'] . "'"; // update form data from the database

 if (mysqli_query($dbCon, $query)) {
    $msg = 2;
 } else {
    $msg = 4;
 }

}

header ("Location: customers.php?msg=".$msg."");

?>

Step 9 – Create Delete.php

Now, create one more file name delete.php. It is used to delete data from MySQL database using PHP.

So add the following code into delete.php:

<?php


include 'mydbCon.php';

$query = "DELETE FROM customers WHERE custId='" . $_GET["custId"] . "'"; // Delete data from the table customers using id

 if (mysqli_query($dbCon, $query)) {
    $msg = 3;
 } else {
    $msg = 4;
 }

header ("Location: customers.php?msg=".$msg."");


?>

Step 10 – Create Alert Message File

In step 10, you need to create msg.php file. Because this file code will display error and success messages when you add edit update and delete data from MySQL database.

Don’t worry i have also add this file on customers.php.

So you need to add the following code into msg.php file:

<?php
// foo.php
$errors = array (
    1 => "Record Has Been Successfully Inserted",
    2 => "Record Has Been Successfully Updated",
    3 => "Record Has Been Successfully Deleted",
    4 => "MySQL Database Error. Please Check your query",
);

$error_id = isset($_GET['msg']) ? (int)$_GET['msg'] : 0;

if ($error_id != 0 && in_array($error_id, [1,2,3,4])) {
    echo $errors[$error_id];
}else{
	echo 'CRUD PHP MySQL Bootstrap';
}
?>

Step 11 – Open Browser And Run PHP MySQL CRUD App

Finally, you need to open your browser and type http://localhost/demo/customers.

CRUD PHP MySQL Bootstrap App will be look like shown in below image:

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *