Bloguero-ec

Codigo Fuente, programación, Diseño Web

Login Mvc Php Mysql Ajax.

mayo 28, 2017
codigo-fuente,login,mvc,mysql,php


Etiquetas: , , , ,


Saludos amigos, esta vez les traigo un Login Mvc php mysql. Un simple inicio de sesión basado en la arquitectura mvc(Modelo vista controlador), utilizando un estilo simple y sencillo, Se utiliizará ajax para el envío del formulario, No consta de un formulario de registro, por el momento es un demo que demostrará como iniciar sesión mostrando los errores por defectos sin recargar toda la página.

Creando nuestro Login Mvc php mysql.

Para la creación de este pequeño sistema, primero crearemos directorios para identificar nuestros archivos. (vease imagen)

Se han adicionado dos directorios llamados core y public . van a realizar acciones a las llamadas.

Empezamos con los archivos a utilizar:

Index.php.- Desde la raiz del directorio, el index cargará los controladores necesarios.

<?php
$Extencion = substr(strrchr(__FILE__, '.'), 1);
//lamamos a core 
require('core/core.'. $Extencion);
//obtenemos por url el controlador
if(isset($_GET['view'])) {
   //buscamos en la carpeta controlador el controlador respectivo
  if(file_exists('controller/' . strtolower($_GET['view']) . 'Controller.'. $Extencion)) {
    include('controller/' . strtolower($_GET['view']) . 'Controller.'. $Extencion);
  } else {
    //si no existe mostramos un error
    include('controller/errorController.php');
  }
} else {
  //si no llamamos a ningun controlador mostramos el index por defecto
  include('controller/indexController.php');
}
?>

ajax.php.- Desde la raiz del directorio, el ajax cargará el login desde el formulario sin necesidad de recargar toda la página mostrando solo errores donde los querramos mostrar.

<?php
//verificamos que se halla enviado por post 
if($_POST) {
  //incluimos el core
  require('core/core.php');
  //creamos un switch y verificamos por url el modo a utilizar
  //se pueden crear mas case dependiendo el caso podria ser un registro también
  //si el caso es login ubicamos el archivo a utilizar via ajax caso contrario nos envia al index
  switch (isset($_GET['mode']) ? $_GET['mode'] : null) {
    case 'login':
      require('public/user/ajax/login.php');
    break;
    default:
      header('location: ./');
    break;
  }
} else {
  //si no se envia por post redireccionamos al index
  header('location: ./');
}
?>

En el directorio Controller e creado los siguientes archivos llamados errorController.php , indexController.php , logoutController.php

errorController.php .- Hay que tener en cuenta que e dividido el estilo y los archivos, cargando los headers , footers, y barras de navegación por separado para tener un mejor control, a la hora de mostrar por pantalla lo que deseamos sin dañar el estilo principal. El error mostrará una página de error cuando no se encuentre una vista deseada.

<?php
//llamamos desde una carpeta publica el header
require_once 'public/overall/header.php'; 
   if (!isset($_SESSION['sesion_id'])){
     //si no existe la sesion enviamos al formulario de inicio de sesion
    include('public/overall/nosesion.php');
   }
 else { ?>
<?php 
//tomamos el control de lo que queremos mostrar en pantalla si se inicia la sesion mostarmos el header el menu y el footer 
include 'public/overall/menu-header.php'; ?>
<?php include 'public/overall/menu-aside.php'; ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Página de error..
      </h1>
      <ol class="breadcrumb">
        <li><a href="<?php /*se ha creado una constante url_web desde el core para ser utilizada por todo el sitio*/ echo $url_web.'admin/'; ?>"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">error&/li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
        <div class="col-md-12">
          <div class="box box-default">
            <div class="box-header with-border">
              <i class="glyphicon glyphicon-thumbs-down">&/i>

              <h3 class="box-title">Error 404 Pagina no encontrada ..!&/h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="callout callout-danger">
                <h4>Not Found!&/h4>

                <p>Al parecer esta página no existe o ha sido eliminada por el administrador, si crees que es un error hazlo saber..</p>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->

        </div>
      <!-- Contenido de index -->
    </section>
 
 </div><!--//content wrapper-->

<?php 
 }
?>
<?php require_once 'public/overall/footer.php'; ?>

indexController.php .- Llamamos desde una carpeta publica el index a cargar en el sitio.

<?php
//cargamos el index.php desde una carpeta publica
include('public/index/index.php');
?>

LogoutController.php.- Desconectará y cerrará la sesión iniciada por el usuario.

<?php
    //obtenenmos el modo desconectar.
    if(isset($_GET['logout']) == 'desconectar')
    {
      //limpiamos todas las variables de sesion iniciadas
      $_SESSION['sesion_id'] == NULL ;
      unset($_SESSION['sesion_id']);
      session_destroy();                  
      //redireccionamos al index
      header('Location: ./');
    }
?>

Nos vamos al directorio Core y creamos lo siguiente:

  • core.php
  • classConexion/conexion.php
  • funciones/usuario.php

core.php.- Configuramos ciertos parámetros que van a ser utilizados en todo el sitio.

<?php
 //configuramos timezone vease http://php.net/manual/en/timezones.php
 date_default_timezone_set('America/Bogota');
 
 //definimos ruta y titulo del sitio
 define('URL_VIEW','http://dominio.com/url-sitio/view');
 define('TITLE_WEB','Login Ajax Mvc ..Blogueroec..');
 define('URL_WEB','http://dominio.com/');
 define('NOMBRE_WEB','Bloguero ec');

 //definimos url de inicios
 $Extencion = substr(strrchr(__FILE__, '.'), 1);
 //Conexion a la bases de datos
 require_once('classConexion/conexion.' . $Extencion);
 require_once('funciones/usuario.' . $Extencion);
 //instaciamos User() para utilizarlo en el sitio
 $_usuario = User();
?>

Conexion.php.- Se encargará de crear la conexion con la base de datos .

<?php
  // validamos el request para el login del sitio.
  if (!isset($_SESSION)) {
    session_start();
  }
  #Constantes de conexión
  define('DB_HOST','localhost');
  define('DB_USER','root');
  define('DB_PASS','');
  define('DB_NAME','DB');

  //creamos la conexion
  class Conexion extends mysqli {
      public function __construct() {
        parent::__construct(DB_HOST,DB_USER,DB_PASS,DB_NAME);
        $this->connect_errno ? die('Error en la conexión a la base de datos') : null;
        $this->set_charset("utf8");
      }
    
  }
?>

Usuario.php.- Creamos esta función para seleccionar al usuario y toda la información que necesitemos de él, podemos usar un usuario por sesión Prueba ingresando múltiples usuarios y haz un login con cualquiera.

<?php
//creamos una funcion user para ser usada en todo el sitio
function User() {
   //instaciamos la conexion
  $db = new Conexion();
  $sql = $db->query("SELECT * FROM tabla;");
  if($sql->num_rows > 0) {
    while($d = $sql->fetch_array()) {
      $user[$d['id_user']] = $d;
    }
  } else {
    $user = false;
  }
  $sql->free();
  $db->close();

  return $user;
}

?>

Dentro del directorio public creamos los siguientes directorios con los siguientes archivos.

  • index/index.php
  • overall/footer.php
  • overall/footer-index.php
  • overall/header.php
  • overall/menu-aside.php
  • overall/menu-header.php
  • overall/nosesion.php
  • user/ajax/login.php

index.php.- Es lo que se va a cargar como página principal, recuerdan que en el index del directorio principal cargaba a indexController.php y este a su vez carga a public/index/index.php, Pues bien existen infinidades de forma de cargar un controlador yo lo e realizado de esta forma con el tiempo veremos mas formas. Por el momento lo dejaremos así, cada programador carga sus archivos de diferente forma.

<?php
require_once 'public/overall/header.php'; 
   if (!isset($_SESSION['sesion_id'])){
    include('public/overall/nosesion.php');
   }
 else { ?>
<?php include 'public/overall/menu-header.php'; ?>
<?php include 'public/overall/menu-aside.php'; ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Perfil de Usuario
      </h1>
      <ol class="breadcrumb">
        <li>&a href="#">&i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">perfil de usuario</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="row">
        <div class="col-md-12">
          <!-- Widget: user widget style 1 -->
          <div class="box box-widget widget-user">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-black" style="background: url('&?php /*url_view esta constatnte la definimos en el core*/ echo URL_VIEW; ?>bootstrap-default/img/bg_user.jpg') center center;">
              <h3 class="widget-user-username">&?php echo $_usuario[$_SESSION['sesion_id']]['nombre_user']; ?>&/h3>
              <h5 class="widget-user-desc">Programador Web&/h5>
            </div>
            <div class="widget-user-image">
              <img class="img-circle" src="<;?php echo URL_VIEW; ?>bootstrap-default/img/<;?php echo $_usuario[$_SESSION['sesion_id']]['imagen_user']; ?>" alt="User Avatar">
            </div>
            <div class="box-footer">
              <div class="row">
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">30</h5>
                    <span class="description-text">SEGUIDORES</span>
                  </div>
                </div>

                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">115&/h5>
                    <span class="description-text">Me Gusta</span>
                  </div>
                </div>

                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">12</h5>
                    <span class="description-text">Publicaciones</span>
                  </div>
                </div>

              </div>
              <!-- /.row -->
            </div><!--footer-->
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->



      <div class="row">
        <div class="col-md-4">
          <!-- About Me Box -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Información&/h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <strong><i class="fa fa-book margin-r-5"></i> Educación</strong>

              <p class="text-muted">
                Universidad Estatal de Guayaquil.
              </p>

              <hr>

              <strong>&i class="fa fa-map-marker margin-r-5"></i> Location</strong>

              <p class="text-muted">Guayaquil,Ecuador</p>

              <hr>

              <strong><i class="fa fa-pencil margin-r-5"></i> Habilidades</strong>

              <p>
                <span class="label label-success">Php</span>
                <span class="label label-danger">Mysql</span>
                <span class="label label-warning">Ajax</span>
                <span class="label label-info">Bootstrap</span>
              </p>

              <hr>

              <strong><i class="fa fa-pencil margin-r-5"></i> Experto en</strong>

              <p>
                <span class="label label-info">Programación</span>
              </p>

              <hr>

              <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>

              <p>Amante a la programación web ,dedicado al backend</p>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>

        <div class="col-md-4">
          <div class="box box-primary">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- bloguero-responsive -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-6927159933673851"
                 data-ad-slot="4921271120"
                 data-ad-format="auto">&/ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
        </div>
        
        <div class="col-md-4">
                  <!-- About Me Box -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Redes Sociales:</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-twitter"></i></span>
                <input type="text" class="form-control" value="@blogueroec" disabled>
              </div>
              <br>

              <div class="input-group">
                <span class="input-group-addon">&i class="fa fa-facebook">&/i>&/span>
                <input type="text" class="form-control" value="blogueroec" disabled>
              </div>
              <br>

              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-google-plus"></i></span>
                <input type="text" class="form-control" value="+BlogueroEcuador" disabled="disabled">
              </div>
              <br>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div><!--col-->
      </div><!--row-->
    </section>
  </div><!--content wrapper-->

&?php 
 }
?>
&?php require_once 'public/overall/footer-index.php'; ?>
&?php require_once 'public/overall/footer.php'; ?>

De aquí en adelante trata de poner los siguientes archivos en su respectivo directorio para mostrar el estilo correcto y no haya problemas
footer.php.

&!-- jQuery 2.2.3 -->
<cript src="<?php echo URL_VIEW; ?>bootstrap-default/js/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="<?php echo URL_VIEW; ?>bootstrap-default/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo URL_VIEW; ?>bootstrap-default/js/app.min.js"></script>
<!-- iCheck -->
<script src="<?php echo URL_VIEW; ?>bootstrap-default/css/icheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-green',
      radioClass: 'iradio_square-green',
      increaseArea: '20%' // optional
    });
  });
</script>
</body>
</html>

footer-index.php

&?php if(isset($_SESSION['sesion_id']))
{
?>
  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      Visitanos en nuestras redes sociales.
    </div>
    <!-- Default to the left -->
    <strong>Copyright © <?php echo date("Y");?> <a target="_blank" href="http://www.bloguero-ec.com">Bloguero-ec</a>.</strong> derechos reservados.
  </footer>
</div>
<?php } 
else{
    echo'
    <div class="container">
        <nav class="navbar navbar-default">
          <div class="navbar-header">
            <a class="navbar-brand"><strong>Usuario:</strong> usuario@bloguero-ec.com | <strong>Password:</strong> Usuario.123456</a>
         </div>
         </nav>
    </div>';
}
?>

header.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php echo TITLE_WEB; ?></title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/css/estilo.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/css/icheck/square/green.css">
  <!--Estilo -->
  <link rel="stylesheet" href="<?php echo URL_VIEW; ?>bootstrap-default/css/skin-red-light.min.css">
  <!--custom-->
  <script src="<?php echo URL_VIEW; ?>bootstrap-default/js/custom.js"></script>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

menu-aside.php

  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar user panel (optional) -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="<?php echo URL_VIEW.'bootstrap-default/img/'.$_usuario[$_SESSION['sesion_id']]['imagen_user']; ?>" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>&?php echo $_usuario[$_SESSION['sesion_id']]['nombre_user']; ?>&/p>
          <!-- Status -->
        </div>
      </div>

      <!-- Sidebar Menu -->
      <ul class="sidebar-menu">
        <li class="header">MENU OPCIONES&/li>
        <!-- Optionally, you can add icons to the links -->
        <li class="active"><a href="http://www.bloguero-ec.com" target="_blank"><i class="fa fa-link"></i> <span>Bloguero-ec</span></a></li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

menu-header.php

<body class="hold-transition skin-red-light sidebar-mini">
<div class="wrapper">

  <!-- Menu Header -->
  <header class="main-header">

    <!-- Logo -->
    <a href="<?php echo URL_WEB; ?>" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>B</b>ec</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b><?php echo NOMBRE_WEB; ?></b></span>
    </a>

    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
      <span class="sr-only">Toggle navigation</span>      </a>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">

          <!-- User Account Menu -->
          <li class="dropdown user user-menu">
            <!-- Menu Toggle Button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <!-- The user image in the navbar-->
              <img src="<?php echo URL_VIEW.'bootstrap-default/img/'.$_usuario[$_SESSION['sesion_id']]['imagen_user']; ?>" class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="hidden-xs"><?php echo $_usuario[$_SESSION['sesion_id']]['nombre_user']; ?></span>
            </a>
            <ul class="dropdown-menu">
              <!-- The user image in the menu -->
              <li class="user-header">
                <img src="<?php echo URL_VIEW.'bootstrap-default/img/'.$_usuario[$_SESSION['sesion_id']]['imagen_user']; ?>" class="img-circle" alt="User Image">

                <p>
                  <?php echo $_usuario[$_SESSION['sesion_id']]['nombre_user']; ?> - Administrador
                  <small>Miembro desde 24 de Abril del 2015</small>
                </p>
              </li>
              
              <!-- Menu Body -->
              <li class="user-body">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a target="_blank" href="https://twitter.com/blogueroec">Twitter</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a target="_blank" href="https://plus.google.com/103895538543297304664">Gmail</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a target="_blank" href="https://www.facebook.com/blogueroec">Facebook</a>
                  </div>
                </div>
                <!-- /.row -->
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">Perfil</a>
                </div>
                <div class="pull-right">
                  <a href="<?php echo URL_WEB; ?>?view=logout<logout=desconectar" class="btn btn-default btn-flat">Desconectar</a>                </div>
              </li>
            </ul>
          </li>
          <!-- Control Sidebar Toggle Button -->
        </ul>
      </div>
    </nav>
  </header>

nosesion.php.- Es el formulario de inicio de sesión solo se mostrará si el usuario no a iniciado sesión en el sitio.

<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a><b>bloguero</b>EC</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">Inicie sesión</p>

    <div onKeyPress="return runScriptLogin(event)">
      <div class="form-group has-feedback">
        <input type="email" id="correo" class="form-control" placeholder="Correo">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" id="password" class="form-control" placeholder="Contraseña">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox" id="sesion" value="1"> Recuerdeme
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" class="pull-right btn btn-success" onClick="goLogin()">Login <i class="fa fa-arrow-circle-right"></i></button>
        </div>
        <!-- /.col -->
      </div>
    </div><!--run script-->

  </div>
  <!-- /.login-box-body -->
 <div id="_AJAX_LOGIN_"></div>
</div>
<!-- /.login-box -->
<script src="<?php echo URL_VIEW; ?>bootstrap-default/js/login.js"></script>

login.php.- se encargará de verificar vía ajax si el usuario existe en la db.

<?php
//vrificamos que se haya enviado via post
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    estado_servidor('Error! Metodo de ingreso invalido!');
}
//instaciamos la conexion
$db = new Conexion();
//creamos variables con los datos enviados desde el formulario y las limpiamos
$email = $db->real_escape_string($_POST['user']); 
$pass = strip_tags($_POST['pass']);

//reamos una consulta para saber si el usuario exxiste en la db
$b_user = "SELECT * FROM tabla WHERE email_user='$email'";
$result = $db->query($b_user);
$ses = $result->fetch_array();
//comparamos password
$salt = substr ($email, 0, 2);
//encriptamos password
$clave_crypt = crypt($pass, $salt);

    if(($email != '') && ($pass != ''))
    {//vaildar datos
        if(filter_var($email, FILTER_VALIDATE_EMAIL))
        {//validar mail
          //if($row = $result->num_rows)
          if($result->num_rows > 0)
          {//buscamos email
              if($ses['pass_user'] == $clave_crypt)
              {//buscamos pass
                //declaramos variables todo OK
                $_SESSION['sesion_id'] = $ses['id_user'];
                if($_POST['sesion']) { ini_set('session.cookie_lifetime', time() + (60*60*24)); }
                $message = 1;
              }//fin de buscar pass
              else
              {
                  $message ='<div class="alert alert-form alert-warning text-xs-center">Verifique contraseña.</div>';
              }
          }//fin de buscar email
          else
          {
              $message ='<div class="alert alert-form alert-danger text-xs-center">Email no existe en nuestro sistema.</div>';
          }
        }//fin validar mail
        else
        {
          $message = '<div class="alert alert-form alert-danger text-xs-center">Email inválido.</div>';
        }
    }//fin validar datos
    else
    {
        $message = '<div class="alert alert-form alert-danger text-xs-center">Deberas llenar todos los campos.</div>';
    }

echo $message;

function estado_servidor($str){
    echo json_encode(array('estado'=>$str));
    exit;
}
?>

Para el estilo del sitio se ha utilizado bootstrap y unas modificaciones dentro de los estilos realizados por bloguero-ec estos archivos estarán en la descarga.
Además constará de un archivo llamado login.js y custom.js que realizan la petición ajax.
Tabla.sql.- Consta de la tabla a ser utilizad mas los campos para realizar las respectivas consultas vía sql.

CREATE TABLE `tabla` (
  `id_user` bigint(10) NOT NULL,
  `nombre_user` varchar(30) COLLATE utf8_spanish2_ci NOT NULL,
  `email_user` varchar(70) COLLATE utf8_spanish2_ci NOT NULL,
  `pass_user` varchar(70) COLLATE utf8_spanish2_ci NOT NULL,
  `imagen_user` varchar(100) COLLATE utf8_spanish2_ci NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci;
 
INSERT INTO `tabla` (`id_user`, `nombre_user`, `email_user`, `pass_user`, `imagen_user`) VALUES
(1, 'Bloguero ec', 'domain@bloguero-ec.com', 'coQXAzpAUyNBw', 'logotipo_responsive.png');
)

Con esto tendremos nuestro login funcionando. Recuerda descargar el estilo y colocarlo en la carpeta view para que funcione correctamente además al archivo login.js deberás cambiar la ruta absoluta por la de tu dominio.
Nos vemos en una futura publicación.

DEMOSTRACION

DESCARGAR ESTILO

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: