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

More Related Content

Viewers also liked

Similar to System1 ajax

More from Jun Chiba

System1 ajax