LOGO Home About Service Contact

Web Information System

Lecture 3: MVC and Testing

Chapter 5 and 6
Dr. Rasha Montaser
 LOGO Home About Service Contact

Week 3 Outcomes
• Distinguish between Model 1 and Model 2
architecture web applications
• Employ the Model-View-Controller design
pattern in web development
• Utilize RESTful URLs for clean design
• List the advantages to unit testing
 LOGO Home About Service Contact

Web Architecture
• Model 1 architecture
– Code for application, database, and display
logic is intermixed in a single monolithic page
– A very tangled set of interactions.
• Ex: To do application

3
 LOGO Home About Service Contact

Web Architecture
• Model 1 architecture
– Works fine for simple applications
– Becomes horribly messy when
• Application logic is complicated
• Error/security reporting is robust
• You need to debug or make changes
– Problem: solving three issues in one place.
– Solution: separate three issues into three
places.

4
 LOGO Home About Service Contact

MVC-based Architecture
• Model 2:
– Model-View-Controller (MVC)
• Model: interacts with the database (php only no
html)
• View: presents data to the user (html with some php
to display dynamic data)
• Controller: encapsulates “business logic”, receives
the http request from the browser and get the
appropriate data from the model and return the
appropriate views to the user (php only)
5
 LOGO Home About Service Contact

Flow of a web request

• URL maps into a controller
• Controller updates or retrieves data via model
• Controller forwards request to a view
 LOGO Home About Service Contact

MVC-based Architecture
DB
• Browser sends a request to a
web server
Model View • Web server fires a routing
script to determine what other
script (based on URL) should
Controller
handle the request.
• Routing script dispatches the
Dispatching request to the appropriate
Routing
Web Server controller.
• Controller invokes data-
oriented actions on the model
Browser

7
 LOGO Home About Service Contact

MVC-based Architecture
DB
• Model updates/queries the
database
Model View
• Model returns results to the
controller.
• Controller takes results,
Controller applies business logic, and
forwards results to the view.
• View renders the HTML and
Dispatching
Routing returns it to the controller.
Web Server • Controller returns HTML to
web server and then to
browser.
Browser

8
 LOGO Home About Service Contact

MVC-based Architecture
• We’ve already done some of this last
week:
– Separation of DB instantiation into db.inc
– Separation of model into model_student.inc
– Separation of view into view_student.php
• But, we need to structure this better!

9
 LOGO Home About Service Contact

How to code a function?

Use the function keyword to define a function

Use global keyword to make the variable

$db available within the function

Use the return keyword to return a value (optional)

 LOGO Home About Service Contact

Redirect request
• If a PHP file needs to run itself again, you can’t use the
include function to forward the request.
• You can use the header function to redirect the request
to the same file.
 LOGO Home About Service Contact

How to identify parameters within

the redirect request
• ? Variable_name = value

• Use double quotes for the string so it can insert the

value for the variable into the string
• Without adding variables single quotes can be use.
 LOGO Home About Service Contact

Product manual application

 LOGO Home About Service Contact

Using MVC
• Model
– Database.php → get connection to the database
– Category_db.php → works with category data file
– Product_db.php → works with product data file
• View
– Product_list.php → user view and delete product
– Product_add.php→ user view add product
– Database_error.php→ display error page
• Controller
– Index.php→ the default file of the application
directory, called when the user starts the application
 LOGO Home About Service Contact

DB

Model files Model View

Controller

Dispatching
Routing
Web Server

Browser
 LOGO Home About Service Contact

Php file that connects to the database

 LOGO Home About Service Contact

Php file that works with category

database file
 LOGO Home About Service Contact

Php file that works with product

database file

Use the fetch function

because we need only
the first record
 LOGO Home About Service Contact

The controller
DB

Model View

Controller

Dispatching
Routing
Web Server

Browser
 LOGO Home About Service Contact

Index.php
Import the Model files

Set the $action variable, to define

the view page to be displayed

Retrieve the category id from the Get

Call the methods in the

product_db files to
retrieve information

Display the product_list view file

 LOGO Home About Service Contact

