AWS 클라우드환경 네이티브 수업 79일차
진행
1. 데이터 베이스(Datebase)와 자바(Java)의 연결 ( 9/7 참고, 이어지는 내용 이므로 )
2. HTML
요약
1. 데이터 베이스(Datebase)와 자바(Java)의 연결
(Java에서 SQL문을 직접 작성해서 데이터 뽑아내기, SQL 데이터를 뽑아내는 패널까지 만들기)
2. HTML
(Apache Tomcat 다운 및 설치, HTML의 구조, HTML 요소의 구조, HTML 각종 설정 및 프로젝트 만들기 / 기본 예제 1, 2)
데이터 베이스(Datebase)와 자바(Java)의 연결
Java에서 SQL문을 직접 작성해서 데이터 뽑아내기
package db;
import java.sql.Connection;
import java.sql.*;
import java.util.Scanner;
public class SelectDisplay {
public static void main(String[] args) {
// DB에 연결된 상태(세션)을 담을 객체
Connection conn = null;
// SQL문을 나타내는 객체
Statement stmt = null;
// 쿼리문을 실행한 결과를 담을 객체
ResultSet rs = null;
// 테이블의 메타데이터를 가리키는 객체
ResultSetMetaData rsmd = null;
Scanner query = new Scanner(System.in);
// =======================================================
// 쿼리문 구동 구문
// =======================================================
try {
String sql = " ";
int cols = 0;
System.out.println("Select 쿼리문을 작성하렴");
System.out.println("; 를 붙이지 마세오");
System.out.print(" SQL > ");
sql = query.nextLine();
// 드라이버를 로딩하고, DB에 접속한다.
conn = DBConnection.getConnection();
// 접속한 곳에 쿼리를 사용할 준비를 한다.
stmt = conn.createStatement();
// 준비한 질문을 실행 시키고, 결과값을 ResultSet에 넣는다.
rs = stmt.executeQuery(sql);
// 메타데이터를 가져온다.
rsmd = rs.getMetaData();
// 컬럼의 갯수를 알아낸다.
cols = rsmd.getColumnCount();
System.out.println("\n\t");
for(int i = 1; i<= cols; i++) {
System.out.print( rsmd.getColumnName(i) + "\t\t");
}
System.out.println();
// 구분선 "=====... " 출력
for(int i = 1; i<= cols*15; i++) {
System.out.print("=");
}
System.out.println();
// 데이터를 뽑아내는 구문
while(rs.next()) {
System.out.println("\t");
for(int i = 1; i <= cols; i++) {
System.out.print(rs.getString(i) + "\t\t");
}
System.out.println();
}
} catch(SQLException sqle) {
System.out.println("Select 문에서 예외가 발생했습니다.");
} catch(Exception e) {
e.printStackTrace();
}
finally {
// DB 연결을 종료하기 전에 열려진 자원을 닫느다.
try {
if(rs != null) rs.close();
if(stmt != null) stmt.close();
if(conn != null) conn.close();
} catch (Exception e) {
throw new RuntimeException(e.getMessage());
}
}
}
}
위처럼 SQL > 에 원하는 쿼리문을 적으면 연결된 DB에서 데이터들을 뽑아낼 수 있다.
뽑아낸 결과물은 조절해서 이쁘게 만들기 나름이다.
데이터를 뽑아내는 구문에서
While 안의 rs.next() 는 DB 데이터 표를 기준으로 아랫줄로 이동을 하는 것인데
아래로 이동이 가능하다는 말은 데이터가 존재한다는 말이기 때문에
While 조건문에서 true로 반환하면 뽑아낼 데이터가 있다는 말이므로 While문을 동작시키게 해도 된다.
SQL 데이터를 뽑아내는 패널까지 만들기
아래에 메타데이터라는 주석이 나온다.
메타데이터는 데이터에 대한 구조화된 데이터.
즉, 목적에 의해 데이터를 가공할 수 있게 하는 인덱스 역할을 하는 데이터를 말한다.
package db;
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.sql.*;
public class ScottTbSwing extends JFrame{
// 작업 영역
Container contentPane;
// 테이블 선택
JRadioButton[] radioTb = new JRadioButton[3];
// 테이블 목록
static String[] tbNames = {"EMP","DEPT","SALGRADE"};
// 쿼리를 실행한 결과를 보여줄 영역
static JTextArea tbView = new JTextArea(24, 100);
static JLabel viewLabel;
// 쿼리를 직접 작성하는 영역
static JTextField sqlEdit;
// 생성자
ScottTbSwing(){
setTitle("Scott Schema Table 조회");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// 작업 영역을 알아낸다.
contentPane = getContentPane();
// 데이터 결과창 폰트 및 색상 설정
tbView.setBackground(Color.YELLOW);
tbView.setFont(new Font("Serif", Font.PLAIN, 22));
// 작업영역에 tbView Panel을 부착한다.
contentPane.add(new TbViewPanel(), BorderLayout.CENTER);
setSize(1700, 800);
setLocation(100,100);
setVisible(true);
} // End - 생성자
// =========================================================================
// 화면창 구성 구문
// =========================================================================
class TbViewPanel extends JPanel {
JButton btnSQL;
// 테이블을 선택하는 라디오 버튼들, 쿼리문 입력, 쿼리 실행 버튼
JPanel radioPanel = new JPanel();
// Select 한 결과를 보여주는 View
JPanel viewPanel = new JPanel();
// 생성자
TbViewPanel(){
// 버튼 그룹 객체 생성
ButtonGroup tableGrp = new ButtonGroup();
for(int i = 0; i < radioTb.length; i++) {
// 라디오 버튼 생성
radioTb[i] = new JRadioButton(tbNames[i]);
// 첫번째 라디오 버튼을 선택된 상태로 설정한다.
if(i == 0) radioTb[0].setSelected(true);
// 버튼 그룹에 생성한 라디오 버튼을 장착한다.
tableGrp.add(radioTb[i]);
// 패널에 버튼을 장착한다.
radioPanel.add(radioTb[i]);
}
// 쿼리문을 적는 공간
sqlEdit = new JTextField(60);
sqlEdit.setBackground(Color.GREEN);
sqlEdit.setFont(new Font("Arial", Font.BOLD+Font.ITALIC, 18));
radioPanel.add(sqlEdit);
btnSQL = new JButton("SQL");
// btnSQL 버튼에 ActionListener를 등록
btnSQL.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
if(radioTb[0].isSelected()) { // emp Table
selectTable(0);
} else if(radioTb[1].isSelected()) { // dept Table
selectTable(1);
} else if(radioTb[2].isSelected()) { // Salgrade Table
selectTable(2);
}
}
});
// 패널에 버튼 추가
radioPanel.add(btnSQL);
// 패널에 결과창 추가
radioPanel.add(tbView);
// 결과창에 스크롤 추가
add(new JScrollPane(tbView));
contentPane.add(radioPanel, BorderLayout.NORTH);
} // End - 생성자
} // End - class TbViewPanel extends JPanel
// =========================================================================
// DB 데이터 구문
// =========================================================================
public static void selectTable(int selectTb) {
// DB에 연결된 상태(세션)을 담을 객체
Connection conn = null;
// SQL문을 나타내는 객체
PreparedStatement pstmt = null;
// 쿼리문을 실행한 결과를 담을 객체
ResultSet rs = null;
// 테이블의 메타데이터를 가리키는 객체
ResultSetMetaData rsmd = null;
try {
String sql = "";
// .equals() => 괄호 안의 있는 데이터와 값이 같으냐?
// 쿼리문 공간에 문장 친게 없느냐?
// 문장이 있으면 문장을 불러오고
// 문장이 없으면 선택된 테이블의 모든 데이터를 가져오자
if(!sqlEdit.getText().equals("")) sql = sqlEdit.getText();
else sql = "Select * From " + tbNames[selectTb];
// 드라이버를 로딩하고, DB에 접속한다.
conn = DBConnection.getConnection();
// 접속한 곳에 쿼리를 사용할 준비를 한다.
pstmt = conn.prepareStatement(sql);
// 준비한 질문을 실행 시키고, 결과값을 ResultSet에 넣는다.
rs = pstmt.executeQuery();
// 메타데이터를 가져온다.
rsmd = rs.getMetaData();
// Select 된 컬럼의 갯수를 알아낸다.
int cols = rsmd.getColumnCount();
// 컬럼 전체의 길이
int spLength = 0;
// 컬렁명을 출력한다.
for(int i = 1; i <= cols; i++) {
tbView.append(" \t " + rsmd.getColumnName(i) + "\t");
// rsmd.getColumnDisplaySize(i) : 컬럼의 길이
spLength = spLength + rsmd.getColumnDisplaySize(i);
}
tbView.append("\n");
// 구분선 "=====..." 를 출력
spLength = spLength + 15 * rsmd.getColumnCount();
for(int i = 0 ; i < spLength; i++) {
tbView.append("=");
}
tbView.append("\n");
// 쿼리의 실행결과로 반환된 데이터를 출력한다.
while(rs.next()) { // row
for(int i = 1; i <= cols ; i++){ // column
tbView.append("\t" + rs.getString(i) + "\t");
}
tbView.append("\n");
}
// 구분선 "-----..." 를 출력
for( int i = 0 ; i < spLength*1.7 ; i++) {
tbView.append("-");
}
tbView.append("\n");
} catch(SQLException sqle) {
System.out.println("Select 문에서 예외가 발생했습니다.");
} catch(Exception e) {
e.printStackTrace();
}
finally {
// DB 연결을 종료하기 전에 열려진 자원을 닫느다.
try {
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
} catch (Exception e) {
throw new RuntimeException(e.getMessage());
}
}
} // End - public static void selectTable(int selectTb)
public static void main(String[] args) {
new ScottTbSwing();
}
} // End - public class ScottTbSwing extends JFrame
아래처럼 SQL문을 적지 않았다면
테이블 하나의 버튼을 누르고 SQL 버튼을 누르면 해당 데이터의 모든 정보가 나온다.
SQL문을 따로 적었다면 해당 구문이 실행된다.
HTML
우리는 HTML5로 실습할 것이다.
Apache Tomcat 다운 및 설치
구글에서 Apache Tomcat을 검색 - 사이트 왼쪽의 Download에서 Tomcat 9 클릭
아래의 부분에서 다운로드 후 보이는 대로 그냥 쓰~윽 진행하면 된다.
단, 저장 경로는 기억해둘 것.
HTML (HyperText Markup Language)이란?
웹페이지의 디자인과 배치와 기능을 결정하는 것에 사용되는 마크업 언어.
(나중에 배울 CSS는 배치된 것들의 디자인을 담당한다.)
대소문자를 가리지 않는다.
1. HTML의 구조
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
- <!doctype>
문서유형을 지정하는 선언문.
html5 부터는 단 한줄로 문서 유형을 선언한다. - <html>
웹페이지의 시작과 끝을 알리는 구문 - <head>
문서의 형태, 타이틀 정보, 스타일 정보, 자바스크립트 정보 등 기능적인 정보가 들어가는 구문.
<meta>, <style>, <title> 등이 있다.
<meta>가 인코딩, 콘텐츠 타입 등을 표시
<style>은 CSS와 관련된 것이 표시
<title>은 웹 페이지의 제목 - <body>
웹 페이지를 표현하는 데 사용되는 영역
여기서 웹페이지에 관한 모든 배치가 이루어진다.
2. HTML 요소의 구조
요소(Element), 태그(Tag), 속성(Attribute), 변수(속성값 / Arguments), 내용(Contents) 가 있다.
아래와 같은 구성을 가진다.
(1) 요소 (element)
시작 태그와 종료 태그로 이루어진 명령어.
태그 모두를 포함하여 요소라고 한다.
구성은 아래와 같다. <p> 로 둘러쌓인 모든 것이 요소이다.
<p> HTML 이란 무엇인가? <br> HTML5 </p>
(2) 태그 (tag)
시작 태그과 종료 태그
< , > 로 둘러 쌓여 있다.
시작태그 <tag> / 종료태그는 </tag> 형태를 가진다.
종료태그를 가지지 않는 경우도 있다.
=> <img> <br> <hr> 등, 시작 태그만을 가지는 태그를 빈 태그(empty tag)라 한다.
(3) 속성(Attribute)
시작 태그에서 선언한다.
효과의 구체화 된 표현을 해준다.
여러 개 선언 가능하며 속성과 속성의 구분은 공백으로 한다.
값을 가지지 않는 논리 속성도 존재.
<input type="text" id="user" require>
속성 속성 논리 속성
(4) 변수(Arguments)
속성값으로 불린다.
' ' , " " 로 둘러쌓여서 사용된다.
위의 구문에서 text / user 가 속성값이다.
(5) 내용(Contents)
화면에 그대로 보이는 내용이다.
이 내용이 속성의 표현방식으로 변형되어 나타내진다.
HTML 사용해보기
기존에 우리가 Java를 쓰던 스프링에서 HTML을 하려고 한다.
기본 프로젝트 파일 생성 및 설정
Spring Tool - File - New - other - Web - Dynamic Web Project - Next 클릭
이 후에 프로젝트 이름을 정하고 필요한 설정들 다 ~ 하고 나서 Next - Next - Finish
이후 코딩할 때 편하게 하기 위해서
Window - Preferences - Web - HTML Files - Editor - Templates
로 들어가서
HTML 5로 사용할 것이기에 HTML5 클릭 후 Edit
아래의 캡쳐처럼 해당 부분을 미리 탭을 해놓는다. (가독성을 위해서~)
그리고 OK
서버 설정 및 저장경로 설정
맨 아래에 서버 흰창에 오른쪽 클릭 - new - server 클릭
그 후 Tomcat 9.0 클릭 후 Next 클릭
아래처럼 Tomcat을 깔았던 폴더를 설정한다. 그 후 Next
왼쪽에 사용가능한 프로젝트를 Add 해서 오른쪽에 추가한다.
그 후 Finish
아래의 설정한 서버를 클릭하고 바로 위의 Modules 을 클릭
앞으로의 저장경로를 기본 루트 경로로 설정하기 위해
Path를 클릭하고 Edit 클릭 후 Path를 슬래시만 남기고 Ok 클릭
Ports 설정
Modules 왼쪽에 있는 Overview 클릭
내부에 있는 Ports에서 각각의 포트를 임의의 숫자로 정한다.
새 HTML 파일 생성
아래의 사진처럼 루트폴더인 webapp를 오른쪽 클릭 후
new - other 클릭
web - HTML 파일 - Next
webapp 아래 새로 만든 폴더인 basic에 파일 이름 정해서 Finish
자 이제 HTML 하나를 짜보자.
아래와 같이 작성 후
Run - Run As - Run on Server 클릭
우리가 만들어 두었던 Tomcat 9.0 서버를 클릭하고
앞으로 항상 이 서버로 프로젝트를 실행하겠다 체크 - Finish 클릭
그 후, 실행 단축키 Ctrl + F11 을 누르면
아래와 같이
하이하이 라는 제목을 가진 페이지가 생성된다.
Web 브라우저 설정하는 방법은
Window - Web Browser 로 들어가면
어떤 브라우져로 할 것인지 정할 수 있다.
기본 예제1
다른 기초 한개만 더 실행해보자
아래와 같이 작성 후 실행 해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h1_h6</title>
</head>
<body>
<h1>컨텐츠 블록의 제목을 정의할 때 사용한당.</h1>
<h2>컨텐츠 블록의 제목을 정의할 때 사용한당.</h2>
<h3>컨텐츠 블록의 제목을 정의할 때 사용한당.</h3>
<h4>컨텐츠 블록의 제목을 정의할 때 사용한당.</h4>
<h5>컨텐츠 블록의 제목을 정의할 때 사용한당.</h5>
<h6>컨텐츠 블록의 제목을 정의할 때 사용한당.</h6>
</body>
</html>
결과는 위와 같다.
기본 예제2
DIV를 사용한 기초 한개 더~ 해보자.
참고로 코딩에서 엔터를 쳤다고 해서
웹페이지에서 엔터인 결과로 나오지 않는다.
엔터 효과는 <BR> 이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV 요소</title>
</head>
<body>
<section class="coffee">
<h1>커피(Coffee)</h1>
<div class="box">
<p>
<em>Americano(아메리카노)</em>는 에스프레소에 뜨거운 물을 더하여 먹눈고얌
나머지는 네이버 가셈.
</p>
<p>
<em>Cafe Latte(카페라떼)</em>는 커피와 우유라는 뜻을 지닌 이탈리아어로써 맛있는거 나도 아는데
<br>나는 못먹음.
</p>
<p>
<em>Cappuccino(카푸치노)</em>는 에스프레소, 뜨거운 우유, 우유 거품을 재료로 만드는 커피인데
<br>라떼가 더 맛있음.
</p>
</div>
<h1>콜라(Cola)</h1>
<div class="box">
<p>
Yo. My name is Polar Bear!!
<br><br>Scream~~~~~
</p>
</div>
</section>
</body>
</html>
'코딩수업 > AWS 클라우드환경 네이티브' 카테고리의 다른 글
| 9/15 CSS 선택자, CSS 속성(Font, Text, Color) (0) | 2022.09.15 |
|---|---|
| (미완) 9/14 HTML 태그 종류 별 정리, CSS 개념 및 적용 방식, 박스 모델 (0) | 2022.09.14 |
| (미안)9/7 데이터베이스(DB) (0) | 2022.09.07 |
| 9/6 데이터베이스(DB) 집합 연산자(교집합, 차집합, 대칭 차집합), VIEW (0) | 2022.09.07 |
| 9/5 데이터베이스(DB) 서브쿼리(SubQuery), Any / All, Create / Insert / Delete / Update, 합집합 (Union), Alter Table, 기본키/ 외래키, AUTO_INCREMENT (1) | 2022.09.05 |
댓글