Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS
70
TÓPICOS EN INGENIERÍA INFORMÁTICA Y SISTEMAS Desarrollo de aplicaciones con PHP Ing. Arturo CUBA TORRES
-
Upload
arturo-cuba-torres -
Category
Technology
-
view
164 -
download
0
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
