PHP+JavaScript(Vue.js) メモプログラム

何かメモを取る場合、テキストファイルにパッと書くことが多いので、ブラウザに書けたらどうだろうと思い作成してみた。

普段からブラウザは開いているし、レンサバに設置すれば外でも見れるので、テキストファイルより便利になりそうと思っていたが、しばらく使ってみて、やっぱりテキストファイルに戻ってしまった。

<?php

if ( empty($_POST['pwd']) || $_POST['pwd'] !== "123" ) {
  
  echo "<form method='post'>";
  echo "<input type='password' name='pwd'>";
  echo "</form>";
  exit;

}

?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
* {
  padding: 0;
  border: 0;
}
html, body, #app {
  height: 98%;
}
textarea {
  width: 100%;
  height: 100%;
  font-family: "メイリオ", sans-serif;
  font-size: 20px;
}
textarea:focus {
  outline: none;
}
</style>
</head>
<body>
<div id="app"> 
<p id="datetime"></p>
<textarea v-model="val" v-on:input="timer" v-on:keydown.ctrl.enter="save"></textarea>
</div>
<script>
let v = new Vue({
  el: '#app',
  data: {
    url: 'http://<?php echo $_SERVER["HTTP_HOST"] . "/" . "post.php"; ?>',
    timer_id: '',
    val:''
  },
  methods: {

    window: onload = function(){
      v.post();
    },

    save: function(){
      if(v.timer_id != "") clearTimeout(v.timer_id);
      v.post();
    },

    post: function(){

      let param = new URLSearchParams();
      param.append("data", v.val);

        axios
          .post(v.url, param) 
          .then(response => {
            v.val = response.data;
          })
          .catch(error => {
            alert(error);
        });

        let t = new Date();
        document.querySelector("#datetime").innerHTML = t.getFullYear() + "/" +  t.getMonth() + 1 + "/"+ t.getDate() + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();

        v.timer_id = "";
    },

    timer: function(){

      if(v.timer_id != "") clearTimeout(v.timer_id);
      v.timer_id = setTimeout(function(){

        v.post();

      }, 5000);
      
    }
  }
})
</script>
</body>
</html>

<?php

if ( empty($_POST['pwd']) || $_POST['pwd'] !== "123" ) {

echo "<form method='post'>";

echo "<input type='password' name='pwd'>";

echo "</form>";

exit;

}

<!DOCTYPE html>

<html>

<head>

* {

padding: 0;

border: 0;

}

html, body, #app {

height: 98%;

}

textarea {

width: 100%;

height: 100%;

font-family: "メイリオ", sans-serif;

font-size: 20px;

}

textarea:focus {

outline: none;

}

</style>

</head>

<body>

</div>

let v = new Vue({

el: '#app',

data: {

url: 'http://<?php echo $_SERVER["HTTP_HOST"] . "/" . "post.php"; ?>',

timer_id: '',

val:''

methods: {

window: onload = function(){

v.post();

save: function(){

if(v.timer_id != "") clearTimeout(v.timer_id);

v.post();

post: function(){

let param = new URLSearchParams();

param.append("data", v.val);

axios

.post(v.url, param)

.then(response => {

v.val = response.data;

})

.catch(error => {

alert(error);

});

let t = new Date();

document.querySelector("#datetime").innerHTML = t.getFullYear() + "/" + t.getMonth() + 1 + "/"+ t.getDate() + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();

v.timer_id = "";

timer: function(){

if(v.timer_id != "") clearTimeout(v.timer_id);

v.timer_id = setTimeout(function(){

v.post();

}, 5000);

}

})

</script>

</body>

</html>

<?php

if (parse_url($_SERVER['HTTP_REFERER'])['host'] !== $_SERVER["HTTP_HOST"]) exit;
if (!empty($_POST['data']) && !file_put_contents("../data.txt", $_POST['data'])) die("書込失敗");
echo file_get_contents("../data.txt");

<?php

if (parse_url($_SERVER['HTTP_REFERER'])['host'] !== $_SERVER["HTTP_HOST"]) exit;

if (!empty($_POST['data']) && !file_put_contents("../data.txt", $_POST['data'])) die("書込失敗");

echo file_get_contents("../data.txt");