Cara membuat form login php mysql

Kemarin pada bagian pertama Membuat Form Login dan Registrasi Dengan PHP MySQL : Part 1 kita sudah belajar cara membuat form sederhana menggunakan HTML dan CSS. Lalu membuat request POST dan menerimanya dengan PHP.

Sekarang mari kita lanjutkan menghubungkan form yang telah kita buat dengan sebuah database. Sehingga nanti data pendaftaran yang diinput akan tersimpan kedalam database. Dan nantinya, autentikasi login juga akan menggunakan data dari database.


Perkenalan

Database adalah sebuah sistem yang berisi kumpulan data yang dikelola sedemikian rupa dan diorganisir dengan ketentuan tertentu dalam satu penyimpanan.

Data pada database dapat dilakukan manipulasi seperti penambahan, pengubahan dan penghapusan serta dapat dilihat dengan menggunakan teknik tertentu untuk menghasilkan informasi yang lebih bermakna.

Sekarang anbi mau mengajarkan ke kalian bagaimana cara membuat database menggunakan MySQL dengan bantuan phpMyAdmin. Apa itu MySQL dan phpMyAdmin?

  • MySQL : adalah sebuah sistem manajemen database yang menggunakan perintah - perintah SQL (Structured Query Language) untuk mengelola data yang disimpan.

  • phpMyAdmin : adalah sebuah software berbasis PHP yang bertujuan untuk memudahkan kita mengelola database MySQL.

“Kenapa kita mengelola database dengan phpMyAdmin? Kenapa tidak langsung saja menggunakan MySQL?"

Dengan phpMyAdmin, kalian tidak perlu menggunakan terminal untuk mengelola data dalam database, karena phpMyAdmin memiliki tampilan GUI (Graphic User Interface) sehingga mudah digunakan.

Ibarat MySQL adalah cangkul untuk membajak sawah, phpMyAdmin adalah traktor.


Membuat Database

Sekarang kita akan membuat database untuk menyimpan inputan data dari form yang telah kita buat.

  1. Pertama, pastikan server dan database local pada XAMPP sudah aktif.
    Apache Server dan Database MySQL
  2. Buka browser, dan akses link //localhost/phpmyadmin/ untuk membuka tampilan dashboard phpMyAdmin.
    Tampilan Dashboard phpMyAdmin
  3. Pada bagian pojok kiri navigasi, paling atas terdapat tombol New untuk membuat database, dan isikan nama database pada kolom database name.
    Klik New > Isi Nama Database
  4. Kita beri nama database ini Yes! Koneksi Berhasil.. 0. Lalu klik tombol create, dan akan muncul tampilan untuk membuat table.
    Setelah berhasil membuat database

Membuat Table

Table merupakan bagian dari database yang dapat memiliki relasi satu sama lain, tabel sendiri terdiri dari baris dan kolom. Jika database adalah ibunya maka tabel adalah anak - anaknya.

Ilustrasi Database dan Tabel

Disini kita akan membuat tabel yang akan menampung data input dari form registrasi yang kita buat kemarin. Nah, untuk itu kita akan membuat table bernama Yes! Koneksi Berhasil.. 1 dengan isi 4 kolom yaitu :

  • id
  • username
  • password
  • email

Jika nanti sudah berisi data, Kurang lebih gambarannya seperti ini :

tbl_pendaftaran

IdUsernamePasswordEmail1anbi123asd456anbi@sayang.com2adeulfisayang123adeul@gmail.com3adexesjuanda123adexe@email.com

Setelah tadi kita selesai membuat database. Sekarang bagaimana cara membuat tabel? Berikut langkah - langkahnya.

  1. Masukkan nama tabel didalam kolom input create table. Kita beri nama Yes! Koneksi Berhasil.. 1 dengan jumlah 4 kolom seperti yang kita bahas tadi.

    Input nama tabel > masukkan jumlah kolom > go
  2. Lalu akan muncul tampilan beberapa field input yang digunakan untuk mendeskripsikan kolom yang akan kita buat. Untuk membuat kolom kita perlu mendefinisikan name , type dan length/values kolom :

    Definisika nama, tipe dan panjang kolom
    • VARCHAR adalah tipe data String, cocok digunakan untuk menyimpan kata dan kalimat.
    • INT adalah tipe data Number, cocok digunakan unutk menyimpan angka.

    Usahakan dalam penamaan kolom jangan ada spasi. Sebaiknya gunakan Yes! Koneksi Berhasil.. 3 atau Yes! Koneksi Berhasil.. 4. Contoh : “nama_depan” atau “namaBelakang”

  3. Khusus untuk kolom Id , perlu kita jadikan sebagai Yes! Koneksi Berhasil.. 5 dan diberikan fungsi auto increment. Tujuannya agar setiap data yang diinput memiliki nilai yang uniqe.

    1. Pada bagian id centang kolom bernama A.I

      Centang Bagian A.I
    2. Lalu akan muncul dialog box seperti ini, Langsung GO aja.

      Dialog Box Primary
  4. Setelah semuanya terisi, tekan save dan jadilah tabel tbl_pendaftaran!

    Jadilah Tabel Pendaftaran

Koneksi Dengan Database

Database sudah kita siapkan, sekarang waktunya kita koneksikan dengan form yang sudah kita buat. Didalam Yes! Koneksi Berhasil.. 6, kita tambahkan kode PHP untuk mengkoneksikan dengan database.

<?php /* nama server kita */ $servername = "localhost"; /* nama database kita */ $database = "db_user"; /* nama user yang terdaftar pada database (default: root) */ $username = "root"; /* password yang terdaftar pada database (default : "") */ $password = ""; /* membuat koneksi */ $conn = mysqli_connect($servername, $username, $password, $database); /* mengecek koneksi */ if (!$conn) { die("Maaf koneksi anda gagal : " . mysqli_connect_error()); }else{ echo "<h1>Yes! Koneksi Berhasil..</h1>"; } /* ============================ NANTI KODE NYA DISINI ============================*/ /* menutup koneksi */ mysqli_close($conn); ?>

Jika koneksi berhasil, ketika kita mencoba login atau daftar akan muncul output :

Yes! Koneksi Berhasil..

Jika gagal, akan muncul output :

Maaf koneksi anda gagal : *penyebab koneksi gagal*
Contoh Koneksi Berhasil

Menyimpan Hasil Pendaftaran

Sekarang mari kita belajar cara menyimpan hasil input data form pendaftaran kedalam tabel Yes! Koneksi Berhasil.. 1 di database Yes! Koneksi Berhasil.. 0.

Kita kemarin belajar cara mengambil input data form dengan menggunakan Yes! Koneksi Berhasil.. 9. Sekarang kita akan menyimpan setiap data pada form dengan memanggil data menggunakan Yes! Koneksi Berhasil.. 9.

<?php $username = $_POST["username"]; $password = $_POST["password"]; $email = $_POST["email"]; $query_sql = "INSERT INTO tbl_pendaftaran (username, password, email) VALUES ('$username', '$password', '$email')"; if (mysqli_query($conn, $query_sql)) { echo "<h1>Username $username berhasil terdaftar</h1> <a href='pages/login.php'>Kembali Login</h1> "; } else { echo "Pendaftaran Gagal : " . mysqli_error($conn); } ?>

Penjelasan Garis Besar

  • Query SQL

    yaitu sintaks atau perintah yang dipakai untuk mengakses, memanipulasi dan menampilkan data pada sistem database SQL.

    <?php $query_sql = "INSERT INTO tbl_pendaftaran (username, password, email) VALUES ('$username', '$password', '$email')"; ?>

    Pada query diatas, bermaksud untuk menginput Maaf koneksi anda gagal : *penyebab koneksi gagal* 1, Maaf koneksi anda gagal : *penyebab koneksi gagal* 2, dan Maaf koneksi anda gagal : *penyebab koneksi gagal* 3 kedalam tabel Yes! Koneksi Berhasil.. 1 di database.

  • Eksekusi Query

    <?php mysqli_query($conn, $query_sql) ?>

    Dalam kode diatas, digunakan untuk mengeksekusi Query SQL pada variabel Maaf koneksi anda gagal : *penyebab koneksi gagal* 5 dalam database yang terkoneksi pada variabel Maaf koneksi anda gagal : *penyebab koneksi gagal* 6.

