Báo cáo chuyên đề học phần cơ sở lập trình web đề t i thiết kế trang web bán game

LỜI MỞ ĐẦUNgày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổchức, cũng như của các cô

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN

Khóa : D15

Hà Nội, tháng 4 năm 2022

PHIẾU CHẤM ĐIỂM

Họ và tên Nội dung thực hiện Điếm Chữ ký

Trần Đức Nhật - Tham gia quá trình làm

báo cáo, code

- Làm trang thông tinphụ kiện, kiến thức bên

lề, liên hệ

Họ và tên Chữ ký Ghi chú

Giảng viên chấm 1 :

Giảng viên chấm 2 :

LỜI MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổchức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ranhững bước đột phá mạnh mẽ

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử,công nghệ thông tin cũng có được những công nghệ có đẳng cấp và lần lượt chinhphục hết đỉnh cao này đến đỉnh cao khác Mạng internet là một trong những sảnphẩm có giá trị hết sức lớn lao và ngày càng trở thành một công cụ không thểthiếu, là nền tảng chính cho sự truyển tải, trao đổi thông tin trên toàn cầu

Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sửdụng, chỉ cần có một máy tính kết nối Internet và một dòng dữ liệu truy tìm thì gầnnhư lập tức cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thôngtin, hình ảnh và thậm chí đôi lúc có cả những âm thanh nếu bạn cần

Bằng Internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanhhơn và chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đãthúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tửtrên khắp thể giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộcsống con người

Sự phát triển và lan tỏa mạnh mẽ của Internet đã len lỏi vào trong các hoạtđộng sản xuất, kinh doanh, giờ đây, người dùng có thể truy cập vào các trangthương mại điện tử để thực hiện mua bán trao đổi một cách dễ dàng, tiện lợi, haychỉ đơn giản là để cập nhật tin tức thông qua các trang báo mạng, nghe nhạc, xemphim sau những giờ làm việc căng thẳng Vậy nếu như chúng ta có mong muốn

cung cấp những thông tin hữu ích, những trải nghiệm, kinh nghiệm quý báu trongcuộc sống cho người khác thông qua Internet, thì phải làm thế nào? Có vô vànnhững cách khác nhau như bình luận trên mạng xã hội, gửi thử điện tử v.v…Nhưng có một cách còn thú vị hơn thế, giúp cho chúng ta thỏa sức sáng tạo nênnhững điều mới mẻ, đó chính là xây dựng một Website, ta có thể thoải mái chia sẻnhững điều thú vị, tạo nên những nội dung độc đáo của chính bản thân chúng tatrên đó.

Vì vậy để tiếp cận và đóng góp, đẩy mạnh sự phát triển và phổ biến của cáctrang web thông tin ở Việt Nam, chúng em đã tìm hiểu và xây dựng một trang web

về bán game

CHƯƠNG 1 : TỔNG QUAN VỀ LẬP TRÌNH WEBSITE1.1 Thiết kế website

Thiết kế web hay thiết kế website đơn giản là công việc tạo một trang webcho cá nhân, công ty, doanh nghiệp hoặc tổ chức Có 2 phương thức chính để thiết

kế web đó là: thiết kế web tĩnh và thiết kế web động

1.1.1 Thiết kế website tĩnh

Thiết kế web tĩnh là sử dụng các đoạn mã HTML, hình ảnh, video, Audio,Flash, Javascript(jQuery) và CSS để tạo một giao diện cho trang web và tên tập tinđược lưu có phần mở rộng là: html hoặc htm Trong thiết kế web tĩnh không có hệ

cơ sở dữ liệu như MySQL hay MSSQL

Đối với một website tĩnh, khi muốn thay đổi giao diện cho các trang web conthì người viết phải đổi bằng tay cho từng trang một do vậy web tĩnh có 3 điểm yếulà:

• Khó thay đổi giao diện một cách đồng bộ

• Khó thay đổi nội dung nếu như người quản lý trang web không có kiếnthức về HTML

• Không có khả năng tương tác web

Trong các web tĩnh thế hệ mới, đã được bổ sung thêm chức năng thay đổigiao diện hang loạt Các trang web tĩnh này sẽ có phần đuôi mở rộng thay vì html

và htm mà là php, aspx, jsp, asp Trong web PHP tĩnh, các mã HTML đều đượcgiữ nguyên chỉ them một cú pháp để gọi thư viện template

Thư viện template là một tệp tin chứa giao diện của toàn bộ trang web và cóphần mở rộng là tpl Khi người quản trị trang thay đổi các file template này thìgiao diện trang web sẽ thay đổi theo

Như vậy với các website tĩnh thế hệ mới chỉ kém website động ở khâu cậpnhật nội dung và thực thi các tương tác trên nền web.

số ngôn ngữ không phổ biến khác Nhưng hiện tại 2 ngôn ngữ được dung phổ biến

là PHP và ASP.NET

PHP được dùng trên các máy chủ lưu trữ web dung hệ điều hành Linux như:CenOS, Debian, Fedora, RedHat, Ubuntu Các file có phần mở rộng là php, hoặcphp3 và thường theo cấu trúc LAMP Ở một số máy chủ lưu trữ web còn hỗ trợPHP trên nền Windows với cấu trúc WAMP

PHP là ngôn ngữ được sử dụng phổ biến nhất trên thế giới dựa vào PHP, cáclập trình viên đã xây dựng các mã nguồn mở nổi tiếng như Joomla, Wordpress.Drupal, Mambo, phpBB, Zend Đây là các ứng dụng web được sử dụng để xâydựng các trang website động, người dung không nhất thiết phải biết viết ngôn ngữlập trình mà vẫn có thể tạo ra những web động

ASP.NET được dung trên các máy chủ lưu trữ web dùng hệ điều hành

của Microsoft như Windows Server 2003, Windows Server 2008 Các file có phần

mở rộng là aspx hoặc asp

Để đưa website lên mạng điều đầu tiên là cần một máy chủ lưu trữ web vàmáy chủ này phải được kết nối Internet liên tục Trong các giải pháp lưu trữ trênmạng có thể sử dụng: Share Hosting - tức mua một dung lượng nhất định trên máychủ, VPS - tức một máy chủ chạy với công nghệ ảo hóa, Dedicated Server - mộtmáy chủ vật lý.

Và một tên miền cho website để định hướng được người dung truy cậpvào website của bạn

Hiện tại, web động được thiết kế trên nền mã nguồn mở đang rất được ưachuộng và thịnh hành Mã nguồn mở đang trở thành một xu hướng mới, một ngườikhông biết lập trình cũng có thể thiết kế website động với đầy đủ chức năng thôngqua mã nguồn mở

T i sao cầần ph i thiếết kếế web? ạ ả

• Website được phân thành 4 loại chủ yếu:

 Trang web cá nhân

 Trang web thương mại, web doanh nghiệp

 Trang web của chính phủ

 Trang web tổ chức phi lợi nhuận

Dù thuộc loại nào thì website cũng là một phần thiết yếu trong hoạt động củanhiều cá nhân, tổ chức và doanh nghiệp hiện đại Thời đại 4.0 khiến website khẳngđịnh vai trò quan trọng trong hoạt động doanh nghiệp

1.2 Các công cụ được sử dụng để lập trình giao diện web

1.2.1 HTML (HyperText Markup Language)

HTML (tiếng Anh, viết tắt cho 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 với các mẩu thông tin được trình bày trên World Wide Web Cùngvới CSS và JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web.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 tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thànhmột chuẩn 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, HTML đang được phát triển tiếp vớiphiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.\

1.2.2 CSS (Cascading Style Sheet)

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheetlanguage Nó dung để 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ể dung nó để “đánh dấu” lên site

Những tag như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất

nhiều rắc rối cho lập trình viên Vì website có nhiều font khác nhau, màu nền và

phong cách khác nhau Để viết lại code cho trang web là cả một quá trình dài, cựcnhọc Vì vậy, CSS được tạo bởi W3C là để giải quyết vấn đề này.

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữmarkup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nêngiao diện website), chúng là không thể tách rời

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ làmột trang chứa văn bản mà không có gì khác

1.2.3 JavaScript

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông

dịch được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dung rộng rãicho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs) Nó vốnđược phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầutiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript.Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơnJava là phần mở rộng thường được dung cho tập tin mã nguồn JavaScript..js

Phiên bản mới nhất của JavaScript là ECMAScript 7 ECMAScript là phiênbản chuẩn hóa của JavaScript Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợkhông đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việcvới XML,được chuẩn hóa trong ECMA-357

CHƯƠNG 2 : TỔNG QUAN VỀ ĐỀ T I

2.1 Mô tả về website

• Website giới thiệu shop bán game như một hình thức quảng básản phẩm cho các con game của những công ty tập đoàn nhưsteam ,garena,riot,

• Thể hiện sự chi tiết của sản phẩm mà người dung cần tìm qua đó cóthể tư vấn trực tiếp giúp cho người dung thuận tiện hơn trong việc

đi lại hay là tham khảo ý kiến của các đồng nghiệp hay bạn bè

• Website này sẽ giúp người có cái nhìn khác biết về các loại gameđặc biết là game bản quyền có tính phí, hiểu rõ về nó một cách dễdàng

• Lượng người vào internet rất nhiều vì thế lập website giới thiệu vềnhững loại game sẽ thu được một lượng khách hàng đáng kể

• Lập trang web giới thiệu về game và vật phẩm trong game sẽ giúpcác cửa hàng kinh doanh có thể thông báo mọi phương thức, hoạtđộng kinh doanh về sản phẩm của mình cho khách hàng biết mộtcách nhanh nhất

• Mục đích của website này là nhằm quảng bá sản phẩm nhưng yếu

