mariano_mdq78

Clase PDO PDO, escrita desde PHP 5.1 da un salto inmenso en el manejo de las bases de datos por PHP. Sencilla, elegante y poderosa capa de abstraccion de acceso a datos. La posibilidad de hacer uso de las mismas funciones para obtener y persistir datos no importa con quién estemos lidiando. Mysql, postgree, SQL server y más nunca había sido tán fácil como ahora, embebido en el lenguaje sin necesidad de librerías externas. Orientada a objetos permite mediante una isntancia a la clase PDO acceder a todo un mundo de posibilidades. Soporta los siguientes controladores: PDO_DBLIB: FreeTDS / Microsoft SQL Server / Sybase PDO_FIREBIRD: Firebird / Interbase 6 PDO_IBM: IBM DB2 PDO_INFORMIX: IBM Informix Dynamic Server PDO_SQLSRV: Microsoft SQL Server PDO_MYSQL: MySQL 3.x/4.x/5.x PDO_OCI: Oracle Call Interface PDO_ODBC: ODBC v3 (IBM DB2, unixODBC y win32 ODBC) PDO_PGSQL: PostgreSQL PDO_SQLITE: SQLite 3 y SQLite 2. Otra manera de conocer los controladores soportados por tu sistema es la siguiente print_r(PDO::getAvailableDrivers()); Como la usamos? sencillo. El objeto PDO debe ser instanciado, necesita solo los parámetros de conexión ya conocidos en cualquier librería de acceso a bases de datos. Veamos un ejemplo de como crear una clase para conectarnos a nuestra base de datos utilizando PDO. Clase conexion con PDO. <?php /** * @author Mariano Z * @copyright 2017 */ class Conexion extends PDO { private $tipo_de_base = 'mysql'; private $host = 'localhost'; private $nombre_de_base = 'mibasededatos'; private $usuario = 'root'; private $contrasena = ''; public function __construct() { //Sobreescribo el método constructor de la clase PDO. try{ parent::__construct($this->tipo_de_base.':host='.$this->host.';dbname='.$this->nombre_de_base, $this->usuario, $this->contrasena); }catch(PDOException $e){ echo 'Ha surgido un error y no se puede conectar a la base de datos. Detalle: ' . $e->getMessage(); exit; } } } ?> Modelo Clase Usuario La primera parte consta de la definicion de la clase con sus propiedades y atributo, Gets and Sets y el constructor de la clase __construct(). Incluimos el archivo donde esta definida la clase conexion con PDO utilizando require_once (requerido una vez), y al hacerlo ya tenemos acceso a el metodo que esta definido dentro. Luego cree dos metodos uno para actualizar y otro para guardar, el funcionamiento es sencillo si hay un ID es por que el usuario existe y se actualiza por ejemplo: cambion de contraseña, nombre, mail apellido.. etc. En cambio si el id es null es por que se va a registrar entonces en un solo metodo podemos agrupar dos acciones. <?php require_once('conexion.php'); /** * */ class Usuario { private $nombre; private $apellido; private $email; private $clave; private $id; const TABLA = "usuarios"; function __construct($nombre, $apellido, $email, $clave, $id=null) { $this->nombre = $nombre; $this->apellido = $apellido; $this->email = $email; $this->clave = $clave; $this->id = $id; } public function getId() { return $this->id; } public function getNombre() { return $this->nombre; } public function getApellido() { return $this->apellido; } public function getEmail() { return $this->email; } public function getClave() { return $this->clave; } public function setNombre($nombre) { $this->nombre =$nombre; } public function setEmail($email) { $this->email =$email; } public function setClave($clave) { $this->pass =$clave; } public function setApellido($apellido) { $this->apellido =$apellido; } public function guardar(){ $conexion = new Conexion(); if($this->id) /*Modifica*/ { $consulta = $conexion->prepare('UPDATE ' . self::TABLA .' SET nombre = :nombre, apellido = :apellido WHERE id = :id'); $consulta->bindParam(':nombre', $this->nombre); $consulta->bindParam(':apellido', $this->apellido); $consulta->bindParam(':id', $this->id); $consulta->execute(); }else /*Inserta*/ { $consulta = $conexion->prepare('INSERT INTO ' . self::TABLA .' (nombre, apellido, email, clave) VALUES(:nombre, :apellido, :email, :clave)'); $consulta->bindParam(':nombre', $this->nombre); $consulta->bindParam(':apellido', $this->apellido); $consulta->bindParam(':email', $this->email); $consulta->bindParam(':clave', $this->clave); $consulta->execute(); $this->id = $conexion->lastInsertId(); } $conexion = null; } } ?> Controlador Mi controlador es sencillo simplemente es para implementar la clase y crear el objeto siempre se puede mejorar mas, veran que solo incluyo la clase se puede usar requiere_once(); tambien. En esta parte recibo los datos del formulario creo el objeto y llamo al metodo guardar para registrar un nuevo usuario. <?php include('../clases/Usuario.php'); $nombre= $_POST['nombre'] ; $apellido =$_POST['apellido']; $email = $_POST['email']; $clave =md5($_POST['pass']); $id = null; $Ousuario = new Usuario($nombre,$apellido,$email,$clave,$id); $Ousuario->guardar(); echo $Ousuario->getNombre() . ' se ha guardado correctamente con el id: ' . $Ousuario->getId(); ?> Formulario HTML Y por último dejo el codigo del formulario recuerden que esta para ser enlazado con Bootstrap CSS para que lograr un estilo visual mas amigable. <!DOCTYPE html> <html> <head> <!-- Aca deberia enlazar mi CSS de bootstrap --> </head> <body> <div class="container"> <form class="form-horizontal" method="post" action="register"> <div class="form-group"> <label>Nombre</label> <input type="text" name="nombre" class="form-control" required="" placeholder="Ingrese su nombre" /> </div> <div class="form-group"> <label>Apellido</label> <input type="text" name="apellido" class="form-control" required="" placeholder="Ingrese su apellido" /> </div> <div class="form-group"> <label>Correo electronico</label> <input type="email" name="email" class="form-control" required="" placeholder="Ingrese su email" /> </div> <div class="form-group"> <label>Clave</label> <input type="password" name="pass" class="form-control" required="" placeholder="Escriba una clave" /> </div> <div class="form-group"> <label>Repita su clave</label> <input type="password" name="repass" class="form-control" required="" placeholder="Repita su clave" /> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Registrarme</button> </div> </form> </div> </body> </html> Y la vista desde el navegador seria la siguiente: Para visualizarlo mejor pueden visitar mi pagina web http://codigozeta.hol.es/index.php/php/conexion-pdo-controlador-y-modelo

Les dejo un video de mi arduino due con sensero de ultrasonido y dos led cuando la distancia es menor a 5cm se enciende el led rojo link: https://www.youtube.com/watch?v=7yIUtc9ZO-g dejo el codigo #include <NewPing.h> /*Aqui se configuran los pines donde debemos conectar el sensor*/ #define TRIGGER_PIN 12 #define ECHO_PIN 11 #define MAX_DISTANCE 1000 /*Crear el objeto de la clase NewPing*/ NewPing sonar(TRIGGER_PIN, ECHO_PIN, MAX_DISTANCE); void setup() { Serial.begin(9600); pinMode(13,OUTPUT); pinMode(10,OUTPUT); } void loop() { // Esperar 1 segundo entre mediciones delay(1000); // Obtener medicion de tiempo de viaje del sonido y guardar en variable uS int uS = sonar.ping_median(); // Imprimir la distancia medida a la consola serial // Calcular la distancia con base en una constante if ((uS / US_ROUNDTRIP_CM) < 5){ digitalWrite(10,LOW); digitalWrite(13,HIGH); Serial.print("Distancia: "); Serial.print(uS / US_ROUNDTRIP_CM); Serial.println("cm"); } else{ digitalWrite(10,HIGH); digitalWrite(13,LOW); Serial.print("Distancia: "); Serial.print(uS / US_ROUNDTRIP_CM); Serial.println("cm"); } } Pueden visitar mi pagina personal donde esta el codigo del proyecto http://codigozeta.hol.es/

Hola a todos este es mi primer post de angular 6, acompañado de unos videos tutoriales que ire subiendo a youtube, en este primer capitulo les voy a mostrar como instalar angular y correr el server local que ya trae incorporado. No voy a dar una explicacion de que se trata, lo pueden googlear creo que se entiende, y para lo que recien estan arrancando es un Framework de google para hacer aplicaciones del lado del Cliente si no me equivoco (frontend). 1- En primer paso debemos descargar e instalar NodeJs necesario para crear nuestra primera app en Angular. Para eso vamos a la pagina de NodeJs https://nodejs.org/es/ y descargamos la version recomendada. Una vez instalado lo que debemos hacer es ir en nuestra pc a inicio y en programabas buscar la carpeta de NodeJs y ejecutar el command prompt en modo administrador como se muestra en la imagen Una vez ejecutada la consola vamos a la pagina de Angular y seguimos las indicaciones que nos muestra Link de Angular https://angular.io/guide/quickstart para eso desde la consola debemos instalar el Angular CLI de manera global con la siguiente linea npm install -g @angular/cli y una vez instalado lo que hacemos es crear nuestro primero proyecto escribiendo en la consola el siguiente codigo ng new my-app debemos reemplazar el my-app por el nombre de nuestro proyecto Ojo que nuestra consola nos deja posicionado en el WindowsSystem32 y si no cambiamos de directorio nos descargara el proyecto en esa carpeta Si todo sale bien nos creara una carpeta con el nombre de nuestro proyecto en un directorio que seleccionemos. Luego les recomiendo que se bajen e instalen el VS code una ide de desarrollo muy practica y gratis!!! Del siguiente link https://code.visualstudio.com/ Abrimos nuestra carpeta desde la Ide y en la terminar levantamos el servidor escribiendo ng serve una vez compilado con exito vamos al navegador y escribirmos http://localhost:4200/ y se mostrara nuestro primero proyecto en Angular. Les dejo el link de los videos de Youtube ahi se explica bien comenten si les gusto y suscribanse a mi canal ire subiendo mas videos sobre Angular y otros lenguajes. Video link: https://www.youtube.com/watch?v=5w12_1ueSxI&t=6 Video link: https://www.youtube.com/watch?v=KMUMIfgzGkY Saludos y dejen puntos!!!!

Que son los componentes en angular? ...Los componentes son los bloques básicos de construcción de las páginas web en Angular 6, para entenderlo de una manera sencilla, puede ser una barra de navegacion con sus link, un formulario de inicio de sesion, uno de registro...etc que van a interactuar con nuestro proyecto. Angular cuando creamos nuestro proyecto inicial, trae un componente por defecto el app.component.ts (ts es por Typescript el lenguaje con el que esta escrito) Como se ve en la imagen hay 4 archivos destinados a un componente, el css para darle estilo, el html donde vamos a definir nuestra estructura web, el app.component donde va la logica del mismo, y el spect que es para testing. Entonces si quisieramos crear un componente nuevo por ejemplo un formulario de inicio de sesion deberiamos escribir en la consola el siguiente comando ng g c nombre_del_componente que es una abreviacion de generate component .... ese comando lo que hara es crearnos un directorio en el app con el nombre del componente por ejemplo "inicio" y dentro del los archivos mencionados antes. Como se observa en la imagen cree un componente desde la consola y se crea automanticamente una carpeta con los 4 archivos. Ahora si vamos a la carpeta y seleccionamos el inicio.component.html veremos una estructura web <p> inicio works! </> una leyenda a modo de indentificarnos que cuando lo llamemos y nos muestre el mensaje esta funcionando correctamente. Como podemos mostrar entonces el componente recien creado?, simple solo tenemos que llamarlo desde su selector, que es el selector ? para explicarlo de una manera sencilla seria como un tag clasico de html, como un <div> <html> etc... es la manera en que le indicamos a Angular que queremos mostrar ese componente (o bloque de estructura) , que nombre tiene este selector bueno podemos ir al archivo inicio.component.ts y ahi veremos el nombre con el cual se ha creado, por defecto siempre le pone el nombre de app-nombre_del_componente, en mi caso seria app-inicio como se muestra en la imagen. Si quisieramos personalizar este componente podriamos hacerlo desde el CSS darle un estilo propio, y cambiar la estructura en el inicio.component.html por ejemplo poner un formulario de inicio de sesion personalizado. Como hacemos para que este componente se visualice en mi pagina. En principio como mostre en el articulo anterior debemos hacer correr el servidor local que Angular trae incorporado con la siguiente linea ng serve abrir el navegador y escribir localhost:4200 y vamos a ver nuestra pantalla de inicio de angular recuerden que angular es un framework SPA o sea Simple Page Aplication es una sola pagina que se ejecuta todo de ahi y los componentes interactuan siempre ahi ...(eso creo jejeje) en fin ... para mostrar nuestro nuevo componente basta con ir al app.component.html y escribir el nombre del selector en mi caso seria <app-inicio></app-inicio> con esa linea lo estaria mostrando como se carga en la pagina dejo una imagen para visualizar. y en la pantalla del navegador se veria de la siguiente forma solo faltaria darle estilo y estructura html. Bueno espero que les haya gustado todavia no he subido el video a youtube de este capitulo, si les gusto comenten y dejen puntos!!!! En el proximo voy a explicar Routing (manejar las rutas de los componentes) e integrar Bootstrap a nuestro proyecto!!!

Rutas en Angular ... que son? bueno si vieron en los ejemplos anteriores nosotros creabamos nuestros componentes y los mostrabamos en la pagina a traves de sus selectores app-componente.... Pero como todo proyecto hay muchos componentes y no todos se pueden mostrar al mismo tiempo, por que la pagina seria ilegible, piensen en un formulario de registro, un form de login, etc... El usuario deberia hacer click en el link y poder acceder a dicha seccion, para eso hay que configurar las rutas, crear el modulos etc..etc... para que cuando hagamos click en cualquier link se cargue el componente correspondiente. Si seguimos la documentacion de Angular los pasos son muy sencillos Por convención, el nombre de la clase del módulo es AppRoutingModule y pertenece a app-routing.module.ts en la carpeta src / app. Usa el CLI para generarlo. (escribimos esta linea de comando para que nos genere los archivos necesarios para nuestro modulo de rutas) , podemos tambien hacerlo de forma manual, pero sigamos los pasos que nos suguiere Angular ng generate module app-routing --flat --module=app --flat pone el archivo en src / app en lugar de su propia carpeta. --module = app le dice a la CLI que lo registre en la matriz de importaciones del AppModule. Luego de ejecutar la lina de comando ng Angular nos dice que se nos va a crear un archivo con la siguiente estructura llamado src/app/app-routing.module.ts Si leemos la documentancion (en ingles) nos dice algo asi: Por lo general, no declara los componentes en un módulo de enrutamiento, por lo que puede eliminar la matriz @ NgModule.declarations y también eliminar las referencias de CommonModule. Configurará el enrutador con Rutas en el RouterModule para importar esos dos símbolos de la biblioteca @ angular / router. Agregue una matriz @ NgModule.exports con RouterModule en ella. Exportar RouterModule hace que las directivas de enrutador estén disponibles para su uso en los componentes de AppModule que las necesitarán. Bien vamos hacerlo en el proyecto que habia mostrado en el ejemplo anterior si no lo vieron les sugiero que vean mis otros post. Primero escribir en la consola la linea de comandos que nos sugiere Angular Como se muestra en la imagen le damos enter y nos va a generar los archivos necesarios, en la imagen se observa como los genero. Y si vemos el app.module.ts observamos que nos importo el modulo necesario para crear nuestrar rutas Bien que sigue ahora? supongamos que el componente inicio que habiamos creado en el post anterior se va a cargar por defecto seria como nuestro Index, que solo cambiara cuando el usuario haga click en algun link nuevo, entonces lo dejamos cargado como esta y vamos a crear un componente nuevo que seria nuestra barra de navegacion, como no tengo bootstrap ni ningun estivol visual todavia cargado lo que hare sera una lista con algunos links equivalentes a un navbar de html,con el comando ng creo un nuevo componente llamado navbar donde voy a poner los links al estilo barra de navegacion ng g c navbar una vez creado se veria asi : Bien ahora que nos quedaria? crear los links y obviamente los componentes que que se van a cargar a la hora de hacer click en dichos links basicamente seria repetir el paso anterior ng g c componente1 ...2 ..y 3.. que podrian ser formularios de distintos tipos o secciones etc... no voy hacer captura de eso me voy abocar a mostrar la barra de navegacion o el componente navbar. Primero vamos a la documentacion de Angular y nos dice que debemos modificar el modulo app-routing.module.ts copiando la siguiente linea de comando deberia verse como abajo importar el routermodule, routes y en el export escribir RouterModule. import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; @NgModule({ exports: [ RouterModule ] }) export class AppRoutingModule {} En mi caso particular copie y pegue los pasos de la documentancion de Angular sin modificar ni borrar nada del archivo app-routing.module.ts como se muestra en la imagen: Luego lo que deberiamos hacer es en el mismo archivo importar los componentes que vamos a cargar o sea lo que vamos a mostrar cuando se haga click en algun link de la siguiente manera como se muestra en la imagen. y en la linea que dice { path: '**', redirectTo: 'inicio', pathMatch: 'full' } le indico que si el usuario ingresa una direccion equivocada ** redireccione al componente inicio, ustedes pueden modificarlo por cualquier otro. Lo que se hizo fue crear una constante llamada routes (pueden cambiar por otro nombre si quieren) donde en un array (arreglo) se van a cargar todas las rutas con sus nombres o alias y sus componentes. En la imagen se ve como quedaria mi app-routing terminado. Dejo el codigo de mi app-routing por si no se ve bien la imagen import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Componente1Component } from './componente1/componente1.component'; import { Componente2Component } from './componente2/componente2.component'; import { InicioComponent } from './inicio/inicio.component'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'inicio', component: InicioComponent }, { path: 'componente1', component: Componente1Component }, { path: 'componente2', component: Componente2Component }, { path: '**', redirectTo: 'inicio', pathMatch: 'full' } ]; @NgModule({ imports: [ RouterModule.forRoot(routes), CommonModule ], exports: , declarations: [] }) export class AppRoutingModule { } Asi es como quedaria mi componente navbar.component.html donde armo una lista con los links usamos el tag <a> pero en vez de href, usamos el routerLink Luego en el app.component.html escribimos el selector app-navbar que nos cargar el componente con la lista de link y no debemos olvidar escribir tambien <router-outlet></router-outlet> que hara que se carguen los componentes al momento de hacer click en el link. vamos al navegador y miramos como quedo nuestra pagina por defecto esta para que se cargue con el componente de inicio si lo queremos modificar vamos al app-routing y en la linea de redirect cambiamos el componente a mostrar y como se observa en la siguiente imagen hago click al componente1 y lo muestra en este caso muestra la leyenda que puse por defecto. Bueno espero que les haya gustado!! comenten dejen puntos!!! jaja que costo mucho armarlo y a los que no les gusta Angular entiendan que hoy las empresas piden mucho de estos Frameworks y no esta de mas que alguien les explique.

Luego de dar muchas vueltas y buscar para que mi web tenga dominio .com.ar y sacarle la que te pone el freeserver encontre un videito muy explicativo de como delegar los dns de tu pagina web las enumero y adjunto video de youtube. 1- Tener el dominio registrado (no hace falta delegarlo en el mismo momento). 2- Tener registrada nuestra pagina web en este caso en 000webhost. 3- Ir a nic.ar en la parte de tramiste via web ir a altas --->delegaciones 4- Seleccionar (escribir) el dominio que vamos a delegar (o sea el nuetro) www.mipagina.com.ar... luego el mail del responsable (mail con el que registraste el dominio). 4- Luego te va a pedir los dns que los sacas del servidor en este caso seria ns01.000webhost.com 208.43.152.xxxxx ns02.000webhost.com 64.120.10.xxxx cambie las ip xq son las de mi web ... a ustedes les daran otra... 4- luego le dan al boton delegar y aparede un cuadrito con que dice ISP Extranjera 000webhost.com tocan buscar ... y seleccionana ISP Extranjera 000webhost.com ARG 5- despues le pone buscar contacto tecnico asi como aparece el nombre tocan buscar y seleccionan IPS Extranjera 000webhost FMP 6 - confirmar y esperan que les llege un mail y lo reenvian a nic.ar 7- En nuestro servidor 000webhost van a la opcion que dicen Parked domians y donde dice park escriben la direccion que registraron en nic.ar www.mipagina.com.ar le dan parkear y listo. Puede que les tarde unos dias e n algunas ocaciones me tardo 2 dias en otras mas de una semana nic.ar anda muy mal!!! si puden paguen un dominio .com!!! Espero que les haya servido. Les dejo un video que explica en forma grafica lo que acabo de escribir. Saludos!!! link: http://www.youtube.com/watch?v=qN4He14rcNA Si les sirvio comenten!!! Gracias!

El botón Me gusta de Facebook es un social plugins que nos permite ver lo que a nuestros amigos les ha gustado, han comentado o compartido en sitios a través de la web y este se publica automáticamente en el muro de su perfil de Facebook Todos los plugins son extensiones sociales de diferentes sitios de Web 2.0 y están diseñados específicamente para que ningunos de sus datos aparezcan en los sitios en los que se comenten o compartan, pero ahora le toca el turno a la nueva era de Social Plugins de Facebook con los cuales podrás compartir lo que te gusta de un sitio. Para integrar el botón me gusta de Facebook en tu sitio, es muy sencillo solo hay que seguir estos sencillos pasos: Visitar el Sitio de Developers Facebook Visita el enlace del Botón Me gusta para sitios web y escoge las especificaciones que deseas para tu botón. Enlace para el Boton Me gusta de Facebook Este es el código que te genera Facebook para tu botón me gusta Para agregar el botón me gusta a tu sitio una vez generado el código solo tienes que ir y agregar el código donde quieres que aparezca el botón me gusta de Facebook en tu sitio web.

Hace tiempo llevo programando por mi cuenta en PHP, empece a investigar un poco sobre POO en PHP les comparto una Clase y la forma de instanciarla. Es parte de un proyecto qeu estoy empezando a diseñar <?php /** * @author Mariano Zanier * @copyright 2014 */ class persona { protected $_nombre; protected $_email; protected $_provincia; protected $_ciudad; protected $_sexo; protected $_fechanac; protected $_pass; /*Constructor de la clase lleva doble guion bajo "__"*/ public function __construct($nombre, $email, $provincia, $ciudad, $sexo, $fechanac, $pass) { $this->_nombre = $nombre; $this->_email = $email; $this->_provincia = $provincia; $this->_ciudad = $ciudad; $this->_sexo = $sexo; $this->_fechanac = $fechanac; $this->_pass = $pass; } function getNombre() { return $this->_nombre; } function getEmail() { return $this->_email; } function getProvincia() { return $this->_provincia; } function getCiudad() { return $this->_ciudad; } function getSexo() { return $this->_sexo; } function getFecha() { return $this->_fechanac; } function getPass() { return $this->_pass; } } ?> /**********************************************************************************************/ /* Persona.php con este archivo instanciamos la clase y creamos el objeto */ /**********************************************************************************************/ <?php /** * @author Mariano Zanier * @copyright 2014 */ /*inculimos la clase persona*/ include('clasepersona.php'); /* hacemos el new del objeto y pasamos los valores, esos valores podrian ser reemplazados por algun textbox... en caso de trabajar con paginas web*/ $objpersona = new persona("Mariano","[email protected]","buenos aires","mar del plata","Hombre","09/09/78","123456"; /*hacemos un echo de dos campos como para observar los valores almacenados*/ echo $objpersona->getNombre().', '. $objpersona->getFecha(); /******************************************************************************************************************/ /* Espero que les haya gustado es un ejemplo sencillo pero para los que recien se estan */ /* iniciando quizas les sirva proximamente ire subiendo un poco mas de material como para*/ /*hacer lo mas entretenido. Saludos y comenten! */ /********************************************************************************************************************/