Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS

Post on 20-Jul-2015

164 views 0 download

Transcript of Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS

TÓPICOS EN INGENIERÍA INFORMÁTICA Y SISTEMAS

Desarrollo de aplicaciones con PHP

Ing. Arturo CUBA TORRES

TEMARIO BÁSICO

• Introducción a PHP. • Herramientas. • Instalación APACHE+PHP. • Variables, Datos, Ámbito, Constantes,

Operadores. • Sentencias secuenciales. • Sentencias Condicionales. • Sentencias Repetitivas. • Arreglos. • Funciones. • Include y Requiere

Introducción a PHP.

Lenguaje de Programación

Hypertext pre proccesor Instrucciones

Lado del Servidor

Secuenciales

Variables

Operadores

Sentencias

Repetitivas

Arreglos

Condicionales

Funciones

Incluye Incluye Incluye

Incluye

TAG HTML

Da una respuesta

Visualizado Navegador

Web del Cliente

crear paginas web dinámicas

para

Interpreta

Características

Multiplataforma

Muchas conexiones a base de datos

Rápido

Sintaxis similar a C

Interpretado

Solicitudes

Soporta

Clases

es

Gráficos Socket

Libre

Archivos

Criptografía

XML

JSON FrameWorks

Muy usado

Creado

Rasmus l Lerddorf 1995

PHP/FI 2.0

Andi Gutmans y Zeev Zurasky

1997 PHP 3

Tiene

Herramientas para desarrollo

Windows Linux

Editores de Código Dreamweaver, Notepad++, Sublime Text, NetBeans, ….

Sublime Text, NetBeans, …

Base de datos SQL Server, MySQL, PostgreSQL, MariaDB, MongoDB,…

MySQL, PostgreSQL, MariaDB,…

IDE Base de datos SQL Server Management , PHPMyAdmin, SQL yog

PHPMyAdmin, SQL yog

Navegador Web Chrome, Firefox Chrome, Firefox

Instalación en Windows

• Se esta trabajando en Windows 7.

• Usara un paquete todo.

– XAMP

– Descargamos XAMP

– https://www.apachefriends.org/es/index.html

• Procedemos a instalar

Primer programa en PHP

Guarda en la carpeta C:\xampp\htdocs

Con el nombre Scrip01.php

Llamamos mediante unna vegador y colocamos

http://localhost/Scrip01.php

<?php : Indica el incio de codigo PHP ?> : Indica el final del codigo PHP echo. Funcion que escribe texto

<?php : Indica el incio de codigo PHP ?> : Indica el final del codigo PHP echo. Funcion que escribe texto

Para saber que es lo que esta instalado en nuestro PHP

Variables, Datos, Ámbito, Constantes

• Las variables comienzan con $

• Las variables no requieren ser declaradas.

• Una variable puede almacenar un varios tipos de datos en una misma función.

• Distingue entre mayúsculas y minúsculas.

• Entero • Reales

• Cadenas • Booleano

Constantes

Operadores

MATEMÁTICOS BOLEADOS

+ Suma && And o i lógico

- Resta || Or u O lógico

* Multiplicación ! Not u Lógico

/ División o División Entera. and And o i lógico

% Resto o modulo or Or u O lógico

CADENA xor Xor (true si x=true o y=true, false si ambos son true) . Concatenar

‘ Inicio y fin de cadena COMPARACIÓN

COMPARACIÓN == Igual

< Menor que === Idéntico

> Mayor que != Diferente

>= Mayor o igual que <> Diferente

<= Menor o igual que !== No idéntico

Operadores

Incrementos/Decrementos Asignación

++ Incremento en uno = Asigna la expresión/valor de la parte derecha del operador a la variable que esta a la izquierda del operador

-- Decremento en uno +=

Arreglos -=

+ Union /=

== Igualdad *=

=== Identidad(mismo orden y de los mismos tipos.)

%=

!= , <> Desigualdad .=

!== No-identidad &=

• ¿Cuánto es 2+3*5?

• A. 25

• B. 10

• C. 17

• ¿Cuánto es (2+3)^2-1?

• A. 25

• B. 5

• C. 24

Prioridad de operadores

Operadores aritméticos

Prioridad Operador

1 ( ) Paréntesis

2 ^ Potencia

3 * / % Multiplicación, división, modulo

4 + - Resta

Operadores Lógicos y relacionales

Prioridad Operador

1 ! Negación

2 () Paréntesis

3 < <= >= > Menor que, Menor o igual que …

4 <> == != Diferente, Igual,

5 && and Y lógico

6 || or O lógico

Programación secuencial

Ejemplo de prioridad de operadores

Prioridad de operadores

HTML5 - Formularios

• Tipos de Entrada en HTML5 – <input type="email" /> – <input type="url" /> – <input type="date" /> – <input type="time" /> – <input type="datetime" /> – <input type="month" /> – <input type="week" /> – <input type="number" /> – <input type="range" /> – <input type="tel" /> – <input type="search" /> – <input type="color" />

• Nuevos atributos:

– autofocus

– min

– max

– pattern

– placeholder

– required

– step

Enviar datos de un formulario Simple

Ejemplo de formulario HTML5 envía datos.

Guardar Scrip12.php

CONDICIONALES

if if – else if – elseif -else if – anidado ? switch

Trabajar en un solo formulario Trabajar en un solo formulario

Ejemplo condicional if: Operaciones con formulario.

Ejemplo condicional if else: Determinar si la clave es valida o no

Determinar el estado civil, según la inicial ingresada

Ejemplo anidado

• Un préstamo puede ser calificado por categorías (M) Microempresa, (P)Pequeña empresa, (H)Hipotecario.

• Cada uno de los cuales se califica según su morosidad en base a los días de atraso.

• Para microempresa y Pequeña empresa – Normal cuando los días de atraso

<=8 – CPP cuando los días de atraso

están 9 a 30 – DEF cuando los días de atraso

están 31 a 60 – DUD cuando los días de atraso

están 61 a 120 – PER cuando los días de atraso

están 121 a +

• Para Hipotecario – Normal cuando los

días de atraso <=30

– CPP cuando los días de atraso están 31 a 60

– DEF cuando los días de atraso están 61 a 120

– DUD cuando los días de atraso están 121 a 365

– PER cuando los días de atraso están 366 a +

Recupera datos de un radio button

Ejemplo con Switch

• Determinar el símbolo del zodiaco Chino

Modifique el ejemplo para que salga una imagen y una predicción.

Operador ? Comportamiento

de la “

Estructuras repetitivas

for while

do while

<?php do { …sentencias } while(condición); ?>

<?php while (condición) { ... sentencias; } ?>

<?php for ($variable=valor_inicial; condición; incremento) { ... sentencias; } ?>

FOR

Contador iniciado

Variable condicional

True= continua

False= detiene

Actualizador del

contador

Ejemplo con For Funcion abs

FOREACH 1 Recuperar datos

de CheckBox

FOREACH 2

Ejemplo foreach: Llenado de combo.

Llenar un Select con datos de un arreglo. El

mismo ejemplo se puede modificar para extraer datos de BD

Ejemplo de Do-While <?php if(count($_POST)>0)

{

$numero=$_POST['txtNumero'];

$numero=intval($numero);

if($numero!=0) {

$html="<table width=\"300\"

border=\"0\"><tr><th colspan=\"5\">TABLA DE

MULTIPLICAR DEL $numero</th> </tr>";

$i=1; do

{

$multiplicacion=$numero*$i;

$html.="<tr> <td>$numero</td>

<td>x</td> <td>$i</td> <td>=</td> <td>$multiplicacion</td> </tr>";

$i++;

}while($i<=12);

$html.='</table>';

} }

?>

<!doctype html> <html>

<head>

<meta charset="utf-8">

<title>Ejemplo do - while</title>

</head> <body>

<center>

<h1>TABLA DE MULTIPLICAR</h1>

<form name="form1" method="post" action="">

<label for="textfield">Ingrese Número</label> <input type="text" name="txtNumero">

</form>

<hr>

<?php

echo $html; ?>

</center>

</body>

</html>

Ejemplo con While

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo do - while</title> </head>

<body>

<center>

<h1>TABLA DE MULTIPLICAR</h1>

<form name="form1" method="post" action=""> <label for="textfield">Ingrese Número</label>

<input type="text" name="txtNumero">

</form>

<hr>

<?php echo $html;

?>

</center>

</body>

</html>

<?php if(count($_POST)>0)

{

$numero=$_POST['txtNumero'];

$numero=intval($numero);

if($numero!=0) {

$html="<table width=\"300\"

border=\"0\"><tr><th colspan=\"5\">TABLA DE

MULTIPLICAR DEL $numero</th> </tr>";

$i=1; do

{

$multiplicacion=$numero*$i;

$html.="<tr>

<td>$numero</td> <td>x</td> <td>$i</td> <td>=</td> <td>$multiplicacion</td> </tr>";

$i++;

}while($i<=12);

$html.='</table>';

} }

?>

Funciones

Son rutinas reutilizables que se llaman desde otras partes del programa, son reutilizables pueden tener

parametros que sirven para indicarle que hacer

Ejemplo de Función

Ejemplo de reutilización de rutinas en una

función.

Ejemplo de función: Cambio de

valor de parámetros

*Funciones que retornan más de una variable. *Inicialización grupal. * Función retorna entero

include y requiere

• require() vs include() • Ambas funciones importan o insertan el código contenido en el

archivo.php dentro de otro. La diferencia puede deducirse de su nombre:

• require() establece que el código del archivo invocado es requerido, es decir, obligatorio para el funcionamiento del programa. Por ello, si el archivo especificado en la función require() no se encuentra saltará un error “PHP Fatal error” y el programa PHP se detendrá.

• include(), por el contrario, si no se encuentra dicho código, saltará un error tipo “Warning” y el programa seguirá ejecutándose (aunque como consecuencia de no incluirse el código puede que no funcione correctamente, o sí, depende de la situación).

* Mejor usar un iclude_once

Ejemplo include. Parte 01

Guardar con el nombre Lib01.php

*Funciones con parámetros y sin parámetros.

• require_once()/include_once() vs require()/include()

• Las versiones require_once() e include_once() funcionan de la misma forma que sus respectivos, salvo que, al utilizar la versión _once, se impide la carga de un mismo archivo más de una vez.

• <html> <body> <h1>Welcome to my home page!</h1> <?php include 'noFileExists.php'; echo "I have a $color $car."; ?> </body> </html>

• <html> <body> <h1>Welcome to my home page!</h1> <?php require 'noFileExists.php'; echo "I have a $color $car."; ?> </body> </html>

*Función del PHP para validar fechas.

Ejemplo include. Parte 02

Ejemplo requiere. Parte 01

http://php.net/manual/en/function.date.php

Guardar como Lib02.php

Guardar como Scrip33.php

La función date

Base de datos

SQLServer 2008+

Creación de la base de datos y un tabla

Procedimiento almacenado que inserta o actualiza

Procedimiento que recupera un registro y otro varios registros

Probar procedimientos

Creando una rutinas para conectar gestionar bd SQL

Server

Guardar LibSQL01.php

Scrip34.php <?php

include("LibSQL01.php");

$conn = Conectar();

$Mensaje="";

if (count($_GET)>0)

{

if($_GET["txtAP"]=="" or $_GET["txtAM"]==""or $_GET["txtNombre"]=="" or

$_GET["txtNroDocumento"]=="")

{

$Mensaje="Ingrese datos completos para guardar ";

}

else

{

$sqlI = "Exec sp_PersonaInsertar

'".$_GET["txtNroDocumento"]."','".$_GET["txtNombre"]."','".$_GET["txtAP"]."','".$_GET["txtAM"]."','".$_GET["txtSe

xo"]. "','".$_GET["txtFecha"]."','".$_GET['txtCoordenadas']."','".$_GET['txtContrasena']."'";

$rsI = Ejecutar($sqlI,$conn);

if(MoverCursor($rsI))

{

$Mensaje=RecuperaDato($rsI,"Rpt");

}

unset($_GET);

}

}

?>

Scrip34.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>Persona</title> <link rel="stylesheet" type="text/css" href="Art_css/stylesheet.css"> <link rel="stylesheet" href="Art_css/redmond/jquery-ui-1.9.2.custom.min.css" /> <script type="text/javascript" src="Art_js/jquery-1.8.3_min.js"></script> <script type="text/javascript" src="Art_js/jquery-ui-1.9.2.custom.min.js"></script> <script type="text/javascript" src="https://maps.google.es/maps/api/js?sensor=true"></script> <script type="text/javascript"> $(function(){ $("#map_canvas").dialog({ title: "Croquis", autoOpen: false, modal: true, width: "95%", height: "600", buttons: { "Aceptar": function(){ $(this).dialog("close"); } } }); $("#btnMapa").click(function(e) { $("#map_canvas").dialog("open"); initialize(); }); $("#map_lat1").bind("focusin",function(e) { $("#map_canvas").dialog("open"); initialize(); }); }); var geocoder = null; var infowindow = null;

var map; var contador=false; google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var latlng = new google.maps.LatLng(-13.6349152,-72.8813095); var myOptions = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDoubleClickZoom: true }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); infowindow = new google.maps.InfoWindow(); // el geocodificador geocoder = new google.maps.Geocoder(); var markDile = new google.maps.Marker({ position: latlng, map: map, title:"Abancay!", icon: "cliente.png" }); google.maps.event.addListener(markDile, 'click', function() { map.setZoom(18); }); google.maps.event.addListener(map, 'dblclick', function(event) { if(!contador){ placeMarker(event.latLng); contador = true; }else{ markCliente.setPosition(event.latLng); document.getElementById('map_lat1').value = event.latLng.lat() + ',' + event.latLng.lng(); } }); }

Scrip34.php

Scrip34.php var markCliente; function placeMarker(location) { markCliente = new google.maps.Marker({

position: location, map: map, draggable:true, animation: google.maps.Animation.DROP, title: "Direccion del cliente", icon: "favicon.png" }); document.getElementById('map_lat1').value=location.lat()+','+location.lng(); google.maps.event.addListener(markCliente, 'click', function(event) { document.getElementById('map_lat1').value=event.latLng.lat()+','+event.latLng.lng(); }); google.maps.event.addListener(markCliente, 'dragend', function(event) { document.getElementById('map_lat1').value=event.latLng.lat()+','+event.latLng.lng(); }); }

Scrip34.php function showAddress(address) { if (geocoder) { // obtener la Geo-Codificación Forward, // introduciendo un dato string (address) geocoder.geocode({'address': address, 'region': 'PE'} , function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { // preparar la info de la posición latitud y longitud var input = results[0].geometry.location.toUrlValue(); var latlngStr = input.split(",", 2); var lat_mx = parseFloat(latlngStr[0]); var lng_mx = parseFloat(latlngStr[1]); var latLong_mx = new google.maps.LatLng(lat_mx, lng_mx); // centrar el mapa en la posición encontrada map.setZoom(16); map.setCenter(latLong_mx); marker.setPosition(latLong_mx); marker.setVisible(true); // google.maps.event.trigger(marker, 'click'); // llenar con la info de la codificación inversa, o sea, la dirección humanamente legible var location_type_mx = results[0].geometry.location_type infowindow.setContent('<b>' + results[0].formatted_address + '</b>' + '<br/><br/><i style="color: #777;">' + a_locations_type[location_type_mx] + '</i>'); infowindow.open(map, marker); } else { alert(a_geocode_status[status]); } } else { alert(a_geocode_status[status]); } }); } // endif } </script>

Scrip34.php

<script type="text/javascript"> $(function(){

$("input[name=txtNroDocumento]").blur(function(){ $.post("Scrip34_API.php",{txtNroDocumento: $(this).val()},function(data){ if(data){ $("input[name=txtAP]").val(data["cApellidoPaterno"]); $("input[name=txtAM]").val(data["cApellidoMaterno"]);

$("input[name=txtNombre]").val(data["cNombre"]); $("input[name=txtSexo][ value="+ data["cSexo"] + "]").attr("checked","checked"); $("input[name=txtCoordenadas]").val(data["cCoordenadas"]); $("input[name=txtFecha]").val(data["dfechaNacimiento"]);

$("input[name=txtContrasena]").val(data["cContrasena"]); } },"json"); }); });

</script>

Scrip34.php </head> <body oncontextmenu="return false" > <center> <form id="form1" name="form1" method="get" action="" onkeypress="return event.keyCode!=13"> <table width="576" cellspacing="0" > <tr> <th colspan="2" >REGISTRO DE PERSONA </th> </tr> <tr> <td>N° Documento*</td> <td align="left"> <input name="txtNroDocumento" type="text" size="8" maxlength="8" required></td> </tr> <tr> <td width="199">Apellido paterno *</td> <td width="371" align="left" > <input name="txtAP" list="Apellidos" type="text" size="25" maxlength="25" required autocomplete="on"> <datalist id="Apellidos"> <option value="ALVAREZ"/> <option value="APAZA"/> <option value="CHACON"/> <option value="CONDORI"/> <option value="CRUZ"/> <option value="CUSIHUAMAN"/> <option value="DELGADO"/> </datalist> </td> </tr> <tr>

<td>Apellido materno*</td> <td align="left" ><input name="txtAM" list="Apellidos" type="text" size="25" maxlength="25" required autocomplete="on"></tr> <tr> <td>Primer Nombre*</td> <td align="left"><input name="txtNombre" list="Nombres" type="text" size="25" maxlength="25" required autocomplete="on"> <datalist id="Nombres"> <option value="ABEL"/> <option value="ALBERTO"/> <option value="ALEJANDRINA"/> <option value="ALEJANDRO"/> <option value="ALFREDO"/> <option value="ALICIA"/> <option value="AMERICO"/> <option value="ANA MARIA"/> </datalist> </td> </tr> <tr> <td>Sexo*</td> <td align="left"> <input name="txtSexo" type="radio" value="M" checked="CHECKED"> <Label>Varon</Label> <input type="radio" name="txtSexo" value="F"> <Label>Mujer</Label></td> </tr>

Scrip34.php

Scrip34.php <tr> <td>Fecha nacimiento*</td> <td align="left"><input name="txtFecha" type="date" value="2000-01-01" ></td> </tr> <tr> <td>Coordenadas</td> <td align="left"> <img id="btnMapa" src="Art_img/service-facilities.png" style="cursor:pointer"> <input name="txtCoordenadas" type="text" placeholder="CLIC EN LA IMAGEN" size="6" readonly id="map_lat1" required> </td> </tr> <tr> <td>Contraseña</td> <td align="left" ><input name="txtContrasena" list="Apellidos" type="text" size="25" maxlength="25" required autocomplete="on"></tr> <tr> <tr> <td height="36" colspan="2" align="center"><input type="submit" name="btnGuardar" value="Guardar"></td> </tr> </table> </form> <div id="map_canvas" style="width:100%; height:600px;"> </div> <?php echo '<font color="#FF0000">'.$Mensaje.'</font>'; CerrarCursor($conn ); ?> </center> </body> </html>

Scrip34.php