30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. PHP
Code

Erstellen Sie Ihr Startup mit PHP: Geolocation und Google Places

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Feature Requirements and Database Design
Building Your Startup With PHP: Localization With I18n

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

Das ist Teil drei der Erstellung Ihrer Startup With PHP-Serie auf Tuts +.  In dieser Serie führe ich Sie durch die Einführung eines Startups von der Idee zur Realität, indem ich meine Meeting Planner-App als ein Beispiel aus dem echten Leben benutze.  Bei jedem Schritt veröffentlichen wir den Meeting-Planer-Code als Open-Source-Beispiele, von denen Sie lernen können.

In diesem Teil werden wir einige der zugrunde liegenden Infrastrukturen für das Konzept von Orte erstellen, an denen Personen Besprechungen planen können.  Wir werden die Grundlagen der Arbeit mit Places behandeln, aufbauend auf unserem Datenbankschema, die Integration von HTML5 Geolocation und APIs für Google Maps und Google Places.  Die Idee ist, diese Funktionen zu verwenden, um die Wahl des Ortes für Ihre Meetings schnell und einfach zu machen.  Wir werden nicht alle Pass- und Finishs in dieser Episode abdecken - aber wir werden mehr davon in einem kommenden Tutorial behandeln.

Der gesamte Code für Meeting Planner ist in das Yii2 Framework für PHP geschrieben und nutzt Bootstrap und JavaScript.  Wenn Sie mehr über Yii2 erfahren möchten, schauen Sie Ihr unsere Parallel-Serie Programmierung mit Yii2 bei Tuts + an.

Nur zur Erinnerung, ich nehme an den Kommentarthreads unten teil.  Ich bin besonders interessiert, wenn Sie verschiedene Ansätze oder zusätzliche Ideen haben oder Themen für zukünftige Tutorials vorschlagen möchten.  Feature-Anfragen für den Meeting Planner sind ebenfalls willkommen.

Erstellung Funktionalität der Orte 

Bevor Benutzer Besprechungen planen können, müssen sie ihre bevorzugten Orte finden und vorschlagen können.  Aus Gründen der Einfachheit werden wir die Funktionen zum Suchen und Erstellen von Orten getrennt von der Planungsfunktion erstellen.

Benutzern stehen drei Möglichkeiten zum Hinzufügen von Orten zur Verfügung:

  1. Mit HTML5 Geolocation können sie ihren aktuellen Standort über WLAN nachschlagen und diesen als Ort hinzufügen.
  2. Mithilfe der Google Places-API können sie mithilfe der automatischen Vervollständigung nach einem Ort in der Places-Datenbank suchen.  Wenn wir schließlich ihren aktuellen Standort kennen, können wir die Suchergebnisse auf Orte in der Nähe beschränken.
  3. Manueller Eintrag.  Benutzer können eine Adresse und eine Beschreibung für ihren eigenen Ort, wie ein Büro oder ein Haus, eingeben.

Erweitern des Platzierungsschemas

Hier ist das Schema für Orte, die wir im zweiten Teil entwickelt haben:

Beachten Sie, dass in dieser Tabelle keine Geolocation mit einem Place verknüpft ist.  Das liegt daran, dass die MySQL InnoDB-Engine räumliche Indizes nicht unterstützt.  Also habe ich eine sekundäre Tabelle mit der MyISAM-Tabelle für die Geolocation-Koordinaten von Places erstellt.  Es ist die Place_GPS-Tabelle:

Da ich im Rapid-Prototyping-Modus bin, werde ich das Schema mithilfe von Yi's Migrationen erweitern und eventuell auch zukünftige Anpassungen vornehmen.

Um das Schema zu erweitern, erstellen wir eine neue Migration in Yii:

Und stellen Sie den folgenden Code bereit:

Dadurch werden Spalten für Slug, Website, vollständige_Adresse, Umgebung und Notizen hinzugefügt.  Der Slug ist eine URL-freundliche Adresse für die Anzeige der Ortsansichtsseite, die Yii automatisch für uns generieren kann.  Die anderen Felder werden manchmal von Nutzern aktualisiert, andere von der Google Places-API.

Um die Migration auszuführen, geben Sie Folgendes ein:

Sie sollten Folgendes sehen:

Aktualisieren des CRUD-Codes

Wenn Sie die Places-Seite besuchen, z.B. http://localhost: 8888/mp/index.php/place/create,  Sie sehen das automatisch generierte Yii2-Formular mit allen unseren Schemafeldern:

Create Place The Default Yii2 Form

Erstellen Sie das Standard-Yii2-FormularFür dieses Tutorial habe ich den Code-Generator von Yii, Gii, erneut ausgeführt, wobei ich die Schritte aus Teil 2 nutze, um Code für das neue Datenbankschema zu erstellen.  Ich wies Gii an, den CRUD-Code von früher zu überschreiben.

Hinweis: Es kann für Sie am einfachsten sein, Ihre Probenquelle aus Teil 2 mit der Probenquelle aus diesem Teil zu ersetzen.  Sehen Sie den Github-Link oben rechts.

Sie müssen auch unsere Lieferantenbibliotheken mit Composer aktualisieren, um die Unterstützung für die 2amigOS Yii2 Google Maps und Places Bibliotheken zu integrieren.  Hier ist ein Teil unserer composer.json-Datei:

Führen Sie dann das Composer-Update aus, um die Dateien herunterzuladen:

Drei verschiedene Möglichkeiten, Orte hinzuzufügen

Wir werden tatsächlich drei verschiedene Controller-Aktionen und -Formen für jeden dieser Arten von Orten erstellen.  Denken Sie daran, dass wir auch das zugehörige Modell, PlaceGPS, integrieren müssen, um die GPS-Koordinaten für jeden Ort zu speichern, unabhängig davon, wie der Benutzer sie hinzufügt.

Hinzufügen von Orten zur Navigationsleiste

Um einen Places-Link zur Navigationsleiste hinzuzufügen, bearbeiten Sie /views/layouts/main.php.  Das ist das Standard-Seitenlayout, mit dem Yii alle unsere Ansichtsdateien umschließt.  Es enthält die Kopfzeile, Bootstrap-Navigationsleiste und Fußzeile.

Unten in $menuItems füge ich einen Array-Eintrag für das Menü Ort hinzu:

Die Ortsindexansicht

Die Ortsindexansicht sieht folgendermaßen aus, nachdem wir Schaltflächen für die drei Möglichkeiten zum Hinzufügen von Orten hinzugefügt haben:

Meeting Planner Place Index Page

In /views/place/index.php können wir drei Schaltflächen add place hinzufügen:

Außerdem können wir die Spalten anpassen, die in der Ansicht angezeigt werden, einschließlich der Erstellung einer benutzerdefinierten Spalte für eine Place-Methode, die den Anzeigenamen für den Bereichstyp anzeigt:

Hier ist eine Teilmenge der Place Type Methoden in /models/Place.php:

Beachten Sie, dass der Anmeldestatus oder die Benutzereigentümerschaft für Orte noch nicht angesprochen wurden.  Wir werden das im nächsten Tutorial noch einmal besprechen. Aufgrund der Komplexität und des Umfangs dieser Phase werden wir eine Handvoll Finish-Elemente für ein späteres Tutorial hinterlassen.

Hinzufügen von Orten mit HTML5 Geolocation

Ein Szenario zum Hinzufügen von Orten besteht darin, einen Platz für Ihr Zuhause oder Ihr Büro zu schaffen.  Anstatt zu verlangen, dass Benutzer diese Informationen manuell eingeben, können wir das oft automatisch mit HTML5 Geolocation generieren.

HTML5 Geolocation verwendet Ihre WiFi-Adresse, um GPS-Punkte für Ihren aktuellen Standort zu ermitteln.  Es funktioniert nicht mit zellulären/mobilen Verbindungen und es ist nicht idiotensicher.

Der Benutzer muss wahrscheinlich seinem Browser die Berechtigung für Geolocation erteilen, damit diese Funktion funktioniert.  Suchen Sie nach einem Popup unter der Adressleiste, wie unten gezeigt:

Chrome Browser Asking Permission for Geolocation

Ich verwende das Geopositionsskript von estebanav, um HTML5 Geolocation mit der größtmöglichen Browserunterstützung zu unterstützen.

Hinzufügen der Place Controller-Aktion für Geolocation

In frontend/controller/PlaceController.php erstellen wir eine neue Methode für die Aktion Create_geo:

Da das Formular noch nicht übergeben wurde, rendert Yii die create_geo-Ansicht, um das Formular anzuzeigen.

In frontend/views/place/create_geo.php fügen wir _formGeolocate.php ein:

Sehen wir uns den ersten Teil von _formGeolocate an.  Wir müssen das JavaScript für Geoposition.js und unseren eigenen Geolocation-Code integrieren, um die Geoposition mit unserem Formular zu integrieren.  Die Art, wie Yii dies tut, ist mit Asset-Bundles.  Sie definieren ein Asset-Paket für verschiedene Seiten und können so optimieren, welche JS und CSS in verschiedenen Bereichen Ihrer Anwendung geladen werden.  Anwendung geladen werden. Wir erstellen zuerst LocateAsset:

In frontend/assets/LocateAsset.php definieren wir das JavaScript, das wir einbeziehen müssen:

LocateAsset lädt das Google Maps-API, die geoPosition-Bibliothek und unseren benutzerdefinierten Locate.js-Code vor, der unten angezeigt wird:

Grundsätzlich wird Geolocation initiiert, wenn der Benutzer beginSearch auslöst.  Der Geopositionscode ruft die Erfolgsfunktion auf, wenn er mit dem Standort des Benutzers zurückgegeben wird.  Wir passen die Erfolgsfunktion an, um eine Karte am Standort anzuzeigen und unsere versteckten Formularfelder mit dem zurückgegebenen Breiten- und Längengrad zu füllen.  Wenn der Benutzer das Formular sendet, stehen die Standortkoordinaten unserer Web-App zur Verfügung.

Hier ist der Code innerhalb von Success(), der die Formularfelder mit den Standortkoordinaten füllt:

Der Rest von _formGeolocate.php ist in zwei gleiche Hälften aufgeteilt.  Auf der linken Seite stellen wir die Formularfelder für den Benutzer zur Verfügung, um mit den Geolokationsdaten und den versteckten Feldern, die wir benötigen, um das JavaScript zu unterstützen.  Auf der rechten Seite lassen wir Platz für eine Schaltfläche, um Geolocation auszulösen und die Karte anzuzeigen.  Die Funktion success() füllt <article> mit der Map.

So sieht das Formular zunächst aus:

Meeting Planner Create Place by Geolocation Form

Klicken Sie auf die Schaltfläche Lookup Location, um die Geolokalisierung zu starten.  Suchen Sie erneut nach einer Berechtigungsanforderung in der Browsernavigationsleiste.

Sobald Ihr Standort gefunden ist, zeigen wir Ihren Standort auf einer Karte an:

Meeting Planner Create Place by Geolocation After Mapping

Hinweis: Ich habe die Verzögerung für Geolocation auf fünf Sekunden festgelegt, aber manchmal müssen Sie die Seite erneut laden, um die richtige Antwort zu erhalten, nachdem Sie die Berechtigung erteilt haben.  Bestimmte WiFi -Standorte sind weniger bestimmt als andere.

Werfen wir einen Blick auf den Übermittlungscode des Meeting-Controller-Formulars:

Im Moment legen wir nur einen Platzhalter für den created_by-Benutzer ein und lassen die Fehlerbehandlung für später zurück (Tut mir leid, Puristen, das ist momentan nicht der Fokus dieses Tutorials).

Wenn das Formular erstellt und ein Ort erstellt wird, greifen wir den Geolocation-Punkt aus dem Formular (diese ausgeblendeten Felder werden vom Locate.js-Skript ausgefüllt) und fügen der zugehörigen Ortstabelle PlaceGPS eine Zeile hinzu.

Wie im zweiten Teil erwähnt, trennen wir die Geolocation-Daten in einer anderen Tabelle, da die MySQL InnoDB-Engine keine räumlichen Indizes unterstützt.  Das verbessert auch die Leistung von Abfragen, um die nächsten Besprechungsplätze zwischen zwei Benutzern zu finden.

Hier ist die addGeometryByPoint-Methode im Place.php-Modell:

So sollte die Seite Place-Index aussehen, nachdem der Datensatz gespeichert wurde:

Meeting Planner Place Index Page with New Places

Wenn Sie eine andere Implementierung von HTML5 Geolocation für Yii 1.x sehen möchten, lesen Sie die Informationen zur Verwendung von Zillow Neighborhood Maps und HTML5 Geolocation.

Orte in Google Maps anzeigen

Wenn Sie auf das Befehlssymbol für die Ansicht klicken, das unserem neuen Ort in der obigen Indexansicht zugeordnet ist, sehen Sie Folgendes:

Meeting Planner View A Place With Google Maps

Wir haben die von Google generierte Ansichtsseite angepasst und Code hinzugefügt, um die Google Map mit der Google Maps-Erweiterung von Yii2 zu zeichnen.

Hier ist die View-Aktion in PlaceController.php:

Hier ist die Methode getLocation im Modell Place.php.  Er ruft die Standortkoordinaten aus der Tabelle PlaceGPS ab:

Hier ist ein Teil der View-Datei, die die Seite rendert.  Die linke Seite besteht vorerst aus einem Standard Yii2 DetailView Widget.  Die rechte Seite erzeugt den Code, der die Karte zeichnet:

Hinzufügen aus der Google Places-API

Die Autocomplete-Funktion von Google Places bietet Benutzern eine unglaublich schnelle und einfache Möglichkeit, Besprechungsplätze hinzuzufügen.  Ich verwende die Yii2 Google Places-Erweiterung von 2amigOS.

Meeting Planner The Google Place Autocomplete Service

In PlaceController.php fügen wir eine Aktion für Create_place_google hinzu:

Die Datei /frontend/views/place/create_place_google.php zeigt das Formular an und initialisiert das JavaScript, das zur Unterstützung der automatischen Vervollständigung benötigt wird:

Entwickler Petra Barus hat eine Google Places-Erweiterung für Yii1.x bereitgestellt.  Für dieses Tutorial habe ich die grundlegende Unterstützung für Yii2 handkodiert.   Allerdings war Barus so freundlich, nur wenige Tage später eine Yii2-Erweiterung zu veröffentlichen. Ich habe seinen Code noch nicht integriert.  Ich habe seinen Code noch nicht integriert. Hier ist seine neueste Yii2 Google Places Autocomplete-Erweiterung.

Hier ist das MapAsset-Paket, das ich für das zugehörige JavaScript erstellt habe, das benötigt wird:

Hier ist der Formularcode _formPlaceGoogle.php:

Es gibt searchbox, das die automatische Vervollständigung des Benutzers akzeptiert.  Es gibt auch eine Vielzahl von versteckten Feldern, die unser JavaScript mit den Ergebnissen aus dem Google Places-Dienst lädt.

Hier ist die create_place.js, die alle "Magie" erfüllt: 

Die Methode setupListeners() verknüpft unser searchbox mit dem Google Places-Autocomplete-Service.  Wenn ein Ereignis place_changed auftritt, wird populateResult() aufgerufen, um die ausgeblendeten Felder im Formular mit Daten von Google zu füllen und die Karte zu laden, die in der rechten Hälfte des Formulars angezeigt wird.

Meeting Planner Add From Google Place Autocomplete After LoadMap

Mit dem Browser-Debugger können Sie die ausgeblendeten Felder nach dem Ausfüllen mit Formulardaten über JavaScript überprüfen.  Diese Daten werden mit dem Formular bei der Einreichung gepostet, damit wir sie zur Place-Datenbank hinzufügen können.

Meeting Planner Hidden Fields from Google Places Autocomplete

Hier ist das verbleibende Element der PlaceController-Erstellungsaktion Create_place_google:

Es ähnelt der Create_geo-Aktion.  Wir haben eine separate Place.php-Modellmethode, um die Standortdatenerfassung zu vereinfachen.  Hier ist addGeometry():

Festlegen von geografischen Grenzfiltern für die automatische Vervollständigungssuche

Der Places Autocomplete-Dienst ermöglicht es Ihnen außerdem, ein geographisches Begrenzungsrechteck einzurichten, um Ihre Suche darin zu filtern.  Wenn der Benutzer beginnt zu tippen, verwendet die Autocomplete nur Orte innerhalb von zehn Meilen von ihnen.  Da wir den aktuellen Standort des Benutzers nicht als Sitzungsvariable eingerichtet haben, implementiere ich das Begrenzungsrechteck derzeit nicht.  Aber wir können das später machen.  Hier ist ein Beispiel für setupBounds():

Orte manuell hinzufügen

Der dritte Weg, auf dem Benutzer Orte hinzufügen können, ist das manuelle Bereitstellen von Details und Adressinformationen.  Wenn sie das Formular abschicken, werden wir versuchen, die Adresse nachzuschlagen und die Geolocation-Daten zu erhalten, aber es ist in Ordnung, wenn wir das nicht finden können.  Der manuelle Ansatz ermöglicht Benutzern das Hinzufügen von Orten, z. B. ihres Hauses oder eines Büros, die sie möglicherweise nicht mit Google-Kartendaten verknüpfen möchten.

So sieht das Formular aus:

Meeting Planner Manually Add Place

So sieht der Übermittlungsaktionscode PlaceController.php aus.  Wir verwenden den 2Amigos Maps Geocoding-Client, um den Standort von full_address abzurufen.  Es gibt offensichtlich viele Verbesserungen, die wir vornehmen können, um den Benutzer dazu zu ermutigen, die vollständige Adresse einzugeben oder ihn möglicherweise zu einem späteren Zeitpunkt mit einem Standort von Google Places verbinden zu lassen.

Was kommt als nächstes?

Der Umfang dieses Tutorials erwies sich als ziemlich groß.  Ich wollte Ihnen verschiedene Komponenten zeigen, die an der Geolokalisierung und Kartennutzung beteiligt sind, ohne zu viele Elemente des Kodierungsprozesses zu überspringen.  Offensichtlich gibt es im Moment viele Abkürzungen.  Im nächsten Tutorial werden wir weiterhin Orte im Gesamtsystem verfeinern, wobei wir uns auf Benutzerberechtigungen, Zugriffskontrollen, Unterstützung für die bevorzugten Orte des Benutzers und andere Verfeinerungen konzentrieren.

Bitte zögern Sie nicht, Ihre Fragen und Kommentare unten zu posten.  Ich bin besonders interessiert, wenn Sie verschiedene Ansätze oder zusätzliche Ideen haben oder Themen für zukünftige Tutorials vorschlagen möchten.  Sie können mich auch auf Twitter @reifman erreichen oder mir direkt eine E-Mail schicken.  Folgen Sie meiner Tuts + Instructor Seite, um zukünftige Artikel in dieser Serie zu sehen.

Verwandte Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.