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:
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');
});
}
});
});