9:15경 학원 도착. 어제 못보고 잔거 후다닥 고쳐서 올림.
<9:30 1교시>
위의 화면에선 문자열이 결과러서 전달되었지만, 작업의 결과 데이터를 resolve() 함수를 호출하면서 전달할 수도 있다.
전달하면 이게 then 함수의 매개변수 result 자리로 전달된다.
이전 promise가 fulfilled 되면 다음 promise가 실행된다.
finally절은 promise의 성공/실패에 관계 없이 실행되어야 하는 코드를 작성해줄 수 있다.
async라는 함수와 await라는 예약어에 대해 then을 사용하지 않고 연속되는 promise 함수를 만들 수도 있다.
async가 붙은 함수는 호출해도 바로 리턴하지 않고 비동기로 동작한다.
await가 붙은 녀석은 promise가 해결될 때까지 기다린다.
promise가 해결되면 await가 있던 위치는 결과 데이터 result 로 바뀐다.
TOAST UI :: Make Your Web Delicious!
TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.
ui.toast.com
스마트에디터 말고 다른 에디터 시도해보려고 들어온 사이트인데, 여러가지 UI를 제공하고 있음.
우리가 쓰려는 UI는 MIT 라이센스를 가지고 있음.
나중에 리액트 배울 때 라이브러리 가져오는 경우가 많은데 그럴 때 npm 어쩌구가 많이 보일 거임. 우리는 아직 웹팩 안배워서 외부 cdn 링크 걸어서 만들거임.
마크다운 쓰는거 잊지말기, 마크다운 기호 다음 스페이스 누르고 내용 써야 함... 멍충스...
<10:30 2교시>
toast ui 에디터 활용한 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<style>
.container{
width: 80%;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Toast UI Editor 사용하기</h1>
<div id="editor"></div>
</div>
<form action="save.jsp" method="post" id="saveForm">
<input type="hidden" name="content" id="content"/>
<button type="submit">저장</button>
</form>
<script>
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),//어디에 Editor를 만들 것인지
height: '500px',//Editor의 높이
initialEditType: 'WYSIWYG',//Editor의 타입 설정 markdown | wysiwyg
previewStyle: 'vertical'//미리 보기 설정 vertical | tab
});
//에디터에 입력한 내용 읽어오는 방법
//1. markdown -> editor.getMarkdown();
//2. html -> editor.getHTML();
document.querySelector("#saveForm").addEventListener("submit", (event)=>{
//에디터에 입력한 내용을 input type="hidden"의 value 값으로 넣어준다.
document.querySelector("#content").value=editor.getHTML();
//폼에 이 외의 다른 내용을 입력했다면 검증을 여기서 하고
//폼 전송을 막고 싶으면
//event.preventDefault();가 실행되게 하면 된다
});
</script>
</body>
</html>
save.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String content = request.getParameter("content");
System.out.println(content);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container{
width:80%;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>게시글</h1>
<div id="content">
<%= content %>
</div>
</div>
</body>
</html>
위 형식으로 작성할 때 content에 이미지가 많다면 데이터베이스에 무리가 갈 수 있다.
스마트에디터는 upload 폴더를 활용한 형태였어서 데이터베이스에 무리가 없었다.
<11:30 3교시>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>/toastui/editor.jsp</title>
<!-- toast editor 를 사용하기 위한 css, javascript 로딩 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<style>
.container{
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Toast UI Editor 사용하기</h1>
<div id="editor"></div>
<form action="save.jsp" method="post" id="saveForm">
<input type="hidden" name="content" id="content"/>
<button type="submit">저장</button>
</form>
</div>
<script>
// Editor 클래스 얻어내기
const Editor = toastui.Editor;
// Editor 객체 생성하면서 option 전달하기
const editor = new Editor({
el: document.querySelector('#editor'), //어디에 Editor 를 만들것인지
height: '500px', // 높이
initialEditType: 'wysiwyg', //Editor type 설정 markdown | wysiwyg
previewStyle: 'vertical' //미리 보기 설정 vertical | tab
});
/*
에디터에 입력한 내용 읽어오는 방법
1. markdown
editor.getMarkdown();
2. html
editor.getHTML();
*/
document.querySelector("#saveForm").addEventListener("submit", (event)=>{
//에디터에 입력한 내용을 input type="hidden" 의 value 값으로 넣어준다.
document.querySelector("#content").value = editor.getHTML();
//폼에 이거말고 다른 내용도 입력했다면 검증을 여기서 하고
//폼 전송을 막고 싶으면
// event.preventDefault(); 가 실행되게 하면 된다.
});
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//Editor 로 입력한 html 형식의 문자열을 DB 에 저장했다가 필요시 불러와서 그대로 html 형식으로 출력하면 된다.
String content=request.getParameter("content");
System.out.println(content);
//javascript 문자열의 구조를 망가트리지 않게 하기 위해
String content2 = content.replace("\"", "\\\""); // " 를 \" 로 변경하기
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/toastui/save.jsp</title>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<style>
.container{
width:80%;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>게시글</h1>
<div><%=content %></div>
<h1>글 수정 폼</h1>
<div id="editor"></div>
<form action="save.jsp" method="post" id="updateForm">
<input type="hidden" name="content" id="content"/>
<button type="submit">수정확인</button>
</form>
</div>
<script>
// Editor 클래스 얻어내기
const Editor = toastui.Editor;
// Editor 객체 생성하면서 option 전달하기
const editor = new Editor({
el: document.querySelector('#editor'), //어디에 Editor 를 만들것인지
height: '500px', // 높이
initialEditType: 'wysiwyg', //Editor type 설정 markdown | wysiwyg
previewStyle: 'vertical' //미리 보기 설정 vertical | tab
});
editor.setHTML("<%=content2 %>");
document.querySelector("#updateForm").addEventListener("submit", (event)=>{
//에디터에 입력한 내용을 input type="hidden" 의 value 값으로 넣어준다.
document.querySelector("#content").value = editor.getHTML();
//폼에 이거말고 다른 내용도 입력했다면 검증을 여기서 하고
alert(editor.getHTML())
//폼 전송을 막고 싶으면
// event.preventDefault(); 가 실행되게 하면 된다.
});
</script>
</body>
</html>
12:00 무렵 오전 진도 종료. 프로젝트 준비
아코디언 코드 폐기하고 개인정보 확인 페이지랑 수정 페이지 따로 나누기로 함~
아쉽다 ㅠㅠ
<%@page import="test.dao.Com1CeoDao"%>
<%@page import="test.dto.Com1CeoDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
int comid = (int)session.getAttribute("comid");
String comname = (String)session.getAttribute("comname");
int empno = (int)session.getAttribute("empno");
String role = (String)session.getAttribute("role");
String ename = (String)session.getAttribute("ename");
Integer empnoObj = (Integer) session.getAttribute("empno");
if (empnoObj != null) {
int empno1 = empnoObj.intValue();
Com1CeoDto dto = Com1CeoDao.getInstance().getData(empno1);
request.setAttribute("dto", dto);
} else {
// empno가 세션에 없을 경우의 처리
// 예: 에러 페이지로 리다이렉트하거나 기본값 사용
response.sendRedirect("errorPage.jsp");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/ceo/myinfo_ceo.jsp</title>
<jsp:include page="/include/resource.jsp"></jsp:include>
<style>
table {
width: 100%; /* 화면 너비에 맞게 설정 */
border-spacing: 0;
border-collapse: collapse; /* 테이블의 경계를 합칩니다 */
margin-bottom: 50px;
}
th, td {
padding: 20px; /* 셀 안의 여백을 일정하게 */
text-align: left; /* 텍스트를 왼쪽 정렬 */
border-bottom: 1px solid #ddd; /* 셀에 테두리 추가 */
}
th {
background-color: #f4f4f4; /* 헤더 셀 배경색 */
text-align: right; /* 텍스트를 오른쪽 정렬 */
width: 25%; /* 각 열의 넓이를 고정 비율로 설정 */
}
td {
width: 75%; /* 데이터 셀의 넓이를 고정 비율로 설정 */
}
/* 페이지에 맞게 조정된 폰트 크기 */
h1 {
margin-bottom: 30px;
}
/* 링크 스타일 수정 */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp"></jsp:include>
<div class="container">
<h1>개인정보</h1>
<table>
<tr>
<th>회사</th>
<td><%=comname %>(회사 코드 : <%=comid %>)</td>
</tr>
<tr>
<th>관리자 사원번호</th>
<td><%=empno %></td>
</tr>
<tr>
<th>관리자 이름</th>
<td><%=ename %></td>
</tr>
<tr>
<th>직급</th>
<td><%=role %></td>
</tr>
<tr>
<th>연락처</th>
<td>
<div id="app">
<!-- 현재 연락처 표시 -->
<div class="mb-3">
<p id="currentCall">현재 연락처: ${dto.eCall}</p>
<!-- 실제 현재 연락처로 표시 -->
</div>
<div class="accordion" id="accordionPanelStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseOne">연락처 수정하기</button>
</h2>
<div id="panelsStayOpen-collapseOne"
class="accordion-collapse collapse ">
<div class="accordion-body">
<form action="myinfo_ceo.jsp" id="updateCall">
<div class="mb-3">
<label for="newCall" class="form-label">새 연락처</label> <input
v-model="newCall" type="text" class="form-control"
id="newCall" name="newCall" placeholder="새 연락처를 입력하세요"
required @input="onCallInput">
<div v-if="isCallDirty && !isCallValid" class="text-danger" id="callError">
유효한 전화번호 형식이 아닙니다.</div>
</div>
<button type="submit" class="btn btn-primary">연락처 수정</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<div class="accordion" id="accordionPanelStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">비밀번호 수정하기</button>
</h2>
<div id="panelsStayOpen-collapseTwo"
class="accordion-collapse collapse">
<div class="accordion-body">
<form id="updatePassword" method="post">
<div class="mb-2">
<label class="form-label" for="password">기존 비밀번호</label> <input
class="form-control" type="password" name="password"
id="password" required @input="onPwdInput"
:class="{'is-invalid': !isPwdValid && isPwdDirty, 'is-valid':isPwdValid}" />
<div class="invalid-feedback">반드시 입력하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="newPassword">새 비밀번호</label> <input
class="form-control" type="password" name="newPassword"
id="newPassword" required v-model="newPassword"
:class="{'is-invalid': !isNewPwdValid && isNewPwdDirty, 'is-valid':isNewPwdValid}" />
<small class="form-text">반드시 입력하고 아래의 확인란과 동일해야 합니다</small>
<div class="invalid-feedback">새 비밀번호를 확인하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="newPassword2">새 비밀번호
확인</label> <input class="form-control" type="password"
id="newPassword2" v-model="newPassword2"
@input="onNewPwdInput" />
</div>
<button type="submit" class="btn btn-primary"
:disabled="!isPwdValid || !isNewPwdValid">비밀번호 수정</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.querySelector("#updateCall").addEventListener("submit", (event) => {
event.preventDefault();
const newCall = document.querySelector("#newCall").value;
const formData = new FormData();
formData.append("newCall", newCall);
fetch("call-update.jsp", {
method: "POST",
body: formData
})
.then(response => response.text())
.then(data => {
console.log("Response from call-update.jsp: ", data);
// You can handle the response here (e.g., display a success message)
})
.catch(error => {
console.error("Error:", error);
});
});
/*
$(document).ready(function(){
$("#updateCall").on('submit', function(){
event.preventDefault(); // 폼 제출 기본 동작을 막음
var newCall = $('#newCall').val(); // 새 전화번호 값 가져오기
var regCall = /^01[016789]-\d{3,4}-\d{4}$/; // 전화번호 형식 정규식
// 전화번호 유효성 검사
if (!regCall.test(newCall)) {
$('#callError').show(); // 유효하지 않으면 오류 메시지 표시
return;
} else {
$('#callError').hide(); // 유효하면 오류 메시지 숨김
}
// AJAX 요청
$.ajax({
url: 'protected/call-update.jsp', // 전화번호 수정 처리 JSP URL
type: 'POST',
data: { newCall: newCall }, // 새로운 전화번호 전송
dataType: 'json', // JSON 형식으로 응답받기
success: function(response) {
if (response.isSuccess) {
$('#currentCall').text('현재 연락처: ' + newCall); // 수정된 전화번호를 화면에 반영
alert("전화번호가 변경되었습니다"); // 성공 메시지
} else {
alert("전화번호가 형식에 맞지 않습니다"); // 실패 메시지
}
},
error: function() {
alert("오류가 발생했습니다. 다시 시도해 주세요.");
}
});
});
});
$(document).ready(function() {
$("#updatePassword").on('submit', function(event) {
event.preventDefault(); // 기본 폼 제출 방지
var password = $('#password').val(); // 기존 비밀번호 값
var newPassword = $('#newPassword').val(); // 새 비밀번호 값
// 비밀번호 유효성 검사
if (!isPwdValid || !isNewPwdValid) {
alert('입력한 정보를 확인해주세요.');
return;
}
// AJAX 요청
$.ajax({
url: 'protected/pwd-update.jsp', // 비밀번호 수정 처리 JSP URL
type: 'POST',
data: { password: password, newPassword: newPassword },
dataType: 'json',
success: function(response) {
if (response.isSuccess) {
alert('비밀번호가 성공적으로 변경되었습니다.');
} else {
alert(response.message); // 실패 메시지
}
},
error: function() {
alert("오류가 발생했습니다. 다시 시도해 주세요.");
}
});
});
});*/
new Vue({
el:"#app",
data:{
isCallValid:false,
isCallDirty:false,
isPwdValid:false,
isNewPwdValid:false,
newCall:"",
newPassword:"",
newPassword2:"",
isPwdDirty:false, //비밀번호 입력란에 한번이라도 입력했는지 여부
isNewPwdDirty:false //새비밀번호 입력한에 한번이라도 입력했는지 여부
},
methods:{
onCallInput(e){
//현재까지 입력한 연락처
const call = e.target.value;
//전화번호 유효성 검사
const reg_call = /^01([0|1|6|7|8|9])-?(\d{3,4})-?(\d{4})$/;
if(reg_call.test(call)){
this.isCallValid = true;
} else {
this.isCallValid = false;
}
this.isCallDirty = true;
},
onPwdInput(e) {
const password = e.target.value;
// 기존 비밀번호 유효성 검사
const reg_pwd = /[\S]+/; // 비밀번호가 공백이 아니어야 함
if (reg_pwd.test(password)) {
this.isPwdValid = true;
} else {
this.isPwdValid = false;
}
this.isPwdDirty = true;
},
onNewPwdInput() {
const reg_pwd = /[\S]+/; // 새 비밀번호 유효성 검사
// 새 비밀번호가 비어있지 않고, 두 비밀번호가 일치하면 유효
if (reg_pwd.test(this.newPassword) && (this.newPassword === this.newPassword2)) {
this.isNewPwdValid = true;
} else {
this.isNewPwdValid = false;
}
this.isNewPwdDirty = true;
}
},
mounted() {
// 페이지 로드 후, 현재 연락처를 화면에 반영
this.currentCall = "\${dto.eCall}"; // 서버에서 가져온 값으로 초기화
}
});
</script>
<jsp:include page="/include/footer.jsp" />
</body>
</html>
간신히 개삽질해서 코드 완성 시켜놨더니 ㅠㅠㅠ 다시하란다 ㅠㅠㅠㅠㅠ 흐어어어엉 ㅠㅠㅠㅠㅠ
아까워서 냅둠 ㅠㅠㅠ -> 변경해서 하는걸로 함. 미스커뮤니케이션.
지가 잘못 말한거는 생각 1도 안하고 내가 잘못 이해한것처럼만!!!
결국 살리긴 함.
<%@page import="test.dao.Com1CeoDao"%>
<%@page import="test.dto.Com1CeoDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int empno = (int) session.getAttribute("empno");
Com1CeoDao dao = Com1CeoDao.getInstance();
Com1CeoDto dto = dao.getData(empno);
// 로그인한 사용자의 정보를 DB에서 가져오기 (예시)
Com1CeoDto ceoInfo = Com1CeoDao.getInstance().getData(empno); // 사원번호를 이용하여 CEO 정보를 조회
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/ceo/protected/updateform_ceo</title>
<jsp:include page="/include/resource.jsp"></jsp:include>
<style>
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp"></jsp:include>
<div class="container" id="app">
<h3>회원 정보 수정 양식</h3>
<form action="call-update.jsp" method="get" id="callupdateForm">
<div>
<div class="mb-2">
<label class="form-label" for="ename">관리자 이름</label>
<input class="form-control" type="text" id="ename" value="<%=dto.geteName() %>" readonly />
</div>
<div class="mb-2">
<label class="form-label" for="callnum">연락처</label>
<input class="form-control" placeholder="<%=dto.geteCall() %>" @input="onCallInput" :class="{'is-invalid': !isCallValid && isCallDirty, 'is-valid':isCallValid}"
type="text" name="callnum" id="callnum" />
<div class="invalid-feedback">전화번호 형식에 맞지 않습니다.</div>
</div>
</div>
<button class="btn btn-success" type="submit" :disabled="!isCallValid">수정하기</button>
<button class="btn btn-danger" type="reset">리셋</button>
</form>
<form action="pwd-update.jsp" method="post" id="pwdupdateForm">
<div class="mb-2">
<label class="form-label" for="password">기존 비밀번호</label>
<input class="form-control" @input="onPwdInput" :class="{'is-invalid': !isPwdValid && isPwdDirty, 'is-valid':isPwdValid}"
type="password" name="password" id="password" />
<div class="invalid-feedback">반드시 입력하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="newPassword">새 비밀번호</label>
<input class="form-control" type="password" name="newPassword" id="newPassword" @input="onNewPwdInput" v-model="newPassword"
:class="{'is-invalid': !isNewPwdValid && isNewPwdDirty, 'is-valid':isNewPwdValid}" />
<small class="form-text">반드시 입력하고 아래의 확인란과 동일해야 합니다</small>
<div class="invalid-feedback">새 비밀번호를 확인하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="newPassword2">새 비밀번호 확인</label>
<input class="form-control" type="password" id="newPassword2" @input="onNewPwdInput" v-model="newPassword2" />
</div>
<button class="btn btn-success" type="submit" :disabled="!isPwdValid || !isNewPwdValid">수정하기</button>
<button class="btn btn-danger" type="reset">리셋</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isPwdValid:false,
isNewPwdValid:false,
isCallValid:false,
callnum:"",
newPassword:"",
newPassword2:"",
isCallDirty:false,
isPwdDirty:false, //비밀번호 입력란에 한번이라도 입력했는지 여부
isNewPwdDirty:false //새비밀번호 입력한에 한번이라도 입력했는지 여부
},
methods:{
onCallInput(e){
//현재까지 입력한 비밀번호
const callnum=e.target.value;
//공백이 아닌 한글자가 한번이상 반복 되어야 통과 되는 정규표현식
const reg_callnum=/^01[016789]-\d{3,4}-\d{4}$/;
if(reg_callnum.test(callnum)){
this.isCallValid=true;
}else{
this.isCallValid=false;
}
this.isCallDirty=true;
},
onPwdInput(e){
//현재까지 입력한 비밀번호
const pwd=e.target.value;
//공백이 아닌 한글자가 한번이상 반복 되어야 통과 되는 정규표현식
const reg_pwd=/[\S]+/;
if(reg_pwd.test(pwd)){
this.isPwdValid=true;
}else{
this.isPwdValid=false;
}
this.isPwdDirty=true;
},
onNewPwdInput(){
//공백이 아닌 글자를 하나이상 입력했는지 확인할 정규 표현식
const reg_pwd=/[\S]+/;
//만일 정규표현식도 통과하고 그리고 두개의 비밀번호가 같다면
if(reg_pwd.test(this.newPassword) && (this.newPassword === this.newPassword2)){
//새 비밀번호 유효성 여부를 true 로 변경
this.isNewPwdValid = true;
}else{//그렇지 않다면
//새 비밀번호 유효성 여부를 false 로 변경
this.isNewPwdValid = false;
}
this.isNewPwdDirty=true;
}
}
});
</script>
<jsp:include page="/include/footer.jsp" />
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int comid = (int)session.getAttribute("comid");
String comname = (String)session.getAttribute("comname");
int empno = (int)session.getAttribute("empno");
String role = (String)session.getAttribute("role");
String ename = (String)session.getAttribute("ename");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<jsp:include page="/include/resource.jsp"></jsp:include>
<style>
.container {
text-align: center;
}
button {
width: 500px; /* 버튼의 고정된 너비 */
height: 80px; /* 버튼의 고정된 높이 */
font-size: 30px; /* 글자 크기 */
padding: 20px; /* 버튼 내부 여백 */
margin: 5px; /* 버튼 사이 간격 */
cursor: pointer; /* 마우스 커서 변경 */
border: none; /* 기본 버튼 테두리 없애기 */
background-color: grey; /* 버튼 배경 색 */
color: white; /* 버튼 텍스트 색 */
border-radius: 5px; /* 버튼 모서리 둥글게 */
transition: background-color 0.3s; /* 버튼 색 변경에 대한 애니메이션 */
}
button:hover {
background-color:black; /* 호버 시 색상 변화 */
}
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp"></jsp:include>
<div class="container">
<p>
<%=comname %>의 <%=ename %>님 접속 중
</p>
</div>
<div class="container">
<p>
<button>
<a href="myinfo_ceo.jsp" style="text-decoration: none; color: inherit;">나의 정보 보기</a>
</button>
</p>
</div>
<div class="container">
<p>
<button>
<a href="../ceo_eugene/accept-form.jsp" style="text-decoration: none; color: inherit;">점장 승인</a>
</button>
</p>
</div>
<div class="container">
<p>
<button>
<a href="employee/employeemanage.jsp" style="text-decoration: none; color: inherit;">직원 관리</a>
</button>
</p>
</div>
<div class="container">
<p>
<button>
<a href="../ceo_eugene/quit-form.jsp" style="text-decoration: none; color: inherit;">퇴사자 관리</a>
</button>
</p>
</div>
<div class="container">
<p>
<button>
<a href="sales/salesmanage.jsp" style="text-decoration: none; color: inherit;">매출 관리</a>
</button>
</p>
</div>
<jsp:include page="/include/footer.jsp" />
</body>
</html>
<%@page import="test.dto.UsingDto"%>
<%@page import="test.dao.UsingDao"%>
<%@page import="test.dao.Com1CeoDao"%>
<%@page import="test.dto.Com1CeoDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
int empno = (int) session.getAttribute("empno");
int comid = (int) session.getAttribute("comid");
UsingDao udao = UsingDao.getInstance();
String comname = udao.getComName(comid);
Com1CeoDao dao = Com1CeoDao.getInstance();
Com1CeoDto dto = dao.getData(empno);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/ceo/myinfo_ceo.jsp</title>
<jsp:include page="/include/resource.jsp"></jsp:include>
<style>
table {
width: 100%; /* 화면 너비에 맞게 설정 */
border-spacing: 0;
border-collapse: collapse; /* 테이블의 경계를 합칩니다 */
margin-bottom: 50px;
}
th, td {
padding: 20px; /* 셀 안의 여백을 일정하게 */
text-align: left; /* 텍스트를 왼쪽 정렬 */
border-bottom: 1px solid #ddd; /* 셀에 테두리 추가 */
}
th {
background-color: #f4f4f4; /* 헤더 셀 배경색 */
text-align: right; /* 텍스트를 오른쪽 정렬 */
width: 25%; /* 각 열의 넓이를 고정 비율로 설정 */
}
td {
width: 75%; /* 데이터 셀의 넓이를 고정 비율로 설정 */
}
/* 페이지에 맞게 조정된 폰트 크기 */
h1 {
margin-bottom: 30px;
}
/* 링크 스타일 수정 */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container2 {
max-width: 800px;
margin: 40px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
border: 1px solid black;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
font-weight: bold;
}
td a {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
td a:hover {
text-decoration: underline;
}
.btn-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.btn-container a {
margin: 0 10px;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
background-color: #007bff;
color: #fff;
transition: background-color 0.3s;
}
.btn-container a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp"></jsp:include>
<div class="container2">
<div
style="display: flex; justify-content: space-between; align-items: center;">
<h1>개인정보</h1>
<a id="updatemyinfo" href="protected/updateform_ceo.jsp"
class="btn btn-primary btn-m">개인정보수정</a>
</div>
<table>
<tr>
<th>회사</th>
<td><%=comname%>(회사 코드 : <%=dto.getComId()%>)</td>
</tr>
<tr>
<th>관리자 사원번호</th>
<td><%=dto.getEmpNo()%></td>
</tr>
<tr>
<th>관리자 이름</th>
<td><%=dto.geteName()%></td>
</tr>
<tr>
<th>직급</th>
<td><%=dto.getRole()%></td>
</tr>
<tr>
<th>연락처</th>
<td><%=dto.geteCall()%></td>
</tr>
<tr>
<th>비밀번호</th>
<td><%=dto.getePwd()%></td>
</tr>
</table>
<div class="btn-container">
<a href="../index.jsp">메인 페이지로</a> <a href="protected/logout.jsp">로그아웃</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<jsp:include page="/include/footer.jsp" />
</body>
</html>
<%@page import="test.dao.Com1CeoDao"%>
<%@page import="test.dto.Com1CeoDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int empno = (int) session.getAttribute("empno");
Com1CeoDao dao = Com1CeoDao.getInstance();
Com1CeoDto dto = dao.getData(empno);
// 로그인한 사용자의 정보를 DB에서 가져오기 (예시)
Com1CeoDto ceoInfo = Com1CeoDao.getInstance().getData(empno); // 사원번호를 이용하여 CEO 정보를 조회
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/ceo/protected/updateform_ceo</title>
<jsp:include page="/include/resource.jsp"></jsp:include>
<style>
</style>
</head>
<body>
<jsp:include page="/include/navbar.jsp"></jsp:include>
<div class="container" id="app">
<h3>회원 정보 수정 양식</h3>
<form action="update.jsp" method="get" id="callupdateForm">
<div>
<div class="mb-2">
<label class="form-label" for="ename">관리자 이름</label>
<input class="form-control" type="text" id="ename" value="<%=dto.geteName() %>" readonly />
</div>
<div class="mb-2">
<label class="form-label" for="callnum">연락처</label>
<input class="form-control" placeholder="<%=dto.geteCall() %>" @input="onCallInput" :class="{'is-invalid': !isCallValid && isCallDirty, 'is-valid':isCallValid}"
type="text" name="callnum" id="callnum" />
<div class="invalid-feedback">전화번호 형식에 맞지 않습니다.</div>
</div>
</div>
<div class="mb-2">
<label class="form-label" for="password">기존 비밀번호</label>
<input class="form-control" @input="onPwdInput" :class="{'is-invalid': !isPwdValid && isPwdDirty, 'is-valid':isPwdValid}"
type="password" name="password" id="password" />
<div class="invalid-feedback">반드시 입력하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="newPassword">새 비밀번호</label>
<input class="form-control" type="password" name="newPassword" id="newPassword" @input="onNewPwdInput" v-model="newPassword"
:class="{'is-invalid': !isNewPwdValid && isNewPwdDirty, 'is-valid':isNewPwdValid}" />
<small class="form-text">반드시 입력하고 아래의 확인란과 동일해야 합니다</small>
<div class="invalid-feedback">새 비밀번호를 확인하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="newPassword2">새 비밀번호 확인</label>
<input class="form-control" type="password" id="newPassword2" @input="onNewPwdInput" v-model="newPassword2" />
</div>
<button class="btn btn-success" type="submit" :disabled="!isPwdValid || !isNewPwdValid">수정하기</button>
<button class="btn btn-danger" type="reset">리셋</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isPwdValid:false,
isNewPwdValid:false,
isCallValid:false,
callnum:"",
newPassword:"",
newPassword2:"",
isCallDirty:false,
isPwdDirty:false, //비밀번호 입력란에 한번이라도 입력했는지 여부
isNewPwdDirty:false //새비밀번호 입력한에 한번이라도 입력했는지 여부
},
methods:{
onCallInput(e){
//현재까지 입력한 비밀번호
const callnum=e.target.value;
//공백이 아닌 한글자가 한번이상 반복 되어야 통과 되는 정규표현식
const reg_callnum=/^01[016789]-\d{3,4}-\d{4}$/;
if(reg_callnum.test(callnum)){
this.isCallValid=true;
}else{
this.isCallValid=false;
}
this.isCallDirty=true;
},
onPwdInput(e){
//현재까지 입력한 비밀번호
const pwd=e.target.value;
//공백이 아닌 한글자가 한번이상 반복 되어야 통과 되는 정규표현식
const reg_pwd=/[\S]+/;
if(reg_pwd.test(pwd)){
this.isPwdValid=true;
}else{
this.isPwdValid=false;
}
this.isPwdDirty=true;
},
onNewPwdInput(){
//공백이 아닌 글자를 하나이상 입력했는지 확인할 정규 표현식
const reg_pwd=/[\S]+/;
//만일 정규표현식도 통과하고 그리고 두개의 비밀번호가 같다면
if(reg_pwd.test(this.newPassword) && (this.newPassword === this.newPassword2)){
//새 비밀번호 유효성 여부를 true 로 변경
this.isNewPwdValid = true;
}else{//그렇지 않다면
//새 비밀번호 유효성 여부를 false 로 변경
this.isNewPwdValid = false;
}
this.isNewPwdDirty=true;
}
}
});
</script>
<jsp:include page="/include/footer.jsp" />
</body>
</html>
<%@page import="test.dto.Com1CeoDto"%>
<%@page import="test.dao.Com1CeoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
int empno = (int) session.getAttribute("empno");
Com1CeoDao dao = Com1CeoDao.getInstance();
Com1CeoDto dto = dao.getData(empno);
//폼 전송되는 구 비밀번호, 새 비밀번호 읽어오기
String newcall=request.getParameter("callnum");
//작업의 성공여부
boolean isSuccess=false;
//만일 현재 비밀번호하고 입력한 비밀번호와 같으면
if(newcall != null){
//수정 작업을 진행
dto.seteCall(newcall);
Com1CeoDao.getInstance().update(dto);
isSuccess=true;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/user/private/pwd-update.jsp</title>
</head>
<body>
<div class="container">
<%if(isSuccess==true){ %>
<script>
alert("전화번호를 수정했습니다.");
//javascript 로 페이지 이동
location.href = "${pageContext.request.contextPath }/ceo_seong/myinfo_ceo.jsp";
</script>
<%}else{ %>
<script>
alert("전화번호를 수정하지 못 했습니다.");
//javascript 로 페이지 이동
location.href = "updateform_ceo.jsp";
</script>
<%} %>
</div>
</body>
</html>
<%@page import="test.dto.Com1CeoDto"%>
<%@page import="test.dao.Com1CeoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
int empno = (int) session.getAttribute("empno");
Com1CeoDao dao = Com1CeoDao.getInstance();
Com1CeoDto dto = dao.getData(empno);
//폼 전송되는 구 비밀번호, 새 비밀번호 읽어오기
String password=request.getParameter("password");
String newPassword=request.getParameter("newPassword");
//작업의 성공여부
boolean isSuccess=false;
//현재 비밀번호
String currentPwd = dto.getePwd();
//만일 현재 비밀번호하고 입력한 비밀번호와 같으면
if(currentPwd.equals(password)){
//수정 작업을 진행
dto.setePwd(newPassword);
Com1CeoDao.getInstance().update(dto);
isSuccess=true;
}
//만일 비밀번호 수정 성공이면
if(isSuccess){
//로그아웃 처리
session.invalidate();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/protected/pwd-update.jsp</title>
</head>
<body>
<div class="container">
<%if(isSuccess){ %>
<script>
alert("비밀번호를 수정하고 로그아웃되었습니다");
//javascript 로 페이지 이동
location.href = "${pageContext.request.contextPath }/user/loginform.jsp";
</script>
<%}else{ %>
<script>
alert("이전 비밀번호가 일치하지 않습니다.");
//javascript 로 페이지 이동
location.href = "${pageContext.request.contextPath }/ceo_seong/protected/updateform_ceo.jsp";
</script>
<%} %>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1.세션 초기화
session.invalidate();
//2. 응답
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert("로그아웃 되었습니다");
//javascript 로 페이지 이동
location.href = "${pageContext.request.contextPath }/user/loginform.jsp";
</script>
</body>
</html>
합친거
<%@page import="test.dto.Com1CeoDto"%>
<%@page import="test.dao.Com1CeoDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
int empno = (int) session.getAttribute("empno");
Com1CeoDao dao = Com1CeoDao.getInstance();
Com1CeoDto dto = dao.getData(empno);
String newcall=request.getParameter("callnum");
String password=request.getParameter("password");
String newPassword=request.getParameter("newPassword");
boolean isSuccess=false;
if(newcall!=null&&newPassword!=null){
dto.seteCall(newcall);
Com1CeoDao.getInstance().update(dto);
dto.setePwd(newPassword);
Com1CeoDao.getInstance().update(dto);
isSuccess=true;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/user/private/pwd-update.jsp</title>
</head>
<body>
<div class="container">
<%if(isSuccess==true){ %>
<script>
alert("개인 정보를 수정했습니다.");
//javascript 로 페이지 이동
location.href = "${pageContext.request.contextPath }/ceo_seong/myinfo_ceo.jsp";
</script>
<%}else{ %>
<script>
alert("개인정보를 수정하지 못 했습니다.");
//javascript 로 페이지 이동
location.href = "updateform_ceo.jsp";
</script>
<%} %>
</div>
</body>
</html>
'자바풀스택 과정 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 2/7 하루 기록 050 (1) | 2025.02.07 |
|---|---|
| 자바 풀 스택 2/6 하루 기록 049 (0) | 2025.02.06 |
| 자바 풀 스택 2/4 하루 기록 047 (1) | 2025.02.04 |
| 자바 풀 스택 2/3 하루 기록 046 (0) | 2025.02.03 |
| 자바 풀 스택 1/23 오후 기록 044-2 (1) | 2025.01.23 |