Showing posts with label NextJS. Show all posts

 

 

Pada kesempatan kali ini, saya akan membahas tentang Laravel 9, karena banyak sekali fitur baru yang menarik. Salah satunya Laravel breeze ,...

Pada kesempatan kali ini, saya akan membahas tentang Laravel 9, karena banyak sekali fitur baru yang menarik. Salah satunya Laravel breeze, jadi kali ini kita akan belajar dari awal cara setup Laravel sebagai backend dan NextJs sebagai frontend nya.

Temen-temen, sebaiknya jika kalian ingin mengikuti seri artikel ini, lebih baik mempunyai dasar pemahaman dulu tentang :

  • Php Native 
  • OOP (Object Oriented Programming)
  • MySQL
  • Javascript
  • React.js
  • Dasar laravel (opsional)
Gimana? Ready??
Pertama, pastikan Composer dan software manajemen stack webserver kalian sudah terinstall (XAMPP/Laragon, dsb), dan juga pastikan bahwa di laptop kalian sudah menggunakan PHP 8.x. 

Jika sudah..

Install Laravel project, dengan nama folder "backend"

Sekarang Laravel menyediakan yang Namanya Stater Kit https://laravel.com/docs/9.x/starter-kits yang membantu kita ketika ingin membuat sebuah project baru. Kita akan menggunakan Laravel Breeze, ini merupakan sebuah package yang membuatkan kita semua Laravel authentication minimal features termasuk login, registration, password reset, email verification, dan password confirmation.

Masuk ke folder laravel backend kita, lalu install Laravel Breeze

Lalu jalankan perintah php artisan breeze:install api, untuk generate API dari breeze nya

Buat database di phpMyAdmin, lalu rename file .env.example menjadi .env dan ubah nama database sesuai yang kita bikin tadi


Di CMD, pada folder backend kita, jalankan php artisan migrate 
Dan akan membuat table secara otomatis ke database kita

Buka folder backend di vscode, jika kita lihat ke file routes/auth.php, di sisi auth sudah terbuat secara otomatis oleh breeze yang tentunya bisa kita pakai
Jalankan project backend nya dengan php artisan serve lalu buka di browser http://127.0.0.1:8000, akan muncul tampilan seperti dibawah ini

Selanjutnya, kita akan clone project NextJs yang sudah disediakan Laravel pada repository ini 

Pada cmd, ketikkan perintah dibawah 

Rename breeze-next folder menjadi frontend

Di cmd, masuk ke folder frontend, jalankan perintah npm install (pastikan laptop kalian sudah terinstall node ya guys)

Jika sudah selesai, copy dan rename file .env.example menjadi .env.local

Sesuaikan value dari NEXT_PUBLIC_BACKEND_URL dengan IP url project backend kita yang muncul saat php artisan serve, secara default akan mengarah ke localhost:8000, seperti gambar dibawah

(localhost = 127.0.0.1)

Di project frontend kita, jalankan npm run dev , lalu akses http://localhost:3000/

Yeap, kita sudah berhasil menjalankan frontend project nya, kalian bisa langsung mencoba untuk register dan login yaa

Salam Coding­čśÄ