Aplikasi Regresi Linear Sederhana – Laravel + Vue 3 + MySQL

Tentang Produk

Dalam dunia analisis data dan statistika, kebutuhan untuk memprediksi nilai berdasarkan data historis adalah hal yang sangat umum — mulai dari prediksi penjualan, estimasi biaya, hingga proyeksi hasil akademik. Sayangnya, banyak tools statistik yang tersedia tidak ramah bagi pengembang web modern: terlalu berat, berbayar mahal, atau tidak bisa diintegrasikan ke dalam sistem berbasis web yang sudah ada. Di sinilah Aplikasi Regresi Linear Sederhana hadir sebagai solusi.

Dibangun dengan Laravel 10 sebagai backend API yang kokoh, Vue 3 sebagai frontend reaktif yang modern, serta MySQL sebagai penyimpan data yang handal, aplikasi ini memungkinkan pengguna untuk menginput data, memproses kalkulasi regresi linear secara otomatis di sisi server, lalu menampilkan hasil prediksi beserta visualisasi grafik yang interaktif — semua dalam satu antarmuka yang bersih dan responsif berbasis Tailwind CSS.

Produk ini ideal untuk mahasiswa statistika, data analyst pemula, dosen pengampu mata kuliah statistik, maupun developer yang ingin belajar arsitektur SPA (Single Page Application) Laravel + Vue 3 dengan integrasi Chart.js. Source code ini juga sangat cocok dijadikan bahan skripsi, tugas akhir, atau portofolio pengembangan aplikasi web berbasis metode statistika.

Akses Demo Live

Coba langsung aplikasi ini tanpa perlu instalasi melalui link demo berikut:

Keterangan Detail

 URL Demo

https://regresi-linear.lintascode.com

Role

Pengguna Umum (Single Role)

Username / Email

-

Password

-

Catatan

Aplikasi dapat diakses langsung tanpa login. Eksplorasi fitur input data dan visualisasi grafik regresi secara bebas.

Fitur Unggulan

• Input Data Variabel X dan Y — Pengguna dapat memasukkan pasangan data (variabel bebas X dan variabel terikat Y) secara dinamis untuk diproses ke dalam model regresi linear.
• Kalkulasi Regresi Linear Otomatis — Backend Laravel menghitung koefisien regresi (slope/b dan intercept/a) secara otomatis menggunakan metode Ordinary Least Squares (OLS) tanpa perlu library statistik eksternal.
• Prediksi Nilai Berdasarkan Input X — Setelah model terbentuk, pengguna dapat memasukkan nilai X baru dan aplikasi akan menghasilkan prediksi nilai Y secara instan.
• Visualisasi Grafik Scatter Plot + Garis Regresi — Hasil regresi divisualisasikan secara grafis menggunakan Chart.js melalui vue-chartjs, menampilkan titik data asli dan garis regresi yang terbentuk.
• Tampilan Persamaan Regresi — Aplikasi menampilkan persamaan matematis regresi (ŷ = a + bX) secara eksplisit sehingga pengguna memahami model yang dihasilkan.
• API Backend Laravel (RESTful) — Semua proses kalkulasi ditangani oleh API Laravel yang terstruktur, memisahkan logika bisnis dari antarmuka pengguna secara bersih.
• Frontend SPA dengan Vue 3 + Vue Router — Navigasi halaman dilakukan tanpa reload menggunakan Vue Router, memberikan pengalaman pengguna yang cepat dan mulus layaknya aplikasi native.
• Desain Responsif dengan Tailwind CSS — Antarmuka aplikasi dirancang responsif menggunakan Tailwind CSS, tampil optimal di desktop maupun perangkat mobile.
• Komunikasi Frontend-Backend via Axios — Pengiriman dan penerimaan data antara Vue 3 dan API Laravel menggunakan Axios, memastikan proses asinkron yang efisien dan terstruktur.
• Penyimpanan Data ke Database MySQL — Data input pengguna dan hasil kalkulasi dapat disimpan ke database MySQL melalui Eloquent ORM Laravel untuk keperluan riwayat atau analisis ulang.

