# PHP05
## 授業資料
[ダウンロードリンク](https://drive.google.com/drive/folders/12SYBsZr_y_gFPQ7HbOdOpggLSyzQ_NXs?usp=sharing)

## 1章:環境準備（DBの準備）
### まずはphpMyAdminを開いて授業用のDBを作成する
#### 1. MAMPを起動
#### 2. WebStartボタンから起動トップページを表示
#### 3. ページの真ん中MySQLのタブからphpMyAdminのリンクをクリック
#### 4. 起動した画面がMySQLを管理するphpMyAdminの画面が表示されます。

#### 5. データベースタブをクリック
#### 6. データベースを作成から以下の名前で作成

データベース名：gs_db5
照合順序：utf8_unicode_ci

#### 7. 作成ボタンをクリック
左側にgs_db5というデータベースができていると思います。
現在は空っぽです。

### SQLファイルからインポートしてみよう
〇〇.sqlというSQLファイルをインポートしてデータを作成します。
#### 1. gs_db4を選択した状態でインポートタブをクリック

#### 2. ファイルを選択をクリックして配布した資料内のSQLフォルダ内のgs_db5.sqlを選択

#### 3. 実行する

#### 4.　今日の授業用DB完成

## 2章:Ajax（非同期通信）
AjaxとはJavascriptによってブラウザ上での動作を主に必要なデータのみをサーバー側とやりとりを行い通信量の負担を減らす。
よく見る機能：インクリメンタルサーチ（インスタグラムのユーザー検索）

### ajax.htmlからjQueryを使ってデータを送る処理を見てみる
#### 1.ajax.htmlの処理を追記

$.ajax({
    type: 'POST', //GET,POST
    url: 'ajax.php', //通信先URL
    data: { //Dataプロパティはデータを送信（渡す）役目
        id: 1,
        name: '名前',
        age: '27',
        sleep: 2 //Timeoutテスト用
    },
    dataType: 'json', //text, html, xml, json, jsonp, script
    timeout: 5000,//データの返答を待つ時間(ミリ秒)
    success: function(data) {
        $("#ajax_status").text("通信完了！");
        console.log(data);
    },
    error: function(error) {
        console.log(error); //戻り値Allオブジェクト
    },
    complete: function() {
        //成功＆エラー処理後に必ず実行したい処理を記述する
        $("body").append("完了"); //戻り値Allオブジェクト
    }
});

#### 2.ajax.phpにてデータを受け取る

//POSTパラメータを取得
$id = $_POST["id"];
$name = $_POST["name"];
$age = $_POST["age"];
$sleep = $_POST["sleep"];
sleep($sleep);  //Timeoutテスト用
echo "<div>$id</div><div>$name</div><div>$age</div>";

#### 3.ajax.htmlの検証ツールでconsoleを確認するとHTMLが受け取れているはずです。

#### 4.ajax.phpのHTMLのechoをコメントアウトしてjson変数のコメントアウト解除

 $json = '[
   {
     "id":"'.$id.'",
     "mode":"'.$mode.'",
     "type":"'.$type.'"
   },
   {
    "id":"'.$id.'",
    "mode":"'.$mode.'",
    "type":"'.$type.'"
   }
 ]';
 echo $json;

### ajax_inputでajaxを使ったデータ登録を実装
#### 1.index.phpのajax処理の部分を設定しdataの部分をformのデータをjsで取得

type: "post",
url: "insert.php",
data: {
    name: $("#name").val(),
    email: $("#email").val(),
    naiyou: $("#naiyou").val() 
},

#### 2.insert.phpでデータを取得

//1. POSTデータ取得
$name   = $_POST["name"];
$email  = $_POST["email"];
$naiyou = $_POST["naiyou"];

#### 3.登録の処理は通常と同じです

## 3章:fileUpload(ファイルアップロード)
#### 1.fileupload.htmlのformを作成する

<form method="POST" action="fileupload.php" enctype="multipart/form-data">
    <input type="file" name="upfile">
    <input type="submit" class="btn btn-success btn-sm" value="Fileアップロード">
</form>

#### 2.fileupload.phpで受け取ったファイルを保存する

if (isset($_FILES["upfile"] ) && $_FILES["upfile"]["error"] ==0 ) {

    //ファイル名を取得
    $file_name = $_FILES["upfile"]["name"];
    //一時保存パス作成
    $tmp_path  = $_FILES["upfile"]["tmp_name"];
    //拡張子取得
    $extension = pathinfo($file_name, PATHINFO_EXTENSION);
    //ユニークなファイル名を生成
    $file_name = date("YmdHis").md5(session_id()) . "." . $extension;

    // FileUpload [--Start--]
    $img="";//空の変数
    $file_dir_path = "upload/".$file_name;//uploadフォルダにファイルを移動
    if ( is_uploaded_file( $tmp_path ) ) {
        if ( move_uploaded_file( $tmp_path, $file_dir_path ) ) {
            chmod( $file_dir_path, 0644 );
            $img = '<img src="'.$file_dir_path.'">';
        } else {
            // echo "Error:アップロードできませんでした。";
        }
    }


 }else{
     $img = "画像が送信されていません";
 }
 //[FileUploadCheck--END--] 

#### 3.fileupload.phpにDBへファイル名の保存処理を追記

chmod( $file_dir_path, 0644 );//ファイルの権限を設定

require_once("funcs.php");
//2. DB接続します
$pdo = db_conn();
$sql = "INSERT INTO gs_img_table(id,img)VALUES(null,:img)";
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':img', $file_name, PDO::PARAM_STR); //Integer（数値の場合 PDO::PARAM_INT)
$status = $stmt->execute();

//４．データ登録処理後
if ($status == false) {
    sql_error($stmt);
} else {
    $img = '<img src="'.$file_dir_path.'">';
}

#### 4. file_view.phpに画像取得処理を記述

// 1. DB接続
require_once('funcs.php');
$pdo = db_conn();

//２．データ登録SQL作成
$stmt = $pdo->prepare("SELECT * FROM gs_img_table");
$status = $stmt->execute();

//３．データ表示
$view="";
if($status==false) {
  sql_error();
}else{
  while( $r = $stmt->fetch(PDO::FETCH_ASSOC)){ 
    $view .= '<p><img src="upload/'.$r["img"].'"></p>';
  }
}

#### 4. file_view.phpのphotoareaに表示

<div id="photarea">
    <!-- ここにPHPの変数を記述 -->
    <?=$view?>
</div>