大学生のモノづくり記録

Webページ作成(主にHTML、CSS、PHP、jQuery)、ArduinoやRaspberry Piを使って物作りの勉強した記録を載せたり/趣味のことを書いていきたいなと思います。(クオリティはかなり低いです)

自己管理Webサイトアプリを作成してみた vol.1(ログイン画面から、アカウントの登録画面まで)

  1. 最初に

 皆さんお久しぶりです。やっと大学の前期のカリキュラムをすべて終わらせたので、夏休みです。今年は、新型コロナウィルスの影響で大学での生活が大きく変わって慣れないところでもありますが、夏休みに突入したので、自己学習として、HTML.PHP,Mysql,css,出来れば、動的な動作をさせる言語を使った自己管理(予定)するWeb上のアプリケーションを作成していこうかなと思います。  なぜ作ろうかと思ったのかは、やはり新型コロナウィルスの影響で自分の予定が管理しきれていないところが多くあったので、実際に作って自分で使いたいと思ったからです。

 今回の記事では、画面遷移、おおよその画面設計を作成していきます。

  1. 画面遷移の設計  画面遷移の予定は、まず最初にログイン画面から始まり、そこで、アカウントがある場合は、そのままメールアドレス、パスワードを記入してログインしますその際にパスワード、メールアドレスに間違いがあった場合は、その画面で通知をして報告します。アカウントが無い場合は、アカウントの登録画面の方へ飛びますそこでは、アカウントの情報を入力し、完了したらログイン画面に戻る仕組みを作成していきます。  ログインが完了したら、そこでは、予定の一覧を表示し追加する場合、追加ボタンを設定し押したら予定の追加画面に飛ぶように作成を行います。  予定の設定は、まず、記入しその後確認終わったらまた、ログイン後の画面に戻る仕組みです。  画面遷移の内容を以下の図にも示します。  f:id:kyozinnlove55:20200828020059p:plain

  2. 設計  設計ですが、おおむねに設定は、済ませているので、今で来ているところまでをまとめていきます。  

  3. ログイン画面  f:id:kyozinnlove55:20200828020700p:plain  ログイン画面は、設計できでいるのですがまだ、ログインの設計が出来ていませんこれは、夏休みの課題です。 ・プログラム

<!DOCTYPE html> 予定管理ログイン

予定管理システム

ログイン

<form action="yotei.php" method="POST"> 
  <table>
    <p>e-mail:</p><input type="text" id="email" name="email"><br>
    <p>パスワード:</p><input type="text" id="pass" name="pass"><br>
  </table>
  <input type="submit" value="送信"> 
</form>
<a href="new.php"><p>新規会員ですか?</p></a>
<a href="serch.php"><p>パスワード、IDをお忘れですが?</p></a> 
<?php
$dsn = 'mysql:dbname=schedule_management;host=localhost;charset=utf8';//データベースの情報を設定
$user = 'root';//ユーザー選択
$password = '';//パスワード
?>

* アカウントの追加 ・アカウントの登録画面  f:id:kyozinnlove55:20200828020831p:plain <!DOCTYPE html> 新規作成

新規アカウント作成

ここでは、新規アカウントの作成を行います。

アカウント作成には、E-mail、パスワードを入力してもらいます。

e-mail


パスワード





・確認 f:id:kyozinnlove55:20200828020923p:plain <!DOCTYPE html> 確認画面

<?php var_dump($POST); ?>

<?php var_dump($POST); $e_mail=$POST['email']; $pass=$POST['pass']; ?>

以下の内容で登録します

メールアドレス:<?php echo $e_mail;?>

パスワード:<?php echo $pass;?>

・完了 f:id:kyozinnlove55:20200828020953p:plain <!DOCTYPE html> 登録完了 <?php var_dump($POST); $e_mail=""; $pass=""; $e_mail=$POST['e_mail']; $pass=$_POST['pass']; if (isset($error['e_mail']) && $error['e_mail'] == 'blank');

  if (isset($error['pass']) && $error['pass'] == 'blank');
?>

<?php $dsn = 'mysql:dbname=ほげほげ;host=localhost;charset=utf8';//データベースの情報を設定 $user = 'ほげほげ';//ユーザー選択 $password = ''ほげほげ;//パスワード

  // $dbh = new PDO($dsn, $user, $password);
  // $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  // echo '接続に成功しています';

  try{

      $dbh = new PDO($dsn,$user, $password);//データベースに接続
      $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//エラーをどこまで報告するのかの指定
      // $sql="INSERT INTO user (id,name,message,date) VALUE (NULL :name, :message ,:date)";/SQL文でデータベースに追加    
      //SQLの追加の文を記入する(6・3)以降
      $sql="INSERT INTO user2 (email,pass) VALUES (:email,:pass)";
      $stmt=$dbh->prepare($sql);
      $stmt->bindValue(':email',$e_mail, PDO::PARAM_STR);
      $stmt->bindValue(':pass',$pass);
      $stmt-> execute();
      $date = array();
    /*while($row =$stmt->fetch(PDO::FETCH_ASSOC)){
      $date[]=$row;
    }*///この文があるとUODATE文が受け取れないので不要
      // echo '処理が終了しました。';
      // echo '接続に成功しています'; 
  }catch (PDOException $e){
      print('Connection failed:'.$e->getMessage());
      die();
  }

?>

<h1>登録完了</h1>
<a href="login.php"><p>ログイン画面へ</p></a>

・実際のデータベース f:id:kyozinnlove55:20200828021050p:plain

  1. まとめ  今回は、長すぎてしまうので、ログイン画面からアカウントの登録画面までの記事とさせてください。実際に今は、今まで行ってきたことのまとめですが、今後は、ログイン後の画面の設計また、一番わからないログインの仕組みも作成していきたいなと思います。