Панель рейтинга для iframe приложений

Готовые уроки IFrame + ВКонтакте API

Панель рейтинга для iframe приложений

Сообщение Fedya » 19 фев 2013, 16:13

В этой статье я покажу как сделать панель рейтинга для iframe приложений.
Но в моей панели не будет никаких стилей, просто список с двумя кнопками.
Как украсить этот слайдер это уже решать вам :)

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

Конфиг, он же файл, который будет совершать запросы к базе
main.php
  1. <?php
  2. session_start();
  3. /*
  4. Конфиг
  5. */
  6.     //данные от базы
  7.     $db_host="localhost";
  8.     $db_user="user";
  9.     $db_password="pass";
  10.     $db_name = "user";
  11.     $table_name = "table"; //название таблицы с данными
  12.     $row1 = 'uid'; //столбец с id пользователя
  13.     $row2 = 'image'; //столбец с ссылкой на аватарку пользователя
  14.     $row3 = 'name'; //столбец с Имя Фамилия пользователя
  15.     $row4 = 'presents'; //столбец с рейтингом
  16.    
  17.     // данные приложения
  18.     $app_id = '3438138'; // id приложения
  19.     $api_secret = 'qqqqqqqqqqqqqqqqqqqqq'; // защищенный ключ приложения
  20. /*
  21. Конец конфига
  22. */
  23.  
  24.     $auth_key  = $_SESSION['auth_key']; //Высовываем из сессии auth_key
  25.     $viewer_id = $_SESSION['viewer_id']; //Высовываем из сессии viewer_id
  26.     $number = $_POST['number']; //Ловим number
  27.    
  28.     $real_key = md5($app_id."_".$viewer_id."_".$api_secret);
  29.  
  30.     if ($auth_key == $real_key){ //проверка
  31.    
  32.         // соединение с БД
  33.         mysql_connect($db_host, $db_user, $db_password) or die (mysql_error());
  34.         mysql_select_db($db_name) or die (mysql_error());
  35.         mysql_query("SET NAMES 'utf8'");
  36.        
  37.         $query = "SELECT * FROM ".$table_name." order by `".$row4."` desc limit {$number},10";
  38.         $sql = mysql_query($query);
  39.    
  40.         while ($sql_data = mysql_fetch_array($sql)) {
  41.             echo "={$sql_data[$row1]}={$sql_data[$row2]}={$sql_data[$row3]}={$sql_data[$row4]}|"; //выводим в таком виде, чтобы проще было записать в массив
  42.         }
  43.     }
  44. ?>


index.php
  1. <?php
  2. session_start();
  3. $_SESSION = $_GET;  //У меня данные будут храниться в сессии.
  4. ?>
  5. <html>
  6. <head>
  7.     <script src="http://vk.com/js/api/xd_connection.js" type="text/javascript"></script>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  10.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  11.     <script type="text/javascript" charset="utf8" >
  12.     $(document).ready(function() {
  13.         //объявляем переменные
  14.         var number = 0;
  15.         var i=0;
  16.         var details = new Array();
  17.         var newdetails = new Array();
  18.         var display = '';
  19.         //Первые 10 человек
  20.         $.post('main.php',{"number": number},function(data){ //отправляем  
  21.             details = data.split('|'); //записываем в массив данные для каждого пользователя
  22.            
  23.             for (i=0;i< 10; i++) {
  24.                 newdetails = details[i].split('='); //разделяем данные в массиве для каждого пользователя
  25.                 display += "<img src='" + newdetails[2] + "'>" + " ID: " + newdetails[1] +  " Name: " + newdetails[3] + " Level: " + newdetails[4] + "<br>"; // и сразу записываем эти данные
  26.             }
  27.        
  28.             $("#ratingbox").html(display); //выводим
  29.             display = '';
  30.         });
  31.        
  32.         //По нажатию кнопки 'Вперед' посылаем запрос
  33.         $("#next").click(function() {
  34.             number = number + 10;   //увеличиваем в запросе значение LIMIT
  35.             $.post('main.php',{"number": number},function(data){ //отправляем это значение
  36.                 details = data.split('|')//опять разделяем данные
  37.            
  38.                 for (i=0;i< 10; i++) {
  39.                     newdetails = details[i].split('=');
  40.                     display += "<img src='" + newdetails[2] + "'>" + " ID: " + newdetails[1] +  " Name: " + newdetails[3] + " Level: " + newdetails[4] + "<br>";
  41.                 }
  42.        
  43.                 $("#ratingbox").html(display);
  44.                 display = '';
  45.             });
  46.             $("#back").css('display', 'block'); //после нажатии кнопки 'Вперед' можно и кнопку назад показать :)
  47.         });
  48.        
  49.         // тоже самое, что при нажатии на кнопкю 'Вперед', только добавили проверку, чтобы LIMIT в минус не ушел.
  50.         $("#back").click(function() {
  51.             if(number >= 10)
  52.             {
  53.                 number = number - 10;
  54.                 $.post('main.php',
  55.                 {"number": number},
  56.                 function(data){
  57.                     details = data.split('|');
  58.            
  59.                     for (i=0;i< 10; i++) {
  60.                         newdetails = details[i].split('=');
  61.                         display += "<img src='" + newdetails[2] + "'>" + " ID: " + newdetails[1] +  " Name: " + newdetails[3] + " Level: " + newdetails[4] + "<br>";
  62.                     }
  63.        
  64.                     $("#ratingbox").html(display);
  65.                     display = '';
  66.                 });
  67.             }
  68.             if(number < 10)
  69.             {
  70.                 $("#back").css('display', 'none'); //если вернулись на первую страницу, то убираем кнопку 'Назад'.
  71.             }
  72.         });
  73.     });
  74.     </script>
  75. </head>
  76. <body>
  77.     <div id="ratingbox"></div>
  78.     <div id="next">Вперед</div>
  79.     <div id="back" style='display:none;'>Назад</div>
  80. </body>
  81. </html>


Посмотреть, что получится можно здесь http://vk.com/app3438138
Исходники http://rghost.ru/43915517
Fedya

 
Автор темы
Сообщения: 174
Зарегистрирован: 21 июл 2012, 19:56
Благодарил (а): 22 раз.
Поблагодарили: 6 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Панель рейтинга для iframe приложений

Сообщение Грачик » 19 фев 2013, 16:22

Спосибо огоромное щяс попробую)
Грачик

 
Сообщения: 162
Зарегистрирован: 08 фев 2013, 16:04
Благодарил (а): 21 раз.
Поблагодарили: 1 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Грачик » 19 фев 2013, 16:24

так стоп я создал эти 2 файла кинул их на хост и что дольше?)))
Грачик

 
Сообщения: 162
Зарегистрирован: 08 фев 2013, 16:04
Благодарил (а): 21 раз.
Поблагодарили: 1 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Fedya » 19 фев 2013, 16:27

Надо заполнить файл main.php сначала

Создайте сначала новое приложение, добейтесь, чтобы оно заработало должным образом, а потом уже думайте как в свое впихнуть
Fedya

 
Автор темы
Сообщения: 174
Зарегистрирован: 21 июл 2012, 19:56
Благодарил (а): 22 раз.
Поблагодарили: 6 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Грачик » 19 фев 2013, 16:29

Fedya писал(а):Надо заполнить файл main.php сначала

Создайте сначала новое приложение, добейтесь, чтобы оно заработало должным образом, а потом уже думайте как в свое впихнуть

так у меня игра уже стоит уже на index.html

как я могу туда пихнуть php ???
Грачик

 
Сообщения: 162
Зарегистрирован: 08 фев 2013, 16:04
Благодарил (а): 21 раз.
Поблагодарили: 1 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Fedya » 19 фев 2013, 16:33

Сменить расширение фала на php
Fedya

 
Автор темы
Сообщения: 174
Зарегистрирован: 21 июл 2012, 19:56
Благодарил (а): 22 раз.
Поблагодарили: 6 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Грачик » 19 фев 2013, 16:35

Fedya писал(а):Сменить расширение фала на php

так содержимое файла html как себя поведёт?
Грачик

 
Сообщения: 162
Зарегистрирован: 08 фев 2013, 16:04
Благодарил (а): 21 раз.
Поблагодарили: 1 раз.

Re: Панель рейтинга для iframe приложений

Сообщение ZEBC » 19 фев 2013, 22:29

Грачик
Тут все просто даже код закоментирован а вы 2 фаила сделать неможите :lol:
ZEBC

 
Сообщения: 100
Зарегистрирован: 21 июн 2012, 06:42
Благодарил (а): 6 раз.
Поблагодарили: 3 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Serge » 20 фев 2013, 14:25

Как-то грустно писать и html и php в одном файле.
Есть более красивые и удобные методы решения этой задачи...
http://sevenlines.com.ua - разработка и продвижение сайтов
Serge
WEB Team
WEB Team
 
Сообщения: 520
Зарегистрирован: 04 мар 2011, 21:55
Благодарил (а): 2 раз.
Поблагодарили: 65 раз.

Re: Панель рейтинга для iframe приложений

Сообщение Грачик » 20 фев 2013, 21:12

Serge писал(а):Как-то грустно писать и html и php в одном файле.
Есть более красивые и удобные методы решения этой задачи...

к примеру?
Грачик

 
Сообщения: 162
Зарегистрирован: 08 фев 2013, 16:04
Благодарил (а): 21 раз.
Поблагодарили: 1 раз.

След.

Вернуться в Уроки IFrame ВКонтакте



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0