Cara menghubungkan form login ke menu utama html

Cara menghubungkan form login ke menu utama html

Hallo pembaca sekalian pada tutorial ini kita akan membahas cara membuat form login dengan php dan MySQLi database. Halaman login diperlukan untuk aplikasi berbasis web untuk memberikan batasan akses jika diperlukan. Biasanya batasan akses diperlukan seperti aplikasi web berbentuk sistem informasi, seperti sistem informasi akademik, sistem e-commerce dll.

Sebelum membuat halaman login lengkap dengan database MySQLi hal – hal yang harus di siapkan untuk adalah sebagai berikut:

1. Editor

Editor ini digunakan untuk menuliskan script seperti php, html dan css. Beberapa pilihan editor yang ada yaitu Sublime text, Visual studio code, notepad, notepad++, dll. Silahkan gunakan salah satu dari pilihan yang ada.

2. Database Server

Selain MySQL kita bisa menggunakan database server lain seperti PostgreSQL. Khusus untuk tutorial ini kita menggunakan MySQL

3. Webserver

Salah satu webserver yang sering digunakan adalah apache.

Itulah beberapa hal yang harus ada dalam pembuatan form login.

Kita dapat menginstalnya terlebih dahulu. Untuk database dan webserver dalam satu paket kita dapat menggunakan XAMPP atau WAMPP. Lebih lanjut pahami tentang kebutuhan software belajar php.

Langkah – langkah Membuat Form dan Database untuk Login

Hal yang akan diselesaikan untuk dapat membuat sistem login ini adalah antarmuka dan database. Ada beberapa halaman atau antarmuka yang harus kita buat. Silahkan ikuti langkah-langkah ini untuk membuat form login Menggunakan php dan MySQLi database.

1. Membuat Form Login

Kita dapat membuat form dalam bentuk yang lebih sederhana. Dapat juga menggunakan bootstrap agar tampilan dari form yang dibuat menjadi lebih bagus seperti di bawah ini.

Cara menghubungkan form login ke menu utama html
Membuat Form Login

Silahkan donwload bootstrap terlebih dahulu dan masukkan ke directory project.

Setelah memiliki bootstrap dalam project buat file login dengan menuliskan script di bawah ini:

script login.php





    
    
    
    
    Halaman Login



    

Halaman Login

Username
Password
'; echo $_SESSION['login_gagal']; echo '
'; session_unset(); } ?>

simpan script ini dicectory project : htdocs/indonetsource/login.php. Akses file login.php di browser melalui url: http://localhost/indonetsource/login.php

2. Membuat Proses login

Halaman login yang dibuat pada langkah 1 memiliki button submit action="proses_login.php" method="POST". Saat button di klik maka akan mengakses proses_login.php.

proses_login.php

 0) {
        $data = mysqli_fetch_array($query);
            $_SESSION['username'] = $data['username'];
            header("Location: halaman_utama.php");
    }    else {
    $_SESSION['login_gagal'] = "Username dan password salah" ;
    header("Location: login.php");
    }
 
?>

simpan script ini dicectory project : htdocs/indonetsource/proses_login.php

4. Desain Halaman Utama

Sebagai feedback apakah proses login yang kita buat berjalan maka akan ada 2 kondisi yang akan terjadi setelah halaman login di submit. Pertama notifikasi username dan password salah. Kedua terbukanya akses ke halaman utama jika password dan username yang dimasukkan benar.

Desainlah halaman utama seperti di bawah ini yang akan muncul ketika proses login sukses.

Cara menghubungkan form login ke menu utama html
Halama Utama

gunakan script di bawah ini untuk membuat halaman utama.

halaman_utama.php



  
  
  
  
  Halaman Utama



  

Hello...
Selamat Anda Behasil Login

5. Proses Logout

Selain login dalam sebuah sistem yang mempunyai aksi login tentu diperlukan logout yang bertujuan untuk mengakhiri aktivitas user.

logout.php

6. Koneksi dan Database

Koneksi digunakan sebagai penghubung antara form dan database. Data siapa yang memiliki akses terhadap sistem login yang kita buat perlu di simpan di database. Setelah database dimiliki maka kita memerlukan scirpt koneksi untuk menyambungkan project yang kita buat dengan dataase.

script koneksi.php

Struktur Database

Silahkan buat database dan tabel. Pada contoh ini menggunakan database indonetsource dan tabel admin. Tabel admin memiliki struktur seperti berikut:

CREATE TABLE `admin` (
 `username` varchar(20) NOT NULL,
 `password` varchar(255) NOT NULL,
 `nama` varchar(50) NOT NULL,
 PRIMARY KEY (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1

Insert Data admin ke Database

Ada 3 nilai input untuk admin yaitu : username, password dan nama. Untuk password kita menggunakan hashing dengan algoritma md5. Perhatikan gambar di bawah ini, pada kolom function pilih MD5 saat input password.

Cara menghubungkan form login ke menu utama html
Insert data admin ke database

Jika seluruh tahap di atas telah dikerjakan silahkan akses url http://localhost/indonetsource/login.php untuk melakukan testing terhadap sistem login yang dibuat.

Demikianlah tutorial tentang cara membuat form login dengan PHP dan MySQLi.