BAB I

PENDAHULUAN

1.1 Latar Belakang

PT Barakat Multi Agro di Bintaro merupakan salah satu perusahaan yang

bergerak di bidang kuliner. Pada saat ini sistem pemesanan di Kedai Sate Barakat
masih berupa konsumen datang langsung untuk memesan dan transaksi
pembayaran masih bersifat manual dimana pembeli melakukannya melalui kedai
atau melalui telepon. Media untuk memesan pun masih menggunakan kertas menu
serta tulis tangan menggunakan pulpen/pensil.

Seiring dengan perkembangan teknologi informasi yang semakin canggih

terlebih pada aplikasi berbasis web, banyak perusahaan memanfaatkan hal ini
untuk mengatasi permasalahan transanksi yang masih bersifat manual. Aplikasi
berbasis web banyak digunakan karena aplikasi ini mudah diakses dan dapat
berjalan pada jaringan internet. Dengan adanya aplikasi berbasis web dapat
membantu perusahaan menyediakan layanan yang memudahkan konsumen untuk
melakukan pembelian dimanapun dan kapanpun.

Berdasarkan hal tersebut, penulis bermaksud membuat aplikasi berbasis

web pada Kedai Sate Barakat yang dapat memberikan suatu bentuk pelayanan
yang baru sehingga proses pemesanan dan pelayanan lebih mudah serta
menghemat waktu.
1.2 Batasan Masalah

Pelanggan tidak perlu repot dateng ke kedai karena pemesanan sudah

dapat dilakukan secara online. Tetapi pembayaran website yang masih
menggunakan transfer bank manual. Dan perlu adanya konfirmasi makanan yang
telah dibayar melalui transfer kepada admin.

1.3 Tujuan Penelitian

Tujuan penelitian ini adalah untuk membuat website penjualan online pada
kedai dengan harapan agar dapat memudahkan para pembeli dalam memilih dan
memesan makanan yang mereka inginkan kapan saja tanpa harus datang ke toko.

1.4 Metode Penelitian

Metode penelitian ini dilakukan dengan menggunakan pendekatan metode

SDLC (System Development Life Cyle):

1. Tahap Analisis : Proses pemecahan masalah ini dengan

menyediakan berupa data dan informasi. Proses pemecahan masalah ini juga
melakukan pencarian data dan survey informasu melalui karyawan di kedai
tersebut untuk mengetahui harga dan menu makanan yang dijual.

2. Tahap Perancangan : Dalam tahap ini, dilakukan perancangan terhadap

sistem aplikasi yang dibuat, dimana terdapat tiga tahap perancangan yaitu
perancangan Application programming interface, perancangan database, dan
perancangan tampilan. Dengan menggunakan metode SDLC.

3. Tahap Implementasi : Mengimplementasikan rancangan menjadi website

yang sebenarnya agar dapat digunakan secara umum.

4. Tahap Uji Coba : Pada tahap dilakukan uji coba aplikasi dengan
menggunakan metode blackbox testing untuk mengetahui kekurangan di
 dalam website yang telah dibuat, apakah website mampu menyediakan
pelayanan yang tepat , jika belum maka dilakukan perbaikan.

1.5 Sistematika Penelitian

Penulis menyusun tata urut sistematis yang ada dari bab 1 sampai dengan
bab 4, yaitu sebagai berikut:
1. PENDAHULUAN
Bab ini menguraikan pokok persoalan yang terdiri dari latar
belakang, batasan masalah, tujuan penelitian, metode penelitian
dan sistematika penulisan.

2. LANDASAN TEORI
Bab ini berisi teori-teori & alat bantu yang berhubungan
dengan pembuatan website dan menjelaskan pemograman yang
dipakai untuk membuat web tersebut yaitu Web, UML, bahasa
pemograman C#, PHP, JavaScript, dan MySQL sebagai database.

3. PERANCANGAN & IMPLEMENTASI

Bab ini membahas tentang gambaran umum website,
analisis kebutuhan software dan hardware, rancangan website,
struktur navigasi, rancangan tampilan website, tahap implementasi,
dan tahap pengujian

4. PENUTUP
Bab ini menjelaskan kesimpulan dan saran dari hasil
penelitian tersebut.
 BAB II
LANDASAN TEORI

2.1 Metode System Development Life Cycle (SDLC)

System Development Life Cycle (SDLC) adalah sebuah siklus yang

membangun suatu sistem itu sendiri dan memberikannya kepada pengguna
melalui tahapan perencanaan, analisa, perancangan dan implementasi dengan cara
memahami dan menyeleksi keadaan dan proses yang dilakukan pengguna untuk
dapat mendukung seluruh kebutuhan para pengguna. Untuk menggunakan SDLC
maka dibutuhkan sumber dari data awal tersebut dari pengguna yang dijadikan
acuan yang nantinya dimasukkan kedalam perencanaan, analisa, perancangan dan
implementasi. Penggunaan acuan ini dimaksudkan agar sistem yang dibangun bisa
menjembatani kebutuhan pengguna dari permasalahan yang dihadapinya (Dennis,
Wixom, & Tegarden, 2005).

2.2 Pengertian Sistem Informasi

Pengertian sistem menurut beberapa ahli yaitu, manurut (Tata Sutabri,

2012:6) pada buku Analisis Sistem Informasi, pada dasarnya sistem adalah
sekelompok unsure yang erat hubungannya satu dengan yang lain, yang berfungsi
bersama-sama untuk mencapai tujuan tertentu.

Selanjutnya menurut (Yakub, 2012:1) mendefenisikan sistem adalah

sekelompok elemen-elemen yang terintegrasi dengan tujuan yang sama untuk
mencapai tujuan. Sistem juga merupakan suatu jaringan kerja dari prosedur-
prosedur yang saling berhubungan, terkumpul bersama-sama untuk melakukan
suatu kegiatan atau untuk tujuan tertentu.

Sedangkan menurut (Jogianto, 2012: 2) pada buku Analisis dan Desain sistem
Informasi mendefinisikan sistem adalah kumpulan dari elemen-elemen yang
berinteraksi untuk mencapai suatu tujuan tertentu. Sistem ini menggambarkan
suatu kejadian-kejadian dan kesatuan yang nyata adalah objek nyata, seperti
tempat, benda dan orang-orang yang betul-betul ada dan terjadi.

2.2.1 Tujuan Sistem

Adapun tujuan sistem menurut (Azhar Susanto, 2013:23) yang bukunya

berjudul Sistem Informasi Akutansi adalah sebagai berikut :

“tujuan sistem merupakan target atau sasaran akhir yang ingin dicapai oleh suatu
sistem. Agar supaya target tersebut bisa tercapai, maka target atau sasaran tersebut
harus diketahui terlebih dahulu cirri-ciri atau kriteria dari sasaran tersebut
kemungkinan sasaran tersebut tidak akan pernah tercapai. Ciri-ciri atau kriteria
dapat juga digunakan sebagai tolak ukur dalam menilai suatu berhasilan suatu
sistem dan menjadi dasar dilakukannya suatu pengendalian”. Dari pengertian
diatas dapat ditarik kesimpulan bahwa sistem merupakan kumpulan suatu
komponen sistem yang saling berhubungan satu dengan yang lain untuk mencapai
tujuan suatu kegiatan pokok perusahaan.

2.3 Pengertian Web

Menurut (Greenlaw dan Hepp, 2002:18), web adalah suatu aplikasi

software yang memungkinkan setiap pengguna atau user untuk menerbitkan atau
mencari dokumen hypertext di internet. Web merupakan media informasi berbasis
jaringan komputer yang dapat diakses di mana saja dengan biaya relative murah.
Web merupakan bentuk implementasi dari bahasa pemrograman web (web
programming). Sejarah perkembangan bahasa pemograman web diawali dengan
munculnya HTML ( Hypertext Markup Language), yang kemudian
dikembangkan dengan munculnya CSS (Cascading Style Sheet) yang bertujuan
untuk memperindah tampilan website (Wahana Komputer). 2.7.2 Aplikasi Web

Aplikasi Web adalah aplikasi yang disimpan dan dieksekusi di lingkungan

web server. Setiap permintaan yang dilakukan oleh user melalui aplikasi klien
(web browser) akan direspon oleh aplikasi web dan hasilnya akan dikembalikan
lagi ke hadapan user (Budi Raharjo dkk, 2 :46). Dengan aplikasi web, halaman
yang tampil di layar web browser dapat bersifat dinamis, tergantung dari nilai data
atau parameter yang dimasukan oleh user.

2.4 Definisi Penjualan

Penjualan adalah proses dimana penjual memuaskan segala kebutuhan dan

keinginan pembeli agar dicapai manfaat baik bagi penjual maupun pembeli yang
berkelanjutan dan menguntungkan kedua belah pihak (William G. Nickels, 1998).

2.5 Definisi aplikasi

Aplikasi adalah istilah yang digunakan untuk pengguna komputer bagi

pemecahan masalah. Biasanya istilah aplikasi dipasangkan atau digabungkan
dengan suatu perangkat lunak misalnya Microsoft Visual Basic 6.0, akan dapat
memberikan makna atau arti baru yaitu suatu program yang ditulis atau dibuat
untuk menangani masalah tertentu (Yan Tirtobisono, 1999).

2.6 Website

Website adalah fasilitas internet yang menghubungkan dokumen dalam

lingkup lokal maupun jarak jauh. Dokumen pada website disebut dengan web
page dan link dalam website memungkinkan pengguna bisa berpindah dari satu
page ke page lain (hyper text), baik diantara page yang disimpan dalam server
yang sama maupun server diseluruh dunia (Hakim Lukmanul , 2004).

2.6.1 Front End Dalam Website

Bagian frontend dari sebuah website adalah bagian yang dapat dilihat
langsung oleh user, serta dapat langsung berinteraksi dengan website. Bagian ini
dibangun menggunakan HTML, CSS, dan JavaScript, yaitu sebagai berikut:

1. HTML (HyperText Markup Languange) adalah tulang punggung atau struktur

dasar dari web. Hampir semua website dibuat menggunakan HTML. HTML
menentukan struktur dan konten website. Versi terakhir dari HTML adalah
HTML5 (Rian Ariona, 2013).
2.CSS (Cascading Style Sheets) adalah struktur desain untuk mengontrol tampilan
HTML pada halaman website. CSS menentukan warna, font, gambar background,
dan bahkan bagaimana tampilan keseluruhan website. Versi terakhir dari CSS
adalah CSS3, dengan tambahan fitur, seperti interaktifitas dan animasi dasar (Rian
Ariona, 2013).

