Thiết kế Web dộng bằng joomla phan 1 + phan 2

chuyên đề tập hợp các bài viết đầy đủ hướng dẫn tự học thiết kế Website bằng Joomla từ cơ bản đế nâng cao. rất chi tiết và dễ học, phù hợp với những người đam mê thiết kế web. Bạn sẽ tự tay thiết kế cho mình một website ưng ý mà không cần phải có nhiều kiến thức chuyên sâu về lập trình.

Thiết kế web động dễ như chơi

BÀI VIẾT NÀY GIÚP BẠN TÌM HIỂU

VÈ J00MLA - HỆ QUẢN TRỊ NỘI

DUNG ĐƯỢC NHIỀU NGƯỜI ƯA

DÙNG KHI THIẾT KẾ TRANG WEB

HỆ QUẢN TRỊ NỘI DUNG WEB

(CMS) LA Gi?

Nếu chỉ cần tạo ra một trang web

tĩnh với nội dung cố định và không thay

đổi trong một thời gian dài, có lẽ, bạn sẽ

không cần đến một hệ quản trị nội dung

nào cả Nhưng nếu bạn muốn trang

web của bạn luôn được cập nhật thông

tin hàng tuần, hàng ngày, hoặc hàng

giờ, cách xây dựng web tĩnh sẽ không

thể nào đáp ứng nổi như cầu của bạn,

và thứ bạn cần sẽ là một hệ quản trị nội

dung web Hệ quản trị nội dung web

(Web Content Management System),

hay thường được gọi tắt là CMS, la phan

mềm dùng để theo dõi các thông tin

đang có trên website của bạn Nó hoạt

động giống như kiểu một thư viện theo

dõi các cuốn sách đang có của mình

Phần nội dung được theo dõi có thể là

văn bản đơn thuần, các hình ảnh minh

họa trong web, các đoạn phim video

clip, tài liệu hoặc bất cứ thứ gì khác mà

bạn muốn nó có trên trang web mà mình

đang xây dựng

Ưu điểm nổi bật khi sử dụng CMS là

nó không đòi hỏi bạn phải có kỹ năng

kỹ thuật và kiến thức quản lý Một số ưu

điểm khác khi dùng CMS [a ban có thể

thay đổi nội dung trực tuyến theo chế

độ trực quan (WYSIWYG - What you

see is What you get), ban cling co thé

tạo ra nhiều người dùng với nhiều cấp

độ quản lý khác nhau để cùng xây dựng

và cập nhật thông tin cho một trang nào

đó Việc lưu trữ, tìm kiếm và lập chỉ mục

thường có các công cụ hỗ trợ mạnh mẽ

Việc tùy biến các giao diện được thực

hiện đơn giản và dễ dàng

Mot s6 CMS tiéu biểu là

DotNetNuke, Drupal, Wordpress,

Magento, Joomla/Mambo, Kentico

CMS, PHP-Nuke , NukeViet , Rainbow,

Typo3, Xoops

TAI SAO LAI CHON JOOMLA?

Vì Joomla là một Hệ quản trị nội

dung (CMS) giành được giải thưởng ứng

mẽ Ưu điểm của Joomla là dễ sử dụng

và mở rộng Điều này giúp cho Joomla

xong một trang web mới và hoạt động

Với Joomla, không cần phải là chuyên

gia thiết kế hay chuyên viên lập trình

web, bạn cũng có thể xây dựng những

trang web dành cho khách hàng của

mình một cách nhanh chóng Nếu khách hàng của bạn cần những tính năng

chuyên biệt, Joomla còn có hơn hàng nghìn phần mở rộng (exfensions), hầu hết là miễn phí, theo giấy phép của GPL,

Joomla da va dang được sử dụng

trên khắp thế giới trong nhiều lĩnh vực, từ

các cổng thông tin điện tử, 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ủ, trường học và thông dụng nhất là các website của gia

đình hay cá nhân Một số trang web

nổi tiếng đang dùng Joomla là Đại học

MTV (http:/www.quizilla.com), Chuỗi

nhà hàng IHOP (http:/www.ihop.com), Unesco Việt Nam (http:/www.unesco-

cep.org.vn), Thời trang Châu Á (http://

www.thoitrangchaua.com), Ngân Hàng Đông Nam Á (http:/www.seabank.com

vn), Trường Đại học Tôn Đức Thắng

(http:/Awww.tdt.edu.vn), Tin tức Việt Báo

(http://vietbao.vn) Bạn cũng có thể xem thêm nhiều công ty nổi tiếng khác trên khắp thế giới cũng sử dụng Jloomla để

thiết kế website cho họ tại địa chỉ: http:// community.joomla.org/showcase/

LA LAP TRINH VIEN, BAN SE

CÓ LỢI THẾ GÌ KHI DÙNG JOOMLA?

JOOMLA MODEL VIEW CONTROLLER (MVC)

} jf ia

'WEB SERVER

đứng ngôi không yên vì chảo lứa

Hà Nội nóng kỷ lục trong vòng nửa thế J7) 002, 0V mm |

kỷ wee Nỗi buồn của

