Trong ví dụ này, tôi sẽ chỉ cho bạn cách sử dụng chuyên nghiệp các thành phần của Laravel blade. Trong hướng dẫn này, tôi sẽ tạo một số thành phần phiến tùy chỉnh và bằng cách sử dụng chúng, tôi sẽ tạo một biểu mẫu HTML động và cũng hiển thị cho bạn các thông báo lỗi với các thành phần đó
Sau khi tạo biểu mẫu, tôi sẽ gửi biểu mẫu này và hiển thị thông báo lỗi khi sử dụng thành phần động đó. Nếu bạn không biết Laravel blade component hoạt động như thế nào, thì hướng dẫn này chính xác là dành cho bạn
Trước khi bắt đầu hướng dẫn này, vui lòng đọc bài viết này nếu bạn không biết về thành phần laravel.
Khuyến khích. Tạo và sử dụng Thành phần Laravel có thể tái sử dụng như Vue React Js
Bây giờ hãy xem cách tạo thành phần lưỡi laravel để hiển thị động HTML. Hãy bắt đầu
Bước 1. Tạo thành phần
Để tạo một biểu mẫu html động bằng cách sử dụng thành phần phiến laravel, hãy chạy lệnh bên dưới để tạo một số thành phần như input, button và error. Vì vậy, hãy tạo ra
php artisan make:component Error/Error
php artisan make:component Form/Type/Input
php artisan make:component Form/Type/ButtonBước 2. Cập nhật thành phần lưỡi
Bây giờ hãy cập nhật các thành phần đó như bên dưới để hiển thị thông báo lỗi và tạo biểu mẫu HTML động
tài nguyên/lượt xem/thành phần/lỗi/lỗi. lưỡi. php
tài nguyên/lượt xem/thành phần/biểu mẫu/loại/đầu vào. lưỡi. php
tài nguyên/lượt xem/thành phần/biểu mẫu/loại/nút. lưỡi. php
Bước 3. Cập nhật lớp thành phần
Bây giờ trong bước này, chúng ta cần cập nhật thành phần lớp để tạo biểu mẫu HTML động của mình. Vì vậy, hãy làm điều đó
Ứng dụng\Chế độ xem\Thành phần\Lỗi\Lỗi. php
namespace App\View\Components\Error;
use Illuminate\View\Component;
class Error extends Component
{
public function __construct[]
{
}
public function render[]
{
return view['components.error.error'];
}
}Ứng dụng\Chế độ xem\Thành phần\Biểu mẫu\Loại\Nút. php
namespace App\View\Components\Form\Type;
use Illuminate\View\Component;
class Button extends Component
{
public $type;
public $class;
public function __construct[$type, $class]
{
$this->type = $type;
$this->class = $class;
}
public function render[]
{
return view['components.form.type.button'];
}
}
Ứng dụng\View\Components\Form\Type\Input. php
namespace App\View\Components\Form\Type;
use Illuminate\View\Component;
class Input extends Component
{
public $name;
public $id;
public $class;
public function __construct[$name, $id, $class]
{
$this->name = $name;
$this->id = $id;
$this->class = $class;
}
public function render[]
{
return view['components.form.type.input'];
}
}Bước 3. Tạo tuyến đường
Trong bước này, chúng ta phải tạo tuyến đường của mình. Vì vậy, tạo nó như dưới đây
tuyến đường/web. php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TestController;
Route::get['/', [TestController::class, 'index']]->name['task'];
Route::post['/', [TestController::class, 'store']];Bước 4. Tạo bộ điều khiển
Bây giờ trong bước này, chúng ta phải tạo bộ điều khiển để hiển thị biểu mẫu HTML động có thể tái sử dụng bằng cách sử dụng thành phần lưỡi của laravel. Vì vậy, hãy tạo nó và cập nhật bộ điều khiển này như bên dưới
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\View\Components\Error\Error;
use Illuminate\Support\Facades\Route;
class TestController extends Controller
{
public function index[]
{
return view['welcome'];
}
public function store[Request $request]
{
$request->validate[[
'name' => 'required',
'address' => 'required',
]];
}
}Bước 5. Tạo lưỡi kiếm
Chúng tôi đang ở bước cuối cùng, Trong bước này, chúng tôi sẽ tạo một tệp welcome.blade.php và sẽ hiển thị biểu mẫu của chúng tôi bằng cách sử dụng các thành phần lưỡi của chúng tôi
Laravel xử lý các biểu mẫu html bằng cách cung cấp các thẻ dựng sẵn khác nhau. Laravel tạo các phần tử chính cần thiết cho HTML. Để tạo các phần tử html, chúng ta cần thêm gói html trong Laravel bằng cách sử dụng trình soạn thảo
Cài đặt
- Trước tiên, chúng tôi cài đặt gói bằng cách sử dụng trình soạn nhạc. Nhập lệnh sau vào cửa sổ Git bash để cài đặt gói
Khi chúng ta nhập lệnh trên vào cửa sổ Git bash, thì đầu ra sẽ là
Trong cửa sổ trên, chúng tôi quan sát thấy rằng lệnh "$composer yêu cầu" laravelcollective/html". "^5. 4. 0" cập nhật trình soạn nhạc. tệp json cần thiết cho laravelcollective/html
- Tiếp theo, mở thư mục config/app trong dự án của bạn và thêm nhà cung cấp html vào mảng nhà cung cấp của config/app. tập tin php
Khu vực được đánh dấu ở trên đại diện cho HtmlServiceProvider được thêm vào mảng nhà cung cấp của cấu hình/ứng dụng. tập tin php
- Cuối cùng, chúng ta thêm bí danh của hai lớp vào mảng bí danh của config/app. tập tin php
Mở một biểu mẫu
Chúng tôi có thể mở một biểu mẫu bằng cách sử dụng mã được cung cấp bên dưới
Trong các biểu mẫu của laravel, phương thức mặc định được coi là phương thức 'post' nếu không được đề cập, nhưng chúng tôi có thể tự do chỉ định bất kỳ phương thức nào khác. Vì các biểu mẫu hỗ trợ các phương thức Đăng, Đặt, Xóa và Nhận nên các phương thức này có thể được thêm vào biểu mẫu bằng cách sử dụng trường phương thức ẩn
Nếu chúng ta muốn sử dụng phương thức put trong một biểu mẫu, thì mã được cung cấp bên dưới
Chúng tôi cũng có thể mở các biểu mẫu trỏ đến các tuyến được đặt tên hoặc các hành động của bộ điều khiển
Tạo các phần tử HTML
Nhãn là một văn bản bình thường xuất hiện ở dạng Html. Cú pháp viết phần tử nhãn trong Laravel được đưa ra bên dưới
Hình thức. nhãn ['phone_no', 'Số điện thoại'];
Chúng tôi cũng có thể chỉ định các thuộc tính bổ sung trong phần tử nhãn
Hình thức. nhãn['phone_no', 'Số điện thoại',['class'=>'phone_no']];
Trong trường hợp này, chúng tôi đã thêm 'lớp' làm thuộc tính trong phần tử Nhãn
Văn bản là khu vực mà người dùng có thể nhập dữ liệu của họ. Cú pháp để tạo một vùng văn bản trong Laravel được đưa ra bên dưới
Hình thức. văn bản ['thư điện tử'];
Chúng tôi cũng có thể chỉ định giá trị mặc định cho hộp văn bản
Hình thức. text['email','[email được bảo vệ]'];
Mật khẩu là một thành phần html trong biểu mẫu ghi lại thông tin nhập của người dùng và mỗi ký tự được biểu thị dưới dạng [*] thay vì hiển thị các chữ số đã nhập. Cú pháp cho trường mật khẩu được đưa ra dưới đây
Hình thức. mật khẩu['mật khẩu',['lớp'=>'pass']];
Chúng ta có thể tạo hộp kiểm như được đưa ra dưới đây
Hình thức. hộp kiểm['tên','giá trị'];
Theo mặc định, hộp kiểm không được chọn. Chúng tôi cũng có thể kiểm tra hộp bằng cách cung cấp giá trị thực cho phần tử hộp kiểm
Hình thức. hộp kiểm['tên','giá trị',đúng];
Chúng ta có thể tạo nút radio như bên dưới
Hình thức. radio['tên','giá trị'];
Theo mặc định, nút radio không được chọn. Chúng tôi cũng có thể chọn nút radio bằng cách cung cấp giá trị thực cho phần tử nút radio
Hình thức. radio[''tên','giá trị',đúng];
Chúng tôi cũng có thể thêm trường nhập số trong biểu mẫu. Cú pháp cho trường nhập số được đưa ra dưới đây
Hình thức. số['tên','giá trị'];
Trường nhập tệp là một phần tử html được sử dụng trong biểu mẫu để tải tệp lên. Cú pháp cho trường nhập tệp được đưa ra dưới đây
Hình thức. tệp ['hình ảnh'];
Trong đó, hình ảnh là tên của trường nhập tệp
Phần tử thả xuống được sử dụng để hiển thị danh sách tất cả các tùy chọn được xác định trước. Cú pháp để tạo menu thả xuống được đưa ra bên dưới
Hình thức. select['chữ số', [1,2,3,4,5,6]]
Chúng tôi cũng có thể đặt danh sách thả xuống với giá trị mặc định
Hình thức. select['chữ số',[1,2,3,4,5,6],'2']
Đoạn mã trên đặt giá trị của danh sách thả xuống với phần tử thứ hai của mảng, i. e. , 3 khi lập chỉ mục bắt đầu bằng 0
Tạo danh sách được nhóm
Chúng tôi có thể tạo danh sách được nhóm thông qua phần tử thả xuống. Hãy xem điều này thông qua một ví dụ
Biểu mẫu. select['animal',[
'fruits' => ['Apple','Mango','Orange'],
'Rau' => [ .
]]
Generating drop-down list with a range.
Biểu mẫu. selectRange['number',1,30]
Tạo danh sách thả xuống có tên tháng.
Biểu mẫu. selectMonth['tháng']
năm, tháng và ngày. Cú pháp để tạo trường nhập ngày được đưa ra dưới đây
Hình thức. ngày ['tên', \ Carbon \ Carbon. bây giờ[]]
Chúng tôi cũng có thể tạo nút trong biểu mẫu web bằng cách sử dụng trường nút trong biểu mẫu. Hãy xem cú pháp của nó
Hình thức. gửi ['Nhấp vào tôi. ']
Dòng trên tạo nút gửi với tên "Click me. "
Hãy hiểu các hình thức thông qua một ví dụ
Sau đây là các bước cần thiết để tạo biểu mẫu
Bước 1. Đầu tiên ta tạo Master layout file đặt tên là master. lưỡi. tập tin php
Bước 2. Thứ hai, chúng tôi tạo liên hệ. lưỡi. php tệp trong đó chúng tôi thêm mã của Biểu mẫu
Đoạn mã trên được sử dụng để tạo biểu mẫu chứa các trường khác nhau
Bước 3. Bây giờ, chúng tôi tạo bộ điều khiển tài nguyên có tên là PostController và chúng tôi chỉ thêm chức năng trong hàm store[] được cung cấp như bên dưới