Praktikum Web Semester 8: Part 1
Praktikum Web Semester 8: Part 2
Praktikum Web Semester 8: Part 3
Praktikum Web Semester 8: Part 4
Praktikum Web Semester 8: Part 5

Use Case Diagram untuk praktikum ini

UseCaseDiagram

Class Diagram untuk praktikum ini

ClassDiagram

Tools yang digunakan

  1. Text editor: Visual Studio Code / Sublime / Atom / Notepad++
  2. MySQL
  3. GitHub Desktop
  4. AdminLTE 3.1.0

Download template AdminLTE 3.1.0 kemudian extract.

Buat folder baru pada htdocs dengan nama bebas, sebagai contoh pada project ini menggunakan nama praktikum-penjualan, kemudian pindahkan folder AdminLTE-3.1.0 kedalamnya.

Salin folder dist dan folder plugins ke folder praktikum-penjualan. Salin juga file index.html

Folder1

Coba buka pada localhost/praktikum-penjualan untuk memastikan semua plugin bisa berjalan

AdminLTE

Tambahkan folder dan file-file berikut, untuk sementara biarkan kosong, ubah juga file index.html menjad index.php.

Folder2

Ganti isi file index.php dengan

<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <?php include_once "components/head.php"; ?>
</head>

<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <?php
    include_once "components/navbar.php";
    include_once "components/sidebar.php";
    ?>
    <div class="content-wrapper">
      <?php include_once "routes/routes.php" ?>
    </div>
    <?php include_once "components/footer.php" ?>
  </div>
</body>

</html>

Isi file head.php dengan

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Praktikum Penjualan</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="dist/css/adminlte.min.css">

Isi file navbar.php dengan

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
    </ul>

    <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#">
                <i class="fas fa-th-large"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                <span class="dropdown-item dropdown-header">Pengaturan Pengguna</span>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-key mr-2"></i> Ubah Password
                </a>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-sign-out-alt mr-2"></i> Logout
                </a>
            </div>
        </li>
    </ul>
</nav>

Isi file sidebar.php dengan

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="#" class="brand-link">
        <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">Penjualan</span>
    </a>
    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
            </div>
            <div class="info">
                <a href="#" class="d-block">Admin</a>
            </div>
        </div>
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <li class="nav-item">
                    <a href="?page=home" class="nav-link active">
                        <i class="nav-icon fas fa-home"></i>
                        <p>
                            Home
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="?page=jenisbarangread" class="nav-link">
                        <i class="nav-icon fas fa-cube"></i>
                        <p>
                            Jenis barang
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="?page=barangread" class="nav-link">
                        <i class="nav-icon fas fa-cubes"></i>
                        <p>
                            Barang
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="?page=penggunaread" class="nav-link">
                        <i class="nav-icon fas fa-users"></i>
                        <p>
                            Pengguna
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-copy"></i>
                        <p>
                            Laporan Penjualan
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Penjualan</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>per Jenis Barang</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>per Barang</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>per Pengguna</p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-header">KASIR</li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-shopping-cart"></i>
                        <p>
                            Keranjang Belanja
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="nav-icon far fa-list-alt"></i>
                        <p>
                            Penjualan
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-hand-paper"></i>
                        <p>
                            Pending
                            <span class="badge badge-info right">2</span>
                        </p>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</aside>

Isi file routes.php dengan

<?php
if (isset($_GET['page'])) {
    $page = $_GET['page'];
    switch ($page) {
        case '':
            if (file_exists('pages/home.php')) {
                include 'pages/home.php';
            } else {
                include "pages/404.php";
            }
            break;
        case 'home':
            if (file_exists('pages/home.php')) {
                include 'pages/home.php';
            } else {
                include "pages/404.php";
            }
            break;
        default:
            include "pages/404.php";
            break;
    }
} else {
    include "pages/home.php";
}

Isi file footer.php dengan

<footer class="main-footer">
    <div class="float-right d-none d-sm-block">
        <b>Version</b> 0.1.0
    </div>
    <strong>Copyright &copy; 2021 <a href="https://mirzayogy.github.io">Praktikum Web</a>.</strong> All rights reserved.
</footer>

Isi file scripts.php dengan

<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script src="dist/js/demo.js"></script>

Isi file 404.php dengan

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>404 Error Page</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="?page=home">Home</a></li>
                    <li class="breadcrumb-item active">404 Error Page</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="error-page">
        <h2 class="headline text-warning"> 404</h2>
        <div class="error-content">
            <h3><i class="fas fa-exclamation-triangle text-warning"></i> Oops! Page not found.</h3>
            <p>
                We could not find the page you were looking for.
                Meanwhile, you may <a href="?page=home">return to dashboard</a> or try using the search form.
            </p>
            <form class="search-form">
                <div class="input-group">
                    <input type="text" name="search" class="form-control" placeholder="Search">
                    <div class="input-group-append">
                        <button type="submit" name="submit" class="btn btn-warning"><i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

Isi file home.php dengan

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Blank Page</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item active">Home</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<section class="content">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Title</h3>
        </div>
        <div class="card-body">
            Start creating your amazing application!
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>
</section>

<?php include_once "components/scripts.php" ?>

Berikut preview hasilnya

Preview

Praktikum Web Semester 8: Part 1
Praktikum Web Semester 8: Part 2
Praktikum Web Semester 8: Part 3
Praktikum Web Semester 8: Part 4
Praktikum Web Semester 8: Part 5