Chúng em xin cảm ơn cácthầy cô giáo 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 qua để nhóm em có thể thực hiệ
Trang 1TRƯỜ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: XÂY DỰNG WEBSITE ĐỌC SÁCH ONLINE
Sinh viên thực hiện : LÊ THỊ THÙY LINH
LÊ THỊ HỒNG HẠNH
Giảng viên hướng dẫn: TH.S LÊ TỰ THANH
Lớp : 20IT9
Đà nẵng, tháng 06 năm 2021
Trang 2TRƯỜ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: XÂY DỰNG WEBSITE ĐỌC SÁCH
ONLINE
Trang 3Đà Nẵng, tháng 06 năm 2021
Trang 4Song, vì thời gian có hạn, lần đầu làm website nên kĩ năng, kinh nghiệm hầunhưkhông có, khó tránh khỏi nhiều sai sót Vì vậy chúng em rất mong nhậnđượcnhiều ý kiến đóng góp từ thầy cô và các bạn để chúng em hoàn thành tốt đồ
án này
Chân thành cảm ơn thầy cô và các bạn!
Trang 5LỜI CẢM ƠN
Trên thực tế không có thành công nào mà không gắn liền với sự hỗ trợ, giúp đỡ dù íthay nhiều, dù trực tiếp hay gián tiếp của người khác.Trong suốt thời gian kể từ khinghiên cứu đề tài đến nay, nhóm đã nhận được rất nhiều sự quan tâm, giúp đỡ của quýthầy,cô, gia đình và bạn bè
Chúng em xin chân thành cảm ơn Ban Giám Hiệu Trường Đại Học Công Nghệ ThôngTin Việt-Hàn, đã tạo điều kiện cho chúng em làm đồ án này Chúng em xin cảm ơn cácthầy cô giáo 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 qua để nhóm em có thể thực hiện đồ
án của mình
Nhóm chúng em xin chân thành cảm ơn Thầy Lê Tự Thanh đã tận tâm hướng dẫnnhóm bằng tất cả tâm huyết của mình, tạo mọi điều kiện cho chúng em làm đề tài này
và đóng góp ý kiến cho nhóm trong suốt thời gian làm đề tài Làm việc với thầy chúng
em được học hỏi rất nhiều điều bổ ích để áp dụng vào công việc mai sau cũng nhưtrong cuộc sống hàng ngày
Do giới hạm về thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên đề tàikhông tránh khỏi những sai sót Chúng em rất mong nhận được sự thông cảm của quýthầy cô và mong được đón nhận những ý kiến đóng góp của thầy cô và các bạn
Chúng em xin chân thành cảm ơn!
Trang 6NHẬN XÉT (Của giảng viên hướng dẫn)
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
Đà Nẵng, tháng … năm 2021
Giáo viên hướng dẫn
Lê Tự Thanh
Trang 7
M C L C ỤC LỤC ỤC LỤC MỞ ĐẦU 1
Chương 1 TỔNG QUAN VỀ HỆ THỐNG 5
1.1 Giới thiệu về website 5
1.2 Kết quả cần đạt 5
1.3 Phương pháp 5
1.4 Tính khả thi 5
1.5 Chức năng của website 5
Chương 2 NGHIÊN CỨU TỔNG QUAN 7
2.1 Ngôn ngữ CSS 7
2.2 Ngôn ngữ HTML 7
2.3 Ngôn ngữ Bootstrap 8
2.4 Ngôn ngữ JavaScrip 9
Chương 3 Phân tích thiết kế hệ thống 10
3.1 Mô hình tổng quan của hệ thống nghiên cứu 10
3.2 Thiết kế chi tiết 11
3.2.1 Người đọc 11
3.2.2 Người quản lí 11
3.3 Mô tả chức năng 11
3.3.1 Trang chủ 11
3.3.2 Đăng ký: 11
3.3.3 Đăng nhập 11
3.3.4 Tìm kiếm: 11
3.3.5 Sắp xếp 12
3.3.6 Thể loại 12
3.4 Sơ đồ use case 12
Chương 4 TRIỂN KHAI XÂY DỰNG 16
TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 21
DANH MỤC TÀI LIỆU THAM KHẢO 22
Trang 8Chương 1 TỔNG QUAN VỀ HỆ THỐNG
1.1 Giới thiệu về website
-Website đọc và tìm kiếm sách trên mạng: Đọc sách online
-Tổng quan về website: Đọc sách online là một website cho phép người đọcxem và tìm kiếm thể loại và những cuốn sách tùy thích theo yêu cầu người đọc-Ý tưởng : Với những người đọc, việc tìm kiếm được những cuốn sách phùhợp với nhu cầu trong hàng ngàn cuốn sách là một việc rất khó khăn Họkhông thể chắc chắn được cuốn sách mình mua có phù hợp nhu cầu của chínhbản thân hay không Hay sẽ mất thêm thời gian và tiền bạc một cách vôích.Với thời đại công nghệ như hiện nay, bạn hoàn toàn có thể tìm kiếm nhữngcuốn sách và thể loại bạn thích và tìm hiểu nội dung một cách nhanh chóngqua các app điện thoại một cách nhanh chóng và dễ thực hiện
- Dự án đi vào hoạt động hứa hẹn sẽ được sự quan tâm của phần lớn người đọc
có nhu cầu về đọc sách và tìm kiếm sách
1.5 Chức năng của website
- Chức năng đăng ký , đăng nhập thành viên
- Chức năng tìm kiếm sách và thể loại của sách
- Chức năng đăng tải sách lên ứng dụng
- Các chức năng phụ của admin như là :
+ Chức năng xem, sửa , xóa thông tin người đọc
Trang 9+ Chức năng xem, sửa, xóa sách.
Chương 2 NGHIÊN CỨU TỔNG QUAN
2.1 Ngôn ngữ CSS
CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheetlanguage Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viếtdưới dạng ngôn ngữ đánh dấu, như là HTML Nó có thể điều khiển định dạng củanhiều trang web cùng lúc để tiết kiệm công sức cho người viết web Nó phân biệtcách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bốcục, màu sắc, và font chữ
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996,
vì một lý do đơn giản HTML không được thiết kế để gắn tag để giúp địnhdạng trang web Bạn chỉ có thể dùng nó để “đánh dấu” lên site
Ưu điểm:
Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻquy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữmàu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dungcủa trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nộidung
Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránhphải lặp lại việc định dạng cho các trang Web giống nhau
2.2 Ngôn ngữ HTML
HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ
Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nêncác trang web trên World Wide Web.Cùng với CSS và JavaScript, HTML là mộttrong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website HTML đượcđịnh nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các
Trang 10tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩnmực của Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiênbản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà pháttriển đã thay thế nó bằng XHTML Hiện nay, phiên bản mới nhất của ngôn ngữnày là HTML5.
Lưu ý: HTML không phải là ngôn ngữ lập trình
Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và
xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bảnđơn giản – có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công
cụ xuất bản WYSIWYG phức tạp Hypertext là cách mà các trang Web (được
thiết kế bằng HTML) được kết nối với nhau Và như thế, đường link có trên
trang Web được gọi là Hypertext Như tên gọi đã nói, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language), nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text bằng các thẻ (tag) để nói cho trình duyệt Web cách để
cấu trúc nó để hiển thị
Có bốn loại phần tử đánh dấu trong HTML:
Đánh dấu Có cấu trúc miêu tả mục đích của phần văn bản
Đánh dấu trình bày miêu tả phần hiện hình trực quan của phần văn bản
bất kể chức năng của nó là gì (Chú ý là cách dùng đánh dấu trình bàynày bây giờ không còn được khuyên dùng mà nó được thay thế bằngcách dùng CSS),
Đánh dấu liên kết ngoài chứa phần liên kết từ trang này đến trang kia cụ
thể, và
Các phần tử thành phần điều khiển giúp tạo ra các đối tượng
2.3 Ngôn ngữ Bootstrap
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng
để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy
định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo
Trang 11nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc
với framework này trong quá trình thiết kế giao diện website.
*Lợi ích khi sử dụng Bootstrap
-Tiết kiệm thời gian
Boostrap làm cho lập trình viên thiết kế giao diện website tốn rất nhiều thời gian
và công sức, bởi vậy các thư viện của Boostrap có nhiều đoạn mã sẵn sàng giúpbạn có thể áp dụng vào các website của mình luôn Vậy nên khi đó bạn sẽ tiếtkiệm được rất nhiều thời gian để tự viết code cho giao diện website của mình
-Khả năng tùy biến cao
Bạn có thể dựa vào nó thì để phát triển nền tảng giao diện của chính websitemình, Boostrap cung cấp cho bạn hệ thống Grid System mặc định có 12 bột và độrộng 940px Đặt biệt với Bootstrap thì bạn có thể thay đổi, nâng cấp và phát triểndựa trên các nền tảng này
-Responsive web design
Nền tảng Bootstrap giúp việc phát triển giao diện website phù hợp với đa thiết bị trở nên dễ dàng nhất và đây cũng là xu thế thiết kế website
2.4 Ngôn ngữ JavaScrip
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khácnhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềmnền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia,nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên củaNetscape, vào tháng 9 năm 1995 Được đặt tên đầu tiên là Mocha, tên của nó đượcđổi thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng nhưbây giờ Phiên bản đầu tiên của ngôn ngữ này bị giới hạn độc quyền bởi Netscape
và chỉ có các tính năng hạn chế, nhưng nó tiếp tục phát triển theo thời gian, nhờmột phần vào cộng đồng các lập trình viên đã liên tục làm việc với nó
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript.ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm
Trang 121999 Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắpmọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụngJavaScript vào năm 2016 Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêngtrở thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trìnhweb
Ưu điểm:
JavaScript là ngôn ngữ lập trình dễ học
Lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn.
JavaScript hoạt động trên nhiều trình duyệt, nền tảng
JavaScript giúp website tương tác tốt hơn với khách truy cập.
JavaScript nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác
Nhược điểm:
Dễ bị khai thác
Có thể được dùng để thực thi mã độc trên máy tính của người dùng
Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất
Chương 3 Phân tích thiết kế hệ thống
3.1 Mô hình tổng quan của hệ thống nghiên cứu
-Người đọc: Người truy cập ứng dụng, đọc, tìm kiếm nội dung sách
-Người quản trị: Quản lý các hoạt động của ứng dụng, cập nhập thông tin,thêm sửa xóa người đọc, sách
Trang 133.2 Thiết kế chi tiết
● Mục đích: Mô tả hoạt động xem trang chủ của người đọc
● Mô tả: - Sau khi người đọc nhập thông tin, ứng dụng sẽ hiển thị trang chínhgồm các thông tin mới của sách
- Người dùng cũng có thể xem các cập nhập mới nhất về sách trên trang chủ
● Mục đích: Mô tả hoạt động đăng nhập, nhập thông tin
● Mô tả: - Đây là yêu cầu bắt buộc để thực hiện các chức năng của ứng dụng
- Hệ thống sẽ hiện thị phần đăng nhập khi người dùng sử dụng lần đầu
3.3.4 Tìm kiếm:
● Mục đích: Mô tả hoạt động tìm sách
● Mô tả: Người dùng tìm kiếm theo tên tác giả hoặc tên sách
Trang 143.3.5 Sắp xếp
● Mục đích: Mô tả hoạt động sắp xếp của sách
● Mô tả: Người dùng có thể xem sách theo sự sắp xếp sẵn có
3.3.6 Thể loại
●Mục đích: Mô tả các thể loại của sách
●Mô tả: người dùng có thể tìm kiếm các sách cùng thể loại một cách dẽ dàng
3.4 Sơ đồ use case
● Đăng nhập:
Trang 15● Bình luận và chia sẻ
Trang 16● Quản lý
3.5 Sơ đồ hoạt động của các trang web
●Đăng nhập
Trang 17● Đọc sách
Trang 18Chương 4 TRIỂN KHAI XÂY DỰNGGiao diện ứng dụng:
-Đăng kí:
-Đăng nhập:
-Trang chủ:
Trang 20-Thông tin sách:
Trang 21-Thể loại:
-Sắp xếp:
Trang 22-Trang sách:
Trang 23TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN
*Ưu điểm
-Nắm được các bước xây dựng 1 website đọc sách online, đáp ứng được nhu cầucủa người người đọc
- Xây dựng được bố cục trang website hợp lí, bắt mắt
- Nắm vững được quy trình hoạt động của website
*Hạn chế
- Chưa có cơ sở dữ liệu
- Còn một số chức năng chưa hoàn thành
- Website chưa được tối ưu
* Hướng phát triển
- Xây dựng website đáp ứng được nhu cầu và một số chức năng cho người dung
- Phân quyền quản trị tối ưu hơn
Trang 24DANH MỤC TÀI LIỆU THAM KHẢO
[1] Jermy Osborn & Nhóm AGI Creative,2017,Thiết Kế Trang Web Thích Ứng Giàu Tính Năng,Nhà xuất bản Bách Khoa - Hà Nội
[2] Đậu Quang Tuấn,2018, Tự Học Thiết Kế Trang Web Bằng HTML, Nhà xuất bản Giao thông vận tải
Tài liệu Internet:
Trang 25[1] https://getbootstrap.com/
[2] https://vi.wikipedia.org/
[3] https://www.hostinger.vn/
[4] https://www.w3schools.com/