独学!Webサイト構築日誌

22日目:湯たんぽパワー。

9:30

おはようございます。
湯たんぽを買ってからというもの、布団が快適過ぎて、ますます布団から出るのが億劫になりました。寒さで寝ているときに歯ぎしりしていたのか、奥歯近辺が痛かったのも勝手に治りました。実家から送られてきた餡餅も美味しいです(*´д`*)ウマヒ

本日の目標は故知覧!
  1. お問い合わせフォームの仕様変更。
  2. 検索フォームの作成。
私事ですが、本日は別件のプログラムを弄りながらの作業になるので、頭とプログラムが混乱しないよう気を付けて作業していく。

1.お問い合わせフォームの仕様変更。

昨日一旦作成したお問い合わせフォームですが、現状だと確認画面が無く、連打でメールが送れるような状態で危険。なので、下記のような流れに変更する。

いざ。

12:00

よし。さっぱり仕事にならん。
ちょっと別件のプログラムが片付いてからにします。

16:00

合間を縫って実装した。参考サイトはココ。今回仕様を検討したんだけども、確認画面て必要なのかね?色んなサイトで実装されてるけど、個人的にはすぐにメール飛んでくれた方が楽なんじゃないかなと。
            
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">
            <label class="messageInfo">氏名</label>
            <input class="messageInput" id="mName" type="text" name="mName" placeholder="気楽 太郎" onchange="reCheck()"><br>
            <br>
            <label class="messageInfo">メールアドレス</label>
            <input class="messageInput" id="mMail" type="email" name="mMail" placeholder="abc@xxx.yy.zzz" onchange="reCheck()"><br>
            <br>
            <label class="messageInfo">メッセージ本文</label>
            <textarea  class="messageText" id="mComment" name="mComment" placeholder="ここにメッセージを1000字以内で記載してください。" onchange="reCheck()"></textarea><br>
            <div class="messageCheck">
                ※「<a href="/other/privacy-policy.html">プライバシーポリシー, 免責事項</a>」をお読みいただき、予め同意の上、お問い合わせください。<br>
                <input id="mPrivacy" type="checkbox" name="mPrivacy" onclick="privacyCheck()">
                <label>個人情報の取り扱いについてに同意する。</label><br>
                <br>
                <input id="mCheck" type="button" value="入力内容確認" onclick="inputCheck()" disabled>
                <input id="mSend" type="submit" value="送信する" disabled><br>
            </div>
        </form>
    </div>
    <script src="../js/contact.js"></script>
</div>
<?php include("../php/footer.php"); ?>


js 
const mPrivacy = document.getElementById('mPrivacy');
const mCheck = document.getElementById('mCheck');
const mSend = document.getElementById('mSend');

function reCheck(){//文章変更時
    mSend.disabled = true;
}

function privacyCheck(){//プライバシーポリシー
    if(mPrivacy.checked===true){
        mCheck.disabled = false;
    }else if(mPrivacy.checked===false){
        mCheck.disabled = true;
        mSend.disabled = true;
    }    
}

function inputCheck(){// 入力内容チェックのための関数
    let resultTF = true;
    let errorText = "";
    let mName = document.getElementById('mName').value.length;
    let mMail = document.getElementById('mMail').value.length;
    let mComment = document.getElementById('mComment').value.length;

    //氏名
    if(mName < 1){
        errorText = errorText+ '氏名が入力されていません。\n';
		resultTF = false;
	}else if(mName > 30){
        errorText = errorText+ '氏名は30字以内で入力してください。\n';
		resultTF = false;
	}
	// メールアドレス
	if(mMail < 1){
        errorText = errorText+ 'メールアドレスが入力されていません。\n';
		resultTF = false;
	}else if(mMail < 4){
        errorText = errorText+ 'メールアドレスが短すぎます。正しいものを入力してください。\n';
		resultTF = false;
    }else if(mMail > 200){
        errorText = errorText+ 'メールアドレスが長すぎます。200字以内で入力してください。\n';
		resultTF = false;
	}
	// お問い合わせ内容
	if(mComment < 1){
        errorText = errorText+ 'メッセージ本文が入力されていません。\n';
		resultTF = false;
	}else if(mComment > 1000){
        errorText = errorText+ 'メッセージ本文が長すぎます。1000字以内で入力してください。\n';
		resultTF = false;
    }

    if(resultTF === true){//エラーチェック
        mSend.disabled = false;
    }else if(resultTF === false){
        alert(errorText);
        mSend.disabled = true;
    }
	return resultTF;
}


php ※一部抜粋
if($mailsend == true) {
    echo '<script> alert("お問い合わせを受け付けました。"); location.href="https://ki-luck.info/"; </script>';
} else {
    echo '<script> alert("エラーが発生しました。"); location.href="https://ki-luck.info/"; </script>';
}
            
        

2.検索フォームの作成。

17:30

小一時間程調べましたが、MySQLを使う必要があるとか、自分のサイトだけなら不要だとか、何かよく分からんですね。ちょっと明日にでも本屋で良い本見つけてきます。

この後は、別件の仕事を明日までに完成させる必要があるので、今日中に終わるよう頑張ります。



Before: 21日目

Before: 21日目

After: 22日目

After: 22日目



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

≪ 21日目≪ 一覧に戻る ≫23日目 ≫

HOME > 日誌一覧 > 22日目:湯たんぽパワー。