≪PHP,jQuery初心者≫たこやきスケールの作り方
こんにちは。自分で稼ぐ力を付けるためにプログラミングの勉強を始めたナナ子です。
初めてのブログでいきなりですが、最近つくった「たこやきスケール」というミニサイトの作り方を解説していきたいと思います。
これから同じような勉強をしようとしている方や、今まさにPHPやjQueryを勉強中という方の参考になればということと、これを書くことで自分の記憶への定着も図ります。
「たこやきスケール」とは？
先日作った「たこやきスケール」とは、下記のようなページで、自分の身長と体重を「たこやき」という単位を使って表せるというものです。PHPを勉強されている方は、「入力された数字を＄_POSTで受け取って、計算結果を表示する」という流れが容易に想像できる単純な作りです。
https://www.survival40.com//takoyaki
私のプログラミングレベル
現在の私のプログラミングのレベルですが、
◎プログラミングの勉強を始めて60日くらい
◎PHPとjQueryの勉強はおよそ一か月、毎日だいたい2時間前後の勉強
◎PHPは主にProgate,PHPの教科書をざっと終わらせて、だいたい何ができるか把握できた程度。
◎jQueryはProgateを1回全部やった程度。
とにかく、だいたいどんなことができるかを把握して、細かいところは検索したり本を見て思い出しながら書けるとう程度のレベルです。
とりあえずコード公開
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>たこやきスケール</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<?php
session_start();
//半角にする
$height=mb_convert_kana($_POST["height"],"n","UTF-8");
$weight=mb_convert_kana($_POST["weight"],"n","UTF-8");
if(!empty($_POST)) {
if($height == "") {
$error["height"]="blank";
}
if($weight == "") {
$error["weight"]="blank";
}
//数字じゃなかったら
if(!is_numeric($height)){
$error["height"]="non_num";
}
if(!is_numeric($weight)){
$error["weight"]="non_num";
}
if(empty($error)){
$_SESSION["try"]=$_POST;
header("Location:result.php");
exit();
}
}
?>
<h1 class="top"><span class="title">たこやきスケール </span></h1>
<div class="fadein">
<img src="image/takoyaki.gif">
<img src="image/takoyaki.gif">
<img src="image/takoyaki.gif">
</div>
<p id="lets">身長と体重を「たこやき」で表そう！！</p>
<img src="image/tako.gif">
<div class="balloon1-left">
<p class="inside">大阪では当たり前</p><p class="inside">の単位やで~</p>
</div>
<p><span class="underline">下記にあなたの身長と体重を入れてください</span></p>
<form action="" method="post">
<p class="input">身長<input class="square" type="text" name="height" size="3" maxlength="3" value="<?php echo htmlspecialchars($_POST['height'],ENT_QUOTES,'UTF-8'); ?>" />cm</p>
<?php if($error["height"]=="blank"): ?>
<p class="error">※身長を入力してやー</p>
<?php endif; ?>
<?php if($error["height"]=="non_num"): ?>
<p class="error">※数字を入力してやー</p>
<?php endif; ?>
<p class="input">体重<input class="square" type="text" name="weight" size="3" maxlength="3" value="<?php echo htmlspecialchars($_POST['weight'],ENT_QUOTES,'UTF-8'); ?>" />kg</p>
<?php if($error["weight"]=="blank"): ?>
<p class="error">※体重を入力してやー</p>
<?php endif; ?>
<?php if($error["weight"]=="non_num"): ?>
<p class="error">※数字を入力してやー</p>
<?php endif; ?>
<p><input class="submit" type="submit" value="何たこやきか調べる"></p>
</form>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>たこやきスケール</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<?php
session_start();
if(!isset($_SESSION["try"])){
header("Location:index.php");
exit();
}
$_POST=$_SESSION["try"];
$height=mb_convert_kana($_POST["height"],"n","UTF-8");
$weight=mb_convert_kana($_POST["weight"],"n","UTF-8");
?>
<p class="top res_top">あなたの身長は</p>
<div class="container">
<p class="height_num"><span class="result fadein"><?php echo ceil($height/3.5); ?></span><span class="takoyaki">たこやき</span></p>
<img id="height_img" src="image/kenkoushindan01_shinchou.gif">
</div>
<p class="top res_top">あなたの体重は</p>
<div class="container">
<img src="image/kenkoushindan03_taijuu_boy.gif">
<p class="weight_num"><span class="result fadein"><?php echo ceil($weight/0.22); ?></span><span class="takoyaki">たこやき</span></p>
</div>
<?php
unset($_SESSION["try"]);
?>
<form action="index.php">
<p><input class="submit" type="submit" value="戻る"></p>
</form>
</body>
</html>
$(function(){
$("h1").slideDown(1000);
$(".fadein").fadeIn(1000);
$(".res_top").animate({marginTop:"60px"},500).animate({marginTop:"0px"},400);
});PHPで苦労したポイント
PHPの設定において、今回手間取ったのは下記ポイントでした。
- 身長と体重の入力において、数字以外と空白の場合はエラー表示をする
この設定の仕方と、時間がかかってしまった点を解説していきます。
エラー表示設定の大枠
エラー表示のための大枠の設定は下記の通りです
- index.phpの<form>タグのactionを空にして、エラーチェックできるようにする
- 入力された身長・体重の数字が全角の場合は半角に直す
- 身長・体重が空白の場合、もしくは数字以外の場合はエラー表示をする
- エラーチェック後にエラーがなければ$_SESSIONで数字を引き継いで結果ページを表示する
- エラー表示をした場合、入力された身長・体重の値は消さずにそのまま残す
(1)<form>タグのactionを空にする
身長と体重を入力する<form>タグのactionを「””」にすることで、次のページに飛ぶ前にエラーチェックができるようにします。
<form action="" method="post">(2)入力された数字を半角にする
もし入力された身長と体重の数値が全角の場合も、計算で使えるように「mb_convert_kana」を使って半角に直します。
$height=mb_convert_kana($_POST["height"],"n","UTF-8");
$weight=mb_convert_kana($_POST["weight"],"n","UTF-8");(3)空白の場合、もしくは数字以外の場合はエラーを表示する
身長・体重が空白のままだったり、数字以外が入力された場合、「何たこやきか調べる」を押した後に、エラー表示をさせます。
そのためにまず、もし空白だった場合は”blank”を、数字以外だった場合は”non_num” を$errorに代入するようにします。
if(!empty($_POST)) {
if($height == "") {
$error["height"]="blank";
}
if($weight == "") {
$error["weight"]="blank";
}
//数字じゃなかったら
if(!is_numeric($height)){
$error["height"]="non_num";
}
if(!is_numeric($weight)){
$error["weight"]="non_num";
} そしてもし＄errorに”blank”か”non_num”が入っていたら、エラー表示をさせます。
<?php if($error["height"]=="blank"): ?>
<p class="error">※身長を入力してやー</p>
<?php endif; ?>
<?php if($error["height"]=="non_num"): ?>
<p class="error">※数字を入力してやー</p>
<?php endif; ?>ただ、実はここで思っていた通りにならなかったことが一つあります。入力された値が数字以外だたら”non_num”を$errorに代入するという設定が、空白のときも「数字以外」だとみなされるようで、結局はどちらも”non_num”が$errorに代入されていたということです。エラーメッセージとして「※数字を入力してやー」という文を入れていたので、空白の場合に出ても違和感はないのでそのままにしておきましたが、もしこれを区別できる方法があれば教えてください・・！
(4)$_SESSIONで数字を結果ページに引き継ぐ
もしエラーがなかったら、$_SESSIONに$_POSTを入れて、headerを使って結果ページに飛ぶ設定が、下記の記述です。
if(empty($error)){
$_SESSION["try"]=$_POST;
header("Location:result.php");
exit();ここで、私がずっとつまずいたのが、結果ページで下記の記述がなかったため、ずっと結果ページの$_POSTが空の状態だったんですね。。
$_POST=$_SESSION["try"];つまり、$_SESSIONをまた$_POSTに返さないといけなかったんです。。！
この1行がないために、ずっと計算ができなくて、どうしてPOSTされてないのかめちゃくちゃ悩みました。。。
(5)エラー表示をした場合、入力された値はそのまま残す
例えば身長を入力したけど、体重だけ入力していなかった場合、体重のところにエラー表示はしますが、身長に入力していた値はそのまま残したいです。そのために、<input>のvalueの値をpostされた値にします。
<p class="input">身長<input class="square" type="text" name="height" size="3" maxlength="3" value="<?php echo htmlspecialchars($_POST['height'],ENT_QUOTES,'UTF-8'); ?>" />cm</p><p class="input">体重<input class="square" type="text" name="weight" size="3" maxlength="3" value="<?php echo htmlspecialchars($_POST['weight'],ENT_QUOTES,'UTF-8'); ?>" />kg</p>以上が、PHPの設定にて苦労したポイントです。
jQueryで工夫したところ
jQueryは簡単で単純なものしか使っていないですが、結果ページを出すときはじゃーんという感じで動きを出して表示したかったので、その記述のみ紹介します。
$(".res_top").animate({marginTop:"60px"},500).animate({marginTop:"0px"},400);上記記述は、margin-top を60pxにする動きを500ミリ秒で行ったあと、margin-topを0pxにする、つまり元に戻す動きを400ミリ秒かけて行う、という動きになります。
跳ねるような動きになるので、じゃーんっと感がでるかなと思い使いました。
最後に
以上が、今回の「たこやきスケール」でのポイントとなるPHPとjQueryについてでした！ほんとに初心者で簡単なことしかしていませんが、こうやって実際に勉強したことを使ってサイトを作って、それをこやってブログに書くことで、より勉強したことが見についたと実感しています。
また、これから勉強を始める方や、今ちょうど勉強している方にとってちょっとでも参考になれば幸いです。
ご意見やアドバイスなどあれば、ぜひ教えてください！