Reactあたりで開発をしていましたが、どうやらERP（業務統合管理）だったりCRM（営業管理）ではhtmxを利用した方が既存技術の応用や転換効率が良いので、会社としてhtmxでの制作を推し進めていくことにした。
以下は基本的なhtmxとphpを利用してデータベースから値を取り込み、html側に反映させるサンプルです。
（弊社はPHPer）
はじめに
htmx と PHP を使用してデータベース（例えば MySQL）から値を取得し、HTMLに動的に反映させるサンプルを以下に示します。この例では、htmxを使用してサーバーに非同期リクエストを行い、PHPスクリプトでデータベースに問い合わせて結果をHTMLに反映させます。
必要なもの
- データベース: MySQLなどのデータベースがセットアップされていること。
- サーバー環境: PHPが動作するサーバー（例: Apache, Nginx）。アナログエンジンのplesk環境でテスト
- htmx: HTMLに直接記述するか、外部ファイルとして追加します。
ステップ 1: データベース準備
まず、使用するデータベースにテストデータを含むテーブルを用意します。以下はそのサンプルです。
CREATE TABLE `sample_data` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(255) NOT NULL,
`value` VARCHAR(255) NOT NULL
);
INSERT INTO `sample_data` (`name`, `value`) VALUES ('Sample 1', 'Value 1'), ('Sample 2', 'Value 2'), ('Sample 3', 'Value 3');
ステップ 2: PHP スクリプト
次に、データベースからデータを取得し、クライアントに送り返すPHPスクリプトを作成します。現在は適当にhtmlをそのまま返していますが、jsonで返し、処理をする方が現実的かと思います。
// fetchData.php
<?php
$host = 'your_host'; // ホスト名
$dbname = 'your_dbname'; // データベース名
$username = 'your_username'; // ユーザー名
$password = 'your_password'; // パスワード
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$sql = "SELECT * FROM sample_data";
$stmt = $pdo->query($sql);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<div>{$row['name']}: {$row['value']}</div>";
}
} catch (PDOException $e) {
die("Could not connect to the database $dbname :" . $e->getMessage());
}
?>
ステップ 3: HTML と htmx
最後に、htmxを使用してPHPスクリプトに非同期リクエストを行い、結果をページに表示するHTMLを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>htmx + PHP Sample</title>
<!-- htmxを含める -->
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<h2>データベースからのデータ</h2>
<!-- htmxを使用してfetchData.phpからデータを非同期で取得し、このdivに反映させる -->
<div hx-get="fetchData.php" hx-trigger="load">
データをロード中...
</div>
</body>
</html>
このHTMLページをブラウザで開くと、ページがロードされると同時にhtmxが fetchData.php へ非同期リクエストを行い、PHPスクリプトがデータベースからデータを取得して、そのデータがHTMLページに動的に表示されます。
上記を利用する場合
- PHPスクリプトでデータベース接続情報（ホスト名、データベース名、ユーザー名、パスワード）を正しく設定してください。
fetchData.phpファイルのパスは、サーバーの設定に応じて適宜調整してください。- htmxの
hx-get属性で指定するURLは、実際の環境に合わせて適切に設定してください。 - アナログエンジン社内では上記のスクリプトはtheLibにて対応してください。fetchData部分はhtml側に記述してclassで呼び出した方がよっぽど可読性がいいのと作業が短縮できます。（手続型）
