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

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ỏ.. Ngoài ra, Javascript còn giống Java ở khía cạnh an ninh là không thể đọc

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

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ỤCLỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

MỤC LỤC 3

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

1.1 Giới thiệu về themeforest 7

1.3 Giới thiệu về Prestashop 20

1.3.1 Đặc điểm của PrestaShop20

2.3 Thiết kế cơ sở dữ liệu 56

CHƯƠNG III DEMO PRESTASHOP TEMPLATE 57

3.1 Giới thiệu về theme trong Prestashop 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 603.2.3 Thiết kế Responsive 61

TÀI LIỆU THAM KHẢO 82

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 83

4

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 46Hì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

Hình 2.23: Biểu đồ cộng tác cho UC quản lý danh mục các sản phẩm57

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 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

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

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:

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

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

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

</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

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

 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

 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) {

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

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

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

 Đầ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)

Bạn có thể tải bản mới nhất của Prestashop tại đường dẫn:

http://www.prestashop.com/en/downloads/

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

Hình 1.4: Bước điều khoản sử dụng

Bạn chọn như hình trên và nhấn tiếp tục

Bước 3&4: Kiểm tra cấu hình và cấu hình prestashop

26

Hình 1.5: Bước kiểm tra cấu hình

Kiểm tra thành công, các bạn nhấn “Next” để sang bước 4

Hình 1.6: Bước cấu hình cơ sở dữ liệu

Ở bước này bạn nhập thông tin như trên và nhấn “Next”

28

Bước 5: Cấu hình cửa hàng của bạn

Hình 1.7: Bước cấu hình cơ sở dữ liệu

Sau khi điền đầy đủ thông tin bạn nhấn “Next” Quá trình cài đặt bây giờ sẽ thêm dữ liệu vào cơ sở dữ liệu, tạo các file cấu hình, cài đặt module mặc đinh, cài đặt theme

Sau khi cài đặt xong màn hình sẽ hiện:

Hình 1.8: Cài đặt thành công

Giao diện mặc định của Prestashop:

1.3.3 Nâng cấp và gỡ cài đặt

 Nâng cấp

 Sao lưu mã nguồn

 Sao lưu cơ sở dữ liệu bằng 2 cách Back Office >> Tools >>Backup hoặc phpmyadmin/export

 Đổi tên thư mục PrestaShop trên hosting server của bạn

 Download phiên bản PrestaShop mới nhất

 Giải nén file PrestaShop Zip vừa tải về

 Upload lên hosting bằng FTP client

 Copy nội dung thư mục/ mails ở phiên bản PS trước sang thư mục/ mails ở phiên bản bạn nâng cấp

 Copy nội dung thu mục ảnh/img ở phiên bản PS trước sang thư mục ảnh/img ở phiên bản bạn nâng cấp

 Copy các modules của bạn hoặc các modules đã có sự thay đổi

 Kết hợp nội dung của file htaccess ở thư mục root

 Copy theme của bạn sang thư mục /theme Chú ý vấn đề tương thích của theme với phiên bản PrestaShop hiện tại

 Copy file /config/settings.inc.php

 Bắt đầu cài đặt /install bằng cách nhập địa chỉ URL tới thư mục cài đặt Prestashop.Chọn Update

Chú ý: Thường xuyên sao lưu cơ sở dữ liệu.

 Gỡ cài đặt PrestaShop

Xóa thư mục “PrestaShop”

Xóa cơ sở dữ liệu PrestaShop

CHƯƠNG II KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Một số yêu cầu từ cửa hàng:

Đối với khách hàng có các chức năng thực hiện trên website như sau:

 Xem thông tin sản phẩm

 Khảo sát quy trình thực hiện mua hàng của khách hàng

 Khách hàng duyệt ứng dụng web trên trình duyệt

 Trình duyệt sẽ hiển thị các sản phẩm và dịch vụ mà cửa hàng cung ứng Khách hàng có thể xem thông tin các sản phẩm theo từng chủng loại mà cửa hàng cung ứng, hoặc có thể thực hiện chức năng tìm kiếm để tìm kiếm sản phẩm

 Sau khi xem thông tin về các sản phẩm khách hàng có thể chọn mua sản phẩm mà mình cần, sản phẩm được chọn mua sẽ được đưa vào trong giỏ hàng là nơi chứa thông tin về các sản phẩm mà khách hàng định đặt mua, khách hàng có thể thay đổi số lượng hoặc thêm, sửa, xóa các sản phẩm trong giỏ hàng, sau đó khách hàng có thể tiếp tục xem và chọn lựa các sản phẩm khác hoặc có thể tiến hành đặt mua các sản phẩm mà mình đã chọn

 Để đặt mua sản phẩm thì khách hàng cần cung cấp đầy đủ các thông tin giao hàng: họ tên, số điện thoại, địa chỉ, email

 Sau khi cung cấp đầy đủ thông tin giao hàng và gửi đơn hàng thì hệ thống

