Practica de laboratorio 1

Instalación de Servidor Web

1. OBJETIVOS
- Comprender la importancia de comenzar el diseño de paginas web a través de
servidores web
- Configurar propiedades de servidor web para facilitar diseño de páginas web.

2. Fundamentos
2.1. Servidor Web
Desde lado del software, un servidor web recibe las peticiones de los usuarios y controla el
envió de respuesta de contenido de sitios web, desde el momento en que los usuarios
acceden a sitios web a través de direcciones URL en navegadores de internet, y en paralelo
el servidor web emplea protocolos HTTP para comunicarse con los tipos de servicios que
tenga disponible (Apache, MySQL, etc.).

2.2. Diseño y desarrollo de sitios web

Los archivos necesarios para desarrollar páginas web pueden ser exportados de otras
fuentes y diseñados por programadores que usan documentos de texto TXT o software de
diseño específico:

o Adobe Dreamweaver.
o Avanquest WebEasy Professional
o Google Sites.
o Desygner
o Incomedia Website X5
 Los desarrolladores de páginas web generan los archivos de diseño mediante Documentos
estáticos (HTML, TXT, MP3, MP4), documentos dinámicos (PHP, XML, ASP, Python, Ruby y
GO), imágenes (JPG, PNG, GIF,BMP), hojas de estilos (CSS), archivo JavaScript (JS) y otros
lenguajes de programación.

2.3. Tipos de servidores web

Existen varios servidores web disponibles para sistemas operativos Windows, Linux,
FreeBSD, Mac OS X, etc. Sin embargo los más utilizados son:

 Apache: Software de código abierto disponible para casi todos los sistemas operativos,
siendo fácil de programar, pero con rendimiento débil frente a peticiones simultaneas
de usuarios.
 Microsoft IIS: Software proporcionado por Microsoft, es disponible solo para sistemas
operativos Windows e integrado en Visual Studio, es fácil de programar y de buen
rendimiento para servicios en la nube.
 Jigsaw: Software de código abierto proporcionado por W3C (The World Wide Web
Consortium), pudiendo ejecutarse en varios sistemas operativos.

3. Herramientas de servidor web

3.1. Instalación de servidor web
Se cuenta con herramientas gratuitas de servidores web:
Para el presente laboratorio usaremos la herramienta XAMPP, el acceso a la descarga es el
siguiente: https://www.apachefriends.org/es/download.html

Antes de instalar, es necesario comprobar si ya se encuentra instalado algún servidor web,

para comprobar primero debe abrir el navegador y escribir la dirección http://localhost

Si se obtiene un mensaje de error es que no hay ningún servidor web en funcionamiento

(aunque podría haber algún servidor instalado, pero no esta en funcionamiento).

Empezamos a instalar XAMPP si no hay inconveniente, es probable que muestre un aviso

que aparece si está activado el Control de Cuentas de Usuario, debido a que algunos
directorios pueden tener permisos restringidos:

A continuación se inicia el asistente de instalación, se instalan los componentes mínimos

para que el servidor web funcione para el resto de las sesiones de laboratorio de este curso
(Apache, MySQL, PHP y phpmyadmin).

Luego se indica la carpeta de instalación de XAMPP, siendo de forma predeterminada es

C:\xampp.

Durante la instalación, si en el ordenador no se había instalado Apache anteriormente, en

algún momento se mostrará un aviso del Firewall de Windows para autorizar a Apache a
comunicarse en las redes privadas o públicas. Una vez elegidas las opciones deseadas (en
estos apuntes se recomienda permitir las redes privadas y denegar las redes públicas), haga
clic en el botón "Permitir acceso".
 Una vez terminado de instalar, abrimos el Panel de control de Xampp (puede estar ubicado
en Escritorio, Menú inicio o área de notificación de Windows), el panel de control muestra
3 secciones:

a) Módulos: Muestra los servicios disponibles, incluyendo los puertos que se utilizan y
opciones para iniciar y detener procesos.
b) Utilidades: Opciones de acceso rápido.
c) Notificación: Informa el éxito o fracaso de acciones en el módulo.

3.2. Instalación de Servicios de sitio web

Para el presente laboratorio se va a instalar los servicios de Apache y MySQL, así como
dejarlos ejecutándose de forma automática para no tener que volver a inicializarlos cada
vez que se inicia el sistema operativo Windows, se sigue los siguientes pasos:

- Paso 1: Abrir de nuevo Xampp, pero ejecutando como administrador.

- Paso 2: En la sección de módulos, las casillas empezaran marcadas como no instaladas,
seleccionamos las casillas de Apache y MySQL y confirmamos la instalación.

- Paso 3: Si en la sección de Notificación muestra que se ha instalado correctamente,

ubicarse en la sección de utilidades y presionar botón de “Config”. Seleccionar que se
requiere Auto empezar los servicios de Apache y MySQL

- Paso 4: Reiniciar su ordenador, si regresa al panel de control, la columna Actions

muestra que ya se encuentra ejecutando los servicios mostrando que esta disponible el
botón “Stop”.
- Paso 5: Dirigirse al navegador y escribir la dirección http://localhost. XAMPP abrirá el
nuevo panel de administración web (dashboard), que todavía se encuentra en
desarrollo:

3.3. Ruta de servidor

Corresponde al directorio raíz del servidor donde se alojaran los archivos y carpetas que
conformaran los sitios web, y cuando en la barra de dirección del navegador se escriba una
dirección que comience por http://localhost/, el servidor buscará los archivos a partir de
ese directorio.

Posee las siguientes características cuando se publica el sitio web en el navegador de

internet:

- Si encuentra el archivo, lo publica al navegador.

- Si no encuentra el archivo, envía un error 404 (objeto no localizado)

En Xampp, la carpeta “htdocs” es el directorio raíz del servidor predeterminado, nos

dirigimos al panel de control de Xampp y en la sección de módulos, en la fila de servicio
Apache, presionamos botón “config” y seleccionamos el archivo “httpd.conf”.

Nos saldrá un block de notas donde ubicaremos:

- Directiva DocumentRoot: Especifica el directorio donde se encuentran las páginas web

- Directiva Directory: Acompaña a la directiva DocumentRoot que especifica qué
servicios y características están permitidos o prohibidos en el directorio.
 Si se requiere cambiar la ruta de servidor, basta con modificar ambas directivas, además se
recomienda tener respaldo de cualquier línea de texto modificada.

4. Generar un sitio web

Una vez conocido o determinado la ubicación de la carpeta “htodcs” como ruta de servidor,
copiar el siguiente código y guardar dentro de la carpeta “htdocs” un archivo bajo nombre:
“holamundo.php”.
<html>
<head>
<title>Prueba de PHP</title>
</head>
<body>
<?php echo '<p>Hola Mundo</p>'; ?>
</body>
</html>

Luego, abrimos un navegador de internet, y en la barra de dirección ingresamos:

http://localhost/holamundo.php

El resultado quedaría:

4.1. Variables de PHP

Se encargan de almacenar datos de diferentes tipos, sin necesidad de declarar el tipo de
dato.

La sintaxis de una variable consiste en colocar el símbolo dólar ($), seguido del nombre de
la variable.
 <?php
$var1; //defino variables
$var2 = 1; //…asignando numero
$var3 = "demo"; //…asignando texto
echo $var2; //imprimo variable
print "<p>$var3 </p>\n"; //imprimo variable con parrafo

//concateno variables y valores usando un punto

$cadena1 = "Este ";
$cadena2 = "mensaje";
$cadena3 = " muestra que ";
$cadena4 = $cadena1 . $cadena2 . $cadena3;
echo $cadena4;

//concateno variables sin usar punto

$semanas = 5;
$dias = 7 * $semanas;
print "<p>$semanas semanas son $dias días.</p>\n";
?>

4.2. Constantes de PHP

También almacenan datos, pero los datos guardados no se pueden modificar ni eliminar, y
no se necesita del símbolo dólar($)

Las constantes requieren de la función define(), contando 2 parámetros: El nombre de la

constante, y el dato de la constante.
<?php
define(“CONSTANT”, “Desarrolla tu pagina web”); //defino constante
echo CONSTANT; //imprimo constante
?>

4.3. Funciones
Son expresiones caracterizadas por devolver uno o varios valores.
<?php
function f1($a){
$rpta = $a * $a;
return $rpta;
}
function f2($a){
$rpta = number_format((int)($a), 2); // el resultado sempre sera entero y se escbira en dos decmales
return $rpta;
}
function f3($a){
$rpta = pow($a,3);
return $rpta;
}
$a1=mt_rand(1, 100); //valorea laeatorios del 1 al 100
$a2 = f1($a1); //llamar a funcion f1
$a3 = f2($a2);
$a4 = f3($a1);
$a5 = f2($a4);
print "<table border=1>";
print "<tr><td colspan='2' align='center'>Datos</td></tr>"; // Abarca 2 celdas
print "<tr><td>N&uacute;mero</td><td>Resultado</td></tr>";
print "<tr><th rowspan='4'>$a1</th><td>Su cuadrado es $a2</td></tr>";
print "<tr><td>Su cuadrado siendo expresado con formato num&eacute;rico: $a3</td></tr>";
print "<tr><td>El cubo es $a4</td></tr>";
print "<tr><td>Su cubo siendo expresado con formato num&eacute;rico: $a5</td></tr>";

print "</table>";
?>
4.4. Arreglos
Almacenan grupos de proporciones de datos, empleando estructuras repetitivas para
manipular los valores.

Los arreglos controlan su tamaño de forma dinámica, no siendo necesario definir el tamaño
para el arreglo, se clasifican en dos tipos:

- Arreglos indexados: Mediante un orden consecutivo, almacena los valores al arreglo en

posiciones asignadas o índices, iniciando desde la posición 0 y terminando en el número
total de valores almacenados menos 1.
<?php
//Los valores deben ser de mismo tipo
echo "-&nbsp; - &nbsp; - &nbsp; N&uacute;mero de meses del a&ntilde;o &nbsp; - &nbsp; - &nbsp; <br>";
$mes= [1,2,3,4,5,6,7,8,9,10,11,12];
echo "-&nbsp; - &nbsp; - &nbsp; El &uacute;ltimo mes es: ". $mes[11];

$dias_semana = array(0=>"Lunes", 1=>"Martes", 2=>"Miércoles", 3=>"Jueves", 4=>"Viernes");

print "<p>Los d&iacute;as de la semana son:</p>\n";
print "<ul>";
for($i=0;$i<=4;$i++){
print "<li> ".$dias_semana[$i]."</li>";
}
print "</ul>\n";
?>

- Arreglos asociados: se caracteriza por asignar a cada valor del arreglo una clave de
acceso para acceder a un valor especifico
<?php
$variable_arreglo1 = array('aprobado' => 20, 'desaprobado' => 0);
print_r($variable_arreglo1); //verifica que el arreglo fue aplicado correctamente
echo "<br>".$variable_arreglo1['aprobado'];
echo "<br>".$variable_arreglo1['desaprobado'];
?>

4.5. Mostrando contenido de arreglos

Para mostrar el contenido de los valores dentro de un arreglo, se emplean las siguientes
estructuras repetitivas: “foreach” y “for”.

- Estructura foreach: Como una estructura repetitiva, recorre todos los valores de un
arreglo, ya sea asociado o indexado
<?php
$variable_arreglo1 = array('aprobado' => 20, 'desaprobado' => 0);

foreach($variable_arreglo1 as $n){
echo $n."<br>";
}

foreach($variable_arreglo1 as $clave1 =>$valor1){

echo "La clave ".$clave1." contiene valor ".$valor1."<br>";
}
?>

- Estructura for: Recorre los valores de forma indexada y asociada, este último emplea la
funcion each para enviar de forma ordenada la pareja clave – valor (también conocidos
como 0 y 1).
 <?php
$variable_arreglo2 = array(0=>"Lunes", 1=>"Martes", 2=>"Miércoles", 3=>"Jueves", 4=>"Viernes");
for($i=0;$i<=count($variable_arreglo2);$i++){
$valores = each($variable_arreglo2);
echo "El valor ".$valores[0]." tambien es ".$valores['key'];
echo "<br>";
echo "El d&iacute;a ".$valores[1]." equvale a ".$valores['value'];
echo "<br>";
}
?>

- Estructura while: Emplea la función “list” para recorrer los valores del arreglo
<?php
$variable_arreglo3 = array(10=>"123", 11=>"345", 12=>"789", 13=>"abc", 14=>"xyz");
while(list($clave3,$valor3) = each($variable_arreglo3)){
echo "La clave ".$clave3." contiene valor ".$valor3."<br>";
}
?>

4.6. Formularios web

Hace uso de objetos (caja de textos, menús, botones, etc.) que permiten interactuar al
usuario con el entorno web, donde:

- Recolecta información mediante el rellenado de caja de textos

- Selecciona de opciones a través de menús.
- Envía información mediante el pulsado de un botón.
- Etc.

Emplea código PHP, ya que este es interpretado por el servidor, y a la vez lo devuelve al
usuario ya interpretado, los formularios normalmente solicitan ingresar datos:
//Desde form1.php
<form method="post" action="form2.php">
Nombre : <input type="text" name="nombre1"><br>
Apellido : <input type="text" name="apellido1"><br>
<br>
<br><br>
<input type="submit" name="valider" value="Enviar">
</form>
En el comando “form” se emplean los siguientes parámetros:

- ACTION: Indica quien será encargado de recibir los datos que se envíen desde el
formulario, pudiendo ser la URL de un sitio web, un archivo PHP o un correo electrónico.
- METHOD: Indica cómo debe de realizar la transferencia de los datos contenidos en el
formulario, mediante el envió de todos los datos que forman parte del formulario (GET),
o mediante la transmisión de datos por separado del formulario (POST).

En el comando “input” se emplean los siguientes parámetros:

- TYPE: Campo obligatorio que indica el tipo de campo de formulario

- VALUE: Utilizado para darle valor por defecto al campo
- SIZE: Establece el tamaño del campo, es decir el número de caracteres que puede
escribirse
- MAXSIZE: Indica el número máximo de caracteres que puede recibir el campo

Los valores que puede tomar el campo TYPE son los siguientes:

- TYPE=”text” Campo de texto

 - TYPE=”password” Campo especial para introducir
contraseñas
- TYPE=”radio” Botón de radio
- TYPE=”checkbox” Caja de selección
- TYPE=”submit” Botón de envó de información
- TYPE=”reset” Botón de borrado de información
- TYPE=”button” Botón de acción
- TYPE=”hidden” Campo oculto

El formulario que va a recibir los datos debe ser de extensión .php, empleando variables o
instrucciones “$POST” para capturar los datos enviados desde el anterior formulario:
//Desde form2.php
$nombre = $_POST['nombre1'];
$apellido = $_POST['apellido1'];
echo $nombre."<br>".$apellido;
5. Trabajo
Hacer el siguiente diseño:

Siendo el contenido:

 Header: Contiene logo y encabezado de la universidad, ejemplo:

 Nav: Contiene hipervínculos a Wikipedia que direccionan a búsqueda de HTML, PHP,

xampp y Apache
 Section id=”sidebar”: Contiene la siguiente diseño:
 Section id=”main”

 Footer: Mostrar información básica del desarrollador como dirección, teléfono, correo
y redes sociales, ejemplo:
6. Web grafía
https://www.mclibre.org/consultar/php/index.html

https://www.um.es/docencia/barzana/DAWEB/Desarrollo-de-aplicaciones-web-
Xampp.html

http://desarrolloweb.dlsi.ua.es/