https://jini00.tistory.com/123
4주차 내용은 위의 내용을 참고하면 된다.
https://github.com/jini-coding/ott_review_project
[ DB ]
contents_review라는 DB를 생성하였다.
id는 자동으로 1씩 증가시켜 중복되지 않는 식별자를 갖도록 하였다.
title, ott, category는 공백을 허용하지 않도록 하였고 score은 총 5점 만점으로 매길 수 있도록 하려고 한다.
comments는 공백을 허용하며 작성 시간도 나타나도록 하였다.
INSERT INTO contents(title, ott, category, score, comments, created) VALUES('오징어 게임', 'netflix', '영화', '5',
'잔인함 속에 가려진 인간의 추악한 면, 그리고 다양성', NOW());
위와 같은 코드를 작성하여 밑에와 같은 데이터를 넣었다.
이는 나중에 웹페이지를 통해 작성받아 DB에 저장받도록 할 예정이다.
[ 메인 페이지 ]
메인페이지 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{
text-align: center;
padding: 35px;
color :#A50000;
border-bottom:1px solid black;
font-size: 5em;
font-family : sans-serif;
}
img{
box-shadow : 5px 5px 5px #BDBDBD;
border-radius : 30px;
}
body{
background-color:#FFD8D8;
height : 2000px;
}
nav, section{
display : flex;
justify-content: center;
}
nav a{
text-decoration: none;
color : black;
margin : 2em;
}
#underline{
position : absolute;
width:0;
background-color: black;
top:340px;
left:0;
height:4px;
transition:0.5s;
}
</style>
<title></title>
</head>
<body>
<h1>OTT별 콘텐츠 추천</h1>
<nav>
<div id="underline"></div>
<a href="About.php">About</a>
<a href="Board.php">Board</a>
<a href="Search.php">Search</a>
</nav>
<script>
let under = document.getElementById("underline");
let menu = document.querySelectorAll("nav a");
menu.forEach((menu)=>
menu.addEventListener("mouseover",(e)=>indicator(e))
);
function indicator(e){
under.style.left=e.currentTarget.offsetLeft+"px";
under.style.width=e.currentTarget.offsetWidth+"px";
under.style.top=
e.currentTarget.offsetTop+e.currentTarget.offsetheight+"px";
}
</script>
<section>
<a href="netflix.php"><img class="netflix_icon" src="netflix_img.PNG"></a>
<a href="tving.php"><img class="tving_icon" src="tving_img.PNG"></a>
<a href="watcha.php"><img class="watcha_icon" src="watcha_img.PNG"></a>
<a href="disney.php"><img class="disney_icon" src="disney+_img.PNG"></a>
</section>
</body>
</html>
저번주와 크게 달라진 부분
- About, Board, Search 버튼
- 버튼 아래의 underline
<nav>
<div id="underline"></div>
<a href="About.php">About</a>
<a href="Board.php">Board</a>
<a href="Search.php">Search</a>
</nav>
<script>
let under = document.getElementById("underline");
let menu = document.querySelectorAll("nav a");
menu.forEach((menu)=>menu.addEventListener("mouseover",(e)=>indicator(e)));
function indicator(e){
under.style.left=e.currentTarget.offsetLeft+"px";
under.style.width=e.currentTarget.offsetWidth+"px";
under.style.top=e.currentTarget.offsetTop+e.currentTarget.offsetheight+"px";
}
</script>
a태그로 각 버튼에 알맞는 페이지를 연결시켰다. 이를 nav태그로 한번에 감싸주었다. 이렇게 각자 버튼을 만들었다.
여기서 각 버튼에 마우스를 가져갔을 때 밑에 밑줄을 생기도록 하고 싶었다. 그래서 자바스크립트를 이용해주었다.
먼저 underline과 nav a태그인 메뉴들을 가져와주었고 각 메뉴에다가 mouseover이벤트가 일어날때마다 indicator 함수를 실행하도록 하였다. 그리고 addEventListener을 통해 자동으로 event(e)를 넘겨주었다. 이 event 안에 뭘 선택했는지가 나오게 된다.
indicator함수에서는 인자를 e로 받아왔다.
div태그를 직사각형으로 보았을 때 아래쪽 변은 offsetWidth, 높이는 offsetheight, 위쪽 변과 상단 브라우저의 높이 차이는 offsetTop, 왼쪽 변과 좌측 브라우저의 간격 길이는 offsetLeft이다.
underline을 그리는 시작점은 (offsetLeft, offsetTop+offsetheight)이다.
따라서 left시작값인 x좌표는 offsetleft, width는 해당 메뉴(직사각형)의 너비만큼만 그려주면 되므로 offsetWidth, y좌표는 offsetTop+offsetheight로 지정해주었다.
<style>
nav, section{
display : flex;
justify-content: center;
}
nav a{
text-decoration: none;
color : black;
margin : 2em;
}
#underline{
position : absolute;
width:0;
background-color: black;
top:340px;
left:0;
height:4px;
transition:0.5s;
}
</style>
nav와 section부분의 위치를 가운데로 flex속성을 이용해 지정해주었다.
nav 중 a태그에 밑줄을 없애고 color과 margin을 지정해주었다.
그리고 div태그의 id인 underline에 위치, 색상 등을 지정해주며 transition을 이용해 underline이 더욱 부드럽게 이동하는 것처럼 보이도록 해주었다.
[ 세부 페이지 ]
각 페이지는 동일한 형태를 가지므로 NETFLIX페이지만 설명하도록 하겠다.
<div id="board"><h3>리뷰 작성</h3>
<form action="create.php" method="POST">
<p>제목 : <select name="title" required>
<option value="none" selected disabled>==선택==</option>
<option value="1">제목1</option>
<option value="2">제목2</option>
<option value="3">제목3</option>
</select></p>
<p>OTT : <select name="ott" required>
<option value="none" selected disabled>==선택==</option>
<option value="netflix">Netflix</option>
<option value="watcha">Watcha</option>
<option value="tving">Tving</option>
<option value="disney+">Disney+</option>
</select>
카테고리 : <select name="category" required>
<option value="none" selected disabled>==선택==</option>
<option value="movie">영화</option>
<option value="drama">드라마</option>
<option value="entertain">예능</option>
</select></p>
<p>별점 : (구현예정)</p>
<p>내용 : <textarea name="review" rows="10" cols="50" placeholder="내용을 입력해주세요"></textarea></p>
<p style="padding-left:440px;"><input type="submit" value="작성" style=""></p></div>
이번주에는 리뷰 작성 페이지에 OTT와 카테고리를 선택하는 부분을 추가했다. 둘 다 제목 선택하는 것과 마찬가지로 select로 내용을 입력받도록 했다. 무조건 입력해야 하는 내용이므로 required 속성을 적용했고 초기의 상태인 ==선택== 은 disabled를 이용해 선택이 불가능하도록 설정했다. 나머지 다른 선택지들은 각각의 내용에 따라 적당한 value 값을 설정하여 구분하도록 하였다.
'Web Hacking > WEB Hacking 기초' 카테고리의 다른 글
[SISS] bwAPP 2주차 < HTML injection - Reflected(POST) > (0) | 2022.02.08 |
---|---|
[SISS] bwAPP 1주차 < HTML injection - Reflected(GET) > (0) | 2022.01.30 |
[SISS] XSS Game 05, 06 (0) | 2022.01.22 |
[SISS] XSS Game 03, 04 (0) | 2022.01.10 |
[SISS] 생활코딩 DATABASE-MySQL 정리 (0) | 2022.01.08 |