LAPORAN

PRAKTEK KERJA LAPANGAN

Disusun oleh :

ROSALINA WAHYUNINGSIH (16/396295/SV/10508)

PRILIVIA RULI FATMAWATI (16/401051/SV/11555)

RIZKI MAIDA OCTAVIANI S (16/396813/SV/10997)

ILHAM MUHAMMAD ASHAR S (16/401034/SV/11538)

DIPLOMA KOMPUTER DAN SISTEM INFORMASI

SEKOLAH VOKASI

UNIVERSITAS GADJAH MADA

YOGYAKARTA

2018
 DAFTAR ISI

DAFTAR ISI............................................................................................................................... i

BAB I PENDAHULUAN ......................................................................................................... 1

1.1 Profil Perusahaan......................................................................................................... 1

1.2 Latar belakang pemilihan perusahaan sebagai lokasi PKL ......................................... 1

BAB II PERMASALAHAN ..................................................................................................... 3

2. 1 Kegiatan selama PKL ..................................................................................................... 3

2.2 Tugas yang diberikan ....................................................................................................... 3

2.2.1 Analis dan Proyek Manager ...................................................................................... 4

2.2.2 UI/UX Designer ........................................................................................................ 4

2.2.3 Frontend Programmer ............................................................................................... 4

2.2.4 Backend Programmer................................................................................................ 5

BAB III METODE PENYELESAIAN ..................................................................................... 6

BAB IV HASIL DAN PEMBAHASAN ................................................................................ 12

4.1 Analisis Kebutuhan ........................................................................................................ 14

4.2 Fitur pada Web Ecommerce........................................................................................... 15

4.3 Alur proses utama web ecommerce ............................................................................... 16

4.4 Tampilan dari sisi admin................................................................................................ 19

4.5 Tampilan UI/UX Web Ecommerce ............................................................................... 22

4.6 Penjelasan Source Code Frontend ................................................................................. 32

4.7 Penjelasan Source Code Backend ............................................................................. 42

BAB V KESIMPULAN DAN SARAN ................................................................................. 47

5.1 Kesimpulan pelaksanaan PKL ....................................................................................... 47

5.2 Hal yang dapat dikembangkan di tempat PKL .............................................................. 47

5.3 Saran untuk KOMSI ...................................................................................................... 47

i
 BAB I
PENDAHULUAN

1.1 Profil Perusahaan

Jogjaland.net merupakan sebuah CV startup software house yang berdiri kurang lebih
dua tahun lalu, belokasi di Maguwoharjo, dan telah memiliki client serta menghasilkan
beberapa project, salah satunya adalah indotravelgo, memegang server kompas jogjakarta, dan
lain sebagainya.
Jogjaland.net dapat membantu menyukseskan beberapa event/kegiatan dengan menjadi
Media Partner yang kemudian akan mempromosikan event/kegiatan tersebut.

1.2 Latar belakang pemilihan perusahaan sebagai lokasi PKL

Kelompok kami beberapa kali melakukan test di tempat opsi pertama namun terdapat
kendala seperti hanya beberapa individu yang diterima sehingga kelompok kami terpecah
menjadi dua tim ditempat berbeda. Kemudian kelompok kami mencari dan mendapat informasi
tentang CV Jogjaland dari kelompok lain, bahwa Jogjaland merupakan sebuah software house
yang cukup menarik dan masih menerima peluang untuk mahasiswa melakukan PKL maupun
internship, sehingga kami memutuskan dan mencoba hingga mendapat kepercayaan untuk
mengerjakan proyek dari Jogjaland.
Hampir di beberapa tahun belakangan hingga sekarang, kemunculan start-up kian
marak dan menjamur di mana-mana, utamanya di daerah Yogyakarta. Banyak orang mulai
berlomba untuk membangun sebuah perusahaan kecil dengan menawarkan solusi
permasalahan yang mereka angkat lalu menyajikannya kepada masyarakat. Salah satu nya
adalah software house.
Perkembangan IT yang kian pesat membuat kebutuhan akan sistem digital juga semakin
banyak. Sehingga tidak heran jika bermunculan banyak software house untuk menopang

1
demand yang ada. Salah satu diantaranya Jogjaland. Berdiri dalam usia yang relatif muda yaitu
2 tahun, membuat kami tertarik untuk turut serta menjadi bagian dari perkembangan Jogjaland.
Merasakan iklim bekerja di sebuah start-up, belajar dari para karyawan dan mendengar
pengalaman mereka menjadi beberapa pertimbangan kami untuk mau menerima tawaran kerja
magang atau PKL di Jogjaland.
Harapan kami ketika mulai bergabung untuk mengerjakan project PKL bersama
Jogjaland adalah mendapatkan ilmu-ilmu baru yang belum pernah kami jumpai di perkuliahan
dan dapat membantu mendorong prospek pekerjaan kami di masa depan.

2
 BAB II
PERMASALAHAN

2. 1 Kegiatan selama PKL

Kelompok kami melaksanakan PKL pada tanggal 25 Juni 2018 hingga 16 Agustus
2018. Selama di tempat PKL kami melakukan berbagai kegiatan seperti diskusi bersama
mengenai projek yang akan diberikan. Kelompok kami mendapat tugas untuk membuat suatu
proyek web ecommerce tentang sebuah toko online yang nantinya sistem akan dikelola oleh
pihak ketiga, yaitu client dari Jogjaland.
Project ini dikerjakan oleh tiga orang anggota kelompok PKL yaitu Rosalina, Prilivia,
Rizki Maida, ditambah satu anggota dari kelompok PKL lain yang bernama Ilham.
Penambahan anggota ini dilakukan karena kurangnya personel dalam tim yang bertugas
sebagai backend. Walau demikian, supervisor kami (Misbah) membelikan sistem yaitu berupa
admin panel laravel dan backend aplikasi androidnya yang memudahkan kami untuk menyusun
backend sistem berbasis web. Kami menerima beberapa masukan dan saran untuk memulai
proyek tersebut, terutama oleh Mas Berly Kurniawan selaku analis dari Jogjaland.
Hal pertama yang kami lakukan adalah melakukan survey mengenai beberapa web
ecommerce yang ada di Indonesia maupun luar negeri, baik dari segi tampilan atau alur sistem.
Setelah survey dilakukan, kami mulai untuk membagi tugas dan menetapkan timeline yang
relevan dengan kemampuan setiap anggota tim. Kami belajar secara mandiri dan bertanya
kepada tim Jogjaland jika kami mengalami kesulitan. Setelah beberapa rancangan dilakukan,
kami mulai mengerjakan tugas masing-masing, namun tidak lepas dari diskusi dan saling
membantu pengerjaan tugas satu sama lain.

2.2 Tugas yang diberikan

Supervisor membagi anggota kami untuk mengambil posisi analis, UI designer,
frontend programmer, dan backend programmer. Hasil dari diskusi yang telah dilakukan,
ditetapkan:
- Rosalina Wahyuningsih : Analis, project manager
- Rizki Maida O S : bertanggung jawab dalam desain mock-up
- Prillivia Ruli Fatmawati : bertanggung jawab dalam pengembangan frontend
- Ilham Muhammad Ashar : mengembangkan backend dari sistem yang ada untuk
disesuaikan dengan web ecommerce yang kami buat.

3
2.2.1 Analis dan Proyek Manager
Tugasnya adalah merancang dan menentukan business rule, menentukan kebutuhan
sistem/web ecommerce yang akan dikerjakan oleh tim, membuat timeline dengan
mempertimbangkan kemampuan tim, membagi jobdesc untuk masing masing anggota,
melengkapi dokumen analis yang biasa digunakan analis Jogjaland, membuat flowchart untuk
kejelasan alur sistem yang akan menjadi patokan ketika pengembangan, memantau progres tim
dengan membuat trelo, dan hasil progres tiap minggunya akan dipresentasikan maupun
dikonsultasikan kepada Supervisor maupun tim Jogjaland, dan juga membuat proposal untuk
diberikan kepada client pihak ketiga.

2.2.2 UI/UX Designer

UI/UX Designer memiliki tugas untuk merancang tampilan web ecommerce dengan
tetap memperhatikan experience atau pengalaman pengguna dalam menggunakan web
tersebut. Hal yang dilakukan adalah menetapkan peletakan, ukuran, dan warna dari suatu objek
agar setiap fungsi dalam web ecommerce dapat dijalankan dengan nyaman serta tidak
membingungkan pengguna. Setelah rancangan tampilan selesai dibuat maka frontend dapat
langsung mengeksekusinya.

2.2.3 Frontend Programmer

Frontend programmer bertugas untuk membuat versi program dari tampilan website
dengan melakukan riset, analisa, pengumpulan aset dan pemilihan library, tools, guna proses
pengembangan web. Frontend programmer bertanggung jawab untuk menghasilkan tampilan
web yang sesuai dengan design UI serta memvisualisasikan UX sesuai dengan analisis yang
telah dibuat sebelumnya.
Proses pengembangan frontend website ini dilakukan langsung di dalam sistem admin panel
yang menggunakan framework PHP Laravel sehingga begitu beberapa template blade selesai,
backend dapat langsung mulai menjalankan tugasnya untuk mengintegrasikan frontend website
dengan sistem dan database.

4
2.2.4 Backend Programmer
Sebagai Backend Programmer bertugas mempelajari dan membuat source code Admin
LTE, Bekeja sama dengan Frontend Developer untuk menyelaraskan fitur fitur sesuai
kebutuhan client, Integrasi sisi Backend dan Frontend
Setiap progres dipresentasikan di hari jumat namun ketika Supervisor sedang di luar
kota maka kelompok kami di remote sehingga progres cukup submit laporan via Whatsapp,
dan data diupload pada Trello dan Gitlab.

5
 BAB III
METODE PENYELESAIAN

1. Project Manager dan Analis

a. Membuat perkiraan pengerjaan proyek yang sesuai dengan kemampuan tim, dengan
mengaplikasi ilmu dari matakuliah Rekayasa Perangkat Lunak dan Sistem
Informasi
b. Membuat rancangan analisis mengenai business rule, mendata kebutuhan sistem
secara fungsional dan non fungsional, membuat flowchart sebagai alur utama dari
sistem yang dibangun menggunakan tools seperti Dia Portable ( mengaplikasikan
ilmu dari matakuliah Rekayasa Perangkat Lunak dan Basis Data).
c. Membuat rancangan informasi apa saja yang ditampilkan pada tiap halaman, dan
input data sesuai database yang ada, sehingga memudahkan UI Designer dan
Programmer untuk membuat sistem tersebut ( mengaplikasikan ilmu dari mata
kuliah Rekayasa Perangkat Lunak dan Perancangan Antarmuka Pengguna).
d. Membuat laporan perancangan, membuat Proposal Ecommerce untuk dilaporkan
kepada supervisor untuk diberikan kepada client pihak ketiga yang akan
menggunakan sistem (mengaplikasikan mata kuliah Pengantar Teknologi
Informasi, Rekayasa Perangkat Lunak, Sistem Informasi).
e. Melakukan pengecekan, memantau kinerja tim, melaporkan progres pengerjaan tiap
bagian, melakukan koordinasi dengan menggunakan tools seperti Trello dan Gitlab.
Yang nantinya akan disampaikan dengan presentasi maupun konsultasi kepada
Supervisor setiap hari Jumat (mengaplikasikan mata kuliah Sistem Informasi).
f. Mencatat kritik, saran, dan masukan dari hasil presentasi kepada supervisor,
kemudian mengarahkan tim untuk melakukan perbaikan seperti masukan terkait
desain yang baik dan benar guna membuat sistem menjadi lebih baik lagi
(mengaplikasikan mata kuliah Rekayasa Perangkat Lunak dan Sistem Informasi).

2. Desain UI/UX
a. Menentukan warna dasar yang akan digunakan
Setelah diskusi bersama anggota tim, didapatkan warna orange sebagai warna dasar
dengan kombinasi warna biru. Warna ini dipilih karena memiliki kesan hangat yang

6
 membuat user menikmati setiap experience yang ada ketika membuka web
ecommerce yang kami kembangkan. Warna biru tua dipilih sebagai perpaduan,
karena cocok jika dikombinasikan dengan warna orange, selain itu warna biru tua
juga lebih mencolok dari warna orange, sehingga cocok dijadikan sebagai warna
tombol atau icon penting. Untuk tulisan yang bersifat penting kami menggunakan
warna merah.
b. Membuat logo
Membuat logo dalam versi grafis menggunakan corel draw setelah rancangan logo
selesai dibuat.
c. Mencari referensi web jual beli lainnya
Dalam menentukan desain, hal yang dilakukan adalah melakukan analis terhadap
web jual beli yang ada untuk melihat desain yang mereka gunakan dan menganalisis
kekurangan dan kelebihan desain tersebut. Serta menentukan mana yang sebaiknya
diadopsi dan mana yang tidak.
d. Membuat wireframe
Untuk memudahkan dalam
brainstroming, perlu dilakukan
pembuatan wireframe terlebih dahulu
untuk mengetahui gambaran umum
sistem, seperti menentukan tata letak
dan fitur apa saja dalam suatu halaman
tertentu.

7
 e. Membuat desain menggunakan figma
Kami memilih merancang desain menggunakan figma karena figma dapat diakses
secara online yang memungkinkan kita untuk bekerja bersama-sama dalam waktu
yang bersamaan. Selain itu fitur yang dimiliki figma tidak sulit untuk dipelajari.

3. Frontend
a. Persiapan Environment
1) Penggunaan Framework dan peletakan route
Developing frontend dari website Beliaja dilakukan dengan menggunakan
framework Laravel versi 5.4.36 (versi Laravel yang sama dengan versi Laravel
dari template admin panel yang telah disediakan).
Dalam proses developing, route untuk halaman murni frontend (belum
digabung dengan sistem backend) diletakkan dalam path
http://localhost/beliaja-pkl-ugm/master untuk halaman utama/homepage dan
http://localhost/beliaja-pkl-ugm/master/[...] untuk halaman yang lain.
2) Analisis dan penggunaan asset pendukung
Proses styling dari website Beliaja dibuat dengan memanfaatkan librari CSS
Bootstrap versi 4.1.1. Bootstrap dipilih karena model style dari Bootstrap sesuai
dengan konsep design dari mock-up yang sudah dibuat sebelumnya.
Website Beliaja juga menggunakan plugin swiper.js untuk bagian slider yang
dipasang pada halaman utama (section banner, hot item, dan deals). Swiper.js
dipilih karena kemudahan dalam kustomisasi, terdapat beberapa varian slider,
sudah mendukung flexbox dan grid, serta dapat digunakan secara gratis.
Untuk beberapa icon-icon dalam Beliaja diambil dari fontawesome.com dengan
versi yang digunakan adalah versi 5.1.1. Fontawesome dipilih karena
kepraktisan pengunaan serta varian font icon yang cukup memadai dengan
status free.
Aset font yang digunakan adalah Roboto dan Reem Kufi yang diambil dari
Google Fonts dengan metode embed dan kustomisasi yang sudah disesuaikan
dengan kebutuhan karena pertimbangan kecepatan load dari website.
Logo dan gambar-gambar background pendukung turut dipersiapkan dan
diletakkan dalam folder tersendiri.
b. Proses Pengerjaan Frontend
1) Penggunaan Git sebagai version control dan kerja bersama developer lain
8
 Setiap tahapan proses pekerjaan didokumentasikan menggunakan commit di
dalam Git. Karena pengerjaan website beliaja juga dilakukan bersama developer
frontend lain sehingga dengan menggunakan Git, developer-developer dapat
memanfaatkan fitur branching di dalam Git guna kepraktisan dan kerapian
kerja.
2) Penggunaan teknologi SASS (Syntactically Awesome Style Sheets) dan
SMACSS (Scalable and Modular Architecture for CSS)
Dengan memperhatikan keefisienan pekerjaan, di bagian styling CSS, kami
memanfaatkan teknologi SASS yang mana dapat mempercepat pembuatan style
guide dari web dengan memanfaatkan preprocessing, variabel, mixin, nesting,
import, dan operators dalam SASS.
Proses developing dari CSS yang ada menggunakan metode SMACSS yang
merupakan framework CSS yang dikembangkan oleh Jonathan Snook. Dengan
SMACSS maka style guide CSS dipisah dalam beberapa folder tersendiri.

Gambar susunan folder SCSS

Folder base berisi style default untuk bagian umum seperti html, head, body, etc
(terletak dalam file _reset.scss) serta pengaturan font secara umum (terletak
dalam file _font.scss). Folder helpers berisi mixins yang digunakan. Folder
layout berisi pengaturan letak dan layouting dari web. Folder theme berisi
pengaturan warna, shadow, dan komponen-komponen artistik dari style.
3) Penggunaan tools
Beberapa tools yang digunakan dalam proses developing frontend meliputi
Visual Studio Code sebagai teks editor, Chrome dan Mozilla sebagai Web View
dan Tester, Cmder untuk command line git dan compile scss.

4. Backend
a. Persiapan Environment
1) Instalasi Admin Panel
Salah satu sisi yang paling penting dalam pembuatan website e-commerce
Beliaja adalah Admin Panel. Dalam proyek ini telah disediakan Admin
Panel yang menggunakan basis Framework Laravel versi 5.4.36. Admin

9
 Panel ini telah dilengkapi berbagai fitur sesuai dengan kebutuhan serta
Admin Panel ini telah terhubung ke dalam Andorid Mobile dan belum
terhubung kedalam sisi Web. Didalam tahap instalasinya Admin Panel ini
kami instal di komputer lokal C:\xampp\htdocs\beliaja-pkl-ugm. Untuk
dapat mengakses Admin Panel ini dapat kita akses menggunakan alamat :
http://localhost/beliaja-pkl-ugm/admin/login

Gb. Login Admin

Gb. Dashboard Admin Panel

2) Instalasi Database
Proses penyimpanan segala data asset pada Admin Panel berada pada
Database, Data disimpan secara sistematis yang nantinya dapat dioleh atau
dimanipulasi untuk nantinya dapat menghasilkan informasi. Database ini
kami instal pada Komputer lokal, sehingga dapat memudahkan mengubah
data tanpa harus terhubung kedalam jaringan terlebih dahulu.

10
 Gb. Database Beliaja
b. Proses Pengerjaan Backend
1) Penggunaan Git
Pekerjaan sebagai Backend tidak lepas dengan adanya campur tangan oleh
Frontend Developer, maka dari itu diperlukan adanya kesetaraan
dokumentasi sehingga dapat memudahkan team dalam bekerja. Adanya Git
dapat membantu setiap anggota team dapat menulis kode programnya
masing masing yang kemudian digabungkan kedalam VCS (Version
Control System) yang digunakan.
2) Penggunaan Tools
Tool dalam proses pengerjaan Backend melipui Atom Text editor, Chrome
sebagai Web serta Pengujian, dan Git Bash sebagai Command Line

11
 BAB IV
HASIL DAN PEMBAHASAN

Hasil kegiatan dari awal tahap perkiraan timeline, melakukan analisis menentukan bussines
rule flow hingga membuat tampilan mockup dibuat menjadi proposal yang akan diberikan
kepada client.
Pembuatan timeline yang disesuaikan dengan kemampuan tim. Diusahakan sudah sesuai
namun pada kenyataannya saat eksekusi terkadang banyak yang melebihi batas timeline yang
diberikan, karena ternyata eksekusinya diluar dugaan, sehingga kami membutuhkan waktu
untuk mempelajari sendiri, atau menunggu konsultasi untuk kemudian baru melakukan
pemecahan masalah.

12
Flowchart yang dipresentasikan kepada supervisor, sebagai gambaran utama sistem yang akan
dibangun.

