APLIKASI MULTI-PLATFORM “TRASH.

LY”
UNTUK PENJEMPUTAN SAMPAH ONLINE

LAPORAN PROJECT WORK

Oleh :
Afista Pramudya Wardhani 4272/1170.063
Hilmi Aziz Bukhori 4356/1254.063
Muhammad Zhorif Fadhlurrohman 4393/1291.063
Nabila Nugraheni 4394/1292.063

GURU PEMBIMBING
Hendra Wahyu Prasetya, S.Kom

YAYASAN PENDIDIKAN TELKOM

SMK TELKOM MALANG
2017
LEMBAR PENGESAHAN
PROJECT WORK
Judul : APLIKASI EDUKASI LOGIKA “GO TUK TUK” MULTI – PLATFORM
MENGGUNAKAN UNITY UNTUK ANAK SEKOLAH DASAR

Oleh : Cahyaningrum Argyanti Wijanarko[1], Candra Kharista Putra[2], Erda Ul’haq

Bagig Dana[3], Nadia Widy Oktaviani[4].

NIS : 4313/1211.070[1], 4337/1235.070[2], 4314/1212.070[3],

4396/1294.070[4]

Telah Diujikan Pada :

Hari :
Tanggal :
Tempat :

Disetujui Oleh Ketua Program Keahlian

Hendra Wahyu Prasetya, S.Kom Hendro Soemarno, S.T.

NIK . 8868178 NIK . 16810042
 BAB I

PENDAHULUAN

1.1 Nama Tim

Foto
<NAMA MEMBER>
<NISN>
<KELAS> / <NO_URUT>
<ROLE>
<EMAIL>
<NO.HP>

Foto <NAMA MEMBER>

<NISN>
<KELAS> / <NO_URUT>
<ROLE>
<EMAIL>
<NO.HP>

Foto
<NAMA MEMBER>
<NISN>
<KELAS> / <NO_URUT>
<ROLE>
<EMAIL>
<NO.HP>

* NIK: Nomor Induk Siswa Nasional

* KELAS: Kelas Saat Ini
* NO_URUT: No Urut Siswa pada Jurnal
* ROLE: Dapat berisikan hustler,hipster,hacker

1.2 GOLDEN CIRCLE

WHY
<Tuliskan tujuan/mimpi besar>

HOW
<Tuliskan bagaimana cara mewujudkan mimpi besar
tersebut>

WHAT
<Tuliskan apa yang akan dibuat atau dilakukan
sehingga mimpi menjadi nyata>
1.3 LEAN CANVAS
PROBLEM SOLUTION UNIQUE VALUE UNFAIR CUSTOMER
Isikan list masalah yang Isikan solusi yang PROPOSITION ADVANTAGE SEGMENTS
dihadapi oleh user. diajukan terhadap Isikan hal yang Isikan keunggulan yang Isikan segmen user
masalah yang membedakan ide Anda sulit ditiru oleh yang akan disasar.
didapatkan. dari pesaing lainnya, hal competitor.
ini menjadikan ide Anda
special.

Existing Solution HIGH LEVEL

Isikan solusi existing CONCEPT Early Adopter
terhadap masalah
Key Metrics CHANNELS
Isikan angka yang Isikan pernyataan Isikan cara menjangkau Isikan list user yang
tersebut. singkat yang akan dijadikan subjek
menjadi target user (baik secara online
pencapaian. menggambarkan ide atau offline). validasi.
Anda.

COST STRUCTURE REVENUE STREAMS

Isikan struktur biaya yang dibutuhkan. Isikan sumber pendapatan.
 BAB II

TEKNOLOGI

2.1 Hypertext Prepocessor (PHP)

PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan
atau disisipkan ke dalam HTML.

2.2 MySQL
MySQL adalah sebuah perangkat lunak sistem manajemen database SQL
(database management system) atau DBMS yang bersifat Open Source.

2.3 Hyper Text Markup Language (HTML)

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web dan menampilkan berbagai
informasi di dalam sebuah browser Internet.

2.4 Cascading Style Sheets (CSS)

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian
instruksi yang menentukan bagiamana suatu text akan tertampil di halaman
web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts
(huruf) , colors (warna), margins (ukuran), background (latar belakang), font
sizes (ukuran font) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts
(huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.

2.5 Bootstrap
Bootstrap adalah front-end framework yang bagus dan luar biasa yang
mengedepankan tampilan untuk mobile device (Handphone, smartphone, dll.)
guna mempercepat dan mempermudah pengembangan website. Bootstrap
menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk
dikembangkan.

2.6 JQuery
 JQuery adalah library Javascript yang dibuat untuk memudahkan
pembuatan website dengan HTML yang berjalan di sisi client. JQuery
diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC oleh John Resig
dan berlisensi ganda di bawah MIT dan GPL.

2.7 JavaScript
JavaScript adalah bahasa pemograman web yang bersifat Client Side
Programming Language.

2.8 Notepad++
Notepad++ adalah program aplikasi pengembang yang berguna untuk
mengedit teks dan skrip kode pemrograman. Software Notepad++ dibuat dan
dikembangkan oleh Tim Notepad++.

2.9 Brackets Editor

Bracket editor adalah code editor yang secara khusus dikembangkan untuk
tujuan web design dan front-end development.
 ` BAB IV
HASIL DAN PEMBAHASAN

4.1 Pembuatan Aplikasi

Dalam pembuatan aplikasi, kegiatan yang perlu dilakukan adalah pembuatan
database dan pembuatan aplikasi website.

4.1.1 Pembuatan Database

Dalam pembuatan aplikasi website diperlukan database yang bertujuan
sebagai penyimpanan data yang dibutuhkan dalam website. Langkah-langkah
pembuatan database adalah :
1. Instal xampp sebagai
2. Membuat nama database sesuai kebutuhan pembuatan database , kami membuat
database dengan nama aqua_fish.sql
3. Setelah membuat database kami membuat beberapa tabel, yaitu:
 Tabel barang, tabel ini berfungsi sebagai isi data seluruh produk yang dijual.
 Tabel barang_kirim, tabel ini berfungsi sebagai isi data produk yang telah dikirim
dari penjual ke pembeli
 Tabel barang_proses, tabel ini berfungsi sebagai isi data produk yang diproses
 Tabel checkout, tabel ini berfungsi sebagai isi data produk yang dipesan oleh
pembeli yang akan dikonfirmasi ke admin.
 Tabel pengiriman, tabel ini berfungsi sebagai isi data user yang memesan ikan
dan sudah dikirimm barangnya
 Tabel pengiriman_penjual, tabel ini berfungsi sebagai isi data produk yang telah
dikirim dari penjual ke pembeli
 Tabel testimoni, tabel ini berfungsi sebagai isi data dari testimoni pembei
terhadap website
 Tabel transaki, tabel ini berfungsi sebagai isi data dari user.
 Tabel usertoko, tabel ini berfungsi sebagai isi data dari user admin, pembeli, dan
penjual

4. Database sudah bisa digunakan.

4.1.2 Pembuatan Aplikasi Website
Dalam pembuatan aplikasi website hal yang perlu dilakukan adalah
sebagai berikut:
1. Menyiapkan Server
Dalam pembuatan aplikasi website diperlukan sebuah server sebagai
penyedia data dari database yaitu MySql Server.
2. Buat Folder didalam direktori xampp/htdocs bernama aquafish
Dalam pembuatan aplikasi website diperlukan file yang terdiri dari seluruh
file yang diperlukan dalam pembuatan website. File-file yang perlu dibuat
dalam folder aquafish adalah :
 checkout.php
Halaman tampilan untuk mengisi form data setelah pembeli memesan barang.
 detail.php
Halaman tampilan dari keranjang pembeli yang berisi barang yang sudah
dipesan.
 detailproduk.php
Halaman tampilan detail dari tiap-tiap produk ikan yang dijual.
 header.php
Halaman tampilan header pada saat user belum melakukan login
 header_log.php
Halaman tampilan header pada saat user sudah melakukan login
 index.php
Halaman tampilan utama dari website AquaFish.
 insert.php
Digunakan untuk menambahkan data checkout pembeli ke tabel
checkout.
 insert_testi.php
Digunakan untuk menambahkan data hasil tertimoni pembeli ke
tabel testimoni
 koneksi.php
Digunakan untuk koneksi dari php ke database.
 logout.php
 Digunakan untuk logout dari halaman website AquaFish.
 produk.php
Halaman yang berisi daftar produk apa saja yang dijual di dalam
website.
 produk_nonlog.php
 register.php
Halaman register user yang ingin membeli barang pada website
Aquafish.
 selesai.php
Halaman untuk pembeli setelah melakukan checkout.
 testimoni.php
Halaman yang berisi seluruh testimoni pembeli terhadap website
AquaFish.
Didalam folder aquafish selain file juga terdapat folder yang diperlukan
untuk pembuatan website, diantaranya adalah :
 Folder admin
 Folder css
 Folder dist
 Folder font-awesome
 Folder gambar
 Folder img
 Folder js
 Folder penjual
1.2 Panduan Penggunaan Aplikasi
 Pada panduan penggunaan ini dibagi menjadi 3 bagian yaitu panduan untuk
user pembeli, panduan untuk user penjual, dan panduan untuk user admin.
Panduan pembeli, pembeli harus mempunyai username dan password sehingga
pembeli bisa melakukan pembelian. Panduan penjual, penjual bisa
menambahkan ikan yang akan diperjualkan dan juga melakukan konfirmasi
pengiriman. Panduan admin, admin bisa mengelola data penjual, pembeli,
produk, transaksi, dan pengiriman barang.

4.2.1 Halaman Awal

Pada halaman awal aplikasi terlihat berbagai macam menu terdiri dari menu
Home, Produk Kami, Testimoni, Keranjang, dan Login. Di sisi tengah terdapat
sebuah poster yang berisi identitas website. Di sisi bawah slider terdapat
tampilan seluruh produk AquaFish. Dan pada bagian bawah terdapat tampilan
footer dari website AquaFish. (Gambar 4.3 Tampilan Awal Website).

Gambar 4.1 Tampilan Awal Website

4.2.2 Menu Login dan Registrasi User

Menu login dan register user berada pada halaman awal aplikasi website yang
berada pada pojok kanan atas. Di dalam menu registrasi user, user wajib
mengisi data yang sudah ditentukan mulai dari email, password, nama, alamat,
jenis user, dan nomer telepon. Setelah mengisi data lengkap user mendapat
username dan password dan bisa login ke website AquaFish. (Gambar 4.4
Tampilan registrasi user dan Gambar 4.5 Tampilan login user).

Gambar 4.2 Tampilan registrasi user

Gambar 4.3 Tampilan login user

4.2.3 Halaman Produk Kami
Pada halaman ini terlihat seluruh produk yang dijual oleh website Aquafish.
(Gambar 4.6 Tampilan Halaman Produk Kami).

Gambar 4.4 Tampilan Halaman Produk Kami

Jika anda telah memilih salah satu dari produk yang berada di halaman awal
website maupun menu Produk Kami, akan ditampilkan sebuah deskripsi dari
produk tersebut, foto produk, dan tombol beli yang nantinya produk yang
sudah dipilih akan masuk ke dalam keranjang. (Gambar 4.7 Tampilan Produk).

Gambar 4.5 Tampilan Halaman Detail Produk

4.2.4 Halaman Detail Keranjang atau Menu Keranjang
Halaman detail keranjang merupakan halaman detail daftar seluruh
produk yang akan dibeli oleh pembeli. Disini pembeli dapat melihat keterangan
seluruh produk, menambah stok produk yang akan dibeli, mengurang stok
produk yang akan dibeli, menghapus produk jika tidak jadi membeli, dan juga
melihat total harga produk yang akan dibeli.

Gambar 4.6 Tampilan Halaman Detail Keranjang

4.2.5 Halaman Checkout

Halaman checkout merupakan langkah terakhir dalam pembelian sebuah
produk di AquaFish, di halaman checkout ditampilkan total belanja pembeli
dan pembeli wajib mengisi seluruh form yang disediakan seperti alamat, kode
pos, kota, dll. (Gambar 4.8 Tampilan Checkout).

Gambar 4.7 Tampilan Halaman Checkout

Setelah pembeli mengisi lengkap seluruh form maka pembeli mengklik
tombol “Simpan Data”. Setelah itu otomatis pembeli akan masuk ke halaman
 selesai yang berisi keterangan cara pembayaran, no. Pemesanan, data lengkap
pembeli, dan total belanja.

Gambar 4.8 Tampilan Halaman Selesai Checkout

4.2.6 Halaman Testimoni

Halaman testimoni merupakan halaman yang berisi testimoni pembeli
terhadap website Aquafish. Disini bila pembeli ingin memberi testimoni maka
harus mengisi form nama, dan testimoni yang akan diberikan. Klik “Kirim” dan
secara otomatis testimoni akan ditambahkan

Gambar 4.9 Tampilan halaman testimoni

1.3 Halaman Admin

Pada aplikasi ini terdapat penjelasan tampilan halaman untuk admin dalam
mengelola data penjual, pembeli, produk, transaksi, dan pengiriman barang.

4.3.1 Halaman Utama Admin

Pada halaman utama admin, disediakan berbagai menu yang terdiri dari menu
data penjual, data pembeli, data produk, data transaksi, data barang kirim, dan
data pengiriman. (Gambar 4.11 Tampilan Halaman Utama Admin).

Gambar 4.10 Tampilan Halaman Utama Admin

4.3.2 Halaman Data Penjual

Pada halaman ini terdapat seluruh data user penjual yang menjual produknya
dalam website Aquafish. (Gambar 4.12 Tampilan Halaman Data Penjual).

Gambar 4.11 Tampilan Halaman Data Penjual

4.3.3 Halaman Data Pembeli
Pada halaman ini terdapat seluruh data user pembeli pada website
Aquafish. (Gambar 4.13 Tampilan Halaman Data Pembeli).

Gambar 4.12 Tampilan Halaman Data Pembeli

4.3.4 Halaman Data Produk

Pada halaman ini terdapat seluruh data produk yang diperjualbelikan
pada website Aquafish. (Gambar 4.14 Tampilan Halaman Data Produk).

Gambar 4.13 Tampilan Halaman Data Produk

4.3.5 Halaman Data Transaksi

Pada halaman ini terdapat seluruh data transaksi pembeli/hasil checkout
pembeli. (Gambar 4.14 Tampilan Halaman Data Transaksi).
 Gambar 4.14 Tampilan Halaman Data Transaksi

4.3.6 Halaman Data Barang Kirim

Pada halaman ini terdapat seluruh data barang yang dikirim ke pembeli.
(Gambar 4.14 Tampilan Halaman Data Barang Kirim).

Gambar 4.15 Tampilan Halaman Data Barang Kirim

4.3.7 Halaman Data Pengiriman

Pada halaman ini terdapat seluruh data pengiriman barang yang sudah
dikirim kepada pembeli . (Gambar 4.14 Tampilan Halaman Data Pengiriman).
 Gambar 4.16 Tampilan Halaman Data Pengiriman

1.4 Halaman Penjual

Pada aplikasi ini terdapat penjelasan tampilan halaman untuk penjual dalam
melakukan input produk yang akan diperjualkan dan juga dalam melakukan
konfirmasi pengiriman.
1.4.1 Halaman Utama Penjual
Pada halaman utama penjual, disediakan berbagai menu yang terdiri dari
menu data pesanan, input produk, dan data pengiriman. (Gambar 4.11 Tampilan
Halaman Utama Penjual).

Gambar 4.17 Tampilan Halaman Utama Penjual

1.4.2 Halaman Data Pesanan

Pada halaman ini terdapat seluruh data pesanan barang dari pembeli
yang sudah dibayar oleh pembeli dan dikonfirmasi oleh admin. Bila penjual
 sudah melakukan pengiriman maka wajib untuk mngklik tombol “Done” dan
data langsung masuk ke data pengiriman.(Gambar 4.14 Tampilan Halaman
Data Pesanan).

Gambar 4.18 Tampilan Halaman Data Pesanan

1.4.3 Halaman Input Produk

Pada halaman ini penjual dapat melakukan input produk nantinya akan
ditampilan pada halam utama website Aquafish. (Gambar 4.14 Tampilan
Halaman Input Produk).

Gambar 4.19 Tampilan Halaman Input Produk

1.4.4 Halaman Data Pengiriman

Pada halaman ini terdapat seluruh data pengiriman barang dari penjual
ke pembeli. (Gambar 4.14 Tampilan Halaman Data Pengiriman).
Gambar 4.20 Tampilan Halaman Data Pengiriman

BAB V
 KESIMPULAN DAN SARAN

2.1 Kesimpulan
Setelah pelaksanaan program project work, maka penulis menyimpulkan bahwa
pembuatan aplikasi pemasaran ikan online “AquaFish” menggunakan bahasa pemrograman
PHP, Javascript, HTML dan CSS, sistem database MySQL, Bootstrap, dan Framework
JQuery. Selain itu pada pembuatan membutuhkan data produk yaitu ikan, data pembeli, data
penjual/peternak, serta data transaksi.

5.2 Saran
Saran yang dapat penulis sampaikan untuk pengembangan aplikasi yang telah dibuat
adalah peningkatan tampilan agar lebih menarik dan penambahan fasilitas dalam
pembayaran, yaitu dengan membuat pembayaran melewati bank terintegrasi dengan aplikasi.