Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » PHP http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Fri, 03 Feb 2012 19:33:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Paginación PHP con clase http://www.masquewordpress.com/paginacion-php-con-clase/ http://www.masquewordpress.com/paginacion-php-con-clase/#comments Tue, 31 Jan 2012 18:48:23 +0000 Damian http://www.masquewordpress.com/?p=1177 Últimamente ando revisando mis posts antiguos y en esta ocasión quería mostrarles una clase de paginación echa en PHP que es más fácil y prolija de usar que el código de Paginación PHP que publique hace tiempo. Creo que esta forma es la adecuada y aunque no entiendan o manejen clases de PHP , es un buen momento para salpicarse un poco en este mundillo.

Para empezar les quiero mostrar 2 ejemplos de esta clase:

  1. Ejemplo básico
  2. Ejemplo donde se arrastran variables en cada página

Métodos de la clase

  • Paginator. Constructor. Como usar: 
    $pages = new Paginator;
  • paginate. Calcula las páginas a mostrar. Como usar: 
    $pages->paginate();
  • display_items_per_page. Devuelve una cadena HTML para mostrar items por página. Como usar: 
    echo  $pages->display_items_per_page();
  • display_jump_menu. Devuelve una cadena HTML para mostrar el salto de página. Como usar: 
    echo $pages->display_jump_menu();
  • display_pages. Devuelve la cadena HTML que muestra lás paginas. Como usar: 
    echo $pages->display_pages();

Ahora veamos como usar realmente la clase

  1. Incluimos la clase: 
    require_once('paginator.class.php');
  2. Creamos el objeto paginator: 
    $pages= new Paginator;
  3. Configuramos el total de resultados de nuestra query. Para ello podemos usar una COUNT(*) que devuelva la cantidad total de resutados: 
    $pages->items_total = X; // cambiamos X por el total
  4. Configuramos el total de links a mostrar. Por ejemplo el valor por defecto es 7 . Si estamos en la pág 50 mostraria : 47 47 49 50 51 52 53 
    $pages->mid_range = X;
  5. Llamamos al método paginate para que cree la paginación (este método no devuelve nada) 
    $pages->paginate();
  6. Imprimimos las páginas que hemos páginado en el paso anterior: 
    echo $pages->display_pages();
  7. Opcionalmente se pueden usar los métodos de display_jump_menu o display_items_per_page
  8. Como ya tenemos la paginación generada ya podemos usar $pages->limit en nuestra query para limitar los resultados. Por ej: 
    SELECT id, name, address FROM table ORDER BY id ASC $pages->limit

Con estos pasos ya tendremos funcionando la clase PHP para paginar resultados.

Para darle estilo pueden aplicar el que el desarrollador usa por defecto o pueden probar a adaptar algún otro estilo como los descriptos en este otro post.

<style type="text/css">
.paginate {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
}
a.paginate {
border: 1px solid #000080;
padding: 2px 6px 2px 6px;
text-decoration: none;
color: #000080;
}
a.paginate:hover {
background-color: #000080;
color: #FFF;
text-decoration: underline;
}
a.current {
border: 1px solid #000080;
font: bold .7em Arial,Helvetica,sans-serif;
padding: 2px 6px 2px 6px;
cursor: default;
background:#000080;
color: #FFF;
text-decoration: none;
}
span.inactive {
border: 1px solid #999;
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
padding: 2px 6px 2px 6px;
color: #999;
cursor: default;
}
</style>

Y por último aquí tienen la clase PHP encargada de todo:

<?php
/*
 * PHP Pagination Class
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 2.0.0
 * @date October 18, 2011
 * @copyright (c) admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) - http://creativecommons.org/licenses/by-sa/3.0/
 */
class Paginator{
	var $items_per_page;
	var $items_total;
	var $current_page;
	var $num_pages;
	var $mid_range;
	var $low;
	var $limit;
	var $return;
	var $default_ipp;
	var $querystring;
	var $ipp_array;
 
	function Paginator()
	{
		$this->current_page = 1;
		$this->mid_range = 7;
		$this->ipp_array = array(10,25,50,100,'All');
		$this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
	}
 
	function paginate()
	{
		if(!isset($this->default_ipp)) $this->default_ipp=25;
		if($_GET['ipp'] == 'All')
		{
			$this->num_pages = 1;
//			$this->items_per_page = $this->default_ipp;
		}
		else
		{
			if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp;
			$this->num_pages = ceil($this->items_total/$this->items_per_page);
		}
		$this->current_page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1 ; // must be numeric > 0
		$prev_page = $this->current_page-1;
		$next_page = $this->current_page+1;
		if($_GET)
		{
			$args = explode("&",$_SERVER['QUERY_STRING']);
			foreach($args as $arg)
			{
				$keyval = explode("=",$arg);
				if($keyval[0] != "page" And $keyval[0] != "ipp") $this->querystring .= "&" . $arg;
			}
		}
 
		if($_POST)
		{
			foreach($_POST as $key=>$val)
			{
				if($key != "page" And $key != "ipp") $this->querystring .= "&$key=$val";
			}
		}
		if($this->num_pages > 10)
		{
			$this->return = ($this->current_page > 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page$this->querystring\">&laquo; Previous</a> ":"<span class=\"inactive\" href=\"#\">&laquo; Previous</span> ";
 
			$this->start_range = $this->current_page - floor($this->mid_range/2);
			$this->end_range = $this->current_page + floor($this->mid_range/2);
 
			if($this->start_range <= 0)
			{
				$this->end_range += abs($this->start_range)+1;
				$this->start_range = 1;
			}
			if($this->end_range > $this->num_pages)
			{
				$this->start_range -= $this->end_range-$this->num_pages;
				$this->end_range = $this->num_pages;
			}
			$this->range = range($this->start_range,$this->end_range);
 
			for($i=1;$i<=$this->num_pages;$i++)
			{
				if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
				// loop through all pages. if first, last, or in range, display
				if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range))
				{
					$this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
				}
				if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
			}
			$this->return .= (($this->current_page < $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All') And $this->current_page > 0) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page$this->querystring\">Next &raquo;</a>\n":"<span class=\"inactive\" href=\"#\">&raquo; Next</span>\n";
			$this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
		}
		else
		{
			for($i=1;$i<=$this->num_pages;$i++)
			{
				$this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
			}
			$this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
		}
		$this->low = ($this->current_page <= 0) ? 0:($this->current_page-1) * $this->items_per_page;
		if($this->current_page <= 0) $this->items_per_page = 0;
		$this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page";
	}
	function display_items_per_page()
	{
		$items = '';
		if(!isset($_GET[ipp])) $this->items_per_page = $this->default_ipp;
		foreach($this->ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
		return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value+'$this->querystring';return false\">$items</select>\n";
	}
	function display_jump_menu()
	{
		for($i=1;$i<=$this->num_pages;$i++)
		{
			$option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
		}
		return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page$this->querystring';return false\">$option</select>\n";
	}
	function display_pages()
	{
		return $this->return;
	}
}

Pueden ver más información en el post del autor: http://www.catchmyfame.com/2007/07/28/finally-the-simple-pagination-class/

Saludos!!!

]]> http://www.masquewordpress.com/paginacion-php-con-clase/feed/ 1 Clase para mostrar fechas al estilo “hace 1 dia 6 min” con PHP http://www.masquewordpress.com/clase-para-mostrar-fechas-estilo-hace-1dia-6min-con-php/ http://www.masquewordpress.com/clase-para-mostrar-fechas-estilo-hace-1dia-6min-con-php/#comments Fri, 18 Nov 2011 18:19:33 +0000 Damian http://www.masquewordpress.com/?p=1035 La mayoría de redes sociales como Twitter o Facebook en lugar de mostrar las fechas como 2011-11-18 utilizan un formato de “Hace 2 dias 4 horas 3 minutos“. Pasa usar ese formato en sus programas se pueden ayudar de la siguiente clase de PHP llamada haceTanto.
Esta clase la encontre por internet en formato ingles y la modifique para nuestro idioma y le agregue la opción de elegir una profundidad a la hora de mostrar fechas.

Importante

Esta clase solo funciona con PHP >= 5.3 ya que la función DateTime::diff() no se encuentra en versiones previas

Para utilizar la clase la llamamos de la siguiente forma:

1
2
3

date_default_timezone_set('Europe/Madrid');
$hace = new haceTanto('2010-02-22 18:42:00','s');
echo 'Hace'.$hace;
  • 1. Definimos el Timezone que nos encontramos
  • 2. Creamos la instancia de haceTanto pasando dos valores.
    • Una fecha por ejemplo: “2011-10-26″
    • La profundidad hasta la que queremos mostrar siendo los posibles valores: ‘y’ => años ,’m’ => meses, ‘d’ => dias, ‘i’ => horas, ‘m’ => minutos, ‘s’ => segundos
  • 3. Imprimimos la fecha

El ejemplo anterior imprime:

1
2
3
4

date_default_timezone_set('Europe/Madrid');
$hace = new haceTanto('2010-02-22 18:42:00','s');
echo 'Hace'.$hace;
//Hace 1 año 8 meses 27 dias 28 minutos 5 segundos

Y ahora la clase de PHP encargada de esto:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<?php
class haceTanto extends DateTime {
 
    protected $strings = array(
        'y' => array('1 a&ntilde;o', '%d a&ntilde;os'),
        'm' => array('1 mes', '%d meses'),
        'd' => array('1 d&iacute;a', '%d dias'),
        'h' => array('1 hora', '%d horas'),
        'i' => array('1 min', '%d minutos'),
        's' => array('segundos', '%d segundos'),
    );
 
    public $profundidad;
 
    public function __construct( $fecha,$profundidad='i')
    {
        parent::__construct( $fecha );
        $this->profundidad = $profundidad;
 
    }
 
 
    public function __toString() {
	     try 
	    {  
	     	$now = new DateTime('now');
	        $diff = $this->diff($now);
 
	        foreach($this->strings as $key => $value){
 
	            if( ($text .= ' '.$this->getDiffText($key, $diff)) ){
 
	            }
	            if($this->profundidad == $key) break;
	        }
	        return $text;   
	    } 
	    catch(Exception $e) 
	    {  
	        trigger_error($e->getMessage(), E_USER_ERROR);  
	        return '';  
	    }  
 
 
    }
 
     protected function getDiffText($intervalKey, $diff){
        $pluralKey = 1;
        $value = $diff->$intervalKey;
        if($value > 0){
            if($value < 2){
                $pluralKey = 0;
            }
            return sprintf($this->strings[$intervalKey][$pluralKey], $value);
        }
        return null;
    }
}
?>

Espero que les sirva de ayuda en sus proyectos. Saludos!!

]]> http://www.masquewordpress.com/clase-para-mostrar-fechas-estilo-hace-1dia-6min-con-php/feed/ 0 Tip de PHP: Como eliminar el último caracter de un string o cadena http://www.masquewordpress.com/tip-de-php-como-eliminar-el-ultimo-caracter-de-un-string-o-cadena/ http://www.masquewordpress.com/tip-de-php-como-eliminar-el-ultimo-caracter-de-un-string-o-cadena/#comments Wed, 16 Nov 2011 14:18:04 +0000 Damian http://www.masquewordpress.com/?p=1030 Hoy les traigo un pequeño tip de PHP que me han preguntado en alguna que otra ocasión. Si por ejemplo tenemos una lista de ids que hemos generados y nos sobra una coma final, con esta pequeña función super conocida se la podemos quitar.

Para ello tan solo necesitamos usar la función subtrs() de PHP

Por ejemplo :

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
for ($i = 0 ; $i < =10 ; $i++ ) 
{
 
    $ids.= $i .', ';
 
}
 
echo $ids; // Imprime "1, 2, 3, 4, 5, 6, 7, 8, 9, 10,"
 
echo substr( $ids , 0 , -1); // Imprime "1, 2, 3, 4, 5, 6, 7, 8, 9, 10"
 
?>

ACTUALIZACIÓN

Nilo Velez ha dejado  en los comentarios una función de PHP específica para esto que la verdad no conocía. La programación es como las matemáticas, hay más de una forma de resolver un problema.  Aquí les dejo la función

1

echo rtrim($ids, ',');

 

Espero que este pequeño tip les sea útil alguna vez. Saludos!!

]]> http://www.masquewordpress.com/tip-de-php-como-eliminar-el-ultimo-caracter-de-un-string-o-cadena/feed/ 1 63 Tutoriales de Diseño Web, jQuery, WordPress y un montón más http://www.masquewordpress.com/63-tutoriales-de-diseno-web-jquery-wordpress-y-un-monton-mas/ http://www.masquewordpress.com/63-tutoriales-de-diseno-web-jquery-wordpress-y-un-monton-mas/#comments Fri, 07 Oct 2011 14:30:48 +0000 Damian http://masquewordpress.com/?p=819 63 Tutoriales de Diseño Web, jQuery, WordPress y un montón más es la cantidad reunida hasta día de hoy en mi blog. Eso sin contar los “pequeños trucos o tips” que son demasiado cortos para contarlos como tutoriales.

Alguien quiere colaborar con un tutorial propio?

Saludos!!

]]> http://www.masquewordpress.com/63-tutoriales-de-diseno-web-jquery-wordpress-y-un-monton-mas/feed/ 1 Como crear una aplicación de Twitter con PHP http://www.masquewordpress.com/como-crear-una-aplicacion-de-twitter-con-php/ http://www.masquewordpress.com/como-crear-una-aplicacion-de-twitter-con-php/#comments Fri, 12 Nov 2010 02:28:35 +0000 Damian http://masquewordpress.com/?p=694 Hace unos días les hable de como integrar Twitter anywhere en 5 minutos y luego les mostré un poco acerca de la nueva api javascript de @anywhere, incluso hace tiempo les explique como actualizar twitter a través de PHP + Oauth.

En este último articulo utilizaba una librería de PHP llamada twitteroauth.php que hoy voy a explicar un poco más , y les va a permitir junto con un poquito de JQuery crear una aplicación completa de twitter en PHP siempre que lo requieran.

1. Estructura HTML de la aplicación

Nuestra aplicación consta de un boton para hacer login a Twitter que solo aparece la primera vez que ingresamos.
Una vez echo login nos mostrará un formulario de texto donde escribiremos los tweets junto a un boton para enviar, tres pestañas en JQuery para cambiar del Timeline a los @Mentions y a los Mensajes directos.
Y por último el timeline.

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

<div id="twitter-feed">
                 <span id="letras"></span>
                <form name="tweet_post" method="post" style="width: 400px; margin: 0pt auto;clear:right;">
                	<textarea rows="4" cols="49" name="tweet_txt" id="tweet_txt" onKeyUp="contar(this);"></textarea>
						<input type="hidden" name="reply_id" id="t_reply"/>
                	<button id="tweet_submit" class="tweet_button">Submit</button>
                </form>
 
               <ul class="t_tab">
			<li class="t_selected" id="#t_timeline">Timeline</li>
			<li id="#t_mentions">@Mentions</li>
			<li id="#t_messages">Messages</li>
		</ul>
 
               <div id="t_timeline" class="tab_content">
               <ul>
                   <li>
			<div class="foto">
				<img src="" alt="" width="" /> 
			</div>
			<a href="" title="">Nombre de usuario Twitter</a>
			<br/>Texto del tweet<br/>
                        <div style="text-align:right">
				 <a href="#" onClick="javascript:">Reply</a>
			</div>
		 </li>
           </ul>
          </div>
 
<div style="clear: both;"></div>
</div>

Una vez realizada la estructura de nuestra aplicación vamos a llenarla con PHP y todos los valores necesarios

2. Estructura de archivos – Como funciona la aplicación

La aplicación funciona de la siguiente manera :
El usuario ingresa a index.php y hace click en conectar que lo lleva a redirect.php (aunque no se percata de ello) que es donde se obtiene las credenciales temporales, de aquí va a la página de Twitter donde se loguea con sus datos.
Una vez logueado es redirigido a callback.php( no se percata de ello) donde se verifica que las credenciales sean correctas y se envia de vuelta a la página principal.
En caso de que algo falle tanto en redirect.php o callback.php el usuario es enviado a clearsessions.php( no se percata de ello) que es donde se borran todas las sesiones y se envia el usuario a la página principal para que empieze el proceso nuevamente.
Como pueden ver para ojos del usuario será tan simple como boton de loguin , ingresar datos de su cuenta en twitter.com y vuelta a la aplicación ya funcionando.

Veamos todos los archivos involucrados

  • index.php: Será la página principal donde enlazaremos nuestra hoja de estilos css, Jquery y donde se verá la estructura principal.
  • twitter_init.php : Aca vamos a inicializar la librería de twitter y almacenar todo en la variable $twitter_content.
  • callback.php: Archivo que recibe al usuario desde twitter
  • redirect.php: Archivo que enviar al usuario a twitter
  • clearsessions.php: Archivo que borra las sesiones en caso de error
  • twitteroauth/config.php: Archivo de configuración con los datos de nuestro programa
  • twitteroauth/twitteroauth.php: Librería twitteroauth
  • twitteroauth/OAuth.php: Librería OAuth

3. La aplicación y los tres archivos importantes

Para nosotros los únicos archivos importante seran index.php , twitter_init.php y config.php. Los demás voy a obviarlos para no complicarlos, simplemente porque son archivos que no van a cambiar nunca, igualmente esta comentados paso por paso en el código.

index.php

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<? session_start();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Como Crear una aplicación de  Twitter con PHP + OAuth</title>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen"/> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
 
	    $("ul.t_tab li").click(function()     //cada vez que se hace click en un li
       {
		$("ul.t_tab li").removeClass("t_selected"); //removemos clase active de todos
		$(this).addClass("t_selected"); //añadimos a la actual la clase active
		$(".tab_content").hide(); //escondemos todo el contenido
 
		var content = $(this).attr("id"); //obtenemos el atributo id
		$(content).fadeIn(); // mostramos el contenido
		return false; //devolvemos false para el evento click
	});
 
});
 
function replyTo(id,name){
			$('#t_reply').val(id);
			$('#tweet_txt').val("@"+name+" ").focus();
 
			return false;
}
function contar(input) {
//Comprobamos que no pase de 140 caracteres y si pasa, que borre los sobrantes
if (input.value.length >= 140) {
input.value = input.value.substring(0,140);
}
//alamacenamos el resto
var resto = 140 - input.value.length;
 
//imprimimos los caracteres restantes en el span
$('#letras').html(resto);
 
}
</script> 
<?
include_once('twitter_init.php');
?>
</head>
  <body>
  <div id="header">
  <h3>Como crear una aplicaci&oacute;n de Twitter con PHP. M&aacute;s tutoriales en <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
	<div id="twitter-feed">
<? echo $twitter_content;?>
 
		<div style="clear: both;"></div>
	</div>
 
</body>
</html>

Como pueden ver es muy sencillo, igualmente vamos a explicar un poco que es lo que vemos:

  • Primero iniciamos con session_start() , esto lo usaremos para almacenar los tokens de Twitter en vez de usar los mismos siempre como hacíamos en mi tutorial de Actualizar twitter con PHP + Oauth, ya que ahora no serán nuestros tokens, sino que serán los de los diferentes usuarios que quieran usar nuestro programa
  • Enlazamos nuestra hoja de estilo CSS
  • Enlazamos a la última versión de JQuery
  • Creamos la función JQuery para las pestañas
  • Función que se encarga de escoger el atributo id en caso de que respondamos algún tweet y añade su @nombre al formulario
  • Función que cuenta los caracteres restantes de nuestro tweet
  • Incluimos twitter_init.php
  • Y por último imprimos el resultado con


twitter_init.php

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

<?
require_once('twitteroauth/twitteroauth.php');
require_once('twitteroauth/config.php');
 
 
if (empty($_SESSION['access_token']) || empty($_SESSION['access_token']['oauth_token']) || empty($_SESSION['access_token']['oauth_token_secret'])) {
 
   $twitter_content='<div class="tweet_login"><a href="redirect.php"><img src="twitteroauth/images/lighter.png" alt="Sign in with Twitter"/></a></div>';
				}else{
				/* Recuperar los datos de la session. */
				$access_token = $_SESSION['access_token'];
 
				/* Creamos el objeto twitterOauth. */
				$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);
 
				/* Verificamos credenciales. */
				$content = $connection->get('account/verify_credentials');
 
 
				/* Formulario */
				$twitter_content='<span id="letras"></span>
                <form name="tweet_post" method="post" style="width: 400px; margin: 0pt auto;clear:right;">
                	<textarea rows="4" cols="49" name="tweet_txt" id="tweet_txt" onKeyUp="contar(this);"></textarea>
						<input type="hidden" name="reply_id" id="t_reply"/>
                	<button id="tweet_submit" class="tweet_button">Submit</button>
                </form>
				';
				/* Si hay un mensaje nuevo lo publicamos */
				if($_POST['tweet_txt']){
						/* En caso de ser respuesta, publicarlo como tal */
						if($_POST['reply_id']!=''){
							$connection->post('statuses/update', array('status' => $_POST['tweet_txt'],'in_reply_to_status_id' => $_POST['reply_id'] ));
						}else{
							$connection->post('statuses/update', array('status' => $_POST['tweet_txt']));
						}
 
				}
				/*Función que añade los links */
				function twitify($string){
					$t= preg_replace('/(http|https)(:\/\/)([^ ]+)/i', '<a href="$1$2$3">$1$2$3</a>', $string);
 
					$t=  preg_replace('/@([^ :]+)/i', '<a href="http://twitter.com/$1">@$1</a>', $t);
					$t=  preg_replace('/#([^ :]+)/i', '<a href="http://search.twitter.com/search?q=%23$1">#$1</a>', $t);
					return $t;
				}
 
				 /* Pestañas */
				 $twitter_content.='<ul class="t_tab">
				 						<li class="t_selected" id="#t_timeline">Timeline</li>
										<li id="#t_mentions">@Mentions</li>
										<li id="#t_messages">Messages</li>
									</ul>';
 
 
				/* Obtenemos el timeline */
				$t = $connection->get('statuses/home_timeline', array('count' => 40));					
				$twitter_content.='<div id="t_timeline" class="tab_content"><ul>';
				foreach($t as $k=>$val){
 
					$twitter_content.='<li>
						<div class="foto">
							<img src="'.$val->user->profile_image_url.'" alt="'.$val->user->name.'" width="48px" /> 
						</div>
						<a href="http://twitter.com/'.$val->user->screen_name.'" title="'.$val->user->name.'">'.$val->user->name.'</a>
						<br/>'.twitify($val->text).'<br/>
						<div style="text-align:right">
							<a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->user->screen_name.'\');">Reply</a>
						</div>
 
						</li>';
 
				}
				$twitter_content.='</ul></div>';
 
				/* Obtenemos las menciones */
				$t = $connection->get('statuses/mentions', array('count' => 20));  
				$twitter_content.='<div id="t_mentions" class="tab_content" style="display:none;"><ul>';
				foreach($t as $k=>$val){
 
					$twitter_content.='<li>
					<div class="foto">
						<img src="'.$val->user->profile_image_url.'" alt="'.$val->user->name.'" width="48px" />
					</div> 
					<a href="http://twitter.com/'.$val->user->screen_name.'" title="'.$val->user->name.'">'.$val->user->name.'</a>
					<br/>'.twitify($val->text).'<br/>
					<div style="text-align:right">
						<a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->user->screen_name.'\');">Reply</a>
					</div>
					</li>';
 
				}
				$twitter_content.='</ul></div>';	
 
				/* Mensajes directos */	
				$t = $connection->get('direct_messages', array('count' => 20));  
				$twitter_content.='<div id="t_messages" class="tab_content" style="display:none;"><ul>';
				foreach($t as $k=>$val){
 
					$twitter_content.='<li>
					<div class="foto">
						<img src="'.$val->sender->profile_image_url.'" alt="'.$val->sender->name.'" width="48px" />
					</div> 
					<a href="http://twitter.com/'.$val->sender->screen_name.'" title="'.$val->sender->name.'">'.$val->sender->name.'</a>
					<br/>'.twitify($val->text).'<br/>
					<div style="text-align:right">
						<a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->sender->screen_name.'\');">Reply</a>
					</div>
					</li>';
 
				}
				$twitter_content.='</ul></div>';	
 
 
				}
				?>

Expliquemos un poco que es lo que vemos:

  • Incluyo las dos librerías necesarias para que todo funcione
  • Compruebo si esta el usuario loguedo y muestro boton en caso negativo ( siempre almaceno todo en $twitter_content)
  • En caso de estar logueado recupero los datos de la sesion.
  • Creo el objeto twitterOauth
  • Verifico las credenciales
  • Creo el formulario
  • Compruebo si se ha enviado un mensaje y si es en respuesta de algún otro. En caso afirmativo lo posteo en twitter
  • La siguiente función es muy interesante ya que se encarga de añadir los links a los @usuarios ,#tags y url ya que cuando recuperamos un timeline de twitter este lo envía en texto plano ( sin código HTML como <a href>)
  • Añado las pestañas para moverme por los diferentes timelines
  • Y por último obtengo los tres timeline ( Timeline, menciones y mensajes directos)


config.php

1
2
3

define('CONSUMER_KEY', 'Tu consumer key');
define('CONSUMER_SECRET', ' Tu consumer secret');
define('OAUTH_CALLBACK', 'Tu dirección donde tienes el archivo callback.php');

Como ven este archivo no tiene complicación alguna y se trata simplemente de configurar unos valores predeterminados. Para obtener el CONSUMER_KEY pueden leer mi tutorial de Twitter + PHP + OAuth

Y con todo lo visto anteriormente más un poco de CSS podemos crear una aplicación para Twitter echa en PHP

Les recomiendo ampliamente echar un vistazo a todos los archivos para entender mejor su funcionamiento. Un saludo y espero que les haya gustado.

]]> http://www.masquewordpress.com/como-crear-una-aplicacion-de-twitter-con-php/feed/ 20 Que necesitan ? http://www.masquewordpress.com/que-necesitan/ http://www.masquewordpress.com/que-necesitan/#comments Fri, 28 May 2010 22:03:26 +0000 Damian http://masquewordpress.com/?p=416 Hola a todos!! En este post no voy a explicar ningun plugin , ni hablar de JQuery , ni juegos , ni nada. Tan solo les quiero preguntar a ustedes, mis lectores ¿Que necesitan?

Si hace tiempo que buscan algun tutorial o tienen visto alguno que no deja de todo claro las cosas. Encontraron un plugin raro de JQuery y no le sacan la vuelta a como usarlo. No entienden bien algun tema de PHP o Mysql. Hoy están de suerte, dejen en los comentarios que necesitan y si puedo los iré ayudando.

Eso es todo , un saludo!!!

]]> http://www.masquewordpress.com/que-necesitan/feed/ 3 Paginación con PHP y MySQL + 3 estilos http://www.masquewordpress.com/paginacion-con-php-y-mysql-3-estilos/ http://www.masquewordpress.com/paginacion-con-php-y-mysql-3-estilos/#comments Mon, 25 May 2009 18:08:23 +0000 Damian http://masquewordpress.com/?p=23 En este tutorial les voy a enseñar el método que utilizo para hacer paginación en mis diseños.Pero para empezar ¿A que se le llama paginación? Esto es simplemente el índice que aparece abajo del todo que algunas veces contiene números y otras no, y nos sirve para cambiar de página. Es muy útil cuando tenemos muchos datos para mostrar y ya resulta feo que aparezca todo en la misma página.

Típica estructura:

estructura paginación

La estructura más comun suele contar con 2 botones (Previous y next) más otros tantos con los números de las páginas que tengamos(variable segun la cantidad de datos). El número resaltado indica en que página nos encontramos actualmente , y si no hay más páginas hacia abajo o hacia arriba se deshabilitaran los botones de Previous y Next respectivamente. Por último tenemos el selector de números que nos permitira saltar directamente a cualquier página sin necesidad de pasar una a una.

Para diseñar esta estructura usaremos una lista HTML (<ul>) que a su vez contendra tantos elementos de lista (<li>) como sea necesario. A cada lista le vamos a asignar un ID que definirá su estilo. A continuación paso a explicar más detalladamente.

Paginación al estilo de Flickr:

En este caso vamos a diseñar la paginación al estilo de Flickr y se verá del siguiente modo:

flicrk

El código HTML que vamos a usar es muy simple y nos servira como esqueleto para cualquier estilo , ya que solo necesitaremos cambiar el ID de la lista que en el siguiente caso será “pagination-flickr”.

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-flickr">
	<li class="previous-off">«Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=8">Next »</a></li>
</ul>

Ahora solo nos queda agregar el código CSS para darle estilo a nuestra lista:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ------------- Pagination: Flickr -----------	*/
/* -------------------------------------------- */
ul    { border:0; margin:0; padding:0; }
#pagination-flickr li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-flickr a           { border:solid 1px #DDDDDD; margin-right:2px; }
#pagination-flickr .previous-off,
#pagination-flickr .next-off   { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-flickr .next a,
#pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; }
#pagination-flickr .active     { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination-flickr a:link,
#pagination-flickr a:visited   { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-flickr a:hover     { border:solid 1px #666666; }

Paginación al estilo de DIGG:

digg

La estructura como pueden ver es la misma. Solo cambiamos el atributo ID de la lista.

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-digg">
	<li class="previous-off">«Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=8">Next »</a></li>
</ul>

Y nuevamente añadiremos el estilo correspondiente. Como vereis los elementos son los mismos, solo cambiamos algunos atributos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ----------- Pagination: Digg Style --------- */
/* -------------------------------------------- */
ul    { border:0; margin:0; padding:0; }
#pagination-digg li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a           { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,
#pagination-digg .next-off   { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-digg .next a,
#pagination-digg .previous a { font-weight:bold; }
#pagination-digg .active     { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-digg a:link,
#pagination-digg a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-digg a:hover     { border:solid 1px #0e509e; }

Estilo de paginación limpio:

clean

Para crear un estilo un poco más limpio y menos cargado podemos usar el siguiente codigo CSS. Recordar que tienen que cambiar el ID del elemento <ul> por “pagination-clean” :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ------------- Pagination: Clean ------------ */
/* -------------------------------------------- */
#pagination-clean li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
/* savers #pagination-clean li,*/
#pagination-clean a           { border-right:solid 1px #DEDEDE; margin-right:2px; }
#pagination-clean .previous-off,
#pagination-clean .next-off   { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-clean .next a,
#pagination-clean previous a  { border:none; font-weight:bold; }
#pagination-clean .active     { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; }
#pagination-clean a:link,
#pagination-clean a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; }
#pagination-clean a:hover     { text-decoration:none; }

Con esto ya tenemos unas listas y su correspondientes estilos para que nuestra paginación quede de una forma profesional. El siguiente paso es añadir el codigo PHP necesario para crear el índice de acuerdo a la cantidad de datos que tengamos y poder así modificar la consulta SQL para que nos muestre ciertos resultados. Para las conexiones a la base de datos voy a seguir los pasos descritos en este artículo.

Para empezar necesitamos hacer 2 consultas SQL en lugar de 1. La primera va a ser para recuperar TODOS los datos y asi poder calcular cuantas páginas vamos a necesitar. La segunda consulta va a mostrar un rango de resultados según en que página estemos.

Por ejemplo digamos que queremos mostrar una tabla con datos de películas donde nos muestre el nombre de la película, el año de creación , etc. La tabla SQL esta compuesto por los siguientes campos: idPelicula(int(5)), nombre(VARCHAR(150)), director(VARCHAR(100)), anio(DATE).

A continuación como seria el código:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<?php
//INCLUYO LA HOJA DE ESTILOS
?>
<link href="css/paginacion.css" type="text/css" rel="stylesheet">
<?
include('config/db.php');
$conn=get_db_conn();
 
//AL PRINCIPIO COMPRUEBO SI HICIERON CLICK EN ALGUNA PÁGINA 
if(isset($_GET['page'])){
    $page= $_GET['page'];
}else{
//SI NO DIGO Q ES LA PRIMERA PÁGINA
    $page=1;
}
 
//ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA
$consulta="SELECT * FROM peliculas";
$datos=mysql_query($consulta,$conn);
 
//MIRO CUANTOS DATOS FUERON DEVUELTOS
$num_rows=mysql_num_rows($datos);
 
//ACA SE DECIDE CUANTOS RESULTADOS MOSTRAR POR PÁGINA , EN EL EJEMPLO PONGO 15
$rows_per_page= 15;
 
//CALCULO LA ULTIMA PÁGINA
$lastpage= ceil($num_rows / $rows_per_page);
 
//COMPRUEBO QUE EL VALOR DE LA PÁGINA SEA CORRECTO Y SI ES LA ULTIMA PÁGINA
$page=(int)$page;
if($page > $lastpage){
    $page= $lastpage;
}
if($page < 1){
    $page=1;
}
 
//CREO LA SENTENCIA LIMIT PARA AÑADIR A LA CONSULTA QUE DEFINITIVA
$limit= 'LIMIT '. ($page -1) * $rows_per_page . ',' .$rows_per_page;
 
//REALIZO LA CONSULTA QUE VA A MOSTRAR LOS DATOS (ES LA ANTERIO + EL $limit)
$consulta .=" $limit";
$peliculas=mysql_query($consulta,$conn);
 
if(!$peliculas){
        //SI FALLA LA CONSULTA MUESTRO ERROR
 die('Invalid query: ' . mysql_error());
}else{
      //SI ES CORRECTA MUESTRO LOS DATOS 
      ?> <table><thead>
        <tr><th>Título</th><th>Director</th><th> Año de producción</th></tr>
        </thead>
        <tbody>
    <? while($row = mysql_fetch_assoc($peliculas)){  ?>
        <tr><td><? echo $row['nombre']; ?> </td><td> <? echo $row['director']; ?> </td><td> <?echo $row['anio']; ?> </td></tr>
       <?  } ?>
      </tbody>
      </table>
<?
//UNA VEZ Q MUESTRO LOS DATOS TENGO Q MOSTRAR EL BLOQUE DE PAGINACIÓN SIEMPRE Y CUANDO HAYA MÁS DE UNA PÁGINA
 
if($numrows != 0){
   $nextpage= $page +1;
   $prevpage= $page -1;
?><ul id="pagination-digg"><?
//SI ES LA PRIMERA PÁGINA DESHABILITO EL BOTON DE PREVIOUS, MUESTRO EL 1 COMO ACTIVO Y MUESTRO EL RESTO DE PÁGINAS
 if ($page == 1) {
 	?>
      <li class="previous-off">&laquo; Previous</li>
      <li class="active">1</li> <?
	for($i= $page+1; $i<= $lastpage ; $i++){?>
			<li><a href="busquedas.php?page=<? echo $i;?>"><? echo $i;?></a></li>
 <? }
       //Y SI LA ULTIMA PÁGINA ES MAYOR QUE LA ACTUAL MUESTRO EL BOTON NEXT O LO DESHABILITO
	if($lastpage >$page ){?>		
      <li class="next"><a href="busquedas.php?page=<? echo $nextpage;?>" >Next &raquo;</a></li><?
	}else{?>
	  <li class="next-off">Next &raquo;</li>
<?	}
 } else {
//EN CAMBIO SI NO ESTAMOS EN LA PÁGINA UNO HABILITO EL BOTON DE PREVIUS Y MUESTRO LAS DEMÁS
	?>
	 <li class="previous"><a href="busquedas.php?page=<? echo $prevpage;?>"  >&laquo; Previous</a></li><?
      for($i= 1; $i<= $lastpage ; $i++){
                       //COMPRUEBO SI ES LA PÁGINA ACTIVA O NO
	  		if($page == $i){
		?>	<li class="active"><? echo $i;?></li><?
			}else{
		?>	<li><a href="busquedas.php?page=<? echo $i;?>" ><? echo $i;?></a></li><?
			}
	  }
         //Y SI NO ES LA ÚLTIMA PÁGINA ACTIVO EL BOTON NEXT		
	  if($lastpage >$page ){	?>	
      <li class="next"><a href="busquedas.php?page=<? echo $nextpage;?>">Next &raquo;</a></li><?
	  }else{
	?> <li class="next-off">Next &raquo;</li><?
	  }
 }	  
?></ul></div><?
} 
}

Seguramente esta última parte del codigo se pueda mejorar ya que la escribí un poco “rapido”, así que estoy abierto a sugerencias. De todas formas a mi me funciona todo correctamente. Espero que les haya servido de ayuda, ya que en su día me costo mucho encontrar un buen tutorial sobre la paginación y ninguno de los que encontre venia completo. Un saludo!!!

Descargar ejemplo

Nueva version usando una clase PHP
]]> http://www.masquewordpress.com/paginacion-con-php-y-mysql-3-estilos/feed/ 33 DB.php : Como definir los parametros de conexión de tu base de datos http://www.masquewordpress.com/dbphp-como-definir-los-parametros-de-conexion-de-tu-base-de-datos/ http://www.masquewordpress.com/dbphp-como-definir-los-parametros-de-conexion-de-tu-base-de-datos/#comments Sun, 24 May 2009 18:49:59 +0000 Damian http://masquewordpress.com/?p=58 En mis diseños siempre defino los valores de conexión a la base de datos en un archivo php llamado db.php  (database name, username, password, database host), de forma que cada vez que necesito conectarme tan solo tengo que hacer un include del mismo.

Una vez que tengamos creado nuestra base de datos a traves de phpMyAdmin o desde nuestro gestor en el hosting, tan solo tenemos que crear este archivo, que es muy sencillo y solo ocupa unas lineas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?
//datos de conexion que hay que editar con los que corresponda
$GLOBALS['DB_IP'] = 'localhost';
$GLOBALS['DB_USER'] = 'unnombredeusuario';
$GLOBALS['DB_PASS'] = 'unpassword';
$GLOBALS['DB_NAME'] = 'nombredelabasededatos';
 
//
// Funcion que vamos a usar para realizar la conexion (Acá no se edita nada)
//
function get_db_conn() {
$conn = mysql_connect($GLOBALS['DB_IP'], $GLOBALS['DB_USER'], $GLOBALS['DB_PASS']);
 
mysql_select_db($GLOBALS['DB_NAME'], $conn);
if (!$conn) {
echo "No pudo conectarse a la BD: " . mysql_error();
exit;
}
 
return $conn;
}
?>

Con eso ya tendriamos los datos de conexión listos, aunque yo siempre agrego una pequeña funcion para proteger los datos de inyección SQL (o como dicen en ingles SQL INJECTIONS).Por lo que me aseguro que cada vez que carga una conexion , cargo también la funcion que me va a ayudar a protegerme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//PARA PROTEGER SQL INJECT
function cleanQuery($string){
 
if(get_magic_quotes_gpc())   {
 
$string = stripslashes($string);
}
if (phpversion() >= '4.3.0') {
 
$string = mysql_real_escape_string($string);
}
else {
 
$string = mysql_escape_string($string);
}
return $string;
}

Por lo tanto nuestro archivo db.php queria de la siguiente manera:

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

 
<?
$GLOBALS['DB_IP'] = 'localhost';
$GLOBALS['DB_USER'] = 'unnombredeusuario';
$GLOBALS['DB_PASS'] = 'unpassword';
$GLOBALS['DB_NAME'] = 'nombredelabasededatos';
 
//
// Database queries
//
function get_db_conn() {
$conn = mysql_connect($GLOBALS['DB_IP'], $GLOBALS['DB_USER'], $GLOBALS['DB_PASS']);
 
mysql_select_db($GLOBALS['DB_NAME'], $conn);
if (!$conn) {
echo "No pudo conectarse a la BD: " . mysql_error();
exit;
}
 
return $conn;
}
 
//PARA PROTEGER SQL INJECT
function cleanQuery($string)
{
if(get_magic_quotes_gpc())  // prevents duplicate backslashes
{
$string = stripslashes($string);
}
if (phpversion() >= '4.3.0')
{
$string = mysql_real_escape_string($string);
}
else
{
$string = mysql_escape_string($string);
}
return $string;
}
?>

Una vez armado el db.php , solo nos queda incluirlo en nuestras páginas. y lo haremos de la siguiente manera:

1

<?php include('config.php'); ?>

Una vez incluido nuestro archivo podemos realizar una nueva conexión de la siguiente forma:

1
2

//Creamos la variable $conn y le asignamos la conexión a la base de datos
$conn=get_db_conn();

La función cleanQuery la vamos a usar para “limpiar” las variables. Si juntamos todo los visto anteriormente y suponiendo que tenemos un archivo llamado busquedas.php al cual le pasamos una variable $_GET['pelicula'] podriamos dejar el código de la siguiente manera:

EJ:busquedas.php?pelicula=killBill

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
include('config.php');
$conn=get_db_conn();
 
$nombrePelicula= cleanQuery($_GET['pelicula']);
 
$consulta="SELECT * FROM peliculas WHERE nombre='$nombrePelicula'";
 
$peliculas=mysql_query($consulta, $conn);
 
if(!$peliculas){
 die('Invalid query: ' . mysql_error());
}else{
  //la consulta se ejecuto correctamente y mostramos los datos
   ?> <table><thead>
        <tr><th>Título</th><th>Director</th><th> Año de producción</th></tr>
        </thead>
        <tbody>
    <? while($row = mysql_fecth_assoc($peliculas)){  ?>
        <tr><td><? echo $row['nombre']; ?> </td><td> <? echo $row['director']; ?> </td><td> <?echo $row['año']; ?> </td></tr>
       <?  } ?>
      </tbody>
      </table>

Esta sería la forma sencilla de configurar las conexiones a una base de datos. Por favor comenten cualquier duda que vaya surgiendo. Un Saludo

Descargar db.php

]]> http://www.masquewordpress.com/dbphp-como-definir-los-parametros-de-conexion-de-tu-base-de-datos/feed/ 9 Como instalar apache + php + mysql + phpMyAdmin en windows http://www.masquewordpress.com/como-instalar-apache-php-mysql-phpmyadmin-en-windows/ http://www.masquewordpress.com/como-instalar-apache-php-mysql-phpmyadmin-en-windows/#comments Thu, 21 May 2009 14:36:31 +0000 Damian http://masquewordpress.com/?p=38 AppServ es un software que nos permite instalar sobre Windows: Apache, PHP, MySQL y phpMyAdmin (interfaz gráfica para adminsitrar MySQL) de forma conjunta. Es una aplicación muy útil porque en unos pocos pasos podemos tener un servidor corriendo y listo para hacer pruebas. Así que no nos va a hacer falta contratar un servidor , dominio, etc..

Home Page Appserv

Home Page Appserv

Esta es la forma más facil de diseñar sin tener que estar subiendo archivos a tu servidor, ya que una vez que tenemos todo listo lo subimos y punto.

Para instalar AppServ tenemos que seguir los siguientes pasos:

  • En primer lugar descargamos el último paquete desde SourceForge
  • Una vez descargado el ejecutable procedemos a ejecutar la instalación, vamos a ver el  mensaje de bienvenida y hacemos Click en Next
  • Directorio de Instalación: en esta pantalla nos solicita el directorio en el que queremos instalar la aplicación, por defecto nos marca “c:/appserv”, lo cambiamos si queremos y pulsamos Next.
  • Tipo de Instalación: Elegimos Typical.
  • Server Information: La casilla Server Name la dejamos como viene por defecto con “Localhost” y en la casilla Administrator E-mail Address o lo dejamos como viene por defecto y luego lo cambiamos, o le introducimos una cuenta de correo que sera la del administrador. El campo “HTTP Port” lo dejamos como viene por defecto (80), salvo que queramos que el servidor atienda les peticiones en otro puerto. Pulsamos en Next
  • MySql Information: Este es uno de los apartados más importantes ya que empezamos a instalar MySQL. En la casilla Username introduciremos el nombre del administrador de la base de datos y en la casilla Password le introducimos la contraseña, aunque si queremos hacerlo más fácil ponemos como usuario: root y el apartado contraseña lo dejamos vacio ya que posteriormente podemos cambiarlo con phpMyAdmin. El apartado Charset lo dejamos tal como viene por defecto. Pulsamos en Next
  • Progreso de la instalación: Empieza realmente la instalación mostrandonos una barra de progreso hasta que aparece una pantalla que nos avisa de que ha finalizado la misma, debiendo dejar marcadas las opciones que vienen por defecto. Finalmente pulsamos en Close.
  • Comprobación de la instalación: Si hemos hecho bien los deberes al poner en nuestro navegador: http://localhost nos debe aparecer la pantalla de AppServ Open Project con algunos link como el phpInfo o a phpmyadmin

Si esta pantalla no aparece supone que bien Apache o MySQL no están funcionado bien, y debemos volver a instalarlo.

Y por ultimo nos queda empezar a diseñar nuestros archivos html ,php, etc y poder practicar un poco en nuestra maquina local antes de lanzarnos a internet.

]]> http://www.masquewordpress.com/como-instalar-apache-php-mysql-phpmyadmin-en-windows/feed/ 2 Introducción al diseño web con PHP + CSS – Parte III - http://www.masquewordpress.com/introduccion-al-diseno-web-con-php-css-parte-iii/ http://www.masquewordpress.com/introduccion-al-diseno-web-con-php-css-parte-iii/#comments Fri, 01 May 2009 12:00:42 +0000 Damian http://masquewordpress.com/?p=109 En el primer post vimos como sería la estructura básica de una web y su correspondiente código HTML. En el segundo tutorial le aplicamos estilo mediante CSS y le añadimos una barra de navegación.

Bien , en esta última parte del tutorial vamos a ver como vamos a ir cargando las diferentes “secciones” de la web en lo que sería la columna izquierda de nuestra web. Para ello necesitamos comprobar el valor de la variable $_GET['page'] y segun sea su valor cargar un contenido u otro. Para ello hacemos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

       <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>

Con esto tendriamos la web casi echa, con una columna derecha fija y la parte izquierda dinámica. Podriamos añadir un poquito más de estilo CSS para darle forma, resultando nuestro archivo final asi:

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
42
43

/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;
border:7px solid #CCCCCC;
padding:20px;
}
p{
font:11px Verdana;
text-align:justify;
}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;
border:1px solid #191919;
}
                 /****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{color:red;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
 
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;
border-top:1px solid;
text-align:center;
}

Y el código HTML de la siguiente forma:

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
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar donde podemos poner un logo por ej </div>
               <div id="navbar"><ul>
                                            <li><a href="index.php?page=home"> Home</a></li>
                                            <li><a href="index.php?page=registrarse"> Registrarse </a></li>
                                            <li><a href="index.php?page=login"> Login</a></li>
                                            <li><a href="index.php?page=contacto"> Contacto</a></li>
                                            </ul>
                </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> 
                     <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
                     </div>
                     <div id="column_right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
    <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Bueno , espero que esto les haya servido de ayuda. Porfavor comentes si ven algun que otro error o quieren cambiar algo.
Ejemplo online
Descargar ejemplo

]]> http://www.masquewordpress.com/introduccion-al-diseno-web-con-php-css-parte-iii/feed/ 5