13
4.1 Analisis Kebutuhan
1. Informasi pada bagian header aplikasi
a. Terdapat logo ecommerce
b. Button untuk memilih kategori dalam bentuk menu drop down untuk memilih
produk, diurutkan berdasar kategori yang banyak diminati diletakkan diurutan atas
c. Kolom search untuk proses pencarian, dimana dibawah kolom search terdapat kata
sugestion bisa langsung di klik
d. Icon keranjang untuk menyimpan produk yang akan diorder sebelum melanjutkan
ke proses pembayaran
e. Icon love untuk menyimpan wishlist, tidak bisa menyimpan ketika belum login atau
akan diarahkan ke halaman login dan register untuk dapat menyimpan/menyukai
produk
f. Menu utama untuk Login dan Register
g. Icon notifikasi jika user sudah masuk ke dalam sistem/aplikasi ecommerce
h. Navbar menu My account untuk melihat/setting profil, kupon, menu
pembelian,bantuan(faq/qna), logout.
2. Informasi pada bagian body/content
a. Banner berisi iklan atau promo
b. Informasi produk persection yang didapat dari hasil survei analis dan diurutkan
berdasarkan yang paling sering sering dicari
c. Kategori Hot Items dimana terdapat list produk yang banyak diminati/dibeli
d. Top Deals dimana berisi produk yang ada promo/potongan harga
e. Fashion Trends berisi list produk yang trendi
f. Beauty care berisi list produk tentang produk kecantikan/perawatan tubuh
g. Advanced Technology berisi list produk teknologi seperti barang elektronik
h. Furniture kategori berisi list produk tentang perabotan, mebel, dll
i. Section Category dimana akan menampilkan list produk
j. Menu untuk register, ketika user belum register/login tetapi sudah melihat produk
section di web kami, kemudian dimudahkan dengan adanya button register
k. Menu berita dimana berisi kumpulan berita mengenai produk kami
l. Terdapat informasi sekilas tentang kelebihan/produk service dari aplikasi
ecommerce
3. Pada bagian footer
Berisi informasi about us, kontak, alamat dari ecommerce kami
14
4.2 Fitur pada Web Ecommerce
1. User dapat melakukan pencarian produk melalui kategori drop down antara lain
• Fashion Wanita
• Fashion Pria
• Perawatan Kecantikan
• Handphone
• Elektronik
• Komputer
• Hobi/olahraga
• Furniture
• Rumah tangga
• Fashion anak
Dimana tiap kategori bisa memiliki sub kategori, dimana sub kategori memiliki list
produk
2. Pada halaman list produk, tiap produk terdapat fitur untuk quick review yang berisi
deskripsi singkat yang akan memudahkan user, juga bisa melihat detail / deskripsi
produk beserta infomasi lainnya.
3. Setelah melakukan pencarian, juga dapat melakukan sorting berdasarkan terlaris,
termahal, termurah. Filter berdasarkan warna, size, length, waist dimana akan
disesuaikan produk yang dicari semisal produk handphone maka akan muncul filter
merk, dll.
4. Dapat menambah produk ke cart tanpa harus login terlebih dahulu, namun ketika ingin
menyimpan di wishlist atau ingin melanjutkan ke proses pembayaran maka sebelumnya
harus diarahkan ke halaman login/register.
5. Pada navbar terdapat fitur bantuan/panduan tentang penggunaan ecommerce
6. Terdapat fitur chat dengan admin mengenai produk yang dicari, user dapat melakukan
chat dengan penjual ketika sudah login ke aplikasi, jika belum maka akan diarahkan
untuk login terlebih dahulu. Fitur chat dapat dilakukan baik di homepage maupun pada
halaman deskripsi/detail produk.
7. Fitur untuk melengkapi profil
8. Pada halaman cart dapat melakukan pembayaran sekaligus/lebih dari dua produk dalam
waktu order yang bersamaan

15
 9. Pada halaman cart dapat melakukan pemindahan produk ke halaman wishlist jika
produk pada cart tidak ingin dilanjutkan untuk pembayaran.
10. Fitur keluhan untuk memberi masukan/kritikan kepada admin tentang barang yang
telah dibeli jika ada masalah.

4.3 Alur proses utama web ecommerce

1. User membuka aplikasi eCommerce
2. User dapat melihat produk yang dipajang oleh admin, tanpa harus mendaftar atau login
terlebih dulu.
3. User juga dapat melakukan register jika belum terdaftar, atau login ke aplikasi
ecommerce sejak awal berada di menu homepage first launch.
4. User dapat melihat banner yang berisi promo/ iklan dalam bentuk banner statis maupun
dinamis
5. User dapat menggunakan menu search untuk memudahkan pencarian produk, terdapat
history pencarian, dan sugestion
6. User dapat melakukan pencarian melalui menu drop down kategori
7. User setelah melakukan search dapat melakukan sorting berdasar harga termahal
termurah, terlaris.
8. Setelah melakukan search juga dapat melakukan filter berdasarkan warna atau ukuran,
maka akan muncul produknya.
9. User dapat melihat list produk, setiap produk berisi gambar produk, harga(harga awal,
harga setelah diskon),rating produk dari user yang pernah melakukan order.
10. User dapat melihat quick review ataupun deskripsi lengkap dari produk tersebut.
11. User dapat menyimpan produk yang diincar dengan cara mengklik ikon love otomatis
akan ditambahkan pada daftar wishlist, namun jika user dalam kondisi belum masuk ke
aplikasi maka akan diarahkan ke halaman login/register jika belum terdaftar.
Tampilan ketika sudah masuk ke aplikasi.
12. User dapat melihat deskripsi produk detail dengan cara klik pada arena produk yang
diinginkan maka dialihkan pada halaman deskripsi produk yaitu berisi tentang
informasi detail dari produk seperti ukuran panjang lebarnya berapa, ketersediaan
produk, warna yang ada, terjual berapa, dilihat oleh berapa akun user, komentar/ulasan
dari user yang pernah order, total rating.

16
13. User dapat melakukan chat dengan penjual ketika sudah login ke aplikasi, apabila user
belum login pada tampilan homepage selalu terdapat menu chat dipojok bawah, namun
jika belum login maka user akan diarahkan ke halaman untuk login/register, barulah
user dapat menggunakan fitur chat untuk menanyakan produk yang dipajang oleh
admin.
14. User dapat melakukan pembelian dengan cara klik add to chart pada halaman deskripsi
produk.
15. Setelah melakukan add to cart produk pada halaman diskripsi produk maka akan
muncul popup berisi informasi bahwa barang dengan jenis/ukuran tersebut sudah
dimasukkan ke cart, kemudian ada opsi button untuk lihat troli atau langsung proses
payment.
Jika popup diclose maka user tetap berada di halaman sebelumnya yaitu deskripsi
produk digunakan untuk mengatasi apabila user ingin membeli barang yang sama
dengan warna/ukuran berbeda dalam waktu yang bersamaan, maka list barang akan
muncul dalam bentuk row berbeda pada cart/troli.
16. Setelah masuk ke keranjang maka user dapat melihat produk apa saja yang pernah
ditambahkan, bisa memilih beberapa produk atau ceklis semua produk untuk
dilanjutkan ke pembayaran.
17. User dapat memindahkan produk dari cart ke wishlist jika barang tidak ingin
dilanjutkan ke proses pembayaran, juga tidak memungkinkan barang disimpan pada
wishlist.
18. Kondisi jika user sudah masuk ke cart namun belum login ke sistem/aplikasi
ecommerce, untuk dapat melanjutkan ke proses pembayaran maka user akan diarahkan
ke halaman login/register
19. Setelah berhasil login maka user akan tetap berada pada halaman cart untuk kemudian
melanjutkan ke pembayaran
20. Melengkapi informasi pengiriman, berisi total biaya dari produk yang ingin dibeli,
kemudian user diminta untuk melengkapi informasi seperti nama user, alamat
pengiriman ( bisa memakai default alamat ataupun menambahkan satu alamat
baru/alamat lain) dengan melengkapi/memilih lokasi seperti Indonesia, memilih
provinsi, memilih kota, memilih kecamatan, mengisi alamat detailnya, Ok. Jika di klik
simpan, maka akan kembali ke halaman “Beli” (melengkapi informasi pengiriman)
21. Pada halaman informasi pengirimana juga user memilih Metode shipping seperti Free
Shipping, Local Pickup, Flat Rate, UPS Shipping. Maka akan muncul biaya ongkos
17
 kirim jika ada, terdapat biaya total yang harus dibayarkan, kemudian button untuk
melanjutkan
22. Proses pembayaran, memilih metode pembayaran seperti Paypal, Doku, Credit card,
transfer ATM. Terdapat histori pilihan metode pembayaran jika sebelumnya pernah
melakukan pembayaran produk.
23. Terdapat infromasi tata cara pembayaran, kemudian deadline batas waktu pembayaran,
jika tidak dipenuhi otomatis transaksi dibatalkan.
24. Terdapat button menu untuk melihat status pembayaran, maka dialihkan ke menu
Pembelian, dimana didalamnya terdapat beberapa sub menu
25. Sub menu status pembayaran jika user belum melakukan pembayaran/pembayaran
belum divalidasi admin, di halaman pembelian sub menu status pembayaran berisi
informasi mengenai tanggal order, nominal, sumber pembayaran, tujuan pembayaran,
aksi untu melihat cara pembayaran, mengunggah bukti transfer untuk divalidasi, ubah
data pembayaran,dan aksi untuk membatalkan transaksi.
26. Sub menu status pemesanan berisi informasi mengenai produk yang telah dilakukan
pembayaran, namun produk masih berada pada admin/ pada kurir, proses pengiriman
oleh kurir, hingga proses ke tujuan alamat user.
27. Sub menu konfirmasi penerimaan untuk user melakukan konfirmasi kepada admin jika
barang telah sampai di tujuan. Akan hilang jika telah dilakukan konfirmasi
28. Sub menu transaksi untuk melihat daftar transaksi yang berhasil, atau pernah
dibatalkan.
29. Pada halaman pembelian sub menu transaksi jika terdapat history transaksi yang
dibatalkan dapat dilanjutkan lagi/pemesanan ulang, jika melakukan pemesanan ulang
maka akan dikembalikan/diarahkan ke halaman proses untuk pemilihan metode
pembayaran, untuk selanjutnya memilih metode pembayaran, hingga berhasil.

18
4.4 Tampilan dari sisi admin

Form Login Admin

Form Dashboard Admin

19
 Form Product

Form Categories

20
Form Data

21
4.5 Tampilan UI/UX Web Ecommerce
1. Homepage
Desain homepage dibagi menjadi dua, yaitu ketika user melakukan login dan ketika
belum login. Selain itu desain homepage ketika web ecommerce kali pertama rilis akan
berbeda pula, menyesuaikan berdasarkan kategori yang bisa ditampilkan. Misalnya
untuk kali pertama rilis maka belum didapatkan produk “Top Seller” atau “Most Liked”

Gambar homepage sebelum login Gambar homepage setelah login

22
 Jika web ecommerce sudah berjalan maka tampilan kategori utama di homepage
adalah:

Gambar logo “Beliaja”

Gambar sub homepage waktu panjang

2. Login dan Register

Gambar halaman register

23
 Gambar halaman login

3. My Account

Gambar header setelah login

4. Dropdown kategori

Gambar dropdown kategori

24
5. List Product
Ketika user melakukan klik pada kategori tertentu maka akan keluar tampilan dengan
format berikut:

6. Quick Preview
Ketika user menyorot produk maka akan keluar tombol untuk melakukan quick preview
:

25
7. Detail Produk

26
8. Beli
Ketika user ingin membeli produk maka akan melakukan klik pada tombol “beli”

9. Keranjang Belanja

10. Mengisi alamat

27
11. Menambah alamat baru

12. Ringkasan Pemesanan

13. Pembayaran

28
14. Cara Pembayaran

15. Status Pembayaran

29
16. Fitur Chat
Fitur chat akan ada disetiap halaman pada pojok kanan bawah halaman.

Fitur foto untuk mengupload foto dari galery, dan fitur produk untuk memilih produk
di toko, seperti berikut:

30
17. Wishlist

Ketika tombol “ubah wishlist” di klik maka tampilan menjadi:

31
4.6 Penjelasan Source Code Frontend
1. Blade Templating
Web Beliaja, khususnya halaman end-user, menggunakan dua template layout
yaitu layout untuk guest dan layout untuk anggota/member yang sudah terdaftar.
Dua layout tadi ditempatkan di dalam folder views/master/layout

app.blade.php merupakan layout template untuk user. Berisi header dan footer
dari keseluruhan tampilan. User-app.blade.php secara garis besar sama dengan isi dari
halaman app.blade.php, hanya berbeda di bagian header yang berisi dropdown menu
yang dapat digunakan oleh user yang sudah berstatus sebagai anggota.
Berikut merupakan source code bagian header pada app.blade.php yang berada di
dalam tag head meliputi meta tag, judul web, pemanggilan icon, asset style, serta font.
Source code bagian header :
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Beliaja">
<meta name="keywords" content="beliaja, commerce, ecommerce, online
shop, shop, online">
<meta name="author" content="Beliaja IT Developer Team">
<meta name="robots" content="index,follow">

<title>Beli Aja | @yield('title')</title>

<link rel="shortcut icon" type="x-icon" href="{!!

asset('resources/views/master/assets/img/icon.png') !!}">

<!-- CSS GOES HERE -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.c
ss" integrity="sha384-
WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="{!!
asset('resources/views/master/assets/vendor/slick/slick.css') !!}">
<link rel="stylesheet" href="{!!
asset('resources/views/master/assets/vendor/slick/slick-theme.css') !!}">
<link rel="stylesheet" href="{!!
asset('resources/views/master/assets/vendor/swiper/swiper.min.css') !!}">
<link rel="stylesheet" href="{!!
asset('resources/views/master/assets/css/master.css') !!}">

<!-- FONTS HERE -->

32
 <link
href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi"
rel="stylesheet">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
integrity="sha384-
O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">

Source code bagian footer :

<footer>
<div class="pd-bt-15">
<section class="row">
<div class="col-md-3">
<h6>Jelajahi Beliaja</h6>
<ul>
<li><a href="http://">Tentang Kami</a></li>
<li><a href="http://">Karir</a></li>
<li><a href="http://">Kebijakan Beliaja</a></li>
<li><a href="http://">Kebijakan Privasi</a></li>
<li><a href="http://">Blog</a></li>
<li><a href="http://">Flash Sale</a></li>
</ul>
</div>
<div class="col-md-3">
<h6>Beli</h6>
<ul>
<li><a href="http://">Belanja di Beliaja</a></li>
<li><a href="http://">Cara Berbelanja</a></li>
<li><a href="http://">Pembayaran</a></li>
</ul>
</div>
<div class="col-md-3">
<h6>Bantuan</h6>
<ul>
<li><a href="http://">Syarat dan Ketentuan</a></li>
<li><a href="http://">Pusat Resolusi</a></li>
<li><a href="http://">Panduan Keamanan</a></li>
</ul>
</div>
<div class="col-md-3">
<h6>Hubungi Kami</h6>
<ul>
<li><div class="d-flex align-items-center"><i class="mg-r-
10 far fa-envelope"></i><div>info@beliaja.com</div></div></li>
<li><div class="d-flex align-items-center"><i class="mg-r-
10 fa fa-phone"></i><div>(0271) 235 155</div></div></li>
<li><div class="d-flex align-items-center"><i class="mg-r-
10 fab fa-whatsapp"></i><div>+62 895 5987 5897 </div></div></li>
</ul>
</div>
</section>
</div>
</footer>
<div class="foot">
<div class="d-flex">
<div class="d-flex">
<div>
<img src="{!! asset('resources/views/master/assets/img/logo-
white.png') !!}" width="50" alt="">
</div>
<div class="ml-2">
<p class="mb-1 smaller wh">Copyright &copy 2018, PT Beliaja
<br> Hak Cipta Dilindungi</p>

33
 </div>
</div>
<div class="d-flex">
<div>
<p class="mb-0 small wh">Temukan kami di </p>
</div>
<div class="ml-2">
<ul class="list-inline">
<li class="list-inline-item"><a href=""><i class="fab fa-
facebook"></i></a></li>
<li class="list-inline-item"><a href=""><i class="fab fa-
twitter"></i></a></li>
<li class="list-inline-item"><a href=""><i class="fab fa-
instagram"></i></a></li>
<li class="list-inline-item"><a href=""><i class="fab fa-
google-plus-g"></i></a></li>
</ul>
</div>
</div>
</div>
</div>

<!-- JAVASCRIPTS GOES HERE -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min
.js" integrity="sha384-
ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js
" integrity="sha384-
smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
<script src="{!!
asset('resources/views/master/assets/vendor/slick/slick.min.js')
!!}"></script>
<script src="{!!
asset('resources/views/master/assets/vendor/swiper/swiper.min.js')
!!}"></script>
<script src="{!! asset('resources/views/master/assets/js/master.js')
!!}"></script>
</body>
</html>

Bagian footer berisi shortcut link dari halaman-halaman website, link kontak
Beliaja, link media sosial Beliaja, serta pemanggilan asset script javascript yang
digunakan.

2. Navigasi header dibuat dengan template dari Bootstrap

Bagian navigasi dari website Beliaja dikembangkan dari template bawaan
Bootstrap yang dimodifikasi agar sesuai dengan style-guide dari mock-up.

Source code bagian navigasi :

34
 <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ URL::to('master')}}">
<img src="{!! asset('resources/views/master/assets/img/logo.png')
!!}" width="30" height="30" class="d-inline-block align-top" alt="">
Beliaja
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Kategori
</a>

<div class="dropdown-menu pt-0" aria-

labelledby="navbarDropdown"style="margin-top:20px; width:200px">
…
</li>
</ul>
<form class=" my-2 my-lg-0 mx-auto">
<div class="form-inline">
<input class="vw-50 form-control mr-sm-2" type="search"
placeholder="Saya sedang mencari ..." aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit">
<!-- <i class="fa fa-loop"></i> -->
Cari
</button>
</div>
<div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Lorem ipsum</a></li>
<li class="list-inline-item"><a href="#">Phasellus
iaculis</a></li>
<li class="list-inline-item"><a href="#">Nulla
volutpat</a></li>
</ul>
</div>
</form>
<div class="navbar-nav">
<a class="nav-item da-gra nav-link" href="{{
URL::to('master/cart') }}" data-toggle="tooltip" data-placement="bottom"
title="Keranjang Belanja"><i class="fa fa-lg fa-shopping-cart"></i></a>
<a class="nav-item da-gra nav-link" href="{{
URL::to('master/wish-list') }}" data-toggle="tooltip" data-placement="bottom"
title="Wishlist"><i class="far fa-lg fa-heart"></i></a>
<a class="nav-item mx-2 nav-link" data-toggle="modal" data-
target="#modalRegister" href="#">Daftar</a>
<a class="nav-item ml-2 baby-small btn-b-primary btn-b" data-
toggle="modal" data-target="#modalLogin" href="#">Masuk</a>
</div>
</div>
</nav>

3. Pembuatan grid dengan flexbox dan display grid

35
 CSS terus mengalami perkembangan termasuk diantara muncul flexbox dan grid
untuk memudahkan layouting halaman web karena penempatan yang lebih fleksibel
dan dapat dikustomisasi secara praktis.
Salah satu contoh pengimplementasian penggunaan flexbox dalam website
Beliaja yaitu pada bagian card untuk menampilkan display list item.
Source code contoh pengimplementasian flexbox pada bagian hot deals di
halaman utama Beliaja :
<div class="card-body d-flex flex-column">
<figure>
<img src="{!! asset('resources/views/master/assets/img/bg-
square.png') !!}" alt="" style="background-image: url('{!!
asset('resources/views/master/assets/img/004.jpg') !!}')">
<div class="overlay"></div>
<figcaption>
<a href="#" data-toggle="modal" data-
target="#quick_preview" class="btn btn-primary btn-sm">Lihat Cepat</a>
</figcaption>
</figure>
<section class="d-flex">
<a href="{{ URL::to('master/detail-product')}}"><h6
class="card-title small"> Lorem ipsum dolor sit amet with more
lines</h6></a>
<div class="d-flex">
<div>
<p class="small text-muted"><strike>Rp 50.000</strike></p>
<h4 class="price">Rp 75.000</h4>
</div>
<a href="#"><i class="far fa-heart"></i></a>
</div>

4. Pop up menggunakan modal box

Beberapa fitur/modul seperti login, register, quick preview, dan beberapa fitur
lain dibuat dengan memanfaatkan modal box dari Bootstrap.
Source code modal box untuk modul login :
<div class="modal fade" id="modalLogin" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-
hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered"
role="document">
<div class="modal-content">
<div class="modal-body p-0 bg-orange">
<button type="button" class="close m-2" data-
dismiss="modal">&times;</button>
<div>
<div class="row" style="margin-left:0px">
<section class="col-md-7 p-5 text-center bg-white">
<h4 class="or font-weight-bold mb-5 mt-4 pb-3">Masuk
ke Akun Anda</h4>
<form class="">
<div class="form-group inputpd2 mt-3">
<input type="email" class="baby-small form-
control inputpd" id="inputEmail" placeholder="Email">
</div>
<div class="form-group inputpd2">

36
 <input type="password" class="baby-small form-
control inputpd" id="inputPassword" placeholder="Password">
</div>
<div class="text-left form-group form-check">
<input type="checkbox" class="form-check-input"
id="rememberMe">
<label class="form-check-label baby-small"
for="rememberMe">Ingat password</label>
</div>
<div class="">
<button type="submit"class="col btn btn-b btn-b-
primary sh1 font-weight-bold my-2">MASUK</button>
</div>
<div class="smaller text-right">
<span><a href="#" >Lupa password?</a></span>
</div>
</form>
</section>
<section class="d-flex flex-column justify-content-
center col-md-5 text-center p-0">
<div>
<img src="{!!
asset('resources/views/master/assets/img/logo-white.png') !!}"
width="25%" class="img-login "alt="">
</div>
<h5 class="font-weight-bold wh mt-4">Beliaja</h5>
<p class="font-weight-normal wh smaller mb-
4">Belanja Menyenangkan!</p>
<p class="font-weight-normal wh baby-small mt-5 mb-
2">Belum memiliki Akun?</p>

<div class="">
<ANY data-toggle="modal" data-
target="#modalRegister" data-dismiss="modal">
<button type="submit"class="col-md-5 btn btn-
primary sh1 ">DAFTAR</button>
</ANY>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>

5. Slider menggunakan swiper.js

Implementasi swiper.js untuk bagian slider menggunakan tiga style pengaturan
yang berbeda, yaitu untuk banner, hot item, dan deals
Namun secara umum, struktur code HTML untuk ketiga bagian sama. Container
dibungkus dengan class swiper-container, lalu bagian slide-item dibungkus dalam class
swiper-wrapper, sedang untuk masing-masing item diletakkan di dalam class swiper-
slide. Kemudian untuk navigasi (tombol next dan previous) menggunakan dibungkus
dalam swiper-navigation dan dibedakan dengan class swiper-button-next dan swiper-
button-prev. Untuk dots sendiri class swiper-pagination.

37
 Sedangkan untuk membedakan pengaturan di masing-masing bagian tadi
(banner, hot item, dan top deals) dilakukan dengan menggunakan class yang berbeda
dan diletakkan berdampingan dengan class-class yang telah menjadi struktur utama
seperti yang telah disebutkan sebelumnya.
Berikut source code HTML untuk container swiper.js pada bagian banner:
<div class="swiper-container single-item-swipe">
<div class="swiper-wrapper">
<figure class="swiper-slide">
<img src="{!!
asset('resources/views/master/assets/img/bg-img.png') !!}"
style="background-image:url('{!!
asset('resources/views/master/assets/img/1.jpg') !!}')" alt="">
</figure>
<figure class="swiper-slide">
<img src="{!!
asset('resources/views/master/assets/img/bg-img.png') !!}"
style="background-image:url('{!!
asset('resources/views/master/assets/img/2.jpg') !!}')" alt="">
</figure>
<figure class="swiper-slide">
<img src="{!!
asset('resources/views/master/assets/img/bg-img.png') !!}"
style="background-image:url('{!!
asset('resources/views/master/assets/img/4.jpg') !!}')" alt="">
</figure>
<figure class="swiper-slide">
<img src="{!!
asset('resources/views/master/assets/img/bg-img.png') !!}"
style="background-image:url('{!!
asset('resources/views/master/assets/img/banner.png') !!}')" alt="">
</figure>
</div>
<div class="swiper-pagination swiper-pagination-
1"></div>
<div class="swiper-button-prev swiper-button-prev-1"><i
class="fas fa-chevron-left wh"></i></div>
<div class="swiper-button-next swiper-button-next-1"><i
class="fas fa-chevron-right wh"></i></div>
</div>

Lalu berikut adalah source code untuk kustomisasi swiper.js di masing-

masing bagian :
var swiper = new Swiper('.single-item-swipe',{
loop: true,
navigation: {
nextEl: '.swiper-button-next-1',
prevEl: '.swiper-button-prev-1',
},
pagination: {
el: '.swiper-pagination',
}
});

var Swiper6 = new Swiper('.six-items-swipe',{

slidesPerView: 6,
slidesPerGroup: 3,
spaceBetween: 20,
navigation: {
nextEl: '.swiper-button-next-6',

38
 prevEl: '.swiper-button-prev-6',
}
});

var Swiper4 = new Swiper('.four-items-swipe',{

slidesPerView: 4,
slidesPerGroup: 1,
spaceBetween: 15,
navigation: {
nextEl: '.swiper-button-next-4',
prevEl: '.swiper-button-prev-4',
}
});

6. Dropdown menu untuk display kategori

Untuk display kategori menggunakan dropdown menu bawaan Bootstrap yang
kemudian dikustomisasi sendiri. Berikut adalah source code HTML dari display
kategori :
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Kategori
</a>

<div class="dropdown-menu pt-0" aria-

labelledby="navbarDropdown"style="margin-top:20px; width:200px">
<ul class="menu">
<li class="px-2 py-1 dropdown-item">
<a style="display:flex; align-items:center" class="my-1 mx-1
justify-content-between">
<img src="{!!
asset('resources/views/master/assets/img/kategori/fashion-wanita.png') !!}"
width="20" height="20" class="d-inline-block align-top" alt="">
<span class="baby-small mr-auto ml-3" href="#">Fashion
Wanita</span> <i class="fas fa-chevron-right"></i>
</a>
<ul class="submenu">
<li class="dropdown-item">
<a style="display:flex; align-items:center" class="
px-2">
<span class="baby-small" href="#">Atasan</span>
</a>
</li>
…
</ul>
</div>
</li>
</ul>

7. Display coutdown untuk batas waktu pembayaran

Bagian countdown waktu batas pembayaran menggunakan script jquery dengan
menghitung jarak antara batas pembayaran dikurangi waktu/saat sekarang. Lalu
ditampilkan sisa waktu jam, menit, dan detik.

39
 Bila jarak sama dengan atau lebih kecil dari nol, maka muncul pemberitahuan
bahwa waktu untuk melakukan pembayaran sudah habis.
Berikut source code untuk membuat countdown dengan jquery :
// timer
var expiredDate = document.getElementById("expired_date").innerHTML;
var countDownDate = new Date(expiredDate).getTime();
// console.log(countDownDate);
var x = setInterval(function(){
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 *
60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("hour").innerHTML = hours;
document.getElementById("minute").innerHTML = minutes;
document.getElementById("second").innerHTML = seconds;

console.log(distance);

if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "<b> Waktu Melakukan
Pembayaran Telah HABIS <b>";
}
});

8. Tabs menggunakan nav-tabs dari Bootstrap

Bagian tabs menggunakan struktur template dari Bootstrap dengan style CSS
yang dimodifikasi agar sesuai dengan style-guide Beliaja.
Berikut source code dari bagian Tabs :
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab"
data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
aria-selected="true">Status Pembayaran <span class="font-weight-
normal">(1)</span></a>
<a class="nav-item nav-link " id="nav-second-tab" data-
toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second"
aria-selected="false">Status Pemesanan <span class="font-weight-
normal"></span></a>
<a class="nav-item nav-link " id="nav-second-tab" data-
toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third"
aria-selected="false">Konfirmasi Pemesanan <span class="font-weight-
normal"></span></a>
<a class="nav-item nav-link " id="nav-second-tab" data-
toggle="tab" href="#nav-fourth" role="tab" aria-controls="nav-fourth"
aria-selected="false">Daftar Transaksi <span class="font-weight-
normal"></span></a>
</div>
</nav>
<div class="tab-content tab-content-2" id="nav-tabContent">
<!-- START STATUS PEMBAYARAN -->
<div class="tab-pane fade show active" id="nav-home"
role="tabpanel" aria-labelledby="nav-home-tab">
</div>
<!-- END STATUS PEMBAYARAN -->

40
 <!-- START STATUS PEMESANAN -->
<div class="tab-pane fade" id="nav-second" role="tabpanel"
aria-labelledby="nav-second-tab">
…
</div>
<!-- END TAB DAFTAR TRANSAKSI -->
</div>
<!-- END TABS CONTENT -->

9. Increment dan decrement number untuk bagian kuantitas pada detail produk
Berikut adalah source code HTML untuk input kuantitas :
<div class="form-group row d-flex align-items-center">
<label for="inputPassword" class="col-sm-2 col-form-
label">Kuantitas</label>
<div class="col-sm-10">
<div class="input-group input-number-group">
<div class="input-group-button">
<span class="input-number-decrement">-</span>
</div>
<input class="input-number" type="number"
value="1" min="0" max="1000">
<div class="input-group-button">
<span class="input-number-increment">+</span>
</div>
</div>
</div>
</div>

Sedangkan untuk menjalankan fungsi tambah dan kurang kuantitas barang

menggunakan javascript sebagai berikut :
$('.input-number-increment').click(function() {
var $input = $(this).parents('.input-number-
group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val + 1);
});

$('.input-number-decrement').click(function() {
var $input = $(this).parents('.input-number-
group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val - 1);
});

41
4.7 Penjelasan Source Code Backend
1. Login

Membuat LoginController dimana didalamnya terdapat script seperti gambar diatas yang
berguna untuk menangani jalannya proses login. Pada kode diatas terdapat class redirectTo
yang berguna untuk mengarahkan session selanjutnya. Kemudian membuat controller untuk
Register.

Pada RegisterController dilakukan inisiasi data sesuai kolom Register pada FrontEnd,
kemudian membuat function Create() dimana didalamnya terdapat firstName, lastName, email,
password, serta phoneNumber. Password menggunakan enkripsi md5 yang dikenal dengan
keamanannya. Kemudian validasi data Regitrasi user dengan script berikut :

42
tujuan dari validator ini adalah untuk menegaskan tipe data dan karakter dari masing masing
atribut, seperti contoh ‘firstName’ -> ‘required|string|max:255’, dimana memiliki arti
firstName ini harus diisi dengan tipe data String dan jumlah karakter maksimal adalah 255
karakter. Kemudian membuat controller untuk ResetPasswordController dan
ForgotPasswordController.

Setelah semua berhasil dibuat kemudian dilakukan pemanggilan ke dalam View dangan
menambahkan code diatas.

43
2. Hot Deals
Pada Hot Deals ini menampilkan barang barang apa saja yang sedang polpuler dibeli oleh user.
Disini terdapat kendala yaitu hanya dapat menampilkan gambar saja dalam jumlah banyak,
tidak terbatas oleh product yang tersedia.

Solusinya adalah dengan melakukan edit beberapa bagian pada index.blade.php dengan
mengubah code pada img src dengan menggantinya ke dalam “{!! asset($item-
>product_image) !!}” dimana untuk memanggil assets dari database pada tabel
products_image

3. Home Controller

Untuk membuat link atau url tanpa harus memanggil nama folder yang yang berada didalam
Resources/Views kita membuat controller untuk mempersingkat alamat url.

44
4. User.php

Pada User.php ini kita membikin function loginPost guna validasi user login, disini kita
tambahkan juga Session untuk membatasi user login, User hanya bisa login sekali waktu dan
apabila browser tertutup maka user harus login kembali. Data login yang kita ambil hanyalah
email dan Password, kemudian kita gunakan fungsi IF untuk mengecek apakah inputan sesuai
dengan data yang berada di database.

untuk session logout kita hanya perlu menambhkan fungsi flush()

45
Kita tambahkan juga fuction registerPost, isi dari function ini hampir sama seperti pada
RegisterController.

46
 BAB V
KESIMPULAN DAN SARAN

5.1 Kesimpulan pelaksanaan PKL

Pelaksanaan PKL kami selama 39 hari kerja telah memberikan gambaran bagaimana
kerja dilingkungan startup, kami dapat bertemu tim developer melihat dan mengamati
bagaimana mereka dalam bekerja, dan kami mendapat banyak ilmu dan pengalaman
khususnya dari mas Misbah dan Berly Kurniawan selaku supervisor, project manager dari
Jogjaland yang senantiasa membimbing kami.

5.2 Hal yang dapat dikembangkan di tempat PKL

• Melatih cara berkomunikasi yang baik dan benar dalam menghadapi client yang
notabenenya supervisor ditempat PKL kami.
• Meningkatkan kerjasama tim dan mempertahankan komunikasi yang intens dalam
pengerjaan project hingga tuntas.
• Belajar banyak tentang pembuatan sistem yang ternyata tidak mudah, banyak hal yang
perlu dilakukan antara lain yaitu perancangan yang harus matang, pembuatan flow yang
harus jelas, timeline yang relevan, membuat desain tampilan ternyata tidak semudah itu
karena tidak ada aturan resmi namun semua user dapat menilai baik dan tidaknya, dan
eksekusi dalam membuat program banyak hal yang tak terduga sehingga melebihi batas
waktu hingga bagaimana mengatasi permasalahan tersebut.
• Belajar tentang kesadaran dan bertanggungjawab dalam melaksanakan pekerjaan.
• Melatih dan mempraktikkan manajemen proyek yang baik dan bertanggung jawab
dengan bagian tugas masing-masing

5.3 Saran untuk KOMSI

Salah satu tujuan dari para mahasiswa KOMSI setelah lulus tentu adalah bekerja,
menjadi bagian dari dunia industri dan dunia produksi. PKL ini merupakan sarana untuk
penjajakan, menguji keterampilan dan kemampuan, merasakan atmosfer dunia kerja
bersama profesional, dan terlibat langsung dalam proses pekerjaan. Tak hanya sekadar
mengasah dan mengembangkan kemampuan diri, almamater UGM dan KOMSI tentu juga
dibawa ketika terjun ke dunia industri.

47
 Namun sayangnya, materi dan pembekalan ketika akan melakukan PKL sangat kurang
dan terkesan mendadak, yakni hanya dilakukan dalam waktu singkat, kurang mendalam,
dan jarak waktu yang berdekatan dengan pemberangkatan PKL. Hal-hal non teknis seperti
attitude, etiket, bagaimana bersikap sebagai seorang profesional dalam dunia IT, dan hal-
hal lain dalam mata kuliah etika profesi hanya disampaikan secara sekilas ketika briefing
PKL, yang mana sebaiknya mata kuliah itu (etika profesi) diberikan kepada mahasiswa
(atau dijadwalkan) pada semester-semester sebelum dilaksanakannya PKL. Agar ketika
tiba masa PKL, para mahasiswa menjadi lebih siap untuk terjun ke industri dengan tetap
membawa nama baik almamater UGM dan KOMSI.

48