כיצד לבנות את אפליקציית ה- CRUD הראשונה שלך עם Laravel ו- MySQL

במהלך הדרכה זו למתחילים תלמד להשתמש ב- Laravel 5.7 - הגרסה האחרונה של אחת ממסגרות ה- PHP הפופולריות ביותר - כדי ליצור יישום אינטרנט CRUD עם מסד נתונים MySQL מאפס. נעבור את התהליך שלב אחר שלב החל מההתקנה של Composer (מנהל חבילות PHP) ונמשיך ביישום והגשת היישום שלך.

תנאים מוקדמים

הדרכה זו מניחה שיש התקנת PHP ו- MySQL במערכת שלך. עקוב אחר ההוראות של מערכת ההפעלה שלך להתקנת שניהם.

אתה גם צריך להכיר את Linux / macOS bash בו נבצע את הפקודות במדריך זה.

היכרות עם PHP נדרשת מכיוון ש- Laravel מבוסס על PHP.

לצורך פיתוח אשתמש במכונת 16.04 של אובונטו ולכן הפקודות במדריך זה מכוונות למערכת זו, אך אתה אמור להיות מסוגל לעקוב אחר הדרכה זו בכל מערכת הפעלה בה אתה משתמש.

התקנת PHP 7.1

Laravel v5.7 דורש PHP 7.1 ומעלה ולכן אתה זקוק לגירסה האחרונה של PHP המותקנת במערכת שלך. התהליך הוא פשוט ברוב המערכות.

באובונטו תוכל לבצע את ההוראות האלה.

ראשית הוסף את ה- ondrej/phpPPA המכיל את הגרסה האחרונה של PHP:

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

לאחר מכן, התקן את PHP 7.1 באמצעות הפקודה הבאה:

$ sudo apt-get install php7.1

אם אתה משתמש באובונטו 18.04, PHP 7.2 כלול במאגר אובונטו המוגדר כברירת מחדל עבור 18.04, כך שתוכל להתקין אותו באמצעות הפקודה הבאה:

$ sudo apt-get install php
מדריך זה נבדק עם PHP 7.1 אך ניתן גם להשתמש בגרסאות עדכניות יותר כמו PHP 7.2 או PHP 7.3

התקנת מודולי ה- PHP 7.1 הנדרשים

Laravel דורש חבורה של מודולים. אתה יכול להתקין אותם באמצעות הפקודה הבאה:

$ 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

התקנת מלחין PHP

נתחיל במסענו בהתקנת Composer, מנהל חבילות ה- PHP.

נווט בספריית הבית שלך, ואז הורד את תוכנית ההתקנה מהאתר הרשמי באמצעות curl:

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

לאחר מכן תוכל להתקין composerבאופן גלובלי במערכת שלך באמצעות הפקודה הבאה:

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

נכון לכתיבת שורות אלה, Composer 1.8 יותקן במערכת שלך. אתה יכול לוודא שההתקנה שלך פועלת כצפוי על ידי הפעלה composerבמסוף שלך:

אתה אמור לקבל את הפלט הבא:

______ / ____/___ ____ ___ ____ ____ ________ _____ / / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___// /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ /\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/ /_/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

למידע נוסף עיין במדריך זה.

אם התקנת את Composer בהצלחה במערכת שלך, אתה מוכן ליצור פרויקט Laravel 5.7.

התקנה ויצירה של פרויקט Laravel 5.7

בחלק זה נציג את Laravel ואז נמשיך להתקין וליצור פרויקט Laravel 5.7.

על לאראבל

מסמכי Laravel מתארים את זה כ:

Laravel היא מסגרת ליישומי רשת עם תחביר אקספרסיבי ואלגנטי. אנו מאמינים שהתפתחות חייבת להיות חוויה מהנה ויצירתית כדי להגשים באמת. Laravel מנסה להוציא את הכאב מהפיתוח על ידי הקלה במשימות נפוצות המשמשות ברוב פרויקטים ברשת, כגון: Laravel נגיש, אך חזק, ומספק כלים הדרושים ליישומים גדולים וחזקים.

הפקת פרויקט Laravel 5.7 היא קלה ופשוטה. במסוף שלך, הפעל את הפקודה הבאה:

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

פעולה זו תתקין את laravel/laravelv5.7.19 .

הערה : וודא שהתקנת מערכת PHP לפחות 7.1. אחרת, המלחין ישתמש ב- Laravel 5.5 עבור הפרויקט שלך.

תוכל לאמת את הגרסה המותקנת בפרויקט שלך באמצעות:

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

התקנת התלות הקדמית

בפרויקט שנוצר, אתה יכול לראות שנוצר package.jsonקובץ הכולל ספריות חזית רבות שיכולות לשמש את הפרויקט שלך:

  • axios,
  • bootstrap,
  • cross-env,
  • jquery,
  • תערובת זחל,
  • lodash,
  • popper.js,
  • loss-url-loader,
  • סאס,
  • מטעין חוטף,
  • vue.
הערה : באפשרותך להשתמש בספריות המועדפות עליך עם Laravel ולא ספציפית בספריות שנוספו אליהם package.json. הקובץ בפרויקט Laravel שלך כולל כמה חבילות כגון ועל מנת לעזור לך להתחיל בבניית יישום JavaScript שלך. זה כולל גם כדי לעזור לך להתחיל עם Bootstrap לעיצוב ממשק המשתמש שלך. הוא כולל Laravel Mix שיעזור לך להרכיב את קבצי ה- SASS שלך ל- CSS רגיל.package.jsonvueaxios bootstrap

עליך להשתמש npmכדי להתקין את התלות הקדמית:

$ npm install

לאחר הפעלת פקודה זו node_modulesתיווצר תיקיה והתקנות התלות יותקנו בה.

הערה : עליך להתקין במערכת שלך את Node.js ו- npm לפני שתוכל להתקין את התלות הקדמית.

יצירת מסד נתונים של MySQL

בואו ניצור כעת מסד נתונים של MySQL בו נשתמש כדי לשמור על נתונים ביישום Laravel שלנו. במסוף שלך, הפעל את הפקודה הבאה להפעלת mysqlהלקוח:

$ mysql -u root -p

כשתתבקש, הזן את הסיסמה לשרת MySQL שלך לאחר שהתקנת אותה.

לאחר מכן, הפעל את משפט SQL הבא ליצירת dbמסד נתונים:

mysql> create database db;

פתח את .envהקובץ ועדכן את האישורים כדי לגשת למסד הנתונים MySQL שלך:

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

עליך להזין את שם מסד הנתונים, שם המשתמש והסיסמה.

At this point, you can run the migrate command to create your database and a bunch of SQL tables needed by Laravel:

Note : You can run the migrate command at any other points of your development to add other SQL tables in your database or to later your database if you need to add any changes later.

Creating your First Laravel Model

Laravel uses the MVC architectural pattern to organize your application in three decoupled parts:

  • The Model which encapsulates the data access layer,
  • The View which encapsulates the representation layer,
  • Controller which encapsulates the code to control the application and communicates with the model and view layers.

Wikipedia defines MVC as:

Model–view–controller is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.

Now, let’s create our first Laravel Model. In your terminal, run the following command:

$ php artisan make:model Contact --migration

This will create a Contact model and a migration file. In the terminal, we get an output similar to:

Model created successfully. Created Migration: 2019_01_27_193840_create_contacts_table

Open the database/migrations/xxxxxx_create_contacts_table migration file and update it accordingly:

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'); }}

We added the first_name, last_name, email, job_title, city and country fields in the contacts table.

You can now create the contacts table in the database using the following command:

$ php artisan migrate

Now, let’s look at our Contact model, which will be used to interact with the contacts database table. Open the app/Contact.php and update it:


    

Creating the Controller and Routes

After creating the model and migrating our database, let’s now create the controller and the routes for working with the Contact model. In your terminal, run the following command:

$ php artisan make:controller ContactController --resource
Laravel resource routing assigns the typical “CRUD” routes to a controller with a single line of code. For example, you may wish to create a controller that handles all HTTP requests for “photos” stored by your application. Using the make:controller Artisan command, we can quickly create such a controller.This command will generate a controller at app/Http/Controllers/PhotoController.php. The controller will contain a method for each of the available resource operations.

Open the app/Http/Controllers/ContactController.php file. This is the initial content:


     

The ContactController class extends Controller class available from Laravel and defines a bunch of methods which will be used to do the CRUD operations against the Contact model.

You can read the role of the method on the comment above it.

Now we need to provide implementations for these methods.

But before that, let’s add routing. Open the routes/web.php file and update it accordingly:


      

Using the resource() static method of Route, you can create multiple routes to expose multiple actions on the resource.

These routes are mapped to various ContactController methods which we will need to implement in the next section:

  • GET/contacts, mapped to the index() method,
  • GET /contacts/create, mapped to the create() method,
  • POST /contacts, mapped to the store() method,
  • GET /contacts/{contact}, mapped to the show() method,
  • GET /contacts/{contact}/edit, mapped to the edit() method,
  • PUT/PATCH /contacts/{contact}, mapped to the update() method,
  • DELETE /contacts/{contact}, mapped to the destroy() method.

These routes are used to serve HTML templates and also as API endpoints for working with the Contact model.

Note: If you want to create a controller that will only expose a RESTful API, you can use the apiResource method to exclude the routes that are used to serve the HTML templates:
Route::apiResource('contacts', 'ContactController');

Implementing the CRUD Operations

Let’s now implement the controller methods alongside the views.

C: Implementing the Create Operation and Adding a Form

The ContactController includes

  • the store() method that maps to the POST /contacts API endpoint which will be used to create a contact in the database, and
  • the create() that maps to the GET /contacts/create route which will be used to serve the HTML form used to submit the contact to POST /contacts API endpoint.

Let’s implement these two methods.

Re-open the app/Http/Controllers/ContactController.php file and start by importing the Contact model:

use App\Contact;

Next, locate the store() method and update it accordingly:

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!'); }

Next, locate the create() method and update it:

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

The create() function makes use of the view() method to return the create.blade.php template which needs to be present in the resources/views folder.

Before creating the create.blade.php template we need to create a base template that will be extended by the create template and all the other templates that will create later in this tutorial.

In the resources/views folder, create a base.blade.php file:

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

Open the resources/views/base.blade.php file and add the following blade template:

  Laravel 5.7 & MySQL CRUD Tutorial @yield('main') 

Now, let’s create the create.blade.php template. First, create a contacts folder in the views folder:

$ mkdir contacts

Next, create the template

$ cd contacts $ touch create.blade.php

Open the resources/views/contacts/create.blade.php file and add the following code:

@extends('base')@section('main') 

Add a contact

@if ($errors->any())
    @foreach ($errors->all() as $error)
  • {{ $error }}
  • @endforeach

@endif @csrf First Name: Last Name: Email: City: Country: Job Title: Add contact @endsection

This is a screenshot of our create form!

Fill out the form and click on the Add contact button to create a contact in the database. You should be redirected to /contacts route which doesn’t have a view associated to it yet.

R: Implementing the Read Operation and Getting Data

Next, let’s implement the read operation to get and display contacts data from our MySQL database.

Go to the app/Http/Controllers/ContactController.php file, locate the index() method and update it:

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

Next, you need to create the index template. Create a resources/views/contacts/index.blade.php file:

$ touch index.blade.php

Open the resources/views/contacts/index.blade.php file and add the following code:

@extends('base')@section('main') 

Contacts

@foreach($contacts as $contact) @endforeach
ID Name Email Job Title City Country Actions
{{$contact->id}} {{$contact->first_name}} {{$contact->last_name}} {{$contact->email}} {{$contact->job_title}} {{$contact->city}} {{$contact->country}} id)}}">Edit id)}}" method="post"> @csrf @method('DELETE') Delete
@endsection

U: Implementing the Update Operation

Next, we need to implement the update operation. Go to the app/Http/Controllers/ContactController.php file, locate the edit($id) method and update it:

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

Next, you need to implement the update() method:

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!'); }

Now, you need to add the edit template. Inside the resources/views/contacts/, create an edit.blade.php file:

$ touch edit.blade.php

Open the resources/views/contacts/edit.blade.php file and add this code:

@extends('base') @section('main') 

Update a contact

@if ($errors->any())
    @foreach ($errors->all() as $error)
  • {{ $error }}
  • @endforeach

@endif id) }}"> @method('PATCH') @csrf First Name: first_name }} /> Last Name: last_name }} /> Email: email }} /> City: city }} /> Country: country }} /> Job Title: job_title }} /> Update @endsection

D: Implementing the Delete Operation

Finally, we’ll proceed to implement the delete operation. Go to the app/Http/Controllers/ContactController.php file, locate the destroy() method and update it accordingly:

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

You can notice that when we redirect to the /contacts route in our CRUD API methods, we also pass a success message but it doesn't appear in our index template. Let's change that!

Go to the resources/views/contacts/index.blade.php file and add the following code:

 @if(session()->get('success')) {{ session()->get('success') }} @endif 

We also need to add a button to takes us to the create form. Add this code below the header:

 New contact 

This is a screenshot of the page after we created a contact:

Conclusion

We’ve reached the end of this tutorial. We created a CRUD application with Laravel 5.7, PHP 7.1 and MySQL.

Hope you enjoyed the tutorial and see you in the next one!