Laporan Tugas Akhir Rifa'i BAB IV

BAB IV
PEMBAHASAN
4.1. Rancang Bangun Website Sistem Informasi Penjualan di
outlet Tani Sayoer
Sejalan dengan tujuan dari penelitian ini, penulis
menggunakan Boostrap sebagai media utama untuk
membangun website sistem informasi penjualan di outlet tani
sayoer, karena Bootstrap merupakan framework untuk
membangun desain web secara responsive. Artinya, tampilan
web yang dibuat oleh bootstrap akan menyesuaikan ukuran
layar dari browser yang kita gunakan baik di desktop, tablet
ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-
aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita
bisa membuat web untuk tampilan desktop saja dan apabila
dirender oleh mobile browser maka tampilan dari web yang kita
buat tidak bisa beradaptasi sesuai layar. Dengan Bootstrap kita
juga bisa membangun web dinamis ataupun statis.
4.2. Testing
Pada tahap ini akan dilakukan pengujian yang bertujuan
untuk mengetahui apakah sistem dapat dijalankan sesuai apa
yang di inginkan dan apakah masih ada kesalahan atau tidak.
Untuk pengujian sistem, peneliti menggunakan metode

blackbox. Metode blackbox adalah salah satu metode pengujian
sistem yang berfokus pada sisi fungsionalitas.
No Form Fungsi Keterangan
1 Login User Form untuk mengakses pembelian Berhasil
2 Register Form untuk memasukkan biodata Berhasil

user agar bisa mengakses form
login
3 Pembelian Form untuk membeli produk Berhasil
4 Keranjang Form untuk menampung data Berhasil

pembelian user
5 Pembayaran Form untuk membayar produk Berhasil
yang sudah dibeli oleh user
berdasarkan bukti pembayaran
3.3 Tabel Testing
4.3. Antarmuka Pengguna (User Interface)
User Interface sangatlah penting dalam suatu aplikasi
karena merupakan bagian dari perangkat lunak yang menjadi
sarana komunikasi antar pengguna dengan sistem serta dapat
memberikan kemudahan bagi pengguna dalam melakukan
aktivitasnya.
1. Kunjungi website getbootstrap.com terlebih dahulu lalu pilih
versi 5.1.3.
Gambar 3.4 Tampilan awal dari Bootsrap
2. Setelah itu scroll kebawah sampai menemukan script HTML
yang dibuat oleh Bootstrap, lalu copy script tersebut.
Gambar 3.5 Starter Template Bootstrap
4.2.1. Koneksi HTML
Agar website bekerja dengan bootstrap harus melalui
proses coding HTML. Proses aktifitas coding dilakukan
setelah script bootstrap telah ditambahkan dalam script
HTML. Proses coding bertujuan supaya HTML dan Bootstrap

terintegrasi sehingga dapat menghasilkan suatu website yang
sesuai dengan yang dikembangkan.
Berikut script codingi koneksi agar bootstrap dan HTML
dapat terhubung:
Gambar 3.6 Koneksi CSS Bootstrap
4.2.2. Main Content
Main Content adalah tampilan utama dari website yang
dapat dilihat oleh user yang berkunjung ke website tersebut.
Gambaran Main Content Website penjualan Sayur di outlet
Tani Sayoer dapat dilihat pada gambar 4.4.
Gambar 3.7 Main Content index.html

