Đồ án cơ sở web wordpress

− Tìm hiểu framework code Igniter: • Hiểu rõ môi hình MVC và viết website • Lập trình hướng đối tượng • Các sử dụng • Các thư viện hỗ trợ − Tìm hiểu framework Bootrap để xây dựng giao di

Trang 1

BỘ CÔNG THƯƠNGTRƯỜNG CAO ĐẲNG CÔNG THƯƠNG TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

TP Hồ Chí Minh – Ngày 25 Tháng 12 năm 2016

Trang 2

BỘ CÔNG THƯƠNG

TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

TP Hồ Chí Minh – Ngày 25 Tháng 12 năm 2016

Trang 4

LỜI NHẬN XÉT

………

Trang 6

LỜI CÁM ƠN

Để hoàn thành hoàn thành đồ án chuyên ngành, em xin tỏ lòng biết ơn sâu sắc đến thầy

Hồ Diên Lợi đã tận tình hướng dẫn em trong suốt quá trình làm bài

Em xin chân thành cám ơn các thầy cô trong khoa Công nghệ thông tin- trường Caođẳng Công Thương TP.HCM đã tận tình giúp đỡ, truyền đạt kiến thức, tạo mọi điềukiện để em hoàn thành đồ án cơ sở tốt nhất Với vốn kiến thức tiếp thu trong quá trìnhhọc tập không chỉ là nền tảng cho quá trình làm bài mà còn là hành trang quý báu để

em bước vào đời một cách vững chắc và tự tin

Trong quá trình học tập và làm bài, nếu em có chỗ nào sai sót em mong quý thầy cô

Trang 7

Mục lục

Trang 8

DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT

CSDL: Cở sở dữ liệu

XSS: Cross Site Scripting

AJAX: Asynchronous Javascript and XML ( Javascript và XML không đồng bộ)ORM: Object-Relational Mapping

CSS: Cascading Style Sheets

HTML: Hypertext Markup Language

Trang 9

DANH MỤC CÁCH BẢNG

Trang 10

DANH MỤC HÌNH

Trang 11

− Nghiên cứu cấu trúc của một mô hình MVC

− Tìm hiểu cho bản thân một framework PHP phù hợp

− Nâng cao kỹ nâng lập trình, tư duy sang tạo và giải quyết vấn đề

1.2 Mục đích

− Tìm hiểu thị trường mua bán trực tuyến hiện nay

− Khảo sáy về mặt chức năng, giao diện, dữ liệu từ các website: lazada.vn,zalora.vn,…

− Xây dụng lộ trình phát triển website dựa vào kết quả khảo sát trên

− Tìm hiểu framework code Igniter:

• Hiểu rõ môi hình MVC và viết website

• Lập trình hướng đối tượng

• Các sử dụng

• Các thư viện hỗ trợ

− Tìm hiểu framework Bootrap để xây dựng giao diện đẹp và tương thích cá thiết

bị có độ phận giải khác nhau như Desktop, Tablet, Mobile

− Nâng cao kĩ năng lập trình, khả năng phân tích giải quyết vấn đề

1.3.Đối tượng, phạm vi nghiên cứu

 Đối tượng nghiên cứu:

Trang 12

o Hiển thị và quản lý thông tin sản phẩm.

o Quản lý tài khoản khách hàng

o Quản lý giao diện website

o Các thư viện viết cho CodeIgniter

1.4.Phương pháp nghiên cứu

 Phương pháp thống kê, thu thập thông tin, số liệu

 Phương pháp phân tích, tổng hợp

 Quá trình tin học hóa để xây dựng website

Trang 13

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

2.1 Giới thiệu Xampp

Để chạy được CodeIgniter ta cần phải có một WebServer với Apache, MySQL, PHP

và Perl, việc cài đặt và cấu hình WebServer gặp nhiều khó khăn và tốn kém thời gian.Hiện nay có nhiều phần mềm cấu hình sẵn và ứng dụng như một WebServer nhưXampp, Wamp…

2.1.1 Cài đặt Xampp

2.1.2 Hướng dẫn cài đặt Localhost

Để cài Localhost chúng ta có rất nhiều cách và phần mềm, tuy nhiên nếu bạn là

người mới thì mình khuyến khích các bạn dùng phần mềm XAMPP để cài localhost

vì:

 XAMPP hoàn toàn miễn phí

 Dễ sử dụng

 Hỗ trợ các hệ điều hành thông dụng như Windows, Mac, Linux

Tuy nhiên trong bài này mình chỉ hướng dẫn cho hệ điều hành Windows Để tải

https://www.apachefriends.org/download.html và chọn phiên bản XAMPP phù hợpvới hệ điều hành của máy tính bạn đang sử dụng, và bạn nên chọn phiên bản PHP5.4.31 Lưu ý là XAMPP chỉ có phiên bản cho hệ điều hành 32bit nhưng 64bit vẫnhoạt động bình thường

Hình 1: Cài đặt Xampp

Trang 14

Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next.

Hình 2: Cài dặt xampp

Ở phần chọn đường dẫn, bạn hãy chọn đường dẫn cần lưu cài đặt của XAMPP Lưu ýrằng đường dẫn này bạn phải nhớ vì khi cài đặt web lên localhost, bạn phải truy cậpvào thư mục này Bạn nên để mặc định làc:\xampp Tiếp tục ấn Next

Hình 3: Chọn thư mục để cài dặt xapp

Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP” Và ấn

Trang 15

Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP.

Hình 4: Bỏ chọn phần “Learn more about Bitnami for Xampp”

Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP.Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởiđộng được localhost

2.2 Tổng quan về CodeIgniter

2.2.1 CodeIgniter là gì?

là một nền tảng ứng dụng web mã nguồn mở được viết bằng ngôn ngữ PHP bởi RickEllis (CEO của EllisLab, Inc) Phiên bản đầu tiên được phát hành vào ngày28/02/2006, hiện tại CodeIgniter đã được nâng cấp lên phiên bản 2.0.2 phát hành vàongày 07/04/2011 và đang được phát triển bởi ExpressionEngine Development Teamthuộc EllisLab, Inc

2.2.2 Đặc điểm của CodeIgniter

• Được thiết kế theo mô hình MVC (Model – View – Controller):

Mô hình MVC giúp tách thành phần hiển thị giao diện và phần xử lý của một ứngdụng thành các phần riêng biệt, từ đó dễ quản lý, bảo trì và nâng cấp ứngdụng.CodeIgniter đã sử dụng mô hình này để tách các tập tin giao diện ra khỏi các tậptin xử lý dữ liệu để người thiết kế dễ dàng thay đổi giao diện, nâng cấp và bảo trìwebsite

Trang 16

• Tốc độ:

CodeIgniter là một trong những framework có tốc độ xử lý nhanh nhất hiện nay Với

cơ chế lưu nội dung người dùng truy xuất vào bộ đệm (cache), kiểm tra bộ đệm trướckhi thực hiện, nếu tồn tại sẽ lấy ra ngược lại sẽ thực hiện gửi yêu cầu người dùng Nhưvậy sẽ làm giảm lượt truy cập đến cơ sở dữ liệu, tối ưu hóa tốc độ

• Nhẹ gọn:

CodeIgniter 3 hoàn toàn đơn giản và nhỏ gọn khoảng 2.5 mb, nhưng vẫn đầy đủ cáctính năng cần thiết như: upload file, images, captcha, cache, security, cắt thumb,watermark, send email, mvc …

• Dễ sử dụng:

CodeIgniter khá thân thiện với người dùng, trong file download về có kèm theo mộtbản hướng dẫn khá đầy đủ và ví dụ minh họa về từng phần, giải thích chi tiết.CodeIgniter rất phù hợp với người mới làm quen với lập trình

• Thư viện phong phú:

CodeIgniter hỗ trợ khá đầy đủ các tiện ích thông dụng cho phép phát triển các ứngdụng phổ biến nhất như gửi thư, quản lý session, giỏ hàng, truy cập cơ sở dữ liệu, xử

lý ảnh … đến các chức năng bảo mật, mã hóa…

• Miễn phí:

CodeIgniter được phát hành dưới giấy phép Apache/BSD mở rộng Bạn có thể tùychỉnh, sửa đổi, copy, phát triển và phân phối mã nguồn Tuy nhiên nên ghi rõ nguồngốc của CodeIgniter

• Bảo Mật:

CodeIgniter hổ trợ bộ lọc XSS (Cross Site Scripting), SQL Injection để lọc dữ liệu từPOST và COOKIE để ngăn chặn các mã độc Từ đó làm tăng khả năng bảo mật choCodeIgniter

Trang 17

• Search Engine Optimization:

Cấu trúc URL được tạo bởi CodeIgniter rất đơn giản và thân thiện Thay vì sử dụngcác chuỗi truy vấn tiêu chuẩn tiếp cận đến các URL thì CodeIgniter sử dụng một cáchtiếp cận dựa vào các phân khúc (segment)

2.2.3 Những điểm hạn chế

• Chưa hổ trợ AJAX:

AJAX là thuật ngữ viết tắt của Asynchronous Javascript and XML ( Javascript vàXML không đồng bộ) AJAX được sử dụng rất nhiều trên các ứng dụng web nhằmtăng tính thân thiện và tiện lợi hơn cho trang web, nâng cao tính tương tác giữa người

và hệ thống, giúp người dùng có cảm giác như đang chạy ứng dụng trên desktop Hiệnnay CodeIgniter vẫn chưa có thư viện hỗ trợ xây dựng ứng dụng AJAX Tuy nhiên lậptrình viên có thể sử dụng các thư viện bên ngoài như Jquery, Prototype hayMootools…

• Chưa hổ trợ ORM:

ORM là thuật ngữ viết tắt của Object-Relational Mapping là một phương pháp lậptrình để chuyển đổi từ mô hình database (cơ sở dữ liệu) sang mô hình hướng đối tượngtrong chương trình ORM giúp mã nguồn ngắn gọn hơn và các thao tác trong cơ

sở dữ liệu dễ dàng hơn Hiện nay CodeIgniter vẫn chưa hổ trợ ORM

• Chưa hổ trợ Event-Driven Programming:

Event-Driven Programming (lập trình hướng sự kiện) là một mô hình lập trình trong

đó các luồng xử lý của hệ thống được xác định bởi các sự kiện như nhấn chuột, gõ bànphím… Tuy nhiên đây không phải là một khuyết điểm lớn đới với CodeIgniter vì hiệnnay chỉ có một số framework hổ trợ Event-Driven Programming như: Prado, Yii…

• Chưa hổ trợ một số module thông dụng:

Tuy CodeIgniter là framework miễn phí, mã nguồn mở, dễ sử dụng nhưng vẫn cònthiếu một số module thông dụng thường gặp trong quá trình xây dựng ứng dụng webnhư: Trình phân tích RSS, Trình xử lý PDF…

Trang 18

 View là thành phần thể hiện dữ liệu trong Model thành các giao diện tương tác vớingười sử dụng Một Model có thể có nhiều View tùy thuộc vào các mục đích khácnhau.

 Controller đóng vai trò trung gian giữa Model và View Thông tin người dùng từView được gửi cho Controller xử lý, sau đó Controller tương tác với Model để lấy

dữ liệu được yêu cầu, sau cùng Controller trả dữ liệu này về cho View

Trang 19

2.2.5 Model

Model là những lớp php được thiết kế để thực hiện các thao tác trao đổi thông tin với

cơ sở dữ liệu của hệ thống.Một lớp Model có thể chứa các chức năng thêm, xóa, cậpnhật, truy vấn…Trong CodeIgniter việc khi báo các lớp model cho một đối tượng thựcthể nào đó là không cần thiết, vì trong controller ta có thể gọi đến thư viện database

và thực hiện các thao tác đến cơ sở dữ liệu Tuy nhiên, để thuận tiện cho việc quản lý,chỉnh sửa, bảo trì, dễ dàng thiết kế, và đúng bản chất MVC nên CodeIgniter khuyếnkhích lập trình viên sử dụng các lớp model

2.2.6. View

View đơn giản chỉ là những tập tin HTML có thể là một trang web, một mảnh web,header, footer, sidebar… Để thể hiện dữ liệu trong model thành các giao diện tương tácvới người dùng Trong thực tế các file view có thể được nhúng vào nhau để tạo ra mộtgiao diện trang web hoàn chỉnh Nội dung của các tập tin view chứa các mã html hoặc

có thể thêm mã php View không bao giờ được gọi trực tiếp mà phải thông quacontroller

2.2.7 Controller

Controller đơn giản chỉ là các tập tin có tên class được đặt theo cách có thể kết hợp vớiURI

Khi khai báo một lớp controller lập trình viên cần tuân thủ các quy tắc sau:

 Giống như các lớp model, chữ cái đầu tiên của lớp phải được viết hoa, phần cònlại viết bình thường Ví dụ: Blog, Account, Cart…

 Tên tập tin phải trùng với tên lớp và được đặt trong thư mụcapplication/controllers/, lập trình viên có thể tạo các thư mục con để chứa cáctập tin controller trong application/controllers để thuận tiện cho việc quản lý

2.2.8 Thư viện của CodeIgniter

Sức mạnhcủa CodeIgniter nằm ở các thư viện xây dựng sẵn Hiện tại, CodeIgniter hỗtrợ người dùng 26 thư viện sau:

1 Benchmarking: Hỗ trợ đánh giá hiệu năng hệ thống

2 Hỗ trợ tạo lịch tự động

3 Cart: Hỗ trợ chức năng giỏ hàng trong các website thương mại điện tử

Trang 20

4 Config: Cho phép thiết lập hệ thống.

5 Database: Hỗ trợ thao tác trên cơ sở dữ liệu

6 Email: Hỗ trợ gửi email

7 Encryption: Hỗ trợ mã hóa và giải mã thông tin

8 File Uploading: Hỗ trợ upload tập tin từ người dùng lên server

9 Form Validation: Cho phép kiểm tra dữ liệu người dùng

10 FTP: Hỗ trợ kết nối FTP

11 HTML Table: Hỗ trợ xây dựng bảng tự động

12 Image Manipulation: Hỗ trợ xử lý ảnh

13 Input and Security: Hỗ trợ xử lý dữ liệu đầu vào và bảo mật

14 Loader: Hỗ trợ tải các thành phần của CodeIgniter

15 Language: Hỗ trợ hiển thị đa ngôn ngữ

16 Output: Hỗ trợ xuất thông tin về phía trình duyệt của người dùng

17 Pagination: Hỗ trợ phân trang tự động

18 Session: Hỗ trợ xử lý session

19 Trackback: Cho phép và nhận thông tin trackback

20 Template Parser: Cho phép xây dựng và xử lý mã giả trong các tập tin view

21 Typography: Hỗ trợ định dạng văn bản 13

22 Unit Testing: Hỗ trợ unit testing

23 URI: Cho phép lấy thông tin từ URI

24 User Agent: Cho phép xác định thông tin trình duyệt của người dùng, thiết bị

di động hay các robot đang truy cập website

25 XML-RPC: Cho phép gửi yêu cầu đến một XML-RPC hoặc tự xây dựng mộtXML-RPC cho hệ thống

26 Zip Encoding: Cho phép tạo tập tin ZIP

2.3 Giới thiệu Twitter Bootstrap

2.3.1 Giới thiệu

Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms,buttons, tables, grids, navigation, và nhiều thành phần khác của website

Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột Tuy nhiên, cũng

có giải pháp cho việc dùng layout dạng động (fluid)

Trang 21

Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch.

Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thịcảnh báo, tabs, phân trang…

2.3.2 Tại sao nên sử dụng Twitter Bootstrap

Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.TwitterBootstrap định nghĩa sẳn các class css công việc của chúng ta chỉ là sử dụng các class

đó vào mục đích của mình

2.3.3.Cài đặt Twitter Bootstrap

Tải về Bootstrap tại http://getbootstrap.com/

Sau khi tải về, ta sẽ có một file Zip Tiến hành giải nén ta có một thư mục có tênbootstrap, bên trong có 3 thư mục : css, fonts, js Trong đó:

Folder “css” chứa các file định dạng css

Folder “fonts” chứa các file định dạng kiểu chữ

Folder “js” chứ các file javascript

Nhúng các file của Bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<script src="js/bootstrap.min.js"></script>

Trang 22

Chương 3 XÂY DỰNG WEBSITE BÁN HÀNG

3.1.3 Chức năng của người quản trị

Người quản trị có quyền kiểm soát toàn bộ website

- Quản lý sản phẩm: thêm, sửa, xóa, thống kê

- Quản lý thành viên: sửa thông tin, khóa tài khoản

- Quản lý danh mục sản phẩm

- Quản lý thông tin nhà sản xuất: thêm, sửa, xóa

- Quản lý đơn đặt hàng: thêm, sửa, xóa, cập thật tình trạng đơn hàng

- Quản lý tài chính, doanh thu

- Thống kê: thành viên, sản phẩm, đơn hàng, doanh thu…

- Cài đặt, cấu hình giao diện, chức năng website

Trang 23

3.2 Phân tích và thiết kế Cơ Sở Dữ Liệu

Trang 24

1 id int(11) Khóa chính Mã chủ đề bài viết

8 updated_by varchar(255) Được cập nhật bởi

Bảng 2:Chủ dề bài viết

• Bảng sản phẩm

STT Thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

2 catid int(11) Khóa ngoại Mã chủ đề sản phẩm

Bảng 3: Sản phẩm

• Bảng bài viết

2 catid int(11) Khóa ngoại Mã chủ đề bài viết

Trang 25

5 detail longtext Chi tiết bài viết

Bảng 4: Bài viết

• Bảng liên hệ

Bảng 5: Liên hệ

• Bảng khách hàng

Bảng 6: khách hàng

Bảng đặt hàng

Trang 26

1 id int(11) Khóa chính Mã đơn hàng

2 customerid int(11) Khóa ngoại Mã khách hàng

Bảng 7: Bảng đặt hàng

• Bảng chi tiết đơn hàng

3 productid int(11) Khóa ngoại Mã khách hàng

Bảng 8: Bảng chi tiết hóa đơn

• Bảng tài khoản

Bảng 9: Bảng tài khoản

3.3 Thiết kế giao diện

Trang 27

3.3.1 Giao diện người dùng

Toàn bộ website đều sử dụng Framework CSS Bootstrap và tự động co giãn giaodiện cho phù hợp với từng loại màn hình như Desktop, Tablet, Phalet, Phone…

− Nút link Facebook và Google plus, instagram, twitter

− Link đăng nhập và đăng ký

− Menu ngang

 Footer

Hình 8: footer

 Vùng Footer của web hiển thị như sau:

− Thông tin website

− Địa chỉ shop

− Nút link Facebook và Google plus, instagram, twitter

Định dạng
Số trang	38
Dung lượng	845,19 KB