CodeIgniterで会員サイト

今日からCodeIgniterで実践的なプログラムを作成しながら勉強していきたいと思います。やはりPHPを勉強する人に人気のある会員専用サイトを作成していきたいと思います。作成には、プログラム初心者にも分かり易いDreamweaverを使用して作成していきます。それでは、会員専用のデータベースから作成したいと思います。

尚、試行錯誤しながら作成していきますので、コードと画像が違う場合がありますが、コードの方が正しいと思って下さい。画像の取り直しは面倒ですので、省略しています。

データベーステーブルの項目は、次の7項目『id(会員ID)』『name(氏名)』『email(メールアドレス)』『passw(パスワード)』『picture(写真のパス)』『created(入会日)』『modified(変更日)』にします。SQLを下記に記載しておきます。データベース名の箇所は、各自のデータベース名に変更して下さい。

CREATE TABLE  `データベース名`.`members` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 100 ) NOT NULL ,
`email` VARCHAR( 255 ) NOT NULL ,
`passw` VARCHAR( 100 ) NOT NULL ,
`picture` VARCHAR( 255 ) NULL ,
`created` DATETIME NOT NULL ,
`modified` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE = MYISAM

次に、画像をアップするためのフォルダを前回で作成した『uploads』フォルダの下に、『members_picture』名で作成し、パーミッションを777にセットします。やり方がわからない方は、『CodeIgnieterのファイルアップロードクラス』を参考にして下さい。それでは、会員登録用のビューファイルを先に作成します。『application/controllers』フォルダに『entry.php』ファイルを作成します。

フォームタブのフォームをクリックして、フォームの赤い枠が作成されたら、その中に、一般タブのテーブルをクリックして、6行2列のテーブルを作成し、表題を『会員登録』『お名前』『メールアドレス』『パスワード』『写真』と入力し、6行目の列を結合し、フォームタブのボタンを挿入し、名前を『入力内容の確認』に変更しましたら、いったん保存します。

次に入力内容のページも作成します。とりあえず今のトップの表題を『登録確認』に変更して、『entry_check.php』名で別名保存します。
それでは、フォームバリデーションの追加です。『application/config』フォルダの『form_validation.php』ファイルに下記のコードを追加します。

尚、kenji様のご指摘でCodeIgniterのXSSフィルタリングは使用しない方がいいとのことでしたので、全ての項目をhtmlspecialcharsでエスケープ処理しています。

'members'=>array
  array(
 'field' => 'name',
 'labbel' => 'お名前',
 'rules' => 'required|htmlspecialchars'
 ),
 array(
 'field' => 'email',
 'labbel' => 'メールアドレス',
 'rules' => 'required|htmlspecialchars|valid_email'
 ),
 array(
 'field' => 'passw',
 'label' => 'パスワード',
 'rules' => 'required|htmlspecialchars|min_length[4]'
 ),
 array(
 'field' => 'picture',
 'label' => '写真',
 'rules' => 'htmlspecialchars'
 )
)

次に再度ビューファイルを変更します。『application/views』フォルダの『entry.php』ファイルを開き、フォームバリデーションクラスのところでやったように、下記の2行を追加し、その下の1行を削除します。画像では、『form_open()』ですが、写真もアップできるように作成しましたので、『form_open_multipart()』に変更しました。

<?php echo validation_errors();?>
<?php echo form_open_multipart('members/entry');?>

そして、2行2列目をクリックし、フォームタブのフィールドをクリックし、テキストフィールドを挿入します。そして、下のプロパティで、テキストフィールド名を先程、『form_validation.php』で設定した名前に変更します。初期値のところに『<?php echo set_value(‘name’);?>と入力します。メールアドレス、パスワードも同様に設定します。ここでは、フォームバリデーションに沿って上の方にエラーを表示するようにしています。

写真の右の列をクリックし、フォームタグのファイルフィールドを挿入します。そしてファイルフィールド名を必ず『userfile』に変更して下さい。

それでは、コントローラを作成します。『application/controllers』フォルダに『members.php』ファイル名で作成し、下記のコードを入力して下さい。

class Members extends CI_Controller
{
 function __construct()
 {
	 parent::__construct();
	 //プロファイラを有効にする
	 $this->output->enable_profiler(TRUE);
	 $this->load->library(array('form_validation','session'));
	 $this->load->helper(array('form','url'));
 }
 function entry()
 {
	 //form_validation.phpに登録してあるmembersがFALSEなら
	 if($this->form_validation->run('members') == FALSE)
	 {
		 //ビューファイル『entry.php』を開きます
		 $this->load->view('entry');
	//フォームバリデーションが全てOKなら
	 }else{
		 //POST送信された値をセッションデータに保存します
		 $name=$_POST['name'];
		 $email=$_POST['email'];
		 $passw=$_POST['passw'];
		 $this->session->set_userdata(array(
		 				'name' => $name,
						'email' => $email,
						'passw' => $passw));
	//ファイルアップロードのためのオプションを設定します
	$config['upload_path'] ='./uploads/members_picture/';
	$config['allowed_types']= 'gif|jpg|png';
	$config['max_size']='100';
	$config['max_width']='1024';
	$config['max_height']='768';
	$config['encrypt_name']='TRUE';//ファイル名を暗号文字に変換します
	//上記設定に基づいたアップロードクラスを呼び出します
	$this->load->library('upload',$config);
	//ファイルがアップロードされなければ
	if(!$this->upload->do_upload())
	{
		//セッションpictureがセットされていなければ
		if(!$this->session->userdata('picture'))
		{
			//エラーメッセージを変数$errorに代入します
			$error=array('error'=>$this->upload->display_errors());
		//セッションpictureがセットされていれば
		}else{
			//エラーメッセージを初期化します
			$error=array('error'=>'');
	}
	//ファイルがアップロードされたら
	}else{
		//アップロードファイル名を取得します
		$data=$this->upload->data();
		$picture=$data['file_name'];
		//取得したファイル名をセッションデータに保存します
		$this->session->set_userdata(array('picture'=>$picture));
		//エラーメッセージを初期化します
		$error=array('error'=>'');
	 }
		//ビューファイル『entry_check.php』を開きます
		 $this->load->view('entry_check',$error);
	}
 }
}

かなり細かに注釈をつけましたので、余り説明の必要がないと思いますが、少し補足します。

$this->output->enable_profiler(TRUE);

これは、プロファイラを有効にするメソッドです。プロファイラは、『メモリ使用量』『ベンチマーク結果』『URI文字列』『GET/POSTデータ』『実行したクエリ』を配置したコントローラ内で表示します。『$_GET、$_POSTデータやSQLクエリに誤りがないかどうかも確かめながら開発することができます。効率の悪いコードも発見することができます。ただ、検証が終わった後は、引数を『FALSE』にするか削除して下さい。プロファイラは下記のように表示されます。

$this->form_validation->run(‘members’)

先程作成した『application/config』フォルダの『form_validatio.php』ファイルの中の配列『members』の条件によってフォームバリデーションされます。ブラウザで確認してみます。メールアドレスを未入力で送信してみました。

$this->session->set_userdata(array( ‘name’ => $name, ‘email’ => $email, ‘passw’ => $passw));

バリデーションがOKなら、ポスト送信されたデータ『name』『emai』『passw』をセッションユーザーデータに保存します。

次にファイルをアップロードするためのオプションを設定します。

$config[‘encrypt_name’]=’TRUE’;

ファイル名をランダムなファイル文字列に変換します。ユーザーが画像をアップロードしたときに同じファイル名が重ならないための工夫です。

$this->load->library(‘upload’,$config);

上記設定ファイル$configに基づいたアップロードクラスを呼び出します。

if(!$this->session->userdata(‘picture’)){
   $error=array(‘error’=>$this->upload->display_errors());
 }else{
$error=array(‘error’=>”);

画像データはユーザ登録の前にアップロードされますので、画像以外のデータの入力直しをしても画像は送信しなくてもいいようにエラーメッセージの処理をします。

$data=$this->upload->data();
$picture=$data[‘file_name’];
$this->session->set_userdata(array(‘picture’=>$picture));
$error=array(‘error’=>”);

次にファイルがアップロードされたら、取得したセッションファイル名をセッションデータ『picture』にセットし、エラーメッセージを初期化します。

ビューファイル『entry_check.php』ファイルを下記のように変更します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会員登録チェック</title>
</head>

<body>
<?php
$name=$this->session->userdata('name');
$email=$this->session->userdata('email');
$passw=$this->session->userdata('passw');
$picture=$this->session->userdata('picture');
?>
  <div id="form">
    <table width="400" border="1" align="center">
      <tr>
        <th colspan="2" scope="row">登録確認</th>
      </tr>
      <tr>
        <th width="156" scope="row">お名前</th>
        <td width="228"><label for="name"><?php echo $name;?></label></td>
      </tr>
      <tr>
        <th scope="row">メールアドレス</th>
        <td><label for="email"><?php echo $email;?></label></td>
      </tr>
      <tr>
        <th scope="row">パスワード</th>
        <td><label for="passw"><?php echo $passw;?></label></td>
      </tr>
      <tr>
        <th scope="row">写真名</th>
        <td><label for="usefile"><?php echo $picture;?><?php echo $error;?></label></td>
      </tr>
      <tr>
        <th colspan="2" scope="row"><?php echo anchor('members/entry','もう一度');?>
          <input type="submit" name="button" id="button" value="登録" /></th>
      </tr>
      </table>
</div>
</body>
</html>

それでは、ブラウザで送信後の状態を確認してみましょう。

それでは、本日の作業内容を整理します。

  • 会員サイト用のデータベーステーブル『members』を作成。
  • バリデーションファイル『forum_validatio.php』ファイルに新しいバリデーションルールグループを作成
  • ビューファイル『entry.php』ファイルを作成
  • バリデーションのエラー表示箇所とデータ送信用のフィールドを作成
  • ビューファイル『entry_check.php』ファイルを作成
  • コントローラ『members.php』ファイルを作成

次にプログラムの流れを整理します。

  1. ブラウザで『http://ci.builwing.co.jp/members/entry』にアクセスすると、会員登録用の『enrty.php』ファイルを開きます。
  2. 『entry.php』ファイルからPOST送信されたデータがバリデーション条件をクリアしたら、POST送信された値をセッションユーザデータに保存します。
  3. もし画像が選択されていたら、アップロード条件そって画像をアップロードします。
  4. ファイルがアップロードされたらランダムな文字列に変更されたアップロードファイル名を取得します。
  5. 取得したファイル名をセッションユーザデータ『picture』にセットします。
  6. ビューファイル『entry_check』を開きます。
  7. 『entry_check』に入力された値を表示します。

本日は、以上までの行程でした。次回は、データベースに会員情報を保存するところまでやりたいと思います。

Adobe Dreamweaver CS5.5 Windows版
Adobe Dreamweaver CS5.5 Windows版

posted with amazlet at 11.08.20
アドビシステムズ (2011-05-20)
売り上げランキング: 349

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

コメント

  1. Kenji より:

    Form validationのルールで htmlspecialchars してしまうと、保存するデータがおかしくなりませんか?

    「7&i」が「7&i」のように。

    • nakada より:

      kenji 様
      ご指摘ありがとうございました。
      早速検証しました。確かに、登録データがおかしくなります。
      早急にコードを修正したいと思います。
      これからも宜しくお願いします。


コメントをどうぞ

このページの先頭へ