if you walk the footsteps of a stranger you'll learn things you never knew, you never knew: 2020

11/16/20

Bootstrap

-Bootstrap là thư viện bao gồm framework html, css, javascript cho phép thiết kế web có tính năng responsive xem trên tablet, mobile. Tương thích với hầu hết các trình duyệt web phổ biến, còn IE > version 10.

-Thiết kế 1 web căn bản bao gồm các thành phần Navbar, nội dung-content và phần footer.

+code css định dạng ảnh, footer

.image img{

height: 300px;

width: 100%;

}

.image img{

background-color: white;

margin-top: 20px;

}

.footer{

background-color: yellowgreen;}

+ Bên trong containter:

+div class: menu

+div class: content

+div class: footer

</div>

9/13/20

Chú thích trong html

chú thích trong html ta dùng <--!-->, trong visual code có thể dùng tổ hợp phím ctrl + /

Các thẻ định dạng văn bản html

<i>dinh dang in nghieng</i><br>

<s>dinh dang gach ngang</s><br>

<big>dinh dang chu to hon thuong</big><br>

<small>dinh dang chu nho hon thuong</small>

2<sup>4</sup>=16 dinh dang chu nho nam o nua tren<br>

bbb <sub>aaa</sub> dinh dang chu nho nam o nua duoi<br>

<pre>giu

nguyen

dinh dang van ban

</pre>

<hr> //tao duong ke ngang ngan cach van ban

Tiêu đề trong html

-Dòng chữ nổi bậc cho đoạn văn bản là heading

-Có 6 cặp thẻ dùng cho tiêu đề là <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

<h1>Heading 1</h1> //lớn nhất

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6> //nhỏ nhất

Đoạn văn bản trong HTML

-đoạn văn bản được đăt trong thẻ <p>

-khoảng trắng trong đoạn văn bản ta dùng:  

<p>lap trinh</p>

-xuống dòng ta dùng thẻ <br>

<p>lap trinh doan<br> van ban</p>

-căn lề cho đoạn văn bản ta dùng thuộc tính align="center/justify/left/right"

Mặc định đoạn văn bản được căn lề trái.

Cấu trúc trang web

Một trang web php được thiết kế gồm các thẻ (tag)

-các loại thẻ:

+thẻ mở đầu: <body>

+thẻ kết thúc </body>

+thẻ đặc biệt <meta>, <img>

+thẻ đơn: <b>in dam van ban</b>

+thẻ phức: <font size="20" color="red" face="arial">dinh dang kich co chu , mau chu, kieu font</font>

<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML page</title>
</head>
<body>
<h1>Hoc HTML</h1>
<font size="20" color="red" face="arial">Cau truc 1 trang HTML</font>
</body>
</html>

Cấu trúc 1 project PHP

Trong project PHP

---Mywebsite (root)

folder::

+images: chứa nội dung ánh web

+css: chứa thư viện css

+js : chứa thư viện javascript hay jquery

+images: chứa nội dung ánh web

Files:

+menu.html

+gioithieu.html

+dichvu.html

+sanpham.html

+tintuc.html

+tuyendung.html

+lienhe.html

8/9/20

Hướng dẫn cơ bản vể .htaccess

https://secure.vinahost.vn/ac/knowledgebase/135/Hng-dn-c-bn-v-HTACCESS-va-cac-chc-nng.html

8/8/20

Thêm giỏ hàng (add cart) cho project bán hàng

Tính năng thêm giỏ hàng có rất nhiều thuật toán code dựa vào cách lưu trữ và tư duy của coder.

Chúng ta dùng mảng SESSION để lưu thông tin mã hàng + số lượng. Ví dụ đối với project bán sách:

SESSION['cart']=['td01'=>3, 'td02'=> 4]

8/4/20

Mô Hình MVC

MVC- viết tắt của Model, View và Controller là 1 kiến trúc hay 1 mô hình phát triển web.

+Controller: Nhận nhiệm vụ xử lí các yêu cầu từ user gửi lên theo dạng URL để thao tác với Model bóc tách dữ liệu từ database nếu cần để hiện thị ra View

