•        
  •   
  • Step 4

    Create a config file named config.php as in the following:

    1.     define(“DB_HOST”‘localhost’);  
    2.     define(“DB_USER”‘root’);  
    3.     define(“DB_PASSWORD”);  
    4.     define(“DB_DATABSE”‘mypratice’);  
    5. ?>  

    Step 5

    Make a database connection class. Create the file named dbConnect.php as in the following:

    1.     class dbConnect {  
    2.         function __construct() {  
    3.             require_once(‘config.php’);  
    4.             $conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);  
    5.             mysql_select_db(DB_DATABSE, $conn);  
    6.             if(!$conn)  
    7.             {  
    8.                 die (“Cannot connect to the database”);  
    9.             }   
    10.             return $conn;  
    11.         }  
    12.         public function Close(){  
    13.             mysql_close();  
    14.         }  
    15.     }  
    16. ?>  

    Step 6

    Make a Function class. Create the file named dbFunction.php as in the following:

    1. require_once ‘dbConnect.php’;  
    2. session_start();  
    3.     class dbFunction {  
    4.             
    5.         function __construct() {  
    6.               
    7.               
    8.             $db = new dbConnect();;  
    9.                
    10.         }  
    11.           
    12.         function __destruct() {  
    13.               
    14.         }  
    15.         public function UserRegister($username$emailid$password){  
    16.                 $password = md5($password);  
    17.                 $qr = mysql_query(“INSERT INTO users(username, emailid, password) values(‘”.$username.“‘,'”.$emailid.“‘,'”.$password.“‘)”or die(mysql_error());  
    18.                 return $qr;  
    19.                
    20.         }  
    21.         public function Login($emailid$password){  
    22.             $res = mysql_query(“SELECT * FROM users WHERE emailid = ‘”.$emailid.“‘ AND password = ‘”.md5($password).“‘”);  
    23.             $user_data = mysql_fetch_array($res);  
    24.               
    25.             $no_rows = mysql_num_rows($res);  
    26.               
    27.             if ($no_rows == 1)   
    28.             {  
    29.            
    30.                 $_SESSION[‘login’] = true;  
    31.                 $_SESSION[‘uid’] = $user_data[‘id’];  
    32.                 $_SESSION[‘username’] = $user_data[‘username’];  
    33.                 $_SESSION[’email’] = $user_data[’emailid’];  
    34.                 return TRUE;  
    35.             }  
    36.             else  
    37.             {  
    38.                 return FALSE;  
    39.             }  
    40.                
    41.                    
    42.         }  
    43.         public function isUserExist($emailid){  
    44.             $qr = mysql_query(“SELECT * FROM users WHERE emailid = ‘”.$emailid.“‘”);  
    45.             echo $row = mysql_num_rows($qr);  
    46.             if($row > 0){  
    47.                 return true;  
    48.             } else {  
    49.                 return false;  
    50.             }  
    51.         }  
    52.     }  
    53. ?>  

    Step 7

    After the preceding procedure use the Function in index.php as in the following:

    1.     include_once(‘dbFunction.php’);  
    2.        
    3.     $funObj = new dbFunction();  
    4.     if($_POST[‘login’]){  
    5.         $emailid = $_POST[’emailid’];  
    6.         $password = $_POST[‘password’];  
    7.         $user = $funObj->Login($emailid$password);  
    8.         if ($user) {  
    9.               
    10.            header(“location:home.php”);  
    11.         } else {  
    12.               
    13.             echo ““;  
    14.         }  
    15.     }  
    16.     if($_POST[‘register’]){  
    17.         $username = $_POST[‘username’];  
    18.         $emailid = $_POST[’emailid’];  
    19.         $password = $_POST[‘password’];  
    20.         $confirmPassword = $_POST[‘confirm_password’];  
    21.         if($password == $confirmPassword){  
    22.             $email = $funObj->isUserExist($emailid);  
    23.             if(!$email){  
    24.                 $register = $funObj->UserRegister($username$emailid$password);  
    25.                 if($register){  
    26.                      echo ““;  
    27.                 }else{  
    28.                     echo ““;  
    29.                 }  
    30.             } else {  
    31.                 echo ““;  
    32.             }  
    33.         } else {  
    34.             echo ““;  
    35.           
    36.         }  
    37.     }  
    38. ?>  
    39.   
    40.  “en” class=“no-js”>  
    41.    
    42.         “UTF-8” />  
    43.         Login <span class="keyword">and</span><span> Registration Form with HTML5 </span><span class="keyword">and</span><span> CSS3  
    44.         “viewport” content=“width=device-width, initial-scale=1.0”>   
    45.         “description” content=“Login and Registration Form with HTML5 and CSS3” />  
    46.         “keywords” content=“html5, css3, form, switch, animation, :target, pseudo-class” />  
    47.         “author” content=“Codrops” />  
    48.         “shortcut icon” href=“../favicon.ico”>   
    49.         “stylesheet” type=“text/css” href=“css/demo.css” />  
    50.         “stylesheet” type=“text/css” href=“css/style2.css” />  
    51.         “stylesheet” type=“text/css” href=“css/animate-custom.css” />  
    52.       
    53.       
    54.         class=“container”>  
    55.               
    56.               
    57.             
        
    58.                 

      Login and Registration Form  

        

    59.             

        

    60.             
                     
    61.                 “container_demo” >  
    62.                      
    63.                     class=“hiddenanchor” id=“toregister”>  
    64.                     class=“hiddenanchor” id=“tologin”>  
    65.                     “wrapper”>  
    66.                         “login” class=“animate form”>  
    67.                            “login” method=“post” action=“”>  
    68.                                 

      Log in

         

    69.                                 

         

    70.                                     for=“emailsignup” class=“youmail” data-icon=“e” > Your email  
    71.                                     “emailsignup” name=“emailid” required=“required” type=“email” placeholder=“mysupermail@mail.com”/>   
    72.                                 

        

    73.                                 

         

    74.                                     for=“password” class=“youpasswd” data-icon=“p”> Your password   
    75.                                     “password” name=“password” required=“required” type=“password” placeholder=“eg. X8df!90EO” />   
    76.                                 

        

    77.                                 class=“keeplogin”>   
    78.                                     “checkbox” name=“loginkeeping” id=“loginkeeping” value=“loginkeeping” />   
    79.                                     for=“loginkeeping”>Keep me logged in  
    80.                                 

        

    81.                                 class=“login button”>   
    82.                                     “submit” name=“login” value=“Login” />   
    83.                                 

        

    84.                                 class=“change_link”>  
    85.                                     Not a member yet ?  
    86.                                     “#toregister” class=“to_register”>Join us  
    87.                                 

        

    88.                             

        

    89.                         

      

  •   
  •                         “register” class=“animate form”>  
  •                             “login” method=“post” action=“”>  
  •                                 

     Sign up 

       

  •                                 

       

  •                                     for=“usernamesignup” class=“uname” data-icon=“u”>Your username  
  •                                     “usernamesignup” name=“username” required=“required” type=“text” placeholder=“mysuperusername690” />  
  •                                 

      

  •                                 

       

  •                                     for=“emailsignup” class=“youmail” data-icon=“e” > Your email  
  •                                     “emailsignup” name=“emailid” required=“required” type=“email” placeholder=“mysupermail@mail.com”/>   
  •                                 

      

  •                                 

       

  •                                     for=“passwordsignup” class=“youpasswd” data-icon=“p”>Your password   
  •                                     “passwordsignup” name=“password” required=“required” type=“password” placeholder=“eg. X8df!90EO”/>  
  •                                 

      

  •                                 

       

  •                                     for=“passwordsignup_confirm” class=“youpasswd” data-icon=“p”>Please confirm your password   
  •                                     “passwordsignup_confirm” name=“confirm_password” required=“required” type=“password” placeholder=“eg. X8df!90EO”/>  
  •                                 

      

  •                                 class=“signin button”>   
  •                                     “submit” name=“register” value=“Sign up”/>   
  •                                 

      

  •                                 class=“change_link”>    
  •                                     Already a member ?  
  •                                     “#tologin” class=“to_register”> Go and log in   
  •                                 

      

  •                             

      

  •                         
  •   

  •                           
  •                     
  •   

  •                 
  •     

  •             

      

  •         
  •   

  •        
  •   
  • Step 8

    Create a Home Page named home.php as in the following:

    1.     include_once(‘dbFunction.php’);  
    2.     if($_POST[‘welcome’]){  
    3.           
    4.         session_unset();   
    5.   
    6.           
    7.         session_destroy();  
    8.     }  
    9.     if(!($_SESSION)){  
    10.         header(“Location:index.php”);  
    11.     }  
    12. ?>  
    13.   
    14.  “en” class=“no-js”>  
    15.    
    16.         “UTF-8” />  
    17.         Login <span class="keyword">and</span><span> Registration Form with HTML5 </span><span class="keyword">and</span><span> CSS3  
    18.         “viewport” content=“width=device-width, initial-scale=1.0”>   
    19.         “description” content=“Login and Registration Form with HTML5 and CSS3” />  
    20.         “keywords” content=“html5, css3, form, switch, animation, :target, pseudo-class” />  
    21.         “author” content=“Codrops” />  
    22.         “shortcut icon” href=“../favicon.ico”>   
    23.         “stylesheet” type=“text/css” href=“css/demo.css” />  
    24.         “stylesheet” type=“text/css” href=“css/style2.css” />  
    25.         “stylesheet” type=“text/css” href=“css/animate-custom.css” />  
    26.       
    27.       
    28.         class=“container”>  
    29.               
    30.               
    31.             
        
    32.                 

      Welcome Form  

        

    33.             

        

    34.             
                     
    35.                 “container_demo” >  
    36.                      
    37.                     class=“hiddenanchor” id=“toregister”>  
    38.                     class=“hiddenanchor” id=“tologin”>  
    39.                     “wrapper”>  
    40.                         “login” class=“animate form”>  
    41.                            “login” method=“post” action=“”>  
    42.                                 

      Welcome 

         

    43.                                 

         

    44.                                     for=“emailid” class=“uname”   > Your Name   
    45.                                    $_SESSION[‘username’]?>  
    46.                   
    47.                                 

        

    48.                                 

         

    49.                                     for=“email” class=“youpasswd”  > Your Email   
    50.                                     $_SESSION[’email’]?>  
    51.                                 

        

    52.                                    
    53.                                 class=“login button”>   
    54.                                     “submit” name=“welcome” value=“Logout” />   
    55.                                 

        

    56.                                    
    57.                             

        

    58.                         

      

  •   
  •                           
  •                     

      

  •                 

        

  •             

      

  •         

      

  •        
  •   
  • 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

     

    Article Prepared by Ollala Corp

    You might also like More from author

    Leave A Reply

    Your email address will not be published.