FIT1050 Web Fundamentals
Web Servers and Server-Side Scripting
Copyright Warning
Copyright By PowCoder代写 加微信 powcoder
Commonwealth of Australia Copyright Act 1968
This material has been reproduced and communicated to you by or on behalf of Monash University in accordance with section 113P of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Learning objectives
Web servers and server-side scripting
¡ñ Understand how the software components of a web server interact
¡ñ Differentiate server-side scripting from client-side scripting Asynchronous data exchange
¡ñ Understand the basics of how AJAX works
¡ñ View a real-world example of JSON data Web page state management
¡ñ Consider the challenges of persistent state in web sites
¡ñ Compare approaches for storing a website’s current state
Web Servers and Server-Side Scripting
Review: Client-server model of computing
Clients request data and servers send responses. Both are able to execute scripts.
Server-side scripting
Code stored on a web server is executed on the server to generate a result. Only the result is sent to the user’s web browser.
¡ñ No real-time access to user interactions
¡ñ Running a code requires a request and response cycle (i.e. page reload)
¡ñ Original code cannot be inspected by users
Great for back-end tasks!
¡ñ Store data persistently.
¡ñ Run secure code.
¡ñ Execute remote applications.
Different types of server environments
Servers can be used in various stages of web development for different reasons. Within a single project there may be several servers involved.
Development
¡ñ Typically local, where new code tested as changes are made. Staging
¡ñ Typically remote, testing using a duplicate of the production environment.
Production
¡ñ Code is deployed online to be served as a publicly accessible website.
HTTP servers
An HTTP server or HTTP daemon (often confusingly referred to as a web server) is an application with a specific job:
¡ñ Bind to a network port and start listening.
¡ñ Wait for incoming HTTP requests for data.
¡ñ Return a response – a file containing data.
The response usually contains the requested file, but could also contain pre-defined or generated page:
¡ñ A list of files stored in a folder.
¡ñ A page for an HTTP error message.
Common HTTP server software
¡ñ Apache and Nginx are popular free open source software
¡ñ IIS (Internet Information Services) available as an optional feature in Microsoft Windows.
¡ñ Other HTTP servers include
¡ð Commercial enterprise
products such as Litespeed
¡ð Google Web Server platform
¡ð Other specialised servers
Estimated Market Share
https://w3techs.com/technologies/overview/web_server
Server-side scripting
Web servers can run script processors to support different languages.
PHP ASP ASP.NET Java Fusion Perl Python JavaScript (Node.js)
Your choice of language will depend on:
¡ñ Developer knowledge and skills.
¡ñ Script processor software installed on the web server.
¡ñ Third-party scripts that you want to use.
Scripting languages and processors
The HTTP server is configured to always run server scripts using a script processor.
In the example, the client never sees PHP code – only the generated HTML output.
PHP has the largest market share
PHP Hypertext Pre-processor
¡ñ A scripting language
¡ð Also the name of the software
that executes the PHP scripts
¡ñ Initially released in 1995
¡ñ Dynamically typed
¡ñ Case-sensitive variables
¡ñ Case-insensitive functions
¡ñ Primarily used to dynamically
generate web pages
Estimated Market Share
https://w3techs.com/technologies/overview/programming_language
Almost all reasonably large sites use a database to store site data. For example:
¡ñ Store user login details
¡ñ Store information about site structure
¡ñ Store and manage site content separately from HTML
A server-side script processor can connect to the database create, read, update or delete data. For example:
¡ñ Securely processing user login requests.
¡ñ Lookup and data based on information in the request URL.
¡ñ Insert site content into page templates to make HTML documents.
SQL database management systems
The vast majority of modern relational database management systems rely on an implementation of the SQL language to execute commands on a database server:
MySQL PostgreSQL MS SQL Oracle MariaDB Transact-SQL DB2 etc.
While SQL is a standardised language, specific implementations do not always follow standards.
Communication between applications
The various software applications of a web server stack can exchange information.
The user’s web browser is unaware of the server-side interactions.
Choosing between client-side and server-side
Client-side and server-side development approaches are fundamentally different. Choose the right technique for the job.
¡ñ Some client-side scripting tasks are impossible with server-side scripting
¡ñ Some server-side scripting tasks are impossible with client-side scripting
Some tasks can be done with either, with consideration of differences:
¡ñ Timing (client is immediate, server requires request-response)
¡ñ Data storage (browser vs server storage and database)
¡ñ Security (client code may be accessible to the user)
Asynchronous Data Exchange
Combining client and server-side scripting
The best of both worlds:
JavaScript can initiate communication with a server to fetch new data. This allows client-server data exchange without page reloads
Consider an address search feature:
¡ñ User starts typing an address.
¡ñ Capture the input, send it to a server.
¡ñ Server performs a database search.
¡ñ Search results are sent back to the client.
¡ñ Insert the search results into the page.
AJAX is Asynchronous JavaScript And XML
All modern web browsers have the ability to:
¡ñ Send a request to a server using JavaScript
¡ñ Receive a response without reloading the page
¡ñ Modify the DOM to perform client-side rendering of content
The name is a little misleading!
Practically any data format can be used in this exchange (HTML fragment, XML, JavaScript, plain-text, etc). XML data is not specifically required.
Synchronous vs asynchronous HTTP
With synchronous HTTP, each response is loaded as an entire new page.
With AJAX, responses load the data required to update parts of the initial page.
Web Service APIs
Most commonly we think of web services as Application Programming Interfaces.
¡ñ Can be accessed via HTTP using client or server-side code.
¡ñ Data usually provided in JSON or XML formats
Allows sites to use data from a wide variety of third-party web services.
¡ñ https://developers.google.com/youtube/v3/docs/ ¡ñ https://developer.musixmatch.com/documentation ¡ñ https://openweathermap.org/api
¡ñ https://www.reddit.com/dev/api/
Example: Reddit provides JSON data
{“kind”: “Listing”, “data”: {“modhash”: “”, “dist”: 26, “children”: [{“kind”:
“t3”, “data”: {“approved_at_utc”: null, “subreddit”: “cats”, “selftext”: “”,
“author_fullname”: “t2_4olb3”, “saved”: false, “mod_reason_title”: null,
“gilded”: 0, “clicked”: false, “title”: “Please do us mods a favor and if you
report something for \”Claiming ownership of another person’s cat\”, make a
post in the post you’re reporting linking to the OC poster. Thank you!”,
“link_flair_richtext”: [], “subreddit_name_prefixed”: “r/cats”, “hidden”:
false, “pwls”: 6, “link_flair_css_class”: “discussion”, “downs”: 0,
“thumbnail_height”: null, “parent_whitelist_status”: “all_ads”, “hide_score”:
false, “name”: “t3_9ko0du”, “quarantine”: false, “link_flair_text_color”:
“dark”, “author_flair_background_color”: “”, “subreddit_type”: “public”, “ups”:
12, “domain”: “self.cats”, “media_embed”: {}, “thumbnail_width”: null,
“author_flair_template_id”: null, “is_original_content”: false, “user_reports”:
[], “secure_media”: null, “is_reddit_media_domain”: false, “is_meta”: false,
“category”: null, “secure_media_embed”: {}, “link_flair_text
https://www.reddit.com/r/cats.json
JSON data = JavaScript Objects
“name”:”John”,
“car”:null
If this JSON was loaded into a variable named data:
JSON is JavaScript with extra rules:
¡ñ Property names must be double-quoted strings
¡ñ Double-quotes all string values
¡ñ Properties cannot contain JavaScript
¡ñ No semicolon at the end
JSON code must be completely valid for it to be parseable after loading.
console.log( data.name );
console.log( data.car );
Browsing JSON data structures
Logging JSON response data in your browser’s console allows it to be browsed as a tree structure.
JSON text can also be pasted directly into the console and run to evaluate it.
Third-party tools can also be used:
¡ñ https://jsoneditoronline.org/
¡ñ https://jsonformatter.org/json-viewer
Web Page State Management
HTTP is a stateless protocol
HTTP was originally designed to be a “stateless protocol”, which means:
¡ñ Each request is independent of previous requests.
¡ñ The protocol is not required to retain knowledge of past requests.
¡ñ There is no assumption consecutive requests originate from the same client.
This means that any given URL should return the same result when requested from any client, provided the requested resource has not changed.
But it seems like websites do remember users and data between pages and browsing sessions…
Users expect persistent state
Imagine you are doing some online shopping. You add some items to your cart, but accidentally close the tab.
When you re-open the site, you see…
¡ñ You are still logged in
¡ñ Your items are still in the cart
How does the website remember this information if HTTP is stateless?
HTTP Cookies
Cookies are text files that a browser saves on the client to store site-specific data.
¡ñ Temporary or persistent, surviving between browser sessions
¡ñ Can only be read by the domain that originally created it.
¡ñ Limited to 4KB, automatically sent to the server on every request to the domain.
¡ñ Can be deleted by the user.
While 4KB is very small, it still stores thousands of characters of data:
¡ñ Personalisation when viewing the page (user preferences)
¡ñ Identify users to a server (user tracking IDs, login status, analytics)
¡ñ Save/restore application state (save games, shopping carts)
HTML5 web storage
Web storage is an alternative way of storing temporary (session storage) and persistent (local storage) text data. Web storage works in all modern browsers.
For most browsers:
¡ñ Up to 10MB storage per origin (a.example.com, b.example.com, etc.)
¡ñ Up to 2GB per domain (*.example.com)
¡ñ Up to 50% of free disk space can be used by the browser
Stored data is not sent to the server on each request. This enables higher capacity with minimal impact on site loading performance.
Server-side data storage
Data stored on the client is accessible to JavaScript, including third-party scripts. Secure state storage can make use of a server-side database instead.
Some correlation between the client and server is required:
¡ñ Store all state data relating to a client on the server
¡ñ Generate a random ID, store it on the server and on the client using a cookie
¡ñ When the client needs to identify itself, it sends the ID to the server
¡ñ The server uses the ID to load the stored state data
This technique uses a form of tracking cookie, but it’s an essential part of how modern web applications manage state.
¡ñ Search engines and search engine optimisation.
¡ñ Preparing for the unit’s final exam.
¡ñ Upload website files to a webhost
¡ñ Participation Milestone 5 takes place in the week 12 lab session.
¡ð Attend your allocated lab class to attempt some practice exam questions.
¡ð Marks awarded for reasonable attempts completed during class.
¡ñ Assignment 3 is due at the end of week 12, 11:55PM.
¡ð Review the assignment marking guidelines document.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com