Project No2 20071843 김현수 최종 작성일 : 2012-12-06.

Presentation on theme: "Project No2 20071843 김현수 최종 작성일 : 2012-12-06."— Presentation transcript:

1 Project No2 김현수 최종 작성일 :

2 목차 초기컨샙 초기UI 완성UI 기능별 소스설명

3 1.초기컨샙 최종 작성일 :

4 1. 컨샙 고양이 관련 사진 메일링 홈페이지 핑크색톤 페이지 하나에 레이어를 이용하여 현 트렌드인 새창을 띄우지않고 많은내용을 보여주는 방식을 사용.

5 2.초기UI 최종 작성일 :

6 2. UI Main.html ( 로그인 전) 고양이 메일링 서비스 LOGIN 작성자 : 김현수 작성일 : 2012.12.03
관련소스 - DB_Login.php ( DB로그인 기능 ) - Join.php ( 회원가입 창 ) 작성자 : 김현수 작성일 : 첫페이지 전체 : 나눔고딕 웹폰트 ① 로그인박스 위치를 CSS 를 이용하여 가운데 배치 ② 사운드 재생기능 ( HTML5 Audio 사용 ) ③ 로그인기능 DB_Login 에 값을 넘겨서 로그인 성공시 캐쉬를 저장 로그인박스의 내용을 메일링 설정화면으로 변경 ④ 회원가입버튼 작은새창으로 Join.php 를 띄운다. 회원가입이 성공하면 창을 닫는다. ⑤ 관리자에게 메일보내기 HTML5 이메일 기능을 이용. 고양이 메일링 서비스 ① LOGIN PW ③ ④ Login Join ② ⑤ 관리지에게 메일보내기 Sound On / Off

7 2. UI Main.html ( 로그인 후) 고양이 메일링 서비스 관련소스 - 작성자 : 김현수 작성일 : 2012.12.03
로그인 후 페이지 전체 : 나눔고딕 웹폰트 캐쉬에 회원정보를 저장 ① 설정박스 ‘Welcome xxx’ 의 xxx는 유저이름 ② 체크박스 ( 실제 기능 X ) 고양이 메일링 서비스 ① Welcome XXX Mailing Setting ② 고양이사진 고양이 동영상 고양이 그림 설정완료 ② 관리지에게 메일보내기 Sound On / Off

8 2. UI Join.html ( 회원가입) 회 원 가 입 ① ② 가입하기 작성자 : 김현수 작성일 : 2012.12.03
관련소스 - DB_Join.php 작성자 : 김현수 작성일 : 로그인 후 페이지 전체 : 나눔고딕 웹폰트 ① 로그인 폼 – input id : mail type : Passward input id : pw Name input id : name type : text Phone input id : num type : tel + 전화번호 검사기능 CSS – input 디자인을 꾸미고 로그인 박스의 배경,위치설정 ② 가입버튼 버튼클릭시 빈칸을 확인하여 *부분이 빈칸일 경우 알림창을 띄움 조건이 만족할 경우 DB_Join.php 에 값을 넘김 회 원 가 입 ① * Passward* Name Phone *항목은 반드시 입력해주십시오 ② 가입하기

9 3.완성UI 최종 작성일 :

10 Main.php ( 로그인 전 1 ) (참고ppt에 나온 세션 및 쿠키를 사용하기 위해 HTML->PHP로 변경)
3. 완성UI 관련소스 style.css (css 모음) login.php (로그인기능) Main.php ( 로그인 전 1 ) (참고ppt에 나온 세션 및 쿠키를 사용하기 위해 HTML->PHP로 변경) 작성자 : 김현수 작성일 : 공통사항 : 나눔고딕 웹폰트사용 Content Box - div class=content; - css : 가운데위치정렬 border-radius을 주어 둥근사격형 을 만듬 - 세션으로 구분하여 로그인후에는 설정창 으로 변경됨 고양이그림+말풍선 - 1번 박스 밑에 그림을 깔아 해상도에 따라 고양이가 박스위로 올라오는현상을 대처 - 말풍선은 CSS를 사용(.arrow_box) - 로그인전 후를 세션으로 문구를바꾼다. 제목포인트를 주기위해 ‘나눔손글씨’웹폰트 를 사용 ID를 로 사용한 로그인창을 구성 바로하단에는 로그인버튼과 가입버튼이 위치함 버튼은 이미지대신 CSS를 사용(.button) ‘LOGIN’버튼을 누를시 ‘login_check()’ 스크립트로 검사후 ‘login.php’로 이동 ‘JOIN’버튼을 누를시 새로운레이어를 출력 (다음페이지에 설명) 관리자에게 메일보내기 mailto기능을 사용. 음악재생기능 HTML5 Audio로 구현 ON (‘play()’ 스크립트로 연결 – 재생) OFF (‘pause()’ 스크립트로 연결 – 정지) ▲ ( 리스트레이어출력 – 다음페이지에 상세설명 2 1 3 4 5 6

11 Main.php ( 로그인 전 2 – JOIN 버튼을 누를시)
3. 완성UI 관련소스 style.css ( css 모음 ) join.php ( 가입기능 ) idCheck.php ( 중복검사 ) Main.php ( 로그인 전 2 – JOIN 버튼을 누를시) 작성자 : 김현수 작성일 : 공통사항 : 나눔고딕 웹폰트사용 Body - 배경지정 (bg.png 패턴) Layer1( JoinForm Layer ) - 전페이지에 Join버튼에 OnClick를 받아서 Layer1을 ‘hidden’ -> ‘visible’로 변경하여 창을 띄워준다. - ‘중복검사’를 누르면 가입가능한 를 확인한다. ( idCheck.php ) - ‘JOIN’ 버튼을 누르면 ‘join_check()’ 로 이동한 뒤 입 력내용을 검사한 후 ‘join.php’ 로 값을 넘긴다. Layer2( PlayList Layer ) - 총 3개의 배경음중 선택한 배경음을 재생시켜준다. 1 2 3

12 3. 완성UI Main.php ( 로그인 후 ) 1 5 2 3 4 작성자 : 김현수 작성일 : 2012.12.09 관련소스
logout.php ( 로그아웃 기능 ) Main.php ( 로그인 후 ) 작성자 : 김현수 작성일 : 공통사항 : 나눔고딕 웹폰트사용 고양이그림+말풍선 로그인후 세션에서 이름을 가져와 출력시킨다. Content 박스 변경 세션에 값이 있을경우 박스의 내용을 변경하여 출력한다. Sample 텍스트버튼 Sample버튼을 누를경우 5번창 레이어를 visitily 시킨다. Logout , Sava 버튼 Logout 버튼을 누를경우 logout.php로 이동하여 세션을 초기화시킨다 SAVA 버튼을 누를경우에는 check_save()를 실행시킨다. 동영상셈플 Layer 3번 버튼을 누르면 5번창이 가운데 출력이된다. 동영상은 Video테그를 사용하였으며 Close버튼을 누를경우 레이어가 Hidden된다. 1 5 2 3 4

13 idCheck.php ( 로그인 전 -> 중복검사 누를시 )
3. 완성UI 관련소스 idCheck.php ( 로그인 전 -> 중복검사 누를시 ) 작성자 : 김현수 작성일 : 공통사항 : ‘닫기’버튼을 누를시 창이닫힘 회원가입페이지에서 받아온 값을 php로 가져와 검사한다. 사용불가능한 아이디일 경우 사용불가능하다는 메시지를 띄워준다 사용가능한 아이디 일 경우 사용가능하다는 메시지를 띄워준다. 1 2

14 4.기능별 소스설명 최종 작성일 :

15 4.기능별소스정리 Main.php ( 세션 및 레이어 ) 작성자 : 김현수 작성일 : 2012.12.09 관련소스
style.css (css 모음) Main.php ( 세션 및 레이어 ) 작성자 : 김현수 작성일 : HTML->PHP로 변경한 이유 서버에서 설정을 변경할 경우 HTML확장자로도 PHP를 사용가능하지만 보편적인경우를 대비하여 PHP를 사용함 하나의 파일로 로그인전,후를 구분하기 위해 세션,쿠키등을 사용하기 위하여 PHP를 사용 계획변경사항(회원가입창) 초기계획은 회원가입창을 새창으로 띄우는 것이지만, 레이어를 이용하여 새창을 띄우는 것 보다 현 대새적인 레이어를 이용하여 레이어를 나타났다 사라졌다를 이용하여 사용. 소스주석처리를 이용한 소스수정 및 팀프로젝트의 용이함을 늘림. 세션사용 <? set_time_limit(0); session_start(); // 세션을 사용하기위한 초기화 ?> = = 세션으로 로그인 전 후 구분 Ex>고양이 말풍선 <?if(!$SESSION["NAME"]){?> // 세션에 name값을 확인하여 없을경우를 출력 <p>반갑다 냐옹~</p> <?}else{ // 세션에 name값이 있을 경우 name을 같이 출력 echo("<p>냐옹 ".$SESSION["NAME"] ."님 왓다냥!</p>"); }?> 회원가입레이어(Layer1) 나타났다 사라지기 <!-- 회원가입 레이어 시작 ( CSS초기값 : hidden )--> <div id="Layer1"> …(회원가입내용) <input class="button" type="button" value="BACK" OnClick="Layer1.style.visibility='hidden'" style="margin-left:30px"> <!—버튼에 OnClick 로 Layer1의 상태를 Hidden으로 변경하여 화면에서 감춘다.--!> </div> <!-- 회원가입 레이어 끝 --> <input type="button" value="JOIN" class="button" OnClick="Layer1.style.visibility='visible'" style="margin-left:30px"> <!—버튼에 OnClick 로 Layer1의 상태를 visible로 변경하여 화면에 띄워준다.--!> 음악리스트레이어(Layer2)나타내기 <td><span id="foottext1" width=50%><a color="#ffffff">관리자에게 메일 보내기</font></a></span></td> <td><span id="foottext2" width=50%>Sound <a href="javascript:play();"><font color="#ffffff">ON</font></a> / <!-- 음악재생 --> <a href="javascript:stop();"><font color="#ffffff">OFF</font></a> / <!-- 음악정지--> <a href="javascript:;" OnClick="Layer2.style.visibility='visible'"><!–-레이어상태 visible로변경 --> <font color="#ffffff" >▲</font></span></td> 크롬 개발자옵션 화면

16 4.기능별소스정리 Main.php ( 스크립트 구분 ) 작성자 : 김현수 작성일 : 2012.12.09 관련소스
style.css (css 모음) login.php (로그인기능) Main.php ( 스크립트 구분 ) 작성자 : 김현수 작성일 : 로그인체크 로그인시 과 비밀번호가 입력이 되어있는지를 확인한 후 입력이 되어있을 경우 login.php에 값을 넘겨 접속한다. ID중복체크 값이 입력되어있나 확인한후 window.open() 메소드를 이용하여 값을 넘길때 submit 로넘기지 않고 주소명뒤에 ‘?변수명=값’을 이용하여 값을 넘겨준다. 회원가입체크 필수요소인 ID와 비밀번호를 확인한 후 비밀번호와 비밀번호 확인란이 일치하나 확인 후, submit으로 넘긴다. 음악재생기능 play() – audio를 가져와 play시킨다. stop() – audio를 가져와 pause시킨다. change_music(i) 매개변수 i 를 이용하여 음악파일을 구분한 뒤, 음악을 재생시킨다. 1. 로그인 체크 function login_check(){ if(document.login. .value==''){ alert(' 를 입력하세요.'); document.login. .focus(); return false; }else if(document.login.passwd.value==''){ alert('비밀번호를 입력하세요'); document.login.passwd.focus(); }else{ document.login.submit(); //login.php로 전송 } 2. ID중복체크 function ID_check(){ if(document.join. .value==''){ document.join. .focus(); window.open("idCheck.php? ="+document.join. .value,"new", "width=236, height=135, left=30, top=30, scrollbars=no,titlebar=no,status=no,resizable=no,fullscreen=no"); 3. 회원가입체크 function join_check(){ if(document.join. .value==''){ alert(' 를 입력하세요.'); document.join. .focus(); return false; }else if(document.join.passwd.value==''){ alert('비밀번호를 입력하세요'); document.join.passwd.focus(); }else if(document.join.passwd.value!=document.join.passwd1.value){ alert('비밀번호가 일치하지 않습니다.'); }else{ document.join.submit(); //join.php로 전송 } 4. 음악재생기능 function play(){ var control = document.getElementById("player1"); control.play(); function stop(){ control.pause(); function change_music(i){ if(i=='1'){control.src="bgm/bgm1.mp3"; control.load(); }else if(i=='2'){control.src="bgm/bgm2.mp3"; }else if(i=='3'){control.src="bgm/bgm3.mp3";

17 4.기능별소스정리 Main.php ( form 부분 ) 작성자 : 김현수 작성일 : 2012.12.09 관련소스
style.css (css 모음) login.php (로그인기능) Main.php ( form 부분 ) 작성자 : 김현수 작성일 : 공통사항 : 비밀번호는 type=“password”를 두어 입력시 비밀번호를 가리도록 하였다. 로그인 폼 id= , passwd에 이메일과 비밀번호를 받은 뒤 LOGIN버튼에 login_check() 메소드를 불러와 사용한다. 회원가입 폼 각각 ID에 값을 받은 뒤 JOIN버튼을 누를시 join_check() 메소드를 불러와 사용한다. 전화번호의 경우 " type="tel" 을 두고 페턴을 두어 –(하이픈)을 사용하지 않도록 하였다. 1. 로그인 폼 <form name="login" method="post" action="login.php"> <table id="table1" cellspacing="0" cellpadding="0" border="0" > <tr><td colspan=3><span id="title1">야옹이 이메일링 서비스</span></td></tr> <tr><td colspan=3><span id="title2">Kitty Mailing Services</span></td> </tr> <tr><td colspan=3 height=40px></td></tr> <tr><td style="text-align:right;" width=45% height=50px>E - MAIL</td> <td width="5%"></td> <td id="input1"><input type=" " id=" " name=" " placeholder=" width=50% class="text1"></td> <td><tr> <td style="text-align:right;" width=45% height=50px>PASSWARD</td> <td id="input1"><input type="password" id="passwd" name="passwd" placeholder=" PASSWORD" width=50% class="text1"></td> </td></tr> <tr><td height=20px colspan=3></td></tr> <tr><td colspan=3 style="text-align:center"><a href="javascript:login_check();" class="button">LOGIN</a><input type="button" value="JOIN" class="button" OnClick="Layer1.style.visibility='visible'" style="margin-left:30px"></td></tr> </table> </form> 2. 회원가입 폼 <form name="join" method="post" action="join.php"> <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tr><td height=30px></td></tr> <tr> <td colspan=3><span id="title1">회원가입</span></td> <td> <font color=red>*</font></td> <td><input class="text1" name=" "type=" " id=" "> </td> <td><input type="button" class="button" onclick="ID_check();" value="중복검사" /></td> <tr> <tr><td height=10px></td></tr> <td>NAME</td> <td><input class="text1" name="name"type="text" placeholder="NAME" id="name"></td> <td>PASSWORD<font color=red>*</font></td> <td><input class="text1" name="passwd"type="password" placeholder="PASSWORD" id="passwd"></td> <td>Confirm Password<font color=red>*</font></td> <td><input class="text1"name="passwd1"type="password" placeholder="Confirm Password" id="passwd1"></td> <tr> <td>PHONE</td> <td><input class="text1" type="tel" id="phone" name="phone" placeholder="Tel Number" pattern="[0-9]{11}" title="하이픈(-)을 제외한 11자리번호를 입력하세요"/></td> </tr> <tr><td height=20px colspan=2><font size=2pt color=red>*항목은 반드시 입력해주십시오</font></td></tr> <tr><td height=40px colspan=2></td></tr> <tr> <td colspan=3> <a href="javascript:join_check();" class="button">JOIN</a> <input class="button" type="button" value="BACK" OnClick="Layer1.style.visibility='hidden'" style="margin-left:30px"> </td> </table> </form>

18 4.기능별소스정리 Main.php ( video , audio ) 작성자 : 김현수 작성일 : 2012.12.09 관련소스
style.css (css 모음) login.php (로그인기능) Main.php ( video , audio ) 작성자 : 김현수 작성일 : Video 부분 sample버튼을 누를경우 새로운 레이어를 띄워준 후 id=player2 의 video객체를 생성한다.. Controls를 삽입하고 "movie/sample.mp4" 의 영상을 출력한다. 동영상 미지원시 멘트를 띄워준다., Audio 부분 id=player2 의 audio객체를 생성한다. Control은 없으며 autoplay 기능을 추가하여 접속시 자동으로 bgm을 재생시킨다. Video 부분 <!-- 동영상 샘플 시작 --> <div id="Layer3"> <video id ="player2"controls width="320" height="240"> <source src="movie/sample.mp4" type="video/mp4; codecs="avc1.4D401E, mp4a40.2""></source> 귀하의 브라우저가 영상을 지원하지 않습니다 </video></br> <a href="javascript:vstop();" class="button" OnClick="Layer3.style.visibility='hidden'">CLOSE</a> </div> <!-- 동영상 샘플 끝 --> <!-- 로그인후 설정 메인박스 시작 --> <table id="table1" cellspacing="0" cellpadding="0" border="0" > ….중략 <tr> <td id="input1" style="text-align:right;"><input type="checkbox" id="catmov" name="catmov"></td> <td width="5%"></td> <td style="text-align:left;" width=40% height=50px>고양이 동영상</td> <td style="text-align:left;" width=10%> <a href="javascript:stop();" OnClick="Layer3.style.visibility='visible'"><font size=1 color="black" >Sample</font></a></td> </table> <!-- 로그인후 설정 메인박스 끝 --> 2. Audio 부분 <audio id="player1" autoplay > <source src="bgm/bgm1.mp3 "></audio>

19 login.php ( login funtion )
4.기능별소스정리 관련소스 db_connect.php (db연결) login.php ( login funtion ) 작성자 : 김현수 작성일 : Query 전송부분 과 passwd를 받아와 쿼리문을 날려준다 (select * from users where ='$ ' and passwd='$passwd‘) 로그인실패 쿼리문으로 받아온 값을 확인하여 값이 하나도 없을 경우 회원이 없는경우임으로 입력정보를 확인하라는 메시지를 띄운 후 main.php로 이동시킨다. 로그인성공 쿼리문으로 받아온 값을 확인하여 값이 있을경우 세션에 값을 넣어준 뒤 main.php로 이동시킨다. <? set_time_limit(0); session_start(); ?> <html> <head> <title>- 야옹이 메일링 서비스 -</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> </head> <body> <?php include "db_connect.php"; // DB접근을 위한 파일 호출 //넘어온 값 $ = $_POST[' ']; $passwd = $_POST['passwd']; echo "$ "; echo "$passwd"; mysql_query('set names utf8'); mysql_query("set session character_set_connection=utf8;"); mysql_query("set session character_set_results=utf8;"); mysql_query("set session character_set_client=utf8;"); $sql=mysql_query("select * from users where ='$ ' and passwd='$passwd'"); $row=mysql_fetch_array($sql); //값이 일치하지 않을때 if(mysql_num_rows($sql) < 1){ ?> alert(‘입력정보를 다시 확인하세요'); <script type="text/javascript"> // 로그인 실패 location.href="main.php" </script> <? } 3 else{ //값이 일치하면 세션 생성 /****************************************/ $ =$row[ ]; $name=$row[name]; $phone=$row[phone]; $_SESSION[" "] = $ ; $_SESSION["PHONE"] = $phone; $_SESSION["NAME"] = $name; /****************************************/ ?> <script type="text/javascript"> // 로그인 성공 location.href="main.php" </script> <? } </body> </html> 1 2

20 join.php ( join funtion )
4.기능별소스정리 관련소스 db_connect.php (db연결) join.php ( join funtion ) 작성자 : 김현수 작성일 : ID 중복확인 를 받아와 이 존재하는지 확인한다 (select from users where = '$ ') 중복될경우는 전페이지로 이동, 아닐경우는 다음으로넘어간다. 로그인실패 수신한 값을 이용하여 sql문을 만든다 ("insert into users values ('$ ' , '$name' , '$passwd' , '$phone'); sql문을 전송 한 뒤 세션에 값을 넣고 main.php로 이동한다. 로그인성공 쿼리문으로 받아온 값을 확인하여 값이 있을경우 세션에 값을 넣어준 뒤 main.php로 이동시킨다. <? set_time_limit(0); session_start(); ?> <html> <head> <title>- 야옹이 메일링 서비스 -</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> </head> <body> extract(array_merge($_GET, $_POST)); include "db_connect.php"; // DB접속 if ($ == "" || $passwd == "" || $name == "") { // 외부에서 강제로 접속시 에러메시지 출력 echo "<script>alert('error1 - 잘못된 접근입니다.');history.back();</script>"; exit; } mysql_query('set names utf8'); mysql_query("set session character_set_connection=utf8;"); mysql_query("set session character_set_results=utf8;"); mysql_query("set session character_set_client=utf8;"); $sql = "select from users where = '$ '"; $query = mysql_query($sql); // 쿼리문 실행 if($row[ ] == $ ) { // 위의 쿼리문 결과가 있으면 (id 중복) echo "<script>alert('error2 - 이미 가입되어 있는 아이디입니다.');history.back();</script>"; // id중복 메시지 출력 // id가 중복되지 않았으면 $sql = "insert into users values ('$ ' , '$name' , '$passwd' , '$phone');"; echo "$sql"; $query = mysql_query($sql); // 쿼리문 실행 mysql_close ($connect); // DB접속 종료 $_SESSION[" "] = $ ; $_SESSION["phone"] = $phone; $_SESSION["name"] = $name; <script type="text/javascript"> alert("회원가입이 완료되었습니다."); location.href="main.php" </script> </body> </html> 1 2

21 logout.php ( logout funtion )
4.기능별소스정리 관련소스 - logout.php ( logout funtion ) 작성자 : 김현수 작성일 : 세션초기화 세션안에 있는 값을 null로 바꾼 뒤 main.php로 이동시킨다. <? set_time_limit(0); session_start(); $_SESSION[" "] = ''; $_SESSION["PHONE"] = ''; $_SESSION["NAME"] = ''; ?> <script type="text/javascript"> // 로그인 성공 location.href="main.php" </script> 1

22 logout.php ( logout funtion )
4.기능별소스정리 관련소스 - logout.php ( logout funtion ) 작성자 : 김현수 작성일 : <style> body { font-family: 'NanumGothic'; } .table1{ border-radius:40px 40px 40px 40px; border:7px solid #FFD8D8; background:#FFEAEA; text-align:center </style> </head> <body > <table class="table1" width=100% height=100% border=0 > <tr> <td> 중복검사</td> </tr> <td> <? if(mysql_num_rows($query) < 1) { ?> <?=$ ?>는 <br> 사용 가능한 아이디 입니다.<br> <? } else { ?> 사용중인 아이디 입니다.<br> <? } ?> </td> <td><input type="button" onclick="closing()" value="닫기" /></td> </table> </body> </html> 중복확인 받아온 값을 이용해 SQL문을 출력한다 (select from users where = '$ ‘) 결과값에 따른 출력 받아온값이 없을 경우 “사용한 아이디입니다. “를출력 없을경우 “사용중인 아이디입니다”. 를출력한다. <? include "db_connect.php"; // DB 접속 소스 include $ = $_GET[' ']; // 폼에서 받아온 id 값 $sql = "select from users where = '$ '";// 검색 쿼리문 작성 $query = mysql_query($sql); // 쿼리문 실행 //echo "$sql"; ?> <html> <head> <title>아이디 중복 확인</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script type="text/javascript"> function closing(){ self.close(); }; </script> <script> google.load( "webfont", "1" ); google.setOnLoadCallback(function() { WebFont.load({ custom: { families: [ "NanumGothic" ], urls: [ " ] }}); }); 1 2