Creating a basic Web2.0-application with XHTML, CSS, JavaScript and PHP. Johannes Starlinger Prof. Dr. Ulf Leser

Transcription

1 Creating a basic Web2.0-application with XHTML, CSS, JavaScript and PHP Johannes Starlinger Prof. Dr. Ulf Leser

2 What to expect Some necessary concepts Walk-through development of an exemplary app Basic introduction to the used languages Hopefully: It's easy! Hopefully: It's fun! J.Starlinger - Basic Web2.0 App 3

3 What NOT to expect Thorough introduction of the used languages Advanced techniques Classic slideshow lecture J.Starlinger - Basic Web2.0 App 4

4 Agenda Technology basics Client vs server Mini intro to the languages used Apache webserver quick guide use.public_html Creating a web page: Mockup HTML structure JavaScript functions PHP content generation CSS styles J.Starlinger - Basic Web2.0 App 5

5 Technologies Creating a basic Web2.0-application with XHTML, CSS, JavaScript and PHP J.Starlinger - Basic Web2.0 App 6

6 Technologies Creating a basic Web2.0-application with XHTML, CSS, JavaScript and PHP Web page structure Web page style Web page function Content generation J.Starlinger - Basic Web2.0 App 7

7 Technologies Creating a basic Evalutated on Client Web2.0-application with Evaluated on Server XHTML, CSS, JavaScript and PHP Web page structure Web page style Web page function Content generation J.Starlinger - Basic Web2.0 App 8

8 Client vs Server Evalutated on Client Evaluated on Server J.Starlinger - Basic Web2.0 App 9

9 Client vs Server index.html index.php other.php J.Starlinger - Basic Web2.0 App 10

10 Client vs Server GET file xy index.htm style.css Deliver file xy picture.jpg index.php other.php J.Starlinger - Basic Web2.0 App 11

11 Creating a basic Web2.0-application with XHTML, CSS, JavaScript and PHP J.Starlinger - Basic Web2.0 App 12

12 What you need An idea Graphics software or pen and paper Web server with PHP Apache, lighttpd, nginx, Text editor vim, emacs, notepad, Or WYSIWYG Browser Firefox, Chrome, Opera, Safari, Internet Explorer J.Starlinger - Basic Web2.0 App 13

13 J.Starlinger - Basic Web2.0 App 14

14 Create a Mockup J.Starlinger - Basic Web2.0 App 15

15 Create a Mockup J.Starlinger - Basic Web2.0 App 16

16 Create a Mockup J.Starlinger - Basic Web2.0 App 17

17 Where's all the technology? J.Starlinger - Basic Web2.0 App 18

18 Where's all the technology? XHTML / CSS PHP JavaScript J.Starlinger - Basic Web2.0 App 19

19 Where's all the technology? XHTML / CSS PHP JavaScript Asynchronous JavaScript And XML J.Starlinger - Basic Web2.0 App 20

20 XHTML HyperText Markup Language W3C Standard Uses <tag></tag> to structure content on a web page J.Starlinger - Basic Web2.0 App 21

21 CSS Cascading StyleSheets Language for defining the style of web page elements J.Starlinger - Basic Web2.0 App 24

22 JavaScript / AJAX Scripting language for in-browser execution Accesses objects from browser API AJAX: uses the XMLHttpRequest Object To communicate with the server in the background J.Starlinger - Basic Web2.0 App 25

23 Client vs Server : AJAX index.htm style.css GET file xy picture.jpg Deliver file xy index.php other.php J.Starlinger - Basic Web2.0 App 26

24 PHP PHP Hypertext Preprocessor Scripting language Embeddable into HTML File extension.php Webserver executes PHP when a.php file is requested code is executed on request : version J.Starlinger - Basic Web2.0 App 27

25 Let's go live J.Starlinger - Basic Web2.0 App 28

26 Project Overview Basic page with search form Styles for the page Functionality incl. AJAX Searching Autocompletion Suggestions J.Starlinger - Basic Web2.0 App 29

27 Web App Data Store As files In database In Lucene In Cloud Application logic Provide operations CRUD: Create, Read, Update, Delete J.Starlinger - Basic Web2.0 App 30

28 Web App Data Store As files In database In Lucene In Cloud Application logic Provide operations CRUD: Create, Read, Update, Delete J.Starlinger - Basic Web2.0 App 31

29 Caveats Security Scalability.public_html Web server needs read permissions J.Starlinger - Basic Web2.0 App 32

30 Where to go from here Frameworks and libraries help JavaScript mootools jquery PHP Cake Zend J.Starlinger - Basic Web2.0 App 33

31 Where to go from here Play!.public_html J.Starlinger - Basic Web2.0 App 34