Archive for month: March, 2009

PHP Como subir archivos de mas de 2Mb

Categories: PHP - Tags: ,

A veces ocurre que queremos subir a nuestro servidor un archivo zip o algun diseño y estos jalan mas de 2 Mb pero nuestro hosting no lo permite, no es complicado solucionar este problema sin tener que editar el archivo php.ini, a menos que tengan un servidor virtual o uno dedicado (es raro que nosotros simples mortales tengamos uno asi).

Permitir subir archivos de mas de 2Mb

Para solucionarlo basta modificar al archivo .httacces

1
2
3
4
php_value upload_max_filesize 20M
php_value post_max_size 20M
php_value max_execution_time 200
php_value max_input_time 200

Con ese pequeño cambio ya deberias poder subir archivos de hasta 20Mb,

¿Cómo creo un formulario para subir archivos?

Hay varias formas de hacerlo, en mi blog puedes ver un par usando ajax

Subir Multiples Archivos Ajax jquery

Categories: AJAX - Tags: , ,

Siempre recordemos que no se puede subir archivos usando AJAX, porque el objeto ajax no soporta el enctype requerido para subir archivos asi que se usa un iframe para emular el proceso. Voy a explicar como hacer esto con jquery y ajax

El formulario para subir archivos

1
2
3
4
5
6
7
8
9
<form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data">
<ol>
    <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li>
        <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li>
    <li><label>Select Files</label><input name="ffoto[]" type="file" class="multi" accept="gif|jpg|jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" /></li>
        <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li>
</ol>
</fieldset>
</form>

AJAX Jquery

Incluimos las librerias javascript, el script automaticamente buscará el campo con la clase multi

1
2
<script language="javascript" src="js/jquery-1.31.js"></script>
<script language="javascript" src="js/jquery.MultiFile.pack.js"></script>

PHP para recibir los archivos

Este script permite subir multiples archivos como un array, asi que empezemos por ahi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    $cuales="";
     /// Vemos cuantos archivos hemos subido
    $nro=count($_FILES["ffoto"]["name"]);
    /// Empezamos el array
    for ($i=1; $i<$nro; $i++) {
    $file_name=$_FILES["ffoto"]["name"][$i];
    $file_size=$_FILES["ffoto"]["size"][$i];
    $file_type=$_FILES["ffoto"]["type"][$i];
    if($file_name!=""){
        // verifica carpeta
        $nombre_archivo=$_POST['femail'];
        if (!file_exists('userfiles'.$nombre_archivo)) {
            mkdir('userfiles/'.$nombre_archivo,0777);
        }
        $path="userfiles/".$nombre_archivo;    
        // sube archivo
        copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ;
        echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>';
        $cuales.=$file_name." ";
    } else {
        echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>';
    }

Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador

Incluir tooltip en mapa de imagenes jquery

Categories: AJAX, CSS - Tags: ,

Usando un plugin para jquery voy a explicar como colocar tooltips en un mapa de imagen.

HTML del mapa de imagenes

Es practicamente igual que cualquier mapa de imagenes, title es la descripcion

1
2
3
4
5
6
7
8
9
10
11
12
<p align="center">
    <img src="mapa.gif" border="0" usemap="#mimapa" id="map" width="480" height="269" />
<map name="mimapa" id="mimapa">
  <area shape="circle" coords="199,51,9" href="http://www.koblenz.de/" alt="" title="Toboganes" />
  <area shape="circle" coords="169,53,9" href="http://www.wiesbaden.de/" alt="" title="Mamut" />
  <area shape="circle" coords="137,28,9" href="http://www.mainz.de/" alt="" title="Pistas Blandas" />
  <area shape="circle" coords="123,60,9" href="http://www.frankfurt.de/" alt="" title="Super Tobogan Gigante" />
  <area shape="circle" coords="88,24,9" href="http://www.mannheim.de/" alt="" title="Black Hole" />
  <area shape="circle" coords="89,76,9" href="http://www.heidelberg.de/" alt="Heidelberg" title="Piscina Cadetes" />
  <area shape="circle" coords="83,97,9" href="http://www.stuttgart.de/" alt="" title="Piscina Infantes" />
</map>
</p>

Agregar el plugin

Para agregar jquery y e plugin bastan un par de lineas de codigo

1
2
<script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.tooltip.min.js" type="text/javascript"></script>

Al plugin lo podemos configurar con una sola linea de codigo, pero yo voy a agregarle algunos detalles adicionales

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript">
$(function() {
    $("map *").tooltip({
        positionLeft: true,
        delay: 0,
        fade: 250,
        extraClass: "pretty",
        fixPNG: true,
        opacity: 0.95,
     });
});  
</script>

Estilos para el tooltip

Estos varian segun lo que querramos hacer, lo mas importante es la position absolute y el z-index

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip.pretty {
    border: none;
    width: 210px;
    padding:20px;
    height: 135px;
    opacity: 0.8;
    background: url('shadow.png');
}






Clase PHP login simple con cookies

Categories: PHP - Tags:

Este es un ejemplo de una clase para el manejo de login, el objetivo de esta clase es solo didactico para poder usarla en nuestras aplicaciones deberiamos implementar una verificacion de usuario basada en una base de datos, además deberiamos crear un algoritmo de codificacion y decodificacion del id de usuario.

Clase para el manejo de login

Como puedes ver en la linea 25 no esta implementada la verficacion del login con la base de datos eso ya depende de la clase que usas para tu base de datos, puedes probar el script usando usuario=user y clave= password

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
class login {
// Inicia sesion
public function inicia($tiempo=3600, $usuario=NULL, $clave=NULL) { 
    if ($usuario==NULL && $clave==NULL) {
        // Verifica sesion
        if (isset($_SESSION['idusuario'])) {
            //echo "Estas logeado";
        } else {
            // Verifica cookie
            if (isset($_COOKIE['idusuario'])) {
                // Restaura sesion
                $_SESSION['idusuario']=$_COOKIE['idusuario'];
            } else {
                // Si no hay sesion regresa al login
                header( "Location: index.php" );
            }
        }
    } else {
        $this->verifica_usuario($tiempo, $usuario, $clave);
    }
}  
//  Verifica login
private function verifica_usuario($tiempo, $usuario, $clave) {
    if ($usuario=="user" && $clave=="password") {
        // Si la clave es correcta
        $idusuario=$this->codificar_usuario($usuario);
        setcookie("idusuario", $idusuario, time()+$tiempo);
        $_SESSION['idusuario']=$idusuario;
        header( "Location: logeado.php" );
    } else {
        // Si la clave es incorrecta
        header( "Location: index.php?error=1" );
    }
}
// Codifica idusuario
private function codificar_usuario($usuario) {
    return md5($usuario);
}
}
?>

Formulario del login index.php

Usamos un formulario simple que invocará al archivo login.php para generar la sesión o enviar un codigo de error

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
session_start();
?>
<form name="frm_login" method="post" action="login.php">
Usuario: <input type="text" size="10" name="user" /><br />
Clave: <input type="text" size="10" name="pass" />
<input type="submit" name="submit" value="Login" />
</form>
<?php
if (isset($_GET['error'])) {
    echo '<b>Usuario o clave incorrecta</b>';
}
?>

login.php

Este archivo nos servirá de puente para iniciar o no la sesión

1
2
3
4
5
6
<?php
session_start();
include("login.class.php");
$login=new login();
$login->inicia(3600, $_POST['user'], $_POST['pass']);
?>

Nuestros archivos protegidos

Para proteger cualquier archivo del acceso por parte de usuarios no logeados basta agregar las siguientes lineas de codigo al inicio

1
2
3
4
5
6
<?php
session_start();
include("login.class.php");
$login=new login();
$login->inicia();
?>

Por regla de php estas lineas que verifican la sesion deben estar antes de cualquier codigo html y de espacios en blanco, de lo contrario generará el error “Headers already sent”






Para verificar que nuestro script funciona correctamente podemos instalar una extensión de firebug llamada Firecookie que nos permite revisar las sesiones y cookies

Flashvars enviarle datos html a pelicula Flash

Categories: AJAX - Tags: , ,

Hay veces que nos gustaría enviarle variables GET a nuestro flash, o enviarle datos desde html, esto se logra usando flashvars las cuales se agregan en el embed de la pelicula flash, algo asi como:

1
2
3
4
5
6
      <object width="300" height="200">
         <param name="movie" value="mipelicula.swf" />
         <param name="FlashVars" value="var1=valor1&var2=valor2" />
         <embed src="mipelicula.swf" width="300" height="200
         FlashVars="var1=valor1&var2=valor2"/>

      </object>

Usando un plugin jquery

Encontré una forma mucho más simple de insertar flash en nuestra página web, usando un plugin para jquery basta crear un div y luego decirle, mete ahi nuestra pelicula de este tamaño ¿Hay algo mas simple?
Su codigo html sería unicamente el div donde va a ir nuestra pelicula

1
<div id="test-flash"></div>

El codigo javascript consiste en incluir nuestra libreria jquery, el plugin y un pequeño codigo para insertar la pelicula, adicionalmente le estoy enviando tambien flashvars

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flash.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $('#test-flash').flash({
        src: 'test.swf',
    width: 300,
        height: 200,
    flashvars: { var1: 'Mi variable var1', var2: 'Aqui la segunda' } // opcional
    });
});
</script>

Puedes bajar el plugin de la pagina de su creador

Action Script Flash

Para capturar las variables que estamos enviando usamos el siguiente codigo en Action Script 2

1
2
mivariable1=_root.var1; // imprime "valor1"
mivariable2=_root.var2; // imprime "valor2"