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 similara C
Interpretado
Solicitudes
Soporta
Clases
es
Gráficos Socket
Libre
Archivos
Criptografía
XML
JSONFrameWorks
Muy
usado
Creado
Rasmusl
Lerddorf 1995
PHP/FI 2.0
Andi Gutmans
y Zeev Zurasky
1997
PHP3
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
NavegadorWeb Chrome, Firefox Chrome, Firefox

Instalación en Windows
• Se esta trabajandoen Windows7.
• Usara un paquete todo.
– XAMP
– Descargamos XAMP
– https://www.apachefriends.org/es/index.html
• Procedemos a instalar

Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS

Primer programa en PHP
Guarda en la carpeta
C:xampphtdocs
Con el nombre Scrip01.php
Llamamosmediante 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.

Operadores
MATEMÁTICOS BOLEADOS
+ Suma && And o i lógico
- Resta || Or u O lógico
* Multiplicación ! Not u Lógico
/ Divisióno 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
> Mayorque != 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/valorde la parte
derecha del operadora la variableque
esta a la izquierda del operador
-- Decremento en uno +=
Arreglos -=
+ Union /=
== Igualdad *=
=== Identidad(mismoorden
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

Ejemplo de 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.
GuardarScrip12.php

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

Trabajaren un
solo formulario
Trabajaren 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íasde atraso
<=8
– CPP cuando los días de atraso
están 9 a 30
– DEF cuando los díasde 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
Modifiqueel 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

FOREACH 1
Recuperar datos
de CheckBox

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>
<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

• 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()
funcionande 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
Guardarcomo Lib02.php
Guardar como Scrip33.php
La función
date

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

Creando una rutinas para
conectar gestionar bd SQL
Server
GuardarLibSQL01.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>
<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>
<formid="form1" name="form1"method="get" action="" onkeypress="return event.keyCode!=13">
<table width="576" cellspacing="0" >
<tr>
<th colspan="2" >REGISTRO DEPERSONA </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>Fechanacimiento*</td>
<td align="left"><inputname="txtFecha"type="date" value="2000-01-01" ></td>
</tr>
<tr>
<td>Coordenadas</td>
<td align="left">
<imgid="btnMapa"src="Art_img/service-facilities.png"style="cursor:pointer">
<inputname="txtCoordenadas"type="text" placeholder="CLICEN LA IMAGEN" size="6"readonlyid="map_lat1"required>
</td>
</tr>
<tr>
<td>Contraseña</td>
<td align="left"><inputname="txtContrasena" list="Apellidos"type="text"size="25"maxlength="25"required
autocomplete="on"></tr>
<tr>
<tr>
<td height="36"colspan="2"align="center"><inputtype="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>

Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS

Más contenido relacionado

La actualidad más candente (20)

Similar a Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS (20)

Último (20)

Desarrollo sistemas web con PHP, HTML5, GOOGLE MAPS