BERBASIS WEB
TUGAS AKHIR
Diajukan untuk memenuhi salah satu syarat tugas akhir matakuliah bahasa
Indonesia Unniversitas Pamulang
Di susun oleh :
Faisal Fajri
NIM : 171011400432
Alhamdulillah, Dengan mengucapkan puji syukur kehadirat Allah SWT, yang telah
menyelesaikan tugas ini dengan baik. Dimana tugas akhir ini penulis sajikan dalam
bentuk buku yang sederhana. Adapun judul tugas akhir, yang penulis ambil sebagai
Tujuan penulisan tugas akhir ini dibuat sebagai salah satu syarat tugas akhir
diambil berdasarkan hasil observasi dan beberapa sumber literatur yang mendukung
penulisan ini. Penulis menyadari bahwa tanpa bimbigan dan dorongan dari semua
pihak, maka penulisan tugas akhir ini tidak akan lancar. Oleh karena itu pada
3. Ibu Kasih Widiawati, selaku Dosen Pembimbing mata kuliah Bahasa Indonesia.
Serta semua pihak yang terlalu banyak untuk disebut satu persatu sehingga
terwujudnya penulisan ini. Penulis menyadari bahwa penulisan tugas akhir ini masih
vi
jauh sekali dari sempurna, untuk itu penulis mohon kritik dan saran yang bersifat
Akhir kata semoga tugas akhir ini dapat berguna bagi penulis khususnya dan
Faisal Fajri
vii
DAFTAR ISI
Halaman
Lembar Judul ..................................................................................................... i
Lembar Pernyataan Keaslian Tugas Akhir ...................................................... ii
Lembar Pernyataan Publikasi Karya Ilmiah ................................................... iii
Lembar Persetujuan dan Pengesahan Tugas Akhir ......................................... iv
Lembar Konsultasi Tugas Akhir ....................................................................... v
BAB I PENDAHULUAN
1.1 Latar Belakang Masalah ............................................................ 1
1.2 Maksud dan Tujuan ................................................................... 2
1.3 Metode Penelitian ...................................................................... 3
1.4 Ruang Lingkup .......................................................................... 4
1.5 Sistematika Penulisan ................................................................ 5
BAB IV PENUTUP
4.1 Kesimpulan .............................................................................. 51
4.2 Saran ........................................................................................ 51
x
DAFTAR SIMBOL
ENTITAS / ENTITY
Entitas merupakan data inti yang akan disimpan, bakal tabel
pada basis data, benda yang memiliki data dan harus
disimpan datanya agar dapat diakses oleh aplikasi
komputer, penamaan entitas biasanya lebih ke kata benda
dan belum merupakan nama tabel.
ATRIBUT
Field atau kolom data yang butuh disimpan dalam suatu
entitas.
RELASI
Relasi yang menghubungkan antar entitas, biasanya diawali
dengan kata kerja.
ASOSIASI / ASSOCIATION
N Penghubung antara relasi dan entitas dimana dikedua
B.
xi
DAFTAR GAMBAR
Halaman
Gambar II.1. Ilustrasi Model Waterfall............................................................................9
Gambar II.2. Struktur Navigasi Linier...........................................................................11
Gambar II.3. Struktur Navigasi Non Linier..................................................................12
Gambar II.4. Struktur Navigasi Hirarki.........................................................................12
Gambar II.5. Struktur Navigasi Campuran..................................................................13
Gambar III.1. Rancangan Antar Muka Beranda.........................................................20
Gambar III.2. Rancangan Antar Muka Panduan.........................................................20
Gambar III.3. Rancangan Antar Muka Kontak...........................................................21
Gambar III.4. Rancangan Antar Muka Akun...............................................................21
Gambar III.5. Rancangan Antar Muka Beranda Member........................................22
Gambar III.6. Rancangan Antar Muka Panduan Member........................................22
Gambar III.7. Rancangan Antar Muka Transaksi.......................................................23
Gambar III.8. Rancangan Antar Muka Kontak Member..........................................23
Gambar III.9. Rancangan Antar Muka Keranjang.....................................................24
Gambar III.10. Rancangan Antar Muka Login Admin.............................................24
Gambar III.11. Rancangan Antar Muka Data Admin................................................25
Gambar III.12. Rancangan Antar Muka Data Menu.................................................25
Gambar III.13. Rancangan Antar Muka Data Pesanan.............................................26
Gambar III.14. Rancangan Antar Muka Data Kategori............................................26
Gambar III.15. Entity Relationship Diagram..............................................................27
Gambar III.16. Logical Record Structure.....................................................................28
Gambar III.17. Struktur Navigasi Pengunjung............................................................36
Gambar III.18. Struktur Navigasi Member..................................................................37
Gambar III.19. Struktur Navigasi Admin.....................................................................37
Gambar III.20. Implementasi Antar Muka Beranda..................................................38
Gambar III.21. Implementasi Antar Muka Cara Pemesanan..................................38
Gambar III.22. Implementasi Antar Muka Cara Pembayaran................................39
Gambar III.23. Implementasi Antar Muka Login Member.....................................39
Gambar III.24. Implementasi Antar Muka Pendaftaran Member..........................40
Gambar III.25. Implementasi Antar Muka Beranda Member.................................40
Gambar III.26. Implementasi Antar Muka Profil.......................................................41
Gambar III.27. Implementasi Antar Muka Konfirmasi Pembayaran...................41
Gambar III.28. Implementasi Antar Muka Riwayat Pemesanan...........................42
Gambar III.29. Implementasi Antar Muka Keranjang Belanja..............................42
Gambar III.30. Implementasi Antar Muka Login Admin........................................43
Gambar III.31. Implementasi Antar Muka Data Admin...........................................43
Gambar III.32. Implementasi Antar Muka Data Kategori.......................................44
Gambar III.33. Implementasi Antar Muka Data Menu.............................................44
Gambar III.34. Implementasi Antar Muka Data Pesanan........................................45
xii
DAFTAR TABEL
Halaman
xiii
DAFTAR LAMPIRAN
Halaman
Lampiran A1. Laporan Pesanan Katering..........................................................................54
Lampiran A2. Laporan Pembayaran....................................................................................55
xiv
BAB I
PENDAHULUAN
membawa pengaruh yang besar dalam kehidupan dan cara pandang manusia
Perkembangan teknologi ini membawa pengaruh yang cukup besar dalam segala
bidang, salah satunya di bidang usaha makanan yaitu usaha catering. Usaha
atau datang langsung adalah kurangnya informasi mengenai harga dan menu
Namun dengan perkembangan yang sangat pesat ini, dimana pada masa sekarang
untuk mendapatkan informasi, internet dapat digunakan sebagai alat bantu bisnis
memasarkan produk atau jasa terhadap konsumen. Salah satunya adalah website
1
2
pemesanan katering secara online tanpa harus telepon atau datang langsung ke
tempat katering. Selain itu diharapkan pihak penyedia katering akan terbantu
Web”
pemesanan
Sedangkan tujuan penulisan Tugas Akhir ini adalah memenuhi salah satu
syarat tugas akhir uas untuk mata kuliah Bahasa Indonesia Unniversitas
Pamulang.
3
Adapun metode dan teknik pengumpulan data yang digunakan oleh penulis
adalah :
2. Desain
Dalam tahap ini penulis akan merancang desain dan tahapan desain yang
4. Pengujian
Pengujian dilakukan setelah kode program selesai dibuat dan program dapat
berjalan.
4
1. Observasi
secara online.
2. Studi Pustaka
menyimpang dari pokok permasalahan, maka dalam penulisan tugas akhir ini
penulis hanya membatasi pembahasan perancangan web meliputi isi dari halaman
front-end dan back-end. Isi dari halaman front-end meliputi tampilan halaman
beberapa bab. Adapun sistematika penulisan Tugas Akhir ini sebagai berikut :
BAB I PENDAHULUAN
BAB IV PENUTUP
LANDASAN TEORI
A. Website
Web Browser atau diringkas Browser adalah program atau software yang
6
7
menelusuri (browser) serta melihat isi dari dokumen web dan berpindah dari
lain-lain.
B. Bahasa Pemrograman
1. HTML
web. File HTML berisi suatu instruksi tertentu yang dapat memberikan
sebuah format pada dokumen yang akan ditampilkan pada WWW (World
Wide Web).”
3. JQuery
web tanpa harus menambahkan event atau pun property pada halaman web
tersebut.”
Dengan jQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat
source-nya akan terlihat seperti dokumen HTML biasa dalam artian tidak
ada kode JavaScript yang terlihat langsung yang biasa disebut sebagai
C. Basis Data
Menurut Rosa dan Shalahuddin (2013:43), “Sistem basis data adalah sistem
terkomputerisasi yang tujuan utamanya adalah memelihara data yang sudah diolah
atau informasi dan membuat informasi tersedia saat dibutuhkan”. Pada intinya
basis data adalah media untuk menyimpan data agar dapat diakses dengan mudah
dan cepat.
1. MySQL
bersifat client server, di mana data diletakkan di server yang bisa diakses
2. XAMPP
(waterfall) sering juga disebut model sekuensial linier (sequential linear) atau alur
hidup klasik (classic life cycle).” Model air terjun menyediakan pendekatan alur
hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis, desain,
Gambar II.1.
2. Desain
Desain perangkat lunak adalah proses multi langkah yang fokus pada desain
tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini
tahap ini adalah program komputer sesuai dengan desain yang telah dibuat
4. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi lojik dan fungsional
dan memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk
kesalahan yang muncul dan tidak terdeteksi saat pengujian atau perangkat
spesifikasi untuk perubahan perangkat lunak yang sudah ada, tapi tidak
A. Struktur Navigasi
sebagai alur dari suatu program yang menggambarkan rancangan hubungan antar
berurut yang menampilkan satu demi satu tampilan layar sacra berurut
menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini
adalah satu halaman sebelumnya atau satu halaman sedudahnya, tidak dapat
melakukan navigasi secara berurutan, dalam frame atau byte informasi satu
ke yang lainnya.
Gambar II.2
yaitu tidak ada Master Page dan Slave Page, pengguna akan melakukan
navigasi dengan bebas melalui isi proyek dengan tidak terkait dengan jalur
Gambar II.3
Struktur dasar ini disebut juga struktur linier dengan percabangan karena
bebas (secara non-linier). tetapi terkadang dibatasi presentasi linier film atau
informasi penting dan pada data yang paling terorganisasi secara logis pada
suatu hirarki.
Gambar II.5
1. Entity (entitas)
sistem. Obyek dasar dapat berupa orang, benda atau hal lain yang
2. Attribute (Atribut)
sebagai basis data. Atribut berfungsi sebagai penjelas sebuah entitas untuk
berikut:
menggunakan garis.
3. Relation (relasi)
Relasi atau hubungan adalah kejadian atau transaksi yang terjadi di antara
dua entitas yang keterangannya perlu disimpan dalam basis data. Aturan
d. Nama relasi menggunakan kata kerja aktif (diawali awalan me) tunggal
objek dasar dan relasi antara entitas. Entitas dapat diartikan sebagai objek
yang dapat berelasi dengan entitas pada himpunan entitas yang lain.
dan B) dapat berupa satu ke satu (one to one), satu ke banyak (one to many),
paling banyak dengan satu entitas pada himpunan entitas B, dan begitu
B.
C. Pengujian Web
kotak hitam) yaitu menguji perangkat lunak dari segi spesifikasi fungsional tanpa
apakah fungsi-fungsi, masukan, dan keluaran dari perangkat lunak sesuai dengan
Pengujian kotak hitam dilakukan dengan membuat kasus uji yang bersifat
mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan
spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian
kotak hitam harus dibuat dengan kasus benar dan kasus salah, misalkan untuk
a. Jika user memasukkan nama pemakai (username) dan kata sandi (password)
yang benar.
b. Jika user memasukkan nama pemakai (username) dan kata sandi (password)
yang salah, misalnya nama pemakai benar tapi kata sandi salah, atau
PEMBAHASAN
kebutuhan sistem. Halaman web ini terbagi menjadi tiga tampilan, pertama
halaman untuk pengunjung, kedua halaman untuk member, dan ketiga halaman
a. Beranda
b. Panduan
pembayaran.
c. Kontak
d. Akun
17
18
a. Beranda
Pada halaman ini member dapat memilih produk yang terdapat pada
website
b. Panduan
pembayaran
c. Transaksi
d. Kontak
e. Keranjang
Pada halaman ini berisi detail pesanan, transaksi yang telah dipilih oleh
member
f. Logout
a. Beranda
Pada halaman ini admin dapat melihat jumlah pesanan yang ada
b. Kelola
Pada halaman ini admin dapat mengelola setiap data yang ada,
c. Laporan Transaksi
d. Logout
admin
umum tampilan dari halaman web yang dilengkapi dengan penjelasan mengenai
halaman web tersebut. Hal ini bertujuan agar setiap tahapan desain lebih terarah.
HEADER
AKUN
BERANDA PANDUAN KONTAK
SLIDER
KONTEN
FOOTER
Gambar III.1
Rancangan Antar Muka Beranda
HEADER
KONTEN
FOOTER
Gambar III.2
Rancangan Antar Muka Panduan
21
HEADER
KONTEN
FOOTER
Gambar III.3
Rancangan Antar Muka Kontak
HEADER
DAFTAR
KONTEN
FOOTER
Gambar III.4
Rancangan Antar Muka Akun
22
HEADER
SLIDER
KONTEN
FOOTER
Gambar III.5
Rancangan Antar Muka Beranda Member
b. Rancangan Antar Muka Panduan
HEADER
PEMESANAN
CARA
PEMBAYARAN
KONTEN
FOOTER
Gambar III.6
Rancangan Antar Muka Panduan Member
23
HEADER
Pembayaran
Riwayat
Pesanan
KONTEN
FOOTER
Gambar III.7
Rancangan Antar Muka Transaksi
HEADER
KONTEN
FOOTER
Gambar III.8
HEADER
KERANJANG
FOOTER
Gambar III.9
LOGIN ADMIN
XXXXXXXX
XXX999
MASUK BATAL
Gambar III.10
DATA ADMIN
EMAIL Xxxxxx
USERNAME Xxxxxx
PASSWORD xxx999
SIMPAN
FOOTER
Gambar III.11
HARGA Xxxxxx
KETERANGAN
Xxxxxx
SAVE
FOOTER
Gambar III.12
DATA PESANAN
DATA PESANAN
FOOTER
Gambar III.13
DATA KATEGORI
xxxxxx
KETERANGAN
SIMPAN
FOOTER
Gambar III.14
id
status_pesan id tgl_pesan no_pesan
nama no_pesan tgl_kirim
no_detail
jumlah
jk Password
telepon
memiliki pesanan_detail
email user Melakukan pesanan
id_menu
alamat
username status_bayar jam
id_kota
memiliki memiliki
menghasilkan
id_kota
harga foto
Nobayar menu
pembayaran nama detail
nama_kota biaya_kirim no_pesan
id_menu id_kategori
jumlahbayar
biaya alamat
bank tglbayar
status
memiliki
kategori
id_kategori keterangan
Nama_kategori
Gambar III.15
Gambar III.16
Logical Record Structure (LRS)
29
C. Spesifikasi File
Akronim : admin
Media : Harddisk
Panjang record : 92
Kunci Field : id
Software : MySQL
Tabel III.1.
Spesifikasi File Tabel Admin
Akronim : biaya_kirim
Media : Harddisk
Panjang record : 44
Software : MySQL
Tabel III.2.
Spesifikasi File Tabel Biaya Kirim
Akronim : kategori
Media : Harddisk
Panjang record : 17
Software : MySQL
31
Tabel III.3.
Spesifikasi File Tabel Kategori
Akronim : keranjang
Media : Harddisk
Panjang record : 26
Software : MySQL
Tabel III.4.
Spesifikasi File Tabel Keranjang
Akronim : menu
Media : Harddisk
Panjang record : 55
Software : MySQL
Tabel III.5.
Spesifikasi File Tabel Menu
Akronim : pembayaran
Media : Harddisk
Panjang record : 35
Software : MySQL
Tabel III.6.
Spesifikasi File Tabel Pembayaran
Akronim : pesanan
34
Media : Harddisk
Panjang record : 10
Software : MySQL
Tabel III.7.
Spesifikasi File Tabel Pesanan
Akronim : pesanan_detail
Media : Harddisk
Panjang record : 12
Software : MySQL
Tabel III.8.
Spesifikasi File Tabel Pesanan Detail
Akronim : user
Media : Harddisk
Tabel III.9.
Spesifikasi File Tabel User
INDEX
CARA CARA
PEMESANAN PEMBAYARAN MASUK DAFTAR
Gambar III.17
INDEX
LOGIN
Gambar III.18
INDEX
LOGIN
KELOLA
HOME LAPORAN LOGOUT DATA
DATA
DATA ADMIN DATA MENU DATA PESANAN
KATEGORI
Gambar III.19
3.3.1 Implementasi
a. Halaman Pengunjung
1. Halaman Beranda
Gambar III.20
Halaman Beranda
2. Halaman Panduan/Cara Pemesanan
Gambar III.21
Halaman Cara Pemesanan
39
Gambar III.22
Halaman Cara Pembayaran
b. Halaman Member
Gambar III.23
Gambar III.24
3. Halaman Beranda
Gambar III.25
Halaman Beranda
41
4. Halaman Profil
Gambar III.26
Halaman Profil
Gambar III.27
Gambar III.28
Gambar III.29
c. Halaman Admin
Gambar III.30
Gambar III.31
Gambar III.32
Gambar III.33
Gambar III.34
Tabel III.10.
Hasil Pengujian Black Box Testing Form Login Admin
“Harap Isi
Username dan
Password Terlebih
dahulu”.
tombol login
login
47
di arahkan ke
Halaman
Administrator.
Tabel III.11.
Hasil Pengujian Black Box Testing Form Login Member
dan Password
Harus Diisi”.
48
tombol login
login
5. Mengetikkan Sistem
dan kemudian
langsung di
arahkan ke
Halaman
Member
Tabel III.12.
Hasil Pengujian Black Box Testing Form Pendaftaran
PENUTUP
4.1. Kesimpulan
berbasis web yang telah dibahas pada bab sebelumnya, penulis dapat memberikan
informasi tentang produk catering atau informasi tentang produk yang sudah
4.2. Saran
51
DAFTAR PUSTAKA
Rosa, A.S dan M. Shalahuddin. 2013. Rekayasa Perangkat Lunak Terstruktur dan
Berorientasi Objek. Bandung: Informatika
Yakub. 2008. Sistem Basis Data Tutorial Konseptual. Jogyakarta: Graha Ilmu
52
DAFTAR RIWAYAT HIDUP
A. Biodata Mahasiswa
N.I.M : 171011400432
Nama Lengkap : Faisal Fajri
Tempat & Tanggal Lahir : Cianjur, 26 Maret 1998
Alamat Lengkap : KP. Warudoyong RT 03/02 Desa cibdak. Kec
Sukaresmi. Kab Cianjur
1. Anggota PASUSKA SMP Negeri 1 Sukaresmi. tahun 2011 s.d tahun 2013
2. Seksi Muamalah RISMA(REMAJA ISLAM MESJID MANARUL HIDAYAH)
SMA Negeri 1 Sukaresmi tahun 2015 s.d 2017
Faisal Fajri