Accueil / Archives V4

Tutoriels Cult3D : Le Click Tracking d\'objet Cult3D.

Cult 3D : Le Click Tracking d'objet Cult3D.

A travers ce tutorial nous allons essayer de réaliser une application capable de récupérer et gérer les évènements fait par le client.

Ce tutorial se déroulera en 3 étapes :

Création de l'objet cult (export max4 puis événements sous cult designer)
Réalisation d'une applet java capable d'insérer les évènements dans une base de données Mysql
Réalisation des pages nécessaires à la visualisation des évènements en php

Vous aurez besoin des logiciels suivants si aucun équivalent n'est installé :

Vous devrez par ailleurs disposer d'un serveur web doté des extensions php3 et MySql

Première étape : Export max4 puis import dans Cult Designer :

Pour cet exemple nous nous contenterons de faire une scène très simple avec deux objets 3d, une boule et un carré.
Dans File-->export choisissez Cult3D Designer .

Vous pouvez télécharger le fichier Max4 ici !

Importons notre objet Cult dans le Cult Designer pour y rajouter l'interactivité.
Dans "File-->Add Cult3D designer file "
pointez vers notre fichier exporté depuis Max pour l'ajouter à notre projet Cult.

Placez un élément WorldStard (drag/drop) sur l'EventMap de Cult Designer,
Dans les "Object Motion" des "Action" sélectionnez "Arcball" et placez-le sur l'icône WorldStart.
En déposant cette action sur l'objet Worldstart une connexion entre ces deux objets devrait se faire.
En cliquant de droit sur l'icône de l'arcball vous pouvez ajouter tous les objets de votre scène qui seront associés à cette action. En l'occurrence la boule et la box.

Nous disposons maintenant d'une scène Cult3D contenant deux objets en 3D que nous pouvons sélectionner et faire tourner.
Nous allons maintenant ajouter les évènements qui déclencheront le signal d'insertion dans la base de données MySql.
La méthode est très simple, grâce à l'action "Send Message to Host" de Cult Designer, nous pouvons directement dialoguer avec les objets de notre page HTML finale. Nous lui passerons uniquement le nom de l'action qu' effectue le client. Une applet disposée dans notre page Html se chargera de récupérer l'information et de la transmettre au serveur qui gérera la base de données MySql.

Déposez un objet "Left mouse click on object" dans l'event map, glissez / déposez sur l'icône de l'évènement une action "send message to host" (connexion-->Send Message to Host)
Cliquez de droit sur l'icône de l'évènement et choisissez "paramètres", une fenêtre vous propose alors de sélectionner les objets liés à cet évènement.
Pour distinguer les évènements click sur chacun des objets nous ajouterons uniquement un objet et appliquerons cette procédure pour chaque objet de notre scène.

Sur l'icône de notre action "Send message to Host" cliquez de droit et sélectionnez "Détails", ajoutez-y le nom de l'évènement qui sera transmis à l'applet pour l'insérer dans la base de données.

Sauvez votre fichier, puis exportez votre scène. Faites File-->Save Internet file, et donnez un nom pour votre ficher exporté.
Prenez un éditeur text et créez un fichier html vierge, enregistrez-le à côté de votre fichier .co (fichier exporté depuis Cult Designer).

Le code ci-dessous vous permet de visualiser votre fichier Cult à l'intérieur d"une page html.
Vous pouvez copier / coller le code sur votre fichier html vierge ou télécharger la page ici !

Rajoutons maintenant le code qui va nous permettre de recevoir la valeur passée de l'objet Cult3D vers notre page html. Notre applet n'étant pas encore prête nous allons juste récupérer la valeur de notre évènement et l'afficher dans une boite d'alerte java script.
Pour cela nous incluons à notre page html une référence vers les fonctions javascript fournies par Cult Designer pour récupérer et initialiser la fonction Send Message to Host.
Vous pouvez télécharger la page de l'exemple ici !
Vous pouvez aussi récupérer les fonctions java script ici !

<SCRIPT LANGUAGE="javascript" SRC="Cult3D.js"></SCRIPT>
<SCRIPT LANGUAGE=javascript>
<!--

var Cult3D;
function initCult()
{
     Cult3D=new Cult3D_Object("MsgObject");
     if (typeof(Cult3D)!="object")
     alert("Nothing found");
}
function receivedMsg()
{
      alert("Evenement cult : " + Cult3D.getLastMessage());
      initCult();
      return true;
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE=javascript FOR=MsgObject EVENT=OnLoadFinished>
<!--
if (isIE())
{
      initCult();
}

//-->
</SCRIPT>
<SCRIPT LANGUAGE=javascript FOR=MsgObject EVENT=OnSendMessage>
<!--

if (isIE())
{
receivedMsg();
}

//-->
</SCRIPT>

<OBJECTID="MsgObject" classid="clsid:31B7EB4E-8B4B-11D1-A789-00A0CC6651A8"
         codebase="http://www.cult3d.com/download/cult.cab#version=5,1,0,0"
         width=300 height=400>
         <PARAM NAME="SRC" VALUE="click_tracking.co">
<EMBED NAME="MsgObject" PLUGINSPAGE="http://www.cult3d.com/newuser/index.html"
         SRC="click_tracking.co"
         WIDTH="300" HEIGHT="400"
         type="application/x-cult3d-object"
         onLoadFinished='initCult()'
         onSendMessage='receivedMsg()'>
</EMBED>
</OBJECT>

</BODY>
</HTML>

Deuxième étape : Création de l'applet qui va transmettre les données vers la base de données.

Cette applet va nous permettre d'envoyer une requête au serveur web ( attention : web, pas au serveur sql ). Pour des raisons de sécurité Java ne permet pas d appeler une url différente que celle d'où elle est chargée, ni d'interroger cette url sur un autre port.
Il faudrait pour cela signer numériquement l'applet et procéder à l'intégration de cette signature, ce qui compliquerait un peu trop ce tutorial.
De plus dialoguer avec une base de données directement imposerait d'ouvrir un port qui serait bien souvent fermé par la majeure partie des firewall pour des causes de sécurité.
Nous allons donc tout simplement envoyer les données dans l'en-tête http d'une page php qui se chargera d'insérer les variables dans la base de données Mysql.
Cela nous simplifie grandement la tâche puisque cette solution nous permet de toujours rester dans le domaine de l'applet et en plus de rester sur le port 80 qui lui ne sera pas interdit sur les firewall puisque c'est le port de communication le plus courant pour les pages internet.

Code de l'applet :

import java.awt.*;
import java.applet.*;import java.net.InetAddress;
import java.net.UnknownHostException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.net.*;
import java.net.URL;
import java.io.*;

Code de la page php :

public class txarea extends java.applet.Applet implements Runnable
{
     String str= new String();
     TextArea tx;
     Thread runner;

     public void start()
     {
          if (runner == null)
           {
               runner = new Thread(this);
               runner.start();
          }
     }

     public void stop()
     {
          if(runner != null)
           {
               runner.stop();
               runner = null;
          }
     }

     public void run()
      {
          while(true)
           {
          repaint();
          try { Thread.sleep(100); }
          catch(InterruptedException e) { }
          }
     }

     public void ecris(String s)
     {
     check = 0;
     d = Toolkit.getDefaultToolkit().getScreenSize();
     resolution = Toolkit.getDefaultToolkit().getScreenResolution();
     SimpleDateFormat simpledateformat = new SimpleDateFormat("dd.MM.yyyy");
     SimpleDateFormat simpledateformat1 = new SimpleDateFormat("hh:mm:ss a zzz");
     dateY = new Date();
     time = new Date();
     date = simpledateformat.format(dateY);
     heure = simpledateformat1.format(time);
     try
          {
          info = InetAddress.getLocalHost();
          HostIp = info.getHostAddress();
          HostName = info.getHostName();
          OSName = System.getProperty("os.name");
          OSArchitecture = System.getProperty("os.arch");
          OSVersion = System.getProperty("os.version");
          JavaVersion = System.getProperty("java.version");
          JavaVendor = System.getProperty("java.vendor");
          JavaVendorURL = System.getProperty("java.vendor.url");
          }
     catch(UnknownHostException ex) {}
     String str = "info=" + info + "&HostIp=" + HostIp + "&HostName=" + HostName + "&OSName="      + OSName + "&OSVersion=" + OSVersion + "&OSArchitecture=" + OSArchitecture +      "&JavaVersion=" + JavaVersion + "&JavaVendor=" + JavaVendor + "&resolution=" +      resolution + "&date=" + date + "&heure=" + heure;
     try
    {
          URL theURL;
          theURL = new URL(getDocumentBase(),"insert.php3?" + str);
          showStatus(str);
          LineNumberReader readerHttp = new LineNumberReader(
          new InputStreamReader(theURL.openStream())
          );
           readerHttp.close();
      }catch (IOException e) {}
}

     public void init()
     {

     }

Color bgColor;
private static int check;
private InetAddress info;
private String HostName;
private String HostIp;
private String BrowserName;
private String OSName;
private String OSVersion;
private String OSArchitecture;
private String JavaVersion;
private String JavaVendor;
private String JavaVendorURL;
private String date;
private String heure;
private String BaseUrl;
private int resolution;
private Dimension d;
private Date dateY;
private Date time;
}

<?
//Parametres a configurer pour acceder a votre serveur MySql
$myserver='localhost';
$myname='votre login';
$mypass='Votre password';
$mybase='Le nom de votre base de donnée';

//Création de l'objet connection
$myconn = mysql_connect($myserver, $myname, $mypass);
mysql_select_db($mybase, $myconn) or die("Connection au serveur SQL impossible");
//Format de la date pour insertion dans la BDD
$hours=2;
$date=explode(",", date("H,i,s,m,d,Y"));
$dupdate=date("Y-m-d", mktime($date[0],$date[1]-$hours,$date[2],$date[3],$date[4],$date[5]));
$duphours=date("H:i:s", mktime($date[0],$date[1]-$hours,$date[2],$date[3],$date[4],$date[5]));

if(!isset($evenement))
{
//Récuperation de l'ip du client
$REMOTE_ADDR=$HTTP_SERVER_VARS["REMOTE_ADDR"];
//Récuperation du Host du client
$REMOTE_HOST=$HTTP_SERVER_VARS["REMOTE_HOST"];
//Requête Sql qui l'on vas éxecuter avec l'objet connection
$sql = "INSERT INTO Trace_cult (id,idObjet,session, HostIp, filename,REMOTE_ADDR, REMOTE_HOST, OSName, OSVersion, OSArchitecture, JavaVersion, JavaVendor, resolution, date, heure, evenement) VALUES ('', '".$idObjet."', '".$session."', '".$HostIp."', '".$filename."','".$REMOTE_ADDR."', '".$REMOTE_HOST."', '".$OSName."', '".$OSVersion."', '".$OSArchitecture."', '".$JavaVersion."', '".$JavaVendor."', '".$resolution."', '".$dupdate."', '".$duphours."', '".$evenement."')";
//Execution de la requete SQL
$mysql_result = mysql_query($sql, $myconn);

}

Nous avons donc maintenant notre objet Cult d'inséré dans notre page, notre applet compilée et prête à être insérée dans notre page html et notre page php prête à recevoir l'information et l'insérer dans notre base de données.
Vous pouvez télécharger le source Java ici, le source Java compilé ici, et télécharger le source php ici !

Voici le code de votre page HTML une fois l'applet intégrée :

<SCRIPT LANGUAGE="javascript" SRC="Cult3D.js"></SCRIPT>
<SCRIPT LANGUAGE=javascript>
<!--

var Cult3D;
function initCult()
{
     Cult3D=new Cult3D_Object("MsgObject");
     if (typeof(Cult3D)!="object")
     alert("Nothing found");
}
function receivedMsg()
{
      document.click_tracking.ecris(Cult3D.getLastMessage());
      initCult();
      return true;
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE=javascript FOR=MsgObject EVENT=OnLoadFinished>
<!--
if (isIE())
{
      initCult();
}

//-->
</SCRIPT>
<SCRIPT LANGUAGE=javascript FOR=MsgObject EVENT=OnSendMessage>
<!--

if (isIE())
{
receivedMsg();
}

//-->
</SCRIPT>

<OBJECTID="MsgObject" classid="clsid:31B7EB4E-8B4B-11D1-A789-00A0CC6651A8"
         codebase="http://www.cult3d.com/download/cult.cab#version=5,1,0,0"
         width=300 height=400>
         <PARAM NAME="SRC" VALUE="click_tracking.co">
<EMBED NAME="MsgObject" PLUGINSPAGE="http://www.cult3d.com/newuser/index.html"
         SRC="click_tracking.co"
         WIDTH="300" HEIGHT="400"
         type="application/x-cult3d-object"
         onLoadFinished='initCult()'
         onSendMessage='receivedMsg()'>
</EMBED>
</OBJECT>
<applet code=click_tracking.class width=0 height=0 name="click_tracking"></applet>

</BODY>
</HTML>

Téléchargez la page HTML finale ici !

Troisième étape : Création de la base de données, et création des pages de statistiques.

Nous allons maintenant procéder à la mise en route de la base de données et à la création des pages php qui permettront de visualiser des statistiques basics des évènements fait par le client sur l'univers 3D de votre page.

Tout d'abord il vous faut créer une base de données et créer les tables nécessaires au bon fonctionnement de l'application.

CREATE TABLE Evenements (
         id int(11) DEFAULT '0' NOT NULL auto_increment,
         idObjet int(11),
         session varchar(250),
         evenement varchar(250),
         PRIMARY KEY (id)
);

CREATE TABLE Objet (
         id int(11) DEFAULT '0' NOT NULL auto_increment,
         nom varchar(250),
         description text,
         PRIMARY KEY (id)
);

CREATE TABLE Trace_cult (
         id bigint(20) DEFAULT '0' NOT NULL auto_increment,
         idObjet int(11),
         session varchar(250),
         HostIp varchar(250),
         filename varchar(250),
         REMOTE_ADDR varchar(250),
         REMOTE_HOST varchar(250),
         OSName varchar(250),
         OSVersion varchar(250),
         OSArchitecture varchar(250),
         JavaVersion varchar(250),
         JavaVendor varchar(250),
         resolution varchar(250),
         date date,
         heure time,
         evenement varchar(250),
         PRIMARY KEY (id),
         KEY id (id),
         UNIQUE id_2 (id)
);

Après avoir exécuté les 3 requêtes sql, nous pouvons maintenant passer aux pages php.
Nous allons créer 3 pages permettant de visualiser les informations insérées dans la base de données.
La première va nous permettre de sélectionner les statistiques par objet. Vous pourrez alors choisir de visualiser les statistiques associés à l'objet sélectionné.

La première page "index.php3" nous permet de sélectionner les statistiques d'un objet précis.
La seconde page permet de visualiser les sessions effectuées sur cet objet. Une session étant une connexion d'un ordinateur client vers un ordinateur serveur. Le browser et le serveur reconnaissent le client grâce à un numéro identificateur qui est associé à la connexion. Php 4 contient toute une série de fonctions pour gérer les sessions, par contre php3 en est démuni. Pour pouvoir être compatible avec le plus grand nombre de configurations nous allons nous-mêmes gérer les sessions et placer cet identificateur unique dans un cookie. Cette opération est essentielle à notre application car sans elle nous ne serions pas capables de tracer les évènements effectués sur l'objet Cult par individu.
La troisième page php "évènement.php3" nous permet donc de visualiser les évènements fait dans chaque session créée.

Index.php3

<table width="100%" border="0" cellspacing="2" cellpadding="2" bgcolor="#003366">
<tr>
<td width="10">id</td>
<td>Objet</td>
<td>Description</td>
</tr>
<?
$myconn = mysql_connect($myserver, $myname, $mypass);
mysql_select_db($mybase, $myconn) or die ("connection impossible");
$sql = ("SELECT * FROM Objet ");
$film = mysql_query($sql, $myconn);
while($row = mysql_fetch_row($film))
    {
    @$id=stripslashes($row[0]);
    @$nom=stripslashes($row[1]);
    @$description=stripslashes($row[2]);

?>
<tr>
<td"><?=$id;?></td>
<td><a href="session.php3?id=<?=$id;?>"><?=$nom;?></a></td>
<td ><?=$description;?></td>
</tr>
<?}?>
</table>

session.php3

<table>
<tr>
<td>id</td>
<td>session</td>
<td>REMOTE_ADDR </td>
<td>REMOTE_HOST</td>
<td>date</td>
<td>heure</td>
</tr>
<?
$myconn = mysql_connect($myserver, $myname, $mypass);
mysql_select_db($mybase, $myconn) or die ("connection impossible");
$sql = ("SELECT id, session, REMOTE_ADDR, REMOTE_HOST, date, heure FROM Trace_cult where idObjet ='".$id."' ");
$film = mysql_query($sql, $myconn);
while($row = mysql_fetch_row($film))
{
@$sid=stripslashes($row[0]);
@$session=stripslashes($row[1]);
@$strREMOTE_ADDR=stripslashes($row[2]);
@$strREMOTE_HOST=stripslashes($row[3]);
@$strdate=stripslashes($row[4]);
@$strheure=stripslashes($row[5]);

?>
<tr>
<td><?=$sid;?></td>
<td><a ref="evenement.php3?id=<?=$id;?>&session=<?=$session;?>"><?=$session;?></a></td>
<td><?=$strREMOTE_ADDR;?></td>
<td><?=ereg_replace(" ","",$strREMOTE_HOST);?></td>
<td><?=ereg_replace(" ","",$strdate);?></td>
<td><?=ereg_replace(" ","",$strheure);?></td>
</tr>
<?}?>
</table>

evenement.php3

<table>
<tr>
<td>id</td>
<td><b>idObjet</td>
<td><b>Session</td>
<td><b>Evenement</td>
</tr>
<?
$myconn = mysql_connect($myserver, $myname, $mypass);
mysql_select_db($mybase, $myconn) or die ("connection impossible");
$sql = ("SELECT * FROM Evenements where session ='".$session."' and idObjet = '".$id."'");
$film = mysql_query($sql, $myconn);
while($row = mysql_fetch_row($film))
{
@$id=stripslashes($row[0]);
@$idObjet =stripslashes($row[1]);
@$session=stripslashes($row[2]);
@$evenement=stripslashes($row[3]);

?>
<tr>
<td><?=$id;?></td>
<td><?=$idObjet;?></td>
<td><?=$session;?></td>
<td><?=$evenement;?></td>
</tr>
<?}?>
</table>

Nous avons maintenant terminé notre application. Voyons le résultat...
Ouvrons la page avec notre objet Cult, et ouvrons notre page de statistiques..
Cliquez sur la première ligne qui référence l'objet de ce tutorial, vous avez toutes les sessions créées, Cliquez sur le numéro de session, et vous avez toutes les actions faites dans cette section.
Amusez-vous à repérer votre session et rafraîchissez votre page après chaque action dans votre objet Cult pour voir en temps réel toutes les actions s'inscrire dans votre base de données.

31/5/2001,
3DVF.