AngularJS en Laravel begin met het bouwen van een CRM

Bij het maken van een app met één pagina moeten we een soort framework gebruiken om een ​​deel van de klus voor ons uit te voeren, zodat we ons kunnen concentreren op de feitelijke functionaliteit. AngularJS past hier perfect, omdat functies zoals dynamische afhankelijkheidsinjectie en bi-directionele gegevensbinding gewoon geweldig zijn. Soms hebben we ook een server nodig. Als je voor PHP hebt gekozen, is Laravel misschien wel je beste optie, omdat het gemakkelijk is om mee te werken en behoorlijk krachtig.

Invoering

In deze tutorial maakt u een eenvoudig klant / transactie managementsysteem met de mogelijkheid om zowel transacties als klanten toe te voegen en te verwijderen. Dit is waarschijnlijk niet het soort ding dat je heel vaak maakt, maar het laat zien hoe je de kenmerken van beide frameworks kunt gebruiken.

Voordat we beginnen, zou je een MySQL-database moeten instellen die we zullen gebruiken (Laravel ondersteunt er nog veel meer, maar dit is nog steeds de meest populaire). U hebt geen webserver nodig, omdat we PHP's ingebouwde zullen gebruiken (maar onthoud dat wel deze oplossing is alleen voor de ontwikkeling en mag nooit worden gebruikt in de productie - het ontbreekt aan veel functies die vereist zijn om uw app in het openbaar correct te laten werken). Daarvoor hebben we ten minste PHP-versie 5.4.0 nodig.

Voorbereiding

Het eerste dat we moeten doen, is Laravel installeren. Het volledige proces wordt beschreven op de website van Laravel. Daarna zou je je projectmap moeten aanmaken met alle bestanden van Laravel daarin. Navigeer naar die map op je opdrachtregel en voer deze opdracht daar uit:

php artisan serveren

Als alles goed gaat, zou je moeten zien dat de lokale ontwikkelserver is gestart locahost: 8000. Open je browser en navigeer daar, je zou de welkomstpagina van Laravel moeten zien:


Nu kunnen we doorgaan naar de eigenlijke applicatie.

Migraties en modellen

Modellen in Laravel zijn net als in elk ander MVC-raamwerk. Het gebruikt de geëngageerde ORM om het werk voor u te vergemakkelijken - u zult waarschijnlijk nooit meer een SQL-query hoeven te schrijven (tenzij u iets wilt dat Welsprekend niet ondersteunt). Met behulp van migraties kunt u de databasestructuur aanpassen met de mogelijkheid om wijzigingen ongedaan te maken als er iets misgaat. U kunt meer lezen over migraties in de documentatie.

In onze app zullen we twee modellen gebruiken:

  • Klant - houdt de klantgegevens bij
  • Transactie - zal de informatie over een transactie bewaren

Laten we beginnen met het maken van migraties voor hen. Als u dit nog niet hebt gedaan, sluit u de server af die we eerder zijn gestart (Ctrl + C).

Klanten

Roep eerst dit commando aan:

php artisan migrate: maak create_customers_table

Hiermee wordt een migratiebestand met een basisstructuur voor u gemaakt. Ga nu naar app / databank / migraties. Er moet een bestand zijn met de naam beginnend met een tijdstempel en eindigend met "create_customers_table". Laravel creëerde automatisch deze basisstructuur voor jou up () methode wordt aangeroepen wanneer de migratie wordt toegepast, en omlaag () wanneer het teruggerold is.

Bel eerst de Schema :: create () methode. Er zijn twee argumenten voor nodig - de naam van het schema en een callback-functie:

Schema :: create ('klanten', functie ($ tabel) 

De callback wordt uitgevoerd wanneer de tabel wordt gemaakt. Het tabelobject wordt doorgegeven als de $ table variabele en we manipuleren de structuur van de tabel met behulp ervan. Laten we een auto-verhoging toevoegen ID kaart veld:

 $ Tafel-> stappen ( 'id');

Vervolgens zullen er drie stringvelden zijn voor de voornaam, achternaam en e-mail van de klant:

 $ Tafel-> string ( 'voornaam'); $ Tafel-> string ( 'achternaam'); $ Tafel-> string ( 'email') -> unieke ();

Wij maken de e-mail veld uniek door de uniek() methode erop.

De laatste methode is voor de tijdstempels:

 $ Tafel-> timestamps (); );

Hiermee worden twee datumvelden in het schema gemaakt: gemaakt bij en updated_at. Deze worden door Eloquent gebruikt om de tijd op te slaan waarop het item is gemaakt en bijgewerkt.

Eindelijk zou de code er zo uit moeten zien:

public function up () Schema :: create ('klanten', functie ($ tabel) $ table-> increments ('id'); $ table-> string ('first_name'); $ table-> string (' achternaam_) '; $ table-> string (' email ') -> unique (); $ table-> timestamps ();); 

De omlaag () methode is veel eenvoudiger - het verwijdert gewoon het schema:

public function down () Schema :: drop ('klanten'); 

transacties

De code hier is vergelijkbaar met die van de klant. Roep eerst dit commando aan:

php artisan migrate: create_transactions_table maken

Zoek nu het juiste bestand in de app / databank / migraties en open het. Zoals eerder, begin met het maken van het schema:

Schema :: create ('transacties', functie ($ tabel) 

Voeg nu de velden voor de id, de naam van de transactie, de kosten en de id van de klant toe waartoe het behoort:

 $ Tafel-> stappen ( 'id'); $ Tafel-> string ( 'name'); $ Tafel-> float ( 'bedrag'); $ Tafel-> integer ( 'CUSTOMER_ID');

En natuurlijk de tijdstempels:

 $ Tafel-> timestamps (); );

De definitieve code zou er als volgt uit moeten zien:

public function up () Schema :: create ('transacties', functie ($ tabel) $ table-> increments ('id'); $ table-> string ('name'); $ table-> float (' bedrag '); $ table-> integer (' customer_id '); $ table-> timestamps ();); 

En nu de omlaag () methode:

public function down () Schema :: drop ('transacties'); 

Databaseconfiguratie

Nu moet je voordat je de migraties toepast de verbinding met je database configureren. Open de app / config / database.php bestand en ga naar regel 55. Hier zijn de configuratiegegevens voor MySQL (er zijn maar weinig anderen daar, u kunt bijvoorbeeld SQLite of Postgres gebruiken):

'mysql' => array ('stuurprogramma' => 'mysql', // database-stuurprogramma, raak 'host' => 'localhost', // host van de database, meestal localhost aan tenzij u uw db in een aantal heeft server 'database' => 'database', // naam van de database die je gaat gebruiken, het moet eerder gemaakt zijn 'gebruikersnaam' => 'root', // gebruikersnaam die het script zal gebruiken om te verbinden, raad ik ten sterkste af gebruik root-gebruiker voor dit 'wachtwoord' => ", // wachtwoord voor de bovenstaande gebruiker, het is beter om geen lege 'charset' => 'utf8', // codering van de db 'collatie' => 'utf8_unicode_ci te gebruiken ', // db's collatie-instelling' prefix '=> ", // voorvoegsel van de databasetabellen, handig als u meerdere scripts hebt die dezelfde database gebruiken),

Nadat je dat hebt ingevuld, ben je klaar om te gaan. Zorg ervoor dat je het bestand hebt opgeslagen en deze opdracht oproept vanuit de hoofddirectory van je app (die met de ambachtsman bestand erin):

php artisan migreren

En dat is het. Als er geen fouten waren, betekent dit dat de tabellen met succes zijn gemaakt. U kunt verbinding maken met uw db met behulp van, bijvoorbeeld, phpMyAdmin om handmatig te controleren als u dat wilt.

modellen

In Laravel is het echt snel om een ​​model te maken nadat u uw database met migraties heeft geconfigureerd. Navigeren naar app / modellen en verwijder het voorbeeld User.php bestand dat er is. Maak nu twee bestanden met de naam Customer.php en Transaction.php.

Laten we beginnen met Customer.php. Elk model in Laravel moet het Welsprekend klasse:

class Customer extends Eloquent 

Nu zullen we een relatie tussen de klant en zijn transacties definiëren. Dit wordt gedaan door in het model een openbare methode te definiëren met de naam van de eigenschap die we daarin zouden willen hebben (in dit geval transacties):

 transacties met publieke functies () 

Nu zal er in het lichaam van de functie maar één regel zijn:

 return $ this-> hasMany ('Transaction'); 

Dit vertelt Eloquent dat het alle transacties moet voorzien Klanten ID van de klant onder een eigenschap met de naam transacties.

Nu zullen we vrijwel hetzelfde doen voor de transacties, maar we zullen de relatie ongedaan maken om de eigenaar van de transactie toegankelijk te maken via de klant eigendom:

class-transactie breidt uit Eloquent public function customer () return $ this-> belongTo ('Customer'); 

Dit wordt gedaan met behulp van de $ This-> belongsTo () methode van het model.

Controllers

Om nu de modellen te gebruiken, moeten we controllers voor hen maken. Ga naar de app / controllers map, verwijder de HomeController.php enkel en alleen - BaseController.php is belangrijk omdat onze controllers het uitbreiden. Maak nu twee bestanden: CustomerController.php en TransactionController.php.

CustomerController

Deze controller behandelt alles wat met de klanten te maken heeft - een lijst toevoegen, verwijderen en tonen. Begin met het definiëren van de klas:

class CustomerController breidt BaseController uit 

We zullen de functie van Laravel genaamd RESTful controllers gebruiken. Het maakt het maken van routes eenvoudiger omdat we alleen de basis-URI hoeven te definiëren en Laravel zal alles voor ons afhandelen. Hiervoor moet u uw functienamen starten met het juiste HTTP-werkwoord en vervolgens doorgaan met de naam van de subroute (met camelCase). Dus bijvoorbeeld, als we een methode zouden hebben genaamd getNames en de basis-URI zou zijn /klanten, dan is de methode toegankelijk via / Klanten / namen.

De getIndex (), postIndex (), deleteIndex () enz. methoden worden toegewezen aan de standaardroute (in dit geval /klanten).

Laten we nu onze eerste route definiëren - de klant naar zijn id lokken:

 openbare functie getIndex () 

Laten we de ID van de queryparameters halen (Laravel biedt een mooie Invoer klasse om daar mee om te gaan, zodat je het niet hoeft te gebruiken $ _GET, $ _POST en $ _FILES):

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

En zoek naar de gebruiker in de database met die id:

 terug Klant: zoeken ($ id); 

Elke methode van de controller moet een waarde retourneren die een tekenreeks is of een __toString () methode. In dit geval de Klant model dat wordt geretourneerd, wordt geconverteerd naar JSON voordat het wordt verzonden.

Laten we nu een lijst met alle gebruikers retourneren (deze is toegankelijk onder / Klanten / all):

 openbare functie getAll () retourneer Klant :: alle (); 

Zoals je ziet, kunnen we alle klanten die de modellen gebruiken, krijgen allemaal() methode.

Nu het langste deel, een nieuwe klant toevoegen:

 public function postIndex () 

Laten we eerst eens kijken of alle benodigde informatie aanwezig was. We kunnen dit doen met behulp van de Input :: heeft () methode:

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

Laten we alle invoervelden in de plaatsen $ ingang variabele om te voorkomen dat u belt Input :: te krijgen () opnieuw en opnieuw. Dit kan gedaan worden met Input :: alle ():

 $ input = Input: all ();

Vervolgens zullen we controleren of een van de ingangen leeg is. Als dit het geval is, retourneren we een HTTP 400-fout Bad Request met een meer uitgebreide boodschap:

 if ($ input ['first_name'] == "|| $ input ['last_name'] ==" || $ input ['email'] == ") return Response :: make ('Je moet alles invullen van de invoervelden ', 400);

Omdat we een andere statuscode dan 200 wilden retourneren in plaats van alleen het bericht als een string te retourneren, hebben we het gebruikt Response :: maken (), waarbij de gegevens worden verzonden als de eerste parameter en de statuscode als de tweede. Bekijk de documenten als u meer wilt weten over antwoorden.

Nu maken we eindelijk een nieuw Klant model en voer het met de verstrekte gegevens:

 $ klant = nieuwe klant; $ customer-> first_name = $ input ['first_name']; $ customer-> last_name = $ input ['last_name']; $ customer-> email = $ input ['email'];

Hierna kunnen we het nieuw gemaakte model opslaan en op het verzoek reageren:

 $ Klant-> save (); return $ klant;

Hier behandelen we de case als niet alle inputs werden verstrekt:

  else return Response :: make ('U moet alle invoervelden invullen', 400); 

Ten slotte hebben we ook de mogelijkheid nodig om de klanten te verwijderen. Deze is echt kort:

 openbare functie deleteIndex () 

We beginnen met het ophalen van het ID van de klant:

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

Vervolgens zoeken en verwijderen we de klant:

 $ klant = Klant :: zoeken ($ id); $ Klant-> delete ();

Daarna reageren we op het verzoek met de opgegeven ID:

 return $ id; 

Nu voordat de routes toegankelijk zijn, moeten we ze aansluiten. Open de app / routes.php bestand, verwijder alles behalve de opmerking en voeg deze regel toe aan het einde van het bestand:

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

Dit zal Laravel vertellen om alle verzoeken te routeren /klanten naar onze CustomerController. Nu kunt u CURL gebruiken om ermee te spelen. Start eerst de server met php artisan serveren en dan kun je bijvoorbeeld een klant maken:

curl -X POST -d "[email protected]" http: // localhost: 8000 / klanten

Dan kunt u de lijst met alle klanten krijgen:

krul http: // localhost: 8000 / klanten / allemaal

TransactionController

Dit lijkt, net als het model, sterk op het CustomerController. Maak eerst de klas:

class TransactionController breidt BaseController uit 

Laten we dan de methode definiëren om alle transacties voor een gebruiker te krijgen:

 openbare functie getIndex () $ id = Input :: get ('id'); return User :: find ($ id) -> transacties; 

Zoals je kunt zien gebruiken we de eerder gedefinieerde relatie om de transacties te krijgen (herinner nu de vraag die je moest schrijven om hetzelfde te bereiken met gewone PHP en SQL).

Het volgende ding zal het creëren van transacties zijn:

 public function postIndex () 

Zoals eerder, controleren we of alle vereiste informatie is verstrekt:

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

Als dat zo is, wijst u het toe aan een $ ingang variabele:

 $ input = Input: all ();

Controleer of een van de opgegeven waarden leeg is en zo ja, retourneer een foutmelding:

 if ($ input ['name'] == "|| $ input ['amount'] ==") return Response :: make ('U moet alle invoervelden invullen', 400); 

Maak nu de transactie en lever deze met alle verstrekte informatie:

 $ transactie = nieuwe transactie; $ transactie-> naam = $ invoer ['naam']; $ transactie-> bedrag = $ invoer ['aantal'];

Nu moeten we het toevoegen aan de juiste klant. Laten we ze vinden op de opgegeven ID en het toevoegen $ transactie naar hun transactieslijst:

 $ id = $ input ['customer_id']; Gebruikers :: find ($ id) -> transactions-> besparen ($ transactie);

Dit wordt gedaan met behulp van de transactions-> save () methode geboden door Laravel. Nu kunnen we reageren met de gemaakte transactie:

 return $ transactie;

En behandel het geval waarin geen of niet alle gegevens werden verstrekt:

  else return Response :: make ('U moet alle invoervelden invullen', 400); 

Daarna is er ook een methode om de transactie te verwijderen op dezelfde manier als waarop we de klant hebben verwijderd:

 openbare functie deleteIndex () $ id = Input :: get ('id'); $ transaction = Transaction :: find ($ id); $ Transaction-> delete (); return $ id; 

Voeg nu gewoon de route toe en u kunt de controller testen met CURL:

Route :: controller ('/ transacties', 'TransactionController');

Conclusie

Oke, dit is het einde van het eerste deel - in het tweede deel van deze tutorial zullen we de front-end maken met AngularJS. Voeg gerust meer functies toe aan uw app (zoals het bewerken van klanten of sorteren), mocht u de informatie die u zocht niet vinden, neem dan een kijkje in de documentatie van Laravel.