Setelah saya membahas bagaimana cara membuat HALO DUNIA! dengan PHP beberapa waktu yang lalu, sekarang saya akan membahas cara membuat halaman atau form Login, Register dan Logout dengan PHP dan HTML.

Langkah pertama buka phpMyAdmin, pastikan Anda sudah menjalankan Server MySQL. Ketik localhost/phpmyadmin pada address bar, buat database baru dengan nama latihan, kemudian tambahkan tabel dengan nama tb_users.

CREATE TABLE `tb_users` (
  `uid` INT(11) NOT NULL,
  `name` VARCHAR(64) NOT NULL,
  `uname` VARCHAR(16) NOT NULL,
  `pass` VARCHAR(32) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
ALTER TABLE `tb_users`
  ADD PRIMARY KEY (`uid`);

Untuk cara pembuatan database MySQL silahkan buka Cara Mudah Membuat Database Dan Tabel Pada MySQL Menggunakan PhpMyAdmin.

Langkah kedua buatlah folder baru di htdocs seperti biasa, xampp\htdocs\(nama folder), di sini saya menggunakan nama latihan. Kemudian buat file-file berikut ini di dalam folder tersebut:

 

1. db.php

File ini berfungsi sebagai koneksi ke database.

<?php
 
$con = mysqli_connect('localhost','root','') or die("Error : Koneksi ke database tidak ditemukan!");
mysqli_select_db($con, 'latihan');
 
?>

 

2. index.php

File ini menampilkan form Login, Register dan Logout.

  1. <?php
  2.  
  3.  
  4. require_once('db.php');
  5.  
  6. ?>
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <title>Login, Register dan Logout</title>
  11. <style>
  12. body{
  13. margin-top:50px;
  14. font-family:Tahoma, Geneva, sans-serif;
  15. }
  16. .box{
  17. padding: 10px;
  18. background-color: rgb(255,102,0);
  19. color: rgb(255,255,255);
  20. }
  21. .box a{
  22. color:rgb(255,255,255);
  23. }
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <main>
  29. <?php
  30.  
  31. if(!isset($_SESSION['uid'])){
  32.  
  33. if(isset($_GET['req']))
  34. {
  35. $req = $_GET['req'];
  36. if($req=='daftar'){
  37.  
  38. ?>
  39. <div>
  40. <form action="daftar.php" method="post">
  41. <table class="box" align="center" cellpadding="3">
  42. <tr>
  43. <td colspan="2" align="center"><h3>Daftar</h3></td>
  44. </tr>
  45. <tr>
  46. <td>Nama Lengkap</td>
  47. <td><input type="text" name="name" id="name" required></td>
  48. </tr>
  49. <tr>
  50. <td>Nama Pengguna</td>
  51. <td><input type="text" name="username" id="username" required></td>
  52. </tr>
  53. <tr>
  54. <td>Kata Sandi</td>
  55. <td><input type="password" name="password" id="password" required></td>
  56. </tr>
  57. <tr>
  58. <td>Konfirmasi Kata Sandi</td>
  59. <td><input type="password" name="re-password" id="re-password" required></td>
  60. </tr>
  61. <tr>
  62. <td>&amp;nbsp;</td>
  63. <td><input type="submit" name="register" id="register" value="Daftar">
  64. <a href="index.php">Masuk</a></td>
  65. </tr>
  66. </table>
  67. </form>
  68. </div>
  69. <?php
  70. }
  71. }else{
  72. ?>
  73. <div>
  74. <form action="masuk.php" method="post">
  75. <table class="box" align="center" cellpadding="3">
  76. <tr>
  77. <td colspan="2" align="center"><h3>Masuk</h3></td>
  78. </tr>
  79. <tr>
  80. <td>Nama Pengguna</td>
  81. <td><input type="text" name="username" id="username" required></td>
  82. </tr>
  83. <tr>
  84. <td>Kata Sandi</td>
  85. <td><input type="password" name="password" id="password" required></td>
  86. </tr>
  87. <tr>
  88. <td>&amp;nbsp;</td>
  89. <td><input type="submit" name="login" id="login" value="Masuk">
  90. <a href="?req=daftar">Daftar</a></td>
  91. </tr>
  92. </table>
  93. </form>
  94. </div>
  95. <?php
  96. }
  97. }else{
  98. ?>
  99. <section>
  100. <?php
  101. $string = "SELECT * FROM tb_users WHERE uname='".$_SESSION['uid']."'";
  102. $query = mysqli_query($con, $string);
  103. $user = mysqli_num_rows($query);
  104.  
  105. if($user>0){
  106. $row = mysqli_fetch_array($query);
  107. }
  108. ?>
  109. <div align="center">
  110. <h2><img src="images/welcome.png" width="182" height="320"></h2>
  111. <h2>Selamat datang <br>
  112. <?php echo $row['name']; ?>!</h2>
  113. <p>Anda masuk sebagai <?php echo $_SESSION['uid']; ?>. <a href="keluar.php">Keluar</a></p>
  114. </div>
  115. </section>
  116. <?php
  117. }
  118. ?>
  119. </main>
  120. </body>
  121. </html>

 

3. daftar.php

File ini berfungsi untuk melayani permintaan Register.

  1. <?php
  2.  
  3. require_once('db.php');
  4.  
  5. if(isset($_POST['register'])){
  6.  
  7. $name = mysqli_real_escape_string($con, $_POST['name']);
  8. $uname = mysqli_real_escape_string($con, $_POST['username']);
  9. $pass = mysqli_real_escape_string($con, $_POST['password']);
  10. $repass = mysqli_real_escape_string($con, $_POST['re-password']);
  11.  
  12. if($name==''){
  13. echo '<p align="center">Nama Lengkap harus diisi. <a href="index.php?req=daftar">Ulangi</a></p>';
  14. exit(0);
  15. }
  16.  
  17. if($uname==''){
  18. echo '<p align="center">Nama Pengguana harus diisi. <a href="index.php?req=daftar">Ulangi</a></p>';
  19. exit(0);
  20. }
  21.  
  22. if($pass==''){
  23. echo '<p align="center">Masukan Kata Sandi. <a href="index.php?req=daftar">Ulangi</a></p>';
  24. exit(0);
  25. }
  26.  
  27. if($pass != $repass){
  28. echo '<p align="center">Konfirmasi Kata Sandi salah. <a href="index.php?req=daftar">Ulangi</a></p>';
  29. exit(0);
  30. }
  31.  
  32. $string = "SELECT * FROM tb_users WHERE uname='$uname'";
  33. $query = mysqli_query($con, $string);
  34. $cek = mysqli_num_rows($query);
  35.  
  36. if($cek>0){
  37. echo '<p align="center">Nama Pengguna sudah dipakai. <a href="index.php?req=daftar">Ulangi</a></p>';
  38. }else{
  39. $string = "INSERT INTO tb_users (name, uname, pass) VALUES ('$name', '$uname', md5('$pass'))";
  40. $query = mysqli_query($con, $string);
  41. if($query)
  42. {
  43. echo '<p align="center">Pendaftaran berhasil!<br>Silahkan <a href="index.php">masuk</a></p>';
  44. }else{
  45. echo '<p align="center">Pendaftaran gagal!</p>';
  46. }
  47. }
  48. }
  49. ?>

 

4. masuk.php

File ini berfungsi untuk melayani permintaan Login.

  1. <?php
  2.  
  3. require_once('db.php');
  4.  
  5. if(isset($_POST['login'])){
  6.  
  7. $uname = mysqli_real_escape_string($con, $_POST['username']);
  8. $pass = mysqli_real_escape_string($con, $_POST['password']);
  9.  
  10. $string = "SELECT * FROM tb_users WHERE uname='$uname' AND pass=md5('$pass')";
  11. $query = mysqli_query($con, $string);
  12. $login = mysqli_num_rows($query);
  13.  
  14. if($uname==''){
  15. echo '<p align="center">Nama Pengguana harus diisi. <a href="index.php">Ulangi</a></p>';
  16. exit(0);
  17. }else
  18.  
  19. if($pass==''){
  20. echo '<p align="center">Masukan Kata Sandi. <a href="index.php">Ulangi</a></p>';
  21. exit(0);
  22. }
  23.  
  24. if($login>0){
  25. $row = mysqli_fetch_array($query);
  26. $_SESSION['uid'] = $row['uname'];
  27. header ('location:index.php');
  28. }else{
  29. echo '<p align="center">Nama Pengguna atau Kata Sandi salah. <a href="index.php">Ulangi</a></p>';
  30. }
  31. }
  32. ?>

 

5. keluar.php

File ini berfungsi untuk melayani permintaan Logout.

  1. <?php
  2.  
  3.  
  4. require_once('db.php');
  5.  
  6. $uname = $_SESSION['uid'];
  7.  
  8. $string = "SELECT * FROM tb_users WHERE uname='$uname'";
  9. $query = mysqli_query($con, $string);
  10. $login = mysqli_num_rows($query);
  11.  
  12. if($login>0){
  13. $row = mysqli_fetch_array($query);
  14. $_SESSION['uid'] = '';
  15. header ('location:index.php');
  16. }else{
  17. echo "Terjadi kesalahan!";
  18. }
  19. ?>

 

Setelah semua langkah di atas selesai, sekarang lakukan uji coba dengan cara mengakses localhost/(nama folder) misal localhost/latihan.

Halaman Register

 

Halaman Login

 

Halaman setelah Login dan terdapat menu untuk Logout

Demikian cara membuat halaman atau form Login, Register dan Logout dengan PHP dan HTML, semoga bermanfaat, terimakasih.


Angin Kamajaya

Dzivenx (Irfan FN)

Dream Up