▶ 이벤트 창 띄우기
자신의 홈페이지에 처음 접속한 사람들에게 자신의 홈에 대한 간단한 안내문을
보여준다거나, 특별한 이벤트가 있을때 이를 알려주는 새창을 띄워주는 프로그램을
만들어보겠습니다.
먼저 머리를 굴려봐야겠죠? 홈페이지 접속시 새창을 어떻게 띄워주지?
새창을 띄우는 것은 자바 스크립트를 이용해 간단히 해결할 수 있습니다. 아! 자바
스크립트를 잘 모른다구요? 걱정 없습니다. 일단 여기서는 필요한 자바 스크립트는
공개를 할테니까요.
먼저 이벤트 창으로 띄워줄 문서를 하나 만들어두기로 하죠.
[event.html]
--------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
<title>알려드립니다.</title>
</head>
<body bgcolor='white' text='black' leftmargin='0' marginwidth='0' topmargin='0' marginheight='0'>
<table border='0' cellpadding='0' cellspacing='1' width='200' height='300' bgcolor='black'>
<tr>
<td bgcolor='white' align='center' valign='middle'><p><font size='2'><b>안녕하세요!</b><br><br><br>비혼의 강의가<br><br>맘에 안들죠?<br><br>흑흑...<br><br>그래도 사랑해주세요!</font></p></td>
</tr>
<tr>
<td height='20' bgcolor='white' align='center'><p><input type='button' onclick='window.close();' value='닫기' style='border-width:1; border-color:black; background-color:#eeeeee; height:18;'></p></td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------
- 미리보기 : dreamphp.com/study2/event/test_event.html
- 소스보기 : dreamphp.com/study2/event/test_event.phps
(링크를 눌러 이동을 할 경우 원래의 형태대로 보이지 않는 문제점 때문에 http://는
제외했습니다. 위 주소를 복사해 브라우저에 붙여넣기해서 이동하도록 하세요. 어렵지
않죠? 헤더 정보를 봤는데 직접 이동시와 링크로 이동시의 Accept에 차이가...)
문서를 열어보면 간단한 내용과 함께 닫기 버튼이 보일것입니다. 닫기를 누르면
현재 보이는 창을 닫을 것인지 묻는 창이 뜹니다. 이것은 새로운 창으로 띄우면
질문 없이 닫을 수 있으니 그냥 넘어가기로 합니다. ^^
자. 이런 내용으로 이벤트 창을 띄우기로 하지요. 테이블의 크기를 보고 짐작을 한
분이 있겠지만 이벤트 창의 폭과 높이는 200, 300이 됩니다. 크기야 당연히 자유롭게
조절이 가능한 것 알고 계시죠?
그럼 이제 메인 문서를 만들어볼까요? 메인 문서를 열면 자동으로 창이 떠야 합니다.
때문에 스크립트를 이용해야 하죠. 먼저 소스를 보세요.
[index.html]
--------------------------------------------------------------------------------
<html>
<head>
<title>::: BiHon의 PHP 강의 - 이벤트 창 - :::</title>
<script>
window.open('http://dreamphp.com/study2/event/test_event.html', 'event', 'left=15,top=15,width=200,height=300,toolbar=no,menubar=no,status=no,scrollbars=no,resizable=no');
</script>
</head>
<body bgcolor='white' text='black'>
<pre>
안녕하세요! 비혼의 PHP 강의를 읽어주셔서 감사합니다.
이번 편은 이벤트 창에 관련된 강의입니다.
차근차근 살펴보세요~</pre>
</body>
</html>
--------------------------------------------------------------------------------
- 미리보기 : dreamphp.com/study2/event/test.html
- 소스보기 : dreamphp.com/study2/event/test.phps
문서를 열어보면 알겠지만 처음 만들어둔 문서가 새창으로 뜹니다. 좌상단 각각 15
픽셀씩 떨어진 곳에 뜨죠. 스크립트의 속성에 보이죠? left=15, top=15 이 값에 의해
지정된 위치에 열리는 것입니다.
오늘의 강의글이 끝났습니다. 허무하죠? ^^ 농담이었습니다. 규칙을 지켜야 하는
형식적인 글이 아니기 때문에 이런 썰렁한 농담도 집어넣을 수 있는거겠죠? ^_____^;;
물론 오늘의 강의는 스크립트를 이용한 새창 띄우기가 전부가 아닙니다. PHP 강의인
만큼 PHP 프로그래밍 요소가 있어야겠지요?
위의 경우 test.html 파일을 열때마다 새로운 창이 뜨기 때문에 매번 이 창을
닫아주는 것이 번거롭게 느껴지죠. 또한 이벤트 기간을 정했을때 정해진 기간이
지나면 처음부터 아예 안 열리도록 하면 좋을테구요.
웹서핑중에 새로운 창이 뜨는 경우를 많이 보셨죠? 그 중에 보면 다음부터는 이 창
열지 않음이란 체크 박스가 있는 경우가 있죠. 본 적 있나요? 오늘은 그것을 구현할
참입니다.
먼저 새 창을 띄우는 것은 해결했고, 닫는 것도 스크립트로 간단히 해결했습니다.
현재 상태에 새창 띄우기와 관련된 부분만 첨가하면 되죠. 어떻게 구현할까요?
먼저 자신의 입장이라면 어떻게 처리할 것인지 생각을 해봐야 합니다.
일단 test.html 문서의 <script>에서 </script> 부분만 없으면 새 창은 띄워지지
않습니다. 그럼 특정 조건에 대해 이 스크립트를 출력하거나, 출력하지 않도록
설정만 하면 간단히 해결되겠죠?
그럼 특정 조건은 무엇이냐구요? 새 창을 띄울 것인지 띄우지 않을 것인지에 대한
값이 들어있는 변수를 말합니다. 이 변수를 검사해 <script>~</script> 부분의 출력
유무만 결정하면 오늘의 강의는 끝나는 것이죠.
우리가 얻어 사용할 수 있는 접속자의 정보로는 IP가 있습니다. 이벤트로 열린 창에서
닫기 버튼에 PHP 프로그램을 연결시켜 다음부터 열지 않음에 체크를 한 경우 파일이나
디비에 IP를 기록함으로써 다음번에 이 값들을 검사해 새창을 띄우거나 띄우지 않으면
됩니다. 하지만 이렇게 아이피와 파일(또는 디비)을 이용할 경우 조금은 번거롭게
되죠.
이미 PHP 입문편에서 다루었지만 이 경우에는 쿠키를 이용하는 방법이 제일 빠릅니다.
1. 처음 읽히는 문서에 대해서 쿠키값을 검사
- 쿠키값이 지정된 값과 동일하면 새창 띄우지 않음
- 쿠키값이 지정된 값과 틀리거나 없다면 새창 띄움
2. 새창에 대해서 닫기 버튼을 누를 경우
- "다음부터 이 창 열지 않음"을 체크했을 경우 쿠키 생성후 닫기
- 체크 안했을 경우 그냥 닫기
이게 끝입니다. 직접 예제를 보고 이해해보세요.
[event.html]
--------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
<title>알려드립니다.</title>
<style>
body,p { font-size:9pt; }
</style>
</head>
<body bgcolor='white' text='black' leftmargin='0' marginwidth='0' topmargin='0' marginheight='0'>
<table border='0' cellpadding='0' cellspacing='1' width='200' height='300' bgcolor='black'>
<form method='post' action='close.php'>
<tr>
<td bgcolor='white' align='center' valign='middle' colspan='3'><p><b>안녕하세요!</b><br><br><br>비혼의 강의가<br><br>맘에 안들죠?<br><br>흑흑...<br><br>그래도 사랑해주세요!</p></td>
</tr>
<tr>
<td height='20' bgcolor='black' align='center'><p><input type='checkbox' name='event' value='off' onfocus=blur()></p></td>
<td height='20' bgcolor='black' align='center'><p><font color='white'>다음부터 이 창 열지 않음</font></p></td>
<td height='20' bgcolor='black' align='center'><p><input type='submit' value='닫기' style='border-width:1; border-color:black; background-color:#eeeeee; height:18;'></p></td>
</tr>
</form>
</table>
</body>
</html>
--------------------------------------------------------------------------------
- 미리보기 : dreamphp.com/study2/event/event.html
- 소스보기 : dreamphp.com/study2/event/event.phps
처음 제시했던 test_event.html 파일과는 조금 다르죠? 간단한 스타일도 적용했고,
하단의 셀을 3칸으로 나눠 배경을 검정색, 글자색을 흰색으로 했으며, <form> 태그를
넣었습니다. 모두 다룬바 있기 때문에 따로 설명은 않겠습니다.
소스에서 보면 닫기 버튼을 누를때 close.php 파일로 이동을 하는걸 알 수 있겠죠?
체크박스의 이름은 event입니다. 값은 off 이구요. 선택이 되어 있다면 off란 값을
close.php 파일에 보낼테고, 선택되어있지 않다면 아무런 값도 보내지 않게 되죠.
[close.php]
--------------------------------------------------------------------------------
<?
if ($HTTP_POST_VARS[event]=="off") setcookie("event","off",time()+3600*24*30);
echo "<script>window.close();</script>";
?>
--------------------------------------------------------------------------------
event.html 파일의 체크박스의 이름이 event 였으므로 이를 넘겨받은 프로그램에선
$HTTP_POST_VARS[event]라는 변수를 바로 이용할 수 있게 됩니다. [$event로 바로
사용할 수 있지만 정식으로 하는 것입니다.]
만약 선택되어있지 않을 경우 아무런 값도 없기 때문에 조건은 거짓이 되어 다음
문장으로 넘어가게 됩니다. 다음 문장에선 자바 스크립트로 창을 바로 닫게 되구요.
체크가 되어있다면 off란 값이 넘어올테니 조건이 참이되어 event라는 이름의 쿠키를
굽게 되는 것입니다.
time() 함수에 의해 현재의 timestamp(일전에 다뤘죠? 1970년 1월 1일 오전 9시부터
지금까지의 흘러온 시간을 초로 나타낸 숫자)값을 반환받아 그 값에 한달을 더한
시간까지 지속되도록 쿠키를 굽습니다. 3600(1시간) * 24(하루) * 30(한달)
이제 처음 읽힐 문서만 남았군요. ^^
[index.html]
--------------------------------------------------------------------------------
<html>
<head>
<title>::: BiHon의 PHP 강의 - 이벤트 창 - :::</title>
<?
if ($HTTP_COOKIE_VARS["event"]!="off") echo "<script>
window.open('http://dreamphp.com/study2/event/event.html', 'event', 'left=15,top=15,width=200,height=300,toolbar=no,menubar=no,status=no,scrollbars=no,resizable=no');
</script>n";
?>
</head>
<body bgcolor='white' text='black'>
<pre>
안녕하세요! 비혼의 PHP 강의를 읽어주셔서 감사합니다.
이번 편은 이벤트 창에 관련된 강의입니다.
차근차근 살펴보세요~</pre>
</body>
</html>
--------------------------------------------------------------------------------
- 미리보기 : http://dreamphp.com/study2/event
- 소스보기 : http://dreamphp.com/study2/event/index.phps
기존에 바로 창을 띄우는 스크립트를 사용하던 부분에 PHP 코드를 추가만 하면 되죠.
만약 event라는 쿠키 변수의 값이 off가 아니라면 새창을 띄우는 스크립트를 출력!
만약 event 쿠키 변수의 값이 off라면 해당 스크립트가 출력되지 않으므로 새창이
안뜨게 되는 것이죠.
위 주소로 접속해 보세요. 새 창이 뜨죠? 새 창을 닫고 새로고침해보세요. 새 창이
또 뜨죠? 그럼 이번엔 체크를 한 다음 닫고, 새로고침해보세요. 안뜨죠?
오늘의 강의는 끝났습니다. 읽느라 고생하셨습니다. ^^
ps
이벤트 창을 남용하면 참 번거롭게 느껴집니다. 때문에 필요한 경우에만 사용하는게
좋겠죠? 다음부터 창이 열리지 않도록 하는 것은 작은 배려구요.
위에서 쿠키의 지속 시간을 30일로 했는데 자신의 마음에 들게 바꾸면 알아서 쿠키가
소멸되고 그 이후부턴 자동으로 새 창이 뜨겠죠? ^^
또한 이벤트 창을 여러개 만들어 쿠키값이나 조건값 등을 다르게 주어 응용하는
방법도 있습니다. 이제부턴 여러분의 몫입니다.
* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:07)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >> 웹 프로그래밍
* 이동후 위치 : 웹 공부 >>
* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:12)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >>
* 이동후 위치 : 웹 공부 >> 웹 프로그래밍
신비의 섬--神秘岛（朝鲜文）
나는 죽을때까지 재미있게 살고 싶다--我至死追求生之乐趣
안데르쎈동화--安徒生童话（朝鲜文）
상호텍스트성의 내포와 외연--互文性的内涵与外延
중화5천년(하)-中华五千年(下)입점신청
