3.1 Identifikasi Masalah Dan Motivasi
Pada tahap ini akan dilakukan penguraian dan identifikasi setiap masalah dan kendala yang ada supaya pembangunan aplikasi toko online EC Computer dapat memenuhi kebutuhan pemilik dan pelanggan, untuk mengidentifikasi masalah dan kendala dilakukan dengan wawancara dan observasi secara langsung dengan pemilik EC Computer dan pelanggan. Hasil dari wawancara dan observasi didapatkan berbagai kendala yang dialami, yaitu kendala dalam melakukan penjualan yang masih dilakukan secara offline sehingga sulit untuk menjangkau pelanggan yang berada di luar kota.
Permasalahan lainnya yang dialami adalah pencacatan produk yang tersedia dan pencacatan transaksi yang terjadi masih dilakukan menggunakan buku sehingga dapat terjadi kesalahan dan duplikasi data yang sama dan masalah yang dialami oleh pelanggan adalah ialah mereka harus mendatangi langsung ke toko untuk melihat produk yang tersedia.
Permasalahan yang muncul tersebut menjadi sebuah motivasi dalam mengembangkan sebuah sistem berbasis website yang dapat mengintegrasikan seluruh proses dan seluruh data dalam sebuah perangkat. Pemilihan platform website dikarenakan fleksibilitasnya dan dapat dibuka di berbagai macam perangkat seperti laptop atau smartphone dimana Admin dapat melakukan pengelolaan data produk dan
47
laporan sementara pelanggan dapat melakukan transaksi atau informasi produk dan tips.
3.2 Penetapan Tujuan Penelitian
Solusi yang di tawarkan untuk mengatasi masalah dan kendala yang dihadapi oleh EC Computer adalah merancang toko online berbasis web dengan mengimplementasikan framework laravel. Tujuan di bangun toko online ialah memberikan kemampuan untuk diakses oleh siapa saja dengan koneksi internet sehingga memungkinkan untuk mencapai pasar yang lebih luas dan penggunaan website dapat memberikan informasi tentang produk, layanan, lokasi, kontak, dan lain- lain, yang membantu meningkatkan transparansi dan kepercayaan pelanggan.
3.3 Desain dan Pengembangan
Dalam pengembangan aplikasi toko online yang berbasis website, metode yang digunakan adalah extreme programming (XP). XP adalah pendekatan pengembangan perangkat lunak yang berorientasi objek dan mencakup seperangkat aturan dan praktik yang terdiri dari empat kegiatan kerangka kerja: perencanaan, perancangan, pengkodean, dan pengujian. Metode ini dipilih untuk memastikan pengembangan aplikasi yang efektif dan efisien dalam hal manajemen proyek, komunikasi tim, dan pengujian yang terus-menerus.
3.3.1 Perencanaan (Planning)
3.3.1.1 Analisis kebutuhan pengguna
Analisis kebutuhan pengguna dimaksudkan untuk mengetahui siapa saja yang terlibat atau menggunakan website yang dikembangkan beserta kebutuhannya. Adapun pengguna website yaitu:
a. Admin
Admin dapat melakukan login untuk mengelola data yang ada di panel admin dengan melakukan proses create, read, update, dan delete (CRUD).
Data yang dimaksud berupa data kategori, data produk, data brand. Admin juga dapat melihat transaksi penjualan yang ada.
b. Pelanggan
Pelanggan dapat melakukan registrasi dan login, melihat produk melengkapi informasi yang diperlukan untuk melakukan pembelian barang dengan melakukan pemesanan terhadap barang tertentu.pelanggan dapat mengubah dan menghapus data produk pembelian pada keranjang serta dapat melakukan pembayaran secara online.
3.3.1.2 Analisis kebutuhan perangkat lunak
Kebutuhan perangkat lunak yang digunakan untuk mendukung dalam mengimplementasikan framework Laravel pada website toko online yaitu :
a. Sistem operasi windows 10.
b. Web browser microsoft edge, c. Basis data MySQL
d. Web server apache
3.3.1.3 Analisis kebutuhan perangkat keras
Adapun spesifikasi perangkat keras yang digunakan untuk membangun website toko online EC Computer, yaitu:
a) Prosesor minimal Intel® Core™ i3-7020U b) RAM minimal 8GB
c) SSD minimal 128GB 3.3.2 Perancangan (Desain)
Tahapan perancangan menggambarkan suatu sistem secara keseluruhan.
Gambaran sistem berfungsi sebagai pedoman bagi pengembang dalam mengindentifikasi ataupun mengembangkan fitur dan fungsionalitas yang ada pada sistem. Perancangan sistem dilakukan dengan penyesuaian terhadap analisis solusi dari permasalahan yang dihadapi oleh EC Computer.
Pada penelitian ini, perancangan sistem dilakukan dengan menggunakan UML (Unified Modeling Language). UML merupakan bahasa pemodelan visual yang digunakan untuk mendeskripsikan, menspesifikasikan, memvisualkan, membangun, dan mendokumentasikan rancangan dari sebuah sistem yang dibangun. Adapun diagram UML digunakan meliputi: Use Case Diagram, Activity Diagram, Class Diagram, dan Sequence Diagram.
3.3.2.1 Arsitektur Website
Arsitektur sistem memberikan gambaran mengenai komponen yang terdapat pada suatu sistem. Arsitektur sistem juga memberikan gambaran mengenai hubungan antara komponen tersebut dan proses kerja suatu sistem secara keseluruhan. Arsitektur website toko online EC Computer dapat dilihat pada gambar 3.1.
Gambar 3.1 Arsitektur Website.
Pada gambar 3.1 menggambarkan arsitektur website toko online EC Computer bekerja. Terdapat dua pengguna yang bisa masuk ke dalam website yakni pelanggan dan admin. Website dapat diakses menggunakan web browser melalui internet. web server yang digunakan adalah Apache. Data diambil dan disimpan dari suatu basis data MySQL. Secara sederhana, server akan meminta data kepada basis data berdasarkan permintaan pengguna, yang kemudian akan dikirim dan ditampilkan kembali. Untuk mendapatkan biaya pengiriman kurir, permintaan akan dilakukan terhadap API RajaOngkir dan diperlukan autentikasi terlebih dahulu berupa token yang akan dikirm
beserta data request, dan untuk melakukan pembayaran secara online diperlukan pemintaan ke API Midtrans dengan autentikasi berupa token yang akan dikirim berserta request data. Arsitektur yang digunakan menerapkan konsep Model View Controller (MVC) pada bahasa pemrograman PHP dengan mengimplementasikan framework Laravel, HTML sebagai struktur dasar halaman website.
3.3.2.2 Perancangan Basis Data
Website toko online EC Computer membutuhkan sebuah basis data yang berfungsi untuk menyimpan data. Pada penelitian ini, perancangan basis data dilakukan dengan menggunakan pendekatan bottom-up dengan melakukan normalisasi rancangan basis data.
3.3.2.2.1 Normalisasi
Normalisasi basis data adalah proses mengorganisasi data dalam suatu basis data relasional untuk mengurangi redundansi dan menghindari masalah yang dapat terjadi karena adanya anomali data. Dalam proses normalisasi, setiap tabel dalam basis data diubah sedemikian rupa sehingga mengikuti sejumlah bentuk normal. Bentuk normal ini ditandai dengan angka yang disebut "normal form" yang diberi label dengan singkatan seperti 1NF (First Normal Form), 2NF (Second Normal Form), 3NF (Third Normal Form), dan seterusnya. Berikut bentuk normal form pada penelitian ini:
a. Bentuk Tidak Normal (UNF) :
{ id + name + email + password + id + user_id + kota_id + province_id + alamat + no_hp + foto_profile + id + user_id + product_id + jumlah + id + satuan +
category_id + brand_id + nama_produk + slug + harga + spesifikasi + stock + berat + foto1 + foto2+ foto3+ foto4+ id + nama_kategori + slug + id + nama_brand + slug + id + user_id + nama_produk + harga + jumlah + created_at + id + transaksi_id + faktur + nama_penerima + no_hp_penerima + berat + alamat_lengkap_penerima + status + kurir + total_belanja + id + nama_provinsi + created_at + id + province_id + type + nama_kota + kode_pos + email + token + created_at + id + name + guard_name + id + name + guard_name }
b. Bentuk Normalisasi 1 (1NF) :
user = @id + nama_lengkap + email + password + kota + role + alamat_lengkap + no_hp + foto_profile
keranjang = @id + user + product + jumlah
product = @id + category+ brand + nama-produk + slug + harga + spesifikasi + satuan + stock + berat + foto1 + foto2 + foto3 + foto4
transaksis = @id + user + nama_produk + faktur + nama_penerima + no_hp_penerima + berat + alamat_lengkap_penerima + status + kurir + total_belanja + harga + jumlah + created_at
Cities = @id + nama_province + nama_kota + kode_pos + type
Role = @id + name + permission + guard_name c. Bentuk Normalisasi 2 (2NF) :
user = @id + nama_lengkap + email + alamat_lengkap + no_hp + password + foto_profile
keranjang = @id + @@user_id + @@product_id + jumlah product = @id + @@category_id + @@brand_id +
nam_produk + slug + price + spesifikasi + satuan + stock + berat + foto1 + foto2 + foto3 + foto4 category = @id + nama_kategori + slug
brand = @id + name_brand + slug
transaksis = @id + @@user_id + @@transaksi_id + faktur + nama_penerima + no_hp_penerima + berat + alamat_lengkap_penerima + status + kurir + total_belanja + nama_produk+ harga + jumlah + created_at
Cities = @id + nama_province + type + nama_kota + kode_pos
Password_reset = email + token + created_at
Role = @id + name + guard_name
Permission = @id + name + guard_name d. Bentuk Normalisasi 3 (3NF) :
user = @id + nama_lengkap + email password + alamat_lengkap + no_hp + password + foto_profile keranjang = @id + @@user_id + @@product_id + jumlah product = @id + @@category_id + @@brand_id +
nama_produk + slug + harga + spesifikasi + satuan + stock + berat + + foto1 + foto2 + foto3 + foto4 category = @id + nama_kategori + slug
brand = @id + nama_brand + slug
detail_transaksis = @id + @@transaksi_id + nama_produk + harga + jumlah +satuan
transaksis = @id + @@user_id + faktur + nama_penerima + no_hp_penerima + berat + status + kurir + alamat_lengkap_penerima + total_belanja + created_at
province = @id + nama-provinsi
Cities = @id + @@province_id + type + nama_kota + kode_pos
password_reset = email + token + created_at
role = @id + name + guard_name
permission = @id + name + guard_name
3.3.2.2.2 Struktur Basis Data
Basis data yang akan digunakan pada website toko online EC Computer adalah MySQL yang berfungsi untuk menyimpan, mengelola, dan mengatur data dalam bentuk tabel yang terhubung satu sama lain sehingga memungkinkan pengguna untuk menyimpan data dalam format terstruktur dan memungkinkan akses yang cepat dan efisien ke informasi yang disimpan. Basis data yang akan digunakan terdiri dari beberapa tabel yaitu : users, keranjang, transaksis, detail_transaksis, products, cities, provinces, categories, brands, infotips, password_resets, model_has_role, roles, role_has_permissions, permissions. Berikut adalah rincian dan spesifikasi tipe data dari setiap tabel tersebut :
Tabel 3.1 Struktur Tabel Users
Name field Data type Length Nullable Key
id bigint 4 no PK
nama_lengkap varchar 50 no
email varchar 50 no
password varchar 100 no
no_hp varchar 20 yes
alamat_lengkap text yes
foto_profile varchar 50 yes
created_at timestamp yes
Pada tabel 3.1 merupakan struktur dari tabel users yang terdiri dari 8 field dengan id sebagai primary key. Pada tebel ini dismpan seluruh data dari user mulain dari informasi data diri dan nama file foto profile.
Tabel 3.2 Struktur Tabel Keranjang
Name field Data type Length Nullable Key
id bigint 4 no PK
user_id bigint 4 no FK
product_id bigint 4 no FK
jumlah int 5 no
Pada tabel 3.2 merupakan struktur dari tabel keranjang dengan memiliki dua foreign key yaitu user_id dan product_id. Tabel keranjang berfungsi untuk menyimpan data product yang dibeli oleh user atau pelaggan dimana pada field jumlah disimpan data banyak product yang ingin dibeli.
Tabel 3.3 Struktur Tabel Transaksis
Name field Data type Length Nullable Key
id bigint 4 no PK
user_id bigint 4 no FK
faktur varchar 30 no
nama_penerima varchar 50 no
no_hp_penerima varchar 20 no
berat int 6 no
alamat_lengkap_penerima text no
status varchar 10 no
kurir varchar 5 no
total bigint 10 no
created_at timestamp no
Pada tabel 3.3 merupakan struktur dari tabel transaksis dimana disimpan seluruh data transaksi mulai dari jumlah berat produk, jumlah belanjaan, informasi penerima kiriman yang dilakukan oleh pelanggaan dengan identitas user_id sebagai acuan pada tabel ini hanya dapat melakukan tampil data dan ubah data saja tidak dapat melakukan hapus. Pada field created_at ini berfungsi untuk menampilkan kapan transaksi dilakukan oleh pelanggan
Tabel 3.4 Struktur Tabel Detail_transaksis
Name field Data type Length Nullable Key
id bigint 4 no PK
transaksi_id bigint 4 no FK
Name field Data type Length Nullable Key
nama_produk varchar 50 no
harga bigint 10 no
jumlah int 5 no
satuan varchar 20 no
Pada tabel 3.4 merupakan struktur field detail_transaksis dimana seluruh detail transaksi disimpan guna untuk menghilangkan duplicate data jika digabungkan dengan tabel transaksi terkait informasi pengiriman sehingga perlu dipisahkan dan tabel ini tidak berrelasi dengan tabel product dikarena jika pada tabel product ada perubahan tidak akan mempengaruhi tabel ini sehingga data tidak rancu.
Tabel 3.5 Struktur Tabel Categories
Name field Data type Length Nullable Key
id bigint 4 no PK
nama_kategori varchar 50 No
slug varchar 50 no
Pada tabel 3.5 merupakan struktur field tabel categories disini ditambah field slug untuk dimudahkan select data karena field ini berfungsi untuk digabungkan dengan url saat ditampilkan ke user sehingga id tidak dapat diketahui.
Tabel 3.6 Struktur Tabel Brands
Name field Data type Length Nullable Key
id bigint 4 no PK
nama_brand varchar 50 No
slug varchar 50 no
Pada tabel 3.6 merupakan struktur field tabel brands pada tabel ini berfungsi untuk menyimpan seluruh daftar nama brands dari product yang ada. Tabel ini memiliki 3 field yaitu id, name, slug dimana field id sebagai primary key.
Tabel 3.7 Struktur Tabel Products
Name field Data type Length Nullable Key
id bigint 4 no PK
category_id bigint 4 no FK
brand_id bigint 4 no FK
nama_produk varchar 50 no
slug varchar 50 no
price bigint 20 no
Name field Data type Length Nullable Key
spesifikasi longtext no
satuan varchar 20
stock int 5 no
berat int 6 no
foto1 varchar 50 yes
foto2 varchar 50 yes
foto3 varchar 50 yes
foto4 varchar 50 yes
created_at timestamp yes
Pada tabel 3.7 menunjukkan struktur tabel yang digunakan untuk menyimpan seluruh daftar produk yang ada di EC Computer. Pada tabel ini terdiri dari 15 field dimana terdapat dua buah field foreign key yaitu category_id dan brand_id yang akan berrelasi dengan tabel categories dan brands.
Tabel 3.8 Struktur Tabel Provinces
Name field Data type Length Nullable Key
id bigint 4 no PK
nama_provinsi varchar 50 no
Pada tabel 3.8 merupakan struktur field tabel provinces pada tabel ini berfungsi untuk menyimpan seluruh daftar nama provinsi yang ada diindonesia. Nilai dari tabel
ini akan ditambahkan otomatis menggunakan seeder laravel dimana valuenya didapat dari api raja ongkir sehinga tidak perlu melakukan request ke api raja ongkir untuk mendapatkan daftar provinsi.
Tabel 3.9 Struktur Tabel Cities
Name field Data type Length Nullable Key
id bigint 4 no PK
province_id bigint 4 no FK
type varchar 50 no
nama_kota varchar 50 no
kode_pos varchar 50 no
Pada tabel 3.9 merupakan struktur field tabel cities pada tabel ini berfungsi untuk menyimpan seluruh daftar nama kota yang ada diindonesia. Tabel ini akan berelasi dengan tabel provinces untuk memudahkan filter data saat akan ditampilkan ke user karena data yang ada sekitar 500 an.sama seperti province nilai dari tabel ini juga akan di insert secara otomatis menggunakan seed laravel dimana valuenya didapat dari api raja ongkir sehinga tidak perlu melakukan request ke api raja ongkir untuk mendapatkan daftar nama kota.
Tabel 3.10 Struktur Tabel InfoTips
Name field Data type Length Nullable Key
id bigint 4 no PK
judul varchar 50 no
slug varchar 50 no
deskripsi longtext yes
thumbnail varchar 50 yes
files1 varchar 50 yes
files2 varchar 50 yes
files3 varchar 50 yes
files4 varchar 50 yes
created_at timestamp yes
Pada tabel 3.10 menunjukkan struktur tabel yang digunakan untuk menyimpan seluruh data informasi info dan tips yang dibuat oleh EC Computer. Info dan tips ini diharapkan dapat membantu pelanggan atau user untuk mendapatkan informasi terkait bagaimana cara merawat laptop atau pun cara pemilihan laptop yang sesuai kebutuhannya. Tabel ini terdiri dari 10 field dimana id sebagai primary key dan juga digunakan slug untuk mempermudah select data.
Tabel 3.11 Struktur Tabel Password_resets
Name field Data type Length Nullable Key
email varchar 50 no
token varchar 50 no
created_at timestamp yes
Pada tabel 3.11 merupakan struktur field tabel reset_passwords dimana berfungsi untuk menyimpan token reset password. Pada tabel ini tidak dilengkapi dengan updated_at karena pada tabel ini tidak ada aksi untuk ubah karena token ini dapat kadaluarsa dan harus di generate ulang dengan patokan field created_at.
Tabel 3.12 Struktur Tabel Model_has_role
Name field Data type Length Nullable Key
role_id bigint 4 no PK
model_type varchar 50 no
model_id bigint 4 no PK
Pada tabel 3.12 diatas menggambarkan tabel yang memiliki relasi yang bertipe many to many dimana tabel ini berfungsi sebagai penghubung antara tabel role dan tabel model dimana pada penelitian ini model yang terhubung adalah user sehingga pada tabel ini tidak ada foreign key dan ada dua primary key.
Tabel 3.13 Struktur Tabel Roles
Name field Data type Length Nullable Key
id bigint 4 no PK
name varchar 50 no
guard_name varchar 50 no
Pada tabel 3.13 diatas merupakan struktur dari tabel roles yang berfungsi menyimpan daftar nama peran yang tersedia dalam website EC Computer dimana saat ini ada role admin. Peran-peran ini nantinya akan digunakan untuk mengelola izin-izin yang diberikan kepada pengguna-pengguna tertentu dalam aplikasi berdasarkan peran yang mereka miliki.
Tabel 3.14 Struktur Tabel Permissions
Name field Data type Length Nullable Key
id bigint 4 no PK
name varchar 50 no
guard_name varchar 50 no
Pada tabel 3.14 diatas merupakan struktur dari tabel permissions yang berfungsi menyimpan daftar nama izin yang tersedia dalam website EC Computer seperti untuk mengakses halaman dashboard. Tabel permissions memudahkan
pengembang dalam mengatur dan mengontrol hak akses pengguna secara fleksibel dan aman.
Tabel 3.15 Struktur Tabel Role Has Permissions
Name field Data type Length Nullable Key
permissions_id bigint 4 no PK
role_id bigint 4 no PK
Pada tabel 3.15 diatas menggambarkan tabel yang memiliki relasi yang bertipe many to many dimana tabel ini berfungsi sebagai penghubung antara tabel role dan tabel permissions. Tabel ini dapat dengan mudah menentukan dan mengelola izin-izin yang diberikan kepada setiap peran dan juga mengetahui peran-peran mana yang memiliki akses ke izin tertentu.
3.3.2.3 Entity Relationship Diagram (ERD)
Hubungan antar komponen himpunan entitas dan himpunan relasi digambarkan pada diagram hubungan entitas seperti pada gambar 3.2. Komponen dalam hubungan entitas ini merupakan komponen setiap tabel dan hubungannya dengan tabel lainnya. Hubungan antar komponen pada konteks ini memetakan susunan dan reference yang ada antar tabel pada rancangan basis data.
Gambar 3.2 Entity Relationship Diagram
Pada gambar 3.2 dijelaskan tentang hubungan kardinalitas antar tabel dalam bentuk entity relationship diagram dimana dapat di lihat terdapat beberapa tabel yang menjadi pusat relasi seperti tabel user, product, dan transaksi. Table user berhubungan dengan tabel keranjang dengan kardinalitas one to many dimana tabel user dapat terhubung dengan banyak tabel keranjang dan juga terhubung many to many dengan tabel role.
Pada tabel product terhubung dengan tabel kategori dan tabel brand dengan kardinalitas many to one dimana jika ingin menginsert data product diperlukan data brand dan kategori terlebih dahulu dan product juga terhubung dengan tabel keranjang.
Tabel keranjang membutuhkan data user dan product untuk melakukan penambahan data. Tabel transaksi juga terhubung dengan tabel user dengan kardinalitas many to one dan terhubung juga dengan detail transaksi dimana ini adalah hasil dari normalisai database sehingga tidak ada perulangan data yang terjadi dimana menyimpan data yang tidak mengalami perulangan dari transaksi.
3.3.2.4 Perancangan UML (Unified Modelling Language)
UML digunakan untuk memetakan model yang diperlukan pada aplikasi yang akan dikembangkan. Model yang dihasilkan menggunakan UML mampu memberikan banyak informasi mengenai fungsi suatu fitur, hubungan antar model, dan informasi terperinci mengenai alur kerja sistem.
3.3.2.4.1 Use Case Diagram
Use Case Diagram mendeskripsikan sebuah bahasa pemodelan yang digunakan untuk mendokumentasikan, merancang, dan menggambarkan perangkat lunak serta sistem berbasis objek dengan menyederhanakan dan menggambarkan konsep dan interaksi yang ada dalam sebuah sistem, memungkinkan pengembang perangkat lunak untuk berkomunikasi dan berkolaborasi dalam proses pengembangan. Interaksi antara pengguna dan sistem pada website toko online EC Computer dapat dilihat pada gambar 3.3 berikut.
Gambar 3.3 Use Case Diagram
Pada gambar 3.3 aplikasi toko online memungkin pelanggan (user) untuk melakukan registrasi dan login akun untuk melakukan transaksi di website dan melihat produk yang tersedia, dapat melakukan update informasi pelanggan atau pun fotoprofilnya serta menambah produk dari keranjang, dan mengubah jumlah barang yang ingin dibeli atau menghapus produk sebelum melakukan checkout produk dan mendapat melihat biaya ongkir yang akan ditambahakan saat melakukan transaksi dan
melakukan pembayaran secara online dengan berbagam jenis metode pembayaran setelah melakukan transaksi user dapat melihat seluruh riwayat transaksi dan mencetak invoicenya.
Pada user admin juga memiliki fitur tambahan yang hanya muncul pada user yang memiliki role saat seorang user melakukan login. Admin dapat melakukan melihat, menambakan, mengubah, menhapus data dari produk, data kategori,data info dan tips dimana akan ditampikan ke pelanggan.serta melihat seluruh transaksi yang dilakukan pelanggan dan dapat mencetak invoicenya.
3.3.2.4.2 Activity Diagram
Fungsionalitas sistem digambarkan melalui activity diagram. Gambaran fungsionalitas sistem dapat menunjukkan proses kerja setiap fitur yang terdapat pada sistem dari awal suatu fitur dieksekusi hingga selesai dilakukan. Activity diagram membantu dalam pemahaman, desain, dan dokumentasi alur kerja aplikasi dengan cara yang intuitif. Activity diagram yang menunjukkan proses kerja fitur website toko online EC Computer sebagai berikut:
Gambar 3.4 Activity Diagram Login Pada Website
Pada gambar 3.4 menggambarkan alur login pada website toko online EC Computer menggunakan framework laravel dengan arsitektur MVC. Alur dimulai dari user memilih menu login kemudian request akan diterima controller yang akan diteruskan ke tampilan login user perlu menginput data berupa email dan password dan menekan button login request tersebut akan dikirim ke controller untuk validasi jika validasi berhasil akan diteruskan ke model untuk dilakukan pencocokan data jika data ada maka akan dikembalikan ke controller untuk cek role apakah ada atau tidak jika ada akan dibawa ke view admin jika tidak akan dibawa ke view home jika input atau
data tidak ada yang cocok maka akan dikembalikan ke view login dengan pesan eror.
Gambar 3.5 Activity Diagram Register Pada Website.
Pada gambar 3.5 menggambarkan proses registrasi user pada website toko online EC Computer. Alur dimulai dari user memilih menu register kemudian request akan diteruskan ke controller untuk menampilkan view register dan user akan diminta menginputkan data kemudian menekan button register request tersebut akan dikirim ke
controller untuk validasi jika ada yang salah akan di bawa kembali ke view register dengan eror jika validasi sukses akan diteruskan ke model untuk dilakukan insert data dan ke controller dengan hasil untuk dilakukan login dan dibawa ke view home.
Gambar 3.6 Activity Diagram profile Pada Website.
Pada gambar 3.6 menggambarkan proses profie user pada website toko online EC Computer. Alur dimulai dari user melakukan login terlebih dahulu kemudian user memilih menu profile request tersebut akan diterima controller dan diteruskan ke user
model untuk mendapatkan data user yang sedang login dan akan view profile. Pada tampilan profile user dapat melakukan update informasi atau update foto.
Gambar 3.7 Activity Diagram Tambah Produk Ke Keranjang Pada Website.
Pada gambar 3.7 menggambarkan proses penambahan produk ke keranjang pada website toko online EC computer. Alur dimulai dari user melakukan login kemudian memilih menu produk kemudian memilih produk mana yang ingin ditambahkan dengan menekan tombol tambah keranjang kemudian request tersebut akan diterima oleh controller untuk dilakukan proses insert ke keranjang sesuai id user yang sedang login dan akan kembali kehalaman sebelumnya dengan pesan produk berhasil ditambahkan.
Gambar 3.8 Activity Diagram Checkout Pada Website.
Pada gambar 3.8 menggambarkan proses checkout produk pada website toko online EC Computer. Alur dimulai dari user melakukan login dan user menambah produk terlebih dahulu kemudian memilih menu keranjang dan request akan diterima di controller kemudian akan diteruskan ke model untuk mendapat data keranjang dari user yang sedang login kemudian akan diteruskan ke view keranjang dengan data yang telah didapatkan. Pada tampilan keranjang user dapat melakukan update jumlah
pembelian dan penghapusan produk kemudian jika dirasa produk yang ingin dibeli sudah benar dapat menekan tombol checkout.
Gambar 3.9 Activity Diagram Pembayaran Pada Website.
Pada gambar 3.9 menggambarkan proses pembayaran pada website toko online EC Computer. Alur dimulai dari user melakukan login kemudian mememilih menu
keranjang dan melakukan penambahan produk jika belum ada kemudian menekan button checkout pada tampilan keranjang. Request tersebut akan diterima controller yang akan diteruskan apa model untuk mendapat data keranjang user yang akan ditampilkan pada view pembayaran. Pada tampilan keranjang dapat menginput informasi alamat tujuan pengiriman kemudian menekan tombol cek ongkir untuk mengetahui berapa ongkir dari produk yang dibeli dan kemudian user dapat menekan tombol pembayaran untuk memunculkan tagihan dan memilih metode pembayaran pa yang akan digunakan atau mengcancel pembayaran.
Gambar 3.10 Activity Diagram Riwayat Transaksi Pada Website.
Pada gambar 3.10 menggambarkan proses Riwayat Transaksi pada website toko online EC Computer. Alur dimulai ketika user melakukan login kemudian user memilih menu transaksi, request tersebut akan diterima oleh controller yang kemudian akan diteruskan ke model untuk mendapatkan data transaksi user yang sedang login
kemudian akan diteruskan ke tampilan riwayat transaksi dengan data yang ada. Jika user sudah melakukan transaksi maka user dapat memilih button invoice untuk mendapatkan invoice.
Gambar 3.11 Activity Diagram Kelola Produk Pada Website.
Pada gambar 3.11 menggambarkan proses Kelola Produk pada website toko online EC Computer. Alur dimulai admin melakukan login terlebih dahulu kemudian
memilih menu produk pada sidebar kemudian request akan diteruskan ke model untuk memperoleh data produk yang ada pada model product dan kemudian akan diteruskan ke tampilan kelola produk. Pada tampilan ini admin dapat melakukan tambah, ubah, dan hapus produk.produk yang stock nya bernilai 0 atau kurang tidak akan ditampilkan pada user atau pelanggan.
Gambar 3.12 Activity Diagram Kelola Info Dan Tips Pada Website.
Pada gambar 3.12 menggambarkan proses kelola info dan tips pada website toko online EC Computer. Alur dimulai admin melakukan login terlebih dahulu
kemudian memilih menu info dan tips pada sidebar kemudian request akan diteruskan ke model untuk memperoleh data yang ada pada model infotips dan kemudian akan diteruskan ke tampilan kelola info dan tips. Pada tampilan ini admin dapat melakukan tambah, ubah, dan hapus info . data ini akan diakses oleh user pada tampilan info dan tips yang terdapat berbagai macam informasi mulai dari bagaimana cara perawatan perangkat user dan informasi lainnya yang bermanfaat untuk user atau pelanggan.
Gambar 3.13 Activity Diagram Kelola Kategori Pada Website.
Pada gambar 3.13 menggambarkan proses kelola kategori pada website toko online EC Computer. Alur dimulai admin melakukan login terlebih dahulu kemudian memilih menu kategori pada sidebar kemudian request akan diteruskan ke model untuk memperoleh data kategori yang ada pada model category dan kemudian akan diteruskan ke tampilan kelola kategori. Pada tampilan ini admin dapat melakukan tambah, ubah, dan hapus produk, data kategori akan berhubungan dengan data produk.
Gambar 3.14 Activity Diagram Laporan Pada Website.
Pada gambar 3.14 menggambarkan proses laporan pada website toko online EC Computer. Alur ini dimulai admin melakukan login terlebih dahulu kemudian memilih menu laporan pada sidebar kemudian request akan diteruskan ke model untuk memperoleh data transaksi dan detail transaksi yang ada pada model transaksi dan kemudian akan diteruskan ke tampilan laporan. Pada tampilan ini juga dilengkapi fitur export pdf, export excel juga invoice.
Gambar 3.15 Activity Diagram Callback Pada Website.
Pada gambar 3.15 menggambarkan proses callback dari midtrans pada website toko online EC Computer. Alur ini dimulai ketika pelanggan melakukan pembayaran yang akan diterima oleh midtrans kemudian akan dikirim notifikasi ke pelanggan kemudian akan mengirim request ke controller dari url yang telah disiapkan sebelumnya kemudian request akan diterima oleh controller untuk validasi signature key sebagai identitas kode pembayaran dan jika signature key cocok dengan yang ada dilokal akan diteruskan untuk dilakukan update status transaksi.
3.3.2.4.3 Class Diagram
Class diagram yang digunakan menampilkan kumpulan kelas yang terdapat pada website toko online EC Computer. Kumpulan kelas dan hubungan
antar kelas dalam class diagram memberikan gambaran tentang komponen yang terdapat dalam sistem, inisialisasi komponen, dan relasi yang terdapat pada antar komponen dalam sistem. Class diagram pada website toko online EC Computer dapat dilihat pada Gambar 3.16.
Gambar 3.16 Class Diagram
Pada komponen user tehubung denga komponen keranjang, transaksi, dan model_has_role dimana komponen user dibutuhkan untuk menjalankan komponen yang terhubung dimana jika user memiliki role admin yang terhubung dengan komponen model_has_role maka user dapat melakukan tambah, ubah, hapus kategori, produk,brand, info dan tips, dan assignRole yang berfungsi untuk memberikan role dan dapat mengakases laporan jika tidak memiliki role user dapat melakukan tambah user dengan cara registrasi dan mengakses profile, keranjang dan transaksi meskipun tidak berhubungan langsung dengan komponen reset_password komponen user butuhkan untuk melakukan penambahan data pada komponen tersebut.
Pada komponen product terhubung dengan komponen brand,dan juga kategori dimana data product membutuhkan data brand dan kategori untuk melakukan penambahan dan komponen product dibutuhkan untuk komponen keranjang dimana akan berhubungan saat melakukan penambahan data.
Pada komponen transaksi berhubungan dengan detail_transaksi dimana saat dilakukan penambahan maka secara otomatis dilakukan penambahan pada detail_transaksi sesuai berapa banyak detail yang ada pada transaksi. Komponen ini dapat melakukan penambahan data dan tampi serta invoice dimana data akan berasal dari kedua komponen tersebut.
3.3.2.4.4 Sequence Diagram
Tahapan atau proses pada suatu fitur digambarkan dalam sequence diagram.
Tahapan yang terdapat pada suatu fitur digambarkan dengan jenis operasi yang
dilakukan dan kondisi mengenai jenis operasi yang dilakukan. Sequence diagram yang menunjukkan proses kerja fitur website toko online EC Computer sebagai berikut:
Gambar 3.17 Sequence Diagram Login
Gambar 3.17 menggambarkan interaksi ketika user melakukan login. Proses diawali dengan user memilih menu login pada website dan request tersebut akan diterima oleh controller dan akan menampilkan form untuk login user, setelah itu user dapat menginput email dan password sebagai cridentials yang dibutuhkan dan menekan tombol login request tersebut akan diterima controller untuk validasi data yang dimasukan jika ada data yang diinput masih kosong maka akan memunculkan pesan eror input harus lengkap jika data lengkap maka akan diteruskan kemodel user
untuk dilakukan query dan dari hasil query akan dicek apakah input yang dimasukan ada yang cocok atau tidak jika tidak maka akan muncul pesan data yang dimasukan tidak ada yang cocok jika cocok maka dicontroller akan melakukan pengecekan role user jika ada maka controller akan request view admin dan jika tidak ada maka akan request view home dan hasil request view akan ditampilkan ke user.
Gambar 3.18 Sequence Diagram Register
Gambar 3.18 menggambarkan interaksi ketika user melakukan registrasi.
Proses dimulai saat user memilih menu register dan request akan diterima controller dan akan menjalankan request view register kemudian user perlu menginput informasi username, email, password, password confirmation dan menekan button register.
Requrst tersebut akan diterima controller dan akan di validasi apakah input user lengkap jika tidak akan kembali ke view register dan memunculkan pesan eror jika
input lengkap akan diteruskan ke model user untuk jika email user telah ada maka insert akan gagal dan memunculkan pesan eror email telah ada jika insert berhasil maka akan diteruskan kecontroller akan melakukan login user dan request view login dan membawa data user yang login dan pada akhirnya akan memunculkan view home.
Gambar 3.19 Sequence Diagram Laporan
Gambar 3.19 menggambarkan interaksi ketika admin melakukan laporan.
Proses ini dimulai admin memilih menu laporan di sidebar dan request akan dikirm ke controller dan diteruskan ke model transaksi untuk mendapatkan seluruh data transaksi yang dilakukan pelanggan dan result yang dikirim model akan dikembalikan ke controller dan akan digabungkan ke tampilan laporan. Pada tampilan ini admin dapat melakukan export pdf atau ke excel.
Gambar 3.20 Sequence Diagram CRUD Kelola Produk
Gambar 3.20 menggambarkan interaksi ketika admin melakukan kelola produk. Proses ini dimulai admin memilih menu produk dan request akan dikirm ke
controller dan diteruskan ke model produk untuk mendapatkan seluruh data produk dan result akan dikembalikan ke controller dan digabungkan ke tampilan kelola produk pada tampilan ini admin dapat melakukan tambah, ubah, hapus data produk jika admin menekan tombol tambah maka form tambah akan muncul berbentuk modal dan admin perlu memasukan data informasi produk dan menekan tombol save, request akan dikirim ke controller untuk dilakukan validasi kelengkapan input admin jika validasi gagal maka akan muncul eror jika berhasil request akan diteruskan ke model untuk dilakukan insert data produk dan kembali ke tampilan kelola produk dengan pesan produk berhasil di tambahkan. Admin juga dapat menekan tombol edit, request akan dikirim ke controller berupa id produk dan diteruskan ke model untuk mengambil data produk sesuai id produk dan hasil dari model akan dikembalikan ke tampilan dalam bentuk form modal dan admin dapat mengubah informasi produk dan menekan tombol save dan request akan dikirim ke controller untuk validasi kelengkapan input jika gagal akan ditamnpilkan eror dengan pesan input harus lengkap berhasil akan diteruskan ke model untuk dilakukan pengubahan data sesuai id. Admin dapat menekan tomboh hapus dan request akan dikirim ke controller berserta id produk kemudian akan diteruskan ke model untuk delete data sesuai id produk yang dikirimkan dan hasil dari model akan dikembalikan ke controller untuk di tampilan ke halaman kelola produk dengan pesan produk berhasil dihapus berhasil dihapus.
Gambar 3.21 Sequence Diagram CRUD Kelola Kategori
Gambar 3.21 menggambarkan interaksi ketika admin melakukan kelola kategori. Proses ini dimulai admin memilih menu kategori dan request akan dikirm ke controller dan diteruskan ke model kategori untuk mendapatkan seluruh data kategori dan result akan dikembalikan ke controller dan digabungkan ke tampilan kelola kategori pada tampilan ini admin dapat melakukan tambah, ubah, hapus data kategori jika admin menekan tombol tambah maka form tambah akan muncul berbentuk modal dan admin perlu memasukan data informasi kategori dan menekan tombol save, request akan dikirim ke controller untuk dilakukan validasi kelengkapan input admin jika validasi gagal maka akan muncul eror jika berhasil request akan diteruskan ke model untuk dilakukan insert data kategori dan kembali ke tampilan kelola kategori dengan pesan kategori berhasil di tambahkan. Admin juga dapat menekan tombol edit, request akan dikirim ke controller berupa id kategori dan diteruskan ke model untuk mengambil data kategori sesuai id kategori dan hasil dari model akan dikembalikan ke tampilan dalam bentuk form modal dan admin dapat mengubah informasi kategori dan menekan tombol save dan request akan dikirim ke controller untuk validasi kelengkapan input jika gagal akan dikembalikan ke tampilan kelola produk dengan pesan eror input tidak lengkap tapi jika berhasil akan diteruskan ke model untuk dilakukan pengubahan data sesuai id kategori yang diberikan. Admin dapat menekan tomboh hapus dan request akan dikirim ke controller berserta id kategori kemudian akan diteruskan ke model untuk delete data sesuai id kategori dan hasil dari model kategori akan dikembalikan ke tampilan kelola kategori dengan pesan kategori berhasil dihapus.
Gambar 3.22 Sequence Diagram CRUD Kelola Info Dan Tips
Gambar 3.22 menggambarkan interaksi ketika admin melakukan kelola info dan tips. Proses ini dimulai admin memilih menu info dan tips dan request akan dikirm ke controller dan diteruskan ke model info dan tips untuk mendapatkan seluruh data info dan tips dan result akan dikembalikan ke controller dan digabungkan ke tampilan kelola info dan tips pada tampilan ini admin dapat melakukan tambah, ubah, hapus data info dan tips jika admin menekan tombol tambah maka form tambah akan muncul berbentuk modal dan admin perlu memasukan data informasi info dan tips dan menekan tombol save, request akan dikirim ke controller untuk dilakukan validasi kelengkapan input admin jika validasi gagal maka akan muncul eror jika berhasil request akan diteruskan ke model untuk dilakukan insert data info dan tips dan kembali ke tampilan kelola info dan tips dengan pesan info dan tips berhasil di tambahkan.
Admin juga dapat menekan tombol edit, request akan dikirim ke controller berupa id info dan tips dan diteruskan ke model untuk mengambil data info dan tips sesuai id info dan tips dan hasil dari model akan dikembalikan ke tampilan dalam bentuk form modal dan admin dapat mengubah informasi info dan tips dan menekan tombol save dan request akan dikirim ke controller untuk validasi kelengkapan input jika gagal akan dikembalikan ke tampilan kelola produk dengan pesan eror input tidak lengkap tapi jika berhasil akan diteruskan ke model untuk dilakukan pengubahan data sesuai id info dan tips yang diberikan. Admin dapat menekan tomboh hapus dan request akan dikirim ke controller berserta id info dan tips kemudian akan diteruskan ke model untuk delete data sesuai id info dan tips dan hasil dari model info dan tips akan dikembalikan ke tampilan kelola info dan tips dengan pesan info berhasil dihapus.
Gambar 3.23 Sequence Diagram Tambah Produk Ke Keranjang
Gambar 3.23 menggambarkan interaksi ketika user melakukan Tambah Produk Ke Keranjang. Proses ini akan dimulai ketika user memilih menu produk request akan diterima oleh controller untuk diteruskan ke model product dimana akan di select data produk yang meiliki nilai stock lebih sama dengan satu kemudian data akan dikirim bersamaan ke tampilan produk. User dapat menambahkan produk ke keranjang dengan menekan tombol keranjang pada card produk dan request tambah produk akan diterima oleh controller dan akan dilakukan insert ke keranjang model dengan user_id dari user
yang sedang login dan hasil insert akan diterima oleh controller yang kemudian akan dibawa ke tampilan produk dengan pesan produk berhasil ditambahkan.
Gambar 3.24 Sequence Diagram Checkout
Gambar 3.24 menggambarkan interaksi ketika user melakukan checkout.
Proses ini dimulai dari user memilih menu keranjang kemudian request akan diterima oleh controller untuk diteruskan ke model untuk mendapatkan data keranjang sesuai dengan user_id yang sedang login kemudian result yang didapatkan akan dikembalikan ke controller untuk digabungkan dengan tampilan keranjang disini user dapat langsung melakukan checkout tetapi jika user ingin melakukan perubahan data produk.
User mengubah data jumlah produk dengan menginput jumlah produk yang ingin dibeli, request tersebut akan dikirim ke controller dengan data product id dan jumlah produk dimana akan controller akan merequest data product sesuai id yang diterima kemudian model akan mengirimkan hasil dari query tersebut yang akan diterima controller untuk validasi stock apakah mencukupi atau tida jika tidak controller akan mengrim eror ke tampilan keranjang dengan pesan stock tidak mencukupi, jika stock cukup maka akan dilakukan update data jumlah pada keranjang sesuai id product dan id user yang diterima dan model akan mengrimkan hasil yang akan diterima controller dan akan dibawa ke tampilan keranjang dengan pesan produk berhasil diupdate.
User dapat melakukan penghapusan data produk dari keranjang dengan menekejan tombol delete dan request akan dikirm ke controller dan diteruskan ke model untuk dilakukan delete produk sesuai id produk yang dikirimkan dari keranjang
model dan akan dibawa kembali ke tampilan keranjang dengan pesan produk berhasil dihapus dari keranjang.
Gambar 3.25 Sequence Diagram Pembayaran
Gambar 3.25 menggambarkan interaksi ketika user melakukan pembayaran.
Proses ini dimulai user menekan button checkout kemudian request akan dikirim ke controller kemudian akan dikirim ke model untuk mendapatkan data keranjang berdasarkan user id yang login kemudian hasil akan dikirim ke tampilan pembayaran pada tampilan ini user diminta untuk meng inputkan informasi pengiriman setelahnya menekan tombol checkout request ini akan dikirim ke controller untuk di validasi apakah data sudah lengkap jika tidak akan memuncukan pesan eror di tampilan jika data lengkap controller akan melakukan request ke API raja ongkir untuk mendapat jasa pengiriman dan biaya kemudian hasil pengiriman akan diterima di controller dan diteruskan untuk ditampikan ke user, user dapat perlu memilih jasa pengiriman yang akan digunakan kemudian menekan button bayar dan request akan dikirm ke controller untuk diperiksa apakah input lengkap jika tidak akan muncul eror data harus lengkap jika iya maka request akan dihandle oleh controller dan melakukan request keranjang model untuk mendapatkan data keranjang dari hasil query akan dilakukan insert ke transaksi dan detail transaksi dan seluruh data yang ada akan dikirim ke API Midtrans sebagai detail tagihan dan response yang diterima dari midtrans akan diterima controller kemudian tagihan akan di munculkan ke user sehingga user dapat memilih metode pembayaran yang akan digunakan dan melakukan pembayaran.
Gambar 3.26 Sequence Diagram Riwayat Transaksi
Gambar 3.26 menggambarkan interaksi ketika user melakukan pembayaran.
Proses ini dimulai user memilih menu transaksi kemudian request akan dikirim ke controller dan diteruskan ke model untuk mendapatkan data transaksi dari user id yang login dan hasil dari model akan dikirim ke tampilan riwayat transaksi pada tampilan ini user dapat menekan button invoice jika ada transaksi yang telah dilakukan dan request akan diterima oleh controller kemudian diteruskan ke model untuk mendapatkan detail transaksi dan akan digabungkan ke tampilan invoice.
Gambar 3.27 Sequence Diagram Profile
Gambar 3.27 menggambarkan interaksi ketika user melakukan Profile. Proses ini dimulai saat user memilih menu profile pada navbar request ini akan diterima oleh controller yang kemudian akan diteruskan ke user model untuk mendapatkan data user yang sedang login dan kemudian akan dikembalikan ke controller dan diteruskan ke tampilan profile beserta data sebelumnya. Pada tampilan user dapat melakukan update foto profile dengan cara menguploud foto pada form dan kemudian menclick update foto request ini akan dikirim ke controller untuk validasi apakah data yang diupload benar berjenis foto jika validasi gagal request akan dikembalikan ke tampilan profile dengan pesan eror file harus berformat foto jika validasi berhasil request akan
diteruskan kemodel untuk dilakukan update dan kemudian akan dikembalikan ke tampilan profile dengan pesan foto berhasil di update jika user memilih untuk update informasi request akan lakukan seperti update foto profile hanya saja validasi yang dilakukan hanya mengecek input user tidak kosong dan benar.
Gambar 3.28 Sequence Diagram Callback
Gambar 3.28 menggambarkan interaksi midtrans dengan website toko online.
Proses ini dimulai dari pelanggan melakukan pembayaran. Pembayaran yang dilakukan akan diterima oleh midtrans dan notifikasi email akan dikirim ke pelanggan jika pembayaran berhasil dan midtrans akan melakukan request ke controller dengan route yang telah konfigurasi sebelumnya dan request akan dihandle di controller untuk dilakukan validasi signature key dengan cara pencocokan token yang dikirim dari request dengan yang ada dilocal jika tidak cocok maka request akan dihentikan jika berhasil maka request akan diteruskan ke model transakasi untuk dilakukan update status transaksi sesuai id_transaksi yang dikirimkan.
3.3.3 Pengkodean (Coding)
Tahapan coding merupakan tahap implementasi planning dan design yang telah dibuat yang dimana terdapat dua bagian yaitu bagian front end dan back end. Back end dibuat menggunakan framework laravel dengan arsitektur Model-View-Controller dan bahasa pemgraman PHP.
Gambar 3.29 ScreenShot Coding Route Laravel
Pada gambar 3.29 diatas adalah salah satu potongan koding yaitu web.php yang berada pada folder route. Pada awal kodingan diperlihatkan controller dan file apa saja yang di import kedalam file web.php. Kodingan tersebut juga menjelaskan end point apa saja yang tersedia pada website toko online dimana request yang diterima akan diteruskan ke controller dan method sesuai end point yang diakses oleh user dan beberapa endpoint juga dibungkus kedalam suatu fungsi middleware yang berfungsi untuk mengecek user mana saja yang dapat mengakses pada gambar diatas pada middleware guest hanya dapat diakses oleh user yang belom login sedangkan middleware auth berati hanya dapat diakses oleh user yang telah login, dan middleware auth,has role hanya dapat diakses oleh user yang telah login dan mempunyai role.
Gambar 3.30 ScreenShot Coding RegisterController
Pada gambar 3.30 merupakan coding dari registercontroller dimana pada method index akan melakukan pengembalian berupa tampilan register pada method store memiliki fungsi untuk menjalankan perintah menginset user baru pada tabel user dimana penambahan di jembatani user model yang kemudian dilakukan login user yang melakukan registrasi. Method akan di eksekusi sesuai route yang diakses oleh user.
Gambar 3.31 ScreenShot Coding View Register
Pada gambar 3.31 merupakan potongan coding register.blade.php yang merupakan view register yang berisi coding form input informasi data user yang akan melakukan login dan akan di arahkan ke route register dengan method post dan setiap form juga dilengkapi @eror yang berfugsi untuk mengecek adakah eror yang diterima dari controller saat gagal melakukan validasi.
Tahapan front end dirancang untuk dapat mempermudah pengguna untuk berinteraksi dengan aplikasi melalui tampilan visual untuk pengalaman yang lebih baik. Front end website yang akan dirancang mencakup tampilan semua fitur dan input yang dibutuhkan saat berinteraksi dengan website. Berikut rancangan antarmuka website toko online EC Computer:
Gambar 3.32 Halaman Home
Pada gambar 3.32 merupakan tampilan halaman home saat website pertama kali diakses pada halaman ini user dapat mengakses register, login, dan melihat produk yang tersedia baik pada halaman home, kategori, brand, dan dapat memilih menu lainnya tentang kami dan info dan tips.
Gambar 3.33 Halaman Info dan Tips
Pada gambar 3.33 merupakan tampilan halaman info dan tips disini pelanggan dapat melihat berbagai macam informasi terkait laptop, printer atau periperal lainnya di sini pelanggan dapat mengetagui bagaimana cara melakukan perawatan laptop,
pemilihan spesifikasi laptop yang dibutuh, apa saja yang perlu di lakukan jika mengalami masalah.
Gambar 3.34 Halaman Pembayaran
Pada gambar 3.34 merupakan tampilan pembayaran berhasil setelah melakukan checkout dan mengisi semua data informasi pengiriman serta menambahkan ongkir setelah melakukan pembayaran user akan menerima notifikasi email yang akan ditampilkan pada gambar 3.35.
Gambar 3.35 Notifikasi Email Pembayaran
Pada gambar 3.35 merupakan notifikasi email yang diterima pelanggan setelah berhasil melakukan pembayaran. Notifikasi ini akan dikirim oleh midtrans dan akan melakukan update status transaksi menjadi sukses.
Gambar 3.36 Tampilan Dahsboard Admin
Pada gambar 3.36 merupakan tampilan dashboard admin. Tampilan ini admin dapat mengakses dan mengelola kategori, brand, produk, info dan tips, dan membuat laporan dan melihat seluruh transaksi yang dilakukan pelanggan pada dashboard admin juga dilengkapi grafik laporan bulanan dan admin dapat mencetak laporan atau mengexport menjadi pdf atau excel.
3.4 Demonstrasi
Tujuan dari pengujian sistem adalah untuk memverifikasi bahwa keseluruhan sistem berfungsi dengan baik dan sesuai dengan perancangannya. Metode pengujian yang akan digunakan adalah Black Box, yang artinya pengujian dilakukan tanpa pengetahuan internal tentang kode sumber atau struktur program. Teknik yang akan diterapkan dalam pengujian ini adalah graph-based testing, yang berfokus pada analisis struktur graf dari perangkat lunak untuk mengidentifikasi jalur-jalur yang harus diuji agar mencakup berbagai kasus pengujian.
Dalam pengujian berbasis graf, model perangkat lunak direpresentasikan sebagai sebuah graf, di mana setiap simpul mewakili berbagai komponen atau bagian dari perangkat lunak, dan setiap tepi menggambarkan hubungan antara komponen tersebut. Selanjutnya, pengujian dilakukan dengan menguji perangkat lunak melalui pengikutan jalur-jalur tertentu dalam graf tersebut. Hal ini memungkinkan identifikasi jalur-jalur yang krusial untuk pengujian sehingga mencakup berbagai skenario yang dapat muncul selama penggunaan sistem.
Gambar 3.37 Graph Login Pada Website
Pada gambar 3.37 di jelaskan pengujian untuk melakukan login pada website toko online EC Computer. Proses login dimulai saat pelanggan atau admin menginputkan email dan password. Sistem akan mengecek input apakah lengkap atau tdak jika tidak maka akan dikembalikan ke login jika lengkap maka akan diteruskan untuk pencocokan data input dengan tabel user jika tidak ada yang cocok akan di kembalikan ke halaman login jika ada yang cocok akan di lakukan pengecekan role jika tidak ada akan diarahkan ke tampilan home jika ada akan dirahkan ke tampilan admin.
Gambar 3.38 Graph Pembayaran Pada Website
Pada gambar 3.38 di jelaskan pengujian pembayaran proses pembayaran dimulai saat pelanggan menekan tombol bayar dan sistem akan mengecek seluruh datang diinput kan oleh pelanggan apakah sudah lengkap atau tidak jika tidak lengkap akan di tampilkan pesan eror dan jika berhasil akan ditampilkan pembayaran.
3.5 Evaluasi
Evaluasi digunakan untuk mengukur seberapa efektif dalam menyelesaikan masalah yang ingin dipecahkan. Evaluasi ini dapat dilakukan dengan membandingkan antara tujuan yang ingin dicapai Dari hasil pengujian yang dilakukan, dapat disimpulkan aplikasi dapat berjalan sesuai dengan harapan. Dengan menggunakan arsitektur dan alur kerja sistem yang dirancang pada tahap perencanaan, aplikasi berjalan dengan lancar dan semua fungsi utama dapat bekerja dengan baik. Antarmuka
aplikasi client-side memudahkan pengguna untuk melakukan interaksi dengan sistem, pengguna mendapatkan feedback yang jelas dari aplikasi pada saat melakukan inputan data.
3.6 Komunikasi
Evaluasi terhadap hasil pengujian aplikasi memberikan hasil yang sesuai dengan yang diharapkan. Aplikasi yang dihasilkan secara fungsional dapat digunakan dengan baik. Aplikasi yang berjalan dengan baik sudah dapat digunakan oleh EC Computer. Selama penggunaan aplikasi, admin memberikan informasi bahwa aplikasi dapat memenuhi kebutuhan penjualan
4.1 Kesimpulan
Hasil implematasi framework laravel di EC Computer berbasis website:
a. Aplikasi pelayanan dapat berfungsi dengan baik untuk membantu EC Computer dalam melakukan pendataan produk dan transaksi.
b. Hadirnya website toko online EC Computer yang dihasilkan pada penelitian ini memungkinkan pelanggan untuk melihat produk yang tersedia atau melakukan transaksi dapat di lakukan secara online.
c. Website toko online EC Computer masih belum dilengkapi fitur filter haraga dan pencari mengggunakan metode sequence seacrh untuk mendapatkan hasil yang optimal.
4.2 Saran
Terdapat beberapa saran yang dapat diberikan berkaitan dengan pengembangan website toko online EC computer dengan dengan menimplemetasikan framework laravel karena masih terdapat kelemahan. Berikut ini merupakan saran untuk pengembangan perangkat lunak selanjutnya. Pengembang selanjutnya dapat menambah fitur filter harga dengan rentang harga yang diinginkan. Pengembang selanjutnya juga dapat menambahkan fitur pencarian produk dengan metode sequence search untuk dapatkan hasil yang optimal dari deskripsi produk.
113