Contoh Eksekusi Form Pendaftaran

Jika kita berhasil mendaftar maka data tersebut sudah tersimpan di database. Coba kita lihat di phpMyAdmin > Yes! Koneksi Berhasil.. 0 > Yes! Koneksi Berhasil.. 1 akan terlihat data kita yang tersimpan.

Data tersimpan di tbl_pendaftaran

Autentikasi Login Dengan Data Database

Kita sudah dapat menyimpan data pada saat mendaftar dengan form registrasi, sekarang kita akan membuat autentikasi login menggunakan username dan password yang sudah kita daftarkan.

Mudahnya, kita mengambil data yang ada pada database dengan parameter data username dan password yang diinput pada form login.

Ilustrasi Algoritma Autentikasi Login

Jika datanya ada maka “Login Berhasil”, jika tidak maka “Login Gagal”. Langsung saja kita buat kodenya.

<?php $username = $_POST["username"]; $password = $_POST["password"]; $query_sql = "SELECT * FROM tbl_pendaftaran WHERE username = '$username' AND password = '$password'"; $result = mysqli_query($conn, $query_sql); if(mysqli_num_rows($result) > 0){ echo "<h1>Selamat Datang, ".$username."!</h1>"; }else{ echo "<h2>Username atau Password Salah!</h2>"; } ?>

Penjelasan Secara Garis Besar

  • Query Select

<?php $query_sql = "SELECT * FROM tbl_pendaftaran WHERE username = '$username' AND password = '$password'"; ?>

Query diatas digunakan untuk mengambil data pada tabel tbl_pendaftaran , dimana ia akan mencari Maaf koneksi anda gagal : *penyebab koneksi gagal* 1 dan Maaf koneksi anda gagal : *penyebab koneksi gagal* 2 yang sama dengan yang dikirimkan pada form login.

  • Menghitung Jumlah Data

<?php mysqli_num_rows($result) >

Kode diatas digunakan untuk menghitung jumlah data pada hasil eksekusi query.Nah, disitu terdapat kondisi yang membandingkan dengan > 0, yang berarti jika ada datanya maka berhasil login, jika tidak ada maka login gagal.

Contoh Eksekusi Login. . .

Nah itu kan masih ada output buat cek koneksi tadi, kalian bisa menghapus kode tersebut.

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.

🐙 //github.com/AnbiDev/php-login-daftar

Oke itulah full tutorial dari Membuat Form Login dan Registrasi Dengan PHP MySQL. Semoga bermanfaat dan sampai jumpa!

Langkah langkah untuk membuat form login?

Cara Membuat Form Login yang Menarik dengan HTML.
Deklarasikan Dokumen HTML Anda. Sekarang, buka file html form login Anda. ... .
2. Buat Kepala Halaman Form Login. ... .
3. Beri Judul Halaman Form Login. ... .
3. Sisipkan File CSS. ... .
4. Buat Badan Form Login. ... .
Buat Layout Form Login. ... .
6. Beri Judul Form Login. ... .
7. Buat Kotak Form Login..

Apa yang dimaksud dengan form login?

Form login adalah halaman yang di dalamnya terdapat sebuah inputan untuk memasukan username dan password sebagai akses untuk masuk ke dalam aplikasi.

Tipe input apa saja yang perlu digunakan untuk membuat form login?

Untuk membuat form login dengan HTML, field yang dibutuhkan adalah username dan password. Username dapat menggunakan input type text, lalu password dapat menggunakan input type password.

Postingan terbaru

LIHAT SEMUA