Chuyên đề lập trình web nâng cao với Joomla

TRUNG TÂM TIN HỌC - ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP. HCM 227 Nguyễn Văn Cừ – Quận 5 – Tp. Hồ Chí Minh Tel: 8351056 – Fax 8324466 – Email: ttth@hcmuns.edu.vn Mã tài liệu: DT_NCM_CD_BT_LTWCSJ Phiên bản 1.0 – Tháng 03/2010 BÀI TẬP CHUYÊN ĐỀ LẬP TRÌNH WEB NÂNG CAO VỚI JOOMLA Bài tập Lập trình Web chuyên sâu với Joomla Trang 1/15 BÀI 1: TỔNG QUAN VỀ JOOMLA 1. Tạo các trang web đơn - Tạo các trang web đơn cho website. Ví dụ: trang chủ, giới thiệu cơng ty, liên hệ, thơng tin tuyển dụng, - Tạo menu link tới các trang web trên 2. Tạo các mục tin tức (Section) Thế giới Thể thao Kinh doanh Khoa học - Tạo menu để hiển thị các Section trên (Loại Menu Item là Section Blog Layout) 3. Tạo các loại tin tức (Category) - Tạo các category cho các Section của bài 1.2: Section Category Thế giới Thế giới muơn màu Chiều thứ 7 Thể thao Bĩng đá Tennis Kinh doanh Chứng khốn Bất động sản Khoa học Mơi trường Thiên nhiên - Tạo menu để hiển thị các Category trên (Loại Menu Item là Category Blog Layout) 4. Tạo nội dung cho các bài viết + Vào trang hoặc để lấy nội dung cho các bài viết. + Sửa lại link các hình ảnh trong bài viết để chúng thuộc về website của chúng ta. + Cấu hình các Section, Category để hiển thị nội dung bài viết như sau: o 1 bài viết mới nhất sẽ nằm trên cùng và chiếm hết chiều ngang (leading) o Các bài viết dạng giới thiệu sẽ chia làm 2 cột hiển thị (columns) o Số bài viết dạng giới thiệu là 8 (intro) o Số bài viết dạng link là 5 (links) + Cấu hình cho phép người dùng click vào tiêu đề bài viết để xem chi tiết thơng tin bài viết và ẩn đi link Read More. Bài tập Lập trình Web chuyên sâu với Joomla Trang 2/15 BÀI 2: TEMPLATES 1. Bổ sung position cho template Thêm 2 position user5 và user6 ở đầu template beez. Đặt các module Latest News và Popular vào 2 position này. v Hướng dẫn: · Vào thư mục chứa source của template beez (joomla\templates\beez). · Mở file templateDetails.xml và định nghĩa thêm 2 position user5 và user6. · Mở file index.php và dùng thẻ để định nghĩa 2 position user5 và user6. 2. Tạo template cho website quản lý bán sách. Template cĩ layout và các postions như sau: header top left right User1 component Bài tập Lập trình Web chuyên sâu với Joomla Trang 3/15 BÀI 3: COMPONENT Ở FRONT END 1. Tạo component Tính tiền thưởng cuối năm (com_tien_thuong). Trang web tính tiền thưởng cuối năm dựa trên Tiền lương hàng tháng và Xếp loại cuối năm. Khi click vào nút Tính, thực hiện: + Tính Tiền thưởng, biết rằng: Tiền thưởng = (Tiền lương * hệ số thưởng), trong đĩ: Hệ số thưởng được tính như sau: § Nếu Xếp loại là ”Lọai A”: 2 § Nếu Xếp loại là ”Lọai B”: 1.8 § Nếu Xếp loại là ”Lọai C”: 1.2 § Nếu Xếp loại là ”Lọai D”: 0.8 + Xuất Tiền thưởng ra màn hình v Hướng dẫn: + Tạo thư mục com_tien_thuong trong thư mục joomla/components + Trong thư mục com_tien_thuong, tạo file tien_thuong.php và thực hiện trang web tính tiền thưởng trong file này. 2. Tạo component hiển thị danh sách Sách dạng table (com_dssach) Bài tập Lập trình Web chuyên sâu với Joomla Trang 4/15 3. Tạo component hiển thị danh sách Sách dạng list (com_sach). 4. Tạo link cho tên sách và xử lý hiển thị thong tin chi tiết sách khi người dùng click vào tên sách Bài tập Lập trình Web chuyên sâu với Joomla Trang 5/15 Khi click vào tên sách thì hiển thị thơng tin chi tiết sách Bài tập Lập trình Web chuyên sâu với Joomla Trang 6/15 BÀI 4: MODULE 1. Tạo module danh sách chủ đề 2. Tạo module liệt kê các sách mới (Lưu ý: lấy các sách cĩ 5 ngày cập nhật gần nhất) 3. Bổ sung phần cấu hình tham số cho module liệt kê các sách mới và đĩng gĩi module này. 4. Tạo link cho module chủ đề sách để khi click vào link thì hiển thị danh sách sách theo chủ đề (hiệu chỉnh component danh sách sách) Tạo link cho các chủ đề để khi click chọn chủ đề thì hiển thị danh sách sách ứng với chủ đề (Vd: link chủ đề Tiếng Việt: index.php?option=com_sach&mcd=3) Bài tập Lập trình Web chuyên sâu với Joomla Trang 7/15 Bài tập Lập trình Web chuyên sâu với Joomla Trang 8/15 BÀI 5: CÁC LỚP TIỆN ÍCH 1. Bổ sung ngày cập nhật cho module sách mới và định dạng ngày/tháng/năm 2. Tạo các combobox cho phép người dùng chọn chủ đề và nhà xuất bản. 3. Thiết kế màn hình cập nhật dữ liệu cho bảng Sách Bài tập Lập trình Web chuyên sâu với Joomla Trang 9/15 BÀI 6: COMPONENT Ở BACK END 1. Tạo com_khach_hang hiển thị danh sách khách hàng 2. Tạo com_sach cĩ chức năng hiển thị dữ liệu sách bảng dưới dạng lưới. 3. Bổ sung xử lý phân trang cho com_khach_hang và com_sach. Thanh phân trang 4. Bổ sung Toolbar cho com_khach_hang và com_sach 5. Bổ sung chức năng thêm, xĩa, sửa thơng tin khách hàng cho com_khach_hang Bài tập Lập trình Web chuyên sâu với Joomla Trang 10/15 v Màn hình liệt kê khách hàng dạng bảng: v khi click vào họ tên thì chuyển sang màn hình Edit thơng tin khách hàng 6. Bổ sung chức năng quản lý thơng tin sách (thêm, xĩa, sửa) cho com_sach v Liệt kê sách dạng bảng Bài tập Lập trình Web chuyên sâu với Joomla Trang 11/15 v Khi click vào tên sách thì chuyển sang màn hình cập nhật thơng tin sách v Giao diện màn hình thêm mới thơng tin sách tương tự giao diện màn hình cập nhật thơng tin sách. 7. Đĩng gĩi component. Tạo file sach.xml để cấu hình cài đặt com_sach và đĩng gĩi com_sach. Bài tập Lập trình Web chuyên sâu với Joomla Trang 12/15 BÀI 7: XỬ LÝ ĐA NGƠN NGỮ 1. Cài đặt thành phần mở rộng JoomFish và cấu hình để website hỗ trợ 2 thứ tiếng: Anh và Việt. 2. Bổ sung tính năng đa ngơn ngữ (tiếng Anh và tiếng Việt) cho các tiêu đề của com_khach_hang Tiếng anh: Tiếng Việt: 3. Tạo file content element cho bảng sách để JoomFish cĩ thể xử lý đa ngơn ngữ cho nội dung của bảng Sách. Các cột cần xử lý là: Tên sách, Mơ tả. Bài tập Lập trình Web chuyên sâu với Joomla Trang 13/15 BÀI 8: COMPONENT THEO MƠ HÌNH MVC 1. Tạo com_khach_hang theo mơ hình MVC, cĩ chức năng liệt kê danh sách khách hàng. 2. Tạo component com_sach ở Front End theo mơ hình MVC, gồm các chức năng: · Liệt kê danh sách sách. · Hiển thị chi tiết sách · Chọn mua sách o Khi click vào nút chọn mua ở màn hình danh sách Sách hoặc chi tiết sách thì cập nhật thơng tin giỏ hàng chứa trong module giỏ hàng: o Tạo Module giỏ hàng: hiển thị tổng số tiền mà khách hàng đã chọn mua sách (hiển thị tổng tiền từ session). Khi click vào link xem giỏ hàng thì di chuyển đến trang hiển thị danh sách giỏ hàng · Hiển thị giỏ hàng o Hiển thị danh sách giỏ hàng được lưu trong session. o Xử lý xĩa cho giỏ hàng khi click vào link Xĩa. o Khi cập nhật số lượng thì tính lại thành tiền và tổng tiền Bài tập Lập trình Web chuyên sâu với Joomla Trang 14/15 BÀI 9: PLUGIN 1. Tạo plugin loại Seach để bổ sung tính năng tìm kiếm sách cho chức năng Seach của Joomla Hướng dẫn: Tạo plugin plgSearchSach và xử lý biến cố onSearch Bài tập Lập trình Web chuyên sâu với Joomla Trang 15/15 Phụ lục 1. Lược đồ cơ sở dữ liệu