2010年11月25日

PHP 〜フォームでのデータ受取り〜

【この課での目標】

PHP 〜データ受取り・XSS対策〜

【教材範囲】

http://y-mahata.s-tanno.com/pukiwiki/?10_weeks_webdev_learninng
※4週目

【成果物】

http://programming.so.land.to/20101124-4.html
※firefoxで動作確認。
※セキュリティが機能していないフォームなので、本物の個人情報は入れないようにお願いします。

【つまづいた箇所・解決法】

送り先の名前を統一する必要に気付かなかった

【未解決の悩み】

チェックボックスで複数情報送信する方法
→調べてみたところforあたりを使うみたいだけどとりあえず後回し。

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜

<html>
<head>
<title>2010/11/24 C</title>
</head>
<body>
<p><b>Q:その他のフォーム要素のサンプルファイルを作成してください</b></p>
<form action="post_to.php" method="post">
名前:<input type="text" name="name" /><br />
メールアドレス:<input type="text" name="mail" /><br />
お問い合わせ:<textarea name="inquiry" /></textarea><br />
<br>
<u>PHP勉強したい?</u><br>
<form name="form" action="post_to.php" method="post">
<input name="radiobutton" type="radio" value="したい">したい<br>
<input name="radiobutton" type="radio" value="したくない">したくない<br>
<input name="radiobutton" type="radio" value="どちらでもない">どちらでもない<br>
<br>
<u>どの麺類が好き?</u><br>
<form name="form1" action="post_to.php" method="post">
うどん<input type="checkbox" name="check" value="うどん"><br>
そば<input type="checkbox" name="check" value="そば"><br>
ラーメン<input type="checkbox" name="check" value="ラーメン"><br>
<br>
<u>今なにがしたい?</u><br>
<form name="form2" action="post_to.php" method="post">
<select name="select">
<option>選択してください</option>
<option value="外に出たい">外に出たい</option>
<option value="空を飛びたい">空を飛びたい</option>
<option value="部屋に帰りたい">部屋に帰りたい</option>
<option value="泳ぎたい">泳ぎたい</option>
</select><br>
<br>
<input type="submit" name="Submit" value="送信">
</form>
<br>
<p><b>Q:XSS を実行できるフォームを作成し、実際にXSSを行ってください。</b></p>
<script>alert("test")</script>

<p><b>Q:どうすれば XSS を解消できるか考えてみてください。</b></p>
<?php
$js_code = '<script type="text/javascript">alert("alert!!");</script>';<br>
echo htmlspecialchars($js_code, ENT_QUOTES, 'UTF-8'));
?><br>
と表記する
</body>
</html>

〜PHP〜

<html>
<head>
<title>データ受取り</title>
</head>
<body>

<?php

var_dump($_POST);
echo "<br /\n>" . "<br />\n";
echo "名前: " . $_POST["name"] . "<br />\n";
echo "メールアドレス: " . $_POST["mail"] . "<br />\n";
echo "お問い合わせ: " . $_POST["inquiry"] . "<br />\n";
echo "PHP勉強したい?: " . $_POST["radiobutton"] . "<br />\n";
echo "どの麺類が好き?: " . $_POST["check"] . "<br />\n";
echo "今何がしたい?: " . $_POST["select"] . "<br />\n";

?>

</body>
</html>
posted by yuuya1986 at 01:34| Comment(0) | PHP | このブログの読者になる | 更新情報をチェックする

2010年11月24日

CSS 〜リンク・画像・表〜

これでひとまずはじめてのホームページHTML入門 は終わりです。
次からは新しい本に入ります。

ですが、完璧に覚えているかといえば全くそうではないので、反復の重要性を感じます。

【この課での目標】

CSSを用いて画像、表、リンクの調整

【教材範囲】

はじめてのホームページHTML入門 の200〜214ページ

【成果物】

http://programming.so.land.to/20101124-3.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特に無し

【未解決の悩み】

画像を囲む罫線をいじっても表示が変わらない。

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜


<html>
<head>
<title>CSSを使った記述3</title>

<link rel="stylesheet" type="text/css" href="20101124-3.css">

</head>
<body>

