Menu
» »Unlabelled » Cara Membuat Form Login

A+ A-

Halaman login merupakan pintu masuk kedalam sebuah sistem. Fungsi utama dari halaman login adalah untuk melindungi sistem anda. Disini saya akan menerangkan proses pembuatan form login, pertama kita harus buat terlebih dahulu databasenya.

Create Database login :
CREATE TABLE `user` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'admin', '12345');

Dumping kode SQL  diatas atau meng-Import file database.sql yang sudah disertakan pada file download.
Kemudian buat file baru beri nama config.php dimana kodenya seperti dibawah ini :
  1. <?php
  2. $host = "localhost";
  3. $user = "root";
  4. $pass = "root";
  5. $db_name = "login";
  6.  
  7. mysql_connect($host, $user, $pass) or die (mysql_error());
  8. mysql_select_db($db_name) or die (mysql_error());
  9. ?>
kode di atas ini merupakan koneksi ke database.
Sekarang buat file yang pertama yaitu index.php. dan berikut ini isi kodenya :
  1. <html>
  2. <head><title>Cara Membuat Form Login</title></head>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. <body>
  5. <div id="head"></div>
  6.     <div id="header">
  7.     <h2>Cara Membuat Form Login</h2>
  8.     Oleh Onehied
  9.         <div id="menu">
  10.         <a href="index.php" class="active">Home</a>
  11.         <a href="login.php">Login</a>
  12.         </div>
  13.         <div id="content">
  14.         <p>Cara Membuat Form Login oleh <a href="http://www.darionehied.com/" target="_blank"><strong>darionehied.com</strong></a>
  15.            Anda bisa mempublikasikan ulang, atau merubah Source Code ini.
  16.            </p>
  17.         </div>
  18.     </div>
  19. </body>
  20. </html>
Selanjutnya buat file baru dengan nama login.php, dan kodenya seperti di bawah ini :
  1. <html>
  2. <head><title>Cara Membuat Form Login</title>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. </head>
  5. <body>
  6. <div id="head">
  7.         <div id="header">
  8.             <h2>Cara Membuat Form Login</h2>
  9.             <span>Oleh Onehied</span>
  10.              <div id="menu">
  11.             <a href="index.php">Home</a>
  12.             <a href="login.php" class="active">Login</a>
  13.         </div><b>Sign in</b>   
  14.       <div id="content">
  15.          <form action="ceklogin.php" method="post">
  16.           <div id="acc1"><input type='text' name='username' size="30" placeholder='Username'></div>
  17.         <div id="acc2"><input type='password' name='password' size="30" placeholder='Password'></div>
  18.         <div id="acc3"><input type="submit" value="Sign in"></div><br><br>
  19.         <div id="acc4"><a href="http://www.darionehied.com/">darionehied.com</a></div>
  20.         </form>   
  21.     </div>  
  22. </div>
  23. </body>
  24. </html>
File ini membuat Form untuk Login. 
Dan sekarang buat file dengan nama ceklogin.php, kodenya seperti di bawah ini :
  1. <?php
  2. session_start();
  3. include 'config.php';
  4. if (!empty($_SESSION['username'])) {
  5.     header('location:login.php');
  6. }
  7.  
  8. if(!empty($_POST)){
  9.     
  10.     $username = $_POST['username'];
  11.     $password =($_POST['password']);
  12.  
  13.     $sql = "select * from user where username='".$username."' and password='".$password."'";
  14.     #echo $sql."<br />";
  15.     $query = mysql_query($sql) or die (mysql_error());
  16.  
  17.     // pengecekan query valid atau tidak
  18.     if($query){
  19.         $row = mysql_num_rows($query);
  20.        
  21.         // jika $row > 0 atau username dan password ditemukan
  22.         if($row > 0){
  23.             $_SESSION['isLoggedIn']=1;
  24.             $_SESSION['username']=$username;
  25.             header('Location: dashboard.php');
  26.         }else{
  27.             ?><script>alert('Username atau password salah');</script><?
  28.         }
  29.     }
  30. }
  31. include'login.php';
  32. ?>
Buat file dengan nama dashboard.php, kodenya seperti ini : 
  1. <?php
  2. include 'config.php';
  3. session_start();
  4. $username = $_SESSION['username'];
  5. $isLoggedIn = $_SESSION['isLoggedIn'];
  6.  
  7. if($isLoggedIn != '1'){
  8.     session_destroy();
  9.     header('Location: login.php');
  10. }
  11. ?>
  12. <html>
  13. <head>
  14.     <title>Cara Membuat Form Login</title>
  15.     <link rel="stylesheet" type="text/css" href="style.css">
  16. </head>
  17. <body>
  18.     <div id="container">
  19.         <div id="header">
  20.             <h2>Cara Membuat Form Login</h2>
  21.             <span>Oleh Onehied</span>
  22.                  <div id="menu">
  23.                     <a href="index.php">Home</a>
  24.                     <a href="login.php">Login</a>
  25.                     <a href="dashboard.php" class="active">Dasboard</a>
  26.                     <a href="logout.php">Logout</a>
  27.                  </div>
  28.                  <div id="content">
  29.             <p>Selamat <?php echo $username; ;?> berhasil login.</p>
  30.             <p>Silakan isi terserah anda.</p><br><br>
  31.             <div id="acc4"><a href="http://www.darionehied.com/">darionehied.com</a></div>
  32.         </div>
  33.         </div>
  34.     </div>
  35. </body>
  36. </html>
Dan terakhir buat file dengan style.css, kodenya seperti di bawah ini : 
1.        body {
2.                  background-color:none;
3.                   }
4.        #header {
5.                  width:550px;
6.                  margin:20px auto;
7.                  padding:10px;
8.                  text-align:center;
9.                  background-color:#fff;
10.              box-shadow:0px 0px 3px #000;
11.              }
12.    h1, h2, h3 {
13.              margin:0;
14.              padding:0;
15.    }
16.    #menu {
17.              text-align:center;
18.              margin:15px 0px;
19.              border-top:1px solid #0099FF;
20.              border-bottom:1px solid #0099FF;
21.                }
22.              #menu a {
23.                          display:inline-block;
24.                          padding:5px 10px;
25.                          text-decoration:none;
26.                          color:#000;
27.                          font-weight:bold;
28.              }
29.                          #menu a:hover {
30.                                      background-color:#0099FF;
31.                          }
32.                         
33.                          #menu a.active {
34.                                      background-color:#0099FF;
35.                          }
36.                         
37.    .table, td {
38.              border:1px solid #0099FF}
39.     
40.    #acc1 {
41.              margin:10px 0px 0px 0px;
42.              }
43.    input[type=text] {
44.              color:#ffff;
45.        height: 20px;
46.              }                     
47.    #acc2 {
48.              margin:10px 0px 0px 0px;
49.              }
50.    input[type=password] {
51.              color:#ffff;
52.        height: 20px;
53.              }                     
54.    #acc4 {
55.              text-align:right;
56.              }
57.    input[type=submit] {
58.              color:#ffff;
59.              width:80px;
60.        height: 25px;
61.              background:#3399FF;
62.              margin:10px 0px 0px 0px;
63.              border-radius:18px 18px 18px 18px;
64.              text-decoration:none;
65.               }
66.               a, a:link, a:visited { color:#0099FF; font-weight: normal; text-decoration: none;}
67.              #menu1 a:hover }       
Kode style.css untuk mempercantik tampilan.
Sudah selesai proses pembuatan form login  tinggal kita run. untuk source codenya download di bawah ini.

Download Source Code :

Download 
Password :
darionehied
Posted by

Share to:

at 10:40 AM
Next
Posting Lebih Baru
Previous
This is the last post.

Posting Komentar

Langganan: Posting Komentar (Atom)
 
Top