Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 21
  1. #1
    Junior Member
    Join Date
    Jan 2007
    Location
    Los Angeles, California
    Posts
    17
    Member #
    14744

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

    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.

    1. Is there a way to do this using method=get on a single-page design?
    2. 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!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    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.


  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Change the action attribute to the PHP page you want to use to retrieve stuff.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member
    Join Date
    Jan 2007
    Location
    Los Angeles, California
    Posts
    17
    Member #
    14744
    Quote Originally Posted by TheGAME1264 View Post
    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.


    Quote Originally Posted by mlseim View Post
    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"); 
    Last edited by lectric; Aug 02nd, 2013 at 04:53 PM.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    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).


  7. #6
    Junior Member
    Join Date
    Jan 2007
    Location
    Los Angeles, California
    Posts
    17
    Member #
    14744
    Quote Originally Posted by mlseim View Post
    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>
    Last edited by lectric; Aug 09th, 2013 at 01:43 PM.

  8. #7
    Junior Member
    Join Date
    Jan 2007
    Location
    Los Angeles, California
    Posts
    17
    Member #
    14744
    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?

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    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.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Jan 2007
    Location
    Los Angeles, California
    Posts
    17
    Member #
    14744

    Trying to paste code.

    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>

  11. #10
    Junior Member
    Join Date
    Jan 2007
    Location
    Los Angeles, California
    Posts
    17
    Member #
    14744
    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>


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:04 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com