Archive for the ‘Thiết kế web với Joomla’ category

Tài liệu hướng dẫn chi tiết cách thiết kế một template cho joomla.

April 20th, 2008

Đây là cuốn sách bằng tiếng Việt viết khá chi tiết về các bước cần thực hiện để tạo ra một templates cho Joomla. Bạn click vào đường link download dưới đây để download ebook này.
RAR:    Download tại đây

PDF : Download tại đây

 

 

Chúc vui vẻ! ( tech@thegioiwebsite.net  )

Tổng hợp ( Internet )

 

Thiết kế Template cho Joomla 1.5 (phần 6 - nhúng mã Joomla)

April 19th, 2008

Joomla! xây dựng một loại thẻ riêng cho việc thiết kế Template, đó là thẻ <jdoc>. Thẻ <jdoc> được dùng để nạp các phần tử riêng biệt của Joomla, chẳng hạn như: Nạp phần Head, nạp các Module, nạp các Component.

Thẻ này được khai báo như sau:

<jdoc:include type=”[head|module|component]” />

Bây giờ hãy mở file “index.php” của template và nhúng vào các đoạn mã của Joomla!
Bước 6.1: Nhúng đoạn mã nạp phần HEAD:

<head>
<jdoc:include type=”head”>
</head>
Bước 6.2: Nhúng các đoạn mã để nạp MODULE và COMPONENT:

Thay |-TOP-|, |-USER3-|, |-USER4-|…

templates-joomla

bằng các đoạn mã giống như hình dưới:

Template-Joomla

Hoặc copy đoạn mã đầy đủ sau

<html>
<head>
<jdoc:include type=”head”>
</head>
<body>
<div id=”top”><jdoc:include type=”modules” name=”top” /></div>
<hr />
<div id=”user3-user4″>
<div id=”user3″ style=”float:left; width:350px;”><jdoc:include type=”modules” name=”user3″ /></div>
<div id=”user4″><jdoc:include type=”modules” name=”user4″ /></div>
</div>
<hr />
<div id=”main”>
<div id=”left” style=”float:left; width:150px;”><jdoc:include type=”modules” name=”left” /></div>
<div id=”component” style=”float:left; width:250px;”><jdoc:include type=”component” /></div>
<div id=”right”><jdoc:include type=”modules” name=”right” /></div>
</div>
<div style=”clear:both;”></div>
<hr />
<div id=”footer”><jdoc:include type=”modules” name=”footer” /></div>
</body>
</html>

Bước 6.3: Kiểm tra kết quả

Mở Website của bạn và kiểm tra kết quả:

Thiết kế Template cho Joomla 1.5 (phần 5 - tạo layout)

April 19th, 2008

Phần 5: Tạo Layout
Bước 5.1: Phác thảo trên giấy về bố cục (layout) của template.
Giả sử chúng ta có giao diện với layout như sau:

Joomla-Template-Layout

Bước 5.2: Viết mã HTML để tạo layout nói trên.

Trước đây người ta hay sử dụng kỹ thuật dàn trang bằng bảng (dùng thẻ <table>). Việc dàn trang bằng bảng có ưu điểm là dễ làm nhưng lại có nhược điểm là tốc độ nạp trang chậm và không tối ưu cho các máy tìm kiếm. Do vậy ngày nay chúng ta sử dụng kỹ thuật dàn trang bằng thẻ <div>.

Mở file “index.php” của template “vinaora_template” và gõ vào nội dung sau:

Joomla-Template-Layout

Hoặc copy đoạn mã sau:

<html>
<head>
<title>WELCOME TO VINAORA.COM</title>
</head>
<body>
<div id=”top”>|-TOP-|</div>
<hr />
<div id=”user3-user4″>
<div id=”user3″ style=”float:left; width:350px;”>|-USER3-|</div>
<div id=”user4″>|-USER4-|</div>
</div>
<hr />
<div id=”main”>
<div id=”left” style=”float:left; width:150px;”>|-LEFT-|</div>
<div id=”component” style=”float:left; width:400px;”>|-COMPONENT-|</div>
<div id=”right”>|-RIGHT-|</div>
</div>
<hr />
<div id=”footer”>|-FOOTER-|</div>
</body>
</html>

Bước 5.3: Kiểm tra lại layout
Mở trang web và xem template vừa được tạo.

Thiết kế Template cho Joomla 1.5 (phần 4 - kích hoạt Template)

April 19th, 2008

Phần 4: Kích hoạt Template mới tạo

Để kích hoạt Template vừa tạo mới, bạn thực hiện các bước sau:

Bước 4.1: Đăng nhập vào trang quản trị (VD: http://vinaora.com/administrator)

Bước 4.2: Mở menu “Extensions” >>> “Template Manager

Bước 4.3: Chọn template “vinaora_template” mà bạn mới tạo

Joomla-Template

Bước 4.4: Nhấn nút [Default] trên thanh công cụ để kích hoạt “vinaora_template” làm template mặc định.

Bước 4.5: Mở trang chủ và kiểm tra xem template mới đã được nạp chưa.

Thiết kế Template cho Joomla 1.5 (phần 3 - các file của Template)

April 19th, 2008

Bước 3.1:

Mở thư mục [Joomla]/templates và tạo một thư mục có tên là “vinaora_template

Joomla-Template

Bước 3.2:

Mở thư mục “vinaora_template” vừa tạo ở trên và tạo 2 file có tên là: “index.php” và “templateDetails.xml

Joomla-Template

Bước 3.3:

Mở file “templateDetails.xml” và gõ vào nội dung sau:

Joomla-Template

Hoặc copy đoạn mã sau:

 


vinaora_template
1.0.0
12/12/07
VINAORA
admin@vinaora.comThis e-mail address is being protected from spambots, you need JavaScript enabled to view it
http://vinaora.com

GNU/GPL TPL_VINAORA_TEMPLATE

index.php
templateDetails.xml

breadcrumbs left right top user1 user2 user3 user4 footer debug syndicate

Bước 3.4:

Mở file “index.php” và gõ vào nội dung sau:

Joomla-Template

Thiết kế Template cho Joomla 1.5 (phần 2 - vị trí các module)

April 19th, 2008

Phần 2: Tìm hiểu về vị trí của các module khi viết mã
Chúng ta

cần xem xét những đoạn mã nào đã tạo ra các vị trí dành cho module và component. Bạn hãy quan sát hình sau:

Joomla-Template-Postion

Chú ý: Tất cả các module bên trái đều sử dụng duy nhật một đoạn mã có dạng như sau:
<jdoc: include type=”modules” name=”left” style=”….” />

Chú ý: Tất cả các module bên phải đều sử dụng duy nhật một đoạn mã sau:
<jdoc: include type=”modules” name=”right” style=”….” />

 

Theo http://vinaora.com

Thiết kế Template cho Joomla 1.5 (phần 1 - giới thiệu)

April 19th, 2008

Phần 1: Căn bản về vị trí các module và component

Trước khi tìm hiểu về template Joomla chúng ta cần phải phân biệt rõ sự khác nhau giữa 2 khái niệm modulecomponent và vị trí xuất hiện của chúng trong template. Trong hình vẽ sau, bạn hãy chú ý các khối được đánh dấu màu da cam. Chúng mô tả các vị trí của module và component mà template này cung cấp.

Joomla-Module-Component

Chú ý: Trên một trang bất kỳ các module có thể có nhiều (cả về số lượng và vị trí) hoặc không có module nào nhưng luôn có duy nhất một component (trừ 1 vài trường hợp đặc biệt)

Làm thế nào để biết template đang sử dụng cho phép những vị trí nào? Thật đơn giản, bạn chỉ cần đăng nhập vào trang quản trị (VD: http://vinaora.com/administrator). Sau đó, mở menu Extension >>> Modules Manager bạn sẽ trông thấy các vị trí có thể dùng được trong danh sách có dòng chữ “Select Position” như hình dưới đây

Joomla-Template-Position

Chúng ta hãy quay trở lại trang chủ Joomla và bạn sẽ nhận thấy rằng, các module, component đã được bố trí như sau:

Joomla-Component-Module-Postion

 

 

Theo http://vinaora.com

Cấu trúc Template trong Joomla!

April 19th, 2008

Tất cả gói giao diện (template/theme) của Joomla! đều được đóng gói trong một file nén (.zip) cho phép bạn upload và cài đặt trực tiếp thông qua trang quản trị. Template là một thế mạnh của Joomla!. Hiện có hàng nghìn template miễn phí cũng như có phí cho bạn lựa chọn. Việc thiết kế chúng cũng khá đơn giản và bạn hoàn toàn có thể chuyển đổi từ một template thuần HTML sang template Joomla. Ngoài ra bạn có thể thay đổi template nhanh chóng và dễ dàng thông qua trang quản trị. Không những thế Joomla còn cho phép một template được áp dụng cho toàn site hoặc một số trang nhất định.

Cấu trúc của gói cài đặt template Joomla!

Một gói cài đặt template Joomla gồm các file bắt buộc sau:

index.php
templateDetails.xml
template_css.css hoặc template.css
template_thumbnail.png

File “index.php”

File này gồm các mã lệnh PHP, thẻ <head>, thẻ <body> và các bảng <table> hoặc các thẻ <div>để định vị các module và tạo nên bố cục của template.

File “templateDetails.xml”

Được sử dụng trong quá trình cài đặt. File này chứa các thông số về template và giúp Joomla! biết được trong quá trình cài đặt cần tạo các thư mục và truyền các file css, php, ảnh nào lên thư mục templates.

File “template_css.css” hoặc “template.css”

Joomla 1.0.x sử dụng file template_css.css còn Joomla 1.5 sử dụng file template.css. Đây chính là CSS chính của Joomla. File này kết hợp với index.php để tạo nên template.

File “template_thumbnail.png”

File này chính là ảnh chụp minh họa của template. Nó giúp bạn dễ hình dung khi lựa chọn template hoặc trong phần quản trị hoặc ở mặt tiền của Website (nếu bạn cho phép mọi người có thể tùy chọn template)

Các thư mục và file khác.

Ngoài các file chính nói trên trong gói cài đặt template có thể có thêm thư mục CSS để chứa các file CSS bổ sung, thư mục ảnh để chứa các ảnh được sử dụng cho template, thư mục javascript để chứa các javascript (nếu có)…

Khái niệm và thuật ngữ trong Joomla

April 19th, 2008

1.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 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

2.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 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.

3.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, CategoryContent. 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:

Cấu trúc Joomla





Section 1
--------|Category 1a
--------|Category 1c
--------|Category 1b
Section 2
--------|Category 2a
--------|Category 2b
--------------------|Content 2b1
--------------------|Content 2b2

Section là gì?

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

Joomla! là gì? Joomla! dùng để làm gì?

April 19th, 2008

thiet ke web voi 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