3. JSP의 기본예제
기본예제 1(for문 이용하기) 1. for문을 이용해서 First.jsp다시 만들기 <html> <head><title>Marvel의 웹서버</title></head> <body> <hr> <% for(int i = 0 ; i < 5 ; i++) { out.println(“<p align=‘center’>여기는 <b>Marvel</b>의 웹서버입니다.</p>”); } %> </body> </html> JSP(JavaServerPages)
기본예제 1(for문 이용하기) 앞의 소스를 <jakarta-tomcat>/webapps/examples/폴더에 For_exam.jsp로 저장한다. 그리고 브라우저에서 http://localhost/examples/For_exam.jsp로 불러와 본다. JSP(JavaServerPages)
기본예제 2(날짜 알아보기) 서버의 날짜를 알아본다. <html> <head><title>날짜와 시간</title></head> <body> <hr> <p align=‘center’>오늘의 날짜와 시간은<br> <font color=‘blue’><%=new java.util.Date()%></font><br> 입니다.</p> </body> </html> JSP(JavaServerPages)
기본예제 2 (날짜 알아보기) 앞의 소스를 <jakarta-tomcat>/webapps/examples/폴더에 Date.jsp로 저장한다. http://localhost/examples/Date.jsp로 불러와 본다. JSP(JavaServerPages)
기본예제 3(변수로 값 전달) 변수를 통해 값을 전달한다. <html> <head> 클라이언트가 입력한 내용에 따라서 웹 서버에서 보여주는 결과가 달라지는 동적인 예제를 실습해 보자. E-mail을 묻는 화면을 만든다.(Email.html) <html> <head> <title>E메일을 알아본다.</title> <style> <!-- .tdtitle0 { font-family:gulim; font-size:10pt; color:#eeeeee; background-color:#6396cf;} .tdtitle { font-family:gulim; font-size:10pt; color:#ffffff; background-color:#6396cf;} .tdcontent {background-color:#A4C2E3} --> </style> </head> <body bgcolor=white> <p align="center"> <form name="Emailform" method="get" action="Email_Res.jsp"> <br><br><br> JSP(JavaServerPages)
기본예제 3 (변수로 값 전달) JSP(JavaServerPages) <table border=0 width=300> <tr> <td class="tdtitle0" align="center" width=300 height=40 colspan=2> <p align=center><b><font size=3>당신의 E메일은?</font></b></p> </td> </tr> <td width=100 height=40 class=tdtitle align="center"> <p align="center"> <B> E-mail </B></p> <td width=200 height=40 class=tdcontent> <p align="center"> <input type=text name="email" size="20" ></p> <td class=tdtitle0 align=center colspan=2 width="300" height=40> <p align="center"> <input type=submit value=' 확 인 '> <input type=reset value=' 취 소 '> </p> </table> </form> </body> </html> JSP(JavaServerPages)
기본예제 3 (변수로 값 전달) <html> <head> 이제 html에 E-mail을 입력해서 전송해 주면 실행하는 파일인 Email_Res.jsp 파일을 보도록 하자. <html> <head> <title>Email_Res.jsp</title> <style> <!-- .tdtitle0 { font-family:gulim; font-size:10pt; color:#eeeeee; background-color:#6396cf;} .tdtitle { font-family:gulim; font-size:10pt; color:#ffffff; background-color:#6396cf;} .tdcontent {background-color:#A4C2E3} --> </style> </head> <body bgcolor=white> <p align="center"> <br><br><br> JSP(JavaServerPages)
기본예제 3 (변수로 값 전달) <table border=0 width=300> <tr> <td class="tdtitle0" align="center" width=300> <p align=center><b><font size=3>나의 E메일은</font></b></p> </td> </tr> <td class="tdcontent" align="center" width=300> <input type="text" value=<%=request.getParameter("email")%>> <p align=center><b><font size=3>입니다.</font></b></p> </table> </body> </html> JSP(JavaServerPages)
기본예제 3 (변수로 값 전달) 30줄 가량의 프로그램이지만 사실 중요한 부분은 붉게 표시한 부분이다. 즉 Email.html의 Email이라는 객체에 값을 넣어서 보내주면 이 값을 서버의 입장에서는 request(요구)해서 이를 text박스에 넣으라는 간단한 프로그램이다. <jakarta-tomcat>/webapps/examples/폴더에 Email_Res.jsp로 저장한다. http://localhost/examples/Email.html로 접속해서 Email을 입력해 본다. JSP(JavaServerPages)
기본예제 3 (변수로 값 전달) 주소 표시줄을 보자 <form name=“Emailform” method=“get” action=“Email_Res.jsp”>이때 자료를 전송하는 일을 담당하는 method=“get”이라는 명령이 바로 데이터를 주소에 실어서 보내는 역할을 한다. 만약 중요한 자료를 보낼 때는 method=“post”인 POST방식으로 전송한다. JSP(JavaServerPages)
기본예제 4(라디오버튼 이용) 라디오 버튼을 활용해 본다. 이번에는 좋아하는 계절을 묻는 간단한 프로그램을 만들어 보겠다. 질문을 하는 파일을 Season.html로 하고, 그 결과로 서버가 응답하는 파일을 Season_Res.jsp로 한다. Season.html <html> <head> <title>좋아하는 계절</title> <style> <!-- .tdtitle0 { font-family:gulim; font-size:10pt; color:#000000; background-color:#BB69DA;} .tdtitle { font-family:gulim; font-size:10pt; color:#000000; background-color:#DFB3F0;} .tdcontent {background-color:#DFB3F0} --> </style> </head> JSP(JavaServerPages)
기본예제 4 (라디오버튼 이용) <body bgcolor=white> <p align="center"> <form name="Seasonform" method="get" action="Season_Res.jsp"> <br><br><br> <table border=0 width=300> <tr> <td class="tdtitle0" align="center" width=300 height=40 colspan=2> <p align=center><b>당신이 좋아하는 계절은?</b></p> </td> </tr> <td width=70 height=40 class=tdtitle align="center"> 1 <td width=230 height=40 class=tdcontent> <input name="season_all" type="radio" value="봄" checked> 봄 2 <input name="season_all" type="radio" value="여름"> 여름 JSP(JavaServerPages)
기본예제 4 (라디오버튼 이용) JSP(JavaServerPages) <tr> <td width=70 height=40 class=tdtitle align="center"> 3 </td> <td width=230 height=40 class=tdcontent> <input name="season_all" type="radio" value="가을"> 가을 </tr> 4 <input name="season_all" type="radio" value="겨울"> 겨울 <td class=tdtitle0 align=center colspan=2 width="300" height=40> <p align="center"> <input type=submit value=' 확 인 '> <input type=reset value=' 취 소 '> </p> </form> </table> </body> JSP(JavaServerPages)
기본예제 4 (라디오버튼 이용) <form name=“Seasonform” method=“get” action=“Season_Res.jsp”>부분은 폼의 이름은 “Seasonform”이고 전송방식은 앞의 예제와 마찬가지로 “get”방식이다. 값의 전송이 잘 되었다면 서버에서 응답해 줄 파일은 “Season_Res.jsp”이 된다. <input name=“season_all” type=“radio” value=“봄” checked>봄 이 부분을 한마디로 해석하면 “season_all”이라는 라디오 버튼 객체를 만들고 화면에 봄이라고 나타나고 그 값을 체크하면 실제 서버에 “봄”이라는 값이 전달 된다는 뜻이다. (checked는 default) <jakarta-tomcat>/webapps/examples/폴더의 Season.html으로 저장한다. JSP(JavaServerPages)
기본예제 4 (라디오버튼 이용) Season_Res.jsp <html> <head> <title>Season_Res.jsp</title> <style> <!-- .tdtitle0 { font-family:gulim; font-size:10pt; color:#000000; background-color:#BB69DA;} .tdtitle { font-family:gulim; font-size:10pt; color:#000000; background-color:#DFB3F0;} .tdcontent {background-color:#DFB3F0} --> </style> </head> <body bgcolor=white> <p align="center"> <br><br><br> JSP(JavaServerPages)
기본예제 4 (라디오버튼 이용) <table border=0 width=300> <tr> <td class="tdtitle0" align="center" width=300 height=40> <p align=center><b>내가 좋아하는 계절은</b> </p> </td> </tr> <td class="tdcontent" align="center" width=300 height=40> <input type="text" size="4" value="<%=request.getParameter("season_all")%>"> <p align=center><b>입니다.</b></p> </body> JSP(JavaServerPages)
기본예제 4 (라디오버튼 이용) <input type=“text” size=“4” value=“<%=request.getParameter(“season_all”)%>”>웹서버가 “season_all”이라는 값을 request(요구)해서 Text박스에 넣으라는 뜻이다. <jakarta-tomcat>/webapps/examples/폴더에 Season_Res.jsp로 저장하고 브라우저에서 http://localhost/examples/Season.html로 들어가 본다. JSP(JavaServerPages)
기본예제 5(자바빈즈 이용) 자바 빈즈(Java Beans)를 이용해 본다. 비주얼 베이직에서 컴포넌트(Component)와 같은 개념을 가진 것이 바로 자바빈즈(Java Beans)이다. 컴파일 해놓은 것을 가져다가 조립만 하면 되므로 재사용성이 높아지고 그리고 이미 컴파일 된 것이므로 속도나 이식성 측면에서 훌륭해진다. JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) Myname.html로 이름을 입력받고 그 결과로 Myname_Res.jsp가 작동하여 결과를 뿌릴 때 자바빈즈(Java Beans)를 사용할 것이다. Myname.html <html> <head> <title>Beans를 이용하여 이름을 알아본다</title> <style> <!-- .tdtitle0 { font-family:gulim; font-size:10pt; color:#000000; background-color:#E6DE57;} .tdtitle { font-family:gulim; font-size:10pt; color:#000000; background-color:#F0EEBF;} .tdcontent {background-color:#F0EEBF} --> </style> </head> <body bgcolor=white> <p align="center"> <form name="Mynameform" method="post" action="Myname_Res.jsp"> <br><br><br> JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) JSP(JavaServerPages) <table border=0 width=300> <tr> <td class="tdtitle0" align="center" width=300 height=40 colspan=2> <p align=center><b><font size=3>당신의 이름은?</font></b></p> </td> </tr> <td width=100 height=40 class=tdtitle align="center"> <p align="center"> <B> 이 름 </B></p> <td width=200 height=40 class=tdcontent> <p align="center"> <input type=text name="myname" size="20"></p> <td class=tdtitle0 align=center colspan=2 width="300" height=40> <p align="center"> <input type=submit value=' 확 인 '> <input type=reset value=' 취 소 '> </p> </table> </form> </body> </html> JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) <jakarta-tomcat>/webapps/examples/폴더에 Myname.html로 저장한다. http://localhost/examples/Myname.html로 접속해 본다. 앞의 파일에서 중요한 부분은 <form name=“Mynameform” method=“post” action”Myname_Res.jsp”> 이 폼은 이름은 “Mynameform”이고 전송방식은 “post”이고 데이터가 전송되면 웹 서버에서는 “Myname_Res.jsp” 파일이 작동하게 된다. <input type=text name=“myname” size=“20”> 이름을 받는 객체명은 “myname”이다. 만약 여기에 “홍길동”이라는 값을 입력했다면 “myname”이라는 객체에 담아 “Myname_Res.jsp”파일에다 가져다 줄 것이다. JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) Myname_Res.jsp <jsp:useBean id="idMyname" scope="page" class="clsMyname"> <jsp:setProperty name="idMyname" property="myname" param="myname" /> </jsp:useBean> <html> <head> <title>Myname_Res.jsp</title> <style> <!-- .tdtitle0 { font-family:gulim; font-size:10pt; color:#000000; background-color:#E6DE57;} .tdtitle { font-family:gulim; font-size:10pt; color:#000000; background-color:#F0EEBF;} .tdcontent {background-color:#F0EEBF} --> </style> </head> JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) JSP(JavaServerPages) <body bgcolor=white> <p align="center"> <br><br><br> <table border=0 width=300> <tr> <td class="tdtitle0" align="center" width=300 height=40> <p align=center><b>당신의 이름은</b> </p> </td> </tr> <td class="tdcontent" align="center" width=300 height=40> <input type="text" size="8" value="<jsp:getProperty name="idMyname" property="myname" />"> </p> <p align=center><b>입니다.</b></p> </table> </form> </body> </html> JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) <jakarta-tomcat>/webapps/examples/폴더에 Myname_Res.jsp로 저장한다. 빈즈(Beans)는 <jsp:useBean>로 시작해서</jsp:useBean>로 끝난다. class=“clsMyname”은 clsMyname이라는 class 파일을 참조하라는 의미이다. <jsp:setProperty name=“idMyname” property=“myname” param=“myname”/> 빈즈도 하나의 객체이기에 그 객체 안의 변수를 설정 할 때는 <jsp:setProperty>를 사용한다. <jsp:getProperty name=“idMyname” property=“myname”/> 객체의 변수에 값을 세팅할 때는 <jsp:setProperty>를 썼다면 불러올 때는 <jsp:getProperty>를 써야 한다. JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) public class clsMyname { private String myname; 빈즈(Beans)의 역할을 담당하는 clsMyname.java파일을 만들어 보자. public class clsMyname { private String myname; public void setMyname(String n) { this.myname = n; } public String getMyname(){ return myname; JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) <jsp:setProperty name=“idMyname” property=“myname” param=“myname”/> 이때 property=“myname” 부분이 바로 여기서 “private String myname;”으로 대치가 된다. Myname_Res.jsp에서 property=“myname”으로 값을 보내줬으므로 여기서는 그 변수를 설정해야 하는 것이다. 변수를 실제로 세팅하는 메소드는 setXXX로 시작해야 한다. 값을 불러오는 것은 getXXX이다. 여기서 XXX는 set과 get이 서로 같아야 한다. setMyname으로 선언했다면 getMyname으로 선언해야 한다. <jakarta-tomcat>/webapps/examples/WEB-INF/classes에 clsMyname.java로 저장한다. 저장한 .java파일을 컴파일 시킨다. JSP(JavaServerPages)
기본예제 5 (자바빈즈 이용) JSP(JavaServerPages)
컨텍스트(Context) 만들기 ‘Ch3’ 컨텍스트 만들기 <jakarta-tomcat>\webapps 하위 폴더로 ‘Ch3’를 만든다. <jakarta-tomcat>\conf에 있는 server.xml을 연다. JSP(JavaServerPages)
컨텍스트(Context) 만들기 <Context path="/Ch3" docBase="webapps/Ch3" 앞의 그림에서 표시된 부분이 컨텍스트를 추가한 부분이다. 실제로 직접 추가해야 될 코드는 다음과 같다. 새로만든 ‘Ch3’폴더 하위에 서블릿 컨테이너가 작업할 수 있도록 WEB-INF폴더를 만들고 그 하위에 class들을 위치시킬 ‘classes’폴더를 만들어야 한다. 그리고 마지막으로 /examples/WEB-INF/밑에 있는 ‘web.xml’을 복사해서 /Ch3/WEB-INF/에가져다 놓아야 한다. <Context path="/Ch3" docBase="webapps/Ch3" debug="0" reloadable="true"> </Context> JSP(JavaServerPages)
과 제 앞 부분의 “변수로 값 전달하기”를 응용하여 다음과 같은 회원가입 양식을 만들고 입력한 정보를 출력하는 페이지를 작성하라. JSP(JavaServerPages)