MVC 3 Tier,인터페이스정의서,AJAX-JSON사용,BLOB(image)

MVC - 3 Tier

3 Tier ( 3 layer architecture )
presentation : control, view	business(logic) : service(인터페이스통신)	dataservice : DAO
common : VO
위 3개 항목이 common 소스들을 공통적으로 사용한다.

business : 송-수신 관계의 시스템들이 통신하는 인터페이스들의 영역.

presentation 과 business 가 함께 존재시 서버에 과부하가 올 수도 있다.

그래서 이 둘을 서버를 더 생성하여 서로 다른 서버에 두는 방식이 있는데 이것이 웹 서비스 이다.

​

지금까지는 축소형 MVC 사용중이였다.

: control view DAO VO

http://dawoonjeong.com/mvc-vs-3tier/

​

인터페이스 데이터 통신 (송신, 전달, 수신 모두 인터페이스라 칭한다.)

- 시스템 인터페이스 정의서

예를들어 재고관리 인터페이스라고 설정하자면..

1. 인터페이스 목록

1) 송신( 판매시스템 )

인터페이스번호 : 이 활동에 대한 임위의 번호 지정

일련번호 : 인터페이스번호에 따른 활동이 여러개일 수 있으니 일련번호를 순차적으로 넣어 구분하는듯 하다.

송신시스템명 : 판매시스템

프로그램ID : 해당 판매시스템의 ID

2) 전달

처리형태 :

인터페이스 방식 : URL 호출 ( HTTP형식 )

발생빈도 : 수시

3) 수신( 재고시스템 )

상대 담당자 확인 : 미리 정해놓은 담당자의 문자기입

프로그램ID : 해당 재고시스템의 ID

수신시스템명 : 재고시스템

수신번호 :

4) 관련요구사항ID

사용자 요구 사항 : 계약한 상대방 측에 제대로 요구사항을 받아 도장찍어 확정받고 그 요구사항서 번호를 기입한다.

​2. 인터페이스 명세

1) 인터페이스번호 : 위 목록을 연결하는 같은 번호

2) 데이터 송신 시스템 : 판매시스템, 전달하는 데이터를 기입(DB항목)

3) 데이터 수신 시스템 : 전달받는 데이터와 매칭되는 데이터를 기입(DB항목)

ex) 송신 시스템 데이터 = 상품번호(char) 수신 시스템 데이터 = 상품번호(char) , 재고량(int) 송신시스템이 상품번호데이터를 주고 재고량데이터를 달라고 요청한 것이고, 수신 시스템이 상품번호데이터를 살펴 재고량데이터를 주는 것이다.

외부 모듈 : 타회사의 시스템이다. 시스템끼리 소통할 때 이 시스템을, 외부 모듈이라고 칭한다.

내부 모듈 : 내가 다니는 회사의 시스템으로 직접 다룰 수 있는 시스템이다.

이 상황에서 내가 제조사라 송신시스템을 다루고 있고, 판매회사와 주고받는 입장이라면

송신시스템이 내부모듈 수신시스템이 외부모듈이다.

---

AJAX

데이터 비동기식 : XML, AJAX(XML파생) 이 가장 대표적이다

동기 : 데이터를 가지고 올 때 기존페이지가 작동을 멈추며 화면을 초기화 시킨다. 그리고 그대로 순서대로 코드를 진행시킨다.

비동기 : 데이터를 가지고 오는 동안 기존 페이지가 작동을 멈추지 않아, 화면을 유지한 채 데이터를 가져올 수 있다. 순서가 없어 문제점이 있을 수 있다. ( 이럴 땐 콜백함수 방법을 써야 한다. )

$.ajax();
// 그냥 $ 변수의 ajax() 라는 메서드를 사용한다고 생각하면 된다.
// 자바로 보면 아래처럼
A $ = new A();
$.m();

JSON

"키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 클래스 없이 객체를 만들 수 있다.

장점 : 만들기 쉬움

단점 : 설계도인 클래스가 없으므로 만들때마다 다시 똑같이 만들어야함

JS 에는 객체 + 비객체 지향이 섞여 있다.

비객체지향 : 메서드가 객체없이 독립적으로 사용가능하다.

var h = function(){};
h();
// 메서드 즉, 행동 자체가 독립적일 수 있다.
function h(){}
// 위와 똑같은 상황이며 마치 C언어 같이 행동이 독립적이다.

// ajax 의 객체생성(javascript가 근원이다)
$.ajax({}); // {} 가 생성문구
// java 는 new 생성자.

var 한학생 = {성명:"철수" , 번호 : 1 }
// 이걸 JSON 이라고 부른다. JavaScript Object Notation

//예시
	var z = function(){}
	var p = {url:"",
			 success:z,
			 type:"",
			 dataType:"json",
			}
    
	$.ajax(p)
    // 위 아래 동일한 결과로, 객체를 ajax() 메서드안에 바로 생성하는 방법인 2번째 것을 쓴다.
	$.ajax({url:"",
		 success:function(){},
		 type:"",
		 dataType:"json",
		})

---

>> 송신측

    // ajax 에 넣는 JSON 대표 속성 예시. 수신측이랑 연결하는 메서드
	 $.ajax({url: "http://localhost:8090/재고시스템/판매예정상품재고량조회.jsp", 
		     success:function(result){
		                alert("상품재고수량은 "+ result.재고량);
		                alert(status);
	                 },
	         type:"POST",
	         dataType:"json",
	         contentType:"text/plain; charset=utf-8",
	         data :JSON.stringify({상품번호:"pno"}) // data :JSON.stringify({상품번호:$("#pno1").val()}) 같은 결과
	        });

url : 수신 측이 외부시스템이니 풀주소로 요청, html을 받아온다는게 아니고 그 안의 데이터들을 return 해옴

success : result = 수신측에서 보낸 JSON 객체이므로 그 객체의 속성명을 사용해 속성값을 얻어낸 것이다. status = ajax가 송수신 측 통신이 잘되었는지 결과를 저장한 변수

type : url 의 method 지정

dataType : return 데이터타입 (요청 받아오는 애 타입, result 의 타입이다. ) 가져오는 측에서 보니까 sendJSONObject 라고 보냈음. 즉 JSON 객체로 저장한 데이터를 가져오는 거니까 dataType 이 json 인 것이다.

contentType : 현재 ajax() 로 요청보낼 때의 타입

data : 수신 측에 보내는 데이터로, 이 데이터에 맞는 데이터를 수신측에서 get 하여 put 으로 결과를 보내는 것이다. JSON.stringify() 은 JSON 표기법으로 해서(var o = {키:값}) 매개값을 문자열로 보낸다는 의미 // key들 보면 " " 없다!(헷갈려하지 말자) = "{상품번호:\"pno1\"}" 이렇게 전체를 JSON 객체인 문자열로 보낸다. 여기서 "pno" 는 $("#pno").val() 과 똑같음.

>> 수신측

<%
request.setCharacterEncoding("utf-8");
// 클라이언트(송신측) 에 받는 값을 utf-8 형태로 바꾼다.
BufferedReader reader =  request.getReader();
JSONObject receiveJSONObject = new JSONObject(reader.readLine());
String 상품번호 = receiveJSONObject.getString("상품번호");

// 받은 상품번호로 DB 에서 where 조건문에 대입하여 재고량 데이터를 가져왔다 치고

JSONObject sendJSONObject = new JSONObject();
sendJSONObject.put("상품번호", 상품번호);
sendJSONObject.put("재고량", 재고량);
// 넘길값을 sendJSONObject 에 넣는다.
response.setCharacterEncoding("utf-8");
// 클라이언트(송신측) 에 보낼 값을 utf-8 형태로 바꾼다.
out.print(sendJSONObject.toString());
%>

BufferedReader reader = request.getReader(); : request 가 들어온 데이터를 reader에게 넘김

JSONObject receiveJSONObject = new JSONObject(reader.readLine()); // 송신측에서 문자열로 (JSON.stringify()) 변환하여 보내서 읽어지는 것이다.

