1. Integrated Development Environment (IDE) Setup for Windows
Prerequisites
1.1 Text Editor Installation
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). Install Text Editor (Notepad++) by carefully following steps 1 to 7 below.
Note: If you encounter the common problem "PHP Run Time Error . . . . Copy the contents of file 0.0 brackets.json and overwite the contents of the default brackets.jason file (found in Preferences under "Brackets - top left". )
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, specifically msvcr110.dll, mscvr120.dll and msvcp120.dll 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) for msvcr110.dll and then copy mscvr120.dll and msvcp120.dll into the Microsoft Operating System. 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 and copy two free-standing DLLs as required by WAMP (into C:\Windows\System32).
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.8.
1.2.1 Download Visual C++
1.2.2 Open the cpp zip file and run cpp.bat
1.2.3 Allow Windows Permissions to run cpp.bat (Safe file - see 1.2 above).
1.2.4 Run the C++ executables
1.2.5 Install Dynamic Link Library (dll) Files
1.2.6 Open the dll zip file and run dll.bat
1.2.7 Allow Windows Permissions to run dll.bat (Safe file - see 1.2 above).
1.2.8 Load the DLLs
1.3 WAMP and Website Installation
1.3.1 If the project USB drive is available.
1.3.2 If the project USB is NOT available.
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 If the default is already set as notepad++.exe answer 'No', otherwise find:
C:\Program Files\Brackets or
C:\Program Files (x86)\Brackets and
Double click brackets.exe
1.3.4 DOWNLOAD web.zip ⇒
1.3.5 Click
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).
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.
2.4 Check that the environment has been installed correctly.
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.
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.
3.1 HTML Hypertext Markup Language
3.2 CSS Cascading Style Sheet
p is 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 italic is the property value. This is rendered as paragraph text
Look at the menu bar across the top of the Brackets screen. Click 'File' and tick 'Enable Experimental Live Preview' (if not already ticked).
3.3 Introduction to JavaScript and DOM
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).
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.
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.
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.
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
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.
3.4.2 Number datatype
In Brackets, select 3.4 Data Types, click EXERCISES, and open EX 7.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
In Brackets, select 3.4 Data Types, click EXERCISES, and open EX 8.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
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 EX 9.html.
There are six examples of how to use String Methods.
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 EX 10.html.
There are five examples of how to use Array Methods.
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 EX 11.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).
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.
A summar of some of the key differences between PHP and JavaScript
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.
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).
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.
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.
3.10 phpMyAdmin and MySQL are applications for managing data and data structures giving users the ability to interact with their databases.
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 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?
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.
4. Online tutorials and exercises.
4.1 HyperText Markup Language
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
This tutorial will teach you JavaScript from the basics to advanced level JavaScript ⇒
4.3 PHP Hypertext Preprocessor
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
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