今日から前振りなしでいきなりウェブ・アプリを作っていきますよ。
<最初の準備>
あなたのwindowsに「XAMPP」を入れましょう。
http://www.apachefriends.org/jp/xampp-windows.html
C:\xampp にインストールしてください。とりあえずいきなり http://localhost/ にアクセスすれば何かが動くはず。細かい設定は後回しで。
C:\xampp\htdocs 以下のフォルダに乗っけたものがlocalhostに反映されます。まずは、そこに labs というフォルダを作ってみましょうか。今後しばらくphpなどはそこに入れていきましょう。アクセスは http://localhost/labs/... になります。
<では早速。>
以下の2ファイルを labs に置いてみてください。
・janken.php
・css_main.css
phpはいきなり100行近くてビビリますね。僕も貼ってみてビビった。
ということで明日から、これを元に色々いじってみましょうか。細かい解説はまた明日。。
<最初の準備>
あなたのwindowsに「XAMPP」を入れましょう。
http://www.apachefriends.org/jp/xampp-windows.html
C:\xampp にインストールしてください。とりあえずいきなり http://localhost/ にアクセスすれば何かが動くはず。細かい設定は後回しで。
C:\xampp\htdocs 以下のフォルダに乗っけたものがlocalhostに反映されます。まずは、そこに labs というフォルダを作ってみましょうか。今後しばらくphpなどはそこに入れていきましょう。アクセスは http://localhost/labs/... になります。
<では早速。>
以下の2ファイルを labs に置いてみてください。
・janken.php
<?php
// (1)
if (isset($_GET["janken"])){
janken_exec($_GET["janken"]);
} else {
janken_input();
}
function janken_input(){
// (2)
$input_html = <<<_EOD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title> janken.php </title>
<link rel="stylesheet" href="css_main.css" type="text/css" media="all" />
</head>
<body>
<h1>janken.php</h1>
<div class="main">
<form id="janken" method="GET" action="janken.php">
<h2>じゃんけん?</h2>
<div>
<select name="janken">
<option value="goo">グー!</option>
<option value="choki">チョキ!</option>
<option value="paa">パー!</option>
</select>
<br />
<br />
<input type="submit" value="勝負!" />
</div>
</form>
</div>
</body>
</html>
_EOD;
echo $input_html;
}
function janken_exec($hand){
//(3)
$my_hand = array('goo' => 1, 'choki' => 2, 'paa' => 3);
$my_hand_jp = array('goo' => 'グー', 'choki' => 'チョキ', 'paa' => 'パー');
$aite_hand_jp = array( 1 => 'グー', 2 => 'チョキ', 3 => 'パー');
//(4)
$aite_hand = rand(1, 3);
$battle = $my_hand[$hand] - $aite_hand;
//(5)
switch ($battle) {
case -1 :
case 2 :
$result = "あなたの勝ちです。";
break;
case 0 :
$result = "引き分けです。";
break;
default :
$result = "あなたの負けです……";
}
//(6)
$my_hand_out = $my_hand_jp[$hand];
$aite_hand_out = $aite_hand_jp[$aite_hand];
$exec_html = <<<_EOD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title> janken.php(結果) </title>
<link rel="stylesheet" href="css_main.css" type="text/css" media="all" />
</head>
<body>
<h1>janken.php(結果)</h1>
<!-- (7) -->
<div class="main">
<h2>あなた : $my_hand_out 相手 : $aite_hand_out </h2>
<h2>結果は …… $result </h2>
<p>
<a href="janken.php">もう一回勝負!</a>
</p>
</div>
</body>
</html>
_EOD;
echo $exec_html;
}
?>
・css_main.css
body{
color : #444444;
background-color: #eeeeaa;
font-size : 11pt;
margin : 10% 35% 10% 35%;
padding : 0.5em;
text-align : center;
}
h1{
border : 4px double #888888;
padding : 0.2em;
font-size : 13pt;
}
.main{
border : 4px solid #aa8888;
padding : 0;
}
h2{
border-width : 0 0 2px 0;
border-style : dashed;
border-color : #aa8888;
margin : 0.5em 0;
padding : 0.2em 1em;
font-size : 11pt;
}
div{
padding : 1.5em;
}
phpはいきなり100行近くてビビリますね。僕も貼ってみてビビった。
ということで明日から、これを元に色々いじってみましょうか。細かい解説はまた明日。。