【第2話】作って学ぶPHP!初心者による実践録!~設計編~

これからPHPの勉強を始める方に向けて!

PHP初心者の私が、実際に簡単なWebサイトを作成しながら学んでいく実践録です!!

この記事の目標は、同じく初心者の方が、実際に「作って学ぶ」を実践出来る内容を提示することです。

私自身は、他言語(C#、Javascriptなど)でのプログラミング経験がありますが、プログラミングを始めて勉強する方でも理解出来るように心がけて書いていきます。

ただし、HTML・CSSに関しては説明を省きます。ご了承ください。

また、分かりにくい所等あればコメント等頂けたら凄く喜びます。

こちらの記事は、「第2話」となっております。
「第1話」はこちらから。

【第1話】作って学ぶPHP!初心者による実践録!~前準備~

 

 

どんなページを作るのかイメージを固める

さっそく、第一話の続きをやっていきます!

実際に作るページのイメージを固めていく所ですね。

今回作るWebサイトは、「ブックマークを管理するだけのWebサイト」という物でした。

ということで、必要な画面・機能を洗い出していきます!

 

ブックマーク一覧表示機能

まずは、メイン機能!
登録したブックマークを一覧表示する画面です!

めちゃくちゃシンプルに、こんな感じで表示してみることにします。

一覧

一覧

 

タイトルとメモに関しては、データベースに登録している値を表示。

そして、タイトルにはデータベースに登録されているURLのリンクを付けます。

あとは、ブックマークの変更をしたいときに押すボタンも付けておきます。
削除をする場合は、いったん変更を経由することとして、この画面には配置しないようにします。
※一覧はシンプルにしたいので、ボタンが増えるのが嫌だったので。

 

ブックマークを追加する機能

次は、ブックマークを追加する画面です!

ブックマークを追加出来なければ何も管理出来ませんね。

ということで、ブックマークを追加する機能が必要です。

ブックマークに必要な情報としては、

・タイトル
・URL
・メモ(個人的に欲しい)

といった所でしょうか。

ということで、こんな画面を作ります!

追加画面

追加画面

 

画面上での制御に関しては、
タイトルとURLは入力必須とします。メモは任意で入力する感じで。

また、URLはアドレスバーからコピーすればよいのですが、タイトルはコピーするのがめんどくさいので、
URLを入力したらタイトルは自動で取得するようにしたいですね。
私のPHPの知識だと、出来るか分かってないですけど。たぶん出来るでしょう。
よく分からなかったら、こっそり消そう。

あとは、キャンセルボタンを押したときは全ての項目をクリアするようにしてあげます。

追加に関しては、こんな感じですね。

 

ブックマークを変更する機能

ブックマーク一覧画面に変更ボタンを置いたので、これも必要ですね!

変更画面

変更画面

 

画面は、ブックマーク追加画面とほとんど一緒!!
削除ボタンが追加されたぐらいですね。

あとは、キャンセルボタンを押したときに、
最初に変更画面を表示したときの値に戻す、というのが追加画面との違いです。





作成する画面は全部で3つ

上で書いた通り、今回作成する画面は「3つ」です!

ちなみに、それぞれのページにデータベースとの接続が必要となっています。

一覧画面 : SELECT(データの取得)
追加画面 : INSERT(データの追加)
変更画面 : UPDATE、DELETE(データの変更、削除)

データベースの基本操作に関して、全部学ぶことが出来ますね!!

他にもロジックで考慮出来ていない所があるかもしれませんが、ざっくりこんな感じで進めていきましょう!

今回はここまで!

今回はここまでとして、続きは次回!!
次回からは、ようやく実際に作り始めますので、頑張っていきましょう!!
といっても、まずは「データベースの作成」からですが。

第3話はこちら!

【第3話】作って学ぶPHP!初心者による実践録!~DB編~

記事の更新は、Twitterにて発信していきますので、フォローして頂ければ嬉しいです!!

 

質問・指摘はこちらから

プログラミング初心者の方は、本当にわからないことだらけだと思います。
そんな方へ、少しでも役立つことが出来れば嬉しいです。

分からない所があれば、こちらの記事にコメントを入れてください。
出来る限り回答していきます!
Twitterからの質問でもかまいません。

また、間違い等あればご指摘頂けると幸いです。
PHPに関しては、私自身キャッチアップ中のため至らない点もあるかと思います。
ご指摘頂いた内容は、随時修正していきます!

 

 

それでは、
のらくら でした!!

4 Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です