Xây dựng công cụ hỗ trợ quảng bá sản phẩm trên facebook

Cùng với sự bùng nổ của công nghệ thông tin là sự phát triển mạnh khỏe của thương mại điện tử, nhu cầu mua bán hàng hóa, quảng bá sản phẩm trên Internet ngày một tăng cao.Bắt nguồn với ý

Đặc biệt em xin chân thành cảm ơn cô Dương Thị Quy đã tận tình hướng

dẫn, giúp đỡ, chỉ bảo và đóng góp ý kiến cho em trong suốt thời gian thực hiện

đồ án

Mặc dù em đã nỗ lực để hoàn thành đồ án song vẫn không tránh khỏi thiếu sót kính mong sự góp ý của các thầy cô và các bạn

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

Thái Nguyên, ngày 26 tháng 05 năm 2016

Sinh viên thực hiện

Vũ Công Tịnh

LỜI CAM ĐOAN

Em xin cam đoan đồ án tự em nghiên cứu và xây dựng dựa trên các kiến thức được học trên trường và kinh nghiệm đi làm thực Cùng sự hướng dẫn của Ths Dương Thị Quy Các nội dung nghiên cứu, kết quả trong đề tài này là trung thực và chưa công bố dưới bất kỳ hình thức nào trước đây Những kiến thức tài liệu tham khảo được ghi rõ trong mục tài liệu tham khảo

Nếu phát hiện có bất kỳ sự gian lận nào em xin hoàn toàn chịu trách nhiệm về nội dung luận văn của mình Trường đại học CNTT& TT không liên quan đến những vi phạm tác quyền, bản quyền do em gây ra trong quá trình thực hiện (nếu có)

Thái Nguyên, ngày 26 tháng 05 năm 2016

Sinh viên thực hiện

Vũ Công Tịnh

MỤC LỤC

LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

MỤC LỤC 3

DANH MỤC HÌNH ẢNH 5

LỜI MỞ ĐẦU 6

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

1.1 Tìm hiểu về các ngôn ngữ lập trình 7

1.1.1 Giới thiệu về HTML 7

1.1.2 Giới thiệu về CSS 9

1.1.3 Giới thiệu về Javascript 16

1.1.4 Giới thiệu về jQuery 17

1.1.5 Giới thiệu AJAX 20

1.1.6 Giới thiệu về PHP 23

1.1.7 Tại sao phải sử dụng PHP 24

1.1.8 Cú pháp PHP 24

1.1.9 Các kiểu dữ liệu PHP 25

1.1.10 Biến trong PHP 25

1.1.11 Lập trình hướng đối tượng (OOP) 26

1.1.12 Giới thiệu về Twitter Bootstrap 28

1.2 Tổng quan về CURL trong PHP 31

1.2.1 CURL là gì? 31

1.2.2 Vai trò của CURL 31

1.2.3 Lý thuyết cơ bản về CURL 32

CHƯƠNG 2: KHẢO SÁT VÀ PHÂN TÍCH DỮ LIỆU TRÊN FACEBOOK 36

2.1 Khảo sát thực trạng quảng bá trên Facebook 36

2.2 Phân tích yêu cầu đề tài 39

2.3 Yêu cầu trang web 40

2.4 Mô tả chức năng hệ thống 40

2.5 Phân tích form dữ liệu của Facebook .40

2.5.1 Các phương pháp xây dựng ứng dụng 40

2.5.2 Form đăng nhập 43

2.5.3 Form tham gia nhóm 45

2.5.4 Form đăng bài viết lên nhóm 45

2.5.5 Form mời bạn bè vào nhóm 46

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 48

3.1 Giao diện trang chủ 48

3.2 Giao diện form đăng nhập tài khoản Facebook 49

3.3 Giao diện trang tự động tham gia vào nhóm 50

3.4 Giao diện trang đăng bài vào nhóm 53

3.5 Giao diện trang mời bạn bè vào nhóm 55

3.6 Giao diện trang scan email thành viên trên Group Facebook 58

KẾT LUẬN 60

TÀI LIỆU THAM KHẢO 61

DANH MỤC HÌNH ẢNH

Hình 1.1: Cấu trúc thư mục của bootstrap 29

Hình 1.2 Cài đặt Bootstrap 29

Hình 1.3: Form đăng nhập sử dụng Bootstrap 29

Hình 1.4: Ví dụ về Bootstrap 30

Hình 1.5: Ví dụ về Bootstrap 31

Hình 2.1: Cấu trúc một form dữ liệu đăng nhập 44

Hình 2.2: Form dữ liệu đăng bài viết lên 1 nhóm 45

Hình 2.3: Form dữ liệu mời bạn bè tham gia nhóm 46

Hình 3.1: Giao diện trang chủ 48

Hình 3.2 Giao diện form đăng nhập nick 49

Hình 3.3: Đăng nhập thành công 50

Hình 3.4: Kết quả tìm kiếm nhóm để tham gia 51

Hình 3.5: Giao diện toàn trang tham gia vào nhóm 52

Hình 3.6: Giao diện đăng nhập và hiển thị các nhóm đã tham gia 53

Hình 3.7: Giao diện form nhập thông tin bài cần chia sẻ hoặc status muốn chia sẻ 54

Hình 3.8: Giao diện trang thêm thành viên vào nhóm trước khi đăng nhập 55

Hình 3.9: Danh sách nhóm nick chính đang tham gia 56

Hình 3.10: Giao diện điền thông tin thành viên được mời 57

Hình 3.11: Giao diện trang tìm kiếm Email Facebook 58

Hình 3.12: Giao diện kết quả tìm kiếm ID và Email Facebook 59

LỜI MỞ ĐẦU

Trong những năm gần đây với sự phát triển vượt trội của khoa học

kỹ thuật đặc biệt là công nghệ thông tin, với những ứng dụng của công nghệ thông tin vào các lĩnh vực đã đóng góp một phần to lớn cho sự nghiệp phát triển của con người

Cổng thông tin điện tử trên Internet ra đời cùng với việc Internet đang nhanh chóng lan rộng khắp toàn cầu, nó sẽ trở thành công cụ chủ yếu

và đắc lực cho việc trao đổi, tìm kiếm thông tin trên phạm vi toàn thế giới Bây giờ hầu như bất cứ nhu cầu nào của bạn cũng đều có thể được đáp ứng ngay tức khắc Với một máy tính cá nhân có kết nối mạng, bạn có thể lướt trên các Website của các công ty, cơ quan, các trang báo điện tử; thoải mái tìm kiếm các thông tin mình cần ngay tại chỗ

Việc xây dựng các ứng dụng trên nền Website đang trở thành một xu hướng lớn trên thế giới.Nhờ đó bỏ dần các rào cản về địa lý, dễ dàng chia

sẻ dữ liệu cho nhiều máy tính chỉ với một máy tính có kết nối Internet

Cùng với sự bùng nổ của công nghệ thông tin là sự phát triển mạnh khỏe của thương mại điện tử, nhu cầu mua bán hàng hóa, quảng bá sản phẩm trên Internet ngày một tăng cao.Bắt nguồn với ý tưởng này, cùng với

những gợi ý của cô Dương Thị Quy, em đã thực hiện đề tài “Xây dựng

công cụ hỗ trợ quảng bá sản phẩm trên Facebook”.Công cụ được xây dựng

trên ngôn ngữ lập trình PHP và sử dụng CURL nhằm giúp người sử dụng

dễ dàng quảng bá các sản phẩm trên Facebook một cách tự động.Em hi vọng trong quá trình tìm hiểu xây dựng đề tài có thể giúp bản thân có thêm nhiều kiến thức bổ ích phục vụ cho quá trình học tập và làm việc sau này

Trong quá trình làm đề tài còn nhiều thiếu xót và hạn chế em mong nhận được sự đóng góp ý kiến của quý thầy cô để em có thể hoàn thành tốt nhất mọi công việc

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Tìm hiểu về các ngôn ngữ lập trình

1.1.1 Giới thiệu về HTML

HTML (viết tắt từ HyperText Markup Language) là một ngôn ngữ đánh dấu siêu văn bản, được thiết kế ra để xây dựng các trang web.Vậy thế nào là ngôn ngữ đánh dấu siêu văn bản? Ta hãy cùng xem xét từng khía cạnh một:

Siêu văn bản (HyperText): Như ta đã biết, liên kết siêu văn bản là một từ hay một câu trong trang Web dùng để chỉ đến trang Web khác Khi nhấn chuột lên một trong các liên kết này, trình duyệt web (như Netscape Navigator hoặc Internet Explorer) sẽ đưa ta tức khắc đến trang Web kia mà không cần hỏi han gì Vì những liên kết siêu văn bản này thật sự là tính năng đặc trưng của World Wide Web, các trang Web thường được biết như

là những tài liệu siêu văn bản.Vì thế, HTML có từ siêu văn bản trong tên của nó

Đánh dấu (Markup): Có từ điển định nghĩa markup là các chỉ dẫn chi tiết về kiểu dáng được ghi trên bản viết tay để xếp chữ in Như vậy, chúng

ta có thể hiểu đó là các lệnh chi tiết về kiểu dáng được đánh vào tài liệu văn bản để đưa lên WWW

Nói chung, HTML tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet Các file này có chứa thẻ đánh dấu và thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP Sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, một loại phần mềm trực quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng

Cấu trúc của một tài liệu HTML

Các tập tin HTML luôn bắt đầu bằng thẻ <HTML>.Thẻ này không làm gì khác ngoài nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc

một tài liệu có chứa các mã HTML.Tương tự, dòng cuối trong tài liệu định dạng HTML luôn luôn là thẻ </HTML>, có tác dụng thông báo sự kết thúc của văn bản HTML với trình duyệt

Chi tiết kế tiếp trong catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu và thân

Phần đầu giống như lời giới thiệu cho trang Các trình duyệt Web dùng phần đầu này để thu nhặt các loại thông tin khác nhau về trang Để xác định phần đầu, ta sử dụng thẻ <HEAD> và thẻ </HEAD> ngay sau thẻ

<HTML> Mặc dù ta có thể đặt một số chi tiết bên trong phạm vi phần đầu này, nhưng phổ biến nhất là tên trang Nếu có ai đó xem trang này trong browser, thì tên trang sẽ xuất hiện trong dải tên của cửa sổ browser Để xác định tên trang, ta đặt đoạn văn bản tên đó giữa các thẻ <TITLE> và

</TITLE>

Phần thân là nơi nhập vào các văn bản sẽ xuất hiện trên trang Web lẫn các thẻ khác quy định dáng vẻ của trang Để xác định phần thân, ta đặt các thẻ <BODY> và </BODY> sau phần đầu (dưới </HEAD>)

Dưới đây là cấu trúc cơ bản của một trang web định dạng HTML:

1.1.2 Giới thiệu về CSS

CSS là viết tắt của cụm từ "Cascading Style Sheet", nó là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web.Là ngôn ngữ đang được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển thị không giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải quyết bài toán này.CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó

a Tại sao phải sử dụng CSS

- Như các bạn biết HTML cũng hỗ trợ một số thuộc tính định dạng

cơ bản cho text, picture, table,… nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả Ngoài ra, hiện tại CSS đã được

hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như (như nhau) dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất

- Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng Trong khi đó CSS đưa ra phương thức “ngoại tuyến” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó

- Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian Nhưng với

việc sử dụng CSS việc đó là hoàn toàn đơn giản cũng như là bạn có một trò

ma thuật nào đó

- Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…

Cách 2: Chèn trực tiếp vào bên trong thẻ HTML

- Chèn trực tiếp CSS vào bên trong các thẻ mở của HTML

- Nếu có nhiều thuộc tính cần quy định, ta ngăn cách giữa chúng bằng khoảng trắng

Ví dụ: Ở đây ta chèn CSS vào thẻ mở của cặp thẻ <p></p>

<html>

<head>

<title>Chen CSS-Cách 2</title>

</head>

Cách 3: Liên kết với một file *.css bên ngoài

