Post
Ask Question

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.   `password` varchar(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