đồ án cơ sở 1 thiết kế website đọc truyện online

-Để đáp ứng nhu cầu ngày càng tăng của người dùng trong việc đọc truyện online, và cung cấp một nền tảng thuận tiện và dễ dàng truy cập vào các tác phẩm vănhọc, nghệ thuật việc "THIẾT KẾ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Kỹ Thuật Máy Tính Và Điện Tử

ĐỒ ÁN CƠ SỞ 1

THIẾT KẾ WEBSITE ĐỌC TRUYỆN ONLINE

Sinh viên thực hiện: Trần Hiếu Bảo Kiệt_23NS048

Phạm Nhật Long_23NS054

Giảng viên hướng dẫn: Ths.Ninh Khánh Chi

Đà Nẵng, tháng 05 năm 2024

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Kỹ Thuật Máy Tính Và Điện Tử

ĐỒ ÁN CƠ SỞ 1

THIẾT KẾ WEBSITE ĐỌC TRUYỆN ONLINE

Sinh viên thực hiện: Trần Hiếu Bảo Kiệt_23NS048

Phạm Nhật Long_23NS054

Giảng viên hướng dẫn: Ths.Ninh Khánh Chi

Đà Nẵng, tháng 05 năm 2024

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Trong suốt quãng thời gian học tập môn và thực hành Đồ án cơ sở 1 (IT),chúng em

đã luôn nhận được sự quan tâm và hướng dẫn rất nhiệt tình của thầy cô trongkhoa Khoa học máy tính đã trang bị cho chúng em kiến thức cần thiết để hoànthiện đề tài sáng tạo này

Lời đầu tiên chúng em xin được bày tỏ lòng biết ơn chân thành đến Bangiám hiệu Trường Đại học Công nghệ Thông tin và Truyền thông Việt Hàn đãgiảng dạy những kiến thức, những kĩ năng cơ bản để hoàn thành đồ án

Đặc biệt chúng em xin cảm ơn giáo viên ThS Ninh Khánh Chi đã trực tiếpgiúp đỡ và chỉ giáo cho chúng em hoàn thành đồ án này

Chúng em xin chân thành cảm ơn.

Đà Nẵng,tháng 04 năm 2024

Ths.Ninh Khánh Chi Trần Hiếu Bảo Kiệt

Phạm Nhật Long

Mục lục

2.3)Sử dụng html với ứng dụng Visual Studio Code: 11

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

2.4)Group và các phương tiện truyền truyền thông: 23

PHẦN MỞ ĐẦU:

-Trong một thế giới năng động và liên kết như hiện nay, việc truy cập vào văn họcthông qua Internet đã trở thành một phần không thể thiếu trong đời sống hàngngày của chúng ta Internet không chỉ là một mạng lưới máy tính toàn cầu mà còn

là một nguồn tài nguyên vô tận cho việc khám phá và trải nghiệm văn hóa

-Để đáp ứng nhu cầu ngày càng tăng của người dùng trong việc đọc truyện online,

và cung cấp một nền tảng thuận tiện và dễ dàng truy cập vào các tác phẩm vănhọc, nghệ thuật việc "THIẾT KẾ WEBSITE ĐỌC TRUYỆN ONLINE" trở thành một dự

án mang tính cấp bách

-Chúng em đã sử dụng các công nghệ như HTML, CSS, JavaScript và PHP để pháttriển website đọc truyện online Sự kết hợp của các công nghệ này đã tạo ra mộtgiao diện thân thiện với người dùng và một hệ thống quản lý truyện hiệu quả.-Chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy,cô đã hướng dẫn và hỗ trợchúng em trong suốt quá trình thực hiện dự án này, đặc biệt là sự hỗ trợ chânthành từ cô Ninh Khánh Chi, đã giúp chúng em vượt qua những khó khăn và hoànthành dự án một cách thành công

CHƯƠNG I: GIỚI THIỆU TỔNG QUAN

1)TỔNG QUAN:

1.1) Lý do chọn đề tài:

-Trong thời đại ngày nay, công nghệ phát triển, bao gồm đó là các phương thứcgiải trí được nở rộ Và đọc sách truyện là một trong những phương thức được ưachuộng nhất Thay vì mua truyện người ta chọn đọc truyện trên các trang web,cùng với đó cộng đồng đọc giả ngày càng lớn mạnh do các chính sách khuyếnkhích văn hóa đọc và một phần là do sở thích Vậy nên chúng em đã chọn đề tài

phát triển "THIẾT KẾ WEBSITE ĐỌC TRUYỆN ONLINE ".

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

-Thiết kế thành công website Đọc truyện online dựa trên ngôn ngữ HTML, CSS,PHP,

-Mục tiêu của dự án là xây dựng một nền tảng đọc truyện trực tuyến đa dạng vàthuận tiện, giúp người đọc dễ dàng truy cập và trải nghiệm các tác phẩm văn họcmột cách thoải mái và thú vị Chúng em tin rằng việc phát triển một website đọctruyện online sẽ không chỉ mang lại sự giải trí mà còn giúp tạo ra một không gianvăn hóa độc đáo, góp phần nâng cao khả năng tiếp cận văn học của cộng đồngđộc giả trong thời đại số hóa

-Nhanh chóng, hiệu quả, dễ tiếp cận, thuận tiện trong việc lựa chọn các thể loạitruyện.

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

-Đối tượng: Các trang web đọc truyện tương đương, các trang web có giao diệnnổi bật dễ tiếp cận

-Phạm vi nghiên cứu: Cộng đồng độc giả đam mê các tác phẩm truyện, tiểuthuyết, sách.

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

- Phương pháp phân tích tổng hợp kinh nghiệm

-Phương pháp khảo sát, tìm hiểu và thu thập thông tin

-Phương pháp triển khai thực nghiệm

1.5) Dự kiến kết quả:

-Tạo ra một website đọc truyện online giúp thỏa mãn thú vui giải trí các độc giảcủa cộng đồng đam mê đọc truyện chữ, truyện tranh, sách, tiểu thuyết, dế dàngtiếp cận đa dạng, tiết kiệm thời gian và lợi ích tối đa

1.6) Ý nghĩa khoa học và thực tiễn:

-Chia sẻ niềm đam mê đọc truyện

-Có thêm kiến thức thông qua các mẫu truyện, kĩ năng thiết kế và phát triển mộtsản phẩm

- Xây dựng cộng đồng đọc góp phần phát triển văn hóa đọc

2)CƠ SỞ LÝ THUYẾT:

2.1) Giới Thiệu My SQL:

2.1.1)My SQL là gì?

- MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (được gọi tắt làRDBMS), hoạt động theo mô hình client-server Được tích hợp với Apache và PHPcho RDBMS, MySQL đã dần trở thành một công cụ quản lý dữ liệu mạnh mẽ Mỗi

cơ sở dữ liệu trong MySQL có thể chứa nhiều bảng quan hệ khác nhau, cung cấpkhả năng quản lý dữ liệu linh hoạt Ngoài ra, MySQL còn hỗ trợ các truy vấn vàlệnh SQL giúp người sử dụng tương tác và truy xuất dữ liệu một cách hiệu quả

2.1.2)Ưu điểm khi dùng My SQL:

- Nhanh chóng và tiết kiệm chi phí: MySQL thực hiện công việc một cách nhanhchóng nhờ vào việc thiết lập các tiêu chuẩn và tận dụng khả năng làm việc hiệuquả Điều này giúp tăng tốc độ thực thi và tối ưu chi phí cho doanh nghiệp

- Mạnh mẽ và mở rộng: MySQL không chỉ xử lý một lượng lớn dữ liệu mà còn cókhả năng mở rộng linh hoạt theo nhu cầu, đặc biệt phù hợp với các ứng dụng đòihỏi khả năng mở rộng khi cần thiết

- Đa tính năng: MySQL hỗ trợ nhiều tính năng SQL, cung cấp những chức năngđược mong đợi từ một hệ quản trị CSDL quan hệ, cả trực tiếp và gián tiếp

- Độ bảo mật cao: MySQL là lựa chọn lý tưởng cho các ứng dụng truy cập CSDLqua internet, nhờ vào tính năng bảo mật và đặc biệt ở mức độ an toàn cao

- Dễ sử dụng: MySQL không chỉ là cơ sở dữ liệu dễ sử dụng mà còn đảm bảo ổnđịnh và tốc độ cao Nó hoạt động trên nhiều hệ điều hành và cung cấp một hệthống chức năng mạnh mẽ

2.2) TÌM HIỂU NGÔN NGỮ PHP VÀ HTML:

2.2.1)Giới thiệu về PHP và HTML:

* PHP:

- Ngôn ngữ PHP là từ viết tắt của Personal Home Page (hiện nay là Hypertext

Preprocessor) Thuật ngữ này chỉ chuỗi ngôn ngữ kịch bản hay mã lệnh, phù hợp

để phát triển cho các ứng dụng nằm trên máy chủ

- Khi viết phần mềm bằng ngôn ngữ PHP, chuỗi lệnh sẽ được xử lý trên server để

từ đó sinh ra mã HTML trên client Và dựa vào đó, các ứng dụng trên website củabạn sẽ hoạt động một cách dễ dàng

- Người ta thường sử dụng PHP trong việc xây dựng và phát triển các ứng dụngwebsite chạy trên máy chủ Mã lệnh PHP có thể nhúng được vào trang HTMLbằng cách sử dụng cặp thẻ PHP

- Nhờ đó, website bạn phát triển dễ dàng kết nối được với các website khác trên

hệ thống mạng internet

- PHP cũng là ngôn ngữ lập trình mã nguồn mở và miễn phí PHP tương thích vớinhiều nền tảng khác nhau như Windows, MacOS và Linux, v.v

* HTML:

- HTML có tên đầy đủ là Hypertext Markup Language nghĩa là ngôn ngữ đánh dấu

siêu văn bản HTML thường được sử dụng để tạo và cấu trúc các phần trong trangweb và ứng dụng, phân chia các đoạn văn, heading, link, blockquotes,…

- HTML không phải là một ngôn ngữ lập trình mà chỉ là một ngôn ngữ đánh dấu.Điều này đồng nghĩa với việc HTML không thể thực hiện các chức năng “động”.Nói cách khác, HTML tương tự như phần mềm Microsoft Word, chỉ có tác dụngđịnh dạng các thành phần có trong website

*HTML:

- HTML được tạo ra bởi Tim Berners-Lee là nhà vật lý học của trung tâm nghiêncứu CERN ở Thụy Sĩ Ông đã nghĩ ra và viết siêu văn bản và hypertext trên

internet Hypertext được hiểu là văn bản chứa link, có thể giúp người xem truycập ngay lập tức

-Hiện nay, HTML đã trở thành một chuẩn Internet được vận hành và phát triểnbởi tổ chức W3C (World Wide Web Consortium) Bạn có thể tự tìm kiếm cập nhậtmới nhất của HTML tại bất kỳ thời điểm nào trên Website của W3C

-HTML đầu tiên được công khai là một tài liệu có tên “HTML Tags” được đề cập

trên Internet vào cuối năm 1991 Gồm 18 phần tử đơn giản của HTML và cácphiên bản sau của HTML đều có thêm tag và attributes mới

-Từ năm 1996, các phần tử HTML được duy trì với đầu vào là các nhà cung cấpphần mềm thương mại bởi World Wide Web Consortium

-Năm 2000, HTML đã trở thành tiêu chuẩn quốc tế, sau đó đến năm 2004 HTML5

trong Web Hypertext Application Technology Working Group và được hoàn

thiện vào năm 2014 HTML có thêm tags vào markup để xác định rõ nội dung là gì

ví dụ như <article>, <header>, <footer>

2.2.3)Cách hoạt động của PHP:

Các bước cài đặt Web server:

Bước 1: Download XAMPP tại https://www.apachefriends.org/download.html và

tiến hành cài đặt như các chương trình thông thường

Bước 2: Start Apache và MySQL trong XAMPP control panel

Bước 3: Gõ vào trình duyệt địa chỉ localhost Nếu hiện ra màn hình sau thì việc cài

đặt đã thành công

Bước 4: Vào thư mục cài đặt XAMPP/htdocs và tiến hành tạo file test.php với nội

dung như sau:

TIPS: Để lập trình PHP chúng ta có thể sử dụng các IDE sau: Netbeans, Eclipse,

Zend Studio, PHP Storm để đẩy nhanh quá trình phát triển và hạn chế lỗi xảy ratrong quá trình lập trình

2.3)SỬ DỤNG HTML VỚI ỨNG DỤNG VISUAL STUDIO CODE:

2.3.1)VISUAL STUDIO CODE là gì?

2.3.2)Cài đặt và cách sử dụng:

- Nếu bạn chưa tải phần mềm Visual Studio Code thì có thể vào link này để cài

đặt Chọn phiên bản tải xuống dành cho thiết bị của bạn (Windows, Mac, )

Cách cài đặt phần mềm Visual Studio Code

Tiến hành cài đặt ứng dụng Visual Studio Code sau khi tải xuống kết thúc:

● Nhấn vào tôi đồng ý các điều khoản thỏa thuận > Bấm Next

đồng ý các điều khoản thỏa thuận của Visual Studio code

● Tích chọn các ô trong mục Other > Next

Tích chọn các ô trong mục Other

● Kiểm tra Add to PATH > nhấn cài đặt Install

Nhấn Install để cài đặt phần mềm Visual Studio Code

● Đợi quá trình cài đặt Visual Studio Code kết thúc và nhấn Finish để

hoàn thành

Nhấn finish để hoàn thành cài đặt phần mềm Visual Studio Code

Tạo file HTML bằng Visual Studio Code

Chọn một ổ đĩa bất kỳ trong máy tính của bạn để tạo một thư mục có tên là

HTML&CSS, thư mục này sẽ là nơi lưu trữ dữ liệu code HTML của bạn

Tạo một thư mục mới trong máy tính của bạn

Tiếp theo mở phần mềm Visual Studio Code > vào File > chọn Open Folder

Mở thư mục vừa tạo trên phần mềm Visual Studio Code

Tìm đến thư mục HTML&CSS mà bạn vừa tạo và click chọn Select Folder

Tích chọn thư mục dùng để lưu code HTML và CSS

Lúc này, bạn đã mở thành công file HTML&CSS trên Visual Studio Code, click vào biểu tượng New File để tạo một file html Đặt tên file theo dự án của bạn và thêm đuôi “.html” vào tên (ví dụ: gitihofullstack.html)

Tạo file html mới trong thư mục lưu trữ code

Lúc này, file html đã được tạo xong và bạn có thể bắt đầu viết code để lập trìnhweb html

File html đã được tạo xong

CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG1)Biểu đồ chung:

2)Biểu đồ hoạt động:

2.1) Tài khoản

2.2)Tìm kiếm truyện

2.3) Ô bìa truyện

- Sau khi nhấn vào ô truyện sẽ chuyển sang web mới gồm các phần liên quan đến

bộ truyện

2.4)Group và cá phương tiện truyền thông

CHƯƠNG III: GIAO DIỆN THIẾT KẾ WEBSITE

Khi nhập vào “Đăng ký” thì sẽ hiện ra form đăng ký:

2) Trang chủ:

* Giao diện trang chủ website đọc truyện online hiển thị tất cả các menu chứcnăng của trang website cho phép người dùng thao tác với hệ thống Tùy theotừng quyền của người dùng mà khi đăng nhập vào hệ thống mà chương trình hiểnthị chức năng tương ứng

* Mục menu:

- Thể loại: Có nhiều thể loại truyện cho từng sở thích của từng bạn đọc

- Truyện nổi bật: Các truyện có lượt đánh giá và lượt đọc cao năm trong top

đề cử, giúp bạn đọc tiếp cận đến với các tác phẩm nổi bật nhất

- Với giao diện này, trang website đọc truyện sẽ đề cử những truyện nổi bật với

các đánh giá cao của cộng đồng và lượt đọc

- Theo hàng tuần, hệ thống còn cập nhất các bộ truyện có lượt đọc nhiều nhất

5)Trang thông tin về tác phẩm truyện

* Giao diện này giúp người đọc chúng ta biết thêm rõ các thông tin từng bộtruyện mà mình quan tâm như:

- Thông tin tác giả của bộ truyện

- Tình trạng của bộ truyện: Đang cập nhật, đã hoàn thành,

- Lượt thích

- Lượt theo dõi

- Lượt xem

6)Nội dung tác phẩm đọc:

- Ở phần nội dung tác phậm đọc, có phần giới thiệu sơ lược mạch nội dung

truyên, giúp khơi dậy niềm hứng thú của bộ truyện tới mọi người

- Tiếp đó là danh mục Danh sách chương: Cập nhật số chương mới ra, thời gian rachương mới nhất v.v

- Sau đây là các hình ảnh ví dụ về nội dung bộ truyện đọc của website đọc truyện

online:

7)Nội dung tác phẩm đọc:

- Ở phần nội dung tác phậm đọc, có phần giới thiệu sơ lược mạch nội dung

truyên, giúp khơi dậy niềm hứng thú của bộ truyện tới mọi người

- Tiếp đó là danh mục Danh sách chương: Cập nhật số chương mới ra, thời gian rachương mới nhất v.v

CHƯƠNG IV: KẾT LUẬN

1)Kết quả đạt được của đề tài:

- Sau thời gian thực hiện nhóm chúng em đã hoàn thiện hệ thống theo đúng tiến

độ và yêu cầu đặt ra

- Tìm hiểu hệ thống kỹ càng chính xác Phân tích rõ được:

+ Bài toán đặt ra

+ Hiện trạng hệ thống và yên cầu người sử dụng

+ Các chức năng của có của hệ thống

- Phần mềm có thể triển khai lên trên internet cho cộng đồng độc giả mê truyệnonline

- Phần mềm có giao diện dễ nhìn, thân thiện với người sử dụng Đặc biệt theo kịp

xu hướng giới trẻ hiện đại, thu hút người đọc dễ dàng

- Sau khi nghiên cứu, chúng em đã xây dựng được một website Đọc truyện online

có thể đưa vào sử dụng góp phần quảng bá, tạo một cộng đồng văn hóa mêtruyện

- Kỹ năng thiết kế giao diện trang website: có cơ hội áp dụng và cải thiện kỹ năngthiết kế web của mình thông qua việc xây dựng một trang web thực tế

- Sáng tạo thẩm mỹ: Thiết kế website là cơ hội để bạn thể hiện sự sáng tạo vàthẩm mỹ của mình Bạn có thể thử nghiệm với các màu sắc, bố cục, và hình ảnh

để tạo ra một trải nghiệm độc đáo và thú vị cho người dùng

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

* Dự án Thiết kế website đọc truyện online tuy đã hoàn thành xong vẫn không

tránh khỏi những thiếu xót cũng như những hạn chế nhất định:

- Khả năng mở rộng chức năng hạn chế: Thiết kế chỉ tập trung vào giao diện vàtrải nghiệm, nên khi muốn mở rộng hoặc thêm các tính năng phức tạp, bạn sẽ gặpkhó khăn hơn so với việc có backend hỗ trợ

- Khả năng tướng tác giới hạn: Thiết kế website không có backend có thể gây rahạn chế trong việc tạo ra trải nghiệm tương tác cao hơn cho người dùng, như tínhnăng thảo luận, đánh giá, hoặc chia sẻ nội dung

3) Khuyến nghị:

- Tối ưu hóa trải nghiệm người dùng thông qua việc cung cấp giao diện dễ sửdụng, đa dạng nội dung và thể loại truyện, tính năng đánh dấu và lưu trữ, cũngnhư tương tác cộng đồng, đồng thời đảm bảo bảo mật thông tin cá nhân và hỗtrợ đa ngôn ngữ, sẽ tạo ra một trang web đọc truyện online thú vị và tiện lợi chongười đọc.

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

- Tích hợp tính năng đa phương tiện: Mở rộng trang web bằng cách tích hợp các tính năng đa phương tiện như âm nhạc, video, hoặc trò chơi để làm giàu nội dung

và tăng cường trải nghiệm người dùng

- Nâng cấp tính năng trải nghiệm người dùng: Liên tục cập nhật và nâng cấp tính năng trải nghiệm người dùng, bao gồm cải thiện giao diện, tối ưu hóa tốc độ tải trang, và thêm tính năng tương tác mới để duy trì sự hấp dẫn và sự thoả mãn của người đọc

DANH MỤC TÀI LIỆU THAM KHẢO

1.Giáo Trình - Lập Trình Ứng Dụng Web Với PHP, Khuất Thùy Dương, Nhà xuất bản Đại Học Quốc Gia TP HCM, 2008

2.Lập trình Website chuẩn SEO , tập thể tác giả, Nhà xuất bản Văn hóa Thông tin

Hà Nội, 2014

3 Sách Ultimate Guide Series:Hướng dẫn Bài Bản Tối Ưu Hóa Website Dành cho Doanh Nghiệp,tác giả Jon Rognerud, Nhà xuất bản Hồng Đức, dịch giả Hoàng Anh, 2020

4. Tài liệu giáo trình PHP, Quách Chí Cường, ĐH KTTN, 2019