Chương 10-Bài 15. Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - In ấn Print

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 6/3/2025, 19:43

Lượt xem: 265

Thực hiện chức năng xuất biểu mẫu và In ấn trực tiếp trên web Danh sách sản phẩm (print)

Biểu mẫu In ấn Đơn đặt hàng

Step 1: cài đặt các thư viện CSS

Cài đặt thư viện CSS để quy định kích thước khổ giấy khi in PaperCSS

Ta sẽ sử dụng thư viện định dạng kích thước khổ giấy ParerCSS. Trang chủ: https://github.com/cognitom/paper-css
Download file paper.css hoặc paper.min.css
Chép vào thư mục /assets/vendor/paper-css

Step 2: tạo chức năng In ấn `print` dùng để hiển thị biểu mẫu Đơn hàng

Khi thiết kế biểu mẫu để in ấn, chúng ta chỉ nên sử dụng một số định dạng HTML và CSS căn bản để có thể In ra giấy chính xác hơn.

Chỉ sử dụng các thẻ table để tạo bố cục (layout) biểu mẫu.
Chỉ nên sử dụng CSS inline, không nên sử dụng CSS rời
Chỉ nên sử dụng các định dạng cơ bản như: màu chữ, màu nền, khung border, font chữ đậm, nhạt, ...

Cách thực hiện:

Tạo file /backend/functions/dondathang/print.php để xử lý logic/nghiệp vụ
Nội dung file:

<?php
// hàm `session_id()` sẽ trả về giá trị SESSION_ID (tên file session do Web Server tự động tạo)
// - Nếu trả về Rỗng hoặc NULL => chưa có file Session tồn tại
if (session_id() === '') {
  // Yêu cầu Web Server tạo file Session để lưu trữ giá trị tương ứng với CLIENT (Web Browser đang gởi Request)
  session_start();
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Paper CSS -->
    <link rel="stylesheet" href="/php/myhand/assets/vendor/paper-css/paper.css" type="text/css" />

    <!-- Block title - Đục lỗ trên giao diện bố cục chung, đặt tên là `title` -->
    <title>Nền tảng - Kiến thức cơ bản về WEB</title>
    <!-- End block title -->

    <!-- Định khổ giấy: A5, A4 or A3 -->
    <style>
        @page {
            size: A4
        }
    </style>
</head>

<body class="A4">

    <?php
    // Truy vấn database
    // 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn
    include_once(__DIR__ . '/../../../dbconnect.php');

    /* --- 
    --- 2. Truy vấn dữ liệu Đơn hàng theo khóa chính
    --- 
    */
    // Chuẩn bị câu truy vấn $sqlSelect, lấy dữ liệu ban đầu của record cần update
    // Lấy giá trị khóa chính được truyền theo dạng QueryString Parameter key1=value1&key2=value2...
    $dh_ma = $_GET['dh_ma'];

    // Câu lệnh SQL Query lấy thông tin Đơn hàng
    $sqlSelectDonDatHang = <<<EOT
SELECT 
    ddh.dh_ma, ddh.dh_ngaylap, ddh.dh_ngaygiao, ddh.dh_noigiao, ddh.dh_trangthaithanhtoan, httt.httt_ten, kh.kh_ten, kh.kh_dienthoai
    , SUM(spddh.sp_dh_soluong * spddh.sp_dh_dongia) AS TongThanhTien
FROM `dondathang` ddh
JOIN `sanpham_dondathang` spddh ON ddh.dh_ma = spddh.dh_ma
JOIN `khachhang` kh ON ddh.kh_tendangnhap = kh.kh_tendangnhap
JOIN `hinhthucthanhtoan` httt ON ddh.httt_ma = httt.httt_ma
WHERE ddh.dh_ma=$dh_ma
GROUP BY ddh.dh_ma, ddh.dh_ngaylap, ddh.dh_ngaygiao, ddh.dh_noigiao, ddh.dh_trangthaithanhtoan, httt.httt_ten, kh.kh_ten, kh.kh_dienthoai
EOT;

    // Thực thi câu truy vấn SQL để lấy về dữ liệu ban đầu của record
    $resultSelectDonDatHang = mysqli_query($conn, $sqlSelectDonDatHang);
    $dataDonDatHang;
    while ($row = mysqli_fetch_array($resultSelectDonDatHang, MYSQLI_ASSOC)) {
        $dataDonDatHang = array(
            'dh_ma' => $row['dh_ma'],
            'dh_ngaylap' => date('d/m/Y H:i:s', strtotime($row['dh_ngaylap'])),
            'dh_ngaygiao' => empty($row['dh_ngaygiao']) ? '' : date('d/m/Y H:i:s', strtotime($row['dh_ngaygiao'])),
            'dh_noigiao' => $row['dh_noigiao'],
            'dh_trangthaithanhtoan' => $row['dh_trangthaithanhtoan'],
            'httt_ten' => $row['httt_ten'],
            'kh_ten' => $row['kh_ten'],
            'kh_dienthoai' => $row['kh_dienthoai'],
            'TongThanhTien' => number_format($row['TongThanhTien'], 2, ".", ",") . ' vnđ',
        );
    }
    /* --- End Truy vấn dữ liệu Đơn hàng --- */

    /* --- 
    --- 3. Truy vấn dữ liệu Chi tiết Đơn hàng theo khóa chính
    --- 
    */
    // Lấy dữ liệu Sản phẩm đơn đặt hàng
    $sqlSelectSanPham = <<<EOT
SELECT 
    sp.sp_ma, sp.sp_ten, spddh.sp_dh_dongia, spddh.sp_dh_soluong
    , lsp.lsp_ten, nsx.nsx_ten
FROM `sanpham_dondathang` spddh
JOIN `sanpham` sp ON spddh.sp_ma = sp.sp_ma
JOIN `loaisanpham` lsp ON sp.lsp_ma = lsp.lsp_ma
JOIN `nhasanxuat` nsx ON sp.nsx_ma = nsx.nsx_ma
WHERE spddh.dh_ma=$dh_ma
EOT;

    // Thực thi câu truy vấn SQL để lấy về dữ liệu ban đầu của record cần update
    $resultSelectSanPham = mysqli_query($conn, $sqlSelectSanPham);
    $dataSanPham = [];
    while ($row = mysqli_fetch_array($resultSelectSanPham, MYSQLI_ASSOC)) {
        $dataSanPham[] = array(
            'sp_ma' => $row['sp_ma'],
            'sp_ten' => $row['sp_ten'],
            'sp_dh_dongia' => $row['sp_dh_dongia'],
            'sp_dh_soluong' => $row['sp_dh_soluong'],
            'lsp_ten' => $row['lsp_ten'],
            'nsx_ten' => $row['nsx_ten'],
        );
    }
    /* --- End Truy vấn dữ liệu Chi tiết Đơn hàng --- */

    // 4. Hiệu chỉnh dữ liệu theo cấu trúc để tiện xử lý
    $dataDonDatHang['danhsachsanpham'] = $dataSanPham;
    ?>

    <!-- Block content - Đục lỗ trên giao diện bố cục chung, đặt tên là `content` -->
    <!-- Each sheet element should have the class "sheet" -->
    <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
    <section class="sheet padding-10mm">
        <!-- Thông tin Cửa hàng -->
        <table border="0" width="100%" cellspacing="0">
            <tbody>
                <tr>
                    <td align="center"><img src="/php/myhand/assets/shared/img/logo-nentang.jpg" width="100px" height="100px" /></td>
                    <td align="center">
                        <b style="font-size: 2em;">Nền tảng - Hành trang tới Tương lai</b><br />
                        <small>Cung cấp kiến thức nền tảng về Lập trình, Thiết kế Web, Cơ sở dữ liệu</small><br />
                        <small>Giúp các bạn có niềm tin, hành trang kiến thức vững vàng trên con đường trở thành Nhà phát
                            triển
                            Phần mềm</small>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Thông tin đơn hàng -->
        <p><i><u>Thông tin Đơn hàng</u></i></p>
        <table border="0" width="100%" cellspacing="0">
            <tbody>
                <tr>
                    <td width="30%">Khách hàng:</td>
                    <td><b><?= $dataDonDatHang['kh_ten'] ?>
                            (<?= $dataDonDatHang['kh_dienthoai'] ?>)</b></td>
                </tr>
                <tr>
                    <td>Ngày lập:</td>
                    <td><b><?= $dataDonDatHang['dh_ngaylap'] ?></b></td>
                </tr>
                <tr>
                    <td>Hình thức thanh toán:</td>
                    <td><b><?= $dataDonDatHang['httt_ten'] ?></b></td>
                </tr>
                <tr>
                    <td>Tổng thành tiền:</td>
                    <td><b><?= $dataDonDatHang['TongThanhTien'] ?></b></td>
                </tr>
            </tbody>
        </table>

        <!-- Thông tin sản phẩm -->
        <p><i><u>Chi tiết đơn hàng</u></i></p>
        <table border="1" width="100%" cellspacing="0" cellpadding="5">
            <thead>
                <tr>
                    <th>STT</th>
                    <th>Sản phẩm</th>
                    <th>Số lượng</th>
                    <th>Đơn giá</th>
                    <th>Thành tiền</th>
                </tr>
            </thead>
            <tbody>
                <?php $stt = 1; ?>
                <?php foreach($dataDonDatHang['danhsachsanpham'] as $sanpham): ?>
                <tr>
                    <td align="center"><?= $stt; ?></td>
                    <td>
                        <b><?= $sanpham['sp_ten'] ?></b><br />
                        <small><i><?= $sanpham['lsp_ten'] ?></i></small><br />
                        <small><i><?= $sanpham['nsx_ten'] ?></i></small>
                    </td>
                    <td align="right"><?= $sanpham['sp_dh_soluong'] ?></td>
                    <td align="right"><?= $sanpham['sp_dh_dongia'] ?></td>
                    <td align="right"><?= $sanpham['sp_dh_soluong'] * $sanpham['sp_dh_dongia'] ?></td>
                </tr>
                <?php $stt++; ?>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" align="right"><b>Tổng thành tiền</b></td>
                    <td align="right"><b><?= $dataDonDatHang['TongThanhTien'] ?></b></td>
                </tr>
            </tfoot>
        </table>

        <!-- Thông tin Footer -->
        <br />
        <table border="0" width="100%">
            <tbody>
                <tr>
                    <td align="center">
                        <small>Xin cám ơn Quý khách đã ủng hộ Cửa hàng, Chúc Quý khách An Khang, Thịnh Vượng!</small>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
    <!-- End block content -->
</body>

</html>

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập

Danh sách bình luận

Chưa có bình luận nào!

Chương 10-Bài 15. Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - In ấn Print

Thực hiện chức năng xuất biểu mẫu và In ấn trực tiếp trên web Danh sách sản phẩm (print)

Biểu mẫu In ấn Đơn đặt hàng

Step 1: cài đặt các thư viện CSS

Cài đặt thư viện CSS để quy định kích thước khổ giấy khi in PaperCSS

Step 2: tạo chức năng In ấn `print` dùng để hiển thị biểu mẫu Đơn hàng

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

CÁC CHÍNH SÁCH

Chương 10-Bài 15. Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - In ấn Print

Thực hiện chức năng xuất biểu mẫu và In ấn trực tiếp trên web Danh sách sản phẩm (print)

Biểu mẫu In ấn Đơn đặt hàng

Step 1: cài đặt các thư viện CSS

Cài đặt thư viện CSS để quy định kích thước khổ giấy khi in PaperCSS

Step 2: tạo chức năng In ấn print dùng để hiển thị biểu mẫu Đơn hàng

Ủng hộ tác giả

Bình luận

Mục lục

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Nền tảng các kiến thức học tập

Step 2: tạo chức năng In ấn `print` dùng để hiển thị biểu mẫu Đơn hàng