Scribd
Upload
133 views

Week1 Introduction PDF

This document provides an overview of key concepts related to developing web information systems in Week 1, including: - The history and architecture of the World Wide Web and how it uses HTTP, HTML, and hyperlinks. - How static and dynamic web pages work, with static pages being plain text files and dynamic pages being created by server-side scripts using input from users or databases. - Popular web development technologies like PHP, MySQL, and server-side languages for creating dynamic content. - A simple example of a PHP application that calculates product discounts, consisting of HTML, CSS, and PHP files to demonstrate the client-server model.

Uploaded by

Bhuvan Ahuja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
133 views

Week1 Introduction PDF

This document provides an overview of key concepts related to developing web information systems in Week 1, including: - The history and architecture of the World Wide Web and how it uses HTTP, HTML, and hyperlinks. - How static and dynamic web pages work, with static pages being plain text files and dynamic pages being created by server-side scripts using input from users or databases. - Popular web development technologies like PHP, MySQL, and server-side languages for creating dynamic content. - A simple example of a PHP application that calculates product discounts, consisting of HTML, CSS, and PHP files to demonstrate the client-server model.

Uploaded by

Bhuvan Ahuja
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

DWIN309

Developing Web Information


Systems

Week 1
Introduction to Web development and Tools

Kent Institute Australia Pty. Ltd.


ABN 49 003 577 302 CRICOS Code: 00161E
Version 2 – 18th December 2015 RTO Code: 90458 TEQSA Provider Number: PRV12051
WWW
• The World Wide Web (WWW) was developed by Tim Berners-Lee
and other research scientists at CERN, the European center for
nuclear research, in the late 1980s and early 1990s.
• WWW is a client-server model and uses TCP connections to transfer
information or web pages from server to client.
• WWW uses a Hypertext model. Hypertext allows interactive accesses
to a collection of documents.
• Documents can hold
• Text (hypertext), Graphics, Sound, Animations, Video
• Documents are linked together
• Non-distributed – all documents stored locally (e.g on CD-Rom).
• Distributed – documents stored at remote servers on the Internet.
WWW – Hyperlinks or links
• Each document contains links (pointers) to other documents.
• The link represented by "active area" on screen
• Graphic - button
• Text - highlighted
• By selecting a particular link, the client fetches the referenced
document from a server for display.
• Links may become invalid.
• Link is simply a text name for a remote document.
• Remote document may be moved to a new location while name in
link remains in place.
WWW – Document Representation
• Each WWW document is called a page.
• Initial page for individual or organization is called a home page.
• Page can contain many different types of information; page must
specify:
• Content – The actual information
• Type of content – The type of information, e.g. text, pictures etc.
• Links to other documents
• Rather than having a fixed representation for every browser, pages
are formatted with a mark up language.
• This allows browser to format page to fit display.
• Different browsers can display pages in different ways.
• This also allows text-only browser to discard graphics for example.
• Standard is called HyperText Markup Language (HTML).
WWW- HTML
• HTML specifies
• Major structure of document
• Formatting instructions for browsers to execute.
• Hypertext links – Links to other documents
• Additional information about document contents
• Two parts to document:
• Head contains details about the document.
• Body contains the information/content of the document.
• Each web page is represented in ASCII text with embedded HTML
tags that give formatting instructions to the browser.
• Formatted section begins with tag, <TAGNAME>
• End of formatted section is indicated by </TAGNAME>
WWW – HTML Example
<HTML>
<HEAD>
<TITLE> Example Page for lecture</TITLE>
</HEAD>
<BODY>
Lecture notes for today go here!
<CENTER>
<TABLE BORDER=3>
<TR>
<TD><A HREF="./week10.html">Previous Lecture</A>
<TD><A HREF="./week12.html">Next Lecture</A>
<TD><A HREF="./Contents.html">Table of contents</A>
<TD><A HREF="./solutions.html">Solutions to Assignments</A>
<TD><A HREF="./index.html">Index of terms</A>
</TABLE>
</CENTER>
</BODY>
</HTML>
The architecture of a web application
• WWW consists of many components working together to bring a web
page to your desktop over the Internet.
• Web applications use a client-server architecture consisting of
servers that share resources with clients over a network.

Client Web Server Database Server


The
Internet

Client Email Server

A simple client-server architecture


The architecture of the Internet

LAN LAN LAN LAN

LAN LAN
WAN WAN
IXP

IXP IXP

WAN WAN
LAN LAN

LAN LAN LAN LAN


Key terms
• A server makes resources available to other computers called clients over a
network. A server can share files, printers, web sites, databases, or e-mail.
• A network uses routers to get information from the sender to its destination.
• A Local Area Network (LAN) directly connects computers that are near each
other.
• A Wide Area Network (WAN) uses routers to connect computers that are far
from each other.
• The Internet consists of many WANs that have been connected together at
Internet Exchange Points (IXP). A list of IXPs can be found at
http://en.wikipedia.org/wiki/TXP.
• An Internet Service Provider (ISP) owns a WAN and leases access to this
network. It connects its WAN to the rest of the Internet at one or more IXPs.
Static web pages
• A static web page is a web page that only changes when the web
developer changes it. It is a plain text file that contains all the content
to be displayed in the web browser. This web page is sent directly
from the web server to the web browser when the browser requests
it.
A simple HTTP request
GET / HTTP/1.1
Host: www.example.com

A simple HTTP response


HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 136
Server: Apache/2.2.3

<html>
<head>
<title>Example Web Page</title>
</head>
<body>
<p>This is a sample web page</p>
</body>
</html>
Two protocols that web applications
depend on
• HyperText Transfer Protocol (HTTP) is the protocol that web browsers
and web servers use to communicate. It sets the specifications for
HTTP requests and responses.
• Transmission Control Protocol/Internet Protocol (TCP/IP) is a suite of
protocols that let two computers communicate over a network.
Description
• HyperText Markup Language (HTML) is the language used to design the web pages of an
application.
• A static web page is an HTML document that’s stored on the web server and doesn’t
change in response to user input. Static web pages have a filename with an extension of
.htm or .html.
• When the user requests a static web page, the browser sends an HTTP request to the web
server that includes the name of the file that’s being requested.
• When the web server receives the request, it retrieves the web page and sends it back to
the browser in an HTTP response. This response includes the HTML document that’s
stored in the file that was requested.
Dynamic web pages
• A dynamic web page is a page that’s created by a program or script
that’s running on a server. This means that the page can be changed
each time it is viewed.
• The changes in the page can come from processing the form data
that the user submits or by displaying data that’s retrieved from a
database server.
HTTP request

HTTP response

Web Browser Web Server Database Server

PHP
Script

How a web server processes a dynamic web page With PHP


Web browsers Server-side languages
• Internet Explorer • PHP
• Firefox • JSP
• Safari • ASP.NET
• Opera • Perl
• Chrome • Python
Database servers
Web servers • MySQL
• Apache • Oracle
• IIS • DB2
• MS SQL Server
Highlights in the history of PHP

Version Year Description


2 1995 Personal Home Page.
3 1998 PHP: Hypertext Processor
4 2000 Introduced the Zend Engine
5 2004 Introduced the Zend Engine II.
Improved support for OOP Added the PHP
Data Objects extension
What’s new in PHP 7
Highlights in the history of MySQL

Version Year Description


3.23 1995 The original version of MySQL
4.0 2003 Introduced support for unions.
4.1 2004 Introduced support for subqueries and
prepared statements.
5.0 2005 Introduced support for stored
procedures, triggers, views, and
transactions. 5.1 2008 Introduced
support for row-based replication and
server log tables.
MySQL notes

• MySQL is owned and sponsored by MySQL AB, a for-


profit firm.
• In 2008, Sun Microsystems acquired MySQL AB.
• In 2009, Oracle Corporation acquired Sun Microsystems.
• In 2009, many of the original developers of MySQL left
MySQL AB and begin working on different forks of the
open-source code. One of the most popular of these forks is
MariaDB.
Check current version of MySQL here
The Product Discount application
• To give a better idea of how a PHP application works, this topic
presents a simple application. This application consists of three files:
an HTML file, a CSS file, and a PHP file.
The first page of an application
The second page (display_discount.php)
The HTML file (index.html)
<!DOCTYPE html>
<html>

<head>
<title>Product Discount Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<main>
<h1>Product Discount Calculator</h1>
<form action="display_discount.php" method="post">

<div id="data">
<label>Product Description:</label>
<input type="text" name="product_description"><br>

<label>List Price:</label>
<input type="text" name="list_price"><br>
The HTML file (index.html) (continued)
<label>Discount Percent:</label>
<input type="text" name="discount_percent">
<span>%</span><br>
</div>

<div id="buttons">
<label>&nbsp;</label>
<input type="submit" value="Calculate Discount"><br>
</div>

</form>
</main>
</body>
</html>
The CSS file (main.css)
body {
font-family: Arial, Helvetica, sans-serif;
margin: 1em;
padding: 0;
}
main {
display: block;
width: 450px;
margin: 0 auto;
padding: 1.5em;
background: white;
border: 2px solid navy;
}
h1 {
color: navy;
}

label {
width: 10em;
padding-right: 1em;
float: left;
}
The CSS file (main.css) (continued)
#data input {
float: left;
width: 15em;
margin-bottom: .5em;
}

#data span {
padding-left: .25em;
}

#buttons input {
float: left;
margin-bottom: .5em;
}

br {
clear: left;
}
The PHP file (display_discount.php)
<?php
// get the data from the form
$product_description = $_POST['product_description'];
$list_price = $_POST['list_price'];
$discount_percent = $_POST['discount_percent'];

// calculate the discount


$discount = $list_price * $discount_percent * .01;
$discount_price = $list_price - $discount;

// apply currency formatting to the dollar and percent amounts


$list_price_formatted = "$".number_format($list_price, 2);
$discount_percent_formatted = number_format
($discount_percent, 1)."%";
$discount_formatted = "$".number_format($discount, 2);
$discount_price_formatted = "$".number_format($discount_price,2);

// escape the unformatted input


$product_description_escaped =
htmlspecialchars($product_description);
?>
The PHP file (display_discount.php) (continued)
<!DOCTYPE html>
<html>

<head>
<title>Product Discount Calculator</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<main>
<h1>Product Discount Calculator</h1>

<label>Product Description:</label>
<span><?php echo $product_description_escaped; ?></span><br>

<label>List Price:</label>
<span><?php echo $list_price_formatted; ?></span><br>
The PHP file (display_discount.php) (continued)
<label>Standard Discount:</label>
<span><?php echo $discount_percent_formatted; ?></span><br>

<label>Discount Amount:</label>
<span><?php echo $discount_formatted; ?></span><br>

<label>Discount Price:</label>
<span><?php echo $discount_price_formatted; ?></span><br>
</main>
</body>
</html>
Notepad++ with three tabs open

Figure 1-10 How to edit a PHP file with a text editor


How to open files in Notepad++
• Use the Open button in the toolbar.
• Right-click on the file in Windows Explorer and select Edit with
Notepad++.

How to save the current file


• Use the Save button in the toolbar.
• Press Ctrl+S.

How to save all open files


• Use the Save All button.

Figure 1-10 How to edit a PHP file with a text editor (cont…)
How to close the current file in Notepad++
• Use the Close button in the toolbar.

How to close all open files


• Use the Close All button.

How to open a new file in a new tab


• Use the New button in the toolbar.

Figure 1-10 How to edit a PHP file with a text editor (cont…)
The XAMPP control panel

Figure 1-11 How to start and stop Apache and MySQL on your own computer
How to start the XAMPP control panel
• Select the XAMPP Control Panel item from the Windows Start
menu or double-click on the XAMPP icon on your desktop.

How to start and stop Apache or MySQL


• Click on its Start or Stop button.
• To start Apache or MySQL automatically when your computer
starts, click the Services button in the XAMPP control panel.

About XAMPP
• XAMPP is a free, open-source web server package.
• The package consists of Apache, MySQL, and interpreters for
PHP.
• XAMPP can be easily installed.
• XAMPP is available for Windows, Linux, Solaris, and Mac OS X
systems (the X in XAMPP stands for cross-platform).

Figure 1-11 How to start and stop Apache and MySQL on your own computer (cont…)
The directories for a PHP app on a local server

xampp
htdocs (the document root directory)
guitar_store (the application root directory)
admin
catalog
styles
images
index.php
The structure for book_apps and ex_starts
xampp
htdocs
book_apps
ch01_product_discount
ch02_product_discount
ch02_future_value
ch04_product_list
ch04_product_manager
...
ex_starts
ch02_ex1
ch02_ex2
ch04_ex1
...
How to deploy a PHP application on a local server
• Copy all of the directories and files for an application to the
\xampp\htdocs directory on the server.

How to deploy the downloadable applications


on a local server
• Copy the book_apps and ex_starts directories and all their
contents to the \xampp\htdocs directory on the server.

How to deploy an application


on an Internet server
• Use an FTP (File Transfer Protocol) program to upload the tested
directories and files to the htdocs directory of the Apache web
server.
The components of an HTTP URL

What happens if you omit parts of a URL


• If you omit the protocol, the default of http:// will be used.
• If you omit the filename, one of the default filenames for the
Apache web server will be used: index.htm, index.html, or
index.php.
• If you omit the filename and there is no default file, Apache will
display an index of the files and directories in the path.
Requesting pages from an Internet web server
A request for a specific page
http://www.murach.com/shop-books/all/index.php
A request for the default (home) page of a website
http://www.murach.com/

Requesting applications from a local web server


A request for the default page in an application directory
http://localhost/book_apps/ch01_product_discount/
A request for a directory with no default page
http://localhost/book_apps/
An index of the apps in the book_apps directory
The Product Discount application in Chrome
An error displayed in Chrome
How to test a PHP page for the first time
1. Make sure the Apache and MySQL servers are running.
2. Start a web browser and enter the URL for the application as shown
in the last figure.
3. Test the page by entering both valid and invalid data, clicking on all
links, and so on.

How to retest a PHP page after changes


• Click the Reload or Refresh button in the browser.
The source code for a PHP page

Figure 1-15 How to view the source code for a web page
How to view the source code for a page
in Chrome and Firefox
• Right-click the page, then select the ViewPage Source command.

How to view the source code for a page


in IE and Edge
• Right-click on the page, then select the View Source command.

Note about Microsoft Edge


• The View Source command isn’t available by default for this
browser. To enable it, you can press F12 to display the Developer
Tools. Then, when you select the View Source command, the
source code will be displayed in the Debugger tab within the
Developer Tools window.

Figure 1-15 How to view the source code for a web page (cont…)
NetBeans with three files in a project open

Figure 1-16 How to use NetBeans to work with projects and files
How to work with NetBeans projects
• To open a project, use the Open Project button in the toolbar.
• To start a new project, use the New Project button in the toolbar.
• To close a project, right-click on the project in the Projects tab
and select the Close command from the resulting menu.

How to work with files


• To open a file, use the Projects tab to navigate to the file and
double-click the file.
• To start a new file, select the project and click the New File button
in the toolbar.

Figure 1-16 How to use NetBeans to work with projects and files (cont…)
About NetBeans
• NetBeans is an Integrated Development Environment (IDE) for
developing PHP applications.
• NetBeans can make it easier to create, edit, and test the HTML,
CSS, and PHP files that you need for a web application.

About NetBeans projects


• A NetBeans project consists of a top-level directory that contains
the subdirectories and files for an application.
• Netbeans adds an nbproject subdirectory that contains the extra
files that NetBeans needs for managing the project.

Mac OS X note
• To enable right-clicking with Mac OS X, you can edit the system
preferences for the mouse.

Figure 1-16 How to use NetBeans to work with projects and files (cont…)
Auto-completion and error marking in NetBeans

Figure 1-17 How to use NetBeans to edit and test a PHP application
How to edit a PHP file with NetBeans
• Use normal editing techniques as you enter PHP code.
• When you see an auto-completion list, you can highlight an entry
and press the Enter key to enter it into your code or you can
double-click on it.
• If you see a red error icon at the start of a line that you have
entered, you should fix whatever errors the line contains before
you test the application.

How to test a PHP application with NetBeans


• To run the current project, click on the Run Project button in the
toolbar or press F6.
• To run other projects, right-click on the project and select the Run
command.
• To run a file, right-click on the file and select the Run command.

Figure 1-17 How to use NetBeans to edit and test a PHP application (cont…)
The dialog box for starting a new project

Figure 1-18 How to use NetBeans to import and configure a PHP project
The dialog box for configuring a project

Figure 1-18 How to use NetBeans to import and configure a PHP project
(cont…)
How to check the run configuration for a project
• Right-click on a project in the Projects tab and select the
Properties command.
• Then, click on Run Configuration in the Categories list and check
the Project URL.

How to import a project


• Use the New Project command, but select PHP Application with
Existing Sources in the Projects list.
• This will step you through the import procedure.
• In the third step, you are asked to check the run configuration.
Here, you need to make sure the URL for running the project is
correct.

Figure 1-18 How to use NetBeans to import and configure a PHP project
(cont…)
References
• Chapter 1 of Murach, J. and Harris, R. (2017). Murach’s PHP
and MySQL. 3rd ed. USA: Mike Murach & Association

You might also like