7.モール別ランキングのタブフォーム要素(tab.php)のソース内容

「モール別ランキング」アプリのソース解説6回目です。前回は「検索フォーム要素」のプログラムの流れについて解説しました。今回は「tab.php(タブ要素)」のプログラムソースの流れを簡単に解説します。

 

前回の記事

6.モール別ランキングの検索フォーム要素(search.php)のソース内容

アプリURL
モール別ランキング – 大手通販サイトのランキングを比較

 

tab.php(タブ要素)

 

画像

 

ソース内容

<ul class="nav nav-tabs mall-tabs">
    <li class="tab text-center <?= empty($_GET['mall'])?'active':'' ?>">
        <a href="/mall-ranking/ranking?q=<?= $search_word.(empty($_GET['y_id'])?'':'&y_id='.$_GET['y_id']) ?>">
            <img src="http://cdn-ak.favicon.st-hatena.com/?url=<?= urlencode('http://shopping.yahoo.co.jp/')?>" />
            <br>Yahoo <span class="hidden-xs">ショッピング<span>
        </a>
    </li>
    <li class="tab text-center <?= $_GET['mall']=='rakuten'?'active':'' ?>">
        <a href="/mall-ranking/ranking?q=<?= $search_word.(empty($_GET['r_id'])?'':'&r_id='.$_GET['r_id']) ?>&mall=rakuten">
            <img src="http://cdn-ak.favicon.st-hatena.com/?url=<?= urlencode('http://www.rakuten.co.jp/')?>" />
            <br><span>楽天市場</span>
        </a>
    </li>
    <li class="tab text-center <?= $_GET['mall']=='amazon'?'active':'' ?>">
        <a href="/mall-ranking/ranking?q=<?= $search_word.(empty($_GET['r_id'])?'':'&r_id='.$_GET['r_id']) ?>&mall=amazon">
            <img src="http://cdn-ak.favicon.st-hatena.com/?url=<?= urlencode('http://www.amazon.co.jp/')?>" />
            <br><span>Amazon</span>
        </a>
    </li>
</ul>

 

プログラムの流れ

2行目:

「mall」クエリパラメータが空の場合、「Yahooショッピング」タブをアクティブにします。liタグのクラス要素に「active」を設定します。

 

4行目:

はてなのファビコン取得API(非公式)を使用しYahooのファビコンを取得し画像表示しています。

 

8行目:

「mall」クエリパラメータが「rakuten」の場合、「楽天」タブをアクティブにします。liタグのクラス要素に「active」を設定します。

 

10行目:

はてなのファビコン取得API(非公式)を使用し楽天のファビコンを取得し画像表示しています。

 

14行目:

「mall」クエリパラメータが「amazon」の場合、「Amazon」タブをアクティブにします。liタグのクラス要素に「active」を設定します。

 

16行目:

はてなのファビコン取得API(非公式)を使用しAmazonのファビコンを取得し画像表示しています。

 

次回はヤフーのランキングリスト「Yahoo.php」のソース内容を紹介します。

 

コメントを残す

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