My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

6/12 [HTML5] 習得度確認テスト / [PHP] メールフォーム

6/12 授業

  1. [HTML5] 習得度確認テスト
  2. [PHP] メールフォーム

[HTML5] 習得度確認テスト


【問1】HTMLの最新バージョンは?
【答】 HTML5

参照:
http://app-review.jp/news/159165

【問2】見出しの要素は6種類あります。すべて記述しなさい。
【答】 h1, h2, h3, h4, h5, h6


【問3】代表的なブロックレベル要素を5つ以上記述してください。
【答】 (例)div, address, dl, table, form, ul, ol, p,h1, h2, h3, h4, h5, h6

ブロック要素の種類
参照:http://weblan3.com/css/reference-css-block-inline.php

【問4】margin 0 10px 0 5px;と記述したら左のmarginは何pxになるか答えなさい。
【答】 5px

参照:
margin の相殺
http://www.geocities.co.jp/HeartLand-Icho/5345/collapsing.html
http://www.tagindex.com/stylesheet/box/margin.html


【問5】h1要素の下にp要素を配置しています。これらは通常フローをしています。cssには次のような記述をしました。
h1とpの間には何pxの空間が空いているか答えなさい。
h1{ margin:10px;}
p { margin: 10px;}

【答】 10px


【問6】次の記述をしましたが、p要素が文字色が赤くなりませんでした。p要素の文字色が赤になるように修正しなさい。
p{ color:f00; }

【答】 p{ color:#f00; } #が抜けていた

参照:
色指定、カラーコード
http://www.netyasun.com/home/color.html


【問7】 windowsのメモ帳でコーディングしました。 と記述しているが、文字化けをしてしまいました。どんな理由が考えられるかを答えなさい。

【答】文字コードの設定が「utf-8」以外だった。


【問8】 リンクの文字色を設定しました。何故かマウスをhoverしても文字色が赤に変わりません。正しく変わるように修正しなさい。
a:link{ color:blue; }
a:hover{ color:red; }
a:active{ color:yellow; }
a:visitied{ color:green; }

【答】
a:link{ color:blue; }
a:visitied{ color:green; }
a:hover{ color:red; }
a:active{ color:yellow; }

参照:
:link :visited :hover :active の記述順序とその覚え方
http://jmblog.jp/archives/179


【問9】
<div id="wrapper"> テキスト</div>
で指定した要素にcssで次のように設定したが、背景色が正しく#eee(グレー)色で表示されません。正しく補正しなさい。
.wrapper{ background-color: #eee; }

【答】 #wrapper { background-color: #eee; }


【問10】 2段組のレイアウトを作成しています。左側のボックスは、width:200pxでpaddingが上下左右10pxとし、ボーダーは上下左右各1pxとしました。右側のボックスはwidth:700pxでpaddingが上下左右10pxとし、ボーダーは上下左右各1pxとしました。左右のボックスをきっちり囲むためにはこのボックスのwidthを何pxにすればよいか答えなさい。

【答】 944px


【スポンサードリンク】



PHP メールフォーム

メールフォーム 設定追加

《index.php

▼maxlength を設定する
ブラウザでの入力文字数に限界値を設定する

  • nameフィールドの場合:

maxlength="30"

これでブラウザ側で30文字以上入力できない
注意:同時にsizeの大きさも"60"くらいに変更(表示幅を変更しないと、文字制限が正しく効いているか分からない)

<td><input type="text"  name="email" id="email" size="60"  maxlength="50" placeholder="例:sample@sample.com" value ="<?php echo h($email); ?>"></td>


▼required を設定する
対象項目を入力必須条件に指定する

<td><input type="text" name="name" id="name" size="76" maxlength="30" placeholder="例:猫山猫太郎" value = "<?php echo h($name); ?>" required></td>

f:id:sntkk3:20140618233537p:plain


▼emailのtypeを"email"に設定(変更)する

f:id:sntkk3:20140618233530p:plain

<td><input type="email"  name="email" id="email" size="60"  maxlength="50" placeholder="例:sample@sample.com" value ="<?php echo h($email); ?>" required></td>

【演習】商品管理データベース作成

ログインフォーム
http://felica-portfolio.com/php/loginform/


DB
-テーブル作成
-SQL インポート


《画面遷移》

ログインフォーム

商品一覧画面

新規商品登録画面

登録確認画面

実行結果画面

商品一覧画面に戻る


[作業]

php ファイルを準備する
インターフェース用のphpファイルを作成する


▼DBを作る - データベース名:entry

  • テーブル作成

1件 データ作成
データを流し込む


1. php MyAdminで新規データベース作成 「entry」

2. 新規テーブル作成 「items」

[テーブル構造]
item_code
データ型: INT
AI (auto increment)

item_name
データ型:VARCHAR
長さ: 30
照合順序: utf-8 general_ci

item_price
データ型: INT


Storage Engine:
MyISAM


3. テーブルを保存


4. データを入力する

「挿入」タブ
item_name, item_priceに値を入力する


自宅学習用にデータを持ち帰りたい場合、

▼データを出力する
「エクスポート」タブ

1. 対象のデータベースを選択

2. 「エクスポート」タブを選択

エクスポート方法:
「詳細」を選択(確認作業のためだけなので、選択は必須でない)

「実行」ボタンをクリック


▼データを読み込む(インポートする)

「インポート」タブ
データベースを選択
「インポート」タブを選択
インポート用ファイルを選択
「実行」ボタンをクリック

※ 既存のテーブルに同一のものがあると、インポートエラーになるため、その場合は既存同一名テーブルのみ削除したうえでインポートを実行


$dbh= new PDO ( DBの情報,ユーザーアカウント,パスワード )

DB情報

  • データベース名

- host(所在地) localhost127.0.0.1


《item_list.php

▼データベースに接続するための記述を追加する

<?php
$dsn = 'mysql:dbname=entry; host=localhost; charset=utf8;';
$db_user = 'root';
$db_pass = 'root';
$dbh = new PDO($dsn,$db_user, $db_pass);
var_dump($dbh)
?>


dbh (database handle)

items テーブルから * (すべてのカラムの)データを取得

$sql = 'SELECT * FROM items WHERE 1;';


HTML5 まとめ問題

http://d.hatena.ne.jp/practice4prepressman/20131023/p1