Category Archives: Lập Trình Web

Lập Trình Với Javascript – Phần 2 Tìm Hiểu Arrow Function

 

      I.   Arrow Functions là gì?.

Arrow function là cách viết hàm một cách ngắn gọn hơn so với cách viết hàm trong Javascript như trước, được đưa vào từ phiên bản ES6.

   II.    Cách sử dụng Arrow Function.

1.  Cách viết hàm thông thường và Arrow Function.

Thông thường để viết hàm trong Javascript theo cách cũ thì có 2 cách viết như sau:

//Cách 1

function functionName(value1, value2){

}

//Cách 2

var functionName=function(value1, value2){

}

Bây giờ chúng ta sẽ chuyển nó về Arrow Function như sau:


var functionName = (value1, value2)=>{

}

Như ở trên chúng ta sẽ bỏ đi khai báo hàm function nhưng thêm vào dấu => vào cuối dấu đóng ngoặc “)”.

2.  Ví dụ viết hàm Arrow Function.

Ví dụ 1:

Arrow Function không có tham số truyên vào được viết như sau:


let helloArrowFunction = () => {

    console.log("Xin chào bạn");

}

helloArrowFunction();

Kết quả:

Ví dụ 2:

Arrow Function hàm có tham số truyên vào được viết như sau:


let helloArrowFunction = (valueName) => {

     console.log("Xin chào "+valueName);

}

helloArrowFunction("Arrow Function");

Khi hàm có tham số thì các tham số được để vào trong dấu () và cách nhau bở dấu “,” như thông thường.

Kết quả:

Ở trong dấu {} có 1 dòng lệnh duy nhất thì ta có thể viết lại hàm trên như sau:


let helloArrowFunction = (valueName) => console.log("Xin chào "+valueName);

helloArrowFunction("Arrow Function");

Kết quả vẫn giống như ban đầu.

Ví dụ 3:

Cách viết thường.


let myFunction =function(valueName){

return valueName * 2;

}

console.log(myFunction(5));

Cách viết Arrow Function.


let myFunction =(valueName)=>{

    return valueName * 2;

}

console.log(myFunction(5));

Ở đây có một dòng lệnh là trả về kết quả duy nhất nên ta có thể bỏ đi dấu ngoặc {}.

//Cách viết sai


let myFunction =(valueName)=> return valueName * 2;

console.log(myFunction(5));

Khi viết Arrow Function với một dòng lệnh return duy nhất giông ví dụ này thì chúng ta không được phép viết return vào nữa bởi vì dấu => thì trình duyệt đã hiểu nó là lệnh return rồi, nếu viết thêm sẽ có thông báo lỗi.

//Cách viết đúng


let myFunction =(valueName)=> return valueName * 2;

console.log(myFunction(5));

Kết quả:

III.   Kết luận.

Để đọc hiểu code của những người khác thì chúng ta nên học những ví dụ đơn giản như thế này trước để hiểu cách thức hoạt động của nó và chúng ta có thể sử dụng nó cho code của mình vì nó cải tiến và đơn giản hơn rất nhiều so với ES5.

 

Advertisements

Lập Trình Với Javascript – Phần 1

   I.  ES là gì?

ES được viết tắt của ECMAScript, là chuẩn của ngôn ngữ Javascript được các công ty lớn chung tay vào việc xây dựng và thống nhất cách hoạt động của ngôn ngữ Javascript trên các trình duyệt web, để đảm bảo cho tất cả các website trên các trình duyệt khác nhau có thể hoạt động tốt.

ES5 được công bố vào năm 2011, ES6 được công bố vào năm 2015 với tên ES2015, mỗi năm sẽ có một phiên bản ECMAScript mới với nhiều tính năng mới, hiện tại đã có bản ES2017 – ES8 với các tính năng bổ sung như asyn, await để xử lý việc bất đồng bộ trong ngôn ngữ javascript.

Từ phiên bản ES6 trở đi chúng ta đã có được rất nhiều tính năng cải tiến cho ngôn ngữ Javascript hơn nào cùng mình tìm hiểu các tính năng đó nhé.

   II.  Từ khóa let, var, const và sử dụng strict mode.

ES5 chỉ có 1 cách để khai báo biến đó là từ khóa var, var có thể là số, có thể là chuổi …v.v… nó không có một nguyên tắc nào cả vì thế từ phiên bản ES6 đã có thêm từ khóa let và const, ồ bây giờ chúng ta đã có tới 3 cách để khai báo kiểu dữ liệu rồi đấy, vậy 2 từ khóa mới này nó có công dụng là gì nhỉ? Nào cùng đi vào ví dụ để cùng nhau hiểu rõ hơn nào.

Tạo một file index.html trong đó có đoạn script này:

1.  Từ khóa var.

Ví dụ 1:

for(var i=0; i<5; i++){

    console.log(i);

}
console.log("Biến i ngoài vòng lặp: "+i);

Kết quả sau khi chạy:

Ta thấy rằng biến i=5 vẫn tồn tại sau khi đã ra khỏi vòng lặp và nó vẫn chưa được giải phóng khỏi vùng nhớ.

Ví dụ 2:

Ở ví dụ này ta cho các câu lệnh ở trên vào một hàm rồi chạy thử xem sao.


function myFunction() {

    for (var i = 0; i < 5; i++) {

        console.log(i);

    }

    console.log("Biến i ngoài vòng lặp: " + i);

}

myFunction();

Kết quả sau khi chạy:

Kết quả vẫn vậy nhưng giả sử ta biên đổi lại code như vậy thì sao:


function myFunction() {

    for (var i = 0; i < 5; i++) {

        console.log(i);
  
    }

}

myFunction();

console.log("Biến i ngoài vòng lặp: " + i);

Kết quả sau khi chạy:

Đã có thông báo lỗi và trình duyệt không hiểu biến i đó, như vậy biến i nếu được khai báo kiểu var và ở trong hàm myFunction thì nó chỉ có hiệu lực trong hàm đó mà thôi, ra khỏi hàm thì nó sẽ không tồn tại nữa.

Còn nếu biến i không khai báo trong hàm thì nó sẽ hiểu là biến toàn cục luôn.


function myFunction() {

    for (i = 0; i < 5; i++) {

        console.log(i);

    }

}

myFunction();

console.log("Biến i ngoài vòng lặp: " + i);

Kết quả sau khi chạy:

Để tránh trường hợp như vậy chúng ta có thể sử dụng strict mode bằng cách đưa thêm vào từ khóa ‘use strict’ vào đầu file javascript.

2.  Use strict.

Thêm ‘use strict’ vào đầu đoạn script như đoạn code bên dưới để bật chế độ strict mode.

Ví dụ 3:


'use strict'

function myFunction() {

    for (i = 0; i < 5; i++) {

       console.log(i);

    }
 
}

myFunction();

console.log("Biến i ngoài vòng lặp: " + i);

Code sau khi chỉnh sửa:


'use strict'

function myFunction() {

      for (var i = 0; i < 5; i++) {

         console.log(i);

      }

}

myFunction();

‘use strict’ được đưa vào từ phiên bản ES6 của Javascript khi có ‘use strict’ thì code javascript của chúng ta sẽ có tính chặt chẽ hơn.

3. Từ khóa let.

Ví dụ 4:


'use strict'

for(let i=0; i<5; i++){

    console.log(i);

}

console.log("Biến i ngoài vòng lặp: "+i);

Kết quả sau khi chạy:

Trình duyệt đã không hiểu biến i khi nó ra khỏi dấu cặp {} rồi, vậy biến i khi được khai báo bằng từ khóa let thì trình duyệt chỉ hiểu nó khi nằm trong dấu cặp {} bao quanh nó.

Ví dụ 5:


'use strict'

var i=999;

if(true){

   var i=555;

}

console.log(i);

Kết quả:

Còn khi chúng ta sử dụng let thì sao.


'use strict'

var i=999;

if(true){

    let i=555;

}

console.log(i);

Kết quả:

Ví dụ 6:


'use strict'

var i=999;

{

   {

      let i=555;

      console.log(i);

   }

    console.log(i);

}

console.log(i);

Kết quả:

4. Từ khóa const.

Ví dụ 7:


'use strict'

const i=999;

i=10;

console.log(i);

Kết quả:

III.  Kết luận.

Chúng ta nên sử dụng từ khóa let thay cho từ khóa var và cũng nên sử dụng ‘use strict’ ở đầu file javascript để code trở nên chặt chẽ hơn.

Sử Dụng Phương Thức GET Và POST Để Sửa Dữ Liệu – Bài 6

I.Sửa Lại Code Cho File index.php

Ở thẻ table xuất dữ liệu ra thì bổ sung thêm chức năng sửa như sau :


<table border="1">
   <tr>
     <th>ID</th>
     <th>Username</th>
     <th>Email</th>
     <th>Password</th>
     <th>Avatar</th>
     <!--Chức năng sửa-->
    <th>Edit</th>
    <!--Chức năng xóa-->
    <th>Delete</th>

   </tr>
<?php
//Thực hiện truy vấn

$result=$conn->query("SELECT * FROM users");

//Lấy dữ liệu bằng fetch_objec
while($row=$result->fetch_object())
{
?>
<tr>
     <td><?php echo $row->id ?></td>
     <td><?php echo $row->username ?></td>
     <td><?php echo $row->email ?></td>
     <td><?php echo $row->password ?></td>
     <td><?php echo $row->avatar ?></td>
     <!--Sửa user-->
     <td><a href="edituser.php?edit=<?php echo $row->id ?>">Sửa</a></td>
    <!--Xóa user-->
    <td><a href="?del=<?php echo $row->id ?>">Xóa</a></td>
</tr>

<?php
}
?>

</table>

Trong đó đoạn code này có nghĩa là khi nhấn vào sửa thì sẽ chuyển đến trang edituser.php và có biến edit là id của đối tượng cần sửa .


<!--Sửa user-->
<td><a href="edituser.php?edit=<?php echo $row->id ?>">Sửa</a></td>

Khi nhấn vào sửa thì đường dẫn sẽ là :

http://localhost:8080/PhanBietFetch/edituser.php?edit=22

Từ đó bên file edituser.php sẽ sử dụng phương thức GET để lấy được giá trị 22 ở biến edit truyền trên URL

Đây là trang index sau khi sửa code :

II.Viết Code Cho File edituser.php

Tạo một file mới tên là edituser.php và có đoạn code sau :


<link rel="stylesheet" href="style.css">
<?php
//Bắt đầu phiên làm việc
session_start();

require('db.php');

if(!$_SESSION['access'] || (time()-$_SESSION['time'])>1800 || (isset($_GET['state']) && $_GET['state']=="logout"))
{
        session_destroy();
        header("location:login.php");
}
//Xác định id của user bằng cách sử dụng phương thức GET lấy thông tin trên đường dẫn URL
if(isset($_GET['edit']))
{
        $sql="SELECT * FROM users WHERE `id`=".$_GET['edit'];
        $result=$conn->query($sql);
        if($result->num_rows>0)
        {
            $user=$result->fetch_object();
        }
        else
        {
             header("location:index.php"); 
        }
}
//Khi người dùng chỉnh sửa thông tin xong và nhấn submit
if($_SERVER["REQUEST_METHOD"]=="POST")
{

       $username=$_POST['username'];
       $email=$_POST['email'];
       $password=$_POST['password'];
       if(!empty($_FILES['image']['name']))
       {
               $image=$_FILES['image']['name'];
               $image_path='./images/'.$image;
              if(preg_match("!image!",$_FILES['image']['type']))
              {
                 if(copy($_FILES['image']['tmp_name'],$image_path))
                 {
                     $sql="UPDATE `users` SET `username`='$username',`email`='$email',`password`='$password',`avatar`='$image' WHERE `id`=$user->id";
                     if($conn->query($sql)==true)
                     {
                          echo "<p class='success'>Update thành công !</p>";
                     }
                     else {
                           echo "<p class='error'>Update thất bại !</p>";
                      }
                  }
                  else
                      echo "<p class='error'>Quá trình tải lên thất bại !</p>";
          }
          else
               echo "<p class='error'>File tải lên không phải hình !</p>";
       }
       //Nếu không có tấm hình nào được gửi lên
       else
       {
              $sql="UPDATE `users` SET `username`='$username',`email`='$email',`password`='$password' WHERE `id`=$user->id";
              if($conn->query($sql)==true)
              {
                   echo "<p class='success'>Sửa thành công !</p>";
              }
              else {
                   echo "<p class='error'>Sửa thất bại !</p>";
               }
       }

}

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add User</title>
</head>
<body>
<form class="" action="" method="post" enctype="multipart/form-data">
<table>
  <tr>
      <td>User Name</td>
      <td><input type="text" name="username" value="<?php if(!empty($user->username)) echo $user->username ?>" required></td>
  </tr>
   <tr>
       <td>Email</td>
       <td><input type="email" name="email" value="<?php if(!empty($user->email)) echo $user->email ?>" required></td>
   </tr>
    <tr>
       <td>Password</td>
       <td><input type="password" name="password" value="<?php if(!empty($user->password)) echo $user->password ?>" required></td>
    </tr>
     <tr>
        <td></td>
        <td><input type="file" name="image" value=""></td>
    </tr>
     <tr>
        <td></td>
        <td><input type="submit" name="submit" value="Submit"> <input onclick="window.location='index.php'" type="button" name="back" value="Back"></td>
     </tr>
 </table>
</form>
</body>
</html>

Khi sửa thông tin thành công thì sẽ được kết quả sau :

Link Code :  Here

Sử Dụng Phương Thức POST Để Thêm Dữ Liệu – Bài 5

I.Xây dựng và viết code xử lý cho file adduser.php

Ta tạo một file có tên adduser.php trong file này có đoạn code sau :


<link rel="stylesheet" href="style.css">
<?php
//Bắt đầu phiên làm việc
session_start();

require('db.php');

if(!$_SESSION['access'] || (time()-$_SESSION['time'])>1800 || (isset($_GET['state']) && $_GET['state']=="logout"))
{
     session_destroy();
     header("location:login.php");
}

if($_SERVER['REQUEST_METHOD']=="POST")
{
      $username=$_POST['username'];
      $email=$_POST['email'];
      $password=$_POST['password'];
      $image=$_FILES['image']['name'];
      $image_path='./images/'.$image;

     if(preg_match("!image!",$_FILES['image']['type']))
     {
         if(copy($_FILES['image']['tmp_name'],$image_path))
         {
            $sql="INSERT INTO `users`(`username`, `email`, `password`, `avatar`) VALUES ('$username','$email','$password','$image')";
            if($conn->query($sql)===true)
            {
                echo "<p class='success'>Thêm Thành Công !</p>";
            }
            else
                echo "<p class='error'>Thêm Thất Bại !</p>";
           }

      }
      else
           echo "<p class='error'>File tải lên không phải hình !</p>";
}

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add User</title>
</head>
<body>
<form class="" action="" method="post" enctype="multipart/form-data">
<table>
    <tr>
       <td>User Name</td>
       <td><input type="text" name="username" value="" required></td>
    </tr>
    <tr>
       <td>Email</td>
       <td><input type="email" name="email" value="" required></td>
   </tr>
   <tr>
       <td>Password</td>
       <td><input type="password" name="password" value="" required></td>
  </tr>
  <tr>
       <td></td>
       <td><input type="file" name="image" value="" required></td>
  </tr>
   <tr>
        <td></td>
        <td><input type="submit" name="submit" value="Submit"> <input onclick="window.location='index.php'" type="button" name="back" value="Back"></td>
  </tr>
 </table>
</form>
</body>
</html>

Sau khi thực hiện việc tạo user thành công thì sẽ xuất ra kết quả :

II.Giải thích

Để tải tập tin trong thẻ form phải code đoạn code sau 


enctype="multipart/form-data"

Nếu Server nhận được yêu cầu từ người dùng gửi dữ liệu lên sau đó ta thực hiện việc lấy dữ liệu bằng phương thức $_POST[‘name’] trong đó name là name của input


$username=$_POST['username'];
$email=$_POST['email'];
$password=$_POST['password'];
$image=$_FILES['image']['name'];
$image_path='./images/'.$image;

với $image_path là đường dẫn mà file hình sẽ lưu vào .

Thực hiện việc kiểm tra xem file tải lên có phải là hình hay không nếu là hình thì thực hiện việc copy hình từ thư mục tmp của Server sang đường dẫn $image_path.

Vì khi ta submit form kèm theo file ,file đó sẽ được lưu tạm thời vào trong thư mục tmp của Server rồi sau đó mới được xử lý và copy sang đường dẫn chính thức nếu thành công việc kiểm tra và chen dữ liệu.Trong Server đường dẫn của thư mục tmp là  [Tên Ổ Đĩa]:\xampp\tmp


if(preg_match("!image!",$_FILES['image']['type']))
{
    if(copy($_FILES['image']['tmp_name'],$image_path))
    {
         $sql="INSERT INTO `users`(`username`, `email`, `password`, `avatar`) VALUES ('$username','$email','$password','$image')";
         if($conn->query($sql)===true)
         {
              echo "<p class='success'>Thêm Thành Công !</p>";
         }
         else
              echo "<p class='error'>Thêm Thất Bại !</p>";
     }

}
else
    echo "<p class='error'>File tải lên không phải hình !</p>";

Link Code : Here

 

Sử dụng phương thức GET để đăng xuất và xóa dữ liệu – Bài 4

Giới thiệu : Phương thức $_GET là phương thức dùng để nhận yêu cầu được gửi lên từ người dùng ,và nó sẽ lấy giá trị mà đang hiển thị tại URL của trình duyệt .

I.Tạo File Css 

Chúng ta sẽ đi lần lược từng bước va sẽ tính đến chuyện tối ưu lại code ở những bài sau.

Tạo tập tin style.css trong tập tin này có đoạn code sau


.success
{
    color:green;
}
.error
{
     color:red;
}

Mục đích của 2 lớp này là thay đổi màu chữ của thông báo sao cho phù hợp .

II.Sửa lại file index.php

<?php 
//Bắt đầu phiên làm việc session_start(); 
/*Nếu không có quyền truy cập hoặc quá thời gian truy cập hoặc là tồn tại một biến $_GET['state'] và $_GET['state']="logout" thì sẽ hủy phiên làm việc điều hướng về trang login.php*/ 
if(!$_SESSION['access'] || (time()-$_SESSION['time'])>1800 || (isset($_GET['state']) && $_GET['state']=="logout"))
{
    session_destroy();
    header("location:login.php");
}
//Yêu cầu file db.php

require("db.php");

?>
<!DOCTYPE html>
<html>
<head>
<title>Users </title>

<!--Dẫn đến file css-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php /*Nếu tồn tại một biến $_GET['del'] nào đó trên thanh URL được gửi tới thì*/ if(isset($_GET['del'])) { /*Thực hiện câu truy vấn để xóa một user có id bằng với giá trị của biến $_GET['del'] được lấy từ URL*/ $sql="DELETE FROM users WHERE ID=".$_GET['del']; $result=$conn->query($sql);
if($result > 0)
{
    echo "Xóa thành công !";
}
else
    echo "Xóa không thành công !";
}
?>
<button>Add User</button>
<span><a href="?state=logout">Đăng Xuất</a></span>

<hr>


<table border="1">
  
   <tr>
    
      <th>ID</th>


      <th>Username</th>


      <th>Email</th>


      <th>Password</th>


      <th>Avatar</th>

   <!--Chức năng xóa-->
    
      <th>Delete</th>

 <!---->
  </tr>

<?php //Thực hiện truy vấn $result=$conn->query("SELECT * FROM users");

//Lấy dữ liệu bằng fetch_objec
while($row=$result->fetch_object())
{
?>

<tr>
    
     <td><?php echo $row->id ?></td>


     <td><?php echo $row->username ?></td>


     <td><?php echo $row->email ?></td>


     <td><?php echo $row->password ?></td>


     <td><?php echo $row->avatar ?></td>

    <!--Xóa user bằng cách đưa một biến del lên URL của trình duyệt-->
    
     <td><a href="?del=<?php echo $row->id ?>">Xóa</a></td>

</tr>


<?php } ?>

  </table>

 </body>
</html>
<?php //Giải phóng vùng nhớ $result->free();

//Đóng kết nối

$conn->close();

?>

Giao diện của trang index.php đã thêm các chức năng đăng xuất hoặc xóa 1 user

III.Chức năng Xóa User



<td><a href="?del=<?php echo $row->id ?>">Xóa</a></td>


Khi nhấn vào Xóa user có ID=16 thì trình duyệt web sẽ nhận được URL như sau :

http://localhost:8080/PhanBietFetch/index.php?del=16

Khi đó nó sẽ thực hiện đoạn mã này để thực thi truy vấn :

isset dùng để kiểm tra xem biến $_GET[‘del’] có tồn tại hay không.


if(isset($_GET['del']))
{

   /*Thực hiện câu truy vấn để xóa một user có id bằng với giá trị của biến $_GET['del'] được lấy từ URL*/
    $sql="DELETE FROM users WHERE ID=".$_GET['del'];

   $result=$conn->query($sql);
if($result > 0)
{
    echo "Xóa thành công !";
}
else
    echo "Xóa không thành công !";
}

Sau khi thực hiện việc xóa User có ID=16 thì ta được kết quả :

IV.Chức năng đăng xuất


<span><a href="?state=logout">Đăng Xuất</a></span>

Khi nhấn vào Đăng Xuất thì trên trình duyệt sẽ có URL như sau :

http://localhost:8080/PhanBietFetch/index.php?state=logout

Ở trên phần đầu của file index.php có đoạn mã như sau :


//Bắt đầu phiên làm việc
session_start();

if(!$_SESSION['access'] || (time()-$_SESSION['time'])>1800 || (isset($_GET['state']) && $_GET['state']=="logout"))
{
     session_destroy();
     header("location:login.php");
}

Ở đoạn mã này nó sẽ kiểm tra quyền truy cập mà ban đầu trong file login.php đã tạo ra ,tiếp theo là thực hiện việc kiểm tra thời gian truy cập ,và cuối cùng là kiểm tra có tồn tại biên $_GET[‘state’] nào hay không nếu nó tồn tại và nó bằng logout thì tức có nghĩa người dùng đang yêu cầu logout ,thực hiện hủy phiên làm việc và chuyển hướng về file login.php.

Link Code :  Here

Tạo Form Đăng Nhập – Bài 3

I.Viết code cho file login.php


<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
</head>
<body>
<form  method="post" action="login.php">
<table>
     <!--Vùng này dùng để hiển thị thông báo -->
     <p id="error" style="color:red"></p>
     <tr>
        <td>Tên Đăng Nhập</td>
        <td><input type="text" name="username" id="username" required></td>
    </tr>
    <tr>
        <td>Mật Khẩu</td>
        <td><input type="text" name="password" id="password" required></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" name="login" value="Đăng Nhập"> <input onclick="Clear()" type="button" name="reset" value="Reset"></td>
    </tr>
</table>
</form>

<script style="text/javascript">
function Clear()
{
    document.getElementById('username').value="";
    document.getElementById('password').value="";
    document.getElementById('error').innerHTML="";
}
</script>
</body>
</html>

II.Viết code bắt và xử lý sự kiện Form POST

Đoạn code này viết trên cùng của file login.php 


<?php

//Tạo phiên làm việc
session_start();

//Yêu cầu file db.php

require("db.php");

//Biến SESSSION['message'] dùng để phản hồi kết quả đăng nhập
$_SESSION['message']="";

//Biến $_SESSION['access'] bắt buộc người dùng phải đăng nhập mới vào được trang index.php

$_SESSION['access']=false;

//Nếu có phương thức POST được yêu cầu gửi đến SERVER
if($_SERVER["REQUEST_METHOD"]=="POST")
{
   //Nếu cùng tồn tại cả 2 giá trị là username và password được gửi lên
   if(isset($_POST['username']) && isset($_POST['password']))
   {
     //Truy vấn để so khớp
     $result=$conn->query("SELECT * FROM users WHERE email='phongvxk38@gmail.com'");
     $user=$result->fetch_assoc();

        if($user['email']==$_POST['username'] && $user['password']==$_POST['password'])
        {

           //Nếu mật khẩu đã so khớp thì cho người dùng quyền truy cập
             $_SESSION['access']=true;

           //Thiết lập thời gian truy cập
             $_SESSION['time']=time();

           //Điều hướng sang trang index.php
            header("location:index.php");
         }
         else
             $_SESSION['message']="Sai tên đăng nhập hoặc mật khẩu !";
   }
}

?>

Để có thể hiện thị thông báo ra màn hình khi đăng nhập sai thì ta bổ sung vào đoạn mã bên dưới thẻ table


<!--Vùng này dùng để hiển thị thông báo -->
<p id="error" style="color:red"><?php echo $_SESSION['message']?></p>

Sau khi bổ sung các đoạn mã ta được file login.php như sau :


<?php

//Tạo phiên làm việc
session_start();

//Yêu cầu file db.php

require("db.php");

//Biến SESSSION['message'] dùng để phản hồi kết quả đăng nhập
$_SESSION['message']="";

$_SESSION['access']=false;

//Nếu có phương thức POST được yêu cầu gửi đến SERVER
if($_SERVER["REQUEST_METHOD"]=="POST")
{
    //Nếu cùng tồn tại cả 2 giá trị là username và password được gửi lên
    if(isset($_POST['username']) && isset($_POST['password']))
    {
       //Truy vấn để so khớp
       $result=$conn->query("SELECT * FROM users WHERE email='phongvxk38@gmail.com'");
       $user=$result->fetch_assoc();

       if($user['email']==$_POST['username'] && $user['password']==$_POST['password'])
       {
          $_SESSION['access']=true;
          $_SESSION['time']=time();
          header("location:index.php");
       }
       else
          $_SESSION['message']="Sai tên đăng nhập hoặc mật khẩu !";
    }
}

?>
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
</head>
<body>
<form style="margin:0 auto;" method="post" action="login.php">
<table>
      <!--Vùng này dùng để hiển thị thông báo -->
     <p id="error" style="color:red"><?php echo $_SESSION['message']?></p>
     <tr>
         <td>Tên Đăng Nhập</td>
          <td><input type="text" name="username" id="username" required></td>
     </tr>
     <tr>
         <td>Mật Khẩu</td>
         <td><input type="text" name="password" id="password" required></td>
     </tr>
     <tr>
         <td></td>
         <td><input type="submit" name="login" value="Đăng Nhập"> <input onclick="Clear()" type="button" name="reset" value="Reset"></td>
     </tr>
</table>
</form>

<script style="text/javascript">
function Clear()
{
    document.getElementById('username').value="";
    document.getElementById('password').value="";
    document.getElementById('error').innerHTML="";
}
</script>
</body>
</html>

III.Bổ sung bên file index.php

Chuyển sang trang index.php bổ sung đoạn mã này vào đầu


//Bắt đầu phiên làm việc
session_start();

//Kiểm tra người dùng có được quyền truy cập hay không

//Và kiểm tra thời gian truy cập nếu thời gian vượt quá 30 phút thì trả về form login

if(!$_SESSION['access'] || (time()-$_SESSION['time'])>1800)

{

    //Hủy phiên làm việc và điều hướng về trang login.php
    session_destroy();
    header("location:login.php");

}

File index.php sau khi bổ sung như sau :


<?php
//Bắt đầu phiên làm việc
session_start();

if(!$_SESSION['access'] || (time()-$_SESSION['time'])>1800)
{
     session_destroy();
     header("location:login.php");
}
//Yêu cầu file db.php

require("db.php");

//Thực hiện truy vấn

$result=$conn->query("SELECT * FROM users");

//Lấy dữ liệu bằng fetch_object
?>
<table border="1">
<tr>
    <th>ID</th>
    <th>Username</th>
    <th>Email</th>
    <th>Password</th>
    <th>Avatar</th>
</tr>
<?php
while($row=$result->fetch_object())
{
?>
<tr>
    <td><?php echo $row->id ?></td>
    <td><?php echo $row->username ?></td>
    <td><?php echo $row->email ?></td>
    <td><?php echo $row->password ?></td>
    <td><?php echo $row->avatar ?></td>
</tr>

<?php
}
?>

</table>

<?php
//Giải phóng vùng nhớ

$result->free();

//Đóng kết nối

$conn->close();

?>

Kết quả nếu đăng nhập thất bại thì sẽ xuất hiện thông báo lỗi :

Nếu đăng nhập thành công thì sẽ được điều hướng sang trang index.php thời gian thiết lập là 30 phút , và với điều kiện phải đăng nhập mới sang được trang index.php .

Link Code :  Here

 

Chèn PHP với HTML để xuất dữ liệu-Bài 2

I.Tách kết nối ra file db.php

Tạo một file mới tên là db.php trong file đó có đoạn code để kết nối csdl như sau :


<?php
//Thiết lập kết nối tới database sử dụng mysqli
//@param1 = database host
//@param2 = database user
//@param2 = database password
//@param3 = database name

$conn=new mysqli('localhost','root','','myapp') or die("Kết nối thất bại!");

//Dữ liệu hiển thị lên website là các từ có dấu dạng UTF8
$conn->query("SET NAMES UTF8");

?>

II.Chèn PHP vào HTML để xuất dữ liệu có định dạng

Trong file index.php có đoạn code sau :


<?php

//Yêu cầu file db.php

require("db.php");

//Thực hiện truy vấn

$result=$conn->query("SELECT * FROM users");

//Lấy dữ liệu bằng fetch_object
?>
<table border="1">
<tr>
     <th>ID</th>
     <th>Username</th>
     <th>Email</th>
     <th>Password</th>
     <th>Avatar</th>
</tr>
<?php
while($row=$result->fetch_object())
{
?>

<tr>

    <td><?php echo $row->id ?></td>
    <td><?php echo $row->username ?></td>
    <td><?php echo $row->email ?></td>
    <td><?php echo $row->password ?></td>
    <td><?php echo $row->avatar ?></td>
</tr>

<?php
}
?>

</table>

<?php
//Giải phóng vùng nhớ

$result->free();

//Đóng kết nối

$conn->close();

?>

Kết quả :

Lưu ý : Chú ý việc đóng mở thẻ để chèn giữa PHP và HTML hay HTML với PHP .

Link Code :  Here