view와 controller를 나누어서, notFound인 경우를 잘 처리 했다면,
아마 여러분은 조금 더 복잡한 프로그램들을 만들고 싶어 할 것입니다.
물론, 이 blog는 php5를 중점적으로 다루기 때문에, html이나 css, javascript에 대한 내용은 다른 곳에서 많이 보셨다는 가정을 하고, view쪽은(html) 정상적인 html5 코딩으로 가 보겠습니다.
웹 프로그래밍에서 가장 자주 접하는 문제는 사람의 정보를 저장하는 것입니다. helloWorld가 이름을 쓰면 "hello world! XXX"와 같이 붙여주는 단순한 프로그램이었다면, 사람의 정보를 전체적으로 넣고, 그 정보를 찾아보는 프로그램을 만드는 것이 필요할 겁니다.
일반적으로 사용자(User)라는 표현을 많이 쓰므로, 이번 프로그램은 User라고 해 봅시다.
먼저, controllers/user.php라는 파일을 만들어 봅시다.
<?
header("Content-Type: text/html; charset=UTF-8");
include 'views/user.html';
header(...)은 charset을 설정하기 위해서 사용했는데, 이번 프로그램에서는 저장의 편의성을 위해서 utf-8을 사용합니다. 편집기에 따라 다르지만, 저장시에 utf-8으로 저장하셔야 합니다.
그리고, view파일을 만들어야겠죠. 정식적인 html 파일로 만들어 봅시다.
<!DOCTYPE html>
<html>
<head>
<title>사용자</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<form method='post'>
<ul>
<li>
<label for='name'>이름</label>
<input type='text' id='name' name='name' required='required' />
</li>
<li>
<label for='birthday'>생일</label>
<input type='datetime' id='birthday' name='birthday' />
</li>
<li>
<fieldset id='gender'>
<legend>성별</legend>
<label for='남성'>남성</label>
<input type='radio' value='남성' id='남성' name='gender' checked='checked' />
<label for='여성'>여성</label>
<input type='radio' value='여성' id='여성' name='gender' />
</fieldset>
</li>
<li>
<label for='tel'>전화번호</label>
<input type='tel' id='tel' name='tel' pattern='[0-9]+'/>
</li>
<li>
<label for='address'>주소</label>
<input type='text' id='address' name='address' />
</li>
</ul>
<button type='submit'>저장</button>
</form>
</body>
</html>
예...
조금 복잡하지만, 보통 기본적인 html파일이 이런 식으로 생겨 먹었습니다.
html5에서는 <form>태그 안의 input들이 많은 타입이 생겨서, tel이나 datetime, number 같은 형식을 지정할 수 있습니다. 브라우저 마다 서로 틀리게 작용하지만, 스마트 폰 등에서 자동으로 그에 편리한 자판을 띄어주거나 하는 방식으로 작동하게 됩니다.
이제, http://localhost/user.php로 들어가 보면, 적당한 화면을 보실 수 있게 되겠죠.
내용을 채운 후에 "저장"이라는 버튼을 눌러도 아무런 변화가 없으니, 고생하지 마시고, 다시 user.php를 열어서 어떤 내용이 어떤 식으로 오는지를 먼저 확인합시다.
<?
if ( ! empty( $_POST ) ) {
print_r( $_POST );
} else {
include 'views/user.html';
}
이제 내용을 적당히 채운 후 확인을 눌러서 확인하면... 한 줄로 되어있어서 불편하므로, 소스보기를 하면, POST 방식으로 전송된 내용을 편하게 보실 수 있습니다.
POST가 비어있지 않으면, print_r() 이라는 명령으로 자원(resource)을 보여달라고 한 것이죠. 이제 자원을 확인했으면, 이를 저장하면 됩니다. data라는 폴더를 하나 만들어서 여기에 저장을 하는 것이 좋겠네요.
루트에 data라는 폴더를 만들고, user.php를 고칩니다.
<?
header("Content-Type: text/html; charset=UTF-8");
if ( ! empty( $_POST ) ) {
$fileName = "data/user.json";
file_put_contents( $fileName, json_encode( $_POST ) );
include 'views/userView.html';
} else {
include 'views/user.html';
}
$fileName에 파일명을 넣고, file_put_contents()는 파일을 열고 내용을 씁니다. $_POST는 여러개의 데이타를 가지고 있는데, json_encode()는 이런 데이타를 JSON이라는 텍스트 형식으로 바꾸어 주어서 저장을 할 수 있도록 합니다.
그리고 나서 html파일 하나를 불러왔는데, 이는 아직 만들어 지지 않은 내용이죠.
그러므로, views/userView.html 파일을 하나 만들어 줍니다.
<!DOCTYPE html>
<html>
<head>
<title>사용자</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<section>
<ul>
<li>
<span class='title'>이름</span> : <span><?=$_POST['name']?></span>
</li>
<li>
<span class='title'>생일</span> : <span><?=$_POST['birthday']?></span>
</li>
<li>
<span class='title'>성별</span> : <span><?=$_POST['gender']?></span>
</li>
<li>
<span class='title'>전화번호</span> : <span><?=$_POST['tel']?></span>
</li>
<li>
<span class='title'>주소</span> : <span><?=$_POST['address']?></span>
</li>
</ul>
</section>
</body>
</html>
user.html 파일보다는 단순한 모양새이죠? $_POST는 POST형식으로 받은 내용이고, '<?='는 아시다시피 내용을 보여주는 짧은 형식입니다. 이전에 print_r()로 소스보기를 했을 때, $_POST의 생김새가 [name] => Madstorm 과 같은 형식이었는데, 이를 하나하나 접근하는 방식이 $_POST['name']과 같은 형식입니다.
결국 저장을 하고 나면, 위와 같은 모습으로 자신이 넣은 자료를 보실 수 있으실 겁니다. 또한 data라는 폴더에 가면 user.json이라는 파일을 보실 수 있으실 텐데요. 열어보면 한글이 써 있어야 할 부분에 조금 난해한 글씨들이 보이시겠지만, 대략 어떤 방식으로 저장이 되는지 살펴볼 수 있으실 겁니다.
"근데, 주소가 똑같은데 어디에서는 폼을, 어디에선 내용을 보여주잖아."
"뭐야? 보통때는 어떻게 저장된 내용을 볼 수 있지?"
...
맞습니다. 사실 이 프로그램은 저장할 폼을 보여주고, 저장을 하고, 내용을 보여주는 세 개의 내용들이 합쳐져 있습니다. 이 내용들을 분리하면, 훨씬 사용자들이 수월하겠죠.
자, 파일들을 나누어 봅시다.
단계 1 : controllers/userWrite.php
<?
header("Content-Type: text/html; charset=UTF-8");
include 'views/userWrite.html';
쓰기는 view파일만 불러오면 되므로, 이렇게 구성하되, view 파일을 userWrite로 고치는 편이 좋겠군요.
단계 2 : views/userWrite.html
...
<form method='post' action='/userSave.php'>
...
<button type='submit'>저장</button>
<a href='/userView.php'>저장내용 보기</a>
...
...
userWrite.html은 user.html을 그대로 파일명만 바꾸고, form을 보낼 곳을 /userSave.php로 변경시켜 줍니다. 또한 저장 버튼 옆으로 "저장내용 보기" 링크를 하나 두면, 저장 내용을 볼 수 있을 겁니다.
단계 3 : controllers/userView.php
<?
header("Content-Type: text/html; charset=UTF-8");
$fileName = "data/user.json";
$user = json_decode( file_get_contents( $fileName ) );
include 'views/userView.html';
전체가 새로운 프로그램이지만, 내용은 단순하게 file_get_contents()로 파일로 부터 내용을 가져오고, 저장할때와 반대로, json_decode() 로 내용을 풀어 줍니다. 그러면 이를 받은 $user는 $user->name과 같은 형식으로 내용에 접근 할 수 있습니다.
물론, 이미 만들어 놓았던 'views/userView.html'도 고칠 곳이 있죠. 이제 $_POST['name']이 아니라, 위와 같이 써야 합니다.
단계 4 : views/userView.html
<!DOCTYPE html>
<html>
<head>
<title>사용자</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<section>
<ul>
<li>
<span class='title'>이름</span> : <span><?=$user->name?></span>
</li>
<li>
<span class='title'>생일</span> : <span><?=$user->birthday?></span>
</li>
<li>
<span class='title'>성별</span> : <span><?=$user->gender?></span>
</li>
<li>
<span class='title'>전화번호</span> : <span><?=$user->tel?></span>
</li>
<li>
<span class='title'>주소</span> : <span><?=$user->address?></span>
</li>
</ul>
<a href='/userWrite.php'>고치기</a>
</section>
</body>
</html>
일단, 데이타에 접근하는 방식이 바뀌었고, 아래쪽에 userWrite.php로 가는 링크도 달렸습니다.
이제 마지막으로 저장을 담당 하는 /userSave.php를 만들어 봅니다.
단계 5 : controllers/userSave.php
<?
header("Content-Type: text/html; charset=UTF-8");
if ( ! empty( $_POST ) ) {
$fileName = 'data/user.json';
file_put_contents( $fileName, json_encode( $_POST ) );
header('Location: /userView.php');
} else {
header('Location: /userWrite.php');
}
저장할 POST내용이 있으면, 저장을 한 후, 저장 내용을 보여주는 /userView.php로 이동하고, 내용이 없을 경우에는 /userWrite.php로 가서 저장을 하도록 합니다.
자, 이제 읽고, 쓰고, 저장하는 세 개의 행위들이 잘 정돈 되었습니다. 또한 링크들도 적절히 이동이 되는군요.
그런데, controller 파일들(php)을 보니, 뭔가 계속 반복되는 것 같지 않습니까?
바로, header("...UTF-8") 부분인데, 앞으로 계속 utf-8으로 프로그래밍을 한다면, 여기에 있을 이유가 없습니다. 우리에게는 전면의 관리자가 존재하니까요. 각 php파일들에서 이 부분을 지우고, 루트의 index.php파일을 열어서 여기에 붙여 줍니다.
<?
header("Content-Type: text/html; charset=UTF-8");
$target = "controllers" . $_SERVER['REQUEST_URI'];
if ( is_file( $target ) ) {
include $target;
} else {
include 'controllers/notFound.php';
}
이제, 기본적인 설정에 해당하는 header()부분을 전면 관리자에게 넘기고 더 깔끔한 관리자들을 얻으셨습니다.
