※ 주의사항 ※
본 블로그는 수업 내용을 바탕으로 제가 이해한 부분을 정리한 블로그입니다.
본 내용을 참고로만 보시고, 틀린 부분이 있다면 지적 부탁드립니다!
감사합니다😁
이클립스(IDE)를 활용한 웹 프로그래밍
안녕하세요!!
오늘은 통합 개발 환경(IDE) 툴중 하나인 이클립스를 활용해서 톰캣을 사용하여 동적 웹사이트를 개발해보도록 하겠습니다. 통합 개발 환경을 통해 웹 사이트를 개발하면 지난번 처럼 환경 변수를 추가하거나 CLASSPATH를 수정하는 번거로움이 없이 더 간편하고 빠르게 프로그래밍이 가능합니다.
1. 웹 개발하기 위한 이클립스 환경 구성
1-1. 프로젝트 / 패키지 / 클래스 및 Servlet 생성
✔ Dynamic Web Project 생성
프로젝트 이름 : machineinfo
"File - new - Dynamic Web Project"를 눌러서 동적 웹 프로젝트를 생성합니다.
✔ src / main / java에 패키지 생성
패키지 이름 : com.test.machineinfo
✔ 패키지 내에 Servlet 생성
클래스 이름 : MachineInfo
1-2. 톰캣 웹 서버 경로 설정 및 추가
✔ 처음 열었을땐 아래와 같이 오류 다수 발생
- IDE를 안쓰고 완전히 수작업으로 웹 프로그래밍을 할 경우 자바 프로그램이 인식할때 환경변수를 사용합니다.(지난번에 환 경변수 저장 및 CLASS PATH 경로 설정 과정을 한 이유가 IDE를 안쓰고 웹 개발을 하기 위해서였습니다 ^^)
- 즉, IDE를 사용하면 환경변수를 사용하지 않게 됩니다. 따라서, 컴퓨터 내의 환경변수가 아닌 패키지 내에서 관련 처리를 해주어야 합니다.
✔ Windows - Show View - Servers 선택
✔ Servers 창에서 New Server 생성
- Server Type : Tomcat v9.0 Server
- 웹 서버 경로 지정 : [톰캣_HOME] (저의 경우는 C:\apache-tomcat-9.0.63)
- 프로젝트 추가 : machineinfo
정상적으로 웹 서버가 등록되면 아래의 사진처럼 Servers 창에 표시가 된다.
1-3. 외부 라이브러리 파일 경로 저장 : servlet-api.jar
✔ 프로젝트 우 클릭 - Build Path - Configure Build Path
✔ Libraries 탭 이동 - Add External JARs.. - Tomcat의 lib 폴더의 servlet-api.jar 선택
※ 위의 과정들을 거치면 처음 클래스를 생성했을때 발생한 오류들이 전부 사라지게된다.
2. 이클립스를 활용한 동적 웹 사이트 개발
2-1. MachineInfo.java에 아래와 같은 코드 입력
package com.test.machineinfo;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/machineinfo")
public class MachineInfo extends HttpServlet {
private static final long serialVersionUID = 1L;
public MachineInfo() {
}
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
resp.setContentType("text/html; charset=UTF-8");
PrintWriter out = resp.getWriter();
String uri ="jdbc:mariadb://192.168.56.101:3306/machine";
String userid = "smartUSER";
String userpw = "1234";
String query = "select machineName, managerName, temperature,power,runTime from tbl_machine";
Connection con = null;
Statement stmt = null;
ResultSet rs = null;
try{
Class.forName("org.mariadb.jdbc.Driver");
con = DriverManager.getConnection(uri,userid,userpw);
stmt = con.createStatement();
rs = stmt.executeQuery(query);
out.println("<!DOCTYPE HTML><HEAD><TITLE>JDBC Test</TITLE></HEAD>");
out.println("<BODY>");
out.print("<h1>서블릿 DB 연동 테스트</h1>");
out.println("<TABLE border=1><TR><TD>기계명</TD><TD>관리자</TD><TD>온도</TD><TD>전력사용량</TD><TD>운전시간</TD></TR>");
while(rs.next()) {
out.println("<TR><TD>" + rs.getString("machineName") + "</TD>"
+ "<TD>" + rs.getString("managerName") +"</TD>"
+ "<TD>" + rs.getInt("temperature") + "</TD>"
+ "<TD>" + rs.getInt("power") + "</TD>"
+ "<TD>" + rs.getInt("runTime") + "</TD>");
}
out.println("</TABLE></BODY>");
if(rs != null) { rs.close(); }
if(stmt != null) { stmt.close(); }
if(con != null) { con.close(); }
}catch(Exception e) { e.printStackTrace(); }
} //End of doGet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}db에 연동하기 위한 ip주소와 Database 이름, 유저 id와 유저 비밀번호를 다시 한번 확인 바랍니다 ^^;
2-2. MariaDB와 연동하기 위한 커넥터 파일 저장
✔ "src - webapp - WEB-INF - lib" 경로에 MariaDB 커넥터 파일 저장
해당 커넥터 파일은 mariaDB의 정식 홈페이지에 가면 받으실 수 있습니다.
꼭!! JAVA용 커넥터로 다운받으셔야 합니다!
2-3. 웹 서버 실행 및 동작 확인
✔ 웹 서버 실행 전 경로 삭제
좌측 하단의 톰캣 서버를 더블클릭해서 Edit를 눌러 경로를 지워줍니다.
✔ 프로젝트 - RUN As - Run on Server 선택
톰캣 웹 서버를 선택 후 실행!
실행하면 바로 웹 브라우저가 실행되면서 machineinfo.java 파일이 수행됩니다.
✔ HTTP 404 오류가 발생한다면?
이는 index.html 파일이 없어서 발생하는 에러로 webapp 폴더 내에 index.html 파일을 넣어주면 됩니다. 처음 웹에 접속하면 자동으로 index.html로 이동합니다. 따라서 index.html 파일 내에 적절한 html 코딩을 해서 넣어줍시다 ^^:
- index.html 파일을 추가하면 더이상 404에러가 발생하지 않습니다!!
2-4. index.html 응용
✔ index.html의 파일을 아래와 같이 코드 작성
<a> 태그의 href 속성을 통해 경로를 저장하고 빠르게 이동할 수 있습니다.
✔ 아래와 같이 index.html 화면이 구성되고 클릭하면 빠르게 전환
✔ /machineinfo , /hellojava , /dbconnection.jsp 화면
댓글