Chương I:Khảo sát và phân tích đề tài T r a n g 1 | 46 1 Phân tích yêu cầu của đề tài 1.1 Giới thiệu đề tài Đề tài "Thiết kế website bán giày dép và quần áo" là một dự án nhằm tạo ra một trang web chuyên về bán các loại giày dép online. Trang web sẽ được thiết kế để cung cấp cho khách hàng một trải nghiệm mua sắm tốt nhất với nhiều sản phẩm chất lượng và đa dạng về kiểu dáng, màu sắc và kích thước.2 Mục tiêu của đề tài Tìm hiểu các yêu cầu cơ bản về thiết kế website bán hàng trực tuyến. Nghiên cứu và phân tích thị trường bán giày dép quần áo trực tuyến tại Việt Nam. Thiết kế giao diện website bán giày dép quần áo đẹp mắt, dễ sử dụng và hiệu quả.
Xây dựng hệ thống quản lý và bảo mật thông tin khách hàng trên website. Đảm bảo tính năng và hiệu suất của website vượt trội so với các đối thủ cạnh tranh trên thị trường. 2 Phân tích hệ thống cần thiết kế 2.1 Một số chức năng chính của trang web bao gồm: Hiển thị danh sách sản phẩm giày dép ,quần áo đa dạng với thông tin chi tiết như kích thước, màu sắc, chất liệu và giá cả. Cho phép khách hàng tìm kiếm và lọc sản phẩm theo các tiêu chí khác nhau như giá cả, kích thước và thương hiệu , màu sắc ,v.v Cung cấp các chức năng đăng ký tài khoản và đăng nhập để khách hàng có thể quản lý thông tin cá nhân, lịch sử mua hàng và nhận thông tin khuyến mãi.
Cung cấp các phương thức thanh toán đa dạng như thẻ tín dụng, chuyển khoản và thanh toán khi nhận hàng. Cung cấp hệ thống quản lý đơn hàng để quản lý quá trình giao hàng và giải quyết các khiếu nại của khách hàng.2 Các hệ thống cơ bản: Hệ thống quản lý sản phẩm: Đây là hệ thống giúp quản lý thông tin về sản phẩm, bao gồm tên sản phẩm, mô tả, ảnh sản phẩm, giá cả, kích thước, màu sắc và số lượng sản phẩm có sẵn. Hệ thống quản lý đơn hàng: Đây là hệ thống giúp quản lý đơn hàng của khách hàng, bao gồm thông tin về khách hàng, sản phẩm được đặt mua, số lượng, giá cả và trạng thái đơn hàng (đã thanh toán, đang chờ xử lý, đang vận chuyển, đã giao hàng). Hệ thống thanh toán trực tuyến: Đây là hệ thống giúp khách hàng thanh toán cho đơn hàng bằng các phương thức thanh toán trực tuyến như thẻ tín dụng, ví điện tử hoặc chuyển khoản ngân hàng.
Hệ thống quản lý tài khoản: Đây là hệ thống giúp quản lý thông tin của khách hàng, bao gồm thông tin cá nhân, địa chỉ, lịch sử mua hàng, đơn hàng đang chờ xử lý và trạng thái đơn hàng đã mua. T r a n g 3 | 46 Chương II :Phân Tích và thiết kế hệ thống website 1 Phân tích nhu cầu của khách hàng về hệ thống Sản phẩm: Khách hàng mong muốn trang web cung cấp đầy đủ các loại giày, từ giày thể thao, giày lười, giày công sở, đến giày chạy bộ, giày đi phượt, giày thời trang,.với nhiều mẫu mã, kiểu dáng và kích cỡ khác nhau. Tìm kiếm,thanh toán sản phẩm: Khách hàng mong muốn có một hệ thống tìm kiếm sản phẩm nhanh chóng, dễ dàng và chính xác. Hệ thống tìm kiếm nên có khả năng lọc sản phẩm theo màu sắc, kích cỡ, giá cả, thương hiệu,.giúp khách hàng tìm kiếm sản phẩm một cách dễ dàng và thuận tiện.Giao diễn thanh toán không cầu kì , dễ thao tác ,nhiều phương pháp thanh toán cho người dung lựa chọn.
2 Thiết kế cơ sở dữ liệu 2.1 Mô hình liên kết thực thể(E – R) Kiểu Thuộc ST thực Thuộc tính tính T thể khóa admi Id_admi 1 Id_admin,email , password. n n 2 user Id_user,email,full_name,password Id_user prod 3 id_item,name,img,price,quantity id_item uct Purc Id_donhang,full_name,email,dia_chi,sdt,name,img,price,quantit Id_donh 4 hase y,thanh_tien,tongtien,time ang order T r a n g 7 | 28 Hinh1. 1Mô hình liên kết thực thể(E – R) T r a n g 8 | 28 2.2 Mô hình quan hệ Hinh1. 2:Mô hình quan hệ T r a n g 9 | 28 3 Công cụ hổ trợ 3.1 Xampp: XAMPP là một gói phần mềm mã nguồn mở miễn phí, giúp tạo môi trường phát triển và triển khai các ứng dụng web trên máy tính cá nhân của người dùng.
Các thành phần chính của XAMPP bao gồm hệ thống quản lý cơ sở dữ liệu MySQL, máy chủ web Apache, trình thông dịch PHP và Perl, và một số công cụ hữu ích khác như phpMyAdmin, OpenSSL, và FileZilla FTP Server. Các ứng dụng web được xây dựng bằng các ngôn ngữ như PHP, Perl, Ruby, Python, có thể được phát triển trên XAMPP và chạy trên môi trường localhost trên máy tính của người dùng. Điều này giúp cho nhà phát triển có thể dễ dàng phát triển và kiểm thử các ứng dụng web trước khi triển khai chúng lên môi trường web thực tế. XAMPP cũng cung cấp cho người dùng một giao diện đơn giản và thân thiện để quản lý cơ sở dữ liệu MySQL và quản lý các tệp tin trong thư mục htdocs.
Điều này giúp cho việc phát triển và quản lý các ứng dụng web trở nên dễ dàng hơn cho người dùng. Với XAMPP, người dùng không cần phải cài đặt các thành phần của một môi trường phát triển web một cách riêng lẻ trên máy tính của mình, mà thay vào đó có thể sử dụng một gói phần mềm đầy đủ tính năng như XAMPP để tiết kiệm thời gian và công sức trong quá trình phát triển và triển khai các ứng dụng web.2 Visual Studio Code: Visual Studio Code (viết tắt là VS Code) là một trình biên tập mã nguồn mở, miễn phí và được phát triển bởi Microsoft. VS Code được thiết kế để hỗ trợ phát triển ứng dụng web, nhưng cũng có thể được sử dụng để phát triển các ứng dụng khác như ứng dụng di động và máy tính để bàn. VS Code được tích hợp với một loạt các tính năng hữu ích như: Hỗ trợ đa ngôn ngữ lập trình như C++, C#, Java, JavaScript, PHP, Python, Ruby, HTML, CSS, v.
Hỗ trợ tạo và quản lý các dự án và tệp mã nguồn. Hỗ trợ tính năng debugging và testing, giúp phát hiện và khắc phục các lỗi trong mã nguồn. Hỗ trợ tính năng linter giúp kiểm tra cú pháp và định dạng mã nguồn. Có thể sử dụng các extension của cộng đồng người dùng để mở rộng chức năng của trình biên tập.
VS Code cũng có giao diện thân thiện và dễ sử dụng, với một loạt các phím tắt để giúp tăng tốc độ lập trình. Ngoài ra, VS Code cũng được tích hợp với Git, T r a n g 10 | 28 cho phép người dùng quản lý phiên bản và thực hiện các thao tác với kho lưu trữ của Git từ giao diện của trình biên tập. Tổng quan lại, VS Code là một trình biên tập mã nguồn mở miễn phí với nhiều tính năng hữu ích và được cộng đồng người dùng hỗ trợ mở rộng chức năng thông qua các extension. 4 Ngôn ngữ lập trình 4.1HTML(HyperText Markup Language): - Khái niệm: HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo nội dung trên trang web.
HTML cho phép người dùng định nghĩa và tổ chức các phần tử trên trang web, bao gồm văn bản, hình ảnh, âm thanh, video, các liên kết, các biểu mẫu nhập liệu và các thành phần khác. - Ưu điểm của HTML: + Dễ học: HTML là một ngôn ngữ đơn giản và dễ hiểu, vì vậy người mới bắt đầu có thể dễ dàng học và sử dụng nó. Nó cung cấp cho người dùng các thẻ và thuộc tính để định dạng và hiển thị các phần tử trên trang web, từ đó giúp tối ưu hóa trải nghiệm người dùng trên nền tảng web. + Độc lập nền tảng: HTML hoạt động trên nhiều nền tảng và trình duyệt khác nhau, giúp cho các trang web được phát triển có thể hiển thị đồng nhất trên các thiết bị và trình duyệt khác nhau.
+ Linh hoạt: HTML cho phép người dùng tạo ra các trang web đa dạng và linh hoạt với các thành phần khác nhau như hình ảnh, video, âm thanh, văn bản, biểu mẫu và các thành phần khác. - Nhược điểm của HTML: + Giới hạn chức năng: HTML chỉ có thể tạo ra các trang web tĩnh, tức là không có tính năng động hoặc tương tác với người dùng. Tuy nhiên, với sự kết hợp của các ngôn ngữ lập trình phía client và server, các trang web có tính năng động và tương tác có thể được tạo ra bằng sử dụng HTML. + Khó khăn trong việc tạo các giao diện đẹp mắt: HTML không thể đem lại các hiệu ứng tuyệt đẹp như CSS và JavaScript, điều này dẫn đến khó khăn trong việc thiết kế các giao diện web đẹp mắt và tương tác hấp dẫn.
Bởi vì HTML chỉ là một ngôn ngữ đánh dấu để định dạng và hiển thị nội dung, và nó không cung cấp các tính năng tương tác phức tạp. Tuy nhiên, HTML vẫn rất quan trọng trong việc tạo ra các trang web tĩnh và đơn giản, và nó là một bước đầu tiên cần thiết cho việc học các ngôn ngữ lập trình web khác như CSS và JavaScript. + Khả năng bảo mật hạn chế: Mặc dù HTML là một ngôn ngữ phổ biến cho thiết kế web, tuy nhiên nó không cung cấp các tính năng bảo mật tương đương với các ngôn ngữ lập trình khác. Vì vậy, nếu không được áp dụng các biện T r a n g 11 | 28 pháp bảo mật thích hợp, trang web HTML có thể dễ dàng bị tấn công bởi các hacker và phần mềm độc hại.2 CSS(Cascading Style Sheets): - Khái niệm: CSS là ngôn ngữ định dạng trang web được sử dụng để tạo kiểu cho các phần tử HTML, bao gồm màu sắc, font chữ, khoảng cách, kích thước và vị trí của các phần tử trên trang web.
CSS giúp cho các trang web trông chuyên nghiệp hơn và có thể điều chỉnh các thành phần trên trang web một cách nhanh chóng và dễ dàng. - Ưu điểm của CSS: + Tách biệt nội dung và kiểu dáng: CSS cho phép tách biệt nội dung và kiểu dáng của trang web, điều này giúp cho các nhà thiết kế có thể dễ dàng chỉnh sửa các phần tử kiểu dáng mà không ảnh hưởng đến nội dung. + Tăng tốc tải trang web: CSS có thể giúp giảm kích thước của các tập tin HTML và làm tăng tốc tải trang web. + Tăng tính linh hoạt: CSS cho phép người dùng thay đổi kiểu dáng của trang web một cách dễ dàng mà không cần phải thay đổi nội dung, giúp cho việc chỉnh sửa trang web trở nên nhanh chóng và linh hoạt hơn.