独学!Webサイト構築日誌

21日目:ことよろ。

8:30

新年2日目ですが、やっていきましょう。
ちなみに昨日ほぼ触らなかったのですが、サイト弄りたくなりましたね。弄ればよかった。でもまったり出来たのでヨシとしましょう。


では、本日の目標は故知覧!
  1. 前へ次へボタン phpで実装する。
  2. お問い合わせフォームの作成。

1.前へ次へボタン phpで実装する。

どれぐらいの人がJSを表示させないようにしているのか不明ですが、JSが適用されないことを加味して、現在JSで実装している「前へ次へ」ボタンをphpで実装します。それとJSでは出来なかった「x日の日誌を表示して、まだx+1日が出来てないときに、リンクを表示させない」てことが出来るはず。

11:00

でけた。
            
<?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 = 'day'. ($diaryDay[0]-1). '.html';
    $nextDay = 'day'. ($diaryDay[0]+1). '.html';

    $backText = '≪ '. ($diaryDay[0]-1). '日目';
    $backLink = $categoryBase[0]. '/diary'. '/'. $backDay;
    $nextText = ($diaryDay[0]+1). '日目 ≫';
    $nextLink = $categoryBase[0]. '/diary'. '/'. $nextDay;
    $centerText = '日誌一覧';
    $centerLink ='https://ki-luck.info/other/diary_index.html'; 

    if(file_exists($backDay)==''){
        $backText = '≪ HOME';
        $backLink = $categoryBase[0];
    }
    if(file_exists($nextDay)==''){
        $nextText = 'HOME ≫';
        $nextLink = $categoryBase[0];
    }

    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>';
}
?>
            
        
参考php: file_exists
少し時間かかったけども、希望通りのモノが出来たので満足。

2.お問い合わせフォームの作成。

時間がかかりそうなので、先にお昼にします。

12:30

ペペロンチーノって簡単で美味しいよね。
ペペロンチーノぐらい簡単にお問い合わせフォームが出来てくれれば良いのですが、セキュリティ的にそうも行かないようです。頑張る。

13:30

学生時代の英語の参考書並みに睡魔に襲われる内容なので、少し昼寝してきます。

14:00

復活。

16:00

何となく形になったが、見た目が悪いので修正していく。

17:00

むむむむ。

18:30

もっとカッコいい感じにしたいですが、ひとまず下記で実装しました。
            
html
<?php $textTitle = "お問い合わせフォーム"; $title = $textTitle. " | 独学!Webサイト構築日誌"; ?>
<?php include("../php/header.php"); ?>
<div class="middle-body">
    <div id="main">
        <h1>お問い合わせフォーム</h1>
        <br>
        <form action="../php/contact.php" method="post" target="_blank">
            <label class="messageInfo">氏名</label>
            <input class="messageInput" type="text" name="mName" placeholder="気楽 太郎"><br>
            <br>
            <label class="messageInfo">メールアドレス</label>
            <input class="messageInput" type="email" name="mMail" placeholder="abc@xxx.yy.zzz"><br>
            <br>
            <label class="messageInfo">メッセージ本文</label>
            <textarea  class="messageText" name="mComment" placeholder="ここにメッセージを記載してください。"></textarea><br>
            <div class="messageCheck">
                ※「<a href="/other/privacy-policy.html">プライバシーポリシー, 免責事項</a>」をお読みいただき、予め同意の上、お問い合わせください。<br>
                <input type="checkbox" name="mPrivacy">
                <label>個人情報の取り扱いについてに同意する。</label><br>
                <br>
                <input type="submit" class="messageSend" value="送信する"><br>
            </div>
        </form>
    </div>
</div>
<?php include("../php/footer.php"); ?>


php
<?php
    $mName = htmlspecialchars($_POST['mName'],ENT_QUOTES);
    $mMail = htmlspecialchars($_POST['mMail'],ENT_QUOTES);
    $mComment = htmlspecialchars($_POST['mComment'],ENT_QUOTES);
    $mPrivacy = $_POST['mPrivacy'];

    $error = '';
    if ($mName == '') {
        $error = $error.'<p>氏名が入力されていません。</p>';
    }
    if ($mMail == '') {
        $error = $error.'<p>メールアドレスが入力されていません。</p>';
    }
    if ($mComment == '') {
        $error = $error.'<p>メッセージ本文が入力されていません。</p>';
    }
    if ($mPrivacy == '') {
        $error = $error.'<p>個人情報の取り扱いについて、同意されていません。</p>';
    }

    if ($error != '') {
        echo $error.
            '<form>'.
            '<input type="button" value="このウィンドウを閉じる" onclick="window.close();">'.
            '</form>';
    } else {
        $mailBody .= "以下の内容が送信されました。\n\n";
        $mailBody .= "【氏名】\n";
        $mailBody .= $mName."\n\n";
        $mailBody .= "【メールアドレス】\n";
        $mailBody .= $mMail."\n\n";
        $mailBody .= "【メッセージ本文】\n";
        $mailBody .= $mComment."\n\n";
        
        //日本語設定を行う
        mb_language("Japanese");
        mb_internal_encoding("UTF-8");
    
        $mailTo = "◆◆◆"; //送信先メールアドレス
        $mailSubject = "◆◆◆ より送信されました"; //メールの件名
        $mailHeader = "from:".$mMail; //フォームで入力されたメールアドレスを送信元として表示する
        
        $mailsend = mb_send_mail($mailTo, $mailSubject, $mailBody, $mailHeader);
        
        if($mailsend == true) {
            echo '<p>メールを送信しました。</p>'.
                '<form>'.
                '<input type="button" value="このウィンドウを閉じる" onclick="window.close();">'.
                '</form>';
        } else {
            echo '<p>メール送信でエラーが発生しました。</p>';
                '<form>'.
                '<input type="button" value="このウィンドウを閉じる" onclick="window.close();">'.
                '</form>';
        }
    }
?>


css
/*お問い合わせフォーム*/
.messageInfo{
  float: left;
  width: 20%;
  padding: 0.5rem;
  margin: 0 20px;
}
.messageInput{
  width: 30%;
  padding: 0.5rem;
}
.messageText{
  width: 50%;
  height: 5rem;
  padding: 0.5rem;
}
.messageCheck{
  padding: 0.5rem;
  margin: 0 20px;
}
            
        
セキュリティについて頑張って読んでいましたが、頭痛がしてきたのでギブアップ。
そりゃネットのセキュリティだけで会社があるぐらいなので、すぐに理解できるわけはないんですが、それでも今の私には難し過ぎた。
リベンジするというより、良い落としどころを今後も探っていく。



Before: 20日目

Before: 20日目

After: 21日目

After: 21日目



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

≪ 20日目≪ 一覧に戻る ≫22日目 ≫

HOME > 日誌一覧 > 21日目:ことよろ。