Thiết kế website tin tức bằng joomla

Bước 6: Điền thông tin sever.SeverName : localhost Email: Email quản trị viên Apache HTTP Port: 80 Nhấn NEXT Bước 7: Tên và mật khẩu của MySQL Name: Root mức ưu tiên cao nhất Nhập pas

rờng Đại học Vinh Khoa Công nghệ thông tin

********************

trịnh văn kiệm – tôn lơng bằng

đồ án tốt nghiệp

Thiết kế website tin tức

bằng joomla

Vinh, 05/2010 MỤC LỤC MỤC LỤC 1

LỜI MỞ ĐẦU 3

Chương 1: 5

GIỚI THIỆU CÀI ĐẶT APPSEVER VÀ JOOMLA! 5

1 CÀI ĐẶT APPSEVER ĐỂ TẠO LOCALHOST 5

1.1 Giới thiệu chung về Appsever 5

1.2 Cài đặt Appsever để tạo localhost 5

2 CÀI ĐẶT JOOMLA! TRÊN LOCALHOST 8

3 DÙNG QUYỀN QUẢN TRỊ ĐỂ QUẢN LÝ THÀNH VIÊN XÂY DỰNG WEBSITE 13

Chương 2: 15

THIẾT KẾ CÁC THÀNH PHẦN CHÍNH 15

CHO WEBSITE 15

1 CÀI ĐẶT TEMPLATE 15

1.1 Giới thiệu về template 15

1.2 Cài đặt template cho Joomla! 15

2 PHÂN LOẠI TIN TỨC 16

2.1 Tạo Section 16

2.2 Tạo Category 16

3 TẠO MENU CHO WEBSITE 17

4 TẠO BÀI VIẾT VÀ LIÊN KẾT BÀI VIẾT ĐẾN MENU 19

4.1 Tạo bài viết 19

4.2 Tạo liên kết bài viết đến Menu 20

Chương 3: TẠO CÁC MODULE CHO WEBSITE 22

1 Giới thiệu về module 22

2 Cài đặt module 22

2.1 Module Login 22

2.2 Module footer show copyright website 23

2.4 Module show thành viên lãnh đạo 26

2.5 Module show banner Hình ảnh hoạt động 27

2.5.1 Tạo Client banner 27

2.5.2 Tạo Catelogies Banner: 28

2.5.3 Tạo Banner 28

2.5.4 Show Banner ở giao diện website 29

2.6 Tạo menu Contact cho website 29

2.7 Module show vị trí đang truy cập 32

Chương 4: TẠO TRANG THƯ VIỆN HÌNH ẢNH VÀ TÀI LIỆU CHO WEBSITE 34

1 Tạo thư viện hình ảnh cho website 34

2 Xây dựng trang quản lý tài liệu upload/download bằng DocMan cho website 35

2.1 Giới thiệu về DocMAN: 35

2.2 Cài đặt Docman 35

2.3 Chỉnh sửa cấu hình cho Docman 36

2.4 Thêm một chủng loại tài liệu (category) trên Docman: 38

2.5 Tạo trang download/upload tài liệu: 38

3 Việt hoá cho DocMan 41

KẾT LUẬN 45

TÀI LIỆU THAM KHẢO 46

LỜI MỞ ĐẦU

Ngày nay, Internet đã trở thành một phần không thể thiếu trong các lĩnhvực phát triển của xã hội Theo các thống kê mới nhất vào tháng 03/2010 sốlượng người đã và đang tiếp cận với internet trên toàn thế giới xấp xỉ 400 triệungười, và để thiết lập sự hiện diện của một tổ chức, cá nhân với một phần trong

số này, website là một sự lựa chọn rất hiệu quả Bên cạnh những tác dụng to lớn

đối với các tổ chức khác nhau, website còn là nơi chia sẻ kiến thức và kết nốicộng đồng, thực sự đem lại rất nhiều lợi ích thiết thực Từ những hiệu quả mà

một website mang lại, chúng em muốn tìm hiểu về cách "Xây dựng và thiết

kế website".

Có nhiều phần mềm, công cụ hỗ trợ thực hiện thiết kế một website,Joomla! là hệ thống quản trị nội dung mã nguồn mở số 1 thế giới hiện nay đượcviết bằng ngôn ngữ PHP và kết nối đến cơ sở dữ liệu SQL Linh hoạt, đơn giản,tính tuỳ biến rất cao và cực kỳ mạnh mẽ, đó là những gì có thể nói về Joomla!,được sử dụng trên toàn thế giới từ những trang web đơn giản cho đến những ứngdụng phức tạp Việc cài đặt dễ dàng, quản lý đơn giản, đáng tin cậy Đó là các lý

do chúng em chọn Joomla để "Xây dựng và thiết kế website".

Giới thiệu tổng quan về Joomla! :

Joomla! có các đặc tính cơ bản: 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 tinnhanh, blog, diễn đàn, bình chọn, bảng biểu, hỗ trợ tìm kiếm trong site và hỗtrợ đa ngôn ngữ

+ Hiện Joomla! được ứng dụng đối với: Các cổng thông tin điện tử, thươngmại trực tuyến, báo chí trực tuyến, website của cá nhân hoặc tổ chức

Có nhiều thành phần mở rộng (component, module, ) Phiên bản đầu tiên(1.0.0) ra đời ngày 15.09.2005 Phiên bản tốt nhất của dòng 1.0.x là 1.0.13 rađời ngày 21.07.2007

+ Dòng phiên bản 1.5.x cũng đã phát triển Joomla! 1.5 RC1 vào cuối tháng 7năm 2007, và đến nay đã nâng cấp đến bản 1.5.15 vào tháng 9 năm 2009

Báo cáo gồm 4 chương:

Chương 1: Giới thiệu cài đặt Appsever và Joomla!

Chương 2: Thiết kế các thành phần chính cho website

Chương 3: Tạo các module cho website

Chương 4: Tạo trang thư viện hình ảnh và load tài liệu cho website

Chúng em xin gửi lời cảm ơn chân thành đến thầy giáo Tiến sỹ Nguyễn Trung

Hòa đã giúp đỡ chúng em hoàn thành bản báo cáo này Mặc dù có nhiều cố gắng

nhưng Joomla là một hệ thống quản trị nội dung mã nguồn mở tương đối mớihiện nay, do vốn kiến thức chưa sâu nên chắc chắn trong báo cáo này chúng emcòn nhiều thiếu sót, rất mong sự đóng góp ý kiến của các Thầy, Cô giảng viên

và toàn thể các bạn sinh viên

Vinh, tháng 05 năm 2010

Sinh viên thực hiện:

Trịnh văn Kiệm Tôn lương Bằng

Chương 1:

GIỚI THIỆU CÀI ĐẶT APPSEVER VÀ JOOMLA!

1 CÀI ĐẶT APPSEVER ĐỂ TẠO LOCALHOST

1.1 Giới thiệu chung về Appsever

Để xây dựng website Joomla! trên localhost, cần phải có một server ảotrên máy tính, Appsever là một software và cũng là một công cụ giả lập sever,hosting ngay trên PC, ngoài Appsever hiện nay còn nhiều trình giả lập khác nhưEasyPHP, Xampp, Wamp, VertrigoServ

Appsever tích hợp sẵn các tính năng của Apache, MySQL, PHP vàphpMyadmin Ưu điểm của Appsever là chương trình này hoàn toàn miễn phí,

dễ sử dụng và rất nhẹ, phù hợp với các máy cấu hình trung bình, tương thích cao

và đầy đủ chức năng để chạy PHP

Tải chương trình này tại trang chủ: www.appservnetwork.com

1.2 Cài đặt Appsever để tạo localhost

a Các bước cài đặt

Bước 1: Chạy tập tin chương trình

Bước 2: Xuất hiện giao diện chương trình Nhấn NEXT

Bước 3: Xuất hiện bản License, chọn I argee Nhấn NEXT

Bước 4: Chọn đường dẫn cài đặt (mặc định là C:\AppSev) Nhấn NEXT

Bước 5: Chọn các Components, Ở Appsever đã tổ hợp cài đặt Apache,

MySQL, PhpMyadmin Nhấn NEXT

Bước 6: Điền thông tin sever.

SeverName : localhost

Email: Email quản trị viên

Apache HTTP Port: 80

Nhấn NEXT

Bước 7: Tên và mật khẩu của MySQL

Name: Root (mức ưu tiên cao nhất)

Nhập password và confirm password

Nhấn NEXT

Bước 8: Chương trình tiến hành cài đặt

Bước 9: Hoàn tất cài đặt.

Chọn Start Apache và Start MySQL để chương trình khởi động

Nhấn FINISH

Với cài đặt mặc định:

C:\AppServ\www là địa chỉ webroot, nơi copy các file php vào đây

C:\AppServ\mysql\data\ chứa CSDL MySQL, mỗi CSDL sẽ là 1 folder, để sao lưu dữ liệu MySQL, copy folder này thành nhiều bản sao

Để đăng nhập cơ sở dữ liệu, vào trình duyệt "localhost/phpmyadmin",Hộp thoại xuất hiện yêu cầu nhập User Name và Password (User Name vàPassword nhập khi cài đặt Appsever, mặc định User Name là root) Kết quả:

2 CÀI ĐẶT JOOMLA! TRÊN LOCALHOST

Tải chương trình tại địa chỉ: www.joomla.org

a Tiến hành cài đặt

Giải nén file zip ra một thư mục (tạm đặt tên thư mục là joomla) và chép thư

mục joomla vào thư mục www của Appsev (mặc định là C:\Appsev\www).

Mở trình duyệt web, gõ localhost/joomla (nếu thư mục chứa mã nguồn

Joomla! trong thư mục www của Appsev là joomla, như đã nói ở trên) Trangweb Joomla! Web Installer xuất hiện

NEXT để qua bước tiếp theo và PREVIOUS để trở lại bước trước.

Bước 1: Choose Language: chọn ngôn ngữ.

Chọn English (United Kingdom) (thường để default) và nhấn NEXT

Bước 2: Pre-installation Check: Kiểm tra cài đặt

kiểm tra xem hệ thống có thể cài được Joomla! không, phần Recommended

Settings gồm 2 cột (bên phải là yêu cầu Recommended, bên phải là hệ thống

của Actual) Actual tương xứng sẽ có màu đỏ ở phần nào thì tức là phần đó chưa đáp ứng được yêu cầu Joomla! đặt ra, nếu là phần Register Globals thì

khắc phục bằng cách liên hệ với nhà cung cấp hosting để tắt đi

Nhấn NEXT

Bước 3 License: quy định sử dụng chương trình

Nhấn NEXT

Bước 4: Database Configuration: Thiết lập cơ sở dữ liệu

- Database Type: Hiện MySQL hỗ trợ 2 chuẩn là mysql và mysqli ( mới hơn ),

thường chọn mysql

- Host Name: nếu sử dụng MySQL trên chính máy cài Joomla! thì điền vào là

localhost, còn trong trường hợp khác, nếu sử dụng MySQL và truy xuấtdatabase thông qua 1 máy khác, thì chúng ta điền tên host đó hoặc IP của host

đó tại đây

- Username: tài khoản MySQL khi cài AppSever, nếu dùng trên localhost thì

tài khoản này nên đặt là root ( tài khoản có mức ưu tiên cao nhất ), trongtrường hợp dùng các host shared thì tài khoản này chỉ có tác dụng trong host và

bị giới hạn 1 vài tính năng,

- Password: mật khẩu tài khoản MySQL, Khi cài AppSever.

- Database name: Chọn tên cho database

- Advanced Settings: Các thiết lập nâng cao, ở đây mục prefix nghĩa là tiền tố,

nó sẽ đứng trước tên của các table trong CSDL và dùng để phân biệt với cáctable khác

Nhấn NEXT

Bước 5: FTP Configuration: thiết lập FTP, có thể mở hoặc không.

NhấnNEXT

Bước 6: Main Configuration: thiết lập cho website như tên web, email và

password của admin

- Site Name: đặt tên website

- Confirm the admin email and password Password này sẽ là password của

admin sau này đăng nhập vào trang quản trị của website

- Install default sample data: Cài đặt mặc định dữ liệu cho Joomla!

- Load local Joomla! 1.5 SQL script : Export dữ liệu từ bản 1.5 cũ và load tại

đây

- Load migration script : dùng để nâng cấp các trang từ phiên bản 1.0.x lên

1.5

Nhấn NEXT

Bước 7: Finish: Cài đặt hoàn tất

b Kiểm tra

Để website hoạt động, cần xóa hoặc rename thư mục Installation trong thư mục

Appsev\www\Joomla Chọn Site để xem thử site (địa chỉ truy cập vào site có

dạng "http://localhost/joomla")

Vào C:\AppServ\www\webcntt\ để sửa lỗi cơ bản bằng cách viết vào sau dòng

1 của configuration dòng ini_set(“memory_limit”, “30M”);

Kết quả thu được:

3 DÙNG QUYỀN QUẢN TRỊ ĐỂ QUẢN LÝ THÀNH VIÊN XÂY DỰNG WEBSITE

Việc xây dựng một website trên thực tế luôn là một vấn đề phức tạp, donhu cầu biến đổi mà website có thể thay đổi các mục đích, bố cục nên sự đónggóp phát triển website của các thành viên khác chiếm một vai trò quan trọng

TRANG QUẢN TRỊ:

Mở trình duyệt web, nhập địa chỉ: "http://localhost/administrator"

Xuất hiện trang quản trị, nhập :

Username : admin

Password: là password ở bước 6 khi cài đặt Joomla!

Xuất hiện trang quản trị website:

Các nội dung chính trong báo cáo được thực hiện tại trang quản trị này

GIỚI HẠN THÀNH VIÊN

Tại trang quản trị, sử dụng tab: Site/ User Manager

Thêm thành viên: chọn New User

Name: Tên thành viên

UserName: Tên sử dụng khi đăng nhập website

Email: Email thành viên

New Password: nhập mật khẩu thành viên

Verify Password: nhập lại mật khẩu

Group: Tạo quyền quản trị của thành viên

Public Front-end: Thành viên có quyền đăng nhập website

Public Back-End: Thành viên có quyền đăng nhập quản trị website

Xóa thành viên: Tick vào tên thành viên và nhấn Trash

Hạn chế thành viên: Chọn thành viên và đổi group (nhóm làm việc) phù hợp.

Kết quả thu được: danh sách thành viên và nhóm làm việc của website:

Chương 2:

THIẾT KẾ CÁC THÀNH PHẦN CHÍNH

CHO WEBSITE

1 CÀI ĐẶT TEMPLATE

1.1 Giới thiệu về template

Template là một bản mẫu khung sẵn trong đó cho phép người dùng đặtcác vị trí module và component đã được định vị trước

1.2 Cài đặt template cho Joomla!

Tuỳ thuộc vào nhu cầu và ý muốn mà chúng ta chọn cho mình những

template hợp lý Sau khi tải về máy, mở trang quản trị, chọn menu Extensions,

Install/Uninstall chọn đường dẫn đến templates, nhấn Upload File & Install

để cài đặt

Tiếp theo vào Extensions\Template Manager Di chuyển chuột đến template

để xem mẫu, chọn Template cho website bằng cách tick vào temp vừa cài đặt

chọn Defaut.

Kết quả thu được:

2 PHÂN LOẠI TIN TỨC

Với mục đích xây dựng một website giới thiệu, không chỉ cần nội dungbài viết phải có chất lượng và chọn lọc kĩ càng, việc bố cục và sắp xếp bài viếtcũng rất quan trọng, với những website vừa và nhỏ, việc phân vùng, chủng loạitài liệu, bài viết được thực hiện đơn giản hơn

2.1 Tạo Section

Section dùng để phân vùng tin tức

Mở menu Content/Section Manager

Section Title: dùng để hiển thị ở Back-End

Section Name: hiển thị ở Front-End

Nhấn Apply và Save để kết thúc.

2.2 Tạo Category

Catelogy dùng để phân loại tin tức

Mở menu Content/Catelogy Manager

Catelogy Title: dùng để hiển thị ở Back-End

Catelogy Name: hiển thị ở Front-End

Select Section: Chọn vùng tin tức đã tạo (Section)

Nhấn Apply và Save để kết thúc.

3 TẠO MENU CHO WEBSITE

a Tạo Menu

Mở menu Menus/Main menu/New:

Select Menu Item Type: Chọn Internal Link\Articles\Category Blog

Layout

Tittle: Trang chủ (tên menu)

Display in: Vị trí hiển thị

Parent Item: Cấp độ của Menu ( chọn Top)

Published: Hiển thị trên web (Yes)

Order: Thứ tự Menu

Access Level: Mức độ truy cập

On Click, Open in: Chọn trình duyệt khi click chuột

Parameters:

Section: Chọn vùng tin tức

Description: Phần mô tả

Description Images: Ảnh hiển thị

Nhấn Apply và Save để kết thúc tạo menu

b Hiển thị Menu lên website

Để làm menu mặc định, chọn dấu tick vào menu và nhấn Default Để hiển thị menu nhấn Published Để khóa menu: UnPublished.

Kết quả thu được khi Published menu vừa tạo:

4 TẠO BÀI VIẾT VÀ LIÊN KẾT BÀI VIẾT ĐẾN MENU

4.1 Tạo bài viết

Mở menu Content/Aticle Manager/New

Xoá bài viết : Mở menu Content/Aticle Manager tick chọn bài viết cần xóa và nhấn Trash

Sửa bài viết : Mở menu Content/Aticle Manager và chọn bài viết cần sửa.

Apply và Save để kết thúc

4.2 Tạo liên kết bài viết đến Menu

Mở menu Menus/Main menu/New:

Select Menu Item Type: Article/Article Layout

Title: Tên Menu

Parrent Item: Chọn vị trí xuất hiện của menu

Access level: mức độ truy cập : Chọn public

Parameters/ Select Article: Chọn bài viết menu trỏ đến (liên kết)

Apply và save để kết thúc, Preview để xem trước.

Nếu muốn thay đổi liên kết từ menu đến bài viết ta có thể thực hiện bằng cách

vào Menus/Main Menu chọn menu cần thao tác và thay đổi liên kết đến bài viết ở phần Parameters/ Select Article.

Kết quả:

Chương 3: TẠO CÁC MODULE CHO WEBSITE

1 Giới thiệu về module

Module là một trong 3 thành phần mở rộng chính của Joomla! Đó là một

đoạn mã nhỏ thường được dùng để truy vấn các thông tin từ cơ sở dữ liệu và

hiển thị các kết quả thu được Nó có thể được nạp vào một vị trí bất kỳ trêntemplate (left, right, bottom, foot, top hoặc do người dùng tự định nghĩa); cóthể hiện trên tất cả các trang của Website hay một số trang được ấn định Người

sử dụng thường chỉ nhận thông tin trả về từ module, nên khả năng tương tác làkhá hạn chế, nhưng các module lại đóng vai trò quyết định trong bố cục củawebsite, vì vậy khi đặt một module lên web, điều đầu tiên hiệu quả module nàymang lại và sự hợp lý của vị trí module

2 Cài đặt module

2.1 Module Login

Mở menu Extentsions/ Module Manager chọn New/Login nhấn Next

Tùy chọn vị trí hiện module ở Postion Nhấn Apply và Save để kết thúc

Để show module Login ra website, chọn Enable và nhấn Preview để xem

trước Sau đây là kết quả thu được:

2.2 Module footer show copyright website

Mở menu Extentsions/Module Manager chọn New/Custom HTML

Postion: chọn footer (thông thường là gán vị trí cuối cùng của website)

Custom output chọn Edit HTML source

Gõ đoạn code sau vào hộp thoại :

<p><span style="color: #eef04f;"> Nội dung copyright website

<br/>

Điện thoại: +84915110366</span></p>

Trong đó ta có thể thay màu của chữ bằng cách thay vào chuỗi mã hexa tương ứng Apply và Save để kết thúc Kết quả thu được:

2.3 Module show slide ảnh giới thiệu ở Trang chủ

Mở menu Extensions/ Install/Uninstall chọn đường dẫn đến gói cài đặt module và nhấn Upload & Install.

Copy thư viện ảnh cho slide vào thư mục: AppServ\www\Joomla\images\

stories

Mở menu Extensions/ Module Manager chọn mod vừa cài đặt

Module Paramenters:

Start Item: Mục bắt đầu

Main Item width: Chiều rộng khung Slide

Main Item hight: Chiều cao khung slide

Description: Phần mô tả ( show hoặc không)

Description When: Nếu Description chọn Yes thì chọn thao tác nào để hiện

mô tả

Readmore text: Xem thêm

Animation Duration: Thời gian chuyển giữa hai ảnh liên tiếp

Animation Type: Kiểu hình thức chuyển hai ảnh liên tiếp ( thường chọn Fly vì đẹp hơn )

Effect: Hiệu ứng chuyển giữa các ảnh

Container Width: Có tác dụng nếu chọn Animation type là Move