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 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. Dương Thị Quy đã tận
tình hướng dẫn, trực tiếp chỉ bảo em trong 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 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.
Do thời gian hạn hẹp, mặc dù đã nỗ lực hết sức mình nhưng đề tài thực tập
chuyên ngành của em khó tránh khỏi những thiếu sót. 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 để thực tập chuyên ngành của
em được hoàn thiện hơn. Một lần nữa em xin chân thành cảm ơn.
Thái nguyên, ngày 20 tháng 5 năm 2016
Sinh viên

Phạm Trọng Khang

1


LỜI CAM ĐOAN
Để hoàn thành đồ án tốt nghiệp đúng thời gian quy định và đáp ứng được
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 một số tài liệu đã nêu trong phần “Tài liệu tham khảo”nhưng không sao
chép nội dung từ bất kỳ đồ án nào khác.
Em xin cam đoan những lời khai trên là đúng, mọi 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 5 năm 2016
Sinh viên

Phạm Trọng Khang

2


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

1

LỜI CAM ĐOAN 2
MỤC LỤC 3
CHƯƠNG I: CƠ SỞ LÝ THUYẾT
1.1. Giới thiệu về themeforest

7

1.1.1. Themeforest là gì ?

7

7

1.1.2.Ưu điểm và nhược điểm của ThemeForest so với thị trường tự do
1.1.3. Làm sao để được approve trên ThemeForest
1.2. Một số ngôn ngữ và công nghệ được sử dụng

7

9
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 về Prestashop

18

20

1.3.1. Đặc điểm của PrestaShop 20
1.3.2. Cài đặt Prestashop 21
1.3.3. Nâng cấp và 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 hiện 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 ra của 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ự và cộng tác

42

2.2.3. Biểu đồ lớp 55
3

30


2.3. Thiết kế cơ sở dữ liệu 56
CHƯƠNG III. DEMO PRESTASHOP TEMPLATE
3.1. Giới thiệu về theme trong 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ú hơn để 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 và cài đặt các thông tin cơ bản
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

4

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 cơ sở dữ liệu 29
Hình 1.7: Bước cấu hình cơ sở dữ 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 năng quản lý thông tin cá nhân
44
Hình 2.2-b: Biểu đồ UC cho chức năng xem giỏ hàng 44
Hình 2.2-c: Biểu đồ UC cho chức năng thanh 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 năng quản lý khách hàng. 46
Hình 2.3-b: Biểu đồ UC cho chức năng quản lý các danh mục sản phẩm.
Hình 2.3-c: Biểu đồ UC cho chức năng 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 thanh toán. 53
Hình 2.17: Biểu đồ cộng tác cho UC thanh 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ý các danh mục sản phẩm 56
5

46


Hình 2.23: Biểu đồ cộng tác cho UC quản lý danh mục cá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ở dữ liệu 61
Hình 3.1. Cấu trúc template63
Hình 3.2. Một ví dụ về UI 64
Hình 3.3. Material design của 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. 6 demo trang chủ 71
Hình 3.8. Phần footer của demo 72
Hình 3.9. Trang chủ và các hook 73
Hình 3.10. Các module của hook Top
74
Hình 3.11. Các module của hook Home 75
Hình 3.12. Các module của hook Footer 75
Hình 3.13. Trang danh mục sản phẩm
76

Hình 3.14 Các module của hook Left
77
Hình 3.15. Trang product 78
Hình 3.16. Các module được phát triển 79
Hình 3.17. Thêm một item trong 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 của một file được 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 khi submit xong và đang đợi review
85
Hình 3.24. Giao diện sau khi public sản phẩm và có sales
85

CHƯƠNG I: CƠ SỞ LÝ THUYẾT
1.1. Giới thiệu về themeforest
1.1.1. Themeforest là gì ?
Theme forest là một marketplace, nơi mà các tác giả (author) sẽ tự do
6


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 TF 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 TF, việc ăn

chia này được quy định rõ trong các điều khoản của TF. Nói đơn giản, TF 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 dùng
1.1.2.Ưu điểm và nhược điểm của ThemeForest so với thị trường tự do
a. Ưu điểm
TF 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 đó nếu 1
sản phẩm của bạn được approve trên TF thì lập tức sẽ có một lượng khách hàng
truy cập không hề nhỏ. Nếu bạn có ý định tự làm thì bạn sẽ phải đầu tư 1 khoản
tương đối cho dịch vụ quảng cáo như Adwords, Facebook ... mà chưa chắc
chắn lợi ích mang lại sẽ được bao nhiêu !
Uy tín, chất lượng: Việc theme của bạn được upload lên TF, vượt qua khau
review của TF đồ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
7


tháng nhận tiền thôi.
b. Nhược điểm
Bạn phải tuân thủ luật: Nó giống như một trò chơi mạo hiểm vậy. Nếu bạn
vi phạm một số nguyên tắc của Themeforest thì bạn 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 cho ra đảo
sau một đêm. Tuy nhiên, sẽ không có vấn đề gì nếu như bạn tuân thủ luật chơi,
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ế…
Bạn bị mất từ 30% – 50% cho mỗi sản phẩm bán được: Bạn sẽ phải chia
cho Themeforest từ 30 – 50% lợi nhuận, tùy theo vị trí của bạn. Nếu bạn đã bán
được $75,000 trên Themeforest thì bạn được hưởng 70%, còn nếu mới bắt đầu thì
bạn chỉ được hưởng 50% thôi. Ban đầu, khi mới bắt đầu bạn sẽ thấy 50% không là
gì, vì bạn chỉ cần bán được hàng, có tiền, mà nhận được $20/theme cũng làm bạn
sung sướng. Tuy nhiên, về sau bạn sẽ thấy nhận được 70%/theme vẫn còn là ít, và
bạn 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ì bạn cũng sẽ mất một khoản chi phí cho việc thuê server, trả lương nhân viên…
Bạn 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
Bạn 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
8


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
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. 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 bạn 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. Cơ mà bạn cũng không phải lo,
nếu bạn hiểu rõ cơ chế hoạt động của thị trường này thì bạn sẽ không còn bị
reject/fail nữa.
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 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 ?
 Chắc chắn rằng design của bạn 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 của bạn 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.
9


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 bạn sẽ phải học thiết kế như việc họ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ế.
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:
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
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 đó
10


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.Khả năng này cho phép Javascript trở thành ngôn ngữ script động.
11

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.
Đặc tính của ngôn ngữ java script:
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ó 2 cách để nhúng Javascript vào trong tập tin HTML
12

Cách 1: Viết chưong trình Javascript trực tiếp trong file HTML
<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.
13

</body>
</html>
Bạn có thể chỉ sử dụng document.write trong ngỏ ra HTML (HTML output).
Nếu bạn sử dụng sau khi tài liệu đã được tải thì toàn bộ nội dung của tài liệu sẽ bị
ghi đè lên.
JavaScript: Dùng để bắt sự kiện người dùng
<!DOCTYPE html>
<html>
<body>

My First JavaScript

JavaScript can react to events. Like the click of a button:

<button type="button" onclick="alert('Welcome!')">Click Me!</button>
</body>
</html>
Hàm alert() không được sử dụng nhiều trong JavaScript. Nhưng nó thường khá
thuận tiện để in ra các đoạn mã.
Sự kiện onclick chỉ là một trong số rất nhiều các sự kiện HTML bạn sẽ được biết
đến trong quá trình tự học JavaScript
JavaScript: Thay đổi nội dung HTML
Sử dụng JavaScript để vận dụng vào nội dung của các phần tử HTML là một chức
năng rất mạnh mẽ.
Bạn sẽ thường xuyên sử dụng document.getElementById(“some id”). Điều này
được định nghĩa trong HTML.
DOM (Document Object Model) là chuẩn được cung cấp chính thức bởi tổ chức
W3C dùng để truy xuất các phần tử HTML.

14


Ghi chú: JavaScript và Java là hai ngôn ngữ lập trình hoàn toàn khác nhau, kể cả
trong khái niệm và thiết 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 chủ yếu được dùng để phát triển các ứng dụng
viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất thích hợp với
web và có thể dễ dàng nhúng vào trang HTML. Do được tối ưu hóa cho các ứng
dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và 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ỗ đứng vững chắc trong thế giới các ngôn ngữ lập trình web.
Xuất phát từ thực tế trên, đặc biệt là những ưu thế mà PHP đem lại, em đã
quyết định lựa chọn ngôn ngữ này để thực hiện đề tài xây dựng website du lịch mà
em đã nghiên cứu trong quá trình thực tập
 Cú pháp căn bản của PHP
Như đã trình bày, PHP dựa trên cú pháp của ngôn ngữ lập trình C nên về
cơ bản cú pháp của nó tương tự như C. Ngoài ra, để lập trình bằng PHP ta cần
lưu ý mấy điểm sau:
 Cuối mỗi câu lệnh phải có dấu ;
 Biến trong PHP có tiền tố là $.
 Khai báo biến không có kiểu dữ liệu.

15


 Khai báo biến có phân biệt chữ hoa và chữ thường.
 Nên có giá trị khởi tạo cho biến khai báo.
 Mỗi phương thức đều được bắt đầu bằng dấu { và kết thúc bằng }.
 Phải có ghi chú cho mỗi feature mới.
 Để giải thích cho mỗi ghi chú ta dùng dấu // hoặc #.
 Sử dụng /* để mở đầu và */ kết thúc cho mỗi đoạn ghi chú.
 Kiểu dữ liệu
PHP hỗ trợ 8 kiểu dữ liệu chính:
 4 kiểu dữ liệu vô hướng: boolean, integer, float (double), string.
 2 kiểu dữ liệu tổ hợp: array, object.
 2 kiểu dữ liệu đặt biệc: resource, NULL.
 Biến
Một biến trong PHP được bắt đầu bằng ký tự $ và đi theo ngay sau đó là tên
của biến. Ví dụ: $a: biến có tên là a.
 Câu lệnh
Do cú pháp của PHP dựa trên ngôn ngữ C nên các câu lệnh điều khiển của nó
cũng hoạt động tương tự như trong C. Các câu lệnh điều khiển trong PHP:
 If (điều kiện) {câu lệnh;}
 If (điều kiện) {câu lệnh;} else {câu lệnh;}
 If (điều kiện) {câu lệnh;} elseif {câu lệnh;}
 For (biểu thức 1; biểu thức 2; biểu thức 3) câu lệnh;
 While (điều kiện)
 Do … while (điều kiện)
 Break
 Continue
 Switch (điều kiện)

16


{
case value1
câu lệnh 1;
break;
…
}
 Hàm
Hàm do người dùng định nghĩa
Trong lập trình, có một số đoạn mã được dùng nhiều lần ở nhiều nơi khác nhau
trong chương trình. Sẽ rất phiền và khó sửa lỗi nếu như ta phải viết lặp đi lặp lại 1
đoạn mã đó ở nhiều nơi. PHP cung cấp một giải pháp đó là hàm do người dùng định
nghĩa. Ta có thể đưa đoạn mã đó vào trong 1 hàm, và ở chỗ nào cần dùng đoạn mã
đó ta chỉ cần gọi hàm, khi cần sửa đổi, ta chỉ cần sửa đổi 1 chỗ duy nhất là nội dung
của hàm chứ không cần phải sửa ở nhiều nơi trong chương trình.
Cú pháp để tạo 1 hàm do người dùng định nghĩa như sau:
function tênHàm($tham_số1, $tham_số2, ..., $tham _sốn) {
//thân hàm
echo "Testing";
return $kết_quả_trả_về;
} //end
Khi cần sử dụng hàm ở chỗ nào, ta chỉ cần dùng cú pháp tênHàm(các tham
số cần thiết);
 Tham số của hàm
Hàm có thể nhận vào các tham số, ví dụ:
function testing($a) {
echo "Tham số là $a";

} //end testing
17


testing(123);
testing("abc");
?>
Ở ví dụ trên, lời gọi hàm testing(123); sẽ in ra dòng Tham số là 123 và lời gọi
hàm testing("abc"); sẽ in ra dòng Tham số là abc.
Khi tham số của hàm không được truyền, nó sẽ nhận giá trị mặc định. Ta có
thể gán giá trị mặc định cho tham số của hàm:
function testing($a="mặc định") {
echo "Tham số là $a";
} //end testing
testing();
?>
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ử lý và chèn vào với các code
khác nhau.
Các tag này là chỉ thị cho Smarty mà có thể được bao đóng bới tag mở và tag
khóa.Những hướng dẫn này có thể là biến, và được định nghĩa bởi dấu dollar ($),
các chức năng, hàm logic hoặc các luồng điều khiển. Smarty cho phép các lập trình
viên có thể tự định nghĩa các chứng năng và truy cập sử dụng các Smarty tags
Smarty là kết quả của việc tối ưu hóa và phân luồng công việc, cho phép trình diễn
các trang web bằng cách chia nhỏ chúng ở đầu cuối (back-end). Ý tưởng đó đã

giúp giảm thiểu rất nhiều giá thành và sự đồ sộ của các phần mềm.Dưới mỗi một
ứng dụng thành công thì luôn phân chia thành 2 mảng là người thiết kế chính là lá
18


chắn bảo về mã nguồn sau (back-end coding) và người lập trình php được bảo vệ
bới mã trình diễn. Smarty hỗ trợ một vài tính chất của ngôn ngữ lập trình bậc cao,
bao gồm:
 Điều khiển luồng dữ liệu, foreach
 Câu lệnh rẽ nhánh if, elseif, else
 Các toán tử
 Khai báo và thay đổi 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ì.Bạn là người viết ra và cũng là
người bảo trì thì không sao nhưng nếu bạn viết ra sau đó người khác bảo trì.Chắc
họ nhìn vào code của bạn họ sẽ ngất mất vì quá rối.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 lại hoàn toàn. Ngoài ra muốn code được bạn phải chờ người thiết
kế giao diện cho bạn sau đó cắt ra file HTML... rồi mới code... Tất cả những điều
này sẽ làm giảm năng xuất công việc của bạn đi rất nhiều.Smarty ra đời đã giải
quyết được các vấn đề nêu trên. Dưới đây là một số ưu điểm của Smarty:
 Tốc độ load trang rất nhanh (do tạo được cache)
 Code ứng dụng của bạn trở lên trong sáng, mạch lạc và dễ bảo trì hơn rất
nhiều (do tách biệt phần code và templates).
 Hiệu quả công việc đạt tối đa (Người thiết kế và người lập trình làm việc
hoàn toàn độc lập. Thay đổi giao diện website nhanh chóng... )các bạn có thể coi
kinh nghiệm thiết kế web của webpro

 Được sử dụng phổ biến ( bên Nhật rất ưa chuộng Smarty )
1.2.5. Hệ quản trị CSDL MySQL
19


MySQL là hệ quản trị CSDL mã nguồn mở phổ biến nhất thế giới.Đây là hệ
CSDL dùng cho các ứng dụng web vừa và nhỏ. Tuy không phải là hệ quản trị
CSDL lớn nhưng MySQL cũng có trình giao diện trên Wingdows hay Linux, cho
phép người dùng thao tác các hành động liên quan đến CSDL.
Cũng giống như các CSDL khác, khi làm việc với CSDL MySQL, ta đăng
kí kết nối, tạo CSDL, quản lý người dùng, phân quyền sử dụng, thiết kế đối tượng
table của CSDL và xử lý dữ liệu.
Để thao tác trên CSDL, ta có thể dùng trình quản lý dạng đồ hoạ hay dùng
dòng lệnh (Command line). Tất nhiên, dùng hệ quản trị có hỗ trợ trình giao diện đồ
hoạ thì tiện lợi hơn.Tuy vậy, dù dùng dưới hình thức nào thì mục đích cũng là quản
lý và thao tác trên CSDL.
 Câu lệnh cơ bản của MySQL
 Hiển thị tất cả database trong mysql server:
SHOW DATABASES;

 Tạo một database: CREATE DATABASE {tên database};
Ví dụ tạo một database có tên là "champiblog" như sau:
create database champiblog;

 Xóa một database: DROP DATABASE {tên database};
Ví dụ khi muốn xóa database có tên là "champiblog"
DROP DATABASE champiblog;

 Tạo một bảng: CREATE TABLE [tên table] (cột 1, cột 2...);
Ví dụ muốn tạo một table có tên là "member" có hai cột dữ liệu là "userid" và

"username": CREATE TABLE member (userid int(7), username text);

 Nhập dữ liệu vào bảng: INSERT INTO [tên table] ([cột 1],[cột 2],......)
VALUES (giá trị 1, giá trị 2,....);
Vị dụ nhập dữ liệu cho table "member" đã được tạo ở trên: INSERT INTO
member (userid,username) VALUES (1,'champi');

20


 Lấy dữ liệu từ table: SELECT {tên cột muốn hiển thị} FROM [tên table];
Ví dụ lấy tất cả các cột: SELECT * FROM member;
Hoặc là chỉ lấy 1 số cột nhất định: select username from member;

 Sửa đổi dữ liệu trong table: UPDATE [tên table] SET [cột muốn sửa]
='giá trị mới' WHERE [điều kiện] = 'giá trị';
Ví dụ muốn sửa tên thành viên "champi" thành "anh champi" (userid của
champi = 1): UPDATE member SET username='anh champi' WHERE userid = 1;

 Đếm số data có trong table: SELECT COUNT FROM [tablename];
Ví dụ: SELECT COUNT FROM member;

 Xóa dữ liệu: DELETE FROM [tablename] WHERE....;
Ví dụ: DELETE FROM member WHERE userid=1;
 Xóa table: DROP TABLE [tên table];
Ví dụ :DROP TABLE member;
1.3. Giới thiệu về Prestashop
PrestaShop – Giải pháp website thương mại điện tử cho cá nhân và doanh
nghiệp với những chức năng đầy đủ và hoàn thiện nhất của một website 2.0 chuyên
nghiệp bán hàng trực tuyến e-Commerce shopping cart.

Được phát triển từ năm 2005, trước đây PrestaShop khá ít tên tuổi, do phát
hành chủ yếu với phiên bản tiếng Pháp. Nhưng thời gian gần đây, với những cải
tiến vượt bậc, PrestaShop đã trở thành mã nguồn mở khá phổ biến.
Với ưu thế về mã nguồn phát triển sau, PrestaShop kế thừa được nhiều ý
tưởng của các mã nguồn cùng loại đi trước như OsCommerce. Điểm làm lên khác
biệt chủ yếu là việc Prestashop tích hợp sẵn thư viện trình bày sản phẩm theo màu
sắc. Tính năng này giúp chủ cửa hàng tiếp cận tốt hơn với các khách hàng của họ.
Ngoài ra, việc tích hợp trực tiếp trang quản lý thông tin vào mã nguồn, cũng
giúp PrestaShop trở nên thân thiện hơn với người sử dụng.
1.3.1. Đặc điểm của PrestaShop

21


 Đầy đủ các chức năng của một website bán hàng trực tuyến: thêm, sửa,
xóa, thống kê sản phẩm, nhà sản xuất, nhà phân phối, khách hàng…
 Theo dõi tình trạng bán hàng, thông báo cho khách hàng bằng tin nhắn
SMS, thu thập thông tin khách hàng….
 Áp dụng được nhiều phương thức thanh toán khác nhau với các đơn vị tiền
tệ lưu hành phổ biến.
 Tốc độ tải và xử lý nhanh. An toàn, bảo mật.
 URL thân thiện, tối ưu máy tìm kiếm SEO, quản lý nội dung CMS…
 Bạn không cần quan tâm tới chi phí mua phần mềm hay vấn đề bản quyền
vì Prestashop là phần mềm nguồn mở và hoàn toàn miễn phí.
 Thường xuyên cập nhật các phiên bản mới hơn để sửa chữa các lỗi bugs và
bổ sung thêm các chức năng và các modules mới.
 Dễ dàng quản trị website với các công cụ tương đối ổn định và bảng điều
hướng thuận tiện.
 Dễ dang tích hợp và mở rộng phát triển các modules độc lập.
 Giao diện thân thiện, dễ sử dụng, có thể thiết kế giao diện độc lập.

 Hỗ trợ trên 40 ngôn ngữ phổ biến bao gồm cả Tiếng Việt. Người sử dụng
có thể xây dựng gói ngôn ngữ riêng phù hợp với nhu cầu của mình.
 PrestaShop e-Commerce sử dụng công nghệ Web 2.0 với sức mạnh của
AJAX, JQuery library. PrestaShop cũng sử dụng cộng nghệ Smarty framework để
giúp các nhà thiết kế web có thể tạo ra giao diện một cách dễ dàng mà không cần
am hiểu nhiều về ngôn ngữ lập trình PHP.
 Mặc dù được tích hợp rất nhiều chức năng như vậy nhưng PrestaShop rất nhẹ
và nhanh. Tuy vậy PrestaShop vẫn còn tồn tại khá nhiều khuyết điểm, nổi bật như:
 Khả năng quản lý Url-rewirte khá yếu, không có khả năng mở rộng tùy
biến. Làm giảm đáng kể khả năng SEO của website.
 Thuật toán tìm kiếm của PrestaShop được đánh giá là khá yếu so với các
22


Open Source khác.
 Kiến trúc Extensions hỗ trợ cho bên thứ ba tự phát triển khá yếu.
PrestaShop giành giải Open Source Business Applications Award của Packt
Publishing:
Open Source Award của Packt Publishing là một trong những giải thưởng
uy tín và danh giá bậc nhất dành cho các mã nguồn mở. Giải do nhà xuất bản sách
Packt trao thưởng hàng năm, dựa trên bình chọn của người sử dụng, lập trình viên,
và các chuyên gia uy tín trong 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ó những bước tiến vượt bậc khi vươn lên giành giải thưởng quan
trọng này.Vượt qua những tên tuổi nổi tiếng khác như OsCommerce,Zencart, hay
OpenCart, PrestaShop bất ngờ dành chiến thắng giải thưởng danh giá này.
1.3.2. Cài đặt Prestashop
Cài đặt phiên bản PrestaShop 1.5.6.0với yêu cầu hệ thống như sau:

 Yêu cầu hệ thống:
 Linux, Unit, hoặc Windows.
 Web Server (Apache 1.3 or later, IIS 6 or later)
 PHP 5.0* or later
 MySQL 5 or later Some PHP 5 versions are bugged and prevent
PrestaShop from working correctly:
 PHP < 5.2 (invalid date timezone)
 Các bước cài đặt
Tải về và giải nén prestashop
23


Bạn có thể tải bản mới nhất của Prestashop tại đường dẫn:
/>Sau khi tải về, bạn dùng các công cụ như: 7-zip, WinZip, WinRAR để giải
nén. Sau khi giải nén bạn sẽ được thư mục /prestashop . Tiếp theo bạn sẽ cần
chuyển thư mục /prestashop này vào nơi bạn đã cài đặt WampServer hoặc Xampp.
Nếu sử dụng WampServer bạn paste vào thư mục /www, Nếu sử dụng Xampp bạn
paste vào thư mục /htdocs.
Tạo cơ sở dữ liệu cho cửa hàng của bạn

Hình 1.2: Giao diện phpMyAmin
Nhập tên cơ sở dữ liệu rồi nhấn “Create”. Ví dụ: prestashop
Sau khi tạo xong, chạy đường dẫn: http://localhost/prestashop trên trình
duyệt. Khi đó prestashop sẽ tự động chuyển đến http://localhost/prestashop/install

24


Bước 1: Trang Welcome

Hình 1.3: Bước welcome
Ở bước này bạn chọn “English” và nhấn vào “Next”. Đừng lo lắng vì chúng
ta sẽ thêm ngôn ngữ Tiếng Việt trong phần quản lý sau khi cài đặt xong
Bước 2: Điều khoản sử dụng của Prestashop

25