آموزش کدایگنایتر ( سری دوم ) - آموزش ساخت ثبت نام و ورود با codeigniter

آموزش ساخت سیستم ورود و ثبت نام با کدایگنایتر ( Codeigniter )

در سری اول آموزش فریمورک کدایگنایتر به معرفی این فریمورک محبوب صحبت کردیم.در مقاله ی قبلی دیدیم که چطور میتوانیم کدایگنایتر را دانلود و نصب کنیم و سپس به نحوه ی استفاده و کدنویسی از فریمورک کدایگنایتر پرداختیم که برای آشنایی با فریمورک کدایگنایتر ( codeigniter ) پیشنهاد میکنیم حتما مطلب قبلی را مطالعه کرده باشید.

در این سری از آموزش فریمورک کدایگنایتر به آموزش ساختن سیستم ثبت نام و ورود در فریمورک کدایگنایتر بپردازیم.

خب بیایید شروع کنیم.

فکر میکنم شما هم با جمله ی زیر موافق هستید.

ساختن سیستم ثبت نام و ورود با سطح دسترسی های متفاوت در کدایگنایتر بسیار سخت است.

خب اگر با جمله ی بالا موافق باشید خبر خوب این است که در این آموزش مشکل شما بصورت کامل حل میشود و در ادامه به آموزش ساختن ثبت نام و ورود کاربران با سطح دسترسی های مختلف با فریمورک کدایگنایتر خواهیم پرداخت.

برای ساختن سیستم ثبت نام و ورود با فریمورک کدایگنایتر میتوانیم از کتابخانه ی session ها در این فریمورک استفاده خواهیم کرد

session چیست ؟‌

سشن ( session ) ها یک سری متغیرهای ذخیره شده در سمت سرور هستند که اطلاعاتی را درون خودشان نگهداری میکنند. این محل ذخیره سازی بصورت فایل است و برای استفاده از آن در فریمورک کدایگنایتر از یک کلاس از پیش نوشته شده استفاده میشود.

ابتدا ممکن است پیچیده به نظر برسد ولی استفاده از آن بسیار راحت است.

فعلا در همین اندازه کافیست و در ادامه با نحوه ی کار کردن با سشن های فریمورک کدایگنایتر بیشتر آموزش خواهیم داد.

در ادامه بصورت قدم به قدم پیش خواهیم رفت.

قدم ۱ − آماده سازی

این قدم بسیار مهم است اگر این قدم را درست انجام ندهید یعنی فریمورک کدایگنایتر را به درستی آماده سازی نکنید ممکن است در ادامه ی آموزش به مشکل بخورید پس در این مرحله دقت کافی داشته باشید.

پس این مرحله را هرگز رد نکنید و تمام نیازمندی ها برای آماده سازی این آموزش را مطالعه کنید و انجام دهید.

در زیر لیستی از مواردی که برای این پروژه باید آماده سازی کنید را نوشته ایم :

1. Codeiginter = کدایگنایتر فریمورکی برای زبان php است که هسته ی اصلی این پروژه را با استفاده از این فریمورک پیاده سازی خواهیم کرد طبق آموزش سری اول کدایگنایتر شما میتوانید این فریمورک را از سایت www.codeigniter.com دانلود کنید.
2. Bootstrap = این فریمورک برای سی اس اس میباشد و به برنامه نویسان وب کمک میکند فرانت اند یا رابط کاربری وب سایت خود را بصورت ریسپانسیو طراحی کنند شما میتوانید این فریمورک را از سایت اصلی اش www.getbootstrap.com دانلود کنید.

قدم ۲ − آماده سازی پایگاه داده

در این آموزش از پایگاه داده mysql استفاده خواهیم کرد و پیشنهاد میشود شما هم برای آموزش از این دیتابیس استفاده کنید.

هر چند شما میتوانید از دیتابیس های دیگری همچون Oracle, SQL Server یا Maria DB نیز استفاده کنید.

مسئله ای نیست.

برای این آموزش کدایگنایتر بهتر است شما با سینتکس زبان SQL یا کوئری نویسی با اس کیو ال آشنا باشید.

