스프링 mvc - 블로그 만들기/controller/view

스프링 mvc - 블로그 만들기/controller/view

2024. 9. 25. 18:28ㆍ복습/스프링-게시판만들기

컨트롤러 파일 생성

:브라우저에서 /create 주소가 입력되었을 때 실행되는 자바 컨트롤러 메서드를 작성

package v2.mvc.spring.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class BolgController {
	@RequestMapping(value="/create", method = RequestMethod.GET)
	public String create() {
		return "blog/create";
	}

}

이 코드는 Spring MVC 프레임워크에서 사용하는 @Controller 어노테이션을 기반으로 한 간단한 컨트롤러 클래스입니다. 각각의 부분을 설명하면 다음과 같습니다:

1. @Controller

이 어노테이션은 해당 클래스가 Spring MVC에서 컨트롤러 역할을 한다는 것을 명시합니다. 컨트롤러는 사용자의 요청을 처리하고 그에 맞는 응답을 제공하는 역할을 합니다.

2. @RequestMapping

@RequestMapping은 HTTP 요청을 처리할 메서드를 매핑하는 어노테이션입니다.
value="/create": 사용자가 "/create" 경로로 GET 요청을 보내면 이 메서드가 호출됩니다.
method=RequestMethod.GET: GET 방식의 요청만을 처리합니다. 즉, 데이터를 받아와서 화면을 렌더링하는 역할을 주로 합니다.

3. public String create()

이 메서드는 /create URL로 GET 요청이 들어올 때 실행됩니다.
메서드의 반환 타입이 String인데, 이는 뷰 파일의 이름을 의미합니다.

4. return "blog/create";

이 부분은 요청이 처리된 후 반환할 뷰의 경로를 지정합니다. blog/create는 src/main/resources/templates/blog/create.html와 같은 위치에 존재하는 템플릿 파일일 것입니다.
즉, 사용자가 /create URL을 요청하면, blog/create라는 템플릿 파일이 렌더링되어 브라우저에 보여집니다.

정리

이 컨트롤러는 사용자가 /create라는 URL을 GET 방식으로 요청하면, blog/create 페이지(뷰 파일)를 반환하는 간단한 기능을 구현합니다. 이를 통해 블로그 글 생성 페이지가 보여질 수 있습니다.

뷰파일 생성

: MVC 에서 뷰(view)란 사용자가 보는 화면을 말한다.
웹 어플리케이션을 만들고 있기 때문에 화면은 HTML(Hyper Text Markup Language)로 작성한다.

뷰 경로 > "blog/create"

jsp 파일 만들기

http://localhost:8080/create > Insert title here 제목의 웹이 열리면 된다.

화면이 보이는 과정1. 브라우저에서 /create 주소를 입력한다. 2. 톰캣은 브라우저의 요청을 받아서 스프링으로 전달3. 스프링은 /create 웹주소에 해당하는 BlogController의 create 메서드를 찾아서 실행한다. 4.create 메서드는 반환값인 /blog/create 값을 보고 뷰 주소를 찾는다. 5.스프링은 뷰의 결과를 톰캣에 응답한다. 6. 톰캣은 스프링에서 보내준 값을 브라우저로 다시 보내준다. 7. 브라우저는 스프링이 보내준 뷰의 결과 HTML을 그려준다.

create.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블로그 컨텐츠 쓰기</title>
</head>
<body>
	<form method="post">
		<p>
			컨텐츠 제목 : 
			<input type='text' name='title' style='width:80%'/>
		</p>
		<p>
			본문
		</p>
		<p>
			<textarea rows="10" name="content_body" style='width:100%'></textarea>
		</p>
		<p>
			<input type="submit" name="create" value="블로그 컨텐츠 쓰기"/>
		</p>
	</form>
</body>
</html>

글상자 만들어서 글쓰기 페이지로 활용하기

아래는 gpt 설명 첨부

이 코드는 JSP(JavaServer Pages)를 사용하여 블로그 콘텐츠를 작성할 수 있는 HTML 양식을 구현한 것입니다. 각 부분을 하나씩 설명해 드릴게요.

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

이 라인은 JSP 페이지의 설정을 정의합니다.
- language="java": JSP는 Java를 기반으로 한다는 것을 나타냅니다.
- contentType="text/html; charset=UTF-8": 이 페이지가 HTML 콘텐츠를 포함하고 있으며, UTF-8 인코딩을 사용해 브라우저에 전달된다는 의미입니다.
- pageEncoding="UTF-8": 이 JSP 파일이 UTF-8 인코딩으로 저장된다는 것을 명시합니다.

2. <!DOCTYPE html> ~ <html>

표준 HTML 문서임을 선언하고, HTML 코드를 시작합니다.

3. <head>

HTML 문서의 메타데이터(페이지 제목, 문자 인코딩 등)를 포함합니다.

4. <meta charset="UTF-8">

HTML 페이지의 문자 인코딩을 UTF-8로 지정하여, 다국어 및 특수 문자를 정확하게 표현할 수 있도록 합니다.

5. <title>블로그 컨텐츠 쓰기</title>

브라우저 탭에 표시될 페이지 제목을 정의합니다. 여기서는 "블로그 컨텐츠 쓰기"가 제목으로 설정됩니다.

6. <body>

웹 페이지의 본문을 정의하는 부분입니다.

7. <form method="post">

HTML 폼 태그로, 사용자가 입력한 데이터를 서버로 전송하는 역할을 합니다.
- method="post": 데이터를 서버에 전송할 때, POST 방식을 사용합니다. 이는 데이터가 URL에 포함되지 않고, 서버로 보안성 있게 전송됩니다.

8. <input type='text' name='title' style='width:80%'/>

사용자가 블로그 제목을 입력할 수 있는 텍스트 필드를 제공합니다.
- type='text': 텍스트 입력 필드.
- name='title': 이 필드의 값은 title이라는 이름으로 서버에 전달됩니다.
- style='width:80%': 입력 필드의 너비가 페이지의 80%를 차지하도록 지정합니다.

9. <textarea rows="10" name="content_body" style='width:100%'></textarea>

사용자가 블로그 본문을 작성할 수 있는 텍스트 영역을 만듭니다.
- rows="10": 텍스트 영역의 높이를 10줄로 설정합니다.
- name='content_body': 본문의 내용은 content_body라는 이름으로 서버에 전달됩니다.
- style='width:100%': 텍스트 영역의 너비가 페이지의 100%를 차지하게 합니다.

10. <input type="submit" name="create" value="블로그 컨텐츠 쓰기"/>

폼을 전송하는 버튼입니다.
- type="submit": 버튼을 클릭하면 폼에 입력된 데이터가 서버로 전송됩니다.
- name="create": 이 버튼의 값이 서버로 전달될 때 create라는 이름으로 보내집니다.
- value="블로그 컨텐츠 쓰기": 버튼에 표시될 텍스트입니다.

동작 설명:

이 폼은 사용자가 블로그 제목과 본문을 입력하고, "블로그 컨텐츠 쓰기" 버튼을 클릭하면, 해당 데이터를 서버로 POST 방식으로 전송합니다.
name 속성은 서버로 전송될 데이터의 키가 되고, 사용자가 입력한 값이 서버에서 처리됩니다.

이 폼을 서버에 전송하면, 컨트롤러에서 이를 받아서 새로운 블로그 게시물을 생성할 수 있게 됩니다.

출처 :

https://ysedeveloper.tistory.com/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%BB%A8%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1-%ED%99%94%EB%A9%B4-%EB%B7%B0-%ED%8C%8C%EC%9D%BC-%EC%83%9D%EC%84%B1

저작자표시

'복습 > 스프링-게시판만들기' 카테고리의 다른 글

스프링 mvc - 블로그 만들기/dao클래스 생성 (1)	2024.09.27
2024.02.28 myboard- 부트스트랩 활용 menu.jsp, board.jsp (2)	2024.02.28
2024.02.27 myboard- board (0)	2024.02.22
2024.02.22 myboard- 설치 및 환경설정 (0)	2024.02.22

들쑥날쑥