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" >
  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>
  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>
  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 {
  6. function __construct() {
  8. // connecting to database
  9. $db = new dbConnect();;
  11. }
  12. // destructor
  13. function __destruct() {
  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;
  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);
  28. if ($no_rows == 1)
  29. {
  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');
  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>";
  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" >
  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>
  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>
  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();
  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" >
  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']?>
  46. </p>
  47. <p>
  48. <label for="email" class="youpasswd" > Your Email </label>
  49. <?=$_SESSION['email']?>
  50. </p>
  52. <p class="login button">
  53. <input type="submit" name="welcome" value="Logout" />
  54. </p>
  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