1. 외부 static 파일 사용하기: 부트스트랩(bootstrap)
부트스트랩은 트위터에서 제공하는 css 프레임워크이다. 각종 요소들에 대해 미리 css 요소들을 적절하게 지정해놓은 것이라고 이해하면 된다. 부트스트랩 파일을 다운로드 받고 사용하면서 CI(CodeIgniter)에서 외부 파일을 사용하는 방법에 대해 학습한다.
css 파일을 head 부분에 넣고, js 링크 파일을 body 태그 내부 맨 아래에 넣는다. 그리고 트위터 가이드에 따라서 class 이름들을 설정해주면 부트스트랩이 적용된다. 강의 내용과 예제 파일이 다르기 때문에 중요한 점들만 짚고 넘어간다.
예제 파일에 보면 assets/vendor 내부에 bootstrap.min.css, bootstrap.min.js 파일이 있다. 트위터 부트스트랩 페이지에 가서 압축 파일을 받으면 이것보다 더 많은 파일들을 제공하는데, 예제 프로젝트에서는 최소한의 파일만 남겨둔 것 같다.
views/users.php 에 가보면 아래처럼 head 부분에 link로 stylesheet가 적용된 것을 볼 수 있다. 여기서는 프로젝트 제작자가 미리 만들어놓은 base_url() 메서드를 통해서 루트 디렉토리를 쉽게 찾을 수 있도록 해놨다. 외부 파일을 참조할 때 중요한 것은 참조 위치를 내 프로젝트에 맞게 정확하게 작성해주는 것 정도가 되겠다.
//중략
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="<?php base_url(); ?>assets/vendor/bootstrap.min.css">
</head>
<body>
//중략
2. URI Routing
기본적인 controller 호출 및 매핑 방식은 앞선 글에서 살펴봤었다.
host/index.php/{클래스명}/{메소드명}/{추가 파라미터}
만약 이런 규칙을 변경하고 싶다면 config/routes.php에 규칙을 추가해주면 된다.
config/routes.php
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
//강의내용
//$route 부분에 패턴을 추가하고, 그에 맞는 매핑 정보를 우항에 적어준다
$route['topic/(:num)'] = "topic/get/$1";
우항의 $1은 좌측의 패턴 인자를 순서대로 나타낼 뿐이다. Back referencing으로 불리는데, :num 부분에 10을 넣으면 topic/get/10 부분으로 라우팅된다. 정규표현식을 사용해서 규칙을 추가할 수도 있다.
$route['topic/([a-z]+)/([a-z]+)/(\d+)'] = "$1/$2/$3";
3. Helper
나중에 배울 Library와 같은 개념으로 자주 사용하는 로직을 재활용 할 수 있도록 만들어 놓는 것이다. 다만 Library와 다르게 객체지향이 아닌 독립된 함수 형태로 작성한다.
포럼 사이트에서 매뉴얼 -> 헬퍼 부분에 들어가서 보면 제공되는 다양한 헬퍼들을 볼 수 있다.
https://ciboard.co.kr/user_guide/kr/helpers/index.html
강의에서는 url 주소를 파라미터로 받아서 자동으로 링크형 텍스트로 만들어주는 auto_link 헬퍼에 대해 소개한다. 매뉴얼을 보면 금방 파악할 수 있는 내용이라 상술하지는 않는다.
헬퍼 조회
헬퍼를 불러오기 위해서 아래와 같은 코드를 작성해주면 된다.
$this->load->helper('url'); //url 이라는 이름의 헬퍼를 호출
'url'만 적는게 아니라 array() 형태로 여러 개의 helper를 불러올 수도 있다.
프로젝트 전역에서 불러오기 위해서는 config/autoload.php 에서 $autoload['helper'] = array() 부분에 불러올 헬퍼들의 이름을 넣어주면 된다.
헬퍼 추가
직접 헬퍼를 만들어서 추가해줄 수도 있다. 강의 내용을 그대로 따왔다.
우선 신규 헬퍼를 추가하기 위해서 root_path/helpers에 helper 파일을 추가해야한다. 명명 규칙은 <원하는 이름>_helper.php로 작성해야한다. 그리고 호출 시에는 <원하는 이름> 으로 호출하면 된다.
helpers/kdate_helper.php 작성
$this->load->helper(array('kdate'));
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
if ( ! function_exists('kdate')){
function kdate($stamp){
return data('o년 n월 j일, G시 i분 s초', $stamp);
}
}
맨 위 구문은 직접 script를 XSS 방식으로 주입하지 못하도록 막는 코드이다.
function_exists는 전역에서 사용할 function 이름 중 'kdate'라는 이름이 없는지를 검사한다.
kdata 메서드는 UNIX_TIMESTAMP 형식의 날짜를 받아와서 'o년 n월...' 형식으로 ci 내부의 date 헬퍼를 사용하는 메서드이다.
4. Library & form validation
앞서 설명한대로 객체지향 방식으로 자주 사용하는 코드를 모아놓은 것이 Library이다. CI에서는 form validation도 library의 일종으로 제공된다.
input class library
<form>으로 제출된 데이터들은 Input Class 라이브러리를 통해서 서버에서 받아들이게 된다. 가령 title, description 값을 사용자로부터 form 형식으로 입력받았다면(method=post로 처리), 서버에서는 아래와 같은 코드로 받을 수 있다.
$this->input->post('title'), $this->input->post('description')
form validation
입력 검증을 위한 form validation 라이브러리는 아래와 같은 방식으로 로드하고 사용한다.controller 쪽에서는 form_validation 라이브러리를 load, run 한다. 입력 부분에서는 validation_errors()를 실행하여 에러가 났을 경우 에러메시지를 표시할 수 있도록 처리한다.
// 처리 부분: controller쪽
$this->load->library('form_validation');
if ($this->form_validation->run() == FALSE)
{
$this->load->view('입력화면 이름 그대로');
}
else
{
$this->load->view('성공했을 때 이동할 view 이름');
}
// 입력 부분: view쪽
<?php echo validation_errors(); ?>
<form>
//...중략
</form>
validation에 실패한 경우 validation_errors()에 의해서 에러 메시지가 출력되는데, 영어로 출력된다. 이것은 프로젝트의 기본 언어 설정이 영어이기 때문이며, config에서 수정 처리할 수 있다.
검사 규칙 처리
$this->form_validation->set_rules();로 규칙을 추가할 수 있다. 3가지 파라미터를 받는다.
$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]|is_unique[users.username]');
첫 번째 파라미터는 form에서 input으로 받는 항목의 name 값, 두번째는 에러메시지에 삽입되는 구분하기 쉬운 이름 값, 세번째는 규칙이다. 규칙을 사용하는 다양한 방법에 대해서는 매뉴얼을 참고하면 될 것 같다.
입력값 저장
이제 입력한 값을 저장하여 DB에 기록하는 방법에 대해서 알아본다. 강의 예시상 topic 모델에 title, description을 입력받는다. 위 form_validation view에서 validation에 성공하여 else 구문에 진입한 경우로 아래처럼 처리해주면 된다.
else {
$this->load->model('topic_model')
$this->topic_model->add($this->input->post('title'), $this->input->post('description');
}
add는 내부함수가 아니라 직접 만들어야하는 함수다. topic_model.php 파일에 멤버 메서드로 추가해준다.
function add($title, $description){
$this->db->set('created', 'NOW()', false);
$this->db->insert('topic', array(
'title'=>$title,
'description'=>$description
));
echo $this->db->last_query();
return $this->db->insert_id();
}
- db->set('created', 'NOW()', false); 부분은 false 인자값을 통해서 now()라는 메서드를 일반 String이 아니라 함수형태로 처리하도록 해준다.
- db->last_query(); 부분은 db에서 처리한 마지막 쿼리를 출력할 수 있는 구문이다.
- $this->db->insert_id() 구문은 db에 insert 처리한 결과 id 값을 가져온다. 이를 통해 view로 처리하는 부분에서 id값을 받아와서 detail 페이지로 이동하게 만들 수 있다.
위 view용 페이지 부분에 아래 코드를 추가하여 새로 추가된 엔티티의 상세 페이지로 이동하도록 만들어준다.
else {
$this->load->model('topic_model')
$topic_id = $this->topic_model->add($this->input->post('title'), $this->input->post('description');
$this->load->helper('url');
redirect('/topic/get/'.$topic_id);
}
url 라이브러리의 redirect 메서드를 사용한다. redirect에 들어갈 주소값에는 prefix로 처리되는 host주소/index.php 부분은 생략한다.
참조
생활코딩 유튜브 채널