1
2 These notes are intended for use by students in CS1520 at the University of Pittsburgh and no one else These notes are provided free of charge and may not be sold in any shape or form These notes are NOT a substitute for material covered during course lectures. If you miss a lecture, you should definitely obtain both these notes and notes written by a student who attended the lecture. Material from these notes is obtained from various sources, including, but not limited to, the following: Programming the World Wide Web, various editions, by Robert W. Sebesta Online documentation at: and in particular the PHP Manual at PHP and MySQL Web Development, by Luke Welling and Laura Thomson (Developer's Library) The Web Wizard's Guide to PHP by David A. Lash (AW)
3 Goals of the Course To understand and be able to program web servers and web clients to accomplish useful tasks Web servers are ubiquitous and many / most organizations now have elaborate / interactive web sites These web sites require programming on the server side Scripts that execute on the server and return resulting documents to the client For server-side scripts we will primarily utilize the PHP language
4 These web sites require programming on the client sideGoals of the Course These web sites require programming on the client side Scripts that execute locally on a user’s machine via the web browser For client-side scripts we will primarily utilize the Javascript language We will also utilize JQuery, a library of Javascript functions that simplifies much of the client-side programming We may also look at an API, such as Google Maps that can be integrated into our sites
5 This leads to some more specific goals…Goals of the Course These web sites often require interaction between web servers and web clients More and more sites contain resident client code which accesses the server asynchronously and dynamically updates the client page We will utilize DOM and AJAX for this interaction Document Object Model Asynchronous Javascript And XML This leads to some more specific goals…
6 To learn and utilize the PHP language, and its applicationsGoals of Course To learn and utilize the PHP language, and its applications PHP syntax, constructs and basic language features Using PHP for server-side embedded scripts Writing and processing HTML forms with PHP Access and utilizing system state variables Maintaining individual states via cookies and sessions Regular expression handling in PHP Object-oriented features of PHP
7 Using PHP for Web database accessGoals of Course Using PHP for Web database access With a MySQL database We will cover the very basics of using MySQL and DB development as well Simple database setup and querying We will leave more interesting DB issues to the CS 1555 course Simple authentication and authorization
8 Goals of Course To learn and utilize the Javascript language in conjunction with html files Learning the basics of the language Quickly Using Javascript in conjunction with DOM to add dynamic content to web pages Ex: Doing client-side processing of forms Checking form input, dynamic formatting, etc. Using AJAX techniques to make web apps more like stand-alone applications Updating a web page without requiring a full refresh
9 To learn and utilize the JQuery libraryGoals of Course To learn and utilize the JQuery library Many client-side actions can be simplified greatly utilizing JQuery rather than straight Javascript To learn and utilize XML and how it can be used in Web applications Basic idea / syntax of XML Parsing / formatting XML documents Validating XML documents
10 Goals of Course If time permits… To look at an API such as Google Maps and how it can be integrated into our sites To examine mobile web apps and how they differ from traditional web apps Content and formatting differences To learn the basics of the Perl language Writing stand alone Perl programs Using Perl and its features for Web applications
11 Goals of Course Number of programmers coding in given language over time (Reference: Web Client Native Web Server Web
12 Lecture 1: Getting StartedWhat is assumed of you: You should be familiar with Java and have used it in CS0401/445 You are expected to know object-oriented programming and basic event-driven programming You are expected to know the basics of html What is not assumed of you: Detailed knowledge / experience with any of the languages we will be using
13 Lecture 1: Intro. to Web ServersHow do Web Servers work? Client specifies document at a specific web address that is desired (specified by a URL) Ex: If the document is HTML or text, the server simply forwards it back to the client If it is text, it is shown unaltered in the browser If it is HTML it is rendered in the client's browser HTML tags are interpreted and result is shown to the user For info on HTML and XHTML, read Ch. 2 in the Sebesta text
14 Lecture 1: Intro. to Web ServersHowever, the requested document may be an executable script, or it may be HTML with an embedded script The script could be written in any of many different web scripting languages In these cases, the server executes the script If the entire document was a script, the server simply sends the output back to the client If the document had an embedded script, the script sections are replaced with the output and the modified document is then sent to the client
15 Lecture 1: Intro. to Web ServersNote that the client never sees the server-side script code This is important – typically client should not see logic / code that the server executes to process requests The server may be accessing files whose names should not be seen, or preprocessing data that it does not want the client to see See ex1.txt See ex1.html See ex1.php
16 Lecture 1: CS 1520 Web ServersIn order to be useful, web servers need access to the directories from which they serve and process files Minimally the server must have read access, but in many cases, write access is also needed and/or useful In case server creates / modifies files Ex: User submits a file Ex: Various user data is stored / updated in a file This leads to an issue for a course like CS 1520:
17 Lecture 1: CS 1520 Web ServersHow do we give the server access to students’ individual directories in isolation? For student X the server should have read/write access to X’s directory However, when executing a script in X’s directory, the server should not be able to access files in the directory of some other student, Y Discuss There are ways of doing this but they are not simple We may utilize this later in the term For now we are eliminating this issue entirely
18 Lecture 1: CS 1520 Web ServersRather than using a shared Web server, you will each use your own server The server you will use is XAMPP This is a full-featured Apache / MySQL / PHP / Perl development environment It can be installed on a laptop If you have one It can be installed on a flash drive Makes it very portable See: https://www.apachefriends.org/index.html
19 Lecture 1: CS 1520 Web ServersYou will develop your projects on your own servers, and then run them for your TA via a demonstration You will need to bring either your laptop or your flash drive (with the server on it) to the demonstration Assignment: Your first in-class exercise (next week Thursday) will be to run a simple script on your own XAMPP server You have from now until then to get it installed on either your laptop or on a flash drive
20 Lecture 1: CS 1520 Web ServersIf you are putting it on your laptop the installation is fairly straightforward If you are putting it on a flash drive, you don’t actually “install” it – just download the .zip file, unzip it and run a .bat script See documentation for where to put your scripts so that they will run If you have any trouble with this, see your TA or me before next Wednesday!
21 HTML is a mark-up languageLecture 1: Intro. to HTML HTML is a mark-up language Idea is that extra characters / symbols in the text provide information to a parser, which uses that information to render the document in a certain way Ex: Hello There The tags do not appear in the rendered document The parser utilizes them to alter the appearance of the text We will discuss mark-up languages in more detail when we discuss XML later in the term
22 HTML has evolved greatly over the yearsLecture 1: Intro. to HTML HTML has evolved greatly over the years New tags have been added Some obsolete tags have been removed Syntax has been standardized The current version is HTML 5 Still not universally used However, HTML 5 is becoming more and more prominent Most recent browsers mostly support it
23 Fundamentally, each HTML 5 document has the following shell:Lecture 1: Intro. to HTML Fundamentally, each HTML 5 document has the following shell: There are a LOT of other tags / attributes and variations See: There are many other reference links as well We will discuss some of these in more detail later, when we focus on client-side programming
24 HTML can be generated in several ways:Lecture 1: Intro. to HTML HTML can be generated in several ways: Can by typed in directly, using a text editor Ex: TextWrangler, TextPad, vi Can be generated through software Ex: MS Word, DreamWeaver Can be generated dynamically via scripts Ex: PHP, Perl In this course we will be either typing in HTML directly or generating dynamically via scripts Ex: Using PHP
25 Lecture 2: Intro to PHP What is PHP? Language developed by Rasmus Lerdorf from the Apache Group Its primary use is for server-side scripting Ex: To process HTML forms Ex: To perform a DB query and pass on results Ex: To dynamically generate HTML PHP scripts are often embedded within HTML documents The server processes the HTML document, executing the PHP segments and substituting the output within the HTML document
26 The modified document is then sent to the client Lecture 2: Intro to PHP The modified document is then sent to the client As mentioned previously, the client never sees the PHP code The only reason the client even knows PHP is involved is due to the file extension .php But even this is not required if the server is configured correctly The server can be configured to run PHP scripts even if the file does not have a .php extension By default XAMPP will only execute PHP if the .php extension is provided See what happens if you have PHP code without the .php extension
27 PHP is a HUGE language It is a fully functional languageLecture 2: Intro to PHP PHP is a HUGE language It is a fully functional language It has an incredible amount of built-in features Form processing Output / generate various types of data (not just text) Database access Allows for various DBs and DB formats Object-oriented features Somewhat of a loose hybrid of C++ and Java Huge function / class library
28 We will look at only a small part of PHPLecture 2: Intro to PHP We will look at only a small part of PHP There are also many tools that are already pre-written in / for PHP If you are building a substantial project you may want to use some of these Ex: Also see There are also content management systems written in PHP Ex: Ex: However, we may not be covering them here We will focus on the straight PHP language
29 PHP Program Structure Or really lack thereofLecture 2: Intro. to PHP PHP Program Structure Or really lack thereof PHP, as with many scripting languages, does not have nearly the same structural requirements as a language like Java A script can be just a few lines of code or a very large, structured program with classes and objects The complexity depends on the task at hand However, there are some guidelines for incorporating PHP scripts into HTML files
30 Lecture 2: Intro. to PHP When a PHP file is requested, the PHP interpreter parses the entire file Any content within PHP delimiter tags is interpreted, and the output substituted Any other content (i.e. not within PHP delimiter tags) is simply passed on unchanged This allows us to easily mix PHP and other content (ex: HTML) See:
31 Consider the following PHP fileLecture 2: Intro to PHP Consider the following PHP file Output
"; echo "Output
"; echo "Output