Logic’s Last Stand

April 12, 2008

Beginner’s Guide to a Real Web-site – Part 4 – Server-side Scripting

Filed under: Computers — Tags: , , , , , , — Zurahn @ 6:58 am

The veiled goal of all we’ve done to this point is to be prepared to take on a more suitable basis for creating a web-site, and that is through server-side scripting. This is the method of running a programming language on a web-server to control the HTML that is sent to the client’s browser. In this method, we can re-use one piece of code repeatedly throughout many pages.

The language we’re going to use in our example is PHP. It is a loosely typed language (rules aren’t strict) and isn’t particularly difficult to set-up or understand.

In order to run a server-side language, you need two things: The language installation, and an application server (a program to act as the server to run the language). We’ll be using PHP and Apache. The easiest way to install these is through a packaged installation such as WAMP.

WAMP stands for Windows Apache, MySQL and PHP. MySQL is database software which we’ll use one we get a handle on PHP. You can install all these individually, but the installation of MySQL can have some quirks.

Once installed, you can run the WAMP server and a tray icon will appear on your taskbar. Clicking it will give you several options. The www directory is where all your files will go. Make sure all your services are started (the icon should be white, but you can click Restart All Services to be sure), then open your web browser and enter into the address bar:

http://localhost

This should bring up a page with WAMP information if you have it installed correctly.

In your www folder, delete index.php and create replace it with a blank index.php. Copy over the contents of index.html and open localhost in your browser again. We should see our page.

What we need to do now is segment the page. We will be using includes to do this. Though there are object-oriented ways that are generally an improvement, it goes beyond our scope and would serve at this point only to confuse.

Create a folder called “includes” and in it a file called “top.php”. This will contain our doctype declaration and opening down to the header. Copy this code and put it in top.php

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />

Do not copy in the title tag. Save and close the file. Create a new file called middle.php and paste this code into it

</head>
<body>
<div id="container">
  <div id="header">
	<h1>Web-Design HQ</h1>
  </div>
  <div id="main">
    <div id="menu">
	Menus
    </div>
    <div id="article">

Save and close the file, and make one final file called bottom.php and paste this code into it.

	</div>
  </div>
</div>
</body>
</html>

Now, back in the index.php file, we can use our other files to easily insert our page design.

<?php include_once('includes/top.php'); ?>
<title>Main Page</title>
<?php include_once('includes/middle.php'); ?>
This is the index page
<?php include_once('includes/bottom.php'); ?>

That’s all that needs to be in index.php now.

The <?php indicator denotes the start of PHP code. You cannot place HTML within this.
include_once is a method. A method is a reusable piece of code, in this instance, to import data from another file.

So in plain terms
-Include the top part of the page up until the <head> tag
-Insert anything specific that needs to be in there, such as the title
-Include the middle section up until where we put our content
-Write our content
-Include the bottom part to close any remaining tags

Now any change we make to any of the included files will apply to every page that includes them. This significantly reduces redundant code and time wasted on repetitious changes.

Part 5 will address the basics of actual programming in PHP.

Advertisements

April 10, 2008

Beginner’s Guide to a Real Web-site – Part 3 – Linking and Menus

Filed under: Computers — Tags: , , , , , , — Zurahn @ 5:01 am

Now that we have after Part 1 and Part 2, a structured XHTML page with CSS design, we need pages in which to form an entire site. Make a copy of index.html as template.html. This will to keep the overall style of your documents consistent. Make another copy as links.html and open it.

In links.html, we are going to create a series of links to other web-sites. Doing so is simple.

Find this,

    <div id="article">
	  Welcome to my first web-site.<br />
	</div>

And replace the text with this:

    <div id="article">
	  <h2>Links</h2>
	  <p>
		<a href="http://google.com">Google</a>
	  </p>
	</div>

This creates link to Google with the text Google.

The structure of a hyperlink is simple <a> specifies a link, and the href attribute provides the address. Anything between <a> and </a> is linked to the specified page. Note, http:// is required on the link or it is considered a relative path.

But we’re also going to want to link to our index page. While we could add a simple text link, that is not as flexible as we want for a standard menu.

Find this,

    <div id="menu">
	Menus
    </div>

And make the following changes:

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

What we have created is an underordered list (ul). This creates a bulleted list with list items (li). By default these items are block-level, indented and have bullets beside them. We will change this in our CSS file, main.css.

Add the following to main.css,

#menu ul
{
  list-style: none;
  text-indent: 0px;
  padding-left: 0px;
  margin-left: 0px;
}

list-style formats the bullets for the element, in this case, everything within any ul within the menu div. text-indent, padding and margin are all removed to get rid of the indenting. This turns the list in to a simple top-down text list of links.

Now we can link to the index page.

    <div id="menu">
	Menus<br />
	  <ul id="menu">
	    <li>Home</li>
		<li>Link 2</li>
		<li>Link 3</li>
	  </ul>
	</div>

This links back to the index page, obviously. Try it out and see if you notice the problem. Go on… ok, you kept reading. Anyway, the problem is that even though we can copy the template over for new pages, any changes to the main features are only applied to that one, static page. The rest have to be modified to reflect that change. We cannot get around this with XHTML.

What we need to do is venture into what really drives significant web design, and that’s server-side scripting. We’ll do that in Part 4.

Create a free website or blog at WordPress.com.