始めの一歩

今日から前振りなしでいきなりウェブ・アプリを作っていきますよ。

＜最初の準備＞
あなたのwindowsに「XAMPP」を入れましょう。

http://www.apachefriends.org/jp/xampp-windows.html

C:\xampp にインストールしてください。とりあえずいきなり http://localhost/ にアクセスすれば何かが動くはず。細かい設定は後回しで。

C:\xampp\htdocs 以下のフォルダに乗っけたものがlocalhostに反映されます。まずは、そこに labs というフォルダを作ってみましょうか。今後しばらくphpなどはそこに入れていきましょう。アクセスは http://localhost/labs/... になります。

＜では早速。＞

以下の２ファイルを labs に置いてみてください。

・janken.php
<?php
// （１）
if (isset($_GET["janken"])){
	janken_exec($_GET["janken"]);
} else {
	janken_input();
}
function janken_input(){
	// （２）
	$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){
	//（３）
	$my_hand = array('goo' => 1, 'choki' => 2, 'paa' => 3);
	$my_hand_jp = array('goo' => 'グー', 'choki' => 'チョキ', 'paa' => 'パー');
	$aite_hand_jp = array( 1 => 'グー', 2 => 'チョキ', 3 => 'パー');
	//（４）
	$aite_hand = rand(1, 3);
	$battle = $my_hand[$hand] - $aite_hand;
	//（５）
	switch ($battle) {
		case -1 :
		case 2  :
			$result = "あなたの勝ちです。";
			break;
		case 0  :
			$result = "引き分けです。";
			break;
		default :
			$result = "あなたの負けです……";
	}
	//（６）
	$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>
	<!-- （７） -->
	<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行近くてビビリますね。僕も貼ってみてビビった。

ということで明日から、これを元に色々いじってみましょうか。細かい解説はまた明日。。