Hallo teman ..
Kali ini aku akan membagikan tutorial perihal bagaimana menciptakan form login dengan memakai salah satu framework html, css yaitu bootstrap. Menurut aku bootstrap ialah salah satu framework html,css terbaik alasannya ialah selain gampang dipakai juga tampilan yang dihasilkan responsif sehingga memungkinkan hasil tampilan web dapat dibuka di banyak sekali perangkat menyerupai komputer,notebook, dan smartphone alasannya ialah tampilan pada bootstrap akan mengikuti perangkat apa yang digunakan.
Oke tanpa basa bau pribadi saja kita meluncur ke TKP (Saya asumsikan teman sudah memiliki web server dan text editor, serta dapat 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 karenanya menyerupai 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 karenanya akan menyerupai gambar di bawah ini :
