ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [CodeIgniter] 2. CodeIgniter 개발 환경 구성
    Web/CodeIgniter 2015. 7. 17. 11:26

    Chapter 2. CodeIgniter 개발 환경 구성


     CodeIgniter는 PHP 환경에서 작동합니다. 운영체제에 상관없이 PHP가 작동하는 환경이라면 사용할 수 있습니다.


     윈도우를 기준으로 개발 환경 구성을 해보도록 하곘습니다.



     2.1 윈도우에서 환경 구성하기


      윈도우에서 PHP 개발 환경을 구성하려면 Apache, PHP, MySQL (APM)을 각각 설치하고 설정해야 하는데, 이 과정은 단순 반복이어서 번거롭습니다. XAMPP를 이용하면 APM을 한 번에 설치하고 관리할 수 있습니다.


     

      2.1.1 XAMPP 설치


      XAMPP 페이지(https://www.apachefriends.org/index.html)를 방문합니다.


      다운로드 탭에 XAMPP for Windows 를 클릭하여 다운받습니다.


      설치 과정 중에 아래 화면과 같이 옵션을 구성합니다.







      설치 완료 후, Control Panel에서 아파치를 실행시켜 줍니다.








      이후, 웹 브라우저에 localhost를 입력하여 아래와 같은 화면이 표시되는지 확인합니다.







      위 화면이 표시되지 않는다면 XAMPP가 제대로 설치되지 않은 것이니 XAMPP를 제거 후, 재 설치하시길 바랍니다. 화면에 표시되는 내용은 xampp/htdocs 디렉터리에 들어 있습니다. 우리도 앞으로 이 디렉터리에서 웹 사이트를 개발하게 됩니다.









      2.1.2 CodeIgniter 설치


      CodeIgniter 웹 사이트(http://www.codeigniter.com/download)에서 CodeIgniter 2.x 버전을 다운받습니다.

      xampp/htdocs에 있는 XAMPP 파일을 모두 삭제한 뒤에 내려받은 파일의 압축을 풀고 해당 파일을 xampp/htdocs로 복사합니다.






       다시 localhost에 접속해서 결과를 확인합니다. 아래와 같이 화면이 나오면 끝입니다.







     

     2.2 Hello World 페이지 만들기

     

      이번 절에서는 설치된 CodeIgniter의 기본 Welcome 화면을 수정하여 Hello World 페이지를 만들어 보겠습니다.


      웹 브라우저에 locahost로 접속했을 때 "Welcome to CodeIgniter"라는 화면을 봤을 것입니다. 


      주소에 컨트롤러를 입력하지 않고 호스트 명만 입력했는데 어떤 컨트롤러가 실행되고, 어떤 뷰가 화면에 출력됐습니다. 


      이런 역할을 해주는 것이 application/config/routes.php에 있습니다.


      

    1
    2
    3
    4
    5
    <?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
     
     
    $route['default_controller'= "welcome";
    $route['404_override'= '';
    cs




       4번 라인의 기본적으로 welcome.php를 실행하게 두었습니다. 사이트의 메인 화면을 main.php 컨트롤러가 담당한다면 main으로 수정해주시면 됩니다. 그 다음 도메인만 입력하고 사이트에 접속하면 메인 화면을 볼 수 있습니다. CodeIgniter의 컨트롤러는 application/controller에 작성합니다. 





       다음은 welcome.php 파일의 내용을 보도록 하겠습니다.





    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <?php if ( ! defined('BASEPATH')) 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 http://codeigniter.com/user_guide/general/urls.html
         */
        public function index()
        {
            $this->load->view('welcome_message');
        }
    }
     
    /* End of file welcome.php */
    /* Location: ./application/controllers/welcome.php */
    cs

      



        Line 20: CodeIgniter의 주소체계는 http://호스트/컨트롤러/메서드로 되어있습니다. 

    routes.php에서 default_controller를 welcome.php로 지정하여 컨트롤러명은 알 수 있는데 실행되는 메서드명은 알 수 없습니다. index 메서드를 선언하면 http://localhost/welcome/ 까지만 쳐도 자동으로 http://localhost/welcome/index 라고 실행이 됩니다. 에러 방지의 목적도 있기 때문에 index 메서드는 항상 만드는 것이 좋습니다.




        Line 22: 퓨 파일을 로딩하라는 의미이며 applcation/views/welcome_message.php 파일이 로딩됩니다.




      다음으로 컨트롤러에 선언된 뷰 파일(welcome_message.php)을 보겠습니다.





    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    <!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; }
        ::webkit-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;
            -webkit-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</p>
    </div>
     
    </body>
    </html>
    cs





      welcome_message.php를 아래와 같이 수정해서 hello world 문구를 띄워봅시다.




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    <!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; }
        ::webkit-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;
            -webkit-box-shadow: 0 0 8px #D0D0D0;
        }
       </style>
    </head>
    <body>
     
    <div id="container">
        <h1>Hello world</h1>
     
        <div id="body">
            <p> 코드이그나이터 설치 후 볼 수 있는 화면입니다.</p>
        </div>
     
        <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
    </div>
     
    </body>
    </html>
    cs





     이번 절에서는 CodeIgniter의 Welcome 화면을 변경하여 원하는 결과를 화면에 출력했습니다. 


     다음 장에서는 이번 절에서 빠진 모델을 추가하여 MVC 패턴으로 Todo Application을 만들어 보겠습니다.










    * 이 포스트는 서적 '만들면서 배우는 CodeIgniter 프레임워크'를 참고하여 작성하였습니다.

    댓글

Designed by Tistory.