Tutorial PHP: Cara Membuat Sistem Login dengan Nama dan Nomor Induk Mahasiswa - AneIqbal - Blog Tutorial dan Informasi untuk Anda

Tutorial PHP: Cara Membuat Sistem Login dengan Nama dan Nomor Induk Mahasiswa

Share
Halo bro. Kali ini, kita akan coba bahas cara membuat sistem login sederhana dengan PHP. Kenapa sederhana? karena tidak memerlukan koneksi database di sini dan idealnya sistem login itu memerlukan database. Tapi, yang terpenting konsepnya bisa kita pahami.

Kita akan gunakan nama dan nomor induk mahasiswa sebagai data untuk loginnya. Ya bisa dikatakan sebagai user dan passwordnya.

cara membuat sistem login dengan nama dan nim

Pastikan Anda sudah menginstall software XAMPP di laptop/PC Anda. Kenapa? karena software tersebut akan menjadikan laptop/PC kita sebagai web server. PHP membutuhkan web server (Apache) agar dapat berjalan.

Jika Anda sudah menginstallnya, buka XAMPP Control Panel lalu jalankan Apache dengan mengklik tombol Start. Lalu, buat folder "login_mahasiswa" di dalam folder C:\xampp\htdocs\ jika menggunakan OS Windows atau Applications/XAMPP/htdocs pada macOS.

Kemudian ada 2 file yang akan kita buat, yakni form.php dan proses_login.php. form.php berisi codingan HTML untuk membuat form loginnya. proses_login.php berisi codingan PHP untuk memproses data isian form. Keduanya diletakkan di dalam folder login_mahasiswa.

Kita mulai dari form HTML. Buat form dengan coding seperti ini.
<!DOCTYPE html>
<html>
<head>
 <title>Login Sistem dengan Nama & NIM</title>
</head>
<body>
 <form method="post" action="proses_login.php">
  <label>Username:</label>
  <input type="text" name="username"><br>
  <label>Password:</label>
  <input type="password" name="password"><br>
  <input type="submit" value="Login">
 </form>
</body>
</html>

Berikut penjelasannya. Bagian <!DOCTYPE html> atau disebut juga tag, merupakan identitas dari versi HTML yang kita gunakan dan ini merupakan tag untuk HTML versi 5. Versi terbaru hingga saat postingan ini dibuat.

Lalu ada tag <html> ... </html>. Setiap halaman web, sudah pasti akan memiliki tag ini karena ini merupakan tag dasar dari HTML. <html> disebut tag pembuka dan </html> disebut tag penutup.

Kemudian tag <head> ... </head>. Ini juga merupakan tag dasar. Kita lihat di sana ada tag <title> ... </title>. Tag ini berfungsi untuk menampilkan informasi pada tab browser.

cara membuat sistem login dengan nama dan nim

Tag dasar terakhir adalah <body> ... </body>. Semua informasi yang ada pada halaman web, entah itu halaman berita, halaman login, dan lain sebagainya, ada di dalam sini codingannya. Seperti yang kita lihat pada coding di atas, ada tag <form> ... </form> di dalam tag <body>.

Kita beralih ke tag <form>. Tag ini digunakan untuk membuat form atau isian. Form tersebut bisa berupa isian teks, password, ceklis, opsi, dan masih banyak lagi. Saat ini, kita berfokus pada 2 jenis isian, yakni teks dan password.

Setiap tag HTML, memiliki atributnya masing-masing. Apa itu atribut? Atribut adalah informasi tambahan untuk elemen/tag. Tiap atribut, memiliki nilai. Contohnya ada pada tag <form> di atas. Di sana terdapat 2 atribut; method dan action. Atribut methodnya bernilai post dan atribut actionnya bernilai proses_login.php.

Atribut method digunakan untuk menentukan metode seperti apa yang digunakan untuk mengirimkan data yang diinput dari form ke proses selanjutnya. Ada 2 nilai; yakni post dan get. post artinya proses pengiriman data melalui background process alias dibelakang layar atau tidak terlihat. Sedangkan get mengirimkan datanya melalui url/link dan akan terlihat perubahannya pada url/link tersebut.

cara membuat sistem login dengan nama dan nim

Lalu atribut action. Fungsinya adalah untuk mengarahkan kemana data isian form akan diproses dan biasanya adalah nama file. Seperti contoh di atas, atribut action bernilai proses_login.php.

Lalu ada tag <label> dan ini berfungsi untuk membuat label. Di bawahnya terdapat tag <input> yang mana dari contoh di atas memiliki 2 atribut; type dan name. type digunakan untuk menentukan jenis isiannya, misalnya isian teks atau password atau ceklis atau submit. name digunakan untuk identitas dari tag <input> atau isian tersebut dan inilah yang akan berhubungan dengan PHP.

PHP akan menangkap data isian yang dikirimkan dari form. Untuk menangkapnya, PHP akan memanggil nilai dari atribut name diikuti dengan metode pengirimannya.

Jangan lewatkan:
Tutorial Fungsi PHP: PHP date() Function
Cara Menampilkan Animasi Jam Server dengan PHP dan Javascript
42 Tutorial HTML Lengkap dengan Penjelasannya

Oke, pembahasan halaman formnya selesai sampai di sini. Mari kita coba lihat hasil codingan form tadi dengan cara mengetik "http://localhost/login_mahasiswa/form.php" pada address bar browser.

cara membuat sistem login dengan nama dan nim

Selanjutnya, kita akan bahas file prosesnya, yaitu proses_login.php. Berikut isi filenya.
<?php
$user = $_POST['username'];
$pass = $_POST['password'];

if($user == 'Iqbal Wahyudi' && $pass == '41815120070'){
 echo 'Anda berhasil login dengan nama & NIM Anda.';
}else{
 echo 'Anda gagal login.';
 echo '<br>';
 echo '<a href="form.php">Coba Login Lagi</a>';
}
?>

Codingan HTML diawali dengan <html> dan ditutup dengan </html>. Kalau di PHP, diawali dengan <?php dan ditutup dengan ?>.

Di PHP ada istilah variabel. Seperti halnya di Matematika, variabel di sini juga digunakan untuk menampung nilai. Variabel di PHP ditandai dengan tanda dolar ($).

Pada contoh di atas, kita membuat 2 variabel yakni $user dan $pass. $user untuk menampung kiriman data username sedangkan $pass untuk menampung kiriman data password.

$_POST['username'] digunakan untuk menangkap data kiriman bermetode post dari atribut name bernilai username dari form input tadi. Sedangkan $_POST['password'] menangkap data kirimin dari atribut name bernilai password.

Jika data kiriman sudah berhasil didapat, lalu kita gunakan percabangan if. Kita periksa apakah benar variabel $user bernilai "Iqbal Wahyudi" dan variabel $pass bernilai "41815120070". Jika benar, maka akan menampilkan "Anda berhasil login dengan nama & NIM Anda." Dan jika salah, maka akan muncul "Anda gagal login." disertai dengan link untuk login kembali.

Tidak ada komentar:

Posting Komentar

Silakan berkomentar dengan kalimat yang bijak.