PROYECTO PHP CRUD CON MYSQL – PHP

CRUD (1)

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.

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 Las empresas tendrán definido inicialmente: idioma, país

empresa tendrá sus clientes. y moneda, así como otros campos básicos propios.

cb_customer Tabla general de cliente, donde Tendrán definido inicialmente: idioma, país, direcciones,

se almacenarán los clientes de empresas, métodos de pago y moneda, así como otros

las diferentes empresas. campos básicos propios.

cb_addresses Tabla de registro de las Registro para asociar las direcciones al cliente, cada

direcciones, se asocian aquí las cliente tendrá un número ilimitado de direcciones con

direcciones que tienen un cb_address relacionado mediante cb_addresses (es

cliente. básicamente una tabla relacional)

cb_address Tabla de dirección donde se Tabla de dirección que tendrá los campos generales de
 guardan los datos de la una dirección, así como números de teléfono,

dirección en sí. 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 Para cada país se especificará la moneda y el idioma

en la aplicación, se podrá utilizado por defecto.

relacionar con múltiples tablas.

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, …
 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:

MariaDB SQL - Creación de las tablas

 1 archivo (s)  9.19 KB

DESCARGAR

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

MariaDB SQL Script para la población de la base de datos Customerdb

 1 archivo (s)  126.64 KB

DESCARGAR

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

Instalamos Apache

Instalamos Apache sino lo tenemos instalado en Ubuntu utilizamos:

?
1 sudo apt -get update

2 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:

?
1 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:

?
1 sudo mysql_install_db

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

Instalamos PHP

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

?
1 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:

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

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

?
1 <IfModule mod_dir.c>

2     DirectoryIndex index.php index.html index.cgi index.pl  index.xhtml index.htm

3 </IfModule>

Reiniciamos Apache para actualizar los cambios:

?
1 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

 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

 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

 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

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:

?
1 CREATE DATABASE customerdb;

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

?
1 CREATE USER xulescode@localhost IDENTIFIED BY 'xulescode'
Damos todos los privilegios al usuario xulescode sobre las base de datos customerdb:

?
1 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 – 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

Creamos las tablas y añadimos los datos

Descarga el script con las tablas:

MariaDB SQL - Creación de las tablas

 1 archivo (s)  9.19 KB

DESCARGAR

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

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

MariaDB SQL Script para la población de la base de datos Customerdb

 1 archivo (s)  126.64 KB

DESCARGAR

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

 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

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

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:

?
1 <?php

2  

3 use PDO;

4  
/**
5
 * En la clase <b>DatabaseConnect</b> vamos a incluir los métodos que utilizamos para crear y
6
 * administrar la conexión a la base de datos.
7
 * In the "Database Connect" class we will include the methods we use to create and
8
 * manage the connection to the database.
9  * @author Xules You can follow me on my website http://www.codigoxules.org/en

10 * Puedes seguirme en mi web http://www.codigoxules.org).

11 */

12class DatabaseConnect {

13     

14    /**
     * Método con los valores generales para nuestra aplicación.
15
     * Method with the default values for our application.
16
     * @return type PDO devuelve un objeto PDO resultado de la conexión.
17
     *  (object returns a result of the connection).
18
     */
19    public function dbConnectSimple(){       

20        $dbsystem='mysql';

21        $host='127.0.0.1';

22        $dbname='customerdb';

23        $username='xulescode';
        $passwd='xulescode';
24
        return $this->dbConnect($dbsystem, $host, $dbname, $username, $passwd);
25
    }
26
    /**
27
     * Método para definir la conexión a la base de datos mediante parámetros
28

29

30
     * devuelve un objeto PDO con la conexión realizada.
31
     * Method to define the connection to the database using PDO parameters returns an object
32
     * @param type $dbsystem tipo de base de datos, por ejemplo: mysql, postgresql (database t
33     * @param type $host el host ya sea el nombre correspondiente o la IP directamente (the ho

34     * @param type $dbname el nombre de la base de datos a la que nos queremos conectar (the n

35     * @param type $username nombre del usuario para la conexión a la base de datos especifica

36     * @param type $passwd contraseña asociada la usuario que definimos para la conexión (pass

37     * @return type PDO devuelve un objeto PDO resultado de la conexión (PDO object returns a
     */
38
    public function dbConnect($dbsystem, $host, $dbname, $username, $passwd){             
39
        $dsn=$dbsystem.':host='.$host.';dbname='.$dbname;              
40
        try {         
41
            $connection = new PDO($dsn, $username, $passwd);
42            $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

43        } catch (PDOException $pdoExcetion) {

44            $connection = null;

45            echo 'Error al establecer la conexión: '.$pdoExcetion;

46            exit();
        }
47
        echo 'Conectado a la base de datos: '.$dbname;
48
        return $connection;       
49
    }
50

51

52

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:

?
1 <!DOCTYPE html>
2
 
3
<html>
4
    <head>
5
        <meta charset="UTF-8">
6
        <title>PHP CRUD MySQL</title>
7     </head>
8     <body>

9         <h2 class="sub-header">Idiomas</h2>

10         <?php

11             include './database/DatabaseConnect.php';

12  
            $dConnect = new DatabaseConnect;
13
            $cdb = $dConnect->dbConnectSimple();
14
        ?>
15
 
16
    </body>
17
</html>
18

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:

?
1 $query = "SELECT * FROM cb_language;";

2     $statement = $cdb->prepare($query);

3     $result = $statement->execute();

4     $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:

?
1 <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:

?
1 <!DOCTYPE html>

2 <html>

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

10  
11             $dConnect = new DatabaseConnect;

12             $cdb = $dConnect->dbConnectSimple();

        ?>   
13
             
14
        <table>           
15
                <tr>
16
                    <th>LANGUAGE</th>
17
                    <th>NAME</th>
18                     <th>IS ACTIVE?</th>
19                     <th>LANGUAGE ISO</th>
20                     <th>COUNTRY CODE</th>

21                     <th>IS BASE?</th>

22                     <th>IS SYSTEM LANGUAGE?</th>

                    <th>ACCIONES</th>
23
24                 </tr>          

25                 

26         <?php   

27             try {

                $query = "SELECT * FROM cb_language;";

28
                $statement = $cdb->prepare($query);
29
                $result = $statement->execute();
30
                $rows = $statement->fetchAll(\PDO::FETCH_OBJ);
31
 
32
                echo '<br />';
33                 foreach ($rows as $row) {
34                     ?>
35                     <tr>

36                         <td><?php print($row->idlanguage); ?></td>

37                         <td><?php print($row->namelanguage); ?></td>

                        <td><?php print($row->isactive); ?></td>

38
                        <td><?php print($row->languageiso); ?></td>
39
                        <td><?php print($row->countrycode); ?></td>
40
                        <td><?php print($row->isbaselanguage); ?></td>
41
                        <td><?php print($row->issystemlanguage); ?></td>
42
                    </tr>   
43         <?php
44                 }

45             } catch (Exception $exception) {

46                 echo 'Error hacer la consulta: ' . $exception;

47             }

            ?> 
48
        </table>
49
    </body>
50
</html>   
51

52

53

54
55

Este es el resultado final que veremos en nuestro navegador:

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

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:

?
1 <!DOCTYPE html>

2 <html lang="en">

    <head>
3
        <meta charset="utf-8">
4
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
        <meta name="viewport" content="width=device-width, initial-scale=1">
6         <!-- The above 3 meta tags *must* come first in the head; any other head conten

7         <meta name="description" content="">

        <meta name="author" content="">

8
        <link rel="icon" href="favicon.ico">
9
 
10
        <title>PHP Customerdb - Dashboard Template for Bootstrap</title>
11
 
12
        <!-- Bootstrap core CSS -->
13
        <link href="css/bootstrap.min.css" rel="stylesheet">
14
 
15         <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

16         <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

17  

18         <!-- Custom styles for this template -->

19         <link href="css/dashboard.css" rel="stylesheet">

20  

21         <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"><
22
        <script src="assets/js/ie-emulation-modes-warning.js"></script>
23
 
24
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media quer
25
        <!--[if lt IE 9]>
26
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></scrip
27           <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

28         <![endif]-->

29     </head>

30  

31     <body>

32  

33         <nav class="navbar navbar-inverse navbar-fixed-top">

            <div class="container-fluid">
34
                <div class="navbar-header">
35
                    <button type="button" class="navbar-toggle collapsed" data-toggle="c
36
                            data-target="#navbar" aria-expanded="false" aria-controls="n
37                         <span class="sr-only">Toggle navigation</span>

38                         <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
39
                        <span class="icon-bar"></span>
40
                    </button>
41
                    <a class="navbar-brand" href="#">PHP Customerdb</a>
42
                </div>
43                 <div id="navbar" class="navbar-collapse collapse">

44                     <ul class="nav navbar-nav navbar-right">

45                         <li><a href="#">Dashboard</a></li>            

46                         <li><a href="#">Ayuda</a></li>

47                         <li><a href="http://www.codigoxules.org" target="blanck">Código

48                     </ul>
                    <form class="navbar-form navbar-right">
49
                        <input type="text" class="form-control" placeholder="Search...">
50
                    </form>
51
                </div>
52
            </div>
53         </nav>

54  

55         <div class="container-fluid">

56             <div class="row">

57                 <div class="col-sm-3 col-md-2 sidebar">

58                     <ul class="nav nav-sidebar">

                        <li class="active"><a href="#">Idiomas <span class="sr-only">(cu
59
                        <li><a href="">Monedas</a></li>
60
                        <li><a href="">Países</a></li>         
61
                    </ul>
62
                    <ul class="nav nav-sidebar">           
63
                        <li><a href="">Empresa</a></li>
64                         <li><a href="">Clientes</a></li>

65                     </ul>

66                     <ul class="nav nav-sidebar">           

67                         <li><a href="#">Informes</a></li>
68                         <li><a href="#">Análisis</a></li> 

69                         <li><a href="">Ayuda</a></li>
                    </ul>
70
                </div>
71
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
72
                    <h1 class="page-header">Dashboard</h1>
73
 
74
                    <div class="row placeholders">
75                         <div class="col-xs-6 col-sm-3 placeholder">

76                             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH
alt="Generic placeholder thumbnail">
77
                            <h4>Empresas</h4>
78
                            <span class="text-muted">Empresas definidas</span>
79
                        </div>
80
                        <div class="col-xs-6 col-sm-3 placeholder">
81                             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH
alt="Generic placeholder thumbnail">
82
                            <h4>Clientes</h4>
83
                            <span class="text-muted">Clientes por empresa</span>
84
                        </div>
85
                        <div class="col-xs-6 col-sm-3 placeholder">
86
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH
87 alt="Generic placeholder thumbnail">
                            <h4>Administración</h4>
88
                            <span class="text-muted">Administración de tablas auxiliare
89
                        </div>
90
                        <div class="col-xs-6 col-sm-3 placeholder">
91
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH
92 alt="Generic placeholder thumbnail">

93                             <h4>Ayuda</h4>
                            <span class="text-muted">Documentación de ayuda</span>
94
                        </div>
95
                    </div>
96
                     
97
                    <h2 class="sub-header">Idiomas</h2>               
98
                     
 99

100

101

102

103
                    <!--   
104
                            DESARROLLO PHP YA REALIZADO
105
                    -->       
106
                     
107
                     
108
                </div>
109
            </div>
110
        </div>
111
 
112        <!-- Bootstrap core JavaScript

113        ================================================== -->

114        <!-- Placed at the end of the document so the pages load faster -->

115        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

116        <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.m

        <script src="js/bootstrap.min.js"></script>
117
        <!-- Just to make our placeholder images work. Don't actually copy the next lin
118
        <script src="assets/js/vendor/holder.min.js"></script>
119
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
120
        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
121
         
122
    </body>
123</html>

124

125

126

127

128

4. 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:
PHP Project – Adaptación Bootstrap CbLanguage
 PHP Project – Responsive CbLanguage

5. Este es el código que debemos introducir:

?
1 <?php

2             include './database/DatabaseConnect.php';

3  
            $dConnect = new DatabaseConnect;
4
            $cdb = $dConnect->dbConnectSimple();
5
        ?>   
6
             
7
        <table>           
8
                <tr>
9                     <th>LANGUAGE</th>
10                     <th>NAME</th>
11                     <th>IS ACTIVE?</th>

12                     <th>LANGUAGE ISO</th>

13                     <th>COUNTRY CODE</th>

                    <th>IS BASE?</th>
14
                    <th>IS SYSTEM LANGUAGE?</th>
15
                    <th>ACCIONES</th>
16
                </tr>          
17
                
18
        <?php   
19             try {
20                 $query = "SELECT * FROM cb_language;";
21                 $statement = $cdb->prepare($query);

22                 $result = $statement->execute();

23                 $rows = $statement->fetchAll(\PDO::FETCH_OBJ);

24  
                echo '<br />';
25
                foreach ($rows as $row) {
26
                    ?>
27
                    <tr>
28
                        <td><?php print($row->idlanguage); ?></td>
29
                        <td><?php print($row->namelanguage); ?></td>
30                         <td><?php print($row->isactive); ?></td>
31                         <td><?php print($row->languageiso); ?></td>
 32

33

34                         <td><?php print($row->countrycode); ?></td>

35                         <td><?php print($row->isbaselanguage); ?></td>

                        <td><?php print($row->issystemlanguage); ?></td>

36
                    </tr>   
37
        <?php
38
                }
39
            } catch (Exception $exception) {
40                 echo 'Error hacer la consulta: ' . $exception;
41             }
42             ?> 

43         </table>

44

45

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:

?
1 <form  role="form" name="formListCbLanguage"

2     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:

?
1 <!-- Código PHP CRUD para presentar los idiomas. -->

2                     <h2 class="sub-header">Idiomas</h2>               

3   

                    <?php
4
                        include './database/DatabaseConnect.php';
5
                         
6
                        $dConnect = new DatabaseConnect;
7
                        $cdb = $dConnect->dbConnectSimple();          
8
                             
9
                    ?>   
10
             
11
                    <div class="table-responsive">
12                         <table class="table table-striped">
13                             <thead>

14                                 <tr>

15                                     <th>LANGUAGE</th>

                                    <th>NAME</th>
16
                                    <th>IS ACTIVE?</th>
17
                                    <th>LANGUAGE ISO</th>
18
                                    <th>COUNTRY CODE</th>
19
                                    <th>IS BASE?</th>
20
                                    <th>IS SYSTEM LANGUAGE?</th>
21                                     <th>ACCIONES</th>
22                                 </tr>

23                             </thead>

24                             <tbody>

                                <form role="form" name="formListCbLanguage" method="post" ac

25
                                <?php
26
                                try {
27
                                    $query = "SELECT * FROM cb_language;";
28
29

30

31                                     $statement = $cdb->prepare($query);
32                                     $result = $statement->execute();

33                                     $rows = $statement->fetchAll(\PDO::FETCH_OBJ);        

34                                      

35                                     foreach ($rows as $row) {

36                                         ?>

                                        <tr>
37
                                            <td><?php print($row->idlanguage); ?></td>
38
                                            <td><?php print($row->namelanguage); ?></td>
39
                                            <td><?php print($row->isactive); ?></td>
40
                                            <td><?php print($row->languageiso); ?></td>
41                                             <td><?php print($row->countrycode); ?></td>
42                                             <td><?php print($row->isbaselanguage); ?></td>

43                                             <td><?php print($row->issystemlanguage); ?></t

44                                             <td>BOTONES DE ACCIONES</td>

45                                             </tr>     

46                                          

                                    <?php
47
                                    }
48
                                } catch (Exception $exception) {
49
                                    echo 'Error hacer la consulta: ' . $exception;
50
                                }
51                                 ?> 
52                                    
53                                 </form>       
54                             </tbody>     

55                         </table>                   

56                     </div>

                    <!-- Fin código PHP CRUD -->

57

58

59
Este es el resultado:

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:

?
1 <?php

2  

3 /**

 * CbLanguageController clase donde agrupamos todas las acciones

4
 * CRUD (Create Read Update Delete), y otras utilidades adicionales para la
5
 * tabla de la base de datos <b>cb_language</b>.
6
 * CbLanguageController class where we group all actions CRUD (Create Read Update Delete),
7

8  * and additional utilities for database table data <b>cb_language</b>.

9  * @author Xules Puedes seguirme en mi web http://www.codigoxules.org).
10  * You can follow me on my website http://www.codigoxules.org/en

11  */

12 class CbLanguageController {

    var $cdb = null;

13
    /**
14
     * Devolvemos todos los resultados de la consulta sobre cb_language.
15
     * We return all the results of the query on cb_language.
16
     */
17     public function readAll(){
18         $query = "SELECT * FROM cb_language;";
19         $statement = $this->cdb->prepare($query);

20         $statement->execute();

21         $rows = $statement->fetchAll(\PDO::FETCH_OBJ);

        return $rows;        
22
    }  
23

24

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

instanciamos CbLanguageController:

?
1 include './database/CbLanguageController.php';

2  
3 $cbLanguageController = new CbLanguageController();

4 $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:

?
1 $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:

?
1 <!-- Añadimos un botón para el diálogo modal -->
2     <button type="button"

3             class="btn btn-lg btn-primary"

4             data-toggle="modal"

5             data-target="#myModal"

            onclick="newCbLanguage()">NUEVO</button>
6

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():

?
1 <script>

2         /**

         * Abrimos la ventana modal para crear un nuevo elemento.

3
         * We open a modal window to create a new element.
4
         * @returns {undefined}
5
         */
6
        function newCbLanguage(){
7
            $('#myModal').on('shown.bs.modal', function () {
8
                $('#myInput').focus()
9
            });
10
        }
11     </script>
12

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:

?
1 <!--

2     Create - Read - Update   

    Creamos una ventana Modal que utilizaremos para crear un nuevo idioma, actualizarlo o most
3
    We create a modal window used to create a new language, update or display.-->
4
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
5
    <div class="modal-dialog" role="document">
6
        <div class="modal-content">
7             <div class="modal-header">

8                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><spa

9                 <h4 class="modal-title" id="myModalLabel">Creación de idioma</h4>

10            </div>

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

                <div class="modal-body">                                   
12
                    <div class="input-group">
13
                        <label for="idlanguage">Idioma</label>
14
                        <input type="text" class="form-control" id="idlanguage" name="idlanguage
15
                        <small class="text-muted">Lo utilizamos como ID y se forma con los iso
16
                    </div>
17                    <div class="input-group">

18                        <label for="namelanguage">Nombre</label>

19                        <input type="text" class="form-control" id="namelanguage" name="namelang

20                    </div>
21                    <div class="input-group">

22                        <label for="isactive">Activo</label>
                        <input type="text" class="form-control" id="isactive" name="isactive" pl
23
                        <small class="text-muted">Usa el valor Y si está activo y N en caso co
24
                    </div>                         
25
                    <div class="input-group">
26
                        <label for="languageiso">Iso</label>
27                        <input type="text" class="form-control" id="languageiso" name="languagei

28                    </div>

29                    <div class="input-group">

30                        <label for="countrycode">Código País</label>

31                        <input type="text" class="form-control" id="countrycode" name="countryco

32                    </div>
                    <div class="input-group">
33
                        <label for="isbaselanguage">Idioma base</label>
34
                        <input type="text" class="form-control" id="isbaselanguage" name="isbase
35
                        <small class="text-muted">Usa el valor Y si está activo y N en caso co
36
                    </div>
37                    <div class="input-group">

38                        <label for="issystemlanguage">Idioma sistema</label>

39                        <input type="text" class="form-control" id="issystemlanguage" name="issy

addon2">
40
                        <small class="text-muted">Usa el valor Y si está activo y N en caso co
41
                    </div>
42
                </div>
43                <div class="modal-footer">

44                    <button id="save-language" name="save-language" type="submit" class="btn btn

45                     

46                    <button id="cancel"type="button" class="btn btn-default" data-dismiss="moda

47                </div>

48            </form>
        </div><!-- /.modal-content -->
49
    </div><!-- /.modal-dialog -->
50
</div><!-- /.modal -->     
51
52

53

54

55

Este es el resultado del formulario modal:

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

?
1
<?php
2
            include './database/DatabaseConnect.php';
3
            include './database/CbLanguageController.php';
4
             
5
            $dConnect = new DatabaseConnect;
6
            $cdb = $dConnect->dbConnectSimple();
7
             
8             $cbLanguageController = new CbLanguageController();                            
9             $cbLanguageController->cdb = $cdb;   
10              
11             if (isset($_POST["save-language"]) ) { 

12                 $idlanguage = $_POST['idlanguage'];

13                 $namelanguage = $_POST['namelanguage'];

14                 $isactive  = $_POST['isactive'];

                $languageiso = $_POST['languageiso'];
15
                $countrycode = $_POST['countrycode'];
16
                $isbaselanguage = $_POST['isbaselanguage'];
17
                $issystemlanguage = $_POST['issystemlanguage'];
18
                $cbLanguageController->create($idlanguage, $namelanguage, $isactive, $lang
19
            }
20
             
21
             
22         ?>
23

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:
?
1

2 /**

3  * Creamos un nuevo idioma con los parámetros pasados.

 * We create a new language with parameters .
4
 * @param type $idlanguage
5
 * @param type $namelanguage
6
 * @param type $isactive
7
 * @param type $languageiso
8  * @param type $countrycode

9  * @param type $isbaselanguage

10 * @param type $issystemlanguage

11 */

12function create($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $isbaselang

    $sqlInsert = "INSERT INTO cb_language(idlanguage, namelanguage, isactive, languageiso, cou
13
             . "    VALUES ('".$idlanguage."', '".$namelanguage."', '".$isactive."', '".$langu
14
    try {            
15
        $this->cdb->exec($sqlInsert);     
16
    } catch (PDOException $pdoException) {           
17
        echo 'Error crear un nuevo elemento cb_language en create(...): '.$pdoException->getMe
18        exit();

19    }

20}

21

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

 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:

?
1 <button id="see-language" name="see-language"type="button" class="btn btn-success"

2         data-toggle="modal"

        data-target="#myModal"
3
        onclick="openCbLanguage('see',
4
5                     '<?php print($row->idlanguage); ?>', '<?php print($row->namelanguage);
6                     '<?php print($row->isactive); ?>', '<?php print($row->languageiso); ?>',

7                     '<?php print($row->countrycode); ?>', '<?php print($row->isbaselanguage)

8                     '<?php print($row->issystemlanguage); ?>')">

    Ver</button>
9

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

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:

?
1 <script>

2         /**

         * Abrimos la ventana modal para crear un nuevo elemento.

3
         * We open a modal window to create a new element.
4
         * @returns {undefined}
5
         */
6
        function newCbLanguage(){                
7             openCbLanguage('new', null, null, null, null, null, null, null);
8         }

9         /**

10          * Abrimos la ventana modal teniendo en cuenta la acción (action) para

11          * utilizarla como creación (Create), lectura (Read) o actualización (Update).

         * We opened the modal window considering the action (action) to use
12
         * as creation (Create), reading (Read) or upgrade (Update).
13
         * @param {type} action las acciones que utilizamos son : new para Create, see par
14
         *      Actions we use are :  new for Create, see for Read and edit for Update.
15
         * @param {type} idlanguage
16          * @param {type} namelanguage
17          * @param {type} isactive

18          * @param {type} languageiso

19          * @param {type} countrycode

20          * @param {type} isbaselanguage

         * @param {type} issystemlanguage

21
         * @returns {undefined}
22
         */
23
        function openCbLanguage(action, idlanguage, namelanguage, isactive, languageiso, c
24
            document.formCbLanguage.idlanguage.value = idlanguage;
25             document.formCbLanguage.namelanguage.value = namelanguage;
26             document.formCbLanguage.isactive.value = isactive;
27             document.formCbLanguage.languageiso.value = languageiso;

28             document.formCbLanguage.countrycode.value = countrycode;

            document.formCbLanguage.isbaselanguage.value = isbaselanguage;
29
            document.formCbLanguage.issystemlanguage.value = issystemlanguage;
30
             
31
            document.formCbLanguage.idlanguage.disabled = (action === 'see')?true:false;  
32
            document.formCbLanguage.namelanguage.disabled = (action === 'see')?true:false;
33
            document.formCbLanguage.isactive.disabled = (action === 'see')?true:false;
34             document.formCbLanguage.languageiso.disabled = (action === 'see')?true:false;
35             document.formCbLanguage.countrycode.disabled = (action === 'see')?true:false;

36             document.formCbLanguage.isbaselanguage.disabled = (action === 'see')?true:fals

37             document.formCbLanguage.issystemlanguage.disabled = (action === 'see')?true:fa

38              

39             $('#myModal').on('shown.bs.modal', function () {

                var modal = $(this);

40
                if (action === 'new'){                           
41
                    modal.find('.modal-title').text('Creación de idioma'); 
42
                    $('#save-language').show();
43
                    $('#update-language').hide();               
44                 }else if (action === 'edit'){
45                     modal.find('.modal-title').text('Actualizar idioma');
46                     $('#save-language').hide();                   

47                     $('#update-language').show();  

48                 }else if (action === 'see'){

                    modal.find('.modal-title').text('Ver idioma');
49
                    $('#save-language').hide();  
50
                    $('#update-language').hide();  
51
                }
52
                $('#idlanguage').focus()
53
             
54
            });
55         }       
56          
57     </script>
58

59

60

61

62

63

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

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:

?
1
<button id="edit-language" name="edit-language" type="button"
2
            class="btn btn-primary"
3             data-toggle="modal"
4             data-target="#myModal"

5             onclick="openCbLanguage('edit',

6                         '<?php print($row->idlanguage); ?>', '<?php print($row->namelangua

7                         '<?php print($row->isactive); ?>', '<?php print($row->languageiso);

                        '<?php print($row->countrycode); ?>', '<?php print($row->isbaselang

8
                        '<?php print($row->issystemlanguage); ?>')">
9
        Editar</button>
10

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;

?
1
if (isset($_POST["save-language"]) || isset($_POST["update-language"]) ) { 
2
        $idlanguage = $_POST['idlanguage'];
3
        $namelanguage = $_POST['namelanguage'];
4
        $isactive  = $_POST['isactive'];
5         $languageiso = $_POST['languageiso'];
6         $countrycode = $_POST['countrycode'];
7         $isbaselanguage = $_POST['isbaselanguage'];

8         $issystemlanguage = $_POST['issystemlanguage'];

9         if (isset($_POST["save-language"])){

10             $cbLanguageController->create($idlanguage, $namelanguage, $isactive, $language

        }else{
11
            $cbLanguageController->update($idlanguage, $namelanguage, $isactive, $language
12
        }
13
    }
14
Y por último, implementamos la función update(…) dentro de la clase
controladora CbLanguageController:

?
1

2 /**
3  * Actualizamos los valores del idioma que pasamos en el parámetro $idlanguage.
4  * We update the values of the language we passed on the $idlanguage parameter.

5  * @param type $idlanguage

6  * @param type $namelanguage

 * @param type $isactive

7
 * @param type $languageiso
8
 * @param type $countrycode
9
 * @param type $isbaselanguage
10
 * @param type $issystemlanguage
11  */
12 public function update($idlanguage, $namelanguage, $isactive, $languageiso, $countrycode, $
13     $sqlUpdate = "UPDATE cb_language "

14             . "     SET namelanguage    = '".$namelanguage."', "

15             . "         isactive        = '".$isactive."', "

            . "         languageiso     = '".$languageiso."', "

16
            . "         countrycode     = '".$countrycode."', "
17
            . "         isbaselanguage  = '".$isbaselanguage."', "
18
            . "         issystemlanguage = '".$issystemlanguage."'"
19
            . "     WHERE   idlanguage  = '".$idlanguage."'";
20     try {                        
21         $this->cdb->exec($sqlUpdate);     
22     } catch (PDOException $pdoException) {           

23         echo 'Error actualizar un nuevo elemento cb_language en update(...): '.$pdoExcepti

24         exit();

    }
25
}
26

27
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:

?
1 <!-- Modal DELETE -->

2         <div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-labelledby="

            <div class="modal-dialog" role="document">
3
                <div class="modal-content">
4
                    <div class="modal-header">
5
                        <button type="button" class="close" data-dismiss="modal" aria-label="Clo
6
                        <h4 class="modal-title" id="myModalDeleteLabel">Eliminación de idioma</
7                     </div>

8                     <form role="form" name="formDeleteCbLanguage" method="post" action="index.ph

9                         <div class="modal-body">                                   

10                                <div class="input-group">

11                                    <label for="idlanguage">¿Se va a eliminar el registro del

12                                </div>      
                                <div class="input-group">
13
                                    <label for="idlanguage">Idioma</label>
14
                                    <input type="text" readonly class="form-control" id="idlang
15>                                       

16                                </div>

17                        </div>
                        <div class="modal-footer">
18
                                <button id="delete-language-select" name="delete-language-selec
19primary">Aceptar</button>                                       

20                                <button id="cancel"type="button" class="btn btn-default" data-d

21                        </div>

22                    </form>

23                </div><!-- /.modal-content -->

            </div><!-- /.modal-dialog -->
24
        </div><!-- /.modal -->  
25

26

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

?
1 <button id="delete-language-modal" name="delete-language-modal" type="button"
2                                 class="btn btn-danger"

3                                 data-toggle="modal"

4                                 data-target="#myModalDelete"

                                onclick="deleteCbLanguage('<?php print($row->idlanguage); ?
5

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.

?
1
/**
2
     * Para borrar el idioma seleccionado abrimos una ventana modal para
3
     * que el usuario confirme si quiere eliminar el registro.
4
     * To delete the selected language we open a modal window for
5      * the user to confirm whether to delete the record.
6      * @param {type} idlanguage

7      * @returns {undefined}

8      */

    function deleteCbLanguage(idlanguage){    
9
        document.formDeleteCbLanguage.idlanguagedelete.value = idlanguage;               
10
         
11
        $('#myModalDelete').on('shown.bs.modal', function () {
12
            $('#myInput').focus()
13
        });
14
    }
15

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:
?
1 if (isset($_POST["delete-language-select"]) ) {

2         $idlanguageselect = $_POST['idlanguagedelete'];

3         $cbLanguageController->delete($idlanguageselect);

4 }

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

?
1
/**
2
 * Eliminamos el idioma que pasamos como parámetro.
3
 * We remove the language that we as a parameter.
4
 * @param type $idlanguage
5
 */
6 public function delete($idlanguage){
7     $sqlDelete =

8         "DELETE FROM cb_language"

9         . "     WHERE   idlanguage = '".$idlanguage."'";

10     try {            

        $this->cdb->exec($sqlDelete);     
11
    } catch (Exception $exception) {           
12
        echo 'Error al eliminar un idioma en la función delete(...): '.$exception->getMess
13
        exit();
14
    }
15 }  
16

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

¿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.

https://codigoxules.org/proyecto-php-crud-con-mysql-php-crud-1/