Programacin web 1

Evidencia. Construccin del sitio web 2

Unidad 3. Desarrollo de sitios web

Julio Csar Hernndez Cruz

al11503387
2014. Desarrollo de software

Introduccin
El presente documento se redacta como un manual para crear un sitio web dinmico, es realizado como
evidencia de lo aprendido en el curso programacin web 1 de la carrera de desarrollo de software.
Este manual comprende desde la instalacin de XAMPP hasta la puesta en marcha del sitio, incluye conceptos
bsicos de programacin php y conexin a base de datos.
He buscado un solucin pequea que puede servir de base para emprender proyectos de un mayor alcance. Se
incluyen capturas de pantalla y fragmentos de cdigo los cuales explico a detalle para comprender como es que
funciona.

ndice de contenido
1 Construccin del sitio web.................................................................................................................................4
1.1 XAMMP en Windows.................................................................................................................................4
1.1.1 Instalacin..........................................................................................................................................4
1.1.2 Configuracin.....................................................................................................................................6
1.2 Caso de estudio..........................................................................................................................................7
1.3 Desarrollo..................................................................................................................................................7
1.3.1 Requerimientos..................................................................................................................................7
1.3.2 Anlisis y Diseo................................................................................................................................7
1.3.3 Desarrollo..........................................................................................................................................8
1.3.3.1 Pginas estticas........................................................................................................................8
Cabeza.............................................................................................................................................8
Encabezado......................................................................................................................................9
Cuerpo.............................................................................................................................................9
Fondo...............................................................................................................................................9
Javascript.........................................................................................................................................9
1.3.3.2 Scripts de instalacin...............................................................................................................10
Datos..............................................................................................................................................10
Index (Instalar)...............................................................................................................................10
1.3.3.3 Pgina de promociones............................................................................................................11
Plantilla (oferta_detalle.php).........................................................................................................12
1.3.3.4 Administracin.........................................................................................................................12
Index.php.......................................................................................................................................12
Agregar promocin........................................................................................................................14
Modificar una promocin..............................................................................................................15
Eliminar un registro........................................................................................................................16
1.4 Capturas de pantalla................................................................................................................................18
promociones.php...........................................................................................................................18
admin/index.php acceso................................................................................................................19
Admin/index.php ofertas...............................................................................................................20
admin/agregar.php, admin/modificar.php.....................................................................................21
2 Fuentes de consulta.........................................................................................................................................22
3

Construccin del sitio web

1.1 XAMMP en Windows

XAMPP Apache + MySQL + PHP + Perl

Qu es XAMPP?
XAMPP es el entorno ms popular de desarrollo con PHP
XAMPP es una distribucin de Apache completamente gratuita y fcil de instalar
que contiene MySQL, PHP y Perl. El paquete de instalacin de XAMPP ha sido
diseado para ser increblemente fcil de instalar y usar.

1.1.1 Instalacin
Descargar el instalador de:
http://www.apachefriends.org/es/index.html
1. Ejecutar xampp-win32-[versin]-installer.exe

2. Seleccionar los componentes a instalar

a) Apache. Servidor web
b) MySQL. Servidor de base de datos
4

c) Fillezilla FTP Server. Servidor FTP

d) Mercury Mail Server. Servidor de envo y recepcin de correo.
e) Tomcat. Implementacin para correr Java Servlet y JSP
f)

PHP. Lenguaje de programacin

g) Perl. Lenguaje de programacin

h) phpMyAdmin. Aplicacin desarrollada con php para administrar el servidor y las bases de datos de
MySQL
i)

Webalizer. Anlisis y log de servidor web.

j)

Fake Sendmail. Aplicacin similar a sendemail de Unix para el envo de correo desde pginas web.

k) Selecciona el folder de instalacin

l)

Bitnami es un repositorio de aplicaciones para instalar directamente en el servidor.

m) Instalacin terminada

3. Dar click en Apache Start

