1. Integrated Development Environment (IDE) Setup for Windows

Prerequisites

  • Click Start and enter Windows Security ⇒ Select Virus & threat protection ⇒ Select Quick scan.
  • To check system type for 64 or 32 bit operating-system in Windows, right-click 'This PC' in File Explorer and click 'Properties'.
  • To check the available space is greater than ~3GB, right click the C: drive and select 'Properties'.
  • 1.1 Text Editor Installation

  • Step 1:  DOWNLOAD Notepad++ ⇒
  • Step 2: Click  keyboard_arrow_upon the tab at the bottom of the page
  • Step 3: Click Open
  • Step 4: Click Yes
  • Step 5: Follow instructions (Note - tick the box 'Create Shortcut on Desktop'.)
  • Step 6: Close Notepad++
  • Step 7: Click 'No' to the updates message.
  • 1.2 Microsoft Visual C++ Dynamic Link Library Installation

    1.2.1 Modify Visual C++

  • Step 1: DOWNLOAD cpp.zip ⇒
  • Step 2: Click  keyboard_arrow_upon the tab at the bottom of the page
  • Step 3: Click 'Show in folder'
  • 1.2.2 Open the cpp zip file and run cpp.bat

  • Step 1: Double click the file cpp.zip
  • Step 2: Drag and drop folder cpp (from within cpp.zip) to the Downloads folder
  • Step 3: Open the Downloads folder
  • Step 4: Double click on the cpp folder
  • Step 5: Double click on the cpp.bat folder
  • 1.2.3 Allow Windows Permissions to run cpp.bat

  • Step 1: 'More info'
  • Step 2: 'Run anyway'
  • 1.2.4 Run the C++ executables

  • Step 1: 'Press any key to continue . . .' when prompted
  • Step 2: Click 'Repair' on the Modify(x64) Setup for C++ for 64 bit OS only
  • Step 3: Click Yes
  • Step 4: Click Close
  • Step 5: Click 'Repair' on the Modify(x86) Setup for 64 bit and 32 bit OS
  • Step 6: Click Yes
  • Step 7: Click Close
  • 1.2.5 Install Dynamic Link Library (dll) Files

  • Step 1: DOWNLOAD dll.zip ⇒
  • Step 2: Click  keyboard_arrow_upon the tab at the bottom of the page
  • Step 3: Click 'Show in folder'
  • 1.2.6 Open the dll zip file and run dll.bat

  • Step 1: Double click the file dll.zip
  • Step 2: Drag and drop folder dll (from within dll.zip) to the Downloads folder
  • Step 3: Open the Downloads folder
  • Step 4: Double click on the dll folder
  • Step 5: Right click on dll.bat and click Run as administrator.
  • 1.2.6 Allow Windows Permissions to run dll.bat

  • Step 1: Click 'More info'
  • Step 2: Click 'Run anyway'
  • Step 3: Click Yes
  • 1.2.7 Load the DLLs

  • Step 1: 'Press any key to continue . . .' when prompted
  • Step 2: Follow the screen instructions (two files are copied)
  • 1.3 WAMP and Website Installation

    1.3.1 If the project USB drive is available.

  • Insert the drive.
  • Point the cursor to highlight  wampserver3.2.6_x32.exe or wampserver3.2.6_x64.exe as appropriate.
  • Drag the highlighted file to the Downloads folder.
  • 1.3.2 If the project USB is NOT available.

  • Click the  WAMP link HERE ⇒
  • Click DOWNLOAD  WAMP32 bit or 64 bit as appropriate.
  • 1.3.3 Open the Downloads folder, double click wampserver3.2.6_x32.exe or wampserver3.2.6_x64.exe and follow the instructions.

    1.3.3.1 Answer 'Yes' to choose another browser and look for chrome.exe in:

    C:\Program Files\Google\Chrome\Application or if not there

    C:\Program Files (x86)\Google\Chrome\Application, and

    Double click chrome.exe

    1.3.3.2 Answer 'Yes' to choose another Text Editor and and look for notepad++.exe in:

    C:\Program Files\Notepad++ or

    C:\Program Files (x86)\Notepad++ and

    Double click notepad++.exe

    1.3.4 DOWNLOAD web.zip ⇒

    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 restDown (Browser top right).
  • Select (Windows 11) or position as indicated (Windows 10 and macOS)
  • Open Notepad++
  • Hover over Restore Down restDown (Notepad++ top right)
  • Select (Windows 11) or position as indicated (Windows 10 and macOS)
  • Step 1: Click View
  • Step 2: Click Always on Top and click Word wrap
  • Step 3: Click Settings ⇒ Preferences ⇒ Default Directory
  • 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.

  • Example:
  • click

  • Note the title in the top of the browser page tab.
  • Select tab HTML.html
  • Compage the page displayed with the Notepad++ text.

  • click

  • Select tab EX1.html
  • click File and Save a copy as... EX1.html (note copy saved to folder web to keep the original file cs/EX1.html intact)

  • click

  • Note the change in presentation.
  • Review the HTML associated score.

  • 3.2 CSS Cascading Style Sheet

  • 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;}
  • click

  • Select tab CSS.html
  • Note the three style selectors; body, h1 and p together with their respective properties and values.
  • click File and Save a copy as... EX2.html (note copy saved to folder web to keep the original file cs/EX2.html intact)

  • click

  • Note the change in presentation.
  • Review the associated CSS score.
  • 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:
  • 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:
  • 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
  • click

  • trigger the four events listed above.

  • Select tab EX3.html
  • 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.
  • Review the associated score for Javascript.
  • Review the associated score for DOM.

  • 3.4 JavaScript Data Types

    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.

  • 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.

  • 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.

  • Review the associated score for Javascript.

  • 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
  • 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
  • select tab RESPONSE.php
  • follow the code between the PHP tags
  • Review the associated score for PHP.

  • 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.

  • click

  • enter root into username and press Go.

  • click databases (top left), database = users, table = credentials, Insert (middle) in turn.
  • create two new email/password table entries.
  • press Go
  • MySQL

    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.

    Request Response

    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.
  • define query 1
  • perform query 1
  • 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
  • Review the associated score for MySql.
  • Review all the other terminology scores.


  • 4. Online tutorials and exercises.

    4.1 HyperText Markup Language

  • 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.
  • Personal Portfolio - surf the website for tips.
  • Use the this example to create your own PHP Registration Function



  • Copyright © 2018 - Paul A. E. Sheridan and Partners. All rights reserved.