Form Login PHP : PHP adalah bahasa pemrograman skrip sisi server, dan MySQL adalah sistem manajemen basis data relasional sumber terbuka . Kedua framework ini, jika di gunakan bersama, mampu memberikan solusi yang sangat unik, seperti membuat formulir login.

Dalam tutorial ini, Anda akan melihat sistem login sederhana menggunakan PHP dan MySQL.

Sebelum memulai dengan aspek terkait kode PHP, mari kita lihat prasyarat untuk membuat formulir login.

Prasyarat:

Pengetahuan tentang HTML, CSS, PHP, dan MySQL
Microsoft Visual Studio (Untuk menulis kode)
Installation of XAMPP
Mari kita mulai dengan topik pertama yaitu membuat form login PHP.

Langkah 1- Buat Formulir Login PHP HTML


Untuk membuat formulir login, ikuti langkah-langkah yang disebutkan di bawah ini:

Buka Microsoft Visual Studio -> buat file baru dan beri nama sebagai file SL
Sekarang, di halaman, tulis kode yang disebutkan dalam contoh di bawah ini
Program HTML akan membuat formulir halaman web yang memungkinkan pengguna untuk masuk sendiri
Kode terdiri dari elemen HTML. Elemen dasarnya adalah:

<title>

Elemen menampilkan tajuk dokumen. Label hanya bisa dalam format teks, dan menampilkan teks di tab browser.

<link> 

Itu menciptakan tautan antara dokumen kerja dan sumber daya eksternal.

<form>

Elemen mendefinisikan input pengguna yang disertakan saat membuat HTML. 

<input type>

Ini menampilkan bidang input satu baris.

<label>

Ini mendefinisikan label untuk banyak elemen bentuk. Ini terutama menunjukkan tombol radio/kotak centang.

<!DOCTYPE html>

<html>

<head>

    <title>LOGIN</title>

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

</head>

<body>

     <form action="login.php" method="post">

        <h2>LOGIN</h2>

        <?php if (isset($_GET['error'])) { ?>

            <p class="error"><?php echo $_GET['error']; ?></p>

        <?php } ?>

        <label>User Name</label>

        <input type="text" name="uname" placeholder="User Name"><br>

        <label>Password</label>

        <input type="password" name="password" placeholder="Password"><br> 

        <button type="submit">Login</button>

     </form>

</body>

</html>

Langkah 2: Buat Kode CSS untuk Desain Situs Web 

Berikutnya adalah lembar CSS . Sekarang, tujuannya adalah membuat file cascading style sheet (CSS) untuk meningkatkan desain halaman web.

See also  Semua Tentang Internet of Things

Kode untuk file .css di bawah ini:

body {

    background: #91a716;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    flex-direction: column;

}

*{

    font-family: cursive;

    box-sizing: padding-box;

}

form {

    width: 1000px;

    border: 3px solid rgb(177, 142, 142);

    padding: 20px;

    background: rgb(85, 54, 54);

    border-radius: 20px;

}

h2 {

    text-align: center;

    margin-bottom: 40px;

}

input {

    display: block;

    border: 2px solid #ccc;

    width: 95%;

    padding: 10px;

    margin: 10px auto;

    border-radius: 5px;

}

label {

    color: #888;

    font-size: 18px;

    padding: 10px;

}

button {

    float: right;

    background: rgb(35, 174, 202);

    padding: 10px 15px;

    color: #fff;

    border-radius: 5px;

    margin-right: 10px;

    border: none;

}

button:hover{

    opacity: .10;

}

.error {

   background: #F2DEDE;

   color: #0c0101;

   padding: 10px;

   width: 95%;

   border-radius: 5px;

   margin: 20px auto;

}

h1 {

    text-align: center;

    color: rgb(134, 3, 3);

}

a {

    float: right;

    background: rgb(183, 225, 233);

    padding: 10px 15px;

    color: #fff;

    border-radius: 10px;

    margin-right: 10px;

    border: none;

    text-decoration: none;

}

a:hover{

    opacity: .7;

}

Simpan nama file sebagai “Style.css” di Microsoft Visual Studio.

See also  Arsitektur Web Back-End

Output untuk kode terlihat seperti berikut:

Form Login PHP

Langkah 3: Buat Tabel Database Menggunakan MySQL

Saat Anda membuat database, Anda membuat struktur seperti ini:

Sekarang, mulai server SQL Xampp Anda dan pilih admin. Ini akan mengarahkan Anda ke halaman web phpMyAdmin. Sekarang, masuk dengan nama pengguna dan kata sandi Anda.

Sekarang, di MyPHPAdmin, buat database baru dengan mengklik “Baru” di sisi kiri halaman web.

Selanjutnya, masukkan nama untuk database yang bertuliskan “Buat database”. 

Kemudian, Anda akan diarahkan ke halaman berikutnya di mana Anda akan membuat tabel baru. Sekarang, masukkan nama tabel yang diinginkan. 

Selanjutnya, Anda dapat memilih nomor jenis yang diinginkan untuk kotak teks ‘Fields’. 

See also  Bias dalam Analisis Data

Catatan: Bidang adalah kolom; beberapa kolom adalah nama pengguna, kata sandi, alamat, dll. Di kotak teks, masukkan angka ‘4’. Anda juga dapat menambah jumlahnya berdasarkan kebutuhan. 

Setelah Anda menyelesaikan langkah-langkahnya, klik tombol Go.

Selanjutnya, atur kunci utama untuk bidang ID dengan memilih opsi daftar drop-down dan pilih simpan.

Catatan: Misalkan Anda menerima kesalahan #1067 di versi phpMyAdmin yang lebih baru, ubah daftar drop-down Default dari TimeStamp ke None. 

Setelah Anda menyimpan ini, Anda akan diarahkan ke layar struktur.

Baca artikel lengkap nya di rumus php

By Admin