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

12
TH
1
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 :
- Phạm Văn Cảnh MSSV : 1120010020
- Nguyễn Thị Út Hào MSSV : 1120010018

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

Mục Lục
LỜI CÁM ƠN
Phạm Văn Cảnh
Nguyễn Thị Út Hào
12
TH
1
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 12
Th1
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
này.
Xin chân thành cảm ơn.
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
Phạm Văn Cảnh
Nguyễn Thị Út Hào
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
chỉnh trong thời gian sắp tới!
Dưới đây là bản báo cáo tóm tắt quá trình thực hiện dự án của em. Trong quá trình làm
báo cáo, cũng như thực hiện dự án, không thể tránh khỏi những thiếu sót, rất mong được
sự đóng góp ý kiến của thầy giáo và bạn đọc! Xin cảm ơn!
Phạm Văn Cảnh
Nguyễn Thị Út Hào
12
TH
1
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
Phạm Văn Cảnh
Nguyễn Thị Út Hào
12
TH
1
CHƯƠNG 1 TỔNG QUAN VỀ WEBSITE
1.1. Giới thiệu:
- Với sự phát triển vượt bậc của công nghệ thông tin, ngày nay việc quản lý
danh sách hồ sơ về tài nguyên con người đã là một việc cực kì dễ. Các tài liệu quản

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 :
- Phần 1: Đăng Nhập.
- Phần 2: Trang Chủ.
- Phần 3: Giới Thiệu Trường.
- Phần 4: Thư Viện Đề Thi.
- Phần 5: Thông Tin Tuyển Sinh.
- Phần 6: STEMAP.
- Phần 7: Liên Hệ.

- Phần 8: Hình Ảnh.
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 6
12
TH
1
• Chi tiết các phần trong website :
- Phần 1 : Đăng nhập
Cho phép đăng nhập và xem thông tin chỉnh sửa thông tin các đối tượng cần quản lý
trong website.
Chỉ có admin và người có tài khoản đăng nhập dưới quyền giống admin mới được xem
thông tin chi tiết cũng như chỉnh sửa thông tin của các đối tượng có trong danh sách
quản lý.
- 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.
- Phần 4: Thư viện đề thi gồm có 5 mục nhỏ
+ Mục 1: Đề thi môn toán
+ Mục 2: Đề thi môn văn
+ Mục 3: Đề thi môn anh
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 7
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.
Là thư mục hình ảnh của trường, qua các ngày kỷ niệm….
Ở đây người dùng có thể thấy được những hình ảnh của trường, các hoạt động…
Ở phần này người quản lý sẽ cập nhật những hình ảnh mới nhất về trường…
1.3.Sơ đồ luồn dữ liệu
1.3.1 Đăng nhập vào hệ thống
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 8
12
TH
1
D1 D2
Mô tả
Dữ liệu:
• D1: Nhận thông tin đăng nhập của
người dung (Tên, Mật khẩu)
• D2: Màn hình trang chủ
Component (nếu đăng nhập thành
công)
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 D2
Mô tả
Dữ liệu:
• D1: Nhận thông tin yêu cầu đăng
xuất
• D2: Màn hình trang chủ
Component (trạng thái chưa đăng
nhập)
Xử lý:
• Nhận và xử lí D1
• Hiển thị màn hình trang chủ dưới
trang thái đa đăng xuất

Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 9
Người dùng
Đăng nhập vào hệ thống
Người dùng
Đăng xuất khỏi hệ thống
12
TH
1
1.3.3 Xem danh sách
D1 D2
D3
Database

Mô tả
Dữ liệu:
• 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
• D3: Giống D2
Xử lý:
• Nhận D1
• Lấy danh sách quản lý thanh thiếu
niên nhi đồng
• Hiển thị cho người dùng
1.3.4 Thêm mới
D1

D2
Database
Mô tả
Dữ liệu:
• D1: Yêu cầu thêm mới đối tượng và
vị trí lưu
• D2: thông tin chi tiết của đối tượng
cần thêm
Xử lý:
• Nhận D1
• Kiểm tra các thông tin của đối
tượng cần them có hợp lệ không?
• Nếu hợp lệ thì lưu xuống cơ sở dữ
liệu
Phạm Văn Cảnh
Nguyễn Thị Út Hào

