1. CS 174: Web Programming November 23 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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 a random drawing this Wednesday. 2

3. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 3

4. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak What to Hand In, cont’d  Create a zip file named after your team.  Email to ron.mak@sjsu.edu Subject: CS 174- section Project team nameron.mak@sjsu.edu  Due: Wednesday, December 9 at 11:59 PM. 4

5. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 8 Model-View-Controller Example alter state update CONTROLLER MODEL VIEW #1VIEW #2 User send command

9. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak MVC Objects  Recall our application with the dynamically generated drop-down menu and table:  What are the model objects? View objects? Controller objects? 9

10. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 10

11. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 11

12. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 12

13. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 13

14. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Laravel 5 14 http://www.sitepoint.com/best- php-framework-2015-sitepoint- survey-results/ PHP Framework Popularity in Personal Projects SitePoint, 2015

15. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak A Complete Laravel Web App  See http://www.todoparrot.comhttp://www.todoparrot.com 15

16. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 16 composer create-project \ laravel/laravel dev.todoparrot.com --prefer-dist php artisan serve &

17. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Laravel 5 To-Do Application, cont’d  Change to the development directory:  Set the application namespace:  Edit file.env: 17 cd dev.todoparrot.com php artisan app:name todoparrot DB_HOST=127.0.0.1 DB_DATABASE=homestead DB_USERNAME=root DB_PASSWORD=sesame

18. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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: 18 composer require barryvdh/laravel-debugbar 'Barryvdh\Debugbar\ServiceProvider' 'Debugbar' => 'Barryvdh\Debugbar\Facade' php artisan vendor:publish

19. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Welcome Page Controller 19 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Welcome Page View 20 @extends('layouts.master') @section('content') Welcome to TODOParrot TODOParrot is the ultimate productivity application for tropically-minded users. {{-- Output the $name variable. --}} You last visited {{ $name }} on {{ $date }}. @endsection resources/views/layouts/welcome.blade.php

21. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Page Templates 21 TODOParrot @import url(//fonts.googleapis.com/css?family=Lato:700); body {... } @yield('content') resources/views/layouts/master.blade.php

22. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak <?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 22 php artisan make:controller -- plainAboutController app/Http/Controllers/plainAboutController.php

23. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak The “About” View 23 About TODOParrot TODOParrot is the first tropically-themed TODO List application to hit the market. resources/views/about/index.blade.php

24. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Laravel Models and Migration  Laravel migration Use a script to change the structure of a database. Be able to roll back any changes. 24 php artisan make:model Todolist

25. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Laravel Models and Migration, cont’d 25 <?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/ _create_todolists_table.php

26. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Laravel Models and Migration, cont’d  After migration: 26 php artisan migrate mysql> show tables; +---------------------+ | Tables_in_homestead | +---------------------+ | migrations | | password_resets | | todolists | | users | +---------------------+ 4 rows in set (0.00 sec)

27. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Laravel Models and Migration, cont’d 27 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Seed the Database 28 <?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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Seed the Database, cont’d 29 <?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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Seed the Database, cont’d 30 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak The “Lists” Controller 31 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak The “Lists” View 32 @extends('layouts.master') @section('content') Lists @if ($lists->count() > 0) @foreach ($lists as $list) {{ $list->name }} @endforeach @else No lists found! @endif @endsection resources/views/list/index.blade.php

33. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a Contact Form 33 @extends('layouts.master') @section('content') Contact TODOParrot... {!! Form::open(array('route' => 'contact_store', 'class' => 'form')) !!} {!! Form::label('Your Name') !!} {!! Form::text('name', null, array('required', 'class'=>'form-control', 'placeholder'=>'Your name')) !!} resources/views/about/contact.blade.php

34. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a Contact Form, cont’d 34 {!! Form::label('Your E-mail Address') !!} {!! Form::text('email', null, array('required', 'class'=>'form-control', 'placeholder'=>'Your e-mail address')) !!} {!! Form::label('Your Message') !!} {!! Form::textarea('message', null, array('required', 'class'=>'form-control', 'placeholder'=>'Your message')) !!}

35. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a Contact Form, cont’d 35 {!! Form::submit('Contact Us!', array('class'=>'btn btn-primary')) !!} {!! Form::close() !!} @endsection

36. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a Form Request  Encapsulate authorization and validation logic in a separate class. Remove this logic from controllers. 36 php artisan make:request ContactFormRequest

37. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a Form Request, cont’d 37 <?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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a Form Request, cont’d 38 class AboutController extends Controller {... public function create() { return view('about.contact'); }... } app/Http/Controllers/plainAboutController.php

39. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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. 39

40. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a New To-Do List Form 40 @extends('layouts.master') @section('content') Create a New List @foreach($errors->all() as $error) {{ $error }} @endforeach {!! Form::open(array('route' => 'lists.store', 'class' => 'form')) !!} {!! Form::label('List Name') !!} {!! Form::text('name', null, array('required', 'class'=>'form-control', 'placeholder'=>'San Juan Vacation')) !!} resources/views/create.blade.php

41. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a New To-Do List Form, cont’d 41 {!! Form::label('List Description') !!} {!! Form::textarea('description', null, array('required', 'class'=>'form-control', 'placeholder'=>'Things to do before leaving for vacation')) !!} {!! Form::submit('Create List', array('class'=>'btn btn-primary')) !!} </div {!! Form::close() !!} @stop

42. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Create a New To-Do List Form, cont’d 42 <?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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Store into the Database 43 class 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak Page Navigation Routing 44 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. Computer Science Dept. Fall 2015: November 23 CS 174: Web Programming © R. Mak 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: 45 composer create-project laravel/laravel testapp --prefer-dist php artisan serve &