Al Ilmu (Berbagi Ilmu Opo Wae): APLIKASI WEBSITE RUANG BACA IMPLEMENTASI DAN PENGEMBANGAN RUANG BACA DENGAN KONSEP KOMPUTASI AWAN

KELOMPOK 1 CLOUD COMPUTING

LAPORAN PROJEK LAYANAN KOMPUTASI AWAN

WEBSITE RUANG BACA

Disusun Oleh :

Ahmad Fikri Husaini 20050974030

Serly Ardila 20050974056

Muhammad Iqbal Haqiqi 20050974075

Pendahuluan

Saat ini perkembangan zaman sudah mulai maju, teknologi serba instan dan cepat haruslah ditunjang dengan perkembangan teknologi informasi yang lebih canggih. Hal ini tentunya harus memberikan dampak positif terhadap kehidupan manusia. Tantangan yang dihadapi dunia pendidikan di era globalisasi salah satunya adalah perkembangan ilmu pengetahuan dan teknologi yang begitu cepat dan mendasar (Oviyanti, 2013).

Sistem informasi ruang baca merupakan penerapan sistem informasi yang diterapkan pada sekolah guna meningkatkan produktivitas (Yuniwati, 2012). Penerapan sistem informasi ruang baca berbasis web dapat diterapkan di berbagai tempat salah satunya sekolah. Ruang baca merupakan media pembelajaran yang dapat digunakan oleh setiap orang untuk memperoleh informasi terkait jenis buku, judul buku, tahun terbit dan pengarang buku. Website aplikasi ruang baca akan dikembangkan dengan menggunakan teknologi Web2.0. Web2.0 merupakan generasi baru dari semua teknologi yang ada di web. Pengguna dapat menjalankan aplikasi perangkat lunak melalui browser.

Dengan uraian diatas, penulis ingin membuat aplikasi berbasis web dengan judul “Website Ruang Baca” yang memadukan dengan layanan komputasi awan dan hosting, sehingga website dapat diakses dimanapun dan kapanpun. Adapun pada laporan ini akan dijabarkan mengenai deskripsi, perancangan, dan hasil implementasi website. Kami berharap aplikasi ruang baca ini nantinya dapat digunakan oleh pengguna untuk memenuhi kebutuhan membaca.

Analisis Kebutuhan

Beberapa alat yang dibutuhkan dalam perancangan aplikasi antara lain:

1. Cloud Service

Layanan ini dirancang untuk menyediakan akses yang mudah dan terjangkau kepada aplikasi dan sumber daya, tanpa perlu membangun infrastruktur internal. Hanya perlu internet untuk mengakses data dan menjalankan aplikasi yang berada di dalam Cloud. Ada tiga jenis/tingkatan pada layanan berbasis Cloud, yaitu SaaS (Software as a Service), IaaS (Infrastructure as a Service) dan PaaS (Platform as a Service).

2. Database

Database atau yang dikenal juga dengan istilah basis data adalah sekumpulan data yang dikelola dengan sedemikian rupa berdasarkan ketentuan tertentu yang saling berkaitan sehingga memudahkan dalam pengelolaannya. Lewat pengelolaan itulah pengguna bisa mendapatkan kemudahan dalam mencari sebuah informasi, membuang informasi, maupun menyimpan informasi.

3. Cloud Hosting

Cloud hosting adalah jenis hosting yang menggunakan beberapa server untuk menyeimbangkan beban (load) server dan memaksimalkan server uptime. cloud hosting dikenal sebagai web hosting yang memiliki reliabilitas dan fleksibilitas yang tinggi dibandingkan dengan jenis web host lainnya.

Melakukan Subscription Cloud Service

Sebelum melangkah ke tahap lebih lanjut, tentunya membutuhkan layanan komputasi awan. Salah satunya adalah Amazon. Amazon adalah multinasional teknologi Perusahaan Amerika yang berfokus pada e-niaga, komputasi awan, streaming digital dan kecerdasan buatan. Amazon Web Service (AWS) adalah layanan komputasi awan yang dimiliki amazon yang menyediakan penyimpanan cloud, menghitung daya, penyebaran aplikasi, manajemen akun pengguna, penyimpanan data, alat untuk mengelola dan mengendalikan perangkat.

Amazon Web Service

Amazon yang mencakup campuran infrastruktur sebagai layanan (infrastructure as a service – IaaS), platform sebagai layanan (platform as a service – PaaS), dan paket perangkat lunak yang dikemas sebagai penawaran layanan (software as a service – SaaS). Layanan AWS dapat menawarkan alat organisasi seperti daya komputasi, penyimpanan basis data, dan layanan pengiriman konten. Pada layanan cloud computing AWS, terdapat EC2 (Elastic Compute Cloud), LightSail, Elastic Beanstalk, EKS (Elastic Container Service for Kubernetes) , dan AWS Lambda . Dalam kategori ini, terdapat DMS (Database Migration Service), SMS (Server Migration Service), dan Snowball.

Amazon ECS2

Pada bagian ini akan disajikan mengenai tampilan dan fitur-fitur apa saja yang ada pada aplikasi “Website Ruang baca”. Adapun dalam pengimplementasiannya aplikasi ruang baca ini dilengkapi dengan menu login, lupa password,reset password, konfirmasi logout, dashboard admin, table buku, table pengguna, searching data buku/pengguna di table, insert data buku, update data buku, konfirmasi saat delete buku/pengguna, insert data pengguna, update data pengguna, dashboard murid/guru, searching data buku di dashboard murid/guru, detail buku (favorite button), dan tab buku favorite.

Membangun Website

Kebutuhan:

· PHP 7.4.33

· Bootstrap 5

· sb-Admin template

· Jquery library

· Sweetalert2

1. Membuat database.sql

Dalam membangun sebuah webite, hal pertama yang kita perlukan adalah membuat sebuah database untuk menyimpan semua data pada website yang sedang dibangun. Untuk membuat database pada mysql pertama yang harus kita lakukan adalah membuat file database.sql lalu kemudian di import ke dalam database.

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;

SET time_zone = "+00:00";

CREATE TABLE `buku` (

`Id_buku` int(11) NOT NULL,

`Judul` varchar(50) NOT NULL,

`Penulis` varchar(50) NOT NULL,

`Penerbit` varchar(50) NOT NULL,

`Id_kategori` int(11) NOT NULL,

`Tahun_terbit` year(4) NOT NULL,

`Cover_buku` varchar(100) NOT NULL,

`file_buku` varchar(100) NOT NULL,

`deskripsi` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `favorite` (

`Id_user` int(11) NOT NULL,

`Id_buku` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `kategori` (

`id_kategori` int(11) NOT NULL,

`nama_kategori` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `log_user` (

`id_log` int(11) NOT NULL,

`nama_user` varchar(25) NOT NULL,

`Ip` varchar(25) NOT NULL,

`Access_from` varchar(254) NOT NULL,

`Waktu` timestamp NOT NULL DEFAULT current_timestamp()

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `user` (

`id_user` int(11) NOT NULL,

`Email` varchar(25) NOT NULL,

`Username` varchar(25) NOT NULL,

`Password` varchar(32) NOT NULL,

`Hak_Akses` varchar(10) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `buku`

ADD PRIMARY KEY (`Id_buku`),

ADD KEY `Id_kategori` (`Id_kategori`);

ALTER TABLE `favorite`

ADD PRIMARY KEY (`Id_user`,`Id_buku`),

ADD KEY `Id_buku` (`Id_buku`);

ALTER TABLE `kategori`

ADD PRIMARY KEY (`id_kategori`);

ALTER TABLE `log_user`

ADD PRIMARY KEY (`id_log`);

ALTER TABLE `user`

ADD PRIMARY KEY (`id_user`);

ALTER TABLE `buku`

MODIFY `Id_buku` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=58;

ALTER TABLE `kategori`

MODIFY `id_kategori` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

ALTER TABLE `log_user`

MODIFY `id_log` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=186;

ALTER TABLE `user`

MODIFY `id_user` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

ALTER TABLE `buku`

ADD CONSTRAINT `buku_ibfk_1` FOREIGN KEY (`Id_kategori`) REFERENCES `kategori` (`id_kategori`);

ALTER TABLE `favorite`

ADD CONSTRAINT `favorite_ibfk_1` FOREIGN KEY (`Id_user`) REFERENCES `user` (`id_user`) ON DELETE CASCADE,

ADD CONSTRAINT `favorite_ibfk_2` FOREIGN KEY (`Id_buku`) REFERENCES `buku` (`Id_buku`) ON DELETE CASCADE;

COMMIT;

2. Membuat file konfigurasi koneksi.php

Hal berikutnya yang harus dilakukan adalah membuat fle konfigurasi yang nantinya akan digunakan sebagai penghubung antara database dengan website kita. Yang perlu dilakukan adalah membuat file baru dengan nama koneksi.php

<?php

$user = "root";

$pass = "";

try {

$koneksi = new PDO('mysql:host=localhost;dbname=openbook', $user, $pass);

$koneksi->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $th) {

die("koneksi gagal" . $th->getMessage());

};

Keterangan:

Secara default, untuk username dan password pada mysql adalah root dengan password kosong dan tipe hostnya adalah localhost.

dbname=openbook

Isikan dengan nama database sesuai dengan yang kita buat di phpmyadmin.

3. Login

Pada halaman ini akan ditampilkan fitur login. Fitur login akan muncul saat akan mengakses halaman utama. Sistem akan mengecek apakah saat ini user sedang dalam sesi login, jika tidak di cek apakah ada cookie pada komputer. User saat ini yang dijadikan acuan untuk login langsung. Di Dalam halaman login terdapat fitur captcha matematika serta fitur remember me untuk menggunakan cookie dan ada link untuk mengarahkan ke halaman lupa password.

2. Lupa Password

Source code:

Buat file baru dengan nama login.php, lalu masukan soruce code berikut kedalam file login.php. Setelah itu buat file baru bernama proses.php yang nantinya difungsikan sebagai proses untuk melakukan validasi data login dan captcha yang dimasukan.

a. Captcha

<?php

include "koneksi.php";

session_start();

if (isset($_SESSION['waktu'])) {

header('location: index.php');

}

$rand1 = rand(1, 9);

$rand2 = rand(1, 9);

$operator = array('*', '+');

$randoperator = $operator[rand(0, 1)];

switch ($randoperator) {

case "+":

$math = $rand1 + $rand2;

$_SESSION['cap'] = $math;

break;

case "*":

$math = $rand1 * $rand2;

$_SESSION['cap'] = $math;

break;

};

Letakan code untuk membuat captcha pada bagian atas sebelum tag <HTML>

b. Login

<!DOCTYPE html>

<head>

</head>

<h1 class="h4 text-gray-900 mb-4">Selamat Datang!

<?php if (!empty($_COOKIE['username'])) {

echo "cookie " . $_COOKIE['username'];

}; ?>

</h1>

</div>

<input type="text" class="form-control form-control-user" value="

<?php

if (!empty($_COOKIE['last_in'])) {

echo $_COOKIE['last_in'];

} ?>" placeholder="masukan username atau email!" name="user" required>

</div>

</div>

<?php echo $rand1 . " " . $randoperator . " " . $rand2; ?>

</span>

</div>

<label class="custom-control-label" for="customCheck">Remember

Me</label>

</div>

<button class="btn btn-primary btn-user btn-block" type="submit" name="submit">Login</button>

</form>

<hr>

<a class="small" href="forgot-password.php">Lupa Password?</a>

</div>

</body>

</html>

c. Proses.php

<?php

include "koneksi.php";

session_start();

if (isset($_POST['submit'])) {

if ($_SESSION['cap'] == $_POST['captcha']) {

$sukses = 0;

$user = $_POST['user'];

$pass = md5($_POST['pass']);

$data[] = $user;

$data[] = $pass;

$data[] = $user;

$data[] = $pass;

$query = 'SELECT * FROM user WHERE Email=? AND Password=? OR Username=? AND Password=?';

$select = $koneksi->prepare($query);

$select->execute($data);

$ambil = $select->fetch();

$count = $select->rowCount();

$cookie_user;

if ($count == 1) {

$agent = $_SERVER['HTTP_USER_AGENT'];

$ip = $_SERVER['REMOTE_ADDR'];

$sukses = 1;

if ($sukses == 1) {

$carry[] = $ambil['Username'];

$carry[] = $ip;

$carry[] = $agent;

$query = 'INSERT INTO log_user (nama_user, Ip, Access_from) VALUE (?,?,?)';

$insert = $koneksi->prepare($query);

$insert->execute($carry);

$sukses = 0;

};

$_SESSION['waktu'] = time();

$_SESSION['username'] = $ambil['Username'];

$_SESSION['id'] = $ambil['id_user'];

$_SESSION['akses'] = $ambil['Hak_Akses'];

setcookie("last_in", $user);

setcookie("username", 'null', time() + 3600);

if (isset($_POST['remember'])) {

setcookie("username", $ambil['Username'], time() + 3600);

setcookie("akses", $ambil['Hak_Akses'], time() + 3600);

};

header("location: index.php");

} else {

echo '<script>alert("Gagal Login");window.location="login.php"</script>';

}

} else {

echo "<script type='text/javascript'>alert('captcha yang dimasukan salah');window.location='login.php'</script>";

}

4. Lupa Password

Saat user mengakses menu login dan user lupa dengan password akunnya, maka saat menekan tombol lupa password pada menu login akan diarahkan ke menu lupa password untuk konfirmasi email yang digunakan.

Source code:

<?php

include "koneksi.php";

setcookie("forgot", null, time() - 3600);

if (isset($_POST['submit'])) {

$query = 'SELECT Email FROM user WHERE Email= :email';

$select = $koneksi->prepare($query);

$select->bindParam(':email', $_POST['email']);

$select->execute();

$count = $select->rowCount();

if ($count == 1) {

setcookie("forgot", $_POST['email'], time() + 3600);

header("location: reset-password.php");

} else {

echo '<script>alert("email yang anda masukan belum terdaftar!");window.location="forgot-password.php"</script>';

}

};

<!DOCTYPE html>

<head>

<title>AHMAD FIKRI HUSAINI</title>

</head>

<h1 class="h4 text-gray-900 mb-2">Lupa Password?</h1>

Kami mengerti!, pastikan email yang anda masukan benar untuk

membantu kami menkonfirmasi bahwa ini benar-benar anda!</p>

</div>

<input type="email" class="form-control form-control-user"

name="email" placeholder="Masukan Email Address...">

</div>

<button class="btn btn-primary btn-user btn-block" type="submit"

name="submit">Reset

Password</button>

</form>

<hr>

<a class="small" href="login.php">Sudah Punya Akun?, Log In!</a>

</div>

</body>

</html>

5. Reset Password

Setelah email konfirmasi maka user akan di arahkan ke menu reset password untuk mereset password email yang telah dimasukan sebelumnya.

bhhh

Source code:

<?php

include "koneksi.php";

if (!isset($_COOKIE['forgot'])) {

header("location:forgot-password.php");

};

if (isset($_POST['submit'])) {

$pass = md5($_POST['new']);

$query = 'UPDATE user SET Password= :pass WHERE Email= :email';

$update = $koneksi->prepare($query);

$update->bindParam(':pass', $pass);

$update->bindParam(':email', $_COOKIE['forgot']);

$update->execute();

setcookie("forgot", null, time() - 3600);

echo '<script>alert("password berhasil di reset");window.location="login.php";</script>';

}

<!DOCTYPE html>

<head>

<title>AHMAD FIKRI HUSAINI</title>

rel="stylesheet">

</head>

<h1 class="h4 text-gray-900 mb-2">Masukan Password Baru</h1>

</div>

<input type="password" class="form-control form-control-user"

name="new" placeholder="Masukan Password Baru..."

maxlength="8" required>

</div>

<input type="password" class="form-control form-control-user"

name="conf" placeholder="Confirmasi Password Baru...">

</div>

<button class="btn btn-primary btn-user btn-block" type="submit"

name="submit" onclick="return valid();">Reset Password</button>

</form>

<hr>

<a class="small" href="login.php">Sudah Punya Akun?, Log In!</a>

</div>

function valid() {

if (document.form.new.value != document.form.conf.value) {

alert("Password dan confirmasi password tidak sama!!");

document.form.conf.focus();

return false;

}

return true;

}

</script>

</body>

</html>

6. Konfirmasi logout

Pada menu dashboard baik admin atau anggota(siswa/guru) terdapat tombol logout pada kanan atas bagian navigasi. Ketika tombol di klik akan memunculkan sebuah dialog box untuk konfirmasi logout.

Terdapat tiga tahapan pembuatan tombol logout dan konfirmasi untuk logout. pertama -tama yang perlu kita buat adalah tombol logout yang nantinya akan ditempelkan pada hdeader.php dan menjadi trigger dari modal box untuk menu konfirmasi logout. Kedua adalah membuat modal box logout sebagai menu konfirmasi user untuk melakukan logout yang nantinya ditempelkan pada file header.php. Dan yang terakhir adalah file bernama logout.php yang berfungsi untuk mengakhiri sesi login pengguna dan mengembalikan pengguna ke menu login.

Source code:

a. Modal-box logout (header.php)

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

aria-hidden="true">

<h5 class="modal-title" id="exampleModalLabel">Yakin ingin Logout?</h5>

</button>

</div>

<div class="modal-body">Memilih "Logout" berarti mengakhiri sesi anda saat ini.</div>

<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>

<a class="btn btn-primary" href="logout.php">Logout</a>

</div>

b. Logout button (header.php)

<button class="btn btn-primary btn-icon-split" data-toggle="modal"

data-target="#logoutModal">

</span>

<span class="text">Logout</span>

</button>

</a>

</li>

c. Logout.php

<?php

session_start();

session_destroy();

setcookie("username", "", time() - 3600);

setcookie("akses", "", time() - 3600);

header('Location: login.php');

Note: source code button dan modal box sudah tertempel pada source code header.php yang diberikan oleh penulis.

7. Dashboard admin

Pada menu dashboard admin terdapat dua tombol untuk mengakses menu table pengguna dan buku serta pada bagian navigasi sebelh kiri terdapat tombol untuk mengarahkan ke dashboard, tab favorite dan list table.

8. Dashboard murid/guru

Pada menu dashboard ini, pengguna dapat melihat daftar buku sesuai dengan kategori pada buku tersebut serta pada tiap-tiap kategori diberikan fitur carousel untuk melihat buku-buku lain yang terdaftar di satu kategori yang sama.

Untuk membuat menu index/dashboard seperti di atas. Penulis memecah file menjadi 3 bagian yaitu header.php yang menampung source file seperti css serta fitur-fitur yang berkaitan dengan header (dropdown menu, sidebar, logout button, profile picture), index.php yang berisi halaman dashboard sesuai dengan role masing-masing user, dan footer.php yang berisi bagian bawah body dari index.php dan menyimpan source javascript/jquery.

Source code:

a. Header.php

<?php

session_start();

$timeout = 1;

$timeout = $timeout * 3600;

if (isset($_SESSION['waktu'])) {

$elapsed_time = time() - $_SESSION['waktu'];

// header('refresh:59');

if ($elapsed_time >= $timeout && $_COOKIE['username'] == 'null') {

session_destroy();

echo "<script type='text/javascript'>alert('Sesi telah berakhir');window.location='logout.php'</script>";

} else {

$_SESSION['waktu'] = time();

}

} else {

header("location: login.php");

}

<!DOCTYPE html>

<head>

type="text/css">

<link

href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"

rel="stylesheet">

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"

aria-labelledby="exampleModalLabel" aria-hidden="true">

<h5 class="modal-title" id="exampleModalLabel">Yakin ingin Logout?</h5>

</button>

</div>

<div class="modal-body">Memilih "Logout" berarti mengakhiri sesi anda saat ini.</div>

Cancel

</button>

<a class="btn btn-primary" href="logout.php">Logout</a>

</div>

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"

id="accordionSidebar">

</div>

</a>

<span>Dashboard</span></a>

</li>

<span>Favorite</span></a>

</li>

<?php if ($_SESSION['akses'] == 'admin' || $_SESSION['akses'] == 'petugas') { ?>

Interface

</div>

<a class="nav-link collapsed" href="#" data-toggle="collapse"

data-target="#collapsetables"

aria-expanded="true" aria-controls="collapsetables">

<span>Tables</span>

</a>

<div id="collapsetables" class="collapse" aria-labelledby="headingtables"

data-parent="#accordionSidebar">

<?php if ($_SESSION['akses'] == 'admin') { ?>

<a id="pgn" class="collapse-item" href="pengguna.php">Pengguna</a>

<?php }; ?>

</div>

</li>

<?php }; ?>

</div>

</ul>

</button>

<a class="nav-link dropdown-toggle" href="#" id="searchDropdown"

role="button" data-toggle="dropdown" aria-haspopup="true"

aria-expanded="false">

</a>

<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"

aria-labelledby="searchDropdown">

<input type="text" class="form-control bg-light border-0 small"

placeholder="Search for..." aria-label="Search"

aria-describedby="basic-addon2">

</button>

</div>

</form>

</div>

</li>

<button class="btn btn-primary btn-icon-split" data-toggle="modal"

data-target="#logoutModal">

</span>

<span class="text">Logout</span>

</button>

</a>

</li>

<?php if (isset($_SESSION['username'])) {

echo $_SESSION['username'];

} ?>

</span>

</a>

</li>

</ul>

</nav>

b. Index.php

<?php include "header.php"; include "koneksi.php"; ?>

<?php if ($_SESSION['akses'] == 'admin' || $_SESSION['akses'] == 'petugas') { ?>

<?php if ($_SESSION['akses'] == 'admin') { ?>

<a href="pengguna.php" class="text-xs font-weight-bold text-primary

text-uppercase" style="text-decoration: none;">Pengguna</a>

</div>

</div>

<?php }; ?>

<a href="buku.php" class="text-xs font-weight-bold text-uppercase

text-success" style="text-decoration: none;">Buku</a>

</div>

</div>

<?php }; ?>

<?php if ($_SESSION['akses'] == 'anggota') { ?>

<div>

<button class="btn btn-primary mx-1" type="submit" name="submit"><span

class="fa fa-search"></span></button>

</form>

</div>

</form>

<?php

if (isset($_POST['submit']) && $_POST['key'] != '') {

$key = '%' . $_POST['key'] . '%';

$query = 'SELECT * FROM buku, kategori WHERE buku.Id_kategori = kategori.id_kategori

AND (buku.Judul LIKE :judul

OR buku.Penulis LIKE :penulis

OR buku.Penerbit LIKE :penerbit OR buku.Tahun_terbit LIKE :terbit

OR kategori.nama_kategori LIKE :kategori);';

$search = $koneksi->prepare($query);

$search->bindParam(':judul', $key);

$search->bindParam(':penulis', $key);

$search->bindParam(':penerbit', $key);

$search->bindParam(':terbit', $key);

$search->bindParam(':kategori', $key);

$search->execute();

foreach ($search as $value) {

<img class="img-fluid" src="uploads/cover/

<?php echo $value['Cover_buku']; ?>">

</div>

<b><a href="detail.php?id=<?php echo $value['Id_buku']; ?>"

style="text-decoration: none; color: black;">

<?php echo $value['Judul'] .

" (" . $value['Tahun_terbit'] . ")"; ?></a></b>

</h5>

</div>

<strong

class="float-start text-start text-primary mt-n1">

<?php echo $value['Penulis']; ?>

</strong>

</div>

<?php echo $value['Penerbit']; ?>

</p>

</div>

<p class="bg-secondary text-white text-center

rounded-pill">

<?php echo $value['nama_kategori']; ?></p>

</div>

<?php };

} else if(isset($_POST['submit']) && $_POST['key'] == '')

{ echo "<script>window.location='index.php';</script>";

} else { ?>

<?php

$query = $koneksi->prepare('SELECT * FROM buku, kategori

Where buku.Id_kategori = kategori.id_kategori

GROUP BY kategori.id_kategori;');

$query->execute();

$kate = $query->fetchAll();

foreach ($kate as $k) {

<strong class="mx-2 text-uppercase"

style="color: black;"><b>

<?php echo $k['nama_kategori']; ?>

</b>

</strong>

</div>

<div id="<?php echo $k['nama_kategori']; ?>" class="carousel slide carousel-fade"

data-bs-ride="carousel" data-bs-interval="false">

<?php

$query = $koneksi->prepare("SELECT * FROM buku INNER JOIN kategori

ON buku.Id_kategori = kategori.id_kategori

WHERE kategori.id_kategori = ?");

$query->execute(array($k['id_kategori']));

$data = $query->fetchAll();

$cc = 0;

foreach ($data as $carousel) {

$cc++;

<img class="img-fluid"

src="uploads/cover/<?php echo $carousel['Cover_buku'] ?>">

</div>

<b><a href="detail.php?id=

<?php echo $carousel['Id_buku']; ?>"

style="text-decoration: none;

color: black;">

<?php echo $carousel['Judul']; ?></a></b>

</h5>

</div>

<strong

class="float-start text-start text-primary mt-n1">

<?php echo $carousel['Penulis']; ?></strong>

</div>

<?php echo $carousel['Penerbit'];; ?></p>

</div>

<p class="bg-secondary text-white text-center

rounded-pill">

<?php echo $carousel['nama_kategori']; ?>

</p>

</div>

<?php }; ?>

</div>

<a class="carousel-control-prev" href="#

<?php echo $k['nama_kategori']; ?>" role="button"

data-bs-slide="prev">

</a>

<a class="carousel-control-next" href="#

<?php echo $k['nama_kategori']; ?>" role="button"

data-bs-slide="next">

</a>

</div>

<?php }; }; ?>

</div>

<?php }; ?>

<?php include "footer.php"; ?>

c. Footer.php

</div>

</a>

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">

</script>

jQuery(document).ready(function($) {

$('.fav').on('click', function(e) {

e.preventDefault();

var id_user = $(this).attr('user_data');

var id_buku = $(this).attr('buku_data');

var aksi = $(this).attr('aksi');

if (aksi == "favorite") {

$(this).attr('aksi', 'unfavorite') // Change the div method attribute to Unlike

$('#' + id_user).replaceWith('<button id="' + id_user +

'" class="fav btn btn-warning float-end" user_data="' + id_user +

'" buku_data="' + id_buku +

'" aksi="favorite"><i class="fa-regular fa-star"></i></button>')

} else {

$(this).attr('aksi', 'unfavorite')

$('#' + id_user).replaceWith('<button id="' + id_user +

'" class="fav btn btn-outline-warning float-end" user_data="' + id_user +

'" buku_data="' + id_buku +

'" aksi="favorite"><i class="fa-regular fa-star"></i></button>')

}

$.ajax({

url: 'proses_fav.php',

type: 'GET',

data: {

id_user: id_user,

id_buku: id_buku,

aksi: aksi

cache: false,

success: function(data) {}

});

let items1 = document.querySelectorAll('.carousel .carousel-item')

items1.forEach((el) => {

const minPerSlide = 3

let next = el.nextElementSibling

for (var i = 1; i < minPerSlide; i++) {

if (!next) {

// wrap carousel by using first child

next = items1[0]

}

let cloneChild = next.cloneNode(true)

el.appendChild(cloneChild.children[0])

next = next.nextElementSibling

}

})

$(document).ready(function() {

$('.table').DataTable({

lengthMenu: [

[5, 10, 25, 50, -1],

[5, 10, 25, 50, 'All'],

});

$('.confirm').click(function() {

var id = $(this).attr('data-id')

var judul = $(this).attr('data-judul')

Swal.fire({

title: 'Confirmasi',

text: "apakah anda yakin menghapus data buku dengan judul " + judul + "?",

icon: 'warning',

showCancelButton: true,

confirmButtonColor: '#3085d6',

cancelButtonColor: '#d33',

confirmButtonText: 'Ya, Hapus!'

}).then((result) => {

if (result.isConfirmed) {

Swal.fire({

icon: 'success',

title: 'Berhasil!',

text: 'Data Berhasil Di Hapus!!',

showConfirmButton: false,

timer: 1500

})

window.location = "delete_buku.php?id=" + id;

}

})

});

$('.confirm2').click(function() {

var id = $(this).attr('data-id')

var email = $(this).attr('data-email')

Swal.fire({

title: 'Confirmasi',

text: "apakah anda yakin menghapus data buku dengan email " + email + "?",

icon: 'warning',

showCancelButton: true,

confirmButtonColor: '#3085d6',

cancelButtonColor: '#d33',

confirmButtonText: 'Ya, Hapus!'

}).then((result) => {

if (result.isConfirmed) {

Swal.fire({

icon: 'success',

title: 'Berhasil!',

text: 'Data Berhasil Di Hapus!!',

showConfirmButton: false,

timer: 1500

})

window.location = "delete_pengguna.php?id=" + id;

}

})

});

</script>

</body>

</html>

9. Tabel buku

Pada bagian ini terdapat beberapa fitur seperti tombolmuntuk menambahkan data buku baru, update buku, melihat detail dari buku serta menghapus buku dan fitur pencarian dan pagination dari table buku.

Buat file baru dengan nama buku.php lalu kemudian masukan source code berikut yang nantinya berfungsi untuk menampilkan tabel data buku beserta dengan fitur CRUD nya.

Source code:

<?php

include "header.php";

include "koneksi.php";

if ($_SESSION['akses'] == 'anggota') {

echo '<script>window.location="index.php"</script>';

}

<h6 class="m-0 font-weight-bold text-primary">Tabel Buku</h6>

</div>

<div>

</div>

<thead>

<tr>

<th>judul buku</th>

<th>cover buku</th>

<th>penulis</th>

<th>penerbit</th>

<th>kategori</th>

<th>tahun terbit</th>

<th>action</th>

</tr>

</thead>

<?php

$query = $koneksi->prepare("SELECT * FROM buku, kategori

Where buku.Id_kategori = kategori.id_kategori");

$query->execute();

$data = $query->fetchAll();

$no = 1;

foreach ($data as $value) {

<tr>

<td class="text-center"><img src="uploads/cover/

<?php echo $value['Cover_buku'] ?>"

style="width: 40px;"></td>

<div class="col-md-3 p-2"> <a href="detail.php?id=

<?php echo $value['Id_buku']; ?>"

class="btn btn-success">

</a></div>

<div class="col-md-3 p-2"><a

href="update_buku.php?id=<?php echo $value['Id_buku']; ?>"

class="btn btn-warning">

</a></div>

<div class="col-md-3 p-2"> <a href="#" class="btn btn-danger

confirm" data-id="<?php echo $value['Id_buku']; ?>"

data-judul="<?php echo $value['Judul']; ?>">

</a></div>

</div>

</td>

</tr>

<?php }; ?>

</tbody>

</table>

</div>

<?php include "footer.php"; ?>

10. Table Pengguna

Pada bagian ini terdapat beberapa fitur seperti tombol untuk menambahkan data pengguna baru, update pengguna, serta menghapus data pengguna dan fitur pencarian dan pagination dari table pengguna.

Buat file baru dengan nama pengguna.php lalu kemudian masukan source code berikut yang nantinya berfungsi untuk menampilkan tabel data pengguna yang tersimpan pada database.

Source code:

<?php

include "header.php";

include "koneksi.php";

if ($_SESSION['akses'] != 'admin') {

echo '<script>window.location="index.php"</script>';

}

<h6 class="m-0 font-weight-bold text-primary">Tabel Pengguna</h6>

</div>

<div>

</div>

<table class="table table-bordered table-responsive-md" id="dataTable"

width="100%" cellspacing="0">

<thead>

<tr>

<th>Email</th>

<th>username</th>

<th>password</th>

<th>hak akses</th>

<th>action</th>

</tr>

</thead>

<?php

$query = $koneksi->prepare("SELECT * FROM user");

$query->execute();

$data = $query->fetchAll();

$no = 1;

foreach ($data as $value) {

<tr>

<a href="update_pengguna.php?id=

<?php echo $value['id_user']; ?>"

class="btn btn-warning">

</a>

</div>

<div class="col-md-3 p-1"><a href="#"

class="btn btn-danger confirm2"

data-id="<?php echo $value['id_user']; ?>"

data-email="<?php echo $value['Email']; ?>">

</a></div>

</div>

</td>

</tr>

<?php }; ?>

</tbody>

</table>

</div>

<?php include "footer.php"; ?>

11. Searching data buku/pengguna di table

Pada fitur searching yang ada pada tabel buku dan pengguna dapat dilakukan secara realtime dengan bantuan data tables. Dengan begitu pencarian dapat dilakukan berkali-kali tanpa harus reset halaman berkali-kali.

Berikutnya adalah pembuatan fitur searching data table dan pagination yang dibantu dengan penggunaan jquery library yaitu datatables jquery library. Untuk membuatnya adalah pastikan sudah import library jquery dan datatables pada footer.php. Jika sudah masukan source code berikut pada bagian <script></script>

Source code:

$(document).ready(function() {

$('.table').DataTable({

lengthMenu: [

[5, 10, 25, 50, -1],

[5, 10, 25, 50, 'All'],

});

12. Insert data buku

Pada fitur ini admin dapat memasukan data buku berupa judul, penulis, penerbit, deskripsi buku, tahun terbit, kategori dan file cover dan bukunya

Langkah pembuatannya iyalah dengan membuat file baru dengan nama insert_buku.php dan kemudian masukan source code dibawah.

Source code:

<?php

include "header.php";

include "koneksi.php";

if ($_SESSION['akses'] == 'anggota') {

echo '<script>window.location="index.php"</script>';

}

if (isset($_POST['submit'])) {

$title = $_POST['judul'];

$writer = $_POST['penulis'];

$publisher = $_POST['penerbit'];

$cat = $_POST['kategori'];

$release = $_POST['tahun'];

$desc = $_POST['deskripsi'];

$pdfname = $_FILES['pdf']['name'];

$pdftemp = $_FILES['pdf']['tmp_name'];

$pdftype = $_FILES['pdf']['type'];

$pdfsize = $_FILES['pdf']['size'];

$target_dir_pdf = ('uploads/book/');

$removeExtension_pdf = explode('.', basename($pdfname));

$rename_pdf = date("m-d-y") . "." . date("h-i-s") . "." . $title . "." . end($removeExtension_pdf);

$target_file_pdf = $target_dir_pdf . $rename_pdf;

$filename = $_FILES['cover']['name'];

$filetemp = $_FILES['cover']['tmp_name'];

$filetype = $_FILES['cover']['type'];

$filesize = $_FILES['cover']['size'];

$target_dir = ('uploads/cover/');

$removeExtension = explode('.', basename($filename));

$rename = date("m-d-y") . "." . date("h-i-s") . "." . $title . "." . end($removeExtension);

$target_file = $target_dir . $rename;

$data[] = $title;

$data[] = $writer;

$data[] = $publisher;

$data[] = $cat;

$data[] = $release;

$data[] = $rename;

$data[] = $rename_pdf;

$data[] = $desc;

if (($filetype == 'image/png' || $filetype == 'image/jpg' || $filetype == 'image/jpeg') &&

($pdftype == 'application/pdf')) {

if (move_uploaded_file($filetemp, $target_file) &&

move_uploaded_file($pdftemp, $target_file_pdf)) {

$query = 'INSERT INTO buku

(Judul, Penulis, Penerbit, Id_kategori, Tahun_terbit, Cover_buku, file_buku, deskripsi)

VALUE (?,?,?,?,?,?,?,?)';

$insert = $koneksi->prepare($query);

$insert->execute($data);

echo '<script>alert("Berhasil Tambah Data");window.location="buku.php"</script>';

}

} else {

echo '<script>alert("hanya dapat upload file PNG/JPEG/JPG dan PDF");

window.location="insert_buku.php"</script>';

}

<h4 class="card-title">Insert Data Buku</h4>

<label>Judul buku</label>

<input type="text" value="" class="form-control" name="judul" maxlength="50"

required>

</div>

<label>Penulis</label>

<input type="text" value="" class="form-control" name="penulis" maxlength="50"

required>

</div>

<label>Penerbit</label>

<input type="text" value="" class="form-control" name="penerbit" maxlength="50"

required>

</div>

<label>Deskripsi</label>

</textarea>

</div>

<label>Cover buku</label>

</div>

</div>

<label>Tahun terbit</label>

<?php for ($i = 1990; $i <= 2025; $i++) { ?>

<?php }; ?>

</select>

</div>

<label>Kategori</label>

<?php

$query = $koneksi->prepare("SELECT * FROM kategori");

$query->execute();

$data = $query->fetchAll();

foreach ($data as $value) {

<?php echo $value['nama_kategori']; ?>

</option>

<?php }; ?>

</select>

</div>

Insert</button>

</form>

</div>

<?php

include "footer.php";

13. Update data buku

Pada bagian ini admin dapat memperbaharui data buku dari judul hingga file-file yang berhubungan dengan buku tersebut dan terdapat preview dari cover yang lama dan preview nama file bukunya.

Langkah pembuatannya iyalah dengan membuat file baru dengan nama update_buku.php dan kemudian masukan source code dibawah.

Source code:

<?php

include "header.php";

include "koneksi.php";

if ($_SESSION['akses'] == 'anggota') {

echo '<script>window.location="index.php"</script>';

}

if (isset($_POST['submit'])) {

$title = $_POST['judul'];

$writer = $_POST['penulis'];

$publisher = $_POST['penerbit'];

$cat = $_POST['kategori'];

$release = $_POST['tahun'];

$desc = $_POST['deskripsi'];

$id = $_POST['id'];

$pdfname = $_FILES['pdf']['name'];

$pdftemp = $_FILES['pdf']['tmp_name'];

$pdftype = $_FILES['pdf']['type'];

$pdfsize = $_FILES['pdf']['size'];

$filename = $_FILES['cover']['name'];

$filetemp = $_FILES['cover']['tmp_name'];

$filetype = $_FILES['cover']['type'];

$filesize = $_FILES['cover']['size'];

if ($filename == "" && $pdfname == "") {

$data[] = $title;

$data[] = $writer;

$data[] = $publisher;

$data[] = $cat;

$data[] = $release;

$data[] = $desc;

$data[] = $id;

$query = 'UPDATE buku SET Judul=?, Penulis=?, Penerbit=?, Id_kategori=?, Tahun_terbit=?,

deskripsi=? WHERE Id_buku =?';

$update = $koneksi->prepare($query);

$update->execute($data);

echo '<script>alert("Berhasil Edit Data");window.location="buku.php"</script>';

} else if ($filename != "" && $pdfname == "") {

$target_dir = ('uploads/cover/');

$removeExtension = explode('.', basename($filename));

$rename = date("m-d-y") . "." . date("h-i-s") . "." . $title . "." . end($removeExtension);

$target_file = $target_dir . $rename;

$cover = 'SELECT Cover_buku FROM buku WHERE Id_buku= ?';

$proses = $koneksi->prepare($cover);

$proses->execute(array($id));

$lama = $proses->fetch();

if ($filetype == 'image/png' || $filetype == 'image/jpg' || $filetype == 'image/jpeg') {

$data[] = $title;

$data[] = $writer;

$data[] = $publisher;

$data[] = $cat;

$data[] = $release;

$data[] = $rename;

$data[] = $desc;

$data[] = $id;

if (move_uploaded_file($filetemp, $target_file)) {

unlink('uploads/cover/' . $lama['Cover_buku']);

$query = 'UPDATE buku SET Judul=?, Penulis=?, Penerbit=?, Id_kategori=?,

Tahun_terbit=?, Cover_buku=?, deskripsi=? WHERE Id_buku=?';

$update = $koneksi->prepare($query);

$update->execute($data);

echo '<script>alert("Berhasil edit buku");window.location="buku.php"</script>';

}

} else {

echo '<script>alert("hanya dapat upload file PNG/JPEG/JPG");

window.location="update_buku.php?id=' . $id . '"</script>';

}

} else if ($filename == "" && $pdfname != "") {

$target_dir = ('uploads/book/');

$removeExtension = explode('.', basename($pdfname));

$rename = date("m-d-y") . "." . date("h-i-s") . "." . $title . "." . end($removeExtension);

$target_file = $target_dir . $rename;

$file = 'SELECT file_buku FROM buku WHERE Id_buku= ?';

$proses = $koneksi->prepare($file);

$proses->execute(array($id));

$lama = $proses->fetch();

if ($pdftype == 'application/pdf') {

$data[] = $title;

$data[] = $writer;

$data[] = $publisher;

$data[] = $cat;

$data[] = $release;

$data[] = $rename;

$data[] = $desc;

$data[] = $id;

if (move_uploaded_file($pdftemp, $target_file)) {

unlink('uploads/book/' . $lama['file_buku']);

$query = 'UPDATE buku SET Judul=?, Penulis=?,

Penerbit=?, Id_kategori=?, Tahun_terbit=?,

file_buku=?, deskripsi=?

WHERE Id_buku=?';

$update = $koneksi->prepare($query);

$update->execute($data);

echo '<script>alert("Berhasil edit buku");window.location="buku.php"</script>';

}

} else {

echo '<script>alert("hanya dapat upload file PDF");

window.location="update_buku.php?id=' . $id . '"</script>';

}

} else if ($filename != "" && $pdfname != "") {

$target_dir_pdf = ('uploads/book/');

$removeExtension_pdf = explode('.', basename($pdfname));

$rename_pdf = date("m-d-y") . "." . date("h-i-s") . "." .

$title . "." . end($removeExtension_pdf);

$target_file_pdf = $target_dir_pdf . $rename_pdf;

$target_dir = ('uploads/cover/');

$removeExtension = explode('.', basename($filename));

$rename = date("m-d-y") . "." . date("h-i-s") . "." . $title . "." . end($removeExtension);

$target_file = $target_dir . $rename;

$file = 'SELECT Cover_buku, file_buku FROM buku WHERE Id_buku= ?';

$proses = $koneksi->prepare($file);

$proses->execute(array($id));

$lama = $proses->fetch();

if (($filetype == 'image/png' || $filetype == 'image/jpg' || $filetype == 'image/jpeg') &&

($pdftype == 'application/pdf')) {

$data[] = $title;

$data[] = $writer;

$data[] = $publisher;

$data[] = $cat;

$data[] = $release;

$data[] = $rename;

$data[] = $rename_pdf;

$data[] = $desc;

$data[] = $id;

if (move_uploaded_file($filetemp, $target_file) &&

move_uploaded_file($pdftemp, $target_file_pdf)) {

unlink('uploads/book/'.$lama['file_buku']);

unlink('uploads/cover/'.$lama['Cover_buku']);

$query = 'UPDATE buku SET Judul=?, Penulis=?,

Penerbit=?, Id_kategori=?, Tahun_terbit=?,

Cover_buku=?, file_buku=?, deskripsi=?

WHERE Id_buku=?';

$insert = $koneksi->prepare($query);

$insert->execute($data);

echo '<script>alert("Berhasil Edit Data");window.location="buku.php"</script>';

}

} else {

echo '<script>alert("hanya dapat upload file PNG/JPEG/JPG dan PDF");

window.location="update_buku.php?id=' . $id . '"</script>';

}

$id = $_GET['id'];

$query = 'SELECT * FROM buku WHERE Id_buku =?';

$select = $koneksi->prepare($query);

$select->execute(array($id));

$value = $select->fetch();

<h4 class="card-title">Update Data Buku</h4>

<label>Judul buku</label>

<input type="text" value="<?php echo $value['Judul'] ?>"

class="form-control" name="judul"

maxlength="50" required>

</div>

<label>Penulis</label>

<input type="text" value="<?php echo $value['Penulis'] ?>"

class="form-control" name="penulis"

maxlength="50" required>

</div>

<label>Penerbit</label>

<input type="text" value="<?php echo $value['Penerbit'] ?>"

class="form-control" name="penerbit"

maxlength="50" required>

</div>

<label>Deskripsi</label>

<textarea class="form-control" name="deskripsi" style="height: 100px"

required><?php echo $value['deskripsi']; ?></textarea>

</div>

<label class="mb-1">Cover Lama</label>

<br>

<?php if ($value['Cover_buku'] != "") { ?>

<img src="uploads/cover/<?php echo $value['Cover_buku']; ?>"

width="200px" height="300px" alt="" srcset="">

<?php } ?>

<br>

<label class="mt-2">Cover baru</label>

</div>

<?php if ($value['file_buku'] != '') { ?>

</div>

<label>Tahun terbit</label>

<?php for ($i = 1990; $i <= 2025; $i++) { ?>

<option value="<?php echo $i; ?>"

<?php if ($value['Tahun_terbit'] == $i)

{

echo "selected";

} ?>>

<?php echo $i; ?></option>

<?php }; ?>

</select>

</div>

<label>Tahun terbit</label>

<?php

$q = $koneksi->prepare("SELECT * FROM kategori");

$q->execute();

$d = $q->fetchAll();

foreach ($d as $v) {

<option value="<?php echo $v['id_kategori']; ?>"

<?php if ($value['Id_kategori'] == $v['id_kategori'])

{

echo "selected";

} ?>>

<?php echo $v['nama_kategori']; ?></option>

<?php }; ?>

</select>

</div>

Insert</button>

</form>

</div>

<?php

include "footer.php";

14. Konfirmasi saat delete buku/pengguna

Saat tombol delete pada tabel pengguna dan buku di tekan akan muncul modal box untuk mengkonfirmasi apakah data akan benar-benar dihapus dari database dan table.

Terdapat dua tahapan yang diperlukan untuk membuat delete button dan konfirmasinya. Tahap pertama adalah membuat file dengan nama delete_buku.php dan delete_pengguna.php yang digunakan untuk proses penghapusan data buku dari database serta file gambar yang ada dilokal. Kedua adalah membuat konfirmasi menggunakan sweetalert js library.

Note: source code sweetalert dan konfigurasi tombol sudah tertempel pada footer.php dan buku.php

Source code:

a. Delete_buku.php

<?php

include('koneksi.php');

$id = $_GET['id'];

$cover = 'SELECT Cover_buku, file_buku FROM buku WHERE Id_buku= ?';

$proses = $koneksi->prepare($cover);

$proses->execute(array($id));

$data = $proses->fetch();

$sql = "DELETE FROM buku WHERE Id_buku= ?";

$row = $koneksi->prepare($sql);

$row->execute(array($id));

unlink('uploads/book/' . $data['file_buku']);

unlink('uploads/cover/' . $data['Cover_buku']);

echo '<script>window.location="buku.php"</script>';

b. delete_pengguna.php

<?php

include('koneksi.php');

$id = $_GET['id'];

$sql = "DELETE FROM user WHERE id_user= ?";

$row = $koneksi->prepare($sql);

$row->execute(array($id));

echo '<script>window.location="pengguna.php"</script>';

c. Sweetalert script di footer.php

$('.confirm').click(function() {

var id = $(this).attr('data-id')

var judul = $(this).attr('data-judul')

Swal.fire({

title: 'Confirmasi',

text: "apakah anda yakin menghapus data buku dengan judul " + judul + "?",

icon: 'warning',

showCancelButton: true,

confirmButtonColor: '#3085d6',

cancelButtonColor: '#d33',

confirmButtonText: 'Ya, Hapus!'

}).then((result) => {

if (result.isConfirmed) {

Swal.fire({

icon: 'success',

title: 'Berhasil!',

text: 'Data Berhasil Di Hapus!!',

showConfirmButton: false,

timer: 1500

})

window.location = "delete_buku.php?id=" + id;

}

})

});

$('.confirm2').click(function() {

var id = $(this).attr('data-id')

var email = $(this).attr('data-email')

Swal.fire({

title: 'Confirmasi',

text: "apakah anda yakin menghapus data buku dengan email " + email + "?",

icon: 'warning',

showCancelButton: true,

confirmButtonColor: '#3085d6',

cancelButtonColor: '#d33',

confirmButtonText: 'Ya, Hapus!'

}).then((result) => {

if (result.isConfirmed) {

Swal.fire({

icon: 'success',

title: 'Berhasil!',

text: 'Data Berhasil Di Hapus!!',

showConfirmButton: false,

timer: 1500

})

window.location = "delete_pengguna.php?id=" + id;

}

})

});

15. Insert data pengguna

Pada fitur ini admin dapat memasukan data pengguna berupa email, username, password, dan hak akses.

Langkah pembuatannya iyalah dengan membuat file baru dengan nama insert_pengguna.php dan kemudian masukan source code dibawah.

Source code:

<?php

include "header.php";

include "koneksi.php";

if ($_SESSION['akses'] != 'admin') {

echo '<script>window.location="index.php"</script>';

}

if (isset($_POST['submit'])) {

$email = $_POST['email'];

$name = $_POST['username'];

$pass = md5($_POST['password']);

$hak = $_POST['hak'];

$data[] = $email;

$data[] = $name;

$data[] = $pass;

$data[] = $hak;

$query = 'INSERT INTO user (Email, Username, Password, Hak_Akses) VALUE (?,?,?,?)';

$insert = $koneksi->prepare($query);

$insert->execute($data);

echo '<script>alert("Berhasil Tambah Data");window.location="pengguna.php"</script>';

}

<h4 class="card-title">Insert Data Pengguna</h4>

<label>Email</label>

</div>

<label>Username</label>

<input type="text" value="" class="form-control" name="username" maxlength="25"

required>

</div>

<label>Password</label>

<input type="Password" value="" class="form-control" name="password" maxlength="8"

required>

</div>

<label>Hak Akses</label>

<option value="admin">Admin</option>

<option value="petugas">petugas</option>

<option value="anggota">Anggota</option>

</select>

</div>

Insert</button>

</form>

</div>

<?php

include "footer.php";

16. Update data pengguna

Pada bagian ini admin dapat memperbaharui data pengguna dari, username, password dan hak akses.

Langkah pembuatannya iyalah dengan membuat file baru dengan nama insert_pengguna.php dan kemudian masukan source code dibawah.

Source code:

<?php

include "header.php";

include "koneksi.php";

if ($_SESSION['akses'] != 'admin') {

echo '<script>window.location="index.php"</script>';

}

if (isset($_POST['submit'])) {

$user = $_POST['username'];

$pass = md5($_POST['password']);

$hak = $_POST['hak'];

$id = $_POST['id'];

$data[] = $user;

$data[] = $pass;

$data[] = $hak;

$data[] = $id;

$query = 'UPDATE user SET Username=?, Password=?, Hak_Akses=? WHERE id_user=?';

$update = $koneksi->prepare($query);

$update->execute($data);

echo '<script>alert("Berhasil Edit Data");window.location="pengguna.php"</script>';

}

$id = $_GET['id'];

$query = 'SELECT * FROM user WHERE id_user =?';

$select = $koneksi->prepare($query);

$select->execute(array($id));

$value = $select->fetch();

<h4 class="card-title">Update Data Pengguna</h4>

<label>Username</label>

<input type="text" value="<?php echo $value['Username']; ?>"

class="form-control" name="username" maxlength="25"

required>

</div>

<label>Password</label>

<input type="Password" value="<?php echo $value['Password']; ?>"

class="form-control" name="password" maxlength="8" required>

</div>

<label>Hak Akses</label>

<option value="admin"

<?php if ($value['Hak_Akses'] == "admin") : echo "selected";

endif ?>>admin</option>

<option value="petugas"

<?php if ($value['Hak_Akses'] == "petugas") : echo "selected";

endif ?>>petugas</option>

<option value="anggota"

<?php if ($value['Hak_Akses'] == "anggota") : echo "selected";

endif ?>>Anggota</option>

</select>

</div>

Update</button>

</form>

</div>

<?php

include "footer.php";

17. Searching data buku di dashboard murid/guru

Ini adalah fitur pencarian buku yang ada pada menu dashboard anggota(siswa/guru).

Sedikit berbeda dengan fitur searching pada menu tabel pengguna dan buku, untuk menu dashboard murid pembuatan fitur searching menggunakan php murni berikut adalah source code nya yang sudah penulis tempelkan sebelumnya pada index.php

Source code:

a. Code form search

<div>

<input class="form-control me-2" type="text" placeholder="cari...."

name="key">

</form>

</div>

b. Query Code

<?php

if (isset($_POST['submit']) && $_POST['key'] != '') {

$key = '%' . $_POST['key'] . '%';

$query = 'SELECT * FROM buku, kategori

WHERE buku.Id_kategori = kategori.id_kategori

AND (buku.Judul LIKE :judul

OR buku.Penulis LIKE :penulis

OR buku.Penerbit LIKE :penerbit

OR buku.Tahun_terbit LIKE :terbit

OR kategori.nama_kategori LIKE :kategori);';

$search = $koneksi->prepare($query);

$search->bindParam(':judul', $key);

$search->bindParam(':penulis', $key);

$search->bindParam(':penerbit', $key);

$search->bindParam(':terbit', $key);

$search->bindParam(':kategori', $key);

$search->execute();

foreach ($search as $value) {

18. Detail buku (favorite button)

Ini adalah fitur untuk menampilkan detail dari masing-masing buku. Untuk mengaksesnya ada dua yaitu saat menjadi admin, tekan tombol detail (logo mata) pada table buku maka akan diarahkan ke halaman detail buku tersebut. Cara yang kedua saat menjadi anggota(siswa/guru) dengan cara menekan pada bagian judul buku maka akan langsung diarahkan ke halaman ini. Lalu pada menu detail buku terdapat tombol favorite dan saat ditekan maka akan otomatis akan mengisi tab favorite user yang mengakses saat ini.

Pada bagian ini penulis membuat halaman detail dari sebuah buku agar ketika judul dari buku yang ada pada dashboard siswa diklik maka akan menunjukan detail dari buku serta file pdf dari buku tersebut untuk dibaca sama halnya dengan ketika berada pada dashboard admin/guru yang nantinya juga dapat melihat detail buku dengan menekan tombol yang berlogokan mata pada tabel buku. Terdapat beberapa tahapan dalam pembuatan menu detail. Pertama adalah membuat file baru dengan nama detail.php yang nantinya berfungsi untuk menload semua data buku yyang dipilih oleh pengguna dan akan ditampilkan pada browser. Kemudian tombol favorite yang nantinya akan terintegrasi dengan menu favorite.

Source code:

<?php

include "header.php";

include "koneksi.php";

function checkFav($id_user, $id_buku, $koneksi)

{

$data[] = $id_user;

$data[] = $id_buku;

$query = 'SELECT * FROM favorite WHERE Id_user =? AND Id_buku=?';

$check = $koneksi->prepare($query);

$check->execute($data);

$isi = $check->fetch();

if ($isi == 0){

echo '<script>console.log("unfav")</script>';

echo '<button id="' . $id_user . '" class="fav btn btn-outline-warning float-end" user_data="' .

$id_user .'" buku_data="' . $id_buku . '" aksi="favorite">

<i class="fa-regular fa-star"></i></button>';

} else {

echo '<script>console.log("fav")</script>';

echo '<button id="' . $id_user . '" class="fav btn btn-warning float-end" user_data="' .

$id_user .'" buku_data="' . $id_buku . '" aksi="unfavorite">

<i class="fa-regular fa-star"></i></button>';

}

$id_user = $_SESSION['id'];

$id_buku = $_GET['id'];

$query = 'SELECT * FROM buku WHERE Id_buku =?';

$select = $koneksi->prepare($query);

$select->execute(array($id_buku));

$value = $select->fetch();

<img class="img-fluid" src=" uploads/cover/<?php echo $value['Cover_buku']; ?>"

width="300px">

</div>

<h2 class="text-dark"><b><?php echo $value['Judul'] . " (" .

$value['Tahun_terbit'] . ")"; ?></b></h2>

<strong>Deskripsi :</strong>

<strong>Kategori:</strong>

<?php

$cat = $koneksi->prepare("SELECT kategori.nama_kategori as kategori

FROM kategori, buku

WHERE kategori.id_kategori = buku.Id_kategori

AND buku.Id_buku=?;");

$cat->execute(array($id_buku));

$dt = $cat->fetchAll();

foreach ($dt as $v) { ?>

<?php echo $v['kategori']; ?></p>

<?php }; ?>

</div>

<?php checkFav($id_user, $id_buku, $koneksi); ?>

</div>

<?php if ($value['file_buku'] != '') { ?>

type="" width="100%" height="1000">

</div>

<?php }; ?>

</div>

<?php include "footer.php"; ?>

19. Tab buku favorite

Pada bagian ini akan menampilkan buku-buku favorite yang dimasukan oleh pengguna.

Tab menu favorite akan terkoneksi dengan menu detail. Hal ini dikarenakan pada menu detail buku terdapat tombol favorite yang ketika ditekan akan membuat buku tersebut masuk kedalam tab menu favorite. Tahapan pertama adalah membuat file dengan nama favortite.php. Tahapan kedua adalah membuat script js pada footer.php yang difungsikan untuk memberikan sinyal ketika tombol favorite ditekan yang nantinya akan diproses di prose_fav.php untuk dimasukan kedalam database. Ketiga adalah pembuatan file proses_fav.php sebagai proses memasukan atau menghapus data favorite pengguna.

Source code:

a. Favorite.php

<?php

include "header.php";

include "koneksi.php";

<strong class="mx-2 text-uppercase" style="color: black;"><b>Favorite</b></strong>

</div>

<?php

$id = $_SESSION['id'];

$query = $koneksi->prepare("SELECT f.Id_buku as id, b.Judul AS judul, b.Penulis AS penulis,

b.Penerbit AS penerbit, k.nama_kategori as kategori, b.Tahun_terbit AS terbit,

b.Cover_buku as cover FROM favorite AS f INNER JOIN buku AS b ON f.Id_buku=b.Id_buku

INNER JOIN user AS u ON f.id_user = u.Id_user

INNER JOIN kategori AS k ON b.Id_kategori = k.id_kategori

WHERE f.Id_user = ?;");

$query->execute(array($id));

$data = $query->fetchAll();

if ($data == false) {

console.log("belum ada data")

</script>

<h1>Belum ada data favorite</h1>

</div>

<?php } else {

} foreach ($data as $value) {

</div>

<b><a href="detail.php?id=<?php echo $value['id']; ?>"

style="text-decoration: none; color: black;">

<?php echo $value['judul'] .

" (" . $value['terbit'] . ")"; ?>

</a></b>

</h5>

</div>

<strong

class="float-start text-start text-primary mt-n1">

<?php echo $value['penulis']; ?></strong>

</div>

<?php echo $value['penerbit']; ?>

</p>

</div>

<?php echo $value['kategori']; ?></p>

</div>

<?php }; ?>

</div>

<?php include "footer.php"; ?>

b. Prose_fav.php

<?php

include "koneksi.php";

$aksi = $_GET['aksi'];

$id_user = $_GET['id_user'];

$id_buku = $_GET['id_buku'];

$data[] = $id_user;

$data[] = $id_buku;

if ($aksi == "favorite") {

$query = 'INSERT INTO favorite (Id_user, Id_buku) VALUE (?,?)';

$insert = $koneksi->prepare($query);

$insert->execute($data);

} else {

$sql = "DELETE FROM favorite WHERE Id_user= ? AND Id_buku= ?";

$row = $koneksi->prepare($sql);

$row->execute($data);

}

c. Jquery script di footer.php

jQuery(document).ready(function($) {

$('.fav').on('click', function(e) {

e.preventDefault();

var id_user = $(this).attr('user_data');

var id_buku = $(this).attr('buku_data');

var aksi = $(this).attr('aksi');

if (aksi == "favorite") {

$(this).attr('aksi', 'unfavorite') // Change the div method attribute to Unlike

$('#' + id_user).replaceWith('<button id="' + id_user +

'" class="fav btn btn-warning float-end" user_data="' + id_user +

'" buku_data="' + id_buku +

'" aksi="favorite"><i class="fa-regular fa-star"></i></button>')

} else {

$(this).attr('aksi', 'unfavorite')

$('#' + id_user).replaceWith('<button id="' + id_user +

'" class="fav btn btn-outline-warning float-end" user_data="' + id_user +

'" buku_data="' + id_buku +

'" aksi="favorite"><i class="fa-regular fa-star"></i></button>')

}

$.ajax({

url: 'proses_fav.php',

type: 'GET',

data: {

id_user: id_user,

id_buku: id_buku,

aksi: aksi

cache: false,

success: function(data) {}

});

let items1 = document.querySelectorAll('.carousel .carousel-item')

Melakukan Hosting

Hosting adalah layanan untuk menyimpan file dan data website pada server khusus sehingga bisa diakses oleh pengguna melalui jaringan internet. Jadi file dan data yang Anda miliki bisa diakses oleh siapa saja, kapan saja dan dari mana saja.

1. Buka Web EC2 Amazon, lalu launch instance

2. Lalu isi nama dan tags untuk web, dan pilih tipe Microsoft Windows

3. Create new key pair untuk mendapat password

4. Beri nama dan pilih ppm

5. Setelah itu key akan otomatis terunduh

6. Setelah itu allow HTTPS dan allow HTTP

7. Selanjutnya konfigurasi penyimpanan dan launch instance

8. Setelah sukses, klik View Instances

9. Tunggu hingga status check nya selesai, klik web yang dibuat tadi dan connect

10. Setelah itu klik RDP client

11. Gulir kebawah dan klik Get Password

12. Lalu upload private key yang sudah terunduh tadi, klik decrypt

13. Jika sudah, klik download remote dekstop file dan buka file yang berekstensi .rdp

14. Klik connect hingga selesai

15. Setelah itu copy password dari public DNS dan paste ke credentials

16. Selesaikan konfigurasi remote

17. Lalu copy folder APP pada folder xammp > htdocs

18. Nyalakan Xampp pada remote desktop, lalu paste folder APP pada xampp > htdocs

19. Import database.sql ke localhost (remote desktop)

20. Lalu sisakan folder APP, dan pindah semua file ke folder backup

21. Setelah itu kembali ke Amazon EC2, pada Public IP address terdapat IP yang tertera, klik open address 54.89.107.9

22. Setelah itu akan langsung redirect ke aplikasi website OPEN BOOK, nah sekarang website dapat diakses dimana saja dan kapan saja. Lalu masukkan username dan password

23. Seperti ini tampilan buku, lalu coba tambahkan ke favorite dengan klik tanda bintang

24. Maka pada tab Favorite akan ada daftar buku yang ditambahkan

Link Website :

IP : 54.89.107.9

DNS : https://ec2-54-89-107-9.compute-1.amazonaws.com

Github : https://github.com/AhmadFikriHusaini/APSAPP

Al Ilmu (Berbagi Ilmu Opo Wae)

Selasa, 18 Oktober 2022

APLIKASI WEBSITE RUANG BACA IMPLEMENTASI DAN PENGEMBANGAN RUANG BACA DENGAN KONSEP KOMPUTASI AWAN

Melakukan Subscription Cloud Service

Amazon Web Service

Amazon ECS2

Membangun Website

Melakukan Hosting

Tidak ada komentar:

Posting Komentar