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.
- EL PROYECTO
- CONFIGURACIÓN DEL ENTORNO
- DEFINIMOS LAS CONEXIÓN A MySQL CON PHP
- AÑADIMOS BOOTSTRAP PARA LA PRESENTACIÓN
- CREAMOS EL CRUD (Create Read Update Delete) PARA LOS IDIOMAS
- ¿QUÉ MÁS VAMOS A VER?
- 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, …
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:
MariaDB SQL Script para la población de 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
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
- 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:
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 – 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:
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
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:
<?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:
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:
- 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
- Copiamos la carpeta bootstrap-3.3.6/docs/assets completa, aquí hay imágenes y archivos js que se utilizan en el ejemplo.
- Este es el código que he modificado:
- 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:
- Este es el código que debemos introducir:
<!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>
PHP Project – Adaptación Bootstrap CbLanguage
PHP Project – Responsive CbLanguage
<?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
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">×</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
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:
