Create Login and Registration Form in PHP Using OOP

Introduction

 
This article makes it easy to learn and use functions and sessions. Look at the following procedure.
 
Step 1
 
Create a database as in the following:
  1. Create database login_db;  
Step 2
 
Create a table as in the following:
  1. CREATE TABLE IF NOT EXISTS `users` (  
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,  
  3.   `username` varchar(30) NOT NULL,  
  4.   `emailid` varchar(30) NOT NULL,  
  5.   `passwordvarchar(30) NOT NULL,  
  6.    PRIMARY KEY (`id`)  
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;  
Step 3
 
Create a form named index.php as in the following:
  1. <!DOCTYPE html>  
  2.  <html lang="en" class="no-js">  
  3.  <head>  
  4.         <meta charset="UTF-8" />  
  5.         <title>Login and Registration Form with HTML5 and CSS3</title>  
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  7.         <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />  
  8.         <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />  
  9.         <meta name="author" content="Codrops" />  
  10.         <link rel="shortcut icon" href="../favicon.ico">   
  11.         <link rel="stylesheet" type="text/css" href="css/demo.css" />  
  12.         <link rel="stylesheet" type="text/css" href="css/style2.css" />  
  13.         <link rel="stylesheet" type="text/css" href="css/animate-custom.css" />  
  14.     </head>  
  15.     <body>  
  16.         <div class="container">  
  17.             <header>  
  18.                 <h1>Login and Registration Form  </h1>  
  19.             </header>  
  20.             <section>               
  21.                 <div id="container_demo" >  
  22.                      
  23.                     <a class="hiddenanchor" id="toregister"></a>  
  24.                     <a class="hiddenanchor" id="tologin"></a>  
  25.                     <div id="wrapper">  
  26.                         <div id="login" class="animate form">  
  27.                            <form name="login" method="post" action="">  
  28.                                 <h1>Log in</h1>   
  29.                                 <p>   
  30.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  31.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="[email protected]"/>   
  32.                                 </p>  
  33.                                 <p>   
  34.                                     <label for="password" class="youpasswd" data-icon="p"> Your password </label>  
  35.                                     <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />   
  36.                                 </p>  
  37.                                 <p class="keeplogin">   
  38.                                     <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />   
  39.                                     <label for="loginkeeping">Keep me logged in</label>  
  40.                                 </p>  
  41.                                 <p class="login button">   
  42.                                     <input type="submit" name="login" value="Login" />   
  43.                                 </p>  
  44.                                 <p class="change_link">  
  45.                                     Not a member yet ?  
  46.                                     <a href="#toregister" class="to_register">Join us</a>  
  47.                                 </p>  
  48.                             </form>  
  49.                         </div>  
  50.   
  51.                         <div id="register" class="animate form">  
  52.                             <form name="login" method="post" action="">  
  53.                                 <h1> Sign up </h1>   
  54.                                 <p>   
  55.                                     <label for="usernamesignup" class="uname" data-icon="u">Your username</label>  
  56.                                     <input id="usernamesignup" name="username" required="required" type="text" placeholder="mysuperusername690" />  
  57.                                 </p>  
  58.                                 <p>   
  59.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  60.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="[email protected]"/>   
  61.                                 </p>  
  62.                                 <p>   
  63.                                     <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>  
  64.                                     <input id="passwordsignup" name="password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  65.                                 </p>  
  66.                                 <p>   
  67.                                     <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>  
  68.                                     <input id="passwordsignup_confirm" name="confirm_password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  69.                                 </p>  
  70.                                 <p class="signin button">   
  71.                                     <input type="submit" name="register" value="Sign up"/>   
  72.                                 </p>  
  73.                                 <p class="change_link">    
  74.                                     Already a member ?  
  75.                                     <a href="#tologin" class="to_register"> Go and log in </a>  
  76.                                 </p>  
  77.                             </form>  
  78.                         </div>  
  79.                           
  80.                     </div>  
  81.                 </div>    
  82.             </section>  
  83.         </div>  
  84.     </body>  
  85. </html>  
Step 4
 
Create a config file named config.php as in the following:
  1. <?php  
  2.     define("DB_HOST"'localhost');  
  3.     define("DB_USER"'root');  
  4.     define("DB_PASSWORD"'');  
  5.     define("DB_DATABSE"'mypratice');  
  6. ?>  
Step 5
 
Make a database connection class. Create the file named dbConnect.php as in the following:
  1. <?php  
  2.     class dbConnect {  
  3.         function __construct() {  
  4.             require_once('config.php');  
  5.             $conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);  
  6.             mysql_select_db(DB_DATABSE, $conn);  
  7.             if(!$conn)// testing the connection  
  8.             {  
  9.                 die ("Cannot connect to the database");  
  10.             }   
  11.             return $conn;  
  12.         }  
  13.         public function Close(){  
  14.             mysql_close();  
  15.         }  
  16.     }  
  17. ?>  
Step 6
 
Make a Function class. Create the file named dbFunction.php as in the following:
  1. <?php  
  2. require_once 'dbConnect.php';  
  3. session_start();  
  4.     class dbFunction {  
  5.             
  6.         function __construct() {  
  7.               
  8.             // connecting to database  
  9.             $db = new dbConnect();;  
  10.                
  11.         }  
  12.         // destructor  
  13.         function __destruct() {  
  14.               
  15.         }  
  16.         public function UserRegister($username$emailid$password){  
  17.                 $password = md5($password);  
  18.                 $qr = mysql_query("INSERT INTO users(username, emailid, password) values('".$username."','".$emailid."','".$password."')"or die(mysql_error());  
  19.                 return $qr;  
  20.                
  21.         }  
  22.         public function Login($emailid$password){  
  23.             $res = mysql_query("SELECT * FROM users WHERE emailid = '".$emailid."' AND password = '".md5($password)."'");  
  24.             $user_data = mysql_fetch_array($res);  
  25.             //print_r($user_data);  
  26.             $no_rows = mysql_num_rows($res);  
  27.               
  28.             if ($no_rows == 1)   
  29.             {  
  30.            
  31.                 $_SESSION['login'] = true;  
  32.                 $_SESSION['uid'] = $user_data['id'];  
  33.                 $_SESSION['username'] = $user_data['username'];  
  34.                 $_SESSION['email'] = $user_data['emailid'];  
  35.                 return TRUE;  
  36.             }  
  37.             else  
  38.             {  
  39.                 return FALSE;  
  40.             }  
  41.         }  
  42.         public function isUserExist($emailid){  
  43.             $qr = mysql_query("SELECT * FROM users WHERE emailid = '".$emailid."'");  
  44.             echo $row = mysql_num_rows($qr);  
  45.             if($row > 0){  
  46.                 return true;  
  47.             } else {  
  48.                 return false;  
  49.             }  
  50.         }  
  51.     }  
  52. ?>  
Step 7
 
After the preceding procedure use the Function in index.php as in the following:
  1. <?php  
  2.     include_once('dbFunction.php');  
  3.        
  4.     $funObj = new dbFunction();  
  5.     if($_POST['login']){  
  6.         $emailid = $_POST['emailid'];  
  7.         $password = $_POST['password'];  
  8.         $user = $funObj->Login($emailid$password);  
  9.         if ($user) {  
  10.             // Registration Success  
  11.            header("location:home.php");  
  12.         } else {  
  13.             // Registration Failed  
  14.             echo "<script>alert('Emailid / Password Not Match')</script>";  
  15.         }  
  16.     }  
  17.     if($_POST['register']){  
  18.         $username = $_POST['username'];  
  19.         $emailid = $_POST['emailid'];  
  20.         $password = $_POST['password'];  
  21.         $confirmPassword = $_POST['confirm_password'];  
  22.         if($password == $confirmPassword){  
  23.             $email = $funObj->isUserExist($emailid);  
  24.             if(!$email){  
  25.                 $register = $funObj->UserRegister($username$emailid$password);  
  26.                 if($register){  
  27.                      echo "<script>alert('Registration Successful')</script>";  
  28.                 }else{  
  29.                     echo "<script>alert('Registration Not Successful')</script>";  
  30.                 }  
  31.             } else {  
  32.                 echo "<script>alert('Email Already Exist')</script>";  
  33.             }  
  34.         } else {  
  35.             echo "<script>alert('Password Not Match')</script>";  
  36.           
  37.         }  
  38.     }  
  39. ?>  
  40. <!DOCTYPE html>  
  41.  <html lang="en" class="no-js">  
  42.  <head>  
  43.         <meta charset="UTF-8" />  
  44.         <title>Login and Registration Form with HTML5 and CSS3</title>  
  45.         <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  46.         <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />  
  47.         <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />  
  48.         <meta name="author" content="Codrops" />  
  49.         <link rel="shortcut icon" href="../favicon.ico">   
  50.         <link rel="stylesheet" type="text/css" href="css/demo.css" />  
  51.         <link rel="stylesheet" type="text/css" href="css/style2.css" />  
  52.         <link rel="stylesheet" type="text/css" href="css/animate-custom.css" />  
  53.     </head>  
  54.     <body>  
  55.         <div class="container">  
  56.             <header>  
  57.                 <h1>Login and Registration Form  </h1>  
  58.             </header>  
  59.             <section>               
  60.                 <div id="container_demo" >  
  61.                      
  62.                     <a class="hiddenanchor" id="toregister"></a>  
  63.                     <a class="hiddenanchor" id="tologin"></a>  
  64.                     <div id="wrapper">  
  65.                         <div id="login" class="animate form">  
  66.                            <form name="login" method="post" action="">  
  67.                                 <h1>Log in</h1>   
  68.                                 <p>   
  69.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  70.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="[email protected]"/>   
  71.                                 </p>  
  72.                                 <p>   
  73.                                     <label for="password" class="youpasswd" data-icon="p"> Your password </label>  
  74.                                     <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />   
  75.                                 </p>  
  76.                                 <p class="keeplogin">   
  77.                                     <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />   
  78.                                     <label for="loginkeeping">Keep me logged in</label>  
  79.                                 </p>  
  80.                                 <p class="login button">   
  81.                                     <input type="submit" name="login" value="Login" />   
  82.                                 </p>  
  83.                                 <p class="change_link">  
  84.                                     Not a member yet ?  
  85.                                     <a href="#toregister" class="to_register">Join us</a>  
  86.                                 </p>  
  87.                             </form>  
  88.                         </div>  
  89.   
  90.                         <div id="register" class="animate form">  
  91.                             <form name="login" method="post" action="">  
  92.                                 <h1> Sign up </h1>   
  93.                                 <p>   
  94.                                     <label for="usernamesignup" class="uname" data-icon="u">Your username</label>  
  95.                                     <input id="usernamesignup" name="username" required="required" type="text" placeholder="mysuperusername690" />  
  96.                                 </p>  
  97.                                 <p>   
  98.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  99.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="[email protected]"/>   
  100.                                 </p>  
  101.                                 <p>   
  102.                                     <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>  
  103.                                     <input id="passwordsignup" name="password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  104.                                 </p>  
  105.                                 <p>   
  106.                                     <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>  
  107.                                     <input id="passwordsignup_confirm" name="confirm_password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  108.                                 </p>  
  109.                                 <p class="signin button">   
  110.                                     <input type="submit" name="register" value="Sign up"/>   
  111.                                 </p>  
  112.                                 <p class="change_link">    
  113.                                     Already a member ?  
  114.                                     <a href="#tologin" class="to_register"> Go and log in </a>  
  115.                                 </p>  
  116.                             </form>  
  117.                         </div>  
  118.                           
  119.                     </div>  
  120.                 </div>    
  121.             </section>  
  122.         </div>  
  123.     </body>  
  124. </html>  
Step 8
 
Create a Home Page named home.php as in the following:
  1. <?php   
  2.     include_once('dbFunction.php');  
  3.     if($_POST['welcome']){  
  4.         // remove all session variables  
  5.         session_unset();   
  6.   
  7.         // destroy the session   
  8.         session_destroy();  
  9.     }  
  10.     if(!($_SESSION)){  
  11.         header("Location:index.php");  
  12.     }  
  13. ?>  
  14. <!DOCTYPE html>  
  15.  <html lang="en" class="no-js">  
  16.  <head>  
  17.         <meta charset="UTF-8" />  
  18.         <title>Login and Registration Form with HTML5 and CSS3</title>  
  19.         <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  20.         <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />  
  21.         <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />  
  22.         <meta name="author" content="Codrops" />  
  23.         <link rel="shortcut icon" href="../favicon.ico">   
  24.         <link rel="stylesheet" type="text/css" href="css/demo.css" />  
  25.         <link rel="stylesheet" type="text/css" href="css/style2.css" />  
  26.         <link rel="stylesheet" type="text/css" href="css/animate-custom.css" />  
  27.     </head>  
  28.     <body>  
  29.         <div class="container">  
  30.             <header>  
  31.                 <h1>Welcome Form  </h1>  
  32.             </header>  
  33.             <section>               
  34.                 <div id="container_demo" >  
  35.                      
  36.                     <a class="hiddenanchor" id="toregister"></a>  
  37.                     <a class="hiddenanchor" id="tologin"></a>  
  38.                     <div id="wrapper">  
  39.                         <div id="login" class="animate form">  
  40.                            <form name="login" method="post" action="">  
  41.                                 <h1>Welcome </h1>   
  42.                                 <p>   
  43.                                     <label for="emailid" class="uname"   > Your Name </label>  
  44.                                    <?=$_SESSION['username']?>  
  45.                   
  46.                                 </p>  
  47.                                 <p>   
  48.                                     <label for="email" class="youpasswd"  > Your Email </label>  
  49.                                     <?=$_SESSION['email']?>  
  50.                                 </p>  
  51.                                    
  52.                                 <p class="login button">   
  53.                                     <input type="submit" name="welcome" value="Logout" />   
  54.                                 </p>  
  55.                                    
  56.                             </form>  
  57.                         </div>  
  58.                     </div>  
  59.                 </div>    
  60.             </section>  
  61.         </div>  
  62.     </body>  
  63. </html>  
Step 9
 
After the preceding procedure has been done run your program. After running it the following will be the output screens.
 
1- Login Screen
 
Login Screen
 
2- Registration Screen
 
Registration Screen
 
3- Home Screen
 
Home Screen


Similar Articles