Gồm có đồ án tốt nghiệp (file word) + bộ soure code + File cơ sở dữ liệu (database) + 1 file hướng dẫn cài đặtĐồ án xây dưng website bán hàng.. ứng dụng Bootstrap và mô hình MVCĐồ án chất lượng đã bảo vệ và rất cao
ĐỀ TÀI Tên: “XÂY DỰNG WEBSITE BÁN HÀNG” Giao diện trang chủ 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, Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng 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 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 Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng 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 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 Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng 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 Bước 1: Tải Bootstrap đây: http://getbootstrap.com.vn/getting- started/#download Sau tải về, có file Zip Tiến hành giải nén ta có thư mục có tên bootstrap, bên có thư mục : css, img, js Bước 2: Chúng ta tạo file html có tên index.html thư mục bootstrap vừa giải nén phía 1.2 Giới thiệu ngôn ngữ PHP PHP - viết tắt hồi quy "Hypertext Preprocessor", ngôn ngữ lập trình kịch chạy phía server nhằm sinh mã html client PHP Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng trải qua nhiều phiên tối ưu hóa cho ứng dụng web, với cách viết mã rõ rãng, tốc độ nhanh, dễ học nên PHP trở thành ngôn ngữ lập trình web phổ biến ưa chuộng PHP chạy môi trường Webserver lưu trữ liệu thông qua hệ quản trị sở liệu nên PHP thường kèm với Apache, MySQL hệ điều hành Linux (LAMP) • Apache phần mềm web server có nhiệm vụ tiếp nhận request từ trình duyệt người dùng sau chuyển giao cho PHP xử lý gửi trả lại cho trình duyệt • MySQL tương tự hệ quản trị sở liệu khác (Postgress, Oracle, SQL server ) đóng vai trò nơi lưu trữ truy vấn liệu • Linux: Hệ điều hành mã nguồn mở sử dụng rộng rãi cho webserver Thông thường phiên sử dụng nhiều RedHat Enterprise Linux, Ubuntu PHP hoạt động nào? • Khi người sử dụng gọi trang PHP, Web Server triệu gọi PHP Engine để thông dịch dịch trang PHP trả kết cho người dùng hình bên Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Hình 1.3 Cách thức hoạt động ngôn ngữ PHP Các bước cài đặt Web server: Bước 1: Download XAMPP https://www.apachefriends.org/download.html tiến hành cài đặt chương trình thông thường Bước 2: Start Apache MySQL XAMPP control panel Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Hình 1.4 Giao diện controller XAMP Bước 3: Gõ vào trình duyệt địa localhost Nếu hình sau việc cài đặt thành công Hình 1.5 Giao diện Localhost Nguyễn Đình Thanh – CCLT07B Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Bước 4: Vào thư mục cài đặt XAMPP/htdocs tiến hành tạo file test.php với nội dung sau : Gõ trình duyệt địa localhost/test.php Nếu dòng chữ Hello World nghĩa ứng dụng PHP chạy thành công Hình 1.6 Chương trình Hello world ! TIPS: Để lập trình PHP sử dụng IDE sau: Netbeans, Eclipse, Zend Studio, PHP Storm để đẩy nhanh trình phát triển hạn chế lỗi xảy trình lập trình 1.3 Giới thiệu hệ quản trị sở liệu MySQL MySQL hệ quản trị sở liệu tự nguồn mở phổ biến giới nhà phát triển ưa chuộng trình phát triển ứng dụng Vì MySQL sở liệu tốc độ cao, ổn định dễ sử dụng, có tính khả chuyển, hoạt động nhiều hệ điều hành cung cấp hệ thống lớn hàm tiện ích mạnh Với tốc độ tính bảo mật cao, MySQL thích hợp cho ứng dụng có truy cập CSDL internet Nguyễn Đình Thanh – CCLT07B 10 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 41 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 Nguyễn Đình Thanh – CCLT07B 42 Nghiên cứu Framework Bootstrap vào xây dựng website bán hàng Hình 2.18 Giao diện thông tin đơn 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 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 44 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 45 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 46 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 47 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 48 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 49 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 Bước 1: Vào trang chủ website Hình 3.9 Trang chủ website 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 50 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 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 Nguyễn Đình Thanh – CCLT07B Chi tiết giỏ hàng 51 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 52 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 … • … Nguyễn Đình Thanh – CCLT07B 53 Nghiên cứu Framework Bootstrap vào xây dựng website bán 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 54 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 55 ... tin quản trị hệ thống Yêu cầu cập nhật quản lý danh mục sản phẩm Cập nhật quản lý danh mục Trả thông tin quản lý danh mục Hiển thị thông tin quản lý danh mục Yêu cầu cập nhật quản lý đơn hàng Cập... $data = array()) { //xử lý liệu $data $values = array(); foreach ($data as $key => $value) { $value = mysql_real_escape_string($value); $values[] = "`$key`='$value'"; } //lưu liệu: INSERT/UPDATE... Framework Bootstrap vào xây dựng website bán hàng Categories (DANH MỤC) TT Tên gọi Kiểu Độ dài Chú thích id int 11 Mã danh mục name 255 255 Tên danh mục possition status int tinyint 11 Vị trí hiển thị