We will follow the below mentioned steps:
- First we create table in the Phpmyadmin database to hold the data.
- Create a register form using html and css.
- A javascript code to check for errors in the user inputs and then submit the inputs to database.
- Php and mysql code to insert or update user details into the database
- Close the database connection.
Read,
First we create table in the Phpmyadmin database to hold the data.
We have set our database name as
bncacade_regd
and table name is user-details
. We have taken a total of 6 fields or columns for our table as shown below.
CREATE TABLE `bncacade_regd`.`user-details` ( `username` TEXT NOT NULL, `email` TEXT NOT NULL, `name` TEXT NOT NULL, `dob` DATE NOT NULL, `address` TEXT NOT NULL, `password` TEXT NOT NULL, PRIMARY KEY (`username`(10)), UNIQUE (`email`(40))) ENGINE = InnoDB;
Create a register form using html and css.
User fill up the details and clicks the Update button. There is two javascript code has been written to check for errors in the user inputs. If there is an error the update button will not be enabled. The update button will be enabled only after there is no errors. We have also set up a javascript code to check that both the password matches before user hits the update button. For this we have used javascript keyup event.update user details form
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container11"> <h1 class="w3-padding-32 w3-center">Update user details</h1> <form method="post" action="update.php" > <div class="input-group1"> <label for="username">Username</label> <input type="text" name="username" placeholder="Enter username" id="username" value="" required> </div> <br> <div class="input-group1"> <label for="email">Email Id</label> <input type="email" id="email" name="email" placeholder="Enter your Email" value="" required> <span id='message2'></span> </div> <br> <div class="input-group1"> <label for="fname">Name</label> <input type="text" name="name" placeholder="Enter name" id="name" value="" required> </div> <br><br> <div class="input-group1"> <label for="date">Date of Birth</label> <input type="date" name="date" placeholder="Choose Date of Birth" id="date" min="1950-01-01" value="" required> </div> <br><br><br> <div class="input-group1"> <label for="address">Address</label> <textarea name="address" placeholder="Enter Address" id="address" rows="3" cols="50" value="" required> </textarea> </div> <br> <div class="input-group1"> <label for="password1">Password</label> <input type="password" id="password1" name="password1" placeholder="Enter your password" value="" required> <span id='message3'></span> </div> <br> <div class="input-group1"> <label for="password2">Confirm Password</label> <input type="password" id="password2" name="password2" placeholder="Retype password" value="" required> <br> <span id='message3'></span> </div> <br> <div class="input-group1"> <input type="submit" class="btn" name="reg_user" id="enter" disabled="true" value="Update Details"> </div> </form> <script> $('#password1, #password2').on('keyup', function () { if ($('#password1').val() == $('#password2').val()) { $('#message3').html('Matched').css('color', 'green'); $("#enter").prop('disabled',false); } else $('#message3').html('Password Missmatch').css('color', 'red'); } ); </script> <script> $('#email').on('keyup',function(){ var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; var email = $("#email").val(); if(email.match(mailformat)){ $('#message2').html('valid').css('color','green'); } else $('#message2').html('Invalid Email').css('color','red'); } ); </script> </div> </body> </html>
Php and mysql code to insert/update user details into the database
Values which we receive through update user details form is collected at separate variables here. We make a database connection and then check whether username is already registered or not. If it is registered, we update the user details in database, if no such user is found we make a row in the table for new user. Thats all in this page.
upload.php
<?php session_start(); // initializing variables $fname = ""; $lname = ""; $date = "" ; $roll = "" ; $address = "" ; $mobile = "" ; $adhar = "" ; $email = "" ; // connect to the database $db = mysqli_connect('localhost', 'username', 'password', 'bncacade_regd'); // REGISTER USER if (isset($_POST['reg_user'])) { // receive all input values from the form $username = $_POST['username']; $email = $_POST['email']; $name = $_POST['name']; $dob = $_POST['date']; $address = $_POST['address']; $password = $_POST['password1']; // first check the database to make sure // a user already exist with the same username and/or email $user_check_query = "SELECT * FROM reg_user WHERE username='$username' OR email='$email' LIMIT 1"; $result = mysqli_query($db, $user_check_query); if ($result === FALSE) { die(mysqli_error($connect)); } $user = mysqli_fetch_assoc($result); if ($user) { // if user exists update the details in the database $password = md5($password1);//encrypt the password before saving in the database $query = "UPDATE reg_user SET name='$name', dob='$date', address='$address', password='$password' where username='$username'"; } // Register user if there are no user with the given username and email else { $password = md5($password1);//encrypt the password before saving in the database $query = "INSERT INTO reg_user (username, email, name, dob, address, password) VALUES('$username', '$email', '$name', '$date', '$address', '$password')"; $result1 = mysqli_query($db, $query); if ($result === FALSE) { die(mysqli_error($connect)); } } } ?>
If you face any issue while implementing the code, you can contact me. Thanks for patient reading.
If you like this article, share with your friends. It will inspire me to write more.