The document provides an overview and agenda for an introductory course on developing web applications using HTML. It outlines topics to be covered including an introduction to the course, professor availability, use of the Blackboard learning management system, grading policies, how to succeed in the course, academic dishonesty policies, and HTML basics. It also describes upcoming homework assignments and projects that will make up students' grades, including creating a website proposal, final project, and presentation. Key HTML tags and concepts are defined including headings, paragraphs, lists, links, and images.

1. Course Intro & HTML
BITM 3730
Developing Web Applications
8/30

2. Agenda
• Overview of Course
• Professor Availability Info
• Blackboard Introduction
• Grading & Grading Scale
• How to Succeed in BITM 3730 Without Really Trying
• Academic Dishonesty
• HTML Basics
• Homework

3. Course Overview
• Review Course Description
• Review Course Objectives
• Review Course Competencies
• Review Participation Policy

4. Professor Availability Info
• Before class (4:30PM to start of class) and After class
• Digital hours available by appointment [via Skype, Zoom, or agreeable
technology tool]

5. Blackboard introduction
• Everything divided into our weekly meetings under CONTENT

6. Grading & Grading Scale
A = 93+
A- = 90-92
B+ = 87-89
B = 83-86
B- = 80-82
C+ = 77-79
C = 73-76
C- = 70-72
D+ = 67-69
D = 60-66
F = Below 60
• Project Proposal = 20%
• Project = 30%
• Project Presentation = 20%
• Homework = 20%
• Participation = 10%

7. Project Proposal Rough Draft
• Rough Draft (in 10/4
folder) due 10/17
• For this course you will be tasked with
creating a website (project). You will write
up a proposal describing your project.
Examples have been provided for you to
review and use as a guide. You are free to
create a personal website of interest to you
or for someone else (keeping in mind it will
be stored on the SHU server and therefore
not an official website).
• Your Rough Draft will be graded out of 50
points, with each section being scored 10
points each.

8. Project
Proposal
Rough
Draft
Criteria
Criteria Points
Introduction:
Describe you and who you are working for (Client name, project
title (i.e. My Dad's website), your name, and contact info
10
Problem:
Describe what you are doing (What are you doing? What is
website? e-commerce? static? dynamic?)
What issue does website solve? (example: selling shoes)
10
Solution:
Explain how you create the website and how it addressed the
issue mentioned above
10
Deliverables:
What will be included on your site? (pictures, pages, etc.)
include a drawing/sketch of your homepage
10
Process & Cost:
Describe the process you will use to create your project/website
Pretend you are charging someone for this project - calculate a
cost and explain how you come to this (i.e. $25 an hour times 50
hours of work could be your cost)
10

9. Project Proposal Final Draft
• Rough Draft (in 11/1
folder) due 11/7
• For this course you will be tasked with
creating a website (project). You will write
up a proposal describing your project.
Examples have been provided for you to
review and use as a guide. You are free to
create a personal website of interest to you
or for someone else (keeping in mind it will
be stored on the SHU server and therefore
not an official website).
• Your Final Draft will be graded out of 150
points. Use the feedback provided from the
Rough Draft to make appropriate changes.

10. Project
Proposal
Final
Draft
Criteria
Criteria Points
Introduction:
Describe you and who you are working for (Client name, project
title (i.e. My Dad's website), your name, and contact info
10
Problem:
Describe what you are doing (What are you doing? What is
website? e-commerce? static? dynamic?)
What issue does website solve? (example: selling shoes)
35
Solution:
Explain how you create the website and how it addressed the
issue mentioned above
35
Deliverables:
What will be included on your site? (pictures, pages, etc.)
include a drawing/sketch of your homepage
35
Process & Cost:
Describe the process you will use to create your project/website
Pretend you are charging someone for this project - calculate a
cost and explain how you come to this (i.e. $25 an hour times 50
hours of work could be your cost)
35

11. Project
• In 11/29 folder
• Due 12/5
Criteria Points
Appearance:
Does the website visually look good?
25
Deliverables:
Did you include the items described in your proposal?
(most should be on your site)
50
Process & Cost:
Did you create the website described?
Does it look like you came in at your referenced cost?
50
Course Info:
Did you use course materials? (HTML, CSS, forms,
JavaScript, etc.)
75

12. Project Presentation
• In 12/6 folder (submit PPT to dropbox)
• Presentations on 12/6 and 12/13
• For this course you will be tasked
with presenting on your project. You
will put together a PPT describing
your project. Examples have been
provided for you to review and use as
a guide. Your presentation will be a
timed 10 minute presentation.
• Resources on professional
presentations will be provided.
Please submit your PPT by 12/5.

13. Project
Presentation
Criteria
Criteria Points
Presentation Content:
Intro slide with Name and info
Slides describing Project Proposal
Slides describing project or you can pull up your website
and explain it
Slides describing any issues you had
50
Duration:
Your presentation should be as close to 10 minutes as
possible without going over
10
Presentation:
Graded on clarity and professional presentation
Avoid uh, umm, etc. - just pause instead
Keep eye contact with audience
avoid swaying of arms, toe tapping, or other distracting
motions
40

14. How to Succeed in BITM 3730
Without Really Trying
• Ask questions with any issues
• Submit homework assignments on time
• Participate in class
• Come to class on time
• Focus efforts on project components!!

15. Academic Dishonesty
• Please see Academic Dishonesty paragraphs on Course Syllabus
• Unless otherwise specified your work submitted should reflect you completed 100%
of the work and did not have any assistance from a classmate [i.e. copying]
• You should be able to do all course work based on my instruction and/or similar
walkthroughs on YouTube

16. Tools Needed for Class
• WYSIWYG Editor
• Google WYSIWYG HTML Editor and choose the one you would like to use
• Always save your files in Notepad and open them in your browser to check
• WinSCP
• Will discuss more during next class meeting
• courses.shu.edu
• Will discuss more during next class meeting

17. What is HTML?
• HTML is the language for describing the structure of Web pages. HTML gives authors the
means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their
documents.
• With HTML, authors describe the structure of pages using markup. The elements of the
language label pieces of content such as “paragraph,” “list,” “table,” and so on.

18. HTML Basics
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the
attribute and +1 is the value of the attribute. that are specified in the open
bracket.

19. HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute
value and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code

20. Static vs. Dynamic Websites
• Static Websites
• Never change
• Unless the HTML code is changed
and uploaded to web server
• Dynamic Websites
• Can change based on an event or data
based on code in the website
• Common occurrences of this are
dates/times on a website

21. Important Code
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
• This HTML code indicates the title of the
web page is Important Code
• The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body>
tag.
• Metadata is data about the HTML
document. Metadata is not displayed.
• Metadata typically define the document
title, character set, styles, scripts, and other
meta information.

22. <body></body> tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• Note: There can only be one <body> element in an HTML document.

23. <ul></ul> tag
• An unordered HTML list:
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• The <ul> tag defines an unordered
(bulleted) list.
• Use the <ul> tag together with the <li>
tag to create unordered lists.
• Tip: Use CSS to style lists.
• Tip: For ordered lists, use the <ol> tag.

24. <li></li> tag
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
• Tip: Use CSS to style lists.

25. <a></a> tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

26. <a href….</a>
• How to open a link in a new browser window:
• <a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
• The hyperlink reference is to the website, the target opens the link in a new browser
window and the text Visit W3Schools.com! is the text listed which is linked to the
website.

27. HTML Simple Page
<html>
<head>
<title>Your Name</title>
</head>
<body>
<ul>
<li>Bulleted Text</li>
<li><a href="http://www.website.com">Website</a></li>
</ul>
</body>
</html>

28. Important Tags
• <p></p> for writing a paragraph with text
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <small> - Smaller text

29. <b> and <strong> tags
• In order to bold text you can use either the <b> or <strong> tags
• <b>Marino</b> will show up as Marino
• <strong>Marino</strong> will show up as Marino
• Notice they are both merely bold!

30. <i> and <em> tags
• In order to italicize text you can use either the <i> or <em> tags
• <i>Marino</i> will show up as Marino
• <em>Marino</em> will show up as Marino
• Notice they are both merely italic!

31. <small> tag
• This merely makes your text smaller without having to utilize the size
attribute or similar attributes within HTML code
• Ideally, you use this tag to deemphasize something [things that are not
important]

32. Homework
Assignment 1:
• Using the information taught in class create an HTML file index.html where you have a paragraph
describing yourself.
• Also, create a menu with the following links: Home, Favorite Sports Teams, and Contact Me
• Have the Favorite Sports Teams have a dropdown menu of at least three teams you like. (Examples
can include teams from Baseball, Football, Soccer, Basketball, Hockey, College, High School, etc.)
• Due to no class meeting on Labor Day these assignments are due 9/12

33. Homework 1 Getting Started
• To write a paragraph use the
<p>…</p> tag
<html>
<head>
<title>Your Name</title>
</head>
<body>
<p>Put paragraph here</p>
</body>
</html>

34. Homework 1 Getting Started
• To create your links use the <ul> and <il> tags
• Your code should go in the header section <head>
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<li><a href="">Contact Me</a></li>
</ul>

35. Homework 1 Getting Started
• You should use the <select> tag for your dropdown
<select name="teams" id="teams">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>

36. Homework 1 Getting Started
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<select name="teams" id="teams">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<li><a href="">Contact Me</a></li>
</ul>

37. Homework 1 Visual

38. Advanced HTML
BITM 3730
Developing Web Applications
9/13

39. Week 1 Review
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the attribute and
+1 is the value of the attribute. that are specified in the open bracket.
• Static websites never change unless you edit the code and upload updated version
• Dynamic websites can change based on an event or data embedded within the code;
common with dates and times

40. HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute
value and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code

41. Common HTML Tags
• <html>…</html> - begins and ends the entire HTML document
• <head>…</head> - defines information about the document
• <body>…</body> - defines the document’s body
• <p>…</p> - defines a paragraph
• <ul>…</ul> - defines an unordered list
• <ol>…</ol> - defines an ordered list
• <li>…</li> - defines a list item
• <a href>…</a> - hyperlink
• <img src…./> - defines an image

42. WinSCP
• Download from https://winscp.net/eng/download.php
• Make sure to download for your computer
• Windows
• Mac

43. WinSCP Login on Campus

44. WinSCP Login Off Campus

45. courses.shu.edu
• Your own web space
• http://courses.shu.edu/BITM3730/marinom6/
• Above is my web space
• Yours will be the same except your Pirate Net username will replace
marinom6

46. courses.shu.edu
• This is where your project website will be stored
• Everything will be uploaded to your web space
• This allows for your website to be LIVE

47. Project Proposal Examples
• https://elementor.com/blog/website-proposal/
• https://www.invisionapp.com/inside-design/web-design-proposal/
• https://www.godaddy.com/garage/write-web-design-proposal/
• https://learn.g2.com/website-proposal

48. HTML Headers
• <h1>…</h1>
• <h2>…</h2>
• <h3>…</h3>
• <h4>…</h4>
• <h5>…</h5>
• <h6>…</h6>

49. Styles & Fonts
Styles
• <h1 style="color:blue;">This is a
heading</h1>
• <p style="color:red;">This is a
paragraph.</p>
Fonts
• <h1 style="font-
family:verdana;">This is a
heading</h1>
• <p style="font-family:courier;">This
is a paragraph.</p>

50. Text Size & Alignment
Size
• <h1 style="font-size:300%;">This is a
heading</h1>
• <p style="font-size:160%;">This is a
paragraph.</p>
Alignment
• <h1 style="text-
align:center;">Centered
Heading</h1>
• <p style="text-
align:center;">Centered
paragraph.</p>

51. Language
• <html lang="en">
• https://www.tutorialrepublic.com/html-reference/html-language-codes.php
• All language codes listed above

52. Using Images
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• img src – image source
• alt – description
• width and height should be altered depending on needs

53. Images As Background
• <div style="background-image: url('img_girl.jpg');">
• <style>
• div {
• background-image: url('img_girl.jpg');
• }
• </style>

54. Repeat Background
• <style>
• body {
• background-image: url('example_img_girl.jpg');
• background-repeat: no-repeat;
• }
• </style>

55. Building Tables
• Why build a table?
• Easiest way to organize info in an HTML file
• Assuming not using XML or JSON [covered later in the course]

56. Tags for building a table
• <table>…</table> - defines a table
• <tr>…</tr> - defines a table row, must appear within a table
• <td>…</td> - defines a table column, must appear within a table row
• <th>…</th> - defines a table header

57. <table></table> tag
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or more <tr>,
<th>, and <td> elements.

58. <tr></tr> tag
• The <tr> tag defines a row in an HTML table.
• A <tr> element contains one or more <th> or <td> elements.

59. <td></td> tag
• The <td> tag defines a standard data cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <td> elements are regular and left-aligned by default.
• The text in <th> elements are bold and centered by default.

60. <th></th> tag
• The <th> tag defines a header cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <th> elements are bold and centered by default.
• The text in <td> elements are regular and left-aligned by default.

61. Building an HTML file with a Table
Begin with basic code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
</body>
</html>

62. Add Your Header
• <title>New Page 1</title>
• </head>
• <h1 align="center">Your Schedule</h1>
• <body>
• By adding the <h1></h1> code you have created an overall header

63. Begin creating your Table
• <body>
• <table border="0" width="100%">
• </table>
• </body>
• You can play around with the thickness of the table’s border by changing “0”
to different sizes

64. Building the Table’s Data
• <table border="0" width="100%">
• <tr>
• <th>Course Name</th>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• </tr>
• </table>

65. Building the Table’s Data
• <tr>
• <th>Instructor</th>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• </tr>
• <tr>
• <th>Number of Credits</th>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• </tr>

66. Visual Table

67. Visual Table Notes
• Sizes of the cells in each row will change when you replace the &nbsp; code
with actual text
• What do you do if you are taking more than 4 courses?
• You will need to add an additional <td></td> for each section [Course Name,
Instructor, and Number of Credits] until you have enough cells to cover all of your
courses for the table you create in Assignment 2

68. <div></div> tag
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and after the <div>
element.
• For our purpose, it is important to note the <div> tag serves as a break for a
paragraph [<p></p> tag]

69. HTML Review
• <a href=“websitelink.com”>Website Link</a> serves as code for
hyperlinking a website
• As discussed href is “hyperlink reference”
• The <h1></h1> tag represents a header
• <h2></h2>, <h3></h3>, etc. also exist and get smaller

70. Keep in Mind Now, but for Later
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text

71. Homework
Assignment 2:
Create an HTML page called gallery.html with 16 images displayed.

72. Building our Gallery
• <table border="0" width="100%">
• <tr>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• <td>&nbsp;</td>
• </tr>
• </table>
Change the highlighted 0
to a larger number so we
can see the border

73. Picture Gallery
• The code on the previous slide only gives us 4 boxes
• How do we get our 16?

74. Where do we
get Images?
• https://www.freeimages
.com/search/baseball
• Or search Google for
free use images

75. Current Gallery View

76. Embedding Images
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• Where img src is your image source
• alt is your alternate description of the image
• width and height should be modified so that all pictures line up

77. How it looks?
• <td><img src="https://media.istockphoto.com/photos/baseball-with-
clipping-path-picture-
id177401325?b=1&k=20&m=177401325&s=170x170&h=AK3kCSUXA7K
8BsjeydSH3U5oNEkezA2gZ9c9KuDkJZg=" alt="baseball" width="100"
height="100"></td>
• Use the direct image source for now, once we have an image saved to our
web space the img src is much shorter like in previous example

78. Visual

79. My Example Gallery Visual

80. Of Note
• You don’t need to use alt tag if you don’t want to
• You can remove the table border once all 16 images are there
• You want to use the same height for each image

81. CSS
BITM 3730
Developing Web Applications
9/20

82. Why CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
• Websites generally have sub-folders where CSS files are stored

83. Syntax
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?

84. Stylesheets
• While HTML defines where structures start and end, stylesheets define what they
look like
• When used properly, stylesheets allow for a consistent look and feel throughout a
website with one simple change of a file
• They are defined in three different ways:
• External: the styles are defined in a .css file (preferred)
• Internal: the styles are defined inside the HTML file, usually in the header section
• Inline: the style is defined inside an existing tag, usually in the body section

85. How to use the 3 Methods
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

86. Inline Example
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:
• <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>

87. Internal Example
• An internal CSS is used to define a style for a single
HTML page.
• An internal CSS is defined in the <head> section of
an HTML page, within a <style> element.
• The following example sets the text color of ALL the
<h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue"
background color:
• <html>
• <head>
• <style>
• body {background-color: powderblue;}
• h1 {color: blue;}
• p {color: red;}
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>

88. External Example [Most Common]
• <html>
• <head>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>

89. styles.css Code
• body {
• background-color: powderblue;
• }
• h1 {
• color: blue;
• }
• p {
• color: red;
• }

90. Beyond CSS Basics
• With CSS, you can control:
• Color
• Font
• size of text
• spacing between elements
• how elements are positioned and laid out
• what background images or background colors to be used
• different displays for different devices and screen sizes

91. Changing Stylesheets
• Changing a stylesheet on the fly can be done on the server when the request
is received. For example, the webserver can determine the type of browser
(Internet Explorer, Firefox, Chrome, iPhone, Blackberry) and render the
page appropriately
• You can also give that functionality to the user. Perhaps the user might want
a larger font or a different color. With JavaScript, you can create a button
that changes the stylesheet for the entire page.

92. Two More Stylesheet Examples
• styles.css
h1 {
border: 2px black solid;
color: black;
}
.justified {
text-align: left;
}
• styles2.css
h1 {
border: 2px red solid;
color: red;
}
.justified {
text-align: right;
}

93. How Stylesheets are put together
• Each style in a style sheet has three parts:
• A selector
• One or more properties
• One or more values for each property
• Syntax
selector {
property1: value1 [value2 …];
property2: value1 [value2 …];
}
• To associate a style sheet to an HTML document, use the <link> tag within the head tag:
• <link href=“styles.css” rel=“stylesheet” type=“text/css” />

94. Stylesheet styles
• #id – ID’s are used to define large structures in an HTML document. Each
id can be used only once in each HTML document.
• .class – Classes are styles that can be reused and applied to different elements
via a class parameter, such as <h1 class=“name”> …</h1>
• Element – elements are used to redefine how existing HTML elements (tags)
are to be formatted.

95. Stylesheet Visual

96. Another Stylesheet Visual

97. <style></style> tag
• The <style> tag is very important when using CSS code inside an HTML file
• All the CSS code must be in between the <style> and </style>
• Otherwise it is not recognized

98. CSS Properties
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.

99. CSS Properties
• The CSS border property defines a border around an HTML element.
• The CSS padding property defines a padding (space) between the text and
the border.
• The CSS margin property defines a margin (space) outside the border.

100. CSS Properties
• Use the HTML style attribute for inline
styling
• Use the HTML <style> element to define
internal CSS
• Use the HTML <link> element to refer to
an external CSS file
• Use the HTML <head> element to store
<style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text
fonts
• Use the CSS font-size property for text
sizes
• Use the CSS border property for borders
• Use the CSS padding property for space
inside the border
• Use the CSS margin property for space
outside the border

101. CSS Linking [External]
• This example uses a full URL to link to a style sheet:
• <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
• This example links to a style sheet located in the html folder on the current web site:
• <link rel="stylesheet" href="/html/styles.css">
• This example links to a style sheet located in the same folder as the current page:
• <link rel="stylesheet" href="styles.css">

102. Declaration and Selector
body {
font-size: 10px;
background-color: white;
color: blue; }

103. Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link

104. Homework
Assignment 3:
Create a CSS file called example.css where you set a background color, header color and alignment, and
text color, size and font.

105. example.css background color
• <html>
• <head>
• <style>
• body {
• background-color: purple;
• }
• </style>
• </head>
• <body>
• <h1>The background-color Property</h1>
• </body>
• </html>

106. example.css header color and alignment
• <style>
• h1 {
• color: red;
• alignment: center;
• }
• </style>

107. example.css text color, size, and font
• <style>
• p {
• color: blue;
• size: 12px;
• font: serif;
• }
• </style>

108. Check example.css in WYSIWYG First
• Put all of your pieces into the <style> tag within the <head> section of
your HTML “test” using your WYSIWYG
• Once checked, pull everything out of the <style> … </style> tag and put
into Notepad – save as example.css

109. Showing How Internal Works
• Put as file on courses.shu.edu
• Reference in an HTML file
• See if it works!

110. CSS
BITM 3730
Developing Web Applications
9/27

111. Quick Review
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?

112. Quick Review
• External – separate .css file
• Internal – inside the <style> tag
• Inline – on the same line of code using the style attribute

113. CSS Inheritance
• Used when you have many sections of a website/web page and want them to
look differently
• Each section can be modified using both internal and inline CSS code
• Works like programming languages, such as Java or Python

114. General CSS – Remember?
• Uses our tags like paragraph <p> or header <h1> or <body>
• <style>
• p {
• color: red;
• }
• </style>
Internal CSS

115. Inheritance CSS
• First, create a class
<style>
.bobdole {
background-color: red;
color: blue;
}
</style>
Internal CSS

116. Inheritance CSS
• Next, call the class
• <p class=“bobdole”>Chicken nuggets taste good</p>

117. Another Example
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• .intro {
• background-color: yellow;
• }
• </style>
• </head>
• <body>
• <h1>Welcome to My Homepage</h1>
• <div class="intro">
• <p>My name is Jerry.</p>
• <p>George is unemployed and lives with his
parents.</p>
• </div>
• <p>My neighbor is Kramer.</p>
• <p class="intro">Gene sounds like Mickey.</p>
• </body>
• </html>

118. Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link

119. Link Defaults
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the link state colors, by using CSS:

120. Create a page with Links
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• </style>
• </head>
• <body>
• <p><a href="http://courses.shu.edu/BITM3730/marinom6/index.html">Homepage</p>
• <p><a href="http://courses.shu.edu/BITM3730/marinom6/work.html">My Work</p>
• <p><a href="http://courses.shu.edu/BITM3730/marinom6/contact.html">Contact</p>
• </body>
• </html>

121. Changing Link Defaults
• <style>
• a:link {color:red;}
• a:visited {color:blue;}
• a:hover {color:black;}
• a:active {color:red;}
• </style>

122. Changing How Links Look
• Remember how HW 1 looked?

123. Changing How Links Look

124. Vertical <style> 1
• ul {
• list-style-type: none;
• margin: 0;
• padding: 0;
• width: 200px;
• background-color: #f1f1f1;
• }

125. Vertical <style> 2
• li a {
• display: block;
• color: #000;
• padding: 8px 16px;
• text-decoration: none;
• }

126. Vertical <style> 3
• /* Change the link color on hover */
• li a:hover {
• background-color: #555;
• color: white;
• }

127. Vertical <body>
• <ul>
• <li><a href="#home">Home</a></li>
• <li><a href="#teams">Favorite Sports Teams</a></li>
• <li><a href="#contact">Contact Me</a></li>
• </ul>

128. Horizontal <style> 1
• ul {
• list-style-type: none;
• margin: 0;
• padding: 0;
• overflow: hidden;
• border: 1px solid #e7e7e7;
• background-color: #f3f3f3;
• }

129. Horizontal <style> 2
• li {
• float: left;
• }
• li a {
• display: block;
• color: #666;
• text-align: center;
• padding: 14px 16px;
• text-decoration: none;
• }

130. Horizontal <style> 3
• li a:hover:not(.active) {
• background-color: #ddd;
• }
• li a.active {
• color: white;
• background-color: #04AA6D;
• }

131. Horizontal <body>
• <ul>
• <li><a class="active" href="#home">Home</a></li>
• <li><a href="#teams">Favorite Sports Teams</a></li>
• <li><a href="#contact">Contact Me</a></li>
• </ul>

132. Creating a Dropdown

133. Dropdown <style> 1
• body {
• font-family: Arial, Helvetica, sans-serif;
• }
• .navbar {
• overflow: hidden;
• background-color: #333;
• }

134. Dropdown <style> 2
• .navbar a {
• float: left;
• font-size: 16px;
• color: white;
• text-align: center;
• padding: 14px 16px;
• text-decoration: none;
• }
• .dropdown {
• float: left;
• overflow: hidden;
• }

135. Dropdown <style> 3
• .dropdown .dropbtn {
• font-size: 16px;
• border: none;
• outline: none;
• color: white;
• padding: 14px 16px;
• background-color: inherit;
• font-family: inherit;
• margin: 0;
• }

136. Dropdown <style> 4
• .navbar a:hover, .dropdown:hover .dropbtn {
• background-color: red;
• }
• .dropdown-content {
• display: none;
• position: absolute;
• background-color: #f9f9f9;
• min-width: 160px;
• box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
• z-index: 1;
• }

137. Dropdown <style> 5
• .dropdown-content a {
• float: none;
• color: black;
• padding: 12px 16px;
• text-decoration: none;
• display: block;
• text-align: left;
• }
• .dropdown-content a:hover {
• background-color: #ddd;
• }
• .dropdown:hover .dropdown-content {
• display: block;
• }

138. Dropdown <body>
• <div class="navbar">
• <a href="#home">Home</a>
• <a href="#contact">Contact Me</a>
• <div class="dropdown">
• <button class="dropbtn">Favorite Sports Teams
• <i class="fa fa-caret-down"></i>
• </button>
• <div class="dropdown-content">
• <a href="#">Yankees</a>
• <a href="#">49ers</a>
• <a href="#">Knicks</a>
• </div>
• </div>
• </div>

139. Homework
Assignment 4:
Change your index.html page created in Assignment 1 to include CSS code so that your links and
paragraph section are different colors, size, and font. Make sure to use internal CSS code (i.e. code in the
HTML file).

140. JavaScript
BITM 3730
Developing Web Applications
10/4

141. JavaScript Basics
• JavaScript is embedded in an HTML file using
<script></script>
• .js is the file extension for JavaScript
• Functions make up the majority of JavaScript
• If statements are used for condition execution in JavaScript
• You comment out a single line of code using //

142. JavaScript Important Notes
• Like Java [uses functions]
• Interpreted by the browser, not compiled
• Complimentary to HTML, used for dynamic web pages and form validation
• OS and Browser (for the most part) independent
• JavaScript is either embedded in a webpage using <script> …</script> or in a separate file
usually with a .js extension.
• Like stylesheets and css files, JavaScript and js files allows for portability and reusability.
• To reference an external JavaScript: <script src=“scripts.js”></script>

143. DIV and SPAN Reminder
• DIV – gives you the ability to identify particular sections (divisions) of a
document using the id attribute. Particularly useful in AJAX and dynamic
HTML.
• SPAN – has the same attributes and uses above. Both tags have the style,
class and id attributes.
• Primary difference between the two is the DIV tag inherently breaks a
paragraph.
• Both are typically used to apply styles to HTML documents.

144. JavaScript Intro
• JavaScript allows for client-side code execution.
• Similar to Java
• Typically used for client-side form validation, dynamic HTML and AJAX.
• Example:
<script>
document.write(“Our first JavaScript”);
</script>
• In the above example, code is written directly in the HTML document.
• In order for code to be reusable, the code can be stored in a .js file.

145. Basic Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js" ></script>
</head>
<body>
<div>TODO write content</div>
<button onclick="myFirstFunction();" >Click Me!</button>
</body>
</html>

146. Function Being Called
function myFirstFunction()
{
alert("our test works!")
}

147. onclick
• Using standard HTML, a webpage is static (i.e. it won’t change until the
HTML file is changed)
• Using dynamic HTML and events like onClick, the content of a page or a tag
can be changed on the fly

148. onclick Example HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js"></script>
</head>
<body>
<div id="myDIV">TODO write content</div>
<button id="divChange" onclick="divChange()">Change the DIV value</button><br/>
<button id="divChangeBack" onclick="divChangeBack()">Change the DIV value back</button><br/>
<button id="docChange" onclick="docChange()">Change the entire document</button><br/>
</body>
</html>

149. onclick JavaScript code
function divChange()
{
previousDIV = document.getElementById("myDIV").innerHTML;
document.getElementById("myDIV").innerHTML="DIV has changed";
}
function divChangeBack()
{
document.getElementById("myDIV").innerHTML = previousDIV;
}
function docChange()
{
document.write("Document has changed");
}

150. Another onclick Example HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css" title="Default Style" id="defaultStyle" />
<link href="styles2.css" rel="stylesheet" type="text/css" title="Mobile Style" id="mobileStyle"/>
<script src="js/scripts.js"></script>
</head>
<body>
<h1>Here is my H1, watch it change.</h1>
<p class="justified">this is a test of the justified class</p>
<button id="styleSwitchButton" onclick="switchStyle()">Switch Style</button>
</body>
</html>

151. Another onclick Example JS
function switchStyle()
{
styleDefault = document.getElementById("defaultStyle");
styleMobile = document.getElementById("mobileStyle");
if (styleDefault.disabled)
{
styleDefault.disabled = false;
styleMobile.disabled = true;
}
else
{
styleDefault.disabled = true;
styleMobile.disabled = false;
}
}

152. JS Functions
• JavaScript code can be written as a block or code that will execute once or as
functions
• Functions are useful when they are used again and again within a page or a
website. One use for a function is form validation. Custom functions can be
written to validate the form before it is submitted.

153. JS Functions Cont.
• The function syntax is
function myFunction(){
• …..;
}
• In the above example, the function name is myFunction and it takes no arguments
• A argument is passed for use within the function
• A function can return a value as well so it can be assigned to an outside variable.
• function myAdditionFunction(a, b) {
return a + b;
}

154. JS Comments
• When writing code, it is useful to embed comments, so the purpose of the
code is understood
// - this comments out a single line
• /*
• */ comments all content between and ignores line breaks

155. document
• Similar to java, there are objects within JavaScript
• The main one to remember is the document object. This object references the entire HTML
document.
• One typical use is the document.getElementById(“myid”).innerHTML=“some string”;
• In the above example, the code will find an HTML element such as a <p>, <div> or a
<span> and change the “value” of that tag (i.e. the content between the open and close
tag).
• In order for the element to be referenced, the id attribute must be used in the opening tag
(<div id=“myid”>This text will change</div>

156. Variables
• In programming, variables allow for the storage of a value so it can be referenced later within the code.
• JavaScript creates variables using the following syntax:
var foo = “a”;
var bar = “b”;
• Javascript has no types. Programming languages typically have types like integer, string, decimal. Javascript stores everything using the same
variable type.
• It is possible to create a variable with no initial value
var myVar;
• var x = 1;
var y = 2;
var z = x + y;
• var x = “test”;
var y = “string”;
var z = x + “ “ + y;

157. Scope
• Variables have a limited scope when defined in a function.
Function myFunction() {
var myLocalVar = 1; //this var will not be accessible from outside
}

158. Operators
• + adds two operands
• - subtracts second operand from the first
• * multiply both operands
• / divide first operand by the second operand
• ++ increments the operator by one
• -- decrements the operator by one
• == Checks if two operands are equal, if so,
returns true, otherwise false
• != Checks if two operands are not equal, if so,
returns true, otherwise false
• > Checks if the first operand is greater than the
second operand
• < Checks if the first operand is less than the
second operand
• >= Checks if the first operand is greater than or
equal to
• <= Checks if the first operand is less than or
equal to

159. Additional Operators
• && returns true if both statements are true
• || returns true if either statement is true
• ^ returns true if only one statement is true
• = simple assignment operator
• += adds right operand to the left operand and assigns to
the left operand
• -= subtracts right operand from the left operand and
assigns to the left operand
• *= multiples right operand with the left operand and
assigns to the left operand.
• /= divides the left operand with the right operand and
assigns to the left operand.
• C += A is equal to c = c+a
• C -= A is equal to c = c-a
• C *= A is equal to c = c * a
• C /= A is equal to c = c/a

160. If Statement
• If statements are used for conditional execution.
• Else statements are used to run a different set of code if the if statement doesn’t evaluate to true
• The syntax in Java is:
if (condition)
{
code to be executed
}
else
{
code to be executed
}

161. If in Action
var alertString='';
var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
if (firstName.value == "")
{
alertString+='Enter your first namen';
}
if (lastName.value == "")
{
alertString+='Enter your last namen';
}
if (alertString != "")
{
alert(alertString);
}

162. AJAX
• Asynchronous JavaScript and XML
• Why asynchronous? – Allows time for the server to process the request and return the results when
complete. JavaScript proceeds while the server is processing
• Uses XMLHttpRequest – builtin javascript object for sending requests for XML using JavaScript
• Two most useful methods for XMLHttpRequest are open and send.
• Open method has the following parameters
• Method – GET or POST. GET will be sufficient most times however it won’t be sufficient when a uncached
copy of the file is necessary
• url – the URL of the xml file or script
• Async – true or false – send the method asynchronously or not

163. AJAX Cont.
• For the response from the server, you can use the responseText or
responseXML property of the XMLHttpRequest object
• responseText is used when the response consists of plain text
• responseXML is used when the response consists of XML

164. What is a Cookie?
• A small piece of data sent from a website and stored in a user’s web browser
while a user is browsing a website
• When the user browses the same website in the future, the data stored in the
cookie can be retrieved by the website.

165. JavaScript Cookie
• Name: the name of the cookie
• Value: the value of the cookie
• Expires: the date/time when the cookie expires automatically
• Path: the path of the cookie
• Domain: the name of the server that created the cookie
• Secure: whether to use encryption to read/set the cookie
• Only small amounts of data can be stored in a cookie
• Cookies are available via JavaScript only to the domain used when the cookie was created
• Cookies are available only to files in the same directory the cookie was created in (use path “/” to make a
cookie available to all files)

166. Setting a Cookie
• To set a cookie, you assign an appropriate value to document.cookie
• We can write a function so that we don’t need to write the same code again and again
function setCookie(name, value, expireDays)
{
var expires = new Date();
expires.setDate(expires.getDate() + expireDays);
var myCookie = name + "=" + escape(value) +
";expires=" + expires.toGMTString() +
";path=/";
document.cookie = myCookie;
}

167. Explaining What We Just Did
• Var expires is set to a new Date object. An object is a data structure which contains
properties and its behavior.
• The above Date object is created with no date and time. The Date() function is
called its constructor. When setDate is called, it is set with the current date and the
number of days in expiresDays is added hence setting the expire time.
• The myCookie var is nothing but a string. The escape function “escapes” characters
within a string. The characters it escapes are used in the URL and can cause the
HTTP request to fail
• In order to delete a cookie, we can just call setCookie(name, “”, -1). This will clear
out the cookie name and value and set it to expire to yesterday

168. Getting a Cookie
function getCookie(name)
{
if ((document.cookie == null) || (document.cookie == ""))
{
return "";
}
else
{
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++)
{
var cookie = cookies[i].split('=');
if (removeLeadingSpace(cookie[0]) == name)
{
return unescape(cookie[1]);
}
}
return "";
}
}

169. JavaScript Function Test
function myWhileFunction(a, b)
{
var i = 1;
var counter = 1;
while (counter <= b)
{
i = i * a;
counter++;
}
return i;
}
• Explain how many times the following
while loop will run and what the value
of i will be when it is complete when
called with myWhileFunction(2,8)

170. Test Answer
• It will run 8 times
• i will equal 256
function myWhileFunction(a, b)
{
var i = 1;
var counter = 1;
while (counter <= b)
{
i = i * a;
counter++;
}
return i;
}

171. Important Notes
• XML works well with JavaScript
• JavaScript can help in getting a cookie in addition to setting a cookie
• A cookie stores small amounts of data
• The expires function is used to set an expiration date on a cookie
• Cookies are available in the same directory the cookie was created in

172. XML and JavaScript [HTML file]
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js"></script>
</head>
<body onload="showData()">
<div id="addressbook"></div>
</body>
</html>

173. XML and JavaScript [JS file]
function showData()
{
var xml = new XMLHttpRequest();
var addressHTML = "";
var addressbook = document.getElementById("addressbook");
xml.open("GET", "addressdata.xml", false);
xml.send("");
var xmlDoc = xml.responseXML;
var names = xmlDoc.getElementsByTagName("name");
var mails = xmlDoc.getElementsByTagName("email");
for (var i = 0; i < names.length; i++)
{
var name = names[i].childNodes[0].nodeValue;
var mail = mails[i].childNodes[0].nodeValue;
addressHTML += "<li>" + name + "(" + mail + ")</li>n";
}
addressbook.innerHTML = addressHTML;
}

174. Concerns with Cookies
• Cookies can be overwritten in the browser.
• Some browsers allow for this and others can be edit by opening the file which stores
the cookies.
• Cookies are prime targets for sql injection. Imagine you are performing a
select based on the username:
• select student_id from students where username = “<username>” where <username>
is the valued stored in the cookie.

175. onclick Display Date and Time
<!DOCTYPE html>
<html>
<body>
<h2>Date and Time</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

176. JavaScript Compared to HTML/CSS
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behavior of web pages

177. More onclick Examples
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>

178. Another onclick Example
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

179. Common JS/HTML Elements
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML
element
onmouseout The user moves the mouse away from an
HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

180. JavaScript - Java
• Arrays
• Booleans
• Math Class
• Random Class
• Objects
• Functions
• Assignment requirements

181. JavaScript Community
• https://www.javascript.com/
• Tutorials
• Questions – Community
• And More!

182. Basics
• Java programming language can be embedded into JSP
• JSP stands for Java Server Pages
• JSP is compiled on servlets
• JSP is a server-side web technology
• The primary function of JSP is rendering content
• The primary function of a servlet is processing

183. JSP – Java Server Page
• Based on HTML. JSP pages can be based on HTML pages, just change
the extension
• Server-side web technology
• Compiled into servlets at runtime
• Allows for embedding of Java code directly into the script using
<%.....%>
• Requires Apache Tomcat installation on server

184. Servlet
• Compiled code used to deliver content over the HTTP protocol
• Developed as a Java class conforming to the Java Servlet API
• Typically used in conjunction with JSPs for more extensive processing

185. JSP vs Servlet
• JSPs are more geared towards rendering content
• Servlets are better suited for processing since they are pre-compiled
• Consider the concept of Model-View-Controller (MVC)
• Model is your business model which houses all of the business logic
• View is your users’ view into your application. In this case it would be JSPs
• Controller is the glue between the model and the view
• Spring and Struts are two popular MVCs used in Java web applications
• Servlets will typically process request data, enrich it (process it) and forward the request
onto a JSP for display

186. Working Together
• JavaServer Pages (JSP) is a Java standard technology that enables you to write
dynamic, data-driven pages for your Java web applications.
• JSP is built on top of the Java Servlet specification.
• The two technologies typically work together, especially in older Java web
applications.
• From a coding perspective, the most obvious difference between them is that with
servlets you write Java code and then embed client-side markup (like HTML) into
that code, whereas with JSP you start with the client-side script or markup, then
embed JSP tags to connect your page to the Java backend.

187. JSP vs. Everyone Else
• JSP vs. Active Server Pages (ASP): The advantages of JSP are twofold. First, the dynamic part
is written in Java, not Visual Basic or other MS specific language, so it is more powerful and
easier to use. Second, it is portable to other operating systems and non-Microsoft Web servers.
• JSP vs. Pure Servlets: It is more convenient to write (and to modify!) regular HTML than to
have plenty of println statements that generate the HTML.
• JSP vs. Server-Side Includes (SSI): SSI is really only intended for simple inclusions, not for
"real" programs that use form data, make database connections, and the like.
• JSP vs. JavaScript: JavaScript can generate HTML dynamically on the client but can hardly
interact with the web server to perform complex tasks like database access and image processing
etc.
• JSP vs. Static HTML: Regular HTML, of course, cannot contain dynamic information.

188. Methods to Set HTTP Status Code
S.N
o.
Method & Description
1
public void setStatus ( int statusCode )
This method sets an arbitrary status code. The setStatus method
takes an int (the status code) as an argument. If your response
includes a special status code and a document, be sure to
call setStatus before actually returning any of the content with
the PrintWriter.
2
public void sendRedirect(String url)
This method generates a 302 response along with a Location header
giving the URL of the new document.
3
public void sendError(int code, String message)
This method sends a status code (usually 404) along with a short
message that is automatically formatted inside an HTML document
and sent to the client.

189. Applications of Servlet
• Read the explicit data sent by the clients (browsers). This includes an HTML form on a Web page
or it could also come from an applet or a custom HTTP client program.
• Read the implicit HTTP request data sent by the clients (browsers). This includes cookies, media
types and compression schemes the browser understands, and so forth.
• Process the data and generate the results. This process may require talking to a database,
executing an RMI or CORBA call, invoking a Web service, or computing the response directly.
• Send the explicit data (i.e., the document) to the clients (browsers). This document can be sent in
a variety of formats, including text (HTML or XML), binary (GIF images), Excel, etc.
• Send the implicit HTTP response to the clients (browsers). This includes telling the browsers or
other clients what type of document is being returned (e.g., HTML), setting cookies and caching
parameters, and other such tasks.

190. Visually

191. init
public void init(ServletConfig config)
throws ServletException
• Called by the servlet container to indicate to a servlet that the servlet is being placed into service.
• The servlet container calls the init method exactly once after instantiating the servlet. The init
method must complete successfully before the servlet can receive any requests.
• The servlet container cannot place the servlet into service if the init method
• Throws a ServletException
• Does not return within a time period defined by the Web server

192. destroy
public void destroy()
• Called by the servlet container to indicate to a servlet that the servlet is being taken
out of service. This method is only called once all threads within the servlet's
service method have exited or after a timeout period has passed. After the servlet
container calls this method, it will not call the service method again on this servlet.
• This method gives the servlet an opportunity to clean up any resources that are
being held (for example, memory, file handles, threads) and make sure that any
persistent state is synchronized with the servlet's current state in memory.

193. Servlet Life Cycle
• Servlet life cycle is governed by init(), service(), and destroy().
• The init() method is called when the servlet is loaded and executes only once.
• After the servlet has been initialized, the service() method is invoked to process a
request.
• The servlet remains in the server address space until it is terminated by the server.
Servlet resources are released by calling destroy().
• No calls to service() are made after destroy() is invoked.

194. GUIs
• A GUI (graphical user interface) is a system of interactive visual components
for computer software.
• A GUI displays objects that convey information and represent actions that
can be taken by the user.
• The objects change color, size, or visibility when the user interacts with them

195. Creating a Multiplication
Table
• Copy the code from Notes
• Visual example for entering 9 and 9 to
prompts:

196. Creating a
Multiplication
Table Prompts

197. JavaScript Form
• Copy code from Notes
• Visual:

198. Homework
Assignment 5:
Create a popup message using an event. Your JavaScript code will go inside an HTML file called
welcome.html. You should create a message on your page such as Hello and when you hover over the
message a popup shows up with a different message, such as Hello and Welcome to My site.

199. Building Homework 5
• <html>
• <head>
• <title>JS Event Example</title>
• <script type="text/javascript">

200. Building Homework 5
• function trigger()
• {
• document.getElementById("hover").addEventListener("mouseover", popup);
• function popup()
• {
• alert("Welcome to my WebPage!!!");
• }

201. Building Homework 5
• }
• </script>
• <style>
• p
• {
• font-size:50px;
• position: fixed;
• left: 550px;
• top: 300px;
• }
• </style>

202. Building Homework 5
• </head>
• <body onload="trigger();">
• <p id="hover">Welcome!!!</p>
• </body>
• </html>

203. Building Homework 5
• Remember to copy you WYSIWYG code into Notepad and save as
• welcome.html
• Do not save as .js file

204. XML, JSON, and
XHTML
BITM 3730
Developing Web Applications
10/18

205. XHTML Basics
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

206. XHTML for the Experts
• XML is a markup language where all documents must be marked up
correctly (be "well-formed").
• XHTML was developed to make HTML more extensible and flexible to
work with other data formats (such as XML). In addition, browsers ignore
errors in HTML pages, and try to display the website even if it has some
errors in the markup. So XHTML comes with a much stricter error handling.

207. Strict?
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden

208. Example XHTML code
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
• <head>
• <title>Title of document</title>
• </head>
• <body>
• some content here...
• </body>
• </html>

209. Compared to HTML code
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>

210. Importance of XHTML
• XHTML documents are XML conforming as they are readily viewed, edited, and
validated with standard XML tools.
• XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and applets that rely
upon either the HTML Document Object Model or the XML Document Object
Model.
• XHTML gives you a more consistent, well-structured format so that your webpages
can be easily parsed and processed by present and future web browsers.

211. Importance of XHMTL
• You can easily maintain, edit, convert and format your document in the long run.
• Since XHTML is an official standard of the W3C, your website becomes more
compatible with many browsers and it is rendered more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages can be
rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow that, then
your web pages are counted as quality web pages. The W3C certifies those pages
with their quality stamp.

212. XML Basics
• Stands for eXtensible Markup Language
• Used to define customized markup languages
• We are already familiar with XML since we understand HTML

213. Interesting XML Notes
• XML is a software- and hardware-independent tool for storing and transporting
data.
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• Maybe it is a little hard to understand, but XML does not DO anything.

214. XML Just Stores Data
• XML is just information wrapped in tags.
• XML is the parent language to HTML
• XML is used to contain data, not to display data
• XML tags are custom, defined by the author.
• HTML can enrich XML data but neither can replace the other. One is used
for storing (XML) and the other is used for displaying (HTML).

215. XML Rules
• XML elements must follow these rules:
• Can contain letters, numbers and other characters
• Can’t start with a number or punctuation character
• Can’t start with ‘xml’
• Can’t contain spaces

216. Writing in XML
• XML attributes must be quoted as in: <employee type=‘permanent’>
• Alternatively, you can write
• <employee>
<type>permanent</type>
</employee>
• Both above examples accomplish the same goal and there are no rules as to which
one is right. The second example is easier to read and looks nicer.

217. XML vs. HTML
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are

218. You Define XML Tags
• The XML language has no predefined tags.
• Tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document structure.

219. Why Use XML?
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability

220. More Reasons to use XML
• XML stores data in plain text format. This provides a software- and hardware-
independent way of storing, transporting, and sharing data.
• XML also makes it easier to expand or upgrade to new operating systems, new
applications, or new browsers, without losing data.
• With XML, data can be available to all kinds of "reading machines" like people,
computers, voice machines, news feeds, etc.

221. In What Ways Can We Use XML?
• Create a list of books
• Create a list of transactions
• Create a news article header
• Detail weather service information
• And much, much more!

222. XML Example Code
• <?xml version="1.0" encoding="UTF-8"?> Prolog
• <note> Root
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note> notice all have closing tags like HTML!!!!

223. XML can use HTML tags
• Tags you have previously seen can be used in XML, such as:
• <b></b> for bold text
• <i></i> for italicized text

224. Attributes Must Be Quoted
• <note date="12/18/1953">
• <to>Tove</to>
• <from>Jani</from>
• </note>
• In this example our attribute is our date 12/18/1953

225. Entity References
&lt; < less than
&gt; > greater than
&amp; & ampersand
&apos; ' apostrophe
&quot; " quotation mark
Entity references help you to avoid errors

226. Comments in XML
• <!-- This is a comment -->
• This exact structure is required for XML comments

227. XML Elements
• An element can contain:
• Text
• Attributes
• other elements
• or a mix of the above
• Examples could be <rate>19.99</rate>

228. XML Naming Rules Reminder
• XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).

229. Standards Advising Naming Rules
• Create descriptive names, like this: <person>, <firstname>, <lastname>.
• Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
• Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first".
• Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first".
• Avoid ":". Colons are reserved for namespaces (more later).
• Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support them.

230. XLink
• <?xml version="1.0" encoding="UTF-8"?>
• <homepages xmlns:xlink="http://www.w3.org/1999/xlink">
• <homepage xlink:type="simple"
xlink:href="https://www.w3schools.com">Visit W3Schools</homepage>
• <homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit
W3C</homepage>
• </homepages>

231. Where Else Can We Use XML?
• HTML
• JavaScript
• PHP

232. XSLT
• XSLT - eXtensbile Stylesheet Language Transformations
• XSLT transform XML into HTML, before it is displayed by a browser
• You can transform a XML document into an HTML document just by
linking the XML document to the XSLT file by using the following line:
• <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>

233. Another XML Example
• <xml>
<addressbook>
<address>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</address>
<address>
<name>David Rosenthal</name>
<email>rosentdv@shu.edu</email>
</address>
</addressbook>
</xml>

234. JSON Basics
• JSON stands for JavaScript Object Notation
• JSON is easier to parse than XML
• Properties make up a JSON object
• JSON.parse() parses retrieved data
• JSON.stringify() converts a JavaScript object into a string

235. JSON vs. XML
• Syntax for storing and exchanging
data
• Similar to XML:
• Hierarchical – values embedded
within values
• Human readable
• Both can use XMLHttpRequest
• Different from XML:
• No tags
• Shorter
• Quicker to read and write
• JSON uses arrays
• Easier to parse JSON

236. JSON Object Example
• A car is an object which has three properties describing it
• Make – String value representing the make of the car
• Model – String value representing the model of the car
• Price – Numeric value representing the price of the car

237. How That Looks in XML
<car>
<make>Chevrolet</make>
<model>Suburban</model>
<price>60000</price>
</car>

238. How It Looks in JSON
{
"make": "Chevrolet",
"model": "Suburban",
"price": 60000
}

239. JSON Data Types
• String – {“name”:”Mark”}
• Number – {“age”: 41}
• Objects –
• {
“address”: {“name”:”Matt Marnio”, “email”:”matt.marino@shu.edu”}
}
• Arrays –
• {
“students”:[“Manny”, “Moe”, “Jack”]
}
• Booleans - {“Full-time”: true}
• Null – {“Job Description”: null}

240. Accessing Values in Objects
• In order to access the values of an object, you can
use the dot (.) notation
myObj =
{“firstName”:”Matt”,”lastName”:”Marino”,”
age”:34};
firstName = myObj.firstName;
lastName = myObj.lastName;
age = myObj.age;
• You can also access the values using a bracket
notation
firstName = myObj[“firstName”];
lastName = myObj[“lastName”];
age = myObj[“age”];
• You can also access all of the values using a for
loop:
for (x in myObj)
{
}

241. Parsing
• When data is received from a web server, it can be parsed with JSON.parse() and it
becomes a JavaScript object.
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

242. Stringify
• Convert a JavaScript object into a string
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON

243. JSON Example
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js"></script>
</head>
<body onload="show()">
<div id="carJSON"></div>
<div id="carXML"></div>
</body>
</html>

244. JSON Example Visual
JSON XML
function showJSON()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("carJSON").innerHTML = myObj.make;
}
};
xmlhttp.open("GET", "cars.json", true);
xmlhttp.send();
}
function showXML()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmldoc = xmlhttp.responseXML;
var myObj = xmldoc.getElementsByTagName("make");
alert(myObj[0].childNodes[0].nodeValue);
document.getElementById("carXML").innerHTML =
myObj[0].childNodes[0].nodeValue;
}
};
xmlhttp.open("GET", "cars.xml", true);
xmlhttp.send();
}
function show()
{
showJSON();
showXML();
}

245. JSON Table
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on JSON data.</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 14 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>

246. JSON Table Visual

247. JSON Community
• https://www.json.org/json-en.html
• Goes in depth on all JSON topics
• Including using JSON with various programming languages

248. Homework
Assignment 6:
Create a booklist file in both XML and JSON (meaning two different files - one called books.xml and one
called books.json). Include in your data storage files the following book info: title of book, author of
book, and price of book.

249. HW Help
• XML – refer back to slide 34
• JSON – refer back to slide 35

250. Forms/PHP
BITM 3730
Developing Web Applications
10/25

251. Basic HTML Form
• Boring
• Limited
• Hard to Store info

252. Reminder from HTML Lesson
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text

253. Inputs - HTML
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button

254. HTML Example
• <html>
• <body>
• <h2>HTML Form</h2>
• <form action="/action_page.php">
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" name="fname" value="John"><br>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname" value="Doe"><br><br>
• <input type="submit" value="Submit">
• </form>
• </body>
• </html>

255. Visual
Only two inputs
Both inputs are text

256. <form action="/action_page.php">
• This does all the work of sending the information

257. HTML with no PHP
• <html>
• <body>
• <h2>HTML Form</h2>
• <form>
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" name="fname" value="John"><br>
• <label for="lname">Last name:</label><br>
• <input type="text" id="lname" name="lname" value="Doe"><br><br>
• <input type="submit" value="Submit">
• </form>
• </body>
• </html>
Does not send the input
anywhere

