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 Collection by traibingo 1 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 2 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 3 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: 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 4 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 5 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 6 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ở - 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ở - 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: Collection by traibingo 7 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 8 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 9 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 10  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ỉ 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 11 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ở thì nhấn [Yes] Collection by traibingo 12 Đ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 13  Để chạy thử, nhấn vào mục "localhost" Hoặc mở trình duyệt và gõ địa chỉ (hoặc  Để 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ỉ Hoặc Collection by traibingo 14 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 15 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ỉ: 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ỉ: khi đó kết quả trả về cũng giống hệt như khi bạn gõ vào địa chỉ 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 16 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 17 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 18 Bước 1: Download Download link: 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õ: Các chú ý khác [1]. Sau khi cài đặt XAMPP khi gõ trình duyệt sẽ tự động chuyển hướng tới Để 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 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 19 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: 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 20 var $dbprefix = 'jos_'; // Tiền tố của các bảng trong database. Mặc định là: 'jos_' Các thông số liên quan tới lưu trữ file /* Server Settings */ var $absolute_path = 'xxx'; // Đường dẫn tuyệt đối tới nơi chứa Joomla. // Các phiên bản Joomla 1.5 gần đây đã bỏ thông số này // VD: 'C:\\www\\joomla' (trên Windows) // VD: '/home/yoursite.com/public_html' (trên Linux) var $log_path = 'xxx'; // Đường dẫn lưu trữ các file log. // VD: 'C:\\www\\joomla\\logs' // Hoặc bạn có thể sử dụng một đường dẫn khác, miễn là Writeable var $tmp_path = 'xxx'; // Đường dẫn lưu trữ các file tạm. // VD: '/home/yoursite.com/public_html/tmp' // Hoặc bạn có thể sử dụng một đường dẫn khác, miễn là Writeable Thông số địa chỉ Website var $live_site = ''; // Địa chỉ Website. VD: // Các phiên bản Joomla 1.5 gần đây đã bỏ thông số này Đối với Joomla! 1.0 Các thông số kết nối với Database /* Database Settings */ $mosConfig_host = 'localhost'; // Thường là 'localhost'. // Ngoài ra có thể là tên hoặc IP của Database server $mosConfig_user = ''; // Tên của tài khoản MySQL gắn với database chứa website Joomla. // VD: root, yoursite... $mosConfig_password = ''; // Mật khẩu của tài khoản MySQL nói trên. Collection by traibingo 21 $mosConfig_db = ''; // Tên của database chứa website Joomla. // VD: joomla, yoursite_joomla $mosConfig_dbprefix = 'jos_'; // Tiền tố của các bảng trong database. Mặc định là: 'jos_' Các thông số liên quan tới lưu trữ file /* Server Settings */ $mosConfig_absolute_path = 'xx';// Đường dẫn tuyệt đối tới nơi chứa Joomla // VD: 'C:\\www\\joomla' // VD: '/home/yoursite.com/public_html' $mosConfig_cachepath = 'xxx'; // Đường dẫn tới nơi chứa các file cache. // Sẽ sử dụng khi bật tính năng cache // VD: 'C:\\www\\joomla\\cache' // VD: '/home/yoursite.com/public_html/cache' Thông số địa chỉ Website $mosConfig_live_site = ''; // Địa chỉ Website. // VD: ' ' Collection by traibingo 22 Part 4 Upload Joomla 1.5 lên Server/Hosting Rất nhiều bạn sau khi đã cài đặt Joomla thành công trên localhost và nay muốn upload lên Server để chạy chính thức trên Internet nhưng đã phải loay hoay rất lâu. Thực ra công việc rất đơn giản và chỉ mất vài phút, quan trọng là bạn nắm được nguyên tắc và cẩn thận một chút. Bài viết sau hi vọng sẽ giúp bạn cảm thấy làm việc với Joomla thật là dễ chịu. Thao tác "upload Webstite Joomla" (hay website bất kỳ) lên Server/Hosting chỉ gồm 3 bước:  Upload thư mục chứa Website lên Server  Nhập (import) dữ liệu từ localhost lên Server  Chỉnh sửa các thông số Bước 1: Upload thư mục chứa Website lên Server. Bạn chỉ cần sử dụng một công cụ FTP (File Transfer Protocol) nào đó chẳng hạn: FileZilla, SmartFTP, Net2FTP... hoặc công cụ quản lý file do Server/Hosting của bạn cung cấp để copy thư mục Website của bạn lên Server/Hosting mà thôi. Bước 2: Nhập (import) dữ liệu từ localhost lên Server. Bước 2.1: Xuất (expor