20220805_Fri
- 버튼 디자인 css
블록태그/인라인태그
- 블록태그: 실제 내용의 크기와는 상관없이 한 줄의 영역을 차지 ex)div태그
- 인라인태그: 영역의 크기가 실제 내용과 일치 ex) span 태그 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.div1{
background-color: #2A0944;
width: 200px;
}
.div2{
background-color: #FEC260;
width: 100px;
}
.span1{
background-color: #3FA796;
width: 100000px;
}
.span2{
background-color: #A10035;
}
</style>
</head>
<body>
<!-- 블록태그 인라인태그 -->
<!-- 블록태그: 실제 내용의 크기와는 상관없이 한 줄의 영역을 차지 ex)div태그
인라인태그: 영역의 크기가 실제 내용과 일치 ex) span 태그 -->
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>div1
div2
span1
span2
- div태그(블록태그)는 너비는 조정가능하지만 한줄을 다차지하는 것은 계속 유지가 된다.
(눈에보인는 것과 성질이 다르다. 너비를 조정하고 공간이 생겨도 한 줄 다 차지한다. 그래서 밑에있는 span태그들은 윗줄로 올라오지않는다.)- span태그(인라인태그)는 너비 자체가 절대 조정이 되지 않는다.
- display 속성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
display:inline;/* 블록태그 div태그를 인라인태그로 사용하기 */
display:inline-block;/* 인라인태그에 블록태그성질처럼 너비를 조정하고 옆에 태그가 올수있다. */
}
.div1{
background-color: aqua;
width: 300px;
}
.div2{
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
- position
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
display: inline-block;/* 너비조정가능하면서 옆에 태그 나란히 올수있음 */
width:50px;
height: 50px;
background-color: #FF1E00;
color: #E8F9FD;
text-align: center;
position: static;/* 위치조정 정적으로 */
}
.down:hover{/* 마우스올리면 디자인 적용 */
background-color: #A66CFF;
/* 위치조정 상대적으로 원래놓여진 위치에서 왼쪽으로 20px떨어지게 하겠다. */
position:relative;
left:30px;
top: 20px;/* 아래로 20px */
}
span{
/* 나를 기준으로 바닥에서 10px떨어지고 오른쪽에서 10px떨어져서 위치조정 */
position: absolute;/* 위치 강제 고정 */
bottom: 10px;
right: 10px;
}
.fixed{/* 스크롤로 올리고 내려도 항상 고정된 위치 */
position: fixed;
left: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div>H</div>
<div class="down">e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<span >span</span>
<span class="fixed">고정</span>
</body>
</html>
-
button
-
참고) 개발자_디자인사이트 >>> 부트스트랩
경로: Docks > components > Modal(팝업창 애니메이션) / Buttons
- css파일 만들기
css파일을 사용하면 같은 jsp화면내 똑같은 디자인 전체 적용시킬 수 있다.
1.css file
@charset "UTF-8";
.btn{
display: inline-block;
width: 100px;
background-color: #D9F8C4;
color: #66BFBF;
text-align: center;
padding: 6px 0px;/* 상하 좌우 띄우기 */
border-radius: 3px;
/* box-shadow: 3px 3px 7px #333333;/*그림자의 크기 */
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.btn:hover {/* 마우스를 올리면 */
cursor: pointer;
}
.btn:active{/* 요소를 선택하면 */
position: relative;/* 위치조정: 클릭이 되었을때 */
left: 3px;/* 우리 눈에는 오른쪽으로 */
top:3px;/* 우리 눈에는 밑으로 */
background-color: #C4DFAA;
}
/* 똑같은 디자인으로 작은버튼 만들때: 클래스(btn-small)하나 더 만들기 */
.btn-small{
width: 80px;
padding: 4px 0px;
font-size: 10px;
}
2. 버튼 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 문자로된 css파일을 가져온다. btn_css이름의 css파일을 가지고온다. -->
<link type="text/css" rel="stylesheet" href="btn_css.css">
</head>
<body>
<div class="btn">button</div>
<!-- 클래스를 하나만 사용하는 것이 아니라 띄어쓰기로 여러개 사용가능 -->
<div class="btn btn-small">버튼이</div>
</body>
</html>
<br>
- 마우스 올리기 전
-마우스 올린 후
디비연결된 회원 게시판 홈페이지 만들기
실습 내용)
게시글 목록 페이지 상단의 login 글자 클릭하면 로그인 페이지로 이동
아이디,비번 입력 후 로그인이라는 버튼을 클릭하고 만약 로그인이 성공하면
'로그인했습니다.'라는 alret을 띄운 후 게시글 목록 페이지로 이동
로그인 실패하면 '다시시도해주세요; 라는 alret띄우고 다시 로그인 할 수 있는 로그인 페이지로 이동
실습 조건)
게시글 목록페이지 하단에 글쓰기 버튼을 만드세요
단,글쓰기 버튼은 로그인한 사람에게만 보여야해요
로그인한 상태에서 글쓰기버튼을 클릭하면 게시글 등록페이지로 이동해야해요
이 때 게시글 등록페이지는 top.jsp와 같이 보여야한다.
- 멤버컨트롤러 생성
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import dto.BoardDTO;
import dto.MemberDTO;
import service.BoardServiceImpl;
import service.MemberService;
import service.MemberServiceImpl;
@WebServlet("*.me")
public class MemberController extends HttpServlet {
private static final long serialVersionUID = 1L;
MemberServiceImpl memberService = new MemberServiceImpl();
public MemberController() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//한글 인코딩 처리
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String requestURI = request.getRequestURI();
String contextPath = request.getContextPath();
String command = requestURI.substring(contextPath.length());
System.out.println("command = " + command);
String page = "";
boolean isRediect = false;
if(command.equals("/joinForm.me")) {
page="join_form.jsp";
}
else if(command.equals("/join.me")) {
String memId = request.getParameter("memId");
String memPw = request.getParameter("memPw");
String memName = request.getParameter("memName");
//문자열데이터 연락처는 values 받기 + String[] 자료형사용하기!!!
String[] memTells = request.getParameterValues("memTell");
//실제 010-0000-0000으로 화면에 나타나야하기때문에 변경하기
String memTell = memTells[0] + "-" + memTells[1] + "-" + memTells[2];
String memAddr = request.getParameter("memAddr");
String memEmail = request.getParameter("memEmail");
MemberDTO memberDTO = new MemberDTO();
memberDTO.setMemAddr(memAddr);
memberDTO.setMemEmail(memEmail);
memberDTO.setMemId(memId);
memberDTO.setMemName(memName);
memberDTO.setMemPw(memPw);
memberDTO.setMemTell(memTell);
memberService.insertMember(memberDTO);//멤버인터페이스 메소드(매개변수) 그대로 사용하려하는데 변수명 객체를 먼저 생성해준다.
page="join_result.jsp";
}
//로그인 양식
else if(command.equals("/loginForm.me")) {
page="login_form.jsp";
}
//로그인
else if(command.equals("/login.me")) {
//1번-1
String memId = request.getParameter("memId");
String memPw = request.getParameter("memPw");
//3번
MemberDTO memberDTO = new MemberDTO();
memberDTO.setMemId(memId);
memberDTO.setMemPw(memPw);
//2번(자료형모르면 커서올리면 맨 첫번째 자료형이 뜬다)
MemberDTO loginInfo = memberService.login(memberDTO);//쿼리실행결과가 loginInfo
//로그인 성공했으면 세션에 loginInfo(id,name)를 저장
if(loginInfo != null) {
//세션에 한번만 넣어두면 다시또 request처럼 불러오지않아도 된다.
HttpSession session = request.getSession();//세션에 데이터넣기
session.setAttribute("loginInfo", loginInfo);
}
//1번-2
page="login_result.jsp";
// <참고>
// loginInfo의 값이 로그인이 되면 값이 있지만(조회성공) 안되면 값이 없어서 null값이다!!
// if(loginInfo == null) {
// System.out.println("로그인 실패");
// } else { System.out.println("로그인 성공");
// }
}
//로그아웃
else if(command.equals("/logout.me")) {
HttpSession session = request.getSession();
//loginInfo라는 이름으로 세션에 저장된 데이터 삭제하기
session.removeAttribute("loginInfo");
// 참고)세션에 저장된 모든 데이터 삭제!!!
// session.invalidate();
page="boardList.bo";
}
//페이지이동에 사용되는 if문
if(isRediect) {
response.sendRedirect(page);
}
else {
RequestDispatcher dispatcher = request.getRequestDispatcher(page);
dispatcher.forward(request, response);
}
}
}- 멤버DTO
package dto;
public class MemberDTO {
private String memId;
private String memPw;
private String memName;
private String memTell;
private String memAddr;
private String memEmail;
private String joinDate;
private String isAdmin;
public MemberDTO() {}
public MemberDTO(String memId, String memPw, String memName, String memTell, String memAddr, String memEmail,
String joinDate, String isAdmin) {
super();
this.memId = memId;
this.memPw = memPw;
this.memName = memName;
this.memTell = memTell;
this.memAddr = memAddr;
this.memEmail = memEmail;
this.joinDate = joinDate;
this.isAdmin = isAdmin;
}
public String getMemId() {
return memId;
}
public void setMemId(String memId) {
this.memId = memId;
}
public String getMemPw() {
return memPw;
}
public void setMemPw(String memPw) {
this.memPw = memPw;
}
public String getMemName() {
return memName;
}
public void setMemName(String memName) {
this.memName = memName;
}
public String getMemTell() {
return memTell;
}
public void setMemTell(String memTell) {
this.memTell = memTell;
}
public String getMemAddr() {
return memAddr;
}
public void setMemAddr(String memAddr) {
this.memAddr = memAddr;
}
public String getMemEmail() {
return memEmail;
}
public void setMemEmail(String memEmail) {
this.memEmail = memEmail;
}
public String getJoinDate() {
return joinDate;
}
public void setJoinDate(String joinDate) {
this.joinDate = joinDate;
}
public String getIsAdmin() {
return isAdmin;
}
public void setIsAdmin(String isAdmin) {
this.isAdmin = isAdmin;
}
}- member-mapper
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 해당 파일에 모든 쿼리문을 작성한다. -->
<mapper namespace="memberMapper">
<resultMap type="dto.MemberDTO" id="board">
<id column="MEM_ID" property="memId"/>
<result column="MEM_PW" property="memPw"/>
<result column="MEM_NAME" property="memName"/>
<result column="MEM_TELL" property="memTell"/>
<result column="MEM_ADDR" property="memAddr"/>
<result column="MEM_EMAIL" property="memEmail"/>
<result column="JOIN_DATE" property="joinDate"/>
<result column="IS_ADMIN" property="isAdmin"/>
</resultMap>
<!-- 회원가입 -->
<insert id="insertMember">
INSERT INTO BOARD_MEMBER (
MEM_ID
, MEM_PW
, MEM_NAME
, MEM_TELL
, MEM_ADDR
, MEM_EMAIL
) VALUES (
#{memId}
, #{memPw}
, #{memName}
, #{memTell}
, #{memAddr}
, #{memEmail}
)
</insert>
<!-- 로그인 -->
<select id="login" resultMap="board">
SELECT MEM_ID
, MEM_NAME
FROM BOARD_MEMBER
WHERE MEM_ID = #{memId}
and MEM_PW = #{memPw}
</select>
</mapper>```
---
- memberService
```package service;
//인터페이스
//(mapper에서 만든 쿼리문)메소드 기능 정의하는 곳이다!!!
import java.util.List;
import dto.BoardDTO;
import dto.MemberDTO;
public interface MemberService {
//회원가입
//조회가 아닌 삽입이니까 int 자료형
//많은 데이터를 넣어야하기때문에 dto 매개변수 사용!!
int insertMember(MemberDTO memberDTO);//>>>메소드만들고 멤버서비스impl로가서 오버라이딩하기
//로그인
//->조회하면 데이터 있으면 1개 없으면 0개이다.
MemberDTO login(MemberDTO memberDTO);
}```
---
- indext 파일
``` <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<jsp:forward page="boardList.bo"></jsp:forward>
</body>
</html>- 템플릿jsp
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">/* 템플릿 css는 모든페이지 적용된다.!!1 */
@font-face {
font-family: 'MICEGothic Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/MICEGothic Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
.container{
/* background-color: #F5E8C7;*/
width: 80%;
margin: 0 auto;/* 가운데정렬 */
margin-top: 90px;
font-family: 'MICEGothic Bold';
font-size: 21px;
}
</style>
</head>
<body>
<div class="container">
<div>
<jsp:include page="top.jsp"></jsp:include>
</div>
<div>
<jsp:include page="${contentPage }"></jsp:include><!--계속 바뀌는 페이지는 변수명(contentPage)으로 둔다!! -->
</div>
</div>
</body>
</html>- top.jsp (로그인,회원가입)
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.menuDiv{
text-align: right;
}
.titleDiv{
text-align: center;
}
</style>
</head>
<body>
<div class="menuDiv">
<!-- 세션은 웹브라우저를 닫지않으면 로그인상태가 유지되는데 로그인상태유무를 구별하기위해 for문 사용한다 -->
<!--세션에 로그인정보가 비어있다면(로그인 안되었을때) -->
<c:choose>
<c:when test="${empty sessionScope.loginInfo}">
<a href="loginForm.me">Login</a>
<a href="joinForm.me">Join</a>
</c:when>
<c:otherwise>
${sessionScope.loginInfo.memName }님 반갑습니다.
<a href="logout.me">Logout</a>
</c:otherwise>
</c:choose>
</div>
<div class="titleDiv">
<h2>게 시 판</h2>
</div>
</body>
</html>- login_form.jsp
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
width: 500px;
border: 1px solid white ;
margin: 0 auto;
text-align: center;
border-collapse: collapse;
}
.btn{
margin-top: 7px;
}
</style>
</head>
<body>
<form action="login.me" method="post">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="memId" required="required"> </td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" name="memPw" required="required"> </td>
</tr>
</table>
<div class="btn" align="center">
<input type="submit" value="로그인">
</div>
</form>
</body>
</html>
- login_result.jsp
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 세션에 넣어둔 로그인정보(loginInfo:id,name)를 불러오기 -->
<!-- 세션이지만 자료형이 memberDTO이기 때문에 dto에 담긴 id,name을 각각 적어서 적어주기만하면된다.
세션이기때문에 request처럼 받아올필요없이 바로 적는다. -->
<c:choose>
<c:when test="${not empty sessionScope.loginInfo}">
<!-- 로그인 성공했으면
// null 이 아니라면(비어있지않다면) -->
<script type="text/javascript">
alert('로그인성공');
location.href = 'boardList.bo';/* 게시판으로 */
</script>
</c:when>
<c:otherwise>
<script type="text/javascript">
alert('다시시도하세요');
location.href = 'loginForm.me';/* 로그인페이지로 */
</script>
</c:otherwise>
</c:choose>
</head>
<body>
</body>
</html>
- join_form.jsp
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@font-face {
font-family: 'MICEGothic Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/MICEGothic Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
table{
background-color: #F6F6F6;
width: 500px;
margin: 0 auto;
text-align: center;
border-collapse: collapse;
font-family: 'MICEGothic Bold';
}
tbody> tr >td:nth-child(2) {
text-align: left;
}
tr,tr{
padding: 5px;
}
/* input{
border-radius: 10px;
text-align: center;
} */
.btn{
align: center;
display: inline-block;
width: 100px;
background-color: #E7F6F2;
color: #2C3333;
text-align: center;
padding: 6px 0px;/* 상하 좌우 띄우기 */
border-radius: 3px;
/* box-shadow: 3px 3px 7px #333333;/*그림자의 크기 */
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.btn:hover {/* 마우스를 올리면 */
cursor: pointer;
}
.btn:active{/* 요소를 선택하면 */
position: relative;/* 위치조정: 클릭이 되었을때 */
left: 3px;/* 우리 눈에는 오른쪽으로 */
top:3px;/* 우리 눈에는 밑으로 */
background-color: #C4DFAA;
}
/* 적용을 안하고 싶은 부분 디자인 적용하기 */
input:not([type="submit"]){/* submit 타입 제외한 input태그 디자인 적용하기 */
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<form action="join.me" method="post">
<table>
<colgroup>
<col width= "30%">
<col width= "*%">
</colgroup>
<tr>
<td>아이디</td>
<!-- name 값은 디비 컬렴명 변수명과 동일해야한다. (memDTO 변수선언 그대로사용하기!!!) -->
<td><input type="text" name="memId" required></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" name="memPw" required></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text"name="memName" required></td>
</tr>
<tr>
<td>연락처</td>
<td>
<select size="1" style="border-radius: 3px;" name="memTell">
<option value="010">010</option>
<option value="011">011</option>
<option value="012">012</option>
</select>
<input size="3" type="text" name="memTell">
<input size="3" type="text" name="memTell">
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="memAddr"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text" name="memEmail"></td>
</tr>
</table>
<div align="center" >
<input style="margin-top: 5px;" type="submit" class="btn" value="join">
</div>
</form>
</body>
</html>
- join_result.jsp
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var result = confirm('회원가입 되었습니다.\n로그인 하시겠습니까?');
/* '\n' : 한줄개행 */
/* alret 창과 다르게 확인,취소 두 개가 뜬다. */
//회원가입실행되면
if(result){
location.href = 'loginForm.me';
}
else{
location.href = 'boardList.bo';
}
</script>
</head>
<body>
</body>
</html>
Dev.Vinch