WEB APPLICATION DEVELOPMENT
JIANNAN LIU (JOHNNY)
WHAT IS WEB APPLICATION
• According to Wikipedia:
In computing, a web application or web app is a client–server computer
program in which the client (including the user interface and client-side logic)runs
in a web browser
Reference:
https://en.wikipedia.org/wiki/Web_application
WHY WEB APPLICATION
• Flexibility. You can do almost any
job by developing a web
application.
• Reachable. You can access web
application any where on any
device, as long as you have a
browser.
WHAT DO WE NEED TO DEVELOP WEB APP
• Client side • Server side
WEB APPLICATION FRAMEWORKS
• CMS (content management system) vs MVC (model view controller)
WEB APPLICATION
FRAMEWORKS
• CMS (content management system)
• Pros
1. Ready-to-use web templates
2. Ready-to-use plugins
3. CMS is good for having many
websites with typical functionality
• Cons
1. CMS restricts what you can do
2. Slow customizing for unique
requirements
WEB APPLICATION
FRAMEWORKS
• MVC (model view controller)
• Pros
1. Full control
2. Good inbuilt API for all types
applications
3. maintenance is easy
• Cons
1. Require high knowledge of
programming languages
2. Require knowledge of inbuilt APIs
GENERAL MVC ( MODEL VIEW CONTROLLER)
• Model: responsible for managing the data of the
application
• View: presentation of data in a particular format,
triggered by a controller's decision to present the
data
• Controller: responsible for responding to the user
input and perform interactions on the data model
objects
DIFFERENT MVC
WHAT ARE BIG WEBSITES USING?
Reference : https://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites
DJANGO
Why Django:
• Ridiculously fast.
• Fully loaded.
• Incredibly versatile.
DJANGO STRUCTURE
DJANGO STRUCTURE
Django General MVC
• Model • Model
• Templates • View
• View • Controller
BASIC HTML
• Hypertext Markup Language (HTML) is the
standard markup language for creating web
pages and web applications.
BASIC HTML
<head>: container for metadata, Metadata
<html>
typically define the document title, character
<head>
set, styles, links, scripts, and other meta
<title>Johnny's webpage</title> information. Example: <title>, <style>,
</head> <meta>, <link>, <script>.
<body> <body>: contains all the contents of an
<h1>Welcome to my personal website<h1> HTML document, such as text, hyperlinks, images,
tables, lists, etc.
<p>I am a student at IUPUI</p>
</body>
</html>
BASIC HTML
<table>: table tag
<tr>: table row
<th>: table head
<td>: table cell
BASIC HTML
<ul>: unordered list
<ol>: ordered list
<li>: list element
BASIC HTML
CSS CASCADING STYLE SHEETS
CSS: style sheet
language used for
describing
the presentation of a
document written in
a markup language.
USEFUL RESOURCES
• W3school https://www.w3schools.com/
• Stack Overflow https://stackoverflow.com/