“Tính nhật độ tung bình ngày 160,Hà THIẤỔ ~ Nội nóng nhat tir nam 1961, cdn nhiệt ~*~ © Higuain (3p hal-tick gidp

ông NguyỄn Hữu Hải, Trưởng phòng

Sáng nay, Quốc hỏi đã biểu quyết hông - '® Đội hình tiêu biểu các

qua Luật thuế sử đụng đất phi nông nghiệp Theo đó, Luật quy định sẽ chưa thu thuế nhà nhung tang thud sudt cho

‘ign ích đất vượt hạn mức so với dự thảo trước đó

> Lễ hội Việt Nam

Phong Tuc Tap Quan

Các công ty và doanh nghiệp thường

có những yêu cầu vượt xa những tính

năng cơ bản có sẵn của Joomla Trong

những trường hợp đó, các lập trình viên

có thể phát triển thêm các ứng dụng

tích hợp vào Joomla Nền tảng cốt lõi

của ,JJoomla cho phép lập trình viên có

thể dễ dàng và nhanh chóng xây dựng

các ứng dụng như: Hệ thống kiểm soát

tập trung, Công cụ báo cáo dữ liệu, Tùy

chỉnh danh mục sản phẩm, Tích hợp

hệ thống thương mại điện tử Vì Joomla

dựa trên nền PHP và MySQL, nên bạn

có thể xây dựng các ứng dụng mạnh

mẽ trên nền táng mã nguồn mở mà ai

cũng có thể sử dụng, chia sẻ và hỗ trợ

Để có thể hiểu rõ hơn về nền tảng của

Joomla, bạn có thể tham khảo thông tin

tại Cộng đồng phát triển Joomla: http://

developer.joomla.org/

XÂY DỰNG WEBSITE DUNG

JOOMLA, BẮT ĐẦU TỪ ĐÂU ĐÂY?

Việc sử dụng CMS Joomla sé khác

với việc xây dựng trang web tĩnh bằng

mã HTML như trước đây Với web tĩnh,

thường thì sau khi soạn thảo tập tin

,htm, bạn có thể xem thử ngay thành

qua của mình bằng cách mở nó ra trong

một trình duyệt web bất kỳ như Internet

Explorer, mà không cần phải cài đặt

thêm bất cứ thứ gì Muốn xem được nội

dung trang web viét bang Joomla, ban

phải đưa nó vào một máy chủ web nào

đó, có thể là tại chỗ hay trên internet

Máy chủ này cần hỗ trợ ngôn ngữ PHP

và cơ sở dữ liệu MySQL để Joomla có

thể hoạt động được

Có hai cách để bạn thực hiện việc

này, cách thứ nhất là bạn đăng ký vào

một máy chủ web trên internet (miễn

phí hay có phí cũng được), rồi tiến hành

xây dựng thứ nghiệm trang web Joomla

trên đó Cách này khá phức tạp, tốc độ

thường chậm, và đòi hỏi bạn phải luôn

có kết nối internet trong lúc xây dựng thử

nghiệm Cách thứ hai đơn giản hơn, và

cũng phù hợp với người bắt đầu sử dụng

Joomla, la ban cai dat mot may chú web

tại chỗ ngay trên máy tính của mình

Giải pháp được các chuyên gia Jdoomla

hợp bao gồm Apache, MySQL, PHP,

phpMyAdmin giúp cho bạn đơn giản hóa

việc tạo ra một máy chủ web ảo trên

chính máy tính của bạn (thường được gọi

la localhost) Hiện nay đã có thể tải bản AppServ 2.60, tuy nhiên phiên bản này chưa tương thích tốt với Joomla, nên lựa

chọn tốt nhất là bạn cứ sử dụng phiên

bản AppServ 2.5.9 Do máy chủ web

này chạy trực tiếp trên máy của bạn, nên việc thử nghiệm các ứng dụng web động, các đoạn mã PHP, MySQL, cũng sẽ

đơn giản, nhanh, và tiết kiệm hơn trước

khi bạn tải chúng lên máy chủ web thật trên internet Các tính năng tương ứng của bộ bốn phần mềm trong AppServ

là Apache (Phần mềm giả lập máy chủ

web ao), MySQL (Hé quan trị cơ sở dữ ligu), PHP (Phan mém xtrly, thực thi các

doan ma PHP), phpMyAdmin (Ung dung

giúp người dùng thao tác với hệ quản trị cơ sở dữ liệu MySQL thông qua giao

diện đồ họa trên nền web)

Lưu ý là chương trình Appserv

thường va chạm với các phiên bản

IIS (Internet Information Server) của Microsoft, do dùng chung cổng giao tiếp TCP/80 Vì thế, bạn nên cấu hình

lại cho IIS sử dụng một cổng giao tiếp

khác, hoặc tốt hơn hết là gõ bỏ tính năng IIS trong Windows (nếu nó đã được cài đặt), trước khi cài AppServ

Để bắt đầu cài đặt, bạn chạy tập tin

appserv-win32-2,5.9.exe ma ban da tai

về từ bước trên G man hinh Welcome

to the AppServ, ban nhấn Next Tiếp

theo, bạn nhấn ! agree để đồng ý các điều khoản mà chương trình đưa ra Ở

màn hình Choose Install Location, bạn chọn một thư mục cài đặt bất kỳ, nhưng

Nếu bạn đã có sắn một phiên bản của một thành phần nào đó trong máy tính

Của số kế tiếp, Apache HTTP Server

Information, là một bước cài đặt cực kỳ quan trọng Trong mục Server name, bạn

phải gõ vào chính xác từ khóa focalhosi,

dù trong vài phiên bản trước đây của Joomla, bạn có thể gõ một từ khóa bất

kỳ Kế tiếp, trong Administrator's Email Address, bạn nhập địa chỉ email của mình, còn mục Apache HTTP Port thì bạn giữ nguyên như mặc định là 80 Nhấn

Next dé hoàn tất bước này

Trong màn hình cấu hình máy chủ cơ

sở dữ liệu, MySQL Server Configuration,

bạn hãy nhập vào một mật khẩu để quản trị và bảo mật máy chủ này, và ghi nhớ

kỹ mật khẩu đó Do đây chỉ là cài đặt thử nghiệm trên máy tính cá nhân, nên

để cho dễ nhớ, bạn chỉ cần nhập mật khẩu là root ở cả hai myc Enter root

password va Re-enter root password

Sau quá trình cài đặt, bạn nhấn

Finish để kết thúc Để kiểm tra xem việc cài đặt có hoàn tất hay không, bạn mở trình duyệt và nhập vào địa chỉ: http://

localhost hoặc http://127.0.0.1 Nếu trình duyệt hiện ra trang AppServ Open Project tuc là bạn đã thành céng C-

CHIP CHIP IT - THIET KE WEB

Kể từ số 241, e-GHÍP sẽ mở ra chuyên mục mới - Thiết kế weh - hướng dẫn từ căn hản đến nâng cao, mục

đích giúp các bạn chưa hiết gì về lĩnh vực này vẫn có thể tự thiết kế cho mình một trang weh ưng ý

| hoan tat viéc cai dat chuong trinh

AppServ để giả lập một máy chủ

web nhằm phục vụ cho việc thử nghiệm

Joomla Nghĩa là tại thời điểm này, bạn

đã có một trang web tại địa chỉ localhost

hay địa chỉ 727.0.0 1 Nội dung mà bạn

thấy khi dùng trình duyệt kết nối vào địa

chỉ !ocalhost sẽ được lưu ở thư mục Œ:\

AppServ\www (với điều kiện trong bước

trước bạn đã cài AppServ vào thư mục

mặc định Œ:\AppServ Trường hợp thư

mục cài đặt khác thì bạn chuyển sang

thư mục con www tương ứng)

Để chắc chắn rằng đã xác định đúng

thư mục, bạn hãy thử đổi tên tập tin

index.php trong đó thành index2.php

Sau đó, bạn nhấn phải chuột vào vùng

trống, chọn New - Text Document, dat

tén la index.php Trong tap tin index

php mới mỏ ra bằng chương trình

Notepad, bạn nhập vào nội dung bất kỳ,

rồi lưu lại Quay trở lại trình duyệt, bạn

truy cập lại vào trang http://localhost, và

phải thấy trang chủ mới mang đúng nội

dung tap tin index.php ma bạn vừa tạo

ra Trường hợp chưa nhận được kết quả

như mong đợi, bạn phải kiểm tra xem

mình đã vào đúng thư mục chưa, cũng

như tập tin index.php ban tao ra va sta

chữa nội dung đã được lưu lại hay chưa

Package.zip rồi chép toàn bộ nội dung

đó vào thư mục mobile đã tạo phía trên

và truy cập vào địa chi http://localhost/

mobile Màn hình cài đặt Joomla sẽ

xuất hiện, ở phần Select Language,

bạn chọn ngôn ngữ cài đặt là English

(US), sau đó nhấn Next Về phần thay

đổi giao diện trang web sang tiếng Việt,

chúng ta sẽ thực hiện sau bằng cách cài đặt thêm gói mở rộng

Steps Pre-installation Check

‘ay me may ogee fei sr

Tiếp theo là màn hình về các điều

khoản bản quyền của Joomla, bạn nên đọc để hiểu thêm, rồi nhấn Next dé tiếp tục Màn hình tiếp theo là bước cài

đặt quan trọng nhất trong Joomla vì nó

liên quan đến cơ sở dữ liệu (database), phần cốt lõi của một trang web động

Mục Database Type: bạn chọn

mysql, vì máy chủ web ảo AppServ của chúng ta hỗ trợ sẵn loại cơ sở dữ liệu này Về sau khi đưa lên máy chủ web

thật, bạn cũng cần tìm máy chủ nào hỗ trợ hệ cơ sở dữ liệu tương tự Mục Host

Rmeweenoe amrmmemnnenm seen g | Trong phan cai đặt

_ teen SẼ Gv q 4 trước, chúng ta

CÀI ĐẶT JOOMLA = a | tai khoan nao ca Vi

Bước kế tiếp cần thực hiện là chúng ES Xe tnnareneeo | | vay, ban ctf dung tai

ta tiến hành cài đặt Joomla vào máy „ xo | | khoan mac dinh có

khá đơn giản Đầu tiên bạn cần tải Serene | nhất của hệ cơ sở dữ

chương trình Joomla Joomla_ 1.5.18- = Sete „| - liéu nay la root Phan

Stable-Full_Package.zip tu dia chi:

http://downloads.joomlacode.org/

frsrelease/5/1/1/51111/Joomla_1.5.18-

Stable-Full_Package.zip hay http://

tinyurl.com/2a3p35s

Tiếp theo, bạn tạo một thư mục mang

tên bất kỳ, ví dụ như mobile trong thư mục

C.\AppServ\www Tên thư mục vừa tạo

sẽ là một phần của đường dẫn vào trang

web của chúng ta sau này, nên bạn cần

chọn một từ ngắn gọn dễ nhớ mà thôi

Cuối cùng thì bạn giải nén tập tin

Joomla Jdoomla_ 1.5 18-Stable-Full_

Ở màn hình tiếp theo, Joomla sẽ

kiểm tra các thiết lập của hệ thốn

để đáp ứng các yêu cầu cài đặt 5

mục Pre-insiallation check, nếu có

bất kỳ thiết lập nào bị đánh dấu đỏ, bạn phải tìm cách thiết lập lại Ở mục

Recommended Settings, đây là phần cấu hình đề nghị của Joomla Nếu

muốn thực hiện lại quá trình kiểm tra

sau khi sửa chữa một thông số nào đó,

bạn bấm nút Check Again Nếu đã kiểm

tra xong, bạn nhấn Next

mật khẩu của tài

khoản root chúng ta cũng đã xác định lúc cài đặt AppServ (phần cấu hình MySQL) la root, nén bạn cứ nhập root

vào mục Password là xong

Tên của cơ sở dữ liệu dành cho trang web cũng rất quan trọng, vì thế trong

muc Database Name ban hay dat một

cái tên thật dễ nhớ và đặc trưng cho nó

Trong ví dụ làm trang web mobile phía trên thì chúng ta sẽ đặt tên cho nó là

db_mobile là hợp lý nhất Sau đó, bạn nhấn Next để nhảy qua bước kế tiếp.

Database Configuration

Connection Settings:

7 ‘Serge ona toon ya wv eohestos exy Basle Settings

3 :Ueease eaten khe cnforaem ome var teres pees NHAC HE

atanase cere Basle setungs ostname anal

recat, Select tne of datiboe han he do Sonat The Uae

(eel be Pes root

6:Conhgaraben

» Ađianced telngs aro abl pret tbe ed er emi! raat

oon eee etre reamed une the HUE 2.0 Lees

đặt Bạn nhấn OK để tiếp tục, và cuối cùng

khi màn hình thông báo quá trình cài đặt doomla thành công, bạn hãy đóng trình duyệt lại

Trong bước cấu hình thiết lập các

thông số FTP, tạm thời bạn cứ giữ

nguyên như mặc định và nhấn Next

Nguyên nhân là chúng ta đang cài

đặt Joomla lên máy chủ ảo AppServ,

nên việc tải nội dung hay hình ảnh

lên trang web của mình bằng giao

thức FTP là không cần thiết Về sau,

khi cấu hình Joomla trên máy chủ

thật trên Internet, chúng ta sẽ chú ý

đến bước này nhiều hơn

Màn hình tiếp theo yêu cầu bạn

thiết lập các thông tin cho website

của mình Ở mục Siie Name, bạn đặt

tên cho website của mình, ở mục Your

E-mail, bạn nhập vào địa chỉ thư điện

tử của bạn Cuối cùng, ở mục Admin

Password và Confirm Admin Password,

bạn nhập một mật khẩu dùng để quản trị

trang Joomla của bạn, khi cài đặt xong

Luu y vé nut Install Sample data: nếu

bạn bấm nút này, hệ thống sẽ chèn một

số dữ liệu mẫu vào trong cơ sở dữ liệu

của bạn, nghĩa là sau khi cài đặt xong,

trang web của bạn sẽ có một vài mẫu

tin, với đầy đủ các hình ảnh, Nếu là lần

đầu tiên sử dụng Joomla, bạn nên bấm

nut nay dé xem thu trang mau Joomla

khi đầy đủ các thành phần và bản tin

sẽ được hiển thị như thế nào Còn trong

các lần cài đặt sau, nếu bạn muốn cài

đặt một trang Joomla hoàn toàn trắng,

dữ liệu nào cần thiết cho website bạn

file Edit View eer Hookmarks Tools

Steps Main Configuration

1: Language

2:Predastallation Check St Name:

Enter the name of your Joomat site, 3: License

4: Database

Confirm the Admin E-mail and Password

5: FTP Configuration

6: Configuration ‘Web site Super Admnistrator

Kate ae pasovrd and then conf tn the sprog fields Along withthe username admin, this wilbe the 7: Finish

Panel at the end ofthe retalabon

setongs wll be automabeally morated

Important: {tis strongly recommended that Users tal the defadtsonpie data To dots, select the Before leaving the instalation, you can populate the ste database with data There are three ways to do ths:

the fist option and cick the Install Sample Data button,

22 A Joomla 1.5 ‘SQL script file can be

Enter your e-mal address This willbe the e-mail address ofthe ppassnord that youl use to log to the Administrator Cantal

If you are mgratng, you cen ignore tis secton, Your curent

‘pon andcck on the button before moving to the next stage

1 Default sample data can be inserted, To do this, select

\plosded from lcahost and executed on the ste, Tes oud

Quá trình cài đặt đã

xong, và bạn phải xóa đi thư mục cài

đặt của Joomla Mở Windows Explorer,

bạn truy cập vào địa chỉ Œ:LAppServ\

www\mobile, rồi tiến hành xóa đi thư mục installation trong đó Nếu không

làm như vậy, thì trong lần truy cập sau

vào trang mobile, bạn sẽ bị Joomla bắt

thực hiện lại các bước cấu hình như

phía trên, thêm nhiều lần nữa

Giờ thì bạn đã có thể tiến hành kiểm

tra xem trang web động của mình sẽ

như thế nào, bằng cách mỏ trình duyệt

và truy cập vào địa chi http://localhost/

mobile Đây là trang web mà mọi người

sẽ được thấy khi truy cập vào website

của bạn Vì thế nên nó còn thường được

gọi là trang trước (Front End) Ngoài các

mẫu tin được cập nhật, trang này còn là nơi người sử dụng có thể tương tác với

website như đăng ký thành viên, tham

gia quản lý và viết bài để đăng lên

chúng ta thì trang đó sẽ nằm ở địa chỉ

|_ http:/localhost/mobile/administrator

Nguyên tắc chung là bạn thêm phần

đuôi administrator vào phía sau địa chỉ trang web Front end mà mọi người truy

cập để xem thông tin, để có được địa

chỉ trang quản trị tương ứng

Trang quản lý này (còn được gọi là

trang Back end) sẽ chỉ dành riêng cho

người quản trị web Vì thế, để truy cập

vào nó, bạn phải đăng nhập bằng tên tài khoắn (username) là admin, còn mục password thì bạn nhập vào mật khẩu bạn

đã thiết lập trong quá trình cài dat Joomla phía trên (trong phần cấu hình mang tên

Configuration, myc admin password)

Dan

Tại đây, bạn có thể cấu hình các

| thong Số hoạt động, thay đổi giao diện,

thêm các tính năng mới cho trang web của bạn

với phần Front Page

Manager, hay Global

Configuration Để thêm một bài viết mới trong

trang, bạn dùng mục

Add New Article, con dé

quản lý những bài viết đã đăng như xóa, thêm hay

‘Admin Password coves — |

Contry Ain Password

Load sample data, restore or migrate backed-up content

2zefng xem 2i ogy recomended

- Sore acts cone var red

— 5 art ation page

install Sample Data

© teAMgdie —empaton scorned we eategen te ot Soot ‘ot contr Bie eae

and enter the encoding used n old language fie or as seen 7 browser

Article Manager Cac

bài viết có thể phân thành từng thể loại

và được quản lý bằng mục Cafegory Manager Các nhóm bài viết sẽ quản

ly bằng Section Manager, các thực đơn

được tổ chức bằng Menu Manager, còn

hình ảnh thì được kiểm soát bằng mục

Media Manager

Cuối cùng là mục chức năng User Manager cho phép người quản trị trang web tạo thêm các người dùng khác,

cũng như cấp quyền cho phép họ chỉ

được thực hiện các tác vụ nào đối với

việc quản lý trang web mà thôi

Trường hợp không thích sử dụng

các biểu tượng quản lý, bạn có thể

dùng các menu phía trên, rồi chọn các mục tương đương như S/fe (Cấu hình trang), Menu (Thực đơn), Confent (Nội

dung), Components (Cac thanh phan), Extensions (Phan m6 réng), Tools (Cac

công cụ), và Heip (Trợ giúp) ®z

NHÓM MỤC ĐỒNG

THIET KE WEB

Kể từ số 241, ø-CHÍP sẽ mỏ ra chuyên mục mới - Thiết kế web - hudng dan từ căn hản đến nâng cao, mục

đích giúp các bạn chưa hiết gì về lĩnh vực này vẫn có thể tự thiết kế cho mình một trang weh ưng ý

Joomlaz

Thiết kế web động dễ như chơi

CHUNG TA DA CAI DAT XONG JOOMLA TREN MAY CHU WEB AO

APPSERV, ROI TAO RA MOT TRANG MOBILE TAI DIA CHi HTTP://

LOCALHOST/MOBILE TRONG HAI BAI TRUGC TUY NHIEN, CAC THAM SO

MAC BINH CUA APPSERV VA JOOMLA CHUA THAT SY TOI UU Vi THE,

BẠN SẼ CẦN THỰC HIỆN MỘT SỐ BƯỚC CẤU HÌNH BỔ SUNG TRƯỚC KHI

TĂNG VÙNG BỘ NHÓ CỦA

APPSERV DÀNH CHO ÚNG

DUNG TRONG JOOMLA

Mac dinh AppServ chi danh 8MB dé

xử lý các file cài dat vao Joomla Do do,

khi bạn cài các ứng dụng lớn hơn 8MB

sẽ bị báo lỗi Cụ thể trong phiên bản mới

nhất của Joomla, khi bạn cài đặt dữ liệu

mau tir Joomla (Install Sample Data), thi

khi đăng nhập vào trang quan trj Joomla,

bạn sẽ nhận được thông báo sau:

‘Welcome to Joomla!

on choosing Joomla! as your coment management system To help you gt stated, check ot

poltes to documentation and other help resources

Secarity

(On the Inert, secu ic aways a concern For that reason, you are encouraged to subscribe to the Joomla)

‘ev Joonial releases, emaled to you øã0nsd:s8y

isis one of you fst Web ites, securtyconsideraons may seem complicated and inning There ae

secuwing a Web site: (1) separ backups; (2) prompt updates tothe ltest Joona release; and (3) a ood We

considerations tht you ca ean aboot by reading the Joomla) Security Check

you believe your Web ste wat anaced, or you thik you have Gscovered a secuity soci Joona, pleas

lnformtion could pu other Web sites a risk [stead report porte security vulaerabiies to the Joomla! Se

Khắc phục nhược điểm này, bạn

có thể thay đổi thông số memory_ limit

thành 32MB hoặc 64MB Để thực hiện,

trong Windows 7, bạn vào menu Start,

trong ô Search Programs and Files,

bạn nhập vào từ khóa php.íni, rồi nhấn

Enter Chương trình Notepad sẽ hiện ra

để soạn thảo tập tin c:\windows\php.ini

nay Ban tim đến phan Resource Limits,

rdi tai dong memory_limit, bạn hãy sửa

giá tri 8MB thanh 64MB

Khi thay đổi giá trị memory_limit trong

tập tin php.ini, thi thông số này sẽ thay

đổi cho toàn bộ mọi trang web mà bạn

cài đặt trong máy chủ web ảo AppServ

Vì thế nếu trong thực tế, khi bạn dùng với

max_execution_time = 30 _; Maximum execution time of

‘each script, in seconds

max_in 60; Maximum amount of time each seript

may sp request data

MJ; Maximum amount of memory a

‘soript may consume (64MB)

máy chủ web thật trên internet, rất nhiều

khả năng bạn sẽ không được phép tác

động vào giá trị này Khi đó, bạn vẫn có

thể thay déi gia tri memory_limit nhu trén

dòng đầu tiên <? php, bạn gõ thêm một

dòng mang nội dung in+set ( “memory 1imit“, “32M”) ; , và lưu lại

KHỞI ĐỘNG LẠI APACHE

Sau khi thay đổi nội dung các tập tin cấu hình như trên, dù là cho cả máy chủ web hay chỉ cho duy nhất một trang web riêng lẻ, thì bạn cũng cần khởi động lại máy chủ AppServ, cụ thể là

chương trình Apache Trong Windows

7, bạn gõ vào hộp tìm kiếm lệnh từ khóa

Apache Restart, rồi nhấn Enter Với các phiên bản Windows khác, bạn vào cửa

sổ lệnh CMD rồi gõ lệnh:

C:\AppServ\Apache2 2\bin\httpd.exe -k restart -n Apache2.2

CAU HINH SYSTEM LEGACY

Các ứng dụng trong Joomla được phân làm hai nhóm chính: nhóm các ứng dụng viết cho Joomla phiên bản 1.0

và nhóm các ứng dụng viết cho Joomla phiên bản 1.5 Do phiên bản của Joomla

mà chúng ta sử dụng là 7.6 18 nên nó

chỉ hỗ trợ nhóm các ứng dụng viết cho Joomla phién ban 1.5 mà thôi Nếu bạn

muốn mở rộng tính năng bằng cách sử dụng lại các ứng dụng viết cho phiên ban Joomla 1.0, thi bạn phải cấu hình

để tắt tính năng kiểm tra ứng dụng có hợp với phiên bản Joomla hay không

Đăng nhập vao trang quan tri Joomla,

bạn stf dung menu Extensions - Plugin

Manager Ding bé loc Filter, hay do bằng tay, bạn tìm đến mục Plugin mang tên System-Legacy, rồi bấm vào cột

Enable đề đánh dấu chọn nó

Kể từ bây giờ, bạn đã có thể dùng cả

hai nhóm ứng dụng viết cho Joomla 1.0

và 1.5 trong cùng một trang của mình

Tuy nhiên, cần hết sức hạn chế việc sử

dụng trộn lẫn ứng dụng như thế, vì nó

sẽ làm trang web của bạn hoạt động kém ổn định, cũng như gây ra một số lỗi rất khó tìm và sửa

CÀI ĐẶT TIẾNG VIỆT CHO

TRANG FRONT END Cần nói rõ rằng, trong lúc cài đặt Joomla, bạn cũng có thể có lựa chọn để

chọn ngôn ngữ là Tiếng Việt Tuy nhiên,

nếu bạn chọn tiếng Việt thì chỉ có giao diện menu của Joomla là thay đổi, còn

trang Front end mà bạn tạo ra vẫn là tiếng Anh Giao diện menu tiếng Việt

của Joomla do chưa chuẩn hóa nên rất

khó hiểu, vì thế lời khuyên là bạn chỉ vẫn nên dùng tiếng Anh Và trong loạt

bài này chúng ta cũng sẽ dùng giao

diện menu tiếng Anh

Để cài đặt tiếng Việt cho trang Front end, dau tién ban tải tập tin Joomla_

ex.zip từ địa chỉ http:/Avww.mediafire

com/2o2nw5id2gjj Giải nén tập tin vừa tải về, bạn sẽ có hai thư mục con

Templates và Extension

Trong cửa sổ quản lý Joomla, bạn

vào menu Exfensions, và chọn Install/

Uninstall mục Upload Package File,

bạn nhấn Browse và trỏ đến file vi-VN_

Joomla_1.5.8_Front-end.zip trong thu

mục Extensions\Viethoa đã giải nén phía

trên, sau đó nhấn Ujpload File & Install

Khi nhận được thông bao /nstall

Language Success có nghĩa là bạn

đã cài đặt gói ngôn ngữ tiếng Việt cho

trang Front end của mình thành công

Phía dưới bạn cũng nhìn thấy dòng chữ

Ngôn ngữ tiêng Việt cho Jdoomla phiên

bản 1.5 (Front end)

Tiếp theo, ban vao menu Extensions,

và chọn tiép muc Language Manager

Chọn mục Site (bén cạnh mục

Administrator), bạn đánh dấu chọn

Language Name là Viet nam và nhấn

chọn biểu tuong Default phía trên Khi đó,

cột Default của ngôn ngữ Viet nam sẽ xuất

hiện dấu sao màu vàng Truy cập lại vào

trang http://Iocalhost/mobile, bạn chú ý

mục Powered by Joomlal, valid XHTML

and CSS cũng đã được việt hóa thành Xây

dung bdi Joomia!, valid XHTML and CSS

THAY ĐỔI GIAO DIỆN CHO

TRANG FRONT END

Dù là mới bắt đầu, nhưng chắc chắn là

bạn không muốn trang web của mình có

một giao diện đơn điệu và giống hệt hàng

ngàn trang web khác Ngoài nội dung,

thì hình thức thể hiện trang web phải có

gì đó nổi trội và khác biệt, thể hiện một

nét đặc trưng nào đó Do bạn chưa có

nhiều kinh nghiệm, nên bước đầu, chúng

ta sé chỉ thay đổi giao diện ở mức cơ bản

bằng các bộ khung mẫu (emplate) Về

sau, chúng ta sẽ tìm cách thay đổi các

template có sẵn, hoặc tự mình tạo ra các

template có duy nhất trên đời!

Mặc định sau khi cài xong Joomla,

bạn sẽ được cung cấp ba femplate mẫu

Để thử thay đổi giao diện cho trang chủ

Front end sang một trong ba khung mẫu

này, bạn truy cập vào trang quản trị web

mobile tại địa chỉ http://localhost/mobile/

administrator Trong menu Extensions,

ban chon muc Template Manager dé bat

đầu thực hiện các thay đổi này

Joomla cung c&p cho ban ba

template mau la beez, JA_Purity va

rhuk_milkyway Mu6n ding thu: template

nào, bạn bấm chọn nó trong danh sách

Trong ví dụ này, ta chọn mục beez, và

nhấn vào biểu tượng Defauli Quay lại trang mobile, bạn nhấn F5 và sẽ thấy giao diện đã được thay đổi

i Ea Hem hen Deore ee Ber

@: * Ơ X À HSemesmoeei (Brus Hanon ssid x | thng tu HE

template JA_Purity, va giao dién cla

khung mau JA_Purity sé dugc ap vao

trang web của bạn ngay lập tức Ngoài

ba template cơ bản có sẵn trên, bạn có sama thế cài đặt thêm các

2) mẫu femplate khác

:_ Trên internet có hàng ngan template mién

phí, đáp ứng đủ mọi nhu cầu theo từng lĩnh vực, dành cho người _ dùng Joomla Một số

trang web để download các mẫu template miễn

phí dành cho Joomla là http://www.siteground

kích thước thực sự sẽ trông như thế nào

Nếu thấy nó đúng như bạn mong muốn, bạn bấm nút Download để tải nó về

Đừng quên quan sát xem khuôn mẫu

đó được viết cho Joomla 1.5 hay 1.0,

tác giả của nó là ai, cũng như có đúng

là nó miễn phí (FFEE) hay không nhé!

Và dù là miễn phí, nhưng khi chọn tải một femplate nào đó, thì bạn sẽ phải

nạp một vài thông tin liên quan đến bản

than, danh d&u muc / agree to the Term

of Use, rồi bấm nut PROCEED Nếu

không muốn để lộ thông tin, bạn có thể

nạp các thông tin bất kỳ vào, riêng mục E-mail, bạn phải nhập chính xác một địa

chỉ còn dùng được Vì sau đó đường dẫn download sẽ được gửi vào địa chỉ thư điện tử đó Bạn lưu tập tin zip tai vé voi

một tên gợi nhớ vào một thư mục xác

Upload File & Install

- Template manager, bạn sẽ thấy có

thêm một template mới với cái tên như mục Name trên trang đã tải Chỉ việc bấm chọn template ấy rồi chọn Default,

quay trở lại trang Front end của mobile, bạn sẽ thấy nó chuyển sang khuôn mẫu giao diện mới như bạn mong muốn

XÓA TEMPLATE

Để xóa một template đang có trong

danh sách, bạn vào menu Exiensions

và chọn Install/Uninstall Qua thẻ

Templates, bạn bấm chọn tên template

cần xóa, ví dụ beez, sau đó nhấn vào

biểu tượng Uninsiall phía trên là xong

Khi nhận được thông bao Uninstall Template Success có nghĩa là bạn đã

gỡ bỏ thành công template do ra khdi

doomla Œz -

NHÓM MỤC ĐỒNG

Thiết kế web động dễ như chơi

hực ra, khi thêm một khung mẫu

| trang web (template) vao Joomla,

bạn không bị ép buộc phải dùng

nó theo một cách nhất định Như đã

nói trong phần trước, sau khi cài đặt

thành công, bạn có thể dùng menu

Extensions - Template manager, va

nhìn thấy trong đó các khung mẫu có

sẵn cũng như vừa cài thêm

Để sửa chữa hay chọn lựa cách

sử dụng khung mẫu theo cách riêng

của mình, bạn bấm chọn tên template

bằng nút tròn bên trái nó, rồi bấm vào

nut Edit 6 phía trên, bên phải Đơn

giản hơn, bạn có thể bấm vào tên của

template và cửa sổ hiệu chỉnh thông số

của khung mẫu web đó sẽ hiện ra

Ví dụ như ta đã cài đặt thêm một

khung mẫu mới mang tên JA_nickel,

và bạn đã nhấn vào tên của nó trong

danh sách

hãy nhập nó vào mục Slogan Và như đã

nói ở trên, một khuôn mẫu có thể đã được

sáng tạo theo nhiều cách khác nhau, do

Trong cửa sổ cấu hình template, bạn

nên chú ý ở phần Parameters các thông

số sau Phần kiểu biểu tượng đại diện

(Logo type), bạn có thể dùng một hình

ảnh (Image) đại diện cho công ty, hay

cửa hàng của mình để người xem dễ

nhớ Trường hợp chưa kịp thiết kế hình

ảnh này, bạn cũng có thể dùng văn bản

(Text) Truong hgp ding van ban lam

biểu tượng thì bạn nhập nó vào ô Logo

Texi Tên này nên ngắn gọn và dễ hiểu

Nếu cửa hàng của bạn có một câu khẩu

hiệu nói lên đặc điểm riêng của mình,

kiểu như “dù bạn không cao, nhưng ai

cũng phải ngước nhìn” chẳng hạn, bạn

ví dụ như cũng vẫn với khung mẫu giao

diện ấy nhưng với tông màu đỏ (Fed)

hoặc xanh (Blue) Tương tự, với mục

Menu Module, bạn có thể chọn các hiệu ứng dành cho menu, bao gồm các kiểu

như menu dạng nằm ngang (Split Menu),

menu xổ xuống, không có hiệu ứng (CSS Menu) và menu xổ xuống, có hiệu ứng

mờ ảo (Moo Menu)

Mỗi khi thay đổi một tham số hay giá trị

nào đó trong cấu hình, bạn nên sử dụng các nút trên thanh công cụ Template Nút Preview cho phép bạn xem thử website

của bạn sau khi thay đổi tham số vừa rồi

Nút Edit HTML dùng để chỉnh sửa cấu

+ a eam

KEM tones Seve

Te parame eta senna mt Love ee tage 5]

— Sogn 2a 08 Tene

là một chức năng sáng giá Tương tự,

nut Edit CSS ding để thay đổi giao diện

cho template Nhưng lời khuyên là nếu không có kinh nghiệm về CSS, bạn đừng

nên thục hiện

một thay đổi

; nao ca Va cdc

- chức năng sau cùng, khá đơn

giản, nút Save

cho phép lưu lại

các thay đổi và thoát về màn

hình chính, nút Apply cũng lưu

lại các thay đổi, nhưng vẫn tiếp tục chỉnh sửa,

va nut Close thi

đóng màn hình sửa lại và không lưu bất kỳ

sự thay đổi nào

A @ đ &®YO0

Preview EditHTML Eda CSS Save Apply Close i

Thực ra, thì toàn bộ các tập tin

tạo nên template đều nằm thành các

thư mục con trong thư mục chính Œ:\ AppServ\www\mobile\templates Ngoài ba thư mục mặc định chứa ba

template có sắn của Joomla, cứ mỗi

khi cài thêm một template mới thì bạn

sẽ thấy xuất hiện thêm một thư mục mới mang tên của template Cấu trúc của một template sẽ gồm bốn tập tin

chinh: index.php la tap tin quan trong nhất, nó sẽ quyết định giao diện và cấu trúc của template, femplate_thumbnaill

png là hình ảnh mô tả cho template,

để khi bạn rê chuột vào tên template

trong Template Manager, thi hinh ảnh

ấy sẽ bật lên để bạn xem thử Hai tập

tin còn lại là emplateDetalls.xmI là tập tin quy định vị trí các thành phần trong template cũng như cấu hình các tập tin trong template đó, và param.ini chứa các thông số đã được cấu hình Ngoài

ra, còn có thêm tập tin favicon.ico, là

hình ảnh hiển thị ở cạnh trái địa chỉ

trang web trong trình duyệt

lại hiệu ứng rất lớn cho trang web, đó là

việc thay đổi biểu tượng mặc định của

trang web Biểu tượng này nằm ở góc

trái trên của trang web, là vị trí dễ nhìn

thấy nhất của trang Mặc định thì nó là

biểu tượng của Joomla Để thay đổi nó,

bạn mở Windows Explorer rồi truy cập

vào thư mục C:\AppServiwww\mobile\

Templates Kế đó, bạn vào thư mục

mang tên template mà bạn đang sử

dụng, trong ví dụ này là JA_ nickel Tiếp

theo bạn vào tiếp thư mục con images\

blue (nếu ở bước cấu hình trước bạn

chọn kiéu Default Style là Blue) Ban

chọn một hình đại diện cho trang web

của mình theo định dạng bất kỳ, rồi lưu

nó lại theo định dạng PNG Tên tập tin

được lưu sẽ là logo.png, và bạn chép nó

đè vào tập tin logo.png có sẵn trong thư

mục đó Quay lại trang mobile tại địa

v8 sur bat tién nay, Xin mời bạn đến tham quan cửa hàng của chủng tôi tai

đa tải 6868 đường Lộc Phát để xem các mẫu đện hoại mi vớ á hấp

dẫn

bạn có thể sửa lại ở bước này Mục

Default WYSWYG Editor sẽ giúp ban

chọn trình soạn thảo văn bản dùng để

nhập nội dung cho trang web, mặc định

thi Joomla sé chon TinyMCE (la trình soạn thảo văn bản có giao diện gần

giống như Microsoft Office Word hay Open Office, nên rất dễ sử dụng) Tính n&ng List Length chỉ dành cho người dùng khi họ đăng nhập vào trang quản trị Nó cho phép bạn quản lý số lượng các tin được hiển thị trong một trang

ung

‘Organize + Open x Slide show Print E-mail New folder

clr Favorites noi bubd-br.gif bub4-tlgif $ bub4-tr.gif bullet-hover.gif ñ cc-bg.gif

Cau hinh Global Configuration

Global Configuration la trung tâm cấu

hình chính cho toàn bộ website, các thiết

lập trong phần này sẽ ảnh hưởng đến sự

hoạt động và hiển thị của website mà bạn

tạo ra Để cấu hình Global Configuration,

ban vao menu Site - Global Configuration

C6 ba thé trong phan nay la Site, System

và Server, tuy nhiên, trong bước khởi đầu,

bạn chỉ cần thay đổi vài tham số trong thẻ

Site la du Thé Site cing lai gam ba phan

la Site Settings, Metadata Settings va

SEO Settings

Phan Site Settings bao gdm cac muc

Site Offline dùng để bạn tắt tạm thời hoạt

động trang web của mình Khi đã chọn

Site Offline là Yes, bạn cần phải điền

thêm một thông báo trong muc Offline

Message Thông báo này sẽ hiển thị

thay cho trang web mặc định của bạn

Nên Việt hóa lại thông tin trong phần này

để người đọc thấy thoải mái

Muc Site Name cho phép bạn thay

đổi tên cho trang web Nếu lúc cấu hình

lần đầu tiên, bạn gõ sai tên website,

logo.png 0›tetaken: Specify datetaken PNG Image Dimensions: 151 x59 Date created: 6/16/2010 3:12 PM Size: 3.12 KB

Tạm thời chúng ta sẽ bỏ qua hai mục Feed Length và Feed Email và quay trở

lại cấu hình chúng sau

site Settings

Offine Message Tass site as

gìn nen

Site Name TRUNG TÂM MUA SÂM ĐIÊN THOẠI DỊ ĐÔNG

efauht(WYSNVYG Eđfer Eưe>r.TeyMCE [S]

Leattenam z0 [S]

Feedlengm 10 fz]

Feed Emall AuherEmai[S]

Trong phan Metadata Settings, tham

số Global Site Meta Description m6 ta

thông tin về trang web của bạn để các công cụ tìm kiếm hiển thị nó cho người

dùng đọc, trước khi họ đồng ý bấm vào

để xem trang Phần mô tả này cần rõ

ràng, chính xác và mang đầy đủ nội

dung để thu hút người dùng đọc

Mục Giobal Site Meta Keywords là

nơi bạn nhập các từ khóa để phục vụ cho

các máy chủ tìm kiếm Ví dụ như website

của bạn chuyên mua bán điện thoại di động, thì ở đây bạn có thể nhập các từ

khóa như điện thoại, di động, mobile

mỗi từ cách nhau một dấu phẩy Như

vậy mỗi khi người dùng internet tìm kiếm

down for maintenance Please chect beck

những từ khóa này, thì các máy chủ tìm kiếm sẽ liệt kê trang web của bạn trong phan két qua Muc Show Title Meta Tag

va Show Author Meta Tag quyét dinh co

hiển thị hai thẻ tên tác gia và tên tiêu đề

bài viết hay không

Metadata settngs

Global Sie Mets Jggmta) - the dynenic portel engine Description Banagenant aysten and content Globat Ste Meta aace3n, gaosÙk

Keywords Show Tite Meta Ta9 © np ® yen Show Author MMets Tag.” ng @ va,

Phần SEO Setfings hỗ trợ để các máy chủ tìm kiếm có thể dễ dàng tìm ra

trang web của bạn và đưa nó lên vùng

kết quả tìm thấy có thứ hạng cao hơn

Các tham số bao gồm Search Engine Friendly URLs cho phép rút ngắn đường dẫn liên kết Ví dụ khi bạn mở một bài viết trong Joomla, mà bài viết đó sẽ

có 5 dạng http://Iocalhost/mobile/index

=ạ php?option=com_content&view

=article&id=1:e73&catid=3:nokia

&ltemid=30, thi khi bật tính năng

Search Engine Friendly URLs, liên kết trên sẽ được rút gọn thành: http://Iocalhost/mobile/ index.php/sn-phm/nokia/1-e73 Tham s6 Use Apache mod_

rewrite đòi hỏi máy chủ chứa trang web của bạn phải hỗ trợ

tinh nang mod_rewrite thì mới có

thể sử dụng được Tính năng này

cho phép bạn tạo đường dẫn ảo, giúp cho người truy cập dễ nhớ

Và cuối cùng là tính năng Add suffix to URLs sé thêm đuôi html

vào cuối mỗi liên kết trong trang

Use Apache mod_rewrite @ nọ

Add sutfix to URLS

Các thay đổi trên sẽ giúp cho trang web của bạn dễ sử dụng để cập nhật thông tin

hơn Nó cũng giúp cho trang web nhìn chuyên nghiệp hơn, cũng như ngày càng có thêm nhiều người truy cập Œz

NHÓM | MỤC ĐỒNG

Sửa lại cho dung

Trong bai “Joomla - Thiết kế web động

dễ như chơi - Phần 3”, trên e-CHÍP 243

(9/7/2010), có một lỗi in ấn nhỏ, nhưng

sẽ gây ra lỗi khi bạn thực hiện

Phần Tăng vùng bộ nhớ của AppServ dành cho ứng dụng trong Joomla, doan gé thém một dòng mang nội dung Inisef(“memory

Iimit”, ”32M”);, bạn sửa lại cho đúng

là gõ thêm một dòng mang nội dung ini_set(“memory_limit”,”32M”);

e-CHÍP xin chân thành cáo lỗi cùng

bạn đọc

Q= tạo ra một trang web dùng

Joomla, thay đổi phần khung mẫu

trang web, cũng như thay đổi các tham

số chính để trang web hoạt động nhanh

và ổn định hơn Tuy nhiên, toàn bộ các

thao tác đó bạn đều thực hiện trên máy

chủ web ảo AppServ Máy chủ này chạy

trên máy tính cá nhân của bạn, nên gần

như chỉ dùng để bạn xây dựng trang web

Joomla, rồi tự truy cập thử để đánh giá

Để mọi người dùng khác trên mạng

Internet có thể truy cập vào trang của

bạn, thì cần phai dua trang web Joomla

mà bạn tạo ra lên một máy chủ thật Nếu

không ngại vấn đề tiền bạc, bạn có thể

tìm mua một nơi chứa (web hosting),

với chi phí tính theo tháng hay theo từng

năm Trường hợp chỉ mới ở giai đoạn thử

nghiệm, bạn có thể tìm các nơi cho phép

bạn chứa miễn phí trang web Joomla

này Có khá nhiều nơi trên internet cho

bạn chứa miễn phí trang web theo dạng

Joomla, nghia là nó hỗ trợ định dạng

PHP, cơ sở dữ liệu MySQL, cũng như

cho phép chuyển tập tin theo giao thức

FTP giống như máy chủ ảo nội bộ của

chúng ta Tuy nhiên, cần nói trước với

bạn là khi sử dụng các máy chủ web

miễn phí, bạn sẽ có thể gặp một vài giới

hạn như dung lượng chứa nhỏ, băng

thông yếu, hay không hỗ trợ một vài

thuộc tính đặc biệt của Joomla

ĐĂNG KÝ TÀI KHOẢN MIỄN PHÍ

Faro wb sts om oral buna bach pchzet of 2 won kin, to power mam websted fr»

peng Ca ete Bat tr ha he rohe reas fou and at the he De 9000

‘ac ges you the choce of aur damon You can suck weh yours byeto.<omy oF you Can oc fm anther

7 ye rames ưa he robe WEN MYSQL PHP, PP, V202 [or xoechy đesgTed conto pane! and ote

fastren you cov ho hos of 70 wth no wares Addn Yu! own oman rapeered Hay Goran aOR K

Jum Few ck an hosed on yout fae Brat aco

Free Hosting Network: > ay

as

Đầu tiên, bạn truy cập vào trang www

byethost.com rồi chọn mục Free

Hosting và nhấn vào liên kết Click here

to sign up for free hosting

Các thông tin cần điền vào để đăng

ký tài khoản miễn phí sẽ là tên truy cập (Username), mật khẩu (Password), địa chỉ thư điện tử (Email Address),

Byethost khuyến khích bạn nên xài địa chỉ dạng Gmail Sau đó là các thông tin

về lĩnh vực mà trang web của bạn thể

hiện (Site Category), ngôn ngữ mà bạn dùng trong trang web (Site Language),

và cuối cùng để tránh việc tạo tài khoản

tự động, bạn phải nhập vào mã số bảo mat ma ban thay trong muc Security

Code vao myc Enter Security Code,

trước khi nhấn nút fegister để hoàn tất

hosting

Signup for free

= (Roget:

Trong bước tiếp theo, bạn phái nhấn

nút Click me to Continue Một bước

kiểm tra việc đăng ký tự động khác với

mã CAPTCHA hiện ra và nhiệm vụ của

bạn là phải đọc thật kỹ các ký tự trong tấm ảnh văn vện đó rồi nhập chúng vào

phần Type the two words Nếu các từ

trong ảnh quá khó để nhận ra, bạn có

thể chọn chức năng recaptcha dé trang

web đưa ra tấm anh

khác, hoặc bấm vào nút hình chiếc

loa, để trang web

Sau d6, Byethost sẽ gửi một thư điện

tử cho bạn với tiêu đề Account Activation Required nhằm kiểm tra xem bạn có thực

sự là chủ của tài khoản email đã đăng ký hay không Cách làm này còn giúp kiểm

tra xem bạn có nhập sai địa chỉ email hay không, vì nếu nhập sai, bạn sẽ không

nhận được thư yêu cầu xác nhận này Mở

thư điện tử vừa nhận được ra, bạn hãy nhấn vào đường liên kết trong nội dung

của nó để kích hoạt tài khoản

Trình duyệt sẽ đưa bạn trở lại

trang web kiểm tra của Byethost

Thao tác kiểm tra khá đơn giản,

là bạn lại phải đọc hình ảnh CAPTCHA, nhập nó vao hép Type

the two words va nh&n Register để kết thúc Việc đăng ký tài khoản Byethost

đã thực sự hoàn tất, vì thế máy chủ này

sẽ cung cấp các thông tin để bạn quản lý nơi chứa web của mình Thông tin gồm các nội dung bắt đầu với chi phí mà bạn phải trả mỗi tháng (dĩ nhiên do bạn đã chọn tài khoản miễn phí, nên sẽ là $0.00

USD for each month) Mục Control Panel

cho biết địa chỉ mà bạn dùng để quản lý

nơi chứa web của mình (Control panel

URL), tai khoản (Control panel user

name) cũng như mật khẩu tương ứng với

tai knoan d6 (Control panel password)

Phần kế tiếp là File and FTP Settings, chứa thông tin về tài khoản, mật khẩu và địa chỉ dùng để bạn tải trang web của bạn lên máy chủ bằng giao thức File

Transfer Protocol

Amount

$0.00 sD b33_5021777

butp://panel.byethost.com B33 S821777 usar fRp.byethost33.com

rlai phần thông tin còn lại cũng cực

ky quan trong Bo la MySQL Settings

vdi cac muc tén tai khoan (MySQL

user), mat khdu (MySQL password),

địa chỉ kết nối dữ liệu (MySQL hosi)

và cổng kết nối (WySQL pori) Bạn sẽ

rất cần đến các thông tin này, để trang

web Joomla của bạn kết nối thành công

vào cơ sở dữ liệu của nó, chứa trên

máy chủ Và phần thứ hai, chính là địa

chỉ tên miền mà bạn sẽ cung cấp cho

mọi người, để họ có thể vào thăm trang

web của bạn từ trên internet, sau khi

bạn hoàn tất việc lưu trữ nó trên máy

chủ này Phần cuối cùng, nếu cần giữ

lại các thông tin trên, bạn chọn mục

Download my Account Settings dé lưu

chúng xuống máy tính, và đừng quên

bảo quản chúng thật cẩn than

vain XUẤT CƠ SỞ DỮ, LIỆU

CHÚA TRONG MÁY CHỦ TẠI

CHỖ APPSERV

Bạn đã xây dựng một trang web tại

chỗ trong AppServ, và giờ là lúc bạn

đưa nó ra internet tại máy chủ chứa

web và tên miền con của Byethost Do

đó, để khỏi phải xây dựng lại một cơ sở

dữ liệu mới từ đầu, bạn cần trích xuất

dữ liệu có sẵn trong AppServ ra thành

tập tin, rồi sau đó tải nó lên cập nhật

vào máy chủ trên Byethost Trước hết,

bạn truy cập vào trang hitp://Iocalhost/

phpmyadmin, rồi đăng nhập bằng

username la root va password cing la

root (do chúng ta đặt lúc xây dựng cơ

sở dữ liệu lúc ban đầu), và bấm OK

0 _^ usemmame and password ore being requested by http://locathost, The site says: “phpMyAdmin

Ở khung Dafabase bên cạnh trái

của trang quản lý này, bạn bấm chọn

cơ sỏ dữ liệu mà mình muốn trích xuất

Trong ví dụ ban đầu, chúng ta đã tạo cơ

sở dữ liệu db_mobile, nên bạn bấm vào

tên của nó, rồi chọn thẻ Expori Cuộn

thanh chuột đến gần cuối trang, bạn

đánh dấu chọn vào muc Save as File,

| teat cant seit | sii aes

{9 Server icalhont» gh Detabase: db mobile

I8z/26xabecsphpmrhaniy.à.mụowphgldb đề mobẻnÖacven.38Z23/415A740⁄6l042506c8/)âqyse- h sưựchưe hp

Một tập tin sẽ được tạo ra có dạng

db_mobile.sql, trình duyệt sẽ cho phép

TT — nh abs es

bạn chọn lựa cách xử lý nó Và bạn sẽ

phải chọn chức năng Save File để lưu

nó vào đĩa cứng Tùy cấu hình của trình

duyệt web bạn đang dùng, mà tập tin sẽ được lưu xuống các thư mục khác nhau

ban chon kiéu

cơ sở dữ liệu

là MySQL

Databases cho phù hợp với loại dữ liệu lấy ra từ MySQL trong AppServ Trong

cửa sổ MySQL Databases, ö mục

Create a NEW Database, bạn nhập vào

tên cho cơ sở dữ liệu, ví dụ như db_

mobile, sau đó nhấn Create Database

để tạo mới Byethosi sẽ tạo ra một cơ

sở dữ liệu mới với tên theo dạng tên tài

khoản + tên cơ sỏ dữ liệu, trong ví dụ này là b33_5821777_db_ mobile Bạn

nhấn vào liên kết Admin để tiếp tục

Phím Yew Tere Metneh Teh Hy J/2Ẻ Œ x Vermeer

Trong giao diện PHP Myadmin, bạn

chọn thẻ Import Bấm vào nút Browse,

bạn trỏ đường dẫn đến nơi lưu tập tin db_mobile.sql, sau đó nhấn Go Khi bạn nhận được thông báo Import has been successfully finished tức là quá trình đưa cơ sở dữ liệu vào máy chủ web đã thành công

8 Server: 99207 byetclustr.com > {jt Database: 839_S8217T7_db_ mobile -lểSwuebwee đjSQL / $sach @@Quen Export Bilmpor $80perations

var $host='sqgl207.byethost33.com” (lấy từ MySQL Settings)

var $user=b33_5821777' (lấy từ

MySQL Settings) var $password='123456' (lấy từ MySQL Settings)

var $db=’b33_5821777_db_mobile’

(là tên tập tin cơ sở dữ liệu mới tạo ra ở

bước trước)

CHUYỀN TRANG WEB TỪ

APPSERV LÊN BYETHOST Bạn có thể sử dụng chương trình

bất kỳ chương trình nào hỗ trợ tính năng FTP, chang han nhu WinCMD (http://

tinyurl.com/winCMD755) dé chuyén

dữ liệu từ máy chủ AppServ lên máy

chủ Byethost Trong WinCMD, bạn vào

menu Net, rồi chọn FTP Connect

FTP Disconnect

— = | eee

alee Moet FIP Download From Let

Temp! | Port Connection To Other PC

Trong cửa sổ kết nối FTP, bạn nhập

vào các thông tin đã nhận được trong

phan Files and FTP Settings ở bước đăng ký tài khoản phía trên, bao gồm

Host Name là giá trị FTP Host name,

vi du nhu ftp.byethost33.com, User Name la FTP User name, Password la FTP password Riéng muc Session thi

không liên quan, nên bạn có thể nhập

Trong cửa sổ WinCMD, bạn có sắn

một bên là thư mục gốc trên máy chủ

Byethost, bạn bấm vào đề chuyển sang

thư mục hfdocs Ở phần bên kia, bạn

chuyển vào thư mục C:\AppServ\www

Kế tiếp, bạn nhấn chọn thư mục mobile, rồi nhấn nút F5 để chép nó vào thư mục

htdocs trên Byethost

{Windom Commer

Few Location ete eC, mabe — [ĐBmRD] (MecIMG) Cra ot ote t5

import i comgresion wi beauty detected to: None, cp tip ip

CHỈNH SỬA FILE CONFIGURATION.PHP

Để trang web

“ares z8 sau khi chuyển

từ AppServ lên Byethost có thể kết

nối được với cơ sở

tập tin configuration

php (trong đường dẫn C:\AppServ\wwwl\

mobile) như sau, rồi lưu tập tin lại

Giờ thì bạn hãy thử truy cập vào

trang web của bạn bằng địa chỉ mà Byethost cung cấp lúc đầu để xem thử thành quả của mình Nhưng đừng quên thêm phần mở rộng ⁄mobile phía sau

địa chỉ nhé Œ+z

NHÓM MỤC ĐỒNG

se THIẾT KẾ WEB

Kể từ số 241, e-CHÍP sẽ mở ra chuyên mục múi - Thiết kế web - hướng dẫn từ căn bản đến nâng cao,

mục đích giúp các bạn chưa biết gì về lĩnh vực này vẫn có thể tự thiết kế cho mình một trang web trng ý

Joomilalm

Thiết kế web động dễ như chơi

GIO THI CHUNG TA ĐÃ TẠM CO MỘT 3, WEB VOI GIAO DIEN MONG MUON BUOC KE TIEP CHUNG TA PHAI LAM LA TO CHUC DU LIEU BEN TRONG NO

hác với dạng web tĩnh, trong thiết

Kis web động, khi nạp các bản tin

mới, chúng ta sẽ không xác định

vị trí mà nó xuất hiện trên trang bằng

tay Một bản tin mới sẽ có mặt trên

trang web động của chúng ta như thế

nào, tại vị trí nào sẽ tùy thuộc vào các

thuộc tính mà nó được cài đặt Để dễ

quản lý, trong Joomla, người ta sắp xếp

cac ban tin vao cac phan (section) va

cac nhom (category)

Section là các mục, các lĩnh vực chính

mà website đề cập tới Đây là cấp quản

lý nội dung lớn nhất Ví dụ các website

tin tức như VNExpress, Tuổi Trẻ, Thanh

Niên thường có các Section là: Thể

Thao, Kinh Tế, Giáo Dục, Pháp Luật ,

và trang web trung tarii mua sam di

động của chúng ta, các bạn cũng có thể

tạo các section như: Tin tức, Điện thoại,

Laptop, và Hỏi Đáp

TAO MGI MOT SECTION

Đầu tiên, bạn mở trình duyệt và truy

cap vao dia chi: http://localhost/mobile/

administrator Truéng hop bạn muốn

cấu hình thẳng vào trang web trên máy

chủ web trên internet, thì bạn dùng

đường dẫn đến trang web đang có, rồi

thêm vào sau đó chuỗi ⁄administrator

Kế tiếp, bạn đăng nhập bằng tên tài

khoản (username) là admin, còn mục

mật khẩu (password) bạn dùng mật

khẩu đã thiết lập trong quá trình cài đặt

Joomla Khi dang nhập xong, dé tao

mdi Section, ban vao menu Content,

chon Section Manager

37 9

Trên thanh công cụ, ban để ý các

biểu tượng sau: sử dụng Section đã tạo

(Publish), không sử dụng Section đã tạo (Unpublish), tạo bản sao của một Section (Copy), xóa bỏ một Section

(Delete), chinh sua Section (Edif), tao

mdi Section (New)

Ban nh&n vao biéu tugng New dé bat

đầu tạo mới Section Sau đó, bạn nhập

vào các thông tin bao gồm: tên Section

(Title), bắt buộc phải có, và càng mô

tả chỉ tiết càng tốt Bạn nên đặt tên gần giống với tên menu sẽ xuất hiện ngoài trang web, ví dụ như Điện Thoại

chẳng hạn Tiếp theo là tên viết tắt

của Section (Alias), là một từ không có

khoảng trắng và không bỏ dấu

Ở mục Published sẽ cho bạn biết

Section này có được sử dụng hay

không, mặc định khi tạo mới một

Section thì giá trị ở đây sẽ là Yes Mục (Order) xác định thứ tự của Section

đang tạo Mặc định khi được tạo ra, thì Section sẽ nằm ở vị trí cuối cùng, và

bạn chỉ có thể chỉnh sửa lại thứ tự của

section sau khi bạn đã lưu nó lại

Muc Image cho phép bạn chọn lựa hình ảnh đại diện cho Section, mặc định Joomla sẽ liệt kê để bạn chọn các hình

ảnh có trong thư mục images/Sfories

Bạn cũng được quyền xác định vị trí cho

hình ảnh đại diện (Image Position) là canh trái, phải hoặc canh giữa

Mục Access Level giúp bạn phân

quyền cấp độ truy cập cho Section,

vì phần này đòi hỏi phải có kiến thức chuyên sâu về quản lý Menu và quản

lý người dùng (User), cho nén chung

ta sẽ đi sâu vào chỉ tiết ở những phần

sau Còn ở đây bạn cứ giữ nguyên

== -

Ga ——=) wage Posten: ut Tz]

giá tri nhu mac dinh la Public (tất cả mọi người đều có thể xem được) Cuối cùng, bạn điền các thông tin mô tả cho Section (Description) Phần mô tả này có thể được cấu hình hiển thị hoặc không hiển thị ra ngoài trang web, tùy

vào nhu cầu của bạn

Trong các bước kể trên, bạn lưu ý ở mục Image (là bước xác định hình ảnh

đại diện cho Section) Theo mặc định,

dJoomla sẽ liệt kê các hình ảnh có sắn

trong thu muc images/stories Nhung nếu muốn chọn hình ảnh khác phù hợp

cho website của mình, bạn phải thực

hiện theo một trong hai cách sau:

Cách 1: Nếu đang làm trên máy chủ Web gia lap (localhost), ban chi viéc chép các hình ảnh cần dùng vào thư

muc C:\AppServ\www\mobile\images\

sfories (đối với trang web mobile)

Cách 2: Nếu bạn đang làm việc với

máy chủ web trên internet, bạn vào thẻ

Site, chọn Media Manager Ở khung bên

trái, bạn chọn thư mục stories, sau dé 6

mục upload file, bạn nhấn Browse và trỏ đến tập tin hình mà bạn muốn tải lên Kế

tiếp, bạn nhấn nút Sfar† Upload để bắt đầu tải ảnh lên máy chủ Khi nhìn thấy

thông báo Upload Complete có nghĩa là

quá trình tải ảnh đã thành công

— mem

° >xš€

es eon on @

Quay trở lai knung tao Section,

CHINH SUA SECTION

Để chỉnh sta mét Section, ban

{BH Section: prew) evYOnu | bạn chú ý các nút lệnh trên thanh

“se sev => = | công cụ: Lưu Section lại và trở về Detats trang Section Manager (Save), Luu Scope: coment Section lại và tiếp tục soạn thảo

conser, MEW Secunda _Ÿ oe tt place Orsering ca be change arts tao (Cancel)

"—¬ `" - —

Ị đánh dấu chọn vào Section cần

chỉnh sửa, sau đó nhấn vào nút biểu

tượng Edit Sau khi chỉnh sửa xong, bạn

nhấn Save để lưu lại

XÓA SECTION

Bạn đánh dấu chọn vào Section cần

xóa, sau đó nhấn biểu tượng Delete

Lưu ý rằng nếu Section có chứa các

Category thì bạn phải xóa Category

trước, sau đó mới xóa Section

Bạn phải chọn để cho nhóm vừa tạo nằm trong Section nào, và điều đó ảnh hưởng rất nhiều đến việc tổ chức bài viết cho trang web Tiếp theo là mục

Category Order cho phép bạn sắp xếp thứ tự của nhóm vừa tạo

Nhóm (category) có một hình ảnh đại diện trong mục Image, và canh lề bằng mục Image Position Chung ta

sẽ bỏ qua muc Access Level tuong tu

cho biết nhóm có đang được sử dụng trong trang này hay không Bạn có

thể thay đổi trang thái từ có ( v) sang

không ( 9) hoặc ngược lại bằng cách

nhấn chuột vào biểu tượng ở ô này

Cột Order cho biết thứ tự của nhóm trong danh sách lúc tạo ra, nhưng bạn

có thể sửa lại thứ tự này bằng cách

đánh một con số mới vào, hoặc nhấn vao cac nut Move Up/Move Down

nhu khi tao Nhấn vào biểu tượng đĩa mềm (Save

scl tui lí 6c vì cssdeszalkcasdolslua,kbui mới Section, Order) sẽ lưu lai thi tu mdi Cot Access

BD) section manager 4 i 3 © @ | đòi hỏi phải cho nhóm và bạn có thể tạm thời bỏ

Sa m* 1 có kiến thức qua, chưa cần quan tâm đến nó Cột tee (on jams Seen sem] chuyén sau Section cho biết tên Section chứa nhóm

TH == ae ẽ vequanly này, cột #Active cho biết số lượng bài

mm" is * hese Menu va vit (Article) dang co trong nhóm, còn

me x me pons quản lý người cột #Trash cho biết số lượng bài viết

2 = c " dùng (User) trong nhóm đã bị xóa

chọn ở đây

Nhom (Category) a c&p quan ly tin bạn điền các thông tin mô tả cho nhóm ụ a

tức thấp hơn Section và dùng để chứa trong 6 Description Dung quén nhan xe

các tin tức, bài viết (Ariicle) Bạn cóthể vào biểu tượng Save để lưu nhóm vừa "

tạo nhiều Section và mỗi Section có thể _ tạo ra bạn nhé

bạn cũng có thể tạo nhiều nhóm và mỗi (WH) category: new) e®vO9O0 CHỈNH SỬA

Vi du: Trong phan (Section) Dién

Thoại sẽ có các nhóm (Category) là

LG, Nokia, SamSung nhóm Nokia sẽ

chứa các bài viết về các sản phẩm điện

thoại của Nokia, còn nhóm Samsung thì

hẳn nhiên sẽ chứa các bài viết về các

sản phẩm điện thoại của Samsung

TẠO NHOM (CATEGORY)

Dé tao Category, ban vao the

Content, chon Category Manager

37 0

Delete Edt = New

2 &

° o «fs

Publish = Unpublish Move Copy

Tương tự như việc tạo Section, phần

nhóm (Cafegory) cũng có thanh công

cụ gồm các chức năng: sử dụng

nhóm (Pubiish), không sử dụng

nhóm (Unpublish), di chuyển

một hoặc nhiều nhóm sang một

Section khác (Move), tạo bản

sao của một nhóm (Copy), xóa

bỏ một nhóm (Delete), chỉnh sửa

nhóm đã tạo (Edii), và tạo nhóm

mới (New)

Phần tạo mới nhóm (Category)

khá giống với các bước tạo Section

Nghĩa là bạn cũng nhập tên nhóm trong

mục Tiile, tên viết tắt của nhóm trong

mục Alias Tên viết tắt này cần phải

được viết dính liền, không khoảng trắng

và dùng tiếng Việt không bỏ dấu Mục

Published sẽ xác định việc bạn có dùng

nhóm (Category) này ngay lập tức, hay

chỉ tạo ra sẵn rồi sẽ sử dụng về sau, khi

cần thiết

Điểm quan trọng nhất trong phần

tạo nhom (Category) la muc Section

Details

Title: APPLE Alias: apple Published: ©) No @ Yes Section: Bin Thoai [=]

Category Order: ta Category is saved

Access Level: ESN

Regenered Speeml Y Image: - Select image - &

Image Position: Let [we]

New Categories detaultto the Inst postion Ordering can be changed after

Tương ty cac Section, khi cần chỉnh sửa nhóm, bạn đánh dấu chọn vào tên nhóm và nhấn biểu tượng

Edit trên thanh công cụ

Sau khi chỉnh sửa xong, bạn nhấn Save để lưu lại

DI CHUYỂN CATEGORY SANG

Tương tự, bạn tạo thêm nhóm khác

như HTC thuộc Section Điện Thoại,

nhóm Deil thuộc Section Laptop Sau khi tạo xong bạn chú ý các cột trong Category Manager

# Title Published Orders ws ^°°#5% secuon

Cột # cho biết số thứ tự của nhóm

được gán tự động bởi Joomla Cột

check box ( “:') cho phép bạn lựa chọn một hay nhiều nhóm cùng lúc, sau đó

bạn chọn các biểu tượng trên thanh công cụ để xử lý Cột Title cho biết tên của nhóm, và bạn có thể nhấn chuột vào đó để sửa chữa Cột Published,

Tấn" Category: [Move]

— tomes haa vn

các nhóm cần di chuyển, sau đó bạn

, nhấn biểu tượng Move Chọn một

tren | Secfion trong danh sách Move to

Section mà bạn muốn di chuyển

nhóm đến đó, và nhấn Save là xong

XÓA CATEGORY Nếu không cần dùng đến một

nhóm nào đó, bạn đánh dấu chọn vào

tên nhóm, sau đó nhấn biểu tượng

‹ THIẾT KẾ WEB

Kể từ số 241, ø-CHÍP sẽ mở ra chuyên mục mới - Thiết kế weh - hướng dẫn từ căn hản đến nâng cao,

mục đích giúp các bạn chưa hiết gì về lĩnh vực này vẫn có thể tự thiết kế cho mình một trang web ưng ý

Xã _)CÐCrT"ÌCIlE8

Thiết kế web động dễ như chơi

ù rằng việc cài đặt từng bước hệ

De Joomla, cũng cấu hình để

chúng hoạt động ổn định không

đòi hỏi bạn phải có quá nhiều kỹ năng lập

trình hay hệ thống, nhưng có khi chỉ một

sai sót nhỏ trong việc thực hiện từng bước

theo hướng dẫn, cũng có thể làm cho hệ

thống Joomla của bạn bị lỗi Sau đây là

một số câu hỏi mà người dùng thường đặt

ra trong quá trình thực hiện các bước cấu

hình cơ bản Joomla như đã hướng dẫn

Hỏi: Tôi mở file configuration.php

trong thu myc C:\AppServ\www\mobile

bằng Notepad, sau đó di chuyển con trỏ

tới cuối dòng đầu tiên (dòng có kết thúc

bằng ký tự “?>"), và ấn Enter, gõ thêm

dòng ini_set(“memory_ limif,”32M”), như

hướng dẫn ở Phần 3, rồi lưu tập tin lại, thì

khi truy cp vao http://localhost/mobile/,

tôi lại nhìn thấy thông báo như sau:

Warning: session_start() [function

session-start]: Cannot send session

cache limiter - headers already sent

(output started at C:\AppServ\www\

mobile\configuration.php:1) in C:\

AppServ\www\mobile\libraries\joomla\

session\session.php on line 423

Warning: Cannot modify header

information - headers already sent by

(output started at C:\AppServ\www\

Đáp: Thông tin cảnh báo (Warning)

trên thỉnh thoảng xuất hiện ở một số

máy tính, khi bạn thay đổi nội dung

tập tin configuration.php bằng chương

trình Notepad và có sử dụng tiếng

Việt trong tập tin này Do lúc tiến

hành lưu lại, Notepad đã không giữ

đúng bộ mã ký tự của tập tin Có hai

cách để bạn sửa lỗi nay:

Cách thứ nhất, bạn phải cài lại

Joomla từ đầu, hoặc tìm cách nào đó

khôi phục lại tập tin configuration.php

gốc Sau đó, bạn mở file configuration

php trong đường dẫn C;WAppServwww\

mobile ra bằng chương trình WordPad,

thay vì Notepad, sửa chữa nó như

hướng dẫn, rồi lưu lại

se eee cemaney tine" trường hợp

29 ng sAeelnạm 9/ không muốn

chương trình Notepad++ về từ địa chỉ

http://tinyurl.com/cainotepad, va cai dat

lên máy tính của mình Sau đó, bạn mở

tập tin configuration.php bằng chương

trình Notepad++ này Tiếp theo, để khôi phục bản mã chuẩn của tập tin, bạn

dung thé Encoding trén menu, va chon muc Convert to UTF-8 without BOM

Sau khi luu tap tin configuration.php đã

chuyển đổi này lại bằng cách nhấn Cir!

+ 6, hay chọn menu File - Save, thông

tin cảnh báo trên sẽ được biến mất

File Edt seach view EU Language - ‘Settings Macro Run

vax SoG Convert to UI whos 2H

var $site Convert toUCS-2 Big Endian

8 | var Sedir Convert to UCS-2 Little Endian

ĐH DIED

Cũng xin lưu ý ban rằng dòng đầu

tiên trong tập tin cấu hình configuration

php kết thúc bằng chuỗi “<?php”, chứ

không phải là chuỗi “?>”như trong câu

hỏi của bạn

loorrtlcil Installatlon Steps Database Configuration

Next thì hiện ra thông báo lỗi: Unable

to connect to the database: Could not connect to MySQL

Đáp: Bạn cần kiểm tra lại bước cấu

hình Database Configuration (trong Phần 2) những vấn đề sau: mục Host Name phải là localhost, mục

Username phải là root Riêng phần

Password, thì vào lúc cài đặt chương trình AppServ (trong Phần 1), nếu bạn

đã cài đặt mật khẩu cho tài khoản roof

là gì, thì trong bước này, bạn phải nhập trở lại cho chính xác

Do lúc cài AppServ ở Phần 1, người

viết đã cài mật khẩu là roo luôn cho dễ nhớ, nên trong Phần 2 cũng đã hướng dẫn bạn dùng mat khau root nay dé

nhập vào mục Password Trường hợp

trong bước 1, bạn đã cài một mật khẩu khác, thì bạn phải nhớ nó thật kỹ, để

nhập vào cho chính xác trong bước

2 này Nếu bạn không nhớ rõ lúc cài

AppServ (phần cấu hình MySQL) đã

dùng mật khẩu gì cho tài khoản root, thì cách đơn giản nhất là bạn cài đặt lại

chương trình AppSerw, hay cấu hình lại

từ đầu máy chủ chứa web trên internet

Có cách nào để tôi có thể tìm lại mật

khẩu này hay không?

Đáp: Trong quá trình sử dụng, vì

nhiều lý do, có

thể bạn không

còn đăng nhập được vào

là tài khoản có quyền quản

trị cao nhất,

và trong một số hệ thống web cá nhân, thì có khi đây còn là tài khoản duy nhất

đăng nhập Tuy nhiên, nếu lỡ quên mật

khẩu của tài khoản này, bạn vẫn có thể thiết lập lại một mật khẩu mới cho nó,

thông qua công cụ quản lý cơ sở dữ liệu PhpMyAdmin, theo các bước sau:

© me me

(Od Paneword Support (PHP MySQL API uncton.)

Enable Inne08

(soos ME] ( cm | Nếu đang đặt trang web của mình

trên máy chủ giả lập AppServ, trước

tiên bạn cần truy cập vào trang quản lý

cơ sỏ dữ liệu PhpMyAdmin tại địa chi:

http:/Iocalhost/phpmyadmin Một hộp

thoại sẽ hiện ra yêu cầu bạn nhập vào

tên truy cập và mật khẩu Bạn hãy nhập

vào tên tài khoản là roof, kèm theo mật

khẩu bạn đã thiết lập trong quá trình cài

đặt AppServ trong Phần 1 (ở bước cấu

hình My SQL Server)

Tiếp theo, trang quản lý cơ sở dữ liệu

MySQL sé xuất hiện Ở khung Database

bên trái, bạn chọn đúng tên cơ sở dữ liệu

mà bạn da tao trong luc cai dat Joomla

(Phần 2, bước cấu hình Dafabase

Configuration), trong loạt bài viết này thì

nó là db_ mobile Toàn bộ danh sách cấu

trúc của cơ sở dữ liệu sẽ được hiển thị

Bạn tìm đến bản ghi có tên /os_users,

là bản ghi chứa danh sách toàn bộ các

tài khoản người dùng, rồi nhấn vào

biểu tượng Browse để duyệt Tìm đến

tài khoản có giá trị admin trong cột

tuIsername, bạn bấm vào nút biểu tượng

Edit mang hình chiếc bút chì ở bên trái

cùng bản ghi tài khoản này

Ea s xa x

62 Aaminitater amin

2 WySA ưR geAwALd - 1236

— 489658298T2C7.5280104a29084c973

_

ame

‘samongoria com

FX 9 sxwon —saman —samonzt7@grusicom 4Ö09040000G314280%00825A070170PU0,9790040VEAG

Trong cửa sổ hiệu chỉnh thông số tài

khoản người dùng, bạn chú ý ở dòng

password Khung Function, bạn chọn

kiểu mã hóa là MD5, còn trong khung

Value, bạn nhập vào một mật khẩu

mới, sau đó nhấn Go để kết thúc quá

trình thay đổi Đến đây, bạn đã khôi

phục thành công mật khẩu dành cho tài

khoản admin, bạn hãy truy cập lại vào

trang quản trị Joomla tại địa chỉ http://

localhost/mobile/administrator, rồi đăng

nhập bằng tài khoản là ađmin cùng với

mật khẩu bạn vừa thiết lập xong

‘Server: localhost > ji Database: db_mobile > 48 Table:jos_users

Browse ff Structure /ŸSQL „ seach Š€M9SH [NErpon fMimoort_$EOperations [Empty

hat Twe Function ut Vaue

Nếu bạn đã mang trang web của

mình đặt lên máy chủ web trên internet,

thì bạn phải đăng nhập vào trang quản

lý của máy chủ đó bằng tài khoản đã

được cấp Mỗi máy chủ sẽ có những

tiến hành đăng nhập bằng tài khoản

(Username) và mật khẩu (Password)

mà Byethost đã cung cấp cho bạn lúc tạo tài khoản (trong Phần 5)

Files and FTP Settings

bš3 5821777

tp byethost33 com

Sau khi đăng nhập thành công, trong cửa sổ quản ly, ban vao muc Database

Management Tương tự như ở máy chủ

tại chỗ AppServ, bạn cũng phải nhấn

vào mục PhpMyadmin đề thay đổi

mật khẩu của tài khoản admin từ ngay trong cơ sở dữ liệu Sau đó, bạn nhấn

Connect Now! đề bắt đầu kết nối vào

cơ sở dữ liệu đó Tương tự như khi làm trên AppServ, bạn cũng đánh dấu chọn

vào mục /os_users và nhấn biểu tượng

Browse Chọn tài

G6 eassenaomer Khoản cần đổi mật

nhấn vào biểu tượng Edit ở cạnh trái

tải lên được và có một thông báo xuất hiện là Th¡s file type

is not supported Tôi phải làm thế nào để sửa lỗi này?

Đáp: Bạn nhận được thông báo như vậy thì có nghĩa

là bạn chưa cấu hình cho

Joomla chap nhan định dang

cấu hình lại tham số quy định các định

dạng tập tin được phép tải lên, bạn

đăng nhập vào trang quản trị Joomla, vào menu Sites, va chon Global

Configuration Trong thé System, ban

chu y vao khung Media Settings, muc Legal Extensions (File Types) Gia tri

của mục này xác định các loại tập tin

được phép tải lên 'trong Media Manager

wm geal toe Bạn có thể thêm

ee ES -_ hoặc bớt phần mở

VN guael gi tơ mh -_ rộng của các định

tsfct sana (293/13Á2 1 —x 10g

dạng tập tin trong chuỗi tập tin khi tải

‘Show 30 ons} staring tom record 0

= mode ond tepnat haces wer 100 cals + Omens

iE sie Ba, secienae preteen sari fan SR

To hack Al Uncheck AR ANI selected 7X

Bạn cũng tìm đến dong password

và chọn kiểu mã hóa MD5 trong khung

Function Sau đó, bạn nhập vào mật

khẩu mới ở khung Value Cuối cùng, bạn nhấn Go để lưu lại thiết lập Giờ đây, bạn cũng đã có thể đăng nhập

trang quan tri web Joomla cua minh

bằng mật khẩu mới, dù nó nằm trên

máy chủ web Byehost

8 Server: sal207.byethost31.com » đè Database: b33 5821777 db mobile > fi Table: jos users

Quá trình khôi phục mật khẩu quản

trị trang web sử dụng Joomla khá đơn

giản, và yếu tố bảo mật của nó nằm ở chỗ bạn phải biết được mật khẩu kết nối vào cơ sở dữ liệu MySQL của mình

Vì thế, để đảm bảo an toàn và tính bảo

mật cho trang web, bạn cần phải giữ

kỹ mật khẩu quản trị web, mật khẩu kết

sau khi vừa cài xong Joomla, các định dạng tập tin

phổ biến nhất đều được phép tải lên

Enable Flash Uptonder @ yg ven

Tuy nhién, Joomla chi cho phép tải tập tin có kích thước

tối đa là 10MB Nếu muốn thay đổi, bạn có thể sửa lại giá

trị này ở mục Maximum Size,

nếu không muốn giới hạn dung lượng thì

bạn nhập vào số 0 Ngoài ra, bạn cần lưu ý thêm muc Legal Image Extensions

dùng để thiết lập các phần mở rộng tập tin ảnh được phép tải lên Mặc định Joomla chi cho phép tai lên các tập tin

ảnh có đuôi là bmp, NH jDg, png C_

M MỤC ĐỒNG

Kể từ số 241, ø-CHÍP sẽ mở ra chuyên mục mới - Thiết kế web - hướng dẫn từ căn bản đến nâng cao,

công cac Section va Category

Tiếp theo, chúng ta sẽ tạo các

Menu tương ứng để thể hiện các mục

này bên ngoài trang web Để quản lý

các menu, đầu tiên, bạn mở trình duyệt

và truy cập vào địa chi: http://localhost/

mobile/administrator, bạn đăng nhập

bằng tên tài khoản (username) là admin,

còn mục mật khẩu (password), bạn nhập

vào mật khẩu mà bạn đã thiết lập trong

quá trình cài đặt Joomla Tiếp theo, bạn

vào menu Menus, chọn Main Menu

Bạn nhấn vào biểu tượng New để

tạo mới Tiếp theo, bạn bấm vào ô

vuông bên trái mục Internal Link để mở

các mục con của nó ra, và chọn mục

Articles Joomla sé liét ké tat ca cac

dang menu lién quan dén viéc quan ly

tin tức Trong

phần này, Select Menu Item Type

chúng ta chi ec

can quan a ane

tam dén cac hire

menu danh Steere

cho Section earns

va Category, `

còn các nhóm Galen tnt Lait

sẽ được nói a: Seton

phần sau

Bây giờ, chúng ta sẽ lần lượt tạo

các menu tương ứng với các Section

đã tạo ở phần trước Bạn nhấn vào liên

kết Section Blog Layout, sau đó bạn

nhập vào các thông tin bao gồm: Tên

menu (Title), bat buộc phải có, ví dụ Tin

tức Tiếp theo là tên viết tắt của menu

(Alias), bạn phải viết dính liền, không

khoảng trắng và không được bỏ dấu

Muc Display in cho biét menu nay được

hiển thị trong nhóm menu nào, ở đây

bạn chọn là Main Menu

Ở muc Parent Item, néu menu ban

tạo là menu cha, thì ở đây bạn chọn là

Top Nếu menu bạn tạo là menu con, thì

ban phai chon mét menu trong Parent

Item lam menu cha cua no Tiép theo

la muc Published sé cho ban biét menu

này có được sử dụng hay không, mặc

định khi tạo mới menu thì ở đây sẽ là

Yes Mục Order, cho phép bạn sắp xếp

thứ tự giữa các menu Mặc định khi tạo

mới thì menu sẽ nằm ở vị trí cuối cùng,

và bạn chỉ có thể chỉnh sửa lại thứ tự của

menu sau khi bạn đã lưu nó lại

Mục On Click, Open in giúp bạn chọn các hành động khi nhấn vào menu

như: Chuyển đến trang liên kết của

Section (Parent Window with Browser

Navigation), mỏ một cửa sổ mới và

chuyển đến trang liên kết của Section (New Window with Browser Navigation),

mở một cửa sổ mới và chuyển đến bài viết có trong Section (New Window

without Browser Navigatlon)

Menu hem Trpe

‘Section Blog Layout (ae) 1.1

.ienu Rem Detass

ise, Toe

Tiếp theo chúng ta cần cấu hình các

tham số cho menu Ở góc phải, khung

Parameters (Basic), bạn chú ý các mục sau: Mục đầu tiên là Section rất

quan trọng, bạn phải chọn đến Section

mà menu sẽ liên kết Tiếp theo là mục

Description dùng để ẩn/hiện các mô

tả về Section, muc Description Image dùng để ẩn/hiện hình ảnh của Section

Phần bên dưới là cách bố trí hiển

thị bài viết Mục # Leading cho biết số lượng phần giới thiệu của các bài viết

được hiển thị hết bề ngang của trang

Mục # Intro cho biết số lượng phần giới

thiệu của bài viết được hiển thị Cuối

mỗi phần giới thiệu sẽ có dòng chữ nhỏ Read more hoặc Đọc thêm để xem toàn

bộ bài viết Tiếp theo là mục # Column cho biết số cột bài viết được chia trong website của bạn, và mục # Links dùng

để cấu hình số lượng tên bài viết được hiển thị dưới dạng liên kết Sau khi hoàn tất, bạn nhấn Save để lưu lại

.> Paremelers (Besic) Descripbon image mde © Snow

sáng +

Tương tự, bạn tạo thêm menu

- Điện Thoại có

| dang Section Blog

—: Layout Lưu ý

cn | trong qua trinh tao

5 menu Điện Thoại,

ở mục Section

bạn phải chọn đến Section Điện Thoại Sau khi tạo xong, bạn chú ý mục

Order, ở đây bạn có thể sắp xếp lại thứ

tự các menu (ưu tiên từ thấp đến cao)

Hoàn tất mọi việc, thử truy cập

vào trang web tại chỗ http://localhost/

mobile, hay trang chủ trên internet, bạn

sẽ thấy lúc này có thêm hai menu Tin Tức và Điện Thoại nằm ở cạnh trái

TRUNG TAM MUA SAM ĐIỆN THOẠI DI ĐỘNG

Tiếp theo, bạn cần tạo các menu con

HTC, Apple và Nokia nằm trong menu Điện Thoại Nhấn New để tạo mới

menu, lúc này bạn chọn dạng Cafegory Blog Layout (do HTC, Apple và Nokia là

ba Category do bạn tạo ra ở bước trên).

ER Menu Item: [New] jo ia)

© Front Page

© Front Page Blog Layout

Tuong tu nhu tao menu Section Blog

Layout, bạn cũng phải điền vào các

thong tin sau: tén menu (Title), bắt buộc

phải có, tên viết tắt của menu (Alias)

© muc Parent Item, do ban dang tao

menu con của menu Điện Thoại nên

ở đây bạn chọn Điện Thoại Ở phần

Parameter, mục Category, bạn chọn

đến Category mà menu sẽ liên kết,

ví dụ như Điện thoại /APPLE trong

trường hợp bạn đang tạo menu cho

nhóm APPLE Cuối cùng, bạn nhấn

Save để lưu lại Làm tương tự cho menu

con Nokia, HTC cũng thuộc menu

Điện Thoại Quay trỏ lại trang Mobile

bằng cách truy cập vào dia chi: http://

localhost/mobile, bạn sẽ thấy các menu

con đã được tạo ra

EAB Menu tom: (ree

su dung bai viét da tao (Unpublish), di

chuyển một hoặc nhiều bài viết đến

Section hoặc Category (Move), tạo bản sao của một bài viết (Œopy), xóa bỏ một

hoặc nhiều bài viết ( Trash), chỉnh sửa

bài viết đã tao (Edif), tao mdi bài viết

(New) và quản lý các cấu hình dành cho

toàn bộ bài viết (Parameters) Bạn nhấn

vào biểu tượng New để tạo mới Article

i NOKIA 9 thêu sản phẩm E73 _Phupinhed © m ® ve Aes 73 Fromt Page © wo @ ves

Ở khung đầu tiên, bạn điền vào các thông tin: tiêu đề bài viết, bắt buộc phải

co (Title) Tên viết tắt của bài viết, viết

dính liền và không bỏ dấu (Alias) Ở

muc Section va Category, ban chon

cac Section va Category tuong ung cho

bài viết Lưu ý rằng nếu bài viết thuộc

một Category thì bạn phải chọn Section trước, sau đó mới chọn Category

Còn nếu bài viết không thuộc một Section và Category nào thì bạn chọn Uncategorised 6 ca hai muc

Mục Publish cho phép xuất bản bài

viết hay không Nếu ở đây bạn chọn

No, bài viết sẽ không xuất hiện trên trang web nhưng nó sẽ được lưu lại

như một bản nháp Mục Front Page cho phép bài viết có xuất hiện ở trang chủ hay không, hay chỉ xuất hiện trong

we Section va Category

Tiếp theo là khung soạn thảo văn bản

của Joomla Tương tự

category tog Layout ae See nhu Microsoft Office

Tiếp theo chúng ta sẽ tạo các bài

viết (Article) cho trang web Article la

các bài viết, chứa các văn bản và hình

ảnh thể hiện trên web Thông thường,

một article sẽ thường có hai phần bao

gồm: phần giới thiéu (/ntro Text) dung

để nêu ý mở đầu cho bài viết và phần

chi tiét (Description Text) dung dé néu

toàn bộ nội dung bài viết Để tạo mới

một bài viết, bạn quay lại trang quản

tri Joomla, vao menu Content, sau do

chon muc Article Manager

2 w=

® 8 -‹ -‹ ::

Unarchire Archie Publgh Unpublish ove Copy Trash 97°90

est

Trên thanh công cụ, bạn chú ý các

biểu tượng sau: khóa bài viết lại, không

cho người khác chỉnh sửa (Archive), gỡ

bỏ chức năng khóa bài viết (Unarchive),

sử dụng bài viết da tao (Publish), khong

bài viết (HTML)

Hàng thứ ba bao gồm các nút lệnh chèn thước nằm ngang (Insert

Horizontal Ruler), xóa bỏ các định dạng

(Remove Formatting), ần/hiện các dấu

hiệu định dạng có trong bài viết ( Toggle

Guidelines/invisible elements), viết chỉ

số dưới (Subscrip), viết chỉ số trên

(Super Scripf), và chèn các ký tự đặc biệt (Insert Custom Character)

Ngoài ra, bạn còn có thể mở rộng thanh công cụ với nhiều chức năng hơn Để làm được việc này, đầu tiên

bạn vào menu Extensions, chon Plugin Manager Bạn tìm đến mục plugin

Editor - TinyMCE và nhấn vào đó

Ở khung Parameters bên phải, mục

Functionality, ban chon Extended Cuối cùng, bạn nhấn Save để lưu lại

Parameters

» Plugin Parameters

Functionality Easnded [w]

‘Skin Default Version © Off © On

&

Bây giờ khung soạn thảo văn bản

của Joomla đã hiện đầy đủ các nút lệnh:

Bay «| FBS | se

AGGIE ELF RlO ~]

SeBaSR ih sta

7 Peragagh ~ Fontfamty + Fetde + uủu#7@—=noA-+-œ

cập vào bài viết (tương tự như

°zru«e|E#ZĂm|sw = Format ` "i a

E=EiskiG'®\- zgớ 6= Section va Category, sé được nói

—aläix xin rõ hơn ở những phần sau) Tiếp

theo là mục Create Date cho

Ở hàng thứ nhấtbạn biết ngày tạo ra bài viết, và mục Sfart

sẽ thấy các nút lệnh như in dam (Bold), in nghiéng (/talic), gach chan (Underline) hoặc gach đè lên chữ (Strikethrough)

Tiếp theo là các biểu tượng canh trái

(Align Leff), canh giữa (Align Center), canh phai (Align Right) va canh đều

hai bén (Align Full) danh cho van ban

Khung Styles, cho phép dinh dang văn ban dựa trên các thiết lập của CSS Khung Format cho phép ban

chọn lựa các kiểu định dạng dành cho

Paragraph, Heading

Hàng thứ hai là các nút lệnh như liệt kê các đề mục, dạng ký hiệu (Unordered Lisi) hoặc liệt kê các đề mục, dạng chữ số (Ordered Lisi)

Tiếp theo là các nút lệnh đầy lề văn bản

vào một đoạn (Indeni) hay ra một đoạn

hằng tuần, thì ở đây bạn có thể xác định xuất bản bài viết vào các ngày thứ ba,

như vậy bài viết sẽ tự động xuất hiện theo thời gian mà bạn đã định trước

Mục Finish Publishing cho biết ngày hết

hạn đăng bài Nếu bạn chọn một ngày

nào đó trong tương lai thì đến đúng ngày đó bài viết sẽ tự động ẩn đi không hiển thị cho người truy cập xem nữa

Mac dinh, gia tri 6 day la Never @-

¢ THIET KE WEB

Kể từ số 241, e-CHÍP sẽ mủ ra chuyên mục mới - Thiết kế web - hướng dẫn từ căn bản đến nâng cao,

mục đích giúp các bạn chưa biết gì về lĩnh vực này vân có thể tự thiết kế cho mình một trang web ưng ý

trang web khi người xem ghé vào

thăm lần đầu, nhưng chính nội dung các

bài viết mới giữ người xem lại, và lôi kéo

họ trở lại vào những lần sau Bạn cần

chú ý đến điểm này, vì số lượng người

vào thăm trang nhiều, hay ít, phụ thuộc

vào nội dung mà trang web đó cung | Cấp

Ở trong bài trước, chúng ta đã có thể

tạo ra một cấu trúc trang web với các

phan (Section), cac nhém (Category)

Sau đó là tạo ra các bài viét (Article)

Trong Joomla, để quản lý các bài viết,

bạn vào trang quản trị website, đăng

nhập, vào menu Content, sau d6 chon

muc Article Manager

[ section _]

| sen: | [een: |

Nhấn nút New, bạn sẽ bắt đầu tạo ra

một bài viết mới Có hai phần trong bài

viết, phần trên là tiêu đề và các thông

số quản lý Phần dưới chính là khu vực

soạn thảo nội dung bài viết, là nơi mà

bạn gõ nội dung văn bản, cũng như chèn

FT Múc đà phải đến 26, Apple mới chính thức bán ta Phone 4 ‘fie Cam Foren Vem Bếp

| Vigt Nam trước ngây Apple đơa sản phẩm cia hing Ken ké “1

|| bay thế IC hoc số đạng các iên ph củn dit khúc để máy

So động được với các mạng Việt Nam

“| Theo anh Mai Phi Phong, chủ của hiệu PhonGee

| _ mang Viễ Nam, shơng chủ lon và độ ân ph ii mấy bản ra tại Mỹ CHÉP NỘI DUNG TỪ TẬP

TIN WORD Điểm yếu của việc sao chép các nội

dung văn bản từ tập tin soạn thảo trong

Word hay bất kỳ trình soạn thảo văn bản

có định dạng khác, là việc sao chép sẽ mang theo cả phần định dạng của phần mềm soạn thảo đó Các định dạng bị sao chép này sẽ ảnh hưởng đến định dang mà bạn muốn tạo ra trong Joomla

cho bài viết của mình, hoặc hiển thị thành các ký tự lạ làm xấu bài viết Để

tránh các nhược điểm này, khi sao chép văn bản từ tài liệu dạng Word sang, bạn

có hai cách để thực hiện:

Cách thứ nhất, bạn đánh dấu chọn rồi

sao chép toàn bộ nội dung văn bản trong tài liệu Word Sau đó, bạn tiến hành dán nội dung đã sao chép vào một chương

Nhật theo một chủ cửa hiệu kinh

“có 3 chiếc [Phone 4 được đơn về Việt Nam, gi cin né #8 vio nach iy tạ HÀNG hon le)

1 300 USD", anh này kháng đạn chúc nich vi cng cho ti: | Nam trước ngày Apple đưa sản phẩm củ

"48/6 tới, sẽ có 3 chiếc iPhone 4 được £

ni có thì độ vấn chỉ là phiên bảna chữ không hả

trình soạn thảo văn bản thô nào đó, như

Notepad chẳng hạn Kế tiếp, bạn lại

đánh dấu và sao chép toàn bộ nội dung

văn bản thô này từ Notepad, rồi mới dán

nó vào khu vực soạn thảo nội dung bài

viết trong Joomla Phần văn bản thô có

được theo cách này sẽ không gây hiệu ứng định dạng hay ký tự lạ nào cho bài viết của bạn

Cách thứ hai, thường dùng để xử lý

đối với các văn bản Word có chứa hình

ảnh Bạn sẽ dùng tiện ích văn phòng

MS Word tiến hành lưu lại tập tin văn

bản đó lại theo định dạng web (với phần

mở rộng him) Đi kèm tập tin HTML được tạo ra sẽ là một thư mục mang

tên images chứa toàn bộ các hình ảnh

có trong tập tin văn bản trước đó Bạn

mở tập tin htm ra để sao chép toàn bộ nội dung và dán vào khu vực soạn thảo

nội dung bài viết trong Joomla Tiếp theo, bạn sao chép thư muc images vao trong thư mục Œ:\AppServ\www\mobile\ imagøss, rồi tiến hành chèn hình vào những vị trí thích hợp trong bài viết Với trang web trên máy chủ Byethost, thì

bạn cũng tiến hành tương tự, nhưng thư

mục hình ảnh /magss thì cần được tải

lên máy chủ Byethost trước

CHÉP NỘI DUNG TỪ TRANG

WEB KHÁC

Ngoài nội dung có sắn trong tập tin

Word, có thể bạn còn muốn sao chép

nội dung từ một trang web cũ của mình sang trang web mới trén nén Joomla vừa tạo ra Để thực hiện việc này, các

thao tác đơn giản hơn rất nhiều so với việc sao chép văn bản từ nội dung

Word Bạn chỉ việc truy cập vào trang

web cũ, đánh dấu khối rồi sao chép

toàn bộ nội dung vào bộ đệm Sau đó,

bạn dán nội dung đang có trong bộ

đệm vào khu vực soạn thảo nội dung

bài viết trong Joomla là xong Ưu điểm

của việc sao chép nội dung theo cách

này rất đơn giản và nhanh chóng Tuy

nhiên, cũng có nhược điểm mà bạn cần

phải lưu ý, là tất cả các hình ảnh trong

bài viết mà bạn sao chép thực chất vẫn

được chứa trên máy chủ của trang web

cũ Nghĩa là nội dung bài viết vẫn được

lưu trữ trên trang mới, nhưng các liên

kết đến hình ảnh thì vẫn trỏ về nơi chứa

ảnh của trang cũ

Làm như thế, bạn được lợi ở chỗ

không cần tốn dung lượng cho việc

chứa ảnh trong bài viết, và tiết kiệm

được thời gian, công sức cho thao tác

tải ảnh lên máy chủ Byethost chứa

trang Jdoomla của mình Tuy nhiên,

cũng có một điểm bất lợi với cách làm

này là nếu hình ảnh chứa trên máy chủ

của trang web cũ bị xóa, hoặc trang

web đó không còn hoạt động nữa, thì

toàn bộ hình ảnh trong bài viết trên

Joomla của bạn cũng sẽ biến mất

theo Nếu lo lắng về điều đó, tốt nhất

là bạn hãy xử lý trang web cũ như một

tập tin Word có hình, tức là bạn lưu nó

xuống đĩa cứng thành tập tin HTML

và một thư mục ảnh có tên tương ứng

Sau đó, bạn tải ngược thư mục ảnh trở

lên máy chủ Byethosi, rồi chèn ảnh

vào bài viết

thi anh [a trai (Leff), phai (Right)

hay không cai dat (Not sef) Muc

Image Description ding dé ban điền phần nội dung văn bản mô

tả cho bức ảnh Còn mục Image Tiile thì dùng để chứa tiêu đề của hình Nội dung tiêu đề này

sẽ hiện ra khi người đọc rê chuột vào tấm ảnh này trong bài viết của bạn Ngoài ra, nếu thích, bạn hãy đánh dấu chọn vào ô Caption

để hiển thị phần nội dung Image Tifle ngay dưới bức ảnh trong bài viết, mà không cần đợi người xem

rê chuột đến

Chương trình sẽ làm mờ màn hình soạn thảo bài viết, và bật lên một cửa

sổ chứa hình ảnh để bạn chèn vào

bài viết của mình Thư mục mặc định

được dùng để hiển thị ở đây là thư mục Images/stories Cụ thể, nếu trên máy chủ AppSewv, thì thư mục chứa ảnh được hién thi la C:\AppSerwww\mobile\

images\stories Con néu đang chứa web trén may chu Byethost, thi dé là thư muc con \images\stories nam dudi thu

mục \mobile mà bạn tạo ra lúc đầu trên máy chủ Tương tự như trong Windows

Explorer, bạn có thể bấm vào tên các thư

mục để chuyển vào trong các thư mục con đó, hoặc dùng nút Up để chuyển trở

lên thư mục trên đó một cấp

Để chèn một

‘i 5) 23incnes wae 09037 neh ae, te Prone 4s a8 tal ae te

Án vạn maasuted across Ra ont ace I

viết, trước hết bạn cần bấm chọn vào tấm ảnh đó Sau

khi bấm chọn, bạn hãy quan sát muc Image URL, vì đường

viết của mình Trong khung Upload

bên dưới cửa sổ, bạn nhấn Browse và

dò theo cây thư mục trên đĩa cứng của

mình để trỏ đến tập tin ảnh cần tải lên máy chủ Sau khi chọn xong, bạn nhấn

nút Start Upload Khi hình ảnh mới đã

được tải lên hoàn tất, bạn có thể bấm

chọn nó, rồi nhấn Insert dé chén, tuong

tự như các hình ảnh đã có sẵn

Đơn giản hơn, nếu bạn đang làm trên máy chủ web giả lap (/ocalhost), thi ban chỉ việc dùng chương trình Windows

Explorer chép các hình ảnh mà bạn cần dùng làm ảnh minh họa vào thư mục C:1 AppServ\www\mobile\images\stories, rồi sau đó lần lượt chọn hình và nhấn

Insert để thêm vào bài viết

Media Settings A\

Legal Extensions (File |bmp,csv.doc.epg.cif.ica.jpg.odg.odp.ods, oct p

Types)

Maximum Size (in bytes) |10000000

Path to Media Folder images

Path to Image Folder [baiviet

Ngoài ra, nếu bạn muốn thay đổi thư mục hình ảnh mặc định mà Joomla thể hiện mỗi khi bạn cần chèn ảnh, bạn có thể làm như sau Trước hết là m6 Windows Explorer dé tao mét thu

mục mới, ví dụ như thư mục con baiviet trong thư mục chung của trang web là C:\AppServ\wwwl\mobile Sau đó, trong

cửa sổ quản trị web http://localhost/

mobile/administrator

Dutt ont f2 vang 65% d1 Thethone40EQconpsrolwdh the Phong

xmnentvetn ruhowtrofuZemesoin — iseiwrtby2sromwt wanna memessmmanemmsswe | Số tu dong den

Meme nn | Sima atugicne ant Bk me a er Coton GE mr ht ete or om vào mục này

CHÈN HÌNH ẢNH VÀO TRONG cạnh dùng để bạn canh lề cho việc hiển

Đây được xem là thao tác quan trọng Directory ~| up

thứ hai sau việc nạp nội dung văn bản

của bài viết Vì nếu nội dung văn bản

thể hiện phần cơ bản của vấn đề được

nêu ra trong bài viết, thì các hình ảnh

minh hoa khi chèn vào sẽ làm cho bài

viết trông rực rõ, và thu hút hơn Có thể

ban vao menu Site, chon muc Global

Configuration Qua thé

System, khung Media

Settings, 6 muc Path to

Image Folder, ban nhap vào tên thư mục mà bạn

họa sẽ quyết định việc người đọc có bỏ + mdmg cdpugnpmgl'4w.cVdspmgil keeg | pestarchives.ieg bowered by-pof [7 vậy, bắt đầu từ bây giờ,

thời gian ra đọc bài viết của bạn hay _ An EERE | mỗi khi cần chèn hình

chuột đến vị trí cần chèn tấm ảnh minh Upload bạn mong muốn Œ~ họa, sau đó bấm chọn nút Image 6 phia Choose || Start Upload

dưới khung soạn thảo = = NHOM MUC DONG

‹ THIẾT KẾ WEB

Kể từ số 241, ø-CHÍP sẽ mở ra chuyên mục múi - Thiết kế weh - hướng dẫn từ can ban dén nang cao,

mục đích giúp các bạn chưa biết gì về lĩnh vực này vẫn có thể tự thiết kế cho mình một trang weh ưng ý

mục mặc định vào bài viết của mình,

cũng như làm thế nào để tải một tấm

ảnh phù hợp từ máy tính của mình lên

máy chủ web Kế tiếp, chúng ta sẽ

cùng học cách chỉnh sửa các hình ảnh

đã có trong bài viết, cũng như cách

chèn các thành phần không kém phần

quan trọng khác như Flash, Video,

bảng biểu, hay các điểm neo

CHỈNH SỬA CÁC HÌNH ẢNH

CÓ TRONG BÀI VIẾT

Để chỉnh sửa hình ảnh có trong bài

viết, bạn nhấn chuột vào bức ảnh và

chọn biểu tượng Image (#) co trên thanh

công cụ soạn thảo ở hàng thứ hai Bạn

sẽ nhận được một cửa số thiết lập các

thông số hiển thị cho hình ảnh thông qua

ba thẻ Thẻ General sé bao gdm đường

dẫn của ảnh (Image UFL), thông tin mô

ta vé anh (Image Description) và tiêu

dé clia anh (Title) Cửa sổ Preview dưới

cùng hiển thị hình ảnh với kích thước thật

hiện tại để bạn xem nHỦ

bang muc Alignment Trong mục này có

một số chọn lựa dạng cơ bản như cho

việc canh chỉnh vị trí của tấm ảnh như

đặt ảnh ở lề trái van ban (Leff), d&t anh 6

lề phai van ban (Right), hay canh giữa

Một số chọn lựa khác cao cấp hơn, như

General Appearance || Advanced _

Ut laoreet dolore magna, aliquam erat

đặt dòng chữ trong bài viết thẳng hàng

với cạnh trên tấm ảnh (Top), cạnh dưới

tấm anh (Bottom), hay canh gita tinh

theo chiều đứng tấm anh (Middle)

Bạn cũng có thể thay đổi kích thước của ảnh bằng chức năng Dimensions

với hai tham số kích thước cạnh ngang nhân với kích thước cạnh đứng, tính

bằng đơn vị là diém anh (pixel - px)

Bạn có thể nhập vào các giá trị tùy ý, nhưng cũng chính vì thế mà bức ảnh kết quả có thể sẽ bị bóp méo theo chiều ngang hay chiều đứng, nếu hai giá trị kích thước mới không giữ nguyên tỉ lệ ban đầu Cách đơn giản nhất để bạn đảm bảo hình ảnh sẽ giữ nguyên tỉ lệ ban đầu sau khi thu nhỏ hay phóng lớn

là bạn đánh dấu chọn mục Consirain

Proportions Dung tinh nang nay, thi

sau khi bạn nhập số điểm ảnh là chiều dài một cạnh, rồi nhấn nút TA, thì Joomla sẽ tự động điền giá trị số điểm ảnh của chiều dài cạnh còn lại theo đúng tỉ lệ so với cạnh kia

Ba thông số kế tiếp ảnh hưởng đến vibe hiệu chỉnh tấm ảnh là độ dày của

›_ đường viền xung quanh ảnh (Border), thiết lập khoảng cách trên

và dưới của ảnh so với đoạn văn

(Vertical space), hoặc khoảng cách

hai bên cạnh trái và phải của tấm ảnh so với đoạn văn (Horizontal space) Còn phần Class hiện thời bạn cứ giữ nguyên giá trị là No set

°?zUuX|E#=misw

đã tả |iZ J=|2# ®# |2

4| | | ¥ | KSC 6 tn an anc

nội dung trong mục Style Bd chinh la

một đoạn văn bản thể hiện thông tin về những gì bạn đã chọn lựa thay đổi phía

trên dành cho tấm ảnh, các thông số

cách nhau bằng dấu chấm phẩy Ví dụ

như margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px; border: 5px solid #000000;

Vì Sfyle là một hộp văn bản nên bạn

hoàn toàn có thể thay đổi các thông

số này theo ý mình Ví dụ như thay vì khoảng trống phía trên và dưới tấm ảnh được cấu hình bằng nhau là 20 điểm ảnh, thì bạn có thể sửa lại khoảng trống

lề trên là 100 điểm ảnh còn khoảng trống

lề dưới giữ nguyên là 20 điểm ảnh bằng

cách sửa phần đầu muc Style lai thành margin-top: 100px; margin-bottom: 20px;

Va néu thay không thích màu den

mặc định của đường viền ảnh, bạn có thể thay phần đuôi của chuỗi thông

tin Style bằng một giá trị khác, chẳng

hạn như đổi solid #000000; thành solid #FF0000; và ta sẽ thấy đường viền chuyển sang màu đỏ

L | | AHenment [Right ad [Lorem

| | oemeonone (38) [sow [Ban

boallen.com/hex-color-code- generator.html Trong trang ấy,

chỉ cần bạn bấm vào màu sắc

chính ở cột màu, rồi bấm chuột

vào bảng phân biệt độ đậm nhạt

của màu đó trong hình vuông cạnh bên, thì mã màu dạng số thập lục phân (HexaDecimal) sẽ

hiện lên trong ô phía dưới Bạn chỉ

cần đánh dấu khối nội dung ô đó,

và bấm Ctrl+C để sao chép vào

bộ đệm, sau đó mang sang dán

vào để thay thế mã màu có sẵn trong

cuối chuỗi Sfyle như bên trên là xong

Color Picker - Free Online Hex

Color Generator

Get Hex Color Codes Easily and Compare them

Side by Side

Cuối cùng là véi thé Advanced, ban

có thể cấu hình ở khung Swap Image

để cho hình ảnh trong bài viết có tính

tương tác hơn với người xem Trong

muc Alternative Image, ban chon mét

tấm ảnh khác sẽ xuất hiện thay thế cho

ảnh gốc mỗi khi người xem bài viết rê

chuột ngang qua vị trí tấm ảnh đó (for

mouse over) Và bạn cũng có thể chọn

một ảnh khác nữa để khi người xem kéo

chuột ra khỏi khu vực hiển thị ảnh (for

mouse ouj) thì nó xuất hiện

Tuy nhiên, cần cẩn thận khi chọn

lựa các ảnh thay thế này Thứ nhất, các

tấm ảnh dùng thay thế cần có cùng kích

thước với tấm ảnh gốc, để tránh hiện

tượng giật hình làm nhức mắt người xem

bài viết Thứ hai, nếu bạn đánh dấu

mục Alternative image, rồi chọn hai tấm

ảnh mới, khác biệt so với tấm ảnh gốc

ban đầu, thì tấm ảnh gốc chỉ xuất hiện

một lần duy nhất, lúc nạp trang web

chứa bài viết Còn từ sau khi bị người

dùng rê chuột ngang qua lần đầu tiên

trở đi, thì chỉ có hai tấm ảnh thay thế

luân phiên xuất hiện mà thôi

Vì vậy nếu có dùng tính năng này

để trang web hấp dẫn hơn, thì chỉ nên

dùng một hình ảnh thay thế trong mục

for mouse over mà thôi, còn mục for

mouse out thi ban ding lai duéng dan

đến tấm ảnh gốc Như vậy khi người

đọc rê chuột vào tấm ảnh thì một ảnh

khác sẽ hiện ra thay thế, còn khi rê

chuột ra ngoài, thì tấm ảnh gốc xuất

hiện trở lại như lúc mới nạp trang

Sau khi chỉnh sửa xong mọi tham số

trong cả ba thẻ, bạn đừng quên nhấn

nut Update dé luu lại các thay đổi đó và

quay trở lại cửa sổ soạn thảo bài viết

for mouse over

|| | for mouse out

Trường hợp khi bấm nút /mage nhưng

bạn lại không thể thấy được ba thẻ như

vừa trình bày ở trên, thì nguyên nhân là

do bạn chưa tiến hành mở rộng thanh công cụ với nhiều chức năng hơn (như

đã trình bày trong phần 8) Xin nhắc lại

là để mở rộng thanh công cụ, đầu tiên

ban vao menu Extensions, chon Plugin Manager Ban tim tiếp đến mục plugin

là Editor - TinyMCE và nhấn vào đó

6 khung Parameters bén phai, muc

Functionality, ban chon Extended Va

cuối cùng bạn nhấn Save để lưu lại

Quay trở lại phần soạn thảo bài viết mới bằng chức năng New trong menu Article

Manager, bạn sẽ thấy thanh công cụ mở rộng với nhiều nút hơn Và khi tiến hành

chỉnh sửa ảnh, cửa số Inser/Edit image

cũng sẽ hiện đủ ba thẻ như trên

như thế vào nội dung bài viết, bạn nhấn

vào biểu tượng Inserts a new table ( 3Í)

trong khung soạn thảo nội dung ở hàng thứ ba Trong hộp thoại /nsert/Modify table, ở thẻ General, bạn điền vào số cột (Cols) va s6 hang (Rows) can co

trong bảng Kế tiếp là hai thông số quan

trong vé chiéu rong (Width) và chiều cao

(Height) méi 6 Vi trí phần lề văn bản

nhập vào trong ô của bảng xác định bởi mục Celipadding, còn khoảng cách giữa

các ô, theo chiều đứng lẫn chiều ngang

thì được quy định trong mục Cellspacing

Bạn cũng cần chọn lại việc canh chỉnh

lề cho bang (Alignment) la nằm bên trái (leff), ben phai (righf), hay ở giữa (center) bài viết Phần độ dày của đường viền khung (Border) cũng cần được chọn một

giá trị hợp lý, để tăng thêm tính thẩm mỹ

| | | Table caption

Ngoai ra, trong thé Advanced con

rất nhiều các tham số nâng cao ma bạn

có thể hiệu chỉnh Tuy nhiên, bạn chỉ

cần quan tâm đến các mục như hình

nền của bảng (Background image), hướng viết chữ là từ trái sang phải (Left

to right) hay tir phai sang trai (Right to

lefj Và dưới cùng là hai tham số màu

sắc dành cho phần đường viền khung

(Border color), và màu nền của bảng (Background Color) Sau khi điền đầy

đủ các thông số, bạn có thể quay lại mục Siyle phía trên để xem và sửa

chữa lại đoạn mã cấu hình, giống như khi bạn chèn hình ảnh

| eorder color [#99do2s _ |

| Background color [we75617 |

Đặc biệt trong phần chọn màu đường

viền, và màu nền cho bảng, ở cạnh ô

ghi giá trị mã màu, là một nút hỗ trợ chọn màu mà không cần biết mã Bấm

vào nút đó, bạn có một cửa sổ với ba thẻ Picker, Palette, và Named tương

ứng với ba cách chọn Với Picker, bạn sẽ bấm chọn vào một màu trong

dãy, rồi chọn độ đậm nhạt của nó, với

Palette, ban b&m chon màu trong bảng

màu vẽ, còn với Named, bạn có thể

chọn một màu theo cách đọc tên nó trong tiếng Anh