Suchfunktion

Svend-Boettcher schrieb am 03.03.2022 um 21:02 Uhr

Hallo Ihr Lieben,

ich möchte auf meiner Homepage eine Suchleiste einbauen, nur bin ich mir nicht sicher wie ich das umsetzen soll.

Selbstverständlich habe ich hier bereits diverse Beiträge zu diesem Thema gelesen aber die sind nun auch schon beinahe zehn Jahre alt. Sehr interessant fand ich diesen Beitrag:

https://www.magix.info/de/forum/suchleiste-in-homepage-einbauen-mit-wd7-premium--942707/#ca838618

nur leider hat mich die "deutlich einfachere" Lösung:

http://www.heim-und-haustiere.de/tools/script-fuer-suche.htm

auch nicht weitergebracht, da ich kein Script zum herunterladen gefunden habe. Irgendwelche Lizenzen möchte ich vorerst auch nicht zahlen, da ich noch nicht weiß, in wieweit die angedachte Website "funktionieren" wird.

Ich würde mich riesig freuen, wenn der eine oder andere von Euch mir helfen würde, meinen Horizont zu erweitern.

 

Lieben Gruß

Svend

Kommentare

marboe schrieb am 04.03.2022 um 07:14 Uhr

nur leider hat mich die "deutlich einfachere" Lösung:

http://www.heim-und-haustiere.de/tools/script-fuer-suche.htm

auch nicht weitergebracht, da ich kein Script zum herunterladen gefunden habe.

Ich finde da direkt was.

Empfehlenswert ist auch dieses php-Skript. Du bist generell gut beraten, wenn du dir den ausgesuchten Anbieter gut anguckst, ob auch regelmäßig Aktualisierungen des Codes angeboten werden. Das ist aus sicherheitsgründen sehr wichtig. Dass solcher Fremdcode Geld kostet wundert nicht. Da steckt eine Menge Arbeit drin. Umso erstaunlicher, dass das php-Skript von Weisshart tatsächlich umsonst ist. Dazu ist es nötig, dass auf deinem Server php läuft.

Es gibt da aber auch was von Google für die eigene Homepage. Gruß Marboe

Svend-Boettcher schrieb am 04.03.2022 um 16:14 Uhr

Da war ich wohl gestern abend ein wenig neben der Spur. Du hast Recht Marboe, es steht dort alles geschrieben ... 😌 Vielen Dank, fürs Augen öffnen.

Gruß Svend

Svend-Boettcher schrieb am 19.05.2022 um 21:41 Uhr

Grüßt Euch, Ihr Lieben,

ich hänge immer noch an der Aufgabe, eine Such-Funktion auf meiner Website zu integrieren.

Die Lösung mit der Suche von "heim-und-haustiere" war leider erfolglos, deshalb habe ich mich jetzt mit dem zweiten Vorschlag von marboe auseinander gesetzt. Und auch hier hängt es jetzt ...

Auf der Seite des Anbieters: https://webdesign.weisshart.de/suchen-integrieren.php steht folgendes:

"In den Inhaltsbereich (also dort, wo normalerweise Text steht) kopieren Sie nur den folgenden Code, und zwar an der Stelle, wo die Suchergebnisse angezeigt werden sollen:

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

Ich weiß beim besten Willen nicht, vohin mit diesem "Schnipsel" ... kann mir bitte jemand helfen ...

Lieben Gruß

Svend

marboe schrieb am 20.05.2022 um 08:07 Uhr

Aus dem Bauch heraus würde ich sagen:

  • erstelle ein Rechteck, welches die Suchergebnisse zeigen soll
  • lasse dieses Rechteck mit dem Code ersetzen

Probiere das mal aus. Viel Erfolg! Gruß Marboe

Svend-Boettcher schrieb am 20.05.2022 um 10:55 Uhr

Vielen Dank Marboe, für Deinen Tipp, aber irgendetwas fehlt noch ...

Wie ich bisher vorgegangen bin:

Die benögtigte Datei von der Seite https://webdesign.weisshart.de/suchen.php heruntergeladen und die ZIP-Datei entpackt. Danach alle Dateien

 

in das zu durchsuchende (Haupt-)Verzeichnis auf den Server, also dort wo auch die Index-Datei liegt, hochgeladen.

Als nächstes einen Platzhalter auf der Haupt- (Index)-Seite, für das das Suchformular (Suchfeld), angelegt und folgenden Code in den „Body“ eingefügt:

<form  id="search" method="get" action="suchen.php">

<p>

<label for="suchbegriff">Im Projekt suchen:</label>

<input type="search" name="q" id="suchbegriff" value="Suchbegriff" placeholder="Suchbegriff(e)" />

<input type="submit" value="Los !" />

</p>

</form>

 

 

Danach als wiederholtes Objekt in alle Seiten eingefügt.

 

Im nächsten Schritt habe ich die „Suchen“ Seite als .php Datei erstellt,

 

dort einen Platzhalter angelegt, welcher die Suchergebnisse anzeigen soll und wie Marboe aus dem Bauch heraus vermutet, folgenden Code eingefügt:

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

 

 

Anschließend habe ich die exportierte „suchen.php-Datei“ mit dem Editor geöffnet und wie auf der Seite https://webdesign.weisshart.de/suchen-integrieren.php beschrieben, an den Anfang der Datei, also noch vor <!DOCTYPE html>, den Code:

<?php include("wdw_suche/search_config.php"); ?>  eingefügt.

 

 

Und zu guter Letzt, ebenfalls wie auf angeführter Seite beschrieben, ans Ende der Datei, unmittelbar vor dem </body>-Tag, folgenden Code eingefügt:

<script src="wdw_suche/wdw_suche.js" defer></script>

 

 

Nachdem das getan war habe ich die komplette Internetseite auf den Server geladen und die Suchfunktion ausprobiert … und voir là …

 

… so hatte ich mir das nicht gedacht … hat jemand eine Idee, wo ich falsch abgebogen bin ?

 

Lieben Gruß Svend

marboe schrieb am 20.05.2022 um 12:16 Uhr

Ich kann dir heute leider nur auf die Schnelle mitteilen, was mir aufgefallen ist. Nämlich:

Und zu guter Letzt, ebenfalls wie auf angeführter Seite beschrieben, ans Ende der Datei, unmittelbar vor dem </body>-Tag, folgenden Code eingefügt:

<script src="wdw_suche/wdw_suche.js" defer></script>

Ich denke du hast es an die falsche Stelle kopiert.
</body - das ist ganz am Ende des Codes. Nicht am Beginn des Bodybereichs. Der Schrägstrich ist hier sehr wichtig.

<body - ist der Anfang
</body - ist das Ende

Falls das nicht hilft, schaue dir doch mal im FileZilla oder deinem sonstigen FTP-programm die Rechte des erstellten Suchordners an. Was steht denn da? Ich würde erwarten, dass Lese- und Schreibrechte sein müssen.

Leider habe ich aktuell keinen Server mit php zur Verfügung, wo ich drin rumspielen könnte. Aber vll hilft das ja schon mal weiter. Wenn einem der Helfer hier nochwas auffällt, wird das auch nicht schaden. Gruß Marboe

Svend-Boettcher schrieb am 20.05.2022 um 14:08 Uhr

Ups, stimmt ... habe den Schnipsel jetzt direkt und unmittelbar vor dem </body>-Tag eingefügt. An dem Endresultat hat sich nur leider nichts verändert.

Robbin schrieb am 21.05.2022 um 01:29 Uhr

@Svend-Boettcher

An dem Endresultat hat sich nur leider nichts verändert.

In der online Demo siehst du dass das PHP Script funktioniert, wenn es richtig eingebaut wird... 😉

Deine "Baubeschreibung" ist recht umfangreich und wenn ich die richtig gelesen habe, dann fehlt dir das Verzeichnis "wdw_suche". Du hast stattdessen scheinbar nur den Inhalt des Verzeichnisses kopiert. Damit greift dann jeder Link ins Leere, der z. B. so aussieht "wdw_suche/search_config.php".

Das Ergebnis: die Suchfunktion funktioniert nicht...

Lies dir nochmal die Anleitungen bei Weisshart genau durch und kontrolliere Schritt für Schritt die einzelnen Arbeitsgänge, dann wird's sicher klappen.

So sieht z. B. die Demosite im Web Designer aus...

 
Da ist als kleines "Schmankerl" oben links ein Platzhalter zu sehen, der im HTML Body den PHP Code enthält, der beim Speichern automatisch als 1. Zeile in den HTML Quelltext geschrieben wird. Das funktioniert, wenn du dem Platzhalter den Namen "<html>" gibst. Manuelle Eingriffe sind dann nicht mehr nötig.

Wenn du auf der fertigen Site eine Suche nach dem Wort "dolore" startest, sieht das Ergebnis auf der Startseite und auf den anderen Seiten mit Fundstellen z. B. so aus:

    

Hier noch das komplette Verzeichnis auf dem Webserver nach dem Upload und manuellem hochladen des Verzeichnisses "wdw_suche" und der .htaccess Datei.

Die .htaccess Datei sorgt dafür , dass auch normal bezeichnete HTML Dateien als ".php" Dateien erkannt werden, wenn sie denn PHP Anweisungen enthalten.

So sieht der Inhalt der .htaccess aus:

AddType application/x-httpd-php .html .htm

Es ist dann nicht mehr nötig, die ".htm" Endung der vom WD exportierten HTML Seiten in ".php" zu ändern, was ja bei der "index.htm" nur nach dem Export manuell machbar ist.

Svend-Boettcher schrieb am 21.05.2022 um 10:41 Uhr

Grüß Dich Robbin,

vielen Dank für Deine ausführliche Beschreibung.

Gestern abend bin ich drüber gestolpert, nachdem ich mir nochmal die "Installationsanleitung" vom Anbieter durchgelesen habe. Dort steht geschrieben:

"zip entpacken, alles in das zu durchsuchende (Haupt-)Verzeichnis uploaden dabei wird automatisch ein Unterverzeichnis wdw_suche erstellt nur die Datei suchen.php verbleibt im Hauptverzeichnis."

"Nur die Datei suchen.php verbleibt im auptverzeichnis" war dann der entscheidende Hinweis. Da ich ja alle Dateien hochgeladen hatte und sich eben nicht automatisch ein Unterverzeichnis wdw_suche erstellt hat.

Also habe ich den gesamten wdw_suchen Ordner auf den Server geladen und die einzelne suchen.php Datei.

Und so funktionierte es dann tatsächlich.

Svend-Boettcher schrieb am 29.05.2022 um 22:14 Uhr

Hallo Ihr Lieben,

ich habe da jetzt doch nochmal eine Frage zur Suchfunktion. Und zwar zur Gestaltung per css.
Leider finde ich unter den dateien von Weisshart keine css Datei die es ermöglicht, das Erscheinungsbild der Suche zu verändern.

Meine Suchergebnisse sehen ziemlich eintönig und unübersichtlich aus, wie in diesem Bild:

Schöner wäre das in etwa so:

Hat jemand eine Idee, wie ich in der ichtung weiterkomme ?

Lieben Gruß

Svend

Robbin schrieb am 30.05.2022 um 01:02 Uhr

Leider finde ich unter den dateien von Weisshart keine css Datei die es ermöglicht, das Erscheinungsbild der Suche zu verändern.

In dem ZIP Archiv. das du von Weisshart heruntergeladen hast ist u. a. auch ein nahezu vollständig konfiguriertes CSS Script enthalten, das du nach Belieben anpassen kannst.

Sollten deine Kenntnisse in CSS nicht ausreichen, dann bleibt dir wohl nur die Empfehlung, die Weisshart auf der Website gegeben hat... 😉

Svend-Boettcher schrieb am 30.05.2022 um 08:04 Uhr

Ah, o.k., ich hab´s!

Nur wohin mit dem CSS Code ? ... in die Hauptseite oder in die "Suchen" Seite?

marboe schrieb am 30.05.2022 um 09:22 Uhr

@Svend-Boettcher

"zip entpacken, alles in das zu durchsuchende (Haupt-)Verzeichnis uploaden dabei wird automatisch ein Unterverzeichnis wdw_suche erstellt nur die Datei suchen.php verbleibt im Hauptverzeichnis."

Das ist die Antwort auf die Frage, wo die CSSdatei hin soll.
Ins Unterverzeichnis würde ich sagen.

Gruß marboe

Svend-Boettcher schrieb am 30.05.2022 um 09:35 Uhr

Dort liegt die CSS-Datei ja auch (im Hauptordner).

Und trotzdem sieht meine Suche so aus:

Und nicht so:

Weisshart schreibt dazu:

"Nun noch das Design anpassen (formatieren)

Um Schriftarten, -größen, -farben, Abstände usw. zu formatieren, setzen Sie CSS ein.

Die Style-Angaben gehören in den head-Bereich Ihrer Seiten, also irgendwo zwischen <head> und </head>.

Der Style Bereich muß folgendermaßen aussehen:"

<style type="text/css"> ... hier kommen die Style-Angaben </style>

Also in "... hier kommen die Style-Angaben" füge ich die Daten aus der CSS-Datei ein.

Und dann lege ich alles in den <head> Bereich ... welcher Seite ?

... Hauptseite?

... "Suchen" Seite?

Robbin schrieb am 30.05.2022 um 11:20 Uhr

@ Svend-Boettcher

Und dann lege ich alles in den <head> Bereich ... welcher Seite ?

Das kannst du so machen und den CSS Code in den Head Bereich jeder Seite legen , aber es geht einfacher.
Kopiere in den HTML Head jeder Seite, auf der die "suchen" Option aktiv sein soll, einen Link auf die CSS Datei im Verzeichnis "wdw_suche", das du parallel zum Verzeichnis "index_htm_files" auf deinem Webserver angelegt hast.

Hier ein Beispiel, wie das Hauptverzeichnis auf deinem Webserver aussehen sollte

und hier ein Beispiel für den Link Eintrag, den du in den HTML Head jeder Seite einfügen kannst.

<link rel="stylesheet" type="text/css" href="wdw_suche/wdw_suche.css" />

So kann das im HTML Quellcode einer Seite aussehen:

Das Verfahren hat den Vorteil, dass du Anpassungen im CSS Scriptcode nur 1x machen musst und nicht für jede Seite erneut.

Svend-Boettcher schrieb am 30.05.2022 um 14:26 Uhr

Grüß Dich Robbin, das war wieder ein richtig fetter Tipp, Danke ! 👍

Es funktioniert mit dem Link und die Anordnung sieht jetzt schon ganz anders aus. Nur farblich bekomme ich da absolut nix geändert, egal welche werte ich ins css eintrage ... dann ist das so.

Auf jeden fall sieht es übersichtlicher aus.

Vielen Dank Euch allen.