Ejemplos Básicos con AngularJS

AngularJS es un framework MVC (Modelo vista Controlador) de JavaScript para el Desarrollo de aplicaciones Web Front-End el cual permite crear aplicaciones Single-Page Applications o SPA. Angular esta dentro de la familia de frameworks como BackboneJS o EmberJS.
Recomiendo el blog de joelhooks y su post "learn angular this weekend" para ampliar información.


Ejemplos sencillos con AngularJS

Empezamos descargando AngularJS desde su sitio oficial angularjs.org

Podemos también copiar el enlace directo para pegarlo en nuestro archivo, por esta vez haremos la descargar.

Creamos un proyecto "MyApp" y su respectiva pagina principal index.html

Iniciamos con un código HTML, en el hacemos la llamada del archivo js de angular, de la siguiente manera

ng-app: se incluye dentro de la etiqueta en la que se ejecutará la aplicación js, en este caso body

ng-init: Es usado para definir las tareas de inicialización de la aplicación, en este caso creamos un modelo llamado "escritor". NOTA: Sin embargo no es recomendable incluir ng-init dentro de la vista (plantilla o archivo html) debe ir en el controller, solo para este primer ejemplo fue usado ahí.


Otro ejemplo

Declaramos el modelo nombre y posteriormente lo llamamos en Hola {{nombre}}, esto permitirá que al escribir algo en el input se recargue automaticamente:

Otro ejemplo...

En este ejemplo se pondrá un input donde se pueda escribir el tipo de clase para cambiar el color al texto, para esto incluiremos bootstrap.

vamos a http://getbootstrap.com/getting-started/  y podemos descargarlo o simplemente copiar el CDN

los tipos de clase son entre otros: success(verde) warning(amarillo) danger(rojo)..

Read More

Modelos y Migraciones_2

Desde el explorador o el finder creamos dentro del proyecto la carpeta "apps", aquí estarán las aplicaciones que usaremos (ejemplo: usuarios, compras, vuelos, entre otros) según nuestro proyecto.

Dentro de esta carpeta utilizando el editor preferido (sublime text2 en este caso) creamos un documento nuevo que se llame "__init__.py", esto es para que python identifique esta carpeta como archivo de python.

ahora por el terminal nos ubicamos en esta carpeta, (recordar activar entorno virtual)

Para activar entorno virtual        $source bin/activate   

Con el entorno activado y dentro de la carpeta "apps" ejecutamos el siguiente comando

$django-amin.py startapp app1

Del mismo modo, creamos la app2

$django-amin.py startapp app2

Dentro de cada app encontraremos el archivo models.py en los cuales podremos escribir las clases que necesitemos, un ejemplo de esto será el siguiente:

(Se recomienda que las clases siempre esten escritas en singular Ej: Persona, Empleo, Viaje...Etc)

Para mas información sobre modelos podemos revisar este enlace

Ahora crearemos las migraciones, para poder pasar este archivo como campos en una tabla de nuestra base de datos

Nos ubicamos por medio de la terminal en nuestro proyecto, es decir cuando ejecutemos "ls" debe estar el archivo "manage.py"

Estando aqui ejecutamos el siguiente comando

$manage.py makemigrations

En la carpeta app1 y/o app2 veremos la carpeta "migrations" dentro debe haberse creado el archivo 0001_initial.py, dentro estará nuestra migración 

Ahora para realizar las migraciones ejecutamos el siguiente comando

$manage.py migrate

Al revisar nuestra base de datos, se debe haber creado una tabla llamada app1_persona

Read More

How to start mysql server + MAC XAMPP

When our mysql server does not work from the graphic interface the solution is run it from the terminal.

$cd Applications/XAMPP/xamppfiles/mysql

Into this folder we write the following comand

$ mysql.server start

When we check the graphic interface, mysql server have to be in running status

Read More

Creando Proyecto con Django

Si ya tenemos nuestro entorno virtual, dentro de este vamos a ejecutar el comando

$django-admin.py startproject myApp

Cuando este creado vamos al directorio por medio del Finder o explorador y creamos una carpeta aparte que se llame "apps"

También puede ser creada desde Sublime o el editor que elijamos

Para que la carpeta sea reconocida como un paquete de python necesitamos crear el archivo __init__.py, este archivo debe ser creado dentro de la carpeta "apps"

Dentro de esta carpeta "apps" crearemos las aplicaciones necesarias para nuestro proyecto

En la consola nos ubicamos en la carpeta "apps" y ejecutamos el siguiente comando:

(entornovirtual)$ django-admin.py startapp nameapp1

nameapp1 sería el nombre de la app creada, al ejecutar este comando se nos debe crear una carpeta con el contenido como este:

Para que estas apps sean reconocidas, debemos ir al archivo setting, ubicado dentro de la carpeta myApp, y en la linea 33 encontramos INSTALLED_APPS, ahi al final las añadimos de la siguiente manera

Se hace lo mismo con todas las apps que se vayan creando

En el mismo archivo ahora configuramos la base de datos, en esta caso estoy usando postgresql con psycopg2 y la base de datos se llama app1

Para poder hacer las migraciones nos ubicamos en la carpeta que contiene el archivo manage.py y ejecutamos

$python manage.py migrate

Para enterarte mas sobre migraciones mira este link

y la base de datos debería verse así: 

Read More

Instalar Django en MAC

Después de tener instalado Python correctamente (Recomendado versión 2.7 o superior), debemos instalar pip el cual es un sistema de instalación de paquetes de python, conoce mas en este enlace, para esto ejecutamos el siguiente comando.

$ sudo easy_install pip

Ahora instalaremos virtualenv el cual es unn entorno virtual de Python es un espacio completamente independiente de otros entornos virtuales y de los paquetes instalados globalmente en el sistema.

$ sudo pip install virtualenv

Ahora haremos la prueba ubicándonos en alguna carpeta especifica (ejemplo Desktop)

Ahí ejecutamos el siguiente comando:

$virtualenv myname

Donde myname será el nombre del proyecto

Ahora veremos la carpeta que se ha creado y debe contener los siguientes archivo

Para activar el nuestro entorno virtual debemos entrar a la carpeta, llamada en este caso myname

$cd myname

Estando dentro ejecutamos

$ source bin/activate

Esto nos permite entrar al entorno virtual, para salir debemos teclear

$deactivate

Activando el entorno virtual ejecutamos

$pip freeze

Freeze es una utilidad de python que permite compilar ejecutables, mira mas en este enlace

Freeze nos dira si tenemos instalado django en nuestro entorno virtual, como no va a ser así debemos instalarlo con el siguiente comando

$ pip install django

y la instalación deberá iniciar

Al ejecutar de nuevo pip freeze debe aparecer django instalado

Este proceso se puede hacer en cada entorno virtual que creemos, y se puede utilizar diferentes versiones de django si así se prefiere.

Para iniciar un nuevo proyecto ejecutamos dentro de nuestro entorno virtual y estando este activado el siguiente comando

(myname) $ django-admin.py startproject my_project

Una carpeta llamada my_project deberá aparecer en la carpeta myname

Para correr el servidor, entramos a la carpeta my_project, dentro habrá un archivo "manage.py" y otra carpeta "my_project", ejecutamos el siguiente comando:

(myname)$ python manage.py runserver

Comprobamos si en la dirección dada esta funcionando django

Es todo! podemos instalar django en cualquier entorno virtual deseado...!!!

Adicional: para poder hacer las migraciones correctamente a nuestra base de datos se recomienda instalar pyscopg2, en mac se ejecuta el siguiente comando:

(myname)$ pip install psycopg2

Luego verificamos con

(myname)$ pip freeze

y debe aparecer django y pyscopg2

Read More

Variables de Sesión en PHP

En este post compartiré un código que encontré buscando en mis viejos archivos y proyectos, es un código para obtener variables de sesión en un login realizado en PHP y Mysql.

Primero empezaremos con el formulario para el login, y definiremos los name de los input como email y password.


<form action="login.php" method="POST">
<input type="text" name="email">
<Input type="pass" name="password">
<input type="submit" name="login" value="Iniciar Sesión" />

Ahora en el archivo login.php al cual se va a dirigir y llevar nuestros datos vamos a poner el siguiente código


<?php
   //Start session
   session_start();
   
   $errmsg_arr = array();
   
   //Validation error flag
   $errflag = false;
   
Aqui incluimos nuestro archivo de conexión a base de datos
  require_once('../conexion.php'); 
   
Aquí definimos las variables $email y $password con los datos capturados en los inputs

   $email = $_POST['email'];   
   $password = $_POST['password'];
   
      
   //If there are input validations, redirect back to the login form
   if($errflag) {
      $_SESSION['ERRMSG_ARR'] = $errmsg_arr;
      session_write_close();
      header("location: index.php");
      exit();
   }
   
En este apartado seleccionamos de nuestra base de datos llamada users los usuarios que coincidan con que el email y el password sean correctos
   //Create query
   $qry="SELECT * FROM users WHERE email='$email' AND password='$password'";
   $result=mysqli_query($link,$qry);
   
   //Check whether the query was successful or not
   if($result) {
      if(mysqli_num_rows($result) == 1) {
         //Login Successful
         session_regenerate_id();
         $member = mysqli_fetch_assoc($result);            
         
En esta parte del código llamamos a nuestros campos creados en la base de datos, al final del post se puede ver la base de datos, en este caso hemos llamado a los campos: id, nombre, ciudad y email, creando variables para cada uno de ellos tales como $_SESSION['ID']....etc, estas pueden ser llamadas a nuestro gusto.

         $_SESSION['ID'] = $member['id'];
         $_SESSION['NAME'] = $member['nombre'];        
         $_SESSION['CIUDAD'] = $member['ciudad'];
         $_SESSION['EMAIL'] = $member['email'];
           
            
         session_write_close();
Si esta bien nos dirigimos al perfil
         header("location: perfil.php");
         exit();
      }else {
         //Login failed
Si esta mal nos dirigimos a otro sitio donde nos pida verificar los datos
         header("location: datos_mal.php");
         exit();
      }
   }else {
      die("Query failed");
   }

?>

Read More

Cambiar PATH php en MAC

Al instalar xampp en Mac que incluye versión 7.1 de php, nos encontramos con que revisamos la versión y nos dice 5.x.x o alguna otra versión anterior que tengamos, así ya tengamos la nueva versión instalada.

Para comprobar la versión de PHP ubicamos php en nuestro ordenador con el comando

> which php

después solicitamos la versión

> php -v

Usamos el comando

> vim ~/.bash_profile

Dentro escribimos

> export PATH="/Applictions/XAMPP/xamppfiles/bin:$PATH"

A continuación presionamos ESC y se nos habilita al final de la pantalla para escribir y escribimos :wq para salir y guardar

Ahora al verificar la versión de php con

> php -v

ya debe aparecer la nueva versión 7.1

Read More

Enviar Correo desde php

Para enviar un correo desde php a una cuenta de Gmail usaremos 3 archivos básicos

1. formulario 

2. enviarmail

3.gracias

primero definimos el formulario de envío, el archivo puede ser en html o en php

<html>

<body>

<form action="enviarmail.php" method="POST">

<h2>contacto</h2>

<input type="text" name="nombre" placeholder="nombre">

<input type="text" name="correo" placeholder="correo">

<input type="text" name="telefono" placeholder="telefono">

<textarea name="mensaje" placeholder="mensaje aqui"></textarea>

<input type="submit" value="ENVIAR" id="boton">

</body>

</html>

Con form action="enviarmail.php" lo que hacemos en enviar toda esa información al archivo enviarmail.php, con el metodo POST, que servirá para capturar los campos definidos, ejemplo (name="nombre", name="correo")

<?php

$destino = "correo@gmail.com";

$nombre = $_POST['nombre'];

$nombre = $_POST['apellido'];

$correo = $_POST['correo'];

$telefono = $_POST['telefono'];

$mensaje = $_POST['mensaje'];

$contenido = "Nombre: ".$nombre. "\napellido: ".$apellido. "\nCorreo: ".$correo."\nTelefono: ".$telefono."\nMensaje: ".$mensaje;

mail($destino,"Contacto",$contenido);

header("Location:gracias.html");  

?>

Por ultimo, este archivo nos redirige a gracias.html, donde simplemente se debe poner el mensaje de "gracias el mensaje fue enviado" o cualquier mensaje que confirme que el correo fue enviado

Recordar: Para que el mensaje llegue sin problemas, la cuenta debe admitir el acceso de cuentas menos seguras

Opción 1: Actualizar a una app más segura que use las medidas de seguridad más recientes. Todos los productos de Google, como Gmail, usan medidas de seguridad actualizadas

Opción 2: Cambiar la configuración para permitir que apps menos seguras accedan a la cuenta. No recomendamos esta opción, ya que podría facilitar el acceso de terceros a la cuenta. Si, de todos modos, quieres otorgar el acceso, sigue estos pasos:

Los pasos oficiales están en:

https://support.google.com/accounts/answer/6010255?hl=es-419

Read More

Bootstrap vs foundation

Cual es la diferencia entre Bootstrap y foundation?

Pre-procesadores: Bootstrap usa LESS y Foundation, Sass y Compass

JavaScript: Bootstrap usa jQuery y Foundation, Zepto (con fallback a jQuery).

Compatibilidad: Bootstrap es compatible con IE7+2 y Foundation con IE9+.

Uso: Además de la herramienta online para hacer un custom build, Bootstrap se puede instalar via Bower y Foundation tiene una gema para crear proyectos desde la terminal.

Bootstrap y Foundation tienen documentación excepcional para guiarte a través de la configuración, módulos y extensiones. La amplia gama de características inevitablemente hace la documentación más laboriosa y abrumadora para el principiante, comparada con la de Concise. Foundation incluye un archivo de demostración llamado index.html para que los principiantes experimenten con él y les sirva como un punto de inicio.

Bootstrap es una colección de HTML, CSS y Javascript, pero aquí hay una lista de categorías para que Usted pueda entender la manera de su implementación en su plantilla de HTML básico. Para desarrollar cualquier sitio o aplicación de Bootstrap, primero tiene que añadir CSS y JavaScript a su plantilla de HTML básico.

Características similares

Twitter Bootstrap y Foundation 4.0 ofrecen las características que son similares:

Alertas
Breadcrumbs
Botones
Desplegables
Formas
Etiquetas
Lista
Paginación
Navegación
Barras de progreso
Tablas
Pestañas
Thumbnails
Información sobre herramientas
Tipografía

Foundation, tiene su propio centro de entrenamiento con videos para una mejor experiencia de aprendizaje. Existen muchos tipos de blogs y tutoriales con consejos para usar Foundation.

Read More

El archivo subido excede la directiva upload_max_filesize en php.ini.

Un problema frecuente cuando intentamos instalar un theme o plantailla en wordpress es este warning o advertencia que nos aparece.



El archivo subido excede la directiva upload_max_filesize en php.ini.

El problema a esta solución es la siguiente:


Se debe buscar el archivo php.ini, normalmente esta en la carpeta wp-admin

Dentro de el se debe buscar las siguientes lineas de código:


; Maximum allowed size for uploaded files.
upload_max_filesize = 2M


y reemplazar el 2M por 10M, así le estaremos dando mas capacidad para subir la plantilla, debe quedar de esta manera

; Maximum allowed size for uploaded files.

   upload_max_filesize = 10M
Si estas trabajando en WampServer desde tu computador el archivo php.ini esta aquí

Read More