INFO 2106 2-17-25.pptx Course Slide Deck

INFO 2106
Website Design and Management
Professor Matt Marino
2/17 – Advanced JavaScript

2
FOR vs. While loops
For loop requires 3 lines of code in the header
a) Initializer
b) Boolean statement (if true the loop runs)
c) 1 Statement that runs after the loop completes
While loop has more freedom:
d) Initialization is done prior to the loop (no limit on lines)
e) Boolean statement – same as the FOR loop
f) 0 to n statements to the loop to terminate.

String Encryption
You have an account on facebook, LinkedIn,YouTube etc.
 Your login: costanza@seinfeld.com
 Your password is : bosco
If this data was stored in a database, it might look like:
USERID PASSWORD FIRSTNAME …
… …
jerry@seinfeld.com superman Jerry …
costanza@seinfeld.com bosco George ..
… … … ..

String Encryption
The problem is if any employee at Facebook or someone who hacks into the server,
got a dump of this data, they would have <userid, password> pairs of millions of
people.
People typically user their email address as their userid and also do not have a many
different passwords for every website they have an account on (banks, stores,
stubhub, facebook, linkedIn, Google)

String Encryption - Algorithm
Simple Encryption Algorithm
- For each letter in the word
- Change it to the next letter in the alphabet (z  a)
Example 1)
unencrypted password = “abc”
encrypted password = “bcd”
Example 2)
unencrypted password = “bosco”
encrypted password = “cptdp”

Database with Encrypted passwords
Now the database would look like
USERID PASSWORD FIRSTNAME …
… …
jerry@seinfeld.com tvqfsnbo Jerry …
costanza@seinfeld.com cptdp George ..
… … … ..

Encryption Algorithm’s Rainbow
 Suppose you don’t know what the encryption algorithm does but you have access
to a function that can encrypt words.
encrypt(“bosco”)  “cptdp”
You could compute the encrypted word for every possible unencrypted word.
This computation is sometimes called the Rainbow or Spectrum of the Encryption
Algorithm.

Rainbow
Write a program that creates
every string from 1 to 8
character of the alphabet (not
numbers or any other
character), then inputs them
into the encryption algorithm
and record the
<unencrypted, encrypted>
pairs in a massive table
Word Encrypted Word
a b
b c
… …
aa bb
… …
zz aa
… …
boscn cptdo
bosco cptdp
boscp cptdq
… …
superman tvqfsnbo

Time to calculate the Rainbow
For our example where only 8
alphabetic characters can be
used, there are over 217 Trillion
combinations of possible inputs
that we would have to encrypt to
calculate the Rainbow
Letters Combinations
1 26
2 676
3 17576
4 456976
5 11881376
6 308915776
7 8031810176
8 2.08827E+11
Total 2.1718E+11

Algorithm for generating Rainbow
Rainbow generating algorithm looks like
for every word in (a  zzzzzzzz)
encryptedWord = EncryptionAlgorithm(word)
writeToRainbow (word, encryptedWord)

Time and Space for Rainbow
Suppose you have the latest processor 10 gigahertz
(approx. 10 billion instructions/second) and you have 217 trillion instructions to do,
how long would it take?
217 trillion/10 billion = 21,700 seconds = 6 hours
***Of course months would be more realistic
Each <word,EncryptedWord> pair is 16 characters and there are 217 trillion of them
so
[(217 trillion) * 16]/1 Gigabyte = 3Terrabytes

Key (a.k.a Salt) Encryption
 The User provided an unencrypted password
 The website provides a salt (some word)
Example ) password = “bosco” salt = “12345”
Encrypt (“bosco”,”12345”) = “cqvgt”
This required 2 things to encrypt a password:
1) The password (only known to the user)
2) The salt (only known to the website)
A hacker would have to compute the algorithm rainbow for every salt possible

3 Encryption algorithms in PHP
 MD5
 SHA-1
 CRYPT(password, salt)

LinkedIn (2012 unsalted SHA-1)
 In 2012, hackers (not known if it was an inside job) go into the database of LinkedIn and
dumped the password table which contained 6.5 encrypted passwords.
 Inputting these encrypted passwords into a SHA-1 unsalted rainbow generated table, showed
English-like words being produced as unencrypted passwords.
http://techcrunch.com/2012/06/06/6-5-million-linkedin-passwords-reportedly-leaked-linkedin-is-looking-into-it/

2 Way (encryption/decryption)
 This simple algorithm of adding 1 letter value is decryptable.
That is, if you know the encryption algorithm, since it is reversible, you know how to
decrypt and encrypted word.
It would be better if the encryption was one way.

1 way Encryption
Simple but bad Example)
Algorithm) take numerical value of all inputs and multiply them together and store
the result
Password = “cat” encrypted password = 3*1*20 = 60
What’s the encrypted password for “feb” ? = 6*5*2 = 60 also
Even if you know the algorithm you could decrypt 60  “cat”

Public-Private Key Encryption
A Encryption/Decryption public algorithm that all encrypted messages sent to you can only be
decrypted by you.
You ask the public algorithm for a public key and a private key
You know your public and private key values.
You publish your public key to anyone who wants to send an encrypted message to you.
They encrypt a message using the public algorithm and your public key.
You receive the message and decrypt it using you private key.

Public-Private Key Example
You request a public key and private key and you get
Public key: “+60+20” and Private key “-C”
You publish your public key: “+60+20” on you website
Someone wants to send you “bosco” encrypted so only you can see:
They: Encrypt(“bosco”,“+60+20” ) = “ervfr”.
You: Decrypt(“ervfr”, “-C”) = “bosco”
Encryption: (+60/+20) = +3 so increment all letters by +3
Decryption –C = -3 so decrement letters by 3
There is a mathematical correlation between the public key and private key
Public key:“+30-3” and Private Key: “+J” would be a valid combination for this encryption/decryption algorithm

HTTP: HyperText Transfer Protocol
When you go to a website using the URL
HTTP://www.somewebsite.com
Communication is not encrypted.
If a form asked you for email and password and you fill it in and hit enter, a message something like
will be sent along all connections from you to the website server (i.e. the coffee shop wifi you are
connected) and anyone dumping data will be able to read it.
To: www.somewebsite.com
From: IP address: 123.45.67.890 port:3000
Message: email(george@seinfeld.com) password(bosco)

