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 các thầy cô giáo
trong trường Đại học Công Nghệ Thông Tin Và Truyền Thông nói chung và các
thầy cô giáo trong khoa Công Nghệ Thông Tin, bộ 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 những kiến thức, kinh nghiệm quý
báu trong 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 chỉ bảo em trong suốt thời gian làm đồ án tốt nghiệp.
Trong thời gian làm việc với cô, em không những tiếp thu thêm nhiều kiến thức bổ
ích mà còn học được tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc,
hiệu quả. Đây là những điều rất cần thiết cho em trong quá trình học tập và công
tác sau này.
Em rất mong nhận được những ý kiến đóng góp của quý Thầy Cô và các
bạn để Đồ án tốt nghiệp của em được hoàn thiện hơ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

1


LỜI CAM ĐOAN
Em xin cam đoan rằng đây là bài đồ án tốt nghiệp của em, được sự 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 và truyền thông Thái Nguyên, Đại học Thái Nguyên, các nội dung
nghiên cứu và kết quả trong đề tài này là trung thực và không sao chép từ các báo
cáo thực tập và đồ án khác trước đây. Những số liệu trong các bảng biểu phục vụ
cho việc phân tích, nhận xét, đánh giá được chính bản thân thu thập từ các nguồn
khác nhau được chỉ dẫn trong tài liệu tham khảo.
Nếu có bất kỳ sự gian lận nào 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

2


MỤC LỤC
LỜI CẢM ƠN

1

LỜI CAM ĐOAN 2
DANH MỤC HÌNH ẢNH 5
LỜI MỞ ĐẦU

7

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

8

1.1. Giới thiệu về themeforest 8
1.1.1. Themeforest là gì ?................................................................................8
1.1.2. Ưu điểm và nhược điểm của ThemeForest so với thị trường tự do ......8
1.1.3. Cơ chế bán hàng..................................................................................10
1.1.4. Làm sao để được approve trên ThemeForest ......................................12
1.1.5. Tìm hiểu rõ hơn về quá trình review sản phẩm...................................18

1.2. Một số ngôn ngữ và công nghệ được 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 ra 40
2.3. Mục đích, yêu cầu của bài toán cần giải quyết
2.3.1. Mô tả bài toán 41
3

41


2.3.2. Phân tích yêu cầu bài 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ả một số UC chính

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
4


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 của ThemeForest...................................................... 18
Hình 1.3: Cấu trúc thư mục của bootstrap. .......................................................... 30
Hình 1.4: Ví dụ về Bootstrap ............................................................................... 31

Hình 1.5: Ví dụ về 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
5


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 1.......................................................................... 60
Hình 3.2: Giao diện homepage 2.......................................................................... 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 1 .................................................................. 66
Hình 3.8: Giao diện checkout bước 2 .................................................................. 67
Hình 3.9: Giao diện checkout bước 3 .................................................................. 68
Hình 3.10: Giao diện blog.................................................................................... 69

6


LỜI MỞ ĐẦU
Ngày nay ứng dụng công nghệ thông tin và việc tin học hóa được xem là
một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ,
tổ chức, doanh nghiệp, cũng như các trường đại học, cao đẳng, các trang thông tin,
giải trí, nó đóng vai trò hết sức quan trọng có thể tạo ra những bước đột phá mạnh
mẽ.
Cùng với sự phát triển của công nghệ thông tin, sẽ cho ra đời rất nhiều các
website sinh ra 1 vấn đề là các website đó sẽ rất giống nhau về cả giao diện mà
chức năng. Điều này sẽ dẫn đến nhu cầu của người dung là tìm kiếm những thiết
kế mới cho giao diện website của họ và cả chức năng mới nữa. Có cung ắt sẽ có
cầu những Designer họ sẽ là người thiết kế ra các giao diện website với các chức
năng mới. Sau đó các Coder sẽ dựa vào thiết kế đó để tạo thành 1 website với các
tính năng hoàn chỉnh. Vậy câu hỏi đặt ra ở đây là làm cách nào thiết kế đó đến
được tay người dùng những người có nhu cầu làm mới website của mình?
Được sự ủng hộ của Ths. Phạm Thị Thương em đã thực hiện đề tài “Xây
dựng một website template theo mẫu chuẩn themeforest”.
Là một sinh viên ngành Công nghệ phần mềm đang học tập trong Trường
Đại Học Công Nghệ Thông Tin Và Truyền Thông Thái Nguyên em luôn cố gắng
học hỏi và trang bị cho mình những kỹ năng cần thiết. Với mục đích tổng hợp
những kiến thức đã học và tìm hiểu để vận dụng vào giải quyết các công việc thực

