Proyecto PHP CRUD con MySQL – PHP CRUD (1)

MySQL PHP CRUD

Dentro del proyecto Learning Project vamos a realizar varios proyectos con PHP en ellos utilizaremos frameworks como Symfony o Laravel, pero para empezar desarrollaremos el proyecto PHP CRUD donde vamos a utilizar PHP directamente sin el apoyo de un framework, esto lo hacemos porque creo que es una buena forma de empezar a ver los entresijos de PHP, las necesidades de surgen y que utilidades que ya vienen integradas en los frameworks y que tendremos que ir incorporando al proyecto al no tener el soporte de uno de estos.

Aunque seguramente ya sabes lo que es PHP diremos que es un lenguaje de programación del lado del servidor que nos permite interactuar con el código HTML para mostrar los datos en el lado cliente, fue uno de los primeros lenguajes en hacerlo.

El uso de este lenguaje en los diferentes desarrollos web es de sobra conocidos, plataformas como WordPress, Drupal, …, e-commerce como Prestashop, Magento, …, por nombrar algunos, también tenemos múltiples frameworks PHP que nos facilitan la programación de aplicaciones web como Symfony, Cake-PHP, Laravel, Zend,…, básicamente podríamos escribir varias publicaciones sobre desarrollos muy importantes sobre PHP.

Proyecto PHP CRUD

Esta es la primera de una serie de publicaciones donde desarrollaremos todo el proyecto que incluirá 8 tablas de la base datos del proyecto Learning Project que programaremos con PHP. Aquí vamos a integrar Bootstrap y definir los métodos CRUD para la tabla de idiomas (cb_language), en las siguientes publicaciones mejoraremos el proyecto e iremos implementado la administración de las otras tablas.

  1. EL PROYECTO
  2. CONFIGURACIÓN DEL ENTORNO
  3. DEFINIMOS LAS CONEXIÓN A MySQL CON PHP
  4. AÑADIMOS BOOTSTRAP PARA LA PRESENTACIÓN
  5. CREAMOS EL CRUD (Create Read Update Delete) PARA LOS IDIOMAS
  6. ¿QUÉ MÁS VAMOS A VER?
  7. DOCUMENTACIÓN

Software utilizado

  • Apache: el proyecto Apache HTTP Server es un esfuerzo por desarrollar y mantener un servidor HTTP de código abierto para sistemas operativos modernos, incluyendo UNIX y Windows.
  • MySQL: base de datos que utilizamos para ver las conexiones.
  • PHP 5.6: lenguaje de programación del lado del servidor que vamos a ver.
  • Netbeans: IDE multilenguage que integra entre otros PHP
  • Atom: editor de texto con múltiples plugins y soporte para muchos lenguages como PHP.
  • Ubuntu: en mi caso uso Linux en particular Ubuntu para los desarrollos.
  • Bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • JQuery: biblioteca Javascript ligera que nos permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, agregar AJAX, …


 

1. EL PROYECTO

Siguiendo el planteamiento de Learning Project vamos a desarrollar el proyecto utilizando como base de datos MySQL con PHP para el desarrollo de la aplicación de gestión, en este caso no utilizaremos ningún framework PHP ya que queremos ir mostrando porque surge la necesidad de utilizar frameworks para el desarrollo rápido de aplicaciones con PHP.
 

Definición del proyecto

El proyecto se define como multiempresa para la administración de clientes, donde almacenaremos la información de empresas y clientes, cada empresa podrá tener múltiples clientes, para este desarrollo se plantea que la entidad de los clientes tenga direcciones que podrá ser una o varias, compartirán los campos definidos en tablas para países, idiomas, monedas y formas de pago.

Cómo ya he dicho desarrollamos el planteamiento base que uso en mi proyecto Learning Project consúltalo si necesitas más detalles del proyecto, te diré que se desarrolla con una base de datos propia y que todo el desarrollo se hará desde cero, con la ayuda y documentación que se nos facilita desde PHP y las diferentes utilidades que vayamos necesitando.

Vamos a desarrollar una aplicación CRUD (Create Read Update Delete) directamente con PHP para la base de datos customerdb, también, vamos a darle a nuestra aplicación las siguientes características:

  • Seguridad: añadiremos control acceso.
  • Multiidioma: nuestra aplicación debe soportar varios idiomas.
  • Look & Fell Web UI: veremos como podemos modificar la presentación web de nuestro proyecto, para ello utilizaremos desde el principio Bootstrap.
  • Plantillas: veremos como utilizar plantillas (templates) en nuestro desarrollo, analizando un planteamiento directo en comparación con un sistema para las plantillas como Twig (comentaremos también otras posibilidades).
  • Otras necesidades: según vayamos avanzando con el proyecto iremos profundizando en otras características.

Esquema SQL

Desarrollamos el proyecto con las siguientes tablas, a continuación, se explica su utilidad y algunas características básicas, el resto irá directamente sobre el código SQL, como puedes ver aquí con más detalle, estas son las tablas que utilizaremos ya que tienes el desarrollo completo de la base de datos en el Tutorial MySQL (MariaDB) explicado paso a paso, ahora las tablas:

Learning Project
TABLA
DESCRIPCIÓN
CARACTERÍSTICAS DE DISEÑO
cb_enterprise
Empresas de la aplicación, cada empresa tendrá sus clientes.
Las empresas tendrán definido inicialmente: idioma, país y moneda, así como otros campos básicos propios.
cb_customer
Tabla general de cliente, donde se almacenarán los clientes de las diferentes empresas.
Tendrán definido inicialmente: idioma, país, direcciones, empresas, métodos de pago y moneda, así como otros campos básicos propios.
cb_addresses
Tabla de registro de las direcciones, se asocian aquí las direcciones que tienen un cliente.
Registro para asociar las direcciones al cliente, cada cliente tendrá un número ilimitado de direcciones con cb_address relacionado mediante cb_addresses (es básicamente una tabla relacional)
cb_address
Tabla de dirección donde se guardan los datos de la dirección en sí.
Tabla de dirección que tendrá los campos generales de una dirección, así como números de teléfono, transportista y tipos de dirección.
cb_language
Tabla con los idiomas registrados en la aplicación, se podrá relacionar con múltiples tablas.
cb_currency
Tabla con las monedas registradas en la aplicación, se podrá relacionar con múltiples tablas.
cb_country
Tabla con los países registrados en la aplicación, se podrá relacionar con múltiples tablas.
Para cada país se especificará la moneda y el idioma utilizado por defecto.
cb_paymentmethod
Métodos de pago definidos para el cliente u otras entidades.

A continuación, una imagen con el el Esquema E-R de Customerdb donde se muestran las relaciones reales de la base de datos, con los nombres de las claves foráneas, …

Learning Project Customerdb Database Entity Relation

Esquema E-R de Customerdb propuesto en Learning Project


El desarrollo de esta base de datos que utilizo en mi proyecto Learning Project lo puedes ver con más detalle en el desarrollo del proyecto con MySQL (MariaDB), aquí explico el lenguaje SQL para su creación, por si quieres verla por ti mismo este es el código SQL la base de datos MySQL para la base de datos customerdb:

 

Para centrarnos en el desarrollo PHP tienes aquí otro script para la poblar con datos la base de datos customerdb:


 

2. CONFIGURACIÓN DEL ENTORNO

Para este proyecto vamos a necesitar un servidor para procesar nuestras páginas PHP, una base de datos MySQL que es la que hemos escogido para este desarrollo, a continuación explicaremos una instalación rápida en Ubuntu.

Si utilizas Windows o Mac puedes utilizar fácilmente algunos de los instaladores genera les como XAMPP con versiones para estos sistemas operativos además de Linux.

Preparación del entorno

Vamos a realizar una Instalación LAMP (Linux + Apache + MySQL + PHP) en Ubuntu 15.10 paso a paso de forma resumida para una explicación detallada consulta la publicación:

Instalación LAMP en Ubuntu 15.10

Instalación LAMP en Ubuntu 15.10

Instalamos Apache

Instalamos Apache sino lo tenemos instalado en Ubuntu utilizamos:

sudo apt -get update
sudo apt -get install apache2

Al finalizar comprobamos la instalación con la url http://127.0.0.1/ en nuestro navegador de cabecera.

Instalamos MySQL

MySQL es un sistema de gestión de Base de Datos muy utilizado en conjunto con Apache y PHP, vamos a instalar también varios paquetes para la integración de MySQL con Apache y PHP:

sudo apt-get install mysql-server libapache2-mod-auth-mysql php5-mysql

Ahora creamos para MySQL su propia base de datos para la estructura del directorio donde almacena la información:

sudo mysql_install_db

Por último, para tener una instalación más segura iniciamos el script interactivo de seguridad:

sudo mysql_secure_installation

Instalamos PHP

Instalamos PHP 5 y los componentes con paquetes de ayuda para Apache:

sudo apt-get install libapache2-mod-php5 php5 php5-mcrypt

Configuramos el fichero de configuración Apache dir.conf que se encuentra en /etc/apache2/mods-enabled/ para esta sencilla edición utilizo gedit:

sudo gedit /etc/apache2/mods-enabled/dir.conf

Actualizamos la siguiente información para incluir index.php:

<IfModule mod_dir.c>
	DirectoryIndex index.php index.html index.cgi index.pl  index.xhtml index.htm
</IfModule>

Reiniciamos Apache para actualizar los cambios:

sudo service apache2 restart

El directorio donde colocaremos nuestras páginas PHP y HTML se encuentra en /var/www/html/.

Creación del proyecto y configuración

Para esto proyecto voy a utilizar Netbeans IDE, ya que aunque es un IDE un poco pesado para este tipo de proyectos creo que facilita mucho el aprendizaje para quién está empezando desde cero, ya que nos permite integrar muy fácilmente el despliegue de nuestro proyecto en el servidor, y dentro del mismo, también configuramos un acceso a la instalación MySQL, con lo que tenemos todo integrado y solo nos tenemos que preocupar de programar, estas son algunas características de la integración de Netbeans con PHP:

  • Entorno PHP con la integración completa con los estándares web de codificación, con soporte completo para HTML5, JavaScript y CSS3.
  • Potente editor de código fuente para PHP
  • Soporte para PHP 5.6
  • Web Frameworks: integración con Symfony 2 y Zend, por ejemplo, yo lo he utilizado con Symfony y me ha resultado cómoda la programación.
  • Creación de proyectos PHP
  • Debugger: nos permite inspeccionar variables, introducir breakpoints,…

Una alternativa muy sencilla es instalar PhpMyAdmin para la base de datos y utilizar cualquier editor que tenga incorporado edición de código fuente con ayudas como, por ejemplo Atomic, o el que más te guste.

Veamos ahora paso a paso la creación del proyecto e integración con el servidor:

  • Creación del proyecto PHP: para ello seleccionamos File > New Project en la pantalla buscamos PHP y seleccionamos PHP Application como se muestra en la imagen:
PHP Project - Creamos nuevo proyecto PHP

PHP Project – Creamos nuevo proyecto PHP

  • Nombramos el proyecto: damos nombre al proyecto y seleccionamos la ubicación, podemos seleccionar también la versión de PHP.
PHP Project - Damos nombre y ubicación al proyecto

PHP Project – Damos nombre y ubicación al proyecto

  • Servidor: seleccionamos la ubicación de nuestro servidor, en mi instalación dejo la opción por defecto Localhost, una opción muy interesante nos permite copiar automáticamente los cambios a nuestro servidor local
PHP Project - Ubicación del proyecto y copia de ficheros al servidor

PHP Project – Ubicación del proyecto y copia de ficheros al servidor

  • Selección de Framework: en este caso no seleccionamos ninguno, no obstante lo mostramos aquí por si no conocías esta utilidad.
PHP Project - Selección de framework

PHP Project – Selección de framework

Finalizado este último paso aceptamos y ya tenemos nuestro proyecto creado y configurado.

Configuración de MySQL

Creamos la base de datos customerdb

Creamos la base de datos donde vamos a crear las tablas para desarrollar nuestro tutorial, el nombre que utilizamos es customerdb:

CREATE DATABASE customerdb;

Creamos el usuario que vamos a utilizar xulescode y la contraseña, en este caso la misma:

CREATE USER xulescode@localhost IDENTIFIED BY 'xulescode'

Damos todos los privilegios al usuario xulescode sobre las base de datos customerdb:

GRANT ALL PRIVILEGES ON customerdb.* TO xulescode@localhost;

Ya tenemos lista nuestra base de datos para empezar a trabajar, ahora podemos descargar los scripts para la creación de las tablas y para poblarlas de datos.

Cargamos customerdb en Netbeans

Para configurar en Netbeans la base de datos nos tenemos que ir a la pestaña Services, ahí nos aparece un árbol con diferentes opciones donde desplegamos la opción Databases, situado encima activamos el menú popup para seleccionar la opción New Connection, ahora rellenamos la configuración de nuestro servidor MySQL como se muestra en la imagen:

PHP Project - Defnimos la conexión a la base de datos en Netbeans

PHP Project – Definimos la conexión a la base de datos en Netbeans

La configuración es sencilla selección del driver, dirección del servidor de base de datos en mi caso Localhost y el puerto 3306 por defecto en MySQL, como base de datos seleccionamos mysql, ya que de momento no hemos creado la base de datos de nuestra aplicación.

Finalizamos la configuración seleccionando un esquema (schema) por defecto de la base de datos seleccionada:

PHP Project - Selección de esquema base

PHP Project – Selección de esquema base

Creamos las tablas y añadimos los datos

Descarga el script con las tablas:

Una vez descargado abrimos una consola para ejecutar comandos SQL, para ello desde Netbeans en el árbol de las tablas de nuestra base de dato seleccionamos la opción Execute Command desde la ventana vamos a File > Open File y abrimos el fichero descargado, ejecútalo directamente y listo ya tienes creadas las 8 tablas del proyecto (te recuerdo que este desarrollo está detallado en el Tutorial MySQL (MariaDB)):

PHP CRUD - Customerdb - Creación de tablas

PHP CRUD – Customerdb – Creación de tablas

Hacemos lo mismo en otra ventana para poblar con datos customerdb, aquí tienes el script:

Así será como verás los datos en tu pantalla de Netbeans:

PHP CRUD - Customerdb - Poblacion-de-datos

PHP CRUD – Customerdb – Poblacion-de-datos

Ahora puedes abrir una consola para ver los datos de cb_language, que será la tabla con la que explicaremos el primer desarrollo CRUD del proyecto:

PHP CRUD - Customerdb - Consulta cb_language

PHP CRUD – Customerdb – Consulta cb_language

Definición de la estructura del proyecto

Antes de empezar a trabajar en el proyecto explicamos los ficheros y carpetas que tendremos creados al finalizar el proyecto, buscamos que sea lo más sencilla posible para centrarnos solo en la programación PHP:

PHP CRUD Application - Estructura del Proyecto

PHP CRUD Application – Estructura del Proyecto


Vamos a diferenciar entre los ficheros que crearemos nosotros y los que añadiremos manualmente para integrar Bootstrap como veremos más adelante:

  • Nuestros ficheros:
    • index.php: fichero que utilizaremos para realizar toda la presentación de los idiomas (cb_language), programar los formularios PHP CRUD y hacer toda la gestión PHP.
    • database: creamos esta carpeta para crear las clases PHP que nos ayudarán a establecer conexión con la base de datos con DatabaseConnect.php y a controlar todas las operaciones PHP CRUD con CbLanguageController
  • Carpetas para Bootstrap::para integrar Bootstrap como veremos más adelante creamos las carpetas:
    • css: ficheros necesarios de Bootstrap, aquí también añadiremos los ficheros css que necesitemos para nuestro proyecto, en este proyecto como verás más adelante no hacemos ningún diseño con css sino que utilizamos las utilidades de Bootstrap.
    • js: ficheros JavaScript que nos facilitan diferentes acciones en nuestro proyecto como, por ejemplo, ventanas modales.
    • fonts: ficheros de fuentes que se utilizan en Bootstrap.
    • assets: como veremos en el apartado de integración con Bootstrap aquí hay imágenes y archivos js que se utilizan en el ejemplo.


 

3. DEFINIMOS LAS CONEXIÓN A MySQL CON PHP

Para conectarnos a una base de datos MySQL en PHP podemos hacerlo mediante PDO o con MySQLi, en este ejemplo vamos a usar PDO que es el que uso generalmente en mis proyectos ya que te permite conectar con múltiples bases de datos y no solo con MySQL, en esta publicación PDO vs MySQLi – Conexión a MySQL con PHP te explico con detalle como conectar a una base de datos con las dos formas antes mencionadas.

Creamos la clase DatabaseConnect

En la clase DatabaseConnect vamos a incluir los métodos que utilizamos para crear y administrar la conexión a la base de datos.

En la clase creamos dos métodos sencillos el primero es public function dbConnect($dbsystem, $host, $dbname, $username, $passwd) que es un método genérico para la conexión con cualquier base de datos usando PDO mediante los parámetros indicados en el método. Para nuestro ejemplo creamos un método auxiliar para nuestra conexion a MySQL que llamaremos dbConnectSimple() esto sirve de ejemplo para ver el funcionamiento del método anterior. A continuación, el código que hemos diseñado y que utilizaremos desde index.php es el siguiente:

<?php

use PDO;

/**
 * En la clase <b>DatabaseConnect</b> vamos a incluir los métodos que utilizamos para crear y 
 * administrar la conexión a la base de datos.
 * In the "Database Connect" class we will include the methods we use to create and 
 * manage the connection to the database.
 * @author Xules You can follow me on my website http://www.codigoxules.org/en
 * Puedes seguirme en mi web http://www.codigoxules.org).
 */
class DatabaseConnect {
    
    /**
     * Método con los valores generales para nuestra aplicación.
     * Method with the default values for our application.
     * @return type PDO devuelve un objeto PDO resultado de la conexión.
     *  (object returns a result of the connection).
     */
    public function dbConnectSimple(){        
        $dbsystem='mysql';
        $host='127.0.0.1';
        $dbname='customerdb';
        $username='xulescode';
        $passwd='xulescode'; 
        return $this->dbConnect($dbsystem, $host, $dbname, $username, $passwd);
    }
    /**
     * Método para definir la conexión a la base de datos mediante parámetros 
     * devuelve un objeto PDO con la conexión realizada.
     * Method to define the connection to the database using PDO parameters returns an object with the successful connection.
     * @param type $dbsystem tipo de base de datos, por ejemplo: mysql, postgresql (database type, for example: mysql, postgresql..
     * @param type $host el host ya sea el nombre correspondiente o la IP directamente (the host either the corresponding name or IP directly).
     * @param type $dbname el nombre de la base de datos a la que nos queremos conectar (the name of the database to which you want to connect).
     * @param type $username nombre del usuario para la conexión a la base de datos especificada en el DSN (for the connection to the database specified in the DSN).
     * @param type $passwd contraseña asociada la usuario que definimos para la conexión (password associated with the user to define the connection type).
     * @return type PDO devuelve un objeto PDO resultado de la conexión (PDO object returns a result of the connection).
     */
    public function dbConnect($dbsystem, $host, $dbname, $username, $passwd){              
        $dsn=$dbsystem.':host='.$host.';dbname='.$dbname;               
        try {          
            $connection = new PDO($dsn, $username, $passwd);
            $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch (PDOException $pdoExcetion) {
            $connection = null;
            echo 'Error al establecer la conexión: '.$pdoExcetion;
            exit();
        }
        echo 'Conectado a la base de datos: '.$dbname;
        return $connection;        
    }

Definimos un página index.php sencilla para probar la conexión

Vamos a probar la conexión en la página PHP que utilizaremos para nuestro proyecto, para eso creamos index.php con una estructura muy sencilla HTML a la que iremos añadiendo código según lo vayamos necesitando:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP CRUD MySQL</title>
    </head>
    <body>
        <h2 class="sub-header">Idiomas</h2>
        <?php
            include './database/DatabaseConnect.php';

            $dConnect = new DatabaseConnect;
            $cdb = $dConnect->dbConnectSimple();
        ?>

    </body>
</html> 

Como puedes ver es sencillo, añadimos con include la clase que vamos a utilizar instanciamos la clase, y finalmente, llamamos al método para establecer la conexión: $cdb = $dConnect->dbConnectSimple();, hemos dejado un mensaje de texto para mostrar en la página si la conexión ha tenido éxito o se ha producido un error, ahora comprueba el funcionamiento por ti mismo.

Creamos una consulta a la base de datos

Vamos a presentar en HTML el resultado de la consulta más sencilla sobre la tabla idiomas: SELECT * FROM cb_language;. El desarrollo es sencillo primero creamos el método para obtener los resultados en array y así poder presentarlo utilizando un bucle foreach:

	$query = "SELECT * FROM cb_language;";
        $statement = $cdb->prepare($query);
        $result = $statement->execute();
        $rows = $statement->fetchAll(\PDO::FETCH_OBJ);

Como los datos los vamos a presentar en una tabla para cada registro que queramos mostrar añadimos el código:

 <span class="code-php-b"><td><?php print($row->idlanguage); ?></td></span> 

donde combinamos PHP con HTML, por cada fila como es lógico añadiremos una nueva fila en la tabla, este es el código completo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP CRUD MySQL</title>
    </head>
    <body>
        <h2 class="sub-header">Idiomas</h2>
        <?php
            include './database/DatabaseConnect.php';

            $dConnect = new DatabaseConnect;
            $cdb = $dConnect->dbConnectSimple();
        ?>    
            
        <table>            
                <tr>
                    <th>LANGUAGE</th>
                    <th>NAME</th>
                    <th>IS ACTIVE?</th>
                    <th>LANGUAGE ISO</th>
                    <th>COUNTRY CODE</th>
                    <th>IS BASE?</th>
                    <th>IS SYSTEM LANGUAGE?</th>
                    <th>ACCIONES</th>
                </tr>           
               
        <?php    
            try {
                $query = "SELECT * FROM cb_language;";
                $statement = $cdb->prepare($query);
                $result = $statement->execute();
                $rows = $statement->fetchAll(\PDO::FETCH_OBJ);

                echo '<br />';
                foreach ($rows as $row) {
                    ?>
                    <tr>
                        <td><?php print($row->idlanguage); ?></td>
                        <td><?php print($row->namelanguage); ?></td>
                        <td><?php print($row->isactive); ?></td>
                        <td><?php print($row->languageiso); ?></td>
                        <td><?php print($row->countrycode); ?></td>
                        <td><?php print($row->isbaselanguage); ?></td>
                        <td><?php print($row->issystemlanguage); ?></td>
                    </tr>    
        <?php
                }
            } catch (Exception $exception) {
                echo 'Error hacer la consulta: ' . $exception;
            }
            ?>  
        </table>
    </body>
</html>    

Este es el resultado final que veremos en nuestro navegador:

PHP-Application-Customerdb-05-CbLanguage


 

4. AÑADIMOS BOOTSTRAP PARA LA PRESENTACIÓN

Vamos a usar un framework que nos ayude con la presentación escogiendo uno de los más populares de la actualidad para diseño de sitios y aplicaciones web como es Bootstrap, este nos proporciona plantillas de diseño con tipografía, formularios, botones, menús de navegación, …, basado en HTML y CSS con extensiones JavaScript opcionales.

Vamos a usar como base para nuestro proyecto la plantilla del ejemplo Dashoard Template for Bootstrap, de donde cogeremos la estructura para moldearlo a nuestras necesidades.

Para empezar descargamos Bootstrap desde Bootstrap getting started – Download y lo descomprimimos en nuestro escritorio.

Integramos Bootstrap paso a paso

Vamos a hacer una integración directa, así, copiamos a nuestro proyecto la distribución de Bootstrap que encontramos en la carpeta dist si hemos bajado directamente la distribución con ejemplo, sino la encontraremos directamente al descomprimir el archivo. Esta es la estructura que copiamos:

PHP Project - Bootstrap

PHP Project – Bootstrap

Para acelerar este proceso y centrarnos en el desarrollo en PHP vamos a partir del ejemplo Dashboard adaptándolo un poco a nuestro proyecto:

  1. Analizamos el ejemplo en la carpeta bootstrap-3.3.6/docs/examples/dashboard encontrarás 2 ficheros: dashboard.css que copiamos directamente en la carpeta css de nuestro proyecto y index.html que es el que adaptamos
  2. Copiamos la carpeta bootstrap-3.3.6/docs/assets completa, aquí hay imágenes y archivos js que se utilizan en el ejemplo.
  3. Este es el código que he modificado:
  4. <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
            <meta name="description" content="">
            <meta name="author" content="">
            <link rel="icon" href="favicon.ico">
    
            <title>PHP Customerdb - Dashboard Template for Bootstrap</title>
    
            <!-- Bootstrap core CSS -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
    
            <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
            <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    
            <!-- Custom styles for this template -->
            <link href="css/dashboard.css" rel="stylesheet">
    
            <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
            <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
            <script src="assets/js/ie-emulation-modes-warning.js"></script>
    
            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
              <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
              <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
            <![endif]-->
        </head>
    
        <body>
    
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                                data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">PHP Customerdb</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Dashboard</a></li>             
                            <li><a href="#">Ayuda</a></li>
                            <li><a href="http://www.codigoxules.org" target="blanck">Código Xules</a></li>
                        </ul>
                        <form class="navbar-form navbar-right">
                            <input type="text" class="form-control" placeholder="Search...">
                        </form>
                    </div>
                </div>
            </nav>
    
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-3 col-md-2 sidebar">
                        <ul class="nav nav-sidebar">
                            <li class="active"><a href="#">Idiomas <span class="sr-only">(current)</span></a></li>
                            <li><a href="">Monedas</a></li>
                            <li><a href="">Países</a></li>          
                        </ul>
                        <ul class="nav nav-sidebar">            
                            <li><a href="">Empresa</a></li>
                            <li><a href="">Clientes</a></li>
                        </ul>
                        <ul class="nav nav-sidebar">            
                            <li><a href="#">Informes</a></li>
                            <li><a href="#">Análisis</a></li>  
                            <li><a href="">Ayuda</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                        <h1 class="page-header">Dashboard</h1>
    
                        <div class="row placeholders">
                            <div class="col-xs-6 col-sm-3 placeholder">
                                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="150" height="150" class="img-responsive" alt="Generic placeholder thumbnail">
                                <h4>Empresas</h4>
                                <span class="text-muted">Empresas definidas</span>
                            </div>
                            <div class="col-xs-6 col-sm-3 placeholder">
                                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="150" height="150" class="img-responsive" alt="Generic placeholder thumbnail">
                                <h4>Clientes</h4>
                                <span class="text-muted">Clientes por empresa</span>
                            </div>
                            <div class="col-xs-6 col-sm-3 placeholder">
                                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="150" height="150" class="img-responsive" alt="Generic placeholder thumbnail">
                                <h4>Administración</h4>
                                <span class="text-muted">Administración de tablas auxiliares</span>
                            </div>
                            <div class="col-xs-6 col-sm-3 placeholder">
                                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="150" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                                <h4>Ayuda</h4>
                                <span class="text-muted">Documentación de ayuda</span>
                            </div>
                        </div>
                        
                        <h2 class="sub-header">Idiomas</h2>                
                        
                        <!--    
                                DESARROLLO PHP YA REALIZADO
                        -->        
                        
                        
                    </div>
                </div>
            </div>
    
            <!-- Bootstrap core JavaScript
            ================================================== -->
            <!-- Placed at the end of the document so the pages load faster -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
            <script src="js/bootstrap.min.js"></script>
            <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
            <script src="assets/js/vendor/holder.min.js"></script>
            <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
            <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
            
        </body>
    </html>
    
  5. Ahora copiando el código PHP que ya habíamos desarrollado, nuestro proyecto puedes ver el cambio al introducir Bootstrap incluida la versión responsive:
  6. PHP Project - Adaptación Bootstrap CbLanguage

    PHP Project – Adaptación Bootstrap CbLanguage

    PHP Project - Responsive CbLanguage

    PHP Project – Responsive CbLanguage

  7. Este es el código que debemos introducir:
  8. <?php
                include './database/DatabaseConnect.php';
    
                $dConnect = new DatabaseConnect;
                $cdb = $dConnect->dbConnectSimple();
            ?>    
                
            <table>            
                    <tr>
                        <th>LANGUAGE</th>
                        <th>NAME</th>
                        <th>IS ACTIVE?</th>
                        <th>LANGUAGE ISO</th>
                        <th>COUNTRY CODE</th>
                        <th>IS BASE?</th>
                        <th>IS SYSTEM LANGUAGE?</th>
                        <th>ACCIONES</th>
                    </tr>           
                   
            <?php    
                try {
                    $query = "SELECT * FROM cb_language;";
                    $statement = $cdb->prepare($query);
                    $result = $statement->execute();
                    $rows = $statement->fetchAll(\PDO::FETCH_OBJ);
    
                    echo '<br />';
                    foreach ($rows as $row) {
                        ?>
                        <tr>
                            <td><?php print($row->idlanguage); ?></td>
                            <td><?php print($row->namelanguage); ?></td>
                            <td><?php print($row->isactive); ?></td>
                            <td><?php print($row->languageiso); ?></td>
                            <td><?php print($row->countrycode); ?></td>
                            <td><?php print($row->isbaselanguage); ?></td>
                            <td><?php print($row->issystemlanguage); ?></td>
                        </tr>    
            <?php
                    }
                } catch (Exception $exception) {
                    echo 'Error hacer la consulta: ' . $exception;
                }
                ?>  
            </table>
    

No voy a entrar en esta publicación a explicar como utilizar y sacarle partido a Bootstrap, simplemente destacar que hemos incluido el css de la plantilla, así como la integración de JQuery que es una biblioteca Javascript que nos permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM y agregar AJAX como principales características.

Actualizamos la presentación del listado

Vamos a actualizar el diseño de nuestra tabla utilizando Bootstrap la documentación sobre el diseño de tablas está disponible en Bootstrap Table con explicaciones y ejemplos.

Como puedes ver en el ejemplo añadimos las definiciones de css con las clases table-responsive que como su nombre indica nos permite tener una tabla responsive y table-striped para mostrar todas las filas con un bordeado de tipo cebra.

Como vamos a implementar las acciones CRUD incluimos ya un formulario con los siguientes valores:

<form  role="form" name="formListCbLanguage" 
	method="post" action="index.php">

Este formulario nos va a permitir transmitir los valore de los registros de la tabla a los formularios que manejaran las acciones CRUD como veremos a continuación, así queda finalmente nuestro código:

<!-- Código PHP CRUD para presentar los idiomas. -->
                    <h2 class="sub-header">Idiomas</h2>                
 
                    <?php
                        include './database/DatabaseConnect.php';
                        
                        $dConnect = new DatabaseConnect;
                        $cdb = $dConnect->dbConnectSimple();           
                            
                    ?>    
            
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>LANGUAGE</th>
                                    <th>NAME</th>
                                    <th>IS ACTIVE?</th>
                                    <th>LANGUAGE ISO</th>
                                    <th>COUNTRY CODE</th>
                                    <th>IS BASE?</th>
                                    <th>IS SYSTEM LANGUAGE?</th>
                                    <th>ACCIONES</th>
                                </tr>
                            </thead>
                            <tbody>
                                <form role="form" name="formListCbLanguage" method="post" action="index.php">
                                <?php
                                try {
                                    $query = "SELECT * FROM cb_language;";
                                    $statement = $cdb->prepare($query);
                                    $result = $statement->execute();
                                    $rows = $statement->fetchAll(\PDO::FETCH_OBJ);                                    
                                    
                                    foreach ($rows as $row) {
                                        ?>
                                        <tr>
                                            <td><?php print($row->idlanguage); ?></td>
                                            <td><?php print($row->namelanguage); ?></td>
                                            <td><?php print($row->isactive); ?></td>
                                            <td><?php print($row->languageiso); ?></td>
                                            <td><?php print($row->countrycode); ?></td>
                                            <td><?php print($row->isbaselanguage); ?></td>
                                            <td><?php print($row->issystemlanguage); ?></td>
                                            <td>BOTONES DE ACCIONES</td>
                                            </tr>      
                                        
                                    <?php
                                    }
                                } catch (Exception $exception) {
                                    echo 'Error hacer la consulta: ' . $exception;
                                }
                                ?>  
                                  
                                </form>        
                            </tbody>      
                        </table>                    
                    </div>
                    <!-- Fin código PHP CRUD -->

Este es el resultado:

PHP Application - Actualización de la tabla con Bootstrap

PHP Application – Actualización de la tabla con Bootstrap

Para el desarrollo de las acciones vamos a crear una clase donde incluiremos todas las operaciones CRUD, así como las consultas sobre cb_language, es decir, creamos un controlador para gestionar la tabla cb_language, a nuestra clase la llamamos CbLanguageController.

Creamos la clase e implementamos nuestro primer método con las consulta sobre cb_language que teníamos directamente en el código, como puedes ver devolvemos el resultado de la consulta en un array para su presentación:

<?php

/**
 * CbLanguageController clase donde agrupamos todas las acciones
 * CRUD (Create Read Update Delete), y otras utilidades adicionales para la
 * tabla de la base de datos <b>cb_language</b>.
 * CbLanguageController class where we group all actions CRUD (Create Read Update Delete), 
 * and additional utilities for database table data <b>cb_language</b>.
 * @author Xules Puedes seguirme en mi web http://www.codigoxules.org).
 * You can follow me on my website http://www.codigoxules.org/en
 */
class CbLanguageController {
    var $cdb = null;
    /**
     * Devolvemos todos los resultados de la consulta sobre cb_language.
     * We return all the results of the query on cb_language.
     */
    public function readAll(){
        $query = "SELECT * FROM cb_language;";
        $statement = $this->cdb->prepare($query);
        $statement->execute();
        $rows = $statement->fetchAll(\PDO::FETCH_OBJ);
        return $rows;         
    }   

Actualizamos nuestro código con el include para nuestra nueva clase e instanciamos CbLanguageController:

include './database/CbLanguageController.php';

$cbLanguageController = new CbLanguageController();
$cbLanguageController->cdb = $cdb;   

Y a continuación sustituimos el código de la consulta por la llamada a la consulta del controlador, ahora nuestro código será una línea:

$rows = $cbLanguageController->readAll();


 

5. CREAMOS EL CRUD (Create Read Update Delete) PARA LOS IDIOMAS

Ahora que ya tenemos armada nuestra estructura de página utilizando Bootstrap y con conexión a la base de datos vamos a programar la operaciones CRUD con PHP. Empezaremos por la parte de lectura actualizando el diseño ya que la consulta ya la hemos visto anteriormente.

En la parte de operaciones no utilizaremos AJAX que nos permitiría una comunicación asíncrona con el servidor ya que para empezar queremos mostrar como gestionar las llamadas al servidor con los procesos de PHP. Utilizaremos JQuery para mostrar los form de creación, lectura y actualización.

CREATE – Creamos un nuevo idioma

Para el formulario de creación de un nuevo elemento utilizaremos una ventana modal utilizando Bootstrap para ello creamos un botón que colocamos encima de la tabla:

	<!-- Añadimos un botón para el diálogo modal -->
        <button type="button" 
                class="btn btn-lg btn-primary" 
                data-toggle="modal" 
                data-target="#myModal"
                onclick="newCbLanguage()">NUEVO</button> 

Para crear está ventana modal usamos Modals (modal.js) nos proporciona una forma ágil de crear una ventana modal, flexible y con las funcionalidades necesarias, el único código que necesitamos es el que incluimos dentro de la función JavaScript newCbLanguage():

	<script>
            /**
             * Abrimos la ventana modal para crear un nuevo elemento.
             * We open a modal window to create a new element.
             * @returns {undefined}
             */
            function newCbLanguage(){
                $('#myModal').on('shown.bs.modal', function () {
                    $('#myInput').focus()
                });
            }
        </script>

Para llamar a la ventana modal que vamos a crear a continuación utilizamos el código implementado en el botón dond al pulsar click hemos introducido la acción de la llamada a JavaScript.

Basándonos en el modelo del ejemplo Modals (modal.js) creamos el siguiente formulario:

    <!-- 
        Create - Read - Update    
        Creamos una ventana Modal que utilizaremos para crear un nuevo idioma, actualizarlo o mostrarlo.
        We create a modal window used to create a new language, update or display.-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Creación de idioma</h4>
                </div>
                <form role="form" name="formCbLanguage" method="post" action="index.php">
                    <div class="modal-body">                                    
                        <div class="input-group">
                            <label for="idlanguage">Idioma</label>
                            <input type="text" class="form-control" id="idlanguage" name="idlanguage" placeholder="es_ES (por ejemplo)" >
                            <small class="text-muted">Lo utilizamos como ID y se forma con los iso de idioma (es) y país (ES) unidos por un guión bajo.</small>
                        </div>
                        <div class="input-group"> 
                            <label for="namelanguage">Nombre</label>
                            <input type="text" class="form-control" id="namelanguage" name="namelanguage" placeholder="Nombre" aria-describedby="sizing-addon2">
                        </div>
                        <div class="input-group"> 
                            <label for="isactive">Activo</label>
                            <input type="text" class="form-control" id="isactive" name="isactive" placeholder="Activo" aria-describedby="sizing-addon2">
                            <small class="text-muted">Usa el valor Y si está activo y N en caso contrario</small>
                        </div>                          
                        <div class="input-group"> 
                            <label for="languageiso">Iso</label>
                            <input type="text" class="form-control" id="languageiso" name="languageiso" placeholder="Iso" aria-describedby="sizing-addon2">
                        </div>
                        <div class="input-group"> 
                            <label for="countrycode">Código País</label>
                            <input type="text" class="form-control" id="countrycode" name="countrycode" placeholder="Código País" aria-describedby="sizing-addon2">
                        </div>
                        <div class="input-group"> 
                            <label for="isbaselanguage">Idioma base</label>
                            <input type="text" class="form-control" id="isbaselanguage" name="isbaselanguage" placeholder="Es idioma base" aria-describedby="sizing-addon2">
                            <small class="text-muted">Usa el valor Y si está activo y N en caso contrario</small>
                        </div>
                        <div class="input-group"> 
                            <label for="issystemlanguage">Idioma sistema</label>
                            <input type="text" class="form-control" id="issystemlanguage" name="issystemlanguage" placeholder="Es el idioma del sistema" aria-describedby="sizing-addon2">
                            <small class="text-muted">Usa el valor Y si está activo y N en caso contrario</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="save-language" name="save-language" type="submit" class="btn btn-primary">Guardar</button>
                        
                        <button id="cancel"type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>                                    
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->      

Este es el resultado del formulario modal:

PHP CRUD Application -  Nuevo idioma

PHP CRUD Application – Nuevo idioma

Este formulario es el mismo que reutilizaremos para actualizar y leer un idioma más adelante veremos como, ahora centremonos en crear un nuevo idioma. Como puedes ver en el código hemos creado dentro del formulario:

los elementos de texto necesarios para crear un nuevo elemento, como estructura adicional hemos añadido algunos comentarios y también mostramos un ejemplo con ayuda de Bootstrap.

Incluimos un botón de submit sobre la propia página index.php, con lo que tendremos que controlar el envío de la acción para procesar la creación del elemento del lado del servidor creando un proceso en PHP que introduzca el nuevo registro en la base de datos MySQL. Para ello en primer lugar actualizamos el código después de la creación de la conexión para controlar el envío desde el botón save-language

			<?php
                        include './database/DatabaseConnect.php';
                        include './database/CbLanguageController.php';
                        
                        $dConnect = new DatabaseConnect;
                        $cdb = $dConnect->dbConnectSimple();
                        
                        $cbLanguageController = new CbLanguageController();                                                           
                        $cbLanguageController->cdb = $cdb;    
                        
                        if (isset($_POST["save-language"]) ) {  
                            $idlanguage = $_POST['idlanguage'];
                            $namelanguage = $_POST['namelanguage'];
                            $isactive  = $_POST['isactive'];
                            $languageiso = $_POST['languageiso'];
                            $countrycode = $_POST['countrycode'];
                            $isbaselanguage = $_POST['isbaselanguage'];
                            $issystemlanguage = $_POST['issystemlanguage']; 
                            $cbLanguageController->create($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselanguage, $issystemlanguage);
                        }
                        
                        
                    ?> 

Ahora solo queda implementar el método create($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselanguage, $issystemlanguage) para crear el idioma dentro de la clase CbLanguageController, simplemente hacemos una ejecución de un INSERT desde PHP con la conexión establecida, este es el código:


    /**
     * Creamos un nuevo idioma con los parámetros pasados.
     * We create a new language with parameters .
     * @param type $idlanguage
     * @param type $namelanguage
     * @param type $isactive
     * @param type $languageiso
     * @param type $countrycode
     * @param type $isbaselanguage
     * @param type $issystemlanguage
     */
    function create($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselanguage, $issystemlanguage){ 
        $sqlInsert = "INSERT INTO cb_language(idlanguage, namelanguage, isactive, languageiso, countrycode, isbaselanguage, issystemlanguage)"
                 . "    VALUES ('".$idlanguage."', '".$namelanguage."', '".$isactive."', '".$languageiso."', '".$countrycode."', '".$isbaselanguage."', '".$issystemlanguage."')";
        try {             
            $this->cdb->exec($sqlInsert);      
        } catch (PDOException $pdoException) {            
            echo 'Error crear un nuevo elemento cb_language en create(...): '.$pdoException->getMessage();
            exit();
        }
    }

Y por último, un ejemplo de la creación de un elemento:

PHP CRUD Application -  Creación de un idioma

PHP CRUD Application – Creación de un idioma

READ – Mostramos el idioma seleccionado

Para mostrar los datos de un idioma seleccionado vamos a incluir un botón en cada fila de la tabla que hemos diseñado, para hacer el ejemplo lo más sencillo posible, para ello implementamos el botón de lectura y lo colocamos en la tabla donde habíamos añadido el texto Botones de acciones, este es el código en el que utilizamos el id see-language:

                
        <button id="see-language" name="see-language"type="button" class="btn btn-success"
                data-toggle="modal" 
                data-target="#myModal"
                onclick="openCbLanguage('see', 
                            '<?php print($row->idlanguage); ?>', '<?php print($row->namelanguage); ?>',
                            '<?php print($row->isactive); ?>', '<?php print($row->languageiso); ?>',
                            '<?php print($row->countrycode); ?>', '<?php print($row->isbaselanguage); ?>',
                            '<?php print($row->issystemlanguage); ?>')">
            Ver</button>

Hemos utilizado la clase btn-success en nuestro código para darle un color verde utilizando la documentación de Bootstrap para botones, también hemos añadido una acción al hacer click que será la que habrá la ventana modal con los datos del idioma seleccionado utilizando el formulario anterior (no es necesario hacer ningún cambio), así veremos ahora nuestra pantalla:

PHP CRUD Application - Botón VER

PHP CRUD Application – Botón VER

Ahora tenemos que implementar la función JavaScript para transmitir los valores al formulario modal en modo lectura, para ello mediante JavaScript vamos a desactivar las entradas de texto para este caso y ocultar el botón guardar, este es el código:

	<script>
            /**
             * Abrimos la ventana modal para crear un nuevo elemento.
             * We open a modal window to create a new element.
             * @returns {undefined}
             */
            function newCbLanguage(){                 
                openCbLanguage('new', null, null, null, null, null, null, null);
            }
            /**
             * Abrimos la ventana modal teniendo en cuenta la acción (action) para 
             * utilizarla como creación (Create), lectura (Read) o actualización (Update).
             * We opened the modal window considering the action (action) to use 
             * as creation (Create), reading (Read) or upgrade (Update).
             * @param {type} action las acciones que utilizamos son : new para Create, see para Read y edit para Update.
             *      Actions we use are :  new for Create, see for Read and edit for Update.
             * @param {type} idlanguage
             * @param {type} namelanguage
             * @param {type} isactive
             * @param {type} languageiso
             * @param {type} countrycode
             * @param {type} isbaselanguage
             * @param {type} issystemlanguage
             * @returns {undefined}
             */
            function openCbLanguage(action, idlanguage, namelanguage, isactive, languageiso, countrycode, isbaselanguage, issystemlanguage){    
                document.formCbLanguage.idlanguage.value = idlanguage;
                document.formCbLanguage.namelanguage.value = namelanguage;
                document.formCbLanguage.isactive.value = isactive;
                document.formCbLanguage.languageiso.value = languageiso;
                document.formCbLanguage.countrycode.value = countrycode;
                document.formCbLanguage.isbaselanguage.value = isbaselanguage;
                document.formCbLanguage.issystemlanguage.value = issystemlanguage;
                
                document.formCbLanguage.idlanguage.disabled = (action === 'see')?true:false;                
                document.formCbLanguage.namelanguage.disabled = (action === 'see')?true:false; 
                document.formCbLanguage.isactive.disabled = (action === 'see')?true:false; 
                document.formCbLanguage.languageiso.disabled = (action === 'see')?true:false; 
                document.formCbLanguage.countrycode.disabled = (action === 'see')?true:false; 
                document.formCbLanguage.isbaselanguage.disabled = (action === 'see')?true:false; 
                document.formCbLanguage.issystemlanguage.disabled = (action === 'see')?true:false; 
                
                $('#myModal').on('shown.bs.modal', function () {
                    var modal = $(this);
                    if (action === 'new'){                            
                        modal.find('.modal-title').text('Creación de idioma');  
                        $('#save-language').show();
                        $('#update-language').hide();                
                    }else if (action === 'edit'){
                        modal.find('.modal-title').text('Actualizar idioma');
                        $('#save-language').hide();                    
                        $('#update-language').show();   
                    }else if (action === 'see'){
                        modal.find('.modal-title').text('Ver idioma');
                        $('#save-language').hide();   
                        $('#update-language').hide();   
                    }
                    $('#idlanguage').focus()
                
                });
            }        
            
        </script>

Como puedes ver en el código hemos actualizado el método para crear un nuevo elemento, y además, en la nueva función openCbLanguage(…) teniendo en cuenta la acción (action) que se pasa como parámetro abrimos la ventana modal para utilizarla como creación (Create), lectura (Read) o actualización (Update), ya hemos incluido aquí el código necesario para el botón actualizar que veremos a continuación. Si te fijas en el botón que hemos diseñado pasamos como acción see este será el resultado:

PHP CRUD Application - VER IDIOMA

PHP CRUD Application – VER IDIOMA

UPDATE – Actualizamos el registro

Añadimos ahora al lado del botón Ver un nuevo botón para Editar un registro, utilizamos la misma ventana modal en la que al seleccionar un idioma en la tabla transmitimos los valores de la tabla al formulario mediante la función JavaScript openCbLanguage(…) que creamos antes, si te fijas en el código verás que para la acción edit mostramos el botón Actualizar en vez de Guardar que es el que mostramos al crear un nuevo elemento.

Este es el botón que tenemos que añadir en la tabla:


	<button id="edit-language" name="edit-language" type="button" 
                class="btn btn-primary"
                data-toggle="modal" 
                data-target="#myModal"
                onclick="openCbLanguage('edit', 
                            '<?php print($row->idlanguage); ?>', '<?php print($row->namelanguage); ?>',
                            '<?php print($row->isactive); ?>', '<?php print($row->languageiso); ?>',
                            '<?php print($row->countrycode); ?>', '<?php print($row->isbaselanguage); ?>',
                            '<?php print($row->issystemlanguage); ?>')">
            Editar</button>

Este es el resultado del formulario:

IMAGEN

Ahora solo tenemos que incluir la llamada a la función PHP para actualizar el registro con los nuevos datos;

	if (isset($_POST["save-language"]) || isset($_POST["update-language"]) ) {  
            $idlanguage = $_POST['idlanguage'];
            $namelanguage = $_POST['namelanguage'];
            $isactive  = $_POST['isactive'];
            $languageiso = $_POST['languageiso'];
            $countrycode = $_POST['countrycode'];
            $isbaselanguage = $_POST['isbaselanguage'];
            $issystemlanguage = $_POST['issystemlanguage']; 
            if (isset($_POST["save-language"])){
                $cbLanguageController->create($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselanguage, $issystemlanguage);
            }else{
                $cbLanguageController->update($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselanguage, $issystemlanguage);
            }
        }

Y por último, implementamos la función update(…) dentro de la clase controladora CbLanguageController:

    /**
     * Actualizamos los valores del idioma que pasamos en el parámetro $idlanguage.
     * We update the values of the language we passed on the $idlanguage parameter.
     * @param type $idlanguage
     * @param type $namelanguage
     * @param type $isactive
     * @param type $languageiso
     * @param type $countrycode
     * @param type $isbaselanguage
     * @param type $issystemlanguage
     */
    public function update($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselanguage, $issystemlanguage){        
        $sqlUpdate = "UPDATE cb_language "
                . "     SET namelanguage    = '".$namelanguage."', "
                . "         isactive        = '".$isactive."', "
                . "         languageiso     = '".$languageiso."', "
                . "         countrycode     = '".$countrycode."', "
                . "         isbaselanguage  = '".$isbaselanguage."', "
                . "         issystemlanguage = '".$issystemlanguage."'"
                . "     WHERE   idlanguage  = '".$idlanguage."'";
        try {                         
            $this->cdb->exec($sqlUpdate);      
        } catch (PDOException $pdoException) {            
            echo 'Error actualizar un nuevo elemento cb_language en update(...): '.$pdoException->getMessage();
            exit();
        }
    }

Ahora ya solo queda comprobar su funcionamiento.

DELETE – Borramos el idioma seleccionado

Para finalizar las operaciones PHP CRUD vamos a implementar la acción de borrado, en este caso vamos a implementar una nueva ventana modal donde preguntaremos al usuario si está seguro de eliminar el registro seleccionado, este es el código:

     
	<!-- Modal DELETE -->
            <div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalDeleteLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalDeleteLabel">Eliminación de idioma</h4>
                        </div>
                        <form role="form" name="formDeleteCbLanguage" method="post" action="index.php">
                            <div class="modal-body">                                    
                                    <div class="input-group">
                                        <label for="idlanguage">¿Se va a eliminar el registro del idioma seleccionado?</label>
                                    </div>       
                                    <div class="input-group">
                                        <label for="idlanguage">Idioma</label>
                                        <input type="text" readonly class="form-control" id="idlanguagedelete" name="idlanguagedelete" placeholder="es_ES (por ejemplo)" >                                        
                                    </div>
                            </div>
                            <div class="modal-footer">
                                    <button id="delete-language-select" name="delete-language-select" type="submit" class="btn btn-primary">Aceptar</button>                                        
                                    <button id="cancel"type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>                                    
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->   

En la tabla añadimos el botón de Eliminar:

         
                        <button id="delete-language-modal" name="delete-language-modal" type="button" 
                                                        class="btn btn-danger"
                                                        data-toggle="modal"
                                                        data-target="#myModalDelete"
                                                        onclick="deleteCbLanguage('<?php print($row->idlanguage); ?>')">Eliminar</button>    

Al igual que antes creamos una función en JavaScript que nos permita abrir la ventana modal que pregunte al usuario si quiere borrar o no el registro.

               
	    /**
             * Para borrar el idioma seleccionado abrimos una ventana modal para 
             * que el usuario confirme si quiere eliminar el registro.
             * To delete the selected language we open a modal window for 
             * the user to confirm whether to delete the record.
             * @param {type} idlanguage
             * @returns {undefined}
             */
            function deleteCbLanguage(idlanguage){     
                document.formDeleteCbLanguage.idlanguagedelete.value = idlanguage;                
                
                $('#myModalDelete').on('shown.bs.modal', function () {
                    $('#myInput').focus()
                });
            } 

Ahora implementamos el control PHP en la ejecución del submit en el botón con id delete-language-select del nuevo formulario para llamar a la función de borrado en PHP, este el código a añadir:

   
        if (isset($_POST["delete-language-select"]) ) { 
                $idlanguageselect = $_POST['idlanguagedelete'];
                $cbLanguageController->delete($idlanguageselect);
        }

Actualizamos la clase controladora CbLanguageController con el método delete(…):

   
    /**
     * Eliminamos el idioma que pasamos como parámetro.
     * We remove the language that we as a parameter.
     * @param type $idlanguage
     */
    public function delete($idlanguage){ 
        $sqlDelete = 
            "DELETE FROM cb_language"
            . "     WHERE   idlanguage = '".$idlanguage."'"; 
        try {             
            $this->cdb->exec($sqlDelete);      
        } catch (Exception $exception) {            
            echo 'Error al eliminar un idioma en la función delete(...): '.$exception->getMessage();
            exit();
        }
    }   

Esta la ventana modal que se muestra al pulsar el botón de Eliminar, al aceptar eliminamo el registro de la tabla y actualizamos la misma:

PHP CRUD Application - Eliminar idioma

PHP CRUD Application – Eliminar idioma

¿QUÉ MÁS VAMOS A VER?

En las siguientes publicaciones iremos completando el tutorial, este será el contenido que iremos publicando:

  • PHP CRUD 2: Creación de un sistema de plantillas y desarrollo de cb_currency
  • PHP CRUD 3.1: Desarrollo de la tabla de empresas cb_enterprise y tablas relacionadas
  • PHP CRUD 3.2: Desarrollo de la tabla cliente y las tablas relacionadas
  • PHP CRUD 4: Añadimos un control de acceso
  • PHP CRUD 5: Hacemos la aplicación multiidioma y actualizamos el Look & Feel

Las publicaciones serán estas o alguna más, la presentación final de cada publicación podrá ir variando según se vaya haciendo el desarrollo, pero todas se completarán.

DOCUMENTACIÓN

  • http://php.net/manual/es/function.mysql-connect.php: documentación de la extensión obsoleta que se utilizaba en versiones antiguas de PHP para conectarse a la base de datos MySQL.
  • Wikipedia PHP: “PHP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTML en lugar de llamar a un archivo externo que procese los datos”.
  • PDO conexiones y su administración: las conexiones se establecen creando instancias de la clase base PDO, aquí se explica como hacer la conexiones persistentes.
  • Bootstrap Table: explicaciones y ejemplos para el diseño de tablas usando Bootstrap
  • Modals (modal.js): “Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.”
  • Documentación de Bootstrap para botones: aquí se explica como podemos utilizar las clases definidas por Bootstrap para el diseño de nuestros botones.

Espero que te haya sido útil, si es así compártelo en las redes sociales, gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *