les dejo un ejemplo donde estan casi todos los controles y nuevas clases .
El ejemplo incluye un CRUD, donde se podra probar el manejo de la poderosa clase TMODAL.
Al igual las mejoras en las demas clases como TDATATABLE y las nuevas BTABLE (Bootstrap Table) y la inclusion
de Bootstrap Table en la TMODAL.
La TMODAL incluye controles como : Input, TextArea (Textos Memo), Image, Select, Map, Radio Button, CheckBox,
Spinner, Table, Input con Button, Select con Button, Upload File y UploadBase64, y la posibilidad de incluir codigo HTML personalizado para
usuarios mas avanzados.
Tambien incluye una nueva clase TDASHBOARD, bastante amigable para aplicaciones, inclouye un HEADER, MENU-SIDE, FOOTER, tambien
un PANEL HOME, todo esto para se personalizado. para esta clase habra un ejemplo especial para su uso.
La TLOGIN inlcuye una encriptacion del password (control hide) para que sea imposible jackear el password ya que no se usa
la manera convencional del control Input type="password" y de igual manera se inluye el reCaptcha V3.0.
El manejo de casi todos los controles es responsive.
En fin hay muchas otras mejoras que en este momento se me escapan pero que ire mostrando en los proximos dias
en el foro.
A continuacion el codigo ejemplo de TLOGIN :
Código: Seleccionar todo
<?php
include( 'config.php' );
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'core.login.php' );
$oWeb = new TWeb( "TEST LOGIN" );
$oWeb->lAwesome = true;
$oWeb->SetIcon( IMAGE_PATH . 'user.png' );
// $oWeb->AddCss( CSS_PATH . "login.css" );
$oWeb->Activate();
$oLogin = new TLogin( 'myLogin' );
$oLogin->cTitle = 'TVALWEB TEST';
$oLogin->cImage = IMAGE_PATH . 'user.png';
$oLogin->cImageCss = 'logo-login';
$oLogin->cTextUser = 'Usuario';
$oLogin->cTextPassword = 'Clave';
$oLogin->lShowPassword = false;
$oLogin->cTextLogin = 'Ingresar';
$oLogin->cTextRegister = 'Registrar';
$oLogin->cTextForgot = 'Olvido Contraseña ?';
$oLogin->bActionLogin = 'login()';
$oLogin->bActionRegister = 'register()';
$oLogin->bActionForgot = "forgot()";
$oLogin->Recaptcha( "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX" ); // clave sitio web
$oLogin->Developer( 'Diseño y Desarrollo por', 'tvalweb v1.0', 'creditos()' );
$oLogin->Activate();
$oWeb->End();
?>
<script>
var oCtrl;
var oLogin;
$(function() {
oLogin = new TLogin("myLogin");
oLogin.show();
function verifica_tablas() {
MsgServer( path.model + 'verifica_tablas.php' );
}
});
function login() {
var aPar = {};
aPar.action = 'login';
aPar.usuario = oLogin.getuser();
aPar.clave = oLogin.getpassword();
console.log(aPar);
if ( aPar.usuario === "demo" && aPar.clave === "1234" ) {
location.href = './test_modal01.php';
} else {
JMsgError("Error");
}
}
function register() {
JMsgYesNo( 'Registrar ?', doRegistro );
function doRegistro() {
JMsgInfo('function doRegistro');
}
}
function forgot() {
JMsgInfo('Olvido contraseña');
}
function creditos() {
JMsgInfo("tvalweb developer");
}
</script>
Código: Seleccionar todo
<?php
include ( "config.php" );
// Librerias
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'core.section.php' );
include( TWEB_PATH . 'core.modal.php' );
include( TWEB_PATH . 'core.table.php' );
$oWeb = new TWeb( "TEST TMODAL" );
$oWeb->lAwesome = true;
$oWeb->Activate();
$msg = "Test doble click";
$oWnd = new TWindow( 'main', 5, 12, '98%', '95%' );
$aData = [ [ "id" => 1, "nombre" => "RALPH DEL CASTILLO", "pais" => "PERU", "telefono" => "+56 000000"],
[ "id" => 2, "nombre" => "ANTONIO TWEB", "pais" => "VZLA", "telefono" => "+56 000001"],
[ "id" => 3, "nombre" => "OSCAR COSTA", "pais" => "COSTA", "telefono" => "+56 000002"]
];
$oGrid = new TDataTable( $oWnd, 'dtuser', 10, 5, '100%', '93%', $aData );
$oCol = $oGrid->AddCol( 'id' , 'Codigo' );
$oCol = $oGrid->AddCol( 'nombre', 'Nombre', null, AL_LEFT );
$oCol = $oGrid->AddCol( 'pais', 'Usuario', null, AL_LEFT );
$oCol = $oGrid->AddCol( 'telefono', 'Telefono', null, AL_LEFT );
$oGrid->Title("Gestión de Usuarios", "black", "white", "title");
$oGrid->AddButton("bnew", "Usuario", "AddUser()", "fas fa-user");
$oGrid->AddButton("bedit", "Html", "Html()", "fas fa-code");
$oGrid->AddButton("bdel", "Table", "Table()", "fas fa-table");
$oGrid->AddButton("bspin", "Spinner", "Spinner()", "far fa-arrow-alt-circle-up");
$oGrid->AddButton("bexit", "Salir", "Salir()", "fas fa-sign-out-alt");
$oGrid->SetColorHeader( 'black', 'aqua' );
$oGrid->HeaderRowSize( 28 );
$oGrid->CellRowSize( 25 );
$oGrid->FontSize( 16 );
$oGrid->PageLength( 10 );
$oGrid->Info( false );
$oGrid->Paging( true );
$oGrid->ScrollY( "420px" );
$oGrid->Export( true, [ "copy", "excel", "pdf", "print", "csv" ] );
$oGrid->Filter( true );
$oGrid->DoubleClick( "JMsgInfo('".$msg."')");
// $oGrid->SetFormater( "formaterTable(row, data, index)" );
$aParams = [ "id" => 1, "user" => "RALPH", "autor" => "TVALWEB" ];
$oWnd->footer( "Footer", $aParams );
ModalUser();
ModalTable();
ModalHtml();
ModalSpinner();
$oWnd->Activate();
$oWeb->End();
//-------------------------------------------------------------
function Footer( $aParams ) {
$oFooter = new TFooter( '95%', 0, '100%', '50px' );
$oFooter->addText( "USUARIO : ".$aParams["id"].", ".$aParams["user"], "text-footer" );
$oFooter->addText( $aParams["autor"], "text-footer" );
$oFooter->addIcon( null, "testIcon()", "", '#e7eeef', 'black' );
$oFooter->Activate();
}
//-------------------------------------------------------------
function ModalUser() {
$oModal = new TModal( 'oModalU', 'AGENTES', null, null, MODAL_LARGE );
$oLine = $oModal->InLineControls();
$oLine->Input( 'Nombre', 'get1', TYPE_TEXT );
$oLine->Input( 'Usuario', 'get2', TYPE_TEXT );
$oLine = $oModal->InLineControls();
$oLine->Input( 'Nueva Contraseña', 'get3', TYPE_TEXT );
$oLine->Input( 'Repita Contraseña', 'get4', TYPE_TEXT );
$oModal->AddInput( 'Direccion', 'get5', TYPE_TEXT );
$oLine = $oModal->InLineControls();
$cHtml = '<div class="left">';
$cHtml .= ' <label>Telefono :</label>';
$cHtml .= '</div>';
$cHtml .= '<div class="right">';
$cHtml .= ' <input type=text">';
$cHtml .= '</div>';
$cHtml .= '<div class="input-mobil">';
$cHtml .= ' <label style="width: 168px;">Mobil :</label>';
$cHtml .= ' <input type=text" style="width: 165px;">';
$cHtml .= ' <i class="fab fa-whatsapp whatsapp" ></i>';
$cHtml .= ' <input type="checkbox">';
$cHtml .= '</div>';
$oLine->Html( $cHtml );
$oLine = $oModal->InLineControls();
$oLine->Input( 'Nif-Cif', 'get8', TYPE_TEXT );
$oLine->Input( 'Cod Postal', 'get9', TYPE_TEXT );
$oModal->AddInput( 'Municipio', 'get10', TYPE_TEXT );
$oModal->AddSelect( 'Ciudad', 'get11' );
$oModal->AddSelect( 'Pais', 'get12' );
$oLine = $oModal->InLineControls();
$oLine->Input( 'E-Mail', 'get13', TYPE_TEXT );
$oLine->Input( 'Cod Social', 'get14', TYPE_TEXT );
$oModal->AddSelect( 'Departamento', 'get15', [], "fa fa-plus", "info()" );
$oLine = $oModal->InLineControls();
$oLine->Input( 'Fecha Alta', 'get16', TYPE_DATE );
$oLine->Input( 'Fecha Baja', 'get17', TYPE_DATE );
$oModal->AddTextArea( 'Notas', 'get18' );
$oModal->AddButton( 'bsave1', 'Aceptar', '', 'black', 'green', BTN_DEFAULT );
$oModal->AddButton( 'bexit1', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
$oModal->Activate();
}
//-------------------------------------------------------------
function ModalTable() {
$aData = [ [ "id" => 1, "nombre" => "JUAN PEREZ", "pais" => "PERU", "telefono" => "+56 000000"],
[ "id" => 2, "nombre" => "LOCO MADURO", "pais" => "VZLA", "telefono" => "+56 000001"],
[ "id" => 3, "nombre" => "PROFE CASTILLO", "pais" => "COSTA", "telefono" => "+56 000002"]
];
$oModal = new TModal( 'oModalT', 'TABLA', null, null, MODAL_LARGE );
// $oModal->AddInput( 'Departamento', 'getdpto', TYPE_TEXT );
$oTable = $oModal->AddTable( $aData );
$oTable->AddColumn( "id", "Codigo", null, AL_LEFT);
$oTable->AddColumn( "nombre", "Nombre", null, AL_LEFT);
$oTable->AddColumn( "pais", "Pais", null, AL_LEFT);
$oTable->AddColumn( "telefono", "Telefono", null, AL_LEFT);
$oTable->ColorHeaderTable( 'aqua', 'black' );
$oTable->AddButton("01", "Nuevo", "AddRow()", "fa fa-plus");
$oTable->AddButton("02", "Elimina", "DelRow()", "fa fa-minus");
$oModal->AddButton( 'bexit2', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
$oModal->Activate();
}
//-------------------------------------------------------------
function ModalHtml() {
$Html = '<div class="mhtml">';
$Html .= ' <h1>TEST CON HTML</h1>';
$Html .= '</div>';
$Html .= ' <input id="name" class="myname" type="text" placeholder="Ingrese nombre"/>';
$oModal = new TModal( 'oModalH', 'HTML', null, null, MODAL_LARGE );
$oModal->AddHtml( $Html );
$oModal->AddButton( 'bsave', 'Acepta', 'valida()', 'black', 'green', BTN_CANCEL );
$oModal->AddButton( 'bexit', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
$oModal->Activate();
}
//-------------------------------------------------------------
function ModalSpinner() {
$oModal = new TModal( 'oModalS', 'SPINNER & IMAGE', null, null, MODAL_LARGE );
$oModal->AddImage("image", IMAGE_PATH."logo.png", AL_CENTER, '64px');
$oModal->AddInput('RUC/DNI del cliente', 'codcli', TYPE_TEXT, '', 'fas fa-search', 'Cliente()' );
$oModal->AddInput('Nombre o Razón Social', 'nomcli', TYPE_TEXT, '', '');
$oModal->AddInput('Correo electrónico', 'email', TYPE_TEXT, '', '');
$oModal->AddInput('Fecha requerida', 'fecreq', TYPE_DATE, '', '');
$oModal->AddInput('Dirección de entrega', 'dircli', TYPE_EMAIL, '', '');
$oModal->AddTextArea('Observaciones', 'observ', TYPE_TEXT, '', '');
$oModal->AddSpinner("spin", "Cantidad :" );
$oModal->AddButton( 'bexit', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
$oModal->Activate();
}
?>
<script>
var oGrid;
var oModalU;
var oModalT;
var oModalH;
var oModalS;
$(function() {
let oCtrl = new TControl();
oGrid = oCtrl.GetControl("dtuser");
oModalU = new TModal("oModalU");
oModalT = new TModal("oModalT");
oModalH = new TModal("oModalH");
oModalS = new TModal("oModalS");
});
function AddUser() {
var aCiudad = [ ["Acarigua"], ["Araure"], ["Barquisimeto"], ["Caracas"], ["Valencia"], ["Maracay"], ["Cucuta"],
["Medellin"], ["Cali"], ["San Cristobal"] ];
var aPais = [ ["Argentina"], ["Alemania"], ["Brasil"], ["Bermudas"], ["Canada"], ["Costa Rica"], ["Colombia"],
["Peru"], ["Chile"], ["Venezuela"] ];
oModalU.setlistbox("get11", aCiudad);
oModalU.setlistbox("get12", aPais);
oModalU.show();
}
function Html() {
oModalH.show();
}
function Table() {
oModalT.show();
}
function AddRow() {
var aRow = { id : 7, nombre : "OSCAR CHACON", pais : "MIAMI", telefono : "+56 000000" };
oModalT.addTableRow( aRow );
}
function DelRow() {
oModalT.delTableRow();
}
function Spinner() {
oModalS.setimage("image", "./images/twitter-64.png");
oModalS.show();
}
function info() {
JMsgInfo("Click Table Modal");
}
function valida() {
JMsgInfo( oModalH.get("name"));
}
function input() {
JMsgInfo("Click en input");
}
function Cliente() {
JMsgInfo("Click en Cliente");
}
function Salir() {
location.href = './test_login.php';
}
</script>
<style>
.mhtml {
background-color: aquamarine;
color: black;
}
.myname {
color: blue;
}
.input-mobil {
float: right;
margin-left: 10px;
}
@media (max-width : 640px) {
.input-mobil label {
margin-left: -8px !important;
}
.input-mobil input {
margin-left: -8px !important;
}
.whatsapp {
margin-right: 8px;
}
}
</style>
usuario : demo
clave : 1234
Link del ejemplo : TEST
Bienvenidas las Donaciones Gracias