Tutorial Membuat Login Form Bootstrap Responsive

Bagi pengembang web, bootstrap merupakan kerangka front-end yang sudah tidak asing lagi. Sejak dirilisnya bootstrap pada 19 agustus 2011, sampai saat ini bootstrap masih menjadi primadona untuk menangai berbagai urusan interface website. Selain itu sebelum menjadi kerangka open source, Bootstrap dikenal sebagai Twitter Blueprint.

Bootstrap mempunyai banyak kelebihan. Salah satunya yaitu estimasi waktu jadi lebih cepat. Karena biasaya elemen-elemen yang biasa ada dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh bootstrap, jadi kia tinggal memanggil class-class tersebut dalam them.
Pada kesempatan kali ini Saya akan berbagi tutorial membuat login form bootstrap dengan tampilan yang sedikit menarik.

Tampilan yang akan dihasilkan adalah sebagai berikut :

Langkah 1 – Persiapan Alat dan Bahan

Editor web, Server Local, Browser dan beberapa cemilan. Dalam contoh ini saya menggunakan sublime sebagai text editor web, xampp untuk server local dan google chrome untuk browsernya. Sedangkan untuk cemilannya cukup gorengan yang masih anget yang baru saja saya beli dari burjo deket kos.

Langkah 2 – Desain tampilan

Sebagai langkah ketiga ini kita akan membuat form login. Pastikan Anda telah mengunduh file bootstrap. Jika belum silahkan download disitus resminya getbootstrap.com. Kemudian buatlah sebuah direktori dalam htdocs dengan nama cobalogin. Ekstrak file bootstrap yang telah di unduh tadi lalu pindah kan foler css, js serta fonts kedalam folder assets. Lalu buat File bernama index.php kemudian isikan kode berikut :

<!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>Login</title>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">

<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<link rel="stylesheet" href="assets/css/login.css">

<link rel="stylesheet" href="assets/css/dashboard.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

 <div class="container-fluid">

                <div class="row-fluid" >               

                     <div class="col-md-offset-4 col-md-4" id="box">

                      <h2>Login</h2>

                            <hr>

                                <form class="form-horizontal" action="" method="POST" id="contact_form">

                                    <fieldset>

                                        <!-- Form Name -->

                                        <!-- Text input-->

                                        <div class="form-group">

                                            <div class="col-md-12">

                                                <div class="input-group">

                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

                                                    <input name="username" placeholder="Username" class="form-control" type="text">

                                                </div>

                                            </div>

                                        </div>

                                        <!-- Text input-->

                                        <div class="form-group">

                                            <div class="col-md-12">

                                                <div class="input-group">

                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

                                                    <input name="sandi" placeholder="Password" class="form-control" type="text">

                                                </div>

                                            </div>

                                        </div>

                                        <div class="form-group">

                                            <div class="col-md-12">

                                                <button type="submit" class="btn btn-md btn-danger pull-right">Login </button>

                                            </div>

                                        </div>

                                    </fieldset>

                                </form>

                    </div> 

</div>

        <!-- Javascript -->

        <script src="assets/js/bootstrap.min.js"></script>

        <!--[if lt IE 10]>

            <script src="assets/js/placeholder.js"></script>

        <![endif]-->

</body>

</html>