3. JavaScript adalah Bahasa pemrograman yang digunakan untuk menambahakn

interaksi dalam suatu website, seperti interaktifitas, animasi yang lebih kompleks,
dan fully feature web application (Rian Ariona, 2013).

2.6.2 Back End dalam Website

BackEnd adalah bagian belakang layar dari sebuah website. Penggunaan
backend dapat digunakan sebagai sistem manajemen konten website, membuat
website dengan fitur kompleks dan mengembangkan suatu sistem yang dapat
terintegrasi dengan database server. Bahasa pemograman untuk backend
development diantaranya adalah PHP.
1. PHP (Hypertext Preprocessor)
PHP adalah bahasa pemrograman script server-side yang di desain untuk
pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa
pemrograman umum. PHP di kembangkan pada tahun 1995 oleh Rasmus
Lerdorf, dan sekarang dikelola oleh The PHP Group. PHP disebut bahasa
pemrograman server side, karena PHP diproses pada komputer server. Hal
ini berbeda dibandingkan dengan bahasa pemrograman client-side, seperti
JavaScript yang diproses pada web browser (client).
Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai
dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam
beberapa tahun perkembangannya, PHP menjelma menjadi bahasa
pemrograman web yang powerful dan tidak hanya digunakan untuk
membuat halaman web sederhana, tetapi juga website populer yang
digunakan oleh jutaan orang, seperti Wikipedia, Wordpress, Joomla, dan
lain lain. Saat ini PHP adalah singkatan dari PHP Hypertext Preprocessor,
sebuah kepanjangan rekursif, yakni permainan kata dimana
kepanjangannya terdiri dari singkatan itu sendiri: PHP Hypertext
Preprocessor. PHP dapat digunakan dengan gratis (free) dan bersifat Open
Source. PHP di rilis dalam lisensi PHP License, sedikit berbeda dengan
lisensi GNU General Public License (GPL) yang biasa digunakan untuk
proyek Open Source (Ahmad Solichin, 2005).

Sintaks dasar PHP meliputi bagaimana cara memulai suatu struktur

pemrograman PHP. Ada empat cara untuk memulai pemrograman PHP,

diantaranya:

<?php ?>
<? ...... ?>
<script language=”php”>....</script>
<% ...... %>

dari beberapa sintaks dasar tersebut, yang paling banyak digunakan

adalah cara yang pertama dan yang kedua dari atas.
Cara penulisan skrip PHP ada dua macam, yaitu Embedded Script
dan Non Embedded Script. Contohnya:
1. Embedded Script
<html>
<head>
</head>
<body>
<?php
echo “Hallo Dunia”;
?>
</body>
</html>
2. Non Embedded Script
<?php
echo “<html>”;
echo “<head>”;
echo “<title>Mengenal PHP</title>”;
echo “<head>”;
echo “<body>”;
echo “<p>PHP cukup Menyenangkan</p>”;
echo “</body>”;
echo “</html>”;
?>
Dari contoh menjelaskan bahwa skrip PHP dapat berupa embedded
script yaitu meletakkan tag PHP diantara tag-tag HTML sedangkan non
embedded script yaitu semua tag HTML diletakkan dalam tag PHP.
Semua kode PHP menyerupai dengan kode bahasa C, walaupun tidak
sepenuhnya sama. Untuk menampilkan nilai suatu variabel ke layer
dapat menggunakan perintah yaitu echo, print maupun printf.
Contohnya:
1. echo
echo “$data”; echo $data; echo “nilai”;
echo $data. “Mahasiswa Gunadarma”;

2. print
print (“$data”); print ($data); print (“nilai”);
print ($data. “Mahasiswa Gunadarma”);

3. printf
$data =”devie”; printf (“%s”,$data);
printf (“%s Dosen Gunadarma”, $data);
2.7 Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada

fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa
ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa
pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML
dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di
sisi browser bukan di sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil halaman web
yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen
HTML.
JavaScript dapat diimplementasikan menggunakan pernyataan JavaScript
yang ditempatkan di dalam tag HTML <script> ... </script> pada halaman web.
Pengembang dapat menempatkan tag <script>, yang berisi kode-kode JavaScript
di mana saja di dalam halaman web, tetapi biasanya disarankan untuk
menyimpannya di dalam tag <head>. Tag <script> digunakan untuk memberitahu
kepada web browser untuk mulai menafsirkan semua teks di antara tag-tag ini
sebagai sebuah skrip atau kode JavaScript.

Cara menulis syntax javascript dapat di tuliskan di mana pun yang anda
mau di dalam halaman web. tetapi pada umumnya banyakan di tulis di antara
bagian <head>..</head>

<html>

  <body>
  <script language="javascript" type="text/javascript">
 document.write("Hello World!")
  </script>
  </body>
</html>
2.8 ASP.Net

Menurut MacDonald dkk. (2010), ASP.Net merupakan teknologi yang

