TylerKing.net - Developing, Designing, Blogging

Displaying posts tagged "web development" (Clear Search)

Sunday, August 2nd, 2009

Making a static calendar using HTML

This post is part of my Web Development Tutorial series.

In the last tutorial you set up your development environment. Now it's time to actually start coding. The first thing you need to know to build a website is how websites actually work. I'll start with an overview, then I'll give a brief summary of some important HTML tags, and then we'll dive into the actual code.

How websites work

I'm going to go over what makes a basic website work. By "basic", I mean there there aren't any fancy plugins (like flash games or video). Most websites are made up of three main languages: HTML, CSS, and Javascript.

In this tutorial, we're just going to deal with HTML. We'll get to the other ones in future posts, but HTML is the programming language that defines the most basic and important aspects of a website: the content.

So what is HTML? It stands for "Hypertext Markup Language" and it's really just a system that lets you tell a web browser what should be included in a web page. HTML is made up of "tags" which are basically reserved words that mean special things to a web browser. I'll go over the most common tags later on.

Probably the biggest misunderstanding about HTML (and websites in general) is where the code is actually running. HTML is really just text that is sent to a web browser. So when you go to www.yahoo.com, yahoo sends you back a file with plain text. That file uses HTML tags to tell your browser what the website should look like. The main takeaway here is that HTML does not run on the server. It's nothing more than text that your computer interprets to create a webpage.

HTML Basics

All of this will seem pretty crazy until you actually see some code. If you feel like you're completely lost, it might help to skip ahead and take a look at the final version of the code for this tutorial.

There's a lot to learn about HTML, but there's no better way to learn than getting your hands dirty. Keep in mind though that I'm not really giving you an complete lesson here, so there will be holes that you'll have to fill later as you come across new problems.

Ok, so like I said, HTML uses tags. A tag starts with a "less than" sign (<) and ends with a "greater than" sign (>). For example, a paragraph tag looks like this: "<p>". Most tags need to be closed with a similar tag starting with "</". So to write a paragraph of text, you'd type:

<p>This is the sample text</p>

This same format is used for any HTML element that can contain other things inside. This might be confusing, but it will make sense soon enough.

Tags can also have attributes. Attributes are included in the opening tag. There are lots of different types of attributes, but just as an example, here's what a paragraph tag looks like if you want to use the "style" attribute to make the text color red, and the "align" attribute to center the text:

<p style='color:red' align='center'>This is the sample text </p>

While we're here, I should mention that single quotes (') and double quotes (") are both interpreted the same way in HTML tags. I'm completely inconsistent with which one I use, so please don't be confused. They mean the same thing. Just make sure that if you open an attribute with a certain type of quotation, you close it with the same type.

One more thing about tags. Some tags don't need to be closed. The reason you need to close a paragraph tag is because there is text inside and the browser needs to know when the paragraph is finished. Some tags don't have any content inside, so you treat them a little different. For example, the line break tag goes to a new line (like hitting "enter" in a text editor). Because it just goes to the next line and that's the end of it, line break tags are written like this: "<br />".

Notice that instead of having a closing tag, there's a "/" at the end. That tells the web browser not to look for a closing tag. That slash isn't actually required, but it's considered good practice to use it.

Ok, so that might not have made any sense, but keep reading anyway. Here are some of the common tags. Once again, this won't make sense until we get to the code, but you'll want to refer to this list when you forget something:

<p></p> - create a paragraph of text
<h1></h1> - this is the headline tag. Text inside will be very large. There's also h2 through h5 tags for smaller headline text.
<br /> - this starts a new line of text.
<div></div> - This is a pretty complicated element, but for now, think of it as a generic wrapper to put around things. I'll explain this more in some other tutorial.
<table></table> - If you need to make a grid, use a table just like you would in Word
<tr></tr> - "Table Row" - this tag opens rows inside of a table
<th></th> - "Table Header" - this tag opens a cell which will be the header of a column in a table
<td></td> - "Table Data" - this is just a normal cell in the table
<img /> - This includes an image file in your html
<a></a> - The "anchor" tag is how you create hyperlinks to other pages and websites.

There are way more tags than this, but you won't need to use any of them in this tutorial. For that matter, you won't even use these all in this tutorial, but I included them just to point you in the right direction if you want to learn more on your own.

Alright, it's go time.

Writing the Code

You should have set up your dev environment in the last tutorial so we're ready to start writing your calendar application. This is going to display a basic month view of the calendar. The first thing to do is set up the basic HTML file. Go to your index.php file and delete what you've got there. Replace it with this:

<html>
	<head>
		<title>My Calendar</title>
	</head>
	<body>
	</body>
</html>

You may be thinking that I never told you about the html, head, title, or body tags. That's because you always use them exactly like this. An HTML file always starts and ends with the "html" tags (to tell the browser that this is an HTML file). Inside that tag you see first a "head" and then a "body" tag. The "title" tag inside the head tells the browser what to call this page in the bar at the top of the browser.

So even if you don't understand what you've got in your index.php file yet, it doesn't matter because this exact same thing needs to go in every HTML file. You never need to get clever and change this.

Everything that you see on an HTML page goes in between the "body" tags. From now on, when I say you should type something, assume I mean you should put it in the body.

If you go to "http://calendardev" in a web browser, you should see a blank white page with "My Calendar" in as the name of the browser and in the start menu.

The first thing we'll do is make a header for the page. Add this to the file:

<h1>My Calendar: August 2009</h1>

Save index.php and reload the page in your browser. In the future, assume that after making a change to a file, you need to save it and reload the browser before the change will appear.

Your blank white page should now have large text saying "My Calendar: August 2009" at the top. So let's go over what you just did. Remember that above I said "h1" is the tag used to describe a headline. By surrounding the text with the h1 tag, you told the browser that you want to display that text as a headline and that's what you got.

The calendar itself needs 7 columns and 7 rows (including the headers). Which tag from above do you think is good for creating this layout? That's right, it's the "table" tag. But first, a quick aside:

There's an ongoing debate among web developers about whether or not table tags are ok to use. Some people just hate them for some reason. If one of those people sees your code and criticizes you for using tables, kick that person square in the nuts and tell them to shut the hell up.

Ok, so how do we set up the table? Tables are defined one row at a time, so you'll need to first make the table open and close tags. Then add seven opening and closing "tr" tags. This creates the seven rows. The first row will be headers, which are defined with the "th" tag. So inside the first "<tr></tr>", put seven "<th></th>" tags with the day of the week inside.

Now add seven "<td></td>" tags inside each of the remaining six "tr" tags. If you understand how this structure works, go ahead and put in the numbers for the appropriate days. If you don't know what I'm talking about, here's what the code should look like.

If you did everything correctly, you should see something like this:

I'm going to stop here because I think this tutorial is already too long. This calendar is obviously very basic, but we'll improve on it later. In the meantime, feel free to play around with the HTML on your own. Try to use online resources to figure out how you can use attributes to change how this calendar looks.

As always, post questions in the comments and I'll do what I can to help.

Posted by Tyler King

Tags: tutorial, web development, building a website from scratch

0 Comments

Sunday, July 26th, 2009

Setting up your development environment

Welcome to the the first part of my tutorial series outlining how to build a website from scratch. In this post I'm going to explain how to set up a development environment. Basically this means that I'll be walking through the steps necessary to set up a real live web server running directly on your personal computer.

This is how I (and many other web developers) write software. You get everything working on your local server (or development server) and then move it to the live server (or production server).

So let's get started. I use Windows, and this tutorial will assume you do the same, although it should be pretty easy to translate this into Mac OS or Linux terms.

Installing WAMP

The web server that I use involves three main components:

Apache is the actual "server". It takes requests from a web browser, decides how to process them, and sends the results back to the browser.
PHP is a scripting language. This is what most of the actual "programming" is done in. When Apache receives a request for a web page, it tells the PHP server to do all the heavy lifting
MySQL is the database program. It stores data which is accessed by PHP through queries.

You could install all of these components separately, or you could install a program called WAMP (Windows, Apache, MySQL, PHP). Download the most recent version and you're done. Once it's installed, open up a web browser and go to "http://localhost". If it's working correctly, you should see something like the image on the right.

Installing SQLyog

This isn't absolutely necessary, but I recommend installing a program to help you access the database. I use SQLyog which is a pretty frustrating program (poor user interface) but it offers exactly what I need. If you want to use it, click the link and download the community edition (it's free).

Once you install it, try connecting with the default settings. Make sure you see the image to the left on your screen and click "Test Connection". Hopefully everything's working for you.

We don't actually need to do anything with the database yet, so you can close SQLyog once you get it working.

Set up the file structure

Now that you've got everything installed, let's start creating the project. You should have a folder at C:wamp/www on you main drive (assuming C is your main drive). This "www" folder is the root of the project. That's where all the files you make will go.

You probably already have a file called "index.php" in this folder. We'll talk later about the significance of this file, but for now, open it up in notepad, delete everything in that file, and replace it with the following:

<?php
include_once('include/init.php');
?>

Don't worry yet about what any of this means. Just trust me. Now make a subfolder of "www" called "include" and make a new file inside called "init.php". If you're not sure how to make a php file, browse to that folder, right-click in it and select the "New > Text Document" option. Name it "init.php" and then ignore the warning Windows will give you about changing the extension. Then open the file in notepad and type in:

<?php
die("Hello World!");
?>

Ok, that's all you need to do with the file system for now.

Change the php.ini file

Your PHP server has all kinds of different configuration options. These options are set in a file called "php.ini". To access this file, click the WAMP icon in your task tray and go to "PHP > php.ini". This should open up a text document. The one thing we need to change is the include path. We need to point it to the root of the project so that we can easily include a library that we'll build later.

After opening php.ini in Notepad, hit ctrl+f to search for the following line:

;include_path = ".;c:\php\includes"

Change it to

include_path = ".;c:\wamp"

Notice that the semi-colon at the beginning of the line isn't there anymore. That semi-colon commented out the line so that it wasn't used in the configuration. By deleting the semi-colon and setting the include path to point at the "wamp" folder, we're telling PHP to let you include files from your project.

Save and close that file. Whenever you make a change like that, you need to restart the WAMP services. To do this, click on the WAMP icon in the task menu and select "Restart all services".

Change the hosts file
There are a lot of things working together that allow someone to type a URL into their web browser and get back a web page. The first thing is making sure that the computer is translating the URL into the IP address of the server.

For example, if someone types "google.com" into their browser, the first thing the computer does is figure out Google's IP address. It does this using something called a DNS server. We need to establish a domain name for your local server the same way, but we can't really tell DNS servers about it (since your dev server only exists locally).

In windows, there is a file called "hosts" stored in the C:\WINDOWS\system32\drivers\etc folder. This file lets you manually set IP addresses for specific Domain names. Open the file up in notepad and add this line to the bottom:

127.0.0.1 calendardev

Save and close the file. That extra line tells your computer that if you type "calendardev" into the address bar of a browser, it should forward the request to the IP address: 127.0.0.1 which is the IP address of your new apache server.

Test it out
Let's recap what we just did. We installed a server on your PC, installed a program to help you access the database, set up your project in the "/wamp/www" folder, reconfigured PHP to include files from your project automatically, and told Windows that "calendardev" is the name of your website.

If everything worked correctly, you should be able to type "http://calendardev" into the address bar of a web browser and see a blank white page that says "Hello World!". If you see that, you did everything correctly. If you don't see that, leave a comment and I'll be happy to help you figure out what went wrong.

I realize that this hasn't been very informative. I told you what to do and you did it, but you probably have no idea what's going on. Don't worry, you won't ever need to deal with this configuration stuff again. If you do, you basically just follow the same steps. I might explain this stuff in more detail at some point, but for now just consider it black magic that's an unfortunate prerequisite to actual web development.

Stay tuned for the next installment of this tutorial series. I'll explain to you how to use html to make a calendar show up on a website.

Posted by Tyler King

Tags: tutorial, web development, building a website from scratch

0 Comments

Saturday, July 25th, 2009

Web Development Tutorial

A while back I posted about how I would approach learning web development if I had to do it over again. I've been wanting to practice my technical writing, so I've decided to make some tutorials that should show someone how to make an entire web-based calendar application.

Before I get to the goods, I should say that there's a 95% chance that I never actually finish this. It's practice more than anything else, so I'm sure that no one will mind if I abandon this project. However, if anyone out there is actually reading through this and wants more, let me know and I'll keep chugging through this.

Also, I'm going to be very specific with my advice. There are obviously a lot of different ways to program. Different languages, platforms, libraries, and systems. I'm going to show one way of doing things. Don't take it as the gospel.

Ok, so here are the expected topics. I reserve the right to change these as I go:

Setting up your development environment
Making a static calendar using HTML
Mockup a more attractive look with fireworks
Styling the the calendar with CSS
Use PHP to detect the current date and display the calendar accordingly
Use PHP & MySQL to store and display events
Using Javascript and jQuery to make things slick

Ok, I'll get the first post up soon.

Posted by Tyler King

Tags: programming, tutorial, web development, building a website from scratch

1 Comment

About this site

Hi, I'm Tyler King and this is my blog. It's about programming, graphic design, UI design, and anything else related to software development. You can read this post to learn a little bit more about what I'm trying to do here.

If you're interested in learning more about me, check out my Portfolio, Bio or Resume.

Tips

If you have any feedback about the site or you have a topic you'd like me to write about, send an email to tips@TylerKing.net.