HaileyKim

문제점 :

데이터베이스에있는 강아지목록중에 선택한 강아지의 상세보기가 안되고,

한 팝업창에 3마리의 정보가 한꺼번에 나열되었다.

백엔드 연습중이어서 자바를 수정해야했다.

해결 : 

-DB, JSP, JS 모두 수정

DB :

DB의 목록중 특정 행의 자료를 끌고와야한다.

식별할 수있는 ID컬럼추가 및 ID명 추가

JSP

강아지프로필 불러올 태그에 자바코드 부여

1. jsp 파일에 반복할 for문넣기

2. 선택한것을 식별하기위한 id값넣기 (div)태그추가

3.div태그에 클래스명 부여 "pet-id- [p.getId()]"

<%for(Pet p : list){ %>
<div class="pet-id-<%= p.getId() %> d-none">
<div class="detail-name">
<h2><%=p.getName() %></h2>​

팝업 close버튼에 hidden input 태그넣기

프로필 팝업 3가지중 특정 팝업만 id부여

<div class="profile-popup" id="popup-1">
	<%-- <%for(Pet p : list){ %> --%>
		<div class="popup-content">
			<div class="close-btn" onclick="togglePopup()">×</div>
				<input type="hidden" id="petId" name="petId" value="">

Javascript

js 팝업함수 재정의

1. hidden input태그 선택

2. if조건문 : id가 있다면 input태그의 value에 id값을 넣기

3. 클래스명이 pet-id-숫자 인것을 선택

4. 해당 클래스의 d-none을 지운다.

//상세보기
function togglePopup(id) {
	console.log("profile");
	console.log(id);
	document.getElementById("popup-1").classList.toggle("active");
	//var detail = document.querySelector('.dog-info .detail');
	//var petId = '.pet-id-' + id
	//console.log(petId);
	var petId = document.querySelector('#petId');//hidden input태그 선택
	var pet;
	if (id) petId.value = `${id}`;	
	
	pet = document.querySelector(`.pet-id-${petId.value}`);
	//console.log(petId);
	//console.log(pet)
	//if(petId.value) pet = document.querySelector(`.pet-id-${petId.value}`);
	pet.classList.toggle('d-none');	
}

오늘 수업에 배운 input hidden을 적용했는데, 신기하다..

가려진 input태그로 id가 전달이 되서 그 id관련 정보만 출력된다. 

사진업로드 및 프로필수정적용,삭제 배우면 CRUD작업은 거의 마무리 되가는것같다. 빨리 완성하고싶다. 

Javascript Project 3 . 영화관 좌석 예약

영화관 좌석 예약시스템 만들기

• 이용자가 원하는 영화를 선택후 해다 영화금액에 맞춰 금액이 책정
• 선택한 좌석의 수가 하단에 업데이트
• 웹스토리를 이용해서 사용자가 선택했던 좌석을 임시저장 (새로고침해도 사용다시 재확인할 수있다)
• 이미 예약된 좌석은 선택이 불가능

CSS

• perspective를 사용해 스크린모양에 원근법을 적용
• rotate를 이용해 스크린의 각도조절. 기울기조정
• select박스 디자인변경 (네이티브지원모양 해제)

JS

• localstorage 사용 : 키의  값을 사용해 이용자가 선택한 좌석 정보가 남아있게한다.
• 로컬스토리지를 통해 읽어온 좌석정보를 자바스크립트 객체로변환

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

equality37.tistory.com/16

nykim.work/26

www.daleseo.com/js-web-storage/

gahyun-web-diary.tistory.com/80