Logueo con PHP

Hola!!!, antes que nada quisiera mencionar que este es mi primera publicacion así que tratare de ser breve y conciso.

Bueno esta vez quisiera comenzar con algo simple, un logueo con PHP, para esto necesitaremos tener instalado un servidor PHP; yo en lo personal instale el servidor XAMPP(http://www.apachefriends.org/es/xampp.html), solo lo descargamos y lo instalamos, para comprobar que se instalo correctamente vamos a nuestro explorador y tecleamos localhost/xampp o 127.0.0.1/xampp y nos tiene que aparecer algo parecido a esto:
 

Partiremos del hecho de que tenemos nuestra pagina de la siguiente manera:

 
No abunde mucho en código, simplemente es esto:

<html>
<head>
    <title>
        Logueo con PHP by Brion
    </title>
</head>
<body>
    <center>
        Pagina de Inicio!!!
    </center>
</body>
</html>

 Ahora para crear un logueo necesitaremos 2 cajas de texto, una para el usuario y otra para la contraseña, así que hay que modificar un poco nuestro código, para que quede de la siguiente manera:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!--Esta Linea es para que nos muestre la Ñ-->
    <title>
        Logueo con PHP by Brion
    </title>
</head>
<body>
    <center>
        Pagina de Inicio!!!<br>
        <form method="post" action="index.htm">
        <table>
            <tr>
                <td>Usuario</td><td><input type="text" size="10" maxlength="10" name="user"></td>
            </tr>
            <tr>
                <td>Contraseña</td><td><input type="password" size="10" maxlength="10" name="pass"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="Iniciar" name="Iniciar"></td>
            </tr>
        </table>
        </form>
    </center>
</body>
</html>

Le he agregado una tabla para darle un poco de estética y una linea extra, en el código explico que es para que la letra Ñ se muestre adecuadamente; con esas lineas tendríamos una pagina con un inicio de sesión decente:

Ahora haremos unos cambios, nuestra pagina se llama: index.htm, pero necesitamos que sea un archivo PHP, así que renombramos nuestro archivo de la siguiente manera: index.php; Una vez hecho esto nos dirigiremos a la ruta donde instalamos nuestro servidor XAMPP y ubicamos la carpeta htdocs y hay creamos una carpeta(yo la he nombrado logueo) y hay copiaremos y pegaremos nuestro archivo index.php, ya que al ser un archivo php este necesita un servidor donde correrlo. Para comprobarlo nos dirigimos a nuestro explorador y tecleamos lo siguiente: localhost/logueo/index.php; nos tendría que aparecer la pagina idéntica a la imagen anterior. Seguidos estos pasos ahora podremos crear nuestro logueo.

Apartir de este punto lo siguiente es puro código, así que abriremos nuestro archivo index.php con nuestro editor de texto preferido y modificaremos lo siguiente:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>
        Logueo con PHP by Brion
    </title>
</head>
<body>
<?php
    if(isset($_POST["Iniciar"])){
        $usuario=$_POST["user"];
        $contraseña=$_POST["pass"];
        if($usuario=="Brion" AND $contraseña=="hola"){
            echo "<h1>Bienvenido Sr. $usuario</h1>";
        }
    }
?>
    <center>
        Pagina de Inicio!!!<br>
        <form method="post" action="index.php">
        <table>
            <tr>
                <td>Usuario</td><td><input type="text" size="10" maxlength="10" name="user"></td>
            </tr>
            <tr>
                <td>Contraseña</td><td><input type="password" size="10" maxlength="10" name="pass"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="Iniciar" name="Iniciar"></td>
            </tr>
        </table>
        </form>
    </center>
</body>
</html>

Con esto nuestro logueo simple habrá quedado y una vez introducidos nuestro usuario(Brion) y la contraseña(hola), nos aparecerá lo siguiente:
Nadamas aclarare que esto es un logueo estático, en otra ocasión mostrare como crear un logueo dinámico, así que me despido espero que estén bien y bueno espero sus comentarios ^_^. Les dejo un link(http://www.mediafire.com/?cs9q244agyou9de) con el archivo index.php para que lo descarguen y bueno, hay explico cosas mas a fondo del código que ya mencione antes

Location: Lagos de Moreno, JAL, México

Comments

Post a Comment

Popular posts from this blog

Juego de Gato Usando HTML, JavaScript y CSS

Hola chavos en esta ocasión les traigo algo que realize en mis tiempos de ocio durante mi trabajo, es un juego simple de Gato o TicTacToe. Este post tiene algo de relevancia ya que he usado algunas características que les pueden ser útiles: CSS hover reaccionar cuando el cursor pasa por encima de un objeto shadow crear objetos en HTML con sombra position Colocar un objeto justo en el centro de la pantalla JavaScript Interactuar con objetos de Html cambiándoles algunos atributos como class, value, etc. HTML Interactuar con funciones de JavaScript Bueno chavos sin mas por el momento les dejo mi código: //TicTacToe.htm <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>TicTacToe</title> <link rel="stylesheet" type="text/css" href="TicTacToeCSS.css" /> <script type="text/javascript" src="TicTacToe.js"> </script> </head> ...
Read more

AfterEffects - Quitar el Fondo de un Video Forma 1: KeyLight

Image
Antes que nada hola a todos ^_^.....en este tutorial les enseñare a quitar el fondo de un video y ya sea poner una imagen u otro video atras del video sin fondo. Existen 3 maneras de hacerlo: ChromaKey(Obsoleto) KeyLight RotoBrush En este tutorial me enfocare en el KeyLight, el cual es la evolucion(por así decirlo) del Chroma Key, esta herramienta ha ganado un Oscar gracias a su potencia y facilidad de usar. Para este tutorial necesitaremos: Adobe After Effects Instalado(yo utilizo el Ae CS6) Un video con FONDO VERDE(No es tan importante el color de fondo de los videos, de preferencia tiene que ser un color distinto a cualquier color de lo que queremos conservar, para asi conservar intacta la parte que queremos dejar, yo recomiendo cualquier color chillón) Un video o imagen que queremos poner de fondo nuevo Ya que tengamos esto, seguimos los siguientes pasos: Abrimos nuestro AfterEffects Una Vez abierto añadimos los 2 videos o el video y la imagen, para este ejem...
Read more

Crear un nuevo Libro de Excel con VBA ES

Image
Hola a todos, hoy les voy a enseñar como crear un nuevo libro de excel con VBA; ustedes lo pueden crear desde Excel o PowerPoint u otro programa de Office, solo necesitan tener la referencia necesaria. Ok antes que nada sie stamos en excel no necesitamos ninguna referencia ya que estas se agregan automáticamente, pero si no lo estamos necesitamos añadir la referencia de la siguiente manera: Click en Herramientas->Referencias Encuentren y seleccionen la librería: Microsoft Excel 14.0 Object Library Click en Ok Ahora crearemos el nuevo Libro, Yo lo voy a crear desde excel y bueno antes de empezar necesitamos tener nuestro ambiente de programación, si no saben como llegar a este paso solo denle click aquí para que vean en el post previo como llegar a esta parte, Ahora empecemos: Click derecho en This Document->Insertar->Modulo Ahora escribamos el siguiente código: Sub createNewWorkbook()     Dim newBook As Workbook   ...
Read more