Posted: January 3, 2007 at 11:23 pm |
(27) Comments
PHP5 has brought so much new features but because of its big syntax changes, a big percentage of the PHP developing base has not made the change. Here are the top 10 new features that could change your mind.
5: Better error handling with exceptions
I’m sure every PHP developer had been staring at the famous white screen with a “Syntax error” clueless at where the error is really at. With PHP5, you can actually handle PHP errors and do whatever you want with them, but that’s not all. They have also included exceptions which I’m sure most C++ or Java developers use. The good part is that instead of simply failing on with close no errors to you, you could put a few checks before and information you could need such as maybe a
on an array. I have written an article about this: http://vexxhost.com/blog/?p=21
4: Completely rewritten MySQL extension
The MySQL databases are the PHP’s partner in crime. Many developers use this database system in their website’s because it is on of the easiest, free, open-source database software. However, its performance combined with PHP4 was close to poor. Introduced with PHP5 is a newer, rewritten, optimized MySQL extension which was also compatible with MySQL 5.0. It has also introduced other functions such as: Prepared statements, SSL connections, Multi-query functions.
3: A heck of a lot more useful functions
I have a few favorite PHP5 functions which speed up time while coding & enhances the website’s performance. One of my favorites is the
function – What it does that it would be called if a class that was created and did not exist. It provides you with the class name. This is useful because you don’t need to manage what includes you need for X and Y file and reduces the load for those who simply include all the classes in for every single PHP file. Also, another favorite is
which reduces the 6 lines of code to add something to one.
2: Finally! SQLite database support!
I’m sure a lot of developers will be happy about this one. While MySQL is very popular among most PHP developers, SQLite is much different than it. It actually uses normal files and reads them. It does not need a daemon (or called server) to run in order to execute any queries on it. It makes a better smaller database for these low traffic sites.
1: The best damn OOP support period
PHP programmers have spent an awful of long time trying to create hacks so in order that PHP can make a better OO programming language. Finally, they are rewarded with OO support that either PHP3 or PHP4 can match. It has anything you usually see in most of the other established coding languages. From Constructors, Destructors, Public, protected, private properties & methods, Interfaces, Abstract classes, Class type hints, Static properties and methods, Final properties and methods & a whole suite of magical methods.
That’s the top 5 for me. I hope you think that PHP5 deserves a try! (and we offer it with our hosting plans!)
Posted: December 20, 2006 at 8:49 pm |
(12) Comments
Need help using specific FFMPEG-PHP functions or some programming help? Let our experienced technicians help you debug your problem for FREE. Sign up today and post at our online community: FFMPEG-PHP Help Forums
You’ve probably heard of ffmpeg-php and it’s wide usability mostly in sites that involve with videos such as YouTube or any other similar site. Here’s a bit of an introduction to it and how to use it.
First thing, you’ve got to check that your web hosting provider actually has ffmpeg & ffmpeg-php extension installed on your account and then you could get started with ffmpeg. You can check if it’s installed by creating a PHP script and executing the following code:
1
| extension_loaded('ffmpeg') or die("ffmpeg extension not loaded"); |
If you get “ffmpeg extension not loaded” then your web hosting provider does not have ffmpeg installed, if you get nothing, then you’re one the good track!
ffmpeg-php is very simple to learn, what it is pretty much is an interface that works with the ffmpeg software to make it easier for PHP developers to access.
Like any object in PHP, you’ll have to start with creating a new instance of it. You can do that by using the following line:
1
| $ffmpegInstance = new ffmpeg_movie(“/path/to/movie/”); |
Now that you’ve had that, you can use that instance to use the many features of ffmpeg-php which are from knowing the duration of the movie/audio in seconds to retrieving the bitrate of the movie/audio file.
Once here, it’s pretty much like object oriented programming, ex:
1 2
| $ffmpegInstance->getDuration(); // Gets the duration in secs.
$ffmpegInstance->getVideoCodec(); // What type of compression/codec used |
This can be very helpful when coding anything that has to do with uploading videos because you can know a lot of information about it. I’ve made a small script that pretty much retrieves all the information that ffmpeg can get right here
Posted: December 3, 2006 at 12:27 pm |
(16) Comments
Generating PDF’s is an easy method to make a very nice printable and/or savable version of an article. This could be helpful in a WordPress blog or any articles website. This method utilizes the popular FPDF class.
First of all, I suggest you get the latest FPDF version from here. I suggest creating a directory such as “pdf” on your web hosting space. You will need to place the fpdf.php into that directory, you will only need it.
Let’s make our first “Hello World” example. Place the following in a file called test.php:
1 2 3 4 5 6 7 8
| <?php
require('fpdf.php');
$pdf=new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');
$pdf->Output();
?> |
Now let’s see that code line by line…
This line includes our FPDF class that we need to create the PDF file.
This line creates a new instance of the FPDF class which will be binded to $pdf
This line tells FPDF to add a new page to the PDF file; obviously we need one page so we will call this function once.
1
| $pdf->SetFont('Arial','B',16); |
This line tells the FPDF class to change the font to Arial, bold, 16 pt.
1
| $pdf->Cell(40,10,'Hello World!'); |
This line is just like the “echo” of PHP, the text fields in PDF files are just sort of rectangles with text in them, so we want the width of 40 pt. and a height of 10 pt., the third value is the text to be written in that rectangular box.
Our final line, which pretty much means: “we’re done, show us our PDF!”
That’s a very simple FPDF usage, however, here is a bit of more advanced version of FPDF usage:
1 2 3 4 5 6 7 8 9
| <?php
require('fpdf.php');
$pdf=new FPDF("L", "mm", "A4");
$pdf->AddPage();
$pdf->SetFont('Arial','BIU',30);
$pdf->SetTextColor(0,0,255);
$pdf->Cell(60,20,'PDF+PHP Test',1,1,C,0);
$pdf->Output();
?> |
Now let’s do a quick review of that more advanced code:
1
| $pdf=new FPDF("L", "mm", "A4"); |
This will create a new instance but instead will default to creating landscape pages because of the first
,
can be used instead to default to portrait pages. The second value is the default measurement unit, a choice of point (
), millimeter (
), centimeter (
) and inch (
) is given. The last value is the size of the page, the choice of
,
,
,
&
is given.
Simple function, just add the page, you can tell the function to create either a portrait (
) or landscape (
) by giving it as a first value (ex:
,
).
1
| $pdf->SetFont('Arial','BIU',38); |
This required function again says that we want an Arial, 30 mm in size (because of the default size unit), the
simply tells that we want it to be Bold, Italic & Underlined.
1
| $pdf->SetTextColor(0,0,255); |
This sets the default text color for the text we will be writing, I’ve chosen blue here, the first value is red (
), the second is green (
) & blue (
).
1
| $pdf->Cell(60,20,'PDF+PHP Test',0,1,C,0); |
This makes the so famous rectangle with 60 mm of width & 20 mm of height, we wrote ‘PDF+PHP Test’ and the first
means we do not want a border. The
next to it means that once it’s done the cell, it will go to the beginning of the next line, if
is provided, then it will be to the right of it, if
is provided then it will go below. The
is just the alignment which is center of the text inside the box, possible values are left (
), center (
), right (
).
Output our brand new colorful PDF file!
Thanks for reading!
Posted: November 17, 2006 at 3:23 pm |
(7) Comments
Remove spaces, tabs, CR/LF from the HTML source code
It’s surprising how much people use tabs and spaces to make their code cleaner but what it does is add more pointless data to download which requires more data transfer which means longer download times. Try to not use a lot of HTML comments too. This alone can make your website faster from 7%-10%!
Minimize cookies
Of course, if you have a static site then you will have no problem with this. If your site is dynamic and uses cookies, I suggest using shorter values & names because cookies are added into each HTTP request which means longer transfer time. Try using “uname” instead of “user_name” and “pword” instead of “password”, etc. – Depending on your code, this can save from almost nothing to 10%.
Better Javascript
If you have long functions in Javascript such as “insert_to_database_and_remove_old_value” or you could name it “itdarov”. No one is going to care and your site will function never the less but you’ll cut a bit of transfer time. Same “Remove spaces, tabs, CR/LF” applies to Javascript, usually there are a few programs called “Crunchers” which will remove all the enters, spaces, tabs, comments to make a final smaller sized javascript.
HTTP compression
Obviously, this one has ups and downs. Compression can make huge size differences because there is a lot of repetition in the source code, however it causes your CPU to have much higher load. It’s a choice of high CPU load with small files or big files with no CPU load.
Force image size
If you add a picture to your website and the width/height are not specified, the client has to render the image a first time with no size, then once the whole page is downloaded, re-render it once again to decide the final size.
GIF/PNG compression
So, your page has several GIFs and/or JPG? It is very likely that those could be compressed even more without any loss! GIF/PNG mainly have a very compact data structure, but most applications like Corel Photo-Paint and Adobe PhotoShop don’t optimize it well. Go to Download.com and find yourself a good set of tools to compact your image files. You will be surprised that one of your GIFs had 900 bytes and after compacting it, end up being just 80 bytes.
Posted: October 27, 2006 at 9:03 pm |
(7) Comments
CSS font shorthand rule
When styling fonts with CSS you may be doing this:
1 2 3 4 5 6
| font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif |
There’s no need though as you can use this CSS shorthand property:
1
| font: bold italic small-caps 1em/1.5em verdana,sans-serif |
Much better! Just a few of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.
Two classes together
Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like! For example:
1
| <p class="text side">...</p> |
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
CSS border default value
When writing a border rule you’ll usually specify the colour, width and style (in any order). For example,
will give you a black solid border, 3px thick. However the only required value here is the border style.
If you were to write just
then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!
CSS document for printing
Lots of web pages have a link to a print-friendly version. What many of them don’t realise is that there’s no need because you can set up a second CSS document to be called up when a user prints the page.
So, your page header should contains links to two CSS documents, one for the screen, and one for printing:
1 2
| <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/> |
The first line of code calls up the CSS for the screen (notice the inclusion of
) and the second line calls up the CSS for the printable version (using
).
So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads:
1
| <<ink type="text/css" rel="stylesheet" href="printstyle.css" media="screen"/> |
.
Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You’ll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.
Image replacement technique
It’s always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.
Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you’re a widget seller and you’d like to be found for this phrase in the search engines. You’re pretty set on it being an obscure font so you need to use an image:
1
| <h1><img src="widget-image.gif" alt="Buy widgets" /></h1> |
This is OK but there’s strong evidence to suggest that search engines don’t assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:
1
| <h1>Buy widgets</h1> |
Now, this obviously won’t use your obscure font. To fix this problem place these commands in your CSS document:
1 2 3 4 5 6
| h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
} |
Be sure to change “image height” to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won’t be able to see the text.
CSS box model hack alternative
The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:
1 2 3 4 5 6
| #box
{
width: 100px;
border: 5px;
padding: 20px
} |
This CSS rule would be applied to:
1
| <div id="box">...</div> |
This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.
A simple alternative is to use this CSS:
1 2 3 4 5 6 7 8 9 10
| #box
{
width: 150px
}
#box div
{
border: 5px;
padding: 20px
} |
And the new HTML would be:
1
| <div id="box"> <div>..</div></div> |
Perfect! Now the box width will always be 150px, regardless of the browser!
Centre aligning a block element
Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:
1 2 3 4 5
| #content
{
width: 700px;
margin: 0 auto
} |
You would then enclose
1
| <div id="content"> |
around every item in the body of the HTML document and it’ll be given an automatic margin on both its left and right, ensuring that it’s always placed in the centre of the screen. Simple… well not quite – we’ve still got the pre-IE 6 versions on PC to worry about, as these browsers won’t centre align the element with this CSS command. You’ll have to change the CSS rules:
1 2 3 4 5 6 7 8 9 10 11
| body
{
text-align: center
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto
} |
This will then centre align the main content, but it’ll also centre align the text! To offset the second, probably undesired, effect we inserted
into the content div.
Vertically aligning with CSS
Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use
. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box.
Hmmm… not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box – perfect!
CSS positioning within a container
One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It’s also possible (and often desirable) to position objects within a container. It’s simple to do too. Simply assign the following CSS rule to the container:
1 2 3 4
| #container
{
position: relative
} |
Now any element within this container will be positioned relative to it. Say you had this HTML structure:
1
| <div id="container"><div id="navigation">...</div></div> |
To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:
1 2 3 4 5 6
| #navigation
{
position: absolute;
left: 30px;
top: 5px
} |
Perfect! In this particular example, you could of course also use
, but there are some cases where it’s preferable to use positioning.
Background colour running to the screen bottom
One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn’t suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:
1 2 3 4 5
| #navigation
{
background: blue;
width: 150px
} |
Just one problem though: Because the navigation items don’t continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?
Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:
1 2 3 4
| body
{
background: url(blue-image.gif) 0 0 repeat-y
} |
This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can’t express the left column in terms of em, as if the user resizes text and the column expands, it’s background colour won’t.
Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.