やり方

前提

・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.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ファイルが必要です。

マスコット
必ずしも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サイト・アプリの違いとその仕組み

・ユーザーごとの切り替え表示方法とセッション
→ログイン画面ができるまでお待ちください。
ユーザーごとの切り替え表示方法

セッションとは?