Our links

Home



Tools for webmasters

pbpBB 3 Mod: intagration of pedigrees and virtual mating pages in phbBB3 forums

Two new bbCodes: one for the pedigree, another for for virtual mating pages.

1) Add BBCodes

1.1 Pedigree pages

In the administration control panel, tab "Posting", then Messages, BBCodes, "Add a new BBCode".

BBCode use:

[pedigree]{NUMBER}[/pedigree]
HTML replacement:
  <script type="text/javascript">// <![CDATA[
var htmlData{NUMBER};

function updateDiv{NUMBER}() {
if (htmlData{NUMBER}.readyState != 4)
return;
var div = document.getElementById("divPedigree{NUMBER}");
if ( htmlData{NUMBER}.readyState !== 4 ) return;
if ( htmlData{NUMBER}.status !== 200 ) {
alert("Unable to parse data!\nPlease ensure that the file has a valid path.");
}
div.innerHTML = htmlData{NUMBER}.responseText;
}

function loadHTMLdata{NUMBER}( url ) {
htmlData{NUMBER} = null;
var ie = navigator.userAgent.toLowerCase().indexOf("msie");
if ( window.XMLHttpRequest ) {
htmlData{NUMBER} = new XMLHttpRequest();

else if (( ie !== -1 ) ) {
try {
htmlData{NUMBER} = new ActiveXObject("Msxml2.XMLHTTP");
}
catch( e ) {
htmlData{NUMBER} = new XMLHttpRequest();
}
}

if ( htmlData{NUMBER} !== null ) {
htmlData{NUMBER}.onreadystatechange = updateDiv{NUMBER};

htmlData{NUMBER}.open("GET", url, true);
htmlData{NUMBER}.send( null );
} else {
alert("Your browser do not support AJAX request!");
}
}
// ]]></script>
<div id="divPedigree{NUMBER}">
<p>Chargement...</p>
</div>
<script type="text/javascript">// <![CDATA[
loadHTMLdata{NUMBER}('/pedigree.php?RQ=http://pedigree.setter-anglais.fr/genealogie/arbre.php?id={NUMBER}');
// ]]></script>
Help line:
Insert a pedigree in the message: [pedigree]numerical identifier[/pedigree]

1.2 Virtual mating page

In the administration control panel, tab "Posting", then Messages, BBCodes, "Add a new BBCode".

BBCode use:

[portee]{URL}[/portee]
HTML replacement:
<script type="text/javascript">// <![CDATA[
var idPortee;
if (idPortee == null)
idPortee = 0;
idPortee++;
document.write('<div id="divPortee' + idPortee + '"><p>Chargement...</p></div>\r\n');
function updateDivPortee(http, divName) {
if (http.readyState != 4)
return;
if ( http.status !== 200 ) {
var div = document.getElementById(divName);
div.innerHTML = "Unable to parse data!\nPlease ensure that the file has a valid path.";
return;
}
var div = document.getElementById(divName);
div.innerHTML = http.responseText;
}
function loadHTMLdataPortee( url ) {
divName = 'divPortee' + idPortee;
loadHTMLdataPorteeDiv( divName, url );
} function loadHTMLdataPorteeDiv( divName, url ) {
var htmlDataPortee = null;
url = encodeURIComponent(url);
url = url.replace(/%26amp%3B/g,'%26');
url = '/pedigree.php?RQ=' + url;
var ie = navigator.userAgent.toLowerCase().indexOf("msie");
if ( window.XMLHttpRequest ) {
htmlDataPortee = new XMLHttpRequest();
}
else if (( ie !== -1 ) ) {
try {
htmlDataPortee = new ActiveXObject("Msxml2.XMLHTTP");
}
catch( e ) {
htmlDataPortee = new XMLHttpRequest();
}
}

if ( htmlDataPortee !== null ) {
htmlDataPortee.onreadystatechange = function(){if(htmlDataPortee.readyState==4){updateDivPortee(htmlDataPortee,divName)}};
htmlDataPortee.open("GET", url, true);
htmlDataPortee.send( null );
} else {
var div = document.getElementById(divName);
div.innerHTML = "Your browser do not support AJAX request!";
}
} loadHTMLdataPortee('{URL}');
// ]]></script>
Help line:
Insert a virtual mating page: [portee]url_virtual_mating[/portee]

2) CSS style

Add at the end of the file stylesheet.css:
@import url("pedigree.css");
Create a file pedigree.css in the directory of the stylesheet.css file.
/* Pedigree CSS */
table.TabGene
{
border: 1px solid #660000;
width: 100%;
}

td.TabGene
{
border: 1px solid #808080;
padding: 4px;
border-spacing: 10px;
font-family: helvetica, sans-serif;
font-size:inherit;
color: #000000;
}

.ImageArbre {
margin:0px 0px 0px 8px;
}

img.ImageArbre {
border:1px solid #fff;
}

.PhotoCopyright
{
font-size:80%;
font-style:italic;
}

.Diaporama
{
}

div.Diaporama, div .Diaporama {
vertical-align:middle;
text-align:center;
}

.Diaporama img, img.Diaporama {
vertical-align:middle;
background-color: #fff;
border: 1px solid #660000;
padding: 4px;
margin: 4px 4px 4px 4px;
}
In the administration control pannel, go to
Administration Control Panel / Styles Tab
For each of the three tabs Template, Theme, Imageset apply "Refresh".

3) Create the intermediate loader file

Create a file in the root directory pedigree.php
<?
$Cmd = $_REQUEST['RQ'];
$T = parse_url($Cmd);

        $Host = "http://pedigree.setter-anglais.fr";
        $Url = $Host . $T['path'] . '?' . $T['query'] . '&' . 'HOST=' . $Host . '&EMBED=UTF-8';

        // envoie les bons en-têtes
        $ContentType = "text/html";
        header("Content-Type: $ContentType");

        $text = file_get_contents($Url);
        //$text = mb_convert_encoding($text, "UTF-8", "ISO-8859-1");
        echo($text);
?>

If there are problems with accented characters, change EMBED=UTF-8 by EMBED=true
Why this file? The XMLHttpRequest object in javascript can't load
data on another domain and the database of pedigrees is on another domain. So it requires this intermediate file in php to load the pedigree page from the pedigree database server.
Notes: verify that php is configured to open files on the Internet (see php documentation of fopen function). It also requires that the domain name resolution is enabled.

4) Limitations

The name of the component that contains the virtual mating page is unique, so it can be only one scope on a page.
Similarly, the javascript is loaded and each BBCode can be found duplicated on the page.

This limitation does not apply to pedigrees.

5) User manual

5.1 Pedigree

To insert a pedigree in a post:

[pedigree]numerical identifier[/pedigree]

The numarical identifier is in the url of the pedigree, in the 'id' field. It is also in the left column 'id' in a search page. For example, for the Negus' pedigree, the url is:

http://pedigree.setter-anglais.fr/genealogie/arbre.php?id=18&fn=pedigree&rq=NEGUS

Numerical identifier is 18. To insert Negus' pedigree in a post, the code is:

[pedigree]18[/pedigree]

5.2 Virtual mating

To insert a virtual mating page in a post:

[portee]url_virtual_mating_page[/portee]
Prepare the virtual mating page on setter-anglais.fr. Copy the "link" data and insert it in the BBCode [portee].

Sample:

[portee]http://pedigree.setter-anglais.fr/genealogie/portee_virtuelle.php?IDPERE=15900&IDMERE=1139&DESCRIPTION=[/portee]

5.3 Release and updates

Version 2, May 2012.

The BBCode for virtual mating can display multiple virtual mating in a single page. Update is transparent for users (no modification of syntax and user data).
Update: simply modify part "1.2 Virtual mating page" (HTML replacement code in the bbcode).

Download

Download files...