PDA

View Full Version : Generate a new page in PHP

MinatureCookie
July 19th, 2006, 10:40
Well, I have this code -

<html>
<body>
<script type="text/javascript">
function runscript()
{
title = prompt ("Please enter your website's title", "Title");
menu = prompt("Please enter what you want your menu button to say", "Menu");
nameone = prompt("Please enter your first button's option", "Yahoo");
urlone = prompt("Please enter the URL of your first button", "http://www.yahoo.com");
nametwo = prompt("Please enter your second button's option", "Google");
urltwo = prompt("Please enter the URL of you second button", "http://www.google.com");
alert("This page is now going to generate the page you have requested, in a new page. When this new page has loaded, press \"CTRL+S\" to save your webpage wherever you choose.");

if(title){
title = title;
}

if(menu){
menu = menu;
}

if(nameone){
nameone = nameone;
}

if(nametwo){
nametwo = nametwo;
}

if(urlone){
urlone = urlone;
}

if(urltwo){
urltwo = urltwo;
}


winContent = "<HTML><HEAD><title>" + title + "</title></HEAD><BODY BGCOLOR=\"#ff1111\"><table width=\"100%\" height=\"100%\" bgcolor=\"#ff1111\" valign=\"middle\"><tr><td><Center><font face=\"Comic Sans MS\"><table width=\"150px\" border=\"0px\" bgcolor=\"#ffeeee\" valign=\"middle\" id=\"a\" style=\"visibility: hidden; cursor: default\" onmouseover=\"document.all.a.style.visibility='visible'; document.all.a.bgColor='#ffdddd'\" onmouseout=\"document.all.a.style.visibility='hidden'; document.all.a.bgColor='#ffeeee'\" onmousedown=\"document.all.a.bgColor='#ffcccc'\" onmouseup=\"document.all.a.bgColor='#ffdddd'; location='" + urlone + "'\"><tr><td height=\"50px\"><center>" + nameone + "</center></td></tr></table><table width=\"150px\" border=\"0px\" style=\"cursor: default\" id=\"m\" bgcolor=\"#ffeeee\" valign=\"middle\" onmouseover=\"document.all.a.style.visibility='visible'; document.all.b.style.visibility='visible'; document.all.m.bgColor='#ffdddd'\" onmouseout=\"document.all.a.style.visibility='hidden'; document.all.b.style.visibility='hidden'; document.all.m.bgColor='#ffeeee'\"><tr><td height=\"100px\"><center>" + menu + "</center></td></tr></table><table width=\"150px\" border=\"0px\" bgcolor=\"#ffeeee\" valign=\"middle\" id=\"b\" style=\"visibility: hidden; cursor: default; on(release)\" onmouseover=\"document.all.b.style.visibility='visible'; document.all.b.bgColor='#ffdddd'\" onmouseout=\"document.all.b.style.visibility='hidden'; document.all.b.bgColor='#ffeeee'\" onmousedown=\"document.all.b.bgColor='#ffcccc';\" onmouseup=\"document.all.b.bgColor='#ffdddd'; location='" + urltwo + "';\"><tr><td height=\"50px\"><center>" + nametwo + "</center></td></tr></table></center></td></tr></table></font></body></html>";

win = window.open()
win.document.open()
win.document.write(winContent)
win.document.close()
}
</script>
<center>
<input type="button" value="Get this menu" onClick="runscript()">
</center>
</body>
</html>


If you read through it, you can see it is a JavaScript that generates a code, and then makes a new page with it. Unfortuanetly, when you save this, it doesn't save the page.
Someone has told me this is because the page isn't really there, it's just a fly in the JavaScript or something. They also said that by using PHP I can make this code actually generate a new page, so it's saveable.

Unfortunately, he hasn't told me how, and I asked 3 weeks ago, and I don't have a clue...

Any help? Thanks you guys :)
MinatureCookie
July 20th, 2006, 20:43
At least some tutorials that could help me?
chaos
July 20th, 2006, 20:49
I don't see why you can't just use a cookie to save the information from the form, or is that not what you were asking?

As for PHP, you can database results and things to that effect, but I am not an expert, so you had better hold out for better advice.

If you really want to learn, start reading:
http://www.w3schools.com/php/php_intro.asp
the_pm
July 20th, 2006, 21:00
I'm not a PHP guy. I can comprehend it when I see it, and I can muddle my way around it, but I wouldn't consider myself an expert. I do know JavaScript quite well, and your friend was correct. A page generated using JavaScript is a bunch of vaporous variables the browser is interpreting briefly. In order for the page to be meaningful (actual HTML content), the variables would need to be passed in such a way that they would be served up using a server process instead of a browser process.

It would work something like this:

1. Create a form with all of the same fields you're now using within prompt boxes (I suppose you could use prompt boxes, but oh they are annoying!).
2. When you submit the form, send the info to a second page. The second page would take each form element and its value and insert them into same script you're currently using within the wincontent variable, only you'd use an echo statement peppered with PHP variables.

It's actually pretty easy to do. Perhaps someone with better syntactic skills can provide a working example of this :)
Anoop
July 21st, 2006, 13:22
Here is a sample html form :

<html>
<body>
<form name="myform" method="POST" action="test.php">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br>

<label for="address">Address</label>
<input type="text" id="address" name="address"><br>

<input type="submit" name="sub" value="Submit"><br>

</form>
</body>
</html>


You can see that the form has a name, action and method attributes.
"name" attribute is used to refer the form. "action" attribute holds the path to the
script which handles the request when we submit the form. It could be an absolute path or a relative path. "method" element is used to specify the HTTP method that
we use to transfer the form contents. If we don't specify the "method" attribute, GET
method will be used.

Here is a sample php file (test.php)


<?
echo $_POST['name'];
echo $_POST['address'];
?>


When the above form is submitted, all the html input elements can be get through
$_POST array. If you are using GET method, the it will be $_GET. Once you get the
values of the form elements, you could manipulate it.
MinatureCookie
July 21st, 2006, 14:10
But surely because the two things you just gave me are tow different pages, you would have to specify to the PHP file where it's supposed to find the 'name' attribute and the 'address' attribute? And even then when it loads the new page the values of the inout types will be lost?

Could you make me an example for my page, and then I might understand easier.
the_pm
July 21st, 2006, 14:40
But surely because the two things you just gave me are tow different pages, you would have to specify to the PHP file where it's supposed to find the 'name' attribute and the 'address' attribute?Submitting the form does exactly that :)

See, when you press submit, the page goes back to the original <form> tag and looks for where to send the information and how to send it. As you can see, the form itself contains two input boxes with names 'name' and 'address'. The values associated with these two items get sent to the page 'test.php', which in turn spits the results back out, along with whatever other code you desire.

I think I can put this together as an example for you. You'd be surprised - you don't necessarily have to be a PHP programmer to understand how it works and work within it :)
the_pm
July 21st, 2006, 15:42
Here you go :)

http://www.paulhirsch.com/ex/menu/

And here is it all wrapped up in a nice, neat little package :)
http://www.paulhirsch.com/ex/menu/menu.zip

Is this what you had in mind?
MinatureCookie
July 21st, 2006, 18:10
That's excactly what I wanted, and I can adapt that to my other templates :).

You did the actual template wrong, but I'll keep that to myself :D

Thanks.
the_pm
July 21st, 2006, 18:18
Out of curiousity, what was wrong with it? I removed the tables, which were unnecessary and inappropriate, moved all of the JavaScript into external functions, and pulled out the inline styles. You should have well-formed markup now :)
MinatureCookie
July 21st, 2006, 18:28
Yes, but while removing the tables etc. You took out the table that was allowing my menu to be in the middle of the page, took out the center's and made the menu options to small, I also had the whole box being a url, without a hand cursor onmouseover.

All tiny things, anyone could have made the mistake :)
the_pm
July 21st, 2006, 18:34
Ahh, see now that's why all of the style elements are inside the CSS document. My whole point was to restructure the menu properly. You can style it however you desire. As for centering vertically, using something similar to the Dead Centre (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) technique is more appropriate than misusing a table.
MinatureCookie
July 21st, 2006, 18:48
Hmm, ok.

Right, I've changed around your script so that it will work better to standards, and it won't work. I've put all the CSS and everything back into 1 file (So that the user can simply save the page instead of having to save all 3, even though it will download all 3 in some broswers), and put in some of the things like height, and it's stopped working. I've left the CSS and JavaScript in another folder, and I've not touched the index.html file. But I've changed the .php file to this -


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php echo $_POST['title']; ?></title>
</head>
<body bgcolor="#ff1111">
<div id="middle" valign="middle" height="100%" width="100%>
<center>
<div width="150px" height="50px" border="0px" bgcolor="#ffeeee" valign="middle" id="a" style="visibility: hidden; cursor: default;" onmouseover="document.all.a.style.visibility='visible'; document.all.a.bgColor='#ffdddd'" onmouseout="document.all.a.style.visibility='hidden'; document.all.a.bgColor='#ffeeee'" onmousedown="document.all.a.bgColor='#ffcccc';" onmouseup="document.all.a.bgColor='#ffdddd'; location='<?php echo $_POST['urlone']; ?>';"><center><span><?php echo $_POST['nameone']; ?></span></center></div>
<div width="150px" height="100px" border="0px" style="cursor: default" id="m" bgcolor="#ffeeee" valign="middle" onmouseover="document.all.a.style.visibility='visible'; document.all.b.style.visibility='visible'; document.all.m.bgColor='#ffdddd'" onmouseout="document.all.a.style.visibility='hidden'; document.all.b.style.visibility='hidden'; document.all.m.bgColor='#ffeeee'"><center><span><?php echo $_POST['menu']; ?></span></center></div>
<div width="150px" height="50px" border="0px" bgcolor="#ffeeee" valign="middle" id="b" style="visibility: hidden; cursor: default;" onmouseover="document.all.b.style.visibility='visible'; document.all.b.bgColor='#ffdddd'" onmouseout="document.all.b.style.visibility='hidden'; document.all.b.bgColor='#ffeeee'" onmousedown="document.all.b.bgColor='#ffcccc';" onmouseup="document.all.b.bgColor='#ffdddd'; location='<?php echo $_POST['urltwo']; ?>';"><center><span><?php echo $_POST['nametwo']; ?></span></center></div>
</center>
</div>
</body>
</html>


Could you tell me what's wrong?
the_pm
July 21st, 2006, 18:54
Here's what the validator says:

Line 6, character 15:

<body bgcolor="#ff1111">
^

Error: there is no attribute bgcolor for this element (in this HTML version)
Line 7, character 25:

<div id="middle" valign="middle" height="100%" width="100%>
^

Error: there is no attribute valign for this element (in this HTML version)
Line 7, character 41:

... ddle" valign="middle" height="100%" width="100%>
^

Error: there is no attribute height for this element (in this HTML version)
Line 7, character 54:

... "middle" height="100%" width="100%>
^

Error: there is no attribute width for this element (in this HTML version)
Line 8, character 1:

<center>
^

Warning: character < is the first character of a delimiter but occurred as data
Line 9, character 1:

<div width="150px" height="50px" border="0px" bgcolor="#ffee ...
^

Warning: character < is the first character of a delimiter but occurred as data
Line 7, character 55:

... middle" height="100%" width="100%>
^

Error: literal is missing closing delimiter
Line 9, character 456:

... POST['urlone']; ?>';"><center><span><?php echo $_POST['nameo ...
^

Error: element center not defined in this HTML version
Line 10, character 42:

... 150px" height="100px" border="0px" style="cursor: default" i ...
^

Error: there is no attribute border for this element (in this HTML version)
Line 10, character 87:

... sor: default" id="m" bgcolor="#ffeeee" valign="middle" onmou ...
^

Error: there is no attribute bgcolor for this element (in this HTML version)
Line 10, character 383:

... .m.bgColor='#ffeeee'"><center><span><?php echo $_POST['menu' ...
^

Error: element center not defined in this HTML version
Line 11, character 414:

... bgColor='#ffdddd'; location='<?php echo $_POST['urltwo']; ?> ...
^

Warning: character < is the first character of a delimiter but occurred as data
Line 11, character 456:

... POST['urltwo']; ?>';"><center><span><?php echo $_POST['namet ...
^

Error: element center not defined in this HTML version
Line 12, character 9:

</center>
^

Error: end tag for element center which is not open; try removing the end tag or check for improper nesting of elements
Line 13, character 6:

</div>
^

Error: end tag for element div which is not open; try removing the end tag or check for improper nesting of elementsFYI, the page I created validates perfectly to XHTML 1.0 Strict standards (and will validate to XHTML 1.1/XML standards, should you choose to go this route). Pretty much everything you added into the markup is non-standard/non-valid and browser-unreadable.

What are you trying to accomplish that the page isn't doing already, besides making it center vertically and removing the cursor from when you roll over the middle of the menu? If you can identify what other needs you have, maybe we can come up with the right way to make them happen :)
MinatureCookie
July 21st, 2006, 19:01
In the first thing I sent you, everything there is what I wanted, but it's unsavable.

...So if you run my first script through a browser, you will see everything that I want.
the_pm
July 21st, 2006, 19:04
Ahh. You're saying it's unsavable because all of the functions and style element are external, right?

That's easy enough to change. It's just a matter of taking the style elements and putting them inline. This typically isn't a good idea, but this is how you would self-contain it. I'll work up an alternate version of the output page now.
the_pm
July 21st, 2006, 20:16
I have it all complete. I'm just figuring out the best way to center vertically on the version with everything inline. I'll wrap it up, link it and zip it as soon as I have this part figured out :)
the_pm
July 21st, 2006, 20:54
Christ. I made that a lot harder than it really is. I was playing with setting height on the HTML element inline using a script - an exercise in frustration. I should have just followed my own advice, and used the markup to which I linked earlier. Once I did this, I had it figured out in about two minutes. Oh well :)

Here you go:

1. http://www.paulhirsch.com/ex/menu/index1.html - The original version, with everything split out externally.

2. http://www.paulhirsch.com/ex/menu/index2.html - A modified version, with styles and scripts within the page head (savable).

3. http://www.paulhirsch.com/ex/menu/index3.html - Another modified version, with all styles and scripts kept inline (savable, but definitely not as clean as #2)

4. http://www.paulhirsch.com/ex/menu/menu.zip - Updated version with everything in it. You'll still want to apply your exact font styles and whatnot to the CSS in there, but the functionality and position of everything should be perfect now :)

Edit: Everything is to standards, and validates perfectly :)
MinatureCookie
July 21st, 2006, 21:23
Right, that's all fine to what I can see, except this one thing, Those div's don't have a set height, and when I try to set them a height, nothing happens.... So...

(By the way I'm using #3)
the_pm
July 21st, 2006, 21:38
The height is currently being set by the padding on the elements contained within them. Since text is scalable, it make more sense to make the height scalable as well instead of setting it explicitly, and using padding in this manner makes it happen gracefully. But removing the padding and setting heights should work just fine, though text resizing might break it (and this is something you can't control on the users' end).
MinatureCookie
July 21st, 2006, 21:41
Right, go it.

Thanks for your help (Though because you've used 'em's, I have no idea what they are as I have never used them before, so roughly, how many pixels are in one 'em'? And what is an 'em'? (px = pixels, em=?")

Well, is there anything wrong with the following script?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title><?php echo $_POST['title']; ?></title>
</head>
<body style="background:#F11 ; color:#000000 ; height:100% ; margin:0 ; padding:0 ; width:100%">

<div style="position:absolute ; top:50% ; left:0 ; width:100%" id="horizon">

<div style="font-weight:bold ; left:50% ; margin-left:-75px ; position:absolute ; top:-130px ; width:150px" id="menu" onmouseout="document.getElementById('nav1').style.visibility=' hidden';document.getElementById('nav2').style.visi bility='hidden';">
<div id="nav1" onmouseover="document.getElementById('nav1').style.visibility=' visible'; document.getElementById('nav2').style.visibility=' hidden'; this.style.background='#FEEFEE';" style="background:#FFFFFF; text-align: center; visibility: hidden; color:#000000 ; display:block ; text-decoration:none; width: 150px; height: 50px;" onmouseout="this.style.background='#FFFFFF';" onmouseup="location='<?php echo $_POST['urlone']; ?>'"><?php echo $_POST['nameone']; ?></div>
<div style="background:#FFFFFF ; color:#000000 ; text-align:center" id="navCenter" onmouseover="document.getElementById('nav1').style.visibility=' visible';document.getElementById('nav2').style.vis ibility='visible';" onmouseout="document.getElementById('nav1').style.visibility=' visible';document.getElementById('nav2').style.vis ibility='visible';"><span style="display:block ; padding:1em 0 ; width:150px; height: 100px;"><?php echo $_POST['menu']; ?></span></div>
<div id="nav2" onmouseover="document.getElementById('nav2').style.visibility=' visible'; document.getElementById('nav1').style.visibility=' hidden'; this.style.background='#FEEFEE';" style="background:#FFFFFF ; color:#000000 ; display:block ; text-decoration:none ; width:150px; height: 50px; text-align:center ; visibility:hidden" onmouseout="this.style.background='#FFFFFF';" onmouseup="location='<?php echo $_POST['urltwo']; ?>'"><?php echo $_POST['nametwo']; ?></div>
</div>

</div>

</body>
</html>

Because this isn't working, it's as if PHP isn't on my server, it's just coming up actually writing the php tags... :S
the_pm
July 21st, 2006, 21:44
You're welcome :)

1 em = The height/width of the capital letter 'M' in whatever font you're using. So, setting 1em padding on top and bottom of a line of text makes that text take up three lines total.
the_pm
July 21st, 2006, 21:48
You can't look at the output page without running one of the index pages first. The variables won't fill in without a form sending them to the page first :)
MinatureCookie
July 21st, 2006, 21:59
I do, I run the index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Menu Generation Script Sample</title>
</head>
<body>
<form action="output3.php" method="post">
<p><label for="title">Menu Title</label>: <input type="text" name="title" value="Title" /></p>
<p><label for="menu">Menu Button Text</label>: <input type="text" name="menu" value="Menu" / value=""></p>
<p><label for="nameone">First Menu Option URL</label>: <input type="text" name="nameone" value="Yahoo" /></p>
<p><label for="urlone">First Menu Option Title</label>: <input type="text" name="urlone" value="http://www.yahoo.com" /></p>
<p><label for="nametwo">Second Menu Option URL</label>: <input type="text" name="nametwo" value="Google" /></p>
<p><label for="urltwo">Second Menu Option Title</label>: <input type="text" name="urltwo" value="http://www.google.com" /></p>
<p><input type="submit" value="Generate Menu" /></p>
</form>
</body>
</html>

Then the output comes up as I said, as if PHP isn't installed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php echo $_POST['title']; ?></title>
</head>
<body bgcolor="#ff1111">
<div id="middle" valign="middle" height="100%" width="100%>
<center>
<div width="150px" height="50px" border="0px" bgcolor="#ffeeee" valign="middle" id="a" style="visibility: hidden; cursor: default;" onmouseover="document.all.a.style.visibility='visible'; document.all.a.bgColor='#ffdddd'" onmouseout="document.all.a.style.visibility='hidden'; document.all.a.bgColor='#ffeeee'" onmousedown="document.all.a.bgColor='#ffcccc';" onmouseup="document.all.a.bgColor='#ffdddd'; location='<?php echo $_POST['urlone']; ?>';"><center><span><?php echo $_POST['nameone']; ?></span></center></div>
<div width="150px" height="100px" border="0px" style="cursor: default" id="m" bgcolor="#ffeeee" valign="middle" onmouseover="document.all.a.style.visibility='visible'; document.all.b.style.visibility='visible'; document.all.m.bgColor='#ffdddd'" onmouseout="document.all.a.style.visibility='hidden'; document.all.b.style.visibility='hidden'; document.all.m.bgColor='#ffeeee'"><center><span><?php echo $_POST['menu']; ?></span></center></div>
<div width="150px" height="50px" border="0px" bgcolor="#ffeeee" valign="middle" id="b" style="visibility: hidden; cursor: default;" onmouseover="document.all.b.style.visibility='visible'; document.all.b.bgColor='#ffdddd'" onmouseout="document.all.b.style.visibility='hidden'; document.all.b.bgColor='#ffeeee'" onmousedown="document.all.b.bgColor='#ffcccc';" onmouseup="document.all.b.bgColor='#ffdddd'; location='<?php echo $_POST['urltwo']; ?>';"><center><span><?php echo $_POST['nametwo']; ?></span></center></div>
</center>
</div>
</body>
</html>


Is there maybe something wrong with the information being sent by the form?
the_pm
July 21st, 2006, 22:00
Are you running this on your computer, or did you upload it to a Web server? PHP will not parse unless it is on a Web server, or your home computer is set up to parse it.
MinatureCookie
July 21st, 2006, 22:03
PHP does work on my computer, and everything, but I'm an idiot and I just remembered while I've been typing away that I can't just run it from the www. folder, I have to type in http://localhost, so I'm going to see if it that works quickly...

Edit:
Yup, all works, beside font issues, minor valignments and stuff, :lol: , I've made some stupid mistakes today, I blame because it's the end of school today, partying all day... Ah well, thanks for your help :D
the_pm
July 21st, 2006, 22:07
Excellent. I'm glad you got that all sorted out :)