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
  • serg guzman

    Hola una consulta me ha gustado mucho el cuadro de comentario (este) como lo puedo usar en mi web, usas algun script algo asi, me puedes decir porfa mi correo sergioandguzman@gmail.com desde ya gracias

    • Disqus.com desde ahi puedes insertar uno…

      • serg guzman

        te pasaste perro gracias recomiendo tu pagina buen aporte y lo mas importa un buen servicio a la hora de responder 😀

  • Gundo

    Hola, antes que nada gracias por compartir, tengo una consulta el código arriba en mención no realiza todo lo que la demostración hace, llama a un archivo login.php pero ese archivo no lo incluyes… en otros ejemplos incluyes hasta la estructura de la Base de Datos y en este No. o es que tiene una segunda parte, a la espera de su ayuda.

  • Victor Gomez

    hermano donde se puede descargar el codigo completo muy bueno el login