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:
CHƯƠNG TRÌNH THIỆN NGUYỆN HỒ BÌNH XANH
SO-VN

Sinh viên thực hiện : HUỲNH ĐAI TÂY
Giảng viên hướng dẫn : THS. NGUYỄN THỊ HẠNH
Lớp
: 20IT4

Đà nẵng, tháng 6 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
CHƯƠNG TRÌNH THIỆN NGUYỆN
HỒ BÌNH XANH

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

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.
“Xóa đói giảm nghèo” là một trong những vấn đề được quan tâm
hàng đầu hiện nay. Tất cả các quốc gia dù lớn hay nhỏ trên toàn thế giới
hiện nay đều coi vấn đề xóa đói giảm nghèo là một trong những vấn đề ưu
tiên được giải quyết hàng đầu. Đặc biệt, ở Việt Nam thì mọi người được
Đảng và nhà nước tạo cơ hội việc làm và xóa nạn mù chữ .
Đặc biệt hơn chúng ta đang ở thời đại 4.0 , công nghệ vốn đang rất phát
triển và nắm được vấn đề đó , nhóm chung em đưa ra dự án về Website
“CHƯƠNG TRÌNH THIỆN NGUYỆN HỊA BÌNH XANH” phục vụ nhu
cầu đó .Đây là một hệ thống đơn giản để cho phép những người có điều
kiện ủng hộ tiền , lương thực, áo quần qua INTERNET.

2. Mục tiêu


-

Mục tiêu chính của đề tài là thiết kế giao diện website để những
người có hồn cảnh khó khăn( Trẻ em mồ côi, người khuyết tật,...) được
biết đến nhằm nhận được sự giúp đỡ từ những tấm lòng vàng. Ngược
lại, đây cũng là phương tiện để những nhà hảo tâm có cơ hội được chia
sẻ và trao đi yêu thương đến những mảnh đời bất hạnh.

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

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.


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

Khảo sát hiện trạng của các

Huỳnh Đại Tây


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

trang website từ thiện.
Tìm hiểu về các cơng nghệ xây

Huỳnh Đại Tây

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

dựng website và tìm tài liệu.
Thiết kế giao diện trang chủ.

Huỳnh Đại Tây

Từ 21/4/2021

Thiết kế giao diện các mục.

Huỳnh Đại Tây

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

Sử lỗi giao diện website và

Huỳnh Đại Tây

đến 14/5/2021

Từ 14/5/2021

hoàn thiện.
Viết bài báo cáo.

Huỳnh Đại Tây

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

Hoàn thiện website và nộp lên

Huỳnh Đại Tây

đến 30/5/2021

hệ thống.

đến 20/4/2021


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 trường Đạ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 cơ Nguyễn Thị Hạ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 q 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!


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

.......................................................................................................................
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
………………………………………………………


Mục lục
Chương 2 Nghiên cứu tổng quan........................................................................13
2.1 Mơ hình......................................................................................................13
Chương 3 Triển khai xây dựng...........................................................................15
3.1 Tìm hiểu layout của một website..............................................................15
3.2 Thiết kế trang chủ website.........................................................................15
Chương 4 Kết luận và Hướng phát triển.............................................................16
Giai đoạn 1:.....................................................................................................17
Giai đoạn 2:.....................................................................................................17
Giai đoạn 3:.....................................................................................................17



Chương 1
1.1
1.2

GIỚI THIỆU

Tên đề tài: Chương trình Thiện nguyện “ Hồ Bình Xanh “
Giới thiệu đề tài:
Chương trình Thiện nguyện “ Hồ Bình Xanh “ là một chương trình

thiện nguyện thông qua việc ủng hộ trên các nền tảng INTERNET cho
những người vô gia cư , người già neo đơn, những hồn cảnh đặc biệt khó
khăn trong cuộc sống . Từ những việc ủng hộ Online trên thì nhóm thiện
nguyện sẽ trực tiếp trao những món q vơ cùng ý nghĩa đến với những
hồn cảnh nghèo khó trong xã hội.
Dựa trên tình hình thực tế đó, Chúng tơi đã khảo sát và đặt ra bài
toán thiết kế Website Thiện nguyện “ Hồ Bình Xanh “. Là website giúp
mọi người dùng có thể tìm kiếm thơng tin về những mảnh đời bất hạnh, khó
khăn, cần được giúp đỡ trong xã hội. Đồng thời, là Website để quản lí hệ
thống Từ thiện.
1.3

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,…

-

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

1.4

1.5


-

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 quản lí,..

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

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 hoà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à đề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.
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.

1.6

Ý tưởng:
Những thành tựu của đất nước , phát triển kinh tế với con số tăng
trưởng thì khơng đồng nghĩa với việc là chính q hương của chúng ta
khơng có những mảnh đời nghèo khổ , cơ cực . Đã có rất nhiều dự án về
thiện nguyện để bù đắp những mảnh đời kém may mắn ấy nhưng nó tốn rất
nhiều thời gian mới có thể thực thiện
- Thời đại 4.0 khiến chúng ta trở nên bận rộn và gặp rất nhiều khó khăn
để tiếp cận những người nghèo khổ , cơ cực .
-

Nắm bắt được vấn đề đó “CHƯƠNG TRÌNH THIỆN NGUYỆN HỊA

BÌNH XANH” là một chương trình thiện nguyện thơng qua việc ủng hộ của


những người trên các nền tảng INTERNET rồi từ đó chia cho những hồn cảnh
khó khăn trong cuộc sống . Chương trình tiết kiệm rất nhiều thời gian cho những
người làm việc văn phịng , những người khơng có nhiều thời gian qua đó cũng
giúp những người dung mạng xã hội tiếp cận được việc ủng hộ những người
nghèo .

1.7
-

Mục tiêu:
Người dùng hồn tồn dễ sử dụng chương trình .

-

Đáp ứng nhu cầu ủng hộ cho những người dùng.

-

Cập nhật nhanh các thơng tin hữu ích về đại phương nghèo khổ cần

giúp đỡ.
-

Hỗ trợ người nghèo khổ , cơ cực trong cuộc sống.

-

Tạo niềm tin với người sử dụng chương trình.

-


Tiếp nhận phản hồi từ người dùng và hồn thiện chương trình hơn.


Chương 2

Nghiên cứu tổng quan

2.1
Mơ hình
- Website “Thiện nguyện Hồ Bình Xanh” gồm các phần :
+ Trang chủ: Giới thiệu về chương trình “ Hồ bình xanh – SO-VN ”
kèm theo phương hướng hoạt động .
+ Trang Thành viên: bao gồm các mảnh đời cần được giúp đỡ, các
mạnh thường qn, các tình nguyện viên tình nguyện,…
+ Trang Quỹ: Cơng khai số tiền và doanh thu tài trợ.
+ Liên hệ
- Website “Thiện nguyện Hồ Bình Xanh” cho phép người dùng
đánh giá, góp ý kiến cá nhân qua mục Liên hệ.
Tổng hợp lại ý kiến của người dùng, sửa lỗi và hoàn tất hệ thống và
chứng tỏ được các yêu cầu của trang web được thỏa mãn.
- Website được cập nhật liên tục gồm: điều chỉnh các lỗi mà chưa
được phát hiện trong các giai đoạn trước, nâng cấp hệ thống và cập
nhật các danh sách mới nhất.
2.2

Tính khả thi
- Giao diện dễ sử dụng cho tất cả mọi người
Chi phí phát triển không quá cao , dễ dàng thu hút được nhà đầu tư.
- Lợi thế :

Hiện nay có các website tương tự đã có trên thị trường tuy nhiên chưa
đáp ứng đầy đủ nhu cầu của người sử dụng , do đó chúng ta có thể
học hỏi chọn lọc và cải tiến những vấn đề còn tồn đọng để gia cơng
hồn chỉnh .
- Đang là xu thế của xã hội hiện nay, đa phần người dùng chúng ta
hướng tới đều thực hiện tìm kiếm trên thiết bị thơng minh nên những
ứng dụng như này rất được sự ủng hộ của đông đảo người dùng.

2.3

Xây dựng Website

 Xác định điều gì là quan trọng nhất đối với website?
Tạo dấu ấn với người sử dụng: Trước tiên cần phải chuyên nghiệp trong

từng chi tiết. Do vậy các tính năng cần được sắp xếp một cách khoa học, dễ
tìm kiếm và đáp ứng nhu cầu của khách hàng khi ghé vào web.
Tạo dựng được lịng tin: Đối với người dùng thì lịng tin rất quan trọng, một
website chuyên nghiệp mang lại dấu ấn sâu sắc với khách hàng từ đó làm
cho họ có cảm giác tin tưởng về những chỉ số về những địa điểm, giá tiền
phù hợp với mỗi người.


Tính chia sẻ website cao: Muốn website được chia sẻ nhiều trên cộng đồng

thì chất lượng bài viết cần hay và lơi cuốn, bên cạnh đó thiết kế với tính
thẩm mỹ cao, tạo ấn tượng đặc biệt với người xem.
 Các chức năng ( Module) cơ bản khi thiết kế website
1. Trang chủ:


- Thiết kế trang chủ đẹp, chuyên nghiệp, bố cục theo trình tự logic và khoa
học
- Thiết kế banner, logo, sologan...phù hợp, bắt mắt.
- Hiển thị hình ảnh tổng thể website.
- Liệt kê các tin tức mới, tin tức nổi bật trên trang chủ.
2. Module Giới thiệu:

- Giới thiệu chung về website.
- Review của một số người dùng sau khi sử dụng.
3. Module Liên hệ:

- Các form liên hệ cơ bản để nhận phản hồi của người truy cập.
- Liên hệ hỗ trợ trực tuyến.


Chương 3

Triển khai xây dựng

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

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

Thiết kế header

Hình 3.1 Logo website
3.2.2 Bố cục website
Bố cục của website bao gồm :
+ Trang chủ
+ Hoạt động


+ Chương trình.
+ Đóng góp.
+ Quỹ và tài liệu.

Hình 3.1: Thêm Thành viên

Chương 4
4.1

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

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. 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
quá trình làm đồ án, để đồ án được hồn thành.
Tuy nhiên, vẫn cịn nhiều hạn chế:
- Mặc dù đã có nhiều cố gắng, tìm hiểu kiến thức đã học, kết hợp tra cứu
các tài liệu chuyên ngành nhưng do hạn chế về khả năng và kinh nghiệm nên
không thể tránh khỏi những thiếu sót nhất định.
- Báo cáo chưa giải quyết được trọn vẹn những vấn đề phát sinh trong
quá trình quản lý.
- Báo cáo chưa đạt tính thẩm mĩ cao, phong cách hành văn còn lủng củng,
còn nhiều vấn đề chưa chính xác cần khắc phục trong q trình phát triển, nâng
cấp phần mềm giai đoạn sau.


4.2 Hướng phát triển
Giai đoạn 1:
6 tháng trước khi tung sản phẩm đến với thị trường: Hồn thành tạo
Website chính cho sản phẩm.

Giai đoạn 2:
Ngay sau khi tung sản phẩm đến sau 3 tháng: Khảo sát mức độ tiếp nhận
của thị trường mục tiêu

Giai đoạn 3:
Bắt đầu từ năm thứ 2 trở đi, liên tục khảo sát nhu cầu khách hàng và nâng
cấp website với nhiều tính năng hơn ở giai đoạn cần thiết và cung cấp giá trị gia
tăng.