ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【PHP,MySQL,Javascript】メモアプリを制作

メモアプリ1

f:id:p_and_a_fam:20170709135146p:plain
追加と排除ができる簡単なメモアプリです。

目的

  • データベースとのやりとりの基礎を実際に理解する。
  • 見やすいUI,UXを考えて作る。
  • レンタルサーバーにアップロードする。

使用するもの

反省、今後の目標

  • Ajaxを使ってスムーズに表示させる。
  • 位置の入れ替え、挿入箇所の指定ができるようにする
  • エラーと例外処理について理解を進める。
  • セキュリティについて公開できるレベルまで勉強する。
  • もっと完結で見やすい記述を目指す。
  • スマホアプリ化を目指す。

ひとまずの初制作です。
将来的に、一枚一枚メモを管理できて、タグづけをしてToDoと持ち物管理がシンプルにできるメモアプリを作ろうと思っています。

コード

index.php 最初に読み込まれる部分

<?php
//PDOに必要な情報を読み込む
require_once(__DIR__.'/config.php');

try{
    //PDO接続
    $db = new PDO(DSN,DB_USERNAME,DB_PASSWORD);
    //全件抽出してidの降順で取得
    $stmt = $db->query("select * from memos order by id desc");
    //配列としてデータベースから取り出す
    $memos = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    //POSTされたら
    if($_SERVER['REQUEST_METHOD'] == 'POST'){
    
        //submitからPOSTされたら
        if (isset($_POST['text']) && $_POST['submit'] == 'submit'){
        //テキストをエスケープして改行、変数に代入
        $text = h($_POST['text']);
        $text = nl2br($text);
        //テキストが入力されているかどうか
            if(empty($text)){
                $empty = '※テキストを入力してください';
            }else{
                $empty = null;
                //入力されている各テキストをデータベースに追加
                $sql = "insert into memos (text) values(?)";
                $stmt = $db->prepare($sql);
                $stmt->execute([$text]);
                //自分自身にリダイレクト。303はgetで送るという命令なのでpostが消える
                //リロードしてもPOSTされない
            header('Location:index.php', true, 303);
            }
        }

        //submitからPOSTされたら
        if (isset($_POST['id']) && $_POST['submit'] == 'delete'){
            $id= $_POST['id'];
            //選択されている分だけ抽出して排除
            for($i = 0;$i < count($id); $i++){
                $sql = "delete from memos where id = ?";
                $stmt = $db->prepare($sql);
                $stmt->execute([$id[$i]]);
            }
        }
    
        //現状のデータを全件抽出
        $stmt = $db->query("select * from memos order by    id desc");
        //配列として取り出す
        $memos = $stmt->fetchAll(PDO::FETCH_ASSOC);

    }      
}catch (PDOException $e){
    print('データベースに接続できません');
    print('Error:'.$e->getMessage());
    exit;
}

?>

index.php 見た目の部分

<div id="container">
<header>
<h1>MEMO</h1>
</header>

<div class="content">
<!--自身にpostする-->
<form action="" method="post" name="form">
<textarea name="text" placeholder="make a memo !"></textarea>
<!--空のままpostすると表示-->
<?php if(isset($empty)){
    echo '<p class="empty">'.$empty.'</p>';
} ?>

<div class="btnWrapper">
<!--書き込み用button-->
<button type="submit" name="submit" value="submit" id="submit">書き込み</button>
<!--削除用button-->
<button type="submit" name="submit" value="delete" id="delete" class="disable" disabled>チェックしたメモを削除</button>
</div><!--/.btnWrapper-->

<!--textが配列にある分だけ表示-->
<ul id="memos">
<?php foreach($memos as $memo){ ?> 
<li>
<input type="checkbox" name="id[]" value="<?= $memo["id"]; ?>" class="check" id="label<?= $memo["id"]; ?>">
<label for="label<?= $memo["id"]; ?>">
<span class="text"><?= $memo["text"]; ?></span>
</label>
</li>
<?php } ?>
</ul>

</form>
</div><!--/.content-->
</div><!--/#container-->

index.php javascriptでの動きの部分

<script>
//変数を初期化
var form = document.getElementsByTagName('form');
var submitB = document.getElementById('delete');
var check = document.getElementsByClassName('check');
//chekboxがある分だけループ
for(var i = 0; i < check.length; i++){
    //クリックした時のイベントを付与
    check[i].addEventListener('click',function(){
    var checkTrue = 0;
    //「削除ボタン」を無効に
    submitB.disabled = true;
    submitB.classList.add('disable');
    //formの子要素がある分だけループ
    for(var j = 0; j < document.form.elements.length; j++){
            //もしcheckboxが選択されていたらカウントする
            if(document.form.elements[j].checked){
            checkTrue++;
        }
        //もしcheckboxがカウントされていたら
        if(checkTrue > 0){
            //「削除ボタン」を有効化
            submitB.disabled = false;
            submitB.classList.remove('disable');
        }
    }
  },false);
}
</script>