Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-08-2011, 02:57 (UTC)    
Título del mensaje: [Tutorial] ¡Crear sistema de registro en tu web!

Hola comunidad!,

Hoy les traigo como crear para que se registren en nuestras webs un tutorial muy avanzado y completo seguramente les gustara ya muchos sabrán crear que se registren en sus web pero al igual muchos no saben.

¡Primero vamos a crear el formulario de registro!

+ Nos dirigimos al menú de Su kit de construcción > Controlar extras



+ Después nos dirigimos a Agregar extra > Formulario de contacto > Agregar extra



+ Ahora vamos a configurar el formulario en "Opciones", les diré lo que tienen que hacer por números ya me entenderán cuando vean la imagen:

1 ) Título del formulario: Registro

2 ) Texto que va delante del formulario de contacto: Vació

3 ) ¿Activar el nombre de campo?: Desactivado

4 ) ¿Activar el campo de correo electrónico?: Desactivado

5 ) ¿Activar la página web URL de campo?: Desactivado

6 ) ¿Activar el título de campo?: Desactivado

7 ) Elegir el color de fondo de los textos de campo: Estándar

8 ) Color de texto en los input de datos del campo: Estándar

9 ) ¿Tratar de usted al visitante?: Activado



+ Cuando ya hallamos configurado tal como les dije le damos click en "Mostrar opciones avanzadas"

1 ) Anchura de los campos de introducción: Estándar

2 ) Altura del campo noticias: Estándar

3 ) Enviar un segundo mensaje a la dirección de correo electrónico: Vació

4 ) ¿Mostrar el campo aparte?: Mostrar el pequeño campo de introducción

5 ) ¿Texto del 1 campo aparte?: Usuario

6 ) ¿Mostrar el campo aparte?: Mostrar el pequeño campo de introducción

7 ) ¿Texto del 2 campo aparte? Contraseña

8 ) ¿Mostrar el campo aparte?: Mostrar el pequeño campo de introducción

9 ) ¿Texto del 3 campo aparte?: Email

+ Cuando ya hallamos terminado de editar todo pulsamos el botón "Guardar"



+ Bueno ya hicimos lo necesario para que el formulario funcione ahora utilizaremos el código de un formulario que edite, sencillo pero útil para esto:

Vista previa:


Código del formulario escribió:
<form method="post" action="Registro.htm">
<table>
<tbody>
<tr>
</tr>
<tr>
<td>Usuario:</td>
<td><input type="user" style="background-color: ; color: ; width: 150px;" name="modulenter[extrabox1text]" /></td>
</tr>
<tr>
<td>Contraseña:</td>
<td><input type="password" style="background-color: ; color: ; width: 150px;" name="modulenter[extrabox2text]" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" style="background-color: ; color: ; width: 150px;" name="modulenter[extrabox3text]" /></td>
</tr>
<tr>
<td>Website:</td>
<td><input type="website" style="background-color: ; color: ; width: 150px;" name="modulenter[text]" /></td>
</tr>
<tr>
<input type="hidden" value="Código" name="email" />
</tbody>
</table>
<input type="hidden" value="saveForm" name="mode" /><input type="submit" value="Registrar" />
<input type="reset" name="btnLimpiar" value="Limpiar">
</form>


+ Podemos editar todo lo que esta marcado con "Negro", les dejare la explicación:

+ Registro.htm: Este es el link del formulario que creamos anteriormente, si seguiste bien todos los pasos anteriormente debes dejarlo así.

+ Usuario: Es el nombre de la casilla que le pedimos al visitante que se valla a registrar que coloque su nombre de usuario.

+ Contraseña: Es el nombre de la casilla que le pedimos al visitante que se valla a registrar que coloque su contraseña.

+ Email: Es el nombre de la casilla que le pedimos al visitante que se valla a registrar que coloque su email.

+ Website: Es el nombre de la casilla que le pedimos al visitante que se valla a registrar que coloque su sitio web.

+ Registrar: Es el botón que pulsamos para que se envié el formulario de registro a nuestra cuenta y así podamos activar la cuenta deseada.

+ Limpiar: Con este botón podemos limpiar todo el formulario de registro si lo deseamos.

+ Código: Buscaremos un código para ponerlo en el formulario lo buscaremos de la siguiente manera, nos dirigimos ala pagina del formulario que creamos en este caso seria "Registro.htm", cuando estemos allí presionamos click derecho "Ver código de fuente de la pagina"



+ Cuando estemos navegador por el código de fuente presionamos "Ctrl + F", y pegamos esto "name="email" value=" en la barra luego nos aparecerá eso que pegamos seleccionado pero al lado de eso esta el código que buscamos esta entre comillas en mi caso es "BGxfYwR5AmDfYwt5AGVfYwZjZmRfYwZkZwtfYwp3ZQD=", ese código que esta en nuestro código de fuente lo pegaremos en el código del formulario donde dice "Código".

Cita:
<input type="hidden" value="Código" name="email" />




+ Después que hallamos echo todo esto bien ya podremos probar nuestro formulario a verificar que este funcionado bien, creamos una nueva pagina llamada "Registrate" lo pegamos en "Fuente HTML", y lo guardamos y lo probamos en la pagina, lo rellenamos con los datos que nos pide el formulario y lo enviamos.



+ Después que lo envíes seguramente nos pedirán un código de verificación lo ponemos sin ningún problema y lo enviamos y nos dice "=> Su mensaje ha sido enviado!":





Los datos del formulario nos llegaran ala bandeja de entrada de PWG en "Mensajes".



+ En el mensaje están toda la información que pido el formulario de registro están en filas también pero menos la casilla "Website" que esta de ultimo lo pueden ver en esta imagen esta de color "Azul", pero no nos compliquemos con eso por que eso no es lo que buscamos solo lo que necesitamos es el Nombre de usuario y/o Contraseña, lo demás digamos que es lujo para el formulario.



+ Bueno cuando ya tengamos el | Nombre de usuario | Contraseña | debemos crear la cuenta para ello debemos usar el extra "Paginas ocultas", a continuación les dejo como activarlo.



¡Segundo vamos activar las paginas ocultas!

+ Nos dirigimos al menú de Su kit de construcción > Controlar extras



+ Después nos dirigimos a Agregar extra > Paginas ocultas > Agregar extra



1 ) Introduzca el título de página del inicio de sesión: Panel

2 ) Introduzca el texto que será mostrado antes del inicio: Vació

3 ) Introduzca el texto que será mostrado después del inicio: Vació

4 ) Introduzca el texto del botón "inicio de sesión": Iniciar sección

5 ) ¿Tratar de usted al visitante?: Activado

+ Cuando ya hallamos terminado de editar todo pulsamos el botón "Guardar"



+ Ahora vamos a "Administrar los logins", esta opcion esta al lado de la que estábamos, que es para crear las cuentas.

Nombre de usuario: iPWG

Contraseña: 123456

Si edita una página, puede elegir que usuarios pueden tener permiso para ver su página: Esto quiere decir que cuando creamos una pagina en "Controlar paginas", tenemos opciones para darles permiso que solo las vean los usuarios registrado y no los visitantes no registrados mas adelante lo explico como hacerlo

Agregar usuario: Le damos click allí para crear la cuenta.



+ Ahora después que hallamos introducido los datos nos dice "El usuario ha sido añadido!", es decir ya creamos la cuenta solo necesitamos el Nombre de usuario | Contraseña como ya había comentado antes que es lo que necesitamos para crear una cuenta es sencillo, aunque tenemos que hacerlo manualmente ya que no se puede automáticamente, ahora les explico:

Azul: Son los nombre de usuarios que tenemos registrado en la pagina.
Verde: Son las contraseñas de los usuarios que tenemos registrado en la pagina.
Rojo [X]: Sin pulsamos esa X podemos eliminar la cuenta si lo deseamos.



+ Ahora veremos sin funciona el extra "Paginas ocultas", osea para identificarnos en este caso si llevamos los mismo paso del tutorial la URL para identificarnos seria:

www.tuweb.es.tl/panel.htm

+ Bueno después que estemos allí introducimos los datos que nos piden | Nombre de usuario | Contraseña | y obiamente le damos a "Iniciar sección":



+ Después cuando no logeamos nos sale un mensaje que es el siguiente:

Cita:
=> Ahora estás conectado!

El Webmaster todavía no ha creado páginas que solamente pueda ver usted, (por lo tanto no vale la pena una identificación en estos momentos.).


+ Nos dice que el webmaster no ha creado paginas para que los usuarios conectados las puedan ver y ahora nos preguntamos ¿Como agregamos paginas para que lo usuarios conectados las puedan ver?



+ Ahora les enseñare como ocultar una pagina osea para que los usuarios conectados las puedan ver:

+ Nos dirigimos al menú de Su kit de construcción > Controlar paginas



+ Cuando estemos allí vamos ha Agregar una pagina > Mostrar opciones > La segunda opcion le damos click para ver todas las opciones que nos ofrecen entre ellas son:

¡Visible para todos los usuarios: Si elegimos esta opcion la pagina la pueden ver todos los usuarios.

Visible solo para usuarios conectados: Si elegimos esta opcion solo pueden ver la pagina los usuarios registrados/conectados.

Visible para "iPWG": Dice visible solo para iPWG por que soy el único usuario que esta registrado en mi pagina pero si ubieran mas usuairos saldrian, entonces si eligo esa opcion solo la puedo ver yo si elegimos a otro obviamente solamente la podría ver el otro.

+ Para que todo funcione bien elegimos la opcion "¡Visible solo para usuarios conectados".

+ Después de todo lo "Guardamos", obviamente.



+ Ahora vamos de nuevo nos logeamos y ahora ya no nos dirán que el webmaster no ha agradado paginas para que las puedan ver los usuarios conectado ahora saldrá la pagina que ocultamos para los usuarios conectados, lo mismo pasaria si eligieramos "Visible para "iPWG"





+ Bueno ya es todo ya tenemos un sistema de registro no muy avanzado pero útil, pero todavía falta un ultimo paso para que nos quede bien vamos agregar otro extra que es muy util para esto a continuación vamos agregar el extra "Error en la pagina-404



¡Tercero ahora vamos activar el extra Error en la pagina-404!

+ Nos dirigimos al menú de Su kit de construcción > Controlar extras

+ Después nos dirigimos a Agregar extra > Error en la pagina-404 > Agregar extra



+ Ahora les dejo un código que pegaran en la pagina esa el código es para que se logeen, si te preguntas para que hacer eso, simple por que los usuarios que no están registrado intentan entrar a una pagina exclusiva para registrado les saldrá un mensaje diciendo que la pagina no existe entonces para eso es el código para que se logeen o se registre.

+ Ya esto es cuestión de ustedes lo pueden decorar con imágenes texto diciendo que se registren o se logeen yo solo les daré el código del "Login"

Código del login escribió:
<form method="post" action="Panel.htm">
<table>
<tbody>
<tr>
<td>Nombre de usuario:</td>
<td><input type="text" value="" name="logindata[name]" /></td>
</tr>
<tr>
<td>Contraseña:</td>
<td><input type="password" value="" name="logindata[kennwort]" /></td>
</tr>
</tbody>
</table>
<input type="hidden" value="1" name="mode" />
<input type="hidden" value="1" name="checklogin" />
<input type="hidden" value="1" name="logindata[checklogin]" />
<input type="submit" value="Iniciar seccion" />
</form>


Pueden editar lo que esta marcado con "Negro":

+ Panel.htm: Es la URL donde hará la acción osea es la URL del extra pagina oculta si seguiste todos los pasos bien déjalo así.

+ Nombre de usuario: Es el nombre de la casilla que le pedimos al visitante que coloque para iniciar sección.

+ Contraseña: Es el nombre de la casilla que le pedimos al visitante que coloque para iniciar sección.

Fuente HTML: Presionamos allí y pegamos el código del "Login"

+ Por ultimo pulsamos el botón "Guardar"



+ Bueno esto es todo el tutorial me costo mucho tiempo en hacerlo mas que todo las imagenes no lo puede hacer mas facil lo intente hacer muy entendible espero que les sirva y les guste.

+ Recomendación: Seguir todos los pasos bien para que no se prensete ningun error mas que todo en las URL de los codigos del "Formulario de registro" | "Login".

+ Si hay algún error en el tutorial por favor avísenme y también si tienen alguna duda sobre el tutorial comentenla que con gusto se las respondo.

Saludos!
Atte: iPWG


Ultima edición por ipwg el Dom Dic 11, 2011 6:19 pm; editado 1 vez
Mensaje12-08-2011, 03:47 (UTC)    
Título del mensaje:

Muy buen tuto , muy completo , te luciste 10/10
______________
/forosadas @forosadas
forosadas@hotmail.fr
"Tu mente es tu límite"
Mensaje12-08-2011, 15:44 (UTC)    
Título del mensaje:

Excelente tutorial. Muy bueno para los nuevos usuarios y para los que no lo saben.

Saludos!
Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje12-08-2011, 15:47 (UTC)    
Título del mensaje:

Vaya el tutorial esta genial muchas gracias
______________

Mensaje12-08-2011, 19:40 (UTC)    
Título del mensaje: Felicitaciones

inuyasha-y escribió:
Vaya el tutorial esta genial muchas gracias


Hermano excelente tutorial muy bien explicado, ahora tengo unas curiosidades...

En el menu se me crearon dos ventanas unas con panel y la otra con registro, pero son algo parecidas, ¿o es que el menu panel es solo para dejar mensaje?

y la otra cuestion es, solo registrado se me muestra la pagina oculta, como haria para qu se viera y saliera eso que espusistes en lo ultimo del tutorial lo de error 404, pero con un mensaje inicie sesion o registrese para ver esta pagina o algo asi??? Gracias....

P.D.: el tutorial lo hice tal cual y salio bien, pero si esta explicado en el tuto no lo entendí entonces y pido disculpas....
Mensaje12-08-2011, 19:47 (UTC)    
Título del mensaje:

Hola,
EXCELENTE TUTORIAL, completo, organizado, detallado y prolijo, bien hecho, te felicito.
Mensaje12-08-2011, 19:58 (UTC)    
Título del mensaje:

@babosadas
La verdad me costo mucho en hacerlo como dije antes las imágenes y todo jeje pero creo que vale la pena y muchas gracias por el agradecimiento y que halla gustado.

@design-pwg
Muchas gracias, así es ya lo había comentado antes en el post ya muchos lo saben pero otros no y seguramente les sera útil.

@inuyasha-y
Gracias amigo por el agradecimiento me alegra que te halla gustado.

@audioweb
Primero que todo muchas gracias, ahora te respondo tus dudas:

+ Cree dos ventanas una con "Registro", que es para que funcione el formulario de registro.
+ La otra es "Panel", es para iniciar sección y ver las paginas ocultas osea solo para los registrados.

+ Para ver lo del "Error de la pagina-404", tienes que estar desconectado y entrar ala pagina que ocultaste cuando entremos ala pagina que ocultaste nos saldrá eso, te dejo un mensaje que ya había comentado en el post sobre esto:

ipwg escribió:
+ Ahora les dejo un código que pegaran en la pagina esa el código es para que se logeen, si te preguntas para que hacer eso, simple por que los usuarios que no están registrado intentan entrar a una pagina exclusiva para registrado les saldrá un mensaje diciendo que la pagina no existe entonces para eso es el código para que se logeen o se registre.


Puedes intentar crea una pagina la ocultas y copias el link después te desconectas y entras ala pagina que creaste oculta y te aparecerá.

@nesbet
Muchas gracias amigo me alegra que halla gustado me costo tiempo en hacerlo pero al parecer me quedo bien y largo jeje.
Mensaje12-08-2011, 23:18 (UTC)    
Título del mensaje:

Buen tutorial,muy organizado y se le puede entender.

Saludos
______________

Noticias Relevantes
Diablo III llegara el 15 de mayo
Se desvela Angry Birds Space
Call of Duty: Black Ops 2 podria anunciarse el 28
La portatil Neo Geo es oficial
Hemos activado nuestro foro... ¡ Entrar al foro !
Mensaje13-08-2011, 03:27 (UTC)    
Título del mensaje:

@noti-gamer
Muchas gracias amigo si tu lo dices
Mensaje13-08-2011, 13:07 (UTC)    
Título del mensaje:

muy buen tutorial excelente
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje13-08-2011, 21:39 (UTC)    
Título del mensaje:

@nuestrasxarlas
Muchas gracias amigo.

Saludos!
Atte: iPWG
Mensaje13-08-2011, 21:53 (UTC)    
Título del mensaje:

Exelente tutorial pero como me aburre leer prefiero el de Javidj jaja ntc amigo muy buen tu tutorial

Salu2
______________
Miguel García | Desarrollador web freelance
Mensaje13-08-2011, 22:33 (UTC)    
Título del mensaje: Re: [Tutorial] ¡Crear sistema de registro en tu web!

Excelente Tutorial muy completo saludos.

______________
Visitar sitio web




Ultima edición por todaweb7 el Sab Ago 13, 2011 6:33 pm; editado 1 vez
Mensaje13-08-2011, 23:32 (UTC)    
Título del mensaje:

muy buen tutorial bn explicado y las imagenes muy profesionales.
saludos
______________
Mensaje17-12-2011, 07:52 (UTC)    
Título del mensaje: soy un inutil y tengo un problema

hola amigos, bueno lo primero pedir disculpas por la pregunta tan estupida que voy a hacerles, pero es que soy un novato novato y no entiendo demasiado.

he seguido los pasos del tutorial hasta que debo pegar el codigo, he encontrado y copiado el codigo pero no se donde debo pegarlo

ayuden a este pobre inutil porfavorrrr
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group