Module 9 Flashcards
Terminology
Server:
-most common: web server
-we can host our own server
https://www.student.cs.uwaterloo.ca/~YOURUSERNAME/hello.html.
-means the web server is a computer with the name www.student.cs.uwaterloo.ca and address 129.97.167.19
-essentially this computer is running a server that waits for a incoming http or https rquest
~anbalae/hello.html is a REFERENCE that the http request is sent for
-once a webserver recie ees a reqiest, it decides what to do
-for this example, it looks for the public_html folder of that user to find that specific file and sends the contents back to the client
CLIENT:
-a web browser on a different computer than the webserver
-essentially the web server provides the web browser (client) the html and the client is what renders and displays it
-if there are other links/references/css files in the html provided, the client must make requests to those references web server in order to display it
WebPages:
-can be static (not dynamic) or dynamic (changes)
Static Example:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<body>
Hello. Today is Monday!
Every day, you could edit the file:
<body>
Hello. Today is Tuesday!
NOT DYNAMIC BC U CHANGE IT
Dynamic:
AUTOMATICALLY CHANGES ITS CONTENTS DUE TO ITS ENVIRONMENT
-ie, i would not go in and change the day of the week every day like for static, it would do it on its own
</body></body></head></html>
Generalization of web server and web clients role
web server: respond to http requests (ex: returning back html pages and pictures
web client:
-request pages (via http)
-interpret html files and make additional requests
-display html files correctly
Server Side Dynamic Web Pages
-changed dynamically by WEB SERVER
-instead of just returning back a file that already exists to a client when sent a request, they will generate a new web page!
-static pages would never work for google cuz it is always getting a new search that has never been searched in history, so it needs to be able to sort thru and give the needede [ages
-think VLOOKUP of excelm for places like amazon they use excel spreadsheets to update info and they attache this to html so that when the client visits page a new one will be made with the info from the spreadsheet
Dynamic elements on amazon
The price may depend on the time of the day and the number of items “in stock”.
Customer feedback and reviews will depend on the activity of previous customers.
A list of “similar items” will be generated.
In addition, there are dynamic elements on the page that are specific to the “person” viewing the product. For example:
A list of “recommended items” for you.
The number of items currently in your shopping cart.
The price of the product may depend on the region you are located in.
If you have revisited a page multiple times, the price may actually increase.
Client Side Dynamic Web Pages
-modified by web browser
-can have other programming language codes within it (such as JavaScript)
-the client is able to interpret and execute the code
3 components needed to implement these dy amic componenets:
1) add html that we are manipulating
es: The button has been pushed <span>0</span> times.
2) add the html for the button itself
<button> Click Me! </button>
Onclick means when button is touiched, execute a function
3) insert the javascript within a
tag
This code is where most of the work is done. First, we set up a variable named numclicks that will store the number of times that the button has been clicked. When the page is first loaded, the value of numclicks will be set to zero.
<script>
var numclicks = 0
function increment() {
numclicks = numclicks + 1
document.getElementById('counter').innerHTML = numclicks
}
</script>
we define the increment function that will be executed when the button is clicked. This code does two things. First, it changes the numclicks variable to be one larger. Then, it instructs the browser to find (get) the HTML element with the ID counter, and then to change its display value to be the same as the variable numclicks. Remember, we added a <span> with the ID counter; this is the element that will be changed.</span>
idk look at module 9.3 for this cuz idk if we need to know the javasceipt
Client side vs server side dynamic web pages main difference
With server-side dynamic pages, the page is modified by the web-server.
With client-side dynamic web pages, the page is modified by the web browser.
Cookies
-primary mechanism used to track behaviour
-when http request made, web server sends messed to client in addition to the webpage, this is the COOKIE (message is hidden inside of something else)
-client just stores the cookies (message) on the computer
-HOWEVER, the next time it makes a message to the same web server, it will pass back those cookes along with the request
USE THIS EXAMPLE
client: (visiting example.com for the first time) I have an HTTP request for example.com/hello.html and I have no cookies for example.com
server: Hey client, here is the file you have requested, and here are some cookies for you: VISITOR_ID=12345678, NUM_VISITS=1
client: (visiting example.com for the second time) I have an HTTP request for example.com/hello.html and my cookies for example.com are: VISITOR_ID=12345678, NUM_VISITS=1
server: Hey client, here is the file you have requested, and here are some updated cookies for you: VISITOR_ID=12345678, NUM_VISITS=2
Benefit of cookies:
-remember u so that u dont have to constantly log in
-increasese conviensicne of web
-remember settings
-rememerb shopping cart
Cons:
if u are on a website that u are embarassed about and there is an ad that is hosted by not the website but by another website (evil-ads.com for ex), when we are requesting (the client) to the evil-ads.con, that webserver will give us back some cookies that will have a number to identify us
-but now if we go toanother website that has ads that is from evil-ads, when we request to see the ads (when we open the website) it will remember us as the person from that bad website, adn give us ads from there (since when we request we will give them those cookies)
THIS IS WHY WE USE INCOGNITO MODE so that the cookies dont get stored permanently and browser history doesnt get stored
Query Strings
-everything after the ? in a weblink
-made up of pairs of values, seperated by a = anc each pair of values is seperated by a &
ie if 1 and 2 is a pair and3 and 4 is a pair it would be like this
?1=2&3=4
-both client and srever access it and use it to communicate
-when first visit a website, you get a session number, and this will be the same session number as u converse through the several pages of the website
-allows them to keep track of pages u visit, how long u stay on each page, the sequence in wwhich u visit the pages
refferal=alice
-a query string that indicates how the person arrived on the page
-means the person arrived via alice’s link
-think affiliate links
CAn display different course notes for different courses all on one website
ie: course=cs100&page=3, it instructs the server to display the third page from the CS 100 course notes.
Authentication code:
-identifies who u are and allows only u to do something that only u are allowed to do
ie: auth=1218932837hn238dn8edn
DIFFERENCE BETWEEn query string and cookies
-query strings: tracked with different session codes if on different tabs or different web browsers
-cookies will not be tracked different, it will be tracked as the same person
Background communication
XML
-similar to html
-good for representing data, not just docs like html
-allows for certain tags that will have the client periodicallyn making a request for specific data, which will be JAVASCRIPT
-essentially, when the client makes the request, java will request data, and once it recieves it, it will interpret it and dynamically adjust the page
CALLED BACKGROUND BC javascript code does not stop to wait for the request to be answered, it just launches the code once it is
-allows the client and server to communicate without hveing to reload the page
-used for NOTIFICATIONS
