The third tutorial language is a bit pompous, and the content is not very substantial, please forgive me.
The fourth issue I would like to introduce is header.php is the head of each page, make a separate head, then in the design of other pages can be directly referenced. One of the principles of software design is to avoid writing repetitive code. The use of this principle in web design is to put together a common part of the site to be written separately.
The main technology used by Header.php is the session of Bootstrap and PHP. Bootstrap is a CSS and JavaScript framework. The official propaganda language is: Bootstrap are the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the Web.
The two greatest benefits of using Bootstrap are:
1. Responsive layout: Web pages made with bootstrap adapt to screen resolution, which is very practical, in the era of mobile terminal prevalence, the site can not only face a device.
2.bootstrap can let a not good at the art of code Nong design a beautiful website, now the rapid development of many sites are using the bootstrap framework.
Session principle: The session simply means that the content is temporarily stored on the server, and the corresponding cookie is the content stored on the client side. The session defaults to three storage mechanisms: How the file is stored, how the memory is stored, and how the user has customized the storage. For the server is not very good developers, with the default file storage, for large memory, the pursuit of speed, and a small number of concurrent sites can use memory storage. Modifying the storage method can be done by modifying the value of the Session.save_handler in the php.ini file.
The final effect is as follows:
The following is the header.php source code, want to say the basic are written in the comments, there is nothing to understand or feel that the wrong place can communicate together.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<!--the above 3 meta tags * must be * placed first, and any other content * must be * followed thereafter! -
<link href= "Css/bootstrap.css" rel= "stylesheet" >
<script src= "Js/jquery-2.1.4.js" language= "JavaScript" ></script>
<script src= "Js/bootstrap.js" language= "JavaScript" ></script>
<!--introduce style sheets and JS files--
<body>
<navclass= "NavBar navbar-default navbar-fixed-top" >
<!--definition NavBar (navigation bar) navbar-default(default navigation bar) navbar-fixed-top (fixed at the top, will not disappear) the second third parameter above can be modified by itself, refer to Bootstrap Chinese network--
<divclass= "Container" >
<!--define a container so that both ends are spaced--
<divclass= "Navbar-header" >
<button type= "button"class= "Navbar-toggle collapsed" data-toggle= "collapse" data-target= "#navbar" aria-expanded= "false" aria-controls= "NavBar ">
<spanclass= "Sr-only" >toggle navigation</span>
<spanclass= "Icon-bar" ></span>
<spanclass= "Icon-bar" ></span>
<spanclass= "Icon-bar" ></span>
</button>
<!--This button is designed for mobile phone tablet and other adaptive, you can zoom out the browser to see the effect, Icon-bar is a horizontal line icon--
<aclass= "Navbar-brand" href= "#" >Blog_Logo</a>
<!--This is the logo of the website, if you have the above this line can be changed to
<aclass= "Navbar-brand" href= "#" >
</a>
-
</div>
<div id= "NavBar"class= "Navbar-collapse collapse" >
<!--collapse is also designed for responsiveness, and when the screen resolution is small to a certain extent, the navigation collapses--
<ulclass= "Nav Navbar-nav" >
<li><a href= "index.php" >Home</a></li>
<!--Home--
<li><a href= "about_me.php" >About</a></li>
<!--self-introduction-
<li><a href= "list.php" >articleList</a></li>
<!--articles List--
<liclass= "Dropdown" >
<a href= "#"class= "Dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Classification <spanclass= "Caret" ></span></a>
<ulclass= "Dropdown-menu" >
<li><a href= "#" > Type 1</a></li>
<li><a href= "#" > Type 2</a></li>
<li><a href= "#" > Type 3</a></li>
<li role= "Separator"class= "Divider" ></li>
<!--a horizontal line--
<liclass= "Dropdown-header" > Type 4</li>
<li><a href= "#" > Subclass of Type 4 1</a></li>
<li><a href= "#" > Subclass of Type 4 2</a></li>
</ul>
</li>
<!--This is a drop-down menu that can contain some article classification information--
</ul>
<ulclass= "Nav navbar-nav navbar-right" >
<?php
Session_Start();//Start Session
if($_session[Username]) {//output User name if user name exists, add Exit button
/*need to explain is the best here also need to verify the following password, and so on after the design of the landing page, we then back to add*/
Echo"<ul class=\" nav navbar-nav navbar-right\ ">";
Echo"<li><a href=\" Admin/admin.php\ ">$_session[username]</a></li> ";
Echo"<li><a href=\" Config/logout.php\ "> Exit </a></li>";
Echo"</ul>";
}Else{//Otherwise the login is displayed, so be aware of escaping in double quotes
Echo"<ul class=\" nav navbar-nav navbar-right\ ">";
Echo"<li><a href=\" login.html\ "> Please login </a></li>";
Echo"</ul>";
}
?>
</ul>
<!--navigation to the right of the content--
</div>
</div>
</nav>
</body>
Learning while doing Php+mysql+smarty+apache build personal blog (4): header.php
