ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: WEBSITE CUNG CẤP TÀI LIỆU CHO KÌ THI THPT

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ
TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI:
WEBSITE CUNG CẤP TÀI LIỆU CHO KÌ THI THPT

Sinh viên thực hiện :

NGUYỄN CÔNG LÂM
NGUYỄN VĂN DŨNG
Giảng viên hướng dẫn : NGUYỄN THANH BÌNH
Lớp
: 20IT1


Đà nẵng, tháng 5 năm 2021


TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ
TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI:
WEBSITE CUNG CẤP TÀI LIỆU CHO KÌ THI THPT

Sinh viên thực hiện

:

Giảng viên hướng dẫn :
Lớp
:

NGUYỄN CÔNG LÂM
NGUYỄN VĂN DŨNG
NGUYỄN THANH BÌNH
20IT1

1


Đà Nẵng, tháng 5 năm 2021

2


MỞ ĐẦU
1. Giới Thiệu
Ngày nay, chúng ta đang được sống trong kỷ nguyên của tin học nhờ sự
vượt bậc sự bùng nổ mạnh mẽ của công nghệ thông tin, Công nghệ thơng
tin khơng ngừng chỉ dừng lại ở mục đích phục vụ cho khoa học kĩ thuật
mà đi sâu vào đời sống, chính trị, kinh tế, xã hội, trở nên thân thiện, gần
gũi, mang lại nhiều lợi ích cho con người. Cơng nghệ thơng tin ngày càng
khẳng định được tính hữu ích 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ờ.

Đi kèm theo đó, các hệ thống website cũng phát triển không ngường với
đủ các lĩnh vực: văn hố, thời sự, khoa học cơng nghệ, làm đẹp, nấu ăn,
thể thao, ca nhạc, phim ảnh, giáo dục, y tế… Tuy nhiên, để tạo ra một
trang web có sức sống bền lâu thì bản thân nó phải mạng lại lợi ích cho
nhiều người. Giao diện bắt mắt là yếu tố quan trọng để người xem click
chuột đến website của bạn. Những yếu tố quyết định giữ chân đọc giả lại
là nội dung mà website cung cấp.
Trong thời gian 2 tháng , được sự giúp đỡ của thầy giáo Nguyễn Thanh
Bình tại Đại Học Cơng Nghệ Thơng Tin Và Truyền Thông Việt Hàn – Đại
Học Đà Nẵng, chúng em hoàn thành bài báo với đề tài thiết kế giao diện
website cung cấp tài liệu cho Trung học phổ thơng.
2. Mục tiêu
Mục tiêu chính của đề tài là thiết kế giao diện website cung cấp tài liệu
cho học sinh trung học phổ thơng đang ơn thi tốt nghiệp.
-

Tìm hiểu về các tài liệu về mơn học thi tốt nghiệp(tốn, lý, hố,
anh,sử…).

-

Tìm hiểu các phương pháp giải nhanh.

-

Tìm hiểu về đề thi mới nhất.

3. Phạm vi
Cung cấp tài liệu cho học sinh Trung học phổ thông đang ôn thi và học
sinh sẽ ôn thi trong năm tới.

1


4. Phương pháp nghiên cứ
-

Nghiên cứu quy trình phân tích, thiết kế website.

-

Nghiên cứu cách sử dụng các công nghệ cần thiết để thiết kế, xây dựng
một website như: HTML5, CSS, Javascript, Bootstrap.

5. Nội dung và tiến độ nghiên cứu
Thời gian

Nội dung thực hiện

Người thực hiện

Từ 20/3/2012 đến

Khảo sát hiện trạng của các Nguyễn Văn Dũng

28/3/2021
Từ 29/3/2021 đến

trang website về học tập
Nguyễn Cơng Lâm

Tìm hiểu về các cơng nghệ xây Nguyễn Văn Dũng

5/4/2021

dựng website và tìm tài liệu Nguyễn Cơng Lâm

Từ 6/4/2021 đến

học học tập
Thiết kế giao

20/4/2021
Từ 21/4/2021 đến

chủ,trang đăng nhập, đăng ký
Nguyễn Công Lâm
Thiết kế giao diện tài liệu, đề Nguyễn Văn Dũng

6/5/2021
Từ 7/5/2021 đến

thi, đề minh hoạ
Nguyễn Công Lâm
Sử lỗi giao diện website và Nguyễn Văn Dũng

14/5/2021
Từ 14/5/2021 đến

hồn thiện
Viết bài báo cáo

22/5/2021
Từ 22/5/2021 đến

Nguyễn Cơng Lâm
Hồn thiện website và nộp lên Nguyễn Công Lâm

26/5/2021

hệ thống

diện

trang Nguyễn Văn Dũng

Nguyễn Công Lâm
Nguyễn Văn Dũng

2


LỜI CẢM ƠN
Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ và hướng
dẫn rất tận tình của các thầy cơ thuộc Đại Học Công Nghệ Thông Tin Và Truyền
Thông Việt Hàn – Đại Học Đà Nẵng. Em xin cảm ơn các thầy cô thuộc bộ môn
chuyên ngành đã cung cấp cho chúng em các thông tin, kiến thức vô cùng quý báu
và cần thiết trong suốt thời gian quá để em có thể thực hiện và hồn thành đồ án
của mình. Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Thanh Bình, người đã
trực tiếp hướng dẫn chúng em trong thời gian thực hiện đồ án này.
Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông tin đã ủng

hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp chúng tơi
trong q trình nghiên cứu và thực hiện đề tài.
Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên đề
tài khơng tránh khỏi những sai sót. Em rất mong nhận được sự thông cảm của quý
thầy cơ và mong đón nhận những góp ý của thầy cô và các bạn.
Em xin chân thành cảm ơn!

3


NHẬN XÉT
(Của giảng viên hướng dẫn)

………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………

4


MỤC LỤC
Chương 1 Giới thiệu về thiết kế giao diện website..............................................7
1.1Tổng quan về đề tài..................................................................................7
1.2Phương pháp, kết quả...............................................................................8
1.3Cấu trúc đồ án..........................................................................................9
1.4Các hệ thống website tương tự.................................................................9
1.5Các công cụ hỗ trợ thực hiện thiết kế website..........................................9
Chương 2 Nghiên cứu tổng quan.......................................................................12
2.1Các phương pháp...................................................................................12
2.2Hạn chế, tồn tại của các phương pháp....................................................12
2.3Kết luận..................................................................................................13
Chương 3 Triển khai xây dựng..........................................................................14
3.1Tìm hiểu layout của một website...........................................................14
3.2Thiết kế trang chủ website.....................................................................14
3.3Thiết kế trang tài liệu chi tiết.................................................................16
Chương 4 Kết luận và hướng phát triển.............................................................20
4.1Kết luận..................................................................................................20
4.2Hướng phát triển....................................................................................20

5


DANH MỤC CỤM TỪ VIẾT TẮT
STT
1
2

Cụm từ
Trung học phổ thông
Công nghệ thông tin

Viết tắt
THPT
CNTT

6


Chương 1

Giới thiệu về thiết kế giao diện website

1.1 Tổng quan về đề tài


Bối cảnh của đề tài

Ngày nay, Internet đã trở thành phương tiện thơng tin phổ biến trên
tồn thế giới. Nguồn tài nguyên thông tin mạng vô tận đem lại cho
các bảo tàng nhiều lợi ích:

Chương 2

Là phương tiện tuyên truyền nhanh nhất

trên một phạm vi rộng, giá rẻ.

Chương 3

Là nơi để tìm kiếm, tra cứu, cung cấp tài

liệu cho mọi người.

Chương 4

Có thể tìm kiếm thơng tin tài liệu, chạy

trực tiếp trên internet mà không cần phải tải phần mềm riêng
biệt về thiết bị.

Chương 5

Yêu cầu cần một nơi để có thể giao lưu,

trao đổi thơng tin, kiến thức cung cấp cho kì thi tốt nghiệp
quan trọng nhất .

Chương 6

Vậy nên cần phải có một website để làm

những điều đó, đưa nó ra bên ngồi thực tế.


Vấn đề cần giải quyết
Trong thời đại phát triển thì các tài liệu khơng được xác thực có khắp trên
nhiều trang mạng khác nhau, gây ra sự nhầm lẫn cho học đang ôn thi rất

nhiều. Làm ảnh hưởng đến kết quả kì thì tốt nghiệm.
Vậy nên cần phải tạo ra một trang website cung cấp tài liệu chính xác nhất
cung cấp cho học sinh phục vụ cho kì thi tốt nghiệp sắp tới.



Yêu các nội dung thực hiện

Các nội dung thực hiện gồm :
1. Tra cứu tài liệu theo môn học.
7


2. Tra cứu đề minh hoạ.
3. Đọc các tài liệu, kiến thức, các phương pháp giải theo môn học.
4. Đăng nhập và Đăng ký tài khoản cho người dùng.
5. Chạy code người dùng viết lên website.

6.2 Phương pháp, kết quả
 Phương pháp triển khai thực hiện đề tài.
-

Thu thập thông tin : tài liệu cho website,tìm hiểu về các cơng nghệ
cần thiết để xây dựng website như:HTML,Bootstrap,CSS,
Javascript,…

-

Tìm hiểu về các trang website hiện nay như: hocmai.vn,
hoc247h.net, moon.vn,…

-

Sử dụng Visual code để xây dựng website.

-

Tạo logo cho trang website.

-

Lên ý tưởng cho trang website.

-

Xây dưng trang website.

 Kết quả đã đạt được
-

Thiết kế được logo cho trang web.

Hình 1.1 Logo
-

Thu thập được nhiều thông tin về giao diện trang website.

-

Thiết kế giao diện cho website trang chủ, trang đăng nhập đăng ký,tài

liệu…

8


Hình 1.2 Trang chủ

6.3 Cấu trúc đồ án
-

Nguyên cứu tổng quan.

-

Triển khai xây dựng.

-

Kết luận và hướng phát triển

6.4 Các hệ thống website tương tự
Có rất nhiều hệ thống website làm về việc cung cấp tài liệu tiêu biển
là các hệ thông website như:

Chương 7
-

Hoc247.net

-

Tailieu.vn

-

Tailieugiangday.com

Moon.vn

7.1 Các công cụ hỗ trợ thực hiện thiết kế website


Các phần mềm lập trình :
-

Visual Studio Code

Ưu điểm của các phần mềm này là nó rất dễ để có thể cài đặt và sử dụng,
tất cả đều được tối ưu cho ngôn ngữ HTML và các ngơn ngữ lập trình web.
Các phần mềm đều có trình kiểm tra chính tả, số dịng, tự động hồn
thành, xem trước trang và là công cụ soạn thảo văn bản và hình ảnh. Và
9


đều tối ưu cho hệ điều hành Windows. Hỗ trợ mạnh mẽ cho cộng đồng
nhiều Plugins, snippets, code auto complete, highlight beautiful, tùy biến
giao diện, phím tắt, và rất nhiều thứ khác nữa. Phát triển rất tích cực với sự
hỗ trợ của Microsoft. Các tài liệu chính thức được duy trì tốt. Có sự hỗ trợ
rất tích cực của cộng đồng với tất cả các plugin bạn cần. Nếu gửi một lỗi
trên GitHub, bạn thường sẽ nhận được phản hồi trong vịng 4 ngày. Thực

hiện tính năng tìm kiếm và thay thế vơ cùng dễ dàng, chính vì vậy giúp
cho chúng ta nhanh chóng chỉnh sửa những đoạn code bị lỗi. Tự động báo
lỗi trong quá trình viết chương trình. Phần mềm Bracker được tích hợp sẵn
tính năng Quick Edit giúp cho mọi người có thể dễ dàng và nhanh chóng
soạn thảo các chương trình. Tự động báo lỗi khi lập trình javascript với
cơng cụ JSLint.
Nhược điểm của các phần mềm này là chưa tối ưu hồn tồn về ngơn ngữ,
sẽ rất khó giải quyết khi gặp các lỗi bug, code,... Các phím tắt mặc định
khơng có ý nghĩa và người dùng phải cấu hình lại gần như tất cả chúng.
Các phần mềm chia được ít cột hiện thi tập tin. Đối với eclipse, phần mềm
này khá tốn dung lượng bộ nhớ. Một số phần mềm cần phải trả phí như
Sublime Text….



