login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > PHP > XML en PHP > WhatPulse API

WhatPulse API

Auteur: Flex1986 - 06 juli 2009 - 14:11 - Gekeurd door: marten - Hits: 3467 - Aantal punten: 5.00 (3 stemmen)



Dit is een script wat ik gemaakt heb gemaakt voor het Sitemasters WhatPulse team. Er wordt gebruik gemaakt van SimpleXML & jQuery javascript.

Voor het design wordt er gebruikt gemaakt van een desktop background van 1920 x 1200 pixels met een jpeg kwaliteit van 5 om het plaatje wat sneller te laten laden.

In het zip bestandje mist alleen de background image omdat deze te groot is om op sitemasters te uploaden.

Code:
Onderstaand bestand is index.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.         <title>SiteMasters WhatPulse</title>
  6.         <style type="text/css">
  7.             body {
  8.                 background-image:url('background_small.jpg');
  9.                 background-repeat:no-repeat;
  10.                 background-position:center center;
  11.                 background-color:#394618;
  12.                 text-align: center;
  13.                 font-family: "Verdana";
  14.                 font-size:11px;
  15.             }
  16.  
  17.             a {
  18.                 color: white;
  19.                 text-decoration: underline;
  20.             }
  21.  
  22.             h1 {
  23.                 font-family: "Verdana";
  24.                 font-size: 16px;
  25.                 font-weight:bold;
  26.                 font-style: italic;
  27.                 text-align: left;
  28.                 margin-top: 5px;
  29.                 margin-left: 30px;
  30.                 padding-bottom: 10px;
  31.             }
  32.  
  33.             #container {
  34.                 width: 1000px;
  35.                 margin: 0 auto;
  36.                 color: white;
  37.                 height: 900px;
  38.             }
  39.  
  40.             #top {
  41.                 background: url('background_trans.png') repeat;
  42.                 font-weight: bold;
  43.                 font-size: 13px;
  44.                 height: 55px;
  45.             }
  46.  
  47.             #list {
  48.                 margin-top: 50px;
  49.                 background: url('background_trans.png') repeat;
  50.                 text-align: left;
  51.                 padding-top: 25px;
  52.                 padding-bottom: 25px;
  53.             }
  54.  
  55.             .back {
  56.                 margin-left: 100px;
  57.             }
  58.  
  59.             #details {
  60.                 margin-top: 50px;
  61.                 background: url('background_trans.png') repeat;
  62.                 text-align: left;
  63.                 padding-top: 25px;
  64.                 padding-bottom: 25px;
  65.             }
  66.  
  67.             #list span {
  68.                 margin-left: 100px;
  69.                 font-weight: bold;
  70.                 padding-bottom: 5px;
  71.             }
  72.  
  73.             table {
  74.                 margin-left: 100px;
  75.                 font-family: "Verdana";
  76.                 font-size: 11px;
  77.             }
  78.  
  79.             th {
  80.                 font-weight: bolder;
  81.                 background-color: white;
  82.                 color: black;
  83.                 text-align: left;
  84.             }
  85.  
  86.             th.headerSortUp {
  87.                 background-image: url(asc.gif);
  88.             }
  89.  
  90.             th.headerSortDown {
  91.                 background-image: url(desc.gif);
  92.             }
  93.  
  94.             th.header {
  95.                 cursor: pointer;
  96.                 font-weight: bold;
  97.                 background-repeat: no-repeat;
  98.                 background-position: center left;
  99.                 padding-left: 20px;
  100.                 border-right: 1px solid #dad9c7;
  101.                 margin-left: -1px;
  102.             } 
  103.  
  104.             td {
  105.                 color: white;
  106.                 width: 150px;
  107.             }
  108.         </style>
  109.         <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
  110.         <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
  111.         <script type="text/javascript" src="jquery.metadata.min.js"></script>
  112.         <script type="text/javascript">
  113.             $(document).ready(function(){
  114.                 //Call the tablesorter method which is provided by the jquery.tablesorter file
  115.                 $("table").tablesorter({
  116.                     sortList:[[1,1],[2,1],[3,1]]
  117.                 });
  118.  
  119.                 $("#details").hide()
  120.                 $(".userdetails").attr("href", "javascript:;")
  121.  
  122.                 $(".userdetails").click(function(){
  123.                     $.ajax({
  124.                         type: "GET",
  125.                         url: "user.php?id=" + $(this).attr("title"),
  126.                         dataType: "text",
  127.                         success: function(msg){
  128.                             $("#details").empty();
  129.                             $("#details").append(msg);
  130.                             $("#list").fadeOut(500, function(){
  131.                                 $("#details").fadeIn(500);
  132.                                       //A ugly fix to solve the double background problem in firefox
  133.                                       if($.browser.mozilla){
  134.                                             $("body").css("background-image",                     "url('background_small.jpg')");
  135.                                     }
  136.                             });
  137.                         }
  138.                     });
  139.                 });
  140.             });
  141.         </script>
  142.     </head>
  143.     <body>
  144.         <?php
  145.         //Load the WhatPulse XML file.
  146.         $xml = simplexml_load_file("http://whatpulse.org/api/team.php?TeamID=11016");
  147.         $statistics = $xml->TeamStats->Statistics;
  148.         $members = $xml->TeamStats->Members;
  149.         ?>
  150.         <div id="container">
  151.             <div id="top">
  152.                 <h1>Sitemasters WhatPulse Ranking</h1>
  153.                 <span>
  154.                     Team Rank:&nbsp;<?=number_format($statistics->TeamRank)?>
  155.                     Totaal Leden:&nbsp;<?=number_format($statistics->TeamMembers)?>
  156.                     Totaal Toetsen:&nbsp;<?=number_format($statistics->TeamKeys)?>
  157.                     Totaal Kliks:&nbsp;<?=number_format($statistics->TeamClicks)?>
  158.                     Totaal Afstand:&nbsp;<?=number_format(round(($statistics->TeamMiles * 1.609344),2),2)?>&nbsp;KM
  159.                 </span>
  160.             </div>
  161.             <div id="list">
  162.                 <span>Gebruik SHIFT voor multi sorteren.</span>
  163.                 <table cellpadding="0" cellspacing="0" border="0">
  164.                     <thead>
  165.                         <tr>
  166.                             <th>Username</th>
  167.                             <th class="{sorter: 'currency'}">Toetsen</th>
  168.                             <th class="{sorter: 'currency'}">Kliks</th>
  169.                             <th class="{sorter: 'currency'}">Afstand in KM</th>
  170.                             <th class="{sorter: 'percentage'}">Bijdrage</th>
  171.                         </tr>
  172.                     </thead>
  173.                     <tbody>
  174.                         <?php foreach($members->Member as $member) :
  175.                             $percentage1 = round(($member->MemberKeys / $statistics->TeamKeys) * 100,2);
  176.                             $percentage2 = round(($member->MemberClicks / $statistics->TeamClicks) * 100,2);
  177.  
  178.                             $bijdrage = round($percentage1 + $percentage2 / 2,2);
  179.                             ?>
  180.                         <tr>
  181.                             <td><a class="userdetails" href="user.php?id=<?=$member->MemberUserID?>" title="<?=$member->MemberUserID?>"><?=$member->MemberName?></a></td>
  182.                             <td><?=number_format($member->MemberKeys)?></td>
  183.                             <td><?=number_format($member->MemberClicks)?></td>
  184.                             <td><?=number_format(round(($member->MemberMiles * 1.609344),2),2)?></td>
  185.                             <td><?=$bijdrage?>%</td>
  186.                         </tr>
  187.                         <?php endforeach; ?>
  188.                     </tbody>
  189.                 </table>
  190.             </div>
  191.             <div id="details">
  192.             <!--The container for the user details -->
  193.             </div>
  194.         </div>
  195.     </body>
  196. </html>


Onderstaand bestand is user.php deze wordt doormiddel van Ajax aangeroepen.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. if(isset($_GET['id']) && is_numeric($_GET['id'])) {
  3.     $content = file_get_contents("http://whatpulse.org/api/user.php?UserID=".$_GET['id']);
  4.  
  5.     if($content != "Unknow UserID given!") {
  6.         $xml = simplexml_load_string($content);
  7.         ?>
  8. <script type="text/javascript">
  9.     $(".back").attr("href", "javascript:;");
  10.  
  11.     $(".back").click(function(){
  12.         $("#details").fadeOut(500, function(){
  13.             $("#list").fadeIn(500);
  14.         });
  15.     });
  16. </script>
  17. <table cellpadding="0" cellspacing="0" border="0" width="700">
  18.     <tr>
  19.         <td width="250">Naam:</td>
  20.         <td colspan="2" width="75"><?=$xml->AccountName?></td>
  21.     </tr>
  22.     <tr>
  23.         <td>Land:</td>
  24.         <td colspan="2"><?=$xml->Country?></td>
  25.     </tr>
  26.     <tr>
  27.         <td>Rank in Team:</td>
  28.         <td colspan="2"><?=$xml->RankInTeam?></td>
  29.     </tr>
  30.     <tr>
  31.         <td>Geregistreerd op:</td>
  32.         <td colspan="2"><?=date("d-m-Y", strtotime($xml->DateJoined))?></td>
  33.     </tr>
  34.     <tr>
  35.         <td>Laatste Pulse:</td>
  36.         <td colspan="2"><?=date("d-m-Y H:i", strtotime($xml->LastPulse))?></td>
  37.     </tr>
  38.     <tr>
  39.         <td>Aantal Pulses:</td>
  40.         <td colspan="2"><?=number_format($xml->Pulses)?></td>
  41.     </tr>
  42.     <tr>
  43.         <td>Totaal Toetsaanslagen:</td>
  44.         <td><?=number_format($xml->TotalKeyCount)?></td>
  45.         <td width="75" align="left"><?=number_format($xml->AvKeysPerPulse)?>&nbsp;aanslagen gemiddeld</td>
  46.     </tr>
  47.     <tr>
  48.         <td>Totaal Kliks:</td>
  49.         <td><?=number_format($xml->TotalMouseClicks)?></td>
  50.         <td align="left"><?=number_format($xml->AvClicksPerPulse)?>&nbsp;kliks gemiddeld</td>
  51.     </tr>
  52.     <tr>
  53.         <td>Totaal Afstand:</td>
  54.         <td colspan="2"><?=number_format(round($xml->TotalMiles * 1.609344,2),2)?>&nbsp;KM</td>
  55.     </tr>
  56. </table>
  57. <br>
  58. <a href="index.php" class="back">Terug naar overzicht</a>
  59.     <?php
  60.     } else {
  61.         echo "Deze gebruiker heeft de API nog niet geactiveerd";
  62.     }
  63. } else {
  64.     echo "Er heeft zich een fout voorgedaan";
  65. }
  66. ?>
Download code! Download code (.txt)

Download dit script! Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (2)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.035s