Πώς να ρυθμίσετε μια σελίδα επαφής στο Laravel με και χωρίς συνημμένα

Πρόσφατα δυσκολεύτηκα λίγο όταν προσπάθησα να δημιουργήσω μια σελίδα επαφής στο Laravel. Έτσι κατάλαβα ότι πρέπει να κάνω blog για την εμπειρία μου, καθώς μπορεί να βοηθήσει κάποιον που θέλει να κάνει το ίδιο.

Το Laravel είναι ένα πλαίσιο PHP ανοιχτού κώδικα που χρησιμοποιείται για την ανάπτυξη εφαρμογών ιστού. Ακολουθεί το αρχιτεκτονικό μοτίβο-view-controller.

Προαπαιτούμενα

  1. Εγκατάσταση συνθέτη
  2. Ρύθμιση του τοπικού διακομιστή σας (xampp, wamp)
  3. Βεβαιωθείτε ότι έχετε εγκαταστήσει ένα πρόγραμμα επεξεργασίας κώδικα (υψηλό κείμενο, έναντι κώδικα, άτομο κ.λπ.)
  4. Εγκατάσταση Git (επιτρέπει τον έλεγχο πηγής και την έκδοση)

Ξεκινώντας

Με το Git εγκατεστημένο έχετε πρόσβαση στο Git bash. Με το bash open μπορείτε να εργαστείτε με το τερματικό για να εκτελέσετε εντολές που σας επιτρέπουν να εγκαταστήσετε και να χρησιμοποιήσετε το Laravel και τα πακέτα του εύκολα.

Εγκαταστήστε το Laravel μέσω συνθέτη

Μόλις ικανοποιήσετε όλες τις παραπάνω προϋποθέσεις, θα χρησιμοποιήσουμε την παρακάτω εντολή για να ρυθμίσουμε το πρόγραμμα εγκατάστασης Laravel:

composer global require laravel/installer

Η παραπάνω εντολή μας επιτρέπει να κατεβάσουμε το πρόγραμμα εγκατάστασης Laravel χρησιμοποιώντας συνθέτη που εγκαταστήσαμε νωρίτερα.

laravel new project_name 

Αυτή η διαδικασία εγκατάστασης διαρκεί λίγο, οπότε απλώς υπομονή. Σημειώστε ότι η εγκατάσταση θα γίνει στον κατάλογο που καθορίζετε στο τερματικό bash ή σε οποιοδήποτε τερματικό που επιλέγετε να χρησιμοποιήσετε.

Δημιουργία βασικού ικριώματος ελέγχου ταυτότητας

Μόλις εγκαταστήσουμε ένα αντίγραφο της εφαρμογής Laravel, θα δημιουργήσουμε ένα βασικό ικρίωμα ελέγχου ταυτότητας.

cd project_name composer require laravel/ui php artisan ui vue --auth

Η παραπάνω εντολή θα εγκαταστήσει προβολή διάταξης, προβολή εγγραφής και προβολή σύνδεσης, καθώς και διαδρομές για έλεγχο ταυτότητας όλων των χρηστών.

Ρύθμιση μεταβλητών περιβάλλοντος στο αρχείο .env

Στη συνέχεια, πρέπει να ρυθμίσουμε τις μεταβλητές περιβάλλοντος και να δημιουργήσουμε μια σύνδεση με τη βάση δεδομένων μας ( σε αυτό το άρθρο θα χρησιμοποιήσουμε μια κοινή διεύθυνση εικονικής IP ).

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=your_database_name DB_USERNAME=server_username DB_PASSWORD=server_password MAIL_DRIVER=smtp MAIL_HOST=domain.com MAIL_PORT=465 [email protected] MAIL_PASSWORD=domain_password MAIL_ENCRYPTION=ssl [email protected] MAIL_FROM_NAME="${APP_NAME}"

Τώρα ολοκληρώσαμε τη ρύθμιση της σύνδεσης βάσης δεδομένων. Στην περίπτωσή μου συνεργάζομαι με το Xampp όπου έχω DB_USERNAME=rootκαι DB_PASSWORD=. Επίσης μην ξεχάσετε να ξεκινήσετε τον τοπικό σας διακομιστή όπως φαίνεται παρακάτω.

Έκδοση της βάσης δεδομένων και έναρξη του διακομιστή ανάπτυξης

Για να μπορέσετε να εκτελέσετε μετεγκαταστάσεις στο Laravel πρέπει να δημιουργήσετε μια σύνδεση με τη βάση δεδομένων σας. Εφόσον έχω καθορίσει   your_database_nameστη διαμόρφωση .env παραπάνω μπορώ να κάνω κλικ στο "create" και το phpMyAdmin θα δημιουργήσει μια κενή βάση δεδομένων.

Στο Git bash, πλοηγηθείτε ή cd στον project_nameκατάλογο και εκτελέστε την παρακάτω εντολή:

cd project_name php artisan migrate 

Αυτό θα εκτελέσει όλες τις προεπιλεγμένες μετεγκαταστάσεις Laravel στην εφαρμογή μας, αρκεί να έχετε δημιουργήσει μια αντιστοίχιση DB_DATABASEπου δημιουργήσαμε παραπάνω.

php artisan serve

Τώρα μπορούμε να ξεκινήσουμε τον διακομιστή ανάπτυξης:

Δημιουργία αρχείου contact.blade.php

Ρυθμίστε μια σελίδα επαφής στο φάκελο πόρων> προβολών ως εξής:

@extends('layouts.client.app') @section('content') 

Contact Us

@if(session('status')) Success ! {{ session('status') }} × @endif @endsection

Το παραπάνω απόσπασμα κώδικα θα επεκτείνει ένα αρχείο διατάξεων που περιέχει την ενότητα κεφαλίδας. Περιέχει επίσης τον τίτλο της ενότητας "Επικοινωνήστε μαζί μας" μαζί με ένα μήνυμα που έχει επιστραφεί και εμφανίζεται στον χρήστη εάν και μόνο εάν το μήνυμα αλληλογραφίας στάλθηκε επιτυχώς.  

Η κύρια εστίαση εδώ είναι στην ενότητα φόρμας που μπορείτε να δείτε στο επόμενο απόσπασμα κώδικα:

 @csrf {{ __('Full Name') }} firstname) ? Auth::user()->firstname : '' }} {{ isset(Auth::user()->lastname) ? Auth::user()->lastname : '' }}" required autocomplete="Fullname" autofocus> @error('fullname')  {{ $message }}  @enderror {{ __('Email Address') }} email) ? Auth::user()->email : '' }}" required autocomplete="email" autofocus> @error('email')  {{ $message }}  @enderror {{ __('Phone Number') }} phone_number) ? Auth::user()->phone_number : '' }}" required autocomplete="phone_number" autofocus> @error('phone_number')  {{ $message }}  @enderror {{ __('Subject') }}  @error('subject')  {{ $message }}  @enderror {{ __('Message') }}  @error('message')  {{ $message }}  @enderror {{ __('Attach Screenshot') }} {{ __('Send Message') }} 

Το παραπάνω απόσπασμα περιέχει τα διάφορα πεδία εισαγωγής που θα χρησιμοποιήσουμε για την επεξεργασία πληροφοριών χρήστη. Τα πεδία περιλαμβάνουν FULLNAME, EMAIL ADDRESS, PHONE NUMBER, SUBJECT ή SURPOSE, MESSAGE, IMAGE UPLOAD (εάν υπάρχει) και τέλος ένα κουμπί ΑΠΟΣΤΟΛΗΣ ΜΗΝΥΜΑ για την επεξεργασία της υποβολής της φόρμας.

Στη συνέχεια θα συγχωνεύσουμε και τα δύο αποσπάσματα κώδικα για να τα καταστήσουμε πολύ πιο σημαντικά.

@extends('layouts.client.app') @section('content') 

Contact Us

@if(session('status')) Success ! {{ session('status') }} × @endif @csrf {{ __('Full Name') }} firstname) ? Auth::user()->firstname : '' }} {{ isset(Auth::user()->lastname) ? Auth::user()->lastname : '' }}" required autocomplete="Fullname" autofocus> @error('fullname') {{ $message }} @enderror {{ __('Email Address') }} email) ? Auth::user()->email : '' }}" required autocomplete="email" autofocus> @error('email') {{ $message }} @enderror {{ __('Phone Number') }} phone_number) ? Auth::user()->phone_number : '' }}" required autocomplete="phone_number" autofocus> @error('phone_number') {{ $message }} @enderror {{ __('Subject') }} @error('subject') {{ $message }} @enderror {{ __('Message') }} @error('message') {{ $message }} @enderror {{ __('Attach Screenshot') }} {{ __('Send Message') }} @endsection

Η παρακάτω εικόνα είναι μια απλή διάταξη του πώς φαίνεται η σελίδα επαφής αυτή τη στιγμή.

Προσθέστε διαδρομές για να ενεργοποιήσετε αιτήματα GET & POST

Αρχικά, θα ρυθμίσουμε τις διαδρομές στις διαδρομές> web.php για να αποδώσουμε τη σελίδα επικοινωνίας μέσω ενός αιτήματος GET και να στείλουμε μηνύματα μέσω του αιτήματος POST (το οποίο έχει καθοριστεί στο παραπάνω χαρακτηριστικό φόρμας).

Route::get('/contact', '[email protected]')->name('contact'); Route::post('/contact', '[email protected]_mail')->name('addContact');

Προσθήκη λογικής στο HomeController  

In app > Http > Controllers, Laravel scaffold generated a HomeController.


    

The Controller file is where the logic of the application resides. Laravel Scaffold already generated the default HomeController. So we will make do with that and create a function named index. We will use it to render the contact us page each time the user visits the route or URL in the application.

validate($request, [ 'fullname' => ['required', 'string', 'max:255' ], 'email' => ['required', 'string', 'email', 'max:255' ], 'phone_number' => ['string', 'max:255'], 'subject' => ['required', 'string', 'max:255'], 'message' => ['required', 'string', 'max:255'] ]); $contact = [ 'fullname' => $request['fullname'], 'email' => $request['email'], 'phone_number' => $request['phone_number'], 'subject' => $request['subject'], 'message' => $request['message'], 'screenshot' => $request->file('screenshot')->store('contact', 'public') ]; Mail::to('[email protected]')->send(new ContactFormMail($contact)); return redirect()->route('contact')->with('status', 'Your Mail has been received'); } }

In the same HomeController, we need to create another function named send_mail . The function will validate all user input and check to make sure fields are not left empty and the right data is parsed.

Next create a variable called $create to store the array values of all user data including image uploads.

Laravel ships with a filesystem that lets us work with images easily. The Mail::to(....)and send ship with Illuminate\Support\Facade which I included at the top of the snippet. I have also included a Mailable, which I will explain soon.

We now need to alert users when the message has been dispatched and redirect them.

Bringing the code snippets together now will make the HomeController look somewhat like this:

validate($request, [ 'fullname' => ['required', 'string', 'max:255' ], 'email' => ['required', 'string', 'email', 'max:255' ], 'phone_number' => ['string', 'max:255'], 'subject' => ['required', 'string', 'max:255'], 'message' => ['required', 'string', 'max:255'] ]); $contact = [ 'fullname' => $request['fullname'], 'email' => $request['email'], 'phone_number' => $request['phone_number'], 'subject' => $request['subject'], 'message' => $request['message'], 'screenshot' => $request->file('screenshot')->store('contact', 'public') ]; Mail::to('[email protected]')->send(new ContactFormMail($contact)); return redirect()->route('contact')->with('status', ' Your Mail has been received'); } }

Having merged both of the above functions, we are done with the logic for the HomeController. Now let's proceed to the next step.

Generating Laravel Mailable

Each mail sent within the Laravel application is represented as a "mailable" just in case you're wondering about the name. Let's create a markdown mailable for contact information that we want to process:

php artisan make:mail ContactFormMail --markdown=template.client.contactform

The command above will generate a markdown file in the resources > views > template > client directory and also create a mailable file in app > Mail > ContactFormMail.php.

In ContactFormMail.php we have the following code snippet that lets us send mails without an attachment:

user = $data; } /** * Build the message. * * @return $this */ public function build() { return $this->from('[email protected]') ->markdown('template.client.contactform') ->with([ 'subject' => $this->user['subject'], 'message' => $this->user['message'], 'email' => $this->user['email'], 'phone_number' => $this->user['phone_number'], 'fullname' => $this->user['fullname'], ]); } } 

Let's break this code down a bit.

In the _construct method I'm parsing all user data as a parameter and reassigning it. In the build method, all of the mailable class configuration is done.

ThefromMethod specifies the mail sender, that is who the mail is coming from (in my case [email protected]).

Thewith  Method lets you choose to customize how mails will be rendered to the markdown which was generated. In this article we will assign all the fields to key and value pairs within the array so that within the markdown we can access each value with its own unique key.

ThemarkdownMethod accepts the name the of markdown template to be rendered with an optional data parameter (if we weren't making use of the withmethod).

And lastly, the toMethod specifies the recipient of the mail. In the HomeController above, change '[email protected]' to the actual recipient's address.

Add Data to the Markdown File  

Now we need to configure the markdown file in the resources > views > template > client directory. Since we have key value pairs in place already, it's easier to reference with keys in the markdown file as shown below:

@component('mail::message') # {{$subject}} ## {{$message}} Feel free to contact me via {{$phone}} or {{$email}} Thanks,

{{$fullname}} {{ config('app.name') }} @endcomponent

At this point we're almost done ???. Kudos for following along with the process this far.  You have now learned how to send an email without attachment. Now let's look at how to do it with an attachment.

Sending Mails with an Attachment

Laravel already ships with a powerful filesystem, so sending mails with an attachment isn't too difficult. We will leverage this feature and create storage for users where we will store their attached files within the application.  

php artisan storage:link

NOTE : In HomeController above I already specified a storage directory for the uploads. You should do same by creating a folder (called contact) in storage > app > public > contact .

Also in the config > filesystems.php check and make sure the default filesystem disk is set to return ['default' => 'public'].

Now the ContactFormMail.php looks like this. We are now able to use the   attachFromStorage method which makes reference to the filepath.

user = $data; } /** * Build the message. * * @return $this */ public function build() { return $this->from('[email protected]') ->markdown('template.client.contactform') ->attachFromStorage($this->user['screenshot']) ->with([ 'subject' => $this->user['subject'], 'message' => $this->user['message'], 'email' => $this->user['email'], 'phone_number' => $this->user['phone_number'], 'fullname' => $this->user['fullname'] ]); } } 

The only addition here will be attachFromStorage. It is used to process the attached files (either image or pdf) during the entire mailing process.

In the markdown file that we earlier used, we can slightly rework it to look like what's shown below:

{{$subject}}

{{$message}}

You can reach me via mail or telephone : {{$email}} or {{$phone_number}}

Thanks

Yaaay we can now do a happy dance because we're finally done ?????

via GIPHY

Now that you've made it through the entire article, you should be able to implement a similar emailing feature in your Laravel applications.

Για να μάθετε περισσότερα μπορείτε να δείτε την επίσημη τεκμηρίωση του Laravel εδώ.