Tutorial BBCODE en PHP [By Javier G.]

Iniciado por invisible_hack, 6 Abril 2010, 20:05 PM

0 Miembros y 3 Visitantes están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

invisible_hack

6 Abril 2010, 20:05 PM Ultima modificación: 6 Abril 2010, 20:09 PM por invisible_hack
En este sencillo tutorial enseñare a crear los BBCODES, para quienes no sepan que son los BBCODES , son las etiquetas como:

Código (php) [Seleccionar]


[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.

Código (php) [Seleccionar]


$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:

Código [Seleccionar]

:)


será
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:

Código (php) [Seleccionar]

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:

Código (php) [Seleccionar]

<?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

Código (html4strict) [Seleccionar]

<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:

Código (php) [Seleccionar]

<?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:

Código (php) [Seleccionar]

fputs($fp, <b><font color=Silver>  Mensaje ".cambio( $user )." : ".cambio( $mensaje )."<br><hr>");
   fclose($fp);
?>




El cual será mostrado luego con el :

Código (php) [Seleccionar]

<?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...

Código (php) [Seleccionar]

<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
"Si no visitas mi blog, Chuck te dará una patada giratoria"

дٳŦ٭

#1
7 Abril 2010, 01:10 AM
Interesante, pero se extrañan las expresiones regulares  :xD gracias por el tuto  ;)


Con sangre andaluza :)






https://www.putasvipmexico.com

0x5d

#2
7 Abril 2010, 06:49 AM
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.
¡ SIGUEME EN TWITTER -> @JavierEsteban__ !

sirdarckcat

#3
7 Abril 2010, 08:03 AM
Mmm esta bien, pero no podria ser usado en varias tags de BBC como [url], [img], etc..


Saludos!!

0x5d

#4
8 Abril 2010, 03:31 AM
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.
¡ SIGUEME EN TWITTER -> @JavierEsteban__ !

Shell Root

#5
8 Abril 2010, 03:56 AM
Emmm no creo que lo dijera porque no funcionará, sino por la seguridad...  :silbar:
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

jdc

#6
8 Abril 2010, 04:18 AM
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 :)

sirdarckcat

#7
8 Abril 2010, 04:40 AM Ultima modificación: 8 Abril 2010, 04:45 AM por sirdarckcat
no funcionara y ademas sera inseguro y tendra XSS


Código [Seleccionar]
[img];)[/img]


sera reemplazado incorrectamente por
Código [Seleccionar]
<img src="<img src="http://loginwebs.webcindario.com/wink.gif" />" />


por lo tanto, no funcionara y:


Código [Seleccionar]
[img][img]onerror=alert(1)//[/img]


sera reemplazado por


Código [Seleccionar]
<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!!
Imprimir
Ir Arriba Páginas1
Acciones del Usuario