Обо мне

4X_Pro
4X_Pro
Живу в Сети с 25 ноября 2000 г.
Веду блог с 8 января 2011 г.

Контакты

Немного рекламы

Рубрика: "Web-программирование" - Xpro.Su: заметки о жизни в Интернете

Рубрика: "Web-программирование"

Yaml Form Generator -- простое и быстро создание форм для PHP

Web-программирование Оставить отзыв »

В прошлом году, работая над одним проектом, задумался, сколько же времени уходит на то, чтобы сделать качественные формы: нужно сверстать форму на HTML, сделать валидацию формы на стороне клиента, а потом и на стороне сервера, а для некоторых типов данных выполнить еще ряд действий: преобразовать дату в Unix Timestamp и обратно, обработать ситуацию "снятый checkbox", проверить, что злоумышленник не добавил каких-то своих полей. Поскольку все эти действия весьма рутинны, и я задумался над тем, можно ли их как-то автоматизировать, причем так, чтобы форма целиком и полностью описывалась в одном месте.

Читать далее »

Безопасное скачивание с сервера с сохранением имен файлов

Web-программирование 4 отзывов »

Занимаюсь сейчас разработкой форумного движка и столкнулся с необходимостью сделать возможность прикреплять к сообщениям файлы. Сама закачка файлов на сервер тривиальна, но нужно, во-первых, сделать так, чтобы при скачивании предлагалось то же самое имя файла, под которым его загрузили, во-вторых, чтобы файл могли скачать только те, у кого есть доступ в соответствующий раздел, то есть нельзя было бы угадать его по номеру.

Наиболее очевидный вариант -- написать PHP-скрипт, который проверял бы ключ и потом отдавал файл через какой-нибудь fpassthorugh, мне не нравился: во-первых, долго писать обработку частичной докачки, во-вторых, есть шансы превысить лимиты по времени выполнения и памяти. Стал искать способ, как обойтись средствами самого Apache. В принципе, это было бы не особо сложно, если бы не необходимость выдавать файлы под теми же именами, под которыми их и закачивали. Очевидно, что хранить файлы на сервере под этими именами, неприемлемо: во-первых, пользователи часто используют имена файлов кириллицей, что может породить массу проблем при не настроенной локали и переносе сайта с одного сервера на другой, во-вторых, возможны проблемы с безопасностью.

И оказалось, что эту проблему очень легко можно решить следующим образом: при закачке для каждого файла генерируется номер, под которым он сохраняется в базу, и уникальный ключ (MD5-хеш от ряда параметров и случайного числа). Файл сохраняется под именем номер-ключ.dat, и на него дается ссылка вот такого вида: /files/номер-ключ/имя_файла_при_загрузке. А дальше с помощью mod_rewrite задается следующее правило:

RewriteRule ^downloads/(\d+\-[0-9a-z]+)/.+$ downloads/$1.dat [L]

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

Полезные советы при работе над сайтами

Web-программирование, Личная эффективность Оставить отзыв »
Давно накапливаются мелкие советы по увеличению производительности при работе над сайтами при верстке или HTML-программировании, и вот наконец-то решил собрать их в одно сообщение.
  1. Если вы часто редактируете по FTP какой-либо сайт, не поленитесь прописать в настройках FTP-клиента тот каталог, в котором находятся непосредственно файлы сайта в качестве remote directory (чаще всего таковым бывает public_html или www). В этом случае при подключении к серверу вы сразу будете оказываться в нем, а не в корне, как это бывает по умолчанию, и сэкономите пару секунд.
  2. Если вы используете Filezilla, то в нем есть очень удобная опция Use syncronized browsing (задается в настройках соединения на вкладке Advanced), которая приводит к одновременной смене локального каталога и каталога на сервере. Если правильно настроить local и remote directory, использование этой опции упростит перемещение по каталогам и синхронизацию файлов.
  3. Также для удобства выгрузки исправленных файлов на сайт полезно поставить сортировку по времени последнего изменения, в этом случае те файлы, которые были изменены и должны быть выгружены на сайт, окажутся в начале списка.
  4. При верстке под Linux очень удобно использовать два рабочих стола: на одном помещается броузер, а на другом -- HTML-редактор, и переключаться между ними по быстрым клавишам (в LXDE это Alt+Shift+Left и Alt+Shift+Right соответственно). В отличие от Alt+Tab, где лишнее нажатие или переключение в другую программу меняет порядок окон, рабочие столы всегда остаются в одном и том же порядке. В Windows тоже возможно сделать несколько виртуальных рабочих столов, но это потребует дополнительного программного обеспечения.
  5. В Google Chrome есть функция "Просмотр кода элемента" (для этого нужно щелкнуть по любому элементу правой кнопкой и выбрать одноименный пункт в меню). Откроется просмотр структуры HTML, в котором можно менять свойства CSS "на ходу", без перезагрузки страницы. Это очень удобно при подборе margin, padding, top, left и тому подобных свойств: не нужно каждый раз переключаться в HTML-редактор, сохранять файл и обновлять страницу, чтобы посмотреть, что получилось, а можно сначала попробовать разные значения, выбрать их, а потом уже исправить CSS-файл.
  6. Почти все современные двухпанельные файл-менеджеры наподобие Total Commander поддерживают работу с несколькими вкладками. И этим можно пользоваться при внесении правок в сайт со сложной структурой: на одной вкладке открывается каталог с кодом, на другой -- с CSS или JavaScript, на третьей -- с шаблонами. Это оказывается гораздо удобнее, чем постоянно ходить из каталога в каталог. (Ну или как вариант -- поставить программистский редактор с поддержкой проектов, например, jEdit с соответствующим plugin).
  7. Не лишним будет либо освоить жесты мышью, особенно часто требуются "Назад" и "Обновить", так как при верстке они требуются чаще всего. Обычно "Назад" -- это движение влево, а "Обновить" -- вверх-вниз, оба жеста выполняются при зажатой правой кнопке мыши. В Opera эти жесты встроенные, для других броузеров придется ставить специальные расширения, например, Smooth Gestures. Другой вариант -- купить пятикнопочную мышь и переназначить дополнительные кнопки с помощью специальной программы.
  8. Также хорошей идеей будет расположить Панель задач не снизу, а слева, особенно на мониторах с соотношением сторон 16:9 и 16:10. Во-первых, это даст больше места по вертикали (в том числе и для просмотра Web-страниц), во-вторых, сократится путь курсора мыши для переключения между окнами, а в сами кнопки окон будет легче попасть.
Вот и все на сегодня, надеюсь эти советы помогут при работе!

Checkbox большого размера

Web-программирование 1 отзыв »

Недавно потребовалось сверстать страницу, на которой у элемента checkbox был бы увеличен размер. Варианты с рисованным checkbox, который переключался бы с помощью JavaScript для меня изначально были неприемлемы Сначала пытался воздействовать на него с помощью font-size, line-height, padding и border, но ничего из перечисленного не помогло. Потом обнаружил, что свойства height и width, выставленные одновременно, позволяют добиться желаемого. Но увы, оказалось, что только в Google Chrome. В результате пришлось воспользоваться воспользоваться свойством transform из CSS 3: <input type="checkbox" style="transform: scale(2)" />, но при этом сам checkbox становится размытым.

Поэтому тем, кому валидность CSS не критична, посоветовал бы делать несколько иначе:

.bigbox { -ms-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); height: 28px; width: 28px }

Такой подход позволит отрисовывать checkbox в Google Chrome нужного размера, а в остальных броузерах -- масштабировать с размытием.

Неочевидные особенности сравнения в PHP

Web-программирование Оставить отзыв »

Однажды делал постраничный вывод сообщений в форуме. Делался он следующим образом: через параметр запроса start передавалось смещение от начала темы, или all, если нужно было показать всю тему, или параметр p, если требовалось показать конкретное сообщение. При этом при передаче p переменная start бралась не из запроса, а рассчитывалась на основе смещения этого сообщения от начала темы минус несколько сообщений. При этом если оно было в начале, то start мог получиться отрицательным, и для этого случая делалась дополнительная проверка с присвоением sstart=0. Далее у меня в коде была проверка if ($start!='all'), по которой к SQL-запросу добавлялась LIMIT-часть. Но обнаружилось, что в некоторых ситуациях LIMIT-часть не добавляется, и вся тема выводится целиком (что серьезно нагружало сервер, если тема была длинная).

Стал разбираться, в чем дело, и обнаружилось, что ошибка проявляется тогда, когда в start присваивается 0 в результате расчетов. Происходило следующее: в результате проверки в левой части сравнения оказывалась переменная типа integer, и правая часть приводилась также к integer, в результате чего из 'all' получался ноль, и условие оказывалось ложным (то есть по сути проверялось 0!=0). Избавиться от этого оказалось очень просто: заменить тип сравнения на сравнение без приведения типов, т.е. $startl!=='all', после чего все заработало.

А вывод простой: нужно всегда использовать сравнение без приведения типа (т.е. === или !===), если нет явных причин поступать иначе. Оно и выполняется быстрее, и позволяет избежать подобных ошибок (которые, кстати, могут сказаться и на безопасности.)

Особенности обработчика отправки формы при использовании addEventListener

Web-программирование, Сайтостроительство Оставить отзыв »

Чтобы провести проверку формы перед ее отправкой, нужно повесить обработчик на событие onsubmit для тега форм и вернуть false в случае ошибки. Если делать это прямо в HTML-коде (т.е. <form action="" onsubmit="">) или с помощью свойства onsubmit через JavaScript, то все работает без проблем. Но если попытаться сделать то же самое через addEventListener, то без дополнительных мер форма отправляется в любом случае.

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

Читать далее »

Асинхронная загрузка виджетов ВКонтакте

Web-программирование, Ускорение сайтов 17 отзывов »

Как известно, ВКонтакте есть несколько полезных виджетов, которые можно разместить на своем сайте, например, виджет группы или комментариев. Но есть у них недостаток: они вставляются обычным тегом script и подгружаются сервера ВКонтакте, что ощутимо тормозит загрузку сайта целиком, а если вдруг у пользователя по каким-то причинам заблокирован домен vk.com, то он может и вообще не дождаться загрузки сайта. В результате я решил сделать загрузку асинхронной. Первое, что пришло в голову -- это использовать свойство defer у тега script, но оказалось, что в этом случае ничего не работает вообще. В результате поступил иначе:

Читать далее »

Авторизация через социальные сети или Немного о Loginza

Web-программирование, Инструменты веб-мастера 1 отзыв »

Некоторое время назад задумал сделать один проект по соционике, но сильно мешала мысль "опять надо делать авторизацию, регистрацию, восстановление пароля и т.д.", тем более что проект был небольшим и эта часть получалась самой трудоемкой. Решил пойти другим путем: что если отказаться от собственной регистрации вообще, а использовать только авторизацию через социальные сети. Безуспешно попытавшись разобраться с авторизацией ВКонтакте (документация там просто ужасна), стал рассматривать другие варианты и наткнулся на сервис Loginza, который позволяет делать авторизацию через самые разные социальные Сети: не только ВКонтакте, Facebook и My.Mail.Ru, но и еще более десятка.

Стал разбираться в ее API, и оказалось, что все до предельного просто:

Читать далее »

Отладка JavaScript и объект console

Web-программирование Оставить отзыв »

Раньше я, как и многие Web-программисты, при отладке JavaScript использовал функцию alert для того, чтобы посмотреть значение той или иной переменной. Однако необходимость постоянно нажимать кнопку Ok и невозможность вывести сложный объект без написания дополнительного кода приводили к тому, что отладка шла медленно и вызывала немало раздражения. Стал искать другие решения, и выяснил что в современных броузерах есть вывод данных в отладочную консоль броузера с помощью объекта console.

Читать далее »

"Умное" сжатие GZIP

Администрирование, Web-программирование Оставить отзыв »

Как известно, в PHP есть возможность сжимать с помощью GZIP отдаваемые пользователю данные. С одной стороны, оно позволяет сэкономить траффик и увеличить скорость загрузки, что крайне важно для пользователей, подключенных через GPRS или обычные аналоговые модемы, так как сайты сейчас становятся по объему все больше и больше.  С другой — увеличивает нагрузку на сервер: на сжатие требуется дополнительное процессорное время. Кроме того, для пользователей с быстрыми каналами связи эффект от сжатия оказывается настолько незначительным, что время на упаковку/распаковку данных может оказаться вполне сопоставимым со временем, сэкономленным на передаче.

Сразу возникает мысль: а что если как-то определить, как подключен пользователь, и включать сжатие только в тех случаях, если соединение медленное.

Читать далее »