Day 15: Web Applications suggested reading: Agile Web Development - - PowerPoint PPT Presentation

▶
day 15 web applications
SMART_READER_LITE
LIVE PREVIEW

Day 15: Web Applications suggested reading: Agile Web Development - - PowerPoint PPT Presentation

Jan 28, 2023 105 likes •302 views

CS 368 Intro to Scripting Languages Day 15: Web Applications suggested reading: Agile Web Development with Rails (3e), by Ruby, Thomas, & Heinemeier Hansson but I may be biased (^_^) Summer 2009 Cartwright, De Smet, LeRoy 1 CS

slide-1
SLIDE 1

CS 368 – Intro to Scripting Languages

Day 15: Web Applications

suggested reading: Agile Web Development with Rails (3e),

by Ruby, Thomas, & Heinemeier Hansson

but I may be biased… (^_^)

Summer 2009 1 Cartwright, De Smet, LeRoy

slide-2
SLIDE 2

CS 368 – Intro to Scripting Languages

HOMEWORK

Summer 2009 Cartwright, De Smet, LeRoy 2

slide-3
SLIDE 3

CS 368 – Intro to Scripting Languages

What a Tangled Web We Weave

  • In the beginning… static web pages
  • Dynamic pages add interactivity

– Forms – Banner ads – JavaScript – Web applications – Web 2.0

  • Code runs on server, browser, both

Summer 2009 Cartwright, De Smet, LeRoy 3

slide-4
SLIDE 4

CS 368 – Intro to Scripting Languages

Web Architecture

Summer 2009 Cartwright, De Smet, LeRoy 4

Browser Web Server Application Code Database Internet ? (as needed) HTTP Request HTTP Response

slide-5
SLIDE 5

CS 368 – Intro to Scripting Languages

HTTP Request

  • Path: /page
  • Parameters (from URL, form, etc.):

– name1 => “val1” – n2 => “2”

  • Protocol version (1.0, 1.1)
  • Stuff (req. method, headers, …)
  • Server may add more to “request”

Summer 2009 Cartwright, De Smet, LeRoy 5

http://foo.com/page?name1=val1&n2=2

slide-6
SLIDE 6

CS 368 – Intro to Scripting Languages

HTTP Response

  • Status (OK or type of failure)
  • Headers (type, length, date, etc.)
  • Payload

– HTML – image file – CSS – PDF – etc.

Summer 2009 Cartwright, De Smet, LeRoy 6

slide-7
SLIDE 7

CS 368 – Intro to Scripting Languages

HTML

Summer 2009 Cartwright, De Smet, LeRoy 7

<h1>My Cat</h1> <p>Picture of <em>my cat</em>:</p> <img src="cat.jpg">

My Cat

Picture of my cat:

slide-8
SLIDE 8

CS 368 – Intro to Scripting Languages

Dynamic Web Page

  • Change HTML based on input
  • Client-side (JavaScript, Flash, …):

– Code loads along with page – Server not required after page load

  • Server-side

– Code runs on server only – Changes HTML before page is sent – Does not affect page after it’s loaded

Summer 2009 Cartwright, De Smet, LeRoy 8

slide-9
SLIDE 9

CS 368 – Intro to Scripting Languages

Web Architecture

Summer 2009 Cartwright, De Smet, LeRoy 9

Browser Web Server Application Code Database Internet

?

(as needed) HTTP Request HTTP Response

slide-10
SLIDE 10

CS 368 – Intro to Scripting Languages

CGI (Common Gateway Interface)

  • Protocol between web server & app.
  • Handles requests for dynamic pages
  • Somewhat dated (but see FastCGI)
  • Details:

– Input via environment and stdin – Output via stdout – Output is: HTTP headers, blank, HTML

  • Very quickly, gets tedious to code

Summer 2009 Cartwright, De Smet, LeRoy 10

slide-11
SLIDE 11

CS 368 – Intro to Scripting Languages

Better Web Apps

  • Use libraries to make things easy(er)
  • Package request headers & params
  • Make HTML generation easier
  • Allow mixed HTML & code
  • Examples:

– Perl CGI – PHP – ASP

Summer 2009 Cartwright, De Smet, LeRoy 11

slide-12
SLIDE 12

CS 368 – Intro to Scripting Languages

CGI.pm

Summer 2009 Cartwright, De Smet, LeRoy 12

use CGI; my $query = new CGI; my $name = $query->param('name'); print $query->header, $query->start_html('hello'), $query->h1("Hello, $name"), $query->end_html;

  • OK for short code, but how do we
  • rganize longer applications?
slide-13
SLIDE 13

CS 368 – Intro to Scripting Languages

Model-View-Controller (MVC)

  • General code pattern
  • Originally for GUI apps
  • Helps organize code logically

Summer 2009 Cartwright, De Smet, LeRoy 13

slide-14
SLIDE 14

CS 368 – Intro to Scripting Languages

Model

  • Domain logic
  • Domain data
  • Data persistence (usu., database)

Summer 2009 Cartwright, De Smet, LeRoy 14

my $greeting = $salutation + $name; my $expiration = today() + 14; if (record_found()) { $total = record_total(); } else { $total = -1; }

slide-15
SLIDE 15

CS 368 – Intro to Scripting Languages

View

  • Renders model element(s)
  • Creates user interface

Summer 2009 Cartwright, De Smet, LeRoy 15

print $q->h3($greeting); my $disp_tot = ($total >= 0 ? $total : 'n/a'); print $q->p("Total: $disp_tot"); print $q->p("Expires " . strftime('%M/%D/%Y', $expiration));

slide-16
SLIDE 16

CS 368 – Intro to Scripting Languages

View Templates

  • Simplify views using mostly HTML

Summer 2009 Cartwright, De Smet, LeRoy 16

... <h1><%= @page_title %></h1> <p>Hello, <%= @name %>!</p> <% if @friends.size > 0 -%> <p> Friends logged in: <%= @friends.join(', ') %> </p> <% end -%>

slide-17
SLIDE 17

CS 368 – Intro to Scripting Languages

Controller

  • Handles incoming requests
  • Routes to correct code
  • May initiate model changes
  • May pick correct view

Summer 2009 Cartwright, De Smet, LeRoy 17

if ($q->param('update')) { update_totals(); } render('summary');

slide-18
SLIDE 18

CS 368 – Intro to Scripting Languages

Web Application Frameworks

  • Next step up from a library
  • Provides:

– library functions – code organization scheme (e.g., MVC) – template system – database connectivity – object-relational mapping – INTEGRATION!

  • Mason, Rails, Django, & dozens more

Summer 2009 Cartwright, De Smet, LeRoy 18

slide-19
SLIDE 19

CS 368 – Intro to Scripting Languages

Live Rails Example

Summer 2009 Cartwright, De Smet, LeRoy 19