Install Laravel 11 di Cyberpanel

Jalankan perintah berikut di terminal

/bin/bash -c "$(curl -fsSL https://php.new/install/linux)" (enter)

Install composer

dengan mengetikkan perintah

apt install composer (enter)

Membuat Project Laravel

masuk ke folder sesuai website yang dibuat dan jalankan perintah berikut

composer create-project laravel/laravel bkk-master (enter)

hasilnya akan seperti berikut

root@ppg:/home/lara11.xi-tkj.my.id# composer create-project laravel/laravel bkk-master
Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
Creating a "laravel/laravel" project at "./bkk-master"
Installing laravel/laravel (v11.3.2)
  - Installing laravel/laravel (v11.3.2): Extracting archive
Created project in /home/latihan-laravel11.xi-tkj.my.id/bkk-master
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 107 installs, 0 updates, 0 removals
  - Locking brick/math (0.12.1)
  - Locking carbonphp/carbon-doctrine-types (3.2.0)
  - Locking dflydev/dot-access-data (v3.0.3)
  - Locking doctrine/inflector (2.0.10)
  - Locking doctrine/lexer (3.0.1)
  - Locking dragonmantank/cron-expression (v3.4.0)
  - Locking egulias/email-validator (4.0.2)
  - Locking fakerphp/faker (v1.23.1)
  - Locking filp/whoops (2.16.0)
  - Locking fruitcake/php-cors (v1.3.0)
  - Locking graham-campbell/result-type (v1.1.3)
  - Locking guzzlehttp/guzzle (7.9.2)
  - Locking guzzlehttp/promises (2.0.4)
  - Locking guzzlehttp/psr7 (2.7.0)
  - Locking guzzlehttp/uri-template (v1.0.3)
  - Locking hamcrest/hamcrest-php (v2.0.1)
  - Locking laravel/framework (v11.29.0)
  - Locking laravel/pail (v1.2.0)
  - Locking laravel/pint (v1.18.1)
  - Locking laravel/prompts (v0.3.1)
  - Locking laravel/sail (v1.37.0)
  - Locking laravel/serializable-closure (v1.3.5)
  - Locking laravel/tinker (v2.10.0)
  - Locking league/commonmark (2.5.3)
  - Locking league/config (v1.2.0)
  - Locking league/flysystem (3.29.1)
  - Locking league/flysystem-local (3.29.0)
  - Locking league/mime-type-detection (1.16.0)
  - Locking mockery/mockery (1.6.12)
  - Locking monolog/monolog (3.7.0)
  - Locking myclabs/deep-copy (1.12.0)
  - Locking nesbot/carbon (3.8.0)
  - Locking nette/schema (v1.3.2)
  - Locking nette/utils (v4.0.5)
  - Locking nikic/php-parser (v5.3.1)
  - Locking nunomaduro/collision (v8.5.0)
  - Locking nunomaduro/termwind (v2.2.0)
  - Locking phar-io/manifest (2.0.4)
  - Locking phar-io/version (3.2.1)
  - Locking phpoption/phpoption (1.9.3)
  - Locking phpunit/php-code-coverage (11.0.7)
  - Locking phpunit/php-file-iterator (5.1.0)
  - Locking phpunit/php-invoker (5.0.1)
  - Locking phpunit/php-text-template (4.0.1)
  - Locking phpunit/php-timer (7.0.1)
  - Locking phpunit/phpunit (11.4.3)
  - Locking psr/clock (1.0.0)
  - Locking psr/container (2.0.2)
  - Locking psr/event-dispatcher (1.0.0)
  - Locking psr/http-client (1.0.3)
  - Locking psr/http-factory (1.1.0)
  - Locking psr/http-message (2.0)
  - Locking psr/log (3.0.2)
  - Locking psr/simple-cache (3.0.0)
  - Locking psy/psysh (v0.12.4)
  - Locking ralouphie/getallheaders (3.0.3)
  - Locking ramsey/collection (2.0.0)
  - Locking ramsey/uuid (4.7.6)
  - Locking sebastian/cli-parser (3.0.2)
  - Locking sebastian/code-unit (3.0.1)
  - Locking sebastian/code-unit-reverse-lookup (4.0.1)
  - Locking sebastian/comparator (6.1.1)
  - Locking sebastian/complexity (4.0.1)
  - Locking sebastian/diff (6.0.2)
  - Locking sebastian/environment (7.2.0)
  - Locking sebastian/exporter (6.1.3)
  - Locking sebastian/global-state (7.0.2)
  - Locking sebastian/lines-of-code (3.0.1)
  - Locking sebastian/object-enumerator (6.0.1)
  - Locking sebastian/object-reflector (4.0.1)
  - Locking sebastian/recursion-context (6.0.2)
  - Locking sebastian/type (5.1.0)
  - Locking sebastian/version (5.0.2)
  - Locking symfony/clock (v7.1.6)
  - Locking symfony/console (v7.1.6)
  - Locking symfony/css-selector (v7.1.6)
  - Locking symfony/deprecation-contracts (v3.5.0)
  - Locking symfony/error-handler (v7.1.6)
  - Locking symfony/event-dispatcher (v7.1.6)
  - Locking symfony/event-dispatcher-contracts (v3.5.0)
  - Locking symfony/finder (v7.1.6)
  - Locking symfony/http-foundation (v7.1.6)
  - Locking symfony/http-kernel (v7.1.6)
  - Locking symfony/mailer (v7.1.6)
  - Locking symfony/mime (v7.1.6)
  - Locking symfony/polyfill-ctype (v1.31.0)
  - Locking symfony/polyfill-intl-grapheme (v1.31.0)
  - Locking symfony/polyfill-intl-idn (v1.31.0)
  - Locking symfony/polyfill-intl-normalizer (v1.31.0)
  - Locking symfony/polyfill-mbstring (v1.31.0)
  - Locking symfony/polyfill-php80 (v1.31.0)
  - Locking symfony/polyfill-php83 (v1.31.0)
  - Locking symfony/polyfill-uuid (v1.31.0)
  - Locking symfony/process (v7.1.6)
  - Locking symfony/routing (v7.1.6)
  - Locking symfony/service-contracts (v3.5.0)
  - Locking symfony/string (v7.1.6)
  - Locking symfony/translation (v7.1.6)
  - Locking symfony/translation-contracts (v3.5.0)
  - Locking symfony/uid (v7.1.6)
  - Locking symfony/var-dumper (v7.1.6)
  - Locking symfony/yaml (v7.1.6)
  - Locking theseer/tokenizer (1.2.3)
  - Locking tijsverkoyen/css-to-inline-styles (v2.2.7)
  - Locking vlucas/phpdotenv (v5.6.1)
  - Locking voku/portable-ascii (2.0.1)
  - Locking webmozart/assert (1.11.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 107 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (2.0.10): Extracting archive
  - Installing doctrine/lexer (3.0.1): Extracting archive
  - Installing symfony/polyfill-ctype (v1.31.0): Extracting archive
  - Installing webmozart/assert (1.11.0): Extracting archive
  - Installing dragonmantank/cron-expression (v3.4.0): Extracting archive
  - Installing symfony/deprecation-contracts (v3.5.0): Extracting archive
  - Installing psr/container (2.0.2): Extracting archive
  - Installing fakerphp/faker (v1.23.1): Extracting archive
  - Installing symfony/polyfill-php83 (v1.31.0): Extracting archive
  - Installing symfony/polyfill-mbstring (v1.31.0): Extracting archive
  - Installing symfony/http-foundation (v7.1.6): Extracting archive
  - Installing fruitcake/php-cors (v1.3.0): Extracting archive
  - Installing psr/http-message (2.0): Extracting archive
  - Installing psr/http-client (1.0.3): Extracting archive
  - Installing ralouphie/getallheaders (3.0.3): Extracting archive
  - Installing psr/http-factory (1.1.0): Extracting archive
  - Installing guzzlehttp/psr7 (2.7.0): Extracting archive
  - Installing guzzlehttp/promises (2.0.4): Extracting archive
  - Installing guzzlehttp/guzzle (7.9.2): Extracting archive
  - Installing symfony/polyfill-php80 (v1.31.0): Extracting archive
  - Installing guzzlehttp/uri-template (v1.0.3): Extracting archive
  - Installing symfony/polyfill-intl-normalizer (v1.31.0): Extracting archive
  - Installing symfony/polyfill-intl-grapheme (v1.31.0): Extracting archive
  - Installing symfony/string (v7.1.6): Extracting archive
  - Installing symfony/service-contracts (v3.5.0): Extracting archive
  - Installing symfony/console (v7.1.6): Extracting archive
  - Installing nunomaduro/termwind (v2.2.0): Extracting archive
  - Installing voku/portable-ascii (2.0.1): Extracting archive
  - Installing phpoption/phpoption (1.9.3): Extracting archive
  - Installing graham-campbell/result-type (v1.1.3): Extracting archive
  - Installing vlucas/phpdotenv (v5.6.1): Extracting archive
  - Installing symfony/css-selector (v7.1.6): Extracting archive
  - Installing tijsverkoyen/css-to-inline-styles (v2.2.7): Extracting archive
  - Installing symfony/var-dumper (v7.1.6): Extracting archive
  - Installing symfony/polyfill-uuid (v1.31.0): Extracting archive
  - Installing symfony/uid (v7.1.6): Extracting archive
  - Installing symfony/routing (v7.1.6): Extracting archive
  - Installing symfony/process (v7.1.6): Extracting archive
  - Installing symfony/polyfill-intl-idn (v1.31.0): Extracting archive
  - Installing symfony/mime (v7.1.6): Extracting archive
  - Installing psr/event-dispatcher (1.0.0): Extracting archive
  - Installing symfony/event-dispatcher-contracts (v3.5.0): Extracting archive
  - Installing symfony/event-dispatcher (v7.1.6): Extracting archive
  - Installing psr/log (3.0.2): Extracting archive
  - Installing egulias/email-validator (4.0.2): Extracting archive
  - Installing symfony/mailer (v7.1.6): Extracting archive
  - Installing symfony/error-handler (v7.1.6): Extracting archive
  - Installing symfony/http-kernel (v7.1.6): Extracting archive
  - Installing symfony/finder (v7.1.6): Extracting archive
  - Installing ramsey/collection (2.0.0): Extracting archive
  - Installing brick/math (0.12.1): Extracting archive
  - Installing ramsey/uuid (4.7.6): Extracting archive
  - Installing psr/simple-cache (3.0.0): Extracting archive
  - Installing symfony/translation-contracts (v3.5.0): Extracting archive
  - Installing symfony/translation (v7.1.6): Extracting archive
  - Installing psr/clock (1.0.0): Extracting archive
  - Installing symfony/clock (v7.1.6): Extracting archive
  - Installing carbonphp/carbon-doctrine-types (3.2.0): Extracting archive
  - Installing nesbot/carbon (3.8.0): Extracting archive
  - Installing monolog/monolog (3.7.0): Extracting archive
  - Installing league/mime-type-detection (1.16.0): Extracting archive
  - Installing league/flysystem (3.29.1): Extracting archive
  - Installing league/flysystem-local (3.29.0): Extracting archive
  - Installing nette/utils (v4.0.5): Extracting archive
  - Installing nette/schema (v1.3.2): Extracting archive
  - Installing dflydev/dot-access-data (v3.0.3): Extracting archive
  - Installing league/config (v1.2.0): Extracting archive
  - Installing league/commonmark (2.5.3): Extracting archive
  - Installing laravel/serializable-closure (v1.3.5): Extracting archive
  - Installing laravel/prompts (v0.3.1): Extracting archive
  - Installing laravel/framework (v11.29.0): Extracting archive
  - Installing laravel/pail (v1.2.0): Extracting archive
  - Installing laravel/pint (v1.18.1): Extracting archive
  - Installing symfony/yaml (v7.1.6): Extracting archive
  - Installing laravel/sail (v1.37.0): Extracting archive
  - Installing nikic/php-parser (v5.3.1): Extracting archive
  - Installing psy/psysh (v0.12.4): Extracting archive
  - Installing laravel/tinker (v2.10.0): Extracting archive
  - Installing hamcrest/hamcrest-php (v2.0.1): Extracting archive
  - Installing mockery/mockery (1.6.12): Extracting archive
  - Installing filp/whoops (2.16.0): Extracting archive
  - Installing nunomaduro/collision (v8.5.0): Extracting archive
  - Installing sebastian/version (5.0.2): Extracting archive
  - Installing sebastian/type (5.1.0): Extracting archive
  - Installing sebastian/recursion-context (6.0.2): Extracting archive
  - Installing sebastian/object-reflector (4.0.1): Extracting archive
  - Installing sebastian/object-enumerator (6.0.1): Extracting archive
  - Installing sebastian/global-state (7.0.2): Extracting archive
  - Installing sebastian/exporter (6.1.3): Extracting archive
  - Installing sebastian/environment (7.2.0): Extracting archive
  - Installing sebastian/diff (6.0.2): Extracting archive
  - Installing sebastian/comparator (6.1.1): Extracting archive
  - Installing sebastian/code-unit (3.0.1): Extracting archive
  - Installing sebastian/cli-parser (3.0.2): Extracting archive
  - Installing phpunit/php-timer (7.0.1): Extracting archive
  - Installing phpunit/php-text-template (4.0.1): Extracting archive
  - Installing phpunit/php-invoker (5.0.1): Extracting archive
  - Installing phpunit/php-file-iterator (5.1.0): Extracting archive
  - Installing theseer/tokenizer (1.2.3): Extracting archive
  - Installing sebastian/lines-of-code (3.0.1): Extracting archive
  - Installing sebastian/complexity (4.0.1): Extracting archive
  - Installing sebastian/code-unit-reverse-lookup (4.0.1): Extracting archive
  - Installing phpunit/php-code-coverage (11.0.7): Extracting archive
  - Installing phar-io/version (3.2.1): Extracting archive
  - Installing phar-io/manifest (2.0.4): Extracting archive
  - Installing myclabs/deep-copy (1.12.0): Extracting archive
  - Installing phpunit/phpunit (11.4.3): Extracting archive
39 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  laravel/pail ............................................................................................ DONE
  laravel/sail ............................................................................................ DONE
  laravel/tinker .......................................................................................... DONE
  nesbot/carbon ........................................................................................... DONE
  nunomaduro/collision .................................................................................... DONE
  nunomaduro/termwind ..................................................................................... DONE

78 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found.
> @php artisan key:generate --ansi

   INFO  Application key set successfully.  

> @php -r "file_exists('database/database.sqlite') || touch('database/database.sqlite');"
> @php artisan migrate --graceful --ansi

   INFO  Preparing database.  

  Creating migration table ............................................................................. 1s DONE

   INFO  Running migrations.  

  0001_01_01_000000_create_users_table ........................................................... 955.70ms DONE
  0001_01_01_000001_create_cache_table ........................................................... 149.59ms DONE
  0001_01_01_000002_create_jobs_table ............................................................ 553.04ms DONE

root@ppg:/home/lara11.xi-tkj.my.id#

hapus file index.html yang ada di folder public_html

masuk ke folder baru-apps/public dan copy semua file ke folder public_html dengan mengetikkan perintah

root@ppg:/home/lara11.xi-tkj.my.id/bkk-master/public# cp * ../../public_html/ (enter)

Solusi Error 500

jika mencoba akses domain lara11.xi-tkj.my.id akan muncul keterangan berikut

lara11.xi-tkj.my.id is currently unable to handle this request.

HTTP ERROR 500

solusinya adalah dengan merubah file index.php yang semula

<?php
use Illuminate\Http\Request;
define('LARAVEL_START', microtime(true));
// Determine if the application is in maintenance mode...
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
    require $maintenance;
}
// Register the Composer autoloader...
require __DIR__.'/../vendor/autoload.php';
// Bootstrap Laravel and handle the request...
(require_once __DIR__.'/../bootstrap/app.php')
    ->handleRequest(Request::capture());

menjadi

<?php
use Illuminate\Http\Request;
define('LARAVEL_START', microtime(true));
// Determine if the application is in maintenance mode...
if (file_exists($maintenance = __DIR__.'/../bkk-master/storage/framework/maintenance.php')) {
    require $maintenance;
}
// Register the Composer autoloader...
require __DIR__.'/../bkk-master/vendor/autoload.php';
// Bootstrap Laravel and handle the request...
(require_once __DIR__.'/../bkk-master/bootstrap/app.php')
    ->handleRequest(Request::capture());

lalu rubah juga file yang ada di dalam folder baru-apps/public/index.php

jika muncul error kode karena hak akses folder masih root maka lakukan penggantian permision folder dengan mengetikkan perintah

chown -R larax2558:larax2558 bkk-master/

Solusi Error 404

Jika Muncul error 404 not found pada saat membuat controller

rubah konfigurasi berikut

di bagian Rewrite Rules rubah bagian

Options -MultiViews -Indexes

menjadi

Options -MultiViews

lalu klik Save Write Rules

Rubah file .env

file awal

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:+3Mya+R3PjgezYs3rIxK/4syRj1KUA0NjA9T7l4TAd8=
APP_DEBUG=true
APP_TIMEZONE=UTC
APP_URL=http://localhost 

menjadi

APP_NAME=BKK-Apps
APP_ENV=local
APP_KEY=base64:+3Mya+R3PjgezYs3rIxK/4syRj1KUA0NjA9T7l4TAd8=
APP_DEBUG=true
APP_TIMEZONE=UTC
APP_URL=http://lara-ac.xi-tkj.my.id

Install Livewire

pastikan dalam posisi folde aplikasi yang akan di deploy

untuk menginstall ketikan perintah berikut

Perintah instalasi Livewire

# composer require livewire/livewire (enter)

maka akan muncul tampilan seperti berikut

Do not run Composer as root/super user! See https://getcomposer.org/root for details
Continue as root/super user [yes]? yes
./composer.json has been updated
Running composer update livewire/livewire
Loading composer repositories with package information
Updating dependencies
Nothing to modify in lock file
Writing lock file
Installing dependencies from lock file (including require-dev)
Nothing to install, update or remove
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi 

   INFO  Discovering packages.  

  laravel/pail .................................................................................. DONE
  laravel/sail .................................................................................. DONE
  laravel/tinker ................................................................................ DONE
  livewire/livewire ............................................................................. DONE
  nesbot/carbon ................................................................................. DONE
  nunomaduro/collision .......................................................................... DONE
  nunomaduro/termwind ........................................................................... DONE 

79 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found.
Using version ^3.5 for livewire/livewire
root@ppg:/home/lara-ac.xi-tkj.my.id/bkk-master# 

tunggu hingga proses selesai

Install konfigurasi livewire

dengan mengetikkan perintah

php artisan livewire:publish --config (enter)

akan muncul tampilan seperti berikut

   INFO  Publishing [livewire:config] assets.   

  Copying file [vendor/livewire/livewire/config/livewire.php] to [config/livewire.php] .......... DONE

root@ppg:/home/lara-ac.xi-tkj.my.id/bkk-master# 

Penggunaan Livewire

pastikan ketika mengetikkan perintah ini berada pada folder aplikasi yang akan di deploy.

contoh penggunaan livewire bisa dengan mengetikan perintah

php artisan make:livewire Test (enter)

akan muncul tampilan berikut

 COMPONENT CREATED  🤙

CLASS: app/Livewire/Test.php
VIEW:  resources/views/livewire/test.blade.php 

  _._
/ /o\ \   || ()                ()  __         
|_\ /_|   || || \\// /_\ \\ // || |~~ /_\   
 |`|`|    || ||  \/  \\_  \^/  || ||  \\_   


Congratulations, you've created your first Livewire component! 🎉🎉🎉

root@ppg:/home/lara-ac.xi-tkj.my.id/bkk-master# 

