Ngu ngơ học làm web (91) - PDO – hiển thị dạng lưới

Tiếp theo của: Ngu ngơ học làm web (90) - PDO - thêm dữ liệu vào CSDL
-----

Phần 91. PDO – hiển thị dạng lưới


Xem và làm theo clip số 17 của thầy Nguyễn Anh Tuấn:

Để thay đổi kích thước của một div theo nội dung, thiết lập “display: inline-block”

Khi “display: inline-block”, để căn giữa: thiết lập cho phần tử cha của nó là “text-align: center”

Lưu lại đoạn mã để tiện tham khảo:

default.css

body { background: #ccc;       text-align: center;}
h1 { text-align: center;            color: #F00;}
#main { width: 750px;            border: #f00 solid 1px; background: #fff; display: inline-lock;}
.khung { width: 200px; height: 300px; border: #999 solid 1px; padding: 10px; margin: 10px; float: left;
}
img.cangiua {  display: block; margin-left: auto; margin-right: auto; }
.khung img { width: 150px;}
.tenmon { text-align: center; font-weight: bold;}
.gia {   color: #D98A17;}

danh_sach_mon_an.php

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Danh sách món ăn</title>
            <link rel="stylesheet" href="default.css">
</head>
<?php
            include("connection.php");
            $sql = "SELECT ma_mon,ten_mon,noi_dung_tom_tat,don_gia,hinh FROM mon_an";
            $stmt = $pdo->prepare($sql);
            $stmt->execute();
            if($stmt->rowcount() > 0){
                        $mon_an = $stmt->fetchAll(PDO::FETCH_OBJ);
            }
?>
<body>
<div id="main">
            <h1>Danh sách món ăn  </h1>
            <?php
            for($i = 0; $i < count($mon_an); $i++) {
            ?>
            <div class="khung">
                        <img class="cangiua" src="<?php echo $mon_an[$i]->hinh; ?>" alt="Hình">
                        <p class="tenmon"><?php echo $mon_an[$i]->ten_mon; ?></p>
                        <p><?php echo $mon_an[$i]->noi_dung_tom_tat; ?></p>
                        <p class="gia">Giá:<?php echo number_format($mon_an[$i]->don_gia); ?> VNĐ</p>
            </div>
            <?php
            }
            ?>
</div>
<?php
            $pdo->NULL;
?>
</body>

</html>
-----------
Cập nhật 24/2/2017
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web

Ngu ngơ học làm web (109) - PDO - thêm dữ liệu vào CSDL

Tiếp theo của: Ngu ngơ học làm web (108) - Upload tập tin trong PHP
-----

Phần 109. PDO - thêm dữ liệu vào CSDL


Xem và làm theo clip số 16 của thầy Nguyễn Anh Tuấn:

Phần này có kiểm tra xem người dùng đã nhập thông tin cho các ô nhập liệu hay chưa? sử dụng Javascript, ví dụ ở đây là kiểm tra phần nhập Tên món ăn, việc kiểm tra được thực hiện khi người dùng bấm nút Lưu.

<td colspan="4" align="center"><input type="submit" value="Lưu" name="th_luu" onclick="return kiem_tra_mon_an()"></td>

Đây là nội dung của tập tin thuvien.js,

function kiem_tra_mon_an() {
            var ten_mon = document.getElementById('th_ten_mon');
            if(ten_mon.value == ""){
                        alert('Nhập tên món ăn');
                        ten_mon.focus();
                        return false;
            }
            return true;
}

Đây là nội dung của tập tin default.css,

body { background: #ccc; }
h1 { text-align: center; color: #F00;  }
#main { width: 700px; margin: 0 auto; border: #f00 solid 1px; background: #fff; }
.khung { width: 680px; height: 200px; border-bottom: #999 solid 1px;  padding: 10px; }
.khung img { width: 250px; float: left; margin-right: 10px; }

Đây là nội dung của tập tin connection.php,

<?php
try
{
            //Khai báo đối tượng PDO
            $pdo = new PDO("mysql:host=localhost;dbname=ql_nha_hang","root","");
            //Xuất tiếng Việt
            $pdo->query("SET NAMES UTF8");
}
catch (PDOException $ex)
{
            die($ex->getMessage());
}
?>

Đây là nội dung của tập tin them_mon_an.php,

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Thêm món ăn</title>
            <link rel="stylesheet" href="default.css">
            <script src="thuvien.js"></script>
</head>
<?php
            include("connection.php");
            $err = '';
            //Đọc bảng loại món ăn
            $sql = "SELECT ma_loai, ten_loai FROM loai_mon_an";
            //Tạo một prepared statement
            $stmt = $pdo->prepare($sql);
            //Thực thi prepared statement
            $stmt->execute();
            //Chuyển kết quả truy vấn sang một đối tượng
            if($stmt->rowcount() > 0){
                        $loai_mon = $stmt->fetchAll(PDO::FETCH_OBJ);
            }
            if(isset($_POST['th_luu'])){
                        //Lấy thông tin từ form gán vào các biến
                        $ma_mon = NULL;
                        $ma_loai = $_POST['th_ma_loai'];
                        $ten_mon = $_POST['th_ten_mon'];
                        $noi_dung_tom_tat = $_POST['th_noi_dung_tom_tat'];
                        $noi_dung_chi_tiet = $_POST['th_noi_dung_chi_tiet'];
                        $don_gia = $_POST['th_don_gia'];
                        $don_gia_khuyen_mai = $_POST['th_don_gia_khuyen_mai'];
                        $khuyen_mai = $_POST['th_khuyen_mai'];
                        $hinh = $_FILES['th_hinh']['error'] == 0 ? $_FILES['th_hinh']['name'] : '';
                        $ngay_cap_nhat = $_POST['th_ngay_cap_nhat'];
                        $dvt = $_POST['th_dvt'];
                        $trong_ngay = $_POST['th_trong_ngay']=='on' ? 1 : 0;
                        //Tạo lệnh thêm dữ liệu vào CSDL
                        $sql = 'INSERT INTO mon_an VALUES(?,?,?,?,?,?,?,?,?,?,?,?)';
                        //Khai báo mảng tham số
                        $param = array($ma_mon, $ma_loai, $ten_mon, $noi_dung_tom_tat, $noi_dung_chi_tiet, $don_gia, $don_gia_khuyen_mai, $khuyen_mai, $hinh, $ngay_cap_nhat, $dvt, $trong_ngay);
                        $stmt = $pdo -> prepare($sql);
                        $kq = $stmt -> execute($param);
                        if($kq){
                                    $err = 'Thêm dữ liệu thành công!';
                                    //Di chuyển hình về thư mục chứa hình
                                    if($hinh !=''){
                                                $kt = move_uploaded_file($_FILES['th_hinh']['tmp_name'], "images/$hinh");
                                                if($kt){
                                                            $err .= 'upload hình thành công';
                                                }else{
                                                            $err .= 'upload hình không thành công';
                                                }
                                    }
                        }else{
                                    $err = 'Quá trình thêm dữ liệu không thành công!';
                        }
            }

           
?>
<body>
<h3 style="color:red"><?php echo $err; ?></h3>
<div id="main">
            <h1>Món ăn mới</h1>
            <form action="them_mon_an.php" name="ManHinhThemMon" method="POST" enctype="multipart/form-data">
            <table class="center" cellpadding="2px">
                        <tr>
                                    <td width="150px" bgcolor="B0D1EA">Tên món ăn</td>
                                    <td colspan="3"><input type="text" name="th_ten_mon" id="th_ten_mon" style="width:300px" value=""></td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Loại món ăn</td>
                                    <td colspan="3">
                                                <select style="width:150px" name="th_ma_loai">
                                                <?php
                                                            foreach ($loai_mon as $loai) {
                                                ?>
                                                                        <option value="<?php echo $loai->ma_loai; ?>"><?php echo $loai->ten_loai; ?></option>
                                                <?php
                                                }
                                                ?>
                                                </select>
                                    </td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Nội dung tóm tắt</td>
                                    <td colspan="3"> <textarea name="th_noi_dung_tom_tat" id="th_noi_dung_tom_tat" cols="40" rows="5"></textarea> </td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Nội dung chi tiết</td>
                                    <td colspan="3"> <textarea name="th_noi_dung_chi_tiet" id="th_noi_dung_chi_tiet" cols="40" rows="5"></textarea> </td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Đơn giá</td>
                                    <td><input type="text" name="th_don_gia" id="th_don_gia" style="width:100px" value=""></td>
                                    <td bgcolor="B0D1EA">Đơn giá khuyến mãi</td>
                                    <td><input type="text" name="th_don_gia_khuyen_mai" id="th_don_gia_khuyen_mai" style="width:100px" value=""></td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Hình</td>
                                    <td colspan="3"><input type="file" name="th_hinh" id="th_hinh" value=""></td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Ngày cập nhật</td>
                                    <td><input type="text" name="th_ngay_cap_nhat" id="th_ngay_cap_nhat" style="width:100px" value=""></td>
                                    <td bgcolor="B0D1EA">Đơn vị tính</td>
                                    <td><input type="text" name="th_dvt" id="th_dvt" style="width:100px" value=""></td>
                        </tr>
                        <tr>
                                    <td bgcolor="B0D1EA">Khuyến mãi</td>
                                    <td><input type="text" name="th_khuyen_mai" id="th_khuyen_mai" style="width:100px" value=""></td>
                                    <td bgcolor="B0D1EA">Trong ngày</td>
                                    <td><input type="checkbox" name="th_trong_ngay" id="th_trong_ngay"></td>
                        </tr>
                        <tr>
                                    <td colspan="4" align="center"><input type="submit" value="Lưu" name="th_luu" onclick="return kiem_tra_mon_an()"></td>
                        </tr>
            </table>
            </form>
</div>
<?php
            $pdo->NULL;
?>
</body>
</html>

Qua phần này sẽ học được các nội dung sau:

- Thiết kế giao diện bằng HTML, CSS (client-side)

- Kiểm tra việc nhập dữ liệu bằng Javascript (client-side)

- Đọc dữ liệu từ cơ sở dữ liệu để hiển thị lên form (server-side)

- Lưu dữ liệu từ form vào cơ sở dữ liệu (server-side)

Để ý sự khác nhau giữa nháy đơn và nháy kép ở đây:

$kt = move_uploaded_file($_FILES['th_hinh']['tmp_name'], "images/$hinh");


Thử thay là: $kt = move_uploaded_file($_FILES['th_hinh']['tmp_name'], ‘images/$hinh’); rồi chạy lại để xem sự khác nhau.
-----------
Cập nhật 22/2/2017
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web

Ngu ngơ học làm web (108) - Upload tập tin trong PHP

Tiếp theo của: Ngu ngơ học làm web (107) - PHP Data Object – prepared statement
-----

Phần 108. Upload tập tin trong PHP


Trong clip số 16 của thầy Nguyễn Anh Tuấn có phần upload tập tin, nên sẽ tìm hiểu về cách upload một tập tin lên web server.

Cùng đọc và làm theo hướng dẫn của tác giả Trần Nam tại đây: http://kienthucweb.net/huong-dan-lap-trinh-xu-ly-upload-file-trong-php.html

Ghi lại một số ý để tiện tham khảo.

Bật chức năng cho phép upload tập tin của PHP:

- Mở tập tin php.ini

- Thiết lập cho hàng file_uploads giá trị là On, “file_upload = On”

Tạo một form, trong đó có chức năng upload tập tin.

            <form action="upload.php" method="POST" enctype="multipart/form-data">
                        Tập tin: <input type="file" name="uploadFile"><br>
                        <input type="submit" value="Tải lên">
            </form>

Lưu ý: form phải có thêm thuộc tính enctype=“multipart/form-data”. Enctype là viết tắt của encoded type.

Chưa biết cách làm sao để chuyển “Choose File và No file chosen” ở phần hiển thị sang tiếng Việt.

Ở ví dụ này, sau khi người dùng chọn một tập tin và bấm nút “Tải lên”, trang upload.php sẽ nhận được các thông tin của tập tin vừa được gửi, các thông tin này chứa trong biến $_FILES, gồm:

- $_FILES[‘uploadFile][‘name’]: tên tập tin

- $_FILES[‘uploadFile][‘type’]: định dạng của tập tin

- $_FILES[‘uploadFile][‘name’]: kích thước của tập tin, tính bằng byte

Các bước xử lý khi upload một tập tin gồm:

- Kiểm tra biến $_POST xem người dùng đã bấm nút “Tải lên” chưa?

- Kiểm tra biến $_FILES xem người dùng đã chọn tập tin ở máy tính chưa?

- Kiểm soát loại tập tin tải lên, để đảm bảo an toàn cho ứng dụng.

- Chuyển tập tin ở nơi chứa tạm về vị trí mong muốn.

Ví dụ sau chỉ cho phép người dùng tải tập tin ảnh, có kích thước không vượt quá 2MB.

Cần tạo sẵn thư mục images trên web server. Ở ví dụ này, thư mục images cùng cấp với tập tin upload.php.

Lưu lại đoạn mã để tham khảo:

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Upload file</title>
</head>
<?php
            if(isset($_POST['submit'])){ //Đã bấm submit
                        if($_FILES['uploadFile']['name'] != NULL){ //Đã chọn tập tin
                                    //Tiến hàng upload tập tin
                                    if($_FILES['uploadFile']['type'] == 'image/jpeg'
                                    || $_FILES['uploadFile']['type'] == 'image/png'
                                    || $_FILES['uploadFile']['type'] == 'image/gif'){
                                                //Là tập tin ảnh
                                                if($_FILES['uploadFile']['size'] > 2097152){
                                                            echo 'Tập tin không được lớn hơn 2MB!';
                                                }else{
                                                            //Tập tin hợp lệ, tiến hành upload
                                                            $path = 'images/'; //Thư mục sẽ chứa các tập tin
                                                            $tmp_name = $_FILES['uploadFile']['tmp_name']; //Lấy đường dẫn tạm của tập tin
                                                            $name = $_FILES['uploadFile']['name'];
                                                            $type = $_FILES['uploadFile']['type'];
                                                            $size = $_FILES['uploadFile']['size'];
                                                            //Chuyển tập tin từ thư mục tạm về thư mục mong muốn
                                                            move_uploaded_file($tmp_name, $path.$name);
                                                            echo 'Tải tập tin thành công! <br>';
                                                            echo 'Tên tập tin: '.$name.'<br>';
                                                            echo 'Định dạng: '.$type.'<br>';
                                                            echo 'Kích thước: '.$size.' MB';
                                                }
                                    }else {
                                                echo 'Tập tin phải là hình ảnh!';
                                    }
                        }else{
                                    echo 'Vui lòng chọn tập tin!';
                        }
            }
?>
<body>
            <form action="upload.php" method="POST" enctype="multipart/form-data">
                        Tập tin: <input type="file" name="uploadFile" id="uploadFile" text="HI"><br>
                        <input type="submit" value="Tải lên" name="submit">
            </form>
</body>

</html>
-----------
Cập nhật 20/2/2017
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web

Ngu ngơ học làm web (107) - PHP Data Object – prepared statement

Tiếp theo của: Ngu ngơ học làm web (106) - Kết hợp PHP – mySQL –  thư viện PDO (tt)
-----

Phần 107. PHP Data Object – prepared statement


Xem và làm theo clip số 15 của thầy Nguyễn Anh Tuấn:


Đối với lệnh SQL có tham số động, không nên truyền câu lệnh SQL trực tiếp thông qua chuỗi, mà nên sử dụng prepared statement để tránh bị tấn công SQL injection.


Để sử dụng prepared statement, thực hiện các bước sau:

- Tạo câu truy vấn,

$sql = "SELECT ma_mon, ten_mon, noi_dung_tom_tat, don_gia, hinh FROM mon_an";

- Sử dụng hàm prepare() để tạo một prepared statement. Ví dụ,

$stmt = $pdo->prepare($sql);

- Thực thi một prepared statement bằng hàm execute(). Ví dụ,

$stmt->execute();       

- Chuyển kết quả truy vấn từ prepared statement sang một mảng hoặc một mảng các đối tượng.

Ví dụ sau trả về một mảng các đối tượng kiểu stdClass, với tên thuộc tính của đối tượng tương ứng với tên của cột,

if($stmt->rowcount() > 0){
                        $mon_an = $stmt->fetchAll(PDO::FETCH_OBJ);
            }

Lưu lại các đoạn mã để tham khảo.

Đoạn mã của default.css

body { background: #ccc; }
h1 { text-align: center; color: #F00;  }
#main { width: 700px; margin: 0 auto; border: #f00 solid 1px; background: #fff; }
.khung { width: 680px; height: 200px; border-bottom: #999 solid 1px;  padding: 10px; }
.khung img { width: 250px; float: left; margin-right: 10px; }

Đoạn mã của ds_mon_an.php

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Danh sách món ăn</title>
            <link rel="stylesheet" href="default.css">
</head>
<?php
            include("connection.php");
            //Tạo câu truy vấn
            $sql = "SELECT ma_mon, ten_mon, noi_dung_tom_tat, don_gia, hinh FROM mon_an";
            //Tạo một prepared statement
            $stmt = $pdo->prepare($sql);
            //Thực thi prepared statement
            $stmt->execute();
            //Chuyển kết quả truy vấn sang một mảng các đối tượng
            if($stmt->rowcount() > 0){
                        $mon_an = $stmt->fetchAll(PDO::FETCH_OBJ);
            }
?>
<body>
<div id="main">
            <h1>Danh sách món ăn</h1>
<?php
            foreach ($mon_an as $item) {
?>
            <div class="khung">
                        <img src="><?php echo $item ->hinh; ?>" alt="Hinh">
                        <h3><?php echo $item ->ten_mon; ?></h3>
                        <?php echo $item ->noi_dung_tom_tat; ?>
                        <p>Đơn giá: <?php echo $item ->don_gia; ?> VNĐ</p>
            </div>
<?php
}
?>
</div>
<?php
            $pdo->NULL;
?>
</body>

</html>
-----------
Cập nhật 16/2/2017
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web

Ngu ngơ học làm web (106) - Kết hợp PHP – mySQL – thư viện PDO (tt)

Tiếp theo của: Ngu ngơ học làm web (105) - Kết hợp PHP – mySQL –  thư viện PDO
-----

Phần 106. Kết hợp PHP – mySQL –  thư viện PDO (tt)


Xem và làm theo clip số 13 của thầy Nguyễn Anh Tuấn:


Như vậy, tới đây đã biết được một số bước để làm việc với cơ sở dữ liệu, như:

- Tạo một đối tượng PDO, kết nối tới cơ sở dữ liệu mySQL

- Tạo câu truy vấn

- Dùng đối tượng PDO để thực thi câu truy vấn, kết quả của truy vấn được chứa trong một biến mảng của PHP

- Xuất biến mảng theo yêu cầu

- Đóng kết nối tới cơ sở dữ liệu mySQL

Trong clip 13 có sử dụng tới bảng user, vì vậy sẽ tạo thêm bảng này và thêm một số mẩu tin vào để thực hành.

user
#
Name
Type
Collation
Attributes
Null
Default
Extra
1
id
int(11)


No
None
AUTO_INCREMENT
2
username
varchar(50)


No
None

3
password
varchar(50)


No
None

4
fullname
varchar(100)
utf8_unicode_ci




5
birthday
date


No
None

6
gender
boolean


No
None

7
address
varchar(200)
utf8_unicode_ci

No
None

8
email
varchar(50)


No
None

9
Identitycard
varchar(20)


No
None

10
Phonenumber
varchar(20)


No
None


Ghi lại đoạn mã để tham khảo, đoạn mã dưới đây có sử dụng try – catch để bẫy lỗi.

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Thông tin người dùng</title>
</head>
<?php
try
{
            //Khai báo đối tượng PDO
            $pdo = new PDO("mysql:host=localhost;dbname=ql_nha_hang","root","");
            //Xuất tiếng Việt
            $pdo->query("SET NAMES UTF8");
            //Tạo câu truy vấn
            $sql = "SELECT * FROM user";
            //Thực thi câu truy vấn, các mẩu tin kết quả chứa trong biến $nguoi_dung
            $nguoi_dung = $pdo->query($sql);
}
catch (PDOException $ex)
{
            die($ex->getMessage());
}
?>
<body>
<?php
            if($nguoi_dung->rowcount() > 0 ){
?>
<table width="800" border="0" cellspacing="5" cellpadding="5" align="center">
            <caption>
                        <h2>THÔNG TIN NGƯỜI DÙNG</h2>
            </caption>
            <tr>
                        <td>Họ tên</td>
                        <td>Địa chỉ</td>
                        <td>Email</td>
                        <td>Điện thoại</td>
                        <td>Ngày sinh</td>
            </tr>
<?php
            foreach ($nguoi_dung as $nd) {
?>
            <tr>
                        <td><?php echo $nd[fullname] ?></td>
                        <td><?php echo $nd[address] ?></td>
                        <td><?php echo $nd[email] ?></td>
                        <td><?php echo $nd[phonenumber] ?></td>
                        <td><?php echo $nd[birthday] ?></td>
            </tr>  
<?php } ?>
</table>
<?php }
            $pdo->NULL;
?>
</body>
</html>

Xem và làm theo clip số 14 của thầy Nguyễn Anh Tuấn:


Phần này sẽ tách đoạn mã kết nối cơ sở dữ liệu sang một tập tin riêng. Ví dụ, tập tin tên là connection.php.

<?php
try
{
            //Khai báo đối tượng PDO
            $pdo = new PDO("mysql:host=localhost;dbname=ql_nha_hang","root","");
            //Xuất tiếng Việt
            $pdo->query("SET NAMES UTF8");
}
catch (PDOException $ex)
{
            die($ex->getMessage());
}
?>

Đây là đoạn mã trong tập tin hien_thi_tin_tuc.php.

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Danh sách tin tức</title>
</head>
<?php
            include("connection.php");
            //Tạo câu truy vấn
            $sql = "SELECT * FROM tin_tuc";
            //Thực thi câu truy vấn, các mẩu tin kết quả chứa trong biến $tin_tuc
            $tin_tuc = $pdo->query($sql);
?>
<body>
<?php
            if($tin_tuc->rowcount() > 0 ){
?>
<table width="800" border="0" cellspacing="5" cellpadding="5" align="center">
            <caption>
                        <h2>THÔNG TIN TIN TỨC</h2>
            </caption>
            <tr>
                        <td>Tiêu đề</td>
                        <td>Tóm tắt</td>
                        <td>Tác giả</td>
                        <td>Ngày đăng</td>
                        <td>Số lượt xem</td>
            </tr>
<?php
            foreach ($tin_tuc as $item) {
?>
            <tr>
                        <td><?php echo $item[tieu_de] ?></td>
                        <td><?php echo $item[tom_tat] ?></td>
                        <td><?php echo $item[tac_gia] ?></td>
                        <td><?php echo $item[ngay_dang] ?></td>
                        <td><?php echo $item[so_luot_xem] ?></td>
            </tr>  
<?php } ?>
</table>
<?php }
            $pdo->NULL;
?>
</body>

</html>
-----------
Cập nhật 15/2/2017
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web