CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State...

19
CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

Transcript of CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State...

Page 1: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

CS 174: Web ProgrammingApril 28 Class Meeting

Department of Computer ScienceSan Jose State University

Spring 2015Instructor: Ron Mak

www.cs.sjsu.edu/~mak

Page 2: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

2

Unofficial Field Trip

Computer History Museum in Mt. View http://www.computerhistory.org/

Saturday, May 9, 11:30 – closing time

Special free admission. Do a self-guided tour of the new Revolution exhibit. See a life-size working model of Charles Babbage’s

Difference Engine in operation, a hand-cranked mechanical computer designed in the early 1800s.

Experience a fully restored IBM 1401 mainframe computer from the early 1960s in operation. General info: http://en.wikipedia.org/wiki/IBM_1401 My summer seminar: http://www.cs.sjsu.edu/~mak/1401/ Restoration:

http://ed-thelen.org/1401Project/1401RestorationPage.html

Extra creditfun quiz!

Page 3: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

3

Web Application Presentations Next Week

15-minute demos Explain what the app does. Show the app in operation. Describe what technologies you used.

To be determined by random drawing:

Tuesday Adroit Coders, MECH, Super Spartans, Xloop

Thursday Alpha, Atom, Cool Code, Nygma, Websters

Page 4: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

4

What to Hand In

A brief (under 5 pages) report describing: What the app does. Its architecture and the technologies that you used. Any special features or challenges.

Database dump. Indicate the name of the database and the

username and password to use. Source files. Screen shots. Any PowerPoint slides

Page 5: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

5

What to Hand In, cont’d

Create a zip file named after your team.

Email to [email protected] Subject: CS 174 Project team name

Due: One week after your demo presentation.

Page 6: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

6

Model-View-Controller Architecture (MVC)

The Model-View-Controller (MVC) architecture is used for client-server applications that include a user interface.

Well-designed web applications use the MVC architecture.

Page 7: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

7

Three Types of MVC Objects

Model objects Maintain the data and knowledge

of your application.

View objects Display the model to the user. The presentation layer.

Controller objects Manage the application flow. Handle user interactions.

Page 8: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

8

Model-View-Controller Operation The user interacts with the

controller to send it commands. Via buttons, text fields,

mouse actions, etc.

The commands may tell the controller to modify the view directly, or the controller may alter the state of the model.

The altered model causes the view to update how it displays the model’s data.

The user may react to changes in the view by interacting with the controller to send new commands.

The user never manipulates the model directly,

only through the controller.

Page 9: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

9

Model-View-Controller Example

alter state

update update

CONTROLLER

MODEL

VIEW #1 VIEW #2

User

send command

Page 10: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

10

MVC Objects

Recall our application with the dynamically generated drop-down menu and table:

What are the model objects? View objects? Controller objects?

Page 11: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

11

Advantages of the MVC Architecture

Well-established industry convention.

Well-defined roles for the objects of a GUI-based client-server application.

Once interfaces are designed and agreed upon, developers can work independently.

MVC architectures are supported by web application frameworks.

Page 12: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

12

Web Application Framework

Provides the structure for a dynamic web app. Supports the MVC architecture.

Relieves the web programmer of the mundane details of web application development.

During run time, the framework controls web page generation input validation page navigation

Support for security and internationalization.

Page 13: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

13

Inversion of Control

With traditional procedural programming, our programs are in complete control of the execution flow at run time.

Programs that react to external events (such as button clicks) have inversion of control.

Such programs are not in complete control of the execution flow.

They react (via event handlers) to the events as the events occur.

Page 14: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

14

Frameworks and Inversion of Control

Frameworks can also impose inversion of control on programmers.

A framework has a well-specified directory structure into which the programmer adds code.

A framework imposes a naming convention that programmer must follow.

During run time, the framework controls the flow of execution by invoking the programmer’s code at the appropriate times.

Page 15: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

15

Laravel 5

http://www.sitepoint.com/best-php-framework-2015-sitepoint-survey-results/

PHP Framework Popularity in Personal ProjectsSitePoint, 2015

Page 16: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

16

Laravel Test App

Use composer to create a Laravel test app. composer is the PHP project manager.

Start PHP’s built-in development web server at port 8000:

composer create-project laravel/laravel testapp --prefer-dist

php artisan serve &

Page 17: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

17

Laravel 5 Directory Structure app

Console Http

Controllers Filters Requests

Providers bootstrap config database

migrations seeds

public resources

lang views

storage cache logs meta sessions views work

Page 18: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

18

Laravel Debugbar

To install Laravel’s debugging toolbar Debugbar:

Modify file config/app.php:Add and to the providers and alias arrays, respectively.

Install the package configuration:

composer require barryvdh/laravel-debugbar

'Barryvdh\Debugbar\ServiceProvider'

'Debugbar' => 'Barryvdh\Debugbar\Facade'

php artisan vendor:publish

Page 19: CS 174: Web Programming April 28 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Computer Science Dept.Spring 2015: April 28

CS 174: Web Programming© R. Mak

19

A Complete Laravel Web App

See http://www.todoparrot.com