WhatsApp-Button
Membuat Halaman Login Framework CSS

Membuat Halaman Login Framework CSS

  2017-12-20 15:37:41     aknovia     Dibaca 1226 kali

Welcome back, kali ini saya akan membuat halaman login untuk aplikasi portal kita, setelah kemarin kita mengkoneksikan database. Sebelumnya aplikasi portal ini akan dibagi menjadi 2 modul yaitu :

  1. Frontend
    Pada modul ini digunakan untuk menampilkan web kepada user.
  1. Backend
    Pada modul ini digunakan untuk memanajemen aplikasi, secara garis besar bisa dikatakan sebagai admin panel

    Pada kesempatan kali ini kita akan membuat modul backend terlebih dahulu. Kali ini juga akan membuat halaman login yang menggunakan famework css yaitu bootstrap.

Apa itu Bootstrap ?

“Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT. Kita bisa memantau perkembangan proyek Bootstrap melalui web resminya di getbootstrap.com dan Githubnya di http://github.com/twbs/bootstrap</a>.”

Dengan adanya bootstrap ini sangat membantu kita dalam membuat tampilan pada aplikasi kita nanti. Silahkan saja download tampilan template bootstrap yang gratis dan sesuai dengan keinginan kita.

Lets do it cool

Setelah kita download template maka langsung saja ekstrak, maka struktur foldernya akan seperti ini :

Struktur folder ini bisa berbeda dengan bootstrap lainya jadi jangan bingung ya.. pada folder project kita tambah kan folder admin dan didalamnya terdapat folder assets dan controller, disini kita akan membuat admin panel.

Maka struktur folder project kita seperti ini : 

Dan folder admin seperti : 

Copy kan folder pada template yan telah kita instal tadi seperti, Css, Fonts, Images , dan  Js kedalam folder asstes

  1. Css berisikan file untuk mengatur tampilan file ini berekstensikan .css
  2. Fonts berisakan file untuk mengatur fonts pada tmapilan
  3. Images folder yang beriskan gambar dimana semua gambar akan diletakkan didalm folder ini

Js folder yang berisikan javascript

Lalu kita buat file index.php pada folder admin dan kita isikan seperti ini :

Jadi ketika kita akses folder jika session kita kosong maka akan diarahkan ke form login jika tidak maka akan diarahkan ke menu utama. Kemudian kita buat file ‘login.php’berisi tampilan untuk login dan ‘main.php’ untuk halaman utama dan untuk halaman utama tuliskan script dibawah ini.

Main.php
<?php
	session_start();
	echo 'Selamat Datang '.$_SESSION['user']['username'] ;	
?>



Login.php

<!DOCTYPE HTML>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Easy Admin Panel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="assets/css/style.css" rel='stylesheet' type='text/css' />
<!-- Graph CSS -->
<link href="assets/css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<!-- lined-icons -->
<link rel="stylesheet" href="assets/css/icon-font.min.css" type='text/css' />
<!-- //lined-icons -->
<!-- chart -->
<script src="assets/js/Chart.js"></script>
<!-- //chart -->
<!--animate-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="assets/js/wow.min.js"></script>
<script>
	 new WOW().init();
</script>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<!-- Placed js at the end of the document so the pages load faster -->

</head>
<body class="sign-in-up">
<section>
			<div id="page-wrapper" class="sign-in-wrapper">
				<div class="graphs">
					<div class="sign-in-form">
						<div class="sign-in-form-top">
							<p><span>Sign In to</span><a href="index.html">Admin</a></p>
						</div>
						<div class="signin">

							<!-- script untuk menmpilkan error -->
							<?php session_start();
							if(isset($_SESSION['alert'])){

							echo '<div class="alert '.$_SESSION['alert']['alert'].'">';
							echo '<strong>'.$_SESSION['alert']['label'].'</strong> '.$_SESSION['alert']['message'].'';
							echo '</div>';

							session_unset();
							}?>

							<form action='controller/sitecontroller.php' method="post">

							<div class="log-input">
								<div class="log-input">
								<input type="text" class="user" name="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address:';}"/>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="log-input">
								<div class="log-input">
								<input type="password" name="password" class="lock" value="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address:';}"/>
								</div>
								<div class="clearfix"></div>
							</div>

							<center><input type="submit" name="login" value="Login to your account"></center>
						</form>	
						</div>
					</div>
				</div>
			</div>
		<!--footer section start-->
			<footer>
			<p>&copy 2015 Easy Admin Panel. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts.</a></p>
			</footer>
<!--footer section end-->
	</section>
	
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>

Pada form arahkan action ke controllernya sebagai contoh ‘controller/sitecontroller.php’ dan method ‘post’ karena kita akan memparsing data. Kemudian kita buat file ‘sitecontroller.php’ untuk memproses login pada folder controller kemudian tuliskan script seperti dibawah ini :

<?php
session_start();
require "../../config/db.php";

if(isset($_POST['login'])){

	$email = $_POST['email'];
	$password = md5($_POST['password']);

	$query = mysql_query("SELECT * FROM user WHERE email ='$email'");
	$check = mysql_num_rows($query);

	if($check == 0) {
		$_SESSION['alert'] = ['alert' => 'alert-danger', 'message' => 'User Tidak Ditemukan', 'label' => 'Maaf...'];
		return header('location:../login.php');  
	} else {
		$data = mysql_fetch_array($query);

		if($data['password_hash'] != $password){
			$_SESSION['alert'] = ['alert' => 'alert-warning', 'message' => 'Password Yang anda masukkan Salah', 'label' => 'Ops...'];
			return header('location:../login.php');  
		} else {
			$_SESSION['user'] = [
				'id' => $data['id'],
				'username' => $data['username'],
				'role' => $data['role']
			];
			return header('location:../main.php');
		}
	}
} else {
	return header('location:../login.php');  
}


?>

Jika sudah dibuat seperti diatas,  selanjutnya insert secara manual satu user untuk dapat melakukkan login pada database karean kita tidak mebuat register jadi user ini akan menjadi admin.

  • Username = ‘admin’
  • Email = [email protected]
  • Status = 10
  • Role = 1
  • Password_hash = 827ccb0eea8a706c4c34a16891f84e7b (12345)

Jika sudah mari kita tes cool

Buka browser dan masukkan alamatnya ‘localhost/portal/admin’ maka akan muncul tampilan seperti ini :

Masukkan email dan password yan telah kita buat, jika berhasil akan diarah kehalaman utama jika tidak maka akan muncul pesan bahwa email dan password salah. 

Sekian tutorial untuk membuat halaman login dengan framework CSS. Tunggu tutorial selanjutnya yaa. .Happy Coding wink

Penulis : Fajar Rizky Hidayat - Programmer


Sukai/Like Fan Page Facebook Garuda Cyber Indonesia
Subscribe Channel Youtube Garuda Cyber Indonesia
Follow Instagram Garuda Cyber Indonesia
Chat Wa

Signup for Newsletter

Langganan Newsletter dari Garuda Cyber untuk mendapatkan informasi terupdate dari Garuda Cyber Indonesia