tài liệu tự thiết kế website thật dễ dàng

Về cơ bản thì Responsive Layout là một cấu trúc cơ bản của một website nhưng đảm bảo hiển thị được tốt trên tất cả các loại màn hình khác nhau có thể là màn hình Desktop, màn hình Tablet

Tô Nam Phong

Ngày xuất bản: Tháng 7 năm 2013

Ấn bản thứ ba

Nội dung

Những người thực hiện 2

Nội dung 4

Tính năng của Joomla! 3.x 6

Bước 1: Làm quen với Joomla! CMS 8

Vậy Joomla! CMS là gì? 8

Những thành phần chính của Joomla? 12

Bước 2: Cài đặt Joomla! 3.x trên localhost 30

Cài đặt XAMPP 31

Cài đặt Joomla! 35

Bước 3: Tạo nội dung cho website Joomla 37

Chuẩn bị cấu trúc nội dung 37

Tạo nội dung 38

Quản lý nội dung của bạn với JSN PowerAdmin 54

Chỉnh sửa bài viết đẹp hơn 55

Bước 4: Tùy chỉnh giao diện website của bạn với Joomla! template 81

Joomla! template là gì? 81

Chọn Joomla! template 83

Cài đặt Joomla! template 85

Bước 5: Sắp xếp modules ở các vị trí 90

Joomla! module và Joomla! position là gì? 90

Thêm mới một module 94

Bước 6: Mở rộng chức năng của website với Joomla! extensions 100

Làm việc với thành phần mở rộng (Extensions) mặc định “Contacts” 101

Thêm mới Extension 112

Bước 7: Quản lý website với JSN PowerAdmin 117

Quản lý website Joomla! với Site Manager 120

Truy cập nhanh các mục bất kỳ với Spotlight Search 133

Quản lý các kiểu template với Template Style Manager 135

Những tính năng khác 139

Cấu hình JSN Power Admin 143

Kết luận 146

Tham khảo 147

Dịch giả chú thích: Một số từ hay cụm từ được để nguyên không dịch, vì nếu dịch sang tiếng Việt có thể sẽ

khiến bạn thấy khó hiểu hơn

Tính năng của Joomla! 3.x

Joomla! 3.x là phiên bản mới nhất của Joomla! Phiên bản mới này bao gồm nhiều điều thú vị với rất nhiều cải tiến mới mẻ Bạn có thể lướt qua 6 tính năng tuyệt vời của Joomla! 3.x mang lại trong “Infographic” bên dưới

Để tìm hiểu thêm thông tin về các tính năng của Joomla! 3.x, bạn có thể truy cập http://www.joomla.org/3/en

6 tính năng tuyệt vời của Joomla! 3.x

Dịch giả chú thích:

Responsive Layout: Trong thiết kế Web (chính xác là front-end development) thì Responsive Layout chỉ là một

phần của Responsive Web Design Vậy Responsive Layout là gì? Về cơ bản thì Responsive Layout là một cấu trúc cơ bản của một website nhưng đảm bảo hiển thị được tốt trên tất cả các loại màn hình khác nhau (có thể là màn hình Desktop, màn hình Tablet (Ipad, Kindle) hay các thiết bị di động như iphone, android, etc)

Twitter Bootstrap (Bootstrap Framework) được tạo và phát triển bởi Twitter gồm các mã CSS + HTML cơ bản

cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website Xem trang

Bước 1: Làm quen với Joomla! CMS

Trước đây nếu bạn muốn xây dựng một website, chỉ có một sự lựa chọn là thuê một công ty thiết kế web chuyên nghiệp làm cho bạn và sau đó bạn hoàn toàn phụ thuộc vào họ để duy trì và cập nhật website này Nhưng bây giờ, với sự phát triển mạnh mẽ của phần mềm mã nguồn mở, bạn có thể tự xây dựng một website dễ dàng bằng cách sử dụng một hệ quản trị nội dung CMS (Content Management System) Có nhiều hệ quản trị CMS để bạn lựa chọn, nhưng thích hợp nhất để xây dựng một website trung bình hoặc nhỏ là Joomla!

Trong phần này bạn sẽ nắm được những thông tin sơ lược về Joomla! và các thành phần của nó

Vậy Joomla! CMS là gì?

Joomla! logo

Joomla! CMS là một hệ quản trị nội dung mã nguồn mở cho phép bạn tạo và quản lý các website Trển các

website này, bạn có thể chỉnh sửa:

1 Nội dụng website như chữ, hình ảnh, videos, v.v

2 Giao diện website bằng cách dùng các template (Joomla Templates)

3 Chức năng website bằng cách dùng các extension (Joomla Extensions)

Hệ thống website Joomla! gồm hai phần : Front-end (Phần Mặt trước - những gì người dùng chung thấy) và Back-end (Phần mặt sau - những gì mà người quản trị thấy)

Phần front-end

Front-end là những gì mà mọi người xem được khi họ truy cập website của bạn Thông thường một mẫu thiết

kế bao gồm những mục cơ bản như logo, thanh danh mục (menu bar), cột bên trái, cột bên phải (side column)

và khối văn bản

Phần front-end của website

Xem một bài viết tại front-end

Chỉnh sửa một bài viết trong back-end

Những thành phần chính của Joomla?

Bây giờ, hãy khám phá những thành phần chính của Joomla!

Nội dung

Trong Joomla!, nội dung bao gồm những bài viết, chuyên mục hay media

Bài viết (Articles)

Bài viết là khối nội dung chính của một website Joomla! Trong phần front-end bạn có thể dễ dàng nhận ra một bài viết là một đoạn văn bản có hoặc không có hình ảnh, được trình trong vùng nội dung chính

Bài viết “Getting started”

Tại back-end, các bài viết được quản lý tromg danh mục con “Article Manager” Bạn có thể truy cập vào đây thông qua danh mục “Content” => “Article Manager”

“Sản phẩm” có thể chứa tất cả các bài viết về sản phẩm của bạn Hay, một chuyên mục “Về chúng tôi” có thể

chứa tất cả các bài viết có nội dung như “Giới thiệu công ty”, “Tầm nhìn & Sứ Mệnh”, “Hội đồng quản trị”,

v.v

đây thông qua danh mục “Content” => “Category Manager”

Tại đây, bạn có thể tạo chuyên mục mới, chỉnh sửa chúng, chọn hiển thị hay ẩn chuyên mục, v.v

Thẻ bài viết (Tags)

Các thẻ bài viết (Tags) là các từ hoặc cụm từ được gán vào một đoạn thông tin (bài viết, blog post ) Nó mô tả

nội dung của mục đó Ví dụ, bạn có thể thêm các thẻ như “Joomla! templates” và “Joomla! extensions” vào bài viết “Getting Started with Joomla!”

Các mục có những thẻ bài viết giống nhau sẽ được nhóm lại cùng nhau, vì vậy mọi người có thể tìm kiếm chúng dễ dàng hơn Bạn có thể tạo một danh mục (hay một module) để hiển thị tất cả các thẻ bạn đã tạo Trong phần quản trị back-end, các thẻ bài viết được đặt trong bảng chỉnh sửa bài viết (Article Manager) Bạn vào phần “Content” => “Article Manager”, sau đó đi tới các bài viết riêng biệt để gán thẻ bài viết

Chức năng Thẻ bài viết (“Tag”) giúp bạn gán từ khóa vào các mục riêng biệt

Để quản lý tất cả thẻ bài viết của bạn, bạn có thể truy cập vào “Component” => “Tags”

Vào “Components” -> “Tags” để quản lý thẻ bài viết của bạn

Media

Hiểu theo cách đơn giản, media là những thứ không phải văn bản mà bạn có thể đưa vào trong phần nội dung

Nó không chỉ là hình ảnh, mà còn có thể là các videos hay những thành phần “đa phương tiện” khác

“Content” => “Media Manager”

Phần quản lý “Media Manager”

Tại đây, bạn có thể tạo các thư mục media mới, đưa các tập tin lên, v.v Chúng ta sẽ thảo luận chi tiết cách sử

Danh mục (Menus)

Danh mục giúp khách truy cập website có thể di chuyển tới các trang khác nhau trong website của bạn Bạn có thể tạo nhiểu danh mục và cấu hình chúng hiển thị ở các vị trí khác nhau trong website, ví dụ trên đầu trang hoặc bên phải, bên trái website

Một danh mục trên webiste

Trong ví dụ trên, người quản trị tạo một danh mục là “Home” với nhiều danh mục con bên trong nó như

“Getting Started”, “Using Joomla!”, etc

Để quản lý danh mục, bạn truy cập vào phần quản trị danh mục qua “Menus” => “Menu Manager”

Mục “Menu Manager” trong phần quản trị Joomla!

Trong “Menu Manager” bạn có thể tạo danh mục và các danh mục con để liên kết các thành phần trên website

Khi đã tạo xong một danh mục, bạn tạo một module danh mục để hiển thị nó trên front-end

Thành viên (Users)

Joomla! cho phép nhiều thành viên đăng ký trong website của bạn Tất cả những thành viên này được sắp xếp

vào từng nhóm với các quyền truy cập khác nhau Mặc định có những nhóm thành viên như “Author”,

“Editor”, “Publisher”, etc Ví dụ:

 Thành viên trong nhóm“Administrator” có thể truy cập cả back-end và front-end

 Thành viên trong nhóm “Registered” chỉ có thể truy cập vào phần front-end Họcó thể quản lý các thành

viên, các nhóm thành viên và các quyền truy cập tương ứng trong danh mục “Users” => “User Manager”.

Danh mục “Users” trong back-end

Các thành phần mở rộng (Extensions)

Các thành phần mở rộng của Joomla! (extentions) là những phần mềm đặc biệt được viết để để tích hợp vào Joomla! nhằm tăng cường cũng như mở rộng chức năng cho website Ví dụ, bạn cần cài đặt extension.nếu bạn muốn có một slideshow hình ảnh, bộ sưu tập video, hay một biểu mẫu liên hệ với các chức năng nâng phong phú hơn

Mặc định gói cài Joomla! đã cung cấp cho bạn khá nhiều loại Extensions cho những nhu cầu cơ bản Nếu bạn muốn sử dụng nhiều extension hơn, bạn có thể truy cập vào trang Joomla! Extension Directory Đây là trang chính thức của Joomla! Extention được quản lý bởi một đội ngũ nòng côt của Joomla!

Joomla! Extensions Directory

Có 5 loại extensions cơ bản, đó là: components, modules, plug-ins, templates và languages Mỗi một loại extensions này đều xử lý một chức năng cụ thể

Components

Component là loại extension phức tạp nhất Đây được xem như một ứng dụng thực hiện một số nhiệm vụ nhất định và hiển thị những nội dung đặc biệt trên website của bạn Như đã đề cập ở trên, một bộ sưu tập video là một ví dụ của một component Nó cũng có thể là một hệ thống mua bán trực tuyến, hệ thống đặt phòng trực tuyến, diễn đàn, v.v

Component “Newsfeeds” tại front-end

Nội dung được tạo ra bởi một component và được hiển thị trong vùng nội dung chính Trong ví dụ ở trên, bạn

có thể nhìn thấy một danh sách nguồn cấp dữ liệu (feed) được tạo ra bởi component“Newsfeeds” Tất cả các

Danh mục “Components” trong phần back-end

Mặc định, gói Joomla! cung cấp các components: “Banners”, “Contacts”, “Messaging”, “News

Feeds”, “Redirect”, “Search”, “Smart Search”, “Tags” và “Web links”

Modules

Modules cũng đóng vai trò như những components nhưng ở quy mô nhỏ hơn Modules thực hiện những chức năng đơn giản và hiển thị nội dụng như một khổi thông tin (block) nhỏ ở trên website

website

Tất cả các modules được quản lý thông qua “Extensions” => “Module Manager”

Danh mục con quản lý “Module Manager” trong phần back-end

Templates

Template điểu khiển việc thiết kế đồ họa trên website của bạn Nó quyết định bố cục website, màu sắc, kiểu chữ cùng nhiều thành phần khác nhằm tạo nên nét riêng cho website của bạn

Thông thường, một template bao gồm 3 thành phần sau:

 Các yếu tố đồ họa tĩnh như ảnh nền, các chi tiết trang trí, logo, v.v

 Vùng nội dung chính trình bày dữ liệu được tạo ra bởi các components

 Nhiều vị trí module để hiển thị nội dung được trình bày bởi các modules, trong những vị trí nhất định

Trong back-end, bạn có thể quản lý templates thông qua “Extensions” => “Template Manager”

“Template Manager”

Mặc định, Joomla! 3.x có sẵn hai front-end template là: “Protostar” và “Beez3” Ngoài ra có hàng ngàn

templates miễn phí cũng như phải trả phí cho bạn lựa chọn Đây là một danh sách các template: top 10 Joomla! 3.0 templates for users

Dưới đây là một vài ví dụ về Joomla template:

JSN Pixel

Plug-ins

Plug-ins được thiết kế để hiển thị nội dung bên trong các component và module Plugin cũng có thể thực hiện một số công việc “ngầm” (một hành động hay một thao tác) trong những thời điểm nhất định khi tải website Bạn có thể hiểu rằng plug-ins giúp tương tác với hệ thống Joomla! linh hoạt hơn

Hai plugins“Voting” và “Read more” trong front-end

Ví dụ, ở hình trên bạn có thể nhìn thấy plug-in Đánh giá (“Voting”) và plug-in Đọc thêm (“Read more…”)

trong những bài viết Các plug-ins được quản lý qua “Extensions” => “Plug-in Manager”

“Plug-in Manager”

Trong gói cài đặt Joomla! 3.x, plug-ins được chia vào trong 11 chuyên mục là: “authentication”, “captcha”,

“content”, “editor”, “editors-xtd”, “extension”, “finder”, quickicon”, “search”, “system” và “user”

Bước 2: Cài đặt Joomla! 3.x trên localhost

Việc cài đặt Joomla! 3.x trên localhost khá đơn giản; tuy nhiên, nếu đây là lần đầu làm, bạn cần chú ý làm theo các hướng dẫn để cài đặt cho đúng

Đầu tiên, ta cần làm rõ khái niệm “Localhost” Bạn biết đấy, bất kỳ một website nào cũng cần phải được lưu trữ, sắp xếp trên một web server để hiển thị nội dung đến các users Thông thường, bạn cần mua một gói

hosting từ nhà cung cấp hosting nào đó như Rackspace hay GoDaddy (Ở VN chúng ta có PaVietnam, Hostvn, v.v.) Phụ thuộc vào gói hosting mà bạn chọn, nhà cung cấp hosting sẽ cài đặt một web server cho bạn trên server của họ và cho phép người dùng truy cập đến nó Một localhost về cơ bản giống với một web server; cái khác ở đây là nó được cài đặt trên máy tính của các bạn

Tuy nhiên, để chạy Joomla!, ngoài web server, bạn còn cần hai thứ quan trong nữa là: Ngôn ngữ thông dịch PHP và Cơ sở dữ liệu MySQL Nghe thì có vẻ phức tạp nhưng may mắn thay chúng ta có một gói phần mềm

là XAMPP đã tích hợp sẵn tất cả những thành phần ở trên

Nào bây giờ hãy cài XAMPP trên máy tính của bạn

Cài đặt XAMPP

1 Tải gói cài đặt XAMPP tại địa chỉ http://www.apachefriends.org/en/xampp.html

2 Chạy file cài đặt và làm theo từng bước hướng dẫn, tương tự như các phần mềm thông thường khác

3 Mở “XAMPP Control Panel Application”, chạy “Apache” và “MySQL”

Bảng điều khiển chính của XAMPP

Như vậy, localhost đã được cài đặt trên máy tính của các bạn Bạn hãy kiểm tra bằng cách gõ địa chỉ:

“http://localhost” vào trình duyệt Giao diện của bạn sẽ xuất hiện như hình bên dưới

Giao diện của XAMPP cho Windows

4 Tạo một cơ sở dữ liệu mới trong phpMyAdmin

Từ giao diện của XAMPP, chọn phpMyAdmin để tạo một cơ sở dữ liệu mới

Chọn “phpMyAdmin”

5 Tiếp theo, chọn “Database” trong thanh công cụ hiển thị như hình bên dưới

Cài đặt Joomla!

1 Tải gói cài đặt Joomla! 3.x tại http://www.joomla.org/download.html

2 Tạo một thư mục mới có tên là “Joomla3x” trong thư mục “htdocs” của XAMPP Thông thường nó sẽ được đặt trong “C:\xampp\htdocs”

3 Giải nén gói cài đặt đã tải về vào trong thư mục “Joomla3x”

4 Gõ vào thanh trình duyệt địa chỉ “http://localhost/Joomla3x”

5 Làm theo các bước cài đặt trong Joomla:

a Bước 1 Cấu hình chung

dụ, “English (United States)”

 Site Name: Điền tên website của bạn

 Description: Điền thông tin mô tả cho website

 Site Offline: Chọn trạng thái cho website của bạn khi bạn truy cập site: Chọn “Yes” nếu

muốn website “offline” và “No” cho website “online”

 Admin Email: Điền thông tin địa chỉ email bạn muốn sử dụng cho website

b Bước 2 Cấu hình dữ liệu

 Password: Để trống

 Database Name: Nhập vào tên của cơ sở dữ liệu mà bạn đã tạo trước đó là “Joomla30”

 Finalization: Bạn có thể chọn việc cài đặt dữ liệu mẫu cho website hoặc không bằng cách nhấn vào những lựa chọn tương ứng

 Overview: Trong bước này, bạn sẽ đánh giá lại tổng quan toàn bộ thông tin bạn đã cấu hình

trong bước 1 Sau khi kiểm tra, nhấn “Install.”

 Khi việc cài đặt hoàn tất, bạn chỉ cần nhấn vào nút “Remove installation folder” để hoàn tất quá trình cài đặt Sau cùng, bạn có thể nhấn vào “Site” để xem trang vừa tạo hoặc nhấn vào

“Administrator” để truy cập vùng quản trị dành cho Administrator

Bây giờ bạn đã cài đặt xong cho mình website Joomla! đầu tiên rồi đó Không quá khó khăn phải không? Nếu

có bất cứ vấn đề gì trong quá trình cài đặt, bạn có thể thử tìm cho mình câu trả lời từ những nguồn sau:

 Diễn đàn chính thức của Joomla!

Diễn đàn Joomla! là một trong những diễn đàn hỗ trợ sôi động nhất (và thân thiện nhất) trên thế giới, đây cũng là một nơi tuyệt vời để nhận được sự giúp đỡ cũng như gặp gỡ các thành viên Joomla! khác Có

nhiều câu hỏi và câu trả lời được thảo luận tại đây Bởi vì chủ đề của chúng ta là Cài đặt Joomla! 3.x,

vậy bạn có thể tìm kiếm sự giúp đỡ và câu trả lời trong chuyên mục “Installation Joomla! 3.x”

 Dịch vụ hỗ trợ Joomla! (http://joomla.cmshelplive.com/)

Đây là website cung cấp cho bạn dạng dịch vụ “Joomla! theo yêu cầu” Tất nhiên là bạn phải trả tiền cho những dịch vụ rồi, nhưng các vấn đề của bạn sẽ được giải quyết bởi những chuyên gia Joomla!

 Những nguồn website học Joomla! khác

Có nhiều website hữu ích mà bạn có thể sử dụng để tự học về Joomla!, dưới đây là một vài ví dụ:

o http://docs.joomla.org/Beginners

o http://www.joomlatutorials.com/

o http://www.joomlablogger.net/

o http://www.ostraining.com/

>>> Bước tiếp theo

Cài đặt Joomla! 3.x thành công trên localhost là việc đầu tiên bạn cần làm trước khi bắt đầu với website

Joomla! Website của bạn sẵn sang rồi, bây giờ chúng ta tiến hành tạo nội dung cho nó

Bước 3: Tạo nội dung cho website Joomla

Thành phần quan trọng nhất của mỗi website đó là nội dung Trong bước này, bạn sẽ:

1 Chuẩn bị cấu trúc nội dung

2 Tạo các chuyên mục và bài viết

3 Tạo một danh mục

4 Quản lý nội dung của bạn với JSN PowerAdmin

Chuẩn bị cấu trúc nội dung

Tạo một nội dung tương tự việc sắp xếp các sản phẩm vào trong một cửa hang tạp hóa vậy Với Joomla!, các bài viết giống như những sản phẩm, các chuyên mục thì giống như những kệ đựng sản phẩm và danh mục thì giống như lối đi để tìm đến những cái kệ đó Giả dụ bây giờ bạn có một website bán hàng; cấu trúc của nội dung website có thể hình dung như thế này:

1 About (Giới thiệu)

a About my site (Giới thiệu website)

b How to purchase/order products (Mua hàng thế nào)

c How to make payment (Thanh toán)

2 News (Tin tức)

a Latest news (Tin tức mới nhất)

b Arrivals (Hàng mới về)

c Sale (Hàng giảm giá)

d Coupons (Phiếu giảm giá)

e Promotion (Khuyến mãi)

3 Support (Hỗ trợ)

a Hotline information (Hỗ trợ khách hàng qua điện thoại)

b Online customer services (Hỗ trợ khách hàng trực tuyến)

c Contact us (Liên lạc)

Tạo nội dung

Sau khi chuẩn bị cấu trúc nội dung của website trên giấy, bạn có thể tiến hành tạo nội dung đó trong Joomla! Hãy bắt đầu với việc tạo các chuyên mục

Các chuyên mục

1 Vào “Content” => “Category Manager” và nhấn “Add New Category”

Thêm một chuyên mục mới

2 Tiếp theo, điền tên chuyên mục là “About” và nhấn “Save & Close” trên thanh công cụ

Nhập thông tin cho chuyên mục

Sau đó, ban có thể nhìn thấy chuyên mục “About” bạn mới tạo nằm bên trong phần “Category Manager”

Chuyên mục “About”

Bạn có thể tạo tất cả các chuyên mục còn lại theo cách này

6 chuyên mục mới đã được tạo

Sau khi hoàn tất việc tạo các chuyên mục, hãy tạo các bài viết