VÀ ĐỂ TÁI SỬ DỤNG */ // Hàm PHP mô phỏng render Component function renderBladeAlert(string $type = 'info', string $message = '', bool $dismissible = true): string { $alertClass = match ($type) { 'success' => 'alert-success', 'danger', 'error' => 'alert-danger', 'warning' => 'alert-warning', default => 'alert-info', }; $iconClass = match ($type) { 'success' => 'bi-check-circle-fill', 'danger', 'error' => 'bi-exclamation-octagon-fill', 'warning' => 'bi-exclamation-triangle-fill', default => 'bi-info-circle-fill', }; $dismissClass = $dismissible ? 'alert-dismissible fade show' : ''; $closeBtn = $dismissible ? '' : ''; return sprintf( '', $alertClass, $dismissClass, $iconClass, htmlspecialchars($message), $closeBtn ); } // Hàm PHP mô phỏng render Component function renderBladeInput( string $name, string $label, string $type = 'text', string $value = '', string $placeholder = '', bool $required = false, ?string $error = null ): string { $reqHtml = $required ? '*' : ''; $invalidClass = $error ? 'is-invalid' : ''; $errHtml = $error ? '
' . htmlspecialchars($error) . '
' : ''; return sprintf( '
%8$s
', htmlspecialchars($name), htmlspecialchars($label), $reqHtml, htmlspecialchars($type), htmlspecialchars($value), htmlspecialchars($placeholder), $invalidClass, $errHtml ); } $alertType = $_GET['alert_type'] ?? 'success'; $alertMsg = $_GET['alert_msg'] ?? 'Đã lưu bài viết mới thành công thông qua Blade Component !'; $simError = isset($_GET['sim_error']) ? (bool) $_GET['sim_error'] : true; $alertBladeCode = file_get_contents(__DIR__ . '/../resources/views/components/alert.blade.php'); $inputBladeCode = file_get_contents(__DIR__ . '/../resources/views/components/input.blade.php'); ?> Bài 04: Blade Components <x-alert> và <x-input> - Lab 07
1. Thực nghiệm `<x-alert>`
Cú pháp gọi trong Blade View:
<x-alert type="" message="" :dismissible="true" />
Kết quả hiển thị:
Tất cả 4 biến thể của `<x-alert>`:
2. Thực nghiệm `<x-input>`
Trạng thái có lỗi `@error` Trạng thái hợp lệ
Cú pháp tái sử dụng trong Form:
<x-input name="title" label="Tiêu đề bài viết" placeholder="Nhập tiêu đề..." :required="true" />
<x-input name="slug" label="Đường dẫn tĩnh (Slug)" value="bai-viet-laravel" />
<x-input name="author" label="Tác giả" value="Hoàng Vũ" :required="true" />
resources/views/components/alert.blade.php
resources/views/components/input.blade.php