Xây dựng một website template theo mẫu chuẩn themeforest

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 Phạm Thị Thương tận tình hướng dẫn, trực tiếp bảo em suốt thời gian làm đồ án tốt nghiệp 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 Em mong nhận ý kiến đóng góp quý Thầy Cô bạn để Đồ án tốt nghiệp em hoàn thiện Em xin chân thành cảm ơn ! Thái nguyên, ngày tháng năm 2016 Sinh viên Nguyễn Trường Sơn LỜI CAM ĐOAN Em xin cam đoan đồ án tốt nghiệp em, hướng dẫn từ Giáo viên Th.S Phạm Thị Thương – giảng viên trường đại học Công nghệ thông tin truyền thông Thái Nguyên, Đại học Thái Nguyên, nội dung nghiên cứu kết đề tài trung thực không chép từ báo cáo thực tập đồ án khác trước Những số liệu bảng biểu phục vụ cho việc phân tích, nhận xét, đánh giá thân thu thập từ nguồn khác dẫn tài liệu tham khảo Nếu có gian lận em xin hoàn toàn chịu trách nhiệm trước Hội đồng Thái Nguyên, ngày … tháng … năm 2016 Sinh viên Nguyễn Trường Sơn MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN DANH MỤC HÌNH ẢNH LỜI MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu themeforest 1.1.1 Themeforest ? 1.1.2 Ưu điểm nhược điểm ThemeForest so với thị trường tự 1.1.3 Cơ chế bán hàng 10 1.1.4 Làm để approve ThemeForest 12 1.1.5 Tìm hiểu rõ trình review sản phẩm 18 1.2 Một số ngôn ngữ công nghệ sử dụng 18 1.2.1 Ngôn ngữ HTML 18 1.2.2 Ngôn ngữ Javascript 20 1.2.3 Ngôn ngữ PHP 23 1.2.4 Công nghệ Smarty .26 1.2.5 Hệ quản trị CSDL MySQL 27 1.2.6 Công nghệ Responsive Boostrap 29 1.2.7 Mô hình MVC 32 CHƯƠNG 2: KHẢO SÁT HỆ THỐNG 38 2.1 Giới thiệu đề tài 38 2.1.1 Đặt vấn đề 38 2.1.2 Giải pháp 40 2.2 Tính cấp thiết đặt 40 2.3 Mục đích, yêu cầu toán cần giải 2.3.1 Mô tả toán 41 41 2.3.2 Phân tích yêu cầu toán 41 2.4 Phân tích hệ thống 41 2.4.1 Biểu đồ Use Case 41 2.4.2 Biểu đồ use case mức chi tiết 43 2.5 Đặc tả số UC 44 2.5.1 UC đăng kí người dùng 44 2.5.2 UC đăng nhập hệ thống .45 2.5.3 UC Tìm kiếm .46 2.5.4 UC Xem thông tin sản phẩm .47 2.5.5 UC gửi ý kiến phản hồi .48 2.5.6 UC quản lý sản phẩm 48 2.5.7 UC quản lý bình luận 50 2.5.8 UC quản lý người dùng 51 2.5.9 UC quản lý danh mục sản phẩm 52 2.5.10 UC quản lý hóa đơn 53 2.5.11.UC quản lý giỏ hàng 54 2.6 Biểu đồ lớp 56 2.6.1 Biểu đồ lớp tổng quát 56 2.6.2 Biểu đồ lớp ca sử dụng đăng nhập 56 2.6.3 Biểu đồ lớp sử dụng quản lý người dùng 57 2.6.4 Biểu đồ lớp sử dụng quản lý bình luận .57 2.6.5 Biểu đồ lớp quản lí danh mục sản phẩm 58 2.6.6 Biểu đồ lớp quản lí sản phẩm 58 2.6.7 Biểu đồ lớp quản lí hóa đơn 59 CHƯƠNG 3: XÂY DỰNG WEBSITE 60 3.1 Giao diện trang chủ 60 3.2 Giao diện trang shop 62 3.3 Giao diện giới thiệu sản phẩm 65 3.4 Check out 66 3.5 Blog 69 KẾT LUẬN 70 TÀI LIỆU THAM KHẢO 71 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 72 DANH MỤC HÌNH ẢNH Hình 1.1: Giao diện ThemeForest 11 Hình 1.2: Quá trình review ThemeForest 18 Hình 1.3: Cấu trúc thư mục bootstrap 30 Hình 1.4: Ví dụ Bootstrap 31 Hình 1.5: Ví dụ Bootstrap 31 Hình 1.6: Mô hình MVC 32 Hình 2.1: Biểu đồ use case tổng quát 42 Hình 2.2: Biểu đồ use case chi tiết tác nhân người dùng 43 Hình 2.3: Biểu đồ use case chi tiết tác nhân người quản trị 43 Hình 2.4: Biểu đồ Trình tự UC đăng kí người dùng 44 Hình 2.5: Biểu đồ Trình tự UC đăng nhập 45 Hình 2.6: Biểu đồ trình tự người dùng tìm kiếm 46 Hình 2.7: Biểu đồ trình tự xem thông tin sản phẩm 47 Hình 2.8: Biểu đồ trình tự UC góp ý kiến phản hồi 48 Hình 2.9: Biểu đồ trình tự UC quản lý sản phẩm 49 Hình 2.10: Biểu đồ Trình tự cho tác vụ quản lý bình luận 50 Hình 2.11: Biểu đồ Trình tự cho tác vụ quản lý người dùng 51 Hình 2.12: Biểu đồ Trình tự cho tác vụ quản lý danh mục sản phẩm 53 Hình 2.13: Biểu đồ Trình tự cho tác vụ quản lý hóa đơn 54 Hình 2.14: Biểu đồ Trình tự cho tác vụ quản lý giỏ hàng 55 Hình 2.15: Biểu đồ lớp tổng quát 56 Hình 2.16: Biểu đồ lớp ca đăng nhập 56 Hình 2.17: Biểu đồ lớp ca sử dụng quản lý người dùng 57 Hình 2.18: Biểu đồ lớp ca sử dụng quản lý bình luận 57 Hình 2.19: Biểu đồ lớp ca sử dụng quản lý danh mục sản phẩm 58 Hình 2.20: Biểu đồ lớp ca sử dụng quản lý sản phẩm 58 Hình 2.21: Biểu đồ lớp ca sử dụng quản lý hóa đơn 59 Hình 3.1: Giao diện homepage 60 Hình 3.2: Giao diện homepage 61 Hình 3.3: Giao diện trang shop 62 Hình 3.4: Giao diện shop với sidebar 63 Hình 3.5: Giao diện shop kiểu list 64 Hình 3.6: Giao diện chi tiết sản phẩm 65 Hình 3.7: Giao diện checkout bước 66 Hình 3.8: Giao diện checkout bước 67 Hình 3.9: Giao diện checkout bước 68 Hình 3.10: Giao diện blog 69 LỜI MỞ ĐẦU Ngày ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, doanh nghiệp, trường đại học, cao đẳng, trang thông tin, giải trí, đóng vai trò quan trọng tạo bước đột phá mạnh mẽ Cùng với phát triển công nghệ thông tin, cho đời nhiều website sinh vấn đề website giống giao diện mà chức Điều dẫn đến nhu cầu người dung tìm kiếm thiết kế cho giao diện website họ chức Có cung có cầu Designer họ người thiết kế giao diện website với chức Sau Coder dựa vào thiết kế để tạo thành website với tính hoàn chỉnh Vậy câu hỏi đặt làm cách thiết tay người dùng người có nhu cầu làm website mình? Được ủng hộ Ths Phạm Thị Thương em thực đề tài “Xây dựng website template theo mẫu chuẩn themeforest” Là sinh viên ngành Công nghệ phần mềm học tập Trường Đại Học Công Nghệ Thông Tin Và Truyền Thông Thái Nguyên em cố gắng học hỏi trang bị cho kỹ cần thiết Với mục đích tổng hợp kiến thức học tìm hiểu để vận dụng vào giải công việc thực tiễn, đặc biệt hướng dẫn nhiệt tình Ths Phạm Thị Thương nỗ lực thân em hoàn thành đề tài thời gian Mục tiêu nghiên cứu: Tổng hợp, vận dụng kiến thức học tìm hiểu để khảo sát, phân tích, thiết kế xây dựng ứng dụng thực tế Nội dung đề tài bao gồm: Chương 1: Cơ sở lý thuyết Chương 2: Khảo sát, Phân tích thiết kế hệ thống Chương 3: Xây dựng Website CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu themeforest 1.1.1 Themeforest ? Themeforest 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 Themeforest 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 Themeforest, việc chia lợi nhuận quy định rõ điều khoản Themeforest Nói đơn giản, Themeforest 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 dung Có quan điểm giới thiệu, người bán người mua Nếu người mua theme Themeforest trang cung cấp theme hàng đầu giới với mức giá hợp lý, việc mua bán, toán dễ dàng lựa chọn phong phú tất nhà cung cấp theme Lý theme bán Themeforest tác giả tự gửi lên Themeforest tự thiết kế Tuy nhiên, nhiều tác giả thiết kế theo phong cách khác nên bạn cần phải lựa chọn mua bán cẩn thận Themeforest nhiệm vụ support hay trả lại hàng, hay chịu trách nhiệm theme bạn mua 1.1.2 Ưu điểm nhược điểm ThemeForest so với thị trường tự  Ưu điểm Themeforest 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 Themeforest có lượng khách hàng truy cập không nhỏ Uy tín, chất lượng: Việc theme tác giả upload lên Themeforest, vượt qua khâu review Themeforest đồ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  Nhược điểm Chúng ta phải tuân thủ quy định ThemeForest: Nó giống trò chơi mạo hiểm Nếu tác giả vi phạm số nguyên tắc Themeforest tác giả 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 khóa sau đêm Tuy nhiên, vấn đề bạn tuân thủ quy định, không làm điều vi phạm tới quyền, ăn cắp ý tưởng, ăn cắp thiết kế… Có thể bị từ 30% – 50% cho sản phẩm bán được: Tác giả phải trả cho Themeforest từ 30 – 50% lợi nhuận, tùy theo vị trí tác giả Nếu tác giả bán $75,000 Themeforest người hưởng 70%, 10 86 Hình 3.5: Giao diện shop kiểu list 3.3 Giao diện giới thiệu sản phẩm 87 Hình 3.6: Giao diện chi tiết sản phẩm 88 3.4 Check out 89 90 Hình 3.7: Giao diện checkout bước 91 92 Hình 3.8: Giao diện checkout bước 93 94 Hình 3.9: Giao diện checkout bước 3.5 Blog 95 96 Hình 3.10: Giao diện blog 97 KẾT LUẬN Sau thời làm đồ án tốt nghiệp, em hoàn thành đề tài “Xây dựng website template theo mẫu chuẩn themeforest ” hướng dẫn tận tình cô giáo ThS Phạm Thị Thương Em đạt kết quả:  Hoàn thành xây dựng template  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ở Wordpress 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  98 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/ 99 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày tháng năm 2016 Giáo viên hướng dẫn 100 [...]... không mất phí 1.1.4 Làm sao để được approve trên ThemeForest Themeforest là một thị trường bán theme và templates trực tuyến lớn nhất thế giới Bạn có thể trở thành tác giả bán theme /template trên Themeforest để có thêm thu nhập Bạn có thể gửi thiết kế của mình lên Themeforest để bán và kiếm tiền Tuy nhiên, nhằm duy trì và đảm bảo chất lượng, Themeforest có một đội ngũ gọi là “Reviewer” Họ sẽ duyệt những... kế Java (được xây dựng bơi Sun) là một ngôn ngữ lập trình phức tạp cùng loại giống như C JavaScript được phát minh bởi Brendan Eich Nó xuất hiện trong Netscape (một trình duyệt không còn tồn tại) trong năm 1995, và đã được thông qua bởi ECMA (một hiệp hội tiêu chuẩn) từ năm 1997 1.2.3 Ngôn ngữ PHP PHP(viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh... thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới Ngày nay, PHP đã được sử dụng rộng rãi và phổ biến nhất để xây dựng các các trang web động Chúng ta có thể thấy trên nhiều diễn đàn, các cổng thông tin Portal, các website cá nhân được thiết kế bằng mã nguồn mở của PHP Vì thế mà PHP đang có một chỗ... 1.2.4 Công nghệ Smarty Smarty là một hệ thống tạo mẫu web(web template system) được viết trên nền PHP Smarty được giới thiệu như là một công cụ cho việc chia nhỏ các quá trình thiết kế trang web Đây là một chiến lược thiết kế cho các ứng dụng web hiện đại Smarty tạo ra các nội dung web từ các vị trí đặc biệt được gọi là smarty tag Các tag này được nằm trong các mẫu (template) Các tag này sẽ được xử... biến  Tạo hàm Bên cạnh đó, thì một trong những chức năng nổi bật của các Template Engine là hệ thống tạo mẫu cho phép thay đổi từ mẫu tới mẫu Thông thường khi lập trình PHP bạn hay viết lẫn cả phần HTML với mã lệnh PHP trên một trang Điều này sẽ dẫn đến rất rối nhất là khi bảo trì Mặt khác khi làm nhiều trang web có chức năng như nhau Chỉ khác giao diện nên nếu lập trình theo kiểu như vậy bạn phải viết... những cái Themeforest cần là khác nhau Có thể chỉ thiết kế theo yêu cầu chứ không sáng tác được sản phẩm mới (một thứ mà Themeforest yêu cầu)  Tại sao một thiết kế nhìn cũng giống của tôi mà lại được approve còn tôi bị reject? Thật ra cũng không giống lắm đâu, chỉ là bạn chưa đủ trình độ lâu năm trong thiết kế để nhìn ra được họ khác biệt với bạn đến mức nào thôi Có thể nó giống về ảnh, một vài hiệu... feedback đó và tiếp tục gửi lại Themeforest, nếu mọi thứ tốt thì Theme của bạn sẽ được approve sớm nhất có thể  20 1.1.5 Tìm hiểu rõ hơn về quá trình review sản phẩm Hình 1.2: Quá trình review của ThemeForest 1.2 Một số ngôn ngữ và công nghệ được sử dụng 1.2.1 Ngôn ngữ HTML HTML (viết tắt từ HyperText Markup Language) là một ngôn ngữ đánh dấu siêu văn bản, được thiết kế ra để xây dựng các trang web.Vậy thế... theme trên Themeforest sẽ giúp bản thân tập trung vào thiết kế mạnh hơn là thiết kế nhiều Nó còn nhanh nổi nữa Sau khi tạo được danh tiếng trên Themeforest, sau này muốn tách ra bán 11 trên thị trường tự do thì cũng có một lượng khách nào đó theo mình, tin tưởng… 1.1.3 Cơ chế bán hàng Themeforest cho phép người dùng kiếm tiền bằng 2 cách: bán hàng và quảng cáo Chương trình và chính sách của Themeforest: ... dùng một giao diện mãi mãi Và các chức năng được yêu cầu riêng rẽ, độc lập để đảm bảo rằng các chức năng đã được quản lý bằng plugin và không ảnh hưởng tới các thông tin của website Tóm lại là hãy tách các function ra ngoài và biến chúng thành các plugin Và may mắn rằng có một giải pháp cho cả bạn và người dùng, đó là dùng TMG Plugin Activation Library Đây là một phần bắt buộc của theme và được Themeforest. .. kiếm tiền, cụ thể ở đây là theme  Cần nhớ kỹ rằng một sản phẩm được free to user không có nghĩa là được sử dụng miễn phí cho các dự án thương mại Một số tác giả có thể muốn phải hỏi ý kiến họ trước khi sử dụng vào theme của bạn và phải thêm một bản gốc trước khi bạn sửa đổi nó Có thể đọc thêm về bản quyền GPT-3  Chuẩn bị document cho Theme  Một vấn đề khác cần để ý khi theme được review đó là ... thành website với tính hoàn chỉnh Vậy câu hỏi đặt làm cách thiết tay người dùng người có nhu cầu làm website mình? Được ủng hộ Ths Phạm Thị Thương em thực đề tài Xây dựng website template theo mẫu. .. tiêu chuẩn Themeforest 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 Themeforest, việc chia lợi nhuận quy định rõ điều khoản Themeforest Nói đơn giả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