データベース一覧より編集・更新
１：「admin_edit_input.php」
⇒編集ボタンクリックで編集可能にする
・「admin_edit_input.tpl」は「newsfeed_input.tpl」のコピー（修正もしてね）<修正箇所>
headerを読み込む、formのリンク先、関数部分は削除、最後のリンクナビ先
・「admin_edit_input.php」は「newsfeed_detail.php」のコピー（修正もしてね）
・リンク修正
・「newsfeed_list.tpl」の編集のリンク先に、タイトル同様「GET値」の変数を穴あけ
２：「admin_edit_confirm.php」
⇒編集後、確認画面に飛べないので作成
・「admin_edit_confirm.tpl」は「newsfeed_confirm.tpl」のコピー（修正もしてね）
・「admin_edit_confirm.php」は「newsfeed_confirm.php」のコピー（修正もしてね）
・リンク修正
・編集確認画面から編集画面に戻るには？
⇒「newsfeed_confirm.tpl」の戻る部分のリンク先の指定＆値の取得先を編集
※セッションを使う
セッションを使う際は、混同するので画面遷移図をかいて整理すること
「admin_edit_confirm.php」
//セッションから更新するデータのidを取得する
$id = $_SESSION['edit_data'];
$smarty->assign('id',$id);
「admin_edit_input.php」
//idをセッションに渡す $_SESSION['edit_data'] = $id;
「admin_edit_confirm.tpl」
<p><a href="./admin_edit_input.php?i={$id}">戻る</a></p>
３：「admin_edit_fin.php」
⇒確認画面後、更新する
// 更新するデータのIDを取得しておく
$id = $_SESSION['edit_data'];
$_SESSION['edit_data'] = array();
unset( $_SESSION['edit_data'] );
//SQLを用意する
$sql = 'UPDATE INTO newsfeed SET '
.'title = :title, '
.'start_date = :start_date, '
.'end_date = :end_date, '
.'description = :description, '
.'WHERE id = :id;';/*この記述トーーーーーっても大事！！！（UPDATEは怖い）*/
$stmt = $dbh->prepare($sql);
//値をバインド（）する
$stmt->bindParam(':title',$data['title']);
$stmt->bindParam(':start_date',$data['start_date']);
$stmt->bindParam(':end_date',$data['end_date']);
$stmt->bindParam(':description',$data['description']);
$stmt->bindParam(':id',$id,PDO::PARAM_INT );
//SQLを実行する
$stmt->execute();
//一覧画面に戻る
header( 'Location: http://133.242.133.66/erina_yoshikawa/newsfeed/newsfeed_list.php' );
exit;
4：「admin_edit_input.php」
// セッションを消しておく $_SESSION['edit_data'] = array(); unset( $_SESSION['edit_data'] );
データベース一覧より確認画面へ
本日の授業
１：「newsfeed_detail.php」
⇒DB一覧のタイトルをクリックすると詳細画面（閲覧用、確認用）へのリンク
「newsfeed_list.tpl」を修正
⇒リストのタイトルをリンク化
⇒getパラメーター取得後（$_GET[' i ']）、リンク先として記述
<li><a href="newsfeed_detail.php?i={$row.id}">{$row.title}</a></li>
⇒テンプレート変数名もつける
{foreach from=$list_data item=row}
<ul>
<li><a href="newsfeed_detail.php?i={$row.id}">{$row.title}</a></li>
<li>{$row.start_date}</li>
<li>{$row.end_date}</li>
<li>{$row.description}</li>
<li class="mini"><a href="admin_edit_input.php?i=">編集</a></li>
<li class="mini"><a href="admin_delete.php?i=">削除</a></li>
</ul>
{/foreach}
「newsfeed_detail.tpl」を作成
⇒ニュースフィード確認画面のようなモックアップが必要
⇒モックアップが確認できたら、取得したい値の部分は穴あけする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ニュースフィード管理画面 - {$header.pagename}</title>
<link rel="stylesheet" href="./css/style.css" media="all">
</head>
<body>
<div id="container">
<div id="wrapper">
{include file='common/admin_header.tpl'}
<dl>
<dt>タイトル</dt>
<dd>{$data.title}</dd>
<dt>表示開始日時</dt>
<dd>{$data.start_date}</dd>
<dt>表示終了日時</dt>
<dd>{$data.end_date}</dd>
<dt>内容</dt>
<dd>{$data.description}</dd>
</dl>
<p><a href="./newsfeed_list.php">一覧へ戻る</a></p>
</div>
</div>
</body>
</html>
「newsfeed_datail.php」を作成
<?php
//共通の前処理
require_once('./include/admin_initialize.inc.php');
//ヘッダ用変数の設定
$header['user'] = $_SESSION['login_info'];
$header['pagename'] = '詳細';
$header['logout_url'] = ADMIN_LOGOUT_URL;
$smarty->assign('header',$header);
//====================================================
//idの初期値を設定する
$id = NULL;
//入力チェック
if ( $_GET['i'] ) {
//値があって、しかも数値型の場合は
if ( is_numeric($_GET['i'])) {
//idに入力値を設定する
$id = $_GET['i'];
}
}
//====================================================
//DBに接続する
$dbh = new PDO('mysql:host=localhost;dbname=erina_yoshikawa_d','erina_yoshikawa','erina_yoshikawa');
//SQLを用意する
$sql = "SELECT * FROM newsfeed WHERE id = :id;";
$stmt = $dbh->prepare( $sql );
//値をバインドする
$stmt->bindParam( ':id',$id, PDO::PARAM_INT );
//SQLを実行する
$r = $stmt->execute();
//データを取得する
$data = $stmt->fetch();
//====================================================
//データが空っぽの場合はエラーとして一覧画面に戻す
if(!$data){
header('Location: http://133.242.133.66/erina_yoshikawa/newsfeed/newsfeed_list.php' );
exit;
}
//====================================================
//テンプレートに表示する変数を割り当てる
$smarty->assign( "data",$data );
//テンプレート表示
$smarty->display('newsfeed_detail.tpl');
//共通の後処理
require_once('./include/finalize.inc.php');
HTML５のおさらい
本日の授業の流れ
１：セマンティックとは？
２：HTML5サイトの構造（よく使うタグ）
３：sectionの入れ子構造をしっかり覚える
４：Dream Weaverチューンナップ（環境設定とtextの貼り付け方）
５：HTML入力スピードアップのコツ
６：「nomalize.css」について
セマンティックとは？
⇒意味のあるコーディング。HTMLとCSSの完全な区分け。
・HTML→文章構造。本を執筆するように、構造を考えて記述する。
・CSS→UI（ユーザーインターフェイス）。レイアウトのみ。
※CSSはHTML記述のの通りに書く必要はない。別物と考え、レイアウト重視に並べ替える。
<!DOGTYPE html>
HTML5サイトの構造（よく使うタグ）
・header
・nav
・article
・section
・aside
・footer
・small
＜＜図解＞＞
※カラムの考え方
・1カラムのサイト⇒小説のような作り
・2カラムのサイト⇒参考書的な作り
sectionの入れ子構造をしっかり覚える
「style.css」の記述を見ると分かりやすいかも
section {
margin-bottom: 10px;
padding: 10px;
background: #87c2c2;
}
section > section {
padding:10px;
background: #fff;
}
section > section > section {
margin-bottom: 0;
padding:10px;
background: #87c2c2;
}
section.last {
margin-bottom: 0;
}sectionの中のsectionという意味
section > section {
background: #fff;
}
※sectionの入れ子がしっかり成り立っていれば、
ｈ１やｈ３などの、タグはSEOを考えて自由に当てはめることができる！
⇒見え方はCSSで操作すれば良い
Dream Weaverチューンナップ（主に環境設定）
編集⇒「環境設定」が大事！
以下は確認すべきことです↓↓
１、W3Cバリデーター⇒HTML５
２、コードフォーマット⇒２スペース
３、新規ドキュメント⇒HTML５
HTML入力スピードアップのコツ（Dw活用）
・本文となる「〇〇.txt」ファイルを行間を１行空けて作成し、
「index.html」を新規作成する際、「デザイン」ビューに「〇〇.txt」の中身をコピペ。
「コード」ビューを確認すると、全て＜P＞タグとして書き込まれるので
あとはタグを編集するだけで良い◎
・Ctrl+Alt+む
➡選択範囲が一括インデントされる！
・コード編集スペースの真下にあるネストガイド
（パンくずリストのように＜body＞や＜p＞タグが表示してある部分）を右クリック
➡クイックタグ編集
➡編集してEnter２回
簡単にタグの修正ができる！
・囲みたい行を選択
➡Ctrl+T
➡例えば＜ul＞と入力してEnter２回
➡選択範囲が＜ul＞タグで囲まれる！
「nomalize.css」について
➡HTML５用のリセットCSSのようなもの
➡nomalizeとは標準化
➡HTML５が対応でないブラウザにも表示されるようなCSSが記述されている
下記のサイトでコードをダウンロード！
http://necolas.github.io/normalize.css/
ヘッダー記述
本日の授業 - webメモ
１、新しいテーマを有効化する
・wordpressの勉強（手代木先生のブログ）の 2012/9/1の記事より
素材ファイル「Lesson2」ダウンロードし、
外観➡テーマを新しいものに変更します。
・wordpressにｘｍｌデータ（記事）をインポート➡「投稿」に追加されます
３、「header.php」、「footer.php」に入力していく
htmlサイトのように一枚に書くものを
「header.php」はheader部分のみ
「footer.php」はfooter部分のみと
何枚かに分けて入力します
４、「header.php」の頭文
「charset」や「記事タイトル□ブログタイトル」部分は
PHPプログラムをwordpress変数を使って入力
➡ここまで、先生ブログの2012/9/2までの記事（スタイルシート基本まで）
この辺は、wordpress変数なので決まりごとのように覚える
⇒テンプレを自分で創って編集しておいても良い
５、「function.php」を編集
カスタムメニューを創る
「home.php」と「function.php」作成すると
「ホーム：ホーム」という固定ページが自動で生成されて、
ブログではない普通のサイトのように稼動する
⇒つまり、「ホーム」がトップ画面になる
丸で囲んであるURLを確認すると、
このサイトを開いた直下は、作成したナビのTOPページに指定されている
wordpressの基本構造
wordpressはブログ作成ツールなので
・「index.php」…ブログ投稿ページ（通常はこちらは優先される）
・「home.php」…ホーム（TOP）ページ
ブログ投稿ページがメインで生成されてしまう。
なので、カスタムメニューで「home.php」がメインとなるようにカスタマイズする必要がある
注意！！
一度記述ミスなどでエラーを起こすとセッションにエラーが残り
何度修正してもエラー表示が出ることがある。
もしそうなったら、、、
→ログアウトして「xampp」フォルダから作業中フォルダに入り、
外部から削除（function.php）書き直して、ログインし直すしかない。
７、ヘッダー画像を読み込む
カスタムヘッダー覚える！
「functions.php」はいわば管理画面の記述
「functions.php」に記述
//カスタムヘッダー
add_custom_image_header('','admin_header_style');
function admin_header_style() {}
define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/img/header.jpg');
define('HEADER_IMAGE_WIDTH',900);
define('HEADER_IMAGE_HEIGHT',228);
この時点ではまだ表示はされない
外観➡ヘッダーを確認すると、上記の記述により画像が拾われているのが分かる
８、ヘッダー画像を表示する
「header.php」に下記を追加
<?php if(get_header_image()): ?><div id="image"><img src="<?php header_image(); ?>" alt="" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>"></div><?php endif; ?>
９、Meta Sliderをインストール＆有効化
・スライダー画像をつくって、アップロードする（Add Slide）
・画像サイズを設定して、保存
・貼り付けコードを取得
１０、Media encoderの使い方
➡動画の無駄な前後部分をカットできるソフト
画像の枠全体をぼかす方法
メモです
１：全体を選択
２：変形⇒縦横比率固定でｗ８０％にする
３：選択範囲を反転⇒枠組みができる
４：新規レイヤー追加
５：塗りつぶし
６：選択範囲を反転⇒内側の線だけ選択されてる
７：境界線を調整（コントラスト強め）
８：選択範囲を反転
９：最後にまた塗りつぶし
nivo sliderの導入
本日の授業の流れ
２：「power code editor」
プラグイン➡新規追加➡「power code editor」をインストール＆有効化するだけで
テーマ編集のコードが色分けされ、見やすくなる
４：はてなダイアリーのエクスポート方法
➡管理画面より、Movable Type形式でエクスポート
※この記事を使ってwordpressサイトをカスタマイズしていきます
➡内容があって初めてカスタマイズできるのがwordpressサイトです
６：nivo slider for wordpressプラグインをインストール&有効化
「nivo slider for wordpress」をインストールしたは良いけど…操作画面が英語なので
１、http://3bee.jp/
3bee.jpのサイト内で「日本語化」と検索する
３、ダウンロードした日本語化プログラム（２枚）を展開して、
作成しているwordpressサイトのフォルダ内の
wp-content➡plugins➡nivo sliderフォルダ内に
展開した２枚のプログラムを格納する
あら不思議、日本語化されて操作しやすくなっています。
スライドさせたい画像をアップロード
※まずはnivo sliderの操作画面のオプションにて、画像サイズを設定
１、Psでサイズを統一した画像達を
ｗｐのnivo sliderの操作画面に１枚ずつ追加していく
２、アップロードした画像はドラッグで全体を選択➡保存（1枚ずつ）
３、またまたオプションの中の詳細オプションで
footerを選択し、
画像の貼り付けコードをget！
４、テーマ編集➡header.phpの、、、
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
★★★ココ↓に貼付けてください★★★
<?php if (function_exists('nivoslider4wp_show')) { nivoslider4wp_show(); } ?>
