integrating PHP with HTML page to execute SQL Query

a2jagger · March 18, 2012

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.

<!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>

Pikachu2000 · March 18, 2012

$user_id doesn't appear to be be defined anywhere in the code. You should be developing with the error_reporting = -1 and display_errors = On set in your php.ini file so things like undefined variables are reported.

Sign In

integrating PHP with HTML page to execute SQL Query

Recommended Posts

a2jagger

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information