Template Login Sederhana Dengan Bootstrap
Halaman Login terdapat pada Website Dinamis. Halaman ini adalah ‘pintu’ menuju halaman administrator, atau halaman user jika website-nya merupakan website yang mengharuskan penggunanya mempunyai akun.Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.
Maka Dari itu saya disini akan share membuat template sederhana dengan menggunakan HTML dan Bootstrap. dengan model sederhana :D
oke langsung saja :
1. Download Bootstrap di Website Resmi nya ( cari di google )
2. setelah download selesai silahkan kamu buka XAMPP dan nyalakan Apache untuk web servernya, dan kemudian extract bootstrap kamu yg sudah di download tadi di folder project kamu, misalnya di C:\xampp\htdocs\login . maka nanti akan muncul 3 buah folder css, fonts dan js.
3.folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file - file javascript.
setelah berhasil kamu extract di folder project kamu sekarang buatlah sebuah file dengan nama login.php
<!DOCTYPE HTML>
<html>
<head>
<title>
Login - CODEBARENG.NET
</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
</head>
<body style="background:#3598DC;">
<div id="row" style="margin-top:9pc;">
<div class="col-lg-3 col-lg-offset-4 centered">
<div class="panel panel-default" style="margin-left:3pc;">
<div class="panel-heading">
<h3>Input Data Login</h3>
</div>
<div class="panel-body">
<form>
<input type="text" class="form-control" placeholder="Username" name="user">
<br>
<input type="text" class="form-control" placeholder="Password" name="pass">
<br>
<button class="btn btn-primary btn-md"> SIGN IN</button>
<span class="pull-right" style="padding-top:5px;">
<a href="#">lost your password ?</a>
</span>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Oke Setelah itu Save dan Lihat Hasil nya berikut hasilnya
Atau kamu bisa Download Disini :
blog ini berguna sekali untuk referensi belajar .
ReplyDelete