PHP+CodeIgniter3＋Bootstrap4：テキストボックスからの値の受け渡しとエラーメッセージ日本語化

CodeIgniter3＋Bootstrap4で、Form入力をやります。

方針は以下です。

• Formとの値のやり取りはCodeIgniterの機能を使う。
• Formヘルパーは最低限しか使わない。
• Input部品の外観（CSS）はBootstrapを使う

今回はとりあえず、「テキストボックスへの入力」と「Submitからの値の受取り」と「必須入力のみのチェック」をします。

あと、入力チェック等のエラーメッセージの日本語化ですね。

エラーメッセージの日本語化

エラーメッセージを日本語で表示できるようにします。

チェックポイントは２点です。

ひとつめ。

application/config/config.php　で$config['language']を「japanese」にします。

/*$config['language'] = 'english';*/
$config['language'] = 'japanese';

ふたつめ。

application/language　に「japanese」の言語ファイルがあるか確認します。

ないとときは実行時に入力エラーを検知するとこんなエラーがでます。

Unable to load the requested language file: language/japanese/form_validation_lang.php

その場合は、公式サイトの「Download CodeIgniter」から、「Download the system message translations」をクリックして、ZIPファイルをダウンロードします。

上記のZIPファイルを解凍して、含まれているjapaneseフォルダごと、「application/language」の下にコピーします。

今回はこんな感じの画面を作ってみます

まず、入力画面です。

これで、ユーザIDとパスワードを入力して「実行する」ボタンを押すと、単純に結果を以下のように表示します。

最低限、必須入力チェックだけします。

例えば、パスワードだけ入力しないで、実行するボタンを押した場合のエラーメッセージです。

まずはコントロールクラスから

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');
        $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['id'] =  $this->input->post('input-id');
        $data['pass'] = $this->input->post('input-password');

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

        }

    }
}

?>

ポイントを補足します。

必要なヘルパーとライブラリのロード

次の２つは必ずロードしておく必要があります。

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

上記では、View側で「name='input-id'」および「name='input-password’」と指定されたinput部品に対して必須入力チェックをかけます。

validationについては、いろいろ種類がありますが、それは別の回に整理するとして、とりあえず今回は必須だけ。

入力された値の受取

Submitされた時に、Viewで入力された値は以下のようにして受け取ります。

$data['id'] = $this->input->post('input-id');
$data['pass'] = $this->input->post('input-password');

$this->input->post('input-id');だと、 View側で「name='input-id'」と指定されたinput部品から値を受け取ります。

入力エラーの有無を検査して表示画面を切り替える

参照のみの時は、メソッドの引数で「$page='inpbody'」のようにして、表示するPHPファイルの名前を指定してました。

でも、入力画面の場合は、入力のエラーの有無で表示する画面が変わります。

エラーがあれば、エラーメッセージを表示して再度入力画面を表示します。

エラーがなければ、入力成功画面を表示します。

こういうときは、以下のように「$this->form_validation->run()」がTrue（エラーなし）か「False（エラーあり）」かで、表示画面を切り替えます。

if ($this->form_validation->run() === FALSE){

 　//入力エラーがあった場合の表示処理

}else{

　//入力エラーがなかった場合の表示処理
}

これで、コントローラはOKです。

View：入力画面です

inpbody.phpの方です。

ヘダー部分はテンプレートの使いまわしなので、例によって、body部分だけです。

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

ポイントを補足します。

 エラーメッセージを表示します

以下のようにして表示します。

<?php echo validation_errors(); ?>

 エラーがある時だけ、メッセージを表示します。

文字色等の装飾は、別途Bootstrapのclassを使ってます。

formを指定し、入力部品にはname=をつける

必ず、formヘルパーを使います。

<?php echo form_open('Demos/inp'); ?>

引数はコントローラクラスの「クラス名/メソッド名」です。

form_open('Demos');みたいに、コントローラクラスのクラス名だけを引数に指定した場合は、メソッド名は暗黙的に「index()」を探しに行きます。

formヘルパーを使うのは、今回はこの「form_open()」だけです。

他のinput部品やSubmitボタンは、通常のHTML＋Bootstrapです。

必ず必要なのは「name」を指定することです。

例えば。

<input type="text" class="form-control" id="input-id" name="input-id" placeholder="ユーザID（半角）を入力">

この場合だと、コントローラクラスでは 「$this->input->post('input-id');」で値の受け渡しをすることになります。

View：入力成功画面です

success_body.php　の方です。

     <div class="row">
  	<div class="col text-center">
  		<h2><?php echo $msg; ?></h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-4">
    <h2>入力されたIDは「<?php echo $id; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
    <div class="col text-center my-4">
    <h2>入力されたパスワードは「<?php echo $pass; ?>」です。 </h2>
  	</div>
  </div>
  <div class="row">
  	<div class="col my-2 text-center">
  		<?php echo img('images/sample02.jpg'); ?>
  	</div>
  </div>

こちらの画面は$dataにセットされた値を参照しているだけなので、特に補足する部分はありません。 

$dataの参照について補足が必要な場合は、以下記事も参考にしてください。

arakan-pgm-ai.hatenablog.com

とりあえず実行

ローカルホストでやる場合だと、コントローラクラスが「Demos」で、メソッドが「inp」なのでこんな感じのURLになります。

http://localhost/ciprac/index.php?/Demos/inp

ま・・。

今回はこんな感じで。