Computer Science E-75 Building Dynamic Websites

Size: px

Start display at page:

Download "Computer Science E-75 Building Dynamic Websites"

Aileen Poole
5 years ago
Views:

1 Computer Science E-75 Building Dynamic Websites Harvard Extension School Lecture 0: HTTP David J. Malan 0

2 DNS Image from wikipedia.org. 3

3 Web Hosts Image from dreamhost.com. 5

4 HTTP Images from howstutfworks.com. 20

5 XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>hello, world</title> </head> <body> hello, world </body> </html> 21

6 CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <style type="text/css">  </style> <title>hello, world</title> </head> <body> hello, world </body> </html> 22

7 CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <link href="styles.css" rel="stylesheet" type="text/css" /> <title>hello, world</title> </head> <body> hello, world </body> </html> 23

8 Validity 24

9 Cross-Browser Issues Chrome Firefox Internet Explorer Safari 25

10 Yahoo! UI Library (YUI) YUI Reset CSS YUI Fonts CSS 26

11 YUI Reset CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <link rel="stylesheet" type="text/css" href=" /> <title>hello, world</title> </head> <body> hello, world </body> </html> 27

12 YUI Fonts CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <link rel="stylesheet" type="text/css" href=" /> <title>hello, world</title> </head> <body> hello, world </body> </html> 28

13 Forms Text Fields <input name=" " type="text" /> Password Fields <input name="password" type="password" /> Hidden Fields <input name="id" value="123" /> Checkboxes <input checked="checked" name= remember" type="checkbox" /> Radio Buttons <input name="gender" type="radio" value="f" /> <input name="gender" type="radio" value="m" /> Drop-Down Menus <select name= state"> <option value=""></option> <option value= MA"></option> <option value= NY"></option> </select> 29

14 HTTP Images from howstutfworks.com. 1

15 XAMPP Linux, Mac OS, Solaris, Windows Apache MySQL PHP Perl Image from pplware.com. 5

16 Forms Text Fields <input name=" " type="text" /> Password Fields <input name="password" type="password" /> Hidden Fields <input name="id" value="123" /> Checkboxes <input checked="checked" name= remember" type="checkbox" /> Radio Buttons <input name="gender" type="radio" value="f" /> <input name="gender" type="radio" value="m" /> Drop-Down Menus <select name= state"> <option value=""></option> <option value= MA"></option> <option value= NY"></option> </select> Text Areas <textarea name= comments"></textarea> 6

17 Forms 7

18 PHP Image from php.net. 8

19 <?php 10

20 Variables A valid variable name starts with a letter or underscore, followed by any number of letters, numbers, or underscores. Excepted from 11

21 Types boolean integer float string array object resource NULL mixed number callback 12

22 References 13

23 Superglobals $_COOKIE $_ENV $_FILES $_GET $_POST $_REQUEST $_SERVER $_SESSION 14

24 Arrays 15

25 Loops for while do... while foreach 16

26 XML element child element start tag end tag attribute <ORDER> value <SOLD-TO> <PERSON ID="123"> <LASTNAME>Malan</LASTNAME> <FIRSTNAME>David</FIRSTNAME> </PERSON> </SOLD-TO> text <SOLD-ON> </SOLD-ON> <ITEM> <PRICE>29.95</PRICE> <BOOK> <TITLE>Harry Potter and the Order of the Phoenix</TITLE> <AUTHOR>J.K. Rowling</AUTHOR> </BOOK> </ITEM> </ORDER> 2

27 Extensibility <ORDER> <SOLD-TO> <PERSON ID="123"> <LASTNAME>Malan</LASTNAME> <FIRSTNAME>David</FIRSTNAME> <INITIAL>J</INITIAL> <ADDRESS> <STREET>Oxford Street</STREET> <NUMBER>33</NUMBER> <CITY>Cambridge</CITY> <STATE>MA</STATE> </ADDRESS> </PERSON> </SOLD-TO> <SOLD-ON> </SOLD-ON> <ITEM>... </ITEM> </ORDER> extend structure without breaking existing data and applications 3

28 <students/> <?xml version="1.0" encoding="utf-8"?>  <students> <student id="0001"> <name>jim Bob</name> <status>graduate</status> <dorm/> <major>computer Science & Music</major> <description> <![CDATA[ <h1>jim Bob!</h1> Hi my name is jim. I look like <img src="jim.jpg"> ]]> </description> </student> <student id="0002">... </student> </students> 4

29 XML Declaration <?xml version="1.0" encoding="utf-8"?> Optional Must appear at the very top of an XML document Used to indicate the version of the specification to which the document conforms (and whether the document is standalone ) Used to indicate the character encoding of the document UTF-8 UTF-16 iso

30 <name>jim Bob</name> Elements Main structure in an XML document Only one root element allowed Start Tag Allows specification of zero or more attributes <student id="0001"...> End Tag Must match name, case, and nesting level of start tag </student> Name must start with letter or underscore and can contain only letters, numbers, hyphens, periods, and underscores 6

31 Content Models Element Content <student> <status>...</status> </student> Parsed Character Data (aka PCDATA, aka Text) <name>jim Bob</name> Mixed Content <name>jim <initial>j</initial> Bob</name> No Content <dorm/> 7

32 <student id="0001"> Attributes Name Must start with letter or underscore and can contain only letters, numbers, hyphens, periods, and underscores Value Can be of several types, but is almost always a string Must be quoted title="lecture 2" match='item="baseball bat"' Cannot contain < or & (by itself) 8

33 Jim Bob PCDATA Text that appears as the content of an element Can reference entities Cannot contain < or & (by itself) 9

34 & Entities Used to escape content or include content that is hard to enter or repeated frequently Somewhat like macros Five pre-defined entities & < > ' " Character entities can refer to a single character by unicode number e.g., is Must be declared to be legal <!ENTITY nbsp " "> Cannot refer to themselves 10

35 CDATA <![CDATA[ <h1>jim Bob!</h1>... ]]> Parsed in one chunk by the XML parser Data within is not checked for subelements, entities, etc. Allows you to include badly formed markup or character data that would cause a problem during parsing Example Including HTML tags in an XML document 11

36  Comments Can include any text inside a comment to make it easier for human readers to understand your document Generally not available to applications reading the document Always begin with  Cannot contain -- 12

37 SimpleXML 13

38 DOM  <students> <student id="1"> <name>jim Bob</name> <status>graduate</status> </student> </students> Document Comment Element: students Text: \n\t Element: student Attr: id Text: \n Text: \n\t\t Element: name Text: \n\t\t Element: status Text: \n\t Text: Jim Bob Text: graduate 14

39 RSS Image from wikipedia.org. 15

40 RSS <?xml version="1.0" encoding="utf-8"?> <rss version="2.0"> <channel> <title></title> <description></description> <link></link> <item> <guid></guid> <title></title> <link></link> <description></description> <category></category> <pubdate></pubdate> </item> [...] </channel> </rss> 16

41 XPath step axis node test predicate location path 17

42 XPath step axis node test predicate location path 2

43 Databases CSV XML fgetcsv, fputcsv SimpleXML MySQL mysql, mysqli SQLite... PDO 3

44 Relational Databases 4

45 MySQL 5

46 phpmyadmin 6

47 SQL CREATE ALTER DROP SELECT INSERT UPDATE DELETE... 7

48 MySQL 8

Computer Science E-75 Building Dynamic Websites

Computer Science E-75 Building Dynamic Websites Harvard Extension School http://www.cs75.net/ Lecture 3: XML David J. Malan dmalan@harvard.edu 0 1 XML element child element start tag end tag attribute