Đây là cách được dùng nhiều nhất trong sử dụng CSS vì tính tiện dụng và linh hoạt của nó Giả sử, bạn có một website gồm hàng trăm trang, khi bạn muốn thay đổi một chút cách trình này của website, thay vì gạch cạch đi gõ từng trang một, bạn chỉ cần sửa file CSS bên ngoài một chút, hàng trăm trang web của bạn đều được thay đổi

Cú pháp: Thực hiện liên kết bằng thẻ <link>( Không có tag đóng ), theo cú pháp sau:

<link rel="stylesheet" href="Đường dẫn đên file css" type="text/css" /> Tag này được đặt trong cặp tag <head></head> của trang web, và không cần đặt trong tag <style></style>

Nếu bạn đặt file *.css cùng thư mục với trang web, thì trong thuộc tính href bạn chỉ cần viết: href="<ten_file_css.css"

Nếu file *.css không cùng thư mục với trang web: Bạn cần chỉ trong đường dẫn tuyệt đối tới file *.css đó trong thuộc tính href

c Một số thuộc tính thường dùng trong css

background background:

#ff0000;

Định dạng nền (background) cho thành phần

border border: 1px solid

bottom bottom: 10px; Xác định vị trí dưới cùng của

thành phần được định vị trí

caption-side caption-side:

bottom;

Xác định vị trí một chú thích của table

clear clear: both;

Xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép

rect(0,0,50px,10px);

Xác định đoạn cho thành phần khi

sử dụng thuộc tính position có giá trị "absolute"

color color: #ff0000; Xác định màu sắc cho text

increment section; (sắp xếp có thứ tự, có hiển thị số)

direction direction: ltr; Xác định hướng cho văn bản

display display: inline; Xác định loại hiển thị của thành

phần

empty-cells empty-cells: hide;

Xác định có hay không có đường viền và nền trong một cột rỗng của table

float float: left; Xác định có hay không một thành

letter-spacing letter-spacing: 2px; Tăng hoặc giảm khoảng cách giữa

các ký tự trong đoạn text

line-height line-height: 1.5; Thiết lập chiều cao giữa các dòng

list-style list-style: decimal; Thiết lập kiểu cho một danh sách

margin margin: 15px; Canh lề cho thành phần

max-height max-height: 200px; Thiết lập chiều cao tối đa của

overflow overflow: scroll; Xác định điều gì sẽ xảy ra nếu

một thành phần box tràn nội dung

padding padding: 15px; Thiết lập các thuộc tính padding

trong một khai báo

table-layout table-layout: fixed; Thiết lập các thuật toán layout

được sử dụng cho table

text-align text-align: center; Sắp xếp các nội dung theo chiều

text-indent text-indent: 10px; Ghi rõ thụt đầu dòng của dòng

đầu tiên trong một khối văn bản text-

visibility visibility: visible; Xác định thành phần có được nhìn

thấy hay không

white-space white-space:

nowrap;

Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào

width width: 800px; Thiết lập chiều rộng cho thành

phần

word-spacing word-spacing: 5px; Tăng hoặc giảm không gian giữa

các từ trong đoạn văn bản

z-index z-index: 100; Thiết lập thứ tự xếp chồng nhau

của một thành phần vị trí

1.1.3 Giới thiệu về Javascript

JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu.Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng Giống Java, JavaScript có

cú pháp tương tự C, nhưng nó gần với Self hơn Java .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript

Javascript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Nó không được biên dịch mà được chương trình duyệt diễn dịch.Không giống Java phải chuyển thành mã để trình duyệt biên dịch, trình duyệt đọc Javascript dưới dạng mã nguồn.Chính vì vậy, ta có thể dễ dàng học Javascript qua các ví dụ bởi ta có thể thấy cách sử dụng Javascript trên các trang web

Javascript có khả năng đáp ứng các sự kiện như tải hay loại bỏ các form.Khả năng này cho phép Javascript trở thành ngôn ngữ script động

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

1.1.4 Giới thiệu về jQuery

Giới thiệu

Khi mà nhiều nhà phát triển chấp nhận phát triển kiểu AJAX để tạo

ra các ứng dụng tương tác mạnh hơn, họ sẽ tìm các công cụ giúp đơn giản

hóa cho công việc của mình

jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng Lang.Net của Microsoft hồi đầu tháng 8, tổ chức ở Redmond, Washington John Resig, người tạo ra jQuery, nói rằng công nghệ này có bản 1.0 vào 26/8 jQuery là kiểu thư viện JavaScript mới cần thiết cho phép các nhà

phát triển làm việc "khiêm tốn" với JavaScript

b Căn bản

Để làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội

dung như sau:

<html>

<head>

<script type="text/javascript" src="path/to/jquery.js"></script>

<script type="text/javascript"> // phan (**) </script>

</head>

<body>

<a href="http://jquery.com/">jQuery</a>

</body>

</html>

Bạn cần điều chỉnh lại src (nguồn) của file jquery.js Thí dụ, nếu như file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ

giống như sau:

<script type="text/javascript" src="jquery.js></script>

Bạn có thể tải về file jquery.js ở đây

1.1 Chạy code khi tài liệu sẵn sàng

Theo cách viết javascript thông thường, coder đặt code muốn brower

xử lý tương tự như sau:

window.onload = function(){ // Your code here}

Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:

$(document).ready(function(){

//phan (*)

alert("Chào mừng bạn đến với diễn đàn Web007");

});

Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này.Bây giờ,

bạn hãy đặt đoạn code trên vào phần (**) trong file html hiện thời của bạn

Thêm thuộc tính onclick

Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời

để hiển thị một liên kết

<a href="http://robovt.com">Diễn Đàn WEB007</a>

Đoạn code js sau vào phần (*) để thêm thuộc tính onclick cho các thẻ

"a" $("a").click(function(){ alert("Hello! How are you ?");});

Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo "Hello! How are you ?" Bạn có thể thêm thuộc tính onclick này

cho bất kỳ thẻ nào trong trang web của mình

Thủ thuật

Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ

không chuyển sang trang web trong đoạn href

$("a").click(function(){ alert("Thank for your visit!"); return false;}); 1.2 Thêm class

Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class

vào một (nhiều) đối tượng DOM

Thêm đoạn code sau vào phần header của trang web (định dạng cách

trình bày cho class 'test' của các thẻ HTML có tên 'a')

<style type="text/css">a.test { font-weight: bold; }</style>

Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ ‘a’ sẽ

được trình bày bằng định nghĩa ở đoạn code trên

$("a").addClass("test");

Bạn cũng có thể xóa class ra khỏi một DOM

1.3 Các hiệu ứng đặc biệt

Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem

$("a").click(function(){ $(this).hide("slow"); return false;});

2 Cách gọi dây chuyền

Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình

hướng đối tượng với jQuery:

$("p").addClass("test").show().html("web007");

Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời Khi tương đối thành thạo jQuery,

bạn có thể sẽ thấy quen thuộc đoạn code sau:

$("a").filter(".clickme").click(function() {

alert("click!");

}).end().filter(".hideme").click(function() {

$(this).hide();

});

3 Callbacks, Functions và đối tượng 'this'

Callback là một hàm được thực thi sau khi một hàm cha của nó được thực thi xong.Cách khai báo callback trong jQuery có phần khác với cách

truyền thống

3.1 Khai báo callback không có tham số

$.get('web007.html, myCallBack);

Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ

không phải là một chuỗi (không đặt giữa cặp nháy đơn)

3.2 Khai báo callback với tham số

Cách khai báo sai:

$.get('web007.html', myCallBack(param1, param2));

trong trường hợp này chính là điều mà các ứng dụng Web khó có thể sánh với như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt là trong các ứng dụng như Bản đồ trực tuyến, soạn thảo văn bản trực tuyến, sát hạch trực tuyến có tính thời gian làm bài…)

Thuật ngữ AJAX được xuất hiện vào ngày 18/2/2005 trong một bài báo có tên AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett, công ty AdapativePath Ông định nghĩa và tóm gọn lại từ cụm từ “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest”.Ngay sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là một trong những từ khóa được tìm kiếm nhiều nhất trên Internet

Nội dung định nghĩa của Garrett về AJAX như sau:

AJAX không phải là một công nghệ.Nó là tập hợp của nhiều công nghệ với thế mạnh của riêng mình để tạo thành một sức mạnh mới AJAX bao gồm:

o Thể hiện Web theo tiêu chuẩn XHTML và CSS;

o Nâng cao tính năng động và tương tác bằng DOM (Document Object Model);

o Trao đổi và xử lý dữ liệu bằng XML và XSLT;

o Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest;

o Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript

 Cấu trúc và cách hoạt động

Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm

ở XMLHttpRequest Đây là một kỹ thuật do Microsoft khởi xướng và tích hợp lần đầu tiên vào IE5 dưới dạng một ActiveX Mozilla tích hợp công nghệ này vào Mozilla 1.0/Netscape 6 sau đó (đương nhiên toàn bộ các

version sau này của Firefox đều có XMLHttpRequest) và hiện nay đã có trong trình duyệt Safari 1.2 (Apple) và Opera 7 trở lên Các vấn đề về XMLHttpRequest và cách sử dụng nó trên các trình duyệt khác nhau sẽ được chúng ta quay trở lại ở các phần tiếp theo Sau đây là một số nét khác biệt cơ bản giữa các ứng dụng Web truyền thống và ứng dụng Web sử dụng AJAX

Trong các ứng dụng Web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả lại trang HTML khác thay thế trang cũ Qui trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người dùng sau khi nhấn một nút “Submit” trên trang Web phải chờ cho đến khi server xử lý xong mới có thể tiếp tục công việc Ngược lại, trong các ứng dụng AJAX, người dùng có thể nhấn chuột, gõ phím liên tục mà không cần chờ đợi Nội dung tương ứng với từng hành động của người dùng sẽ gần như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng gần như tức thời) trong khi trang Web không cần phải refresh lại toàn bộ nội dụng Để tìm hiểu kỹ hơn điều này, ta sẽ xem xét 2 mô hình ứng dụng như [1] đã đề cập, Mô hình cổ điển

và Mô hình AJAX-based:

o Mô hình cổ điển của một ứng dụng Web

o Mô hình ứng dụng Web sử dụng AJAX

Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX trình duyệt phía người dùng chỉ cần tải về phần của trang Web mà người dùng muốn thay đổi Điều này giúp cho ứng dụng Web phản hồi nhanh hơn, thông minh hơn.Ngoài ra, điểm đặc biệt quan trọng trong công nghệ AJAX nằm ở chữ A (Asynchronous) – không đồng bộ – tức là người dùng

cứ gửi yêu cầu của mình tới server và quay lại với công việc của mình mà không cần chờ trả lời Khi nào server xử lý xong yêu cầu của phía người

dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận lấy” để thể hiện những thay đổi cần thiết Vậy tất cả cơ chế này hoạt động thực sự thế nào?AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này Khi

đó, các yêu cầu gửi (resquest) và nhận (response) do AJAX Engine thực hiện Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, Web server có thể gửi trả dữ liệu dạng XML và AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang.Mặt khác, sự kết hợp của các công nghệ Web như CSS và XHTML làm cho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp.Đây là những lợi ích hết sức thiết thực mà AJAX đem lại Chúng ta sẽ xem xét cụ thể các thành phần cấu thành AJAX, nguyên lý hoạt động và việc sử dụng Javascript kết nối chúng trong phần tiếp theo

1.1.6 Giới thiệu về PHP

PHP(Hypertext Preprocessor) là 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 Mã PHP có thể thực thi trên Webserver để tạo ra mã HTML và xuất ra trình duyệt web theo yêu cầu của người sử dụng Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, 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 ngôn ngữ lập trình web phổ biến nhất thế giới

Ngôn ngữ PHP ra đời năm 1994 Rasmus Lerdorf sau đó được phát triển bởi nhiều người trải qua nhiều phiên bản.Phiên bản hiện tại là PHP 5.0 đã được công bố 07/2004

1.1.7 Tại sao phải sử dụng PHP

Có nhiều lý do khiến cho việc sử dụng ngôn ngữ này chiếm ưu thế, sau đây là một số lý do cơ bản:

 Miễn phí, download dễ dàng từ Internet

 Ngôn ngữ rất dễ học, dễ viết

 Mã nguồn mở(open sorce code)

 Mã nguồn không phải sửa lại nhiều khi viết chạy cho các hệ điều hành từ Windows,Linnux, Unix

 Rất đơn giản trong việc kết nối với nhiều nguồn DBMS ví dụ như : MySQL, Microsoft SQL Server 2000, Oracle, PostgreSQL, Adabas, dBase, Empress, FilePro, Informix, InterBase, mSQL, Solid, Sybase, Velocis và nhiều hệ thống CSDL thuộc Hệ Điều Hành Unix (Unix dbm) cùng bất cứ DBMS nào có sự hổ trợ cơ chế ODBC (Open Database Connectivity) ví dụ như DB2 của IBM

Để chú thích 1 đoạn dữ liệu nào đó trong PHP ta sử dụng dấu "//" cho từng dòng Hoặc dùng cặp thẻ "/*…… */" cho từng cụm mã lệnh

Đoạn mã php có thể đặt bất kỳ đâu trong tài liệu.Thông thường một trang php bao gồm các thẻ HTML như một trang HTML nhưng có thêm các đoạn mã php

1.1.9 Các kiểu dữ liệu PHP

Php hỗ trợ 5 kiểu dữ liệu như sau:

+Integer: sử dụng cho giá trị có kiểu dữ liệu là số nguyên

+ Double: sử dụng cho giá trị có kiểu dữ liệu là số thực

+String: sử dụng cho các giá trị có kiểu dữ liệu là chuỗi và ký tự +Array: sử dụng cho các giá trị có kiểu dữ liệu là mảng

+ Object: sử dụng cho các giá trị có kiểu dữ liệu là đối tượng của lớp

1.1.10 Biến trong PHP

Biến được xem là vùng nhớ dữ liệu tạm thời.Và giá trị có thể thay đổi được.Biến được bắt đầu bằng ký hiệu "$" Và theo sau chúng là 1 từ, 1 cụm từ nhưng phải viết liền hoặc có gạch dưới

Biến được xem là hợp lệ khi nó thỏa các yếu tố:

+ Tên của biến phải bắt đầu bằng dấu gạch dưới và theo sau là các ký

tự, số hay dấu gạch dưới

+ Tên của biến không được phép trùng với các từ khóa của PHP Trong PHP để sử dụng 1 biến chúng ta thường phải khai báo trước, tuy nhiên đối với các lập trình viên khi sử dụng họ thường xử lý cùng một lúc các công việc, nghĩa là vừa khái báo vừa gán dữ liệu cho biến

Bản thân biến cũng có thể gãn cho các kiểu dữ liệu khác Và tùy theo

ý định của người lập trình mong muốn trên chúng

1.1.11 Lập trình hướng đối tượng (OOP)

a Khái niệm

Lập trình hướng đối tượng (gọi tắt là OOP, từ chữ Anh ngữ oriented programming), hay còn gọi là lập trình định hướng đối tượng, là kĩ thuật lập trình hỗ trợ công nghệ đối tượng OOP giúp tăng năng suất, đơn giản hóa độ phức tạp khi bảo trì cũng như mở rộng phần mềm bằng cách cho phép lập trình viên tập trung vào các đối tượng phần mềm ở bậc cao hơn Đây là khái niệm và là một nỗ lực nhằm giảm nhẹ các thao tác viết mã cho người lập trình, cho phép họ tạo ra các ứng dụng mà các yếu tố bên ngoài có thể tương tác với các chương trình đó giống như là tương tác với các đối tượng vật lý

object-b Các tính chất cơ bản

 Object:

Các dữ liệu và chỉ thị được kết hợp vào một đơn vị đầy đủ tạo nên một đối tượng Đơn vị này tương đương với một chương trình con và vì thế các đối tượng sẽ được chia thành hai bộ phận chính: phần các phương thức (method) và phần các thuộc tính (attribute) Trong thực tế, các phương thức của đối tượng là các hàm và các thuộc tính của nó là các biến, các tham số hay hằng nội tại của một đối tượng (hay nói cách khác tập hợp các dữ liệu nội tại tạo thành thuộc tính của đối tượng).Các phương thức là phương tiện

