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
Click 0.0 brackets, open brackets.json and copy the contents.
Click Debug (top) and Open Preference File
Highlight the text in bracket.jason and paste.
Restart Brackets.
Select Start (or All apps), scroll to Brackets, right-click then select pin to the task bar.
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)
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
3.1 to 3.7 looks at the how the requests from web browser are created (HTML, CSS and JAVASCRIPT)
Web Server Software
3.8 to 3.10 looks how PHP handles requests to and from the (APACHE) web server, and
Database Software
3.11 to 3.12 looks at the interaction of MySql with PHP for database manipulation, say, to create, alter, browse and remove data.
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
<h1>Top Level Heading</h1>
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).
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;}
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
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 at the top right of the Bracket text screen and experiment.
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:
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.
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:
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
Select 3.3 JS EX5.html
Line 7 - repalce the text placeholder with a numeric value of your choice, say, var x = 303;
Line 9 - Replace ---- with ex5
Line 17 - Replace ---- with ex5
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 at the top right of the Bracket text screen and experiment.
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 at the top right of the Bracket text screen and experiment.
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 at the top right of the Bracket text screen to see the changes rendered in the web page.
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 at the top right of the Bracket text screen to see the changes rendered in the web page.
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 at the top right of the Bracket text screen to see the changes rendered in the web page.
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 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 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.
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 at the top right of the Bracket text screen and follow the instructions.
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 at the top right of the Bracket text screen and follow the instructions.
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:
It enables the creation, alteration, browsing and dropping (removal) of databases, including common funtions such as:
the selection the required database for database queries,
the opening of a new connection to the MySQL server,
the creation of database tables, the insertion of records and so on.
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 Databases
enter the new Database name as forename where indicated and click Create.
click Create table (boy) with number of columns = 2 and click Go
define the table structure
Forename with Type VARCHAR (a variable length string)
Count with Type INT (a numeric value without a decimal)
Insert values in turn:
Noah
25
Oliver
20
Leo
15
Oscar
11
Muhammed
10
Add primary key to the Forename field. This allows direct access to a given forename at registration (or deregistration) time to efficiently update the associated count. The PRIMARY KEY constraint uniquely identifies each record in a table. A table can have only one primary key, which may consist of one single or of multiple fields.
browse and check the table contents in phpMyAdmin
click
enter root into username and press Go.
click Databases
select and click Database = users
select and click Table = credentials
select and click Insert
2. To create two new email/password table entries using the 'Value' input areas.
first email entry
Value = hisname@hissite.com
first password entry
Value = pass5678
scroll down to the second input fields (past all the terminology codes).
second email entry
Value = hername@hersite.com
second password entry
Value = pass9012
scroll down again and press Go
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.
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 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 at the top right of the Bracket text screen and follow the instructions.
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.