인터넷의 지속적인 발전과 함께 다양한 웹사이트와 애플리케이션이 계속 등장하고 있으며, 이러한 웹사이트와 애플리케이션의 관리 백엔드는 필수적인 부분입니다. 관리 백엔드는 웹사이트와 애플리케이션을 위한 데이터 관리 플랫폼일 뿐만 아니라 데이터 시각화를 위한 플랫폼이기도 합니다. 이를 통해 관리자는 데이터 변화와 추세를 보다 명확하게 볼 수 있으며 이를 통해 기업 의사결정에 대한 강력한 지원을 제공합니다.
여기서 이 기사에서는 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>로그인 후 복사
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. , 그리고 데이터 시각화 기능을 실현하기 위해 데이터를 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을 사용하여 효율적인 관리 백엔드를 구축하여 데이터 시각화 기능을 구현하는 방법을 소개합니다. 먼저 Bootstrap을 사용하여 관리 백엔드 인터페이스를 구축한 다음 PHP를 사용하여 데이터베이스에 연결하고 데이터를 JSON 형식으로 프런트엔드 페이지에 반환합니다. 마지막으로 JavaScript 라이브러리 Chart.js를 사용하여 데이터를 표시합니다. 페이지에 꺾은선형 차트 형태로 표시됩니다. 이 문서의 방법은 대부분의 관리 백엔드 유형에 적용 가능하며 이를 통해 관리자는 데이터 변경 사항과 추세를 더 명확하게 볼 수 있을 뿐만 아니라 작업 효율성도 향상됩니다.
위 내용은 PHP 및 Bootstrap을 사용하여 효율적인 관리 백엔드를 구축하여 데이터 시각화 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