sẽ phản hồi thông báo cho khách hàng biết là đơn hàng đã được gửi đi Khách hàng có thể tiếp tục xem và chọn mua các sản phẩm khác

 Dựa vào các thông tin giao hàng, cửa hàng sẽ liên hệ lại với khách hàng

để giao hàng

 Ngoài ra khách hàng cũng có thể gửi yêu cầu đến cửa hàng qua email, có

thể trực tiếp liên hệ với cửa hàng qua số điện thoại hoặc Yahoo.

 Quá trình xác thực đơn hàng sẽ được người quản trị thực hiện, trước tiên quản trị viên sẽ xem đơn hàng, đọc thông tin và gọi điện cho khách hàng đó xác nhận lại thông tin rồi báo giá cho khách hàng biết, sau đó quản trị viên sẽ thiết đặt trạng thái của đơn hàng

 Hình thức thanh toán bằng tiền mặt hoặc chuyển khoản rồi giao hàng

 Quy trình quản trị hệ thống của người quản trị

Người quản trị sẽ có một tài khoản để đăng nhập vào hệ thống, sau khi đăng nhập người quản trị có thể thực hiện một số chức năng như:

 Quản lý danh mục các loại sản phẩm: Thêm, sửa, xóa các loại sản phẩm

 Quản lý sản phẩm: Thêm , sửa, xóa các sản phẩm

 Quản lý đơn đặt hàng: xử lý các đơn đặt hàng của khách hàng

 Quản lý các liên hệ của khách hàng

 Quản lý các banner, thông tin trên website

 Quản lý việc thăm dò ý kiến của khách hàng

2.1.2 Các thông tin vào ra của hệ thống

 Các thông tin đầu vào

 Các thông tin giới thiệu về hệ thống, giới thiệu về cửa hàng

 Các thông tin về từng loại sản phẩm và từng sản phẩm

 Các thông tin về khách hàng

 Các thông tin về đơn đặt hàng

 Các bài viết, tin tức

36

 Các thông tin đầu ra

 Các thông tin giới thiệu về hệ thống, giới thiệu về cửa hàng

 Các thông tin về từng loại sản phẩm và từng sản phẩm

 Các thông tin tra cứu, các banner, quảng cáo

 Các trả lời của người quản trị đối với những khách hàng đã đặt hàng và những khách hàng đã gửi liên hệ với cửa hàng

 Các thông báo tới khách hàng, người quản trị

2.2 Phân tích thiết kế hệ thống

2.2.1 Biểu đồ Use Case

 Xác định các tác nhân và use case

 Use case đăng ký

 Tên use case : đăng ký

 Mô tả : Cho phép khách hàng đăng ký là thành viên hệ thống.

38

 Hệ thống thêm mới thông tin khách hàng vào danh sách thành viên.

 UC kết thúc

 Luồng rẽ nhánh : Quá trình khách hàng nhập thông tin không chính xác

 Hệ thống thông báo thông tin nhập vào không đúng yêu cầu

 Yêu cầu khách hàng xem lại thông tin đăng ký trên Form

 Khách hàng đồng ý xem lại thông tin và quay lại bước 3(Khách hàng nhập thông tin đăng cần thiết vào Form đăng ký) Nếu không kết thúc UC

 Hậu điều kiện : Khách hàng trở thành thành viên của hệ thống.



 Use case đăng nhập

 Tên Use case : đăng nhập

 Mô tả: UC đăng nhập thực hiện đăng nhập cho các tài khoản đã được

đăng ký vào hệ thống Cả tài khoản khách hàng, người quản lý đều thực hiện đăng nhập bằng UC này

 Tiền điều kiện: UC đăng ký đã được thực hiện

 Luồng sự kiện chính:

 Từ trang web khách hàng nhấn nút đăng nhập

 Hệ thống hiển thị trang đăng nhập

 Khách hàng nhập user name và password đã đăng kí ở hệ thống

 Hệ thống sẽ kiểm tra với cơ sở dữ liệu

 Khách hàng đăng nhập thành công

 Luồng sự kiện phụ: Nếu khách hàng nhập user name và password không

đúng thì hệ thống thông báo sai user name hoặc password và yêu cầu khách hàng đăng nhập lại

 Hậu điều kiện: không có

 Use case đăng xuất

 Tên use case : đăng xuất

 Mô tả: Cho phép khách hàng hay người quản lý thoát khỏi phiên làm việc

trên hệ thống

 Tiền điều kiện: Uc đăng nhập được thực hiện trước đó

40