Tải bản đầy đủ (.pdf) (50 trang)

MỘT SỐ CHUYÊN ĐỀ LẬP TRÌNH WEB VỚI PHP và CSDL

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.72 MB, 50 trang )

CHƯƠNG 5: MỘT SỐ CHUYÊN ĐỀ LẬP TRÌNH WEB
VỚI PHP và CSDL
1.
2.
3.
4.
5.

Ajax
File Upload
PHP Mailer
Paging
MVC

18/09/2022

Lập trình Web

1


LẬP TRÌNH AJAX-PHP

18/09/2022

Lập trình Web

2


5.1. Ajax


5.1.1. Một số Khái niệm cơ bản
JavaScript là gì? JavaScript là ngơn ngữ lập trình phổ biến
trong số 3 ngơn ngữ chính của lập trình web:
 HTML: Giúp bạn thêm nội dung cho trang web.
 CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của
trang web.
 JavaScript: Cải thiện cách hoạt động của trang web.
<script language="javascript">
    alert("Hello World!");
</script>


Hoặc <script language="javascript" src="demo.js"></script>
18/09/2022

Lập trình Web

3


5.1. Ajax
5.1.1. Một số Khái niệm cơ bản
jQuery là gì?
jQuery là một thư viện được xây dựng từ
Javascript nhằm giúp lập trình viên xây dựng
những chức năng có sử dụng Javascript trở nên
dễ dàng hơn. jQuery được sử dụng đến 99% trên
tổng số website trên thế giới (trừ những website
sử dụng JS Framework).


18/09/2022

Lập trình Web

4


5.1. Ajax
5.1.1. Một số Khái niệm cơ bản
XML là gì?
XML (eXtensible Markup Language): Ngôn ngữ Đánh dấu Mở
rộng") là ngôn ngữ đánh dấu với mục đích chung do W3C đề
nghị, để tạo ra các ngơn ngữ đánh dấu khác. Đây là một tập con
đơn giản của SGML, có khả năng mơ tả nhiều loại dữ liệu khác
nhau. Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ
liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được
kết nối với Internet. 
Ví dụ khi bạn xây dựng một ứng dụng bằng C# và một ứng dụng
bằng PHP thì hai ngơn ngữ này khơng thể hiểu nhau, vì vậy ta sẽ
sử dụng XML để trao đổi dữ liệu.
18/09/2022

Lập trình Web

5


5.1. Ajax
5.1.1. Một số Khái niệm cơ bản
XML là gì?


18/09/2022

Lập trình Web

6


5.1. Ajax
5.1.2. Ajax
AJAX là thuật ngữ viết tắt của Asynchronous Javascript
and XML ( JS và XML khơng đồng bộ).
AJAX có thể đọc là “trao quyền cho javascript” và thông qua
js để cung cấp một cơng nghệ phía client-script để gọi ngầm
một lệnh background để phía server thực hiện và nhận
thơng tin trả về, update thông tin của trang nhanh mà không
cần phải load lại cả trang, rất mất thời gian load lại những
cái khơng cần update.

18/09/2022

Lập trình Web

7


5.1. Ajax
5.1.2. Ajax
Ví dụ: Để kiểm tra nickname đã tồn tại trong cơ sở dữ liệu
hay chưa thì khi thành viên vừa nhập xong nick name,

thông tin trên form lập tức javascript nắm thông tin rồi thực
hiện gọi một hàm bằng PHP bên phía server để kiểm tra
thơng tin sau đó trả kết quả html về cho javascript xuất ra
cho người dùng biết tính hợp lệ của nickname, lúc đó
ngươid ùng có thể thay đổi ngay chớ khơng cần đợi submit
rồi kiểm tra và nhập lại như dùng PHP truyền thống.

18/09/2022

Lập trình Web

8


5.1. Ajax
5.1.2. AJAX hoạt động như thế nào?
AJAX không phải dùng một công nghệ duy nhất, cũng không phải
ngôn ngữ lập trình. AJAX là một bộ kỹ thuật phát triển web. Bộ hệ thống
này bao gồm:
 HTML/XHTML làm ngơn ngữ chính và CSS để tạo styles.
 The Document Object Model (DOM) để hiển thị dữ liệu động và tạo
tương tác.
 XML để trao đổi dự liệu nội bộ và XSLT để xử lý nó. Nhiều lập trình viên
đã thay thế bằng JSON vì nó gần với JavaScript hơn.
 XMLHttpRequest object để giao tiếp bất đồng bộ.
 Cuối cùng, JavaScript làm ngơn ngữ lập trình để kết nối tồn bộ các
cơng nghệ trên lại.

18/09/2022


