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

lOMoARcPSD|14734974

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
CƠ SỞ LẬP TRÌNH WEB
ĐỀ T䄃I: THIẾT KẾ TRANG WEB BÁN GAME
Sinh viên thực hiện

: TRẦN ĐỨC NHẬT

Giảng viên hướng dẫn : PHƯƠNG VĂN CẢNH
Nghành

: CÔNG NGHỆ THƠNG TIN

Chun nghành

: CƠNG NGHỆ PHẦN MỀM

Lớp

: D15CNPM6

Khóa

: D15

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

lOMoARcPSD|14734974

PHIẾU CHẤM ĐIỂM
Họ và tên

Nội dung thực hiện

Trần Đức Nhật

- Tham gia quá trình làm
báo cáo, code

Điếm

Chữ ký

- Làm trang thông tin
phụ kiện, kiến thức bên
lề, liên hệ

Họ và tên
Giảng viên chấm 1 :

Giảng viên chấm 2 :

Chữ ký

Ghi chú

lOMoARcPSD|14734974

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ột
trong 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 ra
nhữ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 chinh
phục hết đỉnh cao này đến đỉnh cao khác. Mạng internet là một trong những sản
phẩ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 tồ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ần
như 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ơng
tin, 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 độ nhanh
hơ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ộc
số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 trang
thươ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, hay
chỉ đơn giản là để cập nhật tin tức thông qua các trang báo mạng, nghe nhạc, xem
phim sau những giờ làm việc căng thẳng. Vậy nếu như chúng ta có mong muốn


lOMoARcPSD|14734974

cung cấp những thơng tin hữu ích, những trải nghiệm, kinh nghiệm quý báu trong
cuộc sống cho người khác thông qua Internet, thì phải làm thế nào? Có vơ vàn
nhữ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ên
nhữ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 ta
trê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ác
trang 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.


lOMoARcPSD|14734974

CHƯƠNG 1 : TỔNG QUAN VỀ LẬP TRÌNH WEBSITE
1.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 web
cho 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 con
thì 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ếu
là:
• 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ến

thứ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 đổi
giao diện hang loạt. Các trang web tĩnh này sẽ có phần đ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 được
giữ 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.


lOMoARcPSD|14734974

Như vậy với các website tĩnh thế hệ mới chỉ kém website động ở khâu cập
nhật nội dung và thực thi các tương tác trên nền web.
1.1.2. Thiết kế web động
Web động là web có hệ thống cơ sở dữ liệu dung để cung cấp thông tin cho
website.
Điểm mạnh của web động so với web tĩnh là khả năng quản lý dữ liệu web
tốt, khả năng tương tác trên hệ thống web, dễ dàng cập nhật nội dung và them các
tính năng tiện ích quản lý cho doanh nghiệp và thân thiện với người dùng.
Trong giai đoạn khởi đầu của website, có rất nhiều ngơn ngữ lập trình được sử
dụng như: JSP, ASP, PHP, ASP.NET, JSP (Java), Cold Fusion, Perl, Python và một
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ặc
php3 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ác

lậ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ây
dự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.


lOMoARcPSD|14734974

Để đư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ên
mạng có thể sử dụng: Share Hosting - tức mua một dung lượng nhất định trên máy
chủ, VPS - tức một máy chủ chạy với công nghệ ảo hóa, Dedicated Server - một
máy chủ vật lý.
Và một tên miền cho website để định hướng được người dung truy cập
và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 ưa
chuộng và thịnh hành. Mã nguồn mở đang trở thành một xu hướng mới, một người
khơng biết lập trình cũng có thể thiết kế website động với đầy đủ chức năng thông
qua 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ủa
nhiề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.


lOMoARcPSD|14734974

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ên
các trang web với các mẩu thơng tin được trình bày trên World Wide Web. Cùng
vớ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ành
một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên
bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát
triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với
phiê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 Sheet
language. Nó dung để tạo phong cách và định kiểu cho những yếu tố được viết
dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của
nhiề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ệt
cá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 định
dạ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à

lOMoARcPSD|14734974

phong cách khác nhau. Để viết lại code cho trang web là cả một quá trình dài, cực
nhọ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ên
giao 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ãi
cho 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 đầu
tiê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ơn
Java. .js là phần mở rộng thường được dung cho tập tin mã nguồn JavaScript.
Phiên bản mới nhất của JavaScript là ECMAScript 7. ECMAScript là phiên
bả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.


lOMoARcPSD|14734974

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 đồ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úp
cá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ột
cá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ày
nội dung sao cho khéo léo để người sử dụng có thể hiểu rõ về sản
phẩ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ện
xây dựng thương hiệu tuyệt vời, chúng thường có tỉ lệ chuyển đổi
thấp hơn các định dạng trực tuyến khác. Vì thế lựa chọn hình thức
thành lập website giới thiệu về game là một sự đúng đắn


lOMoARcPSD|14734974

2.2. Giải pháp
Để có một website bán game đươc mọi người 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 q 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ủ
 Sử dụng từ ngữ dễ hiểu, ngắn gọn, có giá trị.
 Dễ dàng khám phá các đường link, thời gian tải về nhanh để mọi
người có thể tìm được thông tin nhanh nhất.
 Giữ cho trang web gọn nhẹ, âm thanh, hình ảnh rõ nét, ngơn ngữ cơ
đọng, xúc tích.
 Là một website có chất lượng được nhiều người ghé thăm và đặt
mua hàng tin cậy
 Xây dựng hệ thống quản ký giữ liệu tránh đánh cắp tài nguyên của
website
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ể hồ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


lOMoARcPSD|14734974

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 q lớn, tốc độ xử lý nhanh.
- Đảm bảo an toàn dữ liệu khi chạy.
- Đảm bảo an tồ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.

Downloaded by quang tran ()


lOMoARcPSD|14734974

CHƯƠNG 3: THIẾT KẾ GIAO DIỆN
3.1. Mô tả nghiệp vụ
Với phần mơ tả website và chức năng thì nhóm đã quyết đinh xây dựng trang
web có cấu trúc gồm các module sau:
Trang chủ (Home)
Giới thiệu
Trang sản phẩm
Khách hang đánh giá
Trang Liên hệ
3.2. Thiết kế layout
3.2.1 Layout cho trang chủ (Home)

Downloaded by quang tran ()

lOMoARcPSD|14734974

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

Downloaded by quang tran ()


lOMoARcPSD|14734974

Hình 3.3 Layout cho trang sản phẩm
3.2.4 Layout trang đánh giá

Downloaded by quang tran ()


lOMoARcPSD|14734974

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)

Downloaded by quang tran ()

lOMoARcPSD|14734974

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

Downloaded by quang tran ()


lOMoARcPSD|14734974

3.3.4 Trang đánh giá

Hình 3.12 Giao diện chính trang đánh giá
3.3.5 Trang liên hệ

Hình 3.13 Giao diện chính các trang liên hệ

Downloaded by quang tran ()


lOMoARcPSD|14734974

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ều
kiế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át
thự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ận
vớ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ơn
ngữ lập trình, cơng cụ mà mình đang sử dụng, cũng như lý thuyết, phương pháp
tì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 q trình em hồ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 q
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ớn
của em có thể được hồn thiện hơn.
Em xin chân thành cảm ơn!

Downloaded by quang tran ()


lOMoARcPSD|14734974

Downloaded by quang tran ()