Bazaar – php example code – part 15 – visual improvements of page
Article focus on further improvements in visual. We look at way how to create main part of all pages more template based and separate header and footer into a scripts. Another visual enhancements introduce background image and other small visual eye candy’s as pictures of arrows, main menu icons and so on.
Expectation from visual improvements
After obtaining basic functionality on our app, we will focus now on further visual improvements. Our focus lead to:
generating page header and footer (these parts will be included from appropriate scripts)
adding background image to our page
add another eye candy as images for appropriate categories in menu
Header and footer scripts
Our goal is separate code generating content of the page in smaller parts responsible only for their own things.
Script headermenu.php include script hederlogo.php and display menu content diferently if user is loged in or not.
Content of script follows:
<?php
// generate menu if user is loged in or not
// old solution with cookies if(isset($_COOKIE[‚username‘])) { // loged in user
require_once(‚headerlogo.php‚);
if(isset($_SESSION[‚username‘])) { // loged in user
echo ‚<div id=“menu“>‘;
echo ‚<a class=“navbar-brand“ href=“index.php“><img width=“150″ src=“./images/bazaarheader.png“> Bazaar – best items for a best prices!</a>‘;
background-size: cover; // image is spread on the background
}
Example of background image
Conclusion
Previous lines depict simple way hw to vidual improve our app. Visual atraction is very important for all products in new internet era.
Project bazaar has been created from scratsch as educational project. Now we can see that, first separation page elements in their own blocks interconected through a page template will be better solution. Our approach partialy override all existing problems and introduced further maintainability.
Ful code of bazarapp can be obtained from github from here.