kosta 클라우드 네이티브 애플리케이션 개발 과정 day 28
자바스크립트 이미지 전환
<script type="text/javascript">
let images = [
"국화:Chrysanthemum.jpg",
"사막:Desert.jpg",
"수국:Hydrangeas.jpg",
"해파리:Jellyfish.jpg",
"코알라:Koala.jpg",
"등대:Lighthouse.jpg",
"펭귄:Penguins.jpg",
"툴립:Tulips.jpg"];
$(function () {
$("button").click(function () {
let idx = Math.floor(Math.random() * (images.length - 1)) + 1;
let imageSrc = "images/" + images[idx].split(":").slice[0];
let imageAlt = images[idx].split(":");
$("img").attr("src", imageSrc);
$("img").attr("alt", imageAlt[0]);
});
$("img").dblclick(function () {
alert($("img").attr("alt"))
})
$("img").mousedown(function(){
let idx = Math.floor(Math.random() * (images.length - 1)) + 1;
let imageSrc = "images/" + images[idx].split(":").slice[0];
let imageAlt = images[idx].split(":");
$("img").attr("src", imageSrc);
$("img").attr("alt", imageAlt[0]);
})
});
</script>
ajax : xml을 이용한 비동기 통신
- 자바스크립트를 이용해서 서버에서 데이터를 가져와 페이지 전체의 갱신없이 특정부분만 변경
- xml를 주고 받은 데이터 타입으로 정의하고 있으나 정해져 있지는 않다
- json으로 서버와 데이터를 주로 주고 받는다
요청이 있을 때 정체 갱신 없이 특정 부분만 변경
-> restApi를 사용
-> 특정 데이터만 가져온다
ajax json과 servlet 통신 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<script>
$(function(){
$("button").click(function(){
$.ajax( {
async: true,
url : "/json/servlet",
type: "get",
dataType: "json",
data: "",
contentType: 'application/json',
success: function(data){
alert( data.name );
alert( data.message );
alert( data.etc );
},
error: function( jqXHR, status, e ){
alert( status + " : " + e );
}
});
});
});
</script>
</head>
<body>
<button>json 데이터 받아오기</button>
</body>
</html>
ajax는 servlet할 때 다시 한다. 개념만 숙지 !
톰캣 설칳 직접 코딩
package kosta.basic.web.day028;
import java.io.File;
import org.apache.catalina.LifecycleException;
import org.apache.catalina.startup.Tomcat;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
public class TomcatMain {
public static void main(String[] args) throws LifecycleException {
String webappDirLocation = "webapps/";
Tomcat tomcat = new Tomcat();
tomcat.setPort(8088);
tomcat.addWebapp("/", new File(webappDirLocation).getAbsolutePath());
// log.info("configuring app with basedir: {}", new File("./" + webappDirLocation).getAbsolutePath());
tomcat.start();
tomcat.getServer().await();
}
}
서버 framwork 추가 방식
https://upcurvewave.tistory.com/315
intelli j에서 톰캣 서버 구현하기
직접 코드를 치는 방법 서버를 불러오는 방법 project 디렉토리 우클릭 -> add framework support - > java EE에서 Web Application 설치 run -> edit Configuration 미리 다운로드 받은 톰캣 파일 확인 http port 설정 fix ->
upcurvewave.tistory.com
서블릿 구현해보기
package kosta.basic.web.day028;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "처음 만드는 서블릿", urlPatterns = "/HelloServlet")
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<HTML>");
out.println("<HEAD><TITLE>Hello World</TITLE>");
out.println("<meta charset='UTF-8'></HEAD>");
out.println("<BODY><H1>Hello World !!! 헬로월드</H1>");
out.println("</BODY></HTML>");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<HTML>");
out.println("<HEAD><TITLE>Hello World</TITLE>");
out.println("<meta charset='UTF-8'></HEAD>");
out.println("<BODY><H1>Hello World !!! 헬로월드</H1>");
out.println("</BODY></HTML>");
}
}
jsp에 db 연동해서 출력해보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
<%!
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
private static final String DB_DRIVER = "oracle.jdbc.driver.OracleDriver";
private static final String DB_URL = "jdbc:oracle:thin:@localhost:1521:XE";
private static final String DB_USERNAME = "webdb";
private static final String DB_PW = "oracle";
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String user = "webdb";
String pass = "oracle";
String sql = " select author_id, author_name, author_desc from author"
+ " order by author_id ";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table width="800" border="1">
<tr>
<th>저자번호</th>
<th>저자명</th>
<th>설명</th>
</tr>
<%
// try {
// Class.forName(DB_DRIVER);
// System.out.println("DB 접속 성공");
// Connection connection = DriverManager.getConnection(DB_URL, DB_USERNAME, DB_PW);
// } catch (SQLException | RuntimeException | ClassNotFoundException e) {
// e.printStackTrace();
// throw new IllegalStateException("error");
// }
try{
// 1. JDBC 드라이버 (Oracle) 로딩
Class.forName("oracle.jdbc.driver.OracleDriver");
// 2. Connection 얻어오기
conn = DriverManager.getConnection(url, user, pass);
System.out.println("접속성공");
// 3. SQL문 준비 / 바인딩 / 실행
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
// 4.결과처리
while (rs.next()) {
int authorId = rs.getInt("author_id");
String authorName = rs.getString("author_name");
String authorDesc = rs.getString(3);
System.out.println(authorId + "\t" + authorName + "\t" + authorDesc + "\t");
out.print("<tr>");
out.print("<td>"+authorId+"</td>");
out.print("<td>"+rs.getString("author_name")+"</td>");
out.print("<td>"+rs.getString(3)+"</td>");
out.print("</tr>");
}
}catch(Exception e){
e.printStackTrace();
} finally {
// 5. 자원정리
try {
if (rs != null) { rs.close(); }
if (pstmt != null) { pstmt.close(); }
if (conn != null) { conn.close(); }
} catch (SQLException e) {
System.out.println("error:" + e);
}
}
%>
</table>
</body>
</html>
get vs post 방식 form 태그에서 사용하기
<a> 태그는 get 만 가능하다
jsp와 servlet 구별하기 ?
jsp는 화면에 표현하는 용도
servlet은 비즈니스 로직만 다루는 용도
jsp 문법
선언문 : <%! %>로 쓴다. 메서드 선언할 수 있다. 생성시 멤버변수로 작동한다.
스크립트릿 : 지역변수 선언.
표현식(expression)
- 스크립트릿과 달리 변수나 메소드를 출력하고 할 때 세미콜론(;)은
- 표기하지 않음.
(서블릿 코드로 변환될 때 자동적으로 세미콜론은 붙여짐)
e.g.
<% for (int i = 0; i < name.length; i++) {%>
반응형
'교육 > Java&Spring' 카테고리의 다른 글
| kosta 클라우드 네이티브 애플리케이션 개발 과정 day 30 (1) | 2023.02.02 |
|---|---|
| kosta 클라우드 네이티브 애플리케이션 개발 과정 day 29 (0) | 2023.02.01 |
| kosta 클라우드 네이티브 애플리케이션 개발 과정 day 27 (0) | 2023.01.30 |
| java & spring 4 (0) | 2023.01.28 |
| kosta 클라우드 네이티브 애플리케이션 개발 과정 day 26 (0) | 2023.01.27 |
