Programming Skill Survey

• DO IT NOW

Assignment 1

• Uploaded to course website• Due next Tuesday, Jan 21, at 11:59pm

IST210 3

Chapter 1. Introduction to Database

Previous Lecture

• Potential problems with Lists– Deletion– Update– Insertion

• Avoid these problems using a relational database:– Break a list into several tables, one table for each

theme– Tables can be joined together using the value of the

data

IST210 5

Exercise

• What are the problems with this table.• Split it into multiple tables.• Check whether you split the table correctly.

IST210 6

Relational Databases

• A relational database stores information in tables. Each informational topic is stored in its own table

• In essence, a relational database will break-up a list into several parts. One part for each theme in the list

IST210 7

Answering Query: Putting the Pieces Back Together

• In our relational database, we broke apart our list into several tables. Somehow the tables must be joined back together

• In a relational database, tables are joined together using the value of the data

IST210 8

Query Relational Database: Using One Table

Student Table

Course Table

Registration Table

Query 1:How many students take class 210?

Answer: Check Registration Table to see many rows with CourseID as 210. count = 4

IST210 9

Query Relational Database: Using Two Tables

Query 2:How many students take class taught by Marc?

Student Table

Course Table

Registration Table

Answer: Step 1. Check the CourseID taught by David in Course Table. CourseID = 220Step 2. See how many students taking class with CourseID 220 in Registration Table. count = 2

IST210 10

Query Relational Database: Using Three Tables

Query 3:Who are the students taking class taught by Zihan?

Student Table

Course Table

Registration Table

Answer:Step 1. Check the CourseID taught by Zihan in Course Table. CourseID = 210Step 2. Get the StudentID taking class with CourseID 210 in Registration Table. StudentID 101, 102, 103, 104Step 3. Get the student names in Student Table with StudentID 101, 102, 103, 104. Bob, Lisa, Sarah, Jim

IST210 11

Query Relational Database Student Table

Course Table

Registration Table

In a relational database, to answer a query, tables are joined together using the value of the data in the shared columns

IST210 12

Query Relational Database: Structured Query Language (SQL)

• Structured Query Language (SQL) is an international standard for creating, processing and querying databases and their tables

SELECT Count(StudentID)FROM Course, RegistrationWHERE Course.CourseID = Registration.CourseID AND Course.Instructor = ‘Marc’

Query 2:How many students take class taught by John?Answer: Step 1. Check the CourseID taught by Marc in Course Table. CourseID = 220Step 2. See how many students taking class with CourseID 220 in Registration Table. count = 2

IST210 13

Exercise (cont.)

After you split this table into multiple tables, answer following questions:• Question 1: How many items purchased by Anderson? • Question 2: What items purchased by customers in State

College?

IST210 14

Sounds likeMore Work, Not Less

• A relational database is more complicated than a list

• However, a relational database minimizes data redundancy, preserves complex relationships among topics, and allows for partial data

• Furthermore, a relational database provides a solid foundation for user forms and reports

IST210 15

Chapter 1 Summary

• What is the problem with using a simple list to store the information?– Redundancy, Multiple themes Modification issues

• What is the solution to replace a simple list?– Relational database– Break a simple long list to several tables; each table has

its own theme• How to query a relational database?– Join back the tables by the value of data through shared

columns

IST210 16

HTML Basic I

Keep In Mind

• This is not a programming course!• Programming can be time consuming. Plan

ahead!

IST210 18

HTML: Hyper Text Markup Language

• An HTML document is a text file (script)• A web browser (IE, Firefox, Opera, etc.)

interprets the script and presents appropriate contents

IST210 19

Tags in HTML

• Tags are mainly used to indicate what data is about and for some types of data, how to display it– Document properties– Layout– Text style– Images– Hyper-links

IST210 20

Basic Tags

• Four Basic tags– HTML <html></html>– Head <head></head>– Title <title></title>– Body <body></body>

<html><head>

<title>Hello World</title>

</head><body>

Hello World!</body>

</html>