Index.php cont.
Make sure that the page
required to be displayed is
product list

Display the product list page

and set variable category_id

Call page product_add

Retrieve the input data to be updated

Call function add_product from

the product_db file

Display the product list page

and set variable category_id
 LOGO Home About Service Contact

Note
• In a real word application you need to add complete
data validation.
 LOGO Home About Service Contact

Header and footer files

Returns the 4 digits of the current year

 LOGO Home About Service Contact

The View
DB

Model View

Controller

Dispatching
Routing
Web Server

Browser
 LOGO Home About Service Contact

Product_list.php
Call the header

Display list of
categories
 LOGO Home About Service Contact

Product_list.php cont.

Display list of products

Set action variable to

show_add_form
Call footer
 LOGO Home About Service Contact

Product_add.php
Call header

Loop to display list of catalog

Set the action variable to list of

product and redirect to index.php

Call footer
 LOGO Home About Service Contact

Advantages of using MVC structure

• Remove most of the php code from the view.
– Easier for HTML programmers who don’t understand
PHP to work on the view.
– Allows the division of labor that’s helpful for large
applications.
• Reduce code duplication.
– Easier to test, debug and maintain application.
• Providing a known structure to the application.
– You can more easily expand and enhance the
application.
 LOGO Home About Service Contact

Test phases
1. Check the user interface to make sure that it works
correctly. (check controls, check keys)
2. Test the application with valid input data to make sure
the results are correct.
3. Test the results with invalid data or unexpected
actions.
 LOGO Home About Service Contact

Testing and Debugging

• Three kinds of errors
• Syntax errors
• Runtime errors
• Logic errors
 LOGO Home About Service Contact

Testing and Debugging

• Three kinds of errors
– Syntax errors: show up as in NetBeans.
Relatively easy to fix (missing semi-colons,
quotation marks, parentheses, curly braces,
etc). Also show up as parse errors if you try
to run the bad script:
Parse error: syntax error, unexpected T_FUNCTION
in C:\xampp\htdocs\webd236\Lib\Util.inc on line 8

3
1
 LOGO Home About Service Contact

Find the syntax errors?

 LOGO Home About Service Contact

Common syntax errors

• Misspelling keywords
• Forgetting opening or closing parenthesis
• Forgetting semicolon in php code
• Forgetting opening or closing quotation mark
• Not using the same opening and closing quotation
• Misspelling or capitalizing variables
• Using keywords in variable name
• Using one equal sign in testing equality
• Not checking the data types of date
 LOGO Home About Service Contact

Testing and Debugging

• Three kinds of errors
– Runtime errors: only show up when you’re
running the code (i.e. clicking ‘refresh’).
Some are fatal, others are warnings. Also
relatively easy to fix.
Warning: include() [function.include]: Failed opening
'foo.inc' for inclusion
(include_path='.;C:\xampp\webd236\;C:\xampp\php\PEAR')
in C:\xampp\htdocs\webd236\Lib\Util.inc on line 7

3
4
 LOGO Home About Service Contact

Testing and Debugging

• Three kinds of errors
– Logic errors: The silent killers; very difficult to
find and fix. Your algorithm doesn’t do what
you think it should do. Now you need to
debug.
• Use echo, print, and print_r plus Logging in
conjunction with your browser’s “view source”
option to see the values of variables.

3
5
 LOGO Home About Service Contact

What is the type of error?

 LOGO Home About Service Contact

Testing and Debugging

• There is an easier way.
– Write testing code to make sure that your
production code works like it should.
– Can be very simple, or you can use a testing
framework.

3
7
 LOGO Home About Service Contact

Tracing the execution of the PHP code

 LOGO Home About Service Contact

How to debug with Netbeans?

• Using xDebug tool
• Define breakpoints at the particular point you want to
view the variables.
• Select Debug.
 LOGO Home About Service Contact

Code editor with break points

 LOGO Home About Service Contact

Debugging session with variables

 LOGO Home About Service Contact

Upcoming Deadlines
• Readings for next week
– Chapters 7 and 8 in PHP and MySQL
• Next week:
– Forms and data, control statements