NOTE : this article is still under construction. However, the theoretical parts are more or less finalized, so feel free to read and comment on those.
1. Introduction
The total number of websites worldwide is rapidly approaching a billion according to Internet Live Stats [1]. You might wonder why you should add any more websites to that number. Still, assuming that you have at least a general interest in how stuff works, I would argue that it is useful to have some knowledge about this kind of pervasive technology. As a result, we will try to provide a explanatory example on how a website can be created.
There are many web technologies, and the Internet itself is a complex distributed system in its own right [2]. In this post we will use the following technologies: PHP, HTML, JavaScript, CSS, and MySQL. Although there are many alternatives to PHP, PHP remains one of the most prominent server-side programming languages today with approximately 250 million PHP-based websites and counting [3]. It is also relatively easy to learn and deploy, and over the years some PHP-based frameworks have been introduced allowing easier development of larger scaled websites (e.g. Codeigniter, Symphony, Zend, …).
The rest of this article is organised as follows. First we will introduce our learning objectives in a more specific manner, and present the problem description for our example. Next we will discuss the web platform and related technologies in greater detail. Finally we will show and explain some of the implementation aspects of our solution.
1.1 Learning objectives
In this article we will try to reach the following learning objectives:
- Build a basic understanding of the complete lifecycle of a web page;
- Basic client-side programming with JavaScript, HTML and CSS;
- Basic server-side programming with PHP and database access and modeling with MySQL.
- Introducing some documentation for the design and implementation of websites;
I assume you already have some experience with one or more programming languages, e.g., Java, perl, C#, et cetera. Of course, you can always try to understand the code without any programming experience. All in all, you can consider source code to be a formal way of writing instructions.
2. Setting up a development environment
Before we start with the theory, we will set up our development environment. The reason for doing so, is that it might be easier to understand some concepts if you see them happening live in front of you.
Since we will be developing in PHP, we will need some platform to run our PHP scripts on. There are many alternatives to set up a development environment for building PHP websites alone. In this article we will discuss two. The first one is to run a local version of your website; the second option we will present here is to use a web server and run your application directly online.
To edit HTML, CSS, JavaScript and PHP files, there are quite a few alternatives. Personally I often use a combination of Netbeans (with PHP plugin installed) and Notepad++, but you can easily find other tools that work equally well or better.
2.1 Local
2.1.1 Windows
To run a PHP website locally, you can download a local server that can run PHP scripts. For the Windows platform you can use WampServer, which you can download here (link to website). Once you’ve installed the server, run it and navigate to http://localhost/ using your web browser. If all goes well, you should now see the default welcome page of your server.
To add web pages to your local server, go to the folder wamp/www/, create a subfolder test/ for example, and finally create a new web page in this folder, for example index.php. Add the contents of listing 1 to this page. If you then navigate to http://localhost/test/, you should see the text “Hello world!” printed on your screen.
<html> <head> <title>Hello world!</title> </head> <body> <?php echo '<p>Hello world!</p>'; ?> </body> </html>
2.2 Online
To run your PHP scripts directly online, you’ll need a webserver that can host and run PHP files. If you don’t own such a web server, there are a number of online hosting services which you can use. If you are merely experimenting with PHP, it is probably best you sign up for a free account. host-ed.net provides such services for example, among many others.
If you are using online services, you will probably need some way to upload files to the web server. You can do this via an FTP client. FileZilla is a free FTP client and is relatively easy to use.
Now create a folder on the web server and add a new web page index.php to this folder with listing 1 as its contents. If you then navigate to this web page via your browser, you should see the text “Hello world!” printed on your screen.
3. The web platform
3.1 The World Wide Web
A website can be described by its domain name, e.g., districted.wordpress.com and its contents, i.e., a collection documents such as HTML pages, scripts and additional resources like images and videos, that reside on one or more web servers.
A domain name can be thought of as a path in the domain name system‘s (DNS) hierarchy, in this case starting at com, then followed by wordpress, and ending in districted.
Each of the website’s pages can then be accessed using a URL (uniform resource locator), which consists of a communication protocol and a path name, relative to the domain name [4]. For example the page index.php on the domain districted.wordpress.com can be accessed using the HTTP communication protocol yielding the following URL: https://districted.wordpress.com/index.php.
In the following subsection we will describe HTTP in more detail. Next we will explain briefly how state can be preserved over stateless HTTP. This will conclude our brief introduction to the world wide web.
3.1.1 The Hypertext Transfer Protocol
Arguably the most important application layer protocol for the world wide web is called the Hypertext Transfer Protocol (HTTP). HTTP is a stateless application-level request-response protocol that normally runs over TCP [4].
HTTP request
HTTP request and response headers are written in ASCII, and the HTTP contents are given in a MIME type [4]. A general HTTP request consists out of a method, header and body, cf. figure 1. HTTP supports a variety of methods, but only the ones shown in table 1 matter in practice. Other methods are for example DELETE, PUT, and HEAD [4]. Table 2 shows some of the possible request header contents.
<header>*
<BODY>
Figure 1 : The general structure of a HTTP request.
| Operation | Description |
| GET | Read a web page. Intended for information retrieval Typically the body is empty. |
| POST | Append to a web page. Intended for submitting information. Typically the body contains the submitted information. |
| Header | Type | Meaning |
| Accept | Request | The type of pages the client can handle. |
| Accept-Charset | Request | The character sets that are acceptable to the client. |
| Host | Request | The server’s DNS name. |
| Authorization | Request | A list of the client’s credentials. |
| Referer | Request | The previous URL from which the request came. |
| Cookie | Request | Previously set cookie sent back to the server. |
HTTP response
The general structure of an HTTP response is shown below in figure 2, and contains a status code and message, a header and body. Important HTTP response status codes are listed in table 3. Some of the possible contents of HTTP response headers are given in table 4.
<header>*
<BODY>
Figure 2 : The general structure of an HTTP response.
| Code | Meaning | Examples |
| 1xx | Information | 100 = server agrees to handle client’s request. |
| 2xx | Success | 200 = request succeeded; 204 = no content present |
| 3xx | Redirection | 301 = page moved; 304 = cached page still valid |
| 4xx | Client error | 403 = forbidden page; 404 = page not found |
| 5xx | Server error | 500 = interal server error; 503 = try again later |
| Header | Type | Meaning |
| Set-Cookie | Response | Cookie for the client to store. |
| Server | Response | Information about the server. |
| Content-encoding | Response | How the content is encoded, e.g. gzip. |
| Content-type | Response | The page’s MIME type. |
| Last-modified | Response | The last time the page was changed. |
| Location | Response | Tells the client where to send its request. |
HTTP in action
Now that we have covered what HTTP requests and responses look like, you can investigate them yourself. To do so, press the F12 function key if you are using Google Chrome (or right click the current web page and select “Inspect element”), and open the network tab. If you refresh the current page, you will see the how the browser will send and receive HTTP requests to and from the server. If you click one of the requests, you can see the request in more detail.
Figure 3 shows the general communication pattern for fetching a web page over HTTP. Note that we make an abstraction of the lower protocol layers (transport layer, network layer, …) when describing the communication channels and protocols (TCP, IP, …).
Figure 3 : HTTP request and response.
3.1.2 Cookies
When a client visits a website, often some kind of state needs to be maintained, e.g., login data, shopping basket contents, et cetera. When a client performs some action on the website, the server will need some way to associate the client with his/her correct data located on the server.
The solution that is implemented in all modern browsers is the use of sessions through cookies. A cookie is a string that the server can associate with a browser [4]. As shown in table 4, the Set-Cookie header is used by the server to ask the client to set a cookie. In subsequent requests by the client, the cookie is then sent back using the Cookie header, as shown in table 2.
3.2 Web applications
In what follows we will introduce the technologies that we will actually be using during the rest of this article. However, note that there are many other technologies to construct web applications. Feel free to run the examples on your own local or online server.
3.2.1 HTML
HyperText markup language (HTML) is a markup language for creating web pages and other information that can be displayed in a web browser. HTML pages usually contain, or contain references to, CSS and JavaScript code. Since HTML is mainly concerned with the organization of the contents of the page, a good design practice is to include references to scripts and stylesheets rather than to directly code them into the page.
The structure of a page can be described by the document object model (DOM). This is a representation where an HTML document is organised in a hierarchical manner that is accessible to programs [4, 5]. The root of the page is a <html> element, containing a <head> and <body> element. In the <head> element the title, meta data, and references to scripts and stylesheets can be added. The <body> element contains the contents of the page, i.e., text, images, et cetera.
The formatting commands in HTML correspond to a set of tags with associated attributes [4]. These tags and attributes can be used in HTML to include pointers to, and content from other sites, e.g., the <a> tag with href attribute provides a clickable link to a URL, the <img> tag with src attribute links to an image that is automatically retrieved and displayed, the <script> tag with src and type attributes can link to a script that is automatically downloaded and executed, et cetera. A full overview of all tags and attributes can be found here (link to website). The W3C also provides a validation service for your HTML pages here (link to website).
There are also a number of optional attributes that can be added to any tag. The id and class attributes form the foundation for many of the dynamic web pages today, as well as styling through CSS. The id attribute uniquely identifies an element in an HTML page, whereas the class attribute can be assigned to a group of elements. In more complex designs, HTML elements often have multiple classes to allow incremental styling and scripting over groups of elements.
Listing 2 shows an example of a simple HTML web page. When developing a website, it is often handy to use dummy text for static pages if you don’t have any available yet. A well-known dummy text is called Lorem Ipsum, and can be found here (link to website). The resulting, rendered page is shown in figure 4.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>EXAMPLE</title>
<meta name="description" content="Example web page"/>
<meta name="keywords" content="html example" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- This is a comment. -->
<div id="header">
<h1>HTML Example</h1>
</div>
<div id="contents" class="bordered-dotted">
<p>This is an example paragraph in an example <a href="http://en.wikipedia.org/wiki/HTML">HTML</a> web page. <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. The following lists the first paragraph of the dummy text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at felis lobortis, molestie arcu ut, suscipit tellus. Duis venenatis facilisis sem, sit amet tristique leo eleifend vel. Curabitur mollis urna nec libero ultricies ultricies. Aliquam tempor at enim ac vestibulum. Suspendisse sit amet ligula eu diam varius laoreet in sit amet velit. Phasellus ante sapien, pellentesque sit amet dolor id, dapibus placerat tellus. Vivamus vel eros quis erat pellentesque tincidunt at non neque. Nulla malesuada pharetra mi vel feugiat.</p>
<p>Aliquam tempus posuere augue, et lobortis enim venenatis ac. Vestibulum faucibus leo at malesuada scelerisque. Etiam at dolor dolor. Quisque at magna ac augue eleifend egestas at ut turpis. Proin euismod erat rhoncus odio interdum lacinia. Etiam ultricies tellus dolor, non porta felis ornare vel. Integer sed diam urna. Cras convallis at lacus ac egestas. Aliquam placerat non metus at sagittis. Morbi fermentum euismod arcu, vitae facilisis tortor sollicitudin sit amet. Cras iaculis dapibus quam vel rutrum.</p>
<button onclick="changeBorder();">Change border</button>
<button id="btn-new-p" onclick="addParagraph();">Add Paragraph</button>
</div>
</body>
</html>
Figure 4 : The rendered HTML page as shown in listing 2.
3.2.2 CSS
Where HTML is concerned with structure, CSS (Cascading Style Sheets) deals with the appearance of a web page. The syntax of a CSS rule consists of a list of affected HTML elements that can be addressed using HTML tags names and/or id and class names, followed by the body of the rule between braces. A single declaration, consists of the affected CSS property, e.g., height, width, color, et cetera, followed by a colon and the value, closed by a semicolon. Classes are referenced by a dot, ids by a number sign.
Note that the order of commands is important in CSS. For example the statement border: #222222 dotted 2px; in the first CSS rule is overruled by the second statement border-top: 0px;, which adjusts the top of the border. Secondly, the CSS selectors are also applied left-to-right and based on a hierarchy of priorities where the most specified selector prevails: a class will have priority over a tag name, and an id will have priority over a class.
A complete overview of CSS commands can be found here (link to website). An example is shown in listing 3 and references the HTML page in listing 2.
/* This is a comment. */
.bordered-dotted {
border: #222222 dotted 2px;
border-top: 0px;
}
.bordered-solid {
border: #222222 solid 2px;
border-top: 0px;
}
div#header {
padding: 10px;
background-color: #222222;
}
h1 {
color: #eeeeee;
}
div#contents {
padding: 10px;
color: blue;
}
/* This rule will be applied, i.e, the text color will be black (not red or blue). */
#contents p {
padding-bottom: 10px;
color: black;
}
p {
color: red;
}
a {
color: #222222;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
a:visited {
color: #222222;
text-decoration: none;
}
When writing CSS rules, it is often useful to plan ahead. Make sure the structure of the HTML elements allows you to implement your design. Using <div> or <span> elements as containers for other elements that require specific styling, for example to let elements float next to each other, illustrates the close interaction between style and structure.
Nowadays browsers, such as Google Chrome or Firefox, provide built-in tools that can help for web development, especially for writing CSS code. When right-clicking an element, select the “Inspect element” option. Next, navigate through the HTML elements and observe how the styling attributes change. You can even add CSS declarations to the CSS rules via the interface.
3.2.3 PHP
PHP is a programming language used mainly for building websites. It is a scripting language, but can be used to create object-oriented programs as well. PHP runs on a web server. As illustrated in figure 5, when a client requests a PHP page, the PHP interpreter on the server will first run the PHP script, after which the server returns the resulting page via an HTTP response to the client [6].
Figure 5 : HTTP request for a page containing a PHP script that is run at the server before the result is sent back to the client.
PHP files have the .php extension. PHP scripts can be used to produce any text-based file format, including HTML and its variants, XML, JSON, CSV, plain text, CSS, JavaScript, and so on. Usually however, PHP files will contain plain HTML and JavaScript aside from the PHP commands themselves.
Syntax
PHP commands are placed between the PHP start <?php and end ?> delimiters. The syntax of PHP is similar to other programming languages like JavaScript or Perl, albeit with some particular differences.
Variables in PHP start with a dollar sign followed by at least one letter and other characters, e.g., $a, $a1, $a_var, $abc, et cetera, are all valid variable names. Note that variables don’t have explicit types, similar to Perl or JavaScript. PHP also has a number of built-in global variables. $_GET and $_POST are arrays that contain key-value pairs of the GET and POST requests respectively. The $_COOKIE and $_SESSION variables are also arrays containing all cookie and session key-value pairs respectively.
Conditional statements are similar to other programming languages. The if–else construct evaluates a boolean statement and performs the body of the if construct if true, and the one from the else statement otherwise. In boolean statements, there are four values that are evaluated as “false”, namely: any variable or expression that returns 0, an empty string or a string containg 0, and finally the constant false itself [6]. For example, the expression 98*0+1 will yield true, while the expression 8-3*5+7 will yield false.
Loops are similar to other languages, again with while, for, and foreach, as familiar constructs.
Function declarations start with the function keyword, followed by the list of parameters between brackets. The body of the function is written between braces. A full list of built-in functions can be found here (link to website). Some interesting functions are print, echo, include, array_key_exists, strlen, trim, count, ini_set, session_start, setcookie, is_numeric, and so on.
Listing 4 shows an example PHP script where a new array is created and assigned to a variable $names, and finally printed using a function printArray. The printArray function prints an ordered list by looping through each element of the array and printing HTML tags around it. In listing 5, this script is directly included into a PHP page that already contains some HTML.
<?php
// This is a comment.
$names = array( 0 => "John",
1 => "Francis",
2 => "Martin",
3 => "Peter"
);
printArray($names);
/**
* Prints an ordered list in HTML code from the elements of the given array.
* For each element a button is added to request more information.
* @param $array the array of elements to print
*/
function printArray($array) {
print ("<ol>");
foreach ($array as $value) {
print ("<li>" . $value
. "<button onclick=\"getInfo('" . $value
. "');\">info</button><div id=\"" . $value . "\"></div></li>");
}
print ("</ol>");
}
?>
<html> <head> <title>Example PHP</title> <script type="text/javascript" src="script2.js"></script> </head> <body> <h1>Names</h1> <?php include 'script.php'; ?> </body> </html>
Input handling
One of the most important differences between dynamic and static web pages, is that dynamic web pages allow user interaction beyond simple navigation. A web page can ask the user for specific input, e.g., login data, and also remember previous actions and choices.
Listing 6 shows a form with as method POST and action attribute the file form.php, which is in this case, the file itself. What will happen when the input element of the type submit is clicked, is that the contents of the other input elements, in this case the text input element with as name name, will be sent to the server via an HTTP request via the given method (POST) and target page (form.php). When the HTTP request arrives at this page, the PHP script in this page will be run at the server. The named parameter will be retrieved via the global parameter $_POST and printed on the page that is returned to the client’s browser.
<html> <head> <title>Example Form</title> </head> <body> <form method="POST" action="form.php"> Enter your name : <input type="text" name="name"/> <input type="submit" value="Submit"/> </form> <?php if(isset($_POST["name"]) && !empty($_POST["name"])) print "<p>Hello, " . $_POST["name"] . "!</p>"; ?> </body> </html>
Of course, the example shown here is rather pointless. In practice, the input can be stored in the database or used to perform a search query, et cetera. Radiobuttons, password input, and other input types are all supported, so feel free to experiment.
3.2.4 JavaScript
JavaScript is a client-side scripting language. Like PHP, it can also be used in an object-oriented way, but for smaller projects, using separate functions is often more than enough.
Since JavaScript is run in the browser, the code has to be downloaded and run on the client-side. As a result, security and efficiency are important aspects of the execution of JavaScript. Like CSS, some characteristics are browser-dependent, which has led to the development of JavaScript libraries, e.g., jQuery, that try to provide transparancy at this level.
Syntax
The JavaScript syntax resembles some combination of PHP and Java. Note that variables are created using the var command and are not strongly typed.
Changing the DOM
To build interactive web pages, you’ll usually want to update only parts of a web page, instead of loading a whole new page. JavaScript enables you to do this, as it allows you to modify parts of a web page and even load new content from a remote server. The DOM object can be accessed through the public document variable. The document variable has a number of properties and methods associated with it, that will allow you to change the contents and structure of the web page. The full documentation for the HTML DOM Document object can be found here (link to website). For other JavaScript documentation, W3Schools provides an overview which can be found here (link to website).
Listing 7 shows a relatively simple script with a function to alter the class attribute of an HTML element, and another function to add and remove certain elements from the DOM tree of the HTML page.
function changeBorder() {
var element = document.getElementById("contents");
if (element.className == "bordered-solid")
element.className = "bordered-dotted";
else
element.className = "bordered-solid";
}
function addParagraph() {
// Create a paragraph with given text.
var p = document.createElement("p");
var node = document.createTextNode("Etiam ut mauris sed libero vulputate mollis vitae in nisi. Duis ultrices, mi sed scelerisque gravida, mi urna aliquam arcu, in gravida magna eros in orci. Integer fringilla, diam id consectetur tempor, mi libero luctus enim, vitae vulputate magna magna sed nibh. Etiam faucibus enim ut pharetra mattis. Nam gravida accumsan nisi, non fringilla sem ultricies sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi enim, commodo at vestibulum quis, auctor in libero.");
p.appendChild(node);
// Add the paragraph to the DOM.
var element = document.getElementById("contents");
element.appendChild(p);
// Remove the button from the DOM.
var button = document.getElementById("btn-new-p");
element.removeChild(button);
}
Ajax
We have already seen how you can modify the DOM through JavaScript; now we will take a closer look at how you can use JavaScript to load content from another server and inject it into the current web page. The technique we will describe here is called AJAX, which is a technique to create asynchronous requests, i.e., when a request is made in the code, the code will continue with the rest of the script without waiting for the result of the request [8].
The script shown in listing 8 is included in the resulting HTML page from listing 5. When a name is clicked in the list, the contents of the (initially empty) div element will be filled with additional information about that person. To do this, we will get data in JSON format from an external resource that is accessible through an HTTP request. Note that there are other possibilities than using JSON for this purpose, we could also have chosen XML, CSV, or other alternatives.
var request = null;
var id;
function getInfo(name) {
id = name;
var element = document.getElementById(id);
if (element.innerHTML == "") {
request = new XMLHttpRequest();
var url = "getinfo.php?name=" + escape(name);
request.open("GET", url, true);
request.onreadystatechange = showInfo;
request.send(null);
} else {
element.innerHTML = "";
}
}
function showInfo() {
if (request.readyState == 4)
if (request.status == 200) {
var response = JSON.parse(request.responseText);
var element = document.getElementById(id);
element.innerHTML = response.name
+ " works as a " + response.job
+ " at " + response.company + ".";
}
}
To create a HTTP request in JavaScript, we create a XMLHttpRequest object – it should be noted that not all browsers support this object. Next we add the method, cf. table 1, the url with additional url-escaped parameters, and a boolean value true to indicate that the request is asynchronous. Next we add an event listener to the onreadystatechange property of the request. As you can see in the referenced method, as soon as the readyState property equals 4, the rest of the code in that method will be executed. The last statement in the getInfo function sends the request to the URL.
The source code presented here is far from ideal, but should be enough to illustrate some of the basics of AJAX. Modern web developers also tend you use jQuery more and more, as it provides better support for Ajax than raw JavaScript. Nonetheless, it is not a bad idea to start by learning how it all works at a lower level.
PHP meets JavaScript
JavaScript usually runs at the client-side, but as we saw in the previous paragraph, it can be used to make requests to the server to fetch certain resources. The requested resources can be static, for example an image or text file, but can also depend on parameters added to the HTTP request. In the last case, we will have to take those parameters from the request and let the server compute an adequate response.
When we are using PHP, the request parameters are stored in the global variables $_GET and $_POST for the GET and POST methods respectively. As we saw earlier, the server will simply return the computed PHP script over an HTTP response. If we look at listing 8, the client sends the getinfo.php page a variable called name using the GET method, and expects some result in a json format. Listing 9 shows a script that provides this functionality. In practice, we won’t use a static array of course to retrieve data from, but instead make a connection to a database.
<?php
$info = array( "John" => array("name" => "John Wright", "job" => "Programmer", "company" => "DistrICT Ltd."),
"Francis" => array("name" => "Francis O'Connor", "job" => "CRM consultant", "company" => "DistrICT Ltd."),
"Martin" => array("name" => "Martin Lloyd", "job" => "Test engineer", "company" => "DistrICT Ltd."),
"Peter" => array("name" => "Peter Richards", "job" => "CEO", "company" => "DistrICT Ltd.")
);
printInfo(urldecode($_GET["name"]), $info);
function printInfo($name, $info) {
print json_encode($info[$name]);
}
?>
4. Requirement analysis and design
4.1 Data modeling and SQL
Data forms the core of almost any software system today, and data modeling and storage are of course important aspects of websites as well. Although in modern applications there has been a tendency towards big data with its associated technologies (e.g. NoSQL), for small-scaled websites, relational databases will do the job nicely.
A database is a collection of persistent data and is managed by a database managment system. A database runs on a database server, which is a “collection of programs that enables users to create and maintain a database” [9]. A database server has one or more database languages. Structured Query Language (SQL) is a database language designed for managing relational databases in which commands can be expressed that can be executed on a database server [9].
SQL variants like PostgreSQL, SQLite, and MySQL, are very much suited for building websites. In this article we will focus on MySQL, as it is already supported in the WampServer package; in fact the “m” stands for “MySQL”.
4.1.1 The relational model
The relational model is, from a formal perspective, a collection of mathematical definitions, largely based on predicate logic and set theory [9].
The relational model consists of the following terminology (among others). A table is a collection of rows, which in turn consist of a set of values, each of which is associated with a column. The columns correspond to typed properties of the table. For example the Name column of a Person table could have as type VARCHAR(50) for example. Other columns of the Person could then be an address, date of birth, social security number and so on. The contents of the table must also answer to a number of integrity rules or constraints; for example the social security number has to be a nine-digit number. Finally it should be possible to uniquely identify each row. This is done through keys. A primary key is a column of the table containing unique values for that table. In our example, we could use the social security number column as a primary key for the Person table. To reference other tables, a table can have an additional column containing a foreign or referential key [9]. For example, the Person could have a foreign key licence plate, referencing another table Car.
A modeling tool that is usually used for modeling relational databases is the Entity relationship diagram (ERD). As the name implies it is a diagram in which entities, which usually correspond to the tables of a database, and the relationships among them are shown. An ERD for the example from the previous paragraph is shown in figure 6.
Figure 6 : ERD example.
4.1.2 (My)SQL commands and syntax
We won’t go into too much detail here, but instead refer to W3School’s tutorial which can be found here (link to website). Note that the SQL syntax is often quite elborate with a number of options for each statement, but usually you only need to know a small subset of them. Overall SQL is, just like PHP, CSS and JavaScript, heavily documented and the solutions to most of the problems you will encounter, you will be able to find somewhere online. The full MySQL syntax can be found here (link to website).
When working with WampServer, PHPMyAdmin is already provided. This is a software tool for managing MySQL databases and will be available at http://localhost/phpmyadmin/. It will save you some trouble of writing most of the SQL commands yourself and lets you easily inspect the database’s contents.
4.1.3 SQL and PHP
TODO : example, name spaces, …
4.2 Use cases and domain modeling
Use cases and domain models are standard requirement analysis tools. For more information on these techniques we refer to previous posts.
4.3 Modeling website structure
The structure of a website is tightly coupled with the use cases and usability of your design. One way to model the structure of your website is to use a site map. A site map is a document containing a description of all the web pages and how they are linked to each other. Also database connections or links to other (external) resources can be included. In this way, a site map forms a more technical description of the website than for example a storyboard. It is however less formal than, let’s say, a component diagram for example. Figure 7 shows an example of a site map.
Figure 7 : Site map as (informal) modeling tool.
4.4 User interface design
We already have discussed techniques such as paper and digital prototyping in previous posts, so we won’t go in more detail here.
5. Implementing a PHP website
5.1 Problem description
A friend of yours is a cartoonist in her spare time and she would like to own her own custom website. She asked you to build one for her.
The general idea of the website should be as follows. The main page should contain the latest published cartoon and a left and right button to go to the previous or next ones. There should also be a page with some info about her and her work.
5.2 Analysis
TODO : create document containg the requirement analysis.
5.3 Implementation
TODO : implementation for the case study.
6. Final thoughts
TODO : conclusion.
References
[1] Internet Live Stats, 2014, “Total number of Websites”, Online, available at: http://www.internetlivestats.com/total-number-of-websites/, accessed 15 June 2014.
[2] G. Coulouris, J. Dollimore, T. Kindberg and G. Blair, 2011, “Distributed Systems: Concepts and Design (5th Edition)”, M. Horton, Red., Addison-Wesley, 1063 pages.
[3] PHP.net, 2013, “Usage Stats for January 2013”, Online, available at: http://php.net/usage.php, accessed: 15 June 2014.
[4] A. S. Tanenbaum, 2010, “Computer Networks (5th Edition)”, Prentice Hall; 5 edition (October 7, 2010), 0132126958, 960 pages.
[5] E. Castledine and C. Sharkie, 2010, “jQuery Novice to Ninja”, SitePoint Pty. Ltd., first edition, 48 Cambridge Street Collingwood VIC Australia 3066, ISBN 978-0-9805768-5-6, 407 pages.
[6] D. Sklar, 2004, “Learning PHP 5”, O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472, 348 pages.
[8] R.M. Riordan, 2008, “Head First Ajax”, O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472, 497 pages.
[9] R.F. van der Lans, 2006, “Het SQL leerboek”, sixth edition, Sdu Uitgevers bv, Den Haag, 752 pages.
DistrICT Education 