Menu

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 dataimages 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

    <a href="vd1.php?v1=1&v2=X">Link 1</a> <br>
    <a href="vd1.php?v1=2&v2=y">Link 2</a> <br>
    <a href="vd1.php?v1=3&v2=Z">Link 3</a> <br>

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ả:

  1. (4) ["id", "onclick", "myid", "F1()"]
    1. 0"id"
    2. 1"onclick"
    3. 2"myid"
    4. 3"F1()"
    5. length4
--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

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>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        function F(v){
            $("#kq").load('a1.php?t='+v);
        }
    </script>
</head>
<body>
    <input type="text" onkeyup="F(this.value)">
    <div id="kq"></div>
</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>
    <script>
        function F2(v)
{
$.ajax({
url:'a2.php',
type:'GET', // hoặc' POST'
data:"t="+v,
success:function(kq)
{
$("#kqtv").html(kq);
}
});
}

    </script>
    <input type="text" onkeyup="F2(this.value)">
    <div id="kqtv"></div>
</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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
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>
<div id="kq1"></div>
<hr>
<div id="kq2"></div>
</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);

Jquery


-jQuery là  thư viện của Javascript,
-jQuery selectors là phần quan trọng nhất trong thư viện của jQuery.

-CDN: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

-Tải phiên bản v 3.5.1 trực tiếp: https://code.jquery.com/jquery-3.5.1.min.js

-Tất cả lệnh jQuery đều bắt đầu bằng dollar ($).

-Khi HTML được load, jQuery thực thi đoạn code này:

$(document).ready(
    function(){
        //code jQuery o day
    }
);

- sự kiện onload, gọi hàm F()

<body onload="F()">

<script type="text/javascript">
function F()
{
$('body').css('background', 'red');
}
</script>

- không dùng sự kiện onload.

<script type="text/javascript">
function F()
{
$("body").css("background","yellow");
}
</script>
<script>
$(document).ready(
function(){
F();
}
)

</script>


các ví dụ về selectors

-selector elements button làm các elements <p> đều ẩn:

<script>
$(document).ready(
    function(){
        $("button").click(
            function(){
                $("p").hide();
            }
        )
    }
);

</script>

- sử dụng #id Selector

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
<body>

<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>

- sử dụng .class selector

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>

<body>
<h2 class="test">This is a heading</h2>


<p class="test">This is a paragraph.</p>
<button>Click me</button>
</body>

-sử dụng * selector thao tác với tất cả elements

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("*").hide();
  });
});
</script>
<h2 >This is a heading</h2>
<p >This is a paragraph.</p>

- sử dụng selector this ẩn button

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
<button>Click me</button>

-select với tất cả element <p> có class là intro

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").hide();
  });
});
</script>

<h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>

-select phần tử đầu tiên của <p>

$(document).ready(function(){
  $("button").click(function(){
    $("p:first").hide();
  });
});
<p >This is a paragraph.1</p>
<p>This is a paragraph.2</p>

-select li đầu tiên của ul

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});
</script>

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

- select tất cả các button và các input có type ="button"

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(":button").hide();
  });
});
</script>
<button>Click me</button>
<input type="button" value="abc">

-select các dòng lẻ của 1 table:

<script>
$(document).ready(function(){
  $("tr:odd").css("background-color", "green");
});
</script>
<table border="1">
  <tr>
    <th>Company</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Mexico</td>
  </tr>

- Sự kiện doubleclick với selector <p>

$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
<p >This is a paragraph.1</p>

-lấy giá trị màu của input nhập vào, dựa vào id

     <input id="abc" type="text">
    <button type="button" onclick="F()" >click</button>
        <script>
            function F()
            {
                $("body").css("background",$('#abc').val());
            }
        </script>

-tính tổng 2 số:

<input id="x" type="text"><br>
    <input id="y" type="text"><br>
   
    <label id="tong" type="text" >ket qua</label>

    <button type="button" onclick="F()" >tinhtong</button>
        <script>
            function F()
            {
                var kq;
                kq= $('#x').val()*1+$('#y').val()*1;
                $('#tong').html(kq);
            }
     </script>

Dùng Javascript thao tác với HTML

-Thay đổi nội dung HTML

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

-Thay đổi thuộc tính css của HTML

 <p>change bk color of html-body</p>

<button onclick="
document.body.style.backgroundColor='red'">change bk-color</button>

--------------------------------------------
<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="
document.getElementById('demo').style.fontSize='35px'">Click Me!</button> 

-Ẩn/ Hiện thành phần elements (p, h1,...) của html

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="
document.getElementById('demo').style.display='none'">Click Me!</button> 
 -------------------------------------
<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="
document.getElementById('demo').style.display='block'">Click Me!</button> 

-Gọi hàm javascript

<script>
function
myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}
</script>

<p>When you click "Try it", a function will be called.</p>
<p>The function will display a message.</p>

<p id="demo"></p>

<button onclick="
myFunction()">Try it</button>

-Hàm có tham số truyền vào:

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<p id="demo"></p>

<script>
function myFunction(name,job) {
  document.getElementById("demo").innerHTML = "Welcome " + name + ", the " + job + ".";
}
</script>


-Tạo object trong javascript

<p id="
demo"></p>

<script>

var
person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("
demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script> 


//ta có thể truy xuất thuộc tính của đối tượng bằng lệnh:

person["firstName"] + " " + person["lastName"];

--Truy xuất thuộc tính hàm như 1 method(phương thức)

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;

  }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>

-Gọi  hàm hiển thị thời gian có sẵn

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p> 


- Sự kiện onclick kết hợp với this

<button onclick="this.innerHTML=Date()">The time is?</button>