Monday, September 9, 2019

Inserting data into MySQL database using PHP, AJAX, Bootstrap and JQuery

In this article, I will demonstrate how to insert data into MySQL database using PHP, Ajax, Bootstrap and JQuery.
Here are the necessarily steps:
Step 1. Creating the database table: employee table in MySQL database

  `id` int(11) NOT NULL AUTO_INCREMENT, 
  `username` text NOT NULL, 
  `position` text NOT NULL, 
  PRIMARY KEY (`id`) 

Step 2. Creating index.php
Here, I use cdn link to use bootstrap.min.css, bootstrap.min.js, jquery.min.js and font-awesome.min.css. I use the minified version of all required files. 

 <title>Employee Management System</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" 
<script src=""></script>

<script src=""></script>

 <script type="text/javascript" src="main.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Employee Registratoin Form</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" 
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
  <div class="container">
   <div class="card mx-auto" style="width: 18rem;">
    <div class="card-header">Register</div>
    <div class="card-body">
      <form id="register_employee_form" onsubmit="return false" autocomplete="off">
     <div class="form-group">
       <label for="username">User Name</label>
       <input type="text" class="form-control" name="username" id="username" 
       aria-describedby="emailHelp" placeholder="Enter Username">
       <small id="u_error" class="form-text text-muted"></small>
     <div class="form-group">
       <label for="postion">Job Postion</label>
       <input type="text" class="form-control" name="position" id="position" 
         aria-describedby="emailHelp" placeholder="Enter Job Postion">
       <small id="p_error" class="form-text text-muted"></small>
     <button type="submit" name="user_register" id="btn_user_register" 
       class="btn btn-primary"><i class="fa fa-user">&nbsp;</i>Register</button>
   <div id="return"></div>

The page looks as follows:

Step 3. Creating the file that handles the ajax request: main.js
$(document).ready(function() {

 $('#btn_user_register').click(function() {
    var fullname = $("#username").val();
    var jobposition = $("#position").val();
    if(fullname.length == 0 || jobposition.length == 0){
       $('#return').fadeIn().html("<h5 class='text-danger'>All fields are required</h5>");
            url: "insertEmployee.php",
            data: $('#register_employee_form').serialize(),
            success: function(data) {
                    setTimeout(function() {
                    }, 1500);


Step 4. Here in the final step, I will create the PHP file that inserts the data to the database: insertEmployee.php

   $conn = mysqli_connect("localhost", "root", "", "ajaxtestdb"); 
   $username = mysqli_real_escape_string($conn, $_POST["username"]); 
   $job_position = mysqli_real_escape_string($conn, $_POST["position"]); 
   $query = "INSERT INTO employee(username, position) VALUES ('".$username."',   
       if(mysqli_query($conn, $query)){ 
          echo '<p style="color:green;">Data Inserted Successfully..</p>'; 
       } else{
     echo '<p>Data Insertion Failed..</p>';