WHAT IS JOOMLA? - dulieu.tailieuhoctap.vndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · Joomla! được viết bằng ngôn ngữ PHP và kết nối

Author: Luong Khiem

11/9/2010

WHAT IS JOOMLA?

See how easy it is!

See how easy it is!

WHAT IS JOOMLA?

1

Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 1

WHAT IS JOOMLA?

See how easy it is!

I) What is Joomla?

1. Giới thiệu Joomla

2. Ứng dụng Joomla

3. Cài đặt Joomla

II) Administrator Overview

1. Tổng quan trang quản trị

2. Cấu hình chung

3. Quản lý ngôn ngữ

4. Quản lý giao diện

5. Quản trị nội dung

6. Quản lý menu

7. Quản lý Module, Component

III) Advance Joomla

1. Template Joomla

2. Component

3. SEO

4. Bảo mật Website Joomla

See how easy it is!

WHAT IS JOOMLA?

2


See how easy it is!

WHAT IS JOOMLA?

3


I) What is Joomla? 1. Giới thiệu Joomla

- Joomla được phát âm theo tiếng Swahili như là 'jumla' nghĩa là "đồng

tâm hiệp lực".

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

2. Ứng dụng Joomla

- Các cổng thông tin điện tử hoặc các website doanh nghiệp:

- Thương mại điện tử trực tuyến

- Báo điện tử, tạp chí điện tử

- Website của các doanh nghiệp vừa và nhỏ

- Website của các cơ quan, tổ chức phi chính phủ

- Website các trường học

http://www.php.net/

http://www.mysql.org/

http://vi.wikipedia.org/wiki/C%E1%BB%95ng_th%C3%B4ng_tin_%C4%91i%E1%BB%87n_t%E1%BB%AD

http://vi.wikipedia.org/wiki/Th%C6%B0%C6%A1ng_m%E1%BA%A1i_%C4%91i%E1%BB%87n_t%E1%BB%AD

http://vi.wikipedia.org/wiki/B%C3%A1o_%C4%91i%E1%BB%87n_t%E1%BB%AD

See how easy it is!

WHAT IS JOOMLA?

4


- Website của gia đình hay cá nhân

- ...

3. Cài đặt Joomla

3.1 Cài đặt Home Server

- Joomla! Là một hệ quản trị nội dung mã nguồn mở được viết trên

ngôn ngữ PHP kết nối với cơ sở dữ liệu MySQL do đó để một

website Joomla có thể chạy được chúng ta cần có một server được

cài đặt PHP và MySQL và một số module khác.

- Thông thường thì chúng ta sẽ thuê Hosting từ các nhà cung cấp

dịch vụ Domain Hosting. Để phục vụ cho việc học tập và nghiên

cứu chúng ta cũng có thể tự minh xây dựng một Home Server để

chạy website Joomla ngay tại máy mình.

- Để xây dựng Home Server ta có thể sử dụng nhiều ứng dụng khác

nhau như: Apache, XAMPP, Uniform Server,..Với ưu điểm nổi bật

về các plugin cũng như sự tiện dụng dễ sử dụng thì Uniform Server

là một lựa chọn

- Cài đặt Uniform Server:

Download Uniform Server tại:

http://sourceforge.net/projects/miniserver/files/

Sau khi download ta chạy để giải nén Uniform Server:

Sau khi giải nén ta chạy file Start.exe để khởi động server

See how easy it is!

WHAT IS JOOMLA?

5


Start Server:

Như vậy bạn đã cài đặt xong Home Server

See how easy it is!

WHAT IS JOOMLA?

6


3.2 Cài đặt Joomla

Bước 1:Tạo cơ sở dữ liệu (CSDL)

- Truy cập phpMyadmin để tạo CSDL cho website theo link:

http://localhost/apanel/phpmyadmin

http://localhost/apanel/phpmyadmin

See how easy it is!

WHAT IS JOOMLA?

7


- Tạo CSDL cho website, ở đây ta đặt tên CSDL là joomla

Bước 2: Cài đặt Joomla

Dowload source Joomla tại:

http://www.joomla.org/download.html

Giải nén source joomla vào thư mục WWW của server

http://www.joomla.org/download.html

See how easy it is!

WHAT IS JOOMLA?

8


Để tiến hành cài đặt website ta chạy đường dẫn:

http://localhost/joomla/installation/index.php

See how easy it is!

WHAT IS JOOMLA?

9


Bấm next để qua bước 2: Pre-installation Check. Bước này để

kiểm tra cấu hình Server.

Bấm Next để qua bước 3: Licence. Bước này để giới thiệu về bản

quyền Joomla, nhưng Joomla là mã nguồn mở nên chúng ta có thể

không cần quan tâm bước này và nhấn Next để qua bước 4.

Ở bước tiếp theo này chúng ta khai báo thông tin CSDL cho

website joomla

See how easy it is!

WHAT IS JOOMLA?

10


Note:Chúng ta cần đổi tên Prefix mặc định của joomla là

“jos_” thành một tên khác ví dụ như: “lk_” để bảo mật cho

website, điều này sẽ được nói rõ hơn trong phần “Bảo Mật

Joomla”

Ở bước tiếp theo FTP Configurationchúng ta có thể cấu hình tài

khoản FTP cho site ngay tại đây, thông thường chúng ta không cấu

hình FTP nên chọn Next

Bước Main Configuration để cấu hình thông tin website:

Site name: Đặt tên cho website

Your Email: cấu hình email của administrator

Admin password: cấu hình password cho user: admin

Install Sample Data: cài đặt dữ liệu mẫu cho website để

bạn dễ dàng làm việc với một website mới bắt đầu xây

dựng

See how easy it is!

WHAT IS JOOMLA?

11


Ở bước cuối cùng hoàn tất việc cài đặt bạn cần phải xóa thư

mục “Installation” trong source cài đặt của bạn

Như vậy bạn đã hoàn tất việc cài đặt một website joomla. Bạn có thể xem website vừa cài

đặt: http://localhost/joomla/

http://localhost/joomla/

See how easy it is!

WHAT IS JOOMLA?

12


II) Administrator Overview

- Trang quản trị administrator của Joomla để điều hành toàn bộ website

Joomla. Với giao diện được thiết kế tao nhã dễ sử dụng người dùng có thể

xây dựng cấu trúc website, biên tập và xuất bản nội dung trang web.

- Cấu trúc một trang quản trị Administrator của Joomla thường gồm 4 vùng:

Menubar – thanh menu, Toolbar – thanh công cụ, Infobar – thanh thông tin,

Workspace – vùng làm việc.

- Để đăng nhập vào trang quản trị ta đăng nhập với đường dẫn

“/administrator”. Ở đây ta đăng nhập với đường dẫn sau:

http://localhost/joomla/administrator

- Tài khoản đăng nhập ta đăng nhập với:

o Tên đăng nhập: admin

o Mật khẩu: ****** (là mật khẩu mà bạn tạo trong quá trình cài đặt

joomla)

See how easy it is!

WHAT IS JOOMLA?

13


1. Tổng quan trang quản trị

Trang quản trị được bố thanh những các vùng giúp người dùng dễ dàn

quản trị trang web của mình

Vùng 1: Thanh menu chứa menu tất cả các chức năng, ứng dụng,

quản trị nội dung của website

Vùng 2:Thanh thông tin, giúp người quản trị (admin) có thể biết về

tình trạng website như: Phiên bản joomla đang xài ( Phiên bản

1.5.20) Nút “Xem trước”, email, user đang đăng nhập, Nút

“Thoát”.

Vùng 3:Vùng làm việc, giúp admin có thể dễ dàng di chuyển đến

các mục cần làm một cách dễ dàng và nhanh chóng như: Viết bài

mới, quản lý chủ đề, quản lý ngôn ngữ, quản lý thành viên,…

Thêm bài viết mới: biên soạn thêm một bài viết mới

Quản lý bài viết: quản lý tất cả các bài viết

Quản lý nhóm tin:quản lý, chỉnh sửa các nhóm tin

Quản lý chủ đề:quản lý, chỉnh sửa chủ đề của các nhóm tin

Quản lý đa phương tiện: Cho phép quản lý các hình ảnh,

flash, tài liệu,… của website

Quản lý menu: Chỉnh sửa, thêm xóa các menu

Quản lý ngôn ngữ:cho phép chọn ngôn ngữ mặc định cho

website cũng như trang quản trị.

Quản lý thành viên: quản trị các thành viên của website

Cấu hình chung:cho phép cấu hình hệ thống cho server, hệ

thống cũng như tổng thể trang web.

See how easy it is!

WHAT IS JOOMLA?

14


Vùng 4:Các Công cụ ( Module) hiển thị trong trang quản trị giúp

admin dễ dàng thống kê tình trạng website như: số lượng user đang

đăng nhập, bài viết mới nhất, bài viết đọc nhiều nhất,…

2. Cấu hình chung

Là trung tâm cấu hình chính của một website Joomla, tất cả cấu hình

quan trọng đều được cấu hình ở đây, tất cả những chỉnh sửa trong “Cấu

hình chung” đều được lưu xuống file “configuration.php”

2.1. Trang Web

Cấu hình Site:

Cho phép admin tùy chọn cho website ngừng hoạt động

hay không.

Cấu hình tên website

Chọn trình soạn thảo nội dung bài viết

Email website

Cấu hình máy tìm kiếm:Nơi để Google hiểu tổng thể về website

của bạn thông qua các từ khoa “Meta” và mô tả về website của bạn

(Keyword descriptions)

Thiết lập SEO: Admin có thể chỉnh đường dẫn thân thiện với

Google (Google friendly). Phần này chúng ta sẽ đi chi tiết trong

phần SEO.

See how easy it is!

WHAT IS JOOMLA?

15


2.2. Hệ thống

Là trung tâm cấu hình toàn bộ hệ thống website từ thiết lập hệ thống,

cấu hình thành viên, cache cũng như quản lý đa phương tiện.

See how easy it is!

WHAT IS JOOMLA?

16


2.3. Máy chủ

Cấu hình máy chủ: admin cấu hình thư mục chứa file tạm

(Temp). “Nén trang dạng GZIP”: cho phép nén website ở dạng

gzip để tối ưu tốc độ website

Cấu hình múi giờ:Cài đặt múi giờ cho website

Cấu hình FTP:Bước này giúp cấu hình, chỉnh sửa FTP trong quá

trình cài đặt chúng ta bỏ qua. Thông thường admin không cấu hình

FTP ở đây để đảm bảo về vấn đề bảo mật

Cấu hình CSDL:cấu hình chỉnh sửa thông tin về CSDL của

website

Cấu hình mail:Cấu hình email cho website

3. Quản lý ngôn ngữ

Admin quản lý ngôn ngữ website thông qua trang này, admin có thể cài

đặt các gói ngôn ngữ cho website. Để cài đặt gói ngôn ngữ chúng ta làm

như sau:

Download gói ngôn ngữ tại:

http://extensions.joomla.org/extensions/languages/translations-for-

joomla

http://extensions.joomla.org/extensions/languages/translations-for-joomla

http://extensions.joomla.org/extensions/languages/translations-for-joomla

See how easy it is!

WHAT IS JOOMLA?

17


Sau khi download về máy bạn tiến hành cài đặt : Phần mở rộng

Cài đặt/Tháo gỡ Chọn tệp tin Tải lên & Cài đặt

Một website có thể nhiều ngôn ngữ bạn có thể chọn ngôn ngữ mặc định

cho website như sau:

Trên thanh menu bạn chọn: Phần mở rộng Quản lý ngôn ngữ

Chọn ngôn ngữ mặc định cho website

Tương tự như vậy chúng ta cũng có thể cài đặt và chọn ngôn ngữ mặc

định cho trang Admin

See how easy it is!

WHAT IS JOOMLA?

18


4. Quản lý giao diện

o Trang “Quản lý giao diện” giúp admin chọn template mặc định cho site

cũng như là có thể chỉnh sửa hoặc xem trước template đó.

o Chọn: “Phần mở rộng Quản lý giao diện” để vào trang quản trị

Để chọn giao diện mặc định cho website bạn chỉ cần chọn

“Template” sau đó chọn “Mặc định”

Muốn sửa template nào bạn chỉ cần chọn template đó và chọn

“Sửa”

See how easy it is!

WHAT IS JOOMLA?

19


5. Quản trị nội dung

Nội dung của một trang Joomla được quản lý thông qua cấu trúc 3 tầng:

Nhóm Tin

Chủ đề con

Bài viết

Một website sẽ bao gồm một hoặc nhiều “Nhóm tin”, trong mỗi “Nhóm

tin” sẽ bao gồm một hoặc nhiều “Chủ đề con”, và các “Bài viết” được

đặt trong từng “Chủ đề con”

Để quản lý “Nhóm tin” trên thanh menu chọn: Nội dung Quản

lý nhóm tin

Để quản lý “Chủ đề con” trên thanh menu chọn: Nội dung

Quản lý chủ đề con

Để quản lý “Bài viết” trên thanh menu chọn: Nội dung Quản lý

bài viết

See how easy it is!

WHAT IS JOOMLA?

20


Trong trang “Quản lý bài viết” admin có thể quản lý toàn bộ các bài viết

của website. Admin có thể chỉnh sửa một bài viết, thêm mới một bài viết hay

cũng có thể di chuyển bài viết từ “Chủ đề con” này sang “Chủ đề con” khác,..

Thêm một bài viết mới: Để thêm một bài viết mới thì trong trang “Quản

lý bài viết” ta chọn “Thêm mới”

See how easy it is!

WHAT IS JOOMLA?

21


6. Quản lý menu

Quản lý các menu của website. Admin có thể thêm, xóa, sửa các menu.

Chúng ta sẽ tạo ra các “Danh mục menu”, admin có thể cho “Danh mục

menu” hiện ra trang chủ ở các vị trí tùy ý theo Layout của website

7. Quản lý Module, Component 7.1. Quản lý Module

Module Joomla thường được cài đặt để biểu diễn nội dung trang

web hoặc là các media lên trang chủ website hoặc các trang trong

của website.

Để vào “Quản lý Module” trên thanh menu admistrator ta chọn:

Phần mở rộng Quản lý Module

See how easy it is!

WHAT IS JOOMLA?

22


Admin có thể dễ dàng thêm, xóa, sửa các module, cấu hình

hiển thị vị trí của module ra ngoài website

7.2. Quản lý Component

Cho phép admin cấu hình, tinh chỉnh các chức năng của các

Component được cài đặt vào website

See how easy it is!

WHAT IS JOOMLA?

23


Bảng quảng cáo: Component “Bảng quảng cáo” để tạo ra các

banner quảng cáo đăng trên site, hỗ trợ khi người dùng click vào

banner sẽ trỏ đến một url nào đó. Ngoài ra component này còn hỗ

trợ đếm số lượt click vào banner quảng cáo giúp admin quản lý

được độ hiệu quả của banner

Liên hệ: Component “Liên Hệ” cho phép bạn tạo thông tin liên hệ

của website, bạn có thể thêm tên, địa chỉ, số điện thoại, fax,…

News Feed: Cho phép bạn thêm những feed lấy từ website khác về

trên website của bạn

Thăm dò: Cho phép bạn tạo những bản thăm dò cho người dùng

website bình chọn

Tìm kiếm: Chức năng tìm kiếm cho website của bạn

Liên kết web: Cho phép bạn thêm những link của các website

khác lên trang của bạn

See how easy it is!

WHAT IS JOOMLA?

24


III) Advance Joomla 1. HTML, CSS, Javascript

1.1. HTML

Trong thực tế trang Web thường có 2 loại là web tĩnh và web

động. Trang web tĩnh là trang HTML không kết nối cơ sở dữ

liệu(csdl) , ngược lại trang web động là trang có kết nối csdl

như trang PHP, ASP, JSP,…. Nhưng mà nó chung 1 trang web

dù tĩnh hay động nếu bạn muốn biểu diễn dữ liệu thì bạn cần

phải dùng đến các thẻ HTLM trong đó . Như vậy các thẻ

HTML rất quan trọng trong một trang web của bạn .

Cấu trúc một trang HTML cơ bản

Như đã nói trên HTML để biểu diễn dữ liệu trang web và được

trình bày trên các Web Browser, và một trang HTML được lưu

với phần mở rộng là .htm hay .html .

Cấu trúc trang web HTML được bắt đầu bởi thẻ mở <html> và

kết thúc bằng thẻ đóng </html> . Bạn muốn làm chủ được

HTML thì bạn cần phải nắm vững được các thẻ của HTML ,

các thẻ trong HTML thường có 2 loại thẻ là :

- Loại thẻ mở có kèm theo thẻ đóng . Ex: <a>..</a>,

<body>…</body>,….

- Loại thẻ mở mà không có thẻ đóng . Ex: <img>,<br>,<hr>,…..

Nói chung là HTML rất dễ dàng để các bạn tiếp cận với nó ,

mình sẽ đưa ra cho các bạn một cấu trúc của 1 trang HTML cơ

bản

//cấu trúc một trang HTML cơ bản

<html>

<head>

<title>Wellcome to Website </title> //title của một trang

web cơ bản