Lập trình Web

9


5.1. Ajax
5.1.2. AJAX hoạt động như thế nào?


Quy trình cơ bản của AJAX.

Mơ hình thơng thường
1. HTTP được gửi từ trình
duyệt lên máy chủ.
2. Máy chủ nhận, sau đó
phản truy xuất thông tin.
3.Server gửi dữ liệu được
yêu cầu lại cho trình duyệt.
4.Trình duyệt nhận dữ liệu
và tải lại trang để hiển thị
dữ liệu lên.
Người dùng phải đợi kết
thúc quá trình, điều này gây
tốn thời gian và làm tăng
tải lượng lên server.

18/09/2022

Mơ hình AJAX
1.Trình duyệt tạo một lệnh

gọi JavaScript để kích
hoạt XMLHttpRequest.
2.Ở dưới nền, trình duyệt
tạo một yêu cầu HTTP gửi
lên server.
3.Server tiếp nhận, truy
xuất và gửi lại dữ liệu cho
trình duyệt.
4.Trình duyệt nhận dữ liệu
từ server và ngay lập tức
hiển thị lên trang. Khơng
cần tải lại tồn bộ trang..

Lập trình Web

10


5.1. Ajax
5.1.2. AJAX hoạt động như thế nào?
Quy trình cơ bản của AJAX.
Ajax đóng vai trị như là một lớp trung gian giữa giao diện trên trình duyệt
và máy chủ xử lý thơng tin. Có thể mơ tả cách thức hoạt động của Ajax
như sau:
 Ajax thực hiện tương tác với máy chủ bằng cách sử dụng đối tượng
XMLHttpRequest, nhận kết quả về dưới dạng XML và phân tích kết quả
bằng công nghệ DOM.
 Tương tác giữa Ajax và giao diện người dùng được thực hiện thông
qua các mã Javascript và XHTML + CSS.



18/09/2022

Lập trình Web

11


5.1. Ajax
5.1.2. Ajax
Cũng như bất kỳ công nghệ khác, AJAX có thể bị sử dụng
q nhiều trong một website, vì họ chỉ thấy những ưu điểm
mà AJAX mang lại mà không quan tâm đến những khuyết
điểm của AJAX. Mục tiêu cuối cùng của AJAX là mang lại
trải nghiệm tốt nhất cho người dùng, thu hút khách hàng
dùng website.

18/09/2022

Lập trình Web

12


5.1. Ajax
5.1.2. Ajax - Ưu điểm:








Callbacks: Ajax được sử dụng để thực hiện một cuộc gọi lại. AJAX thực hiện
việc truy xuất và / hoặc lưu dữ liệu mà khơng gửi tồn bộ trang trở lại máy chủ.
Bằng cách gửi lại một phần trang web đến máy chủ, việc sử dụng mạng được
giảm thiểu và các hoạt động diễn ra nhanh hơn. Trong các trang web băng
thơng hạn chế, điều này có thể cải thiện đáng kể hiệu suất mạng. Dữ liệu được
gửi đến và đi từ máy chủ một cách tối thiểu.
Thực hiện các cuộc gọi không đồng bộ: Ajax cho phép bạn thực hiện các
cuộc gọi không đồng bộ đến một máy chủ web. Điều này cho phép trình duyệt
của người dùng tránh phải chờ tất cả dữ liệu đến trước khi cho phép người
dùng hành động một lần nữa.
Thân thiện với người dùng: Vì khơng phải post lại trang lên server, các ứng
dụng hỗ trợ Ajax sẽ luôn nhanh hơn và thân thiện với người dùng hơn.
Tăng tốc độ: Mục đích chính của Ajax là cải thiện tốc độ, hiệu suất và khả
năng sử dụng của một ứng dụng web. Một ví dụ tuyệt vời của Ajax là tính
năng xếp hạng phim trên Netflix. Người dùng đánh giá một bộ phim và xếp hạng
cá nhân của họ cho bộ phim đó sẽ được lưu vào cơ sở dữ liệu của họ mà
không cần chờ trang làm mới hoặc tải lại.

18/09/2022

Lập trình Web

13


5.1. Ajax
5.1.2. Ajax - Nhược điểm:






Tính khơng tương thích của trình duyệt: AJAX phụ thuộc nhiều vào
JavaScript được triển khai khác nhau cho các trình duyệt khác nhau. Điều này
hóa ra là một trở ngại đặc biệt là khi AJAX phải hoạt động trên nhiều trình duyệt.
Các trình duyệt khơng hỗ trợ JavaScript hoặc tắt tùy chọn JavaScript sẽ không
thể sử dụng chức năng của nó.
Khơng an tồn: Trang web có thể khó gỡ lỗi, tăng kích thước mã của trang
web của bạn và khiến trang web của bạn dễ bị đe dọa bảo mật nghiêm trọng.
Bookmark: Khi người dùng muốn bookmark một trang lại thì khi sử dụng ajax
sẽ ảnh hưởng đến người dùng vì khơng thể bookmark lại trang có ajax được. 

18/09/2022

Lập trình Web

14


5.2. Sử dụng AJAX trong Javascript
5.2.1 Tìm hiểu về XMLHttpRequest
Đối tượng XMLHttpRequest là trái tim của lập trình Ajax nghĩa
là  XMLHttpRequest chính là đối tượng được dùng để gửi
request và nhận response.
 Các bước khởi tạo đối tượng Ajax:
 Bước 1: Tạo đối tượng (object) XMLHttpRequest:


18/09/2022

Lập trình Web

15


5.2. Sử dụng AJAX trong Javascript
5.2.1. Tìm hiểu về XMLHttpRequest
Tạo một ứng dụng Ajax

18/09/2022

Lập trình Web

16


5.2. Sử dụng AJAX trong Javascript
5.2.1. Tìm hiểu về XMLHttpRequest
Bước 1: Kiểm tra trình duyệt

18/09/2022

Lập trình Web

17


5.2. Sử dụng AJAX trong Javascript

5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính
a. Thuộc tính onreadystatechange
• Sau khi một u cầu gởi đến máy chủ, chúng ta cần một hàm


18/09/2022

để tiếp nhận dữ liệu được máy chủ trả về.
Thuộc tính onreadystatechange lưu giữ hàm này, hàm sẽ xử lý
dữ liệu trả về từ máy chủ.

Lập trình Web

18


5.2. Sử dụng AJAX trong Javascript
5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính
b. Thuộc tính readyState
• Thuộc tính readyState lưu giữ trạng thái phản hồi của máy chủ.
Mỗi lần readyState thay đổi, hàm onreadystatechange sẽ được
thi hành.
• Đây là những giá trị hợp lệ cho thuộc tính readyState:

18/09/2022

Lập trình Web

19



5.2. Sử dụng AJAX trong Javascript
5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính

18/09/2022

Lập trình Web

20


5.2. Sử dụng AJAX trong Javascript
5.2.2 Tìm hiểu về XMLHttpRequest – thuộc tính
c. Thuộc tính responseText
• Dữ liệu được gởi trả về từ máy chủ có thể được tiếp nhận với
thuộc tính responseText.
• Trong đoạn mã, chúng ta sẽ đặt giá trị của trường văn bản “check"
bằng với responseText:

18/09/2022

Lập trình Web

21


5.2. Sử dụng AJAX trong Javascript
5.2.1 Tìm hiểu về XMLHttpRequest – Thuộc tính
d. status: Trả về trạng thái của request. VD: 
        200: "OK"

         403: "Forbidden"
         404: "Not Found"
e. statusText: Trả về trạng thái của request dưới dạng text.
VD: Ok, Not Found.

18/09/2022

Lập trình Web

22


5.2. Sử dụng AJAX trong Javascript
5.2.2 Tìm hiểu về XMLHttpRequest – phương thức
 AJAX - Gởi yêu cầu đến máy chủ
Để gởi ngầm một yêu cầu đến máy chủ, chúng ta sử dụng
phương thức open() và send().

18/09/2022

Lập trình Web

23


5.2. Sử dụng AJAX trong Javascript
5.2.2 Tìm hiểu về XMLHttpRequest – phương thức
 Phương thức open() nhận ba tham số.
• Tham số đầu tiên định nghĩa cách thức nào được sử dụng khi
gởi yêu cầu (GET hoặc POST).

• Tham số thứ hai chỉ ra đường dẫn của tập tin mã kịch bản phía
máy chủ.
• Tham số thứ ba chỉ ra u cầu có thực hiện bất đối xứng hay
khơng.

18/09/2022

Lập trình Web

24


5.2. Sử dụng AJAX trong Javascript
5.2.2 Tìm hiểu về XMLHttpRequest – phương thức
 AJAX - Mã kịch bản ASP phía máy chủ





Giờ đây chúng ta sẽ tạo mã kịch bản hiển thị thời gian hiện hành
của máy chủ.
Thuộc tính responseText (đã giải thích trước đây) sẽ lưu giữ dữ liệu
được trả về từ máy chủ. Ở đây chúng ta muốn gởi trở lại user
name.
Tạo tập tin process.php như sau:

echo 'lequan';
?>


18/09/2022

Lập trình Web

25


×