웹3(HTML,JSP)

제이·2023년 4월 17일

웹

목록 보기

3/15

`폼양식 <form>~</form>⭐⭐`

값에 대한 이야기
폼 태그는 클라이언트측에서 서버로 값을 전송할 때 사용하는 태그이다.
안에 여러가지 값을 담을 수 있는 입력양식을 만드는 태그를 포함할 수 있다.
간단히, 사용자에게 입력받은 값의 양식을 만들기 위해서 사용.
<form name="form1" method="전송방식" action="전송된 데이터를 받는 곳">

1.전송단위
2.어디로 : 무엇을 하는 가 =>action
3.어떻게 : 전송방식 => method

form양식에서 method와 action이 중요하다.

action = "전송된 데이터를 받는 곳 " : 어디로 보낼까== 무엇을 하는 가.
method = "전송방식"

간단하게 얘기하면, 전송이 되는 단위를 결정한다.
네이트사이트에서 입력을 기준으로 보면, 검색과 로그인이 있다.
검색창에 aa를 적고, 로그인에 bbb를 적으면,
검색하는 버튼을 누르면 aa만 전송된다.
그러니까 결론적으로 내가 로그인끼리의 기능(아이디적기, 비밀번호적기, 자동로그인)만 묶으려면 그걸 하나의 폼에 넣고,
검색의 기능끼리 함께 하려면 검색기능을 하나의 폼에 넣으면 된다.
그러면 검색과 로그인은 각각 다른 역할을 수행하게 된다.

어디로 보내는지를 결정할 수 있다.
프로토콜 번호가 다르면 하는 일이 다르다.
웹에서는 url로 한다.
무슨일을 하는지를 url이 결정한다.

예를 들어서
네이버에서
이 사람이 지도를 보고 싶다면, map.naver.com으로 간다.
영화를 보고 싶다면, movie.naver.com
같은 데(네이버)로 가는 url이 달라진다.
url 사용자가 해달라는 게 뭐냐?니가 뭘 해야하는가..

사용자가 서버로 뭔가를 전송을 하는 목적으로 사용할 때 이런 폼이 필요하다.

action의 용도 : 의미상으로는 어디로 이 정보를 보내는가. 실제로는 뭘하는 지를 나타내는 거.
마치 메서드의 이름. 프로토콜 번호 이름과 비슷한 느낌.
action 입력양식들로 action을 해줘.
action안의 submit이 실행되면 해당 url로 정보가 날아간다 : form안의 값들을 제출한다는 뜻.같은 페이지 안에 있더라도 form이 다르면 다르게 전송된다.
method의 용도 : 데이터의 전송방식 - get, post 2가지 방식이 있다.
'form'은 데이터를 전송하기 위해서 쓰는 것이다. - submit과 세트다!!

'input' 입력양식

text입력양식

한 줄의 텍스트를 입력받을 수 있다.
<input type = "text" size "크기" maxlength = "입력가능한 최대 글자수" name = "변수명">

readonly ="readonly"
readonly만 써도 값이 입력이 안된다: setEditable
xhtml은 무조건 속성다음에 값을 써줘야 해서
readonly ="readonly"이라고 써주는 게 좋다.

Password입력양식

<form name="form2" method="post" action="nothingcgi"> Password : <input type="password" name="pw" size=8> </form

disabled ="disabled"
: 패스워드가 비활성화 상태가 된다.

textarea

아이디가 전송될 때 패스워드랑 taxtArea도 같이 전송된다. 같은 form안에 있으니까.

textarea같은 경우는 줄을 맞추면 커서의 위치가 달라진다.
<textarea cols="30" rows = "3" name = "content"></textarea>에서
이렇게 닫는 </textarea>를 바로 붙여서 써야한다. 엔터를 넣어서 다음 줄로 넘어가게 사용하면, textarea 자체에서 그만큼 커서의 위치가 옮겨져 있다.
그래서 값을 <textarea cols="30" rows = "3" name = "content">여기에 값 넣으세요.</textarea>
식별자가 name이다.⭐
서버입장에서 ID, Password를 어떻게 뽑아오지 할 때는 name에 적힌 id,pw,content를 뽑아올 수 있다.
동일한 폼안에서 서로 구분할 수 있는 구분자.
약간 변수에 이름설정하는 값.
원하는 그 값만 빼오고 싶을 때 name을 사용한다.

radio버튼

동일한 폼안에 이름이 같은 타입이 라디오라고 되어있다. 같은 이름끼리는 하나만 선택해서 나온다. 이게 라디오버튼기능을 하게 되는 느낌.
남자여자가 전송되는 게 아니라 value가 서버로 전송이 되는 거다.

checkbox

< label >
<input type = "checkbox" id = "hobby1"name ="hobby" value="독서"><label for="hobby1">독서</label>
for은 이 레이블이 누구를 위한 것입니까?라는 뜻. id를 만들어서 label for에 넣어주면 된다.
이렇게 만들면 label을 눌러도 체크박스가 체크가 된다.
모든 값들이 다 value속성이 있다. 안 적혀있어도 value값을 적어서 넣으면 설정할 수 있는 것 같음.
value = 값이다.
'hello'를 적었을 때, ID의 값이 된다.
전송되는 값이다. 그래서 가급적이면 한글을 쓰지 않아야 한다.

select(콤보박스, 리스트랑 유사한 기능)

size을 사용하면 속성값에 주어진 만큼의 목록을 보여주며, list효과를 낸다.
multiple를 사용하면 선택목록 중 여러개를 선택할 수 있다.

사이즈가 없으면 콤보박스가 되고, 사이즈가 있으면 list가 된다.

hidden

<input type="hidden" name="start" value="1">
숨겨진 이것은 사용자를 위한 것이 아니라 우리가 쓰는 거. 사용자 몰래 어떤 값을 잡아넣을 때 사용. 데이터를 입력하지 않고도, 데이터의 전송이 필요한 경우에 사용된다.

file

fileChooser같은 거. 파일이 열리도록 해준다.

submit

데이터를 전송할 때 사용한다. submit 버튼을 누르면 form안에 있는 모든 내용이 전송이 된다.
서버로 전송하는 역할이라는 기능이 정해져있는 아이다.
폼마다 전송기능이 있는 것이 하나씩은 있어야 한다.

button

버튼만 만들어준다. 이걸 눌렀을 때 기능은 내가 넣을 수 있다.
눌렀을 때 무엇을 할 것인가를 내가 정함.

reset

입력한 데이터를 초기화할 때 사용한다.
빈칸으로 만드는 것이 아니라, 다 지워지는 것이 아니라 제일 처음 설정되었던 그 값으로 바뀐다.

value값이 전송되는 거다. 그 뒤에 적혀있는 한글은 아무 의미가 없다.
<option value ="sonata">소타나</option>
여기서 value값인 'sonata'가 서버로 날아가고 '소타나'는 걍 보여지는 것일 뿐.

코드

<html>
 <head>
  <title> new document </title>
 </head>
 <body>
   
 //1번째 폼
 <form name = "form5" method ="post" action="nothingcgi">
 <input type="submit" value="글쓰기">	
 //글쓰기를 누르는 순간 form안에 있는 모든 내용이 전송이 된다. 
 //서버로 전송하는 역할이라는 기능이 정해져있는 아이다. 
 //폼마다 전송을 하는 애들이 하나씩은 있어야 한다. 
 //왜냐면 서버에 전송을 해야 하는 기능이 있어야 하기 때문에.
<br>
   
 <input type="file" name="npload">	
 //파일chooser같은 거.
 <br>
   
 <input type="hidden" name="start" value="1"> 
   //숨겨진있는 이것은 사용자를 위한 것이 아니라 우리가 쓰는 거. 
   //사용자 몰래 어떤 값을 잡아넣을 때 사용.
<br>
   
 <select name ="car">   //combobox
 <option>당신이 구매하고 싶은 차종은?</option>
 <option value ="소나타">소타나</option>
 <option value ="에쿠스">에쿠스</option>
 <option value ="아반떼">아반떼</option>
 </select>
<br>
   
 <select name="car" size="4" multiple="multiple">	
   //이러면 list가 된다. 한번에 보여줄 수 있는 수량이 4이다.
   //multiple하면 여러개 선택할 수 있다는 것을 의미.
 <option>당신이 구매하고 싶은 차종은?</option>
 <option value="소나타">소타나</option>
 <option value="에쿠스">에쿠스</option>
 <option value="아반떼">아반떼</option>
 <option value="냐냐냐">냐냐냐</option>
 </select>
<br>

 당신의 취미는?<br/>
 <input type = "checkbox" id = "hobby1"name ="hobby" value="독서"><label for="hobby1">독서</label> 
 <input type = "checkbox" name ="hobby" value="여행">여행
 <input type = "checkbox" name ="hobby" value="음악감상">음악감상
 <input type = "checkbox" name ="hobby" value="영화">영화
<br>

   
//2번째 폼
  <form name = "form1" method = "post" action = "nothingcgi">
  <input type="button" value ="내버튼"> 
    // 버튼만 만들어준다. 이걸 눌렀을 때 기능은 내가 넣을 수 있다. 
    //눌렀을 때 무엇을 할 것인가를 내가 정함.
    
  <input type="reset" value="취소">	
    //초기값으로 값을 돌려준다. 처음 페이지가 로드되었을 때 그 값으로 되돌리는 거. 
    //이 reset이 폼이 2개가 있는데, 두번째 form안에서만 존재한다. 
 
  ID : <input type = "text" name ="id" value = "hello"  readonly ="readonly">
  <br>
    
  Password : <input type = "password" name = "pw" disabled ="disabled">
  <br>
    
  <input type = "radio" name="sex" value="male">남자
  <input type = "radio" name="sex" value="female">여자
  <br>
    
  <textarea cols="30" rows = "3" name = "content">값을 넣으세요</textarea> 
  </form>
 </body>
</html>

결과

meta태그

meda : 근원적인 정의 또는 설명. 일반적으로 메타는 보조해주는 역할을 의미. 메타버스도 우리가 사는 세계가 주고 보조적인 느낌.

keywords

이 페이지의 핵심 키워드는 이것이다라고 할 때.

content

제목 밑에 간략한 설명을 하는 것. 웹봇이 돌아다니면서 수집한다.
그래서 검색같은 걸 했을 때 이 content부분까지 검색에 보인다.
우리 벨로그로 치면 내가 적은 거 단어로만 정리해서 하는 부분.

http-equiv="refresh"

이렇게 하고 content = 3이라고 적고 뒤에 url을 적으면 3초 뒤에 url로 네이버가 켜진다.

코드

<html>
 <head>
  <title> new document </title>
  <meta name="keywords" content="">	
   //이 페이지에 대한 키워드 핵심단어는 이런거다라고 할 때.
  <meta name="description" content=""> 
   // 제목 밑에 간략한 설명글 같은 거. 웹봇이 돌아다니면서 수집을 한다.
  <meta http-equiv="refresh" content="3; url=http://www.naver.com">	
   //3초뒤에 네어버가 켜진다.
 </head>
 <body>
 </body>
</html>

html끝

이클립스에서 jsp 적용하기

저장할 파일 바꾸기

서버설정

File - new - other - server -Apache - 톰캣설정(6.0)-톰캣을 푼 파일을 선택

톰캣으로 연결된 프로젝트 열기

new - project - web- DynamicWebProject - targetruntime에서 Apache Tomcat v6.0이 되어있는지 확인하기

브라우저로 열리도록 하는 법

jsp 새파일 만들기

jsp = 자바 서버 페이지즈 의 약자이다.
이제 JavaEE이다.
이클립스에 있는 것은 html이 아니다. html처럼 생겼지만, jsp이다.

jsp 예시

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%> <!-- 서버에서 사용된다.  -->
<!DOCTYPE html>	//<!--html버전알려주는 거. 그냥 놔두면 된다. -->
<html>
<head>
<meta charset="EUC-KR"> <!--그냥 놔두면 된다.  -->
<title>현재시간</title>
</head>
<body>
지금 : <%=new java.util.Date() %><!-- 서버에서 사용된다.  -->
</body>
</html>

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML 문서의 제목</title>
</head>
<body>
🌜<% String bookTitle = "JSP 프로그래밍";
String author = "최범균";
%>🌛
<b> <%=bookTitle %> </b>(<%=author %>)입니다.
</body>
</html>

위의 코드 설명

http://localhost:8080/04.17/time.jsp
->어디로 보내는가를 뜻한다.
사용자가 원하는 내용을 나타낸다고 생각하기.
localhost : ip이다.내 컴퓨터의 ip. 내가 나한테 접속하겠다.
: 만약 도메인을 사면 여기에 도메인이름(naver 등)이 들어갈 것이다.
8080 : 포트, 프로세스 식별자
04.17/time: 경로.
url = 자원의 위치를 어떻게 나타내는 가를 약속한 것.
u: 유니폼(통일된느낌.)
r : 자원
l :위치

- time.jsp를 실행한다는 말은 localhost:8080/04.17/time.jsp를 서버에 보내고 서버에서 'html,css.jsp'언어로 브라우저로 다시 보내는 과정을 의미한다.

<% %> 사이에 있는 값⭐

: 서버에서 연산이 되는 값.
: 여기 안에 있는 것이 서버 언어이다.
: 요청이 들어왔을 때 이 서버언어만 바꾸면 된다.
: 클라이언트언어는 적힌 그대로 실행된다.
: 서버 언어부터 실행된다.
: jsp의 목적은 브라우저가 읽어낼 수 있는 응답을 만들어내는 거.

jsp에는 클라이언트언어랑 서버언어가 섞여있다.

정적 자원 : html - 값이 바뀌지 않는다. 정적이다. 시간이 바뀌지않는다. 클라이언트에서 연산되는 값

동적 자원 : jsp - 값이 바뀐다. 동적이다. 시간이 새로고침하면 실시간으로 바뀐다. 서버에서 연산되는 값

밑에가 mvc모델에서 view다. 어떻게 보여줄 것인가.

요청과 응답

요청은 3가지로 구성된다.
1.라인(요청라인,요청행)
2.헤더 : 클라언트의 정보가
3.바디 : 바디가 없는 경우도 있다. 파일업로드할 때.

응답도 3가지로 구성된다.
1.라인
2.헤더
3.바디

<요청 데이터>
GET/HTTP/1.1/URL : 요청라인
GET : 전송방식
HTTP : 프로토콜명
1.1 : 프로토콜버전
URL : 우리는 이것만 결정. 위의 3개는 브라우저가 결정

<응답데이터>
HTTP/1.1 200 OK :응답라인
HTTP/1.1 : 응답해줄 때 사용하는 프로토콜
200 : 코드번호(200번대는 정상실행되었다는 뜻)
OK : 응답 메시지

톰캣이 하는 일

클라이언트의 요청이 오면 알맞은 프로그램을 실행하는 것도 톰캣이 하고
응답데이터로 만들어서 전송하는것도 톰캣이 함.
어떻게 내보내는지 신경쓸필요가 없음.
이 톰캣이 WAS이다.

제이

Hello :)

이전 포스트

웹2(HTML)

다음 포스트