ゆるキャラのペパクラ情報サイトを作る(3)コーディング
えーと、久しぶりに使うのでSyntaxHighlighterの使い方を思い出して・・・と・・・
失礼しました。ゆるキャラのペパクラ情報サイトを作るの第3回、コーディングです。
と、その前に、この情報サイトの名前を決めました。題して、
「ゆるキャラペパクラインデックス」
です!
いや最初は「ゆるキャラペパクラディレクトリ」にするつもりだったのに、知らないうちに「インデックス」にすり替わってたんだよなぁ、まぁ「索引」的なサイトになるのでインデックスの方がぴったりくることはくるんだけど、自分でも気が付かないうちにタイトルが変わっていて、あとで初期の構想メモを見て、あらびっくり、でした。
さて気を取り直してコーディングです。机上でばっちりコーディングしてからさあ本番、というのではなく、localhostで試しながら少しずつ作っていったので、これから書くのは後知恵で少し整理した形になっていますが、ご了承ください。なお、コーディングはPHPで行うことにしました。
コーディングしなくてはならないモジュールをまずは書き出してみます。
・検索窓(POST送信)
・検索語なしの場合にサイトの説明を表示させるギミック
・MySQLのデータベースへの接続
・検索クエリの作成(当該ページ用、全ページ数取得用)
・全ページ数の取得
・当該ページデータの取得
・検索結果の表示部
・ページガイド
一つ一つ解説します。
1.検索窓
これは普通にHTMLのform文で書きます。こんな感じです。
<form action="ypindex.php" method="post"> <?php echo '<input type=text name=searchword size=40 value='; if(isset($_POST['searchword'])){ echo $_POST['searchword']; }elseif(isset($_GET['searchword'])){ echo $_GET['searchword']; } echo ' >'; ?> <input type="submit" value="検索"/> </form>
1行目は通常のform文。ポイントは、actionに自分自身を呼び出していること。何度も繰り返して検索できるようにしてあります。
2〜9行目はform文としては1行で、検索窓を表示するinput文です。長くなっているのは、検索ボタンを押してもキーワードが消されないようにするため。やり方は、POSTまたはGETで送った検索語を、検索結果ページの検索窓の初期値「value」に入れるだけです。POSTは検索窓の検索ボタンを押した場合、GETは検索結果が複数ページにわたる時のページインデックスをクリックして次のページに飛んだ場合です。さほど難しくないはずなのですが、ここでしばらーくトラブって足踏みしました。何度やっても検索窓に初期値が表示されないのです。
パッと見何もおかしいことはやっていません。valueとsizeの順番を入れ替えてもだめ。ネットでググってググってやっと見つかった原因が、「valueの前の空白が全角スペースになっている」でした。そんなはずないんだけど・・・と思いつつも念のため確認すると、何となく幅が広い。あれー?と思い改めて半角スペースに置き換えると、できました。するっと。何の問題もなく。
実は今回、使うエディタをnotepad++からSublime Textに変えてみたんです。ところがあれデフォルトの文字が小さくてちょっと見にくいのと(大きくできることを、たった今知りました・・・)、全角テキストが等幅じゃないのでスペースの幅の微妙な違いに気が付かなかったんです。はいそうです、フォントの変え方も今知りました・・・。つまりは等幅フォントにすればいいのですが、MSゴシックじゃあつまらないし・・・と考えながらググったけっか「Migu 1M」というフォントをインストールすることにしました。これからは見間違えることはないでしょう。
2.検索語なしの場合にサイトの説明を表示させるギミック
ギミックなどというほどのことではありません、ただのif文です。ただ少しだけ条件がややこしかったのでちょっと手間がかかりました。
検索語なしのケースには2種類あって、検索窓に何もいれずに検索ボタンを押した場合(POST送信で検索語が空)と、外部からこのページに初めて飛んできた場合の2つです。一方で検索語ありのケースは、検索語を入れて検索ボタンを押した場合(POST送信で検索語あり)と、ページインデックスをクリックした場合(GET送信で検索語あり)の2つになります。GET送信の場合は必ず検索語を付けて送りますから、GETで検索語なしというケースはありません。
もう一つ話をややこしくしたのが、POSTでないときに$_POST[‘変数名’]、GETでないときに$_GET[‘変数名’]を読もうとすると「未定義ですよ」と親切にNoticeがでるんですね。これがうっとうしいです。回避するには、まずissetで変数が存在するかどうかを調べてから中身を確認する必要があります。
ということで、検索語なしの場合のコードはこうなります。
if((!isset($_GET['searchword']) and !isset($_POST['searchword']) ) or (isset($_POST['searchword']) and $_POST['searchword']=="")){
前半は「!」、このnotをつかって、GETでもPOSTでもない場合を表現、後半はPOSTであって、検索語がnullの場合になります。
こうしてサイトの解説文をechoした後に、elseで検索機能を書いていけばいいわけです。
3.MySQLのデータベースへの接続
これはセオリー通りです
$link = mysql_connect('mysql***.phy.lolipop.lan', 'LA********', '********'); if (!$link) { die('接続失敗です。'.mysql_error()); } $db_selected = mysql_select_db('LA********-mysql5', $link); if (!$db_selected){ die('データベース選択失敗です。'.mysql_error()); } $charaset = mysql_query('SET NAMES utf8', $link );
1行目がサーバーへの接続です。伏字を使っていますが、カッコの中は順に、サーバー名、ユーザー名、パスワードになっています。もしコネクション番号が帰ってこなければ接続失敗を表示します。(2〜4行目)
6行目がデータベースへの接続です。私の契約はスタンダードな「ロリポプラン」なので、使えるMySQLのデータベースは1個だけで、名前も指定されています。これも接続に失敗したらエラーを返すようにします(7〜9行目)
最後の$charaset云々の行ですが、これを書いておかないとMySQLから読みだした文字が全部「???」になって表示されてしまうんですよね。これもググって解決しました。
長くなってきましたので、続きは次回に回します。お楽しみに。
- 2014.11.01 Saturday
- ホームページ
- 15:09
- comments(0)
- -
- -
- by てちくん