본문 바로가기
HTML&CSS

로그인 <form > 연습 / JDK, 이클립스, Tomcat설치/

Linda~! 2020. 3. 4. 17:29

 

자바스크립트 연결 확인하기 위해 아래의 경고창이 뜹니다.

 

아무것도 입력하지 않고 로그인 버튼 클릭하면 아래처럼 경고창이 뜹니다.

 

아래에 코드가 있어요!

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function check() {
            alert("보이나요?");
            //자바스크립트에서 document는 html에서 body부분
            f = document.frm; 
            if(f.id.value==""){
                alert("아이디를 입력하세요.");
                return;
            }
        }
    </script>
</head>
<body>
  <h3>로그인 폼</h3>
  <form name="frm" method ="" action="">      
      <!--method 두가지있어요. 1.default는 get 방식 : 가져오는거(검색, 글읽기)/ 2.post 방식 : 넣는거(글쓰기,수정)-->
      <!--action 서버안에 어디에서 요청하고 응답받아올지 적어서 연결한다.-->
      
      ID : <input type="text" size="15" name="id" value=""><br>
      PWD : <input type="password" size="15" name="pwdword" value=""><br>
      <input type="submit" value="로그인" onclick="check()">
      <!--input태그 속성type default 값은 text입니다. 그래서 생략가능-->
      <!--input태그 속성 name은 반드시 value는 선택//왜 반드시 name을 하냐면 한페이지에 여러가지 폼이 있기때문에 구분하기위해서-->
  </form>  
</body>
</html>
 
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

아래와 같이 <form method="" action=""> 를 알아보기 위한 연습!

 

 

더보기

form에 action, method 이해를 위한 Server 설치 순서

 

1.JDK 설치
2.이클립스 설치
-javaw 위치 선택
-Eclipse IDE for Enterprise Java Developers
3.Tomcat 설치
-Host Manager
-Examples
-HTTP/Port : 80 수정
-JRE(JDK) 선택 : C:\Program Files\Java\jdk-11.0.1
-Manager App -> admin / 1234 -> Examples -> 
JSP Examples -> Numberguess execute
-------------------------------------------------------------
이클립스 실행
- Workspace는 디폴트 선택
- New -> Dynamic Web Project 선택
- Project name: myapp 입력 -> Finish 
- WebContent 밑에 main.jsp 만들기
- 실행 -> Apache Server 9.0 선택
(Always use this server... 선택)
- Apache Server 설치 위치 선택
C:\Program Files\Apache Software Foundation\Tomcat 9.0
-Font 세팅 : https://blog.naver.com/mk6322/221494590334
-실행 브라우저 선택 : Window - Web Browser -> 크롬 선택
-myapp에 옆에 오류 없애는 방법
 1.myapp에 오른쪽 마우스 선택
 2.Properties 선택
 3.Java Bulid Path -> Libraries -> Classpath -> Add Library -> Server Runtime -> Tomcat9.0 선택

 

아래에 loginProc.jsp 입니다.
아래에 loginProc.jsp2 입니다.
아래에 순서대로 코드가 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
    function loginChk() {
        f = document.frm;
        if(f.id.value==""||f.pwd.value==""){
            alert("ID와 PWD를 입력하세요.");
            return;
        }
        f.submit();
    }
</script>
</head>
<body>
<h3>로그인</h3>
<form name="frm" action="loginProc.jsp">
    ID : <input name="id"><br/>
    PWD : <input type="password" name="pwd"><br/>
    <input type="button" onclick="loginChk()" value="로그인">
</form><hr>
<form name="frm1" method="post" action="loginProc2.jsp">
ID : <input name="id"><br/>
PWD : <input type="password" name="pwd"><br/>
<input type="submit" value="로그인2">
</form><br/>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

1
2
3
4
5
6
7
8
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
 String id = request.getParameter("id");
 String pwd = request.getParameter("pwd");
%>
ID : <%=id%><br>
PWD : <%=pwd%><br>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
 String id = request.getParameter("id");
 String pwd = request.getParameter("pwd");
 //id : aaa, pwd : 1234
    if(id.equals("aaa")&pwd.equals("1234")){
        out.print("<b>"+id+"</br>"+"님 환영합니다.");
        out.print("<a href='#''>로그아웃</a>");
    }else{
    %>    
        <script>
        alert("입력하신 ID와 PWD는 일치 하지 않습니다.");
        location.href = "login.jsp";
        </script>
<%}%>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

'HTML&CSS' 카테고리의 다른 글

<form> 요소 종류들  (0) 2020.03.05
검색하기 <form method="get" action=""> //searching on  (0) 2020.03.04
<iframe>연습/<vedio>,<audio>/  (0) 2020.03.04
HTML 메타 데이터,<link>/<img>상대 경로, 절대 경로, URL/<ol><ul>/<table>/<a>/<iframe>  (0) 2020.03.04
HTML&CSS&Javascript로 글자에 마우스 올리면 사진 보이게 하기  (0) 2020.03.03

'HTML&CSS' Related Articles

티스토리툴바