Aplikasi

Wednesday, 20 December 2017 aknovia dibaca 5671 kali

Membuat Halaman Login Framework CSS

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 :

Frontend
Pada modul ini digunakan untuk menampilkan web kepada user.

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

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

Css berisikan file untuk mengatur tampilan file ini berekstensikan .css
Fonts berisakan file untuk mengatur fonts pada tmapilan
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 &singlequote;Selamat Datang &singlequote;.$_SESSION[&singlequote;user&singlequote;][&singlequote;username&singlequote;] ;	
?>



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=&singlequote;stylesheet&singlequote; type=&singlequote;text/css&singlequote; />
<!-- Custom CSS -->
<link href=assets/css/style.css rel=&singlequote;stylesheet&singlequote; type=&singlequote;text/css&singlequote; />
<!-- 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=&singlequote;text/css&singlequote; />
<!-- //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[&singlequote;alert&singlequote;])){

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

							session_unset();
							}?>

							<form action=&singlequote;controller/sitecontroller.php&singlequote; method=post>

							<div class=log-input>
								<div class=log-input>
								<input type=text class=user name=email value=Email onfocus=this.value = &singlequote;&singlequote;; onblur=if (this.value == &singlequote;&singlequote;) {this.value = &singlequote;Email address:&singlequote;;}/>
								</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 = &singlequote;&singlequote;; onblur=if (this.value == &singlequote;&singlequote;) {this.value = &singlequote;Email address:&singlequote;;}/>
								</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[&singlequote;login&singlequote;])){

	$email = $_POST[&singlequote;email&singlequote;];
	$password = md5($_POST[&singlequote;password&singlequote;]);

	$query = mysql_query(SELECT * FROM user WHERE email =&singlequote;$email&singlequote;);
	$check = mysql_num_rows($query);

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

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


?>

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 = supportemail@example.com
Status = 10
Role = 1
Password_hash = 827ccb0eea8a706c4c34a16891f84e7b (12345)

Jika sudah mari kita tes

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

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

Technologi

Saturday, 17 November 2018 Ulti Desi Arni dibaca 284392 kali

Pengertian Entitas Dan Atribut Dalam Basis Data

Basis data ialah kumpulan data yang berhubungan antra satu data dengan data yang lain nya yang di gunakan oleh software atau perangkat lunak dan di simpan di dalam hardware atau perangkat keras. Basis data mempunyai tujuan utama dan prinsip utama. Tujuan utama nya ialah menolong atau membantu pengguna dalam abstraksi pada sebuah sistem yang terdiri atas : ...

Definisi Struktur Kontrol Perulangan Dalam Pemrograman Dan Contohnya

Pada dasarnya perulangan pada pemrograman yang sama dengan perulangan bahasa pemrograman lainnya. Struktur kontrol perulangan yang dipakai memilki suatu fungsi dari program yang akan dijalankan secara berulang. Contohnya anda ingin membuat tampilan nama anda sebanyak 100 kali, tentu akan sangat lama jika anda menuliskan kode program secara dengan manual. Dengan struktur kontrol perulangan bisa menampilkan dengan nama sebanyak 100 kali...

Membuat Halaman Login Framework CSS

Artikel Terpopuler

Pengertian Entitas Dan Atribut Dalam Basis Data

Definisi Struktur Kontrol Perulangan Dalam Pemrograman Dan Contohnya