부트캠프44일차(model1 )

JSP

부트캠프44일차(model1 )

동곤일상 2025. 4. 4. 17:39

오늘의 추천곡입니다

벚꽃이 많이 피고 있는것 같아요

그런데 여기에 박혀서 코딩이나하고있네요 하하ㅏ하하하하ㅏ하하

Flower

아티스트: 오반(OVAN)

앨범: 교회오빠

발매일: 2025.03.13

1) application객체 , out객체 , ,exception객체,upload정리

2) model1(회원가입 창 )

2-1)JDBC 연동 , 테이블 생성

2-2)JSP이용해 HTML문작성

2-3)Member , MemberDto 객체생성(자바소스)

2-4)DBConnection 클래스 (Connection)

3) 예제

1) application객체 , out객체 , ,exception객체,upload정리

1.application 객체: 웹 애플리케이션 별로 1개의 객체할당
웹애플리케이션의 모든jsp페이지는 같은 appliactino객체공유
==> application 영역

2. out 객체 : response 객체의 출력버퍼에 데이터전송할수있는 출력스트림객체
<%= str %> 을
<% out.println(str); %> 다음과같이사용가능

3.exception객체 : 오류페이지에 할당되는 객체

4.그외 : config(서블릿의 초기파라미터값) , page(this와 같은객체)

===업로드 =====
업로드 : 클라이언트의 파일을 서버로전송기능
<form enctype="multipart/form-data" method ="post">

요청된 페이지
request 객체로 파라미터조회 불가
cos.jar 파일의 MultipartRequest객체이용해
업로드파일 생성 , 파라미터값 조회가능

2) model1(회원가입 창 )

2-1)JDBC 연동 , 테이블 생성

mariadb-java-client-3.5.1.jar

0.70MB

드라이버

study.sql

create table member(
	id varchar(20) primary key,
	pass varchar(20),
	name varchar(20),
	gender int(1),
	tel varchar(15),
	email varchar(50),
	picture varchar(200)
);


select * from member;
desc member;

실행법 (RUN 이 아님)

다음과같이 DB에 생성된것을 확인가능

2-2)JSP이용해 HTML문작성

<!-- onsubmit : 나의 form 내부에 submit버튼 클릭되면

form 태그에 이벤트 발생(target == form)

return input_check(this) : input_check()함수 호출 , 매개변수this : form객체를 의미

-->

/model1Study/src/main/webapp/member/joinForm.jsp

입력을 받는 부분

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<!--  onsubmit :  나의 form 내부에 submit버튼 클릭되면 
			form 태그에 이벤트 발생(target == form)
return input_check(this) : input_check()함수 호출 , 매개변수this : form객체를 의미					
				-->
<form action="join.jsp" name="f" method="post" onsubmit="return input_check(this)">
	<input type="hidden" name="picture" value="">
	<table>
		<tr>
		<td rowspan="4" valign="bottom">
		<img src="" width="100" height="120"  id="pic"><br>
		<font size="1"><a href="javascript:win_upload()">사진등록</a></font>
		</td><th>아이디</th>
		<td><input tpye="text" name="id">
		<button type="button" onclick="idchk()">중복검색</button>
		</td></tr>
		<tr><th>비밀번호</th><td><input type="password" name="pass"></td></tr>
		<tr><th>이름</th><td><input type="text" name="name"></td></tr>
		<tr><th>성별</th>
		<td>
		<label for="gender1">남</label>
		<input type="radio" name="gender" id="gender1" value="1">
		<label for="gender2">여</label>
		<input type="radio" name="gender" id="gender2" value="2">
		</td></tr>
		<tr><th>전화번호</th><td colspan="2"><input type="text" name="tel"></td></tr>
		<tr><th>이메일</th><td colspan="2"><input type="text" name="email"></td></tr>
		<!-- button태그의 기본type : submit임 -->
		<tr><td colspan="3"><button>회원가입</button></td></tr>
	</table>
</form>
<script src="joinForm.js"></script>
</body>
</html>

입력값 검증 위한 JS

/model1Study/src/main/webapp/member/joinForm.js

/**
 * 입력값 검증 위한 JS
 */
