RSS

Mini ejemplo HTML-CSS-PHP-MySQL-JQuery (2/4)

09 Mar

Primero se hará una maqueta en la que pondremos un header, dos sections y dentro de ellos los articles correspondientes, como se ve en el código. En el section izquierda comenzamos con el formulario que tendrá 3 campos y un botón de submit en el archivo index.php. Los 3 campos serán nombre, usuario y mail, validando éste último campo con la propiedad de HTML5. Puedes ver en funcionamiento el ejemplo desde aquí.

Vamos al código HTML5:html

El index.php contiene lo siguiente:

<!DOCTYPE html>
<html>
	<head>
        <title>Ajax para el blog</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script src="js/ajax.js"></script>
	</head>

	<body>

	<div class="wrap">
            <header id="header_main">
                Ajax para el blog
            </header>

            <section id="left">
				<article id="AgregarProyecto">
                    <header id="header_proyecto">Formulario</header>
                    <!-- Poner atención en el id del formulario -->
                    <!-- Ya que se usará para la funcion jquery -->
                    <form id="formulario" method="POST">
                        <fieldset>
                                <div class="campos">
                                    <label > Nombre </label>
                                    <input type="text" id="nombre" name="nombre" />
                                </div>

                                <div class="campos">
                                    <label > Usuario </label>
                                    <input type="text" id="usuario" name="usuario" />
                                </div>

                                <div class="campos">
                                    <label > Mail </label>
                                    <input type="text" id="mail" name="mail"/>
                                </div>

                                <input type="submit" id="subirForm" value="Subir" />
                        </fieldset>
                    </form>
				</article>
			</section>

			<section id="right">

                <article id="respuestaAjax">
					<!-- Poner atención en el id de este div -->
					<!-- para la respuesta del ajax -->
					<!-- Aquí se muestra la imagen de carga y -->
					<!-- el mensaje de "Subido correctamente" -->
                </article>

            	<article id="tablaUser">
					<!-- Poner atención en el id de este div -->
					<!-- para la respuesta del ajax -->
					<!-- Aquí se mostrará la tabla actualizada -->
                </article>
			</section>
		</div><!-- wrap -->
	</body>
</html>

Aplicando un poco de CSS, queda algo así:

ajax_full

Pantalla full 980×1024

responsiveBlog

Tamaño 320×480

El archivo CSS está dentro del zip de descarga de todo el mini-proyecto, así como todos los scripts js que se incluyeron en el head de index.php (obviamente no pondré todo ese código aquí).

Bien, hasta aquí llega esta entrada. Ahora lo que sigue será subir la información del formulario a la base de datos y colocar una imagen de carga y un mensaje de que se subió correctamente. Todo esto en la siguiente entrada.

Anuncios
 
Deja un comentario

Publicado por en 9 marzo, 2015 en HTML, CSS, JQUERY, PHP

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: