BITM3730Week1.pptx

1. HTML and XHTML BITM 3730 Developing Web Applications

2. 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.

3. 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.

4. 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

5. 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

6. Important Code for this week • <!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.

7. <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.

8. <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.

9. <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.

10. <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

11. <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.

12. 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>

14. 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

15. Week 1 HW Answer (for me) • Your code will obviously be different because you are current students with a major and your favorite website will be different • Your code also may not have the meta data I have included <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows- 1252"> <title>Assignment 1</title> </head> <body> <ul> <li>Matt Marino</li> <li>No Major, not currently a student</li> <li>Graduated a long time ago</li> <li><a href="http://innovativeprof.com/">My Favorite Website</a></li> </ul> </body> </html>

16. 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

17. 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

18. 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

19. 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

20. <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.

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

22. <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.

23. <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.

24. 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>

25. 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

26. 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

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

28. Building the Table’s Data • <tr> • <th>Instructor</th> • <td> </td> • <td> </td> • <td> </td> • <td> </td> • </tr> • <tr> • <th>Number of Credits</th> • <td> </td> • <td> </td> • <td> </td> • <td> </td> • </tr>

29. Visual Table

30. Visual Table Notes • Sizes of the cells in each row will change when you replace the 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

32. HW 1 and 2 Review • HW 1 Example – http://pirate.shu.edu/~marinom6/mattmarino.html • HW 2 Example – http://pirate.shu.edu/~marinom6/schedule.html • Please Note only previously due HW assignments are posted on my pirate.shu.edu web space

33. 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

34. <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]

35. 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

36. 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.

37. 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

38. 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>

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

40. 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.

41. 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.

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

43. <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!

44. <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!

45. <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]

46. 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

47. Building Assignment 3 • Some suggestions: • <h1></h1> tags for About Me, My Favorite Sport or Musical Act, and My Favorite Animal • <p></p> tags when providing the paragraph about each section • Your paragraph should be any where from 3 to 5 sentences

48. Building Assignment 3 Example <h1>About Me</h1> <p>I am an Adjunct Professor of BITM at Seton Hall University. I have taught courses in Management Information Systems [BITM 2701] and Developing Web Applications [BITM 3730]. My web space created for this course is available at <a href="http://pirate.shu.edu/~marinom6/">My Site> </p> You do not need to include any hyperlink for Assignment 3

49. Building Project #1 • Refer to Professor Nazzaro’s example at http://pirate.shu.edu/~nazzarma/ • Listing your address while at Seton Hall University instead of your home address is fine • You will in theory only list one degree [the one you will receive at SHU] under Education • Unless you have an Associate’s degree from somewhere • Your Experience will be vastly less • Try to have bullet points on what you did at your job(s)

50. Building Project #1 • Your Skills do not have to broken down into different areas • Please list three References [you can include former professors, friends, other people in the class to meet this requirement] • Remember to use the tags discussed to bold and italicize as necessary

51. Source Code

52. Important Note for Project #1 • Professor Nazzaro’s Resume is created in XHTML • For the purposes of Project #1 you are more than welcome to only use HTML code • Consideration of extra credit will be given if you are able to utilize XHTML properly for Project #1

53. CSS BITM 3730 Developing Web Applications

54. HW 3 and Project 1 Review • HW 3 Example and Project 1 Example at • http://pirate.shu.edu/~marinom6/work.html • Please Note only previously due HW assignments are posted on my pirate.shu.edu web space

55. 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

56. 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

57. 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

58. 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>

59. 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>

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

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

62. 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

63. 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.

64. 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; }

65. 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” />

66. 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.

67. Stylesheet Visual

68. Another Stylesheet Visual

69. <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

70. Building Assignment 4 Example Start with the basics: <html> <head> </head> <body> </body> </html>

71. Building Assignment 4 • Put some sample text inside the body section • Make sure they appear before you add your stylesheet • <h1>Test</h1> • <p>Random text here</p>

72. Building Assignment 4 • Place your style tag within the body section of your HTML code • <style> • </style>

73. Building Assignment 4 • body { • background-color: put your background color here; • } • h1 { • color: put text color here; • } • p { • color: put text color here; • }

74. Building Assignment 4 • When saving your file as a .css file you only need the information on the previous slide • The “building” example is if you were to do an internal example of CSS

75. 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.

76. 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.

77. 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

78. CSS Linking • 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">

79. XML BITM 3730 Developing Web Applications

80. Previous Work Review • http://pirate.shu.edu/~marinom6/work.html • Please Note only previously due HW assignments are posted on my pirate.shu.edu web space • Begin organizing your creating files for this course into an easy to find folder on your desktop for easy FTP later on

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

82. 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.

83. 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).

84. 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

85. 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.

86. 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

87. 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.

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

89. 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.

90. 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!

91. 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!!!!

92. 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

93. 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

94. Entity References < < less than > > greater than & & ampersand ' ' apostrophe " " quotation mark Entity references help you to avoid errors

95. Comments in XML •  • This exact structure is required for XML comments

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

97. 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).

98. 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.

99. 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>

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

101. 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"?>

102. 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>

103. Building Assignment 5 <xml> <instructors> <name>Professors</name> <contact> <name>Mark Nazzaro</name> <email>nazzarma@shu.edu</email> </contact> </instructors> </xml>

104. Building Assignment 5 • Each new professor’s name and email will require another contact tag <contact> <name>Matt Marino</name> <email>matt.marino@shu.edu</email> </contact>

105. Building Assignment 5 • You will need to create as many <contact> tag attributes for name and email as you have professors this semester • In the upcoming example I have listed four professor contacts

106. Assignment 5 Example Visual

107. Building Project 2 • The easiest way to embed a file is to use a <link> tag in HTML • However, we have not uploaded our files to pirate.shu.edu yet, so we will embed them right into the code • <xml id="cdcat" src="cd_catalog.xml"></xml> • <link rel="stylesheet" href="styles.css">

108. Building Project 2 • First, put the following code from your Blue.css file under the title: <style> body { background-color: black; } h1 { color: blue; } p { color: blue; } </style>

109. Building Project 2 • Putting your XML into HTML requires you to translate it into a table [easiest for our beginner status] • First, create your table: <h1>Email Data</h1> <table border="1"> <tbody> Add table rows here </tbody> </table> We need the <h1> tag so that our text is colored blue from our Blue.css code

110. Building Project 2 • First, we need our table headers: <tr> <th><p>Name</p></th> <th><p>Email</p></th> </tr>

111. Building Project 2 • Next, we need our table data: <tr> <td><p>Matt Marino</p></td> <td><p>matt.marino@shu.edu</p></td> </tr> We need the <p> tag so that our text is colored blue from our Blue.css code

112. Building Project 2 • Keep adding each professor to the table using the tags and elements provided on the previous slide using the <tr>, <td>, and <p> tags as appropriate

113. Project 2 Visually If your code is correct within your HTML file your result should look like this All of our text is blue and our background is black due to our Blue.css code [make sure it is embedded using the <style> tag We also made sure to use the <h1> and <p> tags to see our CSS code in action The names and emails depend on your professors this semester like your XML file

114. JavaScript BITM 3730 Developing Web Applications

116. 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 //

117. 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>

118. 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.

119. 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.

120. 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>

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

122. 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

123. 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>

124. 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"); }

125. 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>

126. 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; } }

127. 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.

128. 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; }

129. 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

130. 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>

131. 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;

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

133. 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

134. 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

135. 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 }

136. 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); }

137. 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

138. 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

139. 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.

140. 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)

141. 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; }

142. 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

143. Building Assignment 6 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; }

144. 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 ""; } }

145. 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)

146. 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; }

147. JavaScript BITM 3730 Developing Web Applications

149. 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

150. 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>

151. 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; }

152. 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.

153. Building Assignment 7 <!DOCTYPE html> <html> <head> <script> </script> </head> <body onload="checkCookie()">Marino's cookie checker</body> </html>

154. Building Assignment 7 function checkCookie() { alert(document.cookie); var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome again " + username); } else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,365); } } }

155. External Version [Assignment 7] – HTML File <!DOCTYPE html> <html> <head> <script src="js/scripts.js"></script> </head> <body onload="checkCookie()">Marino's cookie checker</body> </html>

156. External Version [Assignment 7] – JS File function checkCookie() { alert(document.cookie); var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome again " + username); } else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,365); } } }

157. 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>

158. 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

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

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

161. 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

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

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

164. JSON BITM 3730 Developing Web Applications

166. 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

167. 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

168. 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

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

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

171. 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}

172. 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) { }

173. 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;

174. 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

175. Building Assignment 8 <html> <head> <script> </script> </head> <body> </body> </html>

176. Building Assignment 8 <script> var obj = { "name":"John", "age":30, "city":"New York"}; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON </script>

177. Building Project 3 – Reminder of XML Code <xml> <instructors> <name>Professors</name> <contact> <name>Matt Marino</name> <email>matt.marino@shu.edu</email> </contact> </instructors> </xml>

178. Building Project 3 – JSON Code { “name": “Matt Marino", “email": “matt.marino@shu.edu", } • Create additional ones for each professor you have this semester

179. 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>

180. 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(); }

181. 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>

182. JSON Table Visual

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

184. Web Server and Application Server Technologies BITM 3730 Developing Web Applications

186. 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

187. 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.

188. Web Server Visual

189. 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

190. 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

191. 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

192. 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.

193. 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

194. 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.

195. 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.

196. 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.

197. 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.

198. 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

199. 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.

200. 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).

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

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

203. 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/ ]

204. If You Build It, They Will Come

205. 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

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

207. 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]

208. 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.

209. 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.

210. 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/

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

212. 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

213. 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

214. Building Assignment 9 • Download WinSCP from https://winscp.net/eng/download.php • Follow instructions on Blackboard • Take a screenshot: • On a Mac – press Shift, Command, and 3 all at once • On Windows – press CTRL and PRT SC at the same time • Edit the screenshot to only show your FTP process

215. Assignment 9 Example

216. Web Server and Application Server Technologies: FTP BITM 3730 Developing Web Applications

218. 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

219. 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.

220. 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.

221. 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.

222. 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

223. 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.

224. 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.

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

226. 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 o

BITM3730Week1.pptx

BITM3730Week1.pptx

Recomendados

Más contenido relacionado

Similar a BITM3730Week1.pptx

Similar a BITM3730Week1.pptx(20)

Más de MattMarino13

Más de MattMarino13(20)

Último

Último(20)

BITM3730Week1.pptx