본문 바로가기
코드이그나이터와 php7와 mysql

코드이그나이터4에서 책 정보를 편집해볼까요?

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 -> 컨트롤러 -> 뷰 트리플 패스! | https://itadventure.tistory.com/272

18. 코드이그나이터! MySQL 에 입력하다! ( insert ) | https://itadventure.tistory.com/273

19. 해킹을 막아라! MySQL인젝션 보안 | https://itadventure.tistory.com/274

20. MySQL과 친해지는 phpmyadmin | https://itadventure.tistory.com/277?category=756659

21. 코드이그나이터4에서 책 정보를 편집해볼까요?


지난 챕터에서는 phpmyadmin 이라는 아주 유용한 도구를 다루어 보았는데요.
이번 챕터에서는 지난 과정까지 진행했던 책 정보 추가에 이어서
책 정보를 수정하는 기능을 다루어보도록 하겠습니다.

다음과 같은 식으로 진행될 겁니다.

1) 책 목록 페이지가 있고 각 책의 오른쪽에 [편집] 버튼을 하나 배치합니다.
2) [편집] 버튼을 누르면 책을 추가하는 페이지와 비슷한 페이지가 나오는데,
책의 정보가 이미 입력되어 있습니다.
3) 책의 정보를 수정하고 하단에 [도서수정] 버튼을 누르면 책 정보가 수정되는 동시에 다시 책 목록 페이지로 돌아옵니다.

이를 위해 필요한 컨트롤러와 뷰 페이지는 다음과 같이 구성될 거구요.

컨트롤러(3개) : 책목록을 보여주는 컨트롤러, 책 정보를 편집하는 컨트롤러, 책 정보수정 동작을 실행하는 컨트롤러
뷰(2개) : 책목록을 보여주는 뷰, 책 정보를 편집하는 뷰

사실 책목록을 나열하는 페이지는 17챕터에서 이미 진행이 되었었는데요.
파일명이 mysqltest2 로 되어 있어 단어의 느낌이 책목록과는 다소 거리가 있지요?

이번에는 booklist 로 바꿔보도록 하겠습니다.

각각 아래와 같이 소스를 구성하여 해당 폴더에 저장해 주세요.
파일명과 클래스명이 바뀐 것을 제외하고는 mysqltest2와 동일한 소스입니다.

CodeIgniter4\App\Controllers\BookList.php

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class BookList 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('booklist', $data);
    }
}

CodeIgniter4\App\Views\booklist.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/bookList


이제 각 도서마다 오른쪽에 [편집]이라는 버튼을 추가할 겁니다.
그래서 [편집] 버튼을 누르면 책정보를 편집할 수 있는 페이지로 이동하는 것이 목적이지요.

책목록 뷰 파일을 아래와 같이 수정해 주세요.

CodeIgniter4\App\Views\booklist.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>
<span class=author_style>/ <a href="bookEdit?number=<?=$book['number']?>">[편집]</a></span>
<br/>
<? } ?>

웹 화면을 새로 고침하시면 아래와 같이 바뀌었을 겁니다.
아직 편집 버튼을 누르지는 마세요. 
뭐 누르셔도 상관은 없지만, 다만 파일을 찾을 수 없다는 오류 안내 페이지가 나올겁니다.
책 정보를 수정하는 페이지를 아직 안 만들었기 때문이지요.

새로 추가된 소스에 아래와 같은 부분이 있는데요.

<a href="bookEdit?number=<?=$book['number']?>">[편집]</a>

이 중에서 <?=$book['number']?> 는 book 테이블에서 number 필드로 책 하나하나의 일련번호를 의미합니다.
이 일련번호는 mysql 시스템이 똑똑하게도 알아서 중복되지 않게 순서대로 번호를 매겨주는 정보이니 이 정보를 이용하면 어떤 책을 편집하려는 건지 분명하게 알 수 있지요.

이 경우 만약 일련번호가 12인 책의 편집 링크는 URL 이 현재경로/bookEdit?number=12 가 됩니다.
편집 버튼에 마우스를 가져다 대시면 링크 주소가 표시될 겁니다.
이제 목록에 편집 버튼 링크 넣는 부분은 끝났습니다.

이어서 편집 페이지로 넘어가볼까요?
용어 혼동방지를 우려하여 '편집'과 '편집액션'을 다른 의미로 사용하겠습니다.
'편집' 페이지는 책정보를 수정하되 실제 수정액션은 실행하지 않는 페이지이고,
'편집액션' 페이지는 입력된 책정보를 가지고 실제 수정액션을 실행하는 페이지입니다.

책 '편집' 페이지의 소스는 1개의 컨트롤러와 1개의 뷰로 구성됩니다.
아래와 같이 소스를 각각 구성하여 저장해주신 다음에,

CodeIgniter4\App\Controllers\BookEdit.php

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class BookEdit extends Controller
{
    public function index()
    {
        // 편집할 책의 일련번호
        $number=$this->request->getVar("number");
        $db = \Config\Database::connect("default", false);
        $query = $db->query("SELECT * FROM book where number='".addslashes($number)."' limit 1");
        $results = $query->getResultArray();
        $data = [
            'book'=>$results[0]
        ];   
        return view('bookedit', $data);
    }
}

CodeIgniter4\App\Views\bookEdit.php

<b><u>책 정보 편집</u></b><br/>
<form method=POST action="bookEditAct">
<div class=body_style>
    <input type=hidden name=number value="<?=$book['number']?>">
    시스템 일련번호 : <?=$book['number']?><br/>
    제목 : <input type=text name=title value="<?=$book['title']?>"><br/>
    본문 : <input type=text name=body value="<?=$book['body']?>"><br/>
    페이지수 : <input type=text name=totalpage value="<?=$book['totalpage']?>"><br/>
    작성자 : <input type=text name=author value="<?=$book['author']?>"><br/>
    <input type=submit value="도서 수정">
</div>
</form>

웹페이지에서 아무 거나 편집 버튼을 눌러 주시면,
책 정보를 편집할 수 있는 페이지로 이동되실 겁니다.
number 뒤의 숫자값은 독자분과 상이할 수 있습니다.

http://localhost/bookEdit?number=14

이렇게 책 정보가 입력되어 있는 채로 편집을 기다리고 있는데요.
이렇게 입력된 이유는 컨트롤러에서 책정보를 하나 받아와 뷰에 넘겨주고,
뷰에서 받아온 정보를 표시해주기 때문입니다.

컨트롤러의 작동 순서를 보시면,
제일 먼저 편집할 책의 number 값을 받아옵니다.

$number=$this->request->getVar("number");

그리고 실제 DB에 접근할 수 있도록 연결한 다음에,

$db = \Config\Database::connect("default", false);

책의 정보를 1개 받아와 그 결과를 $query 라는 변수에 넣습니다.

$query = $db->query("SELECT * FROM book where number='".addslashes($number)."' limit 1");

참고로 뒤에 붙는 limit 1 은 한개를 찾자마다 더 이상 탐색을 하지 않고 중지하는 기능입니다.
이 부분이 없다면 자료 모두를 탐색하기 때문에 반응 속도가 느리지만
1개를 찾자마자 중지하면 반응 속도가 꽤 빠르지요.
자료가 소량일 때는 느껴지지 않지만 대량일 수록 확연하게 차이가 나실 겁니다.

비록 받아온 자료는 1개이지만 $query 는 바로 사용할 수는 없고, 책 목록을 따로 뽑아와야 합니다.
다음 명령문은 $query 에 있는 자료 모두를 배열로 뽑아내는 명령인데, 지난 챕터16에 자세한 설명이 있습니다.

$results = $query->getResultArray();

그리고 data 라는 변수에  뽑아낸 결과를 담아서 뷰에 전달합니다.
이 것으로 컨트롤러의 사명은 완수된 것이지요.

        $data = [
            'book'=>$results[0]
        ];
        return view('bookedit', $data);

뷰에서는 책의 정보를 받아와 그대로 표시만 해주면 됩니다.
우선 아래 부분은 책의 정보를 그대로 입력상자에 표시해줍니다.

    시스템 일련번호 : <?= $book['number']?><br/>
    제목 : <input type=text name=title value="<?= $book['title']?>"><br/>
    본문 : <input type=text name=body value="<?= $book['body']?>"><br/>
    페이지수 : <input type=text name=totalpage value="<?= $book['totalpage']?>"><br/>
    작성자 : <input type=text name=author value="<?= $book['author']?>"><br/>

우리의다음 목표는 이 편집 페이지에서 [도서 수정] 버튼을 누르면 책 정보가 수정되는 것인데요.
그러려면 책의 number 번호를 기준으로 수정된 책정보가 편집액션 페이지에 전달되어야 합니다.

그렇기 때문에 <input type=hidden.. 이라는 항목이 앞에 추가되어야 합니다.
<input type=hidden 은 편집은 할 수 없으되 다음 페이지에 전달되는 항목입니다.
그래야 몇번 책의 정보를 수정할지 다음 페이지에서 알 수 있습니다.

<input type=hidden name=number value="<?=$book['number']?>">

그리고 이 모든 항목이 폼 태그 <form> ~ </form> 내부에 들어 있어야 다음 페이지로 전송됩니다.
submit 전송 버튼까지도 말이죠.

그래서 완성되는 폼 태그는 아래와 같습니다.
<div> 는 그냥 디자인적 요소이니 무시하셔도 기능은 작동됩니다.

<form method=POST action="bookEditAct">
<div class=body_style>
    <input type=hidden name=number value="<?=$book['number']?>">
    시스템 일련번호 : <?=$book['number']?><br/>
    제목 : <input type=text name=title value="<?=$book['title']?>"><br/>
    본문 : <input type=text name=body value="<?=$book['body']?>"><br/>
    페이지수 : <input type=text name=totalpage value="<?=$book['totalpage']?>"><br/>
    작성자 : <input type=text name=author value="<?=$book['author']?>"><br/>
    <input type=submit value="도서 수정">
</div>
</form>

폼의 action 속성에 "bookEditAct" 라는 값이 있는데요.
이는 '도서 수정' 버튼을 누를 때 입력자료를 전달하면서 이동할 페이지를 의미합니다.
이 과정을 submit ( 제출 ) 이라고도 부릅니다.

이제 편집액션 페이지를 확인해보실까요?
편집액션 페이지는 컨트롤러 1개로만 구성됩니다.
편집을 마치고 다시 도서 목록으로 돌아오기 때문에 뷰가 필요없습니다.

아래와 같이 소스를 구성해 주세요.

CodeIgniter4\App\Controllers\BookEditAct.php

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class BookEditAct extends Controller
{
    public function index()
    {
        $number=$this->request->getPost("number");
        $title=$this->request->getPost("title");
        $body=$this->request->getVar("body");
        $totalpage=$this->request->getVar("totalpage");
        $author=$this->request->getVar("author");
        $db = \Config\Database::connect("default", false);
        $db->query("update book set
            title='".addslashes($title)."',
            body='".addslashes($body)."',
            totalpage='".addslashes($totalpage)."',
            author='".addslashes($author)."'
            where number=".$number." limit 1"
        );
        return redirect()->to('./bookList');
    }
}

소스가 좀 길어보이지만 겁내실(?) 것 없습니다.
사실 책정보 신규 입력액션과 기능이 대동소이한데요.

우선 5개의 명령문은 앞에서 입력한 책정보와 number 값을 받아옵니다.

        $number=$this->request->getPost("number");
        $title=$this->request->getPost("title");
        $body=$this->request->getVar("body");
        $totalpage=$this->request->getVar("totalpage");
        $author=$this->request->getVar("author");

DB 연결 부분은 반복이라 설명을 굳이 피하도록 하구요.

$db = \Config\Database::connect("default", false);

책 정보를 수정하는 명령입니다.
명령어 사용법과 addslashes 에 대한 부분은 지난 책 정보 신규입력 편에서 다루었었지요?

        $db->query("update book set
            title='".addslashes($title)."',
            body='".addslashes($body)."',
            totalpage='".addslashes($totalpage)."',
            author='".addslashes($author)."'
            where number=".$number." limit 1"
        );

이 명령문은 아래와 같은 SQL 문장을 만들어 내는데요.
책번호에 해당하는 책 1권의 정보를 수정하는 mysql 쿼리문입니다.

 update book set title='책제목', 
        body='책 본문',
        totalpage='총 페이지',
        author='저자'
        where number=책번호 limit 1

그리고 나서 다시 bookList 목록 페이지로 돌아가도록 다음 명령을 실행하는 것으로 모든 작업이 완료됩니다.

return redirect()->to('./bookList');

책 정보가 잘 수정되는지 테스트해보시고
혹시라도 궁금하신 점이 있으면 댓글로 문의 주시기 바랍니다.

오늘도 여기까지 읽어주셔서 감사합니다.
도전하시는 모든 분들 성공하시길 바랍니다 :)

반응형