Laporan Tugas Besar

[Website Konservasi Penanganan Sampah Perairan

Indonesia - KOPI]

Mata Kuliah: Pemrograman Web

Tahun 2022/2023

Oleh Kelompok 1:

1. 1204200125 - Alfinna Damayanti Nugroho

2. 1204200157 - Alfina Ayu Puspitasari
3. 1204200181 - Samawati Nur Rohilah
4. 1204200222 - Dyah Rahmawati Hasan
5. 1204202006 - Aryasita Cahyaning Hervinta
Program Studi S1 Sistem Informasi
Fakultas Teknologi Informasi dan Bisnis

Pemrograman Web | Tugas Besar

1
 Daftar Isi

Bab I 4

Pendahuluan 4
1.1 Latar Belakang 4
1.2 Tujuan 5
1.3 Manfaat 5
1.4 Batasan 5

Bab II 7

Landasan Teori 7
2.1 Pemrograman Web 7
2.2 Software Development Life Cycle 7
2.3 Html 8
2.4 Css 9
2.5 Php 9
2.6 MySQL 10
2.7 Figma 11
2.8 Draw.io 11
2.9 Miro 12
2.10 Visual Studio Code 12
2.11 FireBase 13

Bab III Metode Pengembangan 14

3.1 Berikut merupakan alur pengembangan aplikasi yang kami laksanakan 14

Bab IV 15

Hasil Pengembangan 15
4.1 Desain Perangkat Lunak 15
● Use Case Diagram 15
● Activity Diagram 16
● Storyboard 22
● Mock up 26
4.2 Desain Skema Database 27
● ER Diagram 27
● Tabel Relasi 28
4.3 Fitur Program 30
4.3.1 Registrasi User dan Admin 30
4.3.2 Login dan Logout 31
4.3.3 Desain User Page 32

Pemrograman Web | Tugas Besar

2
 4.3.4 Formulir Relawan 33
4.3.5 Formulir Donasi 33
4.3.6 Desain Admin Page 33
4.3.7 CRUD Data Relawan 35
4.3.8 CRUD Data Donatur 36
4.3.9 CRUD Event/Program 37

Bab V
Kesimpulan dan Saran 38
5.1 Kesimpulan 38
5.2 Saran 38

Lampiran 39

Pemrograman Web | Tugas Besar

3
 Bab I

Pendahuluan

1.1 Latar Belakang

Kenaikan jumlah penduduk serta ekonomi warga secara langsung ataupun
tidak langsung menstimulasi kenaikan kegiatan manusia dalam bermacam bidang.
Pemakaian plastik dalam bermacam aktivitas manusia menimbulkan penciptaan
plastik terus menjadi bertambah. Polusi plastik awal mulanya dilihat selaku
permasalahan estetika, namun banyak riset sepanjang sebagian dekade terakhir
menampilkan terdapatnya kecenderungan menuju pada bahaya kesehatan baik pada
biota laut ataupun manusia. Sampah plastik di laut ialah salah satu polusi serta limbah
yang jadi tantangan global dikala ini.
Sampah plastik telah tersebar luas serta jadi salah satu permasalahan dilihat
dari segi area, ekologi, serta murah. Jumlah sampah diperkirakan hendak terus
bertambah sebesar 10% dari seluruh plastik yang baru dibuat serta hendak dibuang
yang hendak berakhir di laut. Tiap dekade, penciptaan plastik di dunia bertambah 2
kali lipat. Plastik ialah sampah yang sangat banyak ditemui serta tercantum jenis
beresiko di dunia sebab sifatnya yang mempunyai energi apung, energi tahan buat
terurai dalam waktu yang lama.
Sumber utama sampah plastik ini berasal dari aktivitas manusia semacam
kegiatan industri, wisata, perikanan, pelayaran, rumah tangga. Bertambahnya populasi
serta meningkatnya kebutuhan manusia tidak diimbangi dengan pengelolaan sampah
yang mencukupi. Sampah plastik di laut biasanya berasal dari daratan yang terbawa
lewat aliran air (Mursalina d et al,2014) Indonesia selaku negeri yang terletak pada
jalan arus dunia (Ocean Conveyor Belt) dan mempunyai ARLINDO(Arus Lintas
Indonesia) pula berpotensi memperoleh sampah yang berasal dari negeri lain. Pada
keadaan ini, Indonesia dihadapkan pada tantangan menanggulangi sampah plastik
yang berasal dari daratan serta pula dari perairan yang lain.

Pemrograman Web | Tugas Besar

4
 Dalam hal ini, pentingnya kesadaran masyarakat Indonesia terhadap bahaya
yang mengancam biota laut. Website yang akan kami kembangkan, KOPI
(Konservasi Perairan Indonesia) diharap akan memberikan wadah bagi masyarakat
untuk dapat mengetahui masalah laut, menjadi relawan, ataupun berkontribusi pada
kegiatan konservatif lainnya bagi laut kita saat ini dan dampak di masa depan.  

1.2 Tujuan
Tujuan dalam tugas akhir ini yaitu menghasilkan sebuah website konservasi
perairan di wilayah Indonesia yang berfokus pada penanganan sampah di Laut
sehingga banyak masyarakat mulai sadar akan pentingnya menjaga Laut dan
sekitarnya.

1.3 Manfaat
Berikut adalah manfaat dari pembuatan website KOPI antara lain :
1. Memperluas jangkauan informasi.
Adanya website konservasi sampah laut dapat menyebarluaskan informasi
tentang upaya konservasi sampah laut kepada masyarakat luas. Hal Ini dapat
membantu meningkatkan kesadaran masyarakat tentang masalah sampah laut dan
meningkatkan dukungan untuk upaya konservasi.
2. Meningkatkan transparansi.
Adanya website konservasi sampah laut dapat memberikan informasi tentang
kegiatan yang dilakukan, tujuan, dan sumber dana kepada masyarakat.
3. Meningkatkan kemampuan untuk mengumpulkan donasi.
Adanya website konservasi sampah laut dapat menyediakan fasilitas untuk
menerima donasi secara online.

1.4 Batasan

Batasan masalah digunakan untuk memudahkan dan menghindari

penyimpangan serta pelebaran pokok inti bahasan yang akan dibahas. Dengan adanya
Batasan masalah akan mempermudah peneliti mencapai tujuannya, dalam hal ini

Pemrograman Web | Tugas Besar

5
 adalah website yang akan kami kembangkan yakni KOPI (Konservasi Perairan
Indonesia). Beberapa batasan masalah yang terdapat dalam laporan ini adalah sebagai
berikut:

1) Lingkup pembahasan hanya meliputi seputar pencemaran wilayah laut

Indonesia.

2) Informasi yang disajikan yakni penyediaan sebuah wadah bagi masyarakat

untuk dapat mengetahui dan memahami  permasalahan yang terjadi  di sekitar
perairan, sebagai tempat penghubung dan sumber informasi untuk relawan -
relawan perairan maupun platform mengenai kontribusi masyarakat  pada
kegiatan konservatif bagi perairan saat ini serta  dampak di masa depan.  

3) Product yang akan di kembangkan berupa Website.

4) Aplikasi bersifat online, sehingga memerlukan koneksi internet untuk

menggunakannya.

Pemrograman Web | Tugas Besar

6
 Bab II

Landasan Teori

2.1 Pemrograman Web

Menurut Abdulloh (2018:2) Pemograman web dapat diartikan sebagai kegiatan

pembuatan program atau aplikasi berbasis web menggunakan bahasa pemrograman tertentu
sehingga dapat memproses data dan menghasilkan informasi sesuai yang dikehendaki oleh
pemilik website. Pemrograman Web adalah Proses atau Cara untuk menjalankan instruksi
pada sebuah komputer yang terhubung ke internet untuk membuat fungsi atau tugas tertentu,
dalam menjalankan sebuah program di dalam web melalui web browser seperti : mozilla,
Opera, Chrome, dll. Orang banyak mengenal web dengan istilah WWW atau World Wide
Web. World Wide Web adalah halaman - halaman website yang terkoneksi satu dengan lainnya
atau disebut juga dengan hyperlink yang membentuk samudera informasi yang berjalan
dengan protokol HyperText Transfer Protocol (HTTP).

2.2 Software Development Life Cycle

Pada Project ini kelompok kami memakai tata cara SDLC (Aplikasi/ System
Development Life Cycle) dalam meningkatkan suatu aplikasi. Penafsiran dari SDLC
merupakan siklus yang digunakan dalam pembuatan ataupun pengembangan sistem data yang
bertujuan buat menuntaskan permasalahan secara efisien buat menciptakan sistem bermutu
besar yang cocok dengan kemauan pengguna ataupun tujuan dibuatnya sistem tersebut.
SDLC digunakan buat membangun sesuatu sistem data supaya bisa berjalan cocok dengan
apa yang diharapkan.

