Funcionalidad Pagina de Contacto

Tema en 'Soporte' iniciado por Rodrigo Rayas, el 16 Ene 2018.

  1. Rodrigo Rayas

    Rodrigo Rayas New Member

    Registrado:
    5 Oct 2017
    Mensajes:
    8
    Me Gusta recibidos:
    0
    Puntos de trofeo:
    1
    Género:
    Masculino
    Hola a todos

    Estoy haciendo una pagina web para un proyecto escolar y quisiera ver si alguien sabe hacer la funcionalidad de cuando ya se llena el formulario y se de clic en el botón se mande el correo.

    De antemano muchas gracias por su tiempo y ayuda.

    Saludos.
     
  2. Marco Corona

    Marco Corona New Member

    Registrado:
    29 Sep 2017
    Mensajes:
    26
    Me Gusta recibidos:
    6
    Puntos de trofeo:
    3
    Género:
    Masculino
    Hola Rodrigo, tal vez si posteas parte de tu código o algun error sobre tu código sea mas sencillo orientarte.
     
  3. Rodrigo Rayas

    Rodrigo Rayas New Member

    Registrado:
    5 Oct 2017
    Mensajes:
    8
    Me Gusta recibidos:
    0
    Puntos de trofeo:
    1
    Género:
    Masculino
    Hola a todos, actualmente sigo haciendo un proyecto escolar, el cual consta en desarrollar una pagina web. La pagina ya la tengo desarrollada, pero en la sección de contacto me piden que tenga un formulario, el cual también ya lo tengo.

    Y quisiera ver si me pudieran ayudar, a saber, como hacer la funcionalidad, de que cuando ya se llena el formulario y se de clic en el botón se mande un correo.

    De antemano muchas gracias por su tiempo y ayuda.

    Saludos.

    A continuación les dejo mi controlador y vista.

    CONTROLADOR

    Ahorita lo único que hace es cargar la vista.

    PHP:
    <?php

    /*
     * This file is part of the Ocrend Framewok 2 package.
     *
     * (c) Ocrend Software <info@ocrend.com>
     *
     * For the full copyright and license information, please view the LICENSE
     * file that was distributed with this source code.
    */

    namespace app\controllers;

    use 
    app\models as Model;
    use 
    Ocrend\Kernel\Router\IRouter;
    use 
    Ocrend\Kernel\Controllers\Controllers;
    use 
    Ocrend\Kernel\Controllers\IControllers;
     
    /**
     * Controlador contacto/
     *
    */
     
    class contactoController extends Controllers implements IControllers {

        public function 
    __construct(IRouter $router) {
            
    parent::__construct($router);  
            
    // Contenido del controlador...
            
    echo $this->template->render('contacto/contacto');

        }

    }
    VISTA

    Insertar CODE, HTML o PHP:
    {% extends 'overall/layout' %}
    {% block appBody %}
      <header>
        <style media="screen">
          .view {
            background: url("views/app/images/contacto.jpg")no-repeat center center;
            background-size: cover;
          }
        </style>
      </header>
    
      <div class="view hm-black-light">
        <div class="full-bg-img flex-center">
          <div class="container text-center white-text">
            <div class="full-bg-img flex-center wow fadeIn">
              <ul class="animated fadeInUp col-md-12">
                <li>
                  <h1 class="display-4 font-bold">PONTE EN CONTACTO CON NOSOTROS</h1>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    
      <div class="container">
    
        <!--Section: Contact v.1-->
        <section class="py-3">
    
          <!--Section heading-->
          <h2 class="font-bold text-center h1 py-5 wow fadeInDown" data-wow-delay="0.3s">Contactanos</h2>
          <!--Section description-->
          <p class="section-description pb-4">Si quieres más información acerca de nuestros servicios o tienes dudas, sugerencias o comentarios, escríbenos y nosotros nos comunicamos contigo.</p>
    
          <div class="row">
    
            <!--Grid column-->
            <div class="col-lg-5 mb-4 wow fadeInRightBig" data-wow-delay="0.5s">
    
              <!--Form with header-->
              <div class="card">
    
                <div class="card-body">
                  <!--Header-->
                  <div class="form-header red accent-1">
                    <h3>
                      <i class="fa fa-envelope"></i>
                      Escribenos:</h3>
                  </div>
                  <br>
    
                  <!--Body-->
                  <form role="form">
    
                    <div class="md-form">
                      <i class="fa fa-user prefix grey-text"></i>
                      <input type="text" id="id_nombre" name="nombre" class="form-control" placeholder="Nombre">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-envelope prefix grey-text"></i>
                      <input type="text" id="id_email" name="email" class="form-control" placeholder="Email">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-tag prefix grey-text"></i>
                      <input type="text" id="id_asunto" name="asunto" class="form-control" placeholder="Asunto">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-globe prefix grey-text"></i>
                      <input type="text" id="id_ciudad" name="ciudad" class="form-control" placeholder="Ciudad">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-pencil prefix grey-text"></i>
                      <textarea id="id_mensaje" name="mensaje" class="md-textarea form-control" length="255" maxlength="255" placeholder="Mensaje"></textarea>
                    </div>
    
                    <div class="text-center">
                      <button type="submit" class="btn btn-danger btn-rounded" id="contacto">Enviar</button>
                    </div>
    
                  </form>
                </div>
              </div>
              <!--Form with header-->
    
            </div>
            <!--Grid column-->
    
            <!--Grid column-->
            <div class="col-lg-7 wow fadeInLeftBig" data-wow-delay="0.5s">
    
              <!--Google map-->
              <!--<div id="map-container" class="rounded z-depth-1-half map-container" style="height: 400px"></div>-->
              <div id="map-container" class="rounded z-depth-1-half map-container" style="height: 400px"></div>
              <script>
                function initMap() {
                  var uluru = {
                    lat: 21.560233,
                    lng: -101.382369
                  };
                  var map = new google.maps.Map(document.getElementById('map-container'), {
                    zoom: 16,
                    center: uluru
                  });
                  var marker = new google.maps.Marker({position: uluru, map: map, title: 'San Francisco'});
                }
              </script>
              <script async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSy&callback=initMap"></script>
    
              <br>
              <!--Buttons-->
              <div class="row text-center">
                <div class="col-md-3 wow fadeInDown" data-wow-delay="0.3s">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-map-marker"></i>
                  </a>
                  <p>San Francisco, CA 94126</p>
                  <p>United States</p>
                </div>
    
                <div class="col-md-3 wow fadeInDown">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-clock-o"></i>
                  </a>
                  <p>Mon - Fri, 8:00-22:00</p>
                </div>
    
                <div class="col-md-3 wow fadeInDown">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-phone"></i>
                  </a>
                  <p>+ 01 234 567 89</p>
                </div>
    
                <div class="col-md-3 wow fadeInDown">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-envelope"></i>
                  </a>
                  <p>info@gmail.com</p>
                  <p>sale@gmail.com</p>
                </div>
              </div>
    
            </div>
            <!--Grid column-->
    
          </div>
    
        </section>
        <!--Section: Contact v.1-->
    
      </div>
    
      <!--/.Main layout-->
    {% endblock %}
    
     
    Última edición: 23 Feb 2018
  4. Marco Corona

    Marco Corona New Member

    Registrado:
    29 Sep 2017
    Mensajes:
    26
    Me Gusta recibidos:
    6
    Puntos de trofeo:
    3
    Género:
    Masculino
    Hola, te recomiendo que vayas a YouTube en el canal de Prinick, hay un vídeo que habla de los helpers

    Hay diversas formas de como lo implementos en tu página, desde tu controlador o la API, etc.
     
  5. Rodrigo Rayas

    Rodrigo Rayas New Member

    Registrado:
    5 Oct 2017
    Mensajes:
    8
    Me Gusta recibidos:
    0
    Puntos de trofeo:
    1
    Género:
    Masculino
    Muchas gracias Marco Corona, con tu recomendación ya tuve mas claridad de como hacer lo que necesitaba.

    Aquí dejo mi solución, por si a alguien le llegara a ser útil.

    Post.php

    PHP:
    <?php

    /*
     * This file is part of the Ocrend Framewok 2 package.
     *
     * (c) Ocrend Software <info@ocrend.com>
     *
     * For the full copyright and license information, please view the LICENSE
     * file that was distributed with this source code.
    */

    use app\models as Model;

    /**
      * Acción vía ajax de Contacto en api/contacto
      *
      * @return json
    */
    $app->post('/contacto', function() use($app) {
      
    $c = new Model\Contacto;

      return 
    $app->json($c->enviar());
    });
    contactoController.php

    PHP:
    <?php

    /*
     * This file is part of the Ocrend Framewok 2 package.
     *
     * (c) Ocrend Software <info@ocrend.com>
     *
     * For the full copyright and license information, please view the LICENSE
     * file that was distributed with this source code.
    */

    namespace app\controllers;

    use 
    app\models as Model;
    use 
    Ocrend\Kernel\Router\IRouter;
    use 
    Ocrend\Kernel\Controllers\Controllers;
    use 
    Ocrend\Kernel\Controllers\IControllers;

    /**
     * Controlador contacto/
     *
    */

    class contactoController extends Controllers implements IControllers {

        public function 
    __construct(IRouter $router) {
            
    parent::__construct($router);
            global 
    $config;

            
    $c = new Model\Contacto($router);

            echo 
    $this->template->render('contacto/contacto');

        }
    }
    Contacto.php (Modelo)

    PHP:
    <?php

    /*
     * This file is part of the Ocrend Framewok 2 package.
     *
     * (c) Ocrend Software <info@ocrend.com>
     *
     * For the full copyright and license information, please view the LICENSE
     * file that was distributed with this source code.
     */

    namespace app\models;

    use 
    app\models as Model;
    use 
    Ocrend\Kernel\Models\Models;
    use 
    Ocrend\Kernel\Models\IModels;
    use 
    Ocrend\Kernel\Models\ModelsException;
    use 
    Ocrend\Kernel\Models\Traits\DBModel;
    use 
    Ocrend\Kernel\Router\IRouter;
    use 
    Ocrend\Kernel\Helpers\Strings;
    use 
    Ocrend\Kernel\Helpers\Emails;

    /**
     * Modelo Contacto
     *
     */

    class Contacto extends Models implements IModels {
        
    /**
          * Característica para establecer conexión con base de datos.
        */
        
    use DBModel;

        
    /**
          * Envía un correo electrónico.
          *
          * @return array<string,integer|string>
        */
        
    final public function enviar() {
          try {
            global 
    $http$config;

            
    $nombre $http->request->get('nombre');
            
    $email $http->request->get('email');
            
    $asunto $http->request->get('asunto');
            
    $ciudad $http->request->get('ciudad');
            
    $telefono $http->request->get('telefono');
            
    $mensaje $http->request->get('mensaje');

            
    # Verificar que no están vacíos
            
    if ($this->functions->e($nombre$email$asunto$ciudad$telefono$mensaje)) {
                throw new 
    ModelsException('Los campos marcados con <span class="required">*</span> son necesarios.');
            }

            
    # Formato de email
            
    if (!Strings::is_email($email)) {
                throw new 
    ModelsException('El email no tiene un formato válido.');
            }

            
    # Construir mensaje y enviar mensaje
            
    $HTML 'Hola, <b>'$nombre .'</b>,ha mandado el siguiente mensaje:
            <br />
            <b>'
    $mensaje .'</b>.
            <br />
            Los datos de '
    $nombre .', son los siguientes:
            <br />
            Ciudad: <b>'
    $ciudad .'</b><br />
            Teléfono: <b>'
    $telefono .'</b><br />
            Email: <b>'
    $email .'</b>
            '
    ;

            
    # Enviar el correo electrónico
            
    $dest = array();
            
    $dest[$config['phpmailer']['user']] = $config['site']['name'];
            
    $email Emails::send_mail($dest,Emails::plantilla($HTML),$asunto);

            
    # Verificar si hubo algún problema con el envío del correo
            
    if(false === $email) {
                throw new 
    ModelsException('No se ha podido enviar su mensaje.');
            }

            return array(
    'success' => 1'message' => 'Se ha enviado su mensaje.');
          } catch(
    ModelsException $e) {
            return array(
    'success' => 0'message' => $e->getMessage());
          }
        }


        
    /**
          * __construct()
        */
        
    public function __construct(IRouter $router null) {
            
    parent::__construct($router);
            
    $this->startDBConexion();
        }

        
    /**
          * __destruct()
        */
        
    public function __destruct() {
            
    parent::__destruct();
            
    $this->endDBConexion();
        }
    }
     
  6. Rodrigo Rayas

    Rodrigo Rayas New Member

    Registrado:
    5 Oct 2017
    Mensajes:
    8
    Me Gusta recibidos:
    0
    Puntos de trofeo:
    1
    Género:
    Masculino
    contacto.twig

    HTML:
    {% extends 'overall/layout' %}
    {% block appBody %}
      <header>
        <style media="screen">
          .view {
            background: url("views/app/images/contacto.jpg")no-repeat center center;
            background-size: cover;
          }
        </style>
      </header>
    
      <div class="view hm-black-light">
        <div class="full-bg-img flex-center">
          <div class="container text-center white-text">
            <div class="full-bg-img flex-center wow fadeIn">
              <ul class="animated fadeInUp col-md-12">
                <li>
                  <h1 class="display-4 font-bold">CONTACTANOS</h1>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    
      <div class="container">
    
        <!--Section: Contact v.1-->
        <section class="py-3">
    
          <!--Section heading-->
          <h2 class="font-bold text-center h1 py-5 wow fadeInDown" data-wow-delay="0.3s">Contactanos</h2>
          <!--Section description-->
          <p class="section-description pb-4 wow fadeInDown" data-wow-delay="0.3s">Si quieres más información acerca de nuestros servicios o tienes dudas, sugerencias o comentarios, escríbenos y nosotros nos comunicamos contigo.</p>
    
          <div class="row">
    
            <!--Grid column-->
            <div class="col-lg-5 mb-4 wow fadeInLeftBig" data-wow-delay="0.5s">
    
              <!--Form with header-->
              <div class="card">
    
                <div class="card-body">
                  <!--Header-->
                  <div class="form-header red accent-1">
                    <h3>
                      <i class="fa fa-envelope"></i>
                      Escribenos:</h3>
                  </div>
                  <br>
    
                  <!--Body-->
                  <form role="form" id="contacto_form">
    
                    <div class="md-form">
                      <i class="fa fa-user prefix grey-text"></i>
                      <input type="text" id="id_nombre" name="nombre" class="form-control" placeholder="Nombre Completo*" onkeypress="return validar(event,this);">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-envelope prefix grey-text"></i>
                      <input type="text" id="id_email" name="email" class="form-control" placeholder="Email*">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-tag prefix grey-text"></i>
                      <input type="text" id="id_asunto" name="asunto" class="form-control" placeholder="Asunto*" onkeypress="return validar(event,this);">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-globe prefix grey-text"></i>
                      <input type="text" id="id_ciudad" name="ciudad" class="form-control" placeholder="Ciudad*" onkeypress="return validar(event,this);">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-phone prefix grey-text"></i>
                      <input type="tel" id="id_telefono" name="telefono" class="form-control" placeholder="Teléfono*">
                    </div>
    
                    <div class="md-form">
                      <i class="fa fa-pencil prefix grey-text"></i>
                      <textarea id="id_mensaje" name="mensaje" class="md-textarea form-control" length="255" maxlength="255" placeholder="Mensaje*"></textarea>
                    </div>
    
                    <div class="text-center">
                      <button type="button" class="btn btn-danger btn-rounded" id="contacto">Enviar</button>
                    </div>
                  </form>
                </div>
              </div>
              <!--Form with header-->
    
            </div>
            <!--Grid column-->
    
            <!--Grid column-->
            <div class="col-lg-7 wow fadeInRightBig" data-wow-delay="0.5s">
    
              <!--Google map-->
              <!--<div id="map-container" class="rounded z-depth-1-half map-container" style="height: 400px"></div>-->
              <div id="map-container" class="rounded z-depth-1-half map-container" style="height: 500px"></div>
              <script>
                function initMap() {
                  var uluru = {
                    lat: 21.560233,
                    lng: -101.382369
                  };
                  var map = new google.maps.Map(document.getElementById('map-container'), {
                    zoom: 16,
                    center: uluru
                  });
                }
              </script>
              <script async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBZQscdS1FBhsNIVkFxh7O0r4&callback=initMap"></script>
    
              <br>
              <!--Buttons-->
              <div class="row text-center">
                <div class="col-md-3 wow fadeInDown" data-wow-delay="0.3s">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-map-marker" title="Dirección"></i>
                  </a>
                  <p>Calle 26 No. 108</p>
                </div>
    
                <div class="col-md-3 wow fadeInDown">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-clock-o" title="Horário"></i>
                  </a>
                  <p>Lunes a Viernes</p>
                </div>
    
                <div class="col-md-3 wow fadeInDown">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-phone" title="Teléfono"></i>
                  </a>
                  <p>+ 01 234 567 89</p>
                </div>
    
                <div class="col-md-3 wow fadeInDown">
                  <a class="btn-floating btn-danger accent-1">
                    <i class="fa fa-envelope" title="Email"></i>
                  </a>
                  <p>info@gmail.com</p>
                  <p>sale@gmail.com</p>
                </div>
              </div>
    
            </div>
            <!--Grid column-->
    
          </div>
    
        </section>
        <!--Section: Contact v.1-->
    
      </div>
    
    {% endblock %}
    {% block appFooter %}
      <script src="views/app/js/contacto/contacto.js"></script>
      {% include 'comunes/footer' %}
    {% endblock %}
    
    contacto.js

    Insertar CODE, HTML o PHP:
    /**
     * Ajax action to api rest
     */
    function contacto() {
      $.ajax({
        type: "POST",
        url: "api/contacto",
        data: $('#contacto_form').serialize(),
        success: function(json) {
          if (json.success == 1) {
            $.dialog({
              icon: 'fa fa-check-circle',
              title: 'Exito',
              content: json.message,
              theme: 'modern',
              animation: 'rotate',
              closeAnimation: 'rotateXR',
              type: 'green',
              typeAnimated: true,
            });
            setTimeout(function() {
              location.href = 'Contacto/';
            }, 3000);
          } else {
            $.dialog({
              icon: 'fa fa-exclamation-circle',
              title: 'Error',
              content: json.message,
              theme: 'modern',
              animation: 'rotate',
              closeAnimation: 'rotateXR',
              type: 'red',
              typeAnimated: true,
            });
          }
        },
        error: function(xhr, status) {
          $.dialog({
            icon: 'fa fa-times',
            title: 'Error Interno',
            content: 'Ha ocurrido un problema.',
            theme: 'modern',
            animation: 'rotate',
            closeAnimation: 'rotateXR',
            type: 'red',
            typeAnimated: true,
          });
        }
      });
    }
    
    /**
     * Events
     *
     * @param {*} e
     */
    $('#contacto').click(function(e) {
      e.defaultPrevented;
      contacto();
      return false;
    });
    $('#contacto_form').keypress(function(e) {
      e.defaultPrevented;
      if (e.which == 13) {
        contacto();
        return false;
      }
    });
    
     
  7. prinick

    prinick Ocrend Developer Miembro del Staff

    Registrado:
    28 Sep 2017
    Mensajes:
    76
    Me Gusta recibidos:
    9
    Puntos de trofeo:
    8
    Género:
    Masculino
    Profesión:
    Engineer
    País:
    venezuela
    Te recomiendo, como es un formulario de contacto , el modelo que has creado, no necesita usar el Trait DBModel. Puesto que no estás requiriendo conectarte a la base de datos, estás abriendo la conexión y no la estás usando.

    Es por rendimiento!
     
  8. Rodrigo Rayas

    Rodrigo Rayas New Member

    Registrado:
    5 Oct 2017
    Mensajes:
    8
    Me Gusta recibidos:
    0
    Puntos de trofeo:
    1
    Género:
    Masculino
    Muchas gracias por la recomendación Prinick, ya le he quitado el Trait DBModel y ha mejorado bastante el tiempo de envio del correo.

    Saludos.
     

Compartir esta página