Scriptmatico.Com » Scripts http://www.scriptmatico.com Blog de tecnologia, programacion, articulos y mas... Thu, 01 Apr 2010 00:43:08 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Video Tutorial : Eliminación de Varios Registros con PHP & MYSQL, usando Checkboxes Parte 2 http://www.scriptmatico.com/2010/03/31/video-tutorial-eliminacion-de-varios-registros-con-php-mysql-usando-checkboxes-parte-2/ http://www.scriptmatico.com/2010/03/31/video-tutorial-eliminacion-de-varios-registros-con-php-mysql-usando-checkboxes-parte-2/#comments Thu, 01 Apr 2010 00:38:21 +0000 admin http://www.scriptmatico.com/?p=362 Esta es la segunda parte de este video tutorial donde les enseñare a eliminar múltiples registros de la base de datos, en esta segunda parte añadiremos validación con del formulario usando Javascript.

El link al código fuente completo esta mas abajo, este video tutorial esta dividido en dos, ya que Youtube no deja subir vídeos de mas de 10Mins.

Bien aqui les dejo el Video tutorial, Agradeceria comentarios en youtube o en el blog. Gracias.

Descargar Código Fuente.

Parte 1:

Parte 2:

Compártelo!

Post to Twitter

]]> http://www.scriptmatico.com/2010/03/31/video-tutorial-eliminacion-de-varios-registros-con-php-mysql-usando-checkboxes-parte-2/feed/ 1 Captcha Basado en click – Un Captcha totalmente diferente http://www.scriptmatico.com/2009/10/03/captcha-basado-en-click-un-captcha-totalmente-diferente/ http://www.scriptmatico.com/2009/10/03/captcha-basado-en-click-un-captcha-totalmente-diferente/#comments Sun, 04 Oct 2009 04:34:25 +0000 admin http://www.scriptmatico.com/?p=295 En este tutorial, el objetivo es hacer un "click" en el captcha para validar que el formulario no haya sido rellenado por un robot.

Vamos a necesitar dos imágenes:

La Imagen de seguridad:

La imagen de la máscara de Captcha:

A continuación pondre el codigo explicado:

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3.   // iniciamos la session
  5.  
  6.   // declaramos nuestras variables
  7.   $width = 180;
  8.   $height = 90;
  9.   $blob_width = 40;
  10.   $blob_height = 40;
  11.  
  12.   // creamos nuestra imagen
  13.   $image = imagecreatetruecolor($width, $height);
  14.  
  15.   //color background de la imagen
  16.   $white = imagecolorallocate($image, 230, 230, 230);
  17.   $red  = imagecolorallocate($image, 255, 0, 0);
  18.   $blue  = imagecolorallocate($image, 0, 0, 230);
  19.  
  20.   // llenamos el contenedor de la imagen
  21.   imagefilledrectangle($image, 0, 0, $width, $height ,$white);
  22.  
  23.  
  24.   // creamos el background de espirales para nuestra imagen
  25.  
  26.   $theta    = 1;
  27.   $thetac   = 7;
  28.   $radius   = 16;
  29.   $circles  = 20;
  30.   $points   = 32;
  31.  
  32.   for ($i = 0; $i <($circles * $points) - 1; $i++)
  33.   {
  34.     $theta = $theta + $thetac;
  35.     $rad = $radius * ($i / $points );
  36.     $x = ($rad * cos($theta)) + $x_axis;
  37.     $y = ($rad * sin($theta)) + $y_axis;
  38.     $theta = $theta + $thetac;
  39.     $rad1 = $radius * (($i + 1) / $points);
  40.     $x1 = ($rad1 * cos($theta)) + $x_axis;
  41.     $y1 = ($rad1 * sin($theta )) + $y_axis;
  42.     imageline($image, $x, $y, $x1, $y1, $blue);
  43.     $theta = $theta - $thetac;
  44.   }
  45.  
  46.   // obtenemos la posicion de nuestro circulo aleatoriamente
  47.   $x_axis = rand($blob_width, $width) - ($blob_width / 2);
  48.   $y_axis = rand($blob_height, $height)  - ($blob_height / 2);
  49.  
  50.   // dibujamos el circulo
  51.   imagefilledellipse ($image, $x_axis, $y_axis, $blob_width, $blob_height, $red);
  52.  
  53.   // creamos la imagen de mascara
  54.   $mask_image = imagecreatetruecolor($width, $height);
  55.  
  56.   // escogemos el color de nuestro background y color de circulo para nuestra mascara
  57.   $mask_white = imagecolorallocate($mask_image, 255, 255, 255);
  58.   $mask_red  = imagecolorallocate($mask_image, 255, 0, 0);
  59.  
  60.   // llenamos la imagen mascara con nuestro background
  61.   imagefilledrectangle($mask_image, 0, 0, $width, $height ,$mask_white);
  62.  
  63.   // dibujamos el circulo en nuestra mascara
  64.   imagefilledellipse ($mask_image, $x_axis, $y_axis, $blob_width, $blob_height, $mask_red);
  65.  
  66.   // escribimos la imagen en el buffer
  67.   ob_start();
  68.   imagepng($mask_image);
  69.   $mask_image_data = ob_get_contents();  // recibimos los datos y limpiamos el buffer
  71.  
  72.   // convertimos la imagen a Base64
  73.   $mask_image_data_b64 =  base64_encode($mask_image_data);
  74.  
  75.   // guardamos los datos en nuestra variable del servidor
  76.  $_SESSION['captcha_image_code'] = $mask_image_data_b64;
  77.  
  78.  
  79.   // Enviamos las cabeceras del contenido
  80.   header('Content-type: image/jpeg');
  81.   header('Cache-control: no-cache');
  82.  
  83.   // lanzamos la imagen al navegador
  84.   imagejpeg($image);
  85.  
  86.   imagedestroy($image);
  87.  
  88.   ?>

Ahora el formulario:

PLAIN TEXT
HTML:
  1. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data"> 
  2.       <p>Name<br/><input type="text" name="name" /></p> 
  3.       <p>Comment<br/><textarea name="message"></textarea></p>
  4.       <p>
  5.         Click the Red Circle to continue:<br/>
  6.         <input type='image' name='submit' src='captcha.php' alt='Captcha Security'  />
  7.       </p>
  8.   </form>

Por ultimo la validacion:

PLAIN TEXT
PHP:
  2.  
  3.   if(isset($_POST['submit_x']) && isset($_POST['submit_y'])) { 
  4.  
  5.       if(!empty($_POST['name']) && !empty($_POST['message'])) { 
  6.  
  7.         // retrive the image captcha data
  8.         $data = base64_decode($_SESSION['captcha_image_code']);
  9.  
  10.         $captcha_image = imagecreatefromstring($data);
  11.         $x = $_POST['submit_x'];
  12.         $y = $_POST['submit_y'];
  13.  
  14.         // get the pixel color of the clicked x and y coordinate
  15.         $rgb = imagecolorat($captcha_image, $x, $y);
  16.         $color_tran = imagecolorsforindex($captcha_image, $rgb);
  17.  
  18.         // check if the color is red and red only
  19.         $captcha_ok = ($color_tran['red'] == 255 && $color_tran['green'] == 0 && $color_tran['blue'] == 0 && $color_tran['alpha'] == 0) ;
  20.  
  21.         if($captcha_ok) { 
  22.  
  23.           $result = "Thank you for submitting your comment.";           
  24.  
  25.         } else { 
  26.  
  27.           $result = "Please make sure you click the red circle!"; 
  28.  
  29.         } 
  30.  
  31.       } else { 
  32.  
  33.           $result = "Please fill out the entire form."; 
  34.  
  35.       } 
  36.  
  37.   }

Un cambio adicional aquí es recuperar la imagen de la máscara de la sesión y volver a poner esa imagen de un objeto y luego obtener el color del píxel de X e Y.

Para ello, primero tenemos que recuperar la imagen de la máscara de la sesión y luego descifrar como se muestra a continuación:

PLAIN TEXT
PHP:
  1. // retrive the image captcha data
  2.   $data = base64_decode($_SESSION['captcha_image_code']);

A continuación, convertirlo de nuevo en una imagen del objeto utilizando la funcion ImageCreateFromString().

PLAIN TEXT
PHP:
  1. $captcha_image = imagecreatefromstring($data);

Luego recuperar la coordenadas X e Y desde el primer clic que el usuario envía, junto con el color del píxel usando imagecolorsforindex (). Nos aseguramos de que sólo se obtiene un color rojo y nada más.

PLAIN TEXT
PHP:
  1. // obtenemos el  color del pixel que fue clickeado con las coordenas "x" y "y"
  2.   $rgb = imagecolorat($captcha_image, $x, $y);
  3.   $color_tran = imagecolorsforindex($captcha_image, $rgb);
  4.  
  5.   // verificamos que el color sea solo rojo
  6.   $captcha_ok = ($color_tran['red'] == 255 && $color_tran['green'] == 0 && $color_tran['blue'] == 0 && $color_tran['alpha'] == 0) ;

Despues de todo esto el formulario nos quedaria asi:

PLAIN TEXT
HTML:
  1. <?php 
  2. session_start();
  3.  
  4. if(isset($_POST['submit_x']) && isset($_POST['submit_y'])) { 
  5.  
  6.     if(!empty($_POST['name']) && !empty($_POST['message'])) { 
  7.  
  8.       // retrive the image captcha data
  9.       $data = base64_decode($_SESSION['captcha_image_code']);
  10.  
  11.       $captcha_image = imagecreatefromstring($data);
  12.       $x = $_POST['submit_x'];
  13.       $y = $_POST['submit_y'];
  14.  
  15.       // get the pixel color of the clicked x and y coordinate
  16.       $rgb = imagecolorat($captcha_image, $x, $y);
  17.       $color_tran = imagecolorsforindex($captcha_image, $rgb);
  18.  
  19.       // check if the color is red and red only
  20.       $captcha_ok = ($color_tran['red'] == 255 && $color_tran['green'] == 0 && $color_tran['blue'] == 0 && $color_tran['alpha'] == 0) ;
  21.  
  22.       if($captcha_ok) { 
  23.  
  24.         $result = "Thank you for submitting your comment.";           
  25.  
  26.       } else { 
  27.  
  28.         $result = "Please make sure you click the red circle!"; 
  29.  
  30.       } 
  31.  
  32.     } else { 
  33.  
  34.         $result = "Please fill out the entire form."; 
  35.  
  36.     } 
  37.  
  38. } 
  39. ?>
  40.  
  41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  42. <html xmlns="http://www.w3.org/1999/xhtml"> 
  44. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  45. <title>Captcha Demo</title> 
  46. </head> 
  47.  
  49.  
  50. <?php if(!empty($result)) echo "<div style='color:#990000; margin-bottom: 20px;'>" . $result . "</div>"; ?> 
  51.  
  52. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data"> 
  53.     <p>Name<br/><input type="text" name="name" /></p> 
  54.     <p>Comment<br/><textarea name="message"></textarea></p>
  55.     <p>
  56.       Click the Red Circle to continue:<br/>
  57.       <input type='image' name='submit' src='captcha.php' alt='Captcha Security'  />
  58.     </p>
  59. </form> 
  60.  
  61. </body> 
  62. </html>

Ahora puedes implementarlo en tu web, puedes cambiar los colores y jugar un poco con esta validacion, veras que no es muy dificil.

Compártelo!

Post to Twitter

]]> http://www.scriptmatico.com/2009/10/03/captcha-basado-en-click-un-captcha-totalmente-diferente/feed/ 0 Facebook lightbox – Plugin Lightbox para jQuery al estilo Facebook http://www.scriptmatico.com/2009/06/10/facebook-lightbox-plugin-lightbox-para-jquery-al-estilo-facebook/ http://www.scriptmatico.com/2009/06/10/facebook-lightbox-plugin-lightbox-para-jquery-al-estilo-facebook/#comments Wed, 10 Jun 2009 14:46:49 +0000 admin http://www.scriptmatico.com/?p=264 Facebook jQuery Lightbox

Facebook jQuery Lightbox

No cabe duda que los Lightbox son la forma mas elegante de mostrar imagenes y contenido en nuestras webs o blogs, pero hay tanta variedad de estos que muy pocos son los que realmente sobresalen, y en lo particular mi gusto esta en el Lightbox que usan en Facebook y como es normal en la web, he encontrado un plugin Lightbox al estilo Facebook, este precioso plugin trabaja con jQuery y es muy sencillo de usar.

Instalacion:

PLAIN TEXT
HTML:
  1. <script src="jquery.js" type="text/javascript"></script> <script src="/facebox/facebox.js" type="text/javascript"></script>

Iniciar la instancia:

PLAIN TEXT
HTML:
  1. jQuery(document).ready(function($) {
  2. $('a[rel*=facebox]').facebox()
  3. })

Ejemplos de uso(Notese el atributo rel):

PLAIN TEXT
HTML:
  1. Llamando un archivo
  2. <a rel="facebox" href="remote.html">text</a>
  3. Mostrando una imagen
  4. <a rel="facebox" href="stairs.jpg">text</a>
  5. Mostrando contenido
  6. <a rel="facebox" href="#info">text</a>

A continuacion les dejo el link de descarga, asi como la pagina del author.

¡Gracias famspam por tan valioso script!.

Descargar Plugin

Pagina del Author

Compártelo!

Post to Twitter

]]> http://www.scriptmatico.com/2009/06/10/facebook-lightbox-plugin-lightbox-para-jquery-al-estilo-facebook/feed/ 0 DevSnippets una Nueva web que ofrece codigo para desarrolladores http://www.scriptmatico.com/2008/08/18/devsnippets-una-nueva-web-que-ofrece-codigo-para-desarrolladores/ http://www.scriptmatico.com/2008/08/18/devsnippets-una-nueva-web-que-ofrece-codigo-para-desarrolladores/#comments Tue, 19 Aug 2008 00:28:18 +0000 admin http://www.exodo999.phpnet.us/2008/08/18/devsnippets-una-nueva-web-que-ofrece-codigo-para-desarrolladores/ Pues paseandome de nuevo por la internet me he encontrado con esta web http://devsnippets.com/ la cual contiene excelentes fragmentos de codigo tambien llamados snippets.

Y lo mejor de esta web es que como incentivo a los colaboradores estan ofreciendo $4600 dolares en premios a los 10 que mas envien codigos. Interesante verdad!

Pues creo que dejare de escribir aqui y me voy a poner a enviar codigo jeje.

Compártelo!

Post to Twitter

]]> http://www.scriptmatico.com/2008/08/18/devsnippets-una-nueva-web-que-ofrece-codigo-para-desarrolladores/feed/ 0