Jump to content

Need help to get info from Mysql DB and loop in Slider

Graficatek

By Graficatek
in PHP Coding Help

 Share

Recommended Posts

Graficatek Newbie

Graficatek

Posted
Posted

Im turning a static slider revolution in a dynamic.

Images are uploading and fetching perfect from Mysql DB but the texts (top-text) is showing only in the first slide. The rest is empty.

Here is the Code

Any help would be great.
Thanks in advance.

 

UPLOAD.php

  

<?php
// Include the database configuration file
include 'database/dbConfig.php';
$statusMsg = '';

// File upload path
$targetDir = "uploads/";
$fileName = basename($_FILES["file"]["name"]);
$top_text = filter_input(INPUT_POST, 'top_text');
$targetFilePath = $targetDir . $fileName;
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);

if(isset($_POST["submit"]) && !empty($_FILES["file"]["name"])){
    // Allow certain file formats
    $allowTypes = array('jpg','png','jpeg','gif','pdf');
    if(in_array($fileType, $allowTypes)){
        // Upload file to server
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){
            // Insert image file name into database
            $insert = $db->query("INSERT into images (file_name, top_text, uploaded_on) VALUES ('".$fileName."', '".$top_text."', NOW())");
            if($insert){
                $statusMsg = "The file ".$fileName. " has been uploaded successfully.";
            }else{
                $statusMsg = "File upload failed, please try again.";
            } 
        }else{
            $statusMsg = "Sorry, there was an error uploading your file.";
        }
    }else{
        $statusMsg = 'Sorry, only JPG, JPEG, PNG, GIF, & PDF files are allowed to upload.';
    }
}else{
    $statusMsg = 'Please select a file to upload.';
}

// Display status message
echo $statusMsg;
?>

 

SLIDER  

<!-- Revolution slider -->
<section id="slider">
        <div class="tp-banner-container ">
            <div class="tp-banner rev-banner-fullscreen">
                 <ul>
                    <!-- SLIDE -->
                    <?php
                     // Include the database configuration file
                      include 'database/dbConfig.php';
        
                     // Get images from the database
                       $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");
        
                          if($query->num_rows > 0){
                          while($row = $query->fetch_assoc()){
                         $imageURL = 'uploads/'.$row["file_name"];
                         $top_text = $row['top_text'];
                    ?>
                        <!-- DYNAMIC SLIDE  -->
                    <li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="<?php echo $imageURL; ?>" alt="" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYERS 1.2 -->
                        <div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
                        <?php echo $top_text; ?>
                        </div>
                        
                        <!-- /END DYNAMIC SLIDE  -->
                    </li>    

                        <?php }
                         }else{?>
                         

                          <!-- DEFAULT SLIDE  -->
                    <li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="images/slide/slide-5-bg.jpg" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYERS 1.2 -->
                        <div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
                            New Arrival
                        </div>

                    
                    <!-- /END DEFAULT SLIDE -->

                       <?php  } ?>

                    </li>
                    <!-- /SLIDE 1 -->

                    

                </ul>
            </div>
            <!-- /tp-banner -->
        </div>
        <!-- /tp-banner-container -->
    </section>
    <!-- /#Revolution slider -->

 

 

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

Have you inspected the HTML output to see if the text is there, but maybe is not within proper HTML tags making it 'hidden'? Your code is hard to follow for a number of reasons. But, my guess, is that there is a problem with the structure of the output. So, a couple of suggestions:

1. When checking for multiple error conditions, do not do this 

if(NOT error_condition_1) {
    if(NOT error_condition_2) {
        //Success handling
    } else {
        //Error condition 2 handling
    }
} else {
    //Error condition 1 handling
}

Instead, structure it so the error condition handling is adjacent tot he error condition check. Plus, try not to have a lot of nested if/else conditions. It makes the code much more readable. 

if(error_condition_1)
{
    //Error condition 1 handling
} elseif (error_condition_2) {
     //Error condition 2 handling
} else {
    //Success handling
}

2. use prepared queries. NEVER use user submitted data directly in a query

3. You aren't checking to see that the user provided the top_text or that you are even getting the value. I.e. if the field name was different between the form and the processing page it would insert an empty string. I'm assuming the problem is here and the value you think is being passed isn't referenced correctly and not getting set in the DB 

<?php
// Include the database configuration file
include 'database/dbConfig.php';
$statusMsg = '';

// File upload path
$targetDir = "uploads/";
$fileName = isset($_FILES["file"]["name"]) ? basename($_FILES["file"]["name"]) : false;
$top_text = filter_input(INPUT_POST, 'top_text');
$targetFilePath = $targetDir . $fileName;
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
//Create Prepared statement
$stmt = $pdo->prepare("INSERT into images (file_name, top_text, uploaded_on) VALUES (?, ?, NOW())");

// Allow certain file formats
$allowTypes = array('jpg','png','jpeg','gif','pdf');

//Check if there was an upload
if($fileName && $fileName!=''){
    
    $statusMsg = 'Please select a file to upload.';
}
//Verify top_text is valid
elseif (!$top_text || $top_text=='')
{
    $statusMsg = 'Please provide the text.';
}
//Verify valid file type
elseif(!in_array($fileType, $allowTypes))
{
    $statusMsg = 'Sorry, only JPG, JPEG, PNG, GIF, & PDF files are allowed to upload.';
}
//Attempt to upload file
elseif (!move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath))
{
    $statusMsg = "Sorry, there was an error uploading your file.";
}
//Attempt the insert query
elseif(!$stmt->execute([$fileName, $top_text]);)
{
    $statusMsg = "The file {$fileName} has been uploaded successfully.";
}
else
{
    //Insert succeeded
    $statusMsg = "File upload failed, please try again.";
}

// Display status message
echo $statusMsg;
?>

4. The 2nd block of code is hard to read because of the breaking in and out from PP/HTML repeatedly. Also, there is a TON of style properties in there. You should use a style sheet with classes. The complexity in the structure makes it impossible to see structure errors. After cleaning it up, I see that the closing LI tag for the default slide it outside the else container block for that slider. In other words, that closing LI tag is always outputting to the page - even when the default slider is not used. I don't see that this would cause your issue, but it just shows that such simple problems are hidden in that morass of code. There may be other errors that I can't "see" because of all the style properties, but here is a more readable re-write of that section 

<!-- Revolution slider -->
<section id="slider">
        <div class="tp-banner-container ">
            <div class="tp-banner rev-banner-fullscreen">
                 <ul>
                    <!-- SLIDES -->
<?php
// Include the database configuration file
include 'database/dbConfig.php';

// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");
        
if($query->num_rows = 0)
{
?>
                     <!-- DEFAULT SLIDE  -->
                    <li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="images/slide/slide-5-bg.jpg" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYERS 1.2 -->
                        <div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
                            New Arrival
                        </div>
                    </li>
                    <!-- /END DEFAULT SLIDE -->
<?php
} else {
    while($row = $query->fetch_assoc()){
?>
                     <!-- DYNAMIC SLIDES  -->
                    <li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="uploads/<?php echo $row["file_name"]; ?>" alt="" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYERS 1.2 -->
                        <div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
                        <?php echo $row['top_text']; ?>
                        </div>
                    </li>
                    <!-- /END DYNAMIC SLIDE  -->
<?php
    }
}
?>
                </ul>
            </div>
            <!-- /tp-banner -->
        </div>
        <!-- /tp-banner-container -->
    </section>
    <!-- /#Revolution slider -->

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.