Site From Scratch

PHP and XHML, Mixing Their Uses

Page 1 of 1

6 Replies - 757 Views - Last Post: 06 February 2010 - 04:37 AM Rate Topic: -----

#1 DaneAU  Icon User is offline

  • Great::Southern::Land
  • member icon

Reputation: 278
  • View blog
  • Posts: 1,588
  • Joined: 15-May 08

Site From Scratch

Post icon  Posted 29 January 2010 - 01:26 AM

G'day fellow DreamInCoders

I have begun work on a website for a family member and am integrating it with MySQL, i am fine with that part however at the moment i am going through and creating php pages, such as index.php, contact.php etc...

My question regards the code below as i am not 100% sure if this is the way you are meant to integrate php and html together. For instance in the links section <ul><li>#</li></ul> i will be pulling pages from the database, same with the content sections. As of current i am using echo ''; to display html tags and format the page using my css, although each pages is relatively small. I think for future web coding it would be good to get a bit of perspective on the correct way to approach what i am doing. So i will post the code below.

<?php
	echo '<head>';
	echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />';
	echo '<link rel="stylesheet" media="all" type="text/css" href="css/mysite.css" />';
	
		echo '<title>MySite</title>';
		
			echo '<div id="banner"><h1></h1></div>';
	echo '</head>';
	echo '<body>';
		echo '<div class="menu">';
			echo '<ul>';
			echo '<li><a href="index.php">Main</a></li>';
			echo '<li><a href="#">Services</a></li>';
			echo '<li><a href="products.php">Products</a></li>';
			echo '<li><a href="gallery.php">Photos</a></li>';
			echo '<li><a href="#">Qualifications</a></li>';
			echo '<li><a href="#">Affiliates</a></li>';
			echo '<li><a href="#">About Me</a></li>';
			echo '</ul>';
		echo '</div>';
		echo '<div class="content"><br>';
			echo '<h2>Introduction</h2>';
			echo '<img src="assorted-images/image.jpg" />';
			echo '</div>';
		echo '</div>';
		echo '<div id="footer"><br><br>This Site is &copy; 2010 MemorableMakeup<br>Webdesign By : <a href="http://www.examplesite.org" target="_blank">bbq</a></div>';
	echo '</body>';

?>


As you can see i have not bothered connecting to the DB, however once i confirm whether this is the right or wrong method i will move on to that.

Cheers for the advice in advance :pirate:

Is This A Good Question/Topic? 0
  • +

Replies To: Site From Scratch

#2 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 4949
  • View blog
  • Posts: 11,356
  • Joined: 16-October 07

Re: Site From Scratch

Posted 29 January 2010 - 02:59 AM

As a rule of thumb, you write plain HTML as plain HTML. PHP is used for the dynamic content, which you currently don't have any of. How markup is mixed with code is a question of style, but most people try to keep them separate as much as they can.

I would write your page something like this:
<?php
	// include ("common.php");
	
	// these two functions would be in common
	function showHead($title) {
		echo '<head>';
		echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />';
		echo '<link rel="stylesheet" media="all" type="text/css" href="css/mysite.css" />';
		echo "<title>$title</title>";
		echo '</head><body>';
		echo '<div id="banner"><h1>' . $title . '</h1></div>';
	}

	function showFoot() { 
		$yy = date('Y'); ?>
		<div id="footer">
			This Site is &copy; <? echo $yy; ?> MemorableMakeup
			<br />Webdesign By : <a href="http://www.examplesite.org" target="_blank">bbq</a>
		</div></body>
	<? 
	}

	showHead('MySite');
?>
<div class="menu">
	<ul>
		<li><a href="index.php">Main</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="products.php">Products</a></li>
		<li><a href="gallery.php">Photos</a></li>
		<li><a href="#">Qualifications</a></li>
		<li><a href="#">Affiliates</a></li>
		<li><a href="#">About Me</a></li>
	</ul>
</div>
<div class="content">
	<h2>Introduction</h2>
	<img src="assorted-images/image.jpg" />
</div>

<? showFoot(); ?>


In this way, I can have a consistent look to all the pages.

Many people use PHP for what amounts to little more than server side includes. Which is fine, if it means easier maintenance and less typing.
Was This Post Helpful? 1
  • +
  • -

#3 DaneAU  Icon User is offline

  • Great::Southern::Land
  • member icon

Reputation: 278
  • View blog
  • Posts: 1,588
  • Joined: 15-May 08

Re: Site From Scratch

Posted 29 January 2010 - 03:14 AM

I see, that makes a lot of sense, yes at the moment i have not implemented my dynamic content as i was not sure exactly how to approach it in terms of structuring my code, i will apply what you have posted and attempt to get it working effectively.

I am implementing a comments page, which will be updated weekly, i have it working on its own, just listings from the database and limiting it to say 5 per page with a next link to retrieve the next ones.

Just curious as i applied what i did above in the initial post to actually run some java script. However it does not work the way i have done it, however it does work when using HTML. The thing i am integrating is a flash gallery. found here, now the example gallery they give is done on a html page, so obviously i wish to use it on a php page, i figure i could do the same as you have shown with the menu lists above. However just thought i should double check in case.
Add this to the head of your webpage: 
<!-- Location of javascript. -->
<script language="javascript" type="text/javascript" src="swfobject.js" ></script> 

Add this to the body of your webpage, where you want player to appear: 
<!-- Div that contains gallery. -->
<div id="gallery" align="center">
<h1>No flash player!</h1>
<p>It looks like you don't have flash player installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
</div>

<!-- Script that embeds gallery. -->
<script language="javascript" type="text/javascript">
var so = new SWFObject("flashgallery.swf", "gallery", "640", "480", "8"); // Location of swf file. You can change gallery width and height here (using pixels or percents).
so.addParam("quality", "high");
so.addParam("allowFullScreen", "true");
so.addParam("wmode", "transparent");
so.addVariable("content_path","img"); // Location of a folder with JPG and PNG files (relative to php script).
so.addVariable("color_path","default.xml"); // Location of xml file with settings.
so.addVariable("script_path","flashgallery.php"); // Location of php script.
so.write("gallery");
</script>


Thats the basics of how to run it, i did the following
echo '<!-- Div that contains gallery. -->';
			echo '<div id="gallery" align="center">';
				echo '<h1>No flash player!</h1>';
				echo '<p>It looks like you dont have flash player installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>';
			echo '</div>';
			
			
			
			echo '<script language="javascript" type="text/javascript">';
			echo 'var so = new SWFObject("flashgallery.swf", "gallery", "700", "600", "9"); // Location of swf file. You can change gallery width and height here (using pixels or percents).';
			echo 'so.addParam("quality", "high");';
			echo 'so.addParam("allowFullScreen", "true");';
			echo 'so.addParam("wmode", "transparent");';
			echo 'so.addVariable("content_path","img"); // Location of a folder with JPG and PNG files (relative to php script) or a link to Flickr photostream (for example "http://www.flickr.com/photos/username/" or "http://www.flickr.com/photos/username/sets/setid/").';
			echo 'so.addVariable("color_path","default.xml"); // Location of xml file with settings.';
			echo 'so.addVariable("script_path","flashgallery.php"); // Location of php script (not requred if you work with Flickr).';
			echo 'so.write("gallery");';
			echo '</script>';


However it does not seem to work, it comes up with the Install Flash Player part, the code is the same as my normal html version of it works perfect. The reason i wish to use PHP for this section is so the site owner can simply upload directories of files and users can select dynamically which directory they wish to view.

As of current the directory the gallery uses is "img" denoted in the echo 'so.addVariable("content_path","img"); so i am using php so i am able to set this variable depending on what is selected. If that makes sense :)

Thanks for the help baavgai :)
Was This Post Helpful? 0
  • +
  • -

#4 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 4949
  • View blog
  • Posts: 11,356
  • Joined: 16-October 07

Re: Site From Scratch

Posted 29 January 2010 - 04:15 AM

First, you don't really need comments in your own code. Second, you actually screwed yourself by using them. :P

e.g.
echo 'var so = new SWFObject("flashgallery.swf", "gallery", "700", "600", "9"); // Location of swf file. You can change gallery width and height here (using pixels or percents).';
echo 'so.addParam("quality", "high");';


Renders as:
var so = new SWFObject("flashgallery.swf", "gallery", "700", "600", "9"); // Location of swf file. You can change gallery width and height here (using pixels or percents).so.addParam("quality", "high");


So you end up with a lot of comment. Be aware, echo does not include a line feed; you have to do that yourself.
Was This Post Helpful? 1
  • +
  • -

#5 Auzzie  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 43
  • View blog
  • Posts: 573
  • Joined: 20-January 09

Re: Site From Scratch

Posted 29 January 2010 - 04:25 AM

View Postbaavgai, on 29 Jan, 2010 - 09:59 AM, said:

As a rule of thumb, you write plain HTML as plain HTML. PHP is used for the dynamic content, which you currently don't have any of. How markup is mixed with code is a question of style, but most people try to keep them separate as much as they can.

I would write your page something like this:
<?php
	// include ("common.php");
	
	// these two functions would be in common
	function showHead($title) {
		echo '<head>';
		echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />';
		echo '<link rel="stylesheet" media="all" type="text/css" href="css/mysite.css" />';
		echo "<title>$title</title>";
		echo '</head><body>';
		echo '<div id="banner"><h1><?php  echo $title; ?></h1></div>';
	}

	function showFoot() { 
		$yy = date('Y'); ?>
		<div id="footer">
			This Site is &copy; <? echo $yy; ?> MemorableMakeup
			<br />Webdesign By : <a href="http://www.examplesite.org" target="_blank">bbq</a>
		</div></body>
	<? 
	}

	showHead('MySite');
?>
<div class="menu">
	<ul>
		<li><a href="index.php">Main</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="products.php">Products</a></li>
		<li><a href="gallery.php">Photos</a></li>
		<li><a href="#">Qualifications</a></li>
		<li><a href="#">Affiliates</a></li>
		<li><a href="#">About Me</a></li>
	</ul>
</div>
<div class="content">
	<h2>Introduction</h2>
	<img src="assorted-images/image.jpg" />
</div>

<? showFoot(); ?>


In this way, I can have a consistent look to all the pages.

Many people use PHP for what amounts to little more than server side includes. Which is fine, if it means easier maintenance and less typing.



Another way which quite a few people do what Baavgai shown you is by separating the HTML and PHP more like this:

<?php
	// include ("common.php");
	
	// these two functions would be in common
	function showHead($title) {
?>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" media="all" type="text/css" href="css/mysite.css" />
		<title>$title</title>
		</head><body>
		<div id="banner"><h1>' . $title . '</h1></div>
<?php
	}

	function showFoot() { 
		$yy = date('Y'); ?>
		<div id="footer">
			This Site is &copy; <?php echo $yy; ?> MemorableMakeup
			<br />Webdesign By : <a href="http://www.examplesite.org" target="_blank">bbq</a>
		</div></body>
	<? 
	}

	showHead('MySite');
?>
<div class="menu">
	<ul>
		<li><a href="index.php">Main</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="products.php">Products</a></li>
		<li><a href="gallery.php">Photos</a></li>
		<li><a href="#">Qualifications</a></li>
		<li><a href="#">Affiliates</a></li>
		<li><a href="#">About Me</a></li>
	</ul>
</div>
<div class="content">
	<h2>Introduction</h2>
	<img src="assorted-images/image.jpg" />
</div>

<? showFoot(); ?>


But it is totally a case of preference, the more you can separate the two, the better you code will look and in my opinion the less confusing it can be.

This post has been edited by Auzzie: 29 January 2010 - 04:26 AM

Was This Post Helpful? 1
  • +
  • -

#6 DaneAU  Icon User is offline

  • Great::Southern::Land
  • member icon

Reputation: 278
  • View blog
  • Posts: 1,588
  • Joined: 15-May 08

Re: Site From Scratch

Posted 29 January 2010 - 05:46 AM

View Postbaavgai, on 29 Jan, 2010 - 03:15 AM, said:

First, you don't really need comments in your own code. Second, you actually screwed yourself by using them. :P

e.g.
echo 'var so = new SWFObject("flashgallery.swf", "gallery", "700", "600", "9"); // Location of swf file. You can change gallery width and height here (using pixels or percents).';
echo 'so.addParam("quality", "high");';


Renders as:
var so = new SWFObject("flashgallery.swf", "gallery", "700", "600", "9"); // Location of swf file. You can change gallery width and height here (using pixels or percents).so.addParam("quality", "high");


So you end up with a lot of comment. Be aware, echo does not include a line feed; you have to do that yourself.


AHahah yea that makes sense, stupid error that one. Thanks for pointint it out :)

@Aussie - Cheers, thats the whole reason i posted, i guess i was looking for an answer on the convention more than anything else, however obviously a few other discrepancies have been pointed out which i am grateful for :), i will work on the code and post back if i encounter any issues :)

Cheers to both of you for your valued advice B)
Was This Post Helpful? 0
  • +
  • -

#7 Guest_realturk*


Reputation:

Re: Site From Scratch

Posted 06 February 2010 - 04:37 AM

bad code... no php in html code use...

html only <html> </html>
php only <?php ?>
Was This Post Helpful? 0
Page 1 of 1