Class #13

Contents
Class #13: Web Application 개발
in place May 14, 2002, last modified May 29, 2002, working ...

Server Side

MS Active Server Pages(ASP) 소개

CGI (Common Gateway Interface)

기존의 HTML은 정해진 정적인 HTML 파일만 서비스함 (그림 13-1)
HTML Page에서 특정한 외부 프로그램을 입력 Parameter와 함께 구동할 수 있게한 방법
HTML의 FORM Tag 이용
<FORM ACTION=program.cgi > ... </FORM > 에서 해당 FORM에서 입력이 완료되면 실행될 프로그램(program.cgi) 정의
FORM Tag 안에 INPUT Tag를 이용하여 전달하고자 하는 변수를 넘겨줌
<INPUT NAME=parameter_name TYPE=TEXT> 는 Text를 넣을수 있는 빈입력칸을 만들며 입력된 값을 parameter_name이라는 변수값으로 넘겨줌
Text Input Tag가 보이는 모습
INPUT Tag중 Type 이 'SUBMIT'인 Tag는 buttonm을 만들며 이를 누르면 ACTION에 정의된 프로그램을 실행
<INPUT NAME=parameter_name TYPE=SUBMIT VALUE=입력 > 는 Text를 넣을수 있는 빈입력칸을 만들며 입력된 값을 parameter_name이라는 변수값으로 넘겨줌
Submit Input Tag가 보이는 모습
SUBMIT Button을 누르면 해당 프로그램과 파라메터 값이 Web Server로 전달
Web Server는 해당 프로그램을 파라메터 값에 적용하여 실행
http://server_name/program.cgi?parameter_name=test¶meter_name2=test2...
결과는 CGI 프로그램에서 STDIO로 HTML을 만들어 출력
C 언어의 경우 printf("<B><FONT COLOR=RED>월드컵 16강!</FONT></B>);
월드컵 16강
그림 13-2에 CGI 예제 설명

그림 13-1 정적 HTML File Service

그림 13-2 FORM Tag를 이용한 동적 HTML File Service

Server Side Script

CGI 방식중 Web Server가 요구되는 파일중 특정 Extension (예 *.asp)를 가진 파일을 Script 파일로 인식하고 이를 Interpret 하는 방식 (그림 13-3 참조)
많이 쓰는 언어로는 MS Active Server Pages(ASP), Java Server Pages(JSP) 등이 있다.
ASP 경우 화일 확장자가 asp 인경우 IIS 확장(Frontpage Server Extension)에서 이를 Interpret 함.
문법 형식은 Visula Basic과 유사한 VB Script를 사용 - Function도 같은 형식으로 지원
CGI 및 Session을 위해 몇가지 특별한 객체 제공 - Request, Response, Application, Session
Database Connection을 위해 특별한 객체 제공 - ADO 객체 제공
외의 많은 3rd Party Component를 이용하여 쉽게 Web Application 개발 가능 - Upload Components

Architecture

그림 13-3 ASP를 이용한 동적 HTML 서비스
Visual Interdev
ASP 개발을 지원하기 위한 Visual Studio 내부의 IDE

ASP 기능

Request - FORM의 INPUT Tag에서 입력된 Parameter 값을 Return
Response - Web 화면에 출력
Database Connections - Database Connection, SQL 실행, 결과 Record Set Return
Session 변수 - Session 이 진행되는 동안 해당 변수의 값을 서버에서 저장관리해 줌
Server Component - 서버의 여러가지 일을 처리하는 Componet - Upload, Tree등

ASP Example (1) - 사용자 등록

입력FORM

<B>사용자 등록</B></P> <HR> <UL> <LI>사용자 Login 이 중복되지 않도록 할것 <A HREF="example02.asp">user list</A> <LI>공란을 두지 말것. <LI>passwd는 노출될수 있으므로 평소쓰지 않는 임의의 내용을 넣을것 </UL> <TABLE border=0> <FORM NAME=NEW_USER ACTION=example0302.asp METHOD=POST > <TR><TD>user id<TD><INPUT NAME=user_id TYPE=TEXT> <TR><TD>성<TD><INPUT NAME=last_name TYPE=TEXT> <TR><TD>이름<TD><INPUT NAME=first_name TYPE=TEXT> <TR><TD>메일주소<TD><INPUT NAME=email TYPE=TEXT> <TR><TD>휴대전화번호<TD><INPUT NAME=celphone TYPE=TEXT> <TR><TD>패스워드<TD><INPUT NAME=passwd TYPE=PASSWORD> <TR><TD><TD><INPUT TYPE=SUBMIT value="INSERT"> </FORM>

사용자 등록

사용자 Login 이 중복되지 않도록 할것 user list
공란을 두지 말것.
passwd는 노출될수 있으므로 평소쓰지 않는 임의의 내용을 넣을것

user id
성
이름
메일주소
휴대전화번호
패스워드

example0302.asp 파일 - 실제 데이타베이스에 접근하여 입력

<% user_id = Request("user_id") last_name = Request("last_name") first_name = Request("first_name") email = Request("email") celphone = Request("celphone") passwd = Request("passwd") Dim DbCon, strDbCon Set DbCon = Server.CreateObject("ADODB.Connection") strDbCon = "Provider=sqloledb;Data Source=murano;Initial Catalog=MAIN;User Id=kedb;Password='';" DbCon.Open strDbCon sql="INSERT INTO USERS(user_id ,last_name,first_name,e_mail,celphone, passwd) " sql = sql + "VALUES('" sql = sql +user_id+"', '"+last_name+"','"+first_name+"', " sql = sql + "'"+email+"','"+celphone+"','"+passwd+"' " sql = sql + ")" Set Result=DbCon.Execute(sql) response.redirect("example02.asp") %>
ASP Example (2) -example02.asp 파일 - 등록된 사용자 출력
<% Dim DbCon, strDbCon Set DbCon = Server.CreateObject("ADODB.Connection") strDbCon = "Provider=sqloledb;Data Source=murano;Initial Catalog=MAIN;User Id=kedb;Password='';" DbCon.Open strDbCon sql="SELECT user_id, last_name, first_name, e_mail, celphone " sql = sql+ " FROM USERS " Set rs = Server.CreateObject("ADODB.RecordSet") rs.Open sql, DbCon IF rs.EOF OR rs.BOF THEN response.write("<P>No user exist !") END IF Response.Write("<blockqutoe>") Response.write("<TABLE border=1 cellpadding=2 cellspacing=0>") Response.Write("<TR><TD class=TH>id<TD class=TH>name<TD class=TH>email<TD class=TH>celphone") DO WHILE NOT rs.EOF Response.Write("<TR><TD>"+CStr(rs("user_id"))+"<TD>"+CStr(rs("last_name"))+" "+CStr(rs("first_name"))+"<TD>"+CStr(rs("e_mail"))+"<TD>"+CStr(rs("celphone"))+" ") rs.MoveNext LOOP Response.Write("</TABLE>") %>

결과

id name email celphone
dnc 도남철 namchul@hanmail.net 016-437-2305

VB Script 기능

Clinet Side

Clinet Side Script - Java Script

Client Side Script 란

Web Server에 파일 형태로 저장되어 있다가 Client의 요청에 의하여 Client 쪽에 Download되어 실행되는 Script Language
Java Applet과 비교 - Applet은 Binary Code가 Download되어 실행
Web Browser 내에 해당 언어에 대한 Interpreter가 설치되어 이를 해석하여 실행
Server 연결이 필요없는 Client 쪽의 Process를 담당할 수 있어 부하 분산의 효과가 있음
종류로는 Java Script, J Script, VB Script 등이 있음

그림 13-4 Client Side Script

Java Script 란

Web Server에 파일 형태로 저장되어 있다가 Client의 요청에 의하여 Client 쪽에 Download되어 실행되는 Script Language
Java Applet과 비교 - Applet은 Binary Code가 Download되어 실행
Web Browser 내에 해당 언어에 대한 Interpreter가 설치되어 이를 해석하여 실행
Server 연결이 필요없는 Client 쪽의 Process를 담당할 수 있어 부하 분산의 효과가 있음
종류로는 Java Script, J Script, VB Script 등이 있음

예제
%> <HTML> <script language="javascript"> function ch_input() { if((form1.path.value=="")||(form1.title.value=="")) { alert("제목과 upload할 파일 이름을 입력해야 합니다.") form1.path.focus() } else { form1.submit() } } </script> <HEAD> </HEAD> <BODY> <blockquote> <TABLE border=0 cellpadding=4 cellspacing=1 bgcolor=gray width=80%> <TR><TD class=TH>이름<TD><%=CStr(rs("std_name"))%> <TD class=TH>학번<TD><%=std_id%> <TD class=TH>과목<TD> <% rs.close query = "SELECT a.class_no, a.class_name, b.id FROM CLASS a, COURSE b, STUDENT c " query = query + "WHERE c.std_id='"+std_id+"' AND b.std_id = c.std_id " query = query + " AND b.class_id = a.class_id " Set rs = Server.CreateObject("ADODB.RecordSet") rs.Open query, DbCon IF rs.EOF OR rs.BOF THEN response.write("<P>존재하지 않는 수업입니다.") END IF Response.Write("<FORM method=post action=upload.asp id=form1 name=form1 ENCTYPE='multipart/form-data'>") Response.Write("<SELECT NAME=course_id>") DO WHILE NOT rs.EOF Response.Write("<OPTION value="+CStr(rs("id"))+">"+CStr(rs("class_name"))+"("+CStr(rs("class_no"))+")") rs.MoveNext LOOP Response.Write("</SELECT>") %> </TABLE> <P> 과목란에서 해당하는 <B>과목</B>을 선택한 후, <BR>숙제의 제목을 입력하고 파일을 Upload 하세요. <TABLE border=0> <TR><TD> <TR><TD>제목: <TD><INPUT TYPE=TEXT width=100 cols=100 name=title> (100자이하) <TR><TD>파일: <TD><INPUT TYPE=FILE name=path id=path> <TR><TD><TD><INPUT TYPE=button value='입력' id=submit1 name=submit1 onclick=ch_input()> </FORM> </TABLE> </blockquote> <% call footnote() %> </BODY> </HTML>

Example of a Tree menu Java Script

DHTML 과 CSS Class 12 참조

Contents
Knowledge & Engineering Databases (c) copyright Namchul Do, 2002

id	name	email	celphone
dnc	도남철	namchul@hanmail.net	016-437-2305