TRƯỜNG ĐẠI HỌC PHENIKAA KHOA CÔNG NGHỆ THÔNG TIN & BÁO CÁO Đề tài Xây Dựng Ứng Dụng WEBSITE Shop Bán Quần Áo Sinh viên nhóm 12 Bùi Đức Tuấn Anh MSV 20010838 Phạm Đình Ba MSV 20010843 Nguyễn Văn Minh M[.]
TRƯỜNG ĐẠI HỌC PHENIKAA KHOA CÔNG NGHỆ THÔNG TIN - & - BÁO CÁO Đề tài: Xây Dựng Ứng Dụng WEBSITE Shop Bán Quần Áo Sinh viên nhóm 12: Bùi Đức Tuấn Anh MSV: 20010838 Phạm Đình Ba MSV: 20010843 Nguyễn Văn Minh MSV: 20010876 Giảng viên: Vũ Văn Quang Học phần: Xây dựng ứng dụng WEBSITE - & Năm học 2021-2022 Lời mở đầu Nhân dân ta có câu “Phi thương bất phú”, nên buôn bán, kinh doan đường để trở nên giàu có Bên cạnh có nhiều lĩnh vực mà người thực kinh doanh, buôn bán Việc kinh doanh trao đổi buôn bán thường diễn chợ, cửa hàng, trung tâm giao dịch Tại nơi hàng hóa hay thứ trưng bày giới thiệu Người mua xem xét, chọn mua hàng hóa Việc quảng bá sản phẩm thường lựa chọn quảng cáo đài phát thanh, truyền hình, phương tiện truyền thơng Những hình thức quảng báo cổ điển có nhiều hạn chế, khơng gian quảng bá Một nhà sản xuất muốn quảng bá hình ảnh sản phẩm, thương hiệu cơng ty mình, muốn người toàn giới biết đến việc khó khăn chi phí quảng cáo lớn Hai là, người tiêu dùng hay khách hàng có liên quan muốn biết thông tin, mua bán sản phẩm lại cần thông qua nhiều bước trung gian, môi giới mà chi phí tăng, gây khó khăn cho khách hàng Sự phát triển công nghệ thông tin, đặc biệt việc cho đời phát triển mạng Internet với website quảng cáo tạo thời kỳ cho quảng cáo thương hiệu, quảng bá sản phẩm Khách hàng ngồi nhà truy cập mạng Internet để xem thơng tin, lựa chọn sản phẩm, đặt mua sản phẩm khắp giới, điều mà trước chắn làm Nhà sản xuất tiết kiệm chi phí quảng cáo, người dùng dễ dàng xem, chọn lựa đâu giới Theo xu hướng chung thời đại, lĩnh vực hoạt động kinh doanh dựa mạng Internet phát triển giới thiệu quảng cáo mạng có ý nghĩa to lớn đối tượng muốn nhiều người biết đến, muốn quảng bá thong tin mạng Việc quảng cáo làm cho hiệu kinh doanh cá nhân tập thể nâng cao Hiện mạng Internet việc giới thiệu quảng cáo trở thành phổ biến điều thiếu Với nhu cầu to lớn tiện lợi việc quảng cáo mạng, trang web quảng cáo xây dựng nhiều nhắm phục vụ cho nhu cầu Tuy nhiên với trang web kinh doanh quảng cáo có hình thức quảng bá khác ln nhằm mục đích giới thiệu cho người đọc cách tốt thong tin cần thiết Tại Việt Nam hình thức quảng cáo website, báo điện tử, quảng cáo qua email, qua tin nhắn điện thoại hay gọi quảng cáo trực tuyến có mặt khoảng năm trở lại đay Đến nay, chưa được đánh giá cao hiệu quảng bá, song người ta kỳ vọng phương thức nhanh chóng rút ngắn khoảng cách với quảng cáo truyền thống, quảng cáo truyền hình để trở thành ngành kinh doanh mang lại lợi nhuận lớn Việt Nam Thời trang gắn liền với sống, mẫu thiết kế độc đáo, kiểu cách lạ mắt xuất hàng năm, ln thu hút ý người bắt đầu sang mùa thu, hè, đông, xuân nhu cầu thiểu với bạn trẻ đam mê thời trang Từ em nảy ý tưởng xây dựng website bán quần áo online cho tất người Với lý trên, cộng với kiến thức tích lũy thời gian học tập thực tế, hướng dẫn thầy giáo - em lựa chọn đề tài “XÂY DỰNG WEBSITE BÁN QUẦN ÁO” Lời cảm ơn Nhóm chúng em xin gửi lời cảm ơn đến thầy Vũ Văn Quang, người hướng dẫn em nhiều suốt q trình tìm hiểu nghiên cứu hồn thành khóa luận từ lý thuyết đến ứng dụng Sự hướng dẫn thầy giúp em có thêm kiến thức lập trình web Qua dẫn ân cần thầy giúp em hiểu sâu kiến thức học Mục lục CHƯƠNG 1: TỔNG QUAN: 1.1 1.2 5 Lý chọn đề tài: Giới hạn phạm vi đề tài: 1.3 Kết dự kiến đạt được: 1.4 Ý nghĩa đề tài: 1.5 Bố cục : CHƯƠNG 2: KHẢO SÁT THỰC TRẠNG: 2.1 Khảo sát thực trạng: 2.2 Yêu cầu đề tài: CHƯƠNG 3: KIẾN THỨC NỀN TẢNG: 11 3.1 Cơ sở lý thuyết: 11 3.1.1 Phân tích thiết kế hệ thống: 11 Hình 3.1 Minh họa UML 11 3.1.2 Ngôn ngữ HTML CSS: 12 Hình 3.2 Lợi ích việc sử dụng CSS trang web HTML 13 3.1.3 Ngơn ngữ lập trình JavaScript: 14 3.1.4 Hệ quản trị sở liệu: 15 3.2 Công cụ sử dụng: 15 3.2.1 Thư viện Jquery: 15 CHƯƠNG 4: ÁP DỤNG KIẾN THỨC ĐÃ HỌC ĐỂ XÂY DỰNG WEBSITE: 17 4.1 Xây dựng phần trang chủ: 17 CHƯƠNG 1: TỔNG QUAN 1.1 Lý chọn đề tài: Ngày nay, xu hướng phát triển công nghiêp hóa – đại hóa đất nước ngày đẩy mạnh Để đáp ứng khối cơng việc ngày gia tăng , đòi hỏi người phải có phương pháp quản lý hợp lý giúp tiết kiệm thời gian chi phí cơng sức lao động Thấy khó khăn, hạn chế quản lý cửa hàng quần áo, việc xây dựng website quản lý giúp người quản lý, chủ cửa hàng dễ dàng việc quản lý mua bán quần áo cung cấp thông tin vận chuyển cách nhanh chóng, truy xuất liệu nhanh hơn, quản lý khách hàng hợp lý điều vô cần thiết Với đề tài “Xây dựng website bán quần áo” phần mềm giúp quản lý khách hàng, quản lý sản phẩm quần áo, quản lý thông tin đơn hàng tài khoản cách nhanh chóng, xác 1.2 Giới hạn phạm vi đề tài: Xây dựng chương trình dựa ngơn ngữ lập trình HTML, CSS, JAVACRIP ngơn ngữ ập trình PHP (nếu tìm hiểu) Xây dựng chương trình tập trung vào chức phân tích qua q trình khảo sát thực trạng 1.3 Kết dự kiến đạt được: Hiểu ngơn ngữ lập trình HTML, CSS, JAVACRIP áp dụng xây dựng vào trang web Biết cách phân tích thiết kế website bán hàng Hoàn thành website bán quần áo với tính như: - Quản trị viên: thực chức quản trị hệ thống, quản lý sản phẩm, quản lý đơn hàng, quản lý danh sách khách hàng, Để thực chức admin phải đăng nhập - Khách hàng: thực chức tìm kiếm sản phẩm, mua hàng toán, đăng ký hệ thống 1.4 Ý nghĩa đề tài: Ý nghĩa khoa học: Vận dụng kiến thức học để xây dựng website bán quần áo: - Làm quen với kiến thức nâng cao ngôn ngữ lập trình HTML, CSS, JAVACRIP - Tìm hiểu thêm sử dụng hệ quản trị sở liệu MySQL ngơn ngữ lập trình PHP - Nghiên cứu phân tích thiết kế hệ thống theo khảo sát thực trạng - Xây dựng giao diện website Ý nghĩa thực tiễn: Website bán quần áo đời, giúp đáp ứng nhu cầu mua sắm người dùng nhanh chóng tiện lợi Website giúp chủ cửa hàng, quản trị viên dễ dàng việc quản lý lưu trữ thông tin sản phẩm, khách hàng đơn hàng… Ngồi việc quản lý thơng minh, nhanh gọn, website cịn có giao diện thân thiện, dễ sử dụng… Từ đó, thấy website mang lại nhiều lợi ích 1.5 Bố cục : CHƯƠNG 1: TỔNG QUAN: Giới thiệu tổng quan đề tài gồm lý chọn đề tài, giới hạn phạm vi đề tài nghiên cứu, kết dự kiến đạt ý nghĩa đề tài lựa chọn CHƯƠNG 2: KHẢO SÁT THỰC TRẠNG: Khảo sát thực trạng chủ thể đề tài hệ thống phần mềm, từ đưa yêu cầu mà hệ thống cần đáp ứng CHƯƠNG 3: KIẾN THỨC NỀN TẢNG: Nêu lý thuyết trọng tâm đề tài: Giới thiệu sở lý thuyết ngôn ngữ thiết kế web HTML, CSS, ngơn ngữ lập trình JavaScript,… số cơng cụ hỗ trợ thư viện Jquery, fontawe CHƯƠNG 4: ÁP DỤNG KIẾN THỨC ĐÃ HỌC XÂY DỰNG WEBSITE: Sử dụng HTML, CSS, JAVACRIP để xây dựng nên phần website demo hình ảnh phần website làm CHƯƠNG 5: TỔNG KẾT: CHƯƠNG 2: KHẢO SÁT THỰC TRẠNG 2.1 Khảo sát thực trạng: Cửa hàng kinh doanh quần áo, bên cạnh việc bán sản phẩm thị trường, cửa hàng cần phải lưu tâm đến vấn đề khác kiểm tra số lượng hàng tồn, phân loại sản phẩm, lưu hóa đơn Đối với danh mục sản phẩm bao gồm nhiều sản phẩm khác sản phẩm thuộc danh mục sản phẩm Đơn đặt hàng có nhiều sản phẩm sản phẩm có nhiều đơn đặt hàng Khách hàng đến mua cửa hàng chọn lựa nhiều mặt hàng, nhân viên tư vấn khách hàng có nhu cầu tìm kiếm theo u cầu đó(như màu sắc, kích thước ) hay sản phẩm cụ thể Dựa vào đó, lần khách hàng tốn hóa đơn mua hàng, vào loại mặt hàng kinh doanh cửa hàng, chủ cửa hàng tiến hành kiểm tra số lượng hàng tồn, tốn hóa đơn cần lưu lại đơn mua hàng bao gồm: Số hóa đơn, ngày nhập, tên khách hàng, tổng tiền hóa đơn Những thơng tin chi tiết hóa đơn như: Số hóa đơn, số sản phẩm, số lượng tiền phải trả để lưu trữ lại cần Sau đó, cửa hàng phải liên tục cập nhật lại thông tin cho sản phẩm để kiểm sốt số lượng sản phẩm cịn lại sản phẩm nhập thêm Chủ cửa hàng dựa vào số sản phẩm, tên sản phẩm để tìm kiếm thơng tin sản phẩm lúc cập nhật sản phẩm, sản phẩm tạo loại sản phẩm Các danh mục sản phẩm gồm có: Số danh mục sản phẩm, tên danh mục sản phẩm, mô tả Bên cạnh việc lưu lại thông tin sản phẩm đơn hàng cửa hàng Ta cần lưu lại số thông tin cần thiết khách hàng nhà cung cấp cửa hàng như: Họ tên khách hàng/nhà cung cấp, số điện thoại, địa chỉ, để tiện cho việc quản lý cửa hàng hiệu Với khách hàng mua hàng thường xuyên có ưu đãi tặng thẻ vip, nên lưu thêm thơng tin khác ngày sinh, Ngoài ra, cung cấp email, số điện thoại để khách hàng liên hệ cần thiết( phản hồi chất lượng sản phẩm, thông báo sản phẩm có vấn đề, yêu cầu đổi - trả, ) Cửa hàng lưu lại thơng tin đó, để kiểm kê kho, tiến hành đổi -trả với nhà cung cấp hay thông báo với nhà cung cấp vấn đề sản phẩm, tính doanh thu cửa hàng, 2.2 Yêu cầu đề tài: Yêu cầu chức năng: Khách hàng: có chức người mua hàng: - Xem sản phẩm chi tiết sản phẩm - Tìm kiếm sản phẩm theo từ khóa cần tìm - Cập nhật giỏ hàng đặt hàng - Đăng ký hệ thống để nhận ưu đãi lưu trữ thông tin cho lần mua hàng sau - Quản lý bình luận, đơn hàng Quản trị viên: quản trị hệ thống: - Quản lý thành viên nhà cung cấp - Quản lý danh mục sản phẩm - Quản lý đánh giá - Quản lý đơn mua hàng Thiết lập quyền giao diện hiển thị với quyền tương ứng Yêu cầu hệ thống: Giao diện thân thiện, dễ nhìn, màu sắc khơng đối lập Có khả cập nhật, thêm, xóa dễ dàng Có khả tra tìm kiếm nhanh chóng Thơng tin cập nhật chỉnh sửa thường xuyên An toàn, bảo mật liệu 2.3 Mục đích đề tài: Mục tiêu website giới thiệu quảng bá cửa hàng Cung cấp sản phẩm quần áo thời trang mốt Khách hang biết thơng tin sản phẩm như: Tên sản phẩm, giá cả, xuất xứ… Ngoài website cịn nhằm mục đích giới thiệu rộng cho nhiều khách hang biết cửa hang, thu hẹp khoảng cách xa gần xa gần giải vấn đề đường xa việc lại khó khan hay tắc nghẽn giao thông… Làm cho việc kinh doanh khách hang ngày phát triển CHƯƠNG 3: KIẾN THỨC NỀN TẢNG 3.1 Cơ sở lý thuyết: 3.1.1 Phân tích thiết kế hệ thống: Định nghĩa: Phân tích thiết kế hướng đối tượng(OOAD) giai đọan phát triển mơ hình xác súc tích vấn đề, có thành phần đối tượng khái niệm đời thực, dễ hiểu người sử dụng UML: UML(viết tắt Unified Modeling Language) ngôn ngữ mơ hình hố hợp dùng để đặc tả, trực quan hóa tư liệu hóa phần mềm hướng đối tượng, có phần bao gồm ký hiệu hình học, phương pháp hướng đối tượng sử dụng để thể miêu tả thiết kế hệ thống Hình 3.1 Minh họa UML 1 Cách xây dựng mơ hình UML phù hợp cho việc mô tả hệ thống thông tin cấu trúc hoạt động Cách tiếp cận theo mơ hình UML giúp ích nhiều cho người thiết kế thực hệ thống thông tin, người sử dụng UML tạo nhìn tổng quan đầy đủ hệ thống thơng tin dự định triển khai, cách nhìn tổng quan giúp nắm bắt trọn vẹn yêu cầu người dùng, phục vụ từ giai đoạn phân tích đến thiết kế, kiểm tra sản phaản ứng dụng công nghệ thông tin Các mơ hình hướng đối tượng lập sở cho việc ứng dụng chương trình tự động sinh mã ngơn ngữ lập trình hướng đối tượng C++, Java Phương pháp mô hình hữu ích lập trình hướng đối tượng, mơ hình sử dụng bao gồm Mơ hình đối tượng(mơ hình tĩnh) mơ hình động 3.1.2 Ngơn ngữ HTML CSS: Định nghĩa HTML: HTML(Hypertext Markup Language) mã dùng để xây dựng nên cấu trúc nội dung trang web Ví dụ, nội dung cấu thành loạt đoạn văn, danh sách liệt kê, sử dụng hình ảnh bảng biểu Tính HTML5: - Phần tử dùng để hiển thị cỡ nhỏ, ký hiệu trình bao bọc xác cho thơng tin - Việc sử dụng dấu ngoặc kép phụ thuộc vào người dùng - Cho phép người dùng chỉnh sửa văn có phần tử, bao gồm phần tử - HTML5 loại bỏ hồn tồn thuộc tích - Cung cấp đầu vào email cho phép hướng dẫn trình duyệt cho phép chuỗi xác nhận địa email - Dễ dàng tạo trượt với phạm vi đầu vào Định nghĩa CSS: CSS (viết tắt Cascading Style Sheets) dùng để miêu tả cách trình bày tài liệu viết ngôn ngữ HTML XHTML CSS hiểu cách mà chúng thêm kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho tài liệu Web Lợi ích CSS với trang web HTML: Hình 3.2 Lợi ích việc sử dụng CSS trang web HTML CSS có tác dụng là: - Hạn chế tối thiểu việc làm rối HTML trang Web thẻ quy định kiểu dáng(chữ đậm, in nghiêng, ), giúp mã nguồn trang Web trở nên gọn gàng - Tách biệt nội dung trang Web định dạng hiển thị, dễ dàng cho việc thay đổi - Tạo kiểu dáng áp dụng cho nhiều trang Web, tránh lặp lại việc định dạng cho trang Web giống 3.1.3 Ngơn ngữ lập trình JavaScript: Định nghĩa JavaScript: JavaScript ngơn ngữ lập trình HTML ứng dụng Web Nó nhẹ sử dụng phổ biến phần trang web, mà thi hành chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng Ưu điểm JavaScript: - Tiêt kiệm băng thông máy chủ: Javascript sử dụng thiết kế website giúp tiết kiệm băng thông máy máy chủ vô tốt chúng chạy trực tiếp máy người dùng Các dịng Script thực thi trình duyệt người dùng để gia tăng hiệu suất, kéo dài tuổi thọ máy chủ tiết kiệm diện tích băng thơng - Linh hoạt vận hành, tương thích tốt: Để thực thi, trình duyệt web cần tải file JavaScript máy chủ từ tên miền riêng biệt nhúng thẳng vào file HTML chạy mà không cần tải thêm Javascript chạy hầu hết trình duyệt phổ biến Cốc Cốc, Chrome, Firefox, Safari Khơng thế, hầu hết trình duyệt web có tích hợp sẵn trình thơng dịch ngơn ngữ JavaScript, đảm bảo người dùng sử dụng mà khơng cơng tải trình duyệt, giảm tỷ lệ thực thi chức JavaScript Điều vô tiện lợi cho người dùng mạng - Dễ dàng kiểm tra, xử lý vấn đề: Với lợi có nhiều trình duyệt hỗ trợ nên việc kiểm tra xử lý vấn đề dễ dàng Đa số trình duyệt web có cài sẵn cơng cụ xử lý lỗi Javascript bảng điều khiển trình duyệt Javascript sở hữu cấu trúc dễ đọc với cácnguyên tắc rõ ràng nên việc xác định gỡ lỗi trở nên đơn giản nhiều - Nâng cao trải nghiệm người dùng: Website sử dụng ngơn ngữ lập trình giúp thu hút người dùng tính hay ho, hình ảnh sinh động hấp dẫn, chức lướt tương tác nhanh nhạy Nhờ tính đó, người dùng cảm thấy thoải mái, thích thú tin dùng trang web 3.1.4 Hệ quản trị sở liệu: Định nghĩa Cơ sở liệu: Cơ sở liệu (Database) tập hợp liệu có tổ chức, thường lưu trữ truy cập điện tử từ hệ thống máy tính Khi sở liệu phức tạp hơn, chúng thường phát triển cách sử dụng kỹ thuật thiết kế mơ hình hóa thức 3.2 Cơng cụ sử dụng: 3.2.1 Thư viện Jquery: Giới thiệu Jquery: JQuery thư viện xây dựng Javascript Chúng tạo với mục đích hỗ trợ lập trình viên giải khó khăn sử dụng Javascript JQuery tích hợp từ nhiều module chuyên biệt, bao gồm module hiệu ứng, đến module truy cấp selector Tính ưu việt: - Xử lý thao tác DOM: Công cụ lựa chọn DOM để duyệt, chỉnh sửa nội dung cách dùng Selected mã nguồn mở - Hỗ trợ AJAX: Jquery đem lại khả tương tác tốt với máy chủ, cập nhật nội dung cách tự động cho đoạn code viết AJAX - Hỗ trợ tạo hiệu ứng động: Jquery giúp tạo hiệu ứng động webdsite cách nhanh chóng dễ dàng - Xử lý kiện: Cơng cụ hỗ trợ tương tác website với người truy cập dựa nguyên lý xử lý kiện không gây ảnh hưởng đến mã HTML - Tương thích hầu hết trình duyệt, tảng đại: Jquery tương thích với gần tất trình duyệt từ Chrome, Android, Firefox, IOS… 3.2.2 Thư viện fontawe: Giới thiệu thư viện fontawe: Trong layout website thường có ICON giúp website đẹp thân thiện hơn, ngồi ICON cịn có tác dụng điều hướng người dùng Trước để tạo ICON ta phải thực cắtchúng từ file PSD dùng CSS để gán background dùng thẻ img để đưa ICON vào Tuy nhiên có giải pháp khác sử dụng Symboy Font (font chữ kiểu ký hiệu) Font Awesome hoạt động hầu hết trình duyệt đại hay Tuy nhiên với phiên cũ IE7 khơng hỗ trợ IE7 coi chết Nếu bạn sử dụng Bootstrap để xây dựng CSS cho website dễ dàng nhận thấy cần thiết Font Awesome chúng kết hợp với tốt tạo sản phẩm bắt mắt Điểm mạnh fontawe: Nếu ta sử dụng hình ảnh tốc độ load website chậm ta phải load mơt hình ảnh nặng nề Nhưng với Font Awesome ban cần load file CSS, file Font load lần nên tốc độ cải thiện đáng kể Một hình ảnh khơng thể thay đổi màu, kích thước chúng Riêng với kích thước ta sử dụng CSS để thiết lập chiều rộng, chiều cao, làm chất lượng hình ảnh bị ảnh hưởng Nhưng với Font Awesome bạn dễ dàng thay đổi kích thước màu icon thuộc tính CSS thơng thường font chữ color, fontsize hay thuộc tính CSS khác dành cho Font chữ Font Awesome sử dụng linh hoạt giúp lập trình viên khơng q nhiều thời gian để lấy icons từ file PSD nhiều điểm mạnh CHƯƠNG 4: ÁP DỤNG KIẾN THỨC ĐÃ HỌC ĐỂ XÂY DỰNG WEBSITE: 4.1 Xây dựng phần trang chủ: Công nghệ sử dụng HTML, CSS, JAVASCRIP, cho phép người dung truy cập vào tất trang khác để mua sắm, tìm kiếm chuyển đồ ưu thích vào giỏ hang Sau hình ảnh demo: 4.2 Xây dựng trang khác: 2.1 Xây dựng trang bán đồ nữ: 4.2.1 Xây dựng trang bán đồ nam: 4.2.3 Trang giỏ hang toán: