phpguru25: March 2019

In these Blog we learn how to create a simple resgistration form using php bootstrap with validation in simple steps.

Step 1) Design Registration Form using bootstrap

Create a page and save as a form.php for design a registration form using bootstrap. if you want to design another form you can create your own design or use the code below.

form.php

<!DOCTYPE html>
<html>
<head>
    <title>Registration From in PHP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        .bg-primary {
            background-color: #1a52c6;
        }
        .lab {
            color: red;
        }
    </style>
</head>
<body class="bg-primary">

    <h2 style="margin-left: 420px;margin-top: 100px;">Registration From in PHP with Validation</h2>
    <div class="row" style="margin-top: 60px;margin-left: 100px;">
        <div class="col-md-2"></div>
        <div class="col-md-6">
            <div class = "well">
            <form class="form-horizontal" method="post" action="insert.php">

            <div class="form-group">
                <label class="control-label lab col-sm-3" for="fullname">Full Name:</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" id="fullname" name="fullname" placeholder="Enter Full Name"
                  oninvalid="this.setCustomValidity('Please Enter Full Name')" oninput="setCustomValidity('')" required>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label lab col-sm-3" for="email">Email:</label>
                <div class="col-sm-6">
                  <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')"required>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label lab col-sm-3" for="phone">Phone Number:</label>
                <div class="col-sm-6">
                  <input type="text" maxlength="10" class="form-control" id="phone" name="phone" placeholder="Enter Phone Number" oninvalid="this.setCustomValidity('Please Enter Phone Number')" oninput="setCustomValidity('')" required>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label lab col-sm-3" for="dob">Date Of Birth:</label>
                <div class="col-sm-3">
                  <input type="date" name="dob" style="color: black;">
                </div>
            </div>

            <div class="form-group">
                <label class="control-label lab col-sm-3" for="gender">Gender:</label>
                <div class="col-sm-3">
                    <select class="form-control" name="gender" required>
                        <option value="">select</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-10">
                  <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
            </form>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>

</body>
</html>

After Run the Page You Can Get Design Like These.

Output Screen:

Registration Form

If you click on submit button you can see validation like these

Validation using Bootstrap

Step 2) Create Table

Now we Create table to store the registration information in database.

create table name as register or you want another name you can create table as you want.but table structure should be look like these

Step 3) Connection with Database

create a file name as db.php to make connection with database and table.

db.php

<?php
$servername="localhost";
$username="root";
$password="";
$dbname="register";

$server_time=date("Y-m-d H:i:s);

$conn=new mysqli("$servername","$username","$password","$dbname");

if($conn){
//echo "Connected Successfully";
}else{
echo "Failed to Connect";
}

Step 4) Insert Query

Now Create one more page and save as a insert.php. In these page we write the insert query to insert our information to store in register table.

register.php

<?php
include"db.php";

$fullname=$_POST['fullname'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$dob=$_POST['dob'];
$gender=$_POST['gender'];

$query=mysqli_query($conn,"insert into register(fullname,email,phone,dob,gender,date)values('$fullname','$email','$phone','$dob','$gender','$server_time')");

if($query){
echo "<script>setTimeout(\"location.href = 'form.php';\",00);</script>";
}

Step 5) Now you can Fill all the information your registration page is ready to use.

Step 1) Search Xampp in Windows Search then Xampp Contol panel show like these.

Xampp Control Panel

Step 2) Then Click Start Apache and MySQL button.

mysqli-start-xampp,mysqli-database-connection

Start MySQL & apache

Step 3) Open a Browser and type https://localhost/phpmyadmin

Step 4) Click on New -> Database Name and click on create button.

In these example. new -> crud_ajax

Step 5) Go in Computer Drive where you Install xampp.
Click Xampp -> htdocs -> Create New Folder

In these example. Xampp -> htdocs -> crud_ajax

Step 6) Create new file in that folder and name as db.php

In these example. Xampp -> htdocs -> crud_ajax -> db.php

Step 7) And write these code in db.php file.

db.php

<?php

$servername="localhost";
$username="root";
$password="";
$dbname="crud_ajax";

$conn=new mysqli($servername,$username,$password,$dbname);

if($conn->connect_error)
{
    die("connection failed".$connect_error);

}else{

    echo "Connected Successfully";
}

?>

Step 8) Open a Browser and type https://localhost/crud_ajax/db.php

Output Screen:-


connection successfull

phpguru25

Pages

Registration Form in PHP with validation using Bootstrap

In these Blog we learn how to create a simple resgistration form using php bootstrap with validation in simple steps.

form.php

mysqli database connection using xampp