Joomla Open SourceContent Management Systems

Nguyễn Hữu PhátMaster of IT-Management

www.kent.edu.vn

Mục đích & Kết quả

Mục đích: • Tự tạo website kết hợp tất cả các môn mà đã từng

học trước đó gồm PHP, Flash, Photoshop, Video, SQL, PHP, HTML, CSS…

• Tự phát triển website thương mại điện tử như giao dịch mua bán, thanh toán trực tuyến

Kết quả: • Tạo được website 2.0 có hệ thống quản trị nội dung

(CMS)• Website không chỉ chạy từ local mà phải là website

thực tế chạy trên Internet với nhiều dạng web dành cho doanh nghiệp, shop bán hàng, web tin tức….

• Dựng web mà có thể giao dịch mua bán hàng hóa và thanh toán trực tuyến theo chuẩn thế giới.

www.kent.edu.vn

Dự kiến thời gian khóa học 30 h

Tổng thời gian gồm 30 giờ chia làm 10 buổi

1. Ngày 01: Tổng quan Joomla, Cài đặt, cấu hình Joomla, Templates

2. Ngày 02: Tạo modules, component, plugin, templates… dựng sẵn (web cty)

3. Ngày 03: Web Photoshop => CSS, HTML và tự tạo templates (web cty)

4. Ngày 04: Tạo nội dung (Article), chỉ định menu, tiếng Việt (web tin tức)

5. Ngày 05: Modules, Component, Plugin (web cty)

6. Ngày 06: Com Virtual Mart (web TMĐT)

7. Ngày 07: Com Virtual Mart, upload online, payment (web TMĐT)

8. Ngày 08: Forum Joomla/VBB, đa ngôn ngữ + projects thực tế (web du lịch)

9. Ngày 09: Tạo form CKForm, URL Friendly, SEO + projects thực tế (web BĐS)

10. Ngày 10: Nâng cấp & Bảo mật + projects thực tế (web học viên)

Dự kiến sau 2 tuần thì có buổi trình bày website thực hiện

Templates Joomla CMS Project

Giai đoạn 01 Giai đoạn 02 Giai đoạn 03

www.kent.edu.vn

CMS là gì?

1. Hiện nay, các website được làm từ Joomla rất nhiều. Tại Việt Nam thì hơn 2/3 các công ty thiết kế web sử dụng Joomla để làm website cho chính công ty thiết kế web. Còn 1/3 số người còn lại vẫn bảo thủ và chê bai... Joomla (Họ thích phần mềm "made in tự tui" và chê bai người khác). Một số công ty thiết kế web khác thì ứng dụng những bộ CMS và Frameworks khác nhau và tuỳ ý thích cuả mỗi người mà chọn bộ CMS cho công ty mình.

2. Mỗi sản phẩm đều có điểm ưu và điểm khuyết. Tuỳ theo yêu cầu và mức độ thông thạo ngôn ngữ lập trình thiết kế, bạn sẽ quyết định chọn ngôn ngữ hoặc frameworks nào.

www.kent.edu.vn

CMS là gì?

1. CMS là hệ thống cho phép bạn tạo, quản lý, lưu trữ và chỉnh sửa số lượng lớn các nội dung mà không cần khả năng lập trình hay viết code HTML. Bởi vì bạn có thể chỉnh sửa nội ung đó từ bất cứ một máy tính có kết nối Internet nào trên thế giới, bạn không cần phải dựa dẫm vào các nhà phát triển web hay bên công ty quản lý website của các bạn.

2. CMS gồm Giao diện (Templates), Nội dung (Content) và Meta data. Hơi khó hiểu, nhưng đại loại ba yếu tố này đóng vai trò quang trọng trong CMS: Giao diện (Templates) là đồ họa cho website, Nội dung (Content) là quản lý tất cả nội dung của website, Meta data giúp cho việc tối ưu hóa công cụ tìm kiếm (SEO)

3. CMS ngoài tính năng chuẩn thì CMS Joomla cho phép bạn Addon Modules, Templates rất linh họat. Nói đơn giãn web rất ít nội dung/tính năng/giao diện ban đầu và dễ dàng cho bạn mở rộng cho phù hợp theo yêu cầu của web theo thời gian.

4. CMS dễ dàng update version mới nhất theo phiên bản phát hành

www.kent.edu.vn

CMS Joomla là gì?

1. Joomla là một hệ quản trị nội dung mã nguồn mở (Tếng Anh: Open Source Content Management Systems . Joomla được viết bằng ngôn ngữ PHP và kết nối tới cơ sở dữ liệu MySQL , cho phép người sử dụng có thể dễ dàng xuất bản các nội dung của họ lên Internet hoặc Intranet.

2. Joomla! là hệ thống quản trị nội dung mã nguồn mở số 1 thế giới hiện nay. Linh hoạt, đơn giản, thanh nhã, tính tuỳ biến rất cao và cực kỳ mạnh mẽ, đó là những gì có thể nói về Joomla! Được sử dụng ở trên toàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp. Việc cài đặt Joomla! rất dễ dàng, đơn giản trong việc quản lý và đáng tin cậy

3. Joomla! giúp xây dựng và triển khai các website blog, website tin tức, website bán hàng, website thương mại điện tử... cho tới mạng cộng đồng, mạng xã hội trong một thời gian ngắn và tiết kiệm nhiều công sức

4. Joomla có các đặc tính cơ bản là: bộ đệm trang (page caching) để tăng tốc độ hiển thị, lập chỉ mục, đọc tin RSS (RSS feeds), trang dùng để in, bản tin nhanh, blog, diễn đàn, bình chọn, lịch biểu, tìm kiếm trong Site và hỗ trợ đa ngôn ngữ.

www.kent.edu.vn

CMS Joomla là gì?

1. Joomla được phát âm theo tiếng Swahili như là 'jumla' nghĩa là "đồng tâm hiệp lực". Joomla được sử dụng ở khắp mọi nơi trên thế giới, từ những website cá nhân cho tới những hệ thống website doanh nghiệp có tính phức tạp cao, cung cấp nhiều dịch vụ và ứng dụng. Joomla có thể dễ dàng cài đặt, dễ dàng quản lý và có độ tin cậy cao.

2. Joomla đoạt giải thưởng phần mềm mã nguồn mở số 1 thế giới hiện có khoảng 3,000 web chính phủ và hơn 1,5 triệu website đang sử dụng CMS Joomla như Cục tình báo Mỹ, Bộ quốc phòng Anh, Citibank, eBay, General Electric,… Ở VN thì 2 TP lớn Hà Nội, HCMC Joomla chiếm khoảng 45%

3. Joomla có mã nguồn mở do đó việc sử dụng Joomla là hoàn toàn miễn phí cho tất cả mọi người trên thế giới.

4. Phiên bản mới nhất là Joomla 2.5 với đặc tính lớn nhất là Dễ dàng update version mới; Nút tìm kiếm tiện lợi hơn; Hỗ trợ nhiều định dạng CSDL; Menu liên kết modules tiện lợi hơn; SEO đa ngôn ngữ; …

5. Chú ý: Version 1.5.x không nâng cấp lên được 2.5 ngay!!!.

www.kent.edu.vn

Joomla! Điều tuyệt vời thực sự là gì ?

Ngoài các vấn đề là mã nguồn mở miễn phí, khả năng bảo mật cao, dễ dàng sử dụng, còn điều gì tuyệt vời hơn đằng sau khiến cho Joomla phát triển mạnh và được nhiều người yêu thích như vậy với Joomla việc lập trình, hiệu chỉnh thêm các thành phần, module, các chức năng cho nó là một việc rất dễ dàng đối với các lập trình viên, và hầu hết tất cả các ứng dụng đều được chia sẻ miễn phí, đó chính là điều tuyệt vời nhất

Sau đây là một vài ví dụ về các ứng dụng được viết thêm hoặc được tích hợp:• Tạo các form linh hoạt, dễ dàng và tự động• Tạo các thư mục về thương mại• Hệ thống quản lý tài liệu• Thư viện hình ảnh và âm thanh• Cửa hàng ảo trực tuyến • Diễn đàn thảo luận • Tạo Blogging• Tin tức qua Email (Email newsletters)• Hệ thống quản lý banner• Và hàng ngàn các ứng dụng khác ...

www.kent.edu.vn

Tính năng nổi bật Joomla

1. Tích hợp E-commerce

2. Diễn đàn thảo luận (Discussion forums)

3. Thư viện ảnh (Photo galleries)

4. Quản lý Video (Video management)

5. Liên kết mạng xã hội như Facebook, Youtube…

6. Hỗ trợ đa ngôn ngữ (Multi-language support)

7. Lấy tin tự động, RSS feeds

8. Thống kê/Theo dõi (Statistics/tracking)

9. Download

10. Thay đổi giao diện (templates) dễ dàng

11. Tùy biến dữ liệu (extra-field)

12. Tích hợp giữa web và mobile web

13. …

www.kent.edu.vn

Joomla! Template là gì?

Joomla! Template là một gói bao gồm các file PHP, HTML, CSS, JS (Javascript), XML... và các tấm hình, ảnh, biểu tượng, video, flash kèm theo tạo nên giao diện (bố cục và hình hài) của Website Joomla.

Template mặc định của Joomla! có 3 template được đóng gói sẵn kèm theo: JA Purity (Joomlart), Rhuk Milkyway (RocketTheme) và Beez (Angie Radtke/Robert Deutz).

Các template này được đặt trong thư mục [Joomla]/templates và nằm trong các thư mục con tương ứng.

www.kent.edu.vn

Đặc điểm của Template Joomla

Các template của Joomla! đều có khả năng tùy biến cao thông qua cách sắp xếp và đặt vị trí các module rất linh động. Việc thiết kế Template khá dễ dàng, thậm chí chỉ cần vài giờ là có thể chuyển từ một template thuần HTML/CSS hay một template của một PORTAL / CMS khác sang template Joomla.

Bạn có thể dùng cùng lúc vài template khác nhau trên cùng website. Chẳng hạn đối với trang HOME bạn gắn nó với template JA Purity, còn trang DOWNLOAD lại gắn nó với template Rhuk Milkyway...

Số lượng template Joomla free (template miễn phí) và template Joomla commercial (template có phí) được cung cấp trên mạng hiện nay là một con số mà nhiều PORTAL / CMS / BLOG khác phải kính nể. Có tới hàng nghìn thậm chí hàng chục nghìn template.

www.kent.edu.vn

Cài đặt Template Joomla

Cài đặt một Joomla Template từ trang quản trị và nó giống như các thành phần mở rộng khác (component, module, plugin, language...), để cài đặt một Joomla Template, chúng ta mở trang quản trị và sử dụng menu Extensions >> Install / Unistall.

Có 3 kiểu cài đặt khác nhau:› Upload từ máy tính của bạn› Cài đặt từ một thư mục trên Hosting› Cài đặt từ một liên kết bên ngoài Webssite của bạn

www.kent.edu.vn

Joomla! Template link

1. Yootheme - http://yootheme.com/demo2. JoomlArt - http://www.joomlart.com/demo/3. Gavick - http://demo.gavick.com/ 4. Rocktheme - http://demo.rockettheme.com/ 5. Bonustheme - http://www.bonusthemes.com/ 6. Joomlamarket - http://demo.joomlamarket.de/ 7. Icetheme - http://demo.icetheme.com/8. Shape5 - http://www.shape5.com/ 9. ZooTemplates - http://www.zootemplate.com/ 10. JoomlaXTC - http://demo.joomlaxtc.com/ 11. Templates Plazza - http://demo.templateplazza.net/ 12. ZooTemplates - http://www.zootemplate.com/demo

/

www.kent.edu.vn

Joomla Component là gì ?

Joomla Component là một trong các thành phần mở rộng của Joomla!, thực chất nó là một ứng dụng trong hệ thống Joomla!. Component được sử dụng để thực hiện một chức năng lớn nào đó, chẳng hạn như: Cung cấp tin tức, Quảng cáo, Rao vặt, Đặt phòng khách sạn, Bất động sản, Download...

Một component được hiển thị ở phần trung tâm, hay phần chính (mainbody) của Website

www.kent.edu.vn

Cài đặt Joomla Component

Giống như các thành phần mở rộng khác (module, plugin, template, language...), để cài đặt một Joomla Component, chúng ta mở trang quản trị và sử dụng menu Extensions >> Install / Unistall

Có tất cả 11 component mặc định được đặt trong thư mục [Joomla]/components tương ứng với ký hiệu là "com_xyz".› com_banners: Quản lý bảng quảng cáo (banner)› com_contact: Quản lý các đầu mối liên hệ (contact)› com_content: Quản lý và hiển thị bài viết (đây là component quan trọng nhất)› com_mailto: Quản lý chức năng gửi/nhận email› com_media: Quản lý các tệp đa phương tiện (video, flash, mp3, hình)› com_newsfeeds: Quản lý việc lấy tin từ website khác› com_poll: Cung cấp chức năng bình chọn› com_search: Cung cấp chức năng tìm kiếm› com_user: Quản lý thành viên› com_weblinks: Quản lý và hiển thị danh mục các website liên kết› com_wrapper: Cho phép nhúng website khác trong cửa sổ của website Joomla

www.kent.edu.vn

Component hay dùng

CKform => form liên hệ, book tour, order com_oziogallery2.3 => tạo thư viện ảnh Flash com_phocagallery_v2.7.3 => thư viện ảnh PHOCA com_phocamaps_v1.1.0 => Map vị trí com_virtuemart_magiczoom => ảnh zoom + nhiều ảnh

trong virtuemart com_ccboard_1_2-RC => forum Joomla com_flippingbook_for_1.5 => e-Catelogue K2_CMS => tạo tin, form order Joomla! Fish => tạo website nhiều ngôn ngữ JOOMGALLERY_1_5_0_5 => thư viện ảnh cho phép

upload ảnh dự thi Com_widgetkit => đa chức năng của Yootheme …

www.kent.edu.vn

Joomla Module là gì?

Joomla Module là một trong các thành phần mở rộng của Joomla, nó là một ứng dụng nhỏ được sử dụng chủ yếu để lấy dữ liệu và hiển thị thông tin. Module thường được dùng kết hợp kèm với các component nhằm mở rộng, cũng như thể hiện rõ ràng hơn các chức năng của component

Không giống như component, một module có thể được đặt ở bất kỳ vị trí nào trên template hoặc vị trí do người dùng tự định nghĩa. Ngoài ra một module có thể được nhân bản, nghĩa là cùng lúc có thể xuất hiện tại một vị trí hoặc các vị trí khác nhau

www.kent.edu.vn

Vị trí của Module Joomla?

Vị trí của module (module position) là nơi mà module có thể được đặt vào đó. Mỗi vị trí đều được xác định thông qua một định danh duy nhất (một cái tên), chẳng hạn như: left, right, top, bottom, user1, user2... Tên và số lượng các vị trí này được quy định bởi template. Các template khác nhau thì số lượng vị trí module cũng như tên của chúng có thể khác nhau. Ngoài ra, trong quá trình sử dụng người dùng cũng có thể tự định nghĩa các vị trí mới sao cho phù hợp với yêu cầu của mình.

Joomla! 1.5 có tất cả 20 module mặc định được cung cấp kèm theo. Các module này được đặt trong thư mục [Joomla]/modules và nằm trong các thư mục con tương ứng với ký hiệu là "mod_xyz".

Để tìm một module joomla bạn có thể truy cập vào website Joomla Extensions.

Lưu ý: Một số module chỉ thực hiện đúng chức năng khi nó được cài đặt kèm theo một component tương ứng. Do vậy bạn phải đọc kỹ hướng dẫn sử dụng của module đó.

Để xem vị trí module từ website bạn thêm đoạn code \?tp=1 hoặc &tp=1

www.kent.edu.vn

DS module Joomla mặc định

mod_archive: Module hiển thị các bài viết đã được đánh dấu "lưu trữ“ mod_banners: Module hiển thị các quảng cáo mod_breadcrumbs: Module hiển thị thanh điều hướng mod_custom: Module hiển thị một đoạn mã HTML bất kỳ mod_feed: Module hiển thị tin lấy từ các website khác mod_footer: Module hiển thị dòng bản quyền ở cuối Website mod_latestnews: Module hiển thị các bài viết mới nhất mod_login: Module hiển thị form đăng nhập mod_mainmenu: Module hiển thị menu điều khiển mod_mostread: Moudle hiển thị các bài viết được đọc nhiều nhất mod_newsflash: Module hiển thị tin vắn / tin nhanh mod_poll: Module hiển thị bình chọn mod_random_image: Module hiển thị ảnh ngẫu nhiên mod_related_items: Module hiển thị các bài viết liên quan mod_search: Module hiển thị form tìm kiếm mod_sections: Module hiển thị danh sách các mục của Website mod_stats: Module hiển thị các thông số thống kê của Website mod_syndicate: Module cấp tin cho các website khác mod_whoisonline: Module hiện danh tính và số người trực tuyến mod_wrapper: Mudule hiển thị một trang web bất kỳ được nhúng vào website Joomla

www.kent.edu.vn

Modules hay dùng (1)

mod_yoo_carousel_1.5.17 => TAB INFO, slide hình ảnh lấy từ artical

mod_yoo_scroller => logo, sản phẩm chạy qua lại mod_yoo_gallery_1.5.4 => mod thư viện ảnh mỗi

tin bài mod_moopopup_J15 => quảng cáo popup mod_maxdesign_float_ad => quảng cáo trượt 2

bên mod_pagepeel_banner_J15 => quảng cáo stick

ngay góc màn hình mod_vvisit_counter.1.7.3 => đếm lượt truy cập mod_GMap-0.12 => bản đồ Google Map, đăng ký

code Google API

www.kent.edu.vn

Modules hay dùng (2)

mod_oziogallery-1.0.1 & com-oziogallery-1.0.8Y => flash banner

mod_slideshow2_j15 => slide ảnh có nội dung

mod_newsletter_subscriber => news letter mod_ht_support => chat Yahoo, Skype

support mod_facebook_like_box => nhúng member

Facebook mod_gtranslate => đa ngôn ngữ dịch theo

Goole Translate …

www.kent.edu.vn

Joomla Plugin là gì?

Joomla Plugin là một trong các thành phần mở rộng của Joomla! nhằm giúp thực hiện một cách tự động công việc cụ thể.

Trong phiên bản Joomla! 1.5 có tất cả 32 plugin mặc định được cung cấp kèm theo. Các module này được phân thành 8 loại khác nhau và đặt trong các thư mục con tương ứng của thư mục [Joomla]/plugins.

Một số plugin như popup hình ảnh, chèn flash, tuyết rơi, biên dịch URL, widget bar, google analytics…

www.kent.edu.vn

Joomla Plugin

Danh sách các loại plugin của Joomla!› authentication: Các plugin chứng thực quyền hạn› content: Các plugin nội dung (bài viết)› editors: Các plugin về trình soạn thảo› editors-xtd: Các plugin hỗ trợ, mở rộng tính năng cho trình soạn thảo› search: Các plugin về tìm kiếm› system: Các plugin của hệ thống› user: Các plugin về người dùng› xmlrpc: Các plugin cho phép quản trị Joomla!, viết bài từ các hệ thống khác.

Download các plugin Joomla ở đâu?Để download các plugin mở rộng khác của Joomla, bạn có thể truy cập vào website Joomla Extensions và chọn từ danh mục có sẵn hoặc theo từ khóa mà bạn chỉ định

www.kent.edu.vn

Plugin hay dùng

plg_jathumbnail => tự tạo ảnh thumbnail wibiya_for_joomla => widget-bar footer plgjLike => Like facebook plg_snowxmas => hiệu ứng tuyết rơi Pdfembed15 => nội dung chứa file PDF plg_al_facebook_comments => comment

web đồng bộ Facebook plugin_openpotion_google_analytics_1.1 =>

nhúng thống kê Google Analytics jce_mediamanager_150 => chèn flash, clips

(cài trong com JCE)

www.kent.edu.vn

Quy trình dựng Templates (1)

1. Chọn Templates› Freecode.vn => copy title tem => Google Image

=> preview layout web› Download tại web hoặc search keyword=tên

template + mediafire => download temp

2. Intall Quickstar => Double templates đang dùng => sửa lại file

› Templatesdetail.xml => sửa thông số website› Favicons.icon => tạo file PNG 16x16px => vào

web iconverticons.com => save format www

www.kent.edu.vn

Quy trình dựng Templates (2)

1. Tạo sitemap› Content – Section Manager => tạo thư mục cha› Content – Catelogue Manager => tạo thư mục con› Article Manager => tạo nội dung bài viết

2. Templates Manager => previews temp đang dùng ở vị trí nào (Hoặc cụm từ \?tp=1)

3. Modules => cài mod theo từng vị trí hoặc disable mode ko dùng

4. Cài Component => config => đẩy nội dung5. Hiển thị menu => Menu – Main Menu => chỉ

định bài viết hoặc com

www.kent.edu.vn

Dựng Templates – Tạo index.php

1. Tạo website từ Photoshop

2. Rã website sang CSS + HTML

3. Copy folder vừa tạo vào folder templates

4. Rename HTML => index.php

5. Mở file index.php mẫu từ ja_purity • Copy đoạn đầu đến </head>• Thay đổi file CSS

6. Mở file Word xem vị trí• Copy thay đoạn code nội dung dưới tab <div id="top_menu">

<jdoc:include type="modules" name=" top_menu " /> </div>• Thay hết toàn bộ vị trí các <div>

7. Đến vị trí nội dung chính #content thành <jdoc:include type="component" />

8. Kết thúc và lưu dưới dạng index.php

www.kent.edu.vn

Tạo templateDetails.xml

1. Copy file templateDetails.xml từ bộ ja_purity làm mẫu

2. Tìm đoạn position => sửa lại vị trí đã dựng layout

3. Tạo ảnh thumbnail size 200x150px

4. Xem thử vào fix lỗi

www.kent.edu.vn

Link Joomla

1. Link hay sử dụng› Hãng Joomla: www.joomla.org› Download extenstions: http://extensions.joomla.org› Joomla Vietnam http://freecode.vn › Cộng đồng Joomla Việt http://joomlaviet.vn/› Diễn đàn Joomla người Việt http://

forum.joomla.org/index.php/board,171.0.html› Jooma Việt http://joomlavi.vn/vietnam/› Diễn đã Joomla Viet http://diendan.joomlaviet.vn/

2. Hosting PHP Joomla miễn phí› http://freevnn.com/ (300MB & 1 tháng)› http://www.byethost.com/