<div>
今までの成果物
</div>
<ol>
<a href=http://programming.so.land.to/self.html><li>2010年10月末に作成してみたもの</li></a>
<a href=http://programming.so.land.to/20101120-1.html><li>HTMLタグ基本の基本</li></a>
<a href=http://programming.so.land.to/20101120-2.html><li>表作り</li></a>
<a href=http://programming.so.land.to/20101120-3.html><li>箇条書き</li></a>
<a href=http://programming.so.land.to/20101121-1.html><li>画像・音楽ファイルの挿入</li></a>
<a href=http://programming.so.land.to/20101121-2.html><li>リンク作成</li></a>
<a href=http://programming.so.land.to/20101121-3.php><li>PHP〜基礎の基礎〜</li></a>
<a href=http://programming.so.land.to/20101121-4.php><li>PHP〜配列・ループ〜</li></a>
<a href=http://programming.so.land.to/20101122-1.php><li>PHP〜if文・ループの応用〜</li></a>
<a href=http://programming.so.land.to/20101124-1.html><li>HTML/CSS〜文字・画像・背景など〜</li></a>
<a href=http://programming.so.land.to/20101124-2.html><li>HTML/CSS〜箇条書き〜</li></a>
<a href=http://programming.so.land.to/20101124-3.html><li>HTML/CSS〜画像・表・リンクなど〜</li></a>
</ol>

<div id="nikki-box">
<img src="india01.jpg" width="50%" title="インドの風景@" class="nikki-photo" id="main-photo">
タージ・マハルの裏を流れる川
<img src="india03.jpg" width="50%" title="インドの風景A" class="nikki-photo" id="main-photo">
カシミールの湖
</div>

<div>
<table border="1" width="80%" height="50%" cellpadding="10">
<caption align="right">カードゲーム勝率一覧</caption>

<tr id="tr-size">
<th>ゲーム名</th>
<th>ルール</th>
<th colspan="2">勝率</th>
</tr>

<tr align="left">
<td rowspan="2" valign="top">ソリティア</td>
<td>カードのめくり方(3枚ずつ)</td>
<td>43%(試行100回)</td>
<td>100回中43回成功</td>
</tr>

<tr align="right">
<td align="center">カードのめくり方(1枚ずつ)</td>
<td>14%(試行100回)</td>
<td>100回中14回成功</td>
</tr>

<tr>
<td rowspan="3" valign="top">スパイダーソリティア</td>
<td>初級:1組</td>
<td>38%(試行100回)</td>
<td>100回中38回成功</td>
</tr>

<tr>
<td>中級:2組</td>
<td>20%(試行50回)</td>
<td>50回中10回成功</td>
</tr>

<tr>
<td>上級:4組</td>
<td>0%(試行50回)</td>
<td>50回中0会成功
</tr>

<tr>
<td>フリーセル</td>
<td>なし</td>
<td>38%(試行50回)</td>
<td>50回中19回成功</td>
</tr>
</div>




</body>
</html>


〜CSS〜

#nikki-box{
margin-bottom: 1em;
padding: 1em;
border-style: solid;
border-width: 1px;
width: 900px;
height: 765px;
}

.vertical-align{
vertical-align: middle;
}

.nikki-photo{
vertical-align: middle;
margin-top: 10px;
margin-bottom: 20px;
}

#main-photo{
border-style: double solid double solid;
border-width: 10px 15px 10px 15px;
boeder-color: #ff6347;
}

table {
width: 900px;
height: 300px;
border-collapse: separate;
border-spacing: 10px;
}

#tr-size{
height: 3em;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

a:hovor {
color: blue;
}

a:active {
color: red;
}
posted by yuuya1986 at 17:43| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする

第12回 CSS 〜箇条書き〜

今までHTMLで行っていた表現をCSSで。
非推奨とかよく分かんなかったけど今ならちょっと分かる気がする。
前回がちょっと長めだったんで今回の範囲は短め。

【この課での目標】

CSSを用いての箇条書き表現

【教材範囲】

はじめてのホームページHTML入門 の192〜199ページ

【成果物】

http://programming.so.land.to/20101124-2.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特に無し

【未解決の悩み】

CSS上の#を付けるor付けないの区別はなんだろう?

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜


<html>
<head>
<title>CSSを使った記述2</title>

<link rel="stylesheet" type="text/css" href="20101124-2.css">

</head>
<body>

<div>
<ol id="list-style">
<li id="style-yazirushi">ね</li>
<li id="style-yazirushi">うし</li>
<li id="style-yazirushi">とら</li>
<li>う</li>
</ol>
</div>

<div>
<ul id="list-style">
<li>A</li>
<ul>
<li>AA</li>
<li id="style-circle">AO</li>
</ul>
<li>B</li>
<li>O</li>
<li class="new-icon">AB</li>
</ul>
</div>


</body>
</html>


〜CSS〜

#list-style {
list-style-type: upper-roman;
}

ul {
list-style-type: disc;
}

#style-circle {
list-style-type: circle;
}

#style-yazirushi{
list-style-image: url(yazirushi01.jpg);
}

.new-icon {
background: url(new01.gif) no-repeat 40px 2px;
}

body {
color: white;
background-color: gray;
}
posted by yuuya1986 at 16:45| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。