2007. 4. 2. 11:56
카테고리 없음
1.개요
이번시간에는 주소록의 핵심 클라이언트 프로그램을 작성한다.
우리가 만들 주소록의 겉 모양은 아래와 같다.
아래의 text input 폼에 각각 이름,전화번호,주소를 입력한 후 '저장'버튼을 클릭하면 입력한 내용들이 새로운 행으로 테이블에 삽입이 되고 삽입된 행은 수정과 삭제 버튼을 갖게 된다.
삽입된 행의 수정 버튼을 클릭하면 해당 행의 각 컬럼들은 text input 폼으 형태로 전환이 되어 내용의 편집이 가능한 상태가 되고 수정 버튼과 삭제 버튼은 각각 확인,취소 버튼으로 바뀐다.
2.시작 - 손가락에서 불을 뿜어!!
우선 기본 HTML 을 작성한다.
테이블 사이즈나 css등은 입맛따라 골라드시되, css 셀렉터는 javascript 코딩시 그대로 적용을 해야 하니 그점만 주의하자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>AJAX 실전 테스트 - 주소록</title>
<style type="text/css">
.txt_name{
width: 90px;
}
.txt_tel{
width: 90px;
}
.txt_addr{
width: 300px;
}
.txt_editable{
background-color: #EEEEEE;
border: solid 1px #D9D9D9;
}
.txt_editable:hover{
background-color: #FFFF00;
}
.txt_readonly{
border: none;
background-color: #FFFFFF;
}
.btn{
cursor: pointer;
width: 40px;
background-color: #EEEEEE;
}
#main_tb{
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="main_tb" width="600" border="1">
<thead>
<tr>
<th width="100">이름</th>
<th width="100">전화</th>
<th width="*">주소</th>
<th width="100">작업</th>
</tr>
</thead>
<tbody id="address_list">
<tr>
<td><input id="frm_name" type="text" value="" class="txt_name txt_editable" /></td>
<td><input id="frm_tel" type="text" value="" class="txt_tel txt_editable" /></td>
<td><input id="frm_addr" type="text" value="" class="txt_addr txt_editable" /></td>
<td><input id="btn_submit" type="button" value="저장" class="btn" onclick="insertAdress()" /></td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<title>AJAX 실전 테스트 - 주소록</title>
<style type="text/css">
.txt_name{
width: 90px;
}
.txt_tel{
width: 90px;
}
.txt_addr{
width: 300px;
}
.txt_editable{
background-color: #EEEEEE;
border: solid 1px #D9D9D9;
}
.txt_editable:hover{
background-color: #FFFF00;
}
.txt_readonly{
border: none;
background-color: #FFFFFF;
}
.btn{
cursor: pointer;
width: 40px;
background-color: #EEEEEE;
}
#main_tb{
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="main_tb" width="600" border="1">
<thead>
<tr>
<th width="100">이름</th>
<th width="100">전화</th>
<th width="*">주소</th>
<th width="100">작업</th>
</tr>
</thead>
<tbody id="address_list">
<tr>
<td><input id="frm_name" type="text" value="" class="txt_name txt_editable" /></td>
<td><input id="frm_tel" type="text" value="" class="txt_tel txt_editable" /></td>
<td><input id="frm_addr" type="text" value="" class="txt_addr txt_editable" /></td>
<td><input id="btn_submit" type="button" value="저장" class="btn" onclick="insertAdress()" /></td>
</tr>
</tbody>
</table>
</body>
</html>
코딩을 다 하고 브라우져로 확인을 해보자.
이상이 없다면 이제 주소록의 기능을 하나하나 추가해 나간다.
우선 저당 버튼에 연결된 이벤트 핸들러 insertAddress()를 작성해보자.
insertAddress 에서는 입력된 데이터를 점검하고 이상이 없으면 DB에 정보를 기록하고 새로운 행을 만들어 테이블에 삽입한 다음 입력 폼을 초기화 하는것이다.
데이터 체크 → DB insert → Table Row 생성 → 입력폼 초기화
캡슐화를 통해서 insertAddress는 각 역할을 맡은 함수들을 호출하는것으로 간단하게 구성한다.function insertAdress(){
//data check
if(false == chkData()){
return false;
}
//db insert
//create table row
var table_section = document.getElementById('address_list');
addRow(table_section);
//form initialize
initFrm();
}
function chkData(){
var frm_name = document.getElementById('frm_name');
var frm_tel = document.getElementById('frm_tel');
var frm_addr = document.getElementById('frm_addr');
if(frm_name.value == ''){
alert('이름을 입력하세요.');
frm_name.focus();
return false;
}
if(frm_tel.value == ''){
alert('전화번호를 입력하세요.');
frm_tel.focus();
return false;
}
if(frm_addr.value == ''){
alert('주소를 입력하세요.');
frm_addr.focus();
return false;
}
return true;
}
function initFrm(){
var frm_name = document.getElementById('frm_name');
var frm_tel = document.getElementById('frm_tel');
var frm_addr = document.getElementById('frm_addr');
frm_name.value = '';
frm_tel.value = '';
frm_addr.value = '';
frm_name.focus();
}
function addRow(table_section){
}
//data check
if(false == chkData()){
return false;
}
//db insert
//create table row
var table_section = document.getElementById('address_list');
addRow(table_section);
//form initialize
initFrm();
}
function chkData(){
var frm_name = document.getElementById('frm_name');
var frm_tel = document.getElementById('frm_tel');
var frm_addr = document.getElementById('frm_addr');
if(frm_name.value == ''){
alert('이름을 입력하세요.');
frm_name.focus();
return false;
}
if(frm_tel.value == ''){
alert('전화번호를 입력하세요.');
frm_tel.focus();
return false;
}
if(frm_addr.value == ''){
alert('주소를 입력하세요.');
frm_addr.focus();
return false;
}
return true;
}
function initFrm(){
var frm_name = document.getElementById('frm_name');
var frm_tel = document.getElementById('frm_tel');
var frm_addr = document.getElementById('frm_addr');
frm_name.value = '';
frm_tel.value = '';
frm_addr.value = '';
frm_name.focus();
}
function addRow(table_section){
}
chkData()와 initFrm() 은 하는 일 만큼이나 코드도 간단하다.
addRow()는 좀 복잡해서 따로 설명하려한다.
테이블의 행을 만드는 작업을 자세히 들여다보면
- 테이블(section)에 빈 행(tr)을 만들고
- 만들어진 행에 열(td)를 만들고
- 각 열에 내용을 만든다.
복잡하니 하나하나 차근차근 해보자
우선 빈 행(tr)을 테이블(section)에 추가하려면 다음과 같이 하면 된다.
table_section.insertRow(index);
index는 생략할 수 있고 기본으로 맨 마지막에 추가가 된다.