+Model : Thực hiện các yêu cầu từ Controller, nhận nhiệm vụ tương tác với database, thực hiện câu lệnh thêm- xóa- sửa.. trả kết quả về Controller và hiển thị ra View.

+View: Nơi chứa các đoạn code HTML, form, ảnh... để hiện thị lên trình duyệt web tương tác với người dùng, là kết quả hiện thị sau khi Controller đã xử lí xong yêu cầu từ user

Ưu điểm của mô hình MVC.

-Thể hiện sự chuyên nghiệp, logic trong lập trình web về việc phân tích, thiết kế...

-Dễ nâng cấp, bảo trì, sửa chửa do chia rõ từng Module (ta căn cứ theo nhiêm vụ từng module)

Nhược điểm:

-Không nhất thiết tuân theo quy chuẩn đã nêu vì tùy ý của lập trình viên mà đưa các class/function, yêu cầu xử lí khác nhau.

- Không nên áp dụng đối với những yêu cầu nhỏ về việc lấy nhanh kết quả từ database hiển thị ra View.

-Gây khó khăn 1 chút cho những người mới làm quen với lập trình web vì cần hiểu rõ mô hình MVC và chức năng của từng module (M-V-C)...

8/2/20

Ứng dụng SESSION trong trang admin

Trong project tên myproject, chúng ta tạo 1 folder có tên là admin, cấu trúc thư mục như sau:

Bước 1, chúng ta thêm file index.php trong thư mục admin thêm 1 câu chào:

Chào mừng bạn đã truy cập vào trang web này!

Rồi truy cập vào địa chỉ project : localhost/myproject/admin để kiểm tra lại câu chào.

Xây dựng 1 form dangnhap.html cơ bản:

<?php
if (!isset($_SESSION)) session_start();
include 'function.php';
$u= postIndex('u');
$p= postIndex('p');
if ($u=='admin' && $p=='123456') //dung
{
   $_SESSION['admin']="Admin";
   header('location:index.php');
   exit;
}
header('location:dangnhap.html');

Bước 2: xây dựng file funciton.php có nội dung dùng để lấy giá trị username/password của $_POST được nhập từ form dangnhap.html

<?php
function getIndex($key, $valueDefault='')
{
return isset($_GET[$key])?$_GET[$key]:$valueDefault;
}

function postIndex($key, $valueDefault='')
{
return isset($_POST[$key])?$_POST[$key]:$valueDefault;
}

Bước 3: Xây dựng lại trang index.php khi người dùng đăng nhập thanh công, và trang đăng xuất nếu đăng nhập thất bại. Dùng lệnh header() để chuyển hướng trang web

Trang index.php

<?php
if (!isset($_SESSION)) session_start();
if (!isset($_SESSION['admin']))
{
header('location:dangnhap.html');
exit;
}
?>
Trang chu admin: Chao <?php echo $_SESSION['admin'] ?> <hr>
<a href="dangxuat.php">Thoat</a>
<hr>
<a href="themsp.php">Them sp</a> <br>

Trang dangxuat.php

<?php
if (!isset($_SESSION)) session_start();
unset($_SESSION['admin']);
header('location:dangnhap.html');

Bước 4: Khi người dùng click vào chức năng thêm sp trên trang index.php, ta cho phép truy xuất đến chức năng thêm sp

Nội dung file themsanpham.php

<?php
if (!isset($_SESSION)) session_start();
if (!isset($_SESSION['admin']))
{
header('location:dangnhap.html');
exit;
}
?>
chuc nang them sp

$_SESSION ARRAY

Session dùng để lưu trữ thông tin, trao đổi dữ liệu giữa các trang web.

các ưu điểm so với cookie:

-cookie phải gửi dữ liệu (cookie-data) lên webserver khi request 1 URL=> giảm hiệu suất truy cập web, với session dữ liệu được lưu trên webserver.

-dữ liệu session ko lưu tại computer users, mà lưu tại server==> an toàn hơn, ko bị đánh cấp, sửa đổi.

$_SESSION được ứng dụng trong việc:

- chức năng đăng nhập (quyền truy cập đến 1 trang sau khi đã login)/ đăng xuất trang web

-đếm số lượt truy cập web

-tính năng mua hàng (giỏ hàng) trong website bán hàng...

Ta cần dùng lệnh session_start(); để khởi tạo biến session, resume giá trị cho nó.

Ví dụ liên kết biến $_SESSION['dem'] giữa các trang: vidu1, và vidu2 có chức năng tăng $n- lượt truy cập, vidu3, hủy giá trị biến $_SESSION['dem'], để hủy toàn bộ mảng $_SESSION ta dùng lệnh: session_destroy();

file vidu1.php

<?php

if(!isset($_SESSION)) session_start();

$n=isset($_SESSION['dem'])?$_SESSION['dem']:0;

$n++;

$_SESSION['dem']=$n;

<!DOCTYPE html>

<head>

<title>session</title>

</head>

<body>

ban da truy cap website nay <?php echo $n ?>lan

</html>

file vidu2.php

<?php

if(!isset($_SESSION)) session_start();

$n=isset($_SESSION['dem'])?$_SESSION['dem']:0;

$n++;

$_SESSION['dem']=$n;

<!DOCTYPE html>

<head>

<title>session</title>

</head>

<body>

ban da truy cap website nay <?php echo $n ?> lan

<a href="vidu3.php">reset session</a>

</html>

file vidu3

<?php

if(!isset($_SESSION)) session_start();

unset($_SESSION['dem']);

<!DOCTYPE html>

<head>

<title>session</title>

</head>

<body>

Quay la vidu1

</body>

</html>

8/1/20

Lấy giá trị mảng $_GET/ $_POST trong mô hình MVC

Việc lấy giá trị mảng $_POST và $_GET sẽ dễ dàng và thuận tiện trong ứng dụng mô hình MVC.

Xây dựng cấu trúc thư mục như sau:

trong hàm get/postindex ta dùng hàm isset() để kiểm tra sự tồn tại của biến, nếu ko tồn tại trả về kết quả boolean là false. Giá trị $defaultValue dùng để thiết lập giá trị mặc định khi $index ko truyền vào.. Trong MVC ta chọn cụ thể controller=abc..., nếu ko tồn tại, sẽ chọn controller mặc định là HomeController.

$c=getIndex('controller','HomeController');
$obj=new $c();

Nội dung file function.php,

<?php
function getIndex($index, $defaultValue='')
{
   if (isset($_GET[$index])) return $_GET[$index];
   else return $defaultValue;

}

function postIndex($index, $defaultValue='')
{
   if (isset($_POST[$index])) return $_POST[$index];
   else return $defaultValue;

}

Nội dung demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
</head>
<body>
    <form action="demo.php" method="POST">
        Username<input type="text" name="username" ><br>
        Password<input type="password" name="password"><br>
        <input type="submit" name="submit">
    </form>
</body>
</html>

Nội dung demo.php

<?php
include 'myclass/function.php';
$u=postIndex('username');
$p=postIndex('password');

echo "ban da nhap vao username: $u"." password: $p";

autoloadclass-Tự động load function ()

Autoloadclass được ứng dụng nhiều trong project, trong lập trình OOP (hướng đối tượng) khi tạo 1 file php chúng ta cần include thủ công rất nhiều class đã có sẵn ở thư mục ngoài, việc này tốn thời gian và phiền phức, có khi chúng ra chả biết nó ở nơi nao mà nạp vào bằng lệnh include.

Từ nhu cầu đó trong PHP đã xây dựng 1 spl_autoload_register cho phép đăng ký hàm autoloadclass mà bạn đã xây dựng sẵn.

Tạo 1 project mới,

cấu trúc thư mục như sau:

trong thư mục myclass, tạo 1 class A.php có nội dung như sau:

<?php
class A
{
    public $a1;
    public function __construct()
    {
        $this->a1=10;
        echo "<br> Ham tao lop A <br>";
    }
    public function f1A()
    {

        echo "<br> Ham F1 cua class A duoc goi <br>";
    }
}

trong file demo.php