HTTPS: (a.k.a. Secure HTTP)
When you go to a website using the URL
HTTPS://www.somesecurewebsite.com
Communication is encrypted.
If a form asked you for email and password and you fill it in and hit enter, a message something like
Using public key private key encryption, the server sends your web browser it’s public key and
encryption algorithm (you don’t even realize it) and your messages are encrypted with it and sent back
to the server where the server decrypts it with the servers private key.
To: www.somesecurewebsite.com
From: IP address: 123.45.67.890 port:3000
Message: fnbjm(hfpshf#tfjogfme.dpn) qbttxpse(cptdp)

SSL (Secure Socket Layer)
 SSL is the predecessor toTLS (Transport Layer Security)
 Certificate Authorities (CA’s) issue public/private …

JavaScript that gets the current date and year
<p>
<script>
var today = new Date();
document.write("Current date: ");
document.write(today.toDateString());
</script>
</p>
<p>
<script>
var today = new Date();
document.write("© ");
document.write(today.getFullYear());
document.write(", San Joaquin Valley Town Hall")
</script>
</p>

The code for a web page
<!DOCTYPE html>
<html>
<head>
<title>Join Email List</title>
</head>
<body>
<h1>Please join our email list</h1>
<form id="email_form" name="email_form"
action="join.php" method="get">
<label for="email_address">Email Address:</label>
<input type="text" id="email_address">
<span id="email_error">*</span>
</form>
</body>
</html>

The HTML file for the Email List application
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="email_list.css">
<script src="email_list.js"></script>
</head>
<body>
<main>
<label for="email_address1">
Email Address:</label>
<input type="text" id="email_address1"
name="email_address1">
<span id="email_address1_error">*</span><br>

The HTML file for the Email List app (continued)
Re-enter Email Address:</label>
<span id="email_address2_error">*</span><br>
<label for="first_name">First Name</label>
<input type="text" id="first_name"
name="first_name">
<span id="first_name_error">*</span><br>
<label> </label>
<input type="button" id="join_list"
value="Join our List">
</form>
</main>
</body>
</html>

The Email List application with JavaScript

The code for the JavaScript file (email_list.js)
var $ = function (id) {
return document.getElementById(id);
}
var joinList = function () {
var emailAddress1 = $("email_address1").value;
var emailAddress2 = $("email_address2").value;
var isValid = true;
if (emailAddress1 == "") {
$("email_address1_error").firstChild.nodeValue =
"This field is required.";
isValid = false;
}
else {
""; }

The code for the email_list.js file (continued)
if (emailAddress1 !== emailAddress2) {
"This entry must equal first entry.";
isValid = false;
}
else {
""; }
...
if (isValid) {
// submit the form if all entries are valid
$("email_form").submit();
}
}
window.onload = function () {
$("join_list").onclick = joinList;
}

The JavaScript in a file named printPage.js
var $ = function (id) {
// this function returns the object for the element
return document.getElementById(id);
}
var printPage = function() {
// this is the event handler
// for the click event of the button
window.print();
}
window.onload = function() {
// this is the event handler for the onload event
$("printButton").onclick = printPage;
}
HTML that includes the JavaScript file
<script src="printPage.js"></script>
HTML for the Print the Page button
<input type="button" id="printButton"
value="Print the Page">

INFO 2106
2/24 – Advanced JavaScript

The Email List application using jQuery

The HTML for the Email List with jQuery app
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="email_list.css">
<script
src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="email_list.js"></script>
</head>
<body>
<main>
Email Address:</label>
<span>*</span><br>

The HTML for the Email List jQuery app (cont.)
Re-enter Email Address:</label>
<span>*</span><br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name"
name="first_name">
<span>*</span><br>
<label> </label>
<input type="button" id="join_list"
value="Join our List">
</form>
</main>
</body>
</html>

The jQuery for the Email List application
$(document).ready(function() {
$("#join_list").click(function() {
var emailAddress1 = $("#email_address1").val();
var emailAddress2 = $("#email_address2").val();
var isValid = true;
// validate the first email address
$("#email_address1").next().text(
"This field is required.");
isValid = false;
}
else {
$("#email_address1").next().text("");
}

The jQuery for the Email List app (continued)
// validate the second email address
isValid = false;
}
else if (emailAddress1 != emailAddress2) {
"This entry must equal first entry.");
isValid = false;
}
else {
$("#email_address2").next().text("");
}

The Email List jQuery (continued)
// validate the first name entry
if ($("#first_name").val() == "") {
$("#first_name").next().text(
isValid = false;
}
else {
$("#first_name").next().text("");
}
// submit the form if all entries are valid
if (isValid) {
$("#email_form").submit();
}
}); // end click
}); // end ready

The user interface for the Image Swap application

The script elements for the image swap
<script src="jquery-3.2.1.min.js"></script>
<script src="image_swaps.js"></script>

The HTML for the images
<main>
<h1>Ram Tap Combined Test</h1>
<ul id="image_list">
<li><a href="images/h1.jpg"
title="James Allison: 1-1">
<img src="thumbnails/t1.jpg" alt=""></a></li>
...
</ul>
<h2 id="caption">James Allison 1-1</h2>
<p><img src="images/h1.jpg" alt="" id="image"></p>
</main>

The CSS for the li elements
li {padding-right: 10px; display: inline; }

A Slide Show application with fading out and in

The script elements for the slide show
<script src="jquery-3.2.1.min.js"></script>
<script src="slide_show.js"></script>

The HTML for the slide show
<section>
<h1>Fishing Slide Show</h1>
<h2 id="caption">Casting on the Upper Kings</h2>
<img id="slide" src="images/casting1.jpg" alt="">
<div id="slides">
<img src="images/casting1.jpg"
alt="Casting on the Upper Kings">
<img src="images/casting2.jpg"
alt="Casting on the Lower Kings">
<img src="images/catchrelease.jpg"
alt="Catch and Release on the Big Horn">
<img src="images/fish.jpg"
alt="Catching on the South Fork">
<img src="images/lures.jpg"
alt="The Lures for Catching">
</div>
</section>

The critical CSS for the slide show
#slides img { display: none; }

Regex in JavaScript
<script>
function myFunction() {
var str = "Java Script";
var patt = /java/i; // The patt “java” appears in str i=don’t consider case
var result = str.match(patt);
document.getElementById("demo").innerHTML = result;
}
</script

Simple validation of an Email Address
function emailIsValid (email)
{
return /S+@S+.S+/.test(email) // returns true or false
}

Advanced JavaScript Assignment
• Using this week’s slideshow create an email list application using jQuery
• This should include an HTML file and a JS file

INFO 2106
3/3 – Advanced PHP

PHP Review
• Server-side programming language
• Designed for quick development of HTML based dynamic web pages
• Server side scripts embedded in HTML pages
• <?php …… ?>
• PHP runs on the server, just like CGI scripts.
• The client does not see the PHP code - only the results.

PHP Variables Review
• Variables in PHP are dynamically typed - no need to declare them
• - PHP is a weakly-typed programming language
• Variable names begin with $ then a character (not number)
• $value = 1;
• $x = 1.432344;
• $myName = “Rasmus Lerdorf”;
• yourName = “Zeev Suraski”; //invalid, missing $
• $7eleven = “McGyver”; //invalid, starts with a number

Catching PHP vs. HTML
• <html><head><title>1st PHP</title></head><body>
• <?php
• print "This line was PHP generated";
• ?>
• <p> This line was not... </p>
• <?php
• print "This line was also PHP generated";
• ?>
• </body></html>

PHP WYSIWYG Link
• https://www.w3schools.com/php/phptryit.asp?filename=tryphp_intro
• Displays text using echo
• Can be modified to display any text

Simple PHP Code to Display Text
<HTML>
<HEAD>
<TITLE> Hello World in PHP </TITLE>
</HEAD>
<BODY>
<?php
// Hello world in PHP
print("Hello World");
?>
</BODY>
</HTML>
Assuming your server has PHP
installed the page will display the text
Hello World

Opening a File Using PHP
• On the WYSIWYG PHP Editor we have the following:
We will use the text file, "webdictionary.txt", during the lessons:
• AJAX = Asynchronous JavaScript and XML
CSS = Cascading Style Sheets
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Structured Query Language
SVG = Scalable Vector Graphics
XML = EXtensible Markup Language

PHP Code to open and display
(echo)
<!DOCTYPE html>
<html>
<body>
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
echo fread($myfile,filesize("webdictionary.txt"));
fclose($myfile);
?>
</body>
</html>
Display Output Below

Retrieving Stock Info
(stocks.html)
<HTML>
<HEAD>
<TITLE> Stock Quotes </TITLE>
</HEAD>
<form method="post" action=“stocks.php">
<label for="symbol">Enter Stock symbol: </label> <input type="text" name="symbol"
id="symbol">
<input type="Submit" value="Get Stock Quote">
</form>
</BODY>
</HTML>

Retrieving Stock Info (stocks.php)
<HTML>
<HEAD>
<TITLE> Stock Quotes
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<?php
$company = $_POST[symbol] ;
$url = "http://finance.yahoo.com/q?s=" . $company;
//open the url and store in $fp
$fp = fopen($url , "r");
//read 20000 bytes of the file
$readfile = fread($fp , 20000);
//search for the HTML below and store everything in between in $content
$readfile = ereg("<TABLE border=0 cellPadding=2 cellSpacing=0
width=100%>(.*)<small>Add</small>" , $readfile, $content);
//display the results in a table
echo "<table width = '100%’>”;
echo $url;
echo $readfile;
echo "$content[1]";
echo "</table>";
//close the file handle
fclose($fp);
?>
PHP Code Goes
in BODY

Using PHP to Create and Write to a
File
<?php
$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
$txt = "John Doen";
fwrite($myfile, $txt);
$txt = "Jane Doen";
fwrite($myfile, $txt);
fclose($myfile);
?>

Displaying Date and Time
<!DOCTYPE html>
<html>
<body>
<?php
echo "Today is " . date("Y/m/d") . "<br>";
echo "Today is " . date("Y.m.d") . "<br>";
echo "Today is " . date("Y-m-d") . "<br>";
echo "Today is " . date("l");
?>
</body>
</html>
These three rows
represent different display
formats

PHP Form Validation Example
• Code in Notes
Only the fields with
* are required
Your input will be displayed here

PHP Interactions
• JSON
• AJAX
• HTML
• XML
• SQL
• Helps us combine many of our web development tools

INFO 2106
3/17 – Advanced PHP

Creating a Table of Datatypes
datatypes.php
<?php
class Car {}
$boolean = true;
$integer = 123;
$integer_negative = -13;
$float_double = 12.35;
$string = "Hello World";
$array = array('one', 'fish', 'two', 'fish', 'red', 'fish');
$object = new Car();
//$resource = mysql_connect();
$null = NULL;
?>

datatypes.php
<table border='1px solid;'>
<tr>
<th>Type</th>
<th>Value</th>
<th>gettype() response</th>
</tr>
<tr>
<td>Boolean</td>
<td><?= $boolean ?></td>
<td><?= gettype($boolean); ?
></td>
</tr>

datatypes.php
<tr>
<td>Integer</td>
<td><?= $integer ?></td>
<td><?= gettype($integer);
?></td>
</tr>
<tr>
<td>Integer Negative</td>
<td><?= $integer_negative
?></td>
<td><?=
gettype($integer_negative);
?></td>
</tr>

datatypes.php
<tr>
<td>Float</td>
<td><?= $float_double ?></td>
<td><?=
gettype($float_double); ?></td>
</tr>
<tr>
<td>String</td>
<td><?= $string ?></td>
<td><?= gettype($string);
?></td>
</tr>

datatypes.php
<tr>
<td>Array</td>
<td><?= implode(',', $array); ?
></td>
<td><?= gettype($array); ?></td>
</tr>
<tr>
<td>Object</td>
<td><?php print_r($object);
?></td>
<td><?= gettype($object);
?></td>
</tr>

datatypes.php

<tr>
<td>Null</td>
<td><?php print_r($null); ?></td>
<td><?= gettype($null); ?></td>
</tr>
</table>

Basic Form HTML Side
(fullname.html)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Fullname form</title>
</head>
<body>
<h2>Simple Fullname</h2>
<form action="fullname.php" method="post">
First Name:
<input type="text" id="firstname" name="firstname" /><br />
Last Name:
<input type="text" id="lastname" name="lastname" /><br />
<input type="submit" value="Report Full Name" name="submit" />
</form>
</body>
</html>

Basic Form PHP Side (fullname.php)
<html>
<head>
<title>Full Name</title>
</head>
<body>
<h2>Full Name</h2>
<?php
$first_name = $_POST['firstname'];
$last_name = $_POST['lastname'];
echo "Hi " . $first_name . " " . $last_name . ". Thanks for submitting the form!";
?>
</body>
</html>

Postform.html
<html>
<head>
<title>HTML Form using POST</title>
</head>
<body bgcolor="lightblue"><font size="+1">
<form action="postformprocess.php"
method="POST">
<p>
Please enter your name: <br />
<input type="text" size=50
name="your_name">
<p>
Please enter your phone: <br />
name="your_phone">
<p>
Please enter your email
address:<br />
name="your_email_addr">
<p>
<input type=submit value="submit">
<input type=reset value="clear">
</form>
<hr>
</body>
</html>

Postformprocess.php
<html>
<head>
<title>Process Form using POST</title>
</head>
<body bgcolor = "lightgreen"><font size="+1">
<h2>Here is the form input:</h2>
<?php
$name = $_POST['your_name'];
$phone = $_POST['your_phone'];
$email = $_POST['your_email_addr'];
print "Welcome to PHP $name!<br />";
print "Can I call you at $phone?<br />";
print "Is it ok to send you email at $email?<br />";
?>
</body>
</html>

Advanced PHP HW assignment
• Create a form with information you may want to retrieve on your own
personal website, such as name, email, comment, etc.
• Create a HTML form to accept the input and a PHP file to retrieve and
echo the input
• This will require an HTML file and a PHP file
• Remember that your PHP file may not display the input for you in the
WYSIWYG, but if I upload it to my server it should work so long as your inputs
match your outputs [variable you create in the HTML form must match the
variable you POST]

INFO 2106
3/24 – Databases

Primary Storage
Main Memory
The storage medium used for data that is available to be operated on is main memory. The CPU
operates on the main memory.
Cache memory
The cache is the fastest from of storage. Cache memory is small: its use is managed by the
computer system hardware. It is typically a subset of Main Memory.
Flash Memory
Also known as electrically erasable programmable read-only memory (EEPROM). Differs from
main memory in that data survives power failures.

Secondary Storage
Magnetic Disk
The primary medium for the long-term on-line storage of data is the magnetic disk.
Optical Disk
The most popular forms of optical storage are the compact disc(CD) which can hold 640
megabytes of data, and the Digital Video Disk (DVD).
Magnetic Tape
Used primarily to backup disks.

File System
A file system is a means to organize data expected to be retained after a program terminates by
providing procedures to store, retrieve and update data as well as manage the available space on
the device(s) which contain it.
A file system organizes data in an efficient manner and is tuned to the specific characteristics of
the device.
A tight coupling usually exists between the operating system and the file system
79

Secondary Storage
File systems are used on data storage devices, such as
I. hard disk drives,
II. floppy disks,
III. optical discs, or
IV. flash memory storage devices,
to maintain the physical locations of the computer files.
They may provide access to data on a file server by acting as clients for a network protocol (e.g. NFS, SMB, or 9P
clients),
80

File names
A file name (or filename) is used to reference the storage location in the file system. Most file
systems have restrictions on the length of the filename
Most file system interface utilities have special characters that you cannot normally use in a
filename (the file system may use these special characters to indicate a device, device type,
directory prefix or file type).
Some file system utilities, editors and compilers treat prefixes and suffixes in a special way.
These are usually merely conventions and not implemented within the file system.
81

Metadata (data about data)
Other bookkeeping information is typically associated with each file within a file system.
The length of the data contained in a file may be stored as the number of blocks allocated for the
file or as a byte count.
The time that the file was last modified may be stored as the file's timestamp. File systems might
store the file creation time, the time it was last accessed, the time the file's meta-data was
changed, or the time the file was last backed up.
82

Utilities
File systems include utilities to initialize, alter parameters of and remove an instance of the file
system.
Directory utilities create, rename and delete directory entries and alter metadata associated with a
directory.
File utilities create, list, copy, move and delete files, and alter metadata. They may be able to
truncate data, truncate or extend space allocation, append to, move, and modify files in-place.
Also in this category are utilities to free space for deleted files if the file system provides an undelete
function.
83

Access and permission
There are several mechanisms used by file systems to control access to data.
Usually the intent is to prevent reading or modifying files by a user or group of users.
Another reason is to ensure data is modified in a controlled way so access may be restricted to a
specific program.
Examples include passwords stored in the metadata of the file or elsewhere and file permissions
in the form of permission bits, access control lists, or capabilities.
84

User Data
The most important purpose of a file system is to manage user data. This includes storing,
retrieving and updating data.
Some file systems accept data for storage as a stream of bytes which are collected and stored in
a manner efficient for the media.
When a program retrieves the data it specifies the size of a memory buffer and the file system
transfers data from the media to the buffer
85

Network File system
A network file system is a file system that acts as a client for a remote file access protocol,
providing access to files on a server.
Examples of network file systems include clients for the NFS, AFS, SMB protocols.
NFS
I. Network File System (NFS) is a distributed file system protocol originally developed by Sun Microsystems in 1984,[1]
allowing a user on a client computer to access files over a network in a manner similar to how local storage is
accessed.
II. NFS, like many other protocols, builds on the Open Network Computing Remote Procedure Call (ONC RPC) system.
III. The Network File System is an open standard defined in RFCs, allowing anyone to implement the protocol.
86

Logical files
Sequential Access - allows data to be read from a file or written to a file from beginning to end.
It is not possible to read data starting in the middle of the file, nor is it possible to write data to
the file starting in the middle using sequential methods.
Word, PowerPoint etc. Documents are sequential
The input and output streams in Java are sequential.
Direct Access - permit nonsequential, or random, access to a file's contents. You can "seek" to
any particular location within a file specifying the number of bytes.
Database records are random access files.
87

Sectors, Tracks and Blocks
89
Tracks – rings on the disk
Sectors – slices of the disk
Blocks – part of a track from
sector boundary to sector
boundary.
Example) Block Address
Block address for track 3
sector 2 could be <3,2>

Linear view of disk
Blocks = <track,sector>
90
<0,0> <0,1> <0,2> <0,3> <1,0> <1,1> <1,2>

Directories (folders)
Collections of files and Directories
Attributes of a file
- filename
- file type(extension) (ex: Word, PowerPoint etc.)
- owner ID
- date created
- date last modified
Non-visible attributes of a file
- file location on disk <track,sector>
- file internal type (ex: contiguous, linked, indexed)
91

Contiguous Allocation
File A can fix in 1.5 blocks
File B can fit in 1.5 blocks
File C can fit in 0.7 blocks
IF – Internal fragmentation
EF – External fragmentation after File B is deleted
92
File A File B File C Free Free
IF IF IF
File A EF EF File C Free Free
IF IF

Files that can’t fit contiguously
Suppose the disk has the following free spaces(blocks) between files.
You want in insert a file that is too big to fit in any free space contiguously but small enough to
fit within the total of all free spaces.
What can you as the operating system, do?
- defragment the disk (takes a lot of time)
- scatter the file though out the free spaces
93
File A File B File C File D

File Space Allocation Methods
Contiguous Allocation – File data is located on disk physically together. Block after block.
Linked Allocation – File data is located on disk in non-contiguous block locations where each
block contains the address of the next block.
Indexed Allocation – File data is located on disk in non-contiguous block locations and there is
also an index (block(s) of storage) that contains the locations of the files blocks
94

Contiguous Allocation
- User must indicate the size of the file before allocating it.
◦ - Files may grow and shrink dynamically making this difficult
- Directory entry contains <initial block address> , <#block>
◦ - If an N block file starts at block B, then the last block is B+N-1
- External fragmentation may occur
95

Linked Allocation
- File blocks are chained into a linked list on the disk
◦ - files may grow and shrink dynamically making this difficult.
- File size doesn’t not need to be specified when allocating it.
- Directory entry contain <initial block address> , <last block address>
◦ - If an N block file starts at block B, then the last block is B+N-1
- No external fragmentation occurs
- internal fragmentation (links and last block wasted space)
97

Indexed Files
- Each file has an index block that is an array of disk block addresses
- The i-th entry in the index block is the i-th block of the file.
- A file directory entry contains the address of the index block.
- Supports sequential and direct access files without external fragmentation.
- Internal fragmentation (index(s), wasted space in index blocks, wasted space last file block)
- When the index is larger that 1 block, multiple index blocks could be contiguous, linked or
indexed (tree).
99

If the index can’t fit in a block
The index is a collections of <track,sector> pairs.
If the index is so big, in must span multiple blocks:
- contiguous index - linear
- linked index – linked list
- indexed index (multiple levels of indices) - tree
101

De-fragment and congiguize
102

File seek time (find Track)
Files stored on a round rotating disk with a moveable read/write head
will take some time to access the data. The access time is modeled by:
T = s + (m*n)
s = startup time
T = estimated seek time
n = number of tracks traversed.
m = constant that depends on the disk drive.
For example, an inexpensive hard disk on a personal computer might be
approximated by m = 0.3 ms, s = 20 ms, while more expensive disk drive
might have m = 0.1 ms and s = 3ms.
Rotational delay, typically disks rotate at 3600 rpm, which is 16.7 ms per
rotation. Which is on average, a half a rotation is 8.35 ms.
103

File Transfer time/Total time
Transfer time can be modeled as:
T = b/rN
T = transfer time
b = number of bytes to be transferred
N = number of bytes on a track
r = rotation speed, in revolutions per second
The total average access time can be expressed at:
T = (Track seek time) + (rotational delay) + (Transfer time)
= (s + (m*n)) + +
104

Seek Time algorithms
FCFS (First-Come-First-Serve) There is no reordering of the queue.
SSTF (Shortest-Seek-Time-First) Disk arm is positioned next at the request (inward or outward)
that minimizes arm movement
SCAN Disk arm sweeps back and forth across the disk surface, serving all requests in its path. It
changes direction only when there are no more requests to service in the current direction.
C-SCAN (Circular-SCAN) Disk arm moves unidirectional across the disk surface toward the inner
track. When there are no more requests for service ahead of the arm, it jumps back to surface
the request nearest the outer track and proceeds inward again.
N-Step scan Disk arm sweeps back and forth as in SCAN, but all requests that arrive during a
sweep in one direction are batched and reordered for optimal service during the return sweep.
105

File Type: Direct Access
Records are directly (randomly) access by their physical address on the direct access storage
device (DASD). The application user places the records on the DASD in any order appropriate for
a particular application. Hashing techniques are often locating data in a Direct access file.
Direct Access Files exploit the capability found on disks to access directly any block of a known
address. A key field is required in each record. There is no order to the records.
106

Record Blocking (Direct)
Fixed Blocking
Fixed length records are used, and an integral number of records are stored in a block. There
may be unused space at the end of each block.
Variable-length spanned blocking
Variable-length records are used, and are packed into blocks with no unused space. Thus, some
records must span two blocks, with the continuation indicated by a pointer to the successor
block.
Variable-length unspanned blocking
Variable-length records are used, but spanning is not employed. There is wasted space in most
blocks because of the inability to use the remainder of the block if the next records is larger that
the remaining unused space.
107

Access Methods
Queued Access
Used when the sequence in which records are to be processed can be anticipated, such as in
sequential and indexed sequential accessing. The queued methods perform anticipated
buffering and scheduling of I/O operations. They try to have the next record available for
processing as soon as the previous one is processed.
Basic Access
Used when the sequence in which records are to be processed cannot be anticipated.
108

RAID
(Redundant Array of Inexpensive Disks)
109

Databases for Storage
• Databases allow us to store tons of information in an organized space
• In many cases you can store multiple databases on one server
• You may have experienced using databases if you have used Microsoft
Access, but more individuals use databases through online means, such
as MySQL
• Databases allow for the retrieval of all of the information you have stored
as well.

INFO 2106
3/31 – Databases

Cell phone: Storing your contacts info
Contacts - table
first name last name email home phone cell phone work phone
Joe Smith js@bu.edu 908-123-4567 201-123-4567
Mary Jones mj@bu.edu 732-987-6543 908-987-6543

Contacts improvement (version 1)?
Contacts - table
first name last name email phone number phone type
Joe Smith js@bu.edu 908-123-4567 cell
Mary Jones mj@bu.edu 732-987-6543 home
Joe Smith js@bu.edu 201-123-4567 work
Mary Jones mj@bu.edu 908-987-6543 cell

Contacts improvement (version 2)?
Contact Tables
Contact Table Email - Table Phone - Table
ID first name last name ID Email type ID number type
1 Joe Smith 1 js@bu.edu school 1 908-123-4567 cell
2 Mary Jones 2 mj@bu.edu school 1 201-123-4567 work
2 mj@work.com work 2 732-987-6543 home
2 908-987-6543 cell

Entity-Relationship model
The E-R data model is based on a perception of a real worked that consists of a collection of basic
objects, called entities and of relationships among these objects

Database Languages
DDL (Data-Definitions Language)
One to specify the database schema
One to express the database queries
DDL (Data-Definitions Language)
The database schema is specified by a set of definitions expressed by a special language called the DDL. The result of
compilation of DDL statements is a set of tables that are stored in a special file called the data dictionary.
DML(Data Manipulation Language)
Retrieval of information stored in the database
The insertion of new information into the database
The deletion of information from the database
The modification of information stored in the database

DBA (DataBase Administrator)
Schema definition
Storage structure and access-method definition
Schema and physical-organization modification
Granting of authorization for data access
Integrity-constraint specification.

Database Users
Application Programmers – Professionals who interact with the system through DML calls, which
are embedded in a program written in a host language like Cobol, C, C++, Java, C#, php,)
Sophisticated Users – form their requests in a database query language. Each query is submitted
to a query processor whose function is to break down DML statements into instructions that the
storage manager understands.

Query Processor Components
DML Compiler – translates DML statements of a query language into low-level instructions that
the query evaluation engine understands.
Embedded DML precompiler – converts DML statements embedded in an application program to
normal procedure calls in the host language.
DDL Interpreter – interprets DDL statements and records them in the set of tables containing
metadata.
Query Evaluation Engine – executes low-level instructions generated by the DML compiler.

Storage Manager
Authorization and Integrity Manager – tests for the satisfaction of integrity constraints and
checks the authority of users to access data.
Transaction Manager – ensures that the database remains in a consistent state despite system
failures
File Manager – manages the allocation of space on disk storage and the data structures used to
represent information stored on disk.
Buffer Manager – responsible for fetching data from disk storage into main memory, cache
memory.

Physical System
Data Files – stores the database itself.
Data Dictionary – stores metadata about the structure of the database.
Indices – provide fast access to data items that hold particular values.
Statistical data – store statistical information about the data in the database. Use for efficient
executions.

Users
Applications
DBMS
Disk Storage

E-R diagram
• Rectangles – Represent entity sets
• Ellipses – Represent attributes
• Diamonds – Represent relationship sets
• Lines – Link attributes to entity sets and entity sets to relationship sets
• Double ellipses – Represent multivalued attributes
• Dashed ellipses – Denote derived attributes
• Double Lines – Indicate total participation of an entity in a relationship set

Customer (not related) Account
Customer
customer-name social-security customer-street customer-city
Account
account-number account-balance

Customer (1-N) Account
Customer
Account
account-number account-balance social-security

Customer (M-N) Account
Customer
Account
account-number account-balance
Account-customer
account-number social-security

Functional Dependence example
This table may have the following functional dependencies:
Reg. Number  Student ID, Student name, Course, Teacher, Textbook
Student ID Student name
Course  Teacher, Textbook
A B,C,D,E,F
BC
DE,F

Inference Rules
Denoted as X  Y means that the X component of a tuple uniquely (or functionally) determines the values of the Y
component.
◦ Armstrong inference rules
IR1: (reflexive) If Y is a subset of X,  X  Y
IR2 (Augmentation) {X  Y}  XZ  YZ
IR3 (Transitive) {X  Y, Y  Z}  X  Z
◦ Other useful inference rules
IR4 (Decomposition) {X  YZ}  X  Y
IR5 (Union) {X  Y, X  Z}  X  YZ
IR6 (Pseudotransitive) {X  Y, WY  Z}  WX  Z

Example
1) Prove or disprove
{X  Y, X  Z}  X  YZ
1) XY (given)
2) X  Z(given)
3) X XY(using IR2 on 1 by augmenting with X, note that XX  X)
4) XYYZ(using IR2 on 2 by augmenting with Y)
5) XYZ(using IR3 on 3 and 4)

Example
Prove or disprove
{WY,XZ}  WX  Y
1) WY(given)
2) XZ(given)
3) WX  XY(use IR2 on line 1)
4) XYY (using IR1)
5) WX  Y (IR3 on lines 3 and 4)

Example
Prove or disprove
{XY, XW, WYZ}  X  Z
1) X Y(given)
2) XW(given)
3) WYZ(given)
4) XXY(use XXXY from IR2 on line 1)
5) XYWY(using IR2 on line 2)
6) X WY(using IR3 on lines 4 and 5)
7) X Z(using IR3 on lines 6 and 3)

Example
Prove or disprove.
{XYZ, YW}  XW  Z
not true, consider the following tuples in a table

Lossless Join Decomposition
This table may have the following functional dependencies:
Reg. Number  Student ID, Student name, Course, Teacher, Textbook
Student ID Student name
Course  Teacher, Textbook

Natural Join creates extra records
Reg number Student ID Student name Course Teacher Textbook
123-1 123 Sandeep Database Byrne Intro to Database
345-1 345 Mary Algorithms Smith Advanced Algorithms
456-1 456 Mohammad Database Byrne Intro to Database
456-1 456 Mohammad Algorithms Smith Advanced Algorithms
567-1 567 Mohammad Database Byrne Intro to Database
567-1 567 Mohammad Algorithms Smith Advanced Algorithms
Natural join of Register and StudentClass

Lossless Join Property
The lossless join property is a feature of decomposition
supported by normalization.
It is the ability to ensure that any instance of the original
relation can be identified from corresponding instances in
the smaller relations.
When a DBA decides to take a table and break it down to
smaller tables, the lossless join property must be
maintained.

Algorithm testing lossless join property
Create a matrix S with one row for each Relation Rj in the decomposition D, and one column j for each attribute Aj in R.
Set S(i,j) = bij for all matrix entries;(each bij is a distinct symbol associated with indices(i,j)
for each row i representing relation schema Rj
for each column j representing attribute Aj
if Rj includes attribute Aj
then set S(i,j) = Aj
(note: each Aj is a distinct symbol associated with index (j))
repeat the following until a loop execution results in no change to S
for each functional dependency X Y in F
for all rows in S which have the same symbols in the attribute set X columns
make the symbols in each column corresponding to a Y attribute be the same in all the
these rows as follows:
if any of the rows have an “A” symbol for the column, set the other rows to the same
“A” symbol in the column
if no “A” symbol exists for the attribute in any of the rows choose one of the “b”
symbols that appears in one of the rows for the attribute and set the other
rows to that “b” symbol in the column.
if any row is made up entirely of “A” symbols, then the decomposition has the lossless join property, otherwise, it does not

Test for Lossless Join Property
AB,C,D,E,F BC DE,F
Since there are no functional dependencies on the C column, there are no changes to the table.
So this decomposition does not have the Lossless Join property and therefore may create new
unintended records
A B C D E F
R1 b11 b12 b13 b14 b15 b16
R2 b21 b22 b23 b24 b25 b26
A B C D E F
R1 A1 A1 A1 b14 b15 b16
R2 b21 b22 A2 A2 A2 A2

Test for Lossless Join Property
AB,C,D,E,F CD DE,F
C D and DE,F basically means that adding column C to the (C,D,E,F) table created a many=to-
one diamond connection between the tables guaranteeing the lossless join property
A B C D E F
R1 A1 A1 A1 b14 b15 b16
R2 b21 b22 A2 A2 A2 A2
A B C D E F
R1 A1 A1 A1 A2 b15 b16
R2 b21 b22 A2 A2 A2 A2
A B C D E F
R1 A1 A1 A1 A2 A2 A2
R2 b21 b22 A2 A2 A2 A2

Boyce-Codd Normal Form (BCNF)
A relation is in Boyce-Codd Normal Form if whenever a functional dependency XA in R then X
is a superkey of R (or A is a proper subset of X)
Algorithm for lossless join decomposition into BCNF relations.
Set D  {R};
while there is a relation schema Q in D that is not in BCNF do
◦ choose a relation schema Q in D that is not in BCNF;
◦ find a functional dependency X  Y in Q that violates BCNF;
◦ replace Q in D by two schemas (Q – Y) and (X  Y)

Database Assignment
• Using the Entity Relationship method described, draw how your website
would look like as a database
• Your homepage would be your diamond, your pages linked on the
homepage would be your rectangles, and any subpages associated with
those pages would be your circles
Home
Associated
Page
Subpag
e

INFO 2106
4/7/25
Securing Your Domain

Search for Availability of Domain
Name
• Visit https://www.godaddy.com/domains to search for the availability of
your domain name
• Feel free to check on multiple options
• Ideally, you want firstnamelastname.com but it might not be available,
so you will need to adjust accordingly

Places You Can Purchase Domain
• https://www.godaddy.com/ (usually offers first year promo price if purchasing domain
name for multiple years)
• https://www.ionos.com/ (first year promo price)
• https://www.domain.com/
• https://www.bluehost.com/ (first year promo price)
• https://domains.squarespace.com/
• https://www.web.com/
• https://www.hostgator.com/
• https://www.namecheap.com/ (first year promo price)
• https://www.hostinger.com/

Places You Can Purchase Hosting
• https://www.godaddy.com/
• https://www.ionos.com/
• https://www.domain.com/
• https://www.bluehost.com/
• https://domains.squarespace.com/
• https://www.web.com/
• https://www.hostgator.com/
• https://www.namecheap.com/
• https://www.hostinger.com/

Do the Research!!!!!
• Everyone of these companies is known for something they do well and
something they do poorly
• For example, GoDaddy provides exceptional services, but they charge for
everything. They are the only company I know of that will charge you for
an email address – all others provide them free with domain!
• Another example is HostGator which is very affordable, but if you ever
have a security issue you are going to have to spend a fortune to
fix/resolve the issue

What I Do
• Purchase domain from GoDaddy (usually can pay $20 for two years -
$0.01 for first year at promo price and $19.99 for second year on dot
com domains)
• Offers many options which may not be available elsewhere
• Utilize SiteGround for hosting (first year promo price under $100 for
entire year, then offers ability to pay monthly, a few months at a time, or
yearly)
• Offers free emails, checks websites daily and weekly for issues, allows
WordPress and many other options

Decide on Your Hosting Plan
• Check the specifics of the different hosting plans
• Some plans may include security and be a little more expensive as a
result, but do not require you to purchase security as an add-on
• Look through what is included in the price – sometimes most expensive
is not the best and often the least expensive is missing something you
think you will need.

What Are You Going To Do?
• WordPress website? No technical knowledge required
• HTML/CSS/JS website? May require stronger security
• Provided template? Likely will not look great, will take time to make
changes and may even cost additional money if modified often
• Make sure it is your own work, rather than pay someone else to do
it!!!!!!!

Internet Corporation for Assigned
Names and Numbers (ICANN)
• Helps in identifying your domain
• IP address associated with your domain name
• Contact information for domain owner (which may be hidden)
• Results in a “tax” when renewing domain
• Geared towards making the world wide web safer, so all domain owners are
known and compliant

Website History
• Your domain may have had a previous history
• Visit https://archive.org/web/ to check to see if your domain has any
history (it may not) – if it does have a history your domain may already
have potential traffic
• If it is determined there is a history of your domain, Google it to see what
is indexed by using site:yourdomain.com
• If any indexed URL is inappropriate, you may want to reconsider the purchase
of that domain name – your domain name should positively represent you as
a professional

Time for Action
• Work with students individually to help them secure their domain name
and hosting plan

INFO 2106
4/14/25
Creating/Enhancing Your Digital Presence

Purpose of SEO
• To drive targeted traffic to your website [or specific pages]
• Ideally, the traffic drives additional sales
• Most online purchases are made on sites found through search engine
listings

SEO is Technically Not Paid
Advertising
• SEO – influence rankings in the “natural” (a.k.a. “organic”, a.k.a.
“algorithmic”) search results
• PPC – paid search advertising on a pay-per-click basis. The more you pay,
the higher your placement. Stop paying = stop receiving traffic.
• PPC – pay per click
• SEM – encompasses both SEO and PPC
• Search engine marketing

Most Commonly Used Search Engines
• Google
• Google AdWords
• Bing
• Microsoft Advertising
• Yahoo Search

SEO is Based on Keywords
• Keyword Research
• The “right” keywords are…
• relevant to your business
• popular with searchers
• https://ads.google.com/home/tools/keyword-planner/

Researching Keywords
• Tools to check popularity of keyword searches
• http://WordTracker.com
• http://KeywordDiscovery.com
• http://adwords.google.com/KeywordPlanner
• http://www.google.com/trends/
• http://ubersuggest.org/

SEO – Constant Changes
• Topically relevant links from important sites
• Anchor text
• Keyword-rich title tags
• Keyword-rich content
• Internal hierarchical linking structure
• The whole is greater than the sum of the parts

Begin The 7 Steps
1) Get Your Site Fully Indexed
2) Get Your Pages Visible
3) Build Links & PageRank
4) Leverage Your PageRank
4) Encourage Clickthrough
6) Track the Right Metrics
7) Avoid Worst Practices

 Search engines are wary of “dynamic” pages
- they fear “spider traps”
 The better your PageRank, the deeper and
more often your site will be spidered

 Page # estimates are wildly inaccurate, and include
non-indexed pages (e.g. ones with no title or snippet)
 Misconfigurations (in robots.txt, in the type of redirects
used, requiring cookies, etc.) can kill indexation
 Keep your error pages out of the index by returning
404 status code
 Keep duplicate pages out of the index by standardizing
your URLs, eliminating unnecessary variables, using
301 redirects when needed

Not Spider-Friendly
• GET http://www.bananarepublic.com --> 302 Moved Temporarily
• GET http://www.bananarepublic.com/browse/home.do --> 302 Moved
Temporarily
• GET http://www.bananarepublic.com/browse/home.do?targetURL=http
%3A%2F%2Fwww.bananarepublic.com%2Fbrowse
%2Fhome.do&CookieSet=Set --> 302 Moved Temporarily
• GET http://www.bananarepublic.com/cookieFailure.do --> 200 OK

2) Get Your Pages Visible
• 100+ “signals” that influence ranking
• “Title tag” is the most important copy on the page
• Home page is the most important page of a site
• Every page of your site has a “song” (keyword theme)
• Incorporate keywords into title tags, hyperlink text, headings (H1 & H2
tags), alt tags, and high up in the page (where they’re given more “weight”)
• Eliminate extraneous HTML code
• “Meta tags” are not a magic bullet
• Have text for navigation, not graphics

3) Build Links and PageRank
• “Link popularity” affects search engine rankings
• PageRank™ - Links from “important” sites have more impact on
your Google rankings (weighted link popularity)
• Google offers a window into your PageRank
• PageRank meter in the Google Toolbar (toolbar.google.com)
• Google Directory (directory.google.com) category pages
• 3rd party tools like SEOChat.com’s “PageRank Lookup” & “PageRank
Search”
• Scores range from 0-10 on a logarithmic scale

• Your home page’s PageRank gets distributed to your deep pages by
virtue of your hierarchical internal linking structure (e.g. breadcrumb
nav)
• Pay attention to the text used within the hyperlink (“Google bombing”)
• Don’t hoard your PageRank
• Don’t link to “bad neighborhoods”

 Avoid PageRank dilution
 Canonicalization (www.domain.com vs. domain.com)
 Duplicate pages: (session IDs, tracking codes, superfluous parameters)
 http://company.com/Products/widget.html
 http://company.com/products/widget.html
 http://company.com/Products/Widget.html
 http://company.com/products/Widget.html
 In general, search engines are cautious of dynamic URLs (with ?, &, and =
characters) because of “spider traps”
 Rewrite your URLs (using a server module/plug-in) or use a hosted proxy service
(e.g. GravityStream)
 See http://catalogagemag.com/mag/marketing_right_page_web/

5) Encourage Clickthrough
• Zipf’s Law applies - you need to be at the top of page 1 of the search
results. It’s an implied endorsement.
• Synergistic effect of being at the top of the natural results & paid results
• Entice the user with a compelling call-to-action and value proposition in
your descriptions
• Your title tag is critical
• Snippet gets built automatically, but you CAN influence what’s displayed
here

6) Track the Right Metrics
 Indexation: # of pages indexed, % of site indexed, % of product
inventory indexed, # of “fresh pages”
 Link popularity: # of links, PageRank score (0 - 10)
 Rankings: by keyword, “filtered” (penalized) rankings
 Keyword popularity: # of searches, competition, KEI (Keyword
Effectiveness Indicator) scores
 Cost/ROI: sales by keyword & by engine, cost per lead

Avoid Worst Practices
• Target relevant keywords
• Don’t stuff keywords or replicate pages
• Create deep, useful content
• Don't conceal, manipulate, or over-optimize content
• Links should be relevant (no scheming!)
• Observe copyright/trademark law & Google’s guidelines

Spamming in Its Many Forms…
• Hidden or small text
• Keyword stuffing
• Targeted to obviously irrelevant keywords
• Automated submitting, resubmitting, deep submitting
• Competitor names in meta tags
• Duplicate pages with minimal or no changes
• Spamglish
• Machine generated content

Spamming in Its Many Forms…
 Pagejacking
 Doorway pages
 Cloaking
 Submitting to FFA (“Free For All”) sites & link farms
 Buying up expired domains with high PageRanks
 Scraping
 Splogging (spam blogging)

Not Spam, But Bad for Rankings
 Splash pages, content-less home page, Flash intros
 Title tags the same across the site
 Error pages in the search results (eg “Session expired”)
 "Click here" links
 Superfluous text like “Welcome to” at beginning of titles
 Spreading site across multiple domains (usually for load balancing)
 Content too many levels deep

In Summary
• Focus on the right keywords
• Have great keyword-rich content
• Build links, and thus your PageRank™
• Spend that PageRank™ wisely within your site
• Measure the right things
• Continually monitor and benchmark

Pay Per
Click
• Bid on the search terms
you want
• You only pay when
someone clicks to get to
your website

Positives of PPC
• Immediate placement
• You can control budget and positioning
• Only pay if traffic is produced
• You can use inexpensive keywords

Negatives of PPC
• Requires a lot of research
• Can cost you a lot of money if done wrong
• Requires you to know about the industry

What is CMS?
• Content Management Systems (CMS) are commonly used to create and
store data online
• The most commonly used CMS tools allow individuals to create their own
website without knowing anything about web development [coding in
HTML, CSS, JS, etc.]
• Individuals merely install the CMS software to their website and type in
specific information to create websites

Two Common Reasons to Use CMS
• User-friendly browser-based publishing tools
• No technical skills required
• Compliance with Accessibility requirements
• W3C standards

What is Content?
• Any type or unit of digital information.
• Text, images, graphics, video, sound, documents, records, etc
• Anything that we would like to manage in an electronic format.

Why CMS?
• Web Content Management System
• Create/manage HTML & images
• Authoring tools
• Templates for presentation

Common CMS Requirements
Database Code Server

Differences in CMS
• Every CMS has its own unique way of organizing and managing content.
• It helps you to create/edit/delete content in a shared repository
(database).
• It contains much improved CSS (Cascading Style Sheets).
• CMS enables content to be shared across the Web sites.

Why Use Them?
• Drupal, Joomla, WordPress use a database (tables) to store information
• CMS uses a different technology than standard html/css sites
• The technology is open-source (free!)
• Allows people to update their owns sites
• You are the master of your own domain!

Joomla
• The name Joomla is derived from the Swahili word "Jumla", which means
"all together" or "as a whole".
• Joomla! is one of the most powerful Open Source Content Management
Systems. It is used all over the world for everything from simple websites
to complex corporate applications.
• Joomla! is easy to install, simple to manage, and reliable.

Joomla
• Joomla is written in PHP, uses object-oriented programming structure
(OOPS) techniques and software design pattern, stores data in a MySql
database, and includes features such as page caching, RSS feeds,
printable versions of pages, news flashes, blogs, polls, search, and
support for language internationalization.
• It is based on a model-view-controller (MVC) web application framework
that can be used independently.

Why Joomla?
• It is designed to work perfectly in basic shared web hosting
environments, a package that is least expensive and most common.
Installer is simple and just like any other common desktop software.
• It is supported by several extensions, add-on, and plug in. They are
written in PHP, which is most widely used, general purpose scripting
language and best suited for web development.
• Joomla supports SSL logins and SSL pages.
• Joomla probably has a pre built module to transform it in a social
bookmarking website.
• Joomla's greatest advantage is availability of a large number of
extensions that you can use to Plug-in extra features into your website
and transform your website into anything you like.

WordPress Issues
• The WordPress content management system is an ideal platform for
bloggers as it is easy to install and use.
• Adding or removing post dates, need to be changed in design mode and
it requires knowledge of WP scripting.
• You can add membership functionality in WordPress.

Why WordPress?
• With WordPress, any type of website can be created like a personal blog
or website, a photoblog, a business website, a professional portfolio, a
government website, a magazine or news website, an online community,
even a network of websites.
• Website can be made with beautiful with themes, and can be extended
with plugins.

WordPress
• Free website on WordPress website
• Installed to your website if you own a domain
• Themes can be uploaded or created for use

Drupal Issues
• Learning curve is bigger than Joomla and WordPress
• Less support available than Joomla and WordPress

Other CMS
• Shopify
• Squarespace
• Wix
• Blogger
• Weebly
• Moodle

Learning Curve
• WordPress
• Easy, No experience required
• Joomla
• Medium, Easier than Drupal, harder than WordPress.
• Drupal
• Requires technical expertise. Major updates are an effort

E-Commerce
• WordPress
• Yes, with plugins
• Joomla
• Extensions for managing products and content
• Drupal
• the latest version, does not support a stable e-commerce module yet

SEO Friendliness
• WordPress
• Excellent
• Joomla
• Basic
• Drupal
• Good

Speed
• WordPress
• High traffic can cause limitations
• Joomla
• Faster and less resource intensive
• Drupal
• Consumes resources if not tweaked properly

Plugins
• WordPress
• Extensive. 41,579 plug-ins
• Joomla
• Few. 7000 extensions
• Drupal
• Many. 32,568 modules

Themes
• WordPress
• Extensive. Tens of thousands of themes
• Joomla
• Few. Thousands of themes
• Drupal
• Many. Thousands of themes

Mobile Friendly
• WordPress
• Good. Simple responsive starter themes
• Joomla
• Good. Many mobile extensions to choose from
• Drupal
• Good. Going mobile is simple.

Once Installed
• Easier to have website host install for you to avoid potential errors
• Login through Admin Panel, such as wp-admin
• All actions occur with the Admin panel, impact how website looks and is
accessed

Using Social Media for Websites
• Adding authenticity
• Grabbing attention
• Boosting imagery
• Inviting interaction
• Embracing mobile
• Elevating User Generated Content

Ways Social Media Assists Websites
• More traffic
• More revenue
• Increased brand awareness
• Build personal connection with clients

Common Social Media Used for
Promotion

Other Ways to Promote Websites
•Affiliate Marketing:
• https://innovativeprof.com/affiliate-marketing-directions/
•Internet Marketing:
• https://innovativeprof.com/5-ps-of-internet-marketing/

INFO 2106
4/21/25
Deciding on and Creating Content

Home
• Your homepage should be as clean as possible with some information, but not
overloaded with information
• Since this is going to be a personal/professional website about you geared
towards helping you secure a full-time position in your field upon graduation
you may be fairly open-ended in this pursuit. Two suggestions are as follows:
• If doing a WordPress website, you could have your homepage serve as a listing of
your blog posts (posts about topics that interest you)
• If doing a HTML/CSS/JS website, you could have your homepage feature some brief
information about yourself with a video resume of sorts embedded into the page
• An example of a good Homepage is https://roycekimmons.com/ which has some
info, but not too much

About
• Your About page should provide a summary of who you are as a person
and a professional. It may be a paragraph or two.
• You could also include a picture of two of yourself. Perhaps a
professional picture
• Think of this page like your LinkedIn summary with your LinkedIn profile
picture (i.e. try to make it as professional as possible)
• An example of a good About page is https://ericsheninger.com/about/

Work Experience
• This page may be open-ended and does not even need to be called Work
Experience
• Ideally, here you are going to articulate all of your skills that will get you
hired
• Work experience
• Skills – for example, Java programming, Python programming, Adobe Suite,
Microsoft Office, etc.
• Volunteer experience
• In essence, think of anything you would put on your LinkedIn!

Course Artifacts
• This page does not need to be called Course Artifacts, but should
represent things you have done in your courses to prove you have the
skills you claim you have
• For example, those of you who had INFO 2105 should list your website
from that course with a little description explaining it
• Other items may include: a final project from a Java/Python
programming, items created using the Adobe Suite, tutorials/recordings
of you doing something complex in Microsoft Office (as an example)
• The more knowledgeable you present yourself the better

Other Content
• Since this is your professional/personal domain you may want to include
additional information – which is encouraged – however, consider how
much is too much
• One recommendation is having an additional page with your contact
information, such as
• Email address
• Social media – assuming it is professional
• You might also include an indication that you are actively seeking opportunities
within the work force using this page
• You might also decide to include a copy of your resume on this page

Questions?
• Feel free to ask questions regarding this
• This course meeting is geared towards finishing your plan for your
website so you can put it together next week in class

INFO 2106
4/28/25
Setting Up Website

WordPress or Design Yourself?
• If WordPress, pick theme and adjust accordingly – then add pages and content
based on your plan – no HTML/CSS/JS skills needed
• If designing yourself using HTML/CSS/JS consider the time requirement – due
4/28/24 at 11:59PM (though you can certainly modify upon completion of course)
• Also remember that if you are going to use the hosting providers
templates/editor that you may be limited in what you are able to do (similar to
Wix)
• This course meeting is geared towards completing the setup of your website, so
ask any question you may think of

Get Website/Domain Indexed
• Once you have content on your website visit https://pingler.com/ to index
your website/domain
• Decide on what keyword you want associated with your domain and the
category that you represent – Information Technology is one of the
options ;)
• You may do this for all of the pages you created
• Additionally, you may use meta tags within your HTML code or use
WordPress plugins to enhance your domain/website SEO

Website Rubric
Simply submit the URL link for your website.
Criteria:
Appearance: 25 points
• Does the website visually look good?
Deliverables: 50 points
• Did you include the items described in your plan? (most should be on your site)
Course Info: 75 points
• Did you use course materials? (HTML, CSS, forms, JavaScript, etc.)

Presentation Rubric
Submit your PowerPoint.
Criteria
Presentation Content: 50 points
• Intro slide with Name and info
• Slides describing plan
• Slides describing website or you can pull up your website and explain it
• Slides describing any issues you had
Duration: 10 points
• Your presentation should be as close to 10 minutes as possible without going over
Presentation: 40 points
• Graded on clarity and professional presentation
• Avoid uh, umm, etc. - just pause instead
• Keep eye contact with audience
• avoid swaying of arms, toe tapping, or other distracting motions

INFO 2106 2-17-25.pptx Course Slide Deck

More Related Content

Similar to INFO 2106 2-17-25.pptx Course Slide Deck

More from MattMarino13

Recently uploaded

INFO 2106 2-17-25.pptx Course Slide Deck

Editor's Notes