웹마스터 팁
자바스크립트로 여러개 아이디 로그인 하기
2002.09.17 14:38
wing님께서 문의 하셨던 자바스크립트로 여러개 아이디 로그인 하는 소스를 공개합니다.
이 소스의 원래 근천은 "자스코"이며, 여러 user에 의해 약간 수정되었습니다.
현재 저의 옛날 홈페이지 http://manitocity.com.ne.kr/index.html 에서 확인 할수 있습니다.
일단 로그인을 만들려면 여러개의 프레임이 있어야 하고, 여러개의 문서가 필요 하오니, 저의 강의를 따라오시면 되겠습니다.
1) 프레임을 나누기
- 현재 http://manitocity.com.ne.kr/index.html 이 홈페이지처럼 구현을 해봅시다. 이 홈페이지는 cgi이나 php,asp를 모르는 분을 위하여 자바스크립트로 여러개의 아이디로 로그인을 할수있는 홈페이지로 구현을 해놓은겁니다. 2001년 학교 축제에 내놓았던 홈페이지기도 하죠^^
1> 두 프레임으로 나눕시다. <frameset></frameset> 태그로 두 프레임을 나누는데요..^^
현재 http://manitocity.com.ne.kr/index.html 에서 나눠진 프레임 소스는 아래와 같습니다.
아래와 같이 소스를 index.html 파일에 삽입을 하여 주시고요.. 환경설정을 하기위해 폴더를 menu와 main이라는 폴더를 생성하여 주세요...
<!--
만든이: ljsgood1004@hanmail.net
-->
<Html>
<Head>
<Title>(::::[Html+JavaScript]::::)</Title>
<Meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<Frameset cols="148,*" frameborder="0" border="0" marginwidth="0" marginheight="0" framespacing="0" Style="border-color:#000000;border-width:2pt;border-style:solid">
<Frame src="./menu/index.html" name="menu" scrolling="no" noresize>
<Frame src="./main/index.html" name="main" scrolling="auto">
</Frameset>
</Head>
<Noframes>
<Body>
<P align="center">This page uses frames, but your browser doesn't support them.</P>
</Body>
</Noframes>
</Html>
2> 일단 프레임이 2개로 나눠져있기 때문에, 가장 중심부인 왼쪽 로그인 메뉴를 꾸며 봅시다.
1>번에서 소스를 index.html에서 삽입을 하여 저장후 웹에 올리셨다면, 프레임이 2개로 나눠져 있을것입니다.
2>번 과정에서 하고자 하는 일은, 웹사이트 로그인을 하는 메뉴를 만들고 자 합니다. 간단한 form태그와 input태그의 조합이고, table태그로 정리를 해 놓은것입니다. 아래의 소스는 http://manitocity.com.ne.kr/index.html 에서 사용하는 소스이므로, 그대로 사용하셔도 좋습니다. menu폴더에 html파일을 생성하여 저장합시다.
<!--
만든이: ljsgood1004@hanmail.net
-->
<Html>
<Head>
<Title>(::::[Html+JavaScript]::::)</Title>
<Meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
<!--
Body,select {font-size:10pt;font-family:굴림,굴림체;scrollbar-face-color:#ffffff;scrollbar-shadow-color:#5f5f5f; scrollbar-highlight-color:#5f5f5f;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-track-color: #ffffff;scrollbar-arrow-color:#5f5f5f}
Td {font-size:9pt;font-family:새굴림}
.ad{color:black;background-color:white;border:1 solid black}
.adb{color:black;background-color:white;border:1 solid black}
.adf{color:black;background-color:#fff8dd;border:1 solid black}
A:link {color:#0000ff;text-decoration:none;font-family:굴림,굴림체}
A:visited {color:#000000;text-decoration:none;font-family:굴림,굴림체}
A:active {color:red;font-family:굴림,굴림체}
A:hover {color:red;text-decoration:underline;font-family:굴림,굴림체}
-->
</style>
<script>
<!--
function Login() {
if (document.login.username.value=="") {
alert("아이디를 입력하지 않았습니다. 아이디를 입력하여 주십시오!");
document.login.username.focus(); //history.foward(-1);
return false;
}
if (document.login.password.value=="") {
alert("비밀번호를 입력하지 않았습니다. 비밀번호를 입력하여 주십시오!");
document.login.password.focus(); //history.go(-1);
return false;
}
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="guest" && password=="guest") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/guest/guest.html"; done=1;}
if (username=="manitocity" && password=="0427000") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/manitocity/manitocity.html"; done=1;}
if (username=="kkuell1" && password=="glacejin") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/kkuell1/kkuell1.html"; done=1;}
if (done==0) {alert("Invalid login!");}
}
function change(s) {
if(s.selectedindex !=0){
parent.main.location=s.options[s.selectedIndex].value
}
}
//-->
</script>
</Head>
<Body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" topmargin="10" bottommargin="10" leftmargin="10" rightmargin="10" bgcolor="#ffffee" text="#000000" link="#0000EE" vlink="#1A8B55" alink="#FF0000">
<Div align="center">
<Form name="login" method="post" action="#" enctype="multipart/form-data"> <!--text/plain-->
<!--로그인 테이블-->
<Table border="1" align="center" cellpadding="1" cellspacing="1" width="125" height="0" Style="border-color:#000000;border-width:1pt;border-style:solid">
<Tr>
<Td align="center" width="100%" height="0" colspan="4" bgcolor="#fed74e" Style="border-color:#000000;border-width:1pt;border-style:solid">
<span style="background-color:yellow"><a href="../main/index.html" target="main" title="처음으로...">회원 로그인</a></span>
</Td>
</Tr>
<Tr>
<Td align="center" width="25%" height="0" bgcolor="#fee89c" Style="cursor:hand;border-color:#000000;border-width:1pt;border-style:solid" title="I.D">I.D</Td>
<Td align="center" width="75%" height="0" valign="middle" bgcolor="#fff8dd" Style="border-color:#000000;border-width:1pt;border-style:solid">
<input type="mage" value="" name="username" size="10" maxlength="10" onBlur="this.className='adb'" onFocus="this.className='adf'" class="ad" Style="cursor:text;color:#5c3327;">
</Td>
</Tr>
<Tr>
<Td align="center" width="25%" height="0" bgcolor="#fee89c" Style="cursor:hand;border-color:#000000;border-width:1pt;border-style:solid" title="password">P.D</Td>
<Td align="center" width="75%" height="0" valign="middle" bgcolor="#fff8dd" Style="border-color:#000000;border-width:1pt;border-style:solid">
<input type="password" value="" name="password" size="10" maxlength="10" onBlur="this.className='adb'" onFocus="this.className='adf'" class="ad" Style="cursor:text;color:#5c3327;"></Td>
</Tr>
<Tr>
<Td align="center" width="100%" height="0" colspan="4" bgcolor="#fed74e" Style="border-color:#000000;border-width:1pt;border-style:solid">
<input type="button" onclick="javascript:Login()"
style=border-color:#b0b0b0;background-color:#3d3d3d;color:#ffffff;font-size:8pt;font-family:Tahoma;height:20px; value="확인">
<input type="reset" style=border-color:#b0b0b0;background-color:#3d3d3d;color:#ffffff;font-size:8pt;font-family:Tahoma;height:20px; value="취소">
<input type="button" style=border-color:#b0b0b0;background-color:#3d3d3d;color:#ffffff;font-size:8pt;font-family:Tahoma;height:20px; value="신고" onclick="window.open('../members/password_false.html','main');">
</Td>
</Tr>
</Table>
<!--/로그인 테이블-->
</Form>
</Div>
</Body>
</Html>
3> 여기서 꼭 설정 해야하는 것이 있습니다.
<script>
function Login() {
if (document.login.username.value=="") {
alert("아이디를 입력하지 않았습니다. 아이디를 입력하여 주십시오!");
document.login.username.focus(); //history.foward(-1);
return false;
}
if (document.login.password.value=="") {
alert("비밀번호를 입력하지 않았습니다. 비밀번호를 입력하여 주십시오!");
document.login.password.focus(); //history.go(-1);
return false;
}
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="guest" && password=="guest") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/guest/guest.html"; done=1;}
if (username=="manitocity" && password=="0427000") {window.alert("안녕하세요? '+ '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/manitocity/manitocity.html"; done=1;}
if (username=="kkuell1" && password=="glacejin") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/kkuell1/kkuell1.html"; done=1;}
if (done==0) {alert("Invalid login!");}
}
</script>
여기서 말이죠..^^ if (username=="guest" && password=="guest") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/guest/guest.html"; done=1;} 이 부분이 로그인을 하기 위한 user방인데요;; username은 로그인 아이디 password는 로그인을 할려는 비번.. href뒤의 url은 로그인후 이동할 페이지
2) 왼쪽 로그인을 만들었습니다. 오른쪽 main 폴더에 문서를 집어 넣으시고 만들 면 되겠네요;;
이렇게 로그인 소스를 만들어 보았습니다. 더욱더 알고 싶다고요? nzeo의 mysql 용량을 줄이고자 글을줄입니다.
나중에 제가 zip파일로 소스를 몽땅 압축하여 공개하겠습니다. 그럼~~ wing님 많은 도움이 되기를~~
이 소스의 원래 근천은 "자스코"이며, 여러 user에 의해 약간 수정되었습니다.
현재 저의 옛날 홈페이지 http://manitocity.com.ne.kr/index.html 에서 확인 할수 있습니다.
일단 로그인을 만들려면 여러개의 프레임이 있어야 하고, 여러개의 문서가 필요 하오니, 저의 강의를 따라오시면 되겠습니다.
1) 프레임을 나누기
- 현재 http://manitocity.com.ne.kr/index.html 이 홈페이지처럼 구현을 해봅시다. 이 홈페이지는 cgi이나 php,asp를 모르는 분을 위하여 자바스크립트로 여러개의 아이디로 로그인을 할수있는 홈페이지로 구현을 해놓은겁니다. 2001년 학교 축제에 내놓았던 홈페이지기도 하죠^^
1> 두 프레임으로 나눕시다. <frameset></frameset> 태그로 두 프레임을 나누는데요..^^
현재 http://manitocity.com.ne.kr/index.html 에서 나눠진 프레임 소스는 아래와 같습니다.
아래와 같이 소스를 index.html 파일에 삽입을 하여 주시고요.. 환경설정을 하기위해 폴더를 menu와 main이라는 폴더를 생성하여 주세요...
<!--
만든이: ljsgood1004@hanmail.net
-->
<Html>
<Head>
<Title>(::::[Html+JavaScript]::::)</Title>
<Meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<Frameset cols="148,*" frameborder="0" border="0" marginwidth="0" marginheight="0" framespacing="0" Style="border-color:#000000;border-width:2pt;border-style:solid">
<Frame src="./menu/index.html" name="menu" scrolling="no" noresize>
<Frame src="./main/index.html" name="main" scrolling="auto">
</Frameset>
</Head>
<Noframes>
<Body>
<P align="center">This page uses frames, but your browser doesn't support them.</P>
</Body>
</Noframes>
</Html>
2> 일단 프레임이 2개로 나눠져있기 때문에, 가장 중심부인 왼쪽 로그인 메뉴를 꾸며 봅시다.
1>번에서 소스를 index.html에서 삽입을 하여 저장후 웹에 올리셨다면, 프레임이 2개로 나눠져 있을것입니다.
2>번 과정에서 하고자 하는 일은, 웹사이트 로그인을 하는 메뉴를 만들고 자 합니다. 간단한 form태그와 input태그의 조합이고, table태그로 정리를 해 놓은것입니다. 아래의 소스는 http://manitocity.com.ne.kr/index.html 에서 사용하는 소스이므로, 그대로 사용하셔도 좋습니다. menu폴더에 html파일을 생성하여 저장합시다.
<!--
만든이: ljsgood1004@hanmail.net
-->
<Html>
<Head>
<Title>(::::[Html+JavaScript]::::)</Title>
<Meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
<!--
Body,select {font-size:10pt;font-family:굴림,굴림체;scrollbar-face-color:#ffffff;scrollbar-shadow-color:#5f5f5f; scrollbar-highlight-color:#5f5f5f;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#ffffff;scrollbar-track-color: #ffffff;scrollbar-arrow-color:#5f5f5f}
Td {font-size:9pt;font-family:새굴림}
.ad{color:black;background-color:white;border:1 solid black}
.adb{color:black;background-color:white;border:1 solid black}
.adf{color:black;background-color:#fff8dd;border:1 solid black}
A:link {color:#0000ff;text-decoration:none;font-family:굴림,굴림체}
A:visited {color:#000000;text-decoration:none;font-family:굴림,굴림체}
A:active {color:red;font-family:굴림,굴림체}
A:hover {color:red;text-decoration:underline;font-family:굴림,굴림체}
-->
</style>
<script>
<!--
function Login() {
if (document.login.username.value=="") {
alert("아이디를 입력하지 않았습니다. 아이디를 입력하여 주십시오!");
document.login.username.focus(); //history.foward(-1);
return false;
}
if (document.login.password.value=="") {
alert("비밀번호를 입력하지 않았습니다. 비밀번호를 입력하여 주십시오!");
document.login.password.focus(); //history.go(-1);
return false;
}
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="guest" && password=="guest") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/guest/guest.html"; done=1;}
if (username=="manitocity" && password=="0427000") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/manitocity/manitocity.html"; done=1;}
if (username=="kkuell1" && password=="glacejin") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/kkuell1/kkuell1.html"; done=1;}
if (done==0) {alert("Invalid login!");}
}
function change(s) {
if(s.selectedindex !=0){
parent.main.location=s.options[s.selectedIndex].value
}
}
//-->
</script>
</Head>
<Body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" topmargin="10" bottommargin="10" leftmargin="10" rightmargin="10" bgcolor="#ffffee" text="#000000" link="#0000EE" vlink="#1A8B55" alink="#FF0000">
<Div align="center">
<Form name="login" method="post" action="#" enctype="multipart/form-data"> <!--text/plain-->
<!--로그인 테이블-->
<Table border="1" align="center" cellpadding="1" cellspacing="1" width="125" height="0" Style="border-color:#000000;border-width:1pt;border-style:solid">
<Tr>
<Td align="center" width="100%" height="0" colspan="4" bgcolor="#fed74e" Style="border-color:#000000;border-width:1pt;border-style:solid">
<span style="background-color:yellow"><a href="../main/index.html" target="main" title="처음으로...">회원 로그인</a></span>
</Td>
</Tr>
<Tr>
<Td align="center" width="25%" height="0" bgcolor="#fee89c" Style="cursor:hand;border-color:#000000;border-width:1pt;border-style:solid" title="I.D">I.D</Td>
<Td align="center" width="75%" height="0" valign="middle" bgcolor="#fff8dd" Style="border-color:#000000;border-width:1pt;border-style:solid">
<input type="mage" value="" name="username" size="10" maxlength="10" onBlur="this.className='adb'" onFocus="this.className='adf'" class="ad" Style="cursor:text;color:#5c3327;">
</Td>
</Tr>
<Tr>
<Td align="center" width="25%" height="0" bgcolor="#fee89c" Style="cursor:hand;border-color:#000000;border-width:1pt;border-style:solid" title="password">P.D</Td>
<Td align="center" width="75%" height="0" valign="middle" bgcolor="#fff8dd" Style="border-color:#000000;border-width:1pt;border-style:solid">
<input type="password" value="" name="password" size="10" maxlength="10" onBlur="this.className='adb'" onFocus="this.className='adf'" class="ad" Style="cursor:text;color:#5c3327;"></Td>
</Tr>
<Tr>
<Td align="center" width="100%" height="0" colspan="4" bgcolor="#fed74e" Style="border-color:#000000;border-width:1pt;border-style:solid">
<input type="button" onclick="javascript:Login()"
style=border-color:#b0b0b0;background-color:#3d3d3d;color:#ffffff;font-size:8pt;font-family:Tahoma;height:20px; value="확인">
<input type="reset" style=border-color:#b0b0b0;background-color:#3d3d3d;color:#ffffff;font-size:8pt;font-family:Tahoma;height:20px; value="취소">
<input type="button" style=border-color:#b0b0b0;background-color:#3d3d3d;color:#ffffff;font-size:8pt;font-family:Tahoma;height:20px; value="신고" onclick="window.open('../members/password_false.html','main');">
</Td>
</Tr>
</Table>
<!--/로그인 테이블-->
</Form>
</Div>
</Body>
</Html>
3> 여기서 꼭 설정 해야하는 것이 있습니다.
<script>
function Login() {
if (document.login.username.value=="") {
alert("아이디를 입력하지 않았습니다. 아이디를 입력하여 주십시오!");
document.login.username.focus(); //history.foward(-1);
return false;
}
if (document.login.password.value=="") {
alert("비밀번호를 입력하지 않았습니다. 비밀번호를 입력하여 주십시오!");
document.login.password.focus(); //history.go(-1);
return false;
}
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="guest" && password=="guest") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/guest/guest.html"; done=1;}
if (username=="manitocity" && password=="0427000") {window.alert("안녕하세요? '+ '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/manitocity/manitocity.html"; done=1;}
if (username=="kkuell1" && password=="glacejin") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/kkuell1/kkuell1.html"; done=1;}
if (done==0) {alert("Invalid login!");}
}
</script>
여기서 말이죠..^^ if (username=="guest" && password=="guest") {window.alert("안녕하세요? '"+document.login.username.value+"'님 로그인에 성공하였습니다.");window.location.href="../members/guest/guest.html"; done=1;} 이 부분이 로그인을 하기 위한 user방인데요;; username은 로그인 아이디 password는 로그인을 할려는 비번.. href뒤의 url은 로그인후 이동할 페이지
2) 왼쪽 로그인을 만들었습니다. 오른쪽 main 폴더에 문서를 집어 넣으시고 만들 면 되겠네요;;
이렇게 로그인 소스를 만들어 보았습니다. 더욱더 알고 싶다고요? nzeo의 mysql 용량을 줄이고자 글을줄입니다.
나중에 제가 zip파일로 소스를 몽땅 압축하여 공개하겠습니다. 그럼~~ wing님 많은 도움이 되기를~~
댓글 5
-
ZipShin
2002.09.17 21:13
필요없다고 생각하는 소스 지웠습니다. -
뒹굴리스트
2002.09.17 17:25
소스가.....;;
필요없는 것들까지 함께 올라왔네요;; -
wing
2002.09.19 13:44
열라 감사
이거 필요했는데 -
ZipShin
2002.12.27 20:38
-_- wing님 많은도움이 되었으면 ..ㅋㅋ -
김민환
2006.10.21 16:44
저는 잘못된 구문오류인가? 그렇게 뜨던데요;;;;;
줄 86/문자1
에서 에러가난거라 생각이 되는데
어떻게 된건지;;??? 도와주세요;;;
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 개판 오분전 넷 비디오 [1] | 미친개 | 2002.09.19 |
| 타이틀 바 마퀴 소스 [2] | 미친개 | 2002.09.18 |
| 자바스크립트로 여러개 아이디 로그인 하기 [5] | ZipShin | 2002.09.17 |
| 원하는곳에 배경그림고정 [1] | 아벨라 | 2002.09.17 |
| 문서중 http://***.*** 에 자동링크 - 이제 서버측에서 하지 마세요.. [9] | 정명주 | 2002.09.04 |
| [re] 문서중 http://***.*** 에 자동링크 ~ 저도 한번 해봤습니다.. [3] | 점퍼워니 | 2002.09.05 |
| 브라우저 언어에 따라 다른 페이지 보이기 [11] | 써니얌 | 2002.09.03 |
| 접속하자 마자 풀스크린으로 바뀌는 홈페이지만들기 [20] | 노명수 | 2002.09.02 |
| [기본] 글씨 꾸미기 ^ㅡ^; [13] | 현 | 2002.08.24 |
| 원하는 위치에서 스크롤바를 부드럽게 따라다님 [10] | ▩윤미 | 2002.08.20 |
| NZEO의 좌측 이동메뉴를 구현해 보자. (이동 On/Off 기능 포함) [43] | steelheart | 2002.08.20 |
| ★랜덤으로 음악 재생하기★ [23] | 뽀유♡ | 2002.08.16 |
| 개판 오분전 브레인 써바이벌 [19] | 미친개 | 2002.08.14 |
| [로그인] 자바스크립트로 여러개 로그인하기 [10] | ZipShin | 2002.08.13 |
| 랜덤으로 바뀌는 배경이미지 [11] | ZipShin | 2002.08.13 |
| 랜덤으로 배경음악 지정하기. [5] | ZipShin | 2002.08.13 |
요일마다 지정된 태그 나타나게 하기
[1]
 | Eccen | 2002.08.13 |
| 허접 자바스크립트강의 - 4 - [8] | 홍윤식 | 2002.08.10 |
|
개판 오분전 칼라팔레트
[5]
| 미친개 | 2002.08.08 |
| 허접 자바스크립트 강의 - 3 - [6] | 홍윤식 | 2002.07.31 |