作成日：2021/04/12　更新日：2022/01/27

#1 PHPとjsで簡単なアプリを作ってみよう

今回はこのようなアプリを作ってみたいと思います。
自分で登録した名前をdiv要素化して、その要素をJavaScriptドラッグして配置場所を保存しておくというアプリです。 ドラッグされた要素は、PHPでxy座標をデータベースに保存させます。

PHPの準備

phpファイルはhtmlファイルと同じだと考えて大丈夫です。 拡張子をindex.htmlではなくindex.phpにしてマークアップします。 イメージとしてはhtml文書を作って、その中にphpの機能を追記していく感じになります。 サイトの機能が複雑になると「MVC(Model View Controller)」という考え方になり、 機能(PHP)と見栄え(html+css)を分けて書く事になります。
今回は理解度を優先させるために、機能を全てindex.phpに記述します。

構造体を作る

まずは以下の文章をコピーして、index.phpとcssを作ってください。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sortable</title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">

<div id="drag-area">
drag area
</div>

</div>
</body>
</html>


/*reset*/
body,div,p{margin:0;}
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

/*frame*/
body {
  height:100%;
  color:#ccc;
  font-size:10px;
}
#wrapper {
  border: 2px dashed #ccc;
  margin:15px;
  border-radius: 6px;
  height: 600px;
}

/*drag*/
#drag-area {
  position: relative;
  height: 500px;
  width:980px;
  margin: 5px auto;
  border: 1px solid #333;
  border-radius: 6px;
}
.drag {
  position: absolute;
  padding: 1em;
  color: #666;
  border-radius: 5px;
  background: #efefef;
  border: 3px solid #ccc;
}
.name {
  font-size:12px;
}
簡単なhtml文書とcssですね。（めんどうのでresetの重要なものだけ上部に入れました）cssは1枚でいきます。 どのセレクタがどんな役割を持っているのか、文章を見ただけで把握しましょう。
ディレクトリはこんな感じです。
アドレス（localhost:8001）を入力するとブラウザではこんな表示になると思います。

#2 PHPのエラーをブラウザに表示させる

PHPでは間違った記述をしているときに、エラーを表示してくれる機能がありますので、表示させる内容を明示しておきます。 内容を確認し、修正できるようにしましょう。

<?php
ini_set('display_errors', 1);  /* MAMPの設定次第では記述が必要 1は表示、0は非表示*/
error_reporting(-1);  /* 0は表示させない、-1はすべて表示 */
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<?php
$name = '大橋太郎';
$measage = 'こんにちは!';

echo $names . 'さん' . $measages . '
';
?>
</body>
</html>
エラーが表示されます。どこが間違っているのか、表示される内容を読み解き、解決してみましょう。
　Notice: Undefined variableアン ディファインド　バリアブル:　=　注意: 未定義の変数です
　Parse error: syntax errorシンタックス　エラー,　=　解析エラー: 構文エラーです
　Fatal error: Call to undefined functionコール トゥー アンディファインド ファンクション　=　致命的なエラー: 未定義の関数を呼び出してます
　Warning: Missing argumentミッシング　アーギュメント　=　警告: 引数がありません
英語で表示されますが、翻訳ソフトなどを利用し積極的に読み解いていくようにしましょう。
ブラウザクリックで翻訳できるアドオン（Chrome版 Firefox版もあります） S3.Translator

▼解説
表示する/非表示にする

PHPのエラーを画面に表示するように設定

MAMPのphp.iniの「display_errors = 」がOFFの場合、以下の記述でPHP書類上で上書きします。 引数「1」は表示、 「0」は表示させない

ini_set('display_errors', 1);

出力するエラーの内容設定

error_reporting(引数); 引数→ 0=オフ、E_ALL=全て表示、E_ERROR=重大なエラー、E_DEPRECATED=非推奨コード など

error_reporting(E_ALL);
error_reporting(E_ALL & ~ E_DEPRECATED & ~ E_USER_DEPRECATED & ~ E_NOTICE);

文字化け対策

PDOの使い方は後ほど

$options = array(PDO::MYSQL_ATTR_INIT_COMMAND=>"SET CHARACTER SET 'utf8'");
エラー表示の部分は、本番環境では削除しましょう。

エラーログの確認

MAMP内にphp_error.logがあるので、stgフォルダにエイリアスを作っておくと、 エラーlogから確認することもできます。
※エラーログに表示される日付を日本時間にしましょう。
アプリケーション > MAMP > bin > php > [MAMPで指定したphpバージョン] > conf > php.ini
date.timezoneで検索（910行目あたり）の

[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
;date.timezone = "Europe/Berlin" /*Asia/Tokyoになっている場合はコメントアウトを外すのみ*/
↓
date.timezone = "Asia/Tokyo"
と変更しMAMPを再起動ます。

エラーログの書き出し

Webサーバやローカル開発環境で、エラーログファイルを書き出して確認する方法です。 

if($_SERVER["HTTP_HOST"] === 'creativeresourceinstitute.com'){  /*ドメイン名*/
  ini_set('error_log', $_SERVER['DOCUMENT_ROOT'].'/../../error.log');  /*サーバ上のファイルを書き出してほしい場所*/
}else{
  ini_set('error_log', $_SERVER['DOCUMENT_ROOT'].'/../error.log');  /*ローカルのファイル場所が違う場合*/
}
if文で、ローカル環境と公開サーバ用と切り分けます。
指定の場所にエラーログが出力されるので便利です。

#3 データベースに接続する

データベースに接続するための前準備

接続設定の定例文を書いてみましょう。 

<?php
error_reporting(-1);

/* データベース設定 */
define('DB_DNS', 'mysql:host=localhost; dbname=cri_sortable; charset=utf8');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');
?>
まずは定数を作ります。定数とは、変数に対するもので、 変数とは“中身が変えられる数”ですが、定数は一度設定すると中身を変えることはできません。

使い方は、define('定数名', '定数に入れる値');
　define('DB_DSN', '接続先種別:host=ローカルホスト; dbname=データベースの名前; charset=文字コード');
　define('DB_USER', 'ユーザー名');
　define('DB_PASSWORD', 'パスワード');
※ID, PWの「root」はMAMPに入っているMySQLの初期設定値です。

データベースに接続する前にデータベースの情報を入れておきます。 接続先名やユーザーIDやパスワードは基本的には変わらないのでdefine()関数で定義してあげます。 例えるなら、FTPを設定する時にアプリの画面でホスト名やユーザID、パスワードを登録したのと同じようなことです
define()関数は、定数（変わらないもの）を定義（決める）する関数です。
defineで作られた定数はグローバル定数となります。
グローバル定数とは、変わらないもの、上書きできないもの。プログラムのどこからでも呼び出せるもの、になります。
※DNS は Data Source Name の略。

#4 データベースのデータをhtmlで表示させる

まずデータベースに接続する

接続の定例文を書いてみましょう。 

<?php
/* データベース設定 */
define('DB_DNS', 'mysql:host=localhost; dbname=cri_sortable; charset=utf8');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');

/* データベースへ接続 */
try {
  $dbh = new PDO(DB_DNS, DB_USER, DB_PASSWORD);
  $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
} catch (PDOException $e){
    echo $e->getMessage();
    exit;
}
?>
データベースに接続するときにはtry catch構文で、PDOクラスをnewする（PDOインスタンスを生成）というこの構文を思い出しましょう。※PDOは「PHP Data Objects」の略。
dbhはデータベースハンドルの略で、ハンドルは車のハンドルをイメージしてください。データベースを運転できる人という感じです。

▼解説
解説は一度目を通し、仕組みをなんとなく把握できたら忘れても構いません。
表示する/非表示にする

try catch構文（例外処理）

ある処理と、エラー時の処理を実行できる構文

try {
    /*例外が発生するおそれがあるコード*/
} catch(例外クラス名　例外を受け取る変数名){
    /*例外発生時の処理*/
}

データベース接続処理

①まずデータベースにログインする情報をPDOオブジェクトとして変数 $dbh に格納。
new演算子：クラス(型)からインスタンス(実体)を生成
つまり、PHPで準備されているDB接続クラスである「PDO」を使って、今回の接続する情報を$dbhに代入している。 

$dbh = new PDO(DB_DNS, DB_USER, DB_PASSWORD);
②接続時のオプションを記述します。 

/*アロー演算子（->）を使って変数雨や関数を呼び出します。*/
$インスタンスを代入した変数 -> 呼び出したいインスタンスの、プロパティ(変数)またはメソッド(関数)名

/*属性をセットする*/
setAttribute( );

/* デフォルトのエラー発生時の処理 Exception の形で例外を投げる */
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

/* パフォーマンス向上のためプリペアドステートメント機能を使う設定。*/
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
プリペアド（準備された）ステートメント（文章）とは簡単に言えば、あらかじめ型を作っておき、中に入れるデータは安全を確かめて型に流し込むフィルターのようなものです。 直接データを型に流し込むより安全性が保たれます。
またオプションについては下の書き方Bのように、
new PDO(DB_DNS, DB_USER, DB_PASSWORD, $option);として、連想配列で値を渡すこともできます。 

/*書き方A*/
$dbh = new PDO(DB_DNS, DB_USER, DB_PASSWORD);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

/*書き方B*/
$dbh = new PDO(DB_DNS, DB_USER, DB_PASSWORD, $option);
$option = [
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
  PDO::ATTR_EMULATE_PREPARES => false
]

メッセージを出力

echoで結果（エラー内容）をhtmlに出力します

echo $e->getMessage();

終了

メッセージを出力し、現在のスクリプトを終了する

exit;
setAttribute();の中に書いてある属性に関しては、まだ理解できなくても良いです。 色んな種類があるので、やりたい処理に合わせて調べてきましょう。 今回のはエラーモードに関する記述と、MySQLのある機能を使うか使わないかを書いてあります。

接続のときの基本的な記述内容になるので、別のアプリを作ったときも同じ構文になります。

データベースのデータ内容をブラウザで確認する


<div id="drag-area">
<?php
$sql = 'SELECT * FROM sortable';
$stmt = $dbh->query($sql);
$result = $stmt->fetch(PDO::FETCH_ASSOC);

print_r ($result);  /* print_rはechoのようなもので、配列の中身を出力できる*/
?>
</div>
<div id="drag-area">内に、データベースに接続して取ってきたデータを出力しましょう。 結果はこうなります。 

Array
(
  [id] => 1
  [name] => 新垣結衣
  [left_x] => 810
  [top_y] => 56
)
きちんと、データが取れていることが確認できます。
▼解説
表示する/非表示にする
■MySQLで使えるSQL文（SQLステートメント）の SELECT * FROM sortable> という文字列を、変数$sqlに格納

$sql = 'select * from sortable';
■PDOオブジェクトの$dbhから、queryメソッド" query( ) "で SQLステートメント" $sql "を実行して、 PDOStatementオブジェクトを取得" -> "し、変数$stmtに格納

$stmt = $dbh->query( $sql );
$stmt = $dbh->query( 'select * from sortable' );  /*このように書いても同様*/
■PDO fetchメソッドを実行

/* 1行ずつ取得 = 配列（whileでループ）*/
$result = $stmt->fetch(PDO::FETCH_ASSOC);
/* 全データを配列に変換 = 多次元配列（foreachでループ）*/
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
↓
/* 配列なので、foreachを使おう */
foreach ($stmt as $result){
  echo $result['添字']
}
■結果を表示 

print_r($result);
4つとも変数の内容を出力するための関数です。(echoは関数ではない)

print_r ($result);  　　　　　/* 配列が出力される */
ただ、実際のhtml内にデータを入れ込むには、tableなのか、div, pタグなのか、 とにかく要素(ラッパー)の中にデータを入れていかなければなりません。
▼用語説明
stmt　　（ステートメント:文章 の略語）
PDO::FETCH_ASSOC　　（カラム名で添字を付けた配列を返す）

データベースのデータをhtml構文でレイアウト


<div id="drag-area">
<?php
$sql = 'SELECT * FROM sortable';
$stmt = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC);

