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

2. Unofficial Field Trip Extra credit fun quiz!
Computer History Museum in Mt. View
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:
My summer seminar:
Restoration:
Extra credit
fun quiz!

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

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

5. What to Hand In, cont’d Create a zip file named after your team.
to Subject: CS 174 Project team name
Due: One week after your demo presentation.

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.

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.

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.

9. Model-View-Controller Example
update
update
alter state
send command
VIEW #1
VIEW #2
User

10. MVC Objects
Recall our application with the dynamically generated drop-down menu and table:
What are the model objects? View objects? Controller objects?

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.

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.

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.

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.

15. Laravel 5 PHP Framework Popularity in Personal Projects
SitePoint, 2015

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 &

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
work

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

19. A Complete Laravel Web App
See