(Tiểu luận) báo cáo bài tập lớn học phần công nghệ phần mềm đề tài thiết kế website bán hàng online

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ BÁO CÁO BÀI TẬP LỚN HỌC PHẦN: CÔNG NGHỆ PHẦN MỀM Đề tài Thiết kế website bán hàng online GVHD: TS Vũ Thị Hồng Nhạn Sinh viên thực hiện: Nhóm 19 Phạm Quang Nam - 20020449 Lê Thái Sơn - 20020069 Nguyễn Minh Thành - 18021177 Hà Nội - 2022 h Mục lục 1.Tổng quan 1.1 Giới thiệu trang web 1.2 Mô tả trang web 2.Công nghệ áp dụng 2.1 Các ngôn ngữ sử dụng 2.1.1 HTML 2.1.2 CSS 2.1.3 JavaScript 2.1.4 PHP 2.2 Các framework sử dụng Bootstrap 2.3 Cơ sở liệu MySQL 2.4 Một số ứng dụng công nghệ khác 3 4 5 7 8 Phân tích đặc tả yêu cầu 3.1 Phân tích yêu cầu 3.1.1 Đặc tả yêu cầu chức 3.1.2 Đặc tả yêu cầu phi chức 3.1.3 Yêu cầu từ người dùng 3.2 Mô tả chức 9 9 10 Thiết kế, xây dựng web kiểm thử 4.1 Cấu trúc thư mục file 4.2 Thiết kế sở liệu 4.3 Kiểm thử Hướng dẫn sử dụng 14 14 16 16 17 Kết luận hướng phát triển 6.1 Kết luận 6.2 Hướng phát triển 18 18 19 Tài liệu 7.1 Tài liệu học tập 7.2 Nguồn liệu 7.3 Tài liệu báo cáo kèm theo 19 19 19 h 1.Tổng quan 1.1 Giới thiệu trang web Thời trang mảnh đất màu mỡ Vì nhu cầu theo dõi thông tin thời trang lớn có hãng thời trang tiếng Nike Để phục vụ cho nhu cầu trang web Giày Nike hãng chúng tơi tạo nhằm giúp người quan tâm giày Nike dễ dàng tìm kiếm mẫu giày phù hợp với thân cách nhanh chóng 1.2 Mơ tả trang web Đây trang web thể thao giày Nike Mục đích cập nhật mẫu giày cách nhanh đến người dùng Công nghệ áp dụng 2.1 Các ngôn ngữ sử dụng 2.1.1 HTML 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 h 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 Bằng cách dùng HTML động Ajax, lập trình viên tạo xử lý số lượng lớn cơng cụ, từ chương trình soạn thảo văn đơn giản – gõ vào từ dịng – cơng cụ xuất WYSIWYG phức tạp Hypertext cách mà trang Web (các tài liệu HTML) kết nối với Và thế, đường link có trang Web gọi Hypertext.Như tên gọi gợi ý, HTML ngôn ngữ đánh dấu thẻ (Markup Language), nghĩa bạn sử dụng HTML để đánh dấu tài liệu text thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc để hiển thị hình 2.1.2 CSS Trong tin học, tập tin định kiểu theo tầng – dịch từ tiếng Anh Cascading Style Sheets (CSS) – dùng để miêu tả cách trình bày tài liệu viết ngơn ngữ HTML XHTML Ngồi ngơn ngữ định kiểu theo tầng dùng cho XML, SVG, XUL Các đặc điểm kỹ thuật CSS trì World Wide Web Consortium (W3C) Thay đặt thẻ quy định kiểu dáng cho văn HTML (hoặc XHTML) nội dung nó, bạn nên sử dụng CSS 2.1.3 JavaScript h JavaScript ngôn ngữ lập trình HTML WEB Nó nhẹ sử dụng phổ biến phần trang web, mà thi hành chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng JavaScript biết đến với tên Mocha, sau LiveScript, Hãng Netscape thay đổi tên thành JavaScript, phổ biến tượng Java lúc JavaScript xuất lần đầu Netscape 2.0 năm 1995 với tên LiveScript Core đa ngôn ngữ nhúng vào Netscape, IE, trình duyệt khác 2.1.4 PHP PHP: Hypertext Preprocessor, thường viết tắt thành PHP ngơn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với ngơn ngữ khác nên PHP nhanh chóng trở thành ngơn ngữ lập trình web phổ biến giới h Ngôn ngữ, thư viện, tài liệu gốc PHP xây dựng cộng đồng có đóng góp lớn Zend Inc…, công ty nhà phát triển cốt lõi PHP lập nên nhằm tạo môi trường chuyên nghiệp để đưa PHP phát triển quy mô doanh nghiệp 2.2 Các framework sử dụng Bootstrap Bootstrap framework HTML, CSS JavaScript phổ biến để phát triển trang web có tính phản hồi, tích hợp di động Nếu bạn mong muốn sở hữu Website Responsive, tương thích với trình duyệt thiết bị di động, chắn cần dùng đến công nghệ Bootstrap bao gồm mã CSS + HTML cho typography, forms, buttons, tables, grids, navigation, nhiều thành phần khác website Điều giúp cho designer tránh việc phải lặp lặp lại trình tạo class CSS đoạn mã HTML giống thiết kế web Style phần tử HTML Bootstrap đơn giản lịch Ví dụ phần đổ bóng input, highlight bảng biểu, mã CSS hiển thị cảnh báo, tabs, phân trang… 2.3 Cơ sở liệu h MySQL MySQL hệ quản trị sở liệu tự nguồn mở phổ biến giới nhà phát triển ưa chuộng trình phát triển ứng dụng Vì MySQL sở liệu tốc độ cao, ổn định dễ sử dụng, có tính khả chuyển, hoạt động nhiều hệ điều hành cung cấp hệ thống lớn hàm tiện ích mạnh Với tốc độ tính bảo mật cao, MySQL thích hợp cho ứng dụng có truy cập CSDL internet Người dùng tải MySQL miễn phí từ trang chủ MySQL có nhiều phiên cho hệ điều hành khác nhau: phiên Win32 cho hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, MySQL ví dụ Hệ Quản trị Cơ sở liệu quan hệ sử dụng Ngơn ngữ truy vấn có cấu trúc (SQL) MySQL sử dụng cho việc bổ trợ NodeJs, PHP, Perl, nhiều ngôn ngữ khác, làm nơi lưu trữ thông tin trang web viết NodeJs, PHP hay Perl, 2.4 Một số ứng dụng cơng nghệ khác Ngồi thứ kể cịn vài ứng dụng cơng nghệ khác như: ● Các trình duyệt web Google Chrome, Firefox ● Các phần mềm chỉnh sửa code Notepad++, Sublime Text, Atom h ● Thư viện Jquery ● Dịch vụ máy chủ repository công cộng Github Github Desktop - ứng dụng để quản lý dự án ● Ứng dụng XAMPP tích hợp sẵn với MySQL phpMyadmin giúp xử lý quản lý liệu tốt Phân tích đặc tả yêu cầu 3.1 Phân tích yêu cầu Xây dựng trang web nhằm cung cấp dịch vụ mua hàng trực tuyến cho người có đam mê với giày Nike 3.1.1 Đặc tả yêu cầu chức Trang web xây dựng với chức bản: ● Xem danh sách sản phẩm thông tin chi tiết sản phẩm ● Thêm, sửa, xóa, cập nhật sản phẩm giỏ hàng ● Nhận email xác thực mua hàng thành công tốn thành cơng ● Đăng nhập, đăng ký tài khoản vào hệ thống sở liệu 3.1.2 Đặc tả yêu cầu phi chức ● Tính khả dụng: giao diện đơn giản dễ sử dụng ● Tính tin cậy: hoạt động theo chức thiết kế ● Khả tiếp cận: không yêu cầu đặc biệt ● Hiệu năng: ổn định h 3.1.3 Yêu cầu từ người dùng Các yêu cầu người dùng liệt kê dạng user-story sau: ● Là người đam mê giày Nike, mong muốn có trang web cập nhật mẫu giày hãng cách nhanh chóng ● Là người bận rộn, tơi mong muốn có trang web giúp tơi mua sắm trực tuyến nhanh chóng hiệu ● Là chủ cửa hàng tơi muốn có website cho riêng thân để quản lý đơn hàng trực tuyến cách hiệu 3.2 Mô tả chức 3.2.1 Truy cập trang chủ Chức năng: gồm thông tin - Banner quảng cáo - Ưu đãi 3.2.2 Xem thông tin cửa hàng Chức năng: Cung cấp cho người dùng thông tin rõ cửa hàng bao gồm: h - Giới thiệu tổng quan cửa hàng - Cam kết cửa hàng 3.2.3 Xem danh sách sản phẩm Chức giúp người dùng biết rõ sản phẩm cửa hàng: - Danh sách sản phẩm - Gợi ý sản phẩm 3.2.4 Xem chi tiết sản phẩm Chức giúp người dùng tìm hiểu chi tiết sản phẩm bao gồm h - Tên sản phẩm - Mức độ đánh giá sản phẩm - Mơ tả sản phẩm: giá bán, kích cỡ - Thêm vào giỏ hàng 3.2.5 Xem thông tin liên hệ Chức giúp người dùng có thêm phương thức liên lạc bao gồm: - Các trang mạng xã hội - Các đường dẫn đến trang web - Các thông tin liên hệ cụ thể (địa chỉ, số điện thoại, email) 3.2.6 Xem giỏ hàng, thêm, sửa, xóa, cập nhật sản phẩm h Chức cho phép người dùng kiểm tra thông tin sản phẩm giỏ hàng: - Tên sản phẩm - Kích cỡ - Giá bán - Số lượng - Thành tiền - Tổng tiền - Thêm sản phẩm - Xóa sản phẩm - Xác nhận toán 3.3.7 Đăng nhập Chức cho phép người dùng đăng nhập vào tài khoản 3.3.8 Đăng ký Chức cho phép người dùng đăng ký tài khoản để mua hàng h 3.3.9 Đặt hàng Thông báo cho người dùng đặt hàng thành công gửi xác nhận qua email *Tài liệu đặc tả: dacta.pdf Thiết kế, xây dựng web kiểm thử 4.1 Cấu trúc thư mục file Bảng mô tả cấu trúc thư mục h Thư mục backup css database Bao gồm Sao lưu liệu để phục hồi cần Định dạng trang web Lưu trữ CSDL mơ hình quan hệ CSDL images + imagesp Lưu trữ hình ảnh sản phẩm trang web PHPMailer-master Gồm thư viện để phục vụ việc gửi mail cho khách hàng Tên file admin.php Bao gồm Quản lý trạng thái toán người dùng cart.php Thiết kế giao diện chức trang giỏ hàng category.php Thiết kế giao diện trang danh sách sản phẩm config.php Chứa thông tin để kết nối database connectDB.php + Db.php Kết nối sở liệu index.php Giao diện trang chủ h introduce.php Giao diện trang giới thiệu login.php Chức đăng nhập logout.php Chức đăng xuất productdetail.php Giao diện chức trang chi tiết sản phẩm register.php thanhtoan.php Tạo form đăng ký người dùng Chức toán 4.2 Thiết kế sở liệu Collection cart orderdetail ordermethod Chức Chứa liệu sản phẩm Chứa liệu chi tiết đơn hàng Chứa liệu phương thức toán orders Chứa liệu đơn hàng users Chứa liệu khách hàng Mơ hình quan hệ: Lược đồ quan hệ 4.3 Kiểm thử ● Yêu cầu: Phần mềm chạy được, truy cập vào tất thông tin trang web h ● Mơi trường: Trên trình duyệt web Firefox, Chrome Edge ● Thực hiện: Truy cập trang web sử dụng người dùng để tìm lỗi tổng hợp lại ● Khắc phục lỗi xảy đóng kiểm thử Hướng dẫn sử dụng ● Source code: https://github.com/namphamquang/cnpm_nhom_19 ● Tải cài đặt XAMPP ○ Link cài đặt (nếu chưa cài) : https://www.apachefriends.org/download.html ● Mở XAMPP Control Panel Start Apache MySQL ● Import tất bảng liệu thư mục database (từ file webshop.sql thư mục database dự án) h Lưu ý: Nếu import lỗi tạo database với tên giống với tên file sql import vào database Mở xampp, chọn admin, url gõ “localhost/nhom-19/index.php” Nếu trang chủ nghĩa chạy thành công ● Click vào thông tin bạn muốn xem Kết luận hướng phát triển 6.1 Kết luận Các sản phẩm giày hãng từ trước đến nhận quan tâm từ nhiều người giới Việt Nam Vì vậy trang web giúp cho người tìm hiểu giày hãng cần thiết Với mục đích trang web Giày Nike hãng giúp người có nơi để cập nhật tìm hiểu thơng tin liên quan đến mẫu giày Nike cách nhanh xác h Tuy nhiên, bên cạnh ưu điểm cịn nhược điểm chưa đầy đủ thơng tin liệu giao diện chưa thực hấp dẫn người dùng 6.2 Hướng phát triển Để phát triển tiếp cận với nhiều người dùng hệ thống cập nhật thêm chức ● Tạo diễn đàn để trao đổi với người sử dụng ● Thêm liệu mẫu giày ● Xây dựng giao diện đẹp thu hút người dùng Tài liệu 7.1 Tài liệu học tập ● Các ví dụ bootstrap https://getbootstrap.com/docs/3.4/getting-started/ ● Các liệu mẫu giày web ● Tài liệu học HTML, CSS, Javascript, PHP https://www.w3schools.com/ https://freetuts.net/ 7.2 Nguồn liệu ● Các video youtube báo trang báo lớn 7.3 Tài liệu báo cáo kèm theo ● Source code: repository ● Tài liệu đặc tả: Specification ● Mơ hình sở liệu:Database ● Lựa chọn quy trình phát triển:Process h h