Library & form validation

수업소개

Library는 라이브러리의 목적에 따라서 사용법이 천차만별이기 때문에 한가지 방식으로 설명하는 것은 어렵다. 이번 수업에서는 CI에서 제공하는 Library 중에서 사용자의 입력 데이터를 검증하는 Form Validation의 사용법을 알아본다. 부가적으로 Twitter Bootstrap의 form 관련 기능도 함께 살펴보면서 웹 에플리케이션에서 데이터를 쓰는 방법에 대해서 알아본다. 앞선 Model 수업의 보충수업적 성격도 가지고 있다.

선수지식

Library

이미 Helper에서 살펴봤듯이 라이브러리는 재활용 가능성이 있는 로직을 재활용 하기 좋은 형태로 만들어둔 것이다. CI는 자주 웹개발에서 자주 사용되는 로직들을 내장(Core) 라이브러리로 제공하고 있다. 내장 라이브러리를 확장(extend)해서 필요에 따라 수정해 사용할 수 있고, 직접 라이브러리를 만들수도 있다.

라이브러리의 사용

아래와 같은 방법으로 someclass 라이브러리를 로드 할 수 있다.

$this->load->library('some_class');

그 다음부터는 아래와 같은 방식으로 some_method를 호출해서 사용할 수 있다.

$this->some_class->some_method

Form Validation

폼은 사용자가 입력한 정보를 받는 UI이다. 사용자는 시스템의 목적이면서 취약점이다. 사용자는 실수하기 쉽고, 공격자일 가능성이 있다. 따라서 사용자가 입력한 모든 정보는 검증되어야 하고, 이 작업을 Form Validation이라고 한다.

CI에서는 Form Validation 라이브러리를 기본적으로 제공하는데, 지금부터 예제를 통해서 CI의 form validation에 대해서 알아본다.

예제

application/controllers/topic.php

차이점

코드

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Topic extends CI_Controller {
    function __construct()
    {       
        parent::__construct();
        $this->load->database();
        $this->load->model('topic_model');
    }
    function index(){        
        $this->_head();

        $this->load->view('main');

        $this->load->view('footer');
    }
    function get($id){        
        $this->_head();

        $topic = $this->topic_model->get($id);
        $this->load->helper(array('url', 'HTML', 'korean'));
        $this->load->view('get', array('topic'=>$topic));

        $this->load->view('footer');
    }
    function add(){
        $this->_head();
        
        $this->load->library('form_validation');

        $this->form_validation->set_rules('title', '제목', 'required');
        $this->form_validation->set_rules('description', '본문', 'required');
        
        if ($this->form_validation->run() == FALSE)
        {
             $this->load->view('add');
        }
        else
        {
            $topic_id = $this->topic_model->add($this->input->post('title'), $this->input->post('description'));
            $this->load->helper('url');
            redirect('/topic/get/'.$topic_id);
        }
        
        $this->load->view('footer');
    }
    function _head(){
        $this->load->view('head');
        $topics = $this->topic_model->gets();
        $this->load->view('topic_list', array('topics'=>$topics));
    }
}
?>

application/models/topic_model.php

차이점

코드

<?php
class Topic_model extends CI_Model {

    function __construct()
    {    	
        parent::__construct();
    }

    function gets(){
    	return $this->db->query("SELECT * FROM topic")->result();
    }

    function get($topic_id){
        $this->db->select('id');
        $this->db->select('title');
        $this->db->select('description');
        $this->db->select('UNIX_TIMESTAMP(created) AS created');
    	return $this->db->get_where('topic', array('id'=>$topic_id))->row();
    }

    function add($title, $description){
        $this->db->set('created', 'NOW()', false);
        $this->db->insert('topic',array(
            'title'=>$title,
            'description'=>$description
        ));        
        return $this->db->insert_id();
    }
}

application/views/add.php

<form action="/index.php/topic/add" method="post" class="span10">
	<?php echo validation_errors(); ?>
	<input type="text" name="title" placeholder="제목" class="span12" />
	<textarea name="description" placeholder="본문" class="span12" rows="15" ></textarea>
	<input class="btn" type="submit" />
</form>

application/views/get.php

차이점

코드

<div class="span10">
    <article>
        <h1><?=$topic->title?></h1>
        <div>
            <div><?=kdate($topic->created)?></div>
            <?=auto_link($topic->description)?>
        </div>
    </article>
    <div>
        <a href="/index.php/topic/add" class="btn">추가</a>
    </div>
</div>

application/views/head.php

차이점

코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <!-- Bootstrap -->
	    <link href="/static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
	    <style>
	    	body{
	    		padding-top:60px;
	    	}
	    </style>
	    <link href="/static/lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">			    
    </head>
    <body>
    	<div class="navbar navbar-fixed-top">
		  <div class="navbar-inner">
		    <div class="container">
		 
		      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
		      <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>
		 
		      <!-- Be sure to leave the brand out there if you want it shown -->
		      <a class="brand" href="#">JavaScript</a>
		 
		      <!-- Everything you want hidden at 940px or less, place within here -->
		      <div class="nav-collapse collapse">
		        <!-- .nav, .navbar-search, .navbar-form, etc -->
		      </div>
		 
		    </div>
		  </div>
		</div>
    	<div class="container">
				<div class="row-fluid">