Lunes 12 de marzo de 2018

Clase con Josep, hemos hecho un require para incluir el archivo funcions.php y dentro del funcions.php hemos almacenado una variable que almacena el titulo, y después en el apartado title le hemos puesto un echo de esa variable, todo con el objetivo de que se ponga el titulo de forma automática y que podamos modificar todos los títulos de una sola vez.

Hemos creado un div y le hemos dado algún estilo y un titulo, ahora ya tenemos definido el espacio que utilizaremos para el index de la aplicación que será el que mostrara las opciones de insertar y mostrar.

cursos programacion gratis gerona — index panel de gestión

Después hemos creado un formulario que recoja los datos que queremos insertar en la base de datos, en este caso el formulario tienen 13 campos le hemos añadido algún estilo pero muy básico.

cursos programación gratis salt girona — formulario APP gestión de clientes

Ahora hacemos el archivo instert que es el que recogerá todos los datos enviados del formulario y los insertara en la base de datos.

<?php
// APP GESTIÓ V.1.0
// Autor: Marc Oliveras Guerrero
// Contacte: freeboxinfo@gmail.com
// Reservados todos los derechos.
//recoje todos los datos del formulario, los inserta en la base de datos y redirige al listado
//si por algun motivo no es correcto redirige a una pagina de error

require ('funcions.php');// llama al archivo funcions.php que contienen los datos necesarios para conectarse a la base de datos
//recogemos los datos del formulario por POST y eliminamos posibles inseciones de codigo html y php
$nom= strip_tags ($_POST['nom']);
$cognoms= strip_tags ($_POST['cognoms']);
$DNI=strip_tags($_POST['DNI']);
$apostal=strip_tags($_POST['apostal']);
$CP=strip_tags($_POST['CP']);
$poblacio=strip_tags($_POST['poblacio']);
$provincia=strip_tags($_POST['provincia']);
$mail=strip_tags($_POST['mail']);
$telefon1=strip_tags($_POST['telefon1']);
$telefon2=strip_tags($_POST['telefon2']);
$naixement=strip_tags($_POST['naixement']);
$sexe=strip_tags($_POST['sexe']);
$professio=strip_tags($_POST['professio']);

//la funcion siguiente inserta los datos en la base de datos 
 $sql= "INSERT INTO VALUES ('id','$nom','$cognoms','$DNI','$apostal','$provincia','$mail','$telefon1','$telefon2','$naixement','$tsexe','$professio')";
 mysqli_query($connect,$sql);
//header("location: index.html");
}
else {
 # code...
echo 'error';
}
?>

<h2>Datos registrados correctamente</h2>

<a href="index.php">volver</a>

Con la instrucción de arriba recoge los datos de formulario y los inserta en la tabla de BBDD asignada, como novedad hemos añadido la funcion strip_tags para que omita todas las etiquetas html y código php de manera que sea un formulario mas seguro.
Además hemos añadido else para que en caso de no insertarse correctamente nos muestre un mensaje de error y de igual manera si hace la función correctamente nos muestra otro mensaje.

Martes 13 de marzo de 2018

Clase con Albert nos enseña un libro de arte creado con programación de manera aleatoria procesing generative desing, es muy curioso.

vamos a repasar responsiva menos mal por que no asistí a clase ese día.. jejeje

con esta etiqueta le estamos diciendo que se adapte al width del dispositivo que sea, después ya vamos al css que en el caso del responsive podemos decirle que en móvil se vea de una manera y que en otros dispositivos se vea diferente

@media screen(min-width 776px) {

.clase que sea {

con los estilos que queramos}

}

Siempre comenzamos por los estilos pequeños.

hemos hecho que pasado un tamaño de pantalla asignado cambie de color con un sencillo código de estilos.

Estamos hablando sobre la ubicación de los menús y la distribución de los contenidos en la web, abajo podéis ver unas imágenes que muestran cual es la zona natural mas usada de la pantalla de 4 dispositivos.

cursos programacion girona — Zona natural postura dedo en móvil

Ahora vamos hacer bootstrap.

Es un framework totalmente gratis, nos permite hacer web’s responsive con muchos estilos predefinidos.

Tenemos que pensar las web’s y fragmentarlas en segmentos de 12.

Tiene muchísimos frameworks que son como estructuras de etiquetas predefinidas que ya hacen una función especifica, desde alinear textos a crear tablas, menús, formularios, headers, ventanas emergentes, sliders, etc.. aunque en algunas ocasiones necesita de javascript para funcionar.

El la web podemos encontrar en su documentación todo tipo de etiquetas clases y funciones para hacer casi cualquier cosa.

Hemos descargado bootstrap de la pagina oficial aquí LINK

lo hemos descomprimido y de la carpeta css hemos copiado los archivos bootstrap.min.css y bootstrap.min.css.map en la carpeta css de nuestro proyecto. Hemos creado un archivo html nuevo llamado botstrap.html y hemos linkado el estilo bootstrap.min.css.

Ahora creamos una nueva hoja de estilos llamada bootstrap1.css y la lincamos.

Ahora vamos a crear el menú dentro de body ponemos <header> y dentro los div’s

De momento lo que he visto es que creamos la estructura igual pero después solo dando una clase al div, al nav o la etiqueta que sea ya te hace un estilo predefinido.

Como se puede apreciar cuando reducimos el tamaño a móvil ocupa 12 columnas tanto el logo como el menú.

Miércoles 14 de marzo de 2018

Clase con el profesor Josep, volvemos a trabajar en la aplicación para gestión de clientes, tenemos problemas por que no nos inserta los formularios en la tabla, aun que si que ejecuta toda la secuencia correctamente.

Hemos pasado mucho rato de la clase con errores al insertar datos en la tabla tal y como he mencionado al principio.

al final hemos optado por trabajar en un hosting externo y subir todos los datos ahí, de ese modo nos ha funcionado a todos por igual, ya que no dependemos de versiones de php ni otras posibles diferencias de software entre diferentes dispositivos que usamos en clase.

hemos creado una base de datos y le hemos importado la que estábamos trabajando en localhost con wamp, después hemos tenido que renombrar la conexion ya que el hosting crea una id delante del nombre de la base de datos y del usuario.

aquí podéis ver el código usado para el insert que funciona bien he inserta los datos correctamente en la base de datos.

<?php
ob_start();
/*APP CLIENTS
Autor: Josep Lluís Vidal
Contacte: info@solucions360.cat
Versió 1.0
Reservats tots els drets.

Recull les dades del formulari i les inserta a la base de dades
i redirigeix al llistat de clients
Si no les pot insertar redirigeix a una pàgina d'error.
*/

require ('funcions.php'); //Crida funcions.php que conté info de connexió BBDD

/*Recollim les dades del formulari per POST
i eliminem possible contingut HTML i PHP <?php ?>
*/

$nom= strip_tags($_POST['nom']);
$cognoms= strip_tags($_POST['cognoms']);
$DNI= strip_tags($_POST['DNI']);
$apostal= strip_tags($_POST['apostal']);
$CP= strip_tags($_POST['CP']);
$poblacio= strip_tags($_POST['poblacio']);
$provincia= strip_tags($_POST['provincia']);
$mail= strip_tags($_POST['mail']);
$telefon1= strip_tags($_POST['telefon1']);
$telefon2= strip_tags($_POST['telefon2']);
$naixement= strip_tags($_POST['naixement']);
$sexe= strip_tags($_POST['sexe']);
$professio= strip_tags($_POST['professio']);

//Inserim dades en la BBDD
//$sql="INSERT INTO app_dades SET nom='$nom','$cognoms'";
//mysqli_query ($connect,$sql);

$sql="INSERT INTO app_dades VALUES ('','$nom','$cognoms','$DNI','$apostal','$CP','$poblacio','$provincia','$mail','$telefon1','$telefon2','$naixement','$sexe','$professio')";
mysqli_query ($connect,$sql);

//$sql="INSERT INTO app_dades VALUES ('','$nom','$cognoms','$DNI','$apostal','$CP','$poblacio','$provincia','$mail','$telefon1','$telefon2','$naixement','$sexe','$professio')";
//mysqli_query ($connect,$sql);

echo 'OK';
header ("refresh:5;url=formulari_insert.php");

?>

No hemos tenido tiempo hacer nada mas por que hemos estado mucho rato intentando resolver el problema de inserción, la programación en php es así pasaremos muchas horas buscando errores que pueden resultar absurdos pero te inpiden que funcione la aplicación.

hasta mañana!

Jueves 15 de maro de 2018

Clase con Albert, continuamos con bootstrap.

Boxed se centra el contenido de la web, full width expande todo el tamaño de la web.

El primer div se aplicara la clase row para que sea el div padre.

Estoy viendo que con bootstrap se trabaja con clases y en la documentación de la web tenemos las clases especificadas para cada tipo de circunstancia, ya sea para el header, imágenes, menús, etc..

Esto es lo que hemos estado haciendo (en mi caso) hemos trabajado con librerías bootstrap y hemos hecho un modelo de web blog con barra lateral todo responsive!

Viernes 16 de marzo de 2018

Clase con David flores, vamos a tocar el tema de conexiones remotas.

La conexión remota sirve para utilizar un ordenador pero sin estar presente físicamente, podremos acceder de manera remota a su escritorio y utilizar el sistema como si estuviéramos delante mismo.

Hay diferentes tipos de conexión remota.

La normal:

Cliente servidor, se entra desde un ordenador a otro, uno hace la función de cliente y el otro de servidor, se hace mediante IP y por easy connect (solo en Windows) se tiene que autorizar la petición de ayuda.

La invertida:

Team viewer hace este tipo de conexión remota, se basa en conexión cliente/ servidor/ administrador/cliente, es un poco mas seguro ya que el administrador es un programa que hace de servidor intermedio y da mas informacion acerca de los equipos.

La conexión VPN:,

Funciona Cliente servidor, los datos van encriptados, es como estar trabajar desde una red de área local (LAN) es la mas segura de todas, se suele hacer por hardaware a través de un firewall.

Ahora vamos a ver unas demostraciones de control remoto con team viewer.