본문 바로가기
WEB

XML, JSP 맛보기 및 입력 태그

by 둥바 2022. 6. 13.
XML은?

XML은 HTML과 달리 태그의 이름을 마음대로 정할 수 있다.

XML은 데이터 전달에 관여한다. 스마트폰 문자의 경우도 XML형식으로 송수신한다.

스프링을 배울 때 데이터베이스 연동 시에도 XML이 이용된다.

<!--  xml은 html과 달리 태그이름을 마음대로 정할 수 있다.
xml은 단지 데이터 전달만 관여한다.
스마트폰 문자보내기도 xml형식으로 데이터 송수신한다.
스프링 배울 때 데이터베이스 연동 시 xml사용  -->
<데이터>
<책>
<책이름>시작의 기술</책이름>
<책저자>개리 비숍</책저자>
<장르>자기계발서</장르>
</책>
<책>
<책이름>젊은 adhd의 슬픔</책이름>
<책저자>정지음</책저자>
<장르>에세이</장르>
</책>
</데이터>
JSP(Java Server Page)

JSP는 서버에서 실행되는 자바 웹페이지로, html과 java코드가 혼재되어 있다.

이 JSP를 apache-tomcat 웹서버가 컴파일(자바 코드를)해서 html로 변환한다.

 

- JSP 안에는 jsp 지시어(page directive)가 존재한다.

- <% %> 태그 안에서 자바코드영역(스크립트틀릿)

- out.println / out.print의 경우 내장된 객체를 통해 웹 브라우저로 출력한다.

- 따로 웹 브라우저에서 줄바꿈 처리는 되지 않으며, <br>, <p>태그를 통해 줄바꿈 처리해야한다.

out.println() 내에서는 html태그가 사용가능하나, 자바 코드 영역 안에서는 에러 발생한다.

- 출력하는 방법으로는 out.println 외에 expression을 활용하는 방법도 있다.

<%=   %> 형태를 가진다.

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 이 부분을 jsp 지시어(page directive)라고 한다.-->
    <!-- jsp는 Java Server Page로 Html과 java코드가 혼재되어 있는
    자바 웹 페이지를 웹 서버가 자바코드를 컴파일하여 html로 변환한다. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% //자바코드영역(스크립틀릿)
	int sum = 0;
	for(int i=1;i<=10;i++){
		sum += i;
	}
	//out:내장객체(웹 브라우저에 출력)
	out.print(sum);

%>

<% //자바코드 영역은 여러 개 존재할 수 있다.
//out.println(자바코드와 html코드 섞어서 쓸 수 있음)
	for(int i=6;i>=1;i--){
		out.println("<h"+i+">문자"+"</h"+i+">");
	//println과 print차이 없음(줄바꿈 불가능)	
	}

%>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<%
 int a=30;
 int b=40;
 out.println(a*b);

 String name = "김태연";
 int age = 34;
 out.println("<br>"+name+"의 나이는"+age+"<br>");
//println이라고 해서 실제 웹 상에서 줄바꿈 되지 않으며
//반드시 <br>,<p>태그 등을 활용하여 줄바꿈 처리
//주의할 점은 자바태그 내에서 그냥 <br> 등 태그만 쓰면 에러
//반드시 out.println("<br>")내에서 html태그 사용

out.print("100"+"200"+"<br>");
out.print(100+200+"<br>");
out.print(100+"200"+"<br>");


%>





</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String name = "김태연";
out.print("이름 :"+name+"<br>");

int age = 34;


String hobby = "노래";


%>
<!-- 여기서 =은 출력의 의미이며, ;는 쓰지 않는다.
expression이라고 부른다. -->
<!-- out.print("이름 :" +name+"<br>")과 같은 결과 -->
이름 : <%= name %><br>
나이 : <%= age %><br>
취미 : <%= hobby %>

</body>
</html>

 

 

<간단한 퀴즈 구현>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myFirstJSP</title>
</head>
<body>
<%
String name="홍길동";
int kor=85;
int math=98;
int eng=85;
int sum= kor+math+eng;
String avg = String.format("%.1f",sum/3.0); %>

<% 
out.print("-------------------"+"<br>");
out.print("이름 : " + name+"<br>");
out.print("국어 : " + kor+"<br>");
out.print("수학 : " + math+"<br>");

%>

영어 : <%= eng %><br>
총점 : <%= sum %><br>
평균 : <%= avg %><br>
---------------------

</body>
</html>

 

입력 양식

1) iframe : inline frame, 웹페이지 내부에 다른 웹페이지를 표시할 경우 사용한다.

<iframe src="웹페이지 경로" width="가로" height="세로"></iframe>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFRAME</title>
</head>
<body>
<!-- 웹 브라우저 내 또 다른 웹 브라우저  -->
<iframe src="inner.html" width="300" height="500" name="iframe1">
</iframe>

<a href="http://m.google.com" target="iframe1">구글</a>
<a href="http://m.daum.net" target="iframe1">다음</a>
</body>
</html>

( 슬프게도 내가 하고 싶은 게 있었는데 보안 문제로 요청이 거부되서 못함. 구글은 잘 된다. )

(유투브 비디오 퍼오기를 하면, iframe 형태로 embed 할 수 있다.)

 

 

2) form 태그

<form action = "수신주소" method = "전송방식"> 전송 데이터 </form>

action - 데이터를 받을 url을 적어준다.

method - 전송방식

 

 

2-1) 전송방식(중요)

 

 1. post 방식

http 프로토콜은 header와 body로 나눠지는데,

post방식은 body를 통해서 정보를 전송하기 때문에 정보가 주소창에 노출되지 않아서 보안에 유리

대용량 자료(중요 정보) 전송 가능하다.

 

 

 2. get 방식(기본방식, 폼 태그에서 메소드 속성을 쓰지 않으면 get방식으로 전송)

데이터를 header에 붙여서 전송(주소창 - url에 표시, 데이터가 보임)

기본적인 방식으로 보안에 취약하므로, 노출이 되도 괜찮은 간단한 데이터만 전송

예) http://localhost/login.jsp?userid=kim&passwd=1234 와 같이

QueryString(쿼리스트링) 의 형태로 데이터가 전송됨.

QueryString : url에 덧붙여서 전달되는 데이터로, 물음표 뒤의 데이터들(url에는 대부분 특수문자나 한글 사용 불가)

?변수명=값&변수명=값 의 형태

jsp 프로그램에서 받을 경우 : request.getParameter("변수명") 으로 받는다.

 

예제)

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QueryString 예제</title>
</head>
<body>
<!-- 데이터를 전송할 때 get방식으로 전송할 때
url에 데이터를 붙여서 전송 = 쿼리스트링
헤더에 붙여서 전송하기 때문에 눈에 보인다. 
url ?변수=값&변수=값 -->
당신의 이름은 <%= request.getParameter("name") %> 입니다.
나이는 <%= request.getParameter("age") %> 입니다.
<%
out.print("취미는" + request.getParameter("hobby")+"입니다." );
%>
<!-- http://localhost/web01/BrandNew/QueryString.jsp?name=kimtaeyeon&age=34 -->
<!-- % %로 자바코드 쓸 때와 (;필수)
expression %= 출력할 때 차이점 알아두기(;없음)  -->




</body>
</html>

 

 

3) 입력태그 <input>

주로 폼 태그 안에서 처리

<input type="종류" value="텍스트" name="변수명">

input type 종류 : text,password,button,submit(제출),reset(초기화),radio,checkbox(여러 값 선택),image 등

 

 

3-1) 입력 박스의 크기 조절

<input type="text" name="textfield" style="text-align:center; width:200px; height:200px; letter-spacing: -5px">

text-align 텍스트 정렬

w, h 넓이, 높이

letter-spacing 텍스트 자간

 

 

3-2) HTML4, HTML5에서 input 

HTML4)

<input type="button" value="라벨"> 제출 기능 없음

<input type="submit" value="라벨"> 제출 가능<input type="reset" value="라벨"> 입력값 초기화

<input type="image" value="라벨"> 제출 가능 

 

HTML5)

<button>라벨</button> 제출 기능 있음

<button type="submit">라벨</button> 제출 기능 있음<button type="button">라벨</button> 제출 기능 없음 - 자바스크립트를 활용해야 한다.

 

 

4) 입력태그 <textarea><textarea rows="행 수" cols="열 수" name="변수명">내용</textarea>

 

 

