728x90
반응형
팝업창 만드는데, 처음부터 환경 잡느라 시간을 많이 썼다..
오늘은 아래 내용을 다룰 예정이다.
(1) 팝업창 테이블 생성 + 시퀀스 생성
(2) 시퀀스 생성
(3) 팝업 데이터 삽입 View 생성
(4)팝업 내용 INSERT
바로 시작해보자.
1. 팝업창 테이블 생성
<sql />
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. 시퀀스 생성
<sql />
CREATE SEQUENCE DBTEST.popSeq;
ntt_id의 값을 자동으로 할당해 줄 popSeq라는 시퀀스를 생성해주었다..
3. 팝업 데이터 삽입 VIEW 생성
home.jsp
<java />
<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
<javascript />
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: '«',
rightArrow: '»',
}, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징
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
<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
<java />
@Inject
private HomeMapper homeMapper;
public void insertPopup(PopInfoVO pop) {
homeMapper.insertPopup(pop);
}
HomeMapper.java
<java />
@Autowired
protected SqlSessionTemplate sqlSession; // db연동 객체
public void insertPopup(PopInfoVO pop) {
sqlSession.insert("pop.test.insertPopup", pop);
}
PopInfoVO.java
<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
<java />
<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 |
