Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML HTML Basics

integrating PHP with HTML page to execute SQL Query

Discussing Html . Code , Software , other

Moderators: macek, egami, gesf

integrating PHP with HTML page to execute SQL Query

Postby a2jagger » Sat Mar 17, 2012 6:38 pm

Hi, I have been attempting to integrate a SQL query into a new HTML based photo gallery I bought. The sql query is one I use to pull successfully from my database but I cannot figure out how to integrate it into this new HTML photo gallery. What I am trying to do is simply automatically generate the photos associated with each user when they log in. If anyone has any suggestions for what I am doing wrong or what it should look like I would appreciate it. Thanks.

Code: Select all
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JQuery Image Gallery Slideshow With MousePan</title>
   
   
   
        <!-- ***** START COPY INTO HEAD SECTION ***** -->
         
        <link rel="stylesheet" type="text/css" href="css/panGallery.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
       
        <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="js/mwheelIntent.js"></script>
        <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
        <script type="text/javascript">jQuery.noConflict();</script>
        <script type="text/javascript" src="js/jquery.panGallery.min.js"></script>
      <script type="text/javascript">
         
         // SETTINGS
         var settings = {
            <!-- slideshowDelay: in seconds -->
            slideshowDelay: 3,
            <!-- slideshowOn: true, false -->
            slideshowOn:true,
            <!-- activeCategory: enter -1 to start with menu opened (and no category loaded), or enter: 0 = 1st category loaded, 1 = 2nd category loaded, 2 = 3rd category loaded... etc), in order gallery are listed in the html) -->
            activeCategory: 0,
            <!-- thumbScale: gallery thumb rollover scale -->
            thumbScale: 1.5,
            <!-- thumbWidth: gallery thumb width -->
            thumbWidth:80,
            <!-- thumbHeight: gallery thumb height -->
            thumbHeight:53,
            <!-- menu is built in the code, all you need to specify is menu thumb width and height -->
            <!-- menuThumbWidth: menu thumb width -->
            menuThumbWidth:250,
            <!-- menuThumbHeight: menu thumb height -->
            menuThumbHeight:375,
            <!-- menuBorderSize: size of the border around menu -->
            menuBorderSize:10,
            <!-- menuBorderOpacity: (opacity around menu) value = 0-1 -->
            menuBorderOpacity:0.5,
            <!-- minDescriptionWidth: minimal width of the description area (set height in the css) -->
            minDescriptionWidth:250,
            <!-- autoOpenDescription: true/false (auto open description if exist when image is loaded) -->
            autoOpenDescription:true
         };
         
         jQuery(window).load(function() {
            jQuery.panGallery(settings);
            gallerySettings = null;
         });

        </script>
       
        <!-- ***** END COPY INTO HEAD SECTION ***** -->



   
  </head>
  <body> 
 
 
   <!-- ***** START COPY INTO BODY SECTION ***** -->
   
    <div id="componentWrapper">
     
            <!-- image pan holder  -->
            <div id="panHolder">
                <div id="img1"></div>
                <div id="img2"></div>
            </div>
           
            <!-- image preloader (above image, below menu) -->
            <div id="imagePreloader"></div>
           
            <!-- holder for the info (description). Delete this whole div if you dont want to use title and description on images. -->
             <div id="info_wrapper">
                <div id="info_title"></div>
                <div id="info_holderMasker"><div id="info_holder"></div></div>
                <div id="info_toggle"><img src="data/icons/openInfo.png" alt="info_toggle" width="15" height="10" /></div>
             </div>
           
            <!-- menu toggle and slideshow toggle button -->
            <div id="galleryControls">
           
                <!-- menu toggle -->
                <div id="menu_toggle"><img src="data/icons/menu_toggle.png" alt="menu_toggle" width="40" height="40" /></div>
               
                <!-- slideshow toggle -->
                <div id="slideshow_toggle"><img src="data/icons/play.png" alt="slideshow_toggle" width="40" height="40" /></div>
           
            </div>
           
            <!--    category menu -->
             <div id="menuWrapper">
             
                    <!-- menu background -->
                    <div id="menu_bg"></div>
             
                    <div id="menuHolder">
                   
                        <div class="menuRowMasker">
                            <div class="menuRowHolder"></div>
                        </div>
                       
                        <div class="menuRowMasker">
                            <div class="menuRowHolder"></div>
                        </div>
                       
                        <div class="menuRowMasker">
                            <div class="menuRowHolder"></div>
                        </div>
                   
                     </div>
                     
                     <!-- menu backward -->
                   <div id="menu_back"><img src="data/icons/backward.png" alt="menu_back" width="40" height="40" /></div>
                   
                   <!-- menu forward -->
                   <div id="menu_forward"><img src="data/icons/forward.png" alt="menu_forward" width="40" height="40" /></div>
                     
                     <!-- menu close -->
                   <div id="menu_close"><img src="data/icons/close.png" alt="menu_close" width="40" height="40" /></div>
                 
             </div>
           
            <!-- thumb scroll holder -->
            <div id="thumbWrapper">
                 <div id="thumbs">
                    <div id="thumbList">
                   
                        <!-- LIST YOUR OWN CATEGORIES IN HERE
                       
                        <div class="category" data-title="Your custom title goes here" data-thumb="data/images/menu/01.jpg">
                       
                        data-title = title for the category, appears in the menu
                        data-thumb = thumb for the category, appears in the menu
                       
                        -----
                        -->
                       
                       
                        <?php
      $link = mysql_connect("server", "user","pwd");
mysql_select_db("db");
$sql=("SELECT * FROM images WHERE user_id='".$user_id."'");
$result=mysql_query($sql);
while($r=mysql_fetch_array($result))
{   
 
   $user_id=$r["user_id"];
   $date_image_taken=$r["date_image_taken"];
   $image_taken_by=$r["image_taken_by"];
   $file_name=$r["file_name"];
   $notes=$r["notes"];

 
}
?>
                         
                       
                        <div class="category" data-title="Images" data-thumb="data/images">
                   
                            <ul>
                       
                                <li>
                                     <img src="data/images" alt="data/images/images" width="80" height="53" title="<?php echo $file_name; ?>" data-description= USER ID:   "<?php echo $user_id; ?>"<br/><br/>   
Date Image Taken:   "<?php echo $date_image_taken; ?>"<br/><br/>
Image Taken By:      "<?php echo $image_taken_by; ?>"<br/><br/>
Notes:            "<?php echo $notes; ?>""/>
                                </li>
                                                                                       
                         </ul>
                   
                    </div>
                   
                   
                           
                   
                    </div>
             
                </div>
             </div>
         </div>
         
         <!-- thumbs left -->
         <div id="thumbsLeft"><img src="data/icons/thumbsLeft.png" alt="thumbsLeft" width="30" height="53" /></div>
     
         <!-- thumbs right -->
         <div id="thumbsRight"><img src="data/icons/thumbsRight.png" alt="thumbsRight" width="30" height="53" /></div>
       
         <!-- image control buttons -->
       
         <!-- backward -->
         <div id="backward"><img src="data/icons/backward.png" alt="backward" width="40" height="40" /></div>
         
         <!-- forward -->
         <div id="forward"><img src="data/icons/forward.png" alt="forward" width="40" height="40" /></div>
         
         <!-- toggle_size -->
         <div id="sizeToggle"><img src="data/icons/plus.png" alt="sizeToggle" width="40" height="40" /></div>
   
    </div>
   
    <!-- ***** END COPY INTO BODY SECTION ***** -->
   
      </body>
</html>

a2jagger
New php-forum User
New php-forum User
 
Posts: 1
Joined: Sat Mar 17, 2012 6:35 pm

Re: integrating PHP with HTML page to execute SQL Query

Postby L33R » Mon Apr 23, 2012 4:53 am

Ive had a quick look. I havent looked at every little part so heres what is wrong with what I have looked at. There may be more wrong with it:

This while loop below...I guess that if there are 50 images you want to view them all?
The while loop below just reads through all of the images and overwrites the variables each time .

You need to extend the while loop to include the image divs.

You also need to specify the file name to the src tag of img : <img src="data/images" <img src="$filename"

You also have floating text. you should be using <p> <span> tags etc...

Your code:
Code: Select all
                       <?php
      $link = mysql_connect("server", "user","pwd");
mysql_select_db("db");
$sql=("SELECT * FROM images WHERE user_id='".$user_id."'");
$result=mysql_query($sql);
while($r=mysql_fetch_array($result))
{   
 
   $user_id=$r["user_id"];
   $date_image_taken=$r["date_image_taken"];
   $image_taken_by=$r["image_taken_by"];
   $file_name=$r["file_name"];
   $notes=$r["notes"];

 
}
?>
                         
                       
                        <div class="category" data-title="Images" data-thumb="data/images">
                   
                            <ul>
                       
                                <li>
                                     <img src="data/images" alt="data/images/images" width="80" height="53" title="<?php echo $file_name; ?>" data-description= USER ID:   "<?php echo $user_id; ?>"<br/><br/>   
Date Image Taken:   "<?php echo $date_image_taken; ?>"<br/><br/>
Image Taken By:      "<?php echo $image_taken_by; ?>"<br/><br/>
Notes:            "<?php echo $notes; ?>""/>
                                </li>
                                                                                       
                         </ul>
                   
                    </div>
 






After my changes:

(there is still a lot of room for improving this code but here is an example of it working)

Code: Select all

<?php
$link = mysql_connect("server", "user","pwd");
mysql_select_db("db");
$sql=("SELECT * FROM images WHERE user_id='".$user_id."'");
$result=mysql_query($sql);

$image_output ="<ul>"; //open the unordered list outside of the loop

while($r=mysql_fetch_array($result))
{   
 
   $user_id=$r["user_id"];
   $date_image_taken=$r["date_image_taken"];
   $image_taken_by=$r["image_taken_by"];
   $file_name=$r["file_name"];
   $notes=$r["notes"];

     // build the image list here
    $image_output  .= sprintf("
                                <li>
                        <img src='%s' alt=\"\" width=\"80\" height=\"53\" title='%s' data-description= USER ID:   %s<br/><br/>   
                  Date Image Taken:   %s<br/><br/>
                  Image Taken By:      %s<br/><br/>
                  Notes:            %s />
                                </li>",$filename,$filename,$user_id,$date_image_taken,$image_taken_by,$notes);
}
$image_output .= "</ul>";

?>



Code: Select all

                        <div class="category" data-title="Images" data-thumb="data/images">
                   
                            <?php echo $image_output; ?>
                    </div>

User avatar
L33R
New php-forum User
New php-forum User
 
Posts: 133
Joined: Fri Dec 30, 2011 4:27 am
Location: Liverpool


Return to HTML Basics

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.