/* while ($result = $stmt->fetch(PDO::FETCH_ASSOC)){ while文だとこのような書き方*/
/* 配列なので、foreach文を使ってみよう */
foreach ($stmt as $result){
  echo '  <div class="drag" data-num="'.$result['id'].'" style="left:'.$result['left_x'].'px; top:'.$result['top_y'].'px;">'.PHP_EOL;
  echo '    <p><span class="name">'.$result['id'].' '.$result['name'].'</span></p>'.PHP_EOL;
  echo '  </div>'.PHP_EOL;
}
?>
</div>
PHP_EOL(End Of Line)は、ソース上で改行されるPHPの定義済み定数です。ドットで繋いで文末に入れて使用します。 上記は、<div id="drag-area">内に、データベース内の情報を、↓このように埋め込みたい場合のやり方になります。 

<div id="drag-area">
  <div class="drag" data-num="1" style="left:810px; top:56px;">
    <p><span class="name">1 新垣結衣</span></p>
  </div>
  <div class="drag" data-num="2" style="left:631px; top:302px;">
    <p><span class="name">2 北川景子</span></p>
  </div>
  <div class="drag" data-num="3" style="left:788px; top:326px;">
    <p><span class="name">3 佐々木希</span></p>
  </div>
  ︙
</div>
ここでの「1」「新垣結衣」「810」「56」の部分が、データベースのレコードに格納されているデータになります。 たくさんレコード（行）があれば、その行が終わるまで、テンプレートに沿って データだけが違う、たくさんのdivが自動でそれが何百行でも生成されます。

以下のdivの中でデータが変わる箇所【 】に変数を入れます。
<div class="drag" data-num="【ID】" style="left:【x座標】px; top:【y座標】px;">
　<p><span class="name">【ID】 【名前】</span></p>
<div>

'data-num="1"'
↓
'data-num="' .$result['id']. '"'
文字列は' '(シングルクオーテーション)に入れ、変数は .（ドット）で繋いでいきます。
DBカラム名中のデータPDO出力
id1$result['id']
name新垣結衣$result['name']
left_x810$result['left_x']
top_y56$result['top_y']

そうするとこのような表示になると思います。

ここまでのindex.php 

<?php
error_reporting(-1);

/* データベース設定 */
define('DB_DNS', 'mysql:host=localhost; dbname=cri_sortable; charset=utf8');
define('DB_USER', 'root');
define('DB_PASSWORD', 'root');

/* データベースへ接続 */
try {
  $dbh = new PDO(DB_DNS, DB_USER, DB_PASSWORD);
  $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
} catch (PDOException $e){
    echo $e->getMessage();
    exit;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>8001-cri-sortable</title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">

<div id="drag-area">
<?php
$sql = 'SELECT * FROM sortable';
$stmt = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC);
foreach ($stmt as $result){
  echo '  <div class="drag" data-num="'.$result['id'].'" style="left:'.$result['left_x'].'px; top:'.$result['top_y'].'px;">'.PHP_EOL;
  echo '    <p><span class="name">'.$result['id'].' '.$result['name'].'</span></p>'.PHP_EOL;
  echo '  </div>'.PHP_EOL;
}
?>
</div>

</div>
</body>
</html>
入門入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. jQueryってなに？
  5. jQueryライブラリの読み込み
  6. 簡単な機能をjQueryで実装しよう
  7. 変数を使う
  8. 関数を使う
  9. コンソールでデータの確認
  10. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPを便利にするいろんな記号
  9. データベース（DB）を作る

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

実践1（フロントエンジニア 中級3）

  1. コマンドラインを使おう
  2. Homebrewのインストール
  3. Gitでファイルのバージョン管理
  4. Gitを視覚的に確認
  5. Gitでファイルを共有する
  6. Gitでファイルの取り込み

実践2（フロントエンドエンジニア 中級4）

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

実践3（フロントエンドエンジニア 上級1）

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
  4. Vue.js + WordPressでヘッドレスCMSを作る
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザインデザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで。誰でも無料でできます
cbc-study.slack.com 質問の仕方はこちらをごらんください
powerd by logo