昨日これまで作成していたWebアプリが完成した。いや完成したことにした。HTML部分のJavaScriptとCSS3部分は以前に学習のために作成しておいた部分を流用した。PHPとMySQLの部分は付け焼き刃で関連するサイトを調べまくりほとんどパクって稼働まで漕ぎ着けた。
ひとつのアプリを作るのにPHP MySQL JavaScript Jquery HTML5 CSS3これだけのものを使わなくてはいけない時代になったのかと思う。どれも私は中途半端にしか理解していないので、全体を俯瞰してみるとまったく繋がってこないのであります。全部をPHPでやらなくてもJavaScriptで十分な部分もあるだろうし、Jqueryを使えばもっと格好良くできるだろうと思える部分もかなりあるのだが、全部がバラバラの状態で全体が繋がってこないのです。ま、どっちにしても年寄りの冷や水的なプログラムだからしょうがないのだけども。
ソースを公開するのは、自分のバカさ加減がバレるようで結構恥ずかしいのですが、管理部分を除いた表示部分を一応公開してみるか。これで動作することはしているのですが、どこかに欠陥があったら教えて欲しいです。
ソースをアップしてから気づいたのですが、DBの接続部分が３回もあります。プログラム的にはかなり饒舌だと思います。これを１回にまとめて関数化して、引数を渡し条件分岐するのが正しいと思う。なにせこれまではエラーなく動作させることばかり考えてきたので、動くなら、何度でも書けばいいやって、まったく余裕のないことをやっていましたので。少し余裕がでてきました。
因みにDB接続部分だけを関数化して必要な場合だけ呼び出すようにしてみたけど、何故か動作しなかったのであります。なんでかというのを追求しないまま、それぞれの関数の部分に接続文字列をコピペしてしまいました。
実物はこちらにあります。
挑戦！一発免許学科試験問題
なぜか、IEで見ると右側に寄ってしまいます。たぶんCSS3を変更しないとダメだと思います。今のところIE以外のブラウザーで見てください（そんなWEBアプリありかよ^^;）HTML5とCSS3で作成していますので、お！っていう部分があると思います。IEはほとんど対応していません。これからIE対応をしなければいけないのですが、気が重いな。やりたくないな。IE捨てちゃおうかな。別にオレ困らないもんね。IEなんか使っているのが悪いのだから。
<?php
/*****************************************************/
/* 学科問題出題システム */
/*****************************************************/
session_name('hogehoge');
session_cache_expire(90);
session_start();
//システム全体の制御
if ($_SESSION[ "btn_caption" ] == "次の問題" or $_SESSION[ "btn_caption" ] == "") {
making_question(); //新規問題作成へ
} elseif($_SESSION[ "btn_caption" ] == "答え") {
answer(); //答えあわせへ
}
/*****************************************************/
/* 答えの正誤判断する */
/*****************************************************/
function answer(){
global $radio1,$radio2,$kaitou,$kaisetu,$ketuka;
global $div_kaitou,$div_kaisetu,$div_ketuka,$end_div;
$_SESSION[ "btn_caption" ] = "次の問題";
$radio1 = ""; //ラジオボタンを表示しない
$radio2 = ""; //ラジオボタンを表示しない
//正誤判定及びメッセージ作成
if($_REQUEST["seigo"] == 0){
$answer2 = "あなたは上記の問題を○と答えましたが、";
}else{
$answer2 = "あなたは上記の問題を×と答えましたが、";
}
if ($_REQUEST["seigo"] == $_SESSION[ "seikai" ]){
$answer = "おめでとうございます。それは<strong><span style='color: red; font-size: 20pt'>正解</span></strong>です。";
$_SESSION[ "seikaisu" ]++;
}else{
$answer = "残念ですが、それは<strong><span style='color: red; font-size: 20pt'>間違い</span></strong>です。";
}
$kaitou = $answer2 . $answer;
$kaisetu = $_SESSION[ "kaisetu" ];
//---------------これまでの成績を計算する------------------------------
$ritu = round($_SESSION[ "seikaisu" ] / $_SESSION[ "count"] * 100,1);
if ($ritu >= 90) {
$msg = "<strong><span style='color: yellow; font-size: 17pt'>合格圏内です。この実力をキープしてください。</span></strong>";
} elseif ($ritu >= 80) {
$msg = "<strong><span style='color: yellow; font-size: 17pt'>あと１歩です。90％を目指してより一層磨きを掛けてください。</span></strong>";
} else {
$msg = "<strong><span style='color: yellow; font-size: 17pt'>もう少しがんばりましょう!。</span></strong>";
}
$ketuka = "これまでの<strong><span style='color: red; font-size: 20pt'>正解数は" .$_SESSION[ "count"] ."問中". $_SESSION[ "seikaisu" ]. "問</span></strong>です。<strong><span style='color: red; font-size: 20pt'>正解率は" . $ritu . "%</span></strong>です。<br />" . $msg;
$div_kaitou = '<div id="kaitou">';
$div_kaisetu = '<div id="kaisetu">';
$div_ketuka = '<div id="ketuka">';
$end_div = "</div>";
update_go(); //間違った答えをdbに記録する
}
/*****************************************************/
/* 新しい問題を作る */
/*****************************************************/
function making_question(){
global $radio1,$radio2,$kaitou,$kaisetu,$ketuka;
global $div_kaitou,$div_kaisetu,$div_ketuka,$end_div;
$dbname = "hogehoe";
$hostname = "mysq5879.db.sakura.ne.jp";
$userid = "nantara";
$passwd = "kantara";
if(!$con=mysql_connect($hostname,$userid,$passwd)){
print "データベースに接続できません". mysql_error() . "<br />\n";
exit;
} else {
mysql_query("SET NAMES utf8"); //文字化け対策
}
mysql_select_db($dbname,$con);
//問題の総件数を求めます。
$sql="SELECT * FROM mondai";
$rst = mysql_query($sql,$con);
$maxdeta=mysql_num_rows($rst);
//乱数を発生させます。
$rand = mt_rand(1, $maxdeta);
//乱数で得た問題をひとつだけ選択して表示します。
$sql="SELECT * FROM mondai where id = ".$rand;
$rst = mysql_query($sql,$con);
if($rst==False){
print "レコードセット収得に失敗しました。";
exit;
}
$col = mysql_fetch_array($rst);
$_SESSION[ "id" ] = $col{"id"};
$_SESSION[ "mondai" ] = $col{"mondai"};
$_SESSION[ "kaisetu" ] = $col{"kaisetu"};
$_SESSION[ "seikai" ] = $col{"seikai"};
// $_SESSION[ "imgurl" ] = $col{"imgurl"};
$imgurl = $col{"imgurl"};
if(!$col{"imgurl"} == ""){
$_SESSION[ "imgurl" ] = '<img src="http://hogehoge.jp/images/' .$col{"imgurl"}. '" />';
}
$_SESSION[ "access" ] = $col{"access"}; //アクセス数を求める
$_SESSION[ "go" ] = $col{"go"}; //間違いの数を求める
$_SESSION[ "btn_caption" ] = "答え";
$access = $_SESSION[ "access" ]+1;
$id = $_SESSION[ "id" ];
$sql = "UPDATE crowner.mondai SET access = '$access' WHERE id= '$id'";
$rst = mysql_query($sql,$con);
if($rst==False){
print "レコードセット収得に失敗しました。". mysql_error();
exit;
}
mysql_free_result($rst); //レコードセットの解放
$con = mysql_close($con); //データベースの切断
$_SESSION[ "count" ]++;
$kaisetu = ""; $kaitou = ""; $ketuka = ""; //コメントを初期化（空に）する。
$div_kaitou = "";
$div_kaisetu = "";
$div_ketuka = "";
$end_div = "";
$radio1 = '<input type="radio" name="seigo" value="0" checked /> <strong>正</strong> ';
$radio2 = '<input type="radio" name="seigo" value="1" /> <strong>誤</strong> ';
}
/*****************************************************/
/* 間違った問題に+1をつける */
/*****************************************************/
function update_go(){
$dbname = "hogehoe";
$hostname = "mysq5879.db.sakura.ne.jp";
$userid = "nantara";
$passwd = "kantara";
if(!$con=mysql_connect($hostname,$userid,$passwd)){
print "データベースに接続できません". mysql_error() . "<br />\n";
exit;
} else {
mysql_query("SET NAMES utf8");
}
mysql_select_db($dbname,$con); //データベースの選択 ☆この一文は必要です。ここを試しに削除したらエラーになった。
$go = $_SESSION[ "go" ]+1;
$id = $_SESSION[ "id" ];
$sql = "UPDATE crowner.mondai SET go = '$go' WHERE id= '$id'";
$rst = mysql_query($sql,$con);
if($rst==False){
print "レコードセット収得に失敗しました。". mysql_error();
exit;
}
mysql_free_result($rst); //レコードセットの解放
$con = mysql_close($con); //データベースの切断
}
?>
<!--*****************************************************/
/* ＨＴＭＬの表示 */
/*****************************************************-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>挑戦一発自動車免許！学科問題</title>
<!-- The below script Makes IE understand the new html5 tags are there and applies our CSS to it -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="test.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--jquery関連呼出-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<!--twitter呼出関連-->
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
<!--基本的なJsを呼び込む-->
<script src="./kihon.js"></script>
</head>
<body>
<header>
<hgroup>
<h1>挑戦一発自動車免許！学科問題</h1>
<!-- <h2>Media Literacy 2010, Crowner.Co.LTD</h2> -->
</hgroup>
<script src="./header.js"></script>
</header>
<section>
<article>
<h2>第<?= $_SESSION[ "count" ] ?>問目</h2>
<div id="mondai">
<h3 id="no"> NO.</h3>
<?= $_SESSION[ "imgurl" ] ?>
<div id="toi">
<?= $_SESSION[ "mondai" ] ?>
</div>
</div>
<?= $div_kaitou ?>
<?= $kaitou ?>
<?= $end_div ?>
<?= $div_kaisetu ?>
<?= $kaisetu ?>
<?= $end_div ?>
<?= $div_ketuka ?>
<?= $ketuka ?>
<?= $end_div ?>
<div id="frm">
<form method="POST" action=<? $_SERVER[ "PHP_SELF" ] ?>>
<?= $radio1 ?>
<?= $radio2 ?>
<br />
<input type = "submit" name = "btn" value=<?= $_SESSION[ "btn_caption" ] ?>>
</form>
</ div>
</article>
<article>
<script src="./center.js"></script>
</article>
</section>
<nav id="left_nav">
<script src="./testnavi.js"></script>
</nav>
<footer>
<script src="./footer.js"></script>
</footer>
</body>
</html>
