Как создать свой сайт самому http://guru-css.com/ Сайт о создании сайтов. Видео уроки по созданию, раскрутке и монетизации сайта. Thu, 02 Feb 2017 17:15:06 +0300 en-ru MaxSite CMS (http://max-3000.com/) Copyright 2019, http://guru-css.com/ Как вставить яндекс карту на сайт + настройка http://guru-css.com/page/kak-vstavit-jandeks-kartu-na-sajt-nastrojka http://guru-css.com/page/kak-vstavit-jandeks-kartu-na-sajt-nastrojka Thu, 02 Feb 2017 17:15:06 +0300 Привет друзья. В последнее время при вёрстке лендингов, всё чаще заказчики просят установить на сайт карту, на которой отображалось бы местоположение их фирмы, офиса и чего либо ещё.

Вставить яндекс карту на сайт очень просто, но главный здесь момент - её настройка. Ведь необходимо добавить в нужные места метки, заменить их своими иконками, которые заказчик обязательно попросит. Убрать и добавить какие то кнопки. Изменить поведение (например, что бы карта не масштабировалась колёсиком мыши, или не перематывалась при касании пальцем по сенсорному экрану смартфона).

Читать полностью »

Обсудить]]>
Форма обратной связи для сайта: PHP-обработчик + Ajax + Валидация http://guru-css.com/page/forma-obratnoj-svjazi-dlja-sajta-php-obrabotchik-chast-1 http://guru-css.com/page/forma-obratnoj-svjazi-dlja-sajta-php-obrabotchik-chast-1 Wed, 14 Dec 2016 18:52:38 +0300 Привет ребята. На связи Серёга. Знаю, что давно не писал - дела, дела... Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого - Кротова Романа.

Создавать форму обратной связи для сайта мы будем последовательно. Поэтому эта статья будет разбита на 3 урока.

В первом видео - мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.

Во второй части Рома, покажет Вам как сделать Ajax-загрузку. То есть отправлять данные с формы без перезагрузки странички. Что, согласитесь, весьма удобно и современно.

Ну и в третьей (урок готовится - позже здесь будет ссылка), мы встроим проверку на валидацию. Не средствами браузера, а при помощи специальных скриптов.

Видео 1. Создание формы обратной связи для сайта.

Обращаю внимание! Что бы форма заработала - необходимо, что бы ваш хостинг поддерживал PHP.

Если у вас возникнут вопросы касательно непонятных моментов в написании обработчика формы для отправки писем - не стесняйтесь, задавайте их в комментариях.

Код из урока по созданию формы обратной связи

Вот что получилось в итоге в файле index.php

Напоминаю, что в нём содержится простенькая форма обратной связи. Без оформления и прочих прибамбасов. Что бы не нагружать Вас лишней информацией.

<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <form action="/testform/submit.php" method="POST">
    <input name="email" placeholder="Email">
    <input name="name" placeholder="Имя">
    <input name="phone" placeholder="Телефон">
    <textarea name="message" placeholder="Сообщение"></textarea>
    <input type="submit" value="Отправить сообщение">
  </form>
</body>
</html>

Содержимое файла submit.php:

Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё "гуд" - письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.

if (!empty($_POST['name']) AND !empty($_POST['email']) AND !empty($_POST['message'])) 
{
    $headers = 'From: Кротов Роман
' .
                'Reply-To: drugoisvet@gmail.com
' .
                'X-Mailer: PHP/' . phpversion();
         
    $theme = "Новое сообщение с сайта";             
             
    $letter = "Данные сообщения:";
    $letter .="
";
    $letter .="Имя: ".$_POST['name'];
    $letter .="
Email: ".$_POST['email'];
    $letter .="
Телефон: ".$_POST['phone'];
    $letter .="
Сообщение: ".$_POST['message'];
    
    if (mail("drugoisvet@gmail.com", $theme, $letter, $headers)){
      header("Location: /testform/thankyou.php");
    } else {
      header("Location: /testform");
    }  
              
} else {
  header("Location: /testform");
}

Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

Видео 2. Ajax - отправка письма без перезагрузки страницы.

Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).

Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??

Видео 3. Валидация - проверка формы на правильность заполнения.

Обсудить]]>
Отличный адаптивый слайдер для сайта. http://guru-css.com/page/otlichnyj-adaptivyj-slajder-dlja-sajta http://guru-css.com/page/otlichnyj-adaptivyj-slajder-dlja-sajta Fri, 15 Jul 2016 17:43:10 +0300 Слайдеры всякие нужны, слайдеры всякие важны. Особенно, если применять их с умом.

Привет друзья! Сегодня я хочу подарить вам 3 видео урока, в которых мы познакомимся с замечательным скриптом Slick.js

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

Читать полностью »

Обсудить]]>
WOW.js + Animate.css – скрипт анимации для сайта http://guru-css.com/page/wowjs http://guru-css.com/page/wowjs Tue, 21 Apr 2015 18:44:14 +0300 Сегодня мы будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.

WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.

Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.

Читать полностью »

Обсудить]]>
PHP для начинающих - видеокурс http://guru-css.com/page/php-dlja-nachinajushhih-videokurs http://guru-css.com/page/php-dlja-nachinajushhih-videokurs Sun, 14 Dec 2014 16:57:17 +0300 Добрый день дорогие друзья. Наконец-таки мы подготовили для Вас следующий подарок перед новогодними праздниками. Он интересный, и можно даже сказать - ожидаемый. Так как Вы часто просили меня записать по этой штуке парочку обучающих видео.

И так - встречайте... Видеокурс "PHP для начинающих". Как обычно, если вам "влом" читать мою скучную писанину - мотайте страницу сразу в низ и приступайте к обучению, мы подготовили лучшие видео уроки php для начинающих.

Читать полностью »

Обсудить]]>
Скрипт сокращения ссылок для сайта http://guru-css.com/page/skript-sokrashhenija-ssylok-na-vashem-hostinge http://guru-css.com/page/skript-sokrashhenija-ssylok-na-vashem-hostinge Fri, 16 Aug 2013 15:46:08 +0300 Привет друзья! Сейчас мы поговорим о скрипте сокращения ссылок, который располагается непосредственно у Вас на хостинге!

Как Вам такая идея?wink

В прошлой статье мы поговорили о сервисах сокращения ссылок, выяснили все плюсы и минусы этих сервисов - ну а теперь наступила очередь прокачать по полной Ваш сайт!grin

Ну что же? Тянуть не будем!

Смотрим видео по установке и настройке скрипта сокращения ссылок!

Читать полностью »

Обсудить]]>
Вывеска на ветру - привлекает внимание! http://guru-css.com/page/sginonwind http://guru-css.com/page/sginonwind Fri, 26 Apr 2013 13:55:32 +0300 Привет дорогие друзья hello Недавно бродил по просторам интернета, и наткнулся на один сайт.

Сайт как сайт… Но он привлек мое внимание одним интересным элементом. В его шапке болталась красивая табличка. При наведении на нее – она раскачивалась еще больше surprised

В общем – мне стало интересно. И я решил выдрать ее с сайта. Разложить все по полочкам. А затем уже – поделиться своими открытиями с вами, мои дорогие друзья.

Что у меня получилось – можете посмотреть нажав на кнопку ниже:

Читать полностью »

Обсудить]]>