独学!Webサイト構築日誌

28日目:新章開幕。

9:00

さて、一旦HP完成ということで、新章として再スタート。
日付は引き継いでます。

本日の目標は故知覧!
  1. 新日誌のフォルダとメニュー作成。
  2. MySQLへ自動的に保存してくれるプログラムの作成。
  3. footer.phpを新日誌用に改良する。
  4. forDiary.phpを新日誌用に改良する。
  5. 検索をすべてのデータから選ぶよう変更。
  6. 最新記事をすべてのデータから選ぶよう変更。
  7. 日誌一覧を自動作成。

1.新日誌のフォルダとメニュー作成。

実験用ページを参考資料の中にまとめて、新・日誌フォルダと交換しましょう。

気まぐれ製作所に移行しました。

diaryとnew-diaryのフォルダは同階層で保存しています。cssは日誌一覧のものを流用することにします。
            
html ※ヘッダーメニューの一部置き換え。
<a href="../other/new-diary_index.html"><li>新日誌一覧</li></a>
            
        

9:30

2.MySQLへ自動的に保存してくれるプログラムの作成。

昨日じっくり考え、下記2つのうち、案2を採用することにしました。
  • 案1:入力フォームに記載&送信→サーバーとMySQLの両方に保存。
  • 現状FFFTPを使用しているので、サーバーに保存することに関しては不便が無く、毎度サーバーとMySQLの両方に保存するメリットがあまり感じられない。誤って保存した後の対処も面倒。
  • 案2:指定したフォルダ内にあるデータをまとめてMySQLに保存。
  • 既に作成しているデータを手作業ですべて格納するのが面倒。まとめてデータを追加したいときに楽。ただ、フォーマットが決まってない文章に適用は難しい。
で、正直なところ案1で作業をちょいちょい進めていたので調べ直しですが、下記の流れで行けばどうにかなるでしょう。
  • 格納データ/MySQLの保存先指定ボックス作成。
  • 格納予定データ取得。
  • 保存内容選定。
  • 保存実行。
  • をforeach文でやる。

10:30

今ちょっと作っていて思ったんですが、案2のまとめてデータを追加したいときってそんな無いよな、と。案1も直接MySQLに入力するのと思ったほど作業量変わらんな、てことで手作業でやることにします。今後必要性を感じたら作る。

11:00

済み。
そんな時間かからなかったな...てことで、今後作ることもないでしょう。
さっきからお腹が鳴りまくっているので、昼飯食ってきます。

14:00

昼飯、夕飯の仕込み、買い物を済ませてきた。

3.footer.phpを新日誌用に改良する。

            
php ※footer.phpに下記を追記。
}else if($categoryPart[1] == "new-diary"){//新日誌のとき。
    echo    '⌂<a href="'. $categoryBase[0]. '">HOME</a> > '.
            '<a href="../other/new-diary_index.html">新日誌一覧</a> > '.
            '<a href="'. $categoryBase[1]. '">'. $textTitle. '</a>';
            
        

14:30

4.forDiary.phpを新日誌用に改良する。

            
php ※forDiary.php 全文
<br>
<?php
    $nowURL = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; //現在のURL格納 ※https:除く。
    $categoryPart = explode("/", $nowURL);
    // $categoryPart[0]; HP
    // $categoryPart[1]; フォルダ
    // $categoryPart[2]; 現在のページ .html付き
    $categoryBase[0] = 'https://'. $categoryPart[0];//HP
    $categoryBase[1] = 'https://'. $nowURL;//現在

    $diaryDay = explode("day", $categoryPart[2]);
    $diaryDay = explode(".html", $diaryDay[1]);// $diaryDay[0]; 日付
    $backDay = $diaryDay[0]-1;
    $nextDay = $diaryDay[0]+1;
    $backDayURL = 'day'. $backDay. '.html';
    $nextDayURL = 'day'. $nextDay. '.html';
    $backText = '≪ '. $backDay. '日目';
    $nextText = $nextDay. '日目 ≫';
    $backLink = $categoryBase[0]. '/'. $categoryPart[1]. '/'. $backDayURL;
    $nextLink = $categoryBase[0]. '/'. $categoryPart[1]. '/'. $nextDayURL;
    $centerText = '≪ 一覧に戻る ≫';
    $centerLink ='../other/'. $categoryPart[1]. '_index.html'; 

    if(file_exists($nextDayURL)==''){//最新日
        if($categoryPart[1]=='diary'){
            $nextText = '28日目 ≫';
            $nextLink = '../new-diary/day28.html';    
        }else{
            $nextText = 'HOME ≫';
            $nextLink = $categoryBase[0];    
        }
    }
    if(file_exists($backDayURL)==''){//開始日
        if($categoryPart[1]=='new-diary'){
            $backText = '≪ 27日目';
            $backLink = '../diary/day27.html';
        }else{
            $backText = '≪ HOME';
            $backLink = $categoryBase[0];  
        }

    }else if($categoryPart[1]=='diary'){ //新日誌に画像は付けない。
        //画像
        echo '<br>'.
            '<div class="baText">'.
            '   <p>Before: '. $backDay. '日目</p>'.
            '   <p><a href="../img/day'. $backDay. '.jpg" target="_blank">'.
            '   <img class="baPic" src="../img/day'. $backDay. '.jpg" alt="Before: '. $backDay. '日目"></a></p>'.
            '</div>'.
            '<div class="baText">'.
            '   <p>After: '. $diaryDay[0]. '日目</p>'.
            '   <p><a href="../img/day'. $diaryDay[0]. '.jpg" target="_blank">'.
            '   <img class="baPic" src="../img/day'. $diaryDay[0]. '.jpg" alt="After: '. $diaryDay[0]. '日目"></a></p>'.
            '</div>';
    }

    //更新日
    echo '<br><p class="cuDaytime">作成日:'. $creationDate. ' - - - 更新日:'. date( "Y/m/d", getlastmod() ). '</p><br>';

    //前後ボタン
    echo '<p class="back-next">'.
        '<a class="backDay" href="'. $backLink. '">'. $backText. '</a>'.
        '<a class="centerText" href="'. $centerLink. '">'. $centerText. '</a>'.
        '<a class="nextDay" href="'. $nextLink. '">'. $nextText. '</a>'.
        '</p>';
?> 
            
        

15:00

5.検索をすべてのデータから選ぶよう変更。

MySQLは、2.のコピペ作業のとき既に完了しています。
ついでに項目を増やして「id, category, title, dailyTarget, mainText」にしたので、どんな文章でも入力できるようにしました。
            
php ※search.php 一部変更
if($row_count>0){
    foreach($rows as $row){
        echo '<div class="rightBody">'.
                '   <a class="dayTitle" href="../'.
                    htmlspecialchars($row['category'],ENT_QUOTES).'/day'. $row['id']. '.html">'.
                '   <h2>'. htmlspecialchars($row['title'],ENT_QUOTES). '</h2>'.
                    mb_substr(htmlspecialchars($row['mainText'],ENT_QUOTES),0,150). '... </a>'.
            '</div>';
    }
            
        

15:30

6.最新記事をすべてのデータから選ぶよう変更。

サクサク進むね~。

16:30

できた。
            
php ※showNew.php 全文
<div class="rightBody">
    <h2>最新記事一覧</h2>
    <?php
        // 更新日時順で並び替える関数
        $sort_by_lastmod = function($a, $b) {
        return filemtime($b) - filemtime($a);
        };
        
        // 並び替えして出力
        $files = array_merge(glob( './diary/*.*' ),glob( './new-diary/*.*' ));
        $URL = array();
        $num = 0;
        usort( $files, $sort_by_lastmod );
        foreach( $files as $file ) {
            if($num<3){
                $fileURL = basename( $file );
                $imgURL = explode(".", $fileURL);//day□□
                $theDay = explode("day", $imgURL[0]);//日付
                $imgURL[0] = './img/'. $imgURL[0]. '.jpg';
                if($theDay[1]<=27){
                    $fileURL = './diary/'. $fileURL;
                }else if($theDay[1]>27){
                    $fileURL = './new-diary/'. $fileURL;
                }
                $num2 = (int)$theDay[1];
                while($num2 > 0) {//画像チェック
                    if(file_exists($imgURL[0])){ //ある
                        break;
                    }else{ //ない
                        $num2--;
                        $imgURL[0] = './img/day'. $num2. '.jpg';
                    }                  
                } 

                echo '<div class="showNew">'.
                    '<a href="'. $fileURL. '">'.
                    '<div class="showNewTitle">'. $theDay[1]. '日目</div>'.
                    '<img src="'. $imgURL[0]. '"></a></div><br>';
                $num++;
            }
        }
    ?>
    </div>
</div>
            
        

これ作ってて思ったんだけど、MySQLと上記のdo-whileで画像検索すれば、日誌一覧を自動作成できるね。

7.日誌一覧を自動作成。

18:00

表示させることは出来たんだけど、改行にどうやって番号付けるのかね...


19:00

キタァアアアアアアアアアアアアアアアアアアアアアアアアアアア!!
改行を置換して[li]を付けるのに90分かかったぞwww
            
html ※
<?php $textTitle = "新日誌一覧"; $title = $textTitle. " | 独学!Webサイト構築日誌"; ?>
<?php include("../php/header.php"); ?>
<div class="middle-body">
  <div id="main" class="diary_index">      
    <h1>新日誌一覧</h1>
    <?php $diaryVer='new-diary'; include("../php/diaryIndex.php"); ?>
  </div>
</div>
<?php include("../php/footer.php"); ?>


php ※diaryIndex.php 全文
<?php
    $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($diaryVer == htmlspecialchars($row['category'],ENT_QUOTES)){
                $theDay = htmlspecialchars($row['id'],ENT_QUOTES);
                $imgURL = '../img/day'. $theDay. '.jpg';
                $num2 = (int)$theDay;
                while($num2 > 0) {//画像チェック
                    if(file_exists($imgURL)){ //ある
                        break;
                    }else{ //ない
                        $num2--;
                        $imgURL = '../img/day'. $num2. '.jpg';
                    }                  
                } 

                $theURL = '../'. $diaryVer. '/day'. $theDay. '.html';
                echo '<div class="fullBody">
                  <div class="rightBody">
                      <a class="dayTitle" href="'. $theURL. '">'.
                      '<h2>'. htmlspecialchars($row['title'],ENT_QUOTES). '</h2></a>
                      <ol>
                        <li>'.
                        str_replace(array("\r\n", "\r", "\n"), '</li><li>', htmlspecialchars($row['dailyTarget'],ENT_QUOTES)).
                        '</li>
                      </ol>
                  </div>
                  <a class="dayImg" href="'. $theURL. '"><img src="'. $imgURL. '" alt="day'. $theDay. '"></a>
                </div>';
            }
        }
        $dbh = null;	//データベース接続切断            
    }catch (Exception $e){
        echo htmlspecialchars('エラーが発生しました。', ENT_QUOTES);
        $dbh = null;
    } 
?>
            
        



頭から湯気が出そうなのでこれぐらいで止めておこう。
また明日~。




作成日:2021/01/09 - 更新日:2021/02/17

≪ 27日目≪ 一覧に戻る ≫29日目 ≫

HOME > 日誌一覧 > 28日目:新章開幕。