First some general information.
My PHP runs approx 1000-1500 while loops depending on what the database returns.
Normal execution time is approx 0.3 sec. That's great :)
Now I need to load the PHP output on another page using AJAX and therefore I start adding the output to a $html variable in stead of just doing echo on it, so that it can be encoded to JSON format and send over AJAX.
I use the $html .= some_output for this. (this task must be done as many times as the while loop runs).
However after adding the $html .= in stead of echo the script is now taking +9 sec's to finish!!
That's clearly not optimal to the end user who is waiting for the AJAX call to return with some results.
I did some microtime on the code to be sure where the problem origins from - and no doubt it is the .= operator.
Any suggestions on how to minimize this?
EDIT: Here comes the code blocks.
First the one that loads flawlessly.
<?php
$time_start = microtime(true);
session_start();
include "../functions/sqlsrv_connect.php";
$skid_id = $_GET['skid_id'];
$vendor_id = $_GET['vendor_id'];
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="../stylesheets/fonts.css">
<link rel="stylesheet" type="text/css" href="../stylesheets/linkcontainer.css">
<script src="/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="parent" style="display: none;">
<?php
$sql_get_vdm_sections = "
SELECT
ml2.level2_descr,
ml2.level2_id
FROM
main_vdm_level2 AS ml2
JOIN
vdm_index AS vdm_i
ON
vdm_i.level2_id = ml2.level2_id
WHERE
vdm_i.skid_id = $skid_id
AND
vdm_i.vendor_id = $vendor_id
GROUP BY
ml2.level2_descr,
ml2.level2_id
ORDER BY
ml2.level2_id
";
$get_vdm_sections = sqlsrv_query($sqlsrv, $sql_get_vdm_sections);
while($vdm_section = sqlsrv_fetch_array($get_vdm_sections,SQLSRV_FETCH_ASSOC)){
$level2_id = $vdm_section['level2_id'];
$level2_descr = $vdm_section['level2_descr'];
?>
<div id="S<?php echo $level2_id;?>" class="section">
<div class="sectionhead">
<?php echo $level2_descr;?>
</div>
<div class="container_holder">
<div id="O<?php echo $level2_id;?>" class="obsolete_section">
<div class="obsolete_lineholder">
<div class="obsolete_header">
<div class="clmn_header">
<p class="small bold">Obsolete Documentation</p>
</div>
</div>
</div>
<div class="obsolete_lineholder">
<div class="obsolete_linkholder">
<a href="#" class="div" target="_blank">
<div class="obsolete_text">
</div>
</a>
</div>
</div>
<div class="obsolete_lineholder">
<div class="obsolete_linkholder">
<a href="#" class="div" target="_blank">
<div class="obsolete_text">
</div>
</a>
</div>
</div>
<div class="obsolete_lineholder">
<div class="obsolete_linkholder">
<a href="#" class="div" target="_blank">
<div class="obsolete_text">
</div>
</a>
</div>
</div>
</div>
<div class="active_cnt">
<div class="button_holder">
<div class="active_btn">
<p class="small">Active Documentation</p>
</div>
<div class="obsolete_btn">
<p class="small">View Obsolete Documentation</p>
</div>
</div>
<div class="lineholder">
<div class="linkholder">
<div class="clmn_header">
<p class="small bold">Chapters</p>
</div>
</div>
</div>
<div class="linkholder_cnt">
<?php
$file_verification = true;
$sql_get_section_content = "
SELECT
file_verification,
level3_head,
level3_descr,
level4_descr,
doc_no,
doc_place,
doc_denominator,
doc_type
FROM
vdm_index
WHERE
skid_id = $skid_id
AND
vendor_id = $vendor_id
AND
level2_id = $level2_id
AND
level4_descr IS NULL
";
$get_section_content = sqlsrv_query($sqlsrv, $sql_get_section_content);
$row_number = 1;
while ($section_content = sqlsrv_fetch_array($get_section_content,SQLSRV_FETCH_ASSOC)){
$level3_file_verification = $section_content['file_verification'];
$level3_head = $section_content['level3_head'];
$level3_descr = $section_content['level3_descr'];
$level3_doc_no = $section_content['doc_no'];
$level3_doc_place = $section_content['doc_place'];
$level3_doc_denominator = $section_content['doc_denominator'];
$level3_doc_type = $section_content['doc_type'];
$level3_width = 100;
$row_id = 'S'.$level2_id.'_R'.$row_number;
$sql_get_level4 = "
SELECT
file_verification,
level4_descr,
doc_no,
doc_place,
doc_denominator,
doc_type
FROM
vdm_index
WHERE
skid_id = $skid_id
AND
vendor_id = $vendor_id
AND
level2_id = $level2_id
AND
level3_descr = '$level3_descr'
AND
level4_descr IS NOT NULL
";
$get_level4 = sqlsrv_query($sqlsrv, $sql_get_level4);
$level4_array = array();
while ($level4 = sqlsrv_fetch_array($get_level4,SQLSRV_FETCH_ASSOC)){
array_push($level4_array, $level4);
}
if (!empty($level4_array)){
$level3_width -= 10;
$level4_active = true;
}
else {
$level4_active = false;
}
if ($file_verification != true){
$level3_width -= 10;
$level3_flag = true;
}
else {
$level3_flag = false;
}
?>
<div class="lineholder">
<a href="../proj_hist.pdf" class="div" target="_blank">
<div class="project">
<?php
if ($level3_doc_denominator != NULL){
?>
<svg x="0px" y="0px" width="45px" height="100%" viewBox="0 0 45 25" preserveAspectRatio="none">
<rect fill="#66FECB" width="27.1" height="25"></rect>
<polygon fill="#66FECB" points="45,12.5 27,0.000 27,25.000 "></polygon>
</svg>
<?php
}
?>
</div>
<div class="project_name">
<div class="project_text">
<?php echo $level3_doc_denominator;?>
</div>
</div>
</a>
<div class="linkholder" >
<div id="<?php echo $row_id;?>" class="top_row" >
<div class="projectstatus" style="background: #ffffff; width: 100%;">
</div>
<?php
if(!(empty($level3_head))&&empty($level3_descr)){
?>
<div class="link_text level3_head" style="float: left; width: 100%; white-space: nowrap;">
<?php echo $level3_head;?>
</div>
<?php
}
else {
?>
<a href="../functions/load_doc.php?doc_no=<?php echo $level3_doc_no.'&doc_place='.$level3_doc_place.'&doc_type='.$level3_doc_type.'&doc_denominator='.$level3_doc_denominator;?>" class="div" target="_blank">
<div class="link_text" style="float: left; width: <?php echo $level3_width;?>%; white-space: nowrap; overflow: hidden;">
<?php echo $level3_descr;?>
</div>
</a>
<?php
if($level3_flag == true){
?>
<div class="flag_this">
</div>
<?php
}
if ($level4_active == true){
?>
<div id="<?php echo $row_id;?>_EXPAND" class="expand">
<div class="expand_icon <?php echo $row_id;?>_EXPAND_icon">
</div>
</div>
<?php }
}
?>
</div>
<div class="clear">
</div>
<?php
if ($level4_active == true) {
?>
<div class="<?php echo $row_id;?>_level4">
<?php
foreach ($level4_array as $level4){
$level4_doc_no = $level4['doc_no'];
$level4_doc_place = $level4['doc_place'];
$level4_doc_type = $level4['doc_type'];
?>
<div id="<?php echo $row_id;?>_SL1" class="sub_row <?php echo $row_id;?>_EXPAND_sub">
<div class="projectstatus" style="background: #ffffff; width: 50%;">
</div>
<a href="../functions/load_doc.php?doc_no=<?php echo $level4_doc_no.'&doc_place='.$level4_doc_place.'&doc_type='.$level4_doc_type;?>" class="div" target="_blank">
<div class="sub_link_text">
<?php echo $level4['level4_descr'];?>
</div>
</a>
</div>
<div class="clear">
</div>
<?php
}
?>
</div>
<?php
}
?>
</div>
</div>
<?php
$row_number++;
}
?>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
<div id="additional_box">
<div id="additional_info">
I hold additional information about this document!
</div>
<div id="close_additional" onclick="close_additional()">
</div>
</div>
<script>
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
function additional() {
mouseY -= 5;
mouseX += 20;
$('#additional_box').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
};
function close_additional() {
$('#additional_box').hide();
};
function reset_expansion_icon(){
var index;
var i = document.getElementsByClassName('expand_icon');
for (index =0; index < i.length; ++index) {
i[index].style.backgroundImage = "url('../img/expand.png')";
}
}
function reset_this_expansion_icon(me){
var index;
var e = $(me).children('.expand_icon')
for (index =0; index < e.length; ++index) {
e[index].style.backgroundImage = "url('../img/expand.png')";
}
}
$('.flag_this').click(function(){
additional();
});
$('.obsolete_btn').click(function() {
$('.section').hide();
var section = $(this).closest('.section');
$(section).show();
//var btn_parent = $(this).parent();
var container = $(this).closest('.container_holder');
var obsolete = $(container).children('.obsolete_section');
$(obsolete).fadeIn(500);
$('.sub_row').hide();
reset_expansion_icon();
});
$('.active_btn').click(function() {
$('.section').fadeIn(500);
$('.obsolete_section').hide();
$('.sub_row').hide();
reset_expansion_icon();
});
$('.expand').click(function() {
var parent = $(this).parent('.top_row');
var level4_class = $(parent).attr('id') + '_level4';
var sub_row_class = $(parent).attr('id') + '_EXPAND_sub';
var index;
var e = document.getElementsByClassName(sub_row_class);
var d = document.getElementsByClassName(level4_class);
for (index = 0; index < e.length; ++index) {
if(e[index].style.display == 'block'){
$(d[0]).slideUp('slow');
e[index].style.display = 'none';
}
else{
d[0].style.display = 'block';
$(e[index]).fadeIn('slow');
}
}
var expand_icon_class = $(parent).attr('id') + '_EXPAND_icon';
var i = document.getElementsByClassName(expand_icon_class);
if (e[0].style.display == 'block')
i[0].style.backgroundImage = "url('../img/condense.png')";
else
var me = $(this);
reset_this_expansion_icon(me);
});
$(window).load(function(){
$('#parent').fadeIn(300);
});
</script>
</body>
</html>
<?php
echo 'Total execution time in seconds: ' . (microtime(true) - $time_start);
?>
And the the .= version (html, head and body is removed as it will load on another page)
<?php
$time_start = microtime(true);
session_start();
include "sqlsrv_connect.php";
$skid_id = $_POST['skid_id'];
$vendor_id = $_POST['vendor_id'];
$html = "
<div id='parent'>
";
$sql_get_vdm_sections = "
SELECT
ml2.level2_descr,
ml2.level2_id
FROM
main_vdm_level2 AS ml2
JOIN
vdm_index AS vdm_i
ON
vdm_i.level2_id = ml2.level2_id
WHERE
vdm_i.skid_id = $skid_id
AND
vdm_i.vendor_id = $vendor_id
GROUP BY
ml2.level2_descr,
ml2.level2_id
ORDER BY
ml2.level2_id
";
$get_vdm_sections = sqlsrv_query($sqlsrv, $sql_get_vdm_sections);
while($vdm_section = sqlsrv_fetch_array($get_vdm_sections,SQLSRV_FETCH_ASSOC)){
$level2_id = $vdm_section['level2_id'];
$level2_descr = $vdm_section['level2_descr'];
$html .= "
<div id='S$level2' class='section'>
<div class='sectionhead'>
$level2_descr
</div>
<div class='container_holder'>
<div id='O$level2_id' class='obsolete_section'>
<div class='obsolete_lineholder'>
<div class='obsolete_header'>
<div class='clmn_header'>
<p class='small bold'>Obsolete Documentation</p>
</div>
</div>
</div>
<div class='obsolete_lineholder'>
<div class='obsolete_linkholder'>
<a href='#' class='div' target='_blank'>
<div class='obsolete_text'>
</div>
</a>
</div>
</div>
<div class='obsolete_lineholder'>
<div class='obsolete_linkholder'>
<a href='#' class='div' target='_blank'>
<div class='obsolete_text'>
</div>
</a>
</div>
</div>
<div class='obsolete_lineholder'>
<div class='obsolete_linkholder'>
<a href='#' class='div' target='_blank'>
<div class='obsolete_text'>
</div>
</a>
</div>
</div>
</div>
<div class='active_cnt'>
<div class='button_holder'>
<div class='active_btn'>
<p class='small'>Active Documentation</p>
</div>
<div class='obsolete_btn'>
<p class='small'>View Obsolete Documentation</p>
</div>
</div>
<div class='lineholder'>
<div class='linkholder'>
<div class='clmn_header'>
<p class='small bold'>Chapters</p>
</div>
</div>
</div>
<div class='linkholder_cnt'>
";
$file_verification = true;
$sql_get_section_content = "
SELECT
file_verification,
level3_head,
level3_descr,
level4_descr,
doc_no,
doc_place,
doc_denominator,
doc_type
FROM
vdm_index
WHERE
skid_id = $skid_id
AND
vendor_id = $vendor_id
AND
level2_id = $level2_id
AND
level4_descr IS NULL
";
$get_section_content = sqlsrv_query($sqlsrv, $sql_get_section_content);
$row_number = 1;
while ($section_content = sqlsrv_fetch_array($get_section_content,SQLSRV_FETCH_ASSOC)){
$level3_file_verification = $section_content['file_verification'];
$level3_head = $section_content['level3_head'];
$level3_descr = $section_content['level3_descr'];
$level3_doc_no = $section_content['doc_no'];
$level3_doc_place = $section_content['doc_place'];
$level3_doc_denominator = $section_content['doc_denominator'];
$level3_doc_type = $section_content['doc_type'];
$level3_width = 100;
$row_id = 'S'.$level2_id.'_R'.$row_number;
$sql_get_level4 = "
SELECT
file_verification,
level4_descr,
doc_no,
doc_place,
doc_denominator,
doc_type
FROM
vdm_index
WHERE
skid_id = $skid_id
AND
vendor_id = $vendor_id
AND
level2_id = $level2_id
AND
level3_descr = '$level3_descr'
AND
level4_descr IS NOT NULL
";
$get_level4 = sqlsrv_query($sqlsrv, $sql_get_level4);
$level4_array = array();
while ($level4 = sqlsrv_fetch_array($get_level4,SQLSRV_FETCH_ASSOC)){
array_push($level4_array, $level4);
}
if (!empty($level4_array)){
$level3_width -= 10;
$level4_active = true;
}
else {
$level4_active = false;
}
if ($file_verification != true){
$level3_width -= 10;
$level3_flag = true;
}
else {
$level3_flag = false;
}
$html .= "
<div class='lineholder'>
<a href='../proj_hist.pdf' class='div' target='_blank'>
<div class='project'>
";
if ($level3_doc_denominator != NULL){
$html .= "
<svg x='0px' y='0px' width='45px' height='100%' viewBox='0 0 45 25' preserveAspectRatio='none'>
<rect fill='#66FECB' width='27.1' height='25'></rect>
<polygon fill='#66FECB' points='45,12.5 27,0.000 27,25.000 '></polygon>
</svg>
";
}
$html .= "
</div>
<div class='project_name'>
<div class='project_text'>
$level3_doc_denominator
</div>
</div>
</a>
<div class='linkholder' >
<div id='$row_id' class='top_row' >
<div class='projectstatus' style='background: #ffffff; width: 100%;'>
</div>
";
if(!(empty($level3_head))&&empty($level3_descr)){
$html .= "
<div class='link_text level3_head' style='float: left; width: 100%; white-space: nowrap;'>
$level3_head
</div>
";
}
else {
$html .= "
<a href='../functions/load_doc.php?doc_no=$level3_doc_no&doc_place=$level3_doc_place&doc_type=$level3_doc_type&doc_denominator=$level3_doc_denominator' class='div' target='_blank'>
<div class='link_text' style='float: left; width: $level3_width%; white-space: nowrap; overflow: hidden;'>
$level3_descr
</div>
</a>
";
if($level3_flag == true){
$html .= "
<div class='flag_this'>
</div>
";
}
if ($level4_active == true){
$html .= "
<div id='$row_id_EXPAND' class='expand'>
<div class='expand_icon $row_id_EXPAND_icon'>
</div>
</div>
";
}
}
$html .= "
</div>
<div class='clear'>
</div>
";
if ($level4_active == true) {
$html .= "
<div class='$row_id_level4'>
";
foreach ($level4_array as $level4){
$level4_doc_no = $level4['doc_no'];
$level4_doc_place = $level4['doc_place'];
$level4_doc_type = $level4['doc_type'];
$level4_descr = $level4['level4_desr'];
$html .= "
<div id='$row_id_SL1' class='sub_row $row_id_EXPAND_sub'>
<div class='projectstatus' style='background: #ffffff; width: 50%;'>
</div>
<a href='../functions/load_doc.php?doc_no=$level4_doc_no&doc_place=$level4_doc_place&doc_type=$level4_doc_type' class='div' target='_blank'>
<div class='sub_link_text'>
$level4_descr
</div>
</a>
</div>
<div class='clear'>
</div>
";
}
$html .= "
</div>
";
}
$html .= "
</div>
</div>
";
$row_number++;
}
$html .= "
</div>
</div>
</div>
</div>
";
$time_end = microtime(true);
$total_time = $time_end - $time_start;
$html .= 'Total execution time in seconds: ' . $total_time;
}
$html .= "
</div>
<div id='additional_box'>
<div id='additional_info'>
I hold additional information about this document!
</div>
<div id='close_additional' onclick='close_additional()'>
</div>
</div>
";
$script = "
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
function additional() {
mouseY -= 5;
mouseX += 20;
$('#additional_box').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
};
function close_additional() {
$('#additional_box').hide();
};
function reset_expansion_icon(){
var index;
var i = document.getElementsByClassName('expand_icon');
for (index =0; index < i.length; ++index) {
i[index].style.backgroundImage = 'url('../img/expand.png')';
}
}
function reset_this_expansion_icon(me){
var index;
var e = $(me).children('.expand_icon')
for (index =0; index < e.length; ++index) {
e[index].style.backgroundImage = 'url('../img/expand.png')';
}
}
$('.flag_this').click(function(){
additional();
});
$('.obsolete_btn').click(function() {
$('.section').hide();
var section = $(this).closest('.section');
$(section).show();
//var btn_parent = $(this).parent();
var container = $(this).closest('.container_holder');
var obsolete = $(container).children('.obsolete_section');
$(obsolete).fadeIn(500);
$('.sub_row').hide();
reset_expansion_icon();
});
$('.active_btn').click(function() {
$('.section').fadeIn(500);
$('.obsolete_section').hide();
$('.sub_row').hide();
reset_expansion_icon();
});
$('.expand').click(function() {
var parent = $(this).parent('.top_row');
var level4_class = $(parent).attr('id') + '_level4';
var sub_row_class = $(parent).attr('id') + '_EXPAND_sub';
var index;
var e = document.getElementsByClassName(sub_row_class);
var d = document.getElementsByClassName(level4_class);
for (index = 0; index < e.length; ++index) {
if(e[index].style.display == 'block'){
$(d[0]).slideUp('slow');
e[index].style.display = 'none';
}
else{
d[0].style.display = 'block';
$(e[index]).fadeIn('slow');
}
}
var expand_icon_class = $(parent).attr('id') + '_EXPAND_icon';
var i = document.getElementsByClassName(expand_icon_class);
if (e[0].style.display == 'block')
i[0].style.backgroundImage = 'url('../img/condense.png')';
else
var me = $(this);
reset_this_expansion_icon(me);
});
$(window).load(function(){
$('#parent').fadeIn(300);
});
";
$json = array();
$json['html'] = $html;
$json['script'] = $script;
header('Content-Type: application/json');
echo json_encode( $json );
?>
First some basic benchmarking
Actually... looking a bit more into it, the concat operator should be faster than the (often more convenient) array method...
<?php
ini_set('memory_limit', '256M');
$start = microtime(true);
$html = array();
for ($i=0; $i < 900000; $i++) {
$html[] = "Line number $i\n";
}
$html_out = implode('', $html);
$time_spent = microtime(true) - $start;
printf("Array method: %ss\n", number_format($time_spent, 5));
printf("Array method md5: %s\n", md5($html_out));
unset($start);unset($html);unset($html_out);
$start = microtime(true);
$html = '';
for ($i=0; $i < 900000; $i++) {
$html .= "Line number $i\n";
}
$time_spent = microtime(true) - $start;
printf("Concat method: %ss\n", number_format($time_spent, 5));
printf("Concat method md5: %s\n", md5($html));
unset($start);unset($html);unset($html_out);
$start = microtime(true);
ob_start();
for ($i=0; $i < 900000; $i++) {
echo "Line number $i\n";
}
$html = ob_get_clean();
$time_spent = microtime(true) - $start;
printf("Output buffering method: %ss\n", number_format($time_spent, 5));
printf("Output buffering method md5: %s\n", md5($html));
Output:
Array method: 0.43333s
Array method md5: d3700cc66c04760d857e8bc9a986399c
Concat method: 0.21945s
Concat method md5: d3700cc66c04760d857e8bc9a986399c
Output buffering method: 0.22360s
Output buffering method md5: d3700cc66c04760d857e8bc9a986399c
...then trying to answer the question
Possible cause #1
I think the only reasonable explanation to your problem is lack of physical memory - when you do a plain echo (without output buffering), you don't keep much in memory - but if the strings you are concatenating are relatively long, then you may reach the limit of your physical memory when you store them in memory (no matter which method you use to do so)... so swapping could occur...?
Possible cause #2
On line 237 in the old code you have
<div id="<?php echo $row_id;?>_EXPAND" class="expand">
In the new code (on line 250) that becomes
echo "[...]<div id='$row_id_EXPAND' class='expand'>[...]"
Which means you are looking up a variable called $row_id_EXPAND - which I'm guessing doesn't exist, and therefore could cause a write operation to one or more error-logs for each iteration of the loop (and you have several of the same mistake elsewhere) This could potentially mean tens or even hundreds of thousands of lines in the error log per request === a lot of time spent writing all that data.
To avoid this kind of problem always encapsulate variables in {}, ie. make it:
echo "[...]<div id='{$row_id}_EXPAND' class='expand'>[...]"
Try ob_start() maybe.
Not actually verfied to be faster by myself but allows you to collect the results of echo from the buffer.
Example of using ob_start():
ob_start();
echo("Hello there!"); //would normally get printed to the screen/output to browser
$output = ob_get_clean();
None of the echo's will work as PHP will use a different string buffer whose results can be loaded into an array at the end. The ob_get_clean() will allow echo to start working again.
Hope this helps.
Related
I have a page which allows you to filter results using an AJAX call which works fine, I have added pagination which work fine initially but as soon as you move to another page, the checkbox becomes unchecked and it just shows all results again. I assume this is because the page is reloading when it moves to page 2, is there a way of keep the filter setting set and continue to show the results from the filter AJAX. The pagination obvisouly works fine when no filter is selected but my brain just doesn't seem to be working and can't work this out.
Any help would be appreciated!
My code is below, I am also aware that currently my code is open to sql injection but just trying to get everything to work and then will go back through it:
<body>
<?php include("PHP/header.php"); ?>
<div class="container-fluid">
<div class="container" style="margin-top: 2%; text-align: center;">
<h1> Reviews</h1>
On This page you will find our reviews on music tech and software
<br/>
<br/>
<br/>
Filter Reviews:
<ul class="list-group">
<?php
$search = $conn->prepare("SELECT DISTINCT reviewcat FROM review_db ORDER BY reviewcat");
$search->execute();
while ($row = $search->fetch(PDO::FETCH_ASSOC)) {
?>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input product_check" value="<?=$row['reviewcat'];?>" id="reviewcat"> <?=$row['reviewcat']; ?>
</label>
</div>
</li>
<?php } ?>
</ul>
</div>
<br/><br/>
<div class="row-fluid ">
<h5 class="text-center" id="textChange"> All Reviews </h5>
<hr>
<div class="text-center">
<img src="Images/loader.gif" id="loader" width="100" style="display: none">
</div>
<?php
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 8;
$offset = ($pageno-1) * $no_of_records_per_page;
// Prev + Next
$prev = $pageno - 1;
$next = $pageno + 1;
?>
<div id="result" class="card-deck card_group_style pt-4" >
<?php
$stmt = $conn->prepare("SELECT COUNT(*) FROM review_db");
$stmt->execute();
$total_rows = $stmt->fetchColumn();
$total_pages = ceil($total_rows / $no_of_records_per_page);
$result = $conn->prepare("SELECT * FROM review_db ORDER BY reviewsub DESC LIMIT $offset, $no_of_records_per_page ");
$result->execute();
?>
<?php while ($row = $result->fetch(PDO::FETCH_ASSOC)) {// Important line !!! Check summary get row on array .. ?>
<?php
$my_date = $row['reviewsub'];
$date = DATE("d/m/Y",strtotime($my_date));
?>
<div class="col-sm-6 col-lg-3 py-2">
<div class="card mb-4">
<img class="card-img-top card-images " src="Images/Reviews/<?php echo $row['reviewimage1'];?>" alt="<?php echo $row['reviewtitle'];?>" >
<div class="card-body">
<h5 class="card-title"><?php echo $row['reviewtitle'];?></h5>
<p class="card-text"><?php echo $row['reviewsynop'];?></p>
<a href="Reviews/review-content.php?id=<?php echo $row['id'];?>&reviewtitle=<?php echo $row['reviewtitle'];?>" class="btn btn-primary my-4" >Read More</a>
<div class="card-footer" style="padding: 1%;">
<small class="text-muted">Submitted: <?php echo $date; ?></small>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="container">
<!-- Pagination Controller -->
<?php
if($total_pages <= 1){
$hidepage = 'none';
}else{
$hidepage = 'flex';
}
?>
<ul class="pagination justify-content-center pagination-mb" style="display: <?php echo $hidepage; ?>">
<li><a class="page-link" href="?pageno=1">First</a></li>
<li class="page-item <?php if($pageno <= 1){ echo 'disabled'; } ?>">
<a class="page-link" href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
</li>
<?php for($i = 1; $i <= $total_pages; $i++ ): ?>
<li class="page-item <?php if($pageno == $i) {echo 'active'; } ?>">
<a class="page-link" href="?pageno=<?= $i; ?>"> <?= $i; ?> </a>
</li>
<?php endfor; ?>
<li class="page-item <?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
<a class="page-link" href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
</li>
<li><a class="page-link" href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
</ul>
<!-- Pagination end -->
</div>
</div>
</div>
</div>
<?php include("PHP/footer.php"); ?>
</div>
</body>
<?php include("PHP/js.php"); ?>
<script>
$(document).ready(function(){
$('#link-review,#link-footer-review').addClass('active');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
function get_filter_text(text_id){
var filterData = [];
$('#'+text_id+':checked').each(function(){
filterData.push($(this).val());
});
return filterData;
}
$(".product_check").click(function(){
if ($(this).prop('checked')) {
$("#loader").show();
var action = 'data';
var reviewcat = get_filter_text('reviewcat');
$.ajax({
method:'POST',
url:'reviewaction.php',
data:{action:action,reviewcat:reviewcat},
success:function(response){
$("#result").html(response);
$("#loader").hide();
$("#textChange").text("Filtered Reviews");
}
});
} else {
$("#loader").show();
var action = 'data';
var reviewcat = get_filter_text('reviewcat');
$.ajax({
method:'POST',
url:'reviewaction.php',
data:{action:action,reviewcat:reviewcat},
success:function(response){
$("#result").html(response);
$("#loader").hide();
$("#textChange").text("All Reviews");
}
});
}
});
});
</script>
reviewaction.php:
<?php
if(isset($_POST['action'])){
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 8;
$offset = ($pageno-1) * $no_of_records_per_page;
// Prev + Next
$prev = $pageno - 1;
$next = $pageno + 1;
$checksql = "SELECT COUNT(*) FROM review_db WHERE reviewcat !=''";
$sql = "SELECT * FROM review_db WHERE reviewcat !=''";
if(isset($_POST['reviewcat'])){
$reviewcat = implode("','", $_POST['reviewcat']);
$checksql .="AND reviewcat IN('".$reviewcat."')";
$sql .="AND reviewcat IN('".$reviewcat."')";
}
$resultpag = $conn->prepare($checksql);
$resultpag->execute();
$total_rows = $resultpag->fetchColumn();
$total_pages = ceil($total_rows / $no_of_records_per_page);
$sql .="ORDER BY reviewsub DESC LIMIT $offset, $no_of_records_per_page ";
$result = $conn->prepare($sql);
$result->execute();
$output='';
if (count($result) > 0) {
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$my_date = $row['reviewsub'];
$date = DATE("d/m/Y",strtotime($my_date));
$output .= '
<div class="col-sm-6 col-lg-3 py-2">
<div class="card mb-4">
<img class="card-img-top card-images" src="Images/Reviews/'.$row['reviewimage1'].'" alt="'.$row['reviewtitle'].'" >
<div class="card-body">
<h5 class="card-title">'.$row['reviewtitle'].'</h5>
<p class="card-text">'.$row['reviewsynop'].'</p>
<a href="Reviews/review-content.php?id='.$row['id'].'&reviewtitle='.$row['reviewtitle'].'" class="btn btn-primary my-4" >Read More</a>
<div class="card-footer" style="padding: 1%;">
<small class="text-muted">Submitted: '.$date.'</small>
</div>
</div>
</div>
</div>
';
} //While Loop End
}else{
$output = "<h3>No Reviews Found!</h3>";
}
echo $output;
}
?>
You can do it a couple of ways. One is to add the filter to the GET URI parameters of each page link at the end of your filter function, and add code that marks the filters as selected/checked if the parameters exist in the URI before running the POST request. The other is to change the code so that pagination is done with the same POST request instead of actually navigating to a new URL.
I am trying to make it so only the 3 with the highest scores show up. How would I make it only echo 3 times with the highest scores?
Right now it goes through and echos every input. It should show up as a top 3 list with best scores, their names, and their picture.
I have tried with the max($ar) but I cant get it to show both image, score and name together.
$n1 = get_option('scoreboard_option_name1');
$n2 = get_option('scoreboard_option_name2');
$n3 = get_option('scoreboard_option_name3');
$n4 = get_option('scoreboard_option_name4');
$n5 = get_option('scoreboard_option_name5');
$n6 = get_option('scoreboard_option_name6');
$n7 = get_option('scoreboard_option_name7');
$n8 = get_option('scoreboard_option_name8');
$n9 = get_option('scoreboard_option_name9');
$n10 = get_option('scoreboard_option_name10');
$n11 = get_option('scoreboard_option_name11');
$n12 = get_option('scoreboard_option_name12');
$n13 = get_option('scoreboard_option_name13');
$n14 = get_option('scoreboard_option_name14');
$n15 = get_option('scoreboard_option_name15');
$n16 = get_option('scoreboard_option_name16');
$n17 = get_option('scoreboard_option_name17');
$n18 = get_option('scoreboard_option_name18');
$n19 = get_option('scoreboard_option_name19');
$n20 = get_option('scoreboard_option_name20');
$s1 = get_option('scoreboard_option_score1');
$s2 = get_option('scoreboard_option_score2');
$s3 = get_option('scoreboard_option_score3');
$s4 = get_option('scoreboard_option_score4');
$s5 = get_option('scoreboard_option_score5');
$s6 = get_option('scoreboard_option_score6');
$s7 = get_option('scoreboard_option_score7');
$s8 = get_option('scoreboard_option_score8');
$s9 = get_option('scoreboard_option_score9');
$s10 = get_option('scoreboard_option_score10');
$s11 = get_option('scoreboard_option_score11');
$s12 = get_option('scoreboard_option_score12');
$s13 = get_option('scoreboard_option_score13');
$s14 = get_option('scoreboard_option_score14');
$s15 = get_option('scoreboard_option_score15');
$s16 = get_option('scoreboard_option_score16');
$s17 = get_option('scoreboard_option_score17');
$s18 = get_option('scoreboard_option_score18');
$s19 = get_option('scoreboard_option_score19');
$s20 = get_option('scoreboard_option_score20');
$p1 = get_option('scoreboard_image1');
$p2 = get_option('scoreboard_image2');
$p3 = get_option('scoreboard_image3');
$p4 = get_option('scoreboard_image4');
$p5 = get_option('scoreboard_image5');
$p6 = get_option('scoreboard_image6');
$p7 = get_option('scoreboard_image7');
$p8 = get_option('scoreboard_image8');
$p9 = get_option('scoreboard_image9');
$p10 = get_option('scoreboard_image10');
$p11 = get_option('scoreboard_image11');
$p12 = get_option('scoreboard_image12');
$p13 = get_option('scoreboard_image13');
$p14 = get_option('scoreboard_image14');
$p15 = get_option('scoreboard_image15');
$p16 = get_option('scoreboard_image16');
$p17 = get_option('scoreboard_image17');
$p18 = get_option('scoreboard_image18');
$p19 = get_option('scoreboard_image19');
$p20 = get_option('scoreboard_image20');
$cp1 = get_option('scoreboard_carimage1');
$cp2 = get_option('scoreboard_carimage2');
$cp3 = get_option('scoreboard_carimage3');
$cp4 = get_option('scoreboard_carimage4');
$cp5 = get_option('scoreboard_carimage5');
$cp6 = get_option('scoreboard_carimage6');
$cp7 = get_option('scoreboard_carimage7');
$cp8 = get_option('scoreboard_carimage8');
$cp9 = get_option('scoreboard_carimage9');
$cp10 = get_option('scoreboard_carimage10');
$cp11 = get_option('scoreboard_carimage11');
$cp12 = get_option('scoreboard_carimage12');
$cp13 = get_option('scoreboard_carimage13');
$cp14 = get_option('scoreboard_carimage14');
$cp15 = get_option('scoreboard_carimage15');
$cp16 = get_option('scoreboard_carimage16');
$cp17 = get_option('scoreboard_carimage17');
$cp18 = get_option('scoreboard_carimage18');
$cp19 = get_option('scoreboard_carimage19');
$cp20 = get_option('scoreboard_carimage20');
$namelist = array($n1, $n2, $n3, $n4, $n5, $n6, $n7, $n8, $n9, $n10, $n11, $n12, $n13, $n14, $n15, $n16, $n17, $n18, $n19, $n20, );
$scorelist = array($s1, $s2, $s3, $s4,$s5, $s6, $s7, $s8, $s9, $s10,$s11,$s12,$s13,$s14,$s15,$s16,$s17,$s18,$s19,$s20 );
$picturelist = array($p1, $p2, $p3, $p4, $p5, $p6, $p7, $p8, $p9, $p10, $p11, $p12, $p13, $p14, $p15, $p16, $p17, $p18, $p19, $p20 );
$carlist = array($cp1, $cp2, $cp3, $cp4, $cp5, $cp6, $cp7, $cp8, $cp9, $cp10, $cp11, $cp12, $cp13, $cp14, $cp15, $cp16, $cp17, $cp18, $cp19, $cp20 );
$carlist = array($cp1, $cp2, $cp3, $cp4, $cp5, $cp6, $cp7, $cp8, $cp9, $cp10, $cp11, $cp12, $cp13, $cp14, $cp15, $cp16, $cp17, $cp18, $cp19, $cp20 );
?>
<div class="row">
<?php
$i = -1;
foreach ($namelist as $name) {
$i++;
echo '
<div class="column" style="float: left; width: 33.33%; padding-top: 35px; padding-bottom: 35px; border-bottom: 2px solid red; height: 493px;">
<div class="et_pb_module et_pb_code et_pb_code_0 et_pb_text_align_center">
<div class="et_pb_code_inner">'.$imgPlaceholder.'</div>
</div> <!-- .et_pb_code -->
<div class="et_pb_module et_pb_code et_pb_code_1 et_pb_text_align_center">
<div class="et_pb_code_inner">
<h2 style="font-size: calc(0.7em + 1vw)">', $namePlaceholder, '</h2>
</div>
</div> <!-- .et_pb_code -->
<div class="et_pb_module et_pb_code et_pb_code_2 et_pb_text_align_center">
<div class="et_pb_code_inner">
<h4> <b>
', $scorelist[$i], ' point
</b>
</h4>
</div>
</div> <!-- .et_pb_code -->
<div class="et_pb_code_inner" style="
text-align: center;
">
<img src="', $carlist[$i] ,'" alt="" class="alignnone size-thumbnail wp-image-30280" width="200">
</div>
</div> <!-- .et_pb_column -->
';
}
?>
</div>
The thing you are looking for here is array sorting. Since I don't know what's the exact key to value pairing of the $scorelist array, I'll assume it's a numeric array with the scores stored as values, to sort this array you need to use arsort function.
<?php
arsort($scorelist);
foreach($scorelist as $key => $score){
echo $score;
}
This code will print you the scores based on their highest values. From there on you can add your HTML and other values by using the $key inside the foreach, that will give you the index number of the element so you can access your other list elements with it.
Okay, the way your data is structured is not ideal. So I've changed that for you so we can manipulate things properly. Bear in mind that I didn't test this so you may have to tweak some things yourself but this is more or less what you need to do.
<?php
// Structure data into an associative array in order to easily access related data
$racers = array();
for ($n=1; $n<21; $n++) {
array_push($racers, array(
get_option("scoreboard_option_score{$n}") => array(
'name' => get_option("scoreboard_option_name{$n}"),
'picture' => get_option("scoreboard_option_image{$n}"),
'car' => get_option("scoreboard_option_carimage{$n}"),
)
));
}
?>
<div class="row">
<?php
// Get top 3 scores
krsort($racers);
$top3 = (array_slice($scorelist, 0, 3));
// Use key in top3 to determine which name, car and picture it relates to
foreach ($top3 as $score => $data) {
?>
<div class="column" style="float: left; width: 33.33%; padding-top: 35px; padding-bottom: 35px; border-bottom: 2px solid red; height: 493px;">
<div class="et_pb_module et_pb_code et_pb_code_0 et_pb_text_align_center">
<div class="et_pb_code_inner">
<!-- Racer Image -->
<img src="<?php echo $data['picture']; ?>" alt="<?php echo $data['name']; ?>">
</div>
</div> <!-- .et_pb_code -->
<div class="et_pb_module et_pb_code et_pb_code_1 et_pb_text_align_center">
<div class="et_pb_code_inner">
<h2 style="font-size: calc(0.7em + 1vw)">
<!-- Racer Name -->
<?php echo $data['name']; ?>
</h2>
</div>
</div> <!-- .et_pb_code -->
<div class="et_pb_module et_pb_code et_pb_code_2 et_pb_text_align_center">
<div class="et_pb_code_inner">
<h4>
<b>
<?php echo "{$score} points" ?>
</b>
</h4>
</div>
</div> <!-- .et_pb_code -->
<div class="et_pb_code_inner" style="text-align: center;">
<img src="<?php echo $data['car']; ?>" alt="" class="alignnone size-thumbnail wp-image-30280" width="200">
</div>
</div> <!-- .et_pb_column -->
<?php
}
?>
</div>
I have a Problem:
I coded a whole gallery with bootstrap and in this gallery are gaps. There are 100 pictures on 7 pages and instead of going down in one picture block it has gaps between it. This follows no obvious order.
Here is a picture:
So I wanted to take the whole col-md etc and picture container away and make my own columns. So that it works properly, but my solution from the internet doesn't work... I think it must be a problem with PHP that it is in a For loop and not in pure HTML like in the solutions. But I don't know how to solve it.
Here is the PHP code before:
<?php
//require_once("galerie-config.php");
if (!isset($_GET['pageindex'])) {
$_GET['pageindex'] = "1";
}....
<script type='text/javascript' src='../js/Bateaux/jquery/jquery.js'></script>
<script type='text/javascript' src='../js/Bateaux/jquery/jquery-migrate.min.js'></script>
<script type='text/javascript' src='../revslider/public/assets/js/jquery.themepunch.tools.min.js'></script>
<script type='text/javascript' src='../revslider/public/assets/js/jquery.themepunch.revolution.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var BateauxOptions = {"ajax_url":"../js/admin-ajax.html"};
/* ]]> */
</script>
<script type='text/javascript'>
/* <![CDATA[ */
var mejsL10n = {
"language": "en-US",
"strings": {
"Close": "Close",
"Fullscreen": "Fullscreen",
"Download File": "Download File",
"Download Video": "Download Video",
"Play\/Pause": "Play\/Pause",
"Mute Toggle": "Mute Toggle",
"None": "None",
"Turn off Fullscreen": "Turn off Fullscreen",
"Go Fullscreen": "Go Fullscreen",
"Unmute": "Unmute",
"Mute": "Mute",
"Captions\/Subtitles": "Captions\/Subtitles"
}
};
var _wpmejsSettings = {
"pluginPath": "../js\/mediaelement\/"
};
/* ]]> */
</script>
<script type='text/javascript' src='../js/Bateaux/hoverIntent.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/main-vendors.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/main.min.js'></script>
<!-- INNER BANNER STARTS
========================================================================= -->
<div class="inner-banner" style="background-color:#fff;">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Referenzen</li>
<li class="active">Galerie</li>
</ol>
<h1>Galerie</h1>
</div>
</div>
<!-- /. INNER BANNER STARTS
========================================================================= -->
<!-- PORTFOLIO STARTS
========================================================================= -->
**<div class="container contents portfolio">
<div class="row no-gutter-6">
<?php
require_once("dbh.php");
$numPicturesPerPage = 20;
//$seiten = [0,1,2,3,4,5,6,7,8,9,10];
global $pageIndex;
$pageIndex = 1;
if (isset($_GET['pageindex'])) {
$pageIndex = $_GET['pageindex'];
}
$bildauswahl = $numPicturesPerPage * ($pageIndex -1);
$sql = "SELECT * FROM galeriebilder LIMIT $bildauswahl,$numPicturesPerPage";
$rows = $dbh->query($sql);
$imgPathNames = [];
$i = 0;
foreach ($rows as $row) {
//for ($i=0;$i<$numPicturesPerPage;$i++) {
$bildcode = $row['bildcode'];
//array_push($imgPathNames, $bildcode);
$i++;
echo "<!-- Picture Starts -->";
***echo "<div class='col-lg-6 col-md-6 col-sm-6'>";
echo "<div class='picture'>";
echo "<img id='aquarium-galerie-" . $i . "' src='../images/galerie/". "$bildcode" . "'" . " onclick='alert(\"" . $bildcode . "\")' class='img-responsive editable' alt='' />";
echo "</div>";
echo "</div>";
//}***
?>
<!-- Picture Ends -->
<?php
}
?>
</div>
<div class="row">
<!-- Picture Starts -->
<?php
global $numPages;
$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row){
global $numPictures;
$numPictures = $row[0];
}
$biggerThan = $numPictures % $numPicturesPerPage;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($biggerThan > 0) {
$numPages++;
}
if (preg_match("/d+/", $pageIndex, $matches)) { $pageIndex = $matches[0]; } // Filtert die Zahl aus z.B. 2.php heraus
function navSeiten($aktuell,$gesamt) {
$pageIndex = $_GET['pageindex'];
$next = $aktuell + 1;
$previous = $aktuell - 1;
$ausgabe = '<ul class="pager">';
if ($aktuell <= 3 ) {
$seiten = array(1,2,3,4,5);
}else if ($aktuell == $gesamt -3 ) {
$seiten = array($aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}else if ($aktuell >= $gesamt -3 ) {
$seiten = array($gesamt -4 , $gesamt -3, $gesamt -2 , $gesamt -1, $gesamt );
} else {
$seiten = array( $aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}
//echo ($pageIndex);
?>
<li class="previous" style="<?php
if ($pageIndex == "1" ) { echo "display:none ";} ?>" >
<a href="galerie.php?pageindex=' . $previous . '" aria-label="Previous">
<span aria-hidden="true"></span>
</a>
</li>
<?php
foreach ($seiten as $seite) {
if ($seite == $pageIndex) {
$ausgabe .= '<li class="active">' . $seite . '</li>';
} else {
$ausgabe .='<li>' . $seite . '</li>';
}
}
?><li class="next" style="
<?php
/*$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
$numPictures = $row[0];
}*/
$numPicturesPerPage = 20;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($pageIndex == $numPages ) { echo "display:none"; }
?>" >
<a href="galerie.php?pageindex=' . $next . '" aria-label="Next">
<span aria-hidden="true"></span>
</a>
</li>
<?php
//echo $numPages;
echo $numPictures;
$ausgabe .= '</ul>';
return $ausgabe;
}
?>
<div class="col-lg-12 no-gutter-12 pagging">
<?php echo navSeiten($pageIndex,$numPages) ?> <!-- Dies ist der Funktionsaufruf der Funktion die die komplette Leiste der Seitenaufrufe-->
</div>
</div>
</div>
<!-- /. PORTFOLIO ENDS**
========================================================================= -->
<!-- FOOTER STARTS
========================================================================= -->
<footer class="parallax-1">
<!-- Social Media Starts -->
<div class="social-media transparent-black-bg" style="background-color:#000;">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Facebook</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Youtube</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Instagram</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Google+</div>
</div>
</div>
</div>
</div>
<!-- Social Media Ends -->
<!-- Contact Info Starts -->
<div class="contact-info" style="background-color:#313131;">
<div class="container">
<div class="row">
<!-- Address Starts -->
<div class="col-lg-3 col-md-3 col-sm-3 address">
<div class="footer-logo"><img src="../images/Startseite/Logo-Footer.png" class="img-responsive" alt="Logo von Biological Aqua Dreams (eine Koralle)" style="margin-left:0;"></div>
<address>
<strong>KONRAD-HAUSSMANN-WEG 6<br>
D-73614 SCHORNDORF</strong>
<div class="phone">+49 176 6316 1653</div>
<div>INFO#BIOLOGICAL-AQUA-DREAMS.COM</div>
</address>
<div class="about">Sie haben Fragen? Kontaktieren Sie uns einfach telefonisch oder per Email.</div>
</div>
<!-- Address Ends -->
<!-- Blog Posts Starts -->
<div class="col-lg-4 col-md-4 col-sm-4 latest-posts">
<h1>ALLES AUF EINEN BLICK</h1>
<div class="post">
<h2>Unsere Leistungen </h2>
<div class="info"><span class="user">Erfahren Sie mehr über uns</span></div>
</div>
<div class="post">
<h2>Wartung und Reparatur</h2>
<div class="info"><span class="user">Wir sind für Sie da</span></div>
</div>
</div>
<!-- Blog Posts Ends -->
<!-- Get in Touch Starts -->
<div class="col-lg-5 col-md-5 col-sm-5 get-in-touch">
<h1>KONTAKT AUFNEHMEN</h1>
<form action='../process.php' method='post' name='ContactForm' id='ContactForm'>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email *">
</div>
<textarea rows="5" class="form-control" name="comment" placeholder="Nachricht *"></textarea>
<div id='message_post'></div>
<input class="btn btn-default" type='submit' value='SENDEN' name='submitf' id="submitf" style="outline:none;">
</form>
</div>
<!-- Get in Touch Ends -->
</div>
</div>
</div>
<!-- Contact Info Ends -->
<!-- Copyright Starts -->
<div class="copyright light-grey-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">© 2018 BIOLOGICAL AQUA DREAMS |
DATENSCHUTZ | IMPRESSUM</div>
<div class="col-lg-4 col-md-4 col-sm-4 created-by">Created by Crew Ad</div>
</div>
</div>
</div>
<!-- Copyright Starts -->
</footer>
....
And here after my solution:
<div class="container contents portfolio">
<div class="row no-gutter-6">
<?php
require_once("dbh.php");
$numPicturesPerPage = 20;
//$seiten = [0,1,2,3,4,5,6,7,8,9,10];
global $pageIndex;
$pageIndex = 1;
if (isset($_GET['pageindex'])) {
$pageIndex = $_GET['pageindex'];
}
$bildauswahl = $numPicturesPerPage * ($pageIndex -1);
$sql = "SELECT * FROM galeriebilder LIMIT $bildauswahl,$numPicturesPerPage";
$rows = $dbh->query($sql);
$imgPathNames = [];
$i = 0;
foreach ($rows as $row) {
//for ($i=0;$i<$numPicturesPerPage;$i++) {
$bildcode = $row['bildcode'];
//array_push($imgPathNames, $bildcode);
$i++;
echo "<!-- Picture Starts -->";
//echo "<div class='col-lg-6 col-md-6 col-sm-6'>";
echo "<div class='picture'>";
echo "<figure><img id='aquarium-galerie-" . $i . "' src='../images/galerie/". "$bildcode" .
"'" . "width='750px' height='500px' onclick='alert(\"" . $bildcode .
"\")' class='img-responsive pic editable' alt='' /></figure>";
echo "</div>";
//echo "</div>";
//}
?>
<!-- Picture Ends -->
<?php
}
?>
</div>
<div class="row">
<!-- Picture Starts -->
<?php
global $numPages;
$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row){
global $numPictures;
$numPictures = $row[0];
}
$biggerThan = $numPictures % $numPicturesPerPage;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($biggerThan > 0) {
$numPages++;
}
if (preg_match("/d+/", $pageIndex, $matches)) { $pageIndex = $matches[0]; } // Filtert die Zahl aus z.B. 2.php heraus
function navSeiten($aktuell,$gesamt) {
$pageIndex = $_GET['pageindex'];
$next = $aktuell + 1;
$previous = $aktuell - 1;
$ausgabe = '<ul class="pager">';
if ($aktuell <= 3 ) {
$seiten = array(1,2,3,4,5);
}else if ($aktuell == $gesamt -3 ) {
$seiten = array($aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}else if ($aktuell >= $gesamt -3 ) {
$seiten = array($gesamt -4 , $gesamt -3, $gesamt -2 , $gesamt -1, $gesamt );
} else {
$seiten = array( $aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}
//echo ($pageIndex);
?>
<li class="previous" style="<?php
if ($pageIndex == "1" ) { echo "display:none ";} ?>" >
<a href="galerie.php?pageindex=' . $previous . '" aria-label="Previous">
<span aria-hidden="true"></span>
</a>
</li>
<?php
foreach ($seiten as $seite) {
if ($seite == $pageIndex) {
$ausgabe .= '<li class="active">' . $seite . '</li>';
} else {
$ausgabe .='<li>' . $seite . '</li>';
}
}
?><li class="next" style="
<?php
/*$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
$numPictures = $row[0];
}*/
$numPicturesPerPage = 20;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($pageIndex == $numPages ) { echo "display:none"; }
?>" >
<a href="galerie.php?pageindex=' . $next . '" aria-label="Next">
<span aria-hidden="true"></span>
</a>
</li>
<?php
//echo $numPages;
echo $numPictures;
$ausgabe .= '</ul>';
return $ausgabe;
}
?>
<div class="col-lg-12 no-gutter-12 pagging">
<?php echo navSeiten($pageIndex,$numPages) ?> <!-- Dies ist der Funktionsaufruf der Funktion die die komplette Leiste der Seitenaufrufe-->
</div>
</div>
</div>
Here is the CSS Code:
.picture {
clear:both;
}
.pic {
//float: left;
width:50%;
display:block;
}
figure {
display: table-cell;
text-align: center;
}
Sorry that it's now a mix of all solutions I found on the internet. I didn't changed it already.
I hope you can help me.
With kindly greetings Lukas Stetter
i developed a deal and coupon site and my data source is JSON. and my json file is big around 4MB. i want to show first 30 data and after scroll load next 30. so please tell me how can i do this work using JSON.
here is my code:
<?php $json = file_get_contents('offers.json');
$json_decode = json_decode($json,true);
foreach($json_decode as $data){
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category'];?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl'];?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><?php echo $data['title'] . " : " . $data['description'];?></div>
<div class="ad-url">Goto Offer</div>
</div>
<?php }
?>
your Json array is unknow but:
Main page:
<div id="loadbox">
<?php
$json = file_get_contents('offers.json');
$json_decode = json_decode($json, true);
for ($i = 0; $i < 29; $i++):
$data = $json_decode[$i];
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category']; ?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl']; ?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><?php echo $data['title'] . " : " . $data['description']; ?></div>
<div class="ad-url">Goto Offer</div>
</div>
<?php
endfor;
?>
</div>
<script type="text/javascript">
var last = 30;
function getData(lst) {
$.get("loader.php", {'last': lst}, function (data) {
$("#loadbox").append(data);
last += 30 ;
});
}
$(function () {
$(window).scroll(function () {
buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
if ($("html").prop('scrollHeight') - $("html").scrollTop() <= $("html").height() + buffer) {
getDate(last);
}
});
});
</script>
in the main page you load first 30 records and active ajax on scroll end.
when one loader for ajax request:
<?php
$json = file_get_contents('offers.json');
$json_decode = json_decode($json, true);
$start = (int) $_GET['last'] ;
for ($i = $start ; $i < ($start+30) ; $i++):
$data = $json_decode[$i];
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category']; ?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl']; ?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><?php echo $data['title'] . " : " . $data['description']; ?></div>
<div class="ad-url">Goto Offer</div>
</div>
<?php
endfor;
?>
I'm making a site with conrete5. It's the first one I might add. I have made myself a couple of custom blocks. Named News, Teammates and References.
Now News and Teammates are not editable anymore. I will paste the News -blocks sourcecode.
----------- FORM.php ---------------------
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php
$al = Loader::helper('concrete/asset_library');
echo $al->file('optional', 'fID', t('Valitse kuva'), $bf, $args);
?>
<div class="form-group">
<?php echo $form->label('otsikko', t('Otsikko'));?>
<?php echo $form->text('otsikko', $otsikko);?>
</div>
<div class="form-group">
<?php echo $form->label('teksti', t('Teksti'));?>
<?php echo $form->text('teksti', $teksti); ?>
</div>
<div class="form-group">
<?php echo $form->label('korkeus', t('Korkeus'));?>
<?php echo $form->select('korkeus', array("108px"=>t("Pieni"),"299px"=>t("Iso")), $korkeus); ?>
</div>
<div class="form-group">
<?php echo $form->label('koko', t('Leveys'));?>
<?php echo $form->select('koko', array("col-md-3"=>t("Pieni"),"col-md-6"=>t("Iso")), $koko); ?>
</div>
<div class="form-group">
<?php echo $form->label('link', t('Linkki'));?>
<?php echo $form->text('link', $link); ?>
</div>
<div class="form-group">
<?php $psh = Loader::helper('form/page_selector');
echo $psh->selectPage('targetCID', $targetCID); ?>
</div>
----------- view.php ---------------------
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$c = Page::getCurrentPage();
if($size=="col-md-3"){
$class='col-md-3';
$tag = $class;
}else{
$class="col-md-6";
$tag= $class;
}
if ($c->isEditMode()){
$class="editmode";
$editingStyle="padding: 15px; background: #ccc; color: #444; border: 1px solid #999;";
}
else {
$editingStyle = "";
}
$random = rand();
if($korkeus == "299px"){
$padding = '4px';
}else {
$padding = '5px';
}
$p = Page::getByID($targetCID);
$a = new GlobalArea('Header Navigation');
$blocks = $a->getAreaBlocksArray($c);
foreach ($blocks as $block){
if ($block->getBlockTypeHandle()=="autonav"){
$block->setCustomTemplate('cdrop.php'); // it's templates/cdrop.php -check the select option values when you set custom template manually at edit mode. I think you will need just "my_template"
$bv = new BlockView($block);
$bv->render('view');
}
}
?>
<?php $p = Page::getByID($targetCID); ?>
<a href="index.php">
<div class="pull-left <?= $koko;?>" style="padding:<?= $padding ?>;<?php echo $editingStyle;?>">
<div class="col-lg-12 alapalkki box" style="z-index:2;position:relative;">
<div class="image-big" style="background-color:transparent;text-align:center;position:relative;z-index:1;">
<!-- FiGuRe this shit out......... !-->
<?php
if($fID != 0){
$file = File::getByID($fID);
$filePath = $file->getVersion()->getRelativePath();
}
?>
<?php echo '<img src="' . $filePath . '" style="max-height:' . $korkeus . ';width:100%;"/>'; ?>
</div>
<div class="col-lg-12 " style="position:relative;z-index:255;padding:2px 0 0 15px;">
<div class="htitle">
<h4 style="color:white;"><b><?php echo $otsikko; ?></b></h4>
<p style="color:white;"><?php echo $teksti; ?></p>
</div>
</div>
</div>
</div>
</a>
Why is this not being an editable block? Why doesn't the concrete5 even recognize its existence when it is on the page? It just says at the area that it's empty.
$p = Page::getByID($targetCID);
$a = new GlobalArea('Header Navigation');
$blocks = $a->getAreaBlocksArray($c);
foreach ($blocks as $block){
if ($block->getBlockTypeHandle()=="autonav"){
$block->setCustomTemplate('cdrop.php'); // it's templates/cdrop.php -check the select option values when you set custom template manually at edit mode. I think you will need just "my_template"
$bv = new BlockView($block);
$bv->render('view');
}
}
?>
There's the problem. No idea what so ever what that is doing there..... Removed it. Worked like a charm.
-Kevin