LẬP TRÌNH WEB CHUYÊN sâu với CMS JOOMLA bài 2

TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM LẬP TRÌNH WEB CHUYÊN SÂU VỚI CMS JOOMLA TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM Bài 3: Front End Component Giới thiệu Cài đặt Template Thay đổi Template Cập nhật Template Tạo Template Bài 2: Template Giới thiệu – Các trang Web xây dựng thường có kiểu hiển thị chung dựa mẫu gọi Template – Template dành cho Joomla có nhiều kiểu dành cho nhiều lĩnh vực khác văn hóa, nghệ thuật, kinh doanh,… Bài 2: Template Cài đặt Template § Các bước thực – Bước 1: Download Template trang http://www.siteground.com/joomlahosting/joomla-templates.htm trang khác tự thiết kế Template Bài 2: Template Cài đặt Template § Các bước thực – Bước 2: Vào menu Extensions → chọn Install/Uninstall Manager Bài 2: Template Cài đặt Template § Các bước thực – Bước 3: Ở mục Upload Package File, tìm gói Template cần thêm mới, sau click Upload File & Install Bài 2: Template Cài đặt Template § Các bước thực – Thông báo việc cài đặt template thành công Bài 2: Template Cài đặt Template § Các bước thực – Kết Bài 2: Template Thay đổi Template § Các bước thực – Bước 1: Vào Extensions → chọn Template Manager Bài 2: Template Thay đổi Template § Các bước thực – Bước 2: Trong danh sách Template có, chọn Template muốn thay đổi, sau click chọn Default để hoàn thành việc thay đổi Template 10 Bài 2: Template Thay đổi Template § Các bước thực – Kết 11 Bài 2: Template Cập nhật Template § § § § Cấu trúc template Tìm thay đổi style Template Xác định vị trí template Thêm vị trí 12 Bài 2: Template Cấu trúc Template § Cấu trúc chung thư mục Template •CSS: thư mục chứa tập tin template.css (tập tin chứa định dạng cho mẫu Template) • Images: thư mục chứa hình ảnh cần thiết cho Template • index.php: trang chủ • template_thumbnail.png: hình ảnh template sau thiết kế xong • templateDetails.xml: nội dung chi tiết Template • templates.php: gọi phương thức để hiển thị Template 13 Bài 2: Template Xác định vị trí template § Thêm vào địa trang chủ tham số tp=1 Ví dụ: http://localhost/Joomla/?tp=1 14 Bài 2: Template Thêm vị trí cho Template § Các bước thực – Bước 1: Mở file index.php template ( template nằm C:\wamp\www\Joomla\templates ) – Bước 2: Thêm code định nghĩa vị trí 15 Bài 2: Template Thêm vị trí cho Template – Danh sách vị trí template định nghĩa file templateDetails.xml (nằm thư mục gốc template) 16 Bài 2: Template Thêm vị trí cho Template Kieu có giá trị sau: – table = (mặc nhiên) Mỗi module chứa table Nếu có nhiều module chúng hiển thị theo hàng dọc – xhtml = Các module chứa thẻ div module có hiển thị tiêu đề – none = Các module chứa thẻ div module không hiển thị tiêu đề 17 Bài 2: Template Tạo Template § Giới thiệu: – Mỗi template có tối thiểu file: index.php templateDetails.xml • Index.php: file chứa code định nghĩa mẫu giao diện • templateDetails.xml: chứa thông tin cấu hình, cài đặt template 18 Bài 2: Template Tạo Template § Ví dụ ta tạo template tên newtemplate Các bước thực sau: – Bước 1: Vào thư mục joomla\templates, tạo thư mục newtemplate – Bước 2: Tạo file index.php thiết kế giao diện cho template 19 Bài 2: Template Tạo Template § Ví dụ ta tạo template tên newtemplate Các bước thực sau: – Bước 3: Bổ sung code để load nội dung Joomla (module, component) cho file index.php • Load header: thêm code sau vào thẻ head • Load module debug: thêm code sau vào cuối trang web [...]... Template 13 Bài 2: Template Xác định các vị trí trên template § Thêm vào địa chỉ trang chủ tham số tp=1 Ví dụ: http://localhost /Joomla/ ?tp=1 14 Bài 2: Template Thêm 1 vị trí cho Template § Các bước thực hiện – Bước 1: Mở file index.php của template ( các template nằm ở C:\wamp\www \Joomla\ templates ) – Bước 2: Thêm code định nghĩa vị trí 15 Bài 2: Template.. .Bài 2: Template 3 Thay đổi Template § Các bước thực hiện – Kết quả 11 Bài 2: Template 4 Cập nhật Template § § § § Cấu trúc template Tìm và thay đổi style Template Xác định các vị trí trên template Thêm 1 vị trí 12 Bài 2: Template Cấu trúc Template § Cấu trúc chung của thư mục Template •CSS: thư mục chứa tập tin... Mỗi template sẽ có tối thiểu 2 file: index.php và templateDetails.xml • Index.php: file chứa code định nghĩa mẫu giao diện • templateDetails.xml: chứa thông tin cấu hình, cài đặt template 18 Bài 2: Template Tạo mới 1 Template § Ví dụ ta sẽ tạo 1 template mới tên là newtemplate Các bước thực hiện như sau: – Bước 1: Vào thư mục joomla\ templates, tạo thư mục newtemplate – Bước 2: Tạo file index.php và thiết... type="modules" name=“vitri" style=“kieu" /> • Load component: thêm code sau vào body 20 Bài 2: Template 21 ... của template) 16 Bài 2: Template Thêm 1 vị trí cho Template Kieu có các giá trị sau: – table = (mặc nhiên) Mỗi module sẽ được chứa trong 1 table Nếu có nhiều module thì chúng sẽ hiển thị lần lượt theo hàng dọc – xhtml = Các module sẽ được chứa trong 1 thẻ div và các module có hiển thị tiêu đề – none = Các module sẽ được chứa trong 1 thẻ div và các module sẽ không hiển thị tiêu đề 17 Bài 2: Template 5... Vào thư mục joomla\ templates, tạo thư mục newtemplate – Bước 2: Tạo file index.php và thiết kế giao diện cho template 19 Bài 2: Template Tạo mới 1 Template § Ví dụ ta sẽ tạo 1 template mới tên là newtemplate Các bước thực hiện như sau: – Bước 3: Bổ sung code để load nội dung của Joomla (module, component) cho file index.php • Load header: thêm code sau vào thẻ head ... http://www.siteground.com/joomlahosting /joomla- templates.htm trang khác tự thiết kế Template Bài 2: Template Cài đặt Template § Các bước thực – Bước 2: Vào menu Extensions → chọn Install/Uninstall Manager Bài 2: Template... Upload File & Install Bài 2: Template Cài đặt Template § Các bước thực – Thông báo việc cài đặt template thành công Bài 2: Template Cài đặt Template § Các bước thực – Kết Bài 2: Template Thay đổi... Manager Bài 2: Template Thay đổi Template § Các bước thực – Bước 2: Trong danh sách Template có, chọn Template muốn thay đổi, sau click chọn Default để hoàn thành việc thay đổi Template 10 Bài 2: