1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Agregar Datos a una Tabla con Ajax, PHP/MYSQL y Alertify

Tema en 'Jquery' comenzado por AngelKrak, 18 de Abril de 2016.

  1. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    945
    Me gusta recibidos:
    361
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    upload_2016-4-18_13-43-26.png
    Hola amigos, Hace ya mucho tiempo que no publicaba un Tutorial aqui asi que ahora vengo con algo que apenas aprendí hace 1 Dia jajaja asi que aclaro que no soy experto en el Tema ya que es un codigo muy basico pero a varios quizás les Sirva

    Una breve Explicación es que estoy usando el Código Ajax de Jquery y el Plugin Alertify(este es para mostrar los Mensajes de Error o Success al Agregar Datos). El codigo que se usa de Ajax es muy basico ya que el Verdadero código vendría siendo el PHP que es el Encargado de Insertar los Registros en la Base de Datos, Ajax de lo único que se encarga es de no Redireccionar/Recargar la Pagina al Enviar el Formulario.

    Muy bien Empecemos con el Tutorial Pues:

    Primero que nada, necesitamos Agregar las Librerías Requeridas:
    HTML:
    <!-- Librerias de Alertify -->
        <link rel="stylesheet" href="css/alertify.core.css"/>
        <link rel="stylesheet" href="css/alertify.default.css"/>
        <script src="js/alertify.js"></script>

        <!-- Libreria de Jquery -->
        <script src="js/jquery.js"></script>
    Segundo, agregaremos nuestro Div Contenedor, que se encarga de Mostrar nuestro Formulario para agregar los Datos a la Base de Datos y Nuestra Tabla para Mostrar los Registros Agregados:
    HTML:
    <div id="contenedor">
    <form id="form_conte" method="post">
        <input type="text" name="nombre" class="nombre" placeholder="Nombres">
        <input type="text" name="apellidos" class="apellidos" placeholder="Apellidos">
        <div class="agregar">Agregar</div>
    </form>

    <div id="tabla_ajax">
        <?php include('php/tabla.php'); ?>
    </div>

    </div>
    Tercero, Agregamos nuestro Código JS Personal para el AJAX(index.js):
    Código (Javascript):
    $(document).ready(function() {
      $('.agregar').click(function(){

            //Obtenemos el valor del campo nombre
            var nombre = $(".nombre").val();
            //Validamos el campo Nombre, simplemente miramos que no esté vacío
            if (nombre == "") {
                alertify.error('Debe Introducir un Nombre');
                $("input").focus();
                return false;
            }

            //Obtenemos el valor del campo apellidos
            var apellidos = $(".apellidos").val();
            //Validamos el campo Apellidos, simplemente miramos que no esté vacío
            if (apellidos == "") {
                alertify.error('Debe Introducir un Apellido');
                $("input").focus();
                return false;
            }

            //Creamos la Variable que recibira el "Value" de todos los Input que esten dentro del Form
            var obtener = $("#form_conte").serialize();

            $.ajax({
                type: "POST",
                url: "php/insert.php",
                data: obtener,
                success: function() {
                    alertify.success('Tus datos han sido insertados correctamente!'); //Mensaje de Datos Correctamente Insertados
                    $('#tabla_ajax').load("php/tabla.php"); //Recargamos la Tabla(Para que se muestren los Nuevos Resultados)
                    $(".nombre, .apellidos").val(""); //Limpiamos los Input
                }
            }); //Terminamos la Funcion Ajax
            return false; //Agregamos el Return para que no Recargue la Pagina al Enviar el Formulario
        }); //Terminamos la Funcion Click
    }); //Terminamos la Funcion Ready
    La mayoría de Codigos están Explicados para que sirven, pero de todos Modos, Cualquier duda me pueden Preguntar.
    Por si se preguntan el para que sirve el Return false es para que no se Recargue la Pagina al Momento de Mostrar el Error/Success.
    Una aclaración como no sabia como Actualizar la Tabla con el Ultimo Registro agregado, tuve que usar la Función de Load para cargar la Tabla Nuevamente, si alguien sabe como hacerlo sin esa función, por favor comentela.

    Cuarto, Agregamos nuestros Estilos Personales para que se vea "Mejor la Pagina"(estilos.css):
    Código (CSS):
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background: url("../img/bg.jpg");
        background-size: cover;
        background-attachment: fixed;
    }
    #contenedor {
        margin: 25px auto;
        max-width: 480px;
        width: 95%;
    }
    #form_conte {
        margin-bottom: 10px;
        float: left;
    }
    #form_conte input, #form_conte .agregar {
        border: 1px solid #ddd;
        padding: 8px;
        background: #fff;
        margin-top: -1px;
        margin-left: -1px;
        outline: none;
        float: left;
    }
    #form_conte .agregar {
        height: 15px;
        cursor: pointer;
    }
    .datos_table {
        border-collapse: collapse;
        margin-top: 20px;
        width: 100%;
        background: #fff;
    }
    .datos_table td, .datos_table th {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
    }
    @media all and (max-width: 480px) {
        #form_conte input, #form_conte .agregar {
            display: block;
            width: 90%;
            text-align: center;
        }
    }
    Quinto, lo mas Básico de todo, hacemos una Conexión con la Base de Datos(conexion.php):
    PHP:
    <?php
       # Conexion con la Base de Datos
      $host = 'localhost';
       $db =   'ajax';
       $user = 'root';
       $pwd =  '';
    ?>
    Recuerden Cambiar los Datos por los Suyos...

    Sexto, Agregamos nuestro código para Insertar los Registros en la Base de Datos(insert.php):
    PHP:
    <?php
    require_once 'conexion.php'; # Configuracion de la Web(Base de Datos)

    $nombres = $_REQUEST['nombre'];
    $apellidos = $_REQUEST['apellidos'];


    $link = mysqli_connect($host, $user, $pwd);
    mysqli_select_db($link, $db);
    $tildes = $link->query("SET NAMES 'utf8'"); //Para que se inserten las tildes correctamente
    $add = mysqli_query($link, "INSERT INTO usuarios VALUES ('$nombres', '$apellidos')");
    mysqli_close($link); // Cerramos la conexion con la base de datos
    ?>
    y por Ultimo, nuestro Código para Mostrar la Tabla con sus Registros(tabla.php):
    PHP:
    <?php
    require 'conexion.php';
    //Configuracion de la conexion a base de datos
    $con = mysql_connect($host, $user, $pwd);
    mysql_select_db($db, $con);

    //consulta todos los empleados
    $sql=mysql_query("SELECT * FROM usuarios ORDER BY nombres ASC",$con);
    ?>
    <table class="datos_table">
    <tr>
        <th>Nombres</th>
        <th>Apellidos</th>
    </tr>
    <?php
    while($row = mysql_fetch_array($sql)){
    echo "<tr>";
    echo "    <td>".$row['nombres']."</td>
    "
    ;
    echo "    <td>".$row['apellidos']."</td>
    "
    ;
    echo "</tr>
    "
    ;
    }
    ?>
    </table>
    Antes que nada, unas Imágenes para que vean "En Funcionamiento" La Pagina con Ajax.
    upload_2016-4-18_14-20-57.png

    upload_2016-4-18_14-19-36.png

    upload_2016-4-18_14-21-25.png

    Link de Descarga:
    https://mega.nz/#!TNElGIyB!IZIiKl5ZhDmPQqgHPHofwv8gejDfEJIoa4azBFSFroc

    Demo:
    Hoy no hay Demo, ya que me da wueva subirla al Host y Crear una Base de Datos, jajaja xD

    Como dije Anteriormente, soy nuevo apenas en esto de Ajax así que puede haber errores o códigos que Desconozca ya que apenas lo aprendí hace 1 dia, pero si alguien sabe mas del Tema y tiene Sugerencia Respecto al Código puede Comentarlas.

    Gracias por ver este Tutorial y si te Gusto Recomiendalo y Sígueme :D jajaja xD
     

    Archivos adjuntos:

    Última modificación: 18 de Abril de 2016
    A Yeff Kr y Maddenamy les gusta esto.
  2. gyrutech

    gyrutech Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    99
    Me gusta recibidos:
    55
    Puntos de trofeos:
    18
    Género:
    Hombre
    Amigo... Y sabes como se hace cuando estoy uno hace el insert sin un formulario?
    O sea, en la data que va? Porque tengo ese problema. Y he buscado, creo que lo he hecho mal, porque no he conseguido una solución.

    Para las alertas uso una librería que se llama toast pero el problema es que ando haciendo una librería o una clase de php cuando se haga u insert sea o no con formulario xd me mande la alerta, pero nada.. Me dice que la data es indefinida xd y ando pegado xd
     
  3. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    428
    Puntos de trofeos:
    63
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    @gyrutech sin el formulario simplemente es definir tú los datos a enviar.
    Para ello modificas la variable data que sería algo así:
    Código (Javascript):
    data = 'variable=valor&variable=valor';
    Y envías los datos de cualquier manera que quieras por ajax.
    Y sobre la alerta, no importa que librería uses, mira la función "success", esta se ejecuta cuando el ajax se ejecutó correctamente, dentro de esa función agrega el código respectivo de tu librería para mostrar tu alerta.
    Código (Javascript):
    ...
    success: function(){
      // No importa que librería uses aquí pon el código para mostrar la alerta
    }
    ...
     
    A Dawud y AngelKrak les gusta esto.
  4. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    945
    Me gusta recibidos:
    361
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    como ya te dije madde, sin formulario, solo obtienes el value de los input o el text de los campos(por si no son input) y los pasas al data ;)
    Código (Javascript):
    var variableJS = $("div").text();
    data: "variable="+variableJS+"&variable2="+variableJS2
     
    A Dawud le gusta esto.

Comparte esta página