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 : 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 năm 2022 lOMoARcPSD|14734974 PHIẾU CHẤM ĐIỂM Họ tên Nội dung thực Trần Đức Nhật - Tham gia 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ọ tên Giảng viên chấm : Giảng viên chấm : Chữ ký Ghi lOMoARcPSD|14734974 LỜI MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Cùng với phát triển không ngừng kỹ thuật máy tính mạng điện tử, cơng nghệ thơng tin có cơng nghệ có đẳng cấp chinh phục hết đỉnh cao đến đỉnh cao khác Mạng internet sản phẩm có giá trị lớn lao ngày trở thành công cụ thiếu, tảng cho truyển tải, trao đổi thơng tin tồn cầu Giờ đây, việc liên quan đến thơng tin trở nên thật dễ dàng cho người sử dụng, cần có máy tính kết nối Internet dịng liệu truy tìm gần giới vấn đề mà bạn quan tâm ra, có đầy đủ thơng tin, hình ảnh chí đơi lúc có âm bạn cần Bằng Internet, thực nhiều công việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính điều này, thúc đẩy khai sinh phát triển thương mại điện tử phủ điện tử khắp thể giới, làm biến đổi đáng kể mặt văn hóa, nâng cao chất lượng sống người Sự phát triển lan tỏa mạnh mẽ Internet len lỏi vào hoạt động sản xuất, kinh doanh, đây, người dùng truy cập vào trang thương mại điện tử để thực mua bán trao đổi cách dễ dàng, tiện lợi, hay đơn giản để cập nhật tin tức thông qua trang báo mạng, nghe nhạc, xem phim sau làm việc căng thẳng Vậy có mong muốn lOMoARcPSD|14734974 cung cấp thơng tin hữu ích, trải nghiệm, kinh nghiệm quý báu sống cho người khác thơng qua Internet, phải làm nào? Có vơ vàn cách khác bình luận mạng xã hội, gửi thử điện tử v.v… Nhưng có cách cịn thú vị thế, giúp cho thỏa sức sáng tạo nên điều mẻ, xây dựng Website, ta thoải mái chia sẻ điều thú vị, tạo nên nội dung độc đáo thân Vì để tiếp cận đóng góp, đẩy mạnh phát triển phổ biến trang web thông tin Việt Nam, chúng em tìm hiểu xây dựng trang web bán game lOMoARcPSD|14734974 CHƯƠNG : 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 công việc tạo trang web cho cá nhân, công ty, doanh nghiệp tổ chức Có phương thức để thiết kế web là: thiết kế web tĩnh thiết kế web động 1.1.1 Thiết kế website tĩnh Thiết kế web tĩnh sử dụng đoạn mã HTML, hình ảnh, video, Audio, Flash, Javascript(jQuery) CSS để tạo giao diện cho trang web tên tập tin lưu có phần mở rộng là: html htm Trong thiết kế web tĩnh khơng có hệ sở liệu MySQL hay MSSQL Đối với website tĩnh, muốn thay đổi giao diện cho trang web người viết phải đổi tay cho trang web tĩnh có điểm yếu là: • Khó thay đổi giao diện cách đồng • Khó thay đổi nội dung người quản lý trang web khơng có kiến thức HTML • Khơng có khả tương tác web Trong web tĩnh hệ mới, bổ sung thêm chức thay đổi giao diện hang loạt Các trang web tĩnh có phần mở rộng thay html htm mà php, aspx, jsp, asp Trong web PHP tĩnh, mã HTML giữ nguyên them cú pháp để gọi thư viện template Thư viện template tệp tin chứa giao diện tồn trang web có phần mở rộng tpl Khi người quản trị trang thay đổi file template giao diện trang web thay đổi theo lOMoARcPSD|14734974 Như với website tĩnh hệ website động khâu cập nhật nội dung thực thi tương tác web 1.1.2 Thiết kế web động Web động web có hệ thống sở liệu dung để cung cấp thông tin cho website Điểm mạnh web động so với web tĩnh khả quản lý liệu web tốt, khả tương tác hệ thống web, dễ dàng cập nhật nội dung them tính tiện ích quản lý cho doanh nghiệp thân thiện với người dùng Trong giai đoạn khởi đầu website, có nhiều ngơn ngữ lập trình sử dụng như: JSP, ASP, PHP, ASP.NET, JSP (Java), Cold Fusion, Perl, Python số ngôn ngữ không phổ biến khác Nhưng ngôn ngữ dung phổ biến PHP ASP.NET PHP dùng 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 php, php3 thường theo cấu trúc LAMP Ở số máy chủ lưu trữ web hỗ trợ PHP Windows với cấu trúc WAMP PHP ngôn ngữ sử dụng phổ biến giới dựa vào PHP, lập trình viên xây dựng mã nguồn mở tiếng Joomla, Wordpress Drupal, Mambo, phpBB, Zend Đây ứng dụng web sử dụng để xây dựng trang website động, người dung không thiết phải biết viết ngơn ngữ lập trình mà tạo web động ASP.NET dung máy chủ lưu trữ web dùng hệ điều hành Microsoft Windows Server 2003, Windows Server 2008 Các file có phần mở rộng aspx asp lOMoARcPSD|14734974 Để đưa website lên mạng điều cần máy chủ lưu trữ web máy chủ phải kết nối Internet liên tục Trong giải pháp lưu trữ mạng sử dụng: Share Hosting - tức mua dung lượng định máy chủ, VPS - tức máy chủ chạy với cơng nghệ ảo hóa, Dedicated Server - máy chủ vật lý Và tên miền cho website để định hướng người dung truy cập vào website bạn Hiện tại, web động thiết kế mã nguồn mở ưa chuộng thịnh hành Mã nguồn mở trở thành xu hướng mới, người khơng biết lập trình thiết kế website động với đầy đủ chức thông qua mã nguồn mở Tại cầần phải thiếết kếế web? • Website phân thành loại chủ yếu:  Trang web cá nhân  Trang web thương mại, web doanh nghiệp  Trang web phủ  Trang web tổ chức phi lợi nhuận Dù thuộc loại website phần thiết yếu hoạt động nhiều cá nhân, tổ chức doanh nghiệp đại Thời đại 4.0 khiến website khẳng định vai trò quan trọng hoạt động doanh nghiệp lOMoARcPSD|14734974 1.2 Các cơng 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, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web với mẩu thơng tin trình bày World Wide Web Cùng với CSS JavaScript, HTML tạo ba tảng kỹ thuật cho World Wide Web HTML định nghĩa ứng dụng đơn giản SGML sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01 (1999) Sau đó, nhà phát triển thay XHTML Hiện nay, HTML phát triển tiếp với phiên HTML5 hứa hẹn mang lại diện mạo cho Web.\ 1.2.2 CSS (Cascading Style Sheet) CSS ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dung để tạo phong cách định kiểu cho yếu tố viết dạng ngơn ngữ đánh dấu, HTML Nó điều khiển định dạng nhiều trang web 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ị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, lý đơn giản HTML không thiết kế để gắn tag để giúp định dạng trang web Bạn dung để “đánh dấu” lên site Những tag mắt HTML phiên 3.2, gây nhiều rắc rối cho lập trình viên Vì website có nhiều font khác nhau, màu lOMoARcPSD|14734974 phong cách khác Để viết lại code cho trang web trình dài, cực nhọc Vì vậy, CSS tạo W3C để giải vấn đề Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng tách rời CSS lý thuyết được, website khơng trang chứa văn mà khơng có khác 1.2.3 JavaScript JavaScript, theo phiên hành, ngơn ngữ lập trình thơng dịch phát triển từ ý niệm nguyên mẫu Ngôn ngữ dung rộng rãi cho trang web (phía người dùng) phía máy chủ (với Nodejs) Nó vốn phát triển Brendan Eich Hãng truyền thông Netscape với tên Mocha, sau đổi tên thành LiveScript, cuối thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, gần với Self Java .js phần mở rộng thường dung cho tập tin mã nguồn JavaScript Phiên JavaScript ECMAScript ECMAScript phiên chuẩn hóa JavaScript Trình duyệt Mozilla phiên 1.8 beta có hỗ trợ khơng đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việcvới XML, chuẩn hóa ECMA-357 lOMoARcPSD|14734974 CHƯƠNG : TỔNG QUAN VỀ ĐỀ T䄃I 2.1 Mô tả website • Website giới thiệu shop bán game hình thức quảng bá sản phẩm cho game cơng ty tập đồn steam ,garena,riot, • Thể chi tiết sản phẩm mà người dung cần tìm qua tư vấn trực tiếp giúp cho người dung thuận tiện việc lại tham khảo ý kiến đồng nghiệp hay bạn bè • Website giúp người có nhìn khác biết loại game đặc biết game quyền có tính phí, hiểu rõ cách dễ dàng • Lượng người vào internet nhiều lập website giới thiệu loại game thu lượng khách hàng đáng kể • Lập trang web giới thiệu game vật phẩm game giúp cửa hàng kinh doanh thơng báo phương thức, hoạt động kinh doanh sản phẩm cho khách hàng biết cách nhanh • Mục đích website nhằm quảng bá sản phẩm yếu tố xem trọng nhiều định hướng cách trình bày nội dung cho khéo léo để người sử dụng hiểu rõ sản phẩm cách đầy đủ • Hiện chiến dịch quảng cáo website 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 định dạng trực tuyến khác Vì lựa chọn hình thức thành lập website giới thiệu game đắn lOMoARcPSD|14734974 2.2 Giải pháp Để có website bán game đươc người u thích ủng hộ cần phải đạt yêu cầu sau:  Xây dựng cho trang web tổ chức chặt chẽ 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 phải có nội dung rõ dàng thể rõ mục đích ý tưởng người thiết kế  Mục đích trang web để quảng bá sản phẩm hình ảnh độc đáo lộng lẫy trưng bày trang chủ  Sử dụng từ ngữ dễ hiểu, ngắn gọn, có giá trị  Dễ dàng khám phá đường link, thời gian tải nhanh để người tìm thơng tin nhanh  Giữ cho trang web gọn nhẹ, âm thanh, hình ảnh rõ nét, ngơn ngữ đọng, xúc tích  Là website có chất lượng nhiều người ghé thăm đặ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 website 2.3 Chức yêu cầu website Cung cấp thông tin cho người đọc: Nhằm cung cấp tất thơng tin hữu ích cho người đọc, nội dung, thông tin game Cập nhật thông tin cách nhanh chóng: Thơng tin nên chia sẻ với người đọc điều trang web hồn thành cách xuất sắc Khơng cập nhật, tải lên trang dễ dàng mà cịn tốn thời gian công lOMoARcPSD|14734974 sức Nếu sử dụng trang web, doanh nghiệp cần thu thập thông tin, tải lên trang chờ đón phản hồi Tạo nên môi trường giao lưu trao đổi lành mạnh: Người đọc truy cập vào website, tự lựa chọn tìm hiểu loại game , từ tăng lượng thu nhập bán sản phẩm 2.4 Yêu cầu phi chức - 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 lớn, tốc độ xử lý nhanh - Đảm bảo an toàn liệu 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ả lưu trữ nhiều liệu - Khách hàng lựa chọn mua hàng trang web Downloaded by quang tran (qt738189@gmail.com) 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 chức nhóm đinh xây dựng trang web có cấu trúc gồm 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) 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 (qt738189@gmail.com) lOMoARcPSD|14734974 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) 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 thực 3.3.1 Trang chủ (Home) Downloaded by quang tran (qt738189@gmail.com) lOMoARcPSD|14734974 Hình 3.9 Giao diện trang chủ 3.3.2 Trang giới thiệu Hình 3.10 Giao diện trang giới thiệu 3.3.3 Trang sản phẩm Hình 3.11 Giao diện trang sản phẩm Downloaded by quang tran (qt738189@gmail.com) lOMoARcPSD|14734974 3.3.4 Trang đánh giá Hình 3.12 Giao diện trang đánh giá 3.3.5 Trang liên hệ Hình 3.13 Giao diện trang liên hệ Downloaded by quang tran (qt738189@gmail.com) lOMoARcPSD|14734974 KẾT LUẬN Trên toàn nội dung báo cáo thực vấn đề nêu lên phần đầu Đó minh chứng rõ rệt cho cố gắng, tâm đánh giá khả hiểu biết, kiến thức em việc tìm hiểu hệ thống xây dựng hệ thống nhằm đáp ứng nhu cầu thực tiễn Đồng thời, qua báo cáo giúp cho em học hỏi thêm nhiều kiến thức mẻ, nâng cao tính tự giác Giúp em có thêm kinh nghiệm khảo sát thực tế trau dồi khả phân tích, đánh giá nhiều khía cạnh, tiếp cận với người dùng, khách hàng Thêm vào đó, giúp cho em hiểu rõ ngôn ngữ lập trình, cơng cụ mà sử dụng, lý thuyết, phương pháp tìm hiểu tính đặc trù giao diện website Em xin cảm ơn thầy cô môn, đưa lời khun, đánh giá bổ ích q trình em hoàn thiện báo cáo, giúp cho em nắm rõ mặt lý thuyết kiến thức Nhưng thể tránh khỏi sai xót q trình làm báo cáo, mong thầy bạn tích cực góp ý, nhận xét để tập lớn em hoàn thiện Em xin chân thành cảm ơn! Downloaded by quang tran (qt738189@gmail.com) lOMoARcPSD|14734974 Downloaded by quang tran (qt738189@gmail.com) ... kế website động với đầy đủ chức thông qua mã nguồn mở Tại cầần phải thiếết kếế web? • Website phân thành loại chủ yếu:  Trang web cá nhân  Trang web thương mại, web doanh nghiệp  Trang web. .. tác web 1.1.2 Thiết kế web động Web động web có hệ thống sở liệu dung để cung cấp thông tin cho website Điểm mạnh web động so với web tĩnh khả quản lý liệu web tốt, khả tương tác hệ thống web, ... xây dựng trang web bán game lOMoARcPSD|14734974 CHƯƠNG : 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 công việc tạo trang web cho cá nhân, công