お問い合わせ管理システムの共有ファイル設定

お問い合わせ管理システムの共有ファイル設定
#03 アプリ共通の設定をしよう
http://dotinstall.com/lessons/contacts_php_v2/9803
を元に
共有するものを config.php にかいておいて
あとで require_once() で
必要なときに読み込むようにする
定数の設定は define()を使う
まずデータソースネーム
define(‘DSN’,’mysql:host=localhost;dbname=dotinstall_contacts_php’);
次にDBユーザ
define(‘DB_USER’,’dbuser’);
そしてDBパスワード
define(‘DB_PASSWORD’,’ddpk998Zacv’);
そして、サイトのURL 今回はIPアドレス
define(‘SITE_URL’,’http://192.168.10.248/contacts_php/’);
そして、管理画面
define(‘ADMIN’,SITE_URL.’admin/’);
エラー出力の設定は
error_reporting(E_ALL & ~E_NOTICE);
として、NOTICE以外を出力する
セッションの有効範囲が
session_set_cookie_params(0,’/contacts_php/’);
として
contacts_php のみ有効になるようにする

お問い合わせ管理システムの作成

お問い合わせ管理システムの作成
必要な知識は
html
css
jquery
php
mysql
となる
contacts_php
が作業ディレクトリ
contacts_php/admin/
が管理画面になる
まず、DB作成
#02 データベースの設定をしよう
http://dotinstall.com/lessons/contacts_php_v2/9802
を元にDB作成
create database dotinstall_contacts_php;
grant all on dotinstall_contacts_php.* to dbuser@localhost identified by ‘ddpk998Zacv’;
use dotinstall_contacts_php;
エントリーテーブル作成
create table entries (
id int not null auto_increment primary key,
name varchar(255),
email varchar(255),
memo text,
created datetime,
modified datetime);
これらのSQLコマンドを
qa.sql
というようなSQLファイルにしておくと
他の環境でも簡単につくれるし
毎回コマンドをうたなくてもいいので効率的
sql ファイルができたら
mysql -u root -p < qa.sql を実行して mysql の root パスワードの入力することで SQLが実行され、DBが作成される mysql -u root -p でログインして use dotinstall_contacts_php; desc entries; で内要確認してできていることを確認 カラムの意味は id int not null auto_increment primary key, で主キー作成+自動連番 name varchar(255), 名前 email varchar(255), メルアド memo text, メモ

投稿ファイルのエラーチェック

投稿ファイルのエラーチェック
#08 エラーチェックを行う
http://dotinstall.com/lessons/upload_image_php/4508
を参考に、投稿されたファイルにエラーがないかチェックする
編集するファイルは、upload.php
ファイルの中にある error というフィールドがあり
この中にいろいろな値が入っているので
これを使ってエラーチェックする
条件式は if でつくる
if($_FILES[‘image’][‘error’] != UPLOAD_ERR_OK){
echo “エラーが発生しました”;
exit;
}
とする
UPLOAD_ERR_OK
については
http://jp.php.net/manual/ja/features.file-upload.errors.php
に乗っているように
値は0で、エラーがなく、アップロード成功という意味
なので、 if の中で != となっているので error の値が0でない、つまりアップロード失敗したら、
echo でエラーメッセージを表示している
次に、ファイルサイズのチェック
ファイルサイズを調べるには
添付ファイルのサイズを調べる
$size =filesize($_FILES[‘image’][‘tmp_name’]);
で、一時ファイルの大きさを調べて格納
これを if で判定する
これで、ファイルサイズが0 !size
もしくは
ファイルサイズが MAX_FILE_SIZE を
超える場合にはエラーを echo で表示する
if’!isze || $size > MAX_FILE_SIZE){
echo “ファイルサイズが大きすぎます”;
exit;
}
とする
これで、大きいサイズのファイルをアップロードするとエラーが発生する

画像掲示板のアップロード処理

画像掲示板のアップロード処理
#06 アップロード処理の流れを確認する
http://dotinstall.com/lessons/upload_image_php/4506
を元に、アップロード処理をする upload.php をつくり
実装していく
この動画では、実際のコードをかくよりも流れの解説
まず、require_once(‘confg.php’);
で設定ファイルの読み込み
そこから先の流れとしては
エラーチェック
保存するファイル名を作成
元画像を保存し、画像が大きいなら、縮小画像をつくり保存
そして、index.php へ飛ばすという流れ
アップロードされたファイルのあつかい方については
#07 $_FILESの中身を確認する
http://dotinstall.com/lessons/upload_image_php/4507
を参照
いままでのように、通常のフォームから
画像や入力内容を扱うなら
$_POST[‘image’]
というようにしていたけど
ファイルの場合では異なり
$_FILES[‘ 変数名’];
となる
この変数名は、form で送信したときの name の名前になる
例えば、
<input type=”file” name=”image”>
なら、
$_FILES[‘image’]
となる
アップロードされたファイルには
色々な情報が格納されていて
確認したいのなら、
var_dump() で中身を見てみるとわかりやすい
ソースにすると
var_dump($_FILES[‘image’]);
exit;
として
index.php でファイルをアップロードしてみると
渡されたデータがみれる
そのままだと見にくいので
ブラウザでソースを表示するとわかりやすくなる
やりかたは、ブラウザで
右クリック > ページのソースを表示
name には元画像の名前
type には何のファイルか
tmp_name は
システムが一時的に保存したファイルの名前
これは後で保存先フォルダへ入れることになる
error は
エラーチェックに必要な情報が入ってくる
ちなみに、0だったら正常ということ
size は、ファイルのサイズ
エラーコードに関しては
http://jp.php.net/manual/ja/features.file-upload.errors.php
を参考にする

画像投稿フォームの作成

画像投稿フォームの作成
#05 画像投稿フォームを作ろう
http://dotinstall.com/lessons/upload_image_php/4505
を元に index.php を作って
画像アップロードするためのフォームを作成する
vim index.php でファイルを作成し編集していく
require_once(‘config.php’);
で設定ファイルを読み込み
HTMLソース部分でフォームを作成していく
フォームについては
画像をアップロードするには決まりがあり
<form action=”” method=”POST” enctype=”multipart/form-data”>
というように
enctype=”multipart/form-data”
をつけるのを忘れずに
また、隠し要素として
input type=”hidden” にして
<input type=”hidden” name=”MAX_FILE_SIZE” value=”<?php echo MAX_FILE_SIZE;
?>”>
として、最大投稿サイズを決めておく
このMAX_FILE_SIZE は
config.php で設定した値
これができたら、後は
画像選択ボタンと
アップロードのための送信ボタンを作成
画像選択ボタンが
<input type=”file” name=”image”>
送信ボタンが
<input type=”submit” name=”アップロード”>
となる
ここまでできたら、一度保存して
index.php を開いてみる
画面が作成できているのを確認できたら、
現在 action=”” で index.php が対象になっているのを
action=”upload.php” へ変更して
このファイルで処理するようにする
~

画像掲示板の設定ファイルの作成

画像掲示板の設定ファイルの作成
#04 設定ファイルを作ろう (2)
http://dotinstall.com/lessons/upload_image_php/4504
を元に、config.php を追記して
設定ファイルを作成
追加する定数として
サムネイル画像の幅になる
THUMBNAIL_WIDTH
そして、アップロードできるファイルサイズの指定を
MAX_FILE_SIZE
で指定する
300kBにするなら
1kB = 1024 byte なので
1024 * 3 = 307200 となる
エラーレポートは
error_reporting(E_ALL & -E_NOTICE);
とする
あと、画像縮小には GDライブラリが必要になる
これがない場合には、エラーで警告するようにする
これは if で条件式を
if(!function_exists(‘imagecreatetruecolor’)){
echo “GDがインストールされていません”;
exit;
}
というようにする
これで、config.php を開いて何も表示されないなら
GDがインストールされている

投票結果のグラフ表示

投票結果のグラフ表示
#11 投票結果を表示しよう (1)
http://dotinstall.com/lessons/poll_php_v2/9711
を参考に、投票された結果をグラフ表示していくため
データを抽出する
index.php の
</form>
の下に
<p><a href=”result.php”>結果をみる</a></p>
を追記して
新たに
result.php を作成する
そして、戻るボタンを設置したいので
<p><a href=”index.php”>戻る</a></p>
を追記
投票結果の表示のためDBからデータを引っ張ってくる必要があるので
$dbh = connectDb();
この connectDb() は、functions.php で定義した
ユーザ関数
$sql =”select answer, count(id) as count from ansers group by answer”;
としてSQLを $sql に格納
Google Chart Toolsで引っ張ってくるデータはJSON形式
次に、配列を作成
$rows = array();
これは foreach() で使用する
foreach($dbh->query($sql) as $row){
array_push($rows, array());
}
という処理になる
次に、
#12 投票結果を表示しよう (2)
http://dotinstall.com/lessons/poll_php_v2/9712
を参考に
Google Chart Toolsを使い、投票結果をグラフ表示
Google Chart ToolsはJSON形式なので
array($row[‘answer’], (int)$row[(count’]))
というような書き方になる
ちなみに、count のほうは int でないとまずいので
(int) として int 型にしている
そして、
json_encode()で
$rows をJSON形式の文字列に変更する
$data = json_encode($rows);
json_encode() については
http://php.plus-server.net/function.json-encode.html
を参考にする
値が格納されているか確認したいのなら
var_dump($data);
とすれば
確認できる
確認できたら、
var_dump() はコメントアウトしておく
ここまで確認できたら、グラフを描いていく
まず、
<div id=”chart_div”>グラフを詠み込み中 </div>
として
表示領域を div で指定
そして、 script タグで Google Chart Tools のライブラリを読み込む
<script src=”https://www.google.com/jsapi”></script>
ライブラリを読み込んだら
script タグへ
グラフを描く処理を追記
google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});
はほぼ決まり文句
google.setOnLoadCallback(drawChart);
function drawChart() {
}
で、この drawChart() {} の中に詳細設定をしていく
ここからは
#13 投票結果を表示しよう (3)
http://dotinstall.com/lessons/poll_php_v2/9713
を参考に、グラフ表示と動作確認をしていく
なお、グラフ作成に使用している
Google Chart Tools に関しては
http://dotinstall.com/lessons/basic_chart_tools
で学習することができる
この編集するファイルは results.php になる
処理は
function drawChart() {} の中に描いていく
var data= new google.visualization.DataTable();
次に、data.addCulumn()
でデータのカラムを設定する
data.addColumn(‘string’,’answer’);
data.addColumn(‘number’,’票数’);
data.addRows(<?php echo $data; ?>);
そして、グラフのオプションを指定する
var options ={
‘title’:’投票結果’,
‘width’:400,
‘height’:300
}
そして、実際にグラフを作成
var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
この chart_div はHTMLソースで指定した div の id
char.draw(data,options);
これで実行してみると、円グラフが表示されるようになる

投票結果のグラフ表示
#11 投票結果を表示しよう (1)
http://dotinstall.com/lessons/poll_php_v2/9711
を参考に、投票された結果をグラフ表示していくため
データを抽出する
index.php の
</form>
の下に
<p><a href=”result.php”>結果をみる</a></p>
を追記して
新たに
result.php を作成する
そして、戻るボタンを設置したいので
<p><a href=”index.php”>戻る</a></p>
を追記
投票結果の表示のためDBからデータを引っ張ってくる必要があるので
$dbh = connectDb();
この connectDb() は、functions.php で定義した
ユーザ関数
$sql =”select answer, count(id) as count from ansers group by answer”;
としてSQLを $sql に格納
Google Chart Toolsで引っ張ってくるデータはJSON形式
次に、配列を作成
$rows = array();
これは foreach() で使用する
foreach($dbh->query($sql) as $row){
array_push($rows, array());
}
という処理になる
次に、
#12 投票結果を表示しよう (2)
http://dotinstall.com/lessons/poll_php_v2/9712
を参考に
Google Chart Toolsを使い、投票結果をグラフ表示
Google Chart ToolsはJSON形式なので
array($row[‘answer’], (int)$row[(count’]))
というような書き方になる
ちなみに、count のほうは int でないとまずいので
(int) として int 型にしている
そして、
json_encode()で
$rows をJSON形式の文字列に変更する
$data = json_encode($rows);
json_encode() については
http://php.plus-server.net/function.json-encode.html
を参考にする
値が格納されているか確認したいのなら
var_dump($data);
とすれば
確認できる
確認できたら、
var_dump() はコメントアウトしておく
ここまで確認できたら、グラフを描いていく
まず、
<div id=”chart_div”>グラフを詠み込み中 </div>
として
表示領域を div で指定
そして、 script タグで Google Chart Tools のライブラリを読み込む
<script src=”https://www.google.com/jsapi”></script>
ライブラリを読み込んだら
script タグへ
グラフを描く処理を追記
google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});
はほぼ決まり文句
google.setOnLoadCallback(drawChart);
function drawChart() {
}
で、この drawChart() {} の中に詳細設定をしていく

DB格納時のエラー処理

DB格納時のエラー処理
#10 投票結果を格納しよう (2)
http://dotinstall.com/lessons/poll_php_v2/9710
を参考に
データを格納する際にエラーが発生した場合の処理を実装
もし、同じユーザエージェント、つまりブラウザが同じで
同じIP、そして、同じ日付なら
回答を弾くようにする
これは if で判定する
if($stmt->execute($params)){
で判定して
うまくいったら
$msg=”投票ありがとうございました”;
として
else つまり、この弾く条件にあてはまるのなら
$err =”投票は1日1回です”;
とする
このメッセージを表示するには
<?php if(!empty($msg)):?>
<p style=”color:green”><?php echo h($msg); ?></p>
<?php endif; ?>

<?php if (!empty($err)) : ?>
<p style=”color:red”><?php echo h($err); ?></p>
<?php endif; ?>
の上に追記する
実行して実際に投票して動作確認したら
mysql -u root -p
でログインして
use dotinstall_poll_php;
select * from answers;
で内容が格納されているのを確認できる
作成するDBさえあっているのなら
どうしてもうまくいかないときには
サンプルソースをコピペして
実際に動く事を確認するほうが効率的だし
git とか diff コマンドでソースとの違いを見つけたほうが
わかりやすい

投票結果をDB格納

投票結果をDB格納
#09 投票結果を格納しよう (1)
http://dotinstall.com/lessons/poll_php_v2/9709
を元に
投票された結果をデータベースに格納していく
編集するのは index.php
まず、エラーがなかったときの処理から
if(empty($err)){
でエラーがないことを確認
そして、DB接続
$dbh = connectDb();
connectDb();
は、config.php で作成したユーザ関数
接続できたら、SQL発行
$sql = “insert into answers (answer, remote_addr, user_agent, answer_date, created, modified) values (:answer, :remote_addr, :user_agent, :answer_date, now(), now())”;
そして、SQLの実行
prepare() を使うのは、プレースホルダーの関係と
セキュリティのため
そして、 プレースホルダーの設定
$params = array(
“:answer”=>$_POST[‘answer’],
“:remote_addr”=>$_SERVER[‘REMOTE_ADDR’],
“:user_agent”=>$_SERVER[‘HTTP_USER_AGENT’];
“:answer_date”=>date(“Y-m-d”)
);
とする
:answer
は回答の番号
:remote_addr
はREMOTE_ADDRで取得したIPアドレス
REMOTE_ADDR は
http://phpjp.com/REMOTE_ADDR.htm
に例が乗っている
:user_agent”
はブラウザの種類
:answer_date
が回答した時間