File ekskusinya adalah seperti ini :
dalam bootstrap , sudah di sediakan class untuk membuat Form, bahkan responsive tentunya ,berikut cara membuat nya , yang pertama untuk mulai tutorial ini sediakan:
Sebelum melangkah jauh ke scriptnya kita buat terlebih dahulu databasenya.
Create Database dengan nama datafile kemudian create tabel dengan nama login selanjutnya buat file dengan id username dan password seperti gambar di bawah ini.
Kemudian batkan Password untuk login sebagai admin atau client disini paswornya sudah saya ganti menjadi md5
Oke temen-temen kita langsung aja ke scripnya.
Kemudian Untuk isi setiap folder seperti gambar di bawah ini kiranya sudah jelas.
Log/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Oke sekarang kita akan buat form login.php dan dibawah ini adalah source code nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nongool - Form login</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
<p><br/><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Login Area</h3>
</div>
<form action="validasilogin.php" method="post" accept-charset="utf-8" role="form">
<div class="form-group">
<label for="username">Username</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" placeholder="Enter username" required />
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" name="password" placeholder="Password" required />
</div>
</div>
<hr/>
<a href="#"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> Login</button>
<p>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
Di sini saya sudah menghubungkan file index.php dengan css bootstrap , javascript bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>System File Transfer Protocol (FTP)</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
<p><br/><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Selamat anda berhasil login</h3>
</div>
<a href="login.php"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
Selanjutnya kita buat form validasilogin.php dan dibawah ini adalah source code nya :
Nah dibawah ini adalah untuk tampilan form validasilogin.php nya, jika misalkan teman-teman gagal login nanti akan muncul alert-info nya pada form login tersebut.
<?php
//koneksi ke database
mysql_connect("localhost", "root", "");
mysql_select_db("datafile");
//validasi login
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysql_query("select * from datafile where username='$username' and password='$password'");
$cek=mysql_num_rows($query);
if($cek){
$_SESSION['username']=$username;
header("location:index.php");
}else{
echo'<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>System File Transfer Protocol (FTP)</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body>
<p><br/><br/><br/><br/></p>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Login Area</h3>
</div>
<form action="validasilogin.php" method="post" accept-charset="utf-8" role="form">
<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true"><div class="glyphicon glyphicon-volume-off"></div></span><span class="sr-only">Close</span></button>
Maaf, Username dan password yang anda masukkan tidak cocok. Silahkan coba lagi!
</div>
<form action="validasiid1.php" method="post" accept-charset="utf-8" role="form">
<div class="form-group">
<label for="username">Username</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="username" placeholder="Enter username" required />
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<input type="password" class="form-control" name="password" placeholder="Password" required />
</div>
</div>
<hr/>
<a href="home.php"><button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button></a>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-lock"></span> Login</button>
<p>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery necessary for Bootstrap -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
';
}
?>
Berikut penampakannya jika dijalankan melalui browser:
Sekian tutorial dari saya semoga bermanfaat bagi temen-temen sampai jumpa kembali di tutorial selanjutnya apabila ada masalah bisa kirim pesan melalui coment.
Dan apabila anda mau mengambil sourcodenya bisa anda download di bawah ini.
sangat komplex bangetz,, aku mah enggak ngerti masalah php gitu
ReplyDeletemakasih telah berbagi ilmu
salam kenal yu mari
iya sama-sama,,,makasi ats kunjunganx mbak.
Delete