アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

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

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

パターン1とパターン2として例を書きます。

<div class="form-group">
    <label for="exampleFormControlSelect1">SELECTタイプ1</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タイプ2</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

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

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

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

タイプ2は「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>

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

  • 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タイプ1</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タイプ2</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

ではでは。