Vue.js お問い合わせフォームにMySQL保存機能を追加する方法

はじめに

Webアプリケーションにおいて、お問い合わせフォームは非常に重要な機能です。この記事では、Vue.jsとPHPを使用したお問い合わせフォームに、MySQLデータベースへの保存機能を追加する方法を詳しく解説します。

1. データベースの準備

まずはデータベースとテーブルを作成します。

1.1 データベース作成

CREATE DATABASE db_name;

1.2 テーブル作成

CREATE TABLE submissions (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL,
  message TEXT NOT NULL,
  ip_address VARCHAR(45) NOT NULL AFTER message,
  user_agent TEXT NOT NULL AFTER ip_address,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. PHPバックエンドの作成

以下は、データベースへの保存処理を追加したPHPコード例です。

<?php
// データベース接続
$db_host = $config['database']['host'];
$db_user = $config['database']['username'];
$db_pass = $config['database']['password'];
$db_name = $config['database']['name'];
$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
if ($conn->connect_error) {
    echo json_encode(['success' => false, 'error' => 'データベース接続エラー']);
    exit;
}

// データ挿入
$stmt = $conn->prepare("INSERT INTO submissions (name, email, message, ip_address, user_agent) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $name, $email, $message, $ipAddress, $userAgent);

if (!$stmt->execute()) { // データ挿入を実行
    echo json_encode(['success' => false, 'error' => 'データベース挿入エラー: ' . $stmt->error]);
    exit;
}
$stmt->close();
$conn->close();

3. 設定ファイルの準備

データベース接続情報をconfig.phpに追加します。

<?php
return [
    'database' => [
        'host' => 'localhost',
        'username' => 'db_user',
        'password' => 'db_password',
        'name' => 'db_name',
    ],
];

4. 動作確認

1. フォームからテスト送信を行います。
2. データベースへの保存状況を確認します。

SELECT * FROM submissions;

まとめ

Vue.jsとPHPを使ってMySQLへのデータ保存機能を追加する方法を説明しました。