From MySQL to cascading style sheet

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

From MySQL to cascading style sheet

Post by chrisbu »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hi as a newbie php user and an hardened hardware engineer I am desperate to understand the following problem.

I have many pages with the same basic format, but different content, on a website. Each text <DIV> is generally a different size and so I put [i]height:[/i] and [i]position:[/i] information in the database containing the page content. All works fine EXCEPT for putting dynamic content in the CSS lines of the generated HTML page. For example I use a [i][b]<DIV id="page_container">[/b][/i] for aesthetic and fixed layout reasons.

Code: Select all

echo "#page_container {height: 570px;};";
gives a page source code with

Code: Select all

echo "#page_container {height: 570px;};
But

Code: Select all

echo "#page_container {height:";
echo $row[page_height];
echo "px;};";
or

Code: Select all

echo $row['page_height'];
echo "px;};";
or

Code: Select all

echo $row["page_height"];
echo "px;};";
and even

Code: Select all

echo "#page_container {height:".$row[page_height]."px;};";
(All variants of page_height delimiting)

gives me a source code with:

Code: Select all

#page_container{height:;};
Putting

Code: Select all

echo $row[page_height];
in any <DIV> in the <BODY> of the page gives me the value or string from the Database, so it is not an SQL usage problem.

I have used INT and TEXT types in my MySQL Database both give me the same result, so now I think the only option I haven't yet tried is to put

Code: Select all

#page_container {height: 570px;};
in the database as a string, but with about 50 different pages it is very wasteful of storage space.

I actually need to put several variables in several <STYLE> lines - so the wastage of storage space would be considerable.

Regards Chris


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Weird. Have you tried:

Code: Select all

echo '#page_container {height:' .  $row['page_height'] . 'px;};';
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

please try

Code: Select all

error_reporting(E_ALL); ini_set('display_errors', true);
echo "/* \n";
$test = $row['page_height'];
echo 'type: ', gettype($test), "\n";
echo 'export: ', var_export($row, true), "\n";
echo "*/ \n";
echo '#page_container {height: '. $row['page_height']. 'px;}';
and post what it prints.
User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

Post by chrisbu »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Firstly my sincere apologies to other users because of my incorrect usage of

Code: Select all

and thanks for the edit.

Jay - I tried your suggestion, but still the same result as without the whitespace ... null for the number of pixels.

Volka - thank you. I ran your code and got this result

[syntax="css"]/* type: string export: array ( 0 => '20', 'ID' => '20', 1 => 'rail', 'old_page_name' => 'rail', 2 => 'Railways', 'title' => 'Railways', 3 => '', 'meta_tags' => '', 4 => 'Dispayed text 1', 'first_para' => 'Dispayed text 1', 5 => 'Dispayed text 2', 'following_para' => 'Dispayed text 2', 6 => 'Dispayed text 3', 'intro2' => 'Dispayed text 3', 7 => '1', 'image1' => '1', 8 => '2', 'image2' => '2', 9 => '3', 'image3' => '3', 10 => '4', 'image4' => '4', 11 => '5', 'image5' => '5', 12 => '', 'image6' => '', 13 => '', 'image7' => '', 14 => '570', 'page_h' => '570', 15 => '250', 'intro_loc' => '250', 16 => '135', 'intro_h' => '135', 17 => '384', 'intro2_loc' => '384', 18 => '167', 'intro2_h' => '167', ) */  #page_container {height: 570px;}
So it seems to read and write OK with your code only. However if I put the last line of your code into my page template I get #page_container {height: px;} displayed when I view the HTML source.

Hardware troubleshooting is so much easier ... I can use a hammer not a brain. :javascript:emoticon(':D')
Very Happy

Perhaps I should use the hammer on MY brain and knock some sense into myself!

Regards Chris


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

chrisbu wrote:So it seems to read and write OK with your code only. However if I put the last line of your code into my page template I get #page_container {height: px;} displayed when I view the HTML source.
Don't put the last line in there, put the whole snippet in.
User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

Post by chrisbu »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Thanks Volka

I put the whole code snippet in - and got this as my HTML source

Some errors (highlighted in blue) are due to no image being available and not in the dB - the dB contains "NULL"
[syntax="html"]<head>
<title></title>
<link rel=STYLESHEET href=isaans.css type=text/css>
<link rel=STYLESHEET href=tour.css type=text/css>
<style>/* 
<br />
<b>Notice</b>:  Undefined variable: row in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>17</b><br />
type: NULL
export: <br />
<b>Notice</b>:  Undefined variable: row in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>19</b><br />
NULL
*/ 
<br />
<b>Notice</b>:  Undefined variable: row in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>21</b><br />
#page_container {height: px;}#intro {top:250px; border:0px dotted #0000ff;height:135px;}#intro2 {top:414px; border:0px dotted #0000ff;height:167px;}</style>
</head>
<body bgcolor=#ffffff ><div id=page_container><br />
<b>Notice</b>:  Use of undefined constant image1 - assumed 'image1' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>33</b><br />

<br />
<b>Notice</b>:  Use of undefined constant image2 - assumed 'image2' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>38</b><br />
<br />
<b>Notice</b>:  Use of undefined constant image3 - assumed 'image3' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>44</b><br />
<br />

<b>Notice</b>:  Use of undefined constant image4 - assumed 'image4' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>50</b><br />
<br />
<b>Notice</b>:  Use of undefined constant image5 - assumed 'image5' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>56</b><br />
<br />
<b>Notice</b>:  Use of undefined constant image6 - assumed 'image6' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>62</b><br />

<br />
<b>Notice</b>:  Use of undefined constant image7 - assumed 'image7' in <b>E:\htdocs\isaans_new\php development\development_page_1.php</b> on line <b>67</b><br />
<div id=title>Railways</div><div id=intro>Dispayed text 1</div><DIV ID=intro2>Dispayed text 3</div>


</div>

</body>
</html>
The first part of the code that is in use at the moment is this[/syntax]

Code: Select all

<?php
include 'opendb.php';
$query="SELECT * FROM touring";
$result = mysql_query("SELECT * FROM touring
WHERE ID='20'") or die(mysql_error());  
mysql_close();
/* Build the page */

echo "<head>
<title></title>
<link rel=STYLESHEET href=isaans.css type=text/css>
<link rel=STYLESHEET href=tour.css type=text/css>
<style>";
error_reporting(E_ALL); ini_set('display_errors', true);
echo "/* \n";
$test = $row['page_h'];
echo 'type: ', gettype($test), "\n";
echo 'export: ', var_export($row, true), "\n";
echo "*/ \n";
echo '#page_container {height: '. $row['page_h']. 'px;}';
echo "#intro {top:250px; border:0px dotted #0000ff;height:135px;}";
echo "#intro2 {top:414px; border:0px dotted #0000ff;height:167px;}";
echo "</style>
</head>
<body bgcolor=#ffffff >";

echo "<div id=page_container>";

$row = mysql_fetch_array( $result );
// Print out the contents of each row into a table 

if ( $row[image1] != "" ) {
echo "<DIV ID=pic01><img src=\"images/";
echo $row[image1];
echo "\" height=160 width=240 ></div>";
}
I don't have the page or dB on the webserver yet but I could uploda if needed, currently it is only on my local Apache/php/MySQL server.
  • Apache/2.2.3
    MySQL/5.0.27
    PHP Version 5.2.0

Regards Chris


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

Code: Select all

$result = mysql_query()
...
echo $row
...
$row = mysql_fetch_array()
wrong order.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Chris: html and css have been designed specifically to handle variable content properly, I can't understand why you want to store all these values in the db... Can you point us to an example page? It's more than likely you're making this far more complicated than it needs to be.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Indeed, it seems to be very complicated doing it like this.
chrisbu wrote:I have many pages with the same basic format, but different content, on a website.
It seems like you want to differentiate the style or layout of the different pages? If that is the case, a much simpler solution is to set only one dynamic variable to the body tag for example. And then let css figure out what style to use.

So:

Code: Select all

<html>
<body class="home">
<div id="content">
..

or
<body class="page">
<div id="content">
..

Code: Select all

.home #content { width:80%; }
.page #content { width:50%; }

Code: Select all

<?php
if ( is_home() ) { echo '<body class="home">'; }
else { echo '<body class="page">'; }
?>

// or something like
<body <?php echo $class; ?> >
<div>

In which is_home is just a function to determine if the current page is the home page.
User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

Post by chrisbu »

Of course I can.

This is the old site I am currently updating, the layout of these three pages starts the same with 5 pictures and text between the two outer ones. Please forgive the black background, happily that changes in the updated version.

On this page only 5 pictures

http://www.isaans.net/khosum.php


The next page has two added pictures and so after those I need to put the <DIV> for the full width paragraph lower than the 5 picture page.

http://www.isaans.net/mukdahan.php


And finally this one has 5 pictures for the introduction but much more content than the monkey page

http://www.isaans.net/khonkaen.php


The narrow text section has variable height depending on content so I need to change the height of the <DIV> and also the location for the next <DIV> dynamically otherwise there can be a big ugly gap or the text can overwrite the previous text.

For ease of composing pages (currently 32 - but many to be added) I want to use a page template and drag the content from a MySQL database. (using FORM data (or whatever! client-side) giving a variable that is sent to the PHP server to select the appropriate record. (in the example code I posted I selected record 20 in this way WHERE ID='20' but the "20" will be the variable sent from the form).

I use the style sheet tour.css for the basics of the sections, only varying the height and location in the database.

Regards Chris
User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

Post by chrisbu »

To everyone - genuine heartfelt thanks for your help

As a newbie here it was so nice to get all the help. I have encountered (as a reader only) some very aggressive forums (forii???) where stupidity such as mine has led to a three week "flaming" session. Looks to me as though the PHP community is just as good as the PHP product.

To Volka OOOOOOOOOOOOOOOPS! ........... Sorry!

I got the basic content going correctly, then put the CSS stuff in the logical (for HTML anyway) position afterwards.

See that's what happens when you let hardware guys loose on software!

Again many many thanks to all of you especially Volka - for his patience and for the right answer.

One day I may get good enough to help someone else with a PHP problem ... but i doubt it. Hahaha

Best regards for 2007 from me to all of you, Chris
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Glad you found the solution.

More in general: I think it's important to separate the different responsibilities well. So your PHP/mysql shouldn't have to do anything with the way it's seen on the front side. Also, the HTML en CSS should be separated as well. Kind of loose coupling.

If you succeed to do that, you'll make your life a lot easier.

When I read this:
The narrow text section has variable height depending on content so I need to change the height of the <DIV> and also the location for the next <DIV> dynamically otherwise there can be a big ugly gap or the text can overwrite the previous text.

For ease of composing pages (currently 32 - but many to be added) I want to use a page template and drag the content from a MySQL database. (using FORM data (or whatever! client-side) giving a variable that is sent to the PHP server to select the appropriate record. (in the example code I posted I selected record 20 in this way WHERE ID='20' but the "20" will be the variable sent from the form).

I use the style sheet tour.css for the basics of the sections, only varying the height and location in the database.
It's seems to me there's a much too tight coupling between the different layers.

But if you managed to find a solution, then fine. This is just a general remark.
User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

Post by chrisbu »

Hello Matthijs

I'm not sure of how to separate the various components.

I thought that PHP was to make my life simple (if I put things in the right order in the page)

I had looked at putting <?php $this ?>and <?php $that ?> all the way through an HTML document, but it seemed so much simpler to use PHP to echo the HTML.

I have relied heavily on .CSS for formatting on several sites, so it seemed to me to be an integral part of the "scheme". They work reasonably well except for variations between browsers - quirky or not - but that can generally be overcome with the usual margin setting games.

To dynamically modify my style sheet(s) seemed an easy way of avoiding masses of coding (and masses of errors too) on the repetitive stuff. The lazy brain of a non-software guy!

Again to store my content in a dB seemed a natural way to go. My webhost gives me unlimited Databases :)

Perhaps my inexperience led me along the simple but totally wrong path. Maybe I should sit back and learn to integrate PHP into an HTML page rather than using it to define the page with a shedload of "echo"'s. That way at least content is separated from appearance.

Although not sure of how to separate the bits at least I have some food for deep, deep thought - and the need of a 500 page printout of the PHP manual. Hahaha poor old Epson (I don't have a laserjet here - it's in UK).

So no sleep tonight .... brain will be in top gear

Regards Chris
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Chris: I think you're becoming an excellent example of being "a slave to your layout".

While it looks nice, I would suggest maybe taking another stab at the layout now that you have a better understanding of html and css. I can't help but feel you're painting yourself into a corner, and it only gets more difficult as time goes on!

I only speak from experience when I tell you that designing for maintainability will save your sanity... and your hair!
User avatar
chrisbu
Forum Newbie
Posts: 9
Joined: Sun Jan 07, 2007 7:12 pm
Location: Khon Kaen, Thailand

Post by chrisbu »

Hi Kieran

Well if my wife's and daughter's comments are anything to go by I don't have any hair! I had a haircut on Friday before a special dinner and my daughter said "Mum Why does dad have his haircut when he doesn't have any?"

I did sit back before making a fool of myself and think that I must throw away all the restrictive tables on the site and make it prettier to work with.

I looked at CMS progs and rejected those as being even less flexible than tables - I still like CSS because it is relatively predictable. (I'm one of those heathens who doesn't like his page to spreeeeeeeeeeeeeeead to match the screen size ... although I am old with no hair I use Firefox and <CTRL><+> <CTRL><+> a few times so that I can read my own page.

So I guess a few days of poring through a Gig or two of photos and planning the pages at least might help, then I decide whether I am stupid and even more hairless, or boring and move back to tables. I must admit that tables automatically expand vertically to the height of the content - <DIV>'s don't.

Tomorrow I think I'll set up a wireless LAN - my switch is out of ports now and I don't have the LAN in the bedroom. Yes I'll do something I understand better than PHP, then with a clear mind I can decide how to go on the site. Incidentally this is a page from the "new look" site

http://new.isaans.net/agriculture.php

The picture pages will have the same "look and feel".

Thank you for your advice. It has been absorbed and MAY influence my thoughts over the next few days.

Again thank you very much to all who contributed to this thread.

Regards Chris
Post Reply