85
CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Embed Size (px)

Citation preview

Page 1: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

CMPE 226

Database SystemsSeptember 2 Class Meeting

Department of Computer EngineeringSan Jose State University

Fall 2015Instructor: Ron Mak

www.cs.sjsu.edu/~mak

Page 2: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

2

Some Sources of Data for Visualization

Google “datasets for data visualization”

http://archive.ics.uci.edu/ml/ http://www.kdnuggets.com/datasets/index.html https://www.kaggle.com/competitions http://www.visualizing.org/data/browse http://datavisualization.ch/datasets/ http://www.idvbook.com/teaching-aid/data-sets/ http://blog.visual.ly/data-sources/ https://www.google.com/publicdata/directory

Page 3: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

3

Teams?

Page 4: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

4

Relational Databases

studentname

coursenumber

coursetitle

instructorname

roomnumber

Frank CMPE101 Intro Programming

O’Brien 432

Frank HIST256 European History Evans 111

Susan CS153 Compiler Design Mak 225

Eric CS153 Compiler Design Mak 225

Luis HIST256 European History Evans 111

Luis CS153 Compiler Design Mak 225

Bill CMPE101 Intro Programming

O’Brien 432

Bill HIST256 European History Evans 111

Rosa CS153 Compiler Design Mak 225

Rosa CMPE101 Intro Programming

O’Brien 432

A table of student and course information.

10 rows X 5 columns = 50 data items

Page 5: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

5

Relational Databases, cont’d

studentname

coursenumber

Frank CMPE101

Frank HIST256

Susan CS153

Eric CS153

Luis HIST256

Luis CS153

Bill CMPE101

Bill HIST256

Rosa CS153

Rosa CMPE101

coursenumber

coursetitle

instructorname

roomnumber

CMPE101

Intro Programming

O’Brien 432

HIST256 European History Evans 111

CS153 Compiler Design Mak 225

Two tables 10 rows X 2 columns = 20 data items 3 rows X 4 columns = 12 data items 32 data items total

Easier to update data. Example: Move CMPE101 to room 400

Page 6: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

6

Keys

A column in one table contains keys to look up rows in another table.

studentname

coursenumber

Frank CMPE101

Frank HIST256

Susan CS153

Eric CS153

Luis HIST256

Luis CS153

Bill CMPE101

Bill HIST256

Rosa CS153

Rosa CMPE101

coursenumber

coursetitle

instructorname

roomnumber

CMPE101

Intro Programming

O’Brien 432

HIST256 European History Evans 111

CS153 Compiler Design Mak 225

Page 7: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

Virtual Tables

Who takes classes from Prof. Mak?

Join operation of the two tables: Combine each row of one

table with the corresponding row of the other table based on matching key values

7

studentname

coursenumber

Frank CMPE101

Frank HIST256

Susan CS153

Eric CS153

Luis HIST256

Luis CS153

Bill CMPE101

Bill HIST256

Rosa CS153

coursenumber

coursetitle

instructorname

roomnumber

CMPE101

Intro Programming

O’Brien 432

HIST256 European History Evans 111

CS153 Compiler Design Mak 225

Page 8: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

8

Virtual Tables, cont’d

studentname

coursenumber

Frank CMPE101

Frank HIST256

Susan CS153

Eric CS153

Luis HIST256

Luis CS153

Bill CMPE101

Bill HIST256

Rosa CS153

coursenumber

coursetitle

instructorname

roomnumber

CMPE101

Intro Programming

O’Brien 432

HIST256 European History Evans 111

CS153 Compiler Design Mak 225

studentname

coursenumber

coursetitle

instructorname

roomnumber

Frank CMPE101

Intro Programming

O’Brien 432

Frank HIST256 European History Evans 111

Susan CS153 Compiler Design Mak 225

Eric CS153 Compiler Design Mak 225

Luis HIST256 European History Evans 111

Luis CS153 Compiler Design Mak 225

Bill CMPE101

Intro Programming

O’Brien 432

Bill HIST256 European History Evans 111

Rosa CS153 Compiler Design Mak 225

Rosa CMPE101

Intro Programming

O’Brien 432

Join the two tables.

Page 9: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

9

Virtual Tables, cont’d

studentname

instructor name

Frank O’Brien

Frank Evans

Susan Mak

Eric Mak

Luis Evans

Luis Mak

Bill O’Brien

Bill Evans

Rosa Mak

studentname

coursenumber

coursetitle

instructorname

roomnumber

Frank CMPE101 Intro Programming

O’Brien 432

Frank HIST256 European History Evans 111

Susan CS153 Compiler Design Mak 225

Eric CS153 Compiler Design Mak 225

Luis HIST256 European History Evans 111

Luis CS153 Compiler Design Mak 225

Bill CMPE101 Intro Programming

O’Brien 432

Bill HIST256 European History Evans 111

Rosa CS153 Compiler Design Mak 225

Rosa CMPE101 Intro Programming

O’Brien 432

The projection operation removes unneeded columns.

Page 10: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

10

Virtual Tables, cont’d

The selection operation chooses only rows with instructor “Mak”.

Project again to remove the unneeded instructor column.

studentname

instructor name

Susan Mak

Eric Mak

Luis Mak

Rosa Mak

studentname

Susan

Eric

Luis

Rosa

Who takes classes from Prof. Mak?

Page 11: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

11

Relational Algebra

The mathematical theory behind database operations: join project select

Page 12: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

12

Client-Server Web Apps

Client SideWeb Browser• Chrome• Firefox• Safari• Microsoft IE

Server SideWeb Server• Apache + PHP

HTTP request

HTTP response

HTTP request User’s form data

HTTP response Dynamically generated HTML page

Page 13: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

13

Serving Web Pages

The Apache web server serves web pages. Displayed on the client side by web browsers. Web pages can be static or dynamic.

Static web pages: .html HTML files that the web server reads from disk. A static page always displays the same content.

Dynamic web pages: .php Generated by PHP code running on the server. Contains dynamic content.

Page 14: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

14

Basic “Naked” HTML

HTML specifies a web page’s Content Structure Semantics

HTML should no longer specify formatting. Separate content from formatting. Formatting tags and attributes are deprecated.

Font, color, alignment, etc.

Formatting should be specified by CSS. Cascading Style Sheets

Page 15: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

15

XAMPP Directory Structure

Folder htdocs is the rootof all the web pageson your web server.

Page 16: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

16

HTML Page Template

<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>page title</title></head>

<body>

body of page

</body></html>

Page 17: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

17

Paragraphs and Headings<body> <h1>Chapter 1</h1> <h2>Subsection 1.1</h2> <h2>Subsection 1.2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> ...</body>

Page 18: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

18

Paragraphs and Headings, cont’d

<body> ... <h2>Subsection 1.3</h2>

<h3>Subsection 1.3.1</h3> <h3>Subsection 1.3.2</h3> <h3>Subsection 1.3.3</h3> <p> This is a paragraph. </p> <h1>Chapter 2</h1> <p> Yet another paragraph. </p></body>

Page 19: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

19

Paragraphs and Headings, cont’d

Page 20: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

20

Ordered and Unordered Lists<body> <h1>Unordered list</h1> <ul> <li>California</li> <li>New York</li> <li>Texas</li> </ul> <h1>Ordered list</h1> <ol> <li>CS 146</li> <li>CS 151</li> <li>CS 152</li> <li>CS 153</li> <li>CS 160</li> <li>CS 174</li> </ol></body>

Page 21: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

21

Nested Lists<body> <!-- Ignore the following anchor tag for now. --> <a name="nested"></a> <h1>Nested list</h1> <ol> <li> <h2>California</h2> <ul> <li>San Francisco</li> <li>San Jose</li> <li>Los Angeles</li> </ul> </li> <li> <h2>New York</h2> <ol> <li>New York City</li> <li>Albany</li> </ol> </li> <li> <h2>Texas</h2> <ul> <li>Dallas</li> <li>El Paso</li> </ul> </li> </ol></body>

Page 22: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

22

Simple Table<body> <h1>Simple table</h1> <table> <caption>States</caption> <tr> <th>State</th> <th>Capital</th> <th>Population</th> </tr> <tr> <td>California</td> <td>Sacramento</td> <td>38,802,500</td> </tr> <tr> <td>New York</td> <td>Albany</td> <td>19,746,227</td> </tr> <tr> <td>Texas</td> <td>Austin</td> <td>26,956,958</td> </tr> </table></body>

Page 23: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

23

Table with Borders<body> <h1>Borders</h1> <table border="1"> <caption>States</caption> <tr> <th>State</th> <th>Capital</th> <th>Population</th> </tr> <tr> <td>California</td> <td>Sacramento</td> <td>38,802,500</td> </tr> <tr> <td>New York</td> <td>Albany</td> <td>19,746,227</td> </tr> <tr> <td>Texas</td> <td>Austin</td> <td>26,956,958</td> </tr> </table></body>

Page 24: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

24

Table with colspan and rowspan<body> <h1>Spanning rows and columns</h1> <table border="1"> <caption>States</caption> <tr> <th>State</th> <th>Capital</th> <th>Population</th> </tr> <tr> <td>California</td> <td colspan="2">The Golden State</td> </tr> <tr> <td>New York</td> <td>Albany</td> <td rowspan="2">Too many!</td> </tr> <tr> <td>Texas</td> <td>Austin</td> </tr> </table></body>

Page 25: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

25

Links to Pages

<body> <h1>Links</h1> <p> An absolute link to the <a href="http://localhost/basics/paragraphs.html"> Paragraphs and Headings </a> page has the complete URL: <strong>http://localhost/examples/paragraphs.html</strong> </p> <p> A relative link to the <a href="tables.html">Tables</a> page has a URL that is relative to the directory of the current page: <strong>tables.html</strong> </p>

...</body>

Page 26: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

26

Links to Anchor Tags

<body> ... <h1>Links to Anchor Tags</h1> <p> A link to the the <a href="#lorem">lorem</a> anchor tag on this page uses the location <strong>#lorem</strong>. Place the anchor tag before the line you want to jump to. </p> <p> You can also jump to the <a href="lists.html#nested">nested</a> anchor tag on the Lists page using the location <strong>lists.html#nested</strong> </p> <a name="lorem"></a> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet ... </p></body> Demo

Page 27: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

27

Images

<body> <p> An <em>inline image</em> <img src="images/RonCats2a.jpg"/> of my two cats. </p> <p> An inline image <a href="cats.html"><img src="images/RonCats1a.jpg"/></a> can serve as a link! </p> </body></html>

Page 28: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

28

Images, cont’d

Demo

Page 29: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

29

Form Data

A user can input data into an HTML form displayed on a client-side web browser.

When the user presses a Submit button, the browser sends to form data to a specifiedPHP program running on the web server.

The PHP program can use the form data to Query the back-end database. Generate a new HTML page to send to the user’s

client-side web browser.

Page 30: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

30

Client-Server Web Apps

Client SideWeb Browser• Chrome• Firefox• Safari• Microsoft IE

Server SideWeb Server• Apache + PHP

HTTP request

HTTP response

HTTP request User’s form data

HTTP response Dynamically generated HTML page

Page 31: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

31

Ways to Send Form Data, cont’d

Get method

The form data is appended to the target URL. Good for small amounts of data. The data is visible:

Post method

The data is sent via environment variables. Good for larger amounts of data. Slightly more secure than the get method.

http://localhost/forms/text.php?firstName=Ron&lastName=Mak

Page 32: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

32

Text Input: HTML Page<body> <form action="text.php" method="get"> <fieldset> <legend>User input</legend> <p> <label>First name:</label> <input name="firstName" type="text" /> </p> <p> <label>Last name:</label> <input name="lastName" type="text" /> </p> <p> <input type="submit" value="Submit" /> </p> </fieldset> </form></body>

forms/text.html

Page 33: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

33

Text Input: PHP Code

<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>Text Greeting</title></head>

<body> <p> <?php $first = filter_input(INPUT_GET, "firstName"); print "<h1>Hello, $first!</h1>\n"; ?> </p></body></html>

forms/text.php

Page 34: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

34

Checkbox Input: HTML Page<body> <form action="checkbox.php" method="post"> <fieldset> ... <p> <label>Any formatting?</label> <input type="checkbox" name="strong" value="strong" /> Strong! <input type="checkbox" name="em" value="em" /> Emphasized! </p> ... </fieldset> </form></body>

forms/checkbox.html

Page 35: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

35

Checkbox Input: PHP Code

<body> <p> <?php $first = filter_input(INPUT_POST, "firstName"); $output = "Hello, $first!"; if (filter_has_var(INPUT_POST, "strong")) { $output = "<strong>$output</strong>"; } if (filter_has_var(INPUT_POST, "em")) { $output = "<em>$output</em>"; } print $output; ?> </p></body>

forms/checkbox.php

Page 36: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

36

Radio Button Input: HTML Page<body> <form action="radio.php" method="post"> <fieldset> ... <p> <label>Direction></label> <input type="radio" name="direction" value="coming" checked /> Coming <input type="radio" name="direction" value="going" /> Going </p> ... </fieldset> </form></body>

Every radio buttonin the same groupmust have thesame name(e.g., direction).

forms/radio.html

Page 37: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

37

Radio Button Input: PHP Code<body> <p> <?php $first = filter_input(INPUT_POST, "firstName"); $direction = filter_input(INPUT_POST, "direction"); if ($direction == "coming") { $output = "Hello"; } else if ($direction == "going") { $output = "Good-bye"; } else { $output = "You are SO confused"; } $output = $output.", $first!"; ... print $output; ?> </p></body>

forms/radio.php

Page 38: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

38

Select List Input: HTML Page<body> <form action="select.php" method="post"> <fieldset> ... <p> <label>Language?</label> <select name="language"> <option value="english" selected>English</option> <option value="french">Français</option> <option value="german">Deutsch</option> </selct> </p> <p> <input type="submit" value="Submit" /> </p> </fieldset> </form></body> forms/select.html

Page 39: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

39

Select List Input: PHP Code

<body> <p> <?php $first = filter_input(INPUT_POST, "firstName"); $direction = filter_input(INPUT_POST, "direction"); $language = filter_input(INPUT_POST, "language"); $error = "You are SO confused"; if ($direction == "coming") { switch ($language) { case "english": $output = "Hello"; break; case "french": $output = "Bonjour"; break; case "german": $output = "Guten tag"; break; default: $output = $error; } } else if ($direction == "going") { switch ($language) { case "english": $output = "Good-bye"; break; case "french": $output = "Au revoir"; break; case "german": $output = "Auf wiedersehen"; break; default: $output = $error; } } else { $output = $error; } ... ?> </p></body>

forms/select.php

Page 40: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

40

Break

Page 41: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

41

Three-Tier Web Application Architecture

Client-side web browser

Server-side web server(.html .phpimages, etc.)

Form data

Back-end database server(MySQL)

Queries

Data

Dynamicallygeneratedweb pages

Page 42: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

42

Start the MySQL Database Server

Page 43: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

43

XAMPP Home Page

phpMyAdmin is a PHP-based GUI interface to the MySQL database server.

Page 44: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

44

phpMyAdmin Home Page

Page 45: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

45

Database Server Root Password

By default, there is no root password. Set the root password using phpMyAdmin.

Go to the Users tab.

Edit the root userto changeits password.

Page 46: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

46

Database Server Root Password, cont’d

Page 47: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

47

Enable phpMyAdmin to Connect

phpMyAdmin connects to the MySQL database server as the root user.

Now you must tell phpMyAdmin what the new root password is.

Edit the configuration fileXAMPP/xamppfiles/phpmyadmin/config.inc.php

Edit the line $cfg['Servers'][$i]['password'] = 'root password';

Page 48: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

48

Add a New Database User

Name the user after yourself or your team. Click “Add user” on the Users tab. Use “localhost” for the host.

Tick the checkboxto create a database with the same name.

Page 49: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

49

Create a Table in the New Database

Page 50: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

50

Insert Data into the Table

Page 51: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

51

Browse the Table Contents

Page 52: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

52

MySQL Command Line Interface~: /Applications/XAMPP/xamppfiles/bin/mysql -u supercoders -pEnter password:

mysql> show databases;+--------------------+| Database |+--------------------+| information_schema || supercoders |+--------------------+2 rows in set (0.00 sec)

mysql> use supercodersDatabase changed

mysql> show tables;+-----------------------+| Tables_in_supercoders |+-----------------------+| people |+-----------------------+1 row in set (0.00 sec)

Page 53: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

53

MySQL Command Line Interface, cont’dmysql> select * from people;+-----+--------+-------+--------+--------+| id | first | last | gender | salary |+-----+--------+-------+--------+--------+| 101 | John | Adams | M | 120000 || 102 | Mary | Smith | F | 155000 || 105 | Helen | Troy | F | 75000 || 110 | Albert | Jones | M | 160000 |+-----+--------+-------+--------+--------+4 rows in set (0.00 sec)

mysql> select * from people -> where first = 'Helen' -> and last = 'Troy';+-----+-------+------+--------+--------+| id | first | last | gender | salary |+-----+-------+------+--------+--------+| 105 | Helen | Troy | F | 75000 |+-----+-------+------+--------+--------+1 row in set (0.00 sec)

mysql>

Page 54: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

54

Simple End-to-End Web Application!

Client side An HTML form to submit a person’s

first and last names.

Server side PHP code that uses the first and last names

to query the people table in the back end database. Dynamically generate a new web page

containing a table of the query results.

Back end A database table containing people data.

Demo

Page 55: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

55

Default Web Page: index.html<body> <form action="queryDB.php" method="get"> <fieldset> <legend>User input</legend> <p> <label>First name:</label> <input name="firstName" type="text" /> </p> <p> <label>Last name:</label> <input name="lastName" type="text" /> </p> <p> <input type="submit" value="Submit" /> </p> </fieldset> </form></body>

people/index.html

Page 56: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

56

PHP Page: queryDB.php<body> <h1>Query Results</h1> <p> <?php $first = filter_input(INPUT_GET, "firstName"); $last = filter_input(INPUT_GET, "lastName"); try { // Connect to the database. $con = new PDO("mysql:host=localhost;dbname=supercoders", "supercoders", "sesame"); $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

... } catch(PDOException $ex) { echo 'ERROR: '.$ex->getMessage(); } ?> </p></body>

PDO documentation:http://php.net/manual/en/book.pdo.php

queryDB.php

Connect to thedatabase and set $conto refer to theconnection object.

If an error occurs,throw anexception.

Page 57: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

57

PHP Page: queryDB.php, cont’d try { ...

$query = "SELECT * FROM people";

// We're going to construct an HTML table. print "<table border='1'>\n"; // Fetch the database field names. $result = $con->query($query); $row = $result->fetch(PDO::FETCH_ASSOC); // Construct the header row of the HTML table. print " <tr>\n"; foreach ($row as $field => $value) { print " <th>$field</th>\n"; } print " </tr>\n"; ... }

Query the database toget a result set $result.Fetch one $row fromthe result set as anassociative array offield:value elements.Print the $field name.

queryDB.php

Page 58: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

58

PHP Page: queryDB.php, cont’d try { ...

// Constrain the query if we got first and last names. if ((strlen($first) > 0) && (strlen($last) > 0)) { $query = "SELECT * FROM people ". "WHERE first = '$first' ". "AND last = '$last'"; } // Fetch the matching database table rows. $data = $con->query($query); $data->setFetchMode(PDO::FETCH_ASSOC);

... }

Query the databaseagain to get the result set $data.

queryDB.php

Page 59: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

59

PHP Page: queryDB.php, cont’d

try { ...

// Construct the HTML table row by row. foreach ($data as $row) { print " <tr>\n"; foreach ($row as $name => $value) { print " <td>$value</td>\n"; } print " </tr>\n"; } print ” </table>\n"; ... }

Loop over each $rowof the result set $data.

Loop over the name:valueelements of each $row.Print the $value.

queryDB.php

Page 60: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

60

Setting the Fetch Mode

Instead of

You can write instead

$result = $con->query($query);$row = $result->fetch(PDO::FETCH_ASSOC)

$result = $con->query($query);$result->setFetchMode(PDO::FETCH_ASSOC);$row = $result->fetch()

Page 61: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

61

Single-Query Alternative

print "<table border='1'>\n";

// Query the database.$data = $con->query($query);$data->setFetchMode(PDO::FETCH_ASSOC);

// Construct the HTML table row by row.// Start with a header row.$doHeader = true;foreach ($data as $row) { ...}

print " </table>\n”;

queryDB2.php

Page 62: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

62

Single-Query Alternative, cont’d// Construct the HTML table row by row.// Start with a header row.$doHeader = true;foreach ($data as $row) { // The header row before the first data row. if ($doHeader) { print " <tr>\n"; foreach ($row as $name => $value) { print " <th>$name</th>\n"; } print " </tr>\n"; $doHeader = false; } ...} queryDB2.php

Page 63: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

63

Single-Query Alternative, cont’d

// Construct the HTML table row by row.// Start with a header row.$doHeader = true;foreach ($data as $row) { // The header row before the first data row. ...

// Data row. print " <tr>\n"; foreach ($row as $name => $value) { print " <td>$value</td>\n"; } print " </tr>\n";}

queryDB2.php

Page 64: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

64

Assignment #1

Construct a single MySQL database table that contains some data. Your choice of fields and data values.

Create an HTML page containing various types of input (text, checkboxes, radio buttons, etc.).

Create a PHP page that makes different queries of the database table based on the form data.

Dynamically generate a web page that displays the query results.

Page 65: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

65

Assignment #1, cont’d

Make screen shots of your web pages.

Create a “dump” of your database with the mysqldump command located in the XAMPP bin directory:

Note: No space between –p and the password. Example:

The output file create.sql will allow the graders to recreate your database table.

mysqldump –u username –ppassword dbname > create.sql

mysqldump -u supercoders -psesame supercoders > create.sql

Page 66: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

66

Assignment #1, cont’d

Create a zip file named after your team (e.g., supercoders.zip) containing:

Your .html and .php files. Output from the mysqldump command. Screen shots of your web pages.

Email to [email protected]

Subject line: CMPE 226 Assignment #1 team name

CC all team members.

Page 67: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

67

Assignment #1, cont’d

This is a team assignment.

One submission per team. Each team member receives the same score.

Due Friday, Sept. 11 at 11:59 PM.

Page 68: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

68

PHP Syntax

Very similar to C. End each statement with a semicolon.

Case sensitive: variables, constants, array keys class properties and constraints

Case insensitive: functions (pre-defined and user-defined) class constructors and methods reserved words

Page 69: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

69

PHP Variables

All variable names start with $.

PHP is a dynamically typed language. You don’t declare a variable’s type. A variable can be assigned a value of any type.

PHP data types scalar: integer, float, boolean, string array object resource NULL

Page 70: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

70

PHP Strings

Enclose a string with single or double quotes. Examples:

Variables embedded in a double-quoted string are evaluated:

But not:

"Hello, world!"'Hello, world!'"It's a nice day."'Define "string" for me.'"Define \"string\" please."

"The first name is $first."

'The first name is $first.'

Page 71: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

71

PHP String Operations

The string concatenation operator is .

Some string functions: strlen() strtoupper() strtolower() ucwords() capitalize the first letter of every word

Demo

$name = $last . ", " . $first;$name .= ", Esq.";

Page 72: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

72

Heredocs

Use a heredoc to avoid string quoting issues. Example: $first = "John";

$last = "Smith";

print <<<HERE<table border="1"> <tr> <td>First name:</td> <td>$first</td> </tr> <tr> <td> Last name:</td> <td>$last</td> </tr></table>HERE;

Must be on a line by itselfwith no indentation.

Demo

Page 73: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

73

PHP Constants

Name constants with all uppercase letters, by convention. Constants are not variables, so do not use $.

Examples

But not:

define (PI, 3.1415926);define (HOST_NAME, "localhost");print "Host name is " . HOST_NAME;

print "Host name is HOST_NAME";

Page 74: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

74

Two Kinds of PHP Arrays

Indexed array Indexes are integers.

Associative array Indexes are strings. key-value pairs, like a hash table.

Page 75: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

75

Creating PHP Indexed Arrays

Use the array() function:

Specify the first index value. Subsequent elements are indexed incrementally.

An array of sequential numbers:

$bands[] = "Beatles";$bands[] = "Rolling Stones";$bands[] = "Queen";

$bands = array("Beatles", "Rolling Stones", "Queen");

$bands = array(2=>"Beatles", "Rolling Stones", "Queen");

$values = range(5, 10);

Page 76: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

76

Creating PHP Associative Arrays

Use the array() function:

$states["CA"] = "California";$states["NY"] = "New York";$states["TX"] = "Texas";

$states = array( "CA" => "California", "NY" => "New York", "TX" => "Texas");

An associative array is like a hash table.

Page 77: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

77

Looping over Array Elements

Use the foreach statement:

Examples:

foreach ($arrayname as $variable) { … }

foreach ($arrayname as $key => $value) { … }

foreach ($bands as $bandName) { print $bandName;}

foreach ($states as $abbrev => $fullName) { print "State $fullName is abbreviated $abbrev";}

Demo

Page 78: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

78

Multidimensional Arrays

$north = array("ND" => "North Dakota", "MN" => "Minnesota");$south = array("TX" => "Texas", "FL" => "Florida");$east = array("NY" => "New York", "ME" => "Maine");$west = array("CA" => "California", "OR" => "Oregon");

$us = array( "N" => $north, "S" => $south, "E" => $east, "W" => $west);

Demo

Page 79: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

79

PHP Functions

Syntax for programmer-defined functions:

Examples:

A function can optionally return a value.

function name (optional arguments){ // statements in the body}

function doSomething() { … }function sayHello($first, $last) { … }function greet($name, $language = "English") { … }function calculate($input, &$output) { … }

return value;

Default value

Passed by reference

Page 80: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

80

Scope of PHP Variables

Variables have the scope of the PHP filein which they reside.

A programmer-defined function creates a scope for its variables. Variables defined in a function

cannot be accessed outside the function. Variables defined outside the function

are not accessible inside the function. Use the global statement inside a function

to access outside variables. Example: global $outsideVar;

Page 81: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

81

PHP Data Objects (PDO)

Create a database abstraction layer:

Postgres MySQL Oracle

PHP Data Objects (PDO)

PHP

query()

PDO documentation:http://php.net/manual/en/book.pdo.php

Page 82: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

82

PDO Examples

Create a new PDO object to represent the database connection.

Set the error mode attribute to throw an exception if there is an error.

// Connect to the database.$con = new PDO("mysql:host=localhost;dbname=supercoders", "supercoders", "sesame");$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

Page 83: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

83

PDO Examples, cont’d

PDO::query() executes an SQL statement and returns a result set as a PDOStatement object.

PDOStatement::fetch() fetches the next row of the result set. PDO::FETCH_ASSOC returns the row as an

associative array indexed by column names.

// Fetch the database field names.$result = $con->query($query);$row = $result->fetch(PDO::FETCH_ASSOC);

Page 84: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

84

PDO Examples, cont’d

Extract the column (field) names of the fetched row to construct the header rowof the HTML table.

// Construct the header row of the HTML table.print " <tr>\n";foreach ($row as $field => $value) { print " <th>$field</th>\n";}print " </tr>\n";

Page 85: CMPE 226 Database Systems September 2 Class Meeting Department of Computer Engineering San Jose State University Fall 2015 Instructor: Ron Mak mak

Computer Engineering Dept.Fall 2015: September 2

CMPE 226: Database Systems© R. Mak

85

PDO Examples, cont’d

PDOStatement::setFetchMode sets the default fetch mode for this statement.

// Fetch the matching database table rows.$data = $con->query($query);$data->setFetchMode(PDO::FETCH_ASSOC); // Construct the HTML table row by row.foreach ($data as $row) { print " <tr>\n"; foreach ($row as $name => $value) { print " <td>$value</td>\n"; } print " </tr>\n";}