220 likes | 349 Views
Project No2 20071843 김현수. 최종 작성일 : 2012-12-06. 목 차. 초기컨샙 초기 UI 완성 UI 기능별 소스설명. 1. 초기컨샙. 최종 작성일 : 2012-12-06. 1. 컨샙. 고양이 관련 사진 메일링 홈페이지 핑크색톤 페이지 하나에 레이어를 이용하여 현 트렌드인 새창을 띄우지않고 많은내용을 보여주는 방식을 사용. 2. 초기 UI. 최종 작성일 : 2012-12-06. 2. UI. Main.html ( 로그인 전 ). 관련소스
E N D
Project No2 20071843 김현수 최종 작성일 : 2012-12-06
목차 • 초기컨샙 • 초기UI • 완성UI • 기능별 소스설명
1.초기컨샙 최종 작성일 : 2012-12-06
1. 컨샙 • 고양이 관련사진 메일링 홈페이지 • 핑크색톤 페이지 하나에 레이어를 이용하여 현 트렌드인새창을띄우지않고많은내용을 보여주는 방식을 사용.
2.초기UI 최종 작성일 : 2012-12-06
2. UI Main.html ( 로그인 전) 관련소스 - DB_Login.php ( DB로그인 기능 ) - Join.php ( 회원가입 창 ) 작성자 : 김현수 작성일 : 2012.12.03 • 첫페이지 • 전체 : 나눔고딕웹폰트 • ① 로그인박스 • 위치를 CSS 를 이용하여 가운데 배치 • ② 사운드 재생기능 • ( HTML5 Audio 사용 ) • ③ 로그인기능 • DB_Login에 값을 넘겨서 로그인 성공시캐쉬를 저장 • 로그인박스의 내용을 메일링 설정화면으로 변경 • ④ 회원가입버튼 • 작은새창으로Join.php를 띄운다. • 회원가입이 성공하면 창을 닫는다. • ⑤ 관리자에게 메일보내기 • HTML5 이메일 기능을 이용. 고양이 메일링 서비스 ① LOGIN E-mail PW ③ ④ Login Join ② ⑤ SoundOn / Off 관리지에게메일보내기
2. UI Main.html ( 로그인 후) 관련소스 - 작성자 : 김현수 작성일 : 2012.12.03 • 로그인 후 페이지 • 전체 : 나눔고딕웹폰트 • 캐쉬에 회원정보를 저장 • ① 설정박스 • ‘Welcome xxx’ 의 xxx는 유저이름 • ② 체크박스 ( 실제 기능 X ) 고양이 메일링 서비스 ① Welcome XXX Mailing Setting ② 고양이사진 고양이 동영상 고양이 그림 설정완료 ② SoundOn / Off 관리지에게메일보내기
2. UI Join.html ( 회원가입) 관련소스 - DB_Join.php 작성자 : 김현수 작성일 : 2012.12.03 로그인 후 페이지 전체 : 나눔고딕웹폰트 ① 로그인 폼 Email – input id : mail type : email Passward input id : pw type : email Name input id : name type : text Phone input id : num type : tel + 전화번호 검사기능 CSS – input 디자인을 꾸미고 로그인 박스의 배경,위치설정 ② 가입버튼 버튼클릭시 빈칸을 확인하여 *부분이 빈칸일 경우 알림창을 띄움 조건이 만족할 경우 DB_Join.php에 값을 넘김 회 원 가 입 ① Email* Passward* Name Phone *항목은 반드시 입력해주십시오 ② 가입하기
3.완성UI 최종 작성일 : 2012-12-06
3. 완성UI • 관련소스 • style.css (css모음) • login.php (로그인기능) Main.php( 로그인 전 1)(참고ppt에 나온 세션 및 쿠키를 사용하기 위해 HTML->PHP로 변경) 작성자 : 김현수 작성일 : 2012.12.09 • 공통사항 : 나눔고딕웹폰트사용 • Content Box- div class=content;- css : 가운데위치정렬border-radius을 주어 둥근사격형을 만듬- 세션으로 구분하여 로그인후에는 설정창으로 변경됨 • 고양이그림+말풍선- 1번 박스 밑에 그림을 깔아 해상도에 따라 고양이가 박스위로 올라오는현상을 대처- 말풍선은CSS를 사용(.arrow_box)- 로그인전 후를 세션으로 문구를바꾼다. • 제목포인트를 주기위해‘나눔손글씨’웹폰트를 사용 • ID를 E-MAIL로 사용한 로그인창을 구성바로하단에는로그인버튼과 가입버튼이 위치함버튼은 이미지대신 CSS를 사용(.button)‘LOGIN’버튼을 누를시‘login_check()’ 스크립트로 검사후‘login.php’로 이동‘JOIN’버튼을 누를시새로운레이어를 출력(다음페이지에 설명) • 관리자에게 메일보내기mailto기능을 사용. • 음악재생기능HTML5 Audio로 구현 ON (‘play()’ 스크립트로 연결 – 재생)OFF (‘pause()’ 스크립트로 연결 – 정지)▲ ( 리스트레이어출력– 다음페이지에 상세설명 2 1 3 4 6 5
3. 완성UI • 관련소스 • style.css ( css모음 ) • join.php ( 가입기능 ) • idCheck.php ( e-mail 중복검사 ) Main.php( 로그인 전 2 – JOIN 버튼을 누를시) 작성자 : 김현수 작성일 : 2012.12.09 • 공통사항 : 나눔고딕웹폰트사용 • Body - 배경지정 (bg.png 패턴) • Layer1( JoinForm Layer )- 전페이지에Join버튼에 OnClick를 받아서 Layer1을 ‘hidden’ -> ‘visible’로변경하여 창을 띄워준다.- ‘중복검사’를 누르면 가입가능한E-Mail를 확인한다. ( idCheck.php )- ‘JOIN’ 버튼을 누르면 ‘join_check()’ 로 이동한 뒤 입력내용을 검사한 후 ‘join.php’ 로값을 넘긴다. • Layer2( PlayList Layer )- 총3개의 배경음중 선택한 배경음을 재생시켜준다. 1 2 3
3. 완성UI • 관련소스 • logout.php( 로그아웃 기능 ) Main.php( 로그인 후 ) 작성자 : 김현수 작성일 : 2012.12.09 • 공통사항 : 나눔고딕웹폰트사용 • 고양이그림+말풍선로그인후 세션에서 이름을 가져와 출력시킨다. • Content 박스 변경세션에 값이 있을경우 박스의 내용을 변경하여 출력한다. • Sample 텍스트버튼Sample버튼을 누를경우5번창 레이어를visitily시킨다. • Logout , Sava 버튼Logout 버튼을 누를경우logout.php로 이동하여 세션을 초기화시킨다SAVA버튼을 누를경우에는check_save()를 실행시킨다. • 동영상셈플Layer3번 버튼을 누르면 5번창이 가운데 출력이된다. 동영상은 Video테그를 사용하였으며 Close버튼을 누를경우레이어가Hidden된다. 1 5 2 3 4
3. 완성UI • 관련소스 idCheck.php( 로그인 전 -> 중복검사 누를시) 작성자 : 김현수 작성일 : 2012.12.09 • 공통사항 : ‘닫기’버튼을 누를시창이닫힘회원가입페이지에서 받아온 E-mail 값을php로 가져와 검사한다. • 사용불가능한 아이디일 경우사용불가능하다는 메시지를 띄워준다 • 사용가능한 아이디 일 경우사용가능하다는 메시지를 띄워준다. 2 1
4.기능별 소스설명 최종 작성일 : 2012-12-06
4.기능별소스정리 • 관련소스 • style.css (css모음) Main.php ( 세션 및 레이어) 작성자 : 김현수 작성일 : 2012.12.09 • 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 href="mailto:kimgiml@gmail.com"><font 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> 크롬 개발자옵션 화면
4.기능별소스정리 • 관련소스 • style.css (css모음) • login.php (로그인기능) Main.php ( 스크립트 구분 ) 작성자 : 김현수 작성일 : 2012.12.09 • 로그인체크로그인시 E-mail과 비밀번호가 입력이 되어있는지를 확인한 후 입력이 되어있을 경우 login.php에 값을 넘겨 접속한다. • ID중복체크E-mail값이 입력되어있나 확인한후window.open() 메소드를 이용하여 값을 넘길때submit 로넘기지 않고 주소명뒤에‘?변수명=값’을 이용하여 값을 넘겨준다. • 회원가입체크 필수요소인 ID와 비밀번호를 확인한 후 비밀번호와 비밀번호 확인란이 일치하나 확인 후, submit으로 넘긴다. • 음악재생기능play() – audio를 가져와 play시킨다.stop() – audio를 가져와 pause시킨다.change_music(i) 매개변수 i를 이용하여 음악파일을 구분한 뒤, 음악을 재생시킨다. 3. 회원가입체크 function join_check(){ if(document.join.email.value==''){ alert(' E-MAIL를 입력하세요.'); document.join.email.focus(); return false; }else if(document.join.passwd.value==''){ alert('비밀번호를 입력하세요'); document.join.passwd.focus(); return false; }else if(document.join.passwd.value!=document.join.passwd1.value){ alert('비밀번호가 일치하지 않습니다.'); document.join.passwd.focus(); return false; }else{ document.join.submit(); //join.php로 전송 } } 4. 음악재생기능 function play(){ var control = document.getElementById("player1"); control.play(); } function stop(){ var control = document.getElementById("player1"); control.pause(); } function change_music(i){ var control = document.getElementById("player1"); if(i=='1'){control.src="bgm/bgm1.mp3"; control.load(); control.play(); }else if(i=='2'){control.src="bgm/bgm2.mp3"; control.load(); control.play(); }else if(i=='3'){control.src="bgm/bgm3.mp3"; control.load(); control.play(); } } 1. 로그인 체크 function login_check(){ if(document.login.email.value==''){ alert(' E-MAIL를 입력하세요.'); document.login.email.focus(); return false; }else if(document.login.passwd.value==''){ alert('비밀번호를 입력하세요'); document.login.passwd.focus(); return false; }else{ document.login.submit(); //login.php로 전송 } } 2. ID중복체크 function ID_check(){ if(document.join.email.value==''){ alert(' E-MAIL를 입력하세요.'); document.join.email.focus(); return false; }else{ window.open("idCheck.php?email="+document.join.email.value,"new", "width=236, height=135, left=30, top=30, scrollbars=no,titlebar=no,status=no,resizable=no,fullscreen=no"); } }
4.기능별소스정리 • 관련소스 • style.css (css모음) • login.php (로그인기능) Main.php ( form 부분 ) 작성자 : 김현수 작성일 : 2012.12.09 • 공통사항 : 비밀번호는 type=“password”를 두어 입력시 비밀번호를 가리도록 하였다. • 로그인 폼id=email , passwd에 이메일과 비밀번호를 받은 뒤 LOGIN버튼에 login_check() 메소드를 불러와 사용한다. • 회원가입 폼각각 ID에 값을 받은 뒤 JOIN버튼을 누를시join_check() 메소드를 불러와 사용한다.전화번호의 경우 " type="tel" 을 두고 페턴을 두어 –(하이픈)을 사용하지 않도록 하였다. <td>E-MAIL<font color=red>*</font></td> <td><input class="text1" name="email"type="email" placeholder="ID@DOMAIN.COM" id="email"> </td> <td><input type="button" class="button" onclick="ID_check();" value="중복검사" /></td> <tr> <tr><td height=10px></td></tr> <tr> <td>NAME</td> <td><input class="text1" name="name"type="text" placeholder="NAME" id="name"></td> <tr> <tr><td height=10px></td></tr> <tr> <td>PASSWORD<font color=red>*</font></td> <td><input class="text1" name="passwd"type="password" placeholder="PASSWORD" id="passwd"></td> <tr> <tr><td height=10px></td></tr> <tr> <td>Confirm Password<font color=red>*</font></td> <td><input class="text1"name="passwd1"type="password" placeholder="Confirm Password" id="passwd1"></td> <tr> <tr><td height=10px></td></tr> <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> </tr> </table> </form> 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="email" id="email" name="email" placeholder=" ID@DOMAIN.COM" width=50% class="text1"></td> <td><tr> <td style="text-align:right;" width=45% height=50px>PASSWARD</td> <td width="5%"></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> </tr> <tr><td height=30px></td></tr> <tr>
4.기능별소스정리 • 관련소스 • style.css (css모음) • login.php (로그인기능) Main.php ( video , audio ) 작성자 : 김현수 작성일 : 2012.12.09 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>
4.기능별소스정리 • 관련소스 • db_connect.php (db연결) login.php ( login funtion ) 작성자 : 김현수 작성일 : 2012.12.09 Query 전송부분email과 passwd를 받아와 쿼리문을 날려준다(select * from users where email='$email' and passwd='$passwd‘) 로그인실패쿼리문으로 받아온 값을 확인하여 값이 하나도 없을 경우 회원이 없는경우임으로 입력정보를 확인하라는 메시지를 띄운 후 main.php로 이동시킨다. 로그인성공쿼리문으로 받아온 값을 확인하여 값이 있을경우 세션에 값을 넣어준 뒤 main.php로 이동시킨다. 3 <? 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접근을 위한 파일 호출 //넘어온 값 $email = $_POST['email']; $passwd = $_POST['passwd']; echo "$email"; 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 email='$email' and passwd='$passwd'"); $row=mysql_fetch_array($sql); //값이 일치하지 않을때 if(mysql_num_rows($sql) < 1){ ?> alert(‘입력정보를 다시 확인하세요'); <script type="text/javascript"> // 로그인 실패 location.href="main.php" </script> <? } else{ //값이 일치하면 세션 생성 /****************************************/ $email=$row[email]; $name=$row[name]; $phone=$row[phone]; $_SESSION["EMAIL"] = $email; $_SESSION["PHONE"] = $phone; $_SESSION["NAME"] = $name; /****************************************/ ?> <script type="text/javascript"> // 로그인 성공 location.href="main.php" </script> <? } ?> </body> </html> 1 2
4.기능별소스정리 • 관련소스 • db_connect.php (db연결) join.php ( join funtion ) 작성자 : 김현수 작성일 : 2012.12.09 ID 중복확인 email를 받아와 email이 존재하는지 확인한다(select email from users where email = '$email')중복될경우는전페이지로 이동, 아닐경우는다음으로넘어간다. 로그인실패수신한 값을 이용하여 sql문을 만든다("insert into users values ('$email' , '$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 ($email == "" || $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 email from users where email = '$email'"; $query = mysql_query($sql); // 쿼리문 실행 if($row[email] == $email) { // 위의 쿼리문 결과가 있으면 (id 중복) echo "<script>alert('error2 - 이미 가입되어 있는 아이디입니다.');history.back();</script>"; // id중복 메시지 출력 exit; } // id가 중복되지 않았으면 $sql = "insert into users values ('$email' , '$name' , '$passwd' , '$phone');"; echo "$sql"; $query = mysql_query($sql); // 쿼리문 실행 mysql_close ($connect); // DB접속 종료 $_SESSION["email"] = $email; $_SESSION["phone"] = $phone; $_SESSION["name"] = $name; ?> <script type="text/javascript"> alert("회원가입이 완료되었습니다."); location.href="main.php" </script> </body> </html> 1 2
4.기능별소스정리 관련소스 - logout.php ( logout funtion ) 작성자 : 김현수 작성일 : 2012.12.09 세션초기화세션안에 있는 값을 null로 바꾼 뒤 main.php로 이동시킨다. 1 <? set_time_limit(0); session_start(); $_SESSION["EMAIL"] = ''; $_SESSION["PHONE"] = ''; $_SESSION["NAME"] = ''; ?> <script type="text/javascript"> // 로그인 성공 location.href="main.php" </script>
4.기능별소스정리 관련소스 - logout.php ( logout funtion ) 작성자 : 김현수 작성일 : 2012.12.09 E-mail중복확인받아온 값을 이용해 SQL문을 출력한다(select email from users where email = '$email‘) 결과값에 따른 출력받아온값이 없을 경우 “사용한 아이디입니다. “를출력없을경우“사용중인 아이디입니다”. 를출력한다. <style> body { font-family: 'NanumGothic'; } .table1{ border-radius:40px 40px 40px40px; border:7px solid #FFD8D8; background:#FFEAEA; text-align:center } </style> </head> <body > <table class="table1" width=100% height=100% border=0 > <tr> <td>E-MAIL 중복검사</td> </tr> <tr> <td> <? if(mysql_num_rows($query) < 1) { ?> <?=$email?>는 <br> 사용 가능한 아이디 입니다.<br> <? } else { ?> <?=$email?>는 <br> 사용중인 아이디 입니다.<br> <? } ?> </td> </tr> <tr> <td><input type="button" onclick="closing()" value="닫기" /></td> </tr> </table> </body> </html> <? include "db_connect.php"; // DB 접속 소스 include $email = $_GET['email']; // 폼에서 받아온 id 값 $sql = "select email from users where email = '$email'";// 검색 쿼리문 작성 $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: [ "http://fontface.kr/NanumGothic/css" ] }}); }); </script> 1 2