PHP+CodeIgniter3＋Bootstrap4：FormでSELECT（ひとつと複数選択値受取）とファイル選択

CodeIgniter3＋Bootstrap4でForm入力を前回に引き続きやります。

f:id:arakan_no_boku:20180926205937p:plain

今回は、前回の画面に以下を追加します。

SELECTからひとつだけ選択値を受け取る
SELECTで複数選択された値を受け取る
ファイル選択ダイアログ表示と選択したファイル名を受け取る

表示画面のイメージ

入力画面のイメージはこんな感じになります。

今回追加した部分だけ表示してます。

f:id:arakan_no_boku:20180929212206j:plain

そして、選択された結果の表示はこんな感じです。

f:id:arakan_no_boku:20180929212317j:plain

VIEWの表示部分です

今回はコントローラクラスから初期表示時に値を渡さないので、VIEWのPHPソースだけです。

フォームの選択

以下のように書きます。

例によって、コントローラクラスで値を受け取る変数名を「name=」で指定します。

<div class="form-group">
   <label for="File">ファイル入力の例</label>
   <input type="file" name="file01" class="form-control-file" id="File">
</div>

こう書くと、以下のように表示されます。

f:id:arakan_no_boku:20180929215113j:plain

ここで「ファイルを選択」ボタンを押すと、ファイル選択ダイアログが表示されます。

f:id:arakan_no_boku:20180929215952j:plain

ここで選んだファイル名をコントローラで取得できるわけです。

ひとつだけ選択するSELECT

デザインは２種類あります。

パターン１とパターン２として例を書きます。

<div class="form-group">
    <label for="exampleFormControlSelect1">SELECTタイプ１</label>
  	<select name="select01" class="custom-select" id="exampleFormControlSelect1">
  		<option selected>この選択メニューを開く</option>
  		<option value="1">選択メニュー：その1</option>
  		<option value="2">選択メニュー：その2</option>
  		<option value="3">選択メニュー：その3</option>
	</select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">SELECTタイプ２</label>
    <select name="select02"  class="form-control" id="exampleFormControlSelect2">
      <option selected>この選択メニューを開く</option>
      <option>単一選択：1番目</option>
      <option>単一選択：2番目</option>
      <option>単一選択：3番目</option>
      <option>単一選択：4番目</option>
      <option>単一選択：5番目</option>
    </select>
  </div>

例によって、コントローラで値の受取に使う名称を「name=」で追加してます。

表示すると、こんな感じ。

f:id:arakan_no_boku:20180929222226j:plain

タイプ１とタイプ２の見た目の違いは微妙ですけどね。

同じ、Selectですが指定するclassの名前を変えるだけです。

タイプ１は「class="custom-select"」。

タイプ２は「class="form-control"」。

あとは、ほぼ同じですね。

複数項目選択可能なSELECT

上と同じく「SELECT」を使います。

  <div class="form-group">
    <label for="exampleFormControlSelect2">Ctrlキーで複数選択できます</label>
    <select multiple name="select03[]" class="form-control" id="exampleFormControlSelect2">
      <option>--未選択--</option>
      <option>複数：1番目</option>
      <option>複数：2番目</option>
      <option>複数：3番目</option>
      <option>複数：4番目</option>
      <option>複数：5番目</option>
    </select>
  </div>

ポイントは３つあります。

multiple　を指定します。
classは「 class="form-control"」です。
コントローラクラスで値を受け取るために「name=」を追加するのですが、複数選択可能にするために配列にしておく必要があります。

この部分です。

  name="select03[]"

特に大事なところです。

もし、「name="select03"」のようにすると、複数選択しても最後に選択された一つしかコントローラクラスでは受け取れなくなりますので・・・。

これで表示するとこんな感じです。

f:id:arakan_no_boku:20180929224752j:plain

Ctrlキーを押しながらクリックすると複数選択できます。

f:id:arakan_no_boku:20180929225315j:plain

コントローラクラスでの値の受取

上記で選択されたファイル名な選択項目の値を受け取るのは、他のFormと同じく、name=で指定した名称を使って以下のように書きます。

$data['file01'] = $this->input->post('file01');
$data['select01'] = $this->input->post('select01');
$data['select02'] = $this->input->post('select02');
$data['select03'] = $this->input->post('select03');

注意するのは複数項目選択可能なSELECTの場合です。

複数項目を受け取る必要があるので、配列を明示的に指定していますが、コントローラクラスで値を受け取る時は「$this->input->post('select03');」のように書きます。

  「$this->input->post('select03[]');

ではないので、忘れないようにしないと・・です。

取得結果表示画面のVIEW

PHPの該当箇所です。

<div class="row">
    <div class="col text-center my-2">
    <h2>ファイル選択された値は「<?php echo $file01; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>カスタム選択で選ばれた値は「<?php echo $select01; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>単一選択で選ばれた値は「<?php echo $select02; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <?php
        foreach($select03 as $val){
            print("<h2>複数選択で選ばれた値は「".$val ."」です。 </h2>");
        }
    ?>
 	</div>
  </div>

SELECTの複数項目選択以外は、コントローラクラスの$data['xxxx']で指定した名前に$をつけて「$xxxx」のように呼び出しているだけです。

ただ、SELECTの複数項目選択では「配列（array）」ですから、foreachでうけて全ての選択項目を拾う必要があります。

最後にソースの全体です

まず、入力画面のVIEWにあたる「inpbody.php」です。

<div class="row">
  	<div class="col text-center">
  		<h2><?php echo $msg; ?></h2>
  	</div>
</div>
<div class="row">
	<div class="col text-center text-danger">
		<h2><?php echo validation_errors(); ?></h2>
	</div>
</div>

<?php echo form_open('Demos/inp'); ?>
  <div class="form-group">
    <label for="File">ファイル入力の例</label>
    <input type="file" name="file01" class="form-control-file" id="File">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">SELECTタイプ１</label>
  	<select name="select01" class="custom-select" id="exampleFormControlSelect1">
  		<option selected>この選択メニューを開く</option>
  		<option value="1">選択メニュー：その1</option>
  		<option value="2">選択メニュー：その2</option>
  		<option value="3">選択メニュー：その3</option>
	</select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">SELECTタイプ２</label>
    <select name="select02"  class="form-control" id="exampleFormControlSelect2">
      <option selected>この選択メニューを開く</option>
      <option>単一選択：1番目</option>
      <option>単一選択：2番目</option>
      <option>単一選択：3番目</option>
      <option>単一選択：4番目</option>
      <option>単一選択：5番目</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Ctrlキーで複数選択できます</label>
    <select multiple name="select03[]" class="form-control" id="exampleFormControlSelect2">
      <option>--未選択--</option>
      <option>複数：1番目</option>
      <option>複数：2番目</option>
      <option>複数：3番目</option>
      <option>複数：4番目</option>
      <option>複数：5番目</option>
    </select>
  </div>
  <div class="form-group row  my-4">
    <div class="offset-sm-2 col-sm-10">
      <button type="submit" class="btn btn-primary">実行する</button>
    </div>
  </div>
</form>

VIEWの表示とSUBMIT後の入力値を受け取るコントロールクラス「Demos.php」です

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Demos extends CI_Controller{

    public function __construct()
    {
        parent::__construct();
        $this->load->helper('url');
        $this->load->helper('html');
    }

   public function inp()
   {
        $this->load->helper('form');

        $data['title'] = "formサンプル";
        $data['file01'] = $this->input->post('file01');
        $data['select01'] = $this->input->post('select01');
        $data['select02'] = $this->input->post('select02');
        $data['select03'] = $this->input->post('select03');

        if ($this->form_validation->run() === FALSE){
            if ( ! file_exists(APPPATH.'views/demos/inpbody.php')){
                show_404();
            }
            $data['msg'] = "とりあえずIDとパスワードを入力するサンプル";
            $this->load->view('templates/header', $data);
            $this->load->view('demos/inpbody.php',$data);
            $this->load->view('templates/footer', $data);
        }else{
            if ( ! file_exists(APPPATH.'views/demos/success_body.php')){
                show_404();
            }
            $data['msg'] = "入力を正常に受け取りました";
            $this->load->view('templates/header', $data);
            $this->load->view('demos/success_body.php',$data);
            $this->load->view('templates/footer', $data);

        }

    }
}

?>

入力してSubmitした結果を表示する「successbody.php」です。

<div class="row">
    <div class="col text-center my-2">
    <h2>ファイル選択された値は「<?php echo $file01; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>カスタム選択で選ばれた値は「<?php echo $select01; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>単一選択で選ばれた値は「<?php echo $select02; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <?php
        foreach($select03 as $val){
            print("<h2>複数選択で選ばれた値は「".$val ."」です。 </h2>");
        }
    ?>
 	</div>
  </div>

なお、例によって、ヘダーとフッターの部分は以下の記事で書いたテンプレートの使いまわしです。

arakan-pgm-ai.hatenablog.com

ではでは。

SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc