ゆるキャラのペパクラ情報サイトを改善する(1)まずは何をやりたいか
JUGEMテーマ:ホームページ作成
1.必要な要件をリストアップすること
約1年前に立ち上げた、全国のゆるキャラのペーパークラフト情報を集めた「ゆるキャラペパクラインデックス」ですが、色々不満も出てきていますので、ここらで思い切って改善を図りたい、というのが今回のシリーズのテーマです。
色々な不満と申しましたが、一言で言うとまぁ維持が面倒で大変ということです。
特に面倒だったのが画像の登録です。
画像を1枚1枚トリミングして、縮小して、phpMyAdminで登録してゆくというのが何とも面倒で、いつの間にか更新も途絶えて、生きた屍のようなサイトになっていました。
そこで今回のテーマは「誰でも簡単に登録できるようにしたい」です。
具体的には、いわゆる登録フォームを作ってやって、そこから誰でもペパクラ情報を登録できるようにするのです。
ここで細かい要件をリストアップしてみましょう。
(1)登録フォームから新規登録ができること。
(2)検索結果からの修正フォームが表示できること。
(3)登録内容は登録者のみが自由に修正・削除できること(パスワード方式)
(4)名前、地域、所属、パスワードは必ず入力させるようにすること。
(5)アップロードされた画像は自動的に指定のサイズに縮小されること。
(6)画像が指定されなかったら代わりに「NO IMAGE」画像が自動的に挿入されること。
(7)画像はjpeg、png、gifを受け付けて、自動的にjpegに変換すること。
(8)削除は、間違えて消さないように1クッション置くこと。
(9)SQLインジェクション対策をとること(PDOの採用)。
(1)登録フォームから新規登録ができること。
どこかわかりやすいところにある「新規登録」ボタンを押すと、登録専用のブランクフォームが開きます。名前、所属、地域、url、コメントなどはテキスト入力、画像はファイルを指定してアップロード、分類や入手方法はラジオボタンで選択、パスワードは入力すると「●●●●●●●●」と表示されるのが素敵です。
(2)検索結果からの修正フォームが表示できること。
従来の検索結果画面の表に、「修正」の欄を設け、その欄にある「■」をクリックすると、登録済みの情報があらかじめ書き込まれた登録フォームが表示されます。ユーザーは必要な部分だけを直してパスワードを入力して「修正」を押すと、データが修正されます。
(3)登録内容は登録者のみが自由に修正・削除できること(パスワード方式)
情報の変更、削除には登録時に設定したパスワードが必要です。パスワードが無ければ勝手にデータベースをいじることはできません。(ただし管理人は自由に修正できるようになっています)
(4)名前、地域、所属、パスワードは必ず入力させるようにすること。
よくある登録フォームのように、入力漏れがあると、「×××を入力してください」と赤い字で表示されます。
(5)アップロードされた画像は自動的に指定のサイズに縮小されること。
ユーザは画像のサイズを気にせず、好きなサイズで画像をアップロードすると、スクリプトが自動的に画像サイズを規定の120×80px以内になるように縮小してくれます。
(6)画像が指定されなかったら代わりに「NO IMAGE」画像が自動的に挿入されること。
画像はまぁなくても情報量としては一応足りていると思いますので、画像のアップロードは任意とします。その代わりに、画像を指定せずに登録ボタンが押された場合は、代わりのブランク画像を自動で挿入してくれます。
(7)画像はjpeg、png、gifを受け付けて、自動的にjpegに変換すること。
これもユーザは画像のフォーマットを気にせず、自由にアップロードできるようになっています。
(8)削除は、間違えて消さないように1クッション置くこと。
削除ボタンを誤って押しただけで登録内容が消えてしまわないように、削除の場合は1クッション置き、別画面でパスワードを入力しないと消せないようになっています。
(9)SQLインジェクション対策をとること(PDOの採用)。
ユーザが登録できるようになるということは、特殊なクエリを挿入することでデータベースの中身を操作するSQLインジェクションを受けるリスクが高まることにもなります。これを避けるために、従来のMySql関数によるクエリ発行を止め、PDOという新しい方式でデータベースとやり取りするように変更します。
2.全体構成
従来のゆるキャラペパクラインデックスは次のような構成でした。
・本体(ypindex.php)
└・画像表示スクリプト(ypimg.php)
非常にシンプルです。これに対し今回作る改善後のファイル構成は次の通りです。
・本体(ypindex.php)
├・画像表示スクリプト(ypimg.php)
└・新規登録・修正スクリプト(ypmod.php)
├・画像表示スクリプト(ypimg.php)
└・削除スクリプト(ypdelete.php)
画像表示スクリプトは前回の物をそのまま流用しますので、新たに作るのはypmod.phpとypdelete.phpの2本だけです。
新規登録フォーム、修正フォーム、入力漏れ時の入力を促すフォーム、そしてデータの登録作業は全てypmod.phpで行い、削除に1クッションを要する削除スクリプトだけ別の構成となっています。
それでは次回、順番が前後しますが(9)番のSQLインジェクション対策から具体的な中身に入っていこうと思います。
次回以降の目次案は次の通りです。
(2)SQLインジェクション対策
・PDOとは
・PDOによるデータベースアクセス方法
・ypindex.phpの改修
(3)DB修正スクリプトの作成
・ypmod.phpの内部構成
・ypmod.phpの作成
(4)画像登録処理
・画像の受け取り方
・画像の縮小方法
・画像の形式変換方法
(5)削除スクリプトの作成
・ypdelete.phpの作成
それではそれでは、次回をお楽しみに。
- 2015.11.22 Sunday
- ホームページ
- 22:22
- comments(0)
- -
- -
- by てちくん