1.3.5 Click keyboard_arrow_up on the tab at the bottom of the page ⇒ 'Show in folder'.
1.3.6 Double click the web.zip file ⇒ Open with ⇒ File Explorer or Windows Explorer.
1.3.7 Open a second File Explorer window and navigate to C://wamp/www or C://wamp64/www
1.3.8 Right click the 'web' folder ⇒ Copy ⇒ then drag and drop it inside folder /www (C://wamp/www or C://wamp64/www).
1.4 Configure Screen
The screen must be configured to display course instructions, software source code and rendered source code concurrently. Carefully follow the instructions below.
Hover over Restore Down (Browser top right).
Select (Windows 11) or position as indicated (Windows 10 and macOS)
Open Notepad++
Hover over Restore Down (Notepad++ top right)
Select (Windows 11) or position as indicated (Windows 10 and macOS)
Step 4: Select C:\ wamp\www\web or C:\wamp64\www\web
Step 5: Click file ⇒ Load Session...
Step 6: Select file session.xml or session64.xml from the list
2. IDE Verification
It is now necessary to verify that all the components fit together and are working correctly. However, the URL in the address bar loads the website from the remote host - itgis.org. This section describes how to configure the website locally so that it can be accessed from your device (locahost). Before doing that we must check that all localhost services are ready for use.
2.1 Click on the WAMP logo in the task bar ⇒ run wampmanager.exe ⇒ place the mouseover the green logo and check for 'local server - All services running'.
2.2 Click LOCALHOST and ensure the URL in the address bar now references localhost.
2.3 Re-run the anti-malware software.
Click Start and enter Windows Security ⇒ Select Virus & threat protection ⇒ Select Quick scan
2.4 Check that the environment has been installed correctly.
Click
Check expected and actual values for Test 1 and Test 2
Activate and check the mouse funtions for Test 3
Click Initialise Function Calibration and Check the browser values are set to 0.
.
3. Web Software Languages
This section describes how software interacts with your web browser and the web server that has just been installed on your machine. Exercises give examples of the programming languages and techniques associated with each layer of the stack (see the diagram below). They will give you the foundation needed for additional self-learning using the various tutorials which are readily available on the internet.
3.1 to 3.7 looks at the how the requests from web browser are created (HTML, CSS and JAVASCRIPT) and 3.8 to 3.10 looks how the MySQL and PHP requests and responses, to and from the (apache) web server, are handled.
The project preview webpage popup shows a Web Browser/Web Server configuration diagram and gives an overall perspective of how the various software languages interact with the internet.
click
A second project webpage popup allows dynamic interactation with the various web layers and their corresponding software languages. Click the 'Activate CSS' button to see an example of Cascading Style Sheets.
click
Web Browser
3.1 HTML Hypertext Markup Language
Is the programming language of web pages.
Commands your web browser to display text and graphics in a specific fashion.
Tags start with < and end with > and every single tag has unique meaning.
Tags are used to hold HTML elements and they in turn specify the general content of a web page.
Is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
Describes how HTML elements are to be displayed on screen
Rule-set consists of a selector and a declaration block
Example rule-set: p {color: red; text-align: center;}
p is a selector in CSS - it points to the HTML element you want to style: <p>paragraph text</p>
color is a property and red is the property value
text-align is a property and center is the property value
click
Select tab CSS.html
Note the three style selectors; body, h1 and p together with their respective properties and values.
change selector body poperty background-color to value blue
change selector h1 property color to value yellow;
and change selector p property font-style to value normal;
click File and Save a copy as... EX2.html (note copy saved to folder web to keep the original file cs/EX2.html intact)
For future reference CSS can be added to HTML documents in 3 ways
inline by using the style attribute inside HTML elements
internal by using a < style > element in the < head > section
external by using a < link > element to link to an external CSS file.
3.3 Introduction to JavaScript and DOM
JavaScript developers are responsible for implementing the front-end logic that defines the behavior of the visual elements of a web application.
Often work alongside other HTML web developers who specialize in markup (say, HTML) and styling (say, CSS).
Can interact with a Document Object Model of the web page created by the browser at load time.
Summary:
Javascript uses variables and functions. Variables are containers for storing data (values). A JavaScript variable is declared with the var keyword. A function is a block of code designed to perform a particular task and is executed when "something" invokes it (calls it).
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page which can be modified with JavaScript. The DOM is a programming interface that works with JavaScript to manipulate HTML document content. It allows programs and scripts to dynamically access and update the content, structure, and style of a document. For example, HTML DOM allows JavaScript to be executed when a webpage event occurs, like when a user clicks on an HTML element.
Select tab JS.html.
Scroll down slowly. Note the JavaScript variable declarations for x, y and z and review the following JavaScript functions:
function myLoad()
function myMouseover()
function myMouseout()
function myClick()
As summarised above, HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are signals fired inside the browser window that notify of changes in the browser or operating system environment. Programmers can create event handler functions that will run when an event fires, allowing web pages to respond appropriately to change.
Now scroll down to < body > and note the event attributes
onload
onmouseover
onmouseout
onclick
click
trigger the four events listed above.
Select tab EX3.html
Scroll down the script to the line of code (statement) containing 'var x = ;' and enter any numeric value before the ;
Scroll down the script to the line of code containing 'function ---()' and replace ---() with ex3()
Finally, scroll down to the line containing onload="---()" and replace ---() with ex3()
click File and Save a copy as... EX3.html (note copy saved to folder web to keep the original file EX3.html version intact)
click
Note that the browser alerts the value entered for the JavaScript variable.
Data types basically specify what kind of data can be stored and manipulated within a program. Let's take a look at a few datatypes in more detail.
3.4.1 String datatype
strings are useful for holding data that can be represented in text form.
a JavaScript string simply stores a series of characters like "ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !"£$%^&*()+=@".
a string can be any text inside quotes and you can use single or double quotes.
a JavaScript variable can hold a value of any data type (numbers, strings, arrays and more).
to declare variables in JavaScript, you need to use the 'var' keyword.
the var keyword declares a variable, the container for storing data a value.
click
Select tab STRING.html
in this example we store the string text in variable a then display the contents of variable a using the alert() Method.
3.4.2 Number datatype
the number type represents both integer and floating point numbers.
there are many operations for numbers, e.g. multiplication *, division /, addition +, subtraction -, and so on.
click
Select tab NUMBER.html
in this example we store an integer number in variable b and a floating point number in variable c and display the contents of both variables b and c using the alert() Method.
3.4.3 Array datatype
a JavaScript array is a type of object used for storing multiple values in single variable.
Each value (also called an element) in an array has a numeric position, known as its index.
The first element of an array is at index 0. The last element is at the index value equal to the value of the array's length property minus 1.
Values may contain data of any data type - numbers, strings, booleans, functions, objects, and even other arrays.
click
Select tab ARRAY.html
in this example we store three makes of car in variable cars and display the third of the three car values in cars using the alert() Method.
3.4.4 Datatype exercise
click
Select tab EX4.html
scroll down to see the string contained in variable y
see also the array of first names held in variable fn
In your own time review the function startTime(). It's a good example of array usage and a useful function for later use.
3.5 JavaScript String Methods
String methods help you to work with strings. Now that we've looked at the very basics of the string data type, let's start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, the value of a substring within a string, substituting one character in a string for another, and more.
Select tab EX5.html
click
Compage the page displayed with the Notepad++ text.
1. Return the length of a string - string.length()
2. Return the first character of a string - string.charAt(index)
3. Return the fifth character of a string - string.charAt(index)
4. Return the text between two string positions in a string - string.substring(start, end)
5. Replaces occurences of a string matching a given string - string.replace(searchvalue, newvalue)
6. Returns the position of the first occurrence of a specified text in a string - string.indexOf(searchvalue, optional start)
3.6 JavaScript Array Methods
Arrays are basically single objects that contain multiple values stored in a list. Array objects can be stored in variables and dealt with in much the same way as any other type of value, the difference being that we can access each value inside the list individually, and can use array methods to do useful and efficient things with the list. Let's take a look at a few array methods in more detail.
Select tab EX6.html
click
Compage the page displayed with the Notepad++ text.
1. Remove the first array element and "shift" all other elements to a lower index - array.shift()
2. Remove the last value of an array - array.pop()
3. Add a value to the end of an array - array.push(value)
4. Change an element in an array - arrayName[index] = newVariable
5. Add and/or remove array elements. Overwrites the original array - array.splice(index, howmany, item1, ....., itemx)
3.7 Loop and Iteration
A loop is defined as a segment of code that executes multiple times. Iteration refers to the process in which the code segment is executed once. Loops offer a quick and easy way to do something repeatedly. Let's look at how we can use then to iterate though the elements of an array.
Select tab EX7.html
click
Locate and take a look at the code in the EX7.html script that corresponds to each of the steps below.
capture the array length
initialise a counter
set up and execute a loop condition (while)
display transport mode and increment the counter (iteration code segment)
3.8 PHP is is an acronym that refers to itself 'PHP: Hypertext Preprocessor'. A general-purpose scripting language especially suited to web development.
PHP scripts reside within reserved PHP tags. This allows the programmer to embed PHP scripts within HTML pages.
Select tab PHP.php
Note that the file extension has changed from .html to .php which is the scripting language component identifier within the web server.
PHP scripts reside within reserved PHP tags <?php and ?> and this allows the programmer to embed PHP scripts within HTML pages.
This example shows the php code used to capture (GET) data from the browser address bar and take action in the web server depending on the value.
click
Note the name=value pair in the the address bar is planet=1
Note the planet name is Saturn.
click
Note the name=value pair in the the address bar is planet=2
Note the planet name is now Mars.
click
Note the name=value pair in the the address bar is planet=6
Note the error message Invalid Planet Code Used.
click
The name=value pair in the address bar is not defined
Note the error message GET data is missing.
A summar of some of the key differences between PHP and JavaScript
PHP is server-side scripting language whereas Javascript is a client-side scripting language.
PHP doesn’t execute within browser whereas Javascript executes within browser.
PHP supports database whereas Javascript doesn’t support databases.
PHP accepts both upper case and lower case variables while Javascript doesn’t.
PHP variables start with the $ sign, followed by the name of the variable.
3.9 HTTP Request Methods indicate the desired action to be performed for a given source of web content.
The two most common methods are GET (as introduced above) and POST.
HTTP GET METHOD
As seen above, the query string (name = value pairs) is sent in the URL of a GET request. GET imposes restrictions on data length (max 2048 characters). Sending sensitive data as demostrated in this example should always be avoided (use POST instead).
Select tab GET.php
Another example showing the php code used to capture (GET) data from the browser address bar and take action in the web server depending on the value.
Note multiple name = value pairs are seperated by an ampersand '&'
click
Goole GET name = value pairs example
click
Enter "surfing" into the search bar
Scroll inside the address bar to appreciate the GET data length associated with a simple search.
HTTP POST METHOD
The data sent to the server with POST is stored in the request body of the HTTP request. No restrictions on data length. HTTP Body Data is the data bytes transmitted in an HTTP transaction message immediately following the headers. HTTP headers let the client and the server pass additional information with an HTTP request or response.
Select tab POST.php
Study the form element; the content between the < form > tags
and note action="response.php" and method="POST".
click
submit the form
return to post
space fill the input fields, resend and notice the result
note 'required' is specified for text input fields E-mail and Password
enter new email and password values, resend and notice the result
return to post.
POST method data is sent in the body of a request immediately after the request headers. Whereas, as already demonstrated, GET method data is sent in the URL as name and value pairs.
place the mouse over example at the bottom of the POST web page
3.10 phpMyAdmin and MySQL are applications for managing data and data structures giving users the ability to interact with their databases.
phpMyAmin
phpMyAdmin is a free and open source administration tool (for MySQL an open-source relational database management system). As a portable web application, it has become one of the most popular administration tools, especially for web hosting services.
phpMyAdmin can create, alter, browse, and drop databases.
The latest versions support mysqli, which is the improved MySQL extension.
It can display multiple results sets through PHP procedures written in mysqli.
phpMyAdmin can track the changes done on databases.
We can also create PDF and graphics of our database layout.
phpMyAdmin can be exported into various formats such as XML, CSV, PDF, Text and Spreadsheet.
It provides the facility to backup the database into different forms.
MySQL is a fully managed database service to deploy applications. A database is an organised collection of structured data, typically stored electronically in a computer system. Data are raw facts that need to be processed to make them meaningful. Information is a set of data which is processed in a meaningful way according to the given requirement.
In this exercise we are going to take a look at how a pre-defined query is performed in both phpMyAdmin and form a mySQL query through PHP.
Query What's the password for a given email address?
open phpMyAdmin
open database users and click the SQL tab at the top of the page.
copy the string SELECT * FROM `credentials` WHERE `email` = 'myname@mysite.com'
click Clear and paste the string into the query window
press Go (bottom right)
note the array of associated data retured for the given email.
click
Select tab MySQL.php
Compage the page displayed with the Notepad++ text.
check the connection to database users
if there's a problem with connecting
display 'Could not connect: error no'
define query 1
this code specifies table and column value to be used in the query ($sql1)
in this case `credentials` where email = 'myname@mysite.com'
perform query 1
performs a query using $sql1 and connection $con
and returns the query as an object
Object-oriented programming has certain advantages over procedural programming, for example, it enables you to develop large, modular programs that can instantly expand over time. Object-oriented programming is outside the scope of the foundation course but it is addressed in the Advanced section below.
An associative array is used instead of the object to access the requred information, and
The result to the query 'which password is associated with the given email' will look something like this
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn and can be a lot of fun.
In this HTML tutorial, you will find hundreds of examples. You can edit and test each example yourself with the online "Try it Yourself" tool. HTML ⇒
4.2 JavaScript
The world's most popular programming language
The programming language of the Web.
Is easy to learn.
This tutorial will teach you JavaScript from the basics to advanced level JavaScript ⇒
4.3 PHP Hypertext Preprocessor
PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.
PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
You can edit the PHP code, and click on a button to view the result with the online "PHP Tryit" tool. PHP ⇒
4.4 Structured Query Language
SQL is a standard language for storing, manipulating and retrieving data in databases.
The SQL tutorial will teach you how to use SQL in MySQL and some other database systems such as SQL Server, MS Access and Oracle.
However, for now, it's best to consentrate on MySQL before exploring the other options.
You can edit the SQL statements, and click on a button to view the result with the online SQL editor. MySQL ⇒
5. Project Selection
The course is designed to give you a better idea about applied computer science. You are not expected to have fully understood all the concepts and techniques covered. Instead you should have grasped the basics that will allow you to navigate the associated tutorials and examples that will lead to the mastery of computer programming.
Building a simple project to demonstrate the use of HTML, CSS, Javascript, PHP, and MySQL is very important. By doing this, you will absorb the material covered in the course and enable a web path to excellence.
5.1 Some Project Suggestions
Sample Code - develop your own web site with experimental code.
Quiz - surf the website for tips
Notes Website - create, store, amend and delete your personal notes.
To Do List - add and delete activities. Tick off those activities that are complete.