DISEÑO WEB [REGISTRO I]

2)Ahora veamos rapidamente algunos botones del DreamWeaver , la forma mas sencilla para trabajar es usar la opcion llamada DIVIDIR , es opcion nos permite visualizar el codigo de la web y ademas una interfaz grafica (obviamente que esa interfaz grafica solo es visible siempre y cuando las imagenes y links esten en la misma carpeta y el programa tenga acceso a ellas).
Algo que no mencione anteriormente el formato .html permite al abrirlo poder visualizar la web ya que ella misma lee el formato , a diferencia del formato .php que si lo abrimos no podremos ver la web sino tenemos algun sofwate que levante los archivos ; por ejemplo el appserver asique trabajamos asi en .html y luego le cambiamos el formato [es super simple , cambiamos la extencion .html por .php] y pegamos todos los archivos en la carpeta www del appserv.
Bueno veamos el boton dividir mencionado anteriormente y tambien veamos una de las primeras herramientas de este programa , fijense que yo hice un click sobre el banner y al programa automaticamente me marca donde se encuentra alojado ese codigo; revisen con cuidado y detalladamente la siguiente foto.

3)Lo que vamos hacer ahora es borrar y editar todo lo necesario e lo que no nos sirva lo borramos , eso lo hacemos muy facilmente marcamos con el mouse lo que queremos modificar, borramos y escribimos , no creo que debria aclarar que las fotos no las podemos editar asi , lo que podemos hacer es un click sobre la foto vemos el nombre , entramos a la carpeta y las editamos con photoshop y luego las volvemos a pegar con el mismo nombre , creo que eso se da por sabido.
Veamos como quedo:
 

4)Bueno simplemente lo hice fue editar imagenes y textos , el mecanismo es el mismo marcamos con el mouse lo que queremos editar , y luego borramos y escribimos , algo similar sucede con las imagenes , entramos la carpeta que descargamos buscamos la imagenes las editamos y luego las guardamos con el mismo nombre y en el mismo lugar.
Bueno ahora vamos a un paso importante veamos como hacer los links y como funciona:
Hacemos un click en donde dice "link 1 here" en la parte grafica y en automaticamente el dreamveawer nos lleva a donde esta alojado el codigo.
Lo que debemos entender basicamente es que un link esta 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 dirigi la pagina al hacer click sobre en la parte visible en este caso "link 1 here".
Entonces lo que vamos hacer sera cambiar ambas partes yo voy a trabajar en http://localhost/ asique cuando yo ponga http://localhsot/ ustedes deben poner su ip numerica o su no-ip (por ejemplo tuservermu.sytes.net)y en la parte visible vamos a poner "inicio" o "pagina principal" , entonces al hacer click en "inicio" o "pagina principal" nuestra web volvera a cargar ya que pusimos como enlace nuestra pagina neutra. Esto se hace en todas las paginas webs ya que ahora tenemos un solo modulo pero a medida que vallamos agregando mas modulos , es necesario un boton que nos lleve al inicio, veamos como quedaria el codigo editado:

5)Bueno ahora lo que vamos hacer sera pasar la web de .html a .php , para eso guardamos los cambios en el Dreamveawer (control+s) y copiamos todo el contenido de los archivos descargados y los pegamos dentro de la carpeta www , ubicada generalmente en C:AppServwww y lo que debemos hacer es simplmente cambiar la extencion .html por la extencion .php
Para esto en nuestra ventana de la carpera www o de cualquier carpeta la abrimos y vamos a HERRAMIENTAS=>OPCIONES DE CARPETA=>VER y buscamos una opciones llamada " Ocultar las extenciones de un archivo para tipo de archivos conocidos" y le sacamos el tilde , ponemos aplicar y aceptamos.

6)Ahora volvemos a la carpeta www buscamos el archivo index.html borramos el .html y ponemos .php deberia quedarnos el archivo renombrado index.php, ahora hacemos el paso inverso que el anterior ocultamos las extenciones de los archivos ya esta configuracion afecta a todo el sistema operativo y puede llegar a ser molesta. Ahora ya tenemos nuestra web funcionando con el appserv:

7)Para la creacion del modulo registro de server mu necesitamos descargar 4 archivos que lo podemos DESCARGAR AQUI lo abrimos y lo pegamos en nuestra carpeta C:AppServwww veamos que es cada archivo y que funcion cumple:

• El primer es el archivo llamado config.php es el archivo que hace de coneccion entre la web y el server , es por eso que debemos tener el SQL SERVER iniciado y tener un usuario SQL previamente configurado , entonces abrimos el archivo y lo editamos:
  $alogin: es la variable del login sql server
  $apass: es la varialbe del password 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 sera llamada en algun proceso (titulo de la web)
  $srvname: alguna variable que sera llamada en algun proceso (nombre del server)
  $credits: alguna variable que sera llamada en algun proceso (cerditos en el registro)
  
  Bueno si observan con atencion veran este signo $ puesto antes de cada nombre , eso nos indica que es un variable por ejemplo si observan la ultima parte del registro
  $msconnect=mssql_connect("$host","$alogin","$apass");
  $msdb=mssql_select_db("$db",$msconnect);
  Este nos indica la siguiente $msconnect es ahora el resumen de ("$host","$alogin","$apass") y esas variables las cargamos nosotros manuamente y finalmente $msdb=mssql_select_db("$db",$msconnect); significa que $msdb es igual mssql_select_db donde esta ultima toma los valores de $db y $msconnect , es algo bastante avanzado de entender pero bueno esto es algo basico en diseño web despues nos quedaron otras variables como $title , $srvname y $credits seguramente seran llamadas por otro archivo que veremos mas adelante y ahi entenderemos que es un variable y como funciona.

