- Trang Chủ
- Công nghệ thông tin
- Tóm tắt Đồ án tốt nghiệp Công nghệ thông tin: Nghiên cứu Bootstrap CSS Framework và ứng dụng xây dựng website giới thiệu thông tin về các cây cầu bắc trên sông Hàn Đà Nẵng
Xem mẫu
- TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN
HỮU NGHỊ VIỆT - HÀN
KHOA CÔNG NGHỆ THÔNG TIN
TÓM TẮT ĐỒ ÁN TỐT NGHIỆP
NGÀNH: CÔNG NGHỆ THÔNG TIN
Đề tài:
NGHIÊN CỨU BOOTSTRAP CSS FRAMEWORK VÀ ỨNG
DỤNG ĐỂ XÂY DỰNG WEBSITE GIỚI THIỆU THÔNG TIN
VỀ CÁC CÂY CẦU BẮC TRÊN SÔNG HÀN - ĐÀ NẴNG
SVTH : Lộc Hoàng Ánh Trâm
Lớp : CCCT15A
Niên khóa : 2015 - 2018
CBHD : TS. Nguyễn Thị Hoa Huệ
Đà Nẵng, tháng 06 năm 2018
- TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN
HỮU NGHỊ VIỆT - HÀN
KHOA CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN TỐT NGHIỆP
NGÀNH: CÔNG NGHỆ THÔNG TIN
Đề tài:
NGHIÊN CỨU BOOTSTRAP CSS FRAMEWORK VÀ ỨNG
DỤNG ĐỂ XÂY DỰNG WEBSITE GIỚI THIỆU THÔNG TIN
VỀ CÁC CÂY CẦU BẮC TRÊN SÔNG HÀN - ĐÀ NẴNG
SVTH : Lộc Hoàng Ánh Trâm
Lớp : CCCT15A
Niên khóa : 2015 - 2018
CBHD : TS. Nguyễn Thị Hoa Huệ
Đà Nẵng, tháng 06 năm 2018
- 1
MỞ ĐẦU
1. Lý do chọn đề tài
Hiện nay, sự phát triển nhanh chóng của công nghệ thông tin
nói chung và mạng Internet nói riêng đã đem lại cho mọi người một
cuộc sống hoàn toàn khác. Với mạng lưới Internet rộng khắp, con
người không còn khó khăn trong việc tìm kiếm những thông tin mà
mình cần. Với mật độ phủ sóng của Internet trong thời đại công nghệ
hiện nay, thông tin không còn trở nên khan hiếm. Chỉ với một cú
click chuột, hàng loạt các thông tin về vấn đề bạn cần đã hiện ra chỉ
trong vài giây ngắn ngủi. Tuy nhiên, quá nhiều thông tin cũng được
gọi là một con dao hai lưỡi đối với nhiều người. Bạn hoàn toàn
không hề biết được đâu là những thông tin chính xác mà bạn cần,
đâu là những thông tin lá cải được viết bừa bãi nhằm thu hút người
đọc.
Mỗi người hoàn toàn có thể tạo ra được một website nhằm đáp
ứng nhu cầu và sở thích của riêng mình. Website dạng blog giới
thiệu về cuộc sống của bản thân, những sở thích hay vấn đề mà bản
thân quan tâm. Thậm chí, bạn có thể tạo ra một website với nội dung
là review những món ăn ngon bạn đã từng thưởng thức, những địa
điểm ăn chơi thả ga với giá hạt dẻ. Bắt nguồn từ ý tưởng này, em
mong muốn đem lại cho mọi người, đặc biệt là khách du lịch đến với
Đà Nẵng. Những thông tin chính xác, chất lượng, mới nhất về các
cây cầu tại Đà Nẵng, cũng như những thông tin liên quan đến du
lịch, nghỉ dưỡng, học tập, … mà mọi người quan tâm tại thành phố
biển Đà Nẵng xinh đẹp.
Chính vì lí do trên em đã lựa chọn đề tài: “Nghiên cứu
Bootstrap CSS Framework và ứng dụng xây dựng website giới thiệu
thông tin về các cây cầu bắc trên sông Hàn Đà Nẵng”. Thông qua
- 2
website này, khách du lịch sẽ nắm bắt được nhiều thông tin về lịch
sử, quá trình hình thành, vị trí địa lý từng cây cầu và những bài viết
liên quan đến nó.
2. Mục tiêu và nhiệm vụ nghiên cứu
Mục tiêu để xây dựng website giới thiệu thông tin về các cây
cầu bắc trên sông Hàn Đà Nẵng là giúp khách du lịch nắm r những
thông tin chính xác về thông tin, lịch sử hình thành, các tin chất
lượng, mới nhất về các cây cầu tại Đà Nẵng, cũng như những thông
tin liên quan đến du lịch, nghỉ dưỡng, học tập, … mà mọi người quan
tâm tại thành phố biển Đà Nẵng xinh đẹp.
Nhiệm vụ:
Nghiên cứu công nghệ Bootstrap CSS.
Phân tích thiết kế.
Xây dựng website.
3. Đối tƣợng và phạm vi nghiên cứu
Các công cụ xây dựng hệ thống và các mô hình áp dụng:
Sublime Tex 3, Framework Bootstrap CSS, PHP và Mysql.
Phạm vi nghiên cứu đề tài xây dựng là 6 cây cầu bắc trên sông
Hàn – Đà Nẵng, bao gồm lịch sử, thông tin các hình thành, quá trình
xây dựng, năm hình thành và vị trí các cây cầu.
4. Phƣơng pháp nghiên cứu
Tìm hiểu và thu thập thông tin về các cây cầu bắc trên sông
Hàn – Đà Nẵng.
Tham khảo một số website giới thiệu các địa điểm du lịch.
Tìm hiểu và nghiên cứu các tài liệu liên quan đến Bootstrap
CSS, PHP Mysql và học hỏi kinh nghiệm của anh/chị trên các diễn
đàn, các nhóm.
Nghiên cứu các công cụ xây dựng hệ thống.
- 3
5. Dự kiến kết quả
Xây dựng hoàn thiện website giới thiệu thông tin về các cây
cầu bắc trên sông Hàn Đà Nẵng với một số chức năng chính của
website.
Chức năng của người xem gồm có 2 đối tượng:
Thành viên đã đăng kí tài khoản:
- Đăng nhập.
- Xem bài viết.
- Bình luận bài biết.
Khách:
- Đăng kí
- Xem bài viết.
Quyền của quản trị Admin quản lý chung:
- Quản lý thành viên.
- Quản lý tin tức.
- Đăng nhập vào tài khoản với quyền admin.
6. Ý nghĩa khoa học và thực tiễn
Giúp khách du lịch có thể biết r lịch sử hình thành, quá trình
xây dựng, năm hình thành và vị trí bản đồ của những cây cầu được
bắc trên sông Hàn Đà Nẵng.
Hiểu r được công nghệ Bootstrap CSS, phục vụ cho việc xây
dựng website giới thiệu những cây cầu bắc trên sông Hàn để áp dụng
vào thực tiễn nhiều hơn.
7. Dự kiến nội dung đồ án
Chương 1: Cơ sở lý thuyết
Chương 2: Phân tích thiết kế hệ thống
Chương 3: Thiết kế giao diện và cài đặt hệ thống
Kết luận và hướng phát triển
- 4
CHƢƠNG 1. CƠ SỞ LÝ THUYẾT
1.1. GIỚI THIỆU VỀ HTML
1.2. GIỚI THIỆU VỀ CSS
1.3. GIỚI THIỆU VỀ FRAMEWORK BOOTSTRAP
1.4. GIỚI THIỆU VỀ CÔNG NGHỆ THIẾT KẾ WEB
RESPONSIVE
1.5. TỔNG QUAN VỀ NGÔN NGỮ LẬP TRÌNH PHP VÀ HỆ
QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL
1.1.1. Tổng quan về ngôn ngữ lập trình PHP
1.1.2. Hệ quản trị cơ sở dữ liệu Mysql
1.6. NHÓM THẺ PHỤC VỤ CHO VIỆC SEO TRANG WEB
- 5
CHƢƠNG 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
2.1. XÁC ĐỊNH CÁC TÁC NHÂN
- Admin Quản trị viên : Là người quản trị duy nhất, quản lý mọi
mặt của website.
- User Thành viên : Đăng nhập, xem bài viết và có thể bình luận
tương tác bài viết.
- Khách: Người xem bài viết, không thể bình luận.
2.2. CÁC TRƢỜNG HỢP SỬ DỤNG
2.2.1. Liệt kê các trƣờng hợp sử dụng
Admin Quản trị viên :
User (Thành viên):
Khách:
Trang tin tức:
2.2.2. Đặc tả các trƣờng hợp sử dụng
Tài khoản:
Tin tức:
Trang Admin:
2.2.3. Biểu đồ trƣờng hợp sử dụng
Hình 2.1. Biểu đồ trường hợp sử dụng.
- 6
2.3. XÁC ĐỊNH CÁC LỚP ĐỐI TƢỢNG
2.4. BIỂU ĐỒ LỚP
Hình 2.2. Biểu đồ lớp
2.5. THIẾT KẾ CƠ SỞ DỮ LIỆU VẬT LÝ TRÊN HỆ CƠ SỞ
QUẢN TRỊ CSDL MYSQL
2.6. BIỂU ĐỒ TRÌNH TỰ
2.6.1. Biểu đồ trình tự đăng nhập
- 7
Hình 2.3. Biểu đồ trình tự đăng nhập
2.6.2. Biểu đồ trình tự thêm tin tức mới
Hình 2.4. Biểu đồ trình tự thêm tin tức
2.6.3. Biểu đồ trình tự sửa thông tin bài viết
Hình 2.5. Biểu đồ trình tự sửa thông tin bài viết
2.6.4. Biểu đồ trình tự xóa tin tức
- 8
Hình 2.6. Biểu đồ tình tự xóa bài viết
2.6.5. Biểu đồ trình tự đăng kí thành viên
Hình 2.7. Biểu đồ trình tự đăng kí thành viên
2.6.6. Biểu đồ trình tự xóa tin tức
Hình 2.8. Biểu đồ trình tự xóa tin tức
2.6.7. Biểu đồ trình tự bình luận bài viết
- 9
Hình 2.9. Biểu đồ trình tự bình luận bài viết
2.6. BIỂU ĐỒ TRẠNG THÁI
2.7.1. Biểu đồ trạng thái đăng nhập
Hình 2.10. Biểu đồ trạng thái đăng nhập
2.7.2. Biểu đồ trạng thái đăng bài viết
Hình 2.11. Biểu đồ trạng thái đăng bài viết
2.7.3. Biểu đồ trạng thái cập nhật bài viết
- 10
Hình 2.12. Biểu đồ trạng thái cập nhật bài viết
2.7.4. Biểu đồ cập nhật trạng thái đăng kí
Hình 2.13. Biểu đồ trạng thái đăng kí thành viên
2.7.5. Biểu đồ trạng thái bình luận bài viết
Hình 2.14. Biểu đồ trạng thái bình luận bài viết
2.8.BIỂU ĐỒ HOẠT ĐỘNG
- 11
2.8.1. Biểu đồ hoạt động đăng nhập
Hình 2.15. Biểu đồ hoạt động đăng nhập
2.8.2. Biểu đồ hoạt động quản lý tin tức
Hình 2.16. Biểu đồ hoạt động quản lý tin tức
- 12
CHƢƠNG 3. KIẾN TRÚC VẬT LÝ VÀ GIỚI THIỆU
WEBSITE
3.1. PHÂN TÍCH YÊU CẦU HỆ THỐNG
3.1.1. Yêu cầu chức năng của hệ thống
Hệ thống cho phép lưu trữ, cập nhật một số thông tin vào cơ sở
dữ liệu như:
User: Nơi lưu trữ tài khoản và mật khẩu của mỗi thành viên
sau khi đăng nhập hệ thống.
Post: Mỗi tin tức gồm các thông tin cần được lưu trữ như: id
của bài viết, mỗi bài viết sẽ có một mã, tên tiêu đề, tóm tắt bài viết,
hình ảnh, nội dung bài viết, được đăng vào ngày tháng và giờ nào
Comment: Nội dung bình luận hiển thị trên các bài viết được
lưu trữ vào cơ sở dữ liệu như: tên thành viên, nội dung bình luận,
ngày giờ bình luận.
3.1.2. Một số hình ảnh của website
3.2.1. Giao diện trang chủ
Hình 3.1. Giao diện trang chủ
- 13
3.2.2. Giao diện trang giới thiệu cây cầu
Hình 3.2. Giao diện trang giới thiệu cây cầu
- 14
3.2.3. Giao diện trang thông tin bài viết
Hình 3.3. Giao diện trang thông tin bài viết
- 15
3.2.4. Giao diện hiển thị tin tức theo từng tên cầu
Hình 3.4. Giao diện trang hiển thị tin tức theo tên cầu3.2.5. Giao
diện trang liên hệ
HÌnh 3.5. Giao diện trang trang liên h
- 16
3.2.6. Giao diện trang giới thiệu
Hình 3.6. Giao diện trang giới thiệu
- 17
3.2.7. Giao diện trang đăng nhập
Hình 3.7. Giao diện trang đăng nhập
3.2.8. Giao diện trang đăng kí tài khoản
Hình 3.8. Giao diện trang đăng kí3.2.9. Giao diện trang quản lý
Hình 3.9. Giao diện trang quản lý
nguon tai.lieu . vn