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;
}
}
'코딩 > 수업 정리' 카테고리의 다른 글
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 |
댓글