야매강좌 php11강 : 게시판 리스트 출력(종합선물세트)

야매강좌 php11강 : 게시판 리스트 작성(종합선물세트)

안녕하세요. 이번 강의 준비가 좀 오래걸렸습니다. 마음 단단히 먹으시기 바랍니다. 생각보다 많은 시간이(하루이틀 넘게) 걸리실 수도 있으니까요. 프로그래밍이라는 게 초보단계에선 그렇게 쉬울 수가 없지만, 나중에는 양도 많아지고 이것저것 복잡해지죠.

오늘 제목은 게시판 리스트 출력, 그리고 종합선물세트입니다. 오늘 강의 내용을 요리조리 변형해서 모든 사이트가 만들어지는 거라서요.

차근히 전진해보세요. 힘들면 쉬면서 하시고요.

(서론 1) PHP를 쓰는 이유

뜬금없이 PHP를 쓰는 이유를 얘기해보고 싶네요. HTML을 쓰면 되는데 왜 PHP를 쓸까요.

쉽게 말해 HTML은 어떤 고정된 페이지라서 유저 개입이 안됩니다. 사이트 운영자가 파일을 만지작거려야 바뀌는거죠.

근데 자유게시판, 블로그, 카페, 페이스북 같은 건 모두 유저 개입이 됩니다. 고정된 게 아니어서 유저들이 이것저것 찔러넣으면 수정이 되죠. 이게 큰 차이점이에요.

그러니까 PHP로 3가지 정도를 구현하면 됩니다. (이건 뭐 어디서 들은 것도 아니고 그냥 제 개인적 생각입니다)

하나, 입력. 유저가 뭔가를 입력하고요.

둘, 처리. 그게 DB에 들어가고요.

셋, 출력. DB 내용을 화면에 뿌려주면(나타내주면) 됩니다.

(서론 2) 게시판 리스트 출력을 해보자

결국 입력-처리-출력 을 만들자는 거죠. 그런 의미에서 오늘 php파일을 3개 만들겁니다.

입력의 input.php, 처리의 input2.php, 출력의 list.php죠.

형태는 게시판으로 합니다.

먼저 사용자가 텍스트박스에 글을 쓰면(input), 그걸 DB에 넣고(input2), DB값을 출력하는거죠(list).

이렇게 한 번 만들고 나면 사실 PHP의 기초를 다 배운겁니다.

모든 사이트는 입력-처리-출력의 기본 원리를 이리저리 바꾼 버젼에 지나지 않을테니까요.

서론이 길었네요.

(1/3) input.php

먼저 글 입력창을 만들어봅시다. 이건 사실 야매강좌 6강과 9강을 합친겁니다. 하지만 기억해내서 만들어보세요~ 라고 하면 당연히 못 만드니까 저랑 같이 다시 해봅시다.

▼ 이런 화면을 만들면 됩니다

설명> 주석에 대해서 얘기해보죠.

주석이란 프로그램 작동에는 전혀 영향을 끼치지 않는 부분을 말합니다. 참고용으로 뭔가 적을 때 주석으로 적으면 됩니다.

HTML 언어에서 주석은 <!– 로 열고 –> 로 닫습니다.

PHP 언어와 자바스크립트 언어에서 주석은 // 뒤에 이것저것 쓰면 됩니다.

그러니까 언어가 바뀔 때마다 주석도 바꿔줘야 합니다.

input.php

<!–input.php–>
<!–흑곰보드 글쓰기 창입니다–>

<!–헤드열기. 헤드에는 title도 들어가지만 나중에 쓰일 함수(펑션)을 만들어 놓으면 됩니다–>

//이 함수는 비어있는 텍스트박스가 있으면 메시지를 출력하고,

//그렇지 않을경우(else) 전송하는(submit) 함수입니다

if (document.HGB.name.value == ”)
{alert(‘이름칸이 비었어요’);
document.HGB.name.focus();}

else if (document.HGB.passwd.value == ”)
{alert(‘비밀번호칸이 비었어요’);
document.HGB.passwd.focus();}

else if (document.HGB.email.value == ”)
{alert(‘메일칸이 비었어요’);
document.HGB.email.focus();}

else if (document.HGB.url.value == ”)
{alert(‘사이트칸이 비었어요’);
document.HGB.url.focus();}

else if (document.HGB.title.value == ”)
{alert(‘제목칸이 비었어요’);
document.HGB.title.focus();}

else if (document.HGB.content.value == ”)
{alert(‘ 내용칸이 비었어요’);
document.HGB.content.focus();}

else { document.HGB.submit(); }

} //함수 닫기
</script><!–자바 스크립트 닫기–>

</head><!–헤드 닫기–>

<body>

<!–폼이름은 HGB(흑곰보드), 전송방식 포스트, 연관 파일을 설정해줍니다–>
<center><form name=’HGB’ method=’post’ action=’input2.php’>

<!–표–>
<table width=’600′ border=0>
<!–행1. tr로 줄을 만들고, td로 그 속에 칸을 만듭니다–>
<tr>
<td width=’20%’>이름</td>
<td width=’80%’><input type=’text’ name=’name’ size=’20’></td>
</tr>
<!–행2–>
<tr>
<td width=’20%’>비밀번호</td>
<td width=’80%’><input type=’password’ name=’passwd’ size=’20’></td>
</tr>
<!–행3–>
<tr>
<td width=’20%’>메일</td>
<td width=’80%’><input type=’text’ name=’email’ size=’50’></td>
</tr>
<!–행4–>
<tr>
<td width=’20%’>사이트</td>
<td width=’80%’><input type=’text’ name=’url’ size=’50’></td>
</tr>
<!–행5–>
<tr>
<td width=’20%’>제목</td>
<td width=’80%’><input type=’text’ name=’title’ size=’50’></td>
</tr>
<!–행6–>
<tr>
<td width=’20%’>내용</td>
<td width=’80%’><textarea name=’content’ rows=’10’ cols=’50’></textarea></td><!–textarea는 여러줄이 들어가는 박스를 만듭니다–>
</tr>
<!–행7–>
<tr>
<td colspan=’2′ align=’center’><input type=’button’ value=’글 입력하기’ onclick=”javascript:check_input();”></td><!–글 입력하기 버튼을 클릭하면 check_input 함수가 실행됩니다. head부분에 만들어뒀었죠–>
</tr>
<!–표닫기–>
</table>
<!–폼닫기–>
</form></center>

</body>
</html>

글을 제대로 입력했다면 버튼을 누르는 즉시 폼(HGB)에 있는 박스 내용들이 전송됩니다.

참고로 홈페이지는 http://a 이런식으로 쓰면 되고, 메일은 a@a 이런식으로 쓰면 됩니다.

(2/3) input2.php

이 파일은 DB처리하는 내용을 넣을게요. 이 파일은 전체적으로 php를 썼습니다.

다시 말해 파일의 시작은 <?php, 파일의 끝은 ?>로 끝납니다.

다만 중간중간 html이나 자바스크립트가 들어가는데요. 이럴 땐 echo 함수를 이용해서 html과 자바스크립트를 표현합니다.

input2.php

<?php //input2.php. 전체를 php문서로 작성해봤습니다.

//에러 함수—————

//아까처럼 html의 헤드 안에 함수를 만들자. 함수 만들 땐 자바스크립트를 활용하는거다.

//이해가 안된다고? 될 때까지 다시 읽어라.

function error($msg)
{
echo
“
<html><head><script name=javascript>
window.alert(‘$msg’);
history.go(-1);
</script></head></html>
“;
exit;
}
//————————–

//DB 연결
mysql_connect(“localhost”, “root”, “apmsetup”) or die (mysql_error()); //localhost 라는 호스트명에 Id 루트, 비밀번호 apmsetup으로 연결한다
mysql_select_db(“oaphp”); //데이터베이스 중 oaphp라는 테이블을 쓰자

//변수 넘겨받기
$name = $_POST[“name”]; //받아온 name을 $name에 집어넣고
$name = addslashes($name); //addslashes(애드슬래쉬)해준다.

//문자열 사이에 역슬래쉬를 넣는 함수다.
//몇 가지 문자들은 DB에 그냥 올리면 오류가 날 수 있기 때문이다.

//ex) ‘ 는 그대로 DB에 넣으면 오류가 나며 \’ 로 입력해야 한다.
//그냥 (방명록이나 게시판 만들 경우) 변수 넘겨받은 후

//반드시 addslashes로 처리하면 됨.

$passwd = $_POST[“passwd”]; //위와 동일. 변수 넘겨받은 후,
$passwd = addslashes($passwd); //addslashes 처리 해준다

$email = $_POST[“email”];
$email = addslashes($email);

$url = $_POST[“url”];
$url = addslashes($url);

$title = $_POST[“title”];
$title = addslashes($title);

$content = $_POST[“content”];
$content = addslashes($content);

//초기값 설정
$daytime = time(); //현재 시간을 daytime변수에 넣는다
$ip = getenv(“REMOTE_ADDR”); //사용자의 ip 주소를 가져온다. 이 소스가 정확히 무슨뜻이냐고?

//미안하지만 복사-붙여넣기를 추천한다
$count = 0; //조회수 0으로 설정

//정규 표현식을 이용해서 문자열을 검사
if(!ereg(“([^[:space:]])”, $name)) //if(!ereg(“([^[:space:]])”, $변수)) 가 뭐냐고?

//$변수가 비었을 경우라는 뜻이다.

//복잡하니까 복사해다 쓰면 된다
{ error(“이름칸이 비었어요”); //문자열이 문제가 있을 경우 메시지 띄우고
exit;} //exit한다.

if(!ereg(“(^[0-9a-zA-Z]{4,8}$)”, $passwd)) //영문, 숫자만 받는다. 4~8글자
{ error(“비밀번호는 4~8자의 영문 또는 숫자로 써주세요”);
exit;}

if($email != ” && !ereg(“(^[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+)*@[0-9a-zA-Z-]+(\.[0-9a-zA-Z-]+)*$)”, $email)) //이걸 외울생각이라면 말리고 싶다. 중간에 @가 들어가야 한다
{ error(“메일주소를 바르게 써주세요”);
exit;}

if($url != ” && !ereg(“http://([0-9a-zA-Z.\@~?&=_])”, $url)) //http://를 앞에 붙여야 한다
{ error(“사이트 주소를 바르게 써주세요”);
exit;}

if(!ereg(“([^[:space:]])”, $title))
{ error(“제목칸이 비었어요”);
exit;}

if(!ereg(“([^[:space:]])”, $content))
{ error(“내용칸이 비었어요”);
exit;}

//갖고 있는 변수를 데이터베이스에 입력하고 싶다면? 다시 말해 변수->DB 하고 싶다면?
$sql = “insert into board (name, passwd, email, url, title, content) values (‘$name’, ‘$passwd’, ‘$email’, ‘$url’, ‘$title’, ‘$content’)”;

//insert into 테이블이름 (넣을 필드이름) values (넣고싶은값)
//예를 들어 insert into A (aa, bb) values (‘$cc, $dd’); 하면

//테이블 A의 aa 필드에 변수 cc가 들어가고, bb 필드에 변수 dd가 들어간다.

//sql로 쿼리요청 또는 실패시 에러
mysql_query($sql) or die (mysql_error());

//글 목록 페이지로 이동하기
echo(“
<html><head><script name=javascript>
location.href=’list.php’;
self.window.alert(‘글이 입력되었다!’);
</script></head></html>
“);

//페이지 이동할 때 : location.href=’이동할주소’;

//메시지 띄울 때 : self.window.alert(‘내용’);
?>

(3/3) list.php

이제 마지막 한 파일만 남았습니다. 조금 더 집중 해봅시다.

▼ 아래 그림을 기억해주세요.

list.php

<?php //list.php 파일 산뜻하게 시작!

//에러 함수————
//자바스크립트로 메시지 창 띄우고, 이전 화면으로 간 후 exit로 종료하는 함수

//아까도 만들었으니 자세한 설명을 생략한다
function error($msg)
{
echo “
<html><head>
<script name=javascript>
window.alert(‘$msg’);
history.go(-1);
</script>
</head></html>
“;
exit;
}

//————————–

//db연결
mysql_connect(“localhost”, “root”, “apmsetup”) or die (mysql_error()); //mysql에 연결합니다(아이디 root, 비번 apmsetup). 연결안되면 에러출력
mysql_select_db(“oaphp”); //그중에서도 oaphp라는 db에 접속

//여기서부터 엄청 중요! 집중

//초기값 설정
$tablename = “board”; //테이블이름은 board
$page = $_REQUEST[“page”]; //page값을 받아와야 됩니다. list.php$page=2 이런식으로 접속될때
if($page == ”) $page = 1; //페이지 없을 경우 1로 설정

$listnum = 5; //화면에 나올 게시글 수
$pagenum = 10; //화면에 나올 페이지링크 갯수. 페이지 링크란 게시판 하단에 1, 2, 3, 4 식으로 나와서 클릭하면 해당 페이지로 이동되는 것을 말함
$offset = $listnum*($page-1); //초기넘버 계산 (페이지번호 1, 2, 3, 4.., 시작글번호 0, 10, 20, 30..)

$sql = “select count(*) from $tablename”;

//전설의 셀렉트문. 셀렉트문은 php의 꽃이라 할 수 있다. 알아보자.

//(머리 아프면 읽지 않아도 된다. 자연히 알게되겠지 뭐)

//(1) select * from board; 모든 데이터를 가져온다

//(2) select * from board where name=’흑곰’; 이름이 흑곰인 모든 데이터를 가져온다

//(3) select * from board where no=2; 2번째 게시글을 가져온다

//(4) select no, name, title from board; 데이터 중에서도 번호, 이름, 제목 열만 가져온다

//(5) select no, daytime from board order by daytime; 글 입력 시간으로 오름차순

//(6) select no, count from board order by count desc, no; 카운트로 내림차순 후 넘버로 오름차순. order by ~ 하면 오름차순이고, order by ~ desc하면 내림차순인 것

//(7) select count(*) from board; 전체 게시물의 수를 가져온다

$result = mysql_query($sql) or die (mysql_error());
$row = mysql_fetch_array($result); //mysql_fetch_array : 새로운 줄이 몇번째 줄인지

//알아내는 함수로 기억하자. 자세한 내용은 다음에 다루겠다.

//그냥 원래 이런식으로 쓰는거다.

$total_no = $row[0]; //전체 글 수

$total_page = ceil($total_no/$listnum); //페이지번호 계산

//(참고 : ceil 올림, floor 내림, round 반올림)
$cur_no = $total_no – $listnum*($page-1); //글번호 계산. 계산이 어려우면 그냥 그런가보다~해라

//board 테이블에서 목록 가져오기, $offset(초기넘버)에서 $listnum(게시글 수)만큼
$sql = “select * from $tablename order by no desc limit $offset, $listnum “;
$result = mysql_query( $sql ) or die (mysql_error());

//유저에게 보이는 페이지 시작————————-
//먼저 맨 윗부분을 완성하자. 번호/이름/제목/조회수/날짜
echo “
<html>
<head><title>글 목록</title></head>
<body>
<center>
게시판

<table width=’600′ border=’0′>
<tr>
<td width=’10%’ align=’center’>번호</td>
<td width=’15%’ align=’center’>이름</td>
<td width=’50%’ align=’center’>제목</td>
<td width=’10%’ align=’center’>조회수</td>
<td width=’15%’ align=’center’>날짜</td>
</tr>
“;

while($row = mysql_fetch_array($result))
//와일은 반복문이다. 괄호 안에 있는 내용이 충족되는한 반복된다.
//즉 모든 줄을 출력하기 위한 반복문이다.

{
//이름, 제목, 시간을 받아다가
$name = $_POST[“name”];
$row[name] = stripslashes($row[name]);

$title = $_POST[“title”];
$row[title] = stripslashes($row[title]);

$daytime = $_POST[“daytime”];
$date = date(“Y/m/d”, $row[daytime]); //참고 : date(“Y-m-d h:i:s”,$data[‘reg_date’])

//순번, 이름, 제목, 조회수, 날짜 순으로 출력한다
echo(“
<tr>
  <td align=’center’>$cur_no</td>
  <td align=’center’>$row[name]</td>
  <td><a href=’content.php?page=$page&no=$row[no]’>$row[title]</a></td>
  <td align=’center’>$row[count]</td>
  <td align=’center’>$date</td>
</tr>
“);

//순번을 1 조정한다(위에서부터 큰 숫자를 출력하므로)
$cur_no = $cur_no – 1;
}
//모든 줄을 출력하면 while문 끝
echo “</table>”;

//페이지 계산
//페이지 링크를 만들기 위한 계산들이다.
//페이지 링크란, 게시판 아래쪽에 1 2 3 4 … 식으로 위치되어
//클릭하면 해당 페이지로 이동하는 것을 말한다
$total_block = ceil($total_page/$pagenum);
$block = ceil($page/$pagenum);

$first = ($block-1) * $pagenum;
$last = $block * $pagenum;

if($block >= $total_block)
{
$last = $total_page;
}

//페이지링크
//표를 따로 만든다. 헷갈리지 않기 위해 따로 만드는 것이다
echo(“
<table width=’600′ border=’0′>
<tr>
<td align=’center’>
“);

//페이지 링크
for($pagelink = $first + 1; $pagelink <= $last; $pagelink++)
{
if($pagelink == $page)
  {
  echo(“$nbsp<font color=’red’>[$pagelink]</font>”);
  }
else
  {
  echo(“$nbsp<a href=’list.php?page=$pagelink’>[$pagelink]</a>”);
  }
}

echo(“
</td>
</tr>
</table>

<table width=’600′ border=’0′>
<tr>
<td width=’15% align=’center’> </td>
<td width=’70%’ align=’center’> </td>
<td width=’15%’ align=’center’><a href=’input.php?page=$page’>글쓰기</a></td>
</tr>
</table>

</center>
</body>
</html>

“);
?>

(마치며)

짝짝짝! 이걸 끝까지 따라하셨다면 대단합니다.

전 예전에 프로그래밍이 어떤 마법같다고 생각했어요. 마법처럼 이렇게 저렇게 해라~하면 되는 줄 알았죠.

하지만 그런건 없습니다.

화면에 나타나는 하나 하나가 여러 줄의 코드인 것이죠. 자동으로 되는건 없어요.

오늘 배운 11강은 입력-처리-출력가 나오는 핵심부입니다.

나중에 필요할 거 같은 부분은 복사해서 잘 추려두시기 바랍니다. 수고하셨습니다.

답글 남기기 응답 취소