LIS 390W1A - Course Technologies, Links & Instructions

Introduction

This page contains a series of links both to useful applications and to useful resources. You should be able to find most of what you need to get started here.

Also, in this course we will be using many different technologies. Because it will be difficult to keep track of them all, I am using this page as a reference guide that should provide instructions for how to use these technologies and links that will help you find them. It might be useful to use this page as a reference page when you run into technical difficulties.

This page will be updated as the class continues. I will try to make announcements when important links are added to the page.

Table of Contents

Course Webpage

It is somewhat ridiculous that we have multiple locations of the course website. However, given technical difficulties encountered in previous versions of this course, I have found it necessary to have two web locations for this course. Therefore, whenever updates are made to the course website, they will be propagated to all of the following locations. You may use any of these locations when you need to find a copy of this site.

Course Technologies

Web Technologies

Enabling I: Drive

In order to use the GSLIS web space, you will have to enable your I: drive. This process is somewhat complex, and you will have to take a quiz at the end which, once completed, will enable your I: drive. If you run into any problems in this process, please do not hesitate to email me or email or call the GSLIS Help Desk (217-244-4903; 1-800-377-1892; open M-F 8:00 am to 5:00 pm) to get some help. I have already activated my I: drive and I can't actually go through the process again, so the GSLIS Help Desk might be better able to assist you.

  1. First, open the following link in a new window or tab: https://ldap.lis.illinois.edu/extend-access/webspace.pl
  2. Click on the "Show URL Tutorial" button on the left-hand side of the page (it is the bottom button).
  3. Take the Tutorial
  4. Once you are done, you should be able to click on the "Enable Web Space" button
  5. Take the quiz. You may want to have the GSLIS WebDAV Tutorial and the GSLIS File Storage Tutorial open in separate browser windows or tabs for reference purposes when you take the quiz.
  6. If everything went well, you should have successfully enabled your web space.

GSLIS Tutorials

Help Desks

  • GSLIS Help Desk - help@support.lis.illinois.edu - (217) 244-4903 - For help with everything related to GSLIS technology. The GSLIS Help Desk people are very helpful, and willing to do whatever it takes to help you with your problem, so feel free to talk to them if you need some tech support.
  • CITES Help Desk
    • For help with Netfiles and other CITES technologies

GSLIS PHP File Writing and MySQL Database Access

MySQL Database Access via PHP

The GSLIS classroom servers do have MySQL access. By default, the database is not set up, but you can activate it automatically:

  1. Go to the MySQL Database Password Change page (https://ldap.lis.illinois.edu/extend-access/classdb.pl).
  2. You will be prompted to log in. Use your NetID with your GSLIS password.
  3. On this page, create a password for your MySQL database. DO NOT USE YOUR GSLIS, CITES, OR OTHER IMPORTANT PASSWORD AS THERE IS A CHANCE IT COULD BE COMPROMISED IF YOU ARE CARELESS IN WRITING YOUR PHP SCRIPT!!!
  4. When you click submit, a MySQL database will be automatically created whose name will be your NetID. The database will be located on the following server: classrm06.lis.illinois.edu

Now that you have set up your database, it is vital that you adhere to the following practices when using PHP or any other scripting language to access the database.

To use a MySQL database, you must first connect to it. The php command for connecting to a MySQL database is mysql_connect(). However, when you use it, it typically has the following form:

<?php
$con = mysql_connect('classrm06.lis.illinois.edu', 'netid', 'mysqlpassword');
if (!$con) {
	die('Cannot connect to the MySQL database: ' . mysql_error());
	}
?>
		

Notice that the mysqlpassword is entered in plain text, it is not encrypted! If this command is placed in a file which is in a web accessible directory, then there is the potential that somebody could download the file, obtain the password, and then use it to access the MySQL database. Therefore, do not store the password in a file in a web accessible directory!!! Instead, do the following:

  1. SSH into one of the classroom servers (1-5), e.g. from the command line:

    % ssh netid@classrm04.lis.illinois.edu
    			

    Remember to substitute your NetID for "netid" in this step and any steps below when it appears. (Remember, also, the % simply indicates that you are using the command line, it is not something you need to type.)

  2. Once you are logged in, type in the following commands:

    % cd /homei/users/netid/
    % ls -al
    			

    The ls -al command will show you a list of all the files, including hidden files, and will show you the permissions the files have. In this list, if you see a file called .keepperms then you are ready to go to the next step. If it does not exist, then you will need to create it. The easiest way is with the following command:

    % touch .keepperms
    			

    The file .keepperms is a file specific to the GSLIS infrastructure setup. Our systems administrators have created scripts which run periodically that reset the permissions of all web accessible directories so that people don't accidentally make a file or directory world writable. The .keepperms file prevents the scripts from changing the permissions of files and directories (folders) in the entire directory tree including and below the directory in which the .keepperms file is located. This is necessary because we will need to change the permissions of some of the files and directories we will create.

    • BE CAREFUL!!! By adding the .keepperms file, you can easily set incorrect permissions and open up security vulnerabilities which will allow the GSLIS classroom servers to be hacked! So remember what Spiderman said: "With great power, comes great responsibility."
    • This means, don't give files or folders in the courseweb_html directory (or the courseweb_html directory itself) write permissions for everybody (chmod o+w).
  3. Once the .keepperms file exists, then create a new directory, e.g.:

    % mkdir phpfiles
    			
  4. Once you have created this directory, you will need to change the permissions on it so that the web server can access it:

    % chmod a+rwx phpfiles
    			

    This command changes the permissions on the directory phpfiles (you don't have to name your directory "phpfiles", you can call it something else if you like) so that all three levels (user, group, and everybody) of access have full read (r), write (w), and execute (x) permissions. The reason for this is that the Apache web server on the GSLIS network is installed under its own user account. Since php scripts are interpreted by a php interpreter running as part of an Apache web server, they access files from this user account. Since this user account is not part of the group which has local access, the files need to be made accessible to everyone.

    The reason you are creating this phpfiles directory in your NetID directory instead of in the courseweb_html directory is because this phpfiles directory is not being served to the internet by the GSLIS web server, so the files cannot be accessed by anyone who does not have GSLIS network access.

  5. Now create a new PHP file in the new directory (phpfiles) you have created. You can either do this with your local text editor (e.g., TextWrangler, TextPad, etc.) via a WebDAV connection, or by using one of the text editors which can be run from the command line (e.g., emacs, vi, pico, etc.). For example, from the command line you might do something like:

    % cd phpfiles
    % emacs dbinfo.php
    			

    The contents of the php file (dbinfo.php) should be something like this; we will add the database name and use it below:

    <?php
    $dbhost = 'classrm06.lis.illinois.edu';
    $dbuser = 'netid';
    $dbpass = 'password';
    $dbname = $dbuser;
    ?>
    			
  6. After you have created and saved this file, you can now access it from the main php file you are creating in the courseweb_html directory. To do so, you must include it as follows:

    <?php
    include '../phpfiles/dbinfo.php';
    ?>
    			

    When you include a php file in this manner, essentially you are inserting the contents of the php file that is being included (dbinfo.php in this example) into the main php file at the point you have the include statement. Thus, in this example what happens is you now have the three variables $dbhost, $dbuser, and $dbpass defined and initialized to the values specified in dbinfo.php.

  7. Now that you have defined these variables, you can use them in your PHP code. Thus, the main php file might have the following code in it.

    <?php
    include '../phpfiles/dbinfo.php';
    
    $con = mysql_connect($dbhost, $dbuser, $dbpass);
    if (!$con) {
    	die('Cannot connect to the MySQL database: ' . mysql_error());
    	}
    ?>
    			

Remember, the first time you use the database, you have to create it:

<?php
include '../phpfiles/dbinfo.php';

$con = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$con) {
	die('Cannot connect to the MySQL database: ' . mysql_error());
	}

$sql = 'CREATE DATABASE ' . $dbname;
if (mysql_query($sql, $con)) {
    echo $dbname . " database created successfully";
} else {
    die('Error creating database ' . $dbname . ': ' . mysql_error());
}
?>
		

When you are finished using the database in your PHP script, you should close the connection, though this is not strictly necessary, since when the script ends, the database connection will close automatically:

<?php
mysql_close($con);
?>
		

Writing to Files using PHP

If you want to use PHP to write to files, the operation will fail if you try to write to them in your courseweb_html directory in your I: Drive. There is good reason for this. The PHP interpreter runs as part of the Apache web server on the GSLIS network. The way the GSLIS system is setup, the web server is installed under its own user account, and this user account does not have group-level permissions access to your I: drive space. Therefore, in order for it to write to the I: drive, write permissions must be set for all users. However, because your courseweb_html directory is served to the web, if you give write permissions to everybody, this means that anybody on the internet can write to your I: drive, which means that anybody can hack it and put up spam sites that can bring the whole GSLIS (or even UIUC) network down. Obviously, this is undesirable.

This is only complicated by the fact that the GSLIS server infrastructure has complex permissions management, such that the web server cannot write to the file system barring certain complex changes in extended permissions. Therefore, to avoid messing with this, and to avoid the possibility of error, simply follow these instructions:

  1. SSH into one of the classroom servers (1-5), e.g. from the command line:

    % ssh netid@classrm04.lis.illinois.edu
    			

    Remember to substitute your NetID for "netid" in this step and any steps below when it appears. (Remember, also, the % simply indicates that you are using the command line, it is not something you need to type.)

  2. Once you are logged in, type in the following commands (substitute your NetID for netid):

    % cd /homei/users/ifloyd2/lis390w1a_student_files/
    % mkdir netid
    % chmod o+rwx netid
    			

    The directory lis390w1a_student_files has been specially created and associated with special extended permissions to allow the web server to write to the filesystem. To distinguish your files from everybody else's, you will need to create a subdirectory within this directory to store your own material, and change the regular permissions as needed. Which is now what you have done.

  3. You will need your PHP script to create any file(s) you want to edit. Be sure it creates them in the following path:

    /homei/users/ifloyd2/lis390w1a_student_files/netid/
    			

    If this does not work, email me. I can't test this to be sure it works. You might need to use a relative path, instead of an absolute path, though in all likelihood, that shouldn't matter. If you're lucky, this will work, and you will be ready to read and write to files!

  • BE CAREFUL!!! By adding the .keepperms file, you can easily set incorrect permissions and open up security vulnerabilities which will allow the GSLIS classroom servers to be hacked! So remember what Spiderman said: "With great power, comes great responsibility."
  • This means, don't give files or folders in the courseweb_html directory (or the courseweb_html directory itself) write permissions for everybody (chmod o+w).
  • Once the .keepperms file exists, then create a new directory, e.g.:

    % mkdir datafiles
    			
  • Once you have created this directory, you will need to change the permissions on it so that the web server can access it:

    % chmod a+rwx datafiles
    			

    This command changes the permissions on the directory datafiles (you don't have to name your directory "datafiles", you can call it something else if you like) so that all three levels (user, group, and everybody) of access have full read (r), write (w), and execute (x) permissions. Now the GSLIS web server's user account has full write access to the files stored here.

  • -->

    Useful Learning & Reference Materials

    Issues in Design

    Learning Materials and Guides

    Here are some CSS Tutorials that students in the class have found useful:

    Reference Sites

    • W3 Schools - An excellent resource for learning about HTML and CSS, W3 Schools has a page for every HTML tag and every CSS property, as well as tutorials, examples, and quizzes.
      • I use W3 Schools most often by googling an HTML tag or CSS property, usually in the following manner: "HTML ul", "CSS font", etc. Usually the W3 Schools site is in the top 5 hits, and I go there first, because they are pretty exhaustive, and I know what to expect.
      • You can also use this technique to guess tag or property names. By typing in your best guess as to the name, and seeing whether the W3 Schools site is in the top 10 hits, gives a good indication of whether the tag or property name exists or not. This method of using W3 Schools is a bit less reliable, but can prove useful at times.

    Useful Articles on Particulars

    Javascript:

    Demonstrations and Samples

    Need samples of CSS, HTML, or javascript? Check out these resources and learn via example.

    This section is clearly incomplete. Please feel free to suggest examples you come across which you find particularly useful!

    CSS

    • CSS Zengarden:
      • CSS Zengarden is a beautiful demonstration of the power of CSS. All the pages linked in the "select a design" section have the exact same content, i.e., the exact same html. Each, however, is associated with a different cascading style sheet (CSS). From those stylesheets, and from those stylesheets alone, come all the vast variations in look-and-feel that you see. Check them out!
      • In particular, notice the Zen Army style sheet by Carl Desmond. Notice how the words in the headers were replaced. How was this done? By setting the {display: none;} for the header block, and then setting an image as background for that header block that has different words embedded in the image. This is but one of the many tricks you can do once you become familiar with CSS.

    Validation Links

    HTML/XHTML

    CSS

    Accessibility Links

    Secure Remote Login and File Transfer

    Secure remote login programs such as SSH and secure telnet allow you to login to a server (computer) remotely. Thus, if you want to work on files stored on your GSLIS H: drive, you can ssh into the classroom server and access your files that way. A typical command would be "ssh netid@classrm05.lis.illinois.edu". For more detailed instructions as to how to SSH into your GSLIS home directory, click here. Secure remote login programs tend to be command-line based. While not as intuitive as graphical user interfaces (GUIs), the command line can be much more powerful, and once you are familiar with it, it can be much quicker to use.

    Secure file transfer programs allow you to copy files to and from remote servers (computers). There are several standards for secure file transfer, but the most common are secure file transfer protocol (SFTP) and secure copy (SCP). For more detailed instructions on using secure file transfer programs, click here. For Mac users, I recommend getting used to scp, rather than using Fetch. SCP comes free with your computer, and using it helps build familiarity with the command line. Once you leave UIUC, Fetch will no longer be free, and you will find that, if you are dependent on many commercial products, keeping up with the latest versions will quickly become quite expensive.

    A third option for working remotely is WebDAV. WebDAV is covered in this section. As of right now, WebDAV is no-longer a recommended way for accessing the GSLIS servers, so please use one of the methods described in this section.

    Using SSH & SCP to Copy Files

    To copy your files over to the GSLIS machines in order to turn in your assignments, you will need to do two things. First, you will need to figure out the path that you need to use to copy files over. Second, you will need to actually copy the files over. These instructions are based on using the linux/unix/Mac command line in order to move your files over. They will differ slightly if you use a GUI application to copy files over.

    The first step is to open two terminal windows. The first window is to figure out where you need the files to go, the second window is to actually copy the files. Opening two windows can be done on a mac by clicking on the Terminal application which can be found in "Applications ==< Utilities ==< Terminal" in your Finder window. Then hold the command/meta/apple key down and press "n", and a new window will open.

    In the first terminal window, type in the following command from the command prompt (be sure to substitute your netid for the "netid" portion of the command) and hit the enter/return key (do not type the "%" sign, that is just there to indicate that you are typing at the command prompt:

    % ssh netid@classrm03.lis.illinois.edu
    		

    (If classrm03.lis.illinois.edu isn't working you can replace the 03 with anything from 01 to 05.)

    When you type this in, what you are doing is saying I would like to connect to the ssh server "classrm03.lis.illinois.edu" with the user account named "netid".

    At the prompt, type in your GSLIS password. If you are prompted to accept the security certificate before given a password prompt, you will need to type in "yes", the full word and not just "y".

    Once you are logged in, you will be in your H: drive. This is your private space on the GSLIS servers--it is not web accessible. If you want to access your I: drive, you will need to type in the following command (be sure to substitute your netid for the "netid" portion of the command):

    % cd /homei/users/netid
    		

    The command "cd" stands for "change directory", and performs the same function as clicking on folder names in Finder or Windows Explorer. If you ever need to go up a directory, the command is: "cd .." (don't include the quotation marks).

    Now you are in your filesystem on the I: drive. The next step is to get to the part of the filesystem of the I: drive where your files will be on the web. If you type in:

    % ls
    		

    Which will list all the files, you'll see several directories. To be able to tell directories from regular files, you can use either of the following commands:

    % ls -p
    
    % ls -al
    		

    The former will show all directories with trailing slashes and files without them. The latter will show you details of each item in the directory as well as all hidden files (which in unix/linux are files and directories whose names start with a period "."). Look for the "d" at the start of each description to figure out which ones are directories.

    The directory you want is "courseweb_html", so type in (and hit enter/return afterwards):

    % cd courseweb_html
    		

    You can always press the "tab" key to get the commandline to auto-complete your typing up until there is a conflict (i.e., more than one files/directories have the same name root up until that point).

    Once you've changed directories into courseweb_html, you can start putting your files wherever you want. If you want to create a new subdirectory/folder to put your files in, you can use the command:

    % mkdir new_directory_name
    		

    Where "mkdir" stands for "make directory" and "new_directory_name" is the name of the directory (folder) you want to create. Be sure you don't use spaces in files or directory names when you are using the command line, because spaces can sometimes confuse programs that use the command line, and you don't want to accidentally screw things up. To get into the new directory once you've created it, just type in "cd new_directory_name".

    To copy the files you've created onto your I: drive, you'll need to know the directory path to copy them to. To figure this out, make sure you're in the directory where you want the files to end up, and then type:

    % pwd
    		

    This will show you the "Path of the current Working Directory". Copy this text. It will likely be something similar to (i.e., substitute your netid and add any subdirectories on the end):

    /homei/users/netid/courseweb_html
    		

    Now, in your second terminal window, change directories using the "cd" command to get to wherever your files are stored, e.g., "cd Ingbert5" for me.

    Once you are where your files are, you need to copy them over. If you have one file to copy over, then the command is:

    % scp filename.html netid@classrm03.lis.illinois.edu:/homei/users/netid/courseweb_html/
    		

    Make sure you add a trailing slash at the end of the path so that the "scp" (secure copy) command does not get confused as to what you are asking it to do. You can also do:

    % scp *.html netid@classrm03.lis.illinois.edu:/homei/users/netid/courseweb_html/
    		

    To copy all the html files in the current directory over to the I: drive. Or:

    % scp * netid@classrm03.lis.illinois.edu:/homei/users/netid/courseweb_html/
    		

    To copy all the files in the current directory over to the I: drive. Or:

    % scp -r * netid@classrm03.lis.illinois.edu:/homei/users/netid/courseweb_html/
    		

    To copy all the files and all the subdirectories with all of their files over to the I: drive.

    As you can see, the command line can be very powerful. And typically it runs much quicker than most GUI file transfer applications.

    Please see either the GSLIS Unix Tutorial or my Unix Tutorial (unfinished) for more information about how to use the Unix/Linux command prompt.

    Software

    Below is some software for different platforms that can help you ssh into the GSLIS infrastructure or securely copy files over.

    Windows

    • WinSCP download page, click here to download the most stable version directly.
      • Only file transfer
      • One of the best of the open source, free applications being developed
    • PuTTY, or download direct.
      • Most useful for remote login. From the download page there are also file transfer clients available, but generally, WinSCP works better.

    Macintosh

    Any macintosh running OS X should come with SSH (remote login) and SCP (file transfer) installed and available through the command line.

    If you prefer a Graphical User Interface (GUI) application, try Cyberduck.

    Linux and other operating systems

    • PuTTY download page.
      • Most useful for remote login, but there are also file transfer clients available.

    Text Editors

    Windows

    • Textpad is an excellent text editor. It is not free, but you can download a trial version and use it indefinitely. However, I think it is well worth the cost to purchase, and have bought my own license for the software.
    • EditPad Lite (download directly) is the free version, there is also EditPad Pro. Editpad is a pretty good text editor. It is pretty reliable. However, it is often difficult to know whether you are actually saving documents in a particular encoding. I gave up using Editpad Lite when I had to use command-line functions to check the encoding format of my files.
    • Notepad is the text editor that comes with windows. It is a really poor text editor, that is unreliable, crashes on occasion with files that are too large, and sometimes screws up the display so that you are not typing where you think you are typing in a particular file. I strongly advise you not to use notepad for anything except the simplest HTML.

    Mac

    • TextWrangler is a good editor. It comes with full Unicode support, line numbers (see below), and text highlighting to make coding easier. And now we have it installed on our classroom computers! When you use TextWrangler, there may be a number of default settings you will probably want to change. First, if you are planning to open multiple files, you probably want to use the "Documents Drawer" by clicking the icon in the upper-right hand corner of the editor (it has an arrow on it). Second, in the preferences menu (click the TextWrangler dropdown menu, then click Preferences):
      • Editing: Keyboard - "Home" and "End" keys: Move cursor to beginning and end of current line.
      • Editor: Defaults - Soft wrap text, Wrap to: Window Width.
      • Editor: Defaults - Default font: (Set...) - Change size to 11? 12? Whatever you can see best.
      • Click the "open drawer" icon.
    • JEdit is a multiplatform text editor written in Java. Unfortunately, it is often slow, somewhat unstable (it crashes a lot), and has some unexpected behavior that can make it confusing or frustrating to use. While it is free, I don't really recommend using it. It does, however, support Unicode properly, and has line numbers and text highlighting. It is one of the text editors currently available in our classroom.
    • TextEdit is the text editor that comes with Mac OSX, but I have found it to be problematic. First, while it supposedly supports unicode, and can save in UTF-8 format, it does not always save symbols properly. I have had files which were corrupted before because TextEdit used the wrong UTF-8 code for a particular symbol. Second, it does not have line numbers. While this is not a big deal for the early labs we will be doing, once you start creating files that are longer, and are required to validate them, finding validation errors without line numbers becomes extremely difficult. Therefore, while TextEdit is ok, I much prefer to use TextWrangler.

    Web Browsers

    Browser Extensions

    WebDav

    WebDAV is another standard which supports remote file access via a set of extensions to the HTTP protocol. The benefit of the WebDAV standard is that most operating systems allow you to integrate files on remote computers directly into your file system. Thus, you can edit the files using the applications you are familiar with directly from your personal computer.

    WebDAV is an abbreviation for "Web-based Distributed Authoring and Versioning". For more information about WebDAV please see the WebDAV Resources site. You may also find the WebDAV wikipedia article useful.

    WebDAV Links

    • https://webdav.lis.illinois.edu/homei/users/ifloyd2/ - I: Drive
    • https://webdav.lis.illinois.edu/ifloyd2/home/ - H: Drive
    • https://netfiles.illinois.edu/ifloyd2/ - Netfiles

    Instructions

    For the GSLIS documentation of how to use WebDAV, click here.

    Rich Web Development Applications

    These applications cannot be used in the class for completing your assignments. However, you may find them useful in your own work after the class is completed. All of the applications listed here are free, and most are open source as well.

    Professional Web Development Environments

    These applications not only provide a means for coding HTML that have significantly more functionality than standard text editors, they also have advanced features such as server integration; IDE-type support for javascript, ajax, php, etc.; virtual server support; etc.

    • Aptana - the Community Edition of the Aptana Studio 1.2RC Bundle (free, and supposedly open source) is quite powerful. Only if you are doing advanced professional web development will you need the Professional Edition. If you don't want something as big (and you do want something a bit more stable), just download the unbundled studio version of the Community Edition.

    HTML Graphical Editors

    By the time you complete this class, you will probably find these editors unwieldy, and not as useful because they don't give you the power over the HTML & CSS which you are accustomed to. However, they can still be useful editing environments for small projects. These editors are basically free applications which serve the same purpose as Dreamweaver. I don't ever use these kinds of application.

    • Seamonkey - a free OSS HTML editor created by the Mozilla foundation, it also has supplemental capabilities, including: web browsing, e-mail, newsgroups, and IRC chat.
    • HTMLKit - another free HTML editor. Some people find this one easier to use than Seamonkey.

    Web Servers (local or other install)

    • Apache Friends XAMPP - A relatively easy to install Apache distribution that contains MYSQL, PHP, and Perl. This distribution is great for installing Apache on your personal machine, whether laptop or desktop. It more or less runs 'out-of-the-box'.

    Free, Downloadable Images

    Sites with free, downloadable images which you can use on your own websites as long as you adhere to the licenses. Most are under one of the Creative Commons licenses, so make sure you understand the terms of use before using the images in your own websites. Ask me if you have any questions about what the licenses mean; I'll do my best to answer them (but I'm not a lawyer).

    Website Evaluation Schemes

    Internet and Web Statistics

    It is sometimes interesting to look at the growth of the internet and at demographic issues such as the digital divide. The following sites give some resources for doing such research. Be a bit wary of the sites listed below. For example, the Pew foundation is probably one of the more reliable sites for statistics, but they do have a pro-internet bias which colors their results. OCLC is also reliable, but it is not so clear how reliable some of the other sources are. Use your best judgment when evaluating these other sources.

    Course-Related Links

    UIUC Course-Related Links

    General GSLIS Links

    Other Links