PHP復習のため、
・PHPでのログイン＋ログアウト
・Vue.jp→PHP→MySQLでの取得(JSON)＋更新
を作成してみた。
config.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php define("BASE_URL", "http://" . $_SERVER["HTTP_HOST"] . "/app1"); define("DB_DSN", "mysql:host=localhost;dbname=test_db;charset=utf8"); define("DB_USR", "root"); define("DB_PWD", "xxx"); $auth = [ "taro" => ["id" => "100", "pwd" => '$2y$10$h8HbPPXw99gmOdhWWYgxl.oGBMPEBmTtE5YWW25dq7T.TpxTcqRAm'], "jiro" => ["id" => "200", "pwd" => '$2y$10$A9XhGbn/K0O9OG//Ei2.fe/4i8/VSgixJ2mSYs5w25/etTLAy8AYm'], ]; // php -r "echo password_hash('パスワード', PASSWORD_DEFAULT);" |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<?php session_start(); ini_set("display_errors", 1); ini_set("error_reporting", E_ALL); require_once "config.php"; if (!isset($_SESSION["id"])) { header("Location: " . BASE_URL . "/login.php"); exit; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</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> table{ border-collapse: collapse; } td{ min-width: 100px; border: 1px solid #ccc; } </style> </head> <body> <div id="app"> <form> <input type="button" value="取得" v-on:click="select"> </form> <table> <tr v-for="item in items" v-bind:data-id="item.id"> <td v-on:click="td_click">{{item.id}}</td> <td v-on:click="td_click">{{item.name}}</td> <td v-on:click="td_click">{{item.age}}</td> </tr> </table> <form> ID:<input type="text" v-model="model['id']" > Name:<input type="text" v-model="model['name']"> Age:<input type="text" v-model="model['age']"> <input type="button" value="更新" v-on:click="update"> </form> </div> <a href="<?php echo BASE_URL . "/logout.php" ?>">Logout</a> <script> let v = new Vue({ el: "#app", data: { model: { "id": "", "name": "", "age": "" }, url: "<?php echo BASE_URL . "/json.php" ?>", items: null }, methods: { clear(){ this.items = []; this.model["id"] = ""; this.model["name"] = ""; this.model["age"] = ""; }, td_click(e) { let parent = e.currentTarget.parentNode; this.model["id"] = parent.children[0].textContent; this.model["name"] = parent.children[1].textContent; this.model["age"] = parent.children[2].textContent; }, select() { let params = new URLSearchParams(); params.append("query_type", 1); this.post(params, true); }, update() { let params = new URLSearchParams(); params.append("query_type", 2); params.append("id", this.model["id"]); params.append("name", this.model["name"]); params.append("age", this.model["age"]); this.post(params, false); this.clear(); }, post(params, exists_response) { console.log(params); axios .post(v.url, params) .then(response => { if(exists_response) this.items = response.data; }) .catch(error => { alert(error); }); } } }) </script> </body> </html> |
json.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<?php session_start(); ini_set("display_errors", 1); ini_set("error_reporting", E_ALL); require "config.php"; if (!isset($_SESSION["id"])) exit; $query_type = filter_input(INPUT_POST, "query_type", FILTER_SANITIZE_FULL_SPECIAL_CHARS); $id = filter_input(INPUT_POST, "id", FILTER_SANITIZE_FULL_SPECIAL_CHARS); $name = filter_input(INPUT_POST, "name", FILTER_SANITIZE_FULL_SPECIAL_CHARS); $age = filter_input(INPUT_POST, "age", FILTER_SANITIZE_FULL_SPECIAL_CHARS); if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($query_type)) { $json = new Json(); switch ($query_type){ case 1: $columnList = array("id","name","age"); $json->ExecuteQuery("select * from test_table", $columnList); break; case 2: $json->ExecuteNonQuery( "update test_table set name = :name, age = :age where id = :id", array(":name"=>$name, ":age"=>$age, ":id"=>$id) ); break; } } // class class Json{ function Connection() { try { return new PDO(DB_DSN, DB_USR, DB_PWD); } catch (Exception $e) { http_response_code(401); exit; } } function ExecuteNonQuery($sql, $valueList){ $stmt = $this->Connection()->prepare($sql); $stmt->execute($valueList); } function ExecuteQuery($sql, $columnList) { $result = array(); foreach($this->Connection()->query($sql) as $row){ $tmp = array(); foreach($columnList as $column){ $tmp[$column] = $row[$column]; } array_push($result, $tmp); } header('Content-type: application/json'); echo json_encode($result, JSON_UNESCAPED_UNICODE); } } |
login.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?php session_start(); ini_set("display_errors", 1); ini_set("error_reporting", E_ALL); require_once "config.php"; $usr = filter_input(INPUT_POST, "usr", FILTER_SANITIZE_FULL_SPECIAL_CHARS); $pwd = filter_input(INPUT_POST, "pwd", FILTER_SANITIZE_FULL_SPECIAL_CHARS); $token = filter_input(INPUT_POST, "token", FILTER_SANITIZE_FULL_SPECIAL_CHARS); if ($_SERVER["REQUEST_METHOD"] === "POST" && $token === $_SESSION["token"]) { if (isset($auth[$usr]) && password_verify($pwd, $auth[$usr]["pwd"])) { session_regenerate_id(); $_SESSION["id"] = $auth[$usr]["id"]; header("Location: " . BASE_URL . "/index.php"); exit; } else { echo "<script>(function(){alert('ユーザー名またはパスワードが違います。');}());</script>"; } } $_SESSION["token"] = md5(mt_rand()); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <form method="post"> ユーザー名: <input type="text" name="usr"> パスワード: <input type="text" name="pwd"> <input type="hidden" name="token" value="<?php echo $_SESSION["token"]; ?>"> <input type="submit"> </form> </body> </html> |
logout.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php session_start(); ini_set("display_errors", 1); ini_set("error_reporting", E_ALL); require_once "config.php"; session_destroy(); header("Location: " . BASE_URL . "/login.php"); |