среда, 25 июля 2012 г.

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

Привет, %username%!
В этом примере я покажу тебе, как при помощи аякс можно создать форму, которая при подтверждении данных не будет перезагружать страницу!

JS:
Обратите внимание на dataString
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var gender = $("#gender").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
}); </script>

HTML:
Сама форма:
<form method="post" name="form">
<ul><li>
<input id="name" name="name" type="text" />
</li><li>
<input id="username" name="username" type="text" />
</li><li>
<input id="password" name="password" type="password" />
</li><li>
<select id="gender" name="gender">
<option value="">Пол</option>
<option value="1">Муж</option>
<option value="2">Жен</option>
</select>
</li></ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Ошибка! Введите норм данные</span>
<span class="success" style="display:none"> Регистрация успешно завершена</span>
</div></form>

join.php
Именно этот код будет обрабатываться посредствам aJax. Т.е. при нажатии на кнопку 'submit' будет выполненно следуещее:
if($_POST){
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query("*ваш sql запрос..");
}else { }
?>

вторник, 24 июля 2012 г.

PHP - скачивание файлов (а не открытие)

Поговорим о скачивании файлов. Думаю тема давно заезженная, но все же черкну пару строк.
К примеру, если оставить прямую ссылку на pgf файл, типа:
<a href='files/price1.pdf'>скачать</a>
то в современных браузерах файл сразу же в нем и откроется. В случаях, когда необходимо не открывать файл а качать - Content-type и Content-Disposition вам в помощь. Вот пример кода, для закачки файла, а не открытия:
header('Content-type: application/pdf');
header("Content-Disposition: attachment; filename=\"files/price1.pdf\"");
$x = fread(fopen("files/price1.pdf", "rb"), filesize("files/price1.pdf"));
echo $x;

Создаем пхп файл download.php и заливаем эти строки в него (предварительно, сомособой, изменив их).

Для множества файлов добавляем $_GET переменную id, вытаскиваем по ней название файла из БД и отправляем на загрузку.

Указание media-типа используется для передачи сведений о формате содержимого в HTTP-транзакциях. Клиенты используют media-типы в своих заголовках Accept для того, чтобы сообщить, в каких форматах они предпочитают принимать данные. Серверы используют media-типы в заголовках Content-Type, чтобы сообщить клиенту о том, в каком формате передается прилагаемое содержимое: то ли это HTML, который нужно форматировать, то ли это GIF или JPEG, требующий визуализации, то ли это данные в формате PDP, для которого нужно открывать внешнюю программу просмотра или использовать дополнительное приложение.

Список всех media-типов

четверг, 19 июля 2012 г.

Я просто оставлю это здесь

Совершенно безобидная формулировка на сайте «Роскомнадзора»:
"Список доменных имен, в отношении которых в первой половине июля 2012 г. были направлены требования в иностранные компании о прекращении делегирования прав на их использование или об удалении незаконно размещенной информации."



Вот так вот.. А ведь это только начало

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

четверг, 12 июля 2012 г.

Sublime Text 2

Недавно открыл для себя совершенно замечательный редактор кода - Sublime Text 2

Изначально я подумал что это ещё один веб-редактор, коих сейчас появляется всё больше и больше. Возможно, что-то чуть большее, на движке хромиума.

НО, поискав немного инфы, увидел что там есть поддержка Ruby! Значит, возможно, в это вложили больше сил, чем я думал. Может там есть ещё поддержка и Python? Не долго думая я выкачал бету и…
И очень удивился. Поддерживается куча языков:
ActionScript, ASP, Batch File, C#, C++, CSS, D, Erlang, Go, Graphviz, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Makefile, Markdown, Matlab, Objective-C, OCaml, Perl, PHP, Python, R, Rails, Regular Expressions, Ruby, Scala, ShellScript, SQL, TCL, Text, Textile, User, XML, YAML.


Не берусь утверждать, что это лучший текстовый редактор, но мне он пришёлся очень по душе, и вот почему:
  • Приятный глазу тёмный интерфейс, визуальные эффекты и Distraction Free Mode
  • Панелька с редактируемым текстом в миниатюре. Интересная и действительно удобная находка!
  • Множественное выделение и редактирование
  • Все фичи свойственные большинству продвинутых редакторов: подсветка синтаксиса, форматирование кода, автодополнение и т.д.
  • То чего нет «в коробке» можно скачать из репозитария! Да-да, после совершения простейших манипуляций в Sublime появляется полноценная система управления пакетами, почти как в убунте или дебиане.
  • Если и этого не достаточно — прямо в главном меню есть пункт «New Plugin». Жмем на него и пишем плагин реализующий необходимый нам функционал на языке Python. Об этом и пойдет речь.
  • Стоит это чудо $59 за одну, либо $500 за 10 лицензий. Однако если не хочется, то можно и не платить. Ограничений никаких в этом случае нет, просто изредка будет всплывать напоминание.
  • Кроссплатформенность! Linux, mac, pc.

Горячие клавиши - это отдельная тема!

Самые главные:
ctrl+p show_files - данное сочтание клавиш позволяет открыть/искать по разным файлам проекта, открытым, или находящимся в проекте
ctrl+r - поиск по именам функций, структур, похоже на список функций, "@"
ctrl+g - переход на строчку ":"
ctrl+; - поиск по переменным "#"

Символы "@, :, #" можно комбинировать, пример, вызываем строчку ctrl+p
далее вводим какие-то буквы из имени файла, к примеру у меня открыт файл Default(Linux).sublime-keymap
Для того, чтобы его выбрать достаточно ввести "deup", редактор может понять и гораздо раньше, что вам нужно и подсветит введённые вами буквы в слове. Дальше можно скомбинировать
ctrl+p, затем deup#ctrl, мы перейдём на первое вхождение ctrl, не так интересно, если бы рассматривали файл с кодом, можно было бы найти переменную с именем. Повторюсь, не обязательно помнить дословно, главное хотябы пару букв в нужном порядке :).

ctrl+shift+p - вот это тоже шикарное сочитание клавиш "command_palette", позволяет менять настройки редактора, маленький пример
нажимаем ctrl+shift+p, затем вводим map, и эта команда нам уберёт/покажет миникарту файла.

Выделение столбца - зажатым колесом мыши.

На днях выложу статью посвещенную только горячим клавишам. Инджой!

Загрузка изображений на сайт без перезагрузки страницы

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

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

Использовать скрипт можно для чего угодно: загрузка фоток, файлов или даже видео. Всего пять строк js кода)

Скачать скрипт:

JS- код
$("#photoimg").live('change',function(){}) - "photoimg" это айдишник input- тега, а $('#imageform').ajaxForm() - айдишник формы. используя метод ajaxForm().
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>


index.php
Файл состоит из простого PHP и HTML кода. В $session_id присваевается id пользователя.
include('db.php');
session_start();
$session_id='1'; // эмулируется запись айдишника рользователя в сессии
?>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Загрузка изображения <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>


ajaximage.php
Состоит из PHP- кода. Данный файл вызывается после нажатия на кнопку загрузки. Изображения загружаются в папку "uploads".
<?php
include('db.php');
session_start();
$session_id='1'; // id пользователя
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)){
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)){
if($size<(1024*1024)) { // ограничение размера фотки
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name)) {
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
} else echo "Ошибка!";
} else echo "Максимум 1 MB";
} else echo "Неверный формат файла";
} else echo "Выберите изображение..!";
exit;
}
?>


И напоследок, база данных:
Создадим таблицу пользователей.
CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

Перевод: 20 вещей, которые я должен был знать в 20 лет


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


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


3. Читайте так много, как только можете. Освойте технику быстрого чтения с высоким уровнем запоминания. Emerson Spartz научил меня этому на слёте Summit Series. И если он читает 2-3 книги в неделю, вы вполне можете прочесть одну.


4. Старайтесь постоянно общаться со всеми. Станьте мастером общения. Учитесь находить в человеке то, что вам нравится в нём, а затем обращайтесь к этой его стороне.


5. Не теряйте времени на скромность. Скромность — это вера в то, что ваши эмоции могут стать судьями вашего процесса принятия решения, в то время как верно прямо противоположное.


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


7. Старайтесь максимально часто общаться с людьми, которые старше вас. Лично я встречаюсь с людьми наPodcamp'ах. Мой друг Грег в возрасте 13 лет встретил своего первого работодателя на соседнем кресле в салоне самолёта. Ценность общения со старшими заключается в том, что система принятия решений ваших сверстников не сильно вам поможет. А старшие к тому же знают всё то, что вы узнаете позже — потому стоит спросить у них.


8. Ищите людей круче себя [в том, что вам интересно] и проводите время с ними. Это само по себе важно, но важно и следствие — не пытайтесь быть средненьким в вашей группе, пытайтесь стать лучшим (делайте интересные вещи, будьте честолюбивы, отзывчивы, восприимчивы и т.п.).


9. Со временем вы будете становиться всё более консервативными. Это просто факт. Те, кто окружает вас, создадут нечто вроде пузыря, который будет поддерживать «статус кво» (текущее положение дел). Именно поэтому самые сумасшедшие идеи нужно реализовать СЕЙЧАС. Потом вы станете слишком боязливы. Поверьте мне.


10. Максимально сократите расходы. Это позволит вам создать запас для осуществления той самой сумасшедшей идеи, о которой я говорил выше.


11. Вместо получения статуса с помощью объектов (что даёт только временное его повышение), повышайте его опытом. Другими словами, поездка в Париж — лучший выбор, нежели новый шкаф. Исследования показывают, что такой выбор повышает уровень удовлетворения, получаемого от жизни.


12. Если вы живёте в нужде, решите денежную проблему. Используйте интернет, поскольку он может помочь вам дёшево купить что-то на аукционах. Если сейчас вы живёте от зарплаты до зарплаты, расширьте это период на три недели вместо двух. Затем, когда дела пойдут лучше, можно планировать на месяц, потом на три, шесть и наконец на год вперёд. Цель — достичь момента, когда вы планируете на 5 лет вперёд.


13. Научитесь программировать.


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


15. Научитесь готовить. Это сильно упростит вашу жизнь, питание перестанет быть обыденным делом, превратится из дорогой необходимости в приятное занятие да и сэкономит ваши средства. Я большой фанат Jamie Oliver'а, но если вам нравится кто-то другой — замечательно.


16. Хорошо высыпайтесь. Сон и самостоятельное приготовление пищи помогут вам не набрать лишний вес. Если вы думаете «я отосплюсь в могиле» или «я должен ещё много сделать, нет времени для сна», то я вам скажу так — «не выспавшийся вы НЕ ЭФФЕКТИВНЫ», сокращение времени сна вам не поможет.


17. Заведите себе приложение-записную книжку. Не доверяйте памяти, встроенной в ваш мозг. Не доводите ситуацию до делания того, что «вам кажется» нужно было бы сделать. Доверяйте только записям, я использую RE.minder иAction Method.


18. Поставьте себе большую цель и позвольте случаю помочь вам. Если же вы не обозначите её, то что-то, конечно, случится, однако если вы её поставите, то случится намного больше.


19. Станьте специалистом в чём-то одном. Потратьте 5 лет на дело, а не на шатание вокруг да около. Если вы захотите затем сменить профессию — вперёд. Как я сказал, выберите что-то.


20. Не пытайтесь исправить людей. Лучше найдите тех, кто ещё не испорчен.

вторник, 10 июля 2012 г.

Русскоязычная Wikipedia закрылась в знак протеста



Русскоязычная Wikipedia прекратила работу в знак протеста против поправок к законопроекту, рассматриваемому Госдумой РФ. По мнению участников свободной энциклопедии, «поправки могут стать основой для реальной цензуры».


В официальном заявлении отмечается, что следование вынесенным на обсуждение положениям и формулировкам повлечет создание в России аналога «великого китайского файервола». А вот это точно не к добру!


Новый законопроект предполагает создание «черного списка» сайтов. В него должны войти ресурсы, на которых размещается информация, содержащая опасный для детей контент. Речь идет о детской порнографии, инструкциях по совершению суицида и указаниях по применению наркотиков. Это может привести к тому, например, что некоторые статьи «Википедии» (на упомянутую тематику) могут попасть в черный список.


Министр связи и массовых коммуникаций РФ Николай Никифоров выступил с критикой нового законопроекта, заявив, что он требует доработки. «Идея законопроекта в части защиты детей от нежелательной информации — правильная, но есть проблемы с механизмом реализации, нужно доработать».

пятница, 6 июля 2012 г.

Клавиатурные сокращения с Javascript

Mousetrap — маленькая библиотека (1.4 KB) для обработки горячих клавиш.

// одиночные нажатия
Mousetrap.bind('4', function() { highlight(2); });
Mousetrap.bind("$", function() { highlight(3); }, 'keydown');
Mousetrap.bind('x', function() { highlight(4); }, 'keyup');

// комбинации
Mousetrap.bind('command+shift+K', function() { highlight(7); });
Mousetrap.bind(['command+k', 'ctrl+k'], function() { highlight(8); });

// как gmail
Mousetrap.bind('g i', function() { highlight(11); });
Mousetrap.bind('* a', function() { highlight(12)});

// konami code!   *если вы понимаете о чем я)
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([15, 16, 17]);
});

Как видно, поддерживаются как одиночные нажатия, так и сочетания и клавиатурные комбо.

Работает в Internet Explorer 6+, Safari, Firefox, Chrome (с включенным Vimium не работает).

Пробуйте — craig.is/killing/mice