Java
[Java] 메일 보내기/ajax 활용하기
PEAZH
2023. 8. 23. 09:10
반응형
01. 사이트에서 메일 보내기
01) 아웃룩 가입하기
Outlook, Microsoft가 무료로 제공하는 개인 전자 메일 및 일정 서비스
무료 Outlook 전자 메일 및 일정을 비롯하여 Word, Excel, PowerPoint 등 Office Online 앱을 이용하세요. 로그인하여 Outlook, Hotmail 또는 Live 전자 메일 계정에 액세스하세요.
outlook.live.com
02) 아웃룩에서 SMTP 설정 확인하기
POP / IMAP / SMTP의 차이 📌
🔗 POP(Post Office Protocol) : 서버로부터 이메일을 가져오고 가져온 메일이 확인된다면 서버로부터 이메일을 삭제하는 프로토콜
🔗 IMAP(Internet Access Message Protocol) : 이메일을 받은 서버로부터 이메일 메시지를 관리하고 이메일을 꺼내서 가져올 때 사용되는 프로토콜로 서버에 메시지를 저장하고 여러 가지 디바이스에 메일들을 동기화함
🔗 SMTP(Simple Mail Transfer Protocol) : 이메일을 보내는데 업계 표준 프로토콜로 client가 메시지를 email server로 보낼 때 사용하는 프로토콜
03) mail.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>admin || main</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="stylesheet" href="../css/admin.css">
<style type="text/css">
.article{
margin: 0 auto;
padding: 10px;
width: 800px;
height: 100vh;
box-sizing: border-box;
background-color: gray;
}
input{
width: 100%;
height: 30px;
margin-bottom: 5px;
}
textarea {
width: 100%;
height: 500px;
}
button {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<%@ include file="menu.jsp" %>
<div class="main">
<div class="article">
<h1>메일보내기</h1>
<form action="./mail" method="post">
<input type="text" name="title" placeholder="제목을 적어주세요">
<input type="text" name="to" placeholder="받는 사람 email주소를 적어주세요">
<textarea name="content"></textarea>
<button type="submit">메일보내기</button>
</form>
</div>
</div>
</div>
</body>
</html>
04) simple text email로 보내기 : 문자만 보낼 수 있음
- Util.java
public boolean simpleMailSender(Map<String, Object> map) throws EmailException {
// 메일 정보 적기
String emailAddr = "admin@outlook.kr"; // 보내는 사람 메일 주소
String passwd = "admin"; // 보내는 사람 메일 주소 암호
String name = "관리자"; // 보내는 사람 이름
String hostname = "smtp.office365.com";// smtp 주소
int port = 587;// smtp 포트번호
// 메일 보내기 작업
SimpleEmail mail = new SimpleEmail();
mail.setCharset("UTF-8");// 언어 설정
mail.setDebug(true);// 코드의 동작을 추적하여 디버깅 정보를 콘솔창에 출력
mail.setHostName(hostname);// smtp 주소 설정
mail.setAuthentication(emailAddr, passwd);// 이메일 주소, 암호 인증 정보 설정
mail.setSmtpPort(port);// 포트번호 설정
mail.setStartTLSEnabled(true);// 이메일 전송 시 보안 연결 사용하기 위해 설정
mail.setFrom(emailAddr, name);// 발신자 주소 설정
//메일 받는 사람 적기
mail.addTo((String) map.get("to"));// 받는 사람 이메일
mail.setSubject((String) map.get("title"));// 메일 제목
mail.setMsg((String) map.get("content"));// 본문 내용
mail.send();//메일 보내기
return true;
}
- AdminController.java
@PostMapping("/mail")
public String mail(@RequestParam Map<String, Object> map) throws EmailException {
// System.out.println(map); {title=메일을 보냅니다., to=ㅇㅇㅇㅇ, content=ㅇㅇㅇㅇ}
util.simpleMailSender(map);
return "admin/mail";
}
05) sending HTML formatted email with embedded images로 보내기 : 문자, 파일, 이미지 등을 보낼 수 있음
- Util.java
public boolean simpleMailSender(Map<String, Object> map) throws EmailException {
// 메일 정보 적기
String emailAddr = "admin@outlook.kr"; // 보내는 사람 메일 주소
String passwd = "admin"; // 보내는 사람 메일 주소 암호
String name = "관리자"; // 보내는 사람 이름
String hostname = "smtp.office365.com";// smtp 주소
int port = 587;// smtp 포트번호
// html 메일 보내기
HtmlEmail mail = new HtmlEmail();
mail.setCharset("UTF-8");// 언어 설정
mail.setDebug(true);// 코드의 동작을 추적하여 디버깅 정보를 콘솔창에 출력
mail.setHostName(hostname);// smtp 주소 설정
mail.setAuthentication(emailAddr, passwd);// 이메일 주소, 암호 인증 정보 설정
mail.setSmtpPort(port);// 포트번호 설정
mail.setStartTLSEnabled(true);// 이메일 전송 시 보안 연결 사용하기 위해 설정
mail.setFrom(emailAddr, name);// 발신자 주소 설정
//메일 받는 사람 적기
mail.addTo((String) map.get("to"));// 받는 사람 이메일
mail.setSubject((String) map.get("title"));// 메일 제목
// 파일 경로 잡아오기
String path = uploadPath();
// 인터넷 상에서 존재하는 이미지만 가져와야 함
String img = "https://whale.naver.com/img//banner_beta_download_phone_1440.png";
String file2 = path + "/202308221623224d7cfc84-7060-49d9-9502-87c3617f42f5SpringBoot+Thymeleaf.docx";
String html = "<html>";
html += "<h1>그림을 첨부합니다.</h1>";
html += "<img alt=\"이미지\" src='"+img+"'>";
html += "<h2>임시 비밀번호를 보내드립니다.</h2>";
html += "<div> 임시 암호 : 12345</div>";
html += "<h3>아래 링크를 클릭해서 암호를 변경해 주세요.</h3>";
html += "<a href=\"http://nid.naver.com\">눌러주세요</a>";
html += "</html>";
mail.setHtmlMsg(html);
// 문서 파일 첨부하기
EmailAttachment file = new EmailAttachment();
file.setPath(file2);
mail.attach(file);
mail.send();//메일 보내기
}
- AdminController.java
@PostMapping("/mail")
public String mail(@RequestParam Map<String, Object> map) throws EmailException {
util.htmlMailSender(map);,
return "admin/mail";
}
02. 공지사항 화면에서 상세보기 표시하기
01) AdminController.java
▪️내장되어 있는 jackson 사용해 보기
//jackson 사용해보기
ObjectNode json = JsonNodeFactory.instance.objectNode();
json.put("name", "홍길동");
▪️ jackson 사용해서 AdminController.java 수정하기
// noticeDetail
@ResponseBody
@PostMapping("/noticeDetail")
public String noticeDetail(@RequestParam("nno") int nno) {
//jackson 사용해보기
ObjectNode json = JsonNodeFactory.instance.objectNode();
// 1. 데이터 베이스에 물어보기 : nno로 본문내용 가져오기
String result = adminService.noticeDetail(nno);
// 2. jackson에 담기
json.put("content", result);
return json.toString();
}
}
▪️ map 타입을 json에 넣어주고 싶을 때
Map<String, Object> map = new HashMap<>();
map.put("bno", 123);
map.put("btitle", 1234);
ObjectMapper jsonMap = new ObjectMapper();
try {
json.put("map", jsonMap.writeValueAsString(map));
} catch (JsonProcessingException e) {
e.printStackTrace();
}
02) AdminService.java
public String noticeDetail(int nno) {
return adminDAO.noticeDetail(nno);
}
03) AdminDAO.java
String noticeDetail(int nno);
04) adminMapper.xml
<select id="noticeDetail" parameterType="Integer" resultType="String">
SELECT ncontent
FROM notice
WHERE nno=#{nno}
</select>
▪️ 'postman' 이용해서 넘어오는 값 확인하기
05) notice.jsp에서 <script> 추가하기
- 상단에 제이쿼리 스크립트 추가하기
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
- 글 제목을 눌렀을 때 글 번호 뜨게 하기
▪️alert($(".title").text());를 썼을 경우 : 모든 글의 글 제목이 뜸
▪️$(".title")을 하나의 글만 뜨기 위해서 this로 변경해 줌
<script type="text/javascript">
$(function(){
$(".title").click(function(){
alert($(this).text());
});
});
</script>
▪️위에 부분을 활용해서 글 번호 뽑아내기
<!-- 방법 1 : prev 이용 -->
<script type="text/javascript">
$(function(){
$(".title").click(function(){
alert($(this).prev().text());
});
});
</script>
<!-- 방법 2 : sibling 이용 -->
<script type="text/javascript">
$(function(){
$(".title").click(function(){
alert($(this).sibling(".nno").text());
});
});
</script>
06) notice.jsp에서 ajax 추가하기
- 공지의 상세 보기가 나왔으면 하는 곳에 <div> 추가하기
<div class="content-view"></div>
- ajax 추가하기
<script type="text/javascript">
$(function(){
$(".title").click(function(){
let nno = $(this).prev().text();
$.ajax({
url: "./noticeDetail",
type: "post",
dataType: "json",
data: {nno : nno},
// 앞에 있는 nno : 내가 쓸 변수 이름
// 뒤에 있는 nno : let nno로 가져온 이름
success: function(data){
$(".content-view").html(data.content);
},
error: function(data){
alert("오류가 발생했습니다. 다시 시도하지 마세요." + data);
}
});
});
</script>
- return 값을 String으로 적었을 때
▪️Controller.java
@ResponseBody
@PostMapping("/noticeDetail")
public String noticeDetail(@RequestParam("nno") int nno) {
return "123";
}
▪️notice.jsp
<script type="text/javascript">
$(function(){
$(".title").click(function(){
let nno = $(this).prev().text();
$.ajax({
url: "./noticeDetail",
type: "post",
dataType: "html",// 타입 변경하기
data: {nno : nno},
success: function(data){
alert(data);
},
error: function(data){
alert("오류가 발생했습니다. 다시 시도하지 마세요." + data);
}
});
});
});
</script>
▪️실행화면 : return에 적어준 '123'이 넘어옴
03. 삭제했을 때 버튼 바꾸기
01) AdminController.java
@ResponseBody
@PostMapping("/noticeHide")
public String noticeHide(@RequestParam("nno") int nno) {
int result = adminService.noticeHide(nno);
ObjectNode json = JsonNodeFactory.instance.objectNode();
json.put("result", result);
return json.toString();
}
02) AdminService.java
public int noticeHide(int nno) {
return adminDAO.noticeHide(nno);
}
03) AdminDAO.java
int noticeHide(int nno);
04) adminMapper.xml
<update id="noticeHide" parameterType="Integer">
UPDATE notice SET ndel = if(ndel = 1, 0, 1)
WHERE nno=#{nno}
</update>▪️if(ndel = 1, 0, 1) : ndel이 1일 때 0으로 바꾸고, 1이 아니라면 1로 바꾸기
05) notice.jsp
<script>
$(document).on("click", ".xi-toggle-on, .xi-toggle-off", function(){
let nno = $(this).parent().siblings(".nno").text();// 글 번호 뽑아내기
let nnoTD = $(this).parent();// 삭제 버튼의 칸을 선택하기 (삭제 칸 안의 내용을 변경하기 위함 )
$.ajax({
url: "./noticeHide",
type: "post",
dataType: "json",
data: {nno : nno},
success: function(data){
if(nnoTD.html().indexOf("-off") != -1){
nnoTD.html('<i class="xi-toggle-on"></i>');
} else {
nnoTD.html('<i class="xi-toggle-off"></i>');
}
},
error: function(data){
alert("오류가 발생했습니다. 다시 시도하지 마세요." + data);
}
});
});
</script>
▪️$(.xi-toggle-on, .xi-toggle-off).click : 클릭 한 번만 가능함
▪️$(document).on("click", ".xi-toggle-on, .xi-toggle-off") : 여러 번 클릭이 가능함
▪️nnoTD.html().indexOf("-off") != -1 : 글이 삭제되었을 때 (ndel = 0일 때)
반응형