Tugas Akhir Kevin Bichandra

DAFTAR ISI
UNIVERSITAS GUNADARMA ..........................................................................1

PERNYATAAN ORIGINALITAS DAN PUBLIKASI ......................................ii
LEMBAR PENGESAHAN ...................................................................................iii
ABSTRAK..............................................................................................................iv
KATA PENGANTAR ............................................................................................v
DAFTAR ISI .........................................................................................................vii
DAFTAR GAMBAR ..............................................................................................x
DAFTAR TABEL.................................................................................................xii
DAFTAR LAMPIRAN .......................................................................................xiii
1. PENDAHULUAN ...............................................................................................1
1.1 Latar Belakang Masalah ............................................................................1
1.2 Batasan Masalah ........................................................................................2
1.3 Tujuan Penelitian .......................................................................................2
1.4 Metodologi Penelitian ...............................................................................2
1.5 Sistematika penulisan ................................................................................3
2. LANDASAN TEORI ..........................................................................................4
2.1 Persedian Stok Barang ..............................................................................4
2.2 Pendataan Barang ......................................................................................4
2.3 Transaksi....................................................................................................4
2.4 Bukti Pengembalian Barang ......................................................................5
2.5 Tahapan Pembangunan Rekayasa Perangkat Lunak .................................5
2.5.1 Perancangan .......................................................................................5
2.5.2 Analisis ...............................................................................................5
2.6 Bahasa Pemrograman PHP ........................................................................6
2.6.1 Sejarah PHP........................................................................................6
2.6.2 Fungsi PHP.........................................................................................7
2.6.3 Sintaks ................................................................................................7
2.7 MYSQL .....................................................................................................8
2.8 XAMPP ...................................................................................................10
i
2.9 Web Server Dan Web Browser ............................................................... 11
2.10 Visual Studio Code ..................................................................................12
2.11 HTML ......................................................................................................12
2.12 CSS ..........................................................................................................14
2.13 Framework Bootstrap ..............................................................................15
2.14 SDLC .......................................................................................................15
2.15 Struktur Navigasi .....................................................................................16
2.15.1 Struktur Navigasi Linier...................................................................16
2.15.2 Struktur Navigasi Hirarki.................................................................17
2.15.3 Struktur Navigasi Nonlinear.............................................................17
2.15.4 Struktur Navigasi Komposit .............................................................17
2.16 UML ........................................................................................................18
2.16.1 Use Case Diagram ............................................................................18
2.16.2 Class Diagram ..................................................................................19
2.16.3 Sequence Diagram............................................................................19
2.16.4 Activity Diagram ..............................................................................19
3. PERANCANGAN DAN IMPLEMENTASI ..................................................20
3.1 Gambaran Umum ....................................................................................20
3.2 Diagram Unified Modelling Language (UML) .......................................20
3.2.1 Use Case Diagram ...........................................................................21
3.2.2 Class Diagram .................................................................................2f2
3.2.2.1 Activity Diagram Stok Barang........................................................23
3.2.2.2 Activity Diagram Barang Masuk ....................................................24
3.2.2.3 Activity Diagram Barang Keluar ....................................................25
3.2.2.4 Activity Diagram Login..................................................................26
3.3 Struktur Database ....................................................................................26
3.4 Struktur Navigasi .....................................................................................29
3.5 Perancangan Layout ................................................................................30
3.6 Tahap Penginstallan.................................................................................34
3.6.1 Instalasi Xampp ................................................................................35
3.6.2 Intalasi Visual Studio Code..............................................................39
3.7 Tahap Pengkodean...................................................................................41
3.7.1 Konfigurasi Database .......................................................................41
3.7.2 Pembuatan Database ........................................................................42
3.8 Implementasi dan Testing........................................................................51
ii
3.8.1 Proses Hosting Website....................................................................51
3.8.2 Pengujian Website ............................................................................56
4. PENUTUP ......................................................................................................... 58
4.1 Kesimpulan ..............................................................................................58
4.2 Saran ........................................................................................................58
DAFTAR PUSTAKA .......................................................................................59
iii
DAFTAR GAMBAR
Gambar 2. 1 Struktur Navigasi Linear ....................................................................16

Gambar 2. 2 Struktur Navigasi Hirarki ...................................................................17
Gambar 2. 3 Struktur Navigasi NonLinier ..............................................................17
Gambar 2. 4 Struktur Navigasi Campuran (Composite) .........................................18
Gambar 3. 1 Use Case Diagram ..............................................................................21
Gambar 3. 2 Class Diagram.....................................................................................22
Gambar 3. 3 Activity Diagram ................................................................................23
Gambar 3. 4 Activity Diagram Barang Masuk .......................................................24
Gambar 3. 5 Activity Diagram Barang Keluar .......................................................25
Gambar 3. 6 Activity Diagram Login......................................................................26
Gambar 3. 7 Struktur Navigasi ................................................................................29
Gambar 3. 8 Rancangan Tampilan Halaman Login................................................30
Gambar 3. 9 Rancangan Tampilan Halaman Utama..............................................31
Gambar 3. 10 Rancangan Tampilan Halaman Stock Barang.................................32
Gambar 3. 11 Rancangan Tampilan Halaman Barang Masuk...............................33
Gambar 3. 11 Rancangan Tampilan Halaman Barang Keluar ...............................33
Gambar 3. 12 Rancangan Tampilan Halaman Kelola Admin ................................34
Gambar 3. 13 Proses Instalasi Xampp ....................................................................35
Gambar 3. 21 Menjalankan Xampp ........................................................................38
iv
Gambar 3. 22 Gambar instalasi text editor Visual Studio Code ............................39
Gambar 3. 26 Koneksi Database ............................................................................41
Gambar 3. 27 XAMPP ............................................................................................42
Gambar 3. 28 XAMPP ............................................................................................42
Gambar 3. 29 Struktur Table Login .......................................................................43
Gambar 3. 30 Struktur Tabel Stock ........................................................................43
Gambar 3. 31 Struktur Tabel Masuk ......................................................................44
Gambar 3. 32 Struktur Tabel Keluar .....................................................................44
Gambar 3. 33 Login.php.........................................................................................45
Gambar 3. 34 Halaman Login ................................................................................45
Gambar 3. 35 Index.php .........................................................................................46
Gambar 3. 36 Halaman Utama ..............................................................................46
Gambar 3. 37 Stock Barang Index.php...................................................................47
Gambar 3. 38 Halaman Stock Barang ....................................................................47
Gambar 3. 39 Barang Masuk Index.php.................................................................48
Gambar 3. 40 Halaman Barang Masuk .................................................................48
Gambar 3. 41 Barang Keluar Index.php ................................................................49
Gambar 3. 42 Halaman Barang Keluar .................................................................49
Gambar 3. 43 Admin.php........................................................................................50
Gambar 3. 44 Halaman Kelola Admin ...................................................................50
Gambar 3. 45 Login Infinityfree .............................................................................51
Gambar 3. 46 Proses Pembuatan Akun Hosting ....................................................52
Gambar 3. 47 Detail Akun ......................................................................................52
Gambar 3. 48 Control Panel ...................................................................................53
Gambar 3. 49 Upload File Project ..........................................................................53
Gambar 3. 50 Mengkonfigurasi Database ..............................................................54
Gambar 3. 51 Halaman PhpMyAdmin ...................................................................54
Gambar 3. 52 Edit File Untuk Menyambungkan Database ...................................55
Gambar 3. 53 Toko Berkah.epizy.com...................................................................55
v
DAFTAR TABEL
Tabel 2. 1 Contoh sejumlah tag pada sebuah dokumen HTML................................12

Tabel 3. 1 Tabel Admin.............................................................................................27
Tabel 3. 2 Tabel Stok Barang....................................................................................27
Tabel 3. 3 Tabel Barang Masuk................................................................................28
Tabel 3. 4 Tabel Barang Keluar ................................................................................28
Tabel 3. 5 Pengujian Website Menggunakan Metode Blackbox ..............................57
vi
DAFTAR LAMPIRAN LISTING PROGRAM
Index.php .............................................................................................................. L-1

Funciton.php ........................................................................................................L-8
Admin.php ...........................................................................................................L-14
Login.php .............................................................................................................L-20
Logout.php ...........................................................................................................L-22
Cek.php ................................................................................................................L-22
Masuk.php ............................................................................................................L-23
Keluar.php ............................................................................................................L-29
vii
DAFTAR LAMPIRAN OUPUT PROGRAM
Halaman Login ..................................................................................................... L-34

Halaman Stok Barang ..........................................................................................L-34
Halaman Barang Masuk.......................................................................................L-35
Halaman Barang Keluar.......................................................................................L-35
Halaman Kelola Admin........................................................................................L-36
viii
1. PENDAHULUAN
1.1 Latar Belakang Masalah
Perkembangan teknologi yang pesat, tingkat pertumbuhan ekonomi yang

tinggi dan perkembangan tingkat permintaan yang kompleks mengakibatkan
timbulnya berbagai macam industri yang hanya semata-mata menjawab kebutuhan
masyarakat. Hal tersebut membuat persaingan dagang menjadi semakin ketat,
terutama antar toko yang sejenis. Persaingan dagang tersebut menuntut toko untuk
memiliki performance yang baik agar perusahaan mampu bertahan atau bahkan
maju dan berkembang sehingga dapat menguasai pangsa pasarnya.
Pengelolaan bagian gudang yang baik akan dapat membantu usaha dalam
mencapai tujuan yang telah ditetapkan Untuk mengadakan penilaian terhadap
kinerja suatu usaha, diperlukan adanya laporan barang yang terstruktur. Begitu juga
dengan Pelayanan adalah suatu proses pemenuhan kebutuhan melalui aktivitas
orang lain secara langsung, pelayanan merupakan kunci keberhasilan dalam
berbagai usaha atau kegiatan yang bersifat jasa. Peranannya akan lebih besar dan
bersifat menentukan manakala dalam kegiatan-kegiatan jasa di masyarakat itu
terdapat kompetisi dalam usaha untuk merebut pasaran atau langganan.
Sembilan bahan pokok atau sering disingkat sembako adalah sembilan jenis
kebutuhan pokok yang terdiri dari bahan-bahan makanan dan minuman. Toko
sembako yang saat ini menjadi sebuah bisnis yang produktif dalam mencari sebuah
keuntungan, dengan banyaknya usaha toko sembako dimana- mana sehingga terjadi
persaingan antar toko sembako penyedia barang untuk dapat memenuhi kebutuhan
konsumen, dimana para pemilik usaha toko sembako berupaya untuk memberikan
pelayanan serta pengelolan penyimpanan barang yang baik, berhubungan dengan
perilaku konsumen secara maksimal, Toko ini melayani pembelian dalam jumlah
kecil. Harga yang diberikan Toko sembako Berkah juga tidak terlalu jauh dengan
harga toko-toko sembako disekitarnya. Toko sembako berkah ingin meningkatkan
kualitas pada toko, karena sadar kebutuhan akan bahan pokok atau sembako
semakin meningkat dan tidak pernah kurang. Untuk membantu mengatasi
1
permasalahan tersebut dikembangkan aplikasi persediaan barang (inventory) yang
dapat digunakan oleh sembako berkah. Sehingga data persediaan barang yang ada
digudang dapat terintegrasi dan mempermudah pegawai dalam pekerjaannya.
Aplikasi Rancangan Evaluasi Pe masukan Dan Pengeluaran Barang Di Toko
Sembako Berbasis WEB
1.2 Batasan Masalah
Batasan masalah dalam penulisan ilmiah ini hanya membahas pada

ketersedian barang yang masuk maupun barang yang keluar, pembuatan website ini
menggunakan teks editor visual studio code (Vscode), Mysql, XAMPP, dan bahasa
pemrograman PHP.
1.3 Tujuan Penelitian
Tujuan diadakan penelitian ini adalah untuk mengetahui barang masuk dan
barang keluar dari konsumen toko sembako serta untuk mencatat secara elektronik
pemasukan dan pengeluaran dari barang yang ada di dalam toko sembako berkah.
1.4 Metode Penelitian
Metode yang digunakan adalah, metode SDLC (Software Development Life

Cycle). Dalam melakukan penulisan website ini terbagi menjadi dalam beberapa
tahap yaitu:
1. Analisis
Meliputi analis kebutuhan yaitu penggunaan website pemasukan dan
pengeluaran barang terhadap para penjual atau pemilik toko tersebut.
Selanjutnya analisis keadaan, tujuan dari penulisan ini adalah bagaimana
pengguna website ini yaitu para penjual dapat mengetahui jumlah stok
barang yang masuk maupun barang yang keluar.
2. Perancangan
Perancangan pembuatan website menggunakan Visual Studio Code
3. Pembuatan Tahap pembuatan website dengan pengkodean yang sesuai
dengan rancangan website menggunakan software-software diantaranya
2
adalah bahasa pemrograman PHP dengan aplikasi Microsoft visual code,
XAMPP, dan MySQL sebagai database penyimpanan data.
4. Uji Coba
Memastikan tidak ada kesalahan yang terdapat pada website yang telah
dibuat dengan cara melakukan uji coba terhadap aplikasi tersebut. Uji
coba aplikasi menggunakan web browser yang terdapat pada laptop
spesifikasi windows 10 64 bit, processor AMD A9-9425 Radeon R5, 5
compute cores 2c + 3G 3,10 Ghz, Ram 4GB.
1.5 Sistematika Tulisan Ilmiah
1. Sistematika penulisan dalam penelitian ini adalah sebagai berikut.
Bab I Pendahuluan Bab
ini akan menguraikan hal – hal yang menyangkut pendahuluan,

meliputi latar belakang, rumusan masalah, tujuan penelitian,
kegunaan penelitian dan sistematika penulisan.
Bab II Tinjauan Pustaka
Bab ini membahas teori, konsep, dan penelitian terdahulu yang

berhubungan dengan teori pendapatan, pengeluaran, pelayanan
terhadap konsumen hipotesis Pada bab ini juga dibahas mengenai
program penunjang yang digunakan untuk membantu penelitian.
Bab III Analisa Dan Pembahasan
Bab ini memuat cara pemecahan masalah yang diajukan dalam

penelitian baik dalam mencari data maupun menganalisa data serta
hasil perancangan dan implementasi.
Bab IV Penutup
Bab ini berisi daftar pusataka, daftar simbol, lampiran yang berisi
program, hasil tampilan surat keterangan, kesimpulan serta saran
3
2. TINJAUAN PUSTAKA
Landasan teori merupakan teori yang penulis ambil dari beberapa sumber
pustaka dan sumber sumber lain yang dalam penulisan ilmiah ini berfungsi sebagai
tinjauan pustaka untuk memperkuat pembahasan penelitian.
2.1 Persediaan (Stok) Barang
Barang adalah benda dalam berbagai bentuk dan uraian, yang meliputi
bahan baku, barang setengah jadi, barang jadi atau peralatan, yang spesifikasinya
ditetapkan oleh pengguna barang dan jasa.
Persediaan barang adalah istilah yang digunakan untuk menunjukan barang

yang dimiliki oleh suatu perusahaan atau intansi yang tergantung pada jenis
usahannya. Secara umum istilah persediaan barang dipakai untuk menunjukan
barang yang telah dimiliki oleh perusahaan atau toko untuk dijual kembali. Istilah
ini digunakan pada perusahaan dagang, jika perusahaan itu bergerak dalam
pengelolaan barang atau memproses barang untuk meningkatkan nilai barang jual.
Persediaan (Stok) barang berkaiatan erat dengan penjualan. Penjualan

adalah suatu proses perorangan atau kelompok yang membantu dan meyakinkan
calon pembeli untuk membeli barang atau jasa agar mencapai tujuan perdagangan
yang penting bagi pihak penjual.
2.2 Pendataan Barang di Gudang Toko Sembako Berkah
Bagian gudang mendata barang yang ada di toko sembako berkah, toko sembako
berkah mempunyai stok barang diantaranya stok barang makanan pokok, jika stok
barang adalah barang yang ada di toko sembako maka stok barang tersedia, jika
stok barang tidak tersedia maka tidak ada barang atau kosong.
2.3 Transaksi
Umumnya transaksi artinya satuan aktivitas yang terdiri dari sub-sub aktivitas.
Transaksi harus punya integritas. Artinya, satu saja sub-aktivitas nya gagal
4
dilakukan, maka keseluruhan transaksi harus dibatalkan, dan sistem harus kembali
ke keadaan sebelum transaksi mulai.
2.4 Bukti Pengambilan Barang (BON)
Bukti Pengambilan Barang, adalah Akhir dari transaksi. Pada transaksi ini
sebelumnya harus ke memo request, purchase request, purchase order, suratjalan,
BPB dan baru bagian BON. Data-data yang ada di form ini adalah data-data yang
ada di BPB. Pada pengesahan BON dibuat oleh karyawan, diketahui oleh operator,
diserahkan oleh atasan karyawan, diperiksa oleh kabag logistik.
2.5 Tahapan Pembangunan Rekayasa Perangkat Lunak
2.5.1 Perencanaan (Planning)
Fase perencanaan proyek perangkat lunak adalah untuk menyediakan

sebuah kerangka kerja yang memungkinkan manajer membuat estimasi yang dapat
dipertanggung jawaban mengenai sumber daya, biaya dan jadwal. Estimasi dibuat
dengan sebuah kerangka waktu yang terbatas pada awal sebuah proyek
perangkat lunak dan seharusnya diperbarui secara teratur selagi proyek sedang
berjalan Dalam fase ini hal yang biasanya dilakukan oleh pengembang proyek
adalah menjawab pertanyaan mengapa sistem dibangun. Selain itu nilai bisnis dari
sistem diidentifikasi antara lain apakah pembiayaan rendah, apakah menaikkan
pendapatan perusahaan, serta pada tahap ini biasanya manajer proyek menyusun
manajemen proyek .
2.5.2 Analisis (Analysis)
Analisis sistem pada tingkat teknik pertama, disebut sebagai model analisis
yang menggambarkan serangkaian model representasi dari sistem yan akan dibuat.
Model analisis harus mencapai tiga sasaran utama : (1) untuk menggambarkan apa
yang dibutuhkan pelanggan, (2) untuk membangun dasar bagi pembuatan desain
perangkat lunak, (3) untuk membatasi serangkaian persyaratan yang dapat
divalidasi begitu perangkat lunak dibangun.
5
2.6 Bahasa Pemrograman PHP
Hypertext Preprocessor (PHP) adalah suatu bahasa pemerograman yang

digunakan untuk membuat web dinamis, walau bisa juga digunakan untuk membuat
program lain. Tentunya bahasa pemerograman PHP berbeda dengan HTML, pada
PHP Script/kode yang dibuat tidak dapat ditampilkan pada halaman/muka website
begitu saja, tapi harus diproses terlebih dahulu oleh web server lalu ditampilkan
dalam bentuk halaman website di web browser, Script PHP juga dapat disisipkan
pada HTML dan Script PHP selalu diawali dengan<php dan diakhiri dengan?>.
Manajemen database yang biasanya digunakan untuk pemerograman PHP

misalnya seperti MySQL, tapi ada juga yang menggunakan Oracle, Microsoft
Acces dan lainlain. PHP disebut juga sebgai bahasa pemerograman script server
side, karena PHP di proses pada komputer server.
2.6.1 Sejarah PHP
PHP dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada awalnya
kepanjangan PHP adalah Personal Home Page (situs personal) yang merupakan
kumpulan kode untuk mengolah data formulir dari web atau disebut Form
Interpreted (FI). Rasmus kemudian merilis source codenya untuk umum dengan
memberi nama PHP/FI dengan status open source. Hal ini membuat para programer
dunia tertarik untuk ikut mengembangkannya.
Kemampuan PHP/FI naik secara signifikan ketika versi 2.0 dirilis pada
November 1997. Pada versi 2.0 ini program C digunakan untuk membuat
interpreter PHP. Dalam rilis versi 2.0 juga disertakan berbagai modul yang
diperlukan untuk meningkatkan kemampuannya.
Pada tahun yang sama, perusahaan bernama Zend menulis ulang interpreter
PHP sehingga menjadi lebih bersih, lebih baik dan lebih cepat. Interpreter buatan
Zend kemudian dirilis ke publik pada Juni 1998 dengan versi 3.0 dan merubah
akronim PHP menjadi PHP Hypertext Preprocessing. Selanjutnya pada tahun 1999,
6
Zend merilis versi PHP 4.0 dan menjadi versi PHP yang paling banyak digunakan
programer untuk membuat aplikasi berbasis web karena cepat dan stabil.
Pada tahun 2004, versi PHP 5.0 dirilis dan menggunakan model
pemrograman berorientasi objek. Hingga saat ini PHP terus dikembangkan, dan
rilis terbaru adalah versi 8.
2.6.2 Fungsi PHP
Fungsi PHP dalam pemrograman web adalah untuk membuat aplikasi web
menjadi dinamis yang dapat memproses data dan menyimpan data ke dalam basis
data. Dengan begitu data pada aplikasi web dapat diubah dan dihapus tanpa harus
langsung mengubah kode program langsung. Namun hanya cukup dengan
mengubahnya melalui inputan dari aplikasi web. PHP juga mempersingkat tatanan
penulisan kode HTML dan CSS.
2.6.3 Sintaks
Sintaks PHP merupakan aturan dalam penulisan kode yang dapat dipahami
dengan baik oleh compiler ketika menerjemahkan kode program. Penulisan kode
PHP yang benar harus diawali dengan tag pembuka <?php dan tag penutup?>.
Didalam kode program PHP juga dapat diselipkan kode HTML maupun JavaScript.
Contoh Penulisan Kode PHP adalah sebagai berikut:
7
2.7 MYSQL
MySQL adalah sebuah DBMS (Database Management System)

menggunakan perintah SQL (Structured Query Language) yang banyak digunakan
saat ini dalam pembuatan aplikasi berbasis website. MySQL dibagi menjadi dua
lisensi, pertama adalah Free Software dimana perangkat lunak dapat diakses oleh
siapa saja. Dan kedua adalah Shareware dimana perangkat lunak berpemilik
memiliki batasan dalam penggunaannya.
MySQL termasuk ke dalam RDBMS (Relational Database Management

System). Sehingga, menggunakan tabel, kolom, baris, di dalam struktur database -
nya. Jadi, dalam proses pengambilan data menggunakan metode relational
database. Dan juga menjadi penghubung antara perangkat lunak dan database
server.
SQL digunakan sebagai sebuah bahasa standar yang digunakan untuk

mengelola basis data yang resmi pada tahun 1986 oleh ANSI (American National
Standards Institute) pada tahun 1986 dan pada tahun 1987 disebut sebagai SQL-86
oleh ISO (International Organization for Standardization). Perintah SQL pada
semua software database hampir sama.
Terdapat 3 (tiga) jenis perintah SQL dalam DBMS MySQL, yaitu:
1. Data Definition Language (DDL)
merupakan sub bahasa SQL yang digunakan untuk membangun kerangka

database. Atau juga merupakan kelompok perintah yang berfungsi untuk
mendefinisikan atribut-atribut database, table, atribut kolom, batasan-batasan
terhadap suatu atribut serta hubungan antar table.
Yang termasuk kelompok DDL ini adalah:
CREATE: Perintah ini digunakan untuk membuat, termasuk di antaranya membuat

database baru, tabel baru, view baru, dan kolom.
8
Contoh:
> create table mahasiswa (nim char (8) primary key,nama_mahasiswa varchar(20),
nilai integer(3), alamat varchar(25);
ALTER: Perintah ini digunakan untuk mengubah struktur tabel yang telah dibuat.
Pekerjaannya mencakup mengganti nama tabel, menambah kolom, mengubah
kolom, menghapus kolom, maupun memberikan atribut pada kolom.
Contoh:
>alter table mahasiswa rename wisudawan;
DROP: Perintah ini digunakan untuk menghapus database dan tabel.
Contoh:
>Alter table ‘mahasiswa’ drop ‘alamat’;
2. Data Manipulation Language (DML)
merupakan sub bahasa SQL yang digunakan untuk memanipulasi data

dalam database yang telah terbuat. Perintah yang digunakan, di antaranya
INSERT: Perintah ini digunakan untuk menyisipkan atau memasukkan data baru
ke dalam tabel. Penggunaannya setelah database dan tabel selesai dibuat.
Contoh:
Insert into mahasiswa values (“08052926”, “Frenky”,”70”);
SELECT: Perintah ini digunakan untuk mengambil data atau menampilkan data
dari satu tabel atau beberapa tabel dalam relasi. Data yang diambil dapat kita
tampilkan dalam layar prompt MySQL secara langsung maupun ditampilkan pada
tampilan aplikasi.
Contoh:
Select nama_mahasiswa from mahasiswa where nilai = 70;
9
UPDATE: Perintah ini digunakan untuk memperbarui data lama menjadi data
terkini. Jika Anda memiliki data yang salah atau kurang up to date dengan kondisi
sekarang, maka dapat diubah isi datanya menggunakan perintah UPDATE.
Contoh:
>mahasiswa set nim = ‘08052926’ = 08052927;
DELETE: Perintah ini digunakan untuk menghapus data dari tabel. Biasanya data
yang dihapus merupakan data yang sudah tidak diperlukan lagi. Pada saat
menghapus data, perintah yang telah dijalankan tidak dapat digagalkan, sehingga
data yang telah hilang tidak dapat dikembalikan lagi
Contoh:
>delete form mahasiswa;
3. Data Control Language (DCL)
Data Control Language (DCL) merupakan sub bahasa SQL yang digunakan
untuk melakukan pengontrolan data dan server databasenya.
Perintah DCL, di antaranya:
GRANT: Perintah ini digunakan untuk memberikan hak/ijin akses oleh

administrator (pemilik utama) server kepada user (pengguna biasa). Hak akses
tersebut berupa hak membuat (CREATE), mengambil (SELECT), menghapus
(DELETE), mengubah (UPDATE), dan hak khusus berkenaan dengan sistem
databasenya.
REVOKE: Perintah ini memiliki kegunaan terbalik dengan GRAND, yaitu untuk
menghilangkan atau mencabut hak akses yang telah diberikan kepada user oleh
administrator.
2.8 XAMPP
XAMPP adalah sebuah software yang berfungsi untuk menjalankan website

berbasis PHP dan menggunakan pengolah data MYSQL di komputer lokal.
10
XAMPP berperan sebagai server web pada komputer lokal. XAMPP juga dapat
disebut sebuah Cpanel server virtual, ang dapat membantu melakukan preview
sehingga dapat dimodifikasi website tanpa harus online atau terakses dengan
internet. Xampp merupakan pengembangan dari lamp (linuk, apache, MYSQL,
PHP, dan PERL).
XAMPP adalah proyek non profit yang di kembangkan oleh apache friend
yang didirikan oleh kai oswalad seilder dank ayvogelgesang pada tahun 2002
proyek ini bertujuan mempromosikan penggunaan apache web server Paket amp
(apache, mysql, php), salah satunya adalah XAMPP yang sudah terintregasi amp di
dalamnya dan menghemat resource computer daripada menginstal amp satu
persatu. Untuk mempermudah proses instalasi ketiga produk tersebut secara instant
dapat menggunakan XAMPP dalam satu proses install.
2.9 Web Server dan Web Browser
Website merupakan sebuah media informasi yang ada di internet. Website

tidak hanya dapat digunakan untuk penyebaran infomasi saja melainkan bisa
digunakan untuk membuat toko online. Website adalah kumpulan dari halaman-
halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain,
yang tempatnya berada di dalam World Wide Web (WWW) di Internet. Sebuah
halaman webadalah dokumen yang ditulis dalam format HTML (Hyper Text
Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol
yang menyampaikan informasi dari server website untuk ditampilkan kepada para
pemakai melalui web browser. Semua publikasi dari website-website tersebut dapat
membentuk sebuah jaringan informasi yang sangat besar.
Halaman-halaman dari website akan bisa diakses melalui sebuah URL yang
biasa disebut Homepage. URL ini mengatur halaman-halaman situs untuk menjadi
sebuah hirarki, meskipun, hyperlink-hyperlink yang ada di halaman tersebut
mengatur para pembaca dan memberitahu mereka susunan keseluruhan dan
bagaimana arus informasi ini berjalan. Beberapa website membutuhkan subskripsi
11
(data masukan) agar para user bisa mengakses sebagian atau keseluruhan isi website
tersebut (Javacreativity, 2014).
2.10 Visual Studio Code
Visual Studio Code adalah editor source code yang dikembangkan oleh
Microsoft untuk Windows, Linux dan MacOS. Ini termasuk dukungan untuk
debugging, GIT Controlyang disematkan, penyorotan sintaks, penyelesaian kode
cerdas, cuplikan, dan kode refactoring. Hal ini juga dapat disesuaikan, sehingga
pengguna dapat mengubah tema editor, shortcut keyboard, dan preferensi. Visual
Studio Code gratis dan open-source, meskipun unduhan resmi berada di bawah
lisensi proprietary.
Kode Visual Studio didasarkan pada Elektron, kerangka kerja yang

digunakan untuk menyebarkan aplikasi Node.js untuk desktop yang berjalan pada
Blinklayout. Meskipun menggunakan kerangka Elektron, Visual Studio Code tidak
menggunakan Atom dan menggunakan komponen editor yang sama (diberi kode
nama "Monaco") yang digunakan dalam Visual Studio Team Services yang
sebelumnya disebut Visual Studio Online (Lardinois, 2015).
2.11 HTML
Pengertian HTML Hypertext Markup Language (HTML) adalah bahasa

pendipenelitianan halaman yang menciptakan dokumen-dokumen hypertext atau
hypermedia. HTML memasukkan kode-kode pengendali dalam sebuah dokumen
pada berbagai poin yang dapat dispesifikasikan, yang dapat menciptakan hubungan
(hyperlink) dengan pengakses database yang bersifat network sehingga dapat
digunakan untuk aplikasi Multi User (Pengguna Banyak).
Tabel 2. 1 Contoh sejumlah tag pada sebuah dokumen HTML
Tag Keterangan
<html> ..... </html> Tag dasar yang menandakan dokumen
yang merupakan dokumen HTML.
12
<head> ... </head> Tag untuk mengisikan informasi
tentang dokumen HTML.
<title> ... </title> Tag yang berada di dalam Tag head

untuk menuliskan judul web pada
caption web.
<body> ... </body> Tag untuk mengisikan isi dokumen

web yang ingin ditampilkan sebagai
halaman web.
<p> ... </p> Menyatakan paragraf
<div>. .. </div> Menyatakan divisi
<h1> ... </h1> Untuk mengatur judul, semakin besar

angkanya maka ukuran font semakin
<h2> ... </h2> kecil
<h3> ... </h3>
<a> ... </a> Untuk membuat tautan (link)
<img> Untuk menyajikan gambar
<ul>. .. </ul> Untuk membuat bullet
<ol>. .. </ol> Untuk membuat nomor urut
13
<li>... </li> Daftar yang diatur oleh <ul> atau <ol>
<form>... </form> Untuk menangani formulir yang

berguna untuk memasukkan data oleh
pemakai
<input type=”tipe”> Untuk menentukan kontrol di formulir

yang digunakan untuk memasukkan
data
2.12 CSS
CSS adalah singkatan dari Cascading Style Sheets, berisi rangkaian

instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web.
Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf),
colors (warna), margins (ukuran), latar belakang (background), ukuran font (font
sizes) dan lainlain. Elemen-elemen seperti colors (warna), fonts (huruf), sizes
(ukuran) dan spacing (jarak) disebut juga styles. Cascading Style Sheets juga bisa
berarti meletakkan styles yang berbeda pada lapisan yang berbeda. CSS terdiri dari
style sheet yang memberitahukan browser bagaimana suatu dokumen akan
disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan
bantuan style sheet. Saat menggunakan CSS, tidak perlu lagi untuk menulisfont,
color atau size pada setiap paragraf, atau pada setiap dokumen. Mekanisme
Mengaplikasikan CSS terdapat dua cara
Cara pertama:
Inline Style Sheet mengetikkan langsung dalam tag html sebagai atribut.
14
Cara kedua:
Embedded Style Sheet Menggunakan tag style di dalam tag head
2.13 Framework Boostrap
Pengertian Bosstrap Menurut (Eko, 2016:11), “bootstrap merupakan salah

satu framework HTML, CSS, Dan JS yang digunakan untuk membuat website yang
bersifat responsive atau bisa menyesuaikan tampilan layout nya berdasarkan ukuran
viewport dari device pengaksesnya, mulai dari smartphone, tablet, maupun layar
PC”.
Bootstrap adalah sebuah framework yang dibuat dengan menggunakan

bahasa dari HTML dan CSS, namun juga menyediakan efek javascript yang
dibangun dengan menggunakan jquery. Bootstrap telah menyediakan kumpulan
komponen class interface dasar yang telah dirancang sedemikian rupa untuk
menciptakan tampilan yang menarik, bersih dan ringan. Selain itu, bootstrap juga
memiliki fitur grid yang berfungsi untuk mengatur layout yang bisa digunakan
dengan sangat mudah dan cepat. Kita juga diberi keleluasaan dalam
mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan
mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.
2.14 SDLC
System Development Life Cycle (SDLC) adalah keseluruhan proses dalam

membangun sistem melalui beberapa langkah. Ada beberapa model SDLC. Model
yang cukup populer dan banyak digunakan adalah waterfall. Beberapa model lain
15
SDLC misalnya fountain, spiral, rapid, prototyping, incremental, build & fix, dan
synchronize & stabilize. Dengan siklus SDLC, proses membangun sistem dibagi
menjadi beberapa Dalam sebuah siklus SDLC,
Siklus SDLC dijalankan secara berurutan, mulai dari langkah pertama

hingga langkah keenam. Setiap langkah yang telah selesai harus dikaji ulang,
kadang-kadang bersama expert user, terutama dalam langkah spesifikasi kebutuhan
dan perancangan sistem untuk memastikan bahwa langkah telah dikerjakan dengan
benar dan sesuai harapan. Jika tidak maka langkah tersebut perlu diulangi lagi atau
kembali ke langkah sebelumnya.
2.15 Struktur Navigasi
Struktur Navigasi Dalam pembuatan website, hal yang harus diperhatikan

sebelum merancang tampilan web adalah pembuatan struktur navigasi. Ada empat
struktur dasar yang digunakan Binanto (2010:269), yaitu linear, hierarkis,
nonlinear, dan komposit (Binanto, 2010).
2.15.1 Struktur Navigasi Linear
Linear Pengguna akan melakukan navigasi secara berurutan dari frame atau
byte informasi yang satu ke yang lainnya.
Gambar 2.1 Struktur Navigasi Linear
16
2.15.2 Struktur Navigasi Hierarkis
Hierarkis Struktur dasar ini disebut juga struktur “linear dengan

percabangan” karena pengguna melakukan navigasi disepanjang cabang pohon
struktur yang terbentuk oleh logika isi.
Gambar 2.2 Struktur Navigasi Hierarkis
2.15.3 Struktur Navigasi Nonlinear
Nonlinear Pengguna akan melakukan navigasi dengan bebas melalui isi

proyek dengan tidak terkait dengan jalur yang sudah ditentukan sebelumnya.
Gambar 2.3 Struktur Navigasi Nonlinear
17
2.15.4 Struktur Navigasi Komposit
Komposit Pengguna akan melakukan navigasi dengan bebas (secara

nonlinear), tetapi terkadang dibatasi presentasi linear film atau informasi penting
dan atau pada data yang paling terorganisasi secara logis pada suatu hierarki.
Sumber:
Gambar 2.4 Struktur Navigasi Komposit
2.16 Unified Modelling Language (UML)
Dalam merancang suatu model Sistem menggunakan konsep UML ada

aturan-aturan yang harus diiakukan yaitu bagaimana elemen pada model- model
yang kita buat berhubungan satudengan yang lainnya, Harus sesuai dengan standar
yang ada. Unified Modelling Language diaplikasikan untuk maksud tertentu
biasanya antara lain untuk merancang perangkat lunak, sarana komunikasi antara
perangkat lunak dengan proses bisnis, menjabarkan sistem secara rinci untuk
analisa dan mencari apa yang diperlukan sistem, dan mendokumentasi sistem yang
ada, proses-proses dan organisasinya. Meliputi beberapa model antara lain:
2.16.1 Use Case Diagram
Diagram ini bersifat statis yang memperlihatkan himpunan use-case dan

aktor-aktor (suatu jenis khusus dari kelas). Diagram ini sangat penting untuk
mengorganisasi dan memodelkan perilaku suatu sistem yang dibutuhkan serta
diharapkan pengguna.
18
2.16.2 Class Diagram
Diagram ini memperlihatkan himpunan kelas-kelas, antarmuka-antarmuka

kolaborasi-kolaborasi, dan relasi-relasi, serta bersifat statis.
2.16.3 Sequence Diagram
Fungsi diagram sequence dimaksudkan untuk mengembangkan komunikasi

antara objek, bukan memanipulasi data saat berkomunikasi.
2.16.4 Activity Diagram
Dalam diagram aktifitas lebih memfokuskan diri pada eksekusi dan alur
sistem dari pada bagaimana sistem itu dirakit. Diagram ini tidak hanya
memodelkan software melainkan memodelkan model bisnis juga. Diagram aktifitas
menunjukan aktifitas sistem dalam bentuk aksi-aksi. Ketika digunakan dalam
permodelan software, diagram aktifitas mempersentasikan pemanggilan suatu
fungsi tertentu misalnya call. Sedangkan
bila dimodelkan dalam pemodelan bisnis, diagram ini menggambarkan aktfitas

yang dipicu oleh kejadian-kejadian di luar seperti pemesanan atau kejadian-
kejadian internal.
19
3. PERANCANGAN DAN IMPLEMENTASI
3.1 Gambaran Umum
Bab ini penulis akan membahas mengenai pembuatan website toko

sembako yang merupakan website yang ditujukan kepada konsumen
bahan pokok, Website ini dibangun menggunakan dengan framework
bootstrap dan MYSQL sebagai database, dan visual studio code sebagai
text editor dan menggunakan Bahasa pemrograman PHP, Java Script dan
CSS.
Pembahasan terdiri dari tahap analisa dan tahap implementasi

pembuatan. Pada tahap analisa akan dijelaskan mengenai struktur
navigasi dan rancangan tampilan, sedangkan pada tahap implementasi
pembuatan akan dijelaskan tentang pembuatan interface dan pengkodean
web.
Website ini memiliki beberapa halaman yang terdiri dari halaman

login, halaman utama, halaman stok barang, halaman barang masuk,
halaman barang keluar, dan halaman kelola admin.
3.2 Diagram Unified Modelling Language (UML)
Perancangan aplikasi dilakukan dengan menggunakan metode

permodelan Unified Modelling Language (UML), dengan rancangan
umum sistem menggunakan Use Case Diagram dan penggambaran
hubungan antar table didalamsistem menggunakan Class Diagram.
20
3.2.1 Use Case Diagram
Rancangan umum sistem dibuat menggunakan UseCase Diagram,
dibawah ini merupakan bentuk Use Case Diagram untuk user.
Gambar 3.1. Use Case Diagram
21
3.2.2 Class Diagram
Class Diagram digunakan untuk membantu analis melihat struktur

databaseyang ada pada sebuah website. Class diagram memiliki tiga area
pokok yaitu nama,atribut, dan operasi. Nama berfungsi untuk memberi
identitas pada sebuah kelas, atribut berfungsi untuk memberi karakter
pada data, dan operasi berfungsi untuk memberi aksi apa yang akan
dilakukan. Class diagram pada website ini ditunjukkan pada gambar
berikut.
Gambar 3.2. Class Diagram
22
3.2.2.1 Activity Diagram stok barang
Diagram ini, berupa aktivitas-aktivitas di use case. Pada Gambar 3.3.

ini merupakan activity diagram pada website sistem stok barang yang
tersedia.
Gambar 3.3. Activity Diagram stok barang
Pada gambar 3.3. terlihat admin dapat melihat stok barang yang
tersedia
23
3.2.2.2 Activity Diagram barang masuk

ini merupakan activity diagram pada website sistem stok barang masuk.
Gambar 3.4. Activity Diagram barang masuk
Pada gambar 3.4. terlihat admin dapat melakukan input, hapus, dan
ubah data barang masuk.
24
3.2.2.3 Activity Diagram Stok barang keluar

ini merupakan activity diagram pada website sistem stok barang keluar
Gambar 3.5. Activity Diagram barang keluar
Pada gambar 3.5. terlihat admin dapat menambah, mengubah,

menghapus, dan melihat data barang keluar.
25
3.2.2.4 Activity Diagram Login
Diagram ini, berupa aktivitas-aktivitas di use case. Pada Gambar

3.5. ini merupakan activity diagram pada website sistem stok barang
keluar
Gambar 3.6. Activity Diagram Login
Pada gambar 3.6. adalah tampilan dari activity diagram fitur login
dimana admin harus dapat melakukan login untuk mengakses dan
menggunakan fitur – fitur pada website sistem stok barang.
3.3 Struktur database

Di dalam sebuah website biasanya digunakan basis data untuk
menyimpan data yang digunakan pada website tersebut. Pada website
pembelian furniture untukmemasukkan data yang digunakan ke dalam
field-field digunakan perangkat lunakMySQL. Website ini memiliki basis
data dengan nama shopcart dan memiliki limatabel yaitu tabel yaitu tabel
user, products, order, migration, dan password_reset.
26
1. Rancangan Tabel Admin
Tabel users adalah tabel yang menyimpan data penjual. Padatabel

ini terdapat field-field yang berupa id user, email, dan password.
Tabel 3. 1 Tabel Admin
Field Tipe Data Ukuran Index

Id user Integer 11 Primary key
Email Varchar 50
Password Varchar 50
2. Rancangan Tabel Stok Barang
Tabel stok barang adalah tabel yang menyimpan data barang

yang ingin dijual. Pada tabel ini terdapat field-field yang berupa id barang,
nama barang, deskripsi, stock.
Tabel 3. 2 Tabel Stock Barang

Id barang Int 11 Primary key
Nama barang Varchar 25
Deskripsi Varchar 25
Stock Varchar 11
Gambar Varchar 99
27
3. Rancangan Tabel Barang Masuk
Tabel barang masuk adalah tabel yang menyimpan data yang

baru masuk toko. Pada tabel ini terdapat field-field yang berupa id masuk,
id keluar, id barang, tanggal, keterangan, penerima, quantity.
Tabel 3. 3 Tabel Barang Masuk

Id masuk Int 11 Primary
key
Id keluar Int 11 Primary
key
Id barang Int
Tanggal Timestamp
Keterangan Varchar 25
Penerima Varchar 25
Quantity Int 11
3. Rancangan Tabel Barang Keluar
Tabel barang keluar adalah tabel yang menyimpan data barang

apa saja yang sudah keluar. Pada tabel ini terdapat field-field yang berupa
id keluar, id barang, tanggal, penerima, quantity.
Tabel 3. 4 Tabel Barang Keluar

Id keluar Int 11 Primary
key
Id barang Int
Tanggal Timestamp
Penerima Varchar 25
Quantity Int 11
28
3.4 Struktur Navigasi
Struktur Navigasi Website ini digunakan untuk menggambarkan
secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana
hubungan antara isi- isi website tersebut. Struktur Navigasi Website ini
menggunakan struktur navigasi linier. Melalui struktur navigasi website ini,
terlihat bagaimana isi dan susunan dari sebuah website secara menyuluruh.
Pembuatan struktur navigasi website ini untuk membantu ketika akan
membuat rancangan seluruh halaman web.
Gambar 3.7 Struktur Navigasi
Pada struktur navigasi non linear tiap-tiap percabangan memiliki

kedudukan yang sama sehingga tidak ada master page. Sehingga masing-
masing halaman dapat link kemana saja tanpa harus berpindah dulu ke
halaman lain.
29
3.5 Perancangan Layout
Pada tahap ini akan dimulai perancangan pembuatan website toko

kue daring yang terdiri atas beberapa langkah meliputi rancangan halama n
dan komponen apa saja yang terdapat pada halaman tersebut. Betikut akan
dibahas perancangan tampilannya.
1. Tampilan Halaman Login
Rancangan tampilan Login pada website toko sembako berkah ini

memiliki link untuk dapat berpindah halaman lain. Pada halaman home ini
user dapat melakukan login terlebih dahulu.
Gambar 3.8 Rancangan Tampilan Halaman Login
30
2. Tampilan Halaman Home
Rancangan tampilan Home pada website toko sembako berkah ini

memiliki link untuk dapat berpindah halaman lain. Pada halaman home ini
user dapat melihat stock barang.
Gambar 3.9 Rancangan Tampilan Halaman Utama
31
3. Tampilan Halaman Stock Barang
Rancangan tampilan Stock Barang pada website toko sembako berkah ini
untuk dapat melihat stock barang.
Gambar 3.10 Rancangan Tampilan Halaman Stock Barang
Rancangan tampilan Stok barang pada website toko sembako berkah ini
untuk melihat barang apa saja yang tersedia.
32
4. Tampilan Halaman Barang Masuk
Rancangan tampilan Stock Barang pada website toko sembako

berkah ini untuk dapat melihat barang apa saja yang baru masuk.
Gambar 3.11 Rancangan Tampilan Halaman Barang Masuk
5. Tampilan Halaman Barang Keluar
Rancangan tampilan Barang Keluar pada website toko sembako

berkah ini untk melihat barang apa saja yang sudah keluar atau terjual.
Gambar 3.12 Rancangan Tampilan Halaman Barang Keluar
33
6. Tampilan Halaman Kelola Admin
Rancangan tampilan Kelola Admin pada website toko sembako
berkah ini untuk mengkelola tentang admin.
Gambar 3.13 Rancangan Tampilan Halaman Kelola Admin
3.6 Tahap Penginstallan
Sebelum tahap pengkodean dan implementasi dilakukan,

dibutuhkan beberapa software yang akan digunakan untuk membuat
aplikasi toko sembako online ini. Penulis menggunakan software Visual
Studio Code untuk text editor dan software Xampp yang berguna sebagai
web server serta untuk menyimpan database kedalam DBMS MySQL.
34
3.6.1 Instalasi Xampp
Pertama penulis harus memiliki perangkat lunak Xampp untuk web

server yang akan ditanam di laptop penulis, penulis mengunduhnya di situs
resmi Xampp.
Berikut adalah langkah- langkah penginstalan Xampp yang ditulis oleh

penulis:
1. Double klik pada xampp-win32-5.6.3-0-VC11-installer.exe. Saat muncul

gambar 3.14, klik next untuk melanjutkan.
Gambar 3.14 Proses Instalasi Xampp
2. Pilih komponen yang akan di instal, dalam kasus ini, penulis mencentang
semuanya seperti pada gambar 3.8. Lalu teruskan dengan klik tombol next.
35
3. Pilih tempat untuk menyimpan installan Xampp nya, penulis
menyimpannya di local disk C, seperti pada gambar 3.16
4. Pada versi 5.6.3 ini, Xampp dilakukan oleh Bitnami, bila ingin tahu lebih
jauh tentang Bitnami, centanglah pilihan Learn more about Bitnami for
Xampp. Pada kasus ini penulis menghilangkan centangnya seperti pada
gambar 3.10. Lanjutkan dengan klik next
36
5. Pada gambar 3.18 akan tampil persetujuan untuk memulai pengisntalan,
lalu penulis klik next.
6. Proses instalasi Xampp pun berjalan dan tunggu beberapa saat terlihat
seperti pada gambar 3.19
37
7. Setelah proses instalasi selesai, penulis akan langsung mengaktifkan
XAMPP dengan mencentang Do you want to start the control panel now?
kemudian klik finish seperti pada gambar 3.20
8. Akan muncul jendela control panel XAMPP pada gambar 3.14. Karena
penulis ingin menggunakan DBMS MySQL dan ingin menggunakan web
server maka klik start pada Apache dan MySQL agar dapat membuat sebuah
database di MySQL menggunakan tampilan GUI dariweb server yang telah
di instal di laptop penulis.
3.21 Menjalankan Xamp
38
3.6.2 Instalasi Visual Studio Code
1. buka Aplikasi VSCode yang sudah di download, Kemudian ikuti kotak

merah pada gambar klik Next.
3.22 Gambar instalasi text editor Visual Studio Code
2. Kemudian pilih “I accept the agreement” untuk menyetujui kebijakan dari

VSCode lalu klik Next.
39
3. Kemudian klik Next lagi itu hanya penempatan direktori file programnya,
lalu Next untuk membuat folder nya, Kemudian Ceklis “Create Desktop Icon” jika
ingin membuat shortcut VSCode nya kemudian ceklis “Add to PATH (available
after restart) jika sudah klik Next.
4. Kemudian Klik Install tunggu sampai “Setup has finished installing Visual
Studio Code on your komputer” kemudian klik Finish seperti gambar dibawah ini.
40
3.7 Tahap Pengkodeaan
Pada tahapan pembuatan imolementasi, penulis menggunakan text

editor Visual Studio Code, database menggunakan PHPMyAdmin yang
telah di instal sebelumnya untuk menuliskan kode program.
3.7.1 Pembuatan Konfigurasi
Pada tahapan awal, penulis menggunakan Visual Studio Code untuk

menuliskan kode program. Tahap pertama adalah melakukan konfigurasi
dengan membuat file bernama “fucntion.php” yang bertujuan untuk
menghubungkan database yang sudah dibuat dengan code project web dan
juga mendapat hak akses untuk masuk ke dalam sistem saat login.
3.26 Koneksi Database
41
3.7.2 Pembuatan Database
Website toko sembako berkah menggunakan database MySql.

Pembuatan database dilakukan menggunakan PHPMyAdmin.
Gambar 3.27 XAMPP
Gambar 3.28 XAMPP
42
Langkah pertama untuk mengaktifkan XAMPP adalah klik start pada
apache tunggu hingga muncul tanda hijau pada tulisan apache. Setelah itu klik start
pada MySql tunggu hingga muncul tanda hijau pada tulisan MySql.
Untuk menjalankannya pertama buka browser kemudian ketikkan url
http://localhost/phpmyadmin/ yang telah dibuat database bernama db_stockbarang
yang terdiri dari beberapa tabel.
3.29 Struktur Table tbl_Login
Tabel login adalah table untuk menyimpan data dari admin yang terdiri dari
id_user, email, dan password.
3.30 Struktur Table tbl_Stock
43
Tabel stock adalah table untuk menyimpan data barang yang tersedia, yang
terdiri dari id_barang, nama_barang, deskripsi, stock, dan gambar.
3.31. Struktur Table tbl_masuk
Tabel barang masuk adalah table untuk menyimpan data barang yang baru
masuk atau tersedia, yang terdiri dari id_masuk, id_barang, tanggal, keterangan,
dan qty.
3.32. Struktur Table tbl_masuk
Tabel barang keluar adalah table untuk menyimpan data barang yang baru
keluar atau terjual, yang terdiri dari id_keluar, id_barang, tanggal, penerima, dan
qty
44
1. Halaman Login
Adalah tampilan yang pertama kali terbuka ketika baru membuka

website Di halaman Login ini user mengisi email dan password terlebih
dahulu.
3.33 Login.Php
Gambar 3.34 Halaman Login
45
2. Halaman Utama
Adalah tampilan yang pertama kali terbuka ketika sudah login. Di

halaman Home ini user dapat melihat stock barang, barang yang masuk, dan
barang keluar yang ada di toko sembako berkah.
Gambar 3.35 Index.Php
Gambar 3.36 Halaman Utama
46
3. Halaman Stock Barang
Adalah tampilan yang dapat menampilkan stock barang yang tersedia

dan bisa menambahkan barang baru dari toko sembako ini.
Gambar 3.37 Stock Barang Index.Php
Gambar 3.38 Halaman Stock Barang
47
4. Halaman Barang Masuk
Adalah halaman yang menampilkan barang baru apa saja yang masuk dan
ditambah ke dalam stock barang.
Gambar 3.39 Barang Masuk Index.Php
Gambar 3.40 Halaman Barang Masuk
48
5. Halaman Barang Keluar
Adalah halaman yang menampilkan serta menambahkan barang apa

saja yang keluar dari toko dan tanggal yang tertera di halaman barang
keluar.
Gambar 3.41 Barang Keluar Index.Php
Gambar 3.42 Halaman Barang Keluar
49
6. Halaman Kelola Admin
Adalah halaman yang menampilkan serta menambahkan barang apa saja

yang keluar dari toko dan tanggal yang tertera di halaman barang keluar.
Gambar 3.43 Admin.Php
Gambar 3.44 Halaman Kelola Admin
50
3.8 Implementasi Dan Testing
3.8.1 Proses Hosting Web
Hosting merupakan tempat penyimpanan data secara online yang

didalamnya terdapat berbagai macam format seperti gambar, text
ataupun video, yang nantinya semua data tersebut dapat diakses dan
dikunjungi oleh banyak orang secara online. Proses hosting biasanya akan
dilakukan ketika pembuatan web selesai. Dalam melalukan hosting,
penulis menggunakan hosting secara gratis melalui https://infinityfree.net/
Berikut Langkah-langkahnya:
1. Langkah pertama yaitu mengunjungi official site infinityfree.net, untuk
kemudian melakukan login. Dengan tampilan seperti pada gambar 3.45
Gambar 3.45 Login ke infinityfree.net
51
2. Setelah login, Langkah selanjutnya adalah membuat akun hosting baru.
Dilangkah ini juga tulis domain yang di inginkan. Dan karena ini gratis jadi
ga bisa milih ekstensi domain secara bebas, jadi hanya yang ada di
infinityfree.net ini.
Gambar 3.46 Proses Pembuatan Akun Hosting
3. Jika proses pembuatan akun hosting selesai, selanjutnya akan menuju ke

halaman detail akun. Seperti gambar dibawah ini.
Gambar 3.47 Detail Akun
52
4. Langkah selanjutnya menuju ke control panel dari infinityfree.net ini,
Gambar 3.48 Control Panel
5. Di control panel tadi selanjutnya menuju ke online file manager. Lalu pilih
folder htdocs, kemudian upload file project di dalam folder htdocsnya.
Gambar 3.49 Upload File Project
53
6. Setelah domain udah terbuat, terus folder projectnya juga udah di upload
ke online file manager yang ada di infinityfree.net. Langkah selanjutnya ini
mengkonfigurasi databasenya. Caranya yaitu menuju ke PhpMyAdmin
yang ada di control panel, lalu membuat database baru. Dan nanti hasilnya
seperti gambar dibawah ini
Gambar 3.50 Mengkonfigurasi Database
7. Klik tombol admin dan nantinya akan masuk ke halaman PhpMyAdmin.

Lalu import basis data untuk mengupload file basis data sql yang udah
dibuat, lalu klik kirim. Jika file berhasil di upload, selanjutnya cek ke struktur
databasenya seperti gambar dibawah ini.
Gambar 3.51 Halaman PhpMyAdmin
54
8. Langkah terakhir adalah mengubah koneksi database, agar dapat
tersambung dengan database yang sudah dibuat pada langkah keenam.
Untuk mengubah koneksinya yaitu menuju ke file project dan file php yang
untuk mengkoneksikan ke database.
Gambar 3.52 Edit File Untuk Menyambungkan ke Database
9. Setelah semua file berisikan kode programmingnya diupload pada htdocs

dan database sudah diimport pada admin hosting, maka hosting sudah
dapat digunakan yang memiliki label link http://tokoberkah.epizy.com/
Gambar 3.53 tokoberkah.epizy.com
55
3.8.2 Pengujian Website
Pengujian website diperlukan untuk mengetahui website yang

telah dibuat apakah sesuai dengan perancangan yang telah ditentukan da n
layak digunakan. Pada tahap pengujian ini, penulis menggunakan metode
blackbox untuk mengetahui apakah fitur pada website berjalan denga n
baik atau dengan kesalahan.Kesalahan yang terjadi seperti fungsi yang
tidak benar atau hilang, kesalahan interface, kesalahan struktur data,
kesalahan kinerja, atau kesalahan inisiasi, dan terminasi.
Pelaksanaan Pengujian
Setelah dilakukan beberapa pengujian semua link dapat berjalan

dengan baiksesuai dengan menu- menu yang diberikan dalam website.
Pada halaman admin, semua link atau tombol juga berfungsi dengan baik
seperti tombol edit, hapus, dansimpan data. Pada Tabel 3.4 disajikan
pengujian website dari setiap fungsi dengan menggunakan metode
blackbox.
56
Tabel 3.5 Pengujian Website Menggunakan Metode
Blackbox
Hasil yang
No Fungsi Skenario Hasil
diharapkan
Toko Sembako Menampilkan seluruh Berhasil

halaman saat pertama kali Menampilkan Sukses
Berkah
1. membuka website Halaman Pertama
Login sebagai
Login Berhasil login Suskses
4. admin
Menampilkanjumlah Berhasil
stok barang yang Menampikan
5. Stok Barang Sukses
tersedia stok barang
Menampilkan Berhasil
Barang yang menampilkan Sukses
6. Barang Masuk Baru masuk barang masuk
Atau tersedia
Berhasil
Menampilkan barang
menampilkan
yang sudah keluar atau Sukses
7. Barang Keluar barang yang
terjual
sudah keluar
Menampilkan
Berhasil
8. pengelolaan admin
menampilkan Sukses
Kelola Admin seperti email dan
kelola admin
password
Pengujian website diatas juga dilakukan dengan Google Chrome
57
4. PENUTUP
4.1 Kesimpulan
Berdasarkan hasil uji coba dengan metode blackbox dan diuji

dengan dua web browser yaitu Google Chrome serta implementasi yang
telahdilakukan, aplikasi e-commerce dalam penjualan sembako berbasis
web ini, dengan fitur- fitur yang ada di dalam aplikasi ini telah sukses
dijalankan.
Aplikasi yang dibuat dengan menggunakan framework Bootstrap
dan MySQLini memiliki beberapa fitur, diantaranya fitur stok barang yaitu
memudahkan user toko sembako untuk menampilkan barang yang
tersedia, fitur kelola admin yaitu untuk login kedalaman aplikasi
Walaupun aplikasi ini sukses dijalankan, tentunya aplikasi ini
masih memiliki kekurangan yaitu
Dengan adanya aplikasi ini diharapkan dapat memudahkan
penjual untuk memasarkan dan meningkatkan penjualan sembako.
4.2 Saran
Dari hasil kesimpulan, pembuatan website toko penjualan

Sembako Berkah ini masih perlu disempurnakan, sehingga penulis masih
harus melakukan pengembangan dan penambahan dalam beberapa ha l
kedepannya.
58
DAFTAR PUSTAKA
[1] Faizah, N. M., & Amelia, N. (2016). Perancangan Aplikasi Sistem
Persediaan Sembako Pda Toko Harapan Baru. Jurnal Sains dan Teknologi
Utama , Vol XI No.2, 87-100
[2] Yuni Eka Achyani, Eni Arviana Teknik Komputer Vol 4, No.1, Februari
2018 180 (struktur navigasi)
Monitoring Bus Trans Padang Berbasis Web Isnardi Jurnal J-Click Vol 3
No.2 Desember 2016 (sdlc)
[3] Hidayat, Deddy. 2010. Definisi Sistem. Tanggerang: Jurnal Cyber Raharja.
https://www.fendihidayat.com/2020/10/sejarah-dan-
pengertianpemrograman-php.html
[4] Muhammad Robith Adani Agustus 15, 2020

https://www.sekawanmedia.co.id/pengertian- mysql/
[5] Yunita Trimarsiah, Muhajir Arafat. Analisis dan Perancangan Website

sebagai Sarana Informasi Pada Lembaga Bahasa Kewirausahaan Dan
Komputer Akmi Baturaja
L
59
LAMPIRAN LISTING PROGRAM
- index.php
<?php
require 'function.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Stock Barang</title>
<link href="css/styles.css" rel="stylesheet" />
<link
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
rel="stylesheet" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>
<style>
.zoomable{
width: 100px;
}
.zoomable:hover{
transform: scale(2.5);
transition: 0.3s ease;
}
</style>
</head>
<body class="sb-nav- fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.php">Toko Sembako Berkah</a>
<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle"
href="#"><i class="fas fa-bars"></i></button>
</nav>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark"
id="sidenavAccordion">
<div class="sb-sidenav- menu">
<div class="nav">
<a class="nav- link" href="index.php">
L-1
<div class="sb-nav-link- icon"><i class="fas fa-tachometer-
alt"></i></div>
Stock Barang
</a>
<a class="nav- link" href="masuk.php">
alt"></i></div>
Barang Masuk
</a>
<a class="nav- link" href="keluar.php">
alt"></i></div>
Barang Keluar
</a>
<a class="nav- link" href="admin.php">
alt"></i></div>
Kelola Admin
</a>
<a class="nav- link" href="logout.php">
alt"></i></div>
Logout
</a>
</div>
</div>
<div class="sb-sidenav- footer">
<div class="small"></div>
Sembako Berkah
</div>
</nav>
</div>
<div id="layoutSidenav_content">
<main>
<div class="container-fluid">
<h1 class="mt-4">Stock Barang</h1>
<div class="card mb-4">
<div class="card-header"
<div class="card-header">

<button type="button" class="btn btn-primary" data-
toggle="modal" data-target="#myModal">
Tambah Barang
</button>
</div>
L
L-2
<div class="card-body">
<?php
$ambildatastock = mysqli_query($conn,"select * from stock
where stock < 1");
while($fetch=mysqli_fetch_array($ambildatastock)){
$barang = $fetch['namabarang'];
?>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Perhatian!</strong> Stock <?=$barang;?> Telah
Habis
</div>
<?php
}
?>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable"
width="100%" cellspacing="0">
<thead>
<tr>
<th>No</th>
<th>Gambar</th>
<th>Nama Barang</th>
<th>Deskripsi</th>
<th>Stock</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$ambilsemuadatastock = mysqli_query($conn,"select
* from stock");
$i = 1;
while($data=mysqli_fetch_array($ambilsemuadatastock)){
$namabarang = $data['namabarang'];
$deskripsi = $data['deskripsi'];
$stock = $data['stock'];
$idb = $data['idbarang'];
//cek ada gambar atau tidak

$gambar = $data['image']; //ambil gambar
if($gambar==null){
//jika tidak ada gambar
L
L-3
$img = 'No Photo';
} else {
//jika ada gambar
$img = '<img src="images/'.$gambar.'"
class="zoomable">';
}
?>
<tr>
<td><?=$i++;?></td>
<td><?=$img;?></td>
<td><?=$namabarang;?></td>
<td><?=$deskripsi;?></td>
<td><?=$stock;?></td>
<td>
<button type="button" class="btn btn-warning"
data-toggle="modal" data-target="#edit<?=$idb;?>">
Edit
</button>
<button type="button" class="btn btn-danger"
data-toggle="modal" data-target="#delete<?=$idb;?>">
Delete
</button>
</td>
</tr>

<div class="modal fade" id="edit<?=$idb;?>">
<div class="modal-dialog">
<div class="modal-content">


<div class="modal-header">
<h4 class="modal-title">Edit Barang</h4>
dismiss="modal">×</button>
</div>

<form method="post"
enctype="multipart/form-data">
<div class="modal-body">
<input type="text" name="namabarang"
value="<?=$namabarang;?>" class="form-control" required>
<br>
<input type="text" name="deskripsi"
value="<?=$deskripsi;?>" class="form-control" required>
<br>
L
L-4
<input type="file" name="file" class="form-
control">
<br>
<input type="hidden" name="idb"
value="<?=$idb;?>">
<button type="submit" class="btn btn-
primary" name="updatebarang">Submit</button>
</div>
</form>
</div>
</div>
</div>

<div class="modal fade"
id="delete<?=$idb;?>">
<h4 class="modal-title">Hapus barang</h4>
</div>

<form method="post">
Apakah Anda yakin ingin menghapus
<?=$namabarang;?>?
value="<?=$idb;?>">
<input type="text" name="namabarang"
value=<?=$namabarang;?> class="form-control" required>
<br>
<br>
danger" name="hapusbarang">hapus</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
};
?>
</tbody>
L
L-5
</table>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-light mt-auto">
<div class="d-flex align- items-center justify-content-between
small">
<div class="text- muted">Copyright © Your Website
2020</div>
<div>
<a href="#">Privacy Policy</a>
·
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
<script src="js/scripts.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"
<script src="assets/demo/chart-area-demo.js"></script>
<script src="assets/demo/chart-bar-demo.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"
<script
src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"
<script src="assets/demo/datatables-demo.js"></script>
</body>

<div class="modal fade" id="myModal">
L
L-6
<h4 class="modal-title">Tambah Barang</h4>
</div>

<form method="post" enctype="multipart/form-data">
<input type="text" name="namabarang" placeholder="Nama Barang"
class="form-control" required>
<br>
<input type="text" name="deskripsi" placeholder="Deskripsi Barang"
<br>
<input type="number" name="stock" class="form-control"
placeholder="Stock awal" value="0" min="0" required>
<br>
<input type="file" name="file" class="form-control">
<br>
<button type="submit" class="btn btn-primary"
name="addnewbarang">Submit</button>
</div>
</form>
</div>
</div>
</div>
L
L-7
- funciton.php
<?php
session_start();
//Membuat koneksi ke database
$conn = mysqli_connect("localhost","root","","stockbarang");
//menambah barang baru
if(isset($_POST['addnewbarang'])){
$namabarang = $_POST['namabarang'];
$deskripsi = $_POST['deskripsi'];
$stock = $_POST['stock'];
//soal gambar
$allowed_extension = array('png','jpg');
$nama = $_FILES['file']['name']; //ngambil nama gambar
$dot = explode('.',$nama);
$ekstensi = strtolower(end($dot)); //nagmbil ekstensinya
$ukuran = $_FILES['file']['size']; //ngambil size filenya
$file_tmp = $_FILES['file']['tmp_name']; //ngambil lokasi filenya
//penamaan file -> enkripsi
$image = md5(uniqid($nama,true) . time()).'.'.$ekstensi; //menggabungkan nama
fiele yg dienkripsi dgn ekstensinya
//validasi udah ada atau belum
$cek = mysqli_query($conn,"select * from stock where
namabarang='$namabarang'");
$hitung = mysqli_num_rows($cek);
if($hitung<1){
//jika belum ada
//proses upload gambar
if(in_array($ekstensi, $allowed_extension) === true){
//validasi ukuran filenya
if($ukuran < 15000000){
move_uploaded_file($file_tmp, 'images/'.$image);
$addtotable = mysqli_query($conn,"insert into stock (namabarang,
deskripsi, stock, image) values('$namabarang','$deskripsi','$stock','$image')");
if($addtotable){
header('location:index.php');
} else {
echo 'Gagal';
}
} else {
//kalau filenya lebih dari 15mb
echo '
<script>
alert("ukuran terlalu besar");
window.location.href="index.php;
L
L-8
<script>
';
}
} else {
//kalau filenya tidak png/jpg
echo '
<script>
alert("file harus png/jpg");
<script>
';
}
} else {
//jika sudah ada
echo '
<script>
alert("nama barang sudah terdaftar");
<script>
';
}
};
//Menambah barang masuk
if(isset($_POST['barangmasuk'])){
$barangnya = $_POST['barangnya'];
$penerima = $_POST['penerima'];
$qty = $_POST['qty'];
$cekstocksekarang = mysqli_query($conn,"select * from stock where
idbarang='$barangnya'");
$ambildatanya = mysqli_fetch_array($cekstocksekarang);
$stocksekarang = $ambildatanya['stock'];
$tambahkanstocksekarangdenganquantity = $stocksekarang+$qty;
$addtomasuk = mysqli_query($conn,"insert into masuk (idbarang, keterangan,
qty) values('$barangnya','$penerima','$qty')");
$updatestockmasuk = mysqli_query($conn,"update stock set
stock='$tambahkanstocksekarangdenganquantity' where idbarang='$barangnya'");
if($addtomasuk&&$updatestockmasuk){
header('location:masuk.php');
} else {
echo 'Gagal';
}
}
//Menambah barang keluar
if(isset($_POST['addbarangkeluar'])){
$barangnya = $_POST['barangnya'];
L
L-9
$penerima = $_POST['penerima'];
$cekstocksekarang = mysqli_query($conn,"select * from stock where
idbarang='$barangnya'");
$ambildatanya = mysqli_fetch_array($cekstocksekarang);
$stocksekarang = $ambildatanya['stock'];
$tambahkanstocksekarangdenganquantity = $stocksekarang-$qty;
$addtokeluar = mysqli_query($conn,"insert into keluar (idbarang, penerima,
qty) values('$barangnya','$penerima','$qty')");
$updatestockmasuk = mysqli_query($conn,"update stock set
stock='$tambahkanstocksekarangdenganquantity' where idbarang='$barangnya'");
if($addtokeluar&&$updatestockmasuk){
header('location:keluar.php');
} else {
echo 'Gagal';
header('location:keluar.php');
}
}
//Update info barang
if(isset($_POST['updatebarang'])){
$idb = $_POST['idb'];
$namabarang = $_POST['namabarang'];
$deskripsi = $_POST['deskripsi'];
$update = mysqli_query($conn,"update stock set namabarang='$namabarang',
deskripsi='$deskripsi' where idbarang = '$idb'");
if($update){
} else {
echo 'Gagal';
}
//soal gambar
$allowed_extension = array('png','jpg');
$nama = $_FILES['file']['name']; //ngambil nama gambar
$dot = explode('.',$nama);
$ekstensi = strtolower(end($dot)); //nagmbil ekstensinya
$ukuran = $_FILES['file']['size']; //ngambil size filenya
$file_tmp = $_FILES['file']['tmp_name']; //ngambil lokasi filenya
//penamaan file -> enkripsi
$image = md5(uniqid($nama,true) . time()).'.'.$ekstensi; //menggabungkan
nama fiele yg dienkripsi dgn ekstensinya
if($ukuran==0){
//jika tidak ingin upload
$update = mysqli_query($conn,"update stock set
namabarang='$namabarang', deskripsi='$deskripsi,' where idbarang ='$idb'");
if($update){
L
L-10
} else {
echo 'Gagal';
}
} else {
//jika ingin
move_uploaded_file($file_tmp, 'images/'.$image);
$update = mysqli_query($conn,"update stock set
namabarang='$namabarang', deskripsi='$deskripsi',image='$image' where
idbarang ='$idb'");
if($update){
} else {
echo 'Gagal';
}
}
}
//Menghapus barang dari stock
if(isset($_POST['hapusbarang'])){
$idb = $_POST['idb']; //idbarang
$gambar = mysqli_query($conn,"select * from stock where idbarang='$idb'");
$get = mysqli_fetch_array($gambar);
$img = 'images/'.$get['image'];
unlink($img);
$hapus = mysqli_query($conn, "delete from stock where idbarang='$idb'");
if($hapus){
} else {
echo 'Gagal';
}
};
//Mengubah data barang masuk
if(isset($_POST['updatebarangmasuk'])){
$idm = $_POST['idm'];
$deskripsi = $_POST['keterangan'];
$lihatstock = mysqli_query($conn,"select * from stock where
idbarang='$idb'");
$stocknya = mysqli_fetch_array($lihatstock);
$stockskrg = $stocknya['stock'];
$qtyskrg = mysqli_query($conn, "select * from masuk where
idmasuk='$idm'");
L
L-11
$qtynya = mysqli_fetch_array($qtyskrg);
$qtyskrg = $qtynya['qty'];
if($qty>$qtyskrg){
$selisih = $qty-$qtyskrg;
$kurangin = $stockskrg - $selisih;
$kurangistocknya = mysqli_query($conn, "update stock set stock='$kurangin'
where idbarang='$idb'");
$updatenya = mysqli_query($conn,"update masuk set qty='$qty',
keterangan='$deskripsi' where idmasuk='$idm'");
if($kurangistocknya&&$updatenya){
} else {
echo 'Gagal';
}
} else {
$selisih = $qtyskrg-$qty;
$kurangin = $stockskrg + $selisih;
$kurangistocknya = mysqli_query($conn, "update stock set stock='$kurangin'
where idbarang='$idb'");
$updatenya = mysqli_query($conn,"update masuk set qty='$qty',
keterangan='$deskripsi' where idmasuk='$idm'");
if($kurangistocknya&&$updatenya){
} else {
echo 'Gagal';
}
}
}
//Menghapus barang masuk
if(isset($_POST['hapusbarangmasuk'])){
$qty = $_POST['kty'];
$idm = $_POST['idm'];
$getdatastock = mysqli_query($conn,"select * from stock where
idbarang='$idb'");
$data = mysqli_fetch_array($getdatastock);
$stock = $data['stock'];
$selisih = $stock-$qty;
$update = mysqli_query($conn,"update stock set stock='$selisih' where
idbarang=$idb'");
$hapusdata = mysqli_query($conn,"delete from masuk where
idmasuk='$idm'");
if($update&&$hapusdata){
L
L-12
} else {
}
}
//menambah admin baru
if(isset($_POST['addadmin'])){
$email = $_POST['email'];
$password = $_POST['password'];
$queryinsert = mysqli_query($conn,"insert into login (email, password) values
('$email','$password')");
if($queryinsert){
//if berhasil
header('location:admin.php');
} else {
//kalau gagal insert ke db
}
}
//edit data admin
if(isset($_POST['updateadmin'])){
$emailbaru = $_POST['emailadmin'];
$passwordbaru = $_POST['passwordbaru'];
$idnya = $_POST['id'];
$queryupdate = mysqli_query($conn,"update login set email='$emailbaru',
password='$passwordbaru' where idUser='$idnya'");
if($queryupdate){
} else {
}
}
//hapus admin
if(isset($_POST['hapusadmin'])){
$id = $_POST['id'];
$querydelete = mysqli_query($conn,"delete from login where idUser='$id'");
if($querydelete){
} else {
}
}
?>
L
L-13
- admin.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kelola Admin</title>
<link
</head>
</nav>
<div class="nav">
alt"></i></div>
Stock Barang
</a>
alt"></i></div>
Barang Masuk
</a>
L
L-14
alt"></i></div>
Barang Keluar
</a>
alt"></i></div>
Kelola Admin
</a>
logout
</a>
</div>
</div>
Sembako Berkah
</div>
</nav>
</div>
<main>
<h1 class="mt-4">Kelola Admin</h1>
Tambah Admin
</button>
</div>
<thead>
<tr>
<th>No</th>
<th>Email Admin</th>
<th>Deskripsi</th>
</tr>
</thead>
<tbody>
<?php
L
L-15
$ambilsemuadataadmin = mysqli_query($conn,"select
* from login");
$i = 1;
while($data=mysqli_fetch_array($ambilsemuadataadmin)){
$em = $data['email'];
$idUser = $data['idUser'];
?>
<tr>
<td><?=$i++;?></td>
<td><?=$em;?></td>
<td>
data-toggle="modal" data-target="#edit<?=$idUser;?>">
Edit
</button>
data-toggle="modal" data-target="#delete<?=$idUser;?>">
Delete
</button>
</td>
</tr>
<div class="modal fade" id="edit<?=$idUser;?>">
<h4 class="modal-title">Edit Admin</h4>
</div>

<input type="email" name="emailadmin"
value=<?=$em;?> class="form-control" placeholder="Email" required>
<br>
<input type="password"
name="passwordbaru" class="form-control" placeholder="password">
<br>
<input type="hidden" name="id"
value="<?=$idUser;?>">
primary" name="updateadmin">Submit</button>
</div>
</form>
L
L-16
</div>
</div>
</div>
<div class="modal fade"
id="delete<?=$idUser;?>">
</div>

<?=$em;?>?
<input type="hidden" name="id"
value="<?=$idUser;?>">
<br>
<br>
danger" name="hapusadmin">hapus</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
};
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
small">
L
L-17
2020</div>
<div>
·
</div>
</div>
</div>
</footer>
</div>
</div>
<script
<script
<script
</body>

<h4 class="modal-title">Tambah Admin</h4>
</div>

<input type="email" name="email" placeholder="Email" class="form-
control" required>
<br>
L
L-18
<input type="password" name="password" placeholder="Password"
<br>
name="addadmin">Submit</button>
</div>
</form>
</div>
</div>
</div>
</html>
L
L-19
- login.php.
<?php
//memastikan function.php di panggil pada halaman login.php
//cek login, terdaftar apa tidak
if(isset($_POST['login'])){
$email = $_POST['email'];
$password = $_POST['password'];
//mencocokan hasil input email dan password pada data di database
$cekdatabase = mysqli_query($conn, "select * from login where
email='$email'and password='$password'");
//apa bila hasil cek database ada maka akan bernilai 1 ( jumlah data yang sama )
$cekquerry = mysqli_fetch_array($cekdatabase);
$level = $cekquerry['level'];
$hitung = mysqli_num_rows($cekdatabase);
if($hitung>0){
$_SESSION['log'] = 'True';
// kalau data ada dilempar kembali ke index.php
} else {
header('location:login.php');
// kalau salah password ( tidak ada data ) dilempar kembali ke login.php
};
};
if(!isset($_SESSION['log'])){
} else {
// kalau sudah ada session yang aktif ( udah login ) langsung di lempar ke
index.php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
</head>
L
L-20
<body class="bg-primary">
<div id="layoutAuthentication">
<div id="layoutAuthentication_content">
<main>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header"><h3 class="text-center font-
weight-light my-4">Login</h3></div>
<div class="form- group">
<label class="small mb-1"
for="inputEmailAddress">Email</label>
<input class="form-control py-4" name="email"
id="inputEmailAddress" type="email" placeholder="Enter email address" />
</div>
<div class="form- group">
<label class="small mb-1"
for="inputPassword">Password</label>
<input class="form-control py-4" name="password"
id="inputPassword" type="password" placeholder="Enter password" />
</div>
<div class="form- group d-flex align- items-center
justify-content-between mt-4 mb-0">
<button class="btn btn-primary"
name="login">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script
</body>
L
L-21
- logout.php
<?php
session_start();
session_destroy();
//mematikan session yang sebelumnya sudah di aktifkan
?>
- cek.php
<?php
//apabila belum login maka akan selalu diarahkan ke login.php
if(isset($_SESSION['log'])){
} else {
}
?>
L
L-22
- masuk.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Barang Masuk</title>
<link
</head>
</nav>
<div class="nav">
alt"></i></div>
Stock Barang
</a>
alt"></i></div>
Barang Masuk
</a>
L
L-23
alt"></i></div>
Barang Keluar
</a>
alt"></i></div>
Kelola Admin
</a>
Logout
</a>
</div>
</div>
Sembako Berkah
</div>
</nav>
</div>
<main>
<h1 class="mt-4">Barang Masuk</h1>
Tambah Barang
</button>
</div>
<thead>
<tr>
<th>Tanggal</th>
<th>Jumlah</th>
<th>Keterangan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
L
L-24
<?php
* from masuk m, stock s where s.idbarang = m.idbarang");
$idb = $data['idbarang'];
$idm = $data['idmasuk'];
$tanggal = $data['tanggal'];
$qty = $data['qty'];
$keterangan = $data['keterangan']
?>
<tr>
<td><?=$tanggal;?></td>
<td><?=$qty;?></td>
<td><?=$keterangan;?></td>
<td>
data-toggle="modal" data-target="#edit<?=$idb;?>">
Edit
</button>
data-toggle="modal" data-target="#delete<?=$idb;?>">
Delete
</button>
</td>
</tr>

<div class="modal fade" id="edit<?=$idb;?>">

<h4 class="modal-title">Edit Barang</h4>
</div>


L
L-25
<input type="text" name="keterangan"
value="<?=$keterangan;?>" class="form-control" required>
<br>
<input type="number" name="qty"
value="<?=$qty;?>" class="form-control" required>
<br>
value="<?=$idb;?>">
<input type="hidden" name="idm"
value="<?=$idm;?>">
primary" name="updatebarangmasuk">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete<?=$idb;?>">
</div>

<?=$namabarang;?>?
value="<?=$idb;?>">
<input type="hidden" name="kty"
value="<?=$qty;?>">
<input type="hidden" name="idm"
value="<?=$idm;?>">
<br>
<br>
danger" name="hapusbarangmasuk">hapus</button>
</div>
</form>
L
L-26
</div>
</div>
</div>
</div>
</div>
<?php
};
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
small">
2020</div>
<div>
·
</div>
</div>
</div>
</footer>
</div>
</div>
<script
<script
L
L-27
<script
</body>

<h4 class="modal-title">Tambah Barang Masuk</h4>
</div>

<select name="barangnya" class="form-control">
<?php
$ambilsemuadatanya = mysqli_query($conn,"select * from stock");
while($fetcharray = mysqli_fetch_array($ambilsemuadatanya)){
$namabarangnya = $fetcharray['namabarang'];
$idbarangnya = $fetcharray['idbarang'];
?>
<option value="<?=$idbarangnya;?>"><?=$namabarangnya;?></option>
<?php
}
?>
</select>
<br>
<input type="number" name="qty" class="form-control"
placeholder="Quantity" required>
<br>
<input type="text" name="penerima" class="form-control"
placeholder="Penerima" required>
<br>
name="barangmasuk">Submit</button>
</div>
</form>
</div>
</div>
</div>
</html>
L
L-28
- keluar.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Barang Keluar</title>
<link
</head>
</nav>
<div class="nav">
alt"></i></div>
Stock Barang
</a>
alt"></i></div>
Barang Masuk
</a>
L
L-29
alt"></i></div>
Barang Keluar
</a>
alt"></i></div>
Kelola Admin
</a>
Logout
</a>
</div>
</div>
Sembako Berkah
</div>
</nav>
</div>
<main>
<h1 class="mt-4">Barang Keluar</h1>
Tambah Barang
</button>
</div>
<thead>
<tr>
<th>Tanggal</th>
<th>Jumlah</th>
<th>Penerima</th>
</tr>
</thead>
<tbody>
L
L-30
<?php
* from keluar k, stock s where s.idbarang = k.idbarang");
$tanggal = $data['tanggal'];
$qty = $data['qty'];
$penerima = $data['penerima'];
?>
<tr>
<td><?=$tanggal;?></td>
<td><?=$qty;?></td>
<td><?=$penerima;?></td>
</tr>
<?php
};
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
small">
2020</div>
<div>
·
</div>
</div>
</div>
</footer>
</div>
</div>
L
L-31
<script
<script
<script
</body>


<h4 class="modal-title">Tambah Barang Keluar</h4>
</div>

<select name="barangnya" class="form-control">
<?php
$ambilsemuadatanya = mysqli_query($conn,"select * from stock");
while($fetcharray = mysqli_fetch_array($ambilsemuadatanya)){
$namabarangnya = $fetcharray['namabarang'];
$idbarangnya = $fetcharray['idbarang'];
?>
<option value="<?=$idbarangnya;?>"><?=$namabarangnya;?></option>
<?php
}
?>
</select>
<br>
<input type="number" name="qty" class="form-control"
placeholder="Quantity" required>
<br>
L
L-32
<input type="text" name="penerima" placeholder='Penerima' class="form-
control" required>
<br>
name="addbarangkeluar">Submit</button>
</div>
</form>
</div>
</div>
</div>
</html>
L
L-33
LAMPIRAN OUTPUT PROGRAM
 Halaman Login
 Halaman Stock Barang
L
L-34
 Halaman Stock Barang Masuk
 Halaman Stock Barang Keluar
L
L-35
 Halaman Kelola Admin
L
L-36
4

Tugas Akhir Kevin Bichandra

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

Tugas Akhir Kevin Bichandra

Diunggah oleh

Hak Cipta:

Format Tersedia

DAFTAR ISI

UNIVERSITAS GUNADARMA ..........................................................................1

Gambar 2. 1 Struktur Navigasi Linear ....................................................................16

Tabel 2. 1 Contoh sejumlah tag pada sebuah dokumen HTML................................12

Index.php .............................................................................................................. L-1

Halaman Login ..................................................................................................... L-34

1.1 Latar Belakang Masalah

Perkembangan teknologi yang pesat, tingkat pertumbuhan ekonomi yang

1.2 Batasan Masalah

Batasan masalah dalam penulisan ilmiah ini hanya membahas pada

1.3 Tujuan Penelitian

1.4 Metode Penelitian

Metode yang digunakan adalah, metode SDLC (Software Development Life

1.5 Sistematika Tulisan Ilmiah

1. Sistematika penulisan dalam penelitian ini adalah sebagai berikut.

Bab I Pendahuluan Bab

ini akan menguraikan hal – hal yang menyangkut pendahuluan,

Bab II Tinjauan Pustaka

Bab ini membahas teori, konsep, dan penelitian terdahulu yang

Bab III Analisa Dan Pembahasan

Bab ini memuat cara pemecahan masalah yang diajukan dalam

2.1 Persediaan (Stok) Barang

Persediaan barang adalah istilah yang digunakan untuk menunjukan barang

Persediaan (Stok) barang berkaiatan erat dengan penjualan. Penjualan

2.2 Pendataan Barang di Gudang Toko Sembako Berkah

2.4 Bukti Pengambilan Barang (BON)

2.5 Tahapan Pembangunan Rekayasa Perangkat Lunak

2.5.1 Perencanaan (Planning)

Fase perencanaan proyek perangkat lunak adalah untuk menyediakan

2.5.2 Analisis (Analysis)

Hypertext Preprocessor (PHP) adalah suatu bahasa pemerograman yang

Manajemen database yang biasanya digunakan untuk pemerograman PHP

2.6.1 Sejarah PHP

2.6.2 Fungsi PHP

Contoh Penulisan Kode PHP adalah sebagai berikut:

MySQL adalah sebuah DBMS (Database Management System)

MySQL termasuk ke dalam RDBMS (Relational Database Management

SQL digunakan sebagai sebuah bahasa standar yang digunakan untuk

Terdapat 3 (tiga) jenis perintah SQL dalam DBMS MySQL, yaitu:

1. Data Definition Language (DDL)

merupakan sub bahasa SQL yang digunakan untuk membangun kerangka

Yang termasuk kelompok DDL ini adalah:

CREATE: Perintah ini digunakan untuk membuat, termasuk di antaranya membuat

>alter table mahasiswa rename wisudawan;

DROP: Perintah ini digunakan untuk menghapus database dan tabel.

>Alter table ‘mahasiswa’ drop ‘alamat’;

2. Data Manipulation Language (DML)

merupakan sub bahasa SQL yang digunakan untuk memanipulasi data

Insert into mahasiswa values (“08052926”, “Frenky”,”70”);

Select nama_mahasiswa from mahasiswa where nilai = 70;

>mahasiswa set nim = ‘08052926’ = 08052927;

>delete form mahasiswa;

3. Data Control Language (DCL)

Perintah DCL, di antaranya:

GRANT: Perintah ini digunakan untuk memberikan hak/ijin akses oleh

XAMPP adalah sebuah software yang berfungsi untuk menjalankan website

2.9 Web Server dan Web Browser

Website merupakan sebuah media informasi yang ada di internet. Website

2.10 Visual Studio Code

Kode Visual Studio didasarkan pada Elektron, kerangka kerja yang

Pengertian HTML Hypertext Markup Language (HTML) adalah bahasa

Tabel 2. 1 Contoh sejumlah tag pada sebuah dokumen HTML

<title> ... </title> Tag yang berada di dalam Tag head

<body> ... </body> Tag untuk mengisikan isi dokumen