In the third article of this PHP crud operation series you will learn how to edit (UPDATE) the data. So first I have explained the process of saving(CREATE) or showing(READ) the data completely in the article.
Steps of Edit(CREATE) Data
- First, we must create the edit form.
- After creating the form we will get data per user based on the user id or the user's data has to be shown in the edit form in the input box.
- After displaying the data in the edit input box, write the edit(UPDATE) code.
Create The Edit Form:
Let's create the edit form code using HTML with BootStrap.
<!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="../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="../index/index.php" class="btn bg-warning text-dark"><b>Data List</b></a>
</div>
<div class="card-body">
<form action="../update/update.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="user_id" id="" value="">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="username" class="form-label">Name</label>
<input type="text" class="form-control" id="username" name="user_name" placeholder="Enter User Name" autocomplete="off" value="">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="useremail" class="form-label">Email</label>
<input type="email" class="form-control" id="useremail" name="user_email" placeholder="Enter Email Address" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="usercontact" class="form-label">Mobile Number</label>
<input type="text" class="form-control" id="usercontact" name="user_contact" placeholder="Enter Contact Number" autocomplete="off" value="">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="userprofile" class="form-label">Profile</label>
<input type="file" class="form-control" id="userprofile" name="user_profile" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="userpassword" class="form-label">Create Password</label>
<input type="password" class="form-control" id="userpassword" name="user_password" placeholder="Create Password" autocomplete="off" value="">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="userpassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="userpassword" name="confirm_user_password" placeholder="Re-Enter Password" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<button type="submit" name="update_btn" class="btn bg-dark text-light submit_button"><b>Update</b></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This code is of an HTML form that is made for PHP CRUD operations. Its purpose is to show a simple user update form where the user can update their own details. The form is titled "Raise Coding: PHP CRUD Operations", which can be part of a project. The form gives the user the option to update their name, email, mobile number, profile picture, and password.
The HTML page uses Bootstrap so that the design and layout look responsive and modern. Inside the form are input fields where the user can enter their information. The form sends the data to the update.php file via the POST method, which will probably update the user's information in the database. The form also has a file upload option where the user can upload their profile image.
There is an "Update" button at the bottom of the form which when clicked will update the user's data. If the user needs to confirm their password, there is a field for that as well. Also, a link is provided at the top of the form which redirects the user to the data list page from where he can view the older entries.
Get Data:
Fetch the data using the user "ID" and display it in the input box of the edit form.
<?php
require('../connection/conn.php');
$get_id = $_GET['id'];
$select_data_of_user= "SELECT * FROM `simple_table` WHERE id = $get_id";
$select_data_query = mysqli_query($conn, $select_data_of_user);
$selected_fetch_data = mysqli_fetch_array($select_data_query);
?>
<!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="../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="../index/index.php" class="btn bg-warning text-dark"><b>Data List</b></a>
</div>
<div class="card-body">
<form action="../update/update.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="user_id" id="" value="<?php echo $selected_fetch_data['id']?>">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="username" class="form-label">Name</label>
<input type="text" class="form-control" id="username" name="user_name" placeholder="Enter User Name" autocomplete="off" value="<?php echo $selected_fetch_data['name']?>">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="useremail" class="form-label">Email</label>
<input type="email" class="form-control" id="useremail" name="user_email" placeholder="Enter Email Address" autocomplete="off" value="<?php echo $selected_fetch_data['email']?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="usercontact" class="form-label">Mobile Number</label>
<input type="text" class="form-control" id="usercontact" name="user_contact" placeholder="Enter Contact Number" autocomplete="off" value="<?php echo $selected_fetch_data['contact']?>">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="userprofile" class="form-label">Profile</label>
<input type="file" class="form-control" id="userprofile" name="user_profile" autocomplete="off" value="">
<img src='../profiles/<?php echo $selected_fetch_data['profile']?>'>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="userpassword" class="form-label">Create Password</label>
<input type="password" class="form-control" id="userpassword" name="user_password" placeholder="Create Password" autocomplete="off" value="<?php echo $selected_fetch_data['password']?>">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="userpassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="userpassword" name="confirm_user_password" placeholder="Re-Enter Password" autocomplete="off" value="<?php echo $selected_fetch_data['confirm_password']?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" name="update_btn" class="btn bg-dark float-right text-light submit_button"><b>Update</b></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This code is a PHP script used to update the details of an existing user. First, it fetches data from the MySQL database by passing the user's ID (which is obtained from the URL, e.g. id=123). Then, fetch the user's data from the database through the ID and refer to the form so that the user can update his details.
The code contains an HTML form with the user's details already filled in. As soon as the user's data is fetched, our data is automatically displayed in the input fields (name, email, contact, etc.) which the user can edit. If the user wants to upload a profile image, an input field is given for that as well. This form is to be submitted to the update.php file via the POST method, where the updated data is saved to the database.
Apart from this, the form also contains password fields so that the user can update his password. If the password needs to be confirmed, a "confirm password" field is also provided. The form is designed using the Bootstrap framework, which makes the form modern and responsive. And when the user submits the form, the updated information is saved in the database, and the user sees the updated data list.
Write The Code to update The Data:
<?php
require('../connection/conn.php');
if(isset($_POST['update_btn'])) {
$user_id = $_POST['user_id'];
$name = $_POST['user_name'];
$email = $_POST['user_email'];
$contact = $_POST['user_contact'];
$profile = $_FILES['user_profile']['name'];
$profile_tmp = $_FILES['user_profile']['tmp_name'];
$profile_location = '../profiles/'.$profile;
if(isset($user_id)) {
if($profile != '') {
$allowed_extensions = ['jpg', 'jpeg', 'png', 'gif'];
$file_ext = pathinfo($profile, PATHINFO_EXTENSION);
if(in_array(strtolower($file_ext), $allowed_extensions)) {
if(move_uploaded_file($profile_tmp, $profile_location)) {
$update_query = "UPDATE `simple_table` SET `name`='$name', `email`='$email', `contact`='$contact', `profile`='$profile' WHERE id = $user_id";
$update_query_run = mysqli_query($conn, $update_query);
if($update_query_run) {
header('location:../index/index.php');
} else {
echo "<script>alert('Data not updated successfully'); window.history.back();</script>";
}
} else {
echo "<script>alert('Failed to upload image'); window.history.back();</script>";
}
} else {
echo "<script>alert('Invalid file type'); window.history.back();</script>";
}
} else {
$update_query = "UPDATE `simple_table` SET `name`='$name', `email`='$email', `contact`='$contact' WHERE id = $user_id";
$update_query_run = mysqli_query($conn, $update_query);
if($update_query_run) {
header('location:../index/index.php');
} else {
echo "<script>alert('Data not updated successfully'); window.history.back();</script>";
}
}
}
}
?>
This PHP code performs a simple user profile update. It updates user information (such as name, email, contact, and profile picture) on a form.
First step:
The code first contains require('../connection/conn.php'); which creates a connection to the database. When the user presses "update_btn", the user details (such as user_id, user_name, user_email, etc.) are sent to the server for the post method.
Second step:
If the user has uploaded a profile picture, first check if the file extension is valid (such as jpg, png, gif). If the extension is correct, the file is tried to be uploaded to the server. If the upload is successful, the updated user information (name, email, contact, and profile picture) is saved in the database. If any problem occurs, an error message is shown.
Third step:
If the user has not uploaded any profile picture, only the name, email, and contact are updated. When the update is successful, the user is redirected to the homepage. If there is a problem with the update, an error message is shown.
The purpose of the code is to update the user's data and indicate the error to the user if there is a problem.