String 상품번호 = receiveJSONObject.getString("상품번호"); // 송신측에서 보낸 data 를 받는다.

out.print(sendJSONObject.toString()); // out 이라는 내장객체가 송신측에 print 즉 , 출력하는데 // 그 값은 매개의 sendJSONObject 가 다시 String형태 JSON표기법으로 변형한 값이다.

>> 수신측이 받은 값

---

board : MVC 3 Tier (ajax 활용)

이진데이터?

char 도 아니고 int 도 아닌 둘의 속성을 섞은 데이터

모든 데이터들은 이진데이터로 할 수 있으며 이진데이터를 보낼 수 있는 JSON 에는 image를 넣거나 동영상을 넣는 등

여러가지가 가능함.

 

>> Member.java (blob 추가)

import com.mysql.cj.jdbc.Blob;

public class Member {

	private int no;
	private String name;
	Blob profile;
	private String post;
	private String address;
	private String detailaddress;
	private String tel;
	private String email;
	private String id;
	private String password;
	private Date rdate;
	private String state;
	private String size;
	
// setter, getter 부분

>> MemberDAO.java

save 메서드에 Member의 추가한 멤버변수도 추가(sql 문에도 profile 추가, statement의 setBlob()로 추가)

	public void save(Member member) {
		try {
			Connection c = ConnectionUtil.getConnection();
			PreparedStatement pre = c.prepareStatement("insert into 회원(name,profile,post,address,detailaddress,tel,email,id,password) values(?,?,?,?,?,?,?,?)");
			pre.setString(1, member.getName());
			pre.setBlob(2, member.getProfile());
			pre.setString(2, member.getPost());
			pre.setString(3, member.getAddress());
			pre.setString(4, member.getDetailaddress());
			pre.setString(6, member.getTel());
			pre.setString(5, member.getEmail());
			pre.setString(7, member.getId());
			pre.setString(8, member.getPassword());

			pre.executeUpdate();
			
			pre.close();
			c.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
    }

---

이미지 선택버튼 눌러 첨부시 화면에 뜨게 하기

 

<body>

<input type="file" id="myfile"  />
<img id="myimg" />

<script>
function 그림파일읽어출력하기(이벤트) {
    var 그림파일 = 이벤트.target.files[0]; 

     if (!그림파일.type.match('image.*')) {
        alert("욱! 그림이 아니예요!");
      }

      var 파일리더 = new FileReader();

       파일리더.onload = function(한그림파일) {
    	  var myimg=document.getElementById("myimg");
          myimg.src=한그림파일.currentTarget.result;
      };     
 
        파일리더.readAsDataURL(그림파일);
  }
  document.getElementById('myfile').addEventListener('change', 그림파일읽어출력하기, false);

</script>

</body>

* img 태그에 addEventListener 로 input에서 넣은 값을 띄울 메서드를 만들어야한다.

1. 메서드의 매개변수에는 event 의 대상이 자동으로 객체화 되어있는데 이를 가져올 수 있다. (이름은 아무거나)

2. event 의 target 속성은 실제 이벤트가 발생된(클릭한) 대상을 의미한다.(자세한건 아래 1번 참조)

3. event.target.files 는 이벤트발생 대상에 파일들이 들어간 경우 사용하며, File 객체들의 배열인 FileList 를 생성한다. files[0] 이면 첫번째 File 을 꺼내온다는 의미이다.

4. File 에는 type 정보가 있으며 이를 match() 함수로 형식이 "image/*" 로 되있나 확인 (type정보는 3번 참조)

5. FileReader를 생성하여 파일을 읽는 메서드들(2번 참조)을 사용해 file을 읽고(=load) 다 읽으면 onload 이벤트가 발생하여 해당 이벤트를 발생된 대상은 스스로이므로 FileReader가 function() 의 매개값으로 들어간다.

6. result 속성은 FileReader 가 메서드를 사용하여 읽고 저장한 정보값을 나타낸다.

7. input 태그에 addEventListener() 로 위 이벤트를 건다.