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>‘;
                echo ‚<a class=“navbar-brand“ href=“editprofile.php“><img id=“menuimage“ src=“./images/menu_profile.png“> Edit profile </a>‘;
                                
                if(isset($_SESSION[‚user_role‘])==’admin‘) { // if loged user is admin role
                   echo ‚<a class=“navbar-brand“ href=“admin.php“><img id=“menuimage“ src=“./images/menu_admin.png“> Manage your page </a>‘;
               };
               echo ‚<a class=“navbar-brand“ href=“logout.php“><img id=“menuimage“ src=“./images/menu_logout.png“> Logout <b><span id=“username“>‘ .$_SESSION[‚username‘] .'</span></b></a>‘;
               echo ‚</div >‘;
               require_once(‚sell_icon.php‘); // graphic menu item for selling your items
               echo ‚<a class=“navbar-brand“ href=“rss.php“><img src=“./images/rss.png“ width=“45″></a>‘; //rss feed link
               require_once(‚cart_icon.php‘); // small cart icon in menu
               
              } else { // visitor without login
               echo ‚<div id=“menu“>‘;
               echo ‚<a class=“navbar-brand“ href=“login.php“><img id=“menuimage“ src=“./images/menu_login.png“> Log In </a>‘;
               echo ‚<a class=“navbar-brand“ href=“signup.php“><img id=“menuimage“ src=“./images/menu_signup.png“> Sign Up for better membership! </a>‘;
   
               echo ‚<a class=“navbar-brand“ href=“index.php“><img width=“150″ src=“./images/bazaarheader.png“> Bazaar – best items for a best prices!</a>‘;
               echo ‚</div >‘;
             };
             
?>

Headerlogo.php script is very simple

<?php
 echo ‚<img id=“headerlogo“ src=“./images/bazaarheader.png“ alt=“bazaar header image“ >‘;
 echo ‚<br />‘;
?>

Footer.php script can acomodate two widths becasuse our design is created with two fixed width 580px and 1060px.

Content of the script is:

<?php
 // for further rework of the code
 function generate_footer($width) {
  if($width==580) {
    echo ‚<div class=“footer“ >‘;     
    echo ‚<div class=“footer“ id=“footer_container_580„>‘; 
    echo ‚<a class=“navbar-brand“ href=“https://cdesigner.eu“> Visit us on CDesigner.eu </a>‘; 
    echo ‚<a class=“navbar-brand“ href=“rss.php“> Subscribe to newsfeed <img src=“./images/rss.png“ width=“25″> </a>‘; 
    echo ‚</div>‘; 
    echo ‚</div>‘;    
  }
  if($width==1060) {
    echo ‚<div class=“footer“ >‘;     
    echo ‚<div class=“footer“ id=“footer_container_1060„>‘; 
    echo ‚<a class=“navbar-brand“ href=“https://cdesigner.eu“> Visit us on CDesigner.eu </a>‘; 
    echo ‚<a class=“navbar-brand“ href=“rss.php“> Subscribe to newsfeed <img src=“./images/rss.png“ width=“25″> </a>‘; 
    echo ‚</div>‘; 
    echo ‚</div>‘;    
  }
      }
?>

Visual adjustments are created by style.css linked into all of our pages. Next lines display interesting part from style.css relevant to footer:

#footer_container_1060 { /* wider header container for admin page or where it is needed */
  width: 1060px;
  margin-left: 240px;
  border: dotted 1px gray;
  background-color: #363636;
  padding: 10px 10px 10px 10px;
 /* background-image: url(‚../images/bazaar.png‘);
  background-repeat: no-repeat;
   background-attachment: fixed;
  background-position: center; */
  padding-bottom: 240px;
    margin-bottom: -240px;
  
}
#footer_container_580 { /* wider header container for admin page or where it is needed */
  width: 580px;
  margin-left: 240px;
  border: dotted 1px gray;
  background-color: #363636;
  padding: 10px 10px 10px 10px;
 /* background-image: url(‚../images/bazaar.png‘);
  background-repeat: no-repeat;
   background-attachment: fixed;
  background-position: center; */
  padding-bottom: 240px;
    margin-bottom: -240px;
  
}
Display of header and footer – width 1060px
Display of header and footer – width 580px

Background image for page

background image is placed on main body of the HTML by statements in our css:

body  {
  background-image: url(‚../images/background.png‘);
  background-repeat: no-repeat;
  background-attachment: fixed;
  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.