System1 ajax

1
０からのプログラミング講座
システム開発
© 株式会社HEART QUAKE
本⽂文書のいかなる部分をも、事前の許可なく複写したり転送したりすることはできません。

2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
システムを開発する
ウェブサービスの多くのは、これまで学習してきたPHP、MySQL、
そしてそれらによって作り出されるHTML、CSSによって構成されて
います。ここまでの学習内容を使って、ウェブサービスを構築しま
しょう。

3
テーブル構造
count
回数
win_lose
勝ち=1 負け=-1
あいこ= 0
input_datetime
勝負⽇日付
1 1 2012-09-11 23:10:12
2 -1 2012-09-11 23:13:22
jyanken_tbl(じゃんけん結果保存テーブル)
l  じゃんけんの結果を保存するデータベース
-  データベースの構成は以下のようにした。

4
レコードの操作
l  試しに１回データの挿⼊入をしてみよう
-  今回はユーザーが勝ち、コンピュータが負けとした。
ü win_lose が１となっている。
-  http://a1.zeroprm.com/phpmyadmin/
-  ユーザ名:b1_sato、パスワード：b1_sato
ü b1_satoを選択する
-  countは書かなくても⾃自動的に算出してくれる
-  sysdate()と書くと、実⾏行行した時刻を⾃自動で算出してくれる
INSERT jyanken_̲tbl(win_̲lose,input_̲datetime)
VALUES ( 1,sysdate() )
どのカラムにどのテーブルに
どんな値を

5
ここまではphpMyAdminから
SQLを実⾏行行してきました。
ここからはphpからSQLを実⾏行行します！

6
処理理の流流れ
情報を⼊入⼒力力する1 2 3
HTML
情報を受け取る＆
SQLを実⾏行行する
情報を登録する
PHP SQL

7
まずはイメージで捉えましょう！
l  phpMyAdminでSQLを実⾏行行したプロセスを３つに分解
l  STEP① まずはログインして、データベースを選択
l  今回はb1_satoを選択しました
l  STEP② 次に実⾏行行したいSQLを記述
l  STEP③ 最後に実⾏行行ボタンを押す
このステップをプログラムに変換します！

8
STEP① 　ログインしてデータベースに接続
<?php
//まず、プログラムとデータベースとを接続
//サーバー名、ユーザー名、パスワードの順番で書いてあります
$connect = mysql_connect(”localhost”,”b1_sato”,”b1_sato”);
//insert時の⽇日本語⽂文字化けを回避する
mysql_query(”SET NAMES utf8”,$connect);
/*
ここに続きを書いていきます。
*/
//最後にDBへの接続を切切断
mysql_close($connect);
?>

9
STEP② SQLの記述
<?php
/*
ここにinsert⽂文を書いていきます。
※パワポの関係で２⾏行行になっていますが、1⾏行行で書いてOKです。
*/
echo ”insert jyanken_tbl(win_lose,input_datetime)
values( 1, sysdate() ) ”;
?>

10
STEP③ 　実⾏行行ボタンを押す
<?php
/*
構⽂文 mysql_db_query(データベース名 = b1_sato,実⾏行行したいSQL)
これでPHPからSQLを実⾏行行できる
*/
mysql_db_query(”b1_sato” , ”insert jyanlen_tbl(win_lose,input_datetime)
values(1 , sysdate()” );
?>

11
Ajaxを使おう (5/5)
l  ⼊入⼒力力されたメールアドレスにメールを送ろう！
-  まずは⼊入⼒力力されたアドレスを表⽰示する
<html><head>
<meta charset="utf-8"> <title>メール送信</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready( function() {
$("button").click(function(){
alert($("#email").val());
});
});
</script>
</head><body>
メールアドレスを入力して下さい。

<input type="text" id="email"><br>
<button>メール送信</button>
</body></html>
お決まりの書き⽅方
buttonタグがクリック
された時にやることは・・・
復復習

12
-  ⼊入⼒力力されたアドレスをPHPに送る(HTML側)
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready( function() {
$("button").click(function(){

$.post(
"send_mail.php",
{email:$("#email").val()},
function(){
alert("メール送信完了！")
}
);
});
});
</script>
以下省略
このhtmlと同じサーバーの
同じフォルダにある、
send_mail.phpを実⾏行行して！
emailというタグをつけて
idがemailの⼊入⼒力力欄のデータを
phpに送ります。
phpが終わったら、alertを出して。
復復習

13
-  ⼊入⼒力力されたアドレスを受けとってメールを送る(PHP側)
<?php
mb_language("japanese");
mb_internal_encoding("utf8");
mb_send_mail(
$_POST["email"],
"you got mail",
"from PHP",
"From:info@heart-quake.com”
);
?>
mb_send_mailは
宛先 , 件名 , 本⽂文 , 差出⼈人
の順番で記述する
※詳しくはPHPの資料料参照
$_POST[”JQueryでつけたタグ名”]
※POSTは⼤大⽂文字！
と書くことでHTMLからデータを受け取る
ことができる。
復復習

14
STEP③ 　実⾏行行ボタンを押す
<?php
/*
実際に登録するデータをAjaxで受け取ったデータとする
*/
mysql_db_query(”b1_sato” , ”insert jyanlen_tbl(win_lose,input_datetime)
values($_POST[”te”] , sysdate()” );
?>

15
お疲れ様でした！！

System1 ajax

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to System1 ajax

Similar to System1 ajax (20)

More from Jun Chiba

More from Jun Chiba (20)

System1 ajax