4.2.3. Navbar
Gambar 3.8 Navbar
Halaman Navbar pada Website Penjualan Sayur
Online di outlet Tani Sayoer menampilkan biodata yang
meliputi tentang Home, Gambar, Tersedia, Harga Sayur,
Transaksi yang didalamnya Keranjang dan Info Pembayaran,
Login atau Logout. Berikut adalah script dari navbar-nya :
<?php
include"db.php";
// untuk footer
$kontak = mysqli_query($conn, "SELECT admin_telp,
admin_email, admin_address FROM tb_admin WHERE
admin_id = 1");
$a = mysqli_fetch_object($kontak);
?>
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/b
ootstrap.min.css" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXS
U1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Tani Sayoer</title>

<link rel="stylesheet" type="text/css"
href="css/style.css">

<link rel="stylesheet"
href="https://unpkg.com/aos@next/dist/aos.css" />

<link rel="preconnect"
href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&family=Pacifico&display=swap"
rel="stylesheet">

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/fon
t/bootstrap-icons.css">

<link rel="icon" type="text/css" href="sayur1.png">

</head>
<body class="banner">

<nav class="navbar navbar-expand-lg navbar-dark
fixed-top bg-success bg-gradient">
<div class="container">
<a class="navbar-brand fs-3 judul ml3">Tani
Sayoer</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse "
id="navbarNav">
<ul class="navbar-nav ms-auto fw-bolder">
<li class="nav-item">
<a class="nav-link" aria-current="page"
href="index.php">Home</a>
</li>
<a class="nav-link"
href="picture.php">Gambar</a>
</li>
<a class="nav-link"
href="forsale.php">Tersedia</a>
</li>
<a class="nav-link" href="allproduk.php">Harga
sayur</a>
</li>
<?php
error_reporting(0);
session_start();
if (isset($_SESSION['email']) == true) {
?>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-

toggle="dropdown" role="button" aria-
expanded="false">Transaksi</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="keranjang.php">Keranjang</a></li>
<li><a class="dropdown-item" href="">Info
Pembayaran</a></li>
</ul>
</li>
<li class="nav-item me-3">
<a class="nav-link text-light" href="logout-
tanisayoer.php"><i class="bi bi-box-arrow-left
me-1"></i>Logout</a>
</li>
<?php
$user=
mysqli_fetch_object(mysqli_query($conn, "SELECT * FROM
user WHERE id_user = '$_SESSION[id]' "));
?>
<a class="nav-link" href="index.php">Hi <?php
echo $user->nama?></a>
</li>
<?php
}else if (isset($_SESSION['email']) != true) {
if (isset($_SESSION['email'])) {
$id = $_SESSION['id'];
$query = mysqli_query($conn, "SELECT *
FROM user WHERE id = '$id' ");
$name = mysqli_fetch_array($query);
}else {
?>
<a class=" nav-link text-light" href="login-
tanisayoer.php"><i class="bi bi-box-arrow-in-right
me-1"></i>Login</a>
</li>
<?php }} ?>
</ul>
</div>
</div>
</nav>

3.9 Script Navbar

4.2.4. Home
Gambar 4.0 Halaman Home
Pada halaman Home ini menampilkan gambar
sayuran, title, sambutan ketika user/pembeli masuk ke
website-nya dan icon social media.
<?php include"layout/header.php" ?>

<div class="container" style="padding-top: 12rem;">
<div class="row" >
<div class=" col-lg-5 mt-4 text-center" data-
aos="fade-right" data-aos-duration="2000">
<img class="imgabout" src="sayur1.png">
</div>
<div class="col-lg-7 text-center mt-5" data-aos="fade-
left" data-aos-duration="2000">
<h1 class="fw-bolder ml12" style="font-size: 55px;
font-family: 'montserrat', cursive; color: #198754;">Jual

Sayur Sehat</h1>
<p class="fs-5 pt-2">Penuhi kebutuhan tubuh
anda secara teratur dengan makan sayuran secara
tercukupi.</p>

<a href="https://wa.me/6283850290384"
class="ikon text-success">
<i class="bi bi-whatsapp fs-1 px-3"></i>
</a>
<a href="" class="ikon text-success">
<i class="bi bi-facebook fs-1 px-3"></i>
</a>
<a href="" class="ikon text-success">
<i class="bi bi-telephone fs-1 px-3"></i>
</a><br>

</div>
</div>
</div>

<?php include"layout/footer.php" ?>
4.1 Script Home

4.2.5. Gambar
Gambar 4.2 Halaman Gambar
Menu Gambar ini menampilkan tentang produk sayur
yang dijual pada Website Penjualan Sayur Online di outlet
Tani Sayoer. Berikut script dari menu Gambar :
<?php include 'layout/header.php';?>

<h1 class="text-center fw-bold" data-aos="fade-down"
data-aos-duration="1500" style="padding-top:
5rem;">Gambar</h1>
<div class="container" style="padding-top: 5rem;">
<div class="row justify-content-around border mx-2"
data-aos="fade-down" data-aos-duration="2500"
style="background-color: #C2DED1; margin-top: 6rem;
border-radius: 11px;">
<div class="col-sm-7 my-4 gap-3 " style="">
<?php
$produk = mysqli_query($conn, "SELECT *
FROM tb_product WHERE product_status = 1 ORDER BY
product_id DESC");
if (mysqli_num_rows($produk) > 0) {
while ($p = mysqli_fetch_array($produk)) {
?>
<img src="produk/<?php echo
$p['product_image'] ?>" class="card-img-top shadow-lg p-3
m-3 bg-body rounded" alt="<?php echo
$p['product_name'] ?>" title="<?php echo
$p['product_name'] ?>" style="width: 205px;
height: 240px;">
<?php }}else { ?>
<p>Tidak Ada Produk</p>
<?php } ?>
</div>
</div>
</div>

<?php include 'layout/footer.php';?>
4.3 Script menu Gambar

4.2.6. Harga Sayur
Gambar 4.6 Halaman Harga Sayur
Menu Harga Sayur adalah halaman untuk user supaya
bisa mengetahui produk dan harga yang sudah disediakan.
Untuk dihalaman Harga Sayur ini terdapat button Beli dan
button Detail Sayur. Berikut adalah script yang digunakan
untuk membuat halaman Harga Sayur :
<?php
error_reporting(0);
?>
<?php include 'layout/header.php'; ?>


data-aos-duration="1500" style="padding-top: 5rem;">Harga
Sayur</h1>
<div class="container" style="margin-top: 10rem;">
<div class="row justify-content-center m-2" data-
aos="fade-down" data-aos-duration="2000">
<div class="col-lg-8 border border-3 p-5"
style="background-color: #C2DED1; border-radius: 11px;">
<form class="d-flex">
<input class="form-control me-2 border-3"
type="text" name="search" placeholder="Cari Sayur"
value="<?php echo $_GET['search'] ?>" style="border-
radius: 11px;">
<input class="btn btn-success border-3 ikon"
type="submit" name="cari" value="Cari" style="border-
radius: 11px;">
</form>
</div>
</div>
<div class="row justify-content-around border mx-2"
data-aos="fade-down" data-aos-duration="2500"
style="background-color: #C2DED1; margin-top: 6rem;
border-radius: 11px;">
<div class="col-sm-7 my-5 gap-3">
<?php
if (isset($_GET['search']) != '') {
include 'db.php';
$where = "AND product_name LIKE '%".
$_GET['search']."%' ";
$produk = mysqli_query($conn, "SELECT *
FROM tb_product WHERE product_status = 1 $where
ORDER BY product_id DESC");
if (mysqli_num_rows($produk) > 0) {
while ($p = mysqli_fetch_array($produk)) {

?>
<div class="card float-start p-2 m-4" style="width:
12rem;">
<img src="produk/<?php echo
$p['product_image'] ?>" class="card-img-top" width="50px"
alt="<?php echo $p['product_name'] ?>" title="<?php echo
$p['product_name'] ?>">
<div class="card-body">
<h5 class="card-title"> <?php echo
substr($p['product_name'], 0, 30) ?> </h5>
<h6 class="fw-bold text-success"><?php echo
$p['many_product'] ?> Rp.<?php echo
number_format($p['product_price']) ?></h6>
<a href="beli.php?id=<?php echo
$p['product_id'] ?>" class="btn btn-success mt-2">Beli</a>
<a href="detail-produk.php?id=<?php echo
$p['product_id'] ?>" class="btn btn-success mt-2">Detail
Sayur <?php echo $p['product_name'] ?></a>
</div>
</div>
<?php }}else { ?>
<p>Tidak Ada Produk</p>
<?php } ?>
</div>
</div>

<?php include 'layout/footer.php'; ?>
4.7 Script menu Harga Sayur
4.2.7. Beli
Gambar 4.8 Halaman Beli
Halaman Beli ini untuk sarana user supaya bisa
membeli produk yang sudah disediakan di halaman Harga
User. Untuk mengakses halaman ini user perlu menekan

button Beli yang berada dihalaman Harga Sayur. Berikut
adalah script untuk membuat halaman Beli :
<?php include 'layout/header.php';
if ($_SESSION['email'] != true) {
echo '<script>alert("Login terlebih dahulu!")</script>';
echo '<script>window.location="login-
tanisayoer.php"</script>';
if ($_GET['id'] != true) {
echo '<script>window.location="allproduk.php"</script>';
$id_produk = $_GET['id'];
$produk = mysqli_query($conn, "SELECT * FROM
tb_product WHERE product_id = '$id_produk' ");
$p = mysqli_fetch_object($produk);
?>

5rem;">Pembelian</h1>
<div class="container" data-aos="fade-down" data-aos-
duration="2500" style="margin-top: 8rem;">
<div class="row justify-content-center align-items-
center" style="background-color: #C2DED1; border-radius:
11px;">
<div class="col-lg-3 py-3">
<img class="shadow p-4" src="produk/<?php echo
$p->product_image ?>" alt="<?php echo $p-
>product_name ?>" title="<?php echo $p->product_name ?
>">
</div>
<div class="col-lg-5">
<h5>Nama Sayur: <?php echo $p->product_name ?
></h5>
<h5>Harga Sayur: <?php echo $p->many_product ?
> Rp.<?php echo number_format($p->product_price)
?></h5>
<form action="" method="post"
enctype="multipart/form-data">
<label class="form-label">Banyak Sayur:</label>
<div class="input-group mb-2">
<input type="text" name="banyakbeli" min="0"

max="7" class="form-control" placeholder="<?php echo $p-
>many_product ?>" required>
<span class="input-group-text bg-success bg-
gradient text-light">
Kg/Ikat
</span>
</div>
<div class="mb-2">
<label class="form-label">Waktu
pengiriman:</label>
<input type="date" name="waktukirim"
class="form-control" required>
</div>
<input class="btn btn-success my-3" type="submit"
name="keranjang" value="Masukkan Keranjang">
</form>
<?php
session_start();
if (isset($_POST['keranjang'])) {
$banyakbeli = $_POST['banyakbeli'];
$waktukirim = $_POST['waktukirim'];
$totalbeli = number_format($p->product_price *
$banyakbeli);
$insertbeli = mysqli_query($conn, "INSERT INTO
pembelian VALUES (null, '$_SESSION[id]', '$id_produk', null,
'$waktukirim', '$banyakbeli', '$totalbeli') ");
if ($insertbeli == true) {
$beli = mysqli_query($conn, "SELECT * FROM
pembelian WHERE id_pembelian");
$b = mysqli_fetch_object($beli);
$_SESSION['beli'] = $b->id_pembelian;
echo '<script>alert("Pembelian dialihkan ke
keranjang pembelian")</script>';
echo
'<script>window.location="keranjang.php"</script>';
// echo var_dump($_SESSION['beli']);
}else {
echo '<script>alert("Gagal beli!")</script>';
?>
</div>
</div>
4.9 Script halaman Beli
4.2.8. Detail Sayur
Gambar 5.0 Halaman Detail Sayur
Halaman Detail Sayur ini berguna untuk memberi
informasi detail produk kepada user, agar user bisa mengerti
tentang produk yang dijual di outlet Tani Sayoer. Berikut script
yang terdapat pada halaman Detail Sayur :

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

data-aos-duration="1800" style="padding-top: 5rem;">Detail
Sayur</h1>
<?php
tb_product WHERE product_id = '".$_GET['id']."' ");
?>
<div class="container">
center" data-aos="fade-down" data-aos-duration="2500"
style="margin-top: 5rem;">
<img class="shadow p-4" src="produk/<?php echo
$p->product_image ?>">
</div>
<div class="col-lg-6 mt-3">

<h2><?php echo substr($p->product_name, 0, 30)
?></h2>
<h4 class="text-success"><?php echo $p-
>many_product ?> Rp.<?php echo number_format($p-
>product_price) ?></h4>
<div class="mt-4">
<p class="fw-bolder">Deskripsi :</p>
<p><?php echo $p->product_description ?></p>
<a href="beli.php?id=<?php echo $p-
>product_id ?>" class="btn btn-success mt-2">Beli
Sayur</a>
</div>
</div>
</div>

5.1 Script Halaman Detail Sayur

4.2.9. Transaksi (Keranjang & Info Pembayaran)
Gambar 5.2 Halaman Keranjang
Transaksi ini merupakan dropdown yang terdapat pada
menu navbar dan mempunyai submenu yang berisi
Keranjang dan Info Pembayaran. Keranjang sendiri berperan
untuk menampilkan produk yang sudah dibeli oleh user.
Berikut adalah script yang berada dihalaman Keranjang :
echo
'<script>window.location="index.php"</script>';
include 'db.php';
?>
5rem;">Keranjang Pembelian Anda</h1>
<div class="table-responsive">
<table class="table table-bordelles table-hover table-
success">
<caption> <a href="bayar.php" class="btn btn-
success">Bayar</a> </caption>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Waktu Beli</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
session_start();
$no = 1;
$userpembeli = mysqli_query($conn, "SELECT *
FROM pembelian LEFT JOIN tb_product USING
(product_id) WHERE id_user = '$_SESSION[id]' ");
if (mysqli_num_rows($userpembeli) > 0) {
while ($up = mysqli_fetch_array($userpembeli)) {
?>
<tr>
<th> <?php echo $no++ ?> </th>
<td> <?php echo $up['product_name'] ?> </td>
<td> <?php echo $up['waktu_pembelian'] ?> </td>
<td> Rp.<?php echo $up['total'] ?> </td>
<td>
<a href="detailbeli.php?id=<?php echo
$up['id_pembelian'] ?>" class="btn btn-success me-2 mt-
2">Detail</a>
<a href="edit-beli.php?id=<?php echo
$up['product_id'] ?>" class="btn btn-success me-2 mt-
2">Ubah</a>
<a href="batal-beli.php?id=<?php echo

$up['id_pembelian'] ?>" class="btn btn-success me-2 mt-2"
onclick="return confirm('Anda yakin untuk membatalkan
pesanan ini?')">Batal</a>
</td>
</tr>
<?php
}}else {
?>
<tr>
<td colspan="5">Tidak ada pembelian</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
5.3 Script halaman Keranjang

4.2.10. Detail
Gambar 5.4 Halaman Detail
Detail adalah sebuah button yang terdapat pada
halaman keranjang. Halaman Detail ini adalah halaman untuk
menunjukkan produk yang dibeli oleh user secara detail.
Untuk mengakses halaman ini perlu menekan button Detail
yang berada di dalam tabel sebelah kanan di samping list
pembelian produk. Berikut script yang terdapat pada halaman
Detail :
echo '<script>window.location="index.php"</script>';
?>
data-aos-duration="1500" style="padding-top: 5rem;">Detail
Pembelian Anda</h1>
<table class="table table-striped table-hover table-
success">
<thead>
<tr>
<th>Gambar</th>
<th>Harga</th>
<th>Nama</th>
<th>Dikirim</th>
<th>QTY</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php
$detailbeli = mysqli_query($conn, "SELECT *
(product_id) WHERE id_pembelian = '$_GET[id]' ");
$debe = mysqli_fetch_object($detailbeli);
?>
<tr>
<td><img src="produk/<?php echo $debe-
>product_image ?>" alt="<?php echo $debe-
>product_name ?>" title="<?php echo $debe-
>product_name ?>" width="85px"> </td>
<td> Rp.<?php echo number_format($debe-
>product_price) ?> </td>
<td> <?php echo $debe->product_name ?> </td>
<td> <?php echo $debe->waktu_pengiriman ?>
</td>
<td> <?php echo $debe->banyak_product ?>
</td>
<td> Rp.<?php echo $debe->total ?> </td>
</tr>
</tbody>
</table>
</div>
5.5 Script halaman detail

4.2.11. Ubah
Gambar 5.6 Halaman Ubah
Ubah ini merupakan halaman untuk mengubah
pembelian ketika user melakukan kesalahan dalam
pembelian. Untuk mengakses halaman ini user perlu melihat
di halaman Keranjang dan menekan button Ubah yang
berada disamping kanan button Detail. Berikut adalah script
halaman Ubah :
echo '<script>window.location="keranjang.php"</script>';
$id_beli = $_GET['id'];
pembelian INNER JOIN tb_product USING (product_id)

WHERE product_id = '$id_beli ' ");
?>
data-aos-duration="2000" style="padding-top: 5rem;">Ubah
Pembelian</h1>
center" style="background-color: #C2DED1; border-radius:
11px;">
<div class="col-lg-3 py-3">
<img class="shadow p-4" src="produk/<?php
echo $p->product_image ?>" alt="<?php echo $p-
>product_name ?>" title="<?php echo $p-
>product_name ?>">
</div>
<h5>Nama Sayur: <?php echo $p-
>product_name ?></h5>
<h5>Harga Sayur: <?php echo $p-
>many_product ?> Rp.<?php echo number_format($p-

>product_price) ?></h5>
<label class="form-label">Banyak
Sayur:</label>
<div class="input-group mb-2">
<input type="text" name="banyakbeli"
min="0" max="7" class="form-control" value="<?php echo
$p->banyak_product ?>" required>
<span class="input-group-text bg-success
bg-gradient text-light">
Kg/Ikat
</span>
</div>
<div class="mb-2">
pengiriman:</label>
<input type="date" name="waktukirim"
class="form-control" value="<?php echo $p-
>waktu_pengiriman ?>" required>
</div>
<input class="btn btn-success my-3"
type="submit" name="edit" value="Ubah Pesanan">
</form>
<?php
if (isset($_POST['edit'])) {
$banyakbeli = $_POST['banyakbeli'];
$waktukirim = $_POST['waktukirim'];
$totalbeli = number_format($p-
>product_price * $banyakbeli);
$updatebeli = mysqli_query($conn, "
UPDATE pembelian SET
wakt
u_pembelian = null,
wakt
u_pengiriman = '".$waktukirim."',
bany
ak_product = '".$banyakbeli."',
total
= '".$totalbeli."' ");
if ($updatebeli == true) {
echo '<script>alert("Pembelian anda

berhasil diubah")</script>';
echo
'<script>window.location="keranjang.php"</script>';
}else {
echo '<script>alert("Gagal ubah
pembelian!")</script>';
?>
</div>
</div>
5.7 Script halaman Ubah
4.2.12. Batal
Batal ini mempunyai fungsi untuk user jika ingin
membatalkan pesanan produk yang sudah di beli. Untuk
mengakses fungsi ini user perlu mengunjungi halaman
Keranjang dan menekan button Batal yang berada disamping
button Ubah. Berikut adalah script untuk fungsi Batal :
<?php
error_reporting(0);
include 'db.php';
$hapus = $_GET['id'];
if (isset($hapus)) {
$batal = mysqli_query($conn, "DELETE FROM pembelian
WHERE id_pembelian = '".$hapus."' ");
?>
5.8 Script fungsi Ubah
4.2.13. Checkout
Gambar 5.9 Checkout
Checkout ini berfungsi untuk user supaya bisa
membayar apa yang sudah dibeli dengan cara mengirim bukti
pembayaran. Berikut adalah script halaman checkout :
<?php
include 'layout/header.php';
include 'db.php';
echo '<script>alert("Login terlebih dahulu!")</script>';
echo
'<script>window.location="login-tanisayoer.php"</script>';
?>
<h1 class="text-center fw-bold" data-aos="fade-down" data-
aos-duration="1500" style="padding-top: 5rem;">Checkout
Pembelian Anda</h1>

success">

<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Waktu Beli</th>
<th>QTY</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php
session_start();
$no = 1;
$totalAll = 0;
$userpembeli = mysqli_query($conn, "SELECT *
(product_id) WHERE id_user = '$_GET[id]' ");
while ($up = mysqli_fetch_array($userpembeli)) {

?>
<tr>
<th> <?php echo $no++ ?> </th>
<td> <?php echo $up['product_name'] ?> </td>
<td> <?php echo $up['waktu_pembelian'] ?> </td>
<td> <?php echo $up['banyak_pembelian'] ?>
</td>
<td> Rp.<?php echo $up['total'] ?> </td>
</tr>
<?php
$totalAll+=$up['total'];
?>
<tr>
<th colspan="3" class="text-end">Total
semua:</th>
<th colspan="2">Rp.<?php echo
number_format($totalAll,3); ?></th>
</tr>
</tbody>
</table>
</div>
<div class="row justify-content-center">
<form class="mt-5" action="" method="POST"
<?php
$check = mysqli_query($conn, "SELECT * FROM
user WHERE id_user = '$_GET[id]' ");
$c = mysqli_fetch_object($check);
$out = mysqli_query($conn, "SELECT * FROM
pembelian LEFT JOIN tb_product USING (product_id)
WHERE id_user = '$_GET[id]' ");
$o = mysqli_fetch_object($out);
?>
<div class="form-outline mb-4">
<label class="form-label">Nama pembeli:</label>
<input class="form-control" type="text" value="<?
php echo $c->nama; ?>" aria-label="Disabled input
example" disabled readonly>

</div>
<label class="form-label">Nomor telepon:</label>
<input class="form-control" type="number"
value="<?php echo $c->telephone; ?>" aria-label="Disabled
input example" disabled readonly>
</div>
<label class="form-label">Alamat:</label>
<input class="form-control" type="text" value="<?
php echo $c->alamat; ?>" aria-label="Disabled input
example" disabled readonly>
</div>
pengiriman:</label>
<input class="form-control" type="date" value="<?
php echo $o->waktu_pengiriman; ?>" aria-label="Disabled
input example" disabled readonly>
</div>
<label class="form-label">Tujuan
pengiriman:</label>
<input class="form-control" type="text"
name="alamat" placeholder="Ketikkan alamat anda secara
detail..." required>
</div>
<label class="form-label">Bukti
pembayaran:</label>
<input class="form-control" type="file"
name="bukti">
</div>
<input class="btn btn-success btn-block fa-lg
gradient-custom-2 mb-3" name="submit" type="submit"
value="Konfirmasi">
</form>
<?php
if (isset($_POST['submit'])) {
// error_reporting(0);
// print_r($_FILES['gambar']);
// Menampung inputan dari form
$alamat = $_POST['alamat'];
// Menampung data file yang diupload
$filename = $_FILES['bukti']['name'];
$tmp_name = $_FILES['bukti']['tmp_name'];
$type1 = explode('.', $filename);
$type2 = $type1[1];
$newname = 'buktibayar'.time().'.'.$type2;
// Menampung data format yang diizinkan
$tipe_diizinkan = array('jpg', 'jpeg', 'png', 'gif',
'mp4');
// Validasi format file
if (!in_array($type2, $tipe_diizinkan)) {
// Jika format file tidak ada di dalam

$tipe_diizinkan:
echo '<script>alert("format file tidak
diizinkan!")</script>';
}else {
// Jika format file sesuai dengan yang ada di
dalam $tipe_diizinkan:
// Proses upload file sekaligus insert database
move_uploaded_file($tmp_name,
'./admin/buktibayar/'.$newname);
$insert = mysqli_query($conn, "INSERT INTO
checkout VALUES (
null,
'".
$_GET['id']."',
null,
'".number_format($totalAll,3)."',
'".
$alamat."',
'".
$newname."',
‘0’
) ");
if ($insert) {
echo '<script>alert("Pembayaran anda
sudah berhasil")</script>';
echo '<script>window.location="info-
pembayaran.php"</script>';
}else {
echo '<script>alert("Pembayaran gagal
dilakukan")</script>;';
?>
</div>
</div>
</div>
6.0 Script Checkout

4.2.14. Info Pembayaran
Gambar 6.1 Halaman Info Pembayaran
Menu Info Pembayaran ini berfungsi agar user
mengetahui checkout-nya sudah dikonfirmasi atau belum oleh
admin. Berikut adalah script halaman Info Pembayaran :
<?php
include 'layout/header.php';
include 'db.php';
?>
data-aos-duration="1500" style="padding-top: 5rem;">Info
Pembayaran Anda</h1>

success">

<thead>
<tr>
<th>No</th>
<th>Waktu Checkout</th>
<th>Total Pembelian</th>
<th>Tujuan pengiriman</th>
<th>Bukti Pembayaran</th>
</tr>
</thead>
<tbody>
<?php
session_start();
$no = 1;
$totalAll = 0;
$userct = mysqli_query($conn, "SELECT * FROM
checkout WHERE id_user = '$_SESSION[id]' ");
if (mysqli_num_rows($userct) > 0) {
while ($up = mysqli_fetch_array($userct)) {
?>
<tr>
<th scope="row"> <?php echo $no++ ?> </th>
<td> <?php echo $up['time_checkout'] ?> </td>
<td> Rp.<?php echo $up['total_semua'] ?>
</td>
<td> <?php echo $up['tujuan_pengiriman'] ?>
</td>
<td> <img src="admin/buktibayar/<?php echo
$up['bukti_bayar'] ?>" width="50%"> </td>
</tr>
<?php
$chehckout = mysqli_query($conn, "SELECT *
FROM checkout WHERE id_user = '$_SESSION[id]' ");
$ct = mysqli_fetch_object($chehckout);
if ($ct->confirm == 1) {
echo '<div class="alert alert-success fw-
bold">Pembelian sudah dikonfirmasi oleh admin, silahkan
tunggu pesanan anda.</div>';
}elseif ($ct->confirm == 2) {
echo '<div class="alert alert-success fw-
bold">Pembelian anda tidak disetujui!</div>';
}else {
echo '<div class="alert alert-success">Silahkan
tunggu konfirmasi dari admin</div>';
?>
<caption> <a href="allproduk.php" class="mt-2 btn
btn-success">Lanjut belanja</a>
<?php
}else {
?>
<tr>
<td colspan="5">Anda belum melakukan

checkout.</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
6.2 Script Info pembayaran
4.2.15. Login
Gambar 6.3 Halaman Login
Menu Login ini berfungsi untuk menampilkan form yang
digunakan untuk memasukkan email dan password user jika

ingin membeli produk sayuran. Berikut adalah script halaman
Login :
<?php include"layout/header.php"; ?>
<?php
?>

5rem;">Login</h1>
<section class="h-100 gradient-form">
<div class="container h-100" style="margin-top:
4rem;">
<div class="row d-flex justify-content-center align-
items-center h-100" data-aos="fade-down" data-aos-
duration="2500" style="padding: 43px 0;">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="card-body p-md-5 mx-md-4">

<div class="text-center">
<h4 class="mt-1 mb-5 pb-1">LOGIN</h4>
</div>
<p class="fw-bold">Silahkan masuk ke
akun anda.</p>
<label class="form-label">Email <span
class="text-danger">*</span></label>
<input type="email" name="email"
class="form-control py-2" placeholder="Email address"
required>
</div>
<label class="form-label">Password <span
class="text-danger">*</span></label>
<div class="input-group form-outline mb-
4">
<input type="password"
name="password" class="form-control" id="pass"

placeholder="Password" required>
<span class="input-group-text"
id="mybutton" onclick="change()" style="background-color:
#C2DED1; cursor: pointer;">
<i class="bi bi-eye-fill fs-5"></i>
</span>
</div>
<div class="text-center pt-1 mb-5 pb-1">
<input class="btn btn-success btn-block
fa-lg gradient-custom-2 mb-3" name="submit" type="submit"
value="Login"></input>
</div>
<div class="d-flex align-items-center
justify-content-center pb-4">
<p class="mb-0 me-2">Belum
mendaftar? <a class="text-success" href="register.php">Klik
disini</a>.</p>
</div>
</form>
<?php
error_reporting(0);
session_start();
if (isset($_POST['submit'])){
$email =
mysqli_real_escape_string($conn, $_POST['email']);
$password =
mysqli_real_escape_string($conn,
md5($_POST['password']));
$sql = mysqli_query($conn, "SELECT *
FROM user WHERE email = '$email' AND password =
'$password' AND status = 'user' ");
if(mysqli_num_rows($sql) > 0){
$d = mysqli_fetch_object($sql);
$_SESSION['status_user_login'] =
true;
$_SESSION['id'] = $d->id_user;
$_SESSION['email'] = $email = true;
echo '<script>
window.location="index.php"
</script>';
}else{
echo '<script>
alert("Anda belum melakukan
daftar!")
</script>';
?>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center
gradient-custom-2" style="background-color: #C2DED1">
<div class="text-white text-center px-3 py-4
p-md-5 mx-md-4">
<h2 class="mb-4 text-dark judul">Tani

Sayoer</h2>
<p class="small text-dark mb-0">Penuhi
kebutuhan tubuh anda secara teratur dengan makan
sayuran secara tercukupi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

6.4 Script halaman Login

4.2.16. Registrasi
Gambar 6.5 Halaman Registrasi
Registrasi adalah sebuah halaman untuk user supaya
bisa mendaftar sebelum Login, karena di sistem Login-nya
sendiri pun memerlukan Registrasi terlebih dahulu untuk
mengakses pembelian. Registrasi sendiri berguna untuk
admin agar bisa mengetahui biodata dari user tersebut. Untuk
mengakses halaman ini user perlu menekan link yang berada
di bawah form Login. Berikut adalah script halaman Registrasi
<?php include"layout/header.php" ?>

<h1 class="text-center fw-bold" data-aos="fade-
down" data-aos-duration="1500" style="padding-top:
5rem;">Registrasi</h1>
<section class="h-100 gradient-form">
<div class="container h-100" style="margin-top:
4rem;">
<div class="row d-flex justify-content-center
align-items-center h-100" data-aos="fade-down" data-aos-
duration="2500" style="padding: 43px 0;">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="card-body p-md-5 mx-md-4">
<div class="text-center">
<h4 class="mt-1 mb-5 pb-
1">REGISTER</h4>
</div>
<?php
error_reporting();
session_start();
if (isset($_POST['form-input'])) {
extract($_POST);
$password = md5($password);
$sql = mysqli_query($conn, "insert
into user
Values(NULL,'$nama','$email','$telephone','$alamat','$passw
ord','user')");
if ($sql) {
?>
<div class="alert alert-
success">regitrasi berhasil</div>
<?php echo
'<script>window.location="login-tanisayoer.php"</script>'; }el
se{ ?>
<div>terjadi kesalahan</div>
<?php } } ?>
<p class="fw-bold">Silahkan masukkan
data diri anda.</p>
<label class="form-label"
for="form2Example11">Nama Lengkap <span class="text-
danger">*</span></label>
<input type="Text" class="form-control
py-2" name="nama" placeholder="Nama Lengkap" required>
</div>
for="form2Example22">Email <span class="text-
<input type="email" class="form-
control py-2" name="email" placeholder="Email" required>
</div>
for="form2Example22">Telepon <span class="text-
<input type="text" class="form-control
py-2" name="telephone" placeholder="Telepon" required>
</div>
for="form2Example22">Alamat <span class="text-

<input type="text" class="form-control
py-2" name="alamat" placeholder="Alamat" required>
</div>
for="form2Example22">Password <span class="text-
<div class="input-group form-outline
mb-4">
<input type="password" class="form-
control" id="pass" name="password"
placeholder="Password" required>
<span class="input-group-text"
id="mybutton" onclick="change()" style="background-color:
#C2DED1; cursor: pointer;">
<i class="bi bi-eye-fill fs-5"></i>
</span>
</div>
<div class="text-center pt-1 mb-5 pb-
1">
<button type="submit" class="btn btn-
success btn-block fa-lg gradient-custom-2 mb-3"

name="form-input">Daftar</button>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex align-items-
center gradient-custom-2" style="background-color:
#C2DED1">
<div class="text-white text-center px-3 py-
4 p-md-5 mx-md-4">
<h2 class="mb-4 text-dark judul">Tani
Sayoer</h2>
<p class="small text-dark mb-0">Penuhi
kebutuhan tubuh anda secara teratur dengan makan
sayuran secara tercukupi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

6.6 Script halaman Registrasi
4.2.17. Logout
Logout adalah sebuah proses keluar dari website yang
sebelumnya melakukan Login pada sebuah akun. Berikut
adalah script yang terdapat pada proses Logout :
<?php
session_start();
session_destroy();
header("Location: index.php");
?>
6.7 Script proses Logout
4.2.18. Main Footer

Gambar 6.8 Main Footer

<div class="card text-center" style="margin-top:
12rem;">
<div class="card-body">
<h5 class="card-title judul fs-2">Tani Sayoer</h5>
<div class="mt-4">
<h5>Alamat</h5>
<p><?php echo $a->admin_address ?></p>
<h5>Email</h5>
<p><?php echo $a->admin_email ?></p>
<h5>No.Handphone</h5>
<p><?php echo $a->admin_telp ?></p>
</div>
<a href="https://wa.me/6283850290384"
class="ikon text-success">
<i class="bi bi-whatsapp fs-4 px-2"></i>
</a>
<a href="#" class="ikon text-success">
<i class="bi bi-facebook fs-4 px-2"></i>
</a>
<a href="#" class="ikon text-success">

<i class="bi bi-telephone fs-4 px-2"></i>
</a>
</div>
<div class="card-footer text-white bg-success bg-
gradient">
<p>Copyright © 2022 - TaniSayoer</p>
</div>
</div>


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/boo
tstrap.bundle.min.js" integrity="sha384-
ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENB
O0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<script>
// membuat fungsi change
function change() {
// membuat variabel berisi tipe input dari id='pass',
id='pass' adalah form input password
var x = document.getElementById('pass').type;
//membuat if kondisi, jika tipe x adalah password maka
jalankan perintah di bawahnya
if (x == 'password') {
//ubah form input password menjadi text
document.getElementById('pass').type = 'text';
//ubah icon mata terbuka menjadi tertutup
document.getElementById('mybutton').innerHTML =
`<i class="bi bi-eye-slash-fill fs-5"></i>`;
else {
//ubah form input password menjadi text
document.getElementById('pass').type = 'password';
//ubah icon mata terbuka menjadi tertutup
document.getElementById('mybutton').innerHTML =
`<i class="bi bi-eye-fill fs-5"></i>`;

}
</script>


<script
src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
once: false;
</script>


<script
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/ani
me.min.js"></script>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML =
textWrapper.textContent.replace(/\S/g, "<span
class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml3 .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.ml3',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/ani
me.min.js"></script>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml12');
textWrapper.innerHTML =
textWrapper.textContent.replace(/\S/g, "<span
class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: (el, i) => 500 + 30 * i
}).add({
translateX: [0,-30],
opacity: [1,0],
easing: "easeInExpo",
duration: 1100,
delay: (el, i) => 100 + 30 * i
});
</script>

</body>
</html>
6.9 Script Main Footer

Laporan Tugas Akhir Rifa&#39;i BAB IV

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Tugas Akhir Rifa&#39;i BAB IV

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB IV

4.1. Rancang Bangun Website Sistem Informasi Penjualan di

outlet Tani Sayoer

Sejalan dengan tujuan dari penelitian ini, penulis

menggunakan Boostrap sebagai media utama untuk

membangun website sistem informasi penjualan di outlet tani

sayoer, karena Bootstrap merupakan framework untuk

membangun desain web secara responsive. Artinya, tampilan

web yang dibuat oleh bootstrap akan menyesuaikan ukuran

layar dari browser yang kita gunakan baik di desktop, tablet

ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-

aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita

bisa membuat web untuk tampilan desktop saja dan apabila

buat tidak bisa beradaptasi sesuai layar. Dengan Bootstrap kita

juga bisa membangun web dinamis ataupun statis.

Pada tahap ini akan dilakukan pengujian yang bertujuan

untuk mengetahui apakah sistem dapat dijalankan sesuai apa

yang di inginkan dan apakah masih ada kesalahan atau tidak.

Untuk pengujian sistem, peneliti menggunakan metode

sistem yang berfokus pada sisi fungsionalitas.

No Form Fungsi Keterangan

1 Login User Form untuk mengakses pembelian Berhasil

2 Register Form untuk memasukkan biodata Berhasil

4 Keranjang Form untuk menampung data Berhasil

4.3. Antarmuka Pengguna (User Interface)

User Interface sangatlah penting dalam suatu aplikasi

karena merupakan bagian dari perangkat lunak yang menjadi

sarana komunikasi antar pengguna dengan sistem serta dapat

memberikan kemudahan bagi pengguna dalam melakukan

1. Kunjungi website getbootstrap.com terlebih dahulu lalu pilih

2. Setelah itu scroll kebawah sampai menemukan script HTML

yang dibuat oleh Bootstrap, lalu copy script tersebut.

Gambar 3.5 Starter Template Bootstrap

4.2.1. Koneksi HTML

Agar website bekerja dengan bootstrap harus melalui

proses coding HTML. Proses aktifitas coding dilakukan

setelah script bootstrap telah ditambahkan dalam script

HTML. Proses coding bertujuan supaya HTML dan Bootstrap

sesuai dengan yang dikembangkan.

Berikut script codingi koneksi agar bootstrap dan HTML

Gambar 3.6 Koneksi CSS Bootstrap

4.2.2. Main Content

Main Content adalah tampilan utama dari website yang

dapat dilihat oleh user yang berkunjung ke website tersebut.

Gambaran Main Content Website penjualan Sayur di outlet

Tani Sayoer dapat dilihat pada gambar 4.4.

Gambar 3.7 Main Content index.html

Gambar 3.8 Navbar

Halaman Navbar pada Website Penjualan Sayur

Online di outlet Tani Sayoer menampilkan biodata yang

meliputi tentang Home, Gambar, Tersedia, Harga Sayur,

Transaksi yang didalamnya Keranjang dan Info Pembayaran,

Login atau Logout. Berikut adalah script dari navbar-nya :

$kontak = mysqli_query($conn, "SELECT admin_telp,

admin_email, admin_address FROM tb_admin WHERE

<meta name="viewport" content="width=device-width,

ootstrap.min.css" rel="stylesheet" integrity="sha384-

<link rel="stylesheet" type="text/css"

<link rel="preconnect" href="https://fonts.gstatic.com"

Laporan Tugas Akhir Rifa'i BAB IV

Laporan Tugas Akhir Rifa'i BAB IV