UIUX _국비과정 0708 [이메일 보내기]

백만두 2024. 7. 23. 17:23

2024. 7. 23. 17:23

SMTP :

Simple Mail Transfer Protocol의 약자.

인터넷을 통해 이메일 메시지를 보내고 받는 데 사용되는 통신 프로토콜

이메일 보내기 기능 구현

POP 서버명 : pop.naver.com

SMTP 서버명 : smtp.naver.com

POP 포트 : ___, 보안연결(SSL) 필요

SMTP 포트 : ___, 보안 연결(SSL) 필요

된다!

MailForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>MUSTHAVE 메일 템플릿</h2>

	<table border="1" width="100%">
		<tr>
			<td width="50">내용</td>
			<td>__CONTENT__</td>
		</tr>
		<tr>
			<td>이미지</td>
			<td><img
				src="https://github.com/goldenrabbit2020/musthave_jsp/blob/main/GOLDEN-RABBIT_LOGO_150.png?raw=true"
				alt="골든래빗"></td>
		</tr>
	</table>
</body>
</html>

EmailSendMain.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>
</head>
<body>
	<h2>이메일 전송하기</h2>
	<form method="post" action="SendProcess.jsp">
		<table border="1">
			<tr>
				<td>
				보내는 사람 : <input type="text" name="form" value="" />
				</td>
			</tr>

			<tr>
				<td>
				받는 사람 : <input type="text" name="to" value="" />
				</td>
			</tr>

			<tr>
				<td>
				제목 : <input type="text" name="subject" size="50" value="" />
				</td>
			</tr>

			<tr>
				<td>
				형식 : 
				 <input type="radio" name="format" value="text" checked/>Text
				 <input type="radio" name="format" value="html"/>HTML
				</td>
			</tr>

			<tr>
				<td>
				<textarea name="content" cols="60" rows="10"></textarea>
				</td>
			</tr>

			<tr>
				<td>
				<button type="submit">전송하기</button>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

NaverSMTP.java

<%@ 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>
	<h2>이메일 전송하기</h2>
	<form method="post" action="SendProcess.jsp">
		<table border="1">
			<tr>
				<td>
				보내는 사람 : <input type="text" name="form" value="" />
				</td>
			</tr>

			<tr>
				<td>
				받는 사람 : <input type="text" name="to" value="" />
				</td>
			</tr>

			<tr>
				<td>
				제목 : <input type="text" name="subject" size="50" value="" />
				</td>
			</tr>

			<tr>
				<td>
				형식 : 
				 <input type="radio" name="format" value="text" checked/>Text
				 <input type="radio" name="format" value="html"/>HTML
				</td>
			</tr>

			<tr>
				<td>
				<textarea name="content" cols="60" rows="10"></textarea>
				</td>
			</tr>

			<tr>
				<td>
				<button type="submit">전송하기</button>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

Ajax 통신

스크립트에서 서버에 요청

(1번) 클라이언트가 서버로 요청, 페이지 이동 발생, 처리

페이지를 띄울 때 이미지를 처리하는 과정(2번)에서 이미지가 크다면 시간이 좀 걸리겠지

그럼 다음 3번을 실행하기 전 2번이 실행되는 시간 동안 화면 비동기 처리

jsp 싱글스레드 구성으로 한번에 하나의 일만 처리 가능

비동기처리가 가능하게 만드는 ajax 통신

기본형식)

$.ajax({
	url : './PopupCookie.jsp',
	type : 'get',
	data : {inactiveToday : chkVal}, // 자바에선 객체, 비동기 통신방식에서는 제이슨 형식 
	dataType : "text",
	success : function(resData) {
		if (resData != '') location.reload();
	  }
	});

url - 이동할 페이지이다. 이동한 페이지에서 데이터를 처리하고 다시 현페이지로 돌아온다. 필요한 경우 데이터를 전달할 수 있다.

type - 전달 방식을 의미한다. GET/POST가 있다.

data - 데이터 처리를 할 페이지에게 전달할 정도이다. Array 형식일 때 위와 같이 적으면 된다.

dataType - 전달받는 인자의 형식.

success - 데이터 처리가 성공했을 경우 해당 함수(함수가 아니어도 되는듯 하다)를 실행한다.

json으로 처리할 경우 데이터를 처리하는 페이지에서 전달해주는 값이 인자로 받아진다.

ajaxClient1.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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리  -->
<script>
	$(function(){
		$("#buttonSubmit").on("click",function(){
			$.ajax({
				url:"./ajaxServer1.jsp",
				type:"post",
				data:$("#theForm").serialize(),
				dataType: 'json',
				success:function(res){
					alert("성공");
					$("#result_name").html(res.name);
					$("#result_ph_number").html(res.ph_number);
					$("#result_address").html(res.address);
				},
				error: function(err) {
					alert("실패 원인 : " + err);
				}
			});
		});
	});
</script>
</head>
<body>
<form id="theForm">
    <table border="1">
        <tr>
            <th>이름</th>
            <td><input type="text" id="name" name="name"></td>
        </tr>
        <tr>
            <th>번호</th>
            <td><input type="text" id="ph_number" name="ph_number"></td>
        </tr>
        <tr>
            <th>주소</th>
            <td><input type="text" id="address" name="address"></td>
        </tr>
    </table>
    <br>
    <input id="buttonSubmit" type="button" value="제출">
</form>
<br>
<table border="1">
    <tr>
        <th>[확인] 이름</th>
        <td style="width: 200px;"><span id="result_name"></span></td>
    </tr>
    <tr>
        <th>[확인] 번호</th>
        <td><span id="result_ph_number"></span></td>
    </tr>
    <tr>
        <th>[확인] 주소</th>
        <td><span id="result_address"></span></td>
    </tr>
</table>
</body>
</html>

ajaxServer1.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String name = request.getParameter("name");
    String ph_number = request.getParameter("ph_number");
    String address = request.getParameter("address");
%>

{
    "name": "<%= name %>",
    "ph_number": "<%= ph_number %>",
    "address": "<%= address %>"
}

위의 폼에서 이름과 번호, 주소를 입력하고 전송을 누르면 아래의 폼으로 정보가 전송된다.

jsp 에서 제이쿼리문을 쓸 때는 주석 때문에 오류가 나는 경우가 많으니 주석을 최소화할 것!

저작자표시 비영리 변경금지 (새창열림)

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0710 [오픈 API활용-카카오맵] (0)	2024.07.25
UIUX _국비과정 0709 [AJAX 통신] (1)	2024.07.23
UIUX _국비과정 주말공부(0708 모델 2 방식 게시판 수정까지) (2)	2024.07.22
UIUX _국비과정 0704 ~ 05(0708 모델 2 방식 게시판 수정까지) (1)	2024.07.22
UIUX _국비과정 0703 [서블릿부터 MVC방식까지] (1)	2024.07.22

개발(자)되어가는 일지