Menu

8/2/21

Cấu trúc web boostrap

 1. Phải có HTML 5 Doctype

 2. Mobile first

<meta> 

width= device-width

initial-scale=1: Muc Zoom mac dinh ban dau

</meta>

3. Lop container

+ container: do rong co dinh

+ container-fluid: toan man hinh

-Hệ thống grid trong bootstrap có 4 class:

xs (thiết bị là phone)

sm (thiệt bị máy tính bảng)

md(màn hình desktop)

lg(màn hình desktop lớn)




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=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 + /

<!-- <b>dinh dang in dam</b><br> -->



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


   <b>dinh dang in dam</b><br>


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


   <u>dinh dang gach chan</u><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>


  <mark>danh dau mau nen noi bac (vang)</mark>


  <pre>giu 

      nguyen

     dinh dang van ban

  </pre>


  <p>Tài liệu học HTML</p>

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

   <p>Tài liệu học CSS</p>


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: &nbsp;

<p>lap&nbsp;trinh</p>

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

<p>lap&nbsp;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"

<p align="right">day la doan van ban</p> 

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 charset="UTF-8"> -->

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

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>session</title>

</head>

<body>

    <h1>VD1</h1>

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

    <a href="vidu2.php">

</html>

file vidu2.php

<?php

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

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

$n++;

$_SESSION['dem']=$n;

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>session</title>

</head>

<body>

    <h1>VD2</h1>

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

    <a href="vidu1.php">VD1</a>

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

</html>

file vidu3

<?php

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

unset($_SESSION['dem']);

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>session</title>

</head>

   <body>

<h1>VD3</h1>

Quay la vidu1

<a href="vidu1.php">VD1</a>

    </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.