Giáo trình Thiết kế Web với Joomla 1.0x & 1.5x

Nội dung text: Giáo trình Thiết kế Web với Joomla 1.0x & 1.5x

1. Thiết Kế Web Với Joomla 1.0x & 1.5x HTML Width: Kích thước chiều ngang, đơn vị là "pixels", của cửa sổ HTML. Preview: Hiển thị nút "Preview" (xem thử). Element Path: Nếu chọn "On", sẽ hiển thị nút "Set Classes" cho đoạn văn bản đang được chọn. Insert Date: Hiển thị nút "Insert Date" (thời gian). Date Format: Định dạng cho thời gian. Insert Time: Hiển thị nút "Insert Time" (thời giờ). Time Format: Định dạng cho thời giờ. Collection by traibingo at buaxua.vn
2. Thiết Kế Web Với Joomla 1.0x & 1.5x Sử dụng Plugin trong Joomla! 1.5 Editor - XStandard Lite 2.0 Plugin này là trình soạn thảo XStandard Lite 2.0. Nếu kích hoạt Plugin này, trình soạn thảo của nó phải được tải về và cài đặt tại trang web Plugin này có các thông số: Editor Mode: Lựa chọn 3 chế độ sử dụng: WYSIWYG (trực quang), Source (mã nguồn), or Screen Reader (màn hình thường). Word Wrap: Bật/tắt chức năng "Word Wrap" (các dòng chữ quá dài sẽ được hiển thị xuống dòng kế tiếp mà không cần phải cuộn màn hình). Editor Button - Image Plugin này hiển thị nút chèn (Insert) hình ảnh nằm phía dưới khung soạn thảo để giúp chèn các hình ảnh vào bài viết. Plugin này không có thông số. Editor Button - Readmore Collection by traibingo at buaxua.vn
3. Thiết Kế Web Với Joomla 1.0x & 1.5x Plugin này hiển thị nút chèn (Insert) dấu ngắt trang nằm phía dưới khung soạn thảo để giúp chia bài viết thành nhiều trang. Plugin này không có thông số. Search - Content Plugin này cho phép tìm kiếm các bài viết (Articles). Nó có các thông số: Search Limit: Số lượng hiển thị kết quả khi tìm kiếm được. Articles: Tìm kiếm bài viết. Uncategorized Articles: Tìm các bài viết nằm trong Uncategorized (không nằm trong Section hoặc Category nào) Archived Articles: Tìm các bài viết được lưu trữ (Archived). Search - Weblinks Plugin này cho phép tìm kiếm các trang web liên kết (Weblinks). Nó có các thông số: Search Limit: Số lượng hiển thị kết quả khi tìm kiếm được. Search - Contacts Plugin này cho phép tìm kiếm các liên hệ (Contacts). Nó có các thông số: Search Limit: Số lượng hiển thị kết quả khi tìm kiếm được. Collection by traibingo at buaxua.vn
4. Thiết Kế Web Với Joomla 1.0x & 1.5x Search - Categories Plugin này cho phép tìm kiếm thông tin của các Category. Nó có các thông số: Search Limit: Số lượng hiển thị kết quả khi tìm kiếm được. Search - Sections Plugin này cho phép tìm kiếm thông tin của các Section. Nó có các thông số: Search Limit: Số lượng hiển thị kết quả khi tìm kiếm được. Search - Newsfeeds Plugin này cho phép tìm kiếm các tin tức từ nguồn cấp dữ liệu (News Feeds). Nó có các thông số: Search Limit: Số lượng hiển thị kết quả khi tìm kiếm được. System - SEF Plugin này cho phép tạo các liên kết thân thiện (Search Engine Friendly), chức năng này được thiết lập trong phần "Cấu hình chung" (Global Configuration) System - Debug Plugin này cng cấp các thông tin giúp gỡ lỗi, các thông in này được hiển thị bên dưới màn hình chính của trang web và phần quản trị (front- & backend). Plugin này có các thông số: Collection by traibingo at buaxua.vn
5. Thiết Kế Web Với Joomla 1.0x & 1.5x Display Profiling Information: Hiển thị thời gian lập thông tin. Display SQL query log: Hiển thị thông báo truy vấn SQL. Display memory usage: Hiển thị thông tin bộ nhớ được sử dụng. Display undefined language strings: Hiển thị các chuỗi ngôn ngữ không xác định. Display loaded language files: Hiển thị các tập tin ngôn ngữ đã được nạp để tạo ra trang web. Có 2 chế độ là Chuẩn đoán (diagnostic) và thiết kế (designer). Strip Key Prefix: Cho phép trích một tiền tố từ chuỗi đến từ khóa khi các chuỗi ngôn ngữ không xác định hiển thị trong chế độ Designer. System - Legacy Plugin này cho phép sử dụng các thành phần mở rộng cũ trong chế độ "1.5 Legacy". Plugin này phải được kích hoạt trước khi cài đặt và sử dụng các thành phần mở rộng có yêu cầu chế độ này. Plugin này có các thông số: Use Legacy URL Routing: Cho phép sử dụng bộ định tuyến URL cũ cho các thành phần mở rộng cũ. Mặc định là "No". System - Cache Plugin này tạo bộ nhớ đệm cho trang web, nó cho phép máy chủ web lưu các trang web và khi cần thì hiển thị ra mà không cần phải truy xuất thêm Collection by traibingo at buaxua.vn
6. Thiết Kế Web Với Joomla 1.0x & 1.5x các cơ sở dữ liệu khác. Việc này nhằm giúp truy cập trang web được nhanh và giảm tải cho máy chủ. Đây là một Plugin được ẩn trong Joomla, không có bất cứ một thiết lập hay tùy chỉnh nào cho phép kích hoạt nó kể cả khi bật chế độ Cache trong phần thiết lập Cấu hình chung (Global Configuration), nếu muốn thì người dùng phải tự kích hoạt nó. Plugin này có các thông số: Use Browser Caching: Cho phép tạo bộ nhớ đệm lưu trên trình duyệt cục bộ. Mặc định là "No". Cache Lifetime: Thời gian lưu các trang web, tính bằng phút. Mặc định là 15 phút. Lưu ý: Plugin này khi được kích hoạt sẽ biến trang web động thành trang web tĩnh, nghĩa là nó sẽ giữ nguyên nội dung của một trang web trong khoảng thời gian từ lúc được khởi tạo lần đầu cho đến hết thời gian lưu trữ thì sẽ tái tạo lại. Mọi thay đổi trong khoảng thời gian này sẽ không thể thấy được kết quả ngay lập tức mà phải đợi tới lần khởi tạo tiếp theo. System - Log Plugin này kích hoạt báo cáo hệ thống, đây là một tập tin chứa các thông tin về các hoạt động của trang web. Nó có thể được dùng để theo dõi quá trình hoạt động cũng như trục trặc của trang web. Plugin này không có thông số. System - Remember Me Plugin này cung cấp chức năng "Remember Me", nó cho phép trang web nhớ tên và mật khẩu đăng nhập của người dùng để giúp họ có thể tự động đăng nhập khi quay lại trang web. Plugin này không có thông số. System - Backlink Collection by traibingo at buaxua.vn
7. Thiết Kế Web Với Joomla 1.0x & 1.5x Plugin này hỗ trợ các liên kết có trong phiên bản Joomla! 1.0.x, nó giúp chuyển đổi các liên kết kiểu cũ sang kiểu mới của Joomla! 1.5. Plugin này có các thông số: Search Query Strings: Nếu chọn "Yes", hệ thống sẽ tìm các truy vấn của phiên bản 1.0 vẫn còn phù hợp và chuyển sang URL mới. Mặc định là "Yes". Search SEF: Nếu chọn "Yes", hệ thống sẽ sử dụng định dạng SEF của Joomla! 1.0 và chuyển sang liên kết mới. Mặc định là "Yes". Attempt Legacy SEF: Nếu chọn "Yes", hệ thống sẽ sử dụng định dạng SEF của Joomla! 1.0 và sẽ cố gắng tạo thành một liên kết hợp lệ. Mặc định là "Yes". User - Joomla! Plugin này xử lý đồng bộ hóa người dùng mặc định, có các thông số: Auto-create Users: Cho phép tự động tạo thành viên Joomla! Nếu có thể. Mặc định là "Yes". XML-RPC - Joomla! Plugin này cung cấp các API XML-RPC cho người dùng Joomla! Plugin này Không có thông số. XML-RPC - Blogger API Plugin này kích hoạt giao thức Blogger XML-RPC API cho trang web Joomla! Nếu được kích hoạt, nó cho phép các Blogger đăng bài viết lên trang web từ bất cứ ứng dụng nào hỗ trợ API này. Plugin này có các thông số: Collection by traibingo at buaxua.vn
8. Thiết Kế Web Với Joomla 1.0x & 1.5x New posts: Chọn Category để chứa các bài viết nhận được từ API này. Edit posts: Chọn Các mục để lấy bài viết mới từ đó. Collection by traibingo at buaxua.vn
9. Thiết Kế Web Với Joomla 1.0x & 1.5x Cách chuyển đổi Joomla! 1.0.x sang Joomla! 1.5.x Có nhiều cách chuyển đổi Joomla! từ phiên bản 1.0.x sang phiên bản 1.5.x, nhưng sau thời gian thử nghiệm nhiều cách thì đây là cách nâng cấp rất dễ làm và chuyển đổi thành công toàn bộ dữ liệu mà không gặp bất cứ lỗi nào. Sau đây là các bước thực hiện việc chuyển đổi: CHUẨN BỊ: Tải Component Migrator và Migration Assistant tại CHUYỂN ĐỔI DỮ LIỆU TỪ JOOMLA! 1.0.X Đăng nhập vào Admin của Joomla! 1.0.x và cài đặt Component Migrator Truy cập vào Menu Components -> Migrator và nhấn vào dòng chữ Create Migration SQL File Collection by traibingo at buaxua.vn
10. Thiết Kế Web Với Joomla 1.0x & 1.5x Chọn các bảng dữ liệu muốn chuyển sang Joomla! 1.5.x, mặc nhiên tất cả các bảng sẽ được chọn, tuy nhiên có thể bỏ chọn một số bảng không cần thiết. Collection by traibingo at buaxua.vn
11. Thiết Kế Web Với Joomla 1.0x & 1.5x Sau khi chọn xong nhấn Start Migration để tiến hành chuyển đổi. Cứ để nguyên như vậy cho chương trình tự chạy và sau cùng sẽ xuất hiện thông báo thực hiện thành công (Migration Complete!), nhấn vào dòng chữ Download để tiếp tục. Trong phần Migrator - Data Migration for Joomla! 1.5 nhấn vào dòng chữ Download một lần nữa và chọn save để lưu tập tin dữ liệu này. Collection by traibingo at buaxua.vn
12. Thiết Kế Web Với Joomla 1.0x & 1.5x Thoát khỏi Admin của Joomla! 1.0.x. CÀI ĐẶT JOOMLA! 1.5.x Tiến hành cài đặt Joomla! 1.5.x với Database mới. Tốt nhất nên tạo một thư mục khác để cài đặt, không nên vội xóa Joomla! 1.0.x để phòng trục trặc hoặc khi muốn chuyển đổi trực tiếp trên Host mà Joomla! 1.0.x vẫn đang hoạt động. Các bước cài đặt bình thường cho tới bước thứ 4 (Database Configuration) thì nhập thông tin của Database mới vào và tiếp tục. Tới bước thứ 6 (Main Configuration) chỉ khai báo các thông tin vào phần Site Name và Email, Password, các phần khác giữ nguyên (không chọn cài đặt dữ liệu mẫu) và nhấn Next. Tới bước cuối cùng (7) thì xóa hoặc đổi tên thư mục installation và chọn Admin để hoàn tất việc cài đặt. Đăng nhập vào Admin và cài đặt Component MigrationAssistant. Collection by traibingo at buaxua.vn
13. Thiết Kế Web Với Joomla 1.0x & 1.5x CẬP NHẬT DỮ LIỆU VÀO JOOMLA! 1.5.X Cách 1: Đối với dữ liệu (Database) có dung lượng nhỏ khoảng vài MB. Truy cập vào Menu Components -> Migration Assistant. Nhấn Browse (1) và chọn tập tin dữ liệu của Joomla! 1.0.x đã được tạo ra từ Component Migrator ở phần trên -> chọn UTF-8 (2) - > nhấn Migrate (3). Cách 2: Đối với dữ liệu (Database) có dung lượng lớn, bị lỗi khi làm cách 1. Đổi tên tập tin dữ liệu của Joomla! 1.0.x được tạo ra từ Component Migrator thành migrate.sql và copy vào thư mục migration như trong hình. Collection by traibingo at buaxua.vn
14. Thiết Kế Web Với Joomla 1.0x & 1.5x Truy cập vào Menu Components -> Migration Assistant. Đánh dấu vào ô I have already uploaded a SQL file (1) -> chọn UTF-8 (2) -> nhấn Migrate (3). Cập nhật thông tin trong Global Configuration: Sau khi hoàn tất việc cập nhật dữ liệu, nếu muốn các các thông tin về Site Name, Meta, Email, trong Global Configuration được thiết lập giống như Joomla! 1.0.x thì nhấn vào dòng chữ migrate your configuration.php settings. Cuối cùng: Cập nhật dữ liệu xong, thoát ra (Logout) khỏi phần Quản trị (Admin) và đăng nhập lại với tên (Username) và mật khẩu (Password) giống như Joomla! 1.0.x Sau khi đăng nhập Admin, vào phần quản lý User Manager và chọn Username migrationassistant , đây là User do Migration Assistant tạo ra khi cập nhật dữ liệu. Collection by traibingo at buaxua.vn
15. Thiết Kế Web Với Joomla 1.0x & 1.5x Thay đổi quyền của User này thành Registered và Save lại. Tiếp tục chọn lại Username migrationassistant và nhấn Delete để xóa. Collection by traibingo at buaxua.vn
16. Thiết Kế Web Với Joomla 1.0x & 1.5x Bước cuối cùng là phải copy tất cả các ảnh trong thư mục /images/stories và các thư mục con chứa ảnh (nếu có) của Joomla! 1.0.x sang thư mục /images/stories của Joomla! 1.5.x. Tới đây công việc chuyển đổi đã hoàn tất, toàn bộ các dữ liệu và Menu, Component, Module, Content, đều được chuyển hết sang Joomla! 1.5.x. Lưu ý: Nếu cài đặt Joomla! 1.5.x trong một thư mục khác thì sau này khi chuyển vào thư mục gốc chỉ cần thay đổi lại đường dẫn trong tập tin configuaration.php Chỉ các Component và Module mặc định có sẵn trong Joomla! mới được chuyển đổi, các thành phần mở rộng khác đều phải cài đặt lại. Collection by traibingo at buaxua.vn
17. Thiết Kế Web Với Joomla 1.0x & 1.5x Cách tạo các Category và Board cho SMF Trong SMF có các cấp quản lý nội dung theo thứ tự lớn nhất là Category (Đề mục chính), Board (Chuyên mục), Child of Board (Chuyên mục phụ). SMF có thể có nhiều Category, Board, Sau đây là cách tạo và sửa các cấp quản lý nội dung của SMF: Cách tạo Category mới: Truy cập Menu Admin -> Diễn đàn -> Diễn đàn -> nhấn vào Create New Category. Trong New Category: Order: Sắp xếp thứ tự cho Category, In first place là đặt phía trên hết. Full name: Tên của Category. Collapsible: Cho phép thu gọn Category này nếu đánh dấu vào ô. Collection by traibingo at buaxua.vn
18. Thiết Kế Web Với Joomla 1.0x & 1.5x Nhấn Add Category để tạo. Cách sửa Category đã có: Truy cập Menu Admin -> Diễn đàn -> Diễn đàn -> nhấn vào Modify Boards. Trong Modify Boards: Nhấn vào (Modify) nằm ngay bên phải của Category để sửa thành tên khác hoặc sắp xếp thứ tự tùy ý. Cách tạo Board mới: Truy cập Menu Admin -> Diễn đàn -> Diễn đàn -> Modify Boards -> Nhấn vào Add Board. Trong Modify Board: Category: Chọn Category để chứa Board này. Collection by traibingo at buaxua.vn
19. Thiết Kế Web Với Joomla 1.0x & 1.5x Order: Sắp xếp thứ tự, Child of là tạo Board phụ (Sub). Full name: Tên của Board. Descrition: Phần thông tin về Board này. Allowed Groups: Thiết lập quyền truy cập vào Board này cho các nhóm thành viên. Board access: Thiết lập các hạn chế truy cập đối với Board này. Moderators: Ghi tên của các thành viên giữ nhiệm vụ quản lý Board này. Count Posts: Thông tin về số lượng bài viết trong Board. Board Theme: Chọn Theme cho Board. Override Member's Theme: Chọn Theme mặc định cho thành viên. Sau khi thiết lập xong nhấn Sửa để chấp nhận hoặc nhấn Delete để xóa Board. Cách sửa Board đã có: Truy cập Menu Admin -> Diễn đàn -> Diễn đàn -> Modify Boards -> Nhấn vào (Modify) nằm bên phải cùng hàng của Board để sửa. Nhấn vào Move để sắp xếp thứ tự các Board. Cách tạo nơi lưu các bài viết bị xóa: Tạo Category và Board để lưu các bài viết bị xóa giống như các bước trên. Truy cập Menu Admin -> Diễn đàn -> Diễn đàn -> Settings. Collection by traibingo at buaxua.vn
20. Thiết Kế Web Với Joomla 1.0x & 1.5x Đánh dấu chọn Enable recycling of deleted topics. Chọn Board được tạo để lưu các bài viết bị xóa trong Board for recycled topics. Nhấn Save. Cách chuyển đổi Template từ Joomla! 1.0.x sang 1.5.x Khi chuyển trang web dùng Joomla! 1.0.x sang 1.5.x thì một trong những việc đầu tiên cần phải làm là chuyển đổi giao diện (Template). Bài viết này sẽ hướng dẫn cách chuyển đổi Template từ Joomla! 1.0.x sang 1.5.x Chuyển đổi Template từ Joomla! 1.0.x sang 1.5.x chủ yếu chỉ thực hiện việc thay đổi nội dung trong một số tập tin của Template. Các thay đổi trong index.php: Thay _VALID_MOSbằng _JEXEC Thay $mosConfig_absolute_pathbằng $this->baseUrl Thay $mosConfig_live_sitebằng $mainframe->getCfg( 'live_site' ) Thay các dòng lệnh hiển thị chữ echo 'Hello'cố định bằng bằng dòng lệnh echo JText::_( 'Hello' )có thể chuyển ngữ được. Thay mosGetParam bằng JRequest::getVar. Thí dụ: Thay $id = mosGetParam( $_REQUEST, 'id', 0 ); bằng $id = JRequest::getVar( 'id', 0 ); Thay mosShowHead();bằng Thay mosMainBody() bằng Thay mosLoadModules( $position_name, $style );bằng Thay các kiểu ($style) Module của 1.0.x tương ứng với 1.5.x: -1 =>none 0 =>table 1 =>horz Collection by traibingo at buaxua.vn
21. Thiết Kế Web Với Joomla 1.0x & 1.5x -2 =>xhtml -3 =>rounded Thay thành Thay thành countModules('$position_name ')) : ?> Thêm dòng khai báo css của Joomla! vào giữa cặp thẻ (chung với css của Template) Thêm dòng lệnh hiển thị các thông báo của Joomla! đặt tại vị trí nào tùy ý (thường được đặt phía trên phần nội dung chính) Ngoài ra cần phải lưu ý là Joomla! 1.5.x sẽ tự động nạp sẵn 2 Javascript trong Template thông qua dòng lệnh , nếu Template cũ có nạp các Javascript này thì khi chuyển đổi không cần đến nữa. Các thay đổi trong templateDetails.xml: Thay bằng Thay bằng Khai báo các vị trí Module ($position_name) được sử dụng trong Template. Thêm các thông số của Template vào nếu có. Các thay đổi trong css: Xem xét tập tin template_css.cssđể thêm bớt nội dung cho phù hợp với Joomla! 1.5.x (mở tập tin template.css của các Template 1.5.x khác để tham khảo). Đổi tên tập tin template_css.cssthành template.css Trên đây chỉ là các bước cơ bản để chuyển đổi các Template thông thường, đối với một số Template được thiết kế có nhiều chức năng thì phải chuyển đổi thêm các chức năng này. Collection by traibingo at buaxua.vn
22. Thiết Kế Web Với Joomla 1.0x & 1.5x Cách đưa thông tin từ diễn đàn SMF lên trang chủ Joomla! Các trang Web thường đưa thông tin về tình hình của Diễn đàn lên trang chủ để thông báo, giới thiệu về các chủ đề được thảo luận và các thành viên nổi bật của mình. Qua các thông tin này người dùng sẽ dễ dàng nhận xét, đánh giá tình hình hoạt động của Diễn đàn. Bài viết này sẽ hướng dẫn cách đưa thông tin từ Diễn đàn SMF lên trang chủ Joomla! 1.0.x bằng cách sử dụng các Module có chức năng lấy thông tin từ SMF. Tải gói Module tại đây, giải nén gói này sẽ được 4 gói cài đặt Module sau: mod_smf_online: Hiển thị các thông tin chung của SMF. mod_smf_topposter: Hiển thị các Thành viên nổi bật nhất. mod_smf_toptopics: Hiển thị các chủ đề nổi bật nhất. mod_smf_last: Hiển thị các chủ đề/tin mới nhất. Truy cập vào phần Quản trị (Admin)của Joomla! để cài đặt các Module này sau đó thiết lập cho các Module này với các thông số chung như sau: Collection by traibingo at buaxua.vn
23. Thiết Kế Web Với Joomla 1.0x & 1.5x Title: Sửa tên lại thành tiếng Việt tùy theo chức năng của Module. Show title: Chọn Có để hiển thị tiêu đề cho Module. Position: Chọn vị trí để đặt Module. Published: Chọn Có để cho phép hiển thị Module. SMF path: Nhập đường dẫn đến thư mục cài đặt SMF, nếu cài đặt trong thư mục smf thì nhập ".\smf\" (không có dấu "") Order: Cách sắp xếp thứ tự căn cứ theo số lần xem (Views) hay Trả lời (Reply). Lenght: Chọn độ dài cho tựa đề/thông tin muốn hiển thị (tính bằng chữ). Chọn SMF Default 25char (25 ký tự) hoặc chọn Set your own lenght và nhập số lượng ký tự vào mục User defined Lenght. Collection by traibingo at buaxua.vn
24. Thiết Kế Web Với Joomla 1.0x & 1.5x Number: Số lượng tựa đề/thông tin muốn hiển thị. Author: Chọn hiển thị/không hiển thị tên của thành viên tạo chủ đề. Time: Chọn hiển thị hoặc không hiển thị thời gian tạo chủ đề. Sau khi thiết lập xong các thông số có thể sắp xếp lại thứ tự cho các Module tùy ý. Lưu ý: Để các Module này hiển thị được tiếng Việt trên trang Web Joomla! 1.0.x thì phải xóa bỏ dòng $db_character_set = 'utf8'; trong tập tin Settings.php theo hướng dẫn khi cài đặt SMF. Collection by traibingo at buaxua.vn
25. Thiết Kế Web Với Joomla 1.0x & 1.5x Cơ bản về Front-end của Joomla! 1.0.x Front-end là các trang Web mà mọi người sẽ được thấy khi truy cập vào Web Site của bạn. Phần này ngoài việc hiển thị nội dung của trang Web còn là nơi mọi người có thể tương tác với Web Site như đăng ký thành viên, tham gia quản lý và viết bài đăng trên trang Web. Địa chỉ vào Front-end trên localhost là Sau khi cài đặt Joomla!, chọn View Site, trang chủ của Web Site sẽ xuất hiện trên trình duyệt. Hình dạng, bố cục của trang này là do Template (Temp) mặc định của Joomla!, Temp này có thể thay đổi được. STT Tên Loại Chức năng 1 Top Menu Mod Menu được đặt ở vị trí trên cùng của Web Site 2 Main Menu Mod Menu chính dẫn đến các trang nội dung của Web Site 3 Other Menu Mod Menu phụ dẫn đến một nội dung do người dùng tùy chọn 4 Log-in Form Mod Nơi người dùng đăng ký tài khoản và đăng nhập, sau khi đăng nhập Mod này sẽ không hiển thị nữa 5 User Menu Mod Menu này chỉ hiện ra sau khi người dùng đăng nhập, cho phép người dùng tương tác với Web Site 6 Syndicate Mod Chức năng lấy tin RSS 7 Banners Mod Hiển thị banner quảng cáo Collection by traibingo at buaxua.vn