独学!Webサイト構築日誌

25日目:昼飯は燻製カレー。

9:00

燻製&熟成してる鶏胸があるんで、そいつで燻製カレー作ってやろうと。絶対美味い。
目標は昨日と同じ。方向性としては、昨日考えたやつで。
  1. 検索フォームの作成。
  2. MySQLへ保存してくれるプログラムの作成。
  3. TOPの画像変更。
  4. スマホ向け画面の作成。
  5. 進捗画像・前後ボタン・更新日をphpにまとめる。

まず検索ボックスに入力したものをhtmlに反映させるphpを作る。

10:00

次のページに値渡したいな~と調べていたところ、sessionという優秀機能があることを発見。これ使えばURL弄らなくていいんじゃないか。

10:30

sessionてphp間だけの受渡なんかな?別のhtmlに飛ばしたら値保持してないんだけどなー。

※28日目追記: sessionを利用するには、DOCTYPE宣言やhtmlタグの出力より前にsession_start()関数を呼び出してsessionを開始する必要があるとのこと。(参考図書より)

12:30

昼飯食った。燻製鶏ウマー。

JSで既存の画面開いたまま値を保持して、php呼び出すのとか考えたけども、htmlで実現するのを諦めて、素直にphpで表現することにした。今の私の知識だとそれが最適解だと思う。

14:30

できた。
            
html ※一部抜粋
<h2>検索</h2>
<form method="post" action="../php/search.php">
    <input type="text" name="searchText" placeholder="検索内容を入力。">
    <input type="submit" value="検索する">
</form>


php ※search.php
<?php $textTitle = "検索結果"; $title = $textTitle. " | 独学!Webサイト構築日誌"; ?>
<?php include("../php/header.php"); ?>
<div class="middle-body">
    <div id="main" class="searchResult">
        <h1>検索結果</h1>
        <form method="post" action="../php/search.php">
            <input type="text" name="searchText" placeholder="検索内容を入力してください。">
            <input type="submit" value="検索する">
        </form>

        <?php
            $user = 自分の設定したユーザー名;
            $pass = 自分の設定したパスワード;
            $searchText = htmlspecialchars($_POST['searchText'], ENT_QUOTES);//検索した値
            $row_count = 0;
            try{
                if (empty($searchText)) throw new Exception('検索内容が入力されていません。');

                $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->prepare("SELECT * FROM ◆◆◆ WHERE ▽▽▽ LIKE ? ");//プレースホルダ:?
                $like_searchText = "%".$searchText."%";//あいまい検索
                $stmt->bindValue(1, $like_searchText, PDO::PARAM_STR);//プレースホルダへ実際の値を設定する
                
                if($stmt->execute()){//実行
                    $row_count = $stmt->rowCount();//レコード件数取得
                    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                        $rows[] = $row;
                    }
                    //記載内容
                    echo '<p>" '. htmlspecialchars($searchText, ENT_QUOTES, 'UTF-8'). ' "を含む日誌は '. $row_count. '件です。</p>';
                    if($row_count>0){
                        foreach($rows as $row){
                            echo '<div class="rightBody">'.
                                    '   <a class="dayTitle" href="/diary/day'. $row['id']. '.html">'.
                                    '   <h2>'. htmlspecialchars($row['title'],ENT_QUOTES). '</h2>'.
                                        mb_substr(htmlspecialchars($row['▽▽▽'],ENT_QUOTES),0,150). '</a>'.
                                '</div>';
                        }
                    }
                }else{
                    throw new Exception('検索に失敗しました。');
                }
                $dbh = null;	//データベース接続切断            
            }catch (Exception $e){
                if(empty($e)) $e = 'データベース接続失敗しました。';
                echo htmlspecialchars($e->getMessage(), ENT_QUOTES);
                $dbh = null;
            } 
        ?>
    </div>
</div>
<?php include("../php/footer.php"); ?>


css
/*検索結果関係 --------------------*/
.searchResult input{
  height: 1.5rem;
}
.searchResult div.rightBody a{
  text-decoration: none;
  color: #000000;
}
.searchResult .rightBody{
  width:70% ;
  margin: 1rem;
  min-height: 5rem;
}
            
        

 

15:00

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

これは検索フォーム作成の応用的な感じですね。ちょっと仕様をどうするか検討します。

16:30

ちょっと考えてみましたが、追加したい機能が沢山あるので、これだけで1週間程度時間を取られそうです。必須ではないので、今は手作業でやることにして、次行きましょう。※現在、日誌3日目までなら検索可能です。

3.TOPの画像変更

イカス画像に変えたい。

17:00

金と銀を組み合わせて中二臭く仕上がりましたが、シンプルでいんじゃないかと。

4.スマホ向け画面の作成。

これちょっと目安つけてまして、画面サイズによってhtml or css の適用先を変更すれば良いみたいです。
htmlを作り直すのは面倒ですし、PCとスマホで内容が違うのもな、て感じなのでcss作成することにします。

20:00

夕飯、風呂済ませた。
サイズ感の考察から、750pxを境に分けるのが良さそうですね。cssの記述開始はコレで良いようです。コレも参考にしていきましょう。
cssが2つになるので、この機会にcssフォルダ作成しました。

21:00

何コレ楽しいwww
このサイトの基準が1000pxで作っているので、それ基準に画面変更するようにしました。

23:30

完成した。日誌一覧のhtmlを少し変更した。(画像と目標の位置を交換)
            
html ※head部分に記載。
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/style-sp.css">


html ※日誌一覧 一部抜粋。
<div class="fullBody">
<div class="rightBody">
  <a class="dayTitle" href="/diary/day25.html"><h2>25日目:昼飯は燻製カレー。</h2></a>
  <ol>
    <li>検索フォームの作成。</li>
    <li>MySQLへ保存してくれるプログラムの作成。※未完</li>
    <li>TOPの画像変更。</li>
    <li>スマホ向け画面の作成。</li>
  </ol>
</div>
<a class="dayImg" href="/diary/day25.html"><img src="../img/day25.jpg" alt="day25"></a>


css 
@charset "utf-8";
@media only screen and (max-width: 999px) {
    /*文字装飾 start-------------*/
    h1 {
    padding: 0.5rem 1rem;
    border-top: 4px solid #d8dcdc;
    border-right: 4px solid #666;
    border-bottom: 4px solid #333;
    border-left: 4px solid #868888;
    border-radius: 0;
    background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
    background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
    }
    h2 {
    font-size: 150%;
    position: relative;
    padding: 0.1rem 1rem;
    border-bottom: 6px solid #808080;
    }
    h2:before {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 20%;
    height: 6px;
    content: '';
    background: #C0C0C0;
    }
    h3 {
    border-bottom: 6px double #000;
    width: 20%;
    padding: 1rem 0 0 1rem;
    }
    /*文字装飾 fin-------------*/

    /*全体--------------*/
    body{
    background-color:	 #ffffff;
    width:100%;
    padding: 0 0.5rem;
    margin: 0 auto 5rem auto;
    }
    .middle-body{
    background-color: #ffffff;
    width: 95%;
    margin-bottom: 5rem;
    min-height: 20rem;
    }

    /*ヘッダーメニュー --------------------*/
    .headerNav{
    background-color: #ffffff;
    }
    .headerNav ul.menu{
    list-style: none;
    margin:0 auto;
    }
    .headerNav ul.menu li {
    font-size: 120%;
    width: 24%;
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    text-decoration: none;
    color: #000;
    line-height: 2rem;
    height: 2rem;
    margin: 0.5rem 0;
    position: relative;
    transition-duration: 1s;
    }
    .headerNav ul.menu li:before{
    content: '';
    display: inline-block;
    margin: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../img/haguruma.png);
    background-size: contain;
    vertical-align: middle;
    transition-duration: 3s;
    }
    .headerNav ul.menu li:hover:before{
    transform:rotate(-720deg);
    }
    /*ヘッダー画像*/
    div.headerImg{
        width:100%;
        text-align: center;
    }

    /*フッター -----------------------*/
    footer{
    width: 100%;
    margin-top: 3rem;
    text-align: center;
    }
    footer div{
    vertical-align:top;
    text-align: left;
    width: 30%;/*メニューの大きさ*/
    margin: 0.5rem;
    display: inline-block;
    }
    footer a{
    text-decoration: none;
    }
    footer li{
    list-style: none;
    overflow: hidden;
    }
    footer input{
    height: 1.5rem;
    }
    /*テーブルの線 --------------------*/
    #main table,#main th,#main td{
    padding: 10px;/*上下左右10pxずつ*/
    text-align: center;
    border: solid 1px #000000;
    border-collapse: collapse;
    }

    /*リスト部分*/
    #main ol {
    width: 90%;
    background:#FFFFFF;/*背景色*/
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;/*ボックス内の余白*/
    border: solid 3px #00008B;/*線の種類 太さ 色*/
    }
    #main ol li {
    padding: 0.5rem 0; /*前後の文との余白*/
    }

    /*画像の大きさ*/
    #main img{
    width: 70%;    /* 横幅を割合で指定 */
    height: auto;  /* 高さは自動指定 */
    border-top: 4px solid #d8dcdc;
    border-right: 4px solid #666;
    border-bottom: 4px solid #333;
    border-left: 4px solid #868888;
    border-radius: 0;
    }

    /*コード部分の表示*/
    pre{
    white-space: pre-wrap ;
    width: 95%;
    border: solid 1px #C0C0C0;
    background-color:	 #dadada;
    padding:10px;
    }

    /*前へ 次へ ----------------------*/
    .back-next{
    text-align: center;
    }
    .back-next a{
    text-decoration: none;
    text-align: center;
    padding: 0.5rem 1rem;
    margin: 1rem;
    border:1px #ccc solid;color:#000000;
    border-radius: 5px / 5px;
    transition-duration: 0.3s;
    }
    .backDay:hover,.nextDay:hover,.centerText:hover{
    background-color:#808080;
    color: #ffffff;
    font: bold;
    }

    /*日誌一覧関係 --------------------*/
    .p-diary ol{
    border:none!important;
    }
    .p-diary a{
    text-decoration: none;
    }
    .p-diary .fullBody{
    width:100%;
    margin-bottom: 7rem;
    }
    .p-diary .rightBody{
    width:95% ;
    margin: 0 1rem;
    }
    .p-diary .fullBody img{
    width:70% !important;
    max-width:400px;
    margin: 0 2.5rem;
    }

    /*お問い合わせフォーム*/
    .messageInfo{
    float: left;
    width: 20%;
    padding: 0.5rem;
    margin: 0 20px;
    }
    .messageInput{
    width: 30%;
    padding: 0.5rem;
    }
    .messageText{
    width: 50%;
    height: 10rem;
    padding: 0.5rem;
    }
    .messageCheck{
    padding: 0.5rem;
    margin: 0 20px;
    }

    /*検索結果関係 --------------------*/
    .searchResult .searchBox{
    height: 1.5rem;
    width: 50%;
    }
    .searchResult .searchBtn{
    height: 1.5rem;
    }
    .searchResult div.rightBody a{
    text-decoration: none;
    color: #000000;
    }
    .searchResult .fullBody{
    width:100%;
    margin-bottom: 5rem;
    }
    .searchResult .rightBody{
    width:90% ;
    margin: 1rem;
    min-height: 5rem;
    }

    /*testページ用------------------------*/
    /*画像一覧関係--------*/
    div.pic_frame {
        vertical-align:top;
        display: inline-block;
        text-align: center;
        margin: 0 1rem 3rem 1rem;
        width: 280px;
    }
    div.pic_frame .picsText{
        text-decoration: none;
        font-size: 150%;
    }
    div.pic_frame img{
        width: 100% !important;
    }
}
            
        

気を付ける点としては、
css1とcss2を読み込んで、画面サイズによって読み込むcssを変えるとするとき、両方に画面指定を入れておかないとエラーが起こる。
下記の場合、790px以下の画面では基本的にcss2の適用されるが、指定してない場合css1が適用される。
例) css1:画面指定なし。 h1; font-size:120% img; width:100px
css2:790px以下。 h1; font-size:150% img; 指定なし
→h1; font-size:150% img; width:100pxで表示される。
あとは画面見ながら細かく変更していく感じで良いと思う。

やっていて思ったのは、
PC画面で作成する際に、スマホ画面の表示も検討しながら作った方が、後々手間が少なくて済むな、てこと。

ま。楽しかったから良いけどねw

5.進捗画像・前後ボタン・更新日をphpにまとめる。

考えたら、進捗画像は場所固定だし、前後ボタンは日誌のみ。更新日も日誌以外いらんかな、てことでまとめることにした。
ついでに前日の画像も引っ張ってきて、差異を見れるようにしよう。
            
html ※一部抜粋。
<?php include("../php/forDiary.php"); ?>


php forDiary.php
<?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;//現在
    
    if($categoryPart[1]=='diary'){
        $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]. '/diary'. '/'. $backDayURL;
        $nextLink = $categoryBase[0]. '/diary'. '/'. $nextDayURL;
        $centerText = '≫ 日誌一覧 ≪';
        $centerLink ='../other/diary_index.html'; 

        if(file_exists($nextDayURL)==''){//最新日
            $nextText = 'HOME ≫';
            $nextLink = $categoryBase[0];
        }
        if(file_exists($backDayURL)==''){//0日目
            $backText = '≪ HOME';
            $backLink = $categoryBase[0];
        }else{
            
        echo '<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 '<p class="update-time">'.
            '    更新日 '. date( "Y/m/d H:i", getlastmod() ).
            '</p>';
            
        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>';
    }
?> 


css style.css
/*日誌のBefore.After画像*/
.baText{
  display: inline-block;
  text-align: center;
}
.baPic{
  vertical-align:top;
  margin: 0 1rem;
  width: 400px !important;
  height: 400px !important;
}

css style-sp.css
/*日誌のBefore.After画像*/
.baText{
    display: inline-block;
    text-align: center;
}
.baPic{
    margin: 0 1rem;
    width: 300px !important;
    height: 300px !important;
}
            
        

0:30

良い時間なのでそろそろ寝ます。おやすみなさい。



Before: 24日目

Before: 24日目

After: 25日目

After: 25日目



作成日:2021/01/06 - 更新日:2021/01/26

≪ 24日目≪ 一覧に戻る ≫26日目 ≫

HOME > 日誌一覧 > 25日目:昼飯は燻製カレー。