1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

初心者が月10万稼ぐ為の記録9 ブログの投稿フォームを作成

Last updated at Posted at 2020-06-03

#ブログ投稿フォームを作成

###①form.htmlとblog.phpの2つのファイルを作成

form.htmを👇のようにする。

<body>
  <h2>Blogフォーム</h2>
  <form action="blog.php" method="POST">
    <p>ブログタイトル</p>
    <input type="text" name="title">
    <p>ブログ本文</p>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    <br>
    <input type="submit" value="送信">
  </form>
</body>

blog.phpに👇のように記載して送信ボンタンを押す。

$blog = $_POST;

var_dump($blog);

データが送られているか確かめる。

array(2) { ["title"]=> string(6) "映画" ["content"]=> string(27) "たのしかったです。" }

送られていれば☝のようになる。

###②配列でデータが入っていることが確認できたので取り出す

ループ処理のforeachを使用する。
👇

$blog = $_POST;

foreach ($blog as $key => $value) {
  echo '<pre>';
  echo $key . ':'. $value;
  echo '<pre>';
}

結果
title:映画
content:おもしろかった。

###フォームのセキュリティ
なぜ必要か?
受け取った値には、特殊文字のエンコードが必要
理由:悪意あるスクリプト送信を防ぐため

例えばブログ本文に
投稿フォーム.png

と記載して送信すると
投稿フォーム_2.png
☝のようにhtmlのh1タグが反映されてしまう。

そういうのを防ぐためタグとはみなさない処理が必要。

htmlspecialchars(値,フラグ,文字コード)
<フラグの種類>
・ENT_CONPAT(初期値):ダブルクォートのみ変換
・ENT_QUOTES:ダブル、シングルクォートを変換
・ENT_NOQUOTES:両方とも変換しない
※ほとんど真ん中を使用する。

foreach ($blog as $key => $value) {
  echo '<pre>';
  echo $key . ':'. htmlspecialchars($value,ENT_QUOTES,'UTF-8');
  echo '<pre>';
}

送信すると
投稿フォーム_3.png

エンコードして文字として出力される。

###投稿したブログをif文で公開状態か非公開状態か判定して実際に画面表示するかしないか判定する

form.htmlに公開、非公開のボタンを用意する。

<input type="radio" name="publish_status" value="publish" checked>公開
<input type="radio" name="publish_status" value="un_publish">非公開

☝checkedとは初期状態で公開にチェックをつけたい場合にい使用しる。

blog.phpにif文を記載する。

if($blog['publish_status'] === 'un_publish') {
  return;
}

もしpublish_statusがun_publishi(非公開)なら
return(次の処理は行わず返す)

これで公開して送信すれば表示される。
非公開で送信すると何も表示されない。

####非公開の時に「公開中の記事がありません。」表示させる。

if($blog['publish_status'] === 'publish') {
  foreach ($blog as $key => $value) {
  echo '<pre>';
  echo $key . ':'. htmlspecialchars($value,ENT_QUOTES,'UTF-8');
  echo '<pre>';
  } 
} else {
  echo '公開中の記事がありません。';
}

publish(公開)の場合はforeach文が実行され、
それ以外の場合は「公開中の記事がありません。」と表示される。

※追加で条件し増やしたいときはelseifを使用する。

###HTMLへ埋め込み
form.htmlに「投稿日」「カテゴリ」をついかする。

<p>投稿日:</p>
<input type="date" name="post_at">
<br>
<p>カテゴリ:</p>
<select name="category">
  <option value="ゲーム">ゲーム</option>
  <option value="映画">映画</option>
  <option value="雑記">雑記</option>
</select>

#####blog.phpをもう少し投稿されてるような感じにする
👇HTML内で、PHPを使いたい箇所をで囲んで記述する。
更にセキュリティを強化するために
htmlspecialcharsを追記する。

<body>
  <h2><?php echo htmlspecialchars($blog['title'],ENT_QUOTES,'UTF-8'); ?></h2>
  <p>投稿日:<?php echo htmlspecialchars($blog['post_at'],ENT_QUOTES,'UTF-8'); ?></p>
  <p>カテゴリ:<?php echo htmlspecialchars($blog['category'],ENT_QUOTES,'UTF-8'); ?></p>
  <hr>
  <p><?php echo htmlspecialchars($blog['content'],ENT_QUOTES,'UTF-8'); ?></p>
</body>

####改行を反映させる
この段階だとブログ本文で改行して公開しても改行されてない状態なので
改行できるように関数を使用する。
nl2br 改行をHTMLのbrに変換してくれる。
👇本文の部分追記

<p><?php echo nl2br(htmlspecialchars($blog['content'],ENT_QUOTES,'UTF-8')); ?></p>

ここまでで投稿フォームは完成。
この段階ではデータを送っただけでどこにも保存されません。
次からはデータベースに投稿したブログを保存してそれを表示できるようにする。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?