Hướng dẫn chèn css trong laravel
|
Trong bài này chúng ta sẽ xây dựng các bộ khung giao diện cho dự án sử dụng Tailwind CSS kết hợp với Alpine.js. Giao diện sẽ được chia làm 2 phần trong đó 1 dành cho khách hàng và một dành cho quản trị viên. Show
Quay trở lại bài trước, sau khi cài đặt Laravel Breeze thì package này đã bao gồm cả việc cài đặt Tailwind CSS và Alpine.js rồi và bạn không cần phải mất công cài đặt lại nữa mà có thể sử dụng được luôn. Đầu tiên hãy tìm đến thư mục
Ở đây chúng ta sẽ thay đổi lại một chút như sau:
Tại file Lưu ý tại Giao diện khách hàngỞ phần này chúng ta sẽ sử dụng bố cục đơn giản trong đó bao gồm phần header ở phía trên và footer ở phía dưới trong khi đó phần thân trang ở chính giữa dùng để hiển thị nội dung chính cho từng trang. Tiến hành cập nhật nội dung cho file Tiếp đến tại file Trên đây chỉ là nội dung nháp, chúng ta sẽ tiến hành đổ content cho nó ở các bài sau. Và kết quả nhận được khi truy cập trang chủ ứng dụng của chúng ta: Giao diện dành cho Quản trị viênVới phần quản trị, chúng ta sẽ sử dụng giao diện thường dùng dành cho các ứng dụng quản lý. Theo đó phần bên trái sẽ được sử dụng làm sidebar navigation, trong khi đó phần bên phải trang lớn hơn sẽ để hiển thị nội dung chính của từng trang. Tiến hành cập nhật nội dung cho file Và tại file Và tiếp đến bạn truy cập trang Kết luậnVậy là chúng ta đã hoàn thành công đoạn xây dựng layout cơ bản dành cho khách hàng cũng như quản trị viên bằng cách kết hợp giữa Tailwind CSS và Alpine.js. Như các bạn có thể thấy, Tailwind CSS không quá khó để làm quen và thực hành, bạn sẽ không bị bó buộc vào việc phải sử dụng các component có sẵn như ở các CSS framework khác, ví dụ như Bootstrap, mà có thể tùy biến thoải mái theo sở thích của mình. Ở các bài tiếp theo chúng ta sẽ đi vào xây dựng nội dung của ứng dụng cũng như xử lý business logic cho ứng dụng của mình. Hẹn gặp lại các bạn! Xây dựng website bán hàng bằng Laravel - Dựng trang thông tin Sản phẩmĐể Khách hàng có thể xem và tìm hiểu kỹ hơn về thông tin của một Sản phẩm bao gồm giá bán, số lượng tồn kho hay các mô tả về những đặc tính kỹ thuật ví dụ chất liệu, kiểu dáng... chúng ta sẽ cần đến một trang riêng cho mỗi sản phẩm, hãy cùng tìm hiểu cách để tạo một trang như vậy trong bài viết này. |
