---
# System prepended metadata

title: 【B講座】Webディベロッパー養成講座2回目

---

# 【B講座】Webディベロッパー養成講座2回目
## 初期準備
### 授業資料のダウンロードと解凍
Teams上にアップロードした資料をシンクライアント上にダウンロードしてください。
Zipファイルですので解凍してください。

本日使う授業フォルダphp02に入っているもの。
```
cssフォルダ
fontsフォルダ
jsフォルダ
SQLフォルダ
index.php
insert.php
funcs.php
detail.php
delete.php
select.php
update.php
```
### php02フォルダをMAMPのhtdocs階層に移動させてください。
先ほどCドライブにダウンロードしたMAMPの中にhtdocsというフォルダがあります。
ここに授業資料の「php02」フォルダを移動してください！

## セクション１　データベース作成
### まずはphpMyAdminとMySQLの場所を知る
#### 1. MAMPを起動
#### 2. WebStartボタンから起動トップページを表示
#### 3. ページの真ん中MySQLのタブからphpMyAdminのリンクをクリック
#### 4. 起動した画面がMySQLを管理するphpMyAdminの画面が表示されます。

### データベースを作ってみよう
#### 1. データベースタブをクリック
#### 2. データベースを作成から以下の名前で作成
```
データベース名：gs_db
照合順序：utf8_unicode_ci
```
#### 3. 作成ボタンをクリック
左側にgs_dbというデータベースができていると思います。
現在は空っぽです。

### テーブルを作成してみよう
データベースの中にデータ管理用の表としてテーブルを作成します。
今回はアンケートシステムのDBとしてテーブルを構築します。
#### 1. テーブルを作成に以下の設定で作成
```
テーブル名：gs_an_table
カラム数：5
```
#### 2. カラムを作成していく
```
id:    int(12) AUTO_INCREMENT PRIMARY KEY
name:  var_char(64)
email:  var_char(128)
naiyou: text
indate: datetime
```
#### 3. 実行してみる

## セクション２　PHPからMySQLを操作（登録と取得表示）
PHP（サーバー言語）からMySQLにデータを送って保存したり取得したりしてみる。

### PHPからデータ登録
#### 1. まずはfuncs.phpの中のdb_conn()関数を完成させてDB接続処理を作る
```
function db_conn(){
    try {
      $db_name = "gs_db";    //データベース名
      $db_id   = "root";      //アカウント名
      $db_pw   = "root";      //パスワード：XAMPPはパスワード無しに修正してください。
      $db_host = "localhost"; //DBホスト
      $pdo = new PDO('mysql:dbname=' . $db_name . ';charset=utf8;host=' . $db_host, $db_id, $db_pw);
      return $pdo;//ここを追加！！
    } catch (PDOException $e) {
        exit('DB Connection Error:' . $e->getMessage());
    }
}
```
#### 2. index.phpのformの設定を完成させる
```
method：POST
action：insert.php
```
#### 3. insert.phpに処理を追記
```
//1. POSTデータ取得
$name = $_POST["name"];
$email = $_POST["email"];
$naiyou = $_POST["naiyou"];


//2. DB接続します
require_once('funcs.php');
$pdo = db_conn();


//３．SQL文を用意(データ登録：INSERT)
$stmt = $pdo->prepare(
  "INSERT INTO gs_an_table( id, name, email, naiyou, indate )
  VALUES( NULL, :name, :email, :naiyou, sysdate() )"
);

// 4. バインド変数を用意
$stmt->bindValue(':name', $name, PDO::PARAM_STR);  //Integer（数値の場合 PDO::PARAM_INT)
$stmt->bindValue(':email', $email, PDO::PARAM_STR);  //Integer（数値の場合 PDO::PARAM_INT)
$stmt->bindValue(':naiyou', $naiyou, PDO::PARAM_STR);  //Integer（数値の場合 PDO::PARAM_INT)

// 5. 実行
$status = $stmt->execute();
```

#### 4. リダイレクト処理を追加
```
//6．データ登録処理後
if($status==false){
  //SQL実行時にエラーがある場合（エラーオブジェクト取得して表示）
  $error = $stmt->errorInfo();
  exit("ErrorMassage:".$error[2]);
}else{
  //５．index.phpへリダイレクト
  header('Location: index.php');//ヘッダーロケーション（リダイレクト）
}
```

### PHPからデータ取得と表示
#### 1. selsect.phpでデータ取得
```
//1.  DB接続します
require_once('funcs.php');
$pdo = db_conn();

//２．SQL文を用意(データ取得：SELECT)
$stmt = $pdo->prepare("SELECT * FROM gs_an_table");

//3. 実行
$status = $stmt->execute();
```

#### 2. selsect.phpでデータ表示処理
先程の処理のすぐ下に以下を追記
```
//4．データ表示
$view="";//空のviewを作成
if($status==false) {
    //execute（SQL実行時にエラーがある場合）
  $error = $stmt->errorInfo();
  exit("ErrorQuery:".$error[2]);

}else{
  //Selectデータの数だけ自動でループしてくれる
  //FETCH_ASSOC=http://php.net/manual/ja/pdostatement.fetch.php
  while( $result = $stmt->fetch(PDO::FETCH_ASSOC)){ 
    $view .= "<p>";
    $view .= $result['indate'].':'.$result['name'].' '.$result['text'].' '.$result['email'];
    $view .= "</p>";
  }

}
```
#### 3. select.phpの表示用HTMLにviewを呼び出す
```
<div>
    <div class="container jumbotron"><?= $view ?></div>
</div>
```

## セクション3　PHPからMySQLを操作（更新）
### まずは更新画面を表示する為のリンクを作成する。
#### 1. select.phpのデータ表示のwhile文内のHTML生成にリンクを作成(GETデータ送信リンク)
```
//GETデータ送信リンク作成
// <a>で囲う。
$view .= '<p>';
$view .= '<a href="detail.php?id=' . $result['id'] . '">';
$view .= $result["indate"] . "：" . $result["name"];
$view .= '</a>';
$view .= '</p>';
```

#### 2. ブラウザの検証ツールからaタグのリンクの飛び先をチェック

### 更新画面を作成する
#### 1. detail.phpにデータ取得処理を記述
```
<?php
//1.外部ファイル読み込みしてDB接続
require_once('funcs.php');
$pdo = db_conn();

//2.対象のIDを取得
$id = $_GET['id'];

//3．データ登録SQL作成
$stmt = $pdo->prepare("SELECT * FROM gs_an_table WHERE id=:id;");
$stmt->bindValue(':id',$id,PDO::PARAM_INT);
$status = $stmt->execute();

//4．データ表示
$view = '';
if ($status == false) {
    sql_error($status);
} else {
    $result = $stmt->fetch();//ここを追記！！
}
?>
```

#### 2. detail.phpに更新画面用のHTMLを記述
index.phpのコードをまるっとコピーして貼り付け！
```
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>データ登録</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        div {
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header"><a class="navbar-brand" href="select.php">データ一覧</a></div>
            </div>
        </nav>
    </header>

    <!-- method, action, 各inputのnameを確認してください。  -->
    <form method="POST" action="insert.php">
        <div class="jumbotron">
            <fieldset>
                <legend>フリーアンケート</legend>
                <label>名前：<input type="text" name="name"></label><br>
                <label>Email：<input type="text" name="email"></label><br>
                <label><textarea name="naiyou" rows="4" cols="40"></textarea></label><br>
                <input type="submit" value="送信">
            </fieldset>
        </div>
    </form>
</body>

</html>

```
#### 3. detail.phpのHTML内formにvalueデータを代入する
```
<legend>フリーアンケート</legend>
<label>名前：<input type="text" name="name" value="<?= $result['name'] ?>"></label><br>
<label>Email：<input type="text" name="email" value="<?= $result['email'] ?>"></label><br>
<label><textarea name="content" rows="4" cols="40"><?= $result['naiyou'] ?></textarea></label><br>
<input type="submit" value="送信">
```

#### 4. detail.phpのHTML内formの送信ボタン直上に以下を追記
```
 <!-- ↓追加 -->
<input type="hidden" name="id" value="<?= $result['id'] ?>">
<input type="submit" value="送信">
```

#### 5. detail.phpのHTML内formのaction先をupdate.phpに変更する
```
<form method="POST" action="update.php">
 .....省略
</form>
```

### 更新処理の中身を作成する
#### 1. update.phpに更新処理を追記
```
//1. POSTデータ取得
$name   = $_POST["name"];
$email  = $_POST["email"];
$naiyou = $_POST["naiyou"];
$id = $_POST["id"];

//2. DB接続します
require_once('funcs.php');
$pdo = db_conn();

//３．データ登録SQL作成
$stmt = $pdo->prepare( "UPDATE gs_an_table SET name = :name, email = :email, age = :age, content = :content, indate = sysdate() WHERE id = :id;" );

$stmt->bindValue(':name', $name, PDO::PARAM_STR);/// 文字の場合 PDO::PARAM_STR
$stmt->bindValue(':email', $email, PDO::PARAM_STR);// 文字の場合 PDO::PARAM_STR
$stmt->bindValue(':naiyou', $naiyou, PDO::PARAM_STR);// 文字の場合 PDO::PARAM_STR
$stmt->bindValue(':id', $id, PDO::PARAM_INT);// 数値の場合 PDO::PARAM_INT
$status = $stmt->execute(); //実行

//４．データ登録処理後
if ($status == false) {
    sql_error($stmt);
} else {
    redirect('select.php');
}
```

## セクション4　PHPからMySQLを操作（削除）
### 削除ボタン（削除リンクを作成する）
#### 1. select.phpのデータ表示のwhile文内のHTML生成に削除リンクを作成
```
//GETデータ送信リンク作成
// <a>で囲う。
$view .= '<p>';
$view .= '<a href="detail.php?id=' . $result['id'] . '">';
$view .= $result["indate"] . "：" . $result["name"];
$view .= '</a>';
$view .= '<a href="delete.php?id=' . $result['id'] . '">';//追記
$view .= '  [削除]';//追記
$view .= '</a>';//追記
$view .= '</p>';
```
### 削除処理を実装する
#### 1. delete.phpに削除処理を記述
```
//1.対象のIDを取得
$id   = $_GET['id'];

//2.DB接続します
require_once('funcs.php');
$pdo = db_conn();

//3.削除SQLを作成
$stmt = $pdo->prepare("DELETE FROM gs_an_table WHERE id = :id");
$stmt->bindValue(':id', $id, PDO::PARAM_INT);
$status = $stmt->execute(); //実行


//４．データ登録処理後
if ($status == false) {
    sql_error($stmt);
} else {
    redirect('select.php');
}
```