おかひろブログ

自由な生き方をするためにエンジニアを選択した

MENU

PHPで簡易ブログの作成➀(投稿ページの作成)

f:id:ay-or-ih6039:20180430120730p:plain

こんにちは。おかひろです。
11月にエンジニアに転職して約半年が経ちました。独学と実際に現場に入ってプログラミングをすることの違いに戸惑いながら仕事をしています。

 

はじめに

現在、PHPを勉強中のPHP初心者がスキルの習得も兼ねて簡易的なブログを作成してみようと思います。
その過程をブログに書いていきます。

今回作成する簡易ブログはフレームワークを使わず素のPHPで作っていきます。フレームワーク(CakePHP)を使うことも考えたのですが詰めすぎるのも良くないのとSQLの勉強も兼ねたいと思いフレームワークを使わないことにしました。

 

開発準備

開発環境の構築を行います。
今回はPHP・Apache(Webサーバ)・MySQL(SQLデータベースサーバ)を一括で導入できる「XAMPP」を使用しています。
「XAMPP」をインストールすることによってローカル環境上でプログラムを実行させる環境が整います。

 

今回の目標

簡易ブログの機能としては記事一覧、記事ページ、記事投稿機能、記事編集、ログインを作成して+αで機能を追加していこうと考えています。

記事投稿ページの作成

やることは
1.投稿フォームを用意する。
2.確認画面を用意する。
3.完了ページを用意する。
投稿フォームの項目は記事タイトル、記事本文、記事カテゴリー、投稿者にします。
また、記事カテゴリーはセレクトボックスとして開発、組織・チーム、インフラ、最新情報の4項目としています。

完成したのがこちら

1.投稿フォーム

f:id:ay-or-ih6039:20180429202352p:plain

2.確認画面

f:id:ay-or-ih6039:20180429202419p:plain

3.完了ページ

f:id:ay-or-ih6039:20180429202440p:plain

 

画面遷移とバリデーションについて

投稿ページを作成するにあたり苦戦した所を書いています。

画面遷移

1つのファイルで入力(バリデーションチェック)→確認→完了の処理をさせる。
はじめは入力画面、確認画面、完了画面をそれぞれのファイルで処理をさせていたのですが値の受け渡しが面倒だなと思いいろいろ調べていると条件分岐(if文)を使えば1つのファイルで処理することが出来る事がわかり試してみました。
1つのファイル内で条件分岐させて条件1の時は入力画面を表示、
条件2の時は確認画面を表示、条件3の時は完了画面を表示させるといった処理をさせることにしました。
今回の場合だとif文で確認画面、elseif文で完了画面、else文で入力画面を表示させるようにしています。

 

バリデーションの処理

バリデーションとはフォームから入力した値をチェックしてエラー表示する機能です。

バリデーションはフロントサイドでチェックした場合でもフロントのソースはいじろうと思えばいじれてしまうため、必須条件をクリアできてしまうので必ずサーバーサイドでもチェックをするようにしないといけません。

今回は「入力内容を確認する」ボタンを押下されることによってバリデーションチェックが行われ、チェック項目にエラーが無ければ確認画面に遷移する。
エラーが有れば入力画面に遷移するようにしています。

 

f:id:ay-or-ih6039:20180429203123p:plain

 参考にしたサイト

入力値のバリデーション | GRAYCODE PHPプログラミング

 

改良点

1つのファイルで処理させてしまった事での弊害

1つのファイルで入力→確認→完了の処理をさせいるためコードが長くなってしまった。今回は個人で作っているのですが、チームで開発するなど他の人が見たときに分かりにくいコードになっているので混乱してしまうかもしれません。なので入力+確認画面と完了画面とでファイルを分けるようにしたいと思います。

 

今回は以上です。

次回作業は投稿内容をDBに保存、アカウント登録画面を作っていきます。