5a Semana curso de programación web

Fundacio gentis salt girona

LUNES 12 DE FEBRERO DE 2018

Clase con Josep, hoy el alumno Ambrogio nos ha enseñado una aplicación que ha hecho por su cuenta, es una web de una escuela de idiomas con un formulario que recoge datos en base de datos y además compara resultados para saber si ya existe un usuario con ese correo y por ultimo muestra una lista de usuarios y los puedes eliminar.

Ahora vamos a seguir con la aplicación en grupo!

llevamos como dos horas casi y aun no nos funciona el programa nos da error a la hora de editar los datos de la base de datos, tenemos que hacer un resumen de todo el programa, hoy con tantos problemas y errores no he podido redactar la clase, pero ahora hago un resumen.

Hemos estado trabajando en una aplicación web durante un par de semanas, hicimos 3 grupos en clase y cada uno la tenia que hacer a su manera y de lo que quisiera, solo tenia que cumplir los requisitos de tener un formulario que recoja datos, estos datos se inserten en una base de datos y después podamos modificar y eliminar los datos introducidos.

Nuestro grupo hemos optado por hacer una aplicación llamada Panel de gestión que simula un programa de gestión de clientes en base de datos, para comenzar creamos una carpeta con el nombre gestion, en el directorio publico del servidor localhost en nuestro caso es C:\Wamp\www\gestion y aquí es donde se alojaran todos los archivos que forman el programa imágenes incluidas.

Hemos comenzado por crear un archivo html llamado index.html que muestra un titulo con fondo azul y un logo del programa, después a través de dos imágenes podemos escoger mostrar o registrar datos.

cursos inem salt

 

Si le damos en registrar datos vamos a un nuevo archivo html llamado formulario.html,  aquí es donde se aloja el formulario para introducir datos y se envían a un archivo php llamado destino.php mediante la etiqueta “action” y el archivo destino.php los almacena mediante variables POST.

cursos paro salt

Una vez recoge los datos el archivo destino.php necesitamos crear una base de datos con dos tablas, una para que registre los datos y una para los usuarios que tendrán acceso a esos datos.

La tabla de datos la hemos llamado formulario y tiene 8 campos, 7 para los formularios + 1 campo para id que lo hemos definido en AI (auto incrementa) para que a medida que añadimos datos se vaya asignando una id automaticamente.

La tabla de usuarios la hemos creado con 4 campos, 3 para nombre, contraseña, correo + 1 para la id igual que la tabla formulario lo hemos hecho en AI.

Nota: las variables y los campos de la tabla deben de ponerse en el mismo orden de lo contrario no cuadraran los datos

Una vez acabado el trabajo en la base de datos hemos añadido la función INSERT  al archivo destino.php para que inserte los datos en la base de datos, le hemos especificado el nombre de la tabla, el usuario, la contraseña y el servidor.

En esa misma función INSERT hemos especificado todas las variables POST  que debe insertar en la base de datos.

Como los datos de la base de datos para realizar la conexión los vamos a necesitar en casi todas las demás funciones hemos creado un archivo php llamado conexión con todos los parámetros y de ese modo con la función require hacemos que se incluya donde queramos y no hace falta que lo escribamos cada vez de nuevo.

El archivo a quedado así:

<?php

require('conexion.php');

$nombre=$_POST["nombre"];
$apellidos=$_POST["apellidos"];
$empresa=$_POST["empresa"];
$DNI=$_POST["dni"];
$Tel=$_POST["tel"];
$mail=$_POST["mail"];
$ciudad=$_POST["ciudad"];

//Inserció dels registres
$sql= "INSERT INTO formulario VALUES ('','$nombre','$apellidos','$empresa','$DNI','$Tel','$mail','$ciudad')";
mysqli_query($connect,$sql);
?>

Ahora ya teníamos la funcionalidad de insertar datos en la tabla desde los formularios, pero queríamos añadir una función que mostrara todos los datos registrados, para ello hemos creado un archivo con la función select llamado select.php La función select pide a la base de datos indicada (en este caso con require) que le muestre los datos grabados en la tabla especificada y los muestra por pantalla con un echo de la variable especificada.

Así ha quedado el archivo select.php con un poco de código html para que muestre los datos mas organzados.

<?php

require('conexion.php');
?>
<meta charset="utf-8"/>
<h1> INFORMACIÓN ENCONTRADA</h1>

<?php
//$id=$_GET['id'];

$sql= "SELECT id,nombre,apellidos,empresa,dni,tel,mail,ciudad FROM formulario ORDER BY id";
//$sql= "SELECT id,nombre,apellidos,empresa,dni,tel,mail,ciudad FROM formulario WHERE id='$id' ORDER BY id";
$resultat= mysqli_query ($connect,$sql);
while ($fila = mysqli_fetch_array ($resultat)) {

?>
<meta charset="utf-8"/>
<ul>
 <li>
 <h2>Identificación de usuario: <?php echo $fila ['id'];?></h2>
 </li>
 <li>
 Nombre:<?php echo $fila ['nombre'];?>
 </li>
 <li>
 Apellidos:<?php echo $fila ['apellidos'];?>
 </li>
 <li>
 Empresa:<?php echo $fila ['empresa'];?>
 </li>
 <li>
 Dni:<?php echo $fila ['dni'];?>
 </li>
 <li>
 <a href="modifica.php?id=<?php echo $fila ['id'];?>">Modificar</a>
 <a href="alerta.php?id=<?php echo $fila ['id'];?>">Eliminar</a>
</li>

</ul>
 <?php }?>
 <a href="index.html">volver</a>

No contentos con poder registrar datos y consultarlos decidimos poder editarlos y eliminarlos.

MARTES 13 DE FEBRERO DE 2018

Hoy volvemos a tener clase con Josep y seguimos acabando la aplicación web.

Ya tenemos la aplicación web funcionando, podemos insertar datos, consultarlos, modificaros y eliminarlos, además ahora estamos intentando aplicar una casilla de aviso legal para que los usuarios acepten antes de poder enviar los datos y de ese modo cubrirnos las espaldas  legalmente.

También hemos añadido una pregunta al eliminar un usuario de la base de datos para que no los elimine directamente.

Hemos personalizado un poco los menús pero no hemos avanzado mucho, ha ver si la clase de mañana es mas productiva.

MIÉRCOLES 14 DE FEBRERO DE 2018

Clase con Josep, seguimos con la aplicación web para gestión de usuarios hoy vamos a crear un usuario administrador para esta aplicación y ese usuario tendrá que coincidir con la base de datos, lo haremos con las funciones SELECT  id,Usuario,password FROM tabla de usuarios WHERE usuario AND password traducido al español seria:

Selecciona al (id,Usuario, password) de la tabla de la base de datos (Usuarios) donde el usuario y la contraseña sea el recogido en el formulario en la variable post y coincida en la base de datos.

Primero vamos ha crear un archivo nuevo llamado login.php  que dentro incluirá un formulario donde habrá dos campos, uno para el usuario y otro para la contraseña y por ultimo el botón de enviar.

Los inputs del formulario tendrán el mismo nombre que los campos creados en la base de datos, en nuestro caso era id, nombre, contraseña y mail, pero solo utilizamos nombre y contraseña.

El input del campo contraseña lo creamos con el atributo password para que no muestre los caracteres de la contraseña.
Como estamos trabajando directamente en el archivo php que incluirá la función de cotejar el usuario y pasword con la base de datos, hemos creado un atributo en etiqueta form action=”nombre del archivo que contiene el script” method=”POST

Ahora vamos a crear el nuevo archivo que contiene el script lo hemos llamado login1.php.

<?php
require('conexio.php'); // requiere que se cargue el archivo conexion.php
$usuari=$_POST['usuario']; // guarda el valor introducido en el campo usuario
$password=$_POST['contraseña']; // guarda el valor introducido en el campo contraseña
$url1="index.html"; // almacena una dirección de archivo en variable
$url2="login.html";// almacena una dirección de archivo en variable
$sql= "SELECT id,usuari,password FROM usuarios // selecciona unos valores dentro de una tabla
WHERE usuari='$usuario' AND contraseña='$contraseña'"; // 
$resultat= mysqli_query ($connect,$sql);
$fila=mysqli_fetch_array ($resultat);

if (mysqli_num_rows ($resultat)==1):
 date_default_timezone_set ('Europe/Madrid');
 $registro=date ('Y-m-d H:i:s');
 $id=$fila['id'];
 $sql_reg_aut="UPDATE usuarios SET registro='$registro' WHERE id='$id'";
 mysqli_query ($connect,$sql_reg_aut);
header ("location:$url1");


endif; // finaliza el if

header ("refresh:3;url=$url2"); //redirige a la url almacenada en la variable
echo "Usuario y/o contraseña incorrecta."; // muestra mensaje de error

?>

Hemos estado una hora buscando un fallo y resulta que al crear la tabla usuarios uno de los campos le dimos el nombre contraseña y eso era el error, pues no se pueden poner caracteres especiales como Ñ !!!

Otro error que nos hemos encontrado es al añadir otro campo en la tabla usuarios, es que al llamarlo TIME y después mas tarde llamarlo en una UPDATE lo entendía como una función y hemos tenido que cambiar de nombre el campo de la tabla usuarios.

JUEVES 15 DE FEBRERO DEL 2018

Clase con Albert, estamos mirando algunas web’s y comentando aspectos visuales.

Hablamos sobre anuncios de televisión y los diferentes aspectos del marketing audiovisual, también hemos analizado diferentes web’s y su diseño,usabilidad y distribución del contenido.

Hablamos de div es como un cajón.

  • <Header> (logo – nav)
  • <Footer>
  • <Nav> “navegación” (ul – li – a)
  • <Section>
  • <Aside> (barra lateral)
  • <Article>

Vamos a estructurar una web nueva que sera un blog.

Primer paso sacar papel y lápiz..

Dibujar estructura, barra lateral, menús .. etc

Comenzamos por dibujar el header, con el logo y el nav.

El cuerpo de la web esta dividido en dos bloques el principal (section) y la barra lateral(aside), principal 70% tamaña y la barra lateral 30% tamaño

Esto es un boceto informal de una estructura web.

curso programación web
Imagen cogida de Internet sketch estructura web mas técnica

Hemos hecho una estructura de cabecera, abajo podéis ver el código utilizado.

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Estructura web</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css?family=Kavivanar|Source+Sans+Pro:400,600i,700');
/* font-family: 'Source Sans Pro', sans-serif; */
/* font-family: 'Kavivanar', cursive; */
/* cabecera */
header {
background-color: yellow;
height: 60px;
}
header div {
/* background-color: red; */
display: inline-block;
width: 28%;
float: left;
}
header div img{
width: 200px;
}
header nav {
/* background-color: black; */
display: inline-block;
float: left;
width: 70%;
text-align: right;
}
/* Fin cabecera */
header nav ul{
list-style: none;
}

header nav ul li {
display:inline-block;
font-size: 20px;
font-family: 'Source Sans Pro', sans-serif;
}
</style>
<header>
<div>
<a href="index.html"><img src="GPANEL.png" alt="Panel de Gestion"></a>
</div>
<nav>
<ul>
<li><a href="inicio.html">Ingresar</li>
<li><a href="inicio.html"></li>
<li><a href="inicio.html">Ayuda</li>
</ul>
</nav>
</header>
</body>

</html>

Abajo podemos ver la vista desde el navegador.

curso de programacion web

y con esto hemos finalizado la clase de hoy.

16 DE FEBRERO 2018

Continuamos con el ejercicio del viernes pasado con el profesor David Flores.

La seguridad en sistemas operativos.

¿Que es LILO?

LILO es el sistema de arranque que utiliza linux, le dice que sistema operativo debe iniciar.

¿Que pasa cuando configuramos LILO en modo INIT SINGLE?

Si iniciamos en modo Single iniciaremos como super usuario (mono usuario) se usa para tareas de mantenimiento y para cambiar contraseñas, entre otras cosas.

¿Que pasa cuando iniciamos en modo RESTRICTED?

Cuando iniciamos en modo RESTRICTED estamos haciendo que no se pueda acceder en modo super usuario o que se pida la contraseña root para poder acceder, además de restringir privilegios.

¿Diferencias entre poder bloquear los terminales con XLOCK y VLOCK?

XLOCK se bloquea pantalla del usuario que estamos usando y requiere contraseña.

VLOCK Bloquea la sesión de usuario de manera virtual y pide contraseña, se puede aplicar a todos los usuarios.

¿Pon algunos ejemplos de ingeniería social que hayamos citado en clase?

Podemos obtener información muy valiosa a través de los meta datos de un archivo, tan solo descargando una imagen de alguien o documento de cualquier tipo, word, pdf..etc podemos saber cosas como versión del sistema operativo, nombre de usuario, impresora, software con el que se elaboro el documento y mas información muy valiosa para los hackers.

Podemos enviar una solicitud de amistad en alguna red social haciendo nos pasar por una chica atractiva y una vez nos acepte podemos ver toda su información de perfil.

Descarga he instala John the ripper y prueba de desencriptar un archivo md5.

 

Pega una captura de pantalla de vista hardware del programa Hash Suite.

Curso seguridad informática salt

Dentro de la pagina del programa descargado (Hash Suite) busca que recursos necesita para probar un millón de contraseñas.

Curso seguridad informática salt
Performance utilizada para probar un millón de contraseñas en Hash Suite

En el sistema operativo Linux se almacenan las contraseñas en el directorio etc/passwd, si alguien consigue hacerse con ese archivo y desencriptarlo ya tiene acceso a todas las credenciales, para corregir ese fallo de seguridad existe el método SHADOWS PASSWORDS, explica en que consiste esta funcionalidad.

Otro método cada día más utilizado para proteger las contraseñas de los usuarios el denominado Shadow Password u oscurecimiento de contraseñas. La idea básica de este mecanismo es impedir que los usuarios sin privilegios puedan leer el fichero donde se almacenan las claves cifradas; en el punto anterior hemos comentado que el fichero /etc/passwd tiene que tener permiso de lectura para todo el mundo si queremos que el sistema funcione correctamente. En equipos con oscurecimiento de contraseñas este fichero sigue siendo legible para todos los usuarios, pero a diferencia del mecanismo tradicional, las claves cifradas no se guardan en él, sino en el archivo /etc/shadow, que sólo el root puede leer. En el campo correspondiente a la clave cifrada de /etc/passwd no aparece ésta, sino un símbolo que indica a determinados programas (como /bin/login) que han de buscar las claves en /etc/shadow, generalmente una x:

toni:x:1000:100:Antonio Villalon,,,:/export/home/toni:/bin/sh

texto de ibiblio.org

Explica la estructura de archivos en MAC.

la estructura de directorios de nuestro sistema operativo Mac OS X:

  • /Aplications  – Contiene Aplicaciones
  • /Developer    – Herramientas de desarrollo
  • /Library         – Librerías para que el sistema funcione
  • /Network      – Achivos de red
  • /System        – contiene archivos de sistema
  • /Users           – Contiene las cuentas de Usuario
  • /Volumes     – Contiene información sobre los discos y unidades montadas
  • /Bin               – Archivos relacionados con el arranque y las operaciones básicas del sistema
  • /Etc               – Configuración local del sistema
  • /Dev              – Ficheros de dispositivo, representan periféricos como teclado, ratón, etc.
  • /Usr               – incluye sub directorios que contiene información sobre la configuración del sistema.
  • /Sbin             – Otro directorio que contiene binarios esenciales para la administración del sistema.
  • /Tmp            – Contiene archivos temporales, cache, etc.
  • /Var             – Directorio de datos variables, contiene archivos cuyo contenido varía mientras el sistema se ejecuta.

Información contrastada en la web Applesfera 

Compara con los directorios mencionados anteriormente, el equivalente en los siguientes casos para Linux.

MAC: /USERS             LINUX: /HOME

MAC: /VOLUME        LINUX: /MEDIA

MAC: /SYSTEM          LINUX: /BOOT

Final del ejercicio!

Hemos comenzado las practicas con Linux en mi caso trabajo con una maquina virtual con la ultima iso de Ubuntu 64 versión de escritorio.

Comandos para ver los permisos de ficheros asignados.

ls -la

Permisos de usuarios representación por iniciales

( d )                (r w x)         (r – x)       (r – x)

directorio     usuarios     Grupos      otros
Alumno     Alumnos

Es importante ver los permisos para poder prevenir y reparar posibles problemas.

curso linux salt
ver permisos ls -la

Tipos de usuarios:

ROOT:
Tiene privilegios sobre todo el sistema, es el único usuario que se identifica con el numero 0

USUARIOS ESPECIALES:

SYSTEM NEWS, tienen reservada la id del 0 al 100 son creados para funciones propias del sistema.

USUARIOS NORMALES:
Todos tienen un directorio de trabajo en /HOME y su id comienza a partir del 500

Comando para cambiar permisos a un archivo:

chmod es la comanda que utilizamos para asignar permisos a un archivo y seguido de un numero se le dice que permisos se debe aplicar, para saber que permisos se asignan a cada numero se utiliza lenguaje binario donde uno es verdadero y 0 es falso, en la posición 0 todos son falsos o sea no hay ningún permiso y en la posición 7 todos son verdaderos y por eso tiene todos los permisos asignados r w x. Donde r es read, w write, x ejecutar traducido al español.

0-000- – – –
1-001- – – x
2-010- – w –
3-011- – w x
4-100- r – –
5-101- r – x
6-110- r w –
7-111- r w x

la configuración mas segura es la 740

También se puede aplicar permisos a un usuario en concreto con la comanda chmod, se aplica del siguiente modo chmod u-x le estamos diciendo u de usuario – de restar x ejecución, le hemos quitado permisos de ejecución al usuario iniciado.

De igual manera si hacemos chmod o-x le estaremos quitando permisos de ejecución a los usuarios “otros”.

si queremos asignar permisos y no tenemos suficientes privilegios podemos utilizar permisos de administrador para una sola comanda agregando la palabra su delante de chmod (pedirá contraseña usuario.

También podemos cambiar el propietario de los permisos de una carpeta con el comando chown seguido del nombre de usuario y el nombre del fichero o directorio

curso linux salt
chmod cambiar permisos

la manera de moverse entre directorios por medio de terminal es / raíz del sistema ./ sirve para ir al directorio anterior.

Linux diferencia minúsculas de mayúsculas en archivos, usuarios y todo el contenido del sistema.
cuando escribimos comandas al darle al tabulador termina de escribirnos.

Sobre Marc Oliveras 115 Artículos
Técnico en sistemas y redes informáticas, blogger, youtuber & gamer

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.