tiễn, đặc biệt dưới sự hướng dẫn nhiệt tình của Ths. Phạm Thị Thương và sự nỗ
lực của bản thân em đã hoàn thành đề tài của mình đúng thời gian.
Mục tiêu nghiên cứu: Tổng hợp, vận dụng các kiến thức đã học và tìm hiểu
để khảo sát, phân tích, thiết kế và xây dựng ứng dụng trong thực tế.
Nội dung chính của đề tài bao gồm:
Chương 1: Cơ sở lý thuyết.
7


Chương 2: Khảo sát, Phân tích và thiết kế hệ thống.
Chương 3: Xây dựng Website.

8


CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1. Giới thiệu về themeforest
1.1.1. Themeforest là gì ?
Themeforest là một marketplace, nơi mà các tác giả (author) sẽ tự do upload
các sản phẩm của họ đến những người quan tâm, những sản phẩm đó có thể là
PSD, HTML, Template (Joomla, Wordpress, Magento, Prestashop..). Khi đó sẽ có
1 đội ngũ làm công việc review sản phẩm để đánh giá sản phẩm của bạn có đạt tiêu
chuẩn của Themeforest hay không. Khi đã được approve thì lợi nhuận của việc bán
sản phẩm sẽ được chia theo phần trăm, một phần của bạn và một phần của
Themeforest, việc chia lợi nhuận này được quy định rõ trong các điều khoản của
Themeforest. Nói đơn giản, Themeforest là trung gian giữa người mua và người
bán và những gì bạn cần làm là tạo ra những sản phẩm chất lượng đem đến người
dung.
Có 2 quan điểm giới thiệu, đó là người bán và người mua. Nếu là một người
mua theme thì Themeforest là một trong những trang cung cấp theme hàng đầu thế

giới với một mức giá hợp lý, việc mua bán, thanh toán cũng khá dễ dàng và lựa
chọn thì phong phú nhất trong tất cả các nhà cung cấp theme. Lý do là vì các
theme được bán trên Themeforest do các tác giả tự do gửi lên chứ không phải do
Themeforest tự thiết kế. Tuy nhiên, chính vì do quá nhiều tác giả thiết kế và theo
những phong cách khác nhau nên bạn cần phải lựa chọn mua bán cẩn thận vì
Themeforest sẽ không có nhiệm vụ support hay trả lại hàng, hay chịu trách nhiệm
gì về theme bạn đã mua.
1.1.2. Ưu điểm và nhược điểm của ThemeForest so với thị trường tự do

 Ưu điểm
Themeforest là thị trường số 1 thế giới về các sản phẩm liên quan đến
theme dành cho các freelancer và lượng khách hàng đông đảo nhất hiện nay. Do đó
9


nếu 1 sản phẩm của bạn được approve trên Themeforest thì lập tức sẽ có một
lượng khách hàng truy cập không hề nhỏ.
Uy tín, chất lượng: Việc theme của 1 tác giả được upload lên Themeforest,
vượt qua khâu review của Themeforest đồng nghĩa với việc đó là 1 sản phẩm chất
lượng, đã được đánh giá tốt. Giả sử, bạn mới mở một trang verynicethemes.com để
bán theme chẳng hạn, khách hàng vào xem sẽ ngờ vực, bán tín bán nghi vì thương
hiệu của bạn mới toanh. Còn Themeforest lại khác, đó là một nơi an toàn để khách
hàng đặt tiền vào. Công việc chỉ có thiết kế: Nếu mở một trang bán theme riêng,
bạn sẽ phải xây dựng một website, thiết kế trang chủ, demo, xây dựng module bán
hàng, các cổng thanh toán, mã sản phẩm, cơ chế kiếm tra để support, bảo mật, các
khiếu nại thắc mắc, đổi trả… Bạn sẽ phải có một team SEO, Marketing các kiểu
nữa nếu muốn đẩy thương hiệu đi xa. Còn với Themeforest, tất cả những gì bạn
phải làm là có một thiết kế đẹp, và bạn chỉ tập trung vào thiết kế, đẩy tất cả những
cái “dirty behind”gồm thanh toán, bảo mật, mua bán… cho Themeforest. Bạn chỉ
chờ cuối tháng nhận tiền thôi.

 Nhược điểm
Chúng ta phải tuân thủ các quy định của ThemeForest: Nó giống như một
trò chơi mạo hiểm vậy. Nếu tác giả vi phạm một số nguyên tắc của Themeforest thì
tác giả đó sẽ bị ban nick/username và bao nhiêu công sức xây dựng xưa nay sẽ đổ
xuống sông xuống bể, các themes sẽ bị xóa hết, tiền đang có trên Themeforest sẽ
bị phong tỏa, cả uy tín, thương hiệu bao lâu bạn gây dựng cũng không còn. Đó
thực sự là một cuộc mạo hiểm! Nó giống như nhiều fanpage trên Facebook nhiều
năm gây dựng giờ bị facebook khóa sau một đêm. Tuy nhiên, sẽ không có vấn đề
gì nếu như bạn tuân thủ quy định, không làm điều gì vi phạm tới bản quyền, ăn cắp
ý tưởng, ăn cắp thiết kế…
Có thể bị mất từ 30% – 50% cho mỗi sản phẩm bán được: Tác giả sẽ phải
trả cho Themeforest từ 30 – 50% lợi nhuận, tùy theo vị trí của tác giả đó. Nếu tác
giả đã bán được $75,000 trên Themeforest thì người đó được hưởng 70%, còn nếu
10


mới bắt đầu thì chỉ được hưởng 50% thôi. Ban đầu, khi mới bắt đầu sẽ thấy 50%
không là gì, vì chỉ cần bán được hàng, có tiền, mà nhận được $20/theme cũng làm
động lực để tiếp tục làm việc. Tuy nhiên, về sau sẽ thấy nhận được 70%/theme vẫn
còn là ít, và chúng ta vẫn khó chịu, ấm ức về cái con số 30% kia lắm. Mặc dù nếu
bán theme riêng thì cũng sẽ mất một khoản chi phí cho việc thuê server, trả lương
nhân viên…
Tác giả không được định giá sản phẩm: Giá sản phẩm là do Themeforest
quy định, tuân theo những nguyên tắc chung của thị trường. Chẳng hạn như theme
bình thường là $40, blog đơn giản là $35, blog phức tạp là $45, portfolio có thể là
$40, $45, magazine cũng vậy. Nếu hỗ trợ WooCommerce thì là $55 hoặc $60. Bạn
sẽ vô cùng ấm ức khi thấy cũng một theme kiểu vậy, thậm chí xấu hơn, đơn giản
hơn mà bán ngoài thị trường là $55, hoặc $55 cho một cái blog. Đó là còn chưa kể
giá $40 đã thấp rồi lại còn bị cắt xén mất vài chục phần trăm

Sản phẩm sẽ bị review: Cái này thì không biết nên xếp hạng là ưu hay
nhược điểm. Review vừa là ưu điểm, vừa là nhược điểm. Nhược điểm là ở chỗ
không phải cái gì bạn thiết kế cũng sẽ được vứt lên để bán mà chỉ có một số
thôi. Mỗi lần muốn upload cái gì đó lên bạn sẽ bị kiểm duyệt. Ngay cả update
theme cũng phải chờ kiểm duyệt.
Ưu điểm của nó là sẽ 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 hơn là số lượng.
Nhận xét: Themeforest là một môi trường tuyệt vời để học tập. Xung quanh
có những sự cạnh tranh, hôm nào cũng có theme mới để học hỏi, khách hàng từ
nhiều nơi và họ chỉ quan tâm tới design. Do đó bạn sẽ tập trung vào việc học thiết
kế sao cho đẹp và nắm được nhu cầu của thị trường.
Có rất nhiều tác giả nổi tiếng họ vẫn bán theme trên Themeforest, vẫn bán
đều, bán ngon, ví dụ như ThemeFusion, Kriesi… Việc bán 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:
 Đăng ký 1 username.
 Vượt qua bài test đơn giản (mà Google phát là ra) của nó.
 Viết một theme và ấn nút gửi, hoàn thành những yêu cầu của nó đặt ra.
 Nếu theme được nó duyệt thì sẽ được đăng lên để bán, có ai mua thì tiền
sẽ nổi lên ngay ở góc trên bên phải.
 Cuối tháng ấn withdraw và nhận tiền vào ngày 15 tháng sau. Cơ chế này
mình sẽ giới thiệu sau.
Tất cả các bước đó cũng tương tự cho mọi thị trường khác của Envato như

GraphicRiver hay VideoHive.

Hình 1.1: Giao diện ThemeForest

 Tỷ lệ phân chia lợi nhuận
Một tác giả sẽ thu được từ 50 – 70% trên mỗi sản phẩm bán được, phụ
thuộc vào số tiền bạn đã đem lại cho Themeforest. Ví dụ bạn đã bán được $3.500
cho Themeforest (nếu $35/theme thì tức là bạn bán được 100 themes) thì bạn sẽ
được 51%, bạn bán được $7.000 thì sẽ được 52%… Cứ như vậy, tỷ lệ sẽ tăng lên
1% mỗi khi số tiền bạn bán được cho Themeforest tăng lên $3.500, đến bao giờ
bạn bán được $75.000 thì dừng lại và lúc đó tỷ lệ của bạn là 70%. Tỷ lệ đó có
nghĩa giả sử theme bạn giá $40 thì bạn sẽ có được $40 x 70% = $28. Nếu mới bắt
12


đầu thành 1 author thì tỷ lệ đó là 50% và bạn chỉ được hưởng $40 x 50% = $20.
Nói ngắn gọn thì bạn bán được càng nhiều hàng cho Themeforest thì bạn sẽ
được % hoa hồng càng cao. Max là 70%. Khi đạt tới mốc 70%, họ gọi bạn là Elite
Author và bên cạnh username của bạn sẽ xuất hiện một cái dấu màu đỏ.

 Cách nhận tiền
Có vài cách nhận tiền, tuy nhiên nếu dưới $2000 thì nên nhận tiền
qua Paypal. Cơ chế nhận tiền sẽ là: Ví dụ bây giờ là tháng 7, bạn bán hàng hết
tháng 7 và kiếm được $2000 chẳng hạn. Cuối tháng 7, bạn click vào nút Withdraw,
điền đầy đủ thông tin yêu cầu(số tài khoản Paypal hoặc TK ngân hàng của bạn), hệ
thống sẽ tiến hành thanh toán, và đến 15/8 họ sẽ chuyển tiền cho tất cả các users.
Tầm 16, 17/8 bạn sẽ thấy tiền nổi trên tài khoản của mình.
Vì Paypal tỷ giá dollar hơi thấp. Ví dụ, như tỉ giá lúc trước là 20.640đ, giờ
thì chắc tăng lên một chút trong khi đó dollar trong nước giờ đã là 21.300đ. Như
vậy nhân lên bạn sẽ thiệt vài trăm ngàn đấy.

Tuy nhiên, dùng SWIFT bạn sẽ mất $60 tiền phí chuyển tiền về Vietnam,
cũng không hề nhỏ. Tuy nhiên, nếu bạn nhận trên $2000 thì $60 tiền phí vẫn là rẻ
hơn tiền mất do chênh lệch tỷ giá. Nếu bạn có ý định dùng dollar trong Paypal để
thanh toán online thôi thì tốt nhất nên nhận tiền bằng Paypal vì nó sẽ 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 sản phẩm gửi lên trước khi chúng xuất hiện.
Và xác suất bạn bị gửi trả lại cũng khá cao. Nếu bạn hiểu rõ cơ chế hoạt động của
thị trường này thì sẽ không còn bị reject/fail nữa.
Nếu mới bắt đầu bước vào Themeforest hoặc một thị trường của Envato, có
13


thể sẽ có nhiều thắc mắc:
 Tại sao cái công trình 3 tháng của tôi lại bị Themeforest bị hủy bỏ hoàn
toàn, reject sau 3 phút?
 Tại sao tôi có trình độ PSD 15 năm và từng làm 100 dự án mà vẫn bị
reject?
 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?
 Liệu có phải những tác giả đã nổi tiếng rồi thì up cái gì lên cũng được
approve?
 Liệu có phải Themefores đã hết cơ hội cho những người mới?
 Liệu có phải họ ghét người Việt Nam?
Thật ra thì Themeforest khá công bằng. Họ không hề ưu ái ai hay thiên vị gì
ai cả. Hoặc nếu có ưu ái thì với những tác giả đã giúp Themeforest bán cả triệu đô

tiên hàng, chúng ta cũng chẳng có gì để ghen tị với họ cả. Themeforest chẳng có lý
do gì để thiên vị ai đó. Sẽ trả lời mẫu vài câu hỏi cho những thắc mắc trên:
 Tại sao công trình 3 tháng của tôi lại bị vứt vào sọt rác, reject sau chỉ 3
phút? Vì nó không phù hợp. Đưa cái theme 3 tháng cho 1 bà nội trợ thì bà cũng
vứt vào sọt rác trong 3 giây. Lý do là không phù hợp.
 Tại sao tôi có trình độ PSD 15 năm và từng làm 100 dự án mà vẫn bị
reject? Vì có thể những cái thiết kế và 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 ứng. Tuy nhiên sự khác nhau giữa chuyên nghiệp với
gà đôi khi chỉ là một chút khác về viền ảnh, màu chữ, kích thước chữ, khoảng cách
14


chữ… Đằng sau đó là cả một sự nghiên cứu và kinh nghiệm lâu năm của các
designer mà bạn mới nhìn cứ tưởng là giống nhau. Một cái bát méo và một cái bát
tròn cũng nhìn na ná giống nhau nếu có cùng hoa văn.
Đó là còn chưa kể tới việc review là một vấn đề đầy cảm tính.
 Liệu có phải những tác giả đã nổi tiếng rồi thì up cái gì lên cũng được
approve không?
 Liệu có phải Themefores đã hết cơ hội cho những người mới không?
 Liệu có phải họ ghét người Việt Nam không?
Cần nâng cao tay nghề design, cần học hỏi, cần tìm hiểu thị trường, cần
hiểu về Themeforest. Không nên thắc mắc vì Themeforest không vô lý.
Vậy tóm lại là cần những gì để Approve Theme ?

15

 Chắc chắn rằng design thật tốt và duy nhất
 Design là vấn đề quan trọng nhất vì nó ảnh hưởng trực tiếp tới người
dùng, hãy chắc chắn rằng design không giống bất kỳ một design nào trước đó hoặc
hãy tạo sự khác biệt so với đa số các design.
 Chất lượng thiết kế là yếu tố được xem xét đầu tiên. Nó là “thiết kế”, nó
không liên quan tới khả năng code hay sự thành thạo PSD. Vấn đề viết code chỉ là
vấn đề thứ 3 trong review process. Thiết kế là một yếu tố thuộc về “thẩm mĩ”, nó
là xấu hay đẹp. Có thể bạn sẽ thấy “xấu” và “đẹp” là những vấn đề tương đối cảm
tính, theo kiểu: “tôi thấy đẹp còn reviewer thấy xấu” thì làm thế nào?
 Thật ra không phải vậy. Trong thiết kế, có rất nhiều thứ phải nói tới mà
không thể viết hết trong bài này được. Nhưng tóm lại sẽ phải học thiết kế như việc
một cái gì đó bình thường. Đó là về cách sử dụng typography, spacing, visual
hierachy, color, contrast, layout… và nhiều vấn đề khác đối với thiết kế.
 Ở Việt Nam chúng ta ít khi được học thiết kế một cách bài bản. Có thể
biết về PSD, HTML, CSS, JS, PHP, WordPress, Joomla và tận dụng, dùng tất cả
những cái mình hiểu biết vào trong một bản thiết kế với nhiều chức năng. Bạn
không hiểu tại sao nó bị reject. Thật ra, nó gặp rất nhiều lỗi về typography,
spacing, visual hierachy… mà nếu không có kiến thức về chúng, sẽ không hiểu.
 Có nhiều thiết kế nhìn rất đơn giản, đơn giản hơn cái đống bùng nhùng
của bạn nhiều mà vấn được approve. Đơn giản vì thiết kế đẹp, nó tuân thủ theo
những nguyên tắc thiết kế và nhìn bắt mắt. Và Themeforest muốn phê duyêt các
design khác nhau nhằm đem đến sự lựa chọn khác nhau tới khách hàng thay vì các
design nhìn la lá nhau. Vượt qua phase này thì các bạn đã qua được 50% review
rồi.

 Đảm bảo chất lượng code của bạn.
 Chất lượng code ảnh hưởng khá lớn tới việc review, chất lượng nghèo
16

nàn sẽ đem đến kết quả hard reject hoặc nhẹ hơn là soft reject. Phải làm cho code
thật sạch, tối ưu và thể hiện được trình độ của người lập trình. Code clean và tối ưu
sẽ làm cho họ có đánh giá tốt về chất lượng. Comment những phần cần chú ý để
code dễ đọc dễ hiểu. Chia code thành các khối, mỗi khối thực hiện một chức năng
nào đó.
 Tuân thủ đúng các tiêu chuẩn kỹ thuật của Themeforest, ví dụ cách đặt tên
hàm, biến, nên hay không nên sử dụng các hàm, vị trí các hàm được sử dụng đặt ở đâu?
 Với công việc front-end, đảm bảo đạt “pixel perfect” so với PSD, chức
năng responsive cũng đạt mức hoàn hảo.

 Validate và Test sản phẩm của bạn thật kỹ
 Validate Theme cũng là một phần quan trọng của quá trình xét duyệt, và
cũng là một phần của chất lượng sản phẩm của bạn. Tiêu chuẩn ở đây không có
nghĩa chỉ vượt qua kiểm tra HTML CSS của công cụ test W3C. Phải test theme với
rất nhiều cách khác hoặc với các plugin để kiểm tra đầu ra và có ảnh hưởng tới
giao diện của theme hay không?
 Thử với nhiều dữ liệu post, có thể thử test với WPTesst.io, trang web
này mô tả rằng có thể test dữ liệu một cách tuyệt vời với nhiều trường hợp được
kiểm tra. Thêm nữa, có thể dùng plugin Monster Widget, nó sẽ giúp bạn test 13
default widget nhằm tiết kiệm thời gian test sidebar của bạn.
 Cũng trong phạm vi test plugin, hãy chắc chắn test các plugin phổ biến
để đảm bảo dữ liệu hiển thị chính xác. Shortcode, plugin, nhúng video, chia sẻ
mạng xã hội và các loại widget khác cũng cần kiểm tra kỹ nhằm đảm bảo mang
đến những trải nghiệm tốt nhất đến ngời dùng. Hãy nhớ rằng những điều này
không được Themeforest yêu cầu nhưng đó là các bước để thấy các lỗi nhỏ và
ngăn ngừa tối đa các lỗi trong theme.
Và cũng có thể dùng plugin Theme Check để kiểm tra thêm các lỗi phát sinh
khác.

17


 Các loại chức năng được tách riêng với theme
 Giả sử, bạn đang sử dụng 1 theme cho công ty của bạn nhưng sau một
khoảng thời gian bạn cảm thấy không còn thích giao diện cũ nữa và bạn quyết định
bỏ hàng giờ ra để tìm một cái mới. Bạn có thể tìm thấy một design tốt, phù hợp
làm website của công ty bạn nhưng đến thì cài đặt thì bạn có cảm giác như đang bị
lừa dối, khi mà tất cả các testiominial (nhận xét của khách hàng) biến mất, trang
porfolio của công ty thì không tìm thấy và các shortcode bạn sử dụng cho các bài
viết cũ bị mất. Vậy bạn sẽ cảm thấy như thế nào? Đó chính xác là sự thất vọng vào
một giao diện tồi, kém chất lượng và bạn cũng không thể 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 yêu cầu cần có, plugin này sẽ yêu cầu người dùng phải cài một số
plugin để theme có thể chạy hoàn hảo nhất. Nếu không muốn dùng plugin thì bạn
có thể dùng Class của plugin này để sử dụng các chức năng trên mà không cần
phải cài đặt.

 Chuẩn bị 1 trang Demo cho theme của bạn
 Trang Demo quan trọng với cả khách hàng mua Theme cũng như
Themeforest và nhóm review của Themeforest sẽ kiểm tra trang demo trước khi
theme tới khách hàng. Demo chứng minh rằng design là duy nhất cũng như code
hợp lệ và đầu ra của code chất lượng.
 Có một demo tốt sẽ mang lại nhiều thuận lợi cũng như đánh giá của
nhóm review sẽ tốt hơn. Nếu có ấn tượng tốt và code chất lượng thì theme có thể

được bán trên Themeforest, bên cạnh đó người mua hàng cũng là nhóm thứ 2 nhìn
thấy demo và có thể ảnh hướng tới quyết định mua Theme của họ.

18


 Kiểm tra vấn đề bản quyền
 Đây là một vấn đề rất quan trọng, hầu như đây là nguyên nhân của các
soft reject bở vì nếu không trả phí cho nó thì cả tác giả và Themeforest có thể bị
kiện vì xâm phạm bản quyền. Tác giả phải mua bản quyền thương mại cho mỗi
phần mở mổ mà sử dụng trong theme của họ. Nó có thể là Javascript plugin, CSS
framework, Wordpress pluin, stock photos và các đoạn code nhỏ hay mỗi phần
thiết kế mà bạn lấy từ người khác để làm theme, nói chung là mọi thứ.
 Nếu mua một thứ gì đó để dùng cho theme tức là bạn đang cần bản
quyền thương mại. Nếu mua từ Envato marketplace thì tức là đang cần bản quyền
mở rộng cho sản phẩm muốn mua. Tóm lại là cần giấy phép để có thể sử dụng các
thành phần khác cho dự án mà muốn 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à chất lượng
document của theme. Thông thường, các sản phẩm tối hoặc không có document sẽ
bị từ chối. Và nếu document đủ hoặc không tốt lắm hay nội dung nghèo nàn cũng
là 1 lý do để sản phẩm của bạn bị soft reject. Hãy chắc chắn rằng chuẩn bị một bản
hướng dẫn tốt. Tạo 1 document tốt và đưa nó theme là điều cơ bản khi gửi theme
lên Themeforest, điều này hoàn toàn không khó và hãy nhớ đừng quên điều đó.

 Sẵn sàng cho việc sẽ bị Rejection
 Điều này có vẻ làm bạn mất tinh thần nhưng cũng cần sẵn sàng khi sản
phẩm của bạn bị từ chối. Có thể đang nghĩ rằng mình có 1 theme tốt với các phần
mở rộng(có bản quyền) tốt và làm demo cũng như document thực sự ấn tượng
nhưng những người ở Themeforest review mỗi ngày và sự thật là họ sẽ cảm thấy
19


sản phẩm cần thiết nếu nó thực sự tốt. Có 2 loại reject là hard reject và soft reject.
 Hard reject có nghĩa là theme không thể chấp nhận bởi Themeforest, có
thể là design xấu hoặc không tuân thủ các tiêu chuẩn của 1 design.
 Soft reject có nghĩa là theme có thể được chấp nhận nếu sửa lại một
số nội dung không phù hợp mà reviewer đưa ra(có thể là 1 phần design cần
sửa hay code có vấn đề cần chỉnh sửa ...). Công việc ở đây là hoàn thành các
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ế nào là ngôn ngữ
đánh dấu siêu văn bản? Ta hãy cùng xem xét từng khía cạnh một:
Siêu văn bản (HyperText): Như ta đã biết, liên kết siêu văn bản là một từ

21


hay một câu trong trang Web dùng để chỉ đến trang Web khác. Khi nhấn chuột lên
một trong các liên kết này, trình duyệt web (như Netscape Navigator hoặc Internet
Explorer) sẽ đưa ta tức khắc đến trang Web kia mà không cần hỏi han gì. Vì những
liên kết siêu văn bản này thật sự là tính năng đặc trưng của World Wide Web, các
trang Web thường được biết như là những tài liệu siêu văn bản. Vì thế, HTML có
từ siêu văn bản trong tên của nó.
Đánh dấu (Markup): Có từ điển định nghĩa markup là các chỉ dẫn chi tiết về
kiểu dáng được ghi trên bản viết tay để xếp chữ in. Như vậy, chúng ta có thể hiểu
đó là các lệnh chi tiết về kiểu dáng được đánh vào tài liệu văn bản để đưa lên
WWW.
Nói chung, HTML tồn tại như là các tập tin văn bản chứa trên các máy tính
nối vào mạng Internet. Các file này có chứa thẻ đánh dấu và thường được truyền đi
trên mạng internet thông qua giao thức mạng HTTP. Sau đó thì phần HTML của
chúng sẽ được hiển thị thông qua một trình duyệt web, một loại phần mềm trực
quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng.
Cấu trúc của một tài liệu HTML
Các tập tin HTML luôn bắt đầu bằng thẻ <HTML>.Thẻ này không làm gì
khác ngoài nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu
có chứa các mã HTML.Tương tự, dòng cuối trong tài liệu định dạng HTML luôn
luôn là thẻ </HTML>, có tác dụng thông báo sự kết thúc của văn bản HTML với
trình duyệt.
Chi tiết kế tiếp trong catalog thẻ HTML dùng để chia tài liệu thành hai
phần: đầu và thân.
Phần đầu giống như lời giới thiệu cho trang. Các trình duyệt Web dùng
phần đầu này để thu nhặt các loại thông tin khác nhau về trang. Để xác định phần
đầu, ta sử dụng thẻ <HEAD> và thẻ </HEAD> ngay sau thẻ <HTML>. Mặc dù ta
có thể đặt một số chi tiết bên trong phạm vi phần đầu này, nhưng phổ biến nhất là

