recherche

Maison >développement back-end >tutoriel php >Utilisez PHP et Bootstrap pour créer un backend de gestion efficace afin de réaliser la visualisation des données

Utilisez PHP et Bootstrap pour créer un backend de gestion efficace afin de réaliser la visualisation des données

WBOY
WBOYoriginal
2023-06-27 11:37:532083parcourir

Avec le développement continu d'Internet, divers sites Web et applications continuent d'émerger, et la gestion backend de ces sites Web et applications est un élément indispensable. Le backend de gestion n'est pas seulement une plate-forme de gestion de données pour les sites Web et les applications, mais également une plate-forme de visualisation des données, permettant aux gestionnaires de voir plus clairement les changements et les tendances des données, fournissant ainsi un soutien plus solide à la prise de décision de l'entreprise.

Ici, cet article expliquera comment utiliser PHP et Bootstrap pour créer un backend de gestion efficace afin de réaliser des fonctions de visualisation de données. Ce qui suit sera divisé en parties suivantes pour expliquer.

1. Configuration de l'environnement

Avant de commencer, vous devez configurer les environnements PHP et MySQL. Vous pouvez choisir un environnement intégré, tel que XAMPP, WAMP, etc., ou le créer vous-même. Après l'installation, vous pouvez tester si l'environnement est correctement configuré en visitant http://localhost.

2. Utilisez Bootstrap pour créer l'interface backend de gestion

Bootstrap est un framework front-end populaire il fournit des styles et des composants très pratiques pour créer rapidement un site Web beau et réactif. Avant d'utiliser Bootstrap, vous devez télécharger ses fichiers.

Une fois terminé, l'interface backend de gestion peut être construite en fonction des besoins réels. Les étapes spécifiques sont les suivantes :

1. Créez une nouvelle page et introduisez le fichier de style Bootstrap et le fichier JavaScript, comme indiqué dans le code suivant : 

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

2. Ajoutez une barre de navigation, comme indiqué dans le code suivant :

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

3. Ajoutez la zone de contenu principale, comme indiqué dans le code suivant : 

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

Avec le code ci-dessus, une interface backend de gestion simple peut être rapidement créée. Ensuite, vous pouvez exploiter les données en PHP et afficher les données visuellement sur la page.

3. Intégrez PHP et MySQL dans l'arrière-plan de gestion

1. Créez une base de données et créez une table nommée "data". La structure de la table est la suivante : 

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;

2. , Et renvoyez les données à la page frontale au format JSON pour réaliser la fonction de visualisation des données. Le code est le suivant : 

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

4. Utilisez JavaScript pour la visualisation des données

En arrière-plan de gestion, vous pouvez utiliser Chart.js, une bibliothèque JavaScript très populaire, pour la visualisation des données. Chart.js fournit certaines méthodes d'affichage de données couramment utilisées, telles que des graphiques linéaires, des graphiques à colonnes, des diagrammes circulaires, etc. Dans cet article, nous utiliserons des graphiques linéaires pour implémenter des capacités de visualisation de données.

Le code est le suivant : 

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

Grâce au code ci-dessus, les données de la base de données peuvent être affichées sur la page sous la forme d'un graphique linéaire.

Résumé

Cet article explique comment utiliser PHP et Bootstrap pour créer un backend de gestion efficace afin de réaliser la fonction de visualisation des données. Tout d'abord, nous utilisons Bootstrap pour construire l'interface backend de gestion ; puis, nous utilisons PHP pour nous connecter à la base de données et renvoyer les données à la page front-end au format JSON ; enfin, nous utilisons la bibliothèque JavaScript Chart.js pour afficher les données ; sur la page sous la forme d'un graphique linéaire. La méthode décrite dans cet article est applicable à la plupart des types de backends de gestion. Elle permet non seulement aux administrateurs de voir plus clairement les modifications et les tendances des données, mais améliore également l'efficacité du travail.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation de la fonction array_diff_uassoc() de PHPArticle suivant：Explication détaillée de l'utilisation de la fonction array_diff_uassoc() de PHP

Articles Liés

Voir plus