IST210 21

Try it yourself• Start Notepad• Create an HTML document with all four basic tags– HTML– HEAD– TITLE– BODY

• Save as an html document, e.g. HelloWorld.html– Remember to change “Save as type” to “All Files”. It will be saved as

“.txt” by default.

• To display: Double click or open in a web browser

<html><head>

<title>Hello World</title></head><body>

Hello World!</body>

</html>

IST210 22

HTML Tags: Format• Format tags:– Container tags

• Affect whatever part of the document they contain – bold tag: <b> text </b>– italic tag: <i> text </i>

• <tag_name attribute=value>texts</tag_name>– font tag: <font color="red"> text </font>

– Singular tag• Results in an action where the tag is located in the HTML

– the horizontal line tag: <hr>– line break line tag: <br>

Try it yourself

• bold tag: <b> text </b>• line break line tag: <br>• font tag: <font color="red"> text </font>

<html><head>

<title>Hello World</title></head><body>

Hello World! <br>My name is <b>Zihan</b>. <br><font color="red"> How are you?

</font></body>

</html>

IST210 24

HTML Tags: More Text Styles

Regular <b> bold </b><br>Regular <big> big </big><br>Regular <em> emphasized </em><br>Regular <i> italic </i><br>Regular <small> small </small><br>Regular <strong> strong </strong><br>Regular _subscripted<br>Regular ^{superscripted}<br>Regular <ins> inserted </ins><br>Regular <del> deleted </del><br>

• You are NOT required to remember all of them

IST210 25

HTML Tags: More Fonts• Font is defined by <font> tag, with the following attributes:

– size="number" size="2" Defines the font size – size="+number" size="+1" Increases the font size – size="-number" size="-1" Decreases the font size – face="face-name" face="Times" Defines the font-name – color="color-value" color="#FFFFFF" Defines the font color – color="color-name" color="red" Defines the font color

Regular<br><font size="2">size=2</font><br><font size="+2">size=+2</font><br><font size="-2">size=-2</font><br><font face="Arial">Arial</font><br><font color="#00FF00">Green</font><br><font color="red">Red</font><br>

attribute value

IST210 26

HTML Tags: Heading

• Heading tags: <h1> to <h6>, where <h1> is the largest.

• A blank line is added before/after the heading.

<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>Regular text

IST210 27

Document Attribute

<html><head>

<title>Hello World</title></head><body bgcolor="black">

<font color="white"> Hello World! </font>

</body></html>

<body bgcolor="black"> text

</body>

IST210 28

HTML Tags: Document Attributes

• Background color• <body bgcolor="#000000">• <body bgcolor="rgb(0,0,0)">• <body bgcolor="black">

• RGB colors• HTML colors are defined using a hexadecimal notation for the

combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF).

• http://www.w3schools.com/HTML/html_colornames.asp

• Background image• <body background=“book.jpg">

IST210 29

HTML Tags: More…• More tags:

– http://www.w3schools.com/tags/default.asp• HTML is not case sensitive, but lower case tags are suggested• “Coding” in HTML is not as strict as in programming languages• You can use html or htm as file extension• Try view page source on any webpage

– On a webpage, right click, click on “View Source”

IST210 30

Place Your Page on Web

• Access your IST web space– Method 1:

– Method 2: Direct access via UNC path: \\upws1.up.ist.local\Users\USERNAME

• The URL for your web space is: http://my.up.ist.psu.edu/USERNAME/helloworld.html

IST210 31

Lab Exercise

• Time and Location– 2:30 – 3:45 PM Thursday– Location: 202 IST Building

• A Simple Personal Webpage– Use the HTML basics you learnt in class to make your homepage and

place it on the web– See the next slide for requirements– If you meet every checkpoint in requirements, let TA take a look and

mark your lab attendance

1. Access your webpage from web2. Use your name as the page title

7. Use yellow background color

6. Hobby in color blue, font Arial, and italic

3. Welcome line in <h1> heading

4. Major in red color

5. Year in font size 8