marzo 10, 2011

Using the Back-End PHP+MySQL ( Wizard & Safety themes )


Recuerde que..
Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

...y continuando con el entorno del Back-End PHP+MySQL pasamos a mostrar el mismo modelo de la entrada anterior que nos muestra un mantenimiento basico de Tablas (Altas, Bajas, Modificación, Consulta e Impresion); pero en este caso mostrando previamente una pantalla de acceso o Wizard, mediante el cual, de habernos registrado previamente en una respectiva Tabla de Usuarios (en donde debe estar registrados nuestro username y su respactivo password de acceso al Modulo), entonces, y solo así, podremos acceder a nuestro GridEditor que nos muestra una lista de Presidentes de U.S.A y los partidos a los que pertenecen...

El hecho de utilizar Wizards o Pantallas de Acceso a nuestros modulos o sistemas, va asociado de manera ineludible a temas de seguridad por lo que debemos empezar a tomar en cuenta las siguientes consideraciones:
  • No debe permitirse el "acceso directo" a nuestras paginas, en este caso a nuestro modelo "grideditor" de presidentes, vale decir que si alguien obtuviese la direccion URL de nuestro GridEditor (como debe ser con cualquier otra pagina de nuestros sistemas), estos no deben poder acceder a ellas, sino que deberán ser redirigidos a la Pantalla de Acceso de nuestro modulo o sistema, y acceder a nuestras opciones solo si hubiesen sido debidamente registrados.
  • Debe asimismo tomarse en cuenta acciones de Auditoria de Datos, es decir, que deberíamos a empezar a registrar en una Tabla de diseño adecuado, todas las operaciones que estan efectuando nuestros usuarios (Alta, Baja, Modificacion, Consulta, y su fecha y hora de operación), y así poder hacer un seguimiento de ellas (este tema no forma parte del presente "codelab" pero lo mencionamos para su consideración)
  • Debe tambien tomarse en cuenta una Validacion de Datos pensando en el  funcionamiento del sistema (no solo en las condiciones estáticas de las mismas); es decir por ejemplo, si en nuestro ejercicio se quisiera eliminar un partido poltico (que trabaja en este caso como una Tabla de Datos), primero se debe verificar si no esta siendo utilizada en la tabla de Presidentes (que para los efectos expuestos trabaja en este caso como si se tratase de una Tabla de Transacciones); de no hacerlo así y se procediera a borrar un partido que esta siendo utilizado.. sencillamente los presidentes que pertenecen a dicho partido "desaparecerían" de nuestra Vista (por la condicion Where del Query), y eso seria erróneo. pues la data seguiría grabada en nuestra base de datos pero no se mostraría (la  codificación del presente codelab tampoco contempla lo indicado, pero también reiteramos que debe tenerse en cuenta.
  • y finalmente, debe tomarse en cuenta temas de seguridad de la WEB y evitar la acción de virus y hackers... PHP nos presenta varias opciones y temas de seguridad que debemos empezar a revisar y considerar para nuestros proyectos, y para lo cual detallaremos algunas referencias tecnicas que esperamos que con su aporte se puedan mejorar aún mas, por cuanto, en lo que respecta a estos temas en particular, los diversos software de desarrollo  permanentemente presentan mejoras en sus formas y opciones... y en lo que respecta a este "codelab", hemos considerado un Modelo Básico pero bastante practico, el cual esperamos  mejorar aun mas para cuando presentemos nuestro modelo de Integracion a Google utilizando el manejo de las API de visualizaciones.
Con que contamos en estos momentos?

Si siguieron el desarrollo de nuestros codelabs desde el inicio, y por supuesto el anterior respecto al Back-End PHP-MySQL, ya deben tener instalado en sus ordenadores un servidor de pruebas Apache con PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin, accediendo a la misma y poder observar las tablas de la base de datos Tutorial creada en el ejercicio anterioir... y bueno, ahora nuevamente ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript ...y algo de PHP (que si no dominamos o desconocemos, pues no debería preocuparnos tanto puesto que en este modelo solo se utilizan instrucciones fáciles de comprender y su sintaxis es bastante sencilla, además que si nuestro interes va por el empleo de este Back-End, debe ser un buen motivo para empezar a explorar este lenguaje).


Asimismo se recomienda haber leído y probado: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que en este caso no se emplean pero se hacen referencia.

Material de Apoyo
( do click on blue icons to download )

Wizard-sample.rar, Descomprimir el material de apoyo en una carpeta de "www" de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Wizard-sample" que contiene los archivos correspondientes al presente codelab (si no entiende este paso favor consulte "empezando desde cero'). Luego en éste código debemos proceder a la configuración de las rutas de importación de nuestra versión del framework ExtJs que utilicemos ( recomendado cualquier versión Ext-3.x, la versión ExtJs4 no es soportada por éste código ).

Wizard-sample.rar ( 2.6Mb ), Este código corresponde al material de apoyo utilizado para instalar el presente codelab pero en la plataforma de Desarrollo WebMatrix.( compatible con el servidor Appserv en este caso, pues este codelab sólo involucra al Back-End PHP+ MySQL que también es soportada por WebMatrix ). El resultado de éste código es una versión mejorada del material presentado en el enlace anterior, y comprende al proyecto completo, es decir, se ha adicionado y configurado para su uso, a la versión "liviana" del framework  ExtJs versión 3.4.0, y si se desempaqueta éste código en una carpeta de "www" en nuestro servidor local AppServ (dentro de otra carpeta que podemos llamar "WebMatrix" como hemos indicado ), podremos ver directamente los resultados al llamarlo desde la barra de direcciones de nuestro navegador usando : "http://localhost/WebMatrix/wizard-sample" (previa configuración de los parámetros de conexión, tal como se indica a continuación a la base de datos "tutorial" (empleada en este codelab), y el archivo pdtes_usa.sql anexado corresponde al mismo empleado por el codelab anterior Grid-PHP-MySQL, y en la que debemos crear a la tabla "usuarios" y registrar el nombre y password de nuestro usuario para acceder al sistema, y lo debemos crear "manualmente" como una manera de familiarizarnos con el manejo de la herramienta phpMyAdmin que viene instalado con el servidor Appserv.

NOTA : Entre las mejoras planteadas con este segundo código, cabe resaltar que ahora nuestra pantalla de acceso presenta en su codificación condiciones dinámicas respecto al lenguaje de nuestro navegador para lo cual, hemos procedido a determinar mediante instrucciones HTML el lenguaje utilizado por nuestro navegador... y con instrucciones javascript, y empleando la Google API language, mostrar la información desplegada en nuestra pantalla de acceso en español, inglés e incluso otros idiomas (prueben con cambiar el lenguaje de su navegador Ingresando a Herramientas, Opciones, Avanzado, Contenido Web, Configuración del Idioma - si estamos utilizando Google Chrome -  ; asimismo, en nuestros archivos php, se esta utilizando toda la información cargada en los "cookies", para así poder recuperar en cada "pagina php", los datos de acceso a nuestra base de datos MySQL...

NOTA (22/11/2011) : Desde Mayo del 2011, Google ha declarado en proceso de obsolescencia de la API Language v.1 que utilizamos en este codelab (y de forma definitiva a partir del 01/12/2011 según la documentación respectiva); y ha considerado la versión de la Google API Language v.2 como un servicio exclusivo de paga - así es en estos momentos, sin cuotas libres... algo extraño en el mundo Google, pero esa es la realidad por el momento - y la actual versión 1 de la API Language de Google no se muestra estable en su funcionamiento, por lo que hemos modificado nuestro código para que, en caso de efectuarse la traducción, se muestre nuestro mensaje en ingles... es una restricción que también hemos tenido que efectuar a los mensajes de bienvenida y de alertas de nuestro Blog, los que eran multi-lenguaje -incluyendo chino, japonés, etc.- los que ahora, de no funcionar la API de traducción (por motivos de cuota, restricción, etc.), pues por lo menos muestren los mensajes en Inglés... Google informa que el gadgets Google Traductor seguirá siendo un servicio libre, pero mientras no contemos con algún proyecto opensource de fuerza para traducciones libres (como si existe para el caso de servicios de Mapas por ejemplo), pues ., .increible!... pero también podemos recurrir a la Microsoft API Language, la cual nos brinda una cuota de subscripción libre de hasta 5M de caracteres por mes.


Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero debe realizar lo siguiente:
  • Crear en nuestra base de datos TUTORIAL la tabla usuarios. Esta base de datos fue creada en el ejercicio anterior (importada de pdts_usa.sql), y en esta oportunidad no les proporcionamos un archivo para su creación con el objeto que sean creadas directamente utilizando nuestro PHPMyAdmin o DBManager. Los requisitos de nuestra tabla de usuarios es que tenga definido como mínimo los siguientes campos: ID : Int(10), primary_key, auto_increment y unique; el campo usuario: varchar(15), y el campo password: varchar(15); adicionalmente podemos crear otros campos de diferentes tipo como Apellidos completos -o separado Paterno, Materno- Nombre completo, e-mail, telefono fijo, móvil, id_skype, direccion, o cualquier forma de contactar con nuestros usuarios, etc.. siempre dependiendo de los requerimientos de diseño de nuestro modulo o sistema ( los tres primeros campos deben tener exactamente ese nombre -respetando minusculas y mayusculas para mejor identificacion- caso contrario, debemos cambiar la respectiva codificación en nuestro archivo index.php que controla el acceso a nuestro ejercicio).
  • Creada nuestra tabla usuarios, pues ahora debemos registrar 2 o mas usuarios para hacer nuestras pruebas; puede ser uno llamado prueba con nombre prueba y password prueba (para hacer mas facil nuestro ingreso de datos), o como sea de nuestro agrado.
  • Con nuestro explorador debemos ingresar a la carpeta "Wizard-sample" creada en la carpeta www del Appserv, y alli "editar" el archivo "index.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

    // Database connection information
    $host = "localhost"; // Host name
    $user = "root"; // User default for MySQL access
    $pwd = "..yourPassword.."; // put your PHPMyAdmin Password
    $db = "tutorial"; // Our Database of exercise
    En ella debemos modificar los parametros $user (si nuestro usuario de ingreso no es root sino otro personalizado); y $pwd, donde debemos poner nuestro Password de conexion a MySQL (el que utilizamos para nuestro PHPMyAdmin); en $db va el nombre nuestra base de datos (si no corresponde a "tutorial" como se indica debemos cambiarlo); y finalmente debemos tener en cuenta que si nuestra prueba la realizamos directamente en un servicio hosting externo con dominio propio, entonces en $host, en lugar de localhost debemos colocar nuestra direccion web correspondiente: www.mydominio.com
  • ..y ahora nuevamente ya estamos listo para ejecutar nuestro ejercicio...!
Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresar a la carpeta a carpeta "Wizard-sample"  siguiendo la ruta donde hayamos descargado el material de apoyo (pero que debe dentro de la carpeta www de AppServ); pues al ingresar esta carpeta que contiene a nuestro archivo index.html, deberá aparecer una pantalla como la que se muestra a continuación:


Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos desarrollado nuestro Wizards de conexion a nuestra aplicacion descrita en el post anterior, correspondiente a un Modelo Basico de mantenimiento de Tablas con opciones de Alta, Baja, Modificacion, Consulta, Impresion, Busquedas, etc, bajo un formato clasico.


Nota.- si no aparece la primera pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca nuestra pantalla de acceso.

La segunda imagen nos muestra nuestro modelo de mantenimiento de una tabla desarrollado en el post anterior, si hacemos click sobre dicha imagen nos remitirá a la pagina indicada en la web oficial de ExtJs para la demostracion, pero en nuestro aplicativo, en el toolbar le hemos agregado un boton adicional para salir del Modulo (y que nos redirigirá a nuestra pantalla inicial de acceso); asimismo vale indicar que nuestras pruebas las debemos realizar sobre nuestro servidor local ( htpp://localhost ), pues en este caso se trata de una version mejorada como indicamos.

Asimismo, si al ingresar nuestros datos definidos en la tabla usuarios no aparece nuestra pantalla de mantenimiento del ejercicio anterior, y nuestro browser nos muestra mensajes de problemas de conexion a la base de datos o conexion a MySQL, pues debemos revisar con mas detalle si nuestra tabla usuarios ha sido correctamente creada y definida, y si los datos de acceso registrados en ella son a su vez tambien correctamente ingresados...

Detalle del Modulo.

Al revisar los archivos desempaquetados de nuestro Material de Apoyo encontraremos los siguientes archivos:
  • Readme.txt, donde encontraremos informacion respecto a este tutorial y los foros que nos sirvieron de apoyo y referencia para desarrollar este ejercicio.
  • pdts_usa.sql, archivo tipo texto en formato de lenguaje SQL con que se crearon  las tablas presidents y parties  de nuestra base de datos tutorial (la ponemos de referencia, pues como indicamos antes, nuetra tabla de usuarios requerida para este ejercicio deberá ser creada directamente con PHPMyAdmin o DBManager de nuestro servidor MySQL).
  • database.php, archivo de tipo texto en formato de lenguaje PHP con el cual actua del lado del servidor para interactuar con nuestra base de datos, en ella hemos comentado las partes que corresponden a la carga de datos de acceso a nuestra base de datos, así como las funciones correspondiente a cada caso como es la actualizacion, creación, borrado, busqueda e impresion de nuestra data; las formas de este codigo puede ser facilmente comprendido y ajustado anuestros desarrollos propios.
    Se presenta asimismo las funciones getlist() y getparties() que son las ejecutan nuestras consultas de las tablas MySQL, habiendose comentado las adiciones efectuadas por el caso de efectuar "Conteo de Paginas" y "Busquedas rapidas".
    Se presenta asimismo a las funciones JEncode y codeDate, la primera para llamar a las funciones standard de codificacion del formato Json, y la segunda para el tratamiento de los campos tipo fecha al formato mm/dd/yyyy empleado en el GridEditor de presidentes de nuestro ejercicio..
  • JSON.php, archivo de tipo texto en formato PHP que es una libreria clasica de PHP para el manejo del formato JSON con el que se trabaja las base de datos y tablas de MySQL (y que siempre debemos utilizar en nuestros proyectos que trabajemos con MySQL)
  • Index.php, archivo de tipo texto en formato PHP, HTML y Javascript debidamente etiquetados por cada grupo de codificación. Este archivo es de ejecución automatica y en ella se define nuestra pantalla de acceso al Modulo, y la correspondiente consulta a nuestra tabla de usuarios respecto a que si los datos ingresados (nombre y password), son correctos y corresponden a los registrados en nuestra tabla usuarios, lo que permitira el acceso a nuestro GridEditor de presidentes.

    Las instrucciones de contacto vía mail y redireccionamiento a nuestra Fan Page Facebook son detallados en nuestro post referido a técnicas de Localización e Internacionalizacion. (y próximamente a este codelab le agregaremos también la técnica de traduccion automatiza del API Language de Google, conforme al lenguaje de nuestro navegador, para completar el manejo del referido tema).

  • Grid-PHP-MySQL.php, en formato PHP y HTML en donde la parte PHP del mismo realiza el control de acceso a nuestra aplicación (para evitar los "accesos" directos sin haber utilizado el Wizard), y asimismo, la parte HTML indica las directivas de inicio de nuestro ejercicio para la importacion de las librerias de ExtJS y las de nuestro ejercicio.
  • presidentslist.html, archivo en formato HTML que nos muestra una Tabla, la cual se genera al ejecutar la opcion impresion de nuestro ejercicio: luego en las instrucciones de nuestro archivo database.php podrá observar la técnica de como se manda a imprimir dicho documento.
  • mainscript.js, archivo en formato ExtJs debidamente empaquetado utilizando namespace, que nos muestra las funciones e instrucciones ExtJs que permiten el funcionamiento de las opciones de Actualizacion, Creacion, Modificacion, Consulta, Impresion y Busqueda, entre otras opciones, de nuestra aplicacion de mantenimiento (no varia del codelab anterior).
  • searchfield.js, archivo en formato ExtJs que exclusivamente contiene las funciones que nos muestran el recuadro de Busqueda Rapida de nuestro codelab anterioir (no varía).
  • style.css, archivo en formato CSS que permite la llamada a las imagenes que utilizaremos en los botones de acceso a las opciones de nuestro ejercicio mostradas en la barra superior de nuestra ventana (toolbar) de nuestra aplicacion de mantenimiento (no varía del codelab anterior).
  • carpetas icons e images, la primera contiene el icons mostrado en la pestaña de nuestro navegador; y el segundo, las imagenes jpg personales utilizadas en el ejercicio y los dos estilos de celdas que hemos presentado en este caso para mejorar la presentación de las celdas del Grid. No varía del codelab anterior.
APUNTES TECNICOS

Si ya han probado con exito nuestro pantalla de acceso a nuestro modelo básico de mantenimiento de Tablas, al revisar los archivos del ejercicio debe tenerse presente lo siguiente :
  • Si revisan el codigo de Index.php observarán que como herramienta de "control" de nuestros accesos utilizamos las "cookies", en la cual grabamos la informacion necesaria para verificar que  nuestro usuario ha utilizado el Wizard de acceso de nuestro ejercicio; reiteramos que este se trata de un modelo basico y que en este caso solo pregunta si nuestra cookie del nombre esta vacia, y por supuesto que nuestra logica de verificacion puede y debe ser mejorado (como adicionando la verificacion de nuestro usuario y password de acceso, o verificando y poniendo un limite al tiempo trascurrido desde nuestra  ultima operacion para evitar que las cookies grabadas en nuestros ordenadores y no borradas al salir cerrando nuestro navegador pues sean mal utilizadas, entre otros posibles casos). 
  • Si hemos salido correctamente de nuestro modelo de mantenimiento, y digitasemos en la barra de direcciones nuestro navegador la direccion exacta de nuestro modelo http://localhost/tutorial/Wizard-samples/Grid-PHP-MySQL.php para nuestro caso, nos remitirá a nuestra pantalla de acceso (porque las cookies estan vacias), de ingresar al modulo es porque las cookies no han sido borradas al salir directamente al cerrar el browser.
  • Nuestro modelo nos muestra que podemos utilzar todas las cookies que querramos y asimismo, que nuestros passwords, como cualquier otro dato, pueden ser encriptados y desencriptados con el objeto que terceros no "vean" y utilicen indebidamente nuestros datos utilizando para ello las instrucciones:
     $pwd = base64_encode($pwd);      // en index.php
    $my_pwd = base64_decode($pwd);   // en database.php
  • Resulta interesante asimismo, observar con la opcion "Inspeccionar Elemento" del navegador Google Chrome (opcion del boton derecho del mouse sobre nuestra pantalla del browser), y con el Firebug de Mozila Firefox (que debe ser instalado como un plug-in de dicho navegador, y es el utilizado en los videos tutoriales del Quizzpot), pues que los recursos de nuestras paginas web (la pantalla de acceso y la de nuestra pantalla de mantenimiento para este codelab) no nuestran los codigos PHP en la parte "cliente" de nuestros navegadores (revise opcion recursos de nuestra pagina web al Inspeccionar elemento con Google Chrome o Firebug de Firefox, cuando esten cargadas), y con esto nos estamos asegurando que los datos de informacion de acceso a nuestro servidor HTTP no se muestran a los usuarios (refiriendonos a los que hemos escritos al inicio de index.php), pero sería mas interesante que efectuesemos nuevas pruebas con capturadores de paginas web (con herramientas como HTTrack, WebRipper o el mismo Dreamweaver, entre otros), para que observemos que archivos y que informacion  pueden bajar y utilizar terceros no autorizados por nosotros.
  • Con la misma herramienta podemos revisar las cookies de nuestro modelo y verificar que nuestras contraseñas se encuentran encriptadas y no disponibles para terceros, quedando pendiente revisar diversas tecnicas de encriptacion disponibles para dicha función, así como otras opciones del propio PHP.(como el uso de sesiones, que son como las cookies pero por el lado del servidor y totalmente invisibles a los usuarios o clientes).
  • Cabe resaltar asimismo que este modelo de codificacion no es muy recomendada por no mantener el criterio de separar nuestras validaciones (archivos PHP) de nuestros form (HTML y Javascript), o seguir un modelo de desarrollo MVC (Models, Views, Controlers), que en desarrollos grandes nos facilitarían bastante el desarrollo por componentes trabajando en equipo, mejorando así la comprensión y mantenimiento de los mismos;  pero este modelo que presentamos es muy practico y nos permite comprender espero facilmente toda la logica planteada con muy pocos archivos, y por eso nuestra elección para utilizarlo en este codelab.
  • Ponemos a su consideración las siguientes direcciones:

    1. Pagina del foro de www.cristalab.com que sirvió de base para este modelo, entrada antigua pero que aun mantiene vigencia y que en sus comentarios muestra enlaces a temas de seguridad muy importantes (agradecimiento a azelito, usuario de dicho foro).
    2. Pagina de Blogdephp.com que nos muestra un login a MySQL empleando empleando el modelo MVC, y que utiliza el framework codeigniter para PHP (que es bastante utilizado comercialmente), y cuya presentacion en el foro de Cristalab.fue motivo de comentarios apasionados pero interesantes que finalmente nos pueden ayudar a mejorar nuestros codigos.
    3. ..y no olvidemos revisar las opciones de manejo de las cookies y de las sesiones en PHP, que sin dudar son interesantes para mejorar la seguridad de nuestras desarrollos y proyectos.

Espero que estos dos últimos codelab de introduccion al manejo del entorno del Back-End PHP-MySQL sea suficiente para completar y entender su forma básica de funcionamiento, y nos animemos a hacer nuestras propias investigaciones y pruebas sobre este entorno de uso tan difundido.. especialmente ahora que los servicios de Hosting PHP+MySQL externos se muestran tan accesibles a nivel de costos (..desde US$20.00 anuales), e ilimitados respecto a los tamaños, velocidad y nivel de transferencia de datos que nos proporcionan, vale decir, que nos permitirían llevar todos nuestros requerimientos de base de datos y aplicativos a la web (cloud computing)

Saludos
@Mlaynes

Opina en nuestro foro §FB..!





marzo 09, 2011

Using the Back-End PHP+MySQL ( Getting Started )



Recuerde que..
Este blog esta desarrollado en idioma español pero utilizando Google Traductor puede adecuarlo al lenguaje de su preferencia.. Favor utilice la opcion del recuadro superior derecho... y Bienvenido a Integracion Google.

y bueno amigos, ya estamos en el momento en que debemos empezar a experimentar con el Back-End PHP-MySQL (que viene integrado y listo para utilizar con AppServ u otras herramientas similares que tenga integrado un servidor Apache con PHP y la Base de Datos MySQL).

Recordemos que al instalar AppServ, e ingresar con nuestro navegador a http://localhost, nuestro navegador nos muestra una pantalla de Bienvenida que entre otros enlaces, nos permite ingresar a PHPMyAdmin, y al enlace de Configuracion de nuestro servicio PHP instalado en nuestro servidor de pruebas (todo ya viene integrado al servidor Apache), ..y ahora es el momento de empezar a comprenderlos y utilizarlos.. para lo cual debemos tener en cuenta lo indicado a continuacion:
  • Para ingresar a PHPMyAdmin usualmente el usuario de ingreso es "root", y la clave de acceso corresponde a la clave que utilizamos al instalar AppServ (si no pusimos clave alguna, nuestra clave de acceso sera una cadena vacia). Alli debemos a experimentar para crear nuestras propias bases de datos y tablas, y a practicar nuestro lenguaje SQL.
    Si no recuerda su clave de phpMyAdmin (que realmente es de MySQL), puede utilizar las opciones Reset MySQL Root Password y MySQL Command Line Client, ambas en la opcion Appserv de Menu Inicio (Windows); la primera es para registrar un nuevo password para MySQL, y la segunda para verificar rápidamente si la clave es correcta (realmente me resulta mas conveniente trabajar MySQL con phpMyAdmin o DBManager, y no directamente desde la linea de comandos, esto especialmente si trabajamos con otros servidores de aplicaciones como Tomcat o GlassFish)
  • La configuracion por defecto de PHP de los servidores locales AppServ y otros, es que los archivos "index" con extension "php" y "html" sean de ejecucion automatica; pero esto a veces no es así, y cuando trabajamos con servidores o hosting externos (como con  www.x10hosting.com por ejemplo), donde a veces solo los archivos index.php son de ejecucion automatica, pero esto no debe incomodarnos, por cuanto esa opcion es configurable (a traves del enlace de configuracion de PHP, que es bastante complejo pero con ayuda de algunos tutoriales puestos en la web -y que algunos indicamos en nuestro post empezando desde cero- pues, ya podemos ir cambiando algunas cosas, pero si no podemos asi, pues tampoco nos preocupemos, puesto que PHP esta integrado a los lenguajes scripting instalados en nuestro servidor, y a HTML por supuesto; entonces, basta que renombremos nuestro archivo index.html por index.php ..y listo.. esto ocurre por cuanto el compilador PHP reconocerá las etiquetas html y aun siendo un archivo "php", sencillamente ejecutara html ...interesante no?
  • ...y ahora empezaremos a manejar hasta 03 lenguajes en forma simultanea y interrelacionada: HTML, PHP y Javascript (ExtJs es una libreria Javascript). PHP nos permitira trabajar del lado del servidor (principalmente a conectarnos y trabajar con nuestras bases de datos, aunque todo lo podriamos hacer con PHP si quisieramos); y luego con HTML y Javascript -y con la importante ayuda de ExtJs- nos manejaremos nuestras pantallas y presentaciones de nuestro navegador, en la que interactuaran nuestros usuarios..
  • Este manejo de lenguajes que ahora se ha convertido en lo basico en lo que corresponde al mundo de desarrollo Web, esta siendo revolucionado con el ingreso de Javascript al lado del servidor (con node.js y el motor de desarrollo V8, cuyo perfomance y versatibilidad son realmente sorprendentes.. asi que anímense y continuen con la investigacion y desarrollo de estos lenguajes que serán muy importantes en el futuro.


Con que contamos en estos momentos?

Si siguieron el desarrollo de los codelabs desde el inicio, ya deben tener instalado su servidor de pruebas Apache+PHP+MySQL, y PHPMyAdmin (para administrar nuestras bases de datos), por lo que solo basta que verifiquen que tengan completo acceso a MySQL a través de PHPMyAdmin -pruebe con crear alguna base de datos de prueba y algunas tablas para que verifiquen su funcionamiento, asi como hacer algunas consultas SQL de prueba.. si ese es el caso, ya estamos listos para empezar nuestro codelab.

Audiencia

Se recomienda que, para entender este codelab, tengamos los suficientes conocimientos de ExtJs y desarrollo Web (HTML, Javascript; o en su defecto, haber seguido el curso de ExtJs que nos ofrece Crysfel Villa de México en su pagina del Quizzpot.

Asimismo se recomienda haber leído y probado: Integracion a Google (1ra parte) e Integración a Google (2da parte), especialmente para comprender las herramientas utilizadas para integrar de las API de Google a ExtJs (y viceversa), que en este caso no se emplean pero si se hacen referencia en este tutorial.

Material de Apoyo
( do click on blue icons to download )

Grid-PHP-MySQL.rar, Descomprimir este material de apoyo en la carpeta "www" de nuestro servidor local AppServ u otro compatible Apache-PHP-MySQL, y se creara la carpeta "Grid-PHP-MySQL" (si no entiende este paso favor consulte "empezando desde cero'). Con éste código debemos verificar que la configuración de las rutas de importación del framework ExtJs sea correctamente efectuada a nuestra ubicación y versión del framework ExtJs que utilicemos (recomendado cualquier versión ExtJs-3.x, éste código no soporta la versión ExtJs4).

Grid-PHP-MySQL.rar ( 2.4Mb ), Este código corresponde al material de apoyo utilizado para instalar el presente codelab pero en la plataforma de Desarrollo WebMatrix (conviene que la descarguemos en una carpeta  llamada WebMatrix para diferenciarla del código anterior). El resultado de éste código es una versión mejorada del material presentado primero, y comprende al proyecto completo, es decir, se ha adicionado y configurado para su uso, a la versión "liviana" del framework  ExtJs versión 3.4.0, y si se desempaqueta éste código en una carpeta de "www" en nuestro servidor local AppServ (dentro de otra carpeta que podemos llamar "WebMatrix" ), podremos ver directamente los resultados al llamarlo desde la barra de direcciones de nuestro navegador usando "http://localhost/WebMatrix/Grid-PHP-MySQL", pero en este caso, si deben tenerse en cuenta las instrucciones para la configuración de nuestra base de datos "tutorial" (empleada en este codelab), y el archivo pdtes_usa.sql adicinado en este segundo código contiene además a la tabla "usuarios" que en el detalle del codelab habíamos propuesto que se creara "manualmente" como una manera de familiarizarnos con el manejo de la herramienta phpMyAdmin que viene instalado en el servidor Appserv.

NOTA : Entre las mejoras planteadas en el segundo código, cabe resaltar que ahora todos nuestros combobox empleados para seleccionar los partidos políticos son "dinámicos" (conectados a los datos de nuestra tabla "parties" de la base de datos "tutorial"), con ello logramos que, si se efectuase alguna modificación en esta tabla - agregar un partido político ó modificar su nombre por ejemplo - estos cambios se verán reflejados en los combobox que lo requieran...

Pasos para ejecutar el Codelab...

Para ejecutar el tutorial debemos primero realizar lo siguiente:
  • Crear nuestra base de Datos: utilizando PHPMyAdmin debemos crear la base de datos "tutorial" (asi es el nombre que le hemos dado en nuestro ejercicio, si utiliza otro nombre debera recordarlo y registrarlo en nuestro archivo php que nos comunica a nuestra base de datos.
    Para crear la base de datos se debe ingresar a MySQL con PHPMyAdmin, y en su primera pantalla seleccionar la opcion correspondiente,  digitar el nombre de nuestra base de datos,  y elegir el boton "Crear"..y listo, ..nuestra base de datos será creada y su nombre aparecerá en la lista situada al lado izquierdo. ...luego debemos ingresar a nuestra base de datos creada y seleccionar la lengueta "Importar", alli hay una opcion para seleccionar nuestro archivo bajo formato sql, la cual debemos buscar en la carpeta "Grid-PHP-MySQL" desempaquetada de www, el nombre de nuestro archivo es "pdts_usa.sql" y corresponde a una tabla con la relacion de presidentes de los Estados Unidos de Norteamerica (tabla presidents), y de partidos politicos (tabla parties), con la realizaremos opciones alta, baja, modificacion, consulta e impresion...
  • Con nuestro explorador debemos ingresar a la carpeta "Grid-PHP-MySQL" creada en la carpeta www del Appserv, y alli "editar" el archivo "database.php". Este archivo en sus primeras lineas tiene en su inicio las intrucciones de conexion a nuestra base de datos:

    // This will connect us to our database...
    mysql_connect("localhost", "root", "myPassword") or
      die("Could not connect: " . mysql_error());
    mysql_select_db("tutorial");

     En ella debemos modificar los parametros root (si nuestro usuario de ingreso no es root sino otro personalizado, y poner nuestro Password de conexion a MySQL (el que utilizamos en PHPMyAdmin), asimismo poner en la clausula mysql_select_db el nombre nuestra base de datos, si no corresponde a "tutorial" como se indica. Si nuestra prueba la realizamos directamente en un servidor externo como www.x10hosting.com con dominio propio, entonces en lugar de localhost debemos colocar nuestra direccion web correspondiente: www.mydominio.com
  • ..y ya estamos listo para ejecuatr nuestro ejercicio...!
Ahora, si con nuestro navegador ingresamos a "localhost", y luego al ingresamos a la carpeta "Grid-PHP-MySQL" ( o donde quiera hayamos descargado el material de apoyo dentro "www" de AppServ ); pues al ingresar esta carpeta, que contiene a nuestro archivo "index.html" en este caso, deberá aparecer una pantalla como la que se muestra a continuación:


Esto nos indica que nuestra descarga y copia ha sido correcta, y ya estamos listos para revisar el material de apoyo descargado y descubrir como hemos efectuado nuestro conexion a MySQL utilizando PHP, HTML y Javascript para trabajar con ella funciones basicas de mantenimiento de Tablas como Ingreso, Modificación  Eliminación, Consulta, Impresion, Busquedas, etc, bajo un formato clasico.

Nota.- si no aparece la pagina mostrada es probable que no hayamos descargado nuestra version completa o "liviana"de ExtJs en la carpeta "www", como mostramos en "el potencial de ExtJs"; o tal vez, estemos usando una versión de ExtJs diferente de la indicada en nuestro archivo HTML (..ahora estamos usando la versión ext-3.3.1 vigente al 01/03/2011). Observe la ruta rerlativa a www que utilizamos para acceder dichos archivos "../../extjs/extjs-3.1.1" en este caso (que indica 2 carpetas sobre nuestra descarga del tutorial). Efectúe los cambios de la ruta necesarios en el archivo index.html del tutorial y pruebe nuevamente hasta que aparezca la ventana con nuestro Grid como indica la figura (haga click sobre esa figura,  y se dirigirá a una pantalla de prueba indicada en el propio tutorial de la pagina oficial de ExtJs, aunque reiteramos que, debemos hacer nuestras pruebas sobre nuestro servidor local ( htpp://localhost ), pues en este caso nuestro código es una version mejorada de la mostrada en dicho tutorial...

Y en caso que aparezca el Grid, pero sin "data", entonces lo que debemos revisar es nuestra configuración a la base de datos "tutorial" que debimos haber creado con phpMyAdmin en nuestro servidor Appserv (el nombre de nuestro usuario de acceso a MySQL, el password, el nombre de la base de datos, etc.)

Detalle del Modulo.

1. Al revisar los archivos desempaquetados de nuestro Material de Apoyo encontraremos los siguientes archivos:
  • Readme.txt, donde encontraremos informacion respecto a este tutorial en la pagina web oficial de ExtJs, por cuanto este ejercicio ha sido bajado y adaptado de allí; teniendo como principal mejora que ahora estamos trabajando con "stores" tanto para la base de datos de presidentes, como con la de partidos (vale decir que si corregimos en la Base de Datos el nombre de un partido esto debe verse reflejado en los "combobox" utilizados, no ocurria asi en el tutorial original donde el store de partidos es un dataarray "local" y estatico; asimismo se ha corregido algunos errores para que el ejercicio trabaje bien en todas sus opciones (en especial en el grabado del nombre del partido de cada presidente, donde el combobox del Grideditor no trabajaba bien por un error simple:  en el tutorial original: se indicaba como PartyValue del combobox a PartryID en vez de PartyName, pero si revisa la logica de la funcion updatePresident() de database.php, observará que para encontrar un registro se utiliza el nombre del partidoy  no su codigo o ID..).. pero en general este tutorial ExtJs esta muy bien explicado, por lo que para consultas detalladas de todo el desarrollo del mismo paso a paso, pues puede tambien seguir y revisar el enlace indicado.
  • pdts_usa.sql, archivo tipo texto en formato de lenguaje SQL con el, una vez creada nuestra base de datos tutorial, se crearan las tablas presidents y parties, y la data correspondiente para iniciar el ejercicio.
  • database.php, archivo de tipo texto en formato de lenguaje PHP con el cual actua del lado del servidor para interactuar con nuestra base de datos, en ella hemos comentado las partes que corresponden a cada caso: modo de Conexion inicial y funciones de actualizacion, creación, borrado, busqueda e impresion de nuestra data; las formas de este codigo pueden ser facilmente comprendido y ajustado anuestros desarrollos propios.
    Se presenta asimismo las funciones getlist() y getparties() que son las ejecutan nuestras consultas de las tablas MySQL, habiendose comentado las adiciones efectuadas por el caso de efectuar "Conteo de Paginas" y "Busquedas rapidas".
    Se presenta asimismo a las funciones JEncode y codeDate, la primera para llamar a las funciones standard de codificacion del formato Json, y la segunda para el tratamiento de los campos tipo fecha.
  • JSON.php, archivo de tipo texto en formato PHP que es una libreria clasica de PHP para el manejo del formato JSON con el que se trabaja las base de datos y tablas de MySQL (y que siempre debemos utilizar en nuestros proyectos que trabajemos con MySQL)
  • Index.html, archivo de tipo texto en formato HTML de ejecucion automatica donde se encuentran las directivas de inicio de nuestro ejercicio para la importacion de las librerias de ExtJS y las de nuestro ejercicio.
  • presidentslist.html, archivo en formato HTML que nos muestra una Tabla, la cual se genera al ejecutar la opcion impresion de nuestro ejercicio: luego en las instrucciones PHP correspondientes podrá observar como se manda a imprimir dicho documento.
  • mainscript.js, archivo en formato ExtJs debidamente empaquetado utilizando namespace, que nos muestra las funciones e instrucciones ExtJs que permiten el funcionamiento de las opciones de Actualizacion, Creacion, Modificacion, Consulta, Impresion y Busqueda, entre otras opciones, de nuestro tutorial.
  • searchfield.js, archivo en formato ExtJs que exclusivamente contiene las funciones que nos muestran el recuadro de Busqueda Rapida del ejercicio.
  • style.css, archivo en formato CSS que permite la llamada a las imagenes que utilizaremos en los botones de acceso a las opciones de nuestro ejercicio mostradas en la barra superior de nuestra ventana (toolbar).
  • carpetas icons e images, la primera contiene el icons mostrado en la pestaña de nuestro navegador; y el segundo, las imagenes jpg personales utilizadas en el ejercicio y los dos estilos de celdas que hemos presentado en este caso para mejorar la presentación de las celdas del Grid...
APUNTES TECNICOS

Si ya han probado todas las opciones de nuestro modelo de mantenimiento de Tablas, al revisar el Codigo debe tenerse presente los siguientes puntos:
  • Si revisan el codigo de mainscript.js notarán que, la codificación del form de busqueda, en el combobox de partidos, mantiene una estructura estatica y de carga "local" a partir de un simplestore que carga un array con los ID y nombre de los partidos. Vale como ejercicio que recodifiquen dicho combobox con el store de partidos ya creado (al modo de como se ha efectuado en el combobox del grideditor de presidentes), para que el ejemplo sea mas real, es decir, que si efectua una modificacion de algun dato de la Tabla de Partidos (como cambiar el nombre), entonces "dinamicamente" los cambios se vean reflejados al cargar los combobox.
  • En el grideditor de presidentes podrán observar que algunas columnas pueden estar definidas pero no mostrarse mediante las clausulas  hidden:false o hidden:true, como es el caso del IDparty. Y Este es un apunte que debemos tener muy en cuenta especialmente al trabajar tablas cuya ID a veces no queremos mostrar en nuestra pantalla, como si quisieramos que no se muestre el ID de los presidentes en nuestro ejemplo; en estos casos, casi como norma, resulta imprescindible definir como primera columna de nuestros Grids el ID de nuestras tablas, por cuanto si observan con detalle la codificacion de Actualizacion de Datos en database.php, la logica de ubicación de nuestros registros se basa en un "Where" que utiliza al ID para especificar el registro...
  • Cabe resaltar asimismo, que los ID de nuestras tablas en nuestra base de datos (MySQL en este caso), son por defecto definidas con tipo de datos INT, modalidad "auto_increment" y del tipo "primaryKey"; es decir, que corresponden a los campos con los usualmente efectuaremos "relaciones" con otras tablas (como es nuestro caso de la Tabla Partidos con la de Presidentes).

Espero que este Codelab de introduccion al entorno del Back-End Apache, PHP, MySQL sea suficiente para entender el esquema de su funcionamiento, y nos animemos a efectuar nuestras propias pruebas, y en el como siempre, les entregamos modelos de codificación, librerias y herramientas muy utiles para el desarrollo de casos reales; en lo que corresponde a nosotros, nos comprometemos a la brevedad a desarrollar otro ejercicio que contenga un Wizard para el control de acceso a nuestras aplicaciones, y siguiendo la línea de los ejercicios anteriores nos Integremo a Google, empleando por el momento visualizaciones (pero que bien podriamos utilizar otras API como Google Language que utilizamos en todas las paginas de este Blog); pero al respecto cabe indicar que el proceso indicado de utilizar visualizaciones Google esta practicamente solucionado, por cuantro al ya tener nuestra "data" cargadas en "stores" entonces, ya es posible utilizar nuestras extensiones ya desarrolladas en nuestros post Integracion a Google 1ra y 2da parte".>

Saludos
@Mlaynes

Opina en nuestro foro §FB..!