Установка LAMP (Linux + Apache + mySQL + PHP)
Создан | Февраль 5, 2010 | Нет комментариев
Натолкнулся вчера, разбирая вещи, на диск с Ubuntu 9.10. И решил попробовать установить. Ах, да, этот диск мне достался бесплатно, пришлось лишь подождать после регистрации тут. Доставка не заставила себя долго ждать, и, примерно, через пару недель, я стал счастливым обладателем дисков, жаль только без наклеек, раньше и наклейки были в комплекте поставки.
Прежде всего надо было выделить место на NTFS разделе, эту проблему я решил благодаря программе Partition Magic, «отрезав» кусок в 20Гб от почти свободного диска. С установкой проблем не было никаких: засунул диск, перезагрузился, выбрал режим запуска без установки, чтобы иметь возможность лазать по интернету, пока устанавливается Ubuntu, что очень удобно. Хоть и процесс установки занимает на моем компьютере не более 20 минут, но и это время не хотелось терять впустую.
картинка около 2х МБ
Перезагрузившись после установки, я увидел рабочий стол, готовый к работе. И мне почему-то показалась картинка более насыщенной и глаза, глядя на нее, стали меньше уставать, может просто показалось.
Для того, чтобы начать установку сервера, мне просто необходима была музыка, без нее практически ничего не делается в моей жизни. Для этого мне стоило набрать в консоли (Приложения – Стандартные – Терминал)
Вводим пароль, указанный нами при установке, который не отображается, и нажимаем Enter. Установщик покажет что именно он будет устанавливать, это около 10Мб, плеер и сопутствующий видео-аудио-кодеки.
А теперь перейдем к самому интересному, непосредственной установке LAMP (под уже играющую музыку).
Следующей буквой в акрониме LAMP после Linux, является Apache, который мы поставим всего лишь одной командой, написанной все в той же консоли.
И после нескольких секунд/минут/часов/дней у нас будет установлен веб-сервер и запущен, работу которого можно будет посмотреть, набрав в адресной строке браузера http://localhost. Если вы увидите надпись, отличную от ошибки, значит, все идет как надо и мы продолжаем дальше. LAMP готово.
Попробуем зачеркнуть еще одну букву, установим PHP, как модуль Apache.
Вроде установился, но надо проверить. Для этого сначала перезапустим веб-сервер
Чтобы Apache смог понять, что есть оказывается и PHP еще.
Теперь создадим какой-нибудь тестовый скрипт на PHP, чтобы проверить работоспособность нашего сервера и его php-модуля.
в папку, где расположен веб-сервер, может писать только Root, оттого и команда sudo. Напишем там
echo "Вроде работает пока";
?>
И проверим работает ли на самом деле, написав в адресной строке http://localhost/test.php Если вы увидели наш текст, то все в порядке, если вы увидели крякозябры, которые превращаются в текст сменой кодировки, то тоже все в порядке и мы идем дальше.
LAMP
Осталась буква M.
В консоли, так уже полюбившейся нам, пишем
и процесс установки mySQL-сервера начнется, в процессе нас попросят ввести пароль от сервера и повторить его. На этом, можно сказать, установка закончена, осталось только установить несколько полезностей и научить PHP работать с mySQL.
Установка полезностей.
Здесь надо не забыть пароль, который мы указывали в предыдущем шаге, чтобы ввести его тут. Допишем в файл /etc/apache2/apache2.conf строчку
.
Теперь отредактируем файл настроек PHP.
и допишем в конец
Вот и все. Спасибо за внимание
jQuery для начинающих часть 3 (AJAX)
Создан | Январь 30, 2010 | Нет комментариев
Приветствую вас, люди, идущие в ногу в техническим прогрессом, использующие на своих веб-проектах AJAX или только собирающиеся это делать.
Этот акроним (А именно Asynchronous Javascript and XML) появился в 2005 году, хотя сама технология существовала уже несколько лет, с момента, когда корпорация Microsoft в 1998 году реализовала возможность выполнять асинхронные запрсы в обзод iframe’ов. Асинхронный значит, что запросы к серверу происходят в фоновом режиме, что не мешает нам дальше взаимодействовать со страницей. Что довольно приятно отражается на юзабилити сайта – ведь не хочется, чтобы страница обновлялась после каждого комментария или ответа на голосование. И конечно же во всем есть и плохая, и хорошая сторона. Не очень хорошей стороной являться будет недоступность асинхронно подгружаемого контента для поисковых систем, но мы этим злоупотреблять не будем.
Не используя на своих сайтах jQuery, нам бы пришлось намного дольше проектировать код на JavaScript. Во-первых, нам бы пришлось создать XHR – объект (XMLHttpRequest), учитывая особенности всех современных веб-браузеров, по большей части конечно же всех любимыми нами продуктов Microsoft’а. Одно создание этого объекта займет несколько строк. Посмотрите на пример.
if (window.XMLHttpRequest) {
xhr_obj = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr_obj = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("AJAX не поддерживается");
}
Мы не будем рассматривать AJAX на низком уровне, ограничимся лишь AJAX’ом на jQuery. Что вы заметите немногим позже в разы легче и нагляднее. Начнем как всегда с описание команд, а дальше разберем все подробнее на примерах.
Первой командой в наборе будет load, которая подгружает с сервера данные и замещает обернутый набор.
Синтаксис ее таков load(url, parameters, callback)
где url – адрес, которому направляется запрос
parameters – параметры, которые передаются, если заданы, методом POST по url-адресу
callback – функция, которая будет вызвана после завершения AJAX-запроса, в которую передаются текст ответа, статус и рассмотренный нами чуть выше объект XMLHttpRequest.
Небольшой пример на эту команду.
alert('данные загружены');
});
Данные пример отправляет асинхронный запрос серверу, ответом от него заменяет текст первого абзаца на нашей странице, по завершении мы получаем сообщение о том, что данные загружены. В этом примере мы не передаем никаких параметров скрипту, этим мы займемся немного позже. Хотя этот скрипт уже можно использовать для показа произвольной новости.
Еще одно применение данной команды можно найти при показе информации о стране, которую мы будем выбирать из выпадающего списка и отображать полезную информацию.
$('#country').change(function() {
var Country = $(this).val();
$('div').load('country.php?country=' + country);
})
.change();
});
После выбора из списка страны мы отправляем нашему скрипту country.php выбранную страну и получаем от него описание, которое мы выводим в div.
Этот country.php может выглядеть примерно так.
$a = $_GET['country'];
switch ($a) {
case 'france':
echo 'Столица — город Париж. Название страны происходит по этнониму германского племени франков, хотя большинство населения Франции имеет смешанное галло-романское происхождение и говорит на языке романской группы. Население — 64,5 млн человек, в том числе свыше 90 % — граждане Франции. Верующие — преимущественно католики (свыше 76 %). Законодательный орган — двухпалатный парламент (Сенат и Национальное собрание). Административно-территориальное деление: 26 регионов (22 в метрополии и 4 заморских региона), включающих 100 департаментов (96 в метрополии и 4 заморских департамента).';
break;
case 'england':
echo 'Англия - наиболее крупная историческая и административная часть Соединённого Королевства Великобритании и Северной Ирландии, официально страна (country) в его составе, занимающая юго-восточную часть большого острова Великобритания, известного как англ. mainland. Население Англии составляет 83 % от общего числа населения Великобритании.';
break;
case 'usa':
echo 'Соединённые Штаты Америки, США (англ. The United States of America, USA, исп. Estados Unidos de America) — государство в Северной Америке. Занимает четвёртое место в мире по территории (9 518 900 км, 9 522 057 км) и третье место по численности населения (307 млн. человек). Столица — город Вашингтон.';
break;
case 'china':
echo 'Китайская Народная Республика буквально: «срединное государство»; о происхождении русского названия см. Китай (этимология)) — государство в Восточной Азии, крупнейшее по численности населения государство мира (свыше 1,3 млрд, большинство населения — этнические китайцы, самоназвание — хань); занимает третье место в мире по территории, уступая России и Канаде. Со времени провозглашения Китайской Народной Республики в 1949 правящей партией является Коммунистическая партия Китая (КПК). Существуют также еще восемь зарегистрированных политических партий, тесно связанных с КПК.';
break;
case 'russia':
echo 'Россия — государство, расположенное в Евразии (восточной части Европы и в северной части Азии). Крупнейшее государство мира (17 075 400 км или 11,46 % (1/9) площади всей суши Земли, или 12,65 % (1/8) заселённой человеком суши, что почти вдвое больше, чем у занимающей второе место Канады). Население — 141 903 979 человек (на 1 января 2009 года, по данным Росстата), причём 79,3 % жителей проживает в Европейской части России (Центральный федеральный округ, Южный федеральный округ, Северо-Кавказский федеральный округ, Северо-западный федеральный округ, Приволжский федеральный округ), в Азиатской части России (Сибирский, Дальневосточный федеральный округа и Тюменская область, административно отнесённая к Уральскому федеральному округу) — 20,7 %. В настоящее время Россия занимает девятое место в мире по этому показателю. Большая часть населения проживает в городах — 73,1 %. Русские составляют 79,83 % населения страны. Государственный язык России — русский.';
break;
case 'kazakhstan':
echo 'Республика Казахстан или Казахстан — государство, находящееся в Центральной Азии и Восточной Европе. Граничит на севере и западе с Россией, на востоке — с Китаем, на юге — с Киргизией, Узбекистаном и Туркменией. Омывается водами внутриконтинентальных Каспийского и Аральского морей.';
break;
case 'ethiopia':
echo 'Эфиопия, официальное название Федеративная Демократ?ческая Республика Эфиопия — страна в Восточной Африке, не имеющая выхода к морю (после отделения Эритреи 24 мая 1993 г.); Вторая (после Нигерии) по численности населения страна в Африке, граничит с Эритреей на севере, Джибути на северо-востоке, Сомали и непризнанной Сомалиленд на востоке, Кенией на юге и с Суданом на западе. Эфиопия — старейшая христианская страна в Африке и одно из старейших государств в мире. В 1936—1941 являлась частью колонии Итальянская Восточная Африка.';
break;
}
?>
Работающий пример вы можете посмотреть тут.
Продолжение очень скоро проследует…
метки: AJAX > jQuery для начинающих
Вопрос-ответ (FAQ) на jQuery
Создан | Январь 29, 2010 | Нет комментариев
Заказчику очень срочно понадобился на сайт компонент «Вопрос-ответ» и единственным его пожеланием было раскрываемость ответов при клике на вопрос. Недолго думая, пришла в голову идея использовать Definition List (dl), я считаю, что он как никто другой подходит для этих нужд, да и классов не надо придумывать специфических.
Не буду лить много воды, расскажу лишь как это все работает и приведу пример.
Первое, что нужно было сделать это разметка html.
Ну тут ничего сложного
<dt>Вопрос1</dt>
<dd>Ответ на поставленный выше вопрос под номер 1,
который может содержать достаточно много информации,
порой и несколько абзацев, порой и несколько страниц</dd>
<dt>Вопрос2</dt>
<dd>и так далее...</dd>
</dl>
А теперь непосредственно сам код jQuery, который будет отображать ответ на соответствующий вопрос и скрывать все остальные ответы, чтобы не захламлять рабочее пространство.
$('dl dd').hide();
$('dl dt').click(function() {
$('dl dd').slideUp('fast');
$(this).next().slideDown('slow');
});
});
Я предпочел скрывать ответы в скрипте для того, чтобы люди с выключенным JavaScript, могли тоже прочесть вопросы и ответы на них.
выбирает следующий элемент, находящийся в том же иерархическом положении относительно дерева DOM, что собственно нам и нужно.
Вы можете с легкостью изменить эффекты, с которыми ответы появляются и исчезают. Работающий пример вы можете посмотреть, пройдя по ссылке.
метки: jQuery > jQuery для начинающих > вопрос-ответ
Новый год и новые задумки
Создан | Январь 11, 2010 | Нет комментариев
Заметки Вредного в Новом году
Привет, Великий народ!
Вот и подошли к концу празднования Нового года и Рождества, теперь смело можно со свежими силами приступать к работе. Развивать свое маленькое, но растущее детище. Задумок по развитию очень много. Но об этом чуть позже.
Сейчас же я хочу поздравить вас (поздно ведь лучше, чем никогда) с Новым годом, который открывает перед нами новые возможности, ставит перед нами новые цели. Вот и я хочу, чтобы все, что вы задумали сбылось и побольше удачи вам в этом году и во всех ваших начинаниях и продолжаниях.
Что было сделано мною за недолгое от силы трехмесячное существование моего блога? Написано несколько десятков заметок: про jQuery, JavaScript, HTML, CSS и просто на отвлеченные темы; было оставлено несколько десятков вами комментариев, которые читать очень приятно. Спасибо вам за критику, за поддержку, за вопросы, которые вы задаете – отвечать на них мне в удовольствие.
Читайте, оставляйте комментарии и дальше, предлагайте темы для дальнейших заметок.
Еще блог ждет в совсем ближайшем будущем полный редизайн, хочется чего-нибудь своего, а не пользоваться кем-то созданной темой, хочется уникальности и неповторимости, о чем я незамедлительно напишу вам и еще много заметок, касающихся множества аспектов блогостроения на движке Wordpress. Также мы поговорим с вами о продвижении и внутренней оптимизации и шаблоностроении.
Да и в поисковых системах блог потихоньку начинает расти, подарком на Новый год от Google мне был PR 1, чему я до сих пор очень рад. В планы на этот год входит, помимо написания интересных статей о веб-разаботке, jQuery, верстке, поднятие тИЦ до 100 хотя бы и Google PR до 3. И после этого начать блог монетизировать, выйти на доход $300/месяц, чтобы профинансировать остальные свои проекты, коих в задумке очень много и я обязательно ими поделюсь с вами.
Удачи вам в Новом году и всех благ!
Ваш Вредный.
метки: jQuery > Новый год
Закругленные углы (метод раздвижных дверей)
Создан | Декабрь 25, 2009 | 3
Очень часто верстая сайт, заказчик хочет, чтобы на нем были «резиновые» блоки с закругленными углами. Этот блок выглядит очень неплохо и в реализации не так это сложно, как может показаться на первый взгляд.
Итак, наша задача: сделать динамичный блок с закругленными углами на CSS. Для реализации этого нам потребуется 4 картинки. Мы можем взять одну и нарезать ее в Photoshop, как показано на картинке ниже.
Картинку я сделал размером 800 на 600 пикселей и вот как я ее порезал
В результате чего у меня получилось 4 картинки, которые сейчас мы и будем использовать.
Подготовим html-файл примерно такого содержания, css я засунул в тот же файл, чтобы было удобнее.
Посмотреть на пример можно в исходном коде по ссылке закругленные углы css.
Если вы внимательно посмотрите на код, то увидите в разметке лишние элементы, которые непосредственно нам помогают вставить фоновые изображения. При изменении размеров окна web-браузера, фоновые изображения остаются в соответствующих углах, что нам и нужно.
Если у вас возникают вопросы, то смело их задавайте в комментариях, с удовольствием на них отвечу. Всего вам доброго и удачи во всех начинаниях.
jQuery для начинающих часть 2
Создан | Декабрь 20, 2009 | Нет комментариев
jQuery для начинающих
Доброго времени суток, уважаемые читатели этого цикла статей или просто забредшие на огонек, надеюсь, и третья по счету часть вам пригодится. С момента написания второго урока произошли небольшие изменение у меня в работе: я стал больше уделять времени при создании сайтов библиотеке jQuery, отдавая предпочтение красоте и ненавязчивому JavaScript. Наряду с уроками я буду рассказывать вам об интересных примерах, с которыми мне приходится сталкиваться, надеюсь, что и вам они пригодятся и вы почерпнете из них много полезного.
Оперировать с наборами и выбирать нужные нам элементы, мы вроде немного научились, но нужно закрепить все на практике. По ходу уроков мы будем узнавать что-то новое и сразу находить этому практическое применение, с легкостью вы потом сможете внедрить это новое у себя на сайте.
А сейчас ближе к теме. Выбирать элементы и производить с ними элементарные действия подчас не все, что нужно нам, чтобы получить полный контроль над DOM (Document Object Element), над иерархической структурой страницы. Расширить наши возможности позволит реагировать на события, происходящие на странице, «навешивать» свои обработчики с применением jQuery.
Если вы программировали на JavaScript, то вам должно быть известно, как муторно добавлять события на определенные элементы. Приходится учитывать различия в поведении браузеров, потому как для IE законы консорциума, внедряющего стандарты, не писаны – он живет своей жизнью, отличной от остальных браузеров.
К примеру, для того, чтобы добавить событие в IE нам нужно воспользоваться функцией attachEvent(), в остальных браузерах используется addEventListener(). И это первая, но не самая большая головная боль. Но мы не будем вдаваться в подробности, ведь наш курс называется «jQuery для начинающих».
Разработчики jQuery пошли другим путем, отгородив тем самым программистов, использующих их детище от множества граблей, давая им возможность писать код, который отвечает не за кроссбраузерность, а за то, для чего он действительно нужен.
Итак, jQuery. Чем же порадует он нас тут.
- позволяет с легкостью устанавливать в каждом элементе несколько событий
- поддерживает единый метод установки обработчиков событий
От сухой теории, перейдем к практике, наглядно демонстрирующей возможности jQuery.
В jQuery обработчики событий устанавливаются командной bind()
$(this).hide();
});
Теперь при клике(событие onclick или просто click в jQuery) на первом абзаце на странице происходит его скрытие. Все до безумия просто и работает в любом браузере, а ведь нам не пришлось думать даже об IE – «Чудненько» – воскликните вы: обработчик события всего одной строкой.
Порой нам нужно, чтобы событие обработалось один раз, для этого нам не надо пользоваться командой bind и в функции ее обработки писать команду unbind, которая удаляет обработчик. Это можно сделать одной командой, которая так и называется one.
$(this).slideUp('slow');
});
Теперь при клике на первом абзаце он уезжает и больше никогда не появится. Обработчик событий тоже при этом удаляется.
Но есть еще один метод, предлагаемый нам jQuery, это установка события непосредственно на определенное действие.
$(this).fadeOut('slow');
});
Теперь при клике на картинках, расположенных у нас на страницах, они будут медленно исчезать, а затем и вообще пропадут.
Эта команда выглядит в разы нагляднее. Список таковых можно продолжить.
.dblclick – возникает при двойном клике, хотя все это легко понимается из названия.
.focus – когда элемент получает фокус, ипользуется преимущественно с формами.
.keydown .keypress . keyup – возникают при нажатии кнопок клавиатуры.
.mousedown .mousemove .mouseout .mouseover .mouseup – исходят от мышки.
$(this).addClass('active');
});
Есть в jQuery еще одна замечательная команда, которая пригодится вам много где: в раскрывающихся менюшках, в галереях и т.д. Называется она hover – многие, я думаю, знакомы уже с этим словом из CSS, позволяющее подсвечивать ссылки и делать выпадающие меню. Эта команда устанавливает обработчики событий mouseover и mouseout для элементов на странице. Они вызываются только тогда, когда указатель мыши входит и выходит за пределы области элемента. Посмотрим все на небольшом примере.
function() {
$(this).addClass('hover');
},
function() {
$(this).addClass('unhover');
});
Мы устанавливаем на все ссылки, расположенные на странице, класс .hover, когда мы наводим на ссылку и устанавливаем класс .unhover, когда убираем указатель с этой ссылки. Это очень хорошо подойдет для динамичности меню: мы можем анимировать элементы.
Вот мы немного и разобрались с тем, как устанавливать на элементы или наборы элементов обработчики событий.
Напоследок, небольшой пример, демонстрирующий возможности jQuery, а именно создание выпадающего меню jQuery.
Ждите продолжения, следующий урок будет об AJAX.
А сейчас любимая жена зовет меня трапезничать и ей отказать я никак не могу 
метки: jQuery > jQuery для начинающих > jQuery события
jQuery для начинающих. часть 1
Создан | Декабрь 10, 2009 | 1
jQuery для начинающих
21 день осталось до наступления Нового года, у нас в офисе нет интернета, поэтому я решил написать первую часть урока «jQuery для начинающих». Нулевую его часть вы можете прочесть по ссылке jQuery для начинающих
С горем пополам, но выбирать элементы на странице мы немного научились, сегодня же речь пойдет о том, как выбрать более специфичные элементы – элементы, которые невозможно выбрать с применением штатных средств CSS(2,3), или это сделать намного сложнее, чем воспользоваться функциями jQuery. А что дальше?
метки: jQuery > jQuery для начинающих
СпайдерКОТ
Создан | Декабрь 9, 2009 | 3
спайдеркот
Помимо своенравных и разнохарактерных людей, проживающих на общей жилплощади, обитает еще и СпайдерКот, тоже какой-то особенный характер у него и инвертированный график бодрствования и сна, чем порой причиняет нам массу неудобств. Но все его любят: кто купает, кто кормит, кто просто дает ему люлей – «Бьет – значит любит», – как гласит народная мудрость.
jQuery для начинающих. часть 0
Создан | Декабрь 7, 2009 | 16
jquery для начинающих
Здравствуйте, уважаемые!
Сегодня я начну цикл статей под общим названием «jQuery для начинающих», который поможет начинающим, а может и не только начинающим, освоить сей замечательный JavaScript фреймворк, набирающий в последнее время все большую популярность из-за своей простоты и богатых возможностей.
А что дальше?
метки: jQuery > jQuery для начинающих
Javascript & Google Api: Простой перевод текста
Создан | Декабрь 4, 2009 | Нет комментариев
Сегодня я расскажу вам как сделать несложный переводчик на стороне клиента. Для этого нам понадобятся лишь гугловские API-функции, которые очень хорошо документированы.
Основную работу делает десяток строк Javascript, остальное лишь оформление. Переведем-как свой первый текст на JavaScript у себя на странице. Пример реализации можно посмотреть тут А что дальше?