CRUD OPERATION OF NEW EMPLOYEE ONBOARDING FORM OF TCS USING PHP MYSQLI OBJECT ALONG WITH JAVASCRIPT VALIDATION

CRUD OPERATION OF NEW EMPLOYEE ONBOARDING FORM OF TCS WITH FILE UPLOAD USING PHP MYSQLI OBJECT ALONG WITH JAVASCRIPT VALIDATION 

NOTE: For File Upload I have created another new folder under my folder "MYSQLI Object Along With JavaScript Validation" as in folder I have taken "uploads/".

STEP 1 : First I need to create the database which I have named it as "php web development batch november 2024" and then I have click on "Create" button.



STEP 2: Then I have created the connection page i.e. connection.php page.

connection.php =>

<?php

$servername="localhost";

$username="root";

$password="";

$db="php web development batch november 2024";

try{

$conn=new mysqli($servername,$username,$password,$db);

}

catch(Exception $error){

echo "Connection Failure".$error->getMessage();

}

?>

Output of connection.php page =>


STEP 3: Here I have created the form page i.e. form.php page and here I have provided the javascript validation on Name, Email and Date of Joining as shown below in the code.

connection.php along with JavaScript Validation on Name, Email and Date of Joining =>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Employee Onboarding Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style type="text/css">
.container{
border: 10px;
background-color: lightpink;
text-align: center;
}
</style>
<script type="text/javascript">
function nameValid()
{
var name=document.getElementById("name").value;
console.log(name);
var nameRegex=/^[A-Za-z ]{3,30}$/;
if (nameRegex.test(name)) {
document.getElementById("errorName").innerHTML="";
document.getElementById("subBtn").disabled=false;
}
else{
document.getElementById("errorName").innerHTML="Name should be min. 3 chars long to max. 30 chars long...";
document.getElementById("subBtn").disabled=true;
}
}
function emailValid()
{
var email=document.getElementById("email").value;
console.log(email);
var emailRegex=/^[a-z0-9._-]+@[a-z0-9.]+\.[a-z]{2,3}$/;
if (emailRegex.test(email)) {
document.getElementById("errorEmail").innerHTML="";
document.getElementById("subBtn").disabled=false;
}
else{
document.getElementById("errorEmail").innerHTML="Please enter a valid email id...";
document.getElementById("subBtn").disabled=true;
}
}
function dojValid()
{
var doj=document.getElementById("doj").value;
console.log(doj);
var dojRegex=/^\d{4}-\d{2}-\d{2}$/;
if (dojRegex.test(doj)) {
document.getElementById("errorDoj").innerHTML="";
document.getElementById("subBtn").disabled=false;
}
else{
document.getElementById("errorDoj").innerHTML="Please enter a valid date of joining...";
document.getElementById("subBtn").disabled=true;
}
}
</script>
</head>
<body>
<div class="container">
<header class="modal-header">
<h1>Onboarding Form</h1>
</header>
<form autocomplete="off" method="post" action="formaction.php" enctype="multipart/form-data">
<div class="form-group">
Name: <input type="text" name="name" id="name" required class="form-control" onkeyup="nameValid()">
<div id="errorName" class="text-danger"></div>
</div>
<div class="form-group">
Email: <input type="email" name="email" id="email" required class="form-control" onkeyup="emailValid()">
<div id="errorEmail" class="text-danger"></div>
</div>
<div class="form-group">
Date of Joining: <input type="date" name="doj" id="doj" required class="form-control" onkeyup="dojValid()">
<div id="errorDoj" class="text-danger"></div>
</div>
Designation: <input type="designation" name="designation"><br>
Department: <input type="department" name="department"><br>
Image: <input type="file" name="image"><br>
<button type="submit" id="subBtn">Submit</button>
</form>
</div>
</body>
</html>

Output of connection.php along with JavaScript Validation on Name, Email and Date of Joining =>




STEP 4: Then I have created the formaction.php page where first I have print all the values by using echo as shown in the image below.




 STEP 5: Then I have created the table named as "employees" with 7 number of columns and then I have clicked on Create.




STEP 6: Then I have created the table where I have taken 6 user fields name starting with user_id, name, email, date of joining, designation and ending with department. user_id I have kept as int and I have chosen as primary key default, then followed by name as type varchar with value 100, email as type varchar with value 100, date_of_joining as type date, designation as type varchar with value 100, department as type varchar with value 100 and image as type varchar with value 255. Then I have clicked on save.






STEP 7: So after filling the onboarding form once I click on Submit button it will prompt me "Data Inserted Successfully..." as shown in the image below.




formaction.php page =>

