báo cáo bài tập lớn xây dựng ứng dụng web đề tài trang thông tin về tựa game astroneer

PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH...CHƯƠNG IV... ●CSS t>y ch?nh cách hiển th@ đoạn text●CSS t>y ch?nh kiểu chữ và kBch thưCc●CSS t>y ch?nh bảng●CSS t>y ch?nh danh sách- Ưu điểm của C

B GIÁO D C VÀ ĐÀO T OỘ Ụ Ạ

TR ƯỜ NG Đ I H C PHENIKAA Ạ Ọ

BÁO CÁO BÀI T P L N Ậ Ớ

H C PH N: XÂY D NG NG D NG WEB Ọ Ầ Ự Ứ Ụ

Đ tài: ề

“Trang thông tin v t a game Astroneer” ề ự

Thành viên

1 Nguy n ễ Minh Tr ng Giangườ MSSV: 21011597

2 Nguy n ễ Cao Anh MSSV: 21012036

L p: ớ Xây d ng ng d ng web-1-1-23(N02) ự ứ ụ

HÀ N I, 10/2023 Ộ

MỤC LỤC

CHƯƠNG I GIỚI THIỆU ĐỀ TÀI

1 Tên đ tài ề

2 Gi i thi u đ tài ớ ệ ề

3 M c tiêu và ph m vi đ tài ụ ạ ề

3.1 Mục tiêu

3.2 Phạm vi đề tài

CHƯƠNG II CÔNG NGHỆ SỬ DỤNG

1 T ng quan v l p trình Web ổ ề ậ

2 T ng quan v HTML, CSS và JavaScript ổ ề

2.1 HTML

2.2 CSS

2.3 Javascript

CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH

CHƯƠNG IV KẾT LUẬN

1 ƯU ĐIỂM

2 HẠN CHẾ

2.1 Hạn chế của web

2.2 Hạn chế và giải pháp trong quá trình làm bài

3 KẾT LUẬN

4 SOURCE CODE

4.1 Link source code

4.2 Link trang web

1

B ng phân chia công vi c nhóm 9 ả ệ

1 Nguy n Minh Trễ ường

Giang

Thi t k Main page, Server và Support page, ế ế

Up hosting cho trang web, Làm báo cáo

2 Nguy n Cao Anhễ Thi t k News page và trang tin t c, Làm báoế ế ứ

cáo

L I M Đ U Ờ Ở Ầ

Công ngh thông tin đang phát tri n v i m t t c đ chóng m t, các nhà khoa h cệ ể ớ ộ ố ộ ặ ọ

đã kh ng đ nh: ch a có m t ngành ngh và công ngh nào l i phát tri n nhanhẳ ị ư ộ ề ệ ạ ể chóng, sâu r ng và có nhi u ng d ng nh CNTT S ra đ i c a Internet đã mộ ề ứ ụ ư ự ờ ủ ở

ra m t k nguyên m i - k nguyên thông tin, trong đó các ho t đ ng kinh t , xãộ ỷ ớ ỷ ạ ộ ế

h i, gi i trí đ u độ ả ề ượ ốc s hóa và k t n i v i nhau.ế ố ớ

Trong lĩnh v c gi i trí, Internet đã t o ra m t sân ch i m i cho các trò ch i đi nự ả ạ ộ ơ ớ ơ ệ

t Các trang web gi i thi u v s n ph m game ra đ i đã tr thành m t kênhử ớ ệ ề ả ẩ ờ ở ộ thông tin quan tr ng cho các game th ọ ủ

M t trang web thông tin v game cung c p cho ngộ ề ấ ười dùng nh ng thông tin m iữ ớ

nh t, đ y đ nh t v t a game y T i đây, ngấ ầ ủ ấ ề ự ấ ạ ười dùng có th tìm th y t t cể ấ ấ ả

nh ng gì h c n bi t v m t t a game, t c t truy n, gameplay, đ h a, âmữ ọ ầ ế ề ộ ự ừ ố ệ ồ ọ thanh, đ n đánh giá c a các chuyên gia và c ng đ ng game th Các trang webế ủ ộ ồ ủ này cũng thường xuyên c p nh t nh ng tin t c m i nh t v các s ki n, khuy nậ ậ ữ ứ ớ ấ ề ự ệ ế mãi, và b n c p nh t c a các t a game.ả ậ ậ ủ ự

V i s phát tri n c a Internet và công ngh thông tin, các trang web nh th nàyớ ự ể ủ ệ ư ế ngày càng tr nên ph bi n và đóng vai trò quan tr ng qu ng bá cho nhi u ngở ổ ế ọ ả ề ười

2

bi t đ n h n V i mong mu n xây d ng m t website đ m i ngế ế ơ ớ ố ự ộ ể ọ ười có th n mể ắ

được thông tin v t a game Astroneer, chúng em đã tái hi n l i trang web qu ngề ự ệ ạ ả

bá t a game này.ự

CH ƯƠ NG I GI I THI U Đ TÀI Ớ Ệ Ề

1 Tên đ tài ề

- Trang thông tin v t a game Astroneerề ự

- Thiết kế dựa theo trang web: https://astroneer.space

2 Gi i thi u đ tài ớ ệ ề

Trang web ch a thông tin liên quan đ n t a game Astroneer nh các b nứ ế ự ư ả

c p nh t, thông tin m i, …ậ ậ ớ

3 M c tiêu và ph m vi đ tài ụ ạ ề

3.1 M c tiêu ụ

Hi u rõ h n v HTML và CSS cùng các ngôn ng l p trình web, trau d iể ơ ề ữ ậ ồ

nh ng k năng xây d ng m t ng d ng web Ngoài ra khi th c hi n đ tài đãữ ỹ ự ộ ứ ụ ự ệ ề giúp chúng em có nhi u ki n th c n n t ng đ phát tri n ng d ng c a côngề ế ứ ề ả ể ể ứ ụ ủ ngh vào th c t ệ ự ế

3.2 Ph m vi đ tài ạ ề

●Tìm hiểu về lập trình Web

●Tìm hiểu về HTML, CSS và Javascript

●Xây dựng trang web sử dụng các ngôn ngữ lập trình như: HTML CSS, và Javascript

3

CHƯƠNG II CÔNG NGHỆ SỬ DỤNG

1 T ng quan v ổ ề l p trình ậ Web

L p trình web là quá trình xây d ng và phát tri n các trang web Nó bao g mậ ự ể ồ

vi c t o ra các thành ph n giao di n nh HTML, CSS và JavaScript đ xây d ngệ ạ ầ ệ ư ể ự

c u trúc, thi t k và tấ ế ế ương tác v i ngớ ười dùng trên trình duy t.ệ

HTML là ngôn ng đánh d u đữ ấ ượ ử ục s d ng đ t o c u trúc c a m t trang web.ể ạ ấ ủ ộ HTML đ nh nghĩa các ph n t c a trang web, ch ng h n nh tiêu đ , đo n văn,ị ầ ử ủ ẳ ạ ư ề ạ hình nh, và nút.ả

CSS là ngôn ng đ nh d ng đữ ị ạ ượ ử ục s d ng đ đ nh d ng giao di n c a m t trangể ị ạ ệ ủ ộ web CSS đ nh nghĩa kích thị ước, màu s c, và v trí c a các ph n t HTML.ắ ị ủ ầ ử

Javascript là ngôn ng l p trình đữ ậ ượ ử ục s d ng đ thêm tính tể ương tác cho trang web JavaScript cho phép người dùng tương tác v i trang web thông qua các sớ ự

ki n, ch ng h n nh nh p chu t và cu n.ệ ẳ ạ ư ấ ộ ộ

Ngoài ra, l p trình web còn bao g m các thành ph n khác, ch ng h n nh :ậ ồ ầ ẳ ạ ư

● Back-end: Đây là ph n x lý d li u và ph n h i v i các yêu c u t front-ầ ử ữ ệ ả ồ ớ ầ ừ end Back-end được vi t b ng các ngôn ng nh PHP, Java, Python, Ruby, ế ằ ữ ư v.v

● Database: Đây là n i l u tr d li u c a trang web.ơ ư ữ ữ ệ ủ

● Web server: Đây là máy ch l u tr các trang web và ng d ng web.ủ ư ữ ứ ụ

L p trình web là m t lĩnh v c r ng l n và đang phát tri n nhanh chóng Có r tậ ộ ự ộ ớ ể ấ nhi u công ngh và ngôn ng l p trình khác nhau có th đề ệ ữ ậ ể ượ ử ục s d ng đ xâyể

d ng các trang web và ng d ng web.ự ứ ụ

4

2 Tổng quan về HTML, CSS và JavaScript

2.1 HTML

HyperText Markup Language hay còn g i là HTML là ngôn ng đánh d uọ ữ ấ tiêu chu n cho các tài li u đẩ ệ ược thi t k đ hi n th trong trình duy t web Nóế ế ể ể ị ệ

có th để ược tr giúp b i các công ngh nh CSS và các ngôn ng k ch b nợ ở ệ ư ữ ị ả

gi ng nh JavaScript.ố ư

HTML cung c p các phấ ương ti n đ t o tài li u có c u trúc b ng cáchệ ể ạ ệ ấ ằ

bi u th ng nghĩa c u trúc cho văn b n nh headings, paragraphs, lists, links,ể ị ữ ấ ả ư quotes và các m c khác Các ph n t HTML đụ ầ ử ược phân đ nh b ng các tags,ị ằ

được vi t b ng d u ngo c nh n Các tags nh và gi i thi u tr c ti p n i dungế ằ ấ ặ ọ ư ớ ệ ự ế ộ vào trang Các tags khác nh bao quanh và cung c p thông tin v văn b n tài li uư ấ ề ả ệ

và có th bao g m các th khác làm ph n t ph Các trình duy t không hi n thể ồ ẻ ầ ử ụ ệ ể ị các th HTML, nh ng s d ng chúng đ di n gi i n i dung c a trang.ẻ ư ử ụ ể ễ ả ộ ủ

- Ưu điểm của HTML là:

●Ngôn ng này đữ ược s d ng r ng rãi v i r t nhi u ngu n tàiử ụ ộ ớ ấ ề ồ nguyên h tr cùng m t c ng đ ng s d ng vô cùng l n đ ng sauỗ ợ ộ ộ ồ ử ụ ớ ằ nó

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

●Mã ngu n m và hoàn toàn mi n phí.ồ ở ễ

●Các Markup s d ng trong HTML thử ụ ường ng n g n và đ ng nh t.ắ ọ ồ ấ

●Chu n chính c a web đẩ ủ ược v n hành b i World Wide Webậ ở Consortium (W3C)

5

●D dàng tích h p v i các ngôn ng backend nh PHP, Node.js, ễ ợ ớ ữ ư

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

●Ngôn ng này ch đữ ỉ ược áp d ng ch y u cho trang web tĩnh Đ iụ ủ ế ố

v i các tính năng đ ng, b n c n s d ng JavaScript ho c ngôn ngớ ộ ạ ầ ử ụ ặ ữ backend bên th 3 ví d nh PHP.ứ ụ ư

●Người dùng ph i t o các trang web riêng l cho HTML, ngay c khiả ạ ẻ ả các ph n t gi ng nhau.ầ ử ố

●M t s trình duy t ch p nh n các tính năng m i m t cách ch mộ ố ệ ấ ậ ớ ộ ậ

ch p Đôi khi các trình duy t cũ h n không ph i lúc nào cũng hi nạ ệ ơ ả ể

th các th m i h n.ị ẻ ớ ơ

2.2 CSS

Cascading Style Sheet hay còn g i là CSS là m t ngôn ng l p trình đọ ộ ữ ậ ược thi t k r t đ n gi n và d s d ng M c tiêu c a CSS là giúp đ n gi n hóa quáế ế ấ ơ ả ễ ử ụ ụ ủ ơ ả trình t o ra các website CSS có nhi m v th c hi n vi c x lý giao di n c aạ ệ ụ ự ệ ệ ử ệ ủ

m t trang web Có th k đ n các y u t nh màu s c văn b n, hay kho ngộ ể ể ế ế ố ư ắ ả ả cách gi a các đo n, font ch , hình nh, b c c, màu n n,…ữ ạ ữ ả ố ụ ề

V i s h tr c a CSS thì ngớ ự ỗ ợ ủ ười dùng có th thay đ i, ch nh s a nh ngể ổ ỉ ử ữ

y u t trên theo ý mu n Trong quá trình phát tri n và thi t k website thì CSSế ố ố ể ế ế chính là m t công c vô cùng c n thi t Nó có th gi i quy t t t nh ng côngộ ụ ầ ế ể ả ế ố ữ

vi c mà HTML không x lý đệ ử ược

- Có thể phân chia các loại CSS thành những loại như:

●CSS t>y ch?nh hình nền

6

●CSS t>y ch?nh cách hiển th@ đoạn text

●CSS t>y ch?nh kiểu chữ và kBch thưCc

●CSS t>y ch?nh bảng

●CSS t>y ch?nh danh sách

- Ưu điểm của CSS:

●Khả năng tiết kiệm thời gian

●CSS giúp khả năng tải trang nhanh chóng

●Dễ dàng khi thực hiện bảo trì

●CSS sở hữu thuộc tBnh rộng

●Khả năng tương thBch tốt

- Nhược điểm của CSS:

●CSS hoạt động khác biệt cho từng trình duyệt

●Khá khó khăn cho người mCi

7

●Đ@nh dạng của web có khả năng gặp rủi ro

2.3 Javascript

Javascript chính là m t ngôn ng l p trình web r t ph bi n ngày nay.ộ ữ ậ ấ ổ ế Javascript được tích h p đ ng th i nhúng vào HTML đ h tr cho website trợ ồ ờ ể ỗ ợ ở nên s ng đ ng h n Chúng cũng đóng vai trò tố ộ ơ ương t nh m t ph n c aự ư ộ ầ ủ website, cho phép Client-side Script t ngừ ười dùng tương t máy ch (Nodejs)ự ủ

đ t o ra nh ng website đ ng.ể ạ ữ ộ

Javascript – m t ngôn ng vô cùng ph bi n trong lĩnh v c l p trình ngàyộ ữ ổ ế ự ậ nay Có th nói r ng, Javascript hay còn g i là JS là ngôn ng r t thông d ngể ằ ọ ữ ấ ụ trong vài năm g n đây Đã có khá nhi u framework ra đ i và đầ ề ờ ược vi t b ng lo iế ằ ạ ngôn ng này T frontend cho đ n backend thì b t c n i nào cũng có s xu tữ ừ ế ấ ứ ơ ự ấ

hi n c a JS M t vài thông tin sau đây s giúp cho b n hi u thêm v lo i ngônệ ủ ộ ẽ ạ ể ề ạ

ng đ c bi t này.ữ ặ ệ

- Ưu điểm của Javascript:

●Chương trình r t d h c.ấ ễ ọ

●Nh ng l i Javascript r t d đ phát hi n, t đó giúp b n s a l i m tữ ỗ ấ ễ ể ệ ừ ạ ử ỗ ộ cách nhanh chóng h n.ơ

●Nh ng trình duy t web có th d ch thông qua HTML mà không c n sữ ệ ể ị ầ ử

d ng đ n m t compiler.ụ ế ộ

●JS có th ho t đ ng trên nhi u n n t ng và các trình duy t web khácể ạ ộ ở ề ề ả ệ nhau

8

●Được các chuyên gia đánh giá là m t lo i ngôn ng l p trình nh vàộ ạ ữ ậ ẹ nhanh h n nhi u so v i các ngôn ng l p trình khác.ơ ề ớ ữ ậ

●JS còn có th để ượ ắc g n trên m t s các element ho c nh ng events c aộ ố ặ ữ ủ các trang web

●Nh ng website có s d ng JS thì chúng s giúp cho trang web đó có sữ ử ụ ẽ ự

tương tác cũng nh tăng thêm nhi u tr i nghi m m i cho ngư ề ả ệ ớ ười dùng

●Người dùng cũng có th t n d ng JS v i m c đích là đ ki m traể ậ ụ ớ ụ ể ể

nh ng input thay vì cách ki m tra th công thông qua ho t đ ng truyữ ể ủ ạ ộ

xu t database.ấ

●Giao di n c a ng d ng phong phú v i nhi u thành ph n nh Dragệ ủ ứ ụ ớ ề ầ ư and Drop, Slider đ cung c p đ n cho ngể ấ ế ười dùng m t Rich Interfaceộ (giao di n giàu tính năng).ệ

●Giúp thao tác v i ngớ ười dùng phía Client và tách bi t gi a các Clientệ ữ

v i nhau.ớ

- Nhược điểm của Javascript:

●JS Code Snippet khá l n.ớ

●JS d b các hacker và scammer khai thác h n.ễ ị ơ

●JS cũng không có kh năng đa lu ng ho c đa d ng x lý.ả ồ ặ ạ ử

9

●Có th để ược dùng đ th c thi nh ng mã đ c trên máy tính c a ngể ự ữ ộ ở ủ ười

s d ng.ử ụ

●Nh ng thi t b khác nhau có th s th c hi n JS khác nhau, t đó d nữ ế ị ể ẽ ự ệ ừ ẫ

đ n s không đ ng nh t.ế ự ồ ấ

●Vì tính b o m t và an toàn nên các Client-Sideả ậ Javascript s không choẽ phép đ c ho c ghi các file.ọ ặ

●JS không đượ ỗ ợc h tr khi b n s d ng trong tình tr ng thi t b đạ ử ụ ở ạ ế ị ược

k t n i m ng.ế ố ạ

CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH

K t qu thu đ ế ả ượ c

● Giao di n trang ch ệ ủ

10

● Giao di n trang server ệ

12

● Giao di n trang news và bài vi t ệ ế

14

● Giao di n trang support ệ

15

CHƯƠNG IV KẾT LUẬN

1 Ư U ĐI M Ể

- Cơ bản nắm được những kiến thức, cách th c đứ ể xây dựng một trang web, thực hiện đúng quy trình

- Xây dựng hệ thống giao diện, bưCc đầu xây dựng được một trang web hoàn

ch?nh

- Ứng d ng đụ ược các công ngh trong quá trình h c t p: HTML, CSS,ệ ọ ậ Javascript, Jquery

- Có th tể ương tác cơ bản vCi người d>ng

16

2 H N CH Ạ Ế

2.1 H n ch c a web ạ ế ủ

- Còn đơn giản so v i b n g cớ ả ố

- V n ch a th c hi n đẫ ư ự ệ ược m t s chi ti t có s n trang g cộ ố ế ẵ ở ố

2.2 H n ch và gi i pháp trong quá trình làm bàiạ ế ả

Vì HTML, CSS, Javascript là ngôn ngữ mCi được học nên có nhiều bỡ ngỡ trong việc căn ch?nh đúng kBch thưCc và có nhiều lệnh mCi nên giải pháp duy nhất là đọc slide bài giảng và tìm thêm kiến thức ở trên mạng

3 K T LU N Ế Ậ

Sau một thời gian học tập và nghiên cứu, nhóm chúng em đã hoàn thành bài tập đúng hạn Khi làm bài tập lCn, chúng em đã học tập thêm nhiều kiến thức về những ngôn ngữ, những phần mCi,… và giúp chúng em cải thiện

h n trong vi c hoàn thi n trang webơ ệ ệ Vì đây là lần đầu tiên chúng em làm web nên vẫn còn nhiều hạn chế trong thiết kế, sản phẩm vẫn còn một số lỗi nhỏ Chúng em mong sẽ nhận được những ý kiến đóng góp của các thầy cô

và các bạn để bài tập lCn của chúng em được hoàn thiện hơn và có thể đi vào thực tế Nhóm chúng em xin chân thành cảm ơn cô Nguy n Th Thùy Liênễ ị

đã tận tình hưCng dẫn, truyền đạt những kiến thức mCi và ch? bảo nhóm em trong suốt thời gian qua Chúng em xin chân thành cảm ơn!

4 SOURCE CODE

4.1 Link source code

https://github.com/Giang1311/Astroneer-project

4.2 Link trang web

https://astroneer-project.000webhostapp.com

17