article

Wednesday, October 30, 2019

Simple Registration Form using Bootstrap PHP and Mysqli

Simple Registration Form using Bootstrap PHP and Mysqli
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Registration Form using Bootstrap PHP and Mysqli</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
 body{
  color: #fff;
  font-family: 'Roboto', sans-serif;
  background-image: url(''),linear-gradient(100deg,#18b99b,#b1f056);
 }
    .form-control{
  height: 40px;
  box-shadow: none;
  color: #969fa4;
 }
 .form-control:focus{
  border-color: #5cb85c;
 }
    .form-control, .btn{       
        border-radius: 3px;
    }
 .signup-form{
  width: 400px;
  margin: 0 auto;
  padding: 30px 0;
 }
 .signup-form h2{
  color: #636363;
        margin: 0 0 15px;
  position: relative;
  text-align: center;
    }
 .signup-form h2:before, .signup-form h2:after{
  content: "";
  height: 2px;
  width: 30%;
  background: #d4d4d4;
  position: absolute;
  top: 50%;
  z-index: 2;
 }
 .signup-form h2:before{
  left: 0;
 }
 .signup-form h2:after{
  right: 0;
 }
    .signup-form .hint-text{
  color: #999;
  margin-bottom: 30px;
  text-align: center;
 }
    .signup-form form{
  color: #999;
  border-radius: 3px;
     margin-bottom: 15px;
        background: #f2f3f7;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
 .signup-form .form-group{
  margin-bottom: 20px;
 }
 .signup-form input[type="checkbox"]{
  margin-top: 3px;
 }
 .signup-form .btn{       
        font-size: 16px;
        font-weight: bold; 
  min-width: 140px;
        outline: none !important;
    }
 .signup-form .row div:first-child{
  padding-right: 10px;
 }
 .signup-form .row div:last-child{
  padding-left: 10px;
 }    
    .signup-form a{
  color: #fff;
  text-decoration: underline;
 }
    .signup-form a:hover{
  text-decoration: none;
 }
 .signup-form form a{
  color: #5cb85c;
  text-decoration: none;
 }
 .signup-form form a:hover{
  text-decoration: underline;
 }
</style>
</head>
<body>
<div class="signup-form">
    <form action="confirmation.php" method="post" autocomplete="off">
  <h2>Register</h2>
  <p class="hint-text">Create your account. It's free and only takes a minute.</p>
        <div class="form-group">
   <div class="row">
    <div class="col-xs-6"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
    <div class="col-xs-6"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
   </div>        
        </div>
        <div class="form-group">
         <input type="email" class="form-control" name="email" placeholder="Email" required="required">
        </div>
  <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="Password" required="required">
        </div>
  <div class="form-group">
            <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
        </div>       
        <div class="form-group">
   <label class="checkbox-inline"><input type="checkbox" name="agree" required="required"> I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a></label>
  </div>
  <div class="form-group">
            <button type="submit" class="btn btn-success btn-lg btn-block">Register Now</button>
        </div>
    </form>
 <div class="text-center">Already have an account? <a href="#">Sign in</a></div>
</div>
</body>
</html>
?
1
2
3
4
5
6
7
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//confirmation.php
<?php
include"dbcon.php";
$first_name  = $_POST['first_name'];
$last_name  = $_POST['last_name'];
$email  = $_POST['email'];
$password  = $_POST['password'];
$sql = "INSERT INTO user (fname, lname, emailadd, pass)
VALUES ('".$first_name."','".$last_name."','".$email."','".$password."')";
if ($conn->query($sql) === TRUE) {
 echo "<h1 align='center'>New record created successfully</h1>";
} else {
 echo "Error: " . $sql . "<br>" . $conn->error."";
}
$conn->close();
?>
Posted by ednalan at 7:51 PM . Under , .

Related Post