Problem integrating PHP, HTML and SQL query

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
a2jagger
Forum Newbie
Posts: 3
Joined: Sat Mar 17, 2012 9:24 pm

Problem integrating PHP, HTML and SQL query

Post by a2jagger »

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>

User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Problem integrating PHP, HTML and SQL query

Post by califdon »

So you have another process by which the user_id has been stored in the database along with the filename and other data for each image? And now you want to select and display the images appropriate for each user, right? How will you know who each user is? Will you have a login process with passwords? I think you will have to settle all those issues long before you can select images from a database for each user who views your website. Once you have a working registration and login web page, it should be rather simple to have a user login, then you will know which images to select, and you can populate the page with those images. But what you have so far cannot work, because you have provided no way to determine who the user is.
a2jagger
Forum Newbie
Posts: 3
Joined: Sat Mar 17, 2012 9:24 pm

Re: Problem integrating PHP, HTML and SQL query

Post by a2jagger »

Thanks. Yes I have a fully working login and process to select based on user, and you are correct on what I want to do. However I bought this image gallery and am having a very hard time working through all the files or figuring out where to add the sql query and get it to post the proper data. I have attached an audio file that I use that pulls all the user's audio files they have made and displays them fine. Because the HTML Gallery has a complex format I am just at a loss on how to interact with it.

Code: Select all

<?php
include 'dbc1.php';
$user_id = $_GET['user_id'];
page_protect();
 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>USER AUDIO LIST</title>
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/sliding_effect.js">
        </script>
</head>
<body>
		<div id="bg">
			<div id="outer">
				<div id="banner">
					<center><img src="images/logo.png" width="720" height="200" alt="PROFILE"><center></div>
				<div id="main">
					<div id="sidebar">
						<ul id="sliding-navigation">
                <li class="sliding-element"><h3>USER PROFILE</h3></li>
                <li class="sliding-element"><?php echo "<a href=user_profile.php?user_id=$user_id"?> target="_self">PROFILE</a></li>		
                <li class="sliding-element"><?php echo "<a href=imagedisplay2?user_id=$user_id"?> target="_self">IMAGE GALLERY</a></li>                
                <li class="sliding-element"><?php echo "<a href=audio_list.php?user_id=$user_id"?> target="_self">AUDIO FILES</a></li>	                
            </ul></div>
					<div id="content">
						<div id="box1">
							<h2>
								Audio Files for User <?php echo $user_id;?>
							</h2>
<img class="left" src="images/InterviewIcon.png" width="100" height="100" alt=""><br><p>
 <div class="box8">
<center><table align="center" "td width="700" valign="top">
<tr>
            <td>
       <script type="text/javascript">
	      //script removed for brevity 
</script>
          <?php
		$link = mysql_connect("server", "user","pwd");
mysql_select_db("db");
$sql=("SELECT * FROM audio WHERE user_id='".$user_id."'");
$result=mysql_query($sql);
while($r=mysql_fetch_array($result))
{	
  
   $user_id=$r["user_id"];
   $date_recorded=$r["date_recorded"];
   $recorded_by=$r["recorded_by"];
   $notes=$r["notes"];
   $file_name=$r["file_name"];
   $subject=$r["subject"];
   
 
 echo "<ol class='message_list'>\n";
 echo "<li>\n";
 echo "<p class='message_head'><cite> USER:  $user_id</cite> <span class='timestamp'>$date_time</span></p>\n";
 echo "<div class='message_body'>\n";
 echo "<p>File Name:  <cite>$file_name</cite><br />\n";
 echo "Subject:  <cite>$subject</cite><br />\n";
 echo "Recorded By:  <cite>$recorded_by</cite><br />\n";
 echo "Date Recorded:  <cite>$date_recorded</cite><br />\n";
 echo "<br />\n";
 echo "Notes: $notes</cite><br /></p>\n";
 echo "<br />\n";
 echo "<a href='upload_audio/$file_name'>Click Here to Listen</a><br /></p>\n";
 echo "</div>\n";
 echo "</li>\n";
 echo "</ol>\n";
}
?>
//the rest removed for brevity
    </body></html>

User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Problem integrating PHP, HTML and SQL query

Post by califdon »

Do exactly the same thing as you did on the audio script. There's no difference that I can see, other than changing the names of the database fields and perhaps instead of a hyperlink to play an audio file, you can just display the image with an <img> tag, something like this:

Instead of this:

Code: Select all

<?php
...
 echo "<a href='upload_audio/$file_name'>Click Here to Listen</a><br /></p>\n";
...
just do this:

Code: Select all

<?php
...
 echo "<img src='upload_images/$file_name' /><br /></p>\n";
...
The main point is that you must have those same 4 lines of PHP at the beginning in order to get the user_id of the user, to be used in the query in order to get the appropriate image filenames. And of course you need to have another directory on your server to hold your image files. Now, you might want to format it differently, because these are images, rather than audio files, but that depends entirely on how you want to format the page, which is an HTML issue, not a PHP issue. Unless I'm missing something, that's all there is to it.
a2jagger
Forum Newbie
Posts: 3
Joined: Sat Mar 17, 2012 9:24 pm

Re: Problem integrating PHP, HTML and SQL query

Post by a2jagger »

Yes Sir, thank you. The format was the main issue. I have this great html5 image gallery and wanted to fit the images into that format. The guy who built the gallery is in Croatia so I don't fully understand his information, but he said I needed to create Dom elements before his script would run and that i would need to create categories based on my jquery and insert them into the html or at least that is what I got out of the emails. I don't exactly know where to start with that, but I am trying to research it. Thanks again
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Problem integrating PHP, HTML and SQL query

Post by califdon »

A PHP forum is not a good place to get help for formatting HTML, but my advice would be to use the same script (a copy, really) that you used for audio recordings, with the changes I described earlier, then see how close (or far) that may be from what you want. If you need to make some adjustments, you could ask questions in an HTML or web design forum (we have one here: viewforum.php?f=68). It's hard to imagine that you would need somebody's script to do what you're describing, unless there's something quite exceptional in his design.
Post Reply