главная

Теги:


Отзывы клиентов средствами PHP, XML и jQuery

Один из самых эффективных методов повышения продаж товара являются положительные отзывы ваших клиентов. Для этого вам не надо ставить себе CMS или заморачиваться с базой данных. В этом уроке мы создадим XML файл с отзывами клиентов, которые будут плавно меняться при помощи jQuery.

HTML

В первую очередь создадим структуры HTML страницы:

Index.php

 




Отзывы клиентов средствами PHP и XML






Наша супер прога доступка в магазине Apple.

В верхней части документа, мы вставляем styles.css, а перед закрытием тега body, подключаем библиотеку jQuery и наш script.js, который будет описан в конце этого урока.

Блок #testimonials предназначен для вывода отзывов. Отзывы будут содержаться в тегах LI. При загрузке страницы будет показываться только 1 отзыв, а все остальные будут выводиться средствами jQuery.

PHP

Все отзывы будут содержаться в XML файле.

 


	
		Эта самая крутая прога, которую я когда-либо видео!
		Вася Бобровский
		vbobrovski.com
	
	
		Просто и круто! Эта прога решила все мои проблемы. Рекомендую её всем.
		Иванов Иван
		ivan.com
	
	
		Превосходно! Этому софту нет равных.
		Мария Софьева
	

Структура этого файла очень простая – testimonials это корневой элемент, который содержит элементы items. Каждый item содержит content, author-name и author-url, среди которых последняя опция является необязательной. Для того чтобы добавить отзыв, необходимо просто создать ещё элемент item и заполнить его.

Но как мы сможем трансформировать это в валидный HTML? Мы можем использовать PHP для того, чтобы пройтись по элементам и вывести их на страницу в цикле, но я хочу вам показать один альтернативный способ с применением XSLT. Это специальная разновидность XML, которая позволяет нам преобразовать XML файл в HTML.

transformations.xml








	
	

	
	
  • Данная техника поддерживает все стандарты современного программирования. Вы можете использовать цикл for-each, условие if, а так же вызывать встроенные функции (подробную информацию вы можете найти тут). Тут мы написали сценарий трансформации xml файла в html.

    Существует несколько подходов для применения стилей XSL. Вы можете поместить их непосредственно в XML файле и позволить браузеру сгенерировать HTML разметку (все современные браузеры поддерживают XSL трансформации), или разместить их на стороне сервера. К счастью, в PHP предоставляет широкие возможности для работы с XSL.

    $xmlFile = 'xml/testimonials.xml';
    $xslFile = 'xml/transform.xml';
    
    $doc = new DOMDocument();
    $xsl = new XSLTProcessor();
    
    $doc->load($xslFile);
    $xsl->importStyleSheet($doc);
    
    $doc->load($xmlFile);
    echo $xsl->transformToXML($doc);
     

    Данный скрипт заполняет div #testimonial в index.php. Он выводит ряд элементов LI к которым применяются XSL стили, извлекая их из XML документа со всеми отзывами. Для браузера и поисковых систем всё будет выглядеть как HTML страница.

    CSS

    Теперь, когда наш скелет готов, приступим к стилю:

    styles.css

    #page{
    	width:800px;
    	margin: 0 auto 120px;
    }
    
    #topBar{
    	height:62px;
    	position:relative;
    }
    
    #logo{
    	width:194px;
    	height:62px;
    	position:absolute;
    	top:0;
    	left:0;
    	background:url('../img/logo.jpg') no-repeat;
    }
    
    #navigation{
    	position:absolute;
    	list-style:none;
    	right:0;
    	top:15px;
    }
    
    #navigation li{ display:inline;}
    
    #navigation li a{
    	text-decoration:none;
    	font-weight:bold;
    	float:left;
    	padding:10px;
    	margin-right:10px;
    	font-size: 17px;
    }
    
    #iPhone{
    	height:400px;
    	margin:60px auto 0;
    	background:url('../img/iPhone.png') no-repeat;
    }
    
    #iPhone p{ display:none;}
    
    #testimonials{
    	width: 375px;
    	padding: 45px 45px 35px 90px;
    	background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2);
    	min-height:90px;
    
    	-moz-border-radius:12px;
    	-webkit-border-radius:12px;
    	border-radius:12px;
    }
    
    #testimonials li{ display:none;}
    #testimonials li:first-child{ display:block;}
    
    #testimonials ul{ list-style:none;}
    #testimonials p.text{ font-size:24px;}
    
    #testimonials p.author{
    	color: #878787;
        font-size: 16px;
        font-style: italic;
        text-align: right;
    	margin-top:10px;
    }
    
    #testimonials p.author a,
    #testimonials p.author a:visited{
    	color:#6aa42a;
    }
     

    Это стиль дня нашей страницы. Он скрывает все отзывы, которые по сути являются элементами списка. После этого при помощи селектора first-child, мы показываем первый отзыв. Прокрутка между отзывами будет осуществляться в нашем jQuery скрипте, который вот-вот напишем.

    jQuery

    В этой части урока мы напишем jQuery скрипт, который будет отвечать за цикличное отображение всех отзывов пользователей.

    script.js

     $(document).ready(function(){
    
    	// Спрячем все отзывы, кроме первого
    	$('#testimonials li').hide().eq(0).show();
    
    	// функция, которая циркулирует отзывы:
    	(function showNextTestimonial(){
    
    		// Ждём 7.5 секунд, перед тем, как сменить отзыв:
    		$('#testimonials li:visible').delay(7500).fadeOut('slow',function(){
    
    			// Ставим его в конец списка:
    			$(this).appendTo('#testimonials ul');
    
    			// Показываем следующий отзыв:
    			$('#testimonials li:first').fadeIn('slow',function(){
    
    				// Вызываем функцию снова:
    				showNextTestimonial();
    			});
    		});
    	})();
    
    });
    

    Для того чтобы контролировать промежуток времени межу сменой отзывов, вы можете вставить какое-то значение в метод delay. Помещая активный отзыв в конец (вместо индексирования), мы получаем возможность передвигаться по данным рекурсивно.

    Вот и всё!

    Заключение

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

    Источник урока: www.tutorialzine.com/2010/12/client-testimonials-xml-php-jquery/

    Урок Создан:2011-05-18 Просмотров:2985

    Добавить комментарий:

    
    Copyright© 2009 Hosted by Zhost