[Project] HTML의 정보를 E-Mail로 전송하기

[Project] HTML의 정보를 E-Mail로 전송하기

 

📖 한 줄 요약

contactme 페이지 기능(메일 보내기) 

• HTML에서 Ajax를 통해서 views.py로 데이터 전송
• views.py에서 메일 전송하는법

 

📚 기능

아래의 CONTACT ME 박스 안에 Name, Email Address, Message에 텍스트를 입력하고 메시지를 보내면 미리 지정해둔 메일로 전송되는 기능

 

📚  구현 순서

 

📑 사전 준비

1. 구글 계정의 2단계 인증 사용
   • http://myaccount.google.com/security
2. 구글 앱 비밀번호 설정 
   • 앱 선택  - 기타 ( 앱 이름을 설정할 수 있음)
   • 비밀번호 복사 ( 비밀번호는 한 번만 보여줌)

 

📑 settings.py 설정

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = "smtp.gmail.com"
EMAIL_PORT = 587
EMAIL_HOST_USER = '이메일을 보낼 G-mail 계정'
EMAIL_HOST_PASSWORD = '설정한 앱 비밀번호'
EMAIL_USE_TLS = True
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

 

📑 HTML에서 ID값과 제이쿼리 기능

• id 값은 아래와 같이 설정하였다.
  • Name = contactme_namebox
  • Email Address = contactme_emailbox
  • Message = contactme_message_textbox
• 제이쿼리는 아래와 같이 작성하였다.

$('#contactme_sendme_button').click(function(){

        var contactme_namebox = $('#contactme_namebox').val();
        var contactme_emailbox = $('#contactme_emailbox').val();
        var contactme_message_textbox = $('#contactme_message_textbox').val();

        console.log(contactme_namebox,contactme_emailbox,contactme_message_textbox);

        $.ajax({
            url: "/content/sendmail",
            dataType : "json",
            data: {
                contactme_namebox : contactme_namebox,
                contactme_emailbox : contactme_emailbox,
                contactme_message_textbox : contactme_message_textbox,
                },
            method: "GET",

            success: function (data){
                    console.log("성공");
                },
                error: function (request, status, error){
                    console.log("에러");
                },
                complete: function (){
                    console.log("완료");
                }
        });
        });

sendme 버튼을 클릭하면 동작한다.

 

contactme_namebox는 contactme_namebox의 내용이다.

contactme_emailbox는 contactme_emailbox의 내용이다.

contactme_message_textbox는 contactme_message_textbox의 내용이다.

 

contactme_namebox, contactme_emailbox, contactme_message_textbox를 콘솔창에서 보여준다.

 

ajax

/content/sendmail로 데이터를 보낸다.

데이터 타입은 json이다.

데이터는 (생략)이다.

메서드는 get이다.

 

📑 urls.py에서 HTML에서 보낸 데이터 받기

from django.urls import path
from polls.content.views import Sendmail

urlpatterns = [
    path('sendmail',Sendmail.as_view()),
]

 

📑 views.py 로가서 urls.py에서 보낸 데이터 받은 후 처리

class Sendmail(APIView):
    def get(self,request):
        contactme_namebox = request.GET.get('contactme_namebox')
        contactme_emailbox = request.GET.get('contactme_emailbox')
        contactme_message_textbox = request.GET.get('contactme_message_textbox')

        email = EmailMessage(
            '웹에서 온 메일입니다',
            '%s\n %s\n %s\n' %
            (contactme_namebox, contactme_emailbox, contactme_message_textbox),
            to=['jjong015189@naver.com'],  
        )
        email.send()

        return render(request,"content/contact.html")