Membuat Login Dengan PHP dan MySQL MD5

-



Hai, Sahabat IT kembali di blog Master IT yang pastinya bakal kasih ilmu pengetahuan seputar dunia IT. Di postingan sebelumnya, kita membahas mengenai IT Networking yang pasti semua Sahabat IT sudah pada bisa kan. Oke, di artikel ini, kita akan membahas mengenai Web Design & Development. Dimana, kita akan membuat yang Namanya form login menggunaka PHP & MySQL MD5.
Sudah pada tahu nggak apa itu MD5??? Ya sudah biar saya jelaskan mengenai MD5. Dalam kriptografi , MD5 (Message-Digest algorithm 5) banyak digunakan adalah fungsi hash kriptografi dengan 128 – bit nilai hash. Ditentukan dalam RFC 1321 , MD5 telah digunakan dalam berbagai jenis aplikasi keamanan, dan juga sering digunakan untuk memeriksa integritas file . Namun, telah terbukti bahwa MD5 tidak tabrakan tahan ; seperti itu, MD5 tidak cocok untuk aplikasi seperti SSL sertifikat atau signature digital yang bergantung pada properti ini. Sebuah hash MD5 biasanya dinyatakan sebagai 32-digit heksadesimal nomor.
            MD5 adalah salah satu dari serangkaian pesan mencerna algoritma didesain oleh Profesor Ronald Rivest dari MIT (Rivest, 1994). Ketika pekerjaan analitik menunjukkan bahwa pendahulu MD5′s MD4 itu mungkin tidak aman, MD5 dirancang pada tahun 1991 untuk menjadi pengganti aman. (Kelemahan memang kemudian ditemukan di MD4 oleh Hans Dobbertin .)
            Keamanan fungsi hash MD5 sangat dikompromikan. Sebuah serangan tabrakan ada yang bisa menemukan tabrakan dalam beberapa detik pada komputer biasa (kompleksitas dari 2 24,1). [14] Lebih jauh, ada juga serangan-awalan tabrakan dipilih yang dapat menghasilkan tabrakan dua dipilih berbeda masukan sewenang-wenang, dalam jam komputer reguler tunggal (kompleksitas 2 39).
Sekarang sudah tahukan apa itu MD5. Selanjutnya, langsung saja kita mulai membuat form login. Dibawah ini adalah struktur file yang akan kita buat:
Struktur file form login

            Berikutnya kita akan buat file-file tersebut satu-persatu.
1.    Index.php
File pertama yang kita buat adalah bagian index atau tampilan awal form login. Dimana nantinya user akan memasukkan username dan passwordnya disini.
<!DOCTYPE html>
<html>
<head>
      <title>Form Login Dengan PHP dan MySQL MD5</title>
      <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
              </br>
              </br>
              <center><img src="img/logo.png"></center>
              <center><p>All About IT In Here</p></center>
              </br>
              <div class="login">
              </br>
                      <form action="login.php" method="post" onsubmit="return validasi()">
              <div>
                      <label>Username</label>
                      <input type="text" name="username" id="username">
              </div>
              <div>
                      <label>Password</label>
                      <input type="password" name="password" id="password">
              </div> 
              <div>
                      <input type="submit" class="tombol" value="Login">
              </div>                
                      </form>
              </div>
</body>
<script type="text/javascript">
      function validasi() {
              var username = document.getElementById("username").value;
              var password = document.getElementById("password").value;
              if (username !="" && password !="") {
                      return true;
              }else{
                      alert('Username dan Password harus diisi!!!');
                      return false;
              }
      }
</script>
</html>

2.    Style.css
Selanjutnya kita buat file css untuk mempercantik tampilan dari form login.
body {
background:url(img/intro-bg.jpg);
color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'roboto', sans-serif;
} 
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
box-shadow:0 0 10px 0 rgba(0,0,0,.1);
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="password"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
img{
      width: 300px;
}

.tombol {
background-color: black;
  border: none;
  color: white;
  width: 100%;
  padding: 8px 8px;
  text-align: center;
  font-size: 12px;
  margin: 20px 0px;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
.tombol:hover{
      background: black;
      opacity: 0.6;
      transition: all ease 0.5s;
}
h2 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
p {
    color: black;
    font-size: 20px;
    text-shadow: 2px 2px 4px #ffffff;
}

3.    Login.php
Kemudian yang paling penting kita buat file login yang kita gunakan untuk masuk ke halaman admin.
<?php
      include 'config.php';

      $username = $_POST['username'];
      $password = md5($_POST['password']);

      $login = mysql_query("select * from user where username='$username' and password='$password'");
      $cek = mysql_num_rows($login);

      if ($cek > 0) {
              session_start();
              $_SESSION['username'] = $username;
              $_SESSION['status'] = "login";
              header("location:admin/index.php");
      }else{
              header("location:index.php");
      }
?>

4.    Config.php
Setelah itu, kita buat koneksi ke database masterit_login, Namanya terserah yang kalian inginkan.
<?php
      mysql_connect('localhost','root','');
      mysql_select_db('masterit_login');
?>

5.    Admin/index.php
Dibagian halaman admin kita buat juga index.
<!DOCTYPE html>
<html>
<head>
      <title>Form Login Dengan PHP dan MySQL MD5</title>
      <link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
</br>
              </br>
              <center><img src="../img/logo.png"></center>
              <center><p>All About IT In Here</p></center>
              </br>
</body>
</html>
<?php
      include '../config.php';


      //mengaktifkan session
      session_start();

      //cek apakah user telah login, jika belum login maka di alihkan ke halaman login
      if ($_SESSION['status'] != "login") {
              header("location:../index.php");
      }
      echo "Hai, Selamat datang ".$_SESSION['username'];
?>
<br/>
<br/>

<a href="logout.php">Logout</a>


6.    Admin/logout.php
Terakhir, kita buat file logout untuk keluar dari halaman admin.
<?php
      session_start();
      session_destroy();
      header("location:../index.php");
?>



Menyiapkan Database
Setelah semua file tadi dibuat, selanjutnya kita buat database dengan nama “masterit_login”.
Databases form login

Kemudian buat table dengan nama “user”
Kolom tabel user form login

Buatlah 4 kolom yaitu: id, nama, username dan password. Jangan lupa untuk mencentang Auto Increment (A.I) pada id.
Data user

            Enkripsi password dengan masuk ke menu insert lalu isikan setiap value
            Id                     : 1
            Nama              : Asidik Al Jafar
            Username      : Master IT
            Password       : 12345 (pada function pilih MD5)
           
            Berikut ini adalah hasil dari codingan kita tadi.
Form login PHP & MySQL MD5

Dan jika berhasil, tampilan kurang lebih seperti gambar berikut.
Tampilan jika berhasil login

Gimana??Udah bias kan?? Pastinya dong. Oke, cukup sekian tutorial pada kali ini, sampai jumpa di artikel selanjutnya. Dan jangan lupa buat terus kunjungin website Master IT dan juga channel Youtube “ Master IT” di like, comment juga subscribe ya Sahabat IT. Bye..bye..:)


Comments

Post a Comment

Popular posts from this blog

Konfigurasi Static Routing Di Cisco Packet Tracer 7.2

-
Image
        Konfigurasi Static Routing Di Cisco Packet Tracer 7.2          Hai Sahabat IT, selamat datang di Master IT .   Apa sih Master IT itu? Master IT adalah website serta channel Youtube yang menyediakan berbagai ilmu mengenai dunia IT untuk membantu kalian yang haus akan ilmu pengetahuan seputar IT. Slogan dari Master IT adalah “ All About IT In Here ” maksudnya semua tentang IT ada disini. Pada postingan pertama ini, kita akan bahas mengenai Static Routing . Apa sih Static Routing itu? Static Routing merupakan salah satu jenis routing, dimana kita konfigurasikan routing secara manual. Dan kita akan membuatnya di Cisco Packet Tracer 7.2 versi terbaru yang dirilis oleh Perusahaan Cisco pada tahun ini. Bisa dilihat diatas kalau versi terbaru dari Cisco Packet Tracer memiliki tampilan awal yang modern dibandingkan versi sebelumnya. Dan tentu saja fitur-fitur didalamnya yang lebih simple dan lengkap.             Lalu,
Read more

Konfigurasi Dynamic Routing – RIPv2 Di Cisco Packet Tracer 7.2

-
Image
Konfigurasi Dynamic Routing – RIPv2 Di Cisco Packet Tracer 7.2 Hai, Sahabat IT kembali di blog Master IT yang pastinya bakal kasih ilmu pengetahuan seputar dunia IT. Di postingan atau artikel pertama, kita membahas mengenai Static Routing yang pasti semua Sahabat IT sudah pada bias kan. Oke, di artikel kedua ini, kita masih membahas mengenai networking atau jaringan. Kalau di artikel pertama kita bahas Static Routing kali ini kita akan bahas mengenai Dynamic Routing – RIPv2 dan tentu saja menggunakan Cisco Packet Tracer versi 7.2. Dyanmic Routing??? Terus perbedaannya dengan Static Routing apa???. Baiklah, mari kita simak penjelasan berikut ini. Perbedaan Dynamic Routing dibandingkan Static Routing adalah kita tak perlu mengetahui destination network karena nanti source network atau directly connected network atau network yang terhubung langsung   lah yang akan di advertise. Selain itu, update routing tables-nya pun akan mengalami perubahan secara berkala. Tipe dynamic routin
Read more

Cara Membuat Deret Fibonacci PHP - Part 1

-
Hai, Sahabat IT kembali lagi dengan Master IT yang pastinya bakal kasih informasi atau tutorial seputar dunia IT. Setelah beberapa lama tidak posting kali ini kita akan bahas mengenai Web Programming. Pada postingan kali ini kita akan membahas tentang cara membuat deret fibonacci menggunakan PHP. Seperti pada judul diatas kita akan memberikan tutorial deret fibonacci part 1 yang pastinya bakal ada part-part berikutnya, ditunggu ya Sahabat. Langsung saja pada pembahasan kita.
Read more