JSON / EL / JSTL

2022. 10. 8. 14:52ㆍDev.Program/JSP & Javascript

728x90

MVC 패턴에도 ajax 사용할 수 있다!

요즘엔 ajax 보다 json 형태로 된 걸 많이 사용!

< JSON >

======== json1.jsp, json1.html

< json1.jsp >

xml 에서 member 에 해당하는 거 [] 대괄호

xml 에서 person 에 해당하는 거 {} 중괄호

콤마로 구분

xml 에서 내용물은

작은따옴표 / 큰따옴표 구분 없이 사용 가능! ⇒ 작은따옴표하니까 안나와서 큰따옴표로 바꿈!

⇒ 형태만 어떤지 알아두고, 보통은 DB 에서 작업해서 형태에 맞춰서 들고오기 때문에 이렇게 쓸 일은 별로 없다 ( 대괄호 중괄호 등등 형태 의미는 알아두기! )

 

  • 자바 스크립트의 배열형태 (JSON)

  • 지금은 단순히 글자의 형태
  • application/json 형태로 바꿔주기
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
[
 {"id":"jo", "pass":"1234", "name":"조해진"},
 {"id":"park", "pass":"1234", "name":"박희진"},
 {"id":"jang", "pass":"1234", "name":"장수영"}
]

 

< json1.html >

  • json1.jsp ㅍ ㅏ일에서 JSON 형태를 들고온다 : getJSON
$(document).ready(function(){
 $.getJSON('json1.jsp', function(rdata){
 $.each(rdata, function(index, item){
 $('body').append(item.id + ", " + item.pass + ", " + item.name + "<br>");
 });
 });
 });



> 버튼 클릭했을 때, 표에 삽입 되도록 만들어보기

  • body 에 추가
$('#btn').click(function(){
 $.getJSON('json1.jsp', function(rdata){
 $.each(rdata, function(index, item){
 $('table').append("<tr><td>"+item.id+"</td><td>"+item.pass+"</td><td>"+item.name+"</td></tr>");
 });
 })
 });
  • 평소에
  • 버튼 눌렀을 때



======== json2.jsp, json2.html

  • 만들기

  • json-simple-1.1.1.jar
  • lib 에 넣기

 

< json2.jsp>

<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="member.MemberBean"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// json2.jsp 데이터베이스 접속 member => json 형태 데이터 가져오기
// WebContent - WEB-INF - lib - json-simple-1.1.1.jar
// 자바빈 MemberBean 대신에 JSONObject 사용
// 배열 List ArrayList 대신에 JSONArray 사용

 // 1단계 드라이버로더
 Class.forName("com.mysql.jdbc.Driver");

 // 2단계 디비연결
 String dbUrl="jdbc:mysql://localhost:3306/jspdb1";
 String dbUser="jspid";
 String dbPass="jsppass";
 Connection con=DriverManager.getConnection(dbUrl, dbUser, dbPass);
// 3단계 sql
 String sql="select * from member";
 PreparedStatement pstmt=con.prepareStatement(sql);
// 4단계 rs <= 실행결과저장
 ResultSet rs=pstmt.executeQuery();
List memberList = new ArrayList();
 // 5단계 rs => 자바빈 => 배열에 담기
 while(rs.next()){
 // 한 사람의 정보를 자바빈에 저장
 MemberBean mb = new MemberBean();
 // rs 내용을 MemberBean 멤버변수 각각 저장
 mb.setId(rs.getString("id"));
 mb.setPass(rs.getString("pass"));
 mb.setName(rs.getString("name"));
 // MemberBean에 저장한 내용을 배열 한 칸에 저장
 memberList.add(mb);
 }
%>
  • 이게 우리가 평소에 하던 방식!

⇒ 자바빈 MemberBean 대신에 JSONObject 사용

⇒ 배열 List ArrayList 대신에 JSONArray 사용

  • 값을 넣을 때는 put 사용!
  • ⇒
    이 부분이 이렇게 변경
  • ⇒ JSON 형태가 String 이기 때문에 rs.getString 으로 가져와야함!

  • ⇒
    이 부분도 이렇게 변경

  • 출력해보기
  • JSON 형태로 데이터가 가져와진다! (대괄호 중괄호 ... )
  • 이 코드가 꼭 있어야 html에서 출력물 가져올 수 있음!

 

  • 이제 json2.jsp 에서 text/html 부분도 application/json 형태로 바꾸기

 

