Bloguero-ec

Codigo Fuente, programación, Diseño Web

login php mysqli con foto de perfil para web…

agosto 6, 2015
codigo-fuente,login,mysqli,php


Etiquetas: , , ,


Saludos esta vez vamos a crear un login php mysqli con foto de perfil , este sistema consiste en registrar un usuario , después haremos que el usuario inicie sesión y que suba una foto de perfil diferente a la que le proporciona por defecto el sistema , esto lo haremos en una página llamada perfil.php .

Creando nuestro login php mysqli con foto de perfil..

Cabe recalcar que haré una breve explicación suponiendo que el lector tiene un poco de conocimiento de php y msqli..

Para la utilización de este demo e utilizado una plantilla que usé en un tutorial anterior…. Lo he modificado

para crear mas scripts dentro de la misma página.

Archivos a utilizar :

 Index.php

registro.php

login.php

perfil.php

conexion.php

estilo.css

include.php

desconectar.php

cargar-imagen.js

tabla.sql
index.php .- Este archivo lo voy a dividir en dos partes head y body ..

Dentro de las etiquetas <head> enlazaremos los estilos relacionados a la página y los scripts utilizados para este demo , cabe recalcar que estoy usando la librería Fancybox para mostrar la imagen de perfil que he sacado de este tutorial : Cómo usar la librería Fancybox. La librería jquery podrás descargar de su página de autor o Utilizar sus CDN hosted a nivel mundial .

<?php require_once('conexion.php'); 
/*
Nombre: Login php mysqli foto de perfil
Url http://www.bloguero-ec.com/publicacion/login-php-mysqli-foto-de-perfil
Descripcion: Inicio de sesión para insertar una foto de perfil vía php mysqli
Autor: Bloguero-ec
Autor URL: http://www.bloguero-ec.com/
Dominio local: login-php-mysqli-foto-de-perfil
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Login Php mysql mas foto de perfil</title>
    <--Estilos utilizados -->
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
	<link href='http://fonts.googleapis.com/css?family=Slabo+27px|Lobster' rel='stylesheet' type='text/css'>
    <!-- estilos fancyBox -->
    <link rel="stylesheet" href="css/jquery.fancybox.css?v=1.0.5" type="text/css" media="screen" />
    <link rel="stylesheet" href="scripts/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <link rel="stylesheet" href="scripts/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- scripts fancyBox -->
	<script type="text/javascript" src="scripts/jquery.fancybox.pack.js?v=1.0.5"></script>
	<script type="text/javascript" src="scripts/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
	<script type="text/javascript" src="scripts/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
	<script type="text/javascript" src="scripts/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
   	<script type="text/javascript" src="scripts/custom.js"></script>
</head>

Dentro del body colocaremos el siguiente código , para mostrar los datos estoy usando una tabla jejeje se que está un poco pasado de moda pero para este demo está bastante bién ….

  <body>

    <header class="cabecera-barra">
        <div class="cabecera-barra-1">
           <!--Esta cabecera la he dividido en otro archivo php -->
		   <?php include 'cabecera-barra1.php'; ?> 
        </div>
 
        <!--Verificamos si está iniciada la sesion y mostramos la cabecera 2 -->
		<?php if (isset($_SESSION['MM_Id']))
		{?> 
        <div class="cabecera-barra-2">
           <!--Esta cabecera la he dividido en otro archivo php -->
             <?php include 'cabecera-barra2.php'; ?> 
        </div>
        <?php }?>   
   </header>
    <section class="contenido">
        <!--Verificamos si se inició sesión y mostramos los datos del usuario -->
        <article class="post"><?php if (isset ($_SESSION ['MM_Id'])){
			 echo '<p class="info">Usted ha iniciado sesión como usuario registrado:</p>';
			 echo '
			 <div class="tablauser" >
                <table >
                    <tr>
                        <td>
                            Correo
                        </td>
                        <td >
                            Usuario
                        </td>
                        <td>
                            Foto de Perfil
                        </td>
                    </tr>
                    <tr>
                        <td >
                         <a href="mailto:'.$_SESSION['MM_mail_user'].'?Subject=Sujeto%20de%20envio" target="_top">'.$_SESSION['MM_mail_user'].'</a>
                        </td>
                        <td>
                          <a href="perfil.php">'.$_SESSION["MM_Nick_user"].'</a>
                        </td>
                        <td>
           				<!--MOstramos la foto de perfil de usuario con una sesión iniciada -->
						 <div id="myimageDiv" style="display:none">
						  <a id="single_4" href="user/'.$_SESSION['MM_Foto_user'].'" title="Usuario :'.$_SESSION['MM_Nick_user'].'">
						  <img id="myimage1" src="user/'.$_SESSION['MM_Foto_user'].'" alt="" width="100" height="100" />
						  </a>
						 </div>
						 <br/>
						 <button onclick="showHide()" class="ver-foto" >Mostrar foto</button>
                        </td>
                    </tr>
                </table>
            </div>
			 ';
			 }
			 else {
	            //Si no se a iniciado sesión mostramos un mensaje al usuario 
				 echo '<p class="info">Deberá Iniciar sesión para ver su perfil...</p>';
				 }?></article>
    </section>
    
    <?php include 'contenido_lateral.php'; ?>
    <?php include 'footer.php'; ?>
   <!--pequeño script para ocultar y mostrar la imagen del usuario -->
	<script type="text/javascript"> 
	  function showHide(){ 
		var oImageDiv=document.getElementById('myimageDiv') 
		oImageDiv.style.display=(oImageDiv.style.display=='none')?'inline':'none'
	  } 
    </script>

</body>
</html>

registro.php .- Servirá para registrar los usuarios dentro de nuestra base de datos en ella guardaremos los datos previamente ingresados en el formulario por el usuario. Aquí no permitiremos la subida de la foto de perfil ya que eso lo haremos cuando el usuario esté registrado y se haya logeado correctamente..

<?php require_once('conexion.php'); 
/*
Nombre: Login php mysqli foto de perfil
Url http://www.bloguero-ec.com/publicacion/login-php-mysqli-foto-de-perfil
Descripcion: Inicio de sesión para insertar una foto de perfil vía php mysqli
Autor: Bloguero-ec
Autor URL: http://www.bloguero-ec.com/
Dominio local: login-php-mysqli-foto-de-perfil
*/
?>
<?php
//verificamos si está iniciada la sesión y nos dirigimos al index 
if (isset ($_SESSION['MM_Id'])){
	header ("Location: http://localhost/login-php-mysqli/");
	}
?>
			
<?php
//configuramos variables 
  @$insertar = $_REQUEST['insertar'];
  @$mail_user = limpiar($_REQUEST['mail_user']);
  @$nick_user = limpiar($_REQUEST['nick_user']);
  @$pass_user = limpiar($_REQUEST['pass_user']);
  @$pass_user2 = limpiar($_REQUEST['pass_user2']);
  //creamos una foto de perfil por defecto
  @$usuario = 'usuario.png';
  //creamos una consulta para saber si el usuario ya se a registrado anteriormente
  $consulta = "SELECT correo_user FROM login_php_mysql_foto_prefil WHERE correo_user='$mail_user'" or die("Error en la consulta" .  mysqli_error($link));
  $resultado_consulta = $link->query($consulta);
  //colocamos error en false por el momento
  $error = false;

   //verificamos  y validamos el formulario
   if (isset($insertar))
   {//insertar

     //mail consultamos si el mail es válido
	 if (!validar_email($mail_user))
      {
         @$errores["mail_user"] = "¡Introduzca un correo Válido!";
         $error = true;
      }
      
     elseif($res=$resultado_consulta->fetch_array())
		{
         @$errores["mail_user"] = "¡El email ya esta registrado.!";
		 $resultado_consulta->free();
         $error = true;
		}
      
	 else
         @$errores["mail_user"] = "";



     //nick verificamos que no se encuentre vacío
     if (trim($nick_user) == "")
      {
         @$errores["nick_user"] = "¡Introduzca su nombre!";
         $error = true;
      }
      else
         @$errores["nick_user"] = "";
		 
     //pass verificmos que no se encuentre vacío
     if (trim($pass_user) == "")
      {
         @$errores["pass_user"] = "¡Introduzca una contraseña!";
         $error = true;
      }
      else
         @$errores["pass_user"] = "";
     
	 //pass2 verificamos que no sea diferente a pass1 y que no se encuentre vacío
     if (trim($pass_user2) == "")
      {
         @$errores["pass_user2"] = "¡Introduzca otra vez la contraseña!";
         $error = true;
      }
      else
         @$errores["pass_user2"] = "";
	if(trim($pass_user2) != trim($pass_user))
      {
         @$errores["pass_user2"] = "¡Contraseña no coinciden!";
         $error = true;
      }
      else
         @$errores["pass_user2"] = "";


   }//fin insertar
   
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!--Relacionamos los estilos con sus rutas  -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Login Php mysql mas foto de perfil</title>
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px|Lobster' rel='stylesheet' type='text/css'>

</head>

  <body>

    <header class="cabecera-barra">
        <div class="cabecera-barra-1">
           <!--Incluimos la cabecera 1  -->
           <?php include 'cabecera-barra1.php'; ?> 
        </div>
 		<!-- verificamos la sesion para llamar a la cabecera 2-->
        <?php if (isset($_SESSION['MM_Id']))
		{?> 
        <div class="cabecera-barra-2">
             <?php include 'cabecera-barra2.php'; ?> 
        </div>
        <?php }?>   
   </header>
   
    <section class="contenido">
        <article class="post">
          <?php   // Si los datos son correctos, procesamos formulario verificamos si los errores estan en false
		   if (isset($insertar) && $error==false)
		   {
			   //encriptamos las contraseñas de forma que no se pueda descifrar
           $salt = substr ($mail_user, 0, 2);
           $clave_crypt = crypt ($pass_user, $salt);
		   //insertamos los datos del formulario limpios y encriptados
		   $consulta = "insert into login_php_mysql_foto_prefil (correo_user,nick_user,pass_user,rango,estado,foto_user) values ('$mail_user','$nick_user','$clave_crypt',1 ,'a','$usuario')" or die("Error en la consulta" . mysqli_error($link));
		   $resultado = $link->query($consulta);
		   //mostramos mensajes después de registrar
			echo '<p class="info">Registro exitoso</p>';
			echo '<p class="info">Ahora puede iniciar sesión</p>';
			echo '<p class="info">como usuario registrado</p>';

		   }
		   else
		   {
         	?>
            <!--Formulario Utilizamos validación html5 y php por el momento no e usado validación javascript-->
          <form action="" method="post" name="form1" id="form1" >
            <table width="50%" align="center"  rules="none" border="1" cellpadding="10%">
			  <p class="info">Formulario de Registro..</p>
              <tr valign="baseline">
                <td nowrap="nowrap" align="right">Ingrese su Correo</td>
                <td><input type="email" name="mail_user" placeholder="correo@dominio.com"
                  <?PHP
				   if (isset($insertar))
				      print ("VALUE='$mail_user' />");
					   else
				      print ("/>");
					   if (@$errores["mail_user"] != "")
				      print ("<BR><SPAN CLASS='error'>" . $errores["mail_user"] . "</SPAN>");
				  ?>
                  </td>
              </tr>
              <tr valign="baseline">
                <td nowrap="nowrap" align="right">Nombre o nick:</td>
                <td><input type="text" name="nick_user" placeholder="su Nombre"
                  <?PHP
				   if (isset($insertar))
				      print ("VALUE='$nick_user' />");
					   else
				      print ("/>");
					   if (@$errores["nick_user"] != "")
				      print ("<BR><SPAN CLASS='error'>" . $errores["nick_user"] . "</SPAN>");
				  ?>
                </td>
              </tr>
              <tr valign="baseline">
                <td nowrap="nowrap" align="right">Password:</td>
                <td><input type="password" name="pass_user" placeholder="contraseña"
                  <?PHP
				   if (isset($insertar))
				      print ("VALUE='$pass_user' />");
					   else
				      print ("/>");
					   if (@$errores["pass_user"] != "")
				      print ("<BR><SPAN CLASS='error'>" . $errores["pass_user"] . "</SPAN>");
				  ?>
                 </td>
              </tr>
              <tr valign="baseline">
                <td nowrap="nowrap" align="right">Confirme Password:</td>
                <td><input type="password" name="pass_user2" placeholder="repita contraseña"
                  <?PHP
				   if (isset($insertar))
				      print ("VALUE='$pass_user2' />");
					   else
				      print ("/>");
					   if (@$errores["pass_user2"] != "")
				      print ("<BR><SPAN CLASS='error'>" . $errores["pass_user2"] . "</SPAN>");
				  ?>
                </td>
              </tr>
              <tr valign="baseline">
                <td nowrap="nowrap" align="right"> </td>
                <td align="right"><br/><input type="submit" name="insertar" value="Insertar registro" class="login-registro" /></td>
              </tr>
            </table>
          </form>
          <p> </p>
		<?php
		   }
		  ?>

        </article>
    </section>
    
    <?php include 'contenido_lateral.php'; ?>
    <?php include 'footer.php'; ?>

  </body>
</html>

login.php.- Se encargará de loguear al usuario verificamos ciertos parámetros , el email está validado por html5 y php , también verificaremos que los campos estén llenos y comprobaremos las contraseñas y usuarios para mostrar cual de las dos está siendo mal ingresadas…

<?php require_once('conexion.php');
/*
Nombre: Login php mysqli foto de perfil
Url http://www.bloguero-ec.com/publicacion/login-php-mysqli-foto-de-perfil
Descripcion: Inicio de sesión para insertar una foto de perfil vía php mysqli
Autor: Bloguero-ec
Autor URL: http://www.bloguero-ec.com/
Dominio local: login-php-mysqli-foto-de-perfil
*/
?>
<!DOCTYPE>
<html>
<head>
	<-- incluimos en la cabecera los estilos a utilizar-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Login Php mysql mas foto de perfil</title>
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Lobster' rel='stylesheet' type='text/css'>

</head>

  <body>

    <header class="cabecera-barra">
        <div class="cabecera-barra-1">
           <?php include 'cabecera-barra1.php'; ?> 
        </div>
 
        <!--verificamos que esté iniciada la sesión para mostrar la cabecera # 2-->
        <?php if (isset($_SESSION['MM_Id']))
		{?> 
        <div class="cabecera-barra-2">
             <?php include 'cabecera-barra2.php'; ?> 
        </div>
        <?php }?>   
   </header>
   <!--conetnido -->
    <section class="contenido">
        <article class="post">
        <!--formulario-->
        <form name="login" action="" method="POST">
  <table width="50%" align="center"  rules="none" cellpadding="10%">
		  <p class="info">Inicie Sesión:</p>
    <tr>
      <td>
        <?php
		if (isset($_POST['login']))
  		 {//post login
   		   $usuario = limpiar($_REQUEST['correo']);
   		   $clave = limpiar($_REQUEST['password']);
           $salt = substr ($usuario, 0, 2);
           $clave_crypt = crypt ($clave, $salt);
           //consultamos si exxiste el usuario
		   $consulta = "SELECT * FROM login_php_mysql_foto_prefil WHERE correo_user='$usuario'" or die("Error en la consulta" . mysqli_error($link));
		   $resultado = $link->query($consulta);
			  /* obtener un array asociativo */
		   $ses = $resultado->fetch_assoc(); 

	if(($usuario != '') && ($clave != ''))
	{

		   if(@mysqli_num_rows($resultado))
				{//buscamos usuario
					if($ses['pass_user'] == $clave_crypt)
					{	
						if($ses['rango'] > 0)
						  {//verificamos el rango
							  if($ses['estado'] == 'a')
							   {//vemos el estado
						    //declaramos variables a usar en la pagina
						    $_SESSION['MM_Username'] = $usuario;
						    $_SESSION['MM_Id'] = $ses['id_user'];
						    $_SESSION['MM_Nick_user'] = $ses['nick_user'];
							$_SESSION['MM_Foto_user'] = $ses['foto_user'];
							$_SESSION['MM_mail_user'] = $ses['correo_user'];
							   }//fin de verificación de estado
							   
							   else 
							   {
								$fecha_b=$ses['fecha_baja'];   
								echo'<strong class="error">Usted se dio de baja el:   </strong>'.$fecha_b = date ("d-m-Y H:i");
							   }
						  
						  }//fin de verificacion de rango
						  else
						  {
						   echo '<strong class="error">Usuario baneado por el administrador.</strong>';
						   }

					}
					else
					{
						echo '<strong class="error">Contraseña incorrecta.</strong>';
					}
				}//fin de busqueda usuario
				else
				{
					echo '<strong class="error">Nombre de usuario incorrecto.</strong>';
				}
				

				$resultado->free();

		 }
         //verificamos que los campos estén llenos
	else
	{
		echo '<strong class="error">Deberas llenar todos los campos.</strong>';
	}

	   	 }//fin post login
		 
		 
		  if (isset ($_SESSION['MM_Id'])){
              header ("Location: http://localhost/project-org/");
			  }
			else
			{


		?>
	</td>
    </tr>
    </table>
        <table width="50%" align="center"  rules="none" border="1" cellpadding="10%">
          <tr>
            <td width="110">Correo</td>
            <td width="170"><label for="correo"></label>
              <input type="email" name="correo" id="correo" placeholder="correo@dominio.com"/></td>
          </tr>
          <tr>
            <td>Password</td>
            <td><label for="password"></label>
              <input type="password" name="password" id="password" placeholder="su contraseña" /></td>
          </tr>
          <tr >
            <td> </td>
            <td align="right"><br/><input type="submit" name="login" id="button" value="Iniciar sesión" class="login-registro"/></td>
          </tr>
        </table>
		</form>
		</article>
    </section>
    
    <?php include 'contenido_lateral.php'; ?>
    <?php include 'footer.php'; ?>
  <?php
  }
  ?>

  </body>
</html>

perfil.php .- Se encargará de cambiar la foto de perfil del usuario existe validación por parte de javascript y php para la subida de la imagen …

<?php require_once('conexion.php');
/*
Nombre: Login php mysqli foto de perfil
Url http://www.bloguero-ec.com/publicacion/login-php-mysqli-foto-de-perfil
Descripcion: Inicio de sesión para insertar una foto de perfil vía php mysqli
Autor: Bloguero-ec
Autor URL: http://www.bloguero-ec.com/
Dominio local: login-php-mysqli-foto-de-perfil
*/
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Login Php mysqli mas foto de perfil</title>
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Lobster' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="scripts/carga_imagen.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>

  <body>

    <!--verificamos las sesion para habilitar las cabeceras-->
    <header class="cabecera-barra">
        <?php if (!isset($_SESSION['MM_Id']))
		{?> 
        <div class="cabecera-barra-1">
           <?php include 'cabecera-barra1.php'; ?> 
        </div>
        <?php }?>   

        <?php if (isset($_SESSION['MM_Id']))
		{?> 
        <div class="cabecera-barra-2">
             <?php include 'cabecera-barra2.php'; ?> 
        </div>
        <?php }?>   
   </header>
   
    <!--contenido-->
    <section class="contenido">
        <article class="post"><?php if (isset ($_SESSION ['MM_Id'])){
			 echo '<p class="info">Usted ha iniciado sesión como usuario registrado:</p>';
			 echo '
			 <div class="tablauser" >
                <table >
                    <tr>
                        <td>
                            Correo
                        </td>
                        <td >
                            Usuario
                        </td>
                        <td>
							Foto de perfil
                        </td>
                    </tr>
                    <tr>
                        <td >
                         <a href="mailto:'.$_SESSION['MM_mail_user'].'?Subject=Sujeto%20de%20envio" target="_top">'.$_SESSION['MM_mail_user'].'</a>
                        </td>
                        <td>
                          <a href="perfil.php">'.$_SESSION["MM_Nick_user"].'</a>
                        </td>
                        <td>'; ?>
						  	<!--verificamos la subida de imagen con php-->
							<?php
					    	    @$actualizar = $_REQUEST['actualizar'];
								@$error = false;
							    //array de archivos disponibles
								@$archivos_disp_ar = array('jpg', 'jpeg', 'gif', 'png');
								//carpteta donde vamos a guardar la imagen
								@$carpeta = 'user/';
								//recibimos el campo de imagen
								@$imagen = $_FILES['imagen']['tmp_name'];
								//guardamos el nombre original de la imagen en una variable
								@$nombrebre_orig = $_FILES['imagen']['name'];
								//el proximo codigo es para ver que extension es la imagen
								@$array_nombre = explode('.',$nombrebre_orig);
								@$cuenta_arr_nombre = count($array_nombre);
								@$extension = strtolower($array_nombre[--$cuenta_arr_nombre]);
								//creamos nuevo nombre para que tenga nombre unico
								@$nombre_nuevo = time().'_'.rand(0,100).'.'.$extension;
								//nombre nuevo con la carpeta
								@$nombre_nuevo_con_carpeta = $carpeta.$nombre_nuevo;

							 if (isset($actualizar))
							 {//ingreso datos
							   		  if(!in_array($extension, $archivos_disp_ar))
									  {
									   {
										 @$errores["imagen"]="Esto no es una imagen";
										 $error = true;
									   }
									  if(trim($imagen)== "")
										{
										 @$errores["imagen"]="Ingrese una imagen";
										 $error = true;
										}
									  }
									  else
										@$errores["imagen"]="";
							 }
						// Si los datos son correctos, procesar formulario
						if (isset($actualizar) && $error==false)
   						{
							
							$id= $_SESSION ['MM_Id'];
							$actualiza="Update login_php_mysql_foto_prefil Set foto_user='$nombre_nuevo' Where id_user='$id'";
							$resultado = $link->query($actualiza);
						    $mover_archivos = move_uploaded_file($imagen , $nombre_nuevo_con_carpeta);
							
							$_SESSION['MM_Foto_user'] = NULL;
							unset($_SESSION['MM_Foto_user']);
							
						    $select_foto = "SELECT foto_user FROM login_php_mysql_foto_prefil WHERE id_user='$id'" or die("Error en la consulta" . mysqli_error($link));
		   					$res_foto = $link->query($select_foto);
							$ses = $res_foto->fetch_assoc();
							$_SESSION['MM_Foto_user'] = $ses['foto_user'];
							
							//echo "<img src='" . $carpeta . $nombre_nuevo . "' alt='' width='100' height='100' />";
							//echo "<br/>";
			                echo "Se le asignó nuevo Nombre de imagen  :  " . $nombre_nuevo;
							echo'<img style="width:40%; margin-top:10px;" src="user/'.$_SESSION['MM_Foto_user'].'" alt="'.$_SESSION['MM_Nick_user'].'"/>';
							
					   	}
					      else
   							{
							?>
                          <img id="thumbnil" style="width:40%; margin-top:10px;"/>
                          <br/>
                          <!--formulario de envío -->
                          <form action="" name="actualizar" enctype="multipart/form-data" method="post">
						  <div class="escogerFoto">
                           <span> Escoja su Imagen </span>
                          <input class="escoger" type="file" accept="image/*"  onchange="showMyImage(this)"  name="imagen"
                             <?PHP
								 if (isset($actualizar))
								    //obtenemos el nombre de la imagen
									print ("VALUE='$imagen'/>\n");
							    else
									print ("/>\n");
								 if (@$errores["imagen"] != "")
									//mostramos errores si los hay
									print ("<BR><SPAN CLASS='error'>" . @$errores["imagen"] . "</SPAN>");
							  ?>
                           </div>
						  <input class="enviar-foto" type="submit" value="actualizar" name="actualizar"/>
						  </form>
                          <?PHP
							}
						  ?>

                         <?php 
                        echo '</td>
                    </tr>
                </table>
            </div>';
			 }
			 //si no ha iniciado sesión mostramos mensaje
			 else {
				 echo '<p class="info">Deberá Iniciar sesión para ver su perfil...</p>';
				 }?>
                 </article>
    </section>
    
    <?php include 'contenido_lateral.php'; ?>
    <?php include 'footer.php'; ?>

  </body>
</html>

conexion.php .- Sirve para conectarnos a la base de datos y consultamos el archivo include que contiene funciones para ser utilizados en pantalla.

<?php 
// *** validamos para el login del sitio
if (!isset($_SESSION)) {
  session_start();
}
?>
<?php
//conectamos la tabla
$link = mysqli_connect("localhost","root","pass","Bd") or die("Error en la consulta" . mysqli_error($link)); 
?>
<?php
//verificamos el archivo include si lo encontramos usamos la ruta
 if (is_file ('include/include.php')){
     include ('include/include.php');
	}
	else {
	include ('../include/include.php');
	}
?>

estilo.css .- Este es el estilo que le he dado tratando de hacerlo un poco responsive utilizando una maquetación sencilla.

/*
Nombre: Login php mysqli foto de perfil
Url http://www.bloguero-ec.com/publicacion/login-php-mysqli-foto-de-perfil
Descripcion: Inicio de sesión para insertar una foto de perfil vía php mysqli
Autor: Bloguero-ec
Autor URL: http://www.bloguero-ec.com/
Dominio local: login-php-mysqli-foto-de-perfil
*/
body{
    margin: 0;
}

a{text-decoration:none;}
a:hover{text-decoration:underline;} 
.contenido, .contenido-lateral, .pie-pagina{
    padding: 1em 2em;
}
 
.contenido, .contenido-lateral, .pie-pagina{
    float: left;
    box-sizing: border-box;
}
 
 
.contenido{
    width: 60%;
}
 
.contenido-lateral{
    width: 40%;
    background-color: #CCC;
	border-left:#999 1px solid;
    height: 500px;
}
 
.post{
    height: auto;
    padding:35px;
}
 
.pie-pagina{
    width: 100%;
    background-color: #333;
    height: auto;
}

.post .input {
	width:50px;
	}

.cabecera-barra{
    font:13px Arial, Helvetica, sans-serif;
}
 
.cabecera-barra .cabecera-separador{
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}
 
/* Logotipo */
 
.cabecera-barra h1{
    float: left;
    font: normal 28px Cookie, Arial, Helvetica, sans-serif;
    line-height: 40px;
    margin: 0;
}
 
.cabecera-barra h1 span {
    color: #bc40df;
}
 
/* barra 1*/
 
.cabecera-barra .cabecera-barra-1{
    background-color:#292c2f;
    box-shadow:0 1px 1px #ccc;
    padding: 20px 40px;
    height: 80px;
    color: #ffffff;
    box-sizing: border-box;
}
 
.cabecera-barra .cabecera-barra-1 a {
    color: #ffffff;
    text-decoration: none;
}
 
.cabecera-barra .cabecera-barra-1 nav {
    font:14px Arial, Helvetica, sans-serif;
    line-height: 40px;
    float: left;
    margin: 0 0 0 60px;
    padding: 0;
}
 
.cabecera-barra .cabecera-barra-1 nav a{
    display: inline-block;
    padding: 0 5px;
    opacity: 0.9;
    text-decoration:none;
    line-height: 1;
}
 
.cabecera-barra .cabecera-barra-1 nav a:hover {
    opacity: 1;
}
 
.cabecera-barra .cabecera-barra-1 nav a.activo {
    border-radius: 2px;
    background-color: #2B5773;
    padding: 8px 12px;
}
.cabecera-barra .cabecera-barra-1 ul{
	font: 14px Arial, Helvetica, sans-serif;
	list-style: none;
	line-height: 1;
	float: right;
	} 
.cabecera-barra .cabecera-barra-1 ul li{
	display: inline-block;
	margin-left: 15px;
	opacity:0.9;
	} 
.cabecera-barra .cabecera-barra-1 ul li:hover{
	opacity: 1;
	} 
.cabecera-barra .cabecera-barra-1 ul li:last-child a {
	font-weight: bold;
	background-color: #3a3c3e;
	padding: 10px 15px;
	border-radius: 3px;
	} 
.cabecera-barra .cabecera-barra-1 .header-user-menu{
	position: relative;
	float:right;
	background-color:#3a3c3e;
	width:75px;
	height:40px;
	border-radius:2px;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu:before{
	content:'';
	width:0;
	height:0;
	top: 18px;
	left: 15px;
	position:absolute;
	border:5px solid transparent;
	border-top-color:#fff;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu ul{
	display: none;
	font:bold 13px Arial, Helvetica, sans-serif;
	background-color: inherit;
	list-style: none;
	position: absolute;
	text-align: center;
	width: 125px;
	top: 25px;
	right: 0;
	padding: 10px;
	border-radius: 2px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	z-index:999;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu:active ul,
.cabecera-barra .cabecera-barra-1 .header-user-menu:hover ul,
.cabecera-barra .cabecera-barra-1 header-user-menu.show ul{
	display:block;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu ul li{
	padding:5px;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu ul li a:hover{
	opacity:0.9;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu ul li a.highlight{
	color:#e9ac09;
}
.cabecera-barra .cabecera-barra-1 .header-user-menu img{
	border-radius:50%;
	position:absolute;
	top:6px;
	max-width: 28px;
	right:10px;
}
/*errores de sesiones */
.error{color:#900; font-size:1em; text-align:center;} 
.info{color:#030; font-size:1.5em; text-align:center; } 
/* Barra 2*/
.ver-foto{
	cursor:pointer;
	background-color: #8abff7;
	border: 1px solid #6e6dd6;
	padding: 4px;
	width: 150px;
}

.enviar-foto{
	cursor:pointer;
	background-color: #F0F0F0;
	border: 1px solid #BEC6D6;
	padding: 4px;
	width: 150px;
}
.login-registro{
	cursor:pointer;
	background-color: #F0F0F0;
	border: 1px solid #BEC6D6;
	padding: 4px;
	width: 150px;
	}
.escogerFoto {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.escogerFoto input.escoger {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
/*tabla de usuario*/ 
.tablauser {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #6e6dd6;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.tablauser table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.tablauser tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.tablauser table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.tablauser table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.tablauser tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.tablauser tr:hover td{
	
}
.tablauser tr:nth-child(odd){ background-color:#8abff7; }
.tablauser tr:nth-child(even)    { background-color:#ffffff; }.tablauser td{
	vertical-align:middle;
	
	
	border:1px solid #6e6dd6;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:19px;
	font-size:12px;
	font-family:Arial;
	font-weight:normal;
	color:#0600d1;
}.tablauser tr:last-child td{
	border-width:0px 1px 0px 0px;
}.tablauser tr td:last-child{
	border-width:0px 0px 1px 0px;
}.tablauser tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.tablauser tr:first-child td{
		background:-o-linear-gradient(bottom, #8abff7 5%, #3e98f2 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8abff7), color-stop(1, #3e98f2) );
	background:-moz-linear-gradient( center top, #8abff7 5%, #3e98f2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8abff7", endColorstr="#3e98f2");	background: -o-linear-gradient(top,#8abff7,3e98f2);

	background-color:#8abff7;
	border:0px solid #6e6dd6;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
.tablauser tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #8abff7 5%, #3e98f2 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8abff7), color-stop(1, #3e98f2) );
	background:-moz-linear-gradient( center top, #8abff7 5%, #3e98f2 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#8abff7", endColorstr="#3e98f2");	background: -o-linear-gradient(top,#8abff7,3e98f2);

	background-color:#8abff7;
}
.tablauser tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.tablauser tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
/*fin de tabla de usuario*/ 
.cabecera-barra .cabecera-barra-2 {
    background-color: #ffffff;
    box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
    padding: 20px 40px;
}
 
.cabecera-barra .cabecera-barra-2 h2 {
    line-height: 20px;
    margin: 0;
    float: left;
}
 
.cabecera-barra .cabecera-barra-2 h2 a {
    font-size: 16px;
    color: #4e5359;
    text-decoration: none;
}
 
.cabecera-barra .cabecera-barra-2 nav {
    text-align: right;
    line-height: 20px;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
 
.cabecera-barra .cabecera-barra-2 nav a {
    display: inline-block;
    color: #4e5359;
    text-decoration: none;
}
 
.cabecera-barra .cabecera-barra-2 nav i.fa {
    color: #A9B7BF;
    margin: 0 4px 0 15px;
}
 
 
/*  Hacemos responsive la cabecera usted podrá adicionar mas propiedades para diferentes dispositivos solo se ha usado dos para este demo . */
 
@media screen and (min-width: 600px) and (max-width: 1024px){
     
    .contenido, .contenido-lateral{
        width: 100%;
    }

}
@media screen and (max-width: 600px) {
    .contenido, .contenido-lateral{
        width: 100%;
    }
    .cabecera-barra .cabecera-barra-1{
        padding:20px 0;
    }
 
    .cabecera-barra .cabecera-barra-1 h1 {
        float: none;
        margin: -8px 0 2px;
        text-align: center;
        font-size: 24px;
        line-height: 1;
    }
 
    .cabecera-barra .cabecera-barra-1 nav {
        margin: 0;
        float: none;
        font-size:13px;
    }
 
    .cabecera-barra .cabecera-barra-1 nav a.activo {
        padding: 5px 8px;
    }
    .cabecera-barra .cabecera-barra-1 ul {
		display: none;
	}

 
    .cabecera-barra .cabecera-barra-2{
        padding: 20px 0;
    }
 
    .cabecera-barra .cabecera-barra-2 h2{
        float:none;
        margin: 0 0 12px;
    }
 
    .cabecera-barra .cabecera-barra-2 nav{
        text-align: center;
    }
 
    .cabecera-barra .cabecera-barra-2 nav a{
        display: block;
        padding: 8px;
    }
 
    .cabecera-barra .cabecera-barra-2 nav i.fa{
        margin-left:0;
    }
	
}
@media screen and (max-width: 480px) {
    .contenido{
        background-color: rgb(250, 250, 168);
    }
 
    .contenido, .contenido-lateral{
        width: 100%;
    }

    .cabecera-barra .cabecera-barra-2 nav{
        font-size:14px;
    }
    .cabecera-barra .cabecera-barra-1 ul {
		display: none;
	}
	.post .input{ width:15px;}

}

include.php .- Se encargará de crear funciones para verificar si está correcto el correo ,limpiar variables y sacar los nombres de usuarios con una función.

<?php
/* obtener nombre de usuario*/
function nombre_user($iduser){
	  
	  global $link;
      mysqli_select_db($link, "pruebas");
	  $query_obtenernombre = sprintf("SELECT login_php_mysql_foto_prefil.nick_user FROM login_php_mysql_foto_prefil WHERE login_php_mysql_foto_prefil.id_user = %s",$iduser,'int') ;
	  $obtenernombre = $link->query($query_obtenernombre);
      $row_obtenernombre = $obtenernombre->fetch_assoc(); 
	  $totalRows_obtenernombre = mysqli_num_rows($obtenernombre);
	  
	  return $row_obtenernombre['nick_user'];
	  $obtenernombre->free();
	}
	
  /*Función que se encarga de eliminar codigo malicioso de las variables.*/
  function limpiar($var)
  {
	  $var = trim($var);
	  $var = htmlspecialchars($var);
	  $var = str_replace(chr(160),'',$var);
	  return $var;
  }
  
/*Función que se encarga de validar el email de registro para que sea correcto.*/
function validar_email($email){
    $mail_correcto = 0; 
    //compruebamos
    if ((strlen($email) >= 6) && (substr_count($email,"@") == 1) && (substr($email,0,1) != "@") && (substr($email,strlen($email)-1,1) != "@"))
    { 
       if ((!strstr($email,"'")) && (!strstr($email,"\"")) && (!strstr($email,"\\")) && (!strstr($email,"\$")) && (!strstr($email," ")))
       {//miro si tiene caracter .
          if (substr_count($email,".")>= 1)
          {//obtengo la terminacion del dominio 
             $term_dom = substr(strrchr ($email, '.'),1); 
             //compruebo que la terminaci?n del dominio sea correcta 
             if (strlen($term_dom)>1 && strlen($term_dom)<5 && (!strstr($term_dom,"@")) )
             {//compruebo que lo de antes del dominio sea correcto 
                $antes_dom = substr($email,0,strlen($email) - strlen($term_dom) - 1); 
                $caracter_ult = substr($antes_dom,strlen($antes_dom)-1,1); 
                if ($caracter_ult != "@" && $caracter_ult != ".")
                { 
                   $mail_correcto = 1; 
                }
             }
          }
       }
    }
    if ($mail_correcto) 
       return 1;
    else 
       return 0;
}

?>

desconectar.php .- Se encargará de cerrar las sesiones abiertas por los usuarios al momento de loguearse.

<?php 
//incluimos la conección
require_once('../conexion.php');
?>
	<?php
		// ** cerrar sesion **
		if(isset($_GET['modo']) == 'desconectar')
		{
		  
		//limpiamos todas las variables de sesion iniciadas
		$_SESSION['MM_Username'] = NULL ;
		$_SESSION['MM_Id'] = NULL;
		$_SESSION['MM_Nick_user'] = NULL;
		$_SESSION['MM_Foto_user'] = NULL;
		$_SESSION['MM_mail_user'] = NULL;

		  unset($_SESSION['MM_Username']);
		  unset($_SESSION['MM_Id']);
		  unset($_SESSION['MM_Nick_user']);
		  unset($_SESSION['MM_Foto_user']);
		  unset($_SESSION['MM_mail_user']);				  

		  //redireccionamos al index
		  header ("Location: http://localhost/proyecto/");

		}
  ?>

carga_imagen.js.- Sirve para mostrar la imagen cargada previamente por el usuario , si no le gusta puede modificar por otra.

function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

cabecera_barra1.php .- Se encargará de mostrar datos de sesión si el usuarios se ha logueado correctamente.

        <div class="cabecera-separador">
 
            <h1><a href="index.php">Bloguero<span> ec</span></a></h1>
 
            <nav>
                <a href="#" class="activo">Ver Tutorial</a>
            </nav>

	 		<?PHP
			//si no se ha iniciado Sesión
			   if (!isset($_SESSION['MM_Id']))
			   {
			?>

            <ul>
			    <li><a href="login.php">Login</a></li>
				<li><a href="registro.php">Registro</a></li>
			</ul>

             
             <?php
			  }
			 else
			  { //sesion iniciada
			 ?>	 
			    <div class="header-user-menu">
                  
                  <img src="user/<?php echo $_SESSION['MM_Foto_user']; ?>" alt="User Image" />
      
                  <ul>
                      <li><?php echo  nombre_user($_SESSION['MM_Id']);?></li>
                      <li><a href="perfil.php"><i class="fa fa-user"></i> Perfil</a></li>
                      <li><a href="include/desconectar.php?modo=desconectar" class="highlight"><i class="fa fa-sign-out"></i> Salir</a></li>
                  </ul>
              </div>
			<?php }?>
            
        </div>

cabecera_barra2.php.- Se encargará de mostrar una barra en la parte superior de la página

   <div class="cabecera-separador">
     <h2><a href="http://www.bloguero-ec.com">Bloguero-ec</a></h2>
        <nav>
          <a href="index.php"><i class="fa fa-home"></i> Inicio</a>
          <a href="perfil.php"><i class="fa fa-user"></i> Perfil</a>
          <a href="#"><i class="fa fa-download"></i> Descargar</a>
         </nav>
  </div>

contenido_lateral.php .- Mostrará el lado lateral de la página podrás colocar cualquier contenido

    <aside class="contenido-lateral">
      <div align="center">
		<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>
    </aside>

footer.php .- mostrará la barra inferior de la página podrás hacer uso de este ingresando cual quier footer este es solo para el demo.

    <footer class="pie-pagina">
      <div align="center">
		<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>
    </footer>

tabla.sql .- creacion de la tabla para ingresar los datos .

CREATE TABLE IF NOT EXISTS `login_php_mysql_foto_prefil` (
`id_user` int(11) NOT NULL,
  `correo_user` varchar(100) COLLATE utf8_spanish2_ci NOT NULL,
  `nick_user` varchar(100) COLLATE utf8_spanish2_ci NOT NULL,
  `pass_user` varchar(100) COLLATE utf8_spanish2_ci NOT NULL,
  `foto_user` varchar(200) COLLATE utf8_spanish2_ci DEFAULT NULL,
  `rango` int(11) NOT NULL,
  `estado` varchar(1) COLLATE utf8_spanish2_ci NOT NULL,
  `fecha_baja` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci;

Para la utilización de esta demostración si deseas cambiar tu foto de perfil deberás utilizar una imagen jpg , png , gif ó jpeg y deberás acceder a perfil.php desde la barra superior de la web , este es una simple demostración espera les sirva en algún proyecto. Saludos….

DEMOSTRACIÓN

  • NadiaTefi

    Hola!! me da un par de errores 🙁 podrías poner el proyecto para descargar?? Gracias por tu ayuda, lo probe en la demo y está genial! ojalá lo pongan para descargar 🙂

    • Saludos me podrías indicar el error……

      • Rogue Arterio

        Warning: include(cabecera-barra1.php): failed to open stream: No such file or directory in C:xampphtdocsBiblioVirtualindex.php on line 31

        Warning: include(): Failed opening ‘cabecera-barra1.php’ for inclusion (include_path=’.;C:xamppphpPEAR’) in C:xampphtdocsBiblioVirtualindex.php on line 31

        Deberá Iniciar sesión para ver su perfil…

        • Ese error indica que el archivo cabecera-barra1.php no existe o no lo has creado dentro de C:xampphtdocsBiblioVirtual y el index no puede acceder a ella arriba está el archivo solo crealo y copia el contenido dentro para obtener el resutado..
          Saludos.

          • Gundo

            Este error se soluciona así:

            lo de este error:
            cabecera-barra1.php
            verificando en mi caso es porque: cabecera_barra1.php

            bueno hay errores de sintaxis, al momento de copiarlo el codigo facilitado por Bloguero-ec.

            agradezco por el aporte de compartir el codigo. pero hay errores que no he podido dar solucion.

            si podria facilitarnos el codigo fuente para descargarlo seria genial, pero en todo caso me gustaria que me ayudara a dar solucion a algunos errores.

  • Gundo

    Hola. excelente aporte, en la demostración funciona excelente. pero al momento de querer probarlo me arroja el siguiente error:

    Fatal error: Call to a member function query() on a non-object in C:AppServwwwperfilregistro.php on line 29

    e verificado el archivo en mencion pero no se donde esta el error:

    $consulta = “SELECT correo_user FROM login_php_mysql_foto_prefil WHERE correo_user=’$mail_user'” or die(“Error en la consulta” . mysql_error($link));

    $resultado_consulta = $link->query($consulta);

    //colocamos error en false por el momento

    $error = false;

    Agradezco de ante mano su ayuda. Gracias

    • Saludos, revisando el código estoy comprobando que marcha bien desde mi localhost. Pense que podría ser por error de servidor ya que yo uso xampp , pero deberías revisar bien tus tablas y bases de datos ya que podrías estar usando una diferente…

      • Gundo

        Ok, lo revisare… y os dire como me fue, Muchas Gracias.

        • No creo aunque verifica que estes usando siempre las ultimas versiones …

          • Gundo

            revisando y haciendo modificaciones y actualizando mi servidor, ahora me sale este mensaje, creo que no esta habilitada la la funcion mysqli_connect(). se podra resolver este inconveniente.

            Fatal error: Call to undefined function mysqli_connect() in C:AppServwwwgundoconexion.php on line 9

          • Instala la version mysqli php en tu servidor..verifica el archivo php.ini y verifica que esté habilitada.

          • Gundo

            Actualice todo y funciona de maravilla… Muchas gracias por tu tiempo, apoyo y ayuda..

          • Ok saludos…

  • serg guzman

    me pueden ayudar no me carga la imagenes sale como si la foto estuviera rota

    • serg guzman

      alguien me ayuda porfa

      • Saludos verifica la ruta del script que se encuentre bien ubicada:

  • Jose Diaz

    Esta super tuvo algunos errores pero faciles de soluconar gracias

  • Fernando Rumbo

    Hola! Me podrías decir si el archivo custom.js sirve para algo en especial? O puedo usarlo así sin ningún problema? Buenisimo el tutorial!

    • Saludos el archivo custom.js hace la carga de la imagen de la clase fancybox en el tutorial está como utilizar esta librería.

      // JavaScript Document

      $(document).ready(function() {

      $(“#single_4”).fancybox({

      helpers : {

      title : {

      type : ‘over’

      }

      }

      });

      });

      • Fernando Rumbo

        Gracias por responder hermano, funciona bastante bien tu tutorial! Facinante!

  • serg guzman

    Hola una consulta de donde saco los scripts?

  • Eduard Aguilar

    tienes los codigo en github por casualidad?

  • Pingback: Login php mysql con jQuery y Ajax para web - Bloguero-ec()

  • Diego Alejandro Fajardo Lotero

    hola mira me sale este error me puedes ayudar
    Fatal error: Call to a member function fetch_array() on boolean in E:xampphtdocsejemploregistro.php on line 44

    (linea44-) elseif($res=$resultado_consulta->fetch_array())
    {
    @$errores[“mail_user”] = “¡El email ya esta registrado.!”;
    $resultado_consulta->free();
    $error = true;
    }

    • Martin Gorgojo Lopez

      Hola a mi me sale ese error en la pagina de registro y en la de login en la linea 59.
      Saludos y gracias por el aporte

      • Saludos creen una nueva consulta y sin duda les resultará lo mismo…

    • Crea una nueva consulta mysqli y solucionarás ese problema..
      Saludos.

  • jeannette lozano

    no deberia incrustarle publicidad de google, en la parte del index en la linea nos engaña diciendo contenido_lateral.php .- Mostrará el lado lateral de la página podrás colocar cualquier contenido cuando es publicidad, ademas el codigo le faltan partes que malo, y asi es todo este portal.????

  • Bruno Rojas Segura

    Una consulta, que debería añadir si lo que quiero es que cada usuario tenga una lista indefinida de imágenes propias? … supongamos tengo la tabla “documentos” donde cada ingreso tienes su propio “id” y un “id_login” …como termino enlazando las tablas y mostrando los contenidos correspondientes de cada usuario?

    MIl Gracias

  • Victor Gomez

    HERMANO BUENOS DIAS TENDRAS LOS ARCHIVOS FUENTES PARA QUE LOS COMPARTAS PARA DESCARGARLO QUE USO LO QUE ESTAN ALLI CONECTA A LA BD PERO NO ALMACENA LOS DATOS DICE REGISTRADO CON EXITO PERO CUANDO VAS A LOGEO DICE QUE NO HICISTE EL USERS Y CUANDO VAS A LA BD NO HAY DATOS INSERTADO

  • Eduard Aguilar

    le hace falta explicar mas…no dejas ni enlace de ese fancybox

    • Saludos Eduard los enlaces se encuentran desde una web externa en el post . Al principio indica que tienes que tener conocimiento previo a php y mysqli , para asi poder entender el codigo..

  • Eduard Aguilar

    la imagen por default,al ingresar donde la ubico?o como hago en ese caso?

  • Lenin Morales Rivera

    No es por molestarte, una pregunta, como ya tengo mi login aparte, no te molesta si tomo solo la sesión de perfil, porque lo unico que me interesa es la foto del perfil.

    • Saludos. Este login puedes implementarlo de la manera que mejor te convenga.

  • ayuda pls

    por que se le pone la ‘MM’ en $_SESSION[‘MM_ID’] o $_SESSION[‘MM_nick_user’] ???????

    • Saludos . eso es solo una variable de sesión puedes nombrar tus variables de sesion como mas te convenga… Y después usarlas en todo el sitio. Recuerda que el nombre a usar deberás usar en todo el sitio..

      • ayuda pls

        Gracias viejo!!! Sigue asi haha

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: