dimanche 10 mai 2015

How do use HTML5 History Api on my Website?

Im a beginner and fairly new to programming (so please keep your answers simple as possible).

I just heard of HTML5 history API, This API lets you update browser address bar with JavaScript, so you can change the contents of the page according to the URL. (Which I have no idea how to do)

I'm currently using XAMPP as localhost, phpmyadmin as database, and using Notepadd++ as a file editor, viewing and testing my website on Google Chrome.

My questions is, how do I use this new HTML5 History API so that my 3 php files, work seamlessly when navigating between pages. Best example I can give is exactly how soundcloud can play music seamlessly when navigating between pages.

I would like the same result and the same concept on my 'header', 'Vis1' and 'Vis' php files to work seamlessly when navigating between pages(these pages are listed).

Files I want to work seamlessly when navigating:

Directory: i-neo\htdocs\i-neo\inc..

   '<?php include ( "./inc/header.inc.php" );?>
    <?php include("./inc/vis1.inc.php");?>
    <?php include("./inc/vis.inc.php");?>'

These same 3 files are included all across the following php pages:

Directory: i-neo\htdocs\i-neo\

 'home.php, index.php,  msmyg.php, prof.php, nudg.php & frireq.php'

Coding below: vis1.inc.php

<!doctype html> <html> <head> <div id="vinfo"> <meta name="description" content="blah"> <title>blah</title> <link type="text/css" rel="stylesheet" href="style/style.css"> <div id="wrapper"> <div id="fileWrapper" class="file_wrapper"> <div id="info"> </div> <label for="uploadedFile"> Drag & drop </label> <input type="file" id="uploadedFile"> </input> </div> </div> </div> </head> </html>

Code for: vis.inc.php

<!doctype html> <html> <footer> <link type="text/css" rel="stylesheet" href="style/style.css"> <div id="v_wrapper"> <canvas id='canvas' width="1950" height="800"><script
type="text/javascript" src="js/hav.js"></script>
</canvas> </div> <div id="c2"> <small>random info<a href="website name" target="_blank">website name - Owner</a></small> </div> </footer> </html>

Code for: header.inc.php

'<?php 
   include ("./inc/connect.inc.php"); 
   session_start();
   if (isset($_SESSION['user_login'])) {
   $user = $_SESSION["user_login"];
   }
   else {
   $user = "";
   }
   ?>
   <!doctype html>
   <html>
    <head>
        <title>i-neo</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <script src="js/main.js" type="text/javascript"></script>
    </head>
   <body>
       <div class="ineoMenu">
        <div id="ineoWrapper">
            <div class="logo">
                <img src="./img/i-neo.png" />
            </div>
            <div class="search_ineo">
                <form action="search.php" method="GET" id="search">
                    <input type="text" name="q" size="50"
 placeholder="Search" .../>
                </form>
            </div>
        </div>


        </div>

        <?php

        if (isset($_SESSION["user_login"])) 
        {
        echo '
            <div id="menu">
                <a href="home">Home</a>
                <a href="'.$use.'">Prof</a>

                <a href="set.php">Set</a>
                <a href="msmyg.php">Me</a>

                <a href="frireq.php.php">Fr</a>
                <a href="nudg.php">Nudg</a>
                <a href="logout.php">Logout</a>

            </div>
            ';
        } 
        else{

            echo'<div id="menu">
            <a href="index.php"/>S</a>
            <a href="index.php">L </a>
            </div>  
        ';
        }
        ?>

        <div id="wrapper">
</html>     
<footer>
    <div id="c1">           
        <?php echo "Hedi Bej &copy; i-neo 2015"; ?>
    </div>
</footer>'

Aucun commentaire:

Enregistrer un commentaire