để sử dụng một đối tượng trong khi các thuộc tính sẽ mô tả đối tượng có những tính chất gì

Các phương thức và các thuộc tính thường gắn chặt với thực tế các đặc tính và sử dụng của một đối tượng

Các đối tượng thường được trừu tượng hóa qua việc định nghĩa của các lớp (class).Tập hợp các giá trị hiện có của các thuộc tính tạo nên trạng thái của một đối tượng

Mỗi phương thức hay mỗi dữ liệu nội tại cùng với các tính chất được định nghĩa (bởi người lập trình) được xem là một đặc tính riêng của đối tượng Nếu không có gì lầm lẫn thì tập hợp các đặc tính này gọi chung là đặc tính của đối tượng

Lập trình hướng đối tượng là một phương pháp lập trình có các tính chất chính sau:

 Tính trừu tượng (abstraction): Đây là khả năng của chương trình

bỏ qua hay không chú ý đến một số khía cạnh của thông tin mà nó đang trực tiếp làm việc lên, nghĩa là nó có khả năng tập trung vào những cốt lõi cần thiết Mỗi đối tượng phục vụ như là một "động tử" có thể hoàn tất các công việc một cách nội bộ, báo cáo, thay đổi trạng thái của nó và liên lạc với các đối tượng khác mà không cần cho biết làm cách nào đối tượng tiến hành được các thao tác Tính chất này thường được gọi là sự trừu tượng của

dữ liệu

 Tính đóng gói (Encapsulation) và che giấu thông tin (Information hiding): Tính chất này không cho phép người sử dụng các đối tượng thay đổi trạng thái nội tại của một đối tượng Chỉ có các phương thức nội tại của đối tượng cho phép thay đổi trạng thái của nó Việc cho phép môi trường bên ngoài tác động lên các dữ liệu nội tại của một đối tượng theo cách nào

là hoàn toàn tùy thuộc vào người viết mã Đây là tính chất đảm bảo sự toàn vẹn của đối tượng

 Tính đa hình (Polymorphism): Thể hiện thông qua việc gửi các thông điệp (Message) Việc gửi các thông điệp này có thể so sánh như việc gọi các hàm bên trong của một đối tượng Các phương thức dùng trả lời cho một thông điệp sẽ tùy theo đối tượng mà thông điệp đó được gửi tới sẽ

có phản ứng khác nhau Người lập trình có thể định nghĩa một đặc tính (chẳng hạn thông qua tên của các phương thức) cho một loạt các đối tượng gần nhau nhưng khi thi hành thì dùng cùng một tên gọi mà sự thi hành của

mỗi đối tượng sẽ tự động xảy ra tương ứng theo đặc tính của từng đối

tượng mà không bị nhầm lẫn

 Tính kế thừa (Inheritance): Đặc tính này cho phép một đối tượng

có thể có sẵn các đặc tính mà đối tượng khác đã có thông qua kế thừa Điều

này cho phép các đối tượng chia sẻ hay mở rộng các đặc tính sẵn có mà

không phải tiến hành định nghĩa lại Tuy nhiên, không phải ngôn ngữ định

hướng đối tượng nào cũng có tính chất này

1.1.12 Giới thiệu về Twitter Bootstrap

 Giới thiệu về Twitter Bootstrap

 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 Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid)

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

 Tại sao lại 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.Twitter Bootstrap đị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.Twitter Bootstrap còn

hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu

chuộng trong thời gian gần đây

 Cách sử dụng Twitter Bootstrap

Tải Bootstrap tại đây: http://twitter.github.io/bootstrap/

Sau khi tải về, bạn sẽ có một file Zip Tiến hành giải nén ta có một

thư mục có tên bootstrap, bên trong có 3 thư mục : css, img, js

Hình 1.1: Cấu trúc thư mục của bootstrap

Bước 1: Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap vừa giải nén phía trên

Hình 1.4: Ví dụ về Bootstrap

Vậy là xong Ví dụ chỉ đơn giản vậy thôi

Bạn sẽ thắc mắc là sao chạy nút submit và reset lại không nằm xuống phía dưới?