• El segundo archivo se llama reguser.php es interfaz grafica del registro de cuentas de una web-mu

• El tercer archivo se llama idreg.php que es la parte de verificacion del archivo reguser.php (despues lo veremos en detalles)

• Y por ultimo el archivo sql_inject.php que es un verificador de caracteres (tambien mas adelante los vamos analizar)

8)Lo que hacemos ahora es abrir nuevamente el archivo index.php con el dreamveawer y vamos agregar un nuevo modulo , en este caso el registro de cuentas .
Entonces hacemos un click donde dice Link 2 here y arriba , en la parte de programacion reemplazamos el # por el nuevo link en mi caso sera http://localhost/registro.php (ustedes deben cambiar el localhost por el ip o no.ip de su server ]por ejemplo tuservermu.sytes.net[)y en la parte que dice Link 2 here debemos poner el nombre visible el metodo y la explicacion es la misma que la que hicimos con el modulo INICIO. Deberia quedarnos asi:

9)Pero se preguntaran , para que ponemos /registro.php si ese archivo no existe , si tu pregunta fue esa quiere decir que entendiste todo a la perfeccion y que vas super bien , es verdad ese modulo .php no existe entonces vamos a crearlo . Si creamos un archivo comun y le ponemos el nombre de registro.php cuando hagamos click en registro en nuestra web nos llevara ahi pero el modulo esta vacio , y sin formato original de la web , entonces lo que vamos hacer sera copiar el archivo index.php y pegarlo ahi mismo , nos queria algo de copia de index.php lo que hacemos es le cambiamos el nombre a registro.php

10)Abrimos el archivo reguser.php con el dreamveawer (en el dreamveawer pueden abrir varios archivos .php y podemos minimizarlos cuando queremos cambiar de uno a otro y los cambios los podemos guardar de forma rapida aprentado control+s )al abrir el archivo reguser.php peuden ver la interfaz grafica del sistema de registro ya predefinido , tambien veran unos cuadraditos que dicen PHP eso nos marca que ahi hay un llamado de codigo php.
Lo primero que quiero que miren es arriba de todo en la parte programable ciertas cosas que son basicas en cualquier web , si miran con atencion al principio del codigo dice require "config.php" , y tambien dice require "sql_inject.php" el significado de esto es importantisimo que lo sepan , en un lenguaje no tan tecnico lo que dice es que para que se ejecute ese codigo "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 modulo) esto lo van a ver en cualquier codigo de cualquier web-mu por que es algo basico.
Ahora sigan leyendo y fijense que dice abajo print $title; , recuerdan que les dije que $title es una variable y que la ibamos a ver mas adelante bueno aca la tenemos si leen bien dice print $ title , print es imprimir en este caso imprime , muestra , el contenido de la variable $ title (seria el nombre de la ventana activa , el titulo que sale arriba), entonces ahora entienden que 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 a continunacion un foto importante que quiero que vean:

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

12)Ahora abrimos el archivo registro.php con el dreamveawer (supuestamente tendrian que tenerlo ya abierto en el dreamveawer) y lo que hacemos es cambiar la parte donde pusimos las caracteristicas de nuestro server , pegamos ahi el codigo que copiamos recientemente , el mecanismo es el mismo seleccionamos con el mouse la parte del medio de la web y arriba pegamos el codigo ver foto para entender mejor:

13)
Si cuando pegas el codigo te queda todo blanco , hace un click sobre la parte blanca y bajo tenes las herramientas para editar el color , en la foto anterior podes ver con detalles esto.
Bueno tambien podemos editar los nombre y esas cosas , pero yo lo voy a dejar estandar , tal vez les cueste pegar el codigo , recuerden seleccionar correctamente con un click toda la parte de las tablas del registro miren las lineas que se marcan para saber si estan haciendo lo correcto , y despues 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 o lo que quicimos poner, de esa manera conservamos el contexto de la web y quien haga un click en registro da la idea que cambia la parte del medio por otra , y en realidad esta cargando un nuevo archivo.
Bueno voy a dejar pendiente la explicacion de los codigos de como trabaja este registro.
Les cuento que este tutorial me llevo varias horas.
Esto es una introduccion a diseño web-mu ire agregando nuevos tutoriales como el modulo cambiar password, mover personaje, resetiar pj desde la web y muchos mas.
Voy a dejar mi web ya terminada con los modulos INICIO Y REGISTRO si quieren pueden verla por si no les sale algo , yo la dejo asi cuando retome de nuevo los tutoriales uso como ejemplo el mismo diseño y ademas me gusto mi banner jaja lo edite como hobby en realidad no era parte de mi tutorial DESCARGAR AQUI.
Bueno gente ustedes estan re cansados de leer y yo re cansado de escribir , nos tomamos un recreo y nos vemos en el proximo tutorial.
Dejo la ultima foto para que vean como quedo terminada la web con el modulo completo

Saludos y exitos a todos , asd*