[Web] SNS형 게시판 만들기 프로젝트 (5) - JSP 사용하기
$ 개발환경은 Mac OS Catalina임을 알려드립니다. $
이번에는 JSP사용과 톰캣9 설치 과정을 설명해드리겠습니다.
제가 사용하는 건 맥북이라 좀 까다로운 편이니 이해해주시길 바랍니다.
우선 JSP가 뭔지를 알아야 합니다.
JSP란 Java Server Page의 약자로서 일반적인 HTML과 다르게 PHP처럼 동적인 웹 개발이 가능하게 만들어준 스크립트 언어입니다.
일반적으로 JSP를 사용하기 위해서 Apache Tomcat과 연동을 해서 사용하는 경우가 많습니다.
톰캣이 해주는 역할은 JSP코드를 Servelet Class로 변환해서 실행을 시켜주는 역할을 합니다.
JSP의 동작원리는 일반적으로 Model2를 활용하게 됩니다.
JSP가 실행이 되면 우선 Web container로 해당 파일이 넘어가게 됩니다.
여기서 이후에 사용하게 될 <jsp:useBean~~/>을 사용하면 Beans모델로 넘겨주세 되며 DB에서 관리를 하게 됩니다.
만약 그런게 아니고 Servelet code를 사용하게 될 경우 적절한 View의 형태로 출력이 되게 됩니다.
여기서 상황에 알맞게 변환을 해주는 웹컨테이너가 톰캣의 역할입니다.
이론적인 설명은 이정도로 마치고 이제 좀 직접적으로 구현을 해봅시다.
맥에 톰캣부터 설치합시다.
톰캣 홈페이지에 들어가서 최신 버전을 받아줍시다. 저는 version 9을 선택했습니다.
Apache Tomcat® - Welcome!
The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. The Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket specifications ar
tomcat.apache.org
이때 윈도우는 그냥 exe로 받아주면 되지만 맥은 tar파일로 직접 설치를 해줘야 합니다.
압축을 풀면 apache-tomca-[vesion]이 나오게 될겁니다.
이 폴더를 이제 usr/local로 옮겨줘야하므로 터미널을 열과 아래와 같이 쳐줍시다.
< Command >
sudo mv ~/Downloads/apache-tomcat-[version] /usr/local
< Terminal Code >
sudo mv ~/Downloads/apache-tomcat-9.0.34 /usr/local
기존에 Library에 Tomcat이 있을 수도 있으니 우선 제거를 해주고 usr/local에 옮기 폴더를 Library/Tomcat에 링크를 해줍시다.
< Command >
sudo rm -f /Library/Tomcat
sudo ln -s /usr/local/apache-tomcat-[version]/ /Library/Tomcat
< Terminal Code >
sudo rm -f /Library/Tomcat
sudo ln -s /usr/local/apache-tomcat-9.0.34/ Library/Tomcat
연결이 되었으면 이제 /Library/Tomcat의 소유자를 본인으로 변경해 줄 필요가 있습니다.
< Command >
sudo chown -R [username] /Library/Tomcat
< Terminal Code >
sudo chown -R kibeompark /Library/Tomcat
이제 소유권도 선언을 해줬으니 실행 및 탐색 권한을 넘겨줍시다.
< Command >
sudo chmod +x /Library/Tomcat/bin/*.sh
톰캣 실행/종료를 위해서는 다음과 같이 입력해주면 됩니다.
< Command >
// tomcat server start
/Library/Tomcat/bin.startup.sh
// tomcat server shut down
/Library/Tomcat/bin.shutdown.sh
이후 localhost:8080으로 접속해보시면 톰캣 연결 화면이 나타납니다.
저는 여기서 톰캣을 좀 만져보려고 설정을 눌렀는데 비밀번호가 맞지 않는다고 오류가 나타나게 됩니다.
이게 윈도우는 설치할 때 비밀번호를 설정하게 됩니다.
하지만 저희는 설치 과정에 비밀번호 입력과정이 없었죠?
이제 직접 계정과 비밀번호 접속권한을 연결해줘야합니다.
Tomcat이 설치된 폴더로 이동하면 conf라는 폴더가 있습니다.
이 안에 있는 파일중에 tomcat-user.xml이 있습니다.
맨 마지막 부분에 다음과 같이 추가해줍시다.
<role rolename="admin-gui"/>
<role rolename="manager-gui"/>
<user username="admin" password="1234" roles="admin-gui,manager-gui"/>이러면 이제 톰캣 매니저로 접속이 가능합니다.
이번 과제도 사실 어려운 건 아니었습니다. 저번에 했던 과제 출력을 단지 JSP로 출력을 하는 것이었습니다.
저번에는 JavaScript로 했었죠. 이번에는 JSP로 사용자의 입력데이터를 가져와 봅시다.
우선 form 태그에 10가지의 데이터를 가져오는 코드를 짜봅시다. 기반이 되는 입력 form형식들은 저번 글을 참고 해주세요.
대신 form태그 파일의 확장자는 jsp로 저장해주시길 바랍니다.
그리고 제일 중요한 것이 있는데요.
form태그 시작 부분에 다음과 같이 적어주시길 바랍니다.
<form method="get" action="dataset.jsp">
이렇게 적어주시면 submit을 했을 때 action으로 dataset.jsp를 연결해줍니다.
사용자 입력을 가져오는 데이터를 받아오는 파일이름은 dataset.jsp라고 해줍시다.
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String txt = request.getParameter("txt");
String pass = request.getParameter("pw");
String device[] = request.getParameterValues("ck");
String sex = request.getParameter("gender");
String color = request.getParameter("c");
String sel = request.getParameter("sbox");
String bday = request.getParameter("d");
String r = request.getParameter("r");
String n = request.getParameter("num");
int range = Integer.parseInt(r);
int num = Integer.parseInt(n);
String ta = request.getParameter("tarea");
%>
<html>
<head>
<title>return data</title>
</head>
<body>
<p>텍스트 입력 : <%=txt %></p>
<p>비밀번호 입력 : <%=pass %></p>
<p>기기 입력 :
<%for(int i = 0; i < device.length; i++) {
%>
<%= device[i] %>,
<%
}
%>
</p>
<p>성별 입력 : <%=sex %></p>
<p>색상 입력 : <%=color %></p>
<p>생일 입력 : <%=bday %></p>
<p>select입력 : <%=sel %></p>
<p>range 입력 : <%=range %></p>
<p>number 입력 : <%=num %></p>
<p>text area 입력 : <%=ta %></p>
</body>
</html>
별다르게 크게 설명을 할 것은 없습니다.
JSP문법에 따라 request문으로 특정 Parameter의 값을 가져옵시다.
이때 내부에 적혀지는 값들은 원래 파일에 있는 name값들을 가져오면 됩니다.
다른 상황과 동일하게 input type이 checkbox인 경우에는 배열로 받아오게 되므로 저장 변수도 배열로 해주면 됩니다.
여기서 <% %> servelt코드에는 전체적인 코드 세팅을 해주게 됩니다.
<%= %>를 쓰게 되면 해당 부분에 특정 값을 대입해주는 servelt코드입니다. 이 점을 좀 참고해서 잘 짜줘야합니다.
이제 게시판에 입력한 게시글의 제목과 내용을 한 번 출력해봅시다.
이전에 작성한 write.html을 jsp형태로 저장해주시고 form태그 시작부분에는 다음과 같이 적어줍시다.
<form enctype="multipart/form-data" method="get" action="print.jsp">사용자의 입력 값을 받아와서 출력해주는 파일은 print.jsp라고 해줍시다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String title = request.getParameter("title");
String text = request.getParameter("main_text");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>제목 : <%=title %></p>
<p>게시글 내용 : <%=text %></p>
</body>
</html>첫번째 과제보다 훨씬 쉽습니다...
가져올 데이터가 2개 밖에 없거든요.
방식은 위에 설명한 것과 동일하게 진행하시면 됩니다.
'Computer Science > Web' 카테고리의 다른 글
| [Web] SNS형 게시판 만들기 프로젝트 (4) - Java Script 사용 (0) | 2020.05.17 |
|---|---|
| [Web] HTML / CSS /JavaScript 내용 정리 (1) | 2020.05.03 |
| [Web] SNS형 게시판 만들기 프로젝트 (3) - CSS 설정 (0) | 2020.04.13 |
| [Web] SNS형 게시판 만들기 프로젝트 (2) - 기본 레이아웃 (0) | 2020.04.10 |
| [Web] SNS형 게시판 만들기 프로젝트 (1) - 스토리보드 구성 (0) | 2020.04.09 |