Trong những năm gần đây, ứng dụng CNTT về quản lý web đang phát triển mạnh mẽ, giúp cho các cửa hàng kiếm được lợi nhuận nhiều hơn nhờ vào các trang website bán hàng nhanh. Nên nhóm chúng em quyết định chọn đề tài xây dựng trang website bán hàng công nghệ . Tìm hiểu kĩ thuật lập trình trên ASP.NET MVC5.Tìm hiểu các công nghệ hỗ trợ như: HTML5, CSS3, Ajax, Jquery, Web Sevice…Tìm hiểu về ngôn ngữ và kiến thức tương tác CSDL (LINQ to SQL và Entity FrameWork).Tìm hiểu về thanh toán trực tuyến vào web để cung cấp chức năng thanh toán online qua các thẻ…Tìm hiểu về Domain Hosting và triển khai vận hành Website trên môi trường Internet.Xây dựng trang web “chuẩn Seo”.Tìm hiểu GoogleMapAPI để đánh dấu địa điểm của website trên bản đồ, chỉ dẫn đường đi từ vị trí của khách hàng đến cửa hàng của website, giúp thân thiện với người dùng hơn.Tìm hiểu Google API để đăng nhập bằng gmail cho trang website.Tìm hiểu FB API để đăng nhập bằng FB làm coment, like, share cho web, ...Tìm hiểu Websivice để web cung cấp các thành phần ứng dụng như chuyển đổi tiền tệ, báo cáo thời tiết…
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TPHCM KHOA CÔNG NGHỆ THÔNG TIN ***** ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB BÁN HÀNG CÔNG NGHỆ GVHD: Nguyễn Thúy Loan SVTH: NGUYỄN XUÂN PHÚC 1311070709 HỒ VĂN QUANG 1311071546 NGUYỄN TRỌNG QUÝ 1311070905 TPHCM, Ngày 15/05/2017 MỤC LỤC CHƯƠNG I: TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU 1.1 Giới thiệu đề tài: Trong năm gần đây, ứng dụng CNTT quản lý web phát triển mạnh mẽ, giúp cho cửa hàng kiếm lợi nhuận nhiều nhờ vào trang website bán hàng nhanh Nên nhóm chúng em định chọn đề tài xây dựng trang website bán hàng công nghệ Với mong muốn giúp cho cửa hàng kiếm thêm thu nhập nhiều nhờ vào việc bán online Ngoài ra, website bán hàng thân thiện giúp cho khách hàng mua thuận lợi hơn, khách hàng mua hàng công nghệ mà thích không cần tốn nhiều thời gian để cửa hàng mua Đây điều tuyệt khách hàng Một nhà phát triển phần mềm hàng đầu giới lĩnh vực Microsoft, họ cho đời mô hình ASP.NET MVC5 hỗ trợ người phát triển ứng dụng web NET Framework có tích hợp công nghệ LINQ với Entity Framework hỗ trợ làm việc với loại CSDL Do đó, nhóm sinh viên chúng em chọn đề tài “Ứng dụng công nghệ phát triển web ASP.NET MVC5, Xây dựng Website bán hàng công nghệ ” để thực đồ án lập trình web đáp ứng theo chương trình đào tạo Trường, đồng thời mong muốn góp phần đẩy đưa ứng dụng CNTT vào Website việc bán hàng công nghệ hoàn thiện thân thiện giúp cho khách hàng hài lòng vào Website bán hàng công nghệ nhóm chúng em 1.2 Mục đích nghiên cứu: Học kiến thức Tìm hiểu kĩ thuật lập trình ASP.NET MVC5 Tìm hiểu công nghệ hỗ trợ như: HTML5, CSS3, Ajax, Jquery, Web Sevice… Tìm hiểu ngôn ngữ kiến thức tương tác CSDL (LINQ to SQL Entity FrameWork) Cách điều khiển liệu(Controller) Tìm hiểu toán trực tuyến vào web để cung cấp chức toán online qua thẻ… Tìm hiểu Domain Hosting triển khai vận hành Website môi trường Internet Xây dựng trang web “chuẩn Seo” Tìm hiểu GoogleMapAPI để đánh dấu địa điểm website đồ, dẫn đường từ vị trí khách hàng đến cửa hàng website, giúp thân thiện với người dùng Tìm hiểu Google API để đăng nhập gmail cho trang website Tìm hiểu FB API để đăng nhập FB làm coment, like, share cho web, Tìm hiểu Websivice để web cung cấp thành phần ứng dụng chuyển đổi tiền tệ, báo cáo thời tiết… 1.3 Mục tiêu đề tài: Vì website bán hàng, nên điều nhóm chúng em trọng tính thân thiện với người dùng, giao diện đẹp mắt, cách trình bày sản phẩm chi tiết sản phẩm, giá hợp lý cách để gây ấn tượng tốt với khách hàng Cả khách hàng nhà quản lý cảm thấy thoải mái sử dụng trang web đẹp dễ truy cập Người dùng (User): • Tham quan trang web • Tìm kiếm lựa chọn sản phẩm cần mua • Xem chi tiết sản phẩm • Xem quảng cáo • Đăng ký, đăng nhập phục vụ cho việc mua bán online • Thực việc mua hàng toán trực tuyến • Gửi ý kiến phản hồi, bình luận sản phẩm qua facebook chi tiết sản phẩm • Gửi liên hệ cho công ty TTBShop • Xem nơi bán shop thông qua Google Map trang liên hệ, giới thiệu Người quản trị (Admin): Quản lý trang web thông qua tài khoản Admin rõ ràng, dễ sử dụng, bảo mật cao Quản lý tất sản phẩm cách dễ dàng Xem sản phẩm danh sách sản phẩm danh sách sản phẩm bán chạy Thêm loại sản phẩm, màu cho loại sản phẩm Kiểm tra xử lý đơn đặt hàng Theo dõi phản hồi ý kiến khách hàng CHƯƠNG II: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT 2.1 Tổng quan ASP.NET: 2.1.1 Giới thiệu ASP.NET: Đầu năm 2002, Microsoft giới thiệu kỹ thuật lập trình Web mẻ với tên gọi ban đầu ASP+, tên thức sau ASP.Net Với ASP.Net, không cần đòi hỏi bạn phải biết tag HTML, thiết kế web, mà hỗ trợ mạnh lập trình hướng đối tượng trình xây dựng phát triển ứng dụng Web ASP.Net kỹ thuật lập trình phát triển ứng dụng web phía Server (Server-side) dựa tảng Microsoft Net Framework Hầu hết, người đến với lập trình web bắt đầu tìm hiểu kỹ thuật phía Client (Client-side) như: HTML, Java Script, CSS (Cascading Style Sheets) Khi Web browser yêu cầu trang web (trang web sử dụng kỹ thuật clientside), Web server tìm trang web mà Client yêu cầu, sau gởi cho Client Client nhận kết trả từ Server hiển thị lên hình ASP.Net sử dụng kỹ thuật lập trình phía server hoàn toàn khác, mã lệnh phía server (ví dụ: mã lệnh trang ASP) biên dịch thi hành Web Server Sau Server đọc, biên dịch thi hành, kết tự động chuyển sang HTML/JavaScript/CSS trả cho Client Tất xử lý lệnh ASP.Net thực Server đó, gọi kỹ thuật lập trình phía server ASP.NET Microsoft phát triển qua nhiều phiên từ ASP.NET 1.0, 1.1, 2.0 gần phiên ASP.NET 2.1.2 Tìm hiểu mô hình lập trình web MVC ASP.NET: Mô hình MVC (viết tắt chữ đầu từ Model - View - Controller) kiến trúc phần mềm hay mô hình thiết kế sử dụng kỹ thuật phần mềm (đặc biệt phát triển ứng dụng web) Nó giúp cho tổ chức ứng dụng (phân bố source code ứng dụng) thành phần khác Model, View Controller Mỗi thành phần có nhiệm vụ riêng biệt độc lập với thành phần khác Model: thành phần chứa tất nghiệp vụ logic, phương thức xử lý, truy xuất CSDL, đối tượng mô tả liệu Class, hàm xử lý Model giao nhiệm vụ cung cấp liệu cho CSDL lưu liệu vào kho chứa liệu Tất nghiệp vụ logic thực thi Model Dữ liệu vào từ người dùng thông qua View để kiểm tra Model trước lưu vào sở liệu Việc truy xuất, xác nhận lưu liệu phần Model View: View hiển thị thông tin cho người dùng ứng dụng giao nhiệm vụ cho việc nhận liệu vào từ người dùng, gởi yêu cầu người dùng đến điều khiển (Controller), sau nhận lại phản hồi từ điều khiển hiển thị kết cho người dùng Các trang HTML, JSP, thư viện thể file nguồn phần View Controller: Controller tầng trung gian Model View Controller giao nhiệm vụ nhận yêu cầu từ người dùng (phía máy khách) Một yêu cầu nhận từ máy khách thực chức logic thích hợp từ thành phần Model sau sinh kết cho người dùng thành phần View hiển thị ActionServlet, Action, ActionForm, struts-config.xml thành phần Controller Một ứng dụng web phát triển theo mô hình MVC, có nguyên lý hoạt động xử lý yêu cầu người dùng sau: - Khi có yêu cầu phát sinh từ người dùng (phía Client), yêu cầu gởi đến phía Server, Contronler tiếp nhận yêu cầu để xử lý - Bên Controller chứa nhiều phương thức (action), action tương ứng với yêu cầu cụ thể từ người dùng Controller lựa chọn action phù hợp với yêu cầu để xử lý Trong trình xử lý, Controller tương tác với Model để có liệu mà người dùng mong muốn - Sau Controller làm việc với model để có liệu theo yêu cầu, Controller gởi cho View thành phần Data Model, nhiệm vụ View chuyển Data Model nhận thành liệu ứng dụng gởi trả phía Client để hiển thị kết yêu cầu Hình 2.1: Mô hình MVC 2.2 Giới thiệu mô hình lập trình Web ASP.NET MVC5 ASP.NET MVC5 giúp cho tạo ứng dụng web áp dụng mô hình MVC thay tạo ứng dụng theo mẫu ASP.NET Web Forsm Nền tảng ASP.NET MVC có đặc điểm bật nhẹ (lightweight), dễ kiểm thử phần giao diện (so với ứng dụng Web Forms), tích hợp tính có sẵn ASP.NET Nền tảng ASP.NET MVC định nghĩa namespace System.Web.MVC phần name space System.Web MVC mẫu thiết kế (design pattern) chuẩn mà nhiều lập trình viên quen thuộc Một số loại ứng dụng web thích hợp với kiến trúc MVC Một số khác thích hợp với ASP.NET Web Forms chế postbacks Đôi có ứng dụng kết hợp hai kiến trúc • Tách bạch tác vụ ứng dụng (logic nhập liệu, business logic, logic giao diện), dễ dàng kiểm thử mặc định áp dụng hướng phát triển TDD Tất tính mô hình MVC cài đặt dựa Interface kiểm thử cách sử dụng đối tượng mocks, mock object đối tượng mô tính đối tượng thực ứng dụng Bạn kiểm thử unit-test cho ứng dụng mà không cần chạy Controller tiến trình ASP.NET, điều giúp unit test áp dụng nhanh chóng tiện dụng Bạn sử dụng tảng unit-testing tương thích với tảng • NET MVC tảng khả mở rộng (extensible) & khả nhúng (pluggable) Các thành phần ASP.NET MVC thiết kể để chúng thay cách dễ dàng dễ dàng tùy chỉnh Bạn nhúng thêm view engine, chế định tuyến cho URL, cách kết xuất tham số action-method thành phần khác ASP.NET MVC hỗ trợ việc sử dụng Dependency Injection (DI) Inversion of Control (IoC) DI cho phép bạn gắn đối tượng vào lớp cho lớp sử dụng thay buộc lớp phải tự khởi tạo đối tượng IoC quy định rằng, đối tượng yêu cầu đối tượng khác, đối tượng đầu lấy đối tượng thứ hai từ nguồn bên ngoài, ví dụ từ tập tin cấu hình Và nhờ vậy, việc sử dụng DI IoC giúp kiểm thử dễ dàng • ASP.NET MVC có thành phần ánh xạ URL mạnh mẽ cho phép bạn xây dựng ứng dụng có địa URL xúc tích dễ tìm kiếm Các địa URL không cần phải có phần mở rộng tên tập tin thiết kế để hỗ trợ mẫu định dạng tên phù hợp với việc tối ưu hóa tìm kiếm (URL) phù hợp với lập địa theo kiểu REST • Hỗ trợ sử dụng đặc tả (các thẻ) trang ASP.NET (.aspx), điều khiển người dùng (.ascx) trang master page Bạn sử dụng tính có sẵn ASP.NET sử dụng lồng trang master page, sử dụng in-line expression (), sử dụng server controls, mẫu, data-binding, địa phương hóa (localization) • Hỗ trợ tính có sẵn ASP.NET chế xác thực người dùng, quản lý thành viên, quyền, output caching data caching, session profile, quản lý tình trạng ứng dụng, hệ thống cấu hình… • ASP.NET MVC bổ sung view engine Razor View Engine cho phép thiết lập view nhanh chóng, dễ dàng tốn công sức so với việc sử dụng Web Forms view engine 2.3 Hoạt động thành phần ASP.NET MVC: • Khi request phát sinh từ web browser đến IIS Web Server request cuối đưa đến MVC Handler • MVC Handler có nhiệm vụ chọn Controller để xử lý request Controller tạo thành phần gọi Controller Factory • Sau tạo ra, Controller xác định request xử lý Action Method cụ thể sau thực thi Action Method Action method tương tác với Model Class để truy xuất liệu thực thi số business logic • Sau hoàn tất xử lý Action Method trả Action Result ASP.NET MVC cung cấp nhiều Action Result, có Action Result đặc biệt View Result Action Result có nhiệm vụ làm việc với View định để tạo mã HTML để trả cho web browser người dùng nhận kết xử lý • View Engine thành phần thực hiển thị View, kèm với ASP.NET MVC Webform View Engine tức viết View ASPX 10 4.1.10Giao diện trang tìm kiếm: 53 4.1.11 Giao diện trang giải đáp thắc mắc: 4.1.12Giao diện trang liên hệ: 54 4.2 Giao diện Admin: 4.2.1 Giao diện trang đăng nhập phần Admin: 55 4.2.2 Giao diện trang chủ Admin: 56 4.2.3 Giao diện trang thêm sản phẩm: 57 4.2.4 Giao diện trang sửa sản phẩm: 58 4.2.5 Giao diện trang xóa sản phẩm: 59 4.2.6 Giao diện trang nhập hàng mới: 60 61 4.2.7 Giao diện trang sản phẩm hết: 62 4.2.8 Giao diện trang thống kê: 63 CHƯƠNG 5: TỔNG KẾT 5.1 Kết đạt được: Qua trình thực đồ án môn học lập trình web này, nhóm sinh viên chúng em mốt số kết sau: -Hiểu biết thêm ứng dụng web công nghệ asp.net khác biệt so với ứng dụng desktop (ứng dụng winform) học -Hiểu biết ngôn ngữ lập trình C# ứng dụng vào Web Microsoft, cụ thể ASP.NET MVC5 -Hiển thêm số ngôn ngữ HTML5, CSS3, JQUERY, AJAX, … -Hiểu biết ngôn ngữ truy vấn CSDL LINQ, ngôn ngữ truy vấn CSDL theo dạng hướng đối tượng, gần gũi với người lập trình từ trước tới tương tác với CSDL khác XML, CSDL quan hệ, … -Đồ án giúp sinh viên tổng hợp kiến thức học từ môn sở trường trang bị cho sinh viên từ học kỳ trước CSDL, hệ quản trị CSDL nâng cao, SQL Server, kỹ thuật lập trình, lập trình hướng đối tượng (OOP), phân tích thiết kế hệ thống thông tin, … -Nâng cao khả lập trình, biết thêm mốt số công nghệ như: toan trực tuyến, FaceBook API, Google API, -Trên sở kiến thức học nhóm chúng em phát họa ứng web mang tính nhu cầu phục vụ cho việc học Tuy ứng dụng web đơn giản nội dung chưa đầy đủ nhiều chức cần thiết, chưa tối ưu mặt giao diện, giải thuật hay xử lý lỗi, bước làm tảng cho nhóm phát triển, xây dựng ứng dụng web thực tế 64 5.2 Hoàn thành: STT Chức Mức độ hoàn thành Đăng ký Hoàn thành Đăng nhập Hoàn thành Thêm sản phẩm vào giỏ hàng Hoàn thành Xem Sản phẩm theo danh mục Hoàn thành Tìm kiếm Hoàn thành Xem chi tiết sản phẩm Hoàn thành Cập nhật giỏ hàng Hoàn thành Đặt hàng Hoàn thành Thêm sản phẩm Hoàn thành 10 Thêm giá cho sản phẩm Hoàn thành 11 Cập nhật đơn đặt hàng Hoàn thành 12 Thêm loại sản phẩm Hoàn thành 13 Xem tài khoản khách hàng Hoàn thành 14 Nhập hàng Hoàn thành 15 Cập nhật slton Hoàn thành 16 Quản lý đơn hàng Hoàn thành 17 Facebook Api, Google map Api Hoàn thành 65 Ghi 5.3 Hướng phát triển: - Ở trang người dùng, cần nên hoàn thiện bố cục trang web, trang trí thiết kế cho trang web mang tính thân thiện cho người dùng nữa, cần nên sửa lại độ tương thích trang web để hoạt động không máy tính để bàn mà tương thích trình duyệt di động - Ngoài ra, theo xu hướng hầu hết người dùng sử dụng tài khoản Facebook Google, lẽ nên ta cần xây dựng thêm chức đăng nhập tài khoản Facebook Google cho người dùng để họ đăng nhập thay đăng ký tài khoản trang web mà ta làm - Cần thêm chức tương tự trang liên hệ thay phải ghi thông tin trang web, ta sử dụng chức gửi mail phản hồi cho người dùng họ có tài khoản Yahoo gmail, họ sử dụng tài khoản gửi mail nhanh chóng - Phương thức toán trực tuyến cách thêm sản phẩm tốn nhiều thời gian sở liệu nhiều sản phẩm (từ 30 sản phẩm trở lên) nên ta cần phải thay đổi hình thức toán khác cần phải khắc phục lại để cải tiến tiến độ nhanh chóng ta muốn lấy mã nhúng sản phẩm - Cần phải làm thêm việc lỗi 404, 500, … - Thêm công nghệ Web Service 5.4 Tài liệu tham khảo: https://www.youtube.com/watch? v=M0jdFS4ZyEk&list=PLRhlTlpDUWsyK1TIsewrQ7WwC7QkCSCPD Trung tâm Đào tạo mạng máy tính Nhất Nghệ Giáo trình ASP.NET http://cukimngoc.com/mo-hinh-mvc-la-gi.html http://support.microsoft.com/kb/2645095/vi-vn 66 https://huynhminhkhoa.wordpress.com/c-cshap-vb-net/model-view controller - mvc-la-gi/ - http://lmt.com.vn/home/php/tim-hieu-php/360 - tim - hieu –mo – hinh – mvc – la - gi.html http://laptrinhvien.net/blog/tim-hieu-mo-hinh-mvc-la-gi/ https://www.youtube.com/watch?v=MAPKjN8mxfU http://cliphot24h.com/3/12938/Cong-nghe/Lap-trinh/AspnetCsharp/Phan-1-Tong-quan-ve-MVC-va-ASPNET-MVC.aspx https://www.youtube.com/watch?v=VX56rqLwZxo https://www.youtube.com/watch?v=XxcAxPIt7SQ https://www.youtube.com/watch? v=M0jdFS4ZyEk&list=PLRhlT1pDUWsyK1TIsewrQ7WwC7QkCS CPD https://www.youtube.com/watch?v=x-7y_ewtUcs https://www.youtube.com/watch?v=_yxxwZB2CgE http://stackoverflow.com/ http://www.w3schools.com/ 67 ... Xây dựng Website bán hàng công nghệ ” để thực đồ án lập trình web đáp ứng theo chương trình đào tạo Trường, đồng thời mong muốn góp phần đẩy đưa ứng dụng CNTT vào Website việc bán hàng công nghệ... trang website bán hàng nhanh Nên nhóm chúng em định chọn đề tài xây dựng trang website bán hàng công nghệ Với mong muốn giúp cho cửa hàng kiếm thêm thu nhập nhiều nhờ vào việc bán online Ngoài... hiểu Websivice để web cung cấp thành phần ứng dụng chuyển đổi tiền tệ, báo cáo thời tiết… 1.3 Mục tiêu đề tài: Vì website bán hàng, nên điều nhóm chúng em trọng tính thân thiện với người dùng,