›
›

Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 3: Front End Component

pdf 21 trang ngocly 30
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 3: Front End Component", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_chuyen_sau_voi_cms_joomla_bai_3_fron.pdf

Nội dung text: Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 3: Front End Component

  1. 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 1
  2. TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM Bài 3: Front End Component 1.1. GiGiớớii thithiệệuu 2.2. CCààii đđặặtt TTeemmppllateate mmớớii 3.3. TThhayay đđổổii TTeemmppllateate 4.4. CCậậpp nhnhậậtt TTeemmppllateate 5.5. TTạạoo mmớớii 11 TTeemmppllateate 2
  3. Bài 2: Template 11 GiGiớớii tthihiệệuu – CáctrangWeb đượcxâydựngthườngcó mộtkiểuhiểnthị chungdựatrênmộtmẫugọi làTemplate. – Template dànhchoJoomlacórấtnhiềukiểu dànhchonhiềulĩnhvựckhácnhaunhư văn hóa, nghệ thuật, kinhdoanh, 3
  4. Bài 2: Template 22 CCààii đđặặtt TTememplplaattee mmớớii § Cácbướcthựchiện – Bước1: Download Template mớitạitrang hosting/joomla-templates.htm vàcáctrang kháchoặctựthiếtkếTemplate. 4
  5. Bài 2: Template 22 CCààii đđặặtt TTememplplaattee mmớớii § Cácbướcthựchiện – Bước2: Vàomenu Extensions → chọn Install/Uninstall Manager 5
  6. Bài 2: Template 22 CCààii đđặặtt TTememplplaattee mmớớii § Cácbướcthựchiện – Bước3: Ở mụcUpload Package File, tìmgói Template cầnthêmmới, sau đóclick Upload File & Install 6
  7. Bài 2: Template 22 CCààii đđặặtt TTememplplaattee mmớớii § Cácbướcthựchiện – Thôngbáoviệccài đặttemplate thànhcông. 7
  8. Bài 2: Template 22 CCààii đđặặtt TTememplplaattee mmớớii § Cácbướcthựchiện – Kếtquả 8
  9. Bài 2: Template 33 ThThayay đđổổii TTeemmplplaatete § Cácbướcthựchiện – Bước1: VàoExtensions → chọn Template Manager 9
  10. Bài 2: Template 33 ThThayay đđổổii TTeemmplplaatete § Cácbướcthựchiện – Bước2: TrongdanhsáchcácTemplate hiện có, chọnmộtTemplate muốnthay đổi, sau đó click chọnDefault để hoànthànhviệcthay đổi Template. 10
  11. Bài 2: Template 33 ThThayay đđổổii TTeemmplplaatete § Cácbướcthựchiện – Kếtquả 11
  12. Bài 2: Template 44 CCậậpp nhnhậậtt TTememplplaatete § Cấutrúctemplate § Tìmvàthay đổistyle Template § Xác địnhcácvịtrítrêntemplate § Thêm 1 vị trí 12
  13. Bài 2: Template CCấấuu trtrúúcc TTememplplaatete § Cấutrúcchungcủathư mụcTemplate •CSS: thư mụcchứatậptin template.css(tậptin chứacác địnhdạngchomẫuTemplate) • Images: thư mụcchứacáchình ảnhcầnthiếtchoTemplate • index.php: trangchủ • template_thumbnail.png: hình ảnhcủatemplate saukhithiếtkế xong • templateDetails.xml: nộidung chi tiếtcủaTemplate • templates.php: gọicácphươngthức để hiểnthị Template. 13
  14. Bài 2: Template XXáácc đđịịnhnh ccáácc vvịị trtríí ttrênrên tteemmplplaatete § Thêm vào địachỉ trangchủ thamsốtp=1 Vídụ: 14
  15. Bài 2: Template ThThêmêm 11 vvịị trtríí cchoho TTememplplaatete § Cácbướcthựchiện – Bước1: Mở file index.phpcủatemplate ( các template nằm ở C:\wamp\www\Joomla\templates) –Bước2: Thêmcode địnhnghĩavịtrí 15
  16. Bài 2: Template ThThêmêm 11 vvịị trtríí cchoho TTememplplaatete – Danhsáchcácvịtrícủa1 template được định nghĩatrongfile templateDetails.xml(nằm trongthư mụcgốccủatemplate) 16
  17. Bài 2: Template ThThêmêm 11 vvịị trtríí cchoho TTememplplaatete Kieucócácgiátrị sau: – table = (mặcnhiên) Mỗimodule sẽđược chứatrong1 table. Nếucónhiềumodule thì chúngsẽhiểnthị lầnlượttheohàngdọc –xhtml= Cácmodule sẽđượcchứatrong1 thẻ div vàcácmodule cóhiểnthị tiêu đề – none= Cácmodule sẽđượcchứatrong1 thẻ div vàcácmodule sẽ khônghiểnthị tiêu đề. 17
  18. Bài 2: Template 55 TTạạoo mmớớii 11 TTememplplaatete § Giớithiệu: – Mỗitemplate sẽ cótốithiểu2 file: index.php vàtemplateDetails.xml •Index.php: file chứacode địnhnghĩamẫugiao diện. •templateDetails.xml: chứathôngtin cấuhình, cài đặttemplate. 18
  19. Bài 2: Template TTạạoo mmớớii 11 TTememplplaatete § Vídụtasẽtạo1 template mớitênlà newtemplate. Cácbướcthựchiệnnhư sau: – Bước1: Vàothư mụcjoomla\templates, tạo thư mụcnewtemplate – Bước2: Tạofile index.phpvàthiếtkếgiao diệnchotemplate. 19
  20. Bài 2: Template TTạạoo mmớớii 11 TTememplplaatete § Vídụtasẽtạo1 template mớitênlà newtemplate. Cácbướcthựchiệnnhư sau: – Bước3: Bổ sung code để load nộidung củaJoomla (module, component) chofile index.php •Load header: thêmcode sauvàothẻ head •Load Module: thêmcode sauvàobody •Load component: thêmcode sauvàobody •Load module debug: thêmcode sauvàocuốitrangweb 20
  21. Bài 2: Template 21