2014-08-08

08　ショッピングサイトを作る

プログラミングプログラミング-PHP

【本日のWeb制作学習メモ】

ショッピングサイトを作ってみる

PHPの演習として、ショッピングサイトを作ってみます。

作成ページ（ページ遷移）は以下の通り
1.スタッフ追加画面
2.入力チェック画面
3.スタッフ追加完了画面
4.スタッフ一覧画面
5.スタッフ　ログイン画面
6.ログイン　チェック画面
7.ログアウト画面

【演習】ショッピングサイトを作る

以下、1.～7.のページを作成する

1.スタッフ追加画面

staff_add.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<h1>スタッフ追加</h1>
<form method="post" action="staff_add_check.php">
スタッフ名を追加してください
<input type="text" name="name"><br>
パスワードを入力してください
<input type="password" name="pass"><br>
パスワードをもう一度入力してください
<input type="password" name="pass2"><br>
<input type="button" onClick="history.back()" value="戻る">
<input type="submit" value="OK">
</form>
</body>
</html>

2. 入力チェック画面

staff_add_check.php

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>

<?php
	$staff_name = $_POST['name'];
	$staff_pass = $_POST['pass'];
	$staff_pass2 = $_POST['pass2'];

	$staff_name = htmlspecialchars($staff_name);
	$staff_pass = htmlspecialchars($staff_pass);
	$staff_pass2 = htmlspecialchars($staff_pass2); 

	if(!isset($staff_name)){
		echo "スタッフ名が入力されていません";
	}else{
		echo "スタッフ名：" . $staff_name . "<br>";
	}
	
	if($staff_pass==''){
		echo "パスワードが入力されていません";	
	}

	if($staff_pass != $staff_pass2){
		echo "パスワードが一致しません";	
	}
	if($staff_name == '' || $staff_pass == '' || $staff_pass != $staff_pass2 )
	{ echo '<form>';
	  echo '<input type="button"' . 'onClick="history.back()"' . 'value="戻る">';
	  echo '</form>';
	}else{
		$staff_pass = md5($staff_pass);
		echo '<form method="post"action="staff_add_done.php">';
		echo '<input type="hidden" name="name" value="'.$staff_name.'">';
		echo '<input type="hidden" name="pass" value="'.$staff_pass.'">';
		echo '<input type="button"' . 'onClick="history.back()"' . 'value="戻る">';
		echo '<input type="submit" value="OK">';
		echo '</form>';
	}

?>
</body>
</html>

3. スタッフ追加完了画面

staff_add_done.php

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{
	$staff_name = $_POST['name'];
	$staff_pass = $_POST['pass'];

	$staff_name = htmlspecialchars($staff_name);
	$staff_pass = htmlspecialchars($staff_pass);
//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'INSERT INTO staff(name, password) values(?,?)';
	$stmt = $dbh -> prepare($sql);
	$data[] = $staff_name;
	$data[] = $staff_pass;
	$stmt -> execute($data);
//DB切断
	$dbh = null;

	echo $staff_name;
	echo 'さんを追加しました。';
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
<a href="staff_list.php">戻る</a>
</body>
</html>

4.スタッフ一覧画面

staff_list.php

<!DOCTYPE html>
<html>
<head>
<title>スタッフ一覧</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{

//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'SELECT name FROM staff WHERE 1';
	$stmt = $dbh -> prepare($sql);
	$stmt -> execute();
//DB切断
	$dbh = null;

	echo 'スタッフ一覧<br>';

	while(true){
		$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
			if($rec == false){
				break;
			}
		echo $rec['name'];
		echo '<br>';
	}
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
<a href="staff_list.php">戻る</a>
</body>
</html>

5.スタッフ　ログイン画面

staff_login.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>スタッフ ログイン</title>
<meta charset='utf-8'>
</head>
<body>
<h1>スタッフ ログイン</h1>
<form method="post" action="staff_login_check.php">
スタッフコード<br>
<input type="text" name="code"><br>
パスワード<br>
<input type="password" name="pass"><br>
<input type="submit" value="ログイン">
</form>
</body>
</html>

6.ログイン　チェック画面

staff_login_check.php

<!DOCTYPE html>
<html>
<head>
<title>スタッフ　ログインチェック</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{
	$staff_code = $_POST['code'];
	$staff_pass = $_POST['pass'];
	//var_dump($_POST);
	//exit;

	$staff_code = htmlspecialchars($staff_code);
	$staff_pass = htmlspecialchars($staff_pass);

	$staff_pass = md5($staff_pass);

//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'SELECT name FROM staff WHERE code=? AND password=?';
	$stmt = $dbh -> prepare($sql);
	$data[] = $staff_code;
	$data[] = $staff_pass;
	$stmt -> execute($data);
//DB切断
	$dbh = null;

	$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

	if($rec == false){
		echo 'スタッフコードかパスワードが違います。';
		echo '<a href="staff_login.html">戻る</a>';
	}else{
		header('Location: staff_list.php');
	}
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
</body>
</html>

7.ログアウト画面

staff_logout.php

<?php
  $_SESSION = array();
  if(isset($_COOKIE[session_name()]) == true){
  	setcookie(session_name(),'',time()-42000,'/');
  
  }
  @session_destroy();
?>
<!DOCTYPE html>
<html>
<head>
<title>ログアウト</title>
<meta charset='utf-8'>
</head>
<body>
ログアウトしました。<br>
<a href="staff_login.html"></a>
</body>
</html>

2014-08-07

2014/08/07 ロジックとデザインの分離（送信した値を出力）

プログラミングプログラミング-PHP

【本日のWeb制作学習メモ】

[PHP] ロジックとデザインの分離

PHPをHTMLに組み込む際、ロジックとデザインを分離してコーディングするように配慮する。

理由：
チームで分業の場合など、WEBデザイナーがPHPを理解できるとは限らない。
ソースのわかりやすさも考え、なるべくロジックとデザインは分離する。

index.html
入力値を送信

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<form action="ex2.php" method="POST">
<input type="text" name="t1">
<input type="submit" name="送信"> 
</form>
</body>
<html>

送信先ページで値を出力
ex2.php（修正前）

<?php
///税込の金額を表示
function t($money){
  echo $money * 1.08;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<?php 
echo t($_POST['t1']); 
?>
</body>
</html>

ex2.php（修正後）

原則bodyの中には出力結果のみとする
（ロジックとデザインの分離）

<?php
//税込の金額を表示
function t($money){
  return $money * 1.08;
  //echo $money * 1.08;
}
//$moneyへ税込金額を代入
$money = t($_POST['t1']);
?>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<h1>
<?php echo $money; ?>
</h1>
</body>
</html>

参考サイト

【ロジックとデザインの分離について】

こちらのサイトにも説明があります。
ブログを作る - PHP入門 - ポンクソフト :
http://ponk.jp/php/basic/blog

Smarty - ロジックとデザインの分離を考えるならこんなテンプレートエンジンを使うのも一つです

テンプレートエンジンでロジックとレイアウトを分離する（Smarty）［PHP］ - Build Insider :
http://www.buildinsider.net/web/bookphplib100/040

【プログラム未経験からECサイトを作ってみるなら】

以下の2サイトが参考になるかも

codezine.jp

ブログを作る - PHP入門 - ポンクソフト

2014-08-01

その後のWeb制作活動について

日記

2014年7月に制作科受講終了以後の活動について、

その後の活動は、「まだまだ続くよ…」でと告知していましたが、
やっぱり引き続きこちらで続きを投稿します。

引き続きよろしくお願いいたします。

2014-08-01

はじめに

日記

f:id:sntkk3:20151123160451j:plain

改めまして

求職者支援訓練後も続く、My Web道…

Web制作に関する学習メモを公開していきます。

2014-07-25

2014/07/25　修了日

日記

修了日を迎えて…

6ヶ月に及ぶWeb制作科の授業が終了しました。

毎日9時から14：25までの5コマの授業、
開始当初は結構長いと思われた6ヶ月は、始まってしまえば、あっという間の6ヶ月でした。

修了後、Web制作に関わるのか、全然違う職場に行くのかは、人それぞれ。
どちらかと言うと、Webの現場に行かない修了生の方が半分以上を占めるのが現実です。
（少なくとも、今期生については、そうでした。）

私自身も、現時点でWeb制作会社への就業目処は立っておりません。
（とりあえず、翌月から3ヶ月は、ここの会社説明会に来ていた制作会社で、
より専門的なWeb制作の勉強をさせていただくことになっておりますが。
なので、その間に、自分が納得できる、次の就業先を決める予定です。）

それでも、この間、この場で学んだことは本当に大きかった。

Webデザインからプログラムまで、毎日てんこ盛り、
この年にして、本当に勉強漬けの忙しい日々でした。

たとえ、今後Web制作の仕事には関わらなくとも、
デザインの考え方や、プログラム的思考など、この場を通じて培った知識・考え方は、
今後の仕事や生活に、大いに活きるものと実感しています。

国の制度により与えられた、非常にありがたくて、貴重な機会、
ただし、機会は与えていただいても、自分で努力をしなければ何も得られないのも事実。

この期間が、たったの6ヶ月になるのか、その後の自分の人生を変える、かけがえのない6ヶ月になるのかは、
本当に自分次第であると思いました。

Web制作科修了に伴い、
このブログは、このページにて終了となりますが、引き続き、Web制作に関する学習記録は続けます。

以後、「まだまだ続くよ　My Web道」にてブログ続行予定です。

私の奮闘は、まだまだ続きます。

2014-07-19

Bootstrap サイトにメールフォームを作成

フレームワークフレームワーク-Bootstrap Webデザイン Webデザイン-機能-メールフォーム Webデザイン-機能

f:id:sntkk3:20170814211805j:plain

Bootstrapテンプレートで作成したサイトに、
メールフォームを設置しました。

《index.php》

以下を、htmlの直前に記述

<?php 
require_once(dirname(__FILE__)).'/init.php';
//require_once 'init.php';

$name = '';
$email = '';
$tel = '';
$message = '';
if(isset($_SESSION['mail_data'])) {
  $name = $_SESSION['mail_data']['name'];
  $email = $_SESSION['mail_data']['email'] ;
  $tel = $_SESSION['mail_data']['tel'] ;
  $message = $_SESSION['mail_data']['message']; 
}
?>

《index.php》お問い合わせフォーム

<div id="contact">
    
    <h1>Contact</h1>
<form action="check.php" method="post" id="mailform">
<table>
<tr>
<th><label for="name">お名前:&nbsp;&nbsp;<em>※</em></label></th>
<td><input type="text" name="name" id="name" size="30" placeholder="例：鈴木一郎" value = "<?php echo h($name); ?>" ></td>
</tr>
<tr>
<th><label for="email">email:&nbsp;&nbsp;<em>※</em>&nbsp;&nbsp;</label></th>
<td><input type="text"  name="email" id="email" size="30" placeholder="例：sample@sample.com" value ="<?php echo h($email); ?>"></td>
</tr>
<tr>
<th><label for="tel">お電話番号:</label></th>
<td><input type="text" name="tel" id="tel" size="30" placeholder="例：123-4567-8910(半角数字)" value ="<?php echo h($tel); ?>"></td>
</tr>
<tr>
<th><label for="message">お問い合わせ:&nbsp;&nbsp;<em>※</em></label></th>
<td><textarea name="message" id="message" cols="30" rows="5" placeholder="お仕事のご依頼・お問い合わせ"><?php echo h($message); ?></textarea></td>
</tr>
<tr><th></th><td><input type="submit" class="btn" value="確認"></td></tr>
</table>

</form>
    
</div>

《init.php》

<?php
function h($str) {
 return htmlspecialchars($str, ENT_QUOTES, "UTF-8");	
}
header('X-Frame-OPTIONS:DENY');
ob_start();
session_start();
session_regenerate_id(true);

《check.php》

<?php 
require_once(dirname(__FILE__)).'/init.php';
//require_once 'init.php';

//空データチェック
//データがなければ先頭（入力）ページに戻す
if(empty($_POST)) {
  header('Location:index.php');
  exit;	
}

//var_dump($_POST);
//print_r($_POST);
$name = $_POST['name'];
$email = $_POST['email'];
$tel = $_POST['tel'];
$message = $_POST['message'];
$error = true;
//echo '('.$name.')';
$name_error = '';
$email_error = '';
$tel_error = '';
$message_error = '';


if( mb_strlen($name) > 30 ) {
  $name_error = 'お名前の入力文字数が多すぎます。';
  $error = false;	
}
//受け取れるメールアドレスの限界値は320
//ローカルパート(@の前は64文字）
if( mb_strlen($email) > 50 ) {
  $email_error = 'メールアドレスの入力文字数が多すぎます。';
  $error = false;	
}

//

if( mb_strlen($tel) > 13 ) {
  $tel_error = '電話番号の入力文字数が多すぎます。';
  $error = false;	
} 

if( mb_strlen($message) > 128 ) {
  $message_error = 'お問い合わせ内容の入力文字数が多すぎます。';
  $error = false;	
}

//メールアドレス@チェック
if(strpos($email,'@')===false) {
  $email_error = '不正なメールアドレスです。';
  $error = false;	
}

//半角入力チェック（email）
if(strlen($email) !==mb_strlen($email, "UTF-8")){
	$email_error = 'すべて半角数字で入力してください。';
	$error = false;
} 

//半角入力チェック（電話番号）
if(strlen($tel) !==mb_strlen($tel, "UTF-8")){
	$tel_error = 'すべて半角数字で入力してください。';
	$error = false;
} 

//空文字チェック
if($name =='') {
  $name_error = 'お名前が、入力されていません。';
  $error = false;	
}
if($email =='') {
  $email_error = 'メールアドレスが、入力されていません。';
  $error = false;	
}
/*if($tel =='') {
  $tel_error = 'お電話番号が、入力されていません。';
  $error = false;	
}*/
if($message =='') {
  $message_error = 'メッセージが、入力されていません。';
  $error = false;	
}

//エラーチェックをこの直前に挿入(6/5)
$_SESSION['mail_data']['name'] = $name;
//var_dump($_SESSION['mail_data']['name']);
$_SESSION['mail_data']['email'] = $email;
//var_dump($_SESSION['mail_data']['email']);
$_SESSION['mail_data']['tel'] = $tel;
//var_dump($_SESSION['mail_data']['tel']);
$_SESSION['mail_data']['message'] = $message;
//var_dump($_SESSION['mail_data']['message']);
$_SESSION['mail_data']['error'] = $error;
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ確認</title>
<link rel="stylesheet" href="css/stylish-portfolio.css">
<style>
 table {
   /*border-collapse: collapse;*/
 }

</style>
</head>
<body>
<div id="contact">
<h1>お問い合わせ内容（確認画面）</h1>
<table id="frmTbl" border="1px">
<tr>
<th>お名前:</th><td><?php echo h($name).h($name_error); ?></td>
</tr>
<tr>
<th>email:</th><td><?php echo h($email).h($email_error); ?></td>
</tr>
<tr>
<th>お電話番号:</th><td><?php echo h($tel).h($tel_error); ?></td>
</tr>
<tr>
<th>お問い合わせ内容:</th><td><?php echo nl2br(h($message).h($message_error)); ?></td>
</tr>
</table>
<p><a href="index.php">戻る</a>
<?php 
if($error) {
echo '<a href="thanks.php">送信</a>';
}
?>
</p>
</div><!--contact-->
</body>
</html>
<?php ob_end_flush();

《thanks.php》

<?php
require_once(dirname(__FILE__)).'/init.php';
//require_once 'init.php';
//var_dump($_SESSION);
if(!$_SESSION['mail_data']['error']) {
	header('Location:index.php');
	exit;
}

//セッションから値を取得
$name = $_SESSION['mail_data']['name'];
$email = $_SESSION['mail_data']['email'] ;
$tel = $_SESSION['mail_data']['tel'] ;
$message = $_SESSION['mail_data']['message']; 
//$data = $_SESSION['mail_data'];
//var_dump($data);

//セッションを取っておく必要がないのでクリア
$_SESSION['mail_data'] = array();
unset($_SESSION['mail_data']);

if(isset($_COOKIE[session_name()] )) {
setcookie( session_name(), '', time()-42000, '/');	
}
session_destroy(); //セッションを破棄する


//クライアントへのメール送信内容の設定
$to = "XXXXXX@yahoo.co.jp"; //メール送信宛先
$subject = 'お問い合わせ';
$from = $email;
//$body = $name . $email . $tel . $message;

$body = <<< BODY
【お問い合わせメール】

　以下内容で承りました。

　　お名前：　{$name}

　　メールアドレス：　{$email}

　　お電話番号：　{$tel}

　　
　　メッセージ：
　　
　　　{$message}


BODY;

//メールのエンコーディング設定
mb_language('japanese');
mb_internal_encoding('UTF-8');

$r = mb_send_mail($to, $subject, $body);
//var_dump($r);
//mb_send_mail("送信先","表題","本文","ヘッダオプション");
$thanks_message = '上記の内容でお問い合わせメールを承りました。';
if(!$r) {
 $thanks_message = 'メール送信エラー。以下お問い合わせは送信されませんでした。';
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>送信終了</title>
<link rel="stylesheet" href="css/stylish-portfolio.css">
<style>
 th {
   backgroud: #D3D3D3;
 }
</style>
</head>
<body>
<div id="contact">
<h1>送信終了</h1>

<table id="frmTbl" border="1px">
<tr class="small">
<th>お名前:</th>
<td><?php echo h($name); ?></td>
</tr>
<tr class="small">
<th>email:</th>
<td><?php echo h($email); ?></td>
</tr>
<tr class="small">
<th>お電話番号:</th>
<td><?php echo h($tel); ?></td>
</tr>
<tr>
<th>お問い合わせ内容:</th>
<td><?php echo nl2br(h($message)); ?></td>
</tr>
</table>
<p>
<?php
if(!$r) {
  echo '<span>'.h($thanks_message).'</span>';
} else {
  echo h($thanks_message);	
}
?>
</p>
<p id="sbubutton"><a href="index.php">戻る</a></p>
</div><!--contact-->
</body>
</html>
<?php ob_end_flush();

2014-07-15

7/15 Portfolio 制作に向けて (2)

Portfolio

本日の授業テーマ

Portfolio制作に向けて

本日の授業内容

プログラマー志望の場合のアプローチは？

プログラムを公開する

以下のサイトを活用する

jsdo.it - Share JavaScript, HTML5 and CSS :
http://jsdo.it/

ポートフォリオ制作に向けて

ポートフォリオ制作時のポイント

ポートフォリオに記載すること

1. 自己紹介
自分は何者なのか？何ができるのかをわかりやすく完結に紹介します。
あまりダラダラ書いても読まれない確率が高いため、大きめのフォント・短い文章で紹介すると効果的です。
経歴・スキルをわかりやすく記載

（例）

はじめまして。
○○○○○と申します。
本サイトは、WEBクリエイターとしての就業を目指す、
○○○○○のポートフォリオサイトです。

2. アピール時のポイント

「自分はWebデザイナー」という事をはっきり書く
自分ができることをわかりやすく表記。
Photoshop, Illustrator, HTML, CSS, Flash, WordPress, SEOなどなど
どこに住んでいるか？
実務経験があれば年数、書ければ会社名を
学校に行った人は行った期間、書ければ学校名を
履歴書をアップロードしてもOK（個人情報漏れすぎ注意）
過去に受賞した賞や掲載された雑誌があれば紹介する

ポートフォリオ制作時に参考にしたいサイト

http://ameblo.jp/illust-biz/entry-11353638641.html
↑
以下に移転したようです　↓

イラストレーターの仕事とは？ - イラストで家を建てました。イラストレーターの仕事術 :
http://www.enpiz.org/

www.webcreatorbox.com

webポートフォリオを制作する時のポイント、参考サイト、デザイン | ポケットラボ :
http://nh-lab.com/web-portfolio-create-poin/

WEBクリエイターを目指すクラカタジュンペイのポートフォリオサイト :
http://www.peiiiii.sakura.ne.jp/portfolio/

Index of / :
http://030sk.org/portfolio

受講生サイト

Webポートフォリオサイト「webgaku」 :

http://webgaku.net/

http://webgaku.net/#!prettyPhoto

[ Tips ] lightbox系プラグイン

jQuery「prettyPhoto」でおしゃれに画像を拡大表示する使い方【lightbox系】 | ウェブマスターがウェブのことを書いたら

rapidweaverfan.net

webgaku.hateblo.jp

2014-07-14

7/14 Portfolio 制作に向けて (1)

Portfolio

本日の授業テーマ

Portfolio制作に向けて

ポートフォリオ制作に向けての学習メモ

本日の授業内容

[Tips] マウスオーバー

hoverがうまくいかないときに参考にしたいサイト

hover疑似クラスは宣言順序に注意が必要です - Web標準普及プロジェクト

http://www.mozilla.gr.jp/standards/webtips0012.html

ロールオーバーの実装

[ 参考サイト一覧 ]
オンズ » 【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。 :
http://on-ze.com/archives/1516

jQuery Easy Rollover :
http://y-kogawa.github.io/snippet/JavaScript/jquery.easy-rollover/

今すぐ使いたい！jQueryマウスオーバーエフェクトまとめ - NAVER まとめ :
http://matome.naver.jp/odai/2137181527906055501

[Tips] 画像の修正

シャドウ・ハイライト

逆光で影になった暗い部分を明るくしたり、ハイライトになっている明るい部分を暗くしたり、
画像の明暗を調整することができる機能です。

以下サイトが参考になります。

[参考サイト]
Photoshop ヘルプ | シャドウとハイライトのディテールの調整 :
https://helpx.adobe.com/jp/photoshop/using/adjust-shadow-highlight-detail.html

上級者も使える「シャドウ・ハイライト」 | Photoshop 色調補正ゼミナール | Shuffle by COMMERCIAL PHOTO :
http://shuffle.genkosha.com/software/photoshop_navi/color/8526.html

アンシャープマスク

ピンぼけを直すのに役立ちます。

料理写真などで、ツヤ、テカリを強調するのにも役立ちます。　

[参考サイト]
フォトショップ：アンシャープマスクの使い方 : Retouch WebLaboratory :
http://retouch-weblab.com/photo/usm/

3.9. アンシャープマスク... :
https://docs.gimp.org/ja/plug-in-unsharp-mask.html

1-（4）アンシャープマスク | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive - :
http://www.mdn.co.jp/di/articles/553/?page=6

階層構造のリスト

階層構造の箇条書きをページに入れたい時に参考になります。

[参考サイト]
2/4 クリックで深い階層が現れるリストの作り方 [ホームページ作成] All About :
http://allabout.co.jp/gm/gc/377237/2/

その他

初心者が習熟すべきスキル

[ HTML/CSS ハンドコーディング ]

企業サイトのマークアップ経験
デザインカンプからマークアップ経験
CSSトラブルシューティング経験

【無料レンタルサーバー】

ここがおススメのサーバーだそう
Xdomain（エックスドメイン）サーバー
www.xdomain.ne.jp

【長所】
・大量アクセスに強い
・WordPressの簡単インストールが可能
など

【 PR 】

なお、お申し込みの際のリンクが分かりづらいので、以下補足します。

【申し込み手順】
1. トップページより以下赤枠部分のリンクをクリックします。
f:id:sntkk3:20151213204544p:plain

2. 以下赤枠部分のリンクをクリックします。
f:id:sntkk3:20151213204612p:plain

3. メールアドレスの登録を行います。
f:id:sntkk3:20151213205005p:plain

4. 登録したメールアドレスに、
「【Xdomain】お申し込みメールアドレスの確認」メールが届いたら。
　お申し込みURLから、会員登録手続きを行います。

5. 申し込みフォームに必要事項を入力し、登録を完了させます。

6. 「【Xdomain】■重要■会員登録完了のお知らせ」メールが届いたら申し込み完了です。

2014-06-27

6/27　[PHP/SQL] データベース（DELETE / UPDATE）

受講ノートプログラミングプログラミング-PHP 受講ノート-PHP

本日の授業テーマ

[PHP] データベース（登録内容削除）
[PHP] データベース（登録内容修正）

本日の学習内容

[PHP] データベース（登録内容削除）

SQLでデータを削除する(DELETE文)

SQLでテーブルからデータを削除するには？

DELETE FROM `items` WHERE `item_code`=1;

昨日の削除確認画面に続き、
本日はデータ削除を実行する処理を追加します。

商品削除実行(delete_fin.php)

[処理内容]
1. ログイン状態をチェック
2. セッション情報を削除
3. データベース接続
4. SQL実行（テーブルから指定データを削除）
5. 登録商品一覧画面に戻る

[ソース]

<?php
require_once(dirname(__FILE__)).'/init.php';
//ログインチェック
if(!$_SESSION['login_data']['error']){
 header('Location:index.html');
 exit;
}
$item_code=$_SESSION['items_data']['item_code'];
//セッション情報（delete_data）を削除
$_SESSION['items_data'] = array();
unset($_SESSION['items_data']);
//データベース接続
try{
//DB_HOST localhost
$dsn = 'mysql:dbname='.DB_NAME.'; host=localhost; charset=utf8;';
$db_user = DB_USER; //DB_USER
$db_pass = DB_PASS;//DB_PASS
$dbh = new PDO($dsn,$db_user, $db_pass);
}catch (Exception $e){
print 'システムエラーが発生しました';
exit;
}
$sql = 'DELETE FROM items WHERE item_code =:item_code;';
$stmt = $dbh -> prepare($sql);
$stmt -> bindParam(':item_code', $item_code);
$stmt -> execute();
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
//登録商品画面に戻る
header('Location:item_list.php');

[PHP] データベース（登録内容修正）

SQLでデータを修正する(UPDATE文)

SQLでテーブルのデータを修正するには？

UPDATE items SET item_name=:item_name, item_price=:item_price WHERE item_code=:item_code;

登録内容修正画面(update.php)

<?php
require_once dirname(__FILE__).'/init.php';
if(!$_SESSION['login_data']['error']){
header('Location:index.html');
exit;
}
//変数の初期化
$item_name = '';
$item_price = '';
//可変変数($_GETで受け取った値を取得し変数に設定)
foreach($_GET as $k => $v) {
  $$k = $v;
}

//データベース接続
try{
//DB_HOST  localhost 
$dsn = 'mysql:dbname='.DB_NAME.'; host=localhost; charset=utf8;';
$db_user = DB_USER; //DB_USER
$db_pass = DB_PASS;//DB_PASS
$dbh = new PDO($dsn,$db_user, $db_pass);
}catch (Exception $e){
 print 'システムエラーが発生しました';
 exit;
}

$sql= 'SELECT * FROM items WHERE item_code =:item_code;';
$stmt = $dbh -> prepare($sql);
$stmt -> bindParam(':item_code', $item_code);
$stmt -> execute();
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
$item_name=$rec['item_name'];
$item_price=$rec['item_price'];
$_SESSION['items_data']['item_code'] =$_GET['item_code'];
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>登録内容修正</title>
</head>
<body>
<h1>登録内容修正</h1>
<a href="logout.php">ログアウト</a>
<form action="update_confirm.php" method="POST">
<table border="1">
<tr>
<th><label for="item_name">商品名</label></th>
<td><input type="text" name="item_name" id="item_name" value="<?php echo $item_name ?>"></td>
</tr>
<tr>
<th><label for="item_price">価格</label></th>
<td><input type="text" name="item_price" id="item_price" value="<?php echo $item_price ?>"></td>
</tr>
</table>
<input type="submit" value="確認"><br>
</form>
<a href="item_list.php">登録商品一覧</a>
</body>
</html>

登録内容修正確認画面(update_confirm.php)

<?php
require_once(dirname(__FILE__)).'/init.php';
//ログイン状態チェック
if(!$_SESSION['login_data']['error']){
     header('Location:index.html');
     exit;
}
//可変変数($_POSTで受け取った値を取得し変数に設定)
foreach($_POST as $k => $v) {
  $$k = $v;     
}
$item_code=$_SESSION['items_data']['item_code'];
//var_dump($_POST);
//$error = true;

//POSTで受け取った値をSESSIONに設定
foreach($_POST as $k => $v) {
  $_SESSION['items_data'][$k] = $v;     
}
$_SESSION['items_data']['error'] = $error;
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新規商品登録確認</title>
</head>
<body>
<h1>新規商品登録確認</h1>
<a href="logout.php">ログアウト</a>
<table>
<tr>
<th>商品名:</th>
<td><?php echo h($item_name); ?></td>
</tr>
<tr>
<th>価格:</th>
<td>
<?php 
echo h($item_price); 
if($item_price!=="") {
echo '円';     
}
//echo h($item_price_error);
?>
</td>
</tr>
</table>
<!--<p><a href="update.php">修正画面に戻る</a>-->
<?php
echo '<a href="update.php?item_code=' .$item_code.'">戻る</a>';
if($error) {
echo '<a href="update_fin.php">修正実行</a>';
}
?>
</p>
</body>
</html>

登録内容修正実行(update_fin.php)

<?php
require_once(dirname(__FILE__)).'/init.php';
//require_once 'init.php';
//ログインチェック
if(!$_SESSION['login_data']['error']){
     header('Location:index.html');
     exit;
}
if(!$_SESSION['items_data']['error']) {
     header('Location:update.php');
     exit;     
}
//SESSIONにある値を取得

foreach($_SESSION['items_data'] as $k => $v) {
  $$k = $v;     
}

//セッション情報（items_data）を削除
$_SESSION['items_data'] = array();
unset($_SESSION['items_data']);

//データベース接続
try{
//DB_HOST  localhost     
$dsn = 'mysql:dbname='.DB_NAME.'; host=localhost; charset=utf8;';
$db_user = DB_USER; //DB_USER
$db_pass = DB_PASS;//DB_PASS
$dbh = new PDO($dsn,$db_user, $db_pass);
}catch (Exception $e){
print 'システムエラーが発生しました';
exit;
}

//SQL実行（テーブルに値を追加）
$sql ='UPDATE items SET item_name=:item_name, item_price=:item_price WHERE item_code=:item_code;';
$stmt = $dbh -> prepare($sql);
$stmt -> bindParam(':item_name', $item_name);
$stmt -> bindParam(':item_price', $item_price);
$stmt -> bindParam(':item_code', $item_code);
$stmt -> execute();
header('Location:item_list.php');
exit;

f:id:sntkk3:20140623215325g:plain 【参考】CRUDとは？
http://e-words.jp/w/CRUD.html

2014-06-26

6/26　[PHP/SQL] データベース (INSERT / DELETE)

受講ノート-PHP 受講ノート-SQL 受講ノート受講ノート-SQL-MySQL プログラミングプログラミング-SQL プログラミング-PHP プログラミング-SQL-MySQL

本日の授業テーマ

[PHP] データベース
- 新規商品登録 (INSERT)
- 登録商品削除 (DELETE)

本日の学習内容

[PHP] データベース（前回のおさらい）

ここまでの処理の流れを確認（ログインから新規商品登録完了まで）

f:id:sntkk3:20140628094317p:plain

新規商品登録確認画面 (entry_confim.php)

[処理内容]
1. ログイン状態をチェック

if(!$_SESSION['login_data']['error']){ header('Location:index.html');
 exit;
}

2. $_POSTで送信された値を変数に格納（可変変数を使用）

foreach($_POST as $k => $v) {
 $$k = $v;
}

3. エラーチェックを実行（エラーフラグにtrueを設定）
3.1.エラー判定用変数を初期化
3.2.エラーフラグにtrueを設定
3.3. 文字列長チェック（エラーならエラーフラグにfalseを設定）

if( mb_strlen($item_name, 'utf-8') > 30 ) {
 $item_name_error = '商品名が長すぎます。';
 $error = false;
}
if(($item_price) > 10000000 ) {
 $item_price_error = '価格が大きすぎます。';
 $error = false;
}

3.4. 空文字チェック（エラーならエラーフラグにfalseを設定）

//空文字チェック
if($item_name =='') {
 $item_name_error = '商品名が入力されていません。';
 $error = false;
}
if($item_price =='') {
 $item_price_error = '価格が入力されていません。';
 $error = false;
}

4. $_POSTで受信した値をセッションに設定

foreach($_POST as $k => $v) {
 $_SESSION['entry_data'][$k] = $v;
}
$_SESSION['entry_data']['error'] = $error;

5. セション情報のerrorにエラーフラグの値を設定
6. 登録確認画面を表示

[ソース]

<?php
require_once(dirname(__FILE__)).'/init.php';
//ログイン状態チェック
if(!$_SESSION['login_data']['error']){
 header('Location:index.html');
 exit;
}
//可変変数($_POSTで受け取った値を取得し変数に設定)
foreach($_POST as $k => $v) {
 $$k = $v;
}
//エラーチェック実行
$item_name_error = '';
$item_price_error = '';
$error = true;
//文字列長チェック
if( mb_strlen($item_name, 'utf-8') > 30 ) {
 $item_name_error = '商品名が長すぎます。';
 $error = false;
}
if(($item_price) > 10000000 ) {
 $item_price_error = '価格が大きすぎます。';
 $error = false;
}
//空文字チェック
if($item_name =='') {
 $item_name_error = '商品名が入力されていません。';
 $error = false;
}
if($item_price =='') {
 $item_price_error = '価格が入力されていません。';
 $error = false;
}
//POSTで受け取った値をSESSIONに設定
foreach($_POST as $k => $v) {
 $_SESSION['entry_data'][$k] = $v;
}
$_SESSION['entry_data']['error'] = $error;
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新規商品登録確認</title>
</head>
<body>
<h1>新規商品登録確認</h1>
<a href="logout.php">ログアウト</a>
<table>
<tr>
<th>商品名:</th>
<td><?php echo h($item_name); echo h($item_name_error); ?></td>
</tr>
<tr>
<th>価格:</th>
<td>
<?php
echo h($item_price);
if($item_price!=="") {
echo '円';
}
echo h($item_price_error);
?>
</td>
</tr>
</table>
<p><a href="entry.php">戻る</a>
<?php
if($error) {
echo '<a href="entry_fin.php">新規商品登録実行</a>';
}
?>
</p>
</body>
</html>

商品登録実行 (entry_fin.php)

[処理内容]
1. ログイン状態をチェック
2. エントリー状態をチェック
3. セッションにある値を取得し、変数に格納
4. セッション情報（entry_data）を削除
5. データベース接続
6. SQL実行（テーブルに値を追加）
7. 処理実行後、登録商品一覧画面に戻る

[ソース]

<?php
require_once(dirname(__FILE__)).'/init.php';
//require_once 'init.php';
//ログインチェック
if(!$_SESSION['login_data']['error']){
 header('Location:index.html');
 exit;
}
if(!$_SESSION['entry_data']['error']) {
 header('Location:entry.php');
 exit;
}
//SESSIONにある値を取得
foreach($_SESSION['entry_data'] as $k => $v) {
 $$k = $v;
}
//セッション情報（entry_data）を削除
$_SESSION['entry_data'] = array();
unset($_SESSION['entry_data']);
//データベース接続
try{
//DB_HOST localhost
$dsn = 'mysql:dbname='.DB_NAME.'; host=localhost; charset=utf8;';
$db_user = DB_USER; //DB_USER
$db_pass = DB_PASS;//DB_PASS
//$db_user = 'root';
//$db_pass = 'root';
$dbh = new PDO($dsn,$db_user, $db_pass);
}catch (Exception $e){
print 'システムエラーが発生しました';
exit;
}
//SQL実行（テーブルに値を追加）
$sql = 'INSERT INTO items (item_name, item_price) VALUES(:item_name,:item_price);';
$stmt = $dbh -> prepare($sql);
$stmt -> bindParam(':item_name', $item_name);
$stmt -> bindParam(':item_price', $item_price);
$stmt -> execute();
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
//追記
if($error) {
 header('Location:item_list.php');
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>登録確認画面</title>
</head>
<body>
</body>
</html>

商品削除確認画面 (delete_confim.php)

[処理内容]
1. ログイン状態をチェック
2.$_GETで受信値を変数に格納（可変変数を使用）
3.データベース接続
4.SQL実行（テーブルから値を選択）
5. 削除確認画面を表示

[ソース]

<?php
//var_dump($_GET);
require_once(dirname(__FILE__)).'/init.php';
//ログインチェック
if(!$_SESSION['login_data']['error']){
 header('Location:index.html');
 exit;
}
//可変変数($_GETで受け取った値を取得し変数に設定)
foreach($_GET as $k => $v) {
 $$k = $v;
}
try{
//DB_HOST localhost
$dsn = 'mysql:dbname='.DB_NAME.'; host=localhost; charset=utf8;';
$db_user = DB_USER; //DB_USER
$db_pass = DB_PASS;//DB_PASS
$dbh = new PDO($dsn,$db_user, $db_pass);
}catch (Exception $e){
print 'システムエラーが発生しました';
exit;
}
$sql= 'SELECT * FROM items WHERE item_code =:item_code;';
$stmt = $dbh -> prepare($sql);
$stmt -> bindParam(':item_code', $item_code);
$stmt -> execute();
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

$_SESSION['items_data']['item_code']=$_GET['item_code'];
//$error = true;
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>商品削除確認</title>
</head>
<body>
<h1>商品削除確認</h1>
<a href="logout.php">ログアウト</a>
<table>
<tr>
<th>商品名:</th>
<td><?php echo h($rec['item_name']); ?></td>
</tr>
<tr>
<th>価格:</th>
<td>
<?php echo h($rec['item_price']);
if($rec['item_price']!==""){
 echo '円';
}
?></td>
</tr>
</table>
<p>
<?php
//if($error) {
echo '<a href="delete_fin.php">商品削除実行</a>';
//}
?>
<br><br>
<a href="item_list.php">登録商品一覧へ戻る</a></p>
</body>
</html>

2014-06-25

6/25 [CSS3] 確認テスト/ 入力フォーム

受講ノート

本日の学習課題

[CSS3] 確認テスト
入力フォーム

本日の学習内容～まとめと感想～

[CSS3] 確認テスト（演習ドリル10）

以下、昨日の確認テストで学んだ内容の復習テストです。

問題

【01】CSS3で影をつける場合のプロパティ名を書きなさい

答え：
box-shadow
text-shadow

参照：
box-shadow
http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

【02】CSS3で影をつける場合、プロパティに設定する4つのパラメータのうち、1つ目のパラメータは何を設定するか書きなさい

答え：
X軸方向（横方向）のずれの距離

【03】CSS3で角を丸くする場合の、プロパティ名を書きなさい

答え：
border-radius

【04】CSS3で角を丸くする場合の、値は何を設定しているかを書きなさい

答え：
角を丸くする円の半径

【05】Chromeとサファリのベンダープレフィックスを書きなさい

答え：
-webkit-

参照：
ベンダープレフィックス
 http://www.htmq.com/csskihon/603.shtml

※クライアントがIEで閲覧したいという場合、基本CSS３は使わない

【06】CSS3で直線的なグラデーションをつける場合の、プロパティを書きなさい（ベンダープレフィックスは、記述しない）

答え：
background-image: linear-gradient()

【07】半透明の表現をするには、対象の要素に対してどの関数を設定すればよいか書きなさい

答え：
rgba()

参照：
rgba()
http://www.htmq.com/css3/rgba.shtml

フラットデザインの際は、rgba()で指定する（16進数は使わない）
※フラットデザインは、色が重なっているイメージ

【08】CSS3で要素を回転して表示する設定を書きなさい

答え：
transform:rotate

【09 】次のスタイルは、どのような設定か説明しなさい

tr:nth-of-type(even){background-color:#F3F3F3;}

答え：
偶数行の背景色に#F3F3F3の色を設定する

【10】CSS3で直線的を表すプロパティの一部はどんな単語を書けば良いか答えなさい

答え：
linear

入力フォーム

【自身　習作】
f:id:sntkk3:20140920223524p:plain

《ソース》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>確認テスト：フォーム</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<form action="check.php" method="post">
<table>
<tr>
<th class="rq"><label for="name">お名前&nbsp;&nbsp;<span>（必須）</span></label></th>
<td><input type="text" name="name" id="name" size="30" maxlength="30" class="text1" placeholder ="例：山田 太郎" autofocus required></td>
</tr>
<tr>
<th><label for="zip">郵便番号</label></th>
<td><input type="text" name="zip1" id="zip1" size="3" maxlength="3" class="text2" placeholder="100">-
<input type="text" name="zip2" id="zip2" size="4" maxlength="4" class="text2" placeholder="0001">
</td>
</tr>
<tr>
<th><label for="state">都道府県</label></th>
<td><select name="state">
<option value="" selected="selected">選択してください</option>
<optgroup label="北海道・東北">
<option value="Hokkaido">北海道</option>
<option value="Aomori">青森県</option>
<option value="Iwate">岩手県</option>
<option value="Akita">秋田県</option>
<option value="Miyagi">宮城県</option>
<option value="Yamagata">山形県</option>
<option value="Fukushima">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="Ibaraki">茨城県</option>
<option value="Tochigi">栃木県</option>
<option value="Gunma">群馬県</option>
<option value="Saitama">埼玉県</option>
<option value="Chiba">千葉県</option>
<option value="Tokyo">東京都</option>
<option value="Kanagawa">神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option value="Niigata">新潟県</option>
<option value="Toyama">富山県</option>
<option value="Ishikawa">石川県</option>
<option value="Fukui">福井県</option>
<option value="Yamanashi">山梨県</option>
<option value="Nagano">長野都</option>
<option value="Gifu">岐阜県</option>
<option value="Shizuoka">静岡県</option>
<option value="Aichi">愛知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="Mie">三重県</option>
<option value="Shiga">滋賀県</option>
<option value="Kyoto">京都府</option>
<option value="Osaka">大阪府</option>
<option value="Hyogo">兵庫県</option>
<option value="Nara">奈良県</option>
<option value="Wakayama">和歌山県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="Tokushima">徳島県</option>
<option value="Kagawa">香川県</option>
<option value="Okayama">岡山県</option>
<option value="Hiroshima">広島県</option>
<option value="Kochi">高知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="Fukuoka">福岡県</option>
<option value="Saga">佐賀県</option>
<option value="Nagasaki">長崎県</option>
<option value="Kumamoto">熊本県</option>
<option value="Oita">大分県</option>
<option value="Kagoshima">鹿児島県</option>
<option value="Okinawa">沖縄県</option>
</optgroup>
<option value="Oversea">日本国外</option>
</select>
</td>
</tr>
<tr>
<th><label for="city">市区町村</label></th>
<td><input type="text" name="city" id="city" size="90" maxlength="50" class="text3"  placeholder="例：豊島区池袋東池袋１－１－１"></td>
</tr>
<tr>
<th><label for="bldg">アパート・マンション名</label></th>
<td><input type="text" name="bldg" id="bldg" size="90" maxlength="50" class="text3" placeholder="例：パークマンション401号"></td>
</tr>
<tr>
<th class="rq"><label for="email">E-Mailアドレス&nbsp;&nbsp;<span>（必須）</span></label></th>
<td><input type="email" name="email" id="email" size="90" maxlength="50"  class="text3" placeholder = "例：felica@co.jp" required></td>
</tr>
<tr>
<th class="rq"><label for="category">お問い合わせの種類&nbsp;&nbsp;<span>（必須）</span></label></th>
<td><input type="radio" name="category" id="category" value="1" required>このサイトについてのお問い合わせ<br>
<input type="radio" name="category" id="category" value="2">弊社の業務内容についてのお問い合わせ<br>
<input type="radio" name="category" id="category" value="3">その他のお問い合わせ<br>
</td>
</tr>
<tr>
<th class="rq">お問い合わせ内容&nbsp;&nbsp;<span>（必須）</span></th>
<td><textarea name="message" id="message" cols="80" rows="40" class="text4" placeholder="お問い合わせ内容を入力してください。" required></textarea></td>
</tr>
</table>
<div id="btn">
<input class="btn" type="submit" value="確認画面へ">
</div>
</form>
</div>
</body>
</html>

@charset "utf-8";
/* reset */
html, body, div, table, tr, th, td, p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-family:
  "Hiragino Kaku Gothic ProN";
  Meiryo,
  sans-serif;
  font-size: 16px;
}

#container {
  margin: 20px;
  width: 900px;
}

table {
  border-collapse: collapse;  
}
th, td {
  width: 300px;
  padding: 10px;
  border-top: 1px solid #DDDDDD;
  
}
th {
  border-left: 5px solid #CCCCCC;
  background: #F3F3F3;
}
th.rq {
    border-left: 5px solid red;
}
th span {
  color: red;
  font-size: 14px;
}
#btn {
  padding: 10px 0px;
  text-align:center;
}
.btn {
  padding: 5px 20px;
  border-radius: 20px;
}

コメント：

セレクトボックス（プルダウン）でのoptgroupを習得
必須を示す文字部分にemタグを使用する

　自身では、spanタグで設定してましたが、以後うまく使っていけるようにしたい

em 見栄えの強調だけでなく、意味を付加したい場合に適している。
spanは汎用性が強すぎる傾向なうえ、見栄えだけの強調となるため、
span よりemをうまく使うと効果的。

==========================

【講師見本コーディング例】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームのスタイルを設定する</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="check.php" method="post" id="inquiry">
<table>
<tr>
<th scope="row" class="must"><label for="name">お名前<em>（必須）</em></label></th>
<td><input type="text" name="name" id="name" size="30" class="text1" placeholder="例：鈴木一郎" autofocus required></td>
</tr>
<tr>
<th scope="row"><label for="postcode1">郵便番号</label></th>
<td>
<input type="text" name="postcode1" id="postcode1" size="3" maxlength="3" class="text2" placeholder="123">
-
<input type="text" name="postcode2" id="postcode2" size="4" maxlength="4" class="text2" placeholder="4567">
</td>
</tr>
<tr>
<th scope="row"><label for="prefecture">都道府県</label></th>
<td>
<select name="prefecture" id="prefecture">
<option value="" selected="selected">選択してください</option>
<optgroup label="北海道・東北地方">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国地方">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国地方">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州地方">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
<option value="日本国外">日本国外</option>
</select>
</td>
</tr>
<tr>
<th scope="row"><label for="address1">市区町村・番地</label></th>
<td><input type="text" name="address1" id="address1" size="56" class="text3" placeholder="例：豊島区池袋南池袋３－７－９"></td>
</tr>
<tr>
<th scope="row"><label for="address2">アパート・マンション名</label></th>
<td><input type="text" name="address2" id="address2" size="56" class="text3" placeholder="例：スカイマンション101号"></td>
</tr>
<tr>
<th scope="row" class="must"><label for="email">E-Mailアドレス<em>（必須）</em></label></th>
<td><input type="email" name="email" id="email" size="56" class="text3" placeholder="例：xxx@xxx.com" required></td>
</tr>
<tr>
<tr>
<th scope="row" class="must">お問い合わせの種類<em>（必須）</em></th>
<td>
<input name="category" id="category1" type="radio" value="このサイトについてのお問い合わせ" required>
<label for="category1">このサイトについてのお問い合わせ</label><br>
<input name="category" id="category2" type="radio" value="弊社の業務内容についてのお問い合わせ">
<label for="category2">弊社の業務内容についてのお問い合わせ</label><br>
<input name="category" id="category3" type="radio" value="その他のお問い合わせ">
<label for="category3">その他のお問い合わせ</label>
</td>
</tr>
<tr>
<th scope="row" class="must"><label for="content">お問い合わせ内容<em>（必須）</em></label></th>
<td><textarea name="content" id="content" cols="40" rows="15" class="text4" placeholder="お問い合わせ内容を入力してください。" required></textarea></td>
</tr>
</table>
<div class="submit"><input type="submit" value="確認画面へ"></div>
</table>
</form>
</body>
</html>

@charset "UTF-8";

/* reset */
html, body, div, table, tr, th, td, form {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
a {
  text-decoration: none;
}
table {
  border: none;
  border-collapse: collapse;
}

/* body */
body {
  font-size: 14px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #FFF;
}

/* table */
#inquiry {
  width: 600px;
  margin: 50px auto;
}
#inquiry table {
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  font-size: 100%;
  width: 100%;
}
#inquiry td {
  border-top: none;
  border-bottom: 1px solid #CCC;
  border-left: none;
  border-right: none;
  padding: 10px;
}
#inquiry th {
  border-top: none;
  border-bottom: 1px solid #CCC;
  border-left: 6px solid #CCC;
  border-right: none;
  background-color: #F3F3F3;
  font-weight: normal;
  padding: 10px;	
  width: 200px;
}
#inquiry th.must {
  border-left-color: #D90000;
}
#inquiry th em {
  font-style: normal;
  color: #FF0000;
  padding-left: 5px;
}
.text1,.text2,.text3,.text4 {
  border: 1px solid #CCC;
  background-color: #F3F3F3;
  padding: 2px;
}
.text1 {
  width: 100px;
}
.text2 {
  width: 4em;
}
.text3 {
  width: 98%;
}
.text4 {
  width: 98%;
}
#inquiry select {
  border: 1px solid #CCC;
  background-color: #F3F3F3;
}
#inquiry .submit {
  text-align: center;
  margin-top: 30px;
}

