Xây dựng website bán hàng cho cửa hàng bán điện thoại di động
ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Mục Lục LỜI MỞ ĐẦU Danh mục hình vẽ Chương I Kiến thức sở 1.1 Ngôn ngữ thiết kế web 1.1.1 HTML 1.1.2 CSS 1.1.3 PHP 1.1.4 MySQL 1.2 Kiến trúc flamework 1.2.1 Kiến trúc Client/Server 1.2.2 Mô hình MVC 1.2.3 Framework Yii 10 1.2.4 Bootstrap 10 Chương II Phân tích hệ thống 11 2.1 Các chức website 11 2.1.1 Chức phía frontend 11 2.1.2 Chi tiết chức phía frontend 12 2.1.3 Sơ đồ phân cấp chức phía frontend 14 2.1.4 Chức phía người quản trị website backend 15 2.1.5 Chi tiết chức phía người quản trị 15 2.1.6 Sơ đồ phân cấp chức phía backend 18 2.2 Sơ đồ luồng liệu 19 2.2.1 Biểu đồ mức ngữ cảnh 19 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 2.2.2 Biểu đồ luồng liệu mức 20 2.2.3 Biểu đồ luồng liệu mức 21 2.3 Mơ hình thực thể liên kết 24 2.3.1 Danh sách thực thể 24 2.3.2 Mô hình thực thể liên kết 28 2.4 Xử lý chức 29 2.4.1 Xử lý đăng nhập 29 2.4.2 Xử lý chức hiển thị thông tin 29 2.4.3 Xử lý chức thêm 30 2.4.4 Xử lý chức sửa 31 2.4.5 Xử lý chức xóa 31 2.4.6 Xử lý giỏ hàng 32 Chương III Thiết kế hệ thống 33 3.1 Thiết kế bảng liệu 33 3.2 Kết nối bảng sở liệu 37 3.3 Thiết kế bảng Diagram 38 3.4 Thiết kế Giao diện website 39 KẾT LUẬN 40 TÀI LIỆU THAM KHẢO 41 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh LỜI MỞ ĐẦU Hiện nay, phát triển công nghệ thông tin, đặc biệt lĩnh vực thương mại điện tử giúp cá nhân, doanh nghiệp có mặt hàng dễ dàng tiếp cận với người tiêu dùng Hầu hết họ có website để giới thiệu sản phẩm doanh nghiệp Đứng trước nhu cầu thiết kế website cá nhân, doanh nghiệp việc đam mê lập trình ứng dụng web Em chọn đề tài: “Xây dựng website bán hàng cho cửa hàng bán điện thoại di động” làm đề tài môn học Đồ Án III Nội dung đề tài gồm có phần: Phần 1: Kiến thức sở Trình bày kiến thức để thiết kế, vận hành website Phần 2: Khảo sát Phân tích hệ thống Từ việc khảo sát hệ thống ban đầu, nội dung phần tập trung xác định yêu cầu mà hệ thống cần đáp ứng, Xác định chức cấn có, luồng liệu thực thể hệ thống Phần 3: Thiết kế hệ thống Từ liệu có qua phần phân tích hệ thống, nội dung phần thực việc thiết kế sở liệu, xử lý chức năng, thiết kế chương trình Thực đồ án hội để em áp dụng, tổng hợp kiến thức học lớp, đồng thời đúc kết học thực tế phục vụ cho việc học tập làm việc sau Mặc dù cố gắng thực đề tài lực thời gian hạn chế nên chương trình khó tránh khỏi thiếu xót, mong thầy thơng cảm Những góp ý thầy học, hành trang để em vững bước vào sống sau Qua đây, em xin gửi lời cám ơn cô Ngơ Thị Hiền, người nhiệt tình hướng dẫn, bảo em q trình thực hiện, hồn thành đề tài Hà Nội, ngày 23 tháng 12 năm 2014 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Danh mục hình vẽ Trang Hình 1.1 Kiến trúc Client/Server Hình 1.2 Mơ hình MVC Hình 2.1 Sơ đồ phân cấp chức phía frontend 14 Hình 2.2 Sơ đồ phân cấp chức phía backend 18 Hình 2.3 Biểu đồ mức ngữ cảnh 19 Hình 2.4 Biểu đồ luồng liệu mức 20 Hình 2.5 Phân rã tiến trình 2.0 – Quản lý danh mục 21 Hình 2.6 Phân rã tiến trình 3.0 – Quản lý đơn hàng 22 Hình 2.7 Phân rã tiến trình 3.0 – Khách hàng phản hồi 23 Hình 2.8 Mơ hình thực thể liên kết 28 Hình 3.1 Kết nối bảng CSDL 37 Hình 3.2 Bảng Diagram 38 Hình 3.3 Giao diện quản trị 39 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh CHƢƠNG I KIẾN THỨC CƠ SỞ 1.1 Ngôn ngữ thiết kế web 1.1.1 HTML HTML (HyperText Markup Language) gọi ngôn ngữ đánh dấu siêu văn bản, tạo nhằm cấu trúc lên trang web với mẩu thơng tin trình bày World Wide Web Ví dụ Hello worldHello world !
Một trang web bắt đầu thẻ mở kết thúc thẻ đóng Trong bao gồm nội dung thơng tin header khai báo cặp thẻ , nội dung trang web khai báo cặp thẻ Nội dung đặt cặp thẻ bao gồm: Tiêu đề trang web (title) Phần mô tả trang web (description) Tên tác giả (author) Từ khóa liên quan đến nội dung trang web … ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Nội dung đặt cặp thẻ hiển thị trang web, bao gồm cặp thẻ , , , , , , , … 1.1.2 CSS CSS (Cascading Style Sheet) Website cấu tạo từ thẻ html với thẻ html thể khung website Để chỉnh, trình bày cho đẹp mắt ta cần sử dụng ngôn ngữ CSS Đây ngôn ngữ dùng nhiều lập trình web, thường với ngơn ngữ html Chúng ta có cách để chèn CSS vào trang HTML Chèn nội dung CSS vào cặp thẻ phần trang web Chèn trực tiếp vào bên thẻ HTML Liên kết với file css bên Trong thực tế, cách thứ lập trình viên sử dụng nhiều tính tiện dụng linh hoạt 1.1.3 PHP PHP (Hypertext Preprocessor) ngơn ngữ lập trình chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, dễ dàng nhúng vào trang HTML Đây ngơn ngữ lập trình web phổ biến giới, tính mở nên dễ tiếp cận với lập trình viên Ví dụ: Example ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Thẻ mở đánh dấu bắt đầu kết thúc phần mã PHP, qua máy chủ biết để xử lý dịch mã cho Đây điểm tiện lợi PHP giúp cho việc viết mã PHP trở nên trực quan dễ dàng việc xây dụng phần mềm giao diện ứng dụng web 1.1.4 MySQL MySQL hệ quản trị CSDL tự mã nguồn mở phổ biến thể giới nhà phát triển ưa chuộng để phát triển ứng dụng 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 thường với người anh em PHP 1.2 Kiến trúc flamework 1.2.1 Kiến trúc Client/Server Kiến trúc Client/ Server kiến trúc tiếng mạng máy tính, hầu hết website hoạt động dựa kiến trúc Trong Client máy khách gửi yêu cầu đến máy Server Tại Server lắng nghe yêu cầu từ máy Client, nhận thơng tin từ Client sau xử lý, trả kết cho máy Client ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Hình 1.1 Kiến trúc Client/Server 1.2.2 Mơ hình MVC Mơ hình MVC ( Model – View – Controller) mơ hình thiết kế sử dụng kỹ thuật phát triển phần mềm, giúp cho developer tách ứng dụng thành phần Model – View – Controller Mỗi thành phần có nhiệm vụ, chức riêng biệt, giúp phát triển ứng dụng nhanh, dễ bảo trì, nâng cấp hệ thống ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Hình 1.2 Mơ hình MVC Trong Model: Là thành phần chứa tất nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả liệu, ràng buộc quan hệ… View: Đảm bảo việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất đối tượng GUI textbox, images… Hay nói cách đơn giản Model tập hợp form file HTML Controller: Là phần quan trọng mơ hình MVC Đóng vai trò nhận u cầu từ phía client, tiến hành xử lí thơng tin trả thông tin cho client Cách thức hoạt động mơ hình MVC Khi máy client tương tác với view ( trình duyệt PC hay Mobile) Gửi yêu cầu đến phía server Controller tiếp nhận yêu cầu, tiến hành xử lý u cầu đó, thơng tin liên quan đến CSDL Controller gọi đến Model để lấy liệu Sau trả kết sau sử lý cho View View hiển thị thông tin dạng thẻ HTML cho người dùng ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 1.2.3 Framework Yii Yii PHP framework mã nguồn mở hồn tồn miễn phí, có hiệu cao, giúp lập trình viên phát triển tốt ứng dụng web 2.0 Yii cho phép tái sử dụng tối đa thành phần ứng dụng để tăng tốc độ viết ứng dụng Yii framework khác hỗ trợ lập trình theo mơ hình MVC Tuy nhiên, Yii có nhiều ưu điểm đơn giản viết kết hợp với mạnh “scripting” PHP chế mảng index Yii hướng component nên múc độ tái sử dụng project cao Yii đặc biệt có tốc độ chạy nhanh framework Zend, Symfony 1.2.4 Bootstrap Bootstrap CSS Framework phổ biến nay, Twitter phát triển CSS Framework có ưu điểm hỗ trợ khả responsive ( tức trang web tự động co giãn theo kích thước cửa sổ trình duyệt), tương thích tốt với thiết bị cỡ nhỏ, với phổ biến smartphone, tablet nay, yếu tố vô quan trọng giúp nhà thiết kế, phát triển ứng dụng web không cần phải design riêng cho mobile hay PC, mà cần thiết kế lần cho thiết bị Việc giúp tiết kiệm chi phí cho người chủ ứng dụng 10 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh h) Thực thể nhân viên giao hàng SĐT Tên NVGH SĐT Nhân viên GH ID i)Thực thể bình luận Ngày Nội dung Họ tên Điên thoại Bình luận ID 27 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 2.3.2 Mơ hình thực thể liên kết Hình 2.8 Mơ hình thực thể liên kết 28 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 2.4 Xử lý chức 2.4.1 Xử lý đăng nhập Bước 1: Kiểm tra liệu đầu vào từ ô tài khoản mật mà người dùng nhập vào - Nếu liệu rỗng thơng báo lỗi cho người dùng biết - Ngược lại lưu thông tin vào $username, $password Bước 2: So sánh $username, $password với ghi có sở liệu bảng user Sử dụng câu truy vấn "SELECT * FROM user WHERE username='$username' AND password='$password'"; - Nếu kết câu truy trả khác cho người dùng đăng nhập, chuyển đến trang quản trị tạo phiên làm việc cho người dùng (Sử dụng $_Session) - Ngược lại thông báo tài khoản mật người dùng nhập vào không hợp lệ 2.4.2 Xử lý chức hiển thị thông tin Bước 1: Sử dụng câu truy SQL để lấy liệu từ database Ví dụ: "SELECT * FROM user ORDER BY user_id DESC"; Bước 2: Sử dụng vòng lặp while(){} để lấy ghi câu truy vấn Sau hiển thị ghi qua câu lệnh echo 29 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh Ví dụ: Trong Yii ta sử dụng hàm hỗ trợ findAll(), findAllBySql()… 2.4.3 Xử lý chức thêm Bước 1: Kiểm tra thông tin đầu vào - Nếu liệu rỗng thơng báo lỗi cho người dùng biết - Ngược lại lưu thông tin người dùng nhập vào biến trung gian Bước 2: Sử dụng câu truy vấn sql để insert liệu vào database Ví dụ: INSERT INTO user(user_name, username, password) VALUES('$user_name', '$username', '$password')"; Trong Yii ta sử dụng hàm hỗ trợ $object ->save() 30 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 2.4.4 Xử lý chức sửa Bước 1: Xác định id ghi cần sửa ($_GET[id]) Bước 2: Hiển thị thông tin ghi cần sửa lên trình duyệt web Sử dụng câu truy vấn sql để xác định ghi Ví dụ: "SELECT * FROM user WHERE user_id = $user_id"; Bước 3: Sau người dùng sửa thông tin mong muốn Khi họ nhấn gửi thông tin lên Server, thông tin nhập vào hợp lệ thơng tin lưu vào biến trung gian Bước 3: Sử dụng câu truy vấn sql để cập nhật thông tin vừa người dùng chỉnh sửa, thông tin từ biến trung gian lưu vào database Ví dụ: "UPDATE user SET user_name ='$user_name', password='$password' WHERE user_id = $user_id"; username='$username', Trong Yii ta sử dụng hàm hỗ trợ update() để cập nhật thơng tin 2.4.5 Xử lý chức xóa Bước 1: Xác định id ghi cần xóa biến $_GET(id), truyền biến id URL, Controller phụ trách việc lấy thơng tin biến id Bước 2: Sử dụng câu truy vấn sql để xóa thơng tin cần loại bỏ Ví dụ: "DELETE FROM user WHERE user_id = $user_id"; Trong yii ta sử dụng hàm delete() để xóa ghi 31 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 2.4.6 Xử lý giỏ hàng Bước 1: Kiểm tra $_SESSION[cart][id] tồn chưa - Nếu tồn $_SESSION['cart'][$id]+=1; - Ngược lại $_SESSION['cart'][$id] =quantity, (quantity số lượng sản phẩm khách hàng đặt mua) $_SESSION['cart'][$id] số lượng sản phẩm giỏ hàng Bước 2: Dựa vào $_SESSION['cart'][$id] Hiển thị sản phẩm mà khách hàng mua - Dùng vòng lặp foreach() lấy id_sp mảng $_SESSION['cart'][$id] Lưu thông tin id_sp vào mảng chiều $arrayId[] - Sử dụng hàm implode() để nối id_sp theo dấu „,‟ tạo thành chuỗi $strId - Sử dụng câu truy vấn "SELECT * FROM phones WHERE id IN($strId)"; để hiển thị liệu Bước 3: Khách hàng chọn chức giỏ hàng Nếu: - Khách hàng muốn xóa sản phẩm giỏ hàng, ta xác định id sản phẩm muốn xóa Dùng hàm “unset($_SESSION['cart'][$id]);” để xóa mặt hàng yêu cầu - Khách hàng muốn xóa hết sản phẩm để chọn mua lại từ đầu, ta dùng hàm unset($_SESSION['cart']); - Khi khách hàng muốn cập nhật lại số lượng mặt hàng ta gán $_SESSION['cart'][id] cho $quantity $quantity biến chứa liệu người dùng nhập vào Nếu $quantity >0 cho phép cập nhật lại số lượng Nếu $quantity = 0, ta hiểu khách hàng muốn xóa sản phẩm - Khi khách hàng chọn đặt hàng redirect đến trang đặt hàng - Khách hàng chọn mua tiếp đưa khách hàng trang chủ để mua tiếp mặt hàng 32 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh CHƢƠNG III THIẾT KẾ HỆ THỐNG 3.1 Thiết kế bảng liệu - Các bảng liệu STT 10 Tên bảng User Customer Phones Category Order Order_detail Comment Sell_phones Status Deliverer Diễn giải Bảng người dùng Bảng khách hàng Bảng điện thoại Bảng danh mục sản phẩm Bảng đơn đặt hàng Bảng chi tiết đơn đặt hàng Bảng bình luận Điện thoại bán chạy Bảng tình trạng đơn đặt hàng Bảng nhân viên giao hàng - Bảng User STT Tên trường User_id Username Password Name Diễn giải Id người dùng Tài khoản người dùng Mật người dùng Tên người dùng Kiểu liệu Int(11) Varchar(50) Varchar(50) Varchar(25) Khóa Khóa 33 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh - Bảng Customer STT Tên trường Customer_id Customer_name Customer_phone Customer_mail Diễn giải Id khách hàng Tên khách hàng Số điện thoại khách hàng Mail khách hàng Kiểu liệu Int(11) Varchar(25) Varchar(15) Varchar(100) Khóa Khóa Diễn giải Id sản phẩm Tên điện thoại Tiêu đề sản phẩm Mô tả sản phẩm Giá sản phẩm Số lượng điện thoại Kích thước sản phẩm Trọng lượng sản phẩm Màu sắc sản phẩm Hình ảnh Bộ nhớ Hệ điều hành máy Tốc độ CPU Camera trước Loại pin, số hoạt động Chế độ bảo hành Bluetooth Mạng wlan Giá khuyển Ngày bắt đầu khuyến Ngày kết thúc khuyến Kiểu liệu Int(11) Varchar(255) Varchar(255) Varchar(255) Int(12) Int(4) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) Varchar(255) In(11) Datetime Datetime Khóa Khóa - Bảng Phones STT 10 11 12 13 14 15 16 17 18 19 20 21 22 Tên trường Id Name_phone Title Description Price Quantity Size Weight Color Image Memory Os Cpu_speed Camera _primary Battery Warranty Bluetooth Wlan Promotion_price Start_promotion End_promotion 34 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh - Bảng Category STT Tên trường Id Category_name Parent_id Diễn giải Id danh mục Tên danh mục Id danh mục cha Kiểu liệu Int(11) Varchar(50) Int (11) Khóa Khóa - Bảng Order STT Tên trường Order_id Customer_id Status_id Deliverer_id Create_date Total_price Delivery_address note Diễn giải Id hóa đơn Id khách hàng Id tình trạng đơn đặt hàng Id nhân viên giao hàng Ngày lập đơn đặt hàng Tổng giá trị đơn hàng Địa điểm nhận đơn hàng Ghi Kiểu liệu Int(11) Int(11) Int(3) Int(11) Datetime Int(11) Varchar(255) Varchar(255) Khóa Khóa Khóa ngoại Khóa ngoại Khóa ngoại Diễn giải Id bình luận Id sản phẩm Họ tên người bình luận Ngày bình luận Nội dung bình luận Điện thoại người bình luận Kiểu liệu Int(11) Int(11) Varchar(25) Datetime Varchar(255) Varchar(25) Khóa Khóa Khóa ngoại - Bảng Comment STT Tên trường Comment_id Phone_id Full_name Comment_time Comment_content Phone_number 35 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh - Bảng Order_detail STT Tên trường Order_detail_id Order_id Product_id price Sale_quantity Diễn giải Id chi tiết hóa đơn Id hóa đơn Id sản phẩm Giá loại sp mua Số lượng sp hóa đơn Kiểu liệu Int(11) Int(11) Int(11) Int(11) Int(5) Khóa Khóa Khóa ngoại Khóa ngoại Kiểu liệu Int(11) Int(11) Int(11) Datetime Khóa Khóa Khóa ngoại - Bảng Sale_phones STT Tên trường Id Phone_id Quantity Create_date Diễn giải Id sản phẩm bán Id sản phẩm Số lượng bán Ngày bán - Bảng Status STT Tên trường Status_id status Diễn giải Id tình trạng đơn đặt hàng Tình trạng đơn đặt hàng Kiểu liệu Int(11) Varchar(255) Khóa Khóa - Bảng Deliverer STT Tên trường Deliverer_id Deliverer_name Deliverer_phone Diễn giải Id nhân viên giao hàng Tên nhân viên giao hàng Số điện thoại nvgh Kiểu liệu Khóa Int(11) Khóa Varchar(50) Varchar(11) 36 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 3.2 Kết nối bảng sở liệu Hình 3.1 Kết nối bảng CSDL 37 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 3.3 Thiết kế bảng Diagram Hình 3.2 Bảng Diagram 38 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh 3.4 Thiết kế Giao diện website Hình 3.3 Giao diện quản trị 39 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh KẾT LUẬN Trên tồn nội dung đề tài mơn học đồ án 3: “Xây dựng website bán hàng cho cửa hàng bán điện thoại di động”, xử lý chức ngơn ngữ lập trình PHP hệ quản trị sở liệu MySql Thực đề tài lần em lập trình ứng dụng web, kiến thức kĩ hạn chế, nên khó tránh khỏi thiếu xót Website cần phát triển thêm nhiều chức hỗ trợ người dùng, người quản trị Do hướng phát triển đề tài là: Xử lý tăng tốc tốc độ website Xử lý với liệu lớn Tối ưu hóa cho cơng cụ tìm kiếm Google, Bing… Tạo báo cáo, thống kê theo thời gian, địa điểm Hỗ trợ gia định mua hàng người dùng Hỗ trợ người quản trị định trọng phát triển mặt hàng tương lai… Tích hợp thêm cơng cụ toán trực tuyến Bảo Kim, PayPal… Khắc phục lỗ hổng bảo mật Nhưng qua việc thực đề tài môn học Đồ Án III, phần giúp em hiểu thêm kiến trúc Client/Server, lập trình ngôn ngữ PHP, sử dụng flamework phổ biến lập trình ứng dụng web Yii, reponsive giao diện, xử lý thành công chức website quản lý sản phẩm, nhân viên giao hàng, người dùng, đơn đặt hàng, xử lý giỏ hàng, hỗ trợ tối ưu hóa cơng cụ tìm kiếm… Một lần em xin gửi lời cám ơn Ngơ Thị Hiền nhiệt tình hướng dẫn em hoàn thành đề tài 40 ĐỒ ÁN III SVTH: Nguyễn Danh Thanh TÀI LIỆU THAM KHẢO Nguyễn Danh Tú, Slide giảng phân tích thiết kế hệ thống thông tin Nguyễn Thị Thu Huyền, Slide giảng sở liệu Nguyễn Kim Anh, Nguyên Lý hệ sở liệu, Nhà xuất đại học Quốc Gia Hà Nội 2009 Phạm Hữu Khang, Lập trình web PHP 5.3 sở liệu MySql 5.1, Nhà xuất Phương Đông 2010 Lập trình ứng dụng web với PHP trường KHTN – Đại học Quốc Gia Tp.Hồ Chí Minh Website www.qhonline.info www.sinhvienit.net www.vn-zoom.com 41 ... tài: Xây dựng website bán hàng cho cửa hàng bán điện thoại di động làm đề tài môn học Đồ Án III Nội dung đề tài gồm có phần: Phần 1: Kiến thức sở Trình bày kiến thức để thiết kế, vận hành website. .. điện thoại di động bao gồm: tên điện thoại, hãng sản xuất, giá điện thoại, tình trạng hàng hay hết hàng Người xem bình luận sản phẩm, nội dung thơng tin người bình luận cần lưu database Xem hàng. .. trị cho người dùng xem Đầu ra: Thông tin mặt hàng h) Xem điện thoại bán chạy: Hiển thị thông tin điện thoại bán chạy cửa hàng Đầu vào: Thông tin sản phẩm Xử lý: Hệ thống lựa chọn mặt hàng