dapat digunakan untuk membangun aplikasi Windows dan website. ASP.Net
terintegrasi dengan .Net framework. .Net menyediakan pustaka fungsional dengan
puluhan ribu jenis kelas, struktur, antarmuka dan inti pemrograman. Setiap ribuan
kelas pada .Net framework dikelompokkan ke dalam kontainer logikal dan
hirarkikal yang disebut namespace. Namespace yang berbeda menyediakan fitur
yang berbeda. Semua namespace pada .Net menyediakan semua fungsi yang
dibutuhkan pembangunan aplikasi terdistribusi. Kumpulan kelas-kelas ini disebut
pustaka kelas. Cara penggunaan kelas .Net framework sama dengan cara
penggunaan untuk membangun aplikasi Windows, servis Windows dan aplikasi
konsol. Menurut MacDonald dkk. (2010), ASP.Net merupakan ASP berorientasi
objek yang mendukung banyak model objek. ASP.Net sepenuhnya dapat
menerapkan object oriented programming (OOP), seperti penerapan
class,interface, encapsulation dan inheritance. ASP.Net

2.9 HyperText Markup Language (HTML)

HyperText Markup Language atau HTML adalah bahasa yang digunakan

pada dokumen web sebagai bahasa untuk pertukaran dokumen web. Dokumen
HTML terdiri dari komponen yaitu tag, elemen dan atribut. Tag adalah tanda awal
< dan tanda akhir > yang digunakan sebagai pengapit suatu elemen. Elemen
adalah nama penanda yang diapit oleh tag yang memiliki fungsi dan tujuan
tertentu pada dokumen HTML. Elemen dapat memiliki elemen anak dan juga
nilai. Elemen anak adalah suatu elemen yang berada didalam elemen pembuka
dan elemen penutup induknya. Nilai yang dimaksud adalah suatu teks atau
karakter yang berada diantara elemen pembuka dan elemen penutup. Atribut
adalah properti elemen yang digunakan untuk mengkhususkan suatu elemen.
Elemen dapat memiliki atribut yang berbeda pada tiap masing-masingnya (Sibero,
2011).
 Berikut adalah struktur pada HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman pertamaku</title>
</head>
<body>
<p>Ini adalah halaman pertamaku</p>
</body>
</html>

Keterangan dari code diatas:

 <!DOCTYPE html> : Merupakan deklarasi dari type dokumen

 <html></html> : Dikenal dengan element utama karena
semua element berada di dalamnya.
 <head></head> : Element ini berfungsi untuk memasukkan
konten yang tidak ingin ditampilkan. Konten tersebut dapat berupa keyword,
deskripsi, CSS, dll.
 <meta charset=”utf-8″> : Berfungsi untuk memberitahu browser mengenai
pengkodean karakter yang sesuai dengan ketentuan UTF-8,
 <title></title> : Merupakan judul dari halaman website yang
muncul pada bagian tab browser.
 <body></body> : Berisi konten yang ditampilkan pada
browser ketika pengunjung mengakes halaman tersebut, contohnya seperti
artikel yang sedang Anda baca saat ini.

2.10 C#

C# ( C sharp) adalah sebuah bahasa pemrograman berbasis objek yang

didukung oleh Microsoft .NET framework. Microsoft .NET Framework adalah
perantara agar aplikasi dengan bahasa pemrograman yang didukung dapat
berkomunikasi dengan sistem operasi yang digunakan oleh komputer kebanyakan
orang. Selain itu, .NET Framework juga memungkinkan C# untuk berkomunikasi
dengan bahasa pemrograman lainnya yang juga didukung oleh .NET Framework
seperti VB .NET, F#, atau C++ (handoyo, 2011:9). Cara menulis syntax C# dapat
di tuliskan sebagai berikut :

class Input
{
static void Main()
{
int var1, var2;

Console.WriteLine(“Program Penjumlahan”);
Console.WriteLine();
Console.Write(“Masukkan angka pertama: ”);
var1 = int.Parse(Console.ReadLine());
Console.Write(“Masukkan angka kedua: ”);
var2 = int.Parse(Console.ReadLine());
Console.WriteLine();
Console.WriteLine(“Jumlahnya adalah {0}.”, var1 + var2);
}
}

2.11 MongoDB

MongoDB adalah sistem basis data berorentasi dokumen lintas platform.

Diklasifikasikan sebagai basis data “NoSQL”, MongoDB menghindari struktur
basis data relasional tabel berbasis tradisional yang mendukung JSON seperti
dokumen dengan skema dinamis (MongoDB menyebutnya sebagai format
BSON), membuat integrasi data dalam beberapa jenis aplikasi lebih mudah dan
lebih cepat. Dirilis di bawah kombinasi dari GNU Affero General Public License
 dan Lisensi Apache, MongoDB adalah perangkat lunak bebas dan sumber
terbuka.
MongoDB memiliki karakteristik lain, unik dan berbeda. MongoDB
termasuk ke ke dalam Non Relational database, ya memang di MongoDB kita
tidak mengenal relasi atau tabel. Ia hanya mengenal Collection dan beorientasi
dokumen. MongoDB tidak mengenal SQl untuk melakukan query karena
MongoDB bersifat NoSQL. Contoh Perintah/command yang digunakan pada
mongoDB :
1. Show dbs, perintah untuk melihat database-database yang ada pada
mongodb. Ini seperti perintah “show databases” pada RDMBS mysql
2. Use “nama_db” perintah untuk memilih database yang akan kita gunakan
dari daftar database yang telah dibuat. Perintah ini sama persis dengan
perintah “use nama_db” pada mysql.
3. Show Collections perintah untuk menampilkan daftar collection yang telah
dibuat, collection ini bisa kita asumsikan sama dengan tabel pada RDMBS.
Perbedaanya Collection tidak memiliki struktur tetap, jadi untuk 1 nama
collection yang sama bisa berbeda strukur.

