안녕하세요 멍멍웅입니다.
앞서 강의에서 기본설정을 하고 프로젝트 생성까지해봤습니다.
그렇다면 아주기초인문법을 이용해서 홈페이지에 입력과 출력을 해보는 시간을 갖겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> /*홈페이지의 표시줄 제목*/
</head>
<body> /*내용삽입공간*/
<form> /*form에 action을 입력해서 속성값이 기술된 jsp로 연동되게해준다 */
</form>
</body>
</html>▲ 기본 html 형식 입니다
기본적으로 form 태그 영역이 있어야지만 속성값이 기술된 jsp와 연동되어서 동적인 웹서버 홈페이지를 만들수있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form action ="0330.jsp">
이름 :<input type="text" name="username"><br>
나이 :<input type="text" name="age"><br>
<input type="submit" value="접수하기"><br>
</form>
</body>
</html>
- <form action = "0330.jsp"> 이라고 입력을 해줘서 저는 해당 html file을 0330.jsp 의 속성값을 사용하도록하겠습니다
- '이름과 나이'를 적어서 홈페이지에 나타낼 글자를 적어줍니다
- 그리고 이름과 나이에 간단한 꾸밈과 입력공간을 만들기위해서 <input type="text" name="username"> 을 넣어서 입력타입은 text 상자를 가져오기위해 input type="text"를 . 입력값은 jsp의 username을 가져오는걸로 name="username"을 이용해줍니다
- Type은 여러가지 타입이 있고 name은 jsp의 가져오려는 값의 이름과 같지않으면 null값이 나옵니다.
- 그리고 입력했던 값을 나타내기위한 input type 인 submit을 이용해서 임의로 지정한 '접수하기'라는 버튼을 만들어줍니다.
<%@ 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 = request.getParameter("userName");
String age = request.getParameter("age");
out.println(name+"<br>");
out.println(age+"<br>");
%>
</body>
</html>▲ 0330.jsp 이다
앞에서 form action ="0330.jsp"를 불러냈고 해당 코드입니다.
jsp에서 속성값을 넣을 때는 " <%%> 의 문구로 시작하고 끝을낸다.
코드설명
1. html에서 jsp 페이지로 넘어오는 파라미터 변수 중 name과 age의 변수를 찾아서 그 값을 jsp페이지의 name 변수와 age변수에 이입력하는 형식이다
2. 조건을 줬지않았기때문에 어떻게든 입력해도 모두다 입력해진다
부가설명
- out.println() 메소드는 코드를 더 간결하기 표시하기 위해서 사용한다. 만일 표현식으로 표시하면 스크립트릿을 열고 닫는 문장 때문의 코드의 가독성이 떨어지기 때문입니다..
실행방법
다음 게시글에는 구구단과 수의 합을 출력해내는 홈페이지를 만들어보도록하겠습니다
'IT > 웹프로그래밍(JSP)' 카테고리의 다른 글
| (2주차) 웹프로그래밍(JSP) - JSP로 회원가입 폼 . 처리 만들기 (0) | 2020.04.13 |
|---|---|
| (1주차-4)웹프로그래밍- 원하는 구구단 홈페이지 만들기 (0) | 2020.04.01 |
| (1주차-2)이클립스로 웹프로그래밍 초기설정2 (0) | 2020.03.30 |
| (1주차-1)웹프로그래밍 이클립스 초기설정 (0) | 2020.03.30 |
| (1주차)웹프로그래밍 준비물 (0) | 2020.03.30 |
