De-a lungul acestui tutorial pentru începători veți învăța să utilizați Laravel 5.7 – cea mai recentă versiune a unuia dintre cele mai populare framework-uri PHP – pentru a crea de la zero o aplicație web CRUD cu o bază de date MySQL. Vom parcurge procesul pas cu pas începând cu instalarea Composer (manager de pachete PHP) și continuând cu implementarea și deservirea aplicației dvs.

Condiții prealabile

Acest tutorial presupune că aveți PHP și MySQL instalate pe sistemul dvs. Urmați instrucțiunile pentru sistemul dvs. de operare pentru a le instala pe ambele.

De asemenea, trebuie să vă familiarizați cu Linux / macOS bash unde vom executa comenzile din acest tutorial.

Este necesară familiarizarea cu PHP, deoarece Laravel se bazează pe PHP.

Pentru dezvoltare, voi folosi o mașină Ubuntu 16.04, astfel încât comenzile din acest tutorial vizează acest sistem, dar ar trebui să puteți urmări acest tutorial în orice sistem de operare pe care îl utilizați.

Instalarea PHP 7.1

Laravel v5.7 necesită PHP 7.1 sau o versiune ulterioară, deci aveți nevoie de cea mai recentă versiune de PHP instalată pe sistemul dvs. Procesul este simplu pe majoritatea sistemelor.

Pe Ubuntu, puteți urma aceste instrucțiuni.

Mai întâi adăugați ondrej/php PPA care conține cea mai recentă versiune de PHP:

$ sudo add-apt-repository ppa:ondrej/php $ sudo apt-get update

Apoi, instalați PHP 7.1 folosind următoarea comandă:

$ sudo apt-get install php7.1

Dacă utilizați Ubuntu 18.04, PHP 7.2 este inclus în depozitul Ubuntu implicit pentru 18.04, deci ar trebui să îl puteți instala folosind următoarea comandă:

$ sudo apt-get install php

Acest tutorial este testat cu PHP 7.1, dar puteți utiliza și versiuni mai recente precum PHP 7.2 sau PHP 7.3

Instalarea modulelor PHP 7.1 necesare

Laravel necesită o grămadă de module. Le puteți instala folosind următoarea comandă:

$ sudo apt-get install php7.1 php7.1-cli php7.1-common php7.1-json php7.1-opcache php7.1-mysql php7.1-mbstring php7.1-mcrypt php7.1-zip php7.1-fpm php7.1-xml

Instalarea PHP Composer

Să începem călătoria noastră instalând Composer, managerul de pachete PHP.

Navigați în directorul de acasă, apoi descărcați programul de instalare de pe site-ul oficial folosind curl:

$ cd ~ $ curl -sS https://getcomposer.org/installer -o composer-setup.php

Apoi puteți instala composer la nivel global pe sistemul dvs. utilizând următoarea comandă:

$ sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

Începând cu această scriere, Composer 1.8 va fi instalat pe sistemul dvs. Vă puteți asigura că instalarea dvs. funcționează conform așteptărilor, rulând composer în terminalul dvs.:

Ar trebui să obțineți următoarea ieșire:

