Trong thời địa ngày nay, thời đại mà công nghệ thông tin càng ngày càng phát triển bên cạnh với thị trường thương mại điện tử đang ngày càng phát triển, cạnh tranh hơn, khốc liệt hơn thì việc có một có một website để quảng bá công ty hay một cá nhân không còn là điều xa xỉ nữa. Thông qua việc tiếp cận với website khách hàng có thể lựa chọn những sản phẩm mà mình cần một cách nhanh chóng và hiệu quả hơn.
Chương 1: Giới Thiệu Về Đề Tài Trong thời địa ngày nay, thời đại mà công nghệ thông tin ngày phát triển bên cạnh với thị trường thương mại điện tử ngày phát triển, cạnh tranh hơn, khốc liệt việc có có website để quảng bá công ty hay cá nhân khơng cịn điều xa xỉ Thơng qua việc tiếp cận với website khách hàng lựa chọn sản phẩm mà cần cách nhanh chóng hiệu Ngoài việc đáp ưng nhu cầu mua hàng khách hàng, wibsite bán hàng cho Shop quảng bá sản phẩm tốt đến người tiêu dùng thông qua việc đăng sản phẩm ngày, hỗ trợ việc mua bán qua mạng cách nhanh chóng, hiệu quả, tiết kiệm chi phí, thời gian Giúp khách hàng lựa chọn cho sản phẩm ưng ý mà trước phải đến tận nơi để xem mua hàng, khách hàng xem mua trực tiếp website giúp Shop có lượng khách hàng tiếp cận ngày đông nhanh với phương thức bán hàng truyền thống Với lý nêu hướng dẫn, giúp đỡ tận tình giảng viên Thầy Võ Tấn Dũng tạo động lực nhiều để nhóm em chọn để tài: “Xây dụng website bán hàng điện tử cho Ahiho Shop” làm đề tài đồ án mơn học Lập Trình Web Chương 2: Các Cơng Nghệ Sử Dụng HTML a Html gì? HTML viết tắt chữ HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản), dùng để tạo tài liệu thị trình duyệt HTML gọi ngơn ngữ khơng giống ngơn ngữ kịch bản, ngơn ngữ lập trình (sử dụng kịch để thi hành tác vụ), ngôn ngữ đánh dấu (Markup) HTML lại sử dụng THẺ để xác định nội dung trang Cha đẻ HTML Tim Berners-Lee, người khai sinh World Wide Web chủ tịch World Wide Web Consortium (W3C – tổ chức thiết lập chuẩn môi trường Internet) Các thiết lập cấu trúc HTML vận hành phát triển World Wide Web Consortium (W3C) Bạn kiểm tra tình trạng ngôn ngữ lúc trang W3C’s website b Html hoạt động sao: Khi bạn gõ tên miền, trình duyệt mà bạn sử dụng (chẳng hạn Chrome) kết nối tới máy chủ web, cách dùng địa IP, vốn thấy cách phân giải tên miền (DNS) Máy chủ web máy tính kết nối tới internet nhận yêu cầu tới trang web từ trình duyệt bạn Máy chủ sau gửi trả thơng tin trình duyệt bạn, tài liệu HTML, để hiển thị trang web! Một tập tin HTML bao gồm phần tử HTML lưu lại đuôi mở rộng html htm Khi tập tin HTML hình thành, việc xử lý trình duyệt web đảm nhận Trình duyệt đóng vai trò đọc hiểu nội dung HTML từ thẻ bên chuyển sang dạng văn đánh dấu để đọc, nghe hiểu (do bot máy tính hiểu) Bạn xem chúng cách sử dụng trình duyệt web (như Google Chrome, Safari, hay Mozilla Firefox) Trình duyệt đọc files HTML xuất nội dung lên internet cho người đọc xem Thơng thường, trung bình web chứa nhiều trang web HTML, ví dụ như: trang home, trang product, trang blog… c Ưu nhược điểm: Ưu điểm: • Được sử dụng rộng rãi, có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng lớn Học đơn giản dễ hiểu Mã nguồn mở hồn tồn miễn phí Markup gọn gàng đồng Tiêu chuẩn giới vận hành World Wide Web Consortium (W3C) • Dễ dàng tích hợp với ngơn ngữ backend PHP, Python… • • • • Khuyết điểm: Được dùng chủ yếu cho web tĩnh Đối với tính động update hay realtime thời gian thực, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP • Một số trình duyệt chậm hỗ trợ tính • CSS a Css gì? CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (HTML) Nói ngắn gọn ngôn ngữ tạo phong cách cho trang web Bạn hiểu đơn giản rằng, HTML đóng vai trò định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng… CSS giúp thêm style vào phần tử HTML đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… b Bố cục đoạn Css: Bố cục CSS thường chủ yếu dựa vào hình hộp hộp chiếm khoảng trống trang bạn với thuộc tính như: Padding: Gồm khơng gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản) • Border: Là đường liền nằm bên ngồi phần đệm • Margin: Là khoảng cách xung quanh bên ngồi phần tử • c Tại sử dụng Css? • Giải vấn đề lớn Trước có CSS, thẻ phơng chữ, màu sắc, kiểu nền, xếp phần tử, đường viền kích thước phải lặp lại trang web Đây trình dài tốn thời gian cơng sức Ví dụ: Nếu bạn phát triển trang web lớn nơi phông chữ thông tin màu thêm vào trang, trở thành trình dài tốn CSS tạo để giải vấn đề Đó khuyến cáo W3C Nhờ CSS mà source code trang Web tổ chức gọn gàng hơn, trật tự Nội dung trang web tách bạch việc định dạng hiển thị Từ đó, trình cập nhập nội dung dễ dàng hạn chế tối thiểu làm rối cho mã HTML • Tiết kiệm nhiều thời gian Định nghĩa kiểu CSS lưu tệp CSS bên ngồi thay đổi tồn trang web cách thay đổi tệp Sử dụng CSS giúp bạn không cần thực lặp lại mơ tả cho thành phần Từ đó, bạn tiết kiệm tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm sốt dễ dàng lỗi khơng đáng có CSS tạo nhiều style khác nên áp dụng với nhiều trang web, từ giảm tránh việc lặp lại định dạng trang web giống • Cung cấp thêm thuộc tính CSS cung cấp thuộc tính chi tiết HTML để định nghĩa giao diện trang web CSS giúp người dùng nhiều styles trang web HTML nên khả điều chỉnh trang bạn trở nên vô hạn JAVASCRIPT a Javascript gì? JavaScript ngơn ngữ lập trình HTML 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 JavaScript biết đến với tên Mocha, sau LiveScript, cơng ty Netscape đổi tên thành JavaScript, phổ biến tượng Java lúc JavaScript xuất lần đầu Netscape 2.0 năm 1995 với tên LiveScript Core đa ngôn ngữ nhúng vào Netscape, IE, trình duyệt khác b Các lợi javascrip: Sự tương tác Server hơn: Bạn xác nhận đầu vào (input) người sử dụng trước gửi trang tới Server Điều làm tiết kiệm lưu lượng tải Server, nghĩa Server bạn tải Phản hồi tới khách truy cập: Họ chờ cho trang web tải lại để thấy xem họ qn nhập Khả tương tác tăng lên: Bạn tạo giao diện mà phản ứng lại người sử dụng rê chuột qua chúng kích hoạt chúng thơng qua bàn phím Giao diện phong phú hơn: Bạn sử dụng JavaScript để bao gồm mục thành phần Drag Drop (DnD) trượt (Slider) để cung cấp Rich Interface (Giao diện giàu tính năng) tới site khách truy cập bạn c Hạn chế Javascript: Chúng ta đối xử JavaScript ngơn ngữ chương trình thức (full-fledged) Nó thiếu tính quan trọng sau: Client-side JavaScript không cho phép đọc ghi file, lý bảo mật JavaScript khơng sử dụng cho việc kết nối mạng ứng dụng khơng có hỗ trợ có sẵn JavaScript khơng có khả đa luồng đa xử lý C# a C# gì? C# (hay C sharp) ngơn ngữ lập trình đơn giản, phát triển đội ngũ kỹ sư Microsoft vào năm 2000 C# ngơn ngữ lập trình đại, hướng đối tượng xây dựng tảng hai ngôn ngữ mạnh C++ Java b Các đặc điểm ngơn ngữ C#: Hiện đại dễ dàng C# ngôn ngữ lập trình hướng đối tượng đơn giản, đại Mục đích C # phát triển ngơn ngữ lập trình khơng dễ học mà cịn hỗ trợ chức đại cho loại hình phát triển phần mềm Nếu bạn nhìn vào lịch sử ngơn ngữ lập trình tính chúng, ngơn ngữ lập trình thiết kế cho mục đích cụ thể để giải nhu cầu cụ thể thời điểm Tuy nhiên ngơn ngữ lập trình C# thiết kế cho doanh nghiệp để xây dựng tất loại phần mềm cách sử dụng ngơn ngữ lập trình Mã nguồn mở nhanh C# ngơn ngữ lập trình mã nguồn mở NET Foundation, quản lý điều hành độc lập với Microsoft Thông số kỹ thuật ngôn ngữ C#, trình biên dịch cơng cụ liên quan dự án mã nguồn mở Github Trong thiết kế tính ngơn ngữ C# dẫn dắt Microsoft, cộng đồng mã nguồn mở tích cực việc phát triển cải tiến ngôn ngữ C # nhanh so với số ngơn ngữ lập trình cấp cao khác C# có nhiều cải tiến hiệu suất Đa tảng C # ngơn ngữ lập trình đa tảng Bạn xây dựng ứng dụng NET triển khai tảng Windows, Linux Mac An tồn hiệu C# ngơn ngữ an tồn C# khơng cho phép chuyển đổi kiểu liệu dẫn đến liệu vấn đề khác C# cho phép nhà phát triển viết code an toàn C# tập trung vào việc viết code hiệu Đa Chúng ta sử dụng C# để xây dựng ứng dụng phần mềm đại ngày C# sử dụng để phát triển tất loại ứng dụng bao gồm ứng dụng Windows, thành phần thư viện, Service API, ứng dụng Web, ứng dụng di động, ứng dụng đám mây video game Tiến hóa C# 8.0 phiên C# Nếu bạn nhìn vào lịch sử ngơn ngữ C#, C# phát triển nhanh ngôn ngữ khác Dưới quản lý Microsoft hỗ trợ mạnh mẽ từ cộng đồng C # ban đầu thiết kế để viết ứng dụng máy khách Windows, ngày nay, C# làm nhiều thứ ứng dụng console, ứng dụng đám mây phần mềm học máy đại BOOTSTRAP Bootstrap cho phép trình thiết kế website diễn nhanh chóng dễ dàng dựa thành tố sẵn có typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính lợi ích mang lại cho lập trình viên Bootstrap nhé! Bootstrap sưu tập miễn phí mã nguồn mở cơng cụ dùng để tạo mẫu webiste hoàn chỉnh Với thuộc tính giao diện quy định sẵn kích thước, màu sắc, độ cao, độ rộng…, designer sáng tạo nhiều sản phẩm mẻ tiết kiệm thời gian làm việc với framework trình thiết kế giao diện website Chương 3: Thiết Kế CSDL Sơ đồ Erd Hình Ảnh sơ đồ Erd Lược đồ quan hệ - Admin (UserAdmin, UserName, Email, Password) - ChiTietHinhAnh (MaHinhAnh, MaSP, MaChiTietHinhAnh) - GiamGia (MaGiamGia, TenGiamGia) - XuatXu (MaXuatXu, TenXuatXu) - SanPham (MaSP, MaLoai, MaThuongHieu, MaXuatXu, MaGiamGia, TenSP, HinhAnh, Gia, Mota, Soluong, Size, hot_product) - Loai (MaLoai, TenLoai) - ThuongHieu (MaThuongHieu, TenThuongHieu) - ChiTietHoaDon (MaChiTietHoaDon, MaHD, MaSP, Gia, Soluong) - HoaDon (MaHD, user_id, Tong, Thanhtoan, DiaChi, SDT, Hoten, NgayLap) - AspNetUsers (id, email, username, name, phone) Sơ đồ tổng quát Hình Ảnh sơ đồ tổng quát Sơ đồ quản lý tổng quát Hình Ảnh sơ đồ quản lý tổng quát Sơ đồ quản lý đăng ký/đăng nhập Hình Ảnh sơ đồ quản lý đăng ký đăng nhập Sơ đồ quản lý website Hình Ảnh sơ đồ quản lý website Sơ đồ quản lý đặt hàng Hình Ảnh sơ đồ quản lý đặt hàng Trang giỏ hàng Nếu người dùng chưa đăng nhập khơng truy cập vào trang giỏ hàng, giỏ hàng theo chân khách hàng tới trang website, khách hàng thoải mái, tự mua sắm Nếu khách hàng khơng mua hàng không đặt hàng Trang giỏ hàng nơi hiển thị số lượng hàng mà khách mua, tổng tiền hàng Nếu khách hàng đổi ý khơng muốn mua hàng khách hàng xóa khỏi giỏ hàng Hình 11 Ảnh trang giỏ hàng Trang toán Khi khách hàng ấn nút toán, đơn hàng gửi đến trang tốn để khách hàng nhập thơng tin cần thiết như: họ, tên, số điện thoại, email, địa Khi ấn nút đặt hàng trang tốn, chủ shop kiểm tra thơng tin đơn hàng, kiểm tra địa chị đặt hàng trang admin Sau đặt hàng thành công trả trang chủ reset lại giỏ hàng Thanh toán trực tuyến có dùng thư viện paypal ASP.NET MVC5 tạo tài khoản sandbox thử nghiệm người bán người mua có sẵn tiền, tốn xong vào tài khoản người bán người mua để xem thay đổi số dư Hình 12 Ảnh trang tốn Hình 13 Ảnh tốn Paypal Trang tìm kiếm Khách hàng tìm kiếm sản phẩm trang website chuyển đến trang tìm kiếm kèm theo thơng tin sản phẩm mà khách hàng muốn tìm kiếm Khách hàng tìm kiếm theo tên sản phẩm, trả kết gần Nếu lúc bạn search tìm kiếm sản phẩm khơng tìm thấy sẻ trả danh sách trống Hình 14 Ảnh trang tìm kiếm Trang About Us Khách hàng muốn tìm hiểu thêm công ty muốn liên hệ hợp tác tham khảo trang Về Chúng Tơi Hình 15 Ảnh trang About Us Trang Liên hệ Khách hàng liên lạc với thông qua địa google map gọi trực tiếp gửi mail cho địa bên Chúng cam đoan ln ln lắng nghe ý kiến góp ý từ bạn Hình 16 Ảnh trang Liên hệ 10 Trang Admin Admin cung cấp tài khoản admin nhất, muốn đổi tải khoản hay mật phải liên hệ với Developers Admin quản lý thông tin danh mục, thông tin sản phẩm, thông tin sản phẩm, thơng tin thương hiệu thêm, xóa, sửa thơng tin (Ngoại trừ thơng tin khách hàng hóa đơn) Admin website xác nhận đơn hàng hợp lệ hủy đơn hàng trang admin, sau chủng bị đơn hàng vào giao cho khách hàng Hình 17 Ảnh trang admin Hình 18 Ảnh trang danh mục Hình 19 Ảnh trang thương hiệu Hình 20 Ảnh trang khuyến Hình 21 Ảnh trang người dùng Hình 22 Ảnh trang tạo sản phẩm Chuong 5: Kết Luận Sau hồn thành đồ án mơn học Lập Trình Web nhóm chúng em rút nhiều kinh nghiệm trình làm, kiến thức html, css, javascrpt, c#, bootstrap… nhóm chúng em phát triển lên nhiều so với lúc đầu, chắn sẻ hành trang đáng có mà tụi em tích lũy mơi trường đại học, không kiến thức chuyên môn mà tụi em cải thiện nhiều kỹ mền làm việc nhóm Chúng em hợp tác phân chia công việc thời gian làm việc để công việc đạt hiệu tốt nhất, quan trọng tình cảm bạn bè ngày thân thiết hơn, bên cạnh nhóm cịn biết khai thác điểm mạnh khắc phục điểm yếu thành viên nhóm Nhóm chúng em cảm ơn nhiều thầy tạo hội cho chúng em có hội làm việc nhóm với Chức đạt được: - Tìm kiếm theo danh mục, xuất xứ, thương hiệu, khuyến - Tìm kiếm sản phẩm theo từ khóa người dùng nhập vào - Phân trang - Tính giỏ hàng (thêm, sửa, xóa) - Đăng kí - Đăng nhập - Quản lý sản phẩm - Quản lý danh mục - Quản lý thương Hiệu - Quản lý xuất xứ - Quản lý sale - Quản lý người dùng - Quản lý hóa đơn - Thanh tốn trực tiếp - Thanh tốn trực tuyến - Bình luận Tài Liệu Tham Khảo: https://www.w3schools.com/html/default.asp https://www.w3schools.com/css/default.asp https://www.w3schools.com/js/default.asp https://www.w3schools.com/bootstrap/bootstrap_ver.asp https://www.w3schools.com/cs/index.php https://www.youtube.com/watch? v=M0jdFS4ZyEk&list=PLRhlTlpDUWsyK1TIsewrQ7WwC7QkCSCPD https://www.c-sharpcorner.com/article/list-of-users-with-roles-in-mvc-asp-net-identity/ Source Code : 096748482(zalo) ... trang giỏ hàng, giỏ hàng theo chân khách hàng tới trang website, khách hàng thoải mái, tự mua sắm Nếu khách hàng khơng mua hàng khơng đặt hàng Trang giỏ hàng nơi hiển thị số lượng hàng mà khách... tiền hàng Nếu khách hàng đổi ý khơng muốn mua hàng khách hàng xóa khỏi giỏ hàng Hình 11 Ảnh trang giỏ hàng 6 Trang toán Khi khách hàng ấn nút toán, đơn hàng gửi đến trang tốn để khách hàng. .. dùng đăng ký thành viên website, tên đăng nhập có báo lỗi đăng ký, email không định dạng báo lỗi cho khách hàng mật không trùng khớp báo lỗi cho khách hàng Khi khách hàng đăng ký thành cơng trả