Cómo hacer tu propio URL Shortener paso a paso

Hola amigos, que tal? Con motivo de mi última gran creación, he decidido hacer un tutorial para quien quiera aventurarse a programar su propio url shortener en PHP.

Creando mi propio Url Shortener PHP Script

Para crear nuestro propio url shortener, vamos a necesitar conocimientos básicos de programación en HTML5/CSS3/PHP y Google.

¿Porque digo Google? Por que hoy en día, cualquier información que necesitemos, seguramente está en Internet, solo hay que saber buscar.

¿Qué necesito para empezar?

Pues para empezar vamos a necesitar varias cosas, paso a enumerar los programas y demás cosas necesarias para empezar con tu nuevo proyecto.

  • Servidor local Apache/PHP/MySQL
  • Editor de textos Notepad++
  • Cliente FTP Filezilla
  • Tiempo libre
  • Creatividad e imaginación
  • Ganas de aprender

Con todo esto, ya podemos empezar cualquier proyecto que se nos pase por la cabeza  8-)

Descargar, instalar y configurar mi propio servidor local Apache/PHP/MySQL

Bueno, este paso es bien fácil hoy en día. Recuerdo cuando mis tiempos de Linux y mi primer servidor local Apache, instalando todos los paquetes y dependencias a mano y luego configurarlo!!

Nada que ver con hoy día.

Primero vamos a tener que descargar el programa Xampp desde su página oficial, a continuación os dejo el enlace directo de cada sistema operativo:

  XAMPP para Windows 5.6.31, 7.0.23

https://www.apachefriends.org/xampp-files/7.0.23/xampp-win32-7.0.23-0-VC14-installer.exe – md5 ca2a9f5101d8ae3b2aa4003067682bcb

Documentación Windows

 XAMPP para Linux 5.6.31, 7.0.23

https://www.apachefriends.org/xampp-files/7.0.23/xampp-linux-x64-7.0.23-0-installer.run – md5 c6decbca66affb7292a6a05ad8b7e3ec

Documentación Linux

 XAMPP para OS X 5.6.31, 7.0.23

https://www.apachefriends.org/xampp-files/7.0.23/xampp-osx-7.0.23-0-installer.dmg – md5 1228b41253bc4e202cf01077edd5f212

Documentación Mac

Como habéis podido observar, he puesto la versión 7.0.23 de PHP por ser más estable. También os dejo la documentación correspondiente a cada sistema operativo, para que os sea más fácil la instalación y configuración y no extender este artículo más de lo debido.

Una vez descargado Xampp para tu sistema operativo, empieza con la instalación y configuración.

Creando mi primer virtualhosts

Una vez tengas instalado Xampp en tu sistema operativo, tendrás que crear tu primer virtualhosts para poder trabajar más cómodo.

Voy a mostrar como configurar nuestro primer virtualhosts en Windows, por ser el sistema operativo más utilizado.

Editando archivo hosts

Primero de todo, vamos a editar nuestro archivo hosts. Para ello vamos a dirigirnos a la carpeta C:/Windows/System32/drivers/etc

Una vez dentro de la carpeta, vamos a copiar el archivo “hosts” y pegamos la copia en nuestro escritorio.

Ahora si, procedemos a editar el archivo hosts copiado en nuestro escritorio con el editor de textos.

Al final del archivo pegamos la siguiente línea:

127.0.0.1 dominio.local

Muy bien, ahora guardamos los cambios en el archivo, cortamos el archivo que esta en el escritorio y lo pegamos en la carpeta C:/Windows/System32/drivers/etc dando el visto bueno a reemplazar el archivo y a los privilegios de administrador.

Editando archivo httpd-vhosts.conf

Ahora, toca crear el virtualhosts en la configuración de Apache. Para ello, tendremos que navegar a la carpeta xampp/apache/conf/extra

Yo por ejemplo, instale mi Xampp en C:/xampp, así que tendré que navegar hasta C:/xampp/apache/conf/extra

Una vez ahí, editaremos el archivo httpd-vhosts.conf. Pero antes vamos a crear una carpeta en xampp/apache/htdocs por ejemplo, proyectolocal. (Es la carpeta donde contendrá nuestro proyecto local)

Ahora editamos el archivo httpd-vhosts.conf, y nos dirigimos al final del archivo y pegamos el siguiente código:

< VirtualHost *:80> <-- Quita el espacio entre < Virtu...
DocumentRoot "C:/xampp/htdocs/dominio.local/PROYECTOLOCAL" <-- (Cambialo por tu carpeta y reemplaza la barra invertida de la tecla 7 por la barra de la tecla º)
ServerName dominio.local
ServerAlias dominio.local
ErrorLog ../htdocs/dominio.local/PROYECTOLOCAL/error.log  <-- (Cambialo por tu carpeta)
< Directory "C:/xampp/htdocs/dominio.local/PROYECTOLOCAL">  <-- (Cambialo por tu carpeta y reemplaza la barra invertida de la tecla 7 por la barra de la tecla º) <-- Quita el espacio entre < Direct...
AllowOverride All
Require local
< /Directory> <-- Quita el espacio entre < Direct...
< /VirtualHost> <-- Quita el espacio entre < Virtu...

NOTA: Cuando copies y pegues este código, acuérdate de quitar el espacio en las líneas marcadas.

Arrancando por primera vez nuestro servidor local

Perfecto, ahora vamos a arrancar por primera vez nuestro servidor local. Dirigete al acceso directo en el escritorio del programa Xampp y haz doble clic en él.

Una vez arranque, si no hay errores en los archivos de configuración, deberías de ver algo como en la siguiente imagen.

Bien! Ahora solo queda dirigirnos a http://dominio.local para ver que todo funciona correctamente.

Empezando con la estructura básica de nuestro script PHP

Lo primero que tenemos que hacer es crear una estructura básica de carpetas para nuestro proyecto. Vamos a trabajar con Bootstrap y jQuery, así que lo primero que vamos a hacer, es descargarnos los archivos necesarios. Para facilitaros el trabajo, he preparado un zip con todo lo necesario para crear la estructura básica de nuestro script y los archivos necesarios de Bootstrap y jQuery.

Fin de la primera parte

Y con todo esto y para no empacharos de información, he terminado la primera parte de este tutorial. En la siguiente parte, vamos a empezar con la funciones:

  • Instalando y configurando Notepad++
  • Crear nuestra base de datos
  • Conectar a la base de datos
  • Función capturar url larga
  • Función crear url corta a partir de la url larga
  • Función mostrar url corta

Gracias por leerme!