본문 바로가기
코딩과 알고리즘

비주얼 스튜디오 코드 에디터 - 웹페이지 편집(2)

1. 오토셋 APM 인스톨러 ( apache + php7.2 + mariadb ) 설치 | https://itadventure.tistory.com/93

2. 코드이그나이터 4 ( codeigniter 4 ) 설치 | https://itadventure.tistory.com/95

3. 비주얼 스튜디오 코드 에디터 설치 & 한글 설정 | https://itadventure.tistory.com/96

4. 폴더열기 / 웹페이지 편집(1) | https://itadventure.tistory.com/97

♣ 5. 웹페이지 편집(2) ♣


MVC 패턴이란 무엇일까요?
MVC 패턴은 개발자와 디자이너가 각각 소스를 따로 편집할 수 있게 해주는 일종의 제한 장치입니다.

MVC 의 각 영문 알파벳은 M(Model), V(View), C(Component) 로 구분짓는데요.

ModelComponent개발자가 주로 작업하고
View 는 디자이너 또는 HTML 코더가 작업하는 것이지요.

지난번에 보신 Home.php 를 컨트롤러라고 합니다.

컨트롤러는 URL 주소를 받아서 필요한 변수를 세팅해서 view 로 넘겨주는 역활을 하는데요.
위 소스는 변수 세팅은 없이 그냥 view 로 넘겨주는 역활을 하게 되어 있습니다.

아래 소스가 보여줄 웹페이지로 제어를 넘겨주는 부분인데요.

return view("welcome_message");

CODEIGNITER4/app/Views/welcome_message.php 파일을 호출합니다.

해당 소스는 아래와 같이 생겼습니다.
실제로 보여지는 웹페이지는 바로 이 페이지가 되는 것이지요 :)

그렇다면 다른 웹페이지를 추가하려면 어떻게 해야 할까요?
보통은 2개의 소스를 추가해야 합니다.

첫번째는 Controller 파일을 추가하고, 두번째는 View파일을 추가하면 되며,
필요에 따라서는 Model 파일을 추가해야 하는 경우도 있습니다.

만일 아래와 같은 URL을 사용하려면 어떻게 해야 할까요?

localhost/zebra

첫번째는 CODEIGNITER4/app/Controllers/Zebra.php 파일을 추가하고,
두번째는 동일한 명칭의 View 파일을 추가하는게 일반적인 관례입니다.

CODEIGNITER4/app/View/zebra.php 파일을 추가하는 것이지요.

주의할 부분은 컨트롤러 Zebra.php 의 파일명 첫글자는 반드시 대문자를 사용해야 한다는 점입니다.

파일을 추가하는 방법을 살펴볼까요?
컨트롤러 파일을 추가하기 위해 app/Controllers 폴더를 펼쳐주신 다음에,

Controllers 폴더 위에서 마우스 우클릭 버튼을 누르면 팝업 메뉴가 노출됩니다.
거기서 새 파일을 선택해 주세요

그러면 파일명을 입력하는 창이 노출됩니다.
Zebra.php 라고 입력 후 Enter 키를 치시면

Controllers 폴더에 Zebra.php 파일이 생겨납니다.
( 주의하실 점은 Z 를 대문자로 입력하셔야 한다는 점이지요 )

그리고 오른쪽에 해당 파일이 편집 가능한 상태로 열려져 있을 것입니다.

내용을 아래와 같이 채워주세요. 그리고 Ctrl + S 단축키를 눌러 저장해줍니다.

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class Zebra extends Controller
{
    public function index()
    {
        return view('zebra');
    }    
}

그리고 다음으로는 View 를 추가할 차례입니다.

app/Views 폴더를 펼쳐주신 다음에,

Views 폴더 위에서 마우스 우클릭 버튼을 클릭 후 새 파일 메뉴를 선택합니다.

그 다음 역시, zebra.php 라고 입력 후 Enter 를 쳐 줍니다.
(주의하실 점은 이 때는 첫글자 z를 소문자로 입력해주셔야 합니다)

zebra.php 파일 또한 편집할 수 있는 상태가 되었습니다.

이번에는 아래와 같은 소스를 넣어보실까요? 역시 Ctrl+S 키로 저장해주시면 됩니다.

<html>
<head>
<title>얼룩말</title>
</head>
<body>
<img src="http://dreamplan7.cafe24.com/zebra.jpg"><br/>
검고 흰 얼룩무늬가 있는 말과의 야생동물. <br/>
현생 말의 얼마 안되는 친족이다.<br/>
아프리카 대륙의 사바나 지역에 널리 분포한다. <br/>
위로는 수단, 아래로는 남아프리카 공화국에 이르는 서식지를 가진다.
<br/><br/>
현재 산얼룩말 (Equus zebra), 사바나얼룩말 (Equus quagga), 그레비얼룩말 (Equus grevyi) <br/>
3종의 얼룩말이 있으며 3종 모두 아프리카에 산다. <br/>
이들 3종은 주로 체구와 줄무늬의 형태로 구분하며, 각 종에 따라 선호하는 서식지가 다르다. <br/>
사바나얼룩말의 아종으로는 민갈기얼룩말, 크로셰이얼룩말, 부르첼얼룩말, 채프먼얼룩말과 <br/>
그랜트얼룩말이 있으며, 멸종된 동물인 콰가 또한 사바나얼룩말의 아종이다.

</body>

이제 인터넷 브라우저 창에 다음과 같이 입력해 보시기 바랍니다.

localhost/zebra

아래와 같은 웹페이지가 나오신다면 대성공!

이 과정을 Zebra 컨트롤러를 추가하고, zebra 뷰와 연결해준다고 표현합니다.
app/Controllers 폴더Zebra.php 컨트롤러 파일을 위치하고
app/Views 폴더zebra.php 뷰 파일을 위치하도록 하는 것이지요.

크레이는 얼룩말을 추가했지만, 여러분은 좋아하는 동물의 웹페이지를 추가해보시면 어떨까요?
명심하실 것은 컨트롤러를 추가할 때는 첫글자는 대문자로 구성해야 한다는 점입니다.
뷰도 함께 추가해주어야 한다는 점도 잊지 마시구요.

크레이가 했던 것과 비슷하게 진행해주시면 되며 힌트를 드리자면
컨트롤러 소스 중 수정해야 할 부분은 2곳입니다.
부디 도전하시는 분들은 성공하시길 소원합니다 :)

감사합니다.