LAPORAN PRAKTIK PEMROGRAMAN WEB

RANCANGAN TUGAS AKHIR

PRAKTIK PEMROGRAMAN WEB

20P03376
1 SKS

Dosen Pengampu:
Riska Dami Ristanto, M.Pd.
Nip. 199207112019031012

Anggraini Mulwinda, S. T., M. Eng.

Nip. 132307264

Disusun Oleh:

Aditya Wahyu Rizki (5302420073)

Dina Kamaladuri Wardani (5302420076)
Jaya Iqbal Pratama (5302420078)
Sudarmaji (5302421088)
Wahyu Setyo Adi Purwanto (5302421089)

Rombel:

3 (tiga)

Pendidikan Teknik Informatika dan Komputer

Fakultas Teknik
UNIVERSITAS NEGERI SEMARANG
NOVEMBER 2021
 KATA PENGANTAR

Segala puji dan syukur kehadirat Allah SWT, atas segala rahmat dan hidayah-Nya,
sehingga Kami dapat menyelesaikan penulisan laporan ini yang berjudul “ RANCANGAN
TUGAS AKHIR PRAKTIK PEMROGRAMAN WEB ”. Dengan tepat waktu sesuai yang telah
dijadwalkan.

Dalam penyusunan Laporan ini, penulis banyak mendapat tantangan dan hambatan
akan tetapi telah Kami susun dengan maksimal sehingga pembuatan paper ini berjalan dengan
lancar dan selesai tepat pada waktunya. Penulis mengucapkan terimakasih kepada:

1. Riska Dami Ristanto, M.Pd., selaku dosen pengampu mata kuliah Praktik Pemograman Web.

2. Anggraini Mulwinda, S. T., M. Eng. selaku dosen pengampu mata kuliah Pemograman Web.

3. Serta kepada semua pihak yang telah membantu dalam penyusunan laporan ini, semoga
bantuannya mendapat balasan dari Tuhan Yang Maha Esa.

Kami sebagai Penulis menyadari sepenuhnya bahwa laporan ini masih jauh dari
kesempurnaan baik dari bentuk penyusunan maupun materinya. Oleh karena itu kritik, koreksi,
dan saran yang bersifat membangun dari semua pihak sangat Kami harapkan. Akhirnya dengan
segala kerendahan hati Kami berharap semoga makalah ini dapat bermanfaat bagi kita semua.

Semarang,02 November 2021

Penulis
 DAFTAR ISI

BAB I ......................................................................................................................................... 4
PENDAHULUAN .................................................................................................................... 4
1.1 Skenario....................................................................................................................... 4
1.2 Pembagian Pekerjaan .................................................................................................. 4
1.3 Landasan Teori ............................................................................................................ 4
1.4 Rumusan Masalah ....................................................................................................... 7
1.5 Tujuan.......................................................................................................................... 7
BAB II ....................................................................................................................................... 8
PEMBAHASAN ....................................................................................................................... 8
2.1 Analisis Kebutuhan ..................................................................................................... 8
2.2 Desain Use Case .......................................................................................................... 8
2.3 Desain Database .......................................................................................................... 9
2.4 Desain UI................................................................................................................... 12
2.5 Metode Penelitian...................................................................................................... 13
2.6 Gambaran untuk Pencodingan .................................................................................. 13
BAB III .................................................................................................................................... 17
PENUTUP ............................................................................................................................... 17
3.1 Kesimpulan................................................................................................................ 17
3.2 Daftar Pustaka ........................................................................................................... 17
 BAB I
PENDAHULUAN
1.1 Skenario

Di Jurusan Teknik Elektro memiliki sebuah kantin yang menggunakan sistem

