КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Выбор материалов из базы по категогиям

Привет, давайте посмотрим как у меня на сайте реализован поиск по категориям в базе данных статей и вывод их на экран. Это всё сделано с помощью технологии Ajax, включенной в библиотеку jQuery, благодаря чему не нужно писать длинный и сложный js-кот и несложного PHP-запроса к таблице. В индексном файле сверху вы видели несложное меню из пяти картинок: HTML, CSS, jQuery, PHP и Ajax, при нажатии на которые в блок ниже подгружается соответствуюший контент. Точно таким же макаром можно делать поиск по вводимым словам в поле поиска. Итак, идём по порядку.. Ajax-запрос:
$(function(){
  $('#main li').click(function(){
    var search=$(this).attr('data-title');
    if(search){
      $.ajax({
        type:"GET",
        url:"php/main.php",
        data:"search="+search,
        success:function(response){
          $('#load').fadeOut(30);
          $('.main_text').html(response).hide().fadeIn(300);
        }
      });
    }
  });
});
Значит, что тут у нас происходит: при клике на элемент li нашего списка с id main в переменную search записывается значение аттрибута data-title. Можно добавлять любые произвольные аттрибуты к элементам веб-страницы, снабжая их префиксом data (data-search, data-width, data-color и т.д.) В атрибуте data-title каждого li (элемента списка) в данном случае написано HTML, CSS, jQuery, PHP и Ajax соответственно. После того как атрибут получен и записан в переменную, составляем аякс-запрос методом GET (можно и POST) к файлу, который всё это дело будет разруливать на стороне сервера в фоновом режиме. Ему мы передаём в качестве данных нашу переменную data:"search="+search и ждём ответа. Для начала напишем файл db.php, ответственный за подключение к бд и выбор таблицы:
if (!$db = mysqli_connect('localhost', 'root','','mysite')){
  exit('Wrong database');
}
Будьте внимательны, первый параметр localhost - выбор хоста, обычно он всегда localhost, дальше идут имя пользователя, пароль и имя базы данных. Здесь я буду использовать улучшенную библиотеку для работы с MySQL - mysqli.
Принимает нашу подачу такой вот пхп-файл:
include_once "db.php";
if(isset($_GET['search'])){
  $search = $_GET['search'];
  $sql    = "SELECT `title`, `discription` FROM `materials` WHERE category LIKE '%$search%'";
  $result = mysqli_query($db, $sql);
  $text   = '';
  if($num = mysqli_num_rows($result)>0){
    while ($row = mysqli_fetch_assoc($result)){
      $text.="
      
      <div class='table'>
      <h1 class='h2'>".$row['title']."</h1>
      <div class='full'>".$row['discription']."<DIV>";
    }
  }else{
    $text='<p class="nothing">Ничего не найдено</p>';
  }
  echo $text;
}
Я конечно тут значительно всё упростил чтоб суть была понятнее. Там у меня ой сколько всего выводиться, оставил только title и discription (заголовок и основной текст статьи). Почле установки соединения с сервером MySQL выполняется проверка существования переменной search, которую мы передаём из яваскрипта. Если она пришла, записываем её в переменную $search, и составляем SQL-запрос: ВЫБРАТЬ title, discription из таблицы materials ГДЕ category (категория) КАК $search. Выполняем запрос, передавая функции mysqli_query переменную $db подключения к базе и сам запрос. Дальше создаём переменную $text (не обязательно, т.к. можно это делать и неявным образом при первом использовании) и делаем проверку: если количество найденных строк больше нуля, разбиваем наш $result в ассоциативный массив, где ключи - названия полей (title, discription), а значения - их текст. и в цикле приплюсовываем к переменной $text $row['title'] и $row['discription'] в нужном обрамлении ПОКа (while) строки существуют. Если же ничего не найдено, переменная $text получает значение
 <p class="nothing">Ничего не найдено</p>
И через оператор echo отдаём $text нашему jQuery-скрипту, который методом html вставляет то, что ему пришло в блок с классом main_text, прячет его и показывает за 300мс. Вот в общем-то и вся магия, простая, как всё гениальное :)
2015.05.12 168

А ты сможешь нас защитить?Ну если что-то вроде защиты Касперского, то да, забьюсь в угол и буду визжать как свинья
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика