[#4] Tutorial Instalasi Proyek Website Menggunakan Framework Laravel dan Filament

#LearningTogether #ForBetterFuture

Introduction

Hola Rekan-Rekan semua, kembali lagi Kita akan melanjutkan pembahasan untuk tutorial instalasi proyek website menggunakan framework Laravel dan filament. Pastikan tools yang dibutuhkan telah terinstal dengan baik sehingga Kita dapat mulai mengerjakannya sekarang.


Instalasi Laravel

Instalasi Laravel via CLI laravel new

Berikut tutorialnya instalasi yang dapat Kita lakukan :

  1. Aktifkan modul Apache sebagai server dan MySQL sebagai database penyimpanan data yang akan digunakan.

  2. Buka CMD dengan menekan tombol Win + R untuk membuka menu Run, lalu tikkan "cmd" kemudian ENTER.

  3. Kemudian posisikan directory berada pada folder htdocs yang berada pada direktori xampp yang telah terinstal sebelumnya dengan ketentuan :

    - Keluar folder menggunakan sintax cd ..
    - Masuk menuju folder tertentu menggunakan sintax cd foldername

  4. Cek terlebih dahulu apakah composer sudah terinstal atau belum dengan sintax CLI berupa composer -v

  5. Cek kembali apakah Laravel Installer telah terinstal apa belum dengan sintax CLI berupa laravel -v

  6. Apabila kedua tools tersebut telah terinstall maka dapat dilanjutkan ke tahap instalasi proyek Laravel dengan menggunakan sintax laravel new projectname sebagai contoh latihan maka Kita dapat menuliskan dengan webappv01.

  7. Selanjutnya pilih none pada starter kit dikarenakan Kita akan menggunakan filament php, kemudian pilih angka 1 - PHPUnits untuk testing framework yang akan digunakan (saat ini Kita tidak fokus pada penggunaan kerangka pengujian yang akan digunakan) sehingga secara umum dapat memilih PHPUnit.

  8. Pilih mysql sebagai database yang akan Kita gunakan.

  9. Lalu ketik yes untuk menyetujui bahwa proses instalasi akan melakukan migrasi untuk default database atau konfigurasi awal database secara otomatis yang telah dilakukan oleh Laravel***.***

  10. Selanjutnya Kita perlu masuk ke folder proyek Laravel yang baru saja selesai Kita buat dengan sintax cd webappv01

  11. Lalu Kita perlu menjalankan sintax CLI berupa npm install && npm run build untuk mensetup tampilan awal sebelum hasil instalasi proyek Laravel yang telah Kita lakukan dapat di jalankan.

  12. Apabila telah selesai Kita dapat menjalankan sintax CLI berupa composer run dev untuk menjalankan hasil instalasi proyek Laravel.

  13. Kemudian akses link http://localhost:8000 menggunakan browser yang terinstall pada device Kita seperti google chrome atau microsoft edge, maka akan muncul tampilan seperti berikut ini :

  14. Maka instalasi proyek website menggunakan Laravel selesai dilakukan.

Instalasi Laravel via Composer

  1. Pastikan telah membuka command prompt dan lokasi directory telah berada di folder htdocs, kemudian jalankan perintah berikut composer create-project "laravel/laravel:^11.0" example-app ganti example-app dengan nama proyek yang diinginkan, untuk studi kasus ini saya memberikan nama webappv02, lalu klik enter.

  2. Setelah proses instalasi Laravel selesai, maka dapat Kita lanjutkan untuk membuka proyek Laravel di vs code dengan menjalankan perintah cd webappv02 »code .

    .

  3. Setelah vs code terbuka, Kita perlu setting database melalui file .env lalu Kita ganti konfigurasi menjadi berikut ini.

     //Sintax awal :
     DB_CONNECTION=sqlite
     # DB_HOST=127.0.0.1
     # DB_PORT=3306
     # DB_DATABASE=laravel
     # DB_USERNAME=root
     # DB_PASSWORD=
    
     //Diganti dengan sintax berikut :
     DB_CONNECTION=mysql
     DB_HOST=127.0.0.1
     DB_PORT=3306
     DB_DATABASE=webappv02 //Sesuai nama proyek laravel yang dibuat.
     DB_USERNAME=root
     DB_PASSWORD=
    
  4. Selanjutnya aktifkan terminal vs code (command prompt) dengan menekan tombol ctrl + `(Berada di samping angka 1), Setelah terbuka jalankan perintah php artisan migrate

    Apabila muncul konfirmasi terkait database belum dibuat sesuai dengan nama proyek laravel yang sedang Kita buat maka tinggal tekan enter atau tulis yes lalu enter.

  5. Kemudian jalankan perintah php artisan serve untuk menjalankan proyek Laravel melalui server lokal di aplikasi browser.

  6. Selajutnya untuk mengakses hasil melalui browser dengan arahkan kursor ke link http://127.0.0.1:800 lalu tekan tombol ctrl + klik kiri Maka secara otomatis akan membuka browser.

    Maka proses instalasi Laravel telah berhasil dilakukan.


Instalasi Filament

Setelah selesai Kita melakukan instalasi proyek website Laravel maka Kita baru dapat melakukan instalasi Starter Kit berupa FilamentPHP, dengan mengikuti langkah-langkah sebagi berikut :

  1. Kembali Kita perlu membuka CMD lalu akhiri proses log saat menjalankan proyek Laravel pada tahap sebelumnya dengan menekan tombol ctrl + c lalu ketikan huruf Y .

  2. Kemudian Kita dapat menjalankan sintax CLI berupa composer require filament/filament:"^3.2" -W lalu tunggu hingga proses instalasi berakhir.

  3. Kemudian Kita lanjutkan untuk melakukan instalasi panel dengan menjalankan sintax CLI berikut php artisan filament:install --panels lalu tekan ENTER.

  4. Selanjutnya ketikan nama metalink, sebagai contoh Kita dapat menggunakan kata admin sesuai dengan rekomendasi filament dengan menekan ENTER, apabila Kita perlu kata selain admin dapat menuliskan terlebih dahulu, seperti kata : dashboard, user, dll. baru kemudian tekan ENTER.

  5. Kemudian Kita dapat mengetikan kata no lalu ENTER untuk konfirmasi bahwa Kita tidak akan memberikan rating kepada filamentPHP melalui repo github pada saat ini.

  6. Selanjutnya Kita perlu membuat data akun admin dengan menuliskan sintax CLI berupa php artisan make:filament-user lalu tuliskan identitas sebagai contoh :
    - name : Admin.
    - email : admin@webappv01.dev.
    - password : Admin123
    lalu tekan ENTER.

  7. Selanjutnya Kita dapat menjalankan kembali proyek laravel Kita dengan sintax CLI berupa php artisan serve lalu tekan ENTER.

  8. Kemudian akses melalui browser dengan link http://127.0.0.1:8000/admin/login lalu tekan ENTER. Kemudian login dengan data akun admin yang telah dibuat sebelumnya.

  9. Jika proses logi sukses, maka akan muncul tampilan seperti berikut ini

  10. Proses instalasi filamentPHP pada proyek Laravel telah selesai dilakukan.


Demikian pengantar singkat tentang proses instalasi proyek pembuatan website menggunakan Laravel dan FilamentPHP semoga dapat memberikan gambaran bagaimana langkah langkah yang harus dilakukan hingga menjalankan website yang dibuat dengan Laravel dan FilamentPHP untuk menguji apakah proses yang telah dilakukan telah sesuai atau belum.

Mohon maaf apabila ada banyak kekurangan. Terima Kasih atas perhatian yang telah diberikan.

Salam Hormat,
Muhammad Arief Ardyansyah


References :

[1] Laravel Holdings Inc. (2025). The PHP Framework for Web Artisans. Https://Laravel.Com/.
[2] Filament. (2025). Filament Documentation. Https://Filamentphp.Com/Docs.