独学!Webサイト構築日誌

3日目:やったるで。

8:00

今日もやったるで!

本日の目標は故知覧!

  1. カテゴリーごとのまとめページ作成。(自動更新)
  2. メニューバー固定。
  3. お問い合わせフォーム実装。
  4. プライバシーポリシー作成。
  5. 閲覧回ベースの人気ランキング作成。

カテゴリーごとのまとめページ作成。(自動更新)

昨日MySQLを作成しているので、それを使って表現していく。
説明文が不要なら、phpでフォルダ内引っ張ってくるだけで十分だと思う。
製品が増えてきたら、そのように変更する予定。


9:00

出来た。

            
html ※一覧 全文。
<?php $title = "Other一覧。"; $description="Other一覧。"; ?>
<?php include("../php/header.php"); ?>
<div class="middleBody indexProduct">
    <h1>Other一覧</h1>
    <?php $productVer="other"; include("../php/indexProduct.php"); ?>
</div>
<?php $creationDate = "2021/02/03"; include("../php/footer.php"); ?>
            
        
            
php ※indexProduct.php全文
<?php
    indexD($productVer);
    function indexD($productVer){
        $user = ユーザー名;
        $pass = パスワード;
        try{
            $dbh = new PDO('mysql:host=ホスト名;dbname=データーベース名;charset=utf8', $user, $pass);
            $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);//攻撃を防ぐおまじない
            $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//エラーモードの設定
            $stmt = $dbh->query("SELECT * FROM テーブル名");//配列格納
            while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                $rows[] = $row;
            }
    
            //記載内容
            foreach($rows as $row){
                if($productVer == $row['category']){
                    $imgURL = '../img/'. $productVer. '.jpg';   
                    $theURL = '../'. $productVer. '/'. $row['fileName'];

                    echo '<a href="'. mojicheck($theURL). '">
                        <img src="'. mojicheck($imgURL). '" alt="'. mojicheck($row['title']). '">'.
                        '<div class="textBody">
                            <h2>'. mojicheck($row['title']). '</h2>'.
                            '<p>'. mb_substr(mojicheck($row['mainText']),0,70). '...</p>'.
                        '</div></a>';
                }
            }
            $row = null;//解放
            $dbh = null;	//データベース接続切断            
        }catch (Exception $e){
            echo 'エラーが発生しました。';
            $dbh = null;
        } 
    }
?>
            
        

2.メニューバー固定。

以前言う事聞いてくれなかったコイツ。
レベルアップした私の手に掛かれば瞬殺だわ!て思ってるんだけど、どうかね。


9:30

できた。
「position: fixed;」で固定自体は簡単に実装できたが、本文が裏に回り込むようになったので、メニューバー分の改行を入れることにした。
また、幅を100%指定すると画面一杯の表示になってしまうので、px指定に変更した。

            
php(html) ※header.php 一部抜粋。
</header>
<br><br><br><!--メニューバー固定用-->
            
        
            
css ※一部抜粋。
header{
    width:1000px;
    background-color:#ffffff;
    position: fixed;
    }
            
        

10:00

お腹空いたので、昼飯食ってきます。


11:30

3.お問い合わせフォーム実装。

以前作成したものがあるので、そのままコピペするだけ。
これも後日分かり易くまとめる予定。


12:00

完了。html等省略。


4.プライバシーポリシー作成。

プライバシーポリシーはコピペして、ちょっと手直しで終了。


5.閲覧回ベースの人気ランキング作成。

WordPressの記事しかヒットしないんだけど、どういうこと?w
みんなゼロから立ち上げようぜ?


12:30

ちょっと買い出し行ってきます。
流れとしては、footer.phpにカウントするプログラム組み込んで、どこかに訪問回数保存。
その中でソートかけて順番に表示、て感じにしようかと。


15:00

買い出し&夕飯の準備終了。
量り売りの魚を購入したら、いつもの1.5倍の価格だった。二度と買わねぇ。


footerに入れてしまうと、カウントしたくないものまで数えてしまうので、別途phpで実装します。

17:00

1.txtファイルを準備。

2.閲覧ごとにfor文で重複チェック。

3.重複がある場合は「閲覧回数」を加算。

4.無い場合は「タイトル\n閲覧回数\n」で入力。

というカウントプログラムを作ったところで、
『MySQLにデータ格納してるから、そこに1列追加してカウントするか』と思いついてしまい、MySQL使っちゃいました。

...が、ランキング表示させるときにもMySQL接続する必要があるんだな...

txtに戻すか...

            
ただのメモ。
foreach($rows as $row){
    if($row['title'] == $GLOBALS['textTitle']){//名前一致
        $rankTitle = '"'. $row['title']. '"';
        $rankCount = $row['count'] +1;
        $stmt = $dbh->query("UPDATE テーブル名 SET count=$rankCount WHERE title=$rankTitle");//配列格納
        break;
    }
}
            
        

18:00

txtに戻したのは良いものの、全く上手く行かん。腹立つので先に飯。


