고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘도 열시가 넘어서 집에 들어왔습니다
코딩을 하는게 너무나도 재밌습니다
동적 코딩으로 바꾸고
함수를 선언하고 무언가 기능이 하나씩 생겨가는걸 보면서
성취감도 들고 스스로도 뿌듯하고
무엇보다 이제는 누구의 코딩을 따라하는게 아닌
스스로가 공부해서 만들어가는 코딩을 하고 있기 때문에
만들어진 코드에 애착이 생기는 것 같습니다
학원 수업
세션과 쿠키 (상품 세션 발급하기)
장바구니
배포 : members.war
쿼리 사용
- 로그인 정보, 페이지 이동
- 공지사항 창 오늘 하루 그만보기
- 상품 영수증 출력
세션 = 웹 서버(톰캣)에 저장
쿠키 = 로컬 컴퓨터에 저장, 세션을 로컬에 보내줌(jsessionid)
서버가 클라이언트에 저장하는 정보로써 클라이언트쪽에 필요한 정보를 저장해 놓고 필요할 때 추출하는 것
jsessionid = 톰캣 컨테이너에서 세션을 유지하기 위해 발급하는 키
쿠키 발행 = 쿠키 정보를 가져와서 사용하기
Cookie cookieId = new Cookie("userId", id);
Cookie[] cookies = request.getCookies();
쿠키 이름 : getName();
쿠키 값 : getValue();
배포(deploy) - 프로젝트를 어떤 장소(서버)에 이동시키는 것
운영서버 - 웹하드, 클라우드
개별서버 - 로컬컴퓨터(톰캣 서버)
파일 확장자 - .war
* login
<!-- loginform.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
<style>
#content{width: 800px; margin:0 auto; text-align: center;}
</style>
</head>
<body>
<div id="content">
<h2>로그인</h2>
<hr>
<form action="selproduct.jsp" method="post">
<p>이름: <input type="text" name="username">
<input type="submit" value="로그인"></p>
</form>
</div>
</body>
</html>
* select product
<-- selproduct.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 선택</title>
<style>
#content{width: 800px; margin:0 auto; text-align: center;}
</style>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
// 로그인 후 세션 발급
String username = request.getParameter("username");
session.setAttribute("sessionName", username);
%>
<div id="content">
<h2>상품 선택</h2>
<hr>
<p><%=session.getAttribute("sessionName") %> 님이 로그인한 상태입니다
<form action="addproduct.jsp">
<select name="productName">
<option value="사과">사과</option>
<option value="바나나">바나나</option>
<option value="토마토">토마토</option>
</select>
<input type="submit" value="추가">
</form>
<p><button onclick="location.href='cart.jsp'">장바구니</button></p>
</div>
</body>
</html>
* addproduct
<-- addproduct.jsp -->
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
// 상품을 저장할 어레이리스트 생성
ArrayList<String> productList = (ArrayList)session.getAttribute("sessionlist");
if(productList == null){
productList = new ArrayList<>();
session.setAttribute("sessionlist", productList);
}
// 상품을 파라미터로 전달받음
String product = request.getParameter("productName");
// 상품을 리스트에 추가
productList.add(product);
%>
<script>
alert("<%=product %>가 추가되었습니다.");
history.back();
</script>
* cart
<-- cart.jsp -->
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품 선택</title>
<style>
#content{width: 800px; margin:0 auto; text-align: center;}
</style>
</head>
<body>
<div id="content">
<h2>장바구니</h2>
<h3>선택한 상품 목록</h3>
<hr>
<%
ArrayList<String> productList = (ArrayList)session.getAttribute("sessionlist");
if(productList != null){
for(String product : productList){
out.println(product + "<br>");
}
}else {
out.println("주문한 상품이 없습니다");
}
%>
</div>
</body>
</html>
반려동물 온라인 쇼핑몰 페이지 만들기
왼쪽 네비바의 광고 사진이 3초정도의 간격을 두고
자동으로 변화하도록 기능을 추가하였고
우측 아래 부분에 버튼을 두어 제일 밑이나 제일 위쪽으로
바로 갈 수 있도록 하였고
제일 아래로 내려오면 아래로 내려가게 해주는 버튼이
보이지 않도록 해주는 효과를 구현하였습니다
* CSS
.go_top_bottom {
position: absolute;
display: flex;
flex-direction: column;
top: 750px;
right: 50px;
}
.go_top_bottom button {
border: none;
width: 50px;
height: 50px;
background: #B1CE57;
border: 1px solid #fff;
}
#go_bottom {
transition: opacity 0.5s ease-in-out;
}
.fadeOut {
opacity: 0;
}
.fadeIn {
opacity: 1;
}
* JS
function changeAd(){
let nav = document.querySelector("#scroll_left");
let addList = [
{id: "ad1", link: "/ad1.do", class: "advertisement", src: "img/ad/광고_02_advertisement1.jpg"},
{id: "ad2", link: "/ad2.do", class: "advertisement", src: "img/ad/광고_02_advertisement2.jpg"}
]
addList.forEach(function(element){
let addDiv = document.createElement("div");
let addA = document.createElement("a");
let addImg = document.createElement("img");
addImg.className = element.class;
addImg.src = element.src;
addA.href = element.link;
addDiv.id = element.id;
addA.appendChild(addImg);
addDiv.appendChild(addA);
nav.appendChild(addDiv);
})
let turn = "on";
function AdChange(){
let ad1 = document.querySelector("#ad1");
let ad2 = document.querySelector("#ad2");
ad1.style.transition = "opacity 1s ease-in-out";
ad2.style.transition = "opacity 1s ease-in-out";
if(turn == "on") {
ad1.style.opacity = 0;
ad2.style.opacity = 1;
turn = "off";
}else {
ad1.style.opacity = 1;
ad2.style.opacity = 0;
turn = "on";
}
}
setInterval(AdChange, 3500);
}
function goTop(){
window.scrollTo({ top: 0, behavior: "smooth" });
}
function goBottom(){
let height = document.body.scrollHeight;
window.scrollTo({ top: height, behavior: "smooth" });
}
function removeBtn() {
let btn = document.querySelector("#go_bottom");
let viewportHeight = window.innerHeight;
let maxHeight = document.body.offsetHeight;
let currentHeight = window.scrollY;
let nowHeight = currentHeight + viewportHeight;
if (maxHeight <= nowHeight) {
btn.classList.add("fadeOut");
setTimeout(() => {
btn.classList.remove("fadeOut");
}, 500);
btn.style.opacity = "0";
} else {
setTimeout(() => {
btn.classList.add("fadeIn");
setTimeout(() => {
btn.classList.remove("fadeIn");
}, 500);
btn.style.opacity = "1";
}, 0);
}
}
window.addEventListener("scroll", removeBtn);
2023. 12. 12 (화)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 87일차 (0) | 2023.12.16 |
|---|---|
| 프로그래머 도전기 86일차 (0) | 2023.12.14 |
| 프로그래머 도전기 84일차 (0) | 2023.12.11 |
| 프로그래머 도전기 83일차 (0) | 2023.12.10 |
| 프로그래머 도전기 82일차 (0) | 2023.12.09 |
Choyee's BlogChoyee 님의 블로그입니다.
