Do you know Inline Update data is a one type of Web Development feature in which We can change Web page content on the same page without going to another page. This Inline Editing feature which cut the edit data without navigate edit action.
With Inline updation of data feature, The web developers do not design more UI for editing of dynamic MySQL table data.
In this tutorial, we will not use contenteditable attribute but here we will use dark-editable JavaScript library. This dark-editable library is a new rewritten version of the x-editable jQuery plugin or it an alternative of x-editable plugin which has been enables dynamic inline editing of data on the web page and this is purely written in JavaScript.
This dark-editable library is has been support Bootstrap 5 library and moment.js for datetime data handling. If you want to use this dark-editable editable library in your web application project, then you have to required following library in your working folder.
If you have use dark-editable library then this library has been support following input type for inline editing of data without refresh of web page.
text
textarea
select
date
datetime
password
email
url
tel
number
range
time
With the help of dark-editable JavaScript library we can easily inline edit or update DIV content or tabular data. So for edit data, we have to click on content which we want to edit and after we have done edit then it will send update or edit data requests to PHP via Ajax for perform backend update MySQL data operation. This Inline Edit or In-place Edit is a very nice and required feature in the Web Development.
Let us create an example in which we will implement inline editing or updation of data using dark-editable library and how we can update or edit data at backend using this dark-editable library of in-place editing of data.
Source Code
MySQL Table
In this tutorial, first we want some dynamice data in our MySQL database. So for create table with some data, we have to run following .sql script which will create tbl_sample table with data.
This file we will use for make MySQL database connection.
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
?>
index.php
In this file we have included Bootstrap 5 library, dark-editable library and Moment.js library link.
In this file first we have fetch data from tbl_sample and display on web page in HTML table format.
For enable dark-editable inline editing of data, first we have to add class attribute and id attribute in place of content.
After this for initialize dark-editable library on any content we have to use DarkEditable() method. So this method will enable inplace editing feature.
Next for send data to PHP script via Ajax, we have to add data-type, data-pk, data-url and data-name attribute. So this attribute value will be send to PHP script via Ajax request.
<?php
//index.php
include 'database_connection.php';
$query = "
SELECT * FROM tbl_sample
ORDER BY id DESC
";
$result = $connect->query($query);
?>
<!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="library/bootstrap-5/bootstrap.min.css" rel="stylesheet" />
<script src="library/bootstrap-5/bootstrap.bundle.min.js"></script>
<script src="library/moment.js"></script>
<link rel="stylesheet" href="library/dark-editable/dark-editable.css" />
<script src="library/dark-editable/dark-editable.js"></script>
<title>Inline Editing with Bootstrap 5 & Vanilla JavaScript using PHP / How to Load Data in Select2 with Bootstrap 5 using Ajax PHP</title>
</head>
<body>
<div class="container">
<h1 class="mt-5 mb-5 text-center text-primary">Inline Editing using Vanilla JavaScript with PHP MySQL Bootstrap 5</h1>
<div class="card">
<div class="card-header">Data</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
<?php
foreach($result as $row)
{
echo '
<tr>
<td><a href="#" class="first_name" id="first_name_'.$row["id"].'" data-type="text" data-pk = "'.$row["id"].'" data-url="process.php" data-name="first_name">'.$row["first_name"].'</a></td>
<td><a href="#" class="last_name" id="last_name_'.$row["id"].'" data-type="text" data-pk="'.$row["id"].'" data-url="process.php" data-name="last_name">'.$row["last_name"].'</a></td>
<td><a href="#" class="gender" id="gender_'.$row["id"].'" data-type="select" data-pk="'.$row["id"].'" data-url="process.php" data-name="gender">'.$row["gender"].'</a></td>
</tr>
';
}
?>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
//For First Name Table Column Data
const first_name = document.getElementsByClassName('first_name');
for(var count = 0; count < first_name.length; count++)
{
const first_name_data = document.getElementById(first_name[count].getAttribute('id'));
const first_name_popover = new DarkEditable(first_name_data);
}
//For Last Name Table Column Data
const last_name = document.getElementsByClassName('last_name');
for(var count = 0; count < last_name.length; count++)
{
const last_name_data = document.getElementById(last_name[count].getAttribute('id'));
const last_name_popover = new DarkEditable(last_name_data);
}
//For Gender Table column Data
const gender = document.getElementsByClassName('gender');
for(var count = 0; count < gender.length; count++)
{
const gender_data = document.getElementById(gender[count].getAttribute("id"));
const gender_popover = new DarkEditable(gender_data, {
source :[
{
value : 'Male',
text : 'Male'
},
{
value : 'Female',
text : 'Female'
}
]
});
}
</script>
process.php
This file has been receive data via Ajax request for update data in MySQL database. This is common dynamic PHP script for all table column data for updation of data.
<?php
//process.php
include 'database_connection.php';
if(isset($_POST["pk"]))
{
$query = "
UPDATE tbl_sample
SET ".$_POST['name']." = '".$_POST["value"]."'
WHERE id = '".$_POST["pk"]."'
";
$connect->query($query);
echo 'done';
}
?>
At the last with the help of this dark-editable library you can implement inline editing of any DIV or table data content without refresh of web page. The one benefits of this library is that when we have make any changes then only it will send ajax request to PHP script.
Additionally Hope you have enjoy this Vanilla JavaScript learning with PHP for live inline editing of data and here you can find complete source of this tutorial also.
Normally after user registration, we have send email at user register email address for confirm his or her email address. Once User has click on email confirmation link then after that user registration process has been completed with email verification.
But in this post, we have use OTP (One Time Password) method for verify registered user email address. Email verification is a very required process for check registered user has enter right information at the time of registration and it is also useful to prevent spam registration at our web application. For this reason verify user identity, we have to verify his or her email address. In this OTP method, If User has provide us genuine email address then on that email address our system will send one email confirmation email with OTP number. User has to just copy that OTP number and enter in email verification page which will be load after submitting registration form data. In that web page, User has to enter OTP number and submit form. After submitting form user email address will be verified.
In most of the dynamic website, there is user registration form. By fill up user registration form, user can register into web page. So in that registration form, If you have use OTP code for user email address verification, then it is the secure method for verify user email address. In this method, OTP Code will be generated at once user has submitted registration form details, and that OTP code will be received at registered user email address. So, when user has enters the OTP code then PHP web application will verify user email address via that OTP code.
In this tutorial, we will learn User registration process with email verification by using OTP method and here we will send OTP code using email. By using this OTP Code method user email address will be validated once user has enter OTP number which he or she received at their email address. Below you can find the source code of PHP registration system with email verification process using OTP method. In source code you can find how registration form has been made, then after we have first validated user registration form data by using PHP function. After form data verification, we have write PHP script to enter only unique user email data into Mysql database and then after send email with OTP number to registered user email address for email confirmation. After this you can find the source code of email verification by using OTP method.
How to Implement OTP based Login in PHP
In this PHP Registration with email verification using OTP method tutorial, here we have add one more feature like Login using OTP. In this section you can get the solution of Login into system using OTP. We all know OTP means one time password and this OTP number will be generated randomly by using PHP function and that randomly generated OTP number will be stored in Mysql database. So when you have login into system then that OTP number will be expired.
Now we have describe you, how to Login using OTP works. So, when you have login into system, then first you have to enter your login credentials like email address and password details. Then If you have enter right login information then at backend it will generated OTP number and that OTP number will be send to your registered email address. So you have to go to your email address inbox and copy that OTP number and enter into system. Once you have enter valid OTP number then system will validate and you can login into system and that OTP number has been expired. So, in this tutorial, we will OTP based Login system in PHP and below you can find the source code of it.
Make Default Avatar In PHP After User Registration
In this PHP Login Registration tutorial, we have add one more feature like create register user dynamic initial avatar once user has complete their registration process. This type of initial avatar or profile image we can see, when we have create account in Google, then after login into Google account then we can see our name first character image in place of profile image. So when we have register into Google system then it has by default create our initial avatar by using our name first character. We can change that avatar or profile image later by uploading image. So, this type of creating initial avatar from register user name feature we have made in this Login Registration tutorial by using PHP script.
PHP Resend Email Verification Mail with OTP Number
In this PHP Login Registration system, we have add one more feature like How can we resend email with OTP number for email verification process. For some reason, If User have completed their registration process but user has not received verification email with OTP number. Then at that time how user can verify their email address and again they cannot register into system, this is because user email address has been inserted in our system. So for overcome this problem, we have add this resend email verification email with OTP number by using PHP script. In this feature, User has to enter his or her register email which is not verified yet, then User has to enter that email address and User can again received email verification email with OTP Number.
PHP Forgot Password Recover using OTP Code
In this section of PHP Login Registration tutorial, we will learn How to reset forgot password by using OTP Code with PHP script. In this feature, User must have to register in our system, so if that user has forgot their password. Then by using this feature they can easily recover their forgot password. For make this feature, we have use PHP scipt, mysql database and PHPMailer class for send password reset OTP number to register email address.
In this feature, first Users has to enter their email address in forgot password form. Here user has to enter only that email which is register in system. If User enter register email address, then they will received one email address in which they can get OTP number. After submit form details then new web page has been load and in that page User has to enter OTP number which is received at their email address. After entering OTP number then after again new form has been load on web page, and here User has to reset new password and submit form. After submitting form User password will be reset and they can again login into system. So, in this section we have make PHP forgot password script using OTP method.
