ITS 180: Database Management Systems Instructor Information: Mark Jamil questions@markjamil.com
Using Databases Up to now, we have not discussed how data can be used aside from using the command line or tools like Workbench. In reality, databases are used to create applications. Lets discuss how to create a basic database driven web application. HTML (hyper-text markup language) Is a computer language used to create websites. CSS (cascading style sheets) Is a computer language used to control HTML elements. It is main purpose is to help centralize management of websites. PHP (personal home page) Is a computer language designed to compliment HTML by providing functionality that HTML normally does not have. It provides a path to operating system resources. Unlike HTML & CSS, PHP is a server side language.
Intro to Software Development Software is the modern method of providing data services. Most applications use some type of data storage, the relational databases we are using are just one type. Software can do the following Collect data Distribute data Both of the above Software is useless without data. Data is useless without some way to distribute it.
Intro to Software Development The best way to distribute data to a massive number of people is through the use of the World Wide Network (internet). Modern web browsers create a visual representation of a web page written in HTML and CSS. However, HTML and CSS does not provide a good way to collect data and store it for future distribution. HTML and CSS are not very dynamic. To extend HTML and CSS to become more dynamic, languages like PHP were developed to give access to databases.
Intro to Software Development Using HTML, CSS, and PHP a developer will have the capability to collect user data and provide services that require data storage such as banking and shopping. The best way to store data for internet use is in the form of a database. A database is a collection of data structures designed specifically for fast and efficient data storage. Most databases today rely on the B-Tree data structure to store and retrieve data which provides a O(log n) performance (search, insert, delete)
Intro to HTML Here is a example of a simple html page. <html> <head> <title> My Homepage </title> </head> <body> <p>This is a very simple HTML document.</p> <p>It only has two sentences.</p> </body> </html>
Intro to HTML Important HTML elements: HTML supports 3 types of lists: An Unordered List An Ordered List A Definition List (look this one up if you are interested) Unordered lists <ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul> This list will create the following output Apples Oranges Bananas
Intro to HTML Ordered lists <ol> <li>Question 1</li> <li>Question 2</li> <li>Question 3</li> </ol> This list will create the following output Question 1 Question 2 Question 3
Intro to HTML Fruit Vegetable Apple Carrot Orange Pea Pear Turnip Important HTML elements: TABLES <table> <tr> <td>Fruit</td> <td>Vegetable</td> </tr> <tr> <td>Apple</td> <td>Carrot</td> <td>Orange</td> <td>Pea</td> <td>Pear</td> <td>Turnip</td> </tr> </table> Fruit Vegetable Apple Carrot Orange Pea Pear Turnip
Intro to CSS CSS is used to control HTML elements. It is written inside of the HTML page itself or is called from another files (a .css file). CSS can be used in three ways Inline the style rules appear throughout the HTML of the Web page - i.e. in the body. Embedded the style rules are included within the HTML at the top of the Web page - in the head. Linked The style rules are stored in a separate file external to all the Web pages.
Examples of Embedded CSS Within the HTML create a style section: <style type="text/css"> // insert styles here </style> Styles are defined as follows: selector { property: value} CSS styles can have more than one property and value. For example: body {background:black; color:white} p em {background:red; color:white; font-style:italic} p.red {font-family:Arial; color:red} //this is a class selector <p class="red">Red text paragraph</p> a:link {font-family:Arial; color:red; text-decoration:none} //this is an anchor selector
Example of linked CSS To use a .css file you must call the file from within your HTML page like so: <link rel="stylesheet" href="mystyle.css" type="text/css"> Create a file called mystyle.css and inside the file, you can create styles the same way you did with the embedded styles previously: h2 {font-family:Arial; font-style:italic; color:blue} p {font-family:Arial; color:black} p em {background:red; color:white; font-style:italic} p.blue {font-family:Arial; color:blue} p.red {font-family:Arial; color:red}
Connecting to a DB Now that we know how to create a basic web page layout, we will use a PHP script to pull data from our database into the webpage. (see provided script) You will need a web server and PHP support. Install Apache and PHP on your VM. apt-get install apache2 apt-get install php5 apt-get install php5-mysql (this will allow PHP to connect to mysql) Customize the connection script to point at your VM IP address and change the password/username to match those of your MySQL configuration. Remember to place this script in your web root directory. For Apache on Debian, it will be: /var/www/html/ Test the script by opening the Apache website in a web browser. It should be http://you_ip_address From here on, you can use this script to call data from MySQL and you can create any type of database driven web application you want such as a university database like the one we are making in our assignments.