なんちゃってプログラマのぼやき

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

javascriptで、IDはひとつのページ内でユニークであるものですが、
ここでは複数の要素に同じIDをつけられる方法をメモ( ..)φ

普通のiQueryの#idセレクタでは、ひとつの要素、複数同じIDがある場合には最初に合致した要素しか選択できません。

[id=xx]の形で書けば、複数の同じIDを選択することができます。

例
javascript

// 一般の、IDはユニークである場合
$("#unique").css("background-color","red");
// 複数のIDを選択
$("[id=multi]").css("background-color","white");

html

// 一般の、IDはユニークである場合
<input type="text" id="unique" value="1" >
// 複数のIDを選択
<input type="text" id="multi" value="2" >
<input type="text" id="multi" value="3" >
<input type="text" id="multi" value="4" >

MySQLのdump（ダンプ)でデータをバックアップ/復元する方法です。


・ダンプファイルでバックアップをとる

特定のデータベースのみバックアップを取る場合は以下のコマンドを実行。

mysqldump -u[ユーザ名] -p DB名 > 出力ファイル名

例

mysqldump -u root -p dbname > dump.sql

全てのデータベースのバックアップをとる場合は、以下を実行。

mysqldump -u root -x --all-databases > dump.sql

・ダンプからデータを復元

特定のデータベースのみの復元の場合は、以下のコマンドで復元できる。

mysql -u ［ユーザ名］ -p DB名 < ダンプファイル名

例

mysql -u root -p DB名 < dump.sql

mysqldumpの全てのデータベースのバックアップを復元するには、以下のコマンド。

mysql -u root -p < dump.sql

mysqlにファイルの内容をリダイレクトするだけでOK。


mysqldumpのバックアップは、SQLベースのバックアップができ、
存在するデータを全てSQLにして、テキスト形式に保存できます。

phpMyAdminとは、MySQLサーバをウェブブラウザから管理できるデータベース接続クライアントツールです。
SQL文を記述することなく、MySQLのデータベースに対して様々な操作をGUIで行うことができます。

一目でデータベースが分かりますし、入れておいて損はない気がします（＾−＾）


・ダウンロードは公式サイトから。



→公式サイト

保存した「phpMyAdmin-4.2.3-all-languages.zip」を解凍。


・インストール

ダウンロードしたファイルをブラウザ経由でアクセスすることができるApacheのドキュメントルート内に配置する。
「phpMyAdmin-4.2.3-all-languages」というディレクトリの中にファイルが格納されます。

以上でインストール終了です。


・動作確認

Apacheが起動していることを確認した上でブラウザから下のURLへアクセスする。

例）http://localhost/phpMyAdmin/index.php　（自身の環境に応じて変更）

phpMyAdminの画面が開けば問題ありません。
エラーが出る場合は、「php.ini」の設定変更が必要です。

最近はPostgreSQLを使っていましたが、
久しぶりにMySQLを使ってみました。

とりあえずこれだけ覚えておけばある程度のことはできる。
忘れないようにメモメモ( ..)φ


・MySQLにログイン

mysql -u[ユーザ名] -p;

・ログアウト

exit;

・データベース一覧を表示

show databases;

・データベースを使用

use [データベース名]

・データベース作成

create database [データベース名] character set utf8;

・データベース削除

drop database [データベース名];

・テーブル一覧を表示

show tables;

・テーブルを検索

show tables like'[テーブル名]%';

・テーブルを作成

create table [テーブル名] (field_name varchar(15) DEFAULT 'NULL');

・テーブル削除

drop table [テーブル名];

・テーブル構造を表示

describe [テーブル名];

・テーブルの中身を表示

select * from [テーブル名];

・レコードを追加

insert into [テーブル名]([フィールド名1], [フィールド名2]) VALUES ([1に入れる値], [2に入れる値]);

・指定したフィールドのレコードを削除

delete from [テーブル名] WHERE [フィールド名]='値';

最低限ですが、これだけ覚えていれば、スムーズに進みそうです（＾−＾）

jQueryのプラグインであるdatetimepicker。
UIもいい感じです。



ただし、bootstrap2で動いていたdatetimepickerが
bootstrap3では動かないとか、まだ日本語に対応していないとか・・・
探していたらbootstrap2の情報が多かったので、bootstrap3での実装方法をまとめてみました。



1.ダウンロード

最終的に必要なのは以下の6つ。

�@jquery-1.x.js
�Abootstrap.min.css
�Bbootstrap.min.css
�Cbootstrap-datetimepicker.css
�Dbootstrap-datetimepicker.js
�Emoment.js
�Fja.js

�@はjQuery公式サイトからダウンロード。
�A�Bはbootstrapの公式サイトからダウンロード。

�C�Dは以下のGitHubに公開されている「build」よりダウンロード。
https://github.com/Eonasdan/bootstrap-datetimepicker

bootstrap3では、�Emoment.jsがないとまともに動かない。
http://momentjs.com/
↑よりダウンロード。
日本語化したいときは、�Fをダウンロード。
上記のURLの「locale」よりダウンロードする。


2.適当な場所に配置する

3.記述方法

(1) head内で呼び出す
　上記７つを読み込む。


(2) body内で以下のように記述


<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
// オプションを記述
});
</script>
</div>
</div>


今回、２４時間表示と、datepickerとtimepickerを横並びにしたかったため、オプションのところに以下を記述。

format : 'YYYY/MM/DD HH:mm',
sideBySide: true

プログラム側(phpファイル)では、テンプレートに渡す値を作成したり、
最終的にテンプレートを呼び出して画面に表示させたりします。

プログラムは以下の通りです。

<?php

//Smartyを読み込む
require_once('Smarty.class.php');

$smarty = new Smarty();

//テンプレートファイルなどを配置したディレクトリを絶対パスで指定
$smarty->template_dir = 'd:/path/templates/';
$smarty->compile_dir = 'd:/path/templates_c/';
$smarty->config_dir = 'd:/path/configs/';
$smarty->cache_dir = 'd:/path/cache/';

//テンプレートファイルに記述した変数に渡す値を設定
$smarty->assign('msg','Hello World!');

//テンプレートを呼び出して表示
$smarty->display('sample.tpl');

?>

テンプレートファイルには、以下のように変数を記述する。

sample.tpl

<html>
<head><title></title></head>
<body>

main<br>
{$msg}<br>

</body>
</html?>

ディスプレイ表示は、以下のようになる。

main
Hello World!

BootStrapのDataTablesが簡単に実装できて使える！

下記のサイトにコードと、ライブラリがまるまる書いてあるので
それをコピペ、読み込むだけで実装完了。



https://datatables.net/examples/styling/bootstrap.html


デフォルトで、以下が設定されています。
・表示件数設定
・検索機能
・ソート機能
・ページング機能


もちろん、ただコピペするだけでは仕様が不完全。
オプションを指定して、カスタマイズしていきます。
いくつかオプションを記載します。

簡単なカスタマイズたけなら、javascriptに以下のように記載するだけでＯＫ。


$(document).ready(function() {
$('#example').DataTable();

//ここにオプションを記載

} );


オプション
// 大量データ利用時、「処理中」メッセージを表示するかを設定
bProcessing: true,
// 初期表示の行数設定
iDisplayLength: 100,
// ページングボタンの制御
// two_button:進むと戻る
// full_numbers:全ボタン表示
sPaginationType: "full_numbers",
// 改ページを有効にするか設定
bPagenate: true,
// ソート行を強調（cssクラスを指定）するかを設定
bSortClasses: false,
//検索（フィルタ）を表示するかを設定
bFilter:false,
//画面の表示件数を選択可能かを設定
bLengthChange:false
// 自働列幅の計算を有効にするか設定
bAutoWidth: true,
// テーブル情報の表示を有効にするか設定
binfo: true,
// 水平スクロールを有効にするか設定
sScrollX: faulse;
// 垂直方向のスクロールを有効にするか設定
sScrollY: faulse;

使いそうなものを抜粋しました。他にも探せばあります。

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利でした。



ダウンロード

下記よりダウンロード。
取得先によっては、日本語対応していないものもあるが、下記は日本語対応も含まれるため、まるごとダウンロードする。

https://github.com/eternicode/bootstrap-datepicker

最終的に必要なのは下の５ファイル。（日本語にする場合）
他はとくにいらない。

jquery-1.8.3.js
bootstrap.min.css
datepicker.css
bootstrap-datepicker.js
bootstrap-datepicker.ja.js

日本語化の「bootstrap-datepicker.ja.js」はlocalesフォルダ内に存在。


これらのファイルを、適当な場所に配置しておく。


記述方法

(1) head内で呼び出す
　上記５つを読み込む。
　「bootstrap-datepicker.js」を読み込んだうえで「bootstrap-datepicker.ja.js」を読み込むことに注意。

(2) body内で以下のように記述


<input id="datepicker" type="text">

<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
// 以下オプション
// 日付フォーマット
format: 'yyyy/mm/dd',
//　日本語化
language: 'ja',
// 日付を選択したらクローズ
autoclose:'true'
});
});
</script>

オプション

オプションを書き足せば、datepickerを使いやすくカスタマイズできる。
すべてではないが、使えそうなオプションをいくつかメモ。

・選択できる日付の範囲を設定
minDate: '-1w',
maxDate: '+1m +10d'
・カレンダーに「今日」ボタンと「閉じる」ボタンを表示
showButtonPanel: true
・今日の日付をハイライト
todayHighlight : true
・曜日のテキストを変更
dayNamesMin:['S','M','T','W','T','F','S']


他にも、探せばたくさんありそうです。

画像などの保存やファイルの書き込み、削除など
パーミッションの設定でエラーが出ることがあります。

その場合は、ファイル、ディレクトリのパーミッション（アクセス権限）を変更する必要があります。

chmodコマンドを使用して、ファイル、ディレクトリのパーミッションの変更をメモ。


書式

chmod [オプション] [モード] [ファイルやディレクトリ]

・オプション

-c：パーミッションが変更されたファイルのみ詳細を表示。
-f：パーミッションを変更できない場合、エラーメッセージを表示しない。
-v：パーミッションの変更を詳細に表示。
-R：ディレクトリとディレクトリ以下のファイルを再帰的に変更。

・モード
「所有者」「所属グループ」「その他ユーザー」の順に３つの数値で指定する。

0: ---
1: --x
2: -w-
3: -wx
4: r--
5: r-x
6: rw-
7: rwx

全てのユーザに、すべてのアクセス許可を与える場合は、「777」となる。


・例

$ chmod -R 777 file01/

"file01"以下全てのディレクトリのパーミッションを「777」に変更。

あれ？エラーが出る・・・
と思った時にまず初めに疑う、「所有者」と「権限」。

まずはファイルやディレクトリの所有者を変更するlinuxコマンド。


書式

chown [-cfhvR] [ユーザー]:[グループ] ファイル名

・オプション

-c
所有者が変更されたファイルのみ詳細に表示。

-f
所有者を変更できない場合でも，エラー・メッセージを表示しない。

-h
シンボリックリンクを変更する場合、そのリンク自身の所有者を変更。
デフォルトはリンク先のファイルの所有者が変更される。

-v
所有者の変更を詳細に表示。過程を表示。

-R
ディレクトリとその中のファイルを再帰的に変更

[ユーザー]:[グループ]
変更する所有者、グループを指定。
どちらかは指定する必要があります。片方の指定でも可。

--help
chownコマンドの使用法を表示。


・例

$ chown -R apache file01

"file01"の所有者を「apache」に変更。