HTMLフォームを介して送信されたデータをデータベース（Mysql）にデータを保存してみます。
■環境
・Windows10
・Visual Studio Code 1.53.2
・レンタルサーバー「ヘテムル」（php7.4,MySQL5.6）
・FTPクライアント「FileZilla」
■レンタルサーバー「ヘテムル」のデータベース（Mysql）の設定
データベース（Mysql）にデータを保存してみますので、まずは今回使用するヘテムルのデータベース（Mysql）の設定を行います。
「ヘテムル」のコントロールパネルのログイン（https://admin.heteml.jp/）画面で、「ヘテムルID」と「パスワード」を入力し、「ログイン」ボタンをクリックします。
クリックすると、コントロールパネルの右側にメニューがありますので、「各種設定」から「データベース」をクリックします。
クリックすると、「データベース」の管理パネルが表示されますので、「データベース作成画面へ」というボタンをクリックします。
クリックすると、「データベース作成画面」が表示されます。こちらの画面で「データベース名」と「接続パスワード」を入力します。入力後、「メモ」欄がありますので、データベースに関することのメモを入力する場合は行います。その後、「データベースを作成する」ボタンをクリックします。
クリックすると、「admin.heteml.jpの内容」というポップアップが表示されます。「データベースを作成します。よろしいですか？」というメッセージが書かれていますので、「OK」ボタンをクリックします。
クリックすると、「データベース[データベース名]の作成が完了しました」と表示されます。これでデータベースの作成は完了となります。完了後、「戻る」ボタンをクリックします。
「データベース」の管理パネルに戻りますので、作成したデータベースが表示されています。こちらの右側にある「phpMyAdmin」ボタンをクリックします。
クリックすると、「phpMyAdmin へようこそ」と表示され、「phpMyAdmin」ログインページが表示されます。表示されたページ内に「ログイン」という項目がありますので、データベースを作成した時のユーザー名とパスワードを入力します。入力後「Server Choice:」では、作成したデータベースの「サーバー名」を選択します。
選択後、「実行」ボタンをクリックします。
クリックすると、「phpMyAdmin」にログインできますので、左側のメニューから作成したデータベース名をクリックします。クリックすると、「このデータベースにはテーブルがありません。」と表示されます。こちらで「テーブルを作成」という項目がありますので、「名前:」、「カラム数：」を入力し、テーブルを作成します。
今回はテーブルの名前を「data」としカラム数を「2」と入力します。 入力後、「実行」ボタンをクリックします。
クリックすると、作成するテーブルの情報を設定する画面になります。こちらでカラムの「名前」を今回は「name」、「email」とします。次にデータ型は今回は「VARCHAR（可変長の文字列）」とします。次に「長さ/値」は、今回は「255」と入力します。入力後、その他の項目は入力なしで、「保存する」ボタンをクリックします。
クリックすると、テーブルが作成が完了となります。左側のメニューで、今回作成したデータベースの中に「data」というテーブルが表示されています。こちらをクリックし、「構造」という項目をクリックすると、作成したテーブル内のカラムなどの情報が確認できます。
■HTMLフォームを作成する
確認後、Visual Studio Codeなどのコードエディターを開き、HTMLフォームを作成していきます。
■コード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>データベースへの保存</title>
</head>
<body>
<div style="text-align: center">
<h1>入力フォーム</h1>
<form action="insert.php" method="post">
<p>
<label for="name">name:</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<input type="submit" value="送信ボタン">
</form>
</div>
</body>
</html>今回は上記のHTMLフォームを作成してみました。このHTMLフォームを「index.php」という名前で保存します。
■データを送信し、データベース（Mysql）に保存するためのスクリプト
では、次にデータを送信し、データベース（Mysql）に保存するためのスクリプトを書いていきます。
■コード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>MySQLへのデータ挿入</title>
</head>
<body>
<div style="text-align: center">
<?php
$host = 'MySQLのサーバー名';
$username = 'ユーザー名';
$passwd = 'パスワード';
$dbname = 'データベース名';
$conn =mysqli_connect($host,$username,$passwd,$dbname);
if($conn == false){
die("エラー: 接続できませんでした。" . mysqli_connect_error());
}
$name= $_REQUEST['name'];
$email= $_REQUEST['email'];
$sql ="INSERT INTO data VALUES ('$name','$email')";
if(mysqli_query($conn,$sql)){
echo "<h3>データベースに正常に保存された。</h3>";
echo nl2br("\n$name\n $email\n ");
}else{
echo "エラー: $sql. " . mysqli_error($conn);
}
mysqli_close($conn)
?>
</div>
</body>
</html>今回はこのようなスクリプトを作成してみました。このスクリプトを「insert.php」という名前で保存します。
■phpのファイルをFTPクライアントを使用し、サーバー上にアップロードする
2つのファイルを保存後、phpのファイルをFTPクライアントを使用し、サーバー上にアップロードする。今回はFTPクライアント「FileZilla」を使用してアップロードします。
■動作確認（スクリプトの実行）
phpのファイルをFTPクライアントを使用し、サーバー上にアップロード後、動作確認（スクリプトの実行）を行います。
Webブラウザでphpのファイルをアップロードしたサーバーにアクセスしてみます。アクセスすると、HTMLフォームが表示されました。表示されましたので、フォームを介して入力したデータがデータベース（Mysql）に保存されるのか検証してみます。
HTMLフォームの「name」と「email」の入力欄にテストで情報を入力します。入力後、「送信ボタン」をクリックします。
クリックすると、「データベースに正常に保存された。」と表示されました。これでデータベース（Mysql）の保存が完了となりました。
完了後、phpMyAdminにアクセスしてみます。
アクセスしてみると、HTMLフォームを介して送信されたデータが、データベース（Mysql）の保存されたことが確認できました。