Every project throughout this book will use the common header and footer files that we will create here; navigation menus will be different for each project and, as such, we will build these in the project's chapter themselves. But for now, let's look at the common header and footer files:
Create the
header.phpfile at/path/to/codeigniter/application/views/common/and add the following code to it:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="<?php echo base_url('bootstrap/ico/favicon.ico'); ?>"> <title><?php echo $this->lang->line('system_system_name'); ?></title> <!-- Bootstrap core CSS --> <link href="<?php echo base_url('bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet"> <!-- Bootstrap theme --> <link href="<?php echo base_url('bootstrap/css/bootstrap-theme.min.css'); ?>" rel="stylesheet"> <!-- Custom styles for this template --> <link href="<?php echo base_url('bootstrap/css/theme.css');?>" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body role="document"> <!-- END header.php --> <div class="container theme-showcase" role="main">The preceding view file contains the HTML for the head of a document. This is to say that this HTML is used throughout the book for every project, and it contains the HTML markup for everything from the opening
htmltag, opening and closingheadtags, and the openingbodytag.Create the
footer.phpfile at/path/to/codeigniter/application/views/common/and add the following code to it:</div> <!-- /container --> <link href="<?php echo base_url('bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet"> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="<?php echo base_url('bootstrap/js/bootstrap.min.js');?>"></script> <script src="<?php echo base_url('bootstrap/js/docs.min.js');?>"></script> </body> </html>The preceding block of code contains the HTML markup for the footer view file used for every project throughout this book.