Membuat Form Login Dengan Bootstrap

Example blog post alt

Bootstrap | 2018-06-02

Bootstrap adalah sebuah framework CSS yang dapat digunakan untuk mempermudah membangun tampilan situs website. Bootstrap pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton pada pertengahan tahun 2010 di Twitter. Bootstrap dikembangkan secara open source dengan lisensi MIT.

Bootstrap telah menyediakan banyak sekali class-class CSS dan Plugin Javascript siap pakai yang dapat membantu mempermudah Kita dalam membuat halaman website. Karena kemudahan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.

Pada kesempatan ini kita akan membahas bagaimana membuat form login dengan design yang responsive untuk semua perangkat. Terlebih dahulu siapkan beberapa hal di bawah ini :

1. Bootstrap, unduh di Bootstrap

2. XAMPP

3. Notepad ++

#Step 1

Extract bootstrap yang telah kita download tadi dalam folder yang telah kita buat di dalam htdocs seperti gambar di bawah ini :

#Step 2

Langkah selanjutnya silahkan buat file index.php yang berisikan script seperti di bawah ini yang disimpan dalam folder yang telah dibuat didalam htdocs :  

<html>
<head>
	<title>Bootstrap</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-4">
		</div>
		<div class="col-sm-4">
		<h2 class="page-header">Form Login Bootstrap</h2>
			<form>
				<div class="form-group">
					<label>Nama</label><br>
					<input type="username" class="form-control" placeholder="Username">
					<label>Password</label><br>
					<input type="password" class="form-control" placeholder="Password">
					<br>
					<button class="btn btn-warning" type="submit">Login</button>
				</div>	
			</form>
		</div>
		<div class="col-sm-4">
		</div>		
	</div>	
</div>
</body>
</html>

Script di atas merupakan integrasi HTML dan Bootstrap untuk menghasilkan form login dengan design yang responsive. Semoga bermanfaat !!

Download Aplikasi