Membuat Halaman Login Aplikasi Website Pembayaran SPP

Membuat Halaman Login Aplikasi Pembayaran SPP Bebasis Web 



Halaman Login Siswa :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Siswa | Aplikasi Pembayaran My SPP</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <h4 class="text-center">Login Siswa</h4>
                <div class="card">
                    <div class="card-header">
                    <img src="logo.png" width="100%">
                    </div>
                    <div class="card-body">
                        <form action="proses-login-siswa.php" method="post">
                            <div class="form-group mb-2">
                                <label>NISN</label>
                                <input type="number" name="nisn"
                                class="form-control"
                                placeholder="Masukan Nomor NISN" placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <label>NIS</label>
                                <input type="number" name="nis"
                                class="form-control" placeholder="Masukan nomor NIS"
                                placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <button type="submit" class="btn btn-primary">Login
                                </button>
                            </div>
                            <a href="index2.php">Login Sebagai Admin / Petugas</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Hasil Tampilan Login Siswa:

Halaman Login Petugas :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Admin / Petugas | Aplikasi Pembayaran My SPP</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <h4 class="text-center">Login Admin / Petugas</h4>
                <div class="card">
                    <div class="card-header">
                        <img src="logo.png" width="100%">
                    </div>
                    <div class="card-body">
                        <form action="proses-login-petugas.php" method="post">
                            <div class="form-group mb-2">
                                <label>Username</label>
                                <input type="text" name="username"
                                class="form-control" placeholder="Masukan Username"
                                placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <label>Password</label>
                                <input type="password" name="password"
                                class="form-control" placeholder="Masukan Password"
                                placeholder>
                            </div>
                            <div class="form-group mb-2">
                                <button type="submit" class="btn btn-primary">Login
                                </button>
                            </div>
                            <a href="index.php">Login Sebagai Siswa</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="js/bootstrap.bundle.min.js"></script>    
</body>
</html>

Hasil Tampilan Login Admin/Petugas:

Halaman  Dashboard Admin :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin | Aplikasi Pembayaran My SPP</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">

        <h3>Aplikasi Myspp</h3>
        <div class="alert alert-info">
            Anda Login Sebagai <b>Administrator</b> Aplikasi Myspp
        </div>
        <a href="admin.php" class="btn btn-primary">Administrator</a>
        <a href="admin.php?url=spp" class="btn btn-primary">SPP</a>
        <a href="admin.php?url=kelas" class="btn btn-primary">Kelas</a>
        <a href="admin.php?url=siswa" class="btn btn-primary">Siswa</a>
        <a href="admin.php?url=petugas" class="btn btn-primary">Petugas</a>
        <a href="admin.php?url=pembayaran" class="btn btn-primary">Pembayaran</a>
        <a href="admin.php?url=laporan" class="btn btn-primary">Laporan</a>
        <a href="admin.php?url=logout" class="btn btn-primary">Logout</a>

        <div class="card mt-2">
            <div class="card-body">
                <!-- ini isi web kita -->
                <?php
                $file = @$_GET['url'];
                if(empty($file)){
                    echo"<h4>Selamat Datang Di Halaman Administrator.</h4>";
                    echo"Aplikasi Myspp digunakan untuk mempermudah proses
                    pembarayan siswa disekolah.";
                }else{
                    include $file.'.php';
                }
                ?>
            </div>
        </div>
    </div>

<script src="../js/bootstrap.bundle.min.js"></script>    
</body>
</html>
Hasil Tampilan Dashboard Admin/Petugas :

Tambahkan Perintah php di di halaman admin untuk hak aksess
<?php
session_start();
if(empty($_SESSION['id_petugas'])){
    echo"<script>
    alert('Maaf Anda Belum Login');
    windows.location.assign('../index2.php');
    </script>";
}
if($_SESSION['level']!='admin'){
    echo"<script>
    alert('Maaf Anda Bukan Sesi Admin');
    windows.location.assign('../index2.php');
    </script>";
}
?>

Perintah koneksi database :
<?php

$koneksi = mysqli_connect('localhost','root','','myspp');

if(!$koneksi){
    echo"Koneksi Anda Gagal";
}

Halaman Proses  Login admin Petugas :
<?php

$username = $_POST['username'];
$password = $_POST['password'];

include 'koneksi.php';
$sql = "SELECT*FROM petugas WHERE username='$username' AND password='$password'";
$query = mysqli_query($koneksi, $sql);
if(mysqli_num_rows($query)>0){
    $data = mysqli_fetch_array($query);
    session_start();
    $_SESSION['id_petugas'] = $data['id_petugas'];
    $_SESSION['nama_petugas'] = $data['nama_petugas'];
    $_SESSION['level'] = $data['level'];
    if($data['level']=='admin'){
        header('Location:admin/admin.php');
    }elseif($data['level']=='petugas'){
        header('Location:admin/petugas.php');
    }
}else{
    echo"<script>
    alert('Maaf Login Gagal, Silahkan Ulangi Lagi');
    windows.location.assign('index2.php');
    </script>";
}

Perintah Logout :
<?php
session_start();
session_destroy();
header("Location:../index2.php");

?>