2010年12月08日

第20回 〜PHPの基礎振り返り〜

今回から新しいテキストに入っていきたいと思います。
このテキストを通しで終えたら、これ以降は勉強会中心でプログラミングに取り組むこととし、
それ以外の活動に重きを置きたいと考えています。

【この課での目標】

PHPの基礎振り返り

【教材範囲】

PHPの絵本1〜14ページ

【成果物】

http://programming.so.land.to/20101208-2.html

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

特になし

【未解決の悩み】

フォームで送信した名前が受け側のページで反映されない。
・送り手の拡張子をphp→htmlに変える
・print→echoに変える
・シングルクオーテーションをダブルクオーテーションに変える
など色々試すもできない。

以前は出来ていたことなのでひとまず飛ばす。

【ソース】

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

〜送り側〜

<!DOCTIPE html PUBLIC "-//W3C??DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title>20101208-2</title>
<html>
<head>
<title>PHPの絵本第一回</title>
</head>
<body>

Let's PHPーー

<?php
print "Hellow world!!\n";
?>

フォントは<b>太字</b>です。<br>
フォントは<u>下線付き</u>です。<br>
<br>
<form action="post_to4.php" method="post">
名前<input type="text" name="namea"><br>
<input type="submit" value="送信"><br>
<br>

りんごは好きですか?
<input type="radio" name="apple" value="1" checked>はい
<input type="radio" name="apple" value="2">いいえ<br>
なしは好きですか?
<input type="radio" name="pear" value="1" checked>はい
<input type="radio" name="pear" value="2">いいえ<br>
<input type= "checkbox" name="grape" value="1">ぶどうも好きです<br>

オレンジは好きですか?
<select name="orange">
<option value="1" selected>はい</option>
<option value="2">いいえ</option>
</select><br>
</form>
</body>
</html>

〜受け側〜


<!DOCTIPE html PUBLIC "-//W3C??DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title>20101208-2
<html>
<head>
<title>PHPの絵本第一回
</head>
<body>

<?php

print ($_post['namea']);

?>
さん、こんにちは。


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

2カラムの記事の作成

HTML/CSSについてはこれで2冊目が終了です。
次回からはPHPに取り組んでいきます。

【この課での目標】

HTML/CSSを用いた2カラムページの作成

【教材範囲】

HTML/XHTML&スタイルシートレッスンブックの287〜307ページ。

【成果物】

http://programming.so.land.to/20101208-1.html

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

特になし

【未解決の悩み】

CSSファイルを別に分けてリンクで読み込むことができなかった
→前回はできたので、次回作るときはその時のやり方を踏襲する

【ソース】

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


<!DOCTIPE html PUBLIC "-//W3C??DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<html>
<head>
<title>20101208-1</title>
<style type="text/css">

body {color: #444444;
background-color: #66aa66;
background-image: url(back.jpg)
}

div#container {border: ridge 10px #bbffaa;
padding: 20px;
background-color: #ffffff;
width: 90%;
margin-left: auto;
margin-right: auto;
}

div#header {background-color: #66aa66;
padding: 5px 20px;
padding-bottom: 20px;
}

div#header p {color: #222222;
margin-bottom: 0;
}

h1 {font-size: 2.25em;
font-family: Verdana,Helvetica,sans-serif;
color: white;
text-align: left;
margin-bottom: 0;
}

p {font-size: 0.95em;
line-height: 1.6
margin-top: 0;
}

address {font-size: 0.75em;
font-style: normal;
clear: both
}

a {color: gray
}

a:hover {color: blue;
background-color: #ccffff;
font-size: larger
}

a:visited {color: black}

address a:hover {color: #ffaa00}

ul {list-style-type: none;
margin-left: 0;
padding-left: 0;
padding: 0;
margin-top: 30px;
width: 240px;
float: left;
}

li {display: inline;
padding-right: 10px;
font-size: 0.75em
margin-bottom: 20px;
border-bottom: solid 1px #66aa66
}

li a {text-decoration: none
}

h2 {font-size: 1em;
padding-left: 5px;
border-bottom: solid 2px #66aa66;
padding-bottom: 3px;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-position: 13 -2px;
padding-left: 30px;
clear: both;
margin-bottom: 0;
}

h2#summary {margin-top: 40px;
}

img {float: right;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
clear: both;
}

img.photo-odd {float: left;
margin-left: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

img.photo-logo {float: left;
margin-left: 0px;
margin-right: 50px;
margin-bottom: 15px;
}

img.photo-even {float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

p#massage {margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.3;
}

p#summary {margin-top: 10px;
margin-bottom:30px;
width: 420px;
}

input, textarea {border: solid 1px #66aa66;
}

p#botton input {border: solid 1px #66aa66;
background-color: #66aa66;
color: #ffffff;
width: 100px;
}

div#contents {margin-left: 240px;
}


</style>

</head>
<body>


<div id ="container">
<div id="header">

<h1>2カラムのページを作成します</h1>
</div>

<h2>お問い合わせ</h2>

<ul>
<li><a href="http://programming-ana.seesaa.net/">プログラミング初心者・虎の穴</a></li><br />
<li><a href="http://ameblo.jp/omoumamanikaku/">高校中退慶應生が考えること</a></li><br />
<li><a href="http://yuuya1986.blog28.fc2.com/">読書・名著ランキング</a></li><br />
<li><a href="http://akb48gazou.com">AKB48の画像・動画大全集</a></li><br />
</ul>

<div id="contents">

<p id="sammary">
ご意見、ご感想などがありましたら、以下の欄に記入して連絡ちょーだい。
</p>

<form action="post_to3.php" method="post">
<p>名前:<br />
<input type="text" name="namae" size="40" />
</p>

<p>メールアドレス:<br />
<input type="text" name="mail" size="40" />
</p>

<p>コメント:<br />
<textarea name="comment" cols="50" rows="8"></textarea>
</p>

<p id="botton">
<input type="submit" value="送信"å />
<input type="reset" value="リセット" />
</p>

</form>
</div>
</div>
</body>
</html>
posted by yuuya1986 at 12:26| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする

HTML/CSSを用いたフォームでのデータ送信

ほんとはCGI通してメールで投稿したデータを受け取りたかったんだけど、
使ってみようとしたとこからメールの返信が来ないからPHPでデータを吐かせてみた。

少しずつ、だけど着実にできるようにはなってきている。

【この課での目標】

HTML/CSSを用いたフォームでのデータ送信

【教材範囲】

HTML/XHTML&スタイルシートレッスンブックの267〜286ページ。

【成果物】

http://programming.so.land.to/20101207-2.html

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

特になし

【未解決の悩み】

メールでのデータ受信については改めて試してみる。

HTMLタグ内の文末で/を入れる場合と入れない場合の違い。

【ソース】

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

〜フォーマット〜

<!DOCTIPE html PUBLIC "-//W3C??DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<html>
<head>
<title>20101207-2</title>
<style type="text/css">

body {color: #444444;
background-color: #66aa66;
background-image: url(back.jpg)
}

div#container {border: ridge 10px #bbffaa;
padding: 20px;
background-color: #ffffff;
width: 90%;
margin-left: auto;
margin-right: auto;
}

div#header {background-color: #66aa66;
padding: 5px 20px;
padding-bottom: 20px;
}

div#header p {color: #222222;
margin-bottom: 0;
}

h1 {font-size: 2.25em;
font-family: Verdana,Helvetica,sans-serif;
color: white;
text-align: left;
margin-bottom: 0;
}

p {font-size: 0.95em;
line-height: 1.6
margin-top: 0;
}

address {font-size: 0.75em;
font-style: normal;
clear: both
}

a {color: gray
}

a:hover {color: blue;
background-color: #ccffff;
font-size: larger
}

a:visited {color: black}

address a:hover {color: #ffaa00}

ul {list-style-type: none;
margin-left: 0;
padding-left: 0;
background-color: #bbffaa;
padding: 3px 20px
}

li {display: inline;
padding-rifht: 10px;
font-size: 0.75em
}

li a {text-decoration: none
}

h2 {fibt-size: 1em;
padding-left: 5px;
border-bottom: solid 2px #66aa66;
padding-bottom: 3px;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-position: 13 -2px;
padding-left: 30px;
clear: both;
margin-bottom: 0;
}

h2#summary {margin-top: 40px;
}

img {float: right;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
clear: both;
}

img.photo-odd {float: left;
margin-left: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

img.photo-logo {float: left;
margin-left: 0px;
margin-right: 50px;
margin-bottom: 15px;
}

img.photo-even {float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

p#massage {margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.3;
}

p#summary {margin-top: 10px;
margin-bottom:30px;
width: 420px;
}

input, textarea {border: solid 1px #66aa66;
}

p#botton input {border: solid 1px #66aa66;
background-color: #66aa66;
color: #ffffff;
width: 100px;
}


</style>

</head>
<body>


<div id ="container">
<div id="header">

<h1>コメント送信フォームの練習です</h1>
</div>

<h2>お問い合わせ</h2>

<p id="sammary">
ご意見、ご感想などがありましたら、以下の欄に記入して連絡ちょーだい。
</p>

<form action="post_to3.php" method="post">
<p>名前:<br />
<input type="text" name="namae" size="40" />
</p>

<p>メールアドレス:<br />
<input type="text" name="mail" size="40" />
</p>

<p>コメント:<br />
<textarea name="comment" cols="50" rows="8"></textarea>
</p>

<p id="botton">
<input type="submit" value="送信" />
<input type="reset" value="リセット" />
</p>

</form>

</div>
</body>
</html>


〜受け取りページ〜


<!DOCTIPE html PUBLIC "-//W3C??DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<html>
<head>
<title>データ受取り</title>
</head>
<body>

<?php

echo "名前 " . $_POST["namae"] . "<br />\n";
echo "メールアドレス: " . $_POST["mail"] . "<br />\n";
echo "コメント: " . $_POST["comment"] . "<br />\n";

?>

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

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