Đồ án học phần lập trình web hình thành ý tưởng, thiết kế và triển khai website shop bán quần áo

TRƯỜNG ĐẠI HỌC VINH VIỆN KỸ THUẬT VÀ CÔNG NGHỆ BÁO CÁO ĐỒ ÁN HỌC PHẦN LẬP TRÌNH WEB HÌNH THÀNH Ý TƯỞNG, THIẾT KẾ VÀ TRIỂN KHAI WEBSITE SHOP BÁN QUẦN ÁO Giảng viên hướng dẫn: Cao Thanh Sơn Nhóm SVTH: STT Họ tên Đàm Thị Mỹ Linh Phan Thị Trang Nghệ An – 2022 Mã sinh viên 215748020110075 215748020110467 Lời cảm ơn Lời đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành tới Thầy, Cô người trực tiếp giảng dạy, tận tình giúp đỡ chúng em suốt thời gian qua Sinh viên Công nghệ thông tin ngày phải không ngừng học hỏi, trau dồi kiến thức trình độ ngoại ngữ, cập nhật biết ứng dụng kiến thức học vào thực tiễn sống Quá trình làm đồ án lập trình web bước đầu để nhóm chúng em sâu vào chun ngành tìm hiểu lĩnh vực thiết kế trang website hoàn chỉnh, sở kiến thức học hướng dẫn thầy cô ngành Để hồn thành đồ án lập trình web, ngồi cố gắng nỗ lực thành viên nhóm cịn có giúp đỡ tận tình giảng dạy thầy cô khoa CNTT Trường đại học Vinh Với long biết ơn sâu sắc nhất, em xin gửi lời cảm ơn chân thành đến thầy cô khoa, đặc biệt thầy giáo Cao Thanh Sơn người nhiệt tình hướng dẫn nhóm chúng em q trình thực đề tài Vì thời gian trình độ chúng em cịn hạn chế nên chắn chúng em khơng tránh khỏi thiếu sót Chúng em mong nhận góp ý thầy nhóm khác để đề tài hồn thiện Nhóm sinh viên thực Nhóm 36 Mục lục CHƯƠNG 1: HÌNH THÀNH Ý TƯỞNG 1.1 Lựa chọn đề tài 1.2 Nhiệm vụ đề tài 1.3 Một số sản phẩm liên quan đến đề tài 1.4 Ý tưởng xây dựng website CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ WEBSITE .7 2.1 Phân tích thiết kế chức .7 CHƯƠNG XÂY DỰNG WEBSITE 3.1 Các công cụ xây dựng website 3.2 Xây dựng giao diện Bước Phân tích layout, xác định block Bước Phân tích block .9 Bước Triển khai viết mã nguồn 3.3 Thử nghiệm Website .10 PHẦN MỞ ĐẦU Tại Việt Nam, với sống ngày đại, nhu cầu mua bán qua mạng INTERNET cần thiết Trong xu cạnh tranh ngày mạnh kinh tế mở cửa tất lĩnh vực đặc biệt ngành tế qua mạng, chất lượng phục vụ giá dịch vụ cung cấp cho khách hàng đặt lên hàng đầu Vì nhóm em thực đồ án ‘Thiết kế website bán quần áo’ Mục tiêu tìm hiểu số hệ thống cửa hàng bán hàng trực tuyến cửa hàng kinh doanh theo hình thức Từ em xây dựng website bán quần áo tốt  Nội dung đồ án gồm chương  Chương 1: Hình thành ý tưởng - Lựa chọn đề tài - Nhiệm vụ đề tài - Một số sản phẩm liên quan đến đề tài - Ý tưởng xây dựng website  Chương 2: Phân tích thiết kế website - Phân tích thiết kế chức - Thiết kế giao diện  Chương 3: Xây dựng website - Các công cụ xây dựng website - Xây dựng giao diện - Thử nghiệm website  Kết Luận - Trình bày kết đạt - Trình bày hạn chế - Trình bày hướng phát triển CHƯƠNG 1: HÌNH THÀNH Ý TƯỞNG 1.1 Giới thiệu đề tài Việc kinh doanh mua bán nhu cầu thiếu với Trong thời đại cạnh tranh việc giới thiệu sản phẩm đến cá nhân với chi phí thấp, hiệu cao vấn đề nan giải người kinh doanh với nhu cầu mua sắm với sản phẩm đa chủng loại, đạt chất lượng suất cao với nhiều mẫu mã đa dạng hớp túi tiền khách hàng thương mại điện tử đời phát triển mạnh toàn giới Việc phổ biến sản phẩm cửa hàng kinh doanh đến khách hàng thông qua bảng báo giá nhiên chi phí cao số lượng sản phẩm ngày đa dạng giá thay đổi liên tục tính phổ biến khơng cao chưa đáp ứng nhu cầu người dùng Mặt khác cửa hàng cịn gặp nhiều khó khăn chưa quản lý người dùng, thông tin nhà sản xuất, cập nhật giá sản phẩm, quản lý sản phẩm Nắm bắt tình hình nhóm em tiến hành thiết kế trang web bán hàng online để mong giúp cho cửa hàng phát triển hơn, giúp quản lý cửa hàng cách dễ dàng mà đạt hiệu mong đợi 1.2 Mục đích website cần thiết kế Khi xây dựng website cần: - Xác định đối tượng khách hàng ai? - Website có mục đích gì? - Xác định rõ chủ đề website gì? - Thiết lập khối thơng tin mà website cung cấp Yêu cầu: - Xây dựng website có giao diện đẹp, thân thiện với người dùng Hình ảnh website sắc nét, phù hợp với nội dung Hiển thị đầy đủ thơng tin Bố cục website rõ ràng, hợp lí Cấu trúc danh mục địa 1.3 Một số sản phẩm liên quan đến đề tài (Hình 1.1) https://ivymoda.com/sanpham/set-ao-dai-hong-phuc-ms-86m8028-36769 1.4 Ý tưởng xây dựng website Việc xây dựng website q trình liên tục, không đơn dự án lần với thông tin tĩnh Việc biên tập, quản lý trì kỹ thuật dài hạn phải bao trùm lên kế hoạch xây dựng website  Đối tượng khách hàng: Đây website bán hàng thời trang nên đối tượng không phân biệt nam hay nữ chủ yếu sản phẩm cho độ tuổi niên mặt hàng chủ yếu website quần áo  Quảng bá webssite: Mục tiêu website giới thiệu quảng bá cửa hàng, cung cấp sản phẩm thời trang mà bạn trẻ ưa thích Khách hàng biết thông tin cụ thể sản phẩm như: tên sản phẩm, giá Ngồi website cịn có mục đích giới thiệu cho nhiều khách hàng biết đến cửa hàng, thu hẹp khoảng cách địa lý, giải vấn đề đường xa, việc lại khó khăn Làm cho việc kinh doanh ngày phát triển nhiều khách hàng biết đến CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ WEBSITE 2.1 Phân tích thiết kế chức  Các trang website (vì website có nhiều trang nên nhóm em làm lại số trang ạ) - Trang chủ: Đây trang giới thiệu sản phẩm bật, sản phẩm sale cửa hàng - Trang áo nữ: trang khách hàng xem số sản phẩm áo nữ Khách hàng tìm kiếm sản phẩm cách xem chi tiết sản phẩm VD: size, màu, chất liệu, giá cả, - Trang xe áo nam: trang khách hàng xem số sản phẩm áo nam Khách hàng tìm kiếm sản phẩm cách xem chi tiết sản phẩm VD: size, màu, chất liệu, giá cả, - Trang thông tin sản phẩm: trang khách hàng xem số hình ảnh khác sản phẩm đó, khách hàng đặt hàng thêm vào giỏ hàng  Nội dung đối tượng - Trang chủ · Bao gồm thơng tin website hình ảnh giới thiệu liên quan · Hộp tìm kiếm giúp người dùng tìm kiếm thơng tin loại, thơng tin quần áo… · Slider hình ảnh dẫn đến trang mua quần áo · Nội dung sưu tập, hình ảnh, … · Phần header bao gồm logo LT Shop, link liên kết tới trang liên kết khác · Phần footer bao gồm thông tin địa chỉ, hotline, tổng đài chăm sóc link dẫn tới trang liên kết khác - Trang áo nam áo nữ · Có Header Footer giống trang chủ · Để menu tìm kiếm, · Có Sidebar để tìm kiếm thơng tin size, màu sắc, · Chứa hình ảnh quần áo, giá cả, tên xe, - Trang thông tin quần áo · Có Header Footer giống trang chủ · Thơng tin, ảnh quần áo · CHƯƠNG 3: XÂY DỰNG WEBSITE 3.1 Các công cụ xây dựng website  VS Code: công cụ soạn thảo mã nguồn (Code Editor - nôm na chỗ để viết code) Microsoft phát triển, giới thiệu lần đầu năm 2015 phát hành năm 2016  Figma: công cụ thiết kế đồ họa vector chạy trình duyệt web, thường dùng để thiết kế UI dựng prototypes Figma cung cấp tài nguyên từ trình thiết kế, từ ý tưởng concept khởi tạo code từ mẫu thiết kế 3.2 Xây dựng giao diện - Các bước chuyển giao diện thiết kế sang Website có sử dụng HTML, CSS, Bootstrap, jQuery: + Phân tích layout tổng quát, chia thành block nhỏ + Phân tích block gồm element + Triển khai code block - Vài quy tắc: + Từ xuống + Từ vào + Từ trái sang phải Bước Phân tích layout, xác định block - Ở bước này, nhìn vào thiết kế Designer tạo thành file figma dạng layout gồm nhiều thành phần ghép vào - Dựa vào ta xác định bố cục page gồm thành phần để xác định cách triển khai mã nguồn HTML code page Bước Phân tích block - Sau phân tích layout chung trang web xác định block lớn tạo nên giao diện cho page - Chúng ta sâu phân tích block thành element nhỏ để code element nhỏ tạo giao diện Bước Triển khai viết mã nguồn Viết mã nguồn để tạo giao diện bao gồm phần mã nguồn HTML, CSS (SCSS, SASS) Jquery - Mã nguồn HTML: sử dụng thẻ để xác định khung cho page Ở sử dụng HTML5 + Nhóm thẻ cấu trúc: tạo bố cục cho page + Nhóm thẻ heading: tạo phần tiêu đề + Nhóm thẻ xác định văn bản: tạo nội dung cho page + Nhóm thẻ danh sách: tạo nội dung kiểu danh sách + Nhóm thẻ liên kết, media: tạo ảnh, video, liên kết cho page + Nhóm thẻ tạo bảng: tạo bảng liệu tạo layout + Nhóm thẻ liên quan đến form: tạo form nhập liệu Từ nhóm thẻ này, tạo phần khung Sau viết mã nguồn CSS để biến design thành giao diện web - Mã nguồn CSS: Sử dụng hệ thống selector (tag, class, id, ) để tạo phong cách định kiểu cho HTML Nó điều khiển định dạng nhiều trang web lúc để tiết kiệm công sức cho người viết 10 web Nó phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ - Mã nguồn Js Jquey: sử dụng dùng để xử lý động cho trang web, điều khiển hoạt động click, hover, scroll, thành phần web 3.3 Thử nghiệm Website Demo m t ộsốố hình ả nh vềề trang chủ (Hình 3.1) (Hình 3.2) 11 (Hình 3.3) (Hình 3.4) 12 (Hình 3.5) Demo m t ộsốố hình ả nh vềề trang chủ responsive 13 (Hình 3.6) 14 (Hình 3.7) 15 (Hình 3.8) Bảng phân cơng cơng việc Thành viên Đàm Thị Mỹ Linh Phan Thị Trang Công việc Chấm điểm Trang chủ trang thông tin sản phẩm Trang áo nam trang áo nữ 16 KẾT LUẬN  Đã làm Sau người dùng truy cập vào website click vào logo hình hiển thị trang chủ Khi click vào nút giỏ hàng header modal giỏ hàng lên Sau truy cập vào website, người dùng click vào mục menu Website điều hướng người dùng đến trang mong muốn Khi người dùng kéo xuống icon click vào sroll lên đầu trang Resposive trang cấu hình điện thoại truy cập trang web Khi responsive font-size hình ảnh khơng bị hỏng kích thước cho người dùng cảm giác sử dụng thoải mái Trang áo nam áo nữ tương tác với nút Trang thơng tin sản phẩm click chuyển ảnh, chọn ảnh mà người dùng muốn để xem  Còn hạn chế Chưa đăng nhập người dùng, TÀI LIỆU THAM KHẢO [1] Hassen Ben Rebah, Hafedh Boukthir, Antoine Chedebois, Website Design and Development with HTML5 and CSS3, Wiley-Iste, 2022 [2] Julie Meloni, Jennifer Kyrnin, HTML, CSS, and JavaScript All in One: Covering HTML5, CSS3, and ES6, Sams Teach Yourself, Sams Publishing, 2018 [3] HTML, CSS, JavaScript Examples - W3Schools (các ví dụ HTML, CSS, Javascript từ W3Schools), https://www.w3schools.com, truy cập 10/2022 17 18