Introduction
Software engineering is a primary skill needed to bring about systems innovation. It's an effective way for us to make changes and improve the way people do things. Here, we explore web-based software engineering to give you the insight and practical know-how for lending a helping hand towards solving some of our sometimes troublesome issues.
As a starting point, this course is ideal for students with little or no programming experience wishing to uncover the fundamentals of web based software engineering. It offers a way to improve your understanding of the internet. It explains client (browser) and server-side architectures, associated technical terms and delivers practical knowledge in World Wide Web programming languages (including HTML, CSS, JavaScript, PHP and SQL).
This technical architecture is representative of the internet and appropriate for this level of learning. Once assimilated, it makes it easier to choose the technical variations that best suit your needs (say, Python or WordPress), and if you feel confident, you may wish to pass on your knowledge to help others.
A Few Benefits to Consider
Learn at Your Own Pace
The software engineering seminars give you the know-how to gain further programming skills at your own pace using online tutorials. This is made possible by the installation of local web server environment (IDE). This software guarantees you to operate freely, study, share and develop websites independently without using the internet via a remote web server.
The course offers a beginner's web architecture dictionary and web software language instruction grouped into three parts. Part 1 - Web Browser Software, Part 2 - Web Server Scripting Software and Part 3 - Web Server Database Software.
It is almost inevitable that help will be needed from time to time. So send any queries you have (no matter how trivial) to info@adt.vision - this will eventually form the basis of an FAQ feature and help others who may experience the same difficulty. Suggested improvements and the notification of potential errors are also welcome.
Course Prerequisites
No previous software engineering knowledge is required although having basic internet and Windows skills will help. Each student must, where possible, supply their own Windows 10 or 11 laptop (32 or 64-bit system type). The device must be configured with a Chrome browser and contain approximately 3GB of available storage space. Check your laptop for malware with the Windows Secrurity application before installing any software. The antivirus software is run before and after installing the IDE to provide confidence that the threat level hasn't been compromised. The course is also available to Apple macOS users.
Terminology Review
You may know the meaning of some of the following terms, or at least you may have heard of them (note terms are not displayed when accessing this site remotely). Each term has a calibration function that allows self-assessment by rating your understanding of the associated narrative. We will ask you to review this regularly throughout the course to give an at-a-glance indication of your overall progress (assign a percentage based on your grasp of the term and where it fits within the web browser/server architecture).
Make a note of the things that you find difficult to understand. Don't be put off. The idea is to feel at ease with these terms when we reach the end of our course. Any additional worthy terms that we discover will be added, along with their corresponding technical descriptions as needed, for completeness.
Browser
All users access the web through web browser software, which is included on computers and mobile devices at the time of purchase. Other browsers can be downloaded from the internet. A browser is a free software package or mobile app that displays web pages, graphics, and most online content. Popular web browsers include Chrome, Firefox, Internet Explorer, Microsoft Edge, and Safari, but there are many others. Browser software is specifically designed to convert HTML and XML computer code into human-readable documents. Browsers display web pages. Each web page has a unique address called a URL (see below).
Localhost
A localhost is the standard host name provided to the address of the local computer in computer networking. The localhost denotes the host name used in communicating with the loopback network interface; that is, with software on the computer that originated the transmission.
Let's say you wanted to call your own cellphone to test a ringtone you created. You could dial your telephone number to see what happens. However, you'd have to dial the entire number as it goes out throughout the cellphone network, as if you're calling any outside number. What if instead you could simply punch in a name like "thisphone" and it would work, as if you dialed your number and routed it via the network normally?
When you try to establish a network connection to the localhost (loopback) address, it avoids connection to the local network interface hardware (and therefore doesn't require internet access). The bulk of our development and testing will be conducted using localhost. Local and Remote Host ⇒
Remote Host
A computer that resides in some distant location from which data is retrieved. Web site hosting is the business of housing, serving, and maintaining files for one or more Web sites. The remote host I use is provided by iPage. So, for example, my website files (for www.itgis.org) are stored on one of iPage's computers in California.
Cloud hosting is and alternative way to host a website's files and offers unlimited resource expansion, which is great to have if you have a fast-growing site. Your site will also be shielded from malfunctioning servers, as your site can be switched to another server if it's underperforming. Remote and Local Host ⇒
ISP
You need an Internet Service Provider (ISP) to get to the internet. You may access a free ISP at school, a library or work, or you may pay for a private ISP at home. An ISP is the company or government organization that plugs you into the vast internet. An ISP offers a variety of services for a variety of prices: web page access, email, web page hosting, and so on. Most ISPs provide various internet connection speeds for a monthly fee. You may choose to pay more for a higher-speed internet connection if you like to stream videos or select a less expensive package if you use the internet mostly for light browsing and email. An example ISP Virgin Media ⇒.
Router
A router or router-modem combination is the hardware device that acts as the traffic police for network signals arriving at your home or business from your ISP. A router can be wired or wireless or both.
IP Address
Your computer and every device that connects to the internet uses an Internet Protocol address for identification. In most cases, IP addresses are assigned automatically. To find your IP Address click here ⇒. There are currently two version of Internet Protocol (IP): IPv4 and a new version called IPv6. The local or internal IP address is the address that is assigned by your local network router. Local IP addresses can only be seen by other computers in your local network and not by any computers connected in an external network such as on the Internet. On almost all networking systems, localhost uses the IP address 127.0. 0.1. That is the most commonly used IPv4 "loopback address" and it is reserved for that purpose. The IPv6 loopback address is ::1.
Domain Name
Domain names are easy-to-remember words that we can use to tell a DNS server the website we want to visit. The Domain Name System (DNS) is what translates the friendly name to an IP address.
.org is a top-level domain name (TLD)
itgis.org is a second-level domain name (SLD)
sagesse.itgis.org is a third-level or three-part domain name
project.sagesse.itgis.org is a fourth-level or four-part domain name
A top-level domain name is never used by itself. It is always combined with at least a second-level domain name.
URL
Uniform Resource Locators are the web browser addresses of internet pages and files. A Uniform Resource Identifier (URI) is a string of characters that unambiguously identifies a particular resource. The most common form of URI is the Uniform Resource Locator (URL), frequently referred to informally as a web address.
The URL for my website is https://www.itgis.org. URLs consist of multiple parts including a protocol and domain name that tell a web browser how and where to retrieve a resource.
See also IBM Overview ⇒
A web server is also known as an internet server.
HTML
Hypertext Markup Language (HTML) is the universal programming language of web pages. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
JavaScript
A JavaScript developer is responsible for implementing the front-end logic that defines the behavior of the visual elements of a web application. JavaScript is a scripting language used to make web pages interactive (say, popup menus). JavaScript developers often work alongside other web developers who specialize in HTML markup and CSS styling.
Hypertext
Hypertext is text displayed on a computer display or other electronic devices with references to other text that the reader can immediately access. Hypertext documents are interconnected by hyperlinks, which are typically activated by a mouse click, keystroke, or by touching the screen.
Preprocessor
A preprocessor is a program that processes its input data to produce output that is used as input to another program. For example: PHP: Hypertext . Prepocesor is a scripting language web developers use to create dynamic websites. When a website visitor accesses a PHP page, the web server processes, or parses, the PHP code, which can output HTML to the webpage. It is often installed by default on Apache web servers, alongside MySQL as part of a WAMP or MAMP configuration. When a website visitor accesses a PHP page, the web server processes, or "parses," the PHP code, which can output HTML to the webpage.
Protocol and HTTP
A standard procedure for regulating data transmission between computers, for example, TCP/IP, or the Transmission Control Protocol/Internet Protocol, is a suite of communication protocols used to interconnect network devices on the internet.
TCP/IP describes rules for dividing messages into small pieces, called packets; providing addresses for each packet; checking for and detecting errors; sequencing packets; and regulating the flow of messages along the network. Connections must be properly established in a multi-step handshake process (connection establishment) before entering the data transfer phase. Hypertext Transfer Protocol (HTTP) is a member of the TCP/IP family. It is part of the Internet protocol suite that defines commands and services used for transmitting webpage data and might read something like:
Browser: "I'm about to send a message" Localhost: "Is that you making a request" Browser: "Yes It's Me" Localhost: "Send it then;" Browser: "That's it sent." Localhost: "I acknowledge that you've sent a message" Browser: "I'm waiting for confirmation that you received the message" Localhost: "Message received OK (response status 200)".
Web Server
A web server is a system that delivers content or services to end users over the internet. A web server consists of a physical server, server operating system (OS) and software used to facilitate HTTP communication.
Requests, Responses and
Resources
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. A web browser may be the client, and an application on a computer that hosts a web site may be the server. HTTP is used to transmit resources (almost anything that can be obtained via the Internet), the R in URL. HTTPS is used for secure communication over a computer network.
Example: A client (browser) submits an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request (used internally) and may also contain the requested content.
All HTTP response status codes are separated into five classes (or categories). The first digit of the status code defines the class of response. The last two digits do not have any class or categorization role. There are five values for the first digit:
1xx (Informational): The request was received, continuing process
2xx (Successful): The request was successfully received, understood and accepted
3xx (Redirection): Further action needs to be taken in order to complete the request
4xx (Client Error): The request contains bad syntax or cannot be fulfilled
5xx (Server Error): The server failed to fulfill an apparently valid request
There are several different ways (methods) to make an HTTP (HTTPS) request. Two of the most common are GET and POST.
GET requests a representation of the specified resource (for example, click https://itgis.org/compliance.php?o=portuguese note in this case the resource (and response content) is 'portuguese' and https://itgis.org/compliance.php?o=deutsch where the resource and response content is 'deutsch').
POST submits the data to be processed (say, some user specific details as typed into a Web page: Name, DOB and so on) to an identified resource (URL).
Essentially GET is used to retrieve remote data (after a ? in the URL), and POST is used to insert/update remote data enclosed in the body of the request message.
WAMP
The first practical task is to install this free (open source) server on the hardware device (localhost).
The acronym WAMP refers to a set of applications, combined with Microsoft Windows, which are commonly used in Web server environments.
The acronym MAMP is for Apple MacOS.
The WAMP/MAMP stack provides developers with the four key elements of a Web server: an Operating System, Database, HTTP Server and Scripting Language. The Hardware is the physical component of the computer system in which the stack resides. The combined usage of these programs is called a server stack. In this stack;
Windows or MacOS
Microsoft Windows or Apple macOS. Both the Mac and Windows operating systems have their strengths and flaws. The decision on which one to use solely depends on the user's technical skills and security requirements.
Apache
Apache is the most widely used web server software. Developed and maintained by Apache Software Foundation, Apache is an open source software available for free. It runs on 67% of all webservers in the world. It is fast, reliable, and secure. It can be highly customized to meet the needs of many different environments by using extensions and modules.
Apache is the software that receives your request to access a web page. It runs checks on your HTTP request and takes you to the web page. Depending on the page you have requested, the page may ask the server to run a additional programs (say, PHP and MySQL modules) while generating the document to serve you. It then serves you the document you requested.
While a web server is an essential part of any website, it’s important to note that we are unlikely to interact directly with the Apache HTTP web server. In other words Apache will normally function seamlessly in the background.
MySQL
A database is a separate application that stores a collection of data. Each database has one or more distinct programs for creating, accessing, managing, searching and replicating the data it holds. Other kinds of data stores can also be used, such as files on the file system or large hash tables in memory but data fetching and writing would not be so fast and easy with those type of systems.
MySQL (My Structured Query Language) is an Oracle-backed open source Relational Database Management System (RDBMS) based on Structured Query Language (SQL). SQL is the most popular language for adding, accessing and managing content in a database.
PHP
PHP is a type of open-source general-purpose scripting language fit for server-side programming. It is a popular choice in web development in creating dynamic pages and applications.
PHP is a type of interpreted language; no compilation is necessary. It works for server-side development. It is an object-oriented open-source scripting language. It is possible to embed PHP into HTML. Developers, beginner-level and experienced, can learn PHP quickly.
There are multiple uses of PHP that make it a strong scripting language option for web development. It operates over the web server and then processes all client requests into HTML files. Additionally, PHP is a general-purpose language; developers can use it to code for different applications.
In the context of website development, choosing the right kind of scripting language would determine the quality of the web solution. PHP is a well-known option for web development, with almost 80% of websites running on this framework.
Base Software Stack (Video)
Click to view another perspective ⇒ Note LAMP (Linux Operating System) and IIS (Internet Information Server - Microsoft's Webserver) are mentioned in this video. They simply identify common alternatives to our WAMP stack configuration.
Operating System
Software that controls the functionality of a computer and directs the processing of programs by assigning storage space in memory and controlling input and output functions. Say, Apple's macOS or Microsoft's Windows 10 or 11. Open Popup ⇒
Static and Dynamic Web Pages
Web pages can be either static or dynamic. "Static" means unchanged or constant, while "dynamic" means changing or lively. Therefore, static Web pages contain the same prebuilt content each time the page is loaded, while the content of dynamic Web pages can be generated on-the-fly.
Standard HTML pages are static Web pages. They contain HTML code, which defines the structure and content of the Web page. Each time an HTML page is loaded, it looks the same.
The only way the content of a purely HTML page will change is if the Web developer updates and publishes the file. However, embedding JavaSript code within HTML makes it possible to implement dynamic "browser-side" code for example to display the current time and date on the Web page.
Other types of Web pages, such as PHP pages are dynamic Web pages. These pages contain "server-side" code, which allows the Web server (or in our case localhost) to generate unique content each time the page is loaded.
For example, the server may output a unique response based on a Web form the user filled out. Many dynamic pages use server-side code to access database information, which enables the page's content to be generated from information stored in the database.
DOM Document Object Model
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. 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. We will explore this idea further with practical programming examples.
1. Integrated Development Environment (IDE) Setup for Windows
Prerequisites
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 from the Downloads folder (Brackets-n.n.n.exe).
1.2 Microsoft Visual C++ Dynamic Link Library Installation
Note this section (1.2) is only required if any one of msvcr110.dll, mscvr120.dll or msvcp120.dll is missing from C:\Windows\System32.
Click here to see the instructions.
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:
1.3.3.2 If the default is already set as brackets.exe answer 'No', otherwise find:
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
1.4.5.1 Brackets must be able to access the specific version of PHP used by WAMP.
1.4.5.2 The PATH environment variable instructs Windows to allow the Brackets text editor to access the specified version of PHP.
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.
2.5 Locate and close redundant windows.
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 INTERACT webpage popup allows dynamic interaction with the various web layers and their corresponding software languages.
To see a CSS example, click below and move the pointer over Activate CSS.
To interact dynamically using JS, scroll down and click String Methods.
Arrange the Brackets and Browser windows vertically split as shown Open Popup ⇒
3.1 HTML Hypertext Markup Language
at the top right of the Bracket text screen3.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).
at the top right of the Bracket text screen and experiment.3.3 Introduction to JavaScript and DOM
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.
at the top right of the Bracket text screen and experiment.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 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.
3.4.3 Array datatype
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.
3.4.4 Datatype exercise
at the top right of the Bracket text screen and experiment.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.
at the top right of the Bracket text screen to see the changes rendered in the web page.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.
at the top right of the Bracket text screen to see the changes rendered in the web page.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).
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.
at the top right of the Bracket text screen to see the changes rendered in the web page. 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
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).
at the top right of the Bracket text screen and follow the instructions.Query String Name-Value Pairs Example using Google.
at the top right of the Bracket text screen and follow the instructions.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.
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.
at the top right of the Bracket text screen and follow the instructions.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.
| Noah | 25 |
| Oliver | 20 |
| Leo | 15 |
| Oscar | 11 |
| Muhammed | 10 |
2. To create two new email/password table entries using the 'Value' input areas.
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.
SELECT * FROM `credentials` WHERE `email` = 'myname@mysite.com'
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.
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.
at the top right of the Bracket text screen and follow the instructions.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
6. Downloads
Return to Set up Intructions ⇒