gi_dor

브라우저에서 ID ,PW 입력받아 ID값 PW 값 브라우저에 띄우기 ? 본문

First/Spring

브라우저에서 ID ,PW 입력받아 ID값 PW 값 브라우저에 띄우기 ?

기돌 2023. 5. 4. 12:25

1. html 파일에서 ID 와 PW 를 입력후 로그인 버튼 실행시 Servlet 으로 입력한 ID , PW 값 띄우기

 

2. html 파일 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style> 
    fieldset{ width: 250px;height: 250px; border-width: 10px;}
    #button{ width: 100px; height: 50px; text-align: center; margin-left: 60px;}
    legend{text-align: center;}
    p{text-align: center;}
    #IDcheck{margin-left: 50px; }
    </style>
</head>
<body>
    <div>
    
    <form action="/Login" >  <!--여기 부분이 LoginServlet.java 파일과 연결 ? --->
       <fieldset>
        <legend>로그인 화면 </legend>
       
  <!-- name = id , pw 가 form action url로 들어감 -->
    <p> id <input type="text" name = "id"> </p>
    <p>pwd <input type="password" name = "pw" ></p> <br>
    <input type= "submit" id = "button"> <br><br>
   
    
</fieldset>
</div>
</body>
</html>

질문 1.

 <form action="/Login" > 
 <input type = "submit" id = "button" > <br><br>


무슨 관계이길래 제출 버튼을 클릭하게되면 /Login URL로 넘어가는걸까..
우선은 이유 따지지 말고 그냥 외우자

 

2023.07.27
type에 submit 은 무슨관계이길래 form 태그에 url로 갔냐고 ?
예를 들어 <button type= button >은 아무런 기능이 없는 그냥 버튼이다
하지만 <button type = submit> 은  클릭시 form 태그에 있는 action 에 있는 url로 이동하게 된다 .
action에 아무런 주소가 없다고 ? 그렇다면 현재 해당페이지로 요청하게된다.

그렇다며 type =button 은 어떻게 해야 url 이동하지 ?

간단하다 function list(){
location.href = "<c:url value="/bos/faqList"/>?page=${sc.page}&pageSize=${sc.pageSize}";
}

<button type = 'button' onclick=list() >
클릭시 JS코드에 적힌 url로 이동한다. 

질문 2.

어떻게 하면 브라우저에 '제출' 버튼을 로그인으로 바꿀수있을까 ?

기존코드
<input type = "submit" id = "button" > 

수정후 코드
<input type = "submit" id = "button" value ="로그인" >

3. LoginServlet.java 파일 작성

package com.jungsuk.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


// 1. @WebServlet 서블릿 3.0이상
// 2. @Controller , @RequestMApping 스프링

// 3. extends HttpServlet 상속 - 서블릿
// 4. 상속 없으면 스프링

// 5. 메인 메서드 이름이 service 는 서블릿
// 6. 메인 메서드 이름 상관없으면 스프링	



// 서블릿으로 만들기
// 로그인시 LoginServlet.java 로 가서 출력


@WebServlet("/Login") // 서블릿
					  // 프로그램등록+URL연결 @Controller + @RequestMapping 같은 일을 한다고함


public class LoginServlet extends HttpServlet{ // HttpServlet 상속받으면 서블릿
	public void service (HttpServletRequest request, HttpServletResponse response) 
			throws IOException{
				// Servlet은 메서드 이름 service 고정
		
		// 1. 입력	

		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
//		int iidd = Integer.parseInt(id);  id와 pw 값은 String형식이기 때문에 형변환 안함.
//		int pww = Integer.parseInt(pw);	형변환 하게되면 에러 !
		
		System.out.println("id = "+id);
		System.out.println("pw = "+ pw);

		
		// 2. 작업
		// 3. 출력
		
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		
		PrintWriter out = response.getWriter();
		
	
		out.println("<html>");
		out.println("<head>");
		out.println("</head>");
		out.println("<body>");
		out.println("<h1>ID :  "+id+"</h1>");
		out.println("<h1>PW :  "+pw+"</h1>");
		out.println("</body>");
		out.println("</html>");
		
		

	}

}

에러 1.

		// 입력 받은 값을 형변환 했을때 발생하는 에러
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		int iidd = Integer.parseInt(id);
		int pww = Integer.parseInt(pw);

해결방법
에러 메세지 Number FormatException For input string : "1q2w3e4r!"
"asdf" 문자열이 숫자 형식이 아닌데 , 문자열을 숫자로 변환하려고 시도하면 발생한다는 오류 라고한다

		String id = request.getParameter("id");
		String pw = request.getParameter("pw");

//		int iidd = Integer.parseInt(id);  id와 pw 값은 String형식이기 때문에 형변환 안함.
//		int pww = Integer.parseInt(pw);	형변환 하게되면 에러 !

	// 형변환 안하게 주석처리해버림..

 

헛짓 

관심사의분리 - MVC 패턴 - 공통코드의 분리 - 입력의분리 !!


@WebServlet("/Login") // 서블릿

public class LoginServlet extends HttpServlet{ // 상속받으면 서블릿
	public void service (String id , String pw, HttpServletResponse response) 
			throws IOException{
				// Servlet은 메서드 이름 service
				// HttpsServletRequest , HttpServletResponse 이거는 스프링매개변수
		
		// 1. 입력	

		// 공통 코드 분리 - 입력의 분리 나도 해보자!
        
//		String id = request.getParameter("id");
//		String pw = request.getParameter("pw");
		
		
//		int iidd = Integer.parseInt(id);  id와 pw 값은 String형식이기 때문에 형변환 안함.
//		int pww = Integer.parseInt(pw);	형변환 하게되면 에러 !

		
		System.out.println("id = "+id);
		System.out.println("pw = "+ pw);

		
		// 2. 작업
		// 3. 출력

		
		

	}

}

바로 에러 .. 405 허용되지 않는 메서드  GET을 지원 안한다길래 , html 파일에 <form> 태그를
POST 수정 해도 에러..

원인 :
교재에 나온 부분은 Spring 파트 관한 공통코드 - 입력의 분리 인데 현재 내가 작성한 코드는 Servlet...
수정해서 Spring 버전으로 만들어서 공통코드 분리 입력의 분리 해봐야겠다.

package com.jungsuk.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SpringLogin {
@RequestMapping("/SpringLogin")
public void SpringLogin(String id, String pw , HttpServletResponse response) 
		throws IOException{
	
	
	
	// 입력
//	String id = request.getParameter("id");
//	String pw = request.getParameter("pw");

	// 형변환 불필요
//	int ID = Integer.parseInt(id);
//	int PW = Integer.parseInt(pw);

	// 작업
	// 출력
	
	response.setContentType("text/html");
	response.setCharacterEncoding("utf-8");
	PrintWriter out	= response.getWriter();
	
	out.println("<html>");
	out.println("<head>");
	out.println("</head>");
	out.println("<body>");
	out.println("<h1>ID :  "+id+"</h1>");
	out.println("<h1>PW :  "+pw+"</h1>");
	out.println("</body>");
	out.println("</html>");
	
	}
}

 

기존 Servlet 에서 Spring으로 바뀌면서 변한 부분

1. @ 어노테이션의 변화
2. 메서드의 이름이 바뀜 

@WebServlet("/Login") 
public class LoginServlet extends HttpServlet{ 
	public void service (HttpServletRequest request, HttpServletResponse response) 
			throws IOException{

 

@Controller
public class SpringLogin {
@RequestMapping("/SpringLogin")
public void SpringLogin(String id, String pw , HttpServletResponse response) 
		throws IOException{ } }

 

728x90
저작자표시 비영리 변경금지

'First > Spring' 카테고리의 다른 글

게시판 - 삭제 remove() // 공지사항 글 삭제  (0) 2023.07.18
FAQ 게시판 만들기 - 타입 선택시 해당 타입의 글만 보이게 하기  (0) 2023.07.11
spring 게시판 페이지 이동 pageHandler << < > >>  (0) 2023.06.24
SqlSession 메서드 - mapper.xml 작성시 주의!!  (0) 2023.06.23
쿠키  (0) 2023.05.13
'First/Spring' Related Articles more