Learn/KH정보교육원

[KH정보교육원 당산] 30일차(간단한 게시판 만들기3(검색창), JSP 실습, 간단한 설문조사 폼 만들기)

Dahoon06 2021. 4. 20. 10:17
728x90
반응형

검색창 추가

 

list.jsp에 검색을 할 수 있는 코드 추가

 

<form action="search.jsp" method="get">

   <input type="text" name="searchWord" required="required" placeholder="작성자를 입력해주세요." />

   <input type="submit" value="검색" />

</form>

 

 

search.jsp에 파라미터 값을 보내줘야하기 때문에 검색창 쪽에 name을 통해서 이름 설정

 


search.jsp 파일 추가 (기존 list.jsp를 복붙한 후 코드 수정)

 

 

search.jsp

 

 

작성자를 검색받아서 그에 해당하는 글을 찾아온다.

 

파라미터 값을 받기 때문에 기존의 Statement에서 PreparedStatement로 수정

 

쿼리문도 작성자를 기준으로 검색을 받아야 하기 때문에 WHERE절 추가

 

 

작성자가 '아무거나'인 글 조회
검색 완료

 

 


JSP 실습

 

jsp파일을 톰캣을 통해 실행

=> 01_hello.jsp => 01_hello_jsp.java => 01_hello_jsp.class(컴파일됨) => 객체 => out.~~() 모습으로 출력

 

 

<!DOCTYPE html>               1.선언문 : HTML5엔진  

<html>

<head>

<meta charset="UTF-8">    2.웹브라우저 인코딩

<title>Insert title here</title> 3. 웹브라우저의 탭(사용자에게 현위치:UX/UI)

</head>

<body>  4 .여기부터 사용자에게 보여지는 화면

 

 

</body>  4.여기까지

</html>

 

 

jsp에서 컴파일된 파일의 위치

workspace => .metadata => .plugins => org.eclipse.wst.server.core => temp0 => work => Catalina -> localhost => jsp_test1(현재 이클립스에서 사용하는 프로젝트 폴더)

=> org => apache => jsp => _01_005fhello_jsp.class

                                          _01_005fhello_jsp.java

 

자바파일과 클래스 파일이 생성됨

 


자바 코드 입력 : 

<%   

 

자바 코드 입력

 

%>

 

 

JSP 내부에 변수, 메소드 선언

<%!

 

변수나 메소드 선언문

 

%>

 

* 일반 자바 코드를 사용할때와 다르게 ! 가 붙어서 사용된다.

 

** 위에 선언된 것들은 자바로 옮겨가게되면 class내부에 선언되는 변수(or 메소드)들이다.

 

*** 변수나 메소드 등 자바코드를 선언할때는 <!DOCTYPE html> 위쪽에다가 만들어준다.

body안에다 만들어도 되긴하지만 코드의 가독성 때문에 바깥쪽에다가 선언

 

변수 사용

<%=  변수  %>

* 변수를 사용하기 위하여 <%= %>를 사용하게 되면 ;(세미콜론)은 빼고 사용하게된다.

 

 

주석(COMMENT) 처리

html 주석 <!-- -->
jsp 주석 <%-- --%>

* jsp내부에서의 주석 처리는 자바와 같다.

 

 


외부 라이브러리 사용

 

ex) 날짜와 시간을 표현

 

페이지 상단에

<%@ page import="java.util.Calendar" %>

// jsp가 우리나라것이 아니기 출력형식을 선언

<%@ page import="java.text.SimpleDateFormat" %>

 

: <%@ page import="java.util.Calendar, java.text.SimpleDateFormat" %> ,(쉼표)를 통해서 연달아 선언 가능

<%

 

       // 캘린터 객체getInstance를 통해서 반환 받아야한다.

Calendar date = Calendar.getInstance(); // 날짜와 시간을 가지고 있다.

      //출력 형식 (날짜,시간) 객체 생성할때 형식을 지정해야함

      //대소문자 구별해야한다.

SimpleDateFormat today = new SimpleDateFormat("yyyy년 MM월 dd일");

SimpleDateFormat now = new SimpleDateFormat("hh시 mm분 ss초");

 

%>

 

오늘은<b><%= today.format(date.getTime()) %></b> 이고,<br />

지금 시간은 <b><%= now.format(date.getTime()) %></b> 입니다.

 

**  date.getTime()은 날짜와 시간을 반환하는 메소드

 

"원래" 이글자가 안사라지네...

 



**  date.getTime()만 사용하면 원래의 출력 형식만 나온다. => <%= date.getTime()%>
-> Tue Apr 20 13:52:13 KST 2021 (이런식으로 출력된다.)

 

 


에러 페이지 관리

 

 

에러를 발생시키기 위한 페이지

 

 

 

2를 0으로 나눴기 때문에 에러 발생

**  정수를 0으로 나누면 오류발생 ,프로그램에서는 숫자를 0으로 나눌 수 없다.

 

상단에 <%@ page errorPage="error.jsp" %> 가 선언되어있다.

 

이 페이지에서 에러가 발생하면 만들어둔 에러페이지를 호출하여 사용자에게 보여주게 된다.( error.jsp )

 

 

 

error.jsp

 

 

상단에 <%@ page isErrorPage="true" %>가 선언되어있다.

에러 페이지로 사용할꺼면 이와같이 true를 줘야 에러 발생시 호출이 되어진다.

 

 

 

 

주소를 보면 07_divide.jsp 페이지인데 내용error.jsp 페이지를 가져와있는것을 볼 수 있다.

 

 


Footer 사용

 

footer를 사용하기 전

 

 

 

 

 

 

footer.jsp를 만들어서 footer영역을 만들어 줄것이다.

 

 

 

 

<html></html> 영역안에 또 다른 <html></html>이 사용될 수 없으므로 footer.jsp 에 있는 태그들을 다 지웠줬다.

 

<hr /> 태그는 한줄을 그어 주는 태그

<div> 태그로 영역을 생성해주고

 

 

 

 

footer.jsp를 main.jsp에 포함시켜보자

 

 

 

 

 

포함 선택자를 활용하여 footer.jsp를 사용

 

<%@ include file="footer.jsp" %>

 

 

 

Footer가 생성되었다.

 


request 관련 메소드

 

[JSP] request 메소드

JSP 내장 객체 : request의 접속 관련 메소드 컨텍스트 경로 : request.getContextPath() => 프로젝트의 경로를 가져온다. 요청방식 : request.getMethod() => POST 방식인지 , GET 방식 확인하는 메소드 요청한 U..

june-17.tistory.com

 

 


간단한 설문조사 폼 만들기

 

 

 

researchForm.jsp

 

 

실행화면

 

 

"좋아하는 계절"에서 다중 선택하면 주소창에 보이는것처럼 다중값이 보내진다.

 

** 보내는 방식을 정해주지 않으면 기본값으로 GET 방식으로 보내진다.

 

 

research.jsp

 

 

값을 하나만 가져올 때는 request.getParameter()

다중 값을 가져올 때는 request.getParameterValues() 를 사용한다.

 

**request.getParameterValues() 배열로 반환 된다.

 

 

 

 

테스트<b> 태그 => 글자 진하게

남자 <u> 태그 => 글자에 아래 줄

여자 <i> 태그 => 글자 기울임

 

좋아하는 계절이 value값인 1로 출력되었다.

 

성별 또한 value 값인 male, female로 출력 되지만 if문을 통해 남자 여자로 바꿔 출력

 

switch~case 구문을 통해 이것도 바꿔줬다.

 

 

 

 

 


JavaScript의 history 객체

 

 

 

 

<a href="javascript:history.go(-1)">뒤로가기</a>

 

뒤로가기 ' - ' 앞으로 가기 ' + '

 

위와 같이 -1은 뒤로 한페이지 넘기는 것이고 저게 1로 바뀌면 앞으로 한페이지 넘어간다.

 

 


728x90
반응형