Tham khảo sách 'thiết kế web với joomla và một số thủ thuật trong joomla', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
AMBIENT/
Chủ đề:
Nội dung Text: Thiết kế Web với Joomla và một số thủ thuật trong Joomla
- Thiết kế Web với Joomla và một số thủ
thuật trong Joomla
- Part 1
Thiết Kế Web Với JoomlaJoomla! là một hệ quản
trị nội dung mã nguồn mở (tiế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.
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ữ.
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.
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.
Tham khảo thêm: WikiPedia-Joomla, Wikipedia-Hệ quản trị nội dung
Các khái niệm và thuật ngữ
Module là gì?
Module là một trong 3 thành phần mở rộng chính của Joomla! Đó là một
đoạn mã nhỏ thường được dùng để truy vấn các thông tin từ cơ sở dữ liệu
Collection by traibingo 1
- và hiển thị các kết quả tìm được. Nó có thể được nạp vào một vị trí bất kỳ
trên template (vị trí left, right, top, bottom... hoặc vị trí do người dùng định
nghĩa); có thể hiện trên tất cả các trang của Website hay một số trang
được ấn định. Khả năng tương tác giữa người sử dụng và hệ thống thông
qua module là hạn chế (chúng ta thường chỉ nhận thông tin trả về).
Module có tên bắt đầu bằng mod_
Chúng ta có các module thông dụng:
Lastest News (mod_latestnews): Module hiển thị các tin mới nhất
Popular News (mod_mostreads): Module hiển thị các bài được quan
tâm nhiều nhất
Related Items (mod_related_items): Module hiển thị các bài viết liên
quan
Random Image (mod_random_image): Module hiển thị các ảnh
ngẫu nhiên
Search Module (mod_search): Module công cụ tìm kiếm
Login Module (mod_login): Module hiển thị form đăng nhập hệ thống
Stats Module (mod_stats): Module hiển thị các thông tin thống kê về
hệ thống
Menu Module (mod_mainmenu): Module hiển thị các menu của
website
Banners Module (mod_banners): Moudule hiển thị các banner
quảng cáo
...
Khái niệm Front-end và Back-end
Front-end (tiền sảnh)
Front-end (tiền sảnh), còn được biết với tên gọi Public Front-end: phần
giao diện phía ngoài, nơi tiếp xúc với mọi người sử dụng. Bất cứ ai cũng
có thể trông thấy khi gõ đúng đường dẫn URL vào trình duyệt.
Front-end chứa 1 trang đặc biệt là FrontPage (homepage) - trang chủ.
Back-end (hậu sảnh)
Back-end, còn được biết với tên gọi Public Back-end, Administrator,
Control Pane: phần dành cho người quản trị. Những người bình thường
Collection by traibingo 2
- không biết đường dẫn để truy cập, hoặc nếu có biết thì cũng phải qua
bước kiểm tra tài khoản.
Phần back-end được truy cập thông qua đường dẫn:
http://your_domain/administrator.
Các khái niệm Section, Category và Content là gì?
Trước khi đi vào xây dựng một Website bằng Joomla chúng ta cần nắm rõ
3 khái niệm quan trọng: Section, Category và Content. Vậy Section là gì?
Category là gì? Content là gì?.
Chúng ta cùng xem "Cấu trúc nội dung của một Website Joomla" được thể
hiện thông qua hình vẽ dưới đây:
Section 1
--------|Category 1a
--------|Category 1c
--------|Category 1b
Section 2
--------|Category 2a
--------|Category 2b
--------------------|Content 2b1
--------------------|Content 2b2
Section là gì?
Collection by traibingo 3
- Section: Các mục, các lĩnh vực, các dòng sản phẩm, dịch vụ... mà
Website muốn đề cập tới.
VD1: Một Website bán sách trực tuyến có thể bao gồm các Section: "Sách
Văn học", "Sách Tin học", "Sách Toán học"...
VD2: Một Website về tin tức có thể bao gồm các Section: "Thể thao", "Văn
hóa", "Pháp luật"...
Category là gì?
Category: Các chuyên mục, loại sản phẩm, loại dịch vụ... được đề cập một
cách cụ thể hơn, chi tiết hơn.
VD1: Trong Section "Văn học" có các Category: "Tiểu thuyết", "Truyện
ngắn", "Hồi ký"...
VD2: Trong Section "Thể thao" có các Category: "Bóng đá", "Quần vợt",
"Các môn thể thao khác"...
Content là gì?
Content: Toàn bộ nội dung của một bài viết và thường gồm 2 phần:
Phần giới thiệu (Intro Text): Phần này nêu ngắn gọn, tóm tắt hoặc là
ý mở đầu cho toàn bộ bài viết.
Phần chi tiết (Description Text): Phần còn lại của bài viết.
Như vậy để tạo một bài viết chúng ta cần qua tối đa 3 bước và tối thiểu là 1
bước nếu đã co Section và Category:
1. Bước 1: Tạo Section: Vào Content --> Section Manager
2. Bước 2: Tạo Category: Vào Content --> Category Manager
3. Bước 3: Tạo Content: Vào Content --> Article Manager --> New
Collection by traibingo 4
- Lựa chọn phiên bản của Joomla!
Một trong những thắc mắc thường gặp của
những người mới làm quen với Joomla là: Đâu là
phiên bản mới nhất của Joomla Joomla 1.5 ???
hay Joomla 1.0.12 ???. Cái nào cung cấp nhiều
tính năng hơn, ổn định hơn, được hỗ trợ nhiều hơn, đẹp hơn, đáng
dùng hơn...
Xin được giải thích ngay. Hiện Joomla có 2 dòng phiên bản chính: Joomla
1.0.x và Joomla 1.5.x
Dòng phiên bản Joomla 1.0.x
Là phiên bản phát hành ổn định.
Được sử dụng rộng rãi, có nhiều thành phần mở rộng (component,
module, mambot)...
Có thể sử dụng ngay cho website của bạn.
Joomla 1.0.0: Phiên bản phát hành đầu tiên (15-09-2005)
Joomla 1.0.12: Phiên bản phát hành mới nhất (25-12-2006)
Dòng phiên bản Joomla 1.5
Là phiên bản phát triển và vẫn đang ở giai đoạn Beta 2 (chưa ổn
định).
Phiên bản Joomla! 1.5 là phiên bản cải tiến từ Joomla 1.0.x (phần mã
được viết lại hoàn toàn, tuy nhiên vẫn giữ cách hành xử như cũ)
được coi như Mambo 4.6. Ban đầu nó còn được gọi là Joomla 1.1,
nhưng sau đó vì nhận thấy nó được cải tiến nhiều về mặt kỹ thuật,
tính năng nên nhóm phát triển quyết định lấy tên là Joomla 1.5
Có nhiều tính năng hay
Chỉ nên sử dụng cho mục đích thử nghiệm
Joomla 1.5 hỗ trợ đa ngôn ngữ
Joomla 1.5 dùng charset mặc định là UTF-8 (thay vì ISO-8859-1
trong Joomla 1.0.x)
Collection by traibingo 5
- Lựa chọn phiên bản để cài đặt
Cài đặt lần đầu, cài mới
Bạn nên chọn phiên bản Joomla 1.0.x, chọn bản mới nhất: Joomla 1.0.12
- Bước 1: Mở http://joomlacode.org/gf/project/joomla/frs/
- Bước 2: Chọn bản Joomla_1.0.12-Stable-Full_Package.zip (Stable: Ổn
định, Full: Đầy đủ)
Cài đặt ở chế độ nâng cấp
Nếu bạn đang dùng Joomla 1.0.x. VD: Joomla! 1.0.7 và muốn nâng cấp
lên Joomla! 1.0.12.
- Bước 1: Mở http://joomlacode.org/gf/project/joomla/frs/
- Bước 2: Chọn bản Joomla_1.0.7_to_1.0.12-Stable-Patch_Package.zip
(1.0.7 to 1.0.12)
- Bước 3: Giải nén và copy đè vào thư mục Joomla cũ.
Cài đặt ở chế độ phát triển, kiểm tra tính năng
Hiện tại Joomla đang phát triển dòng phiên bản Joomla! 1.5
Download link Joomla 1.5: http://dev.joomla.org/content/view/17/60/
Collection by traibingo 6
- Part 2
Web Server là gì? HTML là gì? PHP là gì?
HTML là gì?
HTML (tiếng Anh, viết tắt cho HyperText Markup Language, tức là "Ngôn
ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra
để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên
World Wide Web. Được định nghĩa như là một ứng dụng đơn giản của
SGML, vốn được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản
phức tạp, HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World
Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất của nó hiện là
HTML 4.01. Tuy nhiên, HTML hiện không còn được phát triển tiếp. Người
ta đã thay thế nó bằng XHTML.
Web Programming Language là gì?
Web Programming Language (Ngôn ngữ lập trình Web): Ngôn ngữ được
viết theo phong cách lập trình (khác so với HTML - ngôn ngữ đánh dấu) để
hỗ trợ và tăng cường các khả năng của Web. Cho phép điều khiển các
phần tử của trang Web dễ dàng hơn.
Chúng ta có một số ngôn ngữ lập trình Web như là: ASP, ASP.Net, PHP,
JSP ..
Web Server là gì?
Web Server (máy phục vụ Web): máy tính mà trên đó cài đặt phần mềm
phục vụ Web, đôi khi người ta cũng gọi chính phần mềm đó là Web Server.
Tất cả các Web Server đều hiểu và chạy được các file *.htm và *.html, tuy
nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn
như IIS của Microsoft dành cho *.asp, *.aspx...; Apache dành cho *.php...;
Sun Java System Web Server của SUN dành cho *.jsp...
Collection by traibingo 7
- Database Server là gì?
Database server (máy phục vụ Cơ sở dữ liệu): Máy tính mà trên đó có cài
đặt phần mềm Hệ quản trị Cơ sở dữ liệu (HQTCSDL). Chúng ta có một số
HQTCSDL chẳng hạn như: SQL Server, MySQL, Oracle...
Cài đặt Web Server WAMP trên Windows
Một trong những khó khăn ban đầu của người mới làm quen với Joomla
hay người thiết kế Web nói chung đó là cài đặt Web Server. Đa phần cảm
thấy rất chật vật trong việc cài đặt Apache (Web Server) + MySQL
(Database Server) + PHP và cấu hình sao cho chúng làm việc tốt với nhau.
Tuy nhiên có một giải pháp khá đơn giản và tiện lợi, đó là sử dụng gói cài
đặt tích hợp gồm Apache + MySQL + PHP + PHPMyAdmin (một công cụ
quản trị CSDL). Mọi việc cần làm chỉ còn là download bản cài đặt và tiến
hành cài đặt từng bước theo chỉ dẫn.
Chúng ta có 2 sản phẩm rất nổi tiếng là XAMPP và WAMP. Tuy nhiên với
mục đích cài đặt trên localhost để chạy thử thì WAMP chính là lựa chọn
đầu tiên và dễ dàng.
WAMP là gì?
WAMP: Một gói phần mềm Web Server tất cả trong một (All-in-One) gồm:
Apache, MySQL, PHP chạy trên nền Windows.
Collection by traibingo 8
- Giao diện quản trị Webserver WAMP (Windows + Apache + MySQL +
PHP)
Các đặc điểm nổi trội của WAMP
Có thể cài đặt WAMP dễ dàng.
WAMP được cập nhật đều đặn.
Cho phép lựa chọn các phiên bản PHP, MySQL khác nhau.
Collection by traibingo 9
- Rất tốt cho việc tạo máy chủ Web để chạy thử, thiết kế Website bằng
PHP.
Hỗ trợ tốt cho Joomla 1.5, Joomla 1.0
Hỗ trợ phiên bản PHP5 mới nhất
Tương thích Windows XP / Windows Vista / Windows 7
Hoàn toàn miễn phí
Download bản cài đặt WAMP
Download WAMP tại địa chỉ
http://www.wampserver.com/en/download.php
Các bước cài đặt WAMP
Nếu trước đó bạn đã cài đặt WAMP 5.1.x thì tốt nhất là gỡ nó đi sau đó
mới cài WAMP Server 2.0
Collection by traibingo 10
- Nhấn [Next] và thực hiện các bước tiếp theo
Nếu trên máy của bạn có cài trình duyệt Firefox và
bạn muốn chọn Firefox làm trình duyệt mặc định khi mở http://localhost
thì nhấn [Yes]
Collection by traibingo 11
- Điền các thông số để có thể gửi/nhận mail thông qua một SMTP server.
Nếu không biết hãy để mặc định và nhấn [Next]
Nhấn nút [Finish] để hoàn tất quá trình cài đặt
Hoàn tất việc cài đặt và chạy thử
Sau khi cài đặt thành công, bạn sẽ thấy biểu tượng của WAMP ở góc màn
hình như dưới đây:
Collection by traibingo 12
- Để chạy thử, nhấn vào mục "localhost"
Hoặc mở trình duyệt và gõ địa chỉ http://localhost (hoặc http://127.0.0.1)
Để quản lý cơ sở dữ liệu (database) nhấn vào mục "phpMyAdmin"
Hoặc mở trình duyệt và gõ vào địa chỉ http://localhost/phpMyAdmin
Hoặc http://127.0.0.1/phpMyAdmin
Collection by traibingo 13
- Các chú ý khác:
Thư mục đặt website của bạn theo mặc định là "C:\wamp\www"
Để có thể truy cập từ máy tính khác nhấn vào mục "Put Online"
WAMP có thể cài đặt thành công trên IPhone
Collection by traibingo 14
- Part 3
Truy cập Joomla trong mạng LAN
Sử dụng file host của Windows
1. Tìm file hosts trong thư mục:
"C:\WINDOWS\system32\drivers\etc\"
2. Mở file hosts bằng một trình soạn thảo bất kỳ (chẳng hạn Notepad)
3. Bạn thêm dòng sau:
127.0.0.1 yourdomain #VD: yoursite.com, maychu.com
Nếu máy tính của bạn ở trong LAN, có địa chỉ IP: 192.168.0.2 và muốn các
máy khác trong LAN có thể truy cập máy chủ thông qua địa chỉ:
http://yoursite.com/ thì bạn thêm dòng sau và copy file host tới tất cả các
máy trong LAN:
192.168.0.2 yoursite.com
Bây giờ bạn có thể mở trình duyệt và gõ vào địa chỉ: http://yoursite.com,
khi đó kết quả trả về cũng giống hệt như khi bạn gõ vào địa chỉ
http://localhost
Chú ý: Nếu muốn tắt tính năng này bạn chỉ cần thêm dấu # vào đầu dòng
mà bạn đã khai báo trong file host.
# Copyright (c) 1993-1999 Microsoft Corp.
# ...
# 38.25.63.10 x.acme.com # x client host
127.0.0.1 localhost
127.0.0.1 yoursite.com
192.168.0.2 yoursite.com
Collection by traibingo 15
- Tham khảo thêm:
Không truy cập được Joomla từ máy con
Lỗi khi chạy web joomla ở 1 máy khác trong cùng mạng LAN
Dạng địa chỉ của Website
Thông thường bạn có thể sở hữu một trong 2 dạng địa chỉ Website:
1. Địa chỉ cơ bản. VD. yoursite.com, yoursite.vze.com ...
2. Địa chỉ con. VD. yoursite.com/web_cua_ban ...
Nếu Website của bạn ở dạng địa chỉ cơ bản
Khi thử nghiệm trên localhost bạn chỉ cần đặt toàn bộ hệ thống Website
trong "thư mục gốc chứa Web" mà phần mềm Web Server qui định.
Chẳng hạn đối với Apache, thư mục gốc chứa Web được khai báo thông
qua biến DocumentRoot trong file httpd.conf.
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/wamp/www"
Nếu Website của bạn ở dạng địa chỉ con
Bạn có 2 cách để tạo website với dạng địa chỉ này
1. Cách 1: Tạo một thư mục con của "thư mục gốc chứa Web" với tên
là web_cua_ban. (Chẳng hạn thư mục gốc chứa Web: D:/www/ thì
thư mục chứa Website của bạn: D:/www/web_cua_ban/)
2. Cách 2 (khuyến cáo): Bạn có thể đặt thư mục chứa Web của bạn ở
bất cứ chỗ nào, không nhất thiết phải là một thư mục con của "thư
mục gốc chứa Web". Để triển khai theo giải pháp này bạn chỉ cần tạo
bí danh cho thư mục chứa Web của bạn.
Ở đây chỉ xin giới thiệu cách xử lý với Apache và WAMP:
Collection by traibingo 16
- Bạn mở file httpd.conf và thêm vào đoạn mã sau:
Alias /web_cua_ban/ "duong_dan_thu_muc_chua_web" // Chẳng hạn
D:/webdesign/web_cua_ban/
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order allow,deny
Allow from all
Nếu bạn chạy gói phần mềm Web Server WAMP, bạn nhấn chuột vào biểu
tượng WAMP ở khay hệ thống (gần đồng hồ), sau đó:
Chọn mục Alias directories, chọn tiếp Add an alias.
Trong màn hình dòng lệnh hiện ra tiếp theo, gõ vào bí danh cho
Website của bạn, chẳng hạn web_cua_ban
Tiếp theo gõ vào vị trí lưu trữ của Website, chẳng hạn
D:/webdesign/web_cua_ban/
Cài đặt Web Server XAMPP trên Linux
Thông thường khi cài đặt Server với một hệ điều hành họ Linux (VD:
CentOS, Fedora, SuSE, Redhat Linux, Ubuntu...) chúng ta có thể chọn cài
đặt phần mềm Apache (dùng làm Web Server) và MySQL (dùng làm hệ
quản trị CSDL) trong gói phần mềm kèm theo. Tuy nhiên rất có thể bạn đã
quên hoặc không thích cài chúng hoặc cảm thấy khó khăn khi cấu hình để
chúng làm việc với nhau và chạy được PHP, bạn có thể chọn một giải
pháp khác: Cài đặt gói phần mềm XAMPP (gồm Apache + MySQL + PHP
+ PHPMyAdmin).
Các bước tiến hành như sau:
Collection by traibingo 17
- Bước 1: Download
Download link: http://www.apachefriends.org/
Bước 2: Cài đặt
- Mở Linux shell và đăng nhập bằng tài khoản root
su
- Giải nén file cài đặt vào thư mục /opt
tar xvfz xampp-linux-1.5.3a.tar.gz -C /opt
Bước 3: Khởi động XAMPP
/opt/lampp/lampp start
Bước 4: Kiểm tra
Mở trình duyệt và gõ: http://localhost
Các chú ý khác
[1]. Sau khi cài đặt XAMPP khi gõ http://localhost trình duyệt sẽ tự động
chuyển hướng tới http://localhost/xampp. Để thay đổi mặc định ban đầu
này: Vào thư mục xampp/htdocs thay đổi (hoặc đổi tên hoặc xóa) file
index.php cho phù hợp với mục đích của mình.
[2]. Để tạo site dạng http://localhost/Joomla cần thêm đoạn code sau vào
file xampp/apache/conf/httpd.conf
Alias /Joomla/ "/www/Joomla/"
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order allow,deny
Allow from all
Collection by traibingo 18
- Trong đó /www/Joomla/ là đường dẫn tới thư mục Joomla của bạn
[3]. Để tăng cường bảo mật mở Linux Shell và chay dòng lệnh sau:
/opt/lampp/lampp security
[4]. Để XAMPP tự chạy sau khi Reboot (giống như một service trong
Windows chạy ở chế độ Automatic). Xem hướng dẫn sau:
http://www.apachefriends.org/en/faq-xampp-linux.html#fsl
Các thông số cần chú ý khi Upload Joomla lên
Hosting
Mở file "configuration.php" và chỉnh sửa các thông số cho phù hợp với
HOST / HOSTING / SERVER mới của bạn.
Đối với Joomla! 1.5
Các thông số kết nối với Database
/* Database Settings */
var $dbtype = 'mysql'; // Thường là 'mysql'. Ngoài ra có thể là 'mysqli'
(tốt hơn 'mysql')
var $host = 'localhost'; // Thường là 'localhost'.
// Ngoài ra có thể là tên hoặc IP của MySQL server
// VD: 'mysql01.yoursite.com', '208.67.222.222'
var $user = 'xxx'; // Tên của tài khoản MySQL gắn với database
chứa website Joomla.
// VD: root, yoursite...
var $password = 'xxx'; // Mật khẩu của tài khoản MySQL nói trên.
var $db = 'xxx'; // Tên của database chứa website Joomla.
// VD: joomla, yoursite_joomla
Collection by traibingo 19
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
