How to create Basic Register page in Php,MySQL,Bootstrap [part 2]

12:53 AM Unknown 0 Comments


1.Abstract

This tutorial is an attempt to show how to put together a basic user authentication system using PHP and MySQL(bootstrap for the front-end). 
In the previous post we have already created our basic application and it works fine but something still missing its the register page .Basically,any application needs always two interfaces the first one is register page ,in which the user create his account and profile and second page user authentication in which the system can identifying users and gives them there permission .(this one element of the information security )

take a look to the previous post first:
http://nodeme.blogspot.com/2016/04/how-to-create-basic-login-page-in.html

2.Files

after you have downloaded the project ,all we need now is to add new page->register.php
so the new project w'll be like that:


3.Register.php

the code looks the some of login page we just need to change the sql query from select to insert .
if you are new in this field ,you need to see more courses about SQL ,but even that you don't need it right now because its too easy to understand it .

 
<?php
require("config.php");
$flag="";
if (isset($_POST["btn-register"])) {
 # code...
$email=$_POST["email"];
$password=$_POST["password"];

$conx=new mysqli(host,username,pwd,db);

$request=$conx->query(" insert into login_info(email,password) values('$email','$password'); ");

if ($request) {
 $flag='<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Success </strong> you can login now <a href="login.php">login</a>
 </div>';
}
else
{
 $flag='<div class="alert alert-danger">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Failed to register !!</strong>something wrong here !
 </div>';
}


}

?>
<!DOCTYPE html>
<html lang="EN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Register</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
<?php
include("menu.php");
?>
<style type="text/css">
 #mypannel{
position: relative;
top: 130px;
 }

#mypannel2{
 background-color: #eeeeee;
}
</style>
<div class="container">
<div class="panel panel-default" id="mypannel">
 <div class="panel-body">
<center>
<h3>Register</h3>
<p>Each user registers his/her own account.
</p>
</center>
<div class="container-fluid  " align="center">
<form id="registerForm" action="" method="post">
<div style="line-height: 2px; background-color: rgba(210,210,210,0.5); padding: 20px 20px 20px 20px; border-radius: 6px;">
<br>
<div class="input-group">
<span style="width:135px !important;" class="input-group-addon">Email</span>
<input type="text" placeholder="email" name="email" class="form-control"/>
</div>

<br>
<div class="input-group">
<span style="width:135px !important;" class="input-group-addon">Password</span>
<input type="password" placeholder="Password" name="password" class="form-control"/>
</div><br><br>
<button type="submit" class="btn btn-success" name="btn-register">Register</button>
</div>
</form>
<?php
echo $flag;
?>

</div>
</div>
</div>
 </div>
</div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

4.Screenshots



Unknown