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 PHP XAMPP 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ón Descargar 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

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

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 <!-- Cabeza del la página, contiene título, enlaces a las hojas de estilo, descripción del contenido y JavaScript--> <head> <title>El Mirador</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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 imágenes cada 9 segundos </script>

</head>

Encabezado <!-- Encabezado de la página: 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 información e imágenes --> <div id="desayunos"> <!-- Este panel contendrá las imágenes de fondo--> </div> <div class="maximo"> <h1>Desayuno</h1> <p>La mayor variedad en desayunos ligeros, pan, café, huevos.</p> </div>

Fondo <!-- Pie de página. 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 imágenes presentadas cada 9 segundos mediante la función setInterval() la cual crea un ciclo. var vf = true; setInterval(function() { if (vf) {

9

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

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. <?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>Válido al <span style="color: green;"><?php echo $valido; ?></span></p> </div> <p style="clear: both;">&#9873;</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í. <?php include '../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. <?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 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. <?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>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. <?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

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