informasi untuk pengelolaannya. Admin bertugas untuk mengelola akun penjual dan
member mahasiswa (lihat, tambah, hapus, edit). Selain itu admin juga bertugas untuk
mengatur ketersediaan menu beserta harganya. Penjual bertugas untuk melayani
pembeli melalui sistem informasi baik pembeli yang terdaftar sebagai member maupun
pembeli yang tidak terdaftar sebagai member. Selain itu, penjual juga dapat mencetak
nota dari setiap transaksi pembelian. Dalam akun member terdapat menu yang
memberikan informasi transaksi yang telah dilakukan. Setiap hari jumat, pengelola
kantin memberikan diskon sebesar 10% kepada setiap membernya jika pada hari
tersebut member melakukan transaksi pembelian dengan total minimal Rp40.000.
Untuk keperluan rekap keuangan, terdapat menu di dalam admin yang
menginformasikan jumlah transaksi yang masuk dalam satu hari.

1.2 Pembagian Pekerjaan

1. Aditya Wahyu Rizki : Coding, desain database dan membuat laporan
2. Dina Kamaladuri Wardani : Coding dan membuat laporan
3. Jaya Iqbal Pratama : Desain UI dan coding
4. Sudarmaji : Desain use case, desain database, dan coding
5. Wahyu Setyo Adi Purwanto : Coding dan membuat laporan
1.3 Landasan Teori

1. Kantin

Good (1959) mengatakan dalam Dictionary of Education-nya: "Kafetaria

sebuah ruangan atau bangunan di mana sekolah umum atau mahasiswa
memilih, menyiapkan makanan dan melayani diri mereka sendiri". Di
sekolah dan perguruan tinggi menawarkan pilihan / makanan sehat untuk siswa
yang dilayani oleh staf kantin.
2. Aplikasi

Pengertian aplikasi menurut ahli adalah sebagai berikut:

a) Menurut Jogiyanto (1999, 12) ada aplikasi pada komputer,
instruksi (instructions) atau instruksi (instructions) yang ada di dalamnya.
Bahwa komputer Dapat memproses input akan output.

b) Menurut Kamus Besar Bahasa Indonesia Kamus Bahasa (1998, 52) itu adalah
penerapan desain sistem untuk memproses data yang menggunakan aturan atau
ketentuan bahasa pemrograman tertentu. Aplikasi adalah program komputer
yang dirancang untuk bekerja dan melakukan tugas pengguna tertentu.

c) Menurut Rachmad Hakim S, perangkat lunak digunakan untuk tujuan tertentu

seperti: B. pemrosesan dokumen, administrasi Windows dan game dll.

d)Menurut Harip Santoso menyangkut kumpulan file dan ( Formulir, kelas,

laporan) yang dirancang untuk melakukan aktivitas terkait tertentu, seperti:
Permintaan Penggajian, aplikasi fixed asset.

3. Desain ERD

ERD adalah model atau desain yang digunakan untuk membuat database
yang memudahkan untuk mendeskripsikan data dengan satu atau lebih relasi
dalam bentuk desain. Sistem database yang dihasilkan dapat digambarkan
dengan cara yang lebih terstruktur dan eksplisit menggunakan diagram ER.

Tipe Model Data Untuk mengembangkan sistem database yang sesuai,

Anda harus terlebih dahulu menentukan tipe model data yang akan digunakan.
Hal ini nantinya akan berdampak signifikan pada pengembangan aplikasi sesuai
dengan kebutuhan proyek bisnis. Model ER Konseptual sangat berguna untuk
mendokumentasikan semua bentuk arsitektur data di organisasi Anda. Model
ini dapat digunakan untuk satu atau lebih tipe model data logis. Tujuan dari
pengembangan ini adalah untuk membangun struktur metadata dari data master
entitas dan set model logis ER.
 Entitas : Entitas merupakan kumpulan objek yang dapat teridentifikasi secara
unik. Di dalam ERD, entitas dilambangkan dengan bentuk persegi panjang.

Atribut : Untuk setiap entitas sendiri mempunyai atribut yang berfungsi untuk
mendeskripsikan karakteristik dari entitas tersebut.

Relasi : Relasi adalah sebuah hubungan antara beberapa jenis entitas yang
berasal dari himpunan entitas yang berbeda. Bentuk relasi ini akan
dilambangkan dengan bentuk belah ketupat. Terdapat tiga jenis relasi yang
digunakan dalam ERD,

4. Diagram UML

Menurut Nugroho (2009, 4), UML (Unified Modeling Language) adalah

metodologi kolaborasi antara metode Booch, OMT (Object Modeling
Technique ) dan OOSE (Object Oriented Software Engineering ) dan berbagai
metode lainnya yang digunakan hari ini untuk Analisis dan desain
sistem dengan metodologi berorientasi objek. mengadaptasi penggunaan luas
"Bahasa Pemrograman Berorientasi Objek" (OOP). Ini termasuk:

1) Use Case Diagram: Diagram ini menunjukkan sejumlah

Use Case dan Aktor (tipe khusus dari Kelas ) Diagram ini sangat penting untuk
mengatur dan memodelkan perilaku sistem yang dibutuhkan dan oleh pengguna
mengharapkan.

2) Diagram Urutan: Diagram urutan adalah diagram iterasi yang menyoroti

pengiriman pesan pada waktu tertentu yang urut dalam diagramnnya.

3) Diagram Aktivitas: Sifat Dinamis. Diagram aktivitas adalah tipe khusus dari
diagram keadaan yang menunjukkan aliran dari satu aktivitas ke aktivitas
lainnya dalam sistem . Diagram ini sangat penting untuk memodelkan fungsi
 sistem dan memberikan tegangan dalam aliran kontrol antara
objek.

1.4 Rumusan Masalah

Dapat disimpulkan bahwa permasalahan dari scenario studi kasus yang harus
diselesaikan :

1. Membuat analisis kebutuhan yang dibtutuhkan kantin elektro.

2. Membuat desain use case yang sesuai dengan skenario yang diberikan.
3. Membuat database dari use case yabf telah dibuat.
4. Mendekripikan desain UI dari aplikasi kantin elektro Unnes.

1.5 Tujuan
Tujuan utama dari sistem pengembangan aplikasi berbasis web/sistem informasi

1. Untuk mempermudah pengecekan data ketersedian menu beserta harganya.

2. Untuk mepermudah mengetahui daftar pembeli yang member dan yang bukan.
3. Untuk mepermudah pengelolahan sistem di kantin Jurusan Teknik Elektro.
4. Untuk mepermudah perhitungan diskon dengan transkasi minimal yang telah
ditentukan setiap hari jumat di kantin Jurusan Teknik Elektro.
5. Untuk memudahkan informasi pemasukan keuangan di kantin Jurusan Teknik
Elektro.
 BAB II
PEMBAHASAN

2.1 Analisis Kebutuhan

• Admin : berfungsi sebagai pengatur atau pengelola akun casier dan akun
member (menambah, mengubah, menghapus, mengedit). Admin juga berfungsi
mengatur menu dan harga, admin juga dapat melihat informasi transaksi.
• Chasier : berfungsi untuk melayani transaksi dan mencetak nota, chasier
juga dapat melihat jumlah barang.
• Member : member dapat melihat daftar menu yang disediakan dan dapat
melakukan pemesanan.

2.2 Desain Use Case

Admin dapat mengelola akun casier dan akun member (menambah, mengubah,
menghapus, mengedit). Admin juga berfungsi mengatur menu dan harga, admin juga
dapat melihat informasi transaksi.
 Chasier dapat melayani transaksi dan mencetak nota, chasier juga dapat melihat
jumlah barang. Member dapat melihat daftar menu yang disediakan dan dapat
melakukan pemesanan.

2.3 Desain Database

• Entitas
▪ Admin
▪ Chasier
▪ Member
▪ Transaksi
▪ Pesanan

• Atribut
▪ Admin
❖ Id_admin = int (PK)
❖ Nama_admin = vchar
❖ Password = vchar
❖ Alamat_admin = vchar
❖ Penjual_id_penjual = int (PK)
❖ Penjual_pembeli_id_pembeli = int (PK)

▪ Chasier
❖ Id_chasire = int (PK)
❖ Nama_chasier = vchar
❖ Pembeli_id_pembeli = int (PK)

▪ Member
❖ Id_member = int (PK)
❖ Nama_pembeli = vchar

▪ Transaksi
 ❖ Id_transaksi = int (PK)
