Hallo sobat Ruang IT..
Kali ini saya akan membagikan tutorial tentang bagaimana membuat form login dengan menggunakan salah satu framework html, css yaitu bootstrap. Menurut saya bootstrap adalah salah satu framework html,css terbaik karena selain mudah digunakan juga tampilan yang dihasilkan responsif sehingga memungkinkan hasil tampilan web bisa dibuka di berbagai perangkat seperti komputer,notebook, dan smartphone karena tampilan pada bootstrap akan mengikuti perangkat apa yang digunakan.
Oke tanpa basa basi langsung saja kita meluncur ke TKP (Saya asumsikan sobat sudah mempunyai web server dan text editor, serta bisa menggunakannya)..
1. Buat 1 folder di localhost dengan nama "login_form"
2. Buat 1 file di dalam folder dengan nama "index.php"
3. Masuk ke situs getbootstrap.com atau klik disini
4. Klik Download -> Scroll sedikit ke bawah -> klik "Download" pada Compiled CSS and JS (Lihat gambar dibawah)
5. Setelah proses download selesai, Extract file hasil download yang berbentuk .rar sehingga akan memunculkan 2 folder yaitu "css" dan "js".
6. Copy kedua folder tersebut (css dan js) ke dalam folder "login_form" yang telah kita buat pada langkah nomor 1 (satu folder dengan file index.php) sehingga hasilnya seperti gambar di bawah ini :
7. Copy kan script di bawah ini di dalam "index.php"
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<title>Login Form</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<!-- Panel Login -->
<div class="col-md-4">
<div class="panel panel-primary" style="margin-top:50px">
<div class="panel-heading">
<h3 class="panel-title">Login Administrator</h3>
</div>
<div class="panel-body">
<form method="post">
<b>Username :
<input type="text" name="username" class="form-control" />
<b>Password :
<input type="password" name="password" class="form-control" /><br />
<button name="submit" type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<!-- Panel Login -->
<div class="col-md-4">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<title>Login Form</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<!-- Panel Login -->
<div class="col-md-4">
<div class="panel panel-primary" style="margin-top:50px">
<div class="panel-heading">
<h3 class="panel-title">Login Administrator</h3>
</div>
<div class="panel-body">
<form method="post">
<b>Username :
<input type="text" name="username" class="form-control" />
<b>Password :
<input type="password" name="password" class="form-control" /><br />
<button name="submit" type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<!-- Panel Login -->
<div class="col-md-4">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
8. Jalankan "login_form" maka hasilnya akan seperti gambar di bawah ini :
Membuat Form Login Dengan Bootstrap
Reviewed by Unknown
on
Januari 09, 2018
Rating:
Reviewed by Unknown
on
Januari 09, 2018
Rating:
Tidak ada komentar: