TRƢỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP HCM KHOA CÔNG NGHỆ THÔNG TIN - - ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE THƢƠNG MẠI ĐIỆN TỬ ỨNG DỤNG CÔNG NGHỆ MVC CỦA ASP.NET Ngành: CÔNG NGHỆ THÔNG TIN Chuyên ngành: HỆ THỐNG THÔNG TIN Giảng viên hƣớng dẫn: ThS.NGUYỄN LƢƠNG ANH TUẤN Sinh viên thực : ĐỖ LONG HƢNG MSSV: 11L1120027 LỚP: CN11LT PHẠM TIẾN TRUNG MSSV: 11L1120070 LỚP CN11LT TP Hồ Chí Minh, 2013 TRƢỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI TP HCM KHOA CÔNG NGHỆ THÔNG TIN - - ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE THƢƠNG MẠI ĐIỆN TỬ ỨNG DỤNG CÔNG NGHỆ MVC CỦA ASP.NET Ngành: CÔNG NGHỆ THÔNG TIN Chuyên ngành: HỆ THỐNG THÔNG TIN Giảng viên hƣớng dẫn: ThS.NGUYỄN LƢƠNG ANH TUẤN Sinh viên thực : ĐỖ LONG HƢNG MSSV: 11L1120027 LỚP: CN11LT PHẠM TIẾN TRUNG MSSV: 11L1120070 LỚP CN11LT TP Hồ Chí Minh, 2013 LỜI CAM ĐOAN Chúng em xin cam đoan luận văn tốt nghiệp chúng em tự tìm hiểu, tự viết sản phẩm, không chép Chúng em hoàn toàn chịu trách nhiệm lời cam đoan ! TP.Hồ Chí Minh, ngày 25 tháng 12 năm 2013 Sinh viên thực Đỗ Long Hƣng Phạm Tiến Trung LỜI CÁM ƠN Trong suốt trình chúng em thực Luận văn tốt nghiệp, chúng em nhận đƣợc quan tâm giúp đỡ quý thầy cô, ban chủ nhiệm Khoa Công nghệ thông tin Nhà trƣờng Chúng em xin chân thành cảm ơn giúp đỡ quý báu Chúng em xin bày tỏ lòng biết ơn sâu sắc tới ThS.Nguyễn Lƣơng Anh Tuấn, ngƣời dành nhiều quan tâm, giúp đỡ, hƣớng dẫn chúng em hoàn thành luận văn tốt nghiệp Nhóm chúng em xin gửi lời cám ơn đến bạn lớp CN11LT giúp đỡ trình làm luận văn tốt nghiệp Chúng em xin gửi lời cám ơn đến Công ty TNHH Thƣơng mại Dịch vụ Viễn thông Quang Thành giúp đỡ nhóm hồn thành đồ án tốt nghiệp Do thời gian học tập nghiên cứu có hạn, nhận thức hạn chế, nên đồ án tốt nghiệp chắc nhiều thiếu sót, kính mong đƣợc thày cô bảo giúp đỡ Chúng em xin chân thành cảm ơn! NHẬN XÉT CỦA GIẢNG VIÊN HƢỚNG DẪN TP HCM, Ngày….…tháng………năm 2013 NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN TP HCM, Ngày….…tháng………năm 2013 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn MỤC LỤC TRANG BÌA TRANG BÌA PHỤ LỜI CAM ĐOAN LỜI CÁM ƠN MỤC LỤC i DANH MỤC BẢNG BIỂU VÀ HÌNH VẼ iv DANH MỤC CÁC TỪ VIẾT TẮT vi PHẦN MỞ ĐẦU _ CHƢƠNG 1: TÌM HIỂU VỀ MƠ HÌNH ASP.NET – MVC _ 1.1 Lịch sử phát triển ASP.NET MVC 1.2.Tổng quan MVC _ 1.3.Mơ hình ASP.NET truyền thống (mơ hình Web Form) _ 1.4.Mơ hình ASP.NET MVC _ 1.4.1.Đặc điểm chung mơ hình ASP.NET MVC 1.4.2.So sánh mơ hình MVC mơ hình lớp thơng thường 10 1.4.3 Kiến trúc 11 1.4.4.Định tuyến URL (URL Routing) 11 1.4.5.Mơ hình MVC Postback 11 1.4.6.Ưu điểm MVC 13 1.4.7.Nhược điểm MVC _ 13 1.5.Controller Routing _ 13 1.5.1 Controller Action Method 13 1.5.2 ASP.NET MVC Routing 19 1.6.View 20 1.6.1.Razor View Engine 20 1.6.2.Master Page _ 21 1.6.3.Partial View _ 23 1.6.4.HTML Helpers _ 24 1.6.5.Validation Form Data _ 24 1.7 Model(Data) 25 1.7.1.ORM(Object-Relational Mapping) 25 1.7.2.Entity Framework 25 1.8 AJAX ASP.NET MVC 26 1.8.1 AJAX 26 i Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn 1.8.2.ASP.NET MVC AJAX Helpers _ 1.9.Giới thiệu mơ hình ASP.NET MVC4 _ 1.9.1.Môi trường làm việc 1.9.2.Các tính MVC4 _ 27 28 29 29 CHƢƠNG 2: MƠ HÌNH CƠ SỞ DỮ LIỆU _ 31 2.1.Bảng liệu 31 2.2.Mơ hình vật lý liệu _ 33 2.3.Mơ hình quan hệ liệu _ 36 CHƢƠNG 3: CẤU TRÚC WEBSITE _ 38 3.1.Cấu trúc thiết kế Website _ 3.1.1.Khởi tạo Website _ 3.1.2.Source code thực _ 3.2.Mơ hình chức _ 38 38 38 39 CHƢƠNG 4: DEMO SẢN PHẨM 41 4.1.Các thành phần Website _ 4.1.1.Trang chủ _ 4.1.2.Trang bảo hành 4.1.3.Trang liên hệ 4.1.4.Trang quản trị _ 4.1.5.Trang chi tiết sản phẩm 4.1.6.Logo _ 4.1.7 Danh mục sản phẩm 4.1.8.Thanh menu banner 4.2.Các trang trƣng bày sản phẩm 4.2.1.Gian hàng trang chủ. 4.2.2.Gian hàng theo hãng sản phẩm 4.2.3.Gian hàng bán chạy. _ 4.3.Chức đăng ký, đăng nhập. 4.3.1.Chức đăng ký _ 4.3.2.Chức đăng nhập _ 4.4.Chức tìm kiếm 4.4.1.Tìm kiếm theo tên 4.4.2.Tìm kiếm nâng cao _ 4.5.Chức đặt hàng 4.5.1.Giỏ hàng _ 4.5.2.Cập nhật giỏ hàng 4.5.3.Đặt mua sản phẩm 4.6.Chức quản trị _ ii 41 41 42 43 43 44 45 45 46 47 47 48 49 50 50 51 51 51 53 54 54 54 55 56 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn 4.6.1.Quản lý đặt hàng _ 4.6.2.Quản lý danh mục 4.6.3.Quản lý sản phẩm 4.6.4.Quản lý tài khoản 4.6.5.Quản lý liên hệ 4.7.Các chức khác 4.7.1.Đếm số lượng truy cập 4.7.2.Hỗ trợ trực tuyến _ 57 58 59 60 61 62 62 62 KẾT LUẬN 63 TÀI LIỆU THAM KHẢO iii Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn DANH MỤC BẢNG BIỂU VÀ HÌNH VẼ Bảng 1.1: Lịch sử phát triển cơng nghệ ASP.NET MVC Trang Bảng 1.2: So sánh mơ hình Webform MVC Trang Bảng 1.3: Liệt kê kiểu action result phƣơng thức hỗ trợ để trả Trang 16 Hình 1.1: Mơ hình MVC Trang Hình 1.2: Cách thức làm việc mơ hình MVC Trang Hình 1.3: So sánh mơ hình MVC Layer Trang 10 Hình 1.4: Cấu trúc mơ hình MVC4 Trang 12 Hình 1.5: Mơ hình xử lý MVC4 Trang 28 Hình 1.6: ASP.NET MVC4 Visual Stuido 2012 Trang 29 Hình 2.1: Mơ hình quan hệ liệu Trang 37 Hình 3.1: Dự án MVC Trang 38 Hình 3.3: Mơ hình chức Website Trang 40 Hình 4.1: Trang chủ Trang 41 Hình 4.2: Trang bảo hành Trang 42 Hình 4.3: Trang liên hệ Trang 43 Hình 4.4: Trang quản trị Trang 43 Hình 4.5: Trang chi tiết sản phẩm Trang 44 Hình 4.6: Logo Trang 45 Hình 4.7: Danh mục sản phẩm Trang 45 Hình 4.8: Thanh menu Banner Trang 46 Hình 4.9: Gian hàng trang chủ Trang 47 Hình 4.10: Gian hàng theo hãng sản phẩm Trang 48 Hình 4.11: Gian hàng bán chạy Trang 49 Hình 4.12: Đăng ký tài khoản Trang 50 Hình 4.13: Đăng nhập tài khoản Trang 51 Hình 4.14: Đăng nhập thành cơng Trang 51 iv Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Khi đăng kí tài khoản mặc định bạn có quyền chức ngƣời dùng, Các thay đổi quyền tài khoản Admin quản lý 4.3.2.Chức đăng nhập Hình 4.13: Đăng nhập tài khoản Sau bấm vào nút đăng nhập vào trang form đăng nhập để đăng nhập (hình 4.13) vào hệ thống.quản trị ngƣời quản trị Sau đăng nhập thành cơng nút đăng nhập trở thành nút đăng xuất, lời chào tên ngƣời đăng nhập(hình 4.14) Hình 4.14: Đăng nhập thành cơng 4.4.Chức tìm kiếm 4.4.1.Tìm kiếm theo tên Trên trang chủ, bạn nhập chữ A vào khung tìm kiếm nhƣ hình 4.15 thực tìm kiếm cách nhấp chuột vào nút tìm kiếm Hình 4.15: Bắt đầu tìm kiếm theo tên Ngay sau thực lệnh tìm kiếm kết tìm kiếm nhƣ hình 4.16 tức tất sản phẩm có chữ A tên đƣợc hiển thị 51 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.16: Kết tìm kiếm theo tên 52 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn 4.4.2.Tìm kiếm nâng cao Với chức tìm kiếm này, khách hàng có nhiều lựa chọn tìm kiếm Khách hàng chọn hàng sản phẩm thích, loại sản phẩm cần mua, dòng điện thoại khoảng giá để phù hợp với túi tiền Hình 4.17: Bắt đầu tìm kiếm nâng cao Sau khách hàng lựa chọn cách tìm kiếm nhƣ hình 4.17 sản phẩm điện thoại tất hãng sản xuất có giá từ 10 triệu đến 15 triệu đƣợc hiển thị, nhƣ hình 4.18 kết tìm kiếm 53 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.18: Kết tìm kiếm nâng cao 4.5.Chức đặt hàng Để thực đƣợc chức đặt hàng khách hàng cần đăng nhập vào hệ thống Sau đăng nhập xong, khách hàng có giỏ hàng để mua sắm loại sản phẩm Để kiểm tra giỏ hàng mình, khách hàng chọn button giỏ hàng bạn(hình 4.19) Hình 4.19: Giỏ hàng 4.5.1.Giỏ hàng Để tiến hành đặt hàng cho sản phẩm, khách hàng bấm vào để đƣa sản phẩm vào giỏ hàng.Khi thơng tin sản phẩm, số lƣợng, giá đƣợc hiển thị nhƣ hình 4.20 Hình 4.20: Bắt đầu giỏ hàng Lúc giỏ hàng lƣu lại sản phẩm mà khách hàng chọn mua Khách hàng thay đổi số lƣợng sản phẩm cần mua cách điền số lƣợng sản phẩm tƣơng ứng cần mua bấm vào nút Sửa số lƣợng, lúc số lƣợng đƣợc cập nhật 4.5.2.Cập nhật giỏ hàng Khách hàng tiếp tục đặt mua sản phẩm khác đặt mua nhiều sản phẩm lúc nhƣ hình 4.21 54 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.21: Giỏ hàng khách Sau chọn loại sản phẩm vào giỏ hàng, khách hàng xóa sản phẩm tƣơng ứng khỏi giỏ hàng cách bấm vào nút xóa, xóa hết giỏ hàng cách bấm vào nút xóa giỏ hàng 4.5.3.Đặt mua sản phẩm Còn khách hàng ƣng ý với sản phẩm chọn, khách hàng tiến hàng đặt hàng cách bấm vào nút đặt hàng, giao diện đặt hàng hiển thị thông tin khách hàng, thông tin sản phẩm đặt mua, số lƣợng số tiền tốn nhƣ hình 4.22 55 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.22: Tiến hành đặt hàng Bằng cách bấm vào nút xác nhận đặt hàng, khách hàng có đơn hàng gửi tới ban quản trị Đặt hàng thành cơng có thơng báo cho q khách hàng Hình 4.23: Đặt hàng thành cơng Các thơng tin đặt hàng đƣợc ngƣời quản trị quản lý 4.6.Chức quản trị Để thực quyền quản trị website cần phải đăng nhập vào hệ thống (nhƣ hình 4.13) Sau đăng nhập thành công với quyền quản trị, trang quản trị (hình 4.24) Ở ngƣời quản trị thực quyền quản lý đặt hàng, quản lý danh mục, quản lý sản phẩm, quản lý tài khoản quản lý liên hệ Hình 4.24: Trang quản trị 56 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn 4.6.1.Quản lý đặt hàng Để tiến hành quản lý đặt hàng, ngƣời quản trị vào mục Quản lý đặt hàng menu Trong đó, họ quản lý đơn hàng khách hàng đặt, xóa đơn hàng cần thiết cách bấm vào nút xóa thay đổi đơn hàng khách hàng Hình 4.25: Quản lý đơn hàng Ngƣời quản trị xem chi tiết đơn hàng khách hàng để chỉnh sửa sôs lƣợng sản phẩm khách hàng khách hàng có yêu cầu khác Chi tết đơn hàng hiển thị thông tin khách hàng thông tin sản phẩm, số lƣợng giá tiền khách hàng đặt mua Hình 4.26: Chi tiết xóa đơn hàng 57 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn 4.6.2.Quản lý danh mục Danh mục sản phẩm, danh mục hãng sản phẩm đƣợc thiết kế mềm,ngƣời quản trị dễ dàng thay đổi Hình 4.27: Quản lý danh mục, xóa danh mục Nhƣ hình 4.27 chọn quản lý danh mục->hãng sản xuất danh mục hãng sản xuất ra, ngƣời quản trị dễ dàng xóa bỏ, thêm hay sửa lại thơng tin Nếu thêm hãng mã hãng tự sinh số số nhỏ tƣơng ứng với mã hãng bị xóa Nếu sửa danh mục hãng không thay đổi đƣợc mã hãng mà thay đổi đƣợc thành phần khác 58 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.28: Thêm sửa hãng sản xuất 4.6.3.Quản lý sản phẩm Trong mục quản lý sản phẩm, quản lý tất thông tin sản phẩm.Mặc định trang sản phẩn quản trị gồm 10 sản phẩm, sản phẩm khác đƣợc phân trang Trong trang này, thêm sản phẩm, sửa xóa sản phẩm Mã sản phẩm tự sinh Hình 4.29 59 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.29: Trang quản lý sản phẩm, xóa sản phẩm Khi xóa sản phẩm tƣơng ứng sản phẩm bị xóa khỏi hệ thống, mã sản phẩm đƣợc giữ lại để mặc định cho lần thêm sản phẩm Khi thêm sản phẩm sửa sản phẩm có trang giao diện nhƣ hình 4.30, lúc thông tin sản phẩm dễ dàng thay đổi Hình 4.30: Thêm sửa sản phẩm 4.6.4.Quản lý tài khoản Trong trang quản lý tài khoản ngƣời quản trị quản lý tất tài khoản đăng kí vào hệ thống 60 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.31: Quản lý đăng nhập, xóa tài khoản Ở đây, ngƣời quản trị xóa tài khoản, cập nhật quyền cho tài khoản thêm tài khoản có yêu cầu từ khách hàng Nhƣ hình 4.32 lúc ngƣời quản trị thêm tài khoản cho khách hàng, sửa tài khoản làm tƣơng tự Hình 4.32: Thêm sửa tài khoản 4.6.5.Quản lý liên hệ Các thông tin mà khách hàng liên hệ đƣợc quản lý mục Ngƣời quản trị xóa liên hệ xem liên hệ, khơng thể thay đổi nội dung bên Quản lý liên hệ giúp khách hàng trung tâm tƣơng tác với 61 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Hình 4.33: Quản lý liên hệ 4.7.Các chức khác 4.7.1.Đếm số lượng truy cập Hình 4.34: Lượng truy cập Trong chức khách truy cập tới website đƣợc cập nhật vào biến đếm Số lƣợng truy cập đƣợc cập nhật liên tục Còn số ngƣời online đƣợc cập nhật trạng thái phiên làm việc 4.7.2.Hỗ trợ trực tuyến Hình 4.35: Hỗ trợ trực tuyến Đây chức hiệu để khách hàng liên hệ nhanh với trung tâm Đây chức đƣợc dùng rộng rãi website thƣơng mại điện tử 62 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn KẾT LUẬN Trong thời gian thực luận văn tốt nghiệp, dƣới giúp đỡ tận tình nhà trƣờng, ban chủ nhiệm khoa, bạn sinh viên lớp CN11LT đặc biệt bảo, hƣớng dẫn Thạc sĩ Nguyễn Lƣơng Anh Tuấn, chúng em hồn thành đƣợc luận văn tốt nghiệp Đề tài “Xây dựng website thƣơng mại điện tử ứng dụng công nghệ MVC ASP.NET” đề tài thực dụng thị trƣờng buôn bán online thời điểm Đặc biệt việc áp dụng công nghệ phiên MVC4.0 ASP.NET đem đến cho cửa hàng mạng gió mới, với cải tiến giao diện, chức xử lý, mơ hình phát triển Và theo chúng em mơ hình MVC4.0 tảng phát triển ứng dụng tƣơng lai Ngoài ra, thời gian thực luận văn, chúng e nắm đƣợc phƣơng thức kinh doanh mạng, tiếp cận đƣợc với sản phẩm công nghệ Các kết thu sau hoàn thành luận văn: Tìm hiểu đƣợc cơng nghệ MVC ASP.NET cơng ngệ khác để hoàn thành website nhƣ CSS, HTML,JAVASCRIPT… Áp dụng đƣợc cấu trúc số API HTML5 để xây dựng website Website có giao diện thân thiện thuận tiện cho ngƣời sử dụng Website đƣợc viết theo mơ hình lớp MVC4.0 nên dễ dàng nâng cấp bảo trì sau Hổ trợ nhiểu chức phù hợp với thực tế nhƣ: tìm kiếm, đặt hàng trực tuyến, quản lý đơn hàng, hỗ trợ trực tuyến… Mọi liệu đƣợc tổ chức động nên dễ dàng cập nhật lại 63 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn Trang Quản trị: hoạt động ổn định với đầy đủ chức thêm sửa xóa, giúp cho ngƣời quản trị quản lý Website cách dễ dàng Và luận văn tảng để chúng em phát triển dự án lớn hơn, chuyên nghiệp 64 Luận văn tốt nghiệp GVHD: ThS.Nguyễn Lƣơng Anh Tuấn TÀI LIỆU THAM KHẢO [1] Nguyễn Văn Ba (2006), Phân tích thiết kế hệ thống thơng tin, NXB Đại học Quốc Gia Hà Nội [2] Lê Minh Hoàng (2006), thủ thuật HTML thiết kế web, NXB Lao Động Xã Hội [3] Lê Minh Hoàng (2006), Thiết Kế Web Với CSS, NXB Lao Động Xã Hội [4] ThS Nguyễn Nghiệm(2013), Seminar ASP.NET MVC4, Trung tâm đào tạo công nghệ thông tin Nhất Nghệ [5] Nguyễn Trƣờng Sinh(2010), Tuyển tập thủ thuật JavaScript Dom, nhà xuất Phƣơng Đông [6] Nguyễn Trung Tuấn, Lƣu Minh Tuấn, Tống Minh Ngọc (2006), sở liệu (lƣu hành nội bộ), trƣờng đại học Kinh Tế Quốc Dân (bộ mơn CNTT) [7]Tìm hiểu lý thuyết cơng nghệ ASP.NET MVC4, Các chƣơng trình hỗ trợ MVC4 http://www.asp.net/mvc/mvc4 [8] Công cụ phối màu thiết kế website http://maxdesign.vn/images/files/maxdesign_vn_web_color.html [9] Bảng danh sách chi tiết loại điện thoại [Nguồn: Công ty TNHH Thƣơng mại Dịch vụ Viễn thông Quang Thành] 65 ... GIAO THÔNG VẬN TẢI TP HCM KHOA CÔNG NGHỆ THÔNG TIN - - ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE THƢƠNG MẠI ĐIỆN TỬ ỨNG DỤNG CÔNG NGHỆ MVC CỦA ASP.NET Ngành: CÔNG NGHỆ THÔNG TIN Chuyên ngành: HỆ... nghệ, kiến thức  Phục vụ cho việc xây dựng website thƣơng mại điện tử công nghệ MVC 4 Nhiệm vụ nghiên cứu:  ASP.NET MVC 4.0  Xây dựng website thƣơng mại điện tử Phƣơng pháp nghiên cứu:  Nghiên... triển Website Chính thế, nhóm em mạnh dạn chọn đề tài "Xây dựng Website thương mại điện tử ứng dụng công nghệ MVC ASP.NET" để làm đề tài báo cáo tốt nghiệp Tình hình nghiên cứu Hiện tài liệu MVC