Khi mà nhiều nhà phát triển chấp nhận phát triển kiểu AJAX để tạo ra các ứng dụng tương tác mạnh hơn, họ sẽ tìm các công cụ giúp đơn giản hóa cho công việc của mình.

jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng Lang.Net của Microsoft hồi đầu tháng 8, tổ chức ở Redmond, Washington.
John Resig, người tạo ra jQuery, nói rằng công nghệ này có bản 1.0 vào 26/8. jQuery là kiểu thư viện JavaScript mới cần thiết cho phép các nhà phát triển làm việc “khiêm tốn” với JavaScript.
Resig, làm tại Cambridge, Mass., nói jQuery không phải là một framework cỡ lớn tốt nhất trong AJAX – mà cũng không phải là các cải tiến phức tạp vô ích – jQuery được thiết kế để thay đổi cách bạn viết JavaScript.”
Resig, tốt nghiệp Rochester Institute of Technology, đang viết một cuốn sách có tên “Pro JavaScript Techniques” cho Apress Publishing.
Việc viết JavaScript khá thú vị, Resig nói, và jQuery đem lại sự thú vị cho quá trình này bằng cách tạo sự phổ biến, công việc lặp lại, loại bỏ những đánh dấu không cần thiết, và tạo cho nó ngắn gọn, dễ hiểu, theo Web site của dự án này.
Trong một buổi phỏng vấn với eWEEk, Resig nói ông thấy các nhà phát triển Web muốn viết mã unobtrusive, nhưng về cơ bản nó đơn giản và hiệu quả.
“Một trong những mục tiêu mà tôi đặt ra cho mình đó là viết mã JavaScript dễ hiểu nhất trong số chương ít nhất có thể,” ông cho hay.
Khi phát hành ban đầu công nghệ này vào 1/2006, rất nhiều sự phát triển của công nghệ jQuery này là theo sự phản hồi từ cộng đồng quốc tế, Resig nói.
“Sự phản hồi của hàng trăm nhà phát triển Web chuyên nghiệp là tài sản vô giá để xây dựng thư viện JavaScript hiệu quả,” ông nói, cho ra phiên bản 1.0 mất khoảng 7 tháng và gồm cả công việc của một số nhà phát triển khác nữa.
Resig nói ông muốn phát triển một cái gì đó sẽ hiệu quả hơn cho công việc của mình. Công nghệ mà ông suy nghĩ nhiều nhất đó là Behaviour, một công cụ JavaScript được viết bởi Ben Nolan, giám đốc kỹ thuật của Projectx Technology, tại Wellington, New Zealand.
Nhưng Behaviour không đủ cho Resig. Trong một bài viết trên blog hôm 22/8/2005, Resig viết, “Xem Behaviour làm việc như thế nào, tôi chưa bao giờ hoàn toàn thấy hài lòng – nó chỉ xem ra quá mệt mỏi và dài dòng cho việc sử dụng hàng ngày. Tôi bắt đầu chắp vá với kiểu layout code khác – cố gắng tìm ra giải pháp tối ưu.”
Thực tế, “jQuery gây ra hàng loạt những khó khăn cá nhân cho tôi,” Resig trả lời eWEEK. “Tôi muốn việt một bộ máy phân tích chọn CSS dành cho JavaScript và viết một phiên bản nhỏ hơn của thư viện động moo.fx phổ biến.”
Sau khi ông bắt đầu đưa mã mới của mình cho các nhà phát triển Web, họ khuyến khích ông xây dựng nó, Resig nói.
Hơn thế nữa, Resig nói ông tin jQuery là quan trọng trong thế giới JavaScript bởi ông nhận thấy nó là “một trong số những thư viện JavaScript hiếm có cố gắng tôn trọng hết mức người dùng của mình; bằng việc duy trì hoạt động trọn vẹn tài liệu và đáp ứng trực tiếp tới phản hồi của người dùng.”
Bên cạnh đó, hoạt động của jQuery theo một cặp ý tưởng nhằm giúp nó độc đáo hơn, Resig nói.”Nó nhắm tới mã ngắn, đơn giản và kích thước tập tin nhỏ.
Thực tế, công nghệ này được dùng bởi các nhà phát triển các trang Web thương mại như Technorati và FeedBurner, cũng như các dự án mã mở như Drupal, Trac và CakePHP, Resig nói.
Cody LindLey, một nhà phát triển Web chuyên nghiệp tại Boise, Idaho, nói ông có sử dụng và là một fan hâm mộ jQuery. LindLey nói ông cũng quen thuộc với Behaviour, và trong khi Behaviour “thực hiện một công việc lớn” do lấp một khoảng trống giữa các thư viện gói ban đầu, nhưng nó không phải là một giải pháp hoàn hảo”
“Tôi thích một giải pháp hoàn chỉnh hơn là sử dụng mã Behaviour, cùng với một thư viện JavaScript,” LindLey viết trên blog.
LindLey nói rằng không có một thư viện đầy đủ tính năng trong một thời gian dài. “Đúng vậy, theo tôi, thì tới tận bây giờ cũng thế,” ông nói. “Có vẻ như jQuery đến với thư viện JavaScript để lấp khoảng trống. Thư viện tự xưng là “Fun – thú vị” này có thể đáp ứng về tiền, và jQuery thực sự cung cấp một giải pháp tổng thể với thư viện.”
Aptana, một công ty có trụ sở tại San Francisco, sẽ phát hành jQuery với bản mới nhất của phần mềm Web 2.0 IDE(môi trường phát triển tích hợp) của mình. Aptana IDE, vẫn là bản beta thử nghiệm, hiện có khả năng nhập thư viện JavaScript của jQuery vào dự án Web. Dự án tạo cho chính nó với một trang mẫu tạo bởi Cody LindLey, chỉ cách dùng jQuery, Paul Colton nhà sáng lập Aptana cho hay.
Trong việc lựa chọn khởi tạo tập thư viện AJAX đi cùng với Aptana IDE, “Chúng tôi muốn các thư viện hiển thị phương thức tương tự mà chúng tôi đang cố gắng kiến trúc với Aptana – nhanh, miễn phí, nhẹ và dễ dùng,” Colton cho hay.
Ông cũng ấn tượng với tập các tính năng phong phú của jQuery, “đặc biệt dễ dùng, và kích thước rất nhỏ. Nó là một thư viện hoàn hảo cho người dùng, đặc biệt cho người dùng mới công nghệ Web 2.0.”
30/8/2006, eweek

__________________
www.thegioiwebsite.net

2008

[edit]
February

February 8th, 2008 jQuery 1.2.3: AIR, Namespacing, and UI Alpha
[edit]
January

January 15th, 2008 Bug fix for jQuery 1.2, library is now 2 years old: jQuery 1.2.2: 2nd Birthday Present
[edit]
2007

[edit]
September

September 17th, 2007 New user interface library for jQuery: jQuery UI: Interactions and Widgets
September 16th, 2007 Bug fix for jQuery 1.2: jQuery 1.2.1: Quick Fixes for 1.2
September 10th, 2007 jQuery 1.2 released: jQuery 1.2: jQuery.extend("Awesome")
[edit]
August

August 24th, 2007 jQuery 1.1.4: Faster, More Tests, Ready for 1.2
[edit]
July

July 5th, 2007 Bug fix for jQuery 1.1.3: jQuery 1.1.3.1
July 1st, 2007 New version of jQuery released: jQuery 1.1.3: 800%+ Faster, still 20KB
July 1st, 2007 Announcement of new UI module under development: jQuery UI
[edit]
June

June 18th, 2007 New Plugin Repository
[edit]
May

May 20th, 2007 Third bug fix test release for 1.1: jQuery 1.1.3a
[edit]
April

April 2nd, 2007 Mailing list moved to Google Groups, code now hosted by Amazon S3: Google Groups and Amazon S3
[edit]
March

March 11th, 2007 11 people attend the first jQuery meetup at SXSWi
[edit]
February

February 27th, 2007 Second bug fix release for 1.1: jQuery 1.1.2
[edit]
January

January 22nd, 2007 First bug fix release for new version: jQuery 1.1.1
January 14th, 2007 jQuery Birthday: 1.1, New Site, New Docs
January 11th, 2007 Beta release of jQuery 1.1: jQuery 1.1b
January 8th, 2007 Alpha release of new version: jQuery 1.1a
[edit]
2006

[edit]
December

December 27th, 2006 Planning for jQuery 1.1: The Path to 1.1
December 12th, 2006 Last bug fix release for 1.0: jQuery 1.0.4
[edit]
November

November 7th, 2006 Winners of the jQuery button contest announced: jQuery Button Contest Winners
October 27th, 2006 Third bug fix release for 1.0: jQuery 1.0.3
[edit]
October

October 9th, 2006 Second bug fix release for 1.0: jQuery 1.0.2, with minor API changes (posted on 13 October)
[edit]
September

September 22nd, 2006 Visual jQuery Magazine Released: Visual jQuery Magazine Released
September 7th, 2006 First sponsored developer joins the project: Sponsored jQuery Development
September 2nd, 2006 XML version of the API released: Taking jQuery Documentation to the next level
[edit]
August

August 31st, 2006 First bug fix release for 1.0: jQuery 1.0.1
August 26th, 2006 First stable version of jQuery: jQuery 1.0
[edit]
July

July 10th, 2006 Blogger recruitment begins: Bloggers Wanted. To allow members of the community to contribute to the jQuery Blog.
[edit]
June

June 30th, 2006 jQuery 1.0 - Alpha Release
June 23rd, 2006 Planning for jQuery 1.0: The Road to 1.0
[edit]
May

May 29th, 2006 jQuery available via SVN: SVN Access to jQuery
May 27th, 2006 jQuery moved under the MIT license: jQuery under the MIT license
[edit]
April

April 24th, 2006 Thickbox released: Thickbox
[edit]
March

March 21st, 2006 Bug fixes and new features: Accordion, values, oncomplete, and bug fixes!
[edit]
February

February 26th, 2006 Ajax added to jQuery: Ajax, new fx, and more!
February 23rd, 2006 Bug fix release: Bugs Squished, Ajax on the way
[edit]
January

January 27th, 2006 jQuery Mailing List set up: jQuery Mailing List
January 25th, 2006 First jQuery Plugin Built: First jQuery Plugin
January 24th, 2006 jQuery Blog set up: jQuery Blog
... The announcement of jQuery makes it to the front page of del.icio.us and Digg ...
January 14th, 2006 jQuery Announced at BarCampNYC: BarCampNYC Wrap-up
[edit]
2005

August 22nd, 2005 John first hints of a JavaScript library to use CSS selectors with a more succinct syntax than existing libraries: Selectors in JavaScript __________________
www.thegioiwebsite.net

Để làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội dung như sau:

<html>

<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript"> // <font color="#ff0000">(*)</font> </script>
</head> <body>

<a href="http://jquery.com/">jQuery</a>

</body>

</html>

Bạn cần điều chỉnh lại src (nguồn) của file jquery.js. Thí dụ, nếu như file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ giống như sau:

<script type="text/javascript" src="jquery.js"></script>

Bạn có thể tải về file jquery.js ở [1]

1.1. Chạy code khi tài liệu sẵn sàng
Theo cách viết javascript thông thường, coder đặt code muốn brower xử lý tương tự như sau:

window.onload = function(){ // Your code here}

Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:

$(document).ready(function(){ // <font color="#ff0000">(**)</font>});

Chú ý: Từ nay, tôi gọi vùng (**) ở đoạn code trên là vùng js chính.

Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này. Bây giờ, bạn hãy đặt đoạn code trên vào phần (*) trong file html hiện thời của bạn.

Thêm thuộc tính onclick

Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời để hiển thị một liên kết

<a href="http://pcworld.com.vn">Hello world</a>
Đoạn code js sau vào phần (**) để thêm thuộc tính onclick cho các thẻ "a"

$("a").click(function(){ alert("Hello! How are you ?");});

Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo "Cảm ơn đã ghé thăm!". Bạn có thể thêm thuộc tính onclick này cho bất kỳ thẻ nào trong trang web của mình.

Thủ thuật
Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ không chuyển sang trang web toila.net

$("a").click(function(){ alert("Thank for your visit!"); return false;});

1.2. Thêm class
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class vào một (nhiều) đối tượng DOM.

Thêm đoạn code sau vào phần header của trang web (định dạng cách trình bày cho class 'test' của các thẻ HTML có tên 'a')

<style type="text/css">a.test { font-weight: bold; }</style>

Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ 'a' sẽ được trình bày bằng định nghĩa ở đoạn code trên

$("a").addClass("test");

Bạn cũng có thể xóa class ra khỏi một DOM

1.3. Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem

$("a").click(function(){ $(this).hide("slow"); return false;});

2. Cách gọi dây chuyền

Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình hướng đối tượng với jQuery:

$("p").addClass("test").show().html("foo");

Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời. Khi tương đối thành thạo jQuery, bạn có thể sẽ thấy quen thuộc đoạn code sau:

$("a").filter(".clickme").click(function() { alert("click!");}).end().filter(".hideme").click(function() { $(this).hide();});

Bạn có thể dùng trang tham khảo [2] API để biết các API mà jQuery hỗ trợ.
3. Callbacks, Functions và đối tượng 'this'

Callback là một hàm được thực thi sau khi một hàm cha của nó được thực thi xong. Cách khai báo callback trong jQuery có phần khác với cách truyền thống.

3.1 Khai báo callback không có tham số

$.get('myhtmlpage.html', myCallBack);

Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ không phải là một chuỗi (không đặt giữa cặp nháy đơn)

3.2 Khai báo callback với tham số
Cách khai báo sai

$.get('myhtmlpage.html', myCallBack(param1, param2));

Cách khai báo đúng

$.get('myhtmlpage.html', function(){ myCallBack(param1, param2);})

;

[1] http://docs.jquery.com/Downloading_jQuery
[2] http://docs.jquery.com/JQuery_API

( Thegioiwebsite.net ) - Dưới đây là tài liệu hướng dẫn cách viết code theo đúng chuẩn.Nếu bạn muốn trở thành coder chuyên nghiệp xin hãy đọc tài liệu này. Download tại đây.

(Xin mạn phép dịch nôm na dễ hiểu như sau)

( Thegioiwebsite.net ) - Thông thường khi lập trình PHP bạn hay viết lẫn cả phần HTML với mã lệnh PHP trên một trang.Điều này sẽ dẫn đến rất rối nhất là khi bảo trì.Bạn là người viết ra và cũng là người bảo trì thì không sao nhưng nếu bạn viết ra sau đó người khác bảo trì.Chắc họ nhìn vào code của bạn họ sẽ ngất mất vì quá rối.Mặt khác khi làm nhiều trang web có chức năng như nhau.Chỉ khác giao diện nên nếu lập trình theo kiểu như vậy bạn phải viết lại hoàn toàn.Ngoài ra muốn code được bạn phải chờ người thiết kế giao diện cho bạn sau đó cắt ra file HTML... rồi mới code...Tất cả những điều này sẽ làm giảm năng xuất công việc của bạn đi rất nhiều. Smarty ra đời đã giải quyết được các vấn đề nêu trên.Dưới đây là một số ưu điểm của Smarty:

1.Tốc độ load trang rất nhanh ( do tạo được cache)

2.Code ứng dụng của bạn trở lên trong sáng,mạch lạc và dễ bảo trì hơn rất nhiều (do tách biệt phần code và templates)

3.Hiệu quả công việc đạt tối đa ( Người thiết kế và người lập trình làm việc hoàn toàn độc lập.Thay đổi giao diện website nhanh chóng... )

4.Được sử dụng phổ biến ( bên Nhật rất ưa chuộng Smarty )

(Thống kê về việc nên dùng templates engine nào)

Nói chung nếu bạn làm về PHP thì Smarty hoặc Xtemplates(  Cái này mình sẽ nói sau ) thì bạn không thể không học.Dưới đây là tài liệu về Smarty bạn download về đọc sẽ hiểu ngay cách làm ( thường chỉ mất 1 tuần đọc là bạn có thể làm tốt Smarty.). Bấm vào đây để download

Chúc các bạn thành công

ducmanh@thegioiwebsite.net

Đâ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

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

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

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ả:

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:

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:

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.

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

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.

Bước 3.1:

Mở thư mục [Joomla]/templates và tạo một thư mục có tên là "vinaora_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"

Bước 3.3:

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

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:

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:

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

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 module và component 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.

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

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:

Theo http://vinaora.com

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ó)...

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, 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ì?

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à 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