Guía 81 – Integrar en WordPress, versión 4

Veces vista: 200

En esta ocasión voy a explicaros cómo utilizar una biblioteca de JavaScript para integrar los datos de un aplicativo PHPRunner en WordPress. Muy importante, el gestor de base de datos que aportará la información es el de la aplicación PHPRunner (MySQL, SQLServer, Oracle, Ingres, SQLite, etc.).

La técnica de integración va a ser la utilizada en los 2 artículos anteriores, es decir, utilización de un plugin de WP que ejecute una URL e integre el resultado en la página de WordPress.

Como conocéis, soy gran admirador de la solución de «DevExtreme» y he utilizado una parte muy pequeña de las solución que aporta en la publicación de «Grid». El método de integración es similar siempre que la librería disponga de un interface de JQuery.

Objetivo

Publicar información de aplicación PHPRunner en BLOG de WordPress utilizando solución de biblioteca JavaScript con interface JQuery.

Solución Técnica

En este ejemplo se muestra el primer ejemplo. Muestra la información en un GRID que puede filtrarse con diferentes métodos y seleccionado un registro, la presentación muestra datos complementarios de ese registro en la parte inferior. La información se facilita por ficheros JSON incluyendo imágenes. Los Lookup (decodificación de campos) los resuelve la solución.

DevExtreme Demo

 

La aplicación PHPRunner puedes verla en: https://fhumanes.com/jsgrid

Usuario por defecto «admin»/»admin»

Utiliza el Plugin de PHPRunner «Summernote».

En la propia aplicación se puede ver la integración de la librería JavaScript en PHPRunner, para que tengáis otra posibilidad en vuestros desarrollos.

En estos ejemplos las integraciones se han hecho de forma diferente (desde mi punto de vista muy, muy sencillo) ya que los datos se obtienen por medio de unas URL’s que facilitan los mismos en formato JSON y la presentación se hace con ficheros planos de HTML, JavaScript y CSS.

Cree un directorio «devexpress» y ahí dejé los 2 casos que muestro en esta página y la biblioteca de DevExpreme. Prácticamente son los ejemplos de la web de DevExtreme con la adaptación a los datos del aplicativo PHPRunner. Hay 2 ficheros HTML, porque uno es para la integración con WP y el otro para la integración con PHPRunner.

index.htmlindex.jsstyles.cssindex_phprunner.htmlwp_json.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>DevExtreme Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />   


    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.material.blue.light.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.2/jszip.min.js"></script>
 
     <script src="/jsgrid/MyCode/wp_json.php"></script>
     
     <base href="/jsgrid/devexpress/">
     
    <script src="js/jquery.min.js"></script>
    
    <script src="js/dx.all.js"></script>
    <script src="js/localization/dx.messages.es.js"></script>
 
    <link rel="stylesheet" type="text/css" href="caso10/styles.css" />
    <script src="caso10/index.js"></script>
  </head>
  <body class="dx-viewport">
    <div class="demo-container">
      <div id="persons"></div>
      <div id="detailInfo">
            <img class="employeePhoto" />
            <div class="groupMedio">
                <div class="detailName"></div>
                <div class="detailNotes"></div>
            </div>
            <div class="groupRight">
                <div class="titleSalary"></div>
                <div class="salary"></div>
            </div>
      </div>
    </div>
  </body>
</html>
$(() => {
  $('#persons').dxDataGrid({
    dataSource: persons,
    keyExpr: 'id_jsgrid_person',
    headerFilter: {
      visible: true
    },
    paging: {
      pageSize: 5
    },
    pager: {
      showPageSizeSelector: true,
      allowedPageSizes: [2,5, 10, 20, 'all'],
    },
    searchPanel: {
      visible: true,
      width: 240,
      placeholder: 'Search...'
    },
    /*
     filterRow: {
      visible: true,
      applyFilter: 'auto',
    },
     */
    selection: {
      mode: 'single',
    },
    columns: [
     {dataField: 'firtName',
      caption: 'Firt Name',
      headerFilter: {
        search: {
          enabled: true,
          editorOptions: {
            placeholder: 'Search by First Name',
          },
          searchExpr: ['firtName'],
        },
      },        
     },
     {dataField: 'lastName',
      caption: 'Last Name',
      headerFilter: {
        search: {
          enabled: true,
          editorOptions: {
            placeholder: 'Search by Last Name',
          },
          searchExpr: ['lastName'],
        },
      },        
     },
     {
      dataField: 'jsgrid_position_id',
      caption: 'Position',
      headerFilter: {
        allowSelectAll: false,
        search: {
          enabled: true,
        },
      },
      lookup: {
          dataSource: positions,
          displayExpr: 'title',
          valueExpr: 'id_jsgrid_position',
        },
     },
     {
      dataField: 'birthDate',
      caption: 'Birth Date',
      dataType: 'date',
      headerFilter: {
        allowSelectAll: false,
        search: {
          enabled: true,
        },
      },
    }, 
     {
      dataField: 'hireDate',
      caption: 'Hire Date',
      dataType: 'date',
      headerFilter: {
        allowSelectAll: false,
        search: {
          enabled: true,
        },
      },
    },          
    ],
    columnAutoWidth: true,
    showRowLines: true,
    showBorders: true,
    
    onSelectionChanged(selectedItems) {
      const data = selectedItems.selectedRowsData[0];
      if (data) {
        $('.employeePhoto').attr('src', data.picture);
        $('.detailNotes').html(data.capacities);
        var name = data.firtName+' '+data.lastName;
        $('.detailName').text(name); 
        const options = { 
            minimumFractionDigits: 2,
            maximumFractionDigits: 2 
          };
        const salary = Number(data.annualSalary).toLocaleString('es', options);
        $('.salary').text(salary);
        $('.titleSalary').text("Salary"); 
      }
    },
    
  });
  DevExpress.localization.locale(navigator.language);
});
#gridContainer {
  /* height: 440px; */
}
#detailInfo .employeePhoto {
  height: 100px;
  float: left;
  padding: 20px;
}

#detailInfo .groupMedio {
  /* padding: 20px; */
  display: inline-block;
  min-width: 200px;
  max-width: 450px;
}

#detailInfo .detailName {
  /* padding-top: 20px; */
  text-align: justify;
  font-size: 20px;
  font-weight: bold;
  display: block;
}

#detailInfo .detailNotes {
  padding-top: 20px;
  text-align: justify;
  display: block;
}

.dark #detailInfo .detailNotes {
  color: rgb(181, 181, 181);
}

#detailInfo .groupRight {
  /* padding: 20px; */
  display: inline-block;
  min-width: 105px;
  vertical-align: top;
}

#detailInfo .titleSalary {
  /* padding-top: 40px; */
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  display: block;
  vertical-align: top;
}

#detailInfo .salary {
  padding-top: 10px; 
  text-align: justify;
  font-size: 20px;
  font-weight: bold;
  display: block;
  vertical-align: top;
}
  <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.material.blue.light.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.2/jszip.min.js"></script>
 
   <script src="/jsgrid/MyCode/wp_json.php"></script>
   
   <!-- <base href="/jsgrid/devexpress/"> -->
  
  <script src="/jsgrid/devexpress/js/dx.all.js"></script>
  <script src="/jsgrid/devexpress/js/localization/dx.messages.es.js"></script>
 
  <link rel="stylesheet" type="text/css" href="/jsgrid/devexpress/caso10/styles.css" />
  <script src="/jsgrid/devexpress/caso10/index.js"></script>

<div class="dx-viewport">
  <div class="demo-container">
    <div id="persons"></div>
    <div id="detailInfo">
          <img class="employeePhoto" />
          <div class="groupMedio">
              <div class="detailName"></div>
              <div class="detailNotes"></div>
          </div>
          <div class="groupRight">
              <div class="titleSalary"></div>
              <div class="salary"></div>
          </div>
    </div>
  </div>
</div>
<?php
require_once("../include/dbcommon.php"); // DataBase PHPRunner


$rs = DB::Query("SELECT * FROM jsgrid_person");

$person=[];
while( $data = $rs->fetchAssoc() )
{
   $fileArray = my_json_decode($data["picture"]);
   $file = file_get_contents(__DIR__."/../".$fileArray[0]["name"]);
   $data["picture"] = "data:image/png;base64, ".base64_encode($file);  // Image to Base64
   $person[]=$data;
}
$person = "const persons = ".json_encode($person, JSON_UNESCAPED_UNICODE).";"; // convert Array to Json

$rs = DB::Query("SELECT * FROM jsgrid_position");

$position=[];
while( $data = $rs->fetchAssoc() )
{
   $position[]=$data;
}
$position = "const positions = ".json_encode($position, JSON_UNESCAPED_UNICODE).";"; // convert Array to Json

echo $person;
echo $position;
?>

En este segundo ejemplo lo que he querido mostrar es que el rendimiento de la solución es muy bueno, pues en este caso estoy facilitando 8.800 registros y los ordena, clasifica, etc. con una velocidad excepcional. También he querido mostrar una funcionalidad de la biblioteca de DevExtreme y es la exportación de los datos a Excel.

DevExtreme Demo

Provincias y Municipios de España

 

Resumen

Una vez que he visto las diferentes alternativas puedo valorar las posibilidades y ventajas y desventajas de cada una de ellas. También, los costes en desarrollo para producir cada una de las soluciones.

Esta de incluir una biblioteca de JavaScript para publicar los datos del aplicativo me parece la más atractiva, pero he de reconocer que el análisis y pruebas de las diferentes posibilidades (casi infinitas), me ha llevado mucho tiempo, pero es la que más me gusta.

 

Diferentes artículos de integración con WordPress

Desde la publicación del primer artículo han trascurrido 3 años y medio y PHPRunner ha avanzado mucho, por lo que he vuelto a estudiar esta problemática y he publicado este conjunto de artículos que creo necesitáis leer antes de tomar una decisión.

Os dejo el ejemplo de la aplicación PHPRunner para que la instaléis en vuestros PC’s, reviséis los códigos y cambiéis todo lo que necesitéis.

Adjuntos

Archivo Tamaño de archivo Descargas
zip PHPRunner 10.91 + B.D. + imágenes 2 MB 351

Blog personal para facilitar soporte gratuito a usuarios de React y PHPRunner