Use PHP and Bootstrap to build an efficient management backend to achieve data visualization-PHP Tutorial-php.cn

Use PHP and Bootstrap to build an efficient management backend to achieve data visualization

WBOY

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

Original

2027 people have browsed it

With the continuous development of the Internet, various websites and applications continue to emerge, and the management backend of these websites and applications is an indispensable part. The management backend is not only a data management platform for websites and applications, but also a platform for data visualization, allowing managers to see data changes and trends more clearly, thereby providing stronger support for corporate decision-making.

Here, this article will introduce how to use PHP and Bootstrap to build an efficient management backend to realize the function of data visualization. The following will be divided into the following parts to explain.

1. Environment setup

Before starting, you need to set up the PHP and MySQL environments first. You can choose an integrated environment, such as XAMPP, WAMP, etc., or you can build it yourself. After installation, you can test whether the environment is successfully established by accessing http://localhost.

2. Use Bootstrap to build the management backend interface

Bootstrap is a popular front-end framework. It provides some very convenient styles and components that can quickly build a beautiful and responsive website. Before using Bootstrap, you need to download its files.

After completion, the management backend interface can be built according to actual needs. The specific steps are as follows:

1. Create a new page and introduce the Bootstrap style file and JavaScript file, as shown in the following code:

<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>

Copy after login

2. Add a navigation bar, as shown in the following code:

<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>

Copy after login

3. Add the main content area, as shown in the following code:

<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>

Copy after login

Through the above code, a simple management background interface can be quickly built. Next, you can operate the data in PHP and display the data visually on the page.

3. Integrate PHP and MySQL into the management background

1. Create a database and create a table named "data" with the following table structure:

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;

Copy after login

2. Connect to the database in PHP, query the data, and return the data to the front-end page in JSON format to realize the data visualization function. The code is as follows:

<?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();
?>

Copy after login

4. Use JavaScript for data visualization

In the management background, you can use Chart.js, a very popular JavaScript library, for data visualization. Chart.js provides some commonly used data display methods, such as line charts, column charts, pie charts, etc. In this article, we will use line charts to implement data visualization capabilities.

The code is as follows:

<body>
    <canvas id="myChart"></canvas>
    <script src="js/Chart.min.js"></script>
    <script src="js/data.php"></script>
    <script>
        $(function() {
            $.get('data.php', function(data) {
                var labels = [];
                var values = [];
                var dates = [];
                $.each(JSON.parse(data), function(index, item) {
                    labels.push(item.name);
                    values.push(item.value);
                    dates.push(item.date);
                });
                var ctx = document.getElementById('myChart');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '数据可视化',
                            data: values,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            });
        });
    </script>
</body>

Copy after login

Through the above code, the data in the database can be displayed on the page in the form of a line chart.

Summary

This article introduces how to use PHP and Bootstrap to build an efficient management backend to realize the data visualization function. First, we use Bootstrap to build the management backend interface; then, we use PHP to connect to the database and return the data to the front-end page in JSON format; finally, we use the JavaScript library Chart.js to display the data on the page in the form of a line chart. The method in this article is applicable to most types of management backends. It not only allows administrators to see data changes and trends more clearly, but also improves work efficiency.

The above is the detailed content of Use PHP and Bootstrap to build an efficient management backend to achieve data visualization. For more information, please follow other related articles on the PHP Chinese website!