Bahan Belajar

 Membuat Web Application

Contoh Apk : Rental Game

Dengan 3 tabel yaitu :

Pelanggan (yang merental game) → NamaPelanggan, Alamat, NoTelp

Game → JenisGame, Harga

Laporan → id_pelanggan, id_game, TglRental, TglKembali, JmlRental, TtlHarga

Pilih file, lalu pilih Auto Save agar semua perubahan otomatis tersimpan

1. Buka website filamentphp.com di chrome atau Microsoft browser

2. Buat folder di file manager (buatlah selain di disk C), bisa folder dalam folder, bisa hanya

folder saja

3. Buka Visual Studio Code, kemudian buka folder yang sudah di buat tadi → file, new windows

(jika perlu/masih di folder lain), Buka folder

4. Buka terminal → menu - terminal - new terminal. Kemudian pada pojok kanan/sebelah kanan

terminal pilih (powershell +^) kemudian pilih GitBash (jika ada)

5. Pada terminal ketikkan composer create-project laravel/laravel . ATAU composer createproject laravel/laravel=11 . kemudian enter. Berhasil = running migration DONE, Gagal = ulang

dari awal

6. Mengecek laravel ketik php artisan serve lalu klik link 127.0.0.1:8000 yg ada di terminal, jika

muncul maka berhasil

7. Pada folder pilih file . env kemudian ganti APP_NAME sesuai nama aplikasi, TANPA SPASI!!!

8. DB_HOST sampai DB_PASSWORD dihilangkan hastagnya (#), DB_CONNECTION ganti dengan

mysql dan DB_DATABASE dapat diganti sesuai nama aplikasi

9. Buka New Terminal kemudian ketikkan php artisan migrate jika tidak bisa, di bawahnya

DB_PASSWORD tambahkan DB_COLLATION=utf8mb4_unicode_ci jika tetap tidak bisa pada

XAMPP dibagian start² admin pilih config, Apache php ini lalu hapus ; (titik koma) pada bagian

extends intl dan Zip

10. Muncul pertanyaan would you like to create it? pilih yes kemudian enter sampai berhasil

11. Buka web filamentphp.com lalu get started, get started, pada bagian installation copy

composer require filament/filament="^3.3" —W lalu paste di terminal, enter

12. Setelah selesai copy bagian kedua php artisan filament:install ——panels akan muncul

pertanyaan What is the ID? Ketik admin (sebagai alamat link website) jika ada pertanyaan ttg

GitHub pilih No

13. Buka filamentphp.com pada bagian create a user copy php artisan make:filament-user

paste di terminal, enter

14. Isi Name enter, Email Address (email biasa) enter, Password enter

15. Membuat tabel dengan mengetikkan php artisan make:model Pelanggan —m pada

terminal

16. Buka Database → Migration pilih yg diinstal tadi (biasanya paling bawah). Pada bagian

Schema::create pada bawahnya $table->id() tambahkan 

$table->String('NamaPelanggan');

$table->String('Alamat');

$table->String('NoTelp');

(Sesuai isi tabel)

17. Diterminal ketikkan php artisan migrate enter, lalu aktifkan XAMPP maka seharusnya tabel

sudah ada di database yg dibuat tadi

18. Buka filamentphp.com pada bagian creating a resource lalu copy php artisan

make:filament-resource Pelanggan enter lalu buka kembali link 127.0.0.1:8000 dengan

menambahkan /admin dibelakangnya dan login dengan email & password yg dibuat tadi

19. Di Vs Code buka app → Filament/Resource kemudian pilih PelangganResource dan

tambahkan use TextInput

use Filament\Form\Components\TextInput;

20. Pada bagian return $form schema komentarnya dihapus lalu isi dengan 

TextInput::make('NamaPelanggan'),

TextInput::make('Alamat'),

TextInput::make('NoTelp'),

21. Buka app → Models → Pelanggan.php pada bagian komentar (komentar dihapus) isi

dengan protected $guarded=[];

22. Pada PelangganResource tambahkan use TextColumn

use Filament\Tables\Columns;

23. Pada return $table column pada bagian komentar isi dengan

TextColumn::make('NamaPelanggan'),

TextColumn::make('Alamat'),

TextColumn::make('NoTelp'),

24. Membuat tabel Game sama dengan tabel Pelanggan (no 15 - 24) dengan codingan di 

Schema::create adalah 

$table->String('JenisGame');

$table->String('Harga');

Di bagian return $form schema isi dengan 

TextInput::make('JenisGame'),

TextInput::make('Harga'),

Di bagian return $table column isi dengan 

TextColumn::make('JenisGame'),

TextColumn::make('Harga'),

25. Membuat tabel Laporan pada terminal ketik php artisan make:model Laporan —m

26. Pada migration dibagian schema::create isi dengan

$table->foreignId('id_pelanggan');

$table->foreignId('id_game');

$table->foreign('id_pelanggan')->references('id')->on('pelanggans')->onDelete('cascade');

$table->foreign('id_game')->references('id')->on('games')->onDelete('cascade');

$table->date('TglRental');

$table->date('TglKembali');

$table->String('JmlRental');

$table->String('TtlHarga');

27. Di terminal ketik php artisan migrate enter

28. Buka Models → Laporan.php lalu tambahkan protected $guarded=[]; pada kurung

kurawal lalu dibawahnya (masih di kurung kurawal) tambahkan

public function pelanggan(){

return $this->belongsTo(Pelanggan::class, 'id_pelanggan');

}

public function game(){

return $this->belongsTo(Game::class, 'id_game');

}

29. Pada terminal ketik php artisan make:filament-resource Laporan

30. Lalu pada LaporanResource.php tambahkan use TextInput, TextColumns, & Select

use Filament\Form\Components\TextInput;

use Filament\Tables\Columns;

use Filament\Form\Components\Select;

31. Buka app→Filament→LaporanResource lalu pada bagian return $form schema isi

dengan

Select::make('id_pelanggan')->options(Pelanggan::all()->pluck('NamaPelanggan', 'id')),

Select::make('id_game')->options(Game::all()->pluck('JenisGame', 'id')-

>map(function($item, $key) {

$Game=Game::find($key);

return $Game->JenisGame . '—' . $Game->Harga ;

})),

DatePicker::make('TglRental')->required()->default(Carbon::today()),

DatePicker::make('TglKembali')->required()->default(Carbon::today()->addDays(3)),

TextInput::make('JmlRental'),

TextInput::make('TtlHarga'),

32. Pada return $table column isi dengan

TextColumn::make('id'),

TextColumn::make('pelanggan.NamaPelanggan'),

TextColumn::make('game.JenisGame'),

TextColumn::make('TglRental'),

TextColumn::make('TglKembali'),

TextColumn::make('JmlRental'),

TextColumn::make('TtlHarga'),

33. Tambahkan use Carbon, DatePicker, Pelanggan, Game, & Laporan

use Carbon\Carbon;

use Filament\Form\Components\DatePicker;

use App\Models\Pelanggan;

use App\Models\Game;

use App\Models\Laporan;

Menambahkan use otomatis: pilih teks yg akan di import, blok, klik kanan, kemudian pilih import class