Dokumen tersebut merupakan laporan tugas akhir rekayasa perangkat lunak untuk website program kerja BEM ESQ Business School. Website ini bertujuan untuk memudahkan dokumentasi dan pemantauan program kerja organisasi mahasiswa. Laporan ini membahas persyaratan, spesifikasi, dan desain arsitektur perangkat lunak website tersebut.

1. TUGAS AKHIR REKAYASA PERANGKAT LUNAK
WEBSITE PROGRAM KERJA BEM ESQ BUSINESS SCHOOL
Haikal Ridho Labbaika1610120007
Cyntia Fushila Arsy 1610120017
PROGRAM STUDI SISTEM INFORMASI
SEKOLAH TINGGI ILMU MANAJEMEN DAN ILMU KOMPUTER
ESQ BUSINESS SCHOOL
2019

2. i
KATA PENGANTAR
Puji dan syukur diucapkan kehadirat Tuhan Yang Maha Esa karena dengan karunia dan
rahmat-Nya laporan akhir mata kuliah Rekayasa Perangkat Lunak yang berjudul “TUGAS
AKHIR REKAYASA PERANGKAT LUNAK WEBSITE PROGRAM KERJA BEM ESQ
BUSINESS SCHOOL” ini dapat diselesaikan. Penyusunan tugas akhir ini merupakan salah satu
syarat untuk meyelesaikan tugas mata kuliah Rekayasa Perangkat Lunak pada Program Studi
Sistem Informasi Sekolah Tinggi Dan Manajemen ESQ. Penyusunan laporan akhir ini dapat
dilaksanakan atas dukungan dan bantuan dari berbagai pihak. Oleh karena itu penulis
mengucapkan terima kasih kepada:
1. Kedua orang tua tercinta, atas seluruh dukungan, motivasi, dan kasih sayang.
2. Ibu Asri Pertiwi ST, MM Sebagai Kaprodi Sistem Informasi STIMIK ESQ.
3. Bapak Erza Sofian S.Kom, M.Kom Sebagai dosen mata kuliah Software Engineering.
4. Teman-teman Program Studi Sistem Informasi yang telah memberikan dukungan.
Semoga dengan bantuan dari beberapa pihak terkait, Bisa memberikan saran, tanggapan,
dan solusi yang membangun semangat penulis dalam menyelesaikan tugas akhir ini. Semoga
tugas akhir ini dapat memberikan manfaat untuk kepentingan kegiatan belajar mengajar di
Prodi Sistem Informasi Kampus STIMIK ESQ.
Jakarta, Mei2019
Penulis

3. ii
ABSTRAK
Kegiatan organisasi merupakan suatu aktivitas yang berada di dalam suatu lingkungan
masyarakat, lembaga, pendidikan, perguruan tinggi maupun instansi pemerintahan. Di
dalamnya banyak sekali suatu aktivitas mulai dari Pembuatan Strategi, Penentuan Takti,
Kebijakan, Negosiasi, Program Kerja, Kerjasama antar departemen, Rancangan KPI (Key
Performance Indicator), RAB, dan lain sebagainya. Semua itu dilakukan atas dasar visi dan
misi dari masing-masing organisasi untuk mengelola sumber daya manusia, aset,
pengetahuan, lingkungan kerja, dan dokumentasi surat-surat penting maupun berharga.
Sistem berbasis aplikasi baik itu web based maupun mobile apps merupakan solusi
yang tepat untuk melakukan yang untuk melakukan sebuah dokumentasi file dalam bentuk
data yang akan diinput, diolah, diintegrasikan, disimpan yang nantinya akan menghasilkan
sebuah sistem keputusan bisnis dari hasil analisis data yang berkelanjutan dan memudahkan
para pelaku organisasi untuk mengelola sumber data, baik itu data transaksi maupun berupa
laporan akhir. Maka dari itu penting untuk menentukan requirement, spesifikasi, desain,
arsitektur program, data, informasi, serta dilakukannya tahap testing dan validasi di akhir
suatu perencangan perangkat lunak.
Dan pada akhirnya sistem ini dapat membantu sumber daya manusia dalam sebuah
organisasi agar bisa menjaga sumber data, informasi, pengetahuan yang akan digunakan
untuk peningkatan efektivitas dan efisiensi kienrja dan lingkungan kerja yang ada di
dalamnya. Selain itu juga akan membantu para stakeholder dalam menetukan sebuah
keputusan, kebijakan untuk tetap menjaga siklus proses bisnis yang ada, serta menjaga
konsistensi organisasi dalam memperkokoh visi dan misi. Serta dapat memberikan dampak
untuk lingkungan sekitarnya.

4. iii
DAFTAR ISI
KATA PENGANTAR.............................................................................................................................. i
ABSTRAK........................................................................................................................................... ii
DAFTAR GAMBAR..............................................................................................................................iv
DAFTAR TABEL...................................................................................................................................vi
BAB I..................................................................................................................................................1
PERSYARATAN PRODUK ......................................................................................................................1
A. PENDAHULUAN.......................................................................................................................1
1. Tujuan.................................................................................................................................2
2. Ruang Lingkup Proyek..........................................................................................................2
3. Definisi, Akronim, Singkatan.................................................................................................3
B. GAMBARAN KESELURUHAN .....................................................................................................5
1. Fungsi Produk......................................................................................................................5
2. Karakteristik Pengguna.........................................................................................................5
3. Asumsi Dan Ketergantungan.................................................................................................6
BAB II.................................................................................................................................................7
SPESIFIKASI PRODUK...........................................................................................................................7
A. PERSYARATAN PERANGKAT LUNAK...........................................................................................7
C. PERSYARATAN ANTARMUKA....................................................................................................8
1. Antarmuka Dengan pengguna..............................................................................................8
2. Antarmuka Perangkat Keras .................................................................................................9
3. Antarmuka Perangkat Lunak.................................................................................................9
4. Antarmuka Komunikasi ......................................................................................................10
BAB III..............................................................................................................................................11
DESAIN PERANGKAT LUNAK..............................................................................................................11
A. DESAIN ARSITEKTUR PERANGKAT LUNAK................................................................................11
1. Komponen Perangkat Lunak...............................................................................................11
2. Konsep Eksekusi ................................................................................................................12
BAB IV PENUTUP ..............................................................................................................................53
A. KESIMPULAN.........................................................................................................................53

5. iv
DAFTAR GAMBAR
Gambar 2.1...................................................................................................................................... 8
Gambar 2.2...................................................................................................................................... 9
Gambar 2.3...................................................................................................................................... 9
Gambar 2.4.................................................................................................................................... 10
Gambar 3.1.................................................................................................................................... 12
Gambar 3.2.................................................................................................................................... 15
Gambar 3.3.................................................................................................................................... 16
Gambar 3.4.................................................................................................................................... 17
Gambar 3.5.................................................................................................................................... 18
Gambar 3.6.................................................................................................................................... 19
Gambar 3.7.................................................................................................................................... 20
Gambar 3.8.................................................................................................................................... 21
Gambar 3.9.................................................................................................................................... 22
Gambar 3.10.................................................................................................................................. 23
Gambar 3.11.................................................................................................................................. 24
Gambar 3.12.................................................................................................................................. 25
Gambar 3.13.................................................................................................................................. 26
Gambar 3.14.................................................................................................................................. 27
Gambar 3.15.................................................................................................................................. 28
Gambar 3.16.................................................................................................................................. 29
Gambar 3.17.................................................................................................................................. 30
Gambar 3.18.................................................................................................................................. 31
Gambar 3.19.................................................................................................................................. 32
Gambar 3.20.................................................................................................................................. 32
Gambar 3.21.................................................................................................................................. 33
Gambar 3.22.................................................................................................................................. 33
Gambar 3.23.................................................................................................................................. 34
Gambar 3.24.................................................................................................................................. 34

6. v
Gambar 3.25.................................................................................................................................. 35
Gambar 3.26.................................................................................................................................. 35
Gambar 3.27.................................................................................................................................. 36
Gambar 3.28.................................................................................................................................. 36
Gambar 3.29.................................................................................................................................. 37
Gambar 3.30.................................................................................................................................. 37
Gambar 3.31.................................................................................................................................. 38
Gambar 3.32.................................................................................................................................. 39
Gambar 3.33.................................................................................................................................. 39
Gambar 3.34.................................................................................................................................. 40
Gambar 3.35.................................................................................................................................. 40
Gambar 3.36.................................................................................................................................. 41
Gambar 3.37.................................................................................................................................. 41
Gambar 3.38.................................................................................................................................. 42
Gambar 3.39.................................................................................................................................. 42
Gambar 3.40.................................................................................................................................. 43
Gambar 3.41.................................................................................................................................. 44
Gambar 3.42.................................................................................................................................. 45
Gambar 3.43.................................................................................................................................. 46
Gambar 3.44.................................................................................................................................. 46
Gambar 3.45.................................................................................................................................. 47
Gambar 3.46.................................................................................................................................. 47
Gambar 3.47.................................................................................................................................. 48
Gambar 3.48.................................................................................................................................. 48
Gambar 3.49.................................................................................................................................. 49
Gambar 3.50.................................................................................................................................. 49
Gambar 3.51.................................................................................................................................. 50
Gambar 3.52.................................................................................................................................. 50
Gambar 3.53.................................................................................................................................. 51
Gambar 3.54.................................................................................................................................. 51
Gambar 3.55.................................................................................................................................. 52

7. vi
DAFTAR TABEL
Table 2.1........................................................................................................................................ 11
Table 2.2........................................................................................................................................ 12

8. 1
BAB I
PERSYARATAN PRODUK
A. PENDAHULUAN
Dalam pembuatan tugas proyek ini kami lebih memfokuskan dalam pembuatan
website untuk program kerja di dalam organisasi kemahasiswaan khususnya BEM ESQ
Business School, dikarenakan website ini merupakan salah satu media dokumentasi dan
pemantauan bagi organisasi yang ada di lingkungan perguruan tinggi.
Secara umum website program kerja ini adalah suatu halaman web yang terdapat
dalam sebuah domain yang memuat seluruh data, maupun laporan, dimana para staf BEM
Mahasiswa dapat melihat program kerja mapun tupoksi dari masing-masing departemen..
Sebuah website biasanya dibangun atas halaman web yang saling berhubungan. Hubungan
antara satu halaman web dengan halaman web lainnya disebut dengan hyperlink,
sedangkan teks yang dijadikan media penghubung disebut hypertext.
Website program kerja adalah suatu media informasi dan dokumentasi serta
pemantauan program kerja maupun tupoksi yang sudah disusun sedemikian rupa dan
sudah disepakati bersama. Karena program kerja harus selalu dalam dipantau agar seluruh
aktivitas yang berkaitan dengan mahasiswa dapat berjalan dengan baik dan lancer.
Dengan adanya website ini, diharapkan mempermudah staf BEM ESQ Business
School untuk bisa melakukan proses untuk bisa saling berdiskusi antar departemen dan
menentukan langkah selanjutnya dalam sebuah pengambilan keputusan seluruh kegiatan
mahasiswa yang ada dalam lingkup pengawasan BEM ESQ Business School.

9. 2
1. Tujuan
Tujuan dalam proyek ini sangat erat dengan permasalahan maupun kegiatan dalam
lingkup kemahasiswaan. Maka dari itu perlu adanya langkah-langkah untuk mencari
jawaban atau pemecahan masalah – masalah diatas. Adapun tujuan proyek ini adalah
sebagai berikut:
1. Memanfaatkan kemajuan teknologi untuk meningkatkan sarana dan prasarana
yang ada di dalam aktivitaas organisasi mahasiswa.
2. Mengenalkan sistem yang memudahkan mahasiswa dalam melakukan
dokumentasi program kerja.
3. Membangun suatu website yang mempermudah pengerjaan laporan dari sebuah
program kerja.
4. Mengenalkan sistem kepada civitas akademik.
5. Membangun sebuah kesadaraan penggunaan teknologi untuk kegiatan
kemahasiswaan.
6. Mempermudah melakukan pemantauan dan evaluasi program kerja.
2. Ruang Lingkup Proyek
Untuk menjaga agar pembahasan dalam penulisan ini tidak meluas dan
menyimpang dari pokok permasalahan, maka pembahasan akan dibatasi hanya pada
Sistem Informasi Program Kerja BEM ESQ Business School berbasis website yang
dapat dijalankan di sistem operasi windows maupun linux.
Adapun batasaN masalah untuk menjaga agar pembahasan dalam penulisan ini
tidak meluas dan menyimpang dari pokok permasalahan, maka pembahasan akan
dibatasi hanya pada sistem informasi proses dokumentasi program kerja.

10. 3
3. Definisi, Akronim, Singkatan
Web
Web adalah sebuah penyebaran informasi melalui internet. Sebenarnya antara
www (world wide web) dan web adalah sama karena kebanyakan orang
menyingkat www menjadi web saja. Web merupakan hal yang tidak dapat
dipisahkan dari dunia internet. Melalui web, setiap pemakai internet bisa
mengakses informasi-informasi di situs web yang tidak hanya berupa teks, tetapi
juga dapat berupa gambar, suara, film, animasi, dll. Sebenarnya, web merupakan
kumpulan-kumpulan dokumen yang banyak tersebar di beberapa komputer server
yang berada di seluruh penjuru dunia dan trehubung menjadi satu jaringan melalui
jaringan yang disebut internet.
Internet
Internet (kependekan dari interconnection-networking) secara harfiah ialah
sistem global dari seluruh jaringan komputer yang saling terhubung menggunakan
standar Internet Protocol Suite (TCP/IP) untuk melayani miliaran pengguna di
seluruh dunia.
user friendly
User friendly adalah kondisi dimana kita bisa menggunakan tool dengan mudah.
Tidak perlu bersusah-payah untuk melakukan sesuatu yang sederhana.
WWW (World Wide Web)
World Wide Web (WWW) bukanlah internet namun keduanya sangat berkaitan
dengan yang lainnya. Jika internet merupakan suatu jaringan komputer global,
sedangkan WWW tidak hanya sekedar jaringan tetapi di dalamnya terdapat suatu
set aplikasi komunikasi dan system perangkat lunak.

11. 4
UML
UML (Unified Modeling Language) adalah sebuah bahasa untuk menetukan,
visualisasi, kontruksi, dan mendokumentasikan artifact (bagian dari informasi yang
digunakan atau dihasilkan dalam suatu proses pembuatan perangkat lunak.
PHP
PHP(Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau
disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web
dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
CMS
CMS (Content Management System)adalah perangkat lunak yang memungkinkan
seseorang untuk menambahkan dan/atau memanipulasi (mengubah) isi dari suatu
situs Web.
PHP
PHP(Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau
disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web
dinamis.
HTML
(HTML) HyperText Markup Language adalah sebuah bahasa markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi
di dalam sebuah penjelajah web Internet dan formating hypertext sederhana yang
ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi.
4. MySQL
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL
(database management system) atau DBMS yang multithread, multi-user, dengan
sekitar 6 juta instalasi di seluruh dunia.

12. 5
B. GAMBARAN KESELURUHAN
1. Fungsi Produk
Fungsi dari produk ini adalah :
Bagi mahasiswa sebagai pengalaman dalam pengaplikasian berbagai
disiplin ilmu yang diperoleh selama duduk di bangku kuliah serta menambah
wawasan cara berfikir dan bertindak sesuai dengan lingkungan kerja yang dihadapi.
Bagi perguruan tinggi sebagai media promosi perguruan tinggi dan bukti
bahwa proses kegiatan belajar mengajar terlaksana dengan baik.
Bagi pemesan dapat melakukan proses penjualan secara mudah dan dapat
dilakukan tanpa dibatasi oleh jarak dan waktu melalui jaringan internet.
2. Karakteristik Pengguna
Karakteristik pengguna website ini adalah para staff, wakil, ketua dari masing-
masing divisi yang ada di dalam BEM ESQ Business School Dan menjadi sebuah
proses yang akan menambah pengetahuan serta pengalaman para anggota dalam
menjalankan tugas yang mereka harus mereka laksanakan dengan penuh
tanggungjawab. Karena mereka membawa amanat besar dari mahasiswa lainnya.

13. 6
3. Asumsi Dan Ketergantungan
Pada era industry 4.0, sudah seharusnya sebuah organisasi mulai memanfaatkan
teknologi yang ada untuk melancarkan seluruh rangkaian aktivitas yang ada di dalam
organisasi tersebut. Serta menjadi sarana untuk menjadi sebuah brand identity dan
strategi promosi keberadaan organisasi tersebut. Dalam hal ini tentunya BEM ESQ
Business School.
Dengan penggunaan teknolgi yang ada, tentunya akan menigkatkan kepercayaan
para anggota, maupun mahasiswa bahawa organisasi BEM berjalan dengan fungsi
program kerja yang baik dan benar. Dengan melakukan automasi, maka seluruh
proses bisnis maupun aktivitas akan lebih efektif dan efisien serta hemat aktu dan
tenaga. Tentunya didukung dengan kemampuan dari sumber daya manusia, program
kerja, visi misi, penggunaan domain yang sesuai dengan identitas organisasi,
program yang tersruktur, halaman web yang dinamis, dan mampu merespon
pengguna web dengan cepat dan responsive.
Dengan demikian adanya website program kerja ini akan membantu mereka para
staff yang memiliki keterbatasan waktu dalam melakukan aktivitas program kerja
yang terkendala aktivitas di luar organisai.. Mereka hanya tinggal membuka website
program kerja dengan gadget yang dimiliki kapanpun dan dimanapun dan melihat
dokumentasi maupun laporan yang ada. Jika ada update progress laporan, mereka
bisa langung merespon dengan cepat. Melakukan perbaikan laporan.

14. 7
BAB II
SPESIFIKASI PRODUK
A. PERSYARATAN PERANGKAT LUNAK
A. KebutuhanFungsional
1. Data ProgramKerja
● Terdapat nama, logo dan deskripsiprogramkerja
● User dapat mencari program kerja berdasarkan jenis
programkerja yaitu rutin, unggulan dan insidentil
● Sistem akan menampilkan data programkerja yang dicari
user
2. Timeline
● Menampilkan progressprogramkerja sesuaitanggalyang
ditentukan oleh Admin
● Tanggal yang dimasukkan menjadi pengingat untuk setiap
programkerja
3. Data Kepanitiaan
● User dapat melihat daftar nama kepanitiaan dari setiap
programkerja
● User dapat melihat jabatan setiap anggota kepanitiaan
4. Activity Progress
 User dapat melihat notulasi rapat
 Terdapat dokumentasiberupa foto dalam setiap activity
progress

15. 8
B. Kebutuhan NonFungsional
1. Dapat digunakan di semua PC/Laptop dan handphone
2. Digunakan dengan mudah dan cepat
3. Dapat diakses di manapun dan kapanpun
4. Pengembangan dan pembangunan sistemtidak terlalu mahal
5. Dapat mengimpor file gif, jpg, png, docx
6. Dapat digunakan di windows ataupun macintosh
C. PERSYARATAN ANTARMUKA
1. Antarmuka Dengan pengguna
Gambar 2.1

16. 9
2. Antarmuka Perangkat Keras
3. Antarmuka Perangkat Lunak
XAMPP adalah perangkat lunak bebas, yang mendukung banyak
sistem operasi, merupakan kompilasi dari beberapa program.Fungsinya adalah
sebagai server yang berdiri sendiri (localhost), yang terdiri atas program
Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis
dengan bahasa pemrograman PHP dan Perl.
Gambar 2.3
Gambar 2.2

17. 10
4. Antarmuka Komunikasi
Gambar 2.4

18. 11
BAB III
DESAIN PERANGKAT LUNAK
A. DESAIN ARSITEKTUR PERANGKAT LUNAK
1. Komponen Perangkat Lunak
a. login
Produk yang dijual di toko online ini antara lain baju kaos, sprei, dan
aksesoris
b. menu utama
Tempat untuk menjual produk di toko online adalah berupa hosting dan
domain yang perlu dimiliki sebelum membuat toko online
c. mencari program kerja
Cara pemesanan barang bisa diterima melalui email, telephone, sms dll.
Sehingga dengan demikian konsumen tidak perlu susah-susah datang
langsung.
d. Menampilkan program kerja
e. Mengelola program kerja
f. Mengelola susunan kepanitiaan
g. Mengelola activity progres

19. 12
2. Konsep Eksekusi
Gambar 3.1

20. 13
1. DeskripsiAktor
No Aktor Deskripsi
1 Admin Aktor yang mempunyai seluruh hak akses
2 User
Aktor yang memiliki akses untuk mencari dan melihat
setiap program kerja serta waktu pelaksanaanya, melihat
dan mengunduh notula dan dokumentasi dari setiap
program kerja.
Tabel 3.1

21. 14
2. Deskripsi Use Case
kepanitiaan
Mengelola activity Proses untuk mengelola activity progress yang
13 progress meliputi notula, dokumentasi dan timeline
kegiatan
14 Melihat activity Proses untuk melihat data activity progress
progress
15
Menghapus activity Proses untuk menghapus data activity
progress progress
16
Mengubah activity Proses untuk mengubah data activity progress
progress
17
Menambah activity Proses untuk menambah activity progress
Tabel 3.2

22. 15
Rancangan Proses
1. Login
Admin melakukan login dengan memasukkan data berupa username dan password,
kemudian sistem menampilkan halaman utama.
Gambar 3.2

23. 16
2. Mengelola programkerja
Menu mengelola program kerja hanya dapat diakses oleh admin. Admin memilih
menu mengelola program kerja, kemudian sistem menampilkan daftar program kerja jika
sudah memiliki program kerja. Apabila belum memiliki program kerja, maka sistem akan
menampilkan pesan “Belum memiliki program kerja”.
Gambar 3.3

24. 17
3. Mencari programkerja
Mencari program kerja dapat dilakukan oleh user dengan mengetik nama
program kerja di kolom search. Kemudian sistem akan mencari data program kerja yang
dicari pada database, setelah itu sistem menampilkan data program kerja yang dicari.
Gambar 3.4

25. 18
4. Melihat programkerja
User dapat melihat program kerja berdasarkan kategori, yaitu berdasarkan abjad,
kementerian ataupun jenis program kerj. Sistem akan mencari data pada database,
kemudian menampilkan data program kerja sesuai kategori yang dipilih.
Gambar 3.5

26. 19
5. Menghapus programkerja
Admin dapat menghapus program kerja, dengan memilih program kerja yang
ingin dihapus pada menu mengelola program kerja. Kemudian sistem akan menampilkan
pesan “Apakah yakin ingin menghapus program kerja ini?”, jika memilih tombol OK,
maka data akan terhapus. Jika memilih tombol batal, maka akan kembali ke menu
mengelola program kerja.
Gambar 3.6

27. 20
6. Mengubah programkerja
Admin dapat mengubah data program kerja dengan memilih menu
mengelola, kemudian memilih tombol edit pada program kerja yang dipilih.
Setelah itu, sistem akan menampilkan form yang berisi data-data program
kerja tersebut dan data akan tersimpan setelah mengklik tombol save.
Gambar 3.7

28. 21
7. Menambah programkerja
Menambah program kerja diakses oleh Admin. Admin memilih tombol Add
pada menu mengelola program kerja. Kemudian sistem akan menampilkan
form untuk diisi oleh admin, lalu data akan tersimpan setelah menekan
tombol save.
Gambar 3.8

29. 22
8. Mengelola kepanitiaan
Mengelola kepanitiaan dilakukan oleh Admin pada menu mengelola
panitia. Sistem akan menampilkan data kepanitiaan jika sudah memiliki
data kepanitiaan. Namun jika belum memiliki, maka sistem akan
menampilkan pesan “Data panitia tidak ditemukan”.
Gambar 3.9

30. 23
9. Melihat kepanitiaan
User dan Admin dapat melihat daftar kepanitiaan dari setiap
program kerja. user atau Admin memilih program kerja, lalu memilih
tombol kepanitiaan. Kemudian sistem akan menampilkan data kepanitiaan.
Gambar 3.10

31. 24
10. Menghapus kepanitiaan
Data kepanitiaan hanya dapat dihapus oleh Admin. Admin memilih data
kepanitiaan pada menu mengelola panitia, kemudian memilih tombol delete dan data
kepanitiaan akan terhapus.
Gambar 3.11

32. 25
11. Mengubah kepanitiaan
Admin dapat mengubah data kepanitiaan pada menu mengelola panitia, kemudian
memilih tombol Edit pada data kepanitiaan yang diinginkan. Setelah itu, sistem akan
menampilkan form yang berisikan data kepanitiaan yang akan diubah dan data akan
tersimpan setelah memilih tombol Save.
Gambar 3.12

33. 26
12. Menambah kepanitiaan
Menambah kepanitiaan hanya dapat dilakukan oleh Admin. Admin dapat
menambah kepanitiaan dengan memilih tombol Add pada menu mengelola panitia,
kemudian sistem akan menampilkan form untuk diisi oleh Admin. setelah itu data akan
tersimpan setelah mengklik tombol save.
Gambar 3.13

34. 27
13. Mengelola activity progress
Mengelola activity progress dilakukan oleh Admin pada menu mengelola activity
progress. Sistem akan menampilkan data activity progress jika sudah memiliki activity
progress. Namun jika belum memiliki, maka sistem akan menampilkan pesan “Belum
memiliki activity progress”.
Gambar 3.15

35. 28
14. Melihat activity progress
Activity progress dapat dilihat oleh User dan Admin pada setiap program kerja
yang dipilih. Kemudian memilih tombol activity progress, setelah itu sistem akan
menampilkan data activity progress dan akan menampilkan pesan “Data tidak ada data”
jika tidak ditemukan data activity progress.
Gambar 3.16

36. 29
15. Menghapus activity progress
Admin dapat menghapus data activity progress pada menu mengelola activity
progress. Kemudian memilih tombol Delete, maka data akan terhapus.
Gambar 3.17

37. 30
16. Mengubah activity progress
Admin dapat mengubah data activity progress pada menu mengelola activity
progress, kemudian memilih tombol Edit pada data activity progress yang diinginkan.
Setelah itu, sistem akan menampilkan form yang berisikan data yang akan diubah dan
data akan tersimpan setelah memilih tombol Save.
Gambar 3.18

38. 31
17. Menambah activity progress
Menambah activity progress hanya dapat dilakukan oleh Admin. Admin dapat
menambah data activity progress dengan memilih tombol Add pada menu mengelola
activity progress, kemudian sistem akan menampilkan form untuk diisi oleh Admin.
setelah itu data akan tersimpan setelah mengklik tombol save.
Gambar 3.19

39. 32
Rancangan Struktural
Gambar 3.20

40. 33
Rancangan Behavioral
1. Login
2. Mengelola programkerja
Gambar 3.21
Gambar 3.2

41. 34
3. Mencari programkerja
4. Melihat programkerja
Gambar 3.23
Gambar 3.24

42. 35
5. Menghapus programkerja
6. Mengubah programkerja
Gambar 3.25
Gambar 3.26

43. 36
7. Menambah programkerja
8. Mengelola kepanitiaan
Gambar 3.27
Gambar 3.28

44. 37
9. Melihat kepanitiaan
10. Menghapus kepanitiaan
Gambar 3.29
Gambar 3.30

45. 38
11. Mengubah kepanitiaan
Gambar 3.31

46. 39
12. Menambah kepanitiaan
13. Mengelola activity progress
Gambar 3.32
Gambar 3.33

47. 40
14. Melihat activity progress
15. Menghapus activity progress
Gambar 3.34
Gambar 3.35

48. 41
16. Mengubah activity progress
17. Menambah activity progress
Gambar 3.36
Gambar 3.37

49. 42
Rancangan Antarmuka
1. Tampilan login untuk Admin ketika ingin mengakses seluruh fitur pada sistem dan
tampilan halaman utama pada sistem
Gambar 3.38
Gambar 3.39

50. 43
2. Tampilan mengelola program kerja, dapat menambah, mengubah dan
Menghapus program kerja
Gambar 3.40

51. 44
3. Tampilan mencari program kerja, dengan mengetikkan nama program akan
muncul program kerja yang dicari.
Gambar 3.41

52. 45
4. Melihat data program kerja sesuai dengan kategori yang dipilih pada halaman
utama, setelah itu dapat memilih tombol detail untuk melihat rincian dari program
kerja.
Gambar 3.42

53. 46
5. Tampilan halaman menghapus data program kerja pada halaman mengelola
program kerja
6. Tampilan mengubah programkerja
Gambar 3.43
Gambar 3.44

54. 47
7. Tampilan form menambah programkerja yang baru
8. Tampilan halaman mengelola data panitia programkerja
Gambar 3.45
Gambar
3.46

55. 48
9. Tampilan melihat susunan panitia pada detail programkerja
10. Tampilan menghapus data kepanitiaan
Gambar 3.47
Gambar 3.48

56. 49
11. Tampilan mengubah data kepanitiaan
12. Tampilan menambah data kepanitiaan
Gambar 3.49
Gambar 3.50

57. 50
13.Tampilan mengelola activity progress dapat mengubah, menambah serta
menghapus data activity progress
14. Tampilan melihat activity progress
Gambar 3.51
Gambar 3.52

58. 51
15. Tampilan menghapus activity progress
16. Tampilan mengubah activity progress
Gambar 3.53
Gambar 3.54

59. 52
17. Tampilan menambah activity progress
Gambar 3.55

60. 53
BAB IV
PENUTUP
A. KESIMPULAN
Rancangan yang dibuat sampai tahap design ini menjadi gambaran dari sistem yang akan dibuat
khususnya pada bagian user interface yang dibuat berdasarkan dari requirement awal pembuatan
sistem. Dan menjadi acuan untuk melanjutkan proyek ini ke tahap implementasi dan testing.

61. 1