補足：

Dreamweaver のショートカットが効かなくなった場合の対応方法

【準備】

正常に稼動しているDreamweaverのMenuフォルダ(menus.xml)データを入手
自身のバックアップとしてのMenuフォルダ(menus.xml)データか、あるいは、同ファイルを提供可能な友人等から入手

以下パス先にあるMenuフォルダ(menus.xml)を、正常なMenuフォルダ(menus.xml)で置換する

C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS5.5\ja_JP\Configuration

f:id:sntkk3:20140228213539p:plain ちょっとブレイク
=============================================
【本日の講師お薦め本】

再びなんで英語やるの? (文春文庫 (195‐2))

作者: 中津燎子
出版社/メーカー: 文藝春秋
発売日: 1983/02
メディア: 文庫
この商品を含むブログを見る

今日は死ぬのにもってこいの日 [単行本]

今日は死ぬのにもってこいの日

作者: ナンシー・ウッド,金関寿夫
出版社/メーカー: めるくまーる
発売日: 1995/09/01
メディア: 単行本
購入: 16人クリック: 130回
この商品を含むブログ (52件) を見る

=============================================

2014-06-24

6/24 CSS確認テスト / Webフォントの活用 / Zen-coding(Emmet)の活用

受講ノート HTML/CSS

本日の授業テーマ

CSS3確認テスト
Webフォントの活用
SVG画像の活用
Syntax Highlighter
Zen-coding(Emmet)の活用

本日の学習内容

CSS3確認テスト

【問題】

【問１】CSS3で影をつける場合の、２つのプロパティ名を書きなさい

答え：
box-shadow
text-shadow

参照：
box-shadow
http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

【問２】CSS3で影をつける場合、プロパティに設定する4つのパラメータのうち、1つ目のパラメータは何を設定するか書きなさい

答え：
X軸方向（横方向）のずれの距離

【問３】CSS3で角を丸くする場合の、プロパティ名を書きなさい

答え：
border-radius

【問４】CSS3で角を丸くする場合の、値は何を設定しているかを書きなさい

答え：
角を丸くする円の半径

【問５】Chromeとサファリのベンダープレフィックスを書きなさい

答え： -webkit-

参照：
ベンダープレフィックス
http://www.htmq.com/csskihon/603.shtml

※クライアントがIEで閲覧したいという場合、基本CSS３は使わない

【問６】CSS3で直線的なグラデーションをつける場合の、プロパティを書きなさい（ベンダープレフィックスは、記述しない）

答え：
background-image: linear-gradient()

【問７】半透明の表現をするには、対象の要素に対してどの関数を設定すればよいか書きなさい

答え：
rgba()

参照：
rgba()
http://www.htmq.com/css3/rgba.shtml

フラットデザインの際は、rgba()で指定する（16進数は使わない）
※フラットデザインは、色が重なっているイメージ

【問８】CSS3で要素を回転したり、拡大縮小したり、歪曲させること設定するプロパティは何か書きなさい

答え：
transform

【問９】Webの通常フォント以外のフォントを使用したい場合、どのディレクティブで使用するフォントを定義する必要があるか書きなさい

答え：
@font-face

参照：
ディレクティブ
http://e-words.jp/w/E38387E382A3E383ACE382AFE38386E382A3E38396.html

【問10 】次のスタイルは、どのような設定か説明しなさい

　　　　　td:nth-child(n+2) { text-align: right; }

答え：
最初の td をのぞく2番目以降の td のセル内容を右寄せに設定

CSS3をうまく活用すればdivを減らすことができる
ただし、css3はIE未対応のため、使用時に注意・確認が必要

↓確認に役立つサイトです
http://fmbip.com/litmus

【問11 】次のスタイルは、どのような設定か説明しなさい

　　　　　 tr:nth-of-type(even) { background-color: #F3F3F3; }

答え：
偶数番目のtrの行の背景色をカラーコード#F3F3F3に設定

【問12 】CSS3で要素を回転して表示する設定を書きなさい（ベンダープレフィックスは、記述しない）

答え：
transform: rotate()

参照：
transform:rotate()
※degはdegreeの略（角度）　時計回り +
http://www.htmq.com/css3/transform_rotate.shtml

Illustrator は回転が逆
他のソフトは基本　時計回り

【問13 】:first-childセレクタは、どのようにスタイルを設定しているか書きなさい

答え：
:first-childは最初の子要素のスタイルを指定します

Web フォント

@font-faceで指定

参照：
WEBフォントサイトまとめ9選！とりあえず一度使ってみませんか？ | 株式会社LIG
http://liginc.co.jp/web/design/font/15639

テキスト　p. 179

スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)

