AngularJS und Laravel: Beginnen Sie mit dem Aufbau eines CRM

() translation by (you can also view the original English article)

Bei der Erstellung einer Einzelseiten-App sollten wir ein gewisses Framework verwenden, um einen Teil der Arbeit für uns zu erledigen, damit wir uns auf die eigentliche Funktionalität konzentrieren können. AngularJS passt hier perfekt, denn Features wie dynamische Abhängigkeitseinspritzung und bidirektionale Datenbindung sind einfach großartig. Manchmal benötigen wir auch eine Art Server. Wenn Sie sich für PHP entschieden haben, ist Laravel möglicherweise die beste Option, da es einfach zu bedienen ist und ziemlich leistungsfähig ist.

Einführung

In diesem Lernprogramm erstellen Sie ein einfaches Kunden-/Transaktionsverwaltungssystem mit der Möglichkeit, Transaktionen und Kunden hinzuzufügen und zu entfernen. Das ist wahrscheinlich nicht das, was Sie oft machen, aber es zeigt, wie Sie die Features beider Frameworks nutzen können.

Bevor wir beginnen, sollten Sie eine MySQL-Datenbank einrichten, die wir verwenden werden (Laravel unterstützt viele weitere, aber diese ist immer noch die beliebteste). Sie benötigen keinen Webserver, da wir das eingebaute PHP-System verwenden werden. Beachten Sie jedoch, dass diese Lösung nur für die Entwicklung gedacht ist und niemals in der Produktion verwendet werden sollte - es fehlen viele Funktionen, die für Sie erforderlich sind App ordnungsgemäß in der Öffentlichkeit arbeiten). Dafür benötigen wir mindestens die PHP-Version 5.4.0.

Vorbereitung

Als erstes müssen wir Laravel installieren. Der gesamte Vorgang ist auf der Laravel-Website beschrieben. Danach sollten Sie Ihr Projektverzeichnis mit allen Laravel-Dateien dort erstellt haben. Navigieren Sie in der Befehlszeile zu diesem Verzeichnis und führen Sie diesen Befehl dort aus:

1	php artisan serve

Wenn alles in Ordnung ist, sollten Sie sehen, dass der lokale Entwicklungsserver mit locahost:8000 gestartet wurde. Öffnen Sie Ihren Browser und navigieren Sie dort. Sie sollten die Startseite von Laravel sehen:

Nun können wir zur eigentlichen Anwendung übergehen.

Migrationen und Modelle

Modelle in Laravel sind wie in jedem anderen MVC-Framework. Sie verwenden Eloquent ORM, um Ihnen die Arbeit zu erleichtern - Sie werden wahrscheinlich nie wieder eine SQL-Abfrage schreiben müssen (es sei denn, Sie möchten etwas, das Eloquent nicht unterstützt). Mithilfe von Migrationen können Sie die Datenbankstruktur mit der Möglichkeit ändern, Änderungen rückgängig zu machen, wenn etwas schief geht. Weitere Informationen zu Migrationen finden Sie in der Dokumentation.

In unserer App werden wir zwei Modelle verwenden:

Customer - speichert die Kundendaten
Transaction - enthält die Informationen zu einer Transaktion

Beginnen wir damit, Migrationen für sie zu erstellen. Wenn Sie dies noch nicht getan haben, fahren Sie den zuvor heruntergefahrenen Server herunter (Ctrl+ C).

Customers

Rufen Sie zuerst diesen Befehl auf:

1	php artisan migrate:make create_customers_table

Dadurch wird eine Migrationsdatei mit einer grundlegenden Struktur für Sie erstellt. Navigieren Sie jetzt zu app/database/migrations. Es sollte eine Datei geben, deren Name mit einem Zeitstempel beginnt und mit "create_customers_table" endet. Laravel hat diese Grundstruktur automatisch für Sie erstellt. Die up()-Methode wird aufgerufen, wenn die Migration angewendet wird, und down(), wenn ein Rollback ausgeführt wird.

Rufen Sie zuerst die Schema::create()-Methode auf. Es braucht zwei Argumente - den Namen des Schemas und eine Rückruffunktion:

