Backend : PHP Bagian 12 – Membuat Form Login

Pada materi Frontend tentang HTML dan CSS teman-teman sudah membuat tampilan Form Login. Kali ini penulis akan mengajarkan untuk membuat backend dari Form Login dengan PHP. Studi kasus penulis ambil form login karena lebih mudah dipahami. Kemarin hanya tampilan, sekarang form login nya terdapat logic seperti ketika email dan password benar, maka akan ke page index, jika gagal akan ke page failed. Oke langsung saja kita praktekkan.

1. Tambahkan file index.php

Tambahkan file index.php di folder LatihanPhp dan ketik code dibawah ini…

<!DOCTYPE html>
<html>
<head>
    <title>Backend : PHP Bagian 12 - Membuat Form Login</title>
    <link rel="shortcut icon" type="images/x-icon" href="img/pbs2.png">
    <style>
        body {
           background-color: #110c54;
           background-repeat: no-repeat;
        }
        #card {
            background: #fbfbfb;
            border-radius: 8px;
            box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
            height: 410px;
            margin: 6rem auto 8.1rem auto;
            width: 329px;
            height: 450px;
        }
        img {
            width: 150px;
        }
        #card-content {
            padding: 12px 44px;
        }
        #card-title {
            font-family: "Raleway Thin", sans-serif;
            letter-spacing: 4px;
            padding-bottom: 23px;
            padding-top: 10px;
            text-align: center;
        }
        .underline-title {
            background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
            height: 2px;
            margin: -1.1rem auto 0 auto;
            width: 89px;
        }
        .form {
            align-items: left;
            display: flex;
            flex-direction: column;
        }
        .form-border {
            background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
            height: 1px;
            width: 100%;
        }
        .form-content {
            background: #fbfbfb;
            border: none;
            outline: none;
            padding-top: 50px;
        }        
        input {
            text-align: center;
            font-size: 15px;
        }
        #submit-btn {
            background-color: green;
            border: none;
            border-radius: 21px;
            box-shadow: 0px 1px 8px #24c64f;
            cursor: pointer;
            color: white;
            font-family: "Raleway SemiBold", sans-serif;
            height: 42.3px;
            margin: 0 auto;
            margin-top: 50px;
            transition: 0.25s;
            width: 153px;
        }
        #submit-btn:hover {
            box-shadow: 0px 1px 18px #24c64f;
        }
    </style>
</head>
<body>
    <div id="card">
        <div id="card-content">
          <div id="card-title">
            <img src="img/smkbisa.png">
            <h2>LOGIN</h2>
            <div class="underline-title"></div>
            <form action="proses.php" method="POST">
                <input type="email" class="form-content" name="email" placeholder="Masukkan Email" required>
                <div class="form-border"></div>
                <input type="password" class="form-content" name="password" placeholder="Masukkan Password" required>
                <div class="form-border"></div>
                <button id="submit-btn" type="submit">LOGIN</button>
            </form>
          </div>
        </div>
    </div>
</body>
</html>

Penjelasan :

– Pada Baris ke 85, kita menambahkan atribut action=”proses.php”digunakan untuk menentukan file yang akan diproses dengan PHP yang berfungsi sebagai operasi logic pada program login

– Pada Baris ke 86 dan 88, kita menambahkan atribut name=”email” dan name=”password” untuk menangkap nilai atau isi dari ketikkan user


Hasil :


2. Tambahkan File proses.php

Tambahkan file proses.php di folder LatihanPhp dan ketik code dibawah ini…

<?php 

$email = 'admin@gmail.com';
$password = 12345678;

if($_POST['email'] == $email && $_POST['password'] == $password)
{
	echo "BERHASIL";
}else{
	echo "GAGAL";
}

?>

Penjelasan :

1. Pada Baris ke 3, kita membuat nilai variabel email menjadi admin@gmail.com

2. Pada Baris ke 4, kita membuat nilai variabel password menjadi 12345678

3. Pada Baris ke 6 – 11, kita membuat Alur pemrograman IF dan ELSE yang sebelumnya sudah teman-teman pelajari

4. Pada Baris ke 6, kita membuat logika if yang artinya jika user mengetik email dan password yang sesuai dengan nilai variabel email dan password yang telah kita tetapkan

5. Baris ke 8 akan dijalankan, Apabila user mengetik email dan password sesuai dengan nilai variabel email dan password yang telah kita tetapkan

6. Baris ke 10 akan dijalankan, Apabila user mengetik email dan password tidak sesuai dengan nilai variabel email dan password yang telah kita tetapkan


Hasil :

1. Jika berhasil akan tampil seperti gambar dibawah ini…

2. Jika gagal akan tampil seperti gambar dibawah ini…

Teman-teman dapat mendownload file yang sudah jadi disini.

Leave a Reply

Your email address will not be published. Required fields are marked *