Portfolio作成 ④ DB接続編 

キミマチラボ

目的

今回の作業目的は以下です。

① データベース確認
② DB接続
③ postsテーブル作成
④ SELECT確認
⑤ INSERT実装

DBと接続できれば、かなり環境をWordPressへ近付けることができます。

特に学びの多い回になりそうです。

データベース確認

まず確認事項としてMySQLの

  • MySQLデータベース名
  • MySQLユーザー名
  • MySQLパスワード

を確認しておきます。

確認場所は サーバーパネル の WordPress簡単インストール から「詳細」ボタンで確認できます。

後ほど使用しますのでメモっておきましょう。

フォルダ / ファイル作成

作成するのは 「config」 フォルダと 「database.php」 ファイル

そして、MySQLに接続できるか動作確認用に「test-db.php」ファイルを作成します。

作成位置は

portfolio/
├── index.php
├── post.php
├── header.php
├── footer.php
├── style.css

├── test-db.php ← 今回新規作成

├── data/
│ └── posts.php

├── config/ ← 今回新規作成
│ └── database.php ← 今回新規作成


└── admin/
├── index.php
└── new-post.php

config」 フォルダと「test-db.php」ファイル

database.php」 ファイル

作成完了!

DB接続確認

database.php

<?php

// データベースサーバー名
// XServerでは通常 localhost
$host = 'localhost';

// 接続するデータベース名
$dbname = 'ここにMySQLデータベース名';

// MySQLユーザー名
$username = 'ここにMySQLユーザー名';

// MySQLパスワード
$password = 'ここにMySQLパスワード';

try {

    // PDOオブジェクト作成
    // PHPとMySQLを接続するための窓口
    $pdo = new PDO(

        // 接続先情報
        "mysql:host=$host;dbname=$dbname;charset=utf8mb4",

        // ユーザー名
        $username,

        // パスワード
        $password
    );

    // エラー発生時に例外を投げる設定
    // 開発中は必須
    $pdo->setAttribute(
        PDO::ATTR_ERRMODE,
        PDO::ERRMODE_EXCEPTION
    );

} catch (PDOException $e) {

    // 接続失敗時の処理
    die(
        'データベース接続失敗: ' .
        $e->getMessage()
    );

}

test-db.php

<?php

// database.php を読み込む
// この1行で MySQLへの接続処理が実行される
include 'config/database.php';

// database.php内でエラーが発生しなければ
// この行まで処理が到達する

echo 'データベース接続成功';

動作確認(test-db.php)

https://kimimachilab.com/portfolio/test-db.php

へアクセス。

DB接続の成功を確認できました。

postsテーブル作成

サーバーパネル

MySQL

phpMyAdmin を開く

開く際に、ユーザー名とパスワードを求められます。

MySQLユーザー名
MySQLパスワード

を入力してください。

phpMyAdmin へログイン出来たら、SQL タブを押す。

そこへテーブル作成

-- postsテーブルを作成する
CREATE TABLE posts (

    -- 記事ID
    -- 1,2,3...と自動採番される
    -- PRIMARY KEY は主キー(重複しない識別子)
    id INT AUTO_INCREMENT PRIMARY KEY,

    -- 記事タイトル
    -- 最大255文字
    -- NOT NULL は未入力禁止
    title VARCHAR(255) NOT NULL,

    -- 記事本文
    -- 長文保存用
    -- TEXT型は数万文字以上保存可能
    content TEXT NOT NULL,

    -- 記事作成日時
    -- レコード作成時に自動で現在日時が入る
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP

);

画面左側に postsテーブルが確認できるため、テーブル作成は成功。

SELECT確認

portfolio/
├── index.php
├── post.php
├── header.php
├── footer.php
├── style.css

├── test-db.php

├── test-posts.php ← 今回新規作成

├── data/
│ └── posts.php

├── config/
│ └── database.php


└── admin/
├── index.php
└── new-post.php

test-posts.php

<?php

// データベース接続ファイルを読み込む
// この時点で $pdo が使えるようになる
include 'config/database.php';

// 実行したいSQL文
// postsテーブルの全データを取得する
$sql = "SELECT * FROM posts";

// SQLを実行する
// 結果は$stmtに格納される
$stmt = $pdo->query($sql);

// SQL実行結果を全件取得する
// 配列形式で$postsに格納される
$posts = $stmt->fetchAll();

// <pre>タグで整形表示開始
// 配列を見やすくするために使用
echo '<pre>';

// 配列の中身をそのまま表示
// 開発・学習用によく使う
print_r($posts);

// <pre>タグ終了
echo '</pre>';

こちらは、postsテーブルからデータを取得する動作確認用です。

動作確認(test-posts.php)

https://kimimachilab.com/portfolio/test-posts.php

へアクセス。

正しい動作です。

INSERT実装

portfolio/
├── index.php
├── post.php
├── header.php
├── footer.php
├── style.css

├── test-db.php

├── test-posts.php

├── data/
│ └── posts.php

├── config/
│ └── database.php


└── admin/
├── index.php
└── new-post.php ← 既存ファイルを編集

new-post.php(ファイル全体を置き換え)

<?php

// データベース接続ファイルを読み込む
include '../config/database.php';


// フォームが送信された場合のみ実行
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // タイトルを取得
    $title = $_POST['title'] ?? '';

    // 本文を取得
    $content = $_POST['content'] ?? '';

    // SQL文を作成
    // postsテーブルへデータを追加する
    $sql = "
        INSERT INTO posts
        (
            title,
            content
        )
        VALUES
        (
            :title,
            :content
        )
    ";

    // SQLを実行する準備
    $stmt = $pdo->prepare($sql);

    // プレースホルダへ値をセットして実行
    $stmt->execute([
        ':title' => $title,
        ':content' => $content
    ]);

    // 保存完了メッセージ
    echo '<p>投稿を保存しました。</p>';
}

// 共通ヘッダー読み込み
include '../header.php';

?>

<h2>新規投稿</h2>

<!-- 投稿フォーム -->
<form method="post">

    <p>タイトル</p>

    <!-- タイトル入力欄 -->
    <input
        type="text"
        name="title"
        required
    >

    <p>本文</p>

    <!-- 本文入力欄 -->
    <textarea
        name="content"
        rows="10"
        cols="50"
        required
    ></textarea>

    <br><br>

    <!-- 送信ボタン -->
    <button type="submit">
        投稿する
    </button>

</form>

<?php

// 共通フッター読み込み
include '../footer.php';

?>

動作確認(new-post.php

https://kimimachilab.com/portfolio/admin/new-post.php

へアクセス。

タイトル「CMS開発日記」

本文「MySQLへの保存に成功」

「投稿する」ボタンを押す。

保存完了メッセージ「投稿を保存しました。」を確認。

動作確認(test-posts.php)

https://kimimachilab.com/portfolio/test-posts.php

へアクセス。

投稿内容がきちんと反映されています!

これは喜ばずにはいられない!!

今回のデータ経路

① 管理者が入力
② admin/new-post.phpがPOST送信
③ config/database.phpがMySQLへ接続
④ admin/new-post.phpがINSERT文作成
⑤ admin/new-post.phpがSQL実行
MySQLが保存
⑦ admin/new-post.phpが保存完了表示
test-posts.phpで確認

今回は、postsテーブルからデータを取得する動作確認用として test-posts.php を用意しましたが、本来は記事一覧や記事ページへ反映していく予定です。

最後に

ここまで読んでいただき、ありがとうございます。

このまま勢いで MySQLpostsテーブル から記事一覧を取得するように変更しちゃいたいですが、内容を盛り込みすぎて飲み込みずらくなるのは望ましくありません。

ですので、次回に data/posts.php ではなく正真正銘 MySQL で稼働する CMS を組み上げます。

\ 最新情報をチェック /

コメントを残す

※ が付いている項目は必須です

CAPTCHA