british columbia institute of technology
comp 1850 | web design and development one
lecture eleven
agenda
- server-side includes
- php exercise
- web measurement and analytics
- life after comp 1850?
- 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 bcitwebdev.com
- 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
- essentially, we are talking about the behaviour of a page, and how it changes based on user interaction
- behaviour can be altered using client-side scripting and/or server-side scripting
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
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:
measurement
- Most websites have some set of goals or objectives in mind: sell stuff, educate, generate leads or prospects, provide support, etc.
- Now that you have a rudimentary understanding of how to build sites, you'll want to make sure that you are thinking about these goals and how to measure whether you are meeting them.
- Servers generate a great deal of data, and there are tools to help you understand what people are doing.
- In the early days people were only concerned with hits (how many requests are made to your server) - now we want to know:
- where people are coming from
- what search terms they used to find us
- what search terms they use on our site
- how long they stay on our site
- how quickly they leave
- what paths they're taking through our site
- whether our ad campaigns are working
- ...and so on
Luckily there are some great tools to help us visualize all this, and address any issues our visitors may be having.
Complete Beginner's Guide to Web Analytics and Measurement:
- what is it?
- who to follow (with links to their twitter accounts);
- tools of the trade;
- links to books.
A crucial part of the web strategy toolbox; lots of opportunities for people who can understand the "how and why" of what people are doing on websites.
set up a google analytics account
- Already have a Gmail account? Go here to set up a Google Analytics account.
- No Gmail account? Start here. Then move on to the link above.
- Once you've logged into Analytics, click on the Sign Up button in the Sign Up for Google Analytics box.
- Add the URL for your website (e.g., http://students.bcitwebdev.com/sharpener/) and complete the other required information.
- On the Analytics Tracking Instructions page select A Single Domain under What are you tracking? Then copy the tracking code in the textarea.
- Download your homepage from the student server and add the tracking code as instructed. Added it to all pages you want Google Analytics to track.
- Save the page and uplaod your page back to the server. Go back to the Analytics Tracking Instructions page and click Save and Finish.
- You'll be redirected to your account overview page. It will take a while for the tracking status to be confirmed, so in the meantime, review the article above or some of the course options below.
life after comp 1850?
- COMP 1950
- Official followup to COMP1850
- COMP 2015
- Introduction to JavaScript and jQuery
- COMP 3015
- Introduction to PHP
- COMP 1630
- Relational database design and SQL
- COMP 1956
- Creating Web Graphics 1
- COMP 1011
- UX/UI Development
- COMP 2251
- Website Optimization with Google Analytics
- Web Technologies
- many of the above courses will lead you towards an Associate Certificate in Web Development or Web Application Software Development.