TUTORIAL PROYECTO PHP+MYSQL EN LA PLATAFORMA AZURE DE MICROSOFT

Elaborado por: Carlos Arturo Castro Castro

DESCRIPCIÓN

Este tutorial es para estudiantes de nivel básico e intermedio, desarrolladores de php+mysql. El ejemplo
presentado fue desarrollado con la arquitectura vista->modelo->vista->control (VMVC) y el código en
php, HTML5, JavaScript y CSS incluido, hace parte de las clases de programación orientada a objetos y a
la web orientadas por el autor. Puede tomarse como base e incluirle otras tecnologías como Boostrap
para hacerlo resposive o Ajax y Jquery para mejorar la eficiencia.

PARTE 1: PUBLICAR EL PROYECTO PHP

1. Activar la cuenta Azure para estudiantes utilizando el email institucional

Si no tiene cuenta como estudiante, abra una cuenta de Microsoft y hace una suscripción gratis
por un año. Requiere tarjeta de crédito.

2. Ingresar a la plataforma azure y crear una aplicación web en un nuevo grupo de recursos
3. Decidimos nombrar Grp1PHP el grupo de recursos y phptdg el nombre de la instancia, php 7.0,
sistema operativo Windows, región del datacenter, Sur África

4. Revisar y crear
5. Ir al recurso
6. Ingresar a la URL : https://phptdg.azurewebsites.net

7. Cerrar esa página e ir a centro de implementación

8. Seleccionar protocolo FTP y luego panel
 9. Copiar el punto de conexión ftps, el usuario y la contraseña generada para el usuario FTP

ftps://waws-prod-jnb21-001.ftp.azurewebsites.windows.net/site/wwwroot

Nombre de Usuario: phptdg\$phptdg

Contraseña: Yree0dAntqbleoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJup7wuGtMuZ

10. Ingresar al explorar de archivos de Windows de su equipo y copiar la dirección del protocolo FTP
11. Ingresar las credenciales

12. Abre dos ventanas

13. Copiar la carpeta con el proyectoClientes
 14. En un navegador web ingresar la dirección del proyecto

phptdg.azurewebsites.net/proyectoClientes/
Diagrama de Secuencia ValidarIngreso
PARTE 2: CREAR UNA BASE DE DATOS MYSQL EN AZURE

1. Ir a todos los servicios en la plataforma azure y buscar mysql

2. Seleccionar Servidores de Azure Database for MySQL

3. Click en Crear Servidor de Azure Database for MySQL

4. Seleccionar el grupo de recursos GrpRec1PHP

5. Nombre del servidor: serv1mysql, usuario administrador: adminmysql, Contraseña: ********,

ubicación: centro sur de Estados Unidos, versión 5.7

6. Click en configurar servidor y seleccionar plan de tarifa básico - > aceptar

7. Click en Revisar y Crear

8. Click en crear
9. Click en ir al recurso
1. Click en seguridad de la conexión

2. Click en permitir el acceso remoto (click en on= activado) y click en guardar

 3. Asignar la dirección ip a la cual se le dará acceso al servidor

Una forma es buscar la ip en la página: cualesmiip.com

