본문 바로가기
코딩/수업 정리

21.02.05 [053] Fri

by 6^6 2021. 2. 5.
728x90

www.tcpschool.com/xml/xml_dtd_intro

오늘 수업 참고

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

xml, json+ajax RESTful  게시판 //현업에서 요구하는 RESTful

 

xml무결성이란?

xml의 대표적 활용이 html이다.

xml = Extensible Markup Language

 

[DTD 내부 서브셋(subset)-예제]
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE food [

<!ELEMENT food (name,type,cost)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT type (#PCDATA)>

<!ELEMENT cost (#PCDATA)>

]>

<food>

    <name>상추</name>

    <type>야채</type>

    <cost>2000</cost>

</food>

<!-- 
위의 예제에서 !DOCTYPE food 는 이 문서의 루트(root) 요소가 <food>요소라는 사실을 명시합니다.

!ELEMENT food는 <food>요소가 <name>, <type>, <cost>의 세 요소를 반드시 포함해야 한다는 사실을 명시합니다.

!ELEMENT name은 <name>요소가 #PCDATA 타입의 요소라는 사실을 명시합니다.

!ELEMENT type은 <type>요소가 #PCDATA 타입의 요소라는 사실을 명시합니다.

!ELEMENT cost은 <cost>요소가 #PCDATA 타입의 요소라는 사실을 명시합니다. -->

xml문법을 굳이 따로 시간내서 볼필요는 없다.

 

json = 자바스크립트 객체 표기법을 따른다.

자바스크립트에서 객체의 표현은 배열이다!!! 

 

스키마=제약조건

 

[pom.xml]에서 json관련 코드는 이부분
		...
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.6</version>
		</dependency>
 
		<!-- 자바객체를 xml으로 -->
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
		<dependency>
			<groupId>com.fasterxml.jackson.dataformat</groupId>
			<artifactId>jackson-dataformat-xml</artifactId>
			<version>2.9.6</version>
		</dependency>
 
		<!-- 자바객체를 Json으로 -->
		<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.2</version>
		</dependency>
        ...

 

[RestBoardSpring4BeforeController.java]
package edu.bit.board.controller;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import edu.bit.board.service.BoardService;
import edu.bit.board.vo.BoardVO;
import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

//spring v4.0 이전 스트링에서의 Json (@Controller + @ResponseBody)
//해당 Controller의 모든 메서드의 리턴타입을 기존과 다르게 처리한다는 것을 명시
@Log4j // 롬복이
@AllArgsConstructor // 롬복이
@Controller
public class RestBoardSpring4BeforeController {
	private BoardService boardService;

	@ResponseBody //뜻:지금까지의 문법은 무시해라 response바디에 
	@GetMapping("/rest/before")
	public List<BoardVO> before(Model model) {
		log.info("before");
		// model.addAttribute("list",boardService.getList());
		List<BoardVO> list = boardService.getList();

		return list;
	}

}

[RestBoardSpring4AfterController.java]
package edu.bit.board.controller;

import java.util.List;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import edu.bit.board.service.BoardService;
import edu.bit.board.vo.BoardVO;
import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

//spring v4.0 이전 스트링에서의 Json (@Controller + @ResponseBody)
//해당 Controller의 모든 메서드의 리턴타입을 기존과 다르게 처리한다는 것을 명시
@Log4j
@AllArgsConstructor
@RestController // Rest를 붙여준다.
public class RestBoardSpring4AfterController {
	private BoardService boardService;

	// @ResponseBody //after에서는 필요없다.
	@GetMapping("/rest/after")
	public List<BoardVO> after(Model model) {
		log.info("after");
		// model.addAttribute("list",boardService.getList());
		List<BoardVO> list = boardService.getList();

		return list;
	}

}

==========

동기-기다림

웹 브라우저에서 서버에 요청을 보내고 응답을 받는다.

이 때, 모든 정보를 받기 때문에 화면이 하얗게 되면서 응답이 끝날 때까지 다른 작업을 할 수 없게 된다.

 

비동기-안기다림

웹 브라우저로부터 일부의 정보를 요청하기 때문에 그 외에 부분은 다르지 않다.

그렇기 때문에 화면이 하얗게 되는 것도 없고, 서버로 부터 응답이 끝나지 않더라도 다른 작업을 할 수 있다.

==========

 

Ajax = 비동기통신 (동기:동시에 일어나는. 비동기:동시에 일어나지않은)

 

Ajax의 주요 두가지 특징은 아래의 작업을 할 수 있게 해준다.

  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고 작업을 수행

 

 

$는 제이쿼리이다.

$.ajax하면 해당함수에 ajax를 넘겨주는것!

 

 

[BoardController.java]
package edu.bit.board.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import edu.bit.board.page.Criteria;
import edu.bit.board.page.PageVO;
import edu.bit.board.service.BoardService;
import edu.bit.board.vo.BoardVO;
import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Log4j // 롬복이
@AllArgsConstructor // 롬복이
@Controller
public class BoardController {

	// 5버전으로 오면서 @Autowired 를 안넣어줘도 알아서 객체생성됨
	private BoardService boardService;

	@RequestMapping("/rest/list")
	public String restList() {

		log.info("rest/list");
		
		return "ajaxList";
	}
	
	@GetMapping("/list")
	// @PostMapping("/list")
	// @RequestMapping아니고 GetMapping으로 버전바뀌면서 씀
	public void list(Model model) {// 만약 void면 list.jsp(함수명)를 리턴시킨다.
									// String으로 주면 걍 return list;
		log.info("list()");

		model.addAttribute("list", boardService.getList());
		// BoardService에서 getlist()에 자동으로 담아진다.
		System.out.println("사이즈" + boardService.getList().size());
	}
}
[ajaxList.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
/* 	$.ajax({
		url : '서비스 주소'
			, data : '서비스 처리에 필요한 인자값'
			, type : 'HTTP방식' (POST/GET 등)
			, dataType : 'return 받을 데이터 타입' (json, text 등)
			, success : function('결과값'){
			// 서비스 성공 시 처리 할 내용
			}, error : function('결과값'){
			// 서비스 실패 시 처리 할 내용
			}
		}); */

		function getList() {
			var url = "${pageContext.request.contextPath}/rest/after.json";

			$.ajax({
	            type: 'GET',
	            url: url,
	            cache : false, // 이걸 안쓰거나 true하면 수정해도 값반영이 잘안댐
	            dataType: 'json',// 데이터 타입을 제이슨 꼭해야함, 다른방법도 2가지있음
		        success: function(result) {//성공하면 여기로 값이 들어옴

					var htmls="";
					
		        	$("#list-table").html("");	

					$("<tr>" , {
						html : "<td>" + "번호" + "</td>"+  // 컬럼명들
								"<td>" + "이름" + "</td>"+
								"<td>" + "제목" + "</td>"+
								"<td>" + "날짜" + "</td>"+				
								"<td>" + "히트" + "</td>"
					}).appendTo("#list-table") // 이것을 테이블에붙임

					if(result.length < 1){
						htmls.push("등록된 댓글이 없습니다.");
					} else {

		                    $(result).each(function(){			                    			                    
			                    htmls += '<tr>';
			                    htmls += '<td>'+ this.bId + '</td>';
			                    htmls += '<td>'+ this.bName + '</td>';
			                    htmls += '<td>'
			         			for(var i=0; i < this.bIndent; i++) { //for 문은 시작하는 숫자와 종료되는 숫자를 적고 증가되는 값을 적어요. i++ 은 1씩 증가 i+2 는 2씩 증가^^
			         				htmls += '-'	
			        			}
			                    htmls += '<a href="${pageContext.request.contextPath}/content_view?bId=' + this.bId + '">' + this.bTitle + '</a></td>';
 			                    htmls += '<td>'+ this.bDate + '</td>'; 
			                    htmls += '<td>'+ this.bHit + '</td>';	
			                    htmls += '</tr>';			                    		                   
		                	});	//each end

		                	htmls+='<tr>';
		                	htmls+='<td colspan="5"> <a href="${pageContext.request.contextPath}/write_view">글작성</a> </td>';		                	
		                	htmls+='</tr>';
		                	
					}

					$("#list-table").append(htmls);
					
		        }

			});	// Ajax end
		
		}//end	getList()	
	</script>
	
	<script>
		$(document).ready(function(){
			getList();
		});
	</script>

</head>
<body>
	<table id="list-table" width="500" cellpadding="0" cellspacing="0" border="1">
	</table>
</body>
</html>

 

 

 

데이터모델링

 

1.  DVD를 대여하기 위해서는 회원 가입을 해야 한다. 회원 가입 시에는 회원에 대한 이름, 주
   민번호, 전화번호, 핸드폰번호, 이메일, 우편번호, 주소, 등록일 등을 기록해 둔다. 가입자는 
   관심 장르를 설정하여 신 프로 입고 시 이메일을 발송한다.
2.  DVD에 대한 정보는 영화제목, 제작사, 주연배우, 감독, 영화출시일 등의 상세 정보를 관리
   해야 하며 각 DVD에 대한 파손 여부와 대여 여부 등의 상태정보도 관리되어야 한다.
3.  DVD는 장르로 구분해서 체계적으로 관리된다.
4.  대여는 신 프로의 경우에는 대여일이 기본 1일이며 구 프로인 경우에는 2일이 기본 대여일
    이며 대여료는 신 프로의 경우에는 2000원이며 구 프로인 경우에는 대여료가 1000원이다.
5.  미납회원 관리와 함께 연체되었을 경우 하루에 500원 연체료가 누적된다. DVD가 파손되
    거나 망실된 경우 해당 회원은 DVD 가격을 변상해야 한다. 
6.  회원이 DVD를 대여할 경우 대여 1회당 1점씩의 포인트 점수를 부여하고 포인트 점수가 
    10점이 되면 무료로 DVD 하나를 대여할 수 있도록 포인트제를 운영하고자 한다.
7.  DVD 대여점 운영자는 금전상의 관리를 위해서 일별, 월별 매출액과 DVD가 대여된 횟수를 
    알고 싶어 한다.

 

 

slidesplayer.org/slide/17546082/

 

 

논리적설계

1. 모든객체는 릴레이션으로 변환

2. 다데다관계는 릴레이션으로 변환

3. 일대다 관계는 외래키로 표현(n쪽=자식쪽이 외래키를 가져옴. 릴레이션도 자식쪽에 붙인다.)

4. 일대다 관계는 외래키로 표현한다.(전체 참여쪽으로 키를 다 보낸다.)

5. 다중 값 속성은 릴레이션으로 변환한다.

 

 

논리적설계는 테이블로 만드는것

 

 

 

오늘의 문제

 

 

 

1.비동기 통신과 동기통신의 차이점은?

(동기:동시에 일어나는. 비동기:동시에 일어나지않은)

동기통신-기다림

웹 브라우저에서 서버에 요청을 보내고 응답을 받는다.

이 때, 모든 정보를 받기 때문에 화면이 하얗게 되면서 응답이 끝날 때까지 다른 작업을 할 수 없게 된다.

 

비동기통신-안기다림(Ajax는 비동기통신이다.)

웹 브라우저로부터 일부의 정보를 요청하기 때문에 그 외에 부분은 다르지 않다.

그렇기 때문에 화면이 하얗게 되는 것도 없고, 서버로 부터 응답이 끝나지 않더라도 다른 작업을 할 수 있다.

(=페이지 새로고침 없이 서버에 요청한다.) 서버로부터 데이터를 받고 작업을 수행한다.

 


2.xml 과 json 에 대하여 설명하시오.

xml의 대표적 활용이 html이다.

xml = Extensible Markup Language

json = 자바스크립트 객체 표기법을 따른다.


3.list를 ajax로 json으로 뽑아 내고, content_view 의 삭제또한 ajax를 사용하여 삭제해 보도록 하세요.
doublesprogramming.tistory.com/114참고할것

 

Spring - 게시판 만들기 연습 (게시물 삭제를 delete 대신 update처리)

Spring - 게시판 만들기 연습 (게시물 삭제를 delete 대신 update처리) DB에서 게시글을 삭제처리하면 기본키인 index도 함께 삭제된다. 그렇게 되면 기본키를 시퀀스Sequence로 설정했기 때문에 중간에 삭

doublesprogramming.tistory.com

 

4.  

 ♣요구명세서 
MJ 주유소는 self 주유소로 고객이 직접 주유를 하는 시스템이다. 

고객은 원하는 정유사의 주유기에서 주유를 할 수 있다. 

고객이 주유를 할 때 날짜와 주유한 시간, 주유 가격, 결제 방법이 등록된다. 

고객은 회원 가입을 할 수 있다. 

회원 가입 시 이름, 연락처만 입력하면 회원 가입을 할 수 있다.

고객번호는 자동으로 등록 된다. 

만약 회원인 고객은 회원번호를 입력하면 포인트를 모을 수 있다. 

포인트는 주유 금액의 1%가 적립된다. 

포인트에 따라 상품을 수령 할 수 있다. 

100p는 티슈를 2000p는 세차 권을 10000p는 3만 원짜리 주유티켓을 준다. 

품을 수령했을 경우 포인트는 차감 된다.
MJ 주유소의 주유기 소유자들은 좋은 기름을 공급 받을 수 있도록, 각 단말기의 공급자 목록을 관리해야 한다.

공급업자는 사원번호로 식별하고, 정유사, 이름, 연락처, 차량번호, 공급량, 계약기간을 가진다.
MJ 주유소의 주유기 소유자들은 고객들이 안심하고 거래 할 수 있도록 자신의 이름과 연락처를 기록해 놓아야 한다.

 

 

정답↓

이름, 연락처

고객한명 당 회원가입가능... 그래서 1:N (????)

 

 

 

 

 

 

728x90

'코딩 > 수업 정리' 카테고리의 다른 글

21.02.09 [055] Tue  (0) 2021.02.08
21.02.08 [054] Mon  (0) 2021.02.08
21.02.04 [052] Thu  (0) 2021.02.04
21.02.03 [051] Wed  (0) 2021.02.03
21.02.02 [050] Tue  (0) 2021.02.02

댓글