본문 바로가기
코딩/수업 정리

21.01.22 [043] Fri

by 6^6 2021. 1. 22.
728x90

SPRING

신입SW인력을_위한_실전_자바(Java)_스프링(Spring)_동영상과정_제12강_컨트롤러

 

[HomeController.java]
package edu.bit.ex;
 
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
 
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
 
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
 
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
 
		String formattedDate = dateFormat.format(date);
 
		model.addAttribute("serverTime", formattedDate);
 
		return "home";
	}

 

얘로 수정
[HomeController.java]
package edu.bit.ex;
 
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
 
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
 
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
 
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
 
		String formattedDate = dateFormat.format(date);
 
		model.addAttribute("serverTime", formattedDate);
 
		return "home";
	}
 
	@RequestMapping(value = "/board/view", method = RequestMethod.GET)
	// 클라이언트가 /board/view 적으면 view.jsp로 이동
	// 주소: http://localhost:8282/ex/board/content
	public String view() {
		logger.info("view() 실행");
 
		return "view";
	}
 
	@RequestMapping(value = "/board/list", method = RequestMethod.GET)
	// 클라이언트가 /board/list 적으면 list.jsp로 이동
	public String list() {
		logger.info("list() 실행");
 
		return "list";
	}
 
	@RequestMapping(value = "/board/content", method = RequestMethod.GET)
	// 클라이언트가 /board/content 적으면 content_view.jsp로이동.
	public String content(Model model) {
		logger.info("content() 실행");
 
		return "content_view";
	}
 
}

 

 

[view.jsp]
<?xml version="1.0" encoding="UTF-8"?>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
 
	<h1>this is View.jsp</h1>
</body>
</html>

[list.jsp]
<?xml version="1.0" encoding="UTF-8"?>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
 
	<h1>this is List.jsp</h1>
</body>
</html>

 

===========이제 controller에서 content수정, content.jsp 수정==============

[HomeController.java - content_view]
	@RequestMapping(value = "/board/content", method = RequestMethod.GET)
	// 클라이언트가 /board/content 적으면 content_view.jsp로이동.
	public String content(Model model) {
		logger.info("content() 실행");
 
		model.addAttribute("id", 30);
		return "content_view";
	}
[content_view.jsp]
<?xml version="1.0" encoding="UTF-8"?>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>this is Content.jsp
	content_view.jsp<br>
	id : ${id}
	</h1>
</body>
</html>

===========ModelAndView객체로 리턴하는 방법============

[HoemController.java]
@RequestMapping("/board/ModelAndView")
	public ModelAndView contentview() {
		//String이 아니라 ModelAndView객체로!
			ModelAndView mv = new ModelAndView();
			mv.addObject("id", "아이디입력");
			mv.setViewName("/content/contentView");
 
			return mv;
		
	}
[contentView.jsp] - view폴더에 content폴더 하나 더 만들어서 넣어준것
<?xml version="1.0" encoding="UTF-8"?>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>this is contentView.jsp<br>
	id : ${id}
	</h1>
</body>
</html>

============login page만들기 위해 LoginController와 loginview, naverloginview를 만든다.==============

 

[LoginController.java]
package edu.bit.ex;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
 * Handles requests for the application home page.
 */
@Controller
public class LoginController {
 
	private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
 
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping("/login")
	public String login() {
 
		return "login";
	}
	@RequestMapping("/login/naver")
	public String naver() {
 
		return "/login/naver";
	}
}
[login.jsp]
<?xml version="1.0" encoding="UTF-8"?>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>
	this is login page.
	</h1>
</body>
</html>

[naver.jsp]
<?xml version="1.0" encoding="UTF-8"?>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>this is naver login page</h1>
</body>
</html>

 

 

 

 

 

 

 

신입SW인력을_위한_실전_자바(Java)_스프링(Spring)_동영상과정_제13강_form 데이터

 

 

 

값넘어올때 String으로 어떻게 받아오느냐

HttpServletRequest로 받는 방법

[HomeController.java]
@RequestMapping("board/confirmId")
	public String confirmId(HttpServletRequest req,Model model) {
		String id = req.getParameter("id");
		String pw = req.getParameter("pw");
		
		model.addAttribute("id",id);
		model.addAttribute("pw",pw);
		
		return"board/confirmId";
        	//view폴더 안에 board폴더 만들고 .jsp파일 생성
	}
[confirmId.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>this is confirmId.jsp<br>
	id : ${id}
	pw : ${pw}
	</h1>
</body>
</html>

Get방식이기 때문에 주소창에 입력하면 출력됨

RequestParam으로 넘기는 방법.

[HomeController.java]
@RequestMapping("board/checkId")
	public String checkId(@RequestParam("id") String id, @RequestParam("pw") int pw, Model model) {
 
		model.addAttribute("identify",id);
		model.addAttribute("password",pw);
		
		return"board/checkId";
	}
[checkId.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<?xml version="1.0" encoding="UTF-8"?>
 
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>
	id : ${identify}<br>
    //${컨트롤러에 적어준 name이랑 똑같이 적어줘야함}
	pw : ${password}
	</h1>
</body>
</html>

 

 

(Member member)에 객체를 담아서 Member member 를 데이터객체(=커맨드객체)라고 부른다.

Member는 Command를 위해 만드는 파일이어서 이름 따로 지정해주면됨. package폴더에 만들기

[HomeController.java]
@RequestMapping("/member/join")
	public String joinData(Member member) {
					//커맨드객체라고 controller에서 명령
//따라서 model객체를 addAttribute로 담아서 받지 않아도 그냥 jsp에서 갖다 쓸수있다.
		
		return"member/join";
		//view폴더에 member폴더 만들고 join.jsp만들기
	}	
[Member.java]
package edu.bit.ex.member;
 
public class Member {
	private String id;
	private String pw;
 
public Member() {	
	}
	public Member(String id, String pw) {
		this.id = id;
		this.pw = pw;
	}
	
	public String getId() {
		return id;
	}
 
	public void setId(String id) {
		this.id = id;
	}
 
	public String getPw() {
		return pw;
	}
 
	public void setPw(String pw) {
		this.pw = pw;
	}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
	<h1>
		<br>아이디 : ${member.id} 
		<br>비밀번호 : ${member.pw} 
	</h1>
</body>
</html>

주의점

getter, setter 반드시 적기!!

만약 set을 안적게되면 controller에서 에러가 난다. set함수가 없으니까 객체를 담아올수가 없다.

만약 get를 안적게되면 join.jsp에서 에러가 난다. 객체는 담아왔는데 get으로 호출할수가 없어서. 505에러남.

 

디폴트생성자를 꼭 적기!!

안적어주면 에러내용 : No default constructor found; nested exception is java.lang.NoSuchMethodException: 

만약 public Member(String id, String pw) { this.id=id; this.pw=pw;}를 안쓰면 상관없는데 저렇게 값을 받는걸 디폴트생성자를 안쓰면 값을 받을수가없게 고슬링아저씨가 만들었다.

 

 

 

 

 

 

 

자바스크립트

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
<style>
</style>
</head>
<body>
	<script type="text/javascript">
	window.onload = function(){
		
		var str = "";
		str += "<p id='jsTitle'> javascripot&node.js</p>";
		str += "<img id='logoImg', src='logoImg.PNG',";
		str += "width='170', height='67', tempData='logoImg'>"
		document.body.innerHTML = str;
		
		var titleNode = document.getElementById("jsTitle");
		titleNode.parentNode.removeChild(titleNode);
		
		var logoNode = document.getElementById("logoImg");
		logoNode.parentNode.removeChild(logoNode);
	}
	</script>
	</body>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
<style>
</style>
</head>
<body>
	<script type="text/javascript">
	window.onload = function(){
		
		var str = "";
		str += "<p id='jsTitle'> javascripot&node.js</p>";
		str += "<img id='logoImg', src='logoImg.PNG',";
		document.body.innerHTML = str;
		
		var titleNode = document.getElementById("jsTitle");
		titleNode.style.fontSize = "1.2em";
		titleNode.style.border = "1px solid #ff0000";
		
		var logoNode = document.getElementById("logoImg");
		logoNode.style.width = "170px";
		logoNode.style.height = "67px";
	};
	</script>
	</body>

 

 

 

 

 

(PT)Javascript와_Node.js_15강_javascript 이벤트

 

 

 

 

ex. 버튼을 클릭하면 동적으로 hello world를 삭제하고싶을때 쓴다.

이런걸 전부 이벤트 형식으로 제공되고있다.

 

 

 

onclick → 마우스클릭 이벤트

 

첫번째방법 인라인모델

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript"></script>
<style>
</style>
</head>
<body>
	<script type="text/javascript">
		function headerClick() {
			console.log("click!");
		}
	</script>
 
	<style>
#cEvent {
	width: 200px; height: 100 px;
	line-height: 100px;
	text-align: center;
	font-size: 1.2em;
	background-color: #f00;
	color: #fff;
	font-weight: bolder;
}
</style>
 
 
</body>
<div id="cEvent" onclick="headerClick();">click event</div>

 

↑클릭하면 옆에 클릭횟수가 늘어남

 

 

 

 

 

 

 

 

두번째방법 : 기본모델 (명시적선언 - 그냥 함수만들어서 그 이름을 바로 onclick에 연결) - 별로 안좋은코드.보안적으로 안좋음,. 개발자들이 안좋아하는 코드

 

밑에 <div>아이디에대해서 이벤트를 주고싶을때 그대로 객체를 가져와서 위에다 onclick을 만들어준다.

(첫번째 방법에선 밑에 다가 onclick을 씀)

<!DOCTYPE html>
<html>
 
	<head>
		<title>JavaScript</title>
		
		<script>
			
			window.onload = function(){
				
				var ce = document.getElementById("cEvent");
				//방법 I
				ce.onclick = function(){
					console.log("click!");
					//이벤트 제거
					//ce.onclick = null;
				}
				
				/*
				//방법 II
				ce.onclick = clickEventHandler;
				function clickEventHandler(){
					console.log("clickEventHandler!");
					//이벤트 제거
					//ce.onclick = null;
				}
				*/
				
			};
			
			
			
		</script>
		
		<style>
			#cEvent {
				width: 200px; height: 100px;
				line-height: 100px;
				text-align: center;
				font-size: 1.2em;
				background-color: #f00;
				color: #fff;
				font-weight: bolder;
			}
		</style>
	</head>
	
	<body>
	
		<div id="cEvent">click event</div>
	
	</body>
 
</html>

 

 

 

↑개발자들이 좋아하는 함수. 함수만들어서 한번 넣고 하는게 좋은 코드.

 

 

listner에 addHandler

addHandler = 콜백함수

 

 

 

오늘의 문제

1. command객체에 대하여 설명하시오.

getParameter 대신 쓸 수 있는것

 

 

2.ModelAndView 객체에 대하여 설명하시오.

 

3.아래의 골뱅이에 대하여 설명하시오.

@Controller

@RequestParam

@RequestMapping

 

4.아래를 프로그래밍 스프링으로 프로그래밍 하시오.
-국영수 입력 페이지
-국영수점수를 서버에서 받아서,총점과 평균을 리턴
-해당 총점과 평균의 점수의 색깔은 각각 빨간색과 파란색으로 만들것(JS로).

 

[GradeController.java]
package edu.bit.ex;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
 
import edu.bit.ex.mygrade.Subject;
 
/**
 * Handles requests for the application home page.
 */
@Controller
public class GradeController {
 
	private static final Logger logger = LoggerFactory.getLogger(GradeController.class);
 
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping("/grade/input")
	public String MyGrade() {
 
		return "grade/input";
	}
	
	@RequestMapping("/grade/score")
	public String MyGrade(Subject subject) {
 
		return "grade/score";
	}
}
[Subject.java]
package edu.bit.ex.mygrade;
 
public class Subject {
	private double kor;
	private double eng;
	private double math;
 
	public Subject(double kor, double eng, double math) {
		super();
		this.kor = kor;
		this.eng = eng;
		this.math = math;
	}
 
	public Subject() {
 
	}
 
	public double getKor() {
		return kor;
	}
 
	public void setKor(double kor) {
		this.kor = kor;
	}
 
	public double getEng() {
		return eng;
	}
 
	public void setEng(double eng) {
		this.eng = eng;
	}
 
	public double getMath() {
		return math;
	}
 
	public void setMath(double math) {
		this.math = math;
	}
 
}
[input.jsp]
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
</head>
<body>
 
<h1>My Grade</h1>
 
<form action="score">
국어 : <input type="number" name="kor"><br/>
영어 : <input type="number" name="eng"><br/>
수학 : <input type="number" name="math"><br/>
<input type="submit" value="제출">
</form>
</body>
</html>
[score.jsp]
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
<script>
window.onload = function(){
	var scoreColor = document.getElementById("scoreColor");
	scoreColor.style.color = "blue";
	
	var avgColor = document.getElementById("avgColor");
	avgColor.style.color = "red";
};
</script>
</head>
<body>
 
<h1>My Grade</h1>
 
국어 : ${subject.kor}<br/>
영어 : ${subject.eng}<br/>
수학 : ${subject.math}<br/>
총점 : <span id="scoreColor">${subject.kor+subject.eng+subject.math}</span><br/>
평균 : <span id="avgColor">${(subject.kor+subject.eng+subject.math)/3}</span>
</body>
</html>

 

 

 


5.제일위에 입력버튼 하나를 만든다.
-버튼을 누르면 200*200 파란색 박스가 하나씩 계속해서 생기는 프로그램을 만드시오.
  

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JavaScript</title>
<script>
		function plus(){
		document.getElementById("box").innerHTML
						//inner'HTML'빼먹지 말기
			+= "<div style='background-color: blue; 
            width: 200px; height: 200px;'></div><br>";
 
		}
		</script>
<style>
 
</style>
</head>
<body>
<div id="box">
	<input type="button" value="클릭" onclick="plus()">
	</div>
</body>
</html>

 

 

+7. 사각형의 가로,세로 입력박스 만들고

버튼 :입력/리셋 버튼 만들고 사각형의 넓이를 보여주는 페이지작성
command객체 사용할것

[input.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
<form action="recpage">
가로 : <input type="text" name="width"><br/>
세로 : <input type="text" name="height"><br/>
<input type="submit" value="입력">
</form>
</body>
</html>

 

[recpage.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
 
<head>
<title>Home</title>
</head>
 
<body>
가로 : ${square.width} <br>
세로 :  ${square.height}<br>
넓이 :  ${square.height*square.width}
<form action="input" method="get">
<input type="submit" value="리셋">
</form>
</body>
</html>

 

[LoginController.java]
package edu.bit.ex;
 
	@Controller
	public class LoginController {
 
	private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
 
 
 
	@RequestMapping("/member/input")
	public String AreaData() {
					
		return"member/input";
		
	}
 
	@RequestMapping("/member/recpage")
	public String AreaData1(Square square) {
					
		return"member/recpage";
		
	}	
}
[Square.java]
package edu.bit.ex.member;
 
public class Square {
	private int width;
	private int height;
 
 
	public Square(int width, int height) {
		this.width = width;
		this.height = height;
 
	}
 
	public Square() {
 
	}
 
	public int getWidth() {
		return width;
	}
 
	public void setWidth(int width) {
		this.width = width;
	}
 
	public int getHeight() {
		return height;
	}
 
	public void setHeight(int height) {
		this.height = height;
	}
 
}
728x90
저작자표시 비영리 변경금지 (새창열림)

'코딩 > 수업 정리' 카테고리의 다른 글

21.01.26 [045] Tue  (0) 2021.01.26
21.01.25 [044] Mon  (0) 2021.01.25
21.01.21 [042] Thu  (0) 2021.01.21
21.01.20 [041] Wed  (0) 2021.01.20
21.01.19 [040] Tue  (0) 2021.01.19

관련글

댓글

티스토리툴바