Добавим немного интерактива

February 22nd, 2009 1 Comment »

Добавим немного интерактива с помощью JavaScript.

Для начала давайте не субмитить форму, если пользователь ничего не ввёл в поле ввода.

Для этого сначала нужно добавить полю ввода идентификатор, по которому можно к этому полю обращаться и с ним работать, в этой строке приписываем атрибут id:

<input id="server" name="server" style="width:300px"
value="<?=$_GET["server"]?>"/>

Теперь мы можем обращаться с этим полем ввода как с объектом, находя его по ID:

var inp = document.getElementById('server');

Вот теперь можно по нажатию кнопки проверять наличие текста в этой строке ввода:

<input name="submit" type="Submit" value="Submit"
onclick="var inp = document.getElementById('server');
if(!inp.value) {alert('Введите адрес сервера.'); return false;}"/>

Вообще, если кнопки типа submit в обработчике нажатия возвращает FALSE, то субмита формы не происходит — этим мы и воспользовались.

В следующий раз мы сделаем так, чтобы результат показывался на странице без обновления страницы, а сразу — для этого мы воспользуемся такой штукой как AJAX.

Пробуем силы на PHP

February 20th, 2009 1 Comment »

Итак, у вас уже есть установленный веб-сервер. Давайте теперь напишем, наконец, немного кода.

Стоит отметить, что в чистом виде РНР-скрипты (без примесей HTML) встречаются только в особенных случаях:

  • на чистом РНР оформляются отдельные классы (эдакие готовые подпрограммы) — так повышается степень их повторного использования: скопировал в новый проект и используешь
  • консольные приложения — бывает надо пройтись по дереву папок и что-то по ним посчитать, тогда запуск из браузера необязателен, можно пускать скрипт прямо из консоли, а там HTML не нужен
  • в современных фреймворках используется паттерн MVC (Model – View – Controller) — так разделяется бизнес-логика (как вообще работает приложение, на высоком уровне), представление (как данные отображаются) и контроллер (обработчик действий пользователя, связующий бизнес-логику и представление). Так вот там HTML используется только в представлении, и то не всегда.

Но мы доберёмся до всего этого немного позже. Сегодня у нас два примера на РНР — детсадовский и для детей постарше.

Скрипт №1. Создаём на нашем локальном сервере файл 1.php и пишем в него следующий код:

<?
echo 'Let\'s count: ' . (2 + 2);

Запускаем скрипт через браузер (заходим на наш локальный сервер и дописываем имя файла 1.php), в итоге в броузере появится фраза:

Let's count: 4

Что видно из этого примера:

  1. PHP-код начинается с тэга <? — если не сработает, попробуйте <?php , это потом можно будет настроить в конфиге php.ini
  2. Для вывода текста используется команда echo
  3. Экранированием кавычки является обратный слэш
  4. Конкатенация строк (склеивание) происходит через точку (не сильно привычно, понимаю)
  5. Сложение как было, так и осталось — хоть какое-то постоянство в мире
  6. Закрывающий тэг иногда можно не закрывать — вот как в нашем случае

Скрипт №2. Пишем веб-форму, которая будет возращать IP-адрес для указанного доменного имени.

<html>
<head>
  <title>gethostbyname</title>
</head>
<body bgcolor="#eeeeee">
  <form method="get">
    <input name="server" style="width:300px" value="<?=$_GET["server"]?>"/>
    <input name="submit" type="Submit" value="Submit"/>
  </form>
<?
if($_GET["server"]!="")
  echo "<hr/>".$_GET["server"]." : ".gethostbyname($_GET["server"])
?>
</body>
</html>

Поиграйтесь с ним.

Введите iwannabedeveloper.com — чтобы получить 208.77.209.127. Обратите внимание, как быстры повторные запросы — это помогает кэш DNS.

У вас в руках мощное оружие. Будем учиться использовать его оптимально.

Установка сервера

February 14th, 2009 2 Comments »

Короткий, но ёмкий пост: чтобы установить сервер для дальнейшей работы, вам нужно прочитать два ранее опубликованных здесь поста, написанные моим коллегой Родионом Быковым. Тогда вы сможете ставить веб-эксперименты прямо на своей рабочей машине.

Итак, читаем по порядку:

  • Знакомство с Apache — начинаем с установки веб-сервера, собственно обрабатывающего запросы, например, от вашего браузера.
  • Установка PHP как модуль Apache — если вам нужно что-то посложнее раздачи статических страничек (динамика), то без PHP не обойтись. Учимся инсталлировать.

Эти шаги надо сделать всего один раз, так что потерпите.

Как устроена веб-страница

February 2nd, 2009 1 Comment »

Веб-страница устроена просто.

Она состоит из двух частей: заголовка (head) и тела документа (body).

Заголовок содержит служебную информацию, описывающую содержащиеся на странице данные или помогающие её отобразить. К описательным данным относятся: заголовок страницы (его видно в шапке броузера), список ключевых слов (чтобы поисковики лучше смогли понять о чем на этой странице написано), кодировка документа (а их только для русского языка — 4 штуки), и так далее. К элементам, помогающим отобразить содержимое, относятся каскадные таблицы стилей (CSS) и в некоторых случаях библиотеки JavaScript-кода — не пугаемся, их мы разжуём позже.

Содержимое заголовка как правило не видно — оно носит служебный характер.

Тело документа — это собственно всё, что на странице написано и нарисовано: параграфы текста, ссылки, картинки и видео-вставки.

Давайте попробуем написать простейшую веб-страничку. Открываем любой текстовый редактор (только не MS Word! Попробуйте Notepad++) и копируем туда такой текст:


<html>
  <head>
    <!-- это заголовок документа -->
    <title>First blood</title>
  </head>
  <body>
    <!-- это собственно тело -->
    <h1>Hello Rambo!</h1>
  </body>
</html>

Сохраняем файл куда угодно под названием 1.htm и открываем его в браузере (можно просто перетащить файл в браузер). Должна получится примерно такая картина (на рисунке – браузер Google Chrome, у вас может быть другой):

Ура! Теперь осталось выучить несколько основных тегов и попробовать их применять. Тэг H1 мы уже использовали в примере выше — он даёт нам заголовок первого уровня (самый крупный — тут та же идеология, что и с ватманами: А1 больше чем А3):


<strong>жирный</strong> = жирный
<em>курсив</em> = курсив
<a href="http://google.com">ссылка на Google</a> =  ссылка на Google
<input type="button"
  value="Нажми меня"
  onclick="alert('Вот и молодец!')" /> = 

На закуску рекомендую прочесть статью “Простейшая веб-страница” — написана просто и с юмором, читается легко.