Trang 10
Người dùng
Xem danh sách
Người dùng
Thêm mới
12
TH
1
1.3.5 Chi tiết
D1 D4
D2 D3
Database
Mô tả
Dữ liệu:
• 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
1.3.6 Sửa
D1

Mô tả
Dữ liệu:

• D1: Nhận yêu cầu từ người dùng
• D2: Xử lý dũ liệu chỉnh sửa
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 11
Người dùng
Chi tiết
Người dùng
Sửa
12
TH
1
D2
Database
Xử lý:
• Nhận D1
• Kiểm tra xử lý thông tin được sửa
có bị trùng hay không?
• Lưu thông tin đã chỉnh sửa xuống
database
1.3.7 Xóa
D1

D2
Database
Mô tả
Dữ liệu:
• D1: Nhận yêu cầu từ người dùng
• D2: Xử lý yêu cầu xóa đối tượng
Xử lý:

• Nhận D1
• Kiểm tra thông tin đối tượng cần
xóa
• Xóa đối tượng khỏi database
1.3.8 Tải lại
Mô tả
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 12
Người dùng
Xóa
Người dùng
12
TH
1
D1 D4

D2 D3
Database
Dữ liệu:
• D1: Nhận yêu cầu từ người dùng
• D2: Xử lý thông tin
• D3: Xuất danh sách thông tin ra
ngoài
• D4: giống D3
Xử lý:
• Nhận D1
• 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

1.3.9 Tìm
D1 D4

D2 D3
Database
Mô tả
Dữ liệu:
• D1: Nhận yêu cầu từ người dùng
• D2: Xử lý thông tin
• D3: Xuất thông tin ra ngoài
• D4: giống D3
Xử lý:
• Nhận D1
• Kiểm tra dữ liệu chi tiết của đối
tượng trong database
• Hiển thị thông tin đối tượng cần tìm
cho người dùng
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 13
Tải lại
Người dùng
Tìm
12
TH
1
1.4. Sơ đồ lớp đối tượng (múc phân tích)
1.4.1 Sơ đồ lớp
Quản lý kỳ thi tuyển sinh trường PTNK
Thể hiện

Biểu mẫu điền thông tin
Lưới thông tin kỳ thi tuyển sinh Trường
PTNK
Người dung
Tên người dung
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 14
12
TH
1
Chọn danh sách ()
Chọn chi tiết ()
Chọn thêm mới ()
Chọn sửa ()
Chọn xóa ()
Chọn tìm ()
Chọn tải lại ()
Database
Dữ liệu
Nhận dữ liệu ()
Thêm dữ liệu ()
Xóa dữ liệu ()
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 15
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ú
1 Tên người dùng Tên người dùng để
phân biệt (định
danh) giữa những
người dùng với
nhau.
1.4.2.2 Database
STT Tên thuộc tính Mô ta chi tiết Ghi chú
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 16
12
TH
1
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:
- Đây là quan hệ nhiều -1:1 trình quản lý kỳ thi tuyển sinh có thể có
nhiều người dùng cùng một lúc nhưng người dùng chỉ có thể sử dụng duy nhất
một trình quản lý thanh thiếu niên nhi đồng.
1.4.2.7 Quan hệ giữa quản lý và database
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 17
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
CÀI ĐẶT JOOMLA
2.1 Cài Đặt
Appsever Để Tạo Localhost
2.1.1 Giới thiệu chung về Appsever
Phạm Văn Cảnh
Nguyễn Thị Út Hào

Trang 18
12
TH
1
Để 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
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 19
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
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 20

12
TH
1
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
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 21
12
TH
1
Hình 1.4
Bước 6: Điền thông tin sever.
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 22
12
TH
1
Hình 1.5
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
Hình 1.6

Bước 8: Chương trình tiến hành cài đặt
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 23
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:
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 24
12
TH
1

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ả :
Phạm Văn Cảnh
Nguyễn Thị Út Hào
Trang 25