CS 174: Web Programming November 23 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak

CS 174: Web ProgrammingNovember 23 Class Meeting

Department of Computer ScienceSan Jose State University

Fall 2015Instructor: Ron Mak

www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

Computer Science Dept.Fall 2015: November 23

CS 174: Web Programming© R. Mak

2

Web Application Presentations Next Week

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

Which teams to present next Monday and Wednesday to be determined by arandom drawing this Wednesday.



3

What to Hand In

A brief (around 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. PowerPoint slides from your presentation.



4

What to Hand In, cont’d

Create a zip file named after your team.

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

Due: Wednesday, December 9 at 11:59 PM.

mailto:[email protected]



5

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.



6

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.



7

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.



8

Model-View-Controller Example

alter state

update update

CONTROLLER

MODEL

VIEW #1 VIEW #2

User

send command



9

MVC Objects

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

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



10

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.



11

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.



12

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.



13

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 a programmer must follow.

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



14

Laravel 5

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

PHP Framework Popularity in Personal ProjectsSitePoint, 2015







15

A Complete Laravel Web App

See http://www.todoparrot.com

http://www.todoparrot.com/

http://www.todoparrot.com/



16

Laravel 5 To-Do Application

Use composer to create the application framework for dev.todoparrot.com. composer is a PHP dependency manager utility.

Start PHP’s built-in development web server at port 8000. Run it in the background.

composer create-project \ laravel/laravel dev.todoparrot.com --prefer-dist

php artisan serve &



17

Laravel 5 To-Do Application, cont’d

Change to the development directory:

Set the application namespace:

Edit file .env:

cd dev.todoparrot.com

php artisan app:name todoparrot

DB_HOST=127.0.0.1DB_DATABASE=homesteadDB_USERNAME=rootDB_PASSWORD=sesame



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

Welcome Page Controller

class WelcomeController extends Controller { public function __construct() { $this->middleware('guest'); }

public function index() { $data = array('name' => 'San Juan', 'date' => date('Y-m-d'));

return view('welcome')->with($data); }}

app/Http/Controllers/WelcomeController.php



20

Welcome Page View

@extends('layouts.master')

@section('content')

<h1>Welcome to TODOParrot</h1> <p> TODOParrot is the ultimate productivity application for tropically-minded users. </p> {{-- Output the $name variable. --}} <p>You last visited {{ $name }} on {{ $date }}.</p>

@endsection

resources/views/layouts/welcome.blade.php



21

Page Templates

<!doctype html><html lang="en"><head> <meta charset="UTF-8">

<title>TODOParrot</title> <style> @import url(//fonts.googleapis.com/css?family=Lato:700);

body { ... }

</style></head><body>

@yield('content')

</body></html>

resources/views/layouts/master.blade.php



22

<?php namespace todoparrot\Http\Controllers;

use todoparrot\Http\Requests;use todoparrot\Http\Controllers\Controller;

use Illuminate\Http\Request;

class AboutController extends Controller { public function index() { return view('about.index'); } ...}

The “About” Controller

php artisan make:controller -- plainAboutController

app/Http/Controllers/plainAboutController.php



23

The “About” View

<h1>About TODOParrot</h1>

<p> TODOParrot is the first tropically-themed TODO List application to hit the market.</p>

resources/views/about/index.blade.php



24

Laravel Models and Migration

Laravel migration

Use a script to change the structure of a database. Be able to roll back any changes.

php artisan make:model Todolist



25

Laravel Models and Migration, cont’d<?php

class CreateTodolistsTable extends Migration { public function up() { Schema::create('todolists', function(Blueprint $table) { $table->increments('id'); $table->string('name'); $table->text('description'); $table->timestamps(); }); }

public function down() { Schema::drop('todolists'); }}

Rollback

database/migrations/<date>_create_todolists_table.php



26

Laravel Models and Migration, cont’d

After migration:

php artisan migrate

mysql> show tables;+---------------------+| Tables_in_homestead |+---------------------+| migrations || password_resets || todolists || users |+---------------------+4 rows in set (0.00 sec)



27

Laravel Models and Migration, cont’d

mysql> describe todolists;+-------------+------------------+------+-----+---------------------+----------------+| Field | Type | Null | Key | Default | Extra |+-------------+------------------+------+-----+---------------------+----------------+| id | int(10) unsigned | NO | PRI | NULL | auto_increment || name | varchar(255) | NO | | NULL | || description | text | NO | | NULL | || created_at | timestamp | NO | | 0000-00-00 00:00:00 | || updated_at | timestamp | NO | | 0000-00-00 00:00:00 | |+-------------+------------------+------+-----+---------------------+----------------+5 rows in set (0.01 sec)



28

Seed the Database

<?php

use Illuminate\Database\Seeder;use Illuminate\Database\Eloquent\Model;

class DatabaseSeeder extends Seeder { public function run() { Model::unguard();

DB::table('todolists')->delete(); $this->call('TodolistTableSeeder');

}}

database/seeds/DatabaseSeeder.php



29

Seed the Database, cont’d

<?php

class TodolistTableSeeder extends Seeder { public function run() { Todolist::create([ 'name' => 'San Juan Vacation', 'description' => 'Things to do before we leave for Puerto Rico!' ]); Todolist::create([ 'name' => 'Home Winterization', 'description' => 'Winter is coming.' ]); Todolist::create([ 'name' => 'Rental Maintenance', 'description' => 'Cleanup and improvements for new tenants' ]); }}

database/seeds/TodolistTableSeeder.php



30

Seed the Database, cont’d

php artisan db:seed

mysql> select * from todolists;+----+--------------------+-----------------------------------------------+---------------------+---------------------+------+| id | name | description | created_at | updated_at | note |+----+--------------------+-----------------------------------------------+---------------------+---------------------+------+| 2 | San Juan Vacation | Things to do before we leave for Puerto Rico! | 2015-04-30 03:06:56 | 2015-04-30 03:06:56 | || 3 | Home Winterization | Winter is coming. | 2015-04-30 03:06:56 | 2015-04-30 03:06:56 | || 4 | Rental Maintenance | Cleanup and improvements for new tenants | 2015-04-30 03:06:56 | 2015-04-30 03:06:56 | |+----+--------------------+-----------------------------------------------+---------------------+---------------------+------+3 rows in set (0.00 sec)



31

The “Lists” Controller

php artisan make:controller ListsController

<?php namespace todoparrot\Http\Controllers;

use todoparrot\Http\Requests;use todoparrot\Http\Controllers\Controller;use todoparrot\Todolist;

use Illuminate\Http\Request;

class ListsController extends Controller {

public function index() { $lists = Todolist::all(); return view('lists.index')->with('lists', $lists); }

...} app/Http/Controllers/ListsController.php



32

The “Lists” View


@section('content')

<h1>Lists</h1>

@if ($lists->count() > 0) <ul> @foreach ($lists as $list) <li>{{ $list->name }}</li> @endforeach </ul>@else <p> No lists found! </p>@endif

@endsection resources/views/list/index.blade.php



33

Create a Contact Form


@section('content')

<h1>Contact TODOParrot</h1>

...

{!! Form::open(array('route' => 'contact_store', 'class' => 'form')) !!}

<div class="form-group"> {!! Form::label('Your Name') !!} {!! Form::text('name', null, array('required', 'class'=>'form-control', 'placeholder'=>'Your name')) !!}</div>

resources/views/about/contact.blade.php



34

Create a Contact Form, cont’d

<div class="form-group"> {!! Form::label('Your E-mail Address') !!} {!! Form::text('email', null, array('required', 'class'=>'form-control', 'placeholder'=>'Your e-mail address')) !!}</div>

<div class="form-group"> {!! Form::label('Your Message') !!} {!! Form::textarea('message', null, array('required', 'class'=>'form-control', 'placeholder'=>'Your message')) !!}</div>



35

Create a Contact Form, cont’d

<div class="form-group"> {!! Form::submit('Contact Us!', array('class'=>'btn btn-primary')) !!}</div>

{!! Form::close() !!}

@endsection



36

Create a Form Request

Encapsulate authorization and validation logic in a separate class. Remove this logic from controllers.

php artisan make:request ContactFormRequest



37

Create a Form Request, cont’d<?php namespace todoparrot\Http\Requests;

use todoparrot\Http\Requests\Request;

class ContactFormRequest extends Request { public function authorize() { return true; }

public function rules() { return [ 'name' => 'required', 'email' => 'required|email', 'message' => 'required', ]; }}

app/Http/Requests/ContactFormRequest.php



38

Create a Form Request, cont’d

class AboutController extends Controller { ... public function create() { return view('about.contact'); } ...} app/Http/Controllers/plainAboutController.php



39

Laravel ORM

Laravel supports object-relational mapping (ORM) for database access.

Create a form for the user to create a new to-do list and enter it into the database.



40

Create a New To-Do List Form@extends('layouts.master')

@section('content')

<h1>Create a New List</h1>

<ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>

{!! Form::open(array('route' => 'lists.store', 'class' => 'form')) !!}

<div class="form-group"> {!! Form::label('List Name') !!} {!! Form::text('name', null, array('required', 'class'=>'form-control', 'placeholder'=>'San Juan Vacation')) !!}</div>

resources/views/create.blade.php



41

Create a New To-Do List Form, cont’d

<div class="form-group"> {!! Form::label('List Description') !!} {!! Form::textarea('description', null, array('required', 'class'=>'form-control', 'placeholder'=>'Things to do before leaving for vacation')) !!}</div>

<div class="form-group"> {!! Form::submit('Create List', array('class'=>'btn btn-primary')) !!}</div

{!! Form::close() !!}@stop



42

Create a New To-Do List Form, cont’d

<?php namespace todoparrot\Http\Requests;

use todoparrot\Http\Requests\Request;

class ListFormRequest extends Request {

public function authorize() { return true; }

public function rules() { return [ 'name' => 'required', 'description' => 'required' ]; }}

app/Http/Requests/ListFormRequest.php



43

Store into the Databaseclass ListsController extends Controller { ... public function create() { return view('lists.create'); }

public function store(ListFormRequest $request) { $list = new Todolist(array( 'name' => $request->get('name'), 'description' => $request->get('description') )); $list->save(); return \Redirect::route('lists.create') ->with('message', 'Your list has been created!'); } ...} app/Http/Controllers/ListsController.php



44

Page Navigation Routing

php artisan route:list

+--------+--------------------------------+-------------------------------------------------------+---------------+-------------------------------------------------------------------+------------+| Domain | Method | URI | Name | Action | Middleware |+--------+--------------------------------+-------------------------------------------------------+---------------+-------------------------------------------------------------------+------------+| | GET|HEAD | / | | todoparrot\Http\Controllers\WelcomeController@index | guest || | GET|HEAD | home | | todoparrot\Http\Controllers\HomeController@index | auth || | GET|HEAD | about | | todoparrot\Http\Controllers\AboutController@index | || | GET|HEAD | auth/register/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\AuthController@getRegister | guest || | POST | auth/register/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\AuthController@postRegister | guest || | GET|HEAD | auth/login/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\AuthController@getLogin | guest || | POST | auth/login/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\AuthController@postLogin | guest || | GET|HEAD | auth/logout/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\AuthController@getLogout | || | GET|HEAD|POST|PUT|PATCH|DELETE | auth/{_missing} | | todoparrot\Http\Controllers\Auth\AuthController@missingMethod | guest || | GET|HEAD | password/email/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\PasswordController@getEmail | guest || | POST | password/email/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\PasswordController@postEmail | guest || | GET|HEAD | password/reset/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\PasswordController@getReset | guest || | POST | password/reset/{one?}/{two?}/{three?}/{four?}/{five?} | | todoparrot\Http\Controllers\Auth\PasswordController@postReset | guest || | GET|HEAD|POST|PUT|PATCH|DELETE | password/{_missing} | | todoparrot\Http\Controllers\Auth\PasswordController@missingMethod | guest || | GET|HEAD | lists | lists.index | todoparrot\Http\Controllers\ListsController@index | || | GET|HEAD | lists/create | lists.create | todoparrot\Http\Controllers\ListsController@create | || | POST | lists | lists.store | todoparrot\Http\Controllers\ListsController@store | || | GET|HEAD | lists/{lists} | lists.show | todoparrot\Http\Controllers\ListsController@show | || | GET|HEAD | lists/{lists}/edit | lists.edit | todoparrot\Http\Controllers\ListsController@edit | || | PUT | lists/{lists} | lists.update | todoparrot\Http\Controllers\ListsController@update | || | PATCH | lists/{lists} | | todoparrot\Http\Controllers\ListsController@update | || | DELETE | lists/{lists} | lists.destroy | todoparrot\Http\Controllers\ListsController@destroy | || | GET|HEAD | contact | contact | todoparrot\Http\Controllers\AboutController@create | || | POST | contact | contact_store | todoparrot\Http\Controllers\AboutController@store | |+--------+--------------------------------+-------------------------------------------------------+---------------+-------------------------------------------------------------------+------------+



45

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 &

Documents

CS 174: Web Programming November 23 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak