Rất vui được gặp lại tất cả các bạn. Như đã nói ở tập trước thì ngày hôm nay, nội dung sẽ nói về "Blade template" trong Laravel. Tập hôm nay chủ yếu chỉ học cú pháp và lợi ích của từng cú pháp đó, tuy dài nhưng không khó. Không luyên thuyên nữa, chúng ta vào bài thôi
I. Giới thiệu [Giới thiệu]Do editor của Viblo không hỗ trợ Blade template Laravel nên đôi khi color code có chỗ khó, mong các bạn thông cảm
Blade là một template engine được cung cấp bởi Laravel. Đây là một công cụ khá mạnh mẽ, không giống như các công cụ mẫu khác, Blade không giới hạn việc sử dụng mã PHP thuần túy trong mẫu của bạn ngoài các cú pháp riêng biệt của nó. Thực tế thì Blade template được biên dịch thành các file PHP và được lưu vào cache. Mẫu lưỡi dao có đuôi mở rộng là
@extends['app']
@section['content']
My content
@endsection
62 và được lưu trữ trong thư mục @extends['app']
@section['content']
My content
@endsection
63II. mẫu bố cục1. Specify Layout [Xác định bố cục]
Có hai lợi ích chính trong việc sử dụng mẫu Blade là bố cục và phần. Để bắt đầu chúng ta sẽ đi vào một ví dụ đơn giản. Như các bạn đã biết, trong một ứng dụng thì đa phần các trang con đều thừa hưởng một cấu trúc bố cục chung. Mẫu phiến cho phép chúng ta định nghĩa một bố cục để ứng dụng với chế độ xem phiến duy nhất
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
Đây chỉ là nội dung của một đoạn mã HTML bình thường, nhưng có đôi chút khác biệt là nó có hai cú pháp lạ.
@extends['app']
@section['content']
My content
@endsection
64, @extends['app']
@section['content']
My content
@endsection
65. Đây chính là một trong những cú pháp riêng biệt của mẫu Blade được sử dụng cho mục đích kế thừa qua lại giữa cha-con
64. used to verify an content section@extends['app'] @section['content'] My content @endsection
65. used to show the content of an section has been verify@extends['app'] @section['content'] My content @endsection
Hiện tại khó mà hiểu theo cách giải thích bằng văn bản được. Để các bạn có thể hiểu chi tiết công dụng của hai cú pháp này, mình sẽ làm sáng tỏ chúng qua ví dụ
2. Kế thừa layout [Extending layout]
Như đã nói ở trên, công dụng chung của hai gã
@extends['app']
@section['content']
My content
@endsection
64 và @extends['app']
@section['content']
My content
@endsection
69 được dùng cho mục đích kế thừa. Blade view @extends['app']
@section['content']
My content
@endsection
70 là cha mẹ, vì nó là bố cục cho ứng dụng, vì vậy mình sẽ tạo ra một lưỡi xem @extends['app']
@section['content']
My content
@endsection
71 đóng vai trò là con kế thừa cha mẹ @extends['app']
@section['content']
My content
@endsection
70@extends['app']
@section['content']
My content
@endsection
Mình đã sử dụng cú pháp
@extends['app']
@section['content']
My content
@endsection
73, điều này giúp blade view @extends['app']
@section['content']
My content
@endsection
71 có thể kế thừa @extends['app']
@section['content']
My content
@endsection
70. Tiếp theo mình đã xác định nội dung cho phần @extends['app']
@section['content']
My content
@endsection
76 thông qua thẻ @extends['app']
@section['content']
My content
@endsection
64. Bây giờ đăng ký tuyến đường và xem thử nó hoạt động như thế nào@extends['app']
@section['content']
My content
@endsection
8Ở đây chúng ta render view
@extends['app']
@section['content']
My content
@endsection
71 chứ không phải @extends['app']
@section['content']
My content
@endsection
70 nhé. Kết quả thu được như thế nàyChữ "My content" xuất hiện thì khá dễ hiểu, vì chúng đã xác định nội dung cho phần
@extends['app']
@section['content']
My content
@endsection
76, nên lệnh @extends['app']
@section['content']
My content
@endsection
65 sẽ thực hiện công việc kết xuất. Nhưng sao đoạn @extends['app']
@section['content']
My content
@endsection
82 vẫn được hiển thị? . Please quan sát so sánh sauCú pháp
@extends['app']
@section['content']
My content
@endsection
64 cho đoạn @extends['app']
@section['content']
My content
@endsection
76 thì như sau
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
9Nó có thẻ mở
@extends['app']
@section['content']
My content
@endsection
64 và thẻ đóng @extends['app']
@section['content']
My content
@endsection
89. Trong khi đó, lệnh @extends['app']
@section['content']
My content
@endsection
64 cho đoạn @extends['app']
@section['content']
My content
@endsection
82 thì khác một chút@extends['app']
@section['content']
My content
@endsection
4Thẻ đóng lúc này là
@extends['app']
@section['content']
My content
@endsection
92, chính vì thể cú pháp này không chỉ xác định nội dung cho @extends['app']
@section['content']
My content
@endsection
82 mà đồng với với @extends['app']
@section['content']
My content
@endsection
92 nó sẽ kết xuất phần này luôn. Đó là lý do tại sao chữ "Sidebar" lại xuất hiệnNhưng tại sao lại không dùng
@extends['app']
@section['content']
My content
@endsection
65 luôn cho tiện mà phải dùng @extends['app']
@section['content']
My content
@endsection
64 rồi đóng bằng thẻ @extends['app']
@section['content']
My content
@endsection
92 để render? . Mình sẽ dẫn chứng ngay và luôn, các bạn mở file @extends['app']
@section['content']
My content
@endsection
99 và thêm đoạn code này vào@extends['app']
@section['content']
My content
@endsection
3Giờ cứ thử xem kết quả trước đó rồi mình sẽ giải thích
Như các bạn đã thấy, mục
@extends['app']
@section['content']
My content
@endsection
82 không những không mất chữ "Sidebar" mà còn có thêm cái list mình mới vừa tạo. Bây giờ hãy bắt đầu quan sát lại đoạn mã vừa thêm ở trên, mình đã có thêm thẻ @extends['app']
@section['content']
My content
@endsection
801. Với thẻ này, các phần được định nghĩa lại trong trang con sẽ nối vào phần ở blade view cha. Trong trường hợp này blade view @extends['app']
@section['content']
My content
@endsection
71 đã mở rộng blade view @extends['app']
@section['content']
My content
@endsection
70 nên chính vì thế khi khai báo lại phần @extends['app']
@section['content']
My content
@endsection
82 thì nó đã nối thêm cái danh sách ở dưới chữ "Sidebar"Do đó hãy thử đoán xem điều gì sẽ xảy ra nếu mình bỏ đi thẻ
@extends['app']
@section['content']
My content
@endsection
801? Nói một chút về
@extends['app']
@section['content']
My content
@endsection
64 thì ngoài cách khai báo xác định nội dung trên thì ta còn có một cú pháp khác để xác định nội dung của một phần nào đó như sau@extends['app']
@section['content']
My content
@endsection
5Thông thường với cách này thường được áp dụng cho các phần chứa nội dung rút gọn hoặc không chứa các thẻ HTML
Ngoài ra,
@extends['app']
@section['content']
My content
@endsection
65 còn có thể nhận tham số thứ hai làm giá trị mặc định nếu các trang con mở rộng với nội dung không được xác định cho phần đã khai báo@extends['app']
@section['content']
My content
@endsection
7III. Thành phần & Khe cắmLưu ý. Kết thúc mỗi thẻ trong cú pháp Blade template không có dấu
812@extends['app'] @section['content'] My content @endsection
Thành phần và vị trí cung cấp các tính năng khá giống với phần và bố cục, nhưng có vài chỗ thì thành phần và vị trí dễ hiểu hơn nhiều. Hiểu đơn giản thì component là các thành phần, còn slot là nơi chứa nội dung sẽ thay đổi nhiều lần. Hãy tưởng tượng nếu ứng dụng của bạn có nhiều lý do cần thiết để hiện phương thức thông báo, nhưng bạn lại muốn có thể sử dụng lại mà không cần phải khai báo nhiều lần. Lúc này thành phần chính là phương thức và nội dung thông báo chính là vị trí
Thông thường các thành phần được khai báo trong chế độ xem, bạn có thể tự tổ chức cấu trúc thư mục cấu trúc để lưu trữ các thành phần hoặc có thể tham khảo theo cấu trúc của mình
@extends['app']
@section['content']
My content
@endsection
91. Khởi tạo thành phần & vị trí [Creating component & slot]
Bây giờ mình sẽ tạo component modal set trong file
@extends['app']
@section['content']
My content
@endsection
813 với nội dung sau@extends['app']
@section['content']
My content
@endsection
1Cú pháp
@extends['app']
@section['content']
My content
@endsection
814 sẽ bao gồm nội dung thông báo thay đổi liên tục trong suốt ứng dụngLưu ý.
815 can't change other variable name@extends['app'] @section['content'] My content @endsection
Mọi thiết lập đã hoàn tất, giờ chỉ cần lấy ra sử dụng thôi. Mình sẽ sử dụng lại blade view
@extends['app']
@section['content']
My content
@endsection
71 dựng ngược để test luôn@extends['app']
@section['content']
My content
@endsection
0Chúng ta sử dụng cặp thẻ
@extends['app']
@section['content']
My content
@endsection
817 để gọi thành phần @extends['app']
@section['content']
My content
@endsection
818, vị trí đồng thời khai báo. Tham số trong @extends['app']
@section['content']
My content
@endsection
819 là tên blade view chứa thành phần, nội dung trong cặp thẻ chính là giá trị mà @extends['app']
@section['content']
My content
@endsection
815 nhận được. Nạp lại máy chủ và chạy đường dẫn http. //máy chủ cục bộ. 8000 ta sẽ được kết quả như hìnhBạn có thể gọi một thành phần nhiều lần như thế này
@extends['app']
@section['content']
My content
@endsection
12. Thành phần có sẵn đầu tiên
Bạn có thể tùy chỉnh các giao diện của thành phần nào đó với
@extends['app']
@section['content']
My content
@endsection
821, về tính năng thì nó cũng tương tự như @extends['app']
@section['content']
My content
@endsection
822@extends['app']
@section['content']
My content
@endsection
23. Truyền dữ liệu cho thành phần [Truyền dữ liệu cho thành phần]
Đôi khi với một
@extends['app']
@section['content']
My content
@endsection
815 thì bị hạn chế việc tùy chỉnh nội dung một thành phần, chính vì thế Laravel cho phép truyền khe cắm khác bên ngoài @extends['app']
@section['content']
My content
@endsection
815 mặc định cho ứng dụng của bạn linh hoạt hơn@extends['app']
@section['content']
My content
@endsection
3Use
@extends['app']
@section['content']
My content
@endsection
825 with tham số là tên biến nhận dữ liệu trong thành phần blade view để khai báo một giá trị khác mà thành phần có thể nhậnTại thành phần
@extends['app']
@section['content']
My content
@endsection
826, bạn chỉnh sửa nội dung như sau@extends['app']
@section['content']
My content
@endsection
4Laravel sẽ hiểu phần nội dung bạn khai báo ở
@extends['app']
@section['content']
My content
@endsection
825 sẽ truyền vào @extends['app']
@section['content']
My content
@endsection
828, còn phần chỉ nằm trong cặp thẻ @extends['app']
@section['content']
My content
@endsection
829 thì sẽ truyền vào @extends['app']
@section['content']
My content
@endsection
815 mặc định. Mình xin tản mạn một chút, cú pháp @extends['app']
@section['content']
My content
@endsection
831 được dùng để hiển thị dữ liệu của biếnVà đây là kết quả sau khi tải lại trang
Ngoài ra, bạn có thể thay thế cách truyền dữ liệu cho thành phần bằng cách
@extends['app']
@section['content']
My content
@endsection
5Tham số thứ hai trong
@extends['app']
@section['content']
My content
@endsection
819 sẽ nhận một mảng chứa dữ liệu và lấy tên khóa làm tên biến trong thành phần. With this way information used to transfer the short data, does not contain thẻ HTML4. thành phần răng cưa
Bạn có nghĩ mình sẽ có thể tự đặt cú pháp cho component để nhìn code dễ hiểu, dễ hình dung hơn không, thật hạn chế
@extends['app']
@section['content']
My content
@endsection
6Laravel hiểu mong muốn của bạn, vì thế đã định nghĩa method
@extends['app']
@section['content']
My content
@endsection
833 trong @extends['app']
@section['content']
My content
@endsection
834 facade để ta có thể dễ dàng alias cú pháp cho bất kì component nào. Laravel nên thực hiện công việc này tại @extends['app']
@section['content']
My content
@endsection
835, cụ thể thực hiện phương thức @extends['app']
@section['content']
My content
@endsection
836@extends['app']
@section['content']
My content
@endsection
7Ở đây bắt buộc chúng ta phải
@extends['app']
@section['content']
My content
@endsection
837 Mặt tiền lưỡi để có thể gọi phương thức @extends['app']
@section['content']
My content
@endsection
833 ra. Phương thức này sẽ nhận hai tham số- Tham số thứ nhất là tên thành phần
- Tham số thứ hai là tên cú pháp thay thế
Bây giờ bạn có thể khai báo thành phần
@extends['app']
@section['content']
My content
@endsection
826 theo cú pháp sau@extends['app']
@section['content']
My content
@endsection
8You can test to so sánh kết quả, đảm bảo vẫn không thay đổi gì
IV. Show data [Hiển thị dữ liệu]Bạn có thể hiển thị dữ liệu được truyền đến blade view bằng cách đặt biến đó giữa cặp
@extends['app']
@section['content']
My content
@endsection
840, ví dụ mình đăng ký một tuyến đường@extends['app']
@section['content']
My content
@endsection
9Tiếp theo đó các bạn đã tạo blade view
@extends['app']
@section['content']
My content
@endsection
841 và mã hóa nó như sau@extends['app']
@section['content']
My content
@endsection
80Đây là kết quả chúng ta thu được
Như bạn thấy cú pháp này vô cùng rút gọn để hiển thị
@extends['app']
@section['content']
My content
@endsection
842 thay vì mã phải dài như thế này@extends['app']
@section['content']
My content
@endsection
81Lưu ý. Bạn chỉ có thể sử dụng các cú pháp của mẫu Blade khi đuôi mở rộng có định dạng
62@extends['app'] @section['content'] My content @endsection
1. Hiển thị dữ liệu chưa thoát
Giờ các bạn cố gắng chèn cặp thẻ
@extends['app']
@section['content']
My content
@endsection
844 cho giá trị @extends['app']
@section['content']
My content
@endsection
842 như thế này@extends['app']
@section['content']
My content
@endsection
82Đoán xem chữ "Lê Chí Huy" có bị bôi đen không? . Vì cú pháp
@extends['app']
@section['content']
My content
@endsection
840 trước khi hiển thị dữ liệu nên nó đã đưa ra qua hàm @extends['app']
@section['content']
My content
@endsection
847, công việc này sẽ tránh các cuộc tấn công XSS. Nói một cách đơn giản thì các kiểu tấn công lợi ích công việc này có thể hiển thị các thẻ HTML thông qua chức năng viết bài, bình luận. to add mã độc script, tấn công hệ thốngVậy nếu giờ bạn muốn chèn HTML vào dữ liệu của mình thì sao?
@extends['app']
@section['content']
My content
@endsection
83A mong đợi một kết quả đầy đủ
Lưu ý. Để tránh bị tấn công XSS mới, bạn nên sử dụng cú pháp này để hiển thị dữ liệu do bạn xác định, quản trị cpanel xác định chứ không nên hiển thị dữ liệu do người dùng nhập như bài viết, bình luận. to don lồng mã độc
Cú pháp
@extends['app']
@section['content']
My content
@endsection
840 không giới hạn hiển thị dữ liệu của biến truyền vào blade view. Bạn có thể @extends['app']
@section['content']
My content
@endsection
850 kết quả PHP bất kỳ kỳ nào, chẳng hạn như@extends['app']
@section['content']
My content
@endsection
842. Kết xuất JSON
Nếu bạn truyền một mảng đến chế độ xem phiến và muốn hiển thị nó dưới dạng JSON để gán giá trị cho bất kỳ biến nào trong đoạn mã mã. Thông thường với PHP, bạn sẽ
@extends['app']
@section['content']
My content
@endsection
85Nhưng đối với Blade template Laravel thì cú pháp sẽ gọn đi rất nhiều. Thay vì gọi thủ công như thế thì ta có thể sử dụng cú pháp
@extends['app']
@section['content']
My content
@endsection
851, nó sẽ nhận các tham số tương tự như @extends['app']
@section['content']
My content
@endsection
852@extends['app']
@section['content']
My content
@endsection
86Nếu như bạn truyền
@extends['app']
@section['content']
My content
@endsection
851 trong một thuộc tính của thẻ thì nên để nó ở trong cặp dấu @extends['app']
@section['content']
My content
@endsection
854@extends['app']
@section['content']
My content
@endsection
873. Khung Blade & JavaScript
Có một số Javascript framework sử dụng cặp
@extends['app']
@section['content']
My content
@endsection
855 làm cú pháp của mình, chính vì thế đôi khi Blade template sẽ hiểu lầm là cú pháp của nó và compile, có thể gây ra lỗi. Để tránh điều đó, bạn chỉ cần thêm ký tự @extends['app']
@section['content']
My content
@endsection
856 trước câu lệnh, mẫu Blade sẽ hiểu nó không phải là cú pháp cần biên dịch@extends['app']
@section['content']
My content
@endsection
88This is results
Nếu trong trường hợp có nhiều cú pháp Javascript framework có chứa cặp
@extends['app']
@section['content']
My content
@endsection
855 mà bạn không muốn kho công thêm tiền tố @extends['app']
@section['content']
My content
@endsection
856 trước mỗi câu lệnh. Laravel cung cấp cho chúng ta một giải pháp đó chính là đưa tất cả các cú pháp Javascript framework vào trong cặp thẻ @extends['app']
@section['content']
My content
@endsection
859 như thế này@extends['app']
@section['content']
My content
@endsection
89V. Cấu trúc điều khiển [Cấu trúc điều khiển]Ngoài các tính năng lợi ích trên, Laravel còn cung cấp cho chúng ta các cú pháp thu gọn cho các cấu trúc điều khiển của PHP như if, for, foreach. Những cú pháp này rất tiện lợi, nhanh gọn nhưng lại không làm mất đi bản chất vốn có của các cấu trúc điều khiển
1. Câu lệnh "if" [câu lệnh "nếu"]
Bạn có thể khởi tạo câu lệnh
@extends['app']
@section['content']
My content
@endsection
860 bằng các thẻ @extends['app']
@section['content']
My content
@endsection
861, @extends['app']
@section['content']
My content
@endsection
862, @extends['app']
@section['content']
My content
@endsection
863 và @extends['app']
@section['content']
My content
@endsection
864
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
90Như bạn thấy, chỉ là cú pháp khác, cách khai báo các điều kiện và hoạt động vẫn không khác gì cấu trúc điều kiện thuần túy
Blade template cung cấp cho chúng ta thẻ
@extends['app']
@section['content']
My content
@endsection
865
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
91Phương thức
@extends['app']
@section['content']
My content
@endsection
866 được sử dụng để kiểm tra xem người dùng có đăng nhập hay không. Hiện tại chúng ta chưa học đến nên chắc chắn rằng phương pháp này sẽ trả lại giá trị là @extends['app']
@section['content']
My content
@endsection
867. Nếu các bạn đã học qua chương trình tiếng Anh phổ biến thì sẽ biết @extends['app']
@section['content']
My content
@endsection
868 đồng nghĩa với @extends['app']
@section['content']
My content
@endsection
869Ngoài ra còn có
@extends['app']
@section['content']
My content
@endsection
870 và @extends['app']
@section['content']
My content
@endsection
871, hai thẻ này đại diện cho hai hàm quen thuộc trong PHP là @extends['app']
@section['content']
My content
@endsection
872 và @extends['app']
@section['content']
My content
@endsection
873
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
92a. xác thực
@extends['app']
@section['content']
My content
@endsection
874 và @extends['app']
@section['content']
My content
@endsection
875 và sử dụng hai thẻ để kiểm tra xem người dùng hiện có đăng nhập hay chưa
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
93Ngoài ra, bạn có thể truyền tham số cho hai thẻ này để kiểm tra trạng thái đăng nhập của người dùng với tư cách là ai. Không giới hạn một tài khoản có vai trò là "người dùng" thì sau khi đăng nhập vẫn không thể truy cập vào cpanel quản trị được. Tính năng này được gọi là "Authentication Guard", chúng ta sẽ tìm hiểu sau
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
94b. Tiết diện
Bạn có thể kiểm tra sự tồn tại của một phần bằng thẻ
@extends['app']
@section['content']
My content
@endsection
876 với tham số truyền vào là tên của phần cần kiểm tra
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
952. Câu lệnh "switch" [câu lệnh "switch"]
Lệnh switch được khởi tạo bằng các thẻ
@extends['app']
@section['content']
My content
@endsection
877, @extends['app']
@section['content']
My content
@endsection
878, @extends['app']
@section['content']
My content
@endsection
879, @extends['app']
@section['content']
My content
@endsection
880 và @extends['app']
@section['content']
My content
@endsection
881
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
963. Vòng lặp [Loop]
Cũng giống như các cấu trúc điều khiển cấu trúc khác, các vòng lặp câu lệnh trong mẫu Blade vẫn được giữ nguyên cách thức hoạt động
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
97Laravel cung cấp cho chúng ta thẻ
@extends['app']
@section['content']
My content
@endsection
882, thẻ này hoạt động giống như là @extends['app']
@section['content']
My content
@endsection
883 nhưng ta có thể kiểm tra nhanh xem đối tượng tham chiếu trong vòng lặp có trống hay không, nếu có thì sẽ thực hiện lệnh nào đó thông qua thẻ @extends['app']
@section['content']
My content
@endsection
871Bạn có thể kiểm tra đoạn mã này thì sẽ hiểu rõ thẻ
@extends['app']
@section['content']
My content
@endsection
882 ngay
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
98Như quan sát, mình đã truyền một mảng trống vào vòng lặp, lập tức thì nó sẽ được kiểm tra qua thẻ
@extends['app']
@section['content']
My content
@endsection
871. Kết quả ta thu được sẽ làNói về vòng lặp thì không thể thiếu
@extends['app']
@section['content']
My content
@endsection
887 và @extends['app']
@section['content']
My content
@endsection
888 được, đương nhiên hai lệnh này vẫn được Blade template chuyển cú pháp thành @extends['app']
@section['content']
My content
@endsection
889 và @extends['app']
@section['content']
My content
@endsection
879
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
99Nếu bạn thấy mỗi lần muốn
@extends['app']
@section['content']
My content
@endsection
888 hoặc @extends['app']
@section['content']
My content
@endsection
887 phải lồng trong một câu lệnh @extends['app']
@section['content']
My content
@endsection
860 thì hơi dài và khá rắc rối. Chính vì thế Laravel cho phép bạn truyền điều kiện vào hai thẻ @extends['app']
@section['content']
My content
@endsection
879 và @extends['app']
@section['content']
My content
@endsection
889 để rút ngắn thời gian cho bạn@extends['app']
@section['content']
My content
@endsection
404. Round loop variable [Biến lặp]
Khi sử dụng các vòng lặp
@extends['app']
@section['content']
My content
@endsection
896, @extends['app']
@section['content']
My content
@endsection
897 mặc định sẽ có sẵn @extends['app']
@section['content']
My content
@endsection
898 bên trong vòng lặp. Biến này cho phép ta lấy các thông tin hoặc sử dụng như chỉ mục hiện tại, chỉ mục đầu, chỉ mục cuối vòng lặp@extends['app']
@section['content']
My content
@endsection
41Nếu bạn có các vòng lặp lồng nhau thì có thể tham khảo
@extends['app']
@section['content']
My content
@endsection
898 của vòng lặp cha bằng thuộc tính
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
900 trong vòng lặp đó@extends['app']
@section['content']
My content
@endsection
42Dưới đây là toàn bộ các thông tin mà
@extends['app']
@section['content']
My content
@endsection
898 có thể cung cấpThuộc tínhMô tả
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
902Lấy chỉ mục hiện tại [bắt đầu từ 0]
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
903Lấy số lần lặp đã xảy ra tại [bắt đầu từ 1]
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
904Lấy số lần lặp còn lại
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
905Lấy tổng số vòng lặp sẽ diễn ra
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
906Nếu ở vòng lặp đầu tiên thì trả về
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
907
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
906Nếu ở vòng cuối 5. Nhận xét
Blade template cũng cho phép chúng ta comment để code dễ hiểu, dễ quản lý hơn với cú pháp
@extends['app']
@section['content']
My content
@endsection
436. PHP
Bạn cũng có thể chèn mã PHP vào trong mẫu Blade trong cặp thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
917@extends['app']
@section['content']
My content
@endsection
44VI. Hình thứcLưu ý. Bạn không nên sử dụng khả năng này để thực hiện một số xử lý logic phức tạp, điều này sẽ làm mất bản chất của quan điểm. Với các xử lý logic phức tạp, bạn nên thực hiện thao tác này ở chế độ xem của nhà soạn nhạc hoặc hành động của bộ điều khiển, sau đó mới truyền đến chế độ xem để kết xuất
1. Trường CSRF [trường CSRF]
Bạn còn nhớ vấn đề trong tập tin Routing chứ, chúng ta không thể truy cập route với phương thức
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
918, cũng như
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
919,
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
920. do thiếu trường CSRF này. Vì vậy khi khởi tạo một biểu mẫu HTML, chúng ta phải thuật ngữ thông báo trường CSRF thông qua thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
921Giờ mình sẽ tạo blade view
@extends['app']
@section['content']
My content
@endsection
841 với nội dung sau@extends['app']
@section['content']
My content
@endsection
45Biểu mẫu này sẽ gửi một yêu cầu với phương thức
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
918 với URI
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
924 khi gửiSau đó các bạn đã đăng ký hai route này trong
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
925@extends['app']
@section['content']
My content
@endsection
46With the first route then will render view contains form of them ta. Còn route thứ hai mang phương thức
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
918 sẽ được gọi khi chúng ta click vào nút "Send post"Bây giờ ta thử truy cập đường dẫn http. //máy chủ cục bộ. 8000 and F12 up to view source HTML of form vừa tạo
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
921 đã tạo một đầu vào ẩn với tên là
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
928 và giá trị chứa mã thông báo CSRF, trường này chắc chắn rằng chúng ta sẽ gửi yêu cầu được gửi với phương thức
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
918. Cuối cùng là nhấp vào nút "Gửi bài đăng" thôi2. Trường phương thức [Method field]
Đối với các phương thức khác như
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
919,
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
920 và
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
932 ta không thể khai báo thuộc tính
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
933 của thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
934 được, chính vì vậy Laravel cung cấp cho ta thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
935 để khai báo một phương thức HTTP không an toàn khác ngoài
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
918Các bạn thêm thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
935 với tham số
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
919 this like after@extends['app']
@section['content']
My content
@endsection
47Sau đó thử nhấp vào nút "Gửi bài đăng" để xem lại, chắc chắn xuất hiện lỗi
Vì chúng ta đã thay đổi yêu cầu HTTP thành
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
919 nên ở tuyến đăng ký cũng phải thay đổi@extends['app']
@section['content']
My content
@endsection
483. Lỗi xác nhận
Với cặp thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
940, ta có thể dễ dàng bắt bất kỳ thông báo nào khi yêu cầu trả về bị lỗi. Về "Thông báo lỗi xác thực" ta sẽ tìm hiểu ở các tập tin sau nên phần này mình chỉ nó qua về cú pháp để kiểm tra có tồn tại lỗi được trả về mẫu lưỡi hay không@extends['app']
@section['content']
My content
@endsection
49
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
941 sẽ nhận tham số là tên lỗi mà chúng tôi xử lý trước khi trả về cho blade view. Nếu
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
907 thì nó sẽ thực thi lệnh trong cặp thẻVII. Liên kết sub-view [Bao gồm cả sub-view]
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943 trong Blade template cho phép bạn có thể liên kết một blade view với một view khác. Tất cả các biến dữ liệu ở chế độ xem chính đều được truyền đến chế độ xem bao gồmCác hạn chế của mình có cấu trúc thư mục như sau
@extends['app']
@section['content']
My content
@endsection
30Ở chế độ xem lưỡi
@extends['app']
@section['content']
My content
@endsection
841 mã ta@extends['app']
@section['content']
My content
@endsection
31Như các bạn đã thấy, mình đã sử dụng cú pháp
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943 với tham số là tên view liên kết cần đưa vào blade view @extends['app']
@section['content']
My content
@endsection
841 này. Ngoài ra mình có khai báo biến @extends['app']
@section['content']
My content
@endsection
842 để thử xem là blade view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
948 có nhận được hay khôngTại blade view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
948 mình mã như sau@extends['app']
@section['content']
My content
@endsection
32Cuối cùng là route register để render blade view
@extends['app']
@section['content']
My content
@endsection
841 ra@extends['app']
@section['content']
My content
@endsection
33Kết quả này chứng minh cho việc ta có thể lấy tất cả dữ liệu tại view links from parent view. Ngoài ra, bạn cũng có thể truyền một dữ liệu bất kỳ để xem liên kết thông tin qua tham số thứ hai của thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943@extends['app']
@section['content']
My content
@endsection
341. Một số cú pháp khác hỗ trợ cho bao gồm [Some other syntax support for bao gồm]
Trong trường hợp nếu bạn
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943 một chế độ xem không tồn tại thì khung sẽ báo lỗi. Chính vì vậy khi bao gồm một chế độ xem không chắc chắn sẽ tồn tại thì ta sử dụng thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
953 thay cho
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943@extends['app']
@section['content']
My content
@endsection
35Bạn cũng có thể bao gồm một chế độ xem khi kiểm tra một điều kiện nào đó trả về boolean
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
907@extends['app']
@section['content']
My content
@endsection
36Laravel còn cung cấp thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
956, thẻ này cho phép ta đưa view đầu tiên vào mảng view khai báo. Nhiều bạn sẽ hiểu ngay công dụng của thẻ này nếu theo dõi các tập tin trước của mình@extends['app']
@section['content']
My content
@endsection
37Như dòng mã này, nếu chế độ xem
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
957 tồn tại thì nó sẽ bao gồm chế độ xem này và bỏ qua chế độ xem
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
958. Còn nếu lượt xem
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
957 không tồn tại thì nó sẽ bỏ qua và tiếp tục kiểm tra lượt xem
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
958Lưu ý. Bạn nên tránh sử dụng
961 vàLaravel @section['sidebar'] Sidebar @show @yield['content']
962 trong chế độ xem phiến vì chúng chỉ trả về đường dẫn kết quả của các tệp bộ đệm hoặc chế độ xem biên dịch, không cung cấp thông tin cần thiếtLaravel @section['sidebar'] Sidebar @show @yield['content']
2. Bí danh bao gồm
Nếu chế độ xem lưỡi bao gồm một chế độ xem nằm trong thư mục con, thì phải tham khảo một tên rất dài. Chúng ta có thể cú pháp bí danh bao gồm một chế độ xem giống như thành phần nào. Ta cũng sẽ làm việc này tại
@extends['app']
@section['content']
My content
@endsection
835, ngay tại phương pháp @extends['app']
@section['content']
My content
@endsection
836@extends['app']
@section['content']
My content
@endsection
38Rồi bây giờ ta chỉ cần thêm view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
948 theo cú pháp đã đăng ký@extends['app']
@section['content']
My content
@endsection
393. Hiển thị chế độ xem cho bộ sưu tập
Nếu bạn có một mảng dữ liệu và muốn truyền từng dữ liệu vào một dạng xem nào đó thì bạn có thể sử dụng
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
966 thay vì @extends['app']
@section['content']
My content
@endsection
883 và
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943Các hạn chế của mình có cấu trúc thư mục như sau
@extends['app']
@section['content']
My content
@endsection
50First first mình will try use the way information that is used
@extends['app']
@section['content']
My content
@endsection
883 and
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
943. Tại blade view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
971 mình sẽ code nội dung như sau@extends['app']
@section['content']
My content
@endsection
51Và chế độ xem lưỡi
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
972@extends['app']
@section['content']
My content
@endsection
52Sau đó chúng ta đăng ký route và chạy thử
@extends['app']
@section['content']
My content
@endsection
53Bây giờ chúng ta sẽ sử dụng
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
966 để thay thế cách trên. Ta chỉ cần thay đổi đoạn vòng lặp trong chế độ xem phiến
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
974@extends['app']
@section['content']
My content
@endsection
54
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
966 điều này sẽ nhận- First number is view include
- Tham số thứ hai là biến chứa mảng dữ liệu
- Tham số thứ ba là tên biến nhận giá trị trong chế độ xem bao gồm
Ngoài ra trong trường hợp nếu mảng dữ liệu trống, ta có thể bao gồm xem hiện thông báo gì đó bằng cách khai báo thêm tham số thứ tư ở
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
966 với giá trị là tên xem chứa nội dung thông báo@extends['app']
@section['content']
My content
@endsection
55VIII. ngăn xếpLưu ý. Các chế độ xem được hiển thị thông qua
966 không thể nhận các biến dữ liệu được truyền đến chế độ xem chính. Nên bạn cần nhắc lại việc sử dụngLaravel @section['sidebar'] Sidebar @show @yield['content']
883 và@extends['app'] @section['content'] My content @endsection
943 để thay thế nếu quan điểm bao gồm các biến dữ liệu nàyLaravel @section['sidebar'] Sidebar @show @yield['content']
Nói về thuật ngữ này bằng văn bản thì rất khó hình dung nên mình sẽ đi qua ví dụ để các bạn thấy công dụng, từ đó có thể hiểu được nó. Không giới hạn trong ứng dụng của bạn có rất nhiều trang con, tất cả các trang con đều được đưa vào cùng một tệp JS chung. Một số trang con đặc biệt sẽ có file JS riêng để xử lý
Đây là cấu trúc thư mục cho ví dụ
@extends['app']
@section['content']
My content
@endsection
56Ở blade view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
980, ta có nội dung sau@extends['app']
@section['content']
My content
@endsection
57Còn phiến xem
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
981 thì@extends['app']
@section['content']
My content
@endsection
58Bây giờ mình muốn include file JS
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
982 thì cách nhanh nhất là bỏ dòng code include JS vào trong phần
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
983 ở blade view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
984 như thế này@extends['app']
@section['content']
My content
@endsection
59Cách mạng thì có thể code vẫn hoạt động bình thường nhưng sẽ cảm thấy có chút gì đó rất khó chịu, có thể gây ra một số phiền toái sau này như không tốt cho SEO hoặc bất đồng bộ trong code Javascript
Laravel cung cấp cho chúng ta một giải pháp để giải quyết vấn đề dựa trên hai thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
985 và
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
986. Bạn hãy tưởng tượng
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
985 giống như một kệ sách, còn
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
986 giống như những cuốn sách, nếu bạn đặt những cuốn sách đó ở đâu thì sau quá trình dọn dẹp [biên dịch] thì những cuốn sách đó sẽ được đưa vào kệ sáchTức là bây giờ mình muốn đưa cuốn sách
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
989 vào một kệ sách nào đó trong
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
990 thì mình phải khai báo kệ sách đó trước đó@extends['app']
@section['content']
My content
@endsection
70Như các bạn đã thấy mình đã khởi động tạo ra một kệ sách với tên là
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
991 rồi, việc cần làm bây giờ là cuốn sách
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
989 về kệ sách
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
991 thôiTại blade view
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
984, mình chỉnh sửa nội dung lại như sau@extends['app']
@section['content']
My content
@endsection
71Giờ chắc các bạn đã hiểu cách hoạt động của
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
985 và
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
986 rồi đúng không nào. Ngoài ra, Laravel còn cung cấp thẻ
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
997, thẻ này giúp ta thêm cuốn sách "yêu thích" nào vào đầu ngăn sách@extends['app']
@section['content']
My content
@endsection
72IX. tiêm dịch vụCái này chắc chắn đã quá quen thuộc rồi, Laravel cho phép chúng ta lấy một dịch vụ bất kỳ có trong bộ chứa dịch vụ thông qua
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
998@extends['app']
@section['content']
My content
@endsection
73X. Lưỡi mở rộng [Extending Blade]Laravel cho phép chúng ta tự định nghĩa các thẻ bằng phương thức
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
999 có trong mặt tiền @extends['app']
@section['content']
My content
@endsection
834. Việc làm này đương nhiên chúng ta cũng sẽ mã trong @extends['app']
@section['content']
My content
@endsection
836 của @extends['app']
@section['content']
My content
@endsection
835@extends['app']
@section['content']
My content
@endsection
74Quan sát đoạn mã trên, tại method
@extends['app']
@section['content']
My content
@endsection
403- Tham số thứ nhất là tên thẻ
- Tham số thứ hai là một đối tượng đóng, nó sẽ chứa biến dữ liệu nhận được thông qua các tham số của thẻ trong chế độ xem phiến. Trong phần Đóng này, ta sẽ
404 mã PHP được viết dưới dạng chuỗi@extends['app'] @section['content'] My content @endsection
Sau khi đăng ký xong, ta có thể kiểm tra thẻ
@extends['app']
@section['content']
My content
@endsection
405 như sau@extends['app']
@section['content']
My content
@endsection
75Nếu bạn muốn truyền nhiều tham số cho thẻ của mình thì bạn có thể xử lý chuỗi
@extends['app']
@section['content']
My content
@endsection
406 để lấy giá trị tham sốĐể mình test cho các bạn xem, tại Closure object mình sẽ đổ
@extends['app']
@section['content']
My content
@endsection
406@extends['app']
@section['content']
My content
@endsection
76Sau đó mình thử gọi
@extends['app']
@section['content']
My content
@endsection
405 và truyền nhiều tham số vào nó@extends['app']
@section['content']
My content
@endsection
77This is results
Như bạn đã thấy,
@extends['app']
@section['content']
My content
@endsection
406 return string with format@extends['app']
@section['content']
My content
@endsection
78Các bạn có thể tùy biến để có thể lấy các giá trị tham số từ
@extends['app']
@section['content']
My content
@endsection
406Lưu ý. Trong quá trình phát triển ứng dụng, nếu có sử dụng thẻ riêng trong blade view thì sau mỗi lần sửa đổi mã xử lý trong mỗi thẻ riêng, phải chạy lệnh Artisan
411 để xóa bộ đệm và biên dịch lại các chế độ xem@extends['app'] @section['content'] My content @endsection
Ngoài ra, bạn cũng có thể tự tạo cho mình lệnh điều kiện riêng có thể gọi trong blade view bằng phương thức
@extends['app']
@section['content']
My content
@endsection
412 được đăng ký tại @extends['app']
@section['content']
My content
@endsection
836 của @extends['app']
@section['content']
My content
@endsection
835@extends['app']
@section['content']
My content
@endsection
79With
@extends['app']
@section['content']
My content
@endsection
412 thì- Tham số thứ nhất là tên lệnh điều kiện,
- Tham số thứ hai là Đóng nhận biến giá trị truyền vào và trả về boolean
Như đăng ký trên, nó sẽ kiểm tra môi trường hiện tại của ứng dụng, nếu trùng khớp thì sẽ trả về
Laravel
@section['sidebar']
Sidebar
@show
@yield['content']
907, còn không thì trả về @extends['app']
@section['content']
My content
@endsection
867Ta could be used in blade view as after
@extends['app']
@section['content']
My content
@endsection
90Cảm ơn các bạn đã quan tâm theo dõi. Cùng đồng hành với mình qua các tập tiếp theo tại series "Hành trình chinh phục Laravel Framework" nhé. Chúc may mắn và hẹn gặp lại
Mình đang xây dựng blog riêng là lechihuy. dev , mong các bạn ghé sang ủng hộ mình cảm ơn rất nhiều ạ