Membuat Website Professional dengan PHP MySql - PART #3

Membuat Website Professional dengan PHP MySql - PART #3

Table of contents



Selamat sore menjelang malam.. Tutorial ini adalah lanjutan dari Membuat Website Professional dengan PHP & MySql - PART #1 dan Membuat Website Professional dengan PHP & MySql - PART #2. Pada posting saya sebelumnya di PART #2 khususnya, sudah dibahas tentang membuat database dan tabel user yang nantinya akan mempunyai fungsi untuk login ke halaman admin agar bisa mengelola website professional ini dengan mudah. Mari dimulai...

#1 Koneksi Database

  1. Pastikan XAMPP dalam keadaan running.
  2. Buat sebuah file dengan ektensi php dan beri nama "koneksi.php" (tanpa .php) di text editor anda. 
  3. Copy baris kode php berikut:
    <?php 
    // dengan urutan sbb: "nama host", "username", "password", "nama database"
    $koneksi = mysqli_connect("localhost","root","","hospital");
    
    // Cek Koneksi
    if (mysqli_connect_errno()){
    	echo "Koneksi database gagal : " . mysqli_connect_error();
    }
    ?>​
  4. Kemudian simpan di dalam folder "config", lihat gambar berikut untuk memastikan. 
  5. ok. Koneksi sudah dibuat, saatnya membuat proses login untuk user.

#2 Login Admin



Disini akan menggunakan md5, maksudnya password yang digunakan telah di enkripsi terlebih dulu baik pada saat input maupun pada saat output. Artinya adalah ketika input password user, password tersebut di enkripsi dan tersimpan di dalam database. Ketika akan digunakan untuk login md5, password yang kita tulis juga di enkripsi. Sehingga secara teks, password yang kita tulis sama dengan password user yang tedapat di dalam database.

  1. Akses http://localhost/phpmyadmin pilih database "hospital" dan kemudian tabel user
  2. Insert dan Isi Value dari masing2 column: id biarkan kosong, karena pada posting PART #2 sudah mengisi dengan auto_increment, username: isi tanpa spasi (contoh adityasubawa), password isi value dengan kode enkripsi 202cb962ac59075b964b07152d234b70 adalah hasil enkripsi dari plan teks "123", email isi value dengan email anda.
  3. Buat sebuah file php di text editor anda, kemudian beri nama index.php (tanpa .php) dan simpan di dalam folder admin.
  4. Copy kode berikut dan simpan. 
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Suba Hospital | Admin</title>
    </head>
    <body>
    	<h2>Login Admin</h2>
    	<br/>
    	<!-- pesan -->
    	<?php 
    	if(isset($_GET['pesan'])){
    		if($_GET['pesan'] == "gagal"){
    			echo "Login gagal! username dan password salah!";
    		}else if($_GET['pesan'] == "logout"){
    			echo "Anda telah berhasil logout";
    		}else if($_GET['pesan'] == "belum_login"){
    			echo "Anda harus login untuk mengakses halaman dashboard";
    		}
    	}
    	?>
    	<br/>
    	<br/>
    	<form method="post" action="proses-login.php">
    		<table>
    			<tr>
    				<td>Username</td>
    				<td>:</td>
    				<td><input type="text" name="username" placeholder="username"></td>
    			</tr>
    			<tr>
    				<td>Password</td>
    				<td>:</td>
    				<td><input type="password" name="password" placeholder="password"></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td></td>
    				<td><input type="submit" value="Submit"></td>
    			</tr>
    		</table>			
    	</form>
    </body>
    </html>​
  5. Perhatikan baris kode dibawah, itu artinya anda harus membuat sebuah file baru dengan nama proses-login.php karena baris tersebut akan memproses data yang dikirim dari form oleh proses-login.php 
    <form method="post" action="proses-login.php">​
  6. Buat sebuah file php di text editor anda dan beri nama proses-login.php dan simpan di dalam folder admin, sejajar dengan index.php
  7. Copy kode berikut dan simpan 
    <?php 
    // mengaktifkan session php
    session_start();
    
    // menghubungkan dengan koneksi
    include '../config/koneksi.php';
    
    // menangkap data yang dikirim dari form
    $username = $_POST['username'];
    $password = md5($_POST['password']);
    
    // menyeleksi data admin dengan username dan password yang sesuai
    $data = mysqli_query($koneksi,"select * from user where username='$username' and password='$password'");
    
    // menghitung jumlah data yang ditemukan
    $cek = mysqli_num_rows($data);
    
    if($cek > 0){
    	$_SESSION['username'] = $username;
    	$_SESSION['status'] = "login";
    	header("location:dashboard.php");
    }else{
    	header("location:index.php?pesan=gagal");
    }
    ?>​
  8. Perhatikan baris kode dibawah, itu artinya jika pengecekan data benar/valid maka anda akan diarahkan ke halaman dashboard sebaliknya jika salah anda akan dikembalikan ke halaman login tadi. 
    if($cek > 0){
    	$_SESSION['username'] = $username;
    	$_SESSION['status'] = "login";
    	header("location:dashboard.php");
    }else{
    	header("location:index.php?pesan=gagal");
    }​
  9. Jadi anda memerlukan sebuah file php dengan nama dashboard.php dan simpan di dalam folder admin sejajar dengan index.php dan proses-login.php
  10. Copy kode dashboard berikut dan simpan 
    <!DOCTYPE html>
    <html>
    <head>
        <title>Suba Hospital | Dashboard</title>
    </head>
    <body>
        <h2>Halaman Dashbaord</h2>
        <?php 
    	   // menghubungkan dengan koneksi
            include "../config/koneksi.php";
    		// mengaktifkan session php
            session_start();
            if($_SESSION['status'] !="login"){
                header("location:../");
            }
        ?>
        <h4>Hi <?php echo $_SESSION['username']; ?>! anda telah login.</h4>
        <br/>
        <a href="logout.php">LOGOUT</a>
    </body>
    </html>​
  11. Buat sebuah file baru lagi dan beri nama logout.php dan simpan di dalam folder admin
  12. Copy kode berikut dan simpan 
    <?php 
    // mengaktifkan session
    session_start();
    
    // menghapus semua session
    session_destroy();
    
    // mengalihkan halaman sambil mengirim pesan logout
    header("location:../admin/index.php?pesan=logout");
    ?>​
  13. Coba jalankan yang sudah dibuat pada halaman admin tadi dengan mengakses pada web browser kesayangan anda http://localhost/hospital/admin
  14. Berikut screenshot halaman index.php 
  15. Berikut halaman dashboard, pada posting selanjutnya anda saya arahkan untuk menggunakan file css dan mempercantik tampilan dashboard. 

Oke, pada posting kali ini sudah membuat koneksi ke database dan proses login admin, beberapa kode diatas sudah saya sisipkan comment agar anda bisa mengetahui fungsi2 dari script php diatas. Sampai jumpa di posting selanjutnya, stay strong & stay healthy. 



Artikel Terkait