Jump to content

Combining PHP and HTML (For Beginners)


webmaster1

Recommended Posts

Hi Freaks!

 

I have the following page layout:

 

ka_freaks1.jpg

 

The areas in red are php related sections. The PASSWORD FORM (regular form that posts to a php page) links to a private page and the UPDATED CONTENT will be pulled into the page from database using PHP.

 

Should I just insert the PHP in between my HTML code or should I use the include function (which I have no clue of)?

 

Can I do more than one thing with PHP in the same page like I'm trying and if so what prevents the code blocks from conflicting with each other?

 

I'm worried that the PHP will mess the layout of my site.

 

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/132578-combining-php-and-html-for-beginners/
Share on other sites

You can think of HTML in PHP scrips as just echo'd strings.  e.g.

 

<?php
$foo = 'bar';
// do some other php stuff
?>
<html>
<head>
<?php
$baz = 'boo';
// do some other php stuff

 

is the same as:

 

<?php
$foo = 'bar';
// do some other php stuff

echo '
<html>
<head>
';

$baz = 'boo';
// do some other php stuff

 

Hope that helps a little bit. 

 

There are several ways to structure PHP code.  The new hotness at the moment is MVC (Model-View-Controller) where you try your best to completely separate the business logic (Controller, (the php code)) from the html (View, (or templates)).

Roadblock, I'm using an image (w/rollover effect) as a button instead of a regular submit button:

 

<TABLE>
<TR>
<TD><label style="font-family:Trebuchet MS, Arial; font-size:12px;">Username:</label></TD>
<TD><input name="username" type="text" class="text"></TD>
</TR>
<TR>
<TD><label style="font-family:Trebuchet MS, Arial; font-size:12px;">Password:</label></TD>
<TD><input name="password" type="password" class="text"></TD>
</TR>
<TR>
<TD></TD>
<TD><A HREF="#null" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
       <IMG name="img1" BORDER=0  width="70" height="20" SRC="images/loginbutton1.jpg" alt="Click to Sign In">
       </A>
</TD>
</TR>
</TABLE>

 

How do I set my image as a button to cause my form to post? I'm not quite sure where to insert my form tags in relation to the table either.

 

Here's the javascript that controls the mouseover effect:

 

<SCRIPT LANGUAGE = "JavaScript">
<!--
if (document.images) {
img1on = new Image();           // The onmouseover image
img1on.src = "images/loginbutton2.jpg";  

img1off = new Image();          // The normally seen image
img1off.src = "images/loginbutton1.jpg"; 

  }				  //This function changes the image when over.
    function imgOn(imgName) {
            if (document.images) {
            document[imgName].src = eval(imgName + "on.src");
            }
    }				   //This function changes the image back when off.
    function imgOff(imgName) {
            if (document.images) {
            document[imgName].src = eval(imgName + "off.src");        
            }
    }
// -->
</SCRIPT>

 

 

 

Great link Flyhoney!

 

I've rebuilt it as follows:

 

passwordform.php

 

		
<!--PASSWORD FORM BEGINS HERE-->
			<form action="valid.php" method="post">
			<fieldset>
				<ol>
				<li>
				<label for="username">Username:</label>
				<input type="text" name="username" id="username">
				</li>
				<li>
				<label for="password">Password:</label>
				<input type="password" name="password" id="password">
				</li>
				<li>
				<input type="image" src="images/loginbutton1.jpg" alt="Click to Sign In">
				</li>
				</ol>
			</fieldset>	
			</form>
<!--PASSWORD FORM ENDS HERE-->

 

passwordform.css

/* passwordform */

fieldset {
position:relative;
left:280px;
top:30px;
margin: 0 0 0 0;  
padding: 0;
border-style:none;
} 

fieldset ol {
padding-top:0x;  
list-style: none; 
} 

fieldset li {  
padding-bottom:0px; 
} 

fieldset.submit {  
border-style: none; 
}

label {  
float: left;
width:60px;    
margin-right: 10px; 
font-family:Trebuchet MS, Arial;
font-size:12px;
}

 

I still can't work out how to tie the button mouseover / images swap effect  in without effecting my PHP.

 

This is probably a CSS related (and more of an indirect PHP) question though.

 

I geuss I can leave it as a static image.  :'(

 

 

I found it!

 

After hours of searching and trying different scripts I finally found a neat method to adding a rollover effect on a submit button that uses the INPUT type="image" approach.

 

It uses an external *.js file.

 

http://www.dynamicdrive.com/dynamicindex15/domroll2.htm

 

SOLVED!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.