• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Semantic URLs bei nur einer Datei?

S

SpeedyX

Mitglied
Hallo,

ich würde gerne auf meiner Webseite Semantic URLs einbauen und dazu zählt natürlich auch, dass die Nutzer beim Aufruf dieser durch JavaScript modifizierten URL auf die richtige Seite gelangen.

Ich habe mir schon überlegt, dass ich für jede URL, die existiert, eine Rewrite Rule mit GET Argument in der htaccess erstelle, so dass dann beim Aufruf der URL der Nutzer über die htaccess auf meine einzige Datei weitergeleitet wird, dieser dann durch die URL ein GET Argument übergeben wird, welches dann von der Datei verarbeitet wird und dass dann durch diese 1 Datei (meine Webseite besteht nur aus einer Datei aus der dann alle Inhalte nachgeladen werden) die jeweilige Seite nachgeladen wird und dass dann durch JavaScript die URL wieder zu der Sematic umgeändert wird.

Aber ich dachte mir, dass diese Methode zu kompliziert ist und es bestimmt noch eine einfachere gibt, nur fällt mir diese nicht ein. Weiß jemand zufällig wie sich Semantic URLs bei einer Webseite realisieren lassen, die eigentlich nur aus einer Datei, die aufgerufen wird, besteht?

LG

SpeedyX
 
Also mit einer Datei meine ich, dass der Nutzer quasi nur eine Datei ansteuert. In dieser befindet sich dann der Standardseitenaufbau und mit AJAX werden andere Seiteninhalte nachgeladen, je nachdem welches Element der Nutzer in der Menüleiste auswählt.

In diese Datei müsste ich dann noch PHP Code am Anfang einfügen, der dann die GET Paramenter einliest. Dann müsste mit diesen Parametern und JavaScript die URL dementsprechend umgeschrieben werden.

Mit PHP Frameworks habe ich mich bis jetzt nicht beschäftigt, daher war mir auch der Name Zend unbekannt. Was genau würde mir ein Framework in meinem Fall bringen?
 
Ich verstehe nicht ganz, warum du javascript brauchst. Du kannst mit den GET Parameter jeweils eine andere Seite includen und es ist geregelt (einfach gesagt). Ein Framework wie Zend hilft dir insofern das du dir über Sachen wir Routing viel weniger gedanken machen musst, weil dir vieles schon vorgegeben wird.
 
SpeedyX schrieb:
Also mit einer Datei meine ich, dass der Nutzer quasi nur eine Datei ansteuert. In dieser befindet sich dann der Standardseitenaufbau und mit AJAX werden andere Seiteninhalte nachgeladen, je nachdem welches Element der Nutzer in der Menüleiste auswählt.
Zum Vergrößern anklicken....

Genau darauf ist Angular zugeschnitten. Im einfachsten Fall hast du bei einer Angular App eine index.html, welche die Views inkludiert und für jede Unterseite eine Route, die die semantische URL generiert, sowie die dazugehörige HTML-Datei. Das funktioniert rein mit Ajax und JavaScript und lässt sich obendrein einfacher umsetzen als mit dem Umweg über ein PHP-Framework.
 
SpeedyX schrieb:
In diese Datei müsste ich dann noch PHP Code am Anfang einfügen, der dann die GET Paramenter einliest. Dann müsste mit diesen Parametern und JavaScript die URL dementsprechend umgeschrieben werden.
Zum Vergrößern anklicken....
Ich habe mich darauf bezogen, als ich geschrieben habe, warum er Javascript braucht. Angular habe ich ja in meinem ersten Beitrag als Antwort ebenfalls erwähnt. Aber für mich ist es ein "Entweder Oder". Also entweder Angular Frontend dann wirklich nur Services im Backend und viel Logik mit Angular.

Oder eben kein Javascript Frontend, aber dann auch keine URLs mit Javascript rumparsen etc...

ZF Router habe ich als beispiel erwähnt, damit er nicht beginnt selber mit php ein router konstrukt zu bauen, welches weder sicher, noch funktional sein wird.
 
Ich gehe davon aus, dass er statische Seiten inkludieren will, und in dem Fall bräuchte er nicht mal einen Controller. Aber selbst wenn eine Datenbank dahinter liegen sollte, ist es Angular völlig Wuppe, womit das Backend gestrickt wurde, sofern auf REST Endpoints zugegriffen werden kann. Dafür reichen bordeigene Services wir $http und $resource aus.
 
Soo, habe mir jetzt mal das Angular Framework runtergeladen + Angular Route.
Habe beide im <head> meiner HTML Datei eingebunden und das funktioniert auch soweit. Nur sehen meine URL's dann so aus: http://domain.tld/#/<seite>

Ich würde die URL's aber gerne ohne die # drin haben. Auf stackoverflow habe ich gelesen, dass das funktioniert, wenn man beim $locationProvider den HTML5 Mode auf true setzt. Also habe ich folgenden Code noch zu der Konfiguration hinzugefügt:

Javascript: 
if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
}

Meine gesamter Angular Teil sieht so aus:
Javascript: 
var hcpApp = angular.module('hcpApp', ['ngRoute']);

hcpApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
     .when('/', {
       templateUrl: 'pages/home.html',
       controller: 'mainController'
     })
     .when('/change_pw', {
       templateUrl: 'pages/change_pw.html',
       controller: 'mainController'
     })
     .when('/change_email', {
       templateUrl: 'pages/change_email.html',
       controller: 'mainController'
     });
   if(window.history && window.history.pushState){
     $locationProvider.html5Mode(true);
   }
}]);

hcpApp.controller('mainController', function($scope) {
   $scope.message = 'This is a Test Message created with the Angular JavaScript Framework!';
});

Die Message habe ich nur mal zum testen erstellt.

Dem HTML Tag meiner HTML Datei habe ich natürlich folgendes hinzugefügt:
Code: 
<html ng-app="hcpApp">
Und dem Body das hier:
Code: 
<body ng-controller="mainController">
und einem DIV, in welches die externen statischen HTML Dateien geladen werden sollen folgendes:
Code: 
<div ng-view></div>

Wie gesagt, ohne HTML5 Mode gehts, aber nur mit #. Andernfalls geht gar nichts.

EDIT: Habe den HTML5 Mode auch mal so ausprobiert:
Javascript: 
$locationProvider.html5Mode({
enabled:true,
requireBase:false});

weil ich keine Base URL festlegen wollte.

Hat aber auch nicht funktioniert.

EDIT2: Ok, hab jetzt einfach eine Base festgelegt.
Damit funktioniert es nun einwandfrei.

Was ist jetzt die beste Methode um eine durch Angular veränderte URL auch direkt aufrufbar zu machen?
Also wenn Angular die URL von http://domain.tld/ zu http://domain.tld/<seite> verändert, dann existiert ja in Wirklichkeit kein richtiges Verzeichnis dafür, weshalb die URL auch nicht aufgerufen werden kann und man stattdessen 404 erhält. Aber wie kann ich es so einrichten, dass man die URL aufrufen kann?

EDIT3:
Hat sich jetzt erledigt. Habe eine .htaccess im entsprechenden Verzeichnis mit folgendem Inhalt erstellt:
Code: 
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.php [NC,L]
 
Zuletzt bearbeitet:
War relativ einfach, oder? Wenn du Bock hast, setze die Seite noch mal mit ZF2 auf, um den Unterschied zu sehen.

Nebenbei bemerkt brauchst du den mainController nicht im $routeProvider einzubinden, wenn du ihn bereits auf dem Body-Tag hast, und per Konvention wäre die Schreibweise UpperCamelCase, also MainController.
 
Joa, ging. Wenn man es erstmal verstanden hat, ist es wirklich einfach. Aber man muss es halt erstmal verstehen.

Ist ZF2 nicht ein PHP Framework? Wollte jetzt eigentlich nicht alles in PHP ändern. Ich denke ich werde es jetzt so lassen nach dem Motto "Never change a running system". ;)

Habe den MainController jetzt auch komplett entfernt. Ich werde ja hauptsächlich die Seiteninhalte in ein Div reinladen, dafür brauche ich ja nur ng-view beim DIV anzugeben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben