# **# Web Functionality**
1. Front-end: FE(giao diện)
-HTML: xây dựng câu trúc và nội dung của 1 trang web.
-CSS: sử dụng để định dạng và trang trí giao diện
-Javascript: ngôn ngữ lập trình duyệt, sử dụng để làm cho trang web trở nên tương tác và động

chi tiết tại task tìm hiểu mtml:https://hackmd.io/@TBRog9ujQj2T8Pm0lEXnJQ/ByODw41C6/edit

2. Back-end: BE(bề chìa)
-server: một máy chủ chạy phần mềm phục vụ yêu cầu từ trình duyệt và trả về các trang web được tạo động
-Database: DB lưu trữ và quản lý giữ liệu của trang web, như thông tin người dùng, bài
-Ngôn ngữ lập trình back-end: như PHP, python,Ruby,Node.js, Java hay .NET

3. cách thức hoạt động của 1 trang web:
- Đầu tiên truy cập vào địa chỉ web, nhập ỦL của trang web vào trình duyệt => gửi yêu cầu đến máy chủ chứa trang web
- Xử lí yêu cầu: máy chủ xác nhận và xử lý nó, gửi đến giao thức truyền DNS
- Tại DNS sẽ mã hóa các tên miền thành địa chỉ IP cần thiết để tìm kiếm và truy cập vào các server máy chủ trang web được yêu cầu.
- trình duyệt nhận phản hồi và bắt đầu tải các tài nguyên(HTML, CSS, JavaScript, hình ảnh,...)-> xử lí và hiển thị trang web cho ng dùng
- Ng dùng tương tác với trang web

4. Server-side:
- chứa những thứ silent cần và cung cấp cho client
- xử lý Logic và dữ liệu: yêu cầu từ trình duyệt web được gửi đến máy chủ để xử lý logic của ứng dụng và truy vấn CSDL
- tạo và cung cấp nội dung động
- quản lí dữ liệu và tương tác database:nơi lưu trữ và quản lý các tương tác
- Bảo mật và quản lý phiên: xác thực, quản lí phiên làm việc
- có 3 loại:
- máy chủ riêng-Dedicated
- máy chủ ảo- Virtual Private Server (VPS)
- máy chủ đám mây - Cloud Server

https://fptcloud.com/server-la-gi/

5. Client-Side:
- thực hiện truy xuất, tìm kiếm
- chỉ các phần của ứng dụng hoặc hệ thống mà chạy trực tiếp trên thiết bị haocjw máy tính
- bao gồm mã HTML, CSS, JavaScript được tải và thực thi trên trình duyệt, các tính năng giao diện, hiệu ứng đồ họa và tương tác cũng đc xử lí tại đây

- Encoding
URL Encoding: là chuyển đổi ký tự ko an toàn hoặc ko hợp lệ trong URL thành mã ký tự thích hợp %xx(xx là mã ASCII của ký tự đó trong hệ hex) để đảm bảo được tính toàn vẹn của ỦL và tránh xung đột với cú pháp ỦL(ký tự ko an toàn gồm ký tự đặc biệt như dấu cách, ký tự ```&```,```#```,```.```,```:```,... ).
vd:
URL gốc:

    https://www.example.com/search?q=hello world

URL đã được URL encoded:

    https://www.example.com/search?q=hello%20world

Unicode Encoding: là quá trình ánh xạ biến đổi các ký tự Unicode thành các mã số hoặc byte(UTF-8, UTF-16, UTF-32) để có thể lưu trữ và truyền tải trên hệ thống máy tính hoặc mạng.
- UTF-8: 1-4 byte, sử dụng rộng rãi trên Internet và là phương thức phổ biến để lưu trữ và truyền tải văn bản Unicode
- UTF16: word(16-bit) hoặc (32-bit), sd rộng rãi trong các ứng dụng Windowns và hệ thống máy tính khác
- UTF32: mỗi 1 ký tự word(32-bit)
vd:
chuỗi Unicode chỉ gồm kí tự "A" => A có mã Unicode là U+0041=> số byte cần biểu diễn là 1 byte => sẽ biểu diễn mã Unicode U+ 0041 với giá trị nhị phân là 01000001

HTML Encoding: là quá trình chuyển đổi các ký tự đặc biệt ko hợp lệ trong html(như ```<```, ```>```,```&```,```'```) nhằm ngăn chặn các ký tự đặc biệt gây ra sự cố hoặc sự nhầm lẫn với cú pháp.
một số ký tự và phiên bản mã hóa tương ứng trong HTML:
- ```&``` được mã hóa thành &amp;
- ```<``` được mã hóa thành &lt;
- ```>``` được mã hóa thành &gt;
- ```"``` được mã hóa thành &quot;
- ```'``` được mã hóa thành &#39; hoặc &apos; (phiên bản XML)
vd:

   a <b>bold</b>

bằng

   a <b>bold</b>

Base64 Encoding: là phương pháp mã hóa dữ liệu thành 1 chuỗi ASCII sử dụng trong các ứng dụng truyền tải và lưu trữ dữ liệu như email và lưu trữ dữ liệu nhị phân dưới dạng văn bản.
- chia dữ liệu thành các nhóm: thường nhóm là 3byte(24 bit)
- chuyển đổi thành mã Ascii: 3 byte(24bit) chuyển thành 1 số nguyên 24 bit-> chia thành 4 số nguyên 6 bit
- mã hóa thành ký tự ascii: mỗi số nguyên 6 bit đc ánh xạ thành 1 ký tự ASCII sử dụng bảng mã base 64(gồm 64 ký tự)
- thêm ký tự padding:trong TH số byte ko chia hết cho 3 thì ký tự padding sẽ đc thêm vào cuối chuỗi mã hóa để đảm bảo số lượng ký tự mã hóa là bội số của 4
Hex Encoding: mã hóa hex, chuyển từ nhị phân snag hệ số 16. trong mã hóa hex, mỗi byte của dữ liệu đầu vào đc biểu diễn bằng 2 ký tự hexa(hay 8bit đc biểu diễn bằng 2 ký tự hẽa)
ví dụ

    1101 1010

sang

    DA

Tìm hiểu: HTTP Protocol, HTTP Request, HTTP Response, HTTP Method, HTTP Header, Cookie, HTTPS, HTTP Authentication.
- HTTP Protocol: là giao thức truyền tải dữ liệu trên mạng InterneT. Giao thức này hđ dựa trên mô hình TCP/IP và sử dụng cổng mặc định 80.
- HTTP Request: là thông điệp yêu cầu gửi đến trình duyệt hoặc là web để yêu cầu tài nguyên cụ thể bằng các phương thức GET, POST, PUT, DELETE,..yêu cầu này chứa các thông tin như địa chỉ ỦL, phương thức yêu cầu, thông tin và các tham số khác.
- HTTP Response: là thông điệp mà máy chủ web gửi lại cho trình duyệt hoặc ứng dụng khi nhận đucợ 1 yêu cầu HTTP. Phản hồi này bao gồm mã trạng thái, thông tin tài nguyên
- HTTP Method : xác định loại hoạt động mà yêu cầu sẽ thực hiện trên tài nguyên. Các phương thức phổ biến nhất trong HTTP bao gồm GET, POST, PUT, DELETE, PATCH, HEAD.
- HTTP Header: yêu cầu hoặc phản hổi và chứa các thông tin bổ sung.
- General Headers
- Request Heaaders
- Response Headers
- Entity Headers
- cookie là cách để máy chủ web lưu trữ thông tin trên máy tính của ng dùng. cookie thường sử dụng để theo dõi và xác định ng dùng khi họ quay lại trang web.
- HTTPS: là một biến thể của giao thức HTTP được sử dụng để bảo mật dữ liệu truyền tải giữa trình duyệt của ng dùng và máy chủ web
- chức năng:
- mã hóa dữ liệu
- chứng thực máy chủ
- chứng thực ng dùng
- HTTP Authentication: xác minh danh tính ng dùng khi họ cố gắng truy cập vào một trang web hoặc tài nguyên bảo vệ. Cơ chế này đòi hỏi ng dùng cung cấp thông tin xác thực như tên ng dùng và mật khẩu để được truy cập
- phương thức:
- Basic Authentication: đơn giản nhất(tên ng dùng và mật khẩu đc gửi dưới dạng văn bản ko đc mã hóa)
- Digest Authentication: thông tin đc gửi dưới dạng vân tay
- Bearer Authentication: ng dùng cần cung cấp một token(như mã thông báo truy cập) để chứng minh

# ***Code một trang web bằng PHP có chức năng đăng kí, đăng nhập, upload file với method POST**
- tạo FE:
register

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello my host!</title>
    <style>
        .pageTitle {
            color: rgb(107, 107, 207);
            text-align: center;
        }
    </style>
</head>
<body>
    <img src="image/logo.png">
    <h1 class="pageTitle">Trang đăng ký trải nghiệm</h1>
    <form action="./handleRegister.php" method="POST">
        <table cellpadding="0" cellspacing="0">
            
            <tr>
                <td>
                    Họ và tên :
                </td>
                <td>
                    <input type="text" name="txtFullname" size="50" required />
                </td>
            </tr>
            <tr>
                <td>
                    Mật khẩu :
                </td>
                <td>
                    <input type="password" name="txtPassword" size="50" required />
                </td>
            </tr>
            <tr>
                <td>
                    Email :
                </td>
                <td>
                    <input type="email" name="txtEmail" size="50" required />
                </td>
            </tr>
        </table>
        <input type="submit" value="Đăng ký"  />
    </form>
</body>
</html>

login

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello my host!</title>
    <style>
        .pageTitle {
            color: rgb(107, 107, 207);
            text-align: center;
        }
    </style>
</head>
<body>
    <img src="image/logo.png">
    <h1 class="pageTitle">Đăng nhập</h1>
    <form action="./handleLogin.php" method="POST">
        <table cellpadding="0" cellspacing="0">
            
            <tr>
                <td>
                    Họ và tên :
                </td>
                <td>
                    <input type="text" name="txtFullname" size="50" required />
                </td>
            </tr>
            <tr>
                <td>
                    Mật khẩu :
                </td>
                <td>
                    <input type="password" name="txtPassword" size="50" required />
                </td>
            </tr>
        </table>
        <input type="submit" value="Đăng nhập"  />
    </form>
</body>
</html>

- 1 số lưu ý khóa trong quá trình tạo FE
- ```<!DOCTYPE html>```: là khai báo mà nó xác định phiên bản HTML mà trình duyệt nên sử dụng để hiển thị trang web.
- ```<html>```: thẻ bắt đầu tài liệu HTML
- ```<head>```: thẻ định nghĩa phần đầu của tài liệu, chứa tiêu đề, phong cách và các đường dẫn tài nguyên khác
- ```<meta>```: chứa dữ liệu
- ```<title>```: xác định tiêu đề của trang web, sẽ được hiển thị trên thanh tiêu đề của trình duyệt
- ```<style>```: thẻ này chứa quy tắc CSS để định dạng nội dung của trang web
- ```<body>```: đánh dấu phần thân của tài liệu, chứa toàn bộ nội dung hiển thị trên trình duyệt.
- ```<img>```: chèn ảnh có đường dẫn là 'image/logo.png'
- ```<h1>```: đánh dấu tiêu đề cấp 1 của trang web
- ```<form>```: định nghĩa 1 biểu mẫu
- ```<input>```: thẻ định nghĩa 1 trường nhập liệu cho biểu mẫu
- ```<table>```: thẻ này tạo bảng để sắp xếp các trường nhập liệu của biểu mẫu
- ```<tr>```: thẻ này định nghĩa 1 hàng trong bảng
- ```<td>```: thẻ này định nghĩa 1 ô trong bảng, chứa nội dung của mỗi ô.
- ```<input type= "submit"```: thẻ này định nghĩa nít gửi trong biểu mẫu, cho phép ng dùng gửi thông tin nhập liệu
- cần phải truy cập vào controller trc khi đến ./handleLogin.php (```./``` là cung thư mục;```../``` khác thư mục)
**./handleLogin.php**

<?php
//get connection to db
$conn = require "./connection.php";
include "./user.php";
if ($_SERVER["REQUEST_METHOD"]=="POST") {
$password = $_POST["txtPassword"];
$name = $_POST["txtFullname"];
    try {
        $user = new User(1, $name, $password, "");
        //id này sẽ kh đc thêm vào nên tạo cho đủ thoi
    
        User::login($conn, $user);
        echo "Login successfully!";
    }
    catch (Exception $e) {
        echo $e;
    }
}

note: $_POST[""] sẽ khóa là thuộc tính name và đc submit lên bằng method post
- kiểu tra đường dẫn liên kết hình ảnh hay tệp chính xác để đảm bảo chức năng đăng kí đăng nhập
**./user.php**

<?php 
class User {
    public $id;
    public $name;
    public $password;
    public $email;

    public function __construct ($id, $name, $password, $email) {
        $this->id = $id;
        $this->name = $name;
        $this->password = $password;
        $this->email = $email;
    }

    public static function register ($conn, $user) {
        $query = "INSERT INTO users (name, password, email) VALUES(:name, :password, :email)";
        $stmt = $conn->prepare($query);
        $stmt->bindParam(":name", $user->name);
        $stmt->bindParam(":password", $user->password);
        $stmt->bindParam(":email", $user->email);
        return $stmt->execute();
    }

    public static function login ($conn, $user) {
        $query = "SELECT * FROM users WHERE name = :name AND password = :password";
        $stmt = $conn->prepare($query);
        $stmt->bindParam(":name", $user->name);
        $stmt->bindParam(":password", $user->password);
        return $stmt->execute();
    }
}

note:
cần mở xampp tạo bẳng với các bảng
__construct() để khởi tạo đối tượng mới User với các thuộc tính đã đc dùng
register(): dùng để thêm 1 ng mới vào cơ sở dữ liệu
- $conn: kết nối đến cơ sở dữ liệu
- $user: đối tượng cần thêm
login():kiểm tra xem thông tin đăng nhập có hợp lệ hay ko

tạo liên kết đến CSDL được tạo trong xampp
connection.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "taskctf";
$conn;
try {
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
}
return $conn;
?>
kêt nối <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "taskctf";
$conn;
try {
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
}
return $conn;
?>

note: $conn: dùng để kết nối mà ko gán giá trị ban đầu
trả về kết nối: ```return $conn;```

handleLogin.php

<?php
//get connection to db
$conn = require "./connection.php"; 
include "./user.php";
if ($_SERVER["REQUEST_METHOD"]=="POST") {
$password = $_POST["txtPassword"];
$name = $_POST["txtFullname"];
    try {
        $user = new User(1, $name, $password, "");
        //id này sẽ kh đc thêm vào nên tạo cho đủ thoi
    
        User::login($conn, $user);
        echo "Login successfully!";
    }
    catch (Exception $e) {
        echo $e;
    }
}

dùng để xử lí đăng nhập của 1 ng dùng từ biểu mẫu
$conn = require "./connection.php"; dùng để kết nối từ tệp connection.php

handleRegister.php

<?php
//get connection to db
$conn = require "./connection.php";
include "./user.php";
if ($_SERVER["REQUEST_METHOD"]=="POST") {
$password = $_POST["txtPassword"];
$email = $_POST["txtEmail"];
$name = $_POST["txtFullname"];
    try {
        $user = new User(1, $name, $password, $email);
        //id này sẽ kh đc thêm vào nên tạo cho đủ thoi
        
        User::register($conn, $user);
        echo "Register successfully!";
    }
    catch (Exception $e) {
        echo $e;
    }
}

để đảm bảo trang web có thể hiển thị đúng trên các thiết bị và trình duyệt khác nhau
test.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>tesrt</p>
</body>
</html>

<?php
if (isset($_FILES["fileToUpload"])) { 
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}}
?>

<!DOCTYPE html>
<html>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

cho phép ng dùng chọn và tải 1 tập tin hình ảnh

tạo tệp hình ảnh upload.php(chứa hình ảnh)