1. Information and Introductions

What We Will Cover

^ top

1.1: Introduction to Server-Side Programming

Learner Outcomes

At the end of the lesson the student will be able to:

  • In general terms, discuss how web applications work
  • Identify the difference between static and dynamic web pages
  • Discuss what is required to develop webapps
  • Discover what they will learn in this course

^ top

1.1.1: About Web Applications

  • Over the last decade, the World Wide Web has changed tremendously
  • It has grown from being a simple repository of information to providing a tremendous number of services and applications
  • People use the Web for such diverse activities as entertainment, education, news, business and socializing
  • The software that provides these types of activities are known as Web applications, or "webapps"
  • Common webapps include Webmail, online retail sales, online auctions, wikis, discussion boards, Weblogs, and even some MMORPGs
  • Most, if not all, webapps use a database to store information
  • Modern webapps use programs on both the client and server to provide the application
  • This course focuses on the server side of webapps using PHP and MySQL

Web Application Examples

Brief History of the Internet, the Web and Webapps

  • 1969: Internet started by US DOD with 4 computers -- called ARPANET
  • 1983: Internet (1000 computers) split into two parts -- military and university
  • 1987: High-speed backbone added to solve performance issues (10K computers)
  • 1989: Tim Berners-Lee started developing HTTP and HTML Web pages
  • 1991: CERN publicizes the new World Wide Web project
  • 1993: First graphical browser (Mosaic) invented by Marc Andreessen and Eric Bina
  • 1995: Internet opened to commercial interests
  • 1998: E-commerce becomes a "hot" technology
  • 2004: Web 2.0 emphasizes business revolution through the use of webapps
  • 2005: The term "Ajax" coined for asynchronous webapps
  • 2007: HTML 5 working group chartered at W3C

More Information

^ top

1.1.2: How Web Applications Work

  • A web applications is an application that is accessed via a web browser over a network
  • Web browsers display information based upon Hypertext Markup Language, or HTML
  • Information is transmitted over the network using Hypertext Transfer Protocol, or HTTP
  • When you access a file on the Web several steps occur
  • Many of these steps are invisible to the user
client-server
  1. A user enters a query (URL) into a browser, also known as a client
  2. The browser connects to the server and sends an HTTP request that includes the name of the HTML file
  3. The web server replies to an HTTP request by sending a message known as an HTTP response back to the browser
    • For a static web page, the HTTP response includes the HTML document
  4. The browser receives the results and displays them to the user

How Dynamic Web Pages Work

  • A dynamic web page is one or more web pages that changes depending on some condition such as user input
  • One way to generate a dynamic web page is with a server-side script

    Dynamic web pages

  • When a web server receives a request for a dynamic web page, the server passes the request to the webapp
  • The webapp generates a response, usually an HTML document, and returns it to the web server
  • The web server, in turn, wraps the generated HTML document in an HTTP response and sends it back to the browser.
  • The browser doesn't know or care whether the HTML was retrieved from a static HTML file or was dynamically generated by the web application.
  • Either way, the browser displays the HTML document that is returned.

More Information

^ top

1.1.3: Developing Web Applications

  • To develop webapps, a Web designer needs to learn how to program
  • Webapp programming occurs in two places: the client and the server

Programming the Server

  • When a client requests a page from the server, you program the server to respond differently depending on the information received from the client
  • The choices are coded into a program running on the server
  • You can run almost any programming language on the server
  • However, one of the most popular is PHP, which we will use in this course
  • One advantage to programming on the server is the ability to use a database
  • There are many databases and we will use one of the most popular: MySQL

Programming the Client

  • When the server delivers information to the client, it can deliver programming code as well
  • This programming code runs in the browser and is what makes most animations and visual effects possible
  • Almost all browsers run a scripting language called JavaScript
  • A scripting language is a programming language that controls a software application
  • To learn JavaScript, you can take our course: CIS-132: Introduction to Internet Programming
  • CIS-132 is offered in the Fall Semester of each year

^ top

1.1.4: Examples of What You Will Learn

  • Let us take a look at some examples of what you will learn in this course
  • Starting with the third assignment, all the homework assignments are directed toward working on your own individual webapp project
  • I will provide instructions on what part of the webapp you will work on for each assignment
  • Every student will turn in different work from any other student
  • At the end of the course, you will have a few weeks to finalize your project
  • During finals week, you demonstrate your project to show what you learned during the course
  • For examples of projects from prior semesters see: CIS-165PH Hall of Fame

Example E-commerce Web Site

  • To demonstrate the course material, your instructor developed an example e-commerce webapp
  • Artzy Art Supplies is an entirely fictitious art supply store
  • It serves as an example during many of the lectures
  • The features of Artzy Art Supplies include:
    • Product Catalog: listing of art supply products retrieved from a database
    • Shopping Cart: collect user selected items from the product catalog
    • Members Only: A protected page that can only be viewed by registered members
    • Login Page: Username and password based security chacked against a database
    • Registration Page: Online registration to collect user information and store it in a database
    • Secure Logout: A page to logout securely
  • These are examples of what you will learn and can do at the end of the course
  • The webapp you develop during the course is up to you

^ top

1.1.5: Summary

  • The World Wide Web has changed dramatically over tha last few years
  • To implement many of the latest techniques, you need to lear how to program
  • Internet programming is done on both the client and the server
  • This course covers both, but focuses primarily on server-side programming
  • For more in-depth client-side programming, you can take a course in the Fall semester: CIS-132: Introduction to Internet Programming
  • During this course we will learn the basics of database programming and using PHP for server-side programming

Check Yourself

  1. What is a "webapp"?
  2. What is a dynamic web page?
  3. How do Web applications work?
  4. What is the difference between static and dynamic Web pages?
  5. Webapps programs run on what two locations?

^ top

Exercise 1.1: Introductions and Questions

Use the next 10 minutes to complete the following.

  1. Join a group of 3-4 people and introduce yourself to each other.
  2. As a group, develop one "burning question" about the course.
  3. Select one member from your group as a spokesperson to describe your single question to the class.

Note: You do not have to turn in the answers to this exercise. However, you are expected to submit answers to subsequent exercises.

^ top

1.2: Exploring the Course

Learner Outcomes

At the end of the lesson the student will be able to:

  • Navigate the course web site
  • Discuss how the course is administered
  • Know when assignments are due

^ top

1.2.1: Some Useful Information and Resources

  • How To Get Your Cabrillo Login and Password: You need your login and password to access classroom and lab computers, as well as Blackboard
  • www.edparrish.com has a link to the course web site and has contact information for the instructor
  • Course information describes the course and it grading policies
  • Home Page describes the online content of the course
  • Schedule lists the planned lesson-topics and assignments
  • Blackboard is where you turn in assignments, take quizzes, post discussion comments and can look at your grades and written feedback on assignments
  • Blackboard Help for instructions and tutorials on using Blackboard
  • Submitting Files: instructions for submitting files to Blackboard
  • Site Search and Advanced Search for when you cannot easily find the information
  • Class Expectations describes what you can expect from me and what I expect from you during the course
  • College Regulations: a few reminders to keep you out of trouble ;)

Software Needed

  • A plain text editor for composing HTML and PHP code such as:
  • You can use any browser you like for your web browsing
  • PHP and Apache web server (see How to Install PHP and MySQL)
    • We will install PHP and MySQL later today

Browser Web Development Add-ons and Tools

Recommended Firefox Add-ons

  • FireBug: for debugging errors in HTML, CSS and JavaScript
  • IE Tab: to see how pages look in IE (Windows only)
  • Web Developer: various tools for web development

Email

  • All students are requested to have an email account and email is required for online students
  • Please make sure your email address is correct in WebAdvisor
  • When sending me an email please state your name, course number and if you are in the lecture or online section
  • Please make sure your emails are professional, that words are spelled correctly and that you use good grammar
  • If you would like help with your work, please email me all the files related to your work in a single zip file
  • If you expect a reply, make certain your spam filter is not removing my emails
  • If you have not received my reply with a day, then check your spam folder before sending me another email

Open Lab Hours

  • The schedule of classes lists open lab hours that you must arrange:

    +5 hr 15 min open lab per week.

  • These open lab hours are at times of your choosing in the Computer Technology Center (CTC)
  • The CTC is open, supervised and available for use as shown here: Computer Technology Center Hours
  • It is your responsibility to make use of these hours every week to work on your exercises and programming projects
  • All students enrolled in the lecture section must fill out and sign the "Student Hours by Arrangement" before you leave today
  • Anyone enrolled in the lecture section who does not complete the form will be dropped from the course
  • Your instructor for these hours is listed as Barbara Durland, but other instructors and lab assistants may be available to help you
  • Your instructor will be in the lab as shown here: Instructor's Page

^ top

Exercise 1.2: Explorations

In this exercise we explore the course web site to see how many of our questions we can answer. We will discuss the questions and answers after you have a chance to explore.

Specifications

  1. Work with no more than one other person on this exercise.
  2. Prepare a text file named: questions.txt.
  3. Copy the following "Exercise Questions" into the text file.
  4. Search the course web site to find answers to the questions.
  5. Record the question and its answer in the text file.
  6. When finished, do not forget to upload your file to Blackboard as part of assignment 1

Exercise Questions

  1. What is your personal Blackboard login (not your password)?
  2. Where is the instructor's contact information located?
  3. What is the closest building next to the instructor's office?
  4. What do you expect to be able to accomplish by the time you complete this course?
  5. What is the URL where homework assignments are listed?
  6. Where do you turn in homework assignments?
  7. How much time should you expect to spend on this course outside of the classroom and reading the lecture notes?
  8. What is scholastic dishonesty?
  9. What is an example of acceptable help and an example of unacceptable help on assignments?
  10. Why is eating and drinking prohibited in the classroom?
  11. What are three things you should do to succeed in this course?
  12. What software do you need to use for your programming assignments?

^ top

1.2.2: Suggestions for Success in This Course

  • You can learn the course material in many different ways
  • However, by following the guidelines below you will get a clearer understanding of Internet programming
  • Also, you will get the best possible grade

Reading the Textbook

  • To start your learning experience, preview or skim the assigned reading by:
    • Reading the main title
    • Reading all subtitles
    • Looking over the illustrations
  • From this preview, you should know the topics you will be learning
  • Next, you should read the textbook more thoroughly
  • As you progress, underline key points and make notes in the textbook margins
    • Writing in the book reduces its resale value
    • However, it does help you learn and get a better grade
    • Which is a more important?

Lecture Material

  • Preview or skim the lecture notes
  • Note the Learner Outcomes for each lesson and concentrate on learning them
  • Note the relationships between the lecture notes and the textbook
  • Lecture notes may highlight the text or may present information in a new way
  • Decide if you need to attend the lecture
  • If you attend the lecture, ask questions and participate in the discussions
  • Complete all the exercises as you work through the lecture notes
  • After completing an exercise, think about what else you can do with the coding techniques you used
  • Do not forget to upload your completed exercises as part of each assignment

Posting Discussion Topics

  • Look through the discussion questions and find one in which you are interested
  • Read about and research the discussion question in more depth
  • Post your original discussion comments in Blackboard
  • Read through the other discussion postings and respond to at least one
  • If you are the first discussion posting, you may need to wait a few days before you can respond to another posting

Completing Assignments

  • To really learn the material, you need to work with it
  • Assignments are designed to let you experience the material more deeply
  • Programming requires deep though and you should plan to work somewhere you will not be interrupted for several hours
  • Read the assignment and any supplementary material carefully before you start
  • If the assignment directs you to web sites, then read that information as well
  • When you have analyzed the problem and developed a plan, then start writing the code
  • Make sure you submit your assignments before the due date
  • Late assignments are not accepted without a compelling reason
  • Submitting anything earns at least partial credit

Preparing for Quizzes

  • After you complete the assignment you should be ready to take the quiz
  • To study for each quiz, review the summary and answer the Check Yourself questions
  • If you cannot answer the questions, then follow up and find the answers
  • If you cannot find the answer in the lecture notes or text, then ask a classmate or the instructor
  • When you seem ready, take the graded quiz

^ top

1.2.3: Summary

  • www.edparrish.com has a link to the course web site and has contact information for the instructor
  • Course information describes the course and it grading policies
  • Home Page lists the online content of the course
  • Schedule lists the planned lesson-topics and assignments
  • Blackboard is where you turn in assignments, take tests and can look at your grades and get feedback on assignments
  • Class Expectations describes what you can expect from me and what I expect from you during the course
  • To succeed in this course, you need to complete some work before each class
    • Read the textbook
    • Preview or skim the lecture notes
    • Decide if you need to attend the lecture
  • If you attend lectures, ask questions and participate in the discussions
  • After learning the material, complete your assignment and turn it in before the due date
  • After completing your assignment, study for and take the graded quiz
  • Also, you need to post an online discussion topic and response

Check Yourself

  1. What are the online components of this course?
  2. What homework do you generally need to complete each week?
  3. Does the lecture portion cover everything you might need in a homework assignment?
  4. How much time should you expect to spend on homework?
  5. Where can you work on your homework while you are at Cabrillo?
  6. Where is the Computer Technology Center (CTC) located?
  7. What software do you need to use for your programming assignments?

^ top

1.3: Exploring the Technology

Learner Outcomes

At the end of the lesson the student will be able to:

  • Name the software component that is required on the client of any web application.
  • Name the software components that are usually required on the server of any web application.
  • Distinguish between static web pages and dynamic web pages.
  • Locate the servers running on their computer
  • Describe what PHP and MySQL can do
  • Describe how the web server, PHP and MySQL interact

^ top

1.3.1: Webapps and Networking

  • Webapps are accessed over a network using a web browser
  • Networking is about moving data from one computer to another
  • Internet: a set of networks connected together with routers
  • Routers: special computers that move data between networks
  • Computers need some way of identifying other computers on the Internet
  • Computers contact each other using what is known as the IP address
  • An IP address is a series of numbers like: 172.100.0.1
  • Since numbers are hard for people to remember, the numbers get resolved to domain names
  • For example: edparrish.com
  • Once you reach a specific computer on the Internet, you still need find the particular document ("page") in which you are interested
  • You specify a particular computer and page name using a Uniform Resource Locator ("URL")

URLs

  • Uniform Resource Locator (URL): a standard way of specifying an address on the Internet.
  • URLs consist of two main parts separated by a colon
http://edparrish.com:80/cis165/09s/lesson01.php?plain#1.3.1
\___/  \___________/ \/\______________________/\____/\____/
  |          |        |             |           |      |
protocol    host     port          path       query anchor/
                                                   fragment
  • The part before the first colon specifies the scheme or protocol
  • The part after the colon is interpreted according to the scheme
  • Usually, the two slashes after the colon (//) introduce a hostname
  • Hostnames on the Internet end in a top-level domain name, such as .com
  • Hostnames can be followed by a colon and a port number, for example: 
    http://edparrish.com:80/
  • Usually a port number is omitted and the standard port number is used
  • After the hostname comes the path, which is usually the path of a file from the document root on the server
  • After the path, a URL may have a query or anchor (fragment)
  • The query passes information to a script for processing
  • An anchor tells the browser to jump to a position on the page
  • For more information see: Uniform Resource Identifier (URI): Generic Syntax

Finding Localhost

  • The name given to the server running on your computer is "localhost"
  • The term localhost means "this computer"
  • The localhost Web server is assigned the IP address: 127.0.0.1
  • Thus you can access the local server using either the name localhost or the IP address
  • For example, to access the Web page named index.php in the root directory of your local server, you can use any of the following addresses: 
    http://localhost/index.php
http://127.0.0.1/index.php
  • Since http:// is assumed by most browsers, you can shorten this to: 
    localhost/index.php
127.0.0.1/index.php

Ports

  • An IP Address is like a telephone number
    • Often, a telephone number is not enough to contact someone
    • You also need their telephone extension
  • To a computer, a port number is like a telephone extension
  • Specifically, a port is a software connection used by programs to exchange data
  • The software needs both a URL and a port number to connect to a unique destination on the Internet
  • Client applications, like a Web browser or FTP program, are expected to know the port number
  • Common port numbers include the following:
    Service Port Number
    FTP 20, 21
    Telnet 23
    SMTP (e-mail) 25
    HTTP 80
  • More information on common port numbers available here

^ top

1.3.2: Introduction to PHP

  • Web applications require special software that runs on the server
  • This server-side application software is responsible for:
    • Generating the HTML documents for the client
    • Connecting the application to the database
  • In this course, we will use PHP to create application software

PHP Hypertext Processor

  • PHP is a programming language that can run on a Web server
  • PHP stands for "PHP Hypertext Processor"
  • Running a programming language on a Web server provides several advantages:
    • You can dynamically generate HTML and client-side scripts
    • Processing is done in a known environment, unlike Javascript
    • You can isolate common page elements in one file for inclusion in multiple pages
    • You can connect to databases to take advantage of their power
  • Many server-side programming languages exist, of which PHP is one of the most popular

Brief History of PHP

  • 1994 - Rasmus Lerdorf created PHP
    • Used it to keep track of who was looking at his online resume
  • 1995 - Other people started using PHP
  • 1997 - About 50,000 users of PHP world-wide with many contributors
  • 2000 - PHP 4 released
  • 2002 - Most popular scripting language on the Web
  • 2005 - PHP 5 released

What Can PHP Do?

  • Perform calculations
  • Dynamically generate the HTML (and JavaScript) returned to the browser
  • Create different content for different users
  • Automatically send email
  • Validate the data a user enters into forms
  • Connect to databases to store and retrieve data
  • Access and change files on the server
  • Create server-side redirects
  • Create sessions and track users across multiple Web pages of a site
  • Generate GIF and PNG images dynamically
  • Control online games

Determining What is Popular

  • Web documents have a suffix that identifies their type for the Web server 
    home.html
  • Scripting languages tend to use a suffix to identify themselves

    Server-Scripting Language Page Suffix
    Active Server Pages .asp, .aspx
    ColdFusion .cfm
    Java Server Pages .jsp
    PHP Hypertext Processor .php, .php3

  • You can use a search engine to find the number of pages on the Web for each type
  • For example:

^ top

1.3.3: Introduction to MySQL

  • Database: an organized collection of logically-related data
    • Data are numbers, characters, sounds or images that can be stored in a computer for processing or transmitting
    • Information is the knowledge obtained from processing the data
  • Data is organized so a computer can quickly select desired pieces of data
  • Many types of database systems exist including:
    • Flat (or table) model: a single table where columns contain similar data and rows are related to one another, like in a spreadsheet
    • Hierarchical model: data is organized into a tree-like (nested) structure like in XML
    • Relational model: multiple tables using key columns to match up data between tables
    • Object-oriented systems: various attempt to extend the object-oriented paradigm to databases
  • A Database Management Systems (DBMS) provides tools to work with databases
    • Creating and removing databases
    • Adding, deleting and updating data
    • Controlling user access to data
  • The DBMS is also responsible for:
    • Ensuring data is stored properly and that the rules for defining data are not violated
    • Maintaining relationships between data entities residing in the database
    • Providing some level of disaster recovery by which data can be restored to a consistent state
  • Note that "database" is often used as a synonym for DBMS
  • You must understand the meaning in context

Enter MySQL

  • DBMS we will use for this course is called MySQL
    • Pronounced "my-es-que-el" or "my-sequel"
  • MySQL web site (http://www.mysql.com/) provides latest information

What Can MySQL Do?

  • Quickly look up data that exists in a database
  • Create and remove databases
  • Add, delete and update data in a database using SQL statements
  • Change the structure of the tables used to save data
  • Control user access to data
  • Backup and restore database data
  • Perform calculations on data

Communication with MySQL

^ top

1.3.4: Installing PHP and MySQL

  • To run PHP with MySQL, you need to install these software components:
    • Web server
    • PHP engine
    • MySQL database
  • Rather than installing each component individually, it is easier to use an installation kit
  • Many installation kits are available, but the one I recommend is XAMPP from Apache Friends
  • The XAMPP kits are available for Linux, Mac OS X and Windows
  • Installing the kit is easy and I have complete instructions: How To Install PHP and MySQL
  • We will practice the installation in the next exercise

XAMPP Security

  • Security is a trade-off between many factors such as cost and ease of use
  • At a minimum, you should have a working firewall and anti-virus software protecting your computer
  • When you install XAMPP and start the Apache web server, make sure you leave the firewall blocking the web server
  • The web server will still work as localhost, but you do not want to broadcast to the Internet
  • Your firewall should block all programs automatically
  • However, sometimes it will ask if want to keep blocking

    apache-windows security alert

  • The correct answer is to keep blocking
  • If you share your computer with others, you may want to install a login and password
  • However, unless your database and web pages contain private information, I recommend you do not set up a password in XAMPP
  • If you create a login or password, make sure you remember the password
  • If you forget, you will need to reinstall XAMPP
  • If you have trouble remembering passwords, you may want to install a utility like Password Safe

^ top

Exercise 1.3

In this exercise, we install PHP and MySQL on the computers in the classroom.

Specifications

  1. Install PHP by following the instructions in How To Install PHP and MySQL.
  2. If you have difficulty, ask another classmate or the instructor for help.
  3. Please keep track of any problems you have so we can discuss them.
  4. In a text file named install.txt, record your answers to the following questions:
    1. What is the localhost address for phpMyAdmin?
    2. How can you tell if PHP is functioning?
    3. How can you tell if MySQL is functioning?
    4. What security should you have for your local Web server, at a minimum?
  5. Submit install.txt to Blackboard to show you completed this exercise.

Check Yourself

As time permits, be prepared to answer these questions. You can find additional information in the sections that follow.

  1. What is the Internet?
  2. How do computers locate each other on the Internet?
  3. What is a URL?
  4. What is the address of a server operating on your computer?
  5. What is PHP and what can it do?
  6. What is MySQL and what can it do?
  7. What components do you need for creating database-driven Web sites?
  8. What is the address of a server operating on your computer?
  9. What is the difference between a database and a database management system?

^ top

1.3.5: Summary

  • PHP is a programming language that can run on a Web server
  • It was first developed by Rasmus Lerdorf in 1994
  • PHP files are stored on a web server
  • When the user requests a PHP file, the web server asks PHP to answer the request
  • The web server knows when to do this based on the file extension
  • Thus, every PHP file must end in .php
  • You must copy all PHP files to a location accessible by the web server
  • To view the file, you use a browser to access the web server
  • To make development easier, you can install the Web server and PHP engine on your own computer
  • To access files using the Web server on your computer, you use the name localhost

^ top

Wrap Up

Due Next:
A1-Exploring Database-driven Web Sites (2/23/09)
Quiz 1 and Discussion Chapter 2 (2/23/09)
When class is over, please shut down your computer if it is on

^ top

Home | WebCT | Announcements | Course info | Expectations | Schedule
Project | Help | FAQ's | HowTo's | Links
Last Updated: February 24 2009 @19:28:44