Сообщение от lalala
|
|
омг! откуда беруться эти троли
|
1/ в гугле можно найти массу скриптов обращения к базе на пхп! Нужно знать еще как писать запрос для SQL .
2. Еще лучше сразу просматреть статью My SQL + php+ ajax
Есть целые статьи примеров , например --
Создание простого приложения: телефонная книга
Теперь, когда основы jQuery прояснились, давайте построим простую телефонную книгу на базе РНР и MySQL. Это приложение состоит из трех частей:
* таблицы MySQL с именами и номерами телефона
* файла index.php с формой поиска
* страницы find.php, которая обращается к таблице базы данных.
Создадим каждый элемент отдельно.
Создание таблицы базы данных
Создание таблицы базы данных в MySQL — пожалуй, самая простая часть. Эта таблица должна содержать самый минимум информации — идентификатор (ключ таблицы), поле имени и поле номера телефона. Два последних поля алфавитно-цифровые, так что можно использовать функцию varchar(). Поле идентификатора создадим как autoincrement primary key. Назовем эту таблицу directory, и для ее создания воспользуемся следующим кодом Structured Query Language (SQL):
Листинг 2. Код SQL для создания таблицы directory
CREATE TABLE `directory` (
`id` INT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 64 ) NOT NULL ,
`phone` VARCHAR( 16 ) NOT NULL ,
PRIMARY KEY ( `id` )
) TYPE = MYISAM ;
Как видите, ничего сложного нет. Позднее это приложение можно будет изменить по своему усмотрению. Например, можно добавить поле ключевых слов или адреса, что еще больше облегчит поиск. Пока же будем работать с тем, что есть.
Теперь надо заполнить нашу таблицу. Для ввода имен и номеров можно воспользоваться утилитой phpMyAdmin или командной строкой. Можно также использовать следующую последовательность команд SQL:
Листинг 3. Команды SQL для заполнения таблицы
insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');
insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');
insert into `directory` (name,phone) values ('John Smith', '512-555-0113');
insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');
insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115');
Когда значения введены, проверьте, что список выводится, напечатав select * в командной строке из рабочего каталога или нажав Browse в phpMyAdmin.
Создание файла index.php
Далее, создадим простую домашнюю страницу для нашего приложения. Это файл РНР с именем index.php, но пока он содержит главным образом код HTML. Когда мы создадим файл find.php (на следующем шаге), мы вернемся к этой части и завершим ее.
Пока все, что нам нужно, это базовый HTML-файл с формой. Каждый элемент формы содержит уникальный идентификатор, так как нам нужна возможность определять каждый элемент при помощи jQuery.
Листинг 4. Файл HTML с формой
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Search our Phone Directory</h1>
<form id="searchform" method="post">
<div>
<label for="search_term">Search name/phone</label>
<input type="text" name="search_term" id="search_term" />
<input type="submit" value="search" id="search_button" />
</div>
</form>
<div id="search_results"></div>
</body>
</html>
Сразу бросаются в глаза две вещи. Во-первых, с формой не связано никаких действий. Это нормально: помните, что данная форма не должна следовать традиционной синхронной схеме «нажал, подождал, увидел». Вместо этого мы добавляем функциональность, которая будет следить за действиями пользователя в поле search_term.
Второе, что вы должны заметить, это элемент DOM search_results — пустой элемент прямо под формой. В нем будут содержаться результаты поиска. Однако прежде чем идти дальше, создадим страницу find.php.
Создание файла find.php
Файл find.php — это место, где собственно и происходит все действие. Он соединяет приложение с базой данных и выполняет запрос к таблице.
В первой части файла find.php находится информация о соединении. Для нашего примера я ввел эту информацию прямо в файл. У большинства из вас она будет содержаться во включенном или запрашиваемом файле или в составе гораздо более крупной среды.
Листинг 5. Создание файла find.php
<?php
define(HOST, "your.host.here");
define(USER, "your-user-name");
define(PW, "your-password");
define(DB, "your-db-name");
$connect = mysql_connect(HOST,USER,PW)
or die('Could not connect to mysql server.' );
mysql_select_db(DB, $connect)
or die('Could not select database.');
Из формы index.php будет поступать поисковый термин. Прежде чем вводить это значение в базу данных, над ним нужно произвести некоторую простую обработку. Я использую функции strip_tags() и substr() для удаления из поискового термина всех тегов HTML и сокращения его размера. Такая обработка никогда не помешает — нельзя целиком доверять тому, что вводит пользователь.
При очистке поискового термина выполним один дополнительный шаг в виде процедуры mysql_escape_string(), которая удалит все прочие глюки (такие как одинарные знаки кавычек), которые могут поставить базу данных в тупик.
$term = strip_tags(substr($_POST['search_term'],0, 100));
$term = mysql_escape_string($term);
Теперь составим оператор SQL. Мы хотим извлекать из таблицы любые имена и номера телефона, соответствующие поисковому термину. Последний должен сравниваться методом LIKE как с полем имени, так и с полем номера телефона, после чего выполняется запрос mysql_query().
Листинг 6. Создание оператора SQL
$sql = "select name,phone
from directory
where name like '%$term%'
or phone like '%$term%'
order by name asc";
$result = mysql_query($sql);
Результаты запроса можно распечатать. Инициализируем переменную $string, чтобы сохранить результаты, затем используем mysql_num_rows() для проверки наличия в ответе любых строк. Если результаты для поискового термина не получены, $string будет содержать значение "No matches!" Если они есть, будет распечатано каждое имя и номер телефона из множества результатов. В конце процесса вся строка выводится на экран командой echo:
Листинг 7. Распечатка строки командной echo
$string = '';
if (mysql_num_rows($result) > 0){
while($row = mysql_fetch_object($result)){
$string .= "<b>".$row->name."</b> - ";
$string .= $row->phone."</a>";
$string .= "<br/>\n";
}
}else{
$string = "No matches!";
}
echo $string;
?>
Конечно, эта РНР-функциональность и сама по себе чрезвычайно полезна, но пока этого не видно. Нужно как-то ввести в этот сценарий сам поисковый термин. Мы сделаем это в следующем разделе.
Добавление jQuery в index.php
Пока все, что у нас есть, это пара безобидных страниц РНР и простая таблица MySQL. С добавлением jQuery это кроткое приложение превратится в современную программу на базе Ajax, которая работает подобно настольному приложению поиска вроде Spotlight в Mac OS X или Google Desktop Search.
Откроем файл index.php и добавим вызов свежезагруженного файла jquery.js.
<script src="./jquery.js"></script>
Затем создадим простую функцию, которая предотвратит типичное поведение поисковой формы. (Для этого используется функция preventDefault().) Все нажатия кнопки Submit и события key-up (то есть события, которые происходят при нажатии клавиш на клавиатуре) будут переадресовываться к новой функции ajax_search(), которую мы сейчас создадим.
Листинг 8. Создание функции для предотвращения типичного поведения поисковой формы
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
Заметьте, как функция slideUp() используется для временного сокрытия элемента DOM search_results. Для обращения к этому элементу по имени применяется функция $(). Тем, кто знаком с CSS, подход jQuery тоже покажется знакомым. Например, у нас есть элемент DOM с уникальным идентификатором search_results, и для обращения к нему мы используем $("#search_results"). Все очень просто.
Заметьте также, что каждый раз при нажатии кнопки Search или вводе символов в поле search_term анонимная функция предотвращает поведение по умолчанию и переадресует приложение к функции ajax_search(), которой мы теперь и займемся.
Функция ajax_search() предельно проста. Нам нужно показать элемент DOM search_results (как вы помните, сначала мы его спрятали), ввести значение из входного поля search_term, передать его функции ($.post()), которая асинхронно исполняет файл find.php, и ждать ответа. Когда ответ появится (как вы помните, мы сделали так, чтобы find.php возвращала ответ в любом случае, даже если совпадений не обнаружено), jQuery помещает этот ответ в элемент DOM search_results.
Листинг 9. Функция ajax_search()
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>
Теперь, когда все элементы системы на месте, можно ввести запрос и посмотреть, как механизм поиска работает в режиме реального времени, извлекая записи при каждом событии нажатия клавиши. Он работает и при нажатии кнопки Submit. Например, на рисунке 1 в поле поиска введена буква a, и приложение возвратило записи Жанны и Сары Смит, в именах которых содержится эта буква.
Рисунок 1. Ajax-поиск в действии
jQuery search
