Thiết kế website điện tử chuyên nghiệp, đa dạng, phong phú, chuyên CNTT, Thiết kế web.Thiết kế website điện tử chuyên nghiệp, đa dạng, phong phú, chuyên CNTT, Thiết kế web. Thiết kế website điện tử chuyên nghiệp, đa dạng, phong phú, chuyên CNTT, Thiết kế web
TRƯỜNG CAO ĐẲNG CƠNG THƯƠNG TP HCM Khoa Cơng Nghệ Thơng Tin BỘ CƠNG THƯƠNG TRƯỜNG CAO ĐẲNG CƠNG THƯƠNG TP.HCM KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN CHUYÊN NGÀNH TÌM HIỂU VỀ CODEIGNITER VÀ XÂY DỰNG WEBSITE KINH DOANH THIẾT BỊ ĐIỆN TỬ Giảng viên hướng dẫn: Hồ Diên Lợi Thực hiện: Lềnh Bắc Sáng MASV: 2114110053 LỚP: CCQ1411A TP Hồ Chí Minh – Ngày 25 Tháng 12 năm 2016 LỜI NHẬN XÉT ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… …………………………………………………………… i ` Trang LỜI CÁM ƠN Để hoàn thành hoàn thành đồ án cở sở ngành, em xin tỏ lòng biết ơn sâu sắc đến thầy Hồ Diên Lợi tận tình hướng dẫn em suốt trình làm Em xin chân thành cám ơn thầy cô khoa Công nghệ thông tin- trường Cao đẳng Cơng Thương TP.HCM tận tình giúp đỡ, truyền đạt kiến thức, tạo điều kiện để em hoàn thành đồ án sở tốt Với vốn kiến thức tiếp thu q trình học tập khơng tảng cho q trình làm mà hành trang quý báu để em bước vào đời cách vững tự tin Trong trình học tập làm bài, em có chỗ sai sót em mong q thầy bỏ qua Cuối cùng, em xin chúc thầy dồi sức khỏe, hạnh phúc thành công nghiệp cáo quý- nghiệp giáo dục Em xin chân thành cảm ơn Mục lục LỜI NHẬN XÉT .i LỜI CÁM ƠN ii DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT .3 DANH MỤC CÁCH BẢNG DANH MỤC HÌNH CHƯƠNG TỔNG QUAN 1.1 Lý chọn đề tài .6 1.2 Mục đích 1.3 Đối tượng, phạm vi nghiên cứu 1.4 Phương pháp nghiên cứu .7 CHƯƠNG CỞ SỞ LÝ THUYẾT .8 2.1 Giới thiệu Xampp 2.1.1 Cài đặt Xampp 2.2 Tổng quan CodeIgniter .10 2.2.1 CodeIgniter gì? 10 2.2.2 Đặc điểm CodeIgniter 10 2.2.3 Những điểm hạn chế 12 2.2.4.Mơ hình MVC 13 2.2.5 Model 14 2.2.6 View 14 2.2.7 Controller .14 2.2.8 Thư viện CodeIgniter 14 2.3 Giới thiệu Twitter Bootstrap 15 2.3.1 Giới thiệu .15 2.3.2 Tại nên sử dụng Twitter Bootstrap 16 2.3.3.Cài đặt Twitter Bootstrap .16 Chương XÂY DỰNG WEBSITE BÁN HÀNG .17 3.1 Phân tích chức .17 3.1.2 Chức người dùng 17 3.1.3 Chức người quản trị .17 3.2 Phân tích thiết kế Cơ Sở Dữ Liệu 18 3.2.1 Diagram 18 3.2.2 Mô tả Bảng 18 3.3 Thiết kế giao diện 24 3.3.1 Giao diện người dùng 24 3.3.2 Giao diện trang quản trị 30 Kết luận 34 DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT AJAX: CSDL: Cở sở liệu XSS :Cross Site Scripting AJAX :Asynchronous Javascript and XML ( Javascript XML không đồng bộ) ORM :Object-Relational Mapping CSS : Cascading Style Sheets, HTML: Hypertext Markup Language DANH MỤC CÁCH BẢNG BẢNG 1: CHỦ ĐỀ SẢN PHẨM 14 BẢNG 2:CHỦ DỀ BÀI VIẾT 14 BẢNG 4: BÀI VIẾT 16 BẢNG 5: LIÊN HỆ 16 BẢNG 6: KHÁCH HÀNG 17 BẢNG 7: BẢNG ĐẶT HÀNG 18 BẢNG 8: BẢNG CHI TIẾT HÓA ĐƠN 18 BẢNG 9: BẢNG TÀI KHOẢN 19 3.2 Phân tích thiết kế Cơ Sở Dữ Liệu 3.2.1 Diagram Hình 6: diagram 3.2.2 Mơ tả Bảng Bảng chủ đề sản phẩm STT Thuộc tính id Kiểu liệu int(11) Ràng buộc Khóa Diễn giải Mã chủ đề sản name varchar(255) phẩm Tên chủ đề sản link parentid varchar(250) int(11) phẩm Liên kết Mã chủ đề sản created_at created_by datetime varchar(255) phẩm cha Ngày đăng Được đăng updated_at datetime Ngày cập nhật updated_by varchar(255) Được cập nhật 10 11 trash access status tinyint(1) tinyint(1) tinyint(1) Bảng 1: Chủ đề sản phẩm Thùng rác Truy cập Trạng thái Bảng chủ đề viết ST Thuộc tính Kiểu liệu Ràng buộc T 19 Diễn giải 10 11 id name link parentid created_at created_by updated_at updated_by trash access status int(11) Khóa Mã chủ đề viết varchar(255) Tên chủ đề viết varchar(255) Liên kết int(11) Mã chủ đề viết cha datetime Ngày đăng varchar(255) Được đăng datetime Ngày cập nhật varchar(255) Được cập nhật tinyint(1) Thùng rác tinyint(1) Truy cập tinyint(1) Trạng thái Bảng 2:Chủ dề viết Bảng sản phẩm STT Thuộc tính id Kiểu liệu int(11) Ràng buộc Khóa Diễn giải Mã sản phẩm catid name alias img detail number int(11) Khóa ngoại varchar(255) varchar(255) varchar(255) text int(11) Mã chủ đề sản phẩm Tên sản phẩm Liên kết Hình sản phẩm Chi tiết sản phẩm Số lượng 10 11 12 13 14 number_buy price price_sale created_at created_by updated_at updated_by int(11) int(11) int(11) datetime varchar(255) datetime varchar(255) Số lượng bán Giá bán Giá khuyến Ngày đăng Được đăng Ngày cập nhật Được cập nhật 15 16 17 trash access status tinyint(1) tinyint(1) tinyint(1) Thùng rác Truy cập Trạng thái Bảng 3: Sản phẩm Bảng viết STT Thuộc tính id catid title alias Kiểu liệu Ràng buộc int(11) Khóa int(11) Khóa ngoại varchar(255) varchar(255) 20 Diễn giải Mã viết Mã chủ đề viết Tên viết Liên kết 10 detail img created_at created_by updated_at updated_by longtext varchar(255) datetime varchar(255) datetime varchar(255) Chi tiết viết Hình viết Ngày đăng Được đăng Ngày cập nhật Được cập nhật 11 12 13 trash access status tinyint(1) tinyint(1) tinyint(1) Thùng rác Truy cập Trạng thái Bảng 4: Bài viết Bảng liên hệ STT Thuộc tính id fullname email phone title content Kiểu liệu Ràng buộc int(11) Khóa varchar(50) varchar(20) varchar(15) varchar(255) text Bảng 5: Liên hệ Diễn giải Mã liên hệ Tên đầy đủ Email Số điện thoại Tiêu đề Nội dung Bảng khách hàng STT 10 11 12 13 14 Thuộc tính id fullname username password gender birthday address city phone email created trash access status Kiểu liệu Ràng buộc Diễn giải int(11) Khóa Mã khách hàng varchar(100) Tên đầy đủ varchar(100) Tên tài khoản varchar(32) Mật tinyint(1) Giới tính date Ngày sinh varchar(100) Địa varchar(100) Thành phố varchar(13) Số điện thoại varchar(50) Địa email datetime Ngày tạo tinyint(1) Thùng rác tinyint(1) Truy cập tinyint(1) Trạng thái Bảng 6: khách hàng Bảng đặt hàng STT Thuộc tính Kiểu liệu Ràng buộc 21 Diễn giải 10 11 12 id customerid orderdate requireddate shipperdate total address city country trash access status int(11) Khóa Mã đơn hàng int(11) Khóa ngoại Mã khách hàng date Ngày đặt hàng date Ngày yêu cầu date Ngày giao hàng varchar(255) Tổng varchar(100) Địa varchar(100) Thành phố varchar(100) Quốc gia tinyint(1) Thùng rác tinyint(1) Truy cập tinyint(1) Trạng thái Bảng 7: Bảng đặt hàng Bảng chi tiết đơn hàng STT Thuộc tính id orderid productid price amount discount trash access status Kiểu liệu Ràng buộc Diễn giải int(11) Khóa Mã chi tiết đơn hàng int(11) Khóa ngoại Mã đơn hàng int(11) Khóa ngoại Mã khách hàng varchar(255) Giá int(11) Số lượng int(11) Chiết khấu tinyint(1) Thùng rác tinyint(1) Truy cập tinyint(1) Trạng thái Bảng 8: Bảng chi tiết hóa đơn Bảng tài khoản STT 3.3 Thuộc tính id fullname username password email gender phone Kiểu liệu Ràng buộc Diễn giải int(11) Khóa Mã tài khoản varchar(255) Tên đầy đủ varchar(255) Tên tài khoản varchar(64) Mật varchar(255) Địa email tinyint(1) Giới tính varchar(15) Số điện thoại Bảng 9: Bảng tài khoản Thiết kế giao diện 22 3.3.1 Giao diện người dùng Toàn website sử dụng Framework CSS Bootstrap tự động co giãn giao diện cho phù hợp với loại Desktop, Tablet, Phalet, Phone… Layout Header Hình 7: heder Vùng header trang web hiển thị sau: Logo website Textbox tìm kiếm sản phẩm Nút link Facebook Google plus, instagram, twitter Link đăng nhập đăng ký Menu ngang Footer Hình 8: footer Vùng Footer web hiển thị sau: Thông tin website Địa shop 23 Nút link Facebook Google plus, instagram, twitter Hộp thư, email… Giao diện trang chủ Trang chủ web hiển thị sau: Hiển thị Slide ảnh Sản phẩm theo mục Hình 9: trang chủ Hiển thị thơng tin sản phẩm Hình ảnh sản phẩm: mơ tả thực tế sản phẩm 24 Nút thêm vào danh sách sản phẩm yêu thích Tên sản phẩm Giá bán: tính theo VNĐ Nút thêm sản phẩm vào giỏ hàng Hình 10: thơng tin sản phẩm Giao diện trang đăng ký thành viên Địa Email dùng để đăng nhập: có ràng buộc @ Mật nhập lại mật Các thông tin cá nhân thành viên Captcha bảo mật tránh DDos 25 Hình 11: Ảnh chụp giao diện trang đăng ký thành viên Giao diện trang đăng nhập Hình 12: Ảnh chụp giao diện trang đăng nhập 26 Người dùng có tài khoản: Nhập Địa email Tìm hiểu framework code Igniter Nhập Password Người dùng chưa có tài khoản: vui lòng đăng kí tài khoản để thực chức web Giao diện trang liên hệ Địa Email dùng để đăng nhập: có ràng buộc @ Khách hàng liên hệ trực tiếp với người quản lý trang web Hình 13: form liên hệ Giao diện giỏ hàng Hiển thị danh sách sản phẩm thêm vào giỏ mả khách hàng bấm thêm vào trước đó, giỏ hàng lưu session nên dù khách hàng có thành viên hay khơng thêm sản phẩm vào giỏ hàng Bảng điền thông tin cá nhân người nhận hàng: cần phải điền đầy đủ xác thông tin để thuận lợi cho việc vận chuyển hàng hố 27 Hình 14: Ảnh chụp giao diện trang giỏ hàng Giao diện hiển thị sản phẩm Hiển thị ảnh sản phẩm Thông tin sản phẩm Màu sắc sản phẩm Size số lượng mua sản phẩm Tab thông tin chi tiết sản phẩm Hình 15: thơng tin sản phẩm 28 3.3.2 Giao diện trang quản trị Trang đăng nhập quản trị Khi Đăng nhập thành công chuyễn đến trang quản trị Hình 16: Trang đăng nhập quản trị website Khi đăng nhập vào quyền admin (id: admin - password: admin), ta tồn quyền quản lí mà ngƣời dùng hay tác nhân khơng làm Admin có quyền quản lí cơng việc như: Thêm sản phẩm Xem danh sách sản phẩm Cập nhật sản phẩm: thêm, xoá, sửa sản phẩm Duyệt đơn hàng Quản lí người dùng Và chức khác Trang thêm sản phẩm Gồm thông tin sản phẩm Tên sản phẩm 29 Chi tiết sản phẩm Chủ đề sản phẩm Giá bán Giá khuyến Số lượng sản phẩm Hình sản phẩm Quyền trạng thái sản phẩm Hình 17: thêm sản phẩm Trang quản lý danh sách sản phẩm Cho phép quản lý tìm kiếm sản phẩm Cập nhật trạng thái Cập nhật sản phẩm Chỉnh sửa sản phẩm Nút chọn: xóa sản phẩm 30 Hình 18: Trang quản lý sản phẩm Trang thêm tin tức Gồm thông tin tin tức Tiêu đề Nội dung viết Chủ đề viết Hình dại diện viết Quyền trạng thái sản phẩm Hình 19: thêm viết 31 Trang quản lý danh sách viết Cho phép quản lý tìm kiếm viết Cập nhật trạng thái Cập nhật viết Chỉnh sửa viết Nút chọn: xóa viết Hình 20: quản lý viết Kết luận Với việc xây dựng Website thiết bị điện tử giúp ích nhiều cho chủ cửa hàng, điện máy vừa nhỏ quản lý sản phẩm 32 thống kê giao dịch, cơng việc rút ngắn xuống Có thể quảng bá thương hiệu cách rộng rãi hơn, giúp người tiêu dùng tiếp cận trang thiết bị mà không cần phải đến trực tiếp Người tiêu dùng gửi phản ánh thắc mắc sản phẩm cho chủ cửa hàng biết Cụ thể trang bán hàng online như: Quản lý tốt đa số thành phần nội dung Website thông qua trang admin Quản lý chặt chẽ tài khoản thành viên để tránh thông tin ảo cho Website bảo mật tài khoản cho thành viên Chức Website chia thành module giúp dễ dàng chỉnh sửa, nâng cấp Chức đăng sản phẩm tin tức dễ dàng cho người quản lý Website Chức người dùng xem chi tiết sản phẩm, sản phẩm loại Chức người dùng biết thêm tin tức công nghệ Chức người dùng mua hàng từ xa, đặt trước, cách vận chuyển giao hàng Chức người dùng chia sẻ thông tin mong muốn Hướng phát triển Phát triển hỗ trợ tư vấn trực tiếp với người dùng đăng nhập từ facebook, hay trang mạng xã hội Phát triển toán trực tiếp phương diện thẻ nước 33 ... giao diện, liệu từ website: lazada.vn,zalora.vn,… Xây dụng lộ trình phát triển website dựa vào kết khảo sát Tìm hiểu framework code Igniter: • Hiểu rõ mơi hình MVC viết website • Lập trình... đánh giá hiệu hệ thống Hỗ trợ tạo lịch tự động 14 Cart: Hỗ trợ chức giỏ hàng website thương mại điện tử Config: Cho phép thiết lập hệ thống Database: Hỗ trợ thao tác sở liệu Email: Hỗ trợ gửi email... varchar(255) Địa email tinyint(1) Giới tính varchar(15) Số điện thoại Bảng 9: Bảng tài khoản Thiết kế giao diện 22 3.3.1 Giao diện người dùng Toàn website sử dụng Framework CSS Bootstrap tự động co giãn