4. En el navegador verificar http://localhost/ o http://localhost/xampp

1.1.2 Configuracin
Desde el panel de control XAMPP Apache Config, se puede ingresar a los archivos de configuracin de
Apache, PHP y phpMyAdmin. El directorio raz por default es: C:/xampp/htdocs.

1.2 Caso de estudio

Restaurante El Mirador
El sitio a desarrollar requiere de una solucin para actualizar un pgina de promociones en la cual se listan las
ofertas vigentes, cada elemento de la lista incluye: ttulo, imagen alusiva, una breve descripcin y la vigencia.

1.3 Desarrollo
1.3.1 Requerimientos
Es necesario realizar la programacin necesaria para:
1. Ingresar a por medio de una pantalla de acceso (usuario y contrasea) a un rea de administracin.
2. Listar los anuncios existentes con opciones para modificar y eliminar.
3. Opcin para agregar una nueva oferta.

1.3.2 Anlisis y Diseo

Tecnologas a utilizar:

MySQL. Base de datos

HTML. Pginas estticas.

PHP. Pginas dinmicas.

Javascript. Animaciones y funcionalidades del lado del cliente

CSS. Estilizacin del sitio

Estructura del sitio:

1.3.3 Desarrollo
1.3.3.1

Pginas estticas

En esta clasificacin entran las pginas index, contacto y aviso de privacidad, su programacin requiere de los
lenguajes HTML, Javascript y CSS, solo se analizar la pagina index.html, las dems poseen contenido similar:
Cabeza
<!-- Cabeza del la pgina, contiene ttulo, enlaces a las hojas de estilo, descripcin del contenido y
JavaScript-->
<head>
<title>El Mirador</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'

<link rel="stylesheet" type=-"text/css" href="css/todo.css" />
<script type="text/javascript">
// Script para el intercambios de imgenes cada 9 segundos
</script>

</head>

Encabezado
<!-- Encabezado de la pgina: logotipo y menu de opciones -->
<div class= "cabeza maximo" id="encabezado">
<img src="arte/ElMirador.png" id="logo">
</div>
<hr/>
<div class="maximo" id="menu">
<ul>
<li><a href="promociones.php">Promociones</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
<hr/>

Cuerpo
<!-- Cuerpo. Contiene divisiones o paneles horizontales con informacin e imgenes -->
<div id="desayunos">
<!-- Este panel contendr las imgenes de fondo-->
</div>
<div class="maximo">
<h1>Desayuno</h1>
<p>La mayor variedad en desayunos ligeros, pan, caf, huevos.</p>
</div>

Fondo
<!-- Pie de pgina. Derechos reservados, aviso de privacidad -->
<hr />
<div class="maximo" id="fondo">
<p>Todos los derechos reservados "El Mirador"</p>
<p><a href="aviso.html">Aviso de privacidad</a></p>
<p>Sitio desarrollado por <a
href="https://plus.google.com/u/0/+juliocesarfx/posts">juliocesarfx</a></p>
</div>

Javascript
<script type="text/javascript">
// El siguiente script permite cambial las imgenes presentadas cada 9 segundos mediante la funcin setInterval()
la cual crea un ciclo.
var vf = true;
setInterval(function() {
if (vf) {

document.getElementById("desayunos").style.backgroundImage="url('arte/desayuno2.jpg')";
document.getElementById("comidas").style.backgroundImage="url('arte/mole.jpg')";
document.getElementById("antojitos").style.backgroundImage="url('arte/pozole.jpg')";
} else {
document.getElementById("desayunos").style.backgroundImage="url('arte/desayuno.jpg')";
document.getElementById("comidas").style.backgroundImage="url('arte/comida.jpg')";
document.getElementById("antojitos").style.backgroundImage="url('arte/antojitos.jpg')";
}
vf = !vf;
}, 9000);
</script>

1.3.3.2

Scripts de instalacin

