Written by Manabu Bannai

【CodeIgniter】AJAXを使ったコンタクトフォームを実装する方法

CodeIgniter PROGRAMMING

CodeIgniterを使って、AJAX機能を持ったコンタクトフォームを作る方法です。当記事では、過去に作成したコードを使っていきます。
manabubannai/login-function–CodeIgniter at login_function
※上記コードがなくても記事自体は理解可能です。

もくじ

それではまとめてきます。

CodeIgniterの初期設定

DBの作成

DB名:ci_login
カラム数:6

ci_login

その後、ログイン用のアカウントを作成してください。

ヘッダーでjQueryを読み込む

編集ファイル:application/views/includes/header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
	<title>No title</title>
	<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="screen"  charset="UTF-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

ここで、includes/headerが読み込まれる部分の解説を行ないます。

トップページのURLは以下です。
http://localhost/login/

上記はloginコントローラーが読み込まれてることを意味しますので、
loginコントローラーのindexファンクションを確認してみます。

すると以下のプログラムがあります。


function index(){
	// login_formのビューのデータをmain_contentに格納する。
	$data["main_content"] = "login_form";

	// includes/templateを読み込みつつ、データ[main_content]をわたす
	$this->load->view("includes/template" ,$data);
}

includes/templateを読み込む際に、データ[main_content]が渡されています。
では、main_contentとはなんでしょう?
includes/templateを確認してみます。


load->view("includes/header"); ?>

// 受け取ったデータ[main_content]を表示する
load->view($main_content); ?>
load->view("includes/footer"); ?>

以上でわかったかと思います。
loginコントローラーが読み込まれる際に、login_formのビューデータがデータ[main_content]に格納され、格納されたデータ[main_content]がincludes/template内で読み込まれている仕様です。

では、話をもどします。
CodeIgniterのAJAX利用において、コンタクトフォームを元に解説します。

CodeIgniterのAJAX解説用にコンタクトフォームを作成する

Contantコントローラーを作成し、動作確認する

新規作成ファイル:application/controller/contant.php

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

class Contact extends CI_Controller {
	function index(){
		echo "Contact form here";
	}
}

以下にアクセスして、動作すればOK。
http://localhost/login/index.php/contact

Contactコントローラーでテンプレートビューを読み込む

編集ファイル:application/controller/contant.php


class Contact extends CI_Controller {
	function index(){
		// echo "Contact form here";
		$data["main_content"] = "contact_form";
		$this->load->view("includes/template" ,$data);
	}
}

では、contact_formのビューを作成していきます。

contact_formのビューを作成する

新規作成ファイル:application/views/contact_form.php


Contact Us

"message", "cols"=>30, "rows"=>15 ); echo form_textarea($data, "メッセージ"); echo form_submit("submit", "送信する"); echo form_close(); ?>

form_textareaに関して、
form_textareaを利用する場合は、arrayでcolsとrowsを指定する必要があります。
指定した値をdataで受け取ってから、form_textareaにデータを渡しています。

ちなみに、rowsはrowの複数形で、colsはcolumnの複数形(の略)のことです。
rowは行、columnは列です。

contact_us

この時点で送信ボタンを押すと、404エラーになります。
ジャンプ先のURLは以下。
http://localhost/login/index.php/contact/submit

contactコントローラー内にsubmitファンクションがない為にエラーが発生しています。
それでは、submitファンクションを作っていきます。

submitファンクションを作成する

編集ファイル:application/controller/contact.php


function submit(){
	$name = $this->input->post("name");

	$data["main_content"] = "contact_submitted";
	$this->load->view("includes/template" ,$data);
}

次にcontact_submittedビューを作成していきます。

contact_submittedビューの作成

新規作成ファイル:application/controller/contact_submitted.php

<div><h1>Thanks!</h1></div>

ここで、再度送信ボタンを押すと、Thanks!と表示されるはずです。
では、AJAXを実装していきます。
今回のデモサイトではAJAXの良さが分かりづらいですが、コンテンツ量の多いWebサイトにおいて、AJAXは有効です。
コンタクトフォーム部分のみをリロードすることにより、ユーザビリティが向上します。

CodeIgniterでAJAXを実装していく

コンタクトフォームにIDを追加する

編集ファイル:application/views/contact_form.php


Contact Us

"message", "cols"=>30, "rows"=>15 ); echo form_textarea($data, "メッセージ", "id='message'"); echo form_submit("submit", "送信する", "id='submit'"); echo form_close(); ?>

それでは、jQueryを書いていきます。

送信ボタンを無効化する

編集ファイル:application/views/contact_form.php



AJAXを書いていく

編集ファイル:application/views/contact_form.php



この時点で送信ボタンをクリックすると、以下の写真のポップアップが表示されます。
なにも起こらなかった場合は、ディベロッパーツールのコンソールからエラーを確認してみましょう。
msg

AJAXでの取得するデータを制限する

現状はサンキューページのすべてのデータが読み込まれています。
しかし、必要なデータはcontact_submittedページの情報のみです。
それを以下のコードで実現していきます。
編集ファイル:application/views/contact_form.php


// フォームの送信データをAJAXで取得する
var form_data = {
	name: $("#name").val(),
	email: $("#email").val(),
	message: $("#message").val(),
	ajax: "1"
};

ajaxで1の値を取得しておきます。
次に、contactコントローラーを編集します。
編集ファイル:application/views/contact_form.php


function submit(){
	$name = $this->input->post("name");

	// ajaxでポストしたデータをis_ajaxで受け取る
	$is_ajax = $this->input->post("ajax");

	// main_contentのテンプレートにはcontact_submittedのデータを格納
	$data["main_content"] = "contact_submitted";

	// AJAXが成功するかどうかで条件分岐
	if($is_ajax){
		// AJAXが正常にロードされたらmain_contentのみを読み込む
		$this->load->view($data["main_content"]);
	}else{
		// AJAXが正常にロードされなかったら、現在のページにとどまる
		$this->load->view("includes/template" ,$data);
	};

}

すると、送信ボタンを押した際の挙動は次の写真のようになります。
ajax_1

アラートメッセージは現実的に利用できないので、AJAX結果をdivに挿入する

編集ファイル:application/views/contact_form.php


success: function(msg){
	$("#main_content").html(msg);
}

すると以下のように表示されます。
すこし分かりづらいですが、フッターの部分はリロードがおきていません。
画面には』『Thanks!』の文言がでていますが、URLは変化しない点に注目してください。
thanks_done

最後におまけとして、jQueryでバリデーションを追加してみます。

jQueryでフォームバリデーションを実装する

編集ファイル:applicaton/views/contact_form.php


$("#submit").click(function(){

	// nameのバリューを取得して、nameとして定義しておく
	var name = $("#name").val();

	// もし、上記で定義したnameが空欄、もしくは、初期値「名前」である場合、以下を実行
	if( !name || name =="名前"){
		alert ("名前を入力してください。");
		// ページ遷移をさせない。
		return false;
	};

以上で、名前のフォールドのみにバリデーションが追加されました。
今回は以上となります。
コードはgithubで公開しています。
manabubannai/login-function–CodeIgniter at ajax

photo credit: Mike Cattell via photopin cc

※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。