【第8話】作って学ぶPHP!初心者による実践録!~一覧画面③~

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

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

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

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

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

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

こちらの記事は、「第8話」となっております。
第1話から読むことをオススメします!

 

 

前回まで

第7話では、データベースからデータを取得する所まで実装を行いました!

改めて、現時点でのソースコードを見ておきましょう。

SELECT

SELECT

 

変数「$stms」にデータベースから取得してきたブックマークが格納されています。

では、ここからそのデータ達を画面上に表示していきましょう!!

 

一覧表示を作成

まずは、おさらい。

テーブル

テーブル

 

現状、「tbody」のタグ内は固定でデータを作成していましたね。

 

まずはここのコードを全部消してしまいましょう!!

作成部分

作成部分

 

こんな感じになりましたね!!
「ここの内容を動的に作成したい」と書いた所に、新たに記述していきます!

 




まずは仕様を考える

コードを書く前に、そもそもどんなことを実現したいのかを改めて考えてみます。

 

・テーブルの列を動的に作成する
・列には列番号を1から順番に割り振る
・データはデータベースから取得したデータを使用する
・変更ボタンからは、変更画面に移動出来るようにリンクをつける

 

こんな感じですね!

ということで、1つ1つ作っていきましょう!!

 

テーブルの列を動的に作る

まずはここから。
テーブルの列を動的に作るとは、

データテーブルから取得したデータの件数分の列を一つずつ作っていく

ということです。

 

ということで、その通りにロジックを組み立てていきます。

まずはどうやって動的に列を作るのか。

 

ここでは、「foreach文」を使います。

 

どういったことが出来るものなのか。

複数のデータが格納された変数から、1つずつデータを取り出して、取り出すデータがなくなるまで処理を繰り返すことが出来る
ものです。

イメージが付きにくいと思いますので、実際にソースコードを見てみましょう!

列作成

列作成

 

今回の列作成はこんな風に実現することが出来ます。

まず、データベースから取得したデータが格納されている「$stms」を1行ずつ取り出して「$row」に格納します。
取り出すデータがある場合のみ、「foreach」が繰り返され、データがなくなったら「endforeach」で処理が終了します。

ということで、
データが存在する数の分だけ、テーブルの列である「tr」タグを作成することが出来ます。
 

列には列番号を1から順番に割り振る

ここでは、列番号を別途変数を用意して実現してみようと思います。

foreachの手前で変数「$count」を作成して「1」を格納しておきます。
そして、foreachの繰り返しをする直前で「$count」に「1」を足していくことで連番を作成していきます。

さらに、作った連番をそれぞれ列番号の「tr」にセットしていきます。

実際にソースコードを書いたのがこちら。

列番号

列番号

 

これで列番号の表示ロジックが完成です!

 

データベースから取得したデータを列にセット

続いて、タイトル・メモの列を作っていきます。

「メモ」の列は、取得したデータをセットするだけなので、こちらからやってみましょう!

「$row」からメモのデータを取得するには、「$row」にデータベース上のメモの列名を与えてあげることで取得が出来ます。

実際のソースコードはこちら。

memo

memo

 

これでメモの表示ロジックは完成です!

 

続いて「タイトル」の列ですが、こちらは実際のブックマークサイトへのリンクを付けないといけません。
ただ、「$row」からのデータ取得はメモで行った方法と同じなので、HTMLの書き方を意識して作ってあげると出来ると思います。

 

ということで、ソースコードがこちら。

タイトル

タイトル

 
「aタグ」を使ってリンクを作り、タイトルを「trタグ」にセット。
これでタイトルの表示ロジックも完成です!

 




変更ボタンの作成

変更ボタンに関して、変更画面への移動に関しては、タイトルで行った「aタグ」を使用した方法を使ってあげればオッケーです。
ただし、どのデータから変更画面に移動してきたのかを判断出来るようにしてあげる必要があります。

ということで、今回は「GET」の機能を使って実装していこうと思います。
「GET」は、URLにパラメーターを付与してページ間のデータ受け渡しが出来るものです。

PHPのお話とは少し外れるため、説明はこのぐらいにして実際にソースコードを見てみます!

変更ボタン

変更ボタン

 
少し長くなったので2行にしていますが、1行で書いてしまって問題ありません。

ということで、これで変更ボタンも完成です!!

実際に動かしてみましょう!

「list.php」にブラウザからアクセスしてみましょう!

一覧表示

一覧表示

このように、テストデータとしてINSERTしておいたデータが綺麗に表示されていればオッケーです!!

変更ボタンに関しては、まだ変更画面を実装していないのでうまく動いていないと思います。
これから実装していくので楽しみにしておきましょう!!

 

今回はここまで!

ついに一覧画面が完成しました!
次回からは、追加画面を作っていきましょう!!

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

 

質問・指摘はこちらから

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

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

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

 
こちらの題材としている「ブックマーク管理サイト」をリリースしました!
使い方をこちらの記事で紹介していますので、使って頂けると嬉しいです!!

【リリース】超シンプル!!ブックマークを管理するだけのサイト!


 

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

1 Comment

若輩者

のらくら 様

突然のご連絡失礼致します。
初めまして、ウェブデザインの勉強を終え、phpはまだ勉強中のものです。

今回、のらくら様のこちらのブログを拝見させて頂きまして、
早速xamppを使用した、ブックマークを管理することができる、情報の出し入れが可能なサイトを作成したく拝見させて頂いておりました。

どうにか、第8回まで見よう見まねで同じような制作物を作っていたのですが、第8回最後のphpを全てhtml内に入力を終え、xamppをインストールした、『ローカルディスク(C:)』『xampp』『htdocs』『norakura』『list.php』で表示させてみたところ、以下のような表示が出てしまい、どうにもこのエラーの解消する方法がわかりませんでしたのでご連絡をさせて頂きました…。

※以下が表示されるエラーとなります。
———————————————————
Parse error: syntax error, unexpected ‘$db_user’ (T_VARIABLE) in C:\xampp\htdocs\norakura\list.php on line 4

お忙しいなか恐縮ですが、もし宜しければ考えられるエラーの原因等をご教授頂くことはできますでしょうか?

何とぞ、ご検討のほどお願いします。

返信する

コメントを残す

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