<?php
function autoloadclass($className)
{
    if(is_file("myclass/$className.php"))
    {
        include "myclass/$className.php";
    }
    else{
        echo "Khong ton tai (chua tao) $className.php";
        exit;
    }

}
spl_autoload_register('autoloadclass');

$x = new A();
echo "chung ta hay goi method F1A cua class A <br>";

$x->f1A();

Kết quả:

Ham tao lop A
chung ta hay goi method F1A cua class A

Ham F1 cua class A duoc goi

Từ ví dụ trên ta thấy ==> ko cần include class A.php vào file demo.php, khi bạn định nghĩa 1 class B.php mới trong myclass thì chúng ta có thể gọi trực tiếp nó bên file demo.php.

Mảng $_SERVER

Mảng $_SERVER là 1 mảng được xác định trước, được thiết lập bới máy chủ web (wampserver)

Thực hiện print toàn bộ thông tin về mảng $_SERVER

<?php

echo "<pre>";

print_r($_SERVER);

kết quả:

-Array

(

[HTTP_HOST] => localhost

[HTTP_CONNECTION] => keep-alive

[HTTP_UPGRADE_INSECURE_REQUESTS] => 1

[HTTP_USER_AGENT] => Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

[HTTP_ACCEPT] => text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

[HTTP_SEC_FETCH_SITE] => same-origin

[HTTP_SEC_FETCH_MODE] => navigate

[HTTP_SEC_FETCH_USER] => ?1

[HTTP_SEC_FETCH_DEST] => document

[HTTP_REFERER] => http://localhost/demo/mangserver/

[HTTP_ACCEPT_ENCODING] => gzip, deflate, br

[HTTP_ACCEPT_LANGUAGE] => en-US,en-CA;q=0.9,en;q=0.8,zh-CN;q=0.7,zh;q=0.6

[PATH] => E:\Program Files (x86)\Common Files\Intel\Shared Files\cpp\bin\Intel64;E:\Windows\system32;E:\Windows;E:\Windows\System32\Wbem;E:\Windows\System32\WindowsPowerShell\v1.0\;E:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;E:\wamp64\bin\php\php7.4.0;

[SystemRoot] => E:\Windows

[COMSPEC] => E:\Windows\system32\cmd.exe

[PATHEXT] => .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC

[WINDIR] => E:\Windows

[SERVER_SIGNATURE] =>

Apache/2.4.41 (Win64) PHP/7.3.12 Server at localhost Port 80

[SERVER_SOFTWARE] => Apache/2.4.41 (Win64) PHP/7.3.12

[SERVER_NAME] => localhost

[SERVER_ADDR] => ::1

[SERVER_PORT] => 80

[REMOTE_ADDR] => ::1

[DOCUMENT_ROOT] => E:/wamp64/www

[REQUEST_SCHEME] => http

[CONTEXT_PREFIX] =>

[CONTEXT_DOCUMENT_ROOT] => E:/wamp64/www

[SERVER_ADMIN] => wampserver@wampserver.invalid

[SCRIPT_FILENAME] => E:/wamp64/www/demo/mangserver/mangserver.php

[REMOTE_PORT] => 50746

[GATEWAY_INTERFACE] => CGI/1.1

[SERVER_PROTOCOL] => HTTP/1.1

[REQUEST_METHOD] => GET

[QUERY_STRING] =>

[REQUEST_URI] => /demo/mangserver/mangserver.php

[SCRIPT_NAME] => /demo/mangserver/mangserver.php

[PHP_SELF] => /demo/mangserver/mangserver.php

[REQUEST_TIME_FLOAT] => 1596252364.334

[REQUEST_TIME] => 1596252364

)

In ra các thông tin cần thiết:

<?php

echo "tra ve ten file php dang chay <br>";

echo $_SERVER['SCRIPT_FILENAME']; echo "<br>";

echo "tra ve ten may chu <br>";

echo $_SERVER['SERVER_NAME'];echo "<br>";

echo "tra ve duong dan thu muc dang chay file php <br>";

echo $_SERVER['HTTP_REFERER'];echo "<br>";

echo "tra ve ten&phien ban webserver <br>";

echo $_SERVER['SERVER_SOFTWARE'];echo "<br>";

echo "tra ve phuong thuc yeu cau";

echo $_SERVER['REQUEST_METHOD'];echo "<br>";

echo "The query string is: ".$_SERVER['QUERY_STRING'];echo "<br>";

kết quả:

tra ve ten file php dang chay
E:/wamp64/www/demo/mangserver/mangserver.php
tra ve ten may chu
localhost
tra ve duong dan thu muc dang chay file php
http://localhost/demo/mangserver/
tra ve ten&phien ban webserver
Apache/2.4.41 (Win64) PHP/7.3.12

tra ve phuong thuc yeu cau

GET
The query string is:

7/31/20

Phương thức GET & POST trong PHP

Có 2 cách trình duyệt web người dùng (browser client) có thể gửi thông tin đến webserver.

Đó là:

+Phương thức GET lưu thông tin vào mảng $_GET

+Phương thức POST lưu thông tin vào mảng $_POST

thông tin của 2 mảng này luôn luôn được lưu vào mảng $_REQUEST

PHƯƠNG THỨC GET

Phương thức GET gửi thông tin đến trang yêu cầu (webserver) theo dạng sau:

test.php?name1=value1&name2=value2

GET ko thể gửi hơn 1024 kí tự.
GET ko dùng để gửi các thông tin nhạy cảm như password, tài khoản...

GET ko thể gửi các dữ liệu binary data, images or word documents, đến webserver
GET lưu thông tin nhận được vào mảng $_GET

PHƯƠNG THỨC POST

POST ko giới hạn dung lượng data, kí tự gửi đi.
POST gửi dữ liệu bảo mật, không hiện thị trên thanh URL
POST lưu thông tin nhận được vào mảng $_POST

So sánh sự khác biệt:

Ví dụ 1: sử dụng thẻ <a> để gửi querystring luôn luôn lưu vào mảng $_GET

file vidu1.html

file vidu1.php

<pre>
<?php
echo "mang get<br>";
print_r($_GET);
echo "mang post<br>";
print_r($_POST);
echo "mang request <br>";
print_r($_REQUEST);

kết quả:

mang get
Array
(
    [v1] => 1
    [v2] => X
)
mang post
Array
(
)
mang request 
Array
(
    [v1] => 1
    [v2] => X
)

ví dụ: SUBMIT 1 FORM, input hay đối tượng button... luôn phải có thuộc tính name,

enctype="multipart/form-data" cho phép gửi dữ liệu dạng file




file html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	
	<form action="vd4.php" method="get">
		Ten<input type="text" name="t"> <br>
		Mat Khau<input type="text" name="p"> <br>
		Hinh<input type="file" name="h"> <br>
		<input type="submit" name="sm1" value="Gui">
	</form>
<hr>
   
	<form action="vd4.php" method="post">
		Ten<input type="text" name="t"> <br>
		Mat Khau<input type="text" name="p"> <br>
		Hinh<input type="file" name="h"> <br>
		<input type="submit" name="sm2" value="Gui">
	</form>
<hr>
	<form action="vd4.php" method="post" enctype="multipart/form-data">
		Ten<input type="text" name="t"> <br>
		Mat Khau<input type="text" name="p"> <br>
		Hinh<input type="file" name="h"> <br>
		<input type="submit" name="sm3" value="Gui">
	</form>
<hr>
	<a href="vd4.php?v1=1&v2=X">Link 1</a> <br>
	<a href="vd4.php?v1=2&v2=y">Link 2</a> <br>
	<a href="vd4.php?v1=3&v2=Z">Link 3</a> <br>
<!-- queryString: v1=1&v2=X-> mang $_GET -->
</body>
</html>

file php

<pre>
<?php
echo "mang post <br>";
print_r($_GET);
echo "mang get <br>";
print_r($_POST);
echo "mang request <br>";
print_r($_REQUEST);
echo "mang files <br>";
print_r($_FILES);
$ten = isset($_REQUEST['t'])?$_REQUEST['t']:'';
echo "<hr>Chao ban $ten :<br>";


Array //mảng $_FILE
(
    [h] => Array
        (
            [name] => 1.png
            [type] => image/png
            [tmp_name] => E:\wamp64\tmp\php3539.tmp
            [error] => 0
            [size] => 16702
        )

)

if (isset($_FILES['h']))
{
	if ($_FILES['h']['error']==0)
	{
		$snguon = $_FILES['h']['tmp_name'];
		$sdich = "image/".$_FILES['h']['name'];
		move_uploaded_file($snguon, $sdich );
		echo "<img src='$sdich'>";

	}

}
?>
<a href="vd4.html">Quay lai</a>

IN BÀNG CỬU CHƯƠNG THEO MÀU

file html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Bang cuu chuong</title>
</head>
<body>
	<form action="vd5.php" method="get">
		n<input type="text" name="n"> <br>
		color<input type="text" name="c"> <br>
		<input type="submit" value="In BCC">
	</form>
</body>
</html>

file php

<?php
$n = isset($_GET['n'])?$_GET['n']:'';
$c =isset($_GET['c'])?$_GET['c']:'';
if ($n=='')
{
	header('location:vd5.html');
	exit;
}
?>
<table bgcolor="<?php echo $c ?>">
	<tr><td colspan="3">Bang cuu chuong <?php echo $n ?></td>
	</tr>
	<?php
	for($i=1; $i<=10; $i++) 
	{
		?>
		<tr>
			<td><?php echo $n; ?></td>
			<td><?php echo $i ?></td>
			<td><?php echo $n*$i ?></td>
		</tr>
		<?php
	}
	?>
</table>

7/26/20

DOM HTML

DOM (document object model) dùng để truy xuất các đối tượng (elements) trong tài liệu HTML và XML, có dạng cấu trúc cây dữ liệu.

Các phương thức truy xuất trong DOM

-document.getElementByID ('id_cần_tìm')
-document.getElementBytagName('body')
-document.getElementByName ('abc')

Ta có thể truy xuất nội dung các elements trong DOM bằng thuộc tính (attribute): InnerHTML

Sử dụng phương thức bytagName:

    <script>
        function F()
        {
            var v1 = document.frm1.n.value;
            document.getElementsByTagName('body')[0].bgColor=v1;

        }
    </script>

    <form action="" name="frm1">
        color<input type="color" name="n" id='id1'>
        <input type="button" onClick="F()" value="Chay F">

    </form>

- Sử dụng phương thức byid hiện/ẩn image trong thẻ div

<script>
       function hien(){
            var dir=document.fm1.x.value;
            var insert="<img src=" '+dir+' ">";
            document.getElementById('div1').innerHTML+=insert;
        }
        function xoa(){
            document.getElementById('div1').innerHTML="";
        }

    </script>
</head>
<body>
    <form action="" name="fm1">
        <input type="text" id="x"><br>
        <input type="button" onclick="hien()" value="hien" ><br>
        <input type="button" onclick="xoa()" value="xoa"><br>
    </form>

- Attribute (thuộc tính) trong DOM

<p id="myid" onclick="F1()">this is a text</p>
    <script>
            var x1 = document.getElementById("myid").attributes[0].name;
            var x2 = document.getElementById("myid").attributes[1].name;
            var x3 = document.getElementById("myid").attributes[0].value;
            var x4 = document.getElementById("myid").attributes[1].value;
            var x=[x1,x2,x3,x4];
            console.log(x);

    </script>

----------Kết quả:

(4) ["id", "onclick", "myid", "F1()"]

0: "id"
1: "onclick"
2: "myid"
3: "F1()"
length: 4
__proto__: Array(0)

--In ra các childnode:

html>
<head>
    <title>HTML DOM Demonstration</title>
</head>

<body>
    <h1>Headings</h1>
    <p>Hello world!</p>
    <script>

        var x= document.body.childNodes;
        console.log(x);    //;
    </script>
</body>
</html>

-------kết quả:

NodeList(6) [text, h1, text, p, text, script]
0: text
1: h1
2: text
3: p
4: text
5: script
6: text
length: 7

AJAX

AJAX không phải là 1 ngôn ngữ lập trình

AJAX là 1 kĩ thuật dùng trong web động mà ko phải load lại trang (F5)

AJAX là thể hiện của JS bất đồng bộ và (XML)

-CDN jQuery: https://code.jquery.com/jquery-3.5.1.min.js

ví dụ 1, sử dụng hàm onload thông thường, mặc định method được gửi lên là GET, ko có nhiều tùy chỉnh, gồm có 2 file a1.html và a1.php

a1.html có nhiệm vụ bắt sự kiện onkeyup khi người dùng nhập liệu vào input, chuỗi dữ liệu t=string sẽ được gửi lên file a1.php, tại đây hàm isset sẽ lấy t=string gán vào biến $tensach, rồi thực hiện câu truy vấn lên database bookstorevn, kết quả trả về là $data sẽ được duyệt bằng vòng lặp foreach load dữ liệu về div có id=kq trong a1.html. Cấu trúc file như sau:

a1.html

<head>

<title>Document</title>

function F(v){

$("#kq").load('a1.php?t='+v);

}

</script>

</head>

<body>

</body>

a1.php

<?php

$tensach=isset($_GET['t'])?$_GET['t']:"";

$o = new PDO("mysql:host=localhost; dbname=bookstorevn", 'root', '');

$o->query('set names utf8');

$sql="select * from sach where tensach like '%$tensach%'";

$stm = $o->query($sql);

$data = $stm->fetchAll();

foreach($data as $k=>$v)

{

echo $v['masach'].":".$v['tensach']."<br>";

}

ví dụ 2, có nhiều thiết lập tùy chỉnh về phương thức gửi GET/POST, kết quả trả về có success hay không?...gồm các tham số url, type, data, success

cấu trúc file a2.html

<body>

function F2(v)

{

$.ajax({

url:'a2.php',

type:'GET', // hoặc' POST'

data:"t="+v,

success:function(kq)

{

$("#kqtv").html(kq);

}

});

}

</script>

</body>

cấu trúc file a2.php

<?php

$tensach=isset($_GET['t'])?$_GET['t']:"";

$o = new PDO("mysql:host=localhost; dbname=bookstorevn", 'root', '');

$o->query('set names utf8');

$sql="select * from sach where tensach like '%$tensach%'";

$stm = $o->query($sql);

$data = $stm->fetchAll();

foreach($data as $k=>$v)

{

echo $v['masach'].":".$v['tensach']."<br>";

}

Sử dụng JSON trong ajax

Khi truy vấn database, kết quả trả về của $data là 1 mảng 2 chiều, lưu thông tin sách. Ta dùng lệnh json_encode($data) để chuyển thành mảng json, từ mảng json ta dùng lệnh json.parse để chuyển thành javascript object, dùng hàm của jQuery là $.each() để duyệt qua các phần tử của javascript object để xuất ra kết quả.

Kham khảo hàm $.each() tại đây: https://api.jquery.com/jquery.each/

file html

<!DOCTYPE html>

<head>

<title>Document</title>

function F()

{

$.ajax( {

url:'vd02.php',

type:'GET',

success:function(s)

{

oJson = JSON.parse(s);

$.each(oJson, function(k, v){

//alert(k+", " + v.masach);

s ="<div>"+ k+": "+ v.masach +", "+ v.tensach+ ", "+ v.gia +" </div>";

if (v.gia<50000)

{

tam = $("#kq1").html() + s;

$("#kq1").html( tam );

}

else {

$("#kq2").append(s);

}

})

}

);

}

$(document).ready(

function(){

F();

}

);

</script>

</head>

<body>

<hr>

</body>

</html>

file php

<?php

$o = new PDO("mysql:host=localhost; dbname=bookstorevn", "root", '');

$o->query("set names utf8");

$sql="select masach, tensach, gia from sach";

$stm= $o->query($sql);

$data = $stm->fetchAll(PDO::FETCH_ASSOC);

print_r($data);

echo json_encode($data);

Menu

11/16/20

9/13/20

8/9/20

8/8/20

8/4/20

8/2/20

file vidu3

8/1/20

7/31/20

7/26/20

AJAX