artinya kita akan secara langsung dibuatkan file Controller Test.php dan tampilan view test.blade.php ini akan mempermudah kita dalam membuat file yang dibutuhkan.

Buat Routing untuk Livewire

buat routing untuk controller Test.php yang telah kita buat pada foler routes/web.php dengan perintah

kode awal

<?php

use App\Http\Controllers\TestController;
use Illuminate\Support\Facades\Route; 

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about',[TestController::class,'about']);

menjadi

<?php

use App\Http\Controllers\TestController;
ues App\Livewire\Test;
use Illuminate\Support\Facades\Route; 

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about',[TestController::class,'about']);

Route::get('/test',Test::class);

Solusi Error component layout view not found

Jika muncul error seperti gambar berikut

solusinya adalah dengan membuat folder di

resources/view/

dengan struktur folder baru

resources/view/components/layouts/

lalu buat file dengan nama app.blade.php

isi file app.blade.php dengan kode berikut

<!DOCTYPE html> 
<html lang="en">
   <head>
   <title>BKK App</title>
</head>
<body>
    {{ $slot }} <-- ini akan menampilkan semua file yang ada pada view tes.blade.php
</body>
</html>

Buat halaman About dan Contact dengan livewire

dengan mengetikkan perintah berikut ke terminal

php artisan make:livewire About (enter)

php artisan make:livewire Contact (enter)

Maka akan dibuatkan controller About.php dan view about.blade.php

Buat routing untuk menambahkan tampilan About dan Contact

ubah file di foler routes/web.php

awal

<?php

use App\Http\Controllers\TestController;
ues App\Livewire\Test;
use Illuminate\Support\Facades\Route; 

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about',[TestController::class,'about']);

Route::get('/test',Test::class);

menjadi

<?php

use App\Http\Controllers\TestController;
ues App\Livewire\Test;
ues App\Livewire\About;
ues App\Livewire\Contact;
use Illuminate\Support\Facades\Route; 

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about',[TestController::class,'about']);

Route::get('/test',Test::class);
Route::get('/about',About::class);
Route::get('/contact',Contact::class);

Buat link untuk menuju semua halaman (about dan contact)

Kemudian kita buat linknya di halaman resource/view/components/layouts/app.blade.php. Karena yang ditampilkan adalah file master livewire di file app.blade.php sebagai masternya. Jadi kita bisa menambahkan link untuk tampilan website di file tersebut. menjadi seperti ini

Menjalankan fungsi livewire agar tidak semua halaman tereload

Ketika kita berpindah halaman dengan mengklik link about atau contact, semua halaman akan terefresh. Menariknya di livewire ini tidak semua componen yang dibuat akan di refresh semua, kita bisa memilih komponen mana saja yang akan di load, jadi tidak semua halaman akan terefresh. dan ini akan membantu kinerja server. Caranya adalah di file app.blade.php ditambahkan seperti ini

wire:navigate

sehingga kode program akan menjadi seperti ini

Dasar-Dasar Komponen Livewire

Variabel dan function mount

Untuk menambahkan variabel yang bisa ditampilkan dalam setiap komponen yang sudah kita buat. Misalkan dalam hal ini saya akan membuat variabel nama agar muncul secara dinamis.caranya adalah dengan menambahkan public $name = "nama saya"; pada Controller Test.php. dan menambahkan function mount agar ketika nama tidak diisi akan dkkembalikan nilai nya kembali yaitu zaidun. Kode program untuk Controller tes menjadi seperti berikut

dan kita perlu mengedit sedikit routing untuk tampilan test pada file di folder routes/web.php. Sehingga kode programnya menjadi seperti berikut

Jika kita mengakses link https://lara-ac.xi-tkj.my.id/test/Abdullah maka tampilannya akan seperti berikut

Atribut

Atribut ini bisa kita pakai untuk memanipulasi misalnya tampilan title pada halaman html agar dinamis sesuai dengan nama halaman yang dibuat. Caranya adalah dengan menambahkan script kode $title dan meload parameter nya pada halaman Controller Test.php

use Livewire\Attributes\Title;

#[Title('Test')]

sehingga kode program Test.php menjadi seperti ini

Kemudian untuk memanggil atribut di tampilan depan, maka kita perlu merubah sedikit file app.blade.php yang ada di view/components/layouts

awal

menjadi

Lakukan juga untuk Controller Contact.php dan About.php

Setiap component yang sudah dibuat akan bisa dipanggil atau dipakai di view yang lain, sebagai contoh halaman test.blade.php dengan cara mengetikkan perintah

<livewire:contact> untuk menampilkan kontak

sehingga kode program akan terlihat seperti berikut

sehingga tampilan https://lara-ac.xi-tkj.my.id/test/Bismillah akan menjadi seperti berikut