본문 바로가기

국비과정/JAVA

20230629 _[20일차]_03. JAVA + HTML + CSS (로그인 구현)

이클립스에서 new - project - dynamic web project 생성

src - main - webapp - WEB-INF - lib 에 mariadb 다운로드 파일 넣기

webapp에서 JSP파일생성


** UTF-8 로 수정 주의 **

** ctrl + shift + ? : 주석 단축키 **

 

 

[ index.jsp ] _ 네이버 로그인 버튼생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>index페이지</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
button {
	background-color: #2DB400;
	width: 300px;
	height: 50px;
	border: 0px;
	color: white;
	font-size: 20pt;
	font-family: 'Nanum Gothic', sans-serif;
}
b{
	font-weight: bolder;
}
선택자{
	속성 : 값;
}
</style>
</head>
<body>
	<button onclick="location.href='./login.jsp'">
	<b>NAVER</b> 로그인
	</button>
</body>
</html>

 id = #

class = . 

* input type -> text, numbewr, password, button


 


[ loginAction.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	당신이 입력한 값은? <br>
	id : <%=request.getParameter("id") %> <br>
	pw : <%=request.getParameter("pw") %> <br>

</body>
</html>

 

( 자바코드로 변수 따로 생성 )

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");
%>

	당신이 입력한 값은? <br>
	id : <%=id %> <br>
	pw : <%=pw %> <br>

</body>
</html>

[ MemberDTO.jsp ]

 

* source - Generate getters and setters  => getter / setter 한꺼번에 생성

package com.poseidon.dto;

public class MemberDTO {
	private int mno, mgrade;
	private String mname, mid, mpw, mjoindate;

	public int getMno() {
		return mno;
	}

	public void setMno(int mno) {
		this.mno = mno;
	}

	public int getMgrade() {
		return mgrade;
	}

	public void setMgrade(int mgrade) {
		this.mgrade = mgrade;
	}

	public String getMjoindate() {
		return mjoindate;
	}

	public void setMjoindate(String mjoindate) {
		this.mjoindate = mjoindate;
	}

	public String getMname() {
		return mname;
	}

	public void setMname(String mname) {
		this.mname = mname;
	}

	public String getMid() {
		return mid;
	}

	public void setMid(String mid) {
		this.mid = mid;
	}

	public String getMpw() {
		return mpw;
	}

	public void setMpw(String mpw) {
		this.mpw = mpw;
	}
}

위에서 입력한 DTO의 정보(id, pw)를 loginAction 에서 불러오기

<%@page import="com.poseidon.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");

// DAO / DTO / DBConnection

MemberDTO dto = new MemberDTO();	// DTO 불러오기
dto.setMid(id);
dto.setMpw(pw);

%>

	당신이 입력한 값은?<br>
	id : <%=id %><br>
	pw : <%=pw %><br>

</body>
</html>

[ DBConnection.jsp ] _ 싱글톤 (p. 279)

package com.poseidon.dto;
// 이제 전설의 싱글턴을...

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConnection {
	// 싱글턴화 _ instance라는 객체를 생성_얘는 메소드영역(static)에 유일하게(singleton) 존재!
	private static DBConnection instance = new DBConnection();
	// 생성자 숨김
	private DBConnection() {}
	//딱 하나 만들어진 인스턴스 호출메소드
	public static DBConnection getInstance() {	
		return instance;	
	}
	
	
	public Connection getConnection() {
		Connection conn = null;
		
		try {
			Class.forName("org.mariadb.jdbc.Driver");	// forName으로 "~"패키지를 가져와서
			String url = "jdbc:mariadb://localhost:3306/choongang";
			conn = DriverManager.getConnection(url, "PHYHO", "0228");
			
		} catch (Exception e) {
			e.printStackTrace();
		} 
		
		return conn;
	}
}

* Connection은 public 인터페이스

Creates a {@code Statement} object for sending SQL statements to the database.

 

* DriverManager 는 Connection 안에 포함되어 있는 클래스

getConnection() 메소드로 가져온 정보들을(url, id, pw) 관리하는 역할..?

 

Connection 과 DriverManager와 getConnection() 는 같이 쓰이는 한팀!

 


[ MemberDAO.jsp ]

package com.poseidon.dao;

import java.beans.Statement;
import java.sql.Connection;
import java.sql.ResultSet;

import com.poseidon.dto.DBConnection;
import com.poseidon.dto.MemberDTO;

public class MemberDAO {
	// 로그인하는 메소드
	public MemberDTO login(MemberDTO dto) {
		MemberDTO result = new MemberDTO();
		// 접속정보 가져오기
		// DBConnection dbCon = new DBConnection();  -> 옛날방식?
		Connection conn = null;
		conn = DBConnection.getInstance().getConnection();	// *
			
		String sql = "SELECT * FROM member WHERE mid="+ dto.getMid();	// 요기부터는 다시
		Statement stmt = null;
		ResultSet rs = null;
		
		
		result.setMname("통신되었습니다.");
		
		return result;
	}
}

* 싱글톤으로 만들어준 DBConnection에 즉, instance에  getConnection() 메소드 기능을 실행.

                                                                             (url, id, pw 정보를 가지고 있는) conn을 return.

원래 새로 객체를 생성하면 다른 주소값을 가진 객체가 되는데 DBConnection 클래스는 싱글톤으로 생성해줬기 때문에

새로 생성하더라도 같은 정보를 공유.

 

* login 메소드의 매개변수로 MemberDTO dto를 가져왔을때  

즉, id와 pw를 받아왔을 때 일치한다면 MemberDTO 에 정보들을 불러와서 담을거!_------???


DAO loginAction 에서 불러오기

<%@page import="com.poseidon.dao.MemberDAO"%>
<%@page import="com.poseidon.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");

// DAO / DTO / DBConnection

MemberDTO dto = new MemberDTO();
dto.setMid(id);
dto.setMpw(pw);

//DAO불러오기
MemberDAO dao = new MemberDAO();
MemberDTO result = dao.login(dto);

%>

	당신이 입력한 값은?<br>
	id : <%=id %><br>
	pw : <%=pw %><br>
	통신 결과 <%=result.getMname() %>
    
</body>
</html>

 

MemberDAO 부터 다시 볼 예정~