Acortador de urls paso a paso (2ª parte)

Hola amigos, que tal? Como os prometí, aquí os traigo la segunda parte para hacer vuestro propio url shortener (acortador de urls).

Siguiendo el anterior artículo, vamos a proceder con la instalación del programa Notepad++, trabajaremos con phpmyadmin para crear nuestra base de datos y crearemos los archivos y funciones necesarios para hacer que nuestro acortador de urls funcione.

Ya una vez tengamos todo listo, dependerá de ti hacer el diseño y las funciones necesarias para la administración de los enlaces. ¿Empezamos?

Acortador de urls

Antes de empezar voy a recordar en pocas palabras que vamos a hacer en este artículo. Vamos a crear el archivo de la clase db, para las conexiones a la base de datos y la página indice, acortar url y decodificar url. Por otra parte también vamos a crear el archivo .htaccess para la captura de las urls cortas.

Notepadd++

Lo primero es lo primero, si no tienes este magnifico editor de textos, te recomiendo que los descargues ahora mismo! Aún así, con el editor de textos de Windows, puedes seguir este tutorial.

Archivo .htaccess

Antes de nada tenemos que crear un archivo llamado .htaccess y colocar el siguiente código:

Options +FollowSymLinks -Indexes -MultiViews
RewriteEngine On
RewriteRule ^([wd]{4})$ decode.php?decode=$1 [L]
RewriteRule ^([a-zA-Z0-9_-]+)/$ decode.php?decode=$1 [L]

Con esto, conseguiremos capturar las urls cortas para decodificarlas a las urls largas de nuestra base de datos.

Archivo db.class.php

Doy por sentado, que al seguir este artículo, has leído la primera parte y tienes instalado un servidor Apache local con PHP y Mysql.

Lo más importante de nuestro acortador de urls será este archivo, pues es el encargado de realizar las operaciones con la base de datos. A continuación os dejo un enlace con el archivo zip del archivo db.class.php.

db.class.zip

Una vez lo tengáis descargado, en la carpeta de Estructura-basica, vamos a crear una nueva carpeta llamada conf y moveremos dentro el contenido del zip, que es el archivo db.class.php

Creando nuestra base de datos

Muy bien, ahora que tenemos el archivo db.class.php procederemos a editar las siguientes líneas:

define("DB_HOST", "dbhost");
define("DB_USER", "dbuser");
define("DB_PASS", "dbpass");
define("DB_NAME", "dbname");

Y colocaremos nuestros datos de conexión.

