Web Applications for Novices
- Context in UP
- Specializations
- MVC Pattern
- Languages
- HTML, XML, XHTML
- CSS
- PHP
|
- Frameworks
- Standards
- Quality control tools
- PHP
- Examples
- References
|
Specializations & Workflows
In a large project, work is divided among specialists, e.g.
- Analyst - defines data and functions required
- User interface designer - determines what goes onto pages
- Graphical designer (artist) - beautifies pages
- Programmer - implements functionality in code
- Database designer - designs database schemata
- Database developer - writes queries
- Database administrator - creates tables, assigns roles, etc.
Need for Intermediate Artifacts
Introduced to communicate between participants and stages, e.g.
- Schematic drawing of screen to verify all data and functions are covered
- Beautified prototype for customer approval
- Prototype HTML (works, but ugly)
- HTML with tuned CSS (looks better)
- HTML with graphics (looks better)
- HTML + code (functions added)
-
Producing these adds work (cost) but need grows with project size.
One reason development time & cost grows non-linearly.
"Agile" Short-Cuts
- Can be applied in a smaller project
- Less team member specialization
- Fewer intermediate work products
You will be doing all functions, so you may skip some artifacts
- e.g, to straight to HTML
- Refine prototype, rather than produce separate documents, e.g.,
- Put data and control elements in
- Add CSS, refine layout
- Add functional code
Model-View-Controller (MVC) Pattern
- A conventional architectural design pattern for systems with graphical user interfaces.
- Separates user interface logic from business/application logic
-
- Many variations and interpretations
- Let's look at one
- See references at end for more
|
Image reproduced from
http://www.wikipedia.org.
Solid lines are direct "depend-on" associations, dashed indirect (e.g., observer).
|
Model
- Manages information/data
- Encapsulates all domain-specific information and logic
- Is called by Controller to get data and notify of events that change state
- Can be developed and tested independently from View and Controller
- In some variations, may notify Views when data changes state
|
Image reproduced from
http://www.wikipedia.org.
|
View
- Manages display of information
- Renders model into form suitable for interaction
- Example: HTML + CSS + Web browser
|
Image reproduced from
http://www.wikipedia.org.
|
Controller
- Receives input, initiates response
- Interprets mouse and keyboard inputs from user
- Calls model and view to inform of changes in state and view
|
Image reproduced from
http://www.wikipedia.org.
|
Languages
- HTML, XHTML - Web page content
- CSS - Web page style : presentation and layout details
- Server-Side: PHP, Python, Perl, Ruby, Java, etc. - actions, application logic
- Controller, but also model?
- Clientr-Side: Javascript, VBScript, Java , etc. - actions
SQL - database interactions
Standards
- Essential for interoperability
- Multiple browsers
- Multiple database engines
- Code re-use
Web Standards
- HTML, XML, CSS - W3C
- help separate view from other components
- SQL - ISO
- helps separate model from other components
- Languages? - not
- a major source of maintenance problems
|
|
Quality Control, Validators
Use them!
Frameworks
- Implement the re-usable portions of a web application
- Help enforce MVC boundaries
- May help to cope with portability, security, internationalization, etc.
- Examples
Importance of Continuing Education
- Technology is changing rapidly
- College helps you get started
But you must keep learning to keep up
- Some companies will pay for in-service training courses (e.g., see the Rational/IBM notes)
But most people can't afford to keep paying for courses
- You don't really need courses, once you have a good foundation
- Become a "life-long learner"
- Learn by doing
- Seize opportunities to try new things
- Develop a critical outlook
- Make use of web sources
Web Sources
Use Google. You will find plenty of tutorials and references. The ones maintained by reputable
organizations, like W3C, IBM, Sun, etc., are more reliable. For example, a search
for "MVC pattern" turned up the following:
