Yhteyssivun määrittäminen Laraveliin liitteillä ja ilman niitä

Taistelin äskettäin vähän yrittäessäni perustaa yhteyssivun Laraveliin. Joten ajattelin, että minun pitäisi blogata kokemuksestani, koska se saattaa auttaa jotakuta, joka haluaa tehdä saman.

Laravel on avoimen lähdekoodin PHP-kehys, jota käytetään verkkosovellusten kehittämiseen. Se noudattaa mallinäkymä-ohjain -arkkitehtuurikuviota.

Edellytykset

  1. Asenna säveltäjä
  2. Määritä paikallinen palvelin (xampp, wamp)
  3. Varmista, että sinulla on asennettuna koodieditori (ylevä teksti, vs koodi, atomi jne.)
  4. Asenna Git (mahdollistaa lähteen hallinnan ja versiot)

Päästä alkuun

Kun Git on asennettu, sinulla on pääsy Git bashiin. Kun bash on auki, voit suorittaa päätelaitteen kanssa komentoja, joiden avulla voit asentaa ja käyttää Laravelia ja sen paketteja helposti.

Asenna Laravel säveltäjän kautta

Kun olet täyttänyt kaikki yllä olevat ehdot, käytämme alla olevaa komentoa Laravel-asennusohjelman asentamiseen:

composer global require laravel/installer

Yllä olevan komennon avulla voimme ladata Laravel-asennusohjelman aiemmin asentamallamme säveltäjällä.

laravel new project_name 

Tämä asennusprosessi kestää jonkin aikaa, joten ole vain kärsivällinen. Huomaa , että asennus suoritetaan hakemistossa, jonka määrität bash-päätteessäsi tai missä tahansa päätteessä, jota valitset käyttää.

Perustodennustelineiden luominen

Kun kopio Laravel-sovelluksesta on asennettu, meidän on luotava perustodennusteline.

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

Yllä oleva komento asentaa asettelunäkymän, rekisteröintinäkymän ja kirjautumisnäkymän sekä reitit kaikille käyttäjän todennuksille.

Ympäristömuuttujien asettaminen .env-tiedostoon

Seuraavaksi meidän on määritettävä ympäristömuuttujamme ja luotava yhteys tietokantaan ( tässä artikkelissa käytämme jaettua IP-osoitetta ).

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}"

Nyt olemme asettaneet tietokantayhteyden. Minun tapauksessani työskentelen Xamppin kanssa siellä missä minulla on DB_USERNAME=rootja DB_PASSWORD=. Älä myöskään unohda käynnistää paikallista palvelinta alla olevan kuvan mukaisesti.

Tietokannan versiointi ja kehityspalvelimen käynnistäminen

Ennen kuin voit suorittaa siirrot Laravelissa, sinun on luotava yhteys tietokantaan. Koska olen määritellyt   your_database_nameyllä olevassa .env-kokoonpanossa, voin napsauttaa "luo" ja phpMyAdmin rakentaa tyhjän tietokannan.

Siirry Git bashissa tai cd project_namehakemistoon ja suorita seuraava komento:

cd project_name php artisan migrate 

Tämä suorittaa kaikki sovelluksemme oletusarvoiset Laravel-siirrot, kunhan olet DB_DATABASEluonut yllä luomamme vastaavuuden .

php artisan serve

Voimme nyt käynnistää kehityspalvelimen:

Contact.blade.php-tiedoston luominen

Määritä yhteystietosivu resurssit> näkymät -kansioon seuraavasti:

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

Contact Us

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

Yllä oleva koodinpätkä laajentaa taitto-tiedostoa, joka sisältää otsikko-osan. Se sisältää myös osan otsikon "Ota yhteyttä" sekä viestin, joka on palautettu ja näytetty käyttäjälle vain ja vain, jos sähköpostiviesti on lähetetty onnistuneesti.  

Pääpaino tässä on lomakeosassa, jonka näet seuraavassa koodinpätkässä:

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

Yllä oleva katkelma sisältää erilaisia ​​syöttökenttiä, joita käytämme käyttäjätietojen käsittelyssä. Kentät sisältävät FULLNAME, EMAIL ADDRESS, PHONE NUMBER, SUBJECT or PURPOSE, MESSAGE, IMAGE UPLOAD (jos sellaisia ​​on) ja lopuksi LÄHETÄ VIESTI -painikkeen lomakkeen lähettämisen käsittelemiseksi.

Seuraavaksi yhdistämme molemmat koodinpätkät tekemään niistä paljon merkityksellisempiä.

@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

Alla oleva kuva on yksinkertainen asettelu siitä, miltä yhteystietosivu näyttää juuri nyt.

Lisää reittejä ottaaksesi GET & POST -pyynnöt käyttöön

Ensin määritämme reitit reiteillä> web.php , jotta yhteyssivu näytetään GET- pyynnön kautta ja lähetetään sähköposteja POST- pyynnön kautta (joka on määritetty yllä olevassa lomakemääritteessä ).

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

Logiikan lisääminen HomeControlleriin  

Vuonna App> Http> ohjaimet, Laravel Rakennustelineiden synnytti 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

Tässä vaiheessa olemme melkein valmiit ???. Kiitos prosessin seuraamisesta tähän mennessä. Olet nyt oppinut lähettämään sähköpostia ilman liitettä. Katsotaan nyt, miten se tehdään liitteellä.

Viestien lähettäminen liitteenä

Laravel toimittaa jo tehokkaan tiedostojärjestelmän, joten sähköpostin lähettäminen liitteenä ei ole liian vaikeaa. Hyödynnämme tätä ominaisuutta ja luomme tallennustilaa käyttäjille, joihin tallennamme liitetyt tiedostot sovellukseen.  

php artisan storage:link

HUOMAUTUS : Edellä olevassa HomeController-ohjelmassa määritin jo tallennustilahakemiston latauksille. Tee sama luomalla kansio (nimeltään kontakti ) tallennustilaan> sovellus> julkinen> kontakti .

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.

Saat lisätietoja tutustumalla Laravelin virallisiin asiakirjoihin täällä.