Si estás utilizando Xampp y no has personalizado muchas opciones, el usuario debería ser “root” sin contraseña (deja la línea de la clave así: define("DB_PASS", "");

Ahora abre tu navegador y coloca la siguiente url http://localhost/phpmyadmin y pulsa enter.

Luego tal como ves en la siguiente imagen, haz clic en Nuevaluego escribe el nombre de la base de datosy finalmente pulsa en Crear3

Ahora toca crear la tabla para los enlaces, haz clic en SQL y pega el siguiente código:

CREATE TABLE `links` (
`id` int(20) NOT NULL,
`uid` int(20) NOT NULL,
`url` text NOT NULL,
`short` varchar(620) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `links`
ADD PRIMARY KEY (`uid`);
COMMIT;

Perfecto! Con esto ya tenemos nuestra base de datos operativa. Ahora vamos a proceder con la creación de las páginas indice, short y decode.

Página index.php

Está será la página principal de nuestro script. Aquí vamos a crear un formulario para capturar la url larga y enviarla al archivo short.php mediante POST y que esté lo guarde en la tabla que hemos creado en nuestra base de datos.

Pero primero de todo, dentro de la carpeta Estructura-basica, vamos a crear un nuevo archivo y lo vamos a llamar short.php, una vez creado editalo y copia y pega todo el contenido del archivo index.php. Ahora crea un archivo llamado decode.php y realiza la misma operación.

Una vez terminada la clonación de la página index.php, copia y pega el siguiente código en la página index.php de la carpeta Estructura-basica debajo de la línea <!-- Page Content -->

<form class="form-inline" id="theForm" method="post" action="short.php">
<div class="md-form form-group display-1 mb-2">
<i class="fa fa-link fa-1x prefix"></i>
<input type="text"  class="form-control" id="iurl" size="50" name="url" placeholder="http://..." required>
</div>
<div class="md-form form-group display-1 mb-2">
<button class="btn btn-color-primary btn-lg" type="submit" name="submit" id="submit"> <span class="">Acortar url</span> </button> 
</div>
</form>

Página short.php

Ahora toca editar la página short.php para la recepción de la url larga y posterior creación de la url corta y guardado en la base de datos.

Procederemos igual que en la página index.php, copia y pega el siguiente código debajo de la línea <!-- Page Content -->

<?php
require_once 'conf/db.class.php';
$bdd = new db();
$hostname=$_SERVER['HTTP_HOST'];
if (isset($_POST['url'])) {
$User = $bdd->getOne("SELECT `uid` FROM `links` ORDER BY `uid` DESC LIMIT 1" );
$uid = $User['uid'];
$id = rand(10000,99999);
$idplus = ++$uid;
$urlinput=$_POST['url'];
$shorturl = base_convert($id,20,36); 
$User = $bdd->execute("INSERT INTO links (id,uid,url,short) VALUES ('$id', '$uid', '$urlinput', '$shorturl')" );
$User = $bdd->getOne("SELECT * FROM `links` ORDER BY `uid` DESC LIMIT 1" ); 
?>
<span class="slogan1"> <a class='' href="<?=$User['short'];?>" title="enlace corto" target="_blank" style="text-decoration:none"> <?php echo "<span class=''>".$hostname."/</span><span class=''>".$User['short']."</span>"; ?> </a> </span>
<br />
<span class="">¿Crear otra?</span>
<br />
<a href="index.php" class="btn btn-primary"><span class="">Volver</span></a>
<?php } ?>

Página decode.php

Ya solo nos queda editar la página decode.php para capturar la url corta y mostrar la página de redireccionamiento. Para ello copia y pega el siguiente código en la página decode.php debajo de la línea <!-- Page Content -->

<?php
require_once 'conf/db.class.php';
$bdd = new db();
if (isset($_GET)) { 
$de = $_GET["decode"];
$User = $bdd->getOne("SELECT * FROM `links` WHERE short='$de'" );
$res = $User['url']; ?>
<script type="text/javascript">
var timeleft=10;
var goto_url="<?=$res;?>";
var downloadTimer=setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent=timeleft;
if(timeleft<=0){clearInterval(downloadTimer);}
if(timeleft<=0){Javascript:window.location.href=goto_url;}
},1000);
</script>
<p class="">
<span class='slogan2 white-text'>Serás redireccionado en</span>
<br />
<span class='slogan1 color-themebd-text3' id="countdowntimer">10</span>
<br />
<span class='slogan2 white-text'>segundos</span>
</p>
<?php } ?>

Conclusión

Muy bien, si has seguido todo al pie de la letra, deberías de tener un acortdor de urls funcional. Puedes comprobarlo entrando en la url http://dominio.local y debería aparecer el formulario para colocar una url larga y al pulsar el botón serás redirigido a la página short.php donde se mostrara la url corta y un botón para volver a la página index.php

Por último solo quedará comprobar que al colocar la url corta, eres redirigido a la página decode.php donde se muestra el contador y al terminar este, eres redirigido a la url larga.

Ahora solo queda trabajar en tu script, creando una zona de login, un panel de administración para editar los links y todo lo que necesites para que tu script haga lo que tu quieras.

Si no es el caso y quieres ahorrar algo de tiempo, puedes comprar mi script SLRU Script en mi tienda, el cual ya ofrece muchas de las opciones que acabo de mencionar. También dejo un enlace para que veas mi script en acción.