Blog tutorial – część 4

W poprzednich częściach stworzyliśmy prostą makietę dla naszej aplikacji, projekt bazy danych oraz napisaliśmy pliki z migracjami dla bazy danych. W tej części zajmiemy się logowaniem do aplikacji. Na początek stworzymy model oraz kontroler. Zanim jednak w ogóle poruszymy ten temat, warto abyśmy zapoznali się z materiałem z podręcznika na ten temat: modele, klasa Active Record i kontrolery.

Teraz można założyć, że mamy już podstawy, więc możemy przejść do konkretów. Nasz model będzie nosił nazwę User_model, a kontroler Users – w plikach znajdzie się kod odpowiedzialny za uwierzytelnianie użytkownika w naszej aplikacji. Na początek utwórzmy plik w katalogu application/models o nazwie user_model.php:

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

class User_model extends CI_Model
{
	// Nazwa tabeli, z której będziemy korzystać w modelu
	public $table = 'users';
	
	/**
	 * Logowanie użytkownika 
	 * Sprawdza, czy użytkownik o podanym adresie email i haśle istnieje w bazie danych
	 *
	 * @access	public
	 * @return	mixed
	 */
	public function login($email, $password)
	{
		// Jeśli w bazie zostanie znaleziony użytkownik o podanym adresie email i haśle, 
		// to wynik zostanie zwrócony do kontrolera w postaci tablicy, w innym wypadku otrzymamy pusty wynik.
		return $this->db->where(array('email' => $email, 'password' => $password))->get($this->table)->row_array();
	}
}

/* End of file user_model.php */
/* Location: ./application/models/user_model.php */

Jeśli zastanawiasz się co w powyższym kodzie robi funkcja row_array(), to warto zapoznać się ze sposobami na generowanie wyników zapytań w CodeIgniterze – wtedy wszystko powinno być jasne. Teraz możemy się zająć kontrolerem. Utwórzmy plik users.php w katalogu application/controllers o takiej treści:

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

class Users extends CI_Controller
{

	public function login()
	{
		// Ładujemy bibliotekę walidacji formularza
		$this->load->library('form_validation');
		// Określamy jakie tagi będą otaczać komunikat błędu walidacji. 
		// To kwestia stricte kosmetyczna - dostosowanie wyglądu do Twitter Bootstrap.
		$this->form_validation->set_error_delimiters('<div class="alert alert-error"><a class="close" data-dismiss="alert" href="#">×</a>', '</div>');

		// Ustalamy reguły walidacji dla formularza
		$this->form_validation->set_rules('email', 'Login', 'required|trim|valid_email|xss_clear');
		$this->form_validation->set_rules('password', 'Hasło', 'required|trim|sha1');

		// Sprawdzamy, czy formularz został wysłany i czy wystąpiły błędy walidacji.
		if ($this->form_validation->run() === FALSE)
		{
			// Ładujemy helper Form, aby ułatwić sobie pracę z formularzem.
			$this->load->helper('form');

			// Jeśli walidacja formularza nie powiodła się (lub metoda jest wywołana po raz pierwszy), wyświetlamy pliki z katalogu partials oraz widok "user_login",
			// który znajduje się w katalogu "application/views". Ewentualne informacje o błędach w formularzu są przekazywane automatycznie.
			$this->load->view('partials/header');
			$this->load->view('user_login');
			$this->load->view('partials/footer');
		}
		else
		{
			// Jeśli walidacja formularza powiodła się, przypisujemy odpowiednie zmienne z tablicy $_POST do zmiennej $email i $password
			$email = $this->input->post('email');
			$password = $this->input->post('password');

			// Ładujemy wcześniej utworzony model
			$this->load->model('user_model');

			// Wywołujemy metodę "login" modelu "user_model" wraz z parametrami i przypisujemy zwrócony wynik do zmiennej $user
			if ($user = $this->user_model->login($email, $password))
			{
				// Jeśli zwrócony wynik nie jest pusty (czyli znaleziono użytkownika o podanym adresie email i haśle),
				// ustawiamy zmienną sesyjną o nazwie "user_id" na wartość unikalnego identyfikatora użytkownika.
				$this->session->set_userdata('user_id', $user['id']);
				// Ustawiamy zmienną flashadata o nazwie success i przypisujemy do niej komunikat o powodzeniu logowania.
				$this->session->set_flashdata('success', 'Logowanie przebiegło pomyślnie!');
				// Przekierowujemy użytkownika na stronę ze wszystkimi postami podając w funkcji nazwę kontrolera/metody, która ma zostać wywołana.
				// W tym wypadku nie ma znaczenia, czy podamy 'posts/index', czy samo 'posts', ponieważ CodeIgniter domyślnie zinterpretuje samo 'posts' jako wywołanie
				// metody 'index' - jako domyślnej funkcji dla każdego kontrolera.
				redirect('posts');
			}
			else
			{
				// Jeśli zwrócony wynik jest pusty (czyli nie znaleziono użytkownika o podanym adresie email i haśle),
				// ustawiamy zmienną flashadata o nazwie error i podajemy komunikat o niepowodzeniu logowania.
				$this->session->set_flashdata('error', 'Podany login lub hasło są nieprawidłowe!');
				// Przekierowujemy użytkownika na stronę logowania podając dla funkcji nazwę kontrolera/metody, która ma zostać wywołana
				redirect('users/login');
			}
		}
	}

	public function logout()
	{
		// Niszczymy aktualną sesję
		$this->session->sess_destroy();
		// Przekierowujemy na stronę logowania
		redirect('users/login');
	}
}

/* End of file users.php */
/* Location: ./application/controllers/users.php */

Teraz pora przejść do widoków. Oczywiście nie będziemy omawiać całej struktury Twitter Bootstrap – jeśli chcesz ją poznać, musisz to zrobić samodzielnie. Na początek utworzymy dwa „partiale” – w katalogu application/views, tworzymy katalog partials, a w nim dwa pliki z nagłówkiem szablonu i stopką. Te dwa pliki będziemy wczytywali za każdym razem, co widać w metodzie login.
Kod zawarty w samych partialach jest stosunkowo prosty i wygląda następująco, header.php:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <base href="<?php echo base_url(); ?>">
    <title>Blog tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="CodeIgniter.org.pl">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand">Blog tutorial</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <!-- 
                  Poniżej sprawdzamy, czy dana pozycja w menu jest aktualnie odwiedzaną stroną. 
                  Jeśli tak, to do tagu <li> dodajemy klasę "active", która zmieni wygląd tego elementu.
                  Aby dowiedzieć się jak działa funkcja rsegment zajrzyj do podręcznika: http://podrecznik.codeigniter.org.pl/libraries/uri.html
              -->
              <li <?php echo ($this->uri->rsegment('2') == 'index') ? 'class="active"' : ''; ?>><a href="<?php echo site_url('posts/index'); ?>">Lista</a></li>
              <li <?php echo ($this->uri->rsegment('2') == 'add') ? 'class="active"' : ''; ?>><a href="<?php echo site_url('posts/add'); ?>">Dodaj</a></li>
            </ul>
            <ul class="nav pull-right">
              <!-- 
                  Sprawdzamy, czy użytkownik jest zalogowany i w zależności od tego wyświetlamy
                  odpowiednie pozycje w menu. 
              -->
              <?php if ($this->session->userdata('user_id')): ?>
                <li><a href="<?php echo site_url('users/logout'); ?>">Wyloguj</a></li>
              <?php else: ?>
                <li <?php echo ($this->uri->rsegment('2') == 'login') ? 'class="active"' : ''; ?>><a href="<?php echo site_url('users/login'); ?>">Logowanie</a></li>
              <?php endif; ?>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <!-- Jeśli istnieją komunikaty o błędach walidacji, wyświetl je. -->
      <?php if (validation_errors()): ?>      
          <?php echo validation_errors(); ?>
      <?php endif; ?>

      <!-- Jeśli istnieje zmienna flashdata o nazwie 'error' wyświetl ją. -->
      <?php if ($this->session->flashdata('error')): ?>
        <div class="alert alert-error">
          <a class="close" data-dismiss="alert" href="#">×</a>
          <?php echo $this->session->flashdata('error'); ?>
        </div>
      <?php endif; ?>

      <!-- Jeśli istnieje zmienna flashdata o nazwie 'success' wyświetl ją. -->
      <?php if ($this->session->flashdata('success')): ?>
        <div class="alert alert-success">
          <a class="close" data-dismiss="alert" href="#">×</a>
          <?php echo $this->session->flashdata('success'); ?>
        </div>
      <?php endif; ?>

Zauważ, że w tym pliku korzystamy m.in. z funkcji base_url i site_url z helpera Url oraz klasy sesji. Plik header.php będzie wczytywany w obrębie całej naszej aplikacji – mamy więc dwa wyjścia: albo będziemy ładować helper Url i klasę sesji w każdym kontrolerze, albo skorzystamy z automatycznego ładowania. W tym wypadku wybierzemy to drugie rozwiązanie, ponieważ jest wygodniejsze. Wystarczy więc, że zmienimy odpowiednie linijki kodu w pliku application/config/autoload.php na następujące: $autoload[’helper’] = array(’url’); oraz $autoload[’libraries’] = array(’database’, 'session’); .

Kod partialu footer.php:

      <hr>

      <footer>
        <p>&copy; 2012 CodeIgniter.org.pl</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery-1.8.2.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

  </body>
</html>

Teraz czas na szablon, który wykorzystamy do logowania, czyli plik user_login.php.

	<div class="row">
		<div class="span4 offset4 well">
			<legend>Logowanie</legend>     
			<!-- Otwieramy formularz za pomocą funkcji z helpera Form. -->    	
			<?php echo form_open(); ?>
				<!-- 
					Również do definicji pól formularza możemy użyć funkcji z helpera Form, 
					ale w tym przypadku nie widać specjalnych korzyści dla których musielibyśmy to robić, 
					dlatego zostaniemy przy "normalnym" zapisie.
				-->
				<input type="email" id="email" class="span4" name="email" placeholder="Email">
				<input type="password" id="password" class="span4" name="password" placeholder="Hasło">
				<button type="submit" name="submit" class="btn btn-info btn-block">Zaloguj</button>
			<!-- Zamykamu formularz. -->
			<?php echo form_close(); ?>
		</div>
	</div>

To by było na tyle. Teraz wystarczy, że przejdziemy na stronę logowania pod adres: http://localhost/blogtutorial/index.php/users/login i zalogujemy się podając dane z poprzedniej części tutorialu (login: admin@admin.dev, hasło: admin). Oczywiście po zalogowaniu CodeIgniter będzie próbował odnaleźć kontroler „Posts” (tak jak sobie tego życzyliśmy), a z racji tego, że jeszcze takowego nie utworzyliśmy, otrzymamy komunikat „404 Page Not Found”. Wystarczy jednak jeszcze raz przejść na stronę logowania aby zobaczyć komunikat o poprawnym zalogowaniu, a w prawym rogu menu zamiast opcji „Logowanie” zobaczymy napis „Wyloguj”. To znak, że logowanie przebiegło pomyślnie.

Kod źródłowy tutorialu jak zawsze jest dostępny na githubie. W następnej części zajmiemy się dodawaniem postów do naszego bloga.