Tạo Chức Năng Hiển Thị Tiến Độ Có Hiệu Ứng Động Với Bootstrap Progress Bar

Hiển thị tiến độ thanh toán trực quan giúp người dùng dễ dàng theo dõi khoản vay. Trong bài học này, bạn sẽ học cách sử dụng PHP, Bootstrap, và jQuery để tạo progress bar động với hiệu ứng animation, mang lại trải nghiệm sinh động và dễ hiểu.

1. Cài Đặt Ban Đầu

Trước tiên, hãy đảm bảo bạn đã thêm liên kết đến jQuery vào trang của mình. Trường hợp chưa có thì thêm thẻ script như bên dưới vào trong thẻ head của file layout templates/layout/default.php

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

2. Sửa Lại Layout Trang Danh Sách Khoản Vay

Dưới đây là cấu trúc bảng hiển thị danh sách khoản vay, có thêm cột Hoàn Thành sử dụng bootstrap progress bar:

<?php use Cake\I18n\Time; ?>
<h2 class="my-4">Danh sách khoản vay</h2>
   
   <!-- Bảng hiển thị dữ liệu khoản vay -->
   <table class="table table-striped table-bordered">
       <thead class="thead-dark">
           <tr>
               <th class="col-1">#</th>
               <th class="col-3">Tên khoản vay</th>
               <th class="col-2">Số tiền</th>
               <th >Hoàn thành</th>
               <th class="col-2">Hành động</th>
           </tr>
       </thead>
       <tbody>
           <?php foreach ($khoanVay as $item): ?>
                <?php
                    $startDate = new Time($item->ngay_bat_dau); // Ngày bắt đầu từ dữ liệu
                    $totalMonths = $item->tong_so_lan_tra; // Tổng số tháng thanh toán
                    
                    // Lấy ngày hiện tại
                    $currentDate = new Time(); // Ngày hiện tại
                    
                    // Tính số tháng đã hoàn thành
                    $completedMonths = $startDate->diffInMonths($currentDate) + 1; // Số tháng giữa startDate và currentDate

                    // Trường hợp Khoản vay đã vượt quá ngày kết thúc thì xem như đã hoàn thành
                    if($completedMonths > $totalMonths){
                        $completedMonths = $totalMonths;
                    }
                    
                    // Tính giá trị progress (tỷ lệ % đã thanh toán)
                    $progress = ($completedMonths / $totalMonths) * 100;
                ?>
                <tr>
                    <td class="text-center"><?= $item->id ?></td>
                    <td><?= h($item->ten_khach_hang) ?></td>
                    <td><?= number_format($item->so_tien) ?> VND</td>
                    <td>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" data-width="<?= round($progress) ?>%" aria-valuemin="0" aria-valuemax="100"><?= round($progress) ?>%</div>
                    </div>
                    </td>
                    <td class="text-center">
                       <!-- Nút hành động với Bootstrap -->
                       <?= $this->Html->link('Xem', ['action' => 'view', $item->id], ['class' => 'btn btn-primary btn-sm']) ?>
                       <?= $this->Html->link('Sửa', ['action' => 'edit', $item->id], ['class' => 'btn btn-warning btn-sm']) ?>
                       <?= $this->Form->postLink('Xóa', ['action' => 'delete', $item->id], ['confirm' => 'Bạn có chắc chắn muốn xóa?', 'class' => 'btn btn-danger btn-sm']) ?>
                    </td>
                </tr>
           <?php endforeach; ?>
       </tbody>
   </table>

Giải thích:

• Cake\I18n\Time là một class trong CakePHP dùng để làm việc với ngày và giờ. Nó hỗ trợ các phương thức xử lý thời gian như so sánh, định dạng, tính toán, v.v.
• Thực hiện lặp qua các khoản vay rồi tính toán xem đến thời điểm hiện tại đã hoàn thành được bao nhiêu %.
• Set giá trị tính toán được vào progress để hiển thị ra, tuy nhiên giá trị chỉ được set vào biến data thôi chứ chưa thực sự hiển thị ra. Tiếp theo chúng ta sẽ dùng jquery để hiển thị ra tạo hiệu ứng trực quan như % đang tăng dần.

3. Tạo Hiệu Ứng Chuyển Động

Dùng jQuery để đặt giá trị Progress Bar khi trang đã được tải xong:

$(document).ready(function() {
    $(".progress-bar").each(function() {
        const progressBar = $(this);
        const value = progressBar.data('value');

        // Sử dụng jQuery để set width và text
        progressBar.css('width', value + '%');
        progressBar.attr('aria-valuenow', value);
        progressBar.text(value + '%');
    });
});

Giải thích:

• Ban đầu chúng ta chỉ set width: 0% cho tất cả progess bar.
• Sau khi trang được tải xong (sự kiện document.ready ) ta thực hiện lấy ra tất cả progess bar, sau đó lấy data width của nó set vào thuộc tính width làm cho thuộc tính width thay đổi.
• Trong boostrap có định nghĩa sẳn transition cho progess bar là : transition: width .6s ease. Điều này có nghĩa là khi chúng ta thay đổi thuộc tính width sẽ kích hoạt animation này tạo ra hiệu ứng % tăng dần khi trang mới được hiển thị lên.

Kết quả