Nghiên cứu framework bootstrap vào xây dựng website bán hàng

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, công nghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác. Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin và thanh toán trên toàn cầu. Giờ đây, mọi việc liên quan đến thông tin sản phẩm và mua sắm trực tuyến trở nên thật dễ dàng cho người sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức… cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin sản phẩm bạn cần. Truy cập Internet giúp ta có được một thông tin khổng lồ phục vụ mọi nhu cầu, mọi mục đích của chúng ta một cách nhấp chuột. Nhận thức được nhu cầu mua sắm của thời đại, hàng loạt website cho các mục đích thương mại đã ra đời như Amazon.com, Sendo.com.vn, Lazada.com, … Để đáp ứng với việc mua bán trức tuyến thì sự ra đời của một website bán hàng là điều tất yếu. Do vậy em đã quyết định vận dụng ngôn ngữ PHP, MySQL để “Xây dựng webwite bán hàng” theo mô hình MVC (Models Views Controllers) với giao diện viết bằng Framework Bootstrap.

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN HỮU NGHỊ VIỆT - HÀN KHOA: CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP NGÀNH: LẬP TRÌNH MÁY TÍNH KHÓA HỌC: 2013-2016 ĐỀ TÀI Tên: “NGHIÊN CỨU FRAMEWORK BOOTSTRAP VÀO XÂY DỰNG WEBSITE BÁN HÀNG” Sinh Viên Thực Hiện: Nguyễn Đình Thanh Lớp: CCLT07B Họ tên GVHD: ThS Võ Hoàng Phương Dung Đà Nẵng tháng 06 năm 2016 LỜI CẢM ƠN Qua ba năm học tập rèn luyện trường Trường Cao Đẳng Công Nghệ Thông Tin Hữu Nghị Việt - Hàn, bảo giảng dạy nhiệt tình quý thầy cô, đặc biệt quý thầy cô khoa Công Nghệ Thông Tin truyền đạt cho em kiến thức lý thuyết thực hành suốt thời gian học trường Cùng với nổ lực thân, em hoàn thành đồ án tốt nghiệp Từ kết đạt này, em xin chân thành cám ơn: Quý thầy cô trường Trường Cao Đẳng Công Nghệ Thông Tin Hữu Nghị Việt Hàn, truyền đạt cho em kiến thức bổ ích thời gian qua Đặc biệt, cô Võ Hoàng Phương Dung tận tình hướng dẫn em hoàn thành tốt đồ án tốt nghiệp Do kiến thức hạn hẹp nên không tránh khỏi thiếu sót cách làm đồ án, lỗi trình bày Em mong nhận đóng góp ý kiến quý thầy cô ban lãnh đạo nhà trường, để đồ án tốt nghiệp đạt kết tốt Em xin chân thành cảm ơn ! i MỤC LỤC LỜI CẢM ƠN .i MỤC LỤC ii DANH MỤC HÌNH ẢNH iv LỜI MỞ ĐẦU PHẦN : GIỚI THIỆU VỀ CÁC CÔNG NGHỆ .2 1.1Giới thiệu chung Bootstrap Framework 1.1.1Bootstrap ? 1.1.2 Tại phải sử dụng Bootstrap ? .3 1.1.3Cách cài đặt Framework Bootstrap 1.2Giới thiệu ngôn ngữ PHP 1.3Giới thiệu hệ quản trị sở liệu MySQL .8 1.4Giới thiệu mô hình MVC (Models Views Controllers) PHẦN : PHÂN TÍCH VÀ THIẾT KẾ 11 2.1Giới thiệu website bán hàng .11 2.2Yêu cầu hệ thống thông tin 11 2.2.1Yêu cầu hệ thống .11 2.2.2Yêu cầu chức 11 2.2.3Yêu cầu phi chức 12 2.3Phân tích hệ thống 12 2.3.1 Biêu đồ phân rã chức 12 2.3.2Biểu đồ luồng liệu mức ngữ cảnh .12 2.3.3Biểu đồ luồng liệu mức .13 2.3.4Biểu đồ luồng liệu mức 1: Quản trị hệ thống 13 2.3.5Biểu đồ luồng liệu mức 1: Quản lý danh mục .14 2.3.6Biểu đồ luồng liệu mức 1: Quản lý nghiệp vụ .15 2.3.7Biểu đồ luồng liệu mức 1: Quản lý nghiệp vụ .16 2.4Thiết kế sở liệu 16 2.5Mô hình thực thể ERD 18 2.6Sơ đồ sở liệu .19 2.7Xây dựng website mô hình MVC 19 2.7.1MODELS 19 ii 2.7.2CONTROLLERS .25 2.7.3VIEWS (Xây dựng Bootstrap) 31 PHẦN : HƯỚNG DẪN SỬ DỤNG CHƯƠNG TRÌNH VÀ KẾT LUẬN 37 3.1 Giới thiệu chương trình .37 3.2 Hướng dẫn sử dụng cho quản trị viên 37 3.3 Hướng dẫn sử dụng mua hàng cho khách hàng 41 KẾT LUẬN .44 TÀI LIỆU THAM KHẢO .v iii DANH MỤC HÌNH ẢNH Hình 1.1 Giao diện hiển thị thiết bị Hình 1.2: Logo Bootstrap Framework Hình 1.3 Cách thức hoạt động ngôn ngữ PHP Hình 1.4 Giao diện controller XAMP Hình 1.5 Giao diện Localhost Hình 1.6 Chương trình Hello world ! Hình 2.1: Biểu đồ phân rã chức .12 Hình 2.2: Biểu đồ luồng liệu mức ngữ cảnh 12 Hình 2.3 : Biểu đồ luồng liệu mức 13 Hình 2.4 : Biểu đồ luồng liệu quản trị hệ thống mức .14 Hình 2.5 Biểu đồ luồng liệu mức – quản lý danh mục 15 Hình 2.6 Biểu đồ luồng liệu mức – quản lý đơn hàng 15 Hình 2.7 Biểu đồ luồng liệu mức – tìm kiếm 16 Hình 2.8 Mô hình thực thể liên kết 18 Hình 2.9 Sơ đồ sở liệu 19 Hình 2.10 cấu trúc thư mục file lớp Models 19 Hình 2.11 Cấu trúc thư mục Controllers 25 Hình 2.12 Cấu trúc thư mục Views 31 Hình 13 Trang chủ người dùng 32 Hình 2.14 Chi tiết danh mục Áo khoác 32 Hình 2.15 Chi tiết danh mục Áo thun .33 Hình 2.16 Giao diện chi tiết sản phẩm 33 Hình 2.17 Giao diện chi tiết giỏ hàng .34 Hình 2.18 Giao diện thông tin đơn hàng 34 Hình 2.19 Giao diện trang chủ quản trị viên 35 Hình 2.20 Giao diện danh sách danh mục 35 Hình 2.21 Giao diện danh sách sản phẩm 36 Hình 2.22 Giao diện danh sách đơn hàng 36 iv Hình 3.1 Trang đăng nhập 37 Hình 3.2 Đăng nhập thành công .38 Hình 3.3 Giao diện thêm danh mục .38 Hình 3.4 Giao diện sửa danh mục 38 Hình 3.5 Giao diện thêm sản phẩm 39 Hình 3.6 Giao diện sửa sản phẩm 39 Hình 3.7 Giao diện xử lý đơn hàng 40 Hình 3.8 Giao diện thay đổi thông tin quản trị viên .40 Hình 3.9 Trang chủ website 41 Hình 3.10 Chọn sản phẩm 42 Hình 3.11 Chi tiết sản phẩm 42 Hình 3.12 Chi tiết giỏ hàng .42 Hình 3.13 Thông tin đơn hàng phiếu thông tin khách hàng .43 v Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng LỜI MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, công ty, đóng vai trò quan trọng, tạo bước đột phá mạnh mẽ Cùng với phát triển không ngừng kỹ thuật máy tính mạng điện tử, công nghệ thông tin công nghệ có đẳng cấp cao chinh phục hết đỉnh cao đến đỉnh cao khác Mạng Internet sản phẩm có giá trị lớn lao ngày trở nên công cụ thiếu, tảng cho truyền tải, trao đổi thông tin toán toàn cầu Giờ đây, việc liên quan đến thông tin sản phẩm mua sắm trực tuyến trở nên thật dễ dàng cho người sử dụng: cần có máy tính kết nối internet dòng liệu truy tìm gần lập tức… giới vấn đề mà bạn quan tâm ra, có đầy đủ thông tin sản phẩm bạn cần Truy cập Internet giúp ta có thông tin khổng lồ phục vụ nhu cầu, mục đích cách nhấp chuột Nhận thức nhu cầu mua sắm thời đại, hàng loạt website cho mục đích thương mại đời Amazon.com, Sendo.com.vn, Lazada.com, … Để đáp ứng với việc mua bán trức tuyến đời website bán hàng điều tất yếu Do em định vận dụng ngôn ngữ PHP, MySQL để “Xây dựng webwite bán hàng” theo mô hình MVC (Models Views Controllers) với giao diện viết Framework Bootstrap Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng PHẦN : GIỚI THIỆU VỀ CÁC CÔNG NGHỆ Bán hàng qua mạng loại hình thương mại điện tử Hiện nay, thương mại điện tử ngày phát triển thị trường quốc gia thị trường giới Nó đem lại lợi ích cho người sản xuất, doanh nghiệp người tiêu dùng, tiết kiệm chi phí, tiết kiệm thời gian, rút ngắn khoảng cách doanh nghiệp nước Do nhu cầu phát triển hiệu thương mại điện tử mang lại, sau ba năm học tập trường với kiến thức tiếp thu định chọn đề tài xây dựng Website bán hàng với giao diện dựa Framework Bootstrap Bootstrap Front-end framework, sưu tập miễn phí công cụ để tạo trang web ứng dụng web Nó chứa HTML5 CSS3 dựa mẫu thiết kế cho kiểu chữ, hình thức, nút, chuyển hướng thành phần giao diện khác, mở rộng JavaScript tùy chọn Bootstrap phát triển Mark Otto Jacob Thornton Twitter framework, công cụ để phục vụ công việc nội Twitter Trước phát triển Bootstrap, có nhiều thư viện khác sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột.Bootstrap đời để khắc phục yếu tố này, giúp nhà phát triển, lập trình Twitter triển khai công việc nhanh hơn, tiện lợi đồng Bootstrap tương thích với phiên tất trình duyệt tiếng giới Chrome, Firefox, IE, Opera … Kể từ phiên 2.0 trở l hỗ trợ Responsive Web Design Thiết kế bố trí trang web tự động điều chỉnh, tự động tương thích thiết bị sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động 1.1 Giới thiệu chung Bootstrap Framework 1.1.1 Bootstrap ? Bootstrap framework cho phép thiết kế website reponsive nhanh dễ dàng Bootstrap bao gồm HTML templates, CSS templates Javascript tao có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Trong bootstrap có thêm plugin Javascript Giúp cho việc thiết kế reponsive bạn dễ dàng nhanh chóng Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng 1.1.2 Tại phải sử dụng Bootstrap ? Bootstrap có ưu điểm bật so với framework khác :  Rất dễ để sử dụng: : Nó đơn giản base HTML, CSS Javascript cẩn có kiến thức sử dụng bootstrap tốt  Tính Responsive: Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hết Đây xu hướng phát triển giao diện website ưu chuộng giới Bản demo mẫu giao diện hiển thị thiết bị: Hình 1.1 Giao diện hiển thị thiết bị  Tương thích với trình duyệt : Nó tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) lưu ý IE hạn chế với IE phiên cũ việc IE9 hay IE8 đổ xuống không hỗ trợ điều đáng lo ngại  Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm nhiều thời gian Các thư viện Bootstrap có đoạn mã sẵn sàng cho bạn áp dùng vào website Bạn tốn nhiều thời gian để tự viết code cho giao diện  Tùy biến cao : Bạn hoàn toàn dựa vào Bootstrap phát triển tảng giao diện Bootstrap cung cấp cho bạn hệ thống Grid System Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng mặc định bao gồm 12 bột độ rộng 940px Bạn thay đổi, nâng cấp phát triển dựa tảng Với ưu bật Bootstrap có hạn chế định  Sản phẩm nặng, tốc độ tối ưu chưa cao: nên dự án bạn đòi hỏi sản phẩm nhẹ việc sử dụng bootstrap gánh nặng cho web  Chưa hoàn thiện: Bootstrap chưa đầy đủ thư viện cần thiết Các phát triển chưa thể tạo framework riêng hoàn hảo, số trang web phải dùng phiên dành riêng cho mobile  Quá nhiều code thừa: Không thể phủ nhận Bootstrap có nhiều ưu điểm cấp gần đầy đủ tính trang web responsive đại Tuy nhiên, mặt trái việc website bạn phải tải thêm nhiều dòng code không cần thiết mà bạn cần chưa đến 10% Bootstrap cung cấp  Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themes sẵn có, gọi class từ stylesheet bạn có trang web responsive trông ổn ổn Sự tiện dụng dễ dàng Bootstrap nhiều khuyễn khích tính lười sáng tạo, vốn thường trực Kết là, thướng thoả hiệp thực muốn cho website để đổi lấy tiện dụng tiết kiệm thời gian mà Bootstrap mang lại Hình 1.2: Logo Bootstrap Framework 1.1.3 Cách cài đặt Framework Bootstrap Twitter Bootstrap giúp giảm thiểu thời gian thiết kết html css.Twitter Bootstrap định nghĩa sẳn class css công việc sử dụng class vào mục đích Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Giao diện trang chủ Hình 13 Trang chủ người dùng Giao diện chi tiết danh mục Hình 2.14 Chi tiết danh mục Áo khoác Nguyễn Đình Thanh – CCLT07B 32 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Hình 2.15 Chi tiết danh mục Áo thun Giao diện chi tiết sản phẩm Hình 2.16 Giao diện chi tiết sản phẩm Nguyễn Đình Thanh – CCLT07B 33 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Giao diện chi tiết giỏ hàng Hình 2.17 Giao diện chi tiết giỏ hàng Giao diện thông tin đơn hàng đặt hàng Hình 2.18 Giao diện thông tin đơn hàng Nguyễn Đình Thanh – CCLT07B 34 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng  Cấu trúc thư mục Views dành cho quản trị Trang chủ Hình 2.19 Giao diện trang chủ quản trị viên Danh sách danh mục Hình 2.20 Giao diện danh sách danh mục Nguyễn Đình Thanh – CCLT07B 35 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Giao diện danh sách sản phẩm Hình 2.21 Giao diện danh sách sản phẩm Hình 2.22 Giao diện danh sách đơn hàng Nguyễn Đình Thanh – CCLT07B 36 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng PHẦN : HƯỚNG DẪN SỬ DỤNG CHƯƠNG TRÌNH VÀ KẾT LUẬN 3.1 Giới thiệu chương trình  Hệ thống bao gồm phần: • Phần hỗ trợ cho khách hàng: phần giới thiệu sản phẩm hàng hóa, danh mục • Phần hỗ trợ cho nhà quản trị: Phần chủ yếu hỗ trợ cho việc quản lý, cập nhật thông tin cần thiết Gồm xử lý như:  Cập nhật danh mục sản phẩm: thêm, sửa , xóa  Cập nhật sản phẩm: thêm, sửa , xóa  Xử lý đơn hàng: xử lý  Cập nhật thông tin quản trị viên: thêm, sửa , xóa 3.2 Hướng dẫn sử dụng cho quản trị viên  Đăng nhập vào hệ thống: Vào đường link : Localhost:4040/Xdeal.com/admin.php Chú ý : Số 4040 cổng (port) XAMP – máy cài XAMP mặc định 80 không cần cổng 4040 mà : Localhost /Xdeal.com/admin.php • Đăng nhập Tên đăng nhập : admin@gmail.com Mật khẩu: 123456 Hình 3.1 Trang đăng nhập Nguyễn Đình Thanh – CCLT07B 37 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng • Trang chủ quản trị viên Hình 3.2 Đăng nhập thành công  Thêm danh mục Hình 3.3 Giao diện thêm danh mục  Sửa danh mục Hình 3.4 Giao diện sửa danh mục Nguyễn Đình Thanh – CCLT07B 38 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng  Thêm sản phẩm Hình 3.5 Giao diện thêm sản phẩm  Sửa sản phẩm Hình 3.6 Giao diện sửa sản phẩm Nguyễn Đình Thanh – CCLT07B 39 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng  Xử lý đơn hàng Hình 3.7 Giao diện xử lý đơn hàng  Đôi thông tin tài khoản Hình 3.8 Giao diện thay đổi thông tin quản trị viên Nguyễn Đình Thanh – CCLT07B 40 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng 3.3 Hướng dẫn sử dụng mua hàng cho khách hàng o Bước 1: Vào trang chủ website Hình 3.9 Trang chủ website o Bước 2: Chọn sản phẩm muốn mua, ấn vào ảnh để xem chi tiết sản phẩm Nguyễn Đình Thanh – CCLT07B 41 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Hình 3.10 Chọn sản phẩm o Bước Xem chi tiết sản phẩm – Nếu muốn mua chọn nút đặt mua Hình 3.11 Chi tiết sản phẩm  Bước Danh sách giỏ hàng với sản phẩm đặt.Ở có số lượng cần mua (Nếu thay đổi số lượng nhập số ấn cập nhật) Hình 3.12 Chi tiết giỏ hàng Nguyễn Đình Thanh – CCLT07B 42 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng  Bước Chấp nhận mua sản phẩm ấn nút đơn hàng.Hệ thống chuyển sang hình toán với sản phẩm đặt.Đồng ý mua hàng điền thông tin vào bàng thông tin khách hàng ấn đặt hàng Hình 3.13 Thông tin đơn hàng phiếu thông tin khách hàng Nguyễn Đình Thanh – CCLT07B 43 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng KẾT LUẬN Sau thời gian nghiên cứu phát triển đề tài “Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng” em hoàn thành theo yêu cầu thời gian định Trong trình nghiên cứu thực đề tài với nỗ lực cao hạn chế kinh nghiệm, kiến thức nên đề tài em chắn không tránh khỏi thiếu xót Em mong nhận góp ý từ thầy cô để đề tài hoàn thiện  Kết đạt được: − Chương trình cho phép tạo hệ thống bán hàng trực tuyến với hệ quản trị sản phẩm tiện lợi dễ sử dụng − Các bước phân tích minh họa mô hình chức rõ ràng − Hoàn thành website bán hàng với phần: cho khách hàng cho nhà quản trị − Giao diện viết băng Bootstap nên bắt mắt, dễ nhìn − Nắm bắt ngôn ngữ PHP hệ quản trị sở liệu MySQL − Hiểu biết thêm mô hình MVC  Hạn chế: − Hệ thống website cung cấp tính website bán hàng Tuy nhiên điều kiện thời gian nên chưa hoàn thành số module chương trình Ví dụ : • Danh mục hạn chế • Các chức thống kê chưa có • Vẫn chưa thể toán hình thức khác • Nhiều chức chưa thể phát triền lượt xem, lượt mua, sản phẩm bật, đánh giá từ khách hàng … • …  Hướng phát triển − Mở rộng thêm nhiều chức nữa, thống kê số người truy cập web… − Chat trực tuyến − Tăng cường tính bảo mật cho website Nguyễn Đình Thanh – CCLT07B 44 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng − Nguyễn Đình Thanh – CCLT07B 45 TÀI LIỆU THAM KHẢO  Các website tham khảo như: • www.w3schools.com • www.hocphp.info • www.getbootstrap.com.vn Đà Nẵng, tháng 06, năm 2016 Sinh viên thực Nguyễn Đình Thanh v ... Xây dựng webwite bán hàng theo mô hình MVC (Models Views Controllers) với giao diện viết Framework Bootstrap Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán. .. trình xây dựng Nhược điểm - Hệ thống chạy chậm PHP - Xây dựng cầu kì thời gian để xây dựng thư viện, cấu trúc Nguyễn Đình Thanh – CCLT07B 10 Nghiên cứu Framework Bootstrap vào xây dựng website bán. .. toàn dựa vào Bootstrap phát triển tảng giao diện Bootstrap cung cấp cho bạn hệ thống Grid System Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng mặc định