[연습장] div 팝업창을 만들어 보자. - (1) 팝업 데이터 INSERT 하기

728x90

팝업창 만드는데, 처음부터 환경 잡느라 시간을 많이 썼다..

오늘은 아래 내용을 다룰 예정이다.

(1) 팝업창 테이블 생성 + 시퀀스 생성

(2) 시퀀스 생성

(3) 팝업 데이터 삽입 View 생성

(4)팝업 내용 INSERT

바로 시작해보자.

1. 팝업창 테이블 생성

CREATE TABLE DBTEST.sm_popup(
	ntt_id numeric NOT NULL, -- 팝업 번호
	ppup_yn varchar(1) NULL, -- 팝업 사용 여부 기본 : 'Y'
	pop_sub varchar(50), -- 팝업 제목
	pop_con varchar(200), -- 팝업 내용
	beg_de varchar(10) NOT NULL, -- 팝업이 보일 시작일
	end_de varchar(10) NOT NULL, -- 팝업이 안보이게 될 종료일
	CONSTRAINT sm_popup_pkey PRIMARY KEY (ntt_id) -- 기본키는 ntt_id로 설정
);

우선 이렇게 팝업창 테이블을 생성해주었다.

2. 시퀀스 생성

CREATE SEQUENCE DBTEST.popSeq;

ntt_id의 값을 자동으로 할당해 줄 popSeq라는 시퀀스를 생성해주었다..

3. 팝업 데이터 삽입 VIEW 생성

home.jsp

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ko.min.js" integrity="sha512-L4qpL1ZotXZLLe8Oo0ZyHrj/SweV7CieswUODAAPN/tnqN3PA1P+4qPu5vIryNor6HQ5o22NujIcAZIfyVXwbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <div style="margin-left: 50px; margin-top: 50px;">
    <div class="row">
	  <div class="col-lg-6" style="width: 200px;">
	    <div class="input-group">
	      <input type="text" id="begDe" class="form-control datePicker" value="시작일 입력"/>
	    </div><!-- /input-group -->
	  </div><!-- /.col-lg-6 -->
	  <div class="col-lg-6" style="width: 200px;">
	    <div class="input-group">
	      <input type="text" id="endDe" class="form-control datePicker" value="종료일 입력"/>
	    </div><!-- /input-group -->
	  </div><!-- /.col-lg-6 -->
	</div><!-- /.row -->
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">팝업제목</label>
          <input type="text" id="popSub" class="form-control" aria-describedby="emailHelp" style="width: 300px;">
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">팝업내용</label>
          <input type="text" id="popCon" class="form-control" style="width: 300px;">
        </div>
        <button type="submit" class="btn btn-primary" id="insertPop">확인</button>
    </div>
</body>
</html>

script

const button = document.querySelector('#insertPop');
    // 팝업제목/내용 객체 생성
    let popInfo = {
        popSub : '',
        popCon : '',
        ppupYn : 'Y',
        begDe : '',
        endDe : ''
        
    }
    // 클릭 이벤트 생성 : 이벤트 호출시 팝업 제목,내용을 popInfo객체네 넣고 비동기 통신 수행
    button.addEventListener('click', event =>{

        popInfo.popSub = document.querySelector('#popSub').value;
        popInfo.popCon = document.querySelector('#popCon').value
        popInfo.begDe = document.querySelector('#begDe').value
        popInfo.endDe = document.querySelector('#endDe').value

        // 통신을 수행 할 URL생성
        const URL = '/com/insertPopup.do';

        // 비동기 통신 실행
        const insertPop = fetch(URL, {
            method : 'POST',
            headers : {'Content-type' : 'application/json'},
            body : JSON.stringify(popInfo)
        });

    })
    
    
    
    document.addEventListener("DOMContentLoaded", function(){
	$('.datePicker').datepicker({
		format: 'yyyy-mm-dd', //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
		startDate: '-10d', //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
		endDate: '+10d', //달력에서 선택 할 수 있는 가장 느린 날짜. 이후로 선택 불가 ( d : 일 m : 달 y : 년 w : 주)
		autoclose: true, //사용자가 날짜를 클릭하면 자동 캘린더가 닫히는 옵션
		calendarWeeks: false, //캘린더 옆에 몇 주차인지 보여주는 옵션 기본값 false 보여주려면 true
		clearBtn: false, //날짜 선택한 값 초기화 해주는 버튼 보여주는 옵션 기본값 false 보여주려면 true
		datesDisabled: ['2019-06-24', '2019-06-26'], //선택 불가능한 일 설정 하는 배열 위에 있는 format 과 형식이 같아야함.
		daysOfWeekDisabled: [0, 6], //선택 불가능한 요일 설정 0 : 일요일 ~ 6 : 토요일
		daysOfWeekHighlighted: [3], //강조 되어야 하는 요일 설정
		disableTouchKeyboard: false, //모바일에서 플러그인 작동 여부 기본값 false 가 작동 true가 작동 안함.
		immediateUpdates: false, //사용자가 보는 화면으로 바로바로 날짜를 변경할지 여부 기본값 :false
		multidate: false, //여러 날짜 선택할 수 있게 하는 옵션 기본값 :false
		multidateSeparator: ',', //여러 날짜를 선택했을 때 사이에 나타나는 글짜 2019-05-01,2019-06-01
		templates: {
		leftArrow: '&laquo;',
		rightArrow: '&raquo;',
		}, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징
		showWeekDays: true, // 위에 요일 보여주는 옵션 기본값 : true
		title: '테스트', //캘린더 상단에 보여주는 타이틀
		todayHighlight: true, //오늘 날짜에 하이라이팅 기능 기본값 :false
		toggleActive: true, //이미 선택된 날짜 선택하면 기본값 : false인경우 그대로 유지 true인 경우 날짜 삭제
		weekStart: 0, //달력 시작 요일 선택하는 것 기본값은 0인 일요일
		language: 'ko', //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
    })
})

결과화면

디자인에는 그렇게 힘을 많이 쓰지 않았다. 정말 필요한 내용만 입력 할 수 있을 정도로..

딱히 설명 할 게 없다. 그냥 부트스트랩, 제이쿼리를 cdn으로 가져왔고,

내용 입력후, 확인 버튼을 누르면 입력 내용을 popInfo라는 객체에 담아 fetch함수를 통한 비동기 통신을 실행한다.

그게 끝... 그 외에는 그냥 모르고 써도 된다. 캘린더 관련 내용이라...

4. 팝업내용 INSERT

평범한 MVC패턴을 통해 입력 한 데이터를 테이블에 INSERT해준다. 간단히 코드만 보자.

HomeController.java

@Inject
private HomeService homeService;

/*
* POST방식으로 JSON데이터를 객체(VO)로 받아 Service 호출
*/
@RequestMapping(value="/insertPopup.do" , method = RequestMethod.POST)
public void insertPopup(@RequestBody PopInfoVO pop) throws IOException{
    homeService.insertPopup(pop);
}

HomeService.java

@Inject
private HomeMapper homeMapper;

public void insertPopup(PopInfoVO pop) {
    homeMapper.insertPopup(pop);
}

HomeMapper.java

@Autowired
protected SqlSessionTemplate sqlSession; // db연동 객체

public void insertPopup(PopInfoVO pop) {
    sqlSession.insert("pop.test.insertPopup", pop);
}

PopInfoVO.java

package app.model.com;


public class PopInfoVO {

	private int nttId; 
	private String popSub; 
	private String popCon;
	private String ppupYn;
	private String begDe;
	private String endDe;
	public int getNttId() {
		return nttId;
	}
	public void setNttId(int nttId) {
		this.nttId = nttId;
	}
	public String getPopSub() {
		return popSub;
	}
	public void setPopSub(String popSub) {
		this.popSub = popSub;
	}
	public String getPopCon() {
		return popCon;
	}
	public void setPopCon(String popCon) {
		this.popCon = popCon;
	}
	public String getPpupYn() {
		return ppupYn;
	}
	public void setPpupYn(String ppupYn) {
		this.ppupYn = ppupYn;
	}
	public String getBegDe() {
		return begDe;
	}
	public void setBegDe(String begDe) {
		this.begDe = begDe;
	}
	public String getEndDe() {
		return endDe;
	}
	public void setEndDe(String endDe) {
		this.endDe = endDe;
	}
	
}

testMapper.xml

<mapper namespace="pop.test">
    <insert id="insertPopup" parameterType="app.model.com.PopInfoVO">
        insert into DBTEST.sm_popup (NTT_ID, PPUP_YN, POP_SUB, POP_CON, BEG_DE, END_DE) values 
            (POPSEQ.NEXTVAL, #{ppupYn}, #{popSub}, #{popCon}, #{begDe}, #{endDe}) 	
    </insert>
</mapper>

이게 끝이다. 이렇게 하고 데이터가 들어가는 것을 확인해보자.

솔직히 팝업창 넣는 건 별 거 없기에 중요하지 않다. 중요한 건 팝업창을 화면에 띄우는 건데,

하루동안 보이지 않게 하기 위한 쿠키 설정이나, 팝업이 여러개 있을 때 어떻게 화면에 보여줄 것인가.. 등등

그게 메인인 것 같다. 다음에는 팝업창을 표출 하는 것을 해보도록 하자.

728x90

'연습장' 카테고리의 다른 글

[연습장] 개인 라이브러리를 실제로 추가하여 사용해보자~ ( .jar 파일 사용 ) (0)	2022.06.20
[연습장] 개인 라이브러리를 만들어보자~ ( .jar 파일 만들기 ) (0)	2022.06.17
[연습장] Youtube Data API를 통한 유튜브 동영상 리스트를 만들어 보자. (8) 댓글 기능 구현 - 댓글 테이블에서 SELECT 해오기 (0)	2022.03.18
[연습장] Youtube Data API를 통한 유튜브 동영상 리스트를 만들어 보자. (7) 댓글 기능 구현 - 댓글 테이블에 INSERT하기 (0)	2022.03.17
[연습장] Youtube Data API를 통한 유튜브 동영상 리스트를 만들어 보자. (6) 관련 동영상 리스트 (0)	2022.03.16

'연습장' 카테고리의 다른 글

검색 태그

티스토리툴바