반응형
주소록 어플리케이션 만들기 실습
1. 순서
1. 구조 잡기 -> 2. 뷰 템플릿 -> 3. 함수 -> 4. 이벤트 함수 -> 5. add -> 6. update, delete
2. 소스 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="lib/jpaginate/style.css">
<link rel="stylesheet" href="lib/waitme/waitMe.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jsrender.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="lib/waitme/waitMe.js"></script>
<script src="lib/jpaginate/jQuery.paginate.js"></script>
<title>주소록 어플리케이션</title>
<style>
body {
font-size : 75%;
}
input.text {
margin-bottom : 12px;
width : 95%;
padding : .4em;
}
</style>
</head>
<body>
<h2 class="ui-widget ui-header">주소록 리스트</h2>
<!--
주소록 추가 버튼
버튼 클릭 시 모달 창으로 입력 폼 열림
-->
<button role="button" id="btnNewContact"
class="add ui-button ui-state-default ui-button-text-only">
<span class="ui-button-text">새로운 연락처 추가</span>
</button>
<!-- 주소록 출력 영역 -->
<div id="output" style="text-align:center;width:630px;">
<table id="contact_table" style="border:solid 1px black;">
<thead>
<tr style="background-color:#cb842e;color:white;">
<th style="width:60px;">번호</th>
<th style="width:90px;">이름</th>
<th style="width:100px;">전화번호</th>
<th style="width:250px;">주소</th>
<th style="width:130px;">기능</th>
</tr>
</thead>
<!--
주소 목록 출력 부분
jsRender를 이용해서 viewtemplate과 데이터가 결합된 형태로 출력
-->
<tbody id="contactlist">
</tbody>
</table>
<!-- 페이지 이동 버튼 출력 부분(paginate 이용) -->
<div id="paging">
</div>
<!-- 주소록 추가/수정 시 나타날 다이얼로그(모달) 창 영역 -->
<div id="input_dialog" title="연락처 추가/수정">
<form id="f_contact">
<label for="no">일련번호</label>
<input type="text" id="no" name="no" class="text" disabled/>
<label for="name">이름</label>
<input type="text" id="name" name="name" class="text"/>
<label for="tel">전화번호</label>
<input type="text" id="tel" name="tel" class="text"/>
<label for="address">주소</label>
<input type="text" id="address" name="address" class="text"/>
</form>
</div>
</div>
<script>
$(document).ready(function() {
// 1. 공통 변수, 옵션
//서버로 list.do ajax 호출 시 전달할 파라미터 변수
var param = { pageno : 1, pagesize : 5 };
//페이징 처리 시 사용할 전체 페이지 변수 선언
var totalPage = 0;
//페이징 처리 옵션 설정
var pageOption = {
count : 1,
start : 1,
display : 10,
border : true,
border_color : "#333333",
background_color : "#cb842e",
text_color : "#ffffff",
border_hover_color : "#333333",
background_hover_color : "#cb842e",
text_hover_color : "#000000",
images : false,
mouse : "press",
onChange : function(page) {
//페이지 클릭 시 파라미터의 pageno을 변경
param.pageno = page;
//서버로부터 list.do 요청할 메소드
viewContactList();
}
};
//다이얼로그(모달) 창 숨김처리
$("#input_dialog").dialog({
autoOpen : false,
modal : true
});
// 2. 공통 함수
var viewContactList = function() {
//서버에서 list.do 요청
$.get("/contact/list_long.do", param, function(data) {
var obj = JSON.parse(data);
//화면에 주소록 표출
$("#contactlist").empty();
var tmpl = $.templates("#tmpl_contact");
var str = tmpl.render(obj.contacts);
$("#contactlist").html(str);
//페이징 처리를 위한 jpaginate 출력
totalPage = Math.floor((obj.totalCount - 1) / param.pagesize) + 1;
pageOption.count = totalPage;
pageOption.start = param.pageno;
$("#paging").paginate(pageOption);
});
}
//로딩 표시 메소드
var ajaxLoading = function(isLoading) {
if(isLoading == true) {
$("body").waitMe({
effect : "ios",
text : "처리중입니다",
bg : "rgba(255, 255, 255, 0.7)",
color : "#000",
source : "lib/waitme/img.svg"
});
} else {
//waitMe 숨김 처리
$("body").waitMe("hide");
}
}
//추가 다이얼로그 입력 폼 초기화
var initializeInputForm = function() {
//기존에 입력필드에 남아있던 값 초기화
$("#f_contact")[0].reset();
}
//ajax 데이터 추가하는 메소드
var addContact = function() {
//입력필드를 인코딩된 폼 데이터로 생성
var param = $("#f_contact").serialize();
$.post("/contact/add.do", param, function(data) {
//{{status : ok, message : 65번 데이터가 추가되었습니다.}};
console.log(data);
var obj = JSON.parse(data);
console.log(obj);
if(obj.status == "ok") {
//정상 추가되었을 때 다시 목록 조회
param.pageno = 1;
viewContactList();
} else {
alert("주소록 추가 실패 : " + obj.message);
}
$("#input_dialog").dialog("close");
});
}
//다이얼로그 취소 버튼 클릭 시 다이얼로그 닫는 메소드
var cancelInput = function() {
$("#input_dialog").dialog("close");
}
//수정 처리 전 표출할 해당 데이터 조회
var editContact = function(no) {
$.get("/contact/search.do", { no : no }, function(data) {
var data = JSON.parse(data);
if(data.errorMessage) {
alert(data.errorMessage);
} else {
var dialog = $("#input_dialog");
//find() : 해당 요소를 찾아서 선택
//input 필드의 값 세팅
dialog.find("#no").val(data.no);
dialog.find("#name").val(data.name);
dialog.find("#tel").val(data.tel);
dialog.find("#address").val(data.address);
//dialog 오픈
dialog.dialog({
autoOpen : true,
modal : true,
buttons : {
"수정" : updateContact,
"취소" : cancelInput
}
});
}
});
}
//수정 처리
var updateContact = function() {
var param = $("#f_contact").serialize();
console.log(param);
//input에 disabled 속성은 serialize로 묶이지 않음 따로 추가
param += "&no=" + $("#no").val();
console.log(param);
$.post("/contact/update.do", param, function(data) {
var data =JSON.parse(data);
if(data.status == "ok") {
//정상 수정 됐을 때 현재 페이지 다시 조회
viewContactList();
} else {
alert("연락처 수정 실패 : " + data.message);
}
//다이얼로그(모달) 창 닫기
$("#input_dialog").dialog("close");
});
}
//삭제 처리
var deleteContact = function(no) {
if(confirm("정말로 삭제하시겠습니까?") == true) {
$.post("/contact/delete.do", { no : no }, function(data) {
var data =JSON.parse(data);
if(data.status == "ok") {
//정상 삭제 됐을 때 현재 페이지 다시 조회
viewContactList();
} else {
alert("연락처 삭제 실패 : " + data.message);
}
});
}
}
// 3. 이벤트 함수
$(document).ajaxStart(function() {
//ajax 호출 시 로딩 표시
ajaxLoading(true);
}).ajaxStop(function() {
//ajax 완료 시 로딩 숨김
ajaxLoading(false);
});
//추가 버튼 클릭 시 다이얼로그(모달) 창 오픈
$("#btnNewContact").click(function() {
//다이얼로그 초기화 메소드
initializeInputForm();
//다이얼로그 설정
$("#input_dialog").dialog({
modal : true,
buttons : {
"추가" : addContact,
"취소" : cancelInput
}
});
//다이얼로그(모달) 창 오픈
$("#input_dialog").dialog("open");
});
//수정 버튼 클릭 시 발생 이벤트
$("#contactlist").on("click", "button.update", function() {
var no = $(this).data("no");
editContact(no);
});
//삭제 버튼 클릭 시 발생 이벤트
$("#contactlist").on("click", "button.delete", function() {
var no = $(this).data("no");
deleteContact(no);
});
// 4. 화면 초기화 코드
//처음 접속 시 ajax 요청 및 데이터 표출
viewContactList();
});
</script>
<!-- viewtemplate 영역 -->
<script id="tmpl_contact" type="text/x-jsrender">
<tr>
<td>{{:no}}</td>
<td>{{:name}}</td>
<td>{{:tel}}</td>
<td>{{:address}}</td>
<td>
<button data-no="{{:no}}" role="button"
class="update ui-button ui-state-default ui-button-text-only">
<span class="ui-button-text">수정</span>
</button>
<button data-no="{{:no}}" role="button"
class="delete ui-button ui-state-default ui-button-text-only">
<span class="ui-button-text">삭제</span>
</button>
</td>
</tr>
</script>
</body>
</html>
1. 새로운 연락처 추가하기
2. 연락처 수정하기
3. 연락처 삭제하기
반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
| [Ajax] 20. Ajax jsRender 템플릿 분리하기 (0) | 2021.10.07 |
|---|---|
| [Ajax] 19. Ajax 제이쿼리 플러그인 (0) | 2021.10.06 |
| [Ajax] 18. 기타 메소드 (0) | 2021.10.06 |
| [Ajax] 17. Ajax 전역 이벤트 함수 (0) | 2021.10.06 |
| [Ajax] 16. 헬퍼 함수 (0) | 2021.10.06 |
댓글