[Java] 메일 보내기/ajax 활용하기

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일 때)

배움엔 끝이 없다

[Java] 메일 보내기/ajax 활용하기

01. 사이트에서 메일 보내기

02. 공지사항 화면에서 상세보기 표시하기

03. 삭제했을 때 버튼 바꾸기

댓글

티스토리툴바

[Java] 메일 보내기/ajax 활용하기

01. 사이트에서 메일 보내기

02. 공지사항 화면에서 상세보기 표시하기

03. 삭제했을 때 버튼 바꾸기

관련글

댓글

티스토리툴바