En este sencillo tutorial enseñare a crear los BBCODES, para quienes no sepan que son los BBCODES , son las etiquetas como:
[b][/b]
[i][/i]
[u][/u]
Y muchas mas, tambien podemos poner nuestros emoticones...
Bueeno comenzamos :
Primero debemos definir las etiquetas que vamos a crear.
$etiquetas = array(
':)' => '<img src="http://loginwebs.webcindario.com/feliz.gif" />',
';)' => '<img src="http://loginwebs.webcindario.com/wink.gif" />',
':D' => '<img src="http://loginwebs.webcindario.com/cheesy.gif" />',
':@' => '<img src="http://loginwebs.webcindario.com/enojado.gif" />',
'(H)' => '<img src="http://loginwebs.webcindario.com/cool.gif" />',
':P' => '<img src="http://loginwebs.webcindario.com/tongue.gif" />',
'[b]' => '<span style="font-weight:bold">',
'[/b]' => '</span>',
)
Entonces definimos que:
:)
será (http://r.i.elhacker.net/cache?url=http://foro.portalhacker.net/Smileys/classic/smiley.gif)
Ustedes pueden agregar mas utilidades o "Efectos"
Como vemos, ingresamos las etiquetas en un Array, el
que leeremos mas adelante para el reemplazo...
Ahora crearemos la funcion que hace el reemplazo en caso de que el usuario ingrese una de esas etiquetas:
function cambio( $codigo )
{
$search = array_keys( $GLOBALS['etiquetas'] );
$codigo = str_replace( $search, $GLOBALS['etiquetas'], $codigo );
return $codigo;
}
Lo que hicimos fue crear la funcion cambio, que reemplazará las palabras encontradas y cambiarlas por el BBCODE Existente(Solo si lo hay, obvio).
Entonces nuestro codigo final sería:
<?php
$etiquetas = array(
':)' => '<img src="http://loginwebs.webcindario.com/feliz.gif" />',
';)' => '<img src="http://loginwebs.webcindario.com/wink.gif" />',
':D' => '<img src="http://loginwebs.webcindario.com/cheesy.gif" />',
':@' => '<img src="http://loginwebs.webcindario.com/enojado.gif" />',
'(H)' => '<img src="http://loginwebs.webcindario.com/cool.gif" />',
':P' => '<img src="http://loginwebs.webcindario.com/tongue.gif" />',
'[b]' => '<span style="font-weight:bold">',
'[/b]' => '</span>',
);
function cambio( $codigo )
{
$search = array_keys( $GLOBALS['etiquetas'] );
$codigo = str_replace( $search, $GLOBALS['etiquetas'], $codigo );
return $codigo;
}
?>
Pero ustedes dirán ... Y como lo implemento ?
Crearemos un Formulario, algo así como un Libro de Firmas o Visitas...
En caso que nuestro "Libro" se llame index.php ponen index.php en el action="" o lo cambian por el que ustedes tengan
<form action="index.php" method="post">
<table border="0">
<tr><td><b><font color=Silver>User:</td><td><input name=User maxlength=10><b> 10 Caracteres maximo.</b></td></tr></br>
<tr><td><b><font color=Silver>Mensaje:</td><td><textarea name=usuario cols=75 rows=6 onkeypress="return maxLength(event,this,100);"></textarea></td></tr></br>
<tr><td/><td><button><img src="http://foro.portalhacker.net/Themes/miembro/images/spanish_es-utf8/reply.gif"></button><b> 100 Caracteres Maximo</b> .
</td></tr>
</table>
</form>
Como ven, ahí creamos el Mini Formulario donde ingresaran el Nick y el mensaje en el libro de visitas...
Y al mismo le ponemos nuestro PHP , al que le he agregado algunas cosas:
<?php
$usuario = htmlspecialchars($_REQUEST['usuario'], ENT_QUOTES);
$user = htmlspecialchars($_REQUEST['User'], ENT_QUOTES);
$etiquetas = array(
':)' => '<img src="http://loginwebs.webcindario.com/feliz.gif" />',
';)' => '<img src="http://loginwebs.webcindario.com/wink.gif" />',
':D' => '<img src="http://loginwebs.webcindario.com/cheesy.gif" />',
':@' => '<img src="http://loginwebs.webcindario.com/enojado.gif" />',
'(H)' => '<img src="http://loginwebs.webcindario.com/cool.gif" />',
':P' => '<img src="http://loginwebs.webcindario.com/tongue.gif" />',
'[b]' => '<span style="font-weight:bold">',
'[/b]' => '</span>',
);
function cambio( $codigo )
{
$search = array_keys( $GLOBALS['etiquetas'] );
$codigo = str_replace( $search, $GLOBALS['etiquetas'], $codigo );
return $codigo;
}
$fp = fopen("mensaje.txt", "a"); // Si no quieres que la lista sea privada dale otro nombre.
fputs($fp, "<b><font color=Silver> Mensaje ".cambio( $user )." : ".cambio( $mensaje )."<br><hr>");
fclose($fp);
?>
<?php
include("mensaje.txt");
?>
Como vemos, al principio puse un filtro para evitar XSS en nuestro Libro
Tambien creamos un log de mensajes con:
fputs($fp, <b><font color=Silver> Mensaje ".cambio( $user )." : ".cambio( $mensaje )."<br><hr>");
fclose($fp);
?>
El cual será mostrado luego con el :
<?php
include("mensaje.txt");
?>
Y así logramos tener nuestro "Libro de Visitas" Con etiquetas BBCODE y un Lindo Anti XSS, como no trabajamos con Bases de Datos, no corremos riesgo de SQLi...
Bueno y lo que les interesaría supongo yo, es el codigo final...
<form action="index.php" method="post">
<table border="0">
<tr><td><b><font color=Silver>User:</td><td><input name=User maxlength=10><b> 10 Caracteres maximo.</b></td></tr></br>
<tr><td><b><font color=Silver>Mensaje:</td><td><textarea name=usuario cols=75 rows=6 onkeypress="return maxLength(event,this,100);"></textarea></td></tr></br>
<tr><td/><td><button><img src="http://foro.portalhacker.net/Themes/miembro/images/spanish_es-utf8/reply.gif"></button><b> 100 Caracteres Maximo</b> .
</td></tr>
</table>
</form>
<?php
$usuario = htmlspecialchars($_REQUEST['usuario'], ENT_QUOTES);
$user = htmlspecialchars($_REQUEST['User'], ENT_QUOTES);
$etiquetas = array(
':)' => '<img src="http://loginwebs.webcindario.com/feliz.gif" />',
';)' => '<img src="http://loginwebs.webcindario.com/wink.gif" />',
':D' => '<img src="http://loginwebs.webcindario.com/cheesy.gif" />',
':@' => '<img src="http://loginwebs.webcindario.com/enojado.gif" />',
'(H)' => '<img src="http://loginwebs.webcindario.com/cool.gif" />',
':P' => '<img src="http://loginwebs.webcindario.com/tongue.gif" />',
'[b]' => '<span style="font-weight:bold">',
'[/b]' => '</span>',
);
function cambio( $codigo )
{
$search = array_keys( $GLOBALS['etiquetas'] );
$codigo = str_replace( $search, $GLOBALS['etiquetas'], $codigo );
return $codigo;
}
$fp = fopen("mensaje.txt", "a"); // Si no quieres que la lista sea privada dale otro nombre.
fputs($fp, "<img width=10 src=http://foro.portalhacker.net/Themes/miembro/images/on.gif><b><font color=Silver> Mensaje ".cambio( $user )." : ".cambio( $mensaje )."<br><hr>");
fclose($fp);
?>
<?php
include("mensaje.txt");
?>
Fuente: PortalHacker
Autor: Javier G.
Aclaro que como bien he puesto en el título del tema, yo no soy el creador de este tutorial, pero el otro día andaba buscando como implementar bbcodes en PHP para añadirle la función nueva a mi próxima versión de mi libro de visitas, y di con ese post, y me pareció útil, además he visto que en esta misma sección había un post de un usuario que preguntaba sobre esto mismo, asi que a todos nos servirá de ayuda :P
Interesante, pero se extrañan las expresiones regulares :xD gracias por el tuto ;)
Cita de: дٳŦ٭ en 7 Abril 2010, 01:10 AM
Interesante, pero se extrañan las expresiones regulares :xD gracias por el tuto ;)
Sorry, pero me enfoque mas en llegar al punto del BBCODE
y No tanto de explicar las condiciones y esas cosas.
Luego quizas saco una nueva version del tutorial donde explique mas.
Mmm esta bien, pero no podria ser usado en varias tags de BBC como [url], [img], etc..
Saludos!!
Cita de: sirdarckcat en 7 Abril 2010, 08:03 AM
Mmm esta bien, pero no podria ser usado en varias tags de BBC como [url], [img], etc..
Saludos!!
Que raro...
Yo probe esos tags y si me funcionaron.
Emmm no creo que lo dijera porque no funcionará, sino por la seguridad... :silbar:
Cita de: Alex@ShellRoot en 8 Abril 2010, 03:56 AM
Emmm no creo que lo dijera porque no funcionará, sino por la seguridad... :silbar:
nop, lo dice solo porque no funcionaran :) piensa como lo harias siguiendo la base para usarlos :)
El script reemplaza etiqueta de inicio y etiqueta de fin, bajo ese concepto habria que modificar la forma en que trabaja para hacerlo.
Ademas la seguridad... mmm usa htmlspecialchars y ent_quotes asi que quizas se salve de los xss frecuentes, aun asi esta buena la idea para usar smilies :)
no funcionara y ademas sera inseguro y tendra XSS
[img];)[/img]
sera reemplazado incorrectamente por
<img src="<img src="http://loginwebs.webcindario.com/wink.gif" />" />
por lo tanto, no funcionara y:
[img][img]onerror=alert(1)//[/img]
sera reemplazado por
<img src="<img src="onerror=alert(1)//" />
que tiene XSS.
recomiendo que pongan una advertencia en el codigo de que no se use con [img] y [url] y demas..
Saludos!!