データベース一覧より編集・更新
1:「admin_edit_input.php」
⇒編集ボタンクリックで編集可能にする
・「admin_edit_input.tpl」は「newsfeed_input.tpl」のコピー(修正もしてね)<修正箇所>
headerを読み込む、formのリンク先、関数部分は削除、最後のリンクナビ先
・「admin_edit_input.php」は「newsfeed_detail.php」のコピー(修正もしてね)
・リンク修正
・「newsfeed_list.tpl」の編集のリンク先に、タイトル同様「GET値」の変数を穴あけ
2:「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>
3:「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'] );
データベース一覧より確認画面へ
本日の授業
1:「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');
HTML5のおさらい
本日の授業の流れ
1:セマンティックとは?
2:HTML5サイトの構造(よく使うタグ)
3:sectionの入れ子構造をしっかり覚える
4:Dream Weaverチューンナップ(環境設定とtextの貼り付け方)
5:HTML入力スピードアップのコツ
6:「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の入れ子がしっかり成り立っていれば、
h1やh3などの、タグはSEOを考えて自由に当てはめることができる!
⇒見え方はCSSで操作すれば良い
HTML入力スピードアップのコツ(Dw活用)
・本文となる「〇〇.txt」ファイルを行間を1行空けて作成し、
「index.html」を新規作成する際、「デザイン」ビューに「〇〇.txt」の中身をコピペ。
「コード」ビューを確認すると、全て<P>タグとして書き込まれるので
あとはタグを編集するだけで良い◎
・Ctrl+Alt+む
➡選択範囲が一括インデントされる!
・コード編集スペースの真下にあるネストガイド
(パンくずリストのように<body>や<p>タグが表示してある部分)を右クリック
➡クイックタグ編集
➡編集してEnter2回
簡単にタグの修正ができる!
・囲みたい行を選択
➡Ctrl+T
➡例えば<ul>と入力してEnter2回
➡選択範囲が<ul>タグで囲まれる!
「nomalize.css」について
➡HTML5用のリセットCSSのようなもの
➡nomalizeとは標準化
➡HTML5が対応でないブラウザにも表示されるようなCSSが記述されている
下記のサイトでコードをダウンロード!
http://necolas.github.io/normalize.css/
ヘッダー記述
本日の授業 - webメモ
1、新しいテーマを有効化する
・wordpressの勉強(手代木先生のブログ)の 2012/9/1の記事より
素材ファイル「Lesson2」ダウンロードし、
外観➡テーマを新しいものに変更します。
・wordpressにxmlデータ(記事)をインポート➡「投稿」に追加されます
3、「header.php」、「footer.php」に入力していく
htmlサイトのように一枚に書くものを
「header.php」はheader部分のみ
「footer.php」はfooter部分のみと
何枚かに分けて入力します
4、「header.php」の頭文
「charset」や「記事タイトル□ブログタイトル」部分は
PHPプログラムをwordpress変数を使って入力
➡ここまで、先生ブログの2012/9/2までの記事(スタイルシート基本まで)
この辺は、wordpress変数なので決まりごとのように覚える
⇒テンプレを自分で創って編集しておいても良い
5、「function.php」を編集
カスタムメニューを創る
「home.php」と「function.php」作成すると
「ホーム:ホーム」という固定ページが自動で生成されて、
ブログではない普通のサイトのように稼動する
⇒つまり、「ホーム」がトップ画面になる
丸で囲んであるURLを確認すると、
このサイトを開いた直下は、作成したナビのTOPページに指定されている
wordpressの基本構造
wordpressはブログ作成ツールなので
・「index.php」…ブログ投稿ページ(通常はこちらは優先される)
・「home.php」…ホーム(TOP)ページ
ブログ投稿ページがメインで生成されてしまう。
なので、カスタムメニューで「home.php」がメインとなるようにカスタマイズする必要がある
注意!!
一度記述ミスなどでエラーを起こすとセッションにエラーが残り
何度修正してもエラー表示が出ることがある。
もしそうなったら、、、
→ログアウトして「xampp」フォルダから作業中フォルダに入り、
外部から削除(function.php)書き直して、ログインし直すしかない。
7、ヘッダー画像を読み込む
カスタムヘッダー覚える!
「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);
この時点ではまだ表示はされない
外観➡ヘッダーを確認すると、上記の記述により画像が拾われているのが分かる
8、ヘッダー画像を表示する
「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; ?>
10、Media encoderの使い方
➡動画の無駄な前後部分をカットできるソフト
画像の枠全体をぼかす方法
メモです
1:全体を選択
2:変形⇒縦横比率固定でw80%にする
3:選択範囲を反転⇒枠組みができる
4:新規レイヤー追加
5:塗りつぶし
6:選択範囲を反転⇒内側の線だけ選択されてる
7:境界線を調整(コントラスト強め)
8:選択範囲を反転
9:最後にまた塗りつぶし
nivo sliderの導入
本日の授業の流れ
2:「power code editor」
プラグイン➡新規追加➡「power code editor」をインストール&有効化するだけで
テーマ編集のコードが色分けされ、見やすくなる
4:はてなダイアリーのエクスポート方法
➡管理画面より、Movable Type形式でエクスポート
※この記事を使ってwordpressサイトをカスタマイズしていきます
➡内容があって初めてカスタマイズできるのがwordpressサイトです
6:nivo slider for wordpressプラグインをインストール&有効化
「nivo slider for wordpress」をインストールしたは良いけど…操作画面が英語なので
1、http://3bee.jp/
3bee.jpのサイト内で「日本語化」と検索する
3、ダウンロードした日本語化プログラム(2枚)を展開して、
作成しているwordpressサイトのフォルダ内の
wp-content➡plugins➡nivo sliderフォルダ内に
展開した2枚のプログラムを格納する
あら不思議、日本語化されて操作しやすくなっています。
スライドさせたい画像をアップロード
※まずはnivo sliderの操作画面のオプションにて、画像サイズを設定
1、Psでサイズを統一した画像達を
wpのnivo sliderの操作画面に1枚ずつ追加していく
2、アップロードした画像はドラッグで全体を選択➡保存(1枚ずつ)
3、またまたオプションの中の詳細オプションで
footerを選択し、
画像の貼り付けコードをget!
4、テーマ編集➡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(); } ?>