「再編集ボタンからきた編集ページを作る」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
前記事、[[PHPとMySQLを使って更新情報の再編集ページを作る]]の続きです。
今度は編集ボタンを押した際に、データベースから記事を読み込み編集できるよう設置していきます。8月6日記事
~
~
目次
#contents
~
~
----
~
*データベースから取得した内容をvalueなどに埋め込む
データベースから取得した値をvalueに埋め込んだり、if文を用いて、selectタグのselectedを追加したりを実装していきます。
また、再びjQueryを読み込ませて、再選択をできるような状況にしておきます。
*コード
<?php
require('config.php');
$dsn = 'mysql:dbname='.DB_NAME.';host='.DB_HOST.';port='.DB_PORT.'';
$user = DB_USER;
$password = DB_PASSWORD;
try{
$dbh = new PDO($dsn, $user, $password);
}catch (PDOException $e){
print('Connection failed:'.$e->getMessage());
die();
}
$filter_id = filter_var($_POST[id],FILTER_SANITIZE_NUMBER_INT,FILTER_NULL_ON_FAILURE);
$stmt = $dbh->prepare("SELECT * FROM テーブル名 WHERE id = :id");
$stmt->bindValue(':id',$filter_id,PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetch();
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker()
});
</script>
<title>サイト名contents Manager</title>
</head>
<body>
<div id="page">
<div id="head">
<header>
<h1>CONTENTS MANAGER</h1>
</header>
</div>
<div id="container">
<div id="menu">
<nav>
<li id="current"><a href="setting.php">新規作成</a></li>
<li><a href="editlist.php">編集</a></li>
<li><a href="http://www63.atwiki.jp/nicepaper/">サイトトップへ</a></li>
<li><a href="javascript:;" onclick="window.close();">ウインドウを閉じる</a></li>
</nav>
</div>
<div id="contents">
<!-- ここから -->
<section id="form">
<h1>新規投稿</h1>
<form action="edit_confirm.php" method="post">
<dl>
<dt>公開日</dt>
<dd>
<input type="text" name="info_date" id="datepicker" value="<?php echo htmlspecialchars($result['info_date'],ENT_QUOTES,"UTF-8"); ?>">
</dd>
<dt>投稿カテゴリ</dt>
<dd>
<select name="type">
<option value="1" <?php if($result['status'] == 1) echo 'selected'?>>お知らせ</option>
<option value="2" <?php if($result['status'] == 2) echo 'selected'?>>重要情報</option>
<option value="3" <?php if($result['status'] == 3) echo 'selected'?>>○○情報</option>
<option value="4" <?php if($result['status'] == 4) echo 'selected'?>>その他</option>
</select>
</dd>
<dt>タイトル（20字以内）</dt>
<dd>
<input type="text" name="title" size="50" maxlength="30" value="<?php echo htmlspecialchars(mb_convert_encoding($result['title'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?>"><!--解説ポイント１-->
</dd>
<dt>内容</dt>
<dd>
<textarea name="info_text" cols="45" rows="5"><?php echo htmlspecialchars(mb_convert_encoding($result['info_text'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?></textarea><!--解説ポイント2-->
</dd>
<dt>URL</dt>
<dd>
<input type="url" name="url" size="50" value="<?php echo htmlspecialchars(mb_convert_encoding($result['url'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?>">
</dd>
<dt>状態</dt>
<dd>
<select name="status">
<option value="2" <?php if($result['status'] == 2) echo 'selected'?>>公開</option>
<option value="1" <?php if($result['status'] == 1) echo 'selected'?>>下書き</option>
</select>
</dd>
</dl>
<div class="clear"></div>
<input type="submit" name="submit" value="確認" class="form_submit">
</form>
</section>
<!-- ここまで-->
</div>
</div>
<footer>
<p>フッター内容</p>
</footer>
</div>
</body>
</html>
~
~
解説ポイント1や解説ポイント2（valueやtextareaの内容にもサニタイジングする）
~
一見HTML化されていない部分のようにも見えますが、
&color(red){value部分やtextarea部分にデータをもってくる場合、タグを閉じられる内容が記述されることを防ぐために、サニタイジングは必要です。}
*まとめ
htmlのコードの中に<?php ?>を色々と作っていけば、phpとhtmlの切り替えを手早くできます。
~
~
以上
前記事、[[PHPとMySQLを使って更新情報の再編集ページを作る]]の続きです。
今度は編集ボタンを押した際に、データベースから記事を読み込み編集できるよう設置していきます。8月6日記事
~
~
目次
#contents
~
~
----
~
*データベースから取得した内容をvalueなどに埋め込む
データベースから取得した値をvalueに埋め込んだり、if文を用いて、selectタグのselectedを追加したりを実装していきます。
また、再びjQueryを読み込ませて、再選択をできるような状況にしておきます。
*コード
<?php
require('config.php');
$dsn = 'mysql:dbname='.DB_NAME.';host='.DB_HOST.';port='.DB_PORT.'';
$user = DB_USER;
$password = DB_PASSWORD;
try{
$dbh = new PDO($dsn, $user, $password);
}catch (PDOException $e){
print('Connection failed:'.$e->getMessage());
die();
}
$filter_id = filter_var($_POST[id],FILTER_SANITIZE_NUMBER_INT,FILTER_NULL_ON_FAILURE);
$stmt = $dbh->prepare("SELECT * FROM テーブル名 WHERE id = :id");
$stmt->bindValue(':id',$filter_id,PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetch();
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker()
});
</script>
<title>サイト名contents Manager</title>
</head>
<body>
<div id="page">
<div id="head">
<header>
<h1>CONTENTS MANAGER</h1>
</header>
</div>
<div id="container">
<div id="menu">
<nav>
<li id="current"><a href="setting.php">新規作成</a></li>
<li><a href="editlist.php">編集</a></li>
<li><a href="http://www63.atwiki.jp/nicepaper/">サイトトップへ</a></li>
<li><a href="javascript:;" onclick="window.close();">ウインドウを閉じる</a></li>
</nav>
</div>
<div id="contents">
<!-- ここから -->
<section id="form">
<h1>新規投稿</h1>
<form action="edit_confirm.php" method="post">
<dl>
<dt>公開日</dt>
<dd>
<input type="text" name="info_date" id="datepicker" value="<?php echo htmlspecialchars($result['info_date'],ENT_QUOTES,"UTF-8"); ?>">
</dd>
<dt>投稿カテゴリ</dt>
<dd>
<select name="type">
<option value="1" <?php if($result['status'] == 1) echo 'selected'?>>お知らせ</option>
<option value="2" <?php if($result['status'] == 2) echo 'selected'?>>重要情報</option>
<option value="3" <?php if($result['status'] == 3) echo 'selected'?>>○○情報</option>
<option value="4" <?php if($result['status'] == 4) echo 'selected'?>>その他</option>
</select>
</dd>
<dt>タイトル（20字以内）</dt>
<dd>
<input type="text" name="title" size="50" maxlength="30" value="<?php echo htmlspecialchars(mb_convert_encoding($result['title'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?>"><!--解説ポイント１-->
</dd>
<dt>内容</dt>
<dd>
<textarea name="info_text" cols="45" rows="5"><?php echo htmlspecialchars(mb_convert_encoding($result['info_text'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?></textarea><!--解説ポイント2-->
</dd>
<dt>URL</dt>
<dd>
<input type="url" name="url" size="50" value="<?php echo htmlspecialchars(mb_convert_encoding($result['url'],"UTF-8","EUC-JP"),ENT_QUOTES,"UTF-8"); ?>">
</dd>
<dt>状態</dt>
<dd>
<select name="status">
<option value="2" <?php if($result['status'] == 2) echo 'selected'?>>公開</option>
<option value="1" <?php if($result['status'] == 1) echo 'selected'?>>下書き</option>
</select>
</dd>
</dl>
<div class="clear"></div>
<input type="submit" name="submit" value="確認" class="form_submit">
</form>
</section>
<!-- ここまで-->
</div>
</div>
<footer>
<p>フッター内容</p>
</footer>
</div>
</body>
</html>
~
~
解説ポイント1や解説ポイント2（valueやtextareaの内容にもサニタイジングする）
~
一見HTML化されていない部分のようにも見えますが、
&color(red){value部分やtextarea部分にデータをもってくる場合、タグを閉じられる内容が記述されることを防ぐために、サニタイジングは必要です。}
*まとめ
htmlのコードの中に<?php ?>を色々と作っていけば、phpとhtmlの切り替えを手早くできます。[[PHPとMySQLで削除ボタンからきた削除ページを作る]]に続きます。
~
~
以上
