# 【MC-Innovation-Lab】PHP5回目
### 授業資料のダウンロードと解凍
Teams上にアップロードした資料をダウンロードしてください。
Zipファイルですので解凍してください。

### php05フォルダをMAMPのhtdocs階層に移動させてください。
先ほどCドライブにダウンロードしたMAMPの中にhtdocsというフォルダがあります。
ここに授業資料の「php05」フォルダを移動してください！

## セクション２　投稿者が判別できるアンケートシステムの構築
### データベースに1対多のリレーションを組む為のカラムを追加する
#### 1. gs_dbを選択した状態でgs_an_tableをクリック

#### 2. gs_an_tableを選択した状態で構造タブをクリック

#### 3. 中段あたりにあるカラム追加フォームからカラムを追加
`1個のカラムを追加するidの後へ`で実行

#### 4.　カラムを追加

user_id
int(10)

#### 5. 事前に登録済みのデータのuser_idは全て0になっているので1~3の任意の数字に変更

#### 6. gs_user_tableのnameの部分をuser_nameに変更

### データ登録時のログインユーザーidを保存する処理を追加
#### 1. insert.phpでまずはログインユーザーのidを取得

<?php
session_start();//追記！！！


//1. POSTデータ取得
省略

//ログインユーザーidを取得
$user_id = $_SESSION["user_id"];

#### 2. insert.phpのSQLを変更

INSERT INTO gs_an_table(user_id,name,email,naiyou,indate)VALUES(:user_id,:name,:email,:naiyou,sysdate())

bind変数も追加

$stmt->bindValue(':user_id', $user_id, PDO::PARAM_INT);  //Integer（数値の場合 PDO::PARAM_INT)

#### 3.実際にformからデータ登録してデータベースに保存されているかチェック
別のアカウントでもログインして2~3個ほどデータを登録

### アンケート一覧で投稿者名を横に表示する（リレーション先のデータ取得）
#### 1.Select.php　のSQL文をアップデート

SELECT * FROM gs_an_table INNER JOIN gs_user_table ON gs_an_table.user_id = gs_user_table.id 

ちなみに文法的には

SELECT * FROM 主テーブル INNER JOIN 子テーブル ON 主テーブル.キー = 子テーブル.キー 

＊詳しく知りたい方はこの新卒の子が書いてるQiitaが初心者にわかりやすいのでおすすめ
https://qiita.com/SuguruOoki/items/e83da54b6c78cc58e40d

#### 2.select.phpに表示処理のwhile文内を編集

$view .= $r["id"]."|".$r["name"]."|".$r["email"];

↓↓↓↓↓↓↓↓

$view .= $r["id"]."|".$r["name"]."|".$r["email"].$r["user_name"];

#### 3.カラム名重複対策のAS区

SELECT 主テーブル.id AS main_id 子テーブル.id AS sub_id FROM 主テーブル INNER JOIN 子テーブル ON 主テーブル.キー = 子テーブル.キー 

## セクション３ 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.登録の処理は通常と同じです

## セクション４ fileUpload(ファイルアップロード)
まずは「gs_img_table」をデータベースに作成

カラムは２つだけ
id:int(10)
img:varchar(256)

#### 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>