While writing code in a file that would comprise of PHP, HTML, CSS & JavaScript, in what order each must appear? What are the best practices for separating the presentation and the logic?
Sometimes external .js and other files are using in the link tag. Where these link tags must appear?
This doesn't answer the question directly but the article that Rasmus Lerdorf (creator of PHP) wrote has some nice examples to follow.
Clean and simple design. HTML should look like HTML. Keep the PHP code in the views extremely simple: function calls, simple loops and variable substitutions should be all you need
http://toys.lerdorf.com/archives/38-The-no-framework-PHP-MVC-framework.html
most if not all javascript should be external files linked from either the header (between the tags) or all the way at the bottom near the closing tag depending on how youre enhancing the page.
css should never be inline in my opinion. start with external css files linked from the header, and if you must go to the file level. ie.
<head>
<style type="text/css">
/* CSS CODE HERE */
</style>
</head>
as far as php best practices, dont do a database call in your html templates. keep the templates simple php. if's for's to echo out your database results.
Your tags should (must?) go in the head of your page.
There are a handful of exceptions, but most of the time your CSS will be in an external .css file that you'll link like the .js files you mention. The order you need to load your external scripts may depend on their content. For example, if you're using jQuery plugins, you'll need to load the jQuery library before the plugin file.
PHP and HTML will often be intertwined within a document. There are discussions on SO and elsewhere over how HTML should be displayed within PHP (e.g.
?> <!--html goes here--> <?php
or
echo '<p>This is my html</p>';
..but I've never seen a definitive answer to either method. Use whichever makes you file legible.
All of this must be in different files except of very small portions (for example js in html).
The best place for link tag is in head section of html.
Related
Certain DIVs within a website can usually be constant...
I.E. The footer of a webpage generally doesn't change and should be standard across all pages.
Within a websites CSS, you'll have things like;
.FooterDIV {
Background: #FFFFFF;
Color: #000000;
}
I was wondering what the best way is to specify the standard text within a DIV, is this possible in CSS alone? PHP perhaps?
After some 'Googling' I have found no clear answer - it's difficult to know how to word this.
A simple approach is to put those "global" elements into a seperate php file each, which you include in all of your pages. For example:
footer.php
<div>Copyright 2012, Acme Corp.</div>
Then simply add the following line wherever you want the footer to appear
<?php include('footer.php'); ?>
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation semantics (the look and formatting) of a
document written in a markup language.
i.e. you should CSS to style your data. You shouldn't be using it to specify what your data is. Surely there's a better way of approaching your problem? Like splitting up reoccurring elements/divs on your site into include files?
That is usually done server side, in PHP for your case, you create a function that writes your html footer, you then call this function for any of your php pages.
Also if you are using a template engine, like when you are using a MVC PHP framework, then the template engine will usually let you create a template file with your footer content, and you will include that same file on all your different page templates.
What you are describing can't be done in css. If you're using php, I would seperate the footer out into at seperate file, e.g. 'footer.php' and then include that at the bottom of each of your pages.
I have a php file and a bunch of HTML elements that include:
header
css
a "spacer" element used repeatedly, static
a bunch of templates that will take arguments from the PHP code for what to insert
Basically I'm wondering what the right way to factor all these files in. I'm guessing I should have a file.css in my folder that the php will slurp up into memory and drop in the header information. Should the spacer element be saved as "spacer.html", and the PHP will slurp up one copy of it into a string and drop it into the HTML as necessary? Or should all of these just exist as string constants in the PHP?
It's a little trickier for the dynamic "template" elements because I'm not sure how to separate the HTML and let it have markers that the arguments get dropped into.
You should look into MVC. A popular one right now is CodeIgniter. The idea is you take those HTML "templates" and create (V)iews. PHP uses a (C)ontroller to direct the user and call on (M)odels to fetch data, then send the appropriate variables to the (V)iews for the browser.
I've noticed some of the other answerers (SP) mentioned MVC. MVC is incredibly important because it allows you to separate your business logic from your "view" display/UI layer and your database logic from your business logic.
Like, AlienWebguy, I'd recommend Code Igniter, but there are a number of other good frameworks out there for PHP.
As far as what it appears that you're asking is how you should structure both your view layer and business logic. If I have something common like a header and footer, I'll put them in
view/include/header.php
and
view/include/footer.php
The header file will generally contain the <html> tag, the style sheet link(s), any common javascript script files, and a common header (like the logo and navigation). The footer file will generally contain the copyright info, any footer links, and the </body></html>.
Generally what you should look to do in creating your views effectively is to have them process model objects to display the HTML, and generate absolutely no HTML in your controller layer. E.G.
<table>
<?php
foreach ($users as $user) {
printf('<tr><td>%s</td><td>%s</td></tr>', $user->id, $user->user_name);
}
?>
</table>
Doing that makes things a lot cleaner by avoiding interspersing concerns at the wrong "layer".
The other thing you can do, if you're not interested in writing straight PHP in your views, is you can use a templating engine. Code igniter includes support for (but you don't have to use) a template engine.
I usually suggest using some good ol' php includes to tackle this.
File structure wise, I'd probably have an index.php file -- which (without knowing much about your templates in #4) would outline the page. You could call in the header.html page or put the header right in the index.php file.
The css file would best be named: style.css (this is pretty standard) and you can call that from your header file.
Not sure if you're getting at this, but you can include HTML in a .php file. You'd just name the file something like: index.php and then your code can be:
<p>This is HTML.</p>
<?php echo("This is PHP."); ?>
And intermix them throughout.
In HTML is there such a line of code that will do the same thing as PHP's require_once? I'm just curious because there are some lines of codes that I want to duplicate through multiples sheets without needing to require myself to type it each page.
I know I can do it via PHP, but I am looking for an HTML variant? Is there such a beast or am I barking up the wrong tree?
That depends on what you want to include. Including a PHP-File is not possible, if you want to include a CSS stylesheet, use:
<link rel="stylesheet" type="text/css" href="yourstylefile.css" />
and for a Javascript file
<script type="text/javascript" src="yourscriptfile.js"></script>
Of course you have to put that code between the header-tags.
No, there is no include mechanism in HTML. Unless you count SSI.
Edit: wait, "sheets"? You mean CSS?
Yeah, SSI is the closest you're going to get. However, there are many non-server-side ways to get around this. Several web development applications have html templating systems that replicate server-side includes on the development side. For example, dreamweaver allows you to insert repeatable regions into HTML templates. When you modify the "included" file, Dreamweaver will modify all HTML files that use that block. As this is not a true include, but rather an HTML-updating system, you do have to then re-upload these files if you use a remote server, but if you have to stick to plain HTML it can make projects much more manageable and is much better than using iframes.
Lastly, there is also the option of having Javascript build a repeating block of code. You can simply include a common javascript library on every page <script type="text/javascript" src="templater.js"></script> and have it build the element on the client's side (either with an innerHTML call or inserting elements into the DOM). This has the obvious downside that
It requires Javascript to work
It might mess with SEO
It may slow down page loads (from the client side anyhow)
Using a proper include in a server side language is of course the best approach, but in a pinch these are both potential alternatives.
Technically you can create an iframe on your page which will load and handle a separate page but it does not function like include or require once. And to this I know of no alternatives.
i would like to know your point of view on where to position the PHP code on .php page and why?
a) top of the document
b) just above the html elements where i am going to use it.
thank you.
c) In a different file and use a template engine such as smarty
http://www.smarty.net/
Your life will be beautiful and awesome after smarty.
EDIT : I won't downvote other solutions , but it's a very ugly anti-pattern to mix html code with php, you have good, stable and easy solutions to avoid that, use it now or your website will be a big mess of spaghetti code.
Depends on the purpose.
Database query related posts that determine the contents within the part, I call it before there is any input. Also any type of PHP commands that contain raw header information should be presented before any output is made.
Any content related stuff can be positioned anywhere on the page. PHP code is really everywhere - where ever, and however you want to create the HTML from your PHP dynamically.
My pages usually take this structure:
<?
include 'start.php';
$pagetitle = 'the services we offer (branding, web, print etc.)';
$metatitle = 'Our Creative Services (branding/logo, web, print)';
$scriptinclude = 'whatwedo.js';
include 'header.php'; // contains the <body><head></head><body> and a few more elements to start the header/menubar etc.
?>
<div class="full_grid" id="index_slide">
// content here, mixed with PHP if you like...
</div>
<?
include 'footer.php'; // contains the footer HTML, as well as </body></html> etc. to wrap things up.
?>
I put as much code as I can at the top. And only use php withi HTML where I need loops or output data.
This gives me a better overview of the code and it's easier to work with.
Keep your code and HTML as separate as possible. Have them in entirely separate files where you can.
Your HTML should be as much pure HTML as possible, and your PHP code should contain as little HTML as possible.
Obviously, you're producing a web page, so there will have to be some mixing, but keep it as limited as possible: The only code you should mix in with your HTML should be the one-liners to place specific bits of PHP-generated code into your HTML template.
It completely depends what you're doing with it. Personal preference for me is to create any functions I need at the top and then scatter inline php throughout the document calling the functions at the top of the page.
If something needs calculating and it can be done at the top, it's much easier to read and debug if you keep it all in one place. And keeping this the same throughout all your files will help too. What you could do is just include a config file at the top of the page with any site-wide functions you need too, so you don't have to copy and paste through all your files.
If you are only using one PHP file then definitely put all PHP code at the top, then the HTML below with variables where necessary.
For example, $title = 'Page title'; at the top of the page, then <h1><?=$title?></h1> in the HTML portion of the page.
However a better solution is to have two (or more) files. The main one contains all the PHP logic to grab/process data, while the second one is a "view" file containing mostly HTML. The simply include your view file from the main PHP file.
I am assigned a task to revise a website and at present, I am working on index.html page. the previous coder has mixed a lot of JavaScript and CSS code in between and it is becoming difficult to read.
I want to know whether it is necessary to include <script> tags and CSS code in between? What about PHP code? Where each must reside?
Edited:
If multiple JavaScript and CSS files are to be referenced, how to include in a single <script> or <link> tag?
Keep your JavaScript inside a separate file, keep your CSS inside a separate file and have them both referenced from within your HTML. The order of these referenced files relative to the HTML does not matter. As for the PHP, I wouldn't worry too much about it being mixed in with the HTML (just keep your functions, classes and other scripts in separate files and include them with PHP in the header).
If is the same CSS on each page, having an external file that caches help to save bandwidth. If there are different rules intermixed with the HTML for different element types you may have some conflicts, but if you rewrite it, it will end up being a lot cleaner and easier to maintain later.
I like to keep a file structure like so:
index.php
/css
main.css
othercssfiles.css
/javascript
main.js
otherjsfiles.js
/template
header.php
footer.php
/scripts
functions.php
otherscripts.php
Then in my header file, I would place HTML code referencing the files in the CSS and JavaScript directories. And in the root directory my index.php file would include(); the header at the top and the footer at the bottom.
otherjsfiles.js and othercssfiles.css can be used in cases where a single page may have a specific requirement, requiring a lot of CSS and JavaScript that most other pages don't need. It means other pages do not need to fetch unnecessary data and it keeps page specific code separate from the entire site's code.
I have found this an easy way to keep track of various aspects of the code that makes up an HTML page, but naturally, you will find ways to organize it that makes sense to you.
Edited:
If multiple JavaScript and CSS files
are to be referenced, how to include
in a single or tag?
It would be better to combine them into a single file to conserve HTTP requests (which take time). Then you would just include those CSS and JavaScript files like normal.
<script type="text/javascript" src="/javascript/main.js"></script>
<link rel="stylesheet" href="/css/main.css">
Additionally, it seems like you could use the services of a CSS beautifier for readability, a JavaScript beautifier for readability and a JavaScript minifier for when you are done reading it (keep the readable version) and want to save bandwidth. These tools are especially helpful when you are working on maintaining a website you did not create.
Rarely is there a valid reason for CSS be mixed into the HTML - a separate file is generally best.
With JavaScript: there may or may not be a good reason for it being mixed into the code. E.g. if a piece of script is dependant on running after one element of HTML is loaded and before another. This isn't a particularly good coding practice, but if you're updating an existing site you may be stuck with it.
In the end the only way to really tell is to pull it out and make sure the page still works.
As Sam said, keep JavaScript and CSS external, and reference items in the JavaScript by id rather than onclick= etc. Follow Yahoo, and put the CSS in the <head> and the JavaScript before the closing <body> tag.
For multiple JavaScript or CSS, use multiple <script> or <link> tags.
As for PHP, it's good practice to keep as much of the functionality in a separate include file, and just call functions etc. in the main HTML. This will aid maintainability greatly. Aim for simple loops, if/elses, and function calls, and nothing else.
If multiple javascript and CSS files
are to be referenced, how to include
in a single or tag?
You either reference each file using multiple tags or use a minifier like YUI compressor to create a single CSS and JS file from the originals.
The order of CSS styles is relevant, but only relative to other CSS styles. So, start by moving all CSS styling together (in the head section) in the same order as originally. That will make it somewhat less messy while defenitely not changing how the page works.
Then you can start looking at whether you can rearrange scripts and PHP code. What they output to the page directly is relevant, otherwise they can easily be rearranged.
PHP coding allows you to have HTML/CSS interspersed with PHP code by using server tags like <? -php code here -?>.
This is normal - it is very flexible and easy-to-get-started.
Your JavaScript should ideally be placed into a separate JS file and using the <script> HTML tag to reference it. See the docs.
Your CSS should ideally be placed into a separate CSS file and use a <style> HTML tag to reference it. Again, see the docs.