Hogyan állítsunk be egy kapcsolattartó oldalt a Laravel-ben mellékletekkel és azok nélkül

Nemrég küzdöttem egy kicsit, amikor megpróbáltam létrehozni egy kapcsolattartási oldalt Laravelben. Úgy gondoltam, hogy blogolnom kell a tapasztalataimról, mivel ez segíthet valakinek, aki ugyanezt akarja tenni.

A Laravel egy nyílt forráskódú PHP keretrendszer, amelyet webalkalmazások fejlesztésére használnak. Ez a modell-nézet-vezérlő építészeti mintát követi.

Előfeltételek

  1. Telepítse a zeneszerzőt
  2. Helyi szerver beállítása (xampp, wamp)
  3. Győződjön meg arról, hogy telepítve van egy kódszerkesztő (fenséges szöveg, kód, atom stb.)
  4. Git telepítése (lehetővé teszi a forrás vezérlését és verziószámosítását)

Elkezdeni

A Git telepítésével hozzáférhet a Git bash-hoz. A bash open használatával a terminállal együtt futtathat olyan parancsokat, amelyek lehetővé teszik a Laravel és csomagjainak egyszerű telepítését és használatát.

Telepítse a Laravel-t zeneszerzőn keresztül

Miután teljesítette a fenti feltételeket, az alábbi paranccsal állítjuk be a Laravel telepítőt:

composer global require laravel/installer

A fenti parancs segítségével letölthetjük a Laravel telepítőt a korábban telepített zeneszerző segítségével.

laravel new project_name 

Ez a telepítési folyamat eltart egy ideig, ezért csak legyen türelmes. Ne feledje, hogy a telepítés a bash terminálban megadott könyvtárban vagy bármely más terminálon történik, amelyet használni szeretne.

Alapvető hitelesítési állvány létrehozása

Miután telepítettük a Laravel alkalmazás egy példányát, létre kell hoznunk egy alapvető hitelesítési állványt.

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

A fenti parancs telepíti az elrendezés nézetet, a regisztrációs nézetet és a bejelentkezési nézetet, valamint az összes felhasználói hitelesítés útvonalait.

Környezeti változók beállítása az .env fájlban

Ezután be kell állítanunk a környezeti változóinkat, és kapcsolatot kell létesítenünk az adatbázisunkkal ( ebben a cikkben megosztott dummy ip címet fogunk használni ).

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

Most befejeztük az adatbázis-kapcsolat beállítását. Esetemben ott dolgozom az Xampp-val, ahol van DB_USERNAME=rootés DB_PASSWORD=. Ne felejtse el elindítani a helyi szervert sem az alábbiak szerint.

Verzió az adatbázis és elindítja a fejlesztői kiszolgálót

Mielőtt futtathatja a migrációkat a Laravel-ben, létre kell hoznia a kapcsolatot az adatbázisával. Mivel   your_database_namea fenti .env konfigurációban megadtam, rákattintok a "létrehozás" gombra, és a phpMyAdmin egy üres adatbázist épít.

A Git bash programban navigáljon vagy CD-t a project_namekönyvtárba, és futtassa az alábbi parancsot:

cd project_name php artisan migrate 

Ez futtatja az összes alapértelmezett Laravel-migrációt az alkalmazásunkban, amennyiben Ön létrehozott egy megfelelőt, DB_DATABASEamelyet a fentiekben hoztunk létre.

php artisan serve

Most elindíthatjuk fejlesztői szerverünket:

Contact.blade.php fájl létrehozása

Állítson be egy kapcsolattartó oldalt az erőforrások> nézetek mappába, így:

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

Contact Us

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

A fenti kódrészlet kiterjeszti a fejléc szakaszt tartalmazó elrendezési fájlt. Ez tartalmazza a „Kapcsolatfelvétel” szakasz címet, valamint egy üzenetet, amelyet csak akkor küldtek vissza a Felhasználónak, ha az e-mail üzenetet sikeresen elküldték.  

A fő hangsúly itt az űrlaprészen van, amelyet a következő kódrészletben láthat:

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

A fenti részlet tartalmazza azokat a különböző beviteli mezőket, amelyeket a felhasználói információk feldolgozásához fogunk használni. A mezők tartalmazzák a FULLNAME, EMAIL CÍM, TELEFONSZÁM, TÁRGY vagy CÉL, ÜZENET, IMAGE UPLOAD (ha vannak) és végül egy ÜZENET KÜLDÉSE gombot az űrlap beküldésének feldolgozásához.

Ezután mindkét kódrészletet összeolvasztjuk, hogy sokkal értelmesebbek legyenek.

@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

Az alábbi kép egyszerű elrendezést nyújt a kapcsolattartó oldal jelenlegi megjelenéséről.

Útvonalak hozzáadása a GET & POST kérések engedélyezéséhez

Először az útvonalakat állítjuk be az útvonalak> web.php fájlban , hogy a kapcsolattartó oldalt GET- kérelem útján jelenítsük meg , és e-maileket küldjünk a POST- kérelemen keresztül (amelyet a fenti űrlapattribútumban adtunk meg ).

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

Logika hozzáadása a HomeControlleren belül  

Az app> Http> Controllers alkalmazásban a Laravel állvány létrehozott egy HomeControllert.


    

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

Ezen a ponton majdnem készen vagyunk ???. Kudos, hogy követte az eddigi folyamatot. Most megtanulta, hogyan küldhet e-mailt melléklet nélkül. Most nézzük meg, hogyan kell ezt csatolni.

Levelek küldése mellékletként

A Laravel már most erőteljes fájlrendszerrel szállít, így a mellékletekkel ellátott levelek küldése nem túl nehéz. Kihasználjuk ezt a funkciót, és létrehozunk tárhelyet a felhasználók számára, ahol a csatolt fájlokat tároljuk az alkalmazáson belül.  

php artisan storage:link

MEGJEGYZÉS : A fenti HomeController alkalmazásban már megadtam egy tárhely könyvtárat a feltöltésekhez. Ugyanezt kell tennie, ha létrehoz egy mappát (az úgynevezett névjegyet ) a tárolóban> alkalmazás> nyilvános> névjegy .

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.

To learn more you can check out the official Laravel documentation here.