You are on page 1of 74

ELECTIVA 1 “Herramientas LAMP”

Unidad # 1: Instalación
Herramientas xampp Instalación Ambiente de trabajo Lenguaje HTML

Ing. Ángela Yanza M., M. Sc., Mg.

Instalación de xampp
Descargar la aplicación (xampp-windows-1.8.1) de aproximadamente 99M de los siguientes sitios sugeridos:
– –

http://xampp.softonic.com/descargar http://www.apachefriends.org/en/xampp-windows.html

Proceder a la ejecución del instalador.

Ing. Ángela Yanza M., M.Sc. Mg. – [E01-S2M]

Instalación de xampp
Una vez terminado el proceso de instalación, probar en el navegador:
– –

http://localhost http://127.0.0.1

Revisar los directorios y archivos de configuración más relevantes

Ing. Ángela Yanza M., M.Sc. Mg. – [E01-S2M]

Sc.Instalación de xampp Para verificar que PHP se ha instalado correctamente.. M. realizamos y probamos el siguiente código fuente: Ing. Mg. – [E01-S2M] . Ángela Yanza M.

Sc.. Ángela Yanza M.Ing. Mg. – [E01-S2M] . M.

o alguna versión superior.Creación de Ambiente de trabajo Para la elaboración del diseño de las páginas se utilizará Adobe Dreamweaver CS4. Ing.. Ángela Yanza M. – [E01-S2M] . M.Sc. Mg.

Sc.. – [E01-S2M] . Mg. M.Creación de un nuevo programa Ejecutar las siguientes instrucciones: Ing. Ángela Yanza M.

Sc.Creación de un nuevo programa Automáticamente se generará la siguiente plantilla: Ing. Mg. M. – [E01-S2M] . Ángela Yanza M..

Ángela Yanza M..>). proviene de las siglas HyperText Markup Language (Lenguaje de Marcado de Hipertexto). – [E01-S2M] . Se escribe en forma de «etiquetas».Sc. rodeadas por corchetes angulares (<. Mg. M. Ing. así como para complementar el texto con objetos tales como imágenes. Es usado para describir la estructura y el contenido en forma de texto.Lenguaje HTML HTML. Es el lenguaje de marcado predominante para la elaboración de páginas web.

Sc. el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. M. – [E01-S2M] . Ing.Lenguaje HTML HTML también puede describir la apariencia de un documento.. Ángela Yanza M. y puede incluir un script (por ejemplo Javascript). Mg. Es usado para referirse al contenido del tipo de MIME text/html.

css" type="text/css">. – – – <title>: define el título de la página. Ángela Yanza M. Por lo general. el título aparece en la barra de título de la ventana.Códigos HTML básicos <html>: define el inicio del documento HTML. Mg. Por ejemplo:<link rel="stylesheet" href="/style. ya sea usando CSS. <head>: define la cabecera del documento HTML. <script>: incrusta un script en una web. – [E01-S2M] .Sc. u otros lenguajes similares. <style>: para colocar el estilo interno de la página. o se llama a uno mediante src="url del script". <link>: para vincular el sitio a hojas de estilo o iconos.. M. Ing. esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario.

Mg. <b>: texto en negrita (Se recomienda usar la etiqueta <strong>)./imágenes/mifoto. M. Ángela Yanza M. que indica la ruta en la que se encuentra la imagen. <s>: texto tachado (Se recomienda usar la etiqueta <del>).Códigos HTML básicos <body>: define el contenido principal o cuerpo del documento.. Debe definirse el parámetro de pasada por medio del atributo href. – – – – – – – – – – – <table>: define una tabla. dentro o fuera del sitio web. Requiere del atributo src. Ing.Sc.jpg" />. <td>: celda de una tabla (debe estar dentro de una fila). <i>: texto en cursiva (Se recomienda usar la etiqueta <em>). <tr>: fila de una tabla. <img>: imagen. Por ejemplo: <img src=". <u>: texto subrayado. <div>: división de la página. <a>: hipervínculo o enlace. – [E01-S2M] . <li><ol><ul>: etiquetas para listas.

. Mg.. M. Ángela Yanza M.. Sc.UNIDAD # 2 Lenguaje de Programación PHP Introducción Etiquetas Primer programa en PHP Variables Tipos de datos Constantes GET/POST Ejercicios Ing.

– [E01-S2M] .. maquetarla de nuevo y subirla al servidor. M. modificarla. Mg. Ángela Yanza M. El problema de esto es que modificar algún dato de una de las páginas implicaba descargarla. es decir. Actualmente. Éstos se denominan lenguajes de script de servidor. Ing. y solo permitía crear las páginas y subirlas a un servidor. porque la ejecución del programa se realiza en el servidor Web donde se encuentra alojada la página. existe un conjunto de lenguajes que permiten desarrollar páginas Web dinámicas.Introducción Anteriormente.Sc. el lenguaje existente era únicamente HTML. que el contenido puede variar muy rápidamente sin ningún esfuerzo por parte de los desarrolladores.

– [E01-S2M] . Mg. Ángela Yanza M..Sc. M. Ing.¿Qué es PHP? PHP (acrónimo de "PHP: Hypertext Preprocessor") es un lenguaje "open source" interpretado de alto nivel embebido en páginas HTML y ejecutado en el servidor.

Mg. Ing. – [E01-S2M] . que se descargan junto con la página Web solicitada al servidor y se ejecutan en nuestro ordenador local. M. Ángela Yanza M.Sc.Tecnologías del lado del cliente Muchas de las mejoras añadidas al lenguaje HTML pertenecen a tecnologías del lado del cliente.. es decir.

Ing. – [E01-S2M] .Sc.Tecnologías del lado del servidor Los lenguajes del lado del servidor son invisibles para los clientes. Las páginas que utilicen scripts de este tipo contienen el código entre etiquetas parecidas a las de HTML. Mg. Ángela Yanza M. M. pero éstas desaparecen cuando el cliente recibe la página..

Etiquetas de PHP Un programa en PHP inicia con unas etiquetas determinadas. M. Ing.ini contiene la configuración de PHP en ese momento. – [E01-S2M] .. Ángela Yanza M.Sc. Mg. – – <?php ?> <? ?> El archivo php.

Mg. el mismo que contiene la configuración de PHP puede administrar la visualización de noticias. error_reporting = E_ALL & ~E_NOTICE Ing..Etiquetas de PHP En el archivo php. – [E01-S2M] .Sc.ini. M. Ángela Yanza M.

Ángela Yanza M. Mg. – [E01-S2M] .Sc. M. Verificar las etiquetas <? ?> Ing.Primer programa en PHP Desarrollar un programa en PHP que permita visualizar el mensaje “Hola mundo…”..

como en otros lenguajes. Mg. Ing.Sc.Variables PHP permite almacenar datos de distintos tipos en memoria. Ángela Yanza M. M. Estas zonas de memoria se llaman variables.. – [E01-S2M] . Las variables comienzan por el símbolo de dólar ($) y no necesitan ser declaradas antes de comenzar el programa.

Ángela Yanza M.Sc. Mg.. M. – [E01-S2M] .Variables Ing.

. M.Variables Ing. – [E01-S2M] . Ángela Yanza M.Sc. Mg.

Variables Ing.Sc. – [E01-S2M] . Ángela Yanza M. Mg. M..

Ing. que puede ser de un tipo diferente..Asignación de variables La asignación es simplemente dar un valor a la variable. Ángela Yanza M. Mg. – [E01-S2M] . Esto se hace poniendo un símbolo = entre la variable y el dato que queremos asignar. En este momento podemos cambiar el valor de la variable asignando un nuevo valor. acabamos de asignar un número de coma flotante a la variable $numero_pi.Sc. M. Si se fija en el ejemplo.

Sc. – [E01-S2M] . Mg. M.Tipos de datos Los tipos de datos se dividen en: – Simples Enteros Coma flotante Cadenas de caracteres Boolean NULL Ing.. Ángela Yanza M.

Tipos de datos Ing. Mg. M. – [E01-S2M] . Ángela Yanza M..Sc.

– [E01-S2M] .Sc..Tipos de datos Ing. M. Mg. Ángela Yanza M.

Mg. M.Tipos de datos Ing..Sc. Ángela Yanza M. – [E01-S2M] .

Ángela Yanza M.. M. – [E01-S2M] .Sc. Mg.Tipos de datos Ing.

Ángela Yanza M. Mg. – [E01-S2M] .Tipos de datos Ing.. M.Sc.

Ángela Yanza M.Sc.Tipos de datos Ing.. – [E01-S2M] . Mg. M.

Mg. – [E01-S2M] .Tipos de datos Ing..Sc. Ángela Yanza M. M.

Constantes
Las constantes son tipos de datos que no varían en el desarrollo de un programa. En la vida real existen muchos tipos de constantes, el número pi, la temperatura de congelación del agua, el nombre de la Empresa, etc. Para crear una constante tiene que usar la función define () de la siguiente forma:

Ing. Ángela Yanza M., M.Sc. Mg. – [E01-S2M]

Constantes

Ing. Ángela Yanza M., M.Sc. Mg. – [E01-S2M]

Operadores
Existen varios tipos de operadores:
– – – – – – –

De asignación Unarios Aritméticos De comparación Lógicos Ternarios Asignación combinados

Ing. Ángela Yanza M., M.Sc. Mg. – [E01-S2M]

Sc.. Ángela Yanza M. Mg. M.Operador Unario Ing. – [E01-S2M] .

– [E01-S2M] ..Sc. M. Mg.Operadores Aritméticos Ing. Ángela Yanza M.

. Mg.Operadores de Comparación Ing.Sc. Ángela Yanza M. M. – [E01-S2M] .

Mg.. M. – [E01-S2M] .Sc.Operadores Lógicos Ing. Ángela Yanza M.

M.Operadores Lógicos Ing. Mg. Ángela Yanza M..Sc. – [E01-S2M] .

Sc. M. – [E01-S2M] .. Ángela Yanza M. Mg.Operadores Ternarios Ing.

Ángela Yanza M. M. – [E01-S2M] .Sc..Operadores de asignación combinados Ing. Mg.

Ángela Yanza M. Mg.Sc.Operadores de asignación combinados Ing. – [E01-S2M] .. M.

Sc. Ángela Yanza M. M.. Las estructuras de control permiten combinar instrucciones o sentencias individuales en una simple unidad lógica con un punto de entrada y un punto de salida. Mg.Estructuras de Control Las estructuras de control controlan o supervisan el flujo de ejecución de un programa o función. – [E01-S2M] . Ing.

.Tipos de Estructuras de Control Las instrucciones o sentencias se organizan en tres tipos de estructuras de control que sirven para controlar el flujo de la ejecución: – – – Secuencia Selección (Decisión) Repetición (Iteración) Ing. Mg.Sc. Ángela Yanza M. – [E01-S2M] . M.

Estructuras de Control Secuenciales La computadora ejecutará automáticamente enunciados o procesos uno después del otro. en el orden en el cual se han escrito de inicio a fin. Ángela Yanza M. M. Ing.Sc.. – [E01-S2M] . Mg.

y en función del resultado. – [E01-S2M] ..Sc. M. Se llaman también estructuras de decisión o alternativas. Las estructuras de selección pueden ser: – – – Simples (if) Dobles (if-else) Múltiples (switch) Ing. Lo que se hace es evaluar una condición.Estructuras de Control Selectivas Estas estructuras se utilizan para tomar decisiones. Mg. Ángela Yanza M. se lleva a cabo una opción u otra.

En cualquier caso la ejecución del programa continúa con la siguiente sentencia del programa. se evalúa la expresión entre paréntesis que viene a continuación de if. Ing.La sentencia if En PHP. Si Expresión es verdadera. Ángela Yanza M. se ejecuta Acción. M. La sentencia if funciona de la siguiente manera: Cuando se alcanza la sentencia if dentro de un programa. – [E01-S2M] . en caso contrario no se ejecuta Acción.Sc. Mg. la estructura de control de selección principal es la sentencia if..

M. Ángela Yanza M.Sc.La sentencia if Ing. – [E01-S2M] . Mg..

La sentencia if-else Cuando se ejecuta la sentencia if-else. se evalúa Expresión. Ing.Sc.. – [E01-S2M] . Ángela Yanza M. Si Expresión es verdadera. Mg. se ejecuta Acción1 y en caso contrario se ejecuta Acción2. M.

Ángela Yanza M. – [E01-S2M] . Mg.La sentencia if-else La representación en diagrama de flujo de esta estructura de control es: Ing. M..Sc.

Sc. si es falsa se ejecuta sentencia2. 2. Ángela Yanza M. M.. Ing. Mg. 4.La sentencia if-else 1. if (expresión_lógica) sentencia if (expresión_lógica) sentencia1 else sentencia2 if (expresión_lógica) sentencia if (expresión_lógica) sentencia1 else sentencia2 3. – [E01-S2M] . Si expresión_lógica es verdadera se ejecuta sentencia o bien sentencia1.

Estructuras Repetitivas Permiten repetir un número determinado de veces cierto segmento de código.Sc. Mg. Ángela Yanza M. Entre las más relevantes tenemos: – – – Do-While (Hacer-mientras) While (Mientras) For (Desde/Para) Ing. M. – [E01-S2M] ..

Ángela Yanza M. – [E01-S2M] .Formularios HTML. Mg. POST La creación del formulario es mediante las marcas <form></form>. GET. Ing.Sc. M..

Mg. – [E01-S2M] . M. Ángela Yanza M. Ing.Formularios HTML. POST La diferencia entre GET y POST es que GET mostrará la información que se está enviando a través de la URL y POST no mostrará eso. GET..Sc.

Sc. Mg. – [E01-S2M] . M. GET. Ángela Yanza M.Formularios HTML. POST Ing..

Sc. M.. Mg. GET. POST Ing.Formularios HTML. Ángela Yanza M. – [E01-S2M] .

Mg. M. Ángela Yanza M.. – [E01-S2M] .00FORMUL.Sc.PHP Ing.

Mg.. M. Ángela Yanza M. – [E01-S2M] .PHP] – Ing.Sc.Ejercicio # 1 Realizar un programa que permita ingresar tres números y realizar los siguientes cálculos matemáticos: Suma de las tres variables – Resta de variable 1 y 2 – Producto de las tres variables – División de la variable 3 para la 1 – La primera variable elevada a la potencia que indique la segunda variable – Valor absoluto de la variable 3 – Raíz cuadrada de la variable 2 – Resolver la expresión: [(var1 + var2) * (var3 ^ var1) ] – var2 [01MENUMA.

M. Ángela Yanza M.Ejercicio # 1 Ing. Mg. – [E01-S2M] ..Sc.

Ángela Yanza M.. M. – [E01-S2M] .Sc. Mg.Ejercicio # 1 Ing.

Mg. M. – [E01-S2M] ..Ejercicio # 1 Ing. Ángela Yanza M.Sc.

. M.Sc. Ángela Yanza M. Mg. – [E01-S2M] .Ejercicio # 1 Ing.

Sc.Ejercicio # 1 Ajuste su diseño al propuesto en las láminas. Ángela Yanza M. Al presionar el botón limpiar debe regresar al estado de formulario inicial. la misma que será utilizada como fondo de la página. debe mostrarse la parte de resultados. – [E01-S2M] . Ing. Mg.. M. Al presionar el botón enviar. Debe crear una imagen con “S2M”.

.PHP] Ing. M.Ejercicio # 2 Realizar un programa que permita ingresar datos de un estudiante como son: – – – – Nombres Apellidos Edad. Nota3 Calcular el promedio y mostrarlo. Cédula de Identidad Nota1. Paralelo. Ángela Yanza M. [02ESTUDI. – [E01-S2M] . Mg.Sc. Nota2. Luego redondear dicho promedio y si es mayor o igual que 7 mostrar el mensaje de “APROBADO”. caso contrario mostrar “REPROBADO”.

Sc.. M.Observe detenidamente el diseño. Ángela Yanza M. – [E01-S2M] . Mg. Ing.

resta.. Mg. división. M.PHP) Ing. factorial. (03MATEMA.Ejercicio # 3 Realizar un programa que incluya funciones que permitan calcular: la suma. permutaciones y combinaciones. – [E01-S2M] . según el siguiente menú de opciones propuesto. Ángela Yanza M. multiplicación.Sc.

Sc.Ejercicio # 3 Ing.. Ángela Yanza M. – [E01-S2M] . M. Mg.

.PHP] Ing.Sc.Ejercicio # 4 [04_NOTAS. Mg. M. – [E01-S2M] . Ángela Yanza M.

M.. – [E01-S2M] .Sc. Ángela Yanza M.Ejercicio # 4 Ing. Mg.

– [E01-S2M] .Sc.. Ángela Yanza M. Mg. M.Ejercicio # 4 Ing.

– [E01-S2M] ..Sc. Ángela Yanza M. Mg.Ejercicio # 4 Ing. M.

M. – [E01-S2M] . Ángela Yanza M.Ejercicio # 4 Ing.. Mg.Sc.