Best Industrial Training in C,C++,PHP,Dot Net,Java in Jalandhar

Tuesday, 9 June 2015

Create Login and Registration Form in PHP Using OOP

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.               
  18.               
  19.             <header>  
  20.                 <h1>Login and Registration Form  </h1>  
  21.             </header>  
  22.             <section>               
  23.                 <div id="container_demo" >  
  24.                      
  25.                     <a class="hiddenanchor" id="toregister"></a>  
  26.                     <a class="hiddenanchor" id="tologin"></a>  
  27.                     <div id="wrapper">  
  28.                         <div id="login" class="animate form">  
  29.                            <form name="login" method="post" action="">  
  30.                                 <h1>Log in</h1>   
  31.                                 <p>   
  32.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  33.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="mysupermail@mail.com"/>   
  34.                                 </p>  
  35.                                 <p>   
  36.                                     <label for="password" class="youpasswd" data-icon="p"> Your password </label>  
  37.                                     <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />   
  38.                                 </p>  
  39.                                 <p class="keeplogin">   
  40.                                     <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />   
  41.                                     <label for="loginkeeping">Keep me logged in</label>  
  42.                                 </p>  
  43.                                 <p class="login button">   
  44.                                     <input type="submit" name="login" value="Login" />   
  45.                                 </p>  
  46.                                 <p class="change_link">  
  47.                                     Not a member yet ?  
  48.                                     <a href="#toregister" class="to_register">Join us</a>  
  49.                                 </p>  
  50.                             </form>  
  51.                         </div>  
  52.   
  53.                         <div id="register" class="animate form">  
  54.                             <form name="login" method="post" action="">  
  55.                                 <h1> Sign up </h1>   
  56.                                 <p>   
  57.                                     <label for="usernamesignup" class="uname" data-icon="u">Your username</label>  
  58.                                     <input id="usernamesignup" name="username" required="required" type="text" placeholder="mysuperusername690" />  
  59.                                 </p>  
  60.                                 <p>   
  61.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  62.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="mysupermail@mail.com"/>   
  63.                                 </p>  
  64.                                 <p>   
  65.                                     <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>  
  66.                                     <input id="passwordsignup" name="password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  67.                                 </p>  
  68.                                 <p>   
  69.                                     <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>  
  70.                                     <input id="passwordsignup_confirm" name="confirm_password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  71.                                 </p>  
  72.                                 <p class="signin button">   
  73.                                     <input type="submit" name="register" value="Sign up"/>   
  74.                                 </p>  
  75.                                 <p class="change_link">    
  76.                                     Already a member ?  
  77.                                     <a href="#tologin" class="to_register"> Go and log in </a>  
  78.                                 </p>  
  79.                             </form>  
  80.                         </div>  
  81.                           
  82.                     </div>  
  83.                 </div>    
  84.             </section>  
  85.         </div>  
  86.     </body>  
  87. </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.                    
  43.         }  
  44.         public function isUserExist($emailid){  
  45.             $qr = mysql_query("SELECT * FROM users WHERE emailid = '".$emailid."'");  
  46.             echo $row = mysql_num_rows($qr);  
  47.             if($row > 0){  
  48.                 return true;  
  49.             } else {  
  50.                 return false;  
  51.             }  
  52.         }  
  53.     }  
  54. ?>  
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.               
  57.               
  58.             <header>  
  59.                 <h1>Login and Registration Form  </h1>  
  60.             </header>  
  61.             <section>               
  62.                 <div id="container_demo" >  
  63.                      
  64.                     <a class="hiddenanchor" id="toregister"></a>  
  65.                     <a class="hiddenanchor" id="tologin"></a>  
  66.                     <div id="wrapper">  
  67.                         <div id="login" class="animate form">  
  68.                            <form name="login" method="post" action="">  
  69.                                 <h1>Log in</h1>   
  70.                                 <p>   
  71.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  72.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="mysupermail@mail.com"/>   
  73.                                 </p>  
  74.                                 <p>   
  75.                                     <label for="password" class="youpasswd" data-icon="p"> Your password </label>  
  76.                                     <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />   
  77.                                 </p>  
  78.                                 <p class="keeplogin">   
  79.                                     <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />   
  80.                                     <label for="loginkeeping">Keep me logged in</label>  
  81.                                 </p>  
  82.                                 <p class="login button">   
  83.                                     <input type="submit" name="login" value="Login" />   
  84.                                 </p>  
  85.                                 <p class="change_link">  
  86.                                     Not a member yet ?  
  87.                                     <a href="#toregister" class="to_register">Join us</a>  
  88.                                 </p>  
  89.                             </form>  
  90.                         </div>  
  91.   
  92.                         <div id="register" class="animate form">  
  93.                             <form name="login" method="post" action="">  
  94.                                 <h1> Sign up </h1>   
  95.                                 <p>   
  96.                                     <label for="usernamesignup" class="uname" data-icon="u">Your username</label>  
  97.                                     <input id="usernamesignup" name="username" required="required" type="text" placeholder="mysuperusername690" />  
  98.                                 </p>  
  99.                                 <p>   
  100.                                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
  101.                                     <input id="emailsignup" name="emailid" required="required" type="email" placeholder="mysupermail@mail.com"/>   
  102.                                 </p>  
  103.                                 <p>   
  104.                                     <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>  
  105.                                     <input id="passwordsignup" name="password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  106.                                 </p>  
  107.                                 <p>   
  108.                                     <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>  
  109.                                     <input id="passwordsignup_confirm" name="confirm_password" required="required" type="password" placeholder="eg. X8df!90EO"/>  
  110.                                 </p>  
  111.                                 <p class="signin button">   
  112.                                     <input type="submit" name="register" value="Sign up"/>   
  113.                                 </p>  
  114.                                 <p class="change_link">    
  115.                                     Already a member ?  
  116.                                     <a href="#tologin" class="to_register"> Go and log in </a>  
  117.                                 </p>  
  118.                             </form>  
  119.                         </div>  
  120.                           
  121.                     </div>  
  122.                 </div>    
  123.             </section>  
  124.         </div>  
  125.     </body>  
  126. </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.               
  31.               
  32.             <header>  
  33.                 <h1>Welcome Form  </h1>  
  34.             </header>  
  35.             <section>               
  36.                 <div id="container_demo" >  
  37.                      
  38.                     <a class="hiddenanchor" id="toregister"></a>  
  39.                     <a class="hiddenanchor" id="tologin"></a>  
  40.                     <div id="wrapper">  
  41.                         <div id="login" class="animate form">  
  42.                            <form name="login" method="post" action="">  
  43.                                 <h1>Welcome </h1>   
  44.                                 <p>   
  45.                                     <label for="emailid" class="uname"   > Your Name </label>  
  46.                                    <?=$_SESSION['username']?>  
  47.                   
  48.                                 </p>  
  49.                                 <p>   
  50.                                     <label for="email" class="youpasswd"  > Your Email </label>  
  51.                                     <?=$_SESSION['email']?>  
  52.                                 </p>  
  53.                                    
  54.                                 <p class="login button">   
  55.                                     <input type="submit" name="welcome" value="Logout" />   
  56.                                 </p>  
  57.                                    
  58.                             </form>  
  59.                         </div>  
  60.   
  61.                           
  62.                     </div>  
  63.                 </div>    
  64.             </section>  
  65.         </div>  
  66.     </body>  
  67. </html>  
Step 9
After the preceding procedure has been done run your program. After running it the following wil be the output screens.

1- Login Screen

Login Screen

2- Registration Screen

Registration Screen

3- Home Screen 

Home Screen
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)