Các công cụ hỗ trợ việc thiết kế :
Thư viện Bootstrap là một thư viện sẵn có nên việc sử dụng nó sẽ giúp bạn
phát triển nhanh chóng website của mình. Rất dễ sử dụng, vì nó được viết
bằng html, css, javascript nên bạn chỉ cần có kiến thức cơ bản về 3 cái đó là
có thể sử dụng bootstrap tốt. Tính năng Responsive hữu ích: Bootstrap xây
dựng sẵn reponsive css trên các thiết bị mobiles, tablets, và desktops nên
bạn sẽ không mất thời gian viết cái đống css lằng nhằng nữa. Tương thích
với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox,
Internet Explorer, Safari, and Opera).
Javascript sẽ giúp tăng tính tương tác trên website. Script này chạy trên
các trình duyệt của người dùng thay vì trên server và thường sử dụng thư
viện của bên thứ 3 nên có thể tăng thêm chức năng cho website mà không
phải code từ đầu.
10

Photoshop CS6 để khắc phục được hầu hết những lỗi trên hình ảnh.
Photoshop cho phép bạn đổi màu, thêm bớt, xố bỏ vật thể. Bạn cũng có
thể dễ dàng tạo ra những hiệu ứng tuyệt đẹp bằng photoshop.
Responsive để làm cho website có thể tự điều chỉnh kích thước theo màn
hình, giúp cho người dùng có được trải nghiệm tối ưu mà không ảnh hưởng
bởi loại thiết bị mà họ dùng để truy cập vào website. Lợi ích đầu tiên là
trang web có thể tải một cách nhanh chóng mà không bị biến dạng, để cho
người dùng không cần phải resize bằng tay.

11


Chương 8

Nghiên cứu tổng quan

8.1 Các phương pháp
 Thu thập thông tin

Website liên quan đến cung cấp tài

Website liên quan đến cung

liệu
Các tài liệu đều liên quan đến ôn tập

cấp tài liệu uy tín
Các tài liệu đề chú trọng vào

các môn học
Không chú trọng đến chất lượng và

kiến thức và nâng cao
Không chú trọng đưa ra các

thông tin tài liệu đưa ra
phương pháp giải nhanh
Bảng Nghiên cứu tổng quan.1 Bảng so sánh các phương pháp
 Xây dựng website

Hình 2.1 Visual Studio Code

8.2 Hạn chế, tồn tại của các phương pháp
 Website cung cấp tài liệu cho THPT
-

Hạn chế:
 Hầu hết các website không được đầu tư nhiều .

12


 Lượng thông tin chất lượng của tài liệu không được kiểm
chứng.
 Không được đầu tư nhiều về chất lượng của tài liệu ơn tập
 Ít đưa ra nhưng tài liệu giải ngắn gọn.
-

Tồn tại

 Nhiều tài liệu đưa ra các phương pháp giải khác nhau.
 Tài liệu giải nhanh nhưng sai công thức.
 Tài liệu đưa ra không được kiểm chứng nhiều.
 Gây ra hoang mang cho học sinh THPT

 Website cung cấp tài liệu cho THPT uy tín
-

Hạn chế:
 Đầu tư về giao diện.
 Chưa đi sâu vào một số tài liệu quan trọng.
 Tài liệu nhiều thông tin.
 Ít tài liệu cung cấp việc giải nhanh

-

Tồn tại
 Tài liệu dành cho học sinh THPT cịn cũ khơng được cập nhật
lại mới.
 Thơng tin về tài liệu cịn ít.

8.3 Kết luận
Mạng Internet là nơi lưu trữ rất nhiều thơng tin tài liệu cục lớn và nhờ vậy
nhóm chúng em đã thu thập được nhiều kiến thức, tư liệu, thơng tin,…cần
thiết để đưa vào website.Nhưng việc tìm kiếm tài liệu chất lượng khó khăn
vì q nhiều trang website khác nhau đưa ra nhưng tài liệu khác nhau
không đồng bộ.

13

14


Chương 9

Triển khai xây dựng

9.1 Tìm hiểu layout của một website
Thơng qua việc tìm hiểu về layout của một số website nhóm chúng em
nhận một website cơ bản bao gồm 3 phần:
 Header: Phần đầu trang, đây là khu vực người ta thường đặt
logo, banner, khẩu hiệu của website/blog.
 Content: Phần nội dung, nó có thể là nội dung một bài viết hoặc
danh sách các bài viết;
 Footer : Phân trang, khu vực dưới cùng của một website. Đây là
nơi dành để giới thiệu ngắn gọn về website/blog, thông tin liên
hệ, bản đồ,…

9.2 Thiết kế trang chủ website
Trang chủ của website là phần đầu tiên đập vào mắt của người dùng, trang
chủ cần phải có màu sắc hài hịa , giao diện đơn giản,dễ sử dụng.


Thiết kế header
Logo:

Hình 3.1 Logo website
Logo của website chúng em sử dụng hình ảnh 3 con người vòng tay lại
tượng trưng cho một cộng đồng với mong muốn đem lại một nguồn tài

liệu đa dạng và phong phú cho những sĩ tử trước kì thi THPT sắp tới.


Bố cục website
Bố cục của website nhóm chúng em bao gồm :
 Trang chủ
15


 Đề thi
 Đề minh họa
 Tin tức
 Đăng nhập
 Đăng kí

Hình 3.1: Trang chủ

Hình 3.2: Hình ảnh tài liệu trang chủ

16


Hình 3.3: Footer trang chủ

9.3

Thiết kế trang tài liệu chi tiết


Trang chủ

Trang chủ sẽ hiển thị các thông tin về website của nhóm chúng em như:



-

Các tài liệu cho từng mơn học.

-

Các cơng thức giải nhanh,từ khóa học nhanh dễ nhớ.

-

Một số đề thi của các trường THPT trên cả nước.

Đề thi
Đề thi sẽ hiển thị tất cả các đề thi theo từng môn được cập nhật hằng ngày
giúp cho các em có thể biết thêm về một số dạng bài tập mới ở nơi khác
hoặc có thể giúp cho các em củng cố và nắm chắc kiến thức về từng dạng
bài khác nhau.

Hình 3.4 : trang đề thi mơn toán

17




Đề minh họa

Đề minh họa sẽ hiển thị danh sách các đề minh họa của bộ qua từng
năm ,các em có thể lấy đó làm cơ sở để kiểm tra thực lực của bản thân đến
đâu.

Hình 3.5 Đề minh hoạ

Hình 3.6 Đề minh hoạ

18




Tin tức
Tin tức sẽ hiển thị các thông tin liên quan đến giáo dục mới nhất trong cả
nước.

Hình 3.7 Trang tin tức


Đăng nhập/ Đăng ký

19


Hình 3.5: Đăng nhập

Hình 3.6 Đăng ký

20

Chương 10

Kết luận và hướng phát triển

10.1 Kết luận
Trong quá trình làm đồ án, chúng em cũng gặp rất nhiều khó khăn nhưng
được sự giúp đỡ tận tình của thầy, nhóm em đã hồn thành đồ án.
Chúng em đã tìm hiểu và tham khảo các trang web chuyên cung cấp tài
liệu như tailieugiangday.com,tailieuso.net… Từ đó nhóm đưa ra các ý
tưởng, định hướng về giao diện web. Trong khi làm đồ án kiến thức có hạn
nên khơng tránh khỏi các sai sót , mong thầy cơ và các bạn đóng góp ý
kiến để đồ án được hoàn thiện tốt hơn, để đáp ứng với nhu cầu thực tế.
Cuối cùng chúng em xin chân thành cảm ơn sự giúp đỡ của thầy trong q
trình làm đồ án, để đồ án được hồn thành.

10.2 Hướng phát triển
Đối thủ cạnh tranh: Hiện nay trên mạng có rất nhiều trang web chuyên về
cung cấp tài liệu như: 123doc.org, slideshare.net, violet.vn,
tuyensinh247.com , hocmai.vn, vietjack.com,…
Hướng phát triển của trang web trong tương lai:
 Trở trành trang web tin cậy cho hàng nghìn em học sinh trên cả
nước.
 Tối ưu hóa các trang để website hồn thiện hơn.

21