( 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.
( 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
Chúc vui vẻ! ( tech@thegioiwebsite.net )
Tổng hợp ( Internet )
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>
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:

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

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”

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
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
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.
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 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.
Đượ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.
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 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)
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ó)…