Đồ án Thiết kế web trên nền joomla

Sau đây mình xin chia sẻ với tất cả các bạn yêu thích chuyên ngành công nghệ thông tin bài báo cáo về môn thiết kế Web .Bài báo cáo này nói về trường Trung Học Phổ Thông Năng KhiếuĐại Học Quốc Gia TPHCM được thiết kế trên nền JOOMLA .Tuy nó còn sơ sài nhưng mình nghỉ nó có thể có ích cho các bạn khi học ngành này.

TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ VẠN XUÂN

KHOA CÔNG NGHỆ THÔNG TIN

  

BÁO CÁO MÔN HỌC THIẾT KẾ WEB

GVHD : Thầy Trần Việt Khánh

Sinh viên thực hiện :

12 TH 1

-Mục Lục

Trước tiên, tôi gởi lời cảm ơn chân thành đến Trường Cao Đẳng Kỹ Thuật Công Nghệ Vạn Xuân đã tạo điều kiện thuận lợi cho tôi học lớp 12Th1 CNTT, tôi gởi lời cảm ơn chân thành đến qúi thầy cô bộ môn đã nhiệt tình giảng dạy tôi trong thời gian qua, qua đó tôi

đã có được những kiến thức rất bổ ích để làm bài báo cao Đặc biệt tôi gởi lời cảm ơn chân thành đến thầy Trần Việt Khánh đã nhiệt tình hướng dẫn và có nhiều đóng góp cho tôi thực hiện bài tiểu luận

12 TH 1

LỜI NÓI ĐẦU

Ngày nay, Internet đã trở thành một phần không thể thiếu trong các lĩnh vực phát triển của xã hội 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ối cộng đồng, thực sự đem lại rất nhiều lợi ích thiết thực ngày càng khẳng định được tính hữu dụng và sức mạnh trong mọi phương diện, mọi ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường hiện như bây giờ Đặc biệt là trong mùa thi cử , phụ huynh học sinh cần biết thông tin tuyển sinh về các trường phổ thông ,cao đẳng , đại học Hiện nay có rất nhiều người thường xuyên truy cập các trang web thông tin tuyển sinh để xem các tin tức tuyển sinh thay vì mua các tờ báo ở ngoài hiệu sách báo! Đã có rất nhiều website tuyển được xây dựng để nhằm thỏa mãn nhu cầu tra cứu thông tin hàng ngày của người Việt Nam Từ những hiệu quả mà một website mang lại, 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 được viế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 ứng dụ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 em chọn Joomla là công cụ để thực hiên đề tài "Xây dựng website tuyển sinh trường Phổ Thông Năng Khiếu – ĐHQG Tp.HCM bằng joomla".

Sau một thời gian học tập và tìm hiểu, em tiến hành xây dựng một website tuyển sinh nhằm mục đích là đáp ứng thêm nhu cầu tra cứu thông tin tuyển sinh ngày càng nhiều của mọi người

Trong quá trình tiến hành dự án, việc cập nhật thông tin mới nhất còn hạn chế, kiến thức học hỏi còn hạn hẹp Do đó trang Web chưa thật sự đầy đủ về nhiều mặt em sẽ điều

Tp.HCM, ngày 04 tháng 06 năm 2014

HỌC SINH THỰC HIỆN

Phạm Văn Cảnh Nguyễn Thị Út Hào

lý giờ đây đã được xây dựng trên rất nhiều tiện ích đặt biệt là các WEBSITE quản

lý Và để quản lý một cách tối ưu sổ sách, thông tin của các học sinh cho một

trường nào đó đã quá đơn giản, thồng qua việc chỉ cần nhập dữ liệu vào hệ thống quản lý của một website

- Trong số đó có website của Thông tin tuyển sinh Trường PHỔ THÔNG NĂNG KHIẾU được ra đời để đáp ứng nhu cầu quản lý học sinh, thông tin của

học sinh

- Khi trang Website Quản lý này ra đời cho thấy được sự tiện dụng và hữu ích

của nó so với việc nhập liệu thủ công bằng giấy viết Hơn nữa rất tiết kiệm thời gian thay vì phải tốn nhiều thời gian để nhập liệu so với vài cú click chuột nhập dữ liệu trên bàn phím

1.2 Mô Tả Hiện Trạng:

• Components về quản lý kỳ thi Tuyển Sinh cho Trường PTNK (Entrance

Exam Management System) là một website mang tính xây dựng.

• Trong đó có một người quản lý tài liệu cho phép nhập xuất thông tin với vai trò là admin của website

• Components được cập nhật và chỉnh sửa trực tiếp trên website quản lý

dưới sự cho phép của admin ( người quản lý hoặc người có tài khoản đăng nhập trên website)

• Mọi người có thể xem thông tin và tìm tiếm thông tin trên trang chủ của website

•

Hệ thống website quản lý sẽ có 8 phần :

• Chi tiết các phần trong website :

- Phần 2 : Trang Chủ gồm có 7 mục nhỏ

+ Mục 1: Kết quả thi

+ Mục 2: Thông báo nhận số báo danh

+ Mục 3: Đăng ký vào lớp 10 Công Lập

+ Mục 4: Đại học Quốc Gia tuyển thẳng học sinh trường

+ Mục 5: Chỉ tiêu vào lớp 10 tại Tp.hcm

+ Mục 6: Tp.hcm mở rộng tuyển thẳng lớp 10

+ Mục 7: Tuyển sinh lớp 10 tại Tp.hcm

Đây là phần giới thiệu của trang web hay nói cách khác là bộ mặt của trang web Ở trang này người xem có thể biết được các thông tin của trang web vừa cập nhật,

Website hiện đang quản lý cho khu vực nào, bộ phận nào, quản lý về vấn đề gì…v…v.Người lập ra trang web sẽ cập nhật các thông tin mới khi cần thiết và có thể chỉnh sửa lại trang web nếu có yêu cầu

Là đường dẫn đầu tiên cho việc tìm kiếm mọi thông tin trên web, nơi hiển thị toàn bộ chức năng mà trang web quản lý này có

- Phần 3: Giới thiệu trường gồm có 2 mục nhỏ

+ Mục 1: sơ đồ trường+ Mục 2: lịch sử trường

Là nơi giới thiệu về trường , về ngày thành lập, các hoạt động cơ bản của trường trong suốt thời gian qua

Đây là nơi để người dung tìm kiếm thông tin về trường

Cũng là nơi người người lập web sẽ cập nhật các thông tin mới khi cần thiết

12 TH 1

+ Mục 4: Đề thi môn lí+ Mục 5: Đề thi môn hóaĐây là nơi lưu dữ các đề thi qua các năm của trường

Thư viện này giúp cho người dùng dễ dàng tiếp cận với những tài liệu cần thiết (đề thi qua các năm)

Ở đây người quản lý web sẽ cập nhật tài liệu về đề thi mới nhất, chinh sửa khi cần thiết

- Phần 5: Thông tin tuyển sinh

Cũng như những phần trên Thông tin tuyển sinh, cũng là nơi nói về những thông tin cần thiết cho người dùng về thông tin tuyển sinh của trường

Ở phần này admin của web sẽ cập nhật tài liệu cần thiết về tuyển sinh của trường, thay đổi chinh sửa nếu cần thiết

- Phần 6: STEMAP

Phần này thể hiện khái quát về trang thông tin về trường PTNK

Thông qua phần này người dùng có thể biết được minh đang ở đâu trong trang web

- Phần 7: Liên hệ

Liên hệ là nơi lưa dữ cái thông tin như số điện thoại, địa chỉ trường, tên trường…Giúp cho người dùng dễ dàng tiếp cận những thông tin cần thiết khi cần để liên hệ về trường

Phần này người quản lý web có thể cập nhật những thông tin về liên hệ mới sau khi thay đổi

- Phần 8: Hình ảnh

Xử lý:

• Nhận và kiểm tra D1: tên và mật khẩu phải trùng khớp

• Hiển thị màn hình trang chủ để người dung bắt đầu làm việc

1.3.2 Đăng xuất khỏi hệ thống

• D1: Nhận yêu cầu từ người dùng

• D2: Thông tin danh sách Thanh Thiếu niên Nhi đồng

• D1: Nhận yêu cầu từ người dùng

• D2: Xử lý thông tin chi tiết của đối tượng được yêu cầu

• D3: Xuất thông tin chi tiết của đối tượng

• D4: giống D3

Xử lý:

• Nhận D1

• Kiểm tra xử lý thông tin dữ liệu

• Hiển thị thông tin chi tiết của đối tượng cho người dùng

• D1: Nhận yêu cầu từ người dùng

• D2: Xử lý yêu cầu xóa đối tượng

• Kiểm tra dữ liệu trong database

• Hiển thị toàn bộ dữ liệu thông tin đối tượng ra cho người dùng

Biểu mẫu điền thông tin

Lưới thông tin kỳ thi tuyển sinh Trường

12 TH 1

1.4.2 Danh sách các đối tượng

1.4.2.1 Người dung

STT Tên thuộc tính Mô ta chi tiết Ghi chú

phân biệt (định danh) giữa những người dùng với nhau

1 Dữ liệu Chứa toàn bộ dữ

liệu của các trình quản lý

1.4.2.3 Quản lý kỳ thi tuyển sinh trường PTNK

STT Tên thuộc tính Mô ta chi tiết Ghi chú

1 Thể hiện Cách thức thể hiện

của trình quản lý kỳ thi tuyển sinh trường PTNK

2 Biểu mẫu điền

thông tin

Dùng để cho người dùng nhập liệu

3 Lưới thông tin quản

lý kỳ thi tuyển sinh trường PTNK

Hiển thị toàn bộ thông tin quản lý kỳ thi tuyển sinh

trường PTNK

1.4.2.4 Danh sách các quan hệ

1.4.2.5 Quan hệ giữa người dùng và database:

- Đây là quan hệ nhiều – 1:1 database có thể có nhiều người dung sử dụng cùng một lúc nhưng người dung chỉ có thể sử dụng duy nhất một database

1.4.2.6 Quan hệ giữa người dùng và quản lý kỳ thi tuyển sinh trường PTNK:

12 TH 1

- Đây là quan hệ 1-1:1 trình quản lý kỳ thi tuyển sinh chỉ sử dụng một database và ngược lại

CHƯƠNG 2

Để xây dựng website Joomla! trên localhost, cần phải có một server ảo trê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

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

Hình 1.1

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

12 TH 1

Hình 1.2

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

Hình 1.3

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

12 TH 1

Hình 1.4

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

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 passwordNhấn NEXT

Hình 1.6

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

12 TH 1

Hình 1.7

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

b Kiểm tra

Mở trình duyệt web, gõ địa chỉ: "http://localhost/ "(hoặc "http://127.0.0.1")

Trình duyệt sẽ hiện ra như sau:

Hình 2.1Để xem đầy đủ thông tin về sever vừa cài đặt, ta có thể truy cập trang

"http://localhost/phpinfo.php"

Để đă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ả :

12 TH 1

Hình 2.22.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) Trang web 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

Hình 3.1

Hình 3.3

Nhấn NEXT

12 TH 1

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

Hình 3.4

- 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 ), trong trườ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ác table khác

12 TH 1

Hình 3.5

- 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

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:

Hình 3.62.3.Dùng Quyền Quản Trị Để Quản Lý Thành Viên Xây Dựng

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, do nhu cầu biến đổi mà website có thể thay đổi các mục đích, bố cục nên sự đóng gó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!

12 TH 1

Hình 3.7

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

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:

Hình 3.9

12 TH 1

CHƯƠNG 3 THIẾT KẾ CÁC THÀNH PHẦN CHÍNH

CHO WEBSITE

3.1.Cài Đặt Template

3.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 đặt các

vị trí module và component đã được định vị trước.

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

12 TH 1

Ta coppy logo ta muốn thay vào thư mục C:\wamp\www\templates\images Sau đó vào Extensions\template manager chọn template ta đang sử dụng Chọn Edit CSS chọn template.css bấm Edit chèn vào background:

transparent url vị trí logo mà ta chọn

Hình 4.3

Với mục đích xây dựng một website giới thiệu, không chỉ cần nội dung bà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ết cũng rất quan trọng, với những website vừa và nhỏ, việc phân vùng, chủng loại tài liệu, bài viết được thực hiện đơn giản hơn

3.2.1 Tạo Section

Section dùng để phân vùng thông tin

Mở menu Content/Section Manager

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

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

Hình 5.1

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

12 TH 1

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

Hình 6.13.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

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.