Пишем скрипт для сайта ''Подписка по 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 форму:

<div id='email_podpiska'>
   <form name='form_email_user' id='form_email_user'>
     <input type='text' name='email' id='email' class='inp_email_podpiska' onfocus="if (this.value == 'Введите Ваш e-mail'){this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}" value="Введите Ваш e-mail">
     <input class='submitform' type='submit' value='Подписаться' />
   </form>
</div>

Настраиваем 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 = "<center><br>Идут технические работы - попробуйте позже </center>";
			}
			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"] = itrim($_POST["Email"]);																																																
			$_POST["Email"] = istrip_tags($_POST["Email"]);																																															
			$_POST["Email"] = isubstr($_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 '<br><br><br><h3 style=color:#ac003d align=right>Такой Email уже существует в базе данных!</h3>';							
			}
			else {
				$db->query("INSERT INTO email_users (email, date) VALUES(?s, NOW())", $_POST["Email"]) ; 	
				echo '<br><br><br><h3 style =color:#ac003d align=right>Супер! Я сообщу о новых статьях по Email!';					
			}
								
			unset($arr);
								
		}
		else {
			
			echo '<br><br><h3 style=color:#ac003d align=right>Не корректный Email</h3>';
		}
		
}