ゆるキャラのペパクラ情報サイトを作る(3)コーディング

0
    JUGEMテーマ:ホームページ作成
     

    えーと、久しぶりに使うので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から読みだした文字が全部「???」になって表示されてしまうんですよね。これもググって解決しました。

    長くなってきましたので、続きは次回に回します。お楽しみに。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天