How can i be able to search and retrieve data from a mysql table fields. When the records are found then the user is notified the record was found.
I have created my html form with action and php script to fetch data from the database.
When i click on search it only displays no records found.
I want to fetch data from 3 fields in the table.
my html form below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conduct Database Search</title>
<style type="text/css">
body,
td,
th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<p><img src="images/logonew.png" width="150" height="73" alt="Find Real Me Logo" /> </p>
<hr>
<p>Welcome to the conduct database search page. You can verify domestic worker's conduct and history.
</p>
<p>Search database by entering First name, Middle name and ID No. below and click the Search Conduct Database.
</p>
<form id="form1" action="search15.php" name="form1" method="post">
<p>
<label for="First_name">First name:</label>
<input name="First_name" type="text" required="required" id="First_name" title="First name" size="30" maxlength="30">
</p>
<p>
<label for="Last_name">Last name:</label>
<input name="Last_name" type="text" required="required" id="Last_name" title="last_name" size="30" maxlength="30">
</p>
<p>
<label for="ID_NO">ID Number:</label>
<input name="ID_NO" type="number" required="required" id="ID_NO" title="ID_NO">
</p>
<p>
<input name="submit" type="submit" id="submit" formaction="search15.php" formmethod="POST" value="Search Conduct Database">
</p>
<p> </p>
</form>
<hr>
<p>Copyright All Rights Reserved </p>
</body>
</html>
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Conduct Database Search Results</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!-- body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #006600;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul,
ol,
dl {
/* Due to variations between browsers, it's best practices to zero padding and margin
on lists. For consistency, you can either specify the amounts you want here, or on the list items
(LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you
write a more specific selector. */
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
/* removing the top margin gets around an issue where margins can escape from their
containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px;
/* adding the padding to the sides of the elements within the divs, instead of
the divs themselves, gets rid of any box model math. A nested div with side padding can also be
used as an alternate method. */
}
a img {
/* this selector removes the default blue border displayed in some browsers around an image
when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors
that
create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline;
/* unless you style your links to look extremely unique, it's best to
provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover,
a:active,
a:focus {
/* this group of selectors will give a keyboard navigator the same
hover
experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an
image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFFFFF;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have
padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side
padding or border to the div itself, it will be added to the width you define to create the *total*
width. You may also choose to remove the padding on the element in the div and place a second div
within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #333333;
color: #CCC;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must
precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your page. The floated element must
precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat {
/* this class can be placed on a <br /> or empty div as the final element following
the last floated div (within the #container) if the #footer is removed or taken out of the
#container */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<div align="left">
<img src="logo.png" width="180" height="88"></div>
<!-- end .header -->
</div>
<div class="content">
<div align="right"></div>
<div align="right">
<p>Home | Services | Contact | Search Again</p>
<hr>
<p> </p>
</div>
<h1>Results</h1>
<?php
//load database connection
$host = "localhost";
$user = "mydata";
$password = "mydata";
$database_name = "mydata";
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
// Search from MySQL database table
$search=$_POST['submit'];
$query = $pdo->prepare("select * from red_data1 where ID_NO LIKE '%$search%' OR First_name LIKE
'%$search%' OR Middle_name LIKE '%$search%' OR Last_name LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Your Reference Search <b>found</b> the following in our database:<br/> <br/>";
echo "<a href='http://localhost/frm_test2/contact' target='_blank'>Click here </a> to
contact us for more information relating to your search.<br/> <br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-
color:#98bf21;background:#98bf21;\">ID No.</td><td style=\"border-style:solid;border-
width:1px;border-color:#98bf21;background:#98bf21;\">First Name</td><td style=\"border-
style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Middle Name</td><td
style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Last
Name</td>
</tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['ID_NO'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['First_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Middle_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Last_name'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'No Records found ';
}
?>
<p> </p>
<!-- end .content -->
</div>
<div class="footer">
<p align="center">Copyright </p>
<!-- end .footer -->
</div>
<!-- end .container -->
</div>
</body>
</html>
$search = $_POST['search'];
$sql = "SELECT * FROM TABLE_NAME WHERE CONCAT('database column names') LIKE '%".$search."%' ";
Related
I've got a "lost property website" which shows items from a database. The form for the website is formatted correctly, but when it is clicked on the button becomes extremely large.
body {
/* apply styling to everything in body */
margin: 0;
/* use all of the page */
font-family: Helvetica, Arial, sans-serif;
/* set primary font to Helvetica, secondary to Arial, and if none are availible use a san-serif font */
background-color: #fff;
/* set background colour to white */
font-size: 18px;
/* set default font size is 18px */
}
.navigation {
/* navigation bar styling */
position: fixed;
/* attach bar to static position */
top: 0;
/* spread to full */
left: 0;
right: 0;
background-color: orange;
/* make navigation bar div orange */
z-index: 1/* place on top of all content */
}
.navigation a {
float: left;
/* move links to left */
color: #fff;
/* text colour white */
text-align: center;
/* align links centre of their boxes */
padding: 14px 16px;
/* add padding to boxes */
text-decoration: underline;
/* add underline to links for platform conventions */
position: relative;
/* move links one after the other */
}
.navigation a:hover {
/* when link is hovered over, make background lighter */
background-color: #ffc864;
}
.right a {
/* ability move links to the right side of navaigation bar div */
float: right;
}
.header {
/* title and image */
position: relative;
top: 5%;
/* add borders */
left: 5%;
right: 15%;
width: 70%;
/* define size */
padding-top: 50px;
}
.header img {
max-width: 225px;
/* max size of image */
float: left;
}
.header h1 {
padding-left: 30px;
padding-bottom: 30px;
}
.gallery {
/* image gallery div styling */
left: 5%;
width: 90%;
position: relative;
}
input {
/* input field styling */
border-radius: 5px;
border: none;
width: 100%;
font-size: 18px;
margin-bottom: 15px;
height: 30px;
}
.submit {
/* button styling */
padding-left: 0;
font-size: 18px;
height: 30px;
text-align: center;
position: relative;
}
.form {
/* form div styling */
position: relative;
width: 75%;
height: 100%;
left: 12.5%;
background-color: #d3d3d3;
padding: 25px;
margin-bottom: 50px;
}
* {
box-sizing: border-box;
}
input[type=text] {
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
padding-left: 12px;
}
input[type=file] {
border: none;
border-radius: 4px;
height: 100%;
}
input[type=submit] {
background-color: orange;
color: #fff;
padding: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
height: 100%;
}
input[type=submit]:hover {
background-color: #ffa07a;
}
/* code to make gallery images scale well for all screens */
#media screen and (max-width:600px) {
input[type=submit] {
width: 100%;
margin-top: 0;
}
}
div.image {
margin: 10px;
display: inline-block;
vertical-align: middle;
}
div.image img {
width: 100%;
height: auto;
border: 1px solid #ccc;
}
#media screen and (min-width:1224px) {
div.image {
width: 300px;
}
}
#media screen and (min-width:1044px) and (max-width:1224px) {
div.image {
width: 250px;
}
}
#media screen and (min-width:845px) and (max-width:1044px) {
div.image {
width: 200px;
}
}
.image a {
/* make image links follow platform conventions */
color: inherit;
text-decoration: underline;
}
/* full screen images */
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
a {
color: white;
text-decoration: none;
}
.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 5vh;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
<!-- Declaration tags for the browser to know what to read, and what language -->
<!DOCTYPE html>
<html lang="en">
<!-- Back end code -->
<head>
<title>Lost Property</title>
<!-- title for website -->
<link rel="stylesheet" type="text/css" href="assets/main.css">
<!-- link to css -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- define size -->
<?php
session_start();
include("config.php"); // include configuration to connect to database
$dbconnect = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME); // connect to database
// if can't connect display error
if (mysqli_connect_errno()) {
echo "Connection failed:" . mysqli_connect_error();
exit;
}
// define variables from database to use later in PHP code
$showall_sql = "SELECT * FROM `images` ORDER BY `images`.`ID` ASC";
$showall_query = mysqli_query($dbconnect, $showall_sql);
$showall_rs = mysqli_fetch_assoc($showall_query);
$count = mysqli_num_rows($showall_query);
?>
</head>
<!-- main page content -->
<body>
<!-- navigation bar -->
<div class="navigation">
<!-- links -->
Home
Search
Upload
<div class="right">About</div>
<!-- has float:right property for to move to side -->
</div>
<!-- header -->
<div class="header">
<img src="assets/logo.jpg" alt="Logo">
<!-- image of logo, alt tags for screen readers -->
<h1>Lost Property</h1>
</div>
<?php
$sql = "SELECT * FROM lost_property";
if (!empty($_POST)) {
$name = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['name']));
$item = mysqli_real_escape_string($dbconnect, htmlspecialchars($_POST['item']));
$sql = "SELECT * FROM lost_property WHERE name LIKE '%$name%' AND item LIKE '%$item%' ORDER BY name ASC";
}
$result = $dbconnect->query($sql);
?>
<body>
<div class="form">
<label>Search</label>
<form action="" method="POST">
<input type="text" placeholder="Type the name here" name="name">
<select name="item" class="dropdown">
<option value="" disabled selected>item:</option>
<?php
$item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
$item_query = mysqli_query($dbconnect, $item_sql);
$item_rs = mysqli_fetch_assoc($item_query);
do {
?>
<option value="<?php echo $item_rs['item']; ?>">
<?php echo $item_rs['item']; ?>
</option>
<?php
} while ($item_rs = mysqli_fetch_assoc($item_query));
?>
</select>
<input type="submit" value="Search" name="btn">
</div>
</form>
<div class="gallery">
<h2>Found property:</h2>
<?php
//check for results. If there are none display error
if ($count < 1) {
?>
<div class="error">
<h1>No results were found.</h1>
</div>
<?php
} //end if
else {
while ($search_rs = $result->fetch_assoc()) {
?>
<!-- display image and information from database and show in gallery -->
<div class="image">
<h3>
<?php echo $search_rs['name']; ?>
</h3>
<h3>
<?php echo $search_rs['item']; ?>
</h3>
<p>
<?php echo $search_rs['location']; ?>
</p>
</div>
<?php
} // end of do
} //end else
//if there are any display
?>
</div>
</body>
</html>
Obviously it's a bit hard to tell without the attached database, but why does the search button become really big?
Is it the PHP that is changing the size, or is it adjusting to fit something in?
You should use an Editor that shows you opened and closed tags. In your code are several mistakes that should result in several problems, this part here especially:
<body> <--- You open a second Body tag here! Only use one
<div class="form"> <--- start of your div
<label>Search</label>
<form action="" method="POST"> <--- start of your form INSIDE the div
<input type="text" placeholder="Type the name here" name="name">
<select name="item" class="dropdown">
<option value="" disabled selected>item:</option>
<?php
$item_sql = "SELECT * FROM `lost_property` ORDER BY item ASC ";
$item_query = mysqli_query($dbconnect, $item_sql);
$item_rs = mysqli_fetch_assoc($item_query);
do {
?>
<option value="<?php echo $item_rs['item']; ?>">
<?php echo $item_rs['item']; ?>
</option>
<?php
} while ($item_rs = mysqli_fetch_assoc($item_query));
?>
</select>
<input type="submit" value="Search" name="btn">
</div> <-- div closes before the form which is INSIDE the div
</form> <-- form closes after div, wrong way around!
So i highly recommend to practice a bit how to make code cleaner, so that you notice mistakes like this.
example:
<div class="main-container">
<div class="form-container">
<form>
<input type="text" placeholder="Testinput">
<input type="submit" value="search" id="submitbutton">
</form>
</div>
</div>
Basically: Avoid unecessary white-space, align opening and closing tags on the same level.
With that information you should be able to rearrange your code and fix the Button-Bug yourself.
I have a query from mysql, I am getting one row at the time randomly, I am teaching and I want the row to just show one field at the time. for example, I want my students to see the title of the book, I will ask them Who is the author and after they finish guessing I will click the button that says author or Theme and they will see the author name or the theme of the title. As of right now I am able to see all the fields with the information that they contain, but I haven't been able to hide the author and theme to just display them with the click of each of the button.
<form action="index3.php" method="get">
<?php while($row = mysqli_fetch_array($result2)): ;?>
Title of book : <?php echo $row[3];?>
<br/><br/>
<input type="button" value="Author" name="publish">
<?php echo $row[0];?>
<br/><br/>
<input type="button" value="Group"><?php echo $row[1];?>
<br/><br/>
<input type="button" value="Theme"> <?php echo $row[2];?>
<br/><br/>
<input type="submit" value="Next">
</form>
Some JavaScript is required to show hidden fields. A helpful tip here, use associative arrays on this, it's not readable when you use numeric arrays (I am guessing the names below):
jsFiddle of below: https://jsfiddle.net/4sg5wjm3/
<form action="index3.php" method="get">
<!-- use mysqli_fetch_assoc here instead of mysqli_fetch_array -->
<?php while($row = mysqli_fetch_assoc($result2)): ?>
<div class="book-group">
<h3>Title of book : <?php echo $row['book_title'] ?></h3>
<div class="hide pad-bottom author">
<?php echo $row['author'] ?>
</div>
<div class="hide pad-bottom group">
<?php echo $row['book_group'] ?>
</div>
<div class="hide pad-bottom theme">
<?php echo $row['book_theme'];?>
</div>
Reveal Author
Reveal Theme
Reveal Group
NEXT
</div>
<?php endwhile;?>
</form>
<!-- Need jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
// Document ready
$(function(){
// When user clicks reveal button
$(".reveal").on('click', function(e) {
// Stop normal action of <a> tag
e.preventDefault();
// Find the parent div, then find the appropriate child div based on
// what the data- attribute is of the clicked button
$(this).parents('.book-group').find('.'+$(this).data('reveal')).fadeIn('fast');
});
});
</script>
<!-- Some styles to make the show/hide work -->
<style>
* {
font-family: Arial;
}
.hide {
display: none;
}
.pad-bottom {
padding-bottom: 1em;
}
a:link,
a:visited {
background-color: green;
float: left;
clear: both;
padding: 0.5em;
font-size: 1.2em;
border-radius: 3px;
text-decoration: none;
color: #FFF;
transition: background-color 0.5s;
margin: 0.2em;
}
.book-group {
display: flex;
flex-direction: row;
margin: 0.5em;
padding: 0.5em;
border-top: 1px solid #ccc;
}
</style>
Note, I have not done anything with the next button, it can have JS applied to it as well in the same manor as to show and hide the book-group classes so only one book shows at a time.
I have a template that picks wordpress post variables from the db and loads them on a html template i designed.
what i want is for the user to select articles they like then submit the selection to a template which will intern be a newsletter.
so far i have the code that pics the data from the db and arranges them in my template . the code is as below:
<?php /*
Template Name: News Selector Template
*/
//Pull the data
$posts = $wpdb->get_results
("
SELECT
p1.*,
wm2.meta_value
FROM
mp_posts p1
LEFT JOIN
mp_postmeta wm1
ON (
wm1.post_id = p1.id
AND wm1.meta_value IS NOT NULL
AND wm1.meta_key = '_thumbnail_id'
)
LEFT JOIN
mp_postmeta wm2
ON (
wm1.meta_value = wm2.post_id
AND wm2.meta_key = '_wp_attached_file'
AND wm2.meta_value IS NOT NULL
)
WHERE
p1.post_status='publish'
AND p1.post_type='post'
ORDER BY
p1.post_date DESC LIMIT 0,30
");
?>
<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #000;
color:#FFF
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="container">
<div class="header"><img src="/example/images/logo_main_300x100px.png" alt="logo" name="example_logo" width="300" height="100" id="logo" style="background-color: #FFF; display:block;" />
<!-- end .header --></div>
<div class="content">
<h1>example Top 30 Articles</h1>
<p>Select the articles you want to add to the newsletter</p>
<table width="960" border="2" summary="A collection of all the articles">
<caption>
Article Selection
</caption>
<form action="http://samples.net/brands/design/newsletter/" method="post">
<tr>
<th scope="col">Select</th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Cover</th>
<th scope="col">link</th>
</tr>
<?php
if (have_posts($posts)) {
// var_dump($posts); die();
foreach($posts as $post) {
?>
<tr>
<th scope="row"><input type="checkbox" name="article" value="<?php echo $post->ID; ?>" /></th>
<td><?php echo $post->post_title; ?></td>
<td><?php echo $post->post_excerpt; ?></td>
<td><?php echo '<img src="https:sample.net/wp-content/uploads/'.$post->meta_value.'" width="100px" alt="" />'?></td>
<td><?php echo $post->guid; ?></td>
</tr>
<?php
}
}
?>
</table>
<div></div>
<p><tr>
<td>
<div> <input name="Generate" type="submit" id="submitt" target="_blank" /></div>
</form>
</td>
</tr></p>
<p> </p>
<!-- end .content --></div>
<div class="footer">
<p>samples Management System</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
What i want to know is how i can submit an array containing the data items(post_title, post_excerpt, meta_value, guid) in the loop.
Use a hidden input, and implode the array into the input
<input type="hidden" name="metas" value="<?php echo implode(',', $posts);?>">
Then on the backend, you can use explode to retrieve the values:
$posts = explode(',', $_POST['metas']);
I have two DIV's that are side by side. One div is my side bar (Left Of Screen), the other div is my main content (Right Of Screen).
What I'm looking for:
What I want is one visable scroll bar to the far right of the screen. I would like that scrol bar to scroll both left and right div's.
My Problem:
Currently my left sidebar has a tree menu. When I expand my tree menu, I have no scroll bar to scroll down through the side bar content that was expanded. I'm able to add a scroll bar to my side bar, but that looks very ugly. I just want 1 scroll bar on the far right that handles both div's.
Can someone help me on this one?
My index.php file
<?php
include 'sidebar.php';
include 'main_body.php';
?>
My sidebar.php
<?php
echo '<link rel="stylesheet" href="css/style.css" type="text/css">';
echo '<script type="text/javascript" src="js/jquery1_3_2.js"></script>';
include 'function/functions.php';
// Establish a connection to our database
db_connect();
echo'
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
';
echo'<div class="sidebar">';
// Side Bar Start
echo '
<img src="images/hdc_logo.png">
<br>
<br>
<p class="heading"><strong>CUSTOMER</strong></p>
<div class="content">';
//Display all customers from database
query_all_customers();
echo '</div>
<p class="heading"><strong>CABINET</strong></p>
<div class="content">';
// Display all cabinets from database
query_all_cabinets();
echo'</div>
</div>';
?>
My main content area
<?php
ini_set('display_errors', 1);
echo '<div class="main">';
echo'
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here';
?>
My .css file
.sidebar {
width:200px;
position:fixed;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
/*overflow-y: scroll;*/
}
.main {
width: auto;
margin-left: 200px;
}
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#000000;
}
.content {
padding: 5px 10px;
}
#submit {
width:185px;
background-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family:'Oswald';
font-size: 16px;
text-decoration: none;
cursor: pointer;
border:none;
}
#submit:hover {
border: none;
background:#FF9933;
box-shadow: 0px 0px 1px #777;
}
tr:nth-of-type(odd) {
background-color:#D4D4D4;
}
.container0 {
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
padding-bottom: 30px;
background-color:black;
}
JSFiddle
in your css, set position of the sidebar to relative and set float to left, like this:
.sidebar {
width:200px;
position:relative;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
float:left
}
the updated version of your jsfiddle to show you that it works :) http://jsfiddle.net/BrJDE/3/
because you dont want to have the scrollbar at the side of the page, i made some more examples for you. tell me if they are what you want, if its not, i would love to help you again.
both of these examples use 2 additional divs compared to the content you provided. these will make that you can position the scrollbar inside those div's instead of at the side of the browser. if you need me to explain the changes i made, just tell me.
scrollbar inside the page:
http://jsfiddle.net/BrJDE/6/
scrollbar inside the page at the left side of the scrolling div:
http://jsfiddle.net/BrJDE/5/
I have just "created" a script that orders the songs by number of votes (see here : http://radiowhisper.com/demo/demo.php), using a tutorial. And now, the problem: Everytime when i refresh the page i see the song names randomized. How can i order them by number of votes? (FOR ALL THE TIME -> NOT TO BE RANDOMIZED).
Info: The song names are writed in "sort-objects" table from PhpMyAdmin.
The tutorial: http://tutorialzine.com/2009/11/jquery-sort-vote/
Files:
demo.php
<?php
// Hiding notices:
error_reporting(E_ALL^E_NOTICE);
// Including file for the DB connection:
define("INCLUDE_CHECK",1);
require 'connect.php';
?>
<!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" />
<title>Radio Whisper - Top 40</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<h1>Radio Whisper - Top 40</h1>
<h2>Ordonati melodiile in functie de preferinte.</h2>
<hr />
<?php
// Checking whether the user has voted today:
$voted=false;
$vcheck=mysql_query(" SELECT 1 FROM sort_votes
WHERE ip='".$_SERVER['REMOTE_ADDR']."'
AND date_submit=CURDATE()");
if(mysql_num_rows($vcheck)==1)
$voted=true;
// If we are not on the data.php?results page:
if(!array_key_exists('results',$_GET))
{
echo '<ul class="sort">';
// Showing the tutorials by random
$res = mysql_query("SELECT * FROM sort_objects ORDER BY RAND()");
while($row=mysql_fetch_assoc($res))
{?>
<li id="li<?php echo $row['id']?>">
<div class="tut">
<div class="tut-img">
<img src="<?php echo $row['img']?>" width="50" height="50" alt="<?php echo $row['title']?>" />
<div class="drag-label"></div>
</div>
<div class="tut-title">
<?php echo $row['title']?>
</div>
<div class="tut-description"><?php echo $row['description']?></div>
<div class="clear"></div>
</div>
</li>
<?php } ?>
</ul>
<div class="button-holder">
<?php if(!$voted):?>Trimite topul<span></span><?php endif;?>
Vezi rezultatele<span></span>
</div>
<?php
}
else require "results.php";
// The above require saves us from having to style another separate page
?>
<!-- The form below is not directly available to the user -->
<form action="?results" id="sform" method="post">
<input name="sortdata" id="sortdata" type="hidden" value="" />
</form>
</body>
</html>
demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* A simple page reset */
margin:0px;
padding:0px;
}
body{
color:white;
font-size:13px;
background: url(img/bg.jpg) repeat-x #003951;
font-family:Arial, Helvetica, sans-serif;
text-shadow:2px 2px 5px #333333;
}
.tut-title{
font-size:20px;
font-weight:bold;
}
.tut-description{
color:#DDDDDD;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
padding-top:5px;
}
.tut-img{
border:0px solid white;
float:right;
margin:0 110px 0 0;
width:50px;
height:50px;
overflow:hidden;
/* CSS3 Box Shadow */
-moz-box-shadow:2px 2px 3px #333333;
-webkit-box-shadow:2px 2px 3px #333333;
box-shadow:2px 2px 3px #333333;
cursor:n-resize;
position:relative;
}
.drag-label{
/* The DRAG label that scrolls into visibility on hover */
background:url(img/label_small.png) no-repeat;
width:71px;
height:25px;
position:relative;
margin-left:25px;
}
a.button{
/* The pretty buttons on the bottom are actually hyperlinks.. */
color:#434343 !important;
display:block;
float:left;
font-size:10px;
font-weight:bold;
height:23px;
margin:10px;
padding:12px 10px 0 12px;
position:relative;
text-shadow:none;
text-transform:uppercase;
/* This is the left part of the button background image */
background:transparent url(img/button_gray_bg.png) no-repeat;
}
a.button:hover{
text-decoration:none !important;
background-position:bottom left;
}
a.button:active{
/* Offsetting the text 1px to the bottom on mouse-click*/
padding-top:13px;
height:22px;
}
a.button span{
/* This span holds the right part of the button backgound */
background:transparent url(img/button_gray_bg.png) no-repeat right top;
height:35px;
position:absolute;
right:-2px;
top:0;
width:10px;
display:block;
}
a.button:hover span{
background-position:bottom right;
}
.button-holder{
padding-left:107px;
}
ul.sort{
/* This UL gets converted to a sortable by jQuery */
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:20px;
}
ul.sort li{
margin:25px 50px 25px 0;
height:102px;
list-style:none;
}
.chart{
/* Styling the chart container */
background:#002A3C;
border:1px solid #005A7F;
height:300px;
width:550px;
}
.bar{
/* Each bar in the chart is a div. Colors and width are assigned later */
height:17px;
margin:15px;
overflow:hidden;
padding:15px 10px 10px;
text-shadow:none;
white-space:nowrap;
}
.bar a, .bar a:visited{
color:white;
font-size:12px;
}
.tot-votes{
float:right;
font-size:10px;
font-weight:bold;
position:relative;
right:50px;
text-transform:uppercase;
top:18px;
}
/* General styles for the demo page */
h1{
/* The title of the page */
color:white;
font-family:"MyRiad Pro",Arial,Helvetica,sans-serif;
font-size:38px;
font-weight:normal;
}
h2{
/* The subtitle */
font-family:"MyRiad Pro","Arial Narrow",Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:normal;
letter-spacing:1px;
padding-left:2px;
text-transform:uppercase;
white-space:nowrap;
margin:10px 0 25px;
}
#orig{
/* The link that is positioned above the title */
font-family:"MyRiad Pro",Arial;
font-size:10px;
letter-spacing:1px;
padding-bottom:15px;
text-transform:uppercase;
}
hr{
/* The horizontal ruler */
background-color:#BBBBBB;
border:medium none;
color:#BBBBBB;
height:1px;
margin:30px auto;
width:450px;
}
.clear{
/* The clearfix hack */
clear:both;
}
#main{
/* The main container */
width:600px;
margin:30px auto;
}
a img{
border:none;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
.tutorial-info{
text-align:center;
padding:10px;
}
connect.php
<?php
if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');
/* Database config */ (Edit: I don't want to see them)
$db_host = '*********';
$db_user = '***********';
$db_pass = '******';
$db_database = '***************';
/* End config */
$link = mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');
mysql_select_db($db_database,$link);
mysql_query("SET names UTF8");
?>
results.php
<?php
if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');
// If the poll has been submitted:
if($_POST['sortdata'])
{
// The data arrives as a comma-separated string,
// so we extract each post ids:
$data=explode(',',str_replace('li','',$_POST['sortdata']));
// Getting the number of objects
list($tot_objects) = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM sort_objects"));
if(count($data)!=$tot_objects) die("Wrong data!");
foreach($data as $k=>$v)
{
// Building the sql query:
$str[]='('.(int)$v.','.($tot_objects-$k).')';
}
$str = 'VALUES'.join(',',$str);
// This will limit voting to once a day per IP:
mysql_query(" INSERT INTO `sort_votes` (ip,date_submit,dt_submit)
VALUES ('".$_SERVER['REMOTE_ADDR']."',NOW(),NOW())");
// If the user has not voted before today:
if(mysql_affected_rows($link)==1)
{
mysql_query(' INSERT INTO `sort_objects` (id,votes) '.$str.'
ON DUPLICATE KEY UPDATE votes = votes+VALUES(votes)');
}
}
// Selecting the sample tutorials and ordering
// them by the votes each of them received:
$res = mysql_query("SELECT * FROM sort_objects ORDER BY votes DESC");
$maxVote=0;
$bars=array();
while($row=mysql_fetch_assoc($res))
{
$bars[]=$row;
// Storing the max vote, so we can scale the bars of the chart:
if($row['votes']>$maxVote) $maxVote = $row['votes'];
}
$barstr='';
// The colors of the bars:
$colors=array('#ff9900','#66cc00','#3399cc','#dd0000','#800080');
foreach($bars as $k=>$v)
{
// Buildling the bar string:
$barstr.='
<div class="bar" style="width:'.max((int)(($v['votes']/$maxVote)*450),100).'px;background:'.$colors[$k].'">
'.$v['short'].'
</div>';
}
// The total number of votes cast in the poll:
list($totVotes) = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM sort_votes"));
?>
<div class="chart">
<?php echo $barstr?>
</div>
Go Back<span></span>
<div class="tot-votes"><?php echo $totVotes?> votes</div>
script.js
$(document).ready(function(){
// Executed once all the page elements are loaded
// Convert the UL with all the tutorials into a sortable list:
$("ul.sort").sortable({
handle : '.tut-img',
axis:'y',
containment: 'document',
opacity: 0.6
});
// The hover method takes a mouseover and a mouseout function:
$(".tut").hover(
function(){
$(this).find('.drag-label').stop().animate({marginTop:'-25px'},'fast');
},
function(){
$(this).find('.drag-label').stop().animate({marginTop:'0'},'fast');
}
);
// Binding an action to the submitPoll button:
$('#submitPoll').click(function(e){
// We then turn the sortable into a comma-separated string
// and assign it to the sortdata hidden form field:
$('#sortdata').val($('ul.sort').sortable('toArray').join(','));
// After this we submit the form:
$('#sform').submit();
// Preventing the default action triggered by clicking on the link
e.preventDefault();
});
});
So, what's the problem ?!?
Don't want to be rude but instead of just copying and pasting code, you would actually read the code and try to understand it you might see these 2 lines
// Showing the tutorials by random
$res = mysql_query("SELECT * FROM sort_objects ORDER BY RAND()");
Seriously, one of them is a comment on what the next line of code does!
ORDER BY is the part of the query that tells it how to sort the results. ORDER BY RAND() will, not surprisingly, give you randomly sorted results. Instead, you should do ORDER BY votes or whatever the name of the column that contains votes is. ORDER BY votes asc will sort them in ascending order (fewest votes first) and ORDER BY votes desc will sort them in descending order (most votes first).
This assumes that you have votes stored in a single field in your table. If that's not the case (e.g., if you have a table with one record per vote), you'll need to tell us about your database schema.