tố được xem trọng nhiều nhất là sự định hướng và cách trình bàynội dung sao cho khéo léo để người sử dụng có thể hiểu rõ về sảnphẩm một cách đầy đủ

• Hiện nay chiến dịch quảng cáo bằng website là một phương tiệnxây dựng thương hiệu tuyệt vời, chúng thường có tỉ lệ chuyển đổithấp hơn các định dạng trực tuyến khác Vì thế lựa chọn hình thứcthành lập website giới thiệu về game là một sự đúng đắn

2.2 Giải pháp

Để có một website bán game đươc mọi người yêu thích và ủng hộ thì cần phải đạt những yêu cầu sau:

 Xây dựng được cho trang web tổ chức chặt chẽ và dễ sử dụng

 Bố trí hợp lý gon gang gấy bắt mắt cho người sử dụng

 Trang chủ phải thiết kế đơn giản hài hòa, đọc đáo không quá cầu kì.Các trang con phải có nội dung rõ dàng thể hiện rõ được mục đích

và ý tưởng của người thiết kế

 Mục đích của trang web này là để quảng bá sản phẩm vì thế hìnhảnh độc đáo và lộng lẫy là được trưng bày trên trang chủ

2.3 Chức năng và yêu cầu của website

Cung cấp thông tin cho người đọc: Nhằm cung cấp tất cả những thông tin

hữu ích cho người đọc, về nội dung, thông tin về game

Cập nhật thông tin một cách nhanh chóng: Thông tin mới nên được chia

sẻ với người đọc và điều này trang web có thể hoàn thành một cách xuất sắc.Không chỉ cập nhật, tải lên trang dễ dàng mà còn tốn ít thời gian cũng như công

sức Nếu sử dụng trang web, doanh nghiệp chỉ cần thu thập thông tin, tải lên trang

và chờ đón phản hồi

Tạo nên một môi trường giao lưu trao đổi lành mạnh: Người đọc có thểtruy cập vào website, có thể tự do lựa chọn và tìm hiểu về các loại game , và từ đótăng lượng thu nhập bán ra của sản phẩm

2.4 Yêu cầu phi chức năng

- Giao diện thân thiện, dễ dùng, hấp dẫn, dễ tìm kiếm thông tin cácloại game

- Website có dung lượng không quá lớn, tốc độ xử lý nhanh

- Đảm bảo an toàn dữ liệu khi chạy

- Đảm bảo an toàn thông tin người dùng, phải có tính trung thực

- Có khả năng lưu trữ nhiều dữ liệu

- Khách hàng có thể lựa chọn và mua hàng ngay trên trang web

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

Hình 3.1 Layout cho trang chủ

3.2.2 Layout giới thiệu

Hình 3.2 Layout cho trang giới thiệu

3.2.3 Layout cho trang sản phẩm

Hình 3.3 Layout cho trang sản phẩm

3.2.4 Layout trang đánh giá

Hình 3.4 Layout trang đánh giá

3.2.5 Layout trang liên hệ

Hình 3.5 Layout trang liên hệ

3.3 Kết quả thực hiện

3.3.1 Trang chủ (Home)

Hình 3.9 Giao diện chính trang chủ

3.3.2 Trang giới thiệu

Hình 3.10 Giao diện chính trang giới thiệu

3.3.3 Trang sản phẩm

Hình 3.11 Giao diện chính trang sản phẩm

KẾT LUẬN

Trên đây là toàn bộ nội dung báo cáo thực hiện những vấn đề nêu lên ở phầnđầu Đó là minh chứng rõ rệt cho sự cố gắng, quyết tâm cũng như đánh giá khảnăng hiểu biết, kiến thức của em trong việc tìm hiểu hệ thống hiện tại và xây dựng

hệ thống mới nhằm đáp ứng nhu cầu thực tiễn

Đồng thời, qua bài báo cáo trên cũng đã giúp cho em học hỏi được thêm nhiềukiến thức mới mẻ, nâng cao tính tự giác Giúp em có thêm kinh nghiệm đi khảo sátthực tế và được trau dồi khả năng phân tích, đánh giá về nhiều khía cạnh, tiếp cậnvới người dùng, khách hàng Thêm vào đó, là giúp cho em hiểu rõ hơn về ngônngữ lập trình, công cụ mà mình đang sử dụng, cũng như lý thuyết, phương pháptìm hiểu về tính đặc trù của các giao diện website

Em xin được cảm ơn các thầy cô trong bộ môn, đã đưa ra những lời khuyên,đánh giá bổ ích trong quá trình em hoàn thiện báo cáo, giúp cho em nắm rõ hơn vềmặt lý thuyết và kiến thức Nhưng cũng thể tránh khỏi những sai xót trong quátrình làm báo cáo, mong thầy cô và các bạn tích cực góp ý, nhận xét để bài tập lớncủa em có thể được hoàn thiện hơn

Em xin chân thành cảm ơn!