<?php
include("connection.php");
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$date_of_joining=$_REQUEST['doj'];
$designation=$_REQUEST['designation'];
$department=$_REQUEST['department'];
$fileName=$_FILES['image']['name'];
$tmpName=$_FILES['image']['tmp_name'];
$folder="uploads/".$fileName;
move_uploaded_file($tmpName, $folder);
echo $name,$email,$date_of_joining,$designation,$department,$folder;
try{
$sql="INSERT INTO `employees`(`user_id`, `name`, `email`, `date_of_joining`, `designation`, `department`, `image`) VALUES ('','$name','$email','$date_of_joining','$designation','$department','$folder')";
$data=$conn->query($sql);
if ($data) {
echo "<script>alert('Data Inserted Successfully');</script>";
echo "<script>window.location.href='display.php'</script>";
}
else{
echo "Data Not Inserted";
}
}
catch(Exception $error){
echo "Insertion Failure".$error->getMessage();
}
?>

Output of formaction.php page =>


STEP 8: Then coming to my display.php page, firstly I am printing the $result by using print_r() to print the result as shown below in the image.


STEP 9: Then I have taken one table whose border I have provided as 2px and I have aligned the table in the center. Then I have taken one table row where I have taken eight table heading and then I have assigned $i as 1 for Sl No. and then I have taken another table row where again I have taken eight table data and within those eight table data I have print each heading as echo and then I have taken one button for Edit and one button for Delete in Action table heading.

display.php page =>

<?php
include("connection.php");
$sql="SELECT * FROM `employees`";
$data=$conn->query($sql);
// $result=$data->fetch_assoc();
// print_r($result);
?>
<table border="2px" align="center">
<tr>
<th>Sl No.</th>
<th>Name</th>
<th>Email</th>
<th>Date_of_Joining</th>
<th>Designation</th>
<th>Department</th>
<th>Image</th>
<th>Action</th>
</tr>
<?php
$i=1;
while ($result=$data->fetch_assoc()) {
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $result["name"]; ?></td>
<td><?php echo $result["email"]; ?></td>
<td><?php echo $result["date_of_joining"]; ?></td>
<td><?php echo $result["designation"]; ?></td>
<td><?php echo $result["department"]; ?></td>
<td><img src="<?php echo $result["image"]; ?>" height="200px" width="200px"></td>
<td>
<button><a href="edit.php?edt_id=<?php echo $result['user_id']; ?>">Edit</a></button>
<button><a href="delete.php?del_id=<?php echo $result['user_id']; ?>" onclick="return confirm('Are you sure?');">Delete</a></button>
</td>
</tr>
<?php
}
?>
</table>

Output of display.php page =>


STEP 10: Here in my edit.php page I have included my connection page and then I have started my session as because her I have used "$_SESSION['oldimg']= $result['image']". Then I have taken "$editID=$_REQUEST['ed_id']" and then I have run an sql statement where I have pass the sql statement and then I have done $data=$conn->query($sql), and then I have checked for $result as $result=$data->fetch_assoc(); and then I have printed $result to fetch the output as shown in the image below.



STEP 11: Here I have pasted the same page of form.php page with javascript validation only here I have added the value with echo to print the result of each input fields as shown in the image below.




edit.php page =>

<?php
include("connection.php");
session_start();
$editID=$_REQUEST['edt_id'];
try{
$sql="SELECT * FROM `employees` WHERE `user_id`='$editID'";
    $data=$conn->query($sql);
    $result=$data->fetch_assoc();
    // print_r($result);
    $_SESSION['oldimg']=$result['image'];
}
catch(Exception $error){
echo "Edition Failure".$error->getMessage();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Employee Onboarding Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style type="text/css">
.container{
border: 10px;
background-color: lightpink;
text-align: center;
}
</style>
<script type="text/javascript">
function nameValid()
{
var name=document.getElementById("name").value;
console.log(name);
var nameRegex=/^[A-Za-z ]{3,30}$/;
if (nameRegex.test(name)) {
document.getElementById("errorName").innerHTML="";
document.getElementById("subBtn").disabled=false;
}
else{
document.getElementById("errorName").innerHTML="Name should be min. 3 chars long to max. 30 chars long...";
document.getElementById("subBtn").disabled=true;
}
}
function emailValid()
{
var email=document.getElementById("email").value;
console.log(email);
var emailRegex=/^[a-z0-9._-]+@[a-z0-9.]+\.[a-z]{2,3}$/;
if (emailRegex.test(email)) {
document.getElementById("errorEmail").innerHTML="";
document.getElementById("subBtn").disabled=false;
}
else{
document.getElementById("errorEmail").innerHTML="Please enter a valid email id...";
document.getElementById("subBtn").disabled=true;
}
}
function dojValid()
{
var doj=document.getElementById("doj").value;
console.log(doj);
var dojRegex=/^\d{4}-\d{2}-\d{2}$/;
if (dojRegex.test(doj)) {
document.getElementById("errorDoj").innerHTML="";
document.getElementById("subBtn").disabled=false;
}
else{
document.getElementById("errorDoj").innerHTML="Please enter a valid date of joining...";
document.getElementById("subBtn").disabled=true;
}
}
</script>
</head>
<body>
<div class="container">
<header class="modal-header">
<h1>Update Form</h1>
</header>
<form autocomplete="off" method="post" action="editaction.php" enctype="multipart/form-data">
<input type="hidden" name="uid" value="<?php echo $result['user_id'];?>">
<div class="form-group">
Name: <input type="text" name="name" id="name" required class="form-control" onkeyup="nameValid()" value="<?php echo $result['name'];?>">
<div id="errorName" class="text-danger"></div>
</div>
<div class="form-group">
Email: <input type="email" name="email" id="email" required class="form-control" onkeyup="emailValid()" value="<?php echo $result['email'];?>">
<div id="errorEmail" class="text-danger"></div>
</div>
<div class="form-group">
Date of Joining: <input type="date" name="doj" id="doj" required class="form-control" onkeyup="dojValid()" value="<?php echo $result['date_of_joining'];?>">
<div id="errorDoj" class="text-danger"></div>
</div>
Designation: <input type="designation" name="designation" value="<?php echo $result['designation'];?>"><br>
Department: <input type="department" name="department" value="<?php echo $result['department'];?>"><br>
Image: <input type="file" name="image"><img src="<?php echo $result['image'];?>" height="200px" width="200px"><br>
<button type="submit" id="subBtn">Submit</button>
</form>
</div>
</body>
</html>
 
Output of edit.php page =>


STEP 12: Firstly in my editaction.php I have included my connection.php and then I have started the session to assign the $_SESSION['oldimg'] to $oldImage and to unlink the oldImage and then here I have done $_REQUEST for all the input fields and then I have print all the input fields so that once I update anything in my form it will be reflected in my output page like as here I have updated the joining from 11-06-2025 to 10-06-2025 and it get's reflected in my output as shown in the image below.



STEP 13: In my next step I have just checked whether $folder is == 'uploads/' within if condition and then within else condition again I have checked whether the $oldImage file_exists where I have used `image` as '$oldImage' in my SQL query statement and then I have unlinked that $oldImage and here I have used `image` as '$folder' in my SQL query statement. 

editaction.php page =>

<?php
include("connection.php");
session_start();
$userID=$_REQUEST['uid'];
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$date_of_joining=$_REQUEST['doj'];
$designation=$_REQUEST['designation'];
$department=$_REQUEST['department'];
$fileName=$_FILES['image']['name'];
$tmpName=$_FILES['image']['tmp_name'];
$folder="uploads/".$fileName;
move_uploaded_file($tmpName, $folder);
$oldImage=$_SESSION['oldimg'];
// echo $name,$email,$date_of_joining,$designation,$department,$folder;
try{
if ($folder == 'uploads/') {
$sql="UPDATE `employees` SET `name`='$name',`email`='$email',`date_of_joining`='$date_of_joining',`designation`='$designation',`department`='$department',`image`='$oldImage' WHERE `user_id`='$userID'";
    $data=$conn->query($sql);
    if ($data) {
    echo "<script>alert('Data Updated Successfully');</script>";
    echo "<script>window.location.href='display.php'</script>";
    }
    else{
    echo "Data Not Updated";
    }
}
else{
if (file_exists($oldImage)){
unlink($oldImage); 
}
$sql="UPDATE `employees` SET `name`='$name',`email`='$email',`date_of_joining`='$date_of_joining',`designation`='$designation',`department`='$department',`image`='$folder' WHERE `user_id`='$userID'";
    $data=$conn->query($sql);
    if ($data) {
    echo "<script>alert('Data Updated Successfully');</script>";
    echo "<script>window.location.href='display.php'</script>";
    }
    else{
    echo "Data Not Updated";
    }
}
}
catch(Exception $error){
echo "Updation Failure".$error->getMessage();
}
?>

Output of editaction.php page =>




STEP 14: Here in my delete.php page I have first included my connection.php page and then I have taken $deleteID=$_REQUEST['del_id'] and then I have store $deleteID in user_id in my sql query statement and then I have dome $data=$conn->query($sql) and then in if condition I have checked for $data and once I click on Delete Button it will prompt me Are you sure? Ok or Cancel. If I click on Ok then it will prompt me Data deleted successfully... and if I click on Cancel the data will not get deleted as shown in the image below.

delete.php page =>

<?php
include("connection.php");
$deleteID=$_REQUEST['del_id'];
try{
$sql="DELETE FROM `employees` WHERE `user_id`='$deleteID'";
$data=$conn->query($sql);
if ($data) {
echo "<script>alert('Data Deleted Successfully');</script>";
echo "<script>window.location.href='display.php'</script>";
}
else{
echo "Data Not Deleted Successfully";
}
}
catch(Exception $error){
echo "Deletion Failure".$error->getMessage();
}
?>

Output of delete.php page =>














 
















Comments

Post a Comment

Popular posts from this blog

Programmings Based On Array And String Functions To Merge The 2 Arrays, Then After Merge Convert Into String And Then Find Out The 1st And Last Word From The Reverse String

Image
  Programmings Based On Array And String Functions To Merge The 2 Arrays, Then After Merge Convert Into String And Then Find Out The 1st And Last Word From The Reverse String Q1. Take 2 arrays then margin the arrays. After margin convert into string then reverse the string and find out 1st and last word from the reverse string. Ans: Coding => <?php $arr1 =[ "Dhoni" , "Rohit" , "Kohli" , "Rahul" ]; $arr2 =[ "Bumrah" , "Shami" , "Siraj" , "Chahal" ]; $arrmer = array_merge ( $arr1 , $arr2 ); print_r ( $arrmer ); echo "<br>" ; $str = implode ( " " , $arrmer ); print_r ( $str ); echo "<br>" ; $strrev = strrev ( $str ); print_r ( $strrev ); echo "<br>" ; $arr = explode ( " " , $strrev ); print_r ( $arr ); echo "<br>" ; $firstword = array_shift ( $arr ); $lastword = array_pop ( $arr ); print_r ( $firstword ); echo "...
Read more

PHP WEB DEVELOPMENT INTERVIEW QUESTIONS ASKED IN APOLLO HOSPITAL ALONG WITH MY OWN CONCEPTS AND MY OWN EXPLANATION ANSWERS(PART - 1) REST OF THE QUESTIONS AND ANSWERS WILL BE PREPARED BY ME IN MY NEXT BLOG

Image
 PHP WEB DEVELOPMENT INTERVIEW QUESTIONS ASKED IN APOLLO HOSPITAL  ALONG WITH MY OWN CONCEPTS AND MY OWN EXPLANATION ANSWERS (PART - 1) REST OF THE QUESTIONS AND ANSWERS WILL BE PREPARED BY ME IN MY NEXT BLOG  So, guy's today I am going to explore about some of the PHP Web development Questions used to be asked in Apollo Hospital, and the answers will be genuine with my own making explanations with the concepts which I have. So guy's you must be thinking that Apllo Hospital also work for IT Field? That's why I must say yes. Apollo hospital also work for IT Field. You must be curious about knowing that in which field Apollo Hospital work in IT Field? Don't worry, I am going to let you know that in which portion Apollo Hospital work in IT Field? Apollo Hospital work in IT field like ASKAPOLLO ONLINE i.e. the ONLINE APPOINTMENT SYSTEM which has features like online scheduling of the patient, books health appointment in minutes, 24/7 online appointment scheduling as well as...
Read more

Mini Project On Multi User CRUD Operations(Create, Read, Update & Delete) Of Donar Details Of Indian Nationals Who Donate To Ramkrishna Math, Belur Math Using PDO (PHP Data Objects) With Proper Explanation Of Each And Every Individual Line Of The Code Of connection.php Page, form.php Page, formaction.php Page, admin_display.php Page, client_display.php Page, edit.php Page, editaction.php Page And delet.php Page (Here You Will Find The Image Of Sayang Sri Ramkrishna Dev, Sayang Sri Ma Sarada Devi & Sayang Sri Swami Vivekananda) In My CRUD Operation

Image
Mini Project On Multi User CRUD Operations(Create, Read, Update & Delete) Of Donar Details Of Indian Nationals Who Donate To Ramkrishna Math, Belur Math Using PDO (PHP Data Objects) With Proper Explanation Of Each And Every Individual Line Of The Code Of connection.php Page, form.php Page, formaction.php Page, admin_display.php Page, client_display.php Page, edit.php Page, editaction.php Page And delete.php Page (Here You Will Find The Image Of Sayang Sri Ramkrishna Dev, Sayang Sri Ma Sarada Devi & Sayang Sri Swami Vivekananda) In My CRUD Operation  So,firstly I am going to explain about the connection page (connection.php).Let's begin. In connection.php page first I have taken ($servername="localhost";) where $servername is the name of the server with which we are actually wanting to connect. Now coming to ($username="root";) where $username is the name of the user which and I already know that server has definitely a user, and that user exists in which...
Read more