19:00

夕飯終了&出来た。

            
/*ランキング--------------*/
$rankRecord = '../another/rank.txt';
$str = file_get_contents($rankRecord);
$rankArray = explode("\n", $str);//改行で分割 & すべて格納
for($rNum=0;$rNum<count($rankArray);$rNum++){
    if($rankArray[$rNum] == $GLOBALS['textTitle']){//名前一致
        $rankArray[$rNum+1]++; //1加算
        file_put_contents($rankRecord, implode("\n", $rankArray),LOCK_EX); //全戻し 上書き
        break;
    }else if($rNum == (count($rankArray)-1)){//最後まで確認後
        file_put_contents($rankRecord, mojicheck($GLOBALS['textTitle']). "\n", FILE_APPEND | LOCK_EX); //追記
        file_put_contents($rankRecord, "1\n", FILE_APPEND | LOCK_EX);
        break;
    }
}
            
        

知らない技術を取り入れてやろうと頑張ってましたが、今までの知識だけで組みなおしたら上手く行った。

rank.txtに交互にデータが保存されるようになっているので、それを引っ張ってくる処理を書きましょう。


20:00

やっと上手くいった。

二次元配列でそれぞれ格納していきましたが、
タイトル4つ + 空白 → 計5つ
カウント4つ → 計4つ
のような状態だとarray_multisortが効かないんですね。

たったそれだけの事に30分以上悩んでました。ハッハッハ

            
php ※一部抜粋&変更済み
/*ランキング--------------*/
$rankRecord = '../another/rank.txt';
$str = file_get_contents($rankRecord);
$rankArray = explode("\n", $str);//改行で分割 & すべて格納
for($rNum=0;$rNum<count($rankArray);$rNum++){
    if($rankArray[$rNum] == $GLOBALS['textTitle']){//名前一致
        $rankArray[$rNum+1]++; //1加算
        file_put_contents($rankRecord, implode("\n", $rankArray),LOCK_EX); //全戻し 上書き
        break;
    }else if($rNum == (count($rankArray)-1)){//最後まで確認後
        file_put_contents($rankRecord, $categoryPart[1]. "\n", FILE_APPEND | LOCK_EX);//追記 カテゴリー
        file_put_contents($rankRecord, $categoryBase[1]. "\n", FILE_APPEND | LOCK_EX);//現在のURL
        file_put_contents($rankRecord, mojicheck($GLOBALS['textTitle']). "\n", FILE_APPEND | LOCK_EX);//タイトル
        file_put_contents($rankRecord, "1\n", FILE_APPEND | LOCK_EX);//カウント
        break;
    }
}
            
        
            
php ※全文抜粋。
<?php
rankShow();
function rankShow(){
    /*ランキング--------------*/
    $rankRecord = 'another/rank.txt';
    $str = file_get_contents($rankRecord);
    $rankArray = explode("\n", $str);//改行で分割 & すべて格納
    $rankBody=array();
    $arrayNum=0;
    for($rNum=0;$rNum<count($rankArray)-1;$rNum++){
        if($rNum %4==0){//カテゴリー
            $rankBody[0][$arrayNum]=$rankArray[$rNum];
        }elseif($rNum %4==1){//URL
            $rankBody[1][$arrayNum]=$rankArray[$rNum];
        }elseif($rNum %4==2){//タイトル
            $rankBody[2][$arrayNum]=$rankArray[$rNum];
        }elseif($rNum %4==3){//カウント数
            $rankBody[3][$arrayNum]=$rankArray[$rNum];
            $arrayNum++;
        }
    }       
    array_multisort($rankBody[3], SORT_DESC, SORT_NUMERIC,
                    $rankBody[2], SORT_DESC,SORT_STRING,
                    $rankBody[1], SORT_DESC,SORT_STRING,
                    $rankBody[0], SORT_DESC,SORT_STRING);
    for($num=0;$num<5;$num++){
        echo '<div class="ranking"><a href="'. mojicheck($rankBody[1][$num]). '">
            <img src="../img/'. mojicheck($rankBody[0][$num]).'.jpg" alt="'. mojicheck($rankBody[2][$num]). '">'.
            mojicheck($rankBody[2][$num]). '</a></div>';
    }
}
?>
            
        
            
css ※一部抜粋。
/*サイドバー関連----------*/
.sideBody{
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
.sideBody h4{
  background: linear-gradient(#ffffff 50%,#ffd700);
}
.sideBody .item5 .ranking{
  margin: 0 1rem 1rem 1rem;
  padding: 0 1rem;
  text-align: center;
}
.sideBody .item5 img{
  width: 100%;
}
            
        

21:00

本日はココまで!お疲れ様でした。



Before: 2日目

Before: 2日目

After: 3日目

After: 3日目



作成日:2021/02/03 - 更新日:2021/02/03

≪ 2日目≪ 一覧に戻る ≫4日目 ≫

HOME > 新日誌一覧 > 3日目:やったるで。