Cómo configurar una página de contacto en Laravel con y sin archivos adjuntos

Recientemente tuve problemas al intentar configurar una página de contacto en Laravel. Así que pensé que debería escribir un blog sobre mi experiencia, ya que podría ayudar a alguien que quiera hacer lo mismo.

Laravel es un marco PHP de código abierto que se utiliza para desarrollar aplicaciones web. Sigue el patrón arquitectónico modelo-vista-controlador.

Prerrequisitos

  1. Instalar compositor
  2. Configure su servidor local (xampp, wamp)
  3. Asegúrese de tener instalado un editor de código (texto sublime, código vs, atom, etc.)
  4. Instalar Git (habilita control de código fuente y control de versiones)

Empezando

Con Git instalado, tienes acceso a Git bash. Con bash abierto, puede trabajar con la terminal para ejecutar comandos que le permitan instalar y usar Laravel y sus paquetes fácilmente.

Instalar Laravel a través del compositor

Una vez que haya cumplido con todas las condiciones anteriores, utilizaremos el siguiente comando para configurar el instalador de Laravel:

composer global require laravel/installer

El comando anterior nos permite descargar el instalador de Laravel usando el compositor que instalamos anteriormente.

laravel new project_name 

Este proceso de instalación lleva un tiempo, así que tenga paciencia. Tenga en cuenta que la instalación se realizará en el directorio que especifique en su terminal bash o en cualquier terminal que elija usar.

Generando un andamio de autenticación básico

Una vez que tengamos una copia de la aplicación Laravel instalada, deberíamos generar un andamio de autenticación básico.

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

El comando anterior instalará la vista de diseño, la vista de registro y la vista de inicio de sesión, así como las rutas para la autenticación de todos los usuarios.

Configurar variables de entorno en el archivo .env

A continuación, debemos configurar nuestras variables de entorno y establecer una conexión con nuestra base de datos ( en este artículo usaremos una dirección IP ficticia compartida ).

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

Ahora hemos terminado de configurar la conexión a la base de datos. En mi caso trabajo con Xampp donde tengo DB_USERNAME=rooty DB_PASSWORD=. Además, no olvide iniciar su servidor local como se muestra a continuación.

Control de versiones de la base de datos e inicio del servidor de desarrollo

Antes de que pueda ejecutar migraciones en Laravel, debe establecer una conexión con su base de datos. Como he especificado   your_database_nameen la configuración .env anterior, puedo hacer clic en "crear" y phpMyAdmin creará una base de datos vacía.

En Git bash, navegue o cd en el project_namedirectorio y ejecute el siguiente comando:

cd project_name php artisan migrate 

Esto ejecutará todas las migraciones predeterminadas de Laravel en nuestra aplicación siempre que haya creado una coincidencia DB_DATABASEque creamos anteriormente.

php artisan serve

Ahora podemos iniciar nuestro servidor de desarrollo:

Creando un archivo contact.blade.php

Configure una página de contacto en la carpeta recursos> vistas como esta:

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

Contact Us

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

El fragmento de código anterior ampliará un archivo de diseños que contiene la sección de encabezado. También contiene el título de la sección "Contáctenos" junto con un mensaje que ha sido devuelto y mostrado al Usuario si y solo si el mensaje de correo se envió correctamente.  

El enfoque principal aquí está en la sección de formulario que puede ver en el siguiente fragmento de código:

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

El fragmento anterior contiene los distintos campos de entrada que usaremos para procesar la información del usuario. Los campos incluyen NOMBRE COMPLETO, DIRECCIÓN DE CORREO ELECTRÓNICO, NÚMERO DE TELÉFONO, ASUNTO o FINALIDAD, MENSAJE, CARGA DE IMAGEN (si corresponde) y finalmente un botón ENVIAR MENSAJE para procesar el envío del formulario.

A continuación, fusionaremos ambos fragmentos de código para hacerlos mucho más significativos.

@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

La imagen a continuación es un diseño simple de cómo se ve la página de contacto en este momento.

Agregar rutas para habilitar solicitudes GET y POST

Primero, configuraremos las rutas en rutas> web.php para representar la página de contacto a través de una solicitud GET y enviar correos a través de la solicitud POST (que se ha especificado en el atributo de formulario anterior).

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

Agregar lógica dentro del HomeController  

En la aplicación> Http> Controladores, el andamio de Laravel generó un 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

En este punto ya casi terminamos. Felicitaciones por seguir el proceso hasta ahora. Ahora ha aprendido a enviar un correo electrónico sin archivos adjuntos. Ahora veamos cómo hacerlo con un archivo adjunto.

Envío de correos con un archivo adjunto

Laravel ya viene con un potente sistema de archivos, por lo que enviar correos con un archivo adjunto no es demasiado difícil. Aprovecharemos esta función y crearemos almacenamiento para los usuarios donde almacenaremos sus archivos adjuntos dentro de la aplicación.  

php artisan storage:link

NOTA : En HomeController anterior ya especifiqué un directorio de almacenamiento para las cargas. Debe hacer lo mismo creando una carpeta (llamada contacto ) en almacenamiento> aplicación> público> contacto .

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.