Gunakan PHP dan Bootstrap untuk membina bahagian belakang pengurusan yang cekap untuk mencapai visualisasi data-tutorial php-php.cn

Gunakan PHP dan Bootstrap untuk membina bahagian belakang pengurusan yang cekap untuk mencapai visualisasi data

WBOY

Lepaskan： 2023-06-27 13:58:01

asal

2027 orang telah melayarinya

Dengan pembangunan Internet yang berterusan, pelbagai laman web dan aplikasi terus muncul, dan bahagian belakang pengurusan laman web dan aplikasi ini merupakan bahagian yang sangat diperlukan. Bahagian belakang pengurusan bukan sahaja platform pengurusan data untuk tapak web dan aplikasi, tetapi juga platform untuk visualisasi data, membolehkan pengurus melihat perubahan dan arah aliran data dengan lebih jelas, sekali gus memberikan sokongan yang lebih kukuh untuk membuat keputusan korporat.

Di sini, artikel ini akan memperkenalkan cara menggunakan PHP dan Bootstrap untuk membina bahagian belakang pengurusan yang cekap untuk mencapai fungsi visualisasi data. Berikut akan dibahagikan kepada bahagian berikut untuk diterangkan.

1. Persediaan persekitaran

Sebelum bermula, anda perlu menyediakan persekitaran PHP dan MySQL. Anda boleh memilih persekitaran bersepadu, seperti XAMPP, WAMP, dsb., atau anda boleh membinanya sendiri. Selepas pemasangan, anda boleh menguji sama ada persekitaran berjaya ditubuhkan dengan melawati http://localhost.

2. Gunakan Bootstrap untuk membina antara muka bahagian belakang pengurusan

Bootstrap ialah rangka kerja bahagian hadapan yang popular Ia menyediakan beberapa gaya dan komponen yang sangat mudah untuk membina tapak web yang cantik dan responsif. Sebelum menggunakan Bootstrap, anda perlu memuat turun failnya.

Selepas siap, antara muka bahagian belakang pengurusan boleh dibina mengikut keperluan sebenar. Langkah-langkah khusus adalah seperti berikut:

1 Buat halaman baharu dan perkenalkan fail gaya Bootstrap dan fail JavaScript, seperti yang ditunjukkan dalam kod berikut:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

Salin selepas log masuk

2. Tambahkan bar navigasi, seperti yang ditunjukkan dalam kod berikut:

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">管理后台</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">数据可视化</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">用户管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">设置</a>
                </li>
            </ul>
        </div>
    </nav>
</body>

Salin selepas log masuk

3. Tambahkan kawasan kandungan utama, seperti yang ditunjukkan dalam kod berikut:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">数据可视化</h5>
                    <p class="card-text">这里是数据可视化的介绍。</p>
                    <a href="#" class="btn btn-primary">进入</a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">用户管理</h5>
                    <p class="card-text">这里是用户管理的介绍。</p>
                    <a href="#" class="btn btn-primary">进入</a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">设置</h5>
                    <p class="card-text">这里是设置的介绍。</p>
                    <a href="#" class="btn btn-primary">进入</a>
                </div>
            </div>
        </div>
    </div>
</div>

Salin selepas log masuk

Dengan kod di atas, antara muka bahagian belakang pengurusan yang mudah boleh dibina dengan cepat. Seterusnya, anda boleh mengendalikan data dalam PHP dan memaparkan data secara visual pada halaman.

3 Sepadukan PHP dan MySQL ke dalam latar belakang pengurusan

1 Buat pangkalan data dan buat jadual bernama "data". , Dan kembalikan data ke halaman hujung hadapan dalam format JSON untuk merealisasikan fungsi visualisasi data. Kodnya adalah seperti berikut:

CREATE TABLE `data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `value` int(11) NOT NULL,
  `date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Salin selepas log masuk

4. Gunakan JavaScript untuk visualisasi data

Dalam latar belakang pengurusan, anda boleh menggunakan Chart.js, perpustakaan JavaScript yang sangat popular, untuk visualisasi data. Chart.js menyediakan beberapa kaedah paparan data yang biasa digunakan, seperti carta garis, carta lajur, carta pai, dsb. Dalam artikel ini, kami akan menggunakan carta garis untuk melaksanakan keupayaan visualisasi data.

Kod adalah seperti berikut:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT * FROM data";
$result = $conn->query($sql);

$rows = array();
while($row = $result->fetch_assoc()) {
    array_push($rows, array('name'=>$row['name'], 'value'=>intval($row['value']), 'date'=>$row['date']));
}

echo json_encode($rows);
$conn->close();
?>

Salin selepas log masuk

Melalui kod di atas, data dalam pangkalan data boleh dipaparkan pada halaman dalam bentuk carta garis.

Ringkasan

Artikel ini memperkenalkan cara menggunakan PHP dan Bootstrap untuk membina bahagian belakang pengurusan yang cekap bagi merealisasikan fungsi visualisasi data. Pertama, kami menggunakan Bootstrap untuk membina antara muka bahagian belakang pengurusan kemudian, kami menggunakan PHP untuk menyambung ke pangkalan data dan mengembalikan data ke halaman hujung hadapan dalam format JSON, akhirnya, kami menggunakan pustaka JavaScript Chart.js untuk memaparkan data; pada halaman dalam bentuk carta garisan. Kaedah dalam artikel ini boleh digunakan untuk kebanyakan jenis bahagian belakang pengurusan Ia bukan sahaja membenarkan pentadbir melihat perubahan dan aliran data dengan lebih jelas, tetapi juga meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci Gunakan PHP dan Bootstrap untuk membina bahagian belakang pengurusan yang cekap untuk mencapai visualisasi data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!