bootstrap5-statscard.html

<!-- php  -->
include 'koneksi.php';
include 'sesi.php';

$query = "SELECT (SELECT COUNT(*) FROM tb_siswa) as total_siswa, (SELECT COUNT(*) FROM tb_buku) as total_buku, (SELECT COUNT(*) FROM tb_pinjam) as total_pinjam, (SELECT COUNT(*) FROM tb_kembali) as total_kembali";
$sql = mysqli_query($conn, $query);
$result = mysqli_fetch_assoc($sql);

<div class="container-fluid">
        <div class="header-body">
          <div class="row">
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">Jumlah siswa</h5>
                      <span class="h2 font-weight-bold mb-0"><?= $result['total_siswa'];?></span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                        <i class="bi bi-person-fill"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">Jumlah buku</h5>
                      <span class="h2 font-weight-bold mb-0"><?= $result['total_buku'];?></span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-info text-white rounded-circle shadow">
                        <i class="bi bi-book-fill"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">Total peminjaman</h5>
                      <span class="h2 font-weight-bold mb-0"><?= $result['total_pinjam'];?></span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                        <i class="bi bi-arrow-bar-right"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">Total pengembalian</h5>
                      <span class="h2 font-weight-bold mb-0"><?= $result['total_kembali'];?></span>
                    </div>
                    <div class="col-auto">
                      <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                        <i class="bi bi-arrow-bar-left"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>