Rancang Bangun Web Optimasi Promosi Bimbingan Belajar Menggunakan Next.
JS Dengan Pendekatan Agile Irfan Rahmat Firmansyah1.
I Gde Agung Sri Sidhimantra Manajemen Informatika.
Fakultas Vokasi.
Universitas Negeri Surabaya Jl.
Ketintang Gang II.
Kec.
Wonokromo.
Kota Surabaya.
Jawa Timur 60231 21063@mhs.
2igdesidhimantra@unesa.
AbstrakAi Keterbatasan media promosi digital pada platform sederhana menjadi tantangan utama dalam meningkatkan efektivitas promosi bimbingan belajar.
Penelitian ini bertujuan merancang dan mengembangkan website promosi untuk cabang Bimbingan Belajar Master Prima di SMA Trimurti.
Surabaya, melalui platform yang modern dan ramah pengguna.
Proses penelitian diawali dengan wawancara dan observasi untuk mengidentifikasi kebutuhan Website dikembangkan menggunakan metodologi Agile dengan teknologi Next.
js sebagai frontend dan Supabase sebagai backend.
Sistem diuji melalui pengujian fungsionalitas dan pengujian penerimaan pengguna dengan melibatkan 27 responden.
Hasil pengujian menunjukkan tingkat keberhasilan fungsi 100% dan skor kepuasan pengguna 4,6 dari 5.
Penelitian ini menyimpulkan bahwa penerapan Next.
js dan Supabase melalui pendekatan Agile efektif meningkatkan visibilitas digital, mempercepat iterasi pengembangan, dan mendukung keberlanjutan promosi pendidikan Master Prima.
Kata kunciAiAgile.
Next.
Supabase.
Promosi Digital.
Website.
AbstractAi Limitations in digital promotional media on simple platforms represent a primary challenge in enhancing the promotional effectiveness of tutoring services.
The objective of this study is to design and build a promotional website for the Master Prima Tutoring branch at SMA Trimurti.
Surabaya, utilizing a modern and user-friendly The research process commenced with interviews and observations to identify promotional requirements.
The website was developed employing Agile methodology with Next.
js technology as the frontend and Supabase as the System validation was conducted through functional testing and user acceptance evaluation involving 27 Testing outcomes revealed a 100% functional success rate and a user satisfaction score of 4.
6 out of 5.
This study concludes that implementing Next.
js and Supabase through the Agile approach effectively enhances digital visibility, accelerates development iterations, and supports the sustainability of Master Prima's educational promotion.
KeywordsAiAgile.
Next.
Supabase.
Digital Promotion.
Website.
PENDAHULUAN
Kemajuan teknologi digital telah merevolusi cara lembaga pendidikan, termasuk bimbel, memasarkan Pembelajaran daring membuat materi pelajaran dari berbagai penjuru dunia bisa diakses siapa saja dengan mudah, sehingga cakupan peserta didik menjadi lebih luas dan merata.
Website kini menjadi fasilitas teknologi informasi vital yang berfungsi sebagai media pemasaran dan komunikasi untuk membangun hubungan erat dengan pelanggan.
Selain itu, optimalisasi pemasaran digital melalui website dapat meningkatkan kuantitas dan kualitas trafik secara signifikan melalui mesin pencari.
Media sosial pun berperan penting sebagai sarana promosi yang ampuh karena memudahkan komunikasi dua arah dengan calon siswa sekaligus menjangkau khalayak lebih luas.
Namun di sisi lain, metode promosi konvensional seperti penyebaran brosur atau pemasangan spanduk mulai dinilai kurang efektif.
Metode ini memiliki keterbatasan dalam hal jangkauan audiens dan risiko penyampaian informasi yang kurang mendetail, menjadikannya kurang relevan bagi target audiens yang menuntut akses informasi cepat dan transparan.
Sebagai solusi, penelitian ini mengembangkan website promosi mandiri menggunakan metodologi Agile.
Agile dipilih karena menawarkan fleksibilitas yang lebih baik dibandingkan metode terstruktur seperti Waterfall, terutama dalam mengakomodasi perubahan kebutuhan pengguna selama pengembangan.
Pengembangan ini memanfaatkan Next.
js untuk antarmuka yang responsif dan Supabase sebagai backend andal.
Pendekatan ini memastikan pengembangan berlangsung iteratif dan efisien melalui pembagian proyek dalam sprint kecil yang dievaluasi berkala.
II.
KAJIAN PUSTAKA
Manajemen Proyek dengan Scrum Penerapan kerangka kerja Scrum dalam metodologi Agile terbukti mampu meningkatkan produktivitas tim pengembang perangkat lunak.
Penelitian .
menunjukkan bahwa Scrum berdampak positif pada efisiensi kerja, komunikasi tim, dan kecepatan peluncuran produk.
Selain itu, metode ini sangat relevan untuk tim yang heterogen maupun pengembang individu karena fleksibilitasnya dalam menghadapi perubahan dinamis selama siklus proyek.
Dalam konteks pengembangan mandiri, teknik Solo Software Development Methodology dapat diterapkan untuk menjaga kualitas dan keamanan kode tanpa mengorbankan kelincahan.
Pengembangan Sistem Berbasis Web Sistem informasi berbasis web yang dibangun dengan teknologi modern seperti Next.
js mampu meningkatkan efisiensi manajemen data dan partisipasi menegaskan bahwa penggunaan framework ini sangat efektif untuk mendigitalkan proses manajemen organisasi.
Hal ini sejalan dengan temuan.
, yang menyatakan bahwa sistem informasi manajemen berbasis web dapat memperbaiki pengambilan keputusan dan akses informasi pelanggan secara signifikan dibandingkan sistem manual.
Pengujian Perangkat Lunak Untuk menjamin keberhasilan implementasi, pengujian sistem mutlak diperlukan.
Pengujian User Acceptance Testing (UAT) menjadi metode krusial untuk memvalidasi kualitas produk dan memastikan kepuasan pengguna akhir terhadap fitur yang ditawarkan.
Aplikasi yang telah melalui tahap UAT dengan hasil positif menunjukkan tingkat penerimaan yang baik dan kemudahan penggunaan yang tinggi.
Selain itu, evaluasi melalui metode Black-box juga penting untuk memastikan aplikasi berjalan efektif dan user-friendly sebelum diluncurkan ke publik .
METODE PENELITIAN
Gambar 1.
Alur Penelitian Alur penelitian yang ditampilkan pada gambar di atas menggambarkan tahapan-tahapan yang digunakan dalam proses perancangan website.
Penjelasan dari alur tersebut disajikan sebagai berikut:
Identifikasi Masalah Tahap identifikasi masalah dilakukan melalui pengamatan langsung dan wawancara mendalam dengan pemilik serta tim "Master Prima" untuk memahami kebutuhan dan tantangan yang dihadapi.
Metode ini bertujuan mengumpulkan data akurat guna merancang solusi yang tepat dan relevan dengan kebutuhan yang ada.
Studi Literatur Kajian literatur dilakukan untuk membangun landasan teoretis penelitian melalui pencarian dan pengumpulan berbagai referensi yang relevan dengan topik penelitian, seperti jurnal ilmiah, artikel, dan tesis, yang kemudian dijadikan dasar dalam merumuskan strategi pelaksanaan penelitian.
Pengumpulan Data Pengumpulan data dilaksanakan memenuhi kebutuhan dalam proses pengembangan Pada tahap ini, peneliti menerapkan dua metode pengumpulan data, yaitu:
Observasi Pengamatan langsung dilakukan terhadap aktivitas operasional di cabang SMA Trimurti Surabaya untuk memahami alur kerja promosi yang sedang berjalan dan mengidentifikasi kebutuhan spesifik yang belum terpenuhi oleh media promosi yang tersedia saat ini.
Wawancara Dilakukan melalui sesi tanya jawab langsung dengan tim pemasaran dan pemilik Bimbingan Belajar "Master Prima".
Hasil wawancara mengidentifikasi kendala utama, yaitu penggunaan platform Blogspot yang dinilai kurang profesional, sulit dikelola, dan memiliki tampilan yang tidak rapi, sehingga menghambat efektivitas promosi cabang Surabaya.
Activity Diagram Gambar 3.
Activity Diagram User Rancangan Sistem Perancangan sistem dilakukan menggunakan Unified Modeling Language (UML) guna memvisualisasikan struktur dan perilaku sistem sebelum memasuki tahap implementasi.
Diagram Use Case Gambar 4.
Diagram Aktivitas Admin Gambar 2.
Diagram Use Case Sistem dirancang melibatkan dua aktor utama, yaitu Admin dan User (Pengguna Umu.
User memiliki akses ke fitur publik seperti melihat beranda, membaca blog, dan mengecek harga paket.
Sementara itu.
Admin memiliki hak akses khusus untuk melakukan autentikasi, mengakses dashboard, serta mengelola konten blog .
embuat, mengedit, dan menghapus artike.
Alur aktivitas sistem dipetakan secara Untuk User, aktivitas dimulai dari mengakses beranda hingga mencari informasi Untuk Admin, alur dimulai dengan validasi kredensial pada halaman login.
Admin diarahkan ke dashboard untuk melakukan manajemen data sistem.
Diagram kelas Gambar 5.
Class Diagram Struktur sistem dibangun atas beberapa kelas utama yang saling berinteraksi.
Kelas DisplayPage dan ArticleView menangani tampilan konten kepada pengguna, sedangkan kelas ManageDashboard dan ArticleManage berfungsi sebagai pengendali logika di sisi Keamanan akses diatur oleh kelas HandleAuthentication.
Skema Database Foreign Key dan tipe data yang relevan seperti UUID dan Timestamp.
Implementasi Sistem Implementasi "Master Prima" menggunakan Next.
js sebagai frontend untuk menghasilkan antarmuka responsif dan modern, serta Supabase sebagai backend untuk mengelola basis data secara andal.
Metodologi Agile diterapkan dalam pengembangan untuk memastikan website adaptif dan fleksibel sesuai kebutuhan memungkinkan perbaikan berkelanjutan di setiap tahap pengembangan.
Pengujian Sistem Pada tahap pengujian sistem, peneliti menerapkan dua metode untuk memastikan kualitas dan keandalan aplikasi web.
Metode pertama adalah User Acceptance Testing (UAT) melalui Google Form yang disebarkan kepada mahasiswa untuk memvalidasi kesesuaian sistem dengan kebutuhan pengguna dan mendapatkan umpan balik mengenai kemudahan navigasi, autentikasi, pencarian, dan aksesibilitas blog.
Metode kedua adalah black-box testing melalui Google Form yang ditujukan kepada pemangku kepentingan untuk mengevaluasi fungsionalitas sistem sesuai spesifikasi yang Hasil evaluasi dari kedua metode dianalisis untuk mengidentifikasi area perbaikan, mengoptimalkan kinerja sistem, dan memastikan aplikasi web memenuhi standar kualitas serta kebutuhan pengguna secara efektif dan efisien.
IV.
HASIL DAN PEMBAHASAN
Gambar 6.
Skema Database Penyimpanan data dirancang menggunakan skema relasional yang komprehensif.
Tabel utama meliputi admin untuk data pengguna otoritatif, articles dan article_views untuk manajemen konten blog, serta pricing_plans untuk menyimpan informasi paket layanan.
Integritas data dijaga melalui penggunaan Tahap Persiapan Implementasi Sistem Tahap awal implementasi diawali dengan persiapan lingkungan pengembangan yang memadai untuk mendukung performa aplikasi optimal.
Spesifikasi perangkat keras yang digunakan dalam penelitian ini meliputi prosesor Intel Core i7-13650HX, memori RAM 12 GB DDR5, dan penyimpanan SSD 512 GB untuk menjamin kecepatan komputasi yang tinggi.
Pada aspek perangkat lunak, sistem operasi Windows 11 digunakan bersama runtime Node.
js v20.
x dan kerangka kerja Next.
Pengelolaan kode dilakukan menggunakan Visual Studio Code sebagai editor dan Git untuk kontrol versi.
Kombinasi spesifikasi ini dipilih untuk memastikan kompatibilitas teknologi dan efisiensi selama proses pengembangan hingga tahap deployment.
Implementasi Antarmuka Pengguna Desain antarmuka dikembangkan menggunakan kerangka kerja Next.
js dengan dukungan Tailwind CSS untuk memastikan tampilan yang modern, responsif, dan ramah pengguna.
Implementasi ini menghasilkan beberapa halaman utama yang strategis:
Halaman harga menyajikan daftar paket bimbingan secara komprehensif untuk memberikan transparansi layanan kepada calon siswa mengenai pilihan paket dan biaya yang tersedia.
Halaman Utama Gambar 9.
Halaman Blog Gambar 7.
Halaman Utama Halaman Blog menyajikan daftar artikel terstruktur yang menampilkan konten edukatif untuk mendukung strategi pemasaran konten dan meningkatkan keterlibatan pengguna dengan informasi relevan seputar layanan bimbingan Halaman ini berfungsi sebagai gerbang informasi utama yang menampilkan elemen visual seperti banner promosi, keunggulan lembaga, dan testimoni untuk memberikan gambaran menyeluruh mengenai layanan yang ditawarkan.
Halaman Harga Halaman Blog & Artikel Halaman Panel Admin Gambar 10.
Halaman Dashboard Admin Halaman Panel merupakan pusat manajemen sistem, dilindungi oleh sistem login yang aman, menawarkan visualisasi data statistik dan log aktivitas terkini.
Bilah navigasi yang dirancang intuitif memungkinkan akses mudah ke berbagai menu manajemen konten.
Gambar 8.
Halaman Price C.
Implementasi Metodologi Agile Penerapan metodologi Agile dalam proyek ini menggunakan pendekatan kerangka kerja Solo Scrum, yang dirancang untuk menjaga fleksibilitas dan efisiensi Proses ini dimulai dengan tahap perencanaan yang matang melalui estimasi beban kerja dan pembagian sprint.
Berdasarkan estimasi tersebut, fitur-fitur dibagi ke dalam dua sprint utama sebagaimana ditunjukkan pada gambar Product Backlog di atas.
- Sprint 1 Sprint pertama difokuskan pada pembangunan fondasi sistem atau Minimum Viable Product (MVP) yang meliputi pengembangan halaman utama, sistem login admin, manajemen blog dasar dengan fitur CRUD, serta halaman informasi statis seperti About dan Pricing.
Story Point - Sprint 2 Sprint kedua ditujukan untuk peningkatan fungsionalitas dan pengalaman pengguna melalui pengembangan fitur-fitur yang lebih dinamis seperti manajemen testimoni, pengelolaan FAQ, serta validasi konten untuk memastikan seluruh data tampil secara dinamis dari backend.
Gambar 11.
Story Point Sebelum pengembangan dimulai, seluruh kebutuhan sistem yang tercatat dalam product backlog diestimasi menggunakan metode Story Points dengan skala Fibonacci .
, 2, 3, 5, 8, 13, .
sebagaimana ditunjukkan pada gambar di atas.
Penggunaan merepresentasikan tingkat kompleksitas, usaha, dan risiko dari setiap fitur secara relatif.
Angka yang semakin besar dalam skala ini mencerminkan ketidakpastian yang lebih tinggi pada tugas yang kompleks, sehingga membantu pengembang dalam mengukur kapasitas kerja yang realistis untuk setiap iterasi sprint.
Visualisasi dan Pengendalian Progres Untuk menjaga transparansi dan disiplin kerja, alur penyelesaian tugas dikelola menggunakan papan Kanban yang memetakan status pengerjaan fitur secara real-time.
Status To Do Product Backlog Gambar 13.
To Do Kolom To Do memuat daftar antrean tugas yang telah diprioritaskan berdasarkan urgensi bisnis, dengan tugas di posisi teratas merupakan fitur prioritas yang harus diselesaikan terlebih dahulu sebelum mengerjakan fitur pendukung lainnya, sebagaimana ditunjukkan pada gambar di atas.
Gambar 12.
Product Backlog Status In Progress Kolom Done menampung fitur-fitur yang telah selesai dikembangkan dan lolos pengujian unit sebagaimana ditunjukkan pada gambar di atas.
Pada akhir Sprint 1 dan 2, seluruh item dalam backlog seperti fitur manajemen blog dan integrasi halaman utama berhasil dipindahkan ke status ini, menandakan bahwa fitur tersebut telah memenuhi kriteria "selesai" .
efinition of don.
dan siap Implementasi Database Gambar 14.
In Progress Fitur yang sedang dikerjakan dipindahkan ke kolom In Progress sebagaimana ditunjukkan pada gambar di atas.
Dalam konteks pengembangan individu (Solo Scru.
, kolom ini berfungsi membatasi pekerjaan aktif (Work In Progres.
untuk menjaga fokus pengembang, di mana satu tugas harus diselesaikan sepenuhnya sebelum beralih ke tugas lain guna mencegah inefisiensi akibat perpindahan konteks .
ontext switchin.
Status Done Gambar 15.
Done Gambar 16.
Database Infrastruktur penyimpanan data sistem dikembangkan menggunakan layanan Supabase sebagai Backend as a Service (BaaS) berbasis PostgreSQL.
Desain skema basis data dirancang secara relasional untuk mendukung pengelolaan konten dinamis yang terstruktur dan aman.
Sebagaimana ditunjukkan pada gambar di atas, arsitektur data terdiri dari beberapa entitas utama yang saling terintegrasi:
Manajemen Pengguna & Keamanan Tabel admin berfungsi sebagai pusat autentikasi dan otorisasi dengan relasi one-to-many terhadap tabel admin_activity_log, yang mencatat setiap aktivitas .
ction_typ.
, tabel yang dimodifikasi .
able_nam.
, dan perubahan data .
dalam format JSONB.
Mekanisme ini menciptakan jejak audit .
udit trai.
yang transparan untuk keamanan Manajemen Konten Blog Tabel articles menyimpan konten edukatif dan terhubung dengan tabel admin sebagai penulis .
serta tabel article_views untuk melacak statistik pengunjung berdasarkan alamat IP dan user Manajemen Layanan & Harga Informasi paket bimbingan dikelola dalam tabel pricing_plans yang memiliki relasi dengan pricing_categories untuk pengelompokan paket, serta mencatat admin yang melakukan pembaruan .
pdated_a.
akuntabilitas data.
Proses teknis pembuatan tagihan diimplementasikan melalui fungsi createInvoice pada sisi backend dengan alur logika sebagai berikut:
Konten Dinamis Lainnya Sistem juga mencakup tabel testimonials untuk ulasan siswa, team_members untuk profil pengajar, faqs untuk pertanyaan umum, dan site_settings yang menyimpan konfigurasi global situs seperti kontak WhatsApp, email, dan visi-misi agar dapat dimodifikasi tanpa mengubah kode program.
Seluruh tabel menggunakan UUID sebagai primary key untuk menjamin keamanan dan skalabilitas, serta dilengkapi dengan timestamp .
reated_at, updated_a.
untuk memastikan integritas data historis.
Relasi antar tabel dijaga menggunakan Foreign Key yang ketat untuk mencegah terjadinya inkonsistensi data.
Sistem menerima data pesanan dan informasi
pelanggan dari frontend
Fungsi memproses permintaan ke API Xendit untuk menghasilkan tautan pembayaran yang unik
Data transaksi awal disimpan ke dalam tabel
transactions di Supabase dengan status default
'PENDING'
Tautan pembayaran dikembalikan kepada pengguna untuk diselesaikan Setelah pengguna menyelesaikan pembayaran, sistem memanfaatkan mekanisme webhook dari Xendit untuk menerima konfirmasi secara otomatis.
Mekanisme ini memicu pembaruan status transaksi di basis data menjadi 'PAID' secara real-time, sehingga akses layanan dapat segera diberikan kepada pengguna.
Integrasi Pembayaran Implementasi Teknis dan Backend Secara teknis, sistem ini memiliki arsitektur modular.
Komponen antarmuka dibagi menjadi bagian-bagian yang lebih kecil dan dapat digunakan kembali, seperti bilah navigasi, footer, dan tab artikel.
Manajemen API & Autentikasi Gambar 18.
Potongan kode article API routes Gambar 17.
Potongan kode integrasi pembayaran Untuk memfasilitasi transaksi digital yang aman dan otomatis, sistem diintegrasikan dengan gerbang pembayaran .
ayment gatewa.
Xendit sebagaimana ditunjukkan pada gambar di atas.
Integrasi ini memungkinkan sistem untuk menerbitkan tagihan .
, menerima pembayaran melalui berbagai metode seperti transfer bank dan dompet digital, serta memverifikasi status pembayaran secara otomatis tanpa intervensi manual.
Komunikasi data dalam sistem ditangani melalui API Routes Next.
js sebagaimana ditunjukkan pada gambar di atas.
Implementasi endpoint untuk manajemen artikel menggunakan metode GET dan POST yang dilindungi oleh sistem autentikasi berbasis sesi.
Token sesi disimpan dalam HTTP-only cookies dan divalidasi menggunakan fungsi verifySessionPayload sebelum data dari basis data Supabase dapat diakses, memastikan keamanan dan integritas setiap transaksi data yang dilakukan.
Keamanan Data Selain validasi di level aplikasi, keamanan data diperkuat dengan penerapan Row-Level Security (RLS) pada Supabase.
Fitur ini membatasi akses ke tabel-tabel sensitif seperti admin dan transactions langsung di tingkat basis data, memastikan hanya pengguna dengan hak akses yang sah yang dapat membaca atau memodifikasi data.
Hasil Uji Sistem Tahap akhir implementasi adalah validasi kualitas sistem melalui dua metode pengujian utama untuk menjamin fungsi teknis dan penerimaan pengguna.
Black-box testing berfokus pada validasi fungsionalitas fitur tanpa melihat struktur kode Berdasarkan hasil pengujian sebagaimana ditunjukkan pada gambar di atas, seluruh skenario uji terhadap fitur krusial seperti navigasi halaman, formulir login, manajemen CRUD artikel, dan integrasi pembayaran berhasil dijalankan dengan status 100% Valid.
Tidak ditemukan kegagalan fungsi .
pada alur utama sistem yang diuji, menunjukkan bahwa seluruh fitur berfungsi sesuai dengan spesifikasi yang telah ditetapkan.
User Acceptance Testing Black-box Testing Gambar 20.
User Acceptance Testing Gambar 19.
Black-box Testing Pengujian penerimaan pengguna (UAT) dilakukan terhadap 27 responden untuk menilai kegunaan dan pengalaman pengguna menggunakan kuesioner skala Likert .
Hasil ringkasan, yang disajikan pada grafik di atas, menunjukkan bahwa mayoritas responden memberikan penilaian sangat positif, dengan rata-rata penilaian berkisar antara 4,4 hingga 4,7.
Hal ini menunjukkan bahwa antarmuka visual situs web, kemudahan navigasi, dan kejelasan informasi sangat memuaskan dan diterima dengan baik oleh pengguna target.
KESIMPULAN
Kesimpulan Penelitian mengimplementasikan sistem aplikasi web promosi .
untuk Bimbingan Belajar "Master Prima" cabang SMA Trimurti Surabaya menggunakan Next.
js sebagai frontend dan Supabase sebagai backend.
Penerapan metodologi Agile dengan pendekatan Solo Scrum .
dalam dua sprint memungkinkan pengembangan yang fleksibel dan responsif terhadap kebutuhan fungsional.
Hasil pengujian black-box menunjukkan validitas 100% untuk seluruh fitur utama tanpa kendala teknis, .
sementara User Acceptance Testing (UAT) mengonfirmasi tingkat penerimaan pengguna yang tinggi dengan penilaian sangat memuaskan terhadap kemudahan penggunaan dan tampilan visual.
Secara .
keseluruhan, sistem ini layak dan siap digunakan sebagai media promosi digital mandiri yang efisien bagi institusi pendidikan.
Saran Untuk pengembangan lebih lanjut, disarankan agar sistem dilengkapi dengan fitur pendaftaran online, integrasi pembayaran digital yang komprehensif, dan live chat untuk meningkatkan interaksi dengan calon Dari aspek teknis, perlu dilakukan pengujian keamanan mendalam .
enetration testin.
pada halaman admin serta penerapan sistem manajemen konten (CMS) internal yang lebih canggih agar staf pemasaran dapat mengelola informasi secara mandiri tanpa ketergantungan teknis yang tinggi.
REFERENSI