______  / ____/___  ____ ___  ____  ____  ________  _____ / /   / __ / __ `__ / __ / __ / ___/ _ / ___// /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /____/____/_/ /_/ /_/ .___/____/____/___/_/                    /_/Composer version 1.8.0 2018-12-03 10:31:16Usage:  command [options] [arguments]Options:  -h, --help                     Display this help message  -q, --quiet                    Do not output any message  -V, --version                  Display this application version      --ansi                     Force ANSI output      --no-ansi                  Disable ANSI output  -n, --no-interaction           Do not ask any interactive question      --profile                  Display timing and memory usage information      --no-plugins               Whether to disable plugins.  -d, --working-dir=WORKING-DIR  If specified, use the given directory as working directory.  -v|vv|vvv, --verbose           Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Pentru mai multe informații, consultați acest lucru tutorial.

Dacă ați instalat cu succes Composer în sistemul dvs., sunteți gata să creați un proiect Laravel 5.7.

Instalarea și crearea unui proiect Laravel 5.7

În această secțiune vom introduce Laravel și apoi vom continua instalarea și crearea unui proiect Laravel 5.7.

Despre Laravel

Laravel docs descrie-l ca:

Laravel este un cadru de aplicații web cu sintaxă expresivă și elegantă. Credem că dezvoltarea trebuie să fie o experiență plăcută și creativă pentru a fi cu adevărat împlinitoare. Laravel încearcă să elimine durerea din dezvoltare prin ușurarea sarcinilor comune utilizate în majoritatea proiectelor web, cum ar fi:

Laravel este accesibil, dar puternic, oferind instrumente necesare pentru aplicații mari și robuste.

Generarea unui proiect Laravel 5.7 este ușoară și simplă. În terminalul dvs., executați următoarea comandă:

$ composer create-project --prefer-dist laravel/laravel laravel-first-crud-app

Aceasta se va instala laravel/laravel v5.7.19.

Notă: Asigurați-vă că aveți cel puțin PHP 7.1 instalat pe sistemul dvs. În caz contrar, compozitorul va folosi Laravel 5.5 pentru proiectul dvs.

Puteți verifica versiunea instalată în proiectul dvs. utilizând:

$ cd laravel-first-crud-app $ php artisan -V Laravel Framework 5.7.22

Instalarea dependențelor front-end

În proiectul dvs. generat, puteți vedea că a package.json este generat fișierul care include multe biblioteci front-end care pot fi utilizate de proiectul dvs.:

  • axios,
  • bootstrap,
  • încrucișat,
  • jquery,
  • mix de laravel,
  • lodash,
  • popper.js,
  • resolver-url-loader,
  • sass,
  • sass-loader,
  • vue.

Notă: Puteți utiliza bibliotecile preferate cu Laravel, nu în mod specific cele adăugate la package.json.

package.json fișierul din proiectul dvs. Laravel include câteva pachete, cum ar fi vue și axios pentru a vă ajuta să începeți să creați aplicația JavaScript.

De asemenea, include bootstrap pentru a vă ajuta să începeți cu Bootstrap pentru stilizarea interfeței dvs.

Include Laravel Mix pentru a vă ajuta să compilați fișierele SASS în CSS simplu.

Trebuie să folosiți npm pentru a instala dependențele front-end:

$ npm install

După executarea acestei comenzi a node_modules folderul va fi creat și dependențele vor fi instalate în acesta.

Notă: Trebuie să aveți Node.js și npm instalate pe sistemul dvs. înainte de a putea instala dependențele front-end.

Crearea unei baze de date MySQL

Să creăm acum o bază de date MySQL pe care o vom folosi pentru a păstra datele în aplicația noastră Laravel. În terminalul dvs., executați următoarea comandă pentru a rula mysql client:

$ mysql -u root -p

Când vi se solicită, introduceți parola pentru serverul MySQL când l-ați instalat.

Apoi, rulați următoarea instrucțiune SQL pentru a crea un db Bază de date:

mysql> create database db;

Deschide .env înregistrați și actualizați acreditările pentru a accesa baza de date MySQL:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db DB_USERNAME=root DB_PASSWORD=******

Trebuie să introduceți numele bazei de date, numele de utilizator și parola.

În acest moment, puteți rula migrate comanda pentru a vă crea baza de date și o grămadă de tabele SQL necesare Laravel:

Notă: Puteți rula migrate comandați în orice alte puncte ale dezvoltării dvs. pentru a adăuga alte tabele SQL în baza de date sau pentru a vă ulterior baza de date, dacă trebuie să adăugați modificări ulterior.

Crearea primului dvs. model Laravel

Laravel folosește modelul arhitectural MVC pentru a vă organiza aplicația în trei părți decuplate:

  • Modelul care încapsulează stratul de acces la date,
  • Vizualizarea care încapsulează stratul de reprezentare,
  • Controler care încapsulează codul pentru a controla aplicația și comunică cu modelul și straturile de vizualizare.

Wikipedia definește MVC ca:

Model-vizualizare-controler este un model arhitectural frecvent utilizat pentru dezvoltare interfețe utilizator care împarte o aplicație în trei părți interconectate. Acest lucru se face pentru a separa reprezentările interne ale informațiilor de modurile în care informațiile sunt prezentate și acceptate de către utilizator.

Acum, să creăm primul nostru model Laravel. În terminalul dvs., executați următoarea comandă:

$ php artisan make:model Contact --migration

Aceasta va crea un model de contact și un fișier de migrare. În terminal, obținem o ieșire similară cu:

Model created successfully. Created Migration: 2019_01_27_193840_create_contacts_table

Deschide database/migrations/xxxxxx_create_contacts_table fișier de migrare și actualizați-l în consecință:

<?phpuse IlluminateSupportFacadesSchema;use IlluminateDatabaseSchemaBlueprint;use IlluminateDatabaseMigrationsMigration;class CreateContactsTable extends Migration{    /**     * Run the migrations.     *     * @return void     */    public function up()    {        Schema::create('contacts', function (Blueprint $table) {            $table->increments('id');            $table->timestamps();            $table->string('first_name');            $table->string('last_name');            $table->string('email');            $table->string('job_title');            $table->string('city');               $table->string('country');                    });    }    /**     * Reverse the migrations.     *     * @return void     */    public function down()    {        Schema::dropIfExists('contacts');    }}

Am adăugat first_name, last_name, email, job_title, city și country câmpuri în contacts masa.

Acum puteți crea fișierul contacts din baza de date folosind următoarea comandă:

$ php artisan migrate

Acum, să ne uităm la al nostru Contact model, care va fi folosit pentru a interacționa cu contacts tabelul bazei de date. Deschide app/Contact.php și actualizați-l:

<?phpnamespace App;use IlluminateDatabaseEloquentModel;class Contact extends Model{    protected $fillable = [        'first_name',        'last_name',        'email',        'city',        'country',        'job_title'           ];}

Crearea controlerului și rutelor

După crearea modelului și migrarea bazei noastre de date, să creăm acum controlerul și rutele de lucru cu Contact model. În terminalul dvs., executați următoarea comandă:

$ php artisan make:controller ContactController --resource

Rutare resurselor Laravel atribuie rutele tipice „CRUD” către un controler cu o singură linie de cod. De exemplu, vă recomandăm să creați un controler care să gestioneze toate cererile HTTP pentru „fotografii” stocate de aplicația dvs. Folosind make:controller Comandă artizanală, putem crea rapid un astfel de controler.

Această comandă va genera un controler la app/Http/Controllers/PhotoController.php. Controlerul va conține o metodă pentru fiecare dintre operațiunile de resurse disponibile.

Deschide app/Http/Controllers/ContactController.php fişier. Acesta este conținutul inițial:

<?phpnamespace AppHttpControllers;use IlluminateHttpRequest;class ContactController extends Controller{    /**     * Display a listing of the resource.     *     * @return IlluminateHttpResponse     */    public function index()    {        //    }    /**     * Show the form for creating a new resource.     *     * @return IlluminateHttpResponse     */    public function create()    {        //    }    /**     * Store a newly created resource in storage.     *     * @param  IlluminateHttpRequest  $request     * @return IlluminateHttpResponse     */    public function store(Request $request)    {        //    }    /**     * Display the specified resource.     *     * @param  int  $id     * @return IlluminateHttpResponse     */    public function show($id)    {        //    }    /**     * Show the form for editing the specified resource.     *     * @param  int  $id     * @return IlluminateHttpResponse     */    public function edit($id)    {        //    }    /**     * Update the specified resource in storage.     *     * @param  IlluminateHttpRequest  $request     * @param  int  $id     * @return IlluminateHttpResponse     */    public function update(Request $request, $id)    {        //    }    /**     * Remove the specified resource from storage.     *     * @param  int  $id     * @return IlluminateHttpResponse     */    public function destroy($id)    {        //    }}

ContactController clasa se extinde Controller clasă disponibilă de la Laravel și definește o grămadă de metode care vor fi utilizate pentru a face operațiunile CRUD împotriva Contact model.

Puteți citi rolul metodei în comentariul de mai sus.

Acum trebuie să oferim implementări pentru aceste metode.

Dar înainte de asta, să adăugăm rutare. Deschide routes/web.php fișierul și actualizați-l în consecință:

<?phpRoute::get('/', function () {    return view('welcome');});Route::resource('contacts', 'ContactController');

Folosind resource() metoda statică a Route, puteți crea mai multe rute pentru a expune mai multe acțiuni asupra resursei.

Aceste rute sunt mapate la diverse ContactController metodele pe care va trebui să le implementăm în secțiunea următoare:

  • OBȚINE/contacts, mapat la index() metodă,
  • OBȚINE /contacts/create, mapat la create() metodă,
  • POST /contacts, mapat la store() metodă,
  • OBȚINE /contacts/{contact}, mapat la show() metodă,
  • OBȚINE /contacts/{contact}/edit, mapat la edit() metodă,
  • PUT / PATCH /contacts/{contact}, mapat la update() metodă,
  • ȘTERGE /contacts/{contact}, mapat la destroy() metodă.

Aceste rute sunt utilizate pentru a servi șabloane HTML și, de asemenea, ca puncte finale API pentru lucrul cu Contact model.

Notă: Dacă doriți să creați un controler care să expună doar un API RESTful, puteți utiliza fișierul apiResource metodă pentru a exclude rutele care sunt utilizate pentru a servi șabloanele HTML:

Route::apiResource('contacts', 'ContactController');

Implementarea operațiunilor CRUD

Să implementăm acum metodele de control alături de vizualizări.

C: Implementarea operației de creare și adăugarea unui formular

ContactController include

  • store() metodă care mapează la POST /contacts Punct final API care va fi utilizat pentru a crea un contact în baza de date și
  • create() care mapează la GET /contacts/create ruta care va fi utilizată pentru a difuza formularul HTML utilizat pentru trimiterea contactului POST /contacts Punct final API.

Să implementăm aceste două metode.

Deschideți din nou fișierul app/Http/Controllers/ContactController.php fișier și începeți prin importul fișierului Contact model:

use AppContact;

Apoi, localizați fișierul store() metoda și actualizați-o în consecință:

public function store(Request $request)    {        $request->validate([            'first_name'=>'required',            'last_name'=>'required',            'email'=>'required'        ]);        $contact = new Contact([            'first_name' => $request->get('first_name'),            'last_name' => $request->get('last_name'),            'email' => $request->get('email'),            'job_title' => $request->get('job_title'),            'city' => $request->get('city'),            'country' => $request->get('country')        ]);        $contact->save();        return redirect('/contacts')->with('success', 'Contact saved!');    }

Apoi, localizați create() metoda și actualizați-o:

public function create() { return view('contacts.create'); }

create() funcția folosește view() metoda de returnare a create.blade.php șablon care trebuie să fie prezent în resources/views pliant.

Înainte de a crea create.blade.php șablon trebuie să creăm un șablon de bază care va fi extins de șablonul de creare și toate celelalte șabloane care vor fi create mai târziu în acest tutorial.

În resources/views folder, creați un base.blade.php fişier:

$ cd resources/views $ touch base.blade.php

Deschide resources/views/base.blade.php fișier și adăugați următorul șablon blade:

<!DOCTYPE html><html lang="en"><head>  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Laravel 5.7 & MySQL CRUD Tutorial</title>  <link href="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ asset("css/app.css') }}" rel="stylesheet" type="text/css" /></head><body>  <div class="container">    @yield('main')  </div>  <script src="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ asset("js/app.js') }}" type="text/js"></script></body></html>

Acum, să creăm create.blade.php șablon. Mai întâi, creați un folder de contacte în folderul de vizualizări:

$ mkdir contacts

Apoi, creați șablonul

$ cd contacts $ touch create.blade.php

Deschide resources/views/contacts/create.blade.php fișier și adăugați următorul cod:

@extends('base')@section('main')<div class="row"> <div class="col-sm-8 offset-sm-2">    <h1 class="display-3">Add a contact</h1>  <div>    @if ($errors->any())      <div class="alert alert-danger">        <ul>            @foreach ($errors->all() as $error)              <li>{{ $error }}</li>            @endforeach        </ul>      </div><br />    @endif      <form method="post" action="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ route("contacts.store') }}">          @csrf          <div class="form-group">                  <label for="first_name">First Name:</label>              <input type="text" class="form-control" name="first_name"/>          </div>          <div class="form-group">              <label for="last_name">Last Name:</label>              <input type="text" class="form-control" name="last_name"/>          </div>          <div class="form-group">              <label for="email">Email:</label>              <input type="text" class="form-control" name="email"/>          </div>          <div class="form-group">              <label for="city">City:</label>              <input type="text" class="form-control" name="city"/>          </div>          <div class="form-group">              <label for="country">Country:</label>              <input type="text" class="form-control" name="country"/>          </div>          <div class="form-group">              <label for="job_title">Job Title:</label&gt;              <input type="text" class="form-control" name="job_title"/>          </div>                                   <button type="submit" class="btn btn-primary-outline">Add contact</button>      </form>  </div></div></div>@endsection

Aceasta este o captură de ecran a formularului nostru de creare!

Cum sa construiti prima aplicatie CRUD cu Laravel si MySQL

Completați formularul și faceți clic pe Adaugă contact pentru a crea un contact în baza de date. Ar trebui să fiți redirecționat către / contact ruta care nu are încă o vizualizare asociată.

R: Implementarea operației de citire și obținerea datelor

În continuare, să implementăm operația de citire pentru a obține și afișa date de contact din baza noastră de date MySQL.

Du-te la app/Http/Controllers/ContactController.php fișier, localizați fișierul index() metoda și actualizați-o:

public function index()    {        $contacts = Contact::all();        return view('contacts.index', compact('contacts'));    }

Apoi, trebuie să creați șablonul index. Creeaza o resources/views/contacts/index.blade.php fişier:

$ touch index.blade.php

Deschide resources/views/contacts/index.blade.php fișier și adăugați următorul cod:

@extends('base')@section('main')<div class="row"><div class="col-sm-12">    <h1 class="display-3">Contacts</h1>      <table class="table table-striped">    <thead>        <tr>          <td>ID</td>          <td>Name</td>          <td>Email</td>          <td>Job Title</td>          <td>City</td>          <td>Country</td>          <td colspan = 2>Actions</td>        </tr>    </thead>    <tbody>        @foreach($contacts as $contact)        <tr>            <td>{{$contact->id}}</td>            <td>{{$contact->first_name}} {{$contact->last_name}}</td>            <td>{{$contact->email}}</td>            <td>{{$contact->job_title}}</td>            <td>{{$contact->city}}</td>            <td>{{$contact->country}}</td>            <td>                <a href="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ route("contacts.edit',$contact->id)}}" class="btn btn-primary">Edit</a>            </td>            <td>                <form action="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ route("contacts.destroy', $contact->id)}}" method="post">                  @csrf                  @method('DELETE')                  <button class="btn btn-danger" type="submit">Delete</button>                </form>            </td>        </tr>        @endforeach    </tbody>  </table><div></div>@endsection

U: Implementarea operației de actualizare

În continuare, trebuie să implementăm operațiunea de actualizare. Du-te la app/Http/Controllers/ContactController.php fișier, localizați fișierul edit($id) metoda și actualizați-o:

public function edit($id)    {        $contact = Contact::find($id);        return view('contacts.edit', compact('contact'));            }

Apoi, trebuie să implementați update() metodă:

public function update(Request $request, $id)    {        $request->validate([            'first_name'=>'required',            'last_name'=>'required',            'email'=>'required'        ]);        $contact = Contact::find($id);        $contact->first_name =  $request->get('first_name');        $contact->last_name = $request->get('last_name');        $contact->email = $request->get('email');        $contact->job_title = $request->get('job_title');        $contact->city = $request->get('city');        $contact->country = $request->get('country');        $contact->save();        return redirect('/contacts')->with('success', 'Contact updated!');    }

Acum, trebuie să adăugați șablonul de editare. În interiorul resources/views/contacts/, creaza un edit.blade.php fişier:

$ touch edit.blade.php

Deschide resources/views/contacts/edit.blade.php fișier și adăugați acest cod:

@extends('base') @section('main')<div class="row">    <div class="col-sm-8 offset-sm-2">        <h1 class="display-3">Update a contact</h1>        @if ($errors->any())        <div class="alert alert-danger">            <ul>                @foreach ($errors->all() as $error)                <li>{{ $error }}</li>                @endforeach            </ul>        </div>        <br />         @endif        <form method="post" action="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ route("contacts.update', $contact->id) }}">            @method('PATCH')             @csrf            <div class="form-group">                <label for="first_name">First Name:</label>                <input type="text" class="form-control" name="first_name" value={{ $contact->first_name }} />            </div>            <div class="form-group">                <label for="last_name">Last Name:</label>                <input type="text" class="form-control" name="last_name" value={{ $contact->last_name }} />            </div>            <div class="form-group">                <label for="email">Email:</label>                <input type="text" class="form-control" name="email" value={{ $contact->email }} />            </div>            <div class="form-group">                <label for="city">City:</label>                <input type="text" class="form-control" name="city" value={{ $contact->city }} />            </div>            <div class="form-group">                <label for="country">Country:</label>                <input type="text" class="form-control" name="country" value={{ $contact->country }} />            </div>            <div class="form-group">                <label for="job_title">Job Title:</label>                <input type="text" class="form-control" name="job_title" value={{ $contact->job_title }} />            </div>            <button type="submit" class="btn btn-primary">Update</button>        </form>    </div></div>@endsection

D: Implementarea operației de ștergere

În cele din urmă, vom continua să implementăm operațiunea de ștergere. Du-te la app/Http/Controllers/ContactController.php fișier, localizați fișierul destroy() metoda și actualizați-o în consecință:

public function destroy($id)    {        $contact = Contact::find($id);        $contact->delete();        return redirect('/contacts')->with('success', 'Contact deleted!');    }

Puteți observa acest lucru atunci când redirecționăm către /contacts în metodele noastre API CRUD, transmitem și un mesaj de succes, dar acesta nu apare în index șablon. Să schimbăm asta!

Du-te la resources/views/contacts/index.blade.php fișier și adăugați următorul cod:

<div class="col-sm-12">  @if(session()->get('success'))    <div class="alert alert-success">      {{ session()->get('success') }}      </div>  @endif</div>

De asemenea, trebuie să adăugăm un buton pentru a ne duce la formularul de creare. Adăugați acest cod sub antet:

<div>    <a style="margin: 19px;" href="https://www.freecodecamp.org/news/laravel-5-7-tutorial-build-your-first-crud-app-with-laravel-and-mysql-15cbd06c6cef/{{ route("contacts.create')}}" class="btn btn-primary">New contact</a></div>

Aceasta este o captură de ecran a paginii după ce am creat un contact:

1612028229 75 Cum sa construiti prima aplicatie CRUD cu Laravel si MySQL

Concluzie

Am ajuns la sfârșitul acestui tutorial. Am creat o aplicație CRUD cu Laravel 5.7, PHP 7.1 și MySQL.

Sper că ți-a plăcut tutorialul și ne vedem în următorul!