1004. BS4 Carousel로 홈페이지에 이미지 삽입하기

tavel_img_random.sql 파일

-- mysql 의 이미지 랜덤 섞기
select * from travel
order by rand()
limit 5;

쿼리 실행할 때마다 다르게 섞인다.

 

랜덤 이미지 뽑기

domain의 travelVO에 해당 코드 입력

0~4 범위이므로 +1하기.

%03d : 001 번, 002번,, 등을 말함

no : 1이면 %03d로 볼 때 001로 취급

i : 앞의 %d에 해당

 

TravelVO

package org.galapagos.domain;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import javax.validation.constraints.NotBlank;

import lombok.Data;

@Data
public class TravelVO {
	private Long no;
	
	@NotBlank(message="권역은 필수 항목입니다.")
	private String region;
	
	@NotBlank(message="제목은 필수 항목입니다.")
	private String title;
	
	@NotBlank(message="내용은 필수 항목입니다.")
	private String description;
	
	private String address;
	private String phone;
	
	public String getImage() {
		int i = new Random().nextInt(5) + 1;
		return String.format("/resources/images/travel/%03d-%d.jpg", no, i);
	}
	
		public List<String> getImages() {
		List<String> list = new ArrayList<String>();
		
		for(int i=1; i<=5; i++) {
			list.add(String.format("/resources/images/travel/%03d-%d.jpg", no, i));
			}
		return list;
	}
		
}

 

Mapper

 

TravelMapper 코드 삽입

public List<TravelVO> getRandom(int count);

 

xml

 

TravelMapper.xml

select 태그 추가

개수를 매개변수로 받을 수 있게 하기

	<select id="getRandom" resultType="TravelVO">
		select * from travel
		order by rand()
		limit #{count}
	</select>

 

Service

TravelServcie

public List<TravelVO> getRandom(int count);

TravelServiceImpl

@Override
public List<TravelVO> getRandom(int count) {
return mapper.getRandom(count);
}

 

Controller

HomeController

 

travels << foreach 루프 돌려야 할 부분 

지울 건 지우고 해도 된다. (난 안 지움..)

package org.galapagos.controller;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import org.galapagos.service.TravelService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
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 {
	
	@Autowired
	private TravelService travelService;

	
	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 );
		
		model.addAttribute("travels", travelService.getRandom(5));
		
		return "home";
	}
	
}

 

 

 

임의의 위치로 갈 수 있는 indicator, 화살표 등 만들기

부트스트랩의 Carousel

1. 어떨 때 active 상태인지(?)

2. carousel 이미지가 div 클래스로 active가 맞아야 함

3. Los Angeles 같은 타이틀도 주고 싶다면 이미지 밑에 carousel-caption 주면 된다.

 

 

---

home.jsp 에서 작업

 

루프는 컬렉션만큼 돌지만 travel 자체는 필요하지 않으므로 foreach를 돌 땐 varStatus(반복문 상태에 대한 참조변수)를 사용한다.

 

*JSTL

여기서는 index를 사용해야 한다.

 

home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@include file="layouts/header.jsp"%>

<div id="travel-carousel" class="carousel slide" data-ride="carousel">

	<!-- Indicators -->
	<ul class="carousel-indicators">
		<c:forEach items="${travels}" varStatus="status">
			<li data-target="#travel-carousel" data-slide-to="${status.index}"
				class="<c:if test="${status.first}">active</c:if>"></li>
		</c:forEach>
	</ul>


	<!-- The slideshow -->
	<div class="carousel-inner">
		<c:forEach var="travel" items="${travels}" varStatus="status">
			<div class="carousel-item <c:if test="${status.first}">active</c:if>">
				<img src="${travel.image}" alt="${travel.title}">
				<div class="carousel-caption">
					<h3>${travel.title}</h3>
				</div>
			</div>
		</c:forEach>
	</div>

	<!-- Left and right controls -->
	<a class="carousel-control-prev" href="#travel-carousel"
		data-slide="prev"> <span class="carousel-control-prev-icon"></span>
	</a> <a class="carousel-control-next" href="#travel-carousel"
		data-slide="next"> <span class="carousel-control-next-icon"></span>
	</a>
</div>


<h1>Welcome!</h1>

<%@include file="layouts/footer.jsp"%>

 

짜잔~

헤헤

 

 

사이즈 제각각인 거 style 줘서 맞추기

https://ojji.wayful.com/2019/07/HTML-tag-how-to-align-and-float-image.html

HTML IMG tag 사용법 : 그림 이미지 크기 조절 방법, 좌우 가운데 정렬 방법, 여백 설정 방법, 기타 속

 

가로를 100%로 하면 좌우가 맞춰진다.

❤️가로 세로 비율이 왜곡되지 않게 하려면

>> object-fit: cover

 

<style>
	.carousel-inner img{
		width: 100%;
		height: 400px;
		object-fit: cover; <!--가로세로 왜곡 보정-->
	}
</style>

빈틈이 거슬리면 해당 부분 검사

nav-var에 mb-5(menu.jsp) margin이 48px 잡혀있었다.

없애면 틈 사라짐(취향껏)

 

 

 

전체 화면을 채우고 싶으면 header.jsp 에서 container-fluid 

--

 

메인에서 이미지 클릭하면 해당 게시글 페이지로 이동하게 하기

home.jsp

 

 

 

+) 해당 게시글 페이지에서 이미지 5개 나오게 하기

get.jsp

 

<style>
	.thumb-images img{
		width: 20%;
		height: 150px;
		padding: 2px;
		object-fit: cover;
	}
</style>

<div class="thumb-images my-5 d-flex">
	<c:forEach var="image" items="${travel.images}">
		<img src="${image}">
	</c:forEach>
</div>

 

 

+) 여기 상세보기에서도 사진 누르면 원본사이즈로 보여주기는 내일..