1	Schema::create('customers', function ($table) {

Der Callback wird ausgeführt, wenn die Tabelle erstellt wird. Das Tabellenobjekt wird als $table-Variable übergeben, und wir manipulieren die Struktur der Tabelle. Fügen Sie ein id-Feld für die automatische Erhöhung hinzu:

1	$table->increments('id');

Als nächstes gibt es drei Zeichenkettenfelder für den Vornamen, den Nachnamen und die Email-Adresse des Kunden:

1	$table->string('first_name');
2	$table->string('last_name');
3	$table->string('email')->unique();

Wir machen das email-Feld eindeutig, indem wir die unique()-Methode darauf aufrufen.

Die letzte Methode ist für die Zeitstempel:

1	$table->timestamps();
2	});

Dadurch werden zwei Datumsfelder im Schema erstellt: created_at und updated_at. Diese werden von Eloquent zum Speichern der Zeit verwendet, zu der das Element erstellt und aktualisiert wurde.

Schließlich sollte der Code so aussehen:

public function up() {
	Schema::create('customers', function ($table) {
		$table->increments('id');
		$table->string('first_name');
		$table->string('last_name');
		$table->string('email')->unique();
		$table->timestamps();
	});
}

Die down()-Methode ist viel einfacher - das Schema wird einfach gelöscht:

1	public function down() {
2	Schema::drop('customers');
3	}

Transaktionen

Der Code hier wird dem des Kunden ähnlich sein. Rufen Sie zuerst diesen Befehl auf:

1	php artisan migrate:make create_transactions_table

Suchen Sie nun die entsprechende Datei in der app/database/migrations und öffnen Sie sie. Beginnen Sie wie zuvor mit der Erstellung des Schemas:

1	Schema::create('transactions', function ($table) {

Fügen Sie nun die Felder für die ID, den Namen der Transaktion, ihre Kosten und die ID des Kunden hinzu, zu dem sie gehört:

1	$table->increments('id');
2	$table->string('name');
3	$table->float('amount');
4	$table->integer('customer_id');

Und natürlich die Zeitstempel:

1	$table->timestamps();
2	});

Der endgültige Code sollte folgendermaßen aussehen:

public function up() {
	Schema::create('transactions', function ($table) {
		$table->increments('id');
		$table->string('name');
		$table->float('amount');
		$table->integer('customer_id');
		$table->timestamps();
	});
}

Und nun die down()-Methode:

1	public function down() {
2	Schema::drop('transactions');
3	}

Datenbankkonfiguration

Bevor Sie die Migrationen anwenden, müssen Sie nun die Verbindung zu Ihrer Datenbank konfigurieren. Öffnen Sie die Datei app/config/database.php, und fahren Sie mit Zeile 55 fort. Hier sind die Konfigurationsdaten für MySQL (da sind einige andere, z.B. SQLite oder Postgres):

'mysql' => array(
	'driver'    => 'mysql',                 // database driver, don't touch
	'host'      => 'localhost',             // host of the database, usually localhost unless you have your db on some server
	'database'  => 'database',              // name of the database you will be using, it must be created earlier
	'username'  => 'root',                  // username that the script will use to connect, I strongly advice against using root user for this
	'password'  => '',                      // password for the user above, it's better not to use a blank one
	'charset'   => 'utf8',                  // encoding of the db
	'collation' => 'utf8_unicode_ci',       // db's collation setting
	'prefix'    => '',                      // prefix of the database tables, useful if you have multiple scripts using the same database
),

Nachdem Sie das eingegeben haben, können Sie loslegen. Stellen Sie sicher, dass Sie die Datei gespeichert haben, und rufen Sie diesen Befehl aus dem Hauptverzeichnis Ihrer App (der mit der artisan-Datei) auf:

1	php artisan migrate

Und das ist es. Wenn keine Fehler aufgetreten sind, wurden die Tabellen erfolgreich erstellt. Sie können eine Verbindung zu Ihrer Datenbank mit z. B. phpMyAdmin herstellen, um manuell zu prüfen, ob Sie dies wünschen.

Modelle

In Laravel ist das Erstellen eines Modells, nachdem Sie Ihre Datenbank mithilfe von Migrationen konfiguriert haben, sehr schnell. Navigieren Sie zu app/models und löschen Sie die dort vorhandene Beispieldatei User.php. Erstellen Sie nun zwei Dateien mit den Namen Customer.php und Transaction.php.

Beginnen wir mit Customer.php. Jedes Modell in Laravel muss die Eloquent-Klasse erweitern:

1	class Customer extends Eloquent {

Nun definieren wir eine Beziehung zwischen dem Kunden und seinen Transaktionen. Dazu definieren Sie im Modell eine öffentliche Methode mit dem Namen der gewünschten Eigenschaft (in diesem Fall transactions):

1	public function transactions() {

Im Hauptteil der Funktion gibt es nur noch eine Zeile:

1	return $this->hasMany('Transaction');
2	}
3	}

Dies teilt Eloquent mit, dass es alle Transaktionen mit customer_id des Kunden unter einer Eigenschaft namens transakctions bereitstellen sollte.

Jetzt werden wir die Transaktionen in etwa genauso machen, aber die Beziehung wird rückgängig gemacht, um den Eigentümer der Transaktion über die customer-Eigenschaft zugänglich zu machen:

class Transaction extends Eloquent {
	public function customer() {
		return $this->belongsTo('Customer');
	}
}

Das geschieht mit der $this->belongsTo()-Methode des Modells.

Controllers

Um die Modelle tatsächlich verwenden zu können, müssen wir Controller für sie erstellen. Gehen Sie zum app/controllers-Verzeichnis und löschen Sie nur die HomeController.php. BaseController.php ist wichtig, da unsere Controller sie erweitern werden. Erstellen Sie nun zwei Dateien: CustomerController.php und TransactionController.php.

CustomerController

Dieser Controller übernimmt alles, was mit den Kunden zu tun hat: Hinzufügen, Entfernen und Anzeigen einer Liste. Beginnen Sie mit der Definition der Klasse:

1	class CustomerController extends BaseController {

Wir werden Laravel-Funktion namens RESTful-Controller verwenden. Das Erstellen von Routen wird einfacher, da nur die Basis-URI definiert werden muss und Laravel alles für uns erledigt. Dazu müssen Sie Ihre Funktionsnamen mit dem entsprechenden HTTP-Verb starten und dann mit dem Namen der Subroute fortfahren (mithilfe von camelCase). Wenn wir beispielsweise eine Methode namens getNames hätten und der Basis-URI /customers wäre, kann auf die Methode unter /customers/names zugegriffen werden.

Die Methoden getIndex(), postIndex(), deleteIndex() usw. werden der Standardroute (in diesem Fall /customers) zugeordnet.

Nun definieren wir unseren ersten Weg - den Kunden anhand seiner ID zu erreichen:

1	public function getIndex() {

Holen wir uns die ID aus den Abfrageparametern (Laravel bietet eine nette Input-Klasse, um damit umzugehen, damit Sie nicht $ _GET, $ _POST und $ _FILES verwenden müssen):

1	$id = Input::get('id');

Suchen Sie nach dem Benutzer in der Datenbank mit dieser ID:

1	return Customer::find($id);
2	}

Jede Methode des Controllers muss einen Wert zurückgeben, der eine Zeichenfolge ist oder über eine __toString()-Methode verfügt. In diesem Fall wird das zurückgegebene Customer-Modell vor dem Senden in JSON konvertiert.

Jetzt können wir eine Liste aller Benutzer zurückgeben (diese ist unter /customers/all verfügbar):

1	public function getAll() {
2	return Customer::all();
3	}

Wie Sie sehen, können wir alle Kunden mit der Methode all() des Modells erreichen.

Nun der längste Teil, einen neuen Kunden hinzufügen:

1	public function postIndex() {

Lassen Sie uns zunächst prüfen, ob alle erforderlichen Informationen bereitgestellt wurden. Wir können dies mit der Input::has()-Methode machen:

1	if (Input::has('first_name', 'last_name', 'email')) {

Lassen Sie uns alle Eingabefelder in die Variable $input setzen, um zu vermeiden, dass Input::get() immer wieder aufgerufen wird. Das kann mit Input::all() erfolgen:

1	$input = Input::all();

Als Nächstes prüfen wir, ob eine der Eingaben leer ist. In diesem Fall geben wir einen HTTP 400-Fehler bei fehlerhafter Anforderung mit einer ausführlicheren Nachricht zurück:

1	if ($input['first_name'] == '' \|\| $input['last_name'] == '' \|\| $input['email'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

Da wir einen anderen Statuscode als 200 zurückgeben wollten, anstatt nur die Nachricht als String zurückzugeben, haben wir Response::make() verwendet, das die zu sendenden Daten als ersten Parameter und den Statuscode als zweiten verwendet. Werfen Sie einen Blick auf die Dokumente, wenn Sie mehr über die Antworten erfahren möchten.

Nun erstellen wir endlich ein neues Customer-Modell und füttern es mit den bereitgestellten Daten:

1	$customer = new Customer;
2	$customer->first_name = $input['first_name'];
3	$customer->last_name = $input['last_name'];
4	$customer->email = $input['email'];

Danach können wir das neu erstellte Modell speichern und auf die Anfrage damit antworten:

1	$customer->save();
2
3	return $customer;

Hier behandeln wir den Fall, wenn nicht alle Eingaben gemacht wurden:

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

Schließlich brauchen wir auch die Fähigkeit, die Kunden zu entfernen. Dieser ist wirklich kurz:

1	public function deleteIndex() {

Wir beginnen damit, die ID des Kunden zu löschen:

1	$id = Input::get('id');

Als Nächstes suchen und löschen wir den Kunden:

1	$customer = Customer::find($id);
2	$customer->delete();

Als Nächstes suchen und löschen wir den Kunden:

1
2	return $id;
3	}
4	}

Bevor die Routen abgerufen werden können, müssen wir sie einhaken. Öffnen Sie die Datei app/routes.php, löschen Sie alles außer dem Kommentar und fügen Sie diese Zeile am Ende der Datei ein:

1	Route::controller('/customers', 'CustomerController');

Dadurch wird Laravel angewiesen, alle Anfragen an /customers an unseren CustomerController weiterzuleiten. Jetzt können Sie CURL verwenden, um damit zu spielen. Starten Sie den Server zunächst mit php artisan serve und Sie können beispielsweise einen Kunden anlegen:

1	curl -X POST -d "first_name=Jane&last_name=Doe&email=jdoe@gmail.com" http://localhost:8000/customers

Dann können Sie die Liste aller Kunden erhalten:

1	curl http://localhost:8000/customers/all

TransactionController

Das ist, wie das Modell, dem CustomerController sehr ähnlich. Erstellen Sie zuerst die Klasse:

1	class TransactionController extends BaseController {

Dann definieren wir die Methode, um alle Transaktionen für einen Benutzer abzurufen:

1	public function getIndex() {
2	$id = Input::get('id');
3	return User::find($id)->transactions;
4	}

Wie Sie sehen, verwenden wir die zuvor definierte Beziehung, um die Transaktionen abzurufen (erinnern Sie sich jetzt an die Abfrage, die Sie schreiben mussten, um mit normalem PHP und SQL dasselbe zu erreichen).

Als nächstes werden Transaktionen angelegt:

1	public function postIndex() {

Wie zuvor prüfen wir, ob alle erforderlichen Informationen bereitgestellt werden:

1	if (Input::has('name', 'amount')) {

Wenn ja, ordnen Sie es einer $input-Variable zu:

1	$input = Input::all();

Prüfen Sie, ob die angegebenen Werte leer sind, und geben Sie gegebenenfalls einen Fehler zurück:

1	if ($input['name'] == '' \|\| $input['amount'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

Erstellen Sie nun die Transaktion und geben Sie alle angegebenen Informationen an:

1	$transaction = new Transaction;
2	$transaction->name = $input['name'];
3	$transaction->amount = $input['amount'];

Jetzt müssen wir es dem entsprechenden Kunden hinzufügen. Suchen wir sie anhand der angegebenen ID und fügen Sie der Transaktionsliste die $transaction hinzu:

1	$id = $input['customer_id'];
2	User::find($id)->transactions->save($transaction);

Das geschieht mit der von Laravel zur Verfügung gestellten transaction->save()-Methode. Jetzt können wir mit der erstellten Transaktion antworten:

1	return $transaction;

Und behandeln Sie den Fall, dass keine oder nicht alle Daten bereitgestellt wurden:

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

Danach gibt es auch eine Methode, um die Transaktion auf dieselbe Weise zu löschen, wie wir den Kunden gelöscht haben:

	public function deleteIndex() {
		$id = Input::get('id');
		$transaction = Transaction::find($id);
		$transaction->delete();
		
		return $id;
	}
}

Fügen Sie nun einfach die Route hinzu und Sie können den Controller mit CURL testen:

1	Route::controller('/transactions', 'TransactionController');

Schlussfolgerung

Okay, das ist das Ende des ersten Teils. Im zweiten Teil dieses Tutorials erstellen wir das Frontend mit AngularJS. Fühlen Sie sich frei, um Ihrer App weitere Funktionen hinzuzufügen (z. B. Kunden bearbeiten oder sortieren). Falls Sie die gewünschten Informationen nicht gefunden haben, lesen Sie die Laravel-Dokumentation.