بعد از اینکه پایگاه داده ی خود را آماده کردید یک دیتابیس بسازید به نام login_db و اگر دیتابیسی دقیقا با این نام بسازید برای ادامه ی آموزش خوب است.

برای ساختن پایگاه داده جدید میتوانید از کدکوئری زیر نیز استفاده کنید :‌

CREATE DATABASE login_db;

این دستور یک پایگاه داده به نام login_db برای شما میسازد. بعد از این که پایگاه داده ایجاد شد یک جدول جدیدی به نام tbl_users بسازید که ساختارش مشابه تصویر زیر است :‌

برای ساختن جدولی با ساختار بالا کافیست کوئری زیر را اجرا کنید :

CREATE TABLE tbl_users(
user_id INT PRIMARY KEY AUTO_INCREMENT,
user_name VARCHAR(20),
user_email VARCHAR(60),
user_password VARCHAR(40),
user_level VARCHAR(3)
);

سپس با استفاده از کوئری زیر یک سری اطلاعات وارد جدول tbl_users انجام دهید.

INSERT INTO tbl_users (user_name,user_email,user_password,user_level) 
VALUES
('M Fikri','fikrifiver97@gmail.com',MD5('123456'),'1'),
('Daria','email2@gmail.com',MD5('123456'),'2')
('Jhon','email3@gmail.com',MD5('123456'),'3');

قدم ۳ − آموزش نصب کدایگنایتر ( codeigniter )

قبلا سایت رسمی کدایگنایتر را معرفی کردیم و باید به سایت اصلی کدایگنایتر مراجعه کنید و آخرین نسخه ی انرا که یک فایل فشرده شده است دانلود کنید. پس از دانلود کردن کدایگنایتر فایل زیپ شده آنرا از حالت زیپ خارج کنید و در مسیر www ( اگر از wamp استفاده میکنید ) و یا در مسیر htdocs ( اگر از xampp استفاده میکنید ) کپی کنید.

در این مقاله ی آموزشی چون از wamp استفاده میکنم فایل زیپ شده را در مسیر c:/wamp/www/ از حالت زیپ خارج میکنم . البته فرقی ندارد شما از wamp یا xamp یا سیستم عامل های دیگری مثل مک و لینوکس استفاده کنید ( مطمئنا بعنوان توسعه دهنده ی وب با این مبانی آشنا هستید).

سپس نام فولدر کدایگنایتر که در مسیر سرور خود قرار دادید را به login تغییر نام دهید.

پوشه ی login را باز کنید و یک پوشه ی جدید دیگری به نام assets ایجاد کنید و قرار است فایل های جانبی مثل فریمورک بوت استرپ و ... را اینجا قرار دهیم.

پروژه ی ما بعد از ساختن فولدر باید مشابه تصویر زیر باشد. شما میتوانید از هر code editor یا ide استفاده کنید تا فولدر را باز کنید.

در تصویر بالا مشاهده میکنید که درون فولدر assets دو عدد فولدر دیگر به نام های js و css ایجاد کرده ایم که درون آنها فایل های css و فایل های js را قرار خواهیم داد.

دو فایل bootstrap.min.css و bootstrap.min.js مربوط به فریمورک بوت استرپ است.

قدم ۴ − تنظیم کردن فریمورک کدایگنایتر ( codeigniter )

قدم بعدی که باید انجام دهید تنظیمات اولیه فریمورک کدایگنایتر است. چندین فایل وجود دارد که باید تنظیمات لازم را درون آنها انجام دهید که در زیر آمده است :‌

1. Autoload.php

برای دسترسی به این فایل تنظیماتی از کدایگنایتر باید در پروژه ی خود به مسیر زیر مراجعه کنید :

application/config/autoload.php

مسیر این فایل را در تصویر زیر نیز مشاهده میکنید :‌

فایل autoload.php را باز کنید برای باز کردن میتوانید از هر کدادیتوری مثل gedit یا notepad یا sublime استفاده کنید.

سپس کدهای زیر را درون این فایل تنظیماتی پیدا کنید :