function input_check(f){
	//f : <form...>
	//f.id : <input name="id">name이 id인태그
	if(f.id.value.trim() == ""){ 
		alert("아이디입력")
		f.id.focus(); //name이id인 곳에 포커스를 둠
		return false; //기본이벤트 취소
	}
	if(f.pass.value.trim() == ""){ 
		alert("비밀번호입력")
		f.pass.focus();
		return false; 
	}
	if(f.name.value.trim() == ""){ 
		alert("이름입력")
		f.name.focus();
		return false; 
	}
	return true;//아이디비번이름이 입력됐다면 true
}

join.jsp 생성(form 의action)

입력 후 submit 시 이동하는 곳

<%@page import="model.member.MemberDto"%>
<%@page import="model.member.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%-- 
	joinForm.jsp 에서 입력된값을 DB의 member테이블(위에서만듬)에 등록하기
	1.파라미터값을 Member 클래스객체 (자바소스 : /java/Member.java)에 저장
	2.Member객체를 DB에 insert  
	3.회원가입 성공 : loginForm.jsp로 이동  
	회원가입 실패 : joinForm.jsp페이지로 이동(잔류)
--%>

<%	
//1
request.setCharacterEncoding("UTF-8");
//Member클래스 : 파라미터의갯수와 같은 프로퍼티를 가진 Bean클래스
// DTO : 데이터를 DB에 전달하기위한 객체
Member mem = new Member();
mem.setId(request.getParameter("id")); /*요청으로받은 id를 Member객체의 id로 Setting*/
mem.setPass(request.getParameter("pass")); 
mem.setName(request.getParameter("name")); 
	//request.getParameter(x)의반환값 :String이므로 변환해줘야함
	//gender의 자료형 : int
mem.setGender(Integer.parseInt(request.getParameter("gender"))); 
mem.setTel(request.getParameter("tel")); 
mem.setEmail(request.getParameter("email")); 
mem.setPicture(request.getParameter("picture")); 
//=> mem 객체는 joinForm.jsp 페이지에서 입력한 값을 저장하고있는 객체

//2
MemberDto dto = new MemberDto();
String msg = "회원가입 실패";
String url = "joinForm.jsp";
if(dto.insert(mem)){  //MemberDto의 클래스메서드인 insert에 Member객체 넣어
	msg = "회원가입 성공";
	url = "loginForm.jsp"; //해당페이지로이동
}
%>
<script>
	alert("<%=msg%>");
	location.href="<%= url %>";
</script>

2-3) Member , MemberDto 객체생성(자바소스)

Bean 클래스
get 프로퍼티 : getxxx(){}=> get xxx프로퍼티
set 프로퍼티 : setxxx(){} => set xxx프로퍼티

model1Study/src/main/java/model/member/Member.java

package model.member;

/*
 DTO : 데이터를 DB에 전달해주는 객체
 Bean 클래스
  	get 프로퍼티 : getxxx(){}=> get xxx프로퍼티
  			
  	set 프로퍼티 : setxxx(){} => set xxx프로퍼티
 */
public class Member {
	private String id;
	private String pass;
	private String name;
	private int gender;
	private String tel;
	private String email;
	private String picture;
	
	//getter/setter , toString
	public String getId() {
		return id;
	}
	
	public void setId(String id) {
		this.id = id;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getGender() {
		return gender;
	}
	public void setGender(int gender) {
		this.gender = gender;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPicture() {
		return picture;
	}
	public void setPicture(String picture) {
		this.picture = picture;
	}
	@Override
	public String toString() {
		return "Member [id=" + id + ", pass=" + pass + ", name=" + name + ", gender=" + gender + ", tel=" + tel
				+ ", email=" + email + ", picture=" + picture + "]";
	}
	

}

DTO : 데이터를 DB에 전달해주는 객체

/model1Study/src/main/java/model/member/MemberDto.java

Connection : DB를 연결해주는 객체

pstmt.setString(1,A): sql의 첫번쨰 ?를 String형태의 A으로 설정

PreparedStatement : Sql을 DB에 전달하기위한 객체

psmt. executeupdate() : select문을 제외한 DML문 실행( 바뀐갯수반환)

package model.member;

import java.sql.Connection;
import java.sql.PreparedStatement;

import model.DBConnection;

public class MemberDto {

	public boolean insert(Member mem) {
		Connection conn= DBConnection.getConnection(); //DB와 연결하기위한 객체
		PreparedStatement pstmt = null;//SQL을 DB에전달하기위한 객체
		String sql = "insert into member(id,pass,name,gender,tel,email,picture)"
		+" values(?,?,?,?,?,?,?)"; //모든속성값을 넣는것이기때문에 굳이 속성명을 입력하지않아도됨
		
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, mem.getId());//첫번쨰값을 Member의 id로한다.
			pstmt.setString(2, mem.getPass());
			pstmt.setString(3, mem.getName());
			pstmt.setInt(4, mem.getGender());//gender의 자료형int
			pstmt.setString(5, mem.getTel());
			pstmt.setString(6, mem.getEmail());
			pstmt.setString(7, mem.getPicture());
			if(pstmt.executeUpdate()>0) { 
				//select을 제외한 쿼리문 실행(변경된 요소 수 반환)
				return true;
			}
			else return false;
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		finally {
			DBConnection.close(conn,pstmt,null); //항상 DB를 닫아줘야함
		}
		return false;
	}

}

2-4) DBConnection클래스(Connection)

( DB를 연결하기위한getConnection , close 메서드만 사용가능)

close는 DB문 실행 후 항상실행되어야함!!!!!!!!!!!!

C:\java\workspace\model1Study\src\main\java\model\DBConnection.java

package model;

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

public class DBConnection { 
	private DBConnection() {} //객체생성불가
	
	public static Connection getConnection() {
		Connection conn = null; //DB와연결해주는 객체
		try {
			Class.forName("org.mariadb.jdbc.Driver");
			conn = DriverManager.getConnection(
					"jdbc:mariadb://localhost:3306/gdjdb","gduser","1234");
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		return conn;
	}
	
	public static void close(Connection conn, Statement stmt , ResultSet rs) {
		try {
			if(rs != null) rs.close();
			if(stmt != null) stmt.close();
			if(conn != null) conn.close(); 
		}
		catch(Exception e) {
			e.printStackTrace();
		}
	}
}

ResultSet : select구문의 결과

1) executeUpdate() : select을 제외한 쿼리문 실행 후 변경요소의 갯수 리턴

2) executeQuery() : select문 실행 + select문의 결과를 담아주는 ResultSet 객체반환

Connection : DB와연결하기위한 객체

Statement : sql을 DB에 넣기위한 객체

3) 예제

form화면 ( 입력을 받는 화면 )

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방명록 글쓰기 화면</title>
<link rel="stylesheet" href="../css/main.css" >
<script type="text/javascript">
   function inputcheck(f) {
       if(f.writer.value == '') {
		   alert("방문자를 입력하세요");
		   f.writer.focus();
		   return false;
       }
       if(f.title.value == '') {
		   alert("제목 입력하세요");
		   f.title.focus();
		   return false;
       }
       if(f.content.value == '') {
		   alert("내용 입력하세요");
		   f.content.focus();
		   return false;
       }
       return true;
   }
</script>
</head>
<body>
<form action="test1.jsp" method="post" 
      onsubmit="return inputcheck(this)">
<table><caption>방명록쓰기</caption>
<tr><td>방문자</td><td><input type="text" name="writer"></td></tr>
<tr><td>제목</td><td><input type="text" name="title"></td></tr>
<tr><td>내용</td>
    <td><textarea rows="10" cols="60" name="content"></textarea></td></tr>
<tr><td colspan="2" align="center">
     <input type="submit" value="글쓰기"></td></tr>
</table></form></body></html>

코드를 보면 onsubmit을 통해 submit을 클릭 시

inputcheck(this)로 폼태그 전체를 test1.jsp로 넘김

1. book table 생성

2. testForm.jsp 페이지에서 전달한 파라미터를 Book 클래스를 이용하여

DB에 저장하기
BookDao.java클래스를 생성하여 db에 등록하기
3. 등록된 내용을 db에서 읽어 화면에 출력하기

book table 생성

book class 생성 (자바소스 )

public class Book {
	private String writer;
	private String title;
	private String content; 
    //getter , setter , toString을 구현했음
 }

bookDao 클래스 ( 데이터를 DB에 넘기기위한 객체)

insert메서드 : insert문 + boolean반환

print메서드 : select 문 + List 반환

