sát và phân tích đề tài
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.
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.
Logo Website
2 Phân tích hệ thống cần thiết kế
Một số chức năng chính của trang web bao gồm
STT Chức năng Mô tả
1 Thiết kế giao diện Giao diện đẹp mắt, tiện lợi, dễ sử dụng
2 Ngôn ngữ Ngôn ngữ hiển thị là tiếng việt
- Danh mục các sản phẩm
- Tìm kiếm thông tin về sản phẩm…
- Liên hệ Được thiết kế ấn tượng, hiện đại, các chức năng nổi bật được hiển thị ngay tại trang chủ.
Thiết kế trang chủ với nhưng module chính trong website.
Những thông tin xuất hiện trên trang chủ phụ thuộc vào sự quyết định của cửa hàng trong quá trình cập nhật website các thông tin này có thể là thông tin giới thiệu về cửa hàng, hình ảnh sản phẩm nới hay hình ảnh các dịch vụ khác.
Hiện thị vị trí của cửa hàng thông qua Google Map, email, số điện thoại của cửa hàng.
Quản lý thể loại,sản phẩm,
Comment,tin tức, nhân viên, khách hàng
Cho phép xem danh sách, thêm sửa xóa thể loại, sản phẩm, tin tức, nhân viên, đối với khách hàng thì có thể xem danh sách khách hàng, còn đối với Comment thì có thể trả lời các Comment của khách hàng hoặc xóa những Comment không phù hợp.
5 Tìm kiếm thông tin Cho phép tìm kiếm nội dung website bằng các từ khóa liên quan, hoặc tìm kiếm nâng cao theo các tiêu chí. lọc sản phẩm bằng filter data, có thể lọc theo nhiều tiêu chí khác nhau…
Liên hệ trực tuyến, đánh giá sản phẩm
Cung cấp 1 mẫu biểu trực tuyến cho phép khách hàng có thể dễ dàng gửi những đánh giá, nhận xét cũng như những yêu cầu của mình về sản phẩm đến với doanh nghiệp.
7 Comment Đánh giá, ý kiến của khách hàng về sản phẩm của cửa hàng.
Chức năng giỏ hàng và đặt hàng
Thêm sản phẩm vào giỏ hàng khách hàng có thể xóa các sản phẩm trong giỏ hàng đã lựa chọn.
Thay đổi số lượng sản phẩm trong đơn hàng.
Hệ thống sẽ tự động tính tổng tiền hàng trong giỏ hàng cho quý khách.
Chức năng thanh toán Ngay khi lựa chọn hàng hóa vào giỏ hàng khách hàng có thể đặt hàng thông qua form thanh toán.
Nếu khách hàng chưa đăng nhập thì hệ thống sẽ yêu cầu khách hàng đăng nhập hoặc đăng ký(nếu chưa có tài khoản), khách hàng sẽ nhập đầy đủ thông tin về email,tên người nhận, địa chỉ nhận hàng để hàng hóa sẽ chuyển đúng nơi.
Sau khi thanh toán đơn hàng khách hàng sẽ nhận được thông tin chi tiết đơn hàng thông qua email do hệ thống gửi về.
10 Đăng nhập Chức năng cho phép Admin, nhân viên, khách hàng đều có thể đăng nhập sử dụng các chức năng của họ.
11 Đăng ký Chức năng cho phép Admin có thể đăng ký tài khoản cho nhân viên, khách hàng có thể đăng ký tài khoản cho riêng mình để đăng nhập.
Bảng 1: Yêu cầu chức năng
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.
Hệ thống hiển thị và tìm kiếm sản phẩm :Đây là hệ thống giúp người dùng xem và tìm kiếm được những sản phẩm có trong trang web 1 cách nhanh chóng Xem được chi tiết của sản phẩm mình lựa chọn
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.
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.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, 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.
Bootstrap 5
Bootstrap 5 là một framework CSS phổ biến được sử dụng để phát triển giao diện web Nó cung cấp một bộ công cụ và tài nguyên sẵn có để tạo ra các trang web đáp ứng, hỗ trợ nhiều thiết bị và trình duyệt khác nhau.
Responsive Grid System: Bootstrap 5 cung cấp một hệ thống lưới đáp ứng linh hoạt, giúp thiết kế web dễ dàng trên các thiết bị khác nhau như máy tính để bàn, máy tính bảng và điện thoại di động.
CSS Components: Bootstrap 5 đi kèm với một loạt các thành phần CSS được thiết kế sẵn như nút, menu, biểu mẫu, bảng, thẻ, carousel và nhiều hơn nữa Những thành phần này giúp xây dựng giao diện web nhanh chóng và dễ dàng.
JavaScript Plugins: Bootstrap 5 cung cấp các plugin JavaScript sẵn có như tooltip, modal, collapse, carousel, và nhiều hơn nữa Những plugin này giúp thêm tính năng tương tác động vào trang web của bạn mà không cần viết mã JavaScript tùy chỉnh.
Thiết kế sạch và hiện đại: Bootstrap 5 có một giao diện mặc định đơn giản, tối giản và hiện đại Nó tuân thủ các nguyên tắc thiết kế sạch và giúp trang web của bạn trông chuyên nghiệp và hấp dẫn. Ưu điểm của Bootstrap 5: Độ phổ biến và cộng đồng lớn: Bootstrap 5 là một framework phổ biến được sử dụng rộng rãi trên toàn cầu Điều này có nghĩa là bạn có thể dễ dàng tìm kiếm tài liệu, hỗ trợ và nguồn lực từ cộng đồng sử dụng Bootstrap.
Tiết kiệm thời gian và công sức: Bootstrap 5 cung cấp các mẫu, giao diện và thành phần CSS và JavaScript sẵn có, giúp bạn tiết kiệm thời gian và công sức trong việc phát triển giao diện web. Đáp ứng và tương thích trình duyệt tốt: Bootstrap 5 được thiết kế để tương thích với nhiều trình duyệt và thiết bị khác nhau Điều này giúp đảm bảo rằng trang web của bạn sẽ hoạt động tốt trên mọi nền tảng.
Linh hoạt và dễ tùy chỉnh: Bootstrap 5 cho phép bạn tùy chỉnh và điều chỉnh giao diện web dễ dàng thông qua CSS và các biến tùy chỉnh Bạn có thể tuỳ chỉnh các thành phần theo ý muốn và tạo ra giao diện riêng của mình.
Giao diện phổ biến: Vì Bootstrap 5 được sử dụng rộng rãi, có thể dẫn đến việc các trang web sử dụng Bootstrap trông giống nhau Điều này có thể làm mất đi sự độc đáo và cá nhân hóa của trang web.
Kích thước tệp tin lớn: Bootstrap 5 có kích thước tệp tin lớn hơn so với việc viết CSS tùy chỉnh từ đầu Điều này có thể ảnh hưởng đến thời gian tải trang và tốc độ hiển thị.
Cần hiểu rõ: Mặc dù Bootstrap 5 rất dễ sử dụng, nhưng để tận dụng hết tiềm năng của nó,bạn cần hiểu rõ về cách framework hoạt động và cách sử dụng các lớp và thành phần của nó.
JQuery
jQuery là một thư viện JavaScript được thiết kế đơn giản hóa thao tác HTML DOM, cũng như xử lý sự kiện, hoạt ảnh CSS, và Ajax.[3]
JQuery là một thư viện rất phổ biến và được sử dụng trong nhiều ứng dụng web Nó là một công cụ hữu ích cho các lập trình viên JavaScript ở mọi trình độ kinh nghiệm.
Dưới đây là một số lợi ích của việc sử dụng JQuery:
Đơn giản hóa việc lập trình JavaScript: JQuery cung cấp một bộ các hàm và phương thức được định sẵn giúp đơn giản hóa việc lập trình JavaScript, đặc biệt là khi thao tác với tài liệu HTML và CSS.
Tăng hiệu suất: JQuery được tối ưu hóa để tăng hiệu suất của ứng dụng web.
Tăng khả năng mở rộng: JQuery có thể được mở rộng bằng các plugin của bên thứ ba.
JQuery là một công cụ mạnh mẽ có thể giúp các lập trình viên JavaScript tạo ra các ứng dụng web hấp dẫn và hiệu quả hơn.
AJAX
AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của web trang, hoàn toàn không reload lại toàn bộ trang.
Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript.
Những lợi ích mà AJAX mang lại:
- AJAX được sử dụng để thực hiện một callback Được dùng để thực hiện việc truy xuất dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại toàn bộ trang web Với những server nhỏ thì việc này cũng tiết kiệm được băng thông cho chúng ta hơn.
- Cần gì thì chỉ gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thông tin chứ không load cả trang Bằng cách này thì có thể giảm thiểu được tốc độ tải trang giúp người dùng có trải nghiệm tốt hơn.
Trang web bạn tạo ra cũng sẽ đa dạng và động hơn
HTML(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.
+ 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.
+ 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 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.
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.
+ 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.
+ Khó khăn trong việc học: CSS có nhiều khái niệm và cú pháp phức tạp, điều này có thể làm cho việc học và sử dụng nó khó khăn đối với những người mới bắt đầu.
+ Phụ thuộc vào trình duyệt: Một số tính năng CSS có thể không hoạt động trên một số trình duyệt, điều này có thể gây ra sự khác biệt giữa các phiên bản trình duyệt khác nhau.+ Không hoàn toàn tách biệt nội dung và kiểu dáng: Mặc dù CSS cho phép tách biệt nội dung và kiểu dáng của trang web, nhưng việc sử dụng quá nhiều lớp và định dạng khác nhau có thể làm cho mã HTML trở nên khó đọc và khó hiểu.
PHP(Hypertext Preprocessor)
- Khái niệm: PHP là một ngôn ngữ lập trình mã nguồn mở được sử dụng phổ biến cho phía máy chủ web Nó được thiết kế đặc biệt để xây dựng các ứng dụng web động và trang web tĩnh.
+ Dễ học và sử dụng: Với cú pháp đơn giản và dễ hiểu, PHP là ngôn ngữ lập trình lý tưởng cho những người mới bắt đầu học về lập trình, không chỉ giúp họ nhanh chóng tiếp cận mà còn giúp phát triển các ứng dụng web đa dạng và phong phú Tính tiện lợi của PHP chắc chắn là một trong những điểm mạnh của ngôn ngữ này, giúp cho việc xây dựng các trang web chất lượng cao đơn giản hơn bao giờ hết.
+ Mã nguồn mở: Với cộng đồng phát triển lớn và tính linh hoạt cao, cho phép người dùng có thể tùy chỉnh và phát triển các ứng dụng web phức tạp theo nhu cầu của mình Với tính năng miễn phí và sửa đổi mã nguồn một cách dễ dàng, PHP đã trở thành một công cụ hữu ích cho các nhà phát triển ứng dụng web trên toàn thế giới.
+ Tương thích với nhiều hệ thống: Nó có thể hoạt động trên hầu hết các hệ thống máy chủ web như Apache, Nginx và IIS và tương thích với nhiều hệ thống cơ sở dữ liệu phổ biến như MySQL, PostgreSQL và Oracle Điều này giúp các nhà phát triển có thể tùy chọn các công cụ tối ưu nhất để xây dựng các ứng dụng web hoặc trang web cho nhiều nền tảng và môi trường khác nhau.
+ Hỗ trợ mạnh mẽ cho web: PHP được lên kế hoạch riêng biệt để đáp ứng yêu cầu của ứng dụng web, giúp kết nối với các thành phần như HTML, CSS và JavaScript để sản xuất những trang web động, tương tác và chuyên nghiệp hơn Việc sử dụng PHP mang lại khả năng xử lý tối ưu, giúp công việc thiết kế và phát triển trang mạng trở nên dễ dàng và hiệu quả hơn nhiều.
- Nhược điểm của ngôn ngữ PHP:
+ Hiệu suất thấp: So sánh với một số ngôn ngữ lập trình khác như Java hay C#, PHP thường có tốc độ xử lý các ứng dụng web chậm hơn.
+ Quản lí mã khó khăn: Khi đối mặt với những dự án quy mô lớn, việc quản lý mã nguồn của PHP có thể trở nên vô cùng phức tạp và gian nan đến nỗi việc thiếu sự tổ chức kỹ lưỡng và các tiêu chuẩn mã nguồn không được đồng nhất có thể xảy ra Việc này có thể gây ra nhiều khó khăn và trở ngại trong quá trình phát triển và bảo trì dự án, đòi hỏi sự cẩn trọng và khéo léo trong việc quản lý, điều chỉnh và cập nhật mã nguồn.
+ Bảo mật không đảm bảo: Nếu việc đảm bảo an ninh thông tin không được thực hiện đúng đắn, có thể dẫn đến những hậu quả nghiêm trọng như bị chiếm quyền truy cập trái phép,mất thông tin quan trọng, hoặc lộ thông tin cá nhân của người dùng Vì vậy, việc để ý và hạn chế các lỗ hổng bảo mật để đảm bảo an toàn thông tin là vô cùng cần thiết và quan trọng.
SQL (Structured Query Language)
Là một ngôn ngữ lập trình dùng để truy vấn và quản lý cơ sở dữ liệu quan hệ (RDBMS - Relational Database Management System) SQL được phát triển vào cuối những năm 1970 và đã trở thành tiêu chuẩn trong việc truy vấn cơ sở dữ liệu.
SQL bao gồm một tập hợp các câu lệnh để truy vấn và cập nhật dữ liệu trong cơ sở dữ liệu. Các câu lệnh SQL chủ yếu được chia thành các loại sau:
DDL (Data Definition Language): Các câu lệnh DDL được sử dụng để tạo, thay đổi hoặc xóa cấu trúc của cơ sở dữ liệu Ví dụ như tạo bảng, chỉnh sửa thuộc tính của bảng, tạo quan hệ giữa các bảng.
DML (Data Manipulation Language): Các câu lệnh DML được sử dụng để truy vấn và thay đổi dữ liệu trong bảng Ví dụ như thêm dữ liệu vào bảng, cập nhật dữ liệu trong bảng, xóa dữ liệu khỏi bảng.
DQL (Data Query Language): Các câu lệnh DQL được sử dụng để truy vấn dữ liệu từ bảng.
Ví dụ như truy vấn dữ liệu từ bảng theo điều kiện nào đó, sắp xếp dữ liệu, thống kê dữ liệu,
DCL (Data Control Language): Các câu lệnh DCL được sử dụng để quản lý quyền truy cập vào cơ sở dữ liệu Ví dụ như tạo người dùng mới, phân quyền truy cập cho người dùng, thu hồi quyền truy cập của người dùng,
SQL là một trong những ngôn ngữ phổ biến nhất trong việc quản lý cơ sở dữ liệu quan hệ và được sử dụng trong nhiều lĩnh vực như lập trình web, phân tích dữ liệu, kinh doanh, quản lý dữ liệu, v.v.
JavaScript
JavaScript là một ngôn ngữ lập trình phía máy khách phổ biến được sử dụng để phát triển ứng dụng web Dưới đây là một số ưu điểm và nhược điểm của Ưu điểm:
Tích hợp tốt trong môi trường web: JavaScript được hỗ trợ trực tiếp trong các trình duyệt web phổ biến, điều này cho phép lập trình viên tạo ra các ứng dụng tương tác trên trình duyệt mà không cần cài đặt phần mềm bổ sung.
Dễ học và triển khai: JavaScript có cú pháp giống với nhiều ngôn ngữ lập trình khác, nhưng nó có một hệ sinh thái mạnh mẽ và cộng đồng phát triển lớn, giúp giảm thiểu thời gian học và triển khai ứng dụng.
Xử lý sự kiện và tương tác người dùng: JavaScript cho phép xử lý sự kiện và tương tác người dùng trên trình duyệt một cách dễ dàng Nó cung cấp các API để thao tác với các phần tử HTML, thay đổi nội dung động và tạo ra hiệu ứng tương tác. Đa nền tảng: JavaScript có thể chạy trên nhiều nền tảng, bao gồm cả máy tính, điện thoại di động và các thiết bị nhúng.
Cộng đồng phát triển mạnh mẽ: JavaScript có một cộng đồng lập trình viên rộng lớn, đầy đủ tài liệu, thư viện và framework hỗ trợ Điều này giúp lập trình viên nhanh chóng giải quyết vấn đề và tận dụng các tài nguyên có sẵn.
Bảo mật: Vì JavaScript chạy phía máy khách, mã nguồn JavaScript của ứng dụng có thể được truy cập và chỉnh sửa bởi người dùng Điều này có thể tạo ra các vấn đề về bảo mật, ví dụ như lỗ hổng bảo mật hoặc mã độc.
Hiệu suất: JavaScript có thể chạy chậm hơn so với các ngôn ngữ lập trình phía máy chủ,như C++ hoặc Java, đặc biệt là khi xử lý các phép toán phức tạp hoặc tải dữ liệu lớn.
Các bước tiến hành
- Để có thể tạo ra một trang website hoàn chỉnh, chúng ta cần phải thực hiện một số các bước sau:
+ Bước 1: Lên kế hoạch: Để có được một trang web hiệu quả, việc xác định mục đích cũng như đối tượng khách hàng tiềm năng và nội dung sẽ là yếu tố cốt lõi quan trọng Bằng cách đó, chúng ta sẽ có thể thiết kế một giao diện hấp dẫn và tính năng phù hợp, từ đó tối ưu hóa trải nghiệm của người dùng và tiếp cận, phổ biến đến mọi người rộng hơn.
+ Bước 2: Thu thập thông tin: Để đáp ứng nhu cầu của khách hàng, chúng ta cần tiến hành thu thập hàng loạt thông tin từ nhiều nguồn khác nhau và xung quanh các vấn đề cần làm như: thực đơn, các khoản chi phí, những hình ảnh chân thực cùng video sống động, và nhiều thứ khác nữa Tất cả nhằm mục đích mang lại sự tiện lợi và hài lòng tuyệt đối cho quý khách hàng.
+ Bước 3: Thiết kế giao diện: Để tạo ra một trang web hấp dẫn và dễ sử dụng, rất quan trọng để thiết kế bố cục, sử dụng màu sắc và phông chữ một cách hiệu quả, cùng với việc chèn hình ảnh phù hợp Việc đầu tiên đó là thiết kế bố cục sao cho các phần trang web có sự sắp đặt hợp lý, tạo nên một cấu trúc dễ nhìn và truy cập Màu sắc cũng rất quan trọng, bởi vì chúng có thể tạo ra một không gian trang web thú vị và hấp dẫn hoặc ngược lại, trở thành một rào cản đối với người dùng Ngoài ra, việc sử dụng phông chữ đúng cách có thể giúp tăng tính đồng nhất và độ lôi cuốn cho trang web Cuối cùng, hình ảnh cũng là một yếu tố quan trọng để thu hút sự chú ý của người dùng và tạo ra một trải nghiệm trực quan và thú vị.
+ Bước 4: Phát triển mã: Bằng việc sử dụng các ngôn ngữ lập trình phổ biến như HTML, CSS, JavaScript,Database,SQL,Xampp và PHP, chúng ta có khả năng phát triển trang web đầy đủ chức năng và custome hóa tùy ý Tuy nhiên, nếu muốn tạo trang web một cách nhanh chóng, thì sử dụng các trình quản lý nội dung (CMS) như WordPress hoặc Drupal cũng là một lựa chọn thông minh để tiết kiệm thời gian và cải thiện hiệu suất trang web. + Bước 5: Kiểm thử: Để đảm bảo rằng trang web của mình đang hoạt động một cách tối ưu trên nhiều trình duyệt và thiết bị khác nhau, chúng ta nên thường xuyên tiến hành kiểm tra và sửa chữa các vấn đề kỹ thuật có thể phát sinh Việc này giúp đảm bảo rằng tất cả người dùng có trải nghiệm truy cập trang web tốt nhất có thể, không phụ thuộc vào phần cứng và phần mềm cụ thể mà họ đang sử dụng.
+ Bước 6: Triển khai: Sử dụng Xampp để tạo 1 trang Localhost trên tính và PHPmysql để kết nối cơ sở dữ liệu cho trang wed.
+ Bước 7: Quản lí và bảo trì và cải tiến: Sau một thời gian hoạt động thì website có thể sẽ xuất hiện một số lỗi Chính vì thế việc quản lí và bảo trì là hoạt động nên làm thường xuyên để tránh những rủi ro không nên xảy ra.Tiếp thu ý kiến để update sản phẩm sau này
Phân Tích và thiết kế hệ thống website
Mô hình liên kết thực thể(E – R)
T Kiểu thực thể Thuộc tính Thuộc tính khóa
1 admin Id_admin,email , password Id_admin
2 user Id_user,email,full_name,password Id_user
Id_user, email, full_name,dia_chi , std , gioi_tinh ,ngay_sinh
3 products Id_product ,name,img,price,quantity,describe, id_ category, id_ brand id_item
4 order id_order, id_user , dia_chi, total_price, time, status Id_donhang
5 order details id_od , id_order, id_product, quantity, size , unit_price, retail price id_od
6 brand Id_brand, namebrand, img Id_brand
7 category Id_category, name_category, size, img Id_category
8 comment Id_comment ,id_product, id_user,comment_content ,time Id_comment
Hình 2.1: Bảng dữ liệu toàn bộ các bảng có trong trang web
Mô hình quan hệ
Hình 2 Mô hình Diagram cơ sở dữ liệu
Biểu đồ use case
Hình 3 Use case chính
2.1.2 Quan hệ giữa các use case
Hình 4 Quản lý giỏ hàng
Hình 5 :Quản lý đơn hàng
Hình 6 Quản lý sản phẩm
4 nếu trạng thái sản phẩm bằng 0 thì nút xóa sẽ không hiển thị.
Tiền điều kiện: Tài khoản đăng nhập phải mang quyền admin hoặc nhân viên.
Hậu điều kiện: Người dùng đã cập nhật sản phẩm thành công.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Use case này cho phép người dùng (admin) sửa trạng thái hóa đơn.
1 Use case này bắt đầu người dùng chọn mục danh sách hóa đơn Hệ thống sẽ hiển thị danh sách đơn hàng trong bảng hoadon.
2 Thanh toán: Người dùng nhấn nút thanh toán, hệ thống sẽ cập nhật trạng thái của hóa đơn đó thành 1 trong bảng hoadon và hiện thị lại danh sách hóa đơn.
1 Tại luồng cơ bản 2 nếu người dùng nhấn nút thoát Use case kết thúc
Tiền điều kiện: Tài khoản phải đăng nhập với quyền quản trị hoặc nhân viên. Hậu điều kiện: Người dùng đã cập nhật đơn hàng thành công.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Use case này cho phép khách hàng (người mua hàng) thanh toán sản phẩm trong giỏ hàng.
1 Use case này bắt đầu khách hàng nhấn vào nút đặt hàng trong giỏ hàng Hệ thống sẽ hiển thị form đặt hàng.
2 Khách hàng nhập thông tin cá nhân (tên, số điện thoại, email, địa chỉ, ghi chú), chọn hình thức thanh toán và nhấn vào nút xác nhận hệ thống kiểm tra thông tin và thêm vào bảng hoadon và hoadonchitiet Use case kết thúc.
Tại luồng cơ bản 2 nếu thông tin khách hàng nhập vào không hợp lệ hệ thống sẽ thông báo lỗi và yêu cầu nhập lại, khách hàng tiếp tục nhập hoặc thoát Use case kết thúc.
Tiền điều kiện: Trong giỏ hàng phải có sản phẩm và khách hàng phải đã đăng nhập.
Hậu điều kiện: Khách hàng đã cập nhật giỏ hàng thành công.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Use case này cho phép khách hàng (người mua hàng) xem, sửa số lượng sản phẩm, xóa sản phẩm khỏi giỏ hàng.
Xem giỏ hàng: Use case này bắt đầu khách hàng chọn giỏ hàng hoặc nhấn vào nút đặt hàng Hệ thống sẽ hiển thị giỏ hàng.
Sửa số lượng sản phẩm trong giỏ hàng: Khách hàng lựa chọn số lượng sản phẩm theo ý, hệ thống sẽ tự động cập nhật lại số lượng và giá để hiển thị Use case kết thúc.
Xóa sản phẩm trong giỏ hàng:
Khách hàng click vào nút “ x”trong giỏ hàng, hệ thống sẽ xóa sản phẩm ra khỏi giỏ hàng và hiển thị lại Use case kết thúc.
Tại luồng cơ bản 1 nếu giỏ hàng không có sản phẩm thì hệ thống sẽ hiển thì thông báo giỏ hàng trống.Nếu khách hàng nhấn nút thoát Use case kết thúc.
Tiền điều kiện: Trong giỏ hàng phải có sản phẩm.
Hậu điều kiện: Khách hàng đã cập nhật giỏ hàng thành công.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Use case này cho phép admin xem danh sách khách hàng.
Use case này bắt đầu khi người dùng (adminnhấn vào nút danh sách khách hàng trong menu khách hàng, hệ thống hiển thị danh sách các khách hàng trong bảng users lên màn hình
Khi người dùng nhấn nút thoát thì Use case kết thúc.
Tiền điều kiện: Tài khoản đăng nhập phải mang quyền admin,nhân viên
Hậu điều kiện: Không có.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Use case này cho khách hàng tìm kiếm nhanh chóng sản phẩm mình mong muốn.
Use case này bắt đầu khi khách hàng click con trỏ chuột vào ô nhập thông tin, khách hàng sẽ nhập tên sản phẩm Khi khách hàng nhấn nút tìm kiếm thì hệ thống sẽ hiện thị danh sách sản phẩm tương ứng với ô tìm kiếm.
Luồng rẽ nhánh: Khi khách hàng nhấn nút thoát hoặc trang chủ thì Use case kết thúc.
Tiền điều kiện: không có.
Hậu điều kiện: Không có.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Use case cho phép khách hàng bình luân về sản phẩm.
Use case này bắt đầu khách hàng thành viên nhập thông tin ô bình luận và nhấn vào nút Comment, hệ thống sẽ hiện thị Comment của khách hàng lên màn hình.
Luồng rẽ nhánh: Nếu khách hàng nhấn nút trang chủ hoặc nút thoát thì Use case kết thúc.
Tiền điều kiện: Khách hàng đã đăng nhập.
Hậu điều kiện: Khách hàng thêm bình luận vào bảng comment.
Các yêu cầu đặc biệt: Không có. Điểm mở rộng: Không có.
Biểu đồ trình tự
Hình 7: Biểu đồ trình tự đăng nhập
Hình 8 Biểu đồ trình tự đăng ký
Hình 9 : Biểu đồ trình tự tìm kiếm
Hình 10 Hình 2.3.4: Biểu đồ trình tự đặt hàng
Hình 11 Biểu đồ trình tự giỏ hàng
Biểu đồ hoạt động
Hình 12 H:Biểu đồ hoạt động tìm kiếm sản phẩm
2.5.2 Lọc chi tiết sản phẩm
Hình 13 Biểu đồ hoạt động lọc chi tiết sản phẩm
Hình 14 :Biểu đồ hoạt động đăng ký
Hình 15 Biểu đồ hoạt động đăng nhập
2.5.6 Thay đổi thông tin người dùng
Hình 16 Biểu đồ hoạt động đăng xuất
Hình 17 - Biểu đồ hoạt động thay đổi thông tin người dùng
Hình 18 - Biểu đồ hoạt động liên hệ
Hình 19 Biểu đồ hoạt động thanh toán
2.5.10 Xem tình trạng đơn hàng
Hình 20 Biểu đồ hoạt động xem tin tức
Hình 21 Biểu đồ hoạt động xem tình trạng đơn hàng
Hình 22 - Biểu đồ hoạt động quản lý đơn hàng
Hình 23 - Biểu đồ hoạt động quản lý sản phẩm
2.5.13 Quản lý nhà sản xuất
Hình 24 - Biểu đồ hoạt động quản lý nhà sản xuất
2.5.14 Quản lý danh mục sản phẩm
Hình 25 Biểu đồ hoạt động quản lý danh mục sản phẩm
Hình 26 Biểu đồ hoạt động quản lý tin tức
Hình 27 Biểu đồ hoạt động quản lý khuyến mãi
Hình 28 - Biểu đồ hoạt động quản lý liên hệ
Hình 29 - Biểu đồ hoạt động thống kê doanh thu
2.5.19 Thay đổi chức vụ người dùng
Hình 30 - Biểu đồ hoạt động thay đổi chức vụ người dùng
ChươngIII: Triển khai xây dựng trang website
1 Những kết quả quan trọng
- Sau gần 2 tháng triển khai và thực hiện dự án thì đã thu thập được nhiều kiến thức mới trong việc thiết kế website như học những ngôn ngữ mới, áp dụng những kĩ năng mềm đã được học vào việc viết báo cáo, tăng khả năng vận dụng những lí thuyết vào những dự án mang tính thực tế, hiểu biết nhiều hơn về PHP, cách kết nối cơ sở dữ liệu với trang web cho vai trò admin, hình thành cho mình được khả năng tư duy thiết kế hệ thống, giao diện đẹp Và dự án với đề tài “ thiết kế website bán giày” đã có thể ứng dụng với 2 vai trò, đó là admin và user.
Trang web gồm các chức năng sau cho user
- Hiển thị danh sách đơn hàng
- Hiển thị danh sách sản phẩm
- Đề xuất sản phẩm liên quan
- Thêm sản phẩm vào yêu thích
- Thêm sản phẩm vào giỏ hàng
- Lọc filter data sản phẩm(Theo giá, danh mục, bảng chữ cái Alphabet, thương hiệu, xuất xứ,Màu sắc, kích thước)
- Backup sản phẩm vừa xóa trong giỏ hàng
- Thêm, xóa sản phẩm trong giỏ hàng
Các chức năng của admin
- Quản lý danh mục sản phẩm(Thêm,xóa,sửa)
- Quản lý sản phẩm(Thêm, xóa, sửa)
- Quản lý lịch sử mua hàng của user
- Thông báo về đơn hàng
Giao diện người dùng
Hình 31 Hình ảnh trang quảng bá
2.1.2 Đăng nhập và Đăng ký
Hình 32 Hình ảnh trang đăng nhập và đăng kí
2.1.3 Các trang chính của trang web:
Quá trình mua một đơn hàng:
Hình 33 Hình ảnh trang web
Hình 34 Hình ảnh trang hiển thị sản phẩm
Hình 35 Hình ảnh trang hiển thị chi tiết sản phẩm
Hình 36 Hình ảnh trang hiển thị bình luận đánh giá sản phẩm
Hình 37 Hình ảnh trang hiển thị giới thiệu sản phẩm
Hình 38 Hình ảnh trang giỏ hàng
Hình 39 Hình ảnh trang hiển thị trang nhập địa chỉ hoàn tất đặt hàng
2.1.4 Trang các nhân người dùng :
Người dùng có thể xem trạng thái đơn hàng của mình , xem và điều chỉnh thông tin cá nhân , quản lý bình luận của bạn.
Hình 40 Hình ảnh trang hiển thị thông tin cá nhân
Hình 41 Hình ảnh trang hiển thị sửa thông tin cá nhân
Hình 42 Hình ảnh trang hiển thị trang theo giõi tình trạng đơn hàng của mình
Hình 43 Hình ảnh trang hiển thị trang theo giõi bình luận của mình
Gồm nhiều trang khác nhau để quản lý các hoạt động của trang web : gồm quản lý khách , quản lý sản phẩm , quản lý đơn hàng , quản lý danh mục , quản lý bình luận , quản lý thương hiệu
Tất cả các trang giúp cho admin quản lý trang web hoạt động hiệu quá và chuyên nghiệp hơi.
Hình 44 Hình ảnh trang chủ của ADMIN
Hình 45 Hình ảnh trang quản lý sản phẩm
Hình 46 Hình ảnh trang quản lý danh mục
Hình 47 Hình ảnh trang quản lý sản phẩm
Hình 48 Hình ảnh trang quản lý thương hiệu
2.3 Các tính năng của Website :
2.3.1 Lọc danh mục ,thương hiệu:
Sử dụng dữ liệu admin lọc sản phẩm theo từng mục
Hình 49 Hình ảnh hiển thị danh mục sản phẩm
Sử dụng AJAX và JQUERY để sử lý tìm kiếm nhanh trên website
Hình 50 Hình ảnh chức năng tìm kiếm sản phẩm
Tổng kết đề tài
Ưu điểm
Website được tích hợp các ngôn ngữ lập trình (php, javascript, html, css, sql, boostrap) và công cự lập trình ( VS studio code,xampp) Làm cho website trở nên linh động có thể chuyển dữ liệu qua lại giữ các trang 1 cách dễ dàng.Thao tác tìm kiếm , đặt hàng nhanh chóng giúp tăng trãi nghiệm người dùng.
Website cơ bản đã có thể xem các sản phẩm, có các slide và hiệu ứng cơ bản giúp website trở nên bắt mắt hơn
Có thể chạy trên nhiều giao diện, hệ điều hành khác nhau.
Giao diện dễ sử dụng
Có backend dùng php, khá đầy đủ các chức năng cho người dùng có thể trải nghiệm một cách tốt nhất
Nhược điểm, và những điều chưa làm được ở web
Website vẫn còn nhiều vấn đề chưa giải quyết và còn nhiều chức năng chưa làm được trong trang web:
THiết kế trang website còn quá đơn giản và giao diện vẫn còn sơ sài
Chưa thể khiến trang web thành 1 mã nguồn mở , và chưa có thế thêm toàn bộ giữ liệu lên không gian mạng Nên người dùng không thể tìm và xem trang web ở trên máy khác
Chức năng thêm sản phẩm còn quá thô sơ
Trang admin vẫn chưa có chức năng tổng kết doanh thu , Mẫu bảng điều khiển đăng nhập bằng cách tài khoản đến từ nền tảng khác như facebook , Instagram,google,…
Chưa làm được boxchat tương tác trực tiếp với người dùng
Chưa tối ưu hóa được chương trình
Vấn đề bảo mật thông tin khách hàng chưa có
3 Hướng phát triến trong tương lai
Với sự phát triển mạnh mẽ của thương mại điện tử cũng như là áp dụng tiên tiến của khoa học kĩ thuật luôn luôn đòi hỏi con người phải luôn luôn cố gắng hoàn thiện mọi thứ để đáp ứng nhu cầu của thị trường.
Đẩy toàn bộ dữ liệu trang website này lên không gian mạn để tiếp cận người dùng.
Hoàn thiện cách chức năng thiếu ở mục nhược điểm
Mở rộng danh mục sản phẩm:Tiếp tục tìm kiếm và cung cấp các loại giày đa dạng từ các thương hiệu nổi tiếng khác nhau Điều này giúp khách hàng có nhiều lựa chọn hơn và tìm thấy đúng sản phẩm mà họ đang tìm kiếm trên trang web
Cải thiện chức năng tìm kiếm: Tăng cường chức năng tìm kiếm trên trang web để khách hàng có thể dễ dàng tìm thấy sản phẩm mong muốn Các tính năng tìm kiếm tiên tiến như bộ lọc, sắp xếp theo tiêu chí và gợi ý sản phẩm sẽ được tích hợp để tăng cường trải nghiệm người dùng.
Tích hợp đánh giá và nhận xét: Cho phép khách hàng đánh giá và viết nhận xét về sản phẩm mà họ đã mua Điều này giúp người mua hàng có thêm thông tin phản hồi từ người dùng khác và đưa ra quyết định mua sắm thông minh hơn.
Tạo ra nội dung và hướng dẫn thời trang: Chúng tôi sẽ cung cấp nội dung liên quan đến thời trang, bao gồm các bài viết, bí quyết phối đồ và hướng dẫn thời trang Điều này giúp khách hàng có thêm thông tin và cung cấp ý tưởng để tạo ra phong cách riêng cho bản thân.
Phát triển ứng dụng di động: Lên kế hoạch phát triển ứng dụng di động cho trang web bán giày Điều này giúp khách hàng tiện lợi hơn khi mua sắm từ điện thoại di động và trải nghiệm tốt hơn trên nền tảng di động.
Tăng cường dịch vụ khách hàng: Đầu tư vào việc cải thiện dịch vụ khách hàng, bằng cách cung cấp hỗ trợ trực tuyến, tư vấn sản phẩm và xử lý các yêu cầu của khách hàng một cách nhanh chóng và chuyên nghiệp.
DANH MỤC CỤM TỪ VIẾT TẮT
DANH MỤC TÀI LIỆU THAM KHẢO
[1] Giáo Trình Công Nghệ Web,2018,Khoa CNTT&TT Đại Học Đà Nẵng