$autoload['libraries'] = array();
$autoload['helper'] = array();

و آنها را بصورت زیر تغییر دهید :

$autoload['libraries'] = array('database', 'session');
$autoload['helper'] = array('url');

2. Config.php

برای پیدا کردن این فایل تنظیماتی در فریمورک کدایگنایتر به مسیر زیر بروید :

application/config/config.php

در تصویر زیر نیز مسیر این فایل را در فریمورک کدایگنایتر مشاهده میفرمایید.

فایل config.php را باز کنید و در بین محتویات آن کد زیر را پیدا کنید :

$config['base_url'] = '';

سپس تنظیمات بالا را به شکل زیر تغییر دهید :

$config['base_url'] = 'http://localhost/login/';

3. Database.php

برای تنظیم کردن دیتابیس در فریمورک کدایگنایتر به مسیر زیر در پروژه ی خود مراجعه کنید ‌:

application/config/database.php

در تصویر زیر مسیر این فایل را در بین فایل های کدایگنایتر مشاهده میکنید :‌

این فایل را باز کنید و کدهای زیر را پیدا کنید :

$active_group = 'default';
$query_builder = TRUE;
 
$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

و به شکل زیر تنظیم کنید :

$active_group = 'default';
$query_builder = TRUE;
 
$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'login_db',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

قدم ۵ − کنترلر در کدایگنایتر

کنترلرها در mvc و کدایگنایتر بین view و model های شما نقش بازی میکند و کار اصلی آنها کنترل کردن اپلیکیشن شماست.

در این آموزش ما دو عدد کنترلر به نام های Login.php و Page.php خواهیم ساخت.

در ابتدا یک فایل کنترلر جدید در مسیر controllers/Login.php بسازید و کدهای زیر را درون آن بنویسید :

<?php
class Login extends CI_Controller{
  function __construct(){
    parent::__construct();
    $this->load->model('login_model');
  }
 
  function index(){
    $this->load->view('login_view');
  }
 
  function auth(){
    $email    = $this->input->post('email',TRUE);
    $password = md5($this->input->post('password',TRUE));
    $validate = $this->login_model->validate($email,$password);
    if($validate->num_rows() > 0){
        $data  = $validate->row_array();
        $name  = $data['user_name'];
        $email = $data['user_email'];
        $level = $data['user_level'];
        $sesdata = array(
            'username'  => $name,
            'email'     => $email,
            'level'     => $level,
            'logged_in' => TRUE
        );
        $this->session->set_userdata($sesdata);
        // access login for admin
        if($level === '1'){
            redirect('page');
 
        // access login for staff
        }elseif($level === '2'){
            redirect('page/staff');
 
        // access login for author
        }else{
            redirect('page/author');
        }
    }else{
        echo $this->session->set_flashdata('msg','Username or Password is Wrong');
        redirect('login');
    }
  }
 
  function logout(){
      $this->session->sess_destroy();
      redirect('login');
  }
 
}

سپس یک فایل کنترلر جدید دیگری در مسیر controllers/Page.php بسازید و کدهای زیر را درون آن بنویسید :

<?php
class Page extends CI_Controller{
  function __construct(){
    parent::__construct();
    if($this->session->userdata('logged_in') !== TRUE){
      redirect('login');
    }
  }
 
  function index(){
    //Allowing akses to admin only
      if($this->session->userdata('level')==='1'){
          $this->load->view('dashboard_view');
      }else{
          echo &quotAccess Denied"
      }
 
  }
 
  function staff(){
    //Allowing akses to staff only
    if($this->session->userdata('level')==='2'){
      $this->load->view('dashboard_view');
    }else{
        echo &quotAccess Denied"
    }
  }
 
  function author(){
    //Allowing akses to author only
    if($this->session->userdata('level')==='3'){
      $this->load->view('dashboard_view');
    }else{
        echo &quotAccess Denied"
    }
  }
 
}

قدم ۶ − مدل های کدایگنایتر

در بحث mvc و فریمورک کدایگنایتر مدل ها با دیتابیس شما ارتباط دارند و توابع مدل ها به شما کمک میکند تا بتوانید عملیات واکشی ، بروزرسانی ، حذف و درج اطلاعات را در پایگاه داده انجام دهید.

در این آموزش ما یک مدل به نام Login_model.php میسازیم.

بنابراین یک فایل مدل کدایگنایتری در پروژه ی خود در مسیر models/Login_model.php بسازید و کدهای زیر را درون آن بنویسید :

<?php
class Login_model extends CI_Model{
 
  function validate($email,$password){
    $this->db->where('user_email',$email);
    $this->db->where('user_password',$password);
    $result = $this->db->get('tbl_users',1);
    return $result;
  }
 
}

قدم ۷ −ویو های کدایگنایتر

view فایل هایی در فریمورک کدایگنایتر هستند که رابط کاربری یا ظاهر نهایی سایت را که به کاربران بازدید کننده از سایت نمایش داده میشود را میسازند.

یک view میتواند یک صفحه ی ساده ی وب باشد یا مخلوطی از چند فایل مثل header و footer باشد یا یک خبرخوان RSS و ... .

در این پروژه ما دو فایل view میسازیم یکی login_view.php برای نمایش دادن فرم لاگین و دیگری dashboard_view.php بعنوان صفحه ی داشبورد این پروژه .

بنابراین ابتدا یک فایل view جدید در مسیر views/login_view.php بسازید که برای فرم لاگین استفاده خواهد شد و کدهای زیر را درون آن بنویسید :‌

<!DOCTYPE html>
<html lang=&quoten&quot>
  <head>
    <meta charset=&quotutf-8&quot>
    <title>Sign In</title>
    <link href=&quot<?php echo base_url('assets/css/bootstrap.min.css');?>&quot rel=&quotstylesheet&quot>
  </head>
  <body>
 
      <div class=&quotcontainer&quot>
       <div class=&quotcol-md-4 col-md-offset-4&quot>
         <form class=&quotform-signin&quot action=&quot<?php echo site_url('login/auth');?>&quot method=&quotpost&quot>
           <h2 class=&quotform-signin-heading&quot>Please sign in</h2>
           <?php echo $this->session->flashdata('msg');?>
           <label for=&quotusername&quot class=&quotsr-only&quot>Username</label>
           <input type=&quotemail&quot name=&quotemail&quot class=&quotform-control&quot placeholder=&quotEmail&quot required autofocus>
           <label for=&quotpassword&quot class=&quotsr-only&quot>Password</label>
           <input type=&quotpassword&quot name=&quotpassword&quot class=&quotform-control&quot placeholder=&quotPassword&quot required>
           <div class=&quotcheckbox&quot>
             <label>
               <input type=&quotcheckbox&quot value=&quotremember-me&quot> Remember me
             </label>
           </div>
           <button class=&quotbtn btn-lg btn-primary btn-block&quot type=&quotsubmit&quot>Sign in</button>
         </form>
       </div>
       </div> <!-- /container -->
 
    <script src=&quot<?php echo base_url('assets/js/bootstrap.min.js');?>&quot>
  </body>
</html>

دومین فایل view را در مسیر views/dashboard_view.php بسازید و کدهای زیر را درون آن بنویسید :‌

<!DOCTYPE html>
<html lang=&quoten&quot>
  <head>
    <meta charset=&quotutf-8&quot>
    <title>Welcome</title>
    <link href=&quot<?php echo base_url('assets/css/bootstrap.min.css');?>&quot rel=&quotstylesheet&quot>
  </head>
  <body>
    <div class=&quotcontainer&quot>
      <div class=&quotrow&quot>
      <nav class=&quotnavbar navbar-default&quot>
          <div class=&quotcontainer-fluid&quot>
            <div class=&quotnavbar-header&quot>
              <button type=&quotbutton&quot class=&quotnavbar-toggle collapsed&quot data-toggle=&quotcollapse&quot data-target=&quot#navbar&quot aria-expanded=&quotfalse&quot aria-controls=&quotnavbar&quot>
                <span class=&quotsr-only&quot>Toggle navigation</span>
                <span class=&quoticon-bar&quot></span>
                <span class=&quoticon-bar&quot></span>
                <span class=&quoticon-bar&quot></span>
              </button>
              <a class=&quotnavbar-brand&quot href=&quot#&quot>LOGO</a>
            </div>
            <div id=&quotnavbar&quot class=&quotnavbar-collapse collapse&quot>
              <ul class=&quotnav navbar-nav&quot>
                <!--ACCESS MENUS FOR ADMIN-->
                <?php if($this->session->userdata('level')==='1'):?>
                  <li class=&quotactive&quot><a href=&quot#&quot>Dashboard</a></li>
                  <li><a href=&quot#&quot>Posts</a></li>
                  <li><a href=&quot#&quot>Pages</a></li>
                  <li><a href=&quot#&quot>Media</a></li>
                <!--ACCESS MENUS FOR STAFF-->
                <?php elseif($this->session->userdata('level')==='2'):?>
                  <li class=&quotactive&quot><a href=&quot#&quot>Dashboard</a></li>
                  <li><a href=&quot#&quot>Pages</a></li>
                  <li><a href=&quot#&quot>Media</a></li>
                <!--ACCESS MENUS FOR AUTHOR-->
                <?php else:?>
                  <li class=&quotactive&quot><a href=&quot#&quot>Dashboard</a></li>
                  <li><a href=&quot#&quot>Posts</a></li>
                <?php endif;?>
              </ul>
              <ul class=&quotnav navbar-nav navbar-right&quot>
                <li><a href=&quot<?php echo site_url('login/logout');?>&quot>Sign Out</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
        </nav>
 
        <div class=&quotjumbotron&quot>
          <h1>Welcome Back <?php echo $this->session->userdata('username');?></h1>
        </div>
 
      </div>
    </div>
 
    <script src=&quot<?php echo base_url('assets/js/bootstrap.min.js');?>&quot>
  </body>
</html>

قدم ۸ − تنظیم کردن کنترلر پیشفرض در فریمورک کدایگنایتر

در این پروژه قصد داریم کنترلر login را بعنوان کنترلر پیشفرض پروژه ی خود انتخاب کنیم که هنگام ورود به سایت ابتدا فرم لاگین نمایش داده شود.

برای تنظیم کردن کنترلر پیشفرض در فریمورک codeigniter به تنظیمات آن در مسیر application/config/routes.php مراجعه کنید. مسیر این فایل در تصویر زیر نیز نشان داده شده است:

در این فایل دنبال کدهای زیر بگردید و پیدا کنید :

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

و آنها را بصورت زیر تغییر دهید :

$route['default_controller'] = 'login';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

قدم ۹ − مرحله ی نهایی

برای تست کردن پروژه ی ورود با کدایگنایتر به آدرس زیر مراجعه کنید ‌:

http://localhost/login/

و پس از باز کردن آدرس بالا توسط مرورگر باید با تصویر زیر مواجه شوید :

ابتدا برای تست کردن پروژه عمل لاگین را با ایمیل نشان داده شده در تصویر زیر و با پسورد 123456 تست میکنیم :‌

خب طبق تصویر می بینید که بعد از لاگین کردن منو های وب سایت را مشاهده میکنید و دسترسی به آنها دارید:

در نهایت ما سعی میکنیم یکبار دیگر با ایمیل email3@gmail.com و پسورد 123456 وارد شویم تا ببینیم که سطح دسترسی های این کاربر به چه شکل است

تبریک ‌! اگر تا اینجا به درستی انجام دادید شما تونستید با استفاده از فریمورک کدایگنایتر سیستم ورود چندگانه را پیاده سازی کنید.

برای یادگیری کامل فریمورک کدایگنایتر بصورت پروژه محور شما میتوانید از دوره ی آموزش ساخت دیوار و دوره ی آموزش ساخت کافه بازار بصورت پروژه محور با استفاده از کدایگنایتر را تهیه کنید و این دوره های کامل را طی کنید.

منبع : وب سایت آموزشی آواسام