2.12 Unified Modelling Language (UML)

UML (Unified Modeling Language) adalah Metodologi kolaborasi antara

metoda-metoda Booch, OMT (Object Modeling Technique), serta OOSE (Object
Oriented Software Enggineering) dan beberapa metoda lainnya, merupakan
metodologi yang paling sering digunakan saat ini untuk analisa dan perancangan
ystem dengan metodologi berorientasi objek mengadaptasi maraknya penggunaan
ystem “pemrograman berorientasi objek” (Nugroho, 2009).

Berikut adalah beberapa tujuan dan fungsi dari UML.

• Sebuah ystem pemodelan yang yst digunakan dan dimanfaatkan di masa

yang akan ystem, baik oleh manusia maupun oleh mesin.
• Mampu memberikan ystem pemodelan secara visual kepada user dengan
berbagai ystem pemograman yang digunakan.
• Memungkinkan untuk menyatukan praktek terbaik dalam suatu
pemodelan.
• UML digunakan untuk memodelkan ystem dengan menggunakan OPP,
sehingga tidak hanya digunakan untuk pemodelan perangkat lunak saja.

2.12.1 Diagram Use Case

Diagram Use Case menggambarkan apa saja aktifitas yang dilakukan oleh
suatu ystem dari sudut pandang pengamatan luar.Yang menjadi persoalan itu apa
yang dilakukan bukan bagaimana melakukannya.Diagram Use Case dekat
kaitannya dengan kejadian-kejadian.
Kejadian atau ystemo adalah contoh yang terjadi ketika seseorang yste
berinteraksi dengan ystem. Use case mendeskripsikan sebuah interaksi antara yste
dengan ystem.
Use case adalah sebuah pekerjaan tertentu, contohnya login ke ystem, membuat
sebuah daftar belanja, dan sebagainya.Seorang/sebuah yste adalah sebuah entitas
manusia atau mesin yang berinteraksi dengan ystem untuk melakukan pekerjaan-
pekerjaan tertentu.

Gambar 2.1 Contoh Usecase Kegiatan Pasien Membuat Janji

2.12.2 Activity Diagram

Activity Diagram adalah diagram yang menggambarkan worlflow (aliran
kerja) atau aktivitas dari sebuah sistem atau proses bisnis. Yang perlu diperhatikan
adalah bahwa diagram aktivitas menggambarkan aktivitas sistem bukan apa yang
dilakukan aktor, jadi aktivitas yang dapat dilakukan oleh sistem.

Gambar 2.2 Contoh Activity Diagram

2.13.3 Class Diagram

Diagram kelas atau class diagram menggambarkan struktur sistem dari
segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem.
Kelas memiliki atribut dan operasi, yang dijelaskan yaitu sebagai berikut:

1 Atribut merupakan variabel-variabel yang dimiliki oleh suatu kelas.

2 Operasi atau metode adalah fungsi-fungsi yang dimiliki oleh suatu kelas.
Diagram kelas dibuat agar pembuat program (programmer) membuat kelas-
kelas sesuai dengan rancangan di dalam diagram kelas agar antara
dokumentasi perancangan dan perangkat lunak sinkron. Pada berbagai
kasus, perancangan kelas yang dibuat tidak sesuai dengan kelas-kelas yang
dibuat pada perangkat lunak, sehingga tidak ada gunanya lagi sebuah
perancangan karena apa yang dirancang dan hasil jadinya tidak sesuai.
 BAB III

PERANCANGAN DAN IMPLEMENTASI

3.1 Gambaran Umun Website

Pada bab ini akan dibahas mengenai pembuatan website dengan judul
“Aplikasi Informasi Kuliner dan Kedai Sate Barakat Berbasis Wesbite”. Website
ini dapat diakses oleh masyarakat untuk mempermudah memberikan informasi
yang ada di restaurant dan juga dapat mempermudah pihak Kedai Sate Barakat
untuk mengelola Kedai Sate Barakat. Di dalam website untuk user ini terdapat
menu home, about, dan menu.

3.2 Analisis Kebutuhan Software dan Hardware

Dalam pembuatan website ini membutuhkan beberapa software dan

hardware sebagai berikut :
Kebutuhan software yang digunakan, antara lain :

a. Sistem operasi windows 10 64 bit.

b. XAMPP v3.2.4 sebagai web server.
c. Google Chrome sebagai web browser.
d. Sublime text sebagai text editor script
e. framework CodeIgniter
Kebutuhan hardware yang digunakan, antara lain :

a. Memory RAM 4 GB
b. Processor Intel(R) CPU N3350 @ 1.10HGz (2CPUs), ~1.1GHz
3.3 Struktur Navigasi

Struktur navigasi adalah struktur atau alur dari suatu program.

Menentukan struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum
membuat suatu aplikasi. Membuat struktur navigasi merupakan tahap awal untuk
perancangan dalam pembuatan website yang bertujuan untuk mempermudah
proses pengaturan website karena terdiri dari beberapa halaman yang saling
berkaitan. Struktur navigasi pada website kuliner dan kedai sate Barakat
menggunakan navigasi hirarki. Dapat dilihat pada gambar berikut ini.

Gambar 3.1 Struktur Navigasi Hirarki Website Untuk User

Pada gambar 3.1 menunjukan bahwa user dapat mengakses halaman home, about,
menu. User dapat membeli makanan yang terdapat pada daftar-daftar menu yang
ada pada halaman menu dan kemudian dapat melakukan order dari makanan yang
dipilih.

Gambar 3.2 Struktur Navigasi Hirarki Website Untuk Admin

Pada gambar 3.2 menunjukan bahwa admin dapat mengakses halaman dashboard,
manajemen admin, daftar menu, daftar order, riwayat transaksi. Admin dapat
melihat makanan yang telah dipesan oleh user pada halaman order dan dapat
dapat menginput, menghapus, mengupdate menu makanan baru pada halaman
menu.
3.4 Tahap Perancangan

Dalam perancangan website ini, ada tiga tahap perancangan, yaitu Struktur
database, Struktur Navigasi dan perancangan tampilan. Struktur Database untuk
mengetahui collection apa saja yang terdapat pada website.

3.4.1 Perancangan Database

Pada tahap ini akan dilakukan pembuatan struktur rancangan

database yang selanjutnya akan dipakai untuk implementasi pembuatan
database yang sesungguhnya, dengan nama database “web_culinary”
yang terdiri dari beberapa tabel yaitu :

A. Tabel Admin
Tabel admin di tabel 3.1 berisi 9 kolom/ field yaitu id_admin,
nama, photo, username, password, email, alamat, nomor HP, created_at.
Tabel 3.1 admin
NAMA KOLOM TIPE DATA KETERANGAN
Id_Admin (PK)** Int(11) Id Admin
Nama Varchar(35) Nama Toko
photo Varchar(150) Gambar Profil Toko
username Varchar(15) Username Admin
Passaword Varchar(15) Password Admin
Email Varchar(25) Email
No HP Varchar(20) Nomor handphone
Alamat Varchar(50) Alamat
created_at date Tanggal pembuatan
akun

B. Tabel Keranjang
Tabel 3.2 adalah tentang keranjang pelanggan, berisi 7 kolom/ field
yaitu id_keranjang, nama_produk, jumlah, harga, subtotal, notes,
created_at.
Tabel 3.2 Keranjang
NAMA KOLOM TIPE DATA KETERANGAN
Id_Keranjang (PK)** Int(11) id_keranjang
 Nama produk varchar(20) Nama produk
jumlah int(11) Banyak produk
harga Varchar(100) harga Produk
subtotal Int(12) jumlah harga
notes Int(12) Catatan produk
created_at date Tanggal belanja

C. Tabel Menu
Tabel 3.3 adalah tentang daftar menu, berisi 11 kolom/ field yaitu
id_pelanggan, nama_pelanggan, kategori, persediaan, harga, harga modal,
deskripsi, status, photo, admin_name.
Tabel 3.3 Menu
NAMA KOLOM TIPE DATA KETERANGAN
Id_menu (PK)** Int(11) id_produk
Nama_produk Varchar(25) nama produk
kategori Varchar(25) Kategori menu
persediaan int(11) Stock menu
harga int(11) Harga menu
harga_modal int(11) Harga modal
deskripsi Varchar(45) deskripsi
status Varchar(15) Status makanan
photo Varchar(25) Gambar makanan
admin_name Varchar(12) Nama admin
created_at date Tanggal input

D. Tabel Riwayat Transaksi

Tabel 3.4 berisi transaksi pelanggan berisi 6 kolom/ field yaitu
id_orderm, nama pelanggan, total, jumlah item, nama admin, created at.

Tabel 3.4 Transaksi

NAMA KOLOM TIPE DATA KETERANGAN
Id_order (PK)** Int(11) Id Transaksi
Nama_Pelanggan Varchar(25) Nama Pelanggan
total int(11) Total belanja
Jumlah item int(11) Banyak belanjaan
Nama admin Varchar(25) Nama admin
created_at Varchar(30) Tanggal input
3.4.2 Perancangan Tampilan Website

Pada tahap ini yang dilakukan yaitu membuat desain/ rancangan

tampilan website yang akan dibuat dan untuk selanjutnya rancangan
tersebut akan diimplementasikan dalam bentuk website.

3.4.2.1 Perancangan Halaman Home

Gambar 3.3 Collection Data Admin

3.4.2.2 Perancangan Halaman About

 Gambar 3.4 Collection Data Admin

3.4.2.3 Perancangan Halaman Menu User

Gambar 3.5 Collection Data Admin

3.4.2.4 Perancangan Halaman Login

Gambar 3.6 Collection Data Admin

3.4.2.5 Perancangan Halaman Dashboard Admin

Gambar 3.7 Collection Data Admin

3.4.2.6 Perancangan Halaman Menu Admin

 Gambar 3.8 Collection Data Admin

3.4.2.7 Perancangan Halaman Order Admin

Gambar 3.9 Collection Data Admin

3.5 Tahap Implementasi

Pada tahapan ini kami akan melakukan implementasi terhadap rancangan-

rancangan yang telah dibuat sebelumnya yaitu implementasi database &
implementasi tampilan website.

