Điều kiện để có thể cài đặt joomla là mày tính của bạn cần được cài đặt những thứ sau: Webservice(Apache, IIS), PHP, Mysql. 3 thứ trên phải được cấu hình với nhau để có thể phục vụ lẫn nhau. Nếu bạn thấy cấu hình mấy cái này khó khăn thì nên sử dụng 1 gói cài đặt chung cho cả 3 thứ ví dụ như Xampp chẳng hạn. Sau khi cài đặt gói Xampp bạn sẽ có đủ cả mấy thứ trên.
Link download Xampp:
http://www.apachefriends.org/en/xampp-windows.html
2.2.6.1 Bước 1: Download & Upload bộ cài đặt Joomla!
Sau khi đã cài đặt Apache hoặc Xampp bạn cần download Joomla! Tại địa chỉ http://www.joomla.org/download.html
Upload Joomla : Upload lên Server và giải nén vào thư mục gốc chứa Web của bạn (hoặc một thư mục con của nó và đặt tên là joomla).
Bạn có thể Upload bằng một số cách:
Bằng Copy trực tiếp (nếu cài trên máy của bạn)Bằng công cụ quản trị mà HOSTING cung cấp.Bằng công cụ FTP: WS_FTP, Total Commander, Net2FTP
2.2.6.2 Bước 2: Chọn ngôn ngữ cài đặt
Mở trình duyệt và gõ vào địa chỉ Website của bạn.
Nếubạn giải nén bộ cài đặt vào thư mục gốc thì gõ: http://yoursite/
VD: http://coltech.vnu.edu.vn
VD: http://localhost/ (nếu cài trên máy của bạn)
VD: http://coltech.vnu.edu.vn/joomla/
VD: http://localhost/joomla/ (nếu cài trên máy của bạn)
Màn hình cài đặt xuất hiện và bạn có thể chọn một ngôn ngữ trong quá trình đặt:
13. Install 1
2.2.6.3 Bước 3: Kiểm tra cấu hình hệ thống
Nếu các giá trị kiểm tra có màu xanh thì OK. Nếu các giá trị kiểm tra có màu đỏ thì bạn cần hỏi bộ phận Hỗ trợ kỹ thuật của Server. Bạn vẫn có thể tiếp tục cài đặt tuy nhiên một số chức năng có thể sẽ không hoạt động.
14. Install 2
2.2.6.4 Bước 4: Thông tin bản quyền
15. Install 3
2.2.6.5 Bước 5: Thiết lập các thông số để kết nối tới Cơ sở dữ liệu
Hostname: Thường là giá trị "localhost"(chỉ điền giá trị khác nếu như Database Server và Web Server nằm ở 2 nơi khác nhau, hoặc Host của bạn cung cấp như vậy)
User name: Tên tài khoản có quyền đối với cơ sở dữ liệu chứa Joomla của bạn.
Password: Mật khẩu của tài khoản trên
Availbe Collations: Bạn nên chọn là "utf8_general_ci"
16. Install 4
2.2.6.6 Bước 6: Thiết lập các thông số FTP
Nếu Host của bạn không hỗ trợ, mục này sẽ không hiển thị
Nếu Host của bạn hỗ trợ, bạn cần chú ý: • Username: Tên tài khoản FTP
• Password: Mật khẩu tương ứng.
• Auto Find Path: Tự động tìm đường dẫn tới nơi chứa Web của bạn (Nên dùng chính tài khoản mà bạn đã Upload bộ cài đặt Joomla lên HOST)
2.2.6.7 Bước 7: Thiết lập cấu hình site Joomla của bạn
Site name: tên site của bạn.
VD: admin@yoursite.com This e-mail address is being protected from spambots. You need JavaScript enabled to view it
Admin Password: Mật khẩu để quản trị Joomla
Các thông số trên sau này đều có thể thay đổi dễ dàng nên bạn không cần bận tâm lắm. Chỉ cần nhớ mật khẩu là đủ.
Install Defaul Sample Data: Cài đặt dữ liệu mẫu. Bạn nên nhấn nút này để Joomla tạo mẫu cho bạn một trang web đơn giản.
17. Install 5
2.2.6.8 Bước 8: Kết thúc
Lưu ý: tài khoản truy nhập hệ thống là: admin; mật khẩu: mật khẩu mà bạn đã gõ ở bước 6.
Để xem Website của bạn: Nhấn vào nút Site
• http:// www.yoursite.com/administrator/ hoặc • http://www.yoursite.com/joomla/administrator hoặc
• http://localhost/administrator/(nếu cài trực tiếp trên máy của bạn)
Chương 3. PHÂN TÍCH THIẾT KẾ WEBSITE 3.1 Phương pháp thực hiện.
3.1.1 PHƯƠNG PHÁP
Sử dụng hệ quản trị nội dung mã nguồn mở (Tếng Anh : Open Source Content Management Systems) JOOMLA. Joomla!
Dựa trên cơ sở dữ liệu của website http://coltech.vnu.edu.vn/ đơn vị chủ quản Trung tâm máy tính đại học quốc gia hà nội.
Ngôn ngữ sử dụng PHP , Javascript, Css, HTML
Hệ quản trị cơ sở dữ liệu My SQL.
Phân tích thiết kế - lập trình giao diện: Tạo một Template cho Joomla! Thỏa mãn các yêu cầu đã nêu ở trên.
Tạo các module – template Joomla phù hợp với yêu cầu của đồ án.
3.1.2 Phân tích và thiết kế website đại học công nghệ phiên bản cho di động gồm các bước:
Phần tích thiết kế giao diện ( template)
Phân tích thiết kế module (menu)
Phân tích thiết kế module ( lựa chọn giao diện)
Plugin phần biệt thiết bị truy cập và lựa chọn giao diện
Plugin hỗ trợ hiển thị bài viết
Plugin hỗ trợ clean – cache giúp tăng tốc độ truy cập web.
3.1.3 Hướng dẫn cách cài đặt Extension ( Module, Plugin )
Cài đặt các Extension là một công việc quan trọng trong việc lập trình với Joomla. Nhưng Joomla đã xây dựng hệ thống giao diện hỗ chợ rất đơn giản và thuận tiện cho người sử dụng.
Để cài đặt một thành phần mở rộng bạn có 3 lựa chọn:
• Cài đặt thông qua file nén (ZIP)
3.1.3.1 Cài đặt qua file nén Zip
Cài đặt thông qua file nén (ZIP).
• Mở trang quản trị (VD: http://yoursite/administrator/ ) • Chọn menu "Extensions"
• Chọn mục "Install/Unistall"
• Trong ô "Upload Package File" nhấn nút "Browse..." và chọn file nén chứa extension.
• Nhấn nút "Upload file and Install" • Chờ Joomla thông báo kết quả cài đặt
• Đây sẽ là cách được dùng để cài đặt Module , Plugin trong chương trình của tôi.
3.1.3.2 Cài đặt qua một danh sách các file được upload lên server. • Đây là cách copy trực tiếp file ( plugin – module) vào các thư mục
đã được quy định trên server.
• Ví dụ: Các module sẽ copy vào thư mục …/modules Các template sẽ copy vào thư mục …/templates
3.2 Phân tích thiết kế và lập trình giao diện. 3.2.1 Yêu cầu giao diện của chương trình:
Phiên bản website http://coltech.vnu.edu.vn/ đáp ứng được các yêu cầu:
Giao diện được hiển thị phù hợp với độ phân giải của thiết bị di động. Độ phân giải 320 x 240 (pixel).
Dung lượng website nhỏ hơn, tối ưu hơn phiên bản giành cho Máy vi tính.
Giao diện hiển thi thông tin phù hợp , thuận tiện cho nhu cầu cập nhật thông tin của người dùng.
Hỗ trợ người dùng thích ứng được ngay với giao diện mới.
Giao diện có thể truy cập tốt trên tất cả các trình duyệt trên các thiết bị di động.
Tối ưu code lập trình giao diện (template): Code đơn giản
Đưa vào ứng dụng thực tế.
3.2.2 Thiết kế giao diện:
Giao diện được thiết kế theo hình vẽ
Giao diện thiết kế đàm bảo: Đơn giản, phục vụ những yeu cầu đặt ra.
Do màn hình di động có độ phân giải nhỏ lên phải thiết kế các giao diện sắp xếp theo chiều ngang.
3.2.3 Lập trình giao diện (template)
Cấu trúc của 1 file template của joomla:
20..Template 2
3.2.3.1File templateDetails.xml
File ../Khoaluan/ templateDetails.xml đây là file có nhiệm vụ khai báo các thông tin của template: tên , các position, các file trong template.
Khai báo những thông tin về : Tên, version, tác giả … và khai bảo những file của template.
Khai báo các position của template. Đây là yêu cầu cần thiết, không thể thiếu của một template website.
File ../Khoaluan/index.php : đây là file chính để bạn chỉnh sửa giao diện cho trang web. Là file Php nhưng ngôn ngữ sử dụng lập trình chính là HTML
Yêu cầu khi lập trình giao diện:
Code phải đơn giản, ngắn gọn
Các ảnh ( image) kích thước phải tối ưu
Hiển thị tốt trên các trình duyệt khác nhau.
Không dùng table trong lập trình giao diện
Nguyên nhân việc không sử dụng table:
Trộn lẫn giữa dữ liệu và thiết kế trang web gây nên sự rối rắm
Tạo ra kích thước file HTML lớn một cách không cần thiết dẫn đến việc nạp trang lâu hơn, tiêu tốn nhiều băng thông làm chi phí thuê hosting tăng lên
Việc duy trì, chỉnh sửa và mở rộng rất khó thực hiện, tốn kém chi phí
Không tuân thủ các chuẩn trong thiết kế, chứng tỏ sự chưa chuyên nghiệp
Khó tiếp cận vào thông tin nội dung của trang: trình duyệt của PDA, di động bó tay trước các trang web thiết kế dùng table
Các công cụ tìm kiếm cũng chê các trang dùng table nên trang web của bạn sẽ khó tìm thấy trên Internet, đây là một bất lợi lớn
Khiến người lập trình phải làm việc vất vả hơn khi dữ liệu bị "băm nhỏ" và xen vào những đoạn ãm lập trình
Trang web nặng nề, thiếu trang nhã
Giải pháp của việc lập trình ở đây là dùng các thẻ <div>
Tác dụng của việc dùng thẻ <div> Lập trình template:
Buộc bạn viết mã đúng chuẩn
Nạp trang nhanh hơn
Dễ đọc mã hơn
Thuận tiện hơn cho việc in ấn trang
Tối ưu hóa các cỗ máy tìm kiếm (search engine)
Trình diễn linh hoạt hơn
Hiển thị tốt trên các trình duyệt khác nhau
File : ../Khoaluan/css/template.css : File css được sử dụng trong template
Folder: Khoaluan
File ../Khoaluan/index.php : đây là file chính để bạn chỉnh sửa giao diện cho trang web. Là file Php nhưng ngôn ngữ sử dụng lập trình chính là HTML
File ../Khoaluan/ favicon.icon là icon của website
Folder: ../Khoaluan/images : Nơi chứa các ảnh sử dụng lập trình template
Folder : ../Khoaluan/css : chứa các file css được sử dụng trong file index.php
File : ../Khoaluan/css/template.css : File css được sử dụng trong template
3.2.3.3Việc sử dụng template:
Copy thư mục /Khoaluan vào thư mục …/Joomla/templates
Để mặc định template: Chúng ta đăng nhập vào backend.
Đến Extensions/Template Manager
Lựa chọn giao diện, lựu lại vào nhấn refesh ở Frontend.
23.Template 5
3.3 Module Menu
Thuận lợi cho việc lựa chọn các chuyên mục thông tin khi truy cập bằng thiết bị di động.
Hiển thị tốt trên thiết bị di động.
Menu đơn giản, làm giảm dung lượng website.
3.3.2 Thiết kế module cho menu.
Menu thể hiện ở dạng selectbox.
25.Menu 1
3.3.3 Lập trình module select menu.
Cấu trúc module :
26.Menu 2
File mod_khoaluan.xml đưa ra giao diện cho module ở phần backend.
27.Menu 3
Trong backend chúng ta có thể lựa chọn thông số cho các module.
Module Class Suffix: Lựa chọn đuôi cho id của menu. Sử dụng trong css
Title: Tên menu
Max level nodes child: Số cấp của menu. Dùng cho menu kiểu tree. Max width Select: Chiều dài tối đa của menu.
Expand Top Menu Items … lựa chon xem sẽ hiển thị những menu nào trong module này.
3.3.4 File ../mod_khoaluan/mod_khoaluan.php
Đây là file lập trình bằng code PHP , có sử dụng thêm SQL, Javascript, HTML. Xử lý thông tin và đưa các menu ra.
3.3.5 Cài cặt và sử dụng module.
Lén file mod_khoaluan ở dạng .zip
Login vào backend
28.Menu 4
Sau thành công. Để tạo module extensions/Module Manager
30.Menu 6
Lựa chọn New
31.Menu 7
32.Menu 8
Lựa chọn các thông số cho menu -> Save Lưu ý việc lựa chọn vị trí Position cho module.
33.Menu 9
3.4 Module lựa chọn giao diện cho website 3.4.1 Yêu cầu và thiết kế
Module lựa chọn giao diện sẽ có yêu cầu và thiết kết giống với module menu
34.Menu 10
3.4.2 Lập trình cho module
Đây là module đã được phát triển sẵn.
Module và plugin đã được để trong file đính kèm.
Để sử dụng module cần install module – và plugin
3.4.3 Sử dụng module :
Sau khi cài đặt module vào plugin thành công
Bước 1 : Bật plugin Templatechooser Extensions/ Plugin Manager
Module lựa chọn giao diện 1
Module lựa chọn giao diện 2
Click yes để cho hoạt động Plugin trong mục Enable -> Chọn Save
Module lựa chọn giao diện 3
Bước 2: Hiển thị module lựa chọn giao diện ra ngoài Template:
Extensions -> Modules Manager Lực chọn tạo mới New
Module lựa chọn giao diện 4
Lựa chọn
Click vào Template Chooser hiện ra thông tin menu:
Module lựa chọn giao diện 6
Chú ý các mục khoảnh đỏ: Tên module, Positions, và lựa chọn các giao diện sẽ hiển thị. Bình thường chúng da sẽ cho hiển thị 2 giao diện. 1 giao diện cho việtc truy cập trên máy tính, 1 giao diện cho việc truy cập trên Mobile
Nhấn lưu ( Save)
3.4.4 Kết quả sau khi tao module :
3.5.1 Sử dụng chương trình mở rộng Plugin CacheCleaner-v1.1.3
Chương trình này sẽ giúp bạn lưu toàn bộ những thông tin được upload đến thời điểm hiện tại trên cache của server.
Vì vậy việc truy cập web từ trình duyệt sẽ nhanh hơn.
Cách sử dụng : Sau khi cài đặt plugin ở backend
Lựa chọn Extensions / Plugin Manager
TÌm đến
Cache cleaner 1
Click vào quản lý plugin này. Lựa chon yes cho Enabled và lưu
Sạu khi refresh thì kết quá cho chúng ta : xuấ hiện thêm biểu tượng Clean Cache ở trang quản trị Backend
36.Plugin 1
Chú ý mỗi khi chúng ta upload một cái gì mới lên server thì phải nhấn vào clean cache để xóa những cache đã lưu trước đó.
3.5.2 Chỉnh sửa bài viết:
Khi chúng ta tạo bài viết mới cho website thì không lên upload luôn những ảnh có kick thước lớn.
Mà lên chỉnh kích thước ảnh vừa đủ với độ hiển thị trên các thiết bị mobile
Ví dụ các ảnh từ khoảng (100x100 đến 200x 200 px)
Với kích thước ảnh vừa đủ sẽ giảm tải dung lượng web.
3.6 Plugin giúp hiển thị những bài viết liên quan
Plugin
extra news 1
Giúp hiển thị những tin liên quan: Đây là những tin mà có cùng meta keyword.
Cho plugin hoạt động
Extensions / Plugin manager
Lựa chọn
extra news 2
extra news 3
Lựa chọn và kích hoạt plugin.
Sau khi cài đặt xong, refesh quay lại giao diện frontend và xem kết quả. Cuối mỗi bài viết sẽ hiển thị:
38.Plugin 2
Chức năng này sẽ giúp người dùng dễ dàng hơn trong việc cập nhật thông tin và xem tin tức của người sử dụng Website.
Trang chủ
Giao diện 1
Giao diện 2
Giao diện phù hợp chu dùng thiết bị di động.
PHỤ LỤC: TÀI LIỆU THAM KHẢO
[1] http://docs.joomla.org [2] http://joomlaviet.org/ [3] http://vinaora.com