Tìm hiểu và xây dựng website thương mại điện tử kí gửi đồ cổ bằng mã nguồn mở opencart

TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN LÊ MẠNH CƢỜNG BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài : Tìm hiểu xây dựng website thương mại điện tử kí gửi đồ cổ mã nguồn mở Opencart Nghệ An, tháng năm 2016 TRƯỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Sinh viên thực hiện: Lê Mạnh Cƣờng Mã sinh viên: 1151073721 Lớp: 52k2 – CNTT Giáo viên hướng dẫn: TS Phan Lê Na Nghệ An, tháng năm 2016 Đồ án tốt nghiệp đại học Mục Lục LỜI CẢM ƠN LỜI MỞ ĐẦU CHƢƠNG : GIỚI THIỆU VỀ OPENCART 1.1 Khái niệm Opencart 1.1.1 Khái niệm 1.1.2 Cấu trúc thƣ mục Opencart 1.1.3 Cách làm việc mơ hình MVC(L) Opencart 1.2 Các đặc tính bật Opencart .7 1.3 Giới thiệu phần mềm Wamp 1.4 Việt hóa Opencart CHƢƠNG : KHẢO SÁT PHÂN TÍCH VÀ XÂY DỰNG WEB KÍ GỬI ĐỒ CỔ 11 2.1 Mục tiêu yêu cầu xây dựng hệ thống .11 2.1.1 Mục tiêu 11 2.1.2 Yêu cầu xây dựng hệ thống 11 2.2 Khảo sát trạng trang web kí gửi đồ cổ 11 2.2.1 Hiện trạng trang web kí gửi đồ cổ 11 2.2.2 Yêu cầu đặt để phát triển trang web 11 2.3 Phân tích hệ thống .12 2.3.1 Yêu cầu chi tiết Website 12 2.3.2 Đối với truy cập ngƣời dùng 12 2.3.3 Đối với Admin 12 2.4 Các chức cụ thể 12 2.4.1 Mô tả chức 12 2.4.2 Phân tích chức 13 2.4.3 Phân tích sơ đồ website mức ngữ cảnh 15 2.5 Cài đặt Opencart Localhost 19 2.5.1 Cài đặt Opencart với Wamp 19 2.5.2 Cài đặt Opencart 23 2.6 Cài đặt Opencart Trên Hosting 26 2.6.1 Đăng kí Hosting Domain 26 2.6.2 Cài đặt Website Hosting 26 CHƢƠNG 3: THIẾT KẾ WEBSITE KÍ GỬI ĐỒ CỔ 29 3.1 Giao diện trang chủ .29 3.2 Giao diện trang sản phẩm 30 3.4 Giao diện trang liên hệ 32 3.5 Giao diện trang đăng kí .33 3.6 Giao diện trang quản lý admin 34 KẾT LUẬN 35 TÀI LIỆU THAM KHẢO 36 Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |1 ~o0o~ Đồ án tốt nghiệp đại học LỜI CẢM ƠN Lời cho phép em gửi lời cảm ơn sâu sắc tới toàn thể thầy cô giáo khoa Công Nghệ Thông Tin – Đại học Vinh, người truyền đạt cho chúng em kiến thức quý báu bổ ích suốt năm học vừa qua Để hoàn thành đồ án này, đặc biệt em xin bày tỏ cảm động xin chân thành cảm ơn cô giáo TS Phan Lê Na – Trưởng khoa Công nghệ thông tin, Trường Đại học Vinh, người trực tiếp hướng dẫn, bảo em suốt trình học tập nghiên cứu để hoàn thành đồ án Cuối xin biết ơn động viên gia đình giúp đỡ tận tình bạn bè suốt trình học tập, nghiên cứu để hoàn thành đồ án Vinh, tháng năm 2016 Sinh viên Lê Mạnh Cường Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |2 ~o0o~ Đồ án tốt nghiệp đại học LỜI MỞ ĐẦU Ngày sống kỷ nguyên khoa học công nghệ, đặc biệt công nghệ thông tin Trong thời đại bùng nổ thơng tin có nhiều phương thức truyền đạt thơng tin phương thức truyền thơng tin cơng nghệ số hình thức phổ biến nhất, nhiều người tiếp cận Công nghệ thông tin khơng dừng lại mục đích phục vụ cho khoa học kỹ thuật mà sâu vào đời sống, trị, kinh tế, xã hội, trở nên thân thiện, gần gũi, mang lại nhiều lợi ích cho người, đặc biệt lĩnh vực kinh tế, công nghệ thông tin thực có nhiều đóng góp quan trọng cơng việc quản lý, quảng cáo sản phẩm, hồng hóa cơng ty, xí nghiệp, doanh nghiệp lớn nhỏ Những ứng dụng công nghệ thông tin mang lại nhiều lợi ích khơng nhỏ, đạt hiệu kinh tế cho cơng ty, xí nghiệp Muốn bán đưa sản phẩm cho người biết cách rộng rãi nhanh chóng cần phải quảng cáo Vì vậy, xây dựng website quảng cáo bán sản phẩm điều tối cần thiết công ty, doanh nghiệp để tồn phát triển kinh tế thị trường cạnh tranh khốc liệt ngày Thực tế website bán hàng trực tuyến xây dựng dựa mã nguồn xây dựng sẵn, có nhiều ưu điểm giúp cho doanh nghiệp đưa gian hàng lên thị trường Internet Chính vậy, em chọn đề tài “Tìm hiểu xây dựng website thương mại điện tử kí gửi đồ cổ mã nguồn mở Opencart” Bao gồm chương: Giới thiệu Opencart Khảo sát phân tích xây dựng website kí gửi đồ cổ Thiết kế website kí gửi đồ cổ Với kiến thực hạn hẹp, thời gian nghiên cứu không dài, tài liệu tham khảo có chưa nhiều, đồ án khơng tránh khỏi sai sót Mong q thầy bạn chia sẻ, góp ý để đồ án hoàn thiện Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |3 ~o0o~ Đồ án tốt nghiệp đại học CHƢƠNG : GIỚI THIỆU VỀ OPENCART Đây chương mở đầu đề tài Mục đích chương giới thiệu tổng quan môi trường phát triển đề tài Nội dung bao gồm giới thiệu Opencart: khái niệm cấu trúc cách làm việc Opencart; giới thiệu Wamp: khái niệm, công cụ cách thức cài đặt 1.1 Khái niệm Opencart 1.1.1 Khái niệm OpenCart mã nguồn mở Opencart mã nguồn opensource (mã nguồn mở) viết ngôn ngữ PHP phát triển làm giải pháp giành riêng cho bán hàng trực tuyến Opencart viết gần đầy đủ chức bán hàng cho website Hiện Opencart tích hợp thêm modun tin tức hỗ trợ chuẩn Seo, giúp website dễ dàng google tìm kiếm Opencart mã nguồn mở miễn phí Người dùng có chỉnh sửa theo ý muốn để website thích hợp nhu cầu sử dụng Trong lĩnh vực thiết kế site bán hàng, Opencart quản lý hệ thống CMS lớn với phần mua hàng, điểm thưởng Opencart có tính độc đáo tự build theme, tạo khả sáng tạo cho người dùng, với chế độ quản lý điểm cộng, điểm thưởng, quản lý gian hàng rõ ràng hiệu quả, tính dễ sử dụng điều người viết cân nhắc OpenCart hệ thống giỏ hàng Opencart đầu tư công phu cho việc sử dụng, quản lý gian hàng, khách hàng Nó chưa module cho phép sử dụng mục đích khác nhau, giới thiệu sản phẩm, sản phẩm đưa trưng bày… Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |4 ~o0o~ Đồ án tốt nghiệp đại học 1.1.2 Cấu trúc thư mục Opencart Ý nghĩa thư mục là:       Admin: Chứa thư mục tập tin trang quản trị Website Catalog: Chứa thư mục tập tin trang hiển thị nội dung Image: Chứa loại ảnh Website upload lên System: Chứa thư mục tập tin hệ thống Opencart, đóng vai trị framework File index.php: Thư mục file index.php thư mục khác chứa nhiều khai báo từ system điều hướng Hai folder Admin Catalog có cấu trúc giống sau: - Controller - Language - Model - View Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |5 ~o0o~ Đồ án tốt nghiệp đại học Đây mơ hình MVC có thêm thư mục Language, thư mục chứa thư mục ngôn ngữ, thư mục ngơn ngữ thư mục chứa files cho trang, cho module 1.1.3 Cách làm việc mơ hình MVC(L) Opencart Thư mục Catalog ứng dụng Frontend Thư mục Admin ứng dụng Admin Như mơ hình MVC khác, request gọi tới file index.php từ file load CORE thư viện Opencart, sau load Controller tương ứng Nên trang chạy Controller xử lý tới Model Views Controller gọi đến model để lấy liệu Database, sau tiếp tục load Languages tương ứng cuối truyền sang View để hiển thị lên website (dạng HTML) Lúc Client tiếp nhận đoạn mã HTML trang web thơng thường khác Mơ hình MVC có ưu nhược điểm: Ưu điểm: Ưu điểm mạnh MVC giúp cho ứng dụng dễ bảo trì, module hóa chức năng, xây dựng nhanh chóng MVC tách tác vụ ứng dụng thành phần riêng rẽ Model, View, Controller giúp cho việc xây dựng ứng dụng nhanh Dễ thêm tính mới, dễ thay đổi tính cũ Có ưu Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |6 ~o0o~ Đồ án tốt nghiệp đại học điểm MVC tách biệt phụ thuộc thành phần đối tượng đồ họa, làm tăng tính linh động Lúc dễ dàng thay đổi giao diện cách thay đổi thành phần View cách thức lưu trữ(Model) xử lý(Controller) không thay đổi Tương tự thay đổi Model Controller mà thành phần lại giữ nguyên Nhược điểm: Đối với dự án nhỏ việc áp dụng mơ hình MVC gây cồng kềnh, tốn thời gian trình phát triển, tốn thời gian chuyển liệu tầng So sánh MVC Three Layer: Một mơ hình khơng thể khơng nhắc đến nhắc đến MVC mơ hình Three Layer Khá phổ biến có nhiều điểm tương đồng với MVC 1.2 Các đặc tính bật Opencart       Quản lý đa cửa hàng Dễ sử dụng phát triển người dùng developer Nguồn tài nguyên phong phú từ internet hỗ trợ gần vấn đề gặp phải - điều quan trọng với developer Hỗ trợ nhiều module template miễn phí Hỗ trợ backup restore Hỗ trợ đa ngơn ngữ affiliate marketing (chương trình cộng tác viên để tăng doanh số bán hàng)  Rất dễ sử dụng opencart : Opencart cho phép sử dụng theme opencart khác nên dễ thay đổi giao diện website Các module opencart trực quan dễ sử dụng, tùy chỉnh cách đơn giản Cộng đồng Phát triển mạnh (cả miễn phí thương mại), cộng đồng ngày phát triển mạnh Việt Nam, hỗ trợ lớn nhanh chóng Đặc biệt nhà phát triển tùy chỉnh thích, đào sâu nghiên cứu, không giới hạn tập tin Người sử dụng biết nhiều PhotoShop lập trình sử dụng thuận lợi Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |7 ~o0o~ Đồ án tốt nghiệp đại học 1.3 Giới thiệu phần mềm Wamp Wamp viết tắt Window+Apache+MySQL+PHP phần mềm giả lập server giúp chạy website máy tính với đường dẫn http://localhost, phần mềm hồn tồn miễn phí  Apache: Chương trình sử dụng máy chủ, cho phép máy chủ phân phát trang web, hiểu HTML  PHP: Như “plugin” Apache, cần có Apache để hoạt động Nhờ PHP mà Apache biết làm việc với trang Php, nói cách khác Apache+PHP = server PHP  MySQL: Một chương trình cho phép sử dụng sở liệu (CSDL) PhpMyAdmin: Dùng để quản lý CSDL  Wamp dễ dàng cấu hình từ Version MySQL bật Module Apache Ngoài ra, chọn phiên cho MySQL: Cấu hình version cho Mysql thứ khác Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT |8 ~o0o~ Đồ án tốt nghiệp đại học Thư mục gốc (Web Root) để chứa trang web C://www Cũng Copy File thư mục C//:wamp/www vào thư mục C//:www, sau mở chương trình duyệt web (Internet Explorer, Firefox…), ô địa nhập vào: http://localhost nhấn chuột trái vào Icon Wamp 2, nằm Khay hệ thống chọn Localhost, lên bảng thông số Wamp2 việc cài đặt thành công Thay đổi thông số PHP (php.ini) Wamp2 cách nhấn chuột trái vào biểu tượng Wamp5 nằm khay hệ thống (ở góc bên phải hình), chọn PHP Settings -> nhấn vào thông số muốn thay đổi, thông số chọn (Enable) xuất dấu mũi tên phía trước Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 22 ~o0o~ Đồ án tốt nghiệp đại học 2.5.2 Cài đặt Opencart Download giải nén Opencart máy tính cá nhân cài đặt Wampserver Đây Opencart phiên v1.5.6.3 Sau download giải nén có cấu trúc thư mục sau: “upload” folder – Nơi chứa tất file cài đặt cần thiết để “copy” vào thư mục “www” localhost tải lên host golive “license.txt” file – tập tin chứa thỏa thuận cấp phép liên quan đến việc sử dụng OpenCart trang web “upgrade.txt” file – Chứa thông tin hướng dẫn upgade opencart website “readme.txt” file – tập tin cung cấp liên kết đến cài đặt hướng dẫn nâng cấp trang web OpenCart Copy hết tất nội dung thư mục “Upload” vào thư mục lưu trữ server localhost (WAMP, XAMP, LAMP and others) Trên WAMP SERVER thư mục “www“ Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 23 ~o0o~ Đồ án tốt nghiệp đại học Cài đặt website cách mở trình duyệt chạy đường dẫn : http://localhost/opencart-156/install Check vào “I agree license” nhấn vào nút “Continue” Đến bước Opencart kiểm tra lại yêu cầu cho phép service cần thiết mà thiếu để Opencart setup Theo ảnh chụp hình bên opencart tìm kiếm file “config.php” Chúng ta cần phải đổi tên mặc định config-dist.php thành config.php thư mục gốc thư mục Admin OpenCart Sau xong bước quay lại hình cài đặt opencart để cấu hình kết nối Database vừa tạo với website opencart cài đặt Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 24 ~o0o~ Đồ án tốt nghiệp đại học Sau nhấn button “Continue” nhận thông báo cài đặt thành công website opencart, kèm theo “warning” xóa rename thư mục Install Để vào trang quản trị admin theo đường dẫn sau: http://localhost/opencart-156/admin Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 25 ~o0o~ Đồ án tốt nghiệp đại học 2.6 Cài đặt Opencart Trên Hosting 2.6.1 Đăng kí Hosting Domain Hiện có nhiều trang web cho thuê hosting với giá rẻ nên em thuê hosting hostvn.net với main domain khodoco.top Sau toán tiến hành kích hoạt ta có giao diện quản lý sau: 2.6.2 Cài đặt Website Hosting Trước hết tiến hành Export database localhost/phpmyadmin Sau Import databse vào database hosting Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 26 ~o0o~ Đồ án tốt nghiệp đại học Sau copy tồn file web C:\wamp64\www tải vào thư mục public_html server hosting Cuối chỉnh sửa file config.php public_html public_html/admin cho với thông số hosting Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 27 ~o0o~ Đồ án tốt nghiệp đại học Kết thúc chương khái quát toàn cách thức cài đặt website quản lý tài nguyên web local host hosting Ở chương giới thiệu đầy đủ cách thức hoạt động theo ngữ cảnh Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 28 ~o0o~ Đồ án tốt nghiệp đại học CHƢƠNG 3: THIẾT KẾ WEBSITE KÍ GỬI ĐỒ CỔ Trong chương trình bày kết quả, hình ảnh, giao diện đạt sau trình làm việc phát triển theo hướng đặt chương Tại giao diện hướng dẫn cách thức hoạt động trang 3.1 Giao diện trang chủ Đây toàn giao diện hiển thị trang web sau gõ địa Bao gồm : - Banner - Danh mục (Trang chủ , Đồ gốm sứ , Đồ gỗ …, Tin tức cổ vật) - Các sản phẩm , mua nhiểu, xem nhiều - Thông tin cửa hàng (Facebook , địa , đồ v.v.) Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 29 ~o0o~ Đồ án tốt nghiệp đại học 3.2 Giao diện trang sản phẩm Đây giao diện trang web chon danh mục sản phẩm Trang web hiển thị sản phẩm sản phẩm có danh mục Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 30 ~o0o~ Đồ án tốt nghiệp đại học Đây giao diện ấn chọn vào sản phẩm Trang web hiển thị đầy đủ thông tin sản phẩm Ấn “Thêm vào giỏ” để chọn sản phẩm toán Ấn “Thêm yêu thích” để lưu vào mục yêu thích sản phẩm tài khoản Ấn “ Thêm so sánh” để so sánh với sản phẩm khác Sau chọn sản phẩm xuất “Giỏ hàng” ấn “Thanh toán” để thực toán Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 31 ~o0o~ Đồ án tốt nghiệp đại học 3.4 Giao diện trang liên hệ Đây nơi hiển thị địa cửa hàng đồ Google map Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 32 ~o0o~ Đồ án tốt nghiệp đại học 3.5 Giao diện trang đăng kí Đây nơi khách hàng đăng kí tài khoản để mua hàng nhận thông tin từ cửa hàng Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 33 ~o0o~ Đồ án tốt nghiệp đại học 3.6 Giao diện trang quản lý admin Đây trang quản lý trang web Bao gồm mục Sản phẩm, Bán hàng, Hệ thống, Báo cáo Sản phẩm: Là nơi hàng đưa sản phẩm lên thông tin, giá sản phẩm Bán hàng: Là nơi kiểm tra đơn đặt hàng, tốn, thơng tin hóa đơn khách hàng Hệ thống: Là nơi thiết lập, cấu hình đặc điểm trang web Báo cáo: Là nơi thống kê doanh thu, số lượt truy cập, khách hàng … Đây chương cuối đề tài, trình bày hình ảnh giao diện kết đạt sản phẩm trang website kí gửi đồ cổ Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 34 ~o0o~ Đồ án tốt nghiệp đại học KẾT LUẬN Qua trình thực đề tài, em tổng hợp lại kiến thức thời gian học Trường Qua đề tài “Tìm hiểu xây dựng website thương mại điện tử kí gửi đồ cổ mã nguồn mở Opencart” thu kết sau:  Tìm hiểu mã nguồn mở CMS – Opencart, phần mềm hỗ trợ WAMP  Nắm quy trình cài đặt ứng dụng Opencart, chủ động việc tìm kiếm thông tin để phục vụ công việc  Khảo sát, phân tích xây dựng website kí gửi đồ cổ gồm chức năng: Thêm, sửa, xóa sản phẩm thơng tin sản phẩm; Admin thêm, xóa người dùng, quản lý website; người dùng phép đăng ký thành viên, cho phép tìm kiếm, góp ý, thực chức mua sản phẩm đồ cổ  Thiết kế website kí gửi đồ cổ với giao diện thân thiện, dễ nhìn, dễ sử dụng; nội dung dễ hiểu, tương tác dễ hiểu đưa website vào hoạt động mua bán trực tuyến  Tích hợp toán trực tuyến Bảo Kim Hướng phát triển website :  Mở rộng cửa hàng phạm vi tồn quốc  Hợp lý hóa chức website Tuy nhiên đề tài cịn có nhiều thiếu sót hạn chế thời gian tìm hiểu trình độ thân nên em mong nhận thêm ý kiến góp ý thầy bạn Một lần em xin chân thành cảm ơn thầy cô giáo, bạn đặc biệt em xin cám ơn Phan Lê Na tận tình giúp đỡ em thời gian qua.! Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 35 ~o0o~ Đồ án tốt nghiệp đại học TÀI LIỆU THAM KHẢO http://docs.opencart.com/ https://www.baokim.vn/developers/module/4/open-cart/ http://opencartvn.com/forum/Forum-t%C3%A0i-li%E1%BB%87u Ms Kerry R Watson, ShowMe Guides OpenCart 1.5 User Manual, 2012 USA Lê Mạnh Cường - Lớp 52K2 - Khoa CNTT | 36 ~o0o~ ... ? ?Tìm hiểu xây dựng website thương mại điện tử kí gửi đồ cổ mã nguồn mở Opencart? ?? thu kết sau:  Tìm hiểu mã nguồn mở CMS – Opencart, phần mềm hỗ trợ WAMP  Nắm quy trình cài đặt ứng dụng Opencart, ... dựa mã nguồn xây dựng sẵn, có nhiều ưu điểm giúp cho doanh nghiệp đưa gian hàng lên thị trường Internet Chính vậy, em chọn đề tài ? ?Tìm hiểu xây dựng website thương mại điện tử kí gửi đồ cổ mã nguồn. .. tin tức đồ cổ - Trang admin quản lý bán hàng - Trang bán hàng 2.2 Khảo sát trạng trang web kí gửi đồ cổ 2.2.1 Hiện trạng trang web kí gửi đồ cổ Hiện chưa có website bán hàng kí gửi đồ cổ phục