Продолжаю серию статей, про написание сервиса анализа сайта на php. Я уже вроде полностью закончил скрипт. Конечно, все пока не очень стабильно работает, но будем исправлять по ходу дела и искать обходные пути. После ввода ссылки и нажатия кнопки Enter, мы видим следующий интерфейс:

Как видите, я сделал пока только самое основное. В будущем, будем добавлять новые фичи и делать апгрэйды. Итак, перейдем к структуре скрипта.

За основу, мы не берем не каких фреймворков, так как скрипт у нас не большой и cms мы не пишем. Раскидываем все по своим папкам, что-бы был всегда порядок и чистота.

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

1. css — в этой папке у нас стили
2. function — файлы с классами и функциями (определение тИЦ, google page rank и всего остального)
3. img — все графика, что используется в скрипте.
4. js — джава скрипты (джикверти, ajax библиотека, остальное по мелочи)
5. index.php — собственно главный файл, где мы все это дело правильным образом подключаем и подгружаем.

В скрипте, мы делаем ajax подгрузку, что-бы визуально наблюдать, как будут считаться наши пузомерки и запрашиваться информация о сайте. В качестве ajax библиотеки будем использовать маленькую, но очень простую и удобную библиотеку PHPLiveX. В качестве визуальных прелестей используем jquery.

Итак, главная страница сервиса — это поле ввода адреса. Как только вы начинаете вводить адрес, в конце поля ввода появляется крестик, при нажатии на который вы можете очистить все поле ввода. Очень удобная фишка, которая есть по умолчанию в полях ввода браузера Safari и в большинстве полей ввода операционной системы Mac OS. Выглядит это дело так:

Перейдем к рассмотрению кода вывода этой части сайта

<table>
	<tr>
		<td align="left">Ссылка</td>
		<td><input type="text" value="" id="url" class="inputz" onkeyup="if (event.keyCode==13 & this.value!='') check();"></td>
		<td><input type="button" value="Проверить" onclick="check();" class="inputz_button"></td>
	</tr>
</table>
<span id="pr" style="visibility:hidden;"><img src="img/load.gif"></span>
<div id="result"></div>

Первый момент, так как мы используем ajax для отправки формы, у нас нету объявления формы и кнопки типа submit. Мы используем обычную кнопку типа button, при нажатии на которую мы просто вызываем Джава скрипт функцию check(). Но тут есть минус, после написания адреса сайта, нельзя форму отправить enter’ом, как мы все привыкли, по этому для текстового поля, на событие onkeyup (которое в свою очередь происходит при отпускании клавиши на клавиатуре) мы весим маленький код, который проверяет, какая нажата клавиша. Если нажат enter, код которого 13, тогда выполняем функцию check().

Второй момент, вы видите невидимый span, в котором картинка. Она показывается в то время, когда выполняется запрос и считаются скриптом пузомерки. Выбрать себе прелоадер он же просто preloader, можно на очень хорошем сервисе, который всем советую — Preloaders.

Последний момент, после этого кода есть div с id=result в этот див будет выведен результат выполнения нашего скрипта.

Перейдем к первой практической части, что-бы выполнить отправку формы через библиотеку phplivex нужно:

1. Подключить библиотеку в главном файле, в нашем случае в index.php

<?php
	include "function/phplivex.php";
 	$ajax = new PHPLiveX();
 	$ajax->Run();
?>

2. Вставить Джава скрипт код в главную страницу, в котором мы настраиваем тип передачи формы, с какого поля брать переменную, в какое поле выдавать результат, какое скрытое поле с preloader’ом показывать и наконец, какой php файл выполнить.

 function check(){
     var url = document.getElementById("url").value;
     var plx = new PHPLiveX();
     return plx.ExternalRequest({
         "url": "function/result.php",
         "preloader": "pr",
         "method": "get",
         "target": "result",
         "params": {"url":url }
     });
 }

3. В файле result.php, первым делом получить отправленные переменные функцией extract($_GET); в нашем случае это только ссылка (url).

На сегодня все, завтра ждите продолжение.