Xây dựng template theo chuẩn theme forest trên mã nguồn mở prestashop

LỜI CẢM ƠN Trước tiên em xin gửi lời cám ơn chân thành sâu sắc tới thầy cô giáo trường Đại học Công Nghệ Thông Tin Và Truyền Thông nói chung thầy cô giáo khoa Công Nghệ Thông Tin, môn Công Nghệ Phần Mềm nói riêng tận tình giảng dạy, truyền đạt cho em kiến thức, kinh nghiệm quý báu suốt thời gian qua Đặc biệt em xin gửi lời cảm ơn đến cô giáo ThS Dương Thị Quy tận tình hướng dẫn, trực tiếp bảo em suốt thời gian làm thực tập chuyên ngành Trong thời gian làm việc với cô, em tiếp thu thêm nhiều kiến thức bổ ích mà học tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu Đây điều cần thiết cho em trình học tập công tác sau Do thời gian hạn hẹp, nỗ lực đề tài thực tập chuyên ngành em khó tránh khỏi thiếu sót Em mong nhận ý kiến đóng góp quý Thầy Cô bạn để thực tập chuyên ngành em hoàn thiện Một lần em xin chân thành cảm ơn Thái nguyên, ngày 20 tháng năm 2016 Sinh viên Phạm Trọng Khang LỜI CAM ĐOAN Để hoàn thành đồ án tốt nghiệp thời gian quy định đáp ứng yêu cầu đề ra, em cố gắng tìm hiểu, học hỏi, tích lũy kiến thức học Em có tham khảo số tài liệu nêu phần “Tài liệu tham khảo”nhưng không chép nội dung từ đồ án khác Em xin cam đoan lời khai đúng, thông tin sai lệch em xin hoàn toàn chịu trách nhiệm trước Hội đồng Thái Nguyên , ngày 20 tháng năm 2016 Sinh viên Phạm Trọng Khang MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu themeforest 1.1.1 Themeforest ? 7 1.1.2.Ưu điểm nhược điểm ThemeForest so với thị trường tự 1.1.3 Làm để approve ThemeForest 1.2 Một số ngôn ngữ công nghệ sử dụng 10 1.2.1 Ngôn ngữ HTML 10 1.2.2 Ngôn ngữ Javascript 1.2.3 Ngôn ngữ PHP 11 14 1.2.4 Công nghệ Smarty 17 1.2.5 Hệ quản trị CSDL MySQL 1.3 Giới thiệu Prestashop 18 20 1.3.1 Đặc điểm PrestaShop 20 1.3.2 Cài đặt Prestashop 21 1.3.3 Nâng cấp gỡ cài đặt 27 CHƯƠNG II KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 28 2.1 Khảo sát trạng hệ thống 28 2.1.1 Khảo sát quy trình 28 2.1.2 Các thông tin vào hệ thống 2.2 Phân tích thiết kế hệ thống 30 2.2.1 Biểu đồ Use Case 30 2.2.2.Biểu đồ trình tự cộng tác 42 2.2.3 Biểu đồ lớp 55 30 2.3 Thiết kế sở liệu 56 CHƯƠNG III DEMO PRESTASHOP TEMPLATE 3.1 Giới thiệu theme Prestashop 57 57 3.2 Các xu hướng thiết kế 58 3.2.1 Thiết kế giao diện người dùng (UI) 58 3.2.2 Material Design: Một lựa chọn phong phú để thiết kế phẳng 3.2.3 Thiết kế Responsive 3.2.4 Thiết kế phẳng 62 3.3Xây dựng sản phẩm Demo 3.3.1.Thiết kế 63 3.3.2 Sản phẩm 68 61 63 3.4.2 Chuẩn bị sản phẩm 77 3.4.3 Đăng ký tài khoản Envanto cài đặt thông tin KẾT LUẬN 81 TÀI LIỆU THAM KHẢO 82 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 83 78 60 DANH MỤC HÌNH ẢNH Hình 1.1: Giải thưởng giành cho mã nguồn mở 26 Hình 1.2: Giao diện phpMyAmin 27 Hình 1.3: Bước welcome 28 Hình 1.4: Bước điều khoản sử dụng 28 Hình 1.5: Bước kiểm tra cấu hình 29 Hình 1.6: Bước cấu hình sở liệu 29 Hình 1.7: Bước cấu hình sở liệu 30 Hình 1.8: Cài đặt thành công 31 Hình 2.1 Biểu đồ UC cho tác nhân khách hàng 44 Hình 2.2-a: Biểu đồ UC cho chức quản lý thông tin cá nhân 44 Hình 2.2-b: Biểu đồ UC cho chức xem giỏ hàng 44 Hình 2.2-c: Biểu đồ UC cho chức toán 45 Hình 2.3: Biểu đồ UC cho tác nhân người quản lý 45 Hình 2.3-a: Biểu đồ UC cho chức quản lý khách hàng 46 Hình 2.3-b: Biểu đồ UC cho chức quản lý danh mục sản phẩm Hình 2.3-c: Biểu đồ UC cho chức quản lý đơn hàng 46 Hình 2.4: Biểu đồ trình tự cho UC đăng kí 47 Hình 2.5: Biểu đồ cộng tác cho UC đăng kí 47 Hình 2.6: Biểu đồ trình tự cho UC đăng nhập 48 Hình 2.7: Biểu đồ cộng tác cho UC đăng nhập 48 Hình 2.8: Biểu đồ trình tự cho UC tìm kiếm 49 Hình 2.9: Biểu đồ cộng tác cho UC tìm kiếm 49 Hình 2.10: Biểu đồ trình tự cho UC xem thông tin sản phẩm 50 Hình 2.11: Biểu đồ cộng tác cho UC xem thông tin sản phẩm 50 Hình 2.12: Biểu đồ trình tự cho UC xem giỏ hàng 51 Hình 2.13: Biểu đồ cộng tác cho UC xem giỏ hàng 51 Hình 2.14: Biểu đồ trình tự cho UC mua sản phẩm 52 Hình 2.15: Biểu đồ cộng tác cho UC mua sản phẩm 52 Hình 2.16: Biểu đồ trình tự cho UC toán 53 Hình 2.17: Biểu đồ cộng tác cho UC toán 53 Hình 2.18: Biểu đồ cộng tác cho UC cập nhật thông tin cá nhân 54 Hình 2.19: Biểu đồ cộng tác cho UC cập nhật thông tin cá nhân 54 Hình 2.20: Biểu đồ cộng tác cho UC quản lý khách hàng 55 Hình 2.21: Biểu đồ cộng tác cho UC quản lý khách hàng 56 Hình 2.22: Biểu đồ cộng tác cho UC quản lý danh mục sản phẩm 56 46 Hình 2.23: Biểu đồ cộng tác cho UC quản lý danh mục sản phẩm 57 Hình 2.24: Biểu đồ cộng tác cho UC quản lý hóa đơn hàng 57 Hình 2.25: Biểu đồ cộng tác cho UC quản lý hóa đơn hàng 58 Hình 2.26: Biểu đồ trình tự cho UC quản lý liên hệ 58 Hình 2.27: Biểu đồ cộng tác cho UC quản lý liên hệ 59 Hình 2.28: Biểu đồ lớp 60 Hình 2.29: Cơ sở liệu 61 Hình 3.1 Cấu trúc template63 Hình 3.2 Một ví dụ UI 64 Hình 3.3 Material design google 65 Hình 3.4 Responsive design 66 Hình 3.5 Flat design (thiết kế phẳng) 67 Hình 3.7 demo trang chủ 71 Hình 3.8 Phần footer demo 72 Hình 3.9 Trang chủ hook 73 Hình 3.10 Các module hook Top 74 Hình 3.11 Các module hook Home 75 Hình 3.12 Các module hook Footer 75 Hình 3.13 Trang danh mục sản phẩm 76 Hình 3.14 Các module hook Left 77 Hình 3.15 Trang product 78 Hình 3.16 Các module phát triển 79 Hình 3.17 Thêm item module lookbook 79 Hình 3.18 Module lookbook 80 Hình 3.19 Module blog 81 Hình 3.20 Cấu trúc file upload lên theme forest 83 Hình 3.21 Giao diện trang đăng ký tài khoản 83 Hình 3.22 Giao diện trang submit sản phẩm 84 Hình 3.23 Giao diện submit xong đợi review 85 Hình 3.24 Giao diện sau public sản phẩm có sales 85 CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu themeforest 1.1.1 Themeforest ? Theme forest marketplace, nơi mà tác giả (author) tự upload sản phẩm họ đến người quan tâm, sản phẩm PSD, HTML, Template (Joomla, Wordpress, Magento, Prestashop ) Khi có đội ngũ làm công việc review sản phẩm để đánh giá sản phẩm bạn có đạt tiêu chuẩn TF hay không Khi approve lợi nhuận việc bán sản phẩm chia theo phần trăm, phần bạn phần TF, việc ăn chia quy định rõ điều khoản TF Nói đơn giản, TF trung gian người mua người bán bạn cần làm tạo sản phẩm chất lượng đem đến người dùng 1.1.2.Ưu điểm nhược điểm ThemeForest so với thị trường tự a Ưu điểm TF thị trường số giới sản phẩm liên quan đến theme dành cho freelancer lượng khách hàng đông đảo Do sản phẩm bạn approve TF có lượng khách hàng truy cập không nhỏ Nếu bạn có ý định tự làm bạn phải đầu tư khoản tương đối cho dịch vụ quảng cáo Adwords, Facebook mà chưa chắn lợi ích mang lại ! Uy tín, chất lượng: Việc theme bạn upload lên TF, vượt qua khau review TF đồng nghĩa với việc sản phẩm chất lượng, đánh giá tốt Giả sử bạn mở trang verynicethemes.com để bán theme chẳng hạn, khách hàng vào xem ngờ vực, bán tín bán nghi thương hiệu bạn toanh Còn Themeforest lại khác, nơi an toàn để khách hàng đặt tiền vào Công việc có thiết kế: Nếu mở trang bán theme riêng, bạn phải xây dựng website, thiết kế trang chủ, demo, xây dựng module bán hàng, cổng toán, mã sản phẩm, chế kiếm tra để support, bảo mật, khiếu nại thắc mắc, đổi trả… Bạn phải có team SEO, Marketing kiểu muốn đẩy thương hiệu xa Còn với Themeforest, tất bạn phải làm có thiết kế đẹp, bạn tập trung vào thiết kế, đẩy tất “dirty behind”gồm toán, bảo mật, mua bán… cho Themeforest Bạn chờ cuối tháng nhận tiền b Nhược điểm Bạn phải tuân thủ luật: Nó giống trò chơi mạo hiểm Nếu bạn vi phạm số nguyên tắc Themeforest bạn bị ban nick/username công sức xây dựng xưa đổ xuống sông xuống bể, themes bị xóa hết, tiền có Themeforest bị phong tỏa, uy tín, thương hiệu bạn gây dựng không Đó thực mạo hiểm! Nó giống nhiều fanpage Facebook nhiều năm gây dựng bị facebook cho đảo sau đêm Tuy nhiên, vấn đề bạn tuân thủ luật chơi, không làm điều vi phạm tới quyền, ăn cắp ý tưởng, ăn cắp thiết kế… Bạn bị từ 30% – 50% cho sản phẩm bán được: Bạn phải chia cho Themeforest từ 30 – 50% lợi nhuận, tùy theo vị trí bạn Nếu bạn bán $75,000 Themeforest bạn hưởng 70%, bắt đầu bạn hưởng 50% Ban đầu, bắt đầu bạn thấy 50% không gì, bạn cần bán hàng, có tiền, mà nhận $20/theme làm bạn sung sướng Tuy nhiên, sau bạn thấy nhận 70%/theme ít, bạn khó chịu, ấm ức số 30% Mặc dù bán theme riêng bạn khoản chi phí cho việc thuê server, trả lương nhân viên… Bạn không định giá sản phẩm: Giá sản phẩm Themeforest quy định, tuân theo nguyên tắc chung thị trường Chẳng hạn theme bình thường $40, blog đơn giản $35, blog phức tạp $45, portfolio $40, $45, magazine Nếu hỗ trợ WooCommerce $55 $60 Bạn vô ấm ức thấy theme kiểu vậy, chí xấu hơn, đơn giản mà bán thị trường $55, $55 cho blog Đó chưa kể giá $40 thấp lại bị cắt xén vài chục phần trăm Bạn bị review: Cái nên xếp hạng ưu hay nhược điểm Review vừa ưu điểm, vừa nhược điểm Nhược điểm chỗ bạn thiết kế vứt lên để bán mà có số Mỗi lần muốn upload lên bạn bị kiểm duyệt Ngay update theme phải chờ kiểm duyệt Ưu điểm có người giúp bạn đánh giá xem design đủ tốt chưa Đồng thời giúp bạn tập trung vào chất lượng số lượng Nhận xét: Themeforest môi trường tuyệt vời để học tập Xung quanh có cạnh tranh, hôm có theme để học hỏi, khách hàng từ nhiều nơi họ quan tâm tới design Do bạn tập trung vào việc học thiết kế cho đẹp nắm nhu cầu thị trường Có nhiều tác giả tiếng họ bán theme Themeforest, bán đều, bán ngon, ví dụ ThemeFusion, Kriesi… Việc bán theme Themeforest giúp thân tập trung vào thiết kế mạnh thiết kế nhiều Nó nhanh Sau tạo danh tiếng Themeforest, sau muốn tách bán thị trường tự có lượng khách theo mình, tin tưởng… 1.1.3 Làm để approve ThemeForest Themeforest thị trường bán theme templates trực tuyến lớn giới Bạn trở thành tác giả bán theme/template Themeforest để có thêm thu nhập Bạn gửi thiết kế lên Themeforest để bán kiếm tiền Tuy nhiên, nhằm trì đảm bảo chất lượng, Themeforest có đội ngũ gọi “Reviewer” Họ duyệt sản phẩm bạn gửi lên trước chúng xuất Và xác suất bạn bị gửi trả lại cao Cơ mà bạn lo, bạn hiểu rõ chế hoạt động thị trường bạn không bị reject/fail Bạn cần nâng cao tay nghề design, bạn cần học hỏi, bạn cần tìm hiểu thị trường, bạn cần hiểu Themeforest Không nên thắc mắc Themeforest không vô lý Vậy tóm lại cần để Approve Theme ?  Chắc chắn design bạn thật tốt Design vấn đề quan trọng ảnh hưởng trực tiếp tới người dùng, chắn design bạn không giống design trước tạo khác biệt so với đa số design Chất lượng thiết kế yếu tố xem xét Nó “thiết kế”, không liên quan tới khả code hay thành thạo PSD Vấn đề viết code vấn đề thứ review process Thiết kế yếu tố thuộc “thẩm mĩ”, xấu hay đẹp Có thể bạn thấy “xấu” “đẹp” vấn đề tương đối cảm tính, theo kiểu: “tôi thấy đẹp reviewer thấy xấu” làm nào? Thật Trong thiết kế, có nhiều thứ phải nói tới mà viết hết Nhưng tóm lại bạn phải học thiết kế việc học bình thường Đó cách sử dụng typography, spacing, visual hierachy, color, contrast, layout… nhiều vấn đề khác thiết kế 1.2 Một số ngôn ngữ công nghệ sử dụng 1.2.1 Ngôn ngữ HTML HTML (viết tắt từ HyperText Markup Language) ngôn ngữ đánh dấu siêu văn bản, thiết kế để xây dựng trang web.Vậy ngôn ngữ đánh dấu siêu văn bản? Ta xem xét khía cạnh một: Cấu trúc tài liệu HTML Các tập tin HTML bắt đầu thẻ .Thẻ không làm khác nhiệm vụ báo cho trình duyệt Web biết đọc tài liệu có chứa mã HTML.Tương tự, dòng cuối tài liệu định dạng HTML luôn thẻ , có tác dụng thông báo kết thúc văn HTML với trình duyệt Chi tiết catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu thân Phần đầu giống lời giới thiệu cho trang Các trình duyệt Web dùng phần đầu để thu nhặt loại thông tin khác trang Để xác định phần đầu, ta sử dụng thẻ thẻ sau thẻ Mặc dù ta đặt số chi tiết bên phạm vi phần đầu này, phổ biến tên trang Nếu có xem trang browser, tên trang xuất dải tên cửa sổ browser Để xác định tên trang, ta đặt đoạn văn tên 10 Trang product gồm chức hiển thị ảnh sản phẩm (dạng slider), click vào View large hiển thị popup ảnh to sản phẩm Người dùng thêm sản phẩm vào giỏ hàng hay so sánh với sản phẩm khác Bên cạnh có số chức khác hiển thị sản phẩm khác danh mục sản phẩm hay chia sẻ lên google, facebook Ngoài ba trang trên, template có trang khác checkout, quản lý tài khoản, so sánh sản phẩm Trong package để bán cần module kèm Theme Option, News letter, Blog Dưới mộ số module kèm theme Hình 3.16 Các module phát triển Demo số module tiêu biểu  Module Lookbook Backend: Thêm ảnh banner kéo thả lookbook search ajax sản phẩm 112 Hình 3.17 Thêm item module lookbook Frontend: 113 114 Hình 3.18 Module lookbook  Module Blog 115 116 Hình 3.19 Module blog 117 3.4 Upload theme lên ThemeForest 3.4.1 Các ý trước upload sản phẩm Sau hoàn thành sản phẩm, bước cuối upload theme lên theme forest Để upload cần phải có tài khoản Theme Forest  Đặt tên theme mô tả: Phần tưởng chừng đơn giản lại quan trọng, tên theme phải viết hoa chữ số từ viết thường a, an, of Viết hoa số từ mô tả đặc biệt CMS, XML Một số ví dụ việc viết sai THIS IS NOT ACCEPTABLE - Không viết hoa tất This is also not acceptable - Không viết chữ thường tất Beautiful template, Best template - Không sử dụng từ ngữ chủ quan có tính cường độ hóa so với mức bình thường User999 – File Name – Không sử dụng tên tài khoản kem với tên sản phẩm Tóm lại: Mô tả phải phù hợp với tính sản phẩm, đảm bảo template đề cấp tới vấn đề thể qua live preview Nếu sử dụng phông chữ không chuẩn cần phải ghi rõ mô tả  Nội dung file upload: ThemeForest không yêu cầu xác sản phẩm phải có phải đảm bảo số yếu tố file document ( hướng dẫn sử dụng cho khác hàng), file sản phẩm, file design (nếu có) 3.4.2 Chuẩn bị sản phẩm Trước upload sản phẩm ta cần phải tìm hiểu quy chuẩn đính kèm Theme Forest Cụ thể cấu trúc sản phẩm bao gồm Thumbnail: ảnh thu nhỏ đại diện cho sản phẩm Preview: ảnh xem trước sản phẩm, ảnh chụp giao diện sản phẩm Main file.zip: file sản phẩm để người dùng cài đặt (có thể theme, plugin…) 118 Document: tài liệu hướng dẫn sử dụng PSD: file design photoshop phần mềm tương tự (có thể không cần) HTML/CSS: file html sản phẩm template (có thể không cần) Licensing: file thông báo quyền sản phẩm Hình 3.20 Cấu trúc file upload lên theme forest 3.4.3 Đăng ký tài khoản Envanto cài đặt thông tin Để submit sản phẩm ta phải có tài khoản envanto, cụ thể ta cần đăng ký làm author (tác giả) địa https://account.envato.com/sign_up 119 Hình 3.21 Giao diện trang đăng ký tài khoản Sau đăng ký thành công ta tiến hành đăng nhập điền thông tin cho tài khoản ảnh đại diện, banner, lời chào Việc tiến hành submit sản phẩm cách chọn category cho sản phẩm vào điên thông tin sản phẩm 120 Hình 3.22 Giao diện trang submit sản phẩm Sau hoàn tất việc submit, sản phẩm xếp vào hàng đợi review Theme Forest sản phẩm có design không thỏa mãn yêu cầu reviewer bị hard reject, ngược lại bị soft reject sửa xong lỗi public 121 lên trang chủ theme forest Hình 3.23 Giao diện submit xong đợi review Khi sản phẩm public, người mua mua số tiền nhận = giá sản phẩm – thuế - chi phí envanto 122 Hình 3.24 Giao diện sau public sản phẩm có sales 123 KẾT LUẬN Sau ba tháng làm đồ án tốt nghiệp, em hoàn thành đề tài “Xây dựng template theo chuẩn Theme Forest mã nguồn mở Prestashop”dưới hướng dẫn tận tình cô giáo ThS Dương Thị Quy Em đạt kết quả:  Hoàn thành xây dựng template mã nguồn mở Prestashop  Nâng cao thêm kĩ lập trình, tổng hợp vấn đề giải vấn đề, kỹ đọc nghiên cứu tài liệu  Hiểu biết thêm số ngôn ngữ hay framework trình làm theme  Hiểu cách tổng quan mã nguồn mở Prestashop Ngoài thực đề tài tồn số hạn chế :  Teamplate trình review nên chưa biết thành công hay thất bại Hướng phát triển tương lai :  Nâng cao chất lượng sản phẩm  Bổ sung thêm nhiều chức nhằm thỏa mãn yêu cầu người dùng  Tối ưu hóa trang giao diện giúp chạy nhanh, ổn định thân thiện với người dùng  124 TÀI LIỆU THAM KHẢO [1]Phạm Hữu Khang - Hoàng Đức Hải, Xây dựng ứng dụng web PHP MySQL Nhà xuất Phương Đông, 2007, 384tr [2] Prestashop documentation : http://doc.prestashop.com [3] Smarty Documentation, http://www.smarty.net/documentation [4] PHP Documentation,http://php.net/manual [5] Bootstrap Documentation,http://getbootstrap.com/ [6] W3Schools,http://www.w3schools.com/ [7] JQuery Documentation, http://jquery.com/ 125 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Giáo viên hướng dẫn: 126 ... viên, chuyên gia uy tín lĩnh vực mã nguồn mở bình chọn Hình 1.1: Giải thưởng giành cho mã nguồn mở Trong hạng mục mã nguồn mở ứng dụng cho kinh doanh, mã nguồn mở PrestaShop có bước tiến vượt bậc... approve ThemeForest Themeforest thị trường bán theme templates trực tuyến lớn giới Bạn trở thành tác giả bán theme /template Themeforest để có thêm thu nhập Bạn gửi thiết kế lên Themeforest để... toanh Còn Themeforest lại khác, nơi an toàn để khách hàng đặt tiền vào Công việc có thiết kế: Nếu mở trang bán theme riêng, bạn phải xây dựng website, thiết kế trang chủ, demo, xây dựng module