< json2.html >

$(document).ready(function(){
 $.getJSON('json2.jsp', function(rdata){
 $.each(rdata, function(index, item){
 $('body').append(item.id + ", " + item.pass + ", " + item.name + "<br>");
 });
 });
 });
  • member 잘 가져와짐!

 

  • body 에 추가
  • json1.html 처럼 버튼 눌렀을 때 내용물 가져오게 만들어보기

 

$('#btn').click(function(){
 $.getJSON('json2.jsp', function(rdata){
 $.each(rdata, function(index, item){
 $('table').append("<tr><td>"+item.id+"</td><td>"+item.pass+"</td><td>"+item.name+"</td></tr>");
 });
 });
 });
  • 평소
  • 버튼 눌렀을 때



======== json3.jsp, json3.html

  • 만들기

> 문제 ) 게시판 뿌려주기

< json3.jsp >

<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// 1단계 드라이버로더
Class.forName("com.mysql.jdbc.Driver");

// 2단계 디비연결
String dbUrl="jdbc:mysql://localhost:3306/jspdb1";
String dbUser="jspid";
String dbPass="jsppass";
Connection con=DriverManager.getConnection(dbUrl, dbUser, dbPass);

// 3단계 sql
String sql="select * from board";
PreparedStatement pstmt=con.prepareStatement(sql);

// 4단계 rs <= 실행결과저장
ResultSet rs=pstmt.executeQuery();

 JSONArray boardList = new JSONArray();
// 5단계 rs => 자바빈 => 배열에 담기
while(rs.next()){
 // rs 내용을 boardBean 멤버변수 각각 저장
 JSONObject bb = new JSONObject();
 bb.put("num", rs.getString("num"));
 bb.put("subject", rs.getString("subject"));
 bb.put("name", rs.getString("name"));
 bb.put("readcount", rs.getString("readcount"));
 bb.put("date", rs.getString("date"));
 // boardBean에 저장한 내용을 배열 한 칸에 저장
 boardList.add(bb);
 }
%>
<%=boardList %>

 

< json3.html >

  • body에 추가하기
$(document).ready(function(){
 $('#btn').click(function(){
 $.getJSON('json3.jsp', function(rdata){
 $.each(rdata, function(index, item){
 $('table').append("<tr><td>"+item.num+"</td><td>"+item.subject
 +"</td><td>"+item.name+"</td><td>"+item.readcount+"</td><td>"
 +item.date+"</td></tr>");
 })
 });
 });
 });
  • 평소
  • 버튼 눌렀을 때

 

⇒ 나중에 MVC 패턴에서도 출력하면 자동으로 들고가짐



FunWeb 으로 가기

→ Main.jsp에서 <h3>태그 News Notice 클릭했을 때 최신글 5개 뿌려지도록 만들기

======== main_json.jsp 만들기

< main.jsp >

<script src="../js/jquery-3.5.0.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $('#brown').one('click', function(){
 $.getJSON('main_json.jsp', function(rdata){
 $.each(rdata, function(index, item){
 $('table').append("<tr><td class='contxt'><a href='../center/content.jsp?num="+item.num+"'>"+item.subject+"</a></td><td>"+item.date+"</td></tr>");
 })
 });
 });
 });
</script>

 

< main_json.jsp >

<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// 1단계 드라이버로더
Class.forName("com.mysql.jdbc.Driver");

// 2단계 디비연결
String dbUrl="jdbc:mysql://localhost:3306/jspdb1";
String dbUser="jspid";
String dbPass="jsppass";
Connection con=DriverManager.getConnection(dbUrl, dbUser, dbPass);

// 3단계 sql
String sql="select * from board order by date desc limit 1,5";
PreparedStatement pstmt=con.prepareStatement(sql);

// 4단계 rs <= 실행결과저장
ResultSet rs=pstmt.executeQuery();

 JSONArray boardList = new JSONArray();
// 5단계 rs => 자바빈 => 배열에 담기
while(rs.next()){
 // rs 내용을 boardBean 멤버변수 각각 저장
 JSONObject bb = new JSONObject();
 bb.put("num", rs.getString("num"));
 bb.put("subject", rs.getString("subject"));
 bb.put("date", rs.getString("date"));
 // boardBean에 저장한 내용을 배열 한 칸에 저장
 boardList.add(bb);
 }
%>
<%=boardList %>

 

  • 평소

  • 클릭했을 때

 

 

 

 

 

JSTL

MVC, 파이썬, R

스프링 프레임워크

 

  • 책 차트 14장(512p) → EL 부터! (% 대신 다른형태로)

======== StudyJSP 에 jstl 폴더 새로 만들기

======== elForm.jsp / elPro.jsp 만들기

EL (Expression Language) 표현언어

<%=%> 대신에 ${}

 

→ 지금은 쓸지말지 선택하면 되는데 Spring 에선 jstl 과 el 사용

< EL 내장객체 >

p.512

sessionScope.세션이름

  • ⇒ el 의 내장객체 ${} 안에 씀!

param.파라미터이름

 

< EL 연산자 >

p.516

. [] () 조건?참값:거짓값 empty

 

< elForm.jsp >

<body>
 <h1>jstl/elForm.jsp</h1>
<!-- EL (Expression Language) 표현언어 -->
<!-- <%=%> 대신에 ${ } -->
<!-- 내장객체 sessionScope.세션이름 -->
<!-- 내장객체 param.파라미터이름 -->
<!-- 연산자 . [] () 조건?참값:거짓값 empty →
<!-- && and  == eq -->
</body>




 

Model - DB , View Controller - JSP ← 개인프로젝트 때 했던

MVC (이제 Model - DB / View 화면단 - JSP / Controller 처리 - JAVA )

⇒ View 화면에는 java / jsp 코드(%)는 빠지도록

 

책 510-512p

< elForm.jsp >

<!-- EL (Expression Language) 표현언어 -->
<%-- <%=%> 대신에 ${ } --%>
<!-- 내장객체 sessionScope.세션이름 -->
<!-- 내장객체 param.파라미터이름 -->
<!-- 연산자 . [] () 조건?참값:거짓값 empty →
<!-- && and  == eq -->
<form action="elPro.jsp" method="get">
아이디 : <input type="text" name="id">
<input type="submit" value="전송">
</form>

 

< elPro.jsp >

<h3>아이디 : <%=request.getParameter("id") %></h3>
<h3>아이디 : ${param.id}</h3>

 

  • 실행창 → 아이디 입력

  • 전송시켰을 때 <%= %>로 받아온 것과 ${} 로 받아온 결과 똑같이 나옴

 

< elPro.jsp >

<%
// session.setAttribute(name, value);
session.setAttribute("id", request.getParameter("id"));
%>
<input type="button" value="메인이동" onclick="location.href='elMain.jsp'">
  • 추가 (세션값 받아서 메인으로 넘기기)

 

======== elMain.jsp 만들기

<%=session.getAttribute("id") %>님 로그인하셨습니다.
${sessionScope.id}님 로그인하셨습니다.
  • param.파라미터이름 보다 sessionScope.세션이름을 더 많이 씀
  • ${sessionScope.id} ★★★

  • elPro.jsp 창에서 메인이동 클릭 시
  • session 값 가져와서 화면단에 뿌려줌

 

< elMain.jsp >

 

연산자

+

-

*

/ div

% mod

  • \ 는 이런식으로 그냥 출력하는 거

 

< JSTL >

JSTL : JSP Standard Tag Library

jstl 사용하려면 프로그램 설치해야함

⇒ http://tomcat.apache.org/

  • taglibs

  • 3개 다운

WEB-INF 에 lib 에 넣기

  • 3개 넣기!

 

======== jstl.jsp 만들기

책 519p

core 랑 fmt 많이 사용

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  • 맨 위에 <%@ %> 로 불러오기! “c” 는 아무거나 적어도 상관없지만 보통 core 의 약자인 c 를 많이 적음!

 

< jstl.jsp >

<c:set> ⇐ 변수설정

<c:set var="test" value="jstl test"/>
변수선언 후 출력 : <c:out value="${test }"/><br>
<c:remove var="test"/>
변수삭제 후 출력 : <c:out value="${test }"/><br>

 

< if문 >

<c:if test="조건">
 조건이 참일 때 실행문
</c:if>
  • 기본문법
  • if ~ else 이런 건 없음! if 만 가능!

 

<c:if test="${5<10 }">
 <h3>조건이 참일 때 실행문 : 5는 10보다 작다</h3>
</c:if>
<c:if test="${5>10 }">
 <h3>조건이 참일 때 실행문 : 5는 10보다 크다</h3>
</c:if>
  • 참인 경우만 출력됨!

 

거짓일 때는 choose 구문 씀!

< choose문 >

<c:choose>
 <c:when test="조건">
 조건이 참일 때 실행문
 </c:when>
 <c:otherwise>
 조건 나머지(거짓)일 때 실행문
 </c:otherwise>
</c:choose>
  • 기본문법

 

<c:choose>
 <c:when test="${5+10==50 }">
 <h3>조건이 참일 때 실행문 : 5+10은 50이다</h3>
 </c:when>
 <c:otherwise>
 <h3>조건 나머지(거짓)일 때 실행문 : 5+10은 50이 아니다</h3>
 </c:otherwise>
</c:choose>
  • 거짓일 때 실행됨!



< elMain.jsp >

세션값이 없으면 "세션값 없음" 출력

<c:if test="${empty sessionScope.id}">
 <h1>세션값 없음</h1>
</c:if>

 

<c:if test="${empty sessionScope.id}">
 <h3>if - 세션값 없음</h3>
<% response.sendRedirect("elForm.jsp"); %>
</c:if>
<c:if test="${!empty sessionScope.id}">
 <h3>if - 세션값 있음</h3>
</c:if>

<c:choose>
 <c:when test="${empty sessionScope.id}">
 <h3>choose - 세션값 없음</h3>
 </c:when>
 <c:otherwise>
 <h3>choose - 세션값 있음</h3>
 </c:otherwise>
</c:choose>

 

<% response.sendRedirect("elForm.jsp"); %>

대신

<c:redirect url="elForm.jsp"/>



< jstl.jsp >

< forEach문 >

<c:forEach var="i" begin="1" end="10" step="2">
 <h3>${i }</h3>
</c:forEach>
  • 실행창
  • 자바의 for문과 같음

 

<c:forEach var="변수" items="배열">

</c:forEach>
  • 기본 문법
  • 위에 forEach 보다 items=배열을 더 많이 사용!
  • 자바의 확장 for문 생각하면 됨!



< forTokens >

<c:forTokens var="alpha" items="a,b,c,d" delims=",">
<h3>${alpha }</h3>
</c:forTokens>
  • ,로 구분해서 배열에 담음!
  • Spring 에 split 이랑 비슷! ⇒ 문자 따로 떼내는 함수

 

<c:set var="data" value="홍길동;이길동;김길동"/>
<c:forTokens var="data2" items="${data}" delims=";">
 <h3>${data2 }</h3>
</c:forTokens>

 

< a 태그 이동 >

<a href="elForm.jsp">elForm.jsp로 이동</a>
<a href='<c:url value="elForm.jsp"/>'>elForm.jsp이동</a>
  • 이동할 때!
  • 지금은 차이점이 크게 없는데 MVC 패턴에서는 차이점이 보임



======== fmt.jsp 만들기

526p

< Format >

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

 

<% request.setCharacterEncoding("utf-8"); %>

대신

<fmt:requestEncoding value="utf-8"/>
  • 한글설정

 

< 통화 >

<fmt:setLocale value="en_US"/>
<fmt:formatNumber value="50000" type="currency"/>
  • 미국으로 언어설정을 했기 때문에
  • 달러로 표시
  • setLocale 설정 지우면
    원화로 표시

 

< 퍼센트 >

퍼센트 : <fmt:formatNumber value="0.15" type="percent"/><br>

< 숫자 패턴 >

숫자패턴 : <fmt:formatNumber value="500567300" pattern="###,###,###"/>

 

< 날짜 >

<jsp:useBean id="date" class="java.util.Date"/>
<fmt:formatDate value="${date }" type="date"/><br>
<fmt:formatDate value="${date }" type="time"/>
  • 영문일 때
  • 한글일 때
<fmt:formatDate value="${date }" type="both"/><br>
  • 전체 같이 출력

 

MVC 에서는 % 와 jstl 섞어 써도 되는데

Spring 에서는 무조건 jstl 씀

-------------------------------------------------------------------------jstl 끝!

 

728x90
저작자표시 비영리 변경금지

'Dev.Program > JSP & Javascript' 카테고리의 다른 글

JQuery - (2)  (1) 2022.10.08
JQuery - (1)  (1) 2022.10.08
게시판 만들기 - (4)  (1) 2022.10.08
게시판 만들기 - (3)  (1) 2022.10.08
게시판 만들기 - (2) WAR Export / Import  (0) 2022.10.08

관련글

댓글 1

티스토리툴바