Tutorial PHP : #25 Membuat Aplikasi Perpustakaan Berbasis Web dengan PHP Mulai dari Nol

Pada saat ini akan saya akan tampilkan cara membuat Aplikasi Perpustakaan berbasis web dengan PHP mulai dari nol, berikut tahapan-tahapannya :

  1. Buat layout halaman web

Contoh seperti berikut :

  1. Buat folder project dalam htdocs dengan nama perpustakaan.
  2. Dalam folder perpustakaan tersebut buat folder admin, css dan images. Folder admin digunakan untuk menyimpan file-file php dan lain-lain untuk kepeluan admin, css digunakan untuk menyimpan file css, sedangkan folder images digunakan untuk menyimpan file-file gambar.
  3. Buat file index.php dalam folder perpustakaan tersebut.
  4. Berdasarkan dari gambar layout ada 7 bagian, bagian 2,3,4 dan 7 merupakan bagian dari 1, sedangkan bagian 5 dan 6 bagian dari 4. Maka kita buat satu file php yang disimpan di dalam folder admin dan diberi nama index.php. Dalam file index.php tersebut buat sintak menggunakan div seperti berikut :

    <!DOCTYPE html>
    <html>
        <head>
            <title>Perpustakaan | SMK Negeri 1 Cimahi</title>
            <link rel="stylesheet" type="text/css" href="../css/style.css">
        </head>
    
        <body>
            <div>
                <div>
                </div>
    
                <div>
                </div>
    
                <div>
                    <div>
                    </div>
    
                    <div>
                    </div>
                </div>
    
                <div>
                </div>
            </div>
        </body>
    </html>
  5. Pada folder css kita buat file dengan nama style.css, isi dengan sintak seperti berikut :
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    /*Style untuk header*/
    .wraper {
      margin: 20px 20px 20px 20px;
    }
    
    /*Style untuk header*/
    .kepala {
      background-color: green;
      text-align: center;
      color: white;
      height: 300px;
    }
    
    .menu {
      background-color: rgb(117, 227, 241);
      color: #292020;
      height: 50px;
      vertical-align: middle;
      margin: 10px 0px 10px 0px;
    }
    
    .list_menu {
      float: left;
      margin: 0px;
      padding: 10px;
      width: 100%;
    }
    
    .list_menu li {
      padding: 10px;
      height: auto;
      list-style-type: none;
      float: left;
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: #ffffff;
      width: auto;
      text-align: center;
    }
    
    .list_menu li a {
      text-decoration: none;
    }
    
    .list_menu li a:hover {
      font-weight: bold;
      color: #h1h1h1;
      text-shadow: 0px 0px 2px #000;
    }
    
    .list_menu li:hover {
      background-color: #ffffff;
    }
    
    /*Style untuk sidebar*/
    .sisikiri {
      float: left;
      width: 20%;
      height: 600px;
      background: rgb(90, 87, 87);
      padding: 20px;
      color: white;
    }
    
    /*Style untuk list pada sidebar*/
    .sisikiri ul {
      list-style-type: none;
      padding: 0;
    }
    
    /*Style untuk link pada sidebar*/
    .sisikiri a {
      color: yellow;
    }
    
    /*Style untuk konten*/
    .konten {
      float: left;
      padding: 20px;
      width: 80%;
      background-color: #f1f1f1;
      height: 600px;
    }
    
    /*Style untuk footer*/
    .kaki {
      clear: both;
      background-color: rgb(117, 227, 241);
      padding: 10px;
      text-align: center;
      color: black;
      height: 100px;
    }
    

     

  6. Kita coba akses web tersebut dengan alamat http://localhost/perpustakaan/admin sehingga hasilnya seperti berikut :
  7. Selanjutnya kita tambahkan menu, gambar dan tulisan lain yang kita perlukan pada web tersebut. Kita simpan satu file gambar dengan ukuran lebar 800px dan tinggi 300px denagn nama header.jpg ke folder images. Buka kembali file index.php yang ada pada folder admin kita ubah menjadi seperti berikut :
    <!DOCTYPE html>
    <html>
        <head>
            <title>Perpustakaan | SMK Negeri 1 Cimahi</title>
            <link rel="stylesheet" type="text/css" href="../css/style.css">
        </head>
    
        <body>
            <div>
                <div class="kepala">
                    <img src="../images/header.jpg" height="100%" width="100%">
                </div>
    
                <div class="menu">
                    <ul class="list_menu">
                        <li><a href="index.php?page=home">Home</a></li>
                        <li><a href="index.php?page=buku">Data Buku</a></li>
                        <li><a href="index.php?page=siswa">Siswa</a></li>
                        <li><a href="index.php?page=pinjam">Peminjaman</a></li>
                        <li><a href="index.php?page=petugas">Petugas</a></li>
                    </ul>
                </div>
    
                <div>
                    <div class="sisikiri">
                        <h2>Visi</h2>
                        <p>
                            "Terwujudnya Indonesia Cerdas Melalui Gemar Membaca Dengan Memberdayakan Perpustakaan"
                        <p>
                        <p>
                        <h2>Misi</h2>
                        <ol>
                            <li>Terwujudnya layanan prima</li>
                            <li>Terwujudnya perpustakaan sebagai pelestari khazanah budaya bangsa</li>
                            <li>Terwujudnya perpustakaan sesuai standar nasional perpustakaan</li>
                        </ol>
                    </div>
    
                    <div class="konten">
                        Ini halaman konten
                    </div>
                </div>
    
                <div class="kaki">
                    Copyright @2022 | SMK Negeri 1 Cimahi
                </div>
            </div>
        </body>
    </html>

    Kita coba akses melalui browser dengan alamat http://localhost/perpustakaan/admin dan hasilnya seperti berikut :

  8. Dari hasil tersebut menu-menu sudah terbuat, selanjutnya kita buat file-file php untuk menampilkan halaman pada masing-masing menu tersebut. Kita buat dulu folder dengan nama halaman di dalam folder admin, dalam folder halaman tersebut kita buat file yang bernama home.php, dan beberapa folder dengan nama folder buku, siswa, petugas dan pinjam. Dalam folder buku kita buat file baru dengan nama buku.php. Dalam folder siswa kita buat file baru dengan nama siswa.php. Dalam folder petugas kita buat file baru dengan nama petugas.php dan dalam folder pinjam kita buat file baru dengan nama pinjam.php dan .
  9. Perhatikan sintak pada file index.php :
    <div class="menu">
        <ul class="list_menu">
            <li><a href="index.php?page=home">Home</a></li>
            <li><a href="index.php?page=buku">Data Buku</a></li>
            <li><a href="index.php?page=siswa">Siswa</a></li>
            <li><a href="index.php?page=pinjam">Peminjaman</a></li>
            <li><a href="index.php?page=petugas">Petugas</a></li>
        </ul>
    </div>

    Pada sintak tersebut, masing-masing menu akan diarahkan pada alamat index.php?page=xxx.

  10. Pada bagian konten kita ubah menjadi seperti berikut :
    <div class="konten">
        <?php
        if (isset($_GET['page'])) {
            $page = $_GET['page'];
            switch ($page) {
                case 'home':
                    include "halaman/home.php";
                    break;
                case 'buku':
                    include "halaman/buku/buku.php";
                    break;
                case 'siswa':
                    include "halaman/siswa/siswa.php";
                    break;
                case 'pinjam':
                    include "halaman/pinjam/pinjam.php";
                    break;
                case 'petugas':
                    include "halaman/petugas/petugas.php";
                    break;
                case 'bukutambah':
                    include "halaman/buku/bukutambah.php";
                    break;
                default:
                    echo "Maaf halaman yang anda tuju tidak ada";
                    break;
            }
        }
        ?>
    </div>

    Pada bagian konten tersebut menggunakan logika if (isset($_GET[‘page’])) yang berarti akan mengambil data dari link index.php?page=xxx pada masing-masing menu yang tersimpan pada page. Contoh jika index.php?page=buku, maka kata buku akan tersimpan pada page, selanjutnya kata tersebut akan ditampung pada variable $page. Selanjutnya menggunakan logika switch case, contoh jika variable $page berisi buku, maka akan diarahkan ke alamat halaman/buku/buku.php. Sehingga isi dari file index.php sekarang menjadi seperti berikut :

    <!DOCTYPE html>
    <html>
        <head>
            <title>Perpustakaan | SMK Negeri 1 Cimahi</title>
            <link rel="stylesheet" type="text/css" href="../css/style.css">
        </head>
    
        <body>
            <div>
                <div class="kepala">
                    <img src="../images/header.jpg" height="100%" width="100%">
                </div>
    
                <div class="menu">
                    <ul class="list_menu">
                        <li><a href="index.php?page=home">Home</a></li>
                        <li><a href="index.php?page=buku">Data Buku</a></li>
                        <li><a href="index.php?page=siswa">Siswa</a></li>
                        <li><a href="index.php?page=pinjam">Peminjaman</a></li>
                        <li><a href="index.php?page=petugas">Petugas</a></li>
                    </ul>
                </div>
    
                <div>
                    <div class="sisikiri">
                        <h2>Visi</h2>
                        <p>
                            "Terwujudnya Indonesia Cerdas Melalui Gemar Membaca Dengan Memberdayakan Perpustakaan"
                        <p>
                        <p>
                        <h2>Misi</h2>
                        <ol>
                            <li>Terwujudnya layanan prima</li>
                            <li>Terwujudnya perpustakaan sebagai pelestari khazanah budaya bangsa</li>
                            <li>Terwujudnya perpustakaan sesuai standar nasional perpustakaan</li>
                        </ol>
                    </div>
    
                    <div class="konten">
                        <?php
                        if (isset($_GET['page'])) {
                            $page = $_GET['page'];
                            switch ($page) {
                                case 'home':
                                    include "halaman/home.php";
                                    break;
                                case 'buku':
                                    include "halaman/buku/buku.php";
                                    break;
                                case 'siswa':
                                    include "halaman/siswa/siswa.php";
                                    break;
                                case 'pinjam':
                                    include "halaman/pinjam/pinjam.php";
                                    break;
                                case 'petugas':
                                    include "halaman/petugas/petugas.php";
                                    break;
                                case 'bukutambah':
                                    include "halaman/buku/bukutambah.php";
                                    break;
                                default:
                                    echo "Maaf halaman yang anda tuju tidak ada";
                                    break;
                            }
                        }
                        ?>
                    </div>
                </div>
    
                <div class="kaki">
                    Copyright @2022 | SMK Negeri 1 Cimahi
                </div>
            </div>
        </body>
    </html>
  11.  Untuk bisa menampung data buku, peminjaman, siswa, petugas dan lain-lainnya, kita buat satu database dengan nama perpustakaan pada mysql menggunakan phpmyadmin pada alamat  http://localhost/phpmyadmin
  12.  Dalam database perpustakaan tersebut buat table dengan nama tbl_buku, tbl_siswa, tbl_pinjam, tbl_petugas dan tabel lain yang sekiranya diperlukan pada aplikasi perpustakaan. Pada table tbl_buku kita buat field seperti berikut :
  13. Selanjutnya kita isi table tbl_buku tersebut dengan 1 data sebagai data dummy Untuk tabel lainnya berikut gambar relasi antar table pada database perpustakaan
  14. Untuk menyambungkan aplikasi perpustakaan tersebut dengan database mysql, kita buat satu file dengan nama koneksi.php di dalam folder perpustakaan, dengan sintak seperti berikut :
    <?php
        $host       = "localhost";
        $user       = "root";
        $password   = "";
        $dbname     = "perpustakaan";
    
        $sambung=mysqli_connect($host,$user,$password,$dbname);
    ?>
  15. Kita akan menampilkan data buku pada aplikasi perpustakaan, data buku akan ditampilkan ketika mengklik tombol pada menu Data Buku, data tersebut akan tampil pada halaman buku.php. Pada file buku.php kita buat sintak seperti berikut :
    <h3>
        <center>Daftar Buku Perpustakaan</center>
    </h3>
    <p>
    <h3>
        <center>SMK Negeri 1 Cimahi</center>
    </h3>
    <a href="index.php?page=bukutambah">Tambah Buku</a>
    
    <!--awal table-->
    <table align="center" border="1">
        <!--awal header table-->
        <tr>
            <td width="5%" align="center">No</td>
            <td width="10%" align="center">ID Buku</td>
            <td width="30%" align="center">Judul</td>
            <td width="10%" align="center">Pengarang</td>
            <td width="25%" align="center">Penerbit</td>
            <td width="20%" align="center">Aksi</td>
        </tr>
        <!--akhir header table-->
    
        <?php
            //koneksi ke database melalui koneksi.php
            include "../koneksi.php";
            
            //ambil data dari tabel tbl_buku
            $ambildata     = mysqli_query($sambung,"SELECT * FROM tbl_buku");
            $nomor =1;
    
            while ($tampildata = mysqli_fetch_array($ambildata1)) {
        ?>
    
            <!--awal menampilkan data dari tabel buku ke halaman web-->
            <tr>
                <td> <?php echo $nomor++?></td>
                <td> <?php echo $tampildata['idbuku'] ?></td>
                <td> <?php echo $tampildata['judul'] ?></td>
                <td> <?php echo $tampildata['pengarang']?></td>
                <td> <?php echo $tampildata['penerbit']?></td>
                <td align="center">
                    <a href="../admin/index.php?page=bukuubah&idbuku=<?php echo $tampildata['idbuku'];?>">
                        Edit
                    </a>
                    |
                    <a href="halaman/buku/bukuhapus.php?idbuku=<?php echo $tampildata['idbuku'];?>" onclick="return confirm('Apa Anda yakin akan menghapus Data Buku?')">
                        Delete
                    </a>
                </td>
            </tr>
            <!--akhir menampilkan data dari tabel buku ke halaman web-->
    
        <?php
            }
        ?>
    </table>
    <!--akhir table-->
    

    Maka ketika mengakses alamat http://localhost/perpustakaan/admin dan klik tombol Data Buku maka akan diarahkan ke alamat http://localhost/perpustakaan/admin/index.php?page=buku dengan tampilan seperti berikut :

  16. Selanjutnya kita buat file bukutambah.php dalam folder halaman dengan sintak sebagai berikut :
    <form action="halaman/buku/bukutambah_aksi.php" method="post">
        <table>
            <tr>
                <td>ID Buku</td>
                <td><input type="text" name="idbuku" placeholder="Masukan ID Buku"></td>
            </tr>
    
            <tr>
                <td>Judul</td>
                <td><input type="text" name="judul" placeholder="Masukan Judul Buku"></td>
            </tr>
    
            <tr>
                <td>Pengarang</td>
                <td><input type="text" name="pengarang" placeholder="Masukan Nama Pengarang"></td>
            </tr>
    
            <tr>
                <td>Penerbit</td>
                <td><input type="text" name="penerbit" placeholder="Masukan Nama Penerbit"></td>
            </tr>
    
            <tr>
                <td></td>
                <td><input type="submit" name="tomboltambah" value="Tambah"></td>
            </tr>
        </table>
    </form>

    Pada sintak tersebut terdapat <form action=”halaman/buku/bukutambah_aksi.php” method=”post”>, yang berarti form tersebut akan diarahkan ke file bukutambah_aksi.php yang akan mengeksekusi aksi tambah dari form tersebut menggunkan method post. Pada file index.php kita tambahkan case supaya halaman tersebut tampil dalam halaman dengan tema yang sama dan diarahkan dengan link http://localhost/perpustakaan/admin/index.php?page=bukutambah

    case 'bukutambah':
        include "halaman/buku/bukutambah.php";
        break;

    Hasilnya seperti berikut :

  17. Selanjutnya kita buat file bukutambah_aksi.php dalam folder buku di dalam folder halaman dengan sintak sebagai berikut :
    <?php
        include "../../../koneksi.php";
    
        if(isset($_POST['tomboltambah'])){
            $idbuku     = $_POST['idbuku'];
            $judul      = $_POST['judul'];
            $pengarang  = $_POST['pengarang'];
            $penerbit   = $_POST['penerbit'];
    
            mysqli_query($sambung,"insert into tbl_buku (idbuku,judul,pengarang,penerbit) values ('$idbuku','$judul','$pengarang','$penerbit')");
        }
    
        header("location:../../index.php?page=buku");
    ?>
  18. Pada halaman Data Buku terdapat tombol Delete, maka selanjutnya kita buatkan file bukuhapus.php dalam folder halaman dengan sintak seperti berikut :
    <?php
        //koneksikan dengan database
        include "../../../koneksi.php";
    
        //ambil idbuku yang akan dihapus sebagai referensi
        $idbuku=$_GET['idbuku'];
    
        //query untuk menghapus data buku
        mysqli_query($sambung,"delete from tbl_buku where idbuku='$idbuku'");
    
        //arahkan ke halaman data buku setelah menghapus 1 data buku
        header("location:../../index.php?page=buku");
    ?>
  19. Pada halaman Data Buku terdapat tombol Edit, maka selanjutnya kita buatkan file bukuubah.php dalam folder buku di dalam folder halaman dengan sintak seperti berikut :
    <a href="index.php?page=buku">Kembali ke Data Buku</a>
    <br /><br />
    <?php
        include "../koneksi.php";
        $idbuku = $_GET['idbuku'];
        $ambildata = mysqli_query($sambung, "select * from tbl_buku where idbuku='$idbuku'");
        while ($tampildata = mysqli_fetch_array($ambildata)) {
    ?>
    
        <form action="halaman/buku/bukuubah_aksi.php" method="post" name="formubah">
            <table>
                <tr>
                    <td>ID Buku</td>
                    <td><input type="text" name="idbuku" value="<?php echo $tampildata['idbuku'] ?>" readonly></td>
                </tr>
    
                <tr>
                    <td>Judul</td>
                    <td><input type="text" name="judul" value="<?php echo $tampildata['judul'] ?>"></td>
                </tr>
    
                <tr>
                    <td>Pengarang</td>
                    <td><input type="text" name="pengarang" value="<?php echo $tampildata['pengarang'] ?>"></td>
                </tr>
    
                <tr>
                    <td>Penerbit</td>
                    <td><input type="text" name="penerbit" value="<?php echo $tampildata['penerbit'] ?>"></td>
                </tr>
    
                <tr>
                    <td></td>
                    <td><input type="submit" name="tombolubah" value="Ubah" onclick="return confirm('Apa Anda yakin akan mengubah data buku?')>
                </tr>
            </table>
        </form>
    
    <?php
    }
    ?>
  20. Selanjutnya kita buatkan file bukuubah_aksi.php dalam folder buku di dalam folder halaman dengan sintak seperti berikut :
    <?php 
        //koneksi dengan database 
        include '../../../koneksi.php'; 
        
        //menangkap data yang dikirim dari form dengan methode post 
        $idbuku     =$_POST['idbuku']; 
        $judul      =$_POST['judul']; 
        $pengarang  =$_POST['pengarang']; 
        $penerbit   =$_POST['penerbit']; 
        
        //update data dari database 
        mysqli_query($sambung,"update tbl_buku set judul='$judul',pengarang='$pengarang',penerbit='$penerbit' where idbuku='$idbuku'"); 
    
        //mengalihkan ke halaman daftar buku 
        header("location:../../index.php?page=buku"); 
    ?>
  21. Pada file index.php kita tambahkan case supaya halaman tersebut tampil dalam halaman dengan tema yang sama dan diarahkan dengan link http://localhost/perpustakaan/admin/index.php?page=bukuubah
    case 'bukuubah':
        include "halaman/buku/bukuubah.php";
        break;

    Hasilnya seperti berikut :

  22. Selanjutnya untuk menjaga keamanan data kita memerlukan otentifikasi dengan cara membuat halaman login. Sebelumnya pada database yang sudah kita buat, kita buat lagi satu table deangn nama tbl_petugas menggunakan phpmyadmin pada alamat  http://localhost/phpmyadmin dengan struktur seperti berikut : Selanjutnya kita isi dengan satu data sebagai data dummy :
  23. Selanjutnya kita buat satu file di dalam folder perpustakaan dengan nama index.php, catat file index.php ini berbeda dengan file index.php yang ada dalam folder admin, sintaknya seperti berikut ini :
    <!DOCTYPE html>
    <html>
        <head>
            <title>Perpustakaan | SMK Negeri 1 Cimahi</title>
        </head>
        <body>
            <h2><center>Aplikasi Perpustakaan</center></h2>
            <h2><center>SMK Negeri 1 Cimahi</center></h2>
            <?php
                if(isset($_GET['pesan']))
                {
                    if($_GET['pesan']=='gagal')
                    {
                        echo "Gagal Login, username atau password salah";
                    }
                    else
                    if($_GET['pesan']=='logout')
                    {
                        echo "Anda sudah logout";
                    }
                    if($_GET['pesan']=='belum_login')
                    {
                        echo "Anda harus login dahulu untuk mengakses halaman admin";
                    }
                }
            ?>
            
            <form method="post" action="login_aksi.php" name="formlogin">
                <table align="center">
                    <tr>
                        <td>Username</td>
                        <td><input type="text" name="nama" placeholder="Masukan username"></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" name="katakunci" placeholder="Masukan password"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" name="tombollogin" value="LOGIN"></td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
  24. Selanjutnya kita buat file login_aksi.php yang digunakan untuk mengeksekusi aksi untuk login tersebut di dalam folder perpustakaan, dengan sintak seperti berikut :
    <?php
        //mulai session
        session_start();
    
        //koneksi ke database
        include "koneksi.php";
    
        //ambil data dari form login
        $username=$_POST['nama'];
        $password=$_POST['katakunci'];
    
        //query dari tabel petugas
        $ambildata=mysqli_query($sambung,"select * from tbl_petugas where username='$username' and password='$password'");
        
        //cek data
        $cek=mysqli_num_rows($ambildata);
        if($cek>0)
        {
            $_SESSION['username']=$username;
            $_SESSION['status']='login';
            header("location:admin/index.php");
        }
        else
        {
            header("location:index.php?pesan=gagal");
        }
    ?>

    Jika login berhasil maka akan diarahkan ke halaman index.php yang ada di dalam folder admin.

  25. Selanjutnya kita tambahkan sedikit sintak di dalam file index.php pada baris pertama yang ada dalam folder admin

    <?php
        //mulai session
        session_start();
        //cek status sudah login
        if($_SESSION['status']!="login")
        {
            header("location:../index.php?pesan=belum_login");
        }
    ?>

    Sintak tersebut akan mencegah pengguna yang mengakses halaman yang ada dalam folder admin tanpa melakukan login dahulu.

  26. Pada bagian menu dalam file index.php yang ada di dalam folder admin kita tambahkan tombol menu untuk logout dengan sintak :
    <li><a href="logout.php">Logout</a></li>

    Sehingga sintak pada file index.php dalam folder admin tersebut menjadi seperti berikut ini :

    <?php
        //mulai session
        session_start();
        //cek status sudah login
        if($_SESSION['status']!="login")
        {
            header("location:../index.php?pesan=belum_login");
        }
    ?>
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>Perpustakaan | SMK Negeri 1 Cimahi</title>
            <link rel="stylesheet" type="text/css" href="../css/style.css">
        </head>
    
        <body>
            <div>
                <div class="kepala">
                    <img src="../images/header.jpg" height="100%" width="100%">
                </div>
    
                <div class="menu">
                    <ul class="list_menu">
                        <li><a href="index.php?page=home">Home</a></li>
                        <li><a href="index.php?page=buku">Data Buku</a></li>
                        <li><a href="index.php?page=siswa">Siswa</a></li>
                        <li><a href="index.php?page=pinjam">Peminjaman</a></li>
                        <li><a href="index.php?page=petugas">Petugas</a></li>
                        <li><a href="logout.php">Logout</a></li>
                    </ul>
                </div>
    
                <div>
                    <div class="sisikiri">
                        <h2>Visi</h2>
                        <p>
                            "Terwujudnya Indonesia Cerdas Melalui Gemar Membaca Dengan Memberdayakan Perpustakaan"
                        <p>
                        <p>
                        <h2>Misi</h2>
                        <ol>
                            <li>Terwujudnya layanan prima</li>
                            <li>Terwujudnya perpustakaan sebagai pelestari khazanah budaya bangsa</li>
                            <li>Terwujudnya perpustakaan sesuai standar nasional perpustakaan</li>
                        </ol>
                    </div>
    
                    <div class="konten">
                        <?php
                        if (isset($_GET['page'])) {
                            $page = $_GET['page'];
                            switch ($page) {
                                case 'home':
                                    include "halaman/home.php";
                                    break;
                                case 'buku':
                                    include "halaman/buku.php";
                                    break;
                                case 'siswa':
                                    include "halaman/siswa.php";
                                    break;
                                case 'pinjam':
                                    include "halaman/pinjam.php";
                                    break;
                                case 'petugas':
                                    include "halaman/petugas.php";
                                    break;
                                case 'bukutambah':
                                    include "halaman/bukutambah.php";
                                    break;
                                default:
                                    echo "Maaf halaman yang anda tuju tidak ada";
                                    break;
                            }
                        }
                        ?>
                    </div>
                </div>
    
                <div class="kaki">
                    Copyright @2022 | SMK Negeri 1 Cimahi
                </div>
            </div>
        </body>
    </html>
  27. Pada tombol Logout yang terdapat pada menu, ketika diklik akan diarahkan ke file logout.php yang ada dalam folder perpustakaan, selanjutnya kita buat file logout.php tersebut dengan sintak seperti berikut :
    <?php
        //mulai session
        session_start();
    
        //hapus session
        session_destroy();
    
        //alihkan ke halaman login
        header("location:index.php?pesan=logout");
    ?>

Membuat CRUD untuk data peminjaman buku (table yang berelasi)

Untuk data pada table peminjaman sedikit berbeda dengan data pada tabel lainnya, hal ini karena tabel tersebut berelasi dengan table  yang lain. Bisa dikatakan tabel tersebut sebagai table traksaksi karena dipengaruhi oleh data dari table lain.

Berikut cara membuat CRUD untuk data pada peminjaman buku :

  1. Buat folder pinjam di dalam folder halaman
  2. Buat file pinjam.php di dalam folder pinjam dengan sintak seperti berikut :
    <h3>
        <center>Daftar Peminjaman Buku Perpustakaan</center>
    </h3>
    <p>
    <h3>
        <center>SMK Negeri 1 Cimahi</center>
    </h3>
    <a href="index.php?page=pinjamtambah">Peminjaman Buku</a>
    
    <!--awal table-->
    <table align="center" border="1" width="100%">
        <!--awal header table-->
        <tr>
            <td width="5%" align="center">No</td>
            <td width="10%" align="center">ID Pinjam</td>
            <td width="20%" align="center">Petugas</td>
            <td width="10%" align="center">Siswa</td>
            <td width="20%" align="center">Judul Buku</td>
            <td width="15%" align="center">Waktu Pinjam</td>
            <td width="20%" align="center">Aksi</td>
        </tr>
        <!--akhir header table-->
    
        <?php
            //koneksi ke database melalui koneksi.php
            include "../koneksi.php";
    
            //menentukan banyak nya data yang akan ditampilkan dalam 1 halaman
            $batas   = 10; 
            $halaman = isset($_GET['halaman']) ? (int)$_GET['halaman'] : 1;
            $mulai  = ($halaman > 1) ? ($halaman * $batas) - $batas : 0;
            
            //ambil data dari tabel tbl_peminjaman
            $ambildata1     = mysqli_query($sambung,"SELECT * FROM tbl_pinjam INNER JOIN tbl_petugas ON tbl_petugas.idpetugas=tbl_pinjam.idpetugas INNER JOIN tbl_siswa ON tbl_siswa.idsiswa=tbl_pinjam.idsiswa INNER JOIN tbl_buku ON tbl_buku.idbuku=tbl_pinjam.idbuku
            LIMIT $mulai, $batas");
            $ambildata2     = mysqli_query($sambung,"SELECT * FROM tbl_pinjam INNER JOIN tbl_petugas ON tbl_petugas.idpetugas=tbl_pinjam.idpetugas INNER JOIN tbl_siswa ON tbl_siswa.idsiswa=tbl_pinjam.idsiswa INNER JOIN tbl_buku ON tbl_buku.idbuku=tbl_pinjam.idbuku");
            $jumlahdata     = mysqli_num_rows($ambildata2);
            $jumlahhalaman  = ceil($jumlahdata / $batas);
            $nomor =$mulai+1;
    
            while ($tampildata = mysqli_fetch_array($ambildata1)) {
        ?>
    
            <!--awal menampilkan data dari tabel peminjaman ke halaman web-->
            <tr>
                <td> <?php echo $nomor++?></td>
                <td> <?php echo $tampildata['idpinjam'] ?></td>
                <td> <?php echo $tampildata['namapetugas'] ?></td>
                <td> <?php echo $tampildata['namasiswa']?></td>
                <td> <?php echo $tampildata['judul']?></td>
                <td> <?php echo $tampildata['waktupinjam']?></td>
                <td align="center">
                    <a href="../admin/index.php?page=pinjamubah&idpinjam=<?php echo $tampildata['idpinjam'];?>">
                        Edit
                    </a>
                    |
                    <a href="halaman/pinjam/pinjamhapus.php?idpinjam=<?php echo $tampildata['idpinjam'];?>" onclick="return confirm('Apa Anda yakin akan menghapus Data Peminjaman?')">
                        Delete
                    </a>
                </td>
            </tr>
            <!--akhir menampilkan data dari tabel buku ke halaman web-->
    
        <?php
            }
        ?>
    </table>
    <!--akhir table-->
    
    <!--awal menentukan banyaknya halaman pagination-->
    <?php
        $ambildata2 = mysqli_query($sambung, "select * from tbl_buku");
        $jumlahdata = mysqli_num_rows($ambildata2);
        $jumlahhalaman = ceil($jumlahdata/$batas);
    ?>
    <!--akhir menentukan banyaknya halaman pagination-->
    
    <p>
    
    <!--awal navigasi pagination-->
    <div align="center">
        <?php 
            for ($i=1; $i<=$jumlahhalaman; $i++) 
            { 
        ?>
            <a href="../admin/index.php?page=pinjam&halaman=<?php echo $i; ?>"><?php echo $i; ?></a>
    
        <?php 
            } 
        ?>
    </div>
    <!--akhir navigasi pagination-->

    Perhatikan sintak di atas, untuk menampilkan data peminjaman kita menggunakan query dengan cara INNER JOIN, hal ini karena tabel tbl_pinjam berelasi dengan table lainnya, jika tidak menggunakan INNER JOIN maka hanya akan tampil id dari masing-masing table yang berelasi.

  3. Selanjutnya buat file pinjamtambah.php di dalam folder pinjam dengan sintak seperti berikut :
    <?php
        include "../koneksi.php";
    ?>
    
    <form action="halaman/pinjam/pinjamtambah_aksi.php" method="post">
        <table>
            <!-- <tr>
                <td>ID Pinjam</td>
                <td>
                    <input type="text" name="idpinjam" placeholder="Masukan ID Peminjaman">
                </td>
            </tr> -->
    
            <tr>
                <td>Petugas</td>
                <td>
                    <select name="idpetugas" >
                        <option>Pilih Nama Petugas</option>
                        <?php
                            $petugas_query = mysqli_query($sambung,"select * from tbl_petugas");
                            while($petugas_data = mysqli_fetch_array($petugas_query))
                            {
                        ?>     
                            <option value="<?php echo $petugas_data['idpetugas']?>">
                                <?php echo $petugas_data['namapetugas']?>
                            </option>    
                        <?php
                            }
                        ?>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>Siswa</td>
                <td>
                    <select name="idsiswa">
                        <option>Pilih Nama Siswa</option>
                        
                        <?php
                            $siswa_query = mysqli_query($sambung,"select * from tbl_siswa");
                            while($siswa_data = mysqli_fetch_array($siswa_query))
                            {
                        ?>    
                            <option value="<?php echo $siswa_data['idsiswa']?>"><?php echo $siswa_data['namasiswa']?></option>
                        <?php
                            }
                        ?>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>Judul</td>
                <td>
                    <select name="idbuku">
                        <option>Pilih Judul Buku</option>
                        <?php
                            $buku_query = mysqli_query($sambung,"select * from tbl_buku");
                            while($buku_data = mysqli_fetch_array($buku_query))
                            {
                        ?>   
                            <option value="<?php echo $buku_data['idbuku']?>"><?php echo $buku_data['judul']?></option>
                        <?php
                            }
                        ?>
                    </select>
                </td>
            </tr>
    
    
            <tr>
                <td>Waktu Pinjam</td>
                <td>
                    <input type="datetime-local" name="waktupinjam" placeholder="Masukan Tanggal dan Jam Peminjaman">
                </td>
            </tr>
    
            <tr>
                <td></td>
                <td><input type="submit" name="tomboltambah" value="Tambah"></td>
            </tr>
        </table>
    </form>
  4. Selanjutnya buat file pinjamtambah_aksi.php di dalam folder pinjam dengan sintak seperti berikut :
    <?php
        include "../../../koneksi.php";
    
        if(isset($_POST['tomboltambah'])){
            // $idpinjam    = $_POST['idpinjam'];
            $idpetugas      = $_POST['idpetugas'];
            $idsiswa        = $_POST['idsiswa'];
            $idbuku         = $_POST['idbuku'];
            $waktupinjam    = $_POST['waktupinjam'];
    
            mysqli_query($sambung,"insert into tbl_pinjam (idpetugas,idsiswa,idbuku,waktupinjam) values ('$idpetugas','$idsiswa','$idbuku','$waktupinjam')");
        }
    
        header("location:../../index.php?page=pinjam");
    ?>
  5. Pada file index.php dalam folder admin tambahkan sintak :
    case 'pinjamtambah':
        include "halaman/pinjam/pinjamtambah.php";
        break;
  6. Selanjutnya kita buat file pinjamhapus.php dalam folder pinjam di dalam folder halaman dengan sintak seperti berikut :
    <?php
        //koneksikan dengan database
        include "../../../koneksi.php";
    
        //ambil idpinjam yang akan dihapus sebagai referensi
        $idpinjam=$_GET['idpinjam'];
    
        //query untuk menghapus data pinjam
        mysqli_query($sambung,"delete from tbl_pinjam where idpinjam='$idpinjam'");
    
        //arahkan ke halaman data pinjam setelah menghapus 1 data pinjam
        header("location:../../index.php?page=pinjam");
    ?>
  7. Selanjutnya buat file pinjamubah.php dalam folder pinjam di dalam folder halaman dengan sintak seperti berikut :
    <a href="index.php?page=pinjam">Kembali ke Data Buku</a>
    <br /><br />
    <?php
        include "../koneksi.php";
        $idpinjam = $_GET['idpinjam'];
        $ambildata = mysqli_query($sambung, "SELECT * FROM tbl_pinjam INNER JOIN tbl_petugas ON tbl_petugas.idpetugas=tbl_pinjam.idpetugas INNER JOIN tbl_siswa ON tbl_siswa.idsiswa=tbl_pinjam.idsiswa INNER JOIN tbl_buku ON tbl_buku.idbuku=tbl_pinjam.idbuku WHERE idpinjam='$idpinjam'");
        
        while ($tampildata = mysqli_fetch_array($ambildata)) {
    ?>
    
        <form action="halaman/pinjam/pinjamubah_aksi.php" method="post" name="formubah">
            <table>
                <tr>
                    <td>ID Pinjam</td>
                    <td>
                        <input type="text" name="idpinjam" value="<?php echo $tampildata['idpinjam'] ?>" readonly>
                    </td>
                </tr>
    
                <tr>
                    <td>Petugas</td>
                    <td>
                        <select name="idpetugas" >
                            <option value="<?php echo $tampildata['idpetugas'] ?>"> <?php echo $tampildata['namapetugas'] ?> </option>
                            <?php
                                $petugas_query = mysqli_query($sambung,"select * from tbl_petugas");
                                while($petugas_data = mysqli_fetch_array($petugas_query))
                                {
                            ?>     
                                <option value="<?php echo $petugas_data['idpetugas']?>">
                                    <?php echo $petugas_data['namapetugas']?>
                                </option>    
                            <?php
                                }
                            ?>
                        </select>
                    </td>
                </tr>
    
                <tr>
                    <td>Siswa</td>
                    <td>
                        <select name="idsiswa">
                            <option value="<?php echo $tampildata['idsiswa'] ?>"> <?php echo $tampildata['namasiswa'] ?> </option>
                            
                            <?php
                                $siswa_query = mysqli_query($sambung,"select * from tbl_siswa");
                                while($siswa_data = mysqli_fetch_array($siswa_query))
                                {
                            ?>    
                                <option value="<?php echo $siswa_data['idsiswa']?>"><?php echo $siswa_data['namasiswa']?></option>
                            <?php
                                }
                            ?>
                        </select>
                    </td>
                </tr>
    
                <tr>
                    <td>Judul</td>
                    <td>
                        <select name="idbuku">
                            <option value="<?php echo $tampildata['idbuku'] ?>"> <?php echo $tampildata['judul'] ?> </option>
                            
                            <?php
                                $buku_query = mysqli_query($sambung,"select * from tbl_buku");
                                while($buku_data = mysqli_fetch_array($buku_query))
                                {
                            ?>   
                                <option value="<?php echo $buku_data['idbuku']?>"><?php echo $buku_data['judul']?></option>
                            <?php
                                }
                            ?>
                        </select>
                    </td>
                </tr>
    
                <tr>
                    <td>Waktu Pinjam</td>
                    <td>
                        <input type="datetime-local" name="waktupinjam" value="<?php echo $tampildata['waktupinjam'] ?>">
                        
                        </input>
                    </td>
                </tr>
    
                <tr>
                    <td></td>
                    <td><input type="submit" name="tombolubah" value="Ubah"></td>
                </tr>
            </table>
        </form>
    
    <?php
        }
    ?>

    Jangan lupa tambahkan alamat untuk tampilan ubahnya di file konten.php dengan sintak tambahan :

    case 'pinjamubah':
        include "halaman/pinjam/pinjamubah.php";
        break;
  8. Selanjutnya buat file pinjamubah_aksi.php dalam folder pinjam di dalam folder halaman dengan sintak seperti berikut :
    <?php 
        //koneksi dengan database 
        include '../../../koneksi.php'; 
        
        //menangkap data yang dikirim dari form dengan methode post 
        $idpinjam       = $_POST['idpinjam']; 
        $idpetugas      = $_POST['idpetugas']; 
        $idsiswa        = $_POST['idsiswa']; 
        $idbuku         = $_POST['idbuku'];
        $waktupinjam    = $_POST['waktupinjam'];
        
        //update data dari database 
        mysqli_query($sambung,"UPDATE tbl_pinjam SET idpetugas='$idpetugas',idsiswa='$idsiswa',idbuku='$idbuku',waktupinjam='$waktupinjam' WHERE idpinjam='$idpinjam'"); 
    
        //mengalihkan ke halaman daftar pinjam 
        header("location:../../index.php?page=pinjam"); 
    ?>

     

Templating halaman index.php

Selanjutnya pada file index.php yang ada dalam folder admin kita pecah-pecah sintaknya dan pindahkan kebeberapa file php lain. Hal ini bertujuan untuk memudahkan kedepannya jika ada perubahan, pengurangan atau penambahan tampilan pada masing-masing bagian tersebut.

Berikut cara membuat templating halaman index.php tersebut :

  1. Buat file-file yang akan kita buat di dalam folder admin diantaranya header.php, menu.php, sidebar.php, konten.php dan footer.php.
  2. Kita cut sintak pada bagian header di dalam file index.php index.php yang ada dalam folder admin tersebut dan paste pada file header.php
    <div class="kepala">
        <img src="../images/header.jpg" height="100%" width="100%">
    </div>
  3. Kita cut sintak pada bagian menu di dalam file index.php index.php yang ada dalam folder admin tersebut dan paste pada file menu.php
    <div class="menu">
        <ul class="list_menu">
            <li><a href="index.php?page=home">Home</a></li>
            <li><a href="index.php?page=buku">Data Buku</a></li>
            <li><a href="index.php?page=siswa">Siswa</a></li>
            <li><a href="index.php?page=pinjam">Peminjaman</a></li>
            <li><a href="index.php?page=petugas">Petugas</a></li>
            <li><a href="../logout.php">Logout</a></li>
        </ul>
    </div>
  4. Kita cut sintak pada bagian sidebar di dalam file index.php index.php yang ada dalam folder admin tersebut dan paste pada file sidebar.php
    <div>
        <div class="sisikiri">
            <h2>Visi</h2>
            <p>
            "Terwujudnya Indonesia Cerdas Melalui Gemar Membaca Dengan Memberdayakan Perpustakaan"
            <p>
            <p>
            <h2>Misi</h2>
            <ol>
                <li>Terwujudnya layanan prima</li>
                <li>Terwujudnya perpustakaan sebagai pelestari khazanah budaya bangsa</li>
                <li>Terwujudnya perpustakaan sesuai standar nasional perpustakaan</li>
            </ol>
        </div>
  5. Kita cut sintak pada bagian konten di dalam file index.php index.php yang ada dalam folder admin tersebut dan paste pada file konten.php
        <div class="konten">
            <?php
            if (isset($_GET['page'])) {
                $page = $_GET['page'];
                switch ($page) {
                    case 'home':
                        include "halaman/home.php";
                        break;
                    case 'buku':
                        include "halaman/buku/buku.php";
                        break;
                    case 'siswa':
                        include "halaman/siswa/siswa.php";
                        break;
                    case 'pinjam':
                        include "halaman/pinjam/pinjam.php";
                        break;
                    case 'petugas':
                        include "halaman/petugas/petugas.php";
                        break;
                    case 'bukutambah':
                        include "halaman/buku/bukutambah.php";
                        break;
                    case 'bukuubah':
                        include "halaman/buku/bukuubah.php";
                        break;
                    default:
                        echo "Maaf halaman yang anda tuju tidak ada";
                        break;
                }
            }
            ?>
        </div>
    </div>
  6. Kita cut sintak pada bagian footer di dalam file index.php index.php yang ada dalam folder admin tersebut dan paste pada file footer.php
    <div class="kaki">
        Copyright @2022 | SMK Negeri 1 Cimahi
    </div>
  7. Pada file index.php yang ada dalam folder admin kita ubah sintaknya menjadi seperti berikut :
    <?php
        //mulai session
        session_start();
        //cek status sudah login
        if($_SESSION['status']!="login")
        {
            header("location:../index.php?pesan=belum_login");
        }
    ?>
    
    <!DOCTYPE html>
    <html>
        <head>
            <title>Perpustakaan | SMK Negeri 1 Cimahi</title>
            <link rel="stylesheet" type="text/css" href="../css/style.css">
        </head>
    
        <body>
            <div>
                <?php
                    include "header.php";
                    include "menu.php";
                    include "sidebar.php";
                    include "konten.php";
                    include "footer.php";
                ?>
            </div>
        </body>
    </html>

Sampai disini membuat aplikasi perpustakaan berbasis web dengan php dan mysql, sesudah dengan CRUD data buku, login akses dan templating halaman, untuk CRUD data lainnya silahkan bereksperimen secara mandiri.

Pada tutorial ini peminjaman buku hanya terbatas 1 buku untuk sekali proses peminjaman, jika menginginkan peminjamannya lebih dari 1 buku maka kita harus mengubah databasenya dengan menambahkan tabel pinjam detail (tbl_pinjamdetail), yang akan kita bahas pada tutorial berikutnya.

Semoga bermanfaat, jika ada kekeliruan dan pertanyaan silahkan tulis dikolom komentar.

Related Post

16 Comments

  1. mantep ni, sy baru nyoba sampe login_aksi ada errorr, line 16
    username & passwordnya bener(sesuai data di table)
    “Fatal error: Uncaught TypeError: mysqli_num_rows(): Argument #1 ($result) must be of type mysqli_result, bool given in C:\xampp\htdocs\perpustakaan\login_aksi.php:16 Stack trace: #0 C:\xampp\htdocs\perpusatakaan\login_aksi.php(16): mysqli_num_rows(false) #1 {main} thrown in C:\xampp\htdocs\perpusatakaan\login_aksi.php on line 16”

    ada koreksi kah suhu???

    • Apakah sintaknya sama persis atau ada modifikasi? Pastikan penulisan sintaknya benar.
      Jika sudah benar ada beberapa kemungkinan error, bisa dari koneksi ke database, query dll

2 Trackbacks / Pingbacks

  1. Membuat Aplikasi Perpustakaan Berbasis Web dengan PHP dan Bootstrap - agussuratna.net
  2. Membuat Aplikasi Perpustakaan Berbasis Web dengan Laravel dan Bootstrap - agussuratna.net

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy