Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna

Ukuran: px

Mulai penontonan dengan halaman:

Download "Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna"

Hendri Jayadi
6 tahun lalu
Tontonan:

Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session.

1 Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana dan mudah untuk diikuti. Secara Umum, form login akan sangat dibutuhkan pada situs web jika kita hanya ingin orangorang tertentu yang bisa melihat bahkan merubah konten pada website. Ini merupakan cara yang baik untuk menjaga data kita aman dari orang-orang yang tidak dikehendaki. Tutorial cara membuat form login dengan PHP dan MySQL ini dilengkapi dengan session. Pada saat proses login berhasil, secara otomatis akan tercipta sebuah session yang berfungsi sebagai informasi pribadi klien yang tersimpan di web server untuk digunakan sebagai proses login. Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Konsep dalam cara membuat form login dengan php dan mysql adalah membuat halaman form login dengan HTML terlebih dahulu dan selanjutnya akan dilengkapi dengan skrip php untuk memeriksa data pengguna di database MySQL. Jika pengguna terdapat dalam database MySQL, maka PHP akan membuat session untuk pengguna tersebut dan sekaligus akan mengarahkan pada halaman web yang telah diproteksi. Ikuti Langkah-langkah dibawah ini untuk cara membuat form login sederhana dengan PHP dan database MySQL yang dilengkapi session sesuai konsep diatas. Langkah 1: Membuat Tabel MySQL User/Pengguna Untuk membuat database dan tabel, jalankan kode berikut di software MySQL Anda, bisa menggunakan phpmyadmin atau software kesukaan saya HeidiSQL.

2 Langkah 2: Membuat Form Login HTML Dalam skrip ini kita akan membuat form tempat untuk memasuk-kan username dan password. Ketik-kan skrip berikut untuk membuat Form login dengan skrip HTML yang terdiri dari kolom username, kolom password dan tombol submit. Simpan skrip berikut dalam file dengan nama index.php. Dalam tutorial ini kita menggunakan metode POST, untuk lebih memahami metode form HTML include('login.php'); // Memasuk-kan skrip Login if(isset($_session['login_user'])){ header("location: profile.php");?> <!DOCTYPE html> <html> <head> <title>nyekrip Form Login</title>  <link rel="stylesheet" href="style.css"/> </head> <body> <div class="container"> <div class="main"> <form action="" method="post"> <h2>nyekrip.com FORM LOGIN DENGAN PHP</h2><hr/> <label>username :</label> <input id="name" name="username" placeholder="username" type="text">

3 <label>password :</label> <input id="password" name="password" placeholder="**********" type="password"> <input type="submit" name="submit" id="submit" value="login"> </form> </div> </div> </body> </html> Langkah 3: Membuat Skrip Login Dalam skrip ini kita akan membuat skrip PHP yang bertugas untuk memulai sesi (session) dan memeriksa apakah username dan password yang diberikan terdapat dalam tabel karyawan, jika data tidak ditemukan akan menampilkan pesan Username atau Password belum terdaftar. Ketik-kan skrip berikut dan simpan dalam file dengan nama login.php. session_start(); // Memulai Session $error=''; // Variabel untuk menyimpan pesan error if (isset($_post['submit'])) { if (empty($_post['username']) empty($_post['password'])) { $error = "Username or Password is invalid"; else { // Variabel username dan password $username=$_post['username']; $password=$_post['password']; // Membangun koneksi ke database

4 $connection = mysql_connect("localhost", "root", ""); // Mencegah MySQL injection $username = stripslashes($username); $password = stripslashes($password); $username = mysql_real_escape_string($username); $password = mysql_real_escape_string($password); // Seleksi Database $db = mysql_select_db("tes_db", $connection); // SQL query untuk memeriksa apakah karyawan terdapat di database? $query = mysql_query("select * from karyawan where pass_karyawan='$password' AND user_karyawan='$username'", $connection); $rows = mysql_num_rows($query); if ($rows == 1) { $_SESSION['login_user']=$username; // Membuat Sesi/session header("location: profile.php"); // Mengarahkan ke halaman profil else { $error = "Username atau Password belum terdaftar"; mysql_close($connection); // Menutup koneksi?>

5 Langkah 4 : Membuat Halaman Profil Jika login telah berhasil, maka pengguna akan diarahkan langsung ke halaman profile yang berisi data pribadi user (lihat gambar halaman profil diatas). Dalam halaman ini juga dilengkapi dengan link logout untuk keluar dari halaman sekaligus menghapus session. Ketik-kan skrip berikut dan simpan dalam file dengan nama profile.php. include('session.php');?> <!DOCTYPE html> <html> <head> <title>nyekrip Halaman Khusus</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="profile">

6 <b id="welcome">selamat Datang : <i> echo $login_session;?></i></b> <b id="logout"><a href="logout.php">log Out</a></b> </div> </body> </html> Langkah 5: Membuat Skrip Fungsi Session PHP Skrip ini bertugas untuk mengambil data tentang user dan menampilkan-nya pada halaman profil. Ketik-kan skrip berikut dan simpan dalam file dengan nama session.php. // Membangun Koneksi dengan Server dengan nama server, user_id dan password sebagai parameter $connection = mysql_connect("localhost", "root", ""); // Seleksi Database $db = mysql_select_db("tes_db", $connection); session_start();// Memulai Session // Menyimpan Session $user_check=$_session['login_user']; // Ambil nama karyawan berdasarkan username karyawan dengan mysql_fetch_assoc $ses_sql=mysql_query("select nama_karyawan from karyawan where user_karyawan='$user_check'", $connection); $row = mysql_fetch_assoc($ses_sql); $login_session =$row['nama_karyawan']; if(!isset($login_session)){ mysql_close($connection); // Menutup koneksi header('location: index.php'); // Mengarahkan ke Home Page

7 ?> Langkah 6: Membuat Skrip Fungsi Logout PHP Skrip ini bertugas untuk menghapus semua sesi dan langsung mengarahkan ke halaman utama (index.php) tempat form login berada. Ketik-kan skrip berikut dan simpan dalam file dengan nama logout.php. session_start(); if(session_destroy()) // Menghapus Sessions { header("location: index.php"); // Langsung mengarah ke Home index.php?> Langkah 7: Membuat Skrip CSS Untuk Style Form Login Skrip CSS ini untuk memberikan dan mengatur style HTML pada halaman form login dan halaman profil. Ketik-kan skrip berikut dan simpan dalam file dengan nama style.css..container { width: 50%; margin: 0 auto; h2{ background-color: #53bd84; padding: 30px 35px; margin: -10px -50px; text-align:center; color: #fff; span{ display: block; margin-bottom: 20px; color: red;.success{ display: block; margin-top: 20px; margin-bottom: 0; font-size: 14px; b{ color:green;

8 hr{ margin: 10px -50px; border: 0; border-top: 1px solid #ccc; margin-bottom: 25px; div.main{ width: 306px; padding: 10px 50px 30px; border: 2px solid gray; font-family: raleway; float:left; margin-top:15px; input[type=text]{ width: 96%; height: 25px; padding: 5px; margin-bottom: 25px; margin-top: 5px; border: 2px solid #ccc; color: #53bd84; font-size: 16px; input[type=password]{ width: 96%; height: 25px; padding: 5px; margin-bottom: 25px; margin-top: 5px; border: 2px solid #ccc; color: #53bd84; font-size: 16px; label{ color: #53bd84; text-shadow: 0 1px 0 #fff; font-size: 14px; font-weight: bold; input[type=submit]{ font-size: 16px; background: linear-gradient(#53bd84 5%, #fff 100%); color: #4E4D4B; font-weight: bold; cursor: pointer; width: 100%;

9 padding: 10px 0; outline:none; #profile { padding:50px; border:1px solid grey; font-size:20px; background-color:#a2ded0; #logout { float:right; padding:5px; border:dashed 1px gray a { text-decoration:none; color:#6495ed i { color:#6495ed Simpan semua file HTML, PHP dan CSS dalam satu folder bernama nyekrip-form-login dan letakkan folder tersebut dalam folder htdocs. Folder htdocs terletak dalam folder XAMPP, dalam tutorial ini kami menggunakan XAMPP sebagai web server. Jika anda juga ingin memakai XAMPP Setelah melakukan semua langkah cara membuat form login diatas, sekarang saatnya kita untuk mencoba form login dengan PHP dan MySQL yang dilengkapi session dengan mengetik-kan alamat pada halaman browser. Demikian tutorial cara membuat form login dengan PHP dan MySQL, jika terdapat langkah yang kurang dimengerti, silahkan kirim pertanyaan melalui kolom komentar dibawah ini. Terimakasih. Happy Nyekrip! Sumber :

dokumen-dokumen yang mirip

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL Tutorial Aplikasi Web Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya,