Suche

[BowlingX]

Hi@all!

Ich möchte mit diesem Post ein Tuturial schreiben, wie man eine Bookmark Funktion (wie auf meiner Seite: http://portal.genutec-studios.de/index.php) realisieren kann!

  1. Warum eine Bookmarkfunktion?

Nun ja...Bei vielen Seiten erscheinen täglich mehr als 10 Artikel (vgl. phpnuke.org)! Da kommt bei einigen Besuchern schonmal das Phänomen "NewsÜberFluss" auf!

Mit einer Bookmark Funktion kann man sich "interessante" Artikel über mehrere Tage oder Wochen (bis man seine Cookies wieder mal geleert hat *gg*) speichern!

Diese Idee der sog. "Clippings" stammt übrigens NICHT von MIR! (Was ich hiermit auch nochmal AUSDRÜCKLICH sagen möchte...)

Die erste (nach meiner Kenntnis) Verwendung dieser Clippings auf einer "Nuke" Seite fand ich auf dem PostNuke Portal http://www.portalzine.de! Sein "Geheimnis" wollte der Autor dieser Seite jedoch nicht preisgeben, bzw. er hatte keine Zeit!     (sollte dies nicht stimmen solle er mich doch des besseren belehren!)

Die Grundidee ist ein JavaScript, welches nach einer ID Artikel in ein Cookie speichert und auch wieder abruft! (schauts euch auf meiner Seite an!) Der Entwickler dieses Scriptes ist übrigens John Weir (www.smokinggun.com)!

So: Fangen wir also an
  2. Was benötige ich?
Ich habe dieses Script unter einem VKP (Nuke 5.5; VKPMxxx; Maax Design) laufen! Dieses Tuturial sollte auf alle anderen Nuke Versionen übertragbar sein! (ausser V.1-4)

Zunächst braucht ihr das JavaScript Script! Ihr findet es unter dieser URL:

http://pro.html.it/esempio/javascript/clip/clippings.js

Das kopiert ihr am besten auf euren Webserver in "/PfadderNukeInstallation/javascript/".

Hinweis: Wer sich ein wenig mit JavaScript auskennt, kann diese Datei auch editieren und ins Deutsche übersetzen! Oder direkt meine Clippings.js herunterladen:

http://portal.genutec-studios.de/javascript/clippings.js

3. Let's start!

Ok..fangen wir an! Zunächst müsst ihr das JavaScript in eure NukeInstallation Importieren! (Einbinden!)

Das machen wir indem ihr folgende Zeile code NACH dem PHP Schlusstag (?>) einbindet:

Dieser Code kommt in die Datei "my_header.php" welche im Verzeichnis "includes" zu finden ist!

Code Auswählen Erweitern

<script src="javascript/clippings.js" type=text/javascript></script>

So! Der erste Schritt ist getan...kommen wir nun zum zweiten! - Das Theme anpassen...*hehe*  :wink:

Öffnet die theme.php und sucht nach der Funktion "themeindex"!
Nun sucht ihr nach folgendem Tag: <font class="title"><strong><font color="#FFFFFF"> (oder so ähnlich)

Danach fügt ihr folgenden Code ein: (und ergänzt ihn!)

Code Auswählen Erweitern

$link = mysql_connect( "DEIN_MYSQL_SERVER","BENUTZERNAME","PASSWORD");
if(!$link)
die("Da geht wieder wat nicht....");
$datenbank = "DATENBANK";
mysql_select_db($datenbanl);
$sql = "SELECT `sid`  FROM `nuke_stories` WHERE `title` = '$title'";
$ergebnis1 = mysql_query($sql);
    while($datensatz = mysql_fetch_array($ergebnis1) )
    {
echo"<a href='#' id='clp$datensatz[sid]'><img src='images/clippings.gif' border='0'></a>";
echo "<script type='text/javascript'>";
    echo "allClippings[allClippings.length] = new Clipping($datensatz[sid],'$title','modules.php?name=News&file=article&sid=$datensatz[sid]');</script>";
}

So! Menschen die sich mit PHPNuke auskennen werden jetzt sagen: "JA WARUM BENUTZT DU DENN NICHT DIE FUNKTION sql_query???"

Dann antworte ich: "KOMISCHERWEISE GEHT ES NICHT..." Also bitte nicht nachfragen! Ich habs probiert... Wer eine andere Lösung findet (die aber bitte auch probiert wurde) soll sie mir sagen!

Wofür ist dieser Code nun verantwortlich?
Nun...da ich die Story ID des Artikels NICHT einzeln abfragen kann (hat FB wohl vergessen...) muss ich mir die erst mühsam per sql Befehl abfragen! Das einzige Problem hierbei ist: Was mache ich wenn es zwei Artikel mit selben Namen habe...     - ich hoffe das kommt nicht vor!

So...nun sind wir aber noch NICHT fertig! Irgendwo müssen die Storys ja auch abgefragt werden...
Ich habe mir in der Navigationsleiste einen neuen Link gemacht! Er nennt sich "Bookmarks"! Klickt man auf diesen Link Öffnet sich per JavaScript ein Layer worin man alle gespeicherten "Clippings" anklicken kann!

Und wie schafft man das nun wieder???
Nun...im prinzip ist es einfach:

Ihr geht in die funktion "themeheader" und fügt folgenden JavaScript Code ein:

Code Auswählen Erweitern

<script language="JavaScript">
//Layer Code by david@genutec-studios.de
msie = "Microsoft Internet Explorer";
ne = "Netscape";
browser = "undefined";

var lays = new Array(4);
lays[0] = "layer1";
//Wenn es ein Internet Explorer ist:
if (navigator.appName == msie)
{
browser = "msie";
ver = parseFloat(navigator.appVersion.substr
(navigator.appVersion.lastIndexOf("MSIE") + 4, 4));
}

// Wenn der Browser Netscape ist:
if (navigator.appName == ne)
{
browser = "ne";
ver = parseFloat(navigator.appVersion.substr(0,4));
}
// Funktion zum verstecken des Layers:
function hide(laypass)
{
if (browser == 'msie')
{
for (var i = 0; i <= lays.length - 1; i++)
{
document.all['layer1'].style.visibility="hidden"
}
document.all[laypass].style.visibility="hidden"
}

// Netscape 4.x Code
if (browser == 'ne' && ver < 5)
{
for (var i = 0; i <= lays.length - 1; i++)
{
document.layers['layer1'].visibility="hide"
}
document.layers[laypass].visibility="hide"
}

// Netscape 6.x Code
if (browser == 'ne' && ver >= 5)
{
for (var i = 0; i <= lays.length - 1; i++)
{
document.getElementById('layer1').style.visibility = "hidden";
}
document.getElementById(laypass).style.visibility = "hidden";
}
}
// Funktion zum ZEIGEN des Layers!
function showIt(laypass)
{
// IE Code
if (browser == 'msie')
{
for (var i = 0; i <= lays.length - 1; i++)
{
document.all['layer1'].style.visibility="hidden"
}
document.all[laypass].style.visibility="visible"
}

// Netscape 4.x Code
if (browser == 'ne' && ver < 5)
{
for (var i = 0; i <= lays.length - 1; i++)
{
document.layers['layer1'].visibility="hide"
}
document.layers[laypass].visibility="show"
}

// Netscape 6.x Code
if (browser == 'ne' && ver >= 5)
{
for (var i = 0; i <= lays.length - 1; i++)
{
document.getElementById('layer1').style.visibility = "hidden";
}
document.getElementById(laypass).style.visibility = "visible";
}
}
</script>

ACHTUNG: Vergesst das "echo" nicht!
Dann braucht ihr noch ein Layer! (Am besten ihr positioniert es direkt unter den Link:)

Code Auswählen Erweitern

<div id="layer1" style="position: absolute; visibility:hidden; left:341px; top:160px; width: 204px; height: 149px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">
        <table width="101%" height="150" border="1" bordercolor="#000000" bgcolor="#000000">
          <tr>
            <td bordercolor="#000000" bgcolor="#FFFFFF"><p align="center"> 
              <div id="demo">
<div id="clippingsMenu">
<div id="clippingsContainer"></div>
 
<div id="clippingControls">
<div id="clippingsCounter"></div>
                    <a href="javascript:eventClearReadClippings()" class="mI">Gelesene Bookmarks löschen
                    </a> <a href="javascript:eventClearAllClippings()" class="mI">Alle
                    Bookmarks löschen</a>
                   
                    <a href="javascript:hide('layer1')"> Schließen</a>
                  </div>
                </div>
              </div>

              <p>  </p>
              </td>
          </tr>
        </table>
      </div>

Der Bookmark link wird dann mit folgendem Code aufgerufen:

Code Auswählen Erweitern

<a href="javascript:showIt('layer1')"> Meine
        Bookmarks</a>

Und fertig ist die Bookmark Funktion!
  by David Heidrich @ Genutec Studios


[Editiert am 28/4/2003 von BowlingX]