前提
・DB設定
→それぞれで作ると、命名ミスなどで、事故が起きるので、一人が作ったものを共有します。
DBのインポート方法はこちらから
インポートするファイルはこちらからダウンロード
・ElevenLabsのアカウント登録とAPIキーの取得
アカウント登録とキー取得の方法はこちらから
復習
・画面遷移図、画面設計書を再度見直すこと
GoogleDrive
・phpMyAdminの使い方
【PHP WEBアプリ開発】第3章 phpMyAdminの使い方
ルール(Discord共有済み)
■変数名・メソッド名について
何を格納する変数なのか、何をするメソッドなのか、誰が見ても分かる名前を付けること。
ローマ字は使用しないこと。
長すぎる名前は避けること。
例①(意味が分かる名前)
× $n = 30;
〇 $userId = 30;
例②(ローマ字禁止)
× $tango = "hello";
〇 $word = "hello";
例③(長すぎる名前は避ける)
× $userInputEnglishWord = "hello";
〇 $inputWord = "hello";
---
■コメントアウトについて
処理のまとまりごとに、「何をする処理なのか」が分かるコメントを書くこと。
例
// ユーザー情報を取得する
// 入力値のバリデーションを行う
// データベースへ保存する
開発手順
開発場所
エクスプローラーにて、C:\xampp\htdocsまで移動し、新規フォルダで「vocabulary_app」を作ってください。
vocabulary_app内で開発を行います。
デバック方法
http://localhost/vocabulary_app/ファイル名.php
で入れます。

サイトアクセス時に、一番最初に表示する画面であることを明示するためです。
ファイル名がindexのファイルが存在すると、http://localhost/vocabulary_app/だけでアクセスできます。
config.phpの作成
DB情報やAPI情報を一つにまとめて管理します。
config.phpファイルを作成し、以下のプログラムをコピペしてください。
<?php
//// データベース設定 ////
define('DB_HOST', 'localhost');
define('DB_NAME', 'your_database_name');
define('DB_USER', 'root');
define('DB_PASS', '');
// MySQL接続
$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if (!$conn) {
die("データベース接続に失敗しました: " . mysqli_connect_error());
}
//// ElevenLabs API ////
define('ELEVENLABS_API_KEY', 'ここにAPIキーを入力');
define('ELEVENLABS_API_URL', 'https://api.elevenlabs.io/v1');
?>
一か所だけ書き換えが必要です。
define('ELEVENLABS_API_KEY', 'ここにAPIキーを入力');
において、ここにAPIキーを入力に事前に取得したElevenLabsのAPIキーを貼り付けてください。
画面ごとの開発
基本的に1画面につき最低でも1ファイルが必要です。

機能ごとにファイルを分けると分かりやすいです。
サンプルプログラムでは、登録・編集・削除と機能ごとにファイルが分かれています。
サンプルプログラム
以下はサンプルプログラム(edit.phpの一部抜粋)です。
こんな感じで使えますので、それぞれに合った形に書き換えてください。
<?php
include 'config.php';
//入力内容の受取と準備
$id = $_POST['id'];
$task_name = $_POST['task_name'];
$stmt = $conn->prepare("UPDATE list SET task_name = ? WHERE id = ?");
$stmt->bind_param("si", $task_name,$id);
if ($stmt->execute()) {
header('Location: index.php');
exit;
} else {
echo "タスクの更新に失敗しました。";
}
$conn->close();
?>
全画面共通
全phpファイルに共通して以下のプログラムを1行目に書いてください。
<?php
session_start();
各種教材
・サンプルプログラムの一部解説
Webアプリ開発を始めるにあたって。configとはincludeとはprepareとは?
・知識系、インフラ系、開発の流れ
Webサイト・アプリの違いとその仕組み
・ユーザーごとの切り替え表示方法とセッション
→ログイン画面ができるまでお待ちください。
ユーザーごとの切り替え表示方法