258. Why Won’t This Work?
• <form action="/action_page.php">
• <label for="fname">First name:</label><br>
• <input type="text" id="fname" value="John"><br><br>
• <input type="text" id="fname" name="fname" value="John"><br>
• <input type="submit" value="Submit">
• </form>
Missing name="fname"

259. Radio Buttons
• <form>
• <input type="radio" id="html" name="fav_language" value="HTML">
• <label for="html">HTML</label><br>
• <input type="radio" id="css" name="fav_language" value="CSS">
• <label for="css">CSS</label><br>
• <input type="radio" id="javascript" name="fav_language" value="JavaScript">
• <label for="javascript">JavaScript</label>
• </form>

260. Check Boxes
• <form>
• <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
• <label for="vehicle1"> I have a bike</label><br>
• <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
• <label for="vehicle2"> I have a car</label><br>
• <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
• <label for="vehicle3"> I have a boat</label>
• </form>

261. All Input Types
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

262. Understanding PHP
• A PHP script can be placed anywhere in the document.
• A PHP script starts with <?php and ends with ?>:
• <?php
• // PHP code goes here
• ?>
• The default file extension for PHP files is ".php".
• A PHP file normally contains HTML tags, and some PHP scripting code.

263. Using PHP – HTML Code
• <html>
• <body>
• <form action="welcome_get.php" method="get">
• Name: <input type="text" name="name"><br>
• E-mail: <input type="text" name="email"><br>
• <input type="submit">
• </form>
• </body>
• </html>

264. welcome_get.php Code
• <html>
• <body>
• Welcome <?php echo $_GET["name"]; ?><br>
• Your email address is: <?php echo $_GET["email"]; ?>
• </body>
• </html>

265. Visual
Once submitted, displays

266. Using PHP to Upload Files - HTML
• <html>
• <body>
• <form action="upload.php" method="post" enctype="multipart/form-data">
• Select image to upload:
• <input type="file" name="fileToUpload" id="fileToUpload">
• <input type="submit" value="Upload Image" name="submit">
• </form>
• </body>
• </html>

267. upload.php
• <?php
• $target_dir = "uploads/";
• $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
• $uploadOk = 1;
• $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
• // Check if image file is a actual image or fake image
• if(isset($_POST["submit"])) {
• $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
• if($check !== false) {
• echo "File is an image - " . $check["mime"] . ".";
• $uploadOk = 1;
• } else {
• echo "File is not an image.";
• $uploadOk = 0;
• }
• }

268. upload.php
• // Check if file already exists
• if (file_exists($target_file)) {
• echo "Sorry, file already exists.";
• $uploadOk = 0;
• }
• // Check file size
• if ($_FILES["fileToUpload"]["size"] > 500000) {
• echo "Sorry, your file is too large.";
• $uploadOk = 0;
• }
• // Allow certain file formats
• if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
• && $imageFileType != "gif" ) {
• echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
• $uploadOk = 0;
• }

269. upload.php
• // Check if $uploadOk is set to 0 by an error
• if ($uploadOk == 0) {
• echo "Sorry, your file was not uploaded.";
• // if everything is ok, try to upload file
• } else {
• if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
• echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
• } else {
• echo "Sorry, there was an error uploading your file.";
• }
• }
• ?>

270. What is the PHP Code Doing?
• PHP script explained:
• $target_dir = "uploads/" - specifies the directory where the file is going to be
placed
• $target_file specifies the path of the file to be uploaded
• $uploadOk=1 is not used yet (will be used later)
• $imageFileType holds the file extension of the file (in lower case)
• Next, check if the image file is an actual image or a fake image

271. PHP Open and Read
• <?php
• $myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
• echo fread($myfile,filesize("webdictionary.txt"));
• fclose($myfile);
• ?>

272. PHP Create and Write
• <?php
• $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
• $txt = "John Doen";
• fwrite($myfile, $txt);
• $txt = "Jane Doen";
• fwrite($myfile, $txt);
• fclose($myfile);
• ?>

273. Homework
Assignment 7:
Using PHP, JavaScript and/or HTML create a Contact form which will accept Name, Email, and
Comment as inputs. The Submit button can either return the input or provide an external webpage noting
your input has been emailed.

274. HTML
• <html>
• <body>
• <form action="welcome.php" method="post">
• Name: <input type="text" name="name"><br>
• E-mail: <input type="text" name="email"><br>
• Comment: <input type="text" name="comment"><br>
• <input type="submit">
• </form>
• </body>
• </html>

275. Have to edit welcome.php
• <html>
• <body>
• Welcome <?php echo $_POST["name"]; ?><br>
• Your email address is: <?php echo $_POST["email"]; ?>
• Your comment was: <?php echo $_POST[“comment”]; ?>
• </body>
• </html>

276. To Send via Email
• <?php
• $from = "matt.marino@shu.edu";
• $to = "dspace-community@googlegroups.com";
• $message = "Unsubscribe";
• $info = "Unsubscribe";
• $check = mail($to, "Unsubscribe",
• $message, "From:matt.marino@shu.edu");
• if ($check != true) { echo "Sorry... Error Sending E-Mail. E-Mail NOT Sent.";}
• else { echo "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You Shortly...";}
Create a file mailtest.php
and upload to your courses
web space
Change the to
To your email address, so you
get the inputs

277. HTML for Email
• <html>
• <body>
• <form action=“mailtest.php" method="post">
• Name: <input type="text" name="name"><br>
• E-mail: <input type="text" name="email"><br>
• Comment: <input type="text" name="comment"><br>
• <input type="submit">
• </form>
• </body>
• </html>
PHP files must be live on a web server to
work properly

278. Networks, Servers, and Websockets
BITM 3730
Developing Web Applications
11/1

279. Client
• Client is “served” pages from a webserver
• Client can be Internet Explorer, Chrome, Firefox and Safari
• A web browser is considered a client
• Client performs some processing of the output of the server

280. Server
• Server returns HTML along with other content such as images and small
applications (flash, applets)
• Servers are often found on the web
• This is “interpreted” by the browser and displayed to the end user
• Application servers typically provide dynamic content while the webserver is
responsible for the delivery

281. Basics
• A web server delivers static content
• An application server delivers dynamic content
• The relationship between application servers and a database is that it
transforms data with business logic
• Web servers and application servers which are free and readily available are
open source
• FTP stands for File Transfer Protocol

282. Web Server Defined
• A web server is software and hardware that uses HTTP (Hypertext Transfer
Protocol) and other protocols to respond to client requests made over the
World Wide Web.
• The main job of a web server is to display website content through storing,
processing and delivering webpages to users.

283. Web Server Visual

284. Web Server Possibilities
• A static web server: We call it "static" because the server sends its hosted files as-is
to your browser.
• A dynamic web server: We call it "dynamic" because the application server
updates the hosted files before sending content to your browser via the HTTP
server.
• An error message

285. Potential Errors – 5 Levels
• 1xx informational response – the request was received, continuing process
• 2xx successful – the request was successfully received, understood, and
accepted
• 3xx redirection – further action needs to be taken in order to complete the
request
• 4xx client error – the request contains bad syntax or cannot be fulfilled
• 5xx server error – the server failed to fulfil an apparently valid request

286. 1xx Level Errors
• 100 Continue: The server has received the request headers and the client should proceed to send the request body (in the
case of a request for which a body needs to be sent; for example, a POST request). Sending a large request body to a server
after a request has been rejected for inappropriate headers would be inefficient. To have a server check the request's
headers, a client must send Expect: 100-continue as a header in its initial request and receive a 100 Continue status code in
response before sending the body. If the client receives an error code such as 403 (Forbidden) or 405 (Method Not
Allowed) then it shouldn't send the request's body. The response 417 Expectation Failed indicates that the request should
be repeated without the Expect header as it indicates that the server doesn't support expectations (this is the case, for
example, of HTTP/1.0 servers).
• 101 Switching Protocols: The requester has asked the server to switch protocols and the server has agreed to do so.
• 102 Processing: A WebDAV request may contain many sub-requests involving file operations, requiring a long time to
complete the request. This code indicates that the server has received and is processing the request, but no response is
available yet. This prevents the client from timing out and assuming the request was lost.
• 103 Early Hints: Used to return some response headers before final HTTP message

287. 2xx Level Errors
• 200 OK: Standard response for successful HTTP requests. The
actual response will depend on the request method used. In a
GET request, the response will contain an entity corresponding to
the requested resource. In a POST request, the response will
contain an entity describing or containing the result of the action.
• 201 Created: The request has been fulfilled, resulting in the
creation of a new resource.
• 202 Accepted: The request has been accepted for processing, but
the processing has not been completed. The request might or
might not be eventually acted upon and may be disallowed when
processing occurs.
• 203 Non-Authoritative Information: The server is a
transforming proxy (e.g. a Web accelerator) that received a 200
OK from its origin but is returning a modified version of the
origin's response.
• 204 No Content: The server successfully processed the request and is
not returning any content.
• 205 Reset Content: The server successfully processed the request, asks
that the requester reset its document view, and is not returning any
content.
• 206 Partial Content: The server is delivering only part of the resource
(byte serving) due to a range header sent by the client. The range
header is used by HTTP clients to enable resuming of interrupted
downloads or split a download into multiple simultaneous streams.
• 207 Multi-Status: The message body that follows is by default an XML
message and can contain a number of separate response codes,
depending on how many sub-requests were made.
• 208 Already Reported: The members of a DAV binding have already
been enumerated in a preceding part of the (multistatus) response and
are not being included again.
• 226 IM Used: The server has fulfilled a request for the resource, and
the response is a representation of the result of one or more instance-
manipulations applied to the current instance.

288. 3xx Level Errors
• 300 Multiple Choices: Indicates multiple options for the resource from which the
client may choose (via agent-driven content negotiation). For example, this code could
be used to present multiple video format options, to list files with different filename
extensions, or to suggest word-sense disambiguation.
• 301 Moved Permanently: This and all future requests should be directed to the given
URI.
• 302 Found (Previously "Moved temporarily"): Tells the client to look at (browse
to) another URL. 302 has been superseded by 303 and 307. This is an example of
industry practice contradicting the standard. The HTTP/1.0 specification (RFC 1945)
required the client to perform a temporary redirect (the original describing phrase was
"Moved Temporarily"), but popular browsers implemented 302 with the functionality
of a 303 See Other. Therefore, HTTP/1.1 added status codes 303 and 307 to
distinguish between the two behaviours. However, some Web applications and
frameworks use the 302 status code as if it were the 303.
• 303 See Other : The response to the request can be found under another URI using
the GET method. When received in response to a POST (or PUT/DELETE), the
client should presume that the server has received the data and should issue a new
GET request to the given URI.
• 304 Not Modified: Indicates that the resource has not been modified since
the version specified by the request headers If-Modified-Since or If-None-
Match. In such case, there is no need to retransmit the resource since the
client still has a previously-downloaded copy.
• 305 Use Proxy: The requested resource is available only through a proxy, the
address for which is provided in the response. For security reasons, many
HTTP clients (such as Mozilla Firefox and Internet Explorer) do not obey
this status code.
• 306 Switch Proxy: No longer used. Originally meant "Subsequent requests
should use the specified proxy."
• 307 Temporary Redirect: In this case, the request should be repeated with
another URI; however, future requests should still use the original URI. In
contrast to how 302 was historically implemented, the request method is not
allowed to be changed when reissuing the original request. For example, a
POST request should be repeated using another POST request.
• 308 Permanent Redirect: The request and all future requests should be
repeated using another URI. 307 and 308 parallel the behaviors of 302 and
301, but do not allow the HTTP method to change. So, for example,
submitting a form to a permanently redirected resource may continue
smoothly

289. 4xx Level Errors
• 400 Bad Request: The server cannot or will not process the request due to an apparent client error (e.g., malformed request syntax, size too
large, invalid request message framing, or deceptive request routing).
• 401 Unauthorized: Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been
provided. The response must include a WWW-Authenticate header field containing a challenge applicable to the requested resource. See Basic
access authentication and Digest access authentication. 401 semantically means "unauthorised", the user does not have valid authentication
credentials for the target resource.
• 402 Payment Required: Reserved for future use. The original intention was that this code might be used as part of some form of digital cash
or micropayment scheme, as proposed, for example, by GNU Taler, but that has not yet happened, and this code is not widely used. Google
Developers API uses this status if a particular developer has exceeded the daily limit on requests. Sipgate uses this code if an account does not
have sufficient funds to start a call. Shopify uses this code when the store has not paid their fees and is temporarily disabled. Stripe uses this
code for failed payments where parameters were correct, for example blocked fraudulent payments.
• 403 Forbidden: The request contained valid data and was understood by the server, but the server is refusing action. This may be due to the
user not having the necessary permissions for a resource or needing an account of some sort or attempting a prohibited action (e.g. creating a
duplicate record where only one is allowed). This code is also typically used if the request provided authentication by answering the WWW-
Authenticate header field challenge, but the server did not accept that authentication. The request should not be repeated.

290. 4xx Level Errors Cont.
• 404 Not Found: The requested resource could not be found but may be available in the future. Subsequent requests by the client are
permissible.
• 405 Method Not Allowed: A request method is not supported for the requested resource; for example, a GET request on a form that
requires data to be presented via POST, or a PUT request on a read-only resource.
• 406 Not Acceptable: The requested resource is capable of generating only content not acceptable according to the Accept headers sent in the
request.
• 407 Proxy Authentication Required: The client must first authenticate itself with the proxy.
• 408 Request Timeout: The server timed out waiting for the request. According to HTTP specifications: "The client did not produce a
request within the time that the server was prepared to wait. The client MAY repeat the request without modifications at any later time."
• 409 Conflict: Indicates that the request could not be processed because of conflict in the current state of the resource, such as an edit conflict
between multiple simultaneous updates.
• 410 Gone: Indicates that the resource requested is no longer available and will not be available again. This should be used when a resource has
been intentionally removed and the resource should be purged. Upon receiving a 410 status code, the client should not request the resource in
the future. Clients such as search engines should remove the resource from their indices. Most use cases do not require clients and search
engines to purge the resource, and a "404 Not Found" may be used instead.

291. 4xx Level Errors Cont.
• 411 Length Required: The request did not specify the length of its content, which is required by the requested resource.
• 412 Precondition Failed: The server does not meet one of the preconditions that the requester put on the request header fields.
• 413 Payload Too Large: The request is larger than the server is willing or able to process. Previously called "Request Entity Too
Large".
• 414 URI Too Long: The URI provided was too long for the server to process. Often the result of too much data being encoded as
a query-string of a GET request, in which case it should be converted to a POST request. Called "Request-URI Too Long"
previously.
• 415 Unsupported Media Type: The request entity has a media type which the server or resource does not support. For example,
the client uploads an image as image/svg+xml, but the server requires that images use a different format.
• 416 Range Not Satisfiable: The client has asked for a portion of the file (byte serving), but the server cannot supply that portion.
For example, if the client asked for a part of the file that lies beyond the end of the file. Called "Requested Range Not Satisfiable"
previously.
• 417 Expectation Failed: The server cannot meet the requirements of the Expect request-header field.

292. 4xx Level Errors Cont.
• 421 Misdirected Request: The request was directed at a server that is not able to produce a response.
• 422 Unprocessable Entity: The request was well-formed but was unable to be followed due to semantic errors.
• 423 Locked: The resource that is being accessed is locked.
• 424 Failed Dependency: The request failed because it depended on another request and that request failed (e.g., a
PROPPATCH).
• 425 Too Early: Indicates that the server is unwilling to risk processing a request that might be replayed.
• 426 Upgrade Required: The client should switch to a different protocol such as TLS/1.0, given in the Upgrade
header field.
• 428 Precondition Required: The origin server requires the request to be conditional. Intended to prevent the 'lost
update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when
meanwhile a third party has modified the state on the server, leading to a conflict.

293. Last 4xx Level Errors
• 429 Too Many Requests: The user has sent too many requests in a given amount
of time. Intended for use with rate-limiting schemes.
• 431 Request Header Fields Too Large: The server is unwilling to process the
request because either an individual header field, or all the header fields collectively,
are too large.
• 451 Unavailable For Legal Reasons: A server operator has received a legal
demand to deny access to a resource or to a set of resources that includes the
requested resource. The code 451 was chosen as a reference to the novel Fahrenheit
451

294. 5xx Level Errors
• 500 Internal Server Error: A generic error message, given when an unexpected condition was encountered
and no more specific message is suitable.
• 501 Not Implemented: The server either does not recognize the request method, or it lacks the ability to
fulfil the request. Usually this implies future availability (e.g., a new feature of a web-service API).
• 502 Bad Gateway: The server was acting as a gateway or proxy and received an invalid response from the
upstream server.
• 503 Service Unavailable: The server cannot handle the request (because it is overloaded or down for
maintenance). Generally, this is a temporary state.
• 504 Gateway Timeout: The server was acting as a gateway or proxy and did not receive a timely response
from the upstream server.
• 505 HTTP Version Not Supported: The server does not support the HTTP protocol version used in the
request.

295. 5xx Level Errors Cont.
• 506 Variant Also Negotiates: Transparent content negotiation for the request results in a
circular reference.
• 507 Insufficient Storage: The server is unable to store the representation needed to complete
the request.
• 508 Loop Detected: The server detected an infinite loop while processing the request (sent
instead of 208 Already Reported).
• 510 Not Extended: Further extensions to the request are required for the server to fulfil it.
• 511 Network Authentication Required: The client needs to authenticate to gain network
access. Intended for use by intercepting proxies used to control access to the network (e.g.,
"captive portals" used to require agreement to Terms of Service before granting full Internet
access via a Wi-Fi hotspot).

296. Commonly Used Web Servers [FREE]
• Apache HTTP
• NGINX
• Apache Tomcat
• Node.js
• Lighttpd

297. Web Servers [PAID]
• GoDaddy
• HostGator
• OneWebHosting
• Hostwinds
• A2 Web Hosting
• WP Engine
• 1&1

298. Understanding the Web
• Website [also referred to as a domain]
• Highest level of the website [Ex. https://www.shu.edu/ ]
• Web page
• Individual page within the website [Ex. https://www.shu.edu/business/index.cfm ]
• Sub Domain
• Generally, features its own web pages in a secondary folder [Ex.
https://www.shu.edu/business/ or http://pirate.shu.edu/ ]

299. If You Build It, They Will Come

300. Web Server for Chrome
• https://chrome.google.com/webstore/detail/web-server-for-
chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
• App from Chrome Web Store
• Runs Offline
• Explained in depth at https://github.com/kzahel/web-server-chrome

301. Application Server
• Server that hosts application
• Common tools
• Java application servers
• .NET Framework [from Microsoft]
• PHP application servers
• Mobile application servers

302. Where Can App Servers Be Deployed
• On premises [your computer/network]
• Cloud [public on internet]
• Private Cloud [private on internet – likely requires password]
• PaaS – Platform as a Service [can be cloud based]

303. PaaS
PaaS can be delivered in three ways:
• As a public cloud service from a provider, where the consumer controls software
deployment with minimal configuration options, and the provider provides the networks,
servers, storage, operating system (OS), middleware (e.g. Java runtime, .NET runtime,
integration, etc.), database and other services to host the consumer's application.
• As a private service (software or appliance) behind a firewall.
• As software deployed on a public infrastructure as a service.

304. Web APIs
• When used in the context of web development, an API is
typically defined as a set of specifications, such as Hypertext
Transfer Protocol (HTTP) request messages, along with a
definition of the structure of response messages, usually in an
Extensible Markup Language (XML) or JavaScript Object
Notation (JSON) format.

305. You Build
• You can build apps on your own using https://ibuildapp.com/
• Google also provides similar opportunities
https://developers.google.com/appmaker
• You can even turn your Mac into a server
https://www.apple.com/macos/server/

306. Application Servers – Most Commonly Used
• JBoss [open source]
• Glassfish [Oracle]
• Weblogic [Oracle]
• Websphere [IBM]

307. App Stores [Mobile]
• Google Play Store
• Apple App Store
• Samsung Galaxy Apps
• LG SmartWorld
• Huawei App Store
• Sony Apps
• Amazon Appstore
• Aptoide
• F-Droid
• GetJar
• ACMarket
• SlideME
• Uptodown Market
• Itch.io
• Cydia
• neXva

308. App Store vs. Application Server
• App Store is a distribution tool to promote apps for download and/or
purchase
• Application server is a tool for storing applications

309. Basics
• The most common FTP port is port 21
• The main connection in FTP is either referred to as the Control or
Command Connection
• SFTP stands for Secure File Transfer Protocol
• SFTP is secure because it runs over SSH (Secure Shell) protocol
• FTP connects the server and client

310. FTP
• FTP is a way to transfer files online.
• Browsers use a protocol called HTTP.
• IMAP and POP, for instance, are two protocols that email clients use
to send and receive messages.
• XMPP is a protocol used to send and receive instant messages.
• FTP is another such protocol.

311. FTP Connects
• An FTP server offers access to a directory, with sub-directories.
• Users connect to these servers with an FTP client, a piece of software that
lets you download files from the server, as well as upload files to it.

312. FTP Channels
• FTP uses two basic channels to operate:
• The command channel carries information about the task
itself — what files are to be accessed, if commands are
registering, etc.
• The data channel then transfers the actual file data between
devices.

313. Error and Status Codes – 6 Levels
• 1xx - The requested action is being initiated, expect another reply before proceeding
with a new command.
• 2xx - The requested action has been successfully completed.
• 3xx - The command has been accepted, but the requested action is on hold, pending
receipt of further information.
• 4xx - The command was not accepted and the requested action did not take place,
but the error condition is temporary and the action may be requested again.
• 5xx - The command was not accepted and the requested action did not take place.
• 10xxx - Winsock error codes

314. 1xx Codes
110 Restart marker reply.
120 Service ready in nn minutes.
125 Data Connection already open, transfer starting.
150 File status okay, about to open data connection.

315. 2xx Codes
200 Command okay.
202 Command not implemented, superfluous at this site.
211 System status, or system help reply.
212 Directory status.
213 File status.
214 Help message.
215 NAME system type. (Where NAME is an official system name from the list in the
Assigned Numbers document.)
220 Service ready for new user.
221 Service closing control connection. Logged out if appropriate.
225 Data connection open; no transfer in progress
226 Closing data connection. Requested file action successful (for example - file transfer
or file abort).
227 Entering Passive Mode.
230 User logged in, proceed.
250 Requested file action okay, completed.
257 "PATHNAME" created.

316. 3xx Codes
331 User name okay, need password.
332 Need account for login.
350 Requested file action pending further information.

317. 4xx Codes
421 Service not available, closing control connection. This may be a reply to any
command if the service knows it must shut down.
425 Can't open data connection. Try changing from PASV to PORT mode.
426 Connection closed; transfer aborted.
450 Requested file action not taken. File unavailable (e.g., file busy).
451 Requested action aborted: local error in processing.
452 Requested action not taken. Insufficient storage space in system.

318. 5xx Codes
501 Syntax error in parameters or arguments.
502 Command not implemented.
503 Bad sequence of commands.
504 Command not implemented for that parameter.
530 Not logged in. Your password is being rejected, contact the server administrator.
532 Need account for storing files.
550 Requested action not taken. File unavailable (e.g., file not found, no
access). Contact the server administrator.
552 Requested file action aborted. Exceeded storage allocation (for current directory
or data set). Contact the server administrator.
553 Requested action not taken. File name not allowed. Try changing the file name,
or getting rid of spaces in the file name.

319. 10xxx Codes
10054 Connection Reset by Peer - The connection was forcibly closed by the remote
host.
10060 Can't connect to remote server (Generally a time-out error). Try switching from
PASV to PORT mode.
10061 Can't connect to remote server. The connection is actively refused by the
server. Try switching from PASV to PORT mode.
10066 Directory not empty. The server will not delete this directory while there are
files/folders in it.
10068 Too many users, server is full. Contact the server administrator.

320. FTP Data Types
• ASCII (TYPE A): Used for text. Data is converted, if needed, from the sending host's
character representation to "8-bit ASCII" before transmission, and (again, if necessary) to
the receiving host's character representation. As a consequence, this mode is inappropriate
for files that contain data other than plain text.
• Image (TYPE I, commonly called Binary mode): The sending machine sends each file
byte by byte, and the recipient stores the bytestream as it receives it. (Image mode support
has been recommended for all implementations of FTP).
• EBCDIC (TYPE E): Used for plain text between hosts using the EBCDIC character set.
• Local (TYPE L n): Designed to support file transfer between machines which do not use
8-bit bytes

321. FTP File Structures
• File organization is specified using the STRU command:
• F or FILE structure (stream-oriented). Files are viewed as an arbitrary
sequence of bytes, characters or words.
• R or RECORD structure (record-oriented). Files are viewed as divided into
records.
• P or PAGE structure (page-oriented). Files are divided into pages.

322. FTP Data Transfer Modes
• Data transfer can be done in any of three modes:
• Stream mode (MODE S): Data is sent as a continuous stream, relieving FTP from doing any
processing. Rather, all processing is left up to TCP. No End-of-file indicator is needed, unless the
data is divided into records.
• Block mode (MODE B): Designed primarily for transferring record-oriented files (STRU R),
although can also be used to transfer stream-oriented (STRU F) text files. FTP puts each record
(or line) of data into several blocks (block header, byte count, and data field) and then passes it
on to TCP.
• Compressed mode (MODE C): Extends MODE B with data compression using run-length
encoding.
• Most contemporary FTP clients and servers do not implement MODE B or MODE C

323. FTP Login
• FTP login uses normal username and password scheme for granting access.The username is
sent to the server using the USER command, and the password is sent using the PASS
command. This sequence is unencrypted "on the wire", so may be vulnerable to a network
sniffing attack.
Anonymous FTP:
• A host that provides an FTP service may provide anonymous FTP access. Users typically log
into the service with an 'anonymous' (lower-case and case-sensitive in some FTP servers)
account when prompted for user name. Although users are commonly asked to send their
email address instead of a password, no verification is actually performed on the supplied
data. Many FTP hosts whose purpose is to provide software updates will allow anonymous
logins.

324. FTP Security Issues
• Brute-force attack
• FTP bounce attack
• Packet capture
• Port stealing (guessing the next open port and usurping a legitimate connection)
• Spoofing attack
• Username enumeration
• DoS or DDoS

325. Other FTP Options
• FTP over SSH is the practice of tunneling a normal FTP session over a Secure Shell connection.
• Explicit FTPS is an extension to the FTP standard that allows clients to request FTP sessions to
be encrypted.
• The SSH file transfer protocol (chronologically the second of the two protocols abbreviated
SFTP) transfers files and has a similar command set for users but uses the Secure Shell protocol
(SSH) to transfer files.
• Trivial File Transfer Protocol (TFTP) is a simple, lock-step FTP that allows a client to get a file
from or put a file onto a remote host.
• Simple File Transfer Protocol (the first protocol abbreviated SFTP), proposed as an (unsecured)
file transfer protocol with a level of complexity intermediate between TFTP and FTP.

326. Top FTP Tools
• FileZilla [now said to include viruses upon download in the form of adware
and malware, so avoid]
• WinSCP
• Using Windows Explorer [i.e. folder on your computer]

327. FTP with Windows Explorer

328. File eXchange Protocol
• File eXchange Protocol (FXP or FXSP) is a method of data transfer which
uses FTP to transfer data from one remote server to another (inter-server)
without routing this data through the client's connection.
• Enabling FXP support can make a server vulnerable to an exploit known as
FTP bounce. As a result of this, FTP server software often has FXP disabled
by default. Some sites restrict IP addresses to trusted sites to limit this risk.

329. File Service Protocol
• File Service Protocol (FSP) is a UDP-based replacement for the File Transfer
Protocol, designed for anonymous access with lower hardware and network
requirements than FTP.
• As the FSP protocol is not officially recognized by IANA, it has no official
port number.

330. FTP Port Numbers
• 20 FTP -- Data
• 21 FTP -- Control
• 22 SSH Remote Login Protocol
• 23 Telnet
• 25 Simple Mail Transfer Protocol (SMTP)
• 69 Trivial File Transfer Protocol (TFTP)
• 80 HTTP
• 115 Simple File Transfer Protocol (SFTP)

331. Websockets

332. Websockets
• WebSockets, allow for sending message-based data, but with the reliability of
TCP.
• WebSocket uses HTTP as the initial transport mechanism but keeps the TCP
connection alive after the HTTP response is received so that it can be used
for sending messages between client and server.
• WebSockets allow us to build “real-time” applications without the use of
long-polling.

333. Websockets
• WebSockets do not use the http:// or https:// scheme (because they do not follow
the HTTP protocol).
• WebSocket URIs use a new scheme ws: (or wss: for a secure WebSocket). The
remainder of the URI is the same as an HTTP URI: a host, port, path and any
query parameters.
• "ws:" "//" host [ ":" port ] path [ "?" query ]
• "wss:" "//" host [ ":" port ] path [ "?" query ]

334. Homework
Assignment 8:
Discuss the similarities and differences between websockets, networks, and servers. Explain how each are
useful within Web Development.

335. HW Help
• You can use information from these slides and the web to help you answer
the HW question posed.

336. Content Management Systems
BITM 3730
Developing Web Applications
11/8

337. What is CMS?
• Content Management Systems (CMS) are commonly used to create and store data
online
• The most commonly used CMS tools allow individuals to create their own website
without knowing anything about web development [coding in HTML, CSS, JS, etc.]
• Individuals merely install the CMS software to their website and type in specific
information to create websites

338. Two Common Reasons to Use CMS
• User-friendly browser-based publishing tools
• No technical skills required
• Compliance with Accessibility requirements
• W3C standards

339. What is Content?
• Any type or unit of digital information.
• Text, images, graphics, video, sound, documents, records, etc
• Anything that we would like to manage in an electronic format.

340. Why CMS?
• Web Content Management System
• Create/manage HTML & images
• Authoring tools
• Templates for presentation

341. Common CMS Requirements
Database Code Server

342. Most Common CMS

343. Differences in CMS
• Every CMS has its own unique way of organizing and managing content.
• It helps you to create/edit/delete content in a shared repository (database).
• It contains much improved CSS (Cascading Style Sheets).
• CMS enables content to be shared across the Web sites.

344. Why Use Them?
• Drupal, Joomla, WordPress use a database (tables) to store information
• CMS uses a different technology than standard html/css sites
• The technology is open-source (free!)
• Allows people to update their owns sites
• You are the master of your own domain!

345. Joomla
• The name Joomla is derived from the Swahili word "Jumla", which means "all
together" or "as a whole".
• Joomla! is one of the most powerful Open Source Content Management Systems. It
is used all over the world for everything from simple websites to complex corporate
applications.
• Joomla! is easy to install, simple to manage, and reliable.

346. Joomla
• Joomla is written in PHP, uses object-oriented programming structure
(OOPS) techniques and software design pattern, stores data in a MySql
database, and includes features such as page caching, RSS feeds, printable
versions of pages, news flashes, blogs, polls, search, and support for language
internationalization.
• It is based on a model-view-controller (MVC) web application framework
that can be used independently.

347. Why Joomla?
• It is designed to work perfectly in basic shared web hosting environments, a package that is
least expensive and most common. Installer is simple and just like any other common
desktop software.
• It is supported by several extensions, add-on, and plug in. They are written in PHP, which is
most widely used, general purpose scripting language and best suited for web development.
• Joomla supports SSL logins and SSL pages.
• Joomla probably has a pre built module to transform it in a social bookmarking website.
• Joomla's greatest advantage is availability of a large number of extensions that you can use
to Plug-in extra features into your website and transform your website into anything you
like.

348. WordPress Issues
• The WordPress content management system is an ideal platform for
bloggers as it is easy to install and use.
• Adding or removing post dates, need to be changed in design mode and it
requires knowledge of WP scripting.
• You can add membership functionality in WordPress.

349. Why WordPress?
• With WordPress, any type of website can be created like a personal blog or
website, a photoblog, a business website, a professional portfolio, a
government website, a magazine or news website, an online community, even
a network of websites.
• Website can be made with beautiful with themes, and can be extended with
plugins.

350. WordPress
• Free website on WordPress website
• Installed to your website if you own a domain
• Themes can be uploaded or created for use

351. Drupal Issues
• Learning curve is bigger than Joomla and WordPress
• Less support available than Joomla and WordPress

352. Other CMS
• Shopify
• Squarespace
• Wix
• Blogger
• Weebly
• Moodle

353. Learning Curve
• WordPress
• Easy, No experience required
• Joomla
• Medium, Easier than Drupal, harder than WordPress.
• Drupal
• Requires technical expertise. Major updates are an effort

354. E-Commerce
• WordPress
• Yes, with plugins
• Joomla
• Extensions for managing products and content
• Drupal
• the latest version, does not support a stable e-commerce module yet

355. SEO Friendliness
• WordPress
• Excellent
• Joomla
• Basic
• Drupal
• Good

356. Speed
• WordPress
• High traffic can cause limitations
• Joomla
• Faster and less resource intensive
• Drupal
• Consumes resources if not tweaked properly

357. Plugins
• WordPress
• Extensive. 41,579 plug-ins
• Joomla
• Few. 7000 extensions
• Drupal
• Many. 32,568 modules

358. Themes
• WordPress
• Extensive. Tens of thousands of themes
• Joomla
• Few. Thousands of themes
• Drupal
• Many. Thousands of themes

359. Mobile Friendly
• WordPress
• Good. Simple responsive starter themes
• Joomla
• Good. Many mobile extensions to choose from
• Drupal
• Good. Going mobile is simple.

360. Once Installed
• Easier to have website host install for you to avoid potential errors
• Login through Admin Panel, such as wp-admin
• All actions occur with the Admin panel, impact how website looks and is
accessed

361. WordPress Admin

362. Joomla Admin

363. Drupal Admin

364. Homework
Assignment 9:
Of the Content Management Systems described in class, pick one and explain why you would choose that
CMS over other options.

365. Search Engine Optimization (SEO)
BITM 3730
Developing Web Applications
11/15

366. Purpose of SEO
• To drive targeted traffic to your website [or specific pages]
• Ideally, the traffic drives additional sales
• Most online purchases are made on sites found through search engine listings

367. SEO is Technically Not Paid Advertising
• SEO – influence rankings in the “natural” (a.k.a. “organic”, a.k.a. “algorithmic”)
search results
• PPC – paid search advertising on a pay-per-click basis. The more you pay, the higher
your placement. Stop paying = stop receiving traffic.
• PPC – pay per click
• SEM – encompasses both SEO and PPC
• Search engine marketing

368. How SEO
Looks

369. Most Commonly Used Search Engines
• Google
• Google AdWords
• Bing
• Microsoft Advertising
• Yahoo Search

370. SEO is Based on Keywords
• Keyword Research
• The “right” keywords are…
• relevant to your business
• popular with searchers
• https://ads.google.com/home/tools/keyword-planner/

371. Researching Keywords
• Tools to check popularity of keyword searches
• http://WordTracker.com
• http://KeywordDiscovery.com
• http://adwords.google.com/KeywordPlanner
• http://www.google.com/trends/
• http://ubersuggest.org/

372. SEO – Constant Changes
• Topically relevant links from important sites
• Anchor text
• Keyword-rich title tags
• Keyword-rich content
• Internal hierarchical linking structure
• The whole is greater than the sum of the parts

373. Begin The 7 Steps
1) Get Your Site Fully Indexed
2) Get Your Pages Visible
3) Build Links & PageRank
4) Leverage Your PageRank
4) Encourage Clickthrough
6) Track the Right Metrics
7) Avoid Worst Practices

374. 1) Get Your Site Fully Indexed
 Search engines are wary of “dynamic” pages - they
fear “spider traps”
 The better your PageRank, the deeper and more often
your site will be spidered

375. 1) Get Your Site Fully Indexed
 Page # estimates are wildly inaccurate, and include non-indexed pages
(e.g. ones with no title or snippet)
 Misconfigurations (in robots.txt, in the type of redirects used, requiring
cookies, etc.) can kill indexation
 Keep your error pages out of the index by returning 404 status code
 Keep duplicate pages out of the index by standardizing your URLs,
eliminating unnecessary variables, using 301 redirects when needed

376. Not Spider-Friendly
• GET http://www.bananarepublic.com --> 302 Moved Temporarily
• GET http://www.bananarepublic.com/browse/home.do --> 302 Moved
Temporarily
• GET
http://www.bananarepublic.com/browse/home.do?targetURL=http%3A%2
F%2Fwww.bananarepublic.com%2Fbrowse%2Fhome.do&CookieSet=Set --
> 302 Moved Temporarily
• GET http://www.bananarepublic.com/cookieFailure.do --> 200 OK

377. 2) Get Your Pages Visible
• 100+ “signals” that influence ranking
• “Title tag” is the most important copy on the page
• Home page is the most important page of a site
• Every page of your site has a “song” (keyword theme)
• Incorporate keywords into title tags, hyperlink text, headings (H1 & H2 tags), alt tags, and
high up in the page (where they’re given more “weight”)
• Eliminate extraneous HTML code
• “Meta tags” are not a magic bullet
• Have text for navigation, not graphics

378. 3) Build Links and PageRank
• “Link popularity” affects search engine rankings
• PageRank™ - Links from “important” sites have more impact on
your Google rankings (weighted link popularity)
• Google offers a window into your PageRank
• PageRank meter in the Google Toolbar (toolbar.google.com)
• Google Directory (directory.google.com) category pages
• 3rd party tools like SEOChat.com’s “PageRank Lookup” & “PageRank
Search”
• Scores range from 0-10 on a logarithmic scale

379. 4) Leverage Your PageRank
• Your home page’s PageRank gets distributed to your deep pages by virtue of
your hierarchical internal linking structure (e.g. breadcrumb nav)
• Pay attention to the text used within the hyperlink (“Google bombing”)
• Don’t hoard your PageRank
• Don’t link to “bad neighborhoods”

380. 4) Leverage Your PageRank
 Avoid PageRank dilution
 Canonicalization (www.domain.com vs. domain.com)
 Duplicate pages: (session IDs, tracking codes, superfluous parameters)
 http://company.com/Products/widget.html
 http://company.com/products/widget.html
 http://company.com/Products/Widget.html
 http://company.com/products/Widget.html
 In general, search engines are cautious of dynamic URLs (with ?, &, and = characters) because of
“spider traps”
 Rewrite your URLs (using a server module/plug-in) or use a hosted proxy service (e.g. GravityStream)
 See http://catalogagemag.com/mag/marketing_right_page_web/

381. 5) Encourage Clickthrough
• Zipf’s Law applies - you need to be at the top of page 1 of the search results.
It’s an implied endorsement.
• Synergistic effect of being at the top of the natural results & paid results
• Entice the user with a compelling call-to-action and value proposition in your
descriptions
• Your title tag is critical
• Snippet gets built automatically, but you CAN influence what’s displayed here

382. 6) Track the Right Metrics
 Indexation: # of pages indexed, % of site indexed, % of product
inventory indexed, # of “fresh pages”
 Link popularity: # of links, PageRank score (0 - 10)
 Rankings: by keyword, “filtered” (penalized) rankings
 Keyword popularity: # of searches, competition, KEI (Keyword
Effectiveness Indicator) scores
 Cost/ROI: sales by keyword & by engine, cost per lead

383. Avoid Worst Practices
• Target relevant keywords
• Don’t stuff keywords or replicate pages
• Create deep, useful content
• Don't conceal, manipulate, or over-optimize content
• Links should be relevant (no scheming!)
• Observe copyright/trademark law & Google’s guidelines

384. Spamming in Its Many Forms…
• Hidden or small text
• Keyword stuffing
• Targeted to obviously irrelevant keywords
• Automated submitting, resubmitting, deep submitting
• Competitor names in meta tags
• Duplicate pages with minimal or no changes
• Spamglish
• Machine generated content

385. Spamming in Its Many Forms…
 Pagejacking
 Doorway pages
 Cloaking
 Submitting to FFA (“Free For All”) sites & link farms
 Buying up expired domains with high PageRanks
 Scraping
 Splogging (spam blogging)

386. Not Spam, But Bad for Rankings
 Splash pages, content-less home page, Flash intros
 Title tags the same across the site
 Error pages in the search results (eg “Session expired”)
 "Click here" links
 Superfluous text like “Welcome to” at beginning of titles
 Spreading site across multiple domains (usually for load balancing)
 Content too many levels deep

387. In Summary
• Focus on the right keywords
• Have great keyword-rich content
• Build links, and thus your PageRank™
• Spend that PageRank™ wisely within your site
• Measure the right things
• Continually monitor and benchmark

388. Pay Per Click
• Bid on the search terms
you want
• You only pay when
someone clicks to get to
your website

389. Positives of PPC
• Immediate placement
• You can control budget and positioning
• Only pay if traffic is produced
• You can use inexpensive keywords

