CIS 1052 Labs: Intro to Web Technologies (HTML, CSS, javaScript, MySql, PHP)

Each lab will add more pages to your web application. You can back up your web application each week, but your current web application will always contain ALL THE WORK that you have done all semester (and all pages must still work when you submit your final project). Click each lab to open up the details.

Lab 1: NetBeans, HTML, Publishing

  • Click here to learn how to Install Netbeans at home, use it as an editor, and publish your first PHP page (PC and MAC).
    • Click here for short summary of above.
  • The script below was created to minimize issues with file permissions. I'd like some students to try running it, using the terminal version of Secure Shell (not the file manager one), but back up your web site first. Copy/paste this statement right into the command line prompt after logging into cis-linux2.temple.edu.
               /home/admin/scripts/default_web_setup
  • If your page shows up plain blank, or if an image shows up as a small box, fix it by modifying file permissions (see below):
    • Click here if you use a PC.
    • Click here if you use a MAC.
  • Click here to learn how to reduce image file sizes (e.g., to make thumbnail images) on the PC using MS Paint.
    • On the MAC, try using Preview to do the same thing - basically just reduce pixel for height and width of an image file (remember to "Save As" so as not to destroy the original image).
  • Click here for Lab Requirements and help.
  • For reference, visit W3Schools HTML "Try It Yourself" pages

Labs 2-3: Basic CSS

  • Click here for Lab Requirements and help.
  • Click on these links to see how you can transform your page (right click and view source to see the HTML and CSS):
  • Here is another example of a starter index page and a completed one (right click and view source to see the HTML and CSS).
  • For reference & help: visit W3Schools CSS "Try It Yourself" pages

Lab 4: CSS Positioning and PHP Include Statements

  • Click here for the w3schools introduction to CSS positioning. You will learn about the 4 types of CSS positioning:
    1. static: (the default) "normal flow" which means in-line HTML tags (like <a> link) and text start at the top left and fill in towards the right, wrapping down when necessary. Block elements (like <p> paragraph or <div>) flow top to bottom each element starting on a new line. Static elements "maintain their space" in the normal flow.
    2. fixed: element is removed from the normal flow and positioned a specified distance from the top, left, bottom, or right edge of the browser window. You can use this, for example to have a title or footer that never leaves the screen even when the page scrolls up/down.
    3. relative: elements are positioned according to the normal flow (and maintain their space) except you can have the element slightly left/right or up/down from where it would normally appear. In our labs we use relative elements not because we want these elements to be jogged up/down or left/right, but because we need a non-static element as a container for absolute children (see below).
    4. absolute: is similar to fixed in that it the element is removed from the normal flow, but it is positioned a specified distance from the from top, bottom, left or right edge of it's first non-static parent (a relative parent is often used for this purpose). You can use this when you want things on top of each other, but you want the items to be able to scroll off the screen (like normal).
    z-index: use z-index when elements overlap, to specify which element is "on top" (higher values are on top of lower values).
  • Here is another introduction to CSS positioning.
  • Click here to see Sally's code examples that demonstrate the usefulness of fixed positioning (fixed elements are removed from the normal flow and positioned with respect to an edge of the browser window). This will prepare you to understand absolute positioning (absolute elements are removed from the normal flow and positioned with respect to an edge of their first non-static parent, usually a relative element).
  • Click here for lab requirements which reference the following two tutorials.
    1. Click here for Sally's tutorial on how to create a drop down menu using CSS positioning.
    2. Click here for Sally's tutorial on how to make your web site maintainable (by moving common code out of the index page and referencing that common code using a PHP include statement). If all other pages, do the same, you'll be able to make a change in one file and have that change reflected in your whole web site.

Lab 5: HTML Forms and HTML Tables

  • First, visit W3Schools to learn about HTML's <form> and <input> tags. Follow the "Next Chapter" links through these topics: Form Elements, Input Types, and Input Attributes. Then read this short summary about HTML Forms.
  • Next, visit W3Schools again to learn about HTML's <table> tag. Then read Sally's short summary about HTML Tables.
  • Click here for Lab Requirements.
  • Click here to see Sally's sample code that demonstrates how you can style input elements - this is not required, but it is a nice look. This also uses some CSS positioning - see how it responds to narrowing the browser.

Lab 6: Javascript, Cookies, and Personalization

  • Click here for Lab Requirements and help. In this lab you will create 3 different style sheets and (by using javascript) your code will allow the user to select which one they want. You will store their preference in a cookie (a text file on the user's PC). Each page of your web site will read from the cookie (before rendering) and set the style sheet to the preferred one.
  • Click here if you want to do the jquery extra credit. Jquery is a javascript library that makes it easy for programmers to provide nice user interface behavior that is very reliable across ALL browser versions.

Lab 7: Databases

  • Click here to learn how to install MySqlWorkbench at home. If you don't want to do this, you will have to use the CIS Department Lab PCs when you want to access your database.
  • Click here to learn how to access your mySql database (usernames/passwords etc) -- must read at least once.
  • Click here for first part of this lab (can easily do in one sitting). In this part, you will create two tables Customer and Product.
  • Click here for the EXTRA CREDIT second part of this lab (worth 2 extra points). In this part, you reverse engineer a data model from your database, then create a Purchase table that implements a many-to-many relationship between Customer and Product. You will do this part next semester if you continue onto CIS 1056 Advanced Web Technology and Programming, which I also teach.
  • Submission: both the first part and the second part of your lab indicate (at the end) what you are to submit, mostly sceen captures that show what you have done. You copy/paste these screen captures into a word or wordpad document and submit that into the BB assignment.

Lab 8: Calculate

  • Click here for sample code (which you must study before starting your lab).
    • 01_phpVariables.php: demonstrates php variables, how they are set and displayed to the page.
    • 02_Form_Sends_Data.php: shows how a form can send data to a server side program. This program could also have been .html since it does not use any PHP code.
    • 03_Receives_Data.php: this is a "server side program" that extracts user input and processes it.
    • 04_single_page.php: this page posts to itself.
    • 05_Check_for_Postback.php: this page does not show a message until the user clicks submit. It has logic to differentiate initial rendering from "postback".
    • 06_Persist_User_Data.php: this page has code that makes user entered data persist in the textboxes (not dissapear).
    • 07_Validate_and_Calculate.php: this page makes sure that the user enters a name and a numeric age. If so, it provides a welcome message that includes a numeric calcuation.
    • 08_Calculate_Real_Numbers.php: this page demonstrates how to get two real numbers and performa a calculation (after validating that the user really did enter numbers).
  • Click here for Lab Requirements and help.

Lab 9: Display Data

  • Click here for a zip file that contains all display data sample code.
    • Click here to see how display1.php runs. This is the simplest example of reading from a database and writing to a web page (using php).
    • Click here to see how display2.php runs. This example shows how to line up the (database) data inside of a HTML table.
    • Click here to see how display3.php runs. This example formats the data (like dates and dollar amounts), but it also shows how to achieve code reuse by employing the php include directive, as well as by creating php classes and methods. This example utilizes these php files in the classes folder: TrackErrors.php and FormatUtils.php.
    • Click here for sample code which shows better program style. This example maximizes code reuse which makes the php page have very little code - other than the user interface. It also "decouples" order of execution from the order of display by making sure that all the php code is first, followed by the user interface. This example utilizes these php files in the classes folder: DbConn.php, FormatUtils.php, TrackErrors.php and View.php.
  • Click here for lab requirements.

Lab 10: Logon

  • Click here for a zip file that contains simple log on code. The "simpleLogonCode" folder contains several php pages, such as index, disply users, logon, logoff, and private page (redirects to error page unless you are loggged in). These php pages employ code reuse by "including" php files that have functions. Objects are not used, so the code is easier to understand. This is the version I suggest you use and here is how I suggest that you begin working on this lab:
    1. After extracting the original files and folders from the zip file, copy the "simpleLogonCode" folder directly into your web root folder. Leave this sample code alone, so you can always reference code that works (against sally's database, but still, it works).
    2. Copy what's inside of the "simpleLogonCode" folder into your web root folder and use these files as your starting point and begin making changes. For example, reference the customer table from YOUR database and add your own look and feel to the pages, etc.
    3. IF you decide to try to do a "dynamic log on/log off link" from your pre-content page, Try putting the session_start() function call at the top of your pre-content page (before anything is echo-ed), then do NOT include any session_start function calls anywhere else. If you have trouble with this, you can skip the whole idea of having a dynamic logon/logoff link.
  • Click here for a second example of log on code which uses objects -- I do not recommend you use this version as it is harder to understand. However, I am leaving this code up in case any student started using it and still needs to see it.
  • Click here for lab requirements.

Lab 11: Insert (Register)

  • Click here for a zip file that contains sample code for inserting a record, e.g., a customer registering to your site. Here is how I suggest you begin: after extracting the zip file, you can copy my "insertCustomer.php" right into your web root folder. It should run against my database (my web_user table). Then, you can copy my insertCustomer.php to be the starting point for your register.php page. See the lab document (below) for more detailed instructions and requirements.
  • Click here for lab requirements.

Optional Lab: Delete

  • There are no requirements because this delete lab is not required.
  • Click here for a zip file that contains sample code for deleting a record from a database. After extracting the zip file, copy my "deleteCode" folder right into your web root folder. You should be able to run pages delete1.php ... delete5.php right away -- they delete records from my database. If you delete some of my data, please delete only from the junky data and please insert some records to replace what you deleted. Study the code in these files. Version 1 is simplest (all code in one place, user interface not great). Each version adds in a small part of functionality (so you can understand it). Version 5 is short because it uses php functions - it has a nice user interface because it uses javascript functions.

    If you want to do your own delete functionality,

    • Copy my delete5.php to your root folder.
    • Copy my png_icons folder to your root folder.
    • You will have to copy files like DeleteFunctions.php into your "includeFiles" folder. Learn to check the references and put files are where they are expected (relative to your copy of delete5.php that's in your root folder).
    • Once you have my delete5.php working from your root folder, then modify delete5.php and all its supporting php files so that you are deleting customer records from your database (not deleting web_user records from my database).
    • Incorporate your layout into your delete5.php.
    • Finally, rename your delete5.php to be customers.php (after backing up your old customers page). Remember to change the form's action attribute so that the renamed file still posts to itself.

Optional Lab: Update

  • Click here for a zip file that contains sample code that inserts, updates, and deletes records from Sally's web_user table (just two fields - email address and password). No new concepts are presented here, except perhaps the complexity of having to persist the updateId in the update page. The list page invokes the update page (e.g., it calls updateWebUser.php?updateId=23). The updateWebUser.php page must persist that updateId (so it is still available once the user has edited the values and clicked submit. Notice that the "name" attribute of the input tag must match the parameter in the URL (so it must have name="updateId").