데이터 시각화는 데이터 분석 및 비즈니스 인사이트 도출에 필수적인 요소로, 사용자 입력 데이터를 효과적으로 표현하기 위한 대시보드를 구축하는 과정은 점점 더 중요해지고 있습니다. 본 강좌에서는 워드프레스 플랫폼을 활용하여 사용자가 입력한 데이터를 시각화하고 보고서를 생성할 수 있는 대시보드를 만드는 방법에 대해 자세히 설명하겠습니다.
목표
이 강좌의 목표는 다음과 같습니다:
- 사용자 입력 데이터를 수집하는 방법을 이해하기
- 입력된 데이터를 저장하고 관리하는 방법 배우기
- 데이터를 시각화하여 대시보드를 구성하는 방법 익히기
- 시각화된 데이터를 보고서 형태로 출력하는 기능 구현하기
1. 사용자 입력 데이터 수집
먼저, 사용자가 입력할 수 있는 폼을 생성하여 데이터 수집을 시작해야 합니다. 워드프레스에서는 다양한 폼 플러그인을 사용할 수 있지만, 여기서는 내장된 사용자 정의 필드를 사용하여 간단한 예를 보여드리겠습니다.
1.1. 폼 생성
다음은 사용자 입력을 위한 HTML 폼의 예제입니다:
<form id="dataInputForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="age">나이:</label>
<input type="number" id="age" name="age" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="제출">
</form>1.2. 데이터 처리
사용자가 폼을 제출하면, 입력된 데이터를 워드프레스 데이터베이스에 저장하는 로직을 구현해야 합니다. 이를 위해 functions.php 파일에 다음과 같은 코드를 추가합니다:
<?php
function handle_form_submission() {
if ($_SERVER["REQUEST_METHOD"] == "POST") {
global $wpdb;
$table_name = $wpdb->prefix . "user_data";
// 사용자 입력 데이터
$name = sanitize_text_field($_POST['name']);
$age = intval($_POST['age']);
$email = sanitize_email($_POST['email']);
// 데이터베이스에 데이터 추가
$wpdb->insert(
$table_name,
array(
'name' => $name,
'age' => $age,
'email' => $email
)
);
}
}
add_action('init', 'handle_form_submission');
?>2. 데이터 저장 및 관리
입력한 데이터를 저장하기 위해서는 먼저 데이터베이스 테이블을 생성해야 합니다. 다음 코드를 functions.php 파일에 추가하여 테이블을 생성합니다:
<?php
function create_user_data_table() {
global $wpdb;
$table_name = $wpdb->prefix . "user_data";
// 테이블이 존재하지 않는 경우 생성
if ($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) {
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE `$table_name` (
`id` mediumint(9) NOT NULL AUTO_INCREMENT,
`name` tinytext NOT NULL,
`age` int NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($sql);
}
}
add_action('after_setup_theme', 'create_user_data_table');
?>3. 데이터 시각화
이제 사용자 입력 데이터를 수집하고 저장했으므로, 시각화할 수 있는 라이브러리를 사용할 준비가 되었습니다. 일반적으로 많이 사용하는 라이브러리는 Chart.js입니다.
3.1. Chart.js 설치
Chart.js를 사용하기 위해서는 라이브러리를 워드프레스 테마에 추가해야 합니다. functions.php에 다음 코드를 추가하여 Chart.js를 로드합니다:
<?php
function enqueue_chart_js() {
wp_enqueue_script('chart-js', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_chart_js');
?>3.2. 그래프 생성
저장된 데이터를 불러와 그래프를 생성합니다. 아래는 사용자의 데이터를 기반으로 한 차트를 추가하는 방법입니다:
<canvas id="myChart" width="400" height="200"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function () {
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["사용자1", "사용자2", "사용자3"],
datasets: [{
label: '연령',
data: [18, 25, 30],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>4. 보고서 생성
마지막 단계에서는 시각화된 데이터를 보고서 형식으로 출력하는 방법을 살펴보겠습니다. 사용자가 제출한 데이터를 기반으로 PDF 형식의 보고서를 생성합니다.
4.1. PDF 생성 라이브러리
PDF 생성 라이브러리인 DOMPDF를 사용하여 보고서를 출력합니다. 다음 코드를 통해 DOMPDF를 설치합니다:
<?php
require_once 'path/to/dompdf/autoload.inc.php';
use Dompdf\Dompdf;
function generate_pdf_report() {
global $wpdb;
$table_name = $wpdb->prefix . "user_data";
$data = $wpdb->get_results("SELECT * FROM $table_name");
$dompdf = new Dompdf();
$html = "<h1>사용자 데이터 보고서</h1>";
foreach ($data as $row) {
$html .= "<p>이름: {$row->name} - 나이: {$row->age} - 이메일: {$row->email}</p>";
}
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
// PDF 다운로드
$dompdf->stream('report.pdf');
}
?>4.2. 보고서 호출
이제 사용자가 요청할 때 보고서를 생성할 수 있습니다. 버튼을 추가하여 PDF 보고서를 다운로드할 수 있도록 합니다:
<button onclick="generate_pdf_report()">보고서 다운로드</button>결론
이번 강좌를 통해 사용자 입력 데이터를 기반으로 한 대시보드를 구축하는 과정을 살펴보았습니다. 데이터 수집, 저장, 시각화, 그리고 보고서 생성을 포함하여 다양한 기술을 적용하여 실제로 사용할 수 있는 대시보드 솔루션을 만들 수 있었습니다. 워드프레스의 유연성을 활용하여 여러분의 비즈니스에 맞는 데이터 시각화 도구를 만들어보시기 바랍니다.
더욱 발전된 기능이나 시각화 기술을 원하시면 D3.js, Highcharts 등의 라이브러리도 활용해보실 수 있습니다. 다양한 도구와 방법을 시도하면서 원하는 결과를 얻으시길 바랍니다!