作者: エ・ビスコム・テック・ラボ
出版社/メーカー: マイナビ
発売日: 2012/08/31
メディア: 単行本（ソフトカバー）
購入: 2人クリック: 13回
この商品を含むブログ (4件) を見る

Verdana（Googleフォント変更前の標準フォント）　※WEBフォントではない
f:id:sntkk3:20140624211503p:plain

Google Font
https://www.google.com/fonts

以下より実際Googleフォントを適用した例です。

Maven　Pro
f:id:sntkk3:20140624211505p:plain

Playfair Display SC
f:id:sntkk3:20140624211516p:plain

Dosis
f:id:sntkk3:20140624211525p:plain

日本語の無料Webフォントサービス

デコモジ
http://decomoji.jp/

SVG画像の練習

SVG画像をIllustratorで作成する

《作成例》
こんな感じの画像を作成しました（mark.svg）
f:id:sntkk3:20140624211514p:plain

SVGオプション画面
f:id:sntkk3:20140624211522p:plain

SVGファイルをDreamweaverで開く

先程作成したSVGファイルをDreamweaverで開いた結果がこちらの記述です。

《mark.svg》

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="132.99px" height="132.99px" viewBox="0 0 132.99 132.99" enable-background="new 0 0 132.99 132.99"
xml:space="preserve">
<circle fill="#82EF0F" cx="66.495" cy="66.495" r="66.495"/>
<circle fill="#E3F7CB" cx="66.495" cy="66.495" r="66.495"/>
</svg>

SVG画像はプログラムで出来ているので、上記ソースファイルの数値を変更すると表示画像に変更を加えることができる。

SVG画像を使用するメリット

拡大しても縮小してもエッジがぼけずにきれいに表示される

画像の種類と特徴について

PNGデータは100%圧縮すること
PNGデータは改行を取るだけで圧縮できる

圧縮：
JPEGは間引き
PNGは改行を取るだけ

Syntax Highlighter

ソースコードを色分けして見やすく表示してくれるツールです。
詳しい説明は後日だとのことですが、授業中軽く紹介があったので、念のため。

参照：

SyntaxHighlighterhttp://alexgorbatchev.com/SyntaxHighlighter/

ほんっとにはじめてのHTML5：（ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方
http://honttoni.blog74.fc2.com/blog-entry-172.html

Zen-coding

エディタ上でのコーディングを超ラクチンにしてくれるツールの紹介です。
Dreamweaverだけでなく、その他の幅広いエディタソフトに対応しています。

Dreamweaver　CS5.5の場合

(1) 以下サイトで、「Zen Coding for Dreamweaver v.0.7.5」ファイルをダウンロード
f:id:sntkk3:20140624211532p:plain

https://code.google.com/p/zen-coding/

(2) (1)でダウンロードしたファイルをダブルクリック
⇒ADOBE EXTENSION MANAGERが立ち上がり、以下の確認画面で「承諾する」を選択
f:id:sntkk3:20140624211511p:plain

なお、このような画面が表示された際はインストールに失敗しています。
文末記載の参照サイトで対応方法をご確認ください。
f:id:sntkk3:20140624211508p:plain

補足（6/25追記）：

Dreamweaver のショートカットが効かなくなった場合の対応方法

上記のようにZen-codingのインストールに失敗すると、場合によりその後Dreamweaverのショートカットが一切効かなくなったり、
改行が効かなくなったりと、Dreamweaverが正常に機能しなくなる場合があります。
以下その場合の対処方法について、ご紹介しておきます。

【手順】
1. 正常に稼動しているDreamweaverのMenuフォルダ(menus.xml)データを入手
（自身のバックアップとしてのMenuフォルダ(menus.xml)データか、あるいは、同ファイルを提供可能な友人等から入手できればそれを使用することをお薦めいたします。また、それが不可能な方の場合に備え、以下URLにファイルを添付します。動作保証はできかねますので、あくまでご自身の責任のもと、ファイルをお取り扱いください。
　　Dreamweaver CS5.5 「Menu」フォルダ： http://yahoo.jp/box/MUrji7 ）

※なので、本当なら、Zen-codingのインストール実施前には、念のためご自身の同フォルダ/ファイルをバックアップしておくと良いと思います。

2. 以下パス先にあるMenuフォルダ(menus.xml)を、正常なMenuフォルダ(menus.xml)で置換する

C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CS5.5\ja_JP\Configuration

以上の手順にて、Dreamweaverが正常に戻るはずです。
お困りの場合はぜひ試してみてください。

Dreamweaver(CC版)にEmmet(Zen-coding)による拡張機能を追加

Dreamweaver　CCの場合

【準備】Adobe Extension Managerのインストール
予めAdobe Extension Manager CCをインストールしておく

Adobe Extension Manager CCのダウンロード
Adobe - Exchange：Adobe Extension Managerのダウンロード
http://www.adobe.com/jp/exchange/em_download/

参照：
Extension Manager ヘルプ | 拡張機能の管理
http://helpx.adobe.com/jp/extension-manager/topics/extensions.html

(1) 拡張用ファイルを入手

プログラムファイルを入手
emmetio/dreamweaver · GitHub
https://github.com/emmetio/dreamweaver#emmet-for-dreamweaver

f:id:sntkk3:20140624211538p:plain

(2) 「Emmet.zxp」ファイルをダブルクリックし展開

f:id:sntkk3:20140624211545p:plain

「Acobe Extension Manager CC」が起動し、上図のように追加されたことが確認できます。

(3) Dreamweaver上でのコマンドの確認
f:id:sntkk3:20140624211541p:plain

参照：

zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
http://blog.v-colors.com/zen-coding.html

Zen-CodingをDreamweaver CS6にインストール方法 - ウェブ学のすすめ
http://webgaku.hateblo.jp/entry/20120707/1341649901

Program & Design Tips: Dreamweaver CCでのZen Codingインストール
http://tomoosuzuki.blogspot.jp/2013/07/dreamweaver-cczen-coding.html

Dreamweaver CCにアップデート！CS6から各種設定や拡張機能を移行する | Cappee Design
http://cappee.net/adobe/dreamweaver/dreamweaver-cc-update

CS5インストールエラー時対応

[evernote:552f4e6e01ac44a931b6349ef385d0f0 アップロード中]

Dreamweaver CS5にて「メニューを更新できません。拡張機能パッケージは作成されません。」が表示されるときの対処方法 - とろテク
http://wp2.trojanbear.net/720.html

使い方
Dreamweaverのコーディングを楽にする方法 | たねっぱ！
http://taneppa.net/coding01/#move1

ショートカット集
http://www.myu-zin.com/webridge/wp-content/uploads/ZenCodingCheatSheet.pdf

2014-06-19

6/19 Sublime Text3 日本語化 / [PHP]データベース（ログイン・ログアウト・商品情報登録）

受講ノートプログラミングプログラミング-PHP 受講ノート-PHP

各種ソフトインストール・日本語化（Sublime Text3 インストール・日本語化）
[PHP]データベース（ログイン・ログアウト・商品情報登録）

[課題]
▼各種ソフトインストール・日本語化

Sublime Text3 インストール・日本語化
Eclipseインストール・日本語化 + Aptana …PHP 実行環境を作る
Bootstrap導入

Sublime Text3 インストール・日本語化
参照：
http://luna-plate.com/archives/4637
http://blog.huwy.org/article/292827228.html

以下日本語化プラグインによる手順説明より

日本語化　手順
Package Control Messages
========================
Japanize:

-

Japanese menu for Sublime Text 3

Sublime Text 3の日本語化プラグインです。
[ゆーがいぶろぐ](http://blog.huwy.org/article/292827228.html)さんの日本語化ファイルがベースです。

適用手順
１．C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanizeにインストールされている*.jpファイルを、
　　　C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default
　　にコピーします。※Defaultフォルダがない場合は作成してください。
２．コピーしたファイルをオリジナルのファイル（.jpが付かないファイル）と置き換えます。（念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。）
３．C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu（.jpが付かない方）を、
　　　C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User
　　にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。
以上です。

メモ：
適用手順2について、
具体的には、Defaultフォルダ内のファイル(.jp)のファイル名をそれぞれ拡張子なしの状態に変更します。
※その際、拡張子を変更するとファイルが使えなくなるかもしれないとの警告メッセージが表示されますが、構わず実行します。

Eclipseインストール・日本語化 + Aptana
PHP 実行環境を作る
参照：
http://mergedoc.sourceforge.jp/
http://www.kkaneko.com/rinkou/javaintro/eclipse.html

Bootstrap導入
参照：
http://getbootstrap.com/

[PHP] データベース

▼コロン(:) 以下の記述について
SQLインジェクション回避のため
prepareステートメントを使用してデータを取得
（変数から受け取ったデータをそのまま使用しない）

▼prepare ステートメントを記述

$sql= 'SELECT * FROM users WHERE user_id =:user_id;';

外部から取得したファイルを使用する際には、prepareステートメントを使用
これにより、SQLインジェクションを回避することができる。

▼prepare ステートメント使用によるユーザー情報の取得

$sql= 'SELECT * FROM users WHERE user_id =:user_id;';
$stme = $dbh -> prepare($sql);
$stmet -> bindParam(':user_id', $user);
$stmt -> execute();

[正常処理後の結果]
※正常処理されていれば、dump実行で以下の値が表示されるはず。

array(4) { ["user_code"]=> string(1) "1" ["user_id"]=> string(4) "ユーザーID" ["user_pass"]=> string(60) "パスワードのハッシュ値" ["user_name"]=> string(8) "ユーザー名"

▼SQLインジェクション
参照：
今夜分かるSQLインジェクション対策
http://www.atmarkit.co.jp/fsecurity/column/ueno/42.html

▼prepareステートメント
参照：
PHP マニュアル関数リファレンスデータベース関連抽象化レイヤー PDO
プリペアドステートメントおよびストアドプロシージャ
http://www.php.net//manual/ja/pdo.prepared-statements.php

▼bindParam()　…　指定された変数名にパラメータをバインドする
参照：
PDOStatement::bindParam
http://www.php.net//manual/ja/pdostatement.bindparam.php

パスワード照合

$r = password_verify($pass,$rec['user_pass']);
var_dump($r);

[正常処理後の結果]
※正常処理されていれば、dump実行で以下の値が表示されるはず。　
bool値の結果はtrue

array(4) { ["user_code"]=> string(1) "1" ["user_id"]=> string(4) "ユーザーID" ["user_pass"]=> string(60) "パスワードハッシュ値" ["user_name"]=> string(8) "ユーザー名" } bool(true)

参照：
https://www.php.net/manual/en/function.password-verify.php

パスワードの照合に成功したら、商品情報の画面に遷移するように設定
《login_check.php》

if($r){
  header('Location:item_list.php');
  //exit;
} else {
 //ログイン失敗;
 header('Location:index.html');
}
ob_end_flush();

登録商品一覧画面(login_check.php)にログアウト機能を追加
《login_check.php》

<body>
<h1>登録商品一覧</h1>
<a href="logout.php">ログアウト</a>
<div id="container">
<div id="content">
<table border="1">
<tr>
<th>商品コード</th><th>商品名</th><th>価格</th><th>修正</th><th>削除</th>
</tr>
<?php 
foreach($rec as $v){
	print '<tr>';
	print '<td>';
	print h($v['item_code']);
	print '</td>';
	print '<td>';
	print h($v['item_name']);
	print '</td>';
	print '<td>';
	print h($v['item_price']);
	print '</td>';
	print '<td>';
	print '</td>';
	print '<td>';
	print '</td>';
	print '</tr>';}
?>
</table>
<a href="entry.php">新規商品登録</a>
</div><!--content-->
</div><!--container-->
</body>
</html>

ログアウト画面(logout.php)を作成

<?php
require_once dirname(__FILE__).'/init.php';
//セッションを取っておく必要がないのでクリア
$_SESSION['login_data'] = array();
unset($_SESSION['login_data']);

if(isset($_COOKIE[session_name()] )) {
setcookie( session_name(), '', time()-42000, '/');	
}
session_destroy(); //セッションを破棄する
header('Location:index.html');
exit;
ob_end_flush();

以下のファイルを新規作成
1. entry.php（商品情報登録画面）
2. entry_confirm.php（商品情報登録確認画面）
3. entry_done.php（登録完了画面）

商品情報登録画面（entry.php）を作成
《entry.php》

<?php
require_once dirname(__FILE__).'/init.php';
if(!$_SESSION['login_data']['error']){
	header('Location:index.html');
	exit;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新規商品登録</title>
</head>
<body>
<h1>新規商品登録</h1>
<form action="entry_confirm.php" method="POST">
<table border="1">
<tr>
<th><label for="item_name">商品名</label></th>
<td><input type="text" name="item_name" id="item_name"></td>
</tr>
<tr>
<th><label for="item_price">価格</label></th>
<td><input type="text" name="item_price" id="item_price"></td>
</tr>
</table>
<input type="submit" value="確認"><br>
</form>
</body>
</html>

2014-06-18

6/18 [Portfolio] Web制作者としての就職活動心得 / ポートフォリオ制作

受講ノート Portfolio

本日の授業テーマ

Web制作者としての就職活動心得
ポートフォリオ制作

本日の学習内容～まとめと感想～

Web制作者としての就職活動心得

Web制作者としてのアピール効果の高い履歴書・職務経歴書の作成
ポートフォリオを制作する

職務経歴書

デザイン会社に応募するなら、

Web制作者としての職務経歴書は、必ずしも一般企業の採用募集で提出するような標準的形式である必要はない。
むしろ、本人のクリエイティブな要素が効果的に伝わるような仕上がりになることに注力すべき。

ということで、書式様式は自由に、型にはまらずに（ただ、これはもちろん応募先企業の考え方によって異なる）、
独自性、デザイン力、自身のPR効果を最大にを引き出すような仕上がりを目指して工夫する必要あり。
（Facebookのようなタイムライン形式だったり、自分なりに創意工夫する）

ポートフォリオ

企業面接に際し、

　-紙のポートフォリオを作成する[A4綴じ]　（プレゼン用）
　-A6版（縮小版）のポートフォリオを置いてくる（応募先企業への提出用）

f:id:sntkk3:20140216111417p:plain ポートフォリオを一日で仕上げる秘策

テンプレートを活用する

-Bootstrapのテンプレートを使う
　Bootstrap
　シンプルでカッコいいサイトを短期間で制作できてしまうということでここ最近人気のテンプレート
　今やこの種のCSS フレームワークの中では、主流となりつつあると言って良いかも。　
getbootstrap.com

参照サイト
http://morizyun.github.io/blog/twitter-bootstrap-templates/

ポートフォリオ制作加速化のための知識・ツール

レイアウト先割り - 画像の仮置きスペースを確保

　その際に役立つのがこちらのサイト
　　Placehold.it - Quick and simple image placeholders

　このサービスを使うと、差し込む画像に必要なスペースが仮押えできて便利！

　また、このサービスを使ってこんなページが作れます。

　[講師見本]
　

　[ソース]

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ロールオーバー</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="container" class="clearfix">
<h1>SELECT SHOP</h1>
<div id="gallery">
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>circle on the lace</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>border and a little lace</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>a long best</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>a long cardigan</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>for the party!</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>dolman sleeves</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>white coat with neck fur</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>black fur coat</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="img/img09.jpg" alt="">
<div class="detail">
<p>one piece with dolman sleeves</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>denim jacket with neck fur</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>short sleeves</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>black laced</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>frilled cut and sewn</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>black with white lace</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>formal one piece</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>black one piece</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>formal blouse with a tie</p>
</div>    
</a>
</article>
<article>
<a href="#">
<img src="http://placehold.it/150x200" alt="">
<div class="detail">
<p>naturaly with a belt</p></div>    
</a>
</article>
</div><!-- /#gallery -->
</div><!-- /#container -->
</body>
</html>

《style.css》

@charset "UTF-8";

html,body {
  height:100%;
}
body {
  border-left:20px solid #000;
  border-right:20px solid #000;
}
a {color:#FFF; text-decoration:none;}
#container {
  width:910px;
  margin:0 auto;
}
h1 {
  font-size:18px;
  margin-bottom:2px;
  padding-top:2px;
}
#gallery article {
  float:left;
  width:150px;
  display:block;
  margin:0 2px 2px 0;
}
#gallery article:nth-child(6n) {
  margin-right:0;
}
#gallery article a {
  display:block;
  position:relative;
  width:150px;
  height:200px;
  -webkit-transition:-webkit-transform 0.4s ease;
  -moz-transition:-moz-transform 0.4s ease;
  -o-transition:-o-transform 0.4s ease;
  transition:transform 0.4s ease;
}
#gallery article a:hover {
  -webkit-transform:scale(1.05,1.05);
  -moz-transform:scale(1.05,1.05);
  -ms-transform:scale(1.05,1.05);
  -o-transform:scale(1.05,1.05);
  transform:scale(1.05,1.05);
  z-index:100;
}
#gallery article a div {
  position:absolute;
  top:0;
  left:0;
  width:150px;
  height:200px;
  background-color:rgba(50,50,50,0.6);
  opacity:0;
  -webkit-transition:opacity 0.4s ease;
  -moz-transition:opacity 0.4s ease;
  -o-transition:opacity 0.4s ease;
  transition:opacity 0.4s ease;
}
#gallery article a div p {
  padding:80px 10px 0;
  text-align:center;
  font-family: 'OFL Sorts Mill Goudy TT', arial, serif;
}
#gallery article a:hover div {
  opacity:1;
}

《reset.css》

@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
}

:focus {
  outline: 0;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

a img, iframe {
  border: none;
}

ol, ul {
  list-style: none;
}

input, textarea, select, button {
  font-size: 100%;
  font-family: inherit;
}

select {
  margin: inherit;
}

/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left:2em; }


/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}

ちなみに、類似のレイアウトジェネレーターツールとして、
こんなものもあります。

レイアウトジェネレータ

　PageBox レイアウトの大枠を先割りすることができる！

参考：　
　　ウェブサイトのレイアウトを簡単に作成できるジェネレータ「PageBlox」｜ライフハッカー［日本版］

あと、自身のブログやHPなど、サイトのサイドバー等に加えると楽しい、
いろいろな無料ツールを提供してくれているこちらのサービスも要チェックです。

ウェブモノ

<a href="http://web-mono.net/">ウェブモノ---Flash（フラッシュ）やPHPで作った【ブログパーツ・ブログ素材・ホームページ素材】</a>web-mono.net

2014-06-17

6/17 [HTML5/CSS] レスポンシブサイト（固定レイアウト）/ [CSS3] 角丸 / [PHP] 各種RSSを取得

受講ノート HTML/CSS HTML/CSS-CSS3 受講ノート-HTML/CSS WEBデザイン Webデザイン-レスポンシブ

[HTML5/CSS] レスポンシブサイト（固定レイアウト）
[CSS3] 角丸
[PHP] 各種RSSを取得

[HTML5/CSS] レスポンシブサイト（固定レイアウト）

以下リンク先の演習課題によりレスポンシブサイトの作成方法を学びました。

[課題]　
固定レイアウトパターン：構造 - Webデザインの勉強｜1月27日開講クラス初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140709/p1

[模範回答]
固定レイアウトパターン：HTML+CSS - Webデザインの勉強｜1月27日開講クラス初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140710/p1

[CSS3] 角丸

基本書式：

border-radius:
X（水平）方向　左上右上　右下　左下 / Y（垂直）方向左上右上　右下　左下
楕円の半径をセット

以下リンク先の説明にてしくみを理解、演習により使い方を学びました

参照：
角丸をつける - Webデザインの勉強｜1月27日開講クラス初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140724/p1

border-radius－CSS3リファレンス:
http://www.htmq.com/css3/border-radius.shtml

[PHP] 各種RSSを取得

各種RSS情報の取得方法は以下リンク先にて確認できます。

RSSを取得：simplexml_load_file() - Webデザインの勉強｜1月27日開講クラス初心者の勉強法:
http://d.hatena.ne.jp/web-0127/20140725/p1

[応用編]

Googleアラートの検索結果をRSSで取得 (6/20 追記)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Googleアラートの検索結果をRSSで取得・表示</title>
<style>
span {
  margin-left: 1em;
}
</style>
</head>
<body>
<h2>Googleアラート検索結果</h2>
<p>（キーワード：ビートルズ）</p>
<?php
$url = 'http://www.google.com/alerts/feeds/14468506379246292758/17201638830648711883';
$rss=simplexml_load_file($url); //Googleアラートで取得したURLを入れる
foreach($rss->entry as $result){
    $link=$result->link->attributes()->href;
    $title=$result->title;
    $date=date('Y/m/d H:i', strtotime($result->published));
    print '<li><a href="'.$link.'">'.$title.'（'.$date.'）</a></li>';
    print(PHP_EOL);
}
?>
</body>
</html>

[実行結果]

ショッピングサイトを作ってみる

【演習】ショッピングサイトを作る

1.スタッフ追加画面

2. 入力チェック画面

3. スタッフ追加完了画面

4.スタッフ一覧画面

5.スタッフ ログイン画面

6.ログイン チェック画面

7.ログアウト画面

[PHP] ロジックとデザインの分離

参考サイト

【ロジックとデザインの分離について】

Smarty - ロジックとデザインの分離を考えるならこんなテンプレートエンジンを使うのも一つです

【プログラム未経験からECサイトを作ってみるなら】

改めまして

修了日を迎えて…

本日の授業テーマ

本日の授業内容

プログラマー志望の場合のアプローチは？

プログラムを公開する

ポートフォリオ制作に向けて

ポートフォリオ制作時のポイント

ポートフォリオに記載すること

ポートフォリオ制作時に参考にしたいサイト

受講生サイト

[ Tips ] lightbox系プラグイン

本日の授業テーマ

Portfolio制作に向けて

本日の授業内容

[Tips] マウスオーバー

hoverがうまくいかないときに参考にしたいサイト

ロールオーバーの実装

[Tips] 画像の修正

シャドウ・ハイライト

アンシャープマスク

階層構造のリスト

その他

初心者が習熟すべきスキル

【無料レンタルサーバー】

本日の授業テーマ

本日の学習内容

[PHP] データベース（登録内容削除）

SQLでデータを削除する(DELETE文)

商品削除実行(delete_fin.php)

[PHP] データベース（登録内容修正）

SQLでデータを修正する(UPDATE文)

登録内容修正画面(update.php)

登録内容修正確認画面(update_confirm.php)

登録内容修正実行(update_fin.php)

本日の授業テーマ

本日の学習内容

[PHP] データベース （前回のおさらい）

ここまでの処理の流れを確認（ログインから新規商品登録完了まで）

新規商品登録確認画面 (entry_confim.php)

商品登録実行 (entry_fin.php)

商品削除確認画面 (delete_confim.php)

本日の学習内容～まとめと感想～

[CSS3] 確認テスト（演習ドリル10）

問題

入力フォーム

Dreamweaver のショートカットが効かなくなった場合の対応方法

本日の授業テーマ

本日の学習内容

CSS3確認テスト

Web フォント

SVG画像の練習

SVG画像をIllustratorで作成する

SVGファイルをDreamweaverで開く

Syntax Highlighter

Zen-coding

Dreamweaver のショートカットが効かなくなった場合の対応方法

Dreamweaver(CC版)にEmmet(Zen-coding)による拡張機能を追加

[PHP] データベース

本日の授業テーマ

本日の学習内容～まとめと感想～

Web制作者としての就職活動心得

企業面接に際し、

テンプレートを活用する

ポートフォリオ制作加速化のための知識・ツール

[HTML5/CSS] レスポンシブサイト（固定レイアウト）

5.スタッフ　ログイン画面

6.ログイン　チェック画面

[PHP] データベース（前回のおさらい）