<meta joomla, website> //thẻ này dung để đưa thông tin

trang web dzo bộ máy tịm kiếm

See how easy it is!

WHAT IS JOOMLA?

25


</head>

<body>

<b>HTML và các thẻ cơ bản</b>

</body>

</html>

Note: Các thẻ trong HTML đều không phân biệt chữ hoa

,chững thường.

Các thẻ HTML thông dụng

1) Thẻ <head>…</head>

Định nghĩa các mô tả về trang HTML.Tất cả các thông tin

tong thẻ này đều không xuất hiện trên trang web . Các bạn

có thể chẹn thêm các thẻ bên trong thẻ head như

<title>,<meta>,<link>,…

Ex:

<head>

<title>Wellcome to www.thegioimang.org</title>

//title của một trang web cơ bản

<meta Diễn đàn Mạng Máy Tính,

Network,groupw3> //thẻ này dung để đưa thông tin trang

web dzo bộ máy tịm kiếm

</head>

2) Thẻ <title>….</title>

Title cho phép bạn trình bày chuỗi thông tin của trang web

lên trên thanh tiêu đề của trang web mỗi khi web chạy .

Ex: <title>Wellcome to website </title>

3) Thẻ <body>…</body>

Trong HTML thì tất cả các thông tin trong thanh <body>

đều được biểu thị lên trên trang web để người sử dụng nhìn

thấy . Trong thẻ <body> này bạn cần kết hợp thật nhuần

See how easy it is!

WHAT IS JOOMLA?

26


nhuyễn các thẻ với nhau để tạ nên một trang web hoàn

thiện

4) Các thẻ định dạng

Trong phần nà thì mình chỉ giới thiệu đến các bạn các thẻ

thông dụng dùng để hỗ trợ trong việc định dạng văn bản

trên web HTML. Một số thẻ đặc biệt các bạn nghiên cứu

thêm nha .

4.1. Thẻ <div>..</div>

Cho phép bạn định dạng một đoạn văn bản bằng các thuộc

tính của nó . Ví dụ như bạn muốn canh giữa một đoạn văn

bản thì bạn dùng thuộc tính algin=”center”:

<div algin=”center”>

Chào mừng bạn đến với website.

</div>

4.2. Thẻ <p>…</p>

Thẻ này cũng tương tự như thẻ <div> nhưng mà khi kết

thúc thẻ </p> thì dữn liệu trình bày sẽ tự động xuống hàng .

Nếu như bạn sử dụng 2 thẻ <p> liên tiếp thì sau khi kết

thúc thẻ </p> thứ nhất sẽ cách thẻ thứ 2 một khoảng nhất

định.

Ngoài ra ta có thể sử dụng thẻ <br> dùng để xuống hàng .

<br> là thẻ không có thẻ đóng và khi xuống hàng nó sẽ

không cách 1 đoạn giống như thẻ <p> mà nó sẽ hiển thị ở

hàng tiếp theo.

4.3. Thẻ <font>…</font>

Thẻ <font> dùng để các bạn định dạng font chữ của đoạn

văn bản nằm trong tag này bằng các thuộc tính của nó như :

- Color: định dạng màu chữ cho đoạn văn bản. Màu sắc

thì các bạn có thể biểu diễn bằng cách dùng tên màu

bằng tiếng anh như: red,blue,green,…hoặc các bạn

cũng có thể lấy mã màu chèn dzo như

color=”#66CCFF”.

See how easy it is!

WHAT IS JOOMLA?

27


- Size: định dạng cỡ chữ

- Face: định dạng kiểu chữ cho văn bản như: arial,time

new romal,tohoma,..

4.4. Một số thẻ đị dạng văn bản thông thường:

<H1> …</H1> : Headers (H1 to H6) (TIÊU ĐỀ - 6

cấp từ 1 đến 6)

<P> …</P> : Paragraphs (Xác định một đọan văn

bản)

<UL >… </UL>: Un order List (danh sách - Bullet )

<OL >… </OL>:Order List (danh sách - Numbering)

<HR> : Horizontal Rules. (chèn đường kẻ ngang).

<BR> : line breaks ( ngắt dòng)

< U >…</ U> : underline (gạch chân văn bản)

< I >…</I> : Italic (Văn bản Nghiêng)

< B >…</ B> :Bold (gạch chân in đậm)

• Khoảng trống (trong trường hợp muốn có nhiều hơn 1

ký tự trống):

• Dấu nhỏ hơn (<) và lớn hơn (>): < >

• Dấu ngoặc kép (“): "

• Ký hiệu : ©

• …

5) Thẻ định dạng bảng <table>…</table>

See how easy it is!

WHAT IS JOOMLA?

28


Khi bạn muốn trình bày một bảng dữ liệu lên web chẳng hạn

như trình bày bảng điểm của sinh viên hay là danh sách các

sinh viên thì bạn cần phải dùng đến thẻ này . Sau khi khai bào

thẻ <table> thì bạn cần quan tâm đến các thẻ hàng <tr>..</tr>

và thẻ cột <td>…</td>

Và bạn cần quan tâm đến các thuộc tính của nó . Đây là một số

thuộc tính của thẻ <table>:

– BORDER=“x” : kích thước viền

– BGCOLOR: màu nền, ALIGN: canh chỉnh

– WIDTH,HEIGHT : kích thước cao, rộng

– CELLPADDING, CELLSPACING : khoảng cách giũa các

hàng và cột

– ROWSPAN, COLSPAN: trộn các dòng hoặc cột

– <TR>: dòng, <TD> cột, <TH>: heading

– <CAPTION>: tiêu đề mô tả bảng

– bgcolor=“màu”: màu nền của bảng

– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho

bảng. Nên sử dụng đường dẫn tương đối nếu có thể

Note: Khi thiết kế table các bạn chỉ cần quan tâm đến chiều

rộng chứ không cần quan tâm đến chiều cao của <table> vì

chiều cao của nó phụ thuộc vào độ dài sữ liệu của ta. Tương tự

thì thẻ hàng <tr> thì ta chỉ quan tâm đến chiều cao ,còn thẻ cột

thì ta chỉ quan tâm đến thẻ rộng.

Ex: Để các bạn hình dung rõ hơn về table ta đưa ra một ví dụ

để các bạn làm thì các bạn sẽ hiểu được table. Các bạn hãy xây

dựng trang web giống như hình dưới:

See how easy it is!

WHAT IS JOOMLA?

29


Code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />

<title> HTML và các thẻ cơ bản </title>

</head>

<body>

<table border="1" cellspacing="1" cellpadding="7"

width="500">

<tr>

<td width="15%" align="top" rowspan="2">

STT

</td>

See how easy it is!

WHAT IS JOOMLA?

30


<td width="35%" align="center" rowspan="2">

Họ & Tên

<td width="50%" align="top" colspan="2">

<center>profile</center>

</td>

</tr>

<tr>

<td width="25%" align="center">

MSSV

</td>


Quê Quán

</td>

</tr>

<tr>


001

</td>


Nguyen Van A

</td>


0511125

</td>


See how easy it is!

WHAT IS JOOMLA?

31


Sài Gòn

</td>

</tr>

</tr>

<tr>


002

</td>


Nguyen Van B

</td>


0511126

</td>


Hà Nội

</td>

</tr>

<tr>


003

</td>


Nguyen Van C

</td>

See how easy it is!

WHAT IS JOOMLA?

32



0511127

</td>


Hà Nội

</td>

</tr>

</table>

<table>

</table>

</body>

</html>

5) Thẻ Hình Ảnh <img >

Thẻ này dùng để chèn hình ảnh vào trong trang web , các bạn

có thể thêm các thuộc tính chiều cao ,độ rộng cho hình ảnh chú

thích cho hình ảnh(alt). Thẻ <img> là thẻ không có thẻ đóng.

Ex: <img src=”joomla.gif” alt=”group w3 ” with=”500”

hight=”450” boder=”0”>

6) Thẻ Liên Kết <a>…</a>

Khi mà bạn cần lien kết đến mộ trang web hay một địa chỉ

email thị bạn có thể dùng thẻ <a> này để liên kết .

Để cho người dùng có thể chọn đường liên kết thì bạn có thể sử

dụng tên lien kết hay cũng có thể dùng hình ảnh để biểu diễn

cho liên kết .

7) Thẻ Input <input>

Thẻ <input> là thẻ không có thẻ đóng . ,nó cho phép người

dùng nhập dữ liệu hay chỉ thực thi một nhiệm vụ nào đó .

Trong thẻ input bao gồm các thuộc tính : text ,

See how easy it is!

WHAT IS JOOMLA?

33


password,submit,button,reset,checkbox,radio,hidden,image.Sau

đây ta trình bày cho các bạn về các thuộc tính trên của thẻ

<input>

7.1. Thẻ input dạng text

Thẻ này cho phép người dùng nhập dữ kiệu dạng text. Ta có

thể giới hạn số lượng chữ bằng option “maxlenght” ,giới hạn

chiều dài theo kích thước của table bằng option “size” hay có

thể gán giá trị mặc định bằng option “value”.

Ex: <input type=”text” name=”Fullname” value=”luongkhiem”

size=”20” maxlenght=”30”>

7.2. Thẻ input dạng password

Cái này cũng tương tự như dạng text , nó cho phép người dùng

nhập Password đăng nhập.Và các giá trị mà người dùng nhìn

thấy chỉ ở dưới 2 dạng * hay . tùy thuộc vào trình duyệt web

của bạn

Ex: <input=”password” name=”nhappassword” value=””

size=”20” maxlenght=”30”>

7.3. Thẻ input dạng checkbox

Cho phép chọn một lựa chọn trong một nhóm lựa

chọn được đưa ra.

Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.

Thẻ: <input>: Mỗi ô cần 1 thẻ

Thuộc tính:

– name=“tên_đt”: quan trọng. Các đối tượng cùng

tên thì thuộc cùng nhóm.

– type=“radio”

– value=“giá trị”: đây là giá trị chương trình sẽ

nhận được nếu NSD chọn ô này.

– checked: nếu có thì nút này mặc định được chọn

See how easy it is!

WHAT IS JOOMLA?

34


7.4. Thẻ input dạng radio



Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.


Thuộc tính:

– name=“tên_đt”: quan trọng. Các đối tượng cùng tên

thì thuộc cùng nhóm.


– value=“giá trị”: đây là giá trị chương trình sẽ nhận

được nếu NSD chọn ô này.


7.5. Thẻ input dạng submit

Thẻ này cho phép bạn chấp nhận dữ liệu nhập trong

các thẻ input ở trang Web. Có nghĩa là khi các bạn

đồng ý chuyển dữ liệu lên bằng phương thức post

(trong form) hay get (trong query string)

Ex: <input type=”submit” value=”save”

name=”submit”>

7.6. Thẻ dạng Button



Trên 1 form có thể có nhiều nhóm lựa chọn kiểu

này.


Thuộc tính:

– name=“tên_đt”: quan trọng. Các đối tượng cùng

tên thì thuộc cùng nhóm.


See how easy it is!

WHAT IS JOOMLA?

35


– value=“giá trị”: đây là giá trị chương trình sẽ

nhận được nếu NSD chọn ô này.


7.7. Thẻ input dạng Reset

Thẻ reset cho phép bạn phục hồi những dữ liệu

nhập hay chọn trong thẻ input ,select ,textarea để

trở về trạng thái ban đầu.

Ex: <input type=”reset” value=”cancel”

name=”reset”>

7.8. Thẻ input dạng Combo Box (Drop-down menu)

Bao gồm một danh sách có nhiều phần tử. Tại một

thời điểm chỉ có 1 phần tử được chọn

NSD có thể chọn 1 phần tử trong danh sách xổ

xuống bằng cách kích vào mũi tên bên phải hộp

danh sách.

Thẻ tạo hộp danh sách:

<select>Danh sách phần tử</select>

Thuộc tính:

name=“tên_ĐT”: quan trọng

Thẻ tạo 1 phần tử trong danh sách:

<option>Tiêu đề phần tử</option>

Thuộc tính:

– value=“giá trị”: giá trị chương trình nhận được

nếu phần tử được chọn

– selected: nếu có thì phần tử này mặc định được

chọn

7.9. Thẻ input dạng ListBox

See how easy it is!

WHAT IS JOOMLA?

36


Tương tự như Combo box, tuy nhiên có thể nhìn

thấy nhiều phần tử cùng lúc, có thể lựa chọn

nhiều phần tử

Thẻ: <select>…</select>

Thuộc tính: tương tự của combo tuy nhiên có 2

thuộc tính khác:

– size=“số dòng”

– multiple: cho phép lựa chọn nhiều phần tử

cùng lúc

Thẻ <option>…</option> tương tự của combo

box

7.10. The input dạng Hộp nhập văn bản nhiều

dòng (TextArea)

Cho phép nhập văn bản dài trên nhiều dòng.

Thẻ:

<textarea>

Nội dung mặc định

</textarea>

Thuộc tính:

– name=“tên_ĐT”: quan trọng

– rows=“số dòng”

– cols=“số cột”

rows tính theo số dòng văn bản, cols tính

theo số ký tự chuẩn trên dòng.

7.11. Thẻ input dạng Hidden

Là một dạng thẻ dạng text nhưng không cho người dùng thấy

dữ liệu. Với thẻ này thì các bạn cần phải định nghĩa trước một

giá trị cụ thể trong trong thẻ này . Với thẻ này thì bạn sẽ làm

See how easy it is!

WHAT IS JOOMLA?

37


những cái tiềm ẩn như : nếu như bạn đăng nhập quá 5 lần thì sẽ

khóa đăng nhập 15 phút rùi mới tiếp tục cho bạn đăng nhầp

Ex: <input type=”hidden” name=”textform” value=”1”>

8) Thẻ Form <form>…</form>

Ở phia trên chúng ta đã được giới thiệu các thẻ input nhưng

chắc hẳn các bạn chưa biết rằng các thẻ input này sẽ được nhập

ở đâu? Câu trả lời ở đây chính là thẻ <form>. Khi các bạn

submit dữ liệu nhập từ các Web Browser lên server bằng 2

phương thức Post và Get trong thẻ form .

Một số chú ý đối với thẻ form:

Sử dụng để chứa mọi đối tượng khác

Không nhìn thấy khi trang web được hiển thị

Quy định một số thuộc tính quan trọng như method, action.

Thẻ tạo form:

<form>…</form>

Các thuộc tính:

– name=“tên_form”: Không quan trọng lắm

– action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương

đối nếu nằm trong cùng 1 web

– method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:

• GET (mặc định)

• POST

Ex; Một ví dụ cho thẻ form dùng để upload tập tin lên

server.

<form entype=”multipart/formdata” action=”upload.php”

name=”form” method=”post” onsubmit=”return

upload();”>

See how easy it is!

WHAT IS JOOMLA?

38


Lời kết : HTML có thể nói là ngọn nguồn của mọi trang web ,

tất cả các trang web dù bằng ngôn ngữ nào cũng phải đều sử

dụng đến HTML.

1.2. CSS

1.2.1. CSS là gì

CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là

cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu

sắc...) cho một tài liệu Web

1.2.2. Một số đặc tính cơ bản của CSS

1. CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định

các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận

tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file

riêng có phần mở rộng là ".css"

CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file

CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều

trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn

thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng

lại trên nhiều trang khác.

2. Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt

đoạn CSS của bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra

file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt

chúng trong từng thẻ HTML riêng biệt

Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng

khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.

1. Style đặt trong từng thẻ HTML riêng biệt

2. Style đặt trong phần <head>

3. Style đặt trong file mở rộng .css

4. Style mặc định của trình duyệt

Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.

3. CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu">

đã được khai báo ở đầu file css với các thuộc tính như sau:

#vidu {

width: 200px;

height: 300px;

}

See how easy it is!

WHAT IS JOOMLA?

39


Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ

<div id="vidu"> với các thuộc tính.

#vidu {

width: 400px;

background-color: #CC0000;

}

Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:

#vidu {

width: 400px; /* Đè lên khai báo cũ */

height: 300px;

background-color: #CC0000;

}

2. Template Joomla

2.1. Tổng quan về template Joomla

Hệ thống Template Joomla là một hệ thống khá dễ trong họ

Content Managerment System (CMS). Dưới đây là một cấu

trúc cơ bản của một template Joomla:

/templates

/basic_template

/css

template_css.css

/images

index.php

template_thumbnail.png

templateDetails.xml

Trong đó:

index.php

Đây là file giàn trang template.

template_css.css

Css stylesheet cho template (trang định kiểu).

templateDetails.xml

File siêu dữ liệu (metadata) theo định dạng XML.

template_thumbnail.png

Một mặt màn hình (screenshot) thu nhỏ của template,

thường khoảng rộng 140 pixel và cao 90 pixel.

See how easy it is!

WHAT IS JOOMLA?

40


2.2. Cài đặt template Joomla

Để cài đặt template Joomla bạn chọn: Phần mở rộng Cài đặt/

Tháo gỡ Chọn template Tải lên và cài đặt

Sau khi cài đặt template xong bạn cần chọn template đó làm mặc

định để chạy template đó

Bạn chọn: Phần mở rộng Quản lý giao diện Chọn giao diện

Chọn mặc định

See how easy it is!

WHAT IS JOOMLA?

41


2.3. Quản lý Template

Với chức năng quản lý Template, Admin có thể chỉnh sửa, cấu

hình chức năng giao diện toàn bộ trang web theo ý của mình.

Để chỉnh sửa template thì trong trang “Quản lý giao diện” bạn

click vào giao diện cần chỉnh sửa sẽ được như sau:

Chi tiết: Thông tin về tên của template và mô tả về

template của bạn

Chỉ định menu: Chức năng này giúp ta xây dựng một trang

website đa giao diện, chúng ta có thể chọn giao diện này sẽ

được sử dụng ở những menu nào thì giao diện đó chỉ chạy

trên menu đó.

Các tham số: Khu vực để bản cấu hình giao diện của mình,

tùy theo mỗi giao diện sẽ được cấu hình khác nhau

Xem trước: Chức năng xem trước giao diện để dễ dàng

chỉnh sửa trước khi lưu lại giao diện

Sửa HTML: Admin có thể chỉnh sửa html của template

trực tiếp trong trang quản trị

Sửa CSS: Chỉnh sửa CSS của giao diện

Lưu lại: Sau khi chỉnh sửa xong giao diện ta có thể nhấn

“Lưu lại” để hoàn tất

See how easy it is!

WHAT IS JOOMLA?

42


Áp dụng: Bạn muốn lưu lại cấu hình và muốn tiếp tục

chỉnh sửa thì bạn chọn chức năng này

3. Component

3.1. Cài đặt Component

Cài đặt Component cũng tương tự như việc cài đặt các module,

trên thanh menu ta chọn: Phần mở rộng Cài đặt/Tháo gỡ

Chọn component cần cài đặt Tải lên và cài đặt

3.2. Một số Component thông dụng

3.2.1. Component Gallery

Các “component gallery” của Joomla giúp các bạn

có thể xây dựng cho mình một website biểu diễn

hình ảnh như các website về nội thất, thời trang, các

shop,…

Joomla có một cộng đồng phát triển các component

khá lớn, để download các “component gallery” tại:

http://extensions.joomla.org/extensions/photos-a-

images/photo-gallery

Joomla có rất nhiều “component gallery” nhưng có

một số component khá phổ biến và thông dụng như:

http://extensions.joomla.org/extensions/photos-a-images/photo-gallery

http://extensions.joomla.org/extensions/photos-a-images/photo-gallery

See how easy it is!

WHAT IS JOOMLA?

43


Automicon Gallery, sigPlus, Phoca Gallery,

Jphoto,…

See how easy it is!

WHAT IS JOOMLA?

44


3.2.2. Component Docman

Bạn muốn xây dựng một trang web chia sẻ tài liệu,

bạn muốn xây dựng một website giáo dục với các

bài giảng được chia sẻ trên website hay là bạn muốn

chia sẻ những tài liệu hướng dẫn sử dụng của sản

phẩm trong công ty,….

Component Docman là một Component của Joomla

giúp chúng ta có thể chia sẻ các tài liệu trực tuyến.

Component này hỗ trợ chia sẻ các loại file, thống kê

file, số lượt download,…

Bạn có thể download component này tại:

http://www.joomlatools.eu/docman-14.html

3.2.3. Component Joomfish

Ngày nay website đã dần trở thành bộ mặt của một

doanh nghiệp, mọi thông tin đến người dùng đều

http://www.joomlatools.eu/docman-14.html

See how easy it is!

WHAT IS JOOMLA?

45


được truyền tải nhanh nhất thông qua kênh website.

Cũng như là xu thế hội nhập thì một website không

chỉ là một ngôn ngữ mà đòi hỏi cần thêm một vài

ngôn ngữ nữa.

Joomfish được xây dựng phục vụ cho việc xây dựng

một website đa ngôn ngữ, ngoài ngôn ngữ mặc định

của website Joomfish hỗ trợ cho bạn dịch ra các

ngôn ngữ khác

Bạn muốn website mình chạy bao nhiêu ngôn ngữ

thì trước tiên các bạn cần phải cài đặt các gói ngôn

ngữ đó trong “Quản lý ngôn ngữ”. Joomfish sẽ có

chức năng giúp bạn dịch từ ngôn ngữ mặc định sang

các ngôn ngữ khác

Bạn download Joomfish tại:

http://www.joomfish.net/downloads

3.2.4. Component Virtual Mart

Joomla không chỉ dừng lại ở CMS mà còn phát

triển website giới thiệu sản phẩm và hơn nữa là

website thương mại điện tử

http://www.joomfish.net/downloads

See how easy it is!

WHAT IS JOOMLA?

46


Virtual Mart là component có thể nói là đứng đầu

trong mảng component sản phẩm và thương mại

điện tử cho Joomla.

Virtual Mart hỗ trợ đầy đủ các tính năng giới thiệu

sản phẩm, bán hàng trực tuyến, quản lý đơn hàng,

phiếu giảm giá,…

Các bạn download Virtual Mart tại:

http://virtuemart.net/downloads?task=view

http://virtuemart.net/downloads?task=view

See how easy it is!

WHAT IS JOOMLA?

47


4. SEO

4.1. Giới thiệu về SEO

SEO hay tối ưu hóa Website cho máy tìm kiếm nằm

trong chiến dịch quảng bá Website là từ viết tắt của "Search

Engine Optimization" hoặc "Search Engine Optimizers".

Mục đích của SEO là nhằm cải thiện lượng truy cập về cả

chất lẫn lượng cho Website, trực tiếp đến từ trang kết quả

của các máy tìm kiếm (Google, Yahoo, Microsoft) với một

số từ khóa nhất định.

Phương pháp tối ưu SEO: Google, Yahoo hay Bing là các

bộ máy tìm kiếm vì thế nó xây dựng các tiêu chuẩn để đánh

giá, xếp hạng website. Một website càng đáp ứng được

nhiều các tiêu chuẩn của máy tìm kiếm thì càng được đánh

giá tốt, cơ hội lên trên TOP sẽ cao hơn. Hiện nay, có một số

cách thức quan trọng sau để thực hiện SEO:

Title - Tiêu đề trang: khai báo thẻ Page Title của

website ngắn gọn, súc tích, duy nhất trong

từng webpage. Các máy tìm kiếm đánh giá rất cao

thẻ Page Title do nó là những gì xúc tích, hàm chứa

nhất của website.

Description- Thẻ mô tả: Nó giống như một đoạn

tóm tắt nội dung của website. Khi khai báo

Description cũng phải viết ngắn gọn, xúc tích.

Desciption thông thường là đoạn text màu đen hiện

ra bên trên đường link, bên dưới tiêu đề trang trong

phần kết quả tìm kiếm.

Từ khoá: Sử dụng thẻ meta keyword để thông báo

các từ khóa chính của website tối các công cụ tìm

kiếm. Là một cách giúp công cụ tìm kiếm nhanh

chóng hiểu được nội dung chính của website.

URL: Phải xây dựng một URL tĩnh - hay URL thân

thiện với người dùng và máy tìm kiếm. Trong URL

thân thiện không nên có các ký tự đặc biệt (%, $, ~,

...) mà phải giống như đường dẫn thư mục trong

window. Việc này làm các công cụ tìm kiếm dễ

dàng hơn trong việc tìm và thu thập nội dung trong

website.

http://www.vietseo.net/services/sem-seo-keyword/

http://vi.wikipedia.org/wiki/T%E1%BB%AB_kho%C3%A1

http://vi.wikipedia.org/wiki/URL

See how easy it is!

WHAT IS JOOMLA?

48


Dung lượng website: Máy tìm kiếm lưu trữ nội

dung website trong Server riêng của nó. Nên

website càng nhẹ (dưới 100KB) sẽ tốt hơn cho việc

lưu trữ thông tin và quét thông tin của máy tìm

kiếm.

Xây dựng Backlink: Là việc trao đổi link, xây dựng

liên kết tới các website khác. Việc trao đổi này dựa

trên trao đổi với các website có cùng nội dung chủ

đề và chất lượng tốt thì sẽ có hiệu quả cao hơn.

Submit Website vào danh bạ web: danh bạ website

nổi tiếng và cần thiết nhất là của Google, Yahoo.

Hiện nay Google đã không còn đánh giá cao việc

khai báo vào các danh bạ web do càng về sau chất

lượng các danh bạ web càng giảm, một số danh bạ

web bắt người đăng ký phải trả tiền.

Phát triển, xây dựng nội dung hướng tới Khách

hàng: Content is King. Máy tìm kiếm sinh ra là để

phục vụ người tìm kiếm trên Internet nên nội dung

là cái nó quan tâm nhất. Những Website có được

nội dung phong phú luôn nằm ở trong TOP đầu.

Chọn lựa từ khóa: Là cách chọn cách từ khóa phù

hợp với nội dung website, phù hợp với việc Search

của người dùng. Từ khóa là đề hỗ trợ máy tìm kiếm

nên chọn lựa từ khóa đúng, chính xác là bước vô

cùng quan trọng, nó quyết định sự thành công của

chiến dịch SEO.

4.2. Tối ưu website Joomla và cài đặt các mod SEO

4.2.1. Tối ưu website Joomla Tạo đường dẫn thân thiện với các công cụ tìm kiếm:

cấu hình trong “Cấu hình chung”

http://vi.wikipedia.org/wiki/Google

http://vi.wikipedia.org/wiki/Yahoo

See how easy it is!

WHAT IS JOOMLA?

49


Bật tính năng nén website bằng Gzip trong cấu hình

chung

Bật Cache website

Việc tối ưu một website quan trọng nhất là phần tối

ưu giao diện website, chúng ta làm sao cho giao

diện càng nhẹ càng tốt, xóa bỏ tất cả các lỗi CSS,

Javascript

Tối ưu hình ảnh flash của website

See how easy it is!

WHAT IS JOOMLA?

50


4.2.2. Cài đặt các mod SEO

Plugin Jacompress: Plugin này giúp nén tất cả các

CSS, Javascript của website, giúp tối ưu về tốc độ

website, giảm dung lượng website

See how easy it is!

WHAT IS JOOMLA?

51


Component sh404SEF: Component này giúp tạo ra

đường link thân thiện với các công cụ tìm kiếm,

việc sử dụng và cấu hình rất dễ dàng

5. Bảo mật Website Joomla

- Thường xuyên cập nhật các phiên bản update mới nhất cho website

Joomla của bạn

- Nên download source Joomla tại http://joomlacode.org

- Trong quá trình xây dựng hoặc chỉnh sửa website chúng ta cần

kiểm tra kỹ source của các module, component, plugin, template

trước khi tiến hành cài đặt sử dụng.

- Xóa tất cả các template, module, component, plugin không sử

dụng

- Bảo vệ kỹ chức trang quản trị administrator để tránh các truy cập

trái phép

- Tăng cường bảo vệ file “configuration.php”

- Chmod quyền đối với thư mục là 755 và file là 644

- Chọn một server an toàn để đặt website mình trên đó hoặc có thể

thuê một server riêng để đặt website mình.

http://joomlacode.org/

See how easy it is!

WHAT IS JOOMLA?

52


- Cài đặt một số module, component security cho website joomla

như: Jdefender, Ksecure,…

The End!

Documents

WHAT IS JOOMLA? - dulieu.tailieuhoctap.vndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · Joomla! được viết bằng ngôn ngữ PHP và kết nối