4. Se escribe un nombre para la regla (reg1mip) y se copia la ip en los campos ip inicial e ip final
luego click en guardar
 5. Se desactiva la opción de certificado SSL(Secure Sockets Layer ver
https://youtu.be/tHhFQaurGAg) del lado del cliente

Click en deshabilitado y guardar. Esto está bien para ambiente de desarrollo, pero se debe activar el
certificado SSL en ambiente de producción
 6. Click en Información general

PARTE 3: CREAR Y ADMINISTRAR UNA BASE DE DATOS MYSQL ALOJADA EN AZURE, CON MySQL
Workbench

1. para acceder a la administración de esa base de datos MySQL, puede utilizar cualquier
herramienta. Aquí se va a utilizar mysql workbench
2. click en Database->Manager Server Conection -> click en new
3. Escribir un nombre para la conexión. Para este caso se escribió conMysqlAzure.
Método de conexión estándar TCP/IP. Nombre del servidor copiado de la información general:
serv1mysql.mysql.database.azure.com
Nombre del usuario tomado de la información general: adminmysql@serv1mysql
4. Click en test de conexion

5. Se digita la clave asignada en el paso 5 y ok

6. Click en ok

7. Se abre una interface de usuario para administrar la base de datos en MySql Azure

8. Crear un nuevo esquema llamado dbclientes en el servidor mySql Azure

9. Click en aplicar y luego aplicar y luego finalizar
10. Crear una nueva tabla en el esquema activo (dbclientes)
11. Ingresar el nombre del esquema a la conexión
12. Crear una nueva tabla en el esquema activo(dbclientes)

13. La tabla cliente, tiene los campos: codigo, nombre y credito. Click en aplicar
14. Click en aplicar y luego en finalizar
15. Crear la tabla usuario para la validación de ingreso y manejo de sesión
La tabla usuario tiene dos campos: usuario y contraseña y click en aplicar ->aplicar->finalizar
16. Ingresar un registro a la tabla usuario
 17. Ahora se regresa a la plataforma azure. Revise las diferentes opciones:

Información general
 Registro de Actividad

Seguridad de la conexión
Cadenas de conexión para diferentes lenguajes de programación

Plan de tarifa
Propiedades
 PARTE 4: DESARROLLAR UN PEQUEÑO PROYECTO PHP+MYSQL CON ARQUITECTURA

VISTA->MODELO->VISTA->CONTROL (VMVC) Y PUBLICARLO EN AZURE

1. Crear una carpeta llamada proyectoClientes, con tres subcarpetas llamadas modelo, vista y
control

2. Crear la clase Usuario en el archivo Usuario.php y la clase Cliente en el archivo Cliente.php

En la carpeta modelo
Usuario.php

<?
class Usuario{

var $nomUsuario;
var $contrasena;

function __construct($nomUsuario,$contrasena){
$this->nomUsuario= $nomUsuario;
$this->contrasena = $contrasena;
}

function getContrasena() {
return $this->contrasena;
}

function setContrasena($contrasena) {
$this->contrasena = $contrasena;
}

function getNomUsuario() {
return $this->nomUsuario;
}

function setNomUsuario($nomUsuario) {
$this->nomUsuario = $nomUsuario;
 }
}

?>

Cliente.php

<?php
class Cliente{
var $codigo;
var $nombre;
var $credito;
function __construct($codigo,$nombre,$credito)
{
$this->codigo=$codigo;
$this->nombre=$nombre;
$this->credito=$credito;
}
function setCodigo($codigo) { $this->codigo = $codigo; }
function getCodigo() { return $this->codigo; }

function setNombre($nombre) { $this->nombre = $nombre; }

function getNombre() { return $this->nombre; }

function setCredito($credito) { $this->credito = $credito; }

function getCredito() { return $this->credito; }
}
?>

3. Crear el archivo de configuración configBd y las clases ControlCliente, ControlConexion y

ControlUsuario en los archivos .php con el mismo nombre y guardarlos en la carpeta control
configBd.php

<?php
//$GLOBALS['serv']="localhost";
//$GLOBALS['usua']="root";
//$GLOBALS['pass']="";
//$GLOBALS['bdat']="bdclientes";
$GLOBALS['serv']="serv1mysql.mysql.database.azure.com";
$GLOBALS['usua']="adminmysql@serv1mysql";
$GLOBALS['pass']="***********";
$GLOBALS['bdat']="dbclientes";
?>

ControlCliente.php
<?php

class ControlCliente {
var $objCliente;

function __construct($objCliente){
$this->objCliente=$objCliente;

function guardar(){
$cod=$this->objCliente->getCodigo();
$nom=$this->objCliente->getNombre();
 $cre=$this->objCliente->getCredito();
$objConexion = new ControlConexion();
$objConexion->abrirBd($GLOBALS['serv'],$GLOBALS['usua'],$GLOBALS['pass'],$GLOBALS['bdat']);
$comandoSql="INSERT INTO CLIENTE(CODIGO,NOMBRE,CREDITO) VALUES('".$cod."','".$nom."',".$cre.")";
$objConexion->ejecutarComandoSql($comandoSql);
$objConexion->cerrarBd();
}

function modificar(){
$cod=$this->objCliente->getCodigo();
$nom=$this->objCliente->getNombre();
$cre=$this->objCliente->getCredito();
$objConexion = new ControlConexion();
$objConexion->abrirBd($GLOBALS['serv'],$GLOBALS['usua'],$GLOBALS['pass'],$GLOBALS['bdat']);
$comandoSql="UPDATE CLIENTE SET NOMBRE='".$nom."',CREDITO=".$cre." WHERE CODIGO='".$cod."'";
$objConexion->ejecutarComandoSql($comandoSql);
$objConexion->cerrarBd();
}

function borrar(){
$cod=$this->objCliente->getCodigo();
$objConexion = new ControlConexion();
$objConexion->abrirBd($GLOBALS['serv'],$GLOBALS['usua'],$GLOBALS['pass'],$GLOBALS['bdat']);
$comandoSql="DELETE FROM CLIENTE WHERE CODIGO='".$cod."'";
$objConexion->ejecutarComandoSql($comandoSql);
$objConexion->cerrarBd();
}
function consultar(){

$cod=$this->objCliente->getCodigo();
$objConexion = new ControlConexion();
$objConexion->abrirBd($GLOBALS['serv'],$GLOBALS['usua'],$GLOBALS['pass'],$GLOBALS['bdat']);
$comandoSql="SELECT * FROM CLIENTE WHERE CODIGO='".$cod."'";
$recordSet=$objConexion->ejecutarSelect($comandoSql);
$registro = $recordSet->fetch_array(MYSQLI_BOTH);
$this->objCliente->setNombre($registro["nombre"]);
$this->objCliente->setCredito($registro["credito"]);
$objConexion->cerrarBd();
return $this->objCliente;
}
}
?>

ControlUsuario.php
<?
class ControlUsuario{
var $objUsuario;
function __construct($objUsuario){
$this->objUsuario=$objUsuario;

function validarIngreso(){
$esValido=false;
$objUsuario1 = new Usuario('','');
$usu= $this->objUsuario->getNomUsuario();
$con=$this->objUsuario->getContrasena();
$objConexion = new ControlConexion();
 try{
$objConexion->abrirBd($GLOBALS['serv'],$GLOBALS['usua'],$GLOBALS['pass'],$GLOBALS['bdat']);
$comandoSql="SELECT * FROM USUARIO WHERE USUARIO='".$usu."' AND CONTRASENA='".$con."'";
$recordSet=$objConexion->ejecutarSelect($comandoSql);
$registro = $recordSet->fetch_array(MYSQLI_BOTH);
$objUsuario1->setNomUsuario($registro['usuario']);
$objUsuario1->setContrasena($registro['contrasena']);
;
}
catch (Exception $e)
{
echo "ERROR ".$e->getMessage()."\n";
}
$objConexion->cerrarBd();

if ($this->objUsuario->getNomUsuario()==$objUsuario1->getNomUsuario() &&
$this->objUsuario->getContrasena()==$objUsuario1->getContrasena() &&
$this->objUsuario->getNomUsuario() != "" &&
$this->objUsuario->getContrasena() != "")
{
$esValido = true;
}
else
{
$esValido = false;
}
return $esValido;
}
}
?>

ControlConexion.php
<?php

class ControlConexion{

var $conn;
function __construct(){
$this->conn=null;
}
function abrirBd($servidor, $usuario, $password,$db){
try {
$this->conn = new mysqli($servidor, $usuario, $password, $db);
if ($this->conn->connect_errno) {
printf("Connect failed: %s\n", $this->conn->connect_error);
exit();
}
}
catch (Exception $e){
echo "ERROR AL CONECTARSE AL SERVIDOR ".$e->getMessage()."\n";
}

function cerrarBd() {
try{
$this->conn->close();
 }
catch (Exception $e){
echo "ERROR AL CONECTARSE AL SERVIDOR ".$e->getMessage()."\n";
}
}

function ejecutarComandoSql($sql) {
try {
$this->conn->query($sql);
}
catch (Exception $e) {
echo " NO SE AFECTARON LOS REGISTROS: ". $e->getMessage()."\n";
}
}

function ejecutarSelect($sql) {
try {
$recordSet=$this->conn->query($sql);
}

catch (Exception $e) {

echo " ERROR: ". $e->getMessage()."\n";
}
return $recordSet;
}
}
?>

4. Crear los archivos menu.php, vistaCliente.php y cerrarSesion.php en la carpeta vista

menu.php

<?php
session_start();
if($_SESSION['Usu']== null)header('Location: ../index.php');
echo"
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
</style>
</head>
<body>

<div class='navbar'>
<a href='#home'>Home</a>
<a href='../vista/cerrarSesion.php''>Cerrar Sesión</a>
<a href='../vista/vistaCliente.php'>Clientes</a>
</div>
<h3>Barra de Menú</h3>
<p>Click en una opción del menú.</p>
</body>
</html>
";
?>

vistaCliente.php
<?php
session_start();
if($_SESSION['Usu']== null)header('Location: ../index.php');
include("../control/configBd.php");
include("../modelo/Cliente.php");
include("../control/ControlCliente.php");
include("../control/ControlConexion.php");
try{
$cod=$_POST["txtCodigo"];
$nom=$_POST["txtNombre"];
$cre=$_POST["txtCredito"];
$bot=$_POST["btn"];
switch ($bot) {
case "Guardar":
$objCliente= new Cliente($cod,$nom,$cre);
$objControlCliente= new ControlCliente($objCliente);
$objCliente=$objControlCliente->guardar();
break;
case "Consultar":
$objCliente= new Cliente($cod,"",0);
$objControlCliente= new ControlCliente($objCliente);
$objCliente=$objControlCliente->consultar();
$nom=$objCliente->getNombre();
$cre=$objCliente->getCredito();
//echo phpinfo();
break;
case "Modificar":
$objCliente= new Cliente($cod,$nom,$cre);
$objControlCliente= new ControlCliente($objCliente);
$objCliente=$objControlCliente->modificar();
break;
case "Borrar":
$objCliente= new Cliente($cod,"",0);
$objControlCliente= new ControlCliente($objCliente);
$objCliente=$objControlCliente->borrar();
break;
}
}
catch (Exception $objExp) {
echo 'Se presentó una excepción: ', $objExp->getMessage(), "\n";
}
echo"
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
table {
 font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form method='post' action='vistaCliente.php'>
<table>
<tr>
<td colspan='2'>Clientes</td>
</tr>
<tr>
<td>Código</td><td><input type='text' name='txtCodigo' value='".$cod."'></td>
</tr>
<tr>
<td>Nombre</td><td><input type='text' name='txtNombre' value='".$nom."'></td>
</tr>
<tr>
<td>Crédito</td><td><input type='text' name='txtCredito' value='".$cre."'></td>
</tr>
</table>
<table>
<tr>
<td><input type='submit' name='btn' value='Guardar'></td>
<td><input type='submit' name='btn' value='Consultar'></td>
<td><input type='submit' name='btn' value='Modificar'></td>
<td><input type='submit' name='btn' value='Borrar'></td>
</tr>
</table>
</form>
</body>
</html>
";
?>
cerrarSesion.php

<?php
session_start();
session_destroy();
header('Location: ../index.php');
?>

5. Crear el archivo index.php y guardarlo en la carpeta proyectoCliente

index.php

<?php
session_start();
include("control/configBd.php");
include("modelo/Usuario.php");
include("control/ControlUsuario.php");
include("control/ControlConexion.php");
try{
$usu=$_POST["txtUsuario"];
$con=$_POST["txtContrasena"];
$bot=$_POST["btn"];

if($bot=="Ingresar"){
$objUsuario=new Usuario($usu,$con);
$objCtrUsuario =new ControlUsuario($objUsuario);
if($objCtrUsuario->validarIngreso()){
$_SESSION['Usu']= $usu;
$_SESSION['Con']= $con;
header('Location: vista/menu.php');
}
else{
echo "<script>alert('Usuario y/o contraseña incorrectos');</script>";
}
}
}
catch (Exception $objExp) {
echo 'Se presentó una excepción: ', $objExp->getMessage(), "\n";
}
echo "<script>alert('Usuario = invitado Contraseña= invitado');</script>";
echo "
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
}

td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form method='post' action='index.php'>
<table>
 <tr>
<td colspan='2' >Ingresar</td>
</tr>
<tr>
<td>Usuario</td><td><input type='text' name='txtUsuario'></td>
</tr>
<tr>
<td>Contraseña</td><td><input type='password' name='txtContrasena'></td>
</table>
<table>
<tr>
<td><input type='submit' name='btn' value='Ingresar'></td>
</tr>
</table>
</form>
</body>
</html>
";
?>

6. Ingresar al explorar de archivos de Windows de su equipo y copiar la dirección del protocolo FTP
obtenida en el centro de implementación en la plataforma azure

ftps://waws-prod-jnb21-001.ftp.azurewebsites.windows.net/site/wwwroot

Nombre de Usuario: phptdg\$phptdg

Contraseña: Yree0dAntqbleoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJup7wuGtMuZ

7. Ingresar las credenciales

8. Abre dos ventanas

9. Copiar la carpeta con el proyectoClientes
 10. En un navegador web ingresar la dirección del proyecto

phptdg.azurewebsites.net/proyectoClientes/