front-end에서 마지막으로 만들었던통나무펜션을 적극 활용해서 아래 페이지를 완성하세요.
booking테이블의 데이터를 활용해서 아래와 같은 페이지를 완성하세요.
삭제 기능은AJAX로 구현하세요.
2. 예약하기 페이지
예약하기 페이지에서 기본 유효성 검사를 포함 시키세요.
날짜 선택은datepicker를 이용하세요.
예약 하기 기능은AJAX로 구현하세요.
3. 예약 조회 기능
통나무펜션페이지를 활용해서 예약 조회 기능을 만드세요.
이름과 전화번호를 입력 받고, 이를 통해서 예약 내역을 조회하세요.
조회 기능은AJAX로 구현하세요.
조회가 될 경우 아래와 같이 얼럿창을 띄워서 예약 내역을 출력하세요.
조회가 안 될 경우예약 내역이 없습니다를 출력하세요.
4. 팬션 소개 기능
자바스크립트를 이용하여 넘기기 버튼을 생성하여 이미지를 바꿔보세요.
자바스크립트를 이용하여 이미지를 선택시, 확대해보세요.
🍁 프로젝트 코드
Java - Controller
package com.quiz.lesson06;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.quiz.lesson06.bo.BookingBO;
import com.quiz.lesson06.model.Booking;
@RequestMapping("/lesson06/booking")
@Controller
public class BookingController {
@Autowired
private BookingBO bookingBO;
// 1. 예약 목록 화면
// localhost:8080/lesson06/booking/booking_view
@GetMapping("/booking_view")
public String bookingView(Model model) {
// select DB
List<Booking> booking = bookingBO.getBookingList();
model.addAttribute("booking", booking);
return "lesson06/booking";
}
// 1. 예약 삭제
// AJAX 요청
// localhost:8080/lesson06/booking/delete_booking
@DeleteMapping("/delete_booking")
@ResponseBody
public Map<String, Object> deleteBooking (
@RequestParam("id") int id) { // "id"는 ajax에서 data: {"id":id} 여기서 온 파라미터임. ""
// delete
int rowCount = bookingBO.deleteBookingById(id);
Map<String, Object> result = new HashMap<>();
if (rowCount > 0) {
result.put("code", 1); // 1: 성공
result.put("result", "성공");
} else {
result.put("code", 500); // 500: 에러
result.put("errorMessage", "삭제하는데 실패했습니다.");
}
return result;
}
// 2. 예약하기 화면
// insert
// localhost:8080/lesson06/booking/booking_insert_view
@GetMapping("/booking_insert_view")
public String bookingInsertView() {
return "lesson06/booking_insert_layout";
}
// 2. 예약하기 기능
// 예약하기 API
// AJAX 요청
// localhost:8080/lesson06/booking/insert_booking
@ResponseBody
@PostMapping("/insert_booking")
public Map<String, Object> addBooking(
@RequestParam("name") String name, // ajax에서 넘겨준 key명과 똑같은 파라미터를 쓰는 것임!
@RequestParam("headcount") int headcount,
@RequestParam("day") int day,
@RequestParam("date") @DateTimeFormat (pattern="yyyy-MM-dd") Date date,
@RequestParam("phoneNumber") String phoneNumber){
// {"code":1, "result":"성공"}
// {"code":500, "errorMessage":"추가하는데 실패했습니다."}
// insert
int rowCount = bookingBO.addBooking(name, headcount, day, date, phoneNumber);
Map<String, Object> result = new HashMap<>(); // breakpoint
if(rowCount > 0) {
result.put("code", 1);
result.put("result", "성공");
} else {
result.put("code", 500);
result.put("errorMessage", "데이터를 추가하는데 실패했습니다.");
}
return result; // JSON String
}
// 3. 예약 조회 하면
// localhost:8080/lesson06/booking/booking_select_view
@GetMapping("/booking_select_view")
public String bookingSelectView() {
return "lesson06/booking_select_layout";
}
// 3. 예약 조회 기능
// 예약 조회 - AJAX 요청
// localhost:8080/lesson06/booking/booking_select
@ResponseBody
@GetMapping("/booking_select")
public Map<String, Object> selectBooking (
@RequestParam("name") String name,
@RequestParam("phoneNumber") String phoneNumber) {
Map<String, Object> result = new HashMap<>(); // breakpoint // Map은 항상 위에 있어야함.
//select DB - TODO - 구현을 안했는데 해야되는게 있을때 쓰는 것임.select DB
Booking booking = bookingBO.getBookingListByField(name, phoneNumber); // 데이터 한개 또는 빵개 받아옴.
if (booking == null) {
result.put("join", "조회 불가");
} else {
result.put("booking", booking);
// result.put("name", booking.getName());
// result.put("date", booking.getDate());
// result.put("day", booking.getDay());
// result.put("headCount", booking.getHeadcount());
// result.put("state", booking.getState());
}
return result;
}
// 4. 팬션 조회 화면
// select
// localhost:8080/lesson06/booking/booking_house_view
@GetMapping("/booking_house_view")
public String bookingHouseView() {
return "lesson06/booking_house_layout";
}
}
Java - Booking (model)
package com.quiz.lesson06.model;
import java.util.Date;
public class Booking {
private int id;
private String name;
private int headcount;
private int day;
private Date date; // date
private String phoneNumber;
private String state;
private Date createdAt;
private Date updatedAt;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getHeadcount() {
return headcount;
}
public void setHeadcount(int headcount) {
this.headcount = headcount;
}
public int getDay() {
return day;
}
public void setDay(int day) {
this.day = day;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public String getPhoneNumber() {
return phoneNumber;
}
public void setPhoneNumber(String phoneNumber) {
this.phoneNumber = phoneNumber;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public Date getCreatedAt() {
return createdAt;
}
public void setCreatedAt(Date createdAt) {
this.createdAt = createdAt;
}
public Date getUpdatedAt() {
return updatedAt;
}
public void setUpdatedAt(Date updatedAt) {
this.updatedAt = updatedAt;
}
}
Java - BookingBO
package com.quiz.lesson06.bo;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.quiz.lesson06.dao.BookingMapper;
import com.quiz.lesson06.model.Booking;
@Service
public class BookingBO {
@Autowired
private BookingMapper bookingMapper;
// select
// output: List<Booking> input: x
public List<Booking> getBookingList() {
return bookingMapper.selectBookingList();
}
// delect
public int deleteBookingById(int id) {
return bookingMapper.deleteBookingById(id);
}
// insert
public int addBooking(String name, int headcount, int day, Date date, String phoneNumber) {
return bookingMapper.insertBooking(name, headcount, day, date, phoneNumber);
}
// select
public Booking getBookingListByField(String name, String phoneNumber) { // 한 행만 필요하기 때문에 Booking.
// 원래 BO에서 가공 많이함!!!
// ** Booking - 없으면 null // List - 없으면 []
// 선생님 코드.
List<Booking> bookingList = bookingMapper.selectBookingListByField(name, phoneNumber);
// [1 3 7\ - 7번만 줘야 된다. 즉 마지막 꺼를 준다.
// x - 없을 때도 체크
// 7 - 1개면 한개만 주면 됨.
if (bookingList.isEmpty()) {
return null;
}
// 비어있지 않으면 값이 있고, 마지막 인덱스에 있는 값을 돌려준다. (최신값) : 인덱스 값 얻기 위해 -1
return bookingList.get(bookingList.size() - 1);
}
}
Java - BookingMapper
package com.quiz.lesson06.dao;
import java.util.Date;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import com.quiz.lesson06.model.Booking;
@Repository
public interface BookingMapper {
// select
public List<Booking> selectBookingList();
// delect
public int deleteBookingById(int id);
// insert
public int insertBooking(
@Param("name") String name,
@Param("headcount") int headcount,
@Param("day") int day,
@Param("date") Date date,
@Param("phoneNumber") String phoneNumber);
// select
public List<Booking> selectBookingListByField( // 한 행만 필요하기 때문에 Booking. // db에서 다가져 오기 - List<Booking>
@Param("name") String name,
@Param("phoneNumber") String phoneNumber);
}
