【CodeIgniter】AJAXを使ったコンタクトフォームを実装する方法
CodeIgniterを使って、AJAX機能を持ったコンタクトフォームを作る方法です。当記事では、過去に作成したコードを使っていきます。
manabubannai/login-function–CodeIgniter at login_function
※上記コードがなくても記事自体は理解可能です。
もくじ
それではまとめてきます。
CodeIgniterの初期設定
DBの作成
DB名：ci_login
カラム数：6
その後、ログイン用のアカウントを作成してください。
ヘッダーで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は列です。
この時点で送信ボタンを押すと、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
この時点で送信ボタンをクリックすると、以下の写真のポップアップが表示されます。
なにも起こらなかった場合は、ディベロッパーツールのコンソールからエラーを確認してみましょう。
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結果をdivに挿入する
編集ファイル：application/views/contact_form.php
success: function(msg){
$("#main_content").html(msg);
}
すると以下のように表示されます。
すこし分かりづらいですが、フッターの部分はリロードがおきていません。
画面には』『Thanks!』の文言がでていますが、URLは変化しない点に注目してください。
最後におまけとして、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：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。