SAPUTRA, FIRMANSYAH ADITIA (2026) PERANCANGAN DAN IMPLEMENTASI FRONTEND WEBSITE E-COMMERCE BAHAN KUE BERBASIS WEB DENGAN KONSEP SMART RECOMMENDATION. S1 thesis, Universitas Mercu Buana Jakarta.
|
Text (HAL COVER)
Cover.pdf Download (835kB) | Preview |
|
|
Text (BAB I)
Bab 1.pdf Restricted to Registered users only Download (92kB) |
||
|
Text (BAB II)
Bab 2.pdf Restricted to Registered users only Download (79kB) |
||
|
Text (BAB III)
Bab 3.pdf Restricted to Registered users only Download (1MB) |
||
|
Text (BAB IV)
Bab 4.pdf Restricted to Registered users only Download (345kB) |
||
|
Text (BAB V)
Bab 5.pdf Restricted to Registered users only Download (27kB) |
||
|
Text (DAFTAR PUSTAKA)
Daftar Pustaka.pdf Restricted to Registered users only Download (129kB) |
||
|
Text (LAMPIRAN)
Lampiran.pdf Restricted to Registered users only Download (456kB) |
Abstract
The growth of digital commerce requires e-commerce websites to integrate catalogs, authentication, carts, delivery locations, payments, and order monitoring into a consistent user journey. This study designs and implements the frontend of “Bunda Kito”, a web-based baking-ingredient e-commerce platform with a smart recommendation concept implemented through natural-language product search and contextual recipe suggestions based on weather conditions. An iterative software-development approach was applied, covering requirements analysis, UML and database design, Laravel 12 and Blade implementation, and preliminary testing. The system provides product catalogs and details, text normalization, synonym expansion and simple typo tolerance, email OTP authentication, user profiles and address coordinates using Leaflet, session-based carts, checkout, order management, reviews, and an administrator dashboard. QRIS payment is integrated through Midtrans Snap. The backend creates a Snap Token from the invoice and order total, the frontend opens the payment interface through Snap.js, and payment status is updated through a verified webhook and the Get Status API. Database transactions and a stock_deducted_at marker ensure that inventory is deducted only once after a successful payment. Syntax inspection of 71 PHP files found no syntax errors. The implementation indicates that a responsive frontend, contextual discovery features, and automatic QRIS payment can provide a more complete journey from product exploration to order monitoring. Sandbox integration tests, respondent-based black-box testing, and usability evaluation are still required before production deployment. Keywords: e-commerce, frontend, Laravel, QRIS, Midtrans Snap, OTP, context-aware recommendation. Perkembangan perdagangan digital menuntut website e-commerce yang tidak hanya menampilkan katalog, tetapi juga mengintegrasikan autentikasi, pengelolaan keranjang, lokasi pengiriman, pembayaran, dan pemantauan pesanan dalam satu alur yang konsisten. Penelitian ini merancang dan mengimplementasikan frontend website e-commerce bahan kue “Bunda Kito” dengan konsep smart recommendation yang diterapkan melalui pencarian produk berbasis bahasa alami dan rekomendasi resep kontekstual berdasarkan cuaca. Metode penelitian menggunakan pendekatan pengembangan perangkat lunak iteratif yang mencakup analisis kebutuhan, perancangan UML dan basis data, implementasi Laravel 12 dengan Blade, serta pengujian awal. Sistem menyediakan katalog dan detail produk, pencarian dengan normalisasi teks, sinonim, dan toleransi salah ketik, autentikasi OTP email, profil dan titik alamat menggunakan Leaflet, keranjang berbasis sesi, checkout, pengelolaan pesanan, ulasan, serta dashboard admin. Pembayaran QRIS diintegrasikan menggunakan Midtrans Snap. Backend membuat Snap Token berdasarkan invoice dan total pesanan, frontend membuka antarmuka pembayaran melalui Snap.js, sedangkan status pembayaran diperbarui melalui webhook terverifikasi dan pemeriksaan Get Status API. Mekanisme transaksi basis data dan penanda stock_deducted_at digunakan agar stok hanya berkurang satu kali setelah pembayaran berhasil. Pemeriksaan sintaks terhadap 71 berkas PHP menunjukkan seluruh berkas lolos tanpa kesalahan sintaks. Hasil implementasi menunjukkan bahwa integrasi frontend responsif, fitur pencarian dan rekomendasi kontekstual, serta pembayaran QRIS otomatis dapat membentuk perjalanan pengguna yang lebih utuh dari eksplorasi produk sampai pemantauan pesanan. Pengujian Sandbox, black-box dengan responden, dan evaluasi usability tetap diperlukan sebelum penerapan produksi. Kata kunci: e-commerce, frontend, Laravel, QRIS, Midtrans Snap, OTP, context-aware recommendation.
Actions (login required)
![]() |
View Item |
