Template Login From dengan Bootstrap

Onphpid – Baiklah pada tutorial php cara membuat website bagian ke 5 kita akan membuat template form login dengan bootstap agar halaman login terlihat cantik sehingga enak dipandang dengan memanfaatkan fitur bootstrap, form login akan lebih mudah dibuat dibandingkan kita membuat template sendiri. Perlu diketahui bahwa tamplian merupakan nilai plus pada pembuatan website karena berpengaruh pada pengguna saat menggunakan website yang kita buat.

Mungkin kalian perlu membaca tutorial Membuat Form login dengan bootstrap dan PHP sebelum melanjutkan cara membuat website bagian kedua.

Cara Membuat Website bagian Kedua

Sebelum kita lanjutkan ada baiknya kalian baca (bagi yang belum membaca) tutorial php cara membuat website bagian ke empat bagi yang belum membacanya. Karena tutorial php ini adalah lanjutan dari tutorial sebelumnya atau dengan kata lain ini adalah tutorial php cara membuat website series. Nah pada bagian ini kita memerlukan framework css dari bootstrap karena kita akan belajar bootstrap dan dapat kalian download dari situs bootstrap secara langsung. Setelah didownload silahkan ekstrak di folder assets yang sudah dibuat sebelumnya. Dan selanjutnya download jQuery dari google library atau situs jQuery langsung. Dan buatlah folder atau direktori baru di dalam assets dengan nama jquery, hal ini dilakukan agar file dan folder dapat terorganisir dengan baik.

Untuk langkah-langkah membuat website kita akan memulai dengan membuat file login.css pada folder assets dan bisa dibiarkan kosong. File login.css ini akan kita gunakan untuk menambah style custom selain bootstrap, sehingga kita tidak perlu merubah-rubah isi dari bootstrap sendiri, tentunya ini mempermudah kita dalam membuat website.

Berikut struktur direktori yang baru setelah kita tambah dengan bootstrap:

Langkah kedua silahkan ganti script yang ada di dalam file login.php dengan scrpit berikut:

<?php
/**
 * Cara Membuat Website
 */
?>
<!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>Halaman Login</title>
<link rel="stylesheet" href="./../assets/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./../assets/login.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-4 col-md-4 login-from">
            <h4><em class="glyphicon glyphicon-log-in"></em>  Halaman Login</h4>
            <?php
            /**
             * Pesan Error Bila terjadi kegagalan dalam login
             */
            if (isset($_GET['error']) && $_GET['error'] == 'salah') {
                echo '<div class="alert alert-warning alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>Wrong ! </strong> Username dan Password tidak ditemukan
                       </div>';
            }?>
            <form action="check-login.php" method="post">
                <div class="form-group">
                    <label for="">Username</label>
                    <input type="text" class="form-control" name="username" placeholder="Username"/>
                </div>
                <div class="form-group">
                    <label for="">Password</label>
                    <input type="password" class="form-control" name="password" placeholder="Password" />
                </div>
                <div class="text-right">
                    <button class="btn btn-primary">Login</button>
                </div>
            </form>
            <p class="return-home"><a href="./../"><em class="glyphicon glyphicon-menu-left"></em>Halaman Depan</a></p>
        </div>
    </div>
</div> <!-- End container -->
    <!-- Script js -->
    <script src="./../assets/jquery/jquery.min.js"></script>
    <script src="./../assets/bootstrap/js/bootstrap.min.js"></script>
    <!-- End Script -->
</body>
</html>

<?php

/**

* Cara Membuat Website

<!DOCTYPE html>

<head>

<title>Halaman Login</title>

</head>

<body>

<h4><em class="glyphicon glyphicon-log-in"></em> Halaman Login</h4>

<?php

/**

* Pesan Error Bila terjadi kegagalan dalam login

if (isset($_GET['error']) && $_GET['error'] == 'salah') {

echo '<div class="alert alert-warning alert-dismissible" role="alert">

<strong>Wrong ! </strong> Username dan Password tidak ditemukan

</div>';

}?>

<label for="">Username</label>

</div>

<label for="">Password</label>

</div>

<button class="btn btn-primary">Login</button>

</div>

</form>

<p class="return-home"><a href="./../"><em class="glyphicon glyphicon-menu-left"></em>Halaman Depan</a></p>

</div>

</div>

</body>

</html>

Dapat kita lihat pada tutorial bootstrap di atas bahwa yang kita ambil adalah bootstrap.min.css, hal ini dilakukan agar website yang kita buat lebih ringan, karena ukuran bootstrap.min.css lebih kecil dari bootstrap.css. Kemudian dibawahnya kita letakkan login.css hal ini dilakukan agar selector yang sudah diset pada bootstrap ter-reset sehingga memiliki properti yang baru.

Pada line berikutnya kita juga menggunakan jquery.min.js yang bisa diperoleh dari google library atau situs jquery sendiri, karena script bootstrap.min.js tidak bisa berjalan tanpa jquery.min.js tersebut. Dan karena itu juga jquery.min.js ini diletakan di atas bootstrap.min.js. dan kenapa diletakkan di atas tag </body>. Hal ini dilakukan agar browser membaca script js ini belakangan sehingga tidak mengganggu script css-nya.

Kemudian pada file login.css di isi dengan script css berikut :

.login-from {
    margin-top: 80px;
    border: 1px solid #ddd;
}
.login-from h4 {
    font-size: 26px;
    margin-bottom: 20px;
    margin-top: 20px;
}
p.return-home {
    margin: 20px 0;
}

.login-from {

margin-top: 80px;

border: 1px solid #ddd;

}

.login-from h4 {

font-size: 26px;

margin-bottom: 20px;

margin-top: 20px;

}

p.return-home {

margin: 20px 0;

}

Adapun fitur – fitur dari bootstrap yang kita pergunakan dalam template login, seperti css form , glyphicon dan grid system yang memungkinkan template website yang kita buat responsive. Artinya dapat menyesuaikan ukuran layar baik layar Monitor, Laptop, Tablet maupun mobile.

Contoh CSS From dari bootstrap adalah “.form-control” dibaca class form-control yang peruntukan untuk tag input dan select kemudian .btn sebagai style button (tombol). Di dalam bootstrap tersedia .btn-primary, .btn-warning, .btn-danger, dan .btn-success.

Sedangkan untuk grid system bootstrap kita menggunakan .col-md-4 dan .col-md-offset-*. Artinya ruang dalam tag div lebarnya akan dibagai 4 dari totalnya yakni 12. Dan glyphicon adalah icon-icon yang sengaja disediakan oleh bootstrap agar kita lebih mudah dan tidak perlu susah-susah mencari icon untuk website kita. Nah di sini kita tidak akan membahas terlalu banyak tetang bootstrap kalian bisa membaca dokumentasi secara langsung di getbootstrap.com atau baca Belajar Bootstrap: Mengenal System Grid Bootstrap 3.

Untuk menguji hasil membuat form login kita, silahkan buka http://localhost/website/admin

kurang lebih hasil seperti ini

Sekian dulu tutorial php cara membuat website bag. Mempercantik halaman login dengan bootstrap nantikan tutorial cara membuat website berikutnya dan jangan lupa untuk LIKE FANS PAGE onphpid untuk info lebih lanjut. Serta jangan lupa komentarnya.