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

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

PHP+CodeIgniter3+Bootstrap4:チェックボックスとラジオボタンとスライドバー(レンジ入力)を使う

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

f:id:arakan_no_boku:20180926205937p:plain

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

  • ラジオボタンで選択された値を受け取る
  • チェックボックスが選択されているか否かを受け取る
  • スライドバー(レンジ入力)で選択されている割合を受け取る

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

赤枠部分が今回追加する部分です。

f:id:arakan_no_boku:20180926224114j:plain

実行するボタンを押した後の表示画面はこうです。

こちらも赤枠部分が追加したものです。

f:id:arakan_no_boku:20180926224226j:plain

 

 

ラジオボタンで選択された値を受け取る 

 

 全体のソースは最後に掲載するとして、とりあえず、該当する箇所のみ。

まずはラジオボタンです。

入力画面のViewに以下のように追加します。

      <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0"><?php echo $radio_title; ?></legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input type="radio" name="radio_btn" id="radio01" value="1番目の選択肢" checked>
          <label class="form-check-label" for="radio01">
            <?php echo $radio01; ?>
          </label>
        </div>
        <div class="form-check">
          <input type="radio" name="radio_btn" id="radio02" value="2番目の選択肢">
          <label class="form-check-label" for="radio02">
            <?php echo $radio02; ?>
          </label>
        </div>
        <div class="form-check">
          <input type="radio" name="radio_btn" id="radio03" value="3番目の選択肢">
          <label class="form-check-label" for="radio03">
            <?php echo $radio03; ?>
          </label>
        </div>
      </div>
    </div>
  </fieldset>

ポイントはinputタグの「name」です。 

name=で指定した名前で、CodeIgniterのコントローラクラスと連携します。

ラジオボタンの場合は、すべての選択肢で同じ名前(例では、radio_btn)になります。

そして、それぞれのValueに設定した値が、選択情報として渡されます。

対応するコントローラクラスではこんな感じです。

       $data['radio_title'] = "ラジオボタンのサンプル";
        $data['radio01'] = "ラジオボタン選択肢01";
        $data['radio02'] = "ラジオボタン選択肢02";
        $data['radio03'] = "ラジオボタン選択肢03";
        $data['radio_selected'] = $this->input->post('radio_btn');

上の4行は、表示用の名称をセットする処理。 

最後の1行が、選択された値を受け取る処理になります。

そして、受け取った値は表示画面で以下のように表示します。

     <div class="row">
    <div class="col text-center my-2">
    <h2>選択されたラジオボタンの値は「<?php echo $radio_selected; ?>」です。</h2>
  	</div>
  </div>

$radio_selectedには、選択された[Valueの値」がはいってます。

 

チェックボックスが選択されているか否かを受け取る

 

入力画面のVIEWのチェックボックスを表示する箇所です。

      <div class="form-group row">
    <div class="col-sm-2"><?php echo $check_title; ?></div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="check01" value="1" id="check01">
        <label class="form-check-label" for="check01">
			<?php echo $check01; ?>
        </label>
      </div>
    </div>
  </div>

ここもname=で連携する名前を追加するのがポイントです。

コントローラクラスのチェックボックスに対応する箇所です。

    $data['check_title'] = "チェックボックスのサンプル";
    $data['check01'] = "チェックボックス選択肢01";
    if($this->input->post('check01')){
        $data['check_selected'] = "チェックされています";
    }else{
        $data['check_selected'] = "チェックされていません";
    }

上の2行が、入力画面に表示する名称などです。

ポイントはその下の部分。

チェックボックスの値を受け取ってますが、チェックされていると値がはいり、されていないと何もはいらない・・ということで、IF文で判定できるみたいです。

IF文の結果がTRUEなら、チェックされた場合の処理、そうでない場合はチェックされていない場合の処理・・のように切り分けます。

ということなので、結果表示部分はこうなります。

      <div class="row">
    <div class="col text-center my-2">
    <h2>チェックボックスは<?php echo $check_selected; ?>。 </h2>
  	</div>
  </div>

ここは特に補足もありません。 

 

 スライダー(レンジ入力)です。

 

Viewでスライダー(レンジ入力)を表示する部分です。

    <div class="form-group row  my-4">
  	 <div class="col-sm-2">
  	 	<label for="range01">レンジの実例</label>
  	</div>
  	<div class="col-sm-10">
		<input type="range" class="custom-range" min="0" max="100" name="range01" id="range01">
	</div>
  </div>

これも、CodeIgniterとやり取りするために「name=」で名前を設定します。

minとmaxは、デフォルトが「0」と「100」なので、あえて書かなくてもいいんですが、わかりやすさ優先で書いてます。

コントローラでは、値の受取のみになります。

    $data['radio_selected'] = $this->input->post('radio_btn');

ここで受け取った値には、レンジ入力で指定された値(数字)がはいってきます。

例によって、表示する部分はこんな感じです。

      <div class="row">
    <div class="col text-center my-2">
    <h2>スライドバーで選ばれた割合は「<?php echo $range_value; ?>」です。 </h2>
  	</div>
  </div>

特にポイントはありません。

 

注意点と全体ソース

 

上記で1点だけ。

inputタグに「name」で名前をつけるとき、例えば「check-title」みたいに「-」でつながないように気をつけた方がいいです。

なんか、わけのわからないエラーがでました。

必ず「check_title」のようにアンダーバーに統一した方が安全です。

では、全文です。

まずコントローラクラス(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');
        $this->load->model('Demo_model');
    }

    public function tbl($page = 'demobody')
    {
        if ( ! file_exists(APPPATH.'views/demos/'.$page.'.php'))
        {
            show_404();
        }

        $data['title'] = ucfirst($page);
        $data['infotitle'] = "サンプルの一覧表です";
        $data['info'] = $this->Demo_model->getTableData();

        $this->load->view('templates/header', $data);
        $this->load->view('demos/'.$page, $data);
        $this->load->view('templates/footer', $data);
    }

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

        $this->form_validation->set_rules('input-id', 'input-id', 'required');
        $this->form_validation->set_rules('input-password', 'input-password', 'required');

        $data['title'] = "formサンプル";
        $data['radio_title'] = "ラジオボタンのサンプル";
        $data['radio01'] = "ラジオボタン選択肢01";
        $data['radio02'] = "ラジオボタン選択肢02";
        $data['radio03'] = "ラジオボタン選択肢03";
        $data['check_title'] = "チェックボックスのサンプル";
        $data['check01'] = "チェックボックス選択肢01";
        $data['id'] =  $this->input->post('input-id');
        $data['pass'] = $this->input->post('input-password');
        $data['radio_selected'] = $this->input->post('radio_btn');
        if($this->input->post('check01')){
            $data['check_selected'] = "チェックされています";
        }else{
            $data['check_selected'] = "チェックされていません";
        }
        $data['range_value'] = $this->input->post('range01');

        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);

        }

    }
}

?>

次は入力画面(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 row my-4">
    <label for="inputId" class="col-sm-2 col-form-label">ユーザID</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="input-id" name="input-id" placeholder="ユーザID(半角)を入力">
    </div>
  </div>
  <div class="form-group row  my-4">
    <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
    	<input type="password" class="form-control" id="input-password" name="input-password" placeholder="パスワード">
    	<small id="passwordHelpBlock" class="form-text text-muted">パスワードは、文字と数字で8~20文字です。空白、記号、特殊文字、絵文字を含むことはできません。</small>
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0"><?php echo $radio_title; ?></legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input type="radio" name="radio_btn" id="radio01" value="1番目の選択肢" checked>
          <label class="form-check-label" for="radio01">
            <?php echo $radio01; ?>
          </label>
        </div>
        <div class="form-check">
          <input type="radio" name="radio_btn" id="radio02" value="2番目の選択肢">
          <label class="form-check-label" for="radio02">
            <?php echo $radio02; ?>
          </label>
        </div>
        <div class="form-check">
          <input type="radio" name="radio_btn" id="radio03" value="3番目の選択肢">
          <label class="form-check-label" for="radio03">
            <?php echo $radio03; ?>
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2"><?php echo $check_title; ?></div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="check01" value="1" id="check01">
        <label class="form-check-label" for="check01">
			<?php echo $check01; ?>
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row  my-4">
  	 <div class="col-sm-2">
  	 	<label for="range01">レンジの実例</label>
  	</div>
  	<div class="col-sm-10">
		<input type="range" class="custom-range" min="0" max="100" name="range01" id="range01">
	</div>
  </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>

最後に結果表示画面(successbody.php)です。

      <div class="row">
  	<div class="col text-center my-4">
  		<h2><?php echo $msg; ?></h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>入力されたIDは「<?php echo $id; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>入力されたパスワードは「<?php echo $pass; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>選択されたラジオボタンの値は「<?php echo $radio_selected; ?>」です。</h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>チェックボックスは<?php echo $check_selected; ?>。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-2">
    <h2>スライドバーで選ばれた割合は「<?php echo $range_value; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
  	<div class="col my-2 text-center">
  		<?php echo img('images/sample02.jpg'); ?>
  	</div>
  </div>

ヘダーとフッターの部分は以下の記事で書いたテンプレートの使いまわしです。

arakan-pgm-ai.hatenablog.com

ではでは。