In this example, what I am trying to do is explain one of the ways (surely there are many other very valid ones) to radically change the "grid" format of the "LIST" type pages.
In some of the forum requests and others that have come directly to me, they wondered how to change the format so that there were columns for records. Specifically, if you are making an "ecommerce" application, 3 or 4 articles are usually presented online, to take advantage of all the space on the page and display more articles.
Going forward, PHPRunner should evolve to enhance the customization of these LIST pages.
As I am not an expert HTML page builder, I have used the information on this website to customize the page. Bootstrap 3 Tutorial (w3schools.com)
Objective
It is desired to have a "LIST" page that shows 4 columns / cards online, to be used in an "ecommerce" application example. That looks like: Electrónica | Amazon.es
DEMO: https://fhumanes.com/panels
Technical Solution
In the aforementioned website, I saw this information: How To Create Column Cards (w3schools.com) and I thought, this is what I need, so I studied how to use it in PHPRunner, keeping as much as possible, the functionality of PHPRunner in the searches and filters, and it was pretty straightforward.
I expanded the row of the record counter with a new row and included a SNIPPET field which is the one that will produce the new format of the "LIST" page.
In the GRID of PHPRunner, I did not leave with nothing so that it would not produce any output.
I had to inform the "snippet" code of the selection conditions and the page it was on and I did this using the "list page. Before SQL query ", with this code:
$_SESSION['SQL']= $strSQL;
if (isset($_REQUEST['goto'])) {
$_SESSION['GOTO'] = $_REQUEST['goto'];
} else {
$_SESSION['GOTO'] = 1;
}
The basic configuration data is loaded in the "After application initialized" event, with this code:
$_SESSION['NUM_RECORD'] = 8;
$_SESSION['PREF_LINK'] = "http://localhost/panels/files/";
The code for the snippet named LIST is:
$num_record = $_SESSION['NUM_RECORD'];
$pref_link = $_SESSION['PREF_LINK'];
$sql = $_SESSION['SQL'];
$goto = $_SESSION['GOTO'];
$linit_initial = ($num_record * ($goto - 1));
$limit_final = $num_record;
$sql .= " LIMIT $linit_initial,$limit_final ";
$count_record = 0;
$rs = DB::Query($sql);
while( $data = $rs->fetchAssoc() )
{
if (($count_record % 4) == 0) {
$data_record.= '<div class="row">'."\n";
}
$headboard = $data['headboard'];
$description = $data['description'];
global $dirname;
$link = $dirname."/article_view.php?editid1=".$data['article_id'];
// get information about uploaded files
$fileArray = my_json_decode($data["images"]);
$images = '';
if (count($fileArray) <> 0) { // There are images
$thumbnail = $fileArray[0]['thumbnail'];
$parts = explode("/", $thumbnail);
$thumbnail = $pref_link.$parts[(count($parts)-1)];
$images = '<img src="'.$thumbnail.'" class="img-thumbnail" alt="image" width="150" height="150">';
}
$data_record .= <<<EOT
<div class="column">
<div class="card">
<a href="$link"><h5>$headboard</h5></a>
$images <p>$description</p>
</div>
</div>
EOT;
$count_record = $count_record +1;
if (($count_record % 4) == 0) {
$data_record.= "</div>\n\n";
}
}
$snippet = <<<EOT
<style>
* {
box-sizing: border-box;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
margin-bottom: 20px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
min-height: 500px;
text-align: left;
}
</style>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.
<!-- $sql --> </p>
$data_record
EOT;
echo $snippet;
All this is very basic, but I hope it has given you ideas and possibilities to present other types of formats for "List" type pages.
For any questions or queries, please let me know in my email [email="fernandohumanes@gmail.com"]fernandohumanes@gmail.com[/email]
I leave the project on my portal, so you can reproduce it on your computers.
I also leave you the table I use and the directory "files" where the images are. In the table "articles" in the field "images" is the information of the location of the images that you will have to modify the PATH of the files to adjust them to your locations.
fhumanes author