tên trang. Nếu có ai đó xem trang này trong browser, thì tên trang sẽ xuất hiện
22


trong dải tên của cửa sổ browser. Để xác định tên trang, ta đặt đoạn văn bản tên đó
giữa các thẻ <TITLE> và </TITLE>.
Phần thân là nơi nhập vào các văn bản sẽ xuất hiện trên trang Web lẫn các
thẻ khác quy định dáng vẻ của trang. Để xác định phần thân, ta đặt các thẻ
<BODY> và </BODY> sau phần đầu(dưới </HEAD>).
Dưới đây là cấu trúc cơ bản của một trang web định dạng HTML:
<HTML>
<HEAD>
<TITLE> tên trang <TITLE>
Các thẻ tiêu đề khác
</HEAD>
<BODY>
Văn bản và các thẻ của trang Web
</BODY>
</HTML>
1.2.2. Ngôn ngữ Javascript
JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát
triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang
web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm
sẵn trong các ứng dụng. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó
gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã nguồn
JavaScript.
Javascript là ngôn ngữ dưới dạng script có thể gắn với các file HTML. Nó
không được biên dịch mà được chương trình duyệt diễn dịch.Không giống Java
phải chuyển thành mã để trình duyệt biên dịch, trình duyệt đọc Javascript dưới
dạng mã nguồn. Chính vì vậy, ta có thể dễ dàng học Javascript qua các ví dụ bởi ta

có thể thấy cách sử dụng Javascript trên các trang web.
Javascript có khả năng đáp ứng các sự kiện như tải hay loại bỏ các form.
23


Khả năng này cho phép Javascript trở thành ngôn ngữ script động.
Giống với HTML và Java, Javascript được thiết kế độc lập với hệ điều
hành.Nó có thể chạy trên bất kì hệ điều hành nào có hỗ trọ Javascript. Ngoài ra,
Javascript còn giống Java ở khía cạnh an ninh là không thể đọc và viết vào file của
người dùng.
Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output)
riêng.Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần
mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.
Hiện nay, JavaScript được sử dụng rất nhiều trong việc thiết kế trang web
động và một số hiệu ứng hình ảnh thông qua DOM. Ngoài ra, JavaScript còn được
dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như
kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,...Ở Việt Nam, JavaScript
còn được ứng dụng để làm bộ gõ tiếng Việt. Tuy nhiên, mỗi trình duyệt áp dụng
JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều
trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn
để có thể hoạt động trên nhiều trình duyệt.
Javascript là một ngôn ngữ có đặc tính:
 Đơn giản.
 Động (Dynamic).
 Hướng đối tượng (Object Oriented).
Một trong những đặc tính quan trọng của ngôn ngữ javascript là khả năng
tạo và sử dụng các đối tượng (Object). Các Object này cho phép người lập trình sử
dụng để phát triển ứng dụng.
Trong javascript các Object được nhìn theo 2 khía cạnh:
 Các Object đã tồn tại.

 Các Object do người lập trình xây dựng.
Cách nhúng Javascript vào trong tập tin HTML
Cách 1: Viết chưong trình Javascript trực tiếp trong file HTML
24


<script type=”text/javascript”>
//Các lệnh Javascript
</script>
Cách 2: Sử dụng tập tin javascript bên ngoài:
Cũng giống như CSS ngoại tuyến, chúng ta cũng có thể nhúng Javascript
vào tập tin HTML bằng cách liên kết đến một tập tin bên ngoài, đây cũng là
phương thức được sử dụng nhiều nhất.
Với phương pháp này, các lệnh Javascrip sẽ được viết trong một file riêng
biệt có phần mở rộng là .js (Ví dụ ta có tập tin my.js)
Để nhúng tập tin demo.js vào tập tin HTML ta sử dụng đoạn mã sau:
<script type="javascript" src="demo.js" type="text/javascript"></script>
Một số ví dụ javascript:
JavaScript: Viết tại ngỏ ra HTML
<!DOCTYPE html>
<html>
<body>

JavaScript can write directly into the HTML output stream:

<script>
document.write("

This is a heading

");
document.write("

This is a paragraph.

");
</script>

You can only use <strong>document.write</strong> in the HTML
output.
If you use it after the document has loaded (e.g. in a function), the whole
document will be overwritten.
25