Infografis Cepat

Aspek Detail

 Jumlah Halaman (Estimasi)

2–4 halaman (Input Data, Hasil & Grafik, Prediksi)

Jumlah Modul Utama

2 modul (Frontend Vue 3 SPA + Backend Laravel API)

Jumlah Role Pengguna

1 role (Pengguna Umum / Single User)

Metode Statistika

Regresi Linear Sederhana (Simple Linear Regression)

Visualisasi Data

Chart.js via vue-chartjs (Scatter Plot + Regression Line)

Tech Stack Badge

Laravel 10 | Vue 3 | Vite | Tailwind CSS | MySQL | Chart.js | Axios

Versi PHP Minimum

PHP 8.1+

Lisensi

MIT

Alur Penggunaan

1. Clone & Install Dependensi — Clone repository dari GitHub, lalu jalankan composer install untuk dependensi PHP dan npm install untuk dependensi JavaScript (Vue 3, Chart.js, Tailwind CSS, dll).
2. Konfigurasi Environment — Salin file .env.example menjadi .env, lalu isi konfigurasi database MySQL (DB_DATABASE, DB_USERNAME, DB_PASSWORD) sesuai server lokal atau hosting Anda.
3. Generate Key & Migrasi Database — Jalankan php artisan key:generate untuk menghasilkan app key, kemudian php artisan migrate untuk membuat tabel-tabel yang diperlukan di MySQL.
4. Build Asset Frontend — Jalankan npm run build untuk production atau npm run dev untuk mode development. Vite akan mengkompilasi Vue 3 dan Tailwind CSS ke aset statis yang siap dipakai.
5. Menjalankan Server — Jalankan php artisan serve untuk menghidupkan backend Laravel API di localhost:8000. Frontend SPA Vue 3 akan berkomunikasi dengan API ini via Axios.
6. Input Data & Analisis — Buka browser, akses aplikasi, masukkan pasangan data X dan Y, klik tombol proses, dan lihat hasil kalkulasi koefisien regresi, persamaan matematis, serta visualisasi grafik scatter plot secara langsung.
7. Prediksi Nilai Baru — Setelah model regresi terbentuk, masukkan nilai X baru pada kolom prediksi untuk mendapatkan estimasi nilai Y yang dihitung secara otomatis oleh server Laravel.

Tech Stack & Arsitektur

• Laravel 10 (PHP 8.1+) — Framework PHP terpopuler dipilih sebagai backend API karena kemudahannya dalam membangun RESTful API yang terstruktur, keamanan built-in (Laravel Sanctum), dan ekosistem yang matang.
• Vue 3 — Framework JavaScript progresif dengan Composition API yang ringan dan reaktif, ideal untuk membangun antarmuka SPA yang dinamis dan responsif terhadap perubahan data secara real-time.
• Vite — Build tool generasi terbaru yang menggantikan Webpack, memberikan hot-reload yang sangat cepat selama development dan bundling yang optimal untuk production.
• Tailwind CSS — Framework utility-first CSS yang memungkinkan styling cepat dan konsisten tanpa menulis CSS kustom yang berlebihan, menghasilkan UI yang bersih dan responsif.
• Chart.js + vue-chartjs — Library visualisasi data yang powerful dengan binding Vue yang mudah digunakan, digunakan untuk merender scatter plot dan garis regresi secara interaktif di browser.
• Axios — HTTP client berbasis Promise yang digunakan untuk komunikasi asinkron antara frontend Vue 3 dan backend Laravel API, memastikan request/response data berjalan efisien.
• Vue Router 4 — Router resmi untuk Vue 3 yang mengelola navigasi antar halaman dalam mode SPA tanpa full-page reload, meningkatkan performa dan UX aplikasi.
• MySQL — Database relasional yang handal digunakan untuk menyimpan data input pengguna dan hasil kalkulasi regresi, diakses melalui Eloquent ORM Laravel.
• Laravel Sanctum — Paket autentikasi ringan dari Laravel yang disertakan untuk keperluan keamanan API bila diperlukan pengembangan lebih lanjut dengan sistem login.

Cocok Untuk

• Mahasiswa Statistika & Matematika — Sebagai alat bantu visual untuk memahami konsep regresi linear sederhana secara interaktif, jauh lebih menarik dari sekadar spreadsheet Excel.
• Developer Belajar Arsitektur Laravel + Vue 3 — Source code ini adalah contoh nyata implementasi SPA dengan backend API Laravel, sangat bermanfaat sebagai referensi pembelajaran integrasi full-stack.
• Tugas Akhir / Skripsi Mahasiswa Informatika — Produk ini dapat langsung dijadikan basis atau referensi proyek tugas akhir dengan topik sistem pendukung keputusan berbasis metode statistika.
• Dosen & Pengajar Mata Kuliah Statistika — Dapat digunakan sebagai media ajar interaktif di kelas untuk mendemonstrasikan konsep regresi linear kepada mahasiswa secara visual dan real-time.
• Data Analyst Pemula — Bagi yang ingin memahami implementasi regresi linear dalam konteks aplikasi web nyata sebelum beralih ke tools yang lebih kompleks seperti Python atau R.
• Developer Portofolio — Proyek yang lengkap dengan full-stack architecture (Laravel API + Vue 3 SPA) ini sangat cocok ditampilkan sebagai portofolio profesional pengembangan web modern.

Peta Menu Aplikasi

Berikut peta lengkap halaman & menu yang tersedia di aplikasi, dipisah per area pengguna:

🌐 Halaman Aplikasi (Single Area – Publik)

• Halaman Input Data — Halaman utama tempat pengguna memasukkan pasangan nilai variabel bebas (X) dan variabel terikat (Y) untuk diproses ke dalam model regresi linear sederhana.
• Halaman Hasil Regresi & Grafik — Menampilkan output kalkulasi regresi berupa nilai koefisien a (intercept) dan b (slope), persamaan garis regresi (ŷ = a + bX), serta visualisasi grafik scatter plot dengan garis regresi yang terbentuk menggunakan Chart.js.
• Halaman / Form Prediksi Nilai — Fitur prediksi di mana pengguna dapat memasukkan nilai X baru dan aplikasi secara otomatis menghitung dan menampilkan estimasi nilai Y berdasarkan model regresi yang telah dibangun.

FAQ

Q: Apakah saya harus punya pengetahuan statistika untuk menggunakan aplikasi ini?

A: Tidak harus. Aplikasi dirancang cukup intuitif — Anda cukup memasukkan pasangan data X dan Y, lalu sistem akan otomatis menghitung dan menampilkan hasilnya. Pemahaman dasar statistika akan membantu Anda menginterpretasikan hasil, namun bukan prasyarat mutlak untuk mengoperasikan aplikasi.

Q: Apakah source code ini bisa dimodifikasi untuk kebutuhan proyek saya?

A: Ya, sepenuhnya bisa. Produk ini berlisensi MIT, artinya Anda bebas menggunakan, memodifikasi, dan mendistribusikan ulang source code ini — termasuk untuk keperluan komersial — selama mencantumkan atribusi sesuai ketentuan lisensi MIT.

Q: Apakah aplikasi ini mendukung regresi linear berganda (multiple linear regression)?

A: Berdasarkan deskripsi dan konfigurasi yang tersedia, aplikasi ini dibangun spesifik untuk metode Regresi Linear Sederhana (satu variabel X). Pengembangan untuk mendukung multiple regression dapat dilakukan dengan memodifikasi logika kalkulasi di controller Laravel dan form input di frontend Vue.

Q: Versi PHP dan Node.js berapa yang dibutuhkan?

A: Aplikasi membutuhkan PHP versi 8.1 ke atas (sesuai requirement Laravel 10) dan Node.js versi 18 ke atas untuk menjalankan Vite 5 dan npm dengan baik. Pastikan server atau komputer lokal Anda memenuhi persyaratan ini sebelum instalasi.

Q: Bisakah aplikasi ini di-deploy di shared hosting cPanel?

A: Bisa, asalkan hosting Anda mendukung PHP 8.1+, MySQL, dan memungkinkan Anda menjalankan perintah Composer. Untuk frontend, Anda perlu menjalankan npm run build terlebih dahulu di lingkungan lokal, lalu upload folder public dan hasil build ke server cPanel.

Q: Apakah tersedia fitur autentikasi login untuk mengamankan aplikasi?

A: Laravel Sanctum sudah disertakan dalam dependensi, namun berdasarkan analisis proyek ini fitur autentikasi belum diimplementasikan secara penuh di versi saat ini. Anda dapat mengembangkan sistem login dengan mudah menggunakan Laravel Sanctum yang sudah tersedia di codebase.

Q: Apakah grafik yang dihasilkan bisa di-export atau disimpan sebagai gambar?

A: Chart.js secara native mendukung fungsi export grafik ke format PNG melalui method toBase64Image(). Fitur tombol download grafik dapat ditambahkan dengan mudah ke komponen vue-chartjs yang sudah digunakan di aplikasi ini.

Cara Deploy

Berikut panduan deploy aplikasi ini di VPS (Ubuntu/Debian) maupun environment lokal:

1. Clone Repository — Jalankan perintah: git clone https://github.com/zukii-vixii/regresi-linear.git lalu masuk ke direktori project: cd regresi-linear.
2. Install Dependensi PHP — Jalankan composer install --optimize-autoloader --no-dev untuk menginstall semua package Laravel yang dibutuhkan.
3. Install Dependensi JavaScript — Jalankan npm install untuk menginstall Vue 3, Vite, Tailwind CSS, Chart.js, dan dependensi frontend lainnya.
4. Konfigurasi File .env — Salin .env.example menjadi .env dengan perintah cp .env.example .env, lalu edit file .env dan isi variabel: DB_DATABASE, DB_USERNAME, DB_PASSWORD, dan sesuaikan APP_URL dengan domain Anda.
5. Generate Application Key — Jalankan php artisan key:generate untuk menghasilkan APP_KEY yang unik dan aman.
6. Migrasi Database — Jalankan php artisan migrate untuk membuat seluruh tabel yang diperlukan di database MySQL Anda.
7. Build Frontend Assets — Untuk production, jalankan npm run build. Vite akan mengkompilasi semua aset Vue 3 dan Tailwind CSS ke folder public/build.
8. Konfigurasi Web Server — Untuk VPS dengan Nginx, arahkan document root ke folder /public dan pastikan URL rewriting aktif. Untuk cPanel, upload seluruh file ke public_html dan arahkan domain ke folder public.
9. Optimasi Laravel (Production) — Jalankan php artisan config:cache, php artisan route:cache, dan php artisan view:cache untuk performa optimal di lingkungan production.

Kenapa Pilih Produk Ini

Di antara banyak pilihan source code statistika yang tersedia, Aplikasi Regresi Linear Sederhana ini menawarkan kombinasi yang jarang ditemukan: implementasi metode statistika yang akurat, dikemas dalam arsitektur full-stack modern yang benar-benar bisa dipelajari dan dikembangkan lebih lanjut. Bukan sekadar script sederhana, melainkan aplikasi web berstandar industri dengan pemisahan backend API (Laravel) dan frontend SPA (Vue 3) yang bersih — lengkap dengan visualisasi data interaktif via Chart.js.

Dengan harga yang sangat terjangkau, Anda mendapatkan source code berkualitas yang bisa langsung dipakai untuk keperluan akademik, dijadikan fondasi pengembangan sistem yang lebih kompleks, atau dipelajari sebagai referensi arsitektur Laravel + Vue 3 yang real-world. Investasi terbaik untuk developer yang ingin naik level! 🚀 Dapatkan sekarang dan mulai eksplorasi kode serta kembangkan sesuai kebutuhan Anda.