Информационный бюллетень электронной почты – это электронное письмо, которое отправляется на регулярной основе (E.g. Еженедельно или ежемесячно) для определенных пользователей. Как вы, вероятно, знаете, глядя на ваши почтовые ящики, электронные информационные бюллетени являются популярным средством для бизнеса. Статистика говорит, что 85% маркетологов B2B Отправить электронные информационные бюллетени как часть их содержания маркетинговой стратегии.
В этой статье мы построим собственную электронную рассылку абонента по электронной почте, используя Django и Ajax.
Требования: основы Django и Ajax. Вы можете обратиться к этой статье, если хотите узнать, как использовать AJAX в Django.
Настройка UI
index.html.
Это HTML-файл, который будет содержать пользовательский интерфейс. Как вы, возможно, заметили, мы будем использовать Bootstrap 4 компонента и некоторые пользовательские CSS. PS: Обязательно включите CSRF_Token в форме:)
{% load static %}
Newsletter Subscribtion Example
app.csss.
Добавим некоторые из наших собственных CSS, чтобы сделать наш UI более выровненным.
label {
font-size: 22px;
font-weight: bold;
}
.btn {
padding: 7px 21px;
background-color: rgb(143, 1, 1);
color: white;
font-size: 18px;
}
body {
background-color: azure;
}
Вот как наш интерфейс появится.
app.js Мы получим значения, которые вводятся пользователем в поле ввода, и проверьте, введен ли электронная почта пользователя, действительна или уже существует в нашей базе данных.
Мы будем использовать запрос AJAX, чтобы подтвердить адрес электронной почты, как только пользователь вводит по электронной почте, связывая A Изменить Событие на поле ввода электронной почты. Если адрес электронной почты и имени пользователя действителен, мы добавим его в нашу базу данных, используя другой запрос AJAX.
const validateEmail = function(email) {
var formData = new FormData();
formData.append('email', email)
$.ajaxSetup({
headers: {
"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
}
});
$.ajax({
url: '/validate/',
type: 'POST',
dataType: 'json',
cache: false,
processData: false,
contentType: false,
data: formData,
error: function (xhr) {
console.error(xhr.statusText);
},
success: function (res) {
$('.error').text(res.msg);
}
});
};
const subscribeUser = function(email, name) {
var formData = new FormData();
formData.append('email', email);
formData.append('name', name);
$.ajaxSetup({
headers: {
"X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
}
});
$.ajax({
url: '/newsletter/',
type: 'POST',
dataType: 'json',
cache: false,
processData: false,
contentType: false,
data: formData,
error: function (xhr) {
console.error(xhr.statusText);
},
success: function (res) {
$('.success').text(res.msg);
$('#userEmail').val(' ');
$('#userName').val(' ');
}
});
};
(function ($) {
$('#submit').on('click', () => {
event.preventDefault();
const userEmail = $('#userEmail').val();
const userName = $('#userName').val();
if (userEmail && userName) {
subscribeUser(userEmail, userName);
}
});
$('#userEmail').on('change', (event) => {
event.preventDefault();
const email = event.target.value;
validateEmail(email);
});
})(jQuery);
С этим мы сделаем с передним концом. Теперь давайте построим модель и сервер, чтобы попробовать этот код.
Настройка сервера
urls.py
URL, где запрос будет сделан
from django.urls import path
from . import views
urlpatterns = [
path('newsletter/', views.index, name='index'),
path('validate/', views.validate_email, name='validate_email'),
]
views.py
Запрос, сделанный на сервер, обрабатывается функцией определенной в просмотру .py. Когда мы получаем почтовый запрос, мы извлекаем данные и добавляем их в базу данных.
- подтвердить адрес электронной почты: Чтобы подтвердить электронное письмо, введенное пользователем
- Индекс: добавить пользователя в базу данных
Мы также будем отправлять почту подтверждения пользователю, используя SMTP-сервер Google. Если вы хотите узнать, как это работает, вы можете проверить эту статью.
from django.shortcuts import render
from django.http import JsonResponse
import re
from .models import SubscribedUsers
from django.core.mail import send_mail
from django.conf import settings
def index(request):
if request.method == 'POST':
post_data = request.POST.copy()
email = post_data.get("email", None)
name = post_data.get("name", None)
subscribedUsers = SubscribedUsers()
subscribedUsers.email = email
subscribedUsers.name = name
subscribedUsers.save()
# send a confirmation mail
subject = 'NewsLetter Subscription'
message = 'Hello ' + name + ', Thanks for subscribing us. You will get notification of latest articles posted on our website. Please do not reply on this email.'
email_from = settings.EMAIL_HOST_USER
recipient_list = [email, ]
send_mail(subject, message, email_from, recipient_list)
res = JsonResponse({'msg': 'Thanks. Subscribed Successfully!'})
return res
return render(request, 'index.html')
def validate_email(request):
email = request.POST.get("email", None)
if email is None:
res = JsonResponse({'msg': 'Email is required.'})
elif SubscribedUsers.objects.get(email = email):
res = JsonResponse({'msg': 'Email Address already exists'})
elif not re.match(r"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", email):
res = JsonResponse({'msg': 'Invalid Email Address'})
else:
res = JsonResponse({'msg': ''})
return res
models.py
Мы не можем хранить данные, пока у нас не будет модели. Давайте создадим один.
from django.db import models
class SubscribedUsers(models.Model):
email = models.CharField(unique=True, max_length=50)
name = models.CharField(max_length=50)
Запустите эти команды в терминале, чтобы перенести свою модель
python manage.py makemigrations python manage.py migrate
Теперь мы все настроены, чтобы проверить наше приложение. Перейдите в свой браузер, запустите сервировочный URL и проверьте свое приложение.
Это несколько снимков вывода.
С этим мы создали способ для пользователей подписаться на наш веб-сайт. Все пользователи, которые заполняют эти детали и нажмите кнопку подписки, будут добавлены в нашу базу данных. Следующим шагом для отправки почты всем пользователям, которые мы имеем в нашей базе данных для любой статьи, которую мы хотим. Вот и это для этой статьи. Спасибо за чтение.
Вы также можете связаться со мной на Twitter для любого обсуждения.
Adios!
Оригинал: “https://dev.to/shubhamkshatriya25/how-to-build-a-email-newsletter-subscriber-in-django-j2p”