Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI 1. Giới thiệu về đề tài 1. Nhu cầu về các website thương mại và thời trang Ngày nay, xã hội ngày càng phát triển, đời sống con người càng được cải thiện, người ta không chỉ no đủ vật chất mà còn chú trọng nhiều đến đời sống tinh thần, đặc biệt là thời trang nhằm thỏa mãn nhu cầu thẩm mỹ ngày càng cao. Dân gian cũng đã có câu "Người đẹp vì lụa, lúa tốt vì phân" là lẽ đó, cách ăn mặc có mối quan hệ khá mật thiết với văn hoá, phản ánh một phần đời sống, văn minh của con người.
Chính vì thế, như một lẽ tự nhiên của thời đại công nghệ 4.0, các website thương mại, buôn bán quần áo ngày càng phát triển và được tín dụng. Một phần là vì nó cung cấp cho người dùng những sự tiện lợi, nhanh gọn trong mua bán sản phẩm, vừa giúp người dùng có thể lựa ra cho mình những món đồ ưng ý, hợp với nhu cầu nhất mà không nhất thiết phải ra tận cửa hàng để có thể lựa chọn như ngày xưa. Nhờ có các webstie thương mại mà các chủ cửa hàng quần áo có thể tạo các website đơn giản, phục vụ mục đích bán hàng của mình lại còn tăng cao thu nhập. Lý do chọn đề tài Về lý do của chính mình, thì chính đáng nhất đó là sự yêu thích, mong muốn có thể tự phát triển được một sản phẩm website full stack, nhờ đó mà có thể nâng cao trình độ học thuật của bản thân, cũng như có một sản phẩm tốt cho môn đồ án một.
Ngoài ra với niềm đam mê với các sản phẩm quần áo mang đậm tính thời trang và nghệ thuật trong nó đã cho nhóm chúng em thêm động lực để chọn và thực hiện đề tài này. Về nhu cầu của xã hội, thì với sự phát triển vượt bậc của internet cũng như hệ thống vận tải logictics thì các ngành nghề kinh doanh, thương mại điện tử đang ngày càng phát triển. Các công ti, tập đoàn sẵn sàng chi lượng lớn tiền vào ngành này. Hệ thống thương mại điện tử hiện nay có nhiều sự vượt trội hơn so với các ngành nghề thương mại truyền thống.
Chỉ với vài thao tác đơn giản trên các thiết bị thông minh 18 người dùng dễ dàng lựa chọn các sản phẩm mình mong muốn. chúng sẽ được vận chuyển đến tận nhà của họ. Nắm bắt được các yếu tố trên nhóm chúng em quyết định lựa chọn để tài “Tìm hiều và xây dựng WEBSITE BÁN QUẦN ÁO, PHỤ KIỆN THỜI TRANG VỚI CHAT BOT TƯ VẤN” để phục vụ cho nhu cầu tìm kiếm và mua sản phẩm thời trang trên internet một cách thuận lợi nhất cho người dùng. Khảo sát hiện trạng Thực hiện khảo sát hiện trang trên thị trường bằng cách nghiên cứu các website bán quần áo có chức năng tương như đề tài của nhóm như: fiona.vn… Nhóm em thấy đa số các trang web điều tập trung vào một mảng bán hàng còn về phần quản lý tài khoản người dùng vẫn còn hạn chế.
Nên nhóm em mong muốn có phần thay đổi trong việc quản lý tài khoản người dùng, giúp người dùng có nhiều tương tác hơn với shop thông qua việc theo dõi đơn hàng hiện có, chỉnh sửa thông tin người dùng cũng như tương tác với shop bằng chat bot. Công nghệ và đối tượng nghiên cứu Các công nghệ và ngôn ngữ sử dụng trong đồ án: Các ngôn ngữ công nghệ lập trình front end: HTML, Css/Scss, Javascript, Bootstrap, JSP (JavaServerPages). Các ngôn ngữ công nghệ lập trình back end: Servlet, JDBC, Java. Database: MySQL Công nghệ, ngôn ngữ nghiên cứu và thiết kế chatbot: Rasa framework, Python Công cụ thiết kế UI : Figma Công cụ phân tích thiết kế, vẽ diagram: draw.io, Microsoft Visio Công cụ coding/quản lý database: Eclipse IDE, MySQL Workbench 8.0 CE Công cụ quản lý dự án: Github, Messenger Group, Microsoft Teams.
Công cụ lưu trữ các tài liệu liên quan: Google Drive, Github 19 Đối tượng trong phạm vi đề tài hướng đến: Các shop quần áo có nhu cầu mở rộng việc kinh doanh của mình trên internet bằng hình thức bán hàng qua website online thương mại. Các khách hàng, người dùng có nhu cầu mua quần áo thời trang trên internet, vừa tiện lợi, dễ sử dụng lại có ship hàng đến tận nhà. Phạm vi nghiên cứu Đề tài tập trung vào nghiên cứu về website bán thời trang, phục vụ việc kinh doanh online của shop quần áo. Thực hiện học và nghiên cứu các ngôn ngữ lập trình front end, back end, tìm ra công dụng của chúng trong quá trình thực hiện đồ án – tạo nên một trang web full stack.
Tìm hiểu về cách hoạt động của cơ sở dữ liệu trong quá trình lưu các ràng buộc của trang web. Nghiên cứu cách tạo nên chat bot và cách hoạt động của nó. Tìm hiểu và thực hiện các công cụ quản lý dự án như github. Học và thực hiện các bảng use case, diagram và tìm ra hướng phát triển cho quá trình nghiên cứu trong tương lai.
Phương pháp nghiên cứu Nhóm đã sử dụng các phương pháp nghiên cứu: - Xem các video Youtube hướng dẫn học - Xem các trang web có các tài liệu về ngôn ngữ, nghiên cứu. - Đọc tài liệu tham khảo trên mạng, các nghiên cứu của những người đi trước - Thực hiện khảo sát các trang web có các chức năng tương tự, phân tích yêu cầu người dùng 1. Nhiệm vụ của đề tài Đề tài “Website bán quần áo, phụ kiện thời trang với chatbot tư vấn” là một ứng dụng chạy trên nền web đáp ứng được các yêu cầu sau: 20 Cung cấp đầy đủ các tính năng như tìm kiếm sản phẩm, mua bán các loại sản phẩm khác nhau thích hợp với nhiều đối tượng khách hàng, quản lý tài khoản người dùng, người dùng có thể thực hiện đăng ký, đăng nhập tài khoản để mua hàng, người dùng có thể thực hiện đặt hàng online và sẽ được shop giao hàng thông qua hình thức shipping. Cung cấp đầy đủ các tính năng cho chủ shop/admin như: quản lý các sản phẩm trên website, thực hiện thêm, xóa, sửa các sản phẩm theo nhu cầu của shop, quản lý đơn hàng của người dùng, quản lý người dùng 1.
Mục tiêu của đề tài Mục tiêu cơ bản là kết hợp giữa những kiến thức đã được học và tự học, kèm theo hiểu biết và trải nghiệm từ phía người dùng, để tạo nên một website bán hàng online hoàn chỉnh – tối ưu hoá về mọi mặt, để sau này dễ phát triển Học và tìm hiểu các ngôn ngữ lập trình, công nghệ hỗ trợ phát triển 1 trang web full stack. Tìm hiểu về kiến trúc hệ thống cũng như quản lý database Tìm hiểu và nghiên cứu về chatbot Tìm hiểu cách mô phỏng giao diện của một ứng dụng trên Figma Vẽ được các diagram mô tả các chức năng của hệ thống Xây dựng thành công website bán quần áo, phụ kiện thời trang 21 2 Chương 2 - CƠ SỞ LÝ THUYẾT 2.1 Các ngôn ngữ và công nghệ để tạo nên một trang web fullstack Front End 2.1 HTML HTML là gì ? HTML là chữ viết tắt của HyperText Markup Language, dịch ra tiếng Việt có nghĩa là ngôn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệc, ta gọi là trình duyệt browser. Cú pháp : <tagname></tagname> 22 Mỗi tagname như trên ta gọi là một thẻ HTML, và công dụng của chúng là khác nhau.
Ví dụ bạn muốn in đậm một chữ nào đó thì có thể đặt trong thẻ <strong>Nội dung in đậm</strong>. Ngoài ra, mỗi thẻ HTML còn có một số thuộc tính riêng và danh sách các thuộc tính sẽ nằm bên trong thẻ mở như sau: <tagname pro1="value1" prop2="value2"></tagname> Bố cục của một trang web HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Trong đó: 23 <!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị là html để trình duyệt (Browser) biết. <html> và </html> là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại. Thẻ này là bát buộc.
<head> và </head> là phần khai báo thông tin của trang web <title> và </title> nằm bên trong thẻ <head> và đây chính là khai báo tiêu đề cho trang web. <body> và </body> là thành phần quan trọng nhất, nó chứa nhưng đoạn mã HTML dùng để hiển thị trên website Các thẻ còn lại nằm trong thẻ <body> chính là các thẻ định dạng dữ liệu. Như vậy trong một website chúng ta chia làm 2 phần chính: Phần 1: Là những khai báo thông tin cho trang web và ta đặt nó trong thẻ head. Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt trong thẻ body.
Các vị trí cơ bản khi tạo nên một trang web Thông thường giao diện của một trang web sẽ được chia thành các phần như sau: 24 Hình 2.2 Cấu trúc HTML Trong đó: header: header là phần đầu tiên của trang web, chứa logo trang web, banner chính ngang, menu phụ như thông tin, ô tìm kiếm, ngày tháng, thời tiết,… navigation: thanh điều hướng (hay là menu chính), là một thanh ngang, chứa các mục chính (thể loại chính) của trang web. Phần menu này rất quan trọng giúp người dùng và cơ chế tìm kiếm định hình hiểu rõ về cấu trúc website của bạn. content: chứa nội dung chính website. sidebar: thanh bên, chứa các phần liên quan đến nội dung chính như các menu phụ, các bài viết liên quan, quảng cáo,… Một số website có 1 thanh bên, 2 thanh bên hoặc hơn nữa là tùy theo bố cục.
footer: phần chân (đáy) trang, chứa thông tin về trang web như tình trạng bản quyền 25 2.3 CSS CSS là gì ? CSS là chữ viết tắt của cụm từ tiếng Anh "Cascading Style Sheet", khác với HTML ta dùng nó để định tạo khung của một trang web, thì css dùng để trình bày bố cục, tô điểm giao diện của các thẻ HTML đó. Nói đơn giản hơn thì CSS sẽ tác động thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân thiện với người dùng hơn hay nhằm một mục đích cụ thể nào đó. Có một ví dụ trực quan để diễn tả nhiệm vụ của CSS như sau, giả sử bạn xây nhà và bạn sẽ sử dụng gạch để xây dựng ngôi nhà. Nhưng để trang trí cho ngôi nhà thì bạn sẽ sử dụng một số đồ nội thất khác như sơn màu,.
thì lúc này sơn màu sẽ tác động làm thay đổi color mặc định của gạch.