thiet ke web_ban_hang

69
TRUNG TÂM ĐÀO TẠO ATHENA QUẢN TRỊ MẠNG VÀ AN NINH QUỐC TẾ ANTHENA -------------- BÁO CÁO THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: THIẾT KẾ WEB BÁN HÀNG TRỰC TUYẾN BẰNG OPENCART Giáo viên hướng dẫn: Đỗ Võ Thắng Sinh viên thực tập: Lâm Hoài Nhân Ngành: Công Nghệ Thông Tin Khóa: 2011 – 2014 TP.HCM, ngày 22 tháng 4 năm 2014

Upload: think-le

Post on 14-Aug-2015

21 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Thiet ke web_ban_hang

TRUNG TÂM ĐÀO TẠO ATHENA

QUẢN TRỊ MẠNG VÀ AN NINH

QUỐC TẾ ANTHENA--------------

BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI:THIẾT KẾ WEB BÁN HÀNG TRỰC TUYẾN

BẰNG OPENCART

Giáo viên hướng dẫn: Đỗ Võ ThắngSinh viên thực tập: Lâm Hoài Nhân

Ngành: Công Nghệ Thông TinKhóa: 2011 – 2014

TP.HCM, ngày 22 tháng 4 năm 2014

Page 2: Thiet ke web_ban_hang

LỜI NÓI ĐẦU-----------------------------

Hiện nay trên thế giới thương mại điện tử đang phát triển rất mạnh mẽ. Kỹ thuật số

giúp chúng ta tiết kiệm đáng kể các chi phí nhờ chi phí vận chuyển trung gian, chi phí giao

dịch. và đặc biệt là giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác. Hơn

nữa thương mại điện tử còn giúp con người có thể tìm kiếm tự động theo nhiều mục đích

khác nhau, tự động cung cấp thông tin theo nhu cầu và sở thích của con người. Giờ đây, con

người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các website bán hàng trên

mạng sẽ giúp ta làm được điều đó. Chính vì vậy các công nghệ mã nguồn mở trở lên được

chú ý vì các tính năng của nó.

Giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh chóng xây dựng các

website bán hàng thân thiện và dễ sử dụng với người dùng. Chính vì vậy trong đồ án này em

chọn đề tài về: “Xây dựng Website bán hàng điện tử trực tuyến bằng Opencart”. Đây là

1 hệ thống đơn giản nhưng đủ mạnh để cho phép nhanh chóng xây dựng các ứng dụng bán

hàng trên Internet.

Page 3: Thiet ke web_ban_hang

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

Trong lời đầu tiên của báo cáo đồ án tốt nghiệp “Xây dựng Web bán chương trình đào

tạo Athena bằng Opencart ” này, em muốn gửi những lời cám ơn và biết ơn chân thành nhất

của mình tới tất cả những người đã hỗ trợ, giúp đỡ em về kiến thức và tinh thần trong quá

trình thực hiện đồ án. Trước hết, em xin chân thành cám ơn Thầy Võ Đỗ Thắng Giám đốc

Trung Tâm Athena đã hướng dẫn, nhận xét, giúp đỡ em trong suốt quá trình thực hiện đồ án.

Xin chân thành cảm ơn các bạn thực tập ở trung tâm Athena và các anh (chị ) trong

trung tâm đã hỗ trợ em trong suốt thời gian học tập và làm tốt nghiệp. Cuối cùng em xin gửi

lời cảm ơn đến gia đình, bạn bè, người thân đã giúp đỡ động viên em rất nhiều trong quá trình

học tập và làm Đồ án Tốt Nghiệp. Do thời gian thực hiện có hạn, kiến thức còn nhiều hạn chế

nên Đồ án thực hiện chắc chắn không tránh khỏi những thiếu sót nhất định.

Em rất mong nhận được ý kiến đóng góp của thầy cô giáo và các bạn để em có thêm

kinh nghiệm và tiếp tục hoàn thiện đồ án của mình.

Em xin chân thành cảm ơn!

TP.HCM, ngày 22 tháng 04 năm 2014

Sinh viên thực hiện:

LÂM HOÀI NHÂN

Page 4: Thiet ke web_ban_hang

PHIẾU NHẬN XÉT SINH VIÊNTHỰC TẬP TỐT NGHIỆP

Họ tên sinh viên:...........................................................................................................Khóa: ..............................................................................................................................

Khoa Công nghệ Thông tin, Trường cao Đẳng Kinh tế - Kỹ Thuật Vinatex TP.HCMchân thành cảm ơn Quý Công ty, Nhà máy, Cơ quan đã chấp thuận cho sinh viên Khoa chúngtôi được thực tập tốt nghiệp tại Quý đơn vị.

Nhằm đánh giá chất lượng, kết quả thực tập của sinh viên của Khoa và đưa ra phươnghướng cải tiến chương trình đào tạo trong thời gian tới. Khoa kính đề nghị Quý đơn vị nhậnxét sinh viên thực tập tốt nghiệp theo các tiêu chí như sau:

1. Thái độ chấp hành Nội quy – Qui định của cơ quan: Rất nghiêm túc Nghiêm túc Chưa nghiêm túc

2. Đánh giá năng lực chuyên môn: Xuất sắc Giỏi Khá Trung bình Yếu

3. Đánh giá khả năng tiếp cận với thực tiễn của cơ quan: Xuất sắc Giỏi Khá Trung bình Yếu

4. Đánh giá khả năng ngoại ngữ: Xuất sắc Giỏi Khá Trung bình Yếu

5. Đánh giá khả năng tin học: Xuất sắc Giỏi Khá Trung bình Yếu

6. Khả năng làm việc nhóm Xuất sắc Giỏi Khá Trung bình Yếu

7. Khả năng giao tiếp Xuất sắc Giỏi Khá Trung bình Yếu

8. Các ý kiến đóng góp cho Khoa – Trường:......................................................................................................................................................................................................................................................................................

9. Đánh giá kết quả thực tập:………../10 điểmTên đơn vị nhận xét: .......................................................................................................................Địa chỉ: ..............................................................................................................................................Email: ............................................................................. Điện thoại: ...............................................Loại hình đơn vị: Nhà nước Tư nhân Liên doanh Nước ngoài

XÁC NHẬN CỦA ĐƠN Vị(Ký tên và đóng dấu xác nhận)

CÁN BỘ HƯỚNG DẪN(Ký tên và ghi họ tên)

....

TRƯỜNG CAO ĐẲNG KINH TẾ - KỸ THUẬTVINATEX TP. HCM

KHOA NGOẠI NGỮ - TIN HỌC

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAMĐộc lập – Tự do – Hạnh phúc

TP. Hồ Chí Minh, ngày tháng năm 2014

Page 5: Thiet ke web_ban_hang

MỤC LỤCCHƯƠNG I: NỘI DUNG THỰC TẬP TẠI NƠI THỰC TẬP......................................................... 1

LỊCH LÀM VIỆC TẠI NƠI THỰC TẬP.......................................................................................11. GIỚI THIỆU VỀ TỔ CHỨC CỦA NƠI THỰC TẬP........................................................... 1

Giới thiệu chung về trung tâm....................................................................................1Lĩnh vực hoạt động chính:..........................................................................................2Đội ngũ giảng viên :..................................................................................................... 2

TRUNG TÂM ĐÀO TẠO QUẢN TRỊ MẠNG & AN NINH MẠNG QUỐC TẾ ATHENA...... 8CHƯƠNG II: PHÂN TÍCH YÊU CẦU XÂY DỰNG WEBSITE...................................................... 9

I. Phân Tích Yêu Cầu................................................................................................................ 91. Bài toán đưa ra.........................................................................................................92. Sơ đồ user goal......................................................................................................103. Sơ đồ class diagram............................................................................................. 114. Sơ đồ trang web.....................................................................................................115. Một số bảng cơ sở dữ liệu tiêu biểu...................................................................12

II. Tìm Hiểu Về Mã Nguồn Mở................................................................................................ 141. Khái niệm.................................................................................................................142. Giới thiệu về một số mã nguồn mở....................................................................14

III. Tìm Hiểu Về OpenCart........................................................................................................... 151. Kiến trúc của Opencart.........................................................................................152. Opencart là một hệ thống giỏ hàng....................................................................18

IV. Công Cụ Lập Trình..................................................................................................................191. DreamWeaver........................................................................................................ 192. Công cụ đồ họa......................................................................................................193. XAMPP.................................................................................................................... 204. FileZilla Client.........................................................................................................205. Cài đặt Xampp Control Panel v3.2.1..................................................................206. Cài đặt Opencart....................................................................................................21

V. Chỉnh Sửa Website Tại Trang Quản Trị................................................................................. 251. Chỉnh sửa cấu hình web.......................................................................................252. Tùy chỉnh danh mục sản phẩm, sản phẩm.......................................................283. Tùy chỉnh các modul cho website.......................................................................324. Tùy chỉnh danh mục tin tức, tin tức....................................................................335. Tùy chỉnh liên kết – silde – banner.....................................................................34

CHƯƠNG III: ĐƯA WEBSITE LÊN HOSTING VÀ TÍCH HỢP CÁC CHỨC NĂNG KHÁCCHO WEBSITE PHÁT TRIỂN..........................................................................................................36

I. Đưa Website Lên Hosting................................................................................................... 361. Đăng ký hosting..................................................................................................... 362. Backup (Export) database của Website trên máy Local................................ 393. Tạo database mới và upload (Restore) database trên hosting đã đăng ký416. Tiến hành upload soucre web............................................................................. 447. Cấu hình file config................................................................................................45

CHƯƠNG IV: TỐI ƯU HÓA SEO, TẠO 1 SỐ PLUGINS XÃ HỘI CỦA FACEBOOK CHOWEBSITE VÀ TÍCH HỢP CỔNG THANH TOÁN TRỰC TUYẾN BẢO KIM............................ 47

I. Tạo Like Box Cho Website Trên Fanpage....................................................................... 471. Tạo fanpage cho website.....................................................................................472. Tạo like box cho website......................................................................................493. Đưa code like box vào website (product)..........................................................50

II. Tối Ưu Hóa SEO...................................................................................................................51

Page 6: Thiet ke web_ban_hang

1. Dùng SEO URL’s...................................................................................................512. Tối ưu hóa seo tên sản phẩm và danh mục.....................................................523. Tối ưu hóa databas............................................................................................... 52

III. Tích Hợp Cổng Thanh Toán Trực Tuyến Bảo Kim.........................................................531. Tạo website cần tích hợp.....................................................................................532. Xác minh website...................................................................................................533. Tích hợp website................................................................................................... 54

CHƯƠNG V. GIỚI THIỆU VỀ WEBSITE BÁN HÀNG DÂN DỤNG..........................................56I. Nội Dung Website.................................................................................................................56

1. Giao diện trang chủ...............................................................................................562. Giao diện trang giới thiệu.....................................................................................573. Giao diện trang tuyển dụng..................................................................................574. Giao diện sản phẩm điện tử................................................................................ 585. Giao diện chi tiết sản phẩm................................................................................. 596. Giao diện trang đăng nhập tài khoản.................................................................597. Giao diện đăng ký..................................................................................................60

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN...........................................................................................61TÀI LIỆU THAM KHẢO..................................................................................................................... 62

Page 7: Thiet ke web_ban_hang

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

Giáo viên hướng dẫn: Đỗ Võ Thắng

Sinh viên thực tập: Lâm Hoài Nhân

Đề tài: Thiết kết website bán hàng dân dụng

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

.....................................................................................................................................................

Tp.HCM, ngày …. tháng …. năm 2014

Giáo viên hướng dẫn

ĐỖ VÕ THẮNG

Điểm

Page 8: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 1.

CHƯƠNG I: NỘI DUNG THỰC TẬP TẠI NƠI THỰC TẬP

LỊCH LÀM VIỆC TẠI NƠI THỰC TẬP

Khi thực tập tại công ty Ban giám đốc của TRUNG TÂM ĐÀO TẠO QUẢN TRỊMẠNG & AN NINH MẠNG QUỐC TẾ ATHENA đã đưa ra lịch thực tập cho sinhviên như sau:

Tuần Từ ngày - Đến ngày Nội Dung Ghi Chú1 6/3 Tham quan tất cả các

phòng làm việc của trungtâm

2 11/3 Gặp giáo viên hướngdẫn thực tập và nhậntài liệu

3 18/3 Làm theo giáo viênhướng dẫn và trongtài liệu

4 25/3 Cài đăt và chỉnh sửaModun. Thêm sảnphẩm vào website

5 1/4 Đưa sản phẩm lênWeb, chỉnh sửa bốcục của Web theo ýmình

Hai tuần đầu tham quan tất cả các phòng làm việc trung tâm.

Làm quen với máy tính của trung tâm

Xây dựng hệ thống quản lý.

1. GIỚI THIỆU VỀ TỔ CHỨC CỦA NƠI THỰC TẬP

Giới thiệu chung về trung tâm

Trung Tâm Đào Tạo Quản Trị Mạng & An Ninh Mạng Quốc

Tế ATHENA được thành lập từ năm 2004, là một tổ chức qui tụ nhiều trí thức trẻ

Việt Nam đầy năng động, nhiệt huyết và kinh nghiệm trong lãnh vực CNTT, với

tâm huyết góp phần vào công cuộc thúc đẩy tiến trình đưa công nghệ thông tin là

ngành kinh tế mũi nhọn, góp phần phát triển nước nhà.

Page 9: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 2.

Lĩnh vực hoạt động chính:Trung tâm ATHENA đã và đang tập trung chủ yếu vào đào tạo chuyên

sâu quản trị mạng, an ninh mạng, thương mại điện tử theo các tiêu chuẩn quốc tế

của các hãng nổi tiếng như Microsoft, Cisco, Oracle, Linux LPI , CEH,... Song song

đó, trung tâm ATHENA còn có những chương trình đào tạo cao cấp dành

riêng theo đơn đặt hàng của các đơn vị như Bộ Quốc Phòng, Bộ Công An , ngân

hàng, doanh nghiệp, các cơ quan chính phủ, tổ chức tài chính..

+ Sau gần 10 năm hoạt động,nhiều học viên tốt nghiệp trung tâm ATHENA đã là

chuyên gia đảm nhận công tác quản lý hệ thống mạng, an ninh mạng cho nhiều bộ

ngành như Cục Công Nghệ Thông Tin - Bộ Quốc Phòng , Bộ Công An, Sở Thông

Tin Truyền Thông các tin, bưu điện các tỉnh...

+ Ngoài chương trình đào tạo, Trung tâm ATHENA còn có nhiều chương trình hợp

tác và trao đổi công nghệ với nhiều đại học lớn như đại học Bách Khoa Thành Phố

Hồ CHính Minh, Học Viện An Ninh Nhân Dân( Thủ Đức), Học Viện Bưu Chính

Viễn Thông, Hiệp hội an toàn thông tin (VNISA), Viện Kỹ Thuật Quân Sự ,......Đội ngũ giảng viên :+ Tất cả các giảng viên trung tâm ATHENA có điều tốt nghiệp từ cáctrường đại học hàng đầu trong nước .... Tất cả giảng viên ATHENA đềuphải có các chứng chỉ quốc tế như MCSA, MCSE, CCNA, CCNP,Security+, CEH,có bằng sư phạm Quốc tế (Microsoft CertifiedTrainer).Đây là các chứng chỉ chuyên môn bắt buộc để đủ điều kiện thamgia giảng dạy tại trung tâm ATHENA+ Bên cạnh đó, các giảng viên ATHENA thường đi tu nghiệp và cập nhật kiến thức

công nghệ mới từ các nước tiên tiến như Mỹ, Pháp, Hà Lan, Singapore,... và truyền

đạt các công nghệ mới này trong các chương trình đào tạo tại trung tâm ATHENA

Cơ sở vật chất:

+ Thiết bị đầy đủ và hiện đại.

Page 10: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 3.

+Chương trình cập nhật liên tục, đảm bảo học viên tiếp cận với những công nghệ

mới nhất.

+ Phòng máy rộng rãi, thoáng mát.

Dịch vụ hỗ trợ:

+ Đảm bảo việc làm cho học viên tốt nghiệp khóa dài hạn.

+ Giới thiệu việc làm cho mọi học viên.

+ Thực tập có lương cho học viên khá giỏi.

+ Ngoài giờ chính thức, học viên được thực hành miễn phí, không giới hạn thời

gian.

+ Hỗ trợ kỹ thuật không thời hạn trong tất cả các lĩnh vực liên quan đến máy tính,

mạng máy tính, bảo mật mạng.

+ Hỗ trợ thi Chứng chỉ Quốc tế.

Page 11: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 4.

Trung Tâm ATHENA - 2 Bis Đinh Tiên Hoàng , ĐaKao, Q1 , Tp HCM

Page 12: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 5.

Trung tâm ATHENA - 92 Nguyễn Đình Chiểu ,DaKao, Q1 , Tp HCM

Khóa học quản trị hệ thống mạng Cisco cho ngân hàng MHB Bank

Page 13: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 6.

Page 14: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 7.

Phát chứng chỉ cho các học viên hoàn thành khóa học

Page 15: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 8.

TRUNG TÂM ĐÀO TẠO QUẢN TRỊ MẠNG & AN NINH MẠNG

QUỐC TẾ ATHENA

Cơ sở 1: 92 Nguyễn Đình Chiểu, phường Đa Kao, Q1. Điện thoại: (08)38244041 -

090 78 79 477-094 323 00 99(Gần ngã tư Đinh Tiên Hoàng - Nguyễn Đình Chiểu)

Cơ sở 2: 2 Bis Đinh Tiên Hoàng, phường Đa Kao, Q1. Điện thoại: (08)22103801 -

094 320 00 88(Cạnh sân vận động Hoa Lư - Cách đài truyền hình Tp HTV 50 mét)

Website: http://athena.edu.vn - http://athena.com.vn

E-mail : [email protected] - [email protected]

Page 16: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 9.

CHƯƠNG II: PHÂN TÍCH YÊU CẦU XÂY DỰNG WEBSITE

I. Phân Tích Yêu Cầu

1. Bài toán đưa raCửa hàng điện máy Trung Thành chuyên cung cấp thiết bị dân dụng: Điện thoại,

máy tính, điện tử các loại, tivi các loại, thiết bị nhà bếp các loại, gia dụng các loại.Hiện nay cửa hàng có nhu cầu xây dựng Website giới thiệu các mặt hàng. Trongmỗi loại gồm có:

- Máy tính các loại.- Tivi các loại.- Điện thoại các loại.Yêu cầu mỗi loại phải có ảnh đại diện và mô tả cụ thể. Hệ thống phải cho phép

khách hàng đặt hàng và gửi đơn đặt hàng cho người quản lý. Trên web có các tiệních như: sản phẩm tiêu biểu, sản phẩm mới nhất, thống kê lượt truy cập… Để xâydựng được Website này em sử dụng hệ mã nguồn mở Opencart, hiện đang là một hệmã nguồn rất phổ biến và được hỗ trợ rất nhiều trên các cộng đồng mạng.a. Yêu cầu khách hàng

Là những người có nhu cầu cần xem và tìm hiểu các loại mặt hàng. Họ sẽ tìmkiếm các thông tin cần thiết từ hệ thống và đặt mua các mặt hàng này. Vì thế trangweb phải thỏa mãn các chức năng sau sở hữu tổng thể. Những gì nhiều hơn, cải tiếnmới cho phép các ứng dụng chạy nhanh hơn.

- Hiển thị các mặt hàng để khách hàng có thể lựa chọn và xem các mặt hàngcần lựa chọn.

- Cung cấp chức năng tìm kiếm các mặt hàng. Với nhu cầu của người sửdụng khi truy cập vào trang web là tìm kiếm các mặt hàng mà họ cần và muốnxem. Đôi lúc cũng có nhiều khách hàng vào website này mà không có ý định xemhay không biết xem gì thì yêu cầu đặt ra cho hệ thống là làm thế nào để kháchhàng có thể tìm kiếm nhanh và hiệu quả các mặt hàng mà họ cần tìm.

- Sau khi khách hàng lựa chọn xong những mặt hàng cần đặt mua thì hệ thốngphải có chức năng hiển thị đơn đặt hàng để khách hàng nhập vào những thông tincần thiết, tránh những đòi hỏi hay những thông tin yêu cầu quá nhiều từ phía kháchhàng, tạo cảm giác thoải mái, riêng tư cho khách hàng.- Ngoài ra, còn có một số chức năng như đăng kí, đăng nhập. Khách hàng có

thể thay đổi mật khẩu của mình. Khi bạn quan tâm đến thông tin về website như: tintức hay giá cả, bạn có thể nhập địa chỉ email vào, bạn có thể nhận được các thôngtin cập nhật từ website.

Page 17: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 10.

b. Phía cửa hàng- Thông tin luôn cần đến hệ thống menu rõ ràng và nghiêm túc. Hệ thống

menu này sẽ là nơi người dùng chú ý đầu tiên vì ở đó chứa hầu hết các đề mục quantrọng mà họ đang tìm hiểu.

- Là người làm chủ ứng dụng, có quyền kiểm soát mọi hoạt động của hệthống. Người này được cấp một username và password để đăng nhập vào hệ thốngthực hiện những chức năng của mình.

- Có thể quản lý được các chức năng (thêm, xóa, sửa) của các mặt hàngtrong web.

2. Sơ đồ user goal

Sơ đồ 2.1: Mô hình user goal

Page 18: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 11.

3. Sơ đồ class diagram

Sơ đồ 2.2: Sơ đồ class diagram- Mỗi khách hàn sẽ quản lý nhiều đơn hàng, nhiều phản hồi từ website bán hàng

và có 1 tài khoản duy nhất- Một lần giao hàng có thể có nhiều hóa đơn hoặc chỉ có 1 hóa đơn- Loại sản phẩm sẽ có nhiều sản phẩm và 1 sản phẩm chỉ thuộc về 1 loại sản phẩm- Một nhà cung cấp sẽ cung cấp nhiều loại sản phẩm- Đơ hàng và sản phẩm sẽ lằm trong rất hiều chi tiêt đơn hàng

4. Sơ đồ trang web

Page 19: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 12.

Sơ đồ 2.1: Sơ đồ trang web

5. Một số bảng cơ sở dữ liệu tiêu biểua. Bảng user

Hình 2.1: Bảng csdl user

b. Sản phẩm

Hình 2.2: Bảng sản phẩm

Page 20: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 13.

c. Nhà sản xuất

Hình 2.3: Bảng nhà sản xuấtd. Thông tin tuyển dụng

Hình 2.4: Bảng thông tin tuyển dụnge. Csdl danh mục tin tức

Hinh 2.5: Danh mục tin tứcf. Danh mục sản phẩm

Hình 2.6: Danh mục sản phẩmg. Nhóm uer

Page 21: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 14.

Hình 2.7: Nhóm user

II. Tìm Hiểu Về Mã Nguồn Mở1. Khái niệm

Mã nguồn mở là thuật ngữ chỉ các sản phẩm, phần mềm công khai mã nguồn mở(source code). Người dùng không phải trả một khoản chi phí nào, hơn thế nữa họ cóquyền xem, sửa đổi, cải tiến, nâng cấp theo một con số nguyên tắc chung quy địnhtrong giấy phép phần mềm nguồn mở General Public Licence – GPL. Ông tổ củamã nguồn mở là Richard Stallman, người xây dựng dự án GNU, và cho ra giấyphép mã nguồn mở GPL, hai nền tảng then chốt cho sự phát triển của mã nguồn mở.

2. Giới thiệu về một số mã nguồn mởa. Joomla

Joomla là một hệ quản trị nội dung mã nguồn mở (Tiếng anh: Open sourcecontent Mangment Stystems). Joomla được viết bằng ngôn ngữ PHP và kết nối cơsở dữ liệu MySQL, cho phép người sử dụng có thể dễ dàng xuất bản các nội dungcủa họ lên Internet.b. WordPress

WordPress là một CMS, một mã nguồn mở và hoàn toàn miễn phí để làm blog,trang web cá nhân hoặc bất cứ gì mà bạn thích. WordPress được viết bằng ngôn ngữlập trình PHP và sử dụng MySQL database. WordPess là “con” của B2/Cafelog,được xây dựng trên sự tiện dụng, cùng các mặc định chuẩn web.h. OpenCart

Ngoài tính năng free thì Opencart được biết đến với các tính năng vốn có của nócủa 1 Opensource là có thể sửa đổi, dễ dàng hiệu chỉnh, dễ cải tiến theo hướng pháttriển của bản thân người sử dụng. Trong lĩnh vực thiết kế site bán hàng, Opencartquản lý hệ thống CMS lớn với phần mua hàng, điểm thưởng. Điều mà người viếttâm đắc nhất ở Opensource là chế độ tự buid theme, tạo khả năng sáng tạo chongười dùng, cùng với chế độ quản lý điểm cộng, điểm thưởng, quản lý gian hàngcực kì rõ ràng và hiệu quả, tính dễ sử dụng cũng là một điều người viết cũng cânnhắc.

Các Opensource mỗi loại đều có điểm mạnh riêng, không có loại nào hơn loạinào, nhưng từ khi người viết sử dụng Opencart thì ngạc nhiên với tính năng mà nóđem lại:

- Hệ thống tính điểm Coupon- Thẻ quà tặng

Page 22: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 15.

- Xếp hạng các hạng mục sản phẩm- SEO- Tiền tệ

III. Tìm Hiểu Về OpenCart

1. Kiến trúc của Opencart- Opencart là một giải pháp thương mại điện tử dựa trên kiến trúc MVC

(Model View Controller). MVC có nghĩa là mô hình (Model), xem (View), điềukhiển (Controller).- Các mô hình MVC (Model View Controller) là sự tách biệt của một ứng

dụng giao diện người dùng đồ họa (GUI) từ cốt lõi logic của nó. Không có thiếtkế tuyệt đối cho MVC, nhưng như với bất kỳ mẫu thiết kế nào, nên thích ứng vớitình huống đang phải đối mặt khi phát triển.- MVC là một mẫu kiến trúc phần mềm trong kỹ nghệ phần mềm. Khi sử đúng

cách, mẫu MVC giúp cho nhà phát triển phần mềm tách biệt các pha pháttriển phần mềm riêng rẽ với các nguyên tắc nghiệp vụ và giao diện ngườidùng. Phần mềm phát triển theo mẫu MVC tạo nhiều thuận lợi cho việc bảotrì vì các nguyên tắc nghề nghiệp và giao diện ít liên quan với nhau.

Hình 2.7 : Kiến trúc mô hình MVC- Khi người dùng cần tương tác hoặc thay đổi trạng thái của đối tượng đồ họa

thì sẽ tương tác thông qua Controller của đối tượng đồ họa. Controller sẽ thựchiện việc thay đổi trên Model. Khi có thay đổi ở Model, sẽ có một thông điệp đượcphát thông báo cho View và Controller biết. Nhận được thông điệp từ Model, Viewsẽ cập nhật lại thể hiện của mình, đảm bảo luôn thể hiện trực quan chính xác của

Page 23: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 16.

Model. Còn Controller khi nhận được thông điệp tử Model, sẽ có những tương tácphản hồi lại người sử dụng.

Hình 2.8: Mô hình Tuần tự của MVC

a. Ưu điểmƯu điểm mạnh nhất của MVC là nó giúp cho ứng dụng dễ bảo trì, module

hóa các chức năng, và được xây dựng nhanh chóng. MVC tách các tác vụ củaứng dụng thành các phần riêng rẽ Model, View, Controller giúp cho việc xâydựng ứng dụng nhanh hơn. Dễ thêm các tính năng mới, dễ thay đổi các tínhnăng cũ. Có được ưu điểm đó vì MVC tách biệt sự phụ thuộc giữa các thànhphần trong một đối tượng đồ họa, làm tăng tình linh động. Lúc đó có thể dễdang thay đổi giao diện bằng cách thay đổi thành phần View trong khicách thức lưu trữ (Model) cũng như xử lý (Controller) không hề thay đổi.Tương tự có thể thay đổi Model và Controller mà những thành phần còn lạivẫn giữ nguyên.b. Nhược điểm

Đối với dự án nhỏ thì việc áp dụng mô hình MVC gây cồng kềnh, tốn thời giantrong quá trình phát triển, tốn thời gian chuyển dữ liệu giữa các tầng.c. So sánh MVC và Three Layer

Một mô hình không thể không nhắc đến khi nhắc đến MVC đó là mô hình ThreeLayer. Khá phổ biến và có nhiều điểm tương đồng với MVC.

Page 24: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 17.

Hình 2.9: Mô hình Three Layer- Presentation Layer: Lớp này làm nhiệm vụ giao tiếp với người dùng để thu

thập dữ liệu và hiển thị kết quả.- Business Logic Layer: Lớp này xử lý chính các dữ liệu trước khi

chuyển xuống Data Access Layer. Đây là nới kiểm tra các yêu cầu nghiệp vụ, tínhtoán, xử lý các yêu cầu và lựa chọn kết quả trả về cho Presentation Layer.- Data Access Layer: Lớp này thực hiện các nghiệp vụ liên quan đến lưu trữ và

truy xuất dữ liệu của ứng dụng.Có những điểm tương đồng với MVC như đều có 3 lớp nhưng vẫn có những

điểm khác nhau cơ bản giữa hai mô hình này.Sự khác biệt rõ nhất là cách xử lý yêu cầu của Three Layer khác so với MVC:- Ở Three Layer yêu cầu được nhận từ Presentation Layer rồi chuyển qua

Business Logic Layer để xử lý và được lưu trữ ở Data Access Layer.- Còn MVC khi yêu cầu được gửi từ Controller, Controller sẽ thực hiện việc

thay đổi trên Model. Lúc đó Model sẽ có thông điệp đồng thời cho View vàController biết.

Page 25: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 18.

- Ở MVC thành phần Model giữ chức năng giống như của cả lớp Business vàData Access của Three Layer.- Three Layer được sử dụng trong lập trình ứng dụng, còn MVC được sử dụng

nhiều trong lập trình Website.

Hình 2.10: So sánh MVC với Three Layer

2. Opencart là một hệ thống giỏ hàngNhư đã nói trên, Opencart đầu tư khá công phu cho việc sử dụng, quản lý các

gian hàng, và khách hàng. Nó chứa các modul sử dụng các mục đích khác nhau,như giới thiệu sản phẩm, sản phẩm được đưa ra trưng bày…a. Ưu điểm và nhược điểm của opencart

- Ưu điểm: Cài đặt đơn giản và nhanh chóng. Dễ dàng cấu hình và tùy chỉnh theo ý thích Coder dễ dàng nắm bắt và phát triển Template nhẹ nhàng, hỗ trợ nhiều Jquery Thân thiện với người sử dụng Hỗ trợ tốt về đa ngôn ngữ Format code rõ ràng theo chuẩn MVC Cộng đồng phát triển mạnh Hỗ trợ mutilstore

Page 26: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 19.

- Nhược điểm Không hỗ trợ hooks, khi thêm một modules mới cần phải tác động

đến phân code mặc định.

IV. Công Cụ Lập Trình

1. DreamWeaverDreamweaver là một trương trình biên tập HTML chuyên nghiệp, nhằm phục vụ

cho việc thiết kế, lập trình, phát triển các website, các trang web và các ứng dụngweb cho dù là người thích viết mã bằng tay hay là thực hiện công việc làm webbằng công cụ trực quan, thì Dreamweaver cũng cung cấp cho bạn công cụ hữu íchđể cải tiến kinh nghiệm thiết kế web.

Các tính năng của các công cụ thiết kế trực quan trong Dreamweaver giúp ngườilập trình tạo ra một trang web mà không cần phải viết bất kỳ một dòng mã nào. Cóthể quan sát tất cả các thành phần site hay tài nguyên web và kéo chúng vào tài liệumột cách dễ dàng từ một panel. Ngoài ra, chúng ta còn có thể phát triển websitebằng cách tạo ra và chỉnh sửa các tấm ảnh trong các ứng dụng đồ họa khác,Dreamweaver còn cung cấp các công cụ giúp người ta có thể dễ dàng thêm các tàinguyên Flash vào trong các web.

Ngoài các chức năng kéo và thả giúp chúng ta xây dựng các trang web,Dreamweaver còn cung cấp một môi trường viết mã chuyên nghiệp bao gồm cáccông cụ biên tập mã (chẳng hạn như: màu cú pháp, tự động đóng tab, và thu mãthành một dòng), các bản tham khảo CSS, javacript, ColdFusion,… Công nghệRoundTrip HTML sẽ chèn vào những tài liệu viết tay mà không hề định dạng lại mã,sau đó có thể chỉnh lại mã theo cách viết tùy thích.

Dreamweaver còn giúp chúng ta xây dựng các ứng dụng web dựa trên cơ sở dữliệu, và các trang web động chẳng hạn như CFML (Confusion), ASP.NET, ASP,JSP, và PHP. Nếu như có sở thích dùng cơ sở dữ liệu SML, thì Dreamweaver sẽđưa cho người lập các công cụ mà giúp chúng ta dẽ dàng tạo ra các trang XSLT, cáctập tin XML, và thể hiện được dữ liệu XML trên trang web.

Trong thực tế với Dreamweaver, chúng ta có thể tạo ra các đối tượng và các lệnhcho riêng bản thân mình, chúng ta còn có thể chỉnh sửa các phím tắt ứng dụng, haythậm chí viết thêm mã javascript vào phần Extend Dreamweaver tạo ra cácbehavior mới, các thanh thuộc tính mới, và các báo cáo site.

2. Công cụ đồ họaAdobe Photoshop là phần mềm xử lý hình ảnh (image-proceesing software)

chuyên nghiệp, Photoshop cho phép người sử dụng sửa ảnh (retouching), ghép ảnh

Page 27: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 20.

(composing), phục chế ảnh (retoration), tô màu ảnh (painting) một cách dễ dàng vàhiệu quả. Phần mềm này là một công cụ không thể thiếu của các nhiếp ảnh gia, cácnhà thiết kế đồ họa, thiết kế web và biên tập video.

Ngoài ra Adobe Photoshop còn phối hợp rất tốt với các phần mềm của Adobenhư:- Phần mềm vẽ trang trí và minh họa (illustration software) Adobe Illustrator.- Phần mềm sắp chữ và trình bày (typesetting and layout software) Adobe

InDesign.- Phần mềm tạo hình ảnh động (Animation software) Adobe Flash.- Phần mềm thiết kế trang web (Web design software) Adobe Dreamweaver

3. XAMPP- Xampp là một ứng dụng để chạy Webserver trên máy tính mà không cần

phải mua hosting và domain- Mọi người thường sử dụng để thực hành và phát triển web phục vụ cho việc

học tập và giải trí.- Xampp là viết tắt của X + Apache + Mysql + PHP + Perl- Chữ X là cross (platfrom) ám chỉ dùng được cho cả 4 hệ điều hành khác

nhau: Windows, Linux, Solaris và MAC.

4. FileZilla Client- FileZilla Client là chương trình hỗ trợ truyền tải tập tin thông qua mạng

Internet sử dụng giao thức FTP (File Transfer Protocol). FileZilla Client là chươngtrình miễn phí, có giao diện thân thiện, dễ sử dụng và tốc độ nhanh nên được nhiềungười sử dụng. Đây là giải pháp dùng tải dữ liệu giữa máy tính cá nhân và các máychủ web.- Sử dụng FileZilla Client để quản lý dữ liệu cũng giống như quản lý tập tin

bằng trương trình Explorer của Windows hoặc các chương trình quản lý tập tinthông dụng khác.

5. Cài đặt Xampp Control Panel v3.2.1Đầu tiên ta cần cài đặt Xampp để thiết lập môi trườngCác bước cài đặt Xampp- Bước 1: Tải Xampp Control Panel v3.2.1 về máy.- Bước 2: Trước tiên bạn cần phải tắt bức tường lửa hay chương trình diệt

virut. Mở file cài đặt để tiến hành cái đặt. Chọn next để tiếp tục.- Bước 4: Chọn next để tiếp tục cài đặt.

Page 28: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 21.

- Bước 5: Chọn đường dẫn để cài đặt, đường dẫn mặc định là C:\xampp. Chọnnext để tiếp tục cài đặt.- Bước 6: Chọn next để tiếp tục cài đặt- Bước 7: Chọn next để tiếp tục cài đặt- Bước 8: Nhấn Finish để kết thúc. Mở bảng điều khiển XAMPP. Ở đó, chúng

ta sẽ thấy điều khiển riêng biệt cho Apache, MySQL, FileZilla, và Mercury. Nhấpvào Startbutton để bắt đầu tính năng tương ứng. Có một thông báo trạng thái củatrạng thái hiện tại của các tính năng được lựa chọn. (Lưu ý: Apache và MySql phảiluôn ở trạng thái ‘running’ thì trang web mới chạy được).

Hình 2.7: Quá trình cài đặt Xampp đã thành công

6. Cài đặt Opencarta. Tiến hành tải phần mềm mã nguồn mở Opencart:- Truy cập địa chỉ để download Opencart:

http://www.Opencart.com/index.php?ro...nload/download- Sau khi tải xong tiến hành giải nén tập tin: nhấp chuột phải vào tập tin- Chọn Extract Here.- Copy thư mục “ Upload ” vừa giải nén ra và paste vào “C:\xampp\htdocs”

b. Tiến hành cài đặt opencart- Chạy đường dẫn “ http://localhost/phpmyadmin ” tiến hành tạo một database

như hình sau: điền tên database vào ô Create new database rồi ấn Create

Page 29: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 22.

Hình 2.8: Tạo database- Bắt đầu các thao tác để đưa web lên localhost- Chạy đường dẫn http://localhost/ tên soucre web vừa coppy vô file htdocs

trong xampp /index.php. Màn hình hiện lên như hình dưới đây.- Bước 1: Chọn ngôn ngữ

Hình: 2.9: Chọn ngôn ngữ cho web- Bước 2: Chọn “ Tôi đồng ý cấp giấy phép ” -> “ Tiếp tục ”

Page 30: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 23.

Hình 2.10: Đồng ý với điều kiện của nhà cung cấp

- Bước 3: Chuẩn bị cài đặt

Hình 2.11: Kiểm tra thủ tục- Bước 4: Tùy chỉnh các thông số sau:

Databasehost: localhost (để nguyên)User: root

Page 31: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 24.

Password: (để trống)Database name: dandung (điền tên database vừa tạo lúc nãy)Database prefix: (để trống)Username: admin (tên truy cập vào trang quản trị)Password: 12345 (pass để đăng nhập trang quản trị)E-mail: [email protected] (điền tên Email)

Hình 2.12: Nhập thông tin- Bước 5. Vào “C:\xampp\htdocs\tên web của mình” xóa thư mục “Install”

hoặc có thể đổi tên file thành tên khác. Chọn “Goto your Online Shop” để vào shopvà chọn “Login to your Administration” để vào trang quản trị.

Hình 2.13: Cài đặt thành công- Bước 6: Đăng nhập vào trang quản trị. Với tài khoản và mật khẩu cài đặt ở

bước trên.

Page 32: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 25.

Hình 2.14: Đăng nhập trang quản tri

V. Chỉnh Sửa Website Tại Trang Quản TrịTruy cập trang quản trị qua đường dẫn: “localhost/tên web/admin”Điền thông tin username/password

Hình 2.15: Bảng quản trị: Hiển thị tổng quan về cửa hàng

1. Chỉnh sửa cấu hình web Bấm vào Menu “Hệ thống” ”Cấu hình”. Bấm vào nút “sửa”

Page 33: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 26.

- Tên cửa hàng, chủ cửa hàng, địa chỉ, email, điện thoại. Chỉnh sửa tùy ý chủwebsite.

Hình 2.16: Thay đổi thông tin tổng quan Chọn “Khu vực” hiển thị trang quản trị khu vực để cài đặt cho website

Hình 2.17: Thay đổi thông tin khu vực: Quốc gia, tỉnh/ thành phố…

Chọn “Thư” hiển thị trang quản trị thư để cài đặt cho phần thư của website- Chỉnh sửa: giao thức gửi thư, tham số thư, máy chủ SMTP, tài koản SMTP,

tài khoản SMTP…

Page 34: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 27.

Hình 2.18: Thay đổi thông tin mục thư

Chọn “Hình” hiển thị trang quản trị hình của cấu hình hệ thống cho website- Chúng ta có thể chỉnh sửa hình ảnh logo và icon của website bên cạnh đó

chúng ta có thể hiệu chỉnh kích thước của các hình ảnh.

Hình 2.19: Chỉnh sửa thông tin thẻ hình

Page 35: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 28.

2. Tùy chỉnh danh mục sản phẩm, sản phẩm Bấm vào menu ”Sản phẩm” “Danh mục”- Thêm hoặc xóa các danh mục hiển thị tại menu trong phần danh mục. Nhấp

xóa sửa hoặc thêm để hiệu chỉnh.

Hình 2.20: Danh mục sản phẩm Chọn “thêm” để thêm mới một danh mục sản phẩm hiển thị nhập dữ liệu

tổng quan của danh mục trên trang quản trị- Mục tổng quan: Tên danh mục ” tên menu của website”, mô tả từ khóa, từ

khóa” Tùy ý” và mô tả “tùy ý”

Hình 2.21: Thêm danh mục mới

Page 36: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 29.

Chọn “Dữ liệu” hiển thị phần dữ liệu để chỉnh sửa dữ liệu của phần danhmục trên trang quản trị- Chuyên mục: Để là không nếu muốn là danh mục cha và chọn tích vô danh

mục khác nếu muốn nó là danh mục con của danh mục đó. Cửa hàng: Mặc định. Từkhóa SEO: Tùy chọn (Từ khóa SEO đơn giản sẽ giúp website được tìm kiếm dễdàng hơn). Hình: Có hoặc không. Lên trên: Tích hoặc không tích, nếu tích danhmục sẽ được hiện trên thanh menu. Sắp xếp: Vị trí hiển thị của danh mục trên menucủa website.- Nhấp lưu để hoàn thành

Hình 2.22: Phần dữ liệu Bấm vào menu chọn “Sản phẩm” “Sản phẩm” hiển thị mục sản phẩm trên

trang quản trị

Hình 2.23: Quản trị sản phẩm

Page 37: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 30.

Bấm “Thêm” để thêm mới sản phẩm hiển thị phần tổng quan sản phẩm trêntrang quản trị.- Tên sản phẩm: Tên sản phẩm muốn thêm mới- Mô tả từ khóa, mô tả: Tùy chọn- Mô tả: Dùng mô tả thông tin sản phẩm

Hình 2.24: Tổng quan thêm một sản phẩm mới Chọn “Dữ liệu” hiển thị phần dữ liệu để chỉnh sửa dữ liệu của sản phẩm mới

trên trang quản trị

Hình 2.25: Dữ liệu thêm mới một sản phẩm

Page 38: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 31.

- Mã hàng: Mỗi sản phẩm có một mã hàng duy nhất, và không bị trùng lặp- SKU: Tương tự mã hàng- UPC: Tương tự mã hàng- Bảo hành: Tùy chọn- Đơn giá: Giá của sản phẩm- Thuế xuất: Không hoặc giá trị %- Số lượng: Số lượng sản phẩm còn trong cửa hàng- Số lượng tối thiểu: Số lượng có thể mua- Phần trừ đi: Có hoặc không- Hết hàng: Thông báo hết hàng, còn hàng, đợi 2, 3 ngày, đặt hàng trước- Vận chuyển: Có hoặc không- Từ khóa SEO: Giúp sản phẩm được người dùng dễ dàng tìm thấy nếu được

tối ưu hóa.- Hình: Hiển thị hình ảnh sản phẩm tại website

Chọn “Liên kết” hiển thị phần liên kết của sản phẩm- Nhà sản xuất: Hiển thị nhà sản xuất của sản phẩm khi xem chi tiết sản phẩm.- Danh mục: Sản phẩm sẽ hiện lên phần danh mục được chọn.- Cửa hàng: Mặc định.- Sản phẩm cùng loại: Hiển thị sản phẩm được chọn theo sản phẩm đang thiết

lập khi nhấp vô chi tiết.

Hình 2.26: Liên kết sản phẩm Một số thẻ khác tại thêm mới sản phẩm:- Liên kết: Chọn danh mục mà muốn hiển thị sản phẩm tại đó

Page 39: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 32.

- Thuộc tính: Thuộc tính của sản phẩm- Giảm giá: Thêm giảm giá cho sản phẩm- Điểm thưởng: Thêm điểm thưởng cộng thêm cho khách hàng khi họ mua sản

phẩm đó tại website

3. Tùy chỉnh các modul cho website Vào menu chọn “Phần mở rộng” “Modul”- Bằng cách nhấp vào gỡ bỏ để gỡ bỏ modul không muốn có, nhấp sửa để sửa

thông tin theo ý mình hoặc nhập cài đặt để cài đặt thêm modul vô website.

Hình 2.27: Chỉnh sửa modul Chọn “VQMod Menager” hiển thị trang quản trị VQMod- VQMod Menager giúp chúng ta upload các chức năng Zoom hình ảnh cho

các sản phẩm ở các modul cũng như hình ảnh chi tiết sản phẩm.

Page 40: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 33.

Hình 2.28: Quản trị VQMod

4. Tùy chỉnh danh mục tin tức, tin tức Chọn “Nội dung” “Danh mục” hiển thị danh mục tin tức

Hình 2.29: Chỉnh sửa nội dung tin tứcChúng ta có thể hiệu chỉnh các danh mục tin tức hiển thị tại trang web bằngcách nhấp sửa và chọn nơi hiển thị.

Tại menu trang quản trị chọn “Nội dung” “Tin tức” hiển thị các tin tức- Để hiệu chỉnh tin tức bằng cách nhấn vô sửa hoặc thêm mới bằng cách nhấn

vô thêm và chọn danh mục tin tức cần hiển thị.

Page 41: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 34.

Hình 2.30: Nội dung tin tức

5. Tùy chỉnh liên kết – silde – banner Chọn “Công cụ” tại menu trang quản trị “Liên kết – Silde – Banner” hiển thị

các mục hiệu chỉnh silde cùng các banner quảng cáo được cài đặt tại modul- Tại đây có thể chỉnh sửa hay xóa banner quảng cáo, slide banner cho webdite

bằng cách nhấp vô “sửa”, “xóa” hoặc thêm mới bằng cách nhấp vô “thêm”

Hình 2.31: Chỉnh sửa liên kết – slide – banner

Chọn “Silde trang chủ” hiển thị liên kết trang tại bảng quản trị- Liên kết: Liên kết về website nào đó khi nhấp vô banner

Page 42: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 35.

- Hình ảnh: Tải hình chọn hình phù hợp cho banner của website bằng cáchnhấp chọn hình

- Lưu ý kích thước hình ảnh phải phù hợp với kích thước cài đặt của bannercủa website, có thể xóa bớt link. Bấm lưu để hoàn tất.

Hình 2.32: Hiệu chỉnh slide banner trang chủ Chọn “Banner quảng cáo 1” hiển thị quản trị quảng cáo

Hình 2.33: Hiệu trỉnh quảng cáo cho website

Page 43: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 36.

CHƯƠNG III: ĐƯA WEBSITE LÊN HOSTING VÀ TÍCH HỢP CÁCCHỨC NĂNG KHÁC CHO WEBSITE PHÁT TRIỂN

I. Đưa Website Lên Hosting

1. Đăng ký hosting- Đăng ký hosting tại trang web hostinger.vn (Sử dụng hosting miễn phí)

Nhập thông tin để đăng ký và xác nhận tài khoản

Hình 3.1: Đăng ký tài khoản- Lưu ý: Dùng E-mail của mình để xác nhận đăng ký và nhận thông tin về

hosting đã đăng ký Nhấp chọn hosting mới

Page 44: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 37.

Hình 3.2: Đăng nhập vô hostinger.vnNhấp tạo hosting mới tại tài khoản hosting

Hình 3.3: Danh sách tài khoản hostingChọn gói hosting muốn đăng ký (chọn free)- Tùy theo các gói hosting sẽ có các giới hạn khác nhau. Gói hosting giá càng

cao thì các tiện ích cũng như chất lượng càng cao.- Với hosting free có

Dung lượng 2000 MB Băng thông 100 GB Tạo tối đa 2 Database MySQL cho 1 hosting 2 tài khoản E-mails

Page 45: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 38.

Website Builder Script Autoinstaller – tự động cài đặt

Hình 3.4: Các gói hosting của nhà cung cấp Bắt đầu đăng kí bằng cách nhập tên miền và mật khẩu- Chọn tên miền có 2 dạng domain và subdomain. Với domain có dạng như

domain.com còn subdomain có dạng abc.esy.es (abc tên tùy ý – không được

trùng với của người khác nếu trùng thì phải đăng kí với “abc – tên web” bằng

một tên khác. Phần sau .esy.es có thể thay đổi thành kiểu khác bằng cách

nhấp chỏ xuống)

- Mật khẩu tùy ý

Hình 3.5: Bảng nhập tên miền mật khẩu

Page 46: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 39.

Xác thực đơn hàng bằng cách nhập captcha và đồng ý điều kiện

Hình 3.6: Xác thực đơn hàng Đăng kí thành công

Hình 3.7: Đăng kí thành công

2. Backup (Export) database của Website trên máy Local Đến đường dẫn Localhost/PhpMyAdmin- Chọn database muốn backup (bên cột trái)

Page 47: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 40.

Hình 3.8: Trang PhpMyAdmin Tiến hành Export database- Chọn Export để tiến hành.

Hình 3.9: Các bảng trong database- Check vào hai mục:

Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENTAdd CREATE PROCEDURE / FUNCTION / EVENTCuộn trang và nhấn "Go"

Page 48: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 41.

Hình 3.10: Tiến hành backup Lưu tệp tin về máy – backup thành công

Hình 3.11: Lưu tệp tin

3. Tạo database mới và upload (Restore) database trên hosting đãđăng ký

Đăng nhập hosting vừa đăng ký- Nhấp vô quản lý file để tới quản lý database- Sẽ có yêu cầu đăng nhập tài khoản nhập tài khoản vừa đăng nhập

Page 49: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 42.

Hình 3.12: Cpanel.hostinger- Tìm đến database

Hình 3.13: MySQL Database của hosting Điền các thông tin- Tên MySQL database (u602075551_ chính là tiền tố của database, tiền tố

này là username của hosting)- Mật khẩu nhập độ dài ít nhất 6 ký tự

Page 50: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 43.

Hình 3.14: Quản trị MySQL Database Tiến hành upload database

Hình 3.15: Vào PhpMyAdmin Chọn tệp tin vừa exporter để upload database

Hình 3.16: Upload cơ sở dữ liệu Chọn Improter nhấp “chọn tập tin“ chỏ đường dẫn tới tập tin vừa backup

nhấn Excécuter và chờ đợi

Page 51: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 44.

- Improter thành công

Hình 3.17: Improter thành công

6. Tiến hành upload soucre web Mở FileZilla để upload file

Hình 3.18: Màn hình làm việc của FileZilla- Bước 1: Điền Host là Full FTP Hostname nhà cung cấp gửi qua mail- Bước 2: Điền Username là FTP Username nhà cung cấp gửi qua mail- Bước 3: Điền Password là FTP Password nhà cung cấp gửi qua mail- Bước 4: Quickconnect chạy tới quản lý file của hosting vừa nhập- Bước 5 : Nhấp vô public_html- Bước 6 : Xóa 2 file .htaccess và default.php- Bước 7 : Tìm đến file chứa suocre web nhấn ctrl + A nhấp chuột phải và

chọn upload

Page 52: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 45.

Upload thành công

Hình 3.19 : Upload thành công

7. Cấu hình file config Vô quản lý file cuả host

Hình 3.20: Mở quản lý file

Page 53: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 46.

Tìm đến file config- Tìm file config chọn Edit file

Hình 3.21: Quản lý file- Tiến hành cấu hình file config tại public_html/config và

public_html/admin/confing

Hình 3.22 : Cấu hình file config Đã upload thành công website tại địa chỉ http://sieuthidienmay.esy.es/

Page 54: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 47.

CHƯƠNG IV: TỐI ƯU HÓA SEO, TẠO 1 SỐ PLUGINS XÃ HỘI CỦAFACEBOOK CHO WEBSITE VÀ TÍCH HỢP CỔNG THANH TOÁN

TRỰC TUYẾN BẢO KIM

I. Tạo Like Box Cho Website Trên Fanpage

1. Tạo fanpage cho websitea. Lý do tạo fanpage

Để đáp ứng nhu cầu tạo ra một trang riêng cho doanh nghiệp trong thế giớimạng xã hội. Fanpage có thể được xem là website tóm lược của doanh nghiệp,thông qua fanpage, doanh nghiệp có thể “giao tiếp” với khách hàng của mình mộtcách gần gũi và thân thiện. Hiện nay, hầu hết các doanh nghiệp lớn trên thế giới đềulập hẵn một fanpage cho mình để tiếp cận với khách hàng.b. Tạo fanpage- Vào đường dẫn https://www.facebook.com/pages/create.php- Chọn loại fanpage facebook muốn tạo, và nhập thông tin fanpage- Viết tên công ty

Hình 4.1: Tạo fanpage

Page 55: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 48.

- Thiết lập thông tin cho fanpage qua 4 bước- Bước 4 đồng ý và sẽ phải chả phí để fanpage nhiêu lượt like hơn

Hình 4.2: Thiết lập thông tin- Tạo fanpage thành công- Địa chỉ fanpage đã tạo https://www.facebook.com/Sieuthidienmaytrungthanh

Hình 4.3: Tạo fanpage thành công

Page 56: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 49.

2. Tạo like box cho website- Chuy cập địa chỉ https://developers.facebook.com/docs/plugins/like-button- Chọn kiểu like box- Facebook page URL là địa chỉ url của fanpage- Width chiều rộng của box chứa like như domo phía dưới- Height chiều dài và color scheme là phối màu- Show Frienfs’ Faces là hiện những ai đã thích fanpage- Show header hiện tìm chúng tôi trên facebook như demo- Show posts là hiện các bài được đăng trên fanpage của website lên box demo

hay không- Show border là hiện đường viền bên ngoài box hay không

Hình 4.4: Nhập thông tin box- Chọn get code để coppy code chèn vô website

Page 57: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 50.

Hình 4.5: Code like box

3. Đưa code like box vào website (product)- Truy cập quản lý file trong hosting tìm đến file product theo đường dẫn

catalog\view\theme\default\template\product chọn product.php edit file- Dán code like box vô

Hình 4.6: Dán code vo product.php- Kết quả đạt được

Page 58: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 51.

Hình 4.7: kết quả đạt được

II. Tối Ưu Hóa SEO

1. Dùng SEO URL’s- Vào trang quản trị Admin Hệ thống chọn sửa và chọn máy chủ- Tại máy chủ chọn dùng SEO URL’s là có- Muốn sử dung SEO URL’s thì Apache phải được cài đặt modul mod-rewrite

và đổi tên htaccess.txt thành- Tiến hành cài đặt mod-rewrite bằng cách mở xampp/apache/conf/httpd.conf- Tìm tới dòng LoadModule rewrite_module modules/mod_rewrite.so chuyển

thành #LoadModule rewrite_module modules/mod_rewrite.so

Hình 4.8: Dùng SEO URL’s

Page 59: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 52.

2. Tối ưu hóa seo tên sản phẩm và danh mục- Đăng nhập trang quản trị tìm đến mục sản phẩm nhấn sửa sau đó chọn dữ

liệu tìm đến từ khóa seo, viết từ khóa seo sao cho không bị chùng lặp với cácsản phẩm khác

Hình 4.9: Từ khóa seo sản phẩm- Chọn quản lý danh mục tìm đến mục dữ liệu và tối ưu hóa tên danh mục

bằng cách viết từ khóa seo và đảm bảo từ khóa không bị trùng lặp với từkhóa khác

3. Tối ưu hóa databas

Hình 4.10: Tối ưu hóa databas

Page 60: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 53.

III. Tích Hợp Cổng Thanh Toán Trực Tuyến Bảo Kim

1. Tạo website cần tích hợp- Đăng ký tài khoản thanh toán trực tuyến bảo kim- Vào quản lý tài khoản chon tích hợp quản lý website tích hợp chọn đăng

ký web site mới- Nhậ thông tin website

Hình 4.11: Nhập thông tin website tích hợp

2. Xác minh website- Tải file xác minh về lơi chứa thư mục gốc của website- Chạy đường dẫn sau đó nhấn xác minh

Page 61: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 54.

Hình 4.12: Xác minh website

3. Tích hợp websitea. Tải thư mục tích hợp về quản lý file của website chọn ngôn ngữ php- Đưa thư mục vừa download về đường dẫn

Hình 4.13: Tích hợp websiteb. Tiến hành cấu hình file tích hợp- Mở file- Điền thông tin mã website và mật khẩu như hình dưới

c. Cài đặt modul thanh toán bảo kim- Tại tích hợp chọn thư viện tích hợp chọn modul tích hợp của opencart- Download modul thanh toán- Đưa 2 file admin và catalog vào thư mục public_html- Đăng nhập vào trang quản trị đến phần mở rộng thanh toán nhấn vài đặt

Page 62: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 55.

- Chọn sửa điền thông tin mã id, mật khẩu, email và chọn trang thái đơn hànglà chờ sử lý để thanh toán an toàn. Chọn trang thái kích hoạt là bật sau đó lưu để kếtthúc.

Hình 4.14: Cấu hình modul thanh toán bảo kim- Điền thông tin lút thanh toán bảo kim tại cấu hình hệ thống tương tự như trên

d. Kết quả đạt được- Khi nhấp vô thanh toán bảo kim tại trna chi tiết sản phẩm của website sẽ thấy

được một số thông tin tài khoản đã tích hợp.- Người đại diện mặc định theo tên tài khoản nhận tiền. Hiển thị tình chạng đã

xác thực bằng cách liên hệ trực tiếp tới nhân viên bảo kim bảo họ xác thựccho mình hoặc bằng cách mua một sản phẩm nào đó hệ thống sẽ tự động xácthực cho mình.

- Có thể chỉnh sửa hiện email và điện thoại có hoặc không, bằng cách chỉnh‘tùy chọn thông tin cá nhân trên trang thanh toán’ của mục dành cho ngườibán trong tài khoản bảo kim.

Hình 4.15 : Tích hợp thanh toán thành công

Page 63: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 56.

CHƯƠNG V. GIỚI THIỆU VỀ WEBSITE BÁN HÀNG DÂN DỤNG

I. Nội Dung Website

1. Giao diện trang chủHiển thị ngay đầu trang chủ là logo trang web cùng like facebook. Bên phải

trang chủ chính là hệ thống giỏ hàng tìm kiếm và đăng ký đăng nhập. Tiếp theo làmenu chuyển trang để tới các trang khác, gồm các menu về sản phẩm, giới thiệucông ty, tuyển dụng và liên hệ. Bên trái là box hỗ trợ trực tuyến cùng quảng cáo vàphần show sản phẩm tiêu biểu, sản phẩm mới. Phần trính giữa trang chủ chứa slidebanner cùng các sản phẩm được sắp sếp hiển thị theo danh mục và video

Page 64: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 57.

Hình 5.1: Giao diện trang chủ

2. Giao diện trang giới thiệuGới thiệu với khách hàng về cửa hang, những sản phẩm có trong cửa hàng trựctuyến

Hình 5.2: Giao diện trang giới thiệu

3. Giao diện trang tuyển dụngNhững khách hàng có quan tâm tới tuyển dụng của cửa hàng trực tuyến. Sẽ có

đầy đủ thông tin tuyển dung qua mục tuyển dụng của website

Page 65: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 58.

Hình 5.3: Giao diện trang tuyển dụng

4. Giao diện sản phẩm điện tửHiển thị toàn bộ sản phẩm liên quan đến điện tử do nhà cung cấp đưa da. Khách

hàng có thể xem chi tiết và mua sản phẩm bằng cách nhấp vô hình sản phẩm.

Hình 5.4: Sản phẩm điện tử

Page 66: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 59.

5. Giao diện chi tiết sản phẩmKhách hàng sẽ được xem toàn bộ thông tin về sản phẩm. Quan sát sản phẩm rõ

hơn nhờ chức năng zoom sản phẩm. Bên cạnh đó khách hàng có thể like trang webtrên fanpage. Quan trong nhất là khách hàng có thể mua sản phẩm qua phương thứcthanh toán trực tuyến ngân lượng hoặc bảo kim.

Hình 5.5: Chi tiết sản phẩm

6. Giao diện trang đăng nhập tài khoản

Hình 5.6: Đăng nhập tài khoản

Page 67: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 60.

7. Giao diện đăng kýKhách hàng dùng để đăng ký tài khoản nhận tin, mua hàng

Hình 5.7: Đăng ký tài khoản

Page 68: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 61.

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Hướng phát triển- Hoàn thiện phương thức thanh toán trực tuyến an toàn giúp khách hàng tin

tưởng vào website hơn.- Tiếp tục tối ưu hóa SEO dúp khách hàng có thể tìm thấy website mình dễ

dàng hơn.- Thực tiện tích hợp thêm các modul mới dúp cho khách hàng cảm thấy thân

thiện hơn.- Tích cực thực hiện maketing onlice cho web để thu hút nhiều khách hàng

hơn- Tiến hành phân quyền cho các user cấp dưới…

Kết luận- Kết quả nghiên cứu đề tài giúp em có thêm một phương pháp xây dựng một

Website, góp phần làm cho môi trường làm việc thuận tiện và dẽ dàng hơn. Vì vậytiếp cận đề tài là hướng đi đúng đắn.- Vì thời gian không cho phép nên em chưa tìm hiểu rõ và kỹ hơn đề tài này

hơn nữa. Vì thế đè tài cũng còn có nhiều thiếu sót, mong các thầy cô giúp đỡ emnhiều hơn.- Một lần nữa em xin chân thành cảm ơn các thầy cô giáo, các bạn học sinh và

đặc biệt em xin cám ơn thầy Đỗ Võ Thắng tại trung tâm đào tạo ATHENA quản trịmạng và an ninh quốc tê rất nhiều vì đã giúp đỡ em trong thời gian qua.

Page 69: Thiet ke web_ban_hang

SVTH: Lâm Hoài Nhân Trang 62.

TÀI LIỆU THAM KHẢO[1]. Hướng dẫn thêm nút like facebook vào website:

http://thuthuattienich.com/seo/them-nut-like-cua-facebook-vao-website/

[2]. Download Opencart:

http://www.opencart.com/?route=download/download

[3]. Hướng dẫn tích hợp thanh toán chực tuyến lên Opencart:

http://www.youtube.com/watch?v=ZhR5vgNuSxY&hd=1

[4]. Hướng dẫn cài đặt và chỉnh sửa Opencart:

https://www.youtube.com/watch?v=-g70nFMGOkU&hd=1