db_connect.php
<?php
$con = new mysqli('localhost','root','','xceptmedia');
if($con->connect_error){
printf("Connect failed:", $con->connect_error);
exit();
}
?>
Database Queries for Table Database: `xceptmedia`
-- phpMyAdmin SQL Dump
-- version 5.1.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: May 15, 2022 at 05:24 AM
-- Server version: 10.4.24-MariaDB
-- PHP Version: 7.4.28
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `xceptmedia`
--
-- --------------------------------------------------------
--
-- Table structure for table `user_data`
--
CREATE TABLE `user_data` (
`id` int(11) NOT NULL,
`first_name` varchar(255) NOT NULL,
`last_name` varchar(255) NOT NULL,
`image` varchar(255) NOT NULL,
`dob` date NOT NULL,
`created_at` datetime NOT NULL DEFAULT current_timestamp(),
`updated_at` datetime NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `user_data`
--
INSERT INTO `user_data` (`id`, `first_name`, `last_name`, `image`, `dob`, `created_at`, `updated_at`) VALUES
(14, 'Mohit', 'Kumar', '32537.jpg', '2022-05-26', '2022-05-14 22:43:09', '2022-05-14 22:43:09'),
(15, 'Sohit', 'Kumar', '11711.jpg', '2022-05-19', '2022-05-14 22:43:37', '2022-05-15 00:09:48'),
(16, 'Raja', 'Babu', '79442.png', '2022-05-19', '2022-05-14 23:46:43', '2022-05-14 23:46:43'),
(17, 'Rohit', 'Sharma', '41635.jpg', '2022-05-17', '2022-05-14 23:48:29', '2022-05-14 23:50:15');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user_data`
--
ALTER TABLE `user_data`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `user_data`
--
ALTER TABLE `user_data`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Index.php Page (To show all Users)
<?php
include('db_connect.php');
$sql = "select * from user_data";
$query = $con->query($sql);
$users = $query->fetch_all(MYSQLI_ASSOC);
if(isset($_GET['id']) != "" && $action = 'delete'){
$ssql = "SELECT image from user_data where id = {$_GET['id']}";
$result = $con->query($ssql);
$row = $result->fetch_assoc();
// unlink image
$imagepath = "image/".$row['image'];
unlink($imagepath);
// delete user
$dsql = "delete from user_data where id = '{$_GET['id']}'";
$query = $con->query($dsql);
header("location:http://localhost/interviewtask/index.php");
}
include('header.php');
?>
<div class="container my-5">
<div class="row my-5">
<div class="col-lg-12 my-5">
<div class="card">
<div class="card-header">
<h3 style="float: left;">User List</h3>
<!-- Add user button modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="float: right;">
Add User
</button>
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<table class="table table-bordered border-dark">
<thead class="text-center">
<tr>
<th scope="col">#</th>
<th scope="col">Image</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Date Of Birth</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="text-center">
<?php
$i=1;
foreach ($users as $key => $val) {
?>
<tr>
<th scope="row"><?php echo $i; ?></th>
<td><img src="image/<?php echo $val['image']; ?>" width="50" height="50"></td>
<td><?php echo $val['first_name']; ?></td>
<td><?php echo $val['last_name']; ?></td>
<td><?php echo date('d-m-Y',strtotime($val['dob'])); ?></td>
<td>
<a href="javascript:void(0)" onclick="EditModal(<?php echo $val['id']; ?>)">Edit</a>
<a href="index.php?id=<?php echo $val['id']; ?>&action=delete" onclick="return confirm('Are you want to Delete.')">Delete</a>
<!-- <a href="javascript:void(0)">Edit</a> -->
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
<tfoot class="text-center">
<tr>
<th scope="col">#</th>
<th scope="col">Image</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Date Of Birth</th>
<th scope="col">Action</th>
</tr>
</tfoot>
</table>
</blockquote>
</div>
</div>
<!-- >>>>>>***** Update User Modal **********>>>>>>>>>>>>>> -->
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit User Detail</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span class="text-center text-danger" id="Eerror"></span>
<form id="EditUserform">
<input type="hidden" name="id" id="eid">
<input type="hidden" name="action" value="update_data" id="update_data">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">First Name*</label>
<input type="text" class="form-control" id="efname" name="fname">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">First Name*</label>
<input type="text" class="form-control" id="elname" name="lname">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Date of Birth*</label>
<input type="date" class="form-control" id="edob" name="dob">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Image*</label>
<input type="file" class="form-control" name="image">
</div>
<!-- <button type="submit" class="btn btn-primary">Submit</button> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" onclick="EditDetail()" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- >>>>>>***** Add User Modal **********>>>>>>>>>>>>>> -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span class="text-center text-danger" id="Aerror"></span>
<form id="UserformData">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">First Name*</label>
<input type="text" class="form-control" name="fname">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">First Name*</label>
<input type="text" class="form-control" name="lname">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Date of Birth*</label>
<input type="date" class="form-control" name="dob">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Image*</label>
<input type="file" class="form-control" name="image">
</div>
<!-- <button type="submit" class="btn btn-primary">Submit</button> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" onclick="addUser()" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<?php
//include 'btmodal.php';
include 'footer.php';
?>
footer.php page
</div>
</div>
</div>
</body>
</head>
</html>
<script>
// Open Edit Modal and fecth user data ///////////
function EditDetail(){
var form = $('#EditUserform')[0];
var data = new FormData(form);
$('#Eerror').text("");
Eerror
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/interviewTask/Update.php",
data: data,
processData: false,
contentType: false,
cache: false,
success: function (res) {
var data = JSON.parse(res)
// console.log(res);
$('#Eerror').text(data.error);
if(data.uploded != null){
location.reload();
}
},
})
}
// Open Edit Modal and fecth user data ///////////
function EditModal(id){
$.ajax({
type: "POST",
url: "/interviewTask/update.php",
data: {id : id , action : 'fetch_data'},
success: function (res) {
var data = JSON.parse(res)
$('#eid').val(data.id)
$('#efname').val(data.first_name)
$('#elname').val(data.last_name)
$('#edob').val(data.dob)
$('#editModal').modal('show');
},
})
}
//Add user data function ////////////////////////
function addUser(){
var form = $('#UserformData')[0];
var data = new FormData(form);
$('#Aerror').text("");
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/interviewTask/AddUser.php",
data: data,
processData: false,
contentType: false,
cache: false,
success: function (res) {
// console.log(res);
var data = JSON.parse(res)
$('#Aerror').text(data.error);
if(data.Added != null){
location.reload();
}
},
})
}
</script>
header.php page
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>User Data!</title>
</head>
<body>
addUser.php
<?php
include('db_connect.php');
if(isset($_POST)){
$fname = trim($_POST['fname']);
$lname = trim($_POST['lname']);
$dob = trim($_POST['dob']);
$image = trim($_FILES['image']['name']);
$extension = pathinfo($image,PATHINFO_EXTENSION);
$valid_exten = ['png','PNG','jpg','JPG','JPEG','jpeg'];
if($fname == "" || $lname == "" || $dob == ""){
echo json_encode(array('error' => 'All Fields Required.' ));
}elseif($_FILES['image']['name'] == ""){
echo json_encode(array('error' => 'All Fields Required.' ));
}elseif(!empty($extension) && in_array($extension, $valid_exten) == false){
echo json_encode(array('error' => "Aceepted Extension 'png','PNG','jpg','JPG','JPEG','jpeg'." ));
}else{
$imageName = rand(10000,99999).".".$extension;
$sql = "insert into user_data (first_name,last_name,dob,image) value('{$fname}','{$lname}','{$dob}','{$imageName}')";
$query = $con->query($sql);
if(move_uploaded_file($_FILES['image']['tmp_name'], 'image/'.$imageName)){
echo json_encode(array('Added' => "User Added Successfully." ));
}
}
}
?>
update.php
<?php
include('db_connect.php');
if(!empty($_POST['id']) && $_POST['action'] == 'update_data'){
$id = trim($_POST['id']);
$fname = trim($_POST['fname']);
$lname = trim($_POST['lname']);
$dob = trim($_POST['dob']);
$image = trim($_FILES['image']['name']);
$extension = pathinfo($image,PATHINFO_EXTENSION);
$valid_exten = ['png','PNG','jpg','JPG','JPEG','jpeg'];
if($fname == "" || $lname == "" || $dob == ""){
echo json_encode(array('error' => 'All Fields Required.' ));
}elseif($image != "" && in_array($extension, $valid_exten) == false){
echo json_encode(array('error' => "Aceepted Extension 'png','PNG','jpg','JPG','JPEG','jpeg' Only." ));
}else{
$imageName = rand(10000,99999).".".$extension;
$sql = "UPDATE user_data set first_name = '{$fname}',last_name ='{$lname}',dob = '{$dob}' where id = {$id}";
// value('{$fname}','{$lname}','{$dob}','{$imageName}')";
$query = $con->query($sql);
if($query == TRUE && !empty($image)){
$ssql = "SELECT image from user_data where id = {$id}";
$result = $con->query($ssql);
$row = $result->fetch_assoc();
// unlink previous image
$imagepath = "image/".$row['image'];
unlink($imagepath);
if(move_uploaded_file($_FILES['image']['tmp_name'], 'image/'.$imageName)){
$sql = "UPDATE user_data set image = '{$imageName}' where id = {$id}";
$query = $con->query($sql);
}
}
echo json_encode(array('uploded' => "User Updated Successfully." ));
}
}
// to show user data in the modal
if(!empty($_POST['id']) && $_POST['action'] == 'fetch_data'){
$ssql = "SELECT * from user_data where id = {$_POST['id']}";
$result = $con->query($ssql);
$row = $result->fetch_assoc();
echo json_encode($row);
}
?>
Comments
Post a Comment