otros ojos: Formulario captura datos

Formulario para capturar datos de usuario con los campos Nombre del estudiante, Tabla, Codigo, Celular, Correo, Contrasena. La tabla en la que vamos agregar los datos ya se ha creado previamente.

<html>
<head>
<title>Registro Usuarios</title>
</head>
<body>
<h1> REGISTRO DE USUARIOS </h1>

<?php
echo('<br>'. '<br>');
?>

<form name="id_nombre1" id="identidad1" action="insertar.php" method="post">

Nombre del estudiante:<br>
<input type="text" name="nombre_est" id="nombre_est"> <br>

Tabla:<br>
<input type="text" name="tabla_est" id="tabla_est"> <br>

Codigo*:<br>
<input type="text" name="codigo_est" id="codigo_est"> <br>

Celular:<br>
<input type="text" name="celular_est" id="celular_est"> <br>

Correo<br>
<input type="text" name="correo_est" id="correo_est"> <br> <br>

Contrasena<br>
<input type="text" name="clave1" id="clave1"> <br> <br>

<input type="submit" name="enviar1" id="enviar1" value="Registrarme">
<p>*: El codigo es un numero de 5 digitos que debe inventarse el usuario</p>
</form>
</body>

</html>

Con el siguiente código insertamos algunos de los datos capturados en el formulario anterior, observar que parte del código está destinado a comprobar que llegaron los datos de la página anterior, comprobar la conexión a la base de datos y verificar que los datos fueron ingresados correctamente en la tabla

<html>

<head>

<title>Bienvenido</title>

</head>

<body>

<?php

$nombre_est=$_POST['nombre_est'];

$nombre_tab=$_POST['tabla_est'];

$codigo_est=$_POST['codigo_est'];

$celular_est=$_POST['celular_est'];

$correo_est=$_POST['correo_est'];

$clave_est=$_POST['clave1'];

echo ($nombre_est. '<br>'. $nombre_tab. '<br>'. $codigo_est. '<br>'. $celular_est. '<br>' );

$conectado=@mysql_connect("localhost","root","");

$consulta=mysql_select_db('alumn', $conectado);

if($consulta)

{

echo ("si");

}

else

{

echo ("no");

}

$conectado=@mysql_connect("localhost","root","");

$consulta= " INSERT INTO `alumn`. `listo` (`codigo_est`, `nombre_est`, `cel_est`, `correo_est`) VALUES ( '$codigo_est', '$nombre_tab', '$celular_est', '$correo_est'); ";

$hacerconsulta=mysql_query($consulta, $conectado);

if($hacerconsulta)

{

echo ("si");

}

else

{

echo ("no");

}

</body>

</html>

Desafio 1

Ingresar usuario con los siguientes datos:

NOMBRE
CELULAR
CORREO
CONTRASEÑA

Etapas

- Formulario para ingresar datos.
- Formulario para iniciar sesion.

Formulario de ingreso de datos

<div class="form">

      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>

      <div class="tab-content">
        <div id="signup">
          <h1>Sign Up for Free</h1>

          <form action="/" method="post">

          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>

            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>

          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>

          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>

          <button type="submit" class="button button-block"/>Get Started</button>

          </form>

        </div>

        <div id="login">
          <h1>Welcome Back!</h1>

          <form action="/" method="post">

            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>

          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>

          <p class="forgot"><a href="#">Forgot Password?</a></p>

          <button class="button button-block"/>Log In</button>

          </form>

        </div>

      </div>

</div> 

Hoja de estilo para el formulario de ingreso de datos

*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #c1bdba;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
transition: 0.5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, .9);
padding: 40px;
max-width: 600px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, .3);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, .25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: 0.5s ease;
}
.tab-group li a:hover {
background: #179b77;
color: #fff;
}
.tab-group .active a {
background: #1ab188;
color: #fff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, .5);
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: #1ab188;
}
label.active {
transform: translateY(50px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #fff;
}
input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #fff;
border-radius: 0;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 40px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
background: #1ab188;
color: #fff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}

Archivo JS

$('.form').find('input, textarea').on('keyup blur focus', function (e) {

var $this = $(this),
      label = $this.prev('label');

    if (e.type === 'keyup') {
            if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
        if( $this.val() === '' ) {
            label.removeClass('active highlight');
            } else {
            label.removeClass('highlight');
            }
    } else if (e.type === 'focus') {

      if( $this.val() === '' ) {
            label.removeClass('highlight');
            }
      else if( $this.val() !== '' ) {
            label.addClass('highlight');
            }
    }

});

$('.tab a').on('click', function (e) {

e.preventDefault();

$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');

target = $(this).attr('href');

$('.tab-content > div').not(target).hide();

$(target).fadeIn(600);

});

Uso de validacion de datos

<?php
$patron_cel = '/^[3][0-9]{9}$/';
$patron_num = '/^[1-9]+[0-9]*$/';
$patron_abc = '/^[a-zA-ZñÑ\s]+$/';

if ($_POST['origen'] == "registro") {
    $usuario=$_POST['usuarios'];
    $clave=$_POST['claves'];
}else{
    session_start();
    $usuario = $_SESSION['usuario'];
    $clave = $_SESSION['clave'];
}
$clave = filter_var($clave, FILTER_SANITIZE_SPECIAL_CHARS, FILTER_FLAG_STRIP_LOW);

if($usuario === '' || !preg_match($patron_abc, $usuario)) {
    header("Location: http://printya.co/");
}else{

    $conexion = new mysqli('mysql.hostinger.co', 'u317439100_dezyx', 'vuXadabeZy', 'u317439100_pyseq');

    $proceso = $conexion->query("SELECT Perfil FROM Colaboradores WHERE Nombre= '$usuario' AND Clave = '$clave' ");
    mysqli_close($conexion);

    if ($resultado=mysqli_fetch_array($proceso)){

        if($resultado[0]=="Manager"){
            session_start();
            $_SESSION['usuario'] = $usuario;
            $_SESSION['clave'] = $clave;
            $_SESSION['perfil'] = "Manager";
            header("Location: http://printya.co/sesion-administrador/");
        }elseif ($resultado[0] == "Front Desk") {
            session_start();
            $_SESSION['usuario'] = $usuario;
            $_SESSION['clave'] = $clave;
            $_SESSION['perfil'] = "Front Desk";
            header("Location: http://printya.co/sesion-recibidor/ ");
        }elseif ($resultado[0] == "Cutter"){
            session_start();
            $_SESSION['usuario'] = $usuario;
            $_SESSION['clave'] = $clave;
            $_SESSION['perfil'] = "Cutter";
            header("Location: http://printya.co/sesion-cortador/");
        }
    }
    else{
        header("Location: http://printya.co");
    }
}
Registro Usuarios
Ejemplos de uso de validacion de datos

if(trim($_POST['email']) === '') {
            $emailError = 'Por favor ingrese su email.';
            $hasError = true;
        } else if (!preg_match('/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/', trim($_POST['email']), $coincidencias)) {
            $emailError = 'Ha ingresado un email invalido.';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }

        if(trim($_POST['nombre']) === '' || !preg_match($patron_abc, $_POST['nombre'])) {
            $nombreError = 'Por favor ingrese su nombre';
            $hasError = true;
        } else {
            $nombre = trim($_POST['nombre']);
        }

        if(trim($_POST['celular_cli']) === '' || !preg_match($patron_cel, $_POST['celular_cli'])) {
            $celular_cliError = 'Por favor ingrese su numero celular';
            $hasError = true;
        } else {
            $celular_cli = trim($_POST['celular_cli']);
        }

        if(trim($_POST['cantmaq']) === '' || !preg_match($patron_num, $_POST['cantmaq'])) {
            $cantmaqError = 'Por favor ingrese la cantidad de maquetas.';
            $hasError = true;
        } else {
            $cantmaq = trim($_POST['cantmaq']);
        }
Registro Usuarios
Registro Usuarios
Registro Usuariosencriptar las contraseñas

mysql> INSERT INTO usuarios VALUES('usuario',MD5('contraseña'));

Control Usuario

<?php
/*
Template Name: Control usuario
*/
include 'controlusr.php';
?>

<?php

$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$correo = $_POST['correo'];
$contrasena = $_POST['contrasena'];

$nueconsul = new consulta;
$nombretabla = "Usuario";
$campos = " `Usuario`, `Ausuario`, `Email`, `Clave` ";
$valores = " '$nombre', '$apellido', '$correo', '$contrasena' ";
$ingusr = $nueconsul->insertar($nombretabla, $campos, $valores);

?>

otros ojos

viernes, 13 de mayo de 2016

Formulario captura datos

No hay comentarios:

Publicar un comentario

Buscar este blog