2013-10-30

レスポンシブデザイン

HTML5

http://efgraphics.net/71lesson/1030_mediaquery2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Media Query レスポンシブデザイン</title>
<link rel="stylesheet" href="css/1030_style2.css" media="screen">
<!--[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">
<header id="header">
<div id="headerLogo">
<h1><span class="hidden">PICKUP STREAM</span></h1>
<ul class="social">
    <li><a href="#"><img src="1030_img/twitter.png" alt="Twitter"></a></li>
    <li><a href="#"><img src="1030_img/facebook.png" alt="Facebook"></a></li>
    <li><a href="#"><img src="1030_img/googleplus.png" alt="googleplus"></a></li>
    <li><a href="#"><img src="1030_img/rss.png" alt="RSS"></a></li>
  </ul>
  </div><!--/#headerLogo-->
<div id="headerPhoto">
<figure><img src="1030_img/header.jpg" alt="Header Photo"></figure>
</div>
<nav>
  <ul class="globalNav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
</header>
<div id="content" class="cf">
<article>
<div class="title">
<ul class="day">
<li class="date">1</li>
<li class="month">AUG</li>
</ul>
<h2>海岸のデコレーション</h2>
<p class="cadegory">CATEGORY: 海と海岸と空</p>
</div>
<div class="sentence">
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p class="photo"><img src="1030_img/sand.jpg" alt=""></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</div>
</article>

<aside>
<section class="sidebar">
<dl>
<dt>CATEGORIES</dt>
<dd>山と森林</dd>
<dd>海と海岸と空</dd>
<dd>都市と建築</dd>
<dd>地下</dd>
</dl>
</section>
<section class="sidebar">
<dl>
<dt>RECENT POSTS</dt>
<dd>海岸のデコレーション</dd>
<dd>風車と海風の関係</dd>
<dd>ツルを伸ばしてどこまでも</dd>
<dd>色とりどりの絨毯</dd>
<dd>休日に買い物にいくなら</dd>
<dd>高層ビルと風の関係</dd>
</dl>
</section>
</aside>
</div><!--/#content-->
</div><!--/#container-->
<footer>
<p>PICKUP STREAM</p>
<small>Copyright&copy; PICKUP STREAM, all rights reserved.</small>
</footer>
</body>
</html>

@charset "UTF-8";
/* CSS reset */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }

body, div, h1, h2, h3, p, img, small, ul, li, dl, dt, dd, article, aside, header, footer,nav, figure {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  vartical-align: middle;
}
span.hidden {
  visibility: hidden;
}
/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/*Common*/
body {
  color: #333;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  background: #FFF;
}
p {
  line-height: 1.5;
}
a {
  color: #333;
}
img {
  max-width: 100%;
}
/* 共通およびスマートフォン */
header {
  margin-top: 1em;
  margin-bottom: 2em;
}
header h1 {
  width: 360px;
  height: 39px;
  display: block;
  background: url(../1030_img/logo.png) no-repeat;
  margin-bottom: 0.2em;
}
ul.social {
  overflow: hidden;
  margin-bottom: 0.2em;
}
ul.social li{
  float: left;
  display: inline;
  margin-left: 5px;
}
ul.globalNav {
  width: 100%;
  background: #000;
}
ul.globalNav li a {
  color: #FFF;
  text-align: center;
  font-size: 0.9em;
  line-height: 2em;
  display: block;
  border-bottom: 1px solid #FFF;
}
.title {
  margin-bottom: 1.25em;
  overflow: hidden;
}
.title h2 {
  font-size: 1.8em;
  color: #000;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #888;
  margin-bottom: 0.3em;
}
p.cadegory {
  color: #666;
  font-size:0.9em;
}
ul.day {
  float: right;
  display: inline;
  margin-top: 0.5em;
  background: #00A0D6;
  width: 70px;
  height: 60px;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%;

  text-align: center;
  color: #FFF;
  line-height: 1.1;
}
li.date {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.75em;
  font-weight: bold;
  padding-top: 6px;
}
li.month {
  font-family: Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight: bold;
}

.sentence p{
  margin-bottom: 1.5em;
}

aside section.sidebar {
  margin-bottom: 2em;
}
aside section.sidebar {
  margin-bottom: 1,5em;
}
aside section.sidebar dl {
}
aside section.sidebar dl dt{
  font-size:1.5em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #58BADF;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #888;
}
aside section.sidebar dl dd{
  font-size:0.85em;
  color: #888;
  line-height: 1.5em;
  border-bottom: 1px solid #888;
  background: url(../1030_img/listmark.png) no-repeat 0 10px;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  padding-left: 18px;
}
footer {
  width: 100%;
  background: #000;
  color: #FFF;
  padding: 1em;
}
footer.p {
  font-size: 0.8em;
}
footer small {
  font-size: 0.65em;
}

/*  Media Queries による切り替え */
/* タブレット向けのスタイル：481px~768px */
@media only screen and (min-width: 481px) {
header {
  overflow: hidden;
}
header h1 {
  float: left
}
ul.social {
  float: right;
}
ul.globalNav {
  overflow: hidden;
}
ul.globalNav li a{
  float: left;
  display: inline;
}
ul.globalNav li a{
  display: block;
  padding: 2px 3em 0 3em;
  line-height: 2;
  border-right: 1px solid #FFF;
  border-bottom: none;
}
#container {
  max-width: 960px;
  margin: 0 auto;
}
#content {
  overflow: hidden;
}
article {
  float: left;
  width: 60%;
}
aside {
  float: right;
  width: 30%;
}
}

2013-10-28

メールフォームデータベースに格納

PHP

〈input〉

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 メールフォーム | 入力画面</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<div id="container">
<div id="inquiry">
<h1>お問合せメールフォーム</h1>
<p>このフォームはphpの練習で作成したサンプルです。
入力されたメールアドレス宛に自動返信される機能がついています。</p>
<table>
<form action="1028_check1.php" method="POST">
<tr>
  <th><label for="name">お名前</label></th>
  <td><input type="text" name="name" id="name" size="40" placeholder="（例）山田太郎" autofocus required></td>
</tr>
<tr>
  <th><label for="email">メールアドレス</label></th>
  <td><input type="email" name="email" id="email" size="40" placeholder="（例）xxx@xxx.ne.jp" required></td>
</tr>
<tr>
  <th><label for="message">お問合せ内容</label></th>
  <td><textarea name="message" id="message" cols="28" rows="3" placeholder="（例）コメント" required></textarea></td>
</tr>
</table>
<div id="btn">
<input type="submit" value="確認画面へ" class="submit">
</div>
</form>
</div>
</div>
</body>
</html>

〈check〉

<?php
if(empty($_POST)){
  print '処理終了';
  exit;
}

session_start();

$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
$message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8');

$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 メールフォーム | 確認画面</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<div id="container">
<div id="inquiry">
<form action="1028_thanks1.php" method="POST">
<h1>確認画面</h1>
<ul>
<?php
print '<li>';
 if($name ==''){
  print 'お名前が入力されていません。'."\n";
 }else{
  print 'お名前：'.$name;
  }
print '</li>'."\n";
print '<li>';
 if($email ==''){
  print 'お名前が入力されていません。'."\n";
 }else{
  print 'メールアドレス：'.$email;
  }
print '</li>'."\n";
print '<li>';
 if($message ==''){
  print 'お問い合わせ内容が入力されていません。'."\n";
 }else{
  print 'お名前：'.$message;
  }
print '</li>'."\n";
	?>
</ul>
<div id="btn">
<input type="button" value="戻る" class="backbtn" onClick="history.back()">
<input type="submit" value="送信" class="submit">
</div>
<?php
if($name=='' || $email=='' || $message==''){
  print '未記入の項目があります。「戻る」ボタンをクリックしてください。';
  }else{
  print '<p>以上の内容を送信します。<br>よろしければ「送信」ボタンを、修正する場合は「戻る」ボタンをクリックしてください。</p>';
	}
?>
</form>
</div>
</div>
</body>
</html>

〈thanks〉

<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 メールフォーム | 確認画面</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<?php
$dsn = 'mysql:dbname=contactus;host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');

$name = htmlspecialchars($_SESSION['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_SESSION['email'], ENT_QUOTES, 'UTF-8');
$message = htmlspecialchars($_SESSION['message'], ENT_QUOTES, 'UTF-8');
// メール本文の組み立て
$mail_sub = 'お問い合わせを受け付けました。';
$mail_body = <<<EOM
--------------------------------------------------
【Webサイトからのメール】

お名前：{$uname}
メールアドレス：{$email}
メッセージ：{$message}
--------------------------------------------------
EOM;
$mail_body = html_entity_decode($mail_body,ENT_QUOTES,"UTF-8");
$mail_head = 'From:ef7038@gmail.com';
mb_language('Japanese');
mb_internal_encoding("UTF-8");
mb_send_mail($email,$mail_sub,$mail_body,$mail_head);

$sql = 'INSERT INTO inquiry(name, email, message) VALUES("'.$name.'","'.$email.'","'.$message.'")';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();

 $dbh = null;
?>
<div id="container">
<div id="inquiry">
<h1>ご入力ありがとうございました</h1>
<p>以下の内容で受け付けました。</p>
<ul>
<li>お名前：<?php print $name ?></li>
<li>メールアドレス：<?php print $email ?></li>
<li>お問合せ内容：<?php print $message ?></li>
</ul>
<p><a href="1028_form1.php">トップページに戻る</a></p>
</div>
</div>
</body>
</html>

〈menu〉

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データベース管理メニュー</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<div id="container">
<div id="inquiry">
<h1>管理メニュー</h1>
<ul>
<li><a href="1028_list1.php">お問い合わせ内容一覧</a></li>
<li><a href="1028_search1.html">お問い合わせ内容検索</a></li>
</ul>
</div>
</div>
</body>
</html>

〈list〉

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 メールフォーム | 登録データ一覧</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<div id="container">
<?php
$dsn = 'mysql:dbname=contactus;host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');

$sql = 'SELECT * FROM inquiry WHERE 1';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();

print '<table id="dblist">'."\n";
  print '<th>No</th><th>お名前</th><th>メールアドレス</th><th>問い合わせ内容</th>'."\n";

while(1){
  $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
  if($rec == false){
  break;
  }
  print '<tr>'."\n";
  print '<td>' . $rec['code'] . '</td>';
  print '<td>' . $rec['name'] . '</td>';
  print '<td>' . $rec['email'] . '</td>';
  print '<td>' . $rec['message'] . '</td>';
  print '<tr>'."\n";
}
print '</table>'."\n";

$dbh = null;
?>

<p><a href="1028_menu1.html">メニューに戻る</a></p>
</div>
</body>
</html>

〈search〉

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データベース管理メニュー</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<div id="container">
<div id="inquiry">
<section>
<h1>問い合わせ内容検索</h1>
<form action="1028_search1.php" method="post" id="search">
<input type="text" name="code" id="code" size="20"><br>
<input type="submit" name="submit" value="検索">
</form>
<p><a href="1028_menu1.html">メニューに戻る</a></p>

<ぢv>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 メールフォーム | 登録データ一覧</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
<link rel="stylesheet" href="css/1028_style.css" media="all">
</head>
<body>
<div id="container">
<?php
$code = $_POST['code'];

$dsn = 'mysql:dbname=contactus;host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');

$sql = 'SELECT * FROM inquiry WHERE code='.$code;
$stmt = $dbh -> prepare($sql);
$stmt -> execute();

print '<table id="dblist">'."\n";
  print '<th>No</th><th>お名前</th><th>メールアドレス</th><th>問い合わせ内容</th>'."\n";

while(1){
  $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
  if($rec == false){
  break;
  }
  print '<tr>'."\n";
  print '<td>' . $rec['code'] . '</td>';
  print '<td>' . $rec['name'] . '</td>';
  print '<td>' . $rec['email'] . '</td>';
  print '<td>' . $rec['message'] . '</td>';
  print '<tr>'."\n";
}
print '</table>'."\n";

$dbh = null;
?>
<p><a href="1028_search1.html">検索画面に戻る</a></p>
</div>
</body>
</html>

2013-10-17

PHPまとめ課題（１）

if文

変数varに代入された数値に応じて以下のようなメッセージを表示させなさい
数値が偶数だった場合：「変数varに代入された値は、偶数です。」
数値が奇数だった場合：「変数varに代入された値は、奇数です。」

