Manual. Tu página web con PHP y MySQL

Programación web 1

Evidencia. Construcción del sitio web 2

Unidad 3. Desarrollo de sitios web

Julio César Hernández Cruz

al11503387

2014. Desarrollo de software

Introducción

El presente documento se redacta como un manual para crear un sitio web dinámico, es realizado como

evidencia de lo aprendido en el curso programación web 1 de la carrera de desarrollo de software.

Este manual comprende desde la instalación de XAMPP hasta la puesta en marcha del sitio, incluye conceptos

básicos de programación php y conexión a base de datos.

He buscado un solución pequeña que puede servir de base para emprender proyectos de un mayor alcance. Se

incluyen capturas de pantalla y fragmentos de código los cuales explico a detalle para comprender como es que

funciona.

2

Índice de contenido

1 Construcción del sitio web.................................................................................................................................4

1.1 XAMMP en Windows.................................................................................................................................4

1.1.1 Instalación..........................................................................................................................................4

1.1.2 Configuración.....................................................................................................................................6

1.2 Caso de estudio..........................................................................................................................................7

1.3 Desarrollo..................................................................................................................................................7

1.3.1 Requerimientos..................................................................................................................................7

1.3.2 Análisis y Diseño................................................................................................................................7

1.3.3 Desarrollo..........................................................................................................................................8

1.3.3.1 Páginas estáticas........................................................................................................................8

Cabeza.............................................................................................................................................8

Encabezado......................................................................................................................................9

Cuerpo.............................................................................................................................................9

Fondo...............................................................................................................................................9

Javascript.........................................................................................................................................9

1.3.3.2 Scripts de instalación...............................................................................................................10

Datos..............................................................................................................................................10

Index (Instalar)...............................................................................................................................10

1.3.3.3 Página de promociones............................................................................................................11

Plantilla (oferta_detalle.php).........................................................................................................12

1.3.3.4 Administración.........................................................................................................................12

Index.php.......................................................................................................................................12

Agregar promoción........................................................................................................................14

Modificar una promoción..............................................................................................................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

1 Construcción del sitio web

1.1 XAMMP en Windows

XAMPP Apache + MySQL + PHP + Perl¿Qué es XAMPP?

XAMPP es el entorno más popular de desarrollo con PHPXAMPP es una distribución de Apache completamente gratuita y fácil de instalar

que contiene MySQL, PHP y Perl. El paquete de instalación de XAMPP ha sido

diseñado para ser increíblemente fácil de instalar y usar.

1.1.1 InstalaciónDescargar el instalador de:

http://www.apachefriends.org/es/index.html

1. Ejecutar xampp-win32-[versión]-installer.exe

2. Seleccionar los componentes a instalar

a) Apache. Servidor web

b) MySQL. Servidor de base de datos

4

http://www.apachefriends.org/es/index.html

c) Fillezilla FTP Server. Servidor FTP

d) Mercury Mail Server. Servidor de envío y recepción de correo.

e) Tomcat. Implementación para correr Java Servlet y JSP

f) PHP. Lenguaje de programación

g) Perl. Lenguaje de programación

h) phpMyAdmin. Aplicación desarrollada con php para administrar el servidor y las bases de datos de

MySQL

i) Webalizer. Análisis y log de servidor web.

j) Fake Sendmail. Aplicación similar a sendemail de Unix para el envío de correo desde páginas web.

k) Selecciona el folder de instalación

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

m) Instalación terminada

5

3. Dar click en Apache → Start

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

1.1.2 ConfiguraciónDesde el panel de control XAMPP → Apache → Config, se puede ingresar a los archivos de configuración de

Apache, PHP y phpMyAdmin. El directorio raíz por default es: C:/xampp/htdocs.

6

../../../../../../../../xampp/htdocs

http://localhost/xampp

http://localhost/

1.2 Caso de estudio

Restaurante “El Mirador”

El sitio a desarrollar requiere de una solución para actualizar un página de promociones en la cual se listan las

ofertas vigentes, cada elemento de la lista incluye: título, imagen alusiva, una breve descripción y la vigencia.

1.3 Desarrollo

1.3.1 Requerimientos

Es necesario realizar la programación necesaria para:

1. Ingresar a por medio de una pantalla de acceso (usuario y contraseña) a un área de administración.

2. Listar los anuncios existentes con opciones para modificar y eliminar.

3. Opción para agregar una nueva oferta.

1.3.2 Análisis y Diseño

Tecnologías a utilizar:

• MySQL. Base de datos

• HTML. Páginas estáticas.

• PHP. Páginas dinámicas.

7

• Javascript. Animaciones y funcionalidades del lado del cliente

• CSS. Estilización del sitio

Estructura del sitio:

1.3.3 Desarrollo

1.3.3.1 Páginas estáticas

En esta clasificación entran las páginas index, contacto y aviso de privacidad, su programación requiere de los

lenguajes HTML, Javascript y CSS, solo se analizará la pagina index.html, las demás poseen contenido similar:

Cabeza



<head><title>El Mirador</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

8

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 instalación

Los scripts de instalación permiten la conexión al servidor de base de datos y a la creación de la base, sus tablas

y la cuenta de administrador. Para poder ejecutar el script de instalación y para el uso de la aplicación es

necesario modificar el archivo de configuración datos.php. Este archivo contiene las variables y sus valores para

utilizarlo en las conexiones.

Datos

<?php// Datos de conexión 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 información de las ofertas y los usuarios, e inserta al usuario administrador

especificado en datos.

<?phpinclude '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 Página de promociones

Esta página 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

página. En el cuerpo se realiza la consulta para mostrar la información.

<div class="maximo"><?php

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

bottom: 7px;"/><p><?php echo $descripcion; ?></p><p>Válido al <span style="color: green;"><?php echo $valido; ?></span></p>

</div><p style="clear: both;">⚑</p>

1.3.3.4 Administración

Las siguientes páginas están protegidas del acceso de los usuarios públicos, será necesario ingresar usuario y

contraseña del administrador indicado en datos.php. Para la validación se hace uso de sesiones, dentro de la

sesión se guardará una variable para verificar el usuario haya ingresado.

Cada página siguiente incluye el archivo de datos para usar sus variables, la indicación de inicio de sesión y la

instrucción para salir en caso de que se indique así.

<?phpinclude '../instalar/datos.php';session_start();if ($_GET['opc'] == "salir") {

session_destroy();header('Location: ./');

}?>

Index.php

Al ingresar al área de administración se verifica la existencia de una variable de sesión, 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>contraseña</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 envío mediante POST al mismo index en donde se valida la información y

de ser correcta se crea la variable de sesión, 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 promoción

Cuando se selecciona a agregar se abre la página agregar.php, la cual contiene el formulario con los campos

necesarios para una nueva promoción. El formulario se envía 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>Título</td><td><input type="text" name="titulo"

required="true"/></td></tr><tr><td>Imágen (URL)</td><td><input type="text" name="urlimg"

required="true"/></td></tr><tr><td>Descripción</td><td><textarea name="descripcion"

required="true"></textarea></td></tr><tr><td>Válido 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 envía el formulario el navegador vuelve a agregar.php, ahora para hacer la validación y en caso de

confirmación o error envía un mensaje. Si todo es correcto actualiza la base de datos con la nueva promoción.

<?phpinclude '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 promoción

Para editar una promoción se utiliza el método get mediante el cual se obtiene el id de la promoción a

modificar, se llena un formulario similar al de agregar, se hace la validación de datos en los campos y se envía

por post a la misma página para realizar la actualización.

<?phpinclude '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>Título</td><td><input type="text" name="titulo" value="<?php echo

$titulo; ?>" required="true"/></td></tr><tr><td>Imágen (URL)</td><td><input type="text" name="urlimg" value="<?

php echo $urlimg; ?>" required="true"/></td></tr><tr><td>Descripción</td><td><textarea name="descripcion"

required="true"><?php echo $descripcion; ?></textarea></td></tr><tr><td>Válido 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>

Actualización de la base de datos, si la instrucción 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 opción eliminar, la cual envía mediante get el id a borar.php dentro de este archivo

se ejecuta el comando sql necesario para dar de baja la promoción de la tabla ofertas. Al terminar el script

redirige al index del administrador.

<?phpinclude '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

2 Fuentes de consulta

2014. Programación web 1. Universidad Abierta y a Distancia de México.

MySQL

http://mysql.com

XAMPP

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

PHP 5 Tutorial. | en línea |. w3schools. Recuperado el 3 de mayo de 2014, de:

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

22

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

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

http://mysql.com/

Manual. Tu página web con PHP y MySQL

Documents

Transcript of Manual. Tu página web con PHP y MySQL