lập trình web website bán hoa online

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM BÁO CÁO ĐỒ ÁN MÔN LẬP TRÌNH WEB WEBSITE BÁN HOA ONLINE Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Giảng viên hướng dẫn: Ths Huỳnh Khắc Duy MỤC LỤC liệu tham khảo LỜI MỞ ĐẦU Ngày nhịp sống hối người việc giành thời gian để mua sắm trở nên điều xa xỉ Những lo lắng giao thông không an toàn hạn chế việc mua hàng truyền thống tránh mua sắm trực tuyến Với mua hoa trực tuyến (online), bạn không cần phải lo lắng điều kiện thời tiết Người tiêu dùng khách hàng tổ chức, công ty,… dần chuyển sang mua sắm trực tuyến nhiều nhằm tiết kiệm thời gian Chính thế, việc mua sắm hoa online trở nên quan trọng cần thiết, cần cú click chuột họ có sản phẩm mà mong muốn Việc mua sắm hoa online có nhiều ưu điểm sở hữu thứ thơng qua cú click chuột không cần phải đến tận nơi để mua hàng Sau vào website, khách hàng cần chọn sản phẩm, đặt hàng người bán mang sản phẩm đến tận nhà bạn Mua hoa online cho phép mua hàng bạn muốn Các cửa hàng mạng khơng đóng cửa, mua sắm 24/24 ngày tuần Mua sắm hoa chợ hay trung tâm thương mại khó để bạn so sánh đặc điểm giá sản phẩm với Khi mua hoa online, khách hàng dễ dàng so sánh đưa lựa chọn sản phẩm phù hợp Đôi khách hàng gặp phải người bán hàng khó tính số điểm bán hàng Mua sắm hoa online khách hàng để ý đến chuyện Xin chân thành cám ơn hướng dẫn tận tình thầy suốt trình thực đồ án ! Chương TỔNG QUAN 1.1 Tổng quan vấn đề nghiên cứu 1.1.1 Khảo sát thực trạng Tình trạng mua sắm hoa phổ biến nhu cầu người Với thời đại công nghệ 4.0 bùng nổ phát triển, trang bị cho smartphone để sử dụng.Hàng nghìn website đời để đáp ứng nhu cầu người gồm giáo dục, mua sắm, thể dục thể thao, học tập Nhưng lại để ý đến nhu cầu mua sắm hoa nhu cầu người 1.2 Giới thiệu đề tài Trong thời kì bùng nổ thơng tin nay, thơng tin cơng nghệ góp phần quan trọng dẫn đến thành công tất lĩnh vực Một phương thức bán hoa nhanh, đa dạng lựa chọn cộng với việc nhu cầu tìm kiếm loại hoa đẹp thành phố lớn trực tuyến ngày tăng.Trong năm gần đây, ứng dụng CNTT quản lý website phát triển mạnh mẽ, website giúp người dùng người muốn sử dụng website để kinh doanh thuận lợi , khơng phải tối nhiều thời gian để ngồi Đây điều tuyệt người sử dụ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 Đó lý nhóm chọn đề tài “Thiết kế trang web bán hoa online” dựa mơ hình ASP.NET MVC5 1.2.1 Đối tượng người sử dụng 1.2.1.1 Đối tượng Website bán hoa online tạo nhằm phục vụ đáp ứng nhu cầu cho đối tượng : - Người sử dụng ( Người có nhu cầu mua sắm hoa đặt hoa khó tìm) Người quản trị ( Người có quyền chỉnh sửa thơng tin đăng) Lập trình viên (Người sử dụng sửa lỗi) 1.2.1.2 Phạm vi a) Thông tin tổng quan - Đơn vị sử dụng : Tất người khu vực Thành phố Hồ Chí Minh - Tên đồ án: Website bán hoa online b) Phát biểu vấn đề - Website tạo nhằm đáp ứng nhu cầu mua sắm hoa người khu vực thành phố Hồ Chí Minh - Website cung cấp đầy đủ thông tin loại hoa bán loại hoa khách hàng đặt riêng - Những người có nhu cầu muốn mua hoa tạo tài khoản đăng nhập để đăng lên trang web c) Mục tiêu - Giúp người dùng tìm kiếm hoa mua sắm loại loại hoa trở nên nhanh hơn, không cần phải khỏi nhà mà tìm loại hoa theo ý muốn - Tạo trang web để người bán trực tiếp đăng bán cách nhanh chóng tiện lợi d) Mơ tả Trang web hướng tới đối tượng : Người mua hàng truy cập vào trang web, trang web cung cấp thông tin loại hoa bao gồm nguồn hàng, kích thước, hình ảnh, giá tiền v.v sau chọn loại hoa thích hợp, người dùng để lại thông tin, số điện thoại, bên bán hàng gọi điện để tiến hành chốt đơn hàng Người bán hàng đăng nhập vào trang web để đăng bài, người bán hàng e) Lợi ích mang lại - Dễ dàng sử dụng người dùng Người mua hàng : tìm kiếm, mua sắm nhanh chóng, tiết kiệm thời gian, di chuyển nhiều Người bán: tiếp cận nhiều khách hàng so với cách thủ công bán hàng đơn thuần…v.v f) Các bước thực để hoàn thành - Lên ý tưởng trang web - Thiết kế giao diện - Xây dựng sở liệu -Nạp liệu - Kiểm tra sửa lỗi - Biên soạn tài liệu 1.2.1.3 Ràng buộc tổng quan - Phạm vi sử dụng nội thành Thành phố Hồ Chí Minh 1.3 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 tố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.4 Cấu trúc đồ án Chương 1: Tổng quan o Tổng quan vấn đề nghiên cứu : Tóm tắt lý thuyết, tài liệu có liên quan đến đề tài “ Xây dựng Website mua bán hoa online” o Nhiệm vụ đồ án: Trình bày cấu trúc đồ án gồm chương tóm tắt chương Chương 2: Cơ sở lý thuyết Các khái niệm phương pháp xử lý để giải vấn đề trang web Chương 3: Kết thực nghiệm Giao diện, chức trang web Chương 4: Kết luận Những kết luận chung, khẳng định kết đạt Chương 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 khơng cần địi hỏi bạn phải biết tag HTML, thiết kế web, mà cịn 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 client-side), 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 hồn tồ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 Giới thiệu MVC 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 CSDL 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ệc 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, Controller 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 tì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 theo 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 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 thức 10 2.11 Jquery 2.11.1 Jquery ? Jquery thư viện kiểu Javascript giúp đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web Jquery thêm tương tác Ajax vào trang web bạn Jquery thiết kế để thay đổi cách viết Javascript bạn Chỉ với 10 dòng lệnh Jquery thư viện khổng lồ hỗ trợ cho ngôn ngữ lập trình mà người lập trình cần có kiến thức HTML học Một lập trình viên sử dụng jquery để lập trình tiết kiệm nhiều thời gian người lập trình web 2.11.2 Jquery giúp ích cho người lập trình web? Truy cập phần tử nội dung trang web Jquery cho phép bạn chọn thành phần tài liệu để “vọc” cách dễ dàng sử dụng CSS Thay đổi hình thức giao diện trang web Jquery đời để lấp chỗ trống này, bạn sử dụng để giúp trang web hiển thị tốt hầu hết trình duyệt Hơn jQuery thay đổi class định dạng CSS áp dụng lên thành phần HTML trang web trình duyệt load thành cơng Thay đổi nội dung trang web jquery khơng thay đổi bề ngồi trang web, thay đổi nội dung tài liệu với vài dịng code Nó thêm bớt dung trang, hình ảnh thêm vào đổi sang hình khác, danh sách xếp lại chí cấu trúc HTML trang web viết lại mở rộng Jquery cho phép nhà phát triển web viết code javascript đơn giản nhiều so với cách truyền thống vòng lặp điều khiển mảng 23 2.11.3 Tại phải dùng Jquery? Có nhiều lí để khun bạn nên dùng jquery thay dùng javascript phải nói đến số plugin jquery khổng lồ giúp bạn tiết kiệm thời gian viết ứng dụng liên quan đến giao diện, hiệu ứng… Hơn nữa, jQuery đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web, giúp tiết kiệm thời gian công sức nhiều so với việc ngồi viết javascript theo cách thông thường Đúng hiệu Viết hơn, làm nhiều hơn, khơng dùng jQuery chuyên gia phải viết vài trang giấy làm nút Back to Top với hiệu ứng trượt, dân nghiệp dư cần vài dòng code ngắn ngũi jQuery “múa rìu qua mắt thợ” Bên cạnh đó, việc sử dụng jQuery giúp giải tốt vấn đề xung đột trình duyệt web 2.12 HTML5 2.12.1 HTML5 gì? HTML5 chuẩn hệ ngôn ngữ đánh dấu siêu văn – HyperText Markup Language explained (gọi tắt HTML) Các phiên trước HTML, HTML 4.01 đời từ năm 1999 Cho đến trang web có thay đổi nhiều kể từ HTML5 cịn giai đoạn triển hồn thiện Tuy nhiên, nhiều phiên trình duyệt có hỗ trợ cho phần tử, thẻ có HTML5 APIs HTML5 kết hợp tác tổ chức W3C nhóm WHATWG WHATWG làm việc với web form ứng dụng, cịn W3C làm việc với XHTML 2.0 Trong năm 2006, họ định hợp tác tạo phiên HTML, HTML5 2.12.2 HTML5 vấn đề quan trọng chúng ta? Như người sử dụng web, bạn hưởng lợi từ HTML5 sửa chữa vấn đề sai sót rõ ràng HTML4 Các trang web có tiêu chuẩn 24 web tốt hơn, kết nội dung hiệu cải thiện hiệu suất Một HTML5 áp dụng diện rộng, trang web bắt đầu chạy nhanh hơn, băng thông tốn thời gian “thọ” pin thiết bị di động kéo dài Một điều thêm bạn giữ nhiều plugin Flash Java update Hiện vấn đề nguyên nhân gây phiền nhiễu cho người dùng nhiều Người dùng phải liên tục cập nhật nhiều addon plugin cho trình duyệt Và điều xảy số chúng phiên bị sai?Tất nhiên trang web ngừng báo hoạt động bạn khắc phục cập nhật Tất điều giải quyetsee HTML5 trở thành tiêu chuẩn Nếu bạn người sử dụng web thông thường bạn khơng có ý định mã hóa trì trang web riêng bạn, bạn không cần phải làm điều để thưởng thức tính tuyệt vời HTML5 Tất trình duyệt HTML5 hỗ trợ mức độ lớn bạn tận dụng lợi mà khơng hay biết Chỉ cần giữ cho trình duyệt bạn cập nhật thường xuyên bạn nhận tốt đẹp Và bạn nhà phát triển web, HTML5 làm cho thứ trở nên đơn giản dễ dàng cho bạn Nếu việc suôn sẽ, bạn khơng cịn phải đối phó với trường hợp xấu, lỗi, trục trặc thiết kế web tất trình duyệt cần phải tuân thủ tiêu chuẩn 2.13 Yêu cầu 2.13.1 Xác định yêu cầu 2.13.1.1 Yêu cầu - Tạo trang web hỗ trợ bán hoa online - Website đáp ứng nhu cầu mua hoa người đăng tin 2.13.1.2 Yêu cầu chức - Dễ dàng sử dụng 25 - Người dùng tìm kiếm người đăng tin phải nhập đầy đủ vào form 2.14 Mơ hình giải pháp 2.14.1 sơ đồ hoạt trang web 2.14.1.1 sơ đồ liên kết người dùng trang web 26 CHƯƠNG KẾT QUẢ THỰC NGHIỆM 3.1 Cơ Sở Dữ Liệu 3.1.1 Cơ sở liệu Website Mô tả sở liệu Các thông tin Website lưu vào sở liệu SQL: DBPro bao gồm bảng: Hình 3.1 Cơ sở liệu 3.1.1.1 Bảng dbo.Admin Hình 3.2 Bảng Admin 3.1.1.2 Bảng dbo.CHITIETDONHANG 27 Hình 3.3 Bảng ChiTietDonHang 3.1.1.3 Bảng dbo.CHUDE Hình 3.4 Bảng ChuDe 3.1.1.4 Bảng dbo.DONDATHANG Hình 3.5 Bảng DonDatHang 3.1.1.5 Bảng dbo.LOAIHOADACBIET: Hình 3.6 Bảng LoaiHoaDacBiet 28 3.1.1.6 Bảng dbo.HOA: Hình 3.7 Bảng Hoa 3.1.1.7 Bảng dbo.KHACHHANG: Hình 3.8 Bảng Khách Hàng 29 3.2 Hình ảnh sản phẩm: 3.2.1 Hình ảnh giao diện: Hình 3.9 Giao diện Trang chủ Hình 3.10 Giao diện Chi Tiết Hoa (phía người dùng): 30 Hình 3.11 Giao diện Giỏ hàng Hình 3.12 Giao diện Trang thơng tin đặt hàng 31 Hình 3.13 Giao diện Đăng Ky 32 Hình 3.14 Giao diện Trang Liên Hệ Hình 3.15 Giao diện Đăng nhập Admin 33 Hình 3.16 Giao diện Thêm Hoa Mới Hình 3.17 Giao diện Thơng Tin Hoa 34 Hình 3.18 Giao diện Chi Tiết Hoa Hình 3.19 Giao diện Xố Hoa 35 CHƯƠNG KẾT LUẬN 4.1 Kết đạt nhận xét : Thiết kế trang web phục vụ nhu cầu mua sắm hoa người Bằng kiến thức học tính tự tìm tịi học hỏi,chúng em nắm cách để xây dựng nên trang web để đưa trang web giúp đáp ứng nhu cầu mua hoa người.Qua việc nghiên cứu xây dựng đề tài này, chúng em phần củng cố kiến thức lập trình nắm cách làm để xây dựng trang web Từ đó, chúng em xây dựng trang web tương tự chất lượng tương lai.Trang web khơng thể tránh sai sót Mong thầy góp ý để chúng em sửa chữa , chúng em xin chân thành cảm ơn 4.2 Đánh giá phần mềm 4.2.1 Ưu điểm : − − − − Website đáp ứng nhu cầu mua hoa người dùng Người mua dễ tìm kiếm loại hoa ưa thích, tiết kiệm thời gian Người bán nhiều người biết đến dịch vụ bán hoa Chương trình linh hoạt việc quản lý mặt hàng khác việc bán hàng online 4.2.1 Nhược điểm : − Giao diện xử lý chưa đẹp − Còn nhiều tính chưa sử dụng 4.3 Hướng phát triển phần mềm - Khác phục nhược điểm chưa hoàn thiện Tăng tốc độ xử lý cách nhanh chóng Liên kết với trang web khác Trong tương lai nhóm em xây dựng app di động để người tiện sử dụng mà không cần truy cập trang web 36 Tài liệu tham khảo [1] Ths.Nguyễn Đình Ánh, Ths.Mai Ngọc Thu.Giáo trình lập trình web Trường Đại học Công Nghệ TP.HCM Website tham khảo: [1]https://www.w3schools.com - Học thiết kế giao diện trang web [2]https://getbootstrap.com - thiết kế website reponsive nhanh dễ dàng [3].Tài liệu ASP.Net : https://dotnet.microsoft.com/learn/aspnet 37 ... mà người lập trình cần có kiến thức HTML học Một lập trình viên sử dụng jquery để lập trình tiết kiệm nhiều thời gian người lập trình web 2.11.2 Jquery giúp ích cho người lập trình web? Truy cập... phải biết tag HTML, thiết kế web, mà cịn 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)... online b) Phát biểu vấn đề - Website tạo nhằm đáp ứng nhu cầu mua sắm hoa người khu vực thành phố Hồ Chí Minh - Website cung cấp đầy đủ thông tin loại hoa bán loại hoa khách hàng đặt riêng - Những