시작하기 전에 개발 환경을..

jdk1.7: http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u3-download-1501626.html 
톰캣7.0: http://ftp.daum.net/apache/tomcat/tomcat-7/v7.0.26/bin/apache-tomcat-7.0.26.exe
이클립스: http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/indigo/SR2/eclipse-jee-indigo-SR2-win32.zip

jdk1.7, 톰캣7.0, 이클립스 모두 연동이 되어 있는 환경을 가정으로 설명하겠습니다.




1. 이클립스를 실행하여 Dynamic Web Project 를 생성합니다.
    File -> New -> Dynamic Web Project 클릭!






2. 프로젝트 이름을 지정합니다.
    저는 JSPBean 으로 지정하겠습니다.






3. 생성된 프로젝트에서 경로를 살펴보면 WEB-INF 라는 폴더가 있습니다. 여기서 classes 폴더를 생성합니다.
    WEB-INF -> New -> Folder 클릭!






4. 폴더 이름을 classes 로 지정합니다.
    폴더 이름을 classes로 입력하고 Finish를 클릭합니다.







5. Java Build Path를 설정하기 위해 Properties를 엽니다.
    JSPBean -> New -> Properties 클릭!





6. Java Build Path 에서 Default output folder의 Browse...를 열어 아까 생성했던 classes를 선택합니다.





7. 웹페이지를 테스트하기 위해 .jsp 파일을 만듭니다.
    WebContent -> New -> JSP File 클릭!






8. jsp 파일 이름을 지정합니다.
   저는 Cal.jsp 로 지정하겠습니다.






9. .jsp 파일의 코드를 작성합니다.
    아래 표시한 부분이 추가할 소스입니다. 우선 웹 페이지를 확인하기 위해 간단하게 작성합니다.






10. Cal.jsp 를 실행합니다. 아래 그림을 참고하세요.





11. 실행 결과 입니다.
      잘 따라 오셨다면 아래와 같은 결과를 보실 수 있습니다.





좋은 글이면 추천 눌러 주세요! 힘이 됩니다 ^^







12. 이제 Java Bean 까지 적용시키도록 구현합니다. .html 파일을 생성합니다.
      WebContent -> New -> HTML File 클릭!







13. 이름을 지정합니다.
    저는 CalInput.html 로 하였습니다. 그리고 Finish를 눌러줍니다.






14. 아래와 같이 표시 된 소스를 추가합니다.
     CalInput.html 파일 소스입니다.







15. 이번엔 Cal.jsp 파일의 소스를 수정합니다. 아까 간단히 작성했던 부분은 지워 새로 작성합니다.
     Cal.jsp 파일 소스입니다.







16. java bean의 .java 파일과 .class 파일을 생성하기 위한 패키지를 생성합니다.
     JSPBean -> New -> Package 클릭!







17. 패키지명을 지정합니다.
     패키지명은 반드시 소문자로 입력합니다. 패키지명은 calculator 로 하였습니다.







18. 생성한 패키지에서 java bean 파일을 생성하기위해 .class 파일을 생성합니다.
     calculator -> New -> Class 클릭!






19. 클래스명을 지정합니다. 여기서는 CalculatorBean 으로 하였습니다.
     Finish를 눌러줍니다.







20. 클래스를 작성합니다. 아래 그림과 같이 소스를 추가합니다.






21. 이제 CalInput.html 파일을 실행합니다.






22. 아래와 같이 웹페이지가 실행되면 text에 값을 입력하여 계산 을 눌러봅니다.




23. value1는 text에 입력한 값이고 value2는 CalculatorBean.java 작성시 넣어준 값 24 입니다.
     6을 입력하였으니 6 + 24 = 30 이란 결과가 나오겠죠?




이처럼 이클립스를 이용하면 에디터를 쓰고 명령 프롬프트에서 컴파일하고 브라우저에서 실행할 필요없이 간단히 구현 할 수 있습니다.



posted by 쪼재