363n PHP Y DESARROLLO WEB.ppt) - castro …€¦ · sintácticas y semánticas que definen su...

Proyecto “WifiCloudCan – eCastro21”

CURSO:

Introducción a la programación en HTML - PHP y al Desarrollo Web

INDICE

� Introducción

� Lenguaje de etiquetas HTML

�Herramientas necesarias para diseñar una página Web con HTML

�Mi primera página Web

INDICE

� Estructura de una pagina Web

�Hojas de Estilo ( CSS )

� Lenguaje PHP

� Esqueleto de la página inicial WifiCloudCan

- Index. PHP

- Procesos. PHP

- Inicio. PHP

INDICE

- Ejemplo de Hoja de Estilos

( wificloudcan. CSS )

- Pie. PHP

- Menus. PHP

Bases de Datos (mySQL)

INTRODUCCIÓN:

� Este curso pretende enseñar la utilización de las herramientas necesarias para poder diseñar páginas web sencillas.

� Y también pretende una introducción en el uso del lenguaje de marcado web (HTML) ,del lenguaje de programación web (PHP) y el uso de las hojas de estilo (CSS).

INTRODUCCIÓN:

� Estas herramientas son:

- un lenguaje de marcado web basado en etiquetas, llamado HTML

- un editor de textos (ej. bloc de notas, word, etc…)

- un navegador Web (ej. Google Chrome, Internet Explorer, Firefox, etc…)

INTRODUCCIÓN:

� Y además de estas herramientas básicas, veremos:

- la utilización de un lenguaje de programación llamado PHP, que permite la generación dinámica de contenidos en un servidor web

- la utilización de hojas de estilo (CSS) que darán forma a la página web que desarrollemos

INTRODUCCIÓN:

� Conceptos Básicos en Informática

- Programa:

Un programa informático es un conjunto de

instrucciones que una vez ejecutadas realizarán una o varias tareas en una computadora.

Y a un conjunto general de programas, se le denomina software, es decir, el soporte lógico de una computadora.

INTRODUCCIÓN:

- Instrucción o Sentencia:conjunto de datos insertados en una secuencia estructurada o específica que el procesador interpreta y ejecuta.

- Ejecutar un programa:es la acción de iniciar la carga de un programa o de cualquier archivo ejecutable. En otras palabras, el proceso mediante el cual una computadora lleva a cabo las instrucciones de un programa informático.

INTRODUCCIÓN:

- Lenguaje de programación:es un lenguaje formal diseñado para expresar procesos que pueden ser llevados a cabo por máquinas como las computadoras.

Puede usarse para crear programas que controlen el comportamiento físico y lógico de una máquina.

Está formado por un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significado de sus elementos y expresiones. Al proceso por el cual se escribe, se prueba, se depura, y se mantiene el código fuente de un programa informático se le llama programación.

Lenguaje de etiquetas HTML

� En informática, la World Wide Web (WWW) o Red informática mundial es un sistema de distribución de información, basado en el lenguaje HTML, en el que conviven infinidad de páginas web

World � mundial

Wide � anchura

Web � Red, malla o telaraña


� Una página web es un archivo o documento con extensión .html que se crea con un lenguaje estandarizado denominado HTML

(HyperText Markup Language –

Lenguaje de marcas de texto )


� HTML hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes.

� Por tanto, una página web puede contener imágenes, textos y otros elementos.


� HTML es un lenguaje sencillo, estructurado en etiquetas o marcas, que permite aglutinar y combinar textos, sonidos e imágenes.

� HTML además, permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto que llevan a otros fuentes de información relacionadas.


� Un archivo HTML no es más que texto y etiquetas que indican cómo visualizar una página web.

� Recordamos, una página web es un documento o archivo, con extensión .html que puede contener texto, imágenes, sonidos y enlaces a otras páginas.

Herramientas Necesarias para diseñar páginas web con HTML

Como hemos visto antes,necesitaremos:

� Un editor de textos: Podemos usar el Bloc de notas, el Word , u otros editores de textos como el Eclipse(software libre) para escribir el lenguaje HTML.

� Un visualizador o navegador web: Netscape, Microsoft Explorer, Mozilla Firefox, Google Chrome, etc…

Mi primera página Web

Vamos a ver cómo diseñar nuestra primera página web:

Lo primero:

� Ir a Inicio� Programas �Accesorios � Bloc de Notas (o notepad).


� El lenguaje utilizado para escribir páginas web ya hemos dicho que es un lenguaje basado en etiquetas.

� Por tanto el código de nuestra página estará delimitado por las etiquetas: <html> ……. </html>.


� Ejemplo:

Escribimos en el bloc de notas:

<html>

hola mundo

</html>

� Guardar el archivo con extensión .html para que el navegador web lo abra como una página web.


� Una vez guardado el archivo, éste se crea como icono de web y con doble clic abrimos este archivo y automáticamente el navegador web nos mostrará nuestra primera página web.

Añadir Etiquetas a la página Web

Si queremos, por ejemplo, insertar negrita en un documento HTML tendríamos que:

� Abrir de nuevo nuestro archivo .html (hacemos clic con el botón derecho del ratón y abrir con notepad (bloc de notas)

� Añadir al texto la etiqueta<strong>

� Guardar el archivo .html

Añadir etiquetas a la página Web

ESTRUCTURA DE UNA PÁGINA WEB

� Una página Web, que es un documento HTML ,delimitado por las etiquetas <html> y </html> se divide en tres partes:

- Encabezado o Cabecera

- Cuerpo o parte principal

- Pie de pagina

Cada una de estas partes se puede dividir en secciones o divisiones (div)


� Encabezado o cabecera: Viene delimitada por las etiquetas <head> y </head>.

� Dentro de la cabecera colocaremos etiquetas de carácter informativo. En el encabezado habrá datos del documento como: Titulo,palabras,clave, etc…


� Cuerpo o parte principal: estádelimitado por las etiquetas <body> y </body>.

En el cuerpo será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

� Pie de página.

PONER TÍTULO A LA PÁGINA WEB

� Ejemplo:

<html>

<head> <- cabecera de la pagina

<title> Mi pagina </title>

</head>

<body> <- cuerpo de la pagina

<strong> HOLA MUNDO </strong>

</body>

</html>

PONER TÍTULO A LA PÁGINA WEB

MEJORAR LA PAGINA WEB

Vemos que nuestra página tiene el título “Mi pagina”.

Como hemos visto, sólo con HTML podemos crear una página Web, pero si queremos que nuestra página tenga mejor estética, diseño y funcionalidad, habráque utilizar dos nuevas herramientas:

- PHP: Lenguaje de programación, adicional al HTML, que lo enriquece, es decir, le proporciona mayor funcionalidad.

- CSS: Hojas de Estilo, que mejoran la presentación de nuestra página web.

Hojas de Estilo ( CSS )

� CSS : Cascade Style Sheet (Hoja de Estilo en cascada)

Son un tipo de archivo .css que definen el formato estético de las páginas web.

En ellos se indica, por ejemplo:

-tamaño

-color

-posición de los distintos elementos

Cada página puede tener asociada una o varias

hojas de estilo.

Lenguaje PHP

� Las siglas PHP significan Hypertext Pre-processor ( procesador de lenguaje hipertexto) aunque inicialmente significaba Personal Home Page Tools ( Utilidades para definir una página inicial personal)

� Fue creado, en 1995, por Rasmus Lerdorf

� Se inspiró en lenguajes como: C, C++, Perl, Java, Python

Lenguaje PHP

� PHP es un lenguaje de programación de uso generalque se ejecuta en el servidor Web, 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 tratase los datos.

� El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante.

Lenguaje PHP

� PHP ha evolucionado bastante desde su comienzo y en la actualidad tambien incluye una interfaz de línea de comandosque puede ser usada en aplicaciones gráficas independientes.

� Interfaz � conexión entre dos sistemas o dispositivos de cualquier

� PHP puede ser usado en la mayoría de los servidores web al igual que en casi todos los sistemas operativos y plataformas sin ningún costo (software libre).

Lenguaje PHP

� PHP (Hyper Text Preprocessor) es un lenguaje que permite la generación dinámica de contenidos en un servidor web. No es un lenguaje de marcas o etiquetas, como es el HTML y se ejecuta en el servidor Web, lo que nos permite acceder a los recursos que tenga dicho servidor (por ejemplo una base de datos).

� PHP es ejecutado en el servidor y el resultado es enviado al navegador, dando como resultado una página HTML (una página web). El lenguaje HTML lo utilizaremos para páginas estáticas mientras que el lenguaje PHP lo utilizaremos para páginas dinámicas.

Lenguaje PHP

Para escribir el lenguaje PHP, dentro de HTML, en lugar de utilizar bloc de notas o word, también podemos utilizar Eclipse, un editor mas completo y que ademas es software libre.

Hemos visto como crear una página web estática con HTML, que solo puede mostrar datos de forma estática y que no puede interactuar con otros sistemas, como puede ser una base de datos, para mostrar datos de forma dinámica.

Si queremos crear un sitio web, necesitaremos crear varias páginas web y que éstas interactúen entre sí, de forma dinámica. Por eso utilizaremos, además de HTML, el lenguaje PHP.

Lenguaje PHP

Denominamos sitio web a un conjunto de páginas web, relacionadas entre sí.

Todo sitio web tiene una primera página web denominada Index.html (Esta página es la que buscaremos para entrar al sitio web).

� En nuestro caso, como vamos a desarrollar un sitio web dinámico, vamos a crear una primera página web, index.PHP, que es la que nos llevará a nuestro sitio web.

Ejemplo de archivo .php

� <html>

<head> <- cabecera de la pagina

<title> Mi pagina </title>

</head>

<body> <- cuerpo de la pagina

<strong> HOLA MUNDO </strong> <- Texto resaltado

</br> <- Salto de linea

<?php código PHP

echo “ADIOS MUNDO”; muestra texto

?>

</body>

</html>

El resultado es:

Esqueleto de la página inicial WifiCloudCan

� El objetivo de nuestro proyecto ha sido crear un sitio web, es decir, un conjunto de páginas web que muestran información de forma organizada y que será de utilidad a las empresas como herramienta de gestión informática.

� En este caso, como bloc de Notas para crear la página web se ha utilizado un editor llamado ECLIPSE (software libre). La primera página de un sitio web siempre se llama Index.html. En nuestro caso como utilizamos PHP además de HTML, tendremos un archivo llamado INDEX.php, que iniciará el flujo de las páginas web.

PÁGINA INICIAL DE WIFICLOUDCAN

PROCESO:index.php

Inicia la sesión e Inicia el flujo de las páginas.

<?php

session_start();

session_destroy();

session_start();

session_regenerate_id(true);

header( 'Location: ./procesos.php?prid=inicio');

?>

PROCESO:index.php

� Denominaremos sesión a la permanencia de los datos del usuario conectado al sitio web durante el flujo de páginas.

� Este primer proceso realiza estas acciones:

-Inicia Sesión y a continuación la finaliza para cerrar anteriores sesiones abiertas por el mismo u otros usuarios

-Inicia Sesión del usuario que se conecta a la página web principal

-Redirige al proceso procesos.php que es el que controla el flujo de las paginas, pasándole como parámetro la cadena de texto “prid=INICIO”

Parámetros y Variables

� Un parámetro es un tipo de variable que es recibida por un proceso. En este caso, el proceso procesos.php recibe como parámetro (variable) la cadena de texto “INICIO”.

� Una variable es un espacio de memoria (un almacén) reservado para almacenar un valor que corresponde a un tipo de dato soportado por un lenguaje de programación.

Ejemplo: nombre � variable de tipo texto

$nombre = “PEPE”; � almacena en nombre el contenido “pepe”

PROCESO:procesos.php

<?php

session_start();

error_reporting(0); gestión de errores

$param = $_SERVER["QUERY_STRING"]; en la variable

QUERY_STRING llega el valor “prid=INICIO”

enviado desde INDEX.php y lo guarda en la variable param

parse_str($param);

Convierte el texto “prid=INICIO” en una variable $prid cuyo valor es ‘INICIO’

include('inicio.php'); <-- incluye el código de inicio.php

PROCESO:procesos.php

if (is_null($prid)) $prid="inicio";

si el parámetro esta vacio se obliga a que pase por

el proceso inicio

if ($prid=='inicio')

{

include('inicio/inicio.html'); texto de los proyectos

}

else

{

include($prid . ".php"); va al proceso que se escriba en la barra de dirección del navegador

}

include('pie.php'); incluir proceso de pie de pagina

¿Qué hace procesos.php ?

� Lee los parámetros que le llegan de index.php, en este caso solo le llega uno, que es “prid=inicio”

� Prepara y convierte la cadena de parámetros QUERY_STRING, en este caso convierte la cadena de texto “prid=inicio” en la variable $prid con el valor ‘inicio’ ($prid = ‘inicio’ )

� Incluye el código de inicio.php (include) en la pantalla principal

� Incluye el código de inicio.html (include) en la pantalla principal cuando prid = inicio (es el texto explicativo de nuestros proyectos)

� En caso de que prid no sea inicio incluye el código del proceso indicado en la barra del navegador

� Incluye el código de pie.php (include) en la pantalla principal

PROCESO:inicio.php

<?php

session_start();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<title>WifiCloudCan</title>

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

<meta name="Keywords" content="wificloudcan"/>

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

PROCESO:inicio.php

<meta name="copyright Ayuntamiento de Castro Urdiales

2013"content="copyright"/>

<meta name="robots" content="ALL"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="revisit-after" content="1 days"/>

/*Variables clave para el posicionamiento de la pagina web en los buscadores

<link rel="stylesheet" type="text/css”href="./estilos/wificloudcan.css" />

/* enlace que asocia la hoja de estilos a la pagina web

</head>

PROCESO:inicio.php

<body> div � división o sección de la pagina web

<div id="pagina">

<div id="cabecera">

<div id='cabeceraorganizaciones'>

<a href='procesos.php?prid=inicio'>

<img src='imagenes/cabecera.png' height=100% width=100%/>

</a>

</div>



</div>

PROCESO:inicio.php

<div id='cuerpo'>

<div id='PanelIzdo'>

<?php include ('menus.php');?>

se incluye el menú de opciones del usuario

</div>

<div id='PanelDcho'>

La sección PanelDcho se cierra en otro archivo llamado Pie.php que veremos a continuación

¿Qué hace Inicio.php ?

-Pone la cabecera de la pagina

-Pone el cuerpo de la pagina dividido en panel izdo ( menus )

y panel dcho (pantalla de trabajo)

-Pone el pie de la página

Ejemplo de Hoja de Estilos(wificloudcan.css)

Form /* formulario */

{

top:0px;

left:0px;

width:1000px;

height:500px;

}

Label /* etiquetas */

{

color:navy;

}

Input /* cajas de texto */

{ color:black;

border:2px outset lightgreen;

width: 30px;

}


#pagina

{

position:relative;

width:1024px;

margin:0 auto;

}

#cabecera

{

position:absolute;

top:0;left:0;

width:99%;

height: 120px;

background-color: green;

color: white;

}


#cuerpo

{

top:140px;

left:0px;

width:99%;

height:590px;

}

#pie {

top:740px;

left:0px;

width: 865px;

height: 26px;

font-size: 11px;

background-color: lightgray;

}


#PanelIzdo /* menus * /

{

top:4px;

left:0px;

width:200px;

height: 290px;

background-color: transparent;

color: black;

border:1px outset lightgray;

}

#PanelDcho /* pantalla de trabajo */

{

top:4px; left:210px; width:795px;

height: 577px; background-color: white; color: black;

border:1px outset lightgray;

}

PROCESO:pie.php

</div> 

</div> 

<div id='pie'>

<div id='pie_izda'>

Copyright Ayuntamiento de Castro Urdiales 2013 (c)

</div>

<div id='pie_dcha'>

<a href="procesos.php?prid=inicio">www.wificloudcan.com</a>

<strong>v.2013_03_22_01</strong>

</div>

</div> 

</div> 

</body> 

</html> <!-- Fin del html que viene de inicio.php -- >

PROCESO:menus.php

<ul id="listamenu" >

<li>

<a href='procesos.php?prid=inicio'>Inicio </a>

/* cuando el usuario pincha con el ratón en esta opción navegará hacia la pagina inicio

</li>

<li>

<a href='procesos.php?prid=P0010'>Regístrate </a>

</li> /* cuando el usuario pincha con el ratón en esta opción navegará hacia la pagina P0010

<li>

<a href='procesos.php?prid=P0030'>Contacta </a> </li> /* cuando el usuario pincha con el ratón en esta

opción navegará hacia la pagina P0030

</ul>

PROCESO:menus.php

� Este proceso menus.php es llamado mediante include desde el proceso inicio.php, dentro de la división o sección PanelIzdo.

� Muestra una lista con las diferentes opciones que puede elegir el usuario que se conecta a nuestra página web.

PROCESO:P0010.php

PROCESO:P0010.php

<h1>Regístrate</h1>

<link rel="stylesheet" type="text/css" href="./estilos/p0010.css" />

/** enlace a la hoja de estilos **/

