Help with php-populated content using <form method="get"> in a single-page design

**lectric** · Aug 02nd, 2013, 02:27 PM

Hello all,

I'm working on a redesign of my podcast page, and have a couple of problems with it. I have searched the web for this, looked at the html5 manuals on the <Form> tag and dug through the Nav sticky on this site, but haven't found anything specific to this.

The site is a template from html5up.com, to which I've made just a few minor mods. I'm somewhat proficient with html, css, php, etc., but please speak slowly. You can view the temporary page here: The Meditation Podcast - a free podcast using guided meditation and binaural beats

1. The main issue is that I'm using a form to populate the "episodes" page (e.g. Choose an episode...). From there, form action="" method="get" sends ?ep=2 into the URL. Then I use that number to phpopulate the info for that episode. However, the problem is it always goes back to the "home" page, which is the first nav page. Is there a better way, especially with the advent of html5, to send a number to a url? It seems to work just fine on a mobile browser, but not in desktop versions of Safari or Firefox (haven't tried Chrome yet). I tried form action="#episodes", and several other variations, but no love.

Is there a way to do this using method=get on a single-page design?
Is there a better way?

2. The second issue is that I used border-radius to round the corners of some buttons (specifically "body input textarea" and the classes .button-big and .button-small). I then removed these border-radius styles. This made it go back to normal in the desktop version, but on any mobile device the buttons are still rounded — I did empty my browser cache, and double-checked that my style sheets were uploaded on the server.

3. For extra credit, I was hoping to make the nav icons grow on a:hover, using transitions in the stylesheet, but I'm not sure how to affect those particular characters, which are .icon classes to <a> in the stylesheets. creating a transition using font-size on "nav a" and "nav a:hover" didn't seem work. This one is really not a big deal — just for fun.

I'm guessing you can see everything you need by looking at the source, but if you need me to post source code, please let me know. The files in question (at http://themeditationpodcast.com/tmp-2013):

tmp-2013/index.html
tmp-2013/css/style.css
tmp-2013/css/style-mobile.css

I welcome any other suggestions for improvement.

Thank you very much!

**Web Design Forums** · Aug 02nd, 2013 02:27 PM

**mlseim** · Aug 02nd, 2013, 03:37 PM

We need to see that actual scripting for "index.html". I'm assuming you are processing all of your .html extensions as .php (using .htaccess?)

I'm guessing you should be using POST instead of GET, but I can't see your script unless you post it.

**TheGAME1264** · Aug 02nd, 2013, 03:38 PM

Change the action attribute to the PHP page you want to use to retrieve stuff.

**lectric** · Aug 02nd, 2013, 04:50 PM

Originally Posted by TheGAME1264

Change the action attribute to the PHP page you want to use to retrieve stuff.

It's a single page design, so there is no PHP page. I could add a page, like you describe, but was hoping for a more elegant way. Maybe the code below can help shed more light on the situation.

To explain in more detail:

The template is set up with all the content in a single index.html file. To navigate to a page, it uses <a> name attributes within that page (e.g. <a href="#episodes">). What I want it to do is action to the name ID (e.g. #episodes), so that it reloads the index.html with the content from the selected episode, AND goes to the proper nav point (<a> name #episodes). Like I said, it seems to be working as I hoped on IOS6 browsers, but not on the desktop browsers.

Originally Posted by mlseim

We need to see that actual scripting for "index.html". I'm assuming you are processing all of your .html extensions as .php (using .htaccess?)

I'm guessing you should be using POST instead of GET, but I can't see your script unless you post it.

I'm just adding PHP scripts inside of the html files, which has always worked. I think this is something my web host set up for me — it's not in my .htaccess file.

Here is the form (the PHP just populates the form with names of episodes):

HTML Code:

                                <span class="byline">Choose an episode: </span>
                                <form action="" method="get">
                                 <select name="ep">
                                   <?php
                                       $n=$num;
                                       while ($n >= 1) {
                                           if ($n !== ($i+1)) {
                                               echo "<option value=$n>$t[$n]</option>";
                                           } else {
                                               echo "<option selected value=$n>$t[$n]</option>";
                                           }
                                           $n--;
                                       }
                                    ?>
                                 </select>
                                 <input type="submit" value="Go">
                                 </form>

And here is the script that retrieves the content from database:

PHP Code:


    /* Episodes */

    $i=(int)$_GET['ep'];
    if($i>$num) { $i=$num; }
    $i--;
    if($i<0) { $i=0; }
    
    $n=1;
    while ($n <= $num) {
        $t[$n]=mysql_result($result,$n-1,"title");
        $n++;
    }
    
    $id=mysql_result($result,$i,"id");
    if($id < 10) {
        $id="0$id";
    }
    $title=mysql_result($result,$i,"title");
    $description=mysql_result($result,$i,"description");
    $short_description=mysql_result($result,$i,"short_description");
    $soundcloud=mysql_result($result,$i,"soundcloud");
    $soundcloud_mini=mysql_result($result,$i,"soundcloud_mini");

**mlseim** · Aug 03rd, 2013, 09:37 AM

I see so many things missing ... Like the actual MySQL query.

Can you post the WHOLE index.html?

Your webhost must have configured .html to be processed as .php within your server configuration, so that part seems to be OK.

AHA!

I know what the problem is now ...

Webhosts used to have "register_globals" enabled. This allowed any PHP variables used in a script to be retained when a different script (or the same script) was executed each time. This is such a huge security risk and so easy to attack, that webhosts now disable "register_globals" as a default. When your webhost upgrades PHP to higher levels, "register_globals" is disabled ... and it should be disabled. In fact, the newest versions of PHP may not even have that parameter anymore?

I still need to see your whole script again. You'll now be required to rewrite the script to process MySQL queries and other things without register_globals.

You might think the task is daunting, but it's really not a big deal. You can use PHP SESSION to remember which episode they are currently viewing. PHP SESSION is like a cookie, but is retained on the server. You'll also use POST instead of GET ... so your URL will be clean looking.

Let's see what you have now (your script).

**lectric** · Aug 09th, 2013, 01:41 PM

Originally Posted by mlseim

Let's see what you have now (your script).

Hi guys, sorry for the delay to reply. I'm not able to post the whole script, because this forum limits the number of characters in a post. I have to cut it down, but here's (hopefully) all of the pertinent pieces, the PHP script, mySQL query, etc.

I am definitely open to your suggestions for a cleaner and more secure code. Thank you for your help!

Opening query:

HTML Code:

<!DOCTYPE HTML>

/* PHP Database */

<?php include("php-db-info-file.php");

    $db = mysql_connect($hostname, $username, $password);
    mysql_select_db($database, $db) or die("Unable to select database");
    $query = "SELECT * FROM mp_episodes ORDER BY 'id'";
    $result = mysql_query($query) or die(mysql_error() . ' in ' . $query);
    $num = mysql_num_rows($result) or die(mysql_error() . ' in ' . $result);

/* Episodes */


    $i=(int)$_GET['ep'];
    if($i>$num) { $i=$num; }
    $i--;
    if($i<0) { $i=0; }

    $n=1;
    while ($n <= $num) {
        $t[$n]=mysql_result($result,$n-1,"title");
        $n++;
    }

    $id=mysql_result($result,$i,"id");
    if($id < 10) {
        $id="0$id";
    }
    $title=mysql_result($result,$i,"title");
    $description=mysql_result($result,$i,"description");
    $short_description=mysql_result($result,$i,"short_description");
    $soundcloud=mysql_result($result,$i,"soundcloud");
    $soundcloud_mini=mysql_result($result,$i,"soundcloud_mini");

/* Testimonials */

    $query2 = "SELECT * FROM mp_reviews ORDER BY RAND()";
    $result2 = mysql_query($query2) or die(mysql_error() . ' in ' . $query2);
    $num2 = mysql_num_rows($result2) or die(mysql_error() . ' in ' . $result2);

?>

The Nav section:

HTML Code:

<html>
    <head>
        <title>The Meditation Podcast - a free podcast using guided meditation and binaural beats</title>
        <meta http-equiv="content-type"content="text/html; charset=utf-8" />
        <meta name="description"content="" />
        <meta name="keywords"content="" />
        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/config.js"></script>
        <script src="js/skel.min.js"></script>
        <noscript>
            <link rel="stylesheet"href="css/skel-noscript.css" />
            <link rel="stylesheet"href="css/style.css" />
            <link rel="stylesheet"href="css/style-desktop.css" />
            <link rel="stylesheet"href="css/noscript.css" />
        </noscript>
        <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
    </head>
    <body class="homepage">

        <!-- Wrapper-->
            <div id="wrapper">
                
                <!-- Nav -->
                    <nav id="nav">
                        <a href="#home"class="icon icon-home active"><span>Home</span></a>
                        <a href="#episodes"class="icon icon-play-sign"><span>Episodes</span></a>
                        <a href="#donate"class="icon icon-gift"><span>Donate</span></a>
                        <a href="#share"class="icon icon-mail-forward"><span>Share</span></a>
                    </nav>

A piece of the first "Main/Home" section, with some php for Testimonials:

HTML Code:

                <!-- Main -->
                    <div id="main">
                        
                        <!-- Home -->
                            <article id="home"class="panel">
                                <header>
                                    <h1>The Meditation Podcast</h1>


                                    <!-- Google -->
<script asyncsrc="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                                    <!-- TMP-468x15-text -->
                                    <ins class="adsbygoogle"
style="display:inline-block;width:468px;height:15px;border:0;"
                                        data-ad-client="ca-pub-9448368459623663"
                                        data-ad-slot="2584185811"></ins>
                                    <script>
                                        (adsbygoogle = window.adsbygoogle || []).push({});
                                        </script>

                                </header>
                                <span class="image-home"></span>
                                <p>Welcome to The Meditation Podcast, a free podcast produced by Jesse and Jeane Stern, designed to help you benefit from meditation in your everyday life. </p>

                                <p>
                                Our podcast is unique because we use binaural beats in the audio that actually affect the brain waves, inducing a deep state of relaxation, and a brain pattern similar to REM sleep. This has the potential to bring about profound healing. We have received emails from people all over the world who have suffered from strokes, emotional losses, trauma, anxiety and insomnia, all of whom have benefitted from our podcast.*</p>

                                <p><ul class="testimonial">
                                    <?php
                                        $i2=0;
                                        while ($i2 < 3) {
                                            $id2=mysql_result($result2,$i2,"id");
                                            $review=mysql_result($result2,$i2,"review");
                                            $reviewer=mysql_result($result2,$i2,"reviewer");
                                        ?>
                                    <li><span class="icon icon-user"style="color:#999;"></span><span>&quot;<?php echo $review; ?>&quot;</span>
                                    </li>
                                    <?php

                                        $i2++;
                                        }
                                        ?>
                                </ul></p>


                            </article>

A piece of the second "Episodes" section, with the Form tag, and php query for episodes:

HTML Code:

                        <!-- Episodes -->
                            <article id="episodes"class="panel">
                                <header>
                                    <h2>The Meditation Podcast</h2>



                                <span class="byline">Choose an episode: </span>
                                <form action=""method="get">
                                 <select name="ep">
                                   <?php
                                       $n=$num;
                                       while ($n >= 1) {
                                           if ($n !== ($i+1)) {
                                               echo "<option value=$n>$t[$n]</option>";
                                           } else {
                                               echo "<option selected value=$n>$t[$n]</option>";
                                           }
                                           $n--;
                                       }
                                    ?>
                                 </select>
                                 <input type="submit"value="Go">
                                 </form>
                                </header>


                               <!-- SOUNDCLOUD -->

                                <?php echo $soundcloud; ?>

                                <!-- Google -->
<script asyncsrc="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                                <!-- TMP-468x15-text -->
                                <ins class="adsbygoogle"
style="display:inline-block;width:468px;height:15px;border:0;"
                                    data-ad-client="ca-pub-9448368459623663"
                                    data-ad-slot="2584185811"></ins>
                                <script>
                                    (adsbygoogle = window.adsbygoogle || []).push({});
                                    </script><br />




<button type="button"><div id="twitter-button"><a href="https://twitter.com/share"data-count="none"data-via="TmpPodcast"class="icon icon-twitter"><span> - Tweet</span></a><script type="text/javascript"src="//platform.twitter.com/widgets.js"></script></div></button>

<button type="button"><span><a href="episodes/tmp_<?php echo $id; ?>.mp3"title="Get this episode - click or right-click here"class="icon icon-cloud-download"> - Download</a></span></button>

<button type="button"><span><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2FtheMeditationpodcast.com"class="icon icon-facebook-sign"> - Share</a></span></button>

                                <p><h3>Description - Episode <?php echo $id; ?></h3></p>
                                <?php echo $description; ?>

                             </article>

                    </div>
        
                <!-- Footer -->
                    <div id="footer">
                        <ul class="links">
                            <li>theMeditationPodcast (at) gmail (dot) com</li>
                            <li>&copy; 2006-2013 Jesse &amp; Jeane Stern, all rights reserved</li>
                            <li>Design : <a href="http://html5up.net/"style="text-decoration:none;">HTML5 UP</a></li>
                        </ul>
                    </div>

**lectric** · Aug 16th, 2013, 05:53 PM

Hi all, since no one has replied, I'm guessing the code I posted wasn't enough. I would really like to hear your suggestions, miseim. Please suggest an alternative — I could email or PM you the code, if that would work. Sorry if I'm missing something obvious.

If anyone who moderates this forum is reading this, it seems that a character limit may not be the best solution in a forum where users need to post long snippets of code. Maybe consider raising or removing the limit?

**TheGAME1264** · Aug 16th, 2013, 09:39 PM

Split it into four posts. Maybe that'll do it.

I'm not sure why there's a limit. That's definitely a question for veraderock. I don't have access to see that myself.

**lectric** · Nov 04th, 2013, 11:29 PM

Ok, trying again to paste this code. I'm still having the problem where changing the episode number (in the drop-down form on the episodes page) takes me back to the home page. Any suggestions are much appreciated. Thanks!

Here's part 1 of probably 5

Code:

<!DOCTYPE HTML>

Code:



<?php include("php-database-file.php");

    $db = mysql_connect($host, $user, $pw);
    mysql_select_db($database, $db) or die("Unable to select database");
    $query = "SELECT * FROM mp_episodes ORDER BY 'id'";
    $result = mysql_query($query) or die(mysql_error() . ' in ' . $query);
    $num = mysql_num_rows($result) or die(mysql_error() . ' in ' . $result);

/* Episodes */


    $i=(int)$_GET['ep'];
    if($i>$num) { $i=$num; }
    $i--;
    if($i<0) { $i=0; }

    $n=1;
    while ($n <= $num) {
        $t[$n]=mysql_result($result,$n-1,"title");
        $n++;
    }

    $id=mysql_result($result,$i,"id");
    if($id < 10) {
        $id="0$id";
    }
    $title=mysql_result($result,$i,"title");
    $description=mysql_result($result,$i,"description");
    $short_description=mysql_result($result,$i,"short_description");
    $soundcloud=mysql_result($result,$i,"soundcloud");
    $soundcloud_mini=mysql_result($result,$i,"soundcloud_mini");

/* Testimonials */

    $query2 = "SELECT * FROM mp_reviews ORDER BY RAND()";
    $result2 = mysql_query($query2) or die(mysql_error() . ' in ' . $query2);
    $num2 = mysql_num_rows($result2) or die(mysql_error() . ' in ' . $result2);

?>


<!--
    Astral 2.1 by HTML5 UP
    html5up.net | @n33co
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
        <title>The Meditation Podcast - a free podcast using guided meditation and binaural beats</title>
<meta http-equiv="content-type"content="text/html; charset=utf-8" />
<meta name="description"content="" />
<meta name="keywords"content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/config.js"></script>
<script src="js/skel.min.js"></script>
<noscript>
<link rel="stylesheet"href="css/skel-noscript.css" />
<link rel="stylesheet"href="css/style.css" />
<link rel="stylesheet"href="css/style-desktop.css" />
<link rel="stylesheet"href="css/noscript.css" />
</noscript>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
<body class="homepage">

<!-- Wrapper-->
<div id="wrapper">

<!-- Nav -->
<nav id="nav">
<a href="#home"class="icon icon-home active"><span>Home</span></a>
<a href="#episodes"class="icon icon-play-sign"><span>Episodes</span></a>
<a href="#donate"class="icon icon-gift"><span>Donate</span></a>
<a href="#share"class="icon icon-mail-forward"><span>Share</span></a>
</nav>

**lectric** · Nov 04th, 2013, 11:31 PM

Part 2 of 5(?)

Code:

<!-- Main -->
<div id="main">

<!-- Home -->
<article id="home"class="panel">
								<header>
									<h1>The Meditation Podcast</h1>


                                    <!-- Google -->
<script asyncsrc="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                                    <!-- TMP-468x15-text -->
                                    <ins class="adsbygoogle"
style="display:inline-block;width:468px;height:15px;border:0;"
                                        data-ad-client="ca-pub-9448368459623663"
                                        data-ad-slot="2584185811"></ins>
                                    <script>
                                        (adsbygoogle = window.adsbygoogle || []).push({});
                                        </script>

</header>
                                <span class="image-home"></span>
								<p>Welcome to The Meditation Podcast, a free podcast produced by Jesse and Jeane Stern, designed to help you benefit from meditation in your everyday life. </p>




                                <p>
                                Our podcast is unique because we use binaural beats in the audio that actually affect the brain waves, inducing a deep state of relaxation, and a brain pattern similar to REM sleep. This has the potential to bring about profound healing. We have received emails from people all over the world who have suffered from strokes, emotional losses, trauma, anxiety and insomnia, all of whom have benefitted from our podcast.*</p>

                                <p><ul class="testimonial">
                                    <?php
                                        $i2=0;
                                        while ($i2 < 3) {
                                            $id2=mysql_result($result2,$i2,"id");
                                            $review=mysql_result($result2,$i2,"review");
                                            $reviewer=mysql_result($result2,$i2,"reviewer");
                                        ?>
                                    <li><span class="icon icon-user"style="color:#999;"></span><span>&quot;<?php echo $review; ?>&quot;</span>
                                    </li>
                                    <?php

                                        $i2++;
                                        }
                                        ?>
                                </ul></p>


                                <p>We decided to make this podcast to help regular people who want to learn and practice meditation. This style of meditation is non-denominational, and we believe it can be used in conjunction with &ndash; or separate from &ndash; any church, temple or any set of religious or spiritual beliefs.</p>

<p><button type="button"class="button-big"><a href="http://click.linksynergy.com/fs-bin/stat?id=7QHNVqYuzCY&offerid=146261&type=3&subid=0&tmpid=1826&RD_PARM1=http%253A%252F%252Fitunes.apple.com%252Fus%252Fpodcast%252Fthe-meditation-podcast%252Fid200323953%253Fuo%253D4%2526partnerId%253D30"class="icon icon-apple"target="_blank"> Subscribe to The Meditation Podcast in iTunes</a></button></p>
                               <p>
                                You can listen or download right here on the site, or subscribe on iTunes. We're also on quite a few podcast aggregators. For the DIYer, here is a link to our <a href="http://feeds.feedburner.com/themeditationpodcast/jshO">The Meditation Podcast RSS Feed</a>.
                                    </p>
                                                              <p>There's more to The Meditation Podcast than just what you hear. We have spent many hours and dollars on recording, editing &amp; mixing, studio equipment, writing scripts, composing music, researching ideas, programming software, web designing &amp; hosting. And then there's the meditating.</p>

Thread: Help with php-populated content using <form method="get"> in a single-page design

LinkBack

Thread Tools

Search Thread

Display