Cara Membuat Form Login Keren Dengan Framework Bootstrap


alt="cara membuat form login keren dengan framework bootstrap"
Cara Membuat Form Login Keren Dengan Framework Bootstrap. Pada kesempatan yang baik ini, saya akan membahas tentang Cara Membuat Form Login Keren Dengan Bootstrap, yang mana pada pembahasan artikel sebelumnya saya telah membahas mengenai Program Aplikasi Arsip Digital Berbasis Web.

Dalam membuat sebuah aplikasi berbasis web ataupun website itu sendiri biasanya kita memerlukan proses pembuatan form login. Dimana Login merupakan proses yang palin penting dan yang palin di utamakan pada website ata aplikasi web itu sendiri. Login ini adalah sebuah batas pengaman dari data-data yang ada di dalamnya. 

Cara Membuat Form Login Keren Dengan Bootstrap

Form login yang akan kita jadikan turorial ini sebelumnya saya sudah gunakan pada aplikasi yang saya buat yaitu Sistem Informasi Penglolaan Arsip dan Naskah Surat (SIPASNAS) 

Tutorial ini membahas hanya pada cara membuat tampilannya saja dengan modal Framework Bootstrap, pembahasan ini tidak menyeluruh sampai ke database. 

Yang harus di persiapkan dalam Membuat Form Login Keren Dengan Bootsrap yang paling utama yaitu tentu saja framework bootstrap itu sendiri . Pada tutorial ini saya menggunakan Bootstrap premium yang saya dapatkan dari seantheme.com yang mana saya menggunakan Bootstrap Color Admin Versi 3.

Jika anda belum memiliki Framework Bootstrap nya bisa menghubungi saya via nomor WhatasApp ini +62 877-7283-0302 namun jika sudah memilikinya kita lanjutkan ke tahap selanjutnya.  

Patikan sudah anda pasang telebih dahulu framework tersebut di xampp/htdocs anda, silahkan untuk membuat folder baru dengan nama terserah anda. Disini saya membuat folder dengan nama SIPASNAS.

Struktur yang terdapat di dalam folder SIPASNAS tersebut pada tutorial ini yaitu seperti berikut:

SIPASNAS
+ assets
+ restric
   - form-login.php
- index.php

Di dalam folder assets merupakan package library dari framework bootstrap itu sendiri, yang nantinya kita akan panggil class-class yang di perlukan dalam membuat Form Login ini. 

Sedangkat yang terdapat pada folder restrict yaitu page script atau code form-login.php untuk memanggil class-class yang ada pada folder assets sehingga akan menjadi tampilan Form Login yang Keren. 

Cara Membuat Form Login Keren Dengan Bootstrap
Terlebih dahulu kita membuat script untuk page index.php. Silahkan copy dan paste ke alat editor anda script index.php di bawah ini. Kemudian save ke folder htdocs yang anda buat tadi kalau saya masukan ke folder SIPASNAS kemudian save dengan nama index.php

Script index.php

<?php
ob_start();
session_start();
?>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Aplikasi Sistem Informasi Pengelolaan Arsip & Naskah Surat Dinas | SIPASNAS Version 1.0</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />   
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link href="assets/css/style.min.css" rel="stylesheet" />
    <link href="assets/css/style-responsive.min.css" rel="stylesheet" />
    <link href="assets/css/theme/default.css" rel="stylesheet" id="theme" />
    <!-- ================== END BASE CSS STYLE ================== -->   
    <!-- ================== BEGIN BASE JS ================== -->
    <script src="assets/plugins/pace/pace.min.js"></script>
    <script src="assets/plugins/jquery/jquery-2.1.4.min.js"></script>
    <!-- ================== END BASE JS ================== -->
</head>
<body class="pace-top">
    <div id="page-loader" class="fade in"><span class="spinner"></span></div>
    <!-- begin #page-container -->
    <div id="page-container" class="fade">
        <!-- begin login -->
        <?php
            $page = (isset($_GET['page']))? $_GET['page'] : "main";
            switch ($page) {
                case 'login': include "restric/login.php"; break;                               
                default : include "restric/form-login.php";   
            }
        ?>
        <!-- end login -->
    </div>
    <!-- end page container -->
    <!-- ================== BEGIN BASE JS ================== -->
    <script src="assets/plugins/jquery/jquery-1.9.1.min.js"></script>
    <script src="assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
    <script src="assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
        <script src="assets/crossbrowserjs/html5shiv.js"></script>
        <script src="assets/crossbrowserjs/respond.min.js"></script>
        <script src="assets/crossbrowserjs/excanvas.min.js"></script>
    <![endif]-->
    <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
    <!-- ================== END BASE JS ================== -->   
    <!-- ================== BEGIN PAGE LEVEL JS ================== -->
    <script src="assets/js/apps.min.js"></script>
    <!-- ================== END PAGE LEVEL JS ================== -->   
    <script>
        $(document).ready(function() {
            App.init();
        });
    </script>
</body>
</html>

Sekarang kita ke tahap pembuatan script untuk form-login.php nya, berikut adalah script dari form-login.php itu sendiri. Silahkan untuk di copy dan paste ke alat editor yang anda gunakan. Kemudian save ke folder yang anda buat tadi, kalau saya masukan ke folder SIPASNAS – restric kemudian save dengan nama form-login.php

Script from-login.php

<div class="login bg-blue animated fadeInDown">
    <!-- begin brand -->
    <div class="login-header">
        <div class="brand">
            <span class="logo text-theme"><i class="fa fa-windows"></i></span>SIPASNAS
            <small>S I Pengelolaan Arsip & Naskah Surat Ver 1.0</small>
        </div>
        <div class="icon">
            <ul class="chats">
                <li class="right">
                    <span class="image"><img alt="sipas" src="assets/img/logo.png"></span>
                </li>
            </ul>
        </div>
    </div>
    <!-- end brand -->
    <div class="login-content">
        <form action="index.php?page=login&op=in" method="POST"class="margin-bottom-0">
            <div class="form-group m-b-20 has-feedback">
                <input type="text" name="id_user" class="form-control input-lg no-border" placeholder="Username" required /><span class="fa fa-user form-control-feedback"></span>
            </div>
            <div class="form-group m-b-20 has-feedback">
                <input type="password" name="password" maxlength="255" class="form-control input-lg no-border" placeholder="Password" required /><span class="fa fa-lock form-control-feedback"></span>
            </div>
            <div class="checkbox m-b-20">
                <label>
                    <h5><input type="checkbox"/><span class="label">Remember Me</span></h5>
                </label>
            </div>
            <div class="login-buttons">
                <button type="submit" class="btn btn-primary btn-block btn-lg"><i class="fa fa-key"></i> &nbsp;Login</button>
            </div>
        </form>
        </div>
</div>
<?php
    if (isset($_SESSION['pesan']) && $_SESSION['pesan'] <> '') {
    echo "<br /><div class='pesan alert alert-warning col-sm-8 col-sm-offset-2'>
             <span class='close' data-dismiss='alert'>x</span> <i class='fa fa-info fa-2x pull-left'></i> ".$_SESSION['pesan']."
        </div>";
    }
    $_SESSION['pesan'] ="";
?>
<script> // 500 = 0,5 s
    $(document).ready(function(){setTimeout(function(){$(".pesan").fadeIn('slow');}, 500);});
    setTimeout(function(){$(".pesan").fadeOut('slow');}, 7000);
</script>

Jika sudah selesai di buat dan penempatan pembuatan foldernya juga sudah sesuai, silahkan anda untuk melakukan pemanggilan yaitu dengan cara localhost/sipasnas (folder yang anda buat). Maka akan muncul tampilan form login yang sudah Anda buat tesebut.

Bagaimana? Cukup mudah bukan Cara Membuat Form Login Keren Dengan Bootstrap. Mungkin hanya itu tutorial cara membuat form login dengan bootstrap yang bisa saya sampaikan untuk kesempatan kali ini. 

Semoga bemanfaat, silahkan untuk tinggalkan komentar apabila ada yang kurang jelas dari tutorial ini. Terimakasih telah berkunjung. Silahkan untuk di SHARE ya.

Comments