인터넷의 지속적인 발전과 함께 다양한 웹사이트와 애플리케이션이 계속 등장하고 있으며, 이러한 웹사이트와 애플리케이션의 관리 백엔드는 필수적인 부분입니다. 관리 백엔드는 웹사이트와 애플리케이션을 위한 데이터 관리 플랫폼일 뿐만 아니라 데이터 시각화를 위한 플랫폼이기도 합니다. 이를 통해 관리자는 데이터 변화와 추세를 보다 명확하게 볼 수 있으며 이를 통해 기업 의사결정에 대한 강력한 지원을 제공합니다.
여기서 이 기사에서는 PHP와 Bootstrap을 사용하여 효율적인 관리 백엔드를 구축하여 데이터 시각화 기능을 구현하는 방법을 소개합니다. 다음은 다음과 같은 부분으로 나누어 설명하겠습니다.
1. 환경 설정
시작하기 전에 PHP 및 MySQL 환경 설정이 필요합니다. XAMPP, WAMP 등과 같은 통합 환경을 선택하거나 직접 구축할 수 있습니다. 설치 후 http://localhost에 접속하여 환경이 성공적으로 구축되었는지 테스트할 수 있습니다.
2. Bootstrap을 사용하여 관리 백엔드 인터페이스 구축
Bootstrap은 매우 편리한 스타일과 구성 요소를 제공하여 아름답고 반응성이 뛰어난 웹 사이트를 빠르게 구축합니다. 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><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>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;
<?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();
?><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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
