Tools
Sebelum mulai membuat project laravel, kita membutuhkan XAMPP sebagai server lokal dan composer sebagai manajer dependensi untuk PHP yang membantu mengatur dan menginstal pustaka, kalian bisa download melalui link berikut XAMPP dan COMPOSER.
Step 1 - Instalasi
Kita mulai dengan menyalakan apache dan mysql di XAMPP, lalu install laravel dengan membuka terminal di folder yang kita inginkan (misalnya htdocs di folder xampp), lalu ketik perintah :
composer create-project laravel/laravel:10.0 facegram
Kita menggunakan laravel:10.0 karna mengikuti module yang ada.
Setelah proses pembuatan project laravel selesai kita coba buka di VS code dan jalankan
php artisan serve
untuk memastikan laravel siap digunakan
Step 2 - Database
Setelah project dibuat kita akan mempersiapkan database terlebih dahulu, pertama buat database baru di phpmyadmin dengan nama 'facegram'.
Jika database sudah siap kita cocokan nama database yang dibuat dengan nama database di env laravel, agar laravel dapat terhubung dengan database.
Step 3 - Migration
Untuk membuat struktur table pada database kita bisa menggunakan migration, pertama hapus migration bawaan laravel di folder migration dan buat migration yang kita perlukan
Kita bisa otomatis membuat migration dengan menjalankan perintah
php artisan make:migration create_XXX_table
Ganti XXX dengan nama table yang akan dibuat sesuai yang dibutuhkan, pada module ini kita akan membuat 3 table dengan text berikut
php artisan make:migration create_users_table
php artisan make:migration create_posts_table
php artisan make:migration create_post_attachments_table
Setelah semua migration sudah dibuat jalankan perintah migrate
php artisan migrate
Step 4 - Model
Kita akan mendaftarkan semua table dan column kedalam model, hapus model bawaan (tinggalkan User model, karna biasanya akan digunakan), lalu jalankan perintah untuk membuat model otomatis
php artisan make:model XXX
Ganti XXX dengan nama table yang akan dibuat, pada module ini kita akan membuat 3 model
php artisan make:model User
php artisan make:model Post
php artisan make:model PostAttachment
NAMA MODEL HARUS DIAWALI HURUF BESAR
Step 5 - Controller
Selanjtunya untuk handling semua proses kita akan menggunakan controller, jadi kita perlu menghapus controller bawaan laravel (selain Controller.php), dan membuat controller yang kita butuhkan dengan menjalankan perintah berikut.
php artisan make:controller XXX
Ganti XXX dengan nama controller yang akan dibuat, pada module ini kita hanya butuh 2 controller
php artisan make:controller UserController
php artisan make:controller PostController
Step 6 - API Route
Agar user bisa menjalankan proses pada laravel kita buatkan daftar API route yang dibutuhkan di API.php
Gunakan group dan middelware sesuai kebutuhan seperti contoh dibawah.
Step 7 - Buat Fungsi
Step terakhir adalah membuat fungsi dari masing-masing api yang diminta.
CATATAN dan SARAN
Pahami validator dan selalu gunakan Try Catch beserta DB Transaction
...
Sebelum membagikan source code hapus folder pustaka yang bernama 'vendor' untuk Laravel, dan 'node_modules' untuk React.JS
Ini bertujuan untuk mengurangi ukuran source code
Dan untuk mengembalikan folder pustaka, cukup jalankan 'composer install' untuk Laravel, dan 'npm install' untuk React.JS
TAMBAHAN-1
Untuk menjalankan laravel langsung dengan url folder, copy file index.php didalam folder public keluar folder utama lalu modifikasi source dari gambar dibawah
Menjadi seperti digambar bawah, menghapus '/..' agar path sesuai karna index.php berada di folder utama.
Lalu coba akses localhost/BACKEND
TAMBAHAN-2
Untuk menjalankan react langsung dengan url folder, setting basename dengan nama folder yang akan digunakan nanti (misalnya: FRONTEND) pada app.js seperti gambar dibawah
Selanjutnya tambahkan "homepage": "FRONTEND"pada file package.json seperti gambar dibawah
Lalu build app dengan menjalankan
npm run build
Jika sudah selesai akan ada folder baru bernama buildCopy semua file dan folder didalam folder tersebut lalu copy kedalam folder FRONTEND. Misalnya buat folder FRONTEND didalam folder htdocs.
Coba akses localhost/FRONTEND
Source
Download source code BACKEND
Sebelum jalankan laravel lakukan 'composer install' terlebih dahulu
Download source code FRONTEND
Sebelum jalankan react lakukan 'npm install' terlebih dahulu
END - Goodluck Guys 🔥
