RSS

Sistema CRUD en Codeigniter 3/11

28 Dic

Ahora que ya tenemos separado el header, body y footer, lo que vamos a hacer en este post será crear el menú responsive con bootstrap y poniendo dos items: Inicio y Login. Por el momento, login no tendrá ninguna funcionalidad. Este menú estará dentro el header.

crud_3

Vamos a nuestra vista que está en views/headfoot/header.php para poner el código html con clases de bootstrap y crear el menú base de nuestra aplicación:

Ponemos después del tag body lo siguiente:

<!-- Cada li tiene un id y una clase. Cada clase tiene un if con php para ponerle o no la clase
 'active' para que el estilo CSS se aplique cuando el usuario esté en esa sección
el href de Inicio tiene 
<?php echo base_url();?> esto va al controlador por default
el href de Login es <?php echo base_url();?>login hará que cuando hagamos el controlador, lo dirigirá aquí  -->
<section class="container">
	<div class="row">
		<header>
			<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<!-- Inicio lleva a la base url, si url actual es igual al controlador/función que estamos dirigiendo, le pone clase active para cambiar background -->
							<li id="inicio" class="
								<?php if(current_url() == base_url()) {echo 'active';}?>">
								<a href="
									<?php echo base_url();?>">Inicio
								</a>
							</li>
							<!-- Login lleva al controlador Login que mostrará por default el formulario de login, si está activo le pone clase active para cambiar background -->
							<li class="
								<?php if(current_url() == base_url().'login' || current_url() == base_url().'login/login') {echo 'active';}?>">
								<a href="
									<?php echo base_url();?>login">
                        Login
                        
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- container-fluid -->
			</nav>
		</header>
	</div>
</section>

Con esto ya tenemos nuestro menú con bootstrap:

modulo3_1

Solo vamos hacer el menú hasta aquí porque lo siguiente que se va a hacer es un controlador que se llamará Login y mostrará el formulario de login.

Para tener el ejemplo hasta aquí puedes bajar el zip de este módulo y analizarlo para ver cómo se crea el menú.
Como práctica, te sugiero crear más items al menú y ver cómo funciona.

Espero que me quieras compartir tus avances en ringhugos@gmail.com o enviarme una foto de tu avance en whatsapp, mi número lo puedes ver en el footer de mi sitio huguidugui.com

 
Deja un comentario

Publicado por en 28 diciembre, 2016 en Codeigniter, HTML, CSS, JQUERY, PHP

 

Deja un comentario

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: