• Author / Uploaded
• Héctor Flórez Fernández

Citation preview

---

Informática

Aplicaciones web con

PHP

Héctor Flórez Fernández Jorge Hernández Rodríguez

Conocimiento a su alcance

Bogotá - México, D.F.

Flórez Fernández, Héctor, et al. Aplicaciones web con PHP / Héctor Flórez Fernández y Jorge Hernández Rodríguez -Bogotá : Ediciones de la U, 2021 293 p. ; 24 cm. ISBN 978-958-792-234-9 e-ISBN 978-958-792-235-6 1. Informática 2. Programación 3. Bases de datos I. Tít. 657 cd

Área: Informática Primera edición: Bogotá, Colombia, marzo de 2021 ISBN. 978-958-792-234-9 © Héctor Flórez Fernández Profesor titular en la Universidad Distrital Francisco José de Caldas, Bogotá, Colombia Email: [email protected] © Jorge Hernández Rodríguez Email: [email protected] © Ediciones de la U - Carrera 27 # 27-43 - Tel. (+57-1) 3203510 - 3203499 www.edicionesdelau.com - E-mail: [email protected] Bogotá, Colombia



Ediciones de la U es una empresa editorial que, con una visión moderna y estratégica de las tecnologías, desarrolla, promueve, distribuye y comercializa contenidos, herramientas de formación, libros técnicos y profesionales, e-books, e-learning o aprendizaje en línea, realizados por autores con amplia experiencia en las diferentes áreas profesionales e investigativas, para brindar a nuestros usuarios soluciones útiles y prácticas que contribuyan al dominio de sus campos de trabajo y a su mejor desempeño en un mundo global, cambiante y cada vez más competitivo.

Coordinación editorial: Adriana Gutiérrez M. Carátula: Ediciones de la U Impresión: DGP Editores SAS Calle 63 No. 70 D - 34, Pbx. (571) 7217756 Impreso y hecho en Colombia Printed and made in Colombia No está permitida la reproducción total o parcial de este libro, ni su tratamiento informático, ni la transmisión de ninguna forma o por cualquier medio, ya sea electrónico, mecánico, por fotocopia, por registro y otros medios, sin el permiso previo y por escrito de los titulares del Copyright.

Tabla de Contenido

Pr´ ologo 1 Introducci´ on 1.1 HTML . . . . . . . . . . . . . . . . 1.2 CSS . . . . . . . . . . . . . . . . . . 1.3 JavaScript . . . . . . . . . . . . . . 1.4 DOM . . . . . . . . . . . . . . . . . 1.5 PHP . . . . . . . . . . . . . . . . . 1.6 jQuery . . . . . . . . . . . . . . . . 1.7 Bootstrap . . . . . . . . . . . . . . 1.8 AJAX . . . . . . . . . . . . . . . . 1.9 REST . . . . . . . . . . . . . . . . . 1.10 Patr´ on Modelo Vista Controlador

xiv

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

2 Conceptos B´ asicos de Programaci´ on 2.1 Tipos de datos . . . . . . . . . . . . . . . 2.1.1 Variables . . . . . . . . . . . . . . 2.1.2 Variables constantes . . . . . . . . 2.1.3 Tipos primitivos de datos . . . . ´ 2.1.4 Ambito de las variables . . . . . . 2.1.5 Variables superglobales . . . . . . 2.2 Operadores . . . . . . . . . . . . . . . . . 2.2.1 Operadores aritm´eticos . . . . . . 2.2.2 Operadores de asignaci´on . . . . 2.2.3 Operadores l´ ogicos . . . . . . . . 2.2.4 Operadores de comparaci´on . . . 2.2.5 Operadores a nivel de bits . . . . 2.3 Estructuras de programaci´on . . . . . . . 2.3.1 Sentencias . . . . . . . . . . . . . . 2.3.2 Comentarios . . . . . . . . . . . . 2.3.3 Sentencia de impresi´on . . . . . . 2.3.4 Estructura de condici´on if . . . 2.3.5 Estructura de condici´on if else v

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . . . . . . . . .

. . . . . . . . . .

1 1 2 2 3 3 4 5 5 6 6

. . . . . . . . . . . . . . . . . .

9 9 9 10 10 11 11 12 12 12 13 13 13 14 14 14 15 15 15

Cap´ıtulo 7. Bootstrap

81

14 Este es un cuadro de alerta de color verde 15

16

17

18

Figura 7.3: Alerta con t´ıtulo con Bootstrap El siguiente c´ odigo presenta un cuadro de alerta con bot´on de cierre de color rojo, mientras que la Figura 7.4 presenta el resultado. 1 2 < html > 3 < head > 4 < meta name = " viewport " content = " width = device - width , ⤦ Ç initial - scale =1 , shrink - to - fit = no " > 5 < link rel = " stylesheet " ⤦ Ç href = " https :// stackpath . bootstrapcdn . com / ⤦ Ç bootstrap /4.4.1/ css / bootstrap . min . css " > 6 < script src = " https :// code . jquery . com / ⤦ Ç jquery -3.4.1. slim . min . js " > 7 < script src = " https :// cdn . jsdelivr . net / npm / ⤦ Ç popper . js@1 .16.0/ dist / umd / popper . min . js " > 8 < script src = " https :// stackpath . bootstrapcdn . com / ⤦ Ç bootstrap /4.4.1/ js / bootstrap . min . js " > 9

10 < body > 11 < div class = " container " > 12 < div class = " alert alert - danger " > 13 < button type = " button " class = " close " ⤦ Ç data - dismiss = " alert " aria - label = " Close " > 14 < span aria - hidden = " true " >& times ; 15

16 Este es un cuadro de alerta de color rojo 17

18

19

20

82

7.4. Contenedores de contenido

Figura 7.4: Alerta con bot´on de cierre con Bootstrap

7.4

Contenedores de contenido

Bootstrap ofrece un conjunto de estilos para el despliegue de contenedores de contenido. Dicho contenido puede ser cualquier conjunto de elementos HTML. Los estilos m´as comunes para el despliegue de contenedores son: • card que permite crear el contenedor. • card-header que permite colocar un encabezado al contenedor. • card-body que permite incluir el contenido del contenedor. • card-title que permite incluir t´ıtulos. • card-footer que permite incluir elementos al final del contenedor. El siguiente c´ odigo presenta un contenedor de contenido, mientras que la Figura 7.2 presenta el resultado. 1 2 < html > 3 < head > 4 < meta name = " viewport " content = " width = device - width , ⤦ Ç initial - scale =1 , shrink - to - fit = no " > 5 < link rel = " stylesheet " ⤦ Ç href = " https :// stackpath . bootstrapcdn . com / ⤦ Ç bootstrap /4.4.1/ css / bootstrap . min . css " > 6 < script src = " https :// code . jquery . com / ⤦ Ç jquery -3.4.1. slim . min . js " > 7 < script src = " https :// cdn . jsdelivr . net / npm / ⤦ Ç popper . js@1 .16.0/ dist / umd / popper . min . js " > 8 < script src = " https :// stackpath . bootstrapcdn . com / ⤦ Ç bootstrap /4.4.1/ js / bootstrap . min . js " > 9

10 < body > 11 < div class = " container " > 12 < div class = " card text - white bg - info " > 13 < div class = " card - header " > Contenedor 14 < div class = " card - body " > 15 < h5 class = " card - title " > Descripcion 16

Este es un contenedor ⤦ Ç de contenido con color de texto ⤦ Ç blanco y color de fondo azul .

Cap´ıtulo 7. Bootstrap

17 18 19 20 21 22

83

< div class = " card - footer " > Texto final del ⤦ Ç contenedor



Figura 7.5: Contenedor de contenido con Bootstrap

7.5

Formularios

Bootstrap tiene varios estilos para el despliegue de formularios. Los m´as comunes son form-control que permite asignar estilo a elementos de entrada de datos, form-group que permite agrupar varios elementos HTML y form-check que permite asignar estilo a los cuadros de selecci´ on. Con estos estilos, Booststrap despliega el formulario Responsive permitiendo adaptarse a cualquier dispositivo. Adem´as, para los botones de formularios, Bootstrap provee el estilo btn el cual puede acompa˜ narse con estilos de color como btn-primary, btn-secondary, btn-success, btn-warning, btn-info, btn-dark. Otro estilo para formularios es input-group e input-group-text que permiten agregar un texto fijo al lado de un elemento de entrada de datos del formulario. El siguiente c´odigo presenta un formulario, mientras que la Figura 7.6 presenta el resultado. 1 2 < html > 3 < head > 4 < meta name = " viewport " content = " width = device - width , ⤦ Ç initial - scale =1 , shrink - to - fit = no " > 5 < link rel = " stylesheet " ⤦ Ç href = " https :// stackpath . bootstrapcdn . com / ⤦ Ç bootstrap /4.4.1/ css / bootstrap . min . css " > 6 < script src = " https :// code . jquery . com / ⤦ Ç jquery -3.4.1. slim . min . js " >

84

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

7.5. Formularios

< script src = " https :// cdn . jsdelivr . net / npm / ⤦ Ç popper . js@1 .16.0/ dist / umd / popper . min . js " > < script src = " https :// stackpath . bootstrapcdn . com / ⤦ Ç bootstrap /4.4.1/ js / bootstrap . min . js " >

< body > < div class = " container " >
< form > < div class = " form - group " > < label > Nombre < input type = " text " class = " form - control " >

< div class = " form - group " > < label > Apellido < input type = " text " class = " form - control " >

< div class = " form - group " > < label > Correo < div class = " input - group " > < input type = " email " class = " form - control " > < span class = " input - group - text " > ⤦ Ç @dominio . com

< div class = " form - group " > < label > Genero < div class = " form - check " > < input class = " form - check - input " ⤦ Ç type = " radio " > < label class = " form - check - label " > ⤦ Ç Femenino

< div class = " form - check " > < input class = " form - check - input " ⤦ Ç type = " radio " > < label class = " form - check - label " > ⤦ Ç Masculino

< div class = " form - group " > < label > Ciudad < select ⤦ Ç class = " form - control " > < option > Seleccione

Cap´ıtulo 7. Bootstrap

45 46 47 48 49

85

< button type = " submit " class = " btn btn - primary " > ⤦ Ç Enviar



Figura 7.6: Formulario con Bootstrap

7.6

Barras de men´ u

Bootstrap permite desplegar barras de men´ u Responsive mediante el estilo navbar, el cual debe incluir el estilo navbar-expand-sm, navbar-expand-md, navbar-expand-lg o navbar-expand-xl que establecen el mecanismo de colapso responsive. Las barras de men´ u requieren de los siguientes estilos adicionales: • navbar-brand, el cual se usa para colocar el nombre del proyecto. • navbar-nav, el cual se usa para incluir una barra de men´ u. • navbar-toggler, el cual se usa para incluir elementos colapsibles. • form-inline, el cual se usa para incluir controles.

Cap´ıtulo 10. Acceso a Bases de Datos

20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

127

$productos = $producto -> ⤦ Ç consultarTodo () ; foreach ( $productos as $p ) { echo " " ; echo " " . $p -> getIdProducto () ⤦ Ç . " " ; echo " " . $p -> getNombre () . ⤦ Ç " " ; echo " " . $p -> getCantidad () . ⤦ Ç " " ; echo " " . $p -> getPrecio () . ⤦ Ç " " ; echo " " ; } ?>





La Figura 10.5 presenta el resultado de la consulta accediendo directamente mediante la URL /index.php?pid=presentacion/producto/consultarProducto.

Figura 10.5: Resultado de consulta

10.3.3

Actualizaci´ on de datos

Para actualizar datos de la base de datos desde una aplicaci´on PHP, primero es necesario consultar los datos que se desean actualizaci´on. Normalmente, el servicio de actualizar se ofrece en el servicio de consulta. La siguiente implementaci´on es una segunda versi´ on

128

10.3. Aplicaci´on Web en PHP con acceso a base de datos

del servicio de consulta que incluye un icono, el cual ofrece el servicio de actualizaci´on de producto. As´ı, por cada producto desplegado en la consulta, se presenta un icono de actualizaci´on, de tal forma que el usuario puede hacer uso de dicho servicio con un solo clic.

1 < div class = " container - fluid " > 2 < div class = " card " > 3 < div class = " card - header " > 4 < h4 class = " card - title " > Consultar Producto 5

6 < div class = " card - body " > 7 < div class = " table - responsive " > 8 < table class = " table table - striped table - hover " > 9 < thead > 10 11 Id Producto 12 Nombre 13 Cantidad 14 Precio 15

16

17

18