package model.test0404;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import model.DBConnection;

public class BookDao {
	
	
	public static boolean insert(Book book) {	
		PreparedStatement psmt = null; //예외발생이생길수도있으니 빈껍데기만생성
		Connection conn = DBConnection.getConnection();//DB연결위한 객체
		String sql = "insert into book values(?,?,?)";
		
		try {
			psmt = conn.prepareStatement(sql);//sql을 DB에
			psmt.setString(1, book.getWriter());//첫번쨰?를 book의writer로생성
			psmt.setString(2, book.getTitle());
			psmt.setString(3, book.getContent());
			if(psmt.executeUpdate()>0) {
				return true; //업데이트가 진행됐으면 true
			}
			else {
				return false;  //안됐다면 false
			}
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		finally {
			DBConnection.close(conn, psmt, null);
			//모든것을 닫아준다
		}
		return false; //예외를 위한 반환값(실행안될것임)		
	}
 //-----------------------------------------------------------------------------
 
 //book객체를 담은 List를 반환
	public static List<Book> print(){
		ArrayList<Book> books = new ArrayList<Book>();
		//DB를 연결하기위한 방법
		PreparedStatement psmt = null;
		Connection conn = DBConnection.getConnection();
		String sql = "select * from book";
		try {
			psmt= conn.prepareStatement(sql);//sql을 DB에넣기
			ResultSet rs = psmt.executeQuery();
            //select문실행 + 결과를 ResultSet에 저장해 리턴
			
            //rs(select문의결과)를 다 돌때까지
			while(rs.next()) {
				Book book = new Book();
				book.setWriter(rs.getString(1));//rs의 1번째 컬럼값
				book.setTitle(rs.getString(2));
				book.setContent(rs.getString(3));
				books.add(book);
			}
			return books;
			
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		finally {
			DBConnection.close(conn, psmt, null);
		}
		return books;	//혹시나하는 예외 대비 
	}
}

test1.jsp ( 입력 후 제출시 넘어오는 페이지 (기능구현)

<%@page import="java.util.List"%>
<%@page import="model.test0404.BookDao"%>
<%@page import="model.test0404.Book"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%--  /webapp/test0404/test1.jsp
   
--%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방명록</title>
<%
    request.setCharacterEncoding("UTF-8"); //요청값의 인코딩
    Book book = new Book(); //Book객체생성
    //요청값의 name=writer인 파라미터값반환)
    book.setWriter(request.getParameter("writer")); 
    book.setTitle(request.getParameter("title"));
    book.setContent(request.getParameter("content"));
    BookDao dao = new BookDao();//데이터를 DB에넣기위한 클래스
    if(dao.insert(book)) { 
 
%>    	
</head>
<body><table border="1">
	<caption>현재 등록된 방명록</caption>
     <tr><td>이름</td><td><%=book.getWriter() %></td></tr>
     <tr><td>제목</td><td><%=book.getTitle() %></td></tr>
     <tr><td>내용</td><td><%=book.getContent() %></td></tr></table>

<%  } %> //삽입이 정상적으로 실행 시 현재 입력한값을 보여줌

<br><hr>
<h3>지금까지 등록된 방명록</h3>
<%
List<Book> list = dao.print();
//book객체에서 toString을 했으므로 요소들이 출력될것임
for(Book b : list){ 
%>   
<h2><%=b %></h2>
<%} %>

</body></html>

'JSP' 카테고리의 다른 글

부트캠프46일차 (delete , 사진등록 , id,pw찾기) (0)	2025.04.08
부트캠프45일차(로그인 , main , sitemesh , 회원목록 , updateForm) (0)	2025.04.07
부트캠프43일차(내장객체 , cookie ,JDBC) (0)	2025.04.03
부트캠프42일차 (JSP내장객체 request, response,pageContext,session) (1)	2025.04.02
부트캠프41일차(servelt , JSP) (0)	2025.04.01

현재글부트캠프44일차(model1 )

web동곤

백엔드위주

`, 유익, 기본, Method, 반복문, Easy, 메서드, 이클립스, 초보, 유익한, 기초, 인텔리제이, 꿀팁, Eclipse, 자바, 코딩, Spring, 스코프, java, 형변환,

Today :
Yesterday :

web동곤