Facebook-Anwendungen mit PHP programmieren – Quiz für Webgeeks (3)

Kein Beitragsbild

Thiemo Fetzer lebt seit 2008 in London und promoviert dort im Fachbereich...

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

Der nächste Schritt zur eigenen Facebook-Anwendung mit PHP dreht sich ums Herz des Workshops beziehungsweise unserer Quizanwendung – nämlich das Quiz selbst. Wir möchten den Nutzer durch eine Abfolge von Quizfragen schicken und die Antworten in einer Datenbank hinterlegen. Später soll dem Nutzer sein Ergebnis mitgeteilt werden. Dazu werden wir auf alle zentralen Elemente, die eine Facebook-Anwendung ausmachen, zurückgreifen.

Benutzersteuerung

Wir werden den Benutzer sehr primitiv durch die Anwendung führen, indem wir über den URL weitergeben, wo der Nutzer gerade steht. In diesem Artikel wurde es relativ einfach gelöst. Über einen Formular-Generator im Internet wurde das komplette Quiz in einer HTML-Datei erzeugt. Diese wird als Iframe eingebunden. Damit können Nutzer das Quiz in einem Schritt beantworten, das fertige Formular finden Sie etwa unter http://www.devmag.net/fb/form.html.

Wer es etwas komplizierter machen möchte, lässt den Benutzer von Frage zu Frage durchklicken, wobei die Antworten auf die einzelnen Teilfragen Schritt für Schritt in einer Datenbank abgelegt werden. Bei einer solchen Umsetzung kann man auch leicht eine Art Statusbalken, sprich Laufzeitmeldung, programmieren, die dem Nutzer zeigt, wo er gerade in der Anwendung steht. Ein Beispiel für eine derartige Lösung können Sie samt Code unter http://www.homepage-total.de/php/quiz.php finden.

Daten abgreifen und ablegen

Wie bereits im letzten Teil vorgestellt, können Sie die persönlichen Daten, welcher der Nutzer mit der Anwendung teilt, in der eigenen Datenbank ablegen. Es ist genau dieses, was stets von Datenschützern kritisiert wird, da manchen Anwendern nicht bewusst ist, dass die Daten an Dritte so indirekt weitergegeben werden.

Lesetipp: Wichtige Informationen zum Thema Facebook und Datenschutz finden Sie in einem separaten Dr.-Web-Beitrag (Link).

Als Beispiel werden wir lediglich den Namen und die Benutzerkennung des Facebook Nutzers abspreichern. Im letzten Teil wurde gezeigt, wie sie etwa über FQL-Abfragen noch weiteren Daten entnehmen können. Für die Illustration wird hier jedoch lediglich ein minimalistischer Datenabruf durchgeführt.

Die verwendete MySQL Tabelle kann mit folgendem Code erzeugt werden:

CREATE TABLE IF NOT EXISTS `fb_quiz` (
  `id` int(11) NOT NULL auto_increment,
  `uid` int(11) NOT NULL,
  `first_name` varchar(50) NOT NULL,
  `last_name` varchar(50) NOT NULL,
  `result` float NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `uid` (`uid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2

Der vollständige Code der Anwendung

<?php
// die Facebook PHP Client-Library einfügen
include_once 'php/facebook.php';
// Ihr API Schlüssel
$api_key = '';
$secret  = '';
// eine Objektinstanz erzeugen
$facebook = new Facebook($api_key, $secret);
//wird verwendet, sodass die Seite den Facebook Look hat - also mit Tabnavigation
$facebook->require_frame();
//Fordert den Nutzer auf, der Applikation den Zugriff zu gewähren
$user = $facebook->require_login();
//Datenbanksetup
$connid=mysql_connect("localhost","", "") or die("Verbindungsversuch fehlgeschlagen");
mysql_select_db("devmag", $connid) or die("Konnte die Datenbank nicht waehlen.");
function DisplayRanking() {
 echo "<h2>Die Bestenliste</h2>";
 //Ranking darstellen
 $sql = "SELECT uid, result FROM `fb_quiz` ORDER BY result DESC LIMIT 10";
 if(!$erg = mysql_query($sql)) {
 echo "fehler<br/>";
 }
 $erg2 = mysql_fetch_array($erg, MYSQL_ASSOC);
 ?><br/>
  <table border="0">
  <tr><td>Nutzer</td><td>Punktzahl</td></tr>
 <?php
 if(count($erg2) >= 2 && !isset($erg2['uid']) ) {
  foreach($erg2 as $elem) {
  echo "<tr><td><fb:profile-pic uid=\"".$elem['uid']."\" size=\"square\"/></td><td>".$elem['result']."</td></tr>";
  }
 }
 else {
 echo "<tr><td><fb:profile-pic uid=\"".$erg2['uid']."\" size=\"square\"/></td><td>".$erg2['result']."</td></tr>";
echo "</table>";
}
function RetrieveData($user, $score, $facebook) {
 $fql = "SELECT last_name, first_name FROM user WHERE ".$user. " IN (uid)";
 $userDetails = $facebook->api_client->fql_query($fql);
 $sql = "INSERT INTO fb_quiz VALUES ('','".$user."','".$userDetails[0]['first_name']."','".$userDetails[0]['last_name']."','".$score."');";
 mysql_query($sql);
}
function CheckQuizTaken($user) {
$sql = "SELECT uid FROM fb_quiz WHERE uid='".$user."'";
 $num = mysql_num_rows(mysql_query($sql));
 if($num != 0) {
 return false; }
 else {
 return true;
 }
}
function FriendSelect($facebook, $user) {
//die UIDs aller Freunde ermitteln, welche die Anwendung bereits hinzugefügt haben
 $fql = "SELECT uid FROM user WHERE is_app_user = 1 AND uid IN (SELECT uid2 FROM friend WHERE uid1 = ".$user.")";
 $res = $facebook->api_client->fql_query($fql);
 //das Ergebnis der Abfrage ist in einem zweidimensionalen Array der Form $res[$i][0]['uid'], wobei $i Zählvariable ist
 $friends = "";
 //aus dem Ergebnis Array ein String machen, mit Kommatrennung, da wir das als Attribut für unser FBML Element verwenden  können
 for($i=0; $i<count($res);$i++) {
  if($i==0) {
   if(!isset($res[0]['uid'])) {
   $friends = "";
   }
   else {
   $friends = $res[0]['uid'];
   }
  }
  else {
   $friends = $friends.",".$res[$i]['uid'];
  }
 }
 $invitationContent ="<fb:name uid=\"".$user."\" firstnameonly=\"true\" shownetwork=\"false\"/> hat sich im <a  href=\"http://apps.facebook.com/cook-off/\">Webgeek Quiz</a> versucht und dachte, dass du es auch ausprobieren  solltest!\n"."<fb:req-choice url=\"".$facebook->get_add_url()."\" label=\"Put Webgeek on your profile\"/>";
 ?>
 <fb:request-form action="index.php?action=step2" method="post" type="cook-off" content="<?php echo  htmlentities($invitationContent,ENT_COMPAT,'UTF-8'); ?>">
 <fb:multi-friend-selector actiontext="Hier ist die Liste deiner Freunde, die sich noch nicht probiert haben!"  exclude_ids="<?php echo $friends; ?>" /></fb:request-form>
<?php
}
if (isset($_GET["action"])) {
 if($_GET["action"] == 'step1')
 {
  DisplayRanking();
 ?>
  <p>Hallo <fb:name uid='<?php echo $user?>' capitalize="true" firstnameonly="true" useyou="false" linked="true"/>,  bevor es richtig los geht -- lade doch deine Freunde ein.</p>
 <?php
 FriendSelect($facebook, $user);
 echo "Oder einfach <a href=\"index.php?action=step2\">hier</a> weiter.";
 }
 elseif($_GET["action"] == 'step2')
 {
 if(CheckQuizTaken($user)) {

 echo "<fb:iframe src=\"http://www.devmag.net/fb/form.html\" scrolling=\"true\" smartsize=\"true\"></fb:iframe>";
 }
 else {
 echo "<h1>Sie haben das Quiz schon beantwortet</h1>";
  DisplayRanking();
 }
 }
 elseif($_GET["action"] == 'step3')
 {
 //Formular auswerten
 $score = "0";
 if($_POST['element_1'] == "1") { $score += 1; }
 if($_POST['element_2'] == "1024") { $score += 1; }
 if($_POST['element_4'] == "1") { $score += 1; }
 if($_POST['element_5'] == "1") { $score += 1; }
 if($_POST['element_6'] == "1") { $score += 1; }
 if($_POST['element_7'] == "1") { $score += 1; }
 if($_POST['element_8'] == "1") { $score += 1; }
 if($_POST['element_9'] == "1") { $score += 1; }
 if($_POST['element_10'] == "1") { $score += 1; }
 if($_POST['element_3_3'] == "1970") { $score += 0.5; }
 if($_POST['element_3_2'] == "01") { $score += 0.25; }
 if($_POST['element_3_1'] == "01") { $score += 0.25; }
 RetrieveData($user, $score, $facebook);
 echo "<center><h1>Dein Ergebnis: ".$score." von 10 Punkten.</h1><br/>";
 DisplayRanking();
 echo "</center>";
}
}
else {
?>
<p>Hallo <fb:name uid='<?php echo $user?>' capitalize="true" firstnameonly="true" useyou="false" linked="true"/>, nimm hier an unserem Quiz teil und finde heraus, ob du ein Geek bist.</p>
<h2><a href="index.php?action=step1">Quiz starten</a></h2>
<?php
}
?>

Wichtige Stellen im Code

Für den eigentlichen Programmablauf verwenden wir über GET übermittelte Schritte. Das ist eine sehr primitive Benutzersteuerung. Wie oben bereits erwähnt, kann man dies professioneller und vor allem Hackangriffsicherer gestalten.

Das eigentliche Formular für das Quiz wird über ein Iframe eingebunden, an der Stelle

if(CheckQuizTaken($user)) {
  echo "<fb:iframe src=\"http://www.devmag.net/fb/form.html\" scrolling=\"true\" smartsize=\"true\"></fb:iframe>";
}

Dieses Seite beinhält das Quiz in einem Formular, welches die Daten dann an die Facebook Anwendung über Post übermittelt.

Das Formular selbst wird dann im dritten Schritt ausgewertet über die mit $_POST[] übermittelten Eingaben des Nutzers. Wie Sie sehen, können Sie jetzt wirklich leicht erahnen, wie sie im Quiz eine gute Punktzahl erreichen können. Das Formular selbst wurde über einen schlichten Online-Generator erzeugt.

Damit Codebestandteile mehrfach verwendet werden können, wurden vier Funktionen definiert:

  • FriendSelect($facebook, $user),
  • CheckQuizTaken($user),
  • DisplayRanking() und
  • RetrieveData($user, $score, $facebook).

Die Namen sind eigentlich selbsterklärend. Die Funktion FriendSelect() erzeugt den Friend-Selektor, den wir uns im vorherigen Teil gebastelt haben. Die Funktion DisplayRanking() erzeugt eine Liste der Top-10-Teilnehmer des Quizes. Hier könnten Sie natürlich noch einiges mehr machen, so könnten Sie nicht nur die Top 10 ausgeben sondern auch dem Nutzer mitteilen, auf welchem Platz er liegt, etwa im Vergleich zu seinen Freunden, die das Quiz ebenfalls beantwortet haben. Die Funktion RetrieveData() ermittelt zunächst die Daten von der Facebook API und hinterlegt diese dann in ihrer Datenbank.

Diese einfache Anwendung zeigt, wie leicht der Einstieg in die Facebook-Anwendungsentwicklung mit PHP sein kann. Viel Spass dabei!

(mm),

Thiemo Fetzer

Thiemo Fetzer lebt seit 2008 in London und promoviert dort im Fachbereich "Entwicklungsökonomie" an der London School of Economics. Zuvor hat er Wirtschaftswissenschaften, Mathematik und Informatik in Magdeburg und Ulm studiert.

3 Kommentare

  1. Sehr ausführliches Tutorial, respektive Einführung in die Entwicklung von Facebook Apps.
    Ich werde mir dies nun nochmals im Detail anschauen und direkt auf meiner eigenen Site/ Page umsetzen. Natürlich mit leichten Modifikationen, aber die Basis bleibt dieses geniale Tut.

    Danke an dieser Stell für Deine Arbeit!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.