개발환경 만들기 - jsp

Luna·2023년 1월 16일
CSSJavaScripthtmltomcat개발환경
0

EZEN

목록 보기
18/40

개발환경 만들기

기본적으로 이용하는 개발 환경

  1. 웹서버 - 운영할 때 필요하고 개발할 때는 필요하지 않음.
  2. 브라우저 - HTML + CSS + JavaScript (브라우저 객체에 맞게 코드를 작성을 해 줘야 한다.)
  3. 웹프로그래밍 개발 툴 - Eclips(확인은 브라우저에서), Adobe Dreamweaver, EditPlus 등

실습할 때 이용하는 개발 환경

  1. 웹서버 : Tomcat - WAS
    (프로그램 및 기능 - Windows 기능 켜기/끄기 - 인터넷 정보서비스 -> 켜져 있으면 Tomcat이랑 충돌 일어남)
  2. JAVA 1.8
  3. Eclipse - JAVAEE
  4. Oracle 11g XE
  5. SQL Developer
  6. Er- win (모델링 툴) - 스키마 개발을 위해 사용
  7. Chrome (브라우저)
  • 운영 : C:\tomcat9\webapps 폴더에 WArr 파일을 만들어서 배포 하게 된다.


8080은 충돌이 일어나서 나중에 바꿔놔야 한다.

HTML

~ML : 영역 표시 -> 태그

  • Hyper Text Markup Language의 약자
  • XML (Extensible Markup Language) : 데이터를 정의하는 규칙을 제공하는 마크업 언어

구조

크게 두가지로 나뉘고 보통 혼용해서 사용한다.
1. text
2. box

  • 태그 - <태그명> ~ </태그명>
    ex) <html> : HTML 태그 라고 읽는다.
  • 단독태그 - 닫는게 없다. <br> 또는<br/>(줄바꿈)
<html> <!-- 시작하는 태그 -->
</html> <!-- 끝나는 태그 -->

<!DOCTYPE html> : HTML이라고 알려주는 태그.

<html>의 구성

출처 > w3schools

  • 이클립스에서는 자동으로 닫는 태그가 만들어진다.

<head> </head> : 설정에 해당되는 부분
<body> </body> : 표시, 눈으로 보여지는 곳

Attribute

  • 속성, 변수 : 값을 저장하고 선언
  • 태그 안에 속성(값을 저장)
  • 변수 = 멤버변수 = 전역변수 = 속성 = Attribute(변수를 직접 선언) = Property(getter setter)
    : 기능은 비슷하다

Event

태그 = 요소(Elements) = 객체

  • 태그 안에는 값을 저장 할 수도 있고 처리문을 쓸 수도 있다.
  • Event : 메서드 - 처리문(JavaScript)

실습



path를 /로 바꿔주지 않으면 localhost 뒤에 프로젝트 이름이 나온다. -> 처음에 /first였음

코드 예제

<!-- 주석 처리 단축키 ctrl+shift+c -->
<!DOCTYPE html> <!-- Document 타입 -->
<html>
<head>
<!-- 설정 하는 부분-->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 데이터 표시되는 부분 -->
자바 웹 개발자 <br/>
- br 태그 : 줄바꿈(소스 코드내에서의 엔터는 무시당한다.) <br/>
- hr 태그 : 내용을 선을 이용해서 분리 <br/>
<hr/> <!-- 단독태그라서 슬래시를 뒤쪽에 붙인다. 수평선(horizontal)태그 -->
<!-- '<,>'특수문자처리 : 그냥 쓰면 태그로 인식하기 때문에 특수문자 처리를 한다 -->
<h1>&lt;H?&gt;</h1> <!-- 출력 : <H?> -->
- &amp;amp; - &amp; 출력하는 HTML 특수문자 <br/>
- &amp;lt;(&lt;) - less then('작다' 기호 특수문자 출력) <br/> <!-- &amp; : & 표시 -->
- &amp;gt;(&gt;) - greater then('크다' 기호 특수문자 출력) <br/>
</body>
</html>

실행 결과

페이지

  • HTML, JSP
    HTML : 정적 페이지(데이터가 변하지 않는다.) / JSP : 동적 페이지(데이터가 변한다.)
    -> 실행하면 HTML 소스 코드 텍스트가 전달 (결과는 같다.)

처음 페이지

  • 맨 처음 실행되는 페이지의 이름 : index.html, index.htm, index.jsp, default.html

index.html로 파일을 만들어서 안에 내용을 쓰고 저장 해 줬더니 주소창에 localhost만 입력해도 입력한 내용의 페이지가 나온다. 이걸 홈페이지라고 한다. https://www.naver.com/index.html라고 입력 하면 우리가 알고 있는 네이버의 메인 페이지로 이동한다.

페이지 이동

게시판 URL

  • java 에서 swich 문을 이용했던 부분. "1"을 입력하지 않고 클릭으로 이동 시킨다.

리스트 - /board/list.jsp
보기 - /board/view.jsp
등록 폼 - /board/writeForm.jsp
등록 처리 - /board/write.jsp -> list로 자동 이동
수정 폼 - /board/updateForm.jsp
수정 처리 - /board/update.jsp -> view로 자동 이동
삭제 처리 - /board/delete.jsp -> list로 자동 이동

  • 처리는 DB와 관련 있기 때문에 java에서 작성 할 수 있고 자동이동을 하기 위해 jsp를 이용한다.

이동하는 방법

  1. a tag : 이동 정보를 href 속성에 넣어둔다.
    ex) <a href="/board/list.jsp">게시판</a>

  2. 태그 안에 이벤트 처리 js
    ex) onclick = "location.href = '/board/view.jsp'" (.href는 생략 가능)

  1. form 태그 안에 action="/board/write.jsp"
    <button> 태그를 클릭하면 이동이 된다.

  2. jsp에서 자동이동 시키는 방법
    ex) <% response.sendRedirect("/board/list.jsp"); %>

실습 코드 예제

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>기본페이지</h1>
	<!-- <a> anchor 태그 -->
	<a href="/board/list.jsp">게시판</a>
</body>
</html>

list

<%@ 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>
	<h1>게시판 리스트</h1>
	<br />
	<!-- onclick -> 메서드, " " 안에 들어가는건 javascript  -->
	<!-- 위치정보를 저장하는 객체가 있는데 그게 location 이다. 클릭을 하면 location에 href의 정보가 들어간다. -->
	<!-- span -> 이 안에 있는 아무거나 눌러도 페이지가 이동 된다. -->
	<span onclick="location.href='/board/view.jsp'"> no / 게시판 / 홍길동 / 2023.01.06 / 10 </span>
	<br />
	<!-- button 태그는 a태그 안에 넣는거를 권장 -->
	<a href="/board/writeForm.jsp"><button>글등록</button></a>
</body>
</html>

view

<%@ 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>
	<h1>게시판 글보기</h1>
	<a href="/board/updateForm.jsp"><button>수정</button></a>
	<a href="/board/delete.jsp"><button>삭제</button></a>
</body>
</html>

writeForm

<%@ 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>
	<h1>글등록 폼</h1>
	<!-- /board/write는 사람눈에 안보이고 데이터베이스에 저장하고 바로 list로 이동한다 -->
	<form action="/board/write.jsp">
	<!-- 버튼 태그는 반드시 폼태그 안에 있어야 한다. -->
	<button>등록</button>
	</form>
</body>
</html>

write

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
System.out.println("게시판 글등록 처리"); // 콘솔 출력
response.sendRedirect("/board/list.jsp"); 
%>
<!-- 눈에 보이는 페이지가 아니라 바로 list로 돌아가게 한다. -->
<!-- 보여줄게 없어서 html 태그를 다 지운다 -->

updateForm

<%@ 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>
	<h1>글수정 폼</h1>
	<form action="/board/update.jsp">
	<button>수정 완료</button>
	</form>
</body>
</html>

update

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
System.out.println("게시판 글수정 처리"); // 콘솔 출력
response.sendRedirect("/board/view.jsp"); 
%>
<!-- 눈에 보이는 페이지가 아니라 바로 view로 돌아가게 한다. -->

delete

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
System.out.println("게시판 글삭제 처리"); // 콘솔 출력
response.sendRedirect("/board/list.jsp"); 
%>
<!-- 눈에 보이는 페이지가 아니라 바로 list로 돌아가게 한다. -->
profile
Luna
이전 포스트

SQL - 페이징처리, 통계내기

다음 포스트

HTML - 구성, 태그, 파비콘, TEXT, span, table

0개의 댓글