3.5.1 Implementasi Database

Pada pembuatan website ini pertama-tama dibuat sebuah database dengan

nama web_culinary dengan 4 tabel yaitu tabel admin, tabel menu, tabel keranjang
dan riwayat transaksi.

1. Implementasi Tabel Admin

 Collection Admin digunakan untuk menyimpan data seputar
biodata Admin. Berikut strukturnya :

Gambar 3.10 Collection Data Admin

2. Implementasi Tabel Data Menu

Collection Admin digunakan untuk menyimpan data menu. Berikut
strukturnya :

Gambar 3.11 Collection Data Admin

3. Implementasi Tabel Data Keranjang

Collection Keranjang digunakan untuk menyimpan data keranjang
sementara untuk keperluan pemesanan. Berikut strukturnya :
 Gambar 3.12 Collection Data Admin

4. Implementasi Tabel Data Riwayat Transaksi

Collection Riwayat Transaksi digunakan untuk menyimpan data
transaksi yang sudah dilakukan sebelumnya. Berikut strukturnya :

Gambar 3.13 Collection Data Admin

3.5.2 Implementasi Tampilan Website

Pada tahapan ini akan dilakukan implementasi pembuatan website

berdasarkan rancangan yang telah dibuat sebelumnya, terdiri dari 8 halaman yaitu:

a. Pembuatan halaman home

b. Pembuatan halaman about
c. Pembuatan halaman login
d. Pembuatan halaman dashboar admin
e. Pembuatan halaman menu admin
f. Pembuatan halaman order admin
g. Pembuatan halaman riwayat transaksi
h. Pembuatan halaman management admin

Pada implementasi pembuatan website ini digunakan bahasa pemrograman

PHP, HTML, CSS, JavaScript. Dan juga disertai software pendukung XAMPP
untuk melakukan implementasi pada server local. Juga digunakan software
Sublime Text sebagai code editor untuk menulis dan mengedit program. Sebelum
memulai implementasi beberapa hal yang harus disiapkan yaitu:

1. Membuat folder dengan nama “web_culinary” di dalam folder

“C:/xampp/htdocs”
2. Mengunduh dan instalasi aplikasi XAMPP dan Sublime Text
3. Menginstalasi browser Google Chrome.

3.5.2.1 Tampilan Halaman Utama/home

Tampilan beranda ini merupakan Tampilan yang pertama kali muncul di

halaman browser, tampilan utama yang dinamis dan didesain dengan tampilang
interface yang baik ini sehingga membantu pelanggan untuk melihat menu dengan
mudah. Didalam tampilan utama terdapat beberapa sub menu. Seperti pada
gambar berikut ini.
 Gambar 3.14 Tampilan halaman home

3.5.2.2 Tampilan Halaman About

Halaman about adalah sebuah halaman yang berisikan informasi mengenai

kuliner sate barakat. berikut adalah rancangan dari halaman about :

Gambar 3.15 Tampilan user home

3.5.2.3 Tampilan Halaman Menu User

Halaman Website user menu adalah halaman menu yang terbagi menjadi 3
kategori yaitu, makanan, minuman dan cemilan. berikut ini adalah rancangan dari
halaman Website User Menu :
 Gambar 3.16 Tampilan Menu User

3.5.2.4 Tampilan Halaman Login

Tampilan login admin akan menampilkan form input untuk mengisi

username dan password, berserta button sign in untuk masuk dan cancel untuk
membatalkan Login admin seperti pada gambar berikut ini:

Gambar 3.17 Tampilan Login

3.5.2.5 Tampilan Halaman Dashboard Admin

Tampilan Dashboard admin ini akan menampilkan jumlah transaksi

berhasil dan keuntungan, serta tabel transaksi terakhir. Seperti pada gambar
berikut ini:
 Gambar 3.18 Tampilan Dashboard Admin

3.5.2.6 Tampilan Halaman Management Admin

Tampilan Admin Management Admin akan menampilkan tabel yang berisi

informasi seperti fullname, alamat, telephone, dan status.

Gambar 3.19 Tampilan Management Admin

3.5.2.7 Tampilan Halaman Menu Admin

Tampilan Admin Menu akan menampilkan tabel Menu yang berisikan

nama item, harga, status, stok beserta button untuk melakukan edit / tambah /
hapus Menu. Seperti pada gambar berikut ini:
 Gambar 3.20 Tampilan Menu Admin

3.5.2.8 Tampilan Halaman Riwayat Transaksi

Tampilan Transaksi akan menampilkan tabel transaksi yang berisi id

order, nama pemesan, tanggal pesan. Seperti gambar berikut ini:

Gambar 3.21 Tampilan Riwayat Transaksi

3.5.2.9 Tampilan Halaman Order Admin

Tampilan Admin Transaksi akan menampilkan tabel transaksi yang berisi

id order, nama pemesan, tanggal pesan. Seperti gambar berikut ini:
 Gambar 3.21 Tampilan Order Admin

3.6 Tahap Pengujian Website

Pada tahap ini akan dilakukan uji coba dengan menggunakan metode black
box testing. Pengujian black box testing dilakukan adalah pengujian yang
berfokus kepada keperluan fungisonal dan fitur-fitur yang terdapat pada halaman
admin dan halaman pelanggan.

Tabel 3.5 Tabel Black Box Testing

Hasil
Deskripsi
No. Test Case Hasil Yang Diharapkan Yang
Pengujian
Didapat
Apabila Login berhasil Admin
Menguji Memasukkan data akan diarahkan ke halaman
Halaman berdasarkan form Dashboard admin dan apabila Sesuai
1
Login input Login dan gagal admin akan diminta Harapan
Admin klik tombol Login untuk mengisi email dan
password kembali.
Menguji
Menampilkan tabel riwayat
Halaman Meng-klik Menu Sesuai
2 transaksi seperti no. transaksi,
Menu Dashboard Harapan
nama Pembeli, dan lain lain.
Dashboard
Menampilkan tabel menu yang
berisikan nama menu,
Menguji
Meng-klik Menu deskripsi menu, dan lain lain. Sesuai
3 Halaman
Order Lalu admin dapat memasukkan Harapan
Order
menu dan jumlah pesanan lalu
menekan tombol order.
Menampilkan tabel menu yang
berisikan nama menu,
deskripsi menu, dan lain lain.
Apabila Admin meng-klik
Meng-klik Menu
tombol tambah data maka
Menguji Produk, Meng-
Admin diarahkan ke halaman Sesuai
4 Halaman klik tombol
tambah menu hal ini sama Harapan
Menu Tambah/ Edit/
seperti tombol edit. Dan
Hapus data
tombol hapus yang apabila di
klik Admin akan ditampilkan
pesan dialog pertanyaan dan
dua opsi ya hapus atau cancel.
Menampilkan tabel riwayat
Menguji
Meng-klik menu transaksi seperti no. transaksi,
Halaman Sesuai
5 Riwayat nama Pembeli, daftar menu
Riwayat Harapan
Transaksi yang dipesan, jumlah pesanan,
Transaksi
total harga, dan lain lain.
6 Menguji Meng-klik Menu Menampilkan tombol data, Sesuai
Halaman Daftar Admin, tabel Admin, beserta tombol Harapan
Menu Meng-klik tombol edit dan hapus. Apabila Admin
Daftar Tambah/ Edit/ meng-klik tombol tambah data
 maka Admin diarahkan ke
halaman tambah data hal ini
sama seperti tombol edit. Dan
Admin Hapus data tombol hapus yang apabila di
klik user akan ditampilkan
pesan dialog pertanyaan dan
dua opsi ya hapus atau cancel.

BAB 4
PENUTUP
4.1 Kesimpulan

Situs web Kedai Sate Barakat ini berhasil dibuat dengan HTML, CSS,
PHP, JavaScript, dan MongoDB sebagai database. Project ini memiliki 2 situs
Web yaitu untuk kepententingan user atau pelanggan dine in dan admin, didalam
situs web user memiliki fungsi untuk membantu user dapat melihat menu dan
profile kedai sate Barakat, sedangkan untuk situs web admin memiliki fungsi
membantu owner mengelola data penggawai,data menu,dan data tranksanksi.

4.2 Saran

Menyadari bahwa situs web yang telah dibuat ini masih jauh dari
sempurna, mengingat masih terdapat keterbatasan dalam situs web seperti security
system yang tidak terdapat di dalam situs web ini agar tidak terjadi penipuan
dengan cara pemalsuan identitas pelanggan. Dengan adanya kekurangan dalam
situs web ini diharapkan untuk pengembangan situs web demi kenyamanan dan
keamanan pelanggan dalam proses transaksi via bank agar dapat menghindari
terjadinya penipuan.

DAFTAR PUSTAKA
dictio. (2020, November 1). Apa yang dimaksud dengan Diagram aktivitas atau
Activity Diagram ? Retrieved from dictio.id: https://www.dictio.id/t/apa-
yang-dimaksud-dengan-diagram-aktivitas-atau-activity-diagram/15129

dosenpendidikan. (2020, November 1). 13 Pengertian Aplikasi Menurut Para

Ahli. Retrieved from dosenpendidikan.co.id:
https://www.dosenpendidikan.co.id/pengertian-aplikasi-menurut-para-ahli/

Khoerudin, A. N. (2018). TUJUAN DAN FUNGSI WAKAF MENURUT PARA

ULAMA DAN DAN UNDANG-UNDANG DI INDONESIA. TAZKIYA
Jurnal Keislaman, Kemasyarakatan & Kebudayaan, 1-10.

Ritonga, P. (2020, November 1). Pengertian Unified Modeling Language ( UML )

dan Modelnya Menurut Pakar dan Ahli. Retrieved from bangpahmi.com:
https://bangpahmi.com/pengertian-unified-modeling-language-uml-dan-
modelnya-menurut-pakar-dan-ahli/#:~:text=Menurut%20Nugroho
%20(2009%3A4),ini%20untuk%20analisa%20dan%20perancangan

seputarpengetahuan. (2020, November 1). 17 Pengertian Website Menurut Para

Ahli (Bahas Lengkap). Retrieved from seputarpengetahuan.co.id:
https://www.seputarpengetahuan.co.id/2017/07/17-pengertian-website-
menurut-para-ahli.html#:~:text=1.-,Hakim%20Lukmanul
%20(2004),lingkup%20lokal%20maupun%20jarak%20jauh

Wahyu Nurjaya WK, S. M. (2009). Mengenal JavaScript dan Struktur JavaScript.

1-