Los scripts de instalacin permiten la conexin al servidor de base de datos y a la creacin de la base, sus tablas
y la cuenta de administrador. Para poder ejecutar el script de instalacin y para el uso de la aplicacin es
necesario modificar el archivo de configuracin datos.php. Este archivo contiene las variables y sus valores para
utilizarlo en las conexiones.
Datos
<?php
// Datos de conexin al servidor
$servidor = "mysql4.000webhost.com";
$basedatos = "a2075079_dpw1";
$usuario = "a2075079_julio";
$contrasena = "admindpw1";
// Datos del usuario administrador
$admin = "admin";
$adminpass = "admin";
?>

Index (Instalar)

Este archivo contienes las instrucciones para crear una nueva base de datos o utilizar una existente. Crea las
tablas necesarias para almacenar la informacin de las ofertas y los usuarios, e inserta al usuario administrador
especificado en datos.
<?php
include 'datos.php';
$con = mysqli_connect($servidor, $usuario, $contrasena);
if (mysqli_connect_errno()) {
echo "Error al conectar con el servidor" . mysqli_connect_error();

10

}
$sql = "create database if not exists " . $basedatos . ";";
if (mysqli_query($con, $sql)) {
echo "Base de datos creada correctamente...";
$sqlt = "create table if not exists usuarios (
usuario varchar(25) primary key,
pass varchar(25)
);
create table if not exists ofertas (
id int primary key auto_increment,
titulo varchar(200),
urlimg varchar(200),
descripcion text,
valido varchar(60)
);
insert into usuarios values('" . $admin . "', '" . $adminpass. "');";
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_multi_query($con, $sqlt)) {
echo "Tablas creadas";
} else {
echo "Error" . mysqli_error($con);
}
} else {
echo "Error al crear la base de datos" . mysqli_error($con);
}
?>

1.3.3.3

Pgina de promociones

Esta pgina muestra las promociones capturadas por el administrador, es una consulta de los registros de la
tabla ofertas. Contiene una estructura similar al index principal: cabeza, encabezdo (logo y menu) y pie de
pgina. En el cuerpo se realiza la consulta para mostrar la informacin.
<?php

<div class="maximo">
include 'instalar/datos.php';
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_connect_errno()) {
echo "Error al conectar con el servidor" . mysqli_connect_error();
}
$sql = "Select * from ofertas;";
if ($rs = mysqli_query($con, $sql)) {
$plantilla = implode("", file('admin/oferta_detalle.php'));
$color = "white";
while ($fil = mysqli_fetch_array($rs)) {
$color = $color == "white"? "lightgray": "white";
extract($fil);
eval("?>" . $plantilla);
}

11

}
?>
</div>

Plantilla (oferta_detalle.php)

El script de consulta de promociones hace uso de una plantilla de tipo lista a la cual se le pasan por cada
registro las variables de la fila consultada.
<div style="clear: both;">
<h1><?php echo $titulo; ?></h1>
<img src="<?php echo $urlimg; ?>" style="float:left; max-width: 300px; width: 50%; padding-right: 7px; paddingbottom: 7px;"/>
<p><?php echo $descripcion; ?></p>
<p>Vlido al <span style="color: green;"><?php echo $valido; ?></span></p>
</div>
<p style="clear: both;">&#9873;</p>

1.3.3.4

Administracin

Las siguientes pginas estn protegidas del acceso de los usuarios pblicos, ser necesario ingresar usuario y
contrasea del administrador indicado en datos.php. Para la validacin se hace uso de sesiones, dentro de la
sesin se guardar una variable para verificar el usuario haya ingresado.
Cada pgina siguiente incluye el archivo de datos para usar sus variables, la indicacin de inicio de sesin y la
instruccin para salir en caso de que se indique as.
<?php
include '../instalar/datos.php';
session_start();
if ($_GET['opc'] == "salir") {
session_destroy();
header('Location: ./');
}
?>

Index.php

Al ingresar al rea de administracin se verifica la existencia de una variable de sesin, si esta no existe,
muestra el formulario de ingreso. Si existe la variable se realiza una consulta similar a la de las promociones y
agrega las opciones para agregar, modificar y eliminar las ofertas o promociones.

12

if(isset($_SESSION['admin'])) {
echo '<a href="agregar.php" >Agregar</a>
<span style="padding-right: 10px;"></span><a target="_blank" href="../promociones.php"
>Ver</a>
<span style="padding-right: 10px;"></span><a href="./?opc=salir" >Salir</a>
<p></p>';
echo '<h1>Anuncios publicados</h1>';
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_connect_errno()) {
echo "Error al conectar con el servidor" . mysqli_connect_error();
}
$sql = "Select * from ofertas;";
if ($rs = mysqli_query($con, $sql)) {
$plantilla = implode("", file('oferta.php'));
$color = "white";
while ($fil = mysqli_fetch_array($rs)) {
$color = $color == "white"? "lightgray": "white";
extract($fil);
echo "<table>";
eval("?>" . $plantilla);
echo "</table>";
}
}
} else {
?>
<form method="post">
<table>
<tr>
<td>usuario</td><td><input type="text" name="admin" /></td>
</tr>
<tr>
<td>contrasea</td><td><input type="password" name="adminpass" /></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Entrar"/></td>
</tr>
</table>
</form>
<?php
}

Cuando se llena el formulario este se envo mediante POST al mismo index en donde se valida la informacin y
de ser correcta se crea la variable de sesin, de lo contrario se regresa al index indicando datos incorrectos y
vuelve a mostrar el formulario de ingreso.
if (isset($_POST['admin'])) {
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);

13

$sql = "Select * from usuarios where usuario = '" . $_POST['admin'] . "' and pass = '" .
$_POST['adminpass'] . "';";
if (mysqli_connect_errno()) {
echo "Error al conectar con el servidor" . mysqli_connect_error();
}
if ($rs = mysqli_query($con, $sql)) {
if (mysqli_num_rows($rs) > 0) {
$_SESSION['admin'] = $_POST['admin'];
} else {
echo '<p>Datos incorrectos</p>';
}
} else {
echo mysqli_error($con);
}
}

Agregar promocin

Cuando se selecciona a agregar se abre la pgina agregar.php, la cual contiene el formulario con los campos
necesarios para una nueva promocin. El formulario se enva por medio de post, cada campo tiene la propiedad
required=true para validar que usuario ingrese datos para cada uno.
<div class="maximo">
<p><?php echo $estado; ?></p>
<p><a href="./">Regresar</a></p>
<form method="post">
<table>
<tr><td>Ttulo</td><td><input type="text" name="titulo"
required="true"/></td></tr>
<tr><td>Imgen (URL)</td><td><input type="text" name="urlimg"
required="true"/></td></tr>
<tr><td>Descripcin</td><td><textarea name="descripcion"
required="true"></textarea></td></tr>
<tr><td>Vlido hasta</td><td><input type="text" name="valido"
required="true"/></td></tr>
<tr><td></td><td><input type="submit" value="Guardar"/></td></tr>
</table>
</form>
</div>

Cuando se enva el formulario el navegador vuelve a agregar.php, ahora para hacer la validacin y en caso de
confirmacin o error enva un mensaje. Si todo es correcto actualiza la base de datos con la nueva promocin.
<?php
include 'verificar.php';
include '../instalar/datos.php';
$estado = "";

14

if (isset($_POST['titulo'])) {
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_connect_errno()) {
$estado = "Error al conectar, intente nuevamente" . mysqli_connect_error();
}
$sql = "Insert into ofertas (`titulo`, `urlimg`, `descripcion`, `valido`)
values ('" . $_POST['titulo'] . "', '" . $_POST['urlimg'] . "', '" . $_POST['descripcion'] . "', '" .
$_POST['valido'] . "');";
if (mysqli_query($con, $sql)) {
$estado = "Registro guardado correctamente";
} else {
$estado = "Error al guardar, intente nuevamente";
}
}
?>

Modificar una promocin

Para editar una promocin se utiliza el mtodo get mediante el cual se obtiene el id de la promocin a
modificar, se llena un formulario similar al de agregar, se hace la validacin de datos en los campos y se enva
por post a la misma pgina para realizar la actualizacin.
<?php
include 'verificar.php';
include '../instalar/datos.php';
$estado = "";
$id;
$titulo;
$urlimg;
$descripcion;
$valido;
if (isset($_GET['id'])) {
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_connect_errno()) {
$estado = "Error al guardar, intente nuevamente";
}
$sql = "Select * from ofertas where id = " . $_GET['id'] . ";";
if ($rs = mysqli_query($con, $sql)) {
if ($fil = mysqli_fetch_array($rs)) {
$id = $fil['id'];
$titulo = $fil['titulo'];
$urlimg = $fil['urlimg'];
$descripcion = $fil['descripcion'];
$valido = $fil['valido'];
}
}
}
?>

15

Formulario con los datos actuales.

<div class="maximo">
<p><?php echo $estado; ?></p>
<p><a href="./">Regresar</a></p>
<form method="post">
<table>
<tr><td>Ttulo</td><td><input type="text" name="titulo" value="<?php echo
$titulo; ?>" required="true"/></td></tr>
<tr><td>Imgen (URL)</td><td><input type="text" name="urlimg" value="<?
php echo $urlimg; ?>" required="true"/></td></tr>
<tr><td>Descripcin</td><td><textarea name="descripcion"
required="true"><?php echo $descripcion; ?></textarea></td></tr>
<tr><td>Vlido hasta</td><td><input type="text" name="valido" value="<?
php echo $valido; ?>" required="true"/></td></tr>
<tr><td></td><td><input type="hidden" name="id" value="<?php echo $id; ?
>"/></td></tr>
<tr><td></td><td><input type="submit" value="Actualizar"/></td></tr>
</table>
</form>
</div>

Actualizacin de la base de datos, si la instruccin es correcta se redirige al index del administrador.

. ";";

if (isset($_POST['titulo'])) {
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_connect_errno()) {
$estado = "Error al guardar, intente nuevamente";
}
$sql = "update ofertas set `titulo` = '" . $_POST['titulo'] . "', `urlimg` = '" . $_POST['urlimg'] . "'
, `descripcion` = '" . $_POST['descripcion'] . "', `valido`= '" . $_POST['valido'] . "' where id = " . $_POST['id']
if (mysqli_query($con, $sql)) {
header('Location: ./');
} else {
$estado = "Error al guardar, intente nuevamente";
}
}

Eliminar un registro

En el index se selecciona la opcin eliminar, la cual enva mediante get el id a borar.php dentro de este archivo
se ejecuta el comando sql necesario para dar de baja la promocin de la tabla ofertas. Al terminar el script
redirige al index del administrador.
<?php
include 'verificar.php';
include '../instalar/datos.php';

16

if (isset($_GET['id'])) {
$con = mysqli_connect($servidor, $usuario, $contrasena, $basedatos);
if (mysqli_connect_errno()) {
echo "Error al guardar, intente nuevamente";
}
$sql = "Delete from ofertas where id = " . $_GET['id'] . ";";
echo $sql;
if (mysqli_query($con, $sql)) {
header('Location: ./');
}
}
?>

17

1.4 Capturas de pantalla

promociones.php

18

admin/index.php acceso

19

Admin/index.php ofertas

20

admin/agregar.php, admin/modificar.php

21

Fuentes de consulta

2014. Programacin web 1. Universidad Abierta y a Distancia de Mxico.

MySQL
http://mysql.com

XAMPP
https://www.apachefriends.org/es/index.html

PHP 5 Tutorial. | en lnea |. w3schools. Recuperado el 3 de mayo de 2014, de:

http://www.w3schools.com/PHP/

22