para conseguir esto vamos a crear lo necesario:
1) el archivo login.php
2) el archovo stylo.css
3)el archivo fecha.php
4) el archivo nuevasesion.php
deben dejar los archivos 1 y 2 juntos y los archivos 3 y 4 crean una carpeta llamada log y los colocan alli y por ultimo crean otra carpeta llamada img donde van las imagenes
Archivo login.php
<html>
<head>
<title>Miguel António Morillo</title>
<link rel='stylesheet' type='text/css' href='stylo.css'>
<link rel='shortcut icon' href='img/indice.png'>
</head>
<?php
$_SESSION['usuario'] = '';
?>
<body style='background-color:#DDD;'>
<div id='contenedor'>
<div id='banner'>
<img src='img/banner.png'>
</div>
<br>
<div id='fecha'>
<?php include 'log/fecha.php'; ?>
</div>
<br>
<div id='sesion'>
<?php
if(isset($_POST['submit'])){
$user = $_POST['usuario'];
$user = mysql_real_escape_string($user);
$pass = $_POST['clave'];
$pass = mysql_real_escape_string($pass);
$clav = sha1($pass);
$ver = "SELECT * FROM log_doc WHERE usuario = '$user' AND clave = '$clav'";
$verificar = mysql_query($ver);
$datos = mysql_fetch_array($verificar);
$name1=$datos['nombre'];
$name2=$datos['apellido'];
$nombre_usu = $datos['usuario'];
$perm = $datos['priv'];
if(($datos['usuario'] == $user)&&($datos['clave'] == $clav)){
include 'log/nuevasesion.php';
echo"
<head>
<meta content='3;index.php' http-equiv='REFRESH'> </meta>
</head>
<body>
<font face='Verdana' size='3' color=#333;><center><img src='img/cargando.gif' width='' height='20px'> Iniciando Sesión...</center></font>
</body>
";
}else{
session_unset();
echo "<center>
<font face='Verdana' size='2' color=red>ERROR. Usuario y/o Clave incorrectos, verifique e intente nuevamente.</font> <br><br>
</center>";
}
}
?>
</div>
<div id='form'>
<form method='post' action='' name='formulario'>
<table id='tab'>
<td colspan=3>
<div id='titulo'>
INICIAR SESIÓN
</div>
</td>
<tr>
<td rowspan=2 class='sesion'>
<img src='img/docente.png' class='img_sess'>
</td>
<td>
<input type='text' name='usuario' class='campo' required autocomplete='off' placeholder='Usuario'>
</td>
<tr>
<td>
<input type='password' name='clave' class='campo' required placeholder='*********'>
</td>
<tr>
<td colspan=2 align='center'>
<label><a href='usuario/index.php'>Crear Usuario</a></label>
</td>
<tr>
<td colspan=2 align='center'>
<label><a href='recuperar/recuperar.php'>¿Olvidó su Contraseña?</a></label>
</td>
<tr>
<td colspan=4 align='center'>
<br>
<input type='submit' name='submit' value='Iniciar Sesion' class='submit' id='submit'>
</td>
</table>
</form>
</div>
<div id='pie'>
Liceo Nacional Bolivariano | Miguel António Morillo - Arismendi Estado Barinas.<br>
Desarrollado por: Pedro Rojas<br> Tlno. 0416-4344037 Correo: [email protected]
</div>
</div>
</body>
</html>
Archivo stylo.css:
#contenedor{
margin:0 auto;
padding:30px 30px;
width:75%;
height:auto;
border:1px solid #999;
background-color:#EEE;
min-width:950px;
}
#banner{
width:100%;
margin:0 auto;
}
#banner img{
width:100%;
height:120px;
}
span{
color:#C02;
font-size:18px;
font-weight:bold;
}
#fecha{
text-align:right;
color:#333;
font-family:sans-serif;
font-size:13px;
border-bottom:1px solid #999;
padding-bottom:1em;
}
#form{
width:83%;
margin:10px auto 0 auto;
font-family:sans-serif;
color:#444;
}
#tab{
width:50%;
margin:0 auto;
}
#titulo{
text-align:center;
background-image:url(.img/fondo_bar.png);
width:100%;
padding:6px 0px;
color:#EEE;
font-family:sans-serif;
font-weight:bold;
border-radius:8px 8px 0 0;
}
label{
color:#444;
font-family:sans-serif;
font-size:15px;
}
.campo{
width:99%;
height:27px;
border:1px solid #999;
margin:3px;
padding:2px 0px 0px 5px;
}
.campo:focus{
border:1px solid #C02;
}
.oblig{
color:#C02;
font-weight:bold;
font-size:15;
}
.submit{
width:145px;
height:40px;
background-color:#DDD;
border:1px solid #999;
color:#444;
cursor:pointer;
}
.submit:hover{
background-image:url(img/fondo_bar.png);
color:#FFF;
}
#sesion{
margin:10px auto;
height:30px;
}
#pie{
margin:50px 0px 30px 0px;
text-align:center;
color:#777;
font-family:sans-serif;
font-size:small;
border-top:1px solid #999;
padding-top:1em;
}
.sesion{
padding:0px;
width:100px;
}
.img_sess{
width:100px;
height:100px;
padding:0px;
}
fecha.php
<?php
date_default_timezone_set("America/Caracas" ) ; //aqui colocan el nombre de la ciudad capital del pais donde viven
$tiempo = getdate(time());
$dia = $tiempo['wday'];
$dia_mes=$tiempo['mday'];
$mes = $tiempo['mon'];
$year = $tiempo['year'];
$hora= $tiempo['hours'];
$minutos = $tiempo['minutes'];
$segundos = $tiempo['seconds'];
$municipio = 'Arismendi,'; //aqui colocan el nombre de la ciudad donde viven
switch ($dia){
case "1": $dia_nombre="Lunes"; break;
case "2": $dia_nombre="Martes"; break;
case "3": $dia_nombre="Miércoles"; break;
case "4": $dia_nombre="Jueves"; break;
case "5": $dia_nombre="Viernes"; break;
case "6": $dia_nombre="Sábado"; break;
case "0": $dia_nombre="Domingo"; break;
}
switch($mes){
case "1": $mes_nombre="Enero"; break;
case "2": $mes_nombre="Febrero"; break;
case "3": $mes_nombre="Marzo"; break;
case "4": $mes_nombre="Abril"; break;
case "5": $mes_nombre="Mayo"; break;
case "6": $mes_nombre="Junio"; break;
case "7": $mes_nombre="Julio"; break;
case "8": $mes_nombre="Agosto"; break;
case "9": $mes_nombre="Septiembre"; break;
case "10": $mes_nombre="Octubre"; break;
case "11": $mes_nombre="Noviembre"; break;
case "12": $mes_nombre="Diciembre"; break;
}
$fecha = $municipio." ".$dia_nombre." ".$dia_mes." de ".$mes_nombre." de ".$year;
echo $fecha;
?>
nuevasesion.php
<?php
$_SESSION['id'] = session_id();
$_SESSION['usuarioid'] = $user;
$_SESSION['apo'] = $nombre_usu;
$_SESSION['nick'] = $name1 ." ". $name2;
$_SESSION['privilegios'] = $perm;
@$_SESSION['cedula'] = $nu_ce;
?>
Aqui colocan los campos que quieren que su sesion guarde para que los pueda guardar en y mostrar durante toda la sesion, esto es en caso que trabajen son sesiones de lo contrario pueden quitarlo del codigo.
para la imagen .gif que aparece mientras inician pueden crearla qui como mejor la prefieran
http://www.ajaxload.info/
Se debe tener en cuenta que hay imagenes que ustedes deberan agregar y renombrar o cambiar el nombre por los de sus imagenes.