form{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-around;
}
form .buttons{
width: 100%;
border: none;
background-color: #ffffff00;
cursor: pointer;
}
form .buttons img{
width: 100%;
}
form button{
width: 100%;
border: none;
color: #fff;
background-color: #000000;
}
I'm a rookie in bootstrap for starter. The thing is I have ten buttons which contain image, but depending on an if statement, not all the button will be displayed. My problem is to display the remaining button 3 per row responsively using bootstrap or css.
I have used tables, flexbox, grid but it still can't do it.
echo "</head>";
echo"<body>";
echo "<script src=\"../js/jquery.js\"></script>";
echo "<form action='../include/newHealthScore.php' method='post'>";
echo "<input type='text' name='input1' id='input1' value='' hidden='true'>
<input type='text' name='input2' id='input2' value='' hidden='true'>
<input type='text' name='input3' id='input3' value='' hidden='true'>";
echo "<div class = 'container'>";
echo "<div class = 'col-md-12'>";
echo "<div class=\"jumbotron jumbotron-fluid\">
<div class=\"container\" align=\"center\">
<h1 class=\"display-4\">Choose a maximum of 3 options</h1>
<p class=\"lead\" align=\"justify\">Depending on your health score calculated, some option will be available for you to choose. Each option will give you points so as to increase your overall health score. Point for blood pressure is displayed in pink. Point for LDL is displayed in yellow. Point for HDL is displayed in blue. Point for HbA1c is displayed in orange. Point for waist is displayed in green. Finally point for whether you smoke or not is displayed in brown.</p>
</div>
</div>";
echo "</div>";
echo "</div>";
echo "<div class = 'container'>";
echo "<div class='d-inline-flex'>";
if( $bPressure < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity1' type='button'><img src='../img/salt.png'></button><br/>";
}
if($bPressure < 10 || $ldl < 10 || $hdl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity2' type='button' ><img src='../img/balancemeal.png'></button><br/>";
echo "</div>";
}
if ($bPressure < 10 || $ldl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity3' type='button'><img src='../img/rawveg.png'></button><br/>";
echo "</div>";
}
if($hdl < 10 || $ldl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity4' type='button'><img src='../img/fat.png'></button><br/>";
echo "</div>";
}
if($ldl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity5' type='button'><img src='../img/sugar.png'></button><br/>";
echo "</div>";
}
if($bPressure < 10 || $hdl < 10 || $hba1c < 10 || $waist < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity6' type='button'><img src='../img/alcohol.png'></button><br/>";
echo "</div>";
}
if($bPressure < 10 || $ldl < 10 || $hdl < 10 || $hba1c < 10 || $waist < 10 || $smoke < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity7' type='button'><img src='../img/30min.png'></button><br/>";
echo "</div>";
}
if($bPressure < 10 || $ldl < 10 || $hdl < 10 || $hba1c < 10 || $smoke < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity8' type='button'><img src='../img/walk303.png'></button><br/>";
echo "</div>";
}
if($smoke < 10)
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity9' type='button'><img src='../img/smoking.png'></button><br/>";
echo "</div>";
}
if($takePill = "y")
{
echo "<div class=\"p-2\">";
echo "<button class='buttons' value='activity10' type='button'><img src='../img/pills.png'></button>";
echo "</div>";
}
echo "<div class= 'd-flex justify-content-center'>";
echo "<input class = 'btn btn-primary rounded-pill btm-lg btn-huge' type='submit' name='Submit' value = 'Submit'/>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "<script src=\"https://code.jquery.com/jquery-3.4.1.slim.min.js\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js\" ></script>
<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\" ></script>
";
echo "</body>";
[enter image description here][1]
I found a way to do it. but now new problem arises. They are glued together and now i can't put a space between them. Also they do not fill up the container.
Bellow is the new code
<!-- begin snippet: js hide: false console: true babel: false -->
Simply by using grid system of Bootstrap. You can have div with container and if you want to have a full-width container the div has to have a container-fluid class then for each line of buttons you need make a div with a class of row and put your button -in this case three buttons- in every row inside divs with col classes and give a css class called btn-block to every button like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<title>Having three buttons per row in Bootstrap 4.4.1</title>
</head>
<body>
<div class="container-fluid">
<div class="row m-2">
<div class="col">
<button type="button" class="btn btn-primary m-1 btn-block">btn 1</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary m-1 btn-block">btn 2</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary m-1 btn-block">btn 3</button>
</div>
</div>
<div class="row m-2">
<div class="col">
<button type="button" class="btn btn-secondary m-1 btn-block">btn 1</button>
</div>
<div class="col">
<button type="button" class="btn btn-secondary m-1 btn-block">btn 2</button>
</div>
<div class="col">
<button type="button" class="btn btn-secondary m-1 btn-block">btn 3</button>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
And in case you need a btn-group you can use them instead of normal btn and you can read more about it from related Bootstrap documentation for btn-group.
Related
I made a program that lets 6 grades be entered into a form, and then calculates the letter grade and the average. The only problem I'm having is that I can't figure out how to get the form to accept decimals. I tried changing my filter_input statement to sanitize floats, but that doesn't seem to fix the problem. Any thoughts would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grades</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script>
window.onload = () => {
document.getElementById('quiz1').focus();
document.getElementById('quiz1').select();
}
</script>
<style>
input[type="text"] {width: 4em !important; text-align: right; margin-left: .5em; }
ul { list-style-type: none; padding-left: 0; }
</style>
</head>
<body>
<div class="container">
<div class="col-lg-6 mx-auto text-center">
<h1>Enter Quiz Grades</h1>
<form action="." method="post">
<?php
// declare an array to store bowling scores
$quizScores = array();
// declare a variable to be used for the natural counting of the number of games
$numberOfScores = 6;
// declare a variable to be used for array elements - subtract 1 since array elements start at 0
$gamesArrayElements = $numberOfScores - 1;
for ($i = 0; $i <= $gamesArrayElements; $i++){
$quizNumber = $i + 1;
// load values from POST into array elements
if (strlen($_POST['quiz' . $quizNumber]) > 0){
$quizScores[$i] = filter_input(INPUT_POST, 'quiz' . $quizNumber, FILTER_SANITIZE_NUMBER_FLOAT);
}
echo "<div class='form-group form-inline justify-content-center'>\n";
echo "<label for='quiz$quizNumber'>Quiz $quizNumber: </label>\n";
echo "<input type='text' class='form-control' name='quiz$quizNumber' id='quiz$quizNumber' value='$quizScores[$i]'>%\n";
echo "</div>\n";
}
?>
<div class="form-group">
<input type="submit" class="btn btn-secondary" value="Find Average of <?php echo $numberOfScores; ?> Highest Quiz Grades">
Clear
</div>
</form>
<?php
if (count($quizScores) === $numberOfScores){
$total = 0;
echo "<h2>Scores:</h2>\n";
echo "<ul>\n";
// for loop to print array elements and add each score to the total
for ($i = 0; $i <= $gamesArrayElements; $i++){
echo "<li>$quizScores[$i] " . getLetterGrade($quizScores[$i]) . "</li>\n";
$total += $quizScores[$i];
}
echo "</ul>\n";
$average = $total / $numberOfScores;
echo "<h2>Average Score:</h2>\n";
echo "<p>" . number_format($average, 1, .2) . " - " . getLetterGrade($average) . "</p>\n";
} else {
if(count($quizScores) > 0) {
echo "<h2 class='text-danger'>All textboxes should contain grades.</h2>\n";
}
}
?>
</div>
</div>
</body>
</html> ```
I changed number_format($average, 1, .2) to number_format($average, 1) and then I do get the average rounded to one decimal. I also removed the getLetterGrade() function because it is not defined in your code. Finally I change the form action to "", instead of ".", because it didn't work in my test environment.
Perhaps you need to switch on error reporting in PHP? That way you can see what's wrong with your code.
I have a project going on where we are able to create a product, which is loaded to the front page in PHP.
However, if there are 5 products, then it won't create a new line. What should happen if there are 5 products is 2 lines of 4 each should be displayed.
<section class="ICO">
<div class="one-fourth-gridtable">
<table class="grid table">
<?php
while ($subject = mysqli_fetch_assoc($subject_set)) {
$imagenavn = $subject['navn'];
$sql = "SELECT * FROM product_images WHERE image_name = '$imagenavn'";
$sth = $db->query($sql);
$result = mysqli_fetch_array($sth);
?>
<td>
<div style="border: 1px solid black; border-radius:2000px;">
<img src="data:image/jpeg;base64,<?= base64_encode($result['image']); ?>" />
</div>
<a class="action" href="<?= url_for('../show.php?id=' . h(u($subject['id']))); ?>"><?php echo h($subject['navn']); ?></a>
</td>
<?php } ?>
</table>
</div>
</section>
I tried to style the table with CSS:
table {
background-color: #6991ac;
width: 100%;
text-align: center;
display: inline-table;
margin-top: -5%;
}
.ICO {
max-width: 1100px;
margin: 0 auto;
}
.one-fourth-gridtable {
width: 100%;
}
With this code you get a new line after 4 images and after 8 images the loops stops because of the $u. You can delete/change the $u if not needed.
<?php require_once('private/initialize.php'); ?>
<?php $test = "Alle Produkter"; ?>
<?php $subject_set = find_all_subjects(); ?>
<?php $page_title = 'Forside'; ?>
<?php include(SHARED_PATH . '/staff_header.php'); ?>
<!--- Start of header --><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="design/Design.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" />
</head>
<!--- End of header -->
<!--- Start of section (BANNER) -->
<section class="banner">
<div class="banner-inner">
<div id="banner-image"><img src="img/cryptocurrency.png" style="margin-top:10% !important"></div>
</div>
</section>
<!--- End of section (BANNER) -->
<!--- Start of section (ICO'S) -->
<!--- End of section (ICO'S) -->
<div class="sactions">
<!-- <a class="saction" href="<?php echo url_for('/staff/subjects/new.php'); ?>">Create New Subject</a> --> </div>
<section class="ICO">
<div class="one-fourth-gridtable">
<table class="gridtable">
<?php
$i = 0;
$u = 0;
while($subject = mysqli_fetch_assoc($subject_set)) {
$imagenavn = $subject['navn'];
$sql = "SELECT * FROM product_images WHERE image_name = '$imagenavn'";
$sth = $db->query($sql);
$result=mysqli_fetch_array($sth);
$i++;
$u ++;
?>
<td>
<?php
echo '<img src="data:image/jpeg;base64,'.base64_encode( $result['image'] ). '"/> '; ?>
<a class="action" href="<?php echo url_for('../show.php?id=' . h(u($subject['id']))); ?>"><?php echo h($subject['navn']);?></a>
<?php
if ($u > 7 ) {
break;
}
if ($i > 3) {
echo '</tr><tr>';
$i = 0;
}
?>
</td>
<?php } ?>
</table>
</div>
</section>
<?php
mysqli_free_result($subject_set);
?>
Tables automatically expand to contain all of the elements on a single row.
To get around this, you could simply make use of new table rows (<tr>), though I would recommend swapping to a <div> layout and floating the elements to the left:
<div class="contents">
// output the contents
</div>
.contents img {
float: left;
}
This will cause the elements to automatically move to the next line when occupying more than the available width, with no need to worry about how many elements should be displayed per row:
.contents img {
float: left;
margin: 5px;
}
<div class="contents">
<img src="http://placehold.it/200" />
<img src="http://placehold.it/200" />
<img src="http://placehold.it/200" />
<img src="http://placehold.it/200" />
</div>
Hope this helps! :)
First count the results to display, say $count.
<table class="grid table">
<tr>
<?php
$trer = 1;
$cycler = 0;
while($subject = mysqli_fetch_assoc($subject_set))
{
$cycler++;
$imagenavn = $subject['navn'];
$sql = "SELECT * FROM product_images WHERE image_name = '$imagenavn'";
$sth = $db->query($sql);
$result=mysqli_fetch_array($sth);
?>
<td>YOUR CONTENT</td>
<?php
if($trer == 4 && $cycler < $count) //if true you're at the last td of the line, but not on the last line, so let's put a new line
{
echo "</tr><tr>";
$trer = 0;
}
$trer++;
}
if($trer > 0 && $trer < 4) //if line is incomplete (less than 4 items but 1 or more
{
for(int t = 0; $t < 4 - $trer; $t++) //echo empty TDs till filling the line
echo "<td> </td>";
}
?>
</tr>
</table>
I have a .php file that generates a table based on a directory's content. But for some reason it also generates <br> tags before the table, the more contents inside the directory the more <br> tags.
Here's the code responsible of this:
<main class="mdl-layout__content" style="background-color: white; background-image: url('https://i.warosu.org/data/tg/img/0357/97/1414469732022.gif'); background-size: auto 100%; background-repeat: no-repeat; background-position: center;">
<center>
<div class="page-content" style="padding: 24px; align-items: center; justify-content: center;">
<?php
echo "<div>\n";
echo "<table class=\"mdl-data-table mdl-js-data-table mdl-shadow--2dp\" style=\"min-width:300px\"\n";
echo " <thead>\n";
echo " <tr>\n";
echo " <th class=\"mdl-data-table__cell--non-numeric\">File</th>\n";
echo " <th>Size</th>\n";
echo " </tr>\n";
echo " </thead>\n";
echo " <tbody>";
if ($path) echo '<tr><td colspan="2" style="text-align:center">..</td></tr><br />';
foreach (glob($root.$path.'/*') as $file) {
$file = realpath($file);
$link = substr($file, strlen($root) + 1);
if (is_dir($file)){
echo '<tr><td style="text-align:center; vertical-align:middle"><i class="material-icons" style="vertical-align:middle">folder</i></td><td style="text-align:center; vertical-align:middle"><span style="vertical-align:middle">'.basename($file).'</span></td></tr><br />';
}
else {
$lastpath = path2url($file);
$size = formatSizeUnits(filesize($file));
echo '<tr><td>'.basename($file).'</td><td>'.$size.'</td></tr><br />';
}
}
?>
</tbody>
</table>
</div>
</center>
<button class="show-modal mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="cornerbutton">
<i class="material-icons">add</i>
</button>
<dialog class="mdl-dialog">
<div class="mdl-dialog__content">
<form enctype="multipart/form-data" action="upload_file.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000000000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
</div>
<div class="mdl-dialog__actions mdl-dialog__actions--full-width">
<input type="submit" class="mdl-button" value="UPLOAD" ></button>
<button type="button" class="mdl-button close">ABORT MISSION!!</button>
</div>
</form>
</dialog>
</main>
Help
There are br tag added to end of some lines like
echo '<tr><td>'.basename($file).'</td><td>'.$size.'</td></tr>*<br />*';
Just remove those.
I am having two drop down lists on a html page. The data is coming from a mysql database and contains information like latitude, longitude and address. The user selects one item from the drop down and clicks on submit.
At this stage, I want to display a google map and put a marker at the latitude and longitude. Then, when the user selects the option from second drop down, I want to just add a marker on that map.
Currently, I am able to load the map once he clicks the submit from first drop down but all the options I tried to drop the pins are not working.
Here is the code I have achieved till now:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once('auth.php');
include ('LoginConfig.php');
include ('FetchAgentDetails.php');
include ('FetchDeliveryDetails.php');
?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Delivery Management System</title>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0Rm5aK0BYu1f_TzhjkG97cchHHlQfrQY&sensor=false">
</script>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<style type="text/css">
<!--
.style1 {
font-size: 20px;
font-weight: bold;
}
-->
</style>
<style type="text/css">
table.collection {width:250px;border:2px solid black;border-style: outset;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;padding:10px;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:10px;}
table.collection td a {text-decoration:none; display:table-row; padding:0px; height:100%;}
</style>
</head>
<body bgcolor="#8E8E38"
<div style="clear: right;">
<p align="left" class="style1">Welcome Delivery Manager! </p>
<img style="position: absolute; top: 0; right: 0;" src="./Images/logo.jpg" alt="Company Logo" width="90" height="60" align="middle"></img>
</div>
<p align="left">Home</p>
<hr></hr>
<!-- START Main Wrap -->
<form method="post">
<fieldset>
<div style="clear: left;float:left;">
<label for="deliveryList">Delivery Items:</label>
<select name="deliveryList" id="deliveryList">
<option value="Select delivery item" selected="selected">Select delivery item</option>
<?php
$deliveryHandler = new FetchDeliveryDetails();
$itemNameArray = $deliveryHandler->getItemNames();
foreach ($itemNameArray as $innerArray) {
if (is_array($innerArray)) {
$value = $innerArray['itemName'];
echo "<option value=\"$value\"";
if (isset($_POST['deliveryList']) && $_POST['deliveryList'] == $value)
echo 'selected';
echo ">" . $value . "</option>\n";
}
}
?>
</select>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
<div style="clear: right;float:right;">
<label for="agentList">Avaliable Agent:</label>
<select name="agentList" id="agentList">
<option value="" selected="selected">Select agent to assign</option>
<?php
$agentHandler = new FetchAgentDetails();
$agentNameArray = $agentHandler->getAgentNames();
foreach ($agentNameArray as $innerArray) {
if (is_array($innerArray)) {
$agentId = $innerArray['agentId'];
$firstNameValue = $innerArray['firstname'];
$lastNameValue = $innerArray['lastname'];
$fullName = $firstNameValue . ' ' . $lastNameValue;
echo "<option value=\"$agentId\">$fullName</option>\n";
}
}
?>
</select>
<input type="submit" name="agentSubmit" id="agentSubmit" value="Check Location"/>
</div>
</fieldset>
</form>
<?php
if (isset($_POST['deliveryList'])) {
$selectedItemName = $_POST['deliveryList'];
$deliveryHander = new FetchDeliveryDetails();
$itemDetailsArray = $deliveryHander->getAllDeliveryDetails($selectedItemName);
foreach ($itemDetailsArray as $valuesArray) {
$itemNameValue = $valuesArray['itemName'];
$itemDescriptionValue = $valuesArray['itemDescription'];
$ownerFirstname = $valuesArray['firstName'];
$ownerLastname = $valuesArray['lastName'];
$dateAdded = $valuesArray['dateAdded'];
$deliveryDate = $valuesArray['deliveryDate'];
$deliveryAddress = $valuesArray['deliveryAddress'];
$deliveryLatitude = $valuesArray['deliveryLatitude'];
$deliveryLongitude = $valuesArray['deliveryLongitude'];
$assignedAgent = $valuesArray['assignedAgentId'];
if ($assignedAgent == 0) {
$assignedAgent = "-";
}
echo "<table border=\"1\" align=\"left\" class =\"collection\">\n";
echo "<tr>\n";
echo "<td >Item Name:<b>$itemNameValue</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Item Description: <b>$itemDescriptionValue</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Owner Name: <b>$ownerFirstname $ownerLastname</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Date Added: <b>$dateAdded</td>\n";
echo "</tr>\n";
echo "<tr>";
echo "<td>Delivery Date: <b>$deliveryDate</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Delivery Address: <b>$deliveryAddress</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Assigned Agent: <b>$assignedAgent</td>";
echo "</tr>";
echo "</table>";
echo "<div id=\"googleMap\" style=\"width:500px;height:380px;\"></div>";
}
}
if (isset($_POST['agentList'])) {
}
?>
</body>
</html>
I almost forgot, this is my first PHP application, in fact my first web application. So please go easy on me. Point out other errors also, but please stick to the question.
Ok got it working by using iframe :) and a bit of php
Reference:
http://www.youtube.com/watch?v=HTm-3Cduafw
echo "<iframe style =\"display: block;
width: 800px;
padding-top: 2px;
height: 400px;
margin: 0 auto;
border: 0;\" width=\"425\" height=\"350\" align=\"center\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"
src=\"https://maps.google.com/maps?f=d&source=s_d&saddr=$agent_map_url&
daddr=$map_url&hl=en&z=10&t=m&mra=ls&ie=UTF8&output=embed\"></iframe><br/>";
I have tried a few things but cant seem to implement pagination properly, can someone point me in the right direction and give me a few code examples of how i can properly implement pagination in my code
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="/lightbox/css/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" href="img/reveal.css">
<script src="/lightbox/js/jquery-1.7.2.min.js"></script>
<script src="/lightbox/js/lightbox.js"></script>
<script src="img/jquery.min.js" type="text/javascript"></script>
<script src="img/jquery.reveal.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#divspace {
position: relative;
width: 100%;
height: 50px;
z-index: -9999;
vertical-align bottom;
}
#divspace1 {
position: relative;
width: 100%;
height: 50px;
z-index: -9999;
vertical-align: bottom;
padding-left: 400px;
}
#search1 {
position: absolute;
width: 203px;
height: 30px;
z-index: -9999;
vertical-align: bottom;
left: 832px;
top: 1px;
z-index: 9999;
}
#text1 {
position: absolute;
width: 203px;
height: 30px;
z-index: -9999;
vertical-align: bottom;
top: 13px;
z-index: 9999;
left: 268px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
color: #FFF;
font-style: italic;
font-size: 22px;
}
#apDiv1 {
position:absolute;
width:560px;
height:27px;
z-index:1;
left: 93px;
top: 247px;
}
#cat {
position:absolute;
width:227px;
height:500px;
z-index:1;
left: 3px;
top: 48px;
background-color: #FFF;
font-family:"Lucida Console", Monaco, monospace;
}
.container1 {
position:relative;
padding: 0 20px 0 20px;
margin: auto;
width: 1000px;
background-image: url(images/skyblue.png);
margin-top: 20px;
margin-bottom: 20px;
padding-bottom: 300px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.label{
text-align:right;
}
#submit{
text-align:center;
}
</style>
<script type = "text/javascript">
function myfunction(url)
{
window.location.href = url;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".expanderHead").click(function(){
var $exsign = $("#expanderSign");
$(this).find("#expanderContent").slideToggle();
$exsign.html($exsign.text() == '+' ? '-': '+');
// simplify your if/else into one line using ternary operator
// if $exsign.text() == "+" then use "-" else "+"
});
});
</script>
</head>
<body>
<div id="header">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=439699742746900";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="search">
<center>
<form method="GET" action="search.php" style= "padding: 1px;">
<input name="search" id="s" type="text" value="<?php echo $_GET['search']; ?>" size="20" />
<select name="category" id="category" >
<?php if(isset($_GET['submit'])) { ?>
<option value="<?php echo $_GET['category']; ?>" selected="selected"><?php echo $_GET['category']; ?></option>
<?php }else{ ?>
<option value=""> -- select -- </option>
<?php } ?>
<option value="">All</option>
<option value="Books">Books</option>
<option value="Textbooks">TextBooks</option>
<option value="Tickets">Tickets</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
<option value="Accessories">Accessories</option>
<option value="Furniture">Furniture</option>
<option value="Imagery">Imagery</option>
<option value="Business">Business</option>
<option value="Clothing">Clothing</option>
<option value="Multi">Multimedia</option>
</select>
<select name="university" id="university" >
<option value="">Aston University</option>
</select>
<input id="searchSubmit" type="submit" value="" name="submit"/>
</form>
</center>
</div>
<div id="imagelogo" onclick = "window.location.href = 'index.php'" >
<p> Buy and sell stuff around University</p>
</div>
<ul id="navigation" name="navigation">
<li id="nav-home">Home | Search | Selling | Buying | FAQ | Contact </li>
</ul>
<div id="account">
<?php
if( isset( $_SESSION['username'] ) ){
echo "<a href='securedpage1.php'>My Account</a><img src='images/uni-icon.png' width='30' height='18' style='vertical-align: middle;'/>";
}else{
echo "<a href='login.php' >Login</a><img src='images/uni-icon.png' width='30' height='18' style='vertical-align: middle;'/>";
}
?>
</div>
<div id="registerlogout">
<?php
if( isset( $_SESSION['username'] ) ){
echo "<a href='logout.php'>Logout</a>";
}else{
echo "<a href='register.php'> Register</a>";
}
?>
</div>
<center>
<center>
</div>
<div class="container1">
<div id="cat">
<table width="225" border="1" cellspacing="10" cellpadding="10">
<tr>
<td>Accessories</td>
</tr>
<tr>
<td>Accommodation</td>
</tr>
<tr>
<td>Books</td>
</tr>
<tr>
<td>Business</td>
</tr>
<tr>
<td>Clothing</td>
</tr>
<tr>
<td>Electronics</td>
</tr>
<tr>
<td>Furniture</td>
</tr>
<tr>
<td>Imagery</td>
</tr>
<tr>
<td>Multimedia</td>
</tr>
<tr>
<td>Services</td>
</tr>
<tr>
<td>Tickets</td>
</tr>
</table>
</div>
<div id="text1">Items For Sale:
</div>
<div id="search1">
<form method="GET" action="search.php" style= "padding: 1px;">
<select name="price" id="price" >
<?php if(isset($_GET['submit'])) { ?>
<option value="<?php echo $_GET['price']; ?>" selected="selected"><?php echo $_GET['price']; ?></option>
<?php }else{ ?>
<option value=""> -- select -- </option>
<?php } ?>
<option value=""></option>
<option value="DESC">Highest to Lowest</option>
<option value="ASC">Lowest to Highest</option>
</select>
<input id="searchSubmit" type="submit" value="" name="submit"/>
</form>
</div>
<div id="divspace"></div>
<div style=" padding-left: 240px" ">
<?php
// Include database connection settings
include('config.php');
include('config.inc');
// Check and set username
$username = (isset($_SESSION['username']) ? $_SESSION['username'] : 'guest');
// Check and set category
$category = (!empty($_GET['category']) ? $_GET['category'] : null);
// Check and set search
if(!empty($_GET['search'])){
$search = $_GET['search'];
}else{
$search = null;
}
// Check that $_GET['price'] is ASC if not set to DESC
// as static values its ok to directly put in the query
if(isset($_GET['price']) && $_GET['price'] == 'ASC'){
$price = 'ASC';
}else{
$price = 'DESC';
}
if ($search !== null){
$sql = "SELECT * FROM people WHERE MATCH (lname,fname) AGAINST (:search IN BOOLEAN MODE)";
$q = $conn->prepare($sql) or die("failed!");
// Bind the params to the placeholders
$q->bindParam(':search', $search, PDO::PARAM_STR);
$q->execute();
}
if ($search !== null && $category !== null){
$sql = "SELECT * FROM people WHERE MATCH (lname,fname) AGAINST (:search IN BOOLEAN MODE) AND category = :category";
$q = $conn->prepare($sql) or die("failed!");
// Bind the params to the placeholders
$q->bindParam(':search', $search, PDO::PARAM_STR);
$q->bindParam(':category', $category, PDO::PARAM_STR);
$q->execute();
}
if ($category !== null && $search !== null && isset($price)){
$sql = "SELECT *
FROM people
WHERE MATCH (lname,fname) AGAINST (:search IN BOOLEAN MODE)
AND category = :category
ORDER BY price ".$price;
$q = $conn->prepare($sql);
// Bind the params to the placeholders
$q->bindParam(':search', $search, PDO::PARAM_STR);
$q->bindParam(':category', $category, PDO::PARAM_STR);
$q->execute();
}
if ($category == null && $search !== null && isset($price)){
$sql = "SELECT *
FROM people
WHERE MATCH (lname,fname) AGAINST (:search IN BOOLEAN MODE)
ORDER BY price ".$price;
$q = $conn->prepare($sql);
// Bind the params to the placeholders
$q->bindParam(':search', $search, PDO::PARAM_STR);
$q->execute();
}
if ($q){
//declaring counter
$count=0;
while($r = $q->fetch(PDO::FETCH_ASSOC)){
$row = $r;
$fname = $row['fname'];
$lname = $row['lname'];
$firstname = $row['firstname'];
$surname = $row['surname'];
$expire = $row['expire'];
$oDate = strtotime($row['expire']);
$sDate = date("d/m/y",$oDate);
//counter equals
$count++;
//insert an image every 5 rows
if($count==5){
$count=0;
echo "<table width='50%' style='border-bottom:1px solid #000000;'>";
echo "<tr>";
echo "<td>";
echo "<div id='page-wrap'>";
echo "<div class='discounted-item freeshipping'>";
echo "<a href='images/box1.png' rel='lightbox'><img src='images/box1.png' width='160px' height='200px' /></a>";
echo "<div class='reasonbar'><div class='prod-title' style='width: 70%;'>AN AD CAN GO HERE</div><div class='reason' style='width: 29%;'><b>Ad Company</b></div></div>";
echo "<div class='reasonbar'><div class='prod-title1' style='width: 70%;'>Description about the advert from a company</div><div class='reason1' style='width: 29%;'>Category: Advert</div></div>";
echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'>HELLO, User</div><div class='reason2' style='width: 29%;'></div></div>";
echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</table>";
}
echo "<table width='50%' style='border-bottom:1px solid #FFFFFF'>";
echo "<tr>";
echo "<td>";
echo "<div id='page-wrap'>";
echo "<div class='discounted-item freeshipping'>";
echo "<a href='./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "' rel='lightbox'><img src=\"./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "\" alt=\"\" width='80px' height='100px' /></a>";
echo "<div class='expanderHead'>";
echo "<div class='reasonbar'><div class='prod-title'>" .$row['fname'] . "</div><div class='reason' style='width: 29%;'><b>". $row['firstname'] . " " . $row['surname'] ."</b></div></div>";
echo "<div id='expanderContent' style='display:none'><div class='reasonbar'><div class='prod-title1'>" . $row['lname'] . "</div><div class='reason1' style='width: 29%;'>Category:<br /> ". $row['category'] . "</div></div>";
echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'><form action='adclick.php' method='post'><input type='hidden' name='username' value='" . $row['username'] . "'/><input type='submit' name='submit' value='Reply To this ad'></form></div><div class='reason2' style='width: 29%;'></div></div></div>";
echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'>Expires: $sDate</div><div class='reason2' style='width: 29%;'>Price: £". $row['price'] . "</div></div>";
echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</div>";
echo "</table>";
}
}
else
echo "No results found for \"<b>$search</b>\"";
//disconnect
mysql_close();
?>
</div>
</div>
<div class="footer">
<p> Private Policy | Terms and Conditions | FAQ </p>
</div>
</body>
</html>
Sample Code:
$start is the starting number,$limit is the ending number (for one page).. $count is total number of records
echo "<h5>Showing ".$start." to ".($start+$limit)." Records of ".$count." Records</h5>";
if($start<=($count-$limit))
{
echo '<a style="float:right" href="'.$_SERVER['PHP_SELF'].'?start='.($start+$limit).'&limit='.$limit"><t1>Next</t1></a>';
}
$prev = $start-$limit;
if ($prev >= 0)
{
echo '<a style="float:left" href="'.$_SERVER['PHP_SELF'].'?start='.$prev.'&limit='.$limit"><t2>Previous</t2></a>';
}
$i=0;
$l=1;
echo "<p align='center'>";
for($i=0;$i < $count;$i=$i+$limit)
{
if($i <> $start)
{
echo "<a href='listing_test.php?start=$i&limit=$limit'><font face='Verdana' size='2'><b> $l </b></font></a> ";
}
else
{
echo "<font face='Verdana' size='4' color=#2E9AFE ><b> $l </b></font>";
}
$l=$l+1;
}
echo "</p>";
EDIT:
$result = mysql_query("SELECT * FROM table_name LIMIT ".$start.",".$limit);
$total=mysql_query("SELECT * FROM table_name");
$count=mysql_num_rows($total);