Peneliti dari Agarwal & Taninru (1990) dengan judul “System Development Life
Cycle for Expert System”, dengan adanya siklus hidup atau life cycle dalam pengembangan
sistem informasi secara tradisional tidak cukup menunjukan untuk menangani persyaratan
sebuah sistem. Life cycle dari sebuah sistem informasi ahli dibangun untuk untuk
menguraikan tugas dan aktivitas yang harus dilakukan pada setiap tahap pengembangan

Pemrograman Web | Tugas Besar

7
sistem. Life cycle menyoroti tentang peran pembangunan sistem alternatif serta pentingnya
karakteristik organisasi dan sosial dalam sistem pemindahan ke penggunaan.

Secara teknis SDLC bisa menolong meminimalkan kerumitan pengembangan fitur

lunak dari dini. SDLC merupakan kerangka kerja dengan serangkaian fase yang menolong
mengganti konsep ilham jadi struktur yang berperan penuh. Salah satu alibi buat
menggunakan SDLC merupakan buat membuat analisis yang pas tentang persyaratan proyek,
tujuan proyek fitur lunak, serta rencana buat memastikan bayaran. SDLC terdiri dari sebagian
sesi yang wajib dilalui dari dini sampai akhir, yang meliputi:

1. Analisis kebutuhan: mengenali kebutuhan sistem yang hendak dibesarkan, tercantum

kebutuhan fungsional serta non- fungsional.
2. Desain sistem: memastikan gimana sistem hendak nampak serta bekerja, tercantum
spesifikasi hardware serta aplikasi yang dibutuhkan.
3. Implementasi: membangun ataupun meningkatkan sistem cocok dengan desain yang
sudah ditetapkan.
4. Testing: menguji sistem buat membenarkan kalau sistem tersebut bekerja dengan
benar cocok dengan kebutuhan yang sudah ditetapkan.
5. Deployment: memasang sistem ke area penciptaan serta mempersiapkan sistem buat
digunakan oleh pengguna akhir.
6. Maintenance: melaksanakan perawatan serta pemeliharaan terhadap sistem yang
sudah diimplementasikan buat membenarkan kalau sistem terus berperan dengan baik
serta cocok dengan kebutuhan pengguna.
SDLC ialah proses yang terus kesekian serta bisa hadapi modifikasi cocok dengan
kebutuhan sistem yang hendak dibesarkan.

2.3 Html

Menurut (Endra & Aprilita, 2018), HTML atau Hypertext Markup Languange
merupakan salah satu bahasa yang biasa digunakan oleh pengguna dalam membuat
tampilan yang digunakan oleh web application. HTML menunjukkan bermacam data
di dalam suatu penjelajah website Internet serta pemformatan hiperteks simpel yang
ditulis dalam berkas format ASCII supaya bisa menciptakan tampilan bentuk yang

Pemrograman Web | Tugas Besar

8
 terintegrasi. Dengan kata lain, berkas yang terbuat dalam fitur lunak pengolah kata
serta ditaruh dalam format ASCII wajar sehingga jadi taman website dengan perintah-
perintah HTML. HTML merupakan suatu standar yang digunakan secara luas buat
menunjukkan taman website. Secara universal, guna HTML merupakan buat
mencerna serangkaian informasi serta data sehingga sesuatu dokumen bisa diakses
serta ditampilkan di Internet lewat layanan website. Guna HTML yang lebih khusus
ialah:

1. Membuat halaman web.

2. Menampilkan berbagai informasi di dalam sebuah browser Internet.
3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

2.4 Css
Menurut (Wahyudi, 2017), CSS adalah suatu Bahasa pemrograman web yang
digunakan untuk mengendalikan dan membangun berbagai komponen dalam web
sehingga tampilan web akan lebih rapi, terstruktur, dan seragam. CSS digunakan
bersama dengan bahasa markup, seperti HTML untuk membangun sebuah website
yang menarik dan memiliki fungsi yang berjalan baik. CSS juga berguna untuk
mengatasi keterbatasan HTML dalam mengatur format halaman website, apabila
hanya menggunakan HTML ketika membangun website dengan beberapa halaman,
Anda harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut.

Adanya CSS, programmer cukup menulis kode satu kali untuk sebuah elemen
HTML untuk diterapkan ke semua halaman. Nantinya, ketika akan melakukan
perubahan, cukup melakukan perubahan pada satu kode tadi. CSS bukanlah bahasa
pemrograman. CSS lebih tepat disebut sebagai bahasa style sheet yang umumnya
digunakan bersamaan dengan JavaScript.

