개발환경

  • OS - Windows 10
  • IDE - Visual Studio Code (이하 VS Code)
  • Framework Version - Codeigniter 3 (이하 Ci3)
  • Bitnami WAMP 로컬 서버 경로 - 드라이브\Bitnami\apache2\htdocs

 이 전에 Ci3로 생성한 task라는 웹 서버 경로(Bitnami\apache2\htdocs)에 static 폴더를 생성 한 후,

템플릿 적용에 필요한 폴더(css, js 등)을 복사하는 작업까지 마쳤습니다.

 이번엔 템플릿을 적용하기 위해 <link>, <script> 태그 내에 경로를 설정하여 Ci3에서 경로지정을 어떻게 효과적으로 하는 지에 대해 중점적으로 알아보겠습니다


1. 컨트롤러 생성

 Ci 3는 MVC 패턴이 기반이므로 컨트롤러부터 생성을 해줘야합니다.

'Task/Application/Controller' 경로 안에 'Home.php'라는 파일을 생성한 후 'Home' 컨트롤러 클래스를 작성해줍니다.

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

class Home extends CI_Controller
{
    
  public function __construct()
  {
    parent::__construct();
  }

  public function index()
  {
    // 
  }

}

 'Task' 컨트롤러를 아래 경로로 호출해보겠습니다.

http://localhost(:포트를 별도로 설정한 경우 포트)/task/index.php/home

빈 화면이 정상적으로 출력됩니다


2. View 호출

 Ci3는 컨트롤러를 호출하면 컨트롤러 내에서 화면 구성 코드가 작성된 'View'를 호출하는 구조를 갖습니다.

기본으로 생성된 'welcome_message.php'를 호출해보겠습니다.

 아래 'Controllers/Welcome.php' 코드를 먼저 살펴보면 index() 함수안에 view를 불러오는 코드가 작성되있습니다.

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

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see https://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
    	// welcome_message view 호출
		$this->load->view('welcome_message');
	}
}

'Task/application/views'경로 안에 'welcome_message.php' 파일이 있습니다.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>

	<style type="text/css">

	::selection { background-color: #E13300; color: white; }
	::-moz-selection { background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}

	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	#body {
		margin: 0 15px 0 15px;
	}

	p.footer {
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}

	#container {
		margin: 10px;
		border: 1px solid #D0D0D0;
		box-shadow: 0 0 8px #D0D0D0;
	}
	</style>
</head>
<body>

<div id="container">
	<h1>Welcome to CodeIgniter!</h1>

	<div id="body">
		<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

		<p>If you would like to edit this page you'll find it located at:</p>
		<code>application/views/welcome_message.php</code>

		<p>The corresponding controller for this page is found at:</p>
		<code>application/controllers/Welcome.php</code>

		<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
	</div>

	<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>

  코드를 보시면 대부분 HTML로 구성되있음을 알 수 있는데 처음 MVC를 접하였을 때 이 부분에서 많이 헷갈려하십니다.

 View 코드만 불러오면 되는 걸 왜 Controller를 통해서 불러와야 하냐는 의문을 갖는 것이 당연합니다.

 간단하게 설명드리면 화면구성(UI)과 데이터처리(데이터 모델링)을 분리하여야 유지보수도 쉽고 컨트롤러만 사용자의 요청을 처리하면되는 구조가 보안성을 더 높여주기 때문입니다.
 데이터처리, 화면 등의 모든 코드가 한 페이지에만 작성 될 경우 웹 브라우저 내에 데이터가 노출될 위험이 굉장히 높아집니다

* MVC 패턴에 대한 내용은 자세히 다음에 다루도록하겠습니다.

 다시 돌아와서 'Home' 컨트롤러 클래스 index()함수에 'Welcome' 컨트롤러 클래스의 index()함수 내에 작성된 아래의 코드를 복사하여 붙여줍니다.

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

 그럼 'Controllers/Home.php' 클래스는 아래와 같이 완성됩니다.

class Home extends CI_Controller
{
    
  public function __construct()
  {
    parent::__construct();
  }

  public function index()
  {
    // 테스트를 위해 Welcome_message 뷰를 호출 해보자
    $this->load->view('welcome_message');
  }

}

작성 후 다시 아래 주소를 호출해볼까요

http://localhost(:포트를 별도로 설정한 경우 포트)/task/index.php/home

&amp;nbsp;welcome_message 뷰가 잘 불러와졌습니다

 'Welcome' 컨트롤러 클래스처럼 welcome_message 뷰가 잘 호출되었습니다.


 Ci3의 컨틀롤러-뷰의 관계에 대해 간단하게 작성해봤습니다.

글이 길어질까봐 템플릿을 실제로 적용하는건 다음 편으로 미루겠습니다 ;)

+ Recent posts