Diseño Web PHP y MySQL - Departament d'Enginyeria...

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

2

Í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


3

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.


4

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.


5

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:


6

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.


7

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:


8

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:


9

Contenido

Historia de la empresa:

Dónde se explica la historia de la empresa.


10

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.


11

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.


12

Este es un ejemplo de una parte del listado del tipo de productos “Welfare Items”:


13

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:


14


15

Contactos

Informa de las distintas maneras en las que los usuarios pueden ponerse en contacto con la

empresa:


16

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:


17

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.


18

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.


19

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:


20

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.


21

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.


22

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.


23

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)


24

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


25

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)


26

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


27

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;


28

}

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 la hora de realizar un cambio.


29

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.


30

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;


31

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;


32

}

}

?>

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) );


33

//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;

}

}

?>


34

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.


35

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;

}


36

/********************************************************************

* Esta función inserta un nuevo miembro.

*********************************************************************/

function insertUser( $dto, $db = 0 ) {

if ( $db == 0 ) {



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


return $resultat;

}


37

/***********************************************************************

* Obtener los datos de un producto a partir del id

***********************************************************************/

function getProductID( $idproduct, $db = 0 ) {

if ( $db == 0 ) {



>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();


return $retorn;

}


38

/***********************************************************************

* Esta función inserta un nuevo producto

***********************************************************************/

function insertProduct( $dto, $db = 0 ) {

if ( $db == 0 ) {



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


return $resultat;

}


39

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.


40

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.


41

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:


42

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.


43

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.


44

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.


45

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.

Diseño Web PHP y MySQL - Departament d'Enginyeria...

Documents

Transcript of Diseño Web PHP y MySQL - Departament d'Enginyeria...