contoh

Membuat Login Dengan PHP dan MySQLi

Persiapan

Untuk memulai tutorial dan project membuat login dengan PHP dan MySQLi seperti contoh ini, silahkan membuat folder baru dengan nama login pada direktori localhost teman-teman.
Buat sebuah databse baru dengan nama akademin kemudian buat sebuah tabel baru dengan nama admin

selanjtnya isikan data admin. Untuk data contoh saja, untuk contoh akun admin yang akan login , isikan username nya 'admin', dan passwordnya 'admin123'.

persiapan di database selesai

Membuat Koneksi Database

Buat sebuah file baru dengan nama koneksi.php dan simpan di folder login yang telah kita buat.

koneksi.php

1
2
3
4
5
6
7
8
9
<?php 
$koneksi = mysqli_connect("localhost","root","","akademik");
 
// Check connection
if (mysqli_connect_errno()){
	echo "Koneksi database gagal : " . mysqli_connect_error();
}
 
?>

silahkan teman-teman isi sendiri nama database nya sesuai nama database yang teman-teman buat, karena disini kita akan menggunakan databse akademik, maka nama database nya akademik.

Sampai disini koneksi database php dan mysqli telah selesai kita buat.

Selanjutnya akan kita buat halaman login sederhana untuk tempat admin memasukan username dan password kemudian di alihkan ke halama admin.

Akan kita bahas pada tutorial membuat login dengan PHP dan MySQLi part 2.

LANJUT KE PART 2.

Membuat Select Menu Dengan JQuery UI

Select menu atau yang biasa kita buat adalah dengan HTMI adalah form select option, kali ini kita membuat Select menu dengan JQuery UI.

Caranya sangat mudah , kita hanya membuat kerangka form option seperti biasa dan hanya memberikan fungsi selectmenu() jquery UI, perhatikan contoh berikut ini:

selectmenu.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
	<title>JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI</title>	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Membuat Select Menu Dengan JQuery UI | www.malasngoding.com</h1>	
	
	<div class="demo">		
		<form action="#">
			<fieldset>
				<label for="tutorial">Pilih tutorial</label>
				<select name="tutorial" id="tutorial">
					<option>AngularJS</option>
					<option>NodeJS</option>
					<option selected="selected">JQuery UI</option>
					<option>JQuery Mobile</option>
					<option>JQuery</option>
				</select>
			</fieldset>
		</form>
	</div>
 
</body>
<script type="text/javascript">
	$(document).ready(function(){
		
		$( "#tutorial" ).selectmenu();		
		
	});
</script>
</html>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body{
	font-family: sans-serif;
}
 
h1{
	text-align: center;
}
 
fieldset{
	border: 0;
}
label{
	display: block;
	margin: 30px 0 0 0;
}
select{
	width: 200px;
}

dan hasilnya

jquery UI

bisa teman-teman perhatikan , pertama buat kerangka select option html nya, ohya pada element kita harus memberikan class atau id, disini saya memberikan id ,.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="demo">		
	<form action="#">
		<fieldset>
			<label for="tutorial">Pilih tutorial</label>
			<select name="tutorial" id="tutorial">
				<option>AngularJS</option>
				<option>NodeJS</option>
				<option selected="selected">JQuery UI</option>
				<option>JQuery Mobile</option>
				<option>JQuery</option>
			</select>
		</fieldset>
	</form>
</div>

dan langsung kita berikan function selectmenu() yang telah di sediakan oleh jquery UI

1
2
3
4
5
6
7
<script type="text/javascript">
	$(document).ready(function(){
		
		$( "#tutorial" ).selectmenu();		
		
	});
</script>

jika teman-teman ingin melakukan custom pada select menunya teman-teman bisa langsung membaca panduan resmi jquery ui untuk membuat selectmenu dengan jquery ui

See the Pen Membuat Select Menu Dengan JQuery UI by Budiatu (@budiatu1) on CodePen.

contoh

Animation Movies

Action Movies

Comedy Movies

Animation Movies

Action Movies

Featured Movies

Browse All

bb

Membuat Login Dengan PHP dan MySQLi

Membuat Koneksi Database

aa

Membuat Select Menu Dengan JQuery UI