2.5 Php
Menurut Supono & Putratama (2018:1) mengemukakan bahwa PHP
(hypertext preprocessor) adalah suatu bahasa pemrograman yang digunakan untuk
menerjemahkan basis kode program menjadi kode mesin yang dapat dimengerti oleh

Pemrograman Web | Tugas Besar

9
 komputer yang bersifat server-side yang ditambahkan ke HTML. PHP (Hypertext
Preprocessor) adalah sebuah bahasa pemrograman server side scripting yang bersifat
open source. Sebagai sebuah scripting language, PHP menjalankan instruksi
pemrograman saat proses runtime. Hasil dari instruksi tentu akan berbeda tergantung
data yang diproses. PHP merupakan bahasa pemrograman server-side, maka script
dari PHP nantinya akan diproses di server. Jenis server yang sering digunakan
bersama dengan PHP antara lain Apache, Nginx, dan LiteSpeed. Selain itu, PHP juga
merupakan bahasa pemrograman yang bersifat open source. Pengguna bebas
memodifikasi dan mengembangkan sesuai dengan kebutuhan mereka. Berikut
beberapa alasan menggunakan PHP antara lain :

1. Cenderung mudah dipelajari. Dibanding beberapa bahasa pemrograman

populer lain, PHP lebih mudah dipelajari.
2. Materi belajar yang banyak. Banyak sekali dokumentasi, panduan, dan
komunitas aktif di berbagai platform digital.
3. PHP bersifat open-source. Siapapun bisa menggunakan PHP tanpa
mengeluarkan biaya sepeserpun.

2.6 MySQL
Menurut (Agustini, 2017) MySQL adalah multiuser database yang
menggunakan bahasa structured query language (SQL). MySQL merupakan software
yang tergolong sebagai DBMS (Database Management System) yang bersifat open
source. MySQL memiliki fungsi untuk mengelola dan membuat database dari sisi
server yang memuat berbagai informasi dengan menggunakan bahasa SQL. Dalam
data science fungsi lain dari MySQL digunakan untuk melakukan query dataset dalam
jumlah besar agar dapat memudahkan pengguna dalam mengakses dataset tersebut
dalam bentuk string atau teks.

Kelebihan dari MySQL yaitu, Mysql memiliki tingkat fleksibilitas terhadap

teknologi yang akan digunakan sebagai pengembang aplikasi seperti PHP, Java, C++
dan lainnya, bersifat cross platform sehingga ketika melakukan migrasi data antar
sistem menjadi sangat mudah. Selain itu, kelebihan dari MySQL adalah karena open

Pemrograman Web | Tugas Besar

10
 source yang disediakan secara gratis, MySQL mendukung penggunaan untuk multi
user yang dapat digunakan dalam satu waktu yang bersamaan. Struktur tabel MySQL
juga cenderung lebih fleksibel dan mudah digunakan dibandingkan dengan struktur
tabel database yang lain.

2.7 Figma
Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web
serta fitur offline tambahan yang diaktifkan oleh aplikasi desktop. Figma memberi
semua alat yang dibutuhkan untuk fase desain proyek, termasuk alat gambar vektor
yang mampu membuat ilustrasi sepenuhnya, serta kemampuan prototyping (Bracey,
2018). Rangkaian fitur Figma berfokus pada penggunaan dalam antarmuka pengguna
dan desain pengalaman pengguna dengan penekanan pada kolaborasi waktu nyata
(real- time). berikut beberapa fungsi Figma :

● Untuk melakukan prototyping website baik di sisi desktop maupun mobile

● Membuat tampilan UI dan wireframe aplikasi mobile
● Desain untuk postingan di media sosial seperti Facebook, Twitter, Instagram,
Dribble, dan LinkedIn
● Pembuatan mockup desain pada perangkat yang tersedia di template
● Pengeditan gambar dasar
● Membuat desain menjadi video (menggunakan plugin)
● Mendesain dalam satu waktu dan realtime bersama tim secara online

2.8 Draw.io
Menurut Seprida Hanum H. (2018:102), Draw.io adalah sebuah aplikasi open-
source yang berfungsi untuk membangun aplikasi diagram dan merupakan aplikasi
berbasis browser-base paling banyak digunakan di dunia. Aplikasi ini sangat mudah
untuk dipahami jika sebelumnya pernah menggunakan Microsoft Visio. Dengan
tampilan yang simpel dan dengan icon-icon yang banyak menjadi pilihan untuk
menyajikan diagram yang baik untuk pekerjaan sehari-hari. Draw.io dapat disimpan
dalam format HTML dan XML. Selain itu, juga dapat langsung disimpan melalui
media penyimpanan online (Google Drive, Github, Dropbox, OneDrive, Penyimpanan

Pemrograman Web | Tugas Besar

11
 Lokal). Dengan fungsinya yang powerfull sebagai aplikasi gratis. Namun aplikasi ini
memiliki kelemahan, yakni untuk dapat menggunakan aplikasi ini komputer harus
terkoneksi internet untuk dapat mengakses aplikasinya.

2.9 Miro

Miro adalah tool atau aplikasi yang memfasilitasi penggunanya dalam

berkolaborasi untuk membuat kanvas unik yang memuat ide-ide proyek. Miro adalah
tool virtual whiteboard yang memudahkan para penggunanya untuk berkolaborasi
dalam suatu proyek bersama. Jadi, semua anggota tim dapat menggunakan Miro di
waktu yang bersamaan dari manapun mereka berada. Tool ini bersifat cloud-based
dan cocok digunakan oleh bisnis baik kecil maupun besar. Ada banyak cara untuk
menggunakan Miro, seperti untuk riset, menyusun ide, membuat customer journey,
membuat user story map, dan bahkan untuk membuat wireframe. Miro juga bisa
terhubung dengan tool-tool produktivitas lainnya yang sangat penting, seperti
Dropbox, Google Suite, Jira, Slack, dan juga Sketch.

2.10 Visual Studio Code

Visual Studio Code adalah editor source code yang dikembangkan oleh
Microsoft untuk Windows, Linux dan Mac OS. Ini termasuk dukungan untuk
debugging, GIT Control yang disematkan, penyorotan sintaks, penyelesaian kode
cerdas, cuplikan, dan kode refactoring. Hal ini juga dapat disesuaikan, sehingga
pengguna dapat mengubah tema editor, shortcut keyboard, dan preferensi.Visual
Studio Code gratis dan open-source, meskipun unduhan resmi berada di bawah lisensi
proprietary. Kode Visual Studio didasarkan pada Elektron, kerangka kerja yang
digunakan untuk menyebarkan aplikasi Node.js untuk desktop yang berjalan pada
Blink layout. Meskipun menggunakan kerangka Elektron, Visual Studio Code tidak
menggunakan Atom dan menggunakan komponen editor yang sama (diberi kode
nama "Monaco") yang digunakan dalam Visual Studio Team Services yang
sebelumnya disebut Visual Studio Online (Lardinois, 2015) .

Pemrograman Web | Tugas Besar

12
2.11 FireBase
Firebase memiliki produk utama, yaitu menyediakan database realtime dan
backend sebagai layanan (Backend as a Service). Layanan ini menyediakan
pengembang aplikasi API yang memungkinkan aplikasi data yang akan di
sinkronisasi di klien dan disimpan di cloud Firebase ini. Firebase menyediakan library
untuk berbagai client platform yang memungkinkan integrasi dengan Android, iOS,
JavaScript, Java, Objective-C dan Node aplikasi Js dan dapat juga disebut sebagai
layanan DbaaS (Database as a Service) dengan konsep real time. Firebase digunakan
untuk mempermudah dalam penambahan fitur-fitur yang akan dibangun oleh
developer.
Semua data Firebase Realtime Database disimpan sebagai objek JSON. Bisa
dianggap basis data sebagai JSON tree yang di-host di awan. Tidak seperti basis data
SQL, tidak ada tabel atau rekaman. Ketika ditambahkan ke JSON tree, data akan
menjadi simpul dalam struktur JSON yang ada. Meskipun basis data menggunakan
JSON tree, data yang tersimpan dalam basis data bisa diwakili sebagai tipe bawaan
tertentu yang sesuai dengan tipe JSON yang tersedia untuk membantu Anda menulis
lebih banyak kode yang bisa dipertahankan.

Pemrograman Web | Tugas Besar

13
 Bab III Metode Pengembangan

3.1 Metode Pengembangan Sistem

Metode pengembangan sistem adalah kegiatan untuk memperoleh fakta fakta

atau prinsip-prinsip (baik kegiatan untuk penemuan, pengujian atau pengembangan)
dari suatu pengetahuan dengan cara mengumpulkan, mencatat dan menganalisa data
yang dikerjakan secara sistematis. Metode yang digunakan dalam melaksanakan
penelitian merupakan dasar penyusunan rancangan penelitian dan merupakan
penjabaran dari metode ilmiah secara umum. Model tahapan pengembangan sistem
Agile ada pada gambar berikut :

Untuk lebih jelasnya tahapan-tahapan dalam siklus klasik agile terdiri atas
enam tahapan, yaitu :

1. Requirements
Pada langkah ini merupakan tahap pertama dari pengembangan aplikasi yang
sedang kami buat dimana dalam pengembangan perangkat lunak, requirement
yang sudah ada bisa kami rubah atau bertambah ketika proses pengembangan
berjalan. Sehingga kami membuat aplikasi dengan judul KOPI.

Pemrograman Web | Tugas Besar

14
 2. Design
Tahap design ini, kami mulai menentukan design UI/UX untuk aplikasi yang
kami kembangkan seperti merencanakan fitur apa saja yang dibutuhkan dalam
projek kami. Seperti adanya button dashboard, data donatur dan donasi.
3. Development
Langkah selanjutnya yang kelompok kami lakukan adalah memulai proses
pengembangan. Memulai untuk membangun setiap sistem dengan menuliskan
kode program.
4. Testing
Pada tahap ini tim juga akan melakukan pengujian dan evaluasi apabila ada
kesalahan dalam proses coding. Atau memastikan pengembangan aplikasi ini
dapat berjalan dengan baik tanpa bug dan error.
5. Deployment
Langkah selanjutnya yaitu proses yang kami lakukan untuk menjamin kualitas
pada sistem. Jika sistem memenuhi syarat maka perangkat lunak siap di
deployment.
6. Review
Pada tahap terakhir ini tim kami melakukan pengecekan pada sprint goal,
apakah aktivitas yang tim kami lakukan sudah memenuhi definition of done
atau belum.

3.2 Kebutuhan Pengembangan Sistem

Projek ini memerlukan perangkat keras dan perangkat lunak untuk

pengembangan sistem. Adapun perangkat keras dan perangkat lunak yang digunakan
adalah:
1. Perangkat Keras (hardware - laptop/pc)
● Processor IntelCore i3
● Memory 10 GB
● Hard Disk 250 GB

Pemrograman Web | Tugas Besar

15
 2. Perangkat Lunak (software)
● Windows 10/11
● XAMPP (apache webserver)
● Visual Studio Code
● IcloudHost
● MySql (sebagai manajemen basis data)
● Figma

Pemrograman Web | Tugas Besar

16
 Bab IV

Hasil Pengembangan

4.1 Desain Perangkat Lunak

● Use Case Diagram

Pemrograman Web | Tugas Besar

17
 Pada gambar diatas terdapat gambar use case yang memiliki 3 user yaitu
donatur,volunter,dan admin. Pada donatur masuk ke halaman login setelah itu donatur
bisa mengakses halaman utama, setelah mengakses halaman utama donatur
memasukkan data dan menyimpan data lalu masuk untuk melihat content dan contact
setelah itu memberi feedback dan bisa melihat riwayat atau nominal donasi lalu
melakukan logout. Pada volunteer dapat memasukkan data setelah memasukkan data
volunteer mencari data dan menyimpan data setelah menyimpan data volunter dapat
masuk untuk melihat content dan melihat contact setelah itu memberi feedback atau
mengakses program kegiatan lalu melakukan logout. Pada admin masuk ke halaman
utama setelah mengakses halaman utama admin dapat memasukkan data, menghapus
data, mengupdate data dan mencari data setelah mencari data admin menuju untuk
menyimpan data lalu melakukan logout.

● Activity Diagram

● User

Pemrograman Web | Tugas Besar

18
 Pada user activity diagram terdapat volunteer dan donatur. Pertama user melakukan
login lalu sistem memvalidasi permintaan username dan password jika data tidak
valid maka akan menunjukkan error dan kembali ke menu login lagi. Jika valid akan
menampilkan beberapa menu yang dapat diakses oleh user seperti view data, input
data, search data dan logout.

Pemrograman Web | Tugas Besar

19
 ● Admin

Pada user (admin) activity diagram langkah yang pertama user melakukan login lalu
sistem memvalidasi permintaan username dan password jika data tidak valid maka
akan menunjukkan error dan kembali ke menu login lagi. Jika valid akan
menampilkan beberapa menu yang dapat diakses oleh user seperti view data, input
data, search data, update data(dapat melakukan validasi perubahan data), delete data
dan melakukan logout.

Pemrograman Web | Tugas Besar

20
 ● Login

Pada user (admin, donatur, volunteer) login activity diagram yang pertama yaitu tekan
tombol mulai lalu sistem akan menampilkan halaman login, setelah itu user dapat
menginputkan username dan password lalu menekan tombol enter. Jika data tidak
terverifikasi maka akan menampilkan pesan error dan kembali ke halaman login
untuk menginputkan kembali username dan password. Jika data terverifikasi maka
akan menampilkan menu.

Pemrograman Web | Tugas Besar

21
 ● Logout

Pada user (admin, donatur, volunteer) logout activity diagram yang pertama
yaitu tekan profil di sudut kanan lalu sistem akan menampilkan konfirmasi
logout, jika tidak user dapat menekan tombol cancel dan kembali ke halaman
utama. Jika ya maka sesi telah berhenti dan menampilkan landing page.

● Registrasi Donatur

Pada registrasi donatur activity diagram yang pertama yaitu user dapat
menekan menu donasi lalu sistem akan menampilkan menu donasi dan user
dapat menginput data diri pada formulir pendaftaran, jika sistem mengalami
error maka sistem akan menampilkan pesan error dan user kembali

Pemrograman Web | Tugas Besar

22
 menginputkan data diri pada formulir pendaftaran. Jika sistem berhasil maka
akan mendapatkan data dan menampilkan list donasi.

● Registrasi Volunteer

Pada registrasi volunteer activity diagram yang pertama yaitu user dapat
menekan menu volunteer lalu sistem akan menampilkan menu donasi dan user
dapat menginput data diri pada formulir pendaftaran, jika sistem mengalami
error maka sistem akan menampilkan pesan error dan user kembali
menginputkan data diri pada formulir pendaftaran. Jika sistem berhasil maka
akan mendapatkan data dan menampilkan list program.

Pemrograman Web | Tugas Besar

23
 ● Storyboard

1. Gambar 1 :

Perempuan berbaju biru(salsa) terlihat membuang sampah sembarangan di pinggir

pantai, lalu perempuan berbaju pink(lala) mengatakan kepadanya bahwa jangan
membuang sampah di pinggir pantai nanti akan menyebabkan polusi sampah di lautan

Pemrograman Web | Tugas Besar

24
 2. Gambar 2 :
Lalu salsa bertanya kepada lala “apa itu polusi laut?” - kemudian lala menjawab dan
menjelaskan apa itu polusi laut

3. Gambar 3 :
Sari yang melihat keributan dari kejauhan menghampiri mereka, dia memberitahu
salsa kenapa membuang sampah di pinggir pantai itu tidak baik. Salsa kemudian
mengerti

Pemrograman Web | Tugas Besar

25
 4. Gambar 4 :
Kemudian sari memberi tau lebih lanjut mengenai website yang mendukung
konservasi penanganan sampah di indonesia.

5. Gambar 5 :
Lalu tiba tiba joko menghampiri mereka berdua karena mendengar percakapan
tentang website yang familiar dengannya, Joko menjelaskan lebih dalam tentang
KOPI

Pemrograman Web | Tugas Besar

26
 6. Gambar 6 :
Joko menjelaskan apa saja kegiatan yang ada di website KOPI sehingga user juga
dapat turut serta menjadi relawan ataupun donatur untuk membantu kelangsungan
sumber daya laut

Pemrograman Web | Tugas Besar

27
 ● Mock up

Pemrograman Web | Tugas Besar

28
4.2 Desain Skema Database

● ER Diagram

Pada ERD user donasi dan volunteer dapat melakukan register dengan memasukkan
id, nama, email dan password lalu user donatur dapat mengakses form donatur yang
berisi first name, last name, email, phone, contact dan nominal. Jika user volunteer
juga dapat mengakses form volunteer yang berisi first name, last name, email, phone,
contact dan event.

Pemrograman Web | Tugas Besar

29
 ● Tabel Relasi

Terdapat 4 tabel database yang digunakan pada program ini yaitu user_login,
kegiatan, donasi, relawan. User_login akan menyimpan data dari registrasi user maupun
admin dengan struktur (id, nama, email, password, user_type). Kegiatan akan menyimpan
data event atau kegiatan yang ada dengan struktur (id, tipe, kegiatan). Donasi dan relawan
akan menyimpan hasil registrasi formulir donasi dan volunteer user dengan struktur (id, first
& last name, email, phone, nominal, preferred contact, events). User yang terdaftar dalam
user_login akan memiliki akses ke seluruh konten dan kegiatan yang tersedia pada website,
relasi yang ada yaitu 1 to many. Formulir donasi dan relawan juga akan memiliki relasi 1 to
many ke tabel kegiatan karena 1 formulir pendaftaran hanya akan digunakan diseluruh
kegiatan volunteer/donasi sesuai kegiatan yang user pilih.

Pemrograman Web | Tugas Besar

30
4.3 Fitur Program

4.3.1 Melakukan Registrasi User dan Admin

Berikut adalah tampilan akhir dari page registrasi user dan admin, user dan admin
dapat mendaftarkan diri sebagai pengguna baru dengan melengkapi requirements data yang
harus dipenuhi.

Pemrograman Web | Tugas Besar

31
4.3.2 Melakukan Login dan Logout

Berikut adalah tampilan akhir dari page login user dan admin, user dan admin yang
telah melakukan registrasi sebelumnya dapat melakukan proses login dengan memasukkan
email dan password. Pada tampilan kedua yaitu logout, tombol logout berada pada navigasi
bar user dan admin, apabila user menekan tombol logout maka akan di notifikasi oleh alert
konfirmasi apakah user yakin untuk keluar. Terdapat pilihan ok dan cancel pada alert
tersebut, jika ok maka page di navigasi kan ke halaman login.

Pemrograman Web | Tugas Besar

32
4.3.3 Mengakses seluruh halaman User Page

Berikut adalah tampilan akhir dari keseluruhan page user KOPI

Pemrograman Web | Tugas Besar

33
4.3.4 Registrasi Formulir Relawan

Berikut adalah tampilan formulir volunteer yang akan mendaftar kegiatan relawan. Daftar diri
yang harus diisi berupa nama depan, nama belakang, email, nomor hp, kontak pilihan, kegiatan yang
ingin diikuti.

4.3.5 Registrasi Formulir Donasi

Berikut adalah tampilan formulir donasi yang akan mendaftar kegiatan relawan. Daftar diri
yang harus diisi berupa nama depan, nama belakang, email, nomor hp, jumlah donasi, kontak pilihan,
kegiatan yang ingin diikuti.

Pemrograman Web | Tugas Besar

34
4.3.6 CRUD Data Relawan

Create data relawan

Update data relawan

Delete data relawan

Pemrograman Web | Tugas Besar

35
4.3.7 CRUD Data Donatur

Create data donatur

Update data donatur

Delete data donatur

Pemrograman Web | Tugas Besar

36
4.3.8 CRUD Event/Program

Pemrograman Web | Tugas Besar

37
 Bab V
Kesimpulan dan Saran

5.1 Kesimpulan
Berdasarkan uraian pada bab sebelumnya, maka kelompok kami mengambil
kesimpulan mengenai pengembangan website konservasi sampah laut. Layanan dalam
aplikasi web ini yaitu menghasilkan sebuah website konservasi perairan di wilayah Indonesia
yang berfokus pada penanganan sampah di Laut sehingga banyak masyarakat mulai sadar
akan pentingnya menjaga Laut dan sekitarnya. Dalam hal ini, pentingnya kesadaran
masyarakat Indonesia terhadap bahaya yang mengancam biota laut. Website yang akan kami
kembangkan, KOPI (Konservasi Perairan Indonesia). Dengan adanya website ini diharap
akan memberikan wadah bagi masyarakat untuk dapat mengetahui masalah laut, menjadi
relawan, ataupun berkontribusi pada kegiatan konservatif lainnya bagi laut kita saat ini dan
dampak di masa depan.

5.2 Saran
Pada pengembangan website konservasi sampah laut ini masih belum
sempurna sehingga dimasa mendatang diperlukan pengembangan agar website
tersebut dapat digunakan lebih baik lagi. Beberapa hal yang dapat menjadi acuan
dalam mengembangkan website di masa yang akan datang antara lain :
1. Adanya website konservasi sampah laut diharapkan untuk dapat terus
memperluas jangkauan informasi terkait upaya konservasi sampah laut kepada
masyarakat luas. Sehingga dapat membantu meningkatkan kesadaran
masyarakat tentang masalah sampah laut dan meningkatkan dukungan untuk
upaya konservasi.
2. Meningkatkan pelayanan sistem pada website KOPI dengan perbaikan
terhadap kekurangan dari website konservasi sampah laut dan menambah fitur
atau kelengkapan lainnya.

Pemrograman Web | Tugas Besar

38
 Lampiran

Link Website : https://deandoryu.my.id/kopi/

Desain Poster

Pemrograman Web | Tugas Besar

39