lecture eleven
agenda
- server side includes
- static vs. dynamic documents
- server-side scripting
- perl & cgi
- php
bonus lecture:
- what are frames?
- creating framesets
- targeting links to frames
- project work
server-side includes
- a server function that allows for real-time echoing of information to the browser such as:
- time
- date
- file information
- conditional execution of documents
- How do they work?
- a series of characters (called tokens) are included in your HTML
- as page is processed by the HTTP server, any tokens are sent to the SSI engine
- the processed result is then either output as HTML, or some server side function is instantiated.
- your server must have the SSI module activated (there are SSI modules for almost every web server in existence)
- sometimes you may need to use a different extension on your HTML (usually SHTML) so that the server will understand that it needs to process embedded SSIs
- can be a powerful tool for web development:
- further lightens your code. A small SSI statement can take the place of a large, re-used codeblock
- this can save giant amounts of code footprint on your site!
- code changes made easy. If you have your navigation built into an SSI, you can make 1 change and all pages that subscribe to that SSI will change.
- execute script and applications within HTML. If you need to have live data on your site, you can write a mini-application that will execute each time you deliver a page. BCIT's navigation system runs on this.
- one of the most powerful types of server-side includes can take a chunk of your code and replace it with this:
<!--#include virtual="filename.ssi"--> - exercise:
- Download folder for week11 from signalflare server
- Using the notation above replace the navigation on all pages in the includes folder with a server-side include. Don't forget to rename the files (i.e., .shtml).
- Add a new item to the navigation bar to see how it appears on all pages (note: you don't have to create an actual page to see the link).
- Use server-side includes to replace the footer and/or header portion of the pages.
- more on ssi:
static vs. dynamic documents
- static documents can be created with markup languages and presentation rules:
- markup languages (HTML), enables the display of structured data in a textual form
- "tags" or "marks" indicate document elements
- used for structuring content:
<p>,<h1>, etc. - presentation rules can be applied using CSS
- dynamic documents require actions to be associated with events that may be initiated by the user:
- the opening of a web page
- hovering over an area
- submitting information via web forms
- the click of a button
- dynamic documents can change on-the-fly as various content sources change:
server-side scripting
- server does all the processing of script
- does not matter which browser is being used
- can output a particular version of pages to cope with browser incompatibilities
- access to files and databases on server
- data sources do not need to be web accessible
- information can be accessed, retrieved, processed and stored through technologies such as databases and XML
- backend systems can be accessed to facilitate transactions and true interactivity
- can be written in a wide variety of languages:
- language chosen will depend on the server configuration
- common uses:
- password protection
- form processing
- dynamically building and displaying pages created from a database
perl & cgi
- Practical Extraction and Report Language
- open source server side programming language
- extensively used for web scripts and to process data passed via the Common Gateway Interface (CGI) from HTML forms:
- simple protocol that allows a web or HTTP server to talk to a program or script
- Perl is a fairly high-level programming language and is a popular choice for programming server-side scripts:
- Developed by Larry Wall in 1987
- Rich, easy-to-use text-processing capabilities
- Alternative to the tricky C programming language
- Powerful alternative to Unix shell scripts
- Lots of built-in functionality
- Perl resources:
php
- originally called "Personal Home Page" tools
- created by Rasmus Lerdorf, and released in June 1995
- now more commonly known as the "PHP Hypertext Preprocessor"
- you can configure your web server to identify HTTP requests that contain PHP
- interpreter processes the PHP Scripts, passes results back to Client
- whereas Perl is a standalone Scripting Language (i.e., separate Perl programs are created), PHP is a server-side scripting language that can be embedded right in your HTML
- syntax takes inspiration from several popular languages - bits of C, Java and Perl - and adds some unique PHP things for good measure
- "The goal of the language is to allow web developers to write dynamically generated pages quickly." (http://www.php.net/)
- advantages:
- it is easy to implement, easy to learn, and easy to use
- it runs on almost any web server on almost any platform currently available
- it is free
- PHP resources:
in-class exercise
Your instructor will walk you through some basic PHP scripts, including the creation of a state-based navigation system like the one used on the class website.
what are frames?
- frames are a way of dividing a page (or frameset) into multiple pieces
- each piece is its own html page
- frameset is additional, separate page that defines each of the other frames
- each frame could theoretically be viewed independently of the frameset; but it is the entire grouping that makes up the page, conveys meaning and provides utility
- think of frames as a window with individual panes
- each pane shows different information, and you decide how many panes your window will have
- not in use as much nowadays because:
- why create 5 separate pages when you can create one?
- reduces server load
- can be tricky to link
- hard to bookmark
- where frames come in handy:
- application development
- intranets
creating a frameset
- start by using a slightly different "doctype" statement:
<!doctype html public "-//w3c//dtd html 4.0 frameset//en"> - provide a "head" and "title" tag as usual
- leave out the "body" of the document
- specify the layout of your frameset in terms of "rows" or "cols":
<frameset cols="a,b"> - then specify the characteristics of each frame:
<frame name="left" src="left.html">
<frame name="right" src="right.html"> - close the frameset:
</frameset> - every frame must have a source for the frameset to work
- every frame must have a name to facilitate proper linking
- frame attributes can be adjusted at both the "frameset" and "frame" level:
- border (frameset)
- frameborder (frameset)
- marginwidth (frame)
- marginheight (frame)
- scrolling (frame)
- noresize (frame)
targeting links to frames
- once you have made your frameset, links from one frame can load new pages in a different frame:
<a href="product1.html" target="framename">link text</a>