잡다한 일상사 WebJoy.kr :: 데이터 입력받아 DB에 쓰고, 그 결과를 테이블로 출력

데이터 입력받아 DB에 쓰고, 그 결과를 테이블로 출력

WEB/AJAX 2007/06/13 20:28 by 아쿠아바다

http://blog.naver.com/hanbyi/110016870756

오늘 소개하고자 하는 소스는 폼에서 임의의 값을 입력받은 후, 그 값을 테이블에 저장하고, 테이블에 있는 내용을 Ajax를 이용하여 테이블 형식으로 또는 그래프 형식으로 불러오고자 한다.

그중에서 오늘은 입력받는 폼과 레이아웃을 만드는 정도로 소개하고, 다음 포스트에서 저장하고, 불러오는 작업을 진행해보도록 하겠습니다. 다음 그림은 소스를 수행한 결과입니다. 초록색 부분을 마우스로 끌면 움직이는 걸 보실 수 있어요~

font-family:tahoma;

font-size:9pt;

border-style:solid;

border-width:1; line-height:2

}
</style>

var dragflag = false; // 드래그 상태변수(기본값:드래그 안 함)
var dragobj; // 드래그할 대상을 저장할 변수(여기서는 div_main)

var x,y,sleft,sright;

// 마우스가 움직이면 호출되는 함수

function move(e){

   // 드래그 상태변수가 true값을 가질때만 지정된 객체(div_main)가 위치이동(left, top)
if(dragflag){
   dragobj.style.left = sleft + e.clientX - x;
   dragobj.style.top = sright + e.clientY - y;
   }

return false;
}

// 마우스가 눌려지면 호출되는 함수

function drags(obj, e){
dragobj = eval("document.all."+obj); // div_main 객체로 설정

dragflag = true; // 드래그 한다고 설정
   sleft = parseInt(dragobj.style.left + 0); // div_main 객체의 left, top 저장
   sright = parseInt(dragobj.style.top + 0);
   x = e.clientX; // 이벤트가 발생한 좌표값 저장
y = e.clientY;

document.onmousemove = move; // 마우스가 움직이면 move함수 호출

return false;
}

// 눌려진 마우스 버튼이 올라오면 드래그 설정상태를 false로 저장
document.onmouseup = new Function("dragflag = false;");
</script>

 * 마우스 끌기로 움직여 보세요~

</td>
</tr>
<tr>
<td style="border-style:none;border-width:0">

<TABLE border=1 width=250 cellpadding=3 cellspacing=3>
<form name="frmData">
   <TR>
   <TD width="170">Javascript : </TD>
   <TD width="80">

</TD>
   </tr>
   <tr>
   <TD>SQL Server : </TD>
<TD><input name="Text2" type="text" style="width:100%"></TD>
</tr>
<tr>
   <TD>ASP : </TD>
<TD><input name="Text3" type="text" style="width:100%"></TD>
   </TR>
   <tr>
<td colspan="2" align="right" >
<input type="button" value="적용" style="width:80" onClick="Apply();">
</td>
</tr>
</form>
</TABLE>

</td>
<td valign="top" style="border-style:none;border-width:0">

   <div id="div_tab_contents"></div>

   </td>
</tr>
   </table>

</td>
</tr>
</table>
</div>
</body>

이 소스에서 [데이터시트보기]를 클릭하면 'div_tab_contents'태그에 테이블 형태로 값을 표현할 것이고, [그래프로 보기]를 클릭하면 그래프 형태로 값을 표현할 것입니다.

그럼 다음 포스트에서 봅시다~

'WEB > AJAX' 카테고리의 다른 글

DHTML & Ajax 콤보 (0)	2007/06/25
셀렉트를 레이어로 변환해서 보여주기(이미지 삽입 가능) (0)	2007/06/25
데이터 입력받아 DB에 쓰고, 그 결과를 테이블로 출력 (0)	2007/06/13
우편번호 DB 배포 사이트와 AJAX로 구현하는 우편번호 검색 프로그램안내 (0)	2007/06/13
AJAX 강의 7-2장 - 디버깅툴/FireFox 자바스크립트 콘솔 (0)	2007/06/07
AJAX 강의 7-1장 - 디버깅툴/XMLHttpRequest Debugging (0)	2007/06/07