Skip to content

Create Sample Demo Pages With Download Button

Share Button

Sample demo pages with PHP and Download Button

This is a quick tutorial for creating a sample demo pages for your website. If you want to share your projects and demos with your website visitors you should be able to present a live demo of your code and allow user to download it(Possibly for FREE).
If that’s what you would like to achieve… This post is perfect for you!

Let’s start without further postponement.

Below is a simple demo pages file system that can serve to you as a demo sample

Live_demo_filesystem

 

demo_page_example

 

Download

 

Assets hold of all live demo pages directories and a singe index.php file which will redirect every page request which does not specify which specific project user want to view.

defaultStyles.css specifies default styles for all demo projects. Default styles mostly apply to default elements of the demo pages like: top navigation bar, footer, download button.

downloadButton.php …. as a name specifies is as download button for a project etc.

Below is a simple function that accepts 2 arguments: script location to be downloaded by user and a download button text. It’s a default button which has the same css style for all other demo projects.

<?php
/* Download button function with 2 arguments: script location to be downloaded and button text */
function dispDownlButton($scriptLink,$downloadMsg){ ?>

    <div class="dowloadButtonHolder">
        <div class="row">
            <a class='downloadButton' href="<?php echo $scriptLink; ?>"><?php echo $downloadMsg; ?></a>
        </div>
    </div>

<?php } ?>

 

footer.php is a default footer for all demo pages. It’s just a footer example so fell free to add any content you want to check how it works.

live_demo_footer

 

header.php is a default header for all demo pages. Note that the head section of the demo page is not closed as it will be continued for each demo project separately.

live_demo_header

 

helperFunctions.php contains of all php functions that will come in handy for demo pages. I’ve added only 2 functions but if you fell that your demo pages would benefit from more functions, don’t wait and simply add them. getPageTitle($pageTitle) accepts one argument(page title) and echos it closed in html title tag.

Second function simply creates a redirection link with a custom link text.

<?php

    /* PHP Helper functions */

    /* Get title for page */
    function getPageTitle($pageTitle){
        echo"<title>{$pageTitle}</title>";        
    }

    /* Create a redirection link with a custom link text */
    function redirectLink($url,$linkMsg){        
        $link = "http://www.{$url}";
        echo "<span><a id='pageTitleDemo' href='{$link}' target='_blank'>".$linkMsg."</a></span>";
    }

?>

 

topNavBar.php contains of default navigation bar. In this demo example it only contains an image but you can modify it to navigation menu or something else if you wish.

live_demo_head

 

SIMPLE DEMO PAGE:

Below is a simple demo page files. Each demo page prior this example should be kept in separate directory/folder.

 

This simple example consists of 4 files:

demoPage.html

index.php

header.php

styles.css

index.php is the main file of each single demo page which specify all files to be requested in order to run a demo page. Comments were applied throughout the code so you won’t have any difficulties understanding it.

demo_page_index

demoPage.html is the actual demo project code. This file will be required by a main index.php file.

main_demo_page_content

header.php is a continuation of default header.php. It not only requires a default header but also sets a page title for this actual demo page and adds additional scripts, styles etc. if needed.

demo_page_header

styles.css contains of additional styles for this specific demo page.

Download the code, read through comments, play with it and set up your own demo pages.

You can check for sample demo pages under below links:

Sample Demo 1
Sample Demo 2

Download

 

Share Button