Sa Saving ng Da Data o on t n the he Se Server No screens - - PowerPoint PPT Presentation

▶
sa saving ng da data o on t n the he se server
SMART_READER_LITE
LIVE PREVIEW

Sa Saving ng Da Data o on t n the he Se Server No screens - - PowerPoint PPT Presentation

Apr 10, 2023 532 likes •992 views

Sa Saving ng Da Data o on t n the he Se Server No screens Say your name Prof. Lydia Chilton COMS 4170 19 February 2020 My goal is to use your time well. I want you to understand how design is a useful skill in your life. I want

slide-1
SLIDE 1

Sa Saving ng Da Data o

  • n t

n the he Se Server

  • Prof. Lydia Chilton

COMS 4170 19 February 2020 No screens

Say your name

slide-2
SLIDE 2

My goal is to use your time well.

2

  • I want you to understand how design is a useful skill in your life.
  • I want to interact with you on an individual basis
  • I do not want anyone to be bored, lost, zoned-out, or stalking their ex
  • n Facebook.

If you are lost, interact. No screens.

slide-3
SLIDE 3

This is when the class starts to get hard.

slide-4
SLIDE 4

Please don’t underestimate this class

4

Simple, functional design is deceptively difficult

slide-5
SLIDE 5

Reason #1:

Although websites look easy, there is so much going on beneath the surface that you don’t see.

slide-6
SLIDE 6

Reason #2:

Systems programming is hard.

HTML CSS JavaScript JQuery Bootstrap Events Interaction Model / View Data Storage Visual Information hierarchy

Individually, they are not hard. But together, they are complex.

slide-7
SLIDE 7

7

  • I do not want anyone to be confused, bored, or zoned-out.
  • Using screens distracts your neighbors, and makes it harder for them

to pay attention.

If you are lost, interact. No screens.

slide-8
SLIDE 8

Sa Saving ng Da Data o

  • n t

n the he Se Server

  • Prof. Lydia Chilton

COMS 4170 19 February 2020 No screens

Say your name

slide-9
SLIDE 9

Homework 4

slide-10
SLIDE 10

In HW4, you dynamically create widgets

Autocomplete Drag and Drop Buttons

Added minor customization (hovering and drop target feedback)

slide-11
SLIDE 11

And users interacting data

Create / Delete data Update data

slide-12
SLIDE 12

But there’s a big problem:

slide-13
SLIDE 13

Th The data doesn sn’t t sa save

Problem:

slide-14
SLIDE 14

If you refresh the page, your new data is gone. Why?

Add data Data appears

REFRESH PAGE

Data is gone!

The data is only stored

  • n the browser.
slide-15
SLIDE 15

To keep data around, we need to store it somewhere else – another computer that will never get turned off.

Client: gets data from server (and displays it to all users) Server: keeps the data

slide-16
SLIDE 16

What data does the server keep?

Client: gets data from server (and displays it to all users) Server: keeps the data

emails = [ { “from”: “bollinger”, “to”: “chilton”, “subject”: “4170 is awesome!” }, { “from”: “obama”, “to”: “chilton”, “subject”: “belated medal of freedom” }, ]

slide-17
SLIDE 17

What data does the server keep?

Client: gets data from server (and displays it to all users) Server: keeps the data

products = [ { “title”: “Ivy League Web Design”, “author”: “chilton”, “stars”: “5” }, { “title”: “JavaScript and You”, “author”: “chilton”, “stars”: “6” }, ]

slide-18
SLIDE 18

What data does the server keep?

Client: gets data from server (and displays it to all users) Server: keeps the data

cars = [ { “location”: “116 and broadway”, “driver”: “kenny”, “car type”: “uber XL” }, { “location”: “times square”, “driver”: “jen”, “car type”: “normal” }, ]

slide-19
SLIDE 19

What data does the server keep?

Client: gets data from server (and displays it to all users) Server: keeps the data

profiles = [ { “name”: “maddy”, “image”: “./maddy.png”, “likes”: “1000”, ”dislikes”: 0, }, { “name”: “julia”, “image”: “./julia.png”, “likes”: “1000”, “dislikes”: 0, }, ]

slide-20
SLIDE 20

We need to have another computer st store and serve the data. That server is running a Python application called Fl Flask sk.

Client: gets data from server (and displays it to all users) Server: keeps the data

slide-21
SLIDE 21

Example application:

Storing and Serving data in Flask

slide-22
SLIDE 22

You must first install Flask

slide-23
SLIDE 23

Example project for storing a list of names. (code is on the webpage)

slide-24
SLIDE 24

You have written the world’s smallest Flask app. Now what?

slide-25
SLIDE 25

How to render an HTML page with data

slide-26
SLIDE 26

How to send an array of data to JavaScript?

slide-27
SLIDE 27

How to send an array of data to JavaScript?

slide-28
SLIDE 28

Iterate over the data

slide-29
SLIDE 29

Display all the names

slide-30
SLIDE 30

How do we allow people to add names?

slide-31
SLIDE 31

What does the click handler do?

slide-32
SLIDE 32

Now what does the click handler do?

slide-33
SLIDE 33

This is MVC updating. It will add names to the list. Wi Will it sa save? NO. The changes are only on the client

slide-34
SLIDE 34

Save the data to the server

?????

slide-35
SLIDE 35

Save the data to the server

saveName(name)

slide-36
SLIDE 36

What happens on the server?

slide-37
SLIDE 37

How do we test if the data saves to the server?

Refresh the page to see if the new data stays

slide-38
SLIDE 38

Next Homework

slide-39
SLIDE 39

Problem 1. Get the Flask sample code to run

slide-40
SLIDE 40

Problem 2. Put a backend behind Log Sales

slide-41
SLIDE 41

Problem 3. Put a backend behind PPC

slide-42
SLIDE 42

HW5: Due Wednesday Feb 26th:

Problem 2. Put a backend behind Log Sales Problem 3. Put a backend behind PPC Problem 1. Get the Flask sample code to run Please get this done today.

slide-43
SLIDE 43

Fill out participation now! HW 5 is out.

slide-44
SLIDE 44

Participation