Internet introduction Hadassah Academic College Dr Solange Karsenty

Internet introduction Hadassah Academic College Dr Solange Karsenty -1 -

General information • • Read the syllabus on moodle Read…. Read the installation instructions on moodle • you need SQL server, Webstorm, Node. JS • Prepare your computer using the exact same version of software installed in the labs, use the same SQL password for convenience (12345678) • Use the forum for questions that can be answered by anyone and can be useful for other students • Most slides are in english • Hebrew is in the notes (open view->notes page) • You are welcome to contribute to translation • Exam will be in hebrew 2

Honor code • Refresh yourself with the college takanon • Homeworks are 100% individual Discussing assignments at high level: ok, sharing code: not ok copying full repositories from github or other: not ok If you use class examples, your must clean the code: submitting extra/irrelevant code will be penalized • If you copy code, we WILL notice • If in doubt, ask the teacher • • 3

The Internet • A worldwide network connecting millions of hosts • Interconnecting many Local Area Networks (LANs) (inter-network or just Internet) • The LANs connected to the Internet can be of various types • A host is a computer that is connected to the Internet • It started in the 1960 s as a United States government project, sponsored by the Advanced Research Projects Agency (ARPA), and was originally called the ARPANET • The Internet grew quickly throughout the 1980 s and 90 s • First commercial ISPs (Internet Service Providers) in the late 80 s. • Less than 600 computers were connected to the Internet in 1983; now there are billions -4 -

Internet Applications • Email • FTP • Telnet • Browsers • Websites • Skype • Mobile apps • … -5 -

The Web • The term World-Wide Web (or simply Web) describes a collection of many pieces of information that are found on the Internet • Internet hosts can access this information • The Web allows many different types of information to be accessed using a common interface (Web browser ) • A Web document usually contains links to other Web documents, creating a hypermedia environment • The term Web comes from the fact that information is not organized in a linear fashion • These pieces of information are stored as files on particular hosts of the Internet • These hosts are called Web servers -6 -

HTML • The information pieces of the Web can be of textual nature, images, video, audio, programs or any other type of information • Every type of information can have different formats for storing it as a file • For example, some formats for storing images are jpeg, bmp, gif, ps, pdf • Much of the information that is found on the Web is stored as HTML files • HTML is a markup language formatting text. In addition, HTML facilitates inclusion of other types of information (such as images) in our text documents • HTML is NOT a programming language • Tags are added to markup the text, encompassed with <>’s • Simple markup tags: <b>, <i>, <u> (bold, italic, underline) -7 -

HTML example • Let’s see an example of an HTML document: visit any website and look for the “right click on document -> view source” (Chrome) command of your browser. This will open a page showing you the HTML source. 8

Browsing • We use a browser ( )דפדפן to display HTML documents • The browser is responsible for fetching the documents and displaying their contents according to the HTML rules • HTML documents can also contain links to other HTML documents (or files of other types, such as images, etc. ). The user can follow these links by clicking on them to view other related documents and files • HTML documents also include Javascript code, link to CSS documents and more. • Browsing/surfing refers to the activity of viewing documents in the Internet and following their links • Most popular browsers: Chrome, Safari, Firefox -9 -

URLs • Each information piece on the Web has a unique identifying address which is called a URL (Uniform Resource Locator) • A URL takes the following form: • It has 3 main parts: a protocol field, a host field and a resource path • The protocol field (“http” in the previous example) specifies the way in which the information should be accessed. Example of other protocols: https, ftp. • The host field specifies the host on which the information is found • The resourcefield specifies the particular location in the host's file system where the file is found • The default port is 80 (when not specified) • There could be more complex forms of URLs, but we do not discuss them - 10 -

What is HTTP It is a network protocol Hypertext Transfer Protocol (HTTP) Used to deliver all files and other data (called resources) on the World Wide Web, for example HTML files, image files, query results, or anything else http: //www. hac. il/ delivers HTML http: //www. hac. il//Images/logo. png delivers a PNG file properties generic stateless: once a request is sent, it is forgotten (there is no continuation between requests) object-oriented 11

Web servers (HTTP Daemons) • The information pieces of the Web are stored as files on Web servers • In order to make these information pieces available to other hosts, each server runs an HTTP-daemon • Called also web server • Examples: Apache (open source), NGINX (open source), IIs (Windows Microsoft) • When you install XAMPP, it installs Apache web server • When you instal Net. Beans, it installs Glassfish (originally by Sun Microsystems) • An HTTP-daemon is an application that is constantly running on the server and waits for requests from remote hosts (on a specific port number) • A host can request the daemon for a document (a file) that is located on the server • Technically, any host connected to the Internet can act as a Web server by running an HTTP-daemon application • When you develop a website at home, your computer plays both roles: it is a web server and a host (client) requesting pages on itself (the server). • When you run the server at home, we recommend to work offline (without internet connection) to avoid cyber attacks on your computer. - 12 -

Browser - HTTPD Interaction The http requests looks like: GET /index. html user requests http: //www. hac. il/index. html host www. hadassah. ac. il sends the content of index. html web server Disk Browser (computer, smartphone, tablet) - 13 -

Browser - HTTPD Interaction 1. The user requests http: //www. hac. il/index. html 2. The browser contacts the HTTP-daemon running on the host www. hac. il and requests the document /index. html 3. The HTTP-daemon translates the requested name to a specific file in its local file system 4. The HTTP-daemon reads the file index. html from the disk and sends the contents of the file to the browser 5. The browser receives the document, parses it according to the HTML rules and displays it 6. Note that if there are errors in the HTML document, browser will either ignore it or produce unexpected display. - 14 -

Static Web Pages • URL corresponds to directory location on server • e. g. http: //domain. Name. com/img/image 5. jpg maps to img/image 5. jpg file on server • Server responds to HTTP request by returning requested files • Advantages • Simple, easily cacheable, easily searchable • Disadvantages • No interactivity 15

Forms • Pages which contain fields to be filled by user • Usually contain a Submit button • When user presses Submit, client (the browser) collects user input (param, value pairs) into a long string and sends it along with an HTTP command back to server • POST customer=John+Doe&cardno=1234567890&expires=6/98& product=123&quantity=5 • Can you decrypt the HTTP command? It concatenates param=value&param=value…. - 16 -

Server Side Scripting • Generate HTML on the server through scripts • Early approaches emphasized embedding server code inside html pages • Today we separate HTML (view) from logic (controller), using frameworks (React, Angular, Node. JS, Spring etc. ) 18

IP (Internet-Protocol) Addresses • Hostnames are used by people. The network mechanism uses IP-addresses instead • Every host connected to the Internet has a unique IP address that identifies it • IP addresses are 32 -bit numbers that are usually written as four decimal numbers separated by dots, e. g. 135. 17. 98. 240, where the numbers refer to the four bytes composing this address • How does the browser know the IP address of the Web server? • One possibility is that the user explicitly specifies the IP address of the server in the host field of the URL, for example: • http: //135. 17. 98. 240/index. html • However, it is inconvenient for people to remember such addresses - 19 -

Internet Addresses • Many hosts have, in addition to IP address, human-readable Internet Address (or hostnames) • Here are some examples of Internet Addresses: • www. cs. huji. ac. il • www. cocacola. com • www. yellowpages. co. il • www. isdn. net. il • The first part is the name of a particular host (i. e. , computer). The rest is the domain name • Hostnames have a hierarchical structure • www. cs. huji. ac. il • www is a computer in the Dept. of Computer Science (cs) at the Hebrew University of Jerusalem, Israel (huji), which is an Academic Campus (ac) of Israel (il) • The rightmost name describes the main domain of the host (il - Israel). Left to it, there is a sub-domain, and then further to the left, there are more specific sub-domains - 20 -

Generic Domains • There are special domains that are called generic domains • • com - commercial organizations (www. cocacola. com) edu - educational institutions (www. berkeley. com) gov - U. S. governmental organizations (www. cia. gov) int - international organizations mil - U. S. military net - networks (Inter. NIC) org - other organizations (www. w 3. org) - 21 -

Country Domains • Generic domains usually refer to hosts inside the U. S. Other countries use two-letter country domains: • • il - Israel uk - United Kingdom jp - Japan se - Sweden • These domains usually have sub-domains that correspond to the generic domains. For example, co. il is the domain of all the commercial organizations in Israel, and ac. il is the domain of all the academic institutions inside Israel 22

Translating IP addresses • When we address a host in the Internet, we usually use its hostname (e. g. , using a hostname in a URL) • The browser needs to map this hostname into the corresponding IP address of the given host • There is no one-to-one correspondence between the sections of an IP address and the sections of a hostname • The translation of IP addresses to hostnames requires a lookup table • Since there are millions of hosts on the Internet, it is not feasible for the browser to hold a table which maps all hostnames to their IP-addresses • Moreover, new hosts are added to the Internet every day and hosts change their names • The browser (and other Internet applications) use a DNS-Server to map hostnames to IP addresses. DNS (Domain Name System) is an hierarchical scheme for naming hosts 23

The difference static/dynamic • When you browse the web, the browser loads pages that can be either static or dynamic • Static means the content cannot change unless you edit the page content (a file on disk) • Dynamic pages are the result of some program execution • Different content based on a request, user platform, IP origin etc… • The most famous dynamic pages are the one you request from google when you perform a search • The resulting page will be different for each user 24

Typical website: 3 -tier Architecture frontend Client side: HTML Css Javascript Server side: Java Php C# Javascript etc… backend Most websites are made of 3 components, the client side technology: pages that the browser displays (html, css, javascript) On the server side a programming engine: the main computations On the server side a database to handle data such as user credentials or any data to be presented to the browser The client and server communicate using the HTTP protocol. It is essential to study HTTP to program any application running though the web. - 25 -

The full stack developer • Hot topic as greatly in demand, confusing definition • Full stack developers understand all levels of the stack: • • User experience/user interface Business logic Data modeling Server/network/host environment • Needs good familiarity in many layers • Genuine interest in software technology • Don’t under estimate other courses! (Databases, Networking) 26

What will we learn? • On semester alef: e 2 e application solutions • Purpose is to be able to build an e 2 e solution that includes client based solutions and server based solutions along with useful high level frameworks • HTML/CSS, Bootstrap, Javascript, jax, Node. js • Learn about 3 -tiers apps: separating model, view, controller (MVC) • On semester bet: focus around advanced Java development for Internet • We will write Java programs that produce HTML pages as output • We will perform backend development – learn about networking, database accessing, multithreading • We will learn about components programming (Spring framework) 27

Practice • When you browse the internet, you often trigger the execution of programs. On the server, it could be a program that access a database and returns the result of some search request, on the browser itself, it could be for example some piece of javascript that perform some animations or interaction with user mouse events. • Exercise: • pick some of your favorite Web sites • Try to guess if it you see static or dynamic webpages • Use the ”inspect” command of the browser to look behind the scenes! 28