390. Negatives of PPC
• Requires a lot of research
• Can cost you a lot of money if done wrong
• Requires you to know about the industry

391. Google
AdWords

392. Google
AdWords

393. Homework
Assignment 10:
Create a faux SEO Pay Per Click (PPC) plan for your project/website. You should include what Search
Engine you will use (Google, Bing, etc.), what search terms you will use and why, and how much you will
spend each month on these terms.

394. Extra Topics
BITM 3730
Developing Web Applications
11/22

395. Adding Blog Parts
• Assumes you requested blog at https://blogs.shu.edu/request-a-blog/
• And received approval/creation of blog

396. HTML Codes for “Page Bar”
• Discussed and reviewed in class on 9/27
• See upcoming slides

397. Horizontal <style> 1
• ul {
• list-style-type: none;
• margin: 0;
• padding: 0;
• overflow: hidden;
• border: 1px solid #e7e7e7;
• background-color: #f3f3f3;
• }

398. Horizontal <style> 2
• li {
• float: left;
• }
• li a {
• display: block;
• color: #666;
• text-align: center;
• padding: 14px 16px;
• text-decoration: none;
• }

399. Horizontal <style> 3
• li a:hover:not(.active) {
• background-color: #ddd;
• }
• li a.active {
• color: white;
• background-color: #04AA6D;
• }

400. Horizontal <body>
• <ul>
• <li><a class="active" href="#home">Home</a></li>
• <li><a href="#teams">Favorite Sports Teams</a></li>
• <li><a href="#contact">Contact Me</a></li>
• </ul>

401. Creating a Dropdown

402. Dropdown <style> 1
• body {
• font-family: Arial, Helvetica, sans-serif;
• }
• .navbar {
• overflow: hidden;
• background-color: #333;
• }

403. Dropdown <style> 2
• .navbar a {
• float: left;
• font-size: 16px;
• color: white;
• text-align: center;
• padding: 14px 16px;
• text-decoration: none;
• }
• .dropdown {
• float: left;
• overflow: hidden;
• }

404. Dropdown <style> 3
• .dropdown .dropbtn {
• font-size: 16px;
• border: none;
• outline: none;
• color: white;
• padding: 14px 16px;
• background-color: inherit;
• font-family: inherit;
• margin: 0;
• }

405. Dropdown <style> 4
• .navbar a:hover, .dropdown:hover .dropbtn {
• background-color: red;
• }
• .dropdown-content {
• display: none;
• position: absolute;
• background-color: #f9f9f9;
• min-width: 160px;
• box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
• z-index: 1;
• }

406. Dropdown <style> 5
• .dropdown-content a {
• float: none;
• color: black;
• padding: 12px 16px;
• text-decoration: none;
• display: block;
• text-align: left;
• }
• .dropdown-content a:hover {
• background-color: #ddd;
• }
• .dropdown:hover .dropdown-content {
• display: block;
• }

407. Dropdown <body>
• <div class="navbar">
• <a href="#home">Home</a>
• <a href="#contact">Contact Me</a>
• <div class="dropdown">
• <button class="dropbtn">Favorite Sports Teams
• <i class="fa fa-caret-down"></i>
• </button>
• <div class="dropdown-content">
• <a href="#">Yankees</a>
• <a href="#">49ers</a>
• <a href="#">Knicks</a>
• </div>
• </div>
• </div>

408. Networks & Different Servers

409. PERSONAL AREA NETWORK (PAN)
• Smallest and most basic network
• Meant to cover a very small area (typically a single room or building)
• A PAN is most commonly used for one individual and to connect just a
handful of devices such as a computer, smart phone, and printer.
• Probably the most well-known PAN technology is Bluetooth connection.

410. LOCAL AREA NETWORK (LAN)
• A LAN connects a group of computers or devices together across a local
area.
• Can be utilized to connect devices throughout one building or even 2-3
buildings depending on the proximity to each other.
• Whether wired or wireless connection, it’s using a LAN connection.

411. WIRELESS LOCAL AREA NETWORK
(WLAN)
• A WLAN is simply a LAN that does not rely on cables to connect to the
network.
• When you’re using WiFi, you’re using a WLAN.

412. METROPOLITAN AREA NETWORK
(MAN)
• Larger than a LAN but smaller than a WAN, a MAN incorporates elements
of both types of networks.
• It connects multiple LANs together and spans an entire geographical area
such as a city or town (or sometimes a campus).
• Ownership and management can be handled by a single person, but it’s more
likely done by a larger company or organization.

413. WIDE AREA NETWORK (WAN)
• WANs do the same thing as LANs but across a larger area while connecting
more devices.
• Even when miles apart, a WAN can connect devices together remotely.
• The most basic example of a WAN is the Internet which connects
computers and devices worldwide.
• Since it’s much larger, this type of network is typically maintained by multiple
administrators and ownership is distributed across various organizations.

414. STORAGE AREA NETWORK (SAN)
• A SAN is another type of LAN that’s designed to handle large data transfers
and storage.
• This purpose of this network is to move larger, more complex storage
resources away from the network into a separate, high-performance
atmosphere.
• Doing this not only allows for easy retrieval and storage of the data but it
also frees up space and improves overall performance of the original
network.

415. VIRTUAL PRIVATE NETWORK (VPN)
• The point of a VPN is to increase security and privacy while accessing a
network.
• The VPN acts as a middleman between you and the network by encrypting
your data and hiding your identity.
• Anytime you’re on a public network, you run the risk of being targeted by a
hacker, so using a VPN is you best bet at ensuring your cybersecurity.

416. Web server
• An open-source web server is used for accessing the world wide web through
public domain software.
• These servers connect stored information from an internet website to your
own computer. Web servers store information for the internet that is
retrieved via "HTTP" code and sent to your web browser.
• This is one of the most widely used types of servers.

417. Proxy server
• Proxy servers act as a bridge between a host server and a client server.
• A proxy sends data from a website to your computer IP address after it
passes through the proxy's server. This practice adds a layer of security since
the information is requested then transferred from the source to the proxy
server and never directly from a client to another user.
• A proxy server can filter out various harmful internet entities.

418. Virtual machine (VM)
• Virtual machines store and connect data strictly through virtual space. To
create a virtual machine, IT teams use a hypervisor, also known as a virtual
machine monitor (VMM), which is software that can run thousands of
virtual machines through only one piece of physical hardware.
• This method of server virtualization is widely used for data transfer and
storage because they are the most cost-effective type of server to run.

419. File transfer protocol (FTP) server
• FTP servers are used to relocate files from one computer to another.
• Uploaded files move from your computer to the server while downloaded
files are extracted from the server onto your device.
• File transfer protocol also refers to the method of using a server to connect
one computer to another in order to share data safely.

420. Application server
• These servers connect clients to software applications through virtual server
connections. This allows users to bypass downloading data to their own
hardware in order to access applications.
• Application servers can effectively host large amounts of application data to
many users at once, making them ideal for businesses.

421. File server
• A file server stores data files for multiple users. They allow for faster data
retrieval and saving or writing files to a computer.
• This is a basic type of server used commonly by organizations where lots of
users need access to files that are more conveniently and safely stored on a
server than a personal computer.

422. Database server
• Database servers function as large storage spaces that organizations use and
access to run multiple programs to meet their needs.
• A database server can run independently of any database architecture.

423. Mail server
• A mail server stores and delivers mail for clients through email service
platforms.
• Because mail servers are set up to continually connect to a network,
individual users can access their email without running any systems through
their own devices.

424. Print server
• A print server connects remotely to local computers to print through a
network.
• These servers give businesses the ability to use a single printer to serve an
entire department.
• Some printers even come with their own built-in server ready to join a
network once they're installed in an office area.

425. Domain name system (DNS) server
• These servers transform readable computer domain names into computer
language IP addresses.
• The DNS server takes search data from a user and finds the requested
address to deliver to the client device.

426. Collaboration server
• When work needs to be shared across multiple users, a collaboration server
makes it easy to connect.
• These servers allow you to share and store files, applications and other large
amounts of data.

427. Gaming server
• Large gaming networks use servers to connect users from around the world.
• These servers host multi-player online games.

428. Monitoring and management server
• Monitoring and management servers function in several capacities. First, they
record and track digital transactions and receive user requests.
• Others simply monitor and don't actively participate in user operations.
Monitoring servers are responsive to network administrators who survey
network health to check for threats or bugs in the system.

429. Building a Database

430. Considerations Before Database
• Determine the purpose of your database
• Find and organize the information required
• Divide the information into tables
• Turn information items into columns
• Decide what information you want to
store in each table. Each item becomes a
field and is displayed as a column in the
table. For example, an Employees table
might include fields such as Last Name
and Hire Date.
• Specify primary keys
• Set up the table relationships
• Refine your design
• Analyze your design for errors. Create the tables
and add a few records of sample data. See if
you can get the results you want from your
tables. Make adjustments to the design, as
needed.
• Apply the normalization rules
• Apply the data normalization rules to see if
your tables are structured correctly. Make
adjustments to the tables, as needed.

431. Create a Database Online Free
• Website Options:
• grubba. nat - the free online datbase for home and office.
• lifewire.com - free online databaase creators.
• kohezion.com - free online database software.
• obvibase.com - simple online database.
• sodadb.com - simple online database.
• zoho.com - crm solution that includes a free database to build online apps.

432. Plugin Available on SHU Blogs

433. How Blockchain Tech Can Impact Web Design
& Security?

434. Securing Private Messaging
• More social apps are being launched with each dawn as conversational
commerce gains popularity. Huge amounts of metadata are collected during
these interactions. Most social media platform users protect the services and
their data with weak, unreliable passwords.
• Most messaging companies are warming up to blockchain for securing user
data as a superior option to the end-to-end encryption which they currently
use. Blockchain can be used to create a standard security protocol. For
enabling cross-messenger communication capabilities, blockchain can be
used to form a unified API framework.

435. Securing DNS and DDoS
• A Distributed Denial of Service (DDoS) attack occurs when users of a target resource, such
as a network resource, server, or website, are denied access or service to the target resource.
These attacks shut down or slow down the resource systems.
• On the other hand, an intact Domain Name System (DNS) is very centralized, making it a
perfect target for hackers who infiltrate the connection between the IP address and the
name of a website. This attack renders a website inaccessible, cashable, and even redirectable
to other scam websites.
• Blockchain can be used to diminish such kinds of attacks by decentralizing the DNS entries.
By applying decentralized solutions, blockchain would have removed the vulnerable single
points exploited by hackers.

436. Protecting Data Transmission
• Blockchain can be used in the future to prevent unauthorized access to data
while in transit. By utilizing the complete encryption feature of the
technology, data transmission can be secured to prevent malicious actors
from accessing it, be it an individual or an organization.
• Hackers with malicious intent tap into data amid transit to either alter it or
completely delete its existence. This leaves a huge gap in inefficient
communication channels, such as emails.

437. Blockchain E-commerce Improvements
• Bitcoin, Etherum, and Ripple are some of the cryptocurrencies available as
of now. However, due to their decentralized nature, cryptocurrencies are
now making their way to the mainstream ground by replacing traditional
currencies.
• Introducing blockchain technology can work positively for you. Due to its
decentralized nature, any wrongdoings can be tracked instantly. Also, all
stakeholders can see who is doing it.

438. Other Key Points
• One of the main selling points of blockchain technology is its security. One of the
three main pillars of existing technology that combined to create blockchain is
private key cryptography (hence, cryptocurrency). The protection that cryptography
provides against hackers or security breaches is a huge boon for the tech itself.
• Developing websites on WordPress may also improve from using blockchain
technology and its subsequent applications. WordPress is already an open-source
platform, meaning that developers contribute to the code, development,
documentation, etc. These continuing contributions mutually benefit the users and
professionals found within the WordPress community.

439. How to Develop a POS System
• Examples of Creating Online:
• https://code-boxx.com/pos-system-pure-html-css-javascript/
• https://www.graciousnaija.com/2020/01/point-of-sale-system-using-php-
with.html
• Provide E-Shopper [HTML code] example

440. Extract, Transform, Load [ETL]

441. Extract
• The first part of an ETL process involves extracting the data from the
source system(s).
• Most data-warehousing projects combine data from different source systems.
Each separate system may also use a different data organization and/or
format. Common data-source formats include relational databases, XML,
JSON

442. Transform
• An important function of transformation is data cleansing, which aims to
pass only "proper" data to the target.

443. Load
• The load phase loads the data into the end target, which can be any data
store including a simple delimited flat file or a data warehouse.
• Depending on the requirements of the organization, this process varies
widely.

444. Visual

445. Paid ETL Tools
• Informatica PowerCenter
• IBM InfoSphere DataStage
• Oracle Data Integrator (ODI)
• Microsoft SQL Server Integration Services (SSIS)
• Ab Initio
• SAP Data Services
• SAS Data Manager

446. Free ETL Tools
• Talend Open Studio
• Pentaho Data Integration (PDI)
• Hadoop

447. What Works with ETL?
• Python [programming language]
• SQL [database]
• Java [programming language]

448. Web Design Elements & Layouts

449. Key Elements of Websites
• Layout and Visual Appearance [using our HTML code]
• Color Scheme [using our CSS code]
• Typography [using HTML, CSS and JS code]
• Navigation [using HTML and CSS code]
• Content [general information]
• Mobile friendly

450. Website Layout Types
• Single Column
• Split Screen [Two Column]
• Asymmetrical
• Grid [or Boxes]
• Magazine
• Fixed sidebar
• Feature image
• F-shape
• Z-shape