PHPで作る

【PHP】簡単なプログラムを作ってPHPの基礎を学習しよう【フォーム編】

【超初心者向け】PHPを学習する準備をしようの記事では、

  • PHPとはどんなものかの理解
  • PHPのエディターを準備
  • PHPの開発環境の準備

を紹介しました。

まだ読んでいない方はぜひ読んでみてくださいね。

さて今回は、いよいよPHPを使ってプログラムを作っていこうと思います!

しろねこくん
しろねこくん
おお、いよいよ実践だな!どんなものを作るんだ?
まど
まど
PHPの基本を網羅できる、「ToDoリストアプリ」を作っていくよ!

どんなプログラムを作るか考えよう

PHPの基本を網羅的に学ぶために、「ToDoリストアプリ」を作ってみましょう。

まど
まど
ちなみにToDoリストというのは、日本語でいう「やることリスト」だよ!やるべきことを忘れないよう管理するために使われるよ!

ToDoリストを追加することはもちろん、編集や削除もできるようにしていきます。

ToDoリストアプリでできること

  • リストを入力できる
  • リストを一覧表できる
  • リストの詳細表示ができる
  • リストを編集でいる
  • リストを削除できる
まど
まど
データの表示・入力・編集・削除という機能は、あらゆるプログラムで活用できるから、覚えておくとかなり応用がきくよ!

それぞれの処理を具体的にする

具体的なプログラムに落とし込むために、それぞれの処理をもう少し具体的にイメージしてみましょう。

データの操作は入力フォームから行います。

入力済みのデータを一覧するページがあり、そこから入力されたデータを選択すると編集や削除もできるようにできると便利ですね。

このような機能を実際に作っていきます!

ToDoリストの機能

リストの入力 入力フォームから必要な情報を入力してリストを保存する
リストの一覧表示 保存されたリストを一覧で表示する
リストの詳細表示 一覧から選択されたリストの詳細情報を表示する
リストの変更 修正したいリストの情報を変更する
リストの削除 保存されているリストを削除する

データの操作にはデータベースが必要

しろねこくん
しろねこくん
リストの登録とかって、どこかにデータを保存しておかないといけないよな?これもPHPでできるのか?
まど
まど
そうだね、データの保存などの操作はデータベースを使う必要があるよ!PHPを使ってデータベースの操作ができるんだ!

データベースを使うと、情報を永続的に保存できる上、大量の情報を扱うことができます。

今回は、XAMPPやMAMPのインストール時に同時に使えるようになる「MySQL」を使っていきましょう。

データベースを扱えるようになれば、開発の幅が圧倒的に広がるので、この機会にぜひ習得しましょう!

当記事ではPHPに慣れるという意味を込めて、フォームの作成までを解説します。

一度に覚えるのは大変なので、データベースを使った処理は次回の記事で解説しますね!

入力フォームを作ろう

まど
まど
まずは、ToDoリストの起点となる入力フォームを作っていこう!

必要はファイルは次の2つ。

  1. 情報入力ページ
  2. 登録完了ページ

まずはひとつの項目を入力フォームに入力→次のページへ情報送信という流れを作ってみましょう。

完成イメージ

ソースコード

入力ページ(index.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoリスト 入力ページ</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
	.input-area {
		margin-bottom: 20px;
	}
	input[type="text"],input[type="email"],select {
		width: 300px;
		height: 30px;
	}
	textarea {
		width: 300px;
	}
	p {
		font-weight: bold;
		font-size: 20px;
	}
	.btn-border {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		border: 2px solid #9ec34b;
		font-size: 15px;
		color: #9ec34b;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 16px;
		border-radius: 4px;
		transition: .4s;
	}
	.btn-border:hover {
		background-color: #9ec34b;
		border-color: #cbe585;
		color: #FFF;
	}
</style>
</head>
<body>
 	<form action="complete.php" method="post">
 		<h2>ToDoリスト 入力ページ</h2>
	 	<div class="input-area">
		 	<p>予定タイトル</p>
		 	<input type="text" name="todo_title" placeholder="例)買い物" required>
		</div>
	 	<div class="input-area">
	 		<input type="submit" name="submit" value="送信" class="btn-border">
	 	</div>
	</form>
</body>
</html>

 

登録完了ページ(complete.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoリスト 入力ページ</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
	.input-area {
		margin-bottom: 20px;
	}
	input[type="text"],input[type="email"],select {
		width: 300px;
		height: 30px;
	}
	textarea {
		width: 300px;
	}
	p {
		font-weight: bold;
		font-size: 20px;
	}
	.btn-border {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		border: 2px solid #9ec34b;
		font-size: 15px;
		color: #9ec34b;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 16px;
		border-radius: 4px;
		transition: .4s;
	}
	.btn-border:hover {
		background-color: #9ec34b;
		border-color: #cbe585;
		color: #FFF;
	}
</style>
</head>
<body>
 	<h2>登録完了ページ</h2>
 	<div class="input-area">
	 	<p>予定タイトル</p>
 		<?php echo $_POST['todo_title'];?>
	</div>
</body>
</html>

見やすくなるようCSSでデザインをつけていますが、この部分は消しても大丈夫です。

とりあえず動きを見たい方はコピペして動作を確認してみましょう。

ファイルの設置場所は、XAMPPまたはMAMPフォルダの「htdocs」ディレクトリです。

参考までに私の環境での配置場所を添付しておきます。

htdocs以下は好きにディレクトリを作って管理してもOKです!

  1. 入力ページはHTMLのみでデータ送信
  2. 登録完了ページではPHPを使って送信されたデータの受け取り

という流れになっています。

送信ボタンを押せば完了ページに情報が表示されましたか?

詳しい部分までは理解できなくても大丈夫なので、とりあえずこういった形でフォームが作れるというイメージが持てればOKです。

<input type="text" name="todo_title" placeholder="例)買い物" required>

inputタグの最後にrequiredとついているのは、HTML5の必須入力チェックです。

これをつけるだけで簡易的な入力チェックが実装できます。

GETとPOST

PHPにデータを受け渡す方法としては「GET」と「POST」の2種類があります。

GET=はがき、POST=封筒をイメージするとわかりやすいかもしれません。

GET:情報が外部に見える状態で、URLから値を渡す
POST:情報が外部に見えない状態で、フォームから値を渡す

お問い合わせフォームは個人情報の漏洩に繋がるのでPOSTにしておきましょう。

<form action="complete.php" method="post">
formタグのmethod部分にpostと書けばOKです。

actionはボタンを押したときのフォームの飛び先ページの指定です。

データの受け取り

complete.phpではPHPを使って送信された情報を受け取っています。

PHPは基本的にHTMLの中に埋め込んで使います。

構文は下記。

<?php
  //PHPの処理内容
?>

<?php //1行で書くこともできる ?>

HTMLのコードの中に、上記の構文を挿入することで、<?php〜?>で囲まれた中はPHPとして扱われるわけですね。

データの受け取りは、「$_POST」という変数を使います。

まど
まど
$_POSTは予め用意されている変数で、POSTされたデータが入っているよ!

$_POST[‘フォームで指定した要素名’]

という形で記述すると、フォームからPOSTで送信された情報を受け取ることができます。
今回でいうと、

$_POST[‘todo_title’]

となりますね。

入力フォームを拡張してみよう

入力フォームの基本的な動きがわかったでしょうか?

同じような流れで必要な項目を増やしてみましょう!

完成イメージ

下記を追加で実装してみましょう。

書き方が少し変えるだけで、様々な入力項目を作成できます。

  • ラジオボタン
  • セレクトボックス
  • テキストエリア

ソースコード

入力ページ(index.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoリスト 入力ページ</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
	.input-area {
		margin-bottom: 20px;
	}
	input[type="text"],input[type="email"],select {
		width: 300px;
		height: 30px;
	}
	textarea {
		width: 300px;
	}
	p {
		font-weight: bold;
		font-size: 20px;
	}
	.btn-border {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		border: 2px solid #9ec34b;
		font-size: 15px;
		color: #9ec34b;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 16px;
		border-radius: 4px;
		transition: .4s;
	}
	.btn-border:hover {
		background-color: #9ec34b;
		border-color: #cbe585;
		color: #FFF;
	}
</style>
</head>
<body>
 	<form action="complete.php" method="post">
 		<h2>ToDoリスト 入力ページ</h2>
	 	<div class="input-area">
		 	<p>予定タイトル</p>
		 	<input type="text" name="todo_title" placeholder="例)買い物" required>
		</div>

		<div class="input-area">
		 	<p>優先度</p>
		 	<label><input type="radio" name="yusen" value="高" checked>高</label>
		 	<label><input type="radio" name="yusen" value="中">中</label>
		 	<label><input type="radio" name="yusen" value="低">低</label>
	 	</div>

	 	<div class="input-area">
		 	<p>予定種別</p>
		 	<select name="syubetsu" required>
		 		<option value="">-選択-</option>
		 		<option value="仕事">仕事</option>
		 		<option value="外出">外出</option>
		 		<option value="勉強">勉強</option>
		 	</select>
	 	</div>

		<div class="input-area">
	 		<p>予定詳細</p>
	 		<textarea name="todo_body" rows="5" placeholder="例)具体的な内容を記載" required></textarea>
		</div>

	 	<div class="input-area">
	 		<input type="submit" name="submit" value="送信" class="btn-border">
	 	</div>
	</form>
</body>
</html>

 

登録完了ページ(complete.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoリスト 入力ページ</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
	.input-area {
		margin-bottom: 20px;
	}
	input[type="text"],input[type="email"],select {
		width: 300px;
		height: 30px;
	}
	textarea {
		width: 300px;
	}
	p {
		font-weight: bold;
		font-size: 20px;
	}
	.btn-border {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		border: 2px solid #9ec34b;
		font-size: 15px;
		color: #9ec34b;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 16px;
		border-radius: 4px;
		transition: .4s;
	}
	.btn-border:hover {
		background-color: #9ec34b;
		border-color: #cbe585;
		color: #FFF;
	}
</style>
</head>
<body>
 	<h2>登録完了ページ</h2>
 	<div class="input-area">
	 	<p>予定タイトル</p>
 		<?php echo $_POST['todo_title'];?>
	</div>
	<div class="input-area">
	 	<p>優先度</p>
 		<?php echo $_POST['yusen'];?>
	</div>
	<div class="input-area">
	 	<p>予定種別</p>
 		<?php echo $_POST['syubetsu'];?>
	</div>
	<div class="input-area">
	 	<p>予定詳細</p>
 		<?php echo nl2br($_POST['todo_body']);?>
	</div>
</body>
</html>

まとめ

基本的な入力フォームの作り方は以上となります。

今回は難しい処理はとくにしていませんが、完了ページにメール送信をする処理をいれればお問い合わせフォームができますし、データベースへの登録処理を追加すれば掲示板を作ることもできます。

次回は、実際にデータベースを作成して、今回入力したフォームの内容を操作してみましょう!

それでは今回は、以上です。ありがとうございました。