Dj Techblog

A blog on web development

Register user form | Update user details form in php | Update mysql database using php

Last modified on on Feb 4, 2021
Register user form | Update user details form in php | Update mysql database using php
In this blog, we will create a register form to insert data into Mysql database. We can also use this form to update user details in mysql database. In the front end I have used html, css, javascript. In the back end, php and mysql to insert or update data into the database.

We will follow the below mentioned steps:
  1. First we create table in the Phpmyadmin database to hold the data.
  2. Create a register form using html and css.
  3. A javascript code to check for errors in the user inputs and then submit the inputs to database.
  4. Php and mysql code to insert or update user details into the database
  5. 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));
      }
  }
}


?>
Download the style.css.

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.
Published on Dec 3, 2020

Intro

Debabratta Jena

I mainly write about HTML5, CSS3, Javascript, Angular JS, Ajax, PHP, Mysql, On page SEO, Google Ads, Tag manager, Universal Analytics, Google My Business, SERP, Apache server configuration etc, Yoga is my passion.

Reach to me in the contact us form below

Follow me on

Contact us

Subscribe

Tags

Php HTML5 Javascript CSS Ajax Angular JS Google My bisiness Listing Google tag Manager Google Universal Analytics Search Engine Optimization On page SEO Off page SEO Google Marketing platform Digital Marketing Google Ads Mysql Apache Server

Ad section