CodeIgniter 4 Pico.cssを使用したコンタクトフォームのチュートリアル

CodeIgniter4でのコンタクトフォームの作成方法を解説しています。Pico.cssのモーダルコンポーネントを使用してフォーム送信後のメッセージを表示します。

CodeIgniter4のプロジェクトの作成

このチュートリアルではCodeIgniter 4でシンプルなコンタクトフォーム（お問い合わせフォーム）を作成していきます。送信されたデータはデータベースに保存します。

Viewで使用するPico.cssは軽量ながらカードコンポーネントやモーダルコンポーネントを備えた優れたCSSフレームワークです。今回はモーダルコンポーネントを使用してメッセージを表示します。

開発環境のサーバーはXAMPPを使用します。CodeIgniter4のダウンロードにComposerを使用しますので事前にインストールしておきます。それではまずプロジェクトを作成します。XAMPPのhtdocsに移動し下記コマンドを実行します。今回のプロジェクト名はcontact-form-tutorialとします。

CodeIgniter4のプロジェクトの作成

composer create-project codeigniter4/appstarter contact-form-tutorial

開発モードに設定していきます。テキストエディターでenvファイルを.envにリネームしCI_ENVIRONMENTをdevelopmentに、app.baseURLを'http://localhost/contact-form-tutorial/public'に設定します。

.env抜粋

# ENVIRONMENT
CI_ENVIRONMENT = development

# APP
app.baseURL = 'http://localhost/contact-form-tutorial/public'

これで開発モードに設定できました。

データベースの作成とCodeIgniter4との接続設定

コンタクトフォームから送信されたデータを保存するデータベースを作成します。このチュートリアルではデータベース名をtestdbに、テーブル名はcontactsとします。phpMyAdminで作成していきます。下記コマンドでデータベースを作成します。

データベースtestdbの作成

CREATE DATABASE testdb;

次にテーブルを作成します。今回は下記6つのフィールドを作成します。

id・・・アイディー
name・・・名前
email・・・メールアドレス
subject・・・メッセージの件名
message・・・メッセージの本文
created_at・・・作成日時

contactsテーブルの作成

CREATE TABLE `testdb`.`contacts` (
`id` INT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR(255) NOT NULL ,
`email` VARCHAR(255) NOT NULL ,
`subject` VARCHAR(255) NOT NULL ,
`message` TEXT NOT NULL ,
`created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ,
PRIMARY KEY (`id`)
) ENGINE = InnoDB CHARSET=utf8 COLLATE utf8_general_ci;

データベースが作成できたのでCodeIgniter4で接続するために.envファイルのデータベースの項目を設定します。

.env抜粋

# DATABASE
database.default.hostname = localhost
database.default.database = testdb
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi

ホスト名、データベース名、ユーザー名、パスワードはそれぞれの環境にあわせて変更してください。これでデータベースの準備完了です。

ContactModelファイルの作成

ContactModelファイルを作成します。まず下記コマンドを実行します。

app\Models\ContactModel.php

<?php

namespace App\Models;

use CodeIgniter\Model;

class ContactModel extends Model
{
    protected $DBGroup          = 'default';
    protected $table            = 'contacts';
    protected $primaryKey       = 'id';
    protected $useAutoIncrement = true;
    protected $insertID         = 0;
    protected $returnType       = 'array';
    protected $useSoftDeletes   = false;
    protected $protectFields    = true;
    protected $allowedFields    = ['name', 'email', 'subject', 'message'];

    // Dates
    protected $useTimestamps = false;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
}

これでContactModel.phpの完成です。

Routingの設定

コントローラファイルを作成する前にルーティングを設定してしまいましょう。app/Config/Routes.phpのRoute Definitionsの部分を下記のようにします。

app/Config/Routes.php抜粋

$routes->match(['get', 'post'], 'contact', 'ContactController::index');

matchを使えば同じメソッドにアクセスするgetとpostをまとめて記述できます。それではコントローラを作成しましょう。

ContactControllerファイルの作成

ContactControllerファイルを作成します。まず下記コマンドを実行します。

ContactController.phpの作成

php spark make:controller Contact --suffix

app/Controllers内にひな形が生成されるので下記のようにします。

app/Controllers/ContactController.php

<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\ContactModel;

class ContactController extends BaseController
{
    public function __construct()
    {
        helper(['form','url']);
        $this->session = ConfigServices::session();
    }

    public function index()
    {
        $data['validation'] = null;

        $rules = [
            'name' => 'required|min_length[2]|max_length[255]',
            'email' => 'required|valid_email',
            'subject' => 'required|max_length[255]',
            'message' => 'required'
        ];

        if ($this->request->getMethod() == 'post') {
            if ($this->validate($rules)) {
                $contactModel = new ContactModel();

                $contactData = [
                    'name' => $this->request->getVar('name', FILTER_SANITIZE_STRING),
                    'email' => $this->request->getVar('email', FILTER_SANITIZE_STRING),
                    'subject' => $this->request->getVar('subject', FILTER_SANITIZE_STRING),
                    'message' => $this->request->getVar('message', FILTER_SANITIZE_STRING),
                ];

                $status = $contactModel->save($contactData);

                if ($status) {
                    session()->setFlashdata('msg', 'メッセージが送信されました。ご連絡ありがとうございます。');
                    return redirect()->to(base_url('contact'));
                } else {
                    session()->setFlashdata('msg', 'メッセージの送信に失敗しました。後ほど再試行してください。');
                    return redirect()->to(base_url('contact'));
                }
            } else {
                $data['validation'] = $this->validator;
            }
        }
        return view("contact_view",$data);
    }
}

postでアクセスした場合にコンタクトフォームで送信された内容を検証し、$status = $contactModel->save($contactData);の部分で正常に処理が完了したか確認しています。save()は成功すればtrueを、失敗すればfalseを返します。

メッセージをデータベースに保存するだけではなくメールの送信もおこなう場合はPHPのmb_send_mailファンクションなどを使用すれば実装可能ですが、ローカルホストではメールサーバーの設定が必要なためこのチュートリアルではデータベースに保存するだけにしています。mb_send_mailについてはphp.netの下記リンクのページをご確認ください。

mb_send_mail - Manual - PHP

それではビューを作成していきます。

Viewファイルの作成

contact_view.phpをapp/Views内に作成します。

app/Views/contact_view.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <title>CodeIgniter 4 Pico.cssを使用したコンタクトフォームのチュートリアル</title>
</head>
<body>
  <div class="container">
      <h1>CodeIgniter 4 Pico.cssを使用したコンタクトフォームのチュートリアル</h1>

      <?php $validation = ConfigServices::validation(); ?>

      <?php if (session()->getFlashdata('msg')): ?>
      <dialog open>
          <article>
              <header>
                yoursite.com
              </header>
              <p><?= session()->getFlashdata('msg') ?></p>
              <footer>
                  <a href="<?= base_url('contact') ?>" role="button">OK</a>
              </footer>
          </article>
      </dialog>
      <?php endif; ?>

      <?= form_open();?>
          <label for="name">お名前</label>
          <input type="text" name="name" placeholder="お名前" value="<?= set_value('name') ?>">
          <?php if ($validation->getError('name')): ?>
          <p style="color: crimson;"><?= $validation->getError('name') ?></p>
          <?php endif; ?>

          <label for="email">メールアドレス</label>
          <input type="email" name="email" placeholder="youremail@example.com" value="<?= set_value('email') ?>">
          <?php if ($validation->getError('email')): ?>
          <p style="color: crimson;"><?= $validation->getError('email') ?></p>
          <?php endif; ?>

          <label for="subject">件名</label>
          <input type="text" name="subject" placeholder="メッセージ件名" value="<?= set_value('subject') ?>">
          <?php if ($validation->getError('subject')): ?>
          <p style="color: crimson;"><?= $validation->getError('subject') ?></p>
          <?php endif; ?>

          <label for="message">本文</label>
          <textarea name="message" rows="5" placeholder="メッセージ本文" value="<?= set_value('message') ?>"></textarea>

          <p><small>※送信内容が公開されることはありません。</small></p>

          <input type="submit" name="submit" value="メッセージ送信">
      <?= form_close();?>

  </div>
</body>
</html>

form_open()とform_close()はフォームヘルパーに用意されているファンクションです。Pico.cssでモーダルコンポーネントを表示するためにdialogタグとarticleタグを使用しています。これで完成です。

アプリケーションの実行

動作を確認しておきましょう。XAMPPでApacheとMySQLを起動し、ブラウザでhttp://localhost/contact-form-tutorial/public/contactにアクセスします。コンタクトフォームが表示されます。

フォームに入力してメッセージを送信してみます。

メッセージ送信ボタンを押し、送信が成功すればモーダルコンポーネントにメッセージが表示されます。

送信されたメッセージがデータベースに保存されているのが確認できます。

今回のチュートリアルは以上となります。CodeIgniter4とPico.cssを使用したシンプルなコンタクトフォームが作成できました。CodeIgniter4とPico.cssに興味がある方の参考になれば幸いです。

< Previous Article Next Article >

Back to Articles