inside out PHP Project Change Log

STEP-201 to STEP-202

1. index.php
   
   
   1. remove the static content page and replace with dynamic function to populate the page
      • replace the folloing line
        include('include/page.home.inc.php');
        with
        echo getPage( $pageJson['pages'] );
        
        
2. config.php
   
   
   1. change the site name
      • update the constant value from
        define('SITE_NAME','inside out | STEP 201');
        to
        define('SITE_NAME','inside out | STEP 202');
        
        
   2. add line to get content.json file contents
      • add to the end of the file
        // get the file contents of the content.json file and store it in this variable as a string.
        $pageData = file_get_contents( "assets/data/content.json" );
        
        
   3. add line to convert the contents to an associative array
      
      • add to the end of the file
        // create a variable that will capture the array resulting from the php json_decode function.
        $pageJson = json_decode( $pageData, true );
        
        
3. include/
   
   
   1. delete the file we used to add static content to the page
      • delete
        include/page-home.inc.phps
        
        
4. include/functions.inc.php
   
   
1. modify menuBuilder function to include the following changes
   • change the echo statment form
     echo('<a href="#">'.$value['MenuName'].'</a>');
     to
     echo( '<a href="index.php?pg=' . basename( $value[ 'MenuLink' ], '.html' ) . '">' . $value[ 'MenuName' ] . '</a>' );
     
     
2. add the getPage Function
   • add the following code

   function getPage( $obj, $pg = DEFUALT_PAGE ) {

   $pg = ( !empty( $_GET[ 'pg' ] ) ) ? $_GET[ 'pg' ] : $pg;

   $content = '<div class="container"><h1>Welcome to inside out - ' . $pg . '</h1></div><div class="container">Please contact the website administrator to report there is a problem with this page.</div>';

   foreach ( $obj as $name => $value ) {
   if ( $value[ 'PageID' ] === $pg ) {
   $content = '<div class="container animated fadeIn"><h1>' . $value[ 'PageName' ] . '</h1></div><div class="container animated fadeIn">' . $value[ 'PageContent' ] . '</div>';
   }
   }

   return $content;

   }
   
   

5. 1. add the CDN call for Animate.css below the footer css link in the header
      • add after the footer.css file
        <!-- styles used globaly for animations in our website -->
        <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
        integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
        crossorigin="anonymous">
        
        
   2. link our style.css file in our header
   • add after the animate.min.css file
     <!-- styles used globaly for our website -->
     <link rel="stylesheet" href="assets/css/style.css">
     
     
   3. add an anchor tag tot he site title in the #logo h1 element to link back to our home page
      • update the h1 element from
        <h1 id="logo"><?php echo SITE_NAME; ?></h1>
        to
        <h1 id="logo"><a href="index.php"><?php echo SITE_NAME; ?></a></h1>
        
        
6. assets/css/style.css

1. add style to correct header logo - keep text color white and remove the underline
   • add the following css rule to the end of the file
     /* override anchor tag font color changes and remove underline */
     #logo a{
     text-decoration: none;
     color: #FFF;
     }
   
   
1. asstets/data/
   
   
   1. update content.json file - add home page to elements
      • add home page elements to the end of the json
        , {
        "PageID": "home",
        "PageName": "here i am",
        "PageContent": "<p>this is the content for the home page</p>"
        }