Importar datos desde un CSV a MySQL

Hoy he tenido que importar un csv bastante pesado generado por SQLMap a mi base de datos de MySQL.

La herramienta que usé es mysqlimport. Es necesario contar con acceso por linea de comandos para poder realizarlo.

mysqlimport --ignore-lines=1 --fields-terminated-by=, --columns='id,nick,password' --local -u usuario -p basededatos NombreDeLaTabla.csv

–ignore-lines=1 se usa para que no se tome en cuenta la primera linea. Para hacer coincidir las columnas del csv con el de la base de datos, abrimos el CSV y pegamos la primera linea como –columns=”

Gracias a http://chriseiffel.com/everything-linux/how-to-import-a-large-csv-file-to-mysql/ por la info.

Curso Web – Capítulo 4: Mi primer Servlet

tomcat logo

Los ficheros de este capitulo y la anterior los he subido a Dropbox, podéis descargarlos.

Para realizar el primer Servlet, necesitamos un servidor que nos permita ejecutar los Java Servlet y los JavaServer Pages (JSP). Usaremos Apache Tomcat para esto. Esta guía está realizada para un Debian, concretamente para Raspbian Wheezy.

# Actualizamos los paquetes
sudo apt-get update && sudo apt-get upgrade
# Instalamos el JDK
sudo apt-get install openjdk-6-jdk
# Descargamos tomcat desde la web de apache
# http://mirrors.axint.net/apache/tomcat/tomcat-7/
wget http://mirrors.axint.net/apache/tomcat/tomcat-7/v7.0.42/bin/apache-tomcat-7.0.42.tar.gz
tar xzf apache-tomcat-7.0.42.tar.gz
cd apache-tomcat-7.0.42/bin
./startup.sh

Con esto tenemos que tener ya corriendo el Tomcat. Vamos al explorador web y abrimos la IP seguido del puerto, por defecto 8080. Si trabajamos en local será http://localhost:8080 y si todo ha salido bien veremos esto:

tomcat-web

Un Servlet ha de seguir la siguiente estructura de carpetas y ficheros:

  • Directorio raíz: donde pueden ir los ficheros estáticos y los JSP.
    • Dentro un WEB-INF: que contiene el web.xml Es el fichero de configuración
      • Detnro el classes:  con los fuentes compilados de la aplicación
      • Directorio lib: que contendrá las librerías adicionales (comprimidas con jar).
    • Dentro podemos añadir subdirectorios adicionales para ficheros estáticos.

El fichero web.xml viene descrito en la web de Oracle. He editado el de por defecto y me ha quedado así:

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<display-name>Ejemplo Servlet</display-name>
<description>Un servlet de ejemplo</description>

<servlet>
<servlet-name>Hello</servlet-name>
<description>Servlet de HelloWorld</description>
<servlet-class>HelloWorld</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Hello</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>

<session-config>
<session-timeout>30</session-timeout>    <!-- 30 minutes -->
</session-config>

</web-app>

Nuestro Servlet Hello será un simple Hello World. Es necesario que extienda de la clase HttpServlet y tiene que implementar el método doGet

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class HelloWorld extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("<title>Hello World!</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Hello World!</h1>");
out.println("</body>");
out.println("</html>");
}
}

Para compilar, es necesario exportar la variable CATALINA_HOME y compilarlo agregándolo al classpath

cd apache-tomcat-7.0.42
CATALINA_HOME=$(pwd)
export CATALINA_HOME
javac -classpath ${CATALINA_HOME}/lib/servlet-api.jar:. HelloWorld.java

Para que el Tomcat pueda ejecutar el servlet, tenemos que meter la carpeta que contenga nuestros ficheros dentro de webapps

+ helloworld
+--- META-INF
+----- context.xml
+--- src
+----- HelloWorld.java
+--- WEB-INF
+----- classes
+------- HelloWorld.class
+----- web.xml

Ahora abrimos el navegador http://IP:8080/helloworld/hello en mi caso http://192.168.0.30:8080/helloworld/hello

helloworld servlet

 

Curso Web – Capítulo 3: Formularios con Bootstrap

bootsrap logo formularios

Buenas, lo primero es contar que es un formulario y sus usos. Bien, pues un formulario nos permite recibir datos del usuario, son campos que el cliente rellenará para enviarnos con su petición de vuelta al servidor. Se crean con la etiqueta <form>, existen varios elementos para los formularios, los más básicos:

  • Campos de texto.
    <input type="text" name="nombre">
  • Password.
    <input type="password" name="pwd">
  • Botones de opción (sólo puedes seleccionar uno).
    <input type="radio" name="opcion" value="Si">
  • Casilla de verificación (puedes escoger varias).
    <input type="checkbox" name="piezas" value="tornillo">
  • Para poder enviar el formulario, tenemos que añadir un botón de enviado.
    <input type="submit" value="Enviar">

Existen dos formas de enviar los datos del formulario al servidor, en la cabecera del GET (lo veremos en la barra de direcciones). O de la otra forma en el cuerpo de la petición, es el POST. Haré un ejemplo con GET y en el resto de capítulos usaré POST.

<!DOCTYPE html>
<html>
<head>
    <title>Formulario</title>
</head>
<body>
    <h3>Formulario</h3>
    <form action="./formulario" method="get" >
        <h4>Rellene sus datos</h4>
        <p>Usuario: <input name="usuario" type="text" /></p>
        <p>Contrase&ntilde;a: <input name="passw" type="password" /></p>
        <input name="recordar" type="checkbox" value="recordar" />Recordarme
        <input type="submit" value="Enviar" />
    </form>
</body>
</html>

formulario
Una vez enviado, nos llevará a donde pusimos en action con los parámetros del formulario.
formulario_get

Bootstrap como amigo

Bootstrap es un conjunto de herramientas para diseñadores web que nos facilitan mucho el trabajo. Contiene todo el CSS para realizar una web moderna haciendo uso de sus templates. También contiene extensiones para JavaScript.

Lo primero que tendremos que hacer es descargarlo de este enlace. Una vez descargado y descomprimido tendremos tres carpetas, la de css, img y js. El contenido de estas es el que indican sus nombres. La diferencia entre la versión bootstrap.min.css y la bootstrap.css es que en la primera, el código css está “compactado” para que ocupe menos, pero el contenido es el mismo.

En nuestro ejemplo usaremos la versión normal y además añadiremos bootstrap-responsive.css para hacer la web adaptable a los distintas dimensiones de pantalla.

<!DOCTYPE html>
<html>

<head>
    <title>Formulario</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/bootstrap-responsive.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h3>Formulario</h3>
        <form action="./formulario" method="get" >
            <div class="control-group">
                <h4>Rellene sus datos</h4>
                <div class="control-group">
                    <div class="controls">
                        <input type="text" name="usuario" placeholder="Usuario">
                    </div>
                </div>
                <div class="controls">
                    <input type="password" name="passw" placeholder="Contrase&ntilde;a" />
                    <label class="checkbox">
                        <input type="checkbox" name="recordar" value="recordar">Recordarme
                    </label>
                </div>
            </div>
            <input type="submit" class="btn btn-primary" value="Enviar"/>
        </form>
    </div>
</body>
</html>

Formulario Bootstrap

Conclusiones

Como hemos visto, para usar Bootsrap lo “único” que tendremos que hacer es usar los class que nos vienen ya prediseñados. Os aconsejo encarecidamente que miréis los casos de uso de http://twitter.github.io/bootstrap/base-css.html y http://twitter.github.io/bootstrap/components.html para aprender mejor sus entrañas.

También os recomiendo https://bootsnipp.com/snipps/simple-login-form y http://minikomi.github.io/Bootstrap-Form-Builder/ para ejemplos y creación de formularios con Bootstrap

Un saludo!

Curso Web – Capítulo 2: Seguimos con HTML

Espero que os quedase claro el capítulo anterior, en este continuaré explicando HTML junto con CSS.

He subido los ficheros del capitulo 1 y 2 al Dropbox, podeis descargarlo de AQUÍ

HTML

Rutas relativas y absolutas

Es necesario que haga este inciso para explicar la forma de acceder a recursos que son o están en otro archivo. Esto se hace mediante rutas, en el caso de que se trate de una ruta absoluta, deberemos escribir toda la dirección que nos lleva a dicho recurso. Por ejemplo http://www.miweb.com/documentos/fotos.zip

Para las rutas relativas, imaginemos tenemos un http://www.miweb.com/index.html y queremos acceder al mismo fichero de antes, pues podemos hacerlo mediante la ruta relativa a este: documentos/fotos.zip

Añadiendo imágenes a la web

Dado que estamos en siglo XXI, podemos hacer uso de las imágenes en Internet, vamos a insertar alguna en nuestro código.El elemento que usaremos es

<img src="imagen.jpg" alt="Texto alternativo">

Estamos usando la ruta relativa a la imagen que se encuentra en el mismo directorio que el .html

imagen html img

Agregar una hoja de estilos

Usaremos CSS Cascading Style Sheets para personalizar nuestro HTML. Se trata de un archivo que le indica al navegador como mostrar los elementos.

<!DOCTYPE html>
<html>
    <head>
        <link href="estilo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <img src="imagen.jpg" alt="Texto alternativo">
    </body>
</html>

Ahora tendremos que crearnos un estilo.css en la misma carpeta del estilo.html con el siguiente contenido:

 body {
     background-color:black;
 }

 img
  {
      display:inline;
      margin:3px;
      border:3px solid red;
  }

Podemos ver que hemos cambiado el estilo sobre la web:

imagen css

Conclusiones

Hemos visto como insertar imágenes y que mediante CSS se puede cambiar la representación de una web. No voy a entrar en detalle en los estilos, ya que como veremos en el siguiente capítulo, hay CSS públicos y Frameworks que podremos usar. Nos basta con conocer cómo usarlos y trabajar con ellos.

En las mismas webs, que os dejé en el capítulo anterior hay mucho material sobre CSS.

Curso Web – Capítulo 1: Incio con HTML

Bienvenidos a este curso básico sobre web. La idea es trasmitiros algunos de mis conocimientos sobre HTML, Servlets y JSP. Esto surge de habiendo yo cursado Computación Web, una asignatura de 4º de carrera en la UC3M, me pidió un compañero si le podía enseñar durante el verano JSP para llevarlo ya preparado.

Como además en la asignatura se tratan temas de HTML y es necesario para la compresión de lo que veremos más adelante, voy a daros unas ideas claves de ello.

Primeros pasitos en HTML

Si conocéis XML, os va resultar muy familiar HTML ya que al fin y al cabo es XML. XML está formado por elementos, que se declaran mediante <elemento> y se cierran con </elemento> dentro de ellos, se pueden encontrar otros elementos y así sucesivamente. También los elementos pueden contener atributos y texto. Veamos un ejemplo:

<elemento_raiz>
 <hijo atributo="attr">
  Texto
 </hijo>
</elemento_raiz>

Como este especifica, hay un elemento, la raiz, que englobará a todos, en HTML es <html>, que cerraremos luego con </html>. Estará siempre compuesto por el elemento <body> y un <head> (que veremos más adelante). El elemento <p> lo que nos crea es un nuevo párrafo.

<!DOCTYPE html>
<html>
 <body>
  <p>Hola</p>
 </body> 
</html>

Abrimos un editor de texto y guardamos este código como ejemplo1.html, lo abrimos con un navegador, el resultado será el siguiente:
ejemplo1 html

Añadiendo estilos

Como se puede observar, nos ha quedado muy soso, pero para eso tenemos los estilos, que nos permiten personalizar el diseño del texto, tablas, listas, etc. Los estilos se pueden añadir mediante atributos del elemento o mediante CSS (lo veremos más adelante).

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
</head>

<body>
    <ul style="background-color: brown">
        <li>Primero</li>
        <li style="color:yellow;margin-left:20px;">Segundo</li>
    </ul>
</body>
</html>

En este ejemplo, he añadido un header con un title. Además he introducido a una lista no ordenada a la que he puesto un fondo. Además a su segundo elemento le he cambiado el color del texto.

ejemplo2 html estilo

Las tablas

Un elemento muy importante para el diseño web son las tablas, con ellas no sólo podemos organizar nuestros datos, si no, que podremos dividir el diseño de la web.El elemento <table> tiene de hijo <tr> que son las filas. Este a su vez tiene de hijos <td> que son las columnas. Se usa <th> como fila. Para poder visualizar los bordes de la tabla le he añadido el atributo border de tamaño 1.

<!DOCTYPE html>
<html>
<body>
    <table border="1">
        <tr>
            <td>Fila 1, Columna 1</td>
            <td>Fila 1, Columna 2</td>
        </tr>
        <tr>
            <td>Fila 2, Columna 1</td>
            <td>Fila 2, Columna 2</td>
        </tr>
    </table>
</body>
</html>

Lo guardamos como .html y vemos el resultado.

tablas

Conclusiones

Hemos visto una lección básica de HTML, su sintaxis un poco abstracta si no se ha visto nada antes parecido, pero ya os acostumbrareis. En el próximo capítulo veremos el uso de CSS y de otros elementos. Si quereis profundizar más os aconsejo estas webs:

Hola Mundo

Comenzamos en Protocolo Olvidado con un mítico de la programación. Un simple Hello World. Ver por pantalla esas dos simples palabras te alegraban que hubieses compilado bien la aplicación. Siempre que el lenguaje y el sistema te permitiese salida de texto claro.

Sin más preámbulos, queda inaugurado este blog!