Pengembangan Aplikasi Web Menggunakan Laravel dan React Mengacu pada Soal LKS - Perwira Learning Center

1. Latar Belakang

    Dalam rangka persiapan menghadapi LKS Web Technology tingkat kabupaten, saya melakukan pembelajaran berdasarkan soal LKS tahun lalu yang berfokus pada pengembangan aplikasi berbasis Server Side dengan pemisahan backend dan frontend. Mengacu pada soal tersebut, saya mempelajari dasar-dasar penggunaan Laravel sebagai backend, dimulai dari proses instalasi menggunakan Laravel Installer hingga memahami struktur project, routing, controller, dan pembuatan REST API. Selain itu, saya juga mempelajari penggunaan Postman untuk melakukan pengujian endpoint agar setiap fitur yang dibuat dapat berjalan sesuai dengan kebutuhan sistem pada soal.

    Pada sisi frontend, saya mempelajari implementasi React sebagai antarmuka pengguna, kemudian mempraktikkan pemisahan antara backend (Laravel) dan frontend (React) menjadi dua folder berbeda di satu project yang sama agar sesuai dengan standar pengerjaan LKS. Setelah itu, saya mempelajari konfigurasi CORS untuk menghubungkan kedua sistem sehingga dapat saling berkomunikasi melalui API. Berdasarkan pembelajaran yang dilakukan mengacu pada soal LKS Web Technologies, artikel ini berfokus pada pemahaman konsep, analisis kebutuhan sistem, serta praktik dasar pengembangan aplikasi web menggunakan Laravel dan React, bukan pada pembuatan proyek simulasi LKS secara penuh dari awal hingga akhir. 

2. Alat dan Bahan

2.1 Perangkat Lunak

- Sistem Operasi Linux Ubuntu

- Terminal

- Visual Studio Code

- Laravel

- React

- Postman

- XAMPP

- Library Axios

- Web Browser

2.2 Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Laravel

A. Pengenalan Singkat

    Laravel adalah sebuah framework aplikasi web berbasis PHP yang bersifat open-source, menggunakan konsep MVC (Model-View-Controller).

B. Instalasi Laravel

- Install dan siapkan XAMPP sesuai sistem operasi pada link berikut: https://www.apachefriends.org/download.html

- Install composer di terminal dengan perintah:

"curl -sS https://getcomposer.org/installer | sudo php -- --install-"

- Install Laravel via composer

"composer global require laravel/installer"

- Tambahkan composer ke Path, biasanya lokasi global composer ada di:

"~/.config/composer/vendor/bin" atau "~/.composer/vendor/bin"

- Lalu tambahkan ke ".bashrc" atau ".zshrc"

export PATH="$HOME/.config/composer/vendor/bin:$PATH"

- Simpan dan jalankan:

"source ~/.bashrc"

- Cek apakah berhasil dengan:

"laravel --version"

- Sekarang, kita bisa membuat project dengan hanya mengetik "laravel new nama_project"

C. Konsep Singkat

- Model

    Model adalah representasi objek dalam database yang memungkinkan kita untuk berinteraksi dengan data pada database secara mudah dan efisien. Cara membuat model yaitu:

"php artisan make:model NameModel"

- Controller

    Karena Laravel menerapkan konsep MVC (Model-View-Controller), maka Controller digunakan sebagai jembatan atau penghubung antara model dengan view. Cara membuat controller tergolong mudah, yaitu cukup dengan mengetik perintah berikut di terminal:

"php artisan make:controller NameController"

Maka nanti controller "NameController" akan terbuat disini:

- View

    View adalah komponen antarmuka pengguna (UI) yang bertanggung jawab untuk menampilkan data kepada pengguna.

- Method

    Merupakan fungsi yang terdefinisi di dalam sebuah class yang digunakan untuk melakukan aksi atau operasi spesifik, misalnya mengambil data dari database, input form, dan lain sebagainya. Berdasarkan gambar dibawah, "Login" adalah sebuah Method.

- Routing

    Routing adalah proses pengiriman data maupun informasi ke pengguna melalui sebuah permintaan yang dilakukan kepada alamat yang sudah terdaftar, lalu alamat tersebut akan memproses dari permintaan kita tadi.

3.2 Rest API

A. Apa Itu REST API?

    REST API (Representational State Transfer Application Programming Interface) adalah antarmuka pemrograman aplikasi yang memungkinkan dua sistem atau perangkat lunak berkomunikasi melalui jaringan (internet) dengan gaya arsitektur berbasis prinsip REST.

3.3 Penggunaan Postman

A. Apa Itu Postman?

    Postman adalah platform pengembangan yang digunakan untuk membangun, menguji, mendokumentasikan, dan memonitor API secara cepat tanpa koding manual.

B. Bagaimana Instalasinya?

    Kita bisa menginstall postman lewat website resminya, yaitu: https://www.postman.com/downloads/,

namun kita juga bisa mengakses postman lewat web versionnya meskipun agak terbatas.

3.4 Konsep Memisahkan Backend dengan Frontend

A. Konsep

    Dalam proyek ini, saya menerapkan konsep pemisahan antara backend dan frontend dalam pengembangan aplikasi web. Backend dibangun menggunakan Laravel sebagai penyedia API, sedangkan frontend dibangun menggunakan React sebagai antarmuka pengguna. Pemisahan ini dilakukan berdasarkan studi kasus soal LKS Kabupaten tahun sebelumnya. Pada arsitektur ini, Laravel bertugas mengelola logika bisnis, autentikasi, dan pengolahan data pada database, kemudian menyediakan data dalam bentuk API (JSON). React bertugas mengonsumsi API tersebut untuk menampilkan data dan mengelola interaksi pengguna. 

B. Implementasi

    Setelah semua dependensi Laravel dan React terinstall, berikut merupakan langkah-langkah yang perlu kita lakukan untuk memulai project pengembangan aplikasi web menggunakan Laravel dan React, yaitu:

1. Menyiapkan directory baru

2. Buat project Laravel dengan perintah "laravel new backend" dan pilih:

- No (opsional)

- None

- Pest

- No (opsional)

3. Setelah menunggu proses berjalan, apabila muncul pertanyaan untuk menginstall npm, pilih "yes"

4. Selesai, project Laravel siap digunakan

5. Selanjutnya, kita buat project React dengan perintah "npm create vite@latest"

6. Beri nama project nya sebagai frontend dan pilih framework React

7. Pilih JavaScript dan pilih "yes" untuk kedua pilihan berikut

8. Dengan begitu, React sudah siap untuk digunakan.

3.5 Menghubungkan Laravel dan React dengan CORS

A. Apa Itu CORS?
    CORS adalah singkatan dari Cross Origin Resource Sharing, yaitu kebijakan keamanan yang diterapkan oleh browser web untuk melindungi pengguna dari serangan lintas domain. Pada proyek ini, CORS dikonfigurasi agar aplikasi React (frontend) dapat mengakses REST API Laravel (backend) yang berjalan pada origin yang berbeda.

B. Bagaimana Cara Menghubungkan Keduanya lewat CORS?

    Untuk menghubungkan aplikasi Backend dan Frontend, peran CORS sangat dibutuhkan karena kedua aplikasi berjalan pada origin yang berbeda (port dan directory terpisah).

1. Konfigurasi CORS pada Backend Laravel

    Pada Laravel 12, middleware global tidak lagi menggunakan file Kernel.php, sehingga konfigurasi CORS dilakukan melalui file bootstrap/app.php. Middleware CORS ditambahkan pada bagian withMiddleware sebagai berikut :

    Selanjutnya, kita buat file konfigurasi config/cors.php untuk mengatur kebijakan akses lintas origin. Contoh konfigurasi yang digunakan adalah :

2. Konfigurasi akses API pada Frontend React

    Pada sisi frontend, library Axios digunakan untuk melakukan komunikasi HTTP dengan backend Laravel. Disini, kita harus menginstal librarynya terlebih dahulu:

    

    Selanjutnya, File konfigurasi Axios dibuat pada folder src/api/axiosConfig.js untuk mengatur base URL API dan token autentikasi:

Tak lupa, kita juga buat file ".env" untuk menyimpan base URL kita di folder src:

Setelah itu, kita sudah dapat menggunakan API apabila kita ingin mengambil data API menggunakan "api", contohnya seperti:

3.6 Analisis Kebutuhan Sistem Berdasarkan Soal LKS

    Berdasarkan kisi-kisi LKS Web Technology tahun lalu, aplikasi yang harus dibangun adalah sistem pembuatan form dinamis (mirip Google Forms) dengan fitur autentikasi, manajemen form, pertanyaan, dan respons.

A. Kebutuhan Backend (Laravel)

    Pada fase ini, backend harus menyediakan REST API untuk beberapa fitur utama, yaitu:

1. Autentikasi Pengguna

    Pengguna harus dapat melakukan login dan register menggunakan endpoint API dengan Laravel Sanctum atau JWT. Token digunakan sebagai Authorization Bearer untuk mengakses endpoint lain.

2. Manajemen Form

     Pada manajemen form, tersedia 3 endpoint untuk membuat form, menampilkan daftar form milik user, dan menampilkan detail form berdasarkan slug.

 

3. Manajemen Questions

    Setiap form dapat memiliki pertanyaan dengan tiga tipe, yaitu text, dropdown, dan checkbox. Backend harus dapat memvalidasi bahwa pilihan atau choices wajib ada untuk dropdown dan checkbox.

3. Manajemen Response
    Pengguna lain dapat mengisi form dan mengirim jawaban melalui API. Sistem juga harus membatasi satu response jika limit_one_response diaktifkan.

B. Kebutuhan Frontend (React)
    Pada fase kedua, frontend harus mengonsumsi API yang telah dibuat backend. Fitur yang harus ditampilkan di frontend antara lain:

1. Halaman Login dan Register
Frontend harus menampilkan form login dan register serta menampilkan error jika autentikasi gagal.

2. Dashboard Form
Pengguna dapat melihat daftar form yang telah dibuat.

3. Halaman Create Form
Pengguna dapat membuat form dengan input name, slug, description, dan limit response.

4. Halaman Detail Form
Pengguna dapat menambah pertanyaan, menghapus pertanyaan, melihat tabel response.

5. Halaman Submit Form (Public)
Pengguna lain dapat mengisi form dan mengirim jawaban.

    Melalui proses ini, saya mempelajari arsitektur pemisahan backend dan frontend, pembuatan REST API, pengujian menggunakan Postman, serta konfigurasi CORS untuk menghubungkan kedua sistem. Pembelajaran ini memberikan gambaran teknis mengenai standar pengembangan aplikasi web modern sesuai dengan karakteristik soal LKS, serta meningkatkan kesiapan saya dalam menghadapi kompetisi dan dunia industri.

4. Daftar Pustaka

BuildWithAngga. (2023, 4 April). Apa Itu Model Dalam Framework Laravel?. Diakses dari: https://buildwithangga.com/tips/apa-itu-model-pada-framework-laravel

Medium. (2018, 12 September). Belajar Laravel: Kupas Tuntas Routing di Laravel. Diakses dari: https://medium.com/@muhammad.ibrahim/belajar-laravel-kupas-tuntas-routing-di-laravel-f8dfac2e64fd

RumahWeb. (2023, 11 Mei). Apa Itu CORS? Pengertian dan Cara Mengaktifkannya. Diakses dari: https://www.rumahweb.com/journal/cors-adalah/