PHP code messes up layout?

2 Pages
1
2
→

You cannot start a new topic
You cannot reply to this topic

Rate Topic:

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 05 July 2012 - 11:43 AM (#1)

PHP code messes up layout?

Hi all,

So I'm working on a site :unsure:

On one page the user should be able to select some given keyword from a list, press a button and then get a table which contains the content from a MySQL database table (only the rows that contain the selected keyword).

As I don't have much experience with PHP I just started with displaying the whole database without any user interaction - It just shows the table on load.

So I read that it isn't smart to put the <?php ?> in between of html code and that you should instead echo the whole html in PHP... But I still tried to do it the first way. So I have some PHP code wrapped in a div and I expected it to put the MySQL database in there...

Well, it does display the data table, but messes up the whole layout that comes after the table...

For you to experience what I'm complaining about, please see here for the normal layout and here for the broken layout.

So first I'd like to find out what happens to my layout and how to fix this :huh:

...
I guess that this whole thing needs to be done differently.

If you have the time, can someone also please explain how to properly execute the code that connects to MySQL and outputs the data after a user has chosen what to display (and has pressed a button) and how to display the result in the right place on the site... I mean, I can just put the PHP before or after the whole html but then it will be there, all ugly, on a white background

... Instead I want it to be displayed in a certain div...
So, I'll put it like this: How do I execute the PHP code AFTER the user fills out the form and display the database content on that same page and?

I would totally understand if you can't understand what I'm trying to do here... I am really not good at describing my issues

Sorry for that.

If you folks don't get what the hell this Russian guy is trying to say, I'll try to re-explain it

Thanks for your help!!!

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 05 July 2012 - 11:52 AM (#2)

You're not closing your

</table>

tag.
Also, you should look into using the

<li>

tag for the list on "Anlässe".

As for the second question, you're essentially going to want to submit to the same page. Also, note that you can put the PHP anywhere on the page, though it's smarter to put the logic at the top and only use "inline" for actually displaying data. It's not pretty, but it goes something like this (imagining you're making a filter);

<?php

if ( array_key_exists("filter", $_GET) ) {
	
	$results = new PDO; // Do your database stuff here. Make sure to clean up user input first.
}

?>
<!DOCTYPE HTML>
	<html>
		<body>
		
			<?php foreach ($results as $result) { ?>
			<tr>
				<td><?php echo $result->name; ?></td>
			</tr>
			<?php } ?>
		
		</body>
	</html>

If for example you were to go to:

http://example.com/?filter=sonaten

You would then have

$_GET["filter"] = "sonaten";

But as I said, this is ugly. It'll work fine, but if you're going to make a more "serious" site, you'll want to look into basic MVC or another way of structuring your apps. A good tutorial for that is Kyek's "Backwards PHP 5.3 Guide"

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 05 July 2012 - 12:10 PM (#3)

Cyril, on 05 July 2012 - 11:52 AM, said:

You're not closing your

</table>

tag.
Also, you should look into using the

li

tag for the list on "Anlässe".

And I thought, I had double-checked everything... Jeez! Thanks I fixed it.

And the list on "Anlaesse" was just there as a note on what content the page will have in the future. So that's just provisionally

But thanks for the suggestion.

Sorry for abusing you..., but do you also have an answer to the other question, Cyril?
How do I properly execute the PHP code, so that it does not run when the page loads, but when the user submits a form?

I know that usually you can have a <form action="somepage.PHP>, so that the information from the form is sent to that other page and the code is executed there onload... But can you also do that all on one and the same page?

Thanks for your help!

gibbonweb

兄ヨハネス

Group: Members
Posts: 2061
Joined: 23-June 10
LocationMunich(DE)
Expertise:HTML,CSS,PHP,Javascript,Python,SQL,Graphics

Posted 05 July 2012 - 12:20 PM (#4)

Sure you can do that on the same page! You can check via php if any form variables are set (

if(isset($_GET['submitelement'])) {...}

) and display the table if a selection has been made and display the form if no form data has been sent.

a hoopy frood who really knows where his towel is. ~~~ gibbonweb | github | hdr photography
my wife has a new DIY/decorations/floristry blog, wanna take a look? (stay tuned for English translations...)

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 05 July 2012 - 12:26 PM (#5)

Slad, on 05 July 2012 - 12:10 PM, said:

How do I properly execute the PHP code, so that it does not run when the page loads, but when the user submits a form?

I know that usually you can have a <form action="somepage.PHP>, so that the information from the form is sent to that other page and the code is executed there onload... But can you also do that all on one and the same page?

Thanks for your help!

Of course you can, just with that code I wrote

Basically, your form should be something like this:

<form action="" method="GET">
	<input type="text" name="filter" placeholder="Filter by term...">
	<input type="submit" value="Filter Page">
</form>

We're not setting the action attribute -- that means it'll default to the current page. So, it'll submit to itself.
We're setting the method to GET: this means that the different values that were submitted will be visible in the URL; this is useful for search forms or filters, etc.
We're setting the name attribute of the input to "filter". This will be the variable that will contain the value of the submitted form.

Now, for the code:

<?php

if ( array_key_exists("filter", $_GET) ) {
        
        $results = new PDO; // Do your database stuff here. Make sure to clean up user input first.
}

?>

You'd be putting that at the top of the page, before any HTML.

The first if statement checks if the $_GET array contains the filter value. $_GET is a special variable which is set by PHP/ the server. It's an array of all the GET parameters that were passed (through the form, for example) and we're checking if the array contains the "filter" key, and so if we should actually do something about it.
You'd do anything related to getting results in that if statement. You have the
```
$_GET["filter"]
```
which contains the form information

I'll let you figure out the database stuff

Edit: Damnit, I got gibbonweb'd

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 05 July 2012 - 12:27 PM (#6)

gibbonweb, on 05 July 2012 - 12:20 PM, said:

Sure you can do that on the same page! You can check via php if any form variables are set (

if(isset($_GET['submitelement'])) {...}

) and display the table if a selection has been made and display the form if no form data has been sent.

'submitelement'

would be the name of the submit button?
And the rest of the php that I already have (the one that shows the table), I put into the

{...}

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 05 July 2012 - 12:30 PM (#7)

Slad, on 05 July 2012 - 12:27 PM, said:

'submitelement'

would be the name of the submit button?
And the rest of the php that I already have (the one that shows the table), I put into the

{...}

Look at my reply, I explained it

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

gibbonweb

兄ヨハネス

Group: Members
Posts: 2061
Joined: 23-June 10
LocationMunich(DE)
Expertise:HTML,CSS,PHP,Javascript,Python,SQL,Graphics

Posted 05 July 2012 - 12:31 PM (#8)

Slad, on 05 July 2012 - 12:27 PM, said:

'submitelement'

would be the name of the submit button?
And the rest of the php that I already have (the one that shows the table), I put into the

{...}

Yes!
But read Cyril's answer through, his is better and more complete

I'm just writing bad half-sentences from my mobile, sorry

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 05 July 2012 - 12:32 PM (#9)

Cyril, on 05 July 2012 - 12:30 PM, said:

Look at my reply, I explained it

Yeah, Whoa, I was just about to edit my last post, saying thanks for that detailed explanation!

I'll go experiment with that new infomation

So, for now I say Merci beaucoup, Cyril, pour votre assistance and Vielen Dank, gibbonweb! (btw. I live in Munich too:))

I guess I'll be back here in about 30mins, asking for more of your wisdom... sorry.

gibbonweb

兄ヨハネス

Group: Members
Posts: 2061
Joined: 23-June 10
LocationMunich(DE)
Expertise:HTML,CSS,PHP,Javascript,Python,SQL,Graphics

Posted 05 July 2012 - 02:51 PM (#10)

Slad, on 05 July 2012 - 12:32 PM, said:

Yeah, Whoa, I was just about to edit my last post, saying thanks for that detailed explanation!

I'll go experiment with that new infomation

You didn't come back... That's a good sign I guess?

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 05 July 2012 - 03:00 PM (#11)

gibbonweb, on 05 July 2012 - 02:51 PM, said:

You didn't come back... That's a good sign I guess?

Actually it's just a coincidence that I didn't come back

Had to leave the pc for a while.

I've got some issues again though.

Wanna send multiple keywords to the database...

E.g. User says he wants to see value A and value B and all rows containing values A AND B should be displayed. I was messing with the code for some time but didn't get what I wanted.

I'll write more on this tomorrow...

Thanks for the help you gave me today, awesome people!!!

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 05 July 2012 - 03:29 PM (#12)

Slad, on 05 July 2012 - 03:00 PM, said:

E.g. User says he wants to see value A and value B and all rows containing values A AND B should be displayed. I was messing with the code for some time but didn't get what I wanted.

Oooh, this is very easy. You actually gave yourself the answer: AND.
You can set multiple WHERE statements using the AND keyword;

SELECT * FROM `table` WHERE a = "a" AND b = "b"

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 05 July 2012 - 03:37 PM (#13)

So the idea now is to have this as a form:

<form action="" method="GET" name="filter">
<select name="genre">
	<option value=""></option>
	<option value="Classic Piano">Classic Piano</option>
    <option value="Bar Piano">Bar Piano</option>
</select>
<select name="anlass">
	<option value=""></option>
	<option value="Test Anlass 1">Test Anlass 1</option>
</select>
        <input type="submit" value="Filter Page">
</form>

So I would like it to work like this basically: user can select either from only one field or also from both. If you select 'Classic Piano' for example, every row containing 'Classic Piano' should be displayed. If you select 'Classic Piano' and 'Test Anlass 1' it displays rows containing Classic Piano and Test Anlass 1...

The php Code I was trying to achieve that with is this:

<?php
	if ( array_key_exists("filter", $_GET) ) {
        
        $results = new PDO;
$db_host = 'localhost';
$db_user = 'asdasdasd';
$db_pwd = 'adsasdasda';

$database = 'k24868_rt';
$table = 'repertoire';

$qgenre = $_GET["genre"];
$qanlass = $_GET["anlass"];
$qcomposer = $_GET["composer"];

if (!mysql_connect($db_host, $db_user, $db_pwd))
    die("Can't connect to database");

if (!mysql_select_db($database))
    die("Can't select database");

// sending query
$result = mysql_query("SELECT * FROM {$table} WHERE genre='{$qgenre}' AND anlass='{qanlass}'");
if (!$result) {
    die("Query to show fields from table failed");
}

$fields_num = mysql_num_fields($result);

echo "<h1>Table: {$table}</h1>";
echo "<table><tr>";
// printing table headers
for($i=0; $i<$fields_num; $i++)
{
    $field = mysql_fetch_field($result);
    echo "<td>{$field->name}</td>";
}
echo "</tr>\n";
// printing table rows
while($row = mysql_fetch_row($result))
{
    echo "<tr>";

    // $row is array... foreach( .. ) puts every element
    // of $row to $cell variable
    foreach($row as $cell)
        echo "<td>$cell</td>";

    echo "</tr>\n";
	
}
mysql_free_result($result);
echo "</table>";
				}
?>

Aaaand this doesn't work... I guess :unsure:

, it's because of something wrong in this

if ( array_key_exists("filter", $_GET) ) {

?! Should I put all the form input fields in those quotes?

PS. Seen your lates post, Cyril. Yeah, I kinda know how to make the database do what I want in SQL... But there's something else wrong in my code.

Hope you can help.

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 05 July 2012 - 03:47 PM (#14)

Oooh, do not do what you just did in your code. Ever. That's terrible. Insecure. You'll get your database hacked.
Before going on further, please, please read this: http://webdevrefiner...sql-code-sucks/
(The method shown in that thread is both cleaner and safer than your current method. The mysql_ extension is officially deprecated and shouldn't be used)

As for the if statement not working, that's because you're still using

filter

. That was just an example

Just replace it with

if ( array_key_exists("genre", $_GET) ) {

and it should work.

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 06 July 2012 - 06:33 AM (#15)

Cyril, on 05 July 2012 - 03:47 PM, said:

filter

. That was just an example

Just replace it with

if ( array_key_exists("genre", $_GET) ) {

and it should work.

I'll go read it!

Was a little confused you only noticed this now, since you have looked at my source in the beginning, when you told me about the open <table>

It was the same php code there. Got that code from some place on the internet by the way, since I wouldn't have been able to write anything productive in php... Interesting, why people keep making tutorials using this insecure method when there is a better alternative as you said...

:::::::: E D I T ::::::::
So I'm working on the PDO thing.
I've got this code above the html.

(...)
while ($result = $statement->fetchObject()) {
    echo $result->genre;
	echo $result->anlass;
	echo $result->composer;
	echo $result->piece;
    echo "<br />";
}
?>

So when I submit the form it just displays the result above the html body.
The question now is: Is there a way to echo the database output to a specific div on the page and how? Also, how do I add a whitespace between genre, anlass, composer and piece?

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 06 July 2012 - 07:31 AM (#16)

Slad, on 06 July 2012 - 06:33 AM, said:

Was a little confused you only noticed this now, since you have looked at my source in the beginning, when you told me about the open <table>

PHP is executed by the server before it sends me the page: I can see the HTML, but not the PHP

I only saw it when you posted the code.

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 06 July 2012 - 08:14 AM (#17)

Right... My fault...

Can you check my edited post?

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 06 July 2012 - 08:18 AM (#18)

You can place PHP tags in other places than the top of the page

<?php
// Some Code Here
?>
<!DOCTYPE HTML>
	<html>
		<head>

			<!-- Your Usual HTML -->		
			<title></title>
		
		</head>
		<body>
		
			<!-- More Usual HTML -->
			
			<?php
			
				// You can put PHP here as well
			
			?>
		
		</body>
	</html>

You should put your main database stuff at the top, though, and only put the while loop in the inline block.

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics

Slad

Group: Members
Posts: 33
Joined: 15-April 11
LocationGermany
Expertise:HTML,CSS

Posted 06 July 2012 - 08:24 AM (#19)

Yeah, I knew you can put it in between. But thought I read somewhere that it's better to leave it above the HTML.

Cyril

Group: Members
Posts: 2544
Joined: 03-August 10
Expertise:HTML,CSS,PHP,Javascript,Graphics

Posted 06 July 2012 - 08:25 AM (#20)

Slad, on 06 July 2012 - 08:24 AM, said:

Yeah, I knew you can put it in between. But thought I read somewhere that it's better to leave it above the HTML.

Yep, the actual connection should be put at the top; but once you've connected to the database, the only way you're going to be able to output it properly is with inline PHP, and there isn't any risk with that.

website :: github :: twitter :: dribbble :: ~~forrst~~
html, css, php, javascript, graphics