介紹
軟體工程是實現系統創新的主要技能。這是我們進行變革和改進人們做事方式的一種有效方式。在此,我們探討基於Web的軟體工程,以向您提供洞察力和實用技能,幫助您解決一些有時非常棘手的問題。
作為起點,本課程非常適合那些希望了解基於 Web 的軟件工程基礎知識的編程經驗很少或沒有編程經驗的學生。 它解釋了客戶端(瀏覽器)和服務器端架構、相關的技術術語,並提供了萬維網編程語言(包括 PHP、JavaScript、SQL、CSS 和 HTML)的實用知識。
軟件工程研討會讓您了解如何使用在線教程按照自己的進度獲得進一步的編程技能。 這可以通過安裝本地集成開發環境 (IDE) 打開彈出窗口 ⇒ 用於互聯網,保證您無需使用遠程 Web 服務器即可自由運行、學習、共享和開發網站。 該課程提供了初學者的網絡架構詞典和網絡軟件語言指令,分為三個部分。 第 1 部分 Web 瀏覽器軟件,第 2 部分 - Web 服務器軟件和第 3 部分 - 數據庫軟件。
非計算機專業的學生將更加自信地與使用計算機的同事交流,並更有能力參與未來的技術開發計劃。 稍加堅持,該課程將為嘗試更高級的進一步學習打下堅實的基礎。
不時需要幫助幾乎是不可避免的。 因此,請將您的任何疑問(無論多麼微不足道)發送至 info@adt.vision - 這最終將構成常見問題解答功能的基礎,並幫助可能遇到同樣困難的其他人。 也歡迎提出改進建議和潛在錯誤通知。
課程先決條件
儘管擁有基本的互聯網技能會有所幫助,但不需要以前的軟件工程知識。 每個學生都必須盡可能提供自己的筆記本電腦。 設備必須配置 Chrome 瀏覽器並包含大約 3GB 的可用存儲空間。 在安裝任何軟件之前,請使用安全應用程序檢查您的筆記本電腦是否存在惡意軟件。 防病毒軟件在安裝 IDE 之前和之後運行,以確保威脅級別未被破壞。
術語回顧
您可能知道以下某些術語的含義,或者至少您可能聽說過它們。 嘗試依次消化每個術語,並記下您覺得難以理解的內容。 只要有可能,我們將解決您的疑問。 此外,當我們查看實際示例時,這些術語將更有意義; 進一步澄清的好機會。
不要被推遲。 我們的想法是當我們達到課程的結束時,對這些術語感到放心。 為了完整起見,我們將添加我們發現的任何其他有價值的術語,以及它們相應的技術描述。
每個術語都有一個校準功能,可讓您評估您對相關敘述的理解。 我們將要求您在整個課程中定期復習,以便對您的整體進度一目了然。
Display or update your terminology ratings after the initial set-up (localhost only).
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.
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.
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.
Base Technology 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 - 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 "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.