1. V 1.0 OE NIK, 2014 1 PHP+SQL EXPECTATIONS

2. V 1.0 Schedule (Lessons) OE NIK, 2014 2 1Expectations, HTML Intro 2Control Structures 3Array, Strings, Calculators 4File management, Guestbook 5Session storage, Login 6Forum 7TEST 1 8PHP+SQL basic usage 9CRUD 1 10CRUD 2 (??? TDK ???) 11CMS 12TEST 2 13ExtraZH / Project Presentation

3. V 1.0 Schedule (Homeworks) OE NIK, 2014 3 1 2 3 4THEOREMS HW request (for points in test 1) 5 6THEOREMS HW deadline 7 8TOPIC + ER request 9TOPIC + ER deadline, DB + ACTION PLAN request 10 11DB + ACTION PLAN deadline 12 13 PROJECT+PROJECT DOCS DEADLINE (.FR) OTHERS: IN EXAM

4. V 1.0 WARNING A small level of HTML/SQL and basic programming knowledge is presumed. Otherwise, you’ll need extra time of preparation on your own! 3 ECTS = 3*30 hours = 90 hours 13*3*45 minutes = 1755 minutes = 30 hours That means 60 hours of work AT HOME ~20 hours of preparation before the 1 st test, ~20 hours of preparation before the 2 nd test, ~20 hours of preparation for the project 4 OE NIK 2013

5. V 1.0 Expectations Two tests within the semester –1. PHP basic structures and algorithms –2. PHP+MySQL CRUD + Query exercises (extra points are calculated into the second test) Project exercise: –A custom management interface for anything you want –At least 3 tables (connector tables not included) –Not advised: a book/dvd/vhs rental webpage –Authentication (guest/not-logged-in + admin) required, authorization/rbac is not –Aim for total HTML/PHP separation 5 OE NIK, 2014

6. V 1.0 Project Create database that can be used with the PHP project: –Choose a topic –Create ER diagram to plan the data (at least three inter-connected entities) –Create the table structure diagram 6 OE NIK, 2014

7. V 1.0 Project Documentation –Task description –Diagrams / Database description –"Action plan" –Description of noteworthy algorithms –Only in PDF! Source code –Full PHP/HTML/CSS/SQL source –Students will be asked to write small add-ons for the given project 7 OE NIK, 2014

8. V 1.0 Project Everything must be sent in email, compressed into ZIP/ARJ/RAR/7Z/GZ/BZ format szabo.zsolt@nik.uni-obuda.hu, use [PHP] in the subject! Deadline: the day before the presentation, MIDNIGHT Presentation: –For French students: presentation MUST BE on the last lesson (? 13rd of May) –For other students: presentation can be on any of the exam dates, or during the last lesson (13th of May, only if both tests are successful) 8 OE NIK, 2014

9. V 1.0 OE NIK, 2014 9 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples (source: w3schools.com)

10. V 1.0 OE NIK, 2014 10 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples

11. V 1.0 MVC Model – View – Controller: separated layers HTML: format to describe content shown in browsers HTML3: content + style together HTML4: mixed (chaos) HTML5: only content + CSS: style  „The Right Way” 11 OE NIK, 2014

12. V 1.0 HTML HTML is used to describe the content of webpages HTML = Hyper Text Markup Language HTML is NOT a programming language, but it is a markup language A markup language's tokens are markup tags, the different language's are different in the possible tags and the different rules and restrictions: XML, SGML, HTML, SVG 12 OE NIK, 2014

13. V 1.0 HTML The HTML tags are sorrounded by letters, e.g. (which marks the starting point of the document) The HTML tags usually come in pairs, like and (starting and end point of the document, opener and closer tags) Comments: Most of the HTML tags can include other HTML tags and/or attributes (inline vs. block elements) : Meta tags (invisible content)  SEO, Pagerank : Displayed content 13 OE NIK, 2014

14. V 1.0 HTML Page title My First Heading My first paragraph This is a link 14 OE NIK, 2014

15. V 1.0 HTML HTML entity: &entity_name; OR &#entity_number; – < > & © References: –Absolute ( ) –Relative ( ) –External (using protocol definition) ( ) –The trailing slash can be important: vs  small things can affect the performance 15 OE NIK, 2014

16. V 1.0 HTML HTML vs. XHTML: different level of strictness, different complexity and behavior of the browser (XHTML is better and simpler to render – documents are not expected to be valid now [valid vs. well-formed]) There are several approaches and ways to do the same thing (e.g. align to center: HTML3: HTML4: HTML5: ONLY style/CSS) Various browsers interpret and implement the standards in different ways  ??? 16 OE NIK, 2014

