본문 바로가기
Back/SQL(DB)

Day23_html, CSS, 서버, DB 간의 관계성

by uxia 2023. 6. 14.

우선 새로운 프로젝트를 생성해준다.

 

이클립스에서 Cmd + N을 눌러 새로운

Dynamic Web Project를 생성해준다.

이름은 Web001로 설정했다.

 

Java Resources에 src 우클릭 → package 생성 → com.multi.mvc001

을 해주고, 강사님이 올려주신

html, css파일인 WebContent 파일들을 복붙해줬다.

html을 제외한 jsp파일들은 지워주고

index.html을 첫 페이지로 하여 톰캣 서버를 실행시켜준다.

 

요렇게 브라우저에서 실행된다.

 

 

* 동기식 통신 : 브라우저에 주소를 넣어주면, 브라우저가 서버로

주소와 같이 데이터를 http로 만들어서 요청을 보낸다.

 

여기서 브라우저의 주소를 넣는 방법은

<a></a> 태그와 <form></form> 태그 두 가지다.

 

jsp를 만들어볼건데,

jsp는 Java Server Page의 약자로 동적인 웹 페이지를 생성하는 데 사용된다.

 

1. form 안에서 입력해서 서버로 전달할 값을 받아와서 ram(변수)에 저장

    2. 받은 데이터를 가지고 sql문 만들어서 db 서버로 전송

    3. 브라우저에게 결과가 어떻게 되었는 지 알려줘야 함(only html)

 

이걸 가능하게 해주는 게 jsp의 역할이다.

 

 

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

<% %> 안에 작성한 자바는 백엔드 부분이라

우리가 브라우저에서 확인할 수 없기 때문에 아래 html에

<body bgcolor = "lightgrey">
	요청에 대한 응답이 들어가는 부분<br>
	서버로 전달된 id : <%= id %> <br>
	서버로 전달된 pw : <%= pw %> <br>
	서버로 전달된 name : <%= name %> <br>
	서버로 전달된 tel : <%= tel %> <br>

브라우저에서 확인 할 수 있도록 추가해줬다.

 

 

여기까지 동작 방식을 체크하기 위한 과정이었는데,

index2.html에 같은 방법으로 입력한 데이터 값이 뜨도록 해본다.

 

 

아래와 같이 코드를 입력해주고 서버를 실행시키니

정상적으로 브라우저에 떴다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%
    String no = request.getParameter("no");
    String title = request.getParameter("title");
    String content = request.getParameter("content");
    String writer = request.getParameter("writer");
    
    %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor = "black" text = "white">
	요청에 대한 응답 : <br>
	서버로 전달된 no : <%= no %> <br>
	서버로 전달된 title : <%= title %> <br>
	서버로 전달된 content : <%= content %> <br>
	서버로 전달된 writer : <%= writer %> <br>
</body>
</html>

 

 

 

다음으로 WebContent 폴더에 Cmd + N 해서

dbTest라는 이름의 jsp 파일을 추가해준다.

 

 

 

 

mysql jar 파일 위치 보고싶으면 Option + Enter

 

 

이제 DB 연결을 해줘야하는데,

1. 드라이버 설정

2. DB 연결

3. SQL문 생성

4. SQL문 전송

의 과정을 거쳐야 한다.

 

우선 DB 연결까지 해서 연결된 것을 브라우저에서 확인할 수 있도록 해줬다.

<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%
    //  스크립트릿
    //	== JDBC 프로그래밍
    //	1. 드라이버 설정
    Class.forName("com.mysql.cj.jdbc.Driver");
    //  out객체 : 내장된 객체, PrintWriter
    out.print("1. 드라이버 설정 성공");
    String url = "jdbc:mysql://localhost:3306/shop?serverTimezone=UTC";
    String user = "root";
    String password = "1234";
    //	2. DB 연결 - url(ip + port + db명), id, pw
    
    // jsp에서 import 단축키 : Cmd + Shift + M
    Connection con = DriverManager.getConnection(url, user, password); //Connection
    out.print("2. DB 연결 성공"); 
    
    //	3. sql문 생성
    String sql = "insert into member values ('win', 'win', 'win', '015')";
    //  위의 String은 자바에서는 sql문으로 인식을 못함
    //  -> sql문에 해당하는 부품으로 만들어줘야 함
    //  PreparedStatement --- sql
    PreparedStatement ps = con.prepareStatement(sql);
    out.print("3. sql문 생성 성공");
    
    //	4. sql문 전송
    ps.executeUpdate();
    out.print("4. sql문 전송 성공");
    
    %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

Connection 부분에 빨간 줄로 오류가 생겼는데 해당 부분에 커서를 두고

Cmd + Shift + M 단축키를 눌러 java.sql.Connection import를 생성해주면 해결된다.

 

dbTest에 있던 <% %> 안 코드를 복사해서

insert.jsp파일에 붙여넣었다.

    //	1. 드라이버 설정
    Class.forName("com.mysql.cj.jdbc.Driver");
    //  out객체 : 내장된 객체, PrintWriter
    out.print("1. 드라이버 설정 성공");
    String url = "jdbc:mysql://localhost:3306/shop?serverTimezone=UTC";
    String user = "root";
    String password = "1234";
    //	2. DB 연결 - url(ip + port + db명), id, pw
    
    // jsp에서 import 단축키 : Cmd + Shift + M
    Connection con = DriverManager.getConnection(url, user, password); //Connection
    out.print("2. DB 연결 성공"); 
    
    //	3. sql문 생성
    String sql = "insert into member values ('win', 'win', 'win', '015')";
    //  위의 String은 자바에서는 sql문으로 인식을 못함
    //  -> sql문에 해당하는 부품으로 만들어줘야 함
    //  PreparedStatement --- sql
    PreparedStatement ps = con.prepareStatement(sql);
    out.print("3. sql문 생성 성공");
    
    //	4. sql문 전송
    ps.executeUpdate();
    out.print("4. sql문 전송 성공");

그럼 Connection, DriverManager, PreparedStatement에서

오류가 발생하는데 dbTest파일의 가장 상단의 부분을 복사해서

insert.jsp 파일의 최상단에 붙여넣어주면 오류가 사라진다.

<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>

 

 

다음으로 44열의 괄호 안의 'win', 'win', 'win', '015'부분을

물음표로 바꿔주고 아래의 코드를 추가해준다.

 

얼마의 값이 입력될 지 예측되지 않는 부분들에 대해 물음표로 변경해주는 것이다.

    //	3. sql문 생성
    String sql = "insert into member values (?, ?, ?, ?)";
    //  위의 String은 자바에서는 sql문으로 인식을 못함
    //  -> sql문에 해당하는 부품으로 만들어줘야 함
    //  PreparedStatement --- sql
    PreparedStatement ps = con.prepareStatement(sql);
    ps.setString(1, id);
    ps.setString(2, pw);
    ps.setString(3, name);
    ps.setString(4, tel);
    
    out.print("<br>3. sql문 생성 성공");

보기 편하게 <br>을 추가해서 정리를 좀 해줬고,

서버를 실행시키면 다음과 같이 뜬다.

 

DBeaver에서도 확인해보면

입력한 값이 DB에 저장된 걸 확인할 수 있다.

 

여러 번 반복하면서 복습하다보니 좀 여러번 찍혔다..😅

 

 

추가로 페이지에 이미지도 넣어봤다.

WebContent에 img 폴더를 생성하고 mac.JPG 이름의 이미지를 추가해줬다.

그리고 insert.html파일의 </a> 밑 라인에 아래 코드를 추가해준다.

	<img src="img/mac.jpg" width="300" height="300">
	<!--form의 action은 무조건 jsp파일이되어야만 함. -->
	<form action="insert.jsp">

 

이미지가 들어가긴 했는데 무슨 이유인지 사진이 뜨진 않았다.

아마 아무 이미지나 넣어서 오류가 난 듯 하다.

 

아무튼 복습 끝👍

'Back > SQL(DB)' 카테고리의 다른 글

Day48_무료로 SQL 공부 및 실습하기  (0) 2023.07.05
Day44_DB Schema스키마  (0) 2023.07.02
Day30_MySQL 연결 끊어짐  (0) 2023.06.20
Day22_DBeaver 설치 및 세팅, MySQL 연결, Tool 사용법  (0) 2023.06.13
Day19_#8 IntelliJ DB테이블과 SQL  (0) 2023.06.07

관련글

티스토리툴바