Lo primero que necesita cualquier programa es un menú para tener acceso a las diferentes funciones del sistema.
Para crear los menús y sub menú es muy sencillo
Existes tres formas una es vía teclado con CTRL+E, también existe un botón en la parte de arriba llamado editor de menú y la tercer forma es simplemente dar click derecho en la ventana y dar click en editar menú
Anteriormente para crear un simple catalogo en el sistema de punto de venta hecho en PHP JCPOS2021 tardábamos algo de tiempo ya que teníamos que crear el modelo la vista y el controlador totalmente a mano.
Todo eso quedo atrás ya que hemos creado una herramienta que hará todo ese código en automático, solo necesitamos crear la tabla, siempre tenemos que poner la primer columna con el nombre de “id” que sea primera e autoincrementable.
Ya después de allí creamos las demás columnas como varchar, ya despues si es datatime o otro tipo de dato lo podemos cambiar después.
Este programa fue desarrollado en el lenguaje Gambas3, luego les dejo un tutorial con el fuente de como se hizo, es necesario tener Linux para hacer funcionar este programa y tener instalado Gambas3.
Si ya tienen Linux y el Gambas3 instalado pueden descargar el creador de catálogos.
Ahora el manual de uso, simularemos que crearemos el catalogo de proveedores, entonces lo primero que se tiene que hacer es crear la tabla proveedores, con el primer campo llamado id que debe ser primaria y autoincrementable, les dejo el codigo de ejemplo de como creamos la tabla en phpmyadmin
CREATE TABLE `pos`.`proveedores` ( `id` INT NOT NULL AUTO_INCREMENT , `nombre` VARCHAR(256) NULL , `apellido` VARCHAR(256) NULL , `direccion` VARCHAR(256) NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;Ahora ejecutamos el programa, en mi caso no sale el icono pero es problema de mi sistema operativo.
Les dejo un ejemplo básico en donde vemos como meter las imágenes en un campo en la base de datos en lugar de guardarlo en el filesystem.
Saludos espero que les sirva
HTML MODAL
<!--=====================================
MODAL IMAGENES
======================================-->
<div id="modalImagenesVehiculos" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" enctype="multipart/form-data">
<!--=====================================
CABEZA DEL MODAL
======================================-->
<div class="modal-header" style="background:#3c8dbc; color:white">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Imagenes </h4>
</div>
<!--=====================================
CUERPO DEL MODAL
======================================-->
<div class="modal-body">
<div class="box-body">
<!-- EMPEZAMMOS CON LAS PESTAÑAS -->
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Subir">Subir Imagenes</a></li>
<li><a data-toggle="tab" href="#Imagenes">Imagenes</a></li>
</ul>
<!-- CONTENIDO DE LAS PESTAÑAS -->
<div class="tab-content">
<div id="Subir" class="tab-pane fade in active">
<h3>Subir Imagen</h3>
<p>
<!-- ENTRADA PARA SUBIR FOTO -->
<div class="form-group">
<input type="file" class="nuevaFoto" name="editarFoto" id="editarFoto">
<p class="help-block">Peso máximo de la foto 2MB</p>
<img src="vistas/img/plantilla/imagenesDocumentos.jpeg" class="img-thumbnail previsualizarEditar" width="100px">
</div>
<!-- ENTRADA PARA LA DESCRIPCION -->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Descripcion: </span>
<input type="text" class="form-control input-lg" name="descripcionImagen" id="descripcionImagen" placeholder="Ingresar Descripcion" required>
<input type="hidden" class="form-control input-lg" name="idVehiculo" id="idVehiculo" name="idVehiculo">
</div>
</div>
</div>
<div id="Imagenes" class="tab-pane fade">
<h3>Imagenes</h3>
<p>
<!--=====================================
CONTROLES
======================================-->
<table class="table table-bordered table-striped dt-responsive tablaImagenesVehiculos" width="100%">
<thead>
<tr>
<th style="width:10px">ID</th>
<th>Descripción</th>
<th>Imagen </th>
<th>Acciones </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>9000</td>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</p>
</div>
</div>
<!--=====================================
PIE DEL MODAL
====================================== -->
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Salir</button>
<button type="button" class="btn btn-primary guardarImagen">Guardar</button>
</div>
</form>
</div>
</div>
</div> Código Javascript
//SUBIR IMAGENES
$(".modal-footer").on("click", ".guardarImagen", function () {
console.log("Prueba");
//VALIDADACIONES
if ($("#descripcionImagen").val() == "") {
swal({
type: "error",
title: "Falta Capturar la Descripcion",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
return;
}
//VERIFICA SI ESCRIBIO EL CORREO ELECTRONICO
if ($(".nuevaFoto").val() == "") {
swal({
type: "error",
title: "Falta capturar la foto",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
return;
}
$(".guardarImagen").attr("disabled",true);
$(".guardarImagen").html("Guardando...");
//SUBIR ARCHIVO
var descripcionImagen = $("#descripcionImagen").val();
var imagen = $(".nuevaFoto").prop("files")[0];
var idVehiculo = $("#idVehiculo").val();
console.log("Imagen:", imagen);
var datosDocumento = new FormData();
datosDocumento.append("guardarImagenVehiculo", "guardarImagenVehiculo");
datosDocumento.append("descripcionImagen", descripcionImagen);
datosDocumento.append("idVehiculo", idVehiculo);
datosDocumento.append("imagen", imagen);
$.ajax({
url: "controladores/imagenVehiculos.controlador.php",
method: "POST",
data: datosDocumento,
cache: false,
contentType: false,
processData: false,
//dataType: "json",
success: function (respuesta) {
console.log(respuesta);
if (respuesta == "ok") {
swal({
type: "success",
title: "Guardado Correctamente",
showConfirmButton: true,
confirmButtonText: "Cerrar"
}).then(function (result) {
if (result.value) {
$(".guardarImagen").removeAttr("disabled");
$(".guardarImagen").html("Guardar");
$('.tablaImagenesVehiculos').DataTable().destroy();
cargaImagenesVehiculos(idVehiculo);
}
});
return;
} else {
if (respuesta.match(/Duplicate entry.*/)) {
swal({
type: "error",
title: "El UUID de documento ya esta en uso, favor de recargar la pagina",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
return;
}
$(".guardarImagen").removeAttr("disabled");
$(".guardarImagen").html("Guardar");
swal({
type: "error",
title: "" + respuesta + "",
showConfirmButton: true,
confirmButtonText: "Cerrar"
})
}
}
})
});
//TRAER LISTA DE IMAGENES EN DATATABLE
$(".tablaVehiculos").on("click", ".btnImagenesVehiculos", function () {
var idVehiculo = $(this).attr("idVehiculo");
$('.tablaImagenesVehiculos').DataTable().destroy();
$("#idVehiculo").val(idVehiculo);
console.log("asd");
cargaImagenesVehiculos(idVehiculo);
return;
});
//ELIMINAR IMAGEN
$(".tablaImagenesVehiculos").on("click", ".btnEliminarImagenVechiculo", function () {
var idImagen = $(this).attr("idimagenvehiculo");
var idVehiculo = $(this).attr("idVehiculo");
console.log("PRUEBA ELIMINAR:", idImagen);
swal({
title: '¿Está seguro de borrar la imagen?',
text: "¡Si no lo está puede cancelar la accíón!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Cancelar',
confirmButtonText: 'Si, borrar venta!'
}).then(function (result) {
if (result.value) {
var datosDocumento = new FormData();
datosDocumento.append("eliminarImagenVehiculo", "eliminarImagenVehiculo");
datosDocumento.append("idImagen", idImagen);
$.ajax({
url: "controladores/imagenVehiculos.controlador.php",
method: "POST",
data: datosDocumento,
cache: false,
contentType: false,
processData: false,
//dataType: "json",
success: function (respuesta) {
console.log(respuesta);
if (respuesta == "ok") {
swal({
type: "success",
title: "Eliminado Corecctamente",
showConfirmButton: true,
confirmButtonText: "Cerrar"
}).then(function (result) {
if (result.value) {
$('.tablaImagenesVehiculos').DataTable().destroy();
cargaImagenesVehiculos(idVehiculo);
}
});
return;
}
}
})
}
})
return;
});
function cargaImagenesVehiculos(idVehiculo
)
{
var dataTable = $('.tablaImagenesVehiculos').DataTable({
"processing": true,
"serverSide": false,
"deferRender": true,
"retrieve": true,
"pageLength": 5,
"lengthMenu": [5, 10, 25, 50, 100, 150, 200],
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
"ajax": {
url: "ajax/datatable-imagenesVehiculo.ajax.php",
type: "POST",
data: {
tablaImagenVechiculos: "tablaImagenVechiculos",
idVehiculo1: idVehiculo
}
}
});
}
Archivo AJAX para datatable de las imagenes
<?php
require_once "../modelos/generales.modelo.php";
session_start();
if (!$_SESSION["iniciarSesion"]) {
return;
}
if(isset($_POST["tablaImagenVechiculos"])){
$idVehiculo = $_POST["idVehiculo1"];
$campos = " * ";
$where=" and a.idVehiculo = $idVehiculo ";
$nominas = ModeloGenerales::mdlMostrarTabla(" imagenesVehiculos ",$campos,$where);
if (count($nominas) == 0) {
echo '{"data": []}';
return;
}
$datosJson = '{
"data": [';
for ($i = 0; $i < count($nominas); $i++) {
$imagen="<img src='data:image/png;base64, ".base64_encode($nominas[$i]["imagen"])."' data-action='zoom' class='img-thumbnail' width='40px'>";
$botones = "<div class='btn-group'><button type='button' class='btn btn-danger btnEliminarImagenVechiculo' idVehiculo='" . $nominas[$i]["idVehiculo"] ."' idImagenVehiculo='" . $nominas[$i]["id"] ."'><i class='fa fa-trash-o'></i></button></div>";
$datosJson .= '[
"' . $nominas[$i]["id"] . '",
"' . $nominas[$i]["descripcion"] . '",
"'.$imagen.'",
"'.$botones.'"
],';
}
$datosJson = substr($datosJson, 0, -1);
$datosJson .= ']
}';
echo $datosJson;
}
imagenVehiculos.controlador.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
* Description of imagenVehiculos
*
* @author Julio Cesar Leyva Rodriguez
*/
class ControladorImagenVehiculos {
}
//GUARDA ESTADO DESDE SISTEMA
if (isset($_POST["guardarImagenVehiculo"])){
include "../modelos/conexion.php";
include "../modelos/imagenVehiculos.modelo.php";
date_default_timezone_set('America/Chihuahua');
if ((isset($_FILES['imagen'])) && ($_FILES['imagen'] != '')) {
$file = fopen($_FILES['imagen']['tmp_name'], "rb");
$fileName = "";
$fileExtension = "";
} else {
$file = "";
}
$datos["idVehiculo"]=$_POST["idVehiculo"];
$datos["descripcion"]=$_POST["descripcionImagen"];
$datos["imagen"]=$file;
$resultado = ModeloImagenVehiculos::mdlIngresarImagenesVehiculos("imagenesVehiculos", $datos);
echo $resultado;
}
//GUARDA ESTADO DESDE SISTEMA
if (isset($_POST["eliminarImagenVehiculo"])){
include "../modelos/conexion.php";
include "../modelos/imagenVehiculos.modelo.php";
date_default_timezone_set('America/Chihuahua');
$datos["id"]=$_POST["idImagen"];
$resultado = ModeloImagenVehiculos::mdlEliminarImagenVechiculo("imagenesVehiculos", $datos);
echo $resultado;
}imagenVehiculos.modelo.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
* Description of imagenVehiculos
*
* @author Julio Cesar Leyva Rodriguez
*/
require_once "conexion.php";
Class ModeloImagenVehiculos {
// INGRESA MOVIMIENTO DESDE SISTEMA
static public function mdlIngresarImagenesVehiculos($tabla, $datos) {
$stmt = Conexion::conectar()->prepare("INSERT INTO $tabla(idVehiculo
,descripcion
,imagen
)
VALUES (:idVehiculo
,:descripcion
,:imagen
)");
$stmt->bindParam(":idVehiculo", $datos["idVehiculo"], PDO::PARAM_STR);
$stmt->bindParam(":descripcion", $datos["descripcion"], PDO::PARAM_STR);
$stmt->bindParam(":imagen", $datos["imagen"], PDO::PARAM_LOB);
if ($stmt->execute()) {
return "ok";
} else {
$arr = $stmt->errorInfo();
return $arr[2];
}
$stmt->close();
$stmt = null;
}
static public function mdlEliminarImagenVechiculo($tabla, $datos) {
$stmt = Conexion::conectar()->prepare("delete from $tabla where id=:id
");
$stmt->bindParam(":id", $datos["id"], PDO::PARAM_INT);
if ($stmt->execute()) {
return "ok";
} else {
$arr = $stmt->errorInfo();
return $arr[2];
}
$stmt->close();
$stmt = null;
}
}
FACEBOOK
https://www.facebook.com/rasec555
TWITTER
https://twitter.com/Cesar101290
CHANNEL TELEGRAM
https://telegram.me/CesarSystems
PAGINA WEB https://cesarsystems.com.mx/
MOVIL / WHATSAPP
6688612348
sudo apt install php8.0-mysql
sudo apt install php8.0-xdebugagregar al php.ini
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host=localhost
xdebug.log=/var/log/xdebug.log
xdebug.idekey="netbeans-xdebug"Creado con WordPress & Tema de Anders Norén