<!DOCTYPE html>
<html>
<head>
<script>
function togglePasswordVisibility() {
var passwordField = document.getElementById("passwordField");
var passwordToggleBtn = document.getElementById("passwordToggleBtn");
if (passwordField.type === "password") {
passwordField.type = "text";
passwordToggleBtn.innerHTML = "Hide Password";
} else {
passwordField.type = "password";
passwordToggleBtn.innerHTML = "Show Password";
}
}
</script>
</head>
<body>
<form>
<label for="passwordField">Password:</label>
<input type="password" id="passwordField" name="password" value="password123" />
<button type="button" id="passwordToggleBtn" onclick="togglePasswordVisibility()">Show Password</button>
</form>
</body>
</html
public static boolean validatePassword(String password) {
// 비밀번호 조건 검사
String regex = "^(?=.*[a-zA-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$";
return password.matches(regex);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Validation</title>
<script>
function validatePassword() {
var password = document.getElementById("password").value;
var regex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
if (!regex.test(password)) {
alert("비밀번호는 특수문자, 영어, 숫자를 포함하여 8글자 이상이어야 합니다.");
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validatePassword()">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<input type="submit" value="Register" />
</form>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gantt Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="ganttChartCanvas" width="800" height="400"></canvas>
<script>
var ganttChartData = {
labels: ['Task 1', 'Task 2', 'Task 3'],
datasets: [
{
label: 'Start Date',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
data: [
{ x: '2022-03-01', y: 'Task 1' },
{ x: '2022-03-05', y: 'Task 2' },
{ x: '2022-03-10', y: 'Task 3' }
]
},
{
label: 'End Date',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
data: [
{ x: '2022-03-03', y: 'Task 1' },
{ x: '2022-03-08', y: 'Task 2' },
{ x: '2022-03-15', y: 'Task 3' }
]
}
]
};
var ctx = document.getElementById('ganttChartCanvas').getContext('2d');
var ganttChart = new Chart(ctx, {
type: 'horizontalBar',
data: ganttChartData,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'YYYY-MM-DD'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Tasks'
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
return label + ': ' + tooltipItem.xLabel.format('YYYY-MM-DD');
}
}
}
}
});
</script>
</body>
</html>
<--ganttChartData 객체에는 각 작업(Task)의 시작일과 종료일이 포함되어 있습니다. 위의 코드에서는 간단한 세 가지 작업을 표시하도록 설정되어 있습니다.-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="pageTitle" value="MAIN"></c:set>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="/resource/background.css" />
<%@ include file="../common/head.jspf"%>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사진 업로드</title>
</head>
<body>
<form action="../member/upload" method="post" enctype="multipart/form-data">
<input type="file" name="photo" accept="image/*">
<input type="submit" value="사진 업로드">
</form>
<canvas id="myCanvas" width="100" height="100"></canvas>
</body>
<%@ include file="../common/foot.jspf"%>
//membercontroller
@RequestMapping("/usr/member/upload")
@ResponseBody
public String handleFileUpload(HttpServletRequest req, @RequestParam("photo") MultipartFile file) {
// 여기에 파일 저장 또는 처리 로직을 추가합니다.
// 예: 파일을 서버의 특정 경로에 저장하거나, 데이터베이스에 저장합니다.
Rq rq = (Rq) req.getAttribute("rq");
int id = rq.getLoginedMemberId();
memberService.upload(file, id);
System.out.println("#$#$#$#$#$" + file + id);
// 이후 페이지로 리다이렉트 또는 다른 처리를 수행할 수 있습니다.
return Ut.jsReplace("S-1", "이미지가 업로드되었습니다.", "..member/mypage");
}
//memberservice
public void upload(MultipartFile file, int id) {
try {
// 파일의 실제 이름을 얻어옴
String originalFileName = file.getOriginalFilename();
// 파일의 확장자를 얻어옴
String fileExtension = originalFileName.substring(originalFileName.lastIndexOf("."));
// 유니크한 파일명 생성
String uniqueFileName = UUID.randomUUID().toString() + fileExtension;
byte[] fileBytes = file.getBytes();
// 파일 저장
// (여기에서는 데이터베이스에 직접 저장하지 않고, 파일 경로만 저장하도록 수정)
String filePath = saveFile(uniqueFileName, fileBytes);
memberRepository.upload(filePath, id);
// 여기에 데이터베이스에 파일 정보를 저장하는 로직을 추가할 수 있습니다.
} catch (IOException e) {
e.printStackTrace();
// 파일 처리 중 예외가 발생한 경우 처리
}
}
private String saveFile(String fileName, byte[] fileBytes) throws IOException {
// 파일을 실제 경로에 저장하는 로직 추가
// (여기에서는 간단하게 파일명으로 저장하는 것으로 예제 작성)
String filePath = "C:\\work\\sts-4.21.0.RELEASE-workspace\\myproject_1\\" + fileName;
Files.write(Paths.get(filePath), fileBytes);
return filePath;
}
//memberrepository
@Update("UPDATE `member` SET image = #{filePath} WHERE id = #{id}")
public void upload(@Param("filePath") String filePath, @Param("id") int id);
