CSE 115 Introduction to Computer Science I Road map Review - - PowerPoint PPT Presentation

▶
cse 115
SMART_READER_LITE
LIVE PREVIEW

CSE 115 Introduction to Computer Science I Road map Review - - PowerPoint PPT Presentation

May 11, 2023 235 likes •507 views

CSE 115 Introduction to Computer Science I Road map Review Limitations of front-end sites Web servers Examples Review <html> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js">

slide-1
SLIDE 1

CSE 115

Introduction to Computer Science I

slide-2
SLIDE 2

Road map

▶︎ Review ◀ Limitations of front-end sites Web servers Examples

slide-3
SLIDE 3

Review

<html> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"> </script> </head> <body> <div id="myPlot"></div> <script src="plots.js"></script> </body> </html>

Download the Plotly library Use Plotly to display a line graph in the "myPlot" div

slide-4
SLIDE 4

var data = [{ x: [1930, 1940, 1950, 1960], y: [573076, 575901, 580132, 532759], name: "Buffalo Population" }]; var layout = { "title": "Buffalo Population", xaxis: { "title": "year" }, yaxis:{ "title": "population" } } Plotly.newPlot('myPlot', data, layout);

slide-5
SLIDE 5

Review

Every user of our site downloads the entire site (all HTML and JavaScript including the library code) Render the HTML and run the JavaScript in their browser

slide-6
SLIDE 6

Road map

Review ▶︎ Limitations of front-end sites ◀ Web servers Examples

slide-7
SLIDE 7

Limitation: No Interaction

Users always get the same exact page with the same files and same data Data is not shared between users Our site is one-way communication. We send our site to the user and they can run it in their browser No meaningful communication :-(

  • And isn't communication what the Internet is all about?
slide-8
SLIDE 8

Limitation: Security

Each user downloads our entire site They can edit our code and modify every aspect of our site

  • We changed fonts earlier in the semester
  • Attackers may have more malicious intent
  • Can you edit your stars on Infinite Questions?
  • Can you edit your grades on UBLearns?
  • Can you edit the balance of your bank account?
  • Can someone else edit your balance?

The sites we've built cannot control anything of importance (ie. banking, shopping, competitions, voting, ...)

slide-9
SLIDE 9

Discussion

How do we build a site that overcomes these limitations?

No interaction between users Users can edit our code

slide-10
SLIDE 10

Road map

Review Limitations of front-end sites ▶︎ Web servers ◀ Examples

slide-11
SLIDE 11

Web Server

Don't run all the code in the user's browser Some code for the site runs on a web server Users make HTTP requests to get content from the server Users never have access to the server code

slide-12
SLIDE 12

Web Server: Bottle

Developers commonly use web framework libraries to make it easier to set up a web server We'll use bottle in this course: https://bottlepy.org/docs/dev/

  • Other options include Django and Flask

Bottle does not come with python To use bottle you'll have to install it in your Python workspace on Codenvy

slide-13
SLIDE 13

Web Server: Bottle

To use bottle you'll have to install it in your Python workspace on Codenvy Click the terminal tab near the bottom of the screen Enter "pip install --user bottle" Bottle is now installed and can be imported in any python files in this workspace using "import bottle"

slide-14
SLIDE 14

Web Server: Bottle

One more step to set up Codenvy to work with bottle Click the commands tab select your run command for Python files Scroll down to "Preview URL" and enter "http://${server.port.8080}"

  • r click macros and select this option

This will provide a link for anything you host on port 8080

slide-15
SLIDE 15

Web Server: Bottle

Bottle is now set up and you're ready to build your first web server

slide-16
SLIDE 16

Python Web Server

import bottle @bottle.route("/") def any_name(): response = "<html><body><p>" response = response + "Hello from the server!" response = response + "</p></body></html>" return response bottle.run(host="0.0.0.0", port=8080, debug=True)

slide-17
SLIDE 17

Python Web Server

import bottle

Since bottle was installed using pip we can now import it just like we imported the built-in Python libraries (math, csv)

slide-18
SLIDE 18

Python Web Server

bottle.run(host="0.0.0.0", port=8080, debug=True)

Bottle has a function named run that starts the server The syntax is a little different than what we've seen in other function calls Arguments are given as key-value pairs to specify to which parameter each argument should be assigned host and port tell bottle to run on the local machine using port 8080 Setting debug to True will display error messages in the browser when the server returns an error

slide-19
SLIDE 19

Python Web Server

@bottle.route("/") def any_name(): response = "<html><body><p>" response = response + "Hello from the server!" response = response + "</p></body></html>" return response

The @ symbols defines an annotation in Python

  • Adds meta-information to a function

@bottle.route

  • Takes a string and will call this function when the string is

used in a url Whatever the functions returns will be sent to the user

slide-20
SLIDE 20

Python Web Server

@bottle.route("/") def any_name(): response = "<html><body><p>" response = response + "Hello from the server!" response = response + "</p></body></html>" return response

When a user visits this site at the root url "/" they will be served this string which will be interpreted as HTML by their browser

slide-21
SLIDE 21

Python Web Server

The server is a program that keeps running and waits for HTTP requests If you change the code the server must be stopped then restarted to see the changes

slide-22
SLIDE 22

Python Web Server

Examples in Codenvy

slide-23
SLIDE 23

Web Server: Static Files

Writing large amounts of HTML using Python will get annoying Serve static files using bottle Serves the entire file to a user Keeps HTML and code separate root is the directory where the static file can be found

  • Can use the empty string if the file is in the same directory as

your server code

@bottle.route("/") def any_name(): return bottle.static_file("index.html", root="")

slide-24
SLIDE 24

Web Server: Templates

When separating HTML from python we lose the ability to concatenate values into the HTML For this we use templates

  • Call bottle.template(filename, dictionary)
  • In the HTML use {{key_name}} as a placeholder that will be

replaced by the value at key_name from the dictionary

@bottle.route("/") def any_name(): return bottle.template("hello.html", {"name": "World"}) hello.html ... <p>Hello {{name}}</p> ...

slide-25
SLIDE 25

Road map

Review Limitations of front-end sites Web servers ▶︎ Examples ◀

slide-26
SLIDE 26

Python Web Server

Examples in Codenvy