Diseño Web [Registro]

Después de muchos pedidos decidí abrir esta nueva sección, lo que vamos aprender acá es a diseñar nuestra propia página Web Mu.
El programa que voy a utilizar a lo largo de este tutorial y las próximas secciones será el Dreamweaver 8.0 que puede descargarlo en este sitio.
En esta sección iré publicando poco a poco los distintos módulos que tiene un Web, comenzaré con los más básicos y más utilizados en este caso veremos como implementar el módulo de registro de cuentas.
Este tutorial se basará netamente en .html y .php (No trabajaremos aquí con archivos en .flash, para esto busquen en la otra sección de nuestro sitio)



Lo primero que necesitamos será un diseño Web que lo podemos hacer a mano o descargarlo desde cualquier sitio Web.
Yo voy a utilizar un diseño que ya tiene un skin de juego.
Lo primero que haremos será abrir el archivos 19.rar y copiamos la carpeta en el escritorio, como ya lo saben el primer archivo que lee cualquier Apache (Que es lo que normalmente usamos nosotros) es el index.html o index.php (También lo pueden encontrar con el nombre de inicio.php o inicio.html)
Sin perder tiempo vamos a los pasos:
1) Abrimos el archivo index.php con el Dreamveawer 8.0, para esto hacemos un click derecho al archivos index.html, abrir con... Dreamweaver

Abriendo archivo index html

2) Ahora veamos rápidamente algunos botones del Dreamweaver, la forma más sencilla y práctica para trabajar es usar la opción llamada DIVIDIR.
Esa opción nos permite visualizar el código de la Web y además una interfaz gráfica (obviamente que esa interfaz gráfica sólo es visible siempre y cuando las imágenes y links estén en la misma carpeta y el programa tenga acceso a ellas.
También deben saber que no todos los códigos poseen interfaz gráfica, por ejemplo una hoja de estilo .css)
Veamos el botón dividir mencionado anteriormente y también veamos una de las primeras herramientas de este programa, fíjense que yo hice un click sobre el banner y el programa automáticamente me marca donde se encuentra alojado ese código; Revisen con cuidado y detalladamente la siguiente imagen.

Modificando el header

3) Lo que haremos ahora será editar todo lo necesario y lo que no nos sirva lo borraremos. Este trabajo lo haremos de una manera muy fácil, marcamos con el mouse lo que queremos modificar y sino queremos modificalor, simplemente lo borrarmos apretando la tecla "SUPRIMIR"
Debería aclarar que las imágenes no las podemos editar así, lo que podemos hacer es un click sobre la imagen. luego vemos el nombre, entramos a la carpeta y las editamos con algun procesador de imágenes.
Luego las volvemos a pegar con el mismo nombre.
Lo que si podemos editar con el Dreamweaver es el tamaño de las imágenes (Pero esto puede causar un pixelo)
Veamos como quedo:

Header modificado

4)Simplemente lo hice fue editar imágenes y textos , el mecanismo es el mismo marcamos con el mouse lo que queremos editar, algo similar sucede con las imágenes , entramos la carpeta que descargamos buscamos la imágenes las editamos y luego las guardamos con el mismo nombre y en el mismo directorio.
Ahora vamos a un paso importante, veamos como hacer los links y como funciona:
Para esto hacemos un click en donde dice

"link 1 here"
en la parte gráfica y automáticamente el Dreamveawer nos llevará a donde está alojado el código.
Lo que debemos entender básicamente, es que un link está compuesto por dos partes:
La primera es la parte visible en este caso "link 1 here" y la segunda parte es el enlace al cual nos dirige la página al hacer click sobre él, es decir, al hacer un click en la parte visible en este caso "link 1 here".
Entonces lo que vamos hacer será cambiar ambas partes.
Yo trabajaré en http://localhost/ así que cuando yo ponga http://localhsot/ ustedes deben poner su IP numérica o su no-ip (por ejemplo tuservermu.sytes.net)
En la parte visible vamos a poner "inicio" o "Página principal”, entonces al hacer click en "inicio" o "pagina principal" nuestra Web volverá a cargar ya que pusimos como enlace nuestra URL inicial. Esto se aplica siempre en todas las páginas Webs.
Por ahora tenemos un sólo módulo, pero a medida que vallamos agregando más módulos, es necesario un botón que nos lleve al inicio,
Veamos como quedaría el código editado:

Modificando links del sitio web

5)Lo que haremos ahora será pasar la Web de .html a .php, para eso guardamos los cambios en el Dreamveawer (de forma rápida sería "Control+s") y copiamos todo el contenido de los archivos descargados y los pegamos dentro de la carpeta www (Si usamos Appserv), ubicada generalmente en
C:\AppServ\www
o en la carpeta
C:\Xampp\htdocs
si usamos XAMPP
Lo que debemos hacer es simplemente cambiar la extensión .html por la extensión .php
Para esto en nuestra ventana de la carpeta www o xampp o de cualquier carpeta la abrimos y vamos a HERRAMIENTAS=>OPCIONES DE CARPETA=>VER y buscamos una opción llamada
Ocultar las extensiones de un archivo para tipo de archivos conocidos
y le sacamos el tilde, ponemos aplicar y aceptamos.

Configurando visibilidad de las extensiones

6)Ahora volvemos a la carpeta www o htdocs, buscamos el archivo index.html borramos el .html y ponemos .php, debería quedarnos el archivo renombrado de la siguiente forma
index.php
Ahora hacemos el paso inverso que el anterior, es decir, ocultamos las extensiones de los archivos ya que esta configuración afecta a todo el sistema operativo.
(Esto lo hicimos para trabajar con todos los archivos en .php y no mezclar, si bien podríamos tener el index en formato .html o podemos tener el formulario de registo en .html lo que nos puede jugar en contra es si queremos agregar algun sistema de captcha a un formato .html se nos puede complicar si decidimos utilizar un tutorial standar)

Visualizando el sitio web

7)Para la creación del módulo "Registro" necesitamos descargar estos 4 archivos.
Una vez descargado, lo abrimos y lo pegamos en nuestra carpeta C:\AppServ\www o C:\xampp\htdocs
Veamos que es cada archivo y que función cumple:

  • El primer es el archivo llamado
    config.php
    es el archivo que hace la conexión entre la Web y nuestra base de datos, es por eso que debemos tener el SQL SERVER iniciado y tener un usuario SQL previamente configurado ,entonces abrimos el archivo y lo editamos de acuerdo a nuestros datos:
    $alogin: es la variable del login de nuestro sql server
    $apass: es la variable del password de nuestro sql Server
    $db: es la base de datos a utilizar, por defecto MuOnline
    $ip: es la IP donde esta alojado nuestro Server por defecto 127.0.0.1
    $host: es el host donde esta alojado nuestro Server por defecto 127.0.0.1
    $title: alguna variable que será llamada en algún proceso (título de la Web)
    $srvname: alguna variable que será llamada en algún proceso (nombre del Server)
    $credits: alguna variable que será llamada en algún proceso (créditos en el registro)
    Bueno si observan con atención verán este signo $ puesto antes de cada nombre, eso nos indica que es un variable.
    Por ejemplo si observan la última parte del registro
    $msconnect=mssql_connect("$host","$alogin","$apass");
    $msdb=mssql_select_db("$db",$msconnect);
    Esto nos indica lo siguiente $msconnect es ahora el valor de ("$host","$alogin","$apass") y los datos de esas variables las cargamos nosotros manualmente.
    Finalmente $msdb=mssql_select_db("$db",$msconnect); significa que $msdb es igual mssql_select_db donde esta última toma los valores de $db y $msconnect
    Se que les puede resultar complicado entender todo esto con esa breve explicación pero con el tiempo y con más tutoriales veremos con mayor profundidad todo esto.
    Después nos quedaron otras variables como $title , $srvname y $credits seguramente serán llamadas por otro archivo que veremos más adelante y ahí entenderemos que es un variable y como funciona.

  • El segundo archivo se llama
    reguser.php
    y es la interfaz gráfica del formulario de registro de cuentas de una Web-MuOnline

  • El tercer archivo se llama
    idreg.php
    este archivo se encargará de recibir todas la variables que nos envie reguser.php, luego las procesará, analizará y tomará determianciones previamente programadas (Después lo veremos en detalle)

  • Y por último el archivo
    sql_inject.php
    es un archivo de seguridad que funciona como un verificador de caracteres a partir de las variables recibidas (También más adelante los vamos analizar en profundidad)

  • Archivos de seguridad del sitio web

    8)Lo que haremos ahora es abrir nuevamente el archivo index.php con el dreamveawer y vamos agregar un nuevo módulo, en este caso el registro de cuentas para nuestro servidor MuOnline.
    Entonces hacemos un click donde dice 2Link 2 here" y arriba, en la parte de programación reemplazamos el # por el "nuevo link" en mi caso será http://localhost/registro.php (ustedes deben cambiar el localhost por el IP o no.ip de su Server, tambien podemos escribir esto de otra forma sin necesidad de agregar siempre nuestra IP, pero eso lo veremos en otro tutorial]
    En parte que dice "Link 2 here" debemos poner el nombre visible. El método y la explicación es la misma que la que hicimos con el modulo INICIO.
    Debería quedarnos así:

    Agregando link de registro al sitio web

    9)Talvez se pregunten, ¿Para qué ponemos "registro.php" si ese archivo no existe?
    Si tu pregunta fue esa quiere decir que estás entendiendo todo a la perfección.
    Ese módulo registro.php no existe entonces vamos a crearlo.
    Si creamos un archivo cualquiera y le ponemos el nombre de registro.php cuando hagamos click en la sección del registro en nuestra Web, esta nos llevará ahí.
    Lo que haremos será copiar el archivo index.php y pegarlo ahí mismo, al pegarlo nos quería nombrado asi "copia de index.php" , inmediatamente lo que haremos será cambiar el nombre a de "copia de index.php" por este "registro.php"

    10)Abrimos el archivo reguser.php con el dreamveawer (en el dreamveawer pueden abrir varios archivos .php y podemos minimizarlos. Los cambios los podemos guardar de forma rápida apretando "Control+s" y para deshacer los cambios podemos utilizar la combinación de teclas: "Control+z")
    Al abrir el archivo reguser.php pueden ver en la interfaz gráfica, un modelo de registro ya predefinido, también verán unos cuadraditos que dicen PHP eso nos marca que ahí hay un llamado de código php o función.
    Lo primero que quiero que miren es arriba de todo ciertas cosas que son básicas.
    Si miran con atención al principio del código dice
    require "config.php"
    y también dice
    require "sql_inject.php"
    El significado de esto es importantísimo que lo sepan , en un lenguaje no tan técnico lo que dice es que para que se ejecute ese código "requiere", "necesita" esos dos archivos , es decir que si falta uno de ellos la Web no se ejecuta (cuando digo Web me refiero a ese módulo)
    Esto lo verán en cualquier código de cualquier Web MuOnline.
    Ahora sigan leyendo y fíjense que abajo dice
    print $title;
    Recuerden que les dije que $title es una variable y que la íbamos a ver más adelante, bueno acá la tenemos, print es imprimir en este caso imprime , muestra , el contenido de la variable $title (Sería el nombre de la ventana activa)
    Entonces ahora entienden qué es un variable, quiero que vean como viaja un dato de un lado a otro, revisen de nuevo el archivo config.php y editen esa variable $title con distintos valores (Relacionenlo con el "requiere" y tendrán respuestas más precisas)
    A continuación un imagen que detalla lo hablado:

    Modificando el título del sitio

    11)Lo que vamos hacer ahora es copiar el código de registro , entonces abrimos el archivo reguser.php y copiamos la parte del registro.
    Para eso hacemos un click sobre el recuadro que encierra todo la parte del registro luego un click derecho=>copiar

    Agregando los códigos del registro

    12)Ahora abrimos el archivo registro.php con el dreamveawer (Supuestamente tendrían que tenerlo ya abierto en el dreamveawer) y lo que hacemos es cambiar la parte donde pusimos las caracteristicas de nuestro server y pegar ahi el código que copiamos recientemente.
    El mecanismo es el mismo: seleccionamos con el mouse la parte del medio de la Web y arriba pegamos el código
    Ver imagen para entender mejor:

    Modificando el estilo css del registro

    13)Si cuando pegan el código les queda todo en blanco, hacen un click sobre la parte blanca y abajo tenemos las herramientas para editar el color (Más adelante veremos estilos .css), en la imagen anterior podes ver con detalles esto mencionado.
    Bueno también podemos editar los nombre y esas cosas, pero yo lo voy a dejar estandar, tal vez les cueste pegar el código, recuerden primero seleccionar correctamente con un click toda la parte de las tablas del registro, miren las líneas que se marcan para saber si estan haciendo lo correcto, y después las pegamos en el archivo registro.php
    Obviamente que vamos a pegarlo en la parte del medio reemplazando lo que escribimos como "Bienvenida al server", de esa manera conservamos el "contexto"
    Bueno voy a dejar pendiente la explicación de los códigos de como trabaja este registro.
    Esto es una introducción a diseño Web Mu, iré agregando nuevos tutoriales como el módulo cambiar password, mover personaje, resetiar personaje y muchos otros más.
    Seguramente Ustedes están cansados de leer y yo estoy cansado de escribir, nos tomamos un recreo y nos vemos en el próximo tutorial.
    Dejo la última imagen para que vean como quedo terminada la Web con el módulo completo del registro.

    Visualizando el registro finalizado

    ¿Necesitas ayuda? Visita www.iceventas.com y nosotros lo hacemos por ti.

    Se han publicado un total de 6 comentarios en Mu Online Tutoriales :

    28 de febrero de 2013, 14:18

    De verdad te pido muchisimas gracias por todo lo que aces ,Me An Reservido todos tus tutoriales que eh visto muchisimas gracias por todo =) Si tengo 1 duda se que cuento contigo =)

    1 de marzo de 2013, 13:09

    Nyx Zero: Siempre podrás contar con la ayuda de muonlinetutoriales.com.
    Saludos

    12 de septiembre de 2013, 16:56

    Amigo me gustaria colocar un registro asi en mi web, pero no encuentro donde descargar los archivos ¿crees que me puedas ayudar?

    12 de septiembre de 2013, 17:25

    Anónimo : En nuestra fan page /MuTutoriales o nuestro facebook /MuOnlineTutoriales tienes un pack de archivos el cual contiene todos nuestros trabajos realizados en los tutoriales.
    Saludos

    5 de marzo de 2014, 23:10

    OLA UNA PREGUNTA ERES DE PERU , NECESITO EL PROGRAMA SQL PERO EL VERDADERO PORQ SIEMPRE SE BAJAN IMITACIONES Q NO SIRVEN , QUIERO CREAR MI MU TENGO UNA PC WINDOW 7 , 32 BITES ..!!! HACE UN TIEMPO CASI HAGO UNO SINO Q EL SQL ME FALLO VE .-. NECESITO TU AYUDA MI CORREO ES renzodiaz79@yahoo.com ESPERO DIALOGAR CONTIGO PORFAS XVR ;)

    6 de marzo de 2014, 9:02

    Anónimo : Busca en la sección contacto y ahi tendrás los diferentes canales de comunicación.
    Saludos

    Publicar un comentario