1. Trang chủ
  2. » Giáo Dục - Đào Tạo

ĐỀ tài xây DỰNG WEBSITE bán QUẦN áo (2)

36 3 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 36
Dung lượng 1,64 MB

Nội dung

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN QUẦN ÁO Sinh viên thực : CHANTHAMIXAY PALA Mã SV : 191C900051 Lớp : 19I1 Giảng viên hướng dẫn : TS Nguyễn Đức Hiển Đà Nẵng, tháng 11 năm 2021 XÂY DỰNG WEBSITE BÁN QUẦN ÁO PHẦN MỞ ĐẦU Thương mại điện tử (thương mại điện tử EC) việc mua bán hàng hóa dịch vụ, truyền tiền liệu, qua mạng điện tử, ưu việt internet Các giao dịch kinh doanh xảy dạng doanh nghiệp với doanh nghiệp, doanh nghiệp với người tiêu dùng, người tiêu dùng với người tiêu dùng người tiêu dùng với doanh nghiệp Các cửa hàng thương mại điện tử trở thành phần sống hàng ngày Tiến cơng nghệ giúp người ngồi nhà thuận tiện mua sắm trực tuyến mà khơng cần đến cửa hàng thực tế Vì dự án nhằm thiết kế website bán hàng trực tuyến dành cho người mua hàng trực tuyến Dự án chủ yếu chia thành hai loại chính: Quản trị viên khách hàng / người dùng Quản lý cửa hàng nhân viên hoạt động với tư cách quản trị viên Quản trị viên thêm, chỉnh sửa, cập nhật sản phẩm xóa sản phẩm để họ thay đổi tên sản phẩm, thay đổi giá thêm bớt sản phẩm Khách hàng tìm kiếm lựa chọn sản phẩm, cập nhật giỏ hàng, xóa sản phẩm khỏi giỏ hàng kiểm tra từ cửa hàng Khách hàng cập nhật thơng tin tên, địa liệu khác Người dùng duyệt qua cửa hàng trực tuyến thêm sản phẩm vào giỏ hàng Người dùng giới hạn cho việc sử dụng cửa hàng Luận án bao gồm bốn chương để giải thích dự án Chương giới thiệu dự án; chương thứ hai xác định công cụ công nghệ sử dụng cho dự án, chương thứ ba mô tả ứng dụng, kết đạt Chương thứ tư mơ tả kết luận tồn dự án thể cải thiện có tương lai cửa hàng Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUẦN ÁO LỜI CẢM ƠN Trong trình học tập em làm đồ án tốt nghiệp em quan tâm, hưỡng dẫn giúp đỡ tận tình thầy, giáo với động viên giúp đỡ bạn bè lớp Đầu tiên em xin bày tỏ lòng biết ơn sâu sắc đến Ban giám hiệu Trường Đại Học Công Nghệ Thông Tin Truyền Thông Việt-Hàn, Ban chủ nghiệm khoa Khoa Học Máy Tính tận tính giúp đỡ cho em suốt thời gian học trường Đặc biệt em xin bày tỏ lòng biết ơn chân thành sâu sắc tới thầy giáo Ths.Nguyễn Đức Hiển trực tiếp giúp đỡ, hưỡng dẫn cho em hồn thành khóa luận Nhận dịp em xin bày tỏ lòng biết ơn sâu sắc đến gia đình, người thân, bạn bè đồng nghiệp giúp đỡ động viên em hồn thành khóa luận tốt nghiệp Em xin trân trọng cảm ơn! Đà Nẵng, tháng 11 năm 2021 CHANTHAMIXAY PALA Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO MỤC LỤC PHẦN MỞ ĐẦU LỜI CẢM ƠN CHƯƠNG I GIỚI THIỆU I Mục tiêu đề tài II Công nghệ ngôn ngữ sử dụng 1 Visual Studio Code HTML PHP CSS JAVASCRIPT MySQL UML XAMPP Phpmyadmin III MVC CHƯƠNG II PHẦN TÍCH VÀ THIẾT KẾ HỆ THỐNG I Phần tích thiết kế hệ thống Xác định tác nhân Xác định trường hợp sử dụng Use case Biểu đồ Use case 3.1 Biểu đồ use case Admin 10 3.2 Biểu đồ User đăng ký 10 3.3 Khách hàng đăng nhập 11 3.4 Admin đăng ký 12 3.5 Admin đăng nhập 13 Mơ hình MVC giỏ hàng 14 Biểu đồ lớp (Class diagram) 15 Cơ sở liệu (Database) 16 CHƯƠNG III KẾT QUẢ ĐẠT ĐƯỢC 21 I Ý tưởng thiết kế giao diện 21 Bộ cục giao diện khách hàng 21 Trang sản phẩm (Products) 22 Giỏ hàng 22 Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Trang liên hệ (Contact) 23 Trang đăng ký- đăng nhập 24 Trang Admin 25 CHƯƠNG IV KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 27 I KẾT LUẬN 27 II HƯỚNG PHÁT TRIỂN 27 TÀI LIỆU THAM KHẢO 28 Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUẦN ÁO DANH MỤC CÁC BẢNG Bảng1: Bảng sản phẩm 17 Bảng2: Bảng loại sản phẩm 17 Bang3: Bảng danh mục 18 Bảng4: bảng Khuyên 18 Bảng5: Bảng hóa đơn 19 Bảng6: Bảng chi tiết hóa đơn 19 Bảng7: Bảng người dùng 20 Bang8: Bảng banner 20 Bảng9: Bảng size 20 Bảng10: Bảng phân quyền 20 Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUẦN ÁO DANH MỤC HÌNH ẢNH Hình1: Trình bày máy chủ web hoạt động PHP Hình2: Cấu trúc CSS Hình3: CSS code style Hình4: Sơ đồ thể khái niệm MySQL Hình5: Biểu đồ use case website Hình6: Biểu đồ Admin 10 Hình7: Biểu đồ thể luồng đăng ký Người dùng 11 Hình8 : Chức đăng nhập khách hàng 12 Hình9: Biểu đồ Admin đăng ký 13 Hình10: Biểu đồ Admin đăng nhập 14 Hình11: Sơ đồ MVC cửa hàng trực tuyến 14 Hình12: Biểu đổ lớp 15 Hình13: Bảng sở liệu 16 Hình14: Giao diện trang chủ 21 Hình15: Trang sản phẩm 22 Hình16: Giỏ hàng 23 Hình17: Trang liên hệ 24 Hình18:Trang đăng ký-đăng nhập 24 Hình19: Trang quản lý sản phẩm 25 Hình20: Trang quản lý banner 26 Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUẦN ÁO DANH MỤC CHỮ VIẾT TẮT Chữ viết tắt Ý nghĩa EC E-commerce (Electronic commerce) VS Code Visual studio code RDBMS Relationship Database Management System UML Unified Modeling Language DB Database Decent_id Decentralization identity Admin Administrator Desc Description Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUẦN ÁO CHƯƠNG I GIỚI THIỆU I Mục tiêu đề tài Các cửa hàng thương mại điện tử trở thành phần sống hàng ngày Tiến cơng nghệ giúp người ngồi nhà thuận tiện mua sắm trực tuyến mà không cần đến cửa hàng thực tế Vì dự án nhằm thiết kế website bán hàng trực tuyến để dành cho người mua hàng trực tuyến Dự án chủ yếu chia thành hai loại chính: Quản trị viên khách hàng / người dùng Quản lý cửa hàng nhân viên hoạt động với tư cách quản trị viên, thêm, chỉnh sửa, cập nhật sản phẩm xóa sản phẩm, thay đổi tên sản phẩm, thay đổi giá thêm bớt sản phẩm Khách hàng tìm kiếm lựa chọn sản phẩm, cập nhật giỏ hàng, xóa sản phẩm khỏi giỏ hàng kiểm tra từ cửa hàng Khách hàng cập nhật thơng tin tên, địa liệu khác Người dùng duyệt qua cửa hàng trực tuyến thêm sản phẩm vào giỏ hàng Người dùng giới hạn cho việc sử dụng cửa hàng II Công nghệ ngôn ngữ sử dụng Visual Studio Code Visual Studio Code (VS Code hay VSC) trình soạn thảo mã nguồn phổ biến sử dụng lập trình viên Nhanh, nhẹ, hỗ trợ đa tảng, nhiều tính mã nguồn mở ưu điểm vượt trội khiến VS Code ngày ứng dụng rộng rãi Các bạn download theo link: https://code.visualstudio.com/ HTML HTML chữ viết tắt Hypertext Markup Language Nó giúp người dùng tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links, blockquotes, vv Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QN ÁO HTML khơng phải ngơn ngữ lập trình, đồng nghĩa với việc khơng thể tạo chức “động” Nó giống Microsoft Word, dùng để bố cục định dạng trang web Tổng quan, HTML ngơn ngữ markup, trực tiếp dễ hiểu, dễ học, tất người bắt đầu học để xây dựng website Một Website thường chứa nhiều trang trang lại có tập tin HTML riêng Lưu ý, HTML khơng phải ngơn ngữ lập trình Điều có nghĩa khơng thể thực chức “động” Hiểu cách đơn giản hơn, tương tự phần mềm Microsoft Word, HTML có tác dụng bố cục định dạng trang web HTML kết hợp với CSS JavaScript trở thành tảng vững cho giới mạng Dưới ví dụ code html Page Title The Main Heading A catchy subheading

First paragraph

PHP PHP (Hypertext Preprocessor), 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 qt 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 Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Hình10: Biểu đồ Admin đăng nhập Mơ hình MVC giỏ hàng Hình11: Sơ đồ MVC cửa hàng trực tuyến Các cấu trúc phần mềm MVC thực sau: Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO View: Hiển thị giao diện mà người dùng nhìn thấy (thường trang web) Các phụ gia chế độ xem cung cấp ghi cho người dùng chuyển đến Bộ điều khiển để thao tác với liệu Model: Xác định số liệu thống kê cho phần mềm (thông thường, kiện lưu sở liệu (DB)) Controller: Cung cấp giao diện Chế độ View Model Biểu đồ lớp (Class diagram) Hình12: Biểu đổ lớp Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Cơ sở liệu (Database) Hình13: Bảng sở liệu Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO + product (Sản phẩm) Field Name Type Size Description Product_id int 11 Mã sản phẩm tham số ký tự Product_type_id int 11 Mã loại sản phẩm Category_id int 11 Mã danh mục Product_name varchar 70 Tên sản phẩm Price int 11 Đơn giá Quantity int 10 Số lượng Image1 varchar 200 Hình ảnh Image2 varchar 255 Hình ảnh Image3 varchar 255 Hình ảnh Promotion_id int 11 Mã khuyên Status int 11 Trạng thái Desc text Mô tả Date_time datetime Ngày Bảng1: Bảng sản phẩm +producttype (Loại sản phẩm) Field Name Product_type_id Type int Size Description 11 Mã loại sản phẩm Product_type_name varchar 70 Tên loại sản phẩm Image varchar 200 Hình ảnh Desc varchar 200 Mơ tả Category int 11 Danh mục Bảng2: Bảng loại sản phẩm Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO +category (Danh mục) Field Name Type Size Description Category_id int 11 Mã danh mục Category_name varchar 255 Tên danh mục Bang3: Bảng danh mục +promotion (Khuyên mãi) Field Name Type Size Descript Promotion_id int 11 Mã khuyên Promotion_name varchar 100 Tên khuyên Promotion_type varchar 20 Loại khuyên Date_start float 110 Ngày bắt đầu Date_end datetime Status int Ngày kết thúc 11 Trạng thái Bảng4: bảng Khuyên +receipt (Hóa đơn) Field Name Type Size Description Reciept_id int 11 Mã hóa đơn user_id int 11 Mã người dùng Date datetime Reciever varchar 50 Người nhận Phone varchar 20 Số điện thoại Address varchar 100 Địa District varchar 250 Quận Khoa khoa học máy tính – Lớp 19I1 Ngày CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Ward varchar 250 Phường Payment method varchar 20 Phương thức toán Total float Status varchar Tổng tiền 70 Trạng thái Bảng5: Bảng hóa đơn +recieptdetail (Chi tiết hóa đơn) Field Name Type Size Description Reciept_id int 11 Mã hóa đớn Product_id int 11 Mã sản phẩm Quantity int 11 Số lượng Price float Đơn giá Bảng6: Bảng chi tiết hóa đơn +user (Người dùng) Field Name Type Size Description user_id int 11 Mã người dùng Firstname varchar 20 Ten Lastname varchar 20 Họ Gender varchar 10 Giới tính Phone varchar 20 Số điện thoại Email varchar 50 Địa email Address varchar 200 Đia District varchar 250 Quận Ward varchar 250 Phường Account varchar 100 Tài khoản Password varchar 100 Mật Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Decent_id int 11 Mã phân quyền Status int 11 Trạng thái Bảng7: Bảng người dùng + banner Field Name Type Size Descript id int 11 Mã banner Image varchar 255 Hình ảnh Banner_name varchar 200 Tên banner Banner_desc varchar 250 Mô tả banner Bang8: Bảng banner + size Field Name Type Size Description Size_id int 11 Mã size Size_name varchar 20 Tên size color varchar 100 Màu sắc Bảng9: Bảng size + decentralization (phân quyền) Field Name Type Size Description Decent_id int 11 Mã phân quyền Decent_name varchar 20 Tên phân quyền Decent_detail varchar 255 Chi tiết phân quyền Bảng10: Bảng phân quyền Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO CHƯƠNG III KẾT QUẢ ĐẠT ĐƯỢC I Ý tưởng thiết kế giao diện Bộ cục giao diện khách hàng Người tiêu dùng đề cập đến khách hàng khách hàng Đây cá nhân ghé thăm cửa hàng để mua sản phẩm để duyệt Có hai loại giao diện cụ thể giao diện Người tiêu dùng giao diện Quản trị viên Quản trị viên có quyền cao khách hàng cửa hàng Quản trị viên chỉnh sửa, thay sản phẩm thao tác liệu cửa hàng Khách hàng duyệt qua sản phẩm, thêm sản phẩm vào siêu thị, thay đổi thông tin cá nhân, kiểm tra lịch sử mua sắm toán đăng xuất Mặt khác, Người dùng duyệt thêm sản phẩm vào giỏ hàng Trang chủ giao diện trang mục cửa hàng để truy cập địa nhập vào trình duyệt Trang web có sản phẩm hình ảnh, tên, giá cả, danh mục sản phẩm nhãn hiệu sản phẩm Trang web có liên kết đăng ký, liên kết đăng nhập, giỏ hàng, thông tin liên hệ cửa hàng Hình14: Giao diện trang chủ Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Trang sản phẩm (Products) Trong trang hiển thị toàn sản phẩm có website, gồm tên sản phẩm đơn giá Khách hàng click vào để xem chi tiết sản phẩm bên Hình15: Trang sản phẩm Giỏ hàng Một menu yếu tố giao diện người dùng chứa lệnh lựa chọn tùy chọn cho chương trình cụ thể Trong giỏ hàng thường hiển thị hình sản phẩm chung ta thêm vào giỏ hàng, cịn có tên sản phẩm, size, số lượng giá sản phẩm, nút xóa sản phẩm khỏi giỏ hàng phẩn checkout để khách hàng tốn Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Hình16: Giỏ hàng Trang liên hệ (Contact) Trang liên hệ có tầm quan trọng trang website, đống vài trò cầu nối khách mua hàng Nhà bán hàng Hiển thị thong tin liên hệ cửa hàng: Địa chỉ, số điện thoại, email có text box yêu cầu khách hàng nhập tên, địa email, nội dung mà khách hàng muốn nói sau nhấn nút submit để gửi yêu cầu Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Hình17: Trang liên hệ Trang đăng ký- đăng nhập Hình18:Trang đăng ký-đăng nhập Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Trang Admin Quản trị viên (Admin) có nhiệm vụ quản lý banner, danh mục, tài khoản, loại danh mục, sản phẩm, khuyên mãi, quản lý khách hàng Admin thêm, chỉnh sửa, cập nhật sản phẩm xóa sản phẩm để họ thay đổi tên sản phẩm, thay đổi giá thêm bớt sản phẩm Khách hàng tìm kiếm lựa chọn sản phẩm, cập nhật giỏ hàng, xóa sản phẩm khỏi giỏ hàng kiểm tra từ cửa hàng Hình19: Trang quản lý sản phẩm Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Hình20: Trang quản lý banner Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO CHƯƠNG IV KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN I KẾT LUẬN Website bán quần áo phát triển ngôn ngữ PHP, HTML, CSS, JavaScript, Bootstrap Bất kỳ người tiêu dùng duyệt qua sản phẩm, thêm, thay xóa sản phẩm khỏi giỏ hàng Khách hàng đăng nhập, với thông tin họ như: email mật khách hàng Nếu Login thực được, người dùng đăng ký lại yêu cầu thay đổi mật Sau đăng nhập, người dùng xem sản phẩm giỏ hàng tiếp tục trở Sản phẩm tốn PayPal Quản trị viên xác minh đơn đặt hàng, Tuy nhiên khách hàng xem đơn đặt hàng để kiểm tra số lượng , giá có theo họ đặt hay không Giá đặt hàng lưu sở liệu II HƯỚNG PHÁT TRIỂN Trong tương lai, muốn website bán hàng dùng nhiều ngơn ngữ thay đổi tiền tệ quốc gia mà người dùng sống , mục tiêu xây dựng website để dành cho tất người mà thích brand Stussy dễ dùng nhiên khách hàng khơng biết tiếng Anh dụng thoải mái Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO TÀI LIỆU THAM KHẢO 1).https://www.w3schools.com/ 2).https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free 3).https://www.thanhlongdev.com/huong-dan-xay-dung-mot-shopping-cart-bang-htmlcss-javascript/ 4).https://fontawesome.com/v4.7/icon/share-alt 5).https://fonts.google.com/specimen/Roboto 6) https://glidejs.com/docs/setup/ 7) https://boxicons.com/?query=ese Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA ... PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO ▪ Thanh toán ▪ Đăng xuất Biểu đồ Use case Hình5: Biểu đồ use case website Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO 3.1... PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Hình20: Trang quản lý banner Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO CHƯƠNG IV KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN I KẾT LUẬN Website. .. PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO Hình17: Trang liên hệ Trang đăng ký- đăng nhập Hình18:Trang đăng ký-đăng nhập Khoa khoa học máy tính – Lớp 19I1 CHANTHAMIXAY PALA XÂY DỰNG WEBSITE BÁN QUÀN ÁO

Ngày đăng: 14/12/2022, 17:06

w