Khóa luận tốt nghiệp Toán tin: Blog dùng Ajax

Mặc dù kiến thức trong đồ án này chỉ là một phần nhỏ trong kho tàng kiến thức của chuyên đề lập trình web với kỹ thuật Ajax nhưng đối với em đó là một thành tựu tuyệt vời.. Em xin chân t

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM TP.HCM

KHOA TOÁN - TIN

BỘ MÔN TIN

ĐÔ ÁN TÓT NGHIỆP:

BLOG DỪNG AJAX

Sinh Viên Thực Hiện:

Phan Lưu Quốc Nhựt Giáng Viên Hướng Dẫn:

Lời cảm ơn

Sau gần hai tháng làm việc cật lực cuối cùng thì em cũng đã hoàn thành được đồ

án tốt nghiệp của mình Mặc dù kiến thức trong đồ án này chỉ là một phần nhỏ trong kho tàng kiến thức của chuyên đề lập trình web với kỹ thuật Ajax nhưng đối với em đó

là một thành tựu tuyệt vời Đó là thành quả của gần hai tháng trời nghiên cứu học tập.

Và xa hơn nữa chính là kết quả của bốn năm đèn sách dưới mái trường Đại Học Sư

Phạm.

Có được thành tựu dù không lớn lao nhưng nó cũng đã thể hiện phan nào sự cố

găng của bản thân cũng như sự chỉ bảo tận tình của các thầy cô đã dạy bảo em trong suốt thời gian học vừa qua Em xin chân thành cảm ơn đến tất cả các thầy cô trong Khoa Toán Tin đặc biệt là To Bộ môn Tin Học đã tận tình chi bảo truyền đạt những kinh nghiệm kiến thức cho chúng em dé chúng em có được những co sở kiến thức cần thiết hoàn thành đồ án này Những kỷ niệm những ân tình mà thầy Quang Tắn, thầy Ngọc Trung, thầy Bảo đối với chúng em sẽ mãi là những kỷ niệm đẹp chúng em sẽ

mãi không bao giờ quên Vượt lên trên cả em xin chân thành cảm ơn thầy Lý Anh

Tuan, thay đã hướng dẫn em hoàn thành tốt đồ án này Thay đã cung cấp cho em rat nhiều tài liệu hỗ trợ cũng như kinh nghiệm lập trình cần thiết để vượt qua những khó khăn do hạn chế về chuyên môn cũng như kinh nghiệm lập trình của bản thân em Mặc

dù thầy có rất nhiều công việc nhưng mỗi lần chúng em gặp những vướng mắc thầy luôn sẵn sàng gặp mặt dé giúp đỡ.

Tuy đã rất cố gắng nhằm đạt được những gì tốt nhất cho đồ án này nhưng do kiến thức có hạn nên đồ án này nhất định sẽ có những khiếm khuyết cần được sửa

chữa Kính mong các thầy cô cùng các bạn đọc thông cảm và nhiệt tình đóng góp những ý kiến nhằm khắc phục những khiếm khuyết của đồ án Qua đó em sẽ củng cố lại kiến thức của mình khắc phục lại những sai lầm cũ làm cho đồ án này được mới mẽ

hơn, hữu ích hơn

Một lần nữa em xin gửi lời cảm ơn đến tất cả các thầy cô đã dạy bảo em trong suốt thời gian qua Sự dạy bảo đóng góp của các thầy cô chính là những nền tảng cơ bản nhất giúp chúng em có đủ tự tin trên bước đường hoàn thiện kiến thức của mình.

Mục lục

Chương 1 Giới thiệu T1 10 ÔÒỎ 4

1.1 Cơ sở của đồ án: Ÿ cas oaeeven cones swnedncuminut rensieasunnvecentevansnesenen at suman nuedsneneuanionveanoonnennsnne 4

1.2, Mục tiêu của dd ains ssesccessssssssssscoscssssssesesseessssssessrscesssssssssusceuesseessossstusensaees 5

1.3 Pham vi của đố fi trnunuetontostiotg(0i60148558800000001G4GIG0840/038300G34G09V2001400/18880G.NGE 5

1.4 Cau tritc ctta d6 amt ooecceeccecccescescsesssesssecssessecssessssssscsuccscssscsucssscsuecasessecsscsnecsscese 5

Chuong2 Khảo sát những vấn dé kỹ thuật liên quan 2- ©5252 6

2.1 Định nghĩa Ajax: Ăn HH HT HT nh TH HT th ch 6

2.2 Xử lý HTTP Request: «5< Sàn ng ngư 623: Xirly Server Response ? cucaicctttttitittitttqqGdtltttiildWgfigtgtiqugass 9Chuong 3 Lap trình Web dùng kỹ thuật Ajax -cccccccccereeerrirrriee 10

3.1 _ Cài đặt các phần mềm cần thiết: -2- 2-22 +++£+e£+zrvxzvrxxerrxrrreee 103.2 Xây dựng trang Web (Blog dùng ÀjaxX): cccScSSseiereerr.ee 15

3.2.1 Mô tả đồ án: sen HH re l5

322 Thiếtkế 66 90 đữ HếtfnsssseoandaadgoioolintasooesOEOISEDSUABEHHES 15

323 Thiết kt cấp Chúc HÁN lusssessesesesrosedisdoioteiebsdsool0rhGlgVtsaoldSsoiggHiae 17 3.3 Kỹ thuật: sử dụng kỹ thuật Ajax dé hiển thị, cập nhật và chỉnh sửa từng bài

viết 20

Chuong 4 Doan Code cho ứng dụng minh họa Ăn eeeerereerree 20

4 l1 THICKE Hững “Inde DD” ssoscouiarnanougoanonddiiguosunntgdlaouaieadane 20 4.2 Thiết kế trang “blog.php” xử lý ở SerVer: -scccscccceesrrierrrree 21 4.3 Thiết kế trang “blog.js” xử lý ở Client: -sc-scccccscrscxerrerree 26 4.4 Thiết kế trang “copyResizelmage.php” dé xử lý lại kích thước của ảnh trước

1050 34

4.5 Thiết kế trang “Juuanh.php” dé lưu đường dẫn của ảnh xuống cơ sở dir liệu 35

Chương5 Đánh giá dé tài và đề xuất hướng phát triển kế tiếp . - 35

5.1 Những kết quả đã đạt được -. ¿-«+©2-e©cxtExeeEkxecrerrrkecrkrrrrrrree 35

5.2 Đề xuất hướng phát triển 2-2-©2©c+z©cszcreerxerverrxerrxrrrerrsrrreee 36

5.3 Danh mục tài liệu tham khảo G <5 + ch HH HH ng kg 36

Chương Í Giới thiệu về đồ án.

1.1 Co sd của dé an:

Chúng ta đang sống trong thời kỳ bùng nỗ công nghệ, bùng nỗ thương mai

điện tử, bùng nỗ ứng dụng trên Internet Một cuộc cách mạng thực sự đang diễn ra,

cuộc cách mạng đó mang tên Web 2.0 Một trong những điểm cách mạng của Web 2.0

là cho phép người dùng tùy biến và thao tác nhiều hơn.

Điễn hình là công nghệ AJAX Đóng vai trò trung gian giữa người dùng và

máy chủ, AJAX chỉ nhận những thông tin cần thiết và một khi dữ liệu đã tải về thì bạn

không cần phải tương tác với máy chủ Tương tác giữa phần giao diện và AJAX là

tương tác nội bộ bên trong trình duyệt Ứng dụng nỗi bat của AJAX là Gmail và

Google Maps Trong Gmail, bạn sử dụng bàn phím chứ không phải dùng chuột để chọn

nhiều email Những tác vụ như chuyên từ thư mục này sang thư mục khác được thực

hiện rất nhanh chóng Trong Google Maps, bạn có thê phóng to, thu nhỏ ảnh, di chuyên quanh bản đồ mà không phải chờ đợi tí nào Bạn có cảm giác đang tương tác với phần mềm chạy trên máy mình vậy.

AJAX là viết tắt của Asynchronous JavaScript and XML — kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:

-Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang.

-Phân tách và làm việc với XML

1.2 Mục tiêu của đồ án:

s* Khao sát việc lập trình Web dùng Ajax

Xây dựng tài liệu tham khảo cho sinh viên về chủ đề lập trình Web dùng kỹ

thuật Ajax

s* Xây dựng một ứng dụng nhỏ minh họa (Blog dùng Ajax)

143 Pham vi của dé an:

s% Giới thiệu về lập trình Ajax.

“+ Tìm hiểu cách xây dựng ứng dụng Web dùng kỹ thuật Ajax.

s* Xây dựng ứng dụng minh họa

1.4 Cấu trúc của đồán:

es Chương 1: Giới thiệu về đồ án Chương này trình bày những mục sau: Cơ sở

+ À z on + Re Oo he A ; > Re

của do án, mục tiêu của do án, phạm vi của đồ án, câu trúc của đô án.

œ Chương 2: Khảo sát những van dé kỹ thuật liên quan Khảo sát những van dé

sau: Định nghĩa Ajax, Xử ly HTTP Request, Xử lý Server Respone

« Chương 3: Lập trình Web dùng kỹ thuật Ajax Chương này sẽ giới thiệu: cài đặt

các phần mềm cần thiết cho đồ án, xây dựng trang Web(Blog dùng Ajax).

‹ Chương 4: Doan Code cho ứng dụng minh họa (Blog dùng Ajax) thiết kế 3

trang : index.php, blog.php, blog.js.

es Chương 5: Đánh giá đồ án và dé xuất hướng phat triển kế tiếp Chương này

trình bày hai phần: Một là trình bày những kết quả đã đạt được, hai là đề xuất

hướng phát trién.

œ Danh mục tài liệu tham khảo: Trinh bày những tài liệu tham khảo hỗ trợ cho

việc hoàn thành đồ án này.

Chương 2 Khảo sát những vấn đề kỹ thuật liên quan

2.1 Định nghĩa Ajax :

AJAX là viết tắt của Asynchronous JavaScript and XML - kỹ thuật kết hợp hai

tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:

-Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang.

-Phân tách và làm việc với XML.

2.2 Xử lý HTTP Request:

-Dé gửi một HTTP Request đến Server bằng JavaScript, bạn cần tạo một đối tượng của lớp cung cấp tính năng này Trong IE thì lớp này tồn tại dưới dạng một đối tượng ActiveX có tên là XMLHTTP Đối tượng này có từ IE 4.0.

Var httpRequest = new ActiveX Object(“Microsoft.XMLHTTP”);

-Néu MSXML được cài đặt thi ban cũng thé gọi:

Var httpRequest = new ActiveXObject(“Msxml2.KMLHTTP”);

-Ở Mozilla, Firefox, Opera 8.0, Safari và các trình duyệt khác thi lớp này có tên

là XMLHttpRequest Đối tượng XMLHttpRequest không phải là một chuẩn củ W3C (tương lai có thé được W3C chấp thuận) Đối tượng XMLHttpRequest được hỗ trợ ở

IE 5.0+, Safari 1.2+, Mozilla 1.0+/Firefox, Opera 8.0+ và Netscape 7+

Var httpRequest = new XMLHttpRequest();

-Do sự khác biệt nay, nên dé ứng dung của ban chạy trên nhiều trình duyệt thi bạn có thê làm như sau:

If(window.XMLHttpRequest) { // Mozilla, Safari,

httpRequest = new XMLHttpRequest();

window.ActiveXObject Ví dụ:

If (window.ActiveXObject) {xmlhttp = new

ActiveX Object(““Microsoft.XMLHTTP”)} else { }

-Một số phiên bản của trình duyệt Mozilla không làm việc đúng khi nhận đáp trả

từ Server không có header chứa XML mime-type Để khắc phục vấn đề này, bạn có

thể sử dụng phương thức định nghĩa lại phần header do server gửi đến trong trường

hợp nó không phải là text/xml.

httpRequest = new XMLHttpRequest();

httpRequest.overrideMimeType(text/xml)

-Tiép theo, bạn cần xác định muốn làm gì sau khi nhận được đáp trả (response)

từ server Giai đoạn này, bạn chỉ cần báo cho đối tượng HTTP request biết hàm

JavaScript sẽ làm công việc xử lý đáp trả Điều này được thực hiện bằng cách thiết lập thuộc tính onreadystatechange của đối tượng thành tên của hàm JavaScript:

httpRequest.onreadystatechange = nameOfTheFunction;

-Chú ý không dùng cặp ngoặc đơn () sau tên hàm va không truyền tham số vào

hàm đó Thêm nữa, thay vì trao tên ham thì bạn có thé sử dụng kĩ thuật định nghĩa

một số trình duyệt như Firefox có thé không xử lý request.

-Tham số thứ hai là địa chỉ URL của trang mà bạn gửi request đến Do thiết lập bảo mật, bạn không thẻ gọi các trang trên tên miền của bên thứ ba Chú ý là nếu bạn

không gọi đúng tên miễn trên tất cả các trang thì bạn sẽ nhận được thông báo

permission denied khi gọi open()

-Tham số thứ ba xác lập request có bat đối xứng hay không (asynchronous) Nếu

TRUE, thì việc thực thi hàm JavaScript sẽ tiếp tục trong khi response của server chưa

đến Đây là chữ A trong AJAX.

-Tham số gửi đến phương thức send() có thé là bat cứ dữ liệu nào mà bạn muốn gửi tới server nếu bạn ding phương thức POST để gửi request Dữ liệu sẽ có dạng của một chuỗi truy van:

name=value&anothername=othervalue&so=on

-Đối tượng XMLHttpRequest có một tập các thuộc tinh dùng chung trên tat cả

các môi trường hỗ trợ Dưới đây là danh sách các thuộc tính chủ yếu của đối tượng

-Hãy xem hàm này nên làm gì Đầu tiên, hàm cần kiểm tra trạng thái của

request Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã nhận được

response đầy đủ từ server và đó là dấu hiệu tốt đẻ bạn tiếp tục xử lý nó.

if (httpRequest.readyState == 4) {

/! không xảy ra vấn dé gì và bạn đã nhận được response

} else { // chưa sẵn sang}

-Tiép theo cần kiểm tra mã trạng thái của HTTP server response Tat cả các mã

có thể thàm khảo ở site của W3C Trong bài viết này, chúng ta quan tâm đến response

-Sau khi đã kiểm tra trạng thái của request và mã trạng thái của HTTP response,

việc xử lý dữ liệu mà server gửi tới tùy ở bạn Bạn có hai lựa chọn:

* httpRequest.responseText - trả lại dưới dạng chuỗi văn bản

+ httpRequest.responseXML - trả lại dưới dạng đối tượng XMLDocument và bạn có

thể duyệt bằng cách sử dụng các hàm JavaScript DOM

Chương 3 Lập trình Web dùng kỹ thuật Ajax

3.1 Cài đặt các phần mèm cần thiết:

Cài đặt Xamp

Bước l:mở gói Xamp xuất hiện hộp thoại sau:

Bước 2:chon một ngôn ngữ->chọn OK.Xuat hiện hộp thoại sau:

-10-Welcome to the XAMPP 1.5.1 Setup

computer.

Cick Next to continue.

Bước 3:chon Next.xuat hiện hộp thoại sau:

SE KAMEN 1 S5 1 Setup

Choose Install Location

Choose the fokdier in which Co install XAMPP 1.5.1

Setup wil vxstoð XAMPP 1.5.1 in the following folder To install in a cCWffeverw folder, click

Browse and solect another fclckev, Click Install to stert the installstion.

=] =

Nufoft Inst at Syshem v2.09

Completing the XAMPP 1.5.1 Setup

Wizard

XAMPP 1.5.1 has been instaled on your commter

Click Finish to dose this wizard.

Bước 5:chon nút Finish.xuat hiện thông báo :

=2-ta chọn Yes.sẽ xuất hiện tiếp thông báo:

CØ XAMPP 1.5 1 Setup

Install Apache 2 as service?

ta chon Yes.sé xuat hién :

C:AWRIDOWS System 3 2\cmd.exe

sau đó xuất hiện thông báo:

© KAMPP 1.5.1 Setup

Apache 2 Service was installed successfully! (Ports: 60 + 443)

ake

ta chon OK.Xuất hiện thông báo:

Install MySQL as service?

Cos") Cw)

Ta chon yes sé xuất hiện.

CAWMDOWS System 3 2\cmd.exe

sau đó xuất hiện thông báo:

© XAMPP 1.5.1 Setup

MySQL Service was installed successfully! Port: 3306)

-14-Fke7fa FIP service seems to be installed! Abort.

Blog là một loại nhật ký cá nhân trên Web Khi login vào account của mình, người

dùng có thé viết nhật ký, gởi hình, chỉnh sửa bai đã gửi Ngoài ra, người dùng có

thể cung cap địa chỉ dé bạn bè vào xem, người xem không có quyền chỉnh sửa.

3.2.2 Thiết kế cơ sở dữ liệu:

Tạo cơ sở dữ liệu dé lưu trữ các thông tin về bài viết, bảng dữ liệu nay có tên là

“dulicu” gom có 6 ficld ta thực hiện như sau:

-Bước 1: cho chạy gói xampp, chọn các mục:

-Bước 3: trong mục Create new database ta đặt tên chứa bảng dữ liệu này Ở đây

chon là “dulieu” Trong mục collation ta chọn “utf8_general_ci” dé lưu được tiếng

Việt Chon Create

-Bước 4: trong mục Create new table on database ta chọn :

+Name: dulieu

+Number of fields:6

-Bước 5:

+ trong mục Field: ta đặt tên.

+ trong mục Type: ta chọn kiểu phù hợp.

+ trong mục Length/Values :ta gõ vào số chiều dai.

+ trong mục Collation ta chọn: utf8_general_ci cho các mục mà Type là VARCHAR

hoặc LONGTEXT

+Trong mục Null: ta chon null hoặc notnull là tùy vào việc xác định yêu cầu.

+Trong mục: Extra ta chọn auto_increment cho Field là id dé cập nhật số tăng tự

với account là username”admin” và password”admin”.

Khi đăng nhập đúng username và password , click vào nút đăng nhập ta sẽ thấy

xuất hiện thêm các nút “Viét Bai”, “Chinh Sửa", như giao diện sau:

Click vào nút “Viết Bài” ta thấy xuất hiện giao diện:

-Chon nút “Browse” sẽ cho phép ta chèn hình.

-Ngày:sẽ lấy theo ngày của hệ thống.

-Chủ dé, Tác già, Nội dung ta nhập vào:

-Néu ta chon nút “Chap nhận” thì bài viết sẽ được gởi xuống dữ liệu.

-Nút “Hủy bỏ” sẽ xóa hết nội dung mà ta đã viết.

% Để sửa bai đã viết thì ta chọn “tên bài” rỗi nhấn nút “Chinh sửa” dé tiến hành

sửa bài, giao diện như sau:

-18-nội dung Sau khi sửa xong chọn nút “Cập nhật” dé bài viết được gửi xuống cơ sở

đữ liệu

Nếu không muốn dữ lại bài viết này nữa thì chọn nút “Xóa" dé bài viết đựoc xóa

khỏi cơ sở dữ liệu

$% Xây dựng nút “Xem Bai” :cho phép bạn bè vào xem các bài đã viết nhưng

không có chức năng viết bài, chỉnh sửa bài đã viết, chèn hình như giao diện sau:

‘Aen Do An -Blog Dung Ajax “

“~ a [rani gg Vie Mune Dấ hạ lý Anh Tạệp {

# : Password: ie Sigh Vien “Lhực Hien: Phan | an Quoc bu: Ũ

Internet N(ột cuộc c tine tự dang diễn ra, Cue cách mạng đổ iting tên Web2.0, Mùa ta nấm

2001 đã dish din bước ngoặt lớa trong ích sik phát triển Web, Cùng với tốc độ phất triển mặt của

ung dụng, sy sith sti cồa các se mới, sư bug thinh của các công ty, mộÊkỉ nguyéd mới đã radi Ky 5

'Web2 0 Web20 khác g với Webl.0 Tai sao lạ phân biệt nhờ Yậy? Dita là bản chất của sự "thay da đổi thí”

_ nảy? Thể bệ St thể hệ mới tạo nên bộ mặt của Wcb2 0 Thế hệ đó là Google Adsense thay thể

Dodbleckcx rong ch vực quảng cáo, là Flickr thay Oftto tr vực chia sé ảnh, là BitTorrent thay |”

Akamai trong chưa sẽ ati dung, là Đại bách khoa toàn thu Wiltipeca thay Britannica Orlee, là Blog thay

Cg bgglọ tong dờ HỂng ch wing dle ng at, bogs tog ng †

các

Click vào nút “Thoát” sẽ cho phép ta trở về giao điện ban đầu như sau:

THU VIỄN |

tưởng Đại-Học $