目次
本研修で使用するサーバーはさくらサーバーである。
URLは、http://seminar-junior.jeez.jp となっている。
これは、若手SE向け研修用に取得したドメインである。
FTPサーバーも同じ名前である。 ユーザ名、パスワードはセミナー中に示す。
DBとしてMySQLが利用できる。
サーバー名はmysql514.db.sakura.ne.jpであるが、これは上記のウェブサーバーのみからアクセス可能である。
データベース管理ツールはphpMyAdminがここから使用できる。
ユーザ名、パスワードはセミナー中に示す。
ウェブサーバーに自分用のページを準備する。
自分用のページを作成し、以下のファイルを置く。
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>渕田のホームページ</title> </head> <body> <h1>渕田のホームページ</h1> <p>渕田のホームページへようこそ！</p> <ul> <li><a href="test.php">PHPのテスト</a></li> </ul> </body> </html>
PHPについては「PHP マニュアル」で検索するとトップに出るPHPマニュアルですべて解説されている。
PHPは、C言語やJava言語と同様な一般的なプログラミング言語である。
しかし多く場合、PHPはサーバーサイドで動作するプログラムを記述するためによく使われるスクリプト言語である。 以前はPerlやshも使われていたが、近年はPHPが使われることが多い。 （さらに最近はnode.jsなどのサーバーサイドJavaScriptも多く用いられる。）
PHPの特徴の1つとして、HTMLの中に埋め込んで使うことができる、という事がある。
例として次の簡単なHTMLファイルを見てみよう。ファイル名は "index.php" とする。
<!doctype html>
<html>
<body>
<h1>PHPの第一歩</h1>
<?php print("<p>ここはPHPで出力されています。</p>"; ?>
</body>
</html>
このコードをサーバー上に配置してブラウザからアクセスすると、通常のウェブページが表示される。
このようなページをあえてPHPで出力する必要はないが、これによっていくつかわかることがある。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>PHPのテスト</title>
<script type="text/javascript">
function clicked(){
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var res=document.getElementById("result");
res.innerHTML="<p>"+name+"さんの年齢は"+age+"歳ですね。</p>";
}
</script>
</head>
<body>
<h1>PHPのテスト</h1>
<p>PHPのテストをします。</p>
<form method="post" action="test.php">
<p>
名前：<input type="text" name="name" value="<?php print($_POST['name']); ?>" size="20" />
年齢：<input type="text" name="age" value="<?php print($_POST['age']); ?>" size="5" />
<input type="submit" value="確認" />
</p>
<div>
<?php
if($_POST['name']==""){
print("<p>ここに名前と年齢が表示されます。</p>\n");
}
else{
print("<p>".$_POST['name']."さんの年齢は".$_POST['age']."歳ですね。</p>\n");
}
?>
</div>
<p>
名前：<input type="text" id="name" size="20" />
年齢：<input type="text" id="age" size="5" />
<input type="button" value="確認" onclick="clicked()" />
</p>
</form>
<div id="result"><p>ここに名前と年齢が表示されます。</p></div>
<?php
for($i=0;$i<10;$i++){
print("<p>これはPHPで出力の".$i."です。</p>\n");
}
?>
<script type="text/javascript">
for(var i=0;i<10;i++){
document.write("<p>これはJavascriptで出力の"+i+"です。</p>\n");
}
</script>
</body>
</html>
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>結果</title> </head> <body> <h1>結果</h1> <p> <?php print($_POST['name']); ?>さんの年齢は<?php print($_POST['age']); ?>ですね。 </p> </body> </html>
MySQLサーバーの中に各自のデータベースを準備してある。
PDOでMySQLに接続する際の文字コードの指定。
$pdo = new PDO("mysql:host=dbhost; dbname=dbname","username", "password",
array(PDO::MYSQL_ATTR_INIT_COMMAND=>"SET CHARACTER SET 'utf8'"));
<!DOCTYPE html>
<?php include("my.php"); ?>
<html>
<head>
<meta charset="UTF-8">
<title>PHPによる会員管理</title>
</head>
<body>
<h1>PHPによる会員管理システム</h1>
<form method="post" action="index.php">
<input type="hidden" name="modify" value="<?php print $sel_id; ?>"/>
<p>氏名：<input type="text" name="name" <?php if($sel_id!=""){ print "value='".$data[$sel_id]['name']."'"; } ?> size="20"/></p>
<p>年齢：<input type="text" name="age" <?php if($sel_id!=""){ print "value='".$data[$sel_id]['age']."'"; } ?> size="5" /></p>
<p>メール：<input type="text" name="mail" <?php if($sel_id!=""){ print "value='".$data[$sel_id]['mail']."'"; } ?> size="40"/></p>
<input type="submit" value="<?php print ($sel_id!="")?"修正":"登録"; ?>"/>
</form>
<h2>会員表</h2>
<table border="1">
<tr><th>ID</th><th>氏名</th><th>年齢</th><th>メール</th></tr>
<?php
foreach($data as $d)
print("<tr><td>" . $d['id'] . "</td>" .
"<td>" . $d['name'] . "</td>" .
"<td>" . $d['age'] . "</td>" .
"<td>" . $d['mail'] . "</td>" .
"<td>" .
"<form method='post' action='index.php'>" .
"<input type='hidden' name='del_id' value='" . ($d['id']) . "'>" .
"<input type='submit' value='削除'/>" .
"</form>" .
"</td>" .
"<td>" .
"<form method='post' action='index.php'>" .
"<input type='hidden' name='sel_id' value='" . ($d['id']) . "'>" .
"<input type='submit' value='選択'/>" .
"</form>" .
"</td>" .
"</tr>\n");
?>
</table>
</body>
</html>
<?php
try {
// データベースに接続する
$pdo = new PDO("mysql:host=mysql514.db.sakura.ne.jp; dbname=forcreate_fuchida", "forcreate", "junior2015", array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET 'utf8'"));
// もしPOSTデータがあってmodifyでない場合はデータベースに新規登録する
$name=$_POST['name'];
$age=$_POST['age'];
$mail=$_POST['mail'];
if($_POST['modify']=="" && $name!="" && $age!="" && $mail!=""){
$q="insert into member (name,age,mail) ".
"values ('".$name."','".$age."','".$mail."');";
$pdo->query($q);
}
// もしmodifyなら修正する
if($_POST['modify']!="" && $name!="" && $age!="" && $mail!=""){
$q="update member ".
" set name='".$name."',age='".$age."',mail='".$mail."'".
" where id='".$_POST['modify']."';";
$pdo->query($q);
}
// もしdel_idがあれば、そのIDを削除する
if($_POST['del_id']!=""){
$q="delete from member where id='".$_POST['del_id']."';";
$pdo->query($q);
}
// もしsel_idがあれば、そのIDを保存しておく
$sel_id=$_POST['sel_id'];
// データベースからデータを取り出す
$st = $pdo->query("select * from member;");
$data=null;
while (($d = $st->fetch()))
$data[$d['id']] = $d;
// データベースとの接続を切る
$pdo = null;
} catch (PDOException $e) {
print("<p>" . $e . "</p>");
}
?>
jQueryは大きく2つの目的を持って使われる。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/my.js"></script>
<title>jQueryのテスト</title>
</head>
<body>
<h1>jQueryのテスト</h1>
<form>
<p>名前：<input type="text" id="name" size="20"/>
年齢；<input type="text" id="age" size="5"/>
<input type="button" id="confirm" value="確認"/></p>
</form>
<div id="result"></div>
</body>
</html>
$(function(){
$('#confirm').click(function(){
var name=$('#name').val();
var age=$('#age').val();
$('#result').text(name+"さんの年齢は"+age+"歳ですね。");
});
});