This tutorial relies on server side programming languages. To begin, be sure you have XAMPP or a similar localhost software running for testing purposes.
Get Xampp

In this tutorial, you will learn how to make a view counter using a few lines of PHP and MySQL. We will also be playing around in phpMyAdmin to create a basic table. This is not a real use case for this technique, you will most likely be adding this to a table on the database that contains profile information or a similar table.

Step 1

We begin the tutorial with a basic HTML page, with a PHP brackets in topmost part of the document. This is where we will place the database connection information. Your localhost may be set up differently than this, please familiarize yourself with your username and password of your server.

Step 2

In good practice, declare variables with data that will be used more than once. This includes “host” which in our case is localhost. This will differ if you are using a live server, or are using this on an application in a website. “username” is the username for the server. Default username for localhost is ‘root’. “password” is naturally the password to the server, again default for local host is ‘none (represented with empty quotes)’. “dbname” should contain the name of the database you are trying to reach. In this case we have created a database named ‘views’. We will go further into this in a moment. ”tblname” represents the table inside of the database that contains the information we desire, in our case we named it ‘counter’.

Step 3

Its time to open your phpMyAmdin. This is where we can access, and manipulate database data. Depending on software and platform, your URL may be different. (http://localhost/phpmyadmin/).
Find the section that allows you to create a new database, shown below. We will be making a new database named “views” as we have coded into the variables in step 2.

Step 4

Now, we will need to add a table and a row of data. Start off by making a table and naming it “counter” as we have coded in the variables on step 2. Then we will need 1 field of data on this table. (As mentioned before, this is not a real life use case. In actual use, you would add a field to an existing table.)

Step 5

After creating a new table, you will be presented with the field form. The way you make this is really up to you, for this tutorial we will just do a couple of things. The filed is named “hits” and the length is set to “5” the highest number this counter can hit will be ’99999′.

Step 6

There are several ways you can do this through PHP, for this tutorial we will do it through phpMyAmdin. Insert a new row, and set the initial value to ’0′. This will ensure the counter will start at 0 and the first view will be counted as 1.

Step 7

We are now done with phpMyAdmin. Lets get back to the code. We have our database set up, and we have all our variables with the names set up. Now we need top connect to the server and database.
To do this, we create a new variable named “con” for ‘connection’. The name of this variable is not important, however you should have a clear idea of what variable is when looking at the name.

this function we will use to contact the server. Inside the parenthesis is where the variables containing the server details go.

After the parenthesis, to make sure nothing executes unless the server is connected add the function ‘die()’ This will stop the script from running any further.
We also need to connect to the correct database, in our case the name is ‘views’. To do this is similar to connecting to the server.

Inside the parenthesis is where the variable containing the name of the database goes “$db_name”. Just like above, use the ‘die()’ function to stop script execution if there is an error connecting.

Full code for connecting to server and database

Step 8

Now that we are all connected, we are ready to start the fun part. Obtaining data from the database, displaying it, and modifying it. To do this we first create a variable named ‘query’.
Inside the variable we access the database using SQL – mysql_query()
“SELECT hits FROM $tbl_name”
This will select the row ‘hits’ from the table ‘counter’.

Then we need to count how many rows are in the ‘hits’ block. Create a new variable named ‘numrows’.

Step 9

Next we add an if-while loop.This will make sure the variable numrows has data in it, and to store that data in variables as needed.

This grabs the data inside the query, and stores them all in an array variable named ‘row’. We want to be a little more specific, so we add a variable named views and have it be the same as the hits-row.

Step 10

At this point the information is in the script, you just need to display it. To do this, we are going to add a print() function. Adding the variable to the print data so it is on the screen.

Step 11

Everything works, and now we need to count up and add the new number to the database. This part is quite simple. Take the variable ‘views’ and add 1 to it on every page load.

We then need to put the new number in the database. To do this requires a little bit of SQL.
Use the same ‘query’ variable and structure as we have above.

The SQL for this action is a little different than selecting. To place a new value in the database requires the following query “UPDATE $tblname SET hits=’$views’”
This will update the ‘counter’ table and set the row ‘hits’ with the value of the variable ‘views’.

Full code in body section

Final

Your view counter is done, Watch as it counts up. Questions and comments will be answered below. Thanks for reading the tutorial.

Seasons greetings from Division Overlay! It is a joyous occasion. We are approaching our second full year of operation. Not only that mile stone, it is the season of gift giving. If you look on our home page http://divisionoverlay.net/ you will see a very special offer for the month of December.

We are offering 40% off of all design packages in the month of December. Starting December 1st at Midnight and running through December 31st at 11:55pm. This sale includes but is not limited to Logo design, UI design, HTML mockups, Icon design, and much more. However the sale does not include, Consultations, any development work (PHP, JavaScript, XML), and Hosting.

Also this month, we are launching Echo Suite into beta. You will be able to register and use the Suite starting this December (Date TBD). There is a teaser graphic also on our homepage (http://divisionoverlay.net). There will be a separate blog post about Echo Suite when it is released.

Hello and welcome back to the blog. We are glad to announce the updated theme is up and functional. What is new? (Click Images to enlarge)

“New” post ribbon displayed on new posts. The layout for post previews are now handled with wordpress excerpts. We have added an icon representing the post topic and a brief summary of the article which will be displayed on all new posts.


On all new blog entries, the title, post image and the post summary will all be displayed at the top in a container for quick viewing.


Now, on tutorials, instead of giving boring text links to downloads and demos we now added buttons. Clear and centered in the middle of the blog post.


Author information and bio has also been implemented. Not a big feature, just giving the blog posts a little more personality.

Other News

On the development side, We have optimized the code slightly for the blog posts and home screen. We have also deactivated all the useless plugins that were installed, and updated the ones still in use.
The blog is also on the latest version of wordpress (2.8.6). That ensures that we have a more secure and bug-less operating system.

There are currently 3 new blog posts in draft, 2 of which are tutorials and the other being an inspiration article. We hope to get those up progressively before the end of the year.

We are also working on a few things for holiday release. Here is a little sneak peek of some of the things we are working on.

Echo Suite is a new web service created by Division Overlay. It will feature many different services combined into a central station where you will be able to use one ID to login to all the different apps.

Watch for this little guy on the home page (here) within the next 2 weeks. There is a special offer in the air…

We are also looking for people who want to by ad space (left sidebar on blog) if you are intrested, contact us (here).

So please leave a comment below and tell us what you think about the new features and coming attractions from Division Overlay.

I went through my vast iTunes library (~4000 songs) and picked 28 of the most stunning album covers to spark your inspiration.

Clean / Simple

Angels & Airwaves – We Don’t Need to Whisper

Avenged Sevenfold – Avenged Sevenfold

The Blaqk Year – After the Storm

Coheed and Cambria – Good Apollo, I’m Burning Star IV, Vol. 1: From Fear Through The Eyes of Madness

Family Force 5 – Dance or Die(EP)

Good Charlotte – The Chronicles of Life and Death

Hawthorne Heights – Fragile Future

H.I.M. – Dark Light

Meriwether – Meriwether

Papa Roach – The Paramour Sessions

Grunge

Bullet for My Valentine – Scream Aim Fire

Demon Hunter – Storm the Gates of Hell

Evanescence – The Open Door

Green Day – 21st Century Breakdown

Meese – Next in Line

Mendeed – This War Will Last Forever

My Chemical Romance – The Black Parade

Rage Against the Machine – The Battle of Los Angeles

Artistic

3OH!3 – Want

Aiden – Conviction

Blink-182 – Blink-182

Dot Dot Curve – Till the Wheels Fall Off

Eminem – Relapse

Fort Minor – The Rising Tied

Incubus – Make Yourself

Plus 44 – When Your Heart Stops Beating

Single File – Common Struggles

Take the Crown – Relapse React

In this tutorial you will learn how to make a basic email form using xhtml, css and php. In this tutorial we will be making a small contact form where the user will fill out a form and using php will email it to your inbox. We will look in to error processing for eliminating some spam in this tutorial as well.

End results:

- Try it -

Step 1 – Basic HTML template

First lets create the basic template for the form to be placed in. This, of course will not be the template you will use, as you will probably implement this into your own design and site. This is the beginning of the template, it contains all the dividing inlays and correct tags to start out the template.

We will need to declare the doctype and create all the necessary header information such as the content-type and title. We also link the style sheet in this section.

In the body section I have placed a number of div tags that will hold the content we will place inside them, using css later we can do some formatting.

Next lets make the the form with all the inputs and labels for the user to fill out that will ultimately be emailed to you when finished.

To correctly flow with the template we have just made place the create the form inside the “container” div.

Final index.html file

Step 2 – Styling the index

For the sake of the tutorial I chose to add a little style to the page. Although the css is very generic, it is not required to use on your own form. It is simply used to give the tutorial a little flair.

To use the two images in the tutorial download them here:

Graphics

Background Image

Container Box

Final style.css file

Step 3 – Declaring Variables

Now that we have the html template and the page styled using css and the graphics. We need to start building the actual php script that will email you when filled out.

First thing I like to do is declare all my variables at the top of the script for easy reference later on.

These variables are pulled from the form in the index.html file. I placed them in variable names that would be easy to remember. Name, Email, Message, and the Subject is a static variable and you set it as you please. It can easily be pulled from an input if added on the form.

Step 4 – Error processing

For the sake of sorting out the false emails at the application level, this step should never be overlooked. As this is a basic tutorial, You only learn how to check if the fields are empty. If I get enough demand I will write more on error handling.

We need to check if there is any value to each field (name, email and message) and have the form die if the fields are empty.

The die() function will stop the form from executing any further. So it will display the first error it catches. If you place an email, but not a name, the name name error will display and stop the script from executing.

If all the fields have input, then we need it to show a message to give the user a peace of mind that their message has been received.

Step 5 – Email formatting

Now that we have all the data we will need to send a message, we need to format the email in a way that is easy to read for you.

Setting up the time stamp. Fairly simple format.

Month text (July) Day, Full Year(2009) Hour:Minutes am/pm.

This block makes up the body section of the email.

This will display the time stamp we just made first. The “\n” is a line break in the text. So the next variable is on its own line. Then it will display the name and email followed by the subject and message.

We need a from line, so you know who the sender is before you open the email.

Step 6 – Email the form.

The script is now ready to email the content to the email you choose.

You’ll need to place your email in the place of “your-email@doamin.org”. You can add more than just your email address if you are needing to send it to several people or departments. You can add a comma and add more email addresses in that section.

End the script and you are ready to upload and test the script.

Final email.php file

Conclusion

Final EmailForm.zip

You should now have a working email form that will email you if all the fields have been filled out. You can do much more with this application, such as check if the email is a real email address, check for words or links you dont want inside the message, the options are endless. I hope this tutorial has helped you out, and you may have learned something new and useful today.

It’s been a long time coming, but we have finally accomplished the redesign. After six months of designing and coding the site. We have finally produced what we set out to do.

This is the fourth major redesign of Division Overlay since we launched in December 2007. Creating the User Interface was something of a challenge for the first few mockups. We went through dozens of potential candidates for the design, all of them ultimately were rejected in favor of this one. After we had finished the grueling hours of tedious designing and tweaking, we had a tremendous problem. The PSD document with our design became corrupted. Luckily we had saved PNG formatted images of each page on the PSD, so all we had to do was back track and trace our work. From that speed bump, we were able to race toward our mark at full speed, continuing on from slicing the images, to coding the template. On to programing the PHP and jQuery to finishing up with this wordpress theme.

Now on to more business

Along with the redesign launch, we also have a slew of new things for you to download and have fun with.

Including:

• Blue Quartz 3 template
• LaunchFuture template
• Quote Machine
• Kings Crown Set
• and much more..

We will also be writing more posts ranging from full in depth how-to tutorials to updates on what Division Overlay is up to.

After all the work we have put in, it would be nice to leave a comment no how you think the new site looks.

This technique is a pretty easy one. Let’s start off by making the “quote.php” file.

This will cycle through 5 quotes that we will input in a minute. If you choose to add more cases, then you will need to change the “4” to the last case number you added. This is so it will cycle through all the quotes, not just the first 5.

Now we need to add the cases.

That is it for the “quote.php” file.

Full script

Now we will make a little page that it will go on. Nothing fancy, you can jazz it up as you see fit. Start off with the doctype, and all the required code to make the page valid.

Now let’s give the page some basic styles, fonts, colors, etc.

Now we can make a little box where the quotes from the “quote.php” file will be inputted in to the main file.

The Full main.php file is as followed.

This is how you would make a simple and nice little quote generator, to go on any site that supports php.

Try the demo.

Any questions, comments or concerns please do not hesitate to leave a note below. Thanks for your time.

I am proud to announce SiteGadget, a project by Division Overlay. SiteGadget was started for the reason of distributing little gadgets or widgets that can be placed on any website. There will be all kinds of gadgets on there, and it will even be open to developers to submit your own for review, and maybe be placed on the site.

At this point in development a lot of things are changing, so i cant give you a real good idea of what it will look like or how it will work, but I can show you the logo (subjective to change)

Also to come soon my business cards, here is a sneek peek of that

Hello there! I’m glad to announce the re-launch of the blog section of Division Overlay. After discovering the first theme I made didn’t quite stretch like i wanted it to, I had to go back in the lab and whip up this one.

Features

Features I have implimented into this design:

• Current date and time
• RSS subscribe
• Style switcher
• Pagination

Coming soon

Features I plan on rolling out within the days and weeks to come.

• Dynamic archive
• Dynamic recent posts
• More full tutorials
• More in-depth articles

In conclusion, this theme is done but, i will be adding a lot more to it to make it better. On a side note, the previous theme that was up here will be converted into a free web template. You can expect that in within the week.

The new site will have everything, official contact info. A nice looking portfolio. A place where you can contact me and a place where you can request a quote for a design. The blog wont be on the front page any longer, but it will still be here.

I would also like to say, I will be writing on another blog, a separate blog. More or less an ideas blog. I’ll give more info on that as it develops.

Division Overlay will still be active during the time I pull the blog offline. It will have a few things on it, such as a little portfolio, maybe a few pics from my flickr. possibly a twitter feed, all that jazz.

Thank you for your understanding, and have a fantastic holiday.