Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

Пишем скрипт для сайта ''Подписка по Email''


Сегодня напишем скрипт для сайта "Подписка по Email". Для тех кто ведёт сайты, объяснять не нужно на сколько это полезная вещь!


Весь код представлен примерно, любую часть Вы можете сделать по своему.


Приступим! Создаём таблицу в базе данных:

-- Структура таблицы `email_users`
CREATE TABLE `email_users` (
  `id_email_users` int(11) NOT NULL,
  `email` varchar(255) NOT NULL,
  `date` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Индексы таблицы `email_users`
ALTER TABLE `email_users`
  ADD PRIMARY KEY (`id_email_users`);

-- AUTO_INCREMENT для таблицы `email_users`
ALTER TABLE `email_users`
  MODIFY `id_email_users` int(11) NOT NULL AUTO_INCREMENT;


Таблица состоит из трёх столбцов: id_email_users c автоинкрементом, самого email и даты. Стоит заметить, для безопасности можно добавить в начале названия таблицы секретный префикс, чтобы никто не знал истинного названия таблицы.


Теперь необходимо написать HTML форму:


Настраиваем CSS стили:

#email_podpiska {
		margin:0 auto;
		width:600px;
		height:100px;
		clear: right;
		background: url('/images/email_podpiska.png');
}

input.inp_email_podpiska {
		padding:6px;
		border-radius:7px;
		border:none;
		margin:50px 0 0 220px;
		color:#685f5f;
		box-shadow:none;
		width:137px;
		height:20px;
		background:url('/images/bg_email_podpiska.gif');
		
}

	input.submitform{

		cursor:pointer;
		border-color:#9b5952;
		border-radius:7px;
		background:linear-gradient(to top,#9b5952 0%,#994e48 36%,#e48f87 100%);
		margin:0px 0px 0px 7px;
		color:#fff;
		padding:6px;
	} 
						
	.form_title{display:none}

Необходимо нарисовать фон email_podpiska.png для блока div размером 600*100 px, и фон для поля ввода email bg_email_podpiska.gif размером 150*32 px. Можете воспользоваться моими рисунками: email_podpiska.png и bg_email_podpiska.gif


Теперь напишем JavaScript c помощью технологии Ajax.


Должна быть подключена библиотека JQuery.


$(document).ready(function() {

	$('#form_email_user').submit(function(){
			var email_user = $('#email').val();
			var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
			if(email_user.search(pattern) == -1) {		
				alert('Неверное заполнение: Поле "Электронная почта" не корректно');	
				return false;
			}
			
			$.post('email_users.php', {Email: email_user}, func);            
			var content = document.getElementById("email_podpiska");         
						 
			// Функция, которая запускается при ответе сервера при ajax запросе.    
			function func(data) {
				var data_str = "";
			if(data == "") {
				 data_str = "

Идут технические работы - попробуйте позже
"; } else { data_str = data.toString(); } var content = document.getElementById("email_podpiska"); content.innerHTML = data_str; } return false; }); });

Осталось обработать запрос с помощью php (email_users.php). Для подключения к базе данных я использую класс http://github.com/colshrapnel/safemysql/blob/master/safemysql.class.php, который защищает базу данных от SQL-инъекций. Соответственно синтаксис записи в базу данных отличается от обычного php.


 require_once("safemysql.php");

if(isset($_POST['Email'])) {	
		if(preg_match("|[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}|i", $_POST['Email'])) {
		
			$_POST["Email"] = trim($_POST["Email"]);																																																
			$_POST["Email"] = strip_tags($_POST["Email"]);																																															
			$_POST["Email"] = substr($_POST["Email"], 0, 255);
								
			// Проверяем есть ли такой email
			$arr = array();
			$arr  = $db->getAll("SELECT COUNT(*) FROM email_users WHERE email=?s", $_POST["Email"]);
								
			if($arr[0]['COUNT(*)'] != 0) {
				echo '


Такой Email уже существует в базе данных!

'; } else { $db->query("INSERT INTO email_users (email, date) VALUES(?s, NOW())", $_POST["Email"]) ; echo '


Супер! Я сообщу о новых статьях по Email!

'; } unset($arr); } else { echo '

Не корректный Email

'; } }

На этом всё! Всем удачи! Давайте изучать web-программирование вместе!



04-02-2018 в 10:15:57





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

Похожая статья:

Пишем модуль "нашли ошибку? - нажимай Ctrl+Q" для сайта своими руками

Сегодняшняя статья посвящена модулю: "Заметили Ошибку? - нажимай Ctrl...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 0



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота:

Ответ:


Последние
видео:



Шейкер-сортировка (С#)
ОГЭ по информатике. Задание 18


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy