Lab.

6
More on MySQL & CSS
Instructed By: Mr. Ashan Eranga Kudabalage

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 2

Content

1. Recap to last week

2. MariaDB command prompt
3. Foreign key and its function
4. Review on CSS
5. Project Discussion
6. Project group formation

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 3

Recap to Last Week

Command for creating the database

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 4

Recap to Last Week (Contd.)

Command for showing the databases

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 5

Recap to Last Week (Contd.)

Command for selecting a Database

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 6

Recap to Last Week (Contd.)

Command for creating a table

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 7

Recap to Last Week (Contd.)

Dropping tables

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 8

MariaDB Command Prompt

Opening the shell

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 9

MariaDB Command Prompt (Contd.)

MySQL prompt
mysql -h localhost -u root

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 10

MariaDB Command Prompt (Contd.)

Show databases

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 11

MariaDB Command Prompt (Contd.)

Now create a database called “ITS_351”, create a table “Students” and
insert entries as given

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 12

Foreign key and its function

- a key used to link two tables together.
- a field (or collection of fields) in one table that refers to the PRIMARY KEY
or index in another table.
- table containing the foreign key is called the child table, and the table
containing the candidate key is called the referenced or parent table.

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 13

Foreign key and its function (Contd.)

If you have two tables called “Person” and “Orders”

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 14

Foreign key and its function (Contd.)

If you have two tables called “Person” and “Orders” with a relationship

CREATE TABLE Orders (

OrderID int NOT NULL,
OrderNumber int NOT NULL,
PersonID int,
PRIMARY KEY (OrderID),
FOREIGN KEY (PersonID) REFERENCES Person(PersonID)
);

ALTER TABLE Orders

ADD FOREIGN KEY (PersonID) REFERENCES Person(PersonID);

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 15

Foreign key and its function (Contd.)

Foreign key relationship between “Person” and “Orders” tables

Insert data into the tables and try to delete the entry of PersonID = 1 in the
“person” table

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 16

Foreign key and its function (Contd.)

Foreign key relationship between “Person” and “Orders” tables

ALTER TABLE Orders DROP FOREIGN KEY orders_ibfk_1;

ALTER TABLE Orders

ADD FOREIGN KEY (PersonID) REFERENCES Person(PersonID) ON
DELETE CASCADE;
Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022
 17

Foreign key and its function (Contd.)

Foreign key relationship between “Person” and “Orders” tables

Now delete the PersonID = 1 from the “Person” table and check what
happens in “Orders” table

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 18

Review on CSS

➢ Basics of CSS
▪ CSS stands for cascading style sheet. It is used to style the content and
the appearance of the Web content. All is about: fonts, colors,
backgrounds, borders, text formatting, link effect, etc.
▪ CSS can be used inline, internal, or indirectly (external) to an HTML
page.

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 19

Review on CSS (Contd.)

Inline use: The CSS is defined right at the required element within the HTML page.
In order to define the property for that element only.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 20

Review on CSS (Contd.)

<!DOCTYPE html>
<html>
<head>
<title> My personal website</title>
<style>
body {background-color: powderblue;} h1{color: blue;
font-family: senseri;}
p {color: red;}
</style>
</head> Internal use
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022
 21

Review on CSS (Contd.)

External use: The CSS content is separated in a .css text file and it is linked
to a HTML page by a structure command.

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 22

Review on CSS (Contd.)

All defined CSS is wrapped here, in a name.css text

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 23

Review on CSS (Contd.)

Use all the skills you learned about CSS

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 24

Review on CSS (Contd.)

Use all the skills you learned about CSS

https://tadabase.io/staticassets/images/illustrations/hosting.png (image used)

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

 25

Project Discussion
Project evaluating criteria and requirements

1. 3 - 4 students per group (Individual work loads should be defined).

2. Entity - Relationship diagram.
3. HTML / CSS / PHP or Python
4. Require to use databases
5. At least 2 web pages
6. With all operations - Create(Insert) / Read (Select) / Update / Delete
7. Make slides in the proposal and the final will be the demonstration of the
finished project

Sirindhorn International Institute of Technology, Bangkadi Date: 3rd of October 2022

Thank you & Assignment time…