Diseño Web PHP y MySQL

Diseño Web PHP y MySQL
Ingeniería Técnica en Informática de Gestión
Proyecto final de carrera
Empresa: Dino Theo Atlantis MC, S.L
Autor: Marc Mateu Martí
Tutor: Miguel Ángel Acebo Visanzay
Fecha: junio 2008
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Índice
Descripción de la empresa ............................................................................................. 3
Ubicación del alumno dentro de la empresa .................................................................. 4
Descripción del trabajo realizado .................................................................................. 4
Problemática .............................................................................................................. 4
Solución .................................................................................................................... 5
Renovar la imagen .................................................................................................. 5
Estructuración y presentación de la información ..................................................... 6
Herramientas utilizadas ............................................................................................... 21
Diseño de la web, elección de tecnología ................................................................. 21
Ideas generales de una página Web bien construida ................................................. 21
Separar el contenido del diseño ............................................................................. 21
Código HTML válido ........................................................................................... 21
Código CSS válido ............................................................................................... 21
El contenido ha de llegar a todos........................................................................... 22
Estándares web ........................................................................................................ 23
¿Qué es un estándar? ............................................................................................ 23
HTML .................................................................................................................. 23
CSS ...................................................................................................................... 24
Uso del CSS y HTML........................................................................................... 26
Diseño Gráfico ..................................................................................................... 29
PHP ...................................................................................................................... 29
Base de Datos: MySQL ........................................................................................ 34
Apache ................................................................................................................. 39
Xampp .................................................................................................................. 40
Crimson Editor ..................................................................................................... 41
Gimp .................................................................................................................... 42
Aportaciones del proyecto a los conocimientos del alumno ......................................... 43
Aportaciones del los estudios realizados al proyecto ................................................... 44
Conclusiones ............................................................................................................... 45
2
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Descripción de la empresa
Dino Theo Atlantis MC, S.L. es una empresa familiar dedicada al aprovisionamiento de
buques, fue creada por Theodoro Dritsakis en 1956. Theodoros Dritsakis nació en Andros
(una isla griega con una larga tradición marinera).
El padre de Theodoro, trabajó como jefe de máquina en buques griegos, y así es como
empezó su relación con compañías navieras. Theodoro Dritsakis siguió sus pasos y
después de varios años trabajando en el sector marítimo, tuvo la oportunidad de empezar a
trabajar en el consulado griego de Barcelona.
Gracias a este vínculo con España, vio factible la creación de una empresa propia en
nuestro país. Fue el inicio de su empresa: DINO THEO ATLANTIS MC, S.L.
En sus inicios la empresa se llamaba Atlantis, y nació con el ánimo de servir a los buques
que llegaban a los puertos de Barcelona y Tarragona. Unos años después el nombre
comercial fue cambiado a Theo Atlantis, y en la actualidad la empresa es conocida como
Dino Theo Atlantis MC, S.L, dando cabida en la empresa al hijo de Theodoros Dritsakis.
La filosofía de la empresa siempre ha sido dar un servicio completo a sus clientes con la
mayor calidad posible; siempre desde un mando familiar. Siguiendo la filosofía inicial de
la empresa, han crecido sustancialmente en los últimos años, y en la actualidad dan
servicio a toda España, Gibraltar, Sur de Francia y Portugal.
3
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Ubicación del alumno dentro de la empresa
En la empresa soy el encargado de realizar la página web. Como la empresa no tiene
departamento de informática, soy yo mismo quién se encargará de su mantenimiento y
quién les informa y les consulta como quieren la página.
La empresa, al no estar dedicada al mundo de la informática y al estar en convenio con la
Universidad y no como un trabajador más, me deja trabajar desde casa e ir allí cuando lo
necesite, por si me falta información o alguna consulta sobre la misma.
Descripción del trabajo realizado
Problemática
Hasta ahora la empresa Dino Theo Atlantis disponía de una página hecha por los propios
trabajadores y de otra página realizada hace 10 años, por lo que se ha quedado anticuada
respecto a la competencia.
La página web de la que disponían era confusa y llena de programación flash, cosa que no
gusta demasiado, a la vez que ralentiza la página.
4
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
La antigua página web no dispone de importantes funcionalidades, como una consulta
exhaustiva de sus productos, una guía de contactos, etc.
Solución
Renovar la imagen
El problema principal era encontrar un estilo de página que gustara, fuese intuitivo y fácil
de manejar, junto con una visión agradable y que hiciera referencia a la empresa y a su
sector.
El logo
El diseño del logo es una parte muy importante de la empresa. El logo tiene influencia en
cada aspecto de la empresa y establecerá la línea a seguir en el diseño gráfico de la página
web.
El diseño del logo de la empresa ya se encuentra realizado desde hace mucho años en la
empresa, se trata de la bandera de un barco:
5
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Estructuración y presentación de la información
Para las personas que piensen que desarrollar una primera página web para su negocio y
así promocionar sus productos y servicios, será una tarea fácil, pueden llevarse alguna
sorpresa, ya que no es tan sencillo como parece.
Para empezar, la estructuración de la página Web, lo primero que se hizo fue decidir los
apartados que tendría. Como no tenía experiencia en hacer páginas de este estilo, hablé con
los integrantes de la empresa para ver que tenían en mente y visité algunas páginas webs
similares para coger ideas, de la misma manera tenía que saber que querían y que no o el
idioma en el cual la querían.
Una introducción a la empresa, para saber que página se esta visitando de manera rápida,
su historia, sus productos y servicios, localizaciones y como ponerse en contacto con los
mismos.
Mi objetivo principal en ésta página web ha sido presentar los contenidos de la forma más
intuitiva y clara posible para cualquier usuario que desea visitar la página web, y al mismo
tiempo, hacerla fácil y entendible a los propios de la empresa, que se encargarán de
controlar sus productos o/y quién accede a su página web.
Todo esto se consigue separando de forma correcta todo el contenido en sus secciones
correspondientes.
El acceso de los clientes está muy claro y visual, ya que lo he situado en la zona alta de la
página web de manera que cambiando de apartado sigue apareciendo. Una vez registrados
sus opciones personales aparecen en la parte derecha de la pantalla.
Si los usuarios desean navegar por la web no deben más que ir seleccionando cada uno de
los apartados que hay justo después de logarse, cosa que me parece muy intuitiva y
entendible.
6
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
La estructura de la página web
Cabecera
La cabecera denota claramente la dedicación marítima que tiene la empresa, dónde se
puede ver el nombre de la misma de manera continua.
De la misma manera puede verse el logo de la empresa de manera fija en la parte izquierda
de la web.
Acceso y/o registro de usuarios
Barra de registro de usuarios y/o acceso, se muestra de forma permanente en cualquier
página dónde se navegue. Una vez el usuario se ha registrado
Datos a la hora de registrar un usuario:
7
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Barra de menú
Menú para navegar por la página web y acceder a las secciones. Cada vez que se accede a
una sección, aparece su nombre en la página principal para saber donde nos encontramos
en cada momento.
Menú lateral
El menú lateral tiene dos funciones, la primera función se muestra cuando el usuario que
accede a la página web no esta logeado, en ese momento se muestran novedades o noticias
que la empresa considera relevantes, para que los demás usuarios puedan ver sus avances
y/o nuevas adquisiciones.
La otra función se puede ver una vez se logea el usuario, entonces en el menú lateral
aparecen la funciones que puede realizar según el tipo de usuario que sea, si es usuario
estándar, sólo podrá modificar su perfil, en cambio, si es usuario administrador, podrá
editar su perfil, el de los demás usuarios y añadir o modificar productos.
Ejemplo de menú lateral administrador:
8
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Contenido
Historia de la empresa:
Dónde se explica la historia de la empresa.
9
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Productos
Apartado dónde podemos acceder a un listado de productos de la empresa, que ellos
mismos podrán modificar y añadir diferentes productos desde el menú lateral derecho.
10
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Después de acceder a “More products”, podemos seleccionar un tipo de productos y ver un
listado de productos de los que la empresa distribuye.
Si no sabemos que tipo de categoría es el producto que buscamos, podemos usar el buscar
que se encuentra en la parte superior de la pantalla y nos mostrará, si los hay, los productos
buscados.
11
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Este es un ejemplo de una parte del listado del tipo de productos “Welfare Items”:
12
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
En esta parte no se puede acceder si no estas logado, en caso de intentar acceder sin estar
logado nos llevará a la página principal y aparecerá el siguiente mensaje:
Servicios y localizaciones
En estos dos apartados, nos aparece la información de los servicios que ofrece la empresa y
su localización de cada una de sus sedes:
13
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
14
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Contactos
Informa de las distintas maneras en las que los usuarios pueden ponerse en contacto con la
empresa:
15
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Menú lateral
En el menú lateral tenemos dos visiones, la primera es cuando el usuario todavía no se ha
logado, nos aparecerán noticias o novedades recientes o importantes en la empresa:
La segunda visión vendrá dada a partir del registro de los usuarios, y variará según el
usuario sea administrador o no:
Vista de usuario estándar:
Vista usuario administrador:
16
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Modificación del perfil:
El usuario puede modificar su propio perfil en el apartado My Profile que aparece en el
menú lateral derecho una vez está logado.
El administrador puede modificar su perfil y puede modificar los perfiles de los usuarios,
en el apartado Edit Users, dónde le aparecerá un desplegable con todos los usuarios, así
como deshabilitarlos para que no puedan volver a logarse por algún motivo.
Aquí vemos un ejemplo de modificación de un perfil, concretamente es el perfil del
administrador. La opción Status no está disponible en la modificación de usuario, ya que
los propios usuarios no pueden deshabilitarse.
17
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Añadir productos
Cuando un usuario tenga poderes de administrador, podrá añadir productos en la base de
datos para que los demás usuarios puedan verlos.
En el menú lateral aparecerá la opción Add product, si la seleccionamos aparecerá la
siguiente pantalla:
Dónde pondremos la referencia, nombre, descripción del producto y seleccionaremos el
tipo del producto.
Una vez el administrador clique en Save, el producto queda insertado en la base de datos y
activado para que los demás usuarios puedan verlo.
18
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Editar productos
De la misma manera que para añadir productos, para editar un producto son necesarios
privilegios de administrador. Podremos cambiar cualquier apartado del producto y
podremos deshabilitar un producto, el cual no tenga la empresa disponible en un momento
determinado.
En ningún caso un usuario administrador podrá eliminar un producto de manera definitiva,
de eso se encargará el administrador de la base de datos.
Para acceder a la modificación de un producto hay que seleccionar Edit product en el menú
lateral y aparecerá un desplegable con los distintos productos, seleccionaremos uno y lo
modificaremos:
19
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Caducidad de la sesión
Una vez el usuario se ha logado, hay un tiempo de espera en el cual puede realizar
cualquier tipo de navegación por la página web, a partir de cierto tiempo (actualmente la
página dispone de un tiempo limitado, este tiempo puede cambiarse) le aparecerá el
siguiente mensaje:
Si el usuario quiere volver a consultar/modificar/añadir productos o perfiles deberá volver
a logarse.
Este sistema se utiliza para evitar que mucha gente pueda estar logada a la vez de manera
innecesaria.
El único usuario que no tiene limitada su estancia en la página web es el administrador, ya
que él debe poder añadir productos u otras cosas sin tener un tiempo máximo, ya que no es
lógico que sólo deje introducir 5 productos, por poner un ejemplo, y deba volver a logarse.
20
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Herramientas utilizadas
Diseño de la web, elección de tecnología
Ideas generales de una página Web bien construida
Separar el contenido del diseño
Todos los navegadores muestran el texto de una página, pero algunos no soportan algún
tipo de imagen, colores, animaciones o diferentes efectos.
Separar el contenido del diseño hace posible que cualquiera pueda leer la página, aunque
haya alguna parte que no se muestre de manera correcta, los visitantes o usuarios no
tendrán problemas para ver la información, que es lo más importante.
También tiene la ventaja en que puedes cambiar el diseño a la web sin cambiar el texto o
viceversa.
Código HTML válido
Para que todo funcione de manera correcta y sin problemas, deben usarse las
especificaciones del lenguaje HTML.
Código CSS válido
Como en alguna parte del código también se ha usado la programación en CSS, está
también ha de ser valida para que no de problemas.
21
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
El contenido ha de llegar a todos
Una página es accesible si se puede llegar fácilmente a su contenido. No tiene que estar
escondido entre diversos menús y diversas opciones, dónde muchas veces no sabemos ni
donde nos encontramos y puede resultar caótico. Tampoco debe depender del tipo de
configuración que tenga el navegador del usuario.
Al tener la web un contenido de HTML y todos los navegadores son compatibles con él,
con escribir de manera correcta el HTML ya tenemos mucho ganado.
22
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Estándares web
¿Qué es un estándar?
Los estándares web son un conjunto de recomendaciones dadas por el World
Wide
Web
Consortium
y
otras
organizaciones
internacionales
acerca
de cómo crear e interpretar documentos basados en el Web.
Son
un
conjunto
de
tecnologías
orientadas
a
brindar
beneficios
a
la
mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado
en el Web.
El objetivo es crear un Web que trabaje mejor para todos, con sitios accesibles
a
más
personas
y
que
funcionen
en
cualquier
dispositivo
de
acceso
a
Internet.
En la web se utilizan estadares como el HTML o el CSS, el CSS se usa en el tipo de letra.
HTML
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto),
es el lenguaje de marcado predominante para la construcción de páginas web. Es usado
para describir la estructura y el contenido en forma de texto, así como para complementar
el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas",
rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto
punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el
cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía
más ampliamente como un término genérico para el HTML, ya sea en forma descendida
del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML
(como HTML 4.01 y anteriores).
Por convención, los archivos de formato HTML usan la extensión .htm o .html.
(Origen Wikipedia)
23
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
CSS
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal
usado para definir la presentación de un documento estructurado escrito en HTML o XML
(y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de
formular la especificación de las hojas de estilo que servirán de estándar para los agentes
de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un
documento de su presentación.
Por ejemplo, el elemento de HTML <H1> indica que un bloque de texto es un
encabezamiento y que es más importante que un bloque etiquetado como <H2>. Versiones
más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle
formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <H1> debía
disponer de la información si se deseaba un diseño consistente para una página, y además,
una persona que lea esa página con un navegador pierde totalmente el control sobre la
visualización del texto.
Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre como
va a ser visualizado, solamente marca la estructura del documento. La información de
estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <H1>: color, fuente,
alineación del texto, tamaño, y otras características no visuales como definir el volumen de
un sintetizador de voz (véase Sintetización del habla), por ejemplo.
La información de estilo puede ser adjuntada tanto como un documento separado o en el
mismo documento HTML. En este último caso podrían definirse estilos generales en la
cabecera del documento o en cada etiqueta particular mediante el atributo "style".
24
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

Control centralizado de la presentación de un sitio web completo con lo que
se agiliza de forma considerable la actualización del mismo.

Los navegadores permiten a los usuarios especificar su propia hoja de estilo
local que será aplicada a un sitio web, con lo que aumenta
considerablemente la accesibilidad. Por ejemplo, personas con deficiencias
visuales pueden configurar su propia hoja de estilo para aumentar el tamaño
del texto o remarcar más los enlaces.

Una página puede disponer de diferentes hojas de estilo según el dispositivo
que la muestre o incluso a elección del usuario. Por ejemplo, para ser
impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador
de voz.

El documento HTML en sí mismo es más claro de entender y se consigue
reducir considerablemente su tamaño (siempre y cuando no se utilice estilo
en línea)
(Origen Wikipedia)
25
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Uso del CSS y HTML
La página web de Dino Theo Atlantis sigue los anteriores estándares comentados en todas
o alguna de sus partes.
La página web está realizada de tal forma que la tabla contenedora siempre está
centrada. Dentro de ésta tabla, hay diversas tablas para dividir cada uno de los apartados de
la web.
Aquí puede observarse la tabla contenedora de la página web.
<table border="1" width="820px" height="100%" align="center" cellpadding="0" cellspacing="0"
background="./imatges/bg2.jpg">
26
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Aquí pueden verse las diferentes tablas que forman la página web, la del título, la barra de
registro, la barra de menú, la página central y el menú lateral.
Las letras de toda la web están tratadas en modo CSS, así podemos cambiar tamaños,
colores y tipos de manera rápida y sencilla.
Los estilos css se encuentran en el archivo dta.css, aquí un ejemplo:
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
27
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
}
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:17px;
font-weight:bold;
}
También se hubieran podido realizar más partes de la web en modo CSS en lugar de tablas,
pero decidí utilizar este método, por ser más entendible en un principio e igual de efectivo,
aunque
quizás
no
tan
práctico
a
28
la
hora
de
realizar
un
cambio.
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Diseño Gráfico
La web se ha diseñado a partir de las peticiones realizadas por la empresa y siguiendo un
estándar, en este caso HTML, PHP y una base de datos realizada en SQL.
Ahora veremos una lista de programas utilizados con su descripción.
PHP
PHP es un lenguaje de programación interpretado, diseñado
originalmente para la creación de páginas web dinámicas. Es usado
principalmente en interpretación del lado del servidor (server-side
scripting) pero actualmente puede ser utilizado desde una interfaz de
línea de comandos o en la creación de otros tipos de programas
incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+.
PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente
PHP Tools, o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdof
en 1994; sin embargo la implementación principal de PHP es producida ahora por The
PHP Group y sirve como el estándar de facto para PHP al no haber una especificación
formal. Publicado bajo la PHP License, la Free Software Foundation considera esta
licencia como software libre.
PHP es un lenguaje interpretado de propósito general ampliamente usado y que está
diseñado especialmente para desarrollo web y puede ser embebido dentro de código
HTML. Generalmente se ejecuta en un servidor web, tomando el código en PHP como su
entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los
servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno. PHP
se encuentra instalado en más de 20 millones de sitios web y en un millón de servidores,
aunque el número de sitios en PHP ha declinado desde agosto de 2005. Es también el
módulo Apache más popular entre las computadoras que utilizan Apache como servidor
web. La más reciente versión principal del PHP fue la versión 5.2.6 de 1 de mayo de 2008.
La versión utilizada en este caso será la 5.2.5, que es la que viene por defecto en la
aplicación XAMPP que explicaremos más adelante.
29
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
A la hora de validar a los usuarios en la página web, se compara el nombre de usuario y su
contraseña, que introduce el usuario, y se comparan con los almacenados en la base de
datos. Las funciones que se encargan de esto contienen atributos de conexión a la base de
datos del servidor web y las funciones para conectarse y hacer las consultas necesarias para
la validación, así como otro tipo de consultas, como los productos.
Las contraseñas de la página web una vez son introducidas por el usuario son encriptadas,
de manera que nadie salvo el usuario sepa su contraseña.
Veamos la clase del usuario:
<?
class UserDTO {
var $iduser;
var $login;
var $name;
var $second;
var $company;
var $nationality;
var $password;
var $email;
var $useradmin;
var $status;
30
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
function UserDTO(
$iduser,
$login,
$password,
$name,
$second,
$company,
$nationality,
$email,
$useradmin,
$status) {
$this->iduser = $iduser;
$this->login = $login;
$this->password = $password;
$this->name = $name;
$this->second =
$second;
$this->company = $company;
$this->nationality = $nationality;
$this->email = $email;
$this->useradmin = $useradmin;
$this->status = $status;
31
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
}
}
?>
Otra aplicación que le damos al PHP, sería el limitar el acceso a algunas funciones, según
si el usuario es administrador o no, como el añadir productos, si el usuario no es
administrador no podrá realizar ninguna de estas tareas gracias a la función del archivo
seguridad:
<?
require_once './includes/config.inc.php';
//Incluir fichero de funciones.
require_once './includes/funcions.php';
if (((!isset($_SESSION["autenticat"])) || (!$_SESSION["autenticat"])) ||
(!(isset($_SESSION["useradmin"]))&&(!$_SESSION["useradmin"]))){
//si no existe, enviamos a la página de autenticación
header("Location: index.html?errorusuari");
exit();
} else {
$dataGuardada = $_SESSION["ultimacces"];
$ara = date("Y-n-j H:i:s");
$temps = ( strtotime($ara) - strtotime($dataGuardada) );
32
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
//comparemos el tiempo transcurrido en segundos (definido en config.inc.php)
// 5 minutos = 5 * 60 = 300
//10 minutos = 10 * 60 = 600
//15 minutos = 15 * 60 = 900
//20 minutos = 20 * 60 = 1.200
if ( $temps >= TIMEOUT ) {
//si pasa más tiempo del permitido cerramos sesión
session_destroy();
header("Location: index.html?caducada"); //enviamos al usuario a la
página inicial
} else {
$_SESSION["ultimacces"] = $ara;
}
}
?>
33
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Base de Datos: MySQL
MySQL es un sistema de gestión de base de datos relacional,
multihilo y multiusuario con más de seis millones de instalaciones.
MySQL AB desarrolla MySQL como software libre en un esquema
de licenciamiento dual.
En enero de 2008, MySQL AB fue adquirida por Sun Microsystems, y por tanto MySQL.
Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia,
pero las empresas que quieran incorporarlo en productos privativos pueden comprar a la
empresa una licencia específica que les permita este uso. Está desarrollado en su mayor
parte en ANSI C.
Al contrario que proyectos como Apache, donde el software es desarrollado por una
comunidad pública y el copyright del código está en poder del autor individual, MySQL es
propiedad y está patrocinado por una empresa privada, que posee el copyright de la mayor
parte del código.
Existen varias APIs que permiten, a aplicaciones escritas en diversos lenguajes de
programación, acceder a las bases de datos MySQL, en este caso usaremos el PHP, y la
versión utilizada será la MySQL 5.0.51a, que también viene por defecto en la aplicación
XAMPP.
La base de datos de la página web contendrá toda la información de los usuarios que sean
registrados y toda la información de los productos que sean añadidos.
Tanto los productos como los usuarios, podrán ser modificados por algunos usuarios,
según el usuario podrá realizar unas funciones u otras.
Las funciones también sirven para buscar los identificadores tanto de los productos como
los usuarios y también la opción del buscador.
34
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Algunas funciones de la base de datos:
/****************************************************************
* Obtención de los datos de un usuario a partir de un login y un password
****************************************************************/
function getUser( $login, $password, $db = 0 ) {
if ( $db == 0 ) {
$dsn = $this->getDSN();
$db = DB::connect( $dsn );if ( DB::isError( $db ) ) die ( $db>getMessage() );
}
$retorn = NULL;
$sql = sprintf( 'SELECT * FROM user WHERE login = "%s" &&
password = "%s"', $login, $password );
$result = $db->query($sql);if (DB::isError($db)) die ($db>getMessage());
if ($registre = $result->fetchRow(DB_FETCHMODE_OBJECT)) {
$retorn = new UserDTO($registre->iduser,
$registre->login,
$registre->password,
$registre->name,
$registre->second,
$registre->company,
$registre->nationality,
$registre->email,
$registre->useradmin,
$registre->status);
//echo $sql."<br />";
}
$result->free();
if ( $db == 0 ) $db->disconnect();
return $retorn;
}
35
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
/********************************************************************
* Esta función inserta un nuevo miembro.
*********************************************************************/
function insertUser( $dto, $db = 0 ) {
if ( $db == 0 ) {
$dsn = $this->getDSN();
$db = DB::connect( $dsn );if ( DB::isError( $db ) ) die ( $db>getMessage() );
}
$resultat = false;
$sql = sprintf('INSERT INTO user
(iduser,login,password,name,second,company,nationality,email,useradmin,status)
VALUES (%d, "%s", "%s", "%s", "%s", "%s", "%s", "%s", %d, 1)',
$dto->iduser,
$dto->login,
$dto->password,
$dto->name,
$dto->second,
$dto->company,
$dto->nationality,
$dto->email,
$dto->useradmin,
$dto->status);
//echo $sql;
$result = $db->query( $sql );if ( DB::isError( $db ) ) die ( $db>getMessage() );
$affectedRows = $db->affectedRows();
if ($affectedRows > 0)
$resultat = true;
if ( $db == 0 ) $db->disconnect();
return $resultat;
}
36
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
/***********************************************************************
* Obtener los datos de un producto a partir del id
***********************************************************************/
function getProductID( $idproduct, $db = 0 ) {
if ( $db == 0 ) {
$dsn = $this->getDSN();
$db = DB::connect( $dsn );if ( DB::isError( $db ) ) die ( $db>getMessage() );
}
$retorn = NULL;
$sql = sprintf( 'SELECT * FROM product WHERE idproduct = %d',
$idproduct );
$result = $db->query($sql);if (DB::isError($db)) die ($db>getMessage());
if ($registre = $result->fetchRow(DB_FETCHMODE_OBJECT)) {
$retorn = new ProductDTO(
$registre->idproduct,
$registre->reference,
$registre->name,
$registre->description,
$registre->picture,
$registre->type,
$registre->status);
//echo $sql."<br />";
}
$result->free();
if ( $db == 0 ) $db->disconnect();
return $retorn;
}
37
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
/***********************************************************************
* Esta función inserta un nuevo producto
***********************************************************************/
function insertProduct( $dto, $db = 0 ) {
if ( $db == 0 ) {
$dsn = $this->getDSN();
$db = DB::connect( $dsn );if ( DB::isError( $db ) ) die ( $db>getMessage() );
}
$resultat = false;
$sql = sprintf('INSERT INTO product (idproduct, reference, name,
description, picture, type, status)
VALUES ( %d, %d, "%s", "%s", "%s",
"%s", 1)',
$dto->idproduct,
$dto->reference,
$dto->name,
$dto->description,
$dto->picture,
$dto->type,
$dto->status);
//echo $sql;
$result = $db->query( $sql );if ( DB::isError( $db ) ) die ( $db>getMessage() );
$affectedRows = $db->affectedRows();
if ($affectedRows > 0)
$resultat = true;
if ( $db == 0 ) $db->disconnect();
return $resultat;
}
38
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Apache
El servidor HTTP Apache es un software (libre) servidor
HTTP de código abierto para plataformas Unix (BSD,
GNU/Linux, etc.), Windows, Macintosh y otras, que implementa el protocolo HTTP/1.1 y
la noción de sitio virtual. Cuando comenzó su desarrollo en 1995 se basó inicialmente en
código del popular NCSA HTTPd 1.3, pero más tarde fue reescrito por completo. Su
nombre se debe a que Behelendorf eligió ese nombre porque quería que tuviese la
connotación de algo que es firme y enérgico pero no agresivo, y la tribu Apache fue la
última en rendirse al que pronto se convertiría en gobierno de EEUU, y en esos momentos
la preocupación de su grupo era que llegasen las empresas y "civilizasen" el paisaje que
habían creado los primeros ingenieros de internet. Además Apache consistía solamente en
un conjunto de parches a aplicar al servidor de NCSA. Era, en inglés, a patchy server (un
servidor "emparchado").
El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache
Software Foundation.
Apache presenta entre otras características mensajes de error altamente configurables,
bases de datos de autenticación y negociado de contenido, pero fue criticado por la falta de
una interfaz gráfica que ayude en su configuración.
Apache tiene amplia aceptación en la red: desde 1996, Apache, es el servidor HTTP más
usado. Alcanzó su máxima cota de mercado en 2005 siendo el servidor empleado en el
70% de los sitios web en el mundo, sin embargo ha sufrido un descenso en su cuota de
mercado en los últimos años.
La mayoría de las vulnerabilidades de la seguridad descubiertas y resueltas tan sólo pueden
ser aprovechadas por usuarios locales y no remotamente. Sin embargo, algunas se pueden
accionar remotamente en ciertas situaciones, o explotar por los usuarios locales malévolos
en las disposiciones de recibimiento compartidas que utilizan PHP como módulo de
Apache.
La versión de Apache utilizado es la HTTPD 2.2.8, que viene incluida en el aplicativo
Xampp que veremos a continuación.
39
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Xampp
El programa Xampp, es el programa que he usado para
realizar la página web, XAMPP es un servidor
independiente de plataforma, software libre, que consiste
principalmente en la base de datos MySQL, el servidor web Apache y los interpretes para
lenguajes de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de
los diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa esta liberado
bajo la licencia GNU y actúa como un servidor web libre, fácil de usar y capaz de
interpretar páginas dinámicas. Actualmente XAMPP esta disponible para Microsoft
Windows, GNU/Linux, Solaris, y MacOS X.
Oficialmente, los diseñadores de XAMPP solo pretendían su uso como una herramienta de
desarrollo, para permitir a los diseñadores de sitios webs y programadores testear su
trabajo en sus propios ordenadores sin ningún acceso a Internet. En la práctica sin
embargo, XAMPP es utilizado actualmente para servidor de sitios webs en WWW, y con
algunas modificaciones es generalmente lo suficientemente seguro para serlo. Una
herramienta especial es suministrada para proteger fácilmente las partes más importantes
del paquete.
He usado este paquete porque es mucho más fácil y cómodo que no tener que ir instalando
cada aplicación por separado.
40
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Crimson Editor
El código PHP lo he realizado en el editor Crimson Editor, aunque podría haber
usado cualquier otro, lo he elegido por su sencillez y porque distingue las palabras
por colores según el tipo de programación que se este realizando, lo que lo hace mucho
más entendible.
Ejemplo:
41
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Gimp
GIMP (GNU Image Manipulation Program)
es un programa de edición de imágenes, tanto
dibujos como fotografías. Es un programa
libre y gratuito, englobado en el proyecto GNU y disponible bajo la licencia GNU General
Public License.
La primera versión de GIMP se desarrolló para sistemas Unix y fue pensada especialmente
para GNU/Linux. Existen versiones totalmente funcionales para Windows, para Mac OS X
y para otros sistemas operativos, haciéndolo el programa de manipulación de gráficos
disponible en más sistemas operativos. Se le puede considerar como la alternativa más
firme para Photoshop, aunque posee una interfaz muy diferente.
Existe una versión portátil de GIMP que puede ser transportada y usada directamente
desde una memoria USB sin necesidad de instalarse en el ordenador, disponible solo para
ordenadores bajo Windows y Mac.
La biblioteca de controles gráficos GTK, desarrollada para GIMP, dio origen al entorno de
escritorio de GNOME.
Este programa lo he usado para la creación de los botones de la página web y de la barra
dónde se introduce el nombre de usuario y contraseña.
Los botones constan de tres capas (el fondo, el marco y la letra), hay dos tipos diferentes
de botones por nombre, uno cuando no esta encima el ratón, más oscuro, y otro cuando nos
ponemos encima con el ratón, más brillante.
No es un programa muy sencillo de utilizar en un principio, pero una vez aprendido no
tiene mayor dificultad.
42
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Aportaciones del proyecto a los conocimientos del alumno
Mis conocimientos a cerca de la programación web hasta el momento de hacer esta página
web era la tecnología HTML que había aprendido en una asignatura de la carrera (sistemas
abiertos) y algo de programación de webs, con el programa dreamweaver, a título personal.
También tenía nociones de la creación de una base de datos en SQL, con lo que esta parte
del trabajo no ha sido tan nueva para mí.
En este proyecto he aprendido que es la programación a través de una web y cómo hacer
políticas de seguridad para que personas no autorizadas no puedan acceder a lugares
restringidos. He adquirido conocimientos de un nuevo lenguaje de programación web,
como es el PHP, en el que hasta el momento no tenía ningún tipo de experiencia. De la
misma manera que he aprendido ha interconectar las bases de datos con este nuevo
lenguaje.
He adquirido experiencia en este sector, junto al aprendizaje de nuevos programas que
antes no sabía utilizar. Me he dado cuenta de la cantidad de tecnologías que hay en el
sector. Estoy convencido que en un futuro me serán útiles los conceptos y la práctica que
he adquirido.
El diseño de la página web me ha llevado tiempo y esfuerzo, ya que no estaba
acostumbrado a realizarlo y al mismo tiempo el trabajar para otros siguiendo sus pautas me
ha servido para adquirir experiencia en la aplicación de mis conocimientos.
43
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Aportaciones del los estudios realizados al proyecto
Las principales materias de la carrera universitaria que me han servido de ayuda a la hora
de desarrollar el proyecto han sido:

Programación 1 y 2, me han ayudado mucho a entender de manera más rápida el
funcionamiento del PHP y la manera de enfocar los problemas que iban surgiendo,
como el registro de usuarios o la propia seguridad de la página web. Así como los
bucles para buscar usuarios o productos y la manera de realizar la búsqueda en los
productos.

Introducción a base de datos y base de datos, me ha sido muy útil a la hora de
realizar las consultas a la base de datos, así como añadir o modificar la información
que se encuentra en ella.
También me ha servido a la hora de crear los registros de los usuarios y de
modificar sus perfiles.

Sistemas abiertos, esta asignatura es la que más útil me ha sido, ya que une las
bases de datos con la programación, y aunque no era el mismo lenguaje, ha sido
muy útil para realizar la página web con una base de datos con la que tenia que
interactuar.

Gestión de empresa, esta asignatura me ha servido para comprender la imagen de
marca y saber que es lo que busca una empresa de cara a los usuarios, y así poder
realizar una web que “venda” y sea útil.
44
Proyecto final de carrera
Dino Theo Atlantis MC, S.L
Conclusiones
Después de haber realizado este proyecto me he dado cuenta que trabajar para una
empresas tiene más dificultad de la que en un principio pensaba, debido a que has de
adaptar tu diseño, tus ideas y tus conocimientos a las exigencias de la empresa.
He visto que hay una gran cantidad de formas y tecnologías que hay para crear una página
web. En este caso he puesto en práctica algunas, pero hay muchas otras que espero utilizar
en otras ocasiones. La próxima vez que tenga que realizar una web de este estilo me será
más fácil, ya que he mejorado en el tema de funcionalidad de una web, y en la sencillez
visual y facilidad de acceso al usuario.
He aprendido ha utilizar programas de diseño, con los cuales anteriormente no había
trabajado, como es el caso del Gimp.
Lo que más me ha costado después de tenerlo todo diseñado y elaborado, ha sido que en el
momento de ponerlo en práctica no ha resultado tan sencillo, ya que para que el diseño
web surja tal como quieres hay una gran cantidad de pequeñas cosas que tienes que
trabajar para conseguir el objetivo deseado.
Si tuviera que realizar otra página web de este estilo o de otro, probablemente usaría las
mismas herramientas, pero puede que profundizase más de lleno en el mundo del CSS, ya
que me parece muy interesante. En el futuro, aunque no tenga que diseñar ninguna web
con carácter profesional, si me gustaría diseñar una web con esta tecnología.
Una posible mejora podría ser incorporar un sistema de búsqueda avanzada para el listado
de productos, o realizar un e-mail directo a la empresa, para que el usuario no tenga que
copiar el e-mail de la empresa y enviar la consulta desde su correo personal.
45