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ộ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

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䄃

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 Chuyên nghành : CÔNG NGHỆ PHẦN MỀM Lớp : D15CNPM6

Khóa : D15

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

PHIẾU CHẤM ĐIỂM

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

báo cáo, code

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

lề, liên hệ

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ộ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 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ầ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

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

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 đ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 đượ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

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

Để đư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ở

• 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

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à

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

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

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ú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

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ủ

 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ể 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

Downloaded by quang tran (qt738189@gmail.com)

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 (qt738189@gmail.com)

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 (qt738189@gmail.com)

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

3.2.4 Layout trang đánh giá

Downloaded by quang tran (qt738189@gmail.com)

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 (qt738189@gmail.com)

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 (qt738189@gmail.com)

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 (qt738189@gmail.com)

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 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ớn của em có thể được hoàn thiện hơn

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

Downloaded by quang tran (qt738189@gmail.com)