Membuat halaman login dengan php dan bootstrap


Membuat halaman dengan php adalah salah satu tutorial bagai mana cara kita membuat halaman login di website kita, dimana seperti yang kita ketahui banyak situs-situs yang mengharuskan kita untuk login terlebih dahulu untuk dapat mengakses secara penuh website tertentu. Mengapa halaman login sangatlah penting? Halaman login php merupakan fitur penting untuk menangani HAK AKSES. Hak Akses berfungsi sebagai pembeda atau pembatasan akses dari sebuah aplikasi berbasis web antara admin,operator  dan user biasa. Dalam tutorial php kali ini serba coding akan berkolaborasi dengan framework bootstrap sebagai front-end agar halaman login kita lebih menarik selain itu kita bisa belajar bootstrap secara langsung dalam tutorial membuat halaman login ini.

Membuat halaman login dengan PHP dan Bootstrap 

Sebagai langkah pertama kita akan belajar membuat form login dengan bootstrap. Karena tema kita kali ini selain membuat form login dengan php kita juga belajar bootstrap jadi kita buat template form loginnya dulu
1. Download terlebih dahulu bootstrapnya disini.
2. Buatlah folder baru pada direktori htdocs dengan nama contoh atau sesuai dengan kenginginan anda.
3. Ekstrak Bootstrap yang sudah kita download tadi kemudian pindahkan folder css, js, dan fonts ke folder assets

Langkah kedua: buat lah sebuah database dengan nama "contoh" atau sesuai dengan keinginan anda, lalu dalam database tersebut buatlah sebuah tabel dengan nama "user", untuk struktur dari tabel tersebut adalah sebagai berikut:

Langkah ketiga: setelah kita kita membuat database, selanjutnya kita akan membuat file baru di dalam folder config dengan nama config.php, selanjutnya ketikan script dibawah ini:
<?php
 mysql_connect("localhost","root","") or die(mysql_error());
 mysql_select_db("db_test") or die(mysql_error());
?>
Langkah keempat: buka file login.php dan isikan dengan script berikut. Dan untuk mendalami bagaimana cara menggunakan bootstrap dengan php kalian bisa mempelajarinya di cara menggunakan bootstrap dan untuk memahami system grid atau layouting kalian bisa membaca belajar bootstrap grid system.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>login</title>
 <!-- BOOTSTRAP STYLES-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FONTAWESOME STYLES-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    <link href="assets/css/custom.css" rel="stylesheet" />
     <!-- GOOGLE FONTS-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

</head>
<body>
    <div class="container">
        <div class="row text-center ">
            <div class="col-md-12">
                <br /><br />
                <h2> Halaman Login</h2>
               
                 <br />
            </div>
        </div>
         <div class="row ">
               
                  <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                        <strong>  Login </strong>  
                            </div>
                            <div class="panel-body">
                                <form enctype="multipart/form-data" id="form_login" role="form" method="POST">
                                     <div class="form-group has-feedback">
                                        <label for="user">Username</label>
                                        <input type="text" name="user" id="user" placeholder="Username" class="form-control textbox" >
                                        <i class="form-control-feedback"></i>
                                        <span class="text-danger" ></span>
                                    </div>
                                    <div class="form-group has-feedback">
                                        <label for="pass">Password</label>
                                        <input type="password" name="pass" id="pass" placeholder="Password" class="form-control textbox" >
                                        <i class="form-control-feedback"></i>
                                        <span class="text-danger" ></span>
                                    </div>
                                    <button type="submit" id="btnLogin" name="btnLogin" class="btn btn-primary">Login</button>
                                    <a href="#">Lupa Password?</a>
                                    </form>
                            </div>
                           
                        </div>
                    </div>
                
                
        </div>
    </div>
</body>
</html>
<?php
    include 'config/config.php';
    if (isset($_POST['btnLogin'])) {
        $user = $_POST['user'];
        $pass = $_POST['pass'];
        if ($user == "" || $pass == "") {
            ?> <script type="text/javascript">alert("Username / Password tidak boleh kosong");</script> <?php
        } else{
            $sql = mysql_query("select * from user where username ='$user' and password =md5('$pass')") or die(mysql_error());
            $data = mysql_fetch_array($sql);
            $cek = mysql_num_rows($sql);
            if ($cek >= 1) {
                if($data['level'] == "admin"){
                        @$_SESSION['admin'] = $data['kode_user'];
                        header("location: index.php");
                }else if($data['level'] == "user"){
                        @$_SESSION['user'] = $data['kode_user'];
                        header("location: user/index.php");
                }
            } else{
                echo "gagal";
            }
        }
    }
?>
sekian tutorial kita kali ini, dan tutorial ini akan berlanjut untuk kedepanya senghingga menjadi apikasi pengeololan keuangan , jadi ikut terus tutorial-tutorial dari serba coding, 
untuk tutorial di atas silahkan download disini.

0 Response to "Membuat halaman login dengan php dan bootstrap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel