Web-based application development

ip4_lecture_notes_1a.pptx

Home >Information Systems homework help >Web-based application development

Web based application development

In this lab you will create a web-based application that interacts with a relational database management system (DBMS). We use PHP to connect to the Course Registration Database that you created and populated for individual project 3. PHP (a recursive acronym that stands for “PHP Hypertext Preprocessor) is a programming language designed for producing dynamic web pages. PHP is mainly used for server-side scripting (as opposed to client-side scripting such as JavaScript). PHP is installed on your ITaP/ICS personal web space and you will use your ICS web space to complete this assignment. If you have not already set up your web space on ICS please refer to instructions on GoldAnswers (goo.gl/XN0qox) for details on how to do that.

This series of 3 labs provides a guide for individual project 4 (IP4). The lab is outlined as follows – first, I will provide a very basic refresher on HTML (Hypertext Markup Language). In order to create PHP scripts, it is important that you understand the basic structure of HTML. Then, I will provide a basic overview of the PHP language, after which I will explain MySQL database connections using PHP. This section will provide the necessary knowledge to be able to complete the exercises in your individual project.

Notes: Server-side scripting refers to a web server technology in which a user’s request is processed at the web server to dynamically generate HTML pages which are sent to the user’s web browser for presentation. Conversely, client-side scripting refers to web technology where an HTML page embeds code (e.g., JavaScript) that is processed by the web browser (i.e. the client).

Notes: Copy the examples into your W: drive under your www folder and use the same URL convention to open them in a web browser. If you put the example files into a sub-directory within the www directory, your URL should reflect that. For example, if you extract the example files to a sub-directory named “545-examples” the URL you should use is http://web.ics.purdue.edu/~yourID/545-examples/example1.html. Obviously you should change yourID for your career account username and example1.html with whatever file you are trying to access.

Basic HTML reference

Tags

Structural

Presentational

Hypertext

There are three main categories of tags – structural elements, presentational elements and hypertext elements.

Structural elements describe the purpose of the text. For example, the <h[x]> tag is used for headings, where x is the level of the heading (i.e., <h1> for first level heading, <h2> for second level heading etc.). Structural tags do not have inherent formatting associated with them, rather it is the responsibility of the HTML browser software (i.e., web browsers such as Internet Explorer, Mozilla Firefox, Apple Safari) to render the text according to its purpose. Most browsers have standardized procedures on how structural elements should be formatted.

Presentational elements describe the actual formatting of the text. For example, <b> is used for bold, <i> is used for italics, <u> is used for underline etc.

Hypertext elements use the <a> tag (i.e., anchor) to create a hyperlink in the flow of text. Naturally, a hyperlink needs a destination (which page should load when the hypertext anchor is clicked) – the attribute for the destination is href. For example, if you want to create the link “Click here to go to Purdue’s homepage”, you would write:

<a href="http://www.purdue.edu/">Click here to go to Purdue’s homepage</a>

More details about HTML elements can be found at http://en.wikipedia.org/wiki/HTML_element. You should familiarize yourself with the HTML tags explained in the wikipedia entry. There are many HTML tags, so I will not even try to explain all of them in this lab.

HTML document structure

<html>

<head>

<title>This is what is shown in the title of your browser window</title>

</head>

<body>

This is what is shown in the main window of your browser. How exciting!

</body>

</html>

So what does an HTML page look like? An HTML page typically has the structure shown in the slide above.

First, the whole document is enclosed with the <html> tag (i.e., the first thing in the document is the <html> tag and the last thing in the document is the closing </html> tag). Within the <html> block, there are two elements – the head block and the body block. The head block contains information about the page – metadata. For example, the title of the document is usually specified in the head block with the title tag. Then comes the body block, within which the main document elements (i.e., content) are specified.

An HTML document usually [see Note1] uses the .html extension. So an HTML document is simply a text file with content that is structured using HTML tags and saved as [filename].html. For example, type the above example in a plain text editor (e.g., Notepad) and save it as htmlDocumentStructure.html [see Note2]. If you have set up your ICS web space, you should have a www folder in your W: drive. Save it there. Now open a browser and type http://web.ics.purdue.edu/~userID/545-examples/htmlDocumentStructure.html in the address box of your web browser (change userID to your career account username).

[See code for htmlDocumentStructure.html on next page]

Note1: The term “usually” is used here because this really depends on how the web server is configured. Most web servers are configured so that .html extensions denote HTML pages. Some web servers (e.g., Microsoft IIS) also include .htm as the default extension for an HTML page.

Note2: Note that if you haven’t set up your computer (or the lab computer that you are using) to show common file extensions, this example may not work properly. On most default configurations of Windows if you use Notepad to save the above file as basic.html, it’ll save it as basic.html.txt, but since the operating system is configured to hide the extension, it will show as basic.html. A simple fix to this problem is to change the “Save as type” option in the Save dialog of Notepad from “Text Document (*.txt)” to “All Files”.

HTML formatting Tips

Column 1

Column 2

Using Tables

Table 1

Table 2

Column 1

Column 2

HTML documents are notoriously tricky to format exactly the way that you (the web designer) wants a document to show on a user’s screen. For example, unlike a WYSIWYG (What You See Is What You Get) word processor, an HTML document does not have page sizes, margins or anything that would help you specify the format of a document. Most html pages take the window width to be the size of the page. So if your web browser window is wide, then the text will span the whole breadth of the page, which is quite difficult to read. One way to deal with this is using tables (or illusions created with tables). Before I explain further what I mean, let us review the table-related tags in HTML.

A table is enclosed with the <table> tag. The table tag does not know the dimension of the table (i.e., number of columns and rows etc.). It just renders the table based on what it sees. So you need to define the dimensional structure of the table as well. The following tags are typically used for table structure:

<tr> for table row

<th> for table heading data

<td> for table data.

For example, to display the tables above (table 1 and 2): [see code for tables.html on next page]

This example will not be explained here, but you should try to figure out how the various tags are used. Table tags have many attributes that can be applied to create some kind of formatting. For example, the td tag can use the rowspan or colspan attributes to merge cells across rows or columns.

Source Code for tables.html

<html>

<head>

<title>Table in HTML</title>

</head>

<body>

<h1>Table 1</h1>

<tr><th>Column 1</th><th>Column 2</th></tr>

</table>

<h1>Table 2</h1>

<tr><th>Column 1</th><th>Column 2</th></tr>

</table>

</body>

</html>

TABLE.HTML

HTML formatting tips (condt)

Home | Purdue | Krannert | Blackboard

Thing 1

Thing 2

Thing 3

Thing 4

The body of the document will go here...

So how do HTML tables help with formatting? HTML documents do not have any inherent page formatting specifications (e.g., page width, margin, etc). With tables, however, it becomes possible to create the illusion of formatting. The following example will make this point clearer.

Let us assume you wanted to create a page with global navigation links at the top and some local navigation links on the left hand side. The page you want to create will look something like the page above:

[see code for formattingTips.html on next page]

In the above example, we have a table with a width of 600 (see width=600 in the <table> tag) pixels with 2 columns and 2 rows where the first row has the two columns merged (i.e., the cell spans two columns; see colspan=2 in the <td> tag). The global navigation links (i.e., links to Home Purdue, Krannert, and Blackboard) are centered within the cell (see align=center in the <th> tag). The second row has two columns where the width of the first cell is 100 and that of the second cell is 500 (see the width=xxx definition in the <td> tag). These cells (or the whole row) is specified so that the content is vertically aligned to the top of the cell (see valign=top in the <tr> tag). Also note that the height of the second row has been set to 500 (see height=500 in the <tr> tag). The bulleted list goes into the first (left) cell and the body content goes in the second (right) cell. Note that you will not see the frame for the table if you open the above example. Change the border=0 into border=1 to show it.

Source Code for formattingTips.html

<html>

<head>

<title>Document Formatting with Tables</title>

</head>

<body>

<tr>

<a href="index.html">Home</a> |

<a href="http://www.purdue.edu/">Purdue</a> |

<a href="http://www.krannert.purdue.edu">Krannert</a> |

<a href="https://mycourses.purdue.edu">Blackboard</a>

</th>

</tr>

<ul>

<li>Thing 1

<li>Thing 2

<li>Thing 3

<li>Thing 4

</ul>

</td>

The body of the document will go here...

</td>

</tr>

</table>

</body>

</html>

FORMATTING TIPS

Formatting HTML – cascading styling sheet (CSS)

By now, you should have a good idea about what HTML is, and how to create HTML documents. Now we review concepts related to document formatting. Earlier, we introduced some tags used for formatting – for example, the <b>, <i> and <u> tags for bold, italics and underline, respectively. While you may format your text page by page, it is very inefficient to do so. Cascading Style Sheets are a document formatting template mechanism that allow you to define a rendering template that can be reused.

[see example style sheet style.css on the next page]

The basic syntax of the stylesheet is very intuitive – define the formatting styles for each kind of tag. For example, the body definition tells us that the background color is white (#ffffff ), the Arial font should be used (and in case the Arial font does not exist on the client computer, then use Helvetica and if this fails use a sans-serif font), the font size should be 10 points and there should be no top or left margins (i.e., margin = 0 pixels). Note that some tags, like the hypertext anchor <a> tag have sub-classes. The link sub-class defines how to show a link, the visited sub-class refers to a link that has been visited, the active sub-class refers to a link while it is being clicked, and finally the hover sub-class refers to what happens when the mouse is hovering over the link.

Additional details on the CSS specification can be found at http://www.w3.org/Style/CSS/.

Now that you know how to define the stylesheet template, how do you apply it to an HTML document? There are several ways to use CSS in HTML. The most intuitive way is to link the CSS definition to a file. In the head part of an HTML document, simply insert the following html code

Source Code for style.css

body { background: #ffffff;

color: #000000;

font-family: Arial, Helvetica, sans-serif;

font-size: 10pt;

margin-top : 0;

margin-left : 0; }

td { color: #000000;

font-family: Times, Verdana, Helvetica, sans-serif;

font-size: 10pt; }

th { color: #000000;

font-family: Arial, Verdana, Helvetica, sans-serif;

font-size: 10pt;

font-weight: bold; }

ul { list-style-type: square;

list-style-position: outside;

font-family: Times, Verdana, Helvetica, sans-serif;

font-size: 10pt; }

li { color: #000000;

font-family: Times, Verdana, Helvetica, sans-serif;

font-size: 16pt; }

p { font-family: Arial, Verdana, Helvetica, sans-serif;

font-size: 10pt; }

h1 { color : #336666;

font : bold 12pt Arial, Verdana, Helvetica, sans-serif; }

h2 { color : #000000;

font : bold 12pt Arial, Verdana, Helvetica, sans-serif; }

a:link { color: #000066;

background-color: transparent; }

a:visited { color: #666666;

background-color: transparent; }

a:active { color: #006699;

background-color: transparent; }

a:hover { color: #FF0000;

font-weight: bold; }

hr { size: 1; }

Style.CSS

Source Code for formattingTipsWithCSS.html

<html>

<head>

<title>Linking to a CSS Stylesheet for Formatting</title>

</head>

<body>

<tr>

<a href="index.html">Home</a> | <a href="http://www.purdue.edu/">Purdue</a> |

<a href="http://www.krannert.purdue.edu">Krannert</a> | <a href="https://spcourses.krannert.purdue.edu/courses/S-2011-MGMT-54500001/default.aspx">Sharepoint</a>

</th>

</tr>

<ul>

<li>Thing 1

<li>Thing 2

<li>Thing 3

<li>Thing 4

</ul>

</td>

The body of the document will go here...

</td>

</tr>

</table>

</body>

</html>

FORMATTING TIPS WITH CSS

GETTING USER INPUT – HTML FORMS

The typical method for getting user input is by using forms. Think of a registration page as an example. The form would have input fields such as textboxes for your name, a special textbox that only prints * for a password, some radio buttons, some checkboxes, some drop downs (e.g., for State within the US) etc. HTML forms are used for getting data.

[see code for forms.html on the next page]

All form elements should be enclosed within the <form> and </form> tags. The form tag has several important attributes. First, the method denotes how the information from the form should be sent to the web server. There are 2 major methods – GET and POST. The GET method sends the input as a query string appended to the URL. The POST method sends the form data as a standard input (STDIN) to the web server. The real difference is how the web server gets the form data. Second, the action attribute denotes which page (or program) the form data should be sent to. Here we have made the target of the form submission to be processForm.php (we’ll discuss this PHP script later).

For example, if you type in “John Doe” for Name, “doe1234” for password, “123 Main St.” for address, select “IN” for State, and checked “Systems Analysis” and “Systems Design” for the Hobbies, and clicked the “Click here to submit” button, notice the URL in the address field of your web browser:

http://web.ics.purdue.edu/~yourID/545-examples/processForm.php?name=John+Doe&password=doe1234&address=123+Main+St.&state=in&analysis=on&design=on

In this example, the form data is sent to the web server as URL-encoded key-value pairs delimited by &.

Note: If you use the GET method, then the form data will show in the URL. This means that you can bookmark pages that are the result of form submissions. However, if you have sensitive information (e.g., passwords), then having this information show up in the URL address is not very sensible. The POST method should be used in such cases.

Source Code for forms.html

<html>

<head><title>HTML Forms</title></head>

<body>

<p>Password: <input type=password name=password>

<p>Address: <input type=text name=address>

<p>State:

</select>

<p>Hobbies:

<input type=checkbox name=plan>Project Planning

<input type=checkbox name=analysis>Systems Analysis

<input type=checkbox name=design>Systems Design

<input type=checkbox name=implement>Systems Implementation

</form>

</body>

</html>

FORMS.HTML