V 1.0 OE NIK, PHP+SQL EXPECTATIONS

V 1.0 Schedule (Lessons) OE NIK, Expectations, 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

V 1.0 Schedule (Homeworks) OE NIK, THEOREMS 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 PROJECT+PROJECT DOCS DEADLINE (.FR) OTHERS: IN EXAM

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

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

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

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

V 1.0 Project Everything must be sent in , compressed into ZIP/ARJ/RAR/7Z/GZ/BZ format 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

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

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

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

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

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

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

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

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

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

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

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

V 1.0 ACID2 20 OE NIK, 2014

V 1.0 ACID2 (2005) and the browsers Safari (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

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

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

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

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

V 1.0 COLORS CC0000FF CC0033FF CC0066FF CC0099FF 00CC0000CC3300CC6600CC9900CCCC00CCFF 00FF0000FF3300FF6600FF9900FFCC00FFFF CC3300FF CC3333FF CC3366FF CC3399FF 33CC0033CC3333CC6633CC9933CCCC33CCFF 33FF0033FF3333FF6633FF9933FFCC33FFFF CC6600FF CC6633FF CC6666FF CC6699FF 66CC0066CC3366CC6666CC9966CCCC66CCFF 66FF0066FF3366FF6666FF9966FFCC66FFFF CC9900FF CC9933FF CC9966FF CC9999FF 99CC0099CC3399CC6699CC9999CCCC99CCFF 99FF0099FF3399FF6699FF9999FFCC99FFFF CC0000CC0033CC0066CC0099CC00CCCC00FF CC3300CC3333CC3366CC3399CC33CCCC33FF CC6600CC6633CC6666CC6699CC66CCCC66FF CC9900CC9933CC9966CC9999CC99CCCC99FF CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF FF0000FF0033FF0066FF0099FF00CCFF00FF FF3300FF3333FF3366FF3399FF33CCFF33FF FF6600FF6633FF6666FF6699FF66CCFF66FF FF9900FF9933FF9966FF9999FF99CCFF99FF FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF 26 OE NIK, 2014

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

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

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

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

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

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

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

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

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

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

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

V 1.0 TYPICAL WEBPAGE STRUCTURE 38 OE NIK, 2014

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

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

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

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

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

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,

V 1.0 Checker0 – 1765 bytes OE NIK,

V 1.0 Checker1 – 1215 bytes OE NIK,

V 1.0 Checker2 – 357 bytes OE NIK,

V 1.0 Checker3 – 307 bytes OE NIK,

V 1.0 Checker4 – 241 bytes OE NIK,

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

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

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

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,

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,

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

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,

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,

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

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,

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, tree_over { background-color:#fff; }.hidden { display:none; }

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,

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,

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,

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,

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,

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

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

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

V 1.0 OE NIK,

70 OE NIK, 2014