■試したいこと
親画面より子画面を開く。
子画面で登録を行い、登録後、子画面を自動的に閉じて、親画面を更新して表示。
つまり別ウィンドウ(子画面)を開きデータ更新後、子画面を同時に閉じ、親画面にも反映した状態で親画面を表示する。
実際に子画面での更新が反映されたかどうかを確認するため、以下を作成。
(親画面)
登録したデータの一覧を表示する。
(子画面)
親画面で追加ボタンを押下後、追加画面を表示。
子画面で登録すると、子画面が自動的に閉じ、親画面が更新される。
上記に関し、下記プログラムにて検証し実行されたので備忘記録として記載しておく。
・ポイント
javascriptにて、サブウィンドウでsubmit後、ajaxを利用しデータを更新後に、windowオブジェクトのopenerメソッドを利用し 親ウィンドウをreloadし、サブウインドウを閉じる処理を行う。
//親画面
<?php
require_once(__DIR__ . '/Syori.php');
$addApp = new Syori();
$adds = $addApp->getAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form name="form1">
<input type="button" value="追加" onclick="post_open();"/>
</form>
<ul>
<?php foreach ($adds as $add) : ?>
<li>
<?= htmlspecialchars($add->title); ?>
</li>
<?php endforeach; ?>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
//子画面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Add</h1>
<form action="" id="new_todo_form">
<input type="text" id="new_todo" placeholder="What needs to be done?">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
//javascript
{
function post_open() {
window.open('', 'new_window','width=400,height=300,left=100,top=150');
document.form1.action = 'SubScreen.php';
document.form1.method = 'POST';
document.form1.target = 'new_window';
document.form1.submit();
}
$(function() {
$('#new_todo_form').on('submit', function() {
// titleを取得
var title = $('#new_todo').val();
// ajax処理
$.post('_ajax.php', {
title: title,
}, function() {
window.opener.location.reload();
window.close();
});
});
});
}
//_ajax.php
<?php
//require_once(__DIR__ . '/Syori.php');
$addApp = new Syori();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
try {
$res = $addApp->add();
header('Content-Type: application/json');
echo json_encode($res);
exit;
} catch (Exception $e) {
header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
echo $e->getMessage();
exit;
}
}
//Syori.php
<?php
class Syori {
private $_db;
public function __construct() {
ini_set('display_errors', 1);
define('DSN', 'mysql:host=localhost;dbname=add_app');
define('DB_USERNAME', 'dbuser01');
define('DB_PASSWORD', 'password');
try {
$this->_db = new PDO(DSN, DB_USERNAME, DB_PASSWORD);
$this->_db->setAttribute(PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo $e->getMessage();
exit;
}
}
public function getAll() {
$stmt = $this->_db->query("select * from todos order by id desc");
return $stmt->fetchAll(PDO::FETCH_OBJ);
}
public function add() {
$sql = "insert into todos (title) values (:title)";
$stmt = $this->_db->prepare($sql);
$stmt->execute([':title' => $_POST['title']]);
return [];
}
}
参考サイト
【JavaScript】サブウインドウ - Qiita
http://the-zombis.sakura.ne.jp/wp/blog/2015/03/11/post-3080/
https://dotinstall.com/lessons/todo_app_php_v3
その他 困ったこと
mysqlに接続できない
【MySQL】PHPで接続できないとき SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client – 困った時に思い出したい
ユーザ権限の登録
(通常通りではうまく行かなかった)
MacにMySQL5.7をインストールして作業用Userと作業用DBを構築 - Qiita