<?php
$var = 6;

if( $var % 2 ==0 ){
print '変数varに代入された値は、偶数です。';
  }else{
print '変数varに代入された値は、奇数です。';
}

if文

$var1と$var2に代入された数値に応じて以下のようなメッセージを表示させなさい
２つの値は同じ数値です。
$var1より$var2のほうが大きい値です。
$var1より$var2のほうが小さい値です。

<?php
$var1 = 6;
$var2 = 4;

if($var1 == $var2){
  print '２つの値は同じ数値です。';
}elseif($var1 < $var2){
  print '$var1より$var2のほうが大きい値です。';
}else{
  print '$var1より$var2のほうが小さい値です。';
}

switch文

変数varに代入された数値が「1または2または3」の場合、以下のようなメッセージを表示させなさい
数値が「1」だった場合：「変数varに代入された値は、1です。」
数値が「2」だった場合：「変数varに代入された値は、2です。」
数値が「3」だった場合：「変数varに代入された値は、3です。」

<?php
$var = 3;

switch($var){
  case 1: print '変数varに代入された値は、1です。';
    break;
  case 	2: print '変数varに代入された値は、2です。';
    break;
  case 3: print '変数varに代入された値は、3です。';
    break;
  default:
    print 'それ以外が入力されました';
}

for文

ブラウザに以下のように表示されるよう記述しなさい。
for文を使用

<?php

for( $i=1; $i<=3; $i++){
  print 'TEST' . $i . '<br>';
}for( $j=1; $j <=3; $j++){
  print 'PASS' . $j . '<br>';
}
print 'ループが終了しました。';

for文

ブラウザに以下のように表示されるよう記述しなさい。
for文を使用

<?php
for( $j=2; $j <= 10; $j+=2 ){
  print $j . '<br>';
}
  print 'ループが終了しました。';

配列（値の合計）

$tensu = array ( 70, 55, 80, 95, 60 );
合計点を、for文、foreach文、array_sum関数を使ってそれぞれ求めなさい

<?php
//array_sum
$tensu = array ( 70, 55, 80, 95, 60 );
  print array_sum($tensu);
?>
<br>
<?php
//foreach
$tensu = array ( 70, 55, 80, 95, 60 );
$sum = 0;
  foreach( $tensu as $value ){
  $sum +=$value;
}
print $sum;
?>
<?php
//for
$tensu = array ( 70, 55, 80, 95, 60 );
  $sum = 0;
for( $i = 0; $i < count($tensu); $i++ ){
  $sum += $tensu[$i];
}

配列（値の最高値）

$tensu = array ( 70, 55, 80, 95, 60 );
ブラウザに最高値を表示するように記述しなさい。

<?php
$tensu = array ( 70, 55, 80, 95, 60 );
  print max($tensu);

配列（値の取得）

ブラウザに以下のように表示されるよう記述しなさい。

<form action="1017_php_q08_output.php" method="post">
<input type="checkbox" name="check1[]" value="音楽" checked>音楽
<input type="checkbox" name="check1[]" value="旅行">旅行
<input type="checkbox" name="check1[]" value="スポーツ" checked>スポーツ
<input type="checkbox" name="check1[]" value="映画" checked>映画
<br>
<input type="submit" value="送信">
</form>

</body>
</html>

<?php
for( $i = 0; $i < count($_POST[ 'check1' ]); $i++ ){
  print htmlspecialchars( $_POST[ 'check1' ][ $i ],ENT_QUOTES) . '、';
}
print 'が選択されました。';

簡易計算機（足し算）

以下のように表示するPHPを記述しなさい

<form action="1017_php_q09_output.php" method="post">
<input type="text" name="textA" value="" >
　+　
 <input type="text" name="textB" value="" >
 　＝？
<br>
<input type="submit" value="計算">
</form>

<?php
$a = $_POST[ 'textA' ];
$b = $_POST[ 'textB' ];
$c = $a + $b;
print '計算結果は<br>';
print $a . '+' . $b . '=' . $c;

最小値を求める

ブラウザに以下のように表示されるよう記述しなさい。

<form action="1017_php_q10_output.php" method="post">
数値A：<input type="text" name="num1" value="" >
<br>
数値B：<input type="text" name="num2" value="" >
<br>
<input type="submit" value="送信">
</form>

<?php
$ans = mini( $_POST[ 'num1' ], $_POST[ 'num2' ] );//miniは独自関数
  print  '最小値は' . $ans . 'です';
  function mini( $functionNum1, $functionNum2 ){
  if( $functionNum1 < $functionNum2 )
  return//miniにfunctionNum1を戻す
  $functionNum1;
  else
  return
  $functionNum2;
}
?>

2013-10-08

フォーム

PHP

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テーブルフォーム</title>
<link rel="stylesheet" href="css/1008_3_style.css" media="all">
</head>
<body>
<form action="1008_3_output.php" method="post">
  <table>
    <tr>
      <th><label for="name">氏名</label></th>
      <td><input type="text" name="name" id="name" size="30" maxlength="60"></td>
    </tr>
    <tr>
      <th><label for="job">職業</label></th>
      <td><select name="job">
               <option value="" selected>以下から選択してください</option>
               <option value="勇者">勇者</option>
               <option value="魔法使い">魔法使い</option>
               <option value="剣士">剣士</option>
               <option value="僧侶">僧侶</option>
             </select></td>
    </tr>
    <tr>
      <th>性別</th>
      <td>
        <input type="radio" name="gender" id="gender_male" value="男性">
         <label for="gender_male">男性</label><br>
        <input type="radio" name="gender" id="gender_female" value="女性">
         <label for="gender_female">女性</label>
       </td>
    </tr>
    <tr>
      <th>転職希望</th>
      <td>
        <label><input type="checkbox" name="recruit[]" value="勇者" checked>勇者</label><br>
        <label><input type="checkbox" name="recruit[]" value="賢者">賢者</label><br>
        <label><input type="checkbox" name="recruit[]" value="武闘家">武闘家</label><br>
        <label><input type="checkbox" name="recruit[]" value="遊び人">遊び人</label>
      </td>
    </tr>
    <tr>
      <th><label for="introduction">自己紹介</label></th>
      <td>
        <textarea name="introduction" id="introduction" rows="3" cols="40" value=""></textarea>
      </td>
    </tr>
  </table>
  <input type="submit" value="送信" class="btn">
</form>
</body>
</html>

@charset "UTF-8";

table {
  border-collapse: collapse;
  border-spacing: 0;
  color: #333;
  font-size: 14px;
  width:400px;
}
tr {
  border: 1px solid #787878;
}
th {
  background: #7587AA;
  color: #FFF;
  font-weight: normal;
  padding:5px;
}
td {
  background:#EEE;
  padding:5px;
}
input.btn {
  text-align: center;
  font-size: 90%;
  width: 50px;
  margin: 10px auto;
}
.btn {
  color: #333;
  border: 1px solid #AAA;
  cursor: pointer;
  background: #EEE;
  padding:3px;
}
.btn:hover {
  color: #666;
  background: #FFF;
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テーブルフォーム</title>
<link rel="stylesheet" href="css/1008_3_style.css" media="all">
</head>
<body>
<?php
  $name = htmlspecialchars( $_POST['name'], ENT_QUOTES, 'UTF-8' );
  $color = htmlspecialchars( $_POST['job'], ENT_QUOTES, 'UTF-8' );
  $gender = htmlspecialchars( $_POST['gender'], ENT_QUOTES, 'UTF-8' );
  $recruit = htmlspecialchars( implode("、", $_POST['recruit']), ENT_QUOTES, 'UTF-8' );
  $introduction = nl2br(htmlspecialchars( $_POST['introduction'], ENT_QUOTES, 'UTF-8' ));
?>
<table>
    <tr>
      <th>氏名</th>
      <td><?php print $name; ?></td>
    </tr>
    <tr>
      <th>職業</th>
      <td><?php print $color; ?></td>
    </tr>
    <tr>
      <th>性別</th>
      <td><?php print $gender; ?></td>
    </tr>
    <tr>
      <th>転職希望</th>
      <td><?php print $recruit; ?></td>
    </tr>
    <tr>
      <th>自己紹介</th>
      <td><?php print $introduction; ?></td>
    </tr>
  </table>
</body>
</html>

ポイント１

チェックボックスで複数選択したとき、配列を拾うようにするための記述

input.php側
<label><input type="checkbox" name="変数名[]" value="○○">○○</label>

output側
$recruit = htmlspecialchars( implode("くぎりの語句", $_POST['変数名']), ENT_QUOTES );

ポイント２

textareaに改行を入れた入力をされたとき、その改行を反映して表示させる記述

$変数名 = nl2br(htmlspecialchars( $_POST['変数名'], ENT_QUOTES ));

2013-10-07

RSSまとめサイト

PHP

受講生のブログまとめ
http://efgraphics.net/71blogrss/

2013-10-02

RSSを取得

PHP

このブログのRSSを取得する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部RSSを取得・表示</title>
<style>
li {
  font-size: 0.875em;
  line-height: 1.4;
  margin-bottom: 4px;
}
</style>
</head>
<body>
<ul>
<?php
$rss = simplexml_load_file('http://d.hatena.ne.jp/ef7038/rss');
$i = 1;
foreach ($rss -> item as $item) {
if(++$i>5) break;  //記事を４つまで表示
$dc = $item->children('http://purl.org/dc/elements/1.1/');
$link = $item->link;
$title = $item->title;
$date = date('Y.m.d', strtotime($dc->date));

//$desc =$item->description;
print "<li><a href=\"$link\" title=\"$title\" target=\"_blank\">$title</a><span>($date)</span></li>\n";
}
?>

</ul>
</body>
</html>

Yahoo! トピックスの RSS を表示　（RSS2.0）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! トピックスの RSS を表示</title>
<style>
body, ul, dl, dt, dd, h1, h2, h3{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
h3 {
  margin: 20px 0 20px 20px;
}
dl {
  margin: 10px 0 0 40px;
  overflow: hidden;

}
dt {
  float: left;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom:1em;
 }
dd {
  padding-left: 120px;
  line-height: 1.4;
  margin-bottom:1em;
}
</style>
</head>
<body>
<h3>RSSを表示</h3>
<?php
$url ="http://rss.dailynews.yahoo.co.jp/fc/rss.xml";
$rss = file_get_contents($url);
$xml = simplexml_load_string($rss);

$channel = $xml->channel;
$feed_title = $channel->title;


print '<h3>'.$feed_title.'</h3>';
print '<dl>';
foreach ($channel->item as $item) {
  $link = $item-> link;
  $title = $item-> title;
  $date = $item-> pubDate;
  $date = date('Y.m.d.', strtotime($date));
  $desc = $item-> description; //つかってない

print '<dt>' . $date . '</dt>';
print "<dd><a href=\"$link\"title=\"$title\">$title</a></dd>\n";
}
print '</dl>';
?>

</body>
</html>

アメブロやJugem（RSS1.0の書き方）

　Jugemの場合はアドレスの末尾に"〜/?mode=rss"とつける。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部RSSを取得・表示</title>
<style>
li {
  font-size: 0.875em;
  line-height: 1.4;
  margin-bottom: 4px;
}
</style>
</head>
<body>
<ul>
<?php
$rss = simplexml_load_file("http://rssblog.ameba.jp/staff/rss.html");
$i = 1;
foreach ($rss -> item as $item) {
if(++$i>5) break;
$dc = $item->children('http://purl.org/dc/elements/1.1/');
$link = $item->link;
$title = $item->title;
$date = date('Y.m.d', strtotime($dc->date));

print "<li><a href=\"$link\" title=\"$title\" target=\"_blank\">$title</a><span>($date)</span></li>\n";
}
?>
</ul>
</body>
</html>

2013-09-28

date関数

PHP

フォーマット文字列

mktime関数

タイムスタンプ = mktime( 時間, 分, 秒, 月, 日, 年 );

if文

if文

switch文

for文

for文

配列（値の合計）

配列（値の最高値）

配列（値の取得）

簡易計算機（足し算）

最小値を求める

ポイント１

ポイント２

このブログのRSSを取得する。

Yahoo! トピックスの RSS を表示 （RSS2.0）

アメブロやJugem（RSS1.0の書き方）

フォーマット文字列

mktime関数

Yahoo! トピックスの RSS を表示　（RSS2.0）