BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG TP.HCM KHOA CƠNG NGHỆ THƠNG TIN ĐỒ ÁN CHUN 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 BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG TP.HCM KHOA CÔNG NGHỆ THƠNG TIN ĐỒ ÁN CHUN 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 Sinh viên thực hiện: Lềnh Bắc Sáng MSV: 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 chuyên 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 trình học tập khơng tảng cho q trình làm mà hành trang q 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 quý thầy cô 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 DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT 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 DANH MỤC HÌNH 10 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) 24 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 25 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 26 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 − Nút link Facebook Google plus, instagram, twitter 27 − 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 28 − 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 29 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 30  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ố 31 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 32 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 toà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 33 − 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 34 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 35 Hình 19: thêm viết  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 36 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 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 37 DANH MỤC TÀI LIỆU THAM KHẢO Tài liệu tiếng việt [1] Tìm hiểu codeigniter framework xây dựng website bán hàng (Trần Ngọc Thuận) [2] Đồ Án Cơ Sở: Tìm Hiểu PHP Framework CodeIgniter đại học kỹ thuật công nghệ thành phố hồ chí minh 4/ 1/ 2010 [3] Đồ án tìm hiểu php framework codeigniter trường đại học Công Nghệ TP.HCM Tài liệu Internet [4] https://ellislab.com/codeigniter/user-guide [5] http://getbootstrap.com/components/#nav [6] http://hocwebchuan.com/reference/tag/html5 Phần mềm sử dụng [7] Sublime Text [8] Photoshop CS6 38 ... 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... chỉnh sửa, bảo trì, dễ dàng thiết kế, chất MVC nên CodeIgniter khuyến khích lập trình viên sử dụng lớp model 2.2.6 View View đơn giản tập tin HTML trang web, mảnh web, header, footer, sidebar…... học hóa để xây dựng website 12 CHƯƠNG CỞ SỞ LÝ THUYẾT 2.1 Giới thiệu Xampp Để chạy CodeIgniter ta cần phải có WebServer với Apache, MySQL, PHP Perl, việc cài đặt cấu hình WebServer gặp nhiều