5) 숨김 데이터 태그 <input type="hidden">유저 눈에 보이지 않게 데이터를 보내는 태그

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form>
 텍스트관련<br>
 <input type="text"><br>
 <!--그냥 input만 써도 text로 기본 처리  -->
 <input><br>
 <textarea rows="5" cols="30">
 	정신 차립시다.
 </textarea><br>
 <!--textarea는 크기 자유조절 가능, 내용이 많으면 스크롤바  -->
 <!-- 날짜 관련 input태그 존재  -->
 날짜관련<br>
 <input type="date"><br>
 <input type="datetime-local"><br>
 <input type="month"><br>
 <input type="time"><br>
 <input type="week"><br>
 <input type="color"><br>
 
 이메일<input type="email" placeholder="aaa@aaa.com" required><br>
 <!-- placeholder : 미리보기, required는 필수 입력 태그-->
 전화<input type="tel" pattern="(010)-\d{3,4}-\d{4}" placeholder="010-0000-0000" required><br>
 <!-- pattern : 패턴 \d(decimal)(3자리나 4자리) -->
 검색창<input type="search"><br>
 범위조절<input type="range" min="1" max="100" step="1"><br>
 숫자조절<input type="number" min="1" max="100" step="10"><br>
 url<input type="url" placeholder="http://www.naver.com"><br>
 체크박스(여러개)<input type="checkbox"><br>
 라디오버튼<input type="radio"><br>
 파일첨부<input type="file"><br>
 숨겨서<input type="hidden"><br><!--화면에 표시되지 않은 채 데이터전송  -->
 초기화<input type="reset"><br>
 버튼<input type="button" value="버튼"><br>
 제출버튼<input type="submit"> 
 <!-- 제출버튼은 form의 모든 값들을 특정 url로 넘길 수 있다. -->
 
</form>

</body>
</html>
Insert title here
텍스트관련



날짜관련






이메일
전화
검색창
범위조절
숫자조절
url
체크박스(여러개)
라디오버튼
파일첨부
숨겨서
초기화
버튼
제출버튼
예제 주석 정리)

웹 프로그래밍에서 서버에 값을 전달할 때는 form 태그 활용
form 태그의 action 속성 : 데이터를 받을 주소(url,파일)
form 태그의 method 속성 : 데이터 전송 방식
1) get 방식 : 기본방식, 페이지 요청 용도(QueryString 활용)
2) post 방식 : 데이터 전송 용도

input 태그) name = "변수명" value="텍스트" type="종류"

라디오 버튼 : 하나만 선택 가능
체크 박스  버튼 : 여러개 선택 가능(다중선택) , checked : 기본 선택
-> 체크 박스의 경우 여러 값을 선택하기 때문에 jsp에서 데이터를 받을 때 배열을 활용

같은 그룹으로 묶기 위해서는 name의 값을 같게 해주어야 한다.


JSP)
기본 인코딩이 iso-8859-1 서유럽 언어로 되어있기 때문에 한국어 처리를 위해서 인코딩 방식을 'utf-8'로 변경해야
request.setparameter("utf-8");
- 보통은 JSP에서 값을 받아주는 변수와 html에서의 변수를 일치시키는 것을 권고
- 체크박스의 경우 값을 받아줄 때 배열로 처리하기 때문에 (여러 개의 값을 다중선택 가능하므로) request.getParameterValues("변수명")을 사용한다. 
- 또한 체크박스를 통해 넘어오는 값들 중 널값이 있을 수 있으므로 널값이 있는지 조건문을 통해 확인








 

 

 

 

 

 

 

 

예제 ) 폼 태그 내 인풋 태그와 JSP를 활용해서 데이터를 전송해보자!

 

1) 라디오 태그 연습

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>radioform.html</title>
</head>
<body>
<!--웹 프로그래밍에서 서버에 값을 전달할 때는 form태그를 활용
action : 데이터를 받을 주소(url,파일)등
method : 보내는 방식
1) get 방식 : 페이지 요청의 용도 (쿼리스트링 활용)
2) post 방식 : 데이터 전달의 용도  -->

<form action="radioform_result.jsp" 
method="post">
<!-- <input 태그에서 name = "변수명"
받는 jsp쪽에서 변수명으로 받기 때문에 지정> -->
이름 : <input type="text" name="name"><br>
나이 : <input type="text" name="age"><br>
<!-- 라디오 버튼 : 같은 그룹으로 묶기 위해서는 name의 값을 같게 해야한다.
서버에서는 value로 지정한 값을 받는다.  -->
<!-- 라디오 버튼은 하나만 선택 가능  -->
성별 : <input type="radio" name="gender" value="male">남성
	  <input type="radio" name="gender" value="female">여성<br>

생년월일 : <input type="date" name="date"><br>
이메일 : <input type="email" name="email" required placeholder="abc@abc.com"><br>
전화번호 : <input type="tel" name="tel" required pattern="(010)-\d{3,4}-\d{4}" placeholder="010-1111-1111"><br>
파일첨부 : <input type="file" name="file"><br>
개인정보수집에 동의하십니까? : <input type="radio" name="okno" value="ok">예
					  <input type="radio" name="okno" value="no">아니오
<!-- 데이터 제출 버튼 -->                      
<input type="reset" value="취소">
<input type="submit" value="확인">	
<!-- value="label" -->  
	 
</form>


</body>
</html>

 

받아주는 jsp 파일은 다음과 같다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>radioform_result.jsp</title>
</head>
<body>

<%
//java코드 영역
//기본인코딩이 iso-8859-1 서유럽언어로 되어있기 때문에
//한국어처리를 위해서 utf-8로 인코딩 방식 세팅
request.setCharacterEncoding("utf-8");
//받아주는 변수와 가져올 변수의 이름을 보통 동일하게 맞춰줌
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
int days = age * 365;
String gender = request.getParameter("gender");
//gender = male 또는 female이라고 출력될 텐데, 이 때
//gender = 남성 또는 여성으로 나오게 삼항연산자와 equals 사용
gender = gender.equals("male")? "남성" : "여성";
/* if문으로도 만들 수 있다.
if(gender.equals("male"){
	gender = "남성";
}else{
	gender = "여성";
}
	*/
String date = request.getParameter("date");
String email = request.getParameter("email");
String tel = request.getParameter("tel");
String file = request.getParameter("file");
String okno = request.getParameter("okno").equals("no")? "아니오" : "예";
%>

이름 : <%= name %><br>
나이 : <%= age %><br>
살아온 날 : <%= days %><br>
성별 : <%= gender %><br>
생년월일 :<%= date %><br>
이메일 : <%= email %><br>
전화번호 : <%= tel %><br>
개인정보동의여부: <%= okno %><br>




</body>
</html>
radioform.html
이름 :
나이 :
성별 : 남성 여성
생년월일 :
이메일 :
전화번호 :
파일첨부 :
개인정보수집에 동의하십니까? : 예 아니오

입력한 값이 jsp에 전송된 것 확인

2) checkbox 연습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkform.html</title>
</head>
<body>
 <form action="checkform_result.jsp" method = "post">
 
 좋아하는 아이돌을 선택하세요.<br>
 <!-- checkbox : 다중선택, checked : 기본선택값  -->
 <!-- radio : 하나만 선택  -->
 <!-- 같은 그룹으로 묶기 위해 name을 같게 하기
 value를 jsp로 전달해줌. -->
 <!-- 여러 값을 선택하기 때문에 배열로 처리 -->
 <input type="checkbox" name="idol" value="우주소녀">우주소녀<br>
 <input type="checkbox" name="idol" value="비비지">비비지<br>
 <input type="checkbox" name="idol" value="브레이브걸스">브레이브걸스<br>
 <input type="checkbox" name="idol" value="아이들">아이들<br>
 <input type="submit" value="확인">
 <input type="reset" value="취소">
 
 </form>
</body>
</html>

 

JSP파일 (전송된 곳)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkform_result.jsp</title>
</head>
<body>
	<%
	request.setCharacterEncoding("utf-8");
	String[] idol = request.getParameterValues("idol");
	/*체크박스는 여러 개의 값이 넘어오기 때문에 배열로 처리 
	request.getParameterValues("배열변수명")처리해야한다. 
	일반적인 값 처리 : request.getParameter("변수명")*/

	//아무것도 선택하지 않을 수 있기 때문에 null값을 늘 대비
	if(idol == null){
		out.println("아이돌을 선택하세요.");
	}else{
		for(int i=0;i<idol.length;i++){
			out.println(idol[i]+"<br>");
		}
	}
	
	%>
</body>
</html>

 

3) 자바스크립트 활용한 예제

 

 

'WEB' 카테고리의 다른 글

jQuery와 예제  (0) 2022.07.04
UI 설계 및 구현  (0) 2022.06.22
HTML5 레이아웃 및 시맨틱 태그  (0) 2022.06.09
HTML5 기본 태그  (0) 2022.06.08
웹의 개요  (0) 2022.06.07

관련글

티스토리툴바