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 explains client (browser) and server-side architectures, associated technical terms and delivers practical knowledge in World Wide Web programming languages (including PHP, JavaScript, SQL, CSS, and HTML).
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 a local Integrated Development Environment (IDE) Open Popup ⇒ for the internet that guarantees you to freely run, study, share and develop websites without having to use a remote web server.
Non-computing students will emerge with increased confidence to communicate with colleagues working with computers and be better equipped to take part in future technical development initiatives. With a little perseverance, the course will deliver a sound basis on which to try further study at a more advanced level.
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.
Click to see the Environment Setup instructions.
Terminology Review
You may know the meaning of some of the following terms, or at least you may have heard of them. Make an attempt to digest each term in turn and make a note of the things that you find difficult to understand. Wherever possible, we will resolve your queries. Also, these terms will make more sense as and when we take a look at practical examples; a good opportunity for further clarification.
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.
Each term has a calibration function that allows you to rate your understanding of the associated narrative. We will ask you to review this at regular intervals throughout the course to give an at-a-glance indication of your overall progress.
The above calibration button is used to display or update your ratings after initial set-up.
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 ⇒
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 refers to "this computer" or even more accurately "the computer I'm working on."
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. We will take a look at how we configure a localhost in a later tutorial.
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.
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.
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)".
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
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.
A web server is also known as an internet server.
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
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.
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, and POST is used to insert/update remote data.
WAMP or MAMP
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 popular general-purpose scripting language that is especially suited to web development. Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.
A PHP (Hypertext Preprocessor) developer is responsible for writing server-side web application logic. PHP developers usually develop back-end components, connect the application with the other (often third-party) web services, and support the front-end developers by integrating their work with the application.
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 - we won't be using them.
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 "browse r-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.