making your web site more dynamic andy powell ukoln, university of bath [email protected] ukoln...
TRANSCRIPT
Making your Web site more dynamic
Andy PowellUKOLN, University of Bath
www.ukoln.ac.uk
UKOLN is funded by Resource: The Council for Museums, Archives and Libraries, the Joint Information Systems Committee (JISC) of the Higher and Further Education Funding Councils, as well as by project funding from the JISC and the European Union. UKOLN also receives support from the University of Bath where it is based.
2
Overview• ‘dynamic’ means ‘interactive’!• handling Web forms• server-side programming
• CGI scripts - Perl, PHP, ASP
• client-side programming• Javascript, Java
• database connectivity• security• personalisation - authentication, cookies• taster session only… no details, but some pointers
to further information.
3
Aims
• by the end of the session you should know what• CGI,• Perl, PHP, ASP,• JavaScript, Java,• ODBC and cookies
are… but you won’t necessarily know how to use them!
4
Why interact?
• registration and requests for information• allow people to register for meetings, ask
to be added to mailing lists, ...• feedback and user-surveys
• allow people to comment on your library service
• dynamic information• allow people to ask questions like...
– when are my books due back?– how much is my overdue book going to cost?!
5
Why interact? (2)
• within particular services might want to solicit contributions from people, e.g.• children’s site… allow kids to submit poems
or stories• local history site… allow people to contribute
personal recollections of a region or period• business/community site… allow people to
supply details of local services• library site… allow people to recommend
books or CDs, share reading lists, etc.
6
Simple Web form<html>
<head><title>simple form</title></head>
<body>
<form name="simpleForm" method="put" action="simpleHandler.cgi">
Your email address:
<input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
7
Interacting with Web Forms
• typically need to generate the form (which may be a normal static Web page), then• validate user input• process user input• generate a response
dynamically.• these three steps may be done within the
Web browser (client-side) or within the Web server (server-side) or some combination of both.
8
CGI
• Common Gateway Interface• mechanism for a Web browser to send
data to a Web server• allow browser to submit data to a
program running on the server• program is often called a ‘CGI script’• typically written in Perl, PHP or ASP• can also be a ‘real’ program (e.g.
written in C)
9
CGI (2)
• used primarily for form submission• can also be used to upload local files• ‘CGI’ URLs often contain ‘?’ and ‘&’
characters - but don’t have to!• output from CGI usually dynamic and
therefore not cached
10
CGI (3)
Webbrowser
Webserver
Webform
Results
Data sentusingCGI
File
Database
11
CGI programming - Perl
• Perl - Practical Extraction and Report Language
• developed initially as general purpose (UNIX) utility
• freely available on all platforms (though most often used under UNIX)
• very good at manipulating textual data• developed at roughly same time as the Web• de facto CGI script language?• interpreted - so fast development cycle
12
Perl (2)
• typically, a new Perl process is started for each new CGI script, so can be heavy(ish) on resources
• many modules are freely available to base work on, e.g. CGI, LWP (general Web library), HTML, XML, database connectivity, etc. See CPAN <www.cpan.org>
• many existing CGI Perl scripts to crib/steal from
13
What do I need to do?
• install Perl (if you have a UNIX box, chances are that it is already installed!)
• install at least the CGI.pm Perl module from CPAN
• configure your Web server to recognise files ending in ‘.pl’ (and ‘.cgi’) as Perl programs
• buy one of the O’Reilly Perl books• visit <www.perl.org> and <www.perl.com>
for tutorials, tips and example code
14
CGI programming - PHP
• PHP - originally stood for Personal Home Pages (I think!), now not expanded
• HTML embedded scripting language• PHP commands are embedded into
the HTML page• hidden inside HTML comments
• freely available - <www.php.net>• very easy to learn• lots of code available
15
PHP (2)
• tight integration with databases - particularly with MySQL (a free relational database)
• quick development time for database driven applications
• available under UNIX and Windows platforms
16
What do I need to do?
• install PHP, current version is PHP 4.0.1• configure Web server to recognise files
ending in ‘.php’, ‘.php3’ and ‘.php4’ as PHP-enabled pages
• buy the O’Reilly PHP book!• visit <uk.php.net> and
<www.phpwizard.net> for tutorials and sample code
17
CGI programming - ASP
• ASP - Active Server Pages• developed by Microsoft• HTML embedded scripting language• primarily based on VBScript,. Though can use
JavaScript as well• bundled in with MS Web server products, e.g.
IIS• free and commercial UNIX version available
(though not sure about compatibility)• GUI development tools available
18
What do I need to do?
• if you are using Microsoft Web server... nothing! It should all be ready to go.
• If you are using a UNIX-based server, use Perl or PHP!
• check your Microsoft documentation• visit <www.learnasp.com>
19
JavaScript
• primarily a browser programming language (note: can also be used server-side)
• simple language - not Java• object-oriented approach• code typically embedded into HTML Web
page between <script> and </script> tags• can also <link> to external JavaScript file• developed originally by Netscape• a.k.a ECMAScript (JavaScript as
standardised by ECMA)
20
JavaScript and forms
• JavaScript typically used in combination with forms to validate input
• simple ‘event’ model, e.g.• use ‘onChange’ or ‘onClick’ methods to
validate input before sending data to server-side CGI script
• check that email addresses have ‘@’ in them
• check that numbers contain only digits• check that mandatory fields are filled in
21
What do I need to do?
• nothing to install! JavaScript is supported by the major graphical browsers (at least!)
• buy the O’Reilly JavaScript book!• visit <www.javascript.com>• try it!• warning - if you enhance your Web forms
using JavaScript make sure that they still work if JavaScript is disabled in the browser!
22
Java
• high level language - simple, supposedly write-once/run anywhere, supposedly secure.
• developed by Sun - not standardised• applications - stand-alone• applets - embedded into browser• Java compiled into intermediate language
which is then interpreted by the Java Virtual Machine (JVM - machine specific)
23
Java (2)
• applets have not taken off widely• inconsistencies between JVM
implementations• resource requirements
• can be embedded into server-side applications - Java Server Pages
• ‘Java Beans’ provides access to distributed objects
• good support for database connectivity• good GUI development environments available
24
What do I need to do?
• buy one of the O’Reilly Java books!!• visit <java.sun.com/docs/books/tutorial/>
for introduction to Java• install Java 2 SDK (Software Developers
Kit)• try it by hand-coding using text editor
initially• consider buying GUI development tool if
required later
25
Database connectivity
• typically, data from a Web form is:• processed directly and used as basis
for response to the user• e-mailed to someone for further
processing• saved to a file (for further processing!)• processed/stored in a database
26
ODBC
• ODBC - Open Database Connectivity• developed by Microsoft - database API• generic interface to databases• a CGI script developed using ODBC and
SQL should work against any SQL database that offers an ODBC driver• Oracle, MS-Access, MySQL
• Perl, PHP and ASP all offer access to databases via ODBC
27
Security
• a word of warning...• Web sites that offer interaction thru CGI
scripts are inherently a little more insecure than sites that don’t
• watch out that:• critical files can’t be downloaded or
overwritten• other programs can’t be uploaded or
started unintentionally
28
Personalisation - why?
• give your users a personalised view of your Web site - a ‘MyLibrary’ service
• remember personal preferences across sessions• I’m interested in poetry• I want the low-graphics view of the Web
site• don’t ask for someone’s email address this
session if you asked them for it last time
29
Simple approach
• rather than tailoring for individuals, provide views based on different user-groups
• develop 3 views of your Web site• business community• kids• general
• offer a pull down menu on the home page offering the 3 choices
• use JavaScript to switch between the 3 views
30
Using cookies
• remember preferences using cookies• ‘cookies’ are small chunks of information
that are stored in the browser but shared with the server
• developed by Netscape but widely adopted• typically, cookies are only shared with the
server that set them• support for cookies in Perl, PHP and ASP• see books/tutorials for details
31
Cookie example
• use Web form to ask for email address• store email address in cookie and send to
Web browser• next time the browser visits your site, the
cookie with the email address in it will be passed to you
• note - the cookie containing the email address will not be passed to any other server
32
Database approach• use Web form to ask for more detailed information• store it in a database• ask for a username and password to allow updates• store username/password in database as well• email address often used as preferred username
(easy to remember)• Tip 1 - Send details to email address and wait for
confirmation before adding to the database - ensures that email address is correct!
• Tip 2 - use cookie to store username or username and password to save user typing them every visit
33
Do I have to know all this?
• well… not necessarily!• useful to know the basics• don’t need to develop CGI scripts yourself
• products like Microsoft Frontpage come with bundled suites of CGI utilities - form submission, etc. No development required!
• use externally hosted services (later talk)
• build on what’s already out there - chances are that someone has already developed the CGI script you need
34
And finally...
• recommendations for small scale developments
• if you are in a Microsoft environment, use• IIS as server• ASP for scripting• MS-Access on NT server as database
• if you are in a UNIX environment, use• Apache as server• PHP for scripting• MySQL as database