17. V 1.0 OE NIK, 2014 17 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples

18. V 1.0 ACID1: HTML+CSS1 (1998) 18 OE NIK, 2014

19. V 1.0 ACID2: HTML + CSS2.1 + PNG 19 OE NIK, 2014

20. V 1.0 ACID2 20 OE NIK, 2014

21. V 1.0 ACID2 (2005) and the browsers Safari 2.0.2 (Webkit, 31/OCT/2005), Konqueror 3.5 (KHTML, 29/NOV/2005), Chrome 1 (Webkit/KHTML, 11/DEC/2008) Opera 9 (Presto, 20/JUN/2006) FF3 (Gecko, 17/JUN/2008) IE8 (Trident, 19/MAR/2009) 21 OE NIK, 2014

22. V 1.0 ACID3: HTML + DOM + JS 22 OE NIK, 2014

23. V 1.0 ACID3 (2008) and the browsers Safari 4 (8/JUN/2009), Chrome 4 (25/JAN/2010) Opera 10 (01/SEP/2009) FF4 (22/MAR/2011) IE8 (20/100), IE9 beta: 32/100 (18/NOV/2009), 95/100 (04/AUG/2010) IE9: 17/SEP/2011 (100 points, but incorrect shadow) From the browsers above, ONLY the Webkit-based browsers (Chrome, Safari, Epiphany/WEB) fulfill the performance requirement (continous animation without breaks and stops) 23 OE NIK, 2014

24. V 1.0 ACID4? More SVG, CSS3; less JS Multicol layout, special backgrounds (e.g. transients, background-combinations) Subpixel/Sub-line accuracy  WaSP dismissed as of 2013, future doubtful...  What can we learn from the ACID tests: every browser ********!  But the user/client will NEVER blaim the browser, only the programmer…  It is not enough to know the standards, we must also be familiar with the browsers 24 OE NIK, 2014

25. V 1.0 OE NIK, 2014 25 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples

26. V 1.0 COLORS 0000000000330000660000990000CC0000FF 0033000033330033660033990033CC0033FF 0066000066330066660066990066CC0066FF 0099000099330099660099990099CC0099FF 00CC0000CC3300CC6600CC9900CCCC00CCFF 00FF0000FF3300FF6600FF9900FFCC00FFFF 3300003300333300663300993300CC3300FF 3333003333333333663333993333CC3333FF 3366003366333366663366993366CC3366FF 3399003399333399663399993399CC3399FF 33CC0033CC3333CC6633CC9933CCCC33CCFF 33FF0033FF3333FF6633FF9933FFCC33FFFF 6600006600336600666600996600CC6600FF 6633006633336633666633996633CC6633FF 6666006666336666666666996666CC6666FF 6699006699336699666699996699CC6699FF 66CC0066CC3366CC6666CC9966CCCC66CCFF 66FF0066FF3366FF6666FF9966FFCC66FFFF 9900009900339900669900999900CC9900FF 9933009933339933669933999933CC9933FF 9966009966339966669966999966CC9966FF 9999009999339999669999999999CC9999FF 99CC0099CC3399CC6699CC9999CCCC99CCFF 99FF0099FF3399FF6699FF9999FFCC99FFFF CC0000CC0033CC0066CC0099CC00CCCC00FF CC3300CC3333CC3366CC3399CC33CCCC33FF CC6600CC6633CC6666CC6699CC66CCCC66FF CC9900CC9933CC9966CC9999CC99CCCC99FF CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF FF0000FF0033FF0066FF0099FF00CCFF00FF FF3300FF3333FF3366FF3399FF33CCFF33FF FF6600FF6633FF6666FF6699FF66CCFF66FF FF9900FF9933FF9966FF9999FF99CCFF99FF FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF 26 OE NIK, 2014

27. V 1.0 HTML ATTRIBUTES AttributeValueDescription classclass_nameThe class of the element id (vs. name) id_nameA unique id for the element stylestyle_definitionAn inline style definition titletooltip_text A text to display in a tool tip 27 OE NIK, 2014

28. V 1.0 HTML4 (HTML5) TagDescription Defines bold text (  strong) Defines big text (  style) Defines emphasized text Defines italic text (  em) Defines small text (  style) Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text (  strike) Underlined (  style) 28 OE NIK, 2014

29. V 1.0 LISTS Coffee Milk Coffee Black hot drink Milk White cold drink 29 OE NIK, 2014

30. V 1.0 TagDescription Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option in the drop-down box Defines a push button 30 OE NIK, 2014

31. V 1.0 FORMS First name: Last name: Male Female 31 OE NIK, 2014

32. V 1.0 FORMS I have a bike: I have a car: I have an airplane: 32 OE NIK, 2014

33. V 1.0 FORMS I have a bike: I have a car: I have an airplane: 33 OE NIK, 2014

34. V 1.0 FORMS I have a: Bicycle Shiny shiny car Flying airplane 34 OE NIK, 2014

35. V 1.0 FORMS Username: GET vs POST HTTP vs HTTPS ID vs name 35 OE NIK, 2014

36. V 1.0 TABLES TagDescription Defines a table Defines a table header Defines a table row Defines a table cell Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer 36 OE NIK, 2014

37. V 1.0 TABLES row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 row 1, cell 1 cell 2 row 2, cell 1 37 OE NIK, 2014

38. V 1.0 TYPICAL WEBPAGE STRUCTURE 38 OE NIK, 2014

39. V 1.0 THE GOD OF Easier to design/change Easier to separate the style and the content using CSS By default a block- level element, but this can be changed float: none, left, right clear:both THE MOST IMPORTANT HTML TAG! 39 OE NIK, 2014

40. V 1.0 OE NIK, 2014 40 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples

41. V 1.0 STYLE (only copypaste into project) HTML3: several tags to affect the style, HTML4: those tags are now deprecated HTML5: those tags are now removed, ONLY CSS AND THE STYLE ATTRIBUTE should be used! We will not explicitly use HTML5, but tags (,, ) and attributes (align, color, bgcolor) that affect the look of a page are discouraged Rules for tag, class, id style="text-align:center; font-weight: bold; font-decoration: underline; color: white; background-color: green; font-family: Times; font-size: 10px” 41 OE NIK, 2014

42. V 1.0 STYLE body { background-color: red } p { margin-left: 20px } This is a paragraph 42 OE NIK, 2014

43. V 1.0 CSS BOX MODEL Weakly supported in the beginning (especially IE5, IE6, IE7 (till 2009)), multiple CSS files were used The new IE versions are a lot better, de pixel-correct webpages are difficult to create Less, Sass, Stylus 43 OE NIK, 2014

44. V 1.0 Practical example... Instead of small CSS/HTML snippets … Create a checkerboard – ONLY HTML+CSS (no js or images) Aim: smallest possible size OE NIK, 2014 44

45. V 1.0 Checker0 – 1765 bytes OE NIK, 2014 45

46. V 1.0 Checker1 – 1215 bytes OE NIK, 2014 46

47. V 1.0 Checker2 – 357 bytes OE NIK, 2014 47

48. V 1.0 Checker3 – 307 bytes OE NIK, 2014 48

49. V 1.0 Checker4 – 241 bytes OE NIK, 2014 49

50. V 1.0 JAVASCRIPT (not required at all) Clientside program (executed by the browser): document.write("Hello World!") 50 OE NIK, 2014

51. V 1.0 EVENTS AttributeValueDescription onchangescriptScript to be run when the element changes onsubmitscriptScript to be run when the form is submitted onclickscriptWhat to do on a mouse click onkeydownscript What to do when key is pressed onkeypressscript What to do when key is pressed and released onkeyupscript What to do when key is released 51 OE NIK, 2014

52. V 1.0 DOM ELEMENT ACCESS document.name vs document.getElementById() var obj=document.getElementById(‘xxx’); obj.style.display=‘none’; The commands and properties are now more or less the same Huge differences in the performance (chrome++, IE--) Old technology, almost extinct  AJAX !!! Frameworks: jQuery, prototype, mootools, YUI, ExtJS … Gnome and Win7 widgets?!?!?!?!?! 52 OE NIK, 2014

53. V 1.0 TYPING Weakly/loosely/dynamically-typed language function wl(what){ document.write(what); document.write(" "); } var a=5; wl(a); var b=a+5; wl(b); var b=b+"5"; wl(b); var c=function(){ alert("HELLO"); }; wl(c); c(); var d=b+c; wl(d); var e=parseInt(d); wl(e); OE NIK, 2014 53

54. V 1.0 SELF REFERENCING var obj = { a: 5, b: 6, arr: [4, 5, 6, 7], str: "Bela", init: function() { this.c = this.a + this.b; return this; } }.init(); wl(obj.str); wl(obj.c); OE NIK, 2014 54

55. V 1.0 REVEALING MODULE PATTERN Lack of proper OOP in JS Workarounds: Prototype inheritance, Revealing pattern OE NIK, 2014 55

56. V 1.0 REALTIME ASYNC COMMUNICATION Not possible in original HTTP Many possible workarounds –Forever Frame (push into hidden iframe) –AJAX, Long polling –Server Sent Events (EventSource, not in IE) –WebSockets Possible alternative: SignalR in.NET – uses WebSockets, fallbacks to other solutions in case of failure We write too much javascript code, browsers are different, implementations are different… We need a soluton! OE NIK, 2014 56

57. V 1.0 jQuery „Write Less, Do More” Main features: –Normalize vendor-specific javascript language elements (e.g. e.which, e.keycode) –Use CSS (and CSS-like) selectors to specify target element(s): tag, class, id, :even, :not, [attr=val] –Define events/execute code for target element(s) –Chain up multiple operations for same element(s) –Easier AJAX manipulation OE NIK, 2014 57

58. V 1.0 jQuery example Instead of simple snippets… Let’s build a tree! Typical task: menus, toolbars, structured multi-level lists OE NIK, 2014 58

59. V 1.0 Problems with trees Typical solution from programs is using recursion or sql CONNECT BY/WITH We do not like recursion… CONNECT BY is not supported by mysql, for example (and the syntax of the WITH clause is horrific) Finding errors in a recursive function or a recursive html element is hard Alternative solution –Build the tree as a sequential list from DIVs –Every div should have two attributes: ID and PARENT –Additionally: NAME and CONTENT –Loop through the list using jQuery, build the tree in the browser OE NIK, 2014 59

60. V 1.0 Style.tree_wrapper { min-height: 50px; border: 1px dotted gray; background-color: #ddd; }.tree_elem { padding-left: 20px; min-height: 50px; border: 1px dotted gray; background-color: #eee; } OE NIK, 2014 60.tree_over { background-color:#fff; }.hidden { display:none; }

61. V 1.0 Set-Up function myscroll(){ $('html, body').animate( { scrollTop: $(".tree_clicked").offset().top-20}, 800); } $(window).load(function(){ $(".tree_wrapper").mouseover(function(){ $(this).addClass("tree_over"); }).mouseout(function(){ $(this).removeClass("tree_over"); }); OE NIK, 2014 61

62. V 1.0 Algorithm $(window).load(function(){ Loop Through Every Node, put to its good location Show initialized state of the tree IF we click on a tree element Hide all tree parts Show sub-tree for clicked element Show root elements Scroll to clicked element IF ends }); OE NIK, 2014 62

63. V 1.0 Loop Through Every Node, initialize var nums=new Array(); $("#treediv").children().each(function(index, element){ // OR: We could use.attr() var parentid=$(element).children(".tree_parentid").first().html(); var nodeid=$(element).children(".tree_nodeid").first().html(); $(element).detach(); $("#subtree_"+parentid).append($(element)); if (nums[parentid] == null) nums[parentid]=0; nums[parentid]++; $("#subnumber_"+nodeid).html(0); $("#subnumber_"+parentid).html(nums[parentid]); }); $(".tree_elem").hide(); $(".parent_0").show(); OE NIK, 2014 63

64. V 1.0 When we click… then, we should scroll … $('.tree_name').css("cursor", "hand").css("cursor", "pointer").click(function(obj){ var $clicked_elem=$(this).parent(); $("#subtree_0").find('.tree_clicked').removeClass("tree_clicked"); //$('.tree_clicked') vs find() vs children() $clicked_elem.addClass("tree_clicked"); [... Show only good tree nodes...] myscroll(); }); OE NIK, 2014 64

65. V 1.0 Show only the good nodes $(".subtree").children(".tree_elem").hide(); var num=0; var $akt_elem=$clicked_elem; do { $akt_elem.children(".subtree").children(".tree_elem").show(); $akt_elem=($akt_elem.parent()); num++; if (num==10) { alert("ERROR: TOO DEEP WHILE CHAIN"); return; } } while ($akt_elem.attr('id')!="subtree_0"); $(".parent_0").show(); OE NIK, 2014 65

66. V 1.0 OE NIK, 2014 66 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples

67. V 1.0 EXERCISE Let's create a basic HTML+CSS combination Header: some image, Nav: Menu with links, Footer: information about the creator, Main: Lorem ipsum 67 OE NIK, 2014

68. V 1.0 OE NIK, 2014 68 PHP+SQL 1. HTML Introduction HTML Rendering HTML Tags CSS, JS Examples

69. V 1.0 OE NIK, 2014 69

70. 70 OE NIK, 2014