❖ No_transaksi = vchar
❖ Tanggal_transaksi = date
❖ Pembeli_id_pembeli = int (PK)
❖ Diskon = vchar

▪ Pesanan
❖ Id_pesanan = int (PK)
❖ Menu = vchar
❖ Harga = vchar
❖ Id_pembeli = vchar
❖ Kode_pesanan = vchar

• Hubungan

Admin Chasier Member Pesanan Transaksi

Admin 1:n

Chasier 1:n 1:n

Member m:n

Pesanan

Transaksi

Hubungan:

Admin mengontrol transaksi

Tabel utama : Admin
Tabel kedua : transaksi
Hubungan : 1 to many (1:n)
Attribute penghubung : id_transaksi (FK id_transaksi di admin)

Member melakukan pemesanan

 Tabel utama : Member
Tabel kedua : Pesanan
Hubungan : many to many (m:n)
Attribute penghubung : id_pesanan (FK id_pesanan di member)

Chasier memproses pesanan

Tabel utama : Chasier
Tabel kedua : Pesanan
Hubungan : 1 to many (1:n)
Attribute penghubung : id_pesanan (FK id_pesanan di chasier)

Chasier melayani transaksi

Tabel utama : Chasier
Tabel kedua : Transaksi
Hubungan : 1 to many (1:n)
Attribute penghubung : id_transaksi (FK id_transaksi di chasier)

• Desain ERD
2.4 Desain UI
2.5 Metode Penelitian
Metode penelitian yang kami gunakan ialah searching (data sekunder) dan
observasi secara umum mengenai apa saja hal yang diperlukan untuk memenuhi
kebutuhan dalam membuat projek ini.

2.6 Gambaran untuk Pencodingan

• Topbar
• Sidebar

• Index

• Footer
• Login

• Proses login

• Cek login
• Pembeli

Untuk gambaran pengkodingan hanya itu yang dapat kami tampilkan,

dikarenakan untuk yang lain masih dalam proses pembuatan. Program ini
merupakan rancangan awal yang sewaktu waktu dapat berubah menyesuaikan
hasil diskusi kelompok kami.
 BAB III
PENUTUP

3.1 Kesimpulan
Laporan ini berisikan gambaran awal mengenai projek kami, yaitu projek
pembuatan aplikasi berbasis web untuk kantin Fakultas Teknik. Berdasarkan hasil
pembahasan laporan yang telah dijelaskan tentang skenario permaslahaan system
kantin di Teknik elektro Universitas Negeri Semarang diperlukan pemngembangan
dalam sistem pembayaran berbasis web, yang dimana kemudian dijabarkan terlebih
dahulu dari use case hingga gambaran pencodingannya sebelum menggunakan
javascript sebagai bahasa pemograman yang dimana terdapat tiga actor didalamnya
yaitu member, admin dan chasier.

Akan tetapi masih banyak yang harus dikembangkan lagi kedepannya nanti
pada saat Ujian Akhir Semester. Namun semua persiapan projek ini telah dirancang
sebaik mungkin dengan scenario yang telah disediakan. Selain itu, karena ini
merupakan gambaran awal, sehingga rancangan ini bisa berubah mengikuti keputusan
dari hasil diskusi yang kami lakukan.

3.2 Daftar Pustaka

• Anonmy. (2015). Pengertian dan Definisi Aplikasi Menurut Para Ahli.

Retrieved from http://blogdefinisi.blogspot.co.id/2015.
• Arina Meitri1, D. F. (2020). Sistem Pembayaran Berbasis Web. Jurnal Teknik
Sistem dan Industri, 34-52.
• Nefya, B. C. (2016). “E-CANTEEN” ANDROID-BASED APPLICATION
DESIGN USING OBJECT . PERANCANGAN APLIKASI E-CANTEEN.
• Ritonga, P. (2015). Pengertian UML dan Modelnya Menurut Pakar. Retrieved
from https://bangpahmi.com/pengertian-unified-modelling-language-uml-dan-
modelnya-menurut-pakar/
• Safaat. (2011). Pemogramaan Aplikasi Mobile. Bandung: Penerbit
Informatika.