Как сделать кнопку «наверх» для сайта

Приветствую вас, друзья мои. Сейчас я освящу наверное один из самых популярных вопросов в области «быстрых рецептов» на html/css/js. А именно — создание кнопки «наверх», которая так часто встречается на самых различных ресурсах. И как обычно, пишу я это не просто так, а исходя из своего личного опыта, ибо вы можете заметить у меня такую кнопку в нижней правой части экрана.

Создание кнопки, как и любого активного элемента на веб-странице, делится на три основные части. Необходимо написать html код самой кнопки, навести марафет с помощью css стилей и оживить кнопку с помощью js кода. О каждом этапе в подробностях, поехали!

HTML код кнопки «наверх»

Начать логичнее всего непосредственно с самой кнопки. Существует огромное количество вариантов, но я расскажу о самом визуально красивом способе нарисовать стрелочку на веб-странице — с помощью набора иконок Font Awesome.

читать далее «Как сделать кнопку «наверх» для сайта»

Загрузка файла через форму на PHP

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

Весь процесс загрузки файла на сервер происходит следующим образом. Нарисованная нами форма отправляет файлик на сервер через POST. Сервер сохраняет файл во временном хранилище, запускает скрипт, который после некоторых манипуляций(например, различные проверки безопасности) копирует файл из временного хранилища в постоянное. На деле, реализовать это еще проще, чем рассказать. Поэтому сразу приступим, и начнем с создания формы.

HTML форма для загрузки файла

Первым делом построим самую простую форму с двумя полями: специальное поле для загрузки файла(input type=file), и кнопка «отправить». Методом отправки данных будет POST. Кроме того, необходимо указать способ кодирования данных при отправке, с помощью атрибута ecntype.

читать далее «Загрузка файла через форму на PHP»

Установка капчи для комментариев WordPress без плагинов

Доброго времени суток, дорогие друзья! Сессия закончилась, впереди небольшие каникулы. Жаль, но не успею я и духа перевести, как начнется следующий семестр. Не смотря на то, что времени заниматься сайтом практически не было, на свет недавно появился мой собственноручно написанный калькулятор шифра Цезаря, реализованный по алгоритму из одноименной статьи. Причин для его создания было две: невероятная популярность шифра Цезаря в интернете, и отсутствие калькуляторов с функцией взлома методом частотного анализа. Поэтому я решил внести свою лепту в эту историю.

Конец предыстории, вернемся к делу. Причиной написания этой статьи послужил ужасный спам в комментариях! За неделю мне приходилось удалять около сотни предложений купить всякий мусор. Логично, что я задумался о действительно серьезной капче на сайт, ставить ввод циферок очень не хотелось, кому нужно вводить циферки в 2016 году?

В голову пришла идея попробовать гугловскую «ReCaptcha». Подробнее о том, что это такое, и общий принцип ее установки вы можете прочитать в моей прошлой статье. А сейчас я разберу конкретный пример внедрения капчи для комментариев в WordPressе.

Весь процесс установки можно логически разбить на три шага.

  1. Добавить капчу к форме комментариев в HTML коде;
  2. Написать логику проверки капчи;
  3. Заставить WordPress сверять капчу каждый раз при добавлении комментария.

Пойдем по порядку.

читать далее "Установка капчи для комментариев WordPress без плагинов"

Установка ReCaptcha v2.0 на любой сайт

ReCaptcha logoДоброго времени суток, друзья! В этой статье я постараюсь подробно рассказать о процессе установки и настройки самой лучшей капчи от Google. Почему самой лучшей? Потому что к черту ввод циферок с картинок и прочие ужасы, спасибо большое нашему «старшему брату» за новую технологию. Клик, и ты не робот.

Речь пойдет о второй, улучшенной версии ReCaptcha. После обновления значительно упростился процесс проверки на стороне сервера, больше не нужно подключать целую библиотеку, разбираться в ней и прочее. Единственная сложность в том, что мне показалась недостаточной инструкция с официального сайта, поэтому пришлось немного поколдовать. Но в итоге я понял принцип установки и готов им поделиться.

читать далее «Установка ReCaptcha v2.0 на любой сайт»

Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript

Доброго времени суток. На этот раз еще немножечко про JavaScript. Появилась необходимость обновлять содержимое блока <div> по нажатию на кнопку, без перезагрузки страницы, чтобы не свести пользователя с ума. Благодаря этой небольшой заметке можно раз и навсегда запомнить, как такое реализовать.

Обновлять можно не только <div>, но и <span>, <td> и любой другой блочный элемент на странице. Все зависит от вашей фантазии. Перейдем сразу к примерам.

Пример обновления содержимого страницы без перезагрузки

Прежде всего, нам нужен блочный элемент. Пусть это будет <div>, создадим его на странице и присвоим ему уникальный идентификатор, по которому его узнает jQuery.

<div id="block">
    <p>Hello World</p>
</div>

читать далее «Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript»