限定コンテンツについて考える③
おはようございます、佐伯です。
寒くなって来たので毎朝布団とのEndlessBattle（流暢）を繰り返しています。
大分辛いオブ辛い…出社したくない…
今回は前回、前々回に続いて限定コンテンツの話。
saeki-memo.hatenablog.com
saeki-memo.hatenablog.com
前回は【下準備】まで終わったのでここから実装に入っていきます。
今更ながらおさらいを兼ねて作成の流れをお伝えして起きます。
●下準備（済）
・データベースの設定
・データベースの作成
・テーブルの作成
・define の作成
・function の作成
●会員登録ページを作る
●ログインページを作る
●ログアウトページを作る
●会員限定コンテンツの表示を作る
という流れで今回は【会員登録ページを作る】の部分になります。
取り敢えず外見
これは私が利用する手なんですけど、phpファイルはライブプレビューが出来なくて面倒です。
なので先にHTML、CSSをライブプレビューを使いながら作りこんで
出来上がったものをphpファイルに移植するのが結構簡単です。
今回も取り敢えず外面を作る⇒phpファイルに移植する
の手を取ろうと思います
というわけで、まずはHTMLで登録ページの外ヅラを作って行きます。
<div class="container"> <span class="title">LOGIN</span><br> <form action="" method="POST"> <input type="text" name="userid" id="" placeholser="userid"> <input type="text" name="password" id="" placeholder="password"> <input type="password" name="password2" id="" placeholder="re:password"> <input type="submit" value="submit" name="submit"> </form> </div>
最低限はこの程度でＯＫです！取り敢えず入力出来たら良いと思う。
デザインとかは好き好きCSSで触って下さい。
必要事項とかはがあればそれも随時足して下さい。
今回は
- ユーザーID
- パスワード
の二つを設定します。
前回の記事では三つあったんじゃない？と思った方、正解！
通し番号は自動採番って言ってたもんね、と思った方、大正解！！！！！！！！
ＩＤは自動採番のため勝手に番号が入ります。ので！設定しなくても大丈夫。
じゃあなんでパスワードが二つあるんや！と思った方は目敏くて素敵です。
パスワードが二つあるのはほら、よくある『同じものを二回入力してください』ってやつですね。メールアドレスとかにもよくあるやつ。
これで打ち間違いとか自動登録とかを弾いて行きます。
ここで重要なのはinputタグにname属性を設定することとformタグにmethod="POST"を設定しておくこと。
これが無いと機能として動きません！マジでただ入力出来るだけのおもちゃ。
phpの中身を作る
お待たせしました！！ではいよいよphpで中身を作っていきます。
HTMLを外ヅラとするならばphpは内側、発言と思惑みたいなもんですかね（？）
流れとしては
①フォームに入力された文字を受け取る
②パスワードの一致を確認したりする
③データベースに入れる
の三段階です。
ではまずざっくりとした部分を作って説明をしたいと思います。
<?php if(isset($_POST['submit'])){ // submitボタンが押された時 if(empty($_POST['userid'])){ // useridが空だった時 $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ // password,password2 が空だった時 $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ // password,password2 が一致しなかった時 $error = 'パスワードが一致しません'; }else{ // ここから新規登録処理をする } } ?>
取り合えずここまで。
順を追って書いていくのでまだるっこしいわ！！！！という方は最後尾まで飛ばして下さい。
if(もしも文)を使ってエラーチェックをしていきます。
これをしないともうなんでもかんでもつっこめてしまうのでな。
if(isset($_POST['submit']))の部分でフォームの送信判定をします。
分かるか分からんか分からない例えをするとjsのクリックイベントみたいなもん。
とにかく「submitが押されたらこれを実行するぽよ！」という指示書きです。
二行目以降でエラーチェックを行います。
emptyは文字の通り『空だったら』という構文になります。
因みに今回は『入力されてなかったら？』と『パスワードが一致しなかったら？』だけを見ています。
$errorにエラー内容を書いていますが、これも後々使うので書いといてください、取り敢えず。取り敢えず！！！！！！！！！
因みに全文を日本語に直すと
「もしsubmitボタンが押された時にuseridが空っぽかpasswordもしくはpassword2が空っぽかpasswordとpassword2が一致しないかのどれかじゃなかったら新規登録するね！」
っていう感じです。
じゃあその新規登録の部分なんですけど取り敢えず書きます。
<?php if(isset($_POST['submit'])){ // submitボタンが押された時 if(empty($_POST['userid'])){ // useridが空だった時 $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ // password,password2 が空だった時 $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ // password,password2 が一致しなかった時 $error = 'パスワードが一致しません'; }else{ $dbh = PDOconnect(); //① $sql = 'INSERT INTO '.TB_user.' (userID,password) VALUES (:userID,:password)'; //② $stmt = $dbh->prepara($sql); //③ $stmt -> execute(array( //④ ':userID' => $_POST['userid'], ':password' => $_POST['password'] )); } } ?>
こんな感じですかね。
これは全然関係ないけどprepare(プリペアだと思う)何回読んでも「プリパラ」って読んじゃう。
最終的な新規登録部分を書きました。
詳しい説明をすると逆にややこしいので取り敢えずこういうものとして覚えて貰えると良いかなと思います。
書いたものの流れをざっくり説明すると
①メソッドを使ってデータベースに接続する
②データベースに流すSQL文を設定する
③SQL文をデータベースにセットする
④フォームに入力された文字を代入してSQLを実行する
って感じでやって貰えればいいかなと思います。
正直佐伯も今でもよく分かってないけど使えてるから大丈夫。
色々合体させた結果
<?php session_start(); require_once(dirname(__FILE__) . "/class/define.php"); require_once(dirname(__FILE__) . "/class/function.php"); if(isset($_POST['submit'])){ // submitボタンが押された時 if(empty($_POST['userid'])){ // useridが空だった時 $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ // password,password2 が空だった時 $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ // password,password2 が一致しなかった時 $error = 'パスワードが一致しません'; }else{ $dbh = PDOconnect(); //① $sql = 'INSERT INTO '.TB_user.' (userID,password) VALUES (:userID,:password)'; //② $stmt = $dbh->prepara($sql); //③ $stmt -> execute(array( //④ ':userID' => $_POST['userid'], ':password' => $_POST['password'] )); $error = '登録が完了しました！' } } ?> <div class="container"> <span class="title">LOGIN</span><br> <form action="" method="POST"> <input type="text" name="userid" id="" placeholser="userid"> <input type="text" name="password" id="" placeholder="password"> <input type="password" name="password2" id="" placeholder="re:password"> <input type="submit" value="submit" name="submit"> </form> </div> <div class="error"> <?php if(!empty($error)){ echo $error; } ?> </div>
最後の行にエラーコードを出力するようにしました。
ついでに新規登録が出来たら完了文言も出るようにしてあります。
これで出来てるかな？出来てないかな？と不安になることもないですね。
新規登録はここまで。お疲れ様でした！！
次回はログイン画面を作ります。
余談
MVCに則って作るのであれば佐伯はこう作ります。
// class/function.php <?php function PDOconnect(){ try { $dbh = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_Main . ';charset=utf8', DB_USER, DB_PASS); } catch (PDOException $e) { var_dump($e); exit; } return $dbh; } function signUp($id,$pass){ $dbh = PDOconnect(); //① $sql = 'INSERT INTO '.TB_user.' (userID,password) VALUES (:userID,:password)'; //② $stmt = $dbh->prepara($sql); //③ $stmt -> execute(array( //④ ':userID' => $_POST['userid'], ':password' => $_POST['password'] )); } ?> // pages/model/signup.php <?php if(isset($_POST['submit'])){ if(empty($_POST['userid'])){ $error = 'IDが未入力です'; }elseif(empty($_POST['password']) || empty($_POST['password2'])){ $error = 'パスワードが未入力です'; }elseif($_POST['password'] !== $_POST['password2']){ $error = 'パスワードが一致しません'; }else{ $id = $_POST['userid']; $pass = $_POST['password']; signUp($id,$name) $error = '登録が完了しました！' } } ?> // pages/view/signup.php <div class="container"> <span class="title">LOGIN</span><br> <form action="" method="POST"> <input type="text" name="userid" id="" placeholser="userid"> <input type="text" name="password" id="" placeholder="password"> <input type="password" name="password2" id="" placeholder="re:password"> <input type="submit" value="submit" name="submit"> </form> </div> <div class="error"> <?php if(!empty($error)){ echo $error; } ?> </div> //index.php <?php session_start(); require_once(dirname(__FILE__) . "/class/define.php"); require_once(dirname(__FILE__) . "/class/function.php"); require_once("pages/model/signup.php"); require_once("pages/view/signup.php"); ?>
