PHP とブートストラップを使用して効率的な管理バックエンドを構築し、データの視覚化を実現します。
- WBOYオリジナル
- 2023-06-27 11:37:532030ブラウズ
インターネットの継続的な発展に伴い、さまざまな Web サイトやアプリケーションが登場し続けており、これらの Web サイトやアプリケーションの管理バックエンドは不可欠な部分です。管理バックエンドは、Web サイトやアプリケーションのデータ管理プラットフォームであるだけでなく、データ視覚化のプラットフォームでもあり、管理者がデータの変化や傾向をより明確に把握できるようにすることで、企業の意思決定を強力にサポートします。
ここでは、PHP と Bootstrap を使用して、データ視覚化の機能を実現する効率的な管理バックエンドを構築する方法を紹介します。以下、何回かに分けて説明します。
1. 環境セットアップ
開始する前に、まず PHP および MySQL 環境をセットアップする必要があります。 XAMPP、WAMP などの統合環境を選択することも、自分で構築することもできます。インストール後、http://localhost にアクセスして、環境が正常に確立されているかどうかをテストできます。
2. Bootstrap を使用して管理バックエンド インターフェイスを構築する
Bootstrap は人気のあるフロントエンド フレームワークであり、美しく応答性の高い Web サイトを迅速に構築できる非常に便利なスタイルとコンポーネントを提供します。 Bootstrap を使用する前に、そのファイルをダウンロードする必要があります。
完了後、実際のニーズに応じて管理バックエンド インターフェイスを構築できます。具体的な手順は次のとおりです:
1. 次のコードに示すように、新しいページを作成し、ブートストラップ スタイル ファイルと JavaScript ファイルを導入します:
<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. ナビゲーション バーを追加します。次のコードに示すように:
<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. 次のコードに示すように、メイン コンテンツ領域を追加します:
<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>上記のコードを通じて、シンプルな管理バックグラウンド インターフェイスを迅速に構築できます。 。次に、PHP でデータを操作し、ページ上にデータを視覚的に表示できます。
3. PHP と MySQL を管理バックグラウンドに統合する
1. データベースを作成し、次のテーブル構造を持つ「data」という名前のテーブルを作成します:
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. PHPでデータベースに接続し、データをクエリし、JSON形式でフロントエンドページにデータを返すことでデータ可視化機能を実現します。コードは次のとおりです:
<?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. データ視覚化に JavaScript を使用する
管理バックグラウンドでは、非常に人気のある JavaScript ライブラリである Chart.js をデータ視覚化に使用できます。 Chart.js は、折れ線グラフ、縦棒グラフ、円グラフなど、一般的に使用されるデータ表示方法をいくつか提供します。この記事では、折れ線グラフを使用してデータ視覚化機能を実装します。
コードは次のとおりです:
<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>上記のコードにより、データベース内のデータを折れ線グラフの形式でページに表示できます。
概要
この記事では、PHP と Bootstrap を使用して、データ可視化機能を実現する効率的な管理バックエンドを構築する方法を紹介します。まず、ブートストラップを使用して管理バックエンド インターフェイスを構築し、次に PHP を使用してデータベースに接続し、データを JSON 形式でフロントエンド ページに返します。最後に、JavaScript ライブラリ Chart.js を使用してデータを表示します。ページ上に折れ線グラフの形式で表示されます。この記事の方法は、ほとんどの種類の管理バックエンドに適用でき、管理者はデータの変更や傾向をより明確に確認できるだけでなく、作業効率も向上します。
以上がPHP とブートストラップを使用して効率的な管理バックエンドを構築し、データの視覚化を実現します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。