0

En programación directa nativamente en PHP no es inconveniente ni problema, para mí, tengo toda la información correspondiente, para mostrar los datos que ya están registrados en cada campo del formulario.

<input type="text" name="cover" value="<?php echo $cover; ?>">
<input type="text" name="mini_title" value="<?php echo $mini_title; ?>">
<input type="text" name="title" value="<?php echo $title; ?>">
<input type="text" name="title" value="<?php echo $description; ?>">
<textarea name="detail" id="editor"><?php echo $detail; ?></textarea>
<input type="text" name="active" value="<?php echo $active; ?>">

Realizar la actualización de la noticia es sencillo para mí.

$stmt = $conn->prepare("UPDATE news SET cover=?, mini_title=?, title=?, description=?, detail=?, active=? WHERE id_writer=?");
$stmt->bind_param("sssssii", $cover, $mini_title, $title, $description, $detail, $active, $id_writer);
if($stmt->execute()){
  //true
} else {
  echo "Error";
}

Tranquilamente de esa manera sencilla podría yo manejar mi sistema de la manera más simple.

El inconveniente es, que todo esta información también la maneja otros usuarios, y para ellos, toca agregar un panel de fácil manejo sin complicaciones, entonces lo más fácil sería generar un editor simple, por ejemplo, una estructura de la siguiente manera:

introducir la descripción de la imagen aquí

Siguiendo como ejemplo la siguiente demostración en vivo.

Teniendo la plantilla completa y el código de su estructura en https://jsfiddle.net/k3n68fs7/2/

¿Cómo puedo adaptar mi código PHP, en este sistema?

Me pueden explicar como realizarlo, como funciona, cuales son los cambios que se deben adaptar al dataTables.js

$(document).ready(function(){

  // On page load: datatable
  var table_companies = $('#table_companies').dataTable({
    "ajax": "data.php?job=get_companies",
    "columns": [
      { "data": "rank" },
      { "data": "company_name",   "sClass": "company_name" },
      { "data": "industries" },
      { "data": "revenue",        "sClass": "integer" },
      { "data": "fiscal_year",    "sClass": "integer" },
      { "data": "employees",      "sClass": "integer" },
      { "data": "market_cap",     "sClass": "integer" },
      { "data": "headquarters" },
      { "data": "functions",      "sClass": "functions" }
    ],
    "aoColumnDefs": [
      { "bSortable": false, "aTargets": [-1] }
    ],
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "oLanguage": {
      "oPaginate": {
        "sFirst":       " ",
        "sPrevious":    " ",
        "sNext":        " ",
        "sLast":        " ",
      },
      "sLengthMenu":    "Records per page: _MENU_",
      "sInfo":          "Total of _TOTAL_ records (showing _START_ to _END_)",
      "sInfoFiltered":  "(filtered from _MAX_ total records)"
    }
  });

  // On page load: form validation
  jQuery.validator.setDefaults({
    success: 'valid',
    rules: {
      fiscal_year: {
        required: true,
        min:      2000,
        max:      2025
      }
    },
    errorPlacement: function(error, element){
      error.insertBefore(element);
    },
    highlight: function(element){
      $(element).parent('.field_container').removeClass('valid').addClass('error');
    },
    unhighlight: function(element){
      $(element).parent('.field_container').addClass('valid').removeClass('error');
    }
  });
  var form_company = $('#form_company');
  form_company.validate();

  // Show message
  function show_message(message_text, message_type){
    $('#message').html('<p>' + message_text + '</p>').attr('class', message_type);
    $('#message_container').show();
    if (typeof timeout_message !== 'undefined'){
      window.clearTimeout(timeout_message);
    }
    timeout_message = setTimeout(function(){
      hide_message();
    }, 8000);
  }
  // Hide message
  function hide_message(){
    $('#message').html('').attr('class', '');
    $('#message_container').hide();
  }

  // Show loading message
  function show_loading_message(){
    $('#loading_container').show();
  }
  // Hide loading message
  function hide_loading_message(){
    $('#loading_container').hide();
  }

  // Show lightbox
  function show_lightbox(){
    $('.lightbox_bg').show();
    $('.lightbox_container').show();
  }
  // Hide lightbox
  function hide_lightbox(){
    $('.lightbox_bg').hide();
    $('.lightbox_container').hide();
  }
  // Lightbox background
  $(document).on('click', '.lightbox_bg', function(){
    hide_lightbox();
  });
  // Lightbox close button
  $(document).on('click', '.lightbox_close', function(){
    hide_lightbox();
  });
  // Escape keyboard key
  $(document).keyup(function(e){
    if (e.keyCode == 27){
      hide_lightbox();
    }
  });

  // Hide iPad keyboard
  function hide_ipad_keyboard(){
    document.activeElement.blur();
    $('input').blur();
  }

  // Add company button
  $(document).on('click', '#add_company', function(e){
    e.preventDefault();
    $('.lightbox_content h2').text('Add company');
    $('#form_company button').text('Add company');
    $('#form_company').attr('class', 'form add');
    $('#form_company').attr('data-id', '');
    $('#form_company .field_container label.error').hide();
    $('#form_company .field_container').removeClass('valid').removeClass('error');
    $('#form_company #rank').val('');
    $('#form_company #company_name').val('');
    $('#form_company #industries').val('');
    $('#form_company #revenue').val('');
    $('#form_company #fiscal_year').val('');
    $('#form_company #employees').val('');
    $('#form_company #market_cap').val('');
    $('#form_company #headquarters').val('');
    show_lightbox();
  });

  // Add company submit form
  $(document).on('submit', '#form_company.add', function(e){
    e.preventDefault();
    // Validate form
    if (form_company.valid() == true){
      // Send company information to database
      hide_ipad_keyboard();
      hide_lightbox();
      show_loading_message();
      var form_data = $('#form_company').serialize();
      var request   = $.ajax({
        url:          'data.php?job=add_company',
        cache:        false,
        data:         form_data,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
      });
      request.done(function(output){
        if (output.result == 'success'){
          // Reload datable
          table_companies.api().ajax.reload(function(){
            hide_loading_message();
            var company_name = $('#company_name').val();
            show_message("Company '" + company_name + "' added successfully.", 'success');
          }, true);
        } else {
          hide_loading_message();
          show_message('Add request failed', 'error');
        }
      });
      request.fail(function(jqXHR, textStatus){
        hide_loading_message();
        show_message('Add request failed: ' + textStatus, 'error');
      });
    }
  });

  // Edit company button
  $(document).on('click', '.function_edit a', function(e){
    e.preventDefault();
    // Get company information from database
    show_loading_message();
    var id      = $(this).data('id');
    var request = $.ajax({
      url:          'data.php?job=get_company',
      cache:        false,
      data:         'id=' + id,
      dataType:     'json',
      contentType:  'application/json; charset=utf-8',
      type:         'get'
    });
    request.done(function(output){
      if (output.result == 'success'){
        $('.lightbox_content h2').text('Edit company');
        $('#form_company button').text('Edit company');
        $('#form_company').attr('class', 'form edit');
        $('#form_company').attr('data-id', id);
        $('#form_company .field_container label.error').hide();
        $('#form_company .field_container').removeClass('valid').removeClass('error');
        $('#form_company #rank').val(output.data[0].rank);
        $('#form_company #company_name').val(output.data[0].company_name);
        $('#form_company #industries').val(output.data[0].industries);
        $('#form_company #revenue').val(output.data[0].revenue);
        $('#form_company #fiscal_year').val(output.data[0].fiscal_year);
        $('#form_company #employees').val(output.data[0].employees);
        $('#form_company #market_cap').val(output.data[0].market_cap);
        $('#form_company #headquarters').val(output.data[0].headquarters);
        hide_loading_message();
        show_lightbox();
      } else {
        hide_loading_message();
        show_message('Information request failed', 'error');
      }
    });
    request.fail(function(jqXHR, textStatus){
      hide_loading_message();
      show_message('Information request failed: ' + textStatus, 'error');
    });
  });

  // Edit company submit form
  $(document).on('submit', '#form_company.edit', function(e){
    e.preventDefault();
    // Validate form
    if (form_company.valid() == true){
      // Send company information to database
      hide_ipad_keyboard();
      hide_lightbox();
      show_loading_message();
      var id        = $('#form_company').attr('data-id');
      var form_data = $('#form_company').serialize();
      var request   = $.ajax({
        url:          'data.php?job=edit_company&id=' + id,
        cache:        false,
        data:         form_data,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
      });
      request.done(function(output){
        if (output.result == 'success'){
          // Reload datable
          table_companies.api().ajax.reload(function(){
            hide_loading_message();
            var company_name = $('#company_name').val();
            show_message("Company '" + company_name + "' edited successfully.", 'success');
          }, true);
        } else {
          hide_loading_message();
          show_message('Edit request failed', 'error');
        }
      });
      request.fail(function(jqXHR, textStatus){
        hide_loading_message();
        show_message('Edit request failed: ' + textStatus, 'error');
      });
    }
  });

  // Delete company
  $(document).on('click', '.function_delete a', function(e){
    e.preventDefault();
    var company_name = $(this).data('name');
    if (confirm("Are you sure you want to delete '" + company_name + "'?")){
      show_loading_message();
      var id      = $(this).data('id');
      var request = $.ajax({
        url:          'data.php?job=delete_company&id=' + id,
        cache:        false,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
      });
      request.done(function(output){
        if (output.result == 'success'){
          // Reload datable
          table_companies.api().ajax.reload(function(){
            hide_loading_message();
            show_message("Company '" + company_name + "' deleted successfully.", 'success');
          }, true);
        } else {
          hide_loading_message();
          show_message('Delete request failed', 'error');
        }
      });
      request.fail(function(jqXHR, textStatus){
        hide_loading_message();
        show_message('Delete request failed: ' + textStatus, 'error');
      });
    }
  });

});

1 respuesta 1

1

Hola Bernardo!

Ese sistema no se puede hacer con PHP exclusivamente. Deberías usar Javascript (o en su defecto JQuery) para poder realizar diferentes consultas a la base por AJAX o para realizar una paginación "dinámica" añadiendo y ocultando clases a los diferentes elementos.

PHP es un lenguaje del lado del servidor y puede traerte todos los resultados, pero la interacción con ellos se hace del lado del cliente, por eso es que necesitas complementar tu desarrollo con otro lenguaje.

Por otro lado, esta tabla tiene estilos de Bootstrap que es un Framework CSS y que es de mucha utilidad para crear elementos que se vean bien a la primera y se adapten a dispositivos.

Acá te dejo el enlace a la documentación para realizar una función AJAX, la cuál podrías utilizar para las búsquedas por palabras y las paginasciones: http://api.jquery.com/jquery.ajax/

Este ejemplo es muy simple de una función AJAX:

$.ajax({
  url: "tu_archivo.php",
  data: ["JSON con los datos que enviarás al archivo"],
  beforeSend: function(){
        //evento que ocurre cuando envías la información
  },
  success: function(){
        //evento que ocurre cuando se ejecutó la función correctamente
  },
  error: function(){
        //evento que ocurre cuando la función se ejecutó con errores
  },
})
2
  • Tenés razón, ya agregué un ejemplo. Gracias por el dato. Saludos!
    – Lunestudio
    el 21 ago. 2018 a las 23:35
  • Hola @Lunestudio gracias por responder, ahora ya tengo toda la plantilla completa, me gustaría saber como se debe implementar el código PHP en ese sistema, que cambios se debe realizar en el mismo, para que funcione el dataTables con mi sistema PHP.
    – Bernardo
    el 22 ago. 2018 a las 17:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.