Cara membuat login admin dengan php

Question

Sekarang kita akan membuat sebuah form login dan pendaftaraan dengan menggunakan PHP dan MySQL. Nah, kalian yang mungkin pertama kali belajar membuat web santai saja, disini anbi bakal bahas langkah per langkah.

Table of Contents Show

Visual Studio Code
Buat Struktur Folder
Penjelasan Garis Besar Kode
Form Daftar
Penjelasan Garis Besar Kode
Mari Hias Dengan CSS!
Halaman Index!

Persiapan

Nah apa saja yang perlu kita persiapkan nih? Berikut ini yang perlu kalian persiapan :

Visual Studio Code

Buat apa Visual Studio Code? VS Code (Visual Studio Code) sebuah teks editor ringan dan handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows.

Download Disini

Kalau selesai download, waktu installasi itu option dibawah dicentang semua yaa, supaya mempermudah kita dalam mengakses Visual Studio Code.

Centang Semua Optionnya

XAMPP

Lalu apa itu XAMPP? XAMPP merupakan paket alat untuk menjalankan web server dan database di localhost komputer. Itu artinya kalau kalian sudah punya website online, XAMPP membantumu membuat versi offline dari website tersebut.

Download Disini

Setelah selesai menginstall jangan lupa untuk mengaktifkan server Apache dan database MySQL pada XAMPP terlebih dahulu.

Apache Server dan Database MySQL

Buat Struktur Folder

Setelah selesai menginstall kedua aplikasi tersebut, mari kita lanjut membuat struktur folder untuk web ini.

Sekarang arahkan ke folder htdocs dan buat folder baru bernama login-signup caranya :
- Akses pada C:\xampp\htdocs
- Buat disana buat folder bernama login-signup.
  Folder login-signup
Lalu didalam folder login-signup kita buat file PHP bernama
```
<form method="POST" action="../index.php">
```
4 serta buat juga file stylesheet css bernama
```
<form method="POST" action="../index.php">
```
5 dan juga folder lagi bernama pages.
Didalam folder pages buat file bernama
```
<form method="POST" action="../index.php">
```
6 dan
```
<form method="POST" action="../index.php">
```
7.
Coba buka folder login-signup dengan menggunakan Visual Studio Code. Caranya hanya dengan klik kanan dan pilih “Open With Code”.

Nih kayak gini Open With Code

Penjelasan Struktur Kode

Jika kalian membuat folder beserta filenya dengan baik, hasilnya akan seperti ini :

Struktur Web Folder

Folder pages berisi file
```
<form method="POST" action="../index.php">
```
6 dan
```
<form method="POST" action="../index.php">
```
7.
- ```
<form method="POST" action="../index.php">
```
  6 , file ini nantinya akan berisi tampilan form login, dengan input username dan password.
- ```
<form method="POST" action="../index.php">
```
  7, file ini nantinya akan berisi tampilan form daftar dengan input username , email dan password.

<form method="POST" action="../index.php">

4, file ini akan kita isi dengan kode PHP dimana ia akan menampilkan hasil

<input name="username" type="text">
<input name="password" type="password">

3 pada halaman login dan daftar.

```
<form method="POST" action="../index.php">
```
5 , file ini akan menampung kode stylesheet untuk menghias web kita dengan CSS agar lebih menarik.

Form Login

Setelah membuat struktur folder dengan baik, mari kita membuat halaman form login terlebih dahulu. Kode yang kita buat akan disimpan di login.php, dan kode lengkap nya seperti ini :

<!DOCTYPE HTML>
<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="../style.css">
    </head>
    <body>
        <div class="container">
          <h1>Login</h1>
            <form method="POST" action="../index.php">

                <!-- tipe hidden tidak akan tampil pada website --> 
                <input name="tujuan" type="hidden" value="LOGIN" >

                <label>Username</label>
                <br>
                <input name="username" type="text">
                <br>
                <label>Password</label>
                <br>
                <input name="password" type="password">
                <br>

                <button>Log In</button>
                
                <p> Belum punya akun?
                  <a href="daftar.php">Daftar di sini</a>
                </p>
            </form>
        </div>
    </body>
</html>

Coba kita lihat hasilnya, dengan mengakses link berikut http://localhost/login-signup/pages/login.php

“Sebentar, Kenapa linknya aksesnya seperti itu?"

Ini Penjelasannya

Nih hasilnya 😄

Hasil Tampilan Login

Penjelasan Garis Besar Kode

<input name="username" type="text">
<input name="password" type="password">

5 Action

<form method="POST" action="../index.php">

Kode diatas untuk memberi tahu kemana data pada form ini akan dikirim? disana anbi mengarahkan ke file

<form method="POST" action="../index.php">

4 dengan menggunakan method

<input name="username" type="text">
<input name="password" type="password">

3. Apa itu method

<input name="username" type="text">
<input name="password" type="password">

3? bisa kalian lihat disini.

Data yang dikirim

<input name="username" type="text">
<input name="password" type="password">

Kedua baris kode diatas adalah tempat data yang akan dikirim. Attribute

<input name="username" type="text">
<input name="password" type="password">

9 digunakan sebagai identitas dari data yang dikirim, sehingga server dapat mengenali data tersebut berdasarkan nama yang kita berikan.

Jadi misal

<input name="tujuan" type="hidden" value="LOGIN" >

0 nanti ketika dikirim kita bisa menggunakan kode PHP untuk memanggil data yang dia input di textbox dengan kode

<input name="tujuan" type="hidden" value="LOGIN" >

1.

Hidden Input

<input name="tujuan" type="hidden" value="LOGIN" >

Kode diatas nantinya akan sebagai penanda bahwa data yang dikirim ke

<form method="POST" action="../index.php">

4 adalah dari form Login. Kita juga akan membuat hal yang sama pada form pendaftaran.

Perhatikan attribute

<input name="tujuan" type="hidden" value="LOGIN" >

3, value ini digunakan untuk mendefinisikan nilai default.

Pindah Halaman

<a href="daftar.php">Daftar di sini</a>

Untuk kode diatas digunakan untuk pindah ke halaman daftar.

Form Daftar

Lalu kita lanjut membuat tampilan form pada file daftar.php. Kode nya hampir sama dengan yang tadi, tetapi ada sedikit perubahan dan tambahan menjadi seperti ini :

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="../style.css">
    </head>
    <body>
        <div class="container">
          <h1>Daftar</h1>
            <form method="POST" action="../index.php">

                <input type="hidden" name="tujuan" value="DAFTAR">

                <label>Username</label>
                <br>
                <input name="username" type="text">
                <br>
                <label>Email</label>
                <br>
                <input name="email" type="text">
                <br>
                <label>Password</label>
                <br>
                <input name="password" type="password">
                <br>
                <button>Daftar</button>
                <p> Sudah punya akun?
                  <a href="login.php">Login di sini</a>
                </p>
            </form>
        </div>
    </body>
</html>

Coba kita lihat hasilnya dengan mengakses link berikut ini http://localhost/login-signup/pages/daftar.php.

Hasil Tampilan Daftar

Penjelasan Garis Besar Kode

Sebagian besar kode yang digunakan hampir sama seperti form login, tetapi disini nilai untuk Hidden Input diubah menjadi "DAFTAR" dan input data tambahan bernama "email".

Mari Hias Dengan CSS!

Nah, sentuhan terakhir agar form web kita terlihat elok nan cantik, perlu kita hias menggunakan CSS. Jika kalian lihat pada kode diatas, terdapat satu baris kode :

<link rel="stylesheet" href="../style.css">

Yang berarti semua kode CSS pada file

<form method="POST" action="../index.php">

5 akan diimport kedalam file HTML yang memiliki baris kode tersebut. Gampangnya, baris kode itu menghubungkan file PHP HTML kita dengan file CSS.

Nah sekarang mari kita masukkan kode CSS kedalam file

<form method="POST" action="../index.php">

5.

*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
}
body{
    height: 100vh;
    background-color: #242424;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
p {
  color: rgb(26, 25, 25);
  font-family: 'Open Sans', sans-serif;
  padding-top: 10px;
}

h1 {
  text-align: center;
  padding-bottom: 20px;
}

a {
  color: #752BEA;
  font-family: 'Open Sans', sans-serif;
}

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 25px;
    width: 300px;

    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.container h1{
    text-align: left;
    color: #1d1d1d;
    margin-bottom: 30px;
    border-bottom: 5px solid#1d1d1d;
}
.container label{
    text-align: left;
    color: #1d1d1d;
}
.container form input{
    width: calc(100% - 20px);
    padding: 8px 10px;
    margin-bottom: 15px;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #1d1d1d;
    color: #1d1d1d;
    font-size: 20px;
}
.container form button{
    width: 100%;
    height: 40px;
    padding: 5px 0;
    border: none;
    background-color:#752BEA;
    font-size: 18px;
    color: #fafafa;
    border-radius: 20px;
}

Setelah kita hias dengan kode diatas, anbi harap tampilan kedua form akan menjadi seperti ini.

Hasil Tampilan Login Dengan CSS

Hasil Tampilan Daftar Dengan CSS

Halaman Index!

Terakhir kita akan membuat halaman index. Nantinya, halaman ini akan menjadi target data form kita dikirim. Sehingga data yang kita masukkan pada form login atau daftar akan diproses disini.

Kode pada halaman index berisi seperti ini :

<?php 
    if(isset($_POST["tujuan"])){

        $tujuan = $_POST["tujuan"];
        
        if($tujuan == "LOGIN"){
            $username = $_POST["username"];
            $password = $_POST["password"];
            
            /* logika sederhana admin */
            if($username == "admin" && $password == "admin"){
                echo "<h1>Selamat Datang, ".$username."!</h1>";
            }else{
                echo "<h2>Username atau Password Salah!</h2>";
            }
    
        }else{
            $username = $_POST["username"];
            $password = $_POST["password"];
            $email = $_POST["email"];
    
            echo "<h1>Anda sudah terdaftar sebagai ".$username."!</h1>";
            
        }
    }   
?>

Penjelasan Garis Besar Kode

Cek Request POST

<?php
if(isset($_POST["tujuan"]))
?>

Kode diatas bertujuan untuk mengetahui “apakah terdapat request POST yang masuk?". Maksud variabel

<input name="tujuan" type="hidden" value="LOGIN" >

6 adalah data dari

<input name="tujuan" type="hidden" value="LOGIN" >

7 yang dikirim melalui form ke

<form method="POST" action="../index.php">

4.

<form method="POST" action="../index.php">

0

Jika terdapat request POST dari hidden input "tujuan" maka nilai akan disimpan divariabel

<input name="tujuan" type="hidden" value="LOGIN" >

9.

Bagian Login

<form method="POST" action="../index.php">

1

Nah, jika nilai variabel

<input name="tujuan" type="hidden" value="LOGIN" >

9 bernilai "LOGIN" maka ia akan mengambil data form input "username" dan "password" yang dikirim. Kedua data tersebut akan disimpan di variabel

<a href="daftar.php">Daftar di sini</a>

1 dan

<a href="daftar.php">Daftar di sini</a>

2.

<form method="POST" action="../index.php">

2

Disini anbi membuat kondisi simulasi login pada umumnya. Jika nilai Username dan Password adalah "admin", maka halaman

<form method="POST" action="../index.php">

4 akan mengatakan “Selamat Datang, Admin!". Jika tidak makan halaman

<form method="POST" action="../index.php">

4 akan mengatakan Username atau Password Salah!"

Bagian Daftar

<form method="POST" action="../index.php">

3

Selanjutnya adalah bagian daftar, disini kita mengambil nilai dari data form input "username", "password", "email" dan menampilkan nilai

<a href="daftar.php">Daftar di sini</a>

1.

Ketika semua langkah - langkah diatas sudah kita implementasikan, maka web akan berjalan seperti ini.

Hasil Login dan Daftar!. . .

Gimana paham gak dengan penjelasan diatas, mungkin agak ribet yak, jika kalian masih bingung bisa tanya dikolom komentar dibawah. Untuk full codenya kalian bisa akses di github AnbiDev.

kode php