MySQL -> 컨트롤러 -> 뷰 트리플 패스!

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) | https://itadventure.tistory.com/101

6. 코드이그나이터4의 URL 규칙 | https://itadventure.tistory.com/105

7. php, 네임스페이스 [ namespace ] ?! | https://itadventure.tistory.com/118

8. 코드이그나이터의 네임스페이스, 그리고 모델 | https://itadventure.tistory.com/122

9. 코드이그나이터 뷰의 파라미터 전달 | https://itadventure.tistory.com/147

10. 코드이그나이터 뷰를 나눠 볼까요? | https://itadventure.tistory.com/174

11. MYSQL 이 뭐여? [ 마이에스큐엘은 서류철이다! ] | https://itadventure.tistory.com/175

12. MYSQL 콘솔에 접속해보자! | https://itadventure.tistory.com/178

13. MySql에 넣었다가 꺼냈다가, 뭘? | https://itadventure.tistory.com/265

14. 검색진열대 MYSQL | https://itadventure.tistory.com/267

15. 편집의 왕자 MySQL | https://itadventure.tistory.com/269

16. 코드이그나이터4, MYSQL과 손잡다. | https://itadventure.tistory.com/271

17. MySQL -> 컨트롤러 -> 뷰 트리플 패스!

---

지난 챕터에서는 xmp 태그와 print_r 명령어를 이용하여 
책의 정보들을 읽어온 결과를 출력하는 부분을 살펴보았습니다만,
만일 책을 판매하는 사이트를 만든다고 할때 고객분에게 결과믈을 보여줄 용도로는 쓰기는 좀 그렇지요?

최종 고객분에게는 쉽고 간결하고 알아보기 쉽게 내용을 보여드려 구매욕구를 불러 일으키는 것이 일반적인데요.
이번 시간에는 컨트롤러에서 MYSQL 데이터를 받아와 뷰에 배열로 넘겨주어 출력하는 부분을 살펴보겠습니다.

뷰를 사용하기 위해서는 컨트롤러 외에도 소스파일이 1개 더 있어야 합니다.

바로 '뷰'이지요.

이전에 다루었던 챕터 중에서도 뷰에 대해 살펴본적이 있었는데요.
이번에는 book 테이블에서 받은 결과를 배열로 뷰에 넘겨주고,
뷰에서 이 배열을 다루는 방법을 살펴보겠습니다.

우선 지난번 소스파일을 보존하기 위해 컨트롤러 파일도 새로 만들어 봅시다.
컨트롤러 파일은 CODEIGNITER4\app\Controllers\Mysqltest2.php 위치에 생성해 주시고,
소스는 아래와 같이 입력해 주세요.

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Mysqltest2 extends Controller
{
    public function index()
    {
        $db = \Config\Database::connect("default", false);
        $query = $db->query('SELECT * FROM book');
        $results = $query->getResultArray();
        $data = [
            'title'=>"도서 목록",
            'booklist'=>$results            
        ];
        return view('mysqltest2', $data);
    }
}

이어서 뷰 파일은 CODEIGNITER4\app\View\mysqltest2.php 위치에 생성해 주시고, 

소스는 아래와 같이 입력해 주세요.

<style>
    .title_style { font-size:12pt; color:blue}
    .author_style { font-size:9pt; color:gray}
</style>
<u><b><?=$title?></b></u><br/>
<? foreach ($booklist as $book){?>
<span class=title_style><?= $book['title']?></span>
<span class=author_style>/ <?= $book['author']?></span>
<br/>
<? } ?>

소스는 비교적 단순해 보이는 듯 합니다.
오토셋이 실행되어 있다면 URL은 아래와 같은데요. 접속해 봅시다.
http://localhost/mysqltest2

아래와 같이 책의 목록이 나열될 겁니다.

색상이 들어가서 알록 달록(?) 하게 보일법도 하네요.
이 화면을 소스 보기로 보면 아래와 같습니다. 우리의 목적은 이러한 소스를 만들어주는 것인데요.

<style>
.title_style { font-size:12pt; color:blue}
.author_style { font-size:9pt; color:gray}
</style>
<u><b>도서 목록</b></u><br/>
<span class=title_style>3D 모델링 블렌더 2.8</span>
<span class=author_style>/ 크레이</span>
<br/>
<span class=title_style>오토셋으로 구현하는 코드이그나이터 4</span>
<span class=author_style>/ 크레이</span>
<br/>
<span class=title_style>자바스크립트로 만나는 3D 가상세계</span>
<span class=author_style>/ 크레이</span>
<br/>

HTML 태그는 어느정도 아신다는 가정하에 진행합니다.
우선 컨트롤러 소스에서 아래 부분은 지난 챕터와 동일하기 때문에 넘어가도록 하구요.

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Mysqltest2 extends Controller
{
    public function index()
    {
        $db = \Config\Database::connect("default", false);
        $query = $db->query('SELECT * FROM book');
               :
               :
    }
}

한 줄단위로 살펴보겠습니다.

$results = $query->getResultArray();

도서목록 결과를 받아서 $result 변수에 넣는 부분인데요.
지난번 소스를 유심히 살펴보신 분이 있다면 뭔가 바뀐게 있는 것을 확인하실 수 있을 겁니다.

바로, getResultObject() 메소드가 getResultArray() 로 바뀌었습니다.

스펠링이 비슷해 보이는 2개의 메소드는 사실 거의 비슷합니다.
다만 php 에서 지원하는 오브젝트 형식과 배열 형식 중 어떤 형식으로 결과를 가져오는지의 차이만 있을 뿐입니다.

이렇게 받아오는 이유는 바로 코드이그나이터뷰에서 사용이 편하기 때문입니다.
이 형태를 print_r 로 찍어보면 아래와 같이 결과가 출력되어 이전에 보신 것과 약간 차이가 있음을 보실 수 있습니다.

Array
(
    [0] => Array
        (
            [number] => 1
            [title] => 3D 모델링 블렌더 2.8
            [body] => 블렌더의 신비! 그 고대의 비밀을 풀어보자!
            [totalpage] => 452
            [author] => 크레이
        )
    [1] => Array
        (
            [number] => 3
            [title] => 오토셋으로 구현하는 코드이그나이터 4
            [body] => 코드이그나이터4로 홈페이지를 만들어볼까요?
            [totalpage] => 500
            [author] => 크레이
        )
    [2] => Array
        (
            [number] => 4
            [title] => 자바스크립트로 만나는 3D 가상세계
            [body] => 캔버스와 three.js 와의 만남, 3차원 가상세계를 만들어 볼까요?
            [totalpage] => 500
            [author] => 크레이
        )
)

다음 소스입니다. 끊기에는 좀 모호한 부분이라 4줄을 모두 나열하였습니다.

$data = [
    'title'=>"도서 목록",
    'booklist'=>$results            
];

$data 변수에 배열을 생성해서 대입하는 방식인데요,
이 경우 키밸류 ( 키(Key)=>값(Value) ) 배열이라고 보통 표현합니다.

'[' 기호부터 ']' 기호까지가 배열을 의미하는데요.
보통 배열을 정의할 때 단순 배열은 아래와 같이 정의하지만.

[ "데이터1", "데이터2", "데이터3", ... ]

배열내의 키(Key), 곧 각 요소마다 특정 이름을 주어,
'제목'은 '도서 목록'이고, '도서목록'은 '이것이것'이다라고 정의할 경우는 아래와 같이 정의합니다.

[ "요소명1"=>"데이터1", "요소명2"=>"데이터2", ...  ]

그러니까 위 소스의 경우
$data 변수의 'title'이라는 요소명에 '도서 목록'이란 값을,
$data 변수의 'booklist'이라는 요소명에 $result 변수내용을 대입시킵니다.

이른바 국어사전에 보면 단어와 뜻이 나열되는 듯한 구조를 생각하시면 됩니다.
단어가 '키'이고 뜻이 '밸류(값)'이지요.

return view('mysqltest2', $data);

이어서 뷰에 $data 변수를 전달하는데요.

이 코드는 뷰 폴더에 있는 mysqltest2.php 를 결국 호출하게 됩니다.
그러면서 뷰에 $data 변수를 통째도 전달하는 것으로 컨트롤러의 사명(?)을 마치게 되는 것이지요?

그러면 이어서 뷰에서의 코드를 하나씩 보도록 할까요?

<style>
    .title_style { font-size:12pt; color:blue}
    .author_style { font-size:9pt; color:gray}
</style>

이 부분은 제목과 작성자를 표현할 css 스타일을 결정해줍니다.
php 와는 별 관련이 없는 HTML 의 속성이기 때문에 넘어가도록 하겠습니다.

<u><b><?=$title?></b></u><br/>

이어서 "도서 목록"이라는 밑줄쳐진 굵은 글씨를 표시하는 부분인데요.
앞의 컨트롤러에서 넘겨준 $data 변수의 title 요소값을 사용합니다.

언뜻 생각해보면 뷰에서도 $data['title']로 사용해야 할것 같지만 뷰에서는
컨트롤러에서 전달된 변수를 그대로 사용하는게 아니라
각 요소값이 다시 변수명이 되어 사용 가능합니다.

컨트롤러에서 이와 같이 변수를 정해 2개의 요소를 정의해서 전달해주었다면,

$data = [
    'title'=>"도서 목록",
    'booklist'=>$results            
];
return view('mysqltest2', $data);

뷰에서는 $data 라는 변수를 사용하는게 아니라 아래와 같은 변수 2개가 생겨나서 사용하는 것이지요.
이 변수는 전달받은 뷰 안에서만 사용 가능합니다.

$title = "도서 목록";
$booklist = $result; <= 도서목록결과가 배열로 대입

그래서 아래와 같은 소스는

<u><b><?=$title?></b></u><br/>

php 코드가 실행됨에 따라, 아래와 같이 바뀐 HTML 소스를 만드는 것입니다.
뷰에서는 <? 기호부터 ?> 기호 범위까지를 php 소스로 인식하며,
<?=$변수?> 의 경우 특별하게 $변수 값을 그 자리에 그대로 출력해라~ 라는 의미로 사용됩니다.

<u><b>도서 목록</b></u><br/>

그 다음 코드를 보도록 할까요?

<? foreach ($booklist as $book){?>
<span class=title_style><?= $book['title']?></span>
<span class=author_style>/ <?= $book['author']?></span>
<br/>
<? } ?>

이 부분은 초심자에게는 좀 난해할 수 있는데요.
바로 반복문이라는 php 문법입니다. 

php 에서는 for 와 foreach 라는 반복문이 있는데요.
본 소스에서는 foreach 를 사용하였습니다. 더욱 간결하기 때문이지요.

보통 배열내 값의 변경이 필요할 경우에는 for 문을 필수로 사용해야 하지만
배열 내 값을 참조만 할 경우 foreach 가 더 사용하기 용이합니다.

foreach 문법은 아래와 같은데요.

foreach($배열변수 as $배열1개를받는변수) {
   : // 반복코드실행부
}

위 문법은 배열변수에서 값을 하나 하나씩 꺼내서 as 뒤에 있는 $배열1개를받는변수 에 대입하면서 
반복코드실행부를 실행해줍니다.
만일 배열의 갯수가 10개라면 반복코드실행부를 10번을 실행해주고,
배열 갯수가 3개라면 반복코드 실행부를 3번 실행해 주는 것이지요

뷰에서는 약간 복잡해 보이게 되어 있지만 역시 같은 사용법입니다.

원래라면 이런 코드이겠지만.

<? 
foreach ($booklist as $book){
    :
}
?>

아래와 같이 사용되었는데요. 위 사용법이나 아래 사용법이나 큰 차이는 없습니다만,
뷰는 HTML 코딩을 주로 하는 퍼블리셔를 위한 구성이기 때문에 아래 방법을 선호하는 편입니다.

<? foreach ($booklist as $book){?>
   :
<? } ?>

$booklist 에는 현재 아래와 같은 내용이 들어 있습니다.

Array
(
    [0] => Array
        (
            [number] => 1
            [title] => 3D 모델링 블렌더 2.8
            [body] => 블렌더의 신비! 그 고대의 비밀을 풀어보자!
            [totalpage] => 452
            [author] => 크레이
        )
    [1] => Array
        (
            [number] => 3
            [title] => 오토셋으로 구현하는 코드이그나이터 4
            [body] => 코드이그나이터4로 홈페이지를 만들어볼까요?
            [totalpage] => 500
            [author] => 크레이
        )
    [2] => Array
        (
            [number] => 4
            [title] => 자바스크립트로 만나는 3D 가상세계
            [body] => 캔버스와 three.js 와의 만남, 3차원 가상세계를 만들어 볼까요?
            [totalpage] => 500
            [author] => 크레이
        )
)

그런데 foreach 반복문 안에서는 $booklist 변수를 사용하는 것이 아니라,
아래 반복문 구성에 따라 배열 하나 하나의 요소값을 받아오는 $book 값을 사용하는데요.

<? foreach ($booklist as $book){?>

이 반복문에 3회 실행되면서 $book 값에는 3번의 값이 바뀌면서 입력됩니다.

첫번째 실행 때는 아래와 같은 값이 입력되고,

Array
(
    [number] => 1
    [title] => 3D 모델링 블렌더 2.8
    [body] => 블렌더의 신비! 그 고대의 비밀을 풀어보자!
    [totalpage] => 452
    [author] => 크레이
)

두번째 실행 때는 아래와 같은 값이 입력됩니다.

Array
(
    [number] => 3
    [title] => 오토셋으로 구현하는 코드이그나이터 4
    [body] => 코드이그나이터4로 홈페이지를 만들어볼까요?
    [totalpage] => 500
    [author] => 크레이
)

이어서 3번째 실행 때에는 아래 값이 입력되는 것을 마지막으로 실행이 끝납니다.

Array
(
    [number] => 4
    [title] => 자바스크립트로 만나는 3D 가상세계
    [body] => 캔버스와 three.js 와의 만남, 3차원 가상세계를 만들어 볼까요?
    [totalpage] => 500
    [author] => 크레이
)

반복문이 실행되는그 과정에 아래 3줄의 코드가 총 3번이 실행되는 것인데요.

<span class=title_style><?= $book['title']?></span>
<span class=author_style>/ <?= $book['author']?></span>
<br/>

위 소스는 첫번째 실행때에는 이와 같이 HTML 소스를 출력하며,

<span class=title_style>3D 모델링 블렌더 2.8</span>
<span class=author_style>/ 크레이</span>
<br/>

두 번째 실행 때는 아래 HTML 소스를

<span class=title_style>오토셋으로 구현하는 코드이그나이터 4</span>
<span class=author_style>/ 크레이</span>
<br/>

세 번째 실행 때는 아래 HTML 소스를 출력하는 것으로 역시 모든 사명(?) 을 마치게 됩니다 :)

<span class=title_style>자바스크립트로 만나는 3D 가상세계</span>
<span class=author_style>/ 크레이</span>
<br/>

이번 챕터에서는 코드이그나이터를 이용하여 mysql의 테이블 정보를 불러와서 표시하는 부분을 살펴보았습니다.
본문 관련하여 궁금하신 점이 있으시면 댓글로 문의주세요.

---

오늘도 여기까지 읽어주셔서 감사합니다 :)
모두들 건강하시고 코로나의 위험으로부터 보호하시고 지켜주시는 하나님의 은혜가 함께 하시길 바랍니다.