개발환경

  • 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의 컨틀롤러-뷰의 관계에 대해 간단하게 작성해봤습니다.

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

먼저 프레임워크 설치방법은 아래 글을 참고해주세요

Codeigniter 설치 : https://motown.tistory.com/2

개발환경

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

준비

1. codeigniter에 아래 링크에서 다운로드 받은 부트스트랩 무료 템플릿을 적용해보겠습니다.

https://startbootstrap.com/theme/sb-admin-2

 

SB Admin 2 - Free Bootstrap Admin Theme - Start Bootstrap

Like our free products? Our pro products are even better! Go Pro Today!

startbootstrap.com

2. WAMP 로컬서버 경로에 다운받은 Ci3 폴더를 복사해주고 이름을 폴더 이름을 'task'로 변경해줍니다.

task 폴더 구성

3. 작업을 위해 Visual Studio Code에서 위 폴더를 열어줍니다.

4. 서버 접속 확인

http://localhost(:포트)/task/

task 경로에 Ci 3가 잘 설치되었습니다.&amp;nbsp;


템플릿 적용하기

 템플릿 적용을 하기 위해 다운받은 템플릿의 'css, js' 소스와 이미지 같은 리소스를 불러와줘야 합니다.

 

1. 템플릿 가져오기

먼저 'task'경로 안에 템플릿을 저장할 'static'이라는 폴더를 생성해줍니다.

Static 폴더 생성

2. 복사할 템플릿 파일 확인

 다운로드 받은 템플릿 파일 압축을 푼 후에 index.html 을 확인해보겠습니다.

sb admin 2 템플릿 폴더

index.html을 크롬에서 열면 템플릿 사이트를 확인 할 수 있습니다.

지금은 소스파일을 봐야하므로 우클릭 하여 '연결 프로그램'을 메모장이나, VS code 등의 에디터로 열어봅니다.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Dashboard</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

</head>

 index.html의 <head>태그 부분을 살펴보겠습니다.

<link>태그 에 '*.css' 파일들을 불러온 것을 확인 할 수 있습니다.

    <!-- Bootstrap core JavaScript-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin-2.min.js"></script>

    <!-- Page level plugins -->
    <script src="vendor/chart.js/Chart.min.js"></script>

    <!-- Page level custom scripts -->
    <script src="js/demo/chart-area-demo.js"></script>
    <script src="js/demo/chart-pie-demo.js"></script>

</body>

</html>

 그리고 <body>태그 맨 밑 부분에 '*.js' 파일들을 불러 왔습니다.


index.html 파일처럼 템플릿을 불러오기위해 css, js 등의 파일들을 불러와줘야합니다.

이미지같은 리소스가 있는 템플릿이라면 이 역시 마찬가지구요.

 

3.  템플릿 파일을 Ci 3의 Static 폴더에 복사

템플릿 적용을 위해 필요한 소스, 리소스 복사

템플릿 적용에 필요한 폴더들을 위에서 생성한 staic 폴더에 복사해줍니다.

task 서버의 static 폴더에 복사


템플릿 적용을 위한 준비가 되었습니다.

다음에 템플릿을 ci 3에 적용해보겠습니다.

+ Recent posts