Login Php Mysql Panel de administración de usuario …

Saludos esta vez Vamos a crear un Login php Mysql Panel de Administración de usuario, la cual nos permitirá mantener un perfil y a su vez subir Fotos y revisarlas dentro de un panel de administración. Para el estilo e utilizado Material Design de google (MDL) .  Utilizando un poco de Javascript + la librería de jQuery para crear los efectos dentro del panel de administración . Su registro deberá ser activado mediante correo electrónico válido .  Dentro del panel se podrá administrar sus fotos privadas , las cuales serán visibles solo para usted (cabe recalcar que esto no es una red social ni pretende sustituir a tal). Puede revisar la políticas de privacidad dentro de bloguero-ec para cualquier duda..  Proyecto basado en php -> Mysqli -> jQuery por lo tanto deberá tener un poco de conocimiento de estos .

Conexion.php .- Nos encargaremos de conectar la base de datos ..

<?php
// validamos el request para el login del sitio.
if (!isset($_SESSION)) {
  session_start();
}

$con = new mysqli("localhost","root","","basedatos");

// chequeamos la conexion
if (mysqli_connect_error()) {
    die('Falló al conectar a MySQL: (' . mysqli_connect_errno() . ') '
            . mysqli_connect_error());
}

//chequeamos el archivo include
// nos sevirá para validar datos dentro del sistema 
if (is_file ('inc/include.php')){
     include ('inc/include.php');
    }
    else {
    include ('../inc/include.php');
}

?>

Funciones.php .- Se encargará de crear funciones de validación para el sistema.

<?php

    //funcion para limpiar variables
    function limpiar($var)
    {
        $var = trim($var);
        $var = htmlspecialchars($var);
        $var = str_replace(chr(160),'',$var);
        return $var;
    }
  
    /*generando el codigo aleatorio para envio de email*/
    function generarPassword($longitud, $tipo=0)
        {
            //creamos la variable codigo
            $codigo = "";
            //caracteres a ser utilizados
            $caracteres="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            //el maximo de caracteres a usar
            $max=strlen($caracteres)-1;
            //creamos un for para generar el codigo aleatorio utilizando parametros min y max
            for($i=0;$i < $longitud;$i++) { $codigo.=$caracteres[rand(0,$max)]; } //regresamos codigo como valor return $codigo; } /*mostramos tiempo real de registro*/ function MostrarTime($t) { $t = strtotime($t); if(date('d')==date('d',$t)) { return date('h:i A',$t);} else{ return date('F jS Y h:i A',$t);} // Si se registro hoy muestre hora y minuto // caso contrario muestre fecha completa } /*enviamos email*/ function send_mail($from,$to,$subject,$body) { $headers = ''; $headers .= "From: $from\n"; $headers .= "Reply-to: $from\n"; $headers .= "Return-Path: $from\n"; $headers .= "Message-ID: <" . md5(uniqid(time())) . "@" . $_SERVER['SERVER_NAME'] . ">\n";
            $headers .= "MIME-Version: 1.0\n";
            $headers .= "Date: " . date('r', time()) . "\n";
            $headers .= "Content-type: text/html; charset=utf-8 " ."\n";
        
            mail($to,$subject,$body,$headers);
        }
    //eliminamos espacios en blanco
    function limpia_espacios($cadena)
        {
            $cadena = str_replace(' ', '_', $cadena);
            return $cadena;
        }
?>

jqueri.ui.shake.js .- Este script nos permitirá validar el formulario con animación Shake , tomando un efecto agradable al usuario.

(function($) {
    $.fn.shake = function(o) {
        if (typeof o === 'function')
            o = {callback: o};
        // configuramos opciones
        var o = $.extend({
            direction: "left",
            distance: 20,
            times: 3,
            speed: 140,
            easing: "swing"
        }, o);

        return this.each(function() {

            // Crea elementos
            var el = $(this), props = {
                position: el.css("position"),
                top: el.css("top"),
                bottom: el.css("bottom"),
                left: el.css("left"),
                right: el.css("right")
            };

            el.css("position", "relative");

            // ajustes
            var ref = (o.direction == "up" || o.direction == "down") ? "top" : "left";
            var motion = (o.direction == "up" || o.direction == "left") ? "pos" : "neg";

            // Animacion
            var animation = {}, animation1 = {}, animation2 = {};
            animation[ref] = (motion == "pos" ? "-=" : "+=")  + o.distance;
            animation1[ref] = (motion == "pos" ? "+=" : "-=")  + o.distance * 2;
            animation2[ref] = (motion == "pos" ? "-=" : "+=")  + o.distance * 2;

            // Animar
            el.animate(animation, o.speed, o.easing);
            for (var i = 1; i < o.times; i++) { // Shakes
                el.animate(animation1, o.speed, o.easing).animate(animation2, o.speed, o.easing);
            };
            el.animate(animation1, o.speed, o.easing).
            animate(animation, o.speed / 2, o.easing, function(){ // Last shake
                el.css(props); // Restore
                if(o.callback) o.callback.apply(this, arguments); // Callback
            });
        });
    };
})(jQuery);

scripts.js .- Este script pertmitirá validar del lado del cliente el formulario de sesión y registro.

  $("button#submit").click(function() {
    
    if( $("#correo").val() == "" || $("#password").val() == "")
        $("div#msg").html("<div class='ojo'>Ingrese su email y contraseña</div>"),
        $('#caja_login').shake();


    else
        $.post( $("#login").attr("action"),
                $("#login :input").serializeArray(),
                function (data) {
                    $("div#msg").html(data),
                    $('#caja_login').shake();
                    });
        
        $("#login").submit( function(){
        return false;
        });
    });
  

  $("button#registro").click(function() {
    
    if( $("#correo_reg").val() == "" || $("#nick_reg").val() == "" || $("#pass_reg").val() == "" || $("#pass2_reg").val() == "")
        $("div#msg-reg").html("<div class='ojo'>Ingrese los datos requeridos.</div>"),
        $('#caja_registro').shake();


    else
        $.post( $("#registro").attr("action"),
                $("#registro :input").serializeArray(),
                function (data) {
                    $("div#msg-reg").html(data),
                    $('#caja_registro').shake();
                    });
        
        $("#registro").submit( function(){
        return false;
        });
    });

formulario de inicio de sesión .- Este es el formulario de inicio de inicio de sesión donde mostraremos las alertas enviadas del lado del servidor y cliente.

login php mysql panel de administracion

<!--main class="mdl-layout__content">-->
    <div class="page-content">
        <div class="mdl-grid">
            
            <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
                <div id="caja_login">
                    
                    <h4>Inicie sesión</h4>
                    <form id="login" method="post" action="<?php echo URL; ?>login.php" >
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label for="input_email" class="mdl-textfield__label">Email</label>
                        <input type="email" class="mdl-textfield__input" id="correo" name="correo_user" autocomplete="off" />
                        <span class="mdl-textfield__error">Ingrese un correo válido</span>
                    </div>
                
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label for="input_password" class="mdl-textfield__label">Password</label>
                        <input type="password" class="mdl-textfield__input" id="password" name="pass_user" />
                        <span class="mdl-textfield__error">Íngrese solo letras y números</span>
                    </div>

                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label disabled">
                        <label for="input_password" class="mdl-textfield__label">Codigo de verificación</label>
                        <input type="password" pattern="[A-Z,a-z,0-9]*" class="mdl-textfield__input" id="cod_ver" name="cod_ver" />
                        <span class="mdl-textfield__error">Íngrese solo letras y números</span>
                    </div>
                    <button id="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
                    Login
                    </button>
                    <!--si encontramos errores los mostramos-->
                    <div id="msg"></div>

                    </form>
                    
                </div><!--caja-login--> 
            </div><!--mdl-csll-->

        </div><!--mdl-grid-->
    </div><!--page content-->
<!--/main>-->

Formulario de registro.– Este es el formulario de registro donde se validará la información enviada por el usuario.
login php mysql panel de administracion

<!--main class="mdl-layout__content">-->
    <div class="page-content">
        <div class="mdl-grid">
            
            <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
                <div id="caja_registro">
                    
                    <h4>Registrese</h4>
                    <form id="registro" method="post" action="registro.php">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label for="input_email" class="mdl-textfield__label">Email</label>
                        <input type="email" class="mdl-textfield__input" id="correo_reg" name="correo_user" autocomplete="off" />
                        <span class="mdl-textfield__error">Ingrese un correo válido</span>
                    </div>

                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label for="input_email" class="mdl-textfield__label">nombre</label>
                        <input type="text" class="mdl-textfield__input" pattern="[A-Z,a-z ]*" id="nick_reg" name="nick_user" autocomplete="off" />
                        <span class="mdl-textfield__error">Ingrese solo letras</span>
                    </div>

                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label for="input_password" class="mdl-textfield__label">Ingrese su password</label>
                        <input type="password" pattern="[A-Z,a-z,0-9,.]*" class="mdl-textfield__input" id="pass_reg" name="pass_user" />
                        <span class="mdl-textfield__error">Numeros letras y punto</span>
                    </div>

                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <label for="input_password" class="mdl-textfield__label">Vuelva a ingresar su password</label>
                        <input type="password" pattern="[A-Z,a-z,0-9,.]*" class="mdl-textfield__input" id="pass2_reg" name="pass2_user" />
                        <span class="mdl-textfield__error">Numeros letras y punto</span>
                    </div>

                    <button id="registro" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
                    Registro
                    </button>
                    <!--mostramos errores de registro-->
                    <div id="msg-reg"></div>

                    </form>
                    
                </div><!--caja-login--> 
            </div><!--mdl-csll-->
        
        </div><!--mdl-grid-->
    </div><!--page content-->
<!--/main>-->

header.php .- Incluirá los estilos.css a utilizar para el sistema.

<!DOCTYPE html>
<html>
<head lang="es">
    <meta charset="UTF-8">
    <title>LOGIN PHP MYSQL PANEL de ADMINISTRACION.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo URL; ?>/css/mdl.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="<?php echo URL; ?>/css/estilo.css">
     

</head>
<body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

        <header class="mdl-layout__header">
                <div class="mdl-layout__header-row">
                    <!-- Left aligned menu below button -->
                <button id="demo-menu-lower-left"
                        class="mdl-button mdl-js-button mdl-button--icon">
                  <i class="material-icons">more_vert</i>
                </button>
                
                <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                    for="demo-menu-lower-left">
                  <li class="mdl-menu__item"><a href="<?php echo URL; ?>registro/">registro</a></li>
                  <li class="mdl-menu__item"><a href="<?php echo URL; ?>">Inicio</a></li>
                  <li disabled class="mdl-menu__item">Panel</li>
                </ul>
                </div><!--mdl-layout__header-row-->
        </header><!--mdl-layout__header-->

footer.php .- Incluirá los archivos js y el pie de página del sistema de login.

     <footer class="mdl-mini-footer">
        <div class="mdl-mini-footer__left-section">
        <div class="mdl-logo"><img src="<?php echo URL; ?>/img/bloguero_mini.png"></div>
            <ul class="mdl-mini-footer__link-list">
                <li><a target="_blank" href="http://www.bloguero-ec.com/mantenimiento-y-reparacion-de-computadoras">Contáctenos</a></li>
                <li><a target="_blank" href="http://www.bloguero-ec.com/licencia">| Licencia de producto</a></li>
                <li><a target="_blank" href="http://www.bloguero-ec.com/politica-de-privacidad">| Términos & Políticas 2016</a></li>
            </ul>
        </div>
     </footer>

    </div><!--mdl-layout-->

    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="<?php echo URL; ?>/js/script.js"></script>
    <script type="text/javascript" src="<?php echo URL; ?>/js/jquery.ui.shake.js"></script>
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
    <script src="https://js.pusher.com/3.1/pusher.min.js"></script>
    <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('eb4cf8934399c867cb43', {
      encrypted: true
    });

    var channel = pusher.subscribe('test_channel');
    channel.bind('my_event', function(data) {
      alert(data.message);
    });
  </script>
</body>
</html>
Demo ver 1.0

 

Comprar Ahora ver1.0

 

Demo ver 1.1

 

Comprar Ahora ver1.1