Бесплатное скачивание файлов

Здесь находятся статьи, в которых предлагается скачать файлы. Это разнообразные программы, шаблоны сайтов, готовые jQuery плагины, примеры разработок на HTML, CSS, Javascript, jQuery, PHP, Photoshop.

Отправка данных без перезагрузки страницы. PHP+ Ajax

PHP + Ajax

Не так давно я публиковал материал на тему отправки писем при помощи PHP-функции mail. Теперь мы возьмем тот же скрипт, слегка его изменим, вынесем в отдельный файл под названием mail.php и добавим немного магии, будем отправлять данные без перезагрузки страницы. Помогут нам в этом библиотека jQuery и технология Ajax. Все тот же POST запрос мы будем обрабатывать в фоновом режиме, но для того, чтобы было понятно, что на странице что-то происходит, отобразим процесс отправки данных в виде небольшой анимации, а по окончании выведем сообщение об успешной отправке или об ошибке.

Ajax отправка данных с формы

PHP обработчик данных форм

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< ?php
$to = "<myemail@example.com>";
$email = $_POST['email'];
$subject = $_POST["theme"];
$page = 'Страница спасибо за комментарий'; 
$message = '
<html>
<body>
<center>	
<table border=1 cellpadding=6 cellspacing=0 width=90% bordercolor="#DBDBDB">
 <tr><td colspan=2 align=center bgcolor="#E4E4E4"><b>Информация</b></td></tr>
 <tr>
  <td><b>Откуда</b></td>
  <td>'.$page.'</td>
 </tr>
 <tr>
  <td><b>Адресат</b></td>
  <td><a href="mailto:'.$email.'">'.$email.'</a></td>
 </tr>
 <tr>
  <td><b>Тема</b></td>
  <td>'.$subject.'</td>
 </tr>
 <tr>
  <td><b>Сообщение</b></td>
  <td>'.$_POST['message'].'</td>
 </tr>
</table>
</center>	
</body>
</html>'; 
$headers  = "Content-type: text/html; charset=utf-8\r\n";
$result = mail($to, $subject, $message, $headers);
?>

Письмо будет приходить на почту в том же виде, что и в предыдущем посте, я лишь убрал вывод сообщений. Форма тоже идентична. Теперь, нужно подключить jQuery. Я использую Bootstrap, чтобы не писать свой велосипед, вы можете сделать так же. И теперь, чтобы отправка происходила без перезагрузки станицы, мы пропишем вполне стандартный Ajax запрос и немного его кастомизируем под свои нужды.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
$(function(){
  $('form').submit(function() {
  var form = $(this);
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: form.serialize(),
        beforeSend: (function(){
          $('.submit').css('color', 'transparent');
          $('.submit').addClass('progress-bar progress-bar-striped progress-bar-animated bg-warning');
        }),error: function(XMLHttpRequest, textStatus, errorThrown) {
              $('.error-data').slideDown();
            },success: (function() {
                $('.submit').css('color', '#333');
                $('.submit').removeClass('progress-bar progress-bar-striped progress-bar-animated bg-warning');
                $('.alrt').fadeIn();
        setTimeout(function() {
            form.trigger("reset");
        }, 2000);
    })
})
    return false;
})
})
</script>

Теперь давайте во всем этом разберемся построчно.

  1. При отправке формы запускаем функцию
  2. Вносим все данные в переменную
  3. Открываем Ajax соединение
  4. Указываем тип передачи данных
  5. Ссылка на обработчик
  6. Прогоняем данные через функцию serialize() (преобразование данных в строку)
  7. Запуск функции перед отправкой данных
  8. Делаем текст на кнопке прозрачным
  9. Добавляем кнопке бутстраповские стили от анимированного прогресс-бара
  10. Запуск функции при ошибке отправки данных
  11. Вывод сообщения об ошибке на экран
  12. Запуск функции после успешной отправки
  13. Возвращаем тексту кнопки начальный цвет
  14. Удаляем анимацию
  15. Выводим сообщение об успешной отправке
  16. Запускаем функцию очистки полей формы с интервалом в 2 секунды

Отправка формы без перезагрузки страницы

Отправка данных без перезагрузки страницы — это наиболее простое, что можно сделать на Ajax. Есть и более сложные вещи, например получение данных. Но об этом мы поговорим в другой раз. Если что-то непонятно, пишите в комментариях вопросы. И напоследок предлагаю скачать готовый скрипт отправки формы без перезагрузки страницы.

СКАЧАТЬ

Как отправить письмо с помощью PHP. Функция mail

отправка письма php пример

Всем привет. Рассмотрим варианты отправки и получение писем на PHP. Кстати, я уже публиковал пост на тему создания простой контактной формы для сайта. В этот раз рассмотрим отправку писем на почту более детально, так как в большинстве мой сайт читают новички. Но прежде, чем приступить к написанию скрипта отправки писем на PHP, нам нужна форма, с которой будут собираться данные. Для примера я возьму Bootstrap и сделаю несколько полей, а именно:

  • Для ввода email адреса отправителя
  • Тема сообщения
  • Поле ввода сообщения

Для всех полей, в том числе и кнопки отправки, которую поставим внизу, прописываем атрибут name, которому присваиваем какое-то значение (имя), оно может быть любым, но символичным и желательно писать латиницей. И в итоге должно получиться. что-то вроде этого:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form class="my-form" action="" method="post">
  <small>* Все поля обязательны для заполнения</small>
  <div class="form-group">
    <input type="email" class="form-control" name="email" placeholder="Ваш email" required/>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="theme" placeholder="Тема сообщения" required/>
  </div>
  <div class="form-group">
    <textarea class="form-control" rows="3" name="message" placeholder="Введите сообщение" required></textarea>
  </div>
  <button type="submit" class="btn btn-warning" name="submit">Отправить</button>
</form>

Теперь напишем сам скрипт отправки писем. Это можно сделать прямо в этом файле, но лучше будет вынести обработчик в отдельный. MySql нам не нужен. Для каждого поля нужно создать переменную и присвоить им значения глобального массива POST, то есть то, что мы прописали до этого в атрибутах name. Отправлять будем письмо в HTML формате, поэтому создадим небольшую таблицу, в которую и поместим все данные полей плюс дополнительно напишем откуда была произведена отправка. К примеру со страницы Спасибо за комментарий. В итоге письмо должно прийти на почту в таком виде:

Информация
Откуда Страница спасибо за комментарий
Адресат login@example.com
Тема Тема письма
Сообщение Письмо с сайта

Простой скрипт отправки писем PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
< ?php
$to = "<myemail@example.com>";
$email = $_POST['email'];
$subject = $_POST["theme"];
$page = 'Страница спасибо за комментарий'; 
$message = '
<html>
<body>
<center>	
<table border=1 cellpadding=6 cellspacing=0 width=90% bordercolor="#DBDBDB">
 <tr><td colspan=2 align=center bgcolor="#E4E4E4"><b>Информация</b></td></tr>
 <tr>
  <td><b>Откуда</b></td>
  <td>'.$page.'</td>
 </tr>
 <tr>
  <td><b>Адресат</b></td>
  <td><a href="mailto:'.$email.'">'.$email.'</a></td>
 </tr>
 <tr>
  <td><b>Тема</b></td>
  <td>'.$subject.'</td>
 </tr>
 <tr>
  <td><b>Сообщение</b></td>
  <td>'.$_POST['message'].'</td>
 </tr>
</table>
</center>	
</body>
</html>'; 
$headers  = "Content-type: text/html; charset=utf-8\r\n";
if (!empty($email) && !empty($subject) && !empty($message)) {
$result = mail($to, $subject, $message, $headers);
}	
if ($result) {
	echo '<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Сообщение успешно отправлено!</strong> Вы можете закрыть это сообщение.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>';
}else{
	echo '<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Сообщение не отправлено!</strong> Попробуйте еще раз.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>';
}
?>

Это готовый вариант. Все, что нужно сделать, это поменять на второй строчке email адрес, на который будет приходить письмо, а на пятой — указать откуда была отправка.

c 7 по 31 строки — шаблон HTML письма

32 — указание типа письма и его кодировка

33 — проверка на пустые поля

С 36 строки и до конца идет условие. Если произошла успешная отправка, то будет выведено уведомление об успешной отправке в виде зеленого алерта (бутстрап). В противном случае будет выведено сообщение об ошибке.

 форма отправки писем php

Что делать, если не приходят письма через mail PHP

Для начала проверить все ли правильно вы сделали. Скажу сразу, что с локального сервера никакой отправки вы не увидите. Данные просто записываются в лог-файл. Если вы это делаете на реальном хостинге, то ваш хостер мог заблокировать почтовый модуль из-за подозрения на рассылку спама. Так было у меня несколько раз, когда был взлом и распространили кучу вирусов. Попробуйте написать в поддержку. И как вы уже поняли, этот PHP скрипт не подходит для массовой рассылки, для таких целей используют SMTP, но об этом мы поговорим в другой раз. Так же в будущем рассмотрим способ отправки писем через Ajax, с вложениями (картинки, файлы и пр.) при помощи PHPMailer. И как обычно можете скачать готовое решение по прямой ссылке.

СКАЧАТЬ

Гостевая книга PHP на файлах без MySQL

Гостевая книга на PHP

Здравствуйте. друзья! Представляю вашему вниманию самый простой скрипт гостевой книги, написанный на PHP без использования базы данных MySQL. Чисто на файлах, вернее все данные хранятся в одном текстовом файле .txt. Поймет даже чайник, никакого ООП, только процедурный подход. Достаточно скачать скрипт, установить на хостинг и он уже будет работать. И естественно код будет отрытым и совершенно бесплатным. Чтобы написать сообщение не нужна авторизация, поэтому хакеры не смогут получить к ней доступ, так как взламывать нечего. Предлагаю посмотреть пример и протестировать гостевую книгу.

Демо

Скрипт гостевой книги на PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< ?php
$file = "book.txt";
$data = date('d.m.Y H:i'. ' мск');
$text = $_REQUEST['text'];
$name = $_REQUEST['name'];
if (@$_REQUEST['add']) {
  $f = fopen($file, "a");
  if (@$_REQUEST['text']) fputs($f, '<span class="date-mess">'.$name.' '.$data. " <br />". " <span class='message'>" .$text ."</span>"."\n");
  fclose($f);
  $random = time();    // случайный параметр, чтоб не кешировалось
  Header("Location: //{$_SERVER['SERVER_NAME']}{$_SERVER['SCRIPT_NAME']}?$random#form");
  exit();
}
$gb = @file($file);
if (!$gb) $gb = [];

Как видите, всего 15 строчек кода позволяют волшебству случиться. Теперь добавим форму отправки и цикл вывода записей и гостевой книги. Ну и так как у нас сам скрипт вынесен в отдельный файл, то его необходимо подключить в файле, где будут выводиться публикации.

1
2
3
4
5
6
7
8
9
10
< ?php
include 'book.php';
foreach($gb as $text) {?>
  < ?=($text)?><br /><br />
< ?}?>
<form action="<?=$_SERVER['SCRIPT_NAME']?>" method="POST" id="form">
  <input type="text" name="name" placeholder="Имя" id="name"/>
  <textarea name="text" placeholder="Текст"></textarea><br />
  <input type="submit" name="add" value="Добавить запись"/>
</form>

Эта гостевая книга не использует Ajax, поэтому страница перезагружается после нажатия кнопки отправки сообщения. Соответственно поля очищаются, а для того, чтобы каждый раз не приходилось вводить свое имя заново, можно использовать LocalStorage, что мы и сделаем.

1
2
3
4
5
6
7
<script>
var i2 = document.querySelector('#name');
i2.value = localStorage.getItem('names');
i2.oninput = function() {
  localStorage.setItem('names', i2.value);
}
</script>

Кстати, то ж самое можно сделать с помощью cookie на PHP. Теперь, когда вы покинете страницу после написания сообщения и зайдете спустя какое-то время, то обнаружите, что поле Имя будет по-прежнему заполнено. Это удобно. Хранится будет до тех пор, пока вы не очистите локальное хранилище браузера. Гостевую книгу можно установить в качестве модуля для написания отзывов на одностраничном сайте или в качестве системы комментирования. Но нужно быть внимательным, ведь защиты от ботов здесь никакой нет. Они могут достучаться до формы и выливать огромное количество спама, что приведет к увеличению объема текстового файла. Поэтому за этим нужно следить. на этом все, вы можете свободно скачать скрипт гостевой книги по прямой ссылке.

СКАЧАТЬ

Полет товара в корзину на jQuery

Полет товара в корзину на jQuery

Привет всем! Сегодня у нас на разборе очень классный эффект на jQuery, который очень эффектно смотрится на интернет-магазинах. Не знаю как правильно он называется, но назовем его — анимированный полет товара в корзину. Много раз видел такую штуку на различных сайтах и думал, что для реализации такой фичи нужна специальная библиотека и что все очень сложно. Но на самом деле не очень. Средний уровень JS. У меня получилось совершенно случайно. На досуге изучал jQuery анимацию и вышло нечто похожее, осталось только немного допилить. И вот, что в итоге получилось:

Демо

Так выглядит разметка на странице примера:

1
2
3
4
5
6
<div class="image_block">
 <img src="sell.png" alt="Покупка" class="block" width="100"/>
</div>
<input type="button" value="Добавить в корзину"/>
<img src="trash.png" alt="trash" class="img"/>
<div class="block-2">Товар добавлен! <span>+</span></div>

.image_block — Обертка для блока с товаром
.block — Сам товар
button — Кнопка добавления товара в корзину
.img — Корзина магазина
.block-2 — Всплывающий блок, появляющийся после добавления товара в корзину

CSS код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.block{
    position: absolute;
    top: 50%;
    left: 0;
}
.img{
    position: absolute;
    right: 0;
    top: 0;
}
.block-2 {
    width: 400px;
    height: 100px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 12px -9px #333;
    text-align: center;
    font-family: sans-serif;
    opacity: 0;
}
.block-2 span{
	position: absolute;
	right: 5px;
	top: 0px;
	cursor: pointer;
	transform: rotate(45deg);
	font-size: 20px;
}	
 
input[type="button"] {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background: #2196F3;
    color: #fff;
    box-shadow: 0 4px 5px -2px #363636;
    cursor: pointer;
    outline: none;
}

И самое интересное в jQuery коде, который магическим образом делает красивый полет товара в корзину:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
  $('input:button').click(function(){
    $('.block').clone()  
       .css({'position' : 'absolute', 'z-index' : '100'})  
           .appendTo(".image_block").animate({
		top: $(".img").offset()['top'],
		left: $(".img").offset()['left'],
		opacity: 0,
		width: 40
	},1500, function(){
	  $(this).remove();
	  $('.block-2').show().animate({
	     top: 200,
	     opacity: 1
	});
setTimeout(function(){
  $('.block-2').fadeOut(500)
}, 2000);
});
$('.block-2 span').click(function(){
 $('.block-2').fadeOut(300);
});			
});			
});

2 строка — Запускаем функцию по клику на кнопке
3 строка — клонируем товар
4 — задаем начальные css свойства для нашего клона
5 — вставляем клон в блок .image_block
6, 7 — перемещение товара в корзину, предварительно получив ее координаты
8 — убавляем прозрачность до нуля в конце полета
9 — убавляем ширину
10 — время анимации 1.5 секунды

Дальше идет call back функция, которая запускает появление всплывающего окна, его закрытие через 2 секунды, а так же закрытие по клику на крестик в правом верхнем углу. Эти функции необязательные, их можно не применять. Вот таким образом делается полет товара в корзину. Надеюсь вам было понятно. Если остались вопросы, готов ответить на них в комментариях.
Скачайте пример для более подробного исследования.

СКАЧАТЬ

Скачать русский трафаретный шрифт

Трафарет

Здравствуйте. Когда-то, давным давно, а именно 4 года тому назад, я размещал для скачивания большую коллекцию кириллических шрифтов и в комментариях, некий Паха, хотел увидеть здесь и скачать трафаретный шрифт. Я его очень долго искал и вот теперь готов поделиться совершенно бесплатно.

Мои откровения в телеграме

Помнится, когда я учился в школе, был еще Великий Могучий Советский Союз и среди учащихся были весьма популярны линейки-трафареты. Мы подписывали трафаретными буквами тетради, составляли интересные, как нам казалось, тексты и пытались реализовать свои детские творческие идеи. Время шло, все это стало никому не нужным, а с появлением графических редакторов, таких, как фотошоп, стало проще раскрывать и развивать свои таланты. Я бы не сказал, что трафаретный шрифт кириллица сейчас в тренде, но небольшой спрос на него все же есть. К примеру трафаретный шрифт по Госту 14192-96. Это межгосударственный стандарт маркировки грузов. В моей коллекции он тоже присутствует. не говоря о том, что он идеально подойдет для ретро стилизации работ как в Word, так и Coreldraw и Photoshop, но так же используется там, где применение любого другого шрифта недопустимо.

Трафаретный шрифт русский и английский

Не все трафаретные шрифты универсальны. То есть писать ими можно как по русски, так и английски. Но я выбрал 8 самых выдающихся, на мой взгляд. Один из них наиболее популярный, это шрифт Trafaret Kit. Вот так они выглядят:

Трафаретный шрифт

На этом, пожалуй, все. Теперь вы можете скачать эти красивые трафаретные шрифты. Взамен я вас прошу лишь поставить этой записи лайк, а так же поделиться с друзьями. Возможно кому-то пригодится эта информация. да и вообще, здесь есть много чего полезного.

СКАЧАТЬ