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'.
  • Go to the Downloads Section ⇒ if the course USB is not available. Otherwise copy the USB contents to the Downloads folder.
  • 1.1 Text Editor Installation - Brackets

    A text editor is a computer program that lets a user enter, change and store text (characters and numbers, each encoded by the computer and its input and output devices, arranged to have meaning to users or to other programs).

    1.1.1 Locate and double-click the Brackets executable file.

    1.2 Microsoft Visual C++ Dynamic Link Library Installation

    A dynamic link library (DLL) is a collection of small programs that larger programs can load when needed to complete specific tasks. The small program, called a DLL file, contains instructions that help the larger program handle what may not be a core function of that larger program. Some DLL files must be present in the Windows operating system for the WAMP server to install properly. The easiest way to solve this is to install Visual C++ Redistributable for Visual Studio (2012 Update 4).

    The installation below is simplified using Batch and DLL files (note these use respective extensions .bat and .dll). They are script files (written in DOS - Disk Operating System) and consist of a series of commands to install the C++ DLL (msvcr110.dll) and copy two free-standing DLLs (mscvr120.dll and msvcp120.dll), as required by WAMP, into C:\Windows\System32 (a directory vital to the Windows operating system).

    Note the data compressed files (cpp.zip and dll.zip) are unique to this process and are safe to download as instructed. Their respective uncompressed batch file content (cpp.bat and dll.bat) are also safe to run.

    Now carefully follow the step instructions detailed in 1.2.1 to 1.2.6.

    1.2.1 Open the cpp zip file and run cpp.bat

  • Double click the file cpp.zip
  • Drag and drop folder cpp (from within cpp.zip) to the Downloads folder
  • Open the Downloads folder, Double click on the cpp folder and Double click on the cpp.bat folder
  • 1.2.2 Allow Windows Permissions to run cpp.bat

  • Click 'More info', click 'Run anyway' and Click Yes
  • 1.2.3 Run the C++ executables

  • 'Press any key to continue . . .' when prompted
  • Click 'Repair' on the Modify(x64) Setup for C++ for 64 bit OS only
  • Click Yes and Click Close
  • Click 'Repair' on the Modify(x86) Setup for 64 bit and 32 bit OS
  • Click Yes and Click Close
  • 1.2.4 Open the dll zip file and run dll.bat

  • Double click the file dll.zip
  • Drag and drop folder dll (from within dll.zip) to the Downloads folder
  • Open the Downloads folder
  • Double click on the dll folder
  • Right click on dll.bat and click Run as administrator.
  • 1.2.5 Allow Windows Permissions to run dll.bat

  • Click 'More info', Click 'Run anyway' and Click Yes
  • 1.2.6 Load the DLLs

  • 'Press any key to continue . . .' when prompted and follow the screen instructions (two files are copied)
  • 1.3 Web Server - WAMP Installation

    Double click the wampserver executable file 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 If the default is already set as brackets.exe answer 'No', otherwise find:

  • C:\Program Files\Brackets or C:\Program Files (x86)\Brackets and
  • Double click brackets.exe
  • 1.4 Tuition Website - Sub Directory 'web' Installation

    1.4.1 Double click the web.zip file ⇒ Open with ⇒ File Explorer or Windows Explorer.

    1.4.2 Open a second File Explorer window and navigate to C://wamp/www or C://wamp64/www

    1.4.3 Right click the 'web' folder ⇒ Copy ⇒ then drag and drop it inside folder /www (C://wamp/www or C://wamp64/www).

    1.4.4 Open the above web folder in Brackets

    1.4.5 Configure Brackets



    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 Post IDE setup 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 and follow the intructions.
  • Close the adjacent window - 'Free Internet Tuition - IDE Set up' (click 'x' on the title page above)

    Having confirmed that the Integrated Development Environment is correctly installed, follow the link and take a few minutes to digest and rate your understaning of the related terminology. 1. Localhost, 2. Remote Host, 3. ISP, 4. Router and 5. IP Address scores ⇒



    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. They will give you the foundation needed for additional self-learning using the various tutorials which are readily available on the internet.

    The PREVIEW webpage popup shows a Web Browser/Web Server configuration (stack) diagram and gives an overall perspective of how the various software languages interact with the internet.

  • click
  • For a more detailed look, the INTERACT webpage popup allows dynamic interaction with the various web layers and their corresponding software languages. For example, click the 'Activate CSS' button to see an example of Cascading Style Sheets.

  • click

  • Web Browser Software
  • Web Server Software
  • Database Software
  • Part 1 - Web Browser Software


    3.1 HTML Hypertext Markup Language

  • In Brackets, select 3.1 HTML, click EXERCISES, and open EX 1.html
  • HTML 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 (say, <h1>)
  • They in turn specify the general content of a web page, for example

  • click

  • Open the Brackets PRACTICE folder and click STUDY 1.html
  • Look at the menu bar across the top of the Brackets screen. Click 'File' and tick 'Enable Experimental Live Preview' (if not already ticked).
  • Click lightening at the top right of the Bracket text screen
  • Now try the W3 schools HTML Quiz ⇒
  • Now try the W3 schools HTML Exercises ⇒
  • Review the associated HTML score ⇒
  • 3.2 CSS Cascading Style Sheet

  • In Brackets, select 3.2 CSS, open EXERCISES and click EX2.html
  • CSS 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; font-style: italic;}

  • click

  • click

  • Close EXERCISES in the Brackets file tree.
  • Look at the menu bar across the top of the Brackets screen. Click 'File' and tick 'Enable Experimental Live Preview' (if not already ticked).

  • In Brackets, select 3.2 CSS, click PRACTICE, and open STUDY2.html
  • Click lightening at the top right of the Bracket text screen and experiment.
  • Now try the W3 school's CSS Quiz ⇒
  • Now try the W3 school's CSS Exercise ⇒
  • Review the associated CSS score ⇒

  • 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 model (Document Object Model or DOM) of the web page created by the browser at load time.

  • Summary:
  • Again, when a web page is loaded, the browser creates a 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.

  • In Brackets, select 3.3 JS, click EXERCISES, and open EX4.html
  • Note the JavaScript variable declarations for x, y and z
  • 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


  • Select 3.3 JS EX5.html
  • click File and Save as EX5a.html (note copy saved to folder web to keep the original file EX5.html version intact)

  • click

  • The browser alerts the numeric value entered in the JavaScript variable.
  • If your number isn't alerted, check the EX5a.html text carefully and retry.
  • Brackets 'Enable Experimental Live Preview' works a little differently with JavaScript. For now it's only possible to view changes by saving the amended content and reopening the file.

  • In Brackets, select 3.3 JS, click PRACTICE, and open STUDY3.html
  • Click lightening at the top right of the Bracket text screen and experiment.
  • Now try the W3 school's Quiz ⇒
  • Now try the W3 school's JavaScript Exercise ⇒
  • Review the associated JavaScript score ⇒
  • Review the associated DOM score ⇒

  • 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
  • a string can be any text inside quotes and you can use " or ' quotes.
  • In Brackets, select 3.4 Data Types, click EXERCISES, and open EX 6.html.

    In this example we store the string text in variable a then display the contents of variable a using the alert() Method.

    Two further alerts contain additional relevant information. Read them carefully when triggered below.


  • click

  • Now review the W3 school's String Examples ⇒

  •   3.4.2 Number datatype

  • number types represents both integer and floating point numbers.
  • there are many operations for numbers, e.g. | multiplication * | division / | addition + | subtraction - | and so on.
  • In Brackets, select 3.4 Data Types, click EXERCISES, and open EX7.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.


  • click

  •   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.
  • In Brackets, select 3.4 Data Types, click EXERCISES, and open EX8.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.


  • click

  •   3.4.4 Datatype exercise

  • In Brackets, select 3.4 Data Types, click PRACTICE, and open STUDY4.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.
  • Note that when using Javascript the changes are NOT carried out in real time (as for HTML and CSS). In this case you must save the changes in your script to see them rendered in the web page.

  • Click lightening at the top right of the Bracket text screen and experiment.
  • Review the associated JavaScript score ⇒

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

    In Brackets, select 3.5 String Methods, click EXERCISES, and open EX9.html.

    There are six examples of how to use String Methods.


  • click

  • In Brackets, select 3.5 String Methods, click PRACTICE, and open STUDY5.html
  • Alter the string specified in each of the given examples in turn, for example replace 'Vicentine Coast Natural Park at Sagres' with your own value. It will be easier to to recognise the changes if you choose text values that have some meaning to you.
  • Remember to save the changes you make.
  • Click lightening at the top right of the Bracket text screen to see the changes rendered in the web page.
  • Review the associated JavaScript score ⇒
  • 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.

    In Brackets, select 3.6 Array Methods, click EXERCISES, and open EX10.html.

    There are five examples of how to use Array Methods.


  • click

  • In Brackets, select 3.5 Array Methods, click PRACTICE, and open STUDY 6.html
  • Alter the array values specified in each of the given examples in turn. Again, it will be easier to to recognise the changes if you choose text values that have some meaning to you.
  • Remember to save the changes you make.
  • Click lightening at the top right of the Bracket text screen to see the changes rendered in the web page.
  • Review the associated JavaScript score ⇒

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

    In Brackets, select 3.7 Loops and Iteration, click EXERCISES, and open EX11.html.

    There are four statements used to demonstrate loop and iteration. However, firstly, the associated variables must be initialised. The function loopIterate() is called when the web page is loaded (onload).


  • click

  • In Brackets, select 3.5 Loops and Iteration, click PRACTICE, and open STUDY 7.html
  • Click lightening at the top right of the Bracket text screen to see the changes rendered in the web page.

  • Now review the W3 school's JavaScript Tutorial ⇒
  • Review the associated Javascript score ⇒ .
  • Review the associated Browser score ⇒ .

  • Part 2 - Web Server Software


    3.8 PHP is is an acronym that refers to itself 'PHP: Hypertext Preprocessor'. A general-purpose scripting language especially suited to web development.

  • In Brackets, select 3.8 PHP, click EXERCISES, and open EX12.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 lightening at the top right of the Bracket text screen to see the changes rendered in the web page.
  • Click EXERCISES, and open STUDY 8.php
  • Click lightening at the top right of the Bracket text, click the link and note the name-value pair in the Google URL search bar.
  • A summary 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 databases 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.

  • Review the associated score for PHP ⇒
  • Review the associated score for Hypertext ⇒
  • Review the associated score for Preprocessor ⇒
  • 3.9 HTTP GET

    The two most common request methods are GET (as introduced above) and POST.

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

  • In Brackets, select 3.9 HTTP GET, click EXERCISES, and open EX13.php

  • click

  • Query String Name-Value Pairs Example using Google.

  • Click PRACTICE, and open STUDY9.php
  • Click lightening at the top right of the Bracket text screen and follow the instructions.

  • Review the associated score for URL ⇒
  • Review the associated score for Domain Name ⇒
  • 3.10 HTTP POST

    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.

  • In Brackets, select 3.9 HTTP POST, click EXERCISES, and open EX14.php
  • Study the form element; the content between the < form > tags
  • and note action="response.php" and method="POST".

  • click
  • 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-value pairs.

  • In Brackets, select 3.10 HTTP POST, click PRACTICE, and open STUDY10.php
  • Click lightening at the top right of the Bracket text screen and follow the instructions.

  • Review the associated score for PHP ⇒
  • Review the associated score for Requests, Reponses and Reources ⇒
  • Review the associated score for Protocol and HTTP ⇒
  • Review the associated score for Web Server ⇒

  • Part 3 - Database Software

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

    MySQL is a first choice of PHP developers. As an open source Relational Database Management System (RDBMS) that uses SQL language, MySQL database helps to automate data retrieving and support PHP MySQL web application development.

    In a simple database, you might have only one table. For most databases you will need more than one. For example, you might have a table that stores information about products, another table that stores information about orders, and another table with information about customers.

    The user friendly application, phpMyAdmin, enables the management of databases and data manipulation. For example:

    We will now access phpMyAdmin and experiment with some of these PHP MySQL functions - phpMyAdmin 1 to create a new database and phpMyAdmin 2 to create new table entries.

    1. To create a new database to store the five most popular boys names at, say, a school.


  • click

  • enter root into username and press Go.

  • click

  • enter root into username and press Go.
  • 2. To create two new email/password table entries using the 'Value' input areas.
  • scroll down to the second input fields (past all the terminology codes).
  • browse and check the table contents in phpMyAdmin
  • 3.12 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.


  • click

  • open Databases
  • select database users
  • click SQL, and
  • copy the string

    SELECT * FROM `credentials` WHERE `email` = 'myname@mysite.com'

  • paste the string into the query window
  • press Go (bottom right)
  • note the data returned for the given email.
  • We will now consider the PHP/MySQL Block in the script between line 32 and 130.

    For completeness, we will take a look at both invalid and valid requests.

  • In Brackets, select 3.12 CSS, click EXERCISES, and open EX15.html
  • Click lightening at the top right of the Bracket text screen and submit the query:
  • Finally, let's explore the interaction between HTML, HTTP PHP and MySql. We will use a form to register boy's names in a databse 'forename' with a single table 'boy'. New entries will be added whereas existing entries will be incremented.

  • Click PRACTICE, and open STUDY11.php
  • Click lightening at the top right of the Bracket text screen and follow the instructions.

  • Review the associated score for MySql ⇒
  • Review the score for Basic Software Stack ⇒
  • Review the score for Operating System, Static and Dynamic Pages ⇒
  • Review the score for Static and Dynamic Pages ⇒


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

  • Text Editor Brackets ⇒
  • C++ cpp.zip ⇒
  • DLLs - dll.zip ⇒
  • Web Server WAMP ⇒ select 32 bit or 64 bit as appropriate and download directly.
  • Tuition Website Root Folder web ⇒
  • Return to Set up Intructions ⇒




    Copyright © 2018 - Lindisfarne House, Newcastle and Sagres. All rights reserved.