Making your Web site more dynamic

1
Making your Web site more dynamic

• Andy Powell
• UKOLN, University of Bath
• a.powell_at_ukoln.ac.uk
• 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 wont 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.
• childrens 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

• lthtmlgt
• ltheadgtlttitlegtsimple formlt/titlegtlt/headgt
• ltbodygt
• ltform name"simpleForm" method"put"
  action"simpleHandler.cgi"gt
• Your email address
• ltinput type"text" name"email"gt
• ltinput type"submit" value"Submit"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

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 dont have to!
• output from CGI usually dynamic and therefore not
  cached

10
CGI (3)
Web browser
Web server
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
  ltwww.cpan.orggt
• 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 OReilly Perl books
• visit ltwww.perl.orggt and ltwww.perl.comgt 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 - ltwww.php.netgt
• 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 OReilly PHP book!
• visit ltuk.php.netgt and ltwww.phpwizard.netgt 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 ltwww.learnasp.comgt

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 ltscriptgt and lt/scriptgt tags
• can also ltlinkgt 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 _at_ 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 OReilly JavaScript book!
• visit ltwww.javascript.comgt
• 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 OReilly Java books!!
• visit ltjava.sun.com/docs/books/tutorial/gt 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 dont
• watch out that
• critical files cant be downloaded or overwritten
• other programs cant 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
• Im interested in poetry
• I want the low-graphics view of the Web site
• dont ask for someones 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
• dont 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 whats 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