Thiết kế website thư viện số

Trên cơ sở muốn tìm hiểu về Web và ứng dụng của Web cũng như những phát triển của nó em đã thực thiện đồ án cơ sở 1 với đề tài “Xây dựng Website Thư viện số”..  Nghiên cứu nhu cầu của n

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:

THIẾT KẾ WEBSITE THƯ VIỆN SỐ

NGUYỄN VIẾT ANH QUYỀN- 22IT244 Giáo viên hướng dẫn : TS NGUYỄN SĨ THÌN

Đà nẵng, tháng 6 năm 2023

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 THIẾT KẾ WEBSITE THƯ VIỆN SỐ

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

LỜI CẢM ƠN

Suốt quá trinh học tập trong trường VKU vừa qua, em được thầy cô cung cấp và truyềnđạt những tất cả các kiến thức quý báu Ngoài ra em cũng được rèn luyện một tinh thần học tập và sang tạo

Đồ án cơ sở 1 là cơ hội để em áp dụng những kiến thức mà em đã học trong kì vừa qua Đồng thời rút ra nhiều kinh nghiệm thực tế và quý giá trong suốt quá trinh thực hiện đề tài Sau một học kỳ em tập trung công sức cho đề tài và làm việc tích cực, đặc biệt là nhờ sự chỉ đạo và hướng dẫn tận tinh của TS Nguyễn Sĩ Thìn đã giúp em hoàn thanh đề tài một cách thuận lợi và gặt hái những kết quả mong muốn Bên cạnh những kết quả khiêm tốn mà em đạt được, chắc chắn không tranh khỏi những sai sót khi thực hiện đề tài của minh, kinh mong thầy

cô thông cảm Sự phê binh, góp ý của thầy cô sẽ là những bài học kinh nghiệm rất quý báu cho công việc sau này của em.

Nhóm em xin trân trọng cảm ơn thầy cô.

Phê, tháng 6 2023

NHẬN XÉT

(Của giáo viên hướng dẫn)

DANH MỤC HÌNH

Trang

Hình 1 Thành phần Website 7

Hình 2 Danh sách thư mục 8

Hình 3 Header 8

Hình 4 Banner 9

Hình 5 Footer 9

Hình 6 Trang chủ 11

Hình 7 Danh mục phân loại 12

Hình 8 Trang đăng ký 12

Hình 9 Trang đăng nhập 13

Hình 10 Trang Expert Advice 14

Hình 11 Trang About Us 15 Hình 12 Trang Contact 16 Hình 13 Trang thông tin 17

MỞ ĐẦUVới sự phát triển mạnh mẽ của công nghệ thông tin và sự lớn mạnh, rộng khắp của mạng máy tính toàn cầu Việc ứng dụng công nghệ vào các lĩnh vực của cuộc sống ngày càng được quan tâm và sử dụng hiệu quả, đemlại lợi ích to lớn về mọi mặt Sự lớn mạnh của mạng máy tính đã xóa bỏ mọi ranh giới về không gian và thời gian để đem con người xích lại gần nhau hơn Thông qua mạng máy tính con người có thể tiếp xúc với mọi loạitri thức như tri thức văn hóa, xã hội, khoa học kỹ thuật

Trong lĩnh vực công nghệ thông tin, với sự thay đổi không ngừng của công nghệ và kỹ thuật thì mạng máy tính sẽ là nơi học tập, trao đổi kinh nghiệm, thử nghiệm và truyền đạt những tri thức mới một cách nhanh chóng và hiệu quả nhất Ngày nay, việc cập nhật và bổ sung trí thức phục

vụ cho việc học tập, nghiên cứu của con người là rất quan trong Tuy nhiên

do điều thời gian mỗi người ngày căng bận rộn, nhiều người còn không có thời gian thậm chí mua sách để đọc

Từ nhu cầu thực tế đó, là sinh viên của khoa công nghệ thông tin em mong muốn tìm hiểu kỹ hơn về các dịch vụ Internet Trên cơ sở muốn tìm hiểu về Web và ứng dụng của Web cũng như những phát triển của nó em

đã thực thiện đồ án cơ sở 1 với đề tài “Xây dựng Website Thư viện số” Điều này có thể giải quyết vấn đề mọi người Vừa nhanh, gọn, tiện lợi và đặc biệt là hoan toan miễn phí

DANH MỤC CỤM TỪ VIẾT TẮT

4 Document Object Model DOM

CHƯƠNG 1 GIỚI THIỆU

1.1 Giới thiệu đề tài:

1.1.1 Mục tiêu và nhiệm vụ nghiên cứu :

 Đối với người dùng: Có thể dễ dàng tìm kiếm, đọc sách và đọc tintức miễn phí

 Đối với admin: Cung cấp thông tin, nội dung của những cuốn sáchhay và tin tức mới nhất Đảm bảo cho người dùng được trải nghiệmtốt nhất

1.1.2 Đối tượng và phạm vi nghiên cứu :

 Lập trình web nói chung và ngôn ngữ lập trình HTML, CSS,Javascrip nói riêng

 Nghiên cứu nhu cầu của người dùng tiềm năng trong thời đại mới đểxây dựng website dễ nhìn, dễ tiếp cận, dễ sử dụng

1.2 Phương pháp nghiên cứu :

- Phương pháp nghiên cứu tài liệu: Tìm và đọc các tài liệu liên quan đếnkiến thức về ngôn ngữ lập trình (slide, tài liệu của trường ), thông tin trênmạng xã hội

- Phương pháp thực nghiệm: Tạo ra sản phẩm và không ngừng cải tiến

- Phương pháp chuyên gia: Tham khảo ý kiến của giảng viên hướng dẫn.1.3 Xây dựng một website:

Chúng tôi đang cố gắng nỗi lực mang đến sự hiệu quả cho con người trong việc có thể lựa chọn rút ngắn được thời gian để đọc sách trực tuyến thay cho việc phải đến tận nơi để mua rồi đọc, đặc biệt là trong thời gian dịch bệnh diễn biến phức tạp Như vậy, đòi hỏi website thiết kế phải mang tính hệ thống, có tính chuyên nghiệp, mang lại cho người dùng sử dụng mộtcách an toàn và tiện lợi nhất

- Tạo ấn tượng với người dùng: Trước tiên cần phải chuyên

nghiệp trong từng chi tiết, bởi website chính là bộ mặt của ứng dụng Dovậy các tính năng cần được sắp xếp một cách logic, ranh mạch, dễ tìm kiếm

và đáp ứng nhu cầu của người dùng khi truy cập vào web

- Xây dựng được uy tín đối với người dùng: Đối với người dùng

thì uy tín rất quan trọng, một website chuyên nghiệp mang lại dấu ấn sâu

1

sắc với khách hàng từ đó làm cho họ có cảm giác tin tưởng và tự tin lựachọn sản phẩm mình ưa thích mà không lo bị lừa, dụ dỗ…

- Quảng cáo website : Muốn website được nhiều người quan tâm,

để ý đến thì chất lượng bài viết cần hấp dẫn 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 sâu sắc thu hút người xem và sửdụng hệ thống

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT2.1 Ngôn ngữ HTML

2.1.1 HTML là gì?

HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng

để xây dựng và cấu trúc lại các thành phần có trong Website

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,

Ưu điểm và nhược điểm của HTML là gì?

a) Ưu điểm của HTML:

Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn

Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

Học HTML khá đơn giản

Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao

Sử dụng mã nguồn mở, hoàn toàn miễn phí

HTML là chuẩn web được vận hành bởi W3C

Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js )

b) Nhược điểm của HTML:

3

Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP).

Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùnglặp như header, footer

Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới Do đó, dù trong HTML document có sử dụng các tag này thì trình duyệt cũng không đọc được).Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML.Các thẻ trong HTML

Các trang HTML được quy định bằng các thẻ tag Những thẻ này được chứa trong các dấu ngoặc đơn dạng: <tên thẻ> Trừ một vài thẻ đặc biệt, hầuhết các thẻ cơ bản đều có các thẻ đóng tương ứng với nó Ví dụ, thẻ

<html> có thẻ đóng tương ứng là </html>, thẻ <body> có thẻ đóng tương ứng là </body> …

Ngôn ngữ CSS

CSS là gì?

CSS là viết tắt của Cascading Style Sheets, một ngôn ngữ thiết kế đơn giản,

xử lý một phần giao diện của trang web CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương tiện khác Sử dụng CSS, bạn

có thể kiểm soát màu chữ, cỡ chữ, kiểu chữ, khoảng cách giữa các đoạn vănbản, kích thước của các thành phần trên trang web, màu nền, thiết kế bố cục và cách trang web hiển thị trên những màn hình có kích thước khác nhau cũng như hàng loạt hiệu ứng khác

2.1.4 Công dụng của HTML

a) Tiết kiệm thời gian:

Có thể viết CSS một lần và sử dụng lại chúng trên nhiều trang HTML Có thể định kiểu cho từng phần tử HTMLM và áp dụng kiểu đó cho bao nhiêu trang web tùy ý

b) Tải trang nhanh hơn:

Với CSS, không cần khai báo thuộc tính cho từng tag HTML mỗi lần dùng tag đó Chỉ cần viết thuộc tính của tag trong CSS và nó sẽ được áp dụng

4

mỗi khi tag xuất hiện trên trang web Nhờ đó, số lượng code cần viết sẽ ít

đi, thời gian load trang sẽ nhanh hơn

c) Bảo trì dễ dàng:

Với CSS, không cần khai báo thuộc tính cho từng tag HTML mỗi lần dùng tag đó Chỉ cần viết thuộc tính của tag trong CSS và nó sẽ được áp dụng mỗi khi tag xuất hiện trên trang web Nhờ đó, số lượng code cần viết sẽ ít

đi, thời gian load trang sẽ nhanh hơn

d) Tải trang nhanh hơn:

Để thực hiện thay đổi trên toàn bộ trang, chỉ cần đổi kiểu trong file CSS và tất cả các thành phần trên trang web sẽ được cập nhật tự động

e) Có nhiều kiểu hơn HTML:

CSS có một loạt thuộc tính, nhiều hơn so với HTML khá nhiều Nhờ đó bạn

có thể làm cho trang web hiển thị tốt hơn so với chỉ dùng HTML

f) Khả năng tương thích với nhiều thiết bị:

CSS cho phép nội dung được tối ưu hóa trên nhiều loại thiết bị Bằng cách

sử dụng cùng một tài liệu HTML, nhưng nó có thể hiểnthị tốt trên PC, điện thoại, các thiết bị cầm tay hay khi in

2.1.5 Thư viện JavaScript

JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lập trình web ở phía client, nó tuân theo chuẩn ECMAScript Là một ngôn ngữ linh động, cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình JavaScript không hề liên quan tới ngôn ngữ lập trình java, được hầu hết các trình duyệt ngày nay hỗ trợ Với javascript, ứngdụng web của bạn sẽ trở nên vô cùng sinh động, mang tính trực quan và tương tác cao JavaScript theo phiên bản hiện hành là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi chocác trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng Giống Java, JavaScript có cú pháp tương tự ngôn ngữ lập trình C “.js” là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript

Thư viện JQuery

JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết íthơn, làm nhiều hơn

JQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứngđộng và tương tác Ajax Với jQuery, khái niệm Rapid Web Development

đã không còn quá xa lạ

5

JQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ

đa dạng với việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ bởijQuery:

Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse(duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử dụngphương tiện Selector mã nguồn mở, mà được gọi là Sizzle

Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử

lý các sựkiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler

Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX

Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt

mà bạn có thểsử dụng trong các Website của mình

Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB (gzipped)

Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari3.0+, Chrome và Opera9.0+

Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector

và cú pháp XPath cơ bản

2.1.6 Thư viện Bootstrap

Bootstrap là một Framework có chứa HTML, CSS, JavaScript, Framework trong tiếng việt có nghĩa là “khuôn khổ” giúp tiết kiệm được thời gian, côngsức hơn nữa việc xây dựng hai teamplate cho giao diện Desktop và Mobile

đã lỗi thời thay vào đó là Responsive Responsive sẽ giúp website của bạn hiển thị tương thích với mọi kích thướcmàn hình nhờ đó bạn sẽ tùy chỉnh hiện thị được nhiều hơn trên các loại màn hình khác nhau

Ưu điểm của Bootstrap:

Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng vàowebsite của mình Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao diệncủa mình

Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng giao diệncủa chính mình Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12bột và độ rộng 940px Bạn có thể thay đổi, nâng cấp và phát triển dựa trên nền tảng này

6

Responsive Web Design: Với Bootstrap, việc phát triển giao diện website

để phù hợpvới đa thiết bị trở nên dễ dàng hơn bao giờ hết Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng trên thế giới

7

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1 Phân tích hệ thống

3.1.1Yêu cầu giao diện

- Bố cục đơn giản, hiện đại giúp mang đến cảm giác dễ chịu cho người dùng

- Dung lượng file không quá lớn

- Thanh menu đơn giản, phân loại danh mục rõ ràng và hợp lý tương ứng với tên đã lập ra

- Phải có thông tin liên hệ

- Font chữ đơn giản, dễ nhìn, màu sắc hài hòa

- Kiểm tra website có tương thích với nhiều trình duyệt web, các thiết bị di động…

- Cho phép người dùng xem sách, tin tức mà người dùng quan tâm.Yêu cầu chức năng

Hình 1 Thành phần Website

3.2.3 Giao diện hệ thống

- Trang chủ: giao diện tổng quan Website

- Trang liên hệ: đăng nhập và tạo tài khoản mới

- Trang sách: Có thể đọc nhiều cuốn sách

- Trang tin tức: Có thể đọc nhiều tin tức khác nhau

- Trang Giới thiệu giao diện gồm video và lời giới thiệu Website

- Trang tác giả: giao diện thông tin tác giả

9

CHƯƠNG 4 KẾT QUẢ XÂY DỰNG

4.1 Danh sách thư mục cài đặt

Hình 2 Danh sách thư mục

4.2 Cấu trúc của website

4.1.2Nội dung của website được chia thành các phần: header, banner, footer

4.1.2.1Header

Hình 3 Header

- Phần Header gồm:

+ Icon: liên kết các mạng xã hội của Website

+ Thanh tìm kiếm: tìm kiếm thông tin một cách dễ dàng

+ Nút Login: hiện thị giao diện Đăng nhập/ Đăng ký

+ Thanh điều hướng (Navigation): giúp truy cập vào các trang chính khác

10

Hình 6 Trang chủ

Đây là trang web đầu tiên khi vào trang chủ Lướt xuống sẽ thấy sách, tác giả…

13

Trang đăng ký/ đăng nhập

Hình 7 Trang đăng ký

14

Hình 8 Trang phản hồi

Trang sách

15

Hình 7 Trang sách

16

Trang chi tiết sách (1 vài cuốn)

Trang About Us

18

Hình 8 Trang About Us

Trang 404

- Cung cấp form giúp khách hàng gửi góp ý của mình đến website

19

Hình 9 Trang phản hồi

Trang tác giả

20

Bước 2: Phác thảo ý tưởng.

Bước 3: Nghiên cứu thị trường và đối thủ

Bước 4: Thực hiện thiết kế giao diện phần mềm

Bước 5: Demo ý tưởng xây dựng Website

Bước 6: Bắt đầu xây dựng

Bước 7: Thiết kế giao diện Website

Bước 8: Kiểm tra phần mềm

Bước 9:Tiến hành truy cập thử

Bước 10: Marketing Website đến với người dùng đồng thời tìm kiếm chủ đầu tư và nhà tài trợ

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

5.1 Kết luận :

Sau khi hoàn thành đồ án, em đã đạt được một số kết quả từ việc tìm hiểu, nghiên cứu, xây dựng ứng dụng như sau :

 Hiểu rõ quy trình đọc sách trực tuyến

 Tìm hiểu và nắm rõ các kiến thức cơ bản để xây dựng một trang web

 Giao diện thân thiện, dễ thao tác, dễ sử dụng

 Nắm vững ngôn ngữ HTML

5.2 Hạn chế của đề tài :

 Chưa thể tạo được đánh giá và bình luận sách

 Website tốc độ chưa được kiểm định

 Chưa thể phân thêm quyền admin để thêm sách, tin tức

5.3 Hướng phát triển của đề tài :

Đề tài trong tương lai sẽ phát triển thêm các chức năng :

 Phát triển thêm các chức năng đăng nhập bằng google, facebook…

 Phát triển thêm tính năng mua sách

 Xây dựng chức năng bình luận và đánh giá sách

 Thêm phân quyền admin

21