Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Creating a basic Web2.0-application with
XHTML, CSS, JavaScript and PHP
Johannes StarlingerProf. Dr. Ulf Leser
20.04.12 J.Starlinger - Basic Web2.0 App 3
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!”
20.04.12 J.Starlinger - Basic Web2.0 App 4
What NOT to expect
● Thorough introduction of the used languages ● Advanced techniques ● “Classic” slideshow lecture
20.04.12 J.Starlinger - Basic Web2.0 App 5
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
20.04.12 J.Starlinger - Basic Web2.0 App 6
Technologies
Creating a basic
Web2.0-application with
XHTML, CSS, JavaScript and PHP
20.04.12 J.Starlinger - Basic Web2.0 App 7
Technologies
Creating a basic
Web2.0-application with
XHTML, CSS, JavaScript and PHP
Web page structure
Web page style
Web page function
Content generation
20.04.12 J.Starlinger - Basic Web2.0 App 8
Technologies
Creating a basic
Web2.0-application with
XHTML, CSS, JavaScript and PHP
Web page structure
Web page style
Web page function
Content generation
Evalutated onClient
Evaluated on Server
20.04.12 J.Starlinger - Basic Web2.0 App 9
Client vs Server
Evalutated onClient
Evaluated on Server
20.04.12 J.Starlinger - Basic Web2.0 App 10
Client vs Server
index.html
index.php
other.php
20.04.12 J.Starlinger - Basic Web2.0 App 11
Client vs Server
index.htm
style.css
picture.jpg
index.php
other.php
GET file xy
Deliver file xy
20.04.12 J.Starlinger - Basic Web2.0 App 12
Creating a basic
Web2.0-application with
XHTML, CSS, JavaScript and PHP
20.04.12 J.Starlinger - Basic Web2.0 App 13
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
20.04.12 J.Starlinger - Basic Web2.0 App 14
20.04.12 J.Starlinger - Basic Web2.0 App 15
Create a Mockup
20.04.12 J.Starlinger - Basic Web2.0 App 16
Create a Mockup
20.04.12 J.Starlinger - Basic Web2.0 App 17
Create a Mockup
20.04.12 J.Starlinger - Basic Web2.0 App 18
Where's all the technology?
20.04.12 J.Starlinger - Basic Web2.0 App 19
Where's all the technology?
XHTML / CSS
JavaScript
PHP
20.04.12 J.Starlinger - Basic Web2.0 App 20
Where's all the technology?
XHTML / CSS
JavaScript
PHP
Asynchronous JavaScript And XML
20.04.12 J.Starlinger - Basic Web2.0 App 21
XHTML
● HyperText Markup Language ● W3C Standard ● Uses <tag></tag> to structure content on a
web page
20.04.12 J.Starlinger - Basic Web2.0 App 24
CSS
● Cascading StyleSheets ● Language for defining the style of web page
elements
20.04.12 J.Starlinger - Basic Web2.0 App 25
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
20.04.12 J.Starlinger - Basic Web2.0 App 26
Client vs Server : AJAX
index.htm
style.css
picture.jpg
index.php
other.php
GET file xy
Deliver file xy
20.04.12 J.Starlinger - Basic Web2.0 App 27
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 ● http://www.php.net● .public_html : version 5.2.4
20.04.12 J.Starlinger - Basic Web2.0 App 28
● Let's go live
20.04.12 J.Starlinger - Basic Web2.0 App 29
Project Overview
• Basic page with search form
• Styles for the page
• Functionality incl. AJAX
• Searching
• Autocompletion Suggestions
20.04.12 J.Starlinger - Basic Web2.0 App 30
Web App
● Data – Store
● As files ● In database ● In Lucene ● In Cloud
● Application logic– Provide operations
● CRUD: Create, Read, Update, Delete
20.04.12 J.Starlinger - Basic Web2.0 App 31
Web App
● Data – Store
● As files ● In database ● In Lucene ● In Cloud
● Application logic– Provide operations
● CRUD: Create, Read, Update, Delete
20.04.12 J.Starlinger - Basic Web2.0 App 32
Caveats
● Security ● Scalability ● .public_html
– Web server needs read permissions
20.04.12 J.Starlinger - Basic Web2.0 App 33
Where to go from here
● Frameworks and libraries help – JavaScript
● mootools ● jQuery
– PHP ● Cake ● Zend ● ...
20.04.12 J.Starlinger - Basic Web2.0 App 34
Where to go from here
● Play! ● .public_html ● http://de.selfhtml.org ● http://www.google.de
Related Documents