<div id='persona'>

/** Formulario para introducir los datos del registro del usuario

/** va entre etiquetas <form> ….. </form>

<form method='post' action='procesos.php?prid=P0020' >

<label id='lblnombrepersona' >Nombre Persona</label> etiqueta

<input type='text' id='nombrepersona' name="nombrepersona" />

PROCESO:P0010.php

<label id='lblemail' >Email</label>

<input type='text' id='email' name="email" /> Introduccion de texto

<input type='submit' id='submit' value='Enviar'/>

//** cuando el usuario ha rellenado sus datos y pincha en el botón Enviar navega a la pantalla que se haya indicado en el action del formulario, en este caso irá al proceso p0020 que es el que almacena sus datos **/

</form>

</div>

PROCESO:P0010.php

Type=´text´ -- > caja de texto

Type=`submit´ -- > botón

Un formulario es un documento en pantalla, diseñado con el objetivo de que el usuario introduzca datos estructurados (nombre, apellidos, dirección, etc…) en las zonas del documento destinadas a ese propósito para ser almacenadas y tratadas posteriormente.

PROCESO:P0020.php

PROCESO:P0020.php

� Este proceso muestra por pantalla los datos introducidos en el formulario de la pantalla anterior.

� El propósito posterior es que además almacene estos datos en una base de datos.

PROCESO:P0020.php

Todavía no registra... Estamos justito empezando... Paciencia ..

<br/>

<?php

echo "Nombre Persona ....: " . $_POST["nombrepersona"] . '<br/>';

echo "Email ………....: " . $_POST["email"] . '<br/>';

?>

PROCESO:P0020.php

� $_POST es una variable que guarda el dato que introdujo el usuario en el formulario de la pantalla anterior.

� Habrá una variable $_POST por cada caja del formulario.

BASES DE DATOS

� Una base de datos es un “almacén” que nos permite guardar grandes cantidades de información de forma organizada para que luego podamos encontrar y utilizar fácilmente.

� Cada base de datos se compone de una o más tablas que guarda un conjunto de datos. Cada tabla tiene una o más columnas y filas. Las columnas guardan una parte de la información sobre cada elemento que queramos guardar en la tabla, cada fila de la tabla conforma un registro.

�

BASES DE DATOS

� Las bases de datos son manejadas por lo que se llaman Sistemas de Gestión de Base de Datos que son un tipo de software muy específico, dedicado a servir de comunicación entre la base de datos, el usuario y las aplicaciones que la utilizan.

� Se compone de un lenguaje de definición de datos, de un lenguaje de manipulación de datos y de un lenguaje de consulta.

BASES DE DATOS (mySQL)

� El proyecto Wificloucan ha utilizado un sistema gestor de base de datos que se llama PHPMYADMIN y la base de datos se ha utilizado se llama MySQL.

� En MySQL podremos añadir, modificar, consultar y borrar datos de las tablas creadas.

Phpmyadmin: Gestor de Base de Datos MySql

BASES DE DATOS (Crear Tabla)

create table personas

(

/* Nombre del Dato Tipo del Dato Longitud del dato */

idpersona int auto_increment primary key,

nif varchar(30),

nombrecompleto varchar(100),

direccion varchar(100),

poblacion varchar(60),

codpostal varchar(5),

provincia varchar(60),

movil varchar(20),

email varchar(60),

);

BASES DE DATOS (Consulta de Datos de una Tabla - Select )

363n PHP Y DESARROLLO WEB.ppt) - castro …€¦ · sintácticas y semánticas que definen su...

Documents

Transcript of 363n PHP Y DESARROLLO WEB.ppt) - castro …€¦ · sintácticas y semánticas que definen su...