CRUDアプリとは?
CRUDとは、データの
- Create(作成)
- Read(読み取り)
- Update(更新)
- Delete(削除)
の操作を指します。
これらの操作は、ほとんどのWebアプリケーションにおいて基本的なデータ操作の要素となります。
例えば、ブログ投稿の作成、編集、削除などがCRUDに該当します。
なぜCRUDアプリがWeb開発において重要なのか
CRUDアプリケーションは、データベースに格納された情報をユーザーが操作できるようにするための基本的な機能を提供します。
これにより、ユーザーは自分のアカウント情報を管理したり、データベース上のレコードを操作したりすることができます。
Web開発の学習者にとって、CRUDアプリを作成することは、データベースと連携するスキルを身につける絶好の機会です。
また、実際のプロジェクトにおいても、CRUD操作は頻繁に使われるため、これをしっかりと理解することが重要です。
PHPを使った基本的な設定
PHPでCRUDアプリを作成するためには、開発環境のセットアップが必要です。
ここでは、PHPとMySQLを利用した環境構築の手順を紹介します。
PHPの開発環境のセットアップ
Dockerを使用した開発環境の構築
Dockerを使用すると、依存関係の管理が簡単になり、環境の再現性を確保しやすくなります。
以下の手順でPHPとMySQLを含む開発環境を構築します。
Docker Composeファイルの作成
まず、docker-compose.yml
ファイルを作成します。
このファイルは、PHP、MySQL、Apacheのサービスを定義します。
version: "3.8"
services:
app:
build:
context: .
dockerfile: Dockerfile
container_name: php-app
volumes:
- ./app:/var/www/html
ports:
- "8080:80"
depends_on:
- db
db:
image: mysql:5.7
container_name: mysql-db
environment:
MYSQL_ROOT_PASSWORD: root_password
MYSQL_DATABASE: crud_app
MYSQL_USER: user
MYSQL_PASSWORD: user_password
ports:
- "3306:3306"
volumes:
- db_data:/var/lib/mysql
volumes:
db_data:
次にdockerfile
ファイルを作成します。
このファイルでPHPの設定をおこないます。
# PHPイメージをベースにする
FROM php:7.4-apache
# 必要な拡張モジュールをインストール
RUN docker-php-ext-install mysqli
# 追加のApache設定(任意)
COPY ./app /var/www/html
プロジェクトディレクトリの作成
プロジェクトのルートディレクトリにapp
フォルダを作成し、その中にPHPファイル、index.phpを配置します。
<?php
echo "Hello World";
Dockerコンテナの起動
docker-compose.yml
ファイルがあるディレクトリで以下のコマンドを実行し、コンテナを起動します。
docker compose up -d
これで、http://localhost:8080
にアクセスすると、PHPのアプリケーションが動作していることを確認できます。
データベースの作成
次に、CRUDアプリでデータを保存するためのデータベースを作成します。
DockerでMySQLが起動している状態で、以下のコマンドを使ってMySQLコンテナに接続し、データベースを作成します。
docker exec -it mysql-db mysql -u user -p
パスワードの入力を求められるので、docker-compose.yml
で設定したパスワード「user_password」を入力する。
その後、データベースとテーブルを作成します。
CREATE DATABASE crud_app;
USE crud_app;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
これで、Dockerを使用した開発環境が整いました。
次に、PHPを使ってこのデータベースと接続し、CRUD操作を実装します。
PHPを使ったCRUD機能の実装方法
PHPを使って、データベースとの連携を行うためには、それぞれのCRUD操作を実装していきます。
ここでは、データの作成(Create)、読み取り(Read)、更新(Update)、削除(Delete)の各機能を簡単な例を用いて説明します。
データの作成機能(Create)
ユーザーが入力した情報をデータベースに保存するために、PHPを使ってMySQLにINSERT文を実行します。
以下は、フォームから名前とメールアドレスを受け取り、データベースに新しいレコードを作成する例です。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$conn = new mysqli("mysql-db", "user", "user_password", "crud_app");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "新しいレコードが作成されました";
} else {
echo "エラー: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
データの読み取り機能(Read)
保存されたデータをユーザーに表示するために、データベースからレコードを取得します。
以下は、すべてのユーザー情報を読み込み、HTMLテーブルに表示する例です。
<?php
$conn = new mysqli("mysql-db", "user", "user_password", "crud_app");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Name</th><th>Email</th></tr>";
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"]. "</td><td>" . $row["name"]. "</td><td>" . $row["email"]. "</td></tr>";
}
echo "</table>";
} else {
echo "0件のレコード";
}
$conn->close();
?>
データの更新機能(Update)
既存のデータを編集するためには、UPDATE文を使用します。
以下は、ユーザーの名前やメールアドレスを更新する例です。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id = $_POST["id"];
$name = $_POST["name"];
$email = $_POST["email"];
$conn = new mysqli("mysql-db", "user", "user_password", "crud_app");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "UPDATE users SET name='$name', email='$email' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "レコードが更新されました";
} else {
echo "エラー: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
データの削除機能(Delete)
最後に、ユーザーのデータを削除する機能を実装します。
DELETE文を使用して、指定されたレコードをデータベースから削除します。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id = $_POST["id"];
$conn = new mysqli("mysql-db", "user", "user_password", "crud_app");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "DELETE FROM users WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "レコードが削除されました";
} else {
echo "エラー: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
フォームを使ったユーザーインターフェースの作成
CRUDアプリケーションでは、ユーザーがデータを操作できるようにするためのインターフェースが必要です。ここでは、HTMLフォームを使ってデータを入力し、PHPで処理する方法を紹介します。
HTMLフォームとPHPの連携
ユーザーがデータを入力できるように、HTMLフォームを作成します。次の例では、ユーザーの名前とメールアドレスを入力するフォームを作成し、そのデータをPHPで処理します。
<form method="POST" action="create.php">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<button type="submit">送信</button>
</form>
上記のフォームはcreate.php
にデータを送信し、PHPスクリプトがデータベースに新しいレコードを挿入します。
バリデーションとエラーハンドリング
フォームのデータを安全に処理するためには、ユーザー入力のバリデーションとエラーハンドリングが重要です。以下の例では、ユーザーが名前とメールアドレスを入力しなかった場合にエラーメッセージを表示する処理を追加します。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = trim($_POST["name"]);
$email = trim($_POST["email"]);
// バリデーション
if (empty($name) || empty($email)) {
echo "すべてのフィールドを入力してください";
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "正しいメールアドレスを入力してください";
} else {
// データベースへの挿入処理
$conn = new mysqli("mysql-db", "user", "user_password", "crud_app");
if ($conn->connect_error) {
die("接続エラー: " . $conn->connect_error);
}
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "データが正常に保存されました";
} else {
echo "エラー: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
}
?>
バリデーションを追加することで、不正なデータやエラーが発生した際にユーザーに適切なメッセージを返すことができ、安全性を高めることができます。
ディレクトリ構成
/crud_app
│
├── /app
│ ├── /views
│ │ ├── create.php
│ │ ├── read.php
│ │ ├── update.php
│ │ └── delete.php
│ ├── /includes
│ │ └── db.php
│ └── index.php
├── dockerfile
└── docker-compose.yml
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD アプリ</title>
<!-- BootstrapのCDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">CRUD アプリへようこそ</h1>
<div class="text-center">
<a href="views/create.php" class="btn btn-primary">新しいユーザーを作成</a>
<a href="views/read.php" class="btn btn-success">ユーザーリストを見る</a>
</div>
</div>
<!-- BootstrapのJavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
create.php
<?php include('../includes/db.php'); ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新しいユーザーを作成</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>新しいユーザーを作成 <a href="read.php" class="btn btn-primary ml-3">ユーザーリストを見る</a></h2>
<form method="POST" action="create.php">
<div class="form-group">
<label for="name">名前:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">メールアドレス:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
</div>
<!-- PHPでデータベースに挿入 -->
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "<div class='alert alert-success mt-3'>新しいユーザーが作成されました</div>";
} else {
echo "<div class='alert alert-danger mt-3'>エラー: " . $conn->error . "</div>";
}
}
?>
</body>
</html>
read.php
<?php include('../includes/db.php'); ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザーリスト</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>ユーザーリスト <a href="create.php" class="btn btn-primary ml-3">新しいユーザーを作成</a></h2>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>名前</th>
<th>メールアドレス</th>
<th>アクション</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['email']}</td>";
echo "<td>
<a href='update.php?id={$row['id']}' class='btn btn-warning'>編集</a>
<a href='delete.php?id={$row['id']}' class='btn btn-danger'>削除</a>
</td></tr>";
}
} else {
echo "<tr><td colspan='4'>データなし</td></tr>";
}
?>
</tbody>
</table>
</div>
</body>
</html>
db.php
<?php
$conn = new mysqli("mysql-db", "user", "user_password", "crud_app");
if ($conn->connect_error) {
die("接続に失敗しました: " . $conn->connect_error);
}
update.php
<?php
include('../includes/db.php');
$id = $_GET['id'];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
$sql = "UPDATE users SET name='$name', email='$email' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
header("Location: read.php");
} else {
echo "エラー: " . $conn->error;
}
}
$sql = "SELECT * FROM users WHERE id=$id";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザー情報を編集</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>ユーザー情報を編集</h2>
<form method="POST" action="update.php?id=<?php echo $id; ?>">
<div class="form-group">
<label for="name">名前:</label>
<input type="text" class="form-control" id="name" name="name" value="<?php echo $row['name']; ?>" required>
</div>
<div class="form-group">
<label for="email">メールアドレス:</label>
<input type="email" class="form-control" id="email" name="email" value="<?php echo $row['email']; ?>" required>
</div>
<button type="submit" class="btn btn-primary">更新</button>
</form>
</div>
</body>
</html>
delete.php
<?php
include('../includes/db.php');
$id = $_GET['id'];
$sql = "DELETE FROM users WHERE id=$id";
if ($conn->query($sql) === TRUE) {
header("Location: read.php");
} else {
echo "エラー: " . $conn->error;
}
まとめ
PHPを使ったシンプルなCRUDアプリの構築を通じて、Webアプリケーションの基本的なデータ操作の仕組みを理解できたかと思います。
CRUD(Create, Read, Update, Delete)操作は、ほとんどのWebアプリケーションに必要な機能であり、データベースと連携したシステム開発において非常に重要な役割を果たします。
このプロジェクトでは、PHPを使ったサーバーサイドの実装、MySQLデータベースのセットアップ、HTMLフォームを用いたユーザーインターフェースの作成、そしてDockerを利用した開発環境の構築まで、実践的なスキルを学びました。
今後、この基本的なCRUDアプリをベースに機能を拡張し、認証機能やファイルアップロード機能など、より高度な機能を追加することで、さらに実践的なWebアプリケーションを構築できるようになるでしょう。