「再編集ボタンからきた編集ページを作る」の編集履歴(バックアップ)一覧に戻る

再編集ボタンからきた編集ページを作る - (2015/08/06 (木) 09:40:15) のソース

前記事、[[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"); ?>"><!--解説ポイント1-->
                 </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の切り替えを手早くできます。
~
~
以上