Tutorial Website durchsuchen mit den Skripten von webdesign.weisshart.de

Ein Formular zur Suche kann man auf jeder beliebigen Seite einbauen. Dabei wird mittels der Formular-Aktion lediglich auf die Seite mit den Skripten weitergeleitet. Den direkten Einbau in NOF beschreibe ich unten.

Dieses Skript ist für private Webseiten kostenlos. Kommerzielle Seiten müssen eine Lizenz erwerben. Hier geht es zum Download der Skripte.

Entpackt die herunter geladene ZIP Datei. Ihr erhaltet ein Verzeichnis:

• wdw_suche

sowie die Startseite

• suchen.php

Im Verzeichnis “wdw_suche” findet Ihr eine Datei “readme.txt”, bitte lest diese aufmerksam durch. Weiterhin findet Ihr die Konfigurations-Datei

• search_config.php

die Ihr z.B. mit Eurem “Windows-Editor” öffnen und bearbeiten könnt. Die Einstellungen, die Ihr in dieser Datei vornehmen könnt sind sehr gut beschrieben und daher eigentlich selbsterklärend.

Bitte kopiert das gesamte Verzeichnis “wdw_suche” sowie die Datei “suchen.php” in das Stammverzeichnis Eures Projektes, also dort wo sich auch Eure Startseite (index.html) befindet. Nun könnt Ihr durch die Eingabe der URL zu dieser Datei (suchen.php) das Skript bereits testen, also z.B.

www.DeineDomain.de/suchen.php

Direkter Einbau der Skripte in NetObjects Fusion

Ich wollte hier die Skripte direkt von meiner NOF-Seite aufrufen, um sie an den Style meiner Seite anzupassen.

Dazu habe ich mir dieses neue, kleine Projekt erstellt. Die Startseite heißt hier nicht “index.html” (wie von NOF automatisch generiert) sondern ich habe diese eben auch

• suchen.php

genannt und natürlich dementsprechend über

> Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung

auch .php als Dateierweiterung eingestellt, damit ich auf dieser Seite die PHP-Skripte einbauen kann. Um zu verhindern, dass NOF die Startseite automatisch “index.html” oder “index.php” nennt, stellt Ihr Folgendes ein:

> Site publizieren > in den Publizierungseinstellungen auf den Button “Erweitert” > bei Dateiname der Homepage wählt Ihr “Aktueller Seitenname”

und nennt die Home dann eben “suchen”. Somit wird verhindert, das Eure eigentliche Startseite “index.html” im Stammverzeichnis überschrieben wird.

Nun öffnet Ihr die Seite “suchen.php”, die Ihr mit den Skripten herunter geladen habt, auch wieder mit z.B. dem “Windows-Editor” und kopiert Euch die Bereiche, die Ihr auf Eurer Seite “suchen.php” von NOF benötigt, heraus. Das sind folgende Bereiche:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > fügt den Code unten am “Beginn der Seite” ein (oben keine Leerzeile lassen)

<?php
   //ob_start(); // auf manchen Servern kann es erforderlich sein, diese Zeile zu entkommentieren
   include("wdw_suche/search_config.php");
   if (isset($_GET["q"]) && $_GET["q"] != "") {
      $search_anzeige = stripslashes(htmlspecialchars($_GET["q"], ENT_COMPAT, "ISO-8859-1", false)); // PHP 5.4
      } else {
      $search_anzeige = $value;
   }
?>

Die hier verwendete CSS und das Javascript fügt Ihr folgendermaßen ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > fügt die Verlinkungen unten “Zwischen Head Tags” ein

<link rel="stylesheet" type="text/css" href="wdw_suche/wdw_suche.css" />
<script src="wdw_suche/wdw_suche.js" type="text/javascript"></script>

Jetzt zieht Ihr Euch, an der Stelle an der die Suchergebnisse angezeigt werden sollen, ein Textfeld auf die volle Breite Eures Layouts auf.

Doppelklickt das Textfeld (Cursor blinkt) und fügt den Code unten in den HTML-Code Editor des Textfeldes ein:

> Fenster “Text-Eigenschaften” > mittlere Button oben “Text” > Button “HTML”

<h1>Suchergebnisse</h1>

<div id="suchform">
  
   <form  id="search" method="get" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"   onsubmit="return showWait();">
  
      <p>
      <label for="suchbegriff">Im Projekt suchen:</label>
      <input type="text" name="q" id="suchbegriff" value="<?php echo $search_anzeige ?>" size="13" title=" Suchbegriff hier eingeben " onblur="if(this.value=='')this.value='<?php echo $search_anzeige ?>';" onfocus="if(this.value=='<?php echo $value ?>')this.value='';" />
      <input type="submit" value="Los !" />
     
      <!-- der Throbber (die Warten-Grafik) http://mentalized.net/activity-indicators/ -->
      <script type="text/javascript">
         // <![CDATA[
         document.write ('<img id="wait" height="16" width="16" src="wdw_suche/throbber3.gif" alt="bitte warten" />');
         // ]]>
      </script>
      </p>
     
   </form>
  
</div>

<div id="output">
   <?php include("wdw_suche/search.php");?>
</div>

<script type="text/javascript">
   /* <![CDATA[ */
   addEvent(window, 'load', Highlight); // wenn Highlighting gewuenscht
   addEvent(window, 'load', noshowWait); // schaltet den Throbber (die Warten-Grafik) aus
   //addEvent(window, 'load', init_klapp); // wenn die Suchtipps zu- und aufgeklappt werden sollen
   /* ]]> */
</script>

<?php
   if (isset($_GET["q"]) && $_GET["q"] != "") {
      echo '
      <script type="text/javascript">
         addEvent(window, \'load\', init_klapp); // wenn die Suchtipps nach der ersten Suche zugeklappt werden sollen
      </script>
      ';
   }
?>

... und fertig!

Wenn Ihr von anderen Seiten Eures Projektes ein Suchen-Feld bereitstellen wollt (wie ich das hier auf dieser Tutorial-Seite oben gemacht habe), so könnt Ihr den Formular-Code unten in jede beliebige Seite einbauen. Diesen fügt Ihr wieder in den HTML-Code Editor eines Textfeldes ein. Diese Seiten brauchen nicht auf .php umgestellt zu werden, da sie nur das Formular mit der Weiterleitung zu der Seite suchen.php beinhalten. Achtet auf die relative Pfadangabe (die Punkte ../) zu Eurer Startseite “suchen.php”. Hier in meinem Beispiel mit zwei Punkten = gehe ein Verzeichnis höher, wo die Seite “suchen.php” liegt.

<form id="search" method="get" action="../suchen.php">
   <p>
      <label for="suchbegriff">Im Projekt suchen:</label>
      <input type="text" name="q" id="suchbegriff" required placeholder="Suchbegriff" />
      <input type="submit" value="Los !" />
   </p>
</form>

• Bemerkungen
   
• Meine Suche wird hier ausschließlich über meine Domain NOF-Tutorials.com vorgenommen, da dies ein eigenständiges Projekt ist. Der Großteil meiner Tutorial-Seiten liegt jedoch auf meiner Domain TommyHerrmannDesign.com/nof/. Wenn Ihr alle Tutorials von mir finden wollt, dann verwendet bitte das Suchen-Feld ganz oben im Banner meiner Seiten oder guckt Euch meine Übersicht auf meiner Seite “Themen” an.
   
• Viele meiner Tutorial-Seiten wurden im Zeichensatz UTF-8 publiziert. Daher werden Umlaute und Sonderzeichen von gefundenen UTF-8 Seiten, der in der Suche gelisteten Textausschnitte, teilweise nicht richtig dargestellt, weil diese “Suchen-Seite” selbst auf den europäischen Zeichensatz ISO gestellt ist. Achtet darauf, dass Ihr Eure “Suchen-Seite” auf den gleichen Zeichensatz wie die restlichen Seiten Eures Projektes stellt. Das kann also der Zeichensatz ISO oder auch UTF-8 sein.
   
• Den Werbelink und den Copyright-Vermerk von webdesign.weisshart.de könnt Ihr nur entfernen, wenn Ihr eine Lizenz erwerbt. Ihr erhaltet nach erfolgter Zahlung ein Passwort, das Ihr in eines der Skripte einfügen könnt. Kommerzielle Seiten müssen eine Lizenz erwerben.

nach oben

Viel Erfolg!