PG WORKS

PHPやLinux(サーバー)などのノウハウや、便利なツールを紹介していきます。

【jQuery】モーダルダイアログをコピペで作ろう

f:id:zen6a:20170415230222p:plain

データの更新・削除する前に、必ず確認画面を表示させると思います。
表示させる理由として、データを誤って更新・削除させないようにするためです。

お手軽に実装したい場合、JavaSprictの「Confirm」を使われると思います。

Java Sprict版Confirm

<?php
 /*
 *	Java Sprict版 Confirm
 */
?>
<!DOCTYPE html>
<html>
<head>
	<title>Java Sprict版 Confirm</title>
	<meta charset="utf-8" />
</head>
<body>
	<p><input type="button" value="javasprict確認ダイアログ" onClick="disp()"></p>
	<script>
function disp(){
	if( window.confirm('更新します。よろしいですか?') ){
		// OK
	}else{
		// キャンセル
	}
}
</body>
</html>

下記の画面が表示されれば成功です。
f:id:zen6a:20170415222112p:plain
ただ、この表示方法は、昔から使われてましたが、最近はあまり見かけなくなりました。
(むしろスパム系のサイトが多いので印象がよくないかも・・・)


そこで、簡単に実装できて、尚且つかっこいいものはないのか探したところ、、、




「今流行りのデザインで、尚且つかっこいい!」


と個人的に思う、jQuery版のComfirmがありましたので紹介したいと思います。

jQuery Confirmのダウンロード先

tutorialzine.com
デモ画面は下記のURLから動作確認ができます。
A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo
×ボタンをクリックまたはタップすることで、Comfirmが表示されます。

デモを見ると、Comfirm以外にも使えて幅広く使えそうです!

では、実際に実装するときのソースを紹介。

モーダルダイアログ表示サンプル

<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./jquery.confirm/jquery.confirm/jquery.confirm.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./jquery.confirm/jquery.confirm/jquery.confirm.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
	$.confirm({
		title:'Confirm',
		message:'更新します。よろしいですか?<br /><font color="#FF0000">※赤文字HTMLテスト※</font>',
		'buttons'	: {
			'OK'	: {
				'class'	: 'blue',
				'action': function(){
					// OKボタン押されたときの処理を記載
				}
			},
			'キャンセル'	: {
				'class'	: 'gray',
				'action': function(){
					// キャンセルボタン押されたときの処理を記載
				}
			}
		}
	});
});
</script>
</body>
</html>

※「jquery.confirm.css」「jquery.confirm.js」の配置パスは各自の環境に応じて変更してください。

下記の確認画面が表示されれば成功です。
f:id:zen6a:20170415224648p:plain
※必要なファイルは「jquery.confirm」フォルダのあるファイルのみになります。

画像ファイルも使用しているため、デザインが崩れる場合は、画像が読み込めてない可能性があります。

確認方法として、ブラウザ開いた状態(Chromeの場合)で、F12を押すとDeveloper Toolsが開くので、エラーがないか確認してみましょう。

【追記】SweetAlertでダイアログ表示

最近見つけたのですがこちらもオススメです。

sweetalert.js.org

確認ダイアログの表示

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
var options = {
        text:"確認メッセージサンプル",
        buttons:{
                cancel: "キャンセル",
		ok: true
        }
};
swal(options).then(function(val){
	if( val ) {
		alert('ok');
	} else {
		alert('キャンセル');
	}
});
</script>

【jQuery】よく使うイベント判定

f:id:zen6a:20170413223754p:plain

イベント判定処理部分について記載します。
プログラム部分は、コピペで使えますので、良ければお使いください。

クリックイベント

<script type="text/javascript">
  $(document).ready(function(){
    $("#zen6aadd").click(function() {
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadd" value="新規作成">

id名が「zen6aadd」をクリックしたときに、イベントが発生します。
※同じid名があると片方した反応しないため、複数反応させるためには、下記の記述にします。

クリックイベント(id複数版)

<script type="text/javascript">
  $(document).ready(function(){
    $("[id=zen6aadd]").click(function() {
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadd" value="新規作成">

セレクトボックスの値が変更されたときの判定イベント

<script type="text/javascript">
  $(document).ready(function(){
    $("#selecterzen6a").change(function() {
       // ここに処理を書く
    });
  });
</script>
<select name="selecterzen6a" id="selecterzen6a">
  <option value="テラバトル">テラバトル</option>
  <option value="DDR">DDR</option>
  <option value="PHP">PHP</option>
  <option value="jQuery">jQuery</option>
  <option value="CSS">CSS</option>
</select>

動的に追加したフォームを判定したいとき

<script type="text/javascript">
  $(document).ready(function(){
    $(document).on('click', '#zen6aadds', function(e){
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadds" value="新規作成">

【PHP&MySQL】手っ取り早くMySQLを使いたい方へ INSERT UPDATE DELETE編

f:id:zen6a:20170410235113p:plain
INSERT/UPDATE/DELETEの使い方を、説明していきたいと思います。

PDOの接続や、データ参照(SELECT)方法については、下記の記事をご確認ください。
zen6a.hateblo.jp

データの追加(INSERT)

<?php
$sql = "INSERT INTO sample( id, name, pass )VALUES( :id, :name, :pass )";
$sth = $pdo->prepare($sql);
$sth->bindValue(':id', 1, PDO::PARAM_INT);
$sth->bindValue(':name', "sample", PDO::PARAM_STR);
$sth->bindValue(':pass', "sample_pass", PDO::PARAM_STR);
// INSERTに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

データを複数追加(INSERT)

<?php
$aryInsertData[] = '('.1.','.'sample'.','.'sample_pass'.')';
$aryInsertData[] = '('.2.','.'sample2'.','.'sample_pass2'.')';
$sql = "INSERT INTO sample( id, name, pass )VALUES".implode(",", $aryInsertData);
$sth = $pdo->prepare($sql);
// INSERTに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

同じデータがある場合UPDATEなければINSERT

<?php
$aryInsertData[] = '('.1.','.'sample'.','.'sample_pass'.')';
$aryInsertData[] = '('.2.','.'sample2'.','.'sample_pass2'.')';
$aryInsertData[] = '('.3.','.'sample3'.','.'sample_pass3'.')';
$sql = "INSERT INTO sample( id, name, pass )VALUES".implode(",", $aryInsertData)."ON DUPLICATE KEY UPDATE name = VALUES(name)";
$sth = $pdo->prepare($sql);
// INSERTに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

サンプルでは、変数「$aryInsertData」を3列分記載していますが、実際に使う場合、forループで配列を作成し、INSERTしていく処理になると思います。

経験上、一度にたくさんのINSERT配列を作成してデータ追加した方が処理的にも速くなると思いますが、PHPで扱えるメモリサイズ「memory_limit」の設定を確認して追加する量を調整した方が良いと思います。

また、サーバのスペックにもよると思いますが、INSERTする量が多すぎると(例えば一度に1万レコード追加)、サーバに負担がかかりSELECTにも影響でる可能性があります。

こちらも、必要なものだけINSERTさせるか、分散させて追加する方向で考えたほうが良いと思います。

また、INSERTの最後に記述している「ON DUPLICATE KEY UPDATE」は、値の更新もできます。

「ON DUPLICATE KEY UPDATE name = VALUES(name)」

↑VALUES(カラム名)でINSERTする値に更新することが可能になるので、後でUPDATEする必要もなく処理的にも大変便利な機能です。

データの更新(UPDATE)

<?php
$sql = "UPDATE sample SET name = :name WHERE id = :id";
$sth = $pdo->prepare($sql);
$sth->bindValue(':id', 1, PDO::PARAM_INT);
$sth->bindValue(':name', "sample_udpate", PDO::PARAM_STR);
// UPDATEに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

UPDATEに関して、特別注意することは思い当たらないですが、更新する量が多ければ時間がかかるため、テーブルのレコード件数と型のサイズに注意しましょう。

データの削除(DELETE)

<?php
$sql = "DELETE FROM sample WHERE id = :id";
$sth = $pdo->prepare($sql);
$sth->bindValue(':id', 1, PDO::PARAM_INT);
// DELETEに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

DELETEは、レコード件数が多いほど、処理が遅くなります。
対策としては、LIMITで何回かに分けてDELETEするか、MySQL5.1から実装されたパーティションを使い、条件でデータを分割させるかになると思います。

パーティションは使ったことがないため、ノウハウがたまり次第、記事にしたいと思います。

【PHP&MySQL】手っ取り早くMySQLを使いたい方へ 接続&SELECT編

f:id:zen6a:20170410234701p:plain
PHP5.1以降から導入されたPHP Data Objects(PDO)を使い、手取り早くデータベースへ接続したい方に今回は記事を書いていきたいと思います。

まずは、MySQLへの接続のクラスを紹介。

MySQLサーバへ接続

<?php
	define("HOST"     ,"mysql:dbname=データベース名;host=127.0.0.1");
	define("ACCOUNT"  ,"mysqlのアカウント名");
	define("PASSWORD" ,"パスワード");
	$pdo = new PDO( HOST, ACCOUNT, PASSWORD );
?>

ここで接続できなかった場合、まずは下記の項目をチェックしてみましょう。

  1. PDOの記述間違いがないか確認。
  2. データベースが存在しているか、データベース名に間違っていないか確認。
  3. ホスト名が間違っていないか確認。(サーバが違う場合そのサーバのIPなど指定する。
  4. アカウント名・パスワードが間違っていないか確認。
  5. MySQLサーバがPHPが動いているサーバと別の場合、PHPが動いているサーバからアクセス権があるか確認。

上記の5項目確認しても繋がらない場合、エラー内容で調べてみると知恵袋などに回答が記載されてますので、該当箇所を再度確認してみましょう。

接続ができないと、PHPのエラーが表示されるため、try&catchを使い処理を作成しましょう。

<?php
	define("HOST"     ,"mysql:dbname=データベース名;host=127.0.0.1");
	define("ACCOUNT"  ,"mysqlのアカウント名");
	define("PASSWORD" ,"パスワード");
	try {
	    $pdo = new PDO( HOST, ACCOUNT, PASSWORD );
	} catch(PDOException $e) {
		echo 'データベース接続エラー';
	    die();
	}
?>

データベース内にあるテーブルにアクセスしデータを参照する方法

<?php
	$sql = 'SELECT id, name FROM sample';
	$sth = $pdo->prepare($sql);
	$sth->execute();
	$arySamples = $sth->fetchAll(PDO::FETCH_ASSOC);
?>

sampleテーブルにあるデータを変数「$arySamples」に格納します。
上のクエリーだと、sampleテーブルのすべてのデータを変数に格納しますが、idで指定して1つデータのみ参照する場合は、「$sth->fetchAll(PDO::FETCH_ASSOC);」を「$sth->fetch(PDO::FETCH_ASSOC);」に変えると、$arySamples["id"]な形式でデータを取得することが可能です。

特定のデータのみ参照する

<?php
	$sql = 'SELECT id, name FROM sample WHERE id= :id';
	$sth = $pdo->prepare($sql);
	$sth->bindValue(':id', "1", PDO::PARAM_INT);
	$sth->execute();
	$arySamples = $sth->fetch(PDO::FETCH_ASSOC);
?>

少し記述が変わってますが、「$sth->bindValue(':id', "1", PDO::PARAM_INT);」を使うことで、エスケープ処理も自動でやってくれるため、変数の格納が楽になります。
「$sth->bindValue」を使わなくても、「$sql」変数に直接記述もできますが、エスケープ処理されないため、「$sth->quote($string)」を使い処理しましょう。
PHP: PDO::quote - Manual

bindValueの第3引数について

PDO::PARAM_INT以外にも、いろんな定数があります。
PHP: 定義済み定数 - Manual

よく使うものだと。

  1. PDO::PARAM_INT
  2. PDO::PARAM_STR
  3. PDO::PARAM_NULL

この3つになるでしょうか。
「PDO::PARAM_NULL」の定数ですが、値をNULLにしたいときに利用します。
なので値がある場合、「PDO::PARAM_INT」OR「PDO::PARAM_STR」にしないとエラーになります。

クエリーエラーを確認する方法

<?php
	$sql = 'SELECT id, name FROM sample WHERE id= :id';
	$sth = $pdo->prepare($sql);
	$sth->bindValue(':id', "1", PDO::PARAM_INT);
	if( !$sth->execute() ){
		print_r($sth->errorInfo());
	}
	$arySamples = $sth->fetch(PDO::FETCH_ASSOC);
?>

PDOでは、クエリーエラーが表示されないため、「$sth->errorInfo()」で確認する必要があります。
※特にINSERTやUPDATE時。

エラー内容を保存して通知するような仕組みがあると、メンテナンスやトラブルの調査が楽になると思います。

よく使うのに忘れてしまうHTMLタグが紹介されました!

HTMLタグを紹介した記事が、レバテック様のサイトにて紹介されました!

HTMLタグの「分からない」を解決してくれる記事まとめ

他のブロガー様も紹介されてますが、HTMLが何なのかよくわからない方やタグはなんとなく理解している人でも、HTMLはなんぞやと細かく説明されているものもあるので、参考になるかもしれません。

個人的に「へぇ~」と思った記事は、

[HTML] BRタグは使うな! 私が「改行」を一切使わなくなった1つの理由 | ヨッセンス

でした。

スマホ構築のとき、brタグが原因で、デザインが崩れることをあまり意識してなかったので、勉強になりました(汗


レバテック様のサイトでは、エンジニア関係の求人を取り扱ってるんですね。(はじめて知りました。

エンジニア・デザイナーのためのスキルアップ記事 | レバテックキャリア

↑の記事一覧で、さまざまなプログラムに関する話題がアップされるみたいなので、一読したいと思います^-^

当ブログも引き続き、PHPを中心に更新していきますので、よろしくお願いします!