본문 바로가기
3.구현/Java or Kotlin

JSP 간단하게 시작하기...

ospace 2008. 12. 5. 19:15

JSP는 다 알것이라고 생각하고 JSP설명은 뛰어넘도록 하겠다. 여기서는 실제 JSP 간단한 사용예제를 보도록 하겠다.

여기서는 세세한 설명은 없고, 간단한 설명과 결과를 확인하는 위주로 하겠다. 그리고 서블렛에 대한 사용 예는 없다.

Writer: http://ospace.tistory.com/(ospace114@empal.com) 2008.12.05

순서

  1. JSP 간단한 구조 및 설정
  2. JSP로 간단한 계산 프로그램 생성
  3. Java 객체와 연동하기

1. JSP 간단한 구조 및 설정

JSP를 사용하기 위해서는 톰캣이 필요하다. 물론 톰캣을 사용하기 위해서는 java도 필요하다. 대충 받아서 설치한다.

Java JDK: http://java.sun.com/javase/downloads/index.jsp
톰캣: http://tomcat.apache.org/

서로 간의 환경 설정은 다른 곳에서 알아보시고, 작동만 되면 됩니다. ㅡ.ㅡ;

톰캣 서비스를 수동으로 시작하려면, 톸캣 설치된 폴더에서 bin 폴더에 startup.bat를 실행하면 되고, 종료는 shutdown.bat를 실행하면된다. 실행이 되었다면 웹브라우저로 아래 주소로 접속되면 설치가 잘 된 것 이다.

http://localhost:8080/

접속한 화면...

위의 화면은

톰캣설치폴더\webapps\ROOT\

에 있는 파일을 불러오는 것이다. 간단한 예제도 있으니 살펴보면된다. ㅡ.ㅡ;

일단 테스트를 위해 root 위치를 변경하기 위해서

톰캣설치폴더\conf\server.xml

server.xml를 파일을 변경하면 된다. Context테그 값을 설정하면된다.

그리고, 톰캣을 다시 시작한다.

c:\...> shutdown.bat
c:\...> startup.bat

위에서 docBase에 설정된 폴더가 http://localhost:8080/으로 접속시 불러오는 파일이다. 지금은 아무 것도 없으니깐 불러와도 에러만 뜰 것이다.

2. JSP로 간단한 계산 프로그램 생성

간단한 JSP 예제를 보자.

만들 jsp파일명: foo.jsp
만들어지는 폴더위치: d:\testjsp\web\ (앞에 server.xml에서 docBase 값)

foo.jsp 소스파일

<%@ page contentType="text/html;charset=UTF-8" %>
<% 
    String param1 = request.getParameter("param1");
    String param2 = request.getParameter("param2");
    int result = 0;
    if(param1 != null && param2 != null) {
        result = Integer.parseInt(param1) + Integer.parseInt(param2);
    }
%>
<html>
    <body>
        <form id=="f1" action="">
            <input type="text" name="param1" value="<%=param1%>">
            +  <input type="text" name="param2" value="<%=param2%>">
            =  <%=result%><br>
            <input type="submit" value="run">
        </form>
    </body>
</html>

위의 파일을 저장하고 웹브라우저로 다음 URL로 접속한다.

http://localhost:8080/foo.jsp

값 입력하고 "run" 버튼을 누루면 값이 덧셈 결과가 반환된다.

3. Java 객체와 연동하기

앞의 예제는 JSP 페이지 내에서만 처리되었다. 실제 자바객체와 연동되는 예제를 보자.
이번 예제는 앞의 예제와 같지만, 계산은 java 객체에서 이뤄진다.

먼저 JSP 파일을 만들자.

만들 jsp파일명: bar.jsp
만들어지는 폴더위치: d:\testjsp\web\ (앞에 server.xml에서 docBase 값)

bar.jsp 소스파일

<%@ page contentType="text/html;charset=UTF-8" %>
<jsp:useBean id="calcTest" scope="page" class="com.test.CalcTest">
    <!-- CalcTest객체를 calcTest로 매핑 -->
    <jsp:setProperty name="calcTest" property="*"/>
</jsp:useBean>
<html>
  <body>
    <form name="f1" action="">
      <input type="text" name="param1" value="<%=calcTest.getParam1()%>">
      +  <input type="text" name="param2" value="<%=calcTest.getParam2()%>">
      =  <%=calcTest.result()%><br><input type="submit" value="run">
    </form>
  </body>
</html>

다음은 Java 소스코드이다. 이건 폴더 위치가 다르다.

만들 java파일명: CalcTest.java
java 파일이 있는 위치: d:\testjsp\web\WEB-INF\src\com\test

위의 com\test는 패키지 명이다.

컴파일된 class파일이 복사되는 위치가 WEB-INF폴더이다. 즉 앞의 class에 의해서 검색되는 자바 객체는 현재 웹 루트위치인 d:\testjsp\web에 있는 WEB-INF\classes 폴더에 복사가 된다. 패키지라면, 패키지 폴더가 생성된다.

만들어진 class파일명: CalcTest.class
class파일이 복사될 위치: d:\testjsp\web\WEB-INF\classes\com\test

CalcTest.java 소스파일

package com.test;
public class CalcTest {
    private int param1 = 0;
    private int param2 = 0;
    public int getParam1() {
        return param1;
    }
    public void setParam1(int param1) {
        this.param1 = param1;
    }
    public int getParam2() {
        return param2;
    }
    public void setParam2(int param2) {
        this.param2 = param2;
    }
    public int result() {
        return param1 + param2;
    }
}

모든 준비가 끝났다. 그럼 결과를 보도록 하자.

run 버튼을 누르면

태그에 별다른 액션이 없으므로 자동으로 자신 파일을 불러온다. 그러면 자동적으로 jsp가 실행되면서 결과를 가져오게 된다.

4. 기타 팁

앞에서는 run이라는 하나의 버튼으로 작업을 하게 되었다. 실제 작업에 있어서 여러 버튼에 따라서 작업 내용이 달라지고, 결과도 달라지게 된다. 몰론 여러 페이지로 나눠서 구분하고 실행하는 버튼이나 작업이 하나이면 별다른 문제가 없다. 부가적인 설명 없이 바로 코드를 보겠다.

jap 파일과 java 파일만 보여주겠다. 자바 스크립트를 조금만 할 줄 알면 쉽게 이해될 것이다. 그리고 각 파일이 저장되는 위치는 앞의 내용과 동일하다.

실행하는 것도 같다.

foo.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<jsp:useBean id="calcTest" scope="page" class="com.test.CalcTest">
    <jsp:setProperty name="calcTest" property="*"/>
</jsp:useBean>
<html>
<head>
    <script language="JavaScript" type="text/JavaScript">
        function runCalc(flag){
            var f = document.f1 ;
            f.actionID.value = flag;
            f.submit();
        }
    </script>
</head>
<body>
    <form name="f1" action="">
        <input type="text" name="param1" value="<%=calcTest.getParam1()%>">,
        <input type="text" name="param2" value="<%=calcTest.getParam2()%>"> =>
        <%=calcTest.result()%><br>
        <input type="hidden" name="actionID" value="">
        <input type="button" value="덧셈" onClick="runCalc(1)">
        <input type="button" value="곱셈" onClick="runCalc(2)">
    </form>
</body>
</html>

CalcTest.java

package com.test;
public class CalcTest {
  private int param1 = 0;
  private int param2 = 0;
  private int actionID = 0;
  public int getActionID() {
    return actionID;
  }
  public void setActionID(int actionID) {
    this.actionID = actionID;
  }
  public int getParam1() {
    return param1;
  }
  public void setParam1(int param1) {
    this.param1 = param1;
  }
  public int getParam2() {
    return param2;
  }
  public void setParam2(int param2) {
    this.param2 = param2;
  }
  public int result() {
    switch(getActionID()) {
    case 1: // 덧셈
      return param1 + param2;
      break;
    case 2: // 곱셈
      return param1 * param2;
      break;
    default:
      return 0;
    }
  }
}

결과를 보자.

History

2008.12.05 ospace 최초작성.

반응형

'3.구현 > Java or Kotlin' 카테고리의 다른 글

[java] enum 사용하기  (0) 2016.11.11
[ibatis] 리스트형 데이터 사용해서 쿼리 작성하기(iterate)  (0) 2016.11.10
Java 쓰레드 간단한 코드 예제  (0) 2008.07.24
Java 쓰레드 상태  (0) 2008.07.24
Jar 패키징(Packaging)  (0) 2008.07.21

'3.구현/Java or Kotlin' Related Articles

티스토리툴바