PHP+CSVでカタログ型サイトを作ろう

PHPでデータをまとめたCSVを読み込み、簡易なデータベース型サイト(カタログ型サイト)を作ろうという企画です。

このnoteは2023年12月14日~17日にエックスでポストした #年末PHP講座 を転載したもので、前note「PHPでおみくじを作ろう」の続編にあたります。
内容は初心者向きですが、解説は前noteを読まれていることを前提に進めます。

今回もエックスで投稿した内容についてはすべて無料でご覧いただけます。
また、有料部分ではSEOやセキュリティ面を考慮して行っている施策や細かな工夫を追記しています。

用意するもの

テキストエディタ(Visual Studio Code推奨)と開発環境はAmppsを使います。(「PHPでおみくじを作ろう」参照)


PHP+CSVでできること

PHP+CSVでのWebサイト制作は、テンプレート化したカタログ型サイトの制作に向いています。データさえ揃えば大量のページを一瞬で生成できる、エクセルなどを使い手元でデータ修正が行える、などのメリットがあります。

今回は都道府県別の県庁所在地と人口のデータを使って簡易なカタログ型サイトを作りましょう。
前noteのおみくじプログラムでは「CSVから任意の1行を取り出しデータを表示」するところまで解説しました。今回はCSVから「全要素一覧を取得」「GETリクエストで任意のデータを取得」する方法を覚えましょう。

ファイル構成

ファイル構成はシンプルです

region.csv → 地方名のデータ
pref.csv → 各県のデータ
index.php → トップページ
list.php → カテゴリページ
single.php → 詳細ページ

基本部分は上記の5ファイルで構成します。
都道府県別に詳細ページが生成されるので、実際に表示されるのは50ページ以上になります。

最終的にはこのようなものを目指していきます。

トップページ

まずはトップページから作っていきましょう。
Amppsを起動してAmpps/www/に新たにtodofukenフォルダを作成し、2枚のCSVファイルをリンク先のスプレッドシートからCSV形式でDLしてください。
同じくフォルダ直下にindex.phpファイルを新規作成してください。

for文の仕組み

トップページ(index.php)には地方名一覧(カテゴリ一覧)を置きます。

おみくじプログラムでは一つの要素を取得するだけでしたが、一覧では繰り返し構文を使ってすべての要素を出力します。

繰り返し構文はいくつかありますが、まずは汎用性の高いfor文を覚えましょう。

for文の仕組みは

for(初期値; 条件式; 増減式){
  処理;
}

例えば

for( $i=0; $i<10; $i++ ){
    echo $i;
}

であれば、
$iは0から始まって10未満で1ずつ増える繰り返しという意味になり
0123456789が出力されます。

++(インクリメント)は$i = $i+1と同意です。

2.CSVから一覧を表示する

index.phpコード全体

① region.csvをfile関数で読み込み、一行ずつexplode関数で分解していきます。

$i = 1 // インデックス0(1行目)は見出しなのでスキップして1から
$i < sizeof($region_data) //「<」は 未満なので要素数-1と同意
$i ++ // 1つずつ処理

② カテゴリページへのリンクはパラメータ付きURLで作成します。
例)  list.php?id=1

ダブルクォーテーションで括られた文字列の中にダブルクォーテーションを書くときは、\または¥をつけてエスケープします。
エスケープ忘れはエラー原因のトップ3に入るくらい頻発します。気を付けましょう。

ダブルクォーテーションで括られた文字列の中に変数を書くときは中括弧 { 変数 }で囲みます。

$region_lisitにリスト項目を追加していきます。
「.=」(「.(ピリオド)」に「=」)は文字列の追加を表します。
「=」では変数の中身が上書きされてしまうので注意しましょう。

カテゴリページ

カテゴリページ(地方別県名一覧)を作ります。
todofukenフォルダにlist.phpを新規作成してください。

カテゴリページもトップページと同じ一覧ページですが、CSVから「条件に合うものだけ抜き出して出力する」という点が大きく違います。

GETリクエストを受け取る

?id= で渡された値はスーパーグローバル変数の$_GETで受け取ることができます。

$query_id = $_GET[“id”]; // IDを取得

for文で一行ずつ調べ、このIDと一致するものを取り出します。

if($line[1] === $query_id) は「地方IDと受け取ったクエリパラメータと一致するとき」という意味です。

詳細ページのURLはsingle.php?id=の形で作り、「.=」で$pref_listに追加していきます。

タイトルに使う地方名も取り出す

同じくクエリパラメータを使ってregion.csvから一致するデータを取り出します。

こちらは一致する地方名が見つかればそれ以上調べる必要は無いのでbreak;で繰り返し処理を終了します。

CSVのサイズが大きくなると繰り返し処理はサーバーへの負担になるので、こまめに対策する習慣をつけておきましょう。

list.phpコード全体

$titleと$pref_listをHTMLに配置してlist.phpは完成です。

詳細ページ

県別の詳細ページを作ります。
todofukenフォルダにsingle.phpを新規ファイルで作成してください。

ここまでくれば、もう難しくはないですね。
・クエリパラメータを取得し
・配列化したdata.csvから該当する行データを取り出し
・HTMLに配置する
だけです。

地方名は、data.csvから取り出した地方IDを使ってregion.csvから取得します。

数値の処理

あとは細かい部分です。
人口は読みやすいように3桁区切りの数値で表したいところですが、CSVの中にカンマ区切りの数値を書くことはできません。(カンマでセルが分割されてしまいます)
CSVには一旦カンマなしで書いて、取得した要素を数値化(intval)して、number_format関数で3桁区切りに変換します。

共通のヘッダーを配置

最後に各ページ共通のヘッダーを設置しましょう。
todofukenフォルダにheader.phpを作成します。
header.phpにはヘッダーに表示したいタイトルなどのHTMLを書きます。

それぞれのPHPファイルの該当場所からinclude関数で読み込めばOK。
フッターも同様の方法で読み込めます。

CSSでデザインを整えると、このようなサイトが出来上がります
https://aki-f.net/note/todofuken/

下記の画像はsingle.phpのコード全体です。

single.phpコード全体

ここまででいったん完成です。

基本的な部分だけですが思ったより簡単に作れたのではと思います。
todofukenフォルダをレンタルサーバーにアップロードすれば、そのままWebサイトとして表示されます。

\ここで一旦CMです/

プログラミング入門者向きの教本は数あれど、このシリーズが一番わかり易いと思います。私もJavascriptとPythonの巻を持っています

運用に際して気を付けること

ここから先は

2,423字 / 8画像

¥ 300

この記事が気に入ったらサポートをしてみませんか?