Sådan oprettes en kontaktside i Laravel med og uden vedhæftede filer

Jeg kæmpede for nylig lidt, da jeg prøvede at oprette en kontaktside i Laravel. Så jeg regnede med, at jeg skulle blogge om min oplevelse, da det måske kunne hjælpe nogen, der ønsker at gøre det samme.

Laravel er en open source PHP-ramme, der bruges til at udvikle webapplikationer. Det følger model-view-controller arkitektoniske mønster.

Forudsætninger

  1. Installer komponist
  2. Opret din lokale server (xampp, wamp)
  3. Sørg for, at du har en kodeeditor installeret (sublim tekst, vs kode, atom osv.)
  4. Installer Git (muliggør kildekontrol og versionering)

Kom godt i gang

Med Git installeret har du adgang til Git bash. Med bash åben kan du arbejde med terminalen for at køre kommandoer, der giver dig mulighed for nemt at installere og bruge Laravel og dens pakker.

Installer Laravel via komponist

Når du har opfyldt alle ovenstående betingelser, bruger vi nedenstående kommando til at opsætte Laravel-installationsprogrammet:

composer global require laravel/installer

Ovenstående kommando giver os mulighed for at downloade Laravel-installationsprogrammet ved hjælp af komponisten, som vi installerede tidligere.

laravel new project_name 

Denne installationsproces tager et stykke tid, så vær bare tålmodig. Bemærk , at installationen udføres i den mappe, du angiver i din bash-terminal eller en hvilken som helst terminal, du vælger at bruge.

Generering af et grundlæggende godkendelsesstillads

Når vi har installeret en kopi af Laravel-appen, skal vi generere et grundlæggende godkendelsesstillads.

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

Ovenstående kommando installerer layoutvisning, registreringsvisning og loginvisning samt ruter til al brugergodkendelse.

Opsætning af miljøvariabler i .env-filen

Dernæst skal vi oprette vores miljøvariabler og etablere en forbindelse til vores database ( i denne artikel bruger vi en delt dummy ip-adresse ).

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

Nu er vi færdige med at oprette databaseforbindelsen. I mit tilfælde arbejder jeg med Xampp, hvor jeg har DB_USERNAME=rootog DB_PASSWORD=. Glem ikke at starte din lokale server som vist nedenfor.

Versioning af databasen og start af udviklingsserveren

Inden du kan køre migreringer i Laravel, skal du oprette en forbindelse til din database. Da jeg har specificeret   your_database_namei .env-konfigurationen ovenfor, kan jeg klikke på "Opret" og phpMyAdmin vil oprette en tom database.

I Git bash skal du navigere eller cd i project_namebiblioteket og køre kommandoen nedenfor:

cd project_name php artisan migrate 

Dette kører alle standard Laravel-migreringer i vores applikation, så længe du har oprettet en matchning, DB_DATABASEsom vi oprettede ovenfor.

php artisan serve

Vi kan nu starte vores udviklingsserver:

Oprettelse af en contact.blade.php-fil

Opret en kontaktside i ressourcer> visningsmappen som denne:

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

Contact Us

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

Ovenstående kodestykke udvider en layoutfil, der indeholder overskriftssektionen. Den indeholder også sektionstitlen "Kontakt os" sammen med en besked, der er returneret og vist for brugeren, hvis og kun hvis mailmeddelelsen blev sendt.  

Hovedfokus her er på formsektionen, som du kan se i det næste kodestykke:

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

Ovenstående kodestykke indeholder de forskellige inputfelter, som vi vil bruge til behandling af brugeroplysninger. Felterne inkluderer FULDNAVN, EMAIL-ADRESSE, TELEFONNUMMER, SUBJECT eller FORMÅL, MEDDELELSE, BILLEDEOPLADNING (hvis nogen) og endelig en SEND MESSAGE-knap til at behandle indsendelse af formularen.

Dernæst fletter vi begge kodestykker sammen for at gøre dem meget mere meningsfulde.

@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

Billedet nedenfor er et simpelt layout af, hvordan kontaktsiden ser ud lige nu.

Tilføj ruter for at aktivere GET & POST-anmodninger

Først opretter vi ruterne i ruter> web.php for at gengive kontaktsiden via en GET- anmodning og sende mails via POST- anmodningen (som er specificeret i formattributten ovenfor).

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

Tilføjelse af logik i HomeController  

I app> Http> Controllere genererede Laravel stillads en 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

På dette tidspunkt er vi næsten færdige ???. Kudos for at følge med processen indtil videre. Du har nu lært, hvordan du sender en e-mail uden vedhæftet fil. Lad os nu se på, hvordan man gør det med en vedhæftet fil.

Afsendelse af mails med en vedhæftet fil

Laravel leveres allerede med et kraftigt filsystem, så det er ikke så svært at sende mails med en vedhæftet fil. Vi vil udnytte denne funktion og skabe lager til brugere, hvor vi gemmer deres vedhæftede filer i applikationen.  

php artisan storage:link

BEMÆRK : I HomeController ovenfor har jeg allerede angivet en opbevaringsmappe til uploads. Du skal gøre det ved at oprette en mappe (kaldet kontakt ) i lager> app> offentlig> kontakt .

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.

For at lære mere kan du tjekke den officielle Laravel-dokumentation her.