当前位置:   article > 正文

Php登录界面_php做登录界面

php做登录界面

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Login</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div class="login">
  10. <h1>Login</h1>
  11. <br>
  12. <form action="authenticate.php" method="post" class="form1">
  13. <div class="input-wrapper">
  14. <div class="border-wrapper">
  15. <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
  16. </div>
  17. <div class="border-wrapper">
  18. <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
  19. </div>
  20. </div>
  21. <div class="action">
  22. <div class="btn">
  23. <button type="submit" class="submit1">login</button>
  24. </div>
  25. </div>
  26. </form>
  27. </div>
  28. </body>
  29. </html>

style.css

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html {
  6. height: 100%;
  7. }
  8. body {
  9. height: 100%;
  10. font-family: JetBrains Mono Medium;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. /* background-color: #0e92b3; */
  15. background: url('background.png') no-repeat;
  16. background-size: 100% 100%;
  17. }
  18. .login {
  19. width: 300px;
  20. background-color: rgba(41, 45, 62, .8);
  21. color: #fff;
  22. border-radius: 2px;
  23. padding: 50px;
  24. }
  25. h1 {
  26. text-align: center;
  27. font-size: 30px;
  28. text-transform: capitalize;
  29. }
  30. .login .input-wrapper input {
  31. background-color: rgb(41, 45, 62);
  32. border: 0;
  33. width: 100%;
  34. text-align: center;
  35. font-size: 10px;
  36. color: #fff;
  37. outline: none;
  38. }
  39. .login .input-wrapper input::placeholder {
  40. text-transform: capitalize;
  41. }
  42. .login .input-wrapper .border-wrapper {
  43. background-image: linear-gradient(to right, #e8198b, #0eb4dd);
  44. width: 100%;
  45. height: 50px;
  46. margin-bottom: 20px;
  47. border-radius: 30px;
  48. display: flex;
  49. align-items: center;
  50. justify-content: center;
  51. }
  52. .login .input-wrapper .border-wrapper .border-item {
  53. height: calc(100% - 4px);
  54. width: calc(100% - 4px);
  55. border-radius: 30px;
  56. }
  57. button {
  58. width: 100%;
  59. text-transform: capitalize;
  60. border: 2px solid #0e92b3;
  61. text-align: center;
  62. line-height: 50px;
  63. border-radius: 30px;
  64. cursor: pointer;
  65. background-color: rgb(41, 45, 62);
  66. color: #fff;
  67. font-size: 20px;
  68. }

authenticate.php

  1. <?php
  2. session_start();
  3. $DATABASE_HOST = 'localhost';
  4. $DATABASE_USER = 'root';
  5. $DATABASE_PASS = '';
  6. $DATABASE_NAME = 'phplogin';
  7. $con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
  8. if (!$con) {
  9. die("connection is failed this database due to" . mysqli_connect_error());
  10. }
  11. else{
  12. printf('Connected successfully.<br/>');
  13. }
  14. // Now we check if the data from the login form was submitted, isset() will check if the data exists.
  15. if ( !isset($_POST['username'], $_POST['password']) ) {
  16. // Could not get the data that should have been sent.
  17. exit('Please fill both the username and password fields!');
  18. }
  19. // Prepare our SQL, preparing the SQL statement will prevent SQL injection.
  20. if ($stmt = $con->prepare('SELECT id,password FROM accounts WHERE username = ?')) {
  21. // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
  22. $stmt->bind_param('s', $_POST['username']);
  23. $stmt->execute();
  24. // Store the result so we can check if the account exists in the database.
  25. $stmt->store_result();
  26. if ($stmt->num_rows > 0) {
  27. $stmt->bind_result($id, $password);
  28. $stmt->fetch();
  29. // Account exists, now we verify the password.
  30. // Note: remember to use password_hash in your registration file to store the hashed passwords.
  31. if($_POST['password'] === $password) {
  32. // Verification success! User has logged-in!
  33. // Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
  34. session_regenerate_id();
  35. $_SESSION['loggedin'] = TRUE;
  36. $_SESSION['name'] = $_POST['username'];
  37. $_SESSION['id'] = $id;
  38. header('Location: home.php');
  39. } else {
  40. // Incorrect password
  41. echo 'Incorrect username and/or password!';
  42. }
  43. } else {
  44. // Incorrect username
  45. echo 'Incorrect username and/or password!';
  46. }
  47. $stmt->close();
  48. }
  49. ?>

home.php

  1. <?php
  2. session_start();
  3. // We need to use sessions, so you should always start sessions using the below code.
  4. $DATABASE_HOST = 'localhost';
  5. $DATABASE_USER = 'root';
  6. $DATABASE_PASS = '';
  7. $DATABASE_NAME = 'phplogin';
  8. $con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
  9. // If the user is not logged in redirect to the login page...
  10. if (!isset($_SESSION['loggedin'])) {
  11. header('Location: index.html');
  12. exit;
  13. }
  14. ?>
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18. <meta charset="utf-8">
  19. <title>Home Page</title>
  20. </head>
  21. <body class="loggedin">
  22. <nav class="navtop">
  23. <div>
  24. <h1>Website Title</h1>
  25. <a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
  26. <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
  27. </div>
  28. </nav>
  29. <div class="content">
  30. <h2>Home Page</h2>
  31. <p>Welcome back, <?=$_SESSION['name']?>!</p>
  32. </div>
  33. </body>
  34. </html>

profile.php

  1. <?php
  2. session_start();
  3. // We need to use sessions, so you should always start sessions using the below code.
  4. $DATABASE_HOST = 'localhost';
  5. $DATABASE_USER = 'root';
  6. $DATABASE_PASS = '';
  7. $DATABASE_NAME = 'phplogin';
  8. $con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
  9. // If the user is not logged in redirect to the login page...
  10. if (!isset($_SESSION['loggedin'])) {
  11. header('Location: index.html');
  12. exit;
  13. }
  14. $DATABASE_HOST = 'localhost';
  15. $DATABASE_USER = 'root';
  16. $DATABASE_PASS = '';
  17. $DATABASE_NAME = 'phplogin';
  18. $con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
  19. if (mysqli_connect_errno()) {
  20. exit('Failed to connect to MySQL: ' . mysqli_connect_error());
  21. }
  22. // We don't have the password or email info stored in sessions so instead we can get the results from the database.
  23. $stmt = $con->prepare('SELECT password, email FROM accounts WHERE id = ?');
  24. // In this case we can use the account ID to get the account info.
  25. $stmt->bind_param('i', $_SESSION['id']);
  26. $stmt->execute();
  27. $stmt->bind_result($password, $email);
  28. $stmt->fetch();
  29. $stmt->close();
  30. ?>
  31. <!DOCTYPE html>
  32. <html>
  33. <head>
  34. <meta charset="utf-8">
  35. <title>Profile Page</title>
  36. <link href="style.css" rel="stylesheet" type="text/css">
  37. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
  38. </head>
  39. <body class="loggedin">
  40. <nav class="navtop">
  41. <div>
  42. <h1>Website Title</h1>
  43. <a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
  44. <a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
  45. </div>
  46. </nav>
  47. <div class="content">
  48. <h2>Profile Page</h2>
  49. <div>
  50. <p>Your account details are below:</p>
  51. <table>
  52. <tr>
  53. <td>Username:</td>
  54. <td><?=$_SESSION['name']?></td>
  55. </tr>
  56. <tr>
  57. <td>Password:</td>
  58. <td><?=$password?></td>
  59. </tr>
  60. <tr>
  61. <td>Email:</td>
  62. <td><?=$email?></td>
  63. </tr>
  64. </table>
  65. </div>
  66. </div>
  67. </body>
  68. </html>

logout.php

  1. <?php
  2. session_start();
  3. $DATABASE_HOST = 'localhost';
  4. $DATABASE_USER = 'root';
  5. $DATABASE_PASS = '';
  6. $DATABASE_NAME = 'phplogin';
  7. $con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
  8. session_destroy();
  9. // Redirect to the login page:
  10. header('Location: index.html');
  11. ?>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/751453
推荐阅读
相关标签
  

闽ICP备14008679号