Grundlæggende programmering

Karakter: 12

Assignment 1 (HTML) 10%

Assignment 1.1 (33% of assignment 1)

Which of the following tags belong in the head section (i.e. <head></head>) and which in the body section (i.e. <body></body>)? (check the box of the correct answer for each tag)

<style>

:

☒ <head>

☐ <body>

<footer>

:

☐ <head>

☒ <body>

<h2>

:

☐ <head>

☒ <body>

<link>

:

☒ <head>

☐ <body>

<span>

:

☐ <head>

☒ <body>

<meta>

:

☒ <head>

☐ <body>

<article>

:

☐ <head>

☒ <body>

<a>

:

☐ <head>

☒ <body>

<title>

:

☒ <head>

☐ <body>

<p>

:

☐ <head>

☒ <body>

 

Assignment 1.2 (33% of assignment 1)

Write the HTML code that will create a list of two links as in the image bellow. Write the html code so that the first link will lead to www.aau.dk. The second link also leads to www.aau.dk but it should open it in a new window/tap.

 

Write all html code you need (e.g. html,head… ) to create the page in the image above

<!DOCTYPE html><html><head><title></title></head>

<body>

<ul>

<li> <a href=”https://www.aau.dk”>Option 1</a></li>

<li> <a href=”https://www.aau.dk” target=”blank”>Option

2</a></li>

</ul>

</body>

</html>

 

Assignment 1.3 (33% of assignment 1)

There are errors in the code bellow. Find the errors in the code and provide a brief description of what the errors are. Highlight the errors in the code.

<!doctype html>

<html><head>

<meta charset=”utf-8″>

<title>test page<title>

</head>

<body>

 

<article>

<h1>Main Title</h1>

<p>Lorem ipsum dolor sit amet, consectetur.</p>

end

</article >

 

class=”main”>

<div

<h1>Title</h1>

 

id=”textStyle “>

<p Lorem ipsum dolor sit amet, consectetur.</p>

 

<h2>Suptitle</h1>

<img src=”image1.jpg” class=”mainImg” id=”#img”>

id=”textStyle “>

<p Lorem ipsum dolor sit amet, consectetur.Nunc id

<spam>sit

amet</spam>

ipsum ornare, feugiat ipsum quis, ultrices orci. Donec sodales vulputate nunc sit amet convallis. Integer suscipit felis dolor, ornare justo commodo in. Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Suspendisse in <strong>quam lectus.</strong>

</p>

 

</div>

</body>

Write a small description of the errors you found in the box bellow:

  1. The <article> tag should end with </article>.
  2. It refers to a class called main, but there is no link to a stylesheet, nor is there <style></style> in the header containing any classes or id’s.
  3. Same as above, but this one also has the error that it contains a space before the last quotation mark.
  4. If it starts with <h2> it should also end with </h2>
  5. Same as 3, but this also has the error that id’s are only supposed to be on one thing. So calling the same id to 2 paragraphs is wrong. Instead you should use a class.
  6. It is called a span, not a spam. So the tags should be <span> and </span>.
  7. And lastly the document should close the html tag at the end with </html>

 

 

 

Assignment 2 (CSS) – 10%

Assignment 2.1 (25% of assignment 2)

The image bellow shows an HTML element (green box). There are some CSS rules attached to it that create distances between the box and the surrounding content. Write in the text boxes how the CSS properties are named (for help look at numbers in the image).

 

 

  1. What CSS property sets the thickness of the perimeter (dark blue lines) of the box? (number 1 arrow in the picture)

 

border

 

  1. What CSS property sets the distance between outer perimeter of the box and the surrounding content? (number 2 arrow in the picture)

 

margin

 

  1. What CSS property sets the distance between the content (text) and perimeter of the box? (number 3 arrow in the picture)

 

padding

 

 

 

 

 

Assignment 2.2 (75% of assignment 2)

Write the CSS code that is needed to make the following HTML code look like the image below

 

 

<!

DOCTYPE html

>

 

<

>

html

 

head

<

>

 

<

meta

 

charset

=

“utf

8

>

 

<

title

>

testpage

<

/title

>

 

<

/head

>

 

<

body

>

 

 

<

div

 

class

=

“mainBox”

>

 

 

1>

<

h

Info Box

1>

/h

<

 

 

p

<

 

>

 

Lorem ipsum dolor sit amet, coetur dolor sit ameor sit amet dolor

sit amet, consectetur dolor sit ametdoloramet, coetur dolor sit ameor sit

amet dolor sit amet, consectetur dolor sit

ametdolor

.

<

/p

>

 

 

 

 

<

div

 

class

=

“mainBox inner cf”

>

 

<

a

 

href

=

“delete.html”

 

id

=

“delete”

>

delete

<

/a

>

 

 

<

a

 

href

=

“save.html”

 

id

=

“save”

>

save

<

/a

>

 

 

 

<

>

/div

 

 

<

/div

>

 

<

/body

>

 

<

/html

>

 

 

 

 

You are not allowed to change the HTML code. Write your answer in the box bellow (If you need the clearfix code I have already included it on the top of the CSS Box).

  • The div with the class of mainBox should have a width of 550px.
  • The font of the h1 is Tahoma, 19px. Text color is white and the background green.
  • The paragraph text is 12px Times New Roman and has a gap of 10px at each side.
  • The background color of the delete button is #999 and for the safe button is red.

.cf:before, .cf:after {content: ” “; /* 1 */display: table; /* 2 */}

.cf:after {clear: both;}

.cf { *zoom: 1;}

.mainBox {

width:550px; border:1px solid grey;}

h1 { font-family:Tahoma; font-size:19px; color:white; background-color:green; text-align:center; padding:10px 0px; margin-top:-1px;}

p {

font-size:12px; font-family:Times New Roman; padding:10px;}

 

#delete { background-color:#999; color:white; padding:5px 30px; text-decoration:none; margin-left:10px; margin-top:5px;}

#save {

background-color:red; color:white; padding:5px 30px; textdecoration:none; margin-right:10px; float:right; margin-bottom:12px;}

.inner {

border:none;

}

Assignment 3 (Basic PHP) – 10%

 

Assignment 3.1 (33% of assignment 3)

Create a PHP constant by the name of Gravity and give it a value of 9.8 (write your answer in the code box).

$Gravity = 9.8;

 

 

 

 

Assignment 3.2 (33% of assignment 3)

What is the result of running this PHP code (chose only one correct answer)?

<?php

$X = 6;

$Y = 2; $Z= $X+$Y-4*3; echo $Z;

?>

 

☐ 12

☐ -12

☐ 4

☒ -4

 

Assignment 3.3 (33% of assignment 3)

What is the result of running this PHP code (chose only one correct answer)?

<?php

$var1 = “x “; $var2 = “y”; echo “$var1. $var2”;

?>

 

☐ $var1. $var2

☐x . y

☐ x.y

☒ x y

 

Assignment 4 (Control Structures) – 10%

Assignment 4.1 (33% of assignment 4)

The variable $rank stores the rank of a song in the music charts of 2018. The following code displays whether the song is in the top10, top20 or top100.

<?php switch($rank){ case($rank < 10): echo “Top10”; break; case ($rank>10 && $rank < 20):

echo “Top20”; break; case ($rank>20 && $$ rank < 100):

echo “Top100”; break; default:

echo “Not top100 or undefined”;

}

?>

 

In the textboxes write what will be displayed on the screen after the code is executed when $rank is equal to:

Top10

  1. $rank =7 result on screen:

Not top100 or undefined

  1. $rank =201 result on screen:

Not top100 or undefined

  1. $rank =10 result on screen:

Not top100 or undefined

  1. $rank =20 result on screen:

Info: none of the code actually works because of the highlighted yellow part, but I assume that is an

intentional mistake, so I answered what would had happened, had it not been like that.

 

Assignment 4.2 (33% of assignment 4)

Rewrite the previous code (i.e. assignment 4.1) so that it has exactly the same functionality but use if elseif instead of switch statements.

<?php

if ($rank < 10) {

echo “Top10”;

} elseif ( $rank>10 && $rank <20){ echo “Top20”;

} elseif ($rank>20 && $rank<100){ echo “Top100”;

} else {

echo “Not top100 or undefined”; }

?>

Assignment 4.3 (33% of assignment 4)

In an array, we have stored information about Star Wars characters (i.e. name, surname, occupation). You can see this array in the box below.

<?php

//Multidimensional array

$characters = array(array(‘Han’, ‘Solo’, ‘ Smuggler’), array(‘Boba’, ‘Fett’, ‘ bounty hunter’), array(‘Lea’, ‘Organa’, ‘ Princess’), array(‘C’, ‘3PO’, ‘ Android’),

array(‘Jar Jar’, ‘Binks’, ‘Creature’)); ?>

 

Write the PHP code that displays the characters occupation in an HTML list. This list should look like the image bellow (you do not need to use CSS).

 

(Your answer is only valid if your PHP code extracts this information from the array $characters).

 

<?php

//Multidimensional array

$characters = array(array(‘Han’, ‘Solo’, ‘ Smuggler’),

array(‘Boba’, ‘Fett’, ‘ bounty hunter’),

array(‘Lea’, ‘Organa’, ‘ Princess’), array(‘C’, ‘3PO’, ‘ Android’),

array(‘Jar Jar’, ‘Binks’,

‘Creature’)); echo “<ul>”;

for($i=0; $i < 5; $i++){ echo “<li>”;

echo $characters[$i][2];

 

echo “</li>”;

}

 

echo “</ul>”;

 

?>

 

 

Assignment 5 (Functions & Arrays) – 10%

Assignment 5.1 (50% of assignment 5)

Create a PHP function that takes two number inputs, multiplies them, and returns the result. Write the code that is needed to print out the results to the screen for two numbers of your choice.

<?php

function multipli($arg1, $arg2){ $result = $arg1*$arg2;

return $result;

}

echo multipli(3,4);

 

?>

 

Assignment 5.2 (50% of assignment 5)

In the following array, we have stored information about movies. Each movie in our array is either a Comedy or an Action movie.

$movies = array(‘Get Out’=>’Comedy’,

‘Seven Samurai’=>’Action’,

‘ Modern Times’=>’Comedy’,

‘ The Big Sick’=>’Comedy’,

‘Mad Max Fury Road’=>’Action’);

Write the PHP code that displays only the Action movies that are stored in our array on the screen (Your answer is only valid if your PHP code extracts this information from the array $movies).

foreach ($movies as $key => $value){ if($value == ‘Action’){ echo “$key <br>”;

}

}

 

 

Assignment 6 (Practical PHP) – 10%

Assignment 6.1 (33% of assignment 6)

What format is the correct code so that we get “Jan-10, 2019” displayed on our screen (select only one).

☒ echo date(“M-d, Y”, time());

☐ echo date(“d-M,Y”, time());

☐ echo date(“Y-d, m”, time()); ☐ echo date(“m-d, Y”, time());

 

 

Assignment 6.2 (33% of assignment 6) Suppose that the URL for accessing a webpage is: http://localhost/index.php?param= ‘user1’&id=3

What is the correct code do get access to the value stored in param:

☐ $_POST[‘user1’];

☐ $_GET [‘param’];

☐ $_POST [‘id’];

☒ $_GET[‘param’];

 

Assignment 6.3 (33% of assignment 6)

The HTML code below creates a register form that stores a username and password in a text file.

<body>

 

<form name=“myform” id=“myform” method=“post” action=“process_input.php”>

username: <input type=“text” name=“username” id=“usernname”>

 

password: <input type=“password” name=“password” id=“password”>

 

<input type=“submit” id=“submit” value=“submit”>

 

</form>

 

 

</body>

Write the PHP code that is needed for “process_input.php” which is executed as soon as the user presses the “Submit” button in the above HTML form. Your code should store username and password in a file named “save.txt”. You should not overwrite existing usernames and passwords.

 

<?php

$username = htmlentities($_POST[‘username’]); $password = htmlentities($_POST[‘password’]);

$nytekst = <<<_END

$username $password

_END;

$fh = fopen(“save.txt”, “a”) or die(“Unable to open file!”); fwrite($fh, $nytekst);

 

?>

 

Assignment 7 (MYSQL – PHP) – 10%

Assignment 7.1 (33% of assignment 7)

The table below is named “movies”. It has of the following columns with the associated constraints:

Title

duration

rating

released

constraints:

  • Can have up to

100 characters

  • Must always be

specified

The duration is indicated

in minutes (e.g. 122)

 

constraints:

  • Consists of integers,
  • Should only have positive values

 

Each movie can have a

rating from 0 to 100

 

constraints:

– Consists of

integers,

Should only have positive values

constraints:

  • Consists of integers,
  • Should only have positive values

In the box below write the SQL code (as you would in command prompt), that creates the table named movies.

 

MariaDB [exam]> CREATE TABLE movies(

-> title VARCHAR(100) NOT NULL,

-> duration INT(4) UNSIGNED,

-> rating INT(3) UNSIGNED,

-> released INT(4) UNSIGNED);

 

 

Assignment 7.2 (33% of assignment 7)

In the same table from the previous assignment called “movies”, we have stored information about some of the top 100 movies of all time:

title

duration

rating

released

The Shawshank Redemption

142

93

1994

Inception

148

87

2010

The Usual Suspects

106

86

1995

Casablanca

102

85

1942

Raiders of the Lost Ark

115

85

1981

 

In the box below write the SQL code (as you would in command prompt), that displays all information about movies that are longer than 115 minutes in chronological order (i.e. from the newest oldest to the oldest movie).

MariaDB [exam]> SELECT * FROM movies WHERE duration>115 ORDER BY released DESC;

 

Assignment 7.3 (33% of assignment 7)

In the same table as in assignment 7.2 write the SQL code that displays only the title of movies that have a rating greater than (not equal to) 85 that have been released after the year of 1994.

MariaDB [exam]> SELECT title FROM movies WHERE (rating>85 AND released>1994);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Assignment 8 (General exercise) – 30%

Assignment 8.1 (35% of assignment 8)

Suppose that the table “movies” from assignment 7 is stored in a database called “moviedb”. Write the HTML, PHP and CSS code that is needed so that the movies stored in the database are displayed in a browser as in the image bellow. Write your CSS code in an external file called “main.css” and link to it in your HTML file called “view_movies.php”. Make the result seem as similar as possible to the image bellow. The background color of the table header is #222 and regular table rows are #efefef. In the PHP file make the connection to the database and write all HTML and PHP code you need.

Figure 8.1

CSS (main.css)

td { background-color: #efefef; padding: 5px 10px;

}

 

.trting { background-color:black; color: white;

}

 

HTML-PHP (view_movies.php)

<?php

//database connection $connection =

mysqli_connect(‘localhost’, ‘root’, ”, ‘moviedb’);

 

if(!$connection){

die(“cannot connect to database”.mysqli_connect_error());

}

?>

<!DOCTYPE html><html><head>

<link rel=”stylesheet” href=”main.css”>

<title>exam</title>

<meta charset=”utf-8″>

</head><body><div style=”margin-top:0px;”>

<div class=”wrapper”>

 

<?php

$query = “SELECT * FROM movies”;

$results = mysqli_query($connection,$query);

 

if(!$results){

die(“could not query the database” .mysqli_error());

}

 

 

echo “<table>”;

echo ‘<tr><td class=”trting”>Title</td><td

class=”trting”>duration</td><td class=”trting”>rating</td><td class=”trting”>year </td></tr>’; while($row = mysqli_fetch_row($results)){

echo “<tr>”;

echo ‘<td>’, $row[0], ‘</td> <td> ‘, $row[1], ‘</td> <td>

‘,$row[2],'</td> <td> ‘,$row[3];

echo “</td> </tr>”;

 

 

}

echo “</table>”;

?>

</div>

</div>

 

</body>

</html>

 

<?php

//close connection

mysqli_close($connection); ?>

Assignment 8.2 (65% of assignment 8)

Create a page where you can insert information about movies into the table from the previous assignment. The HTML page should look like in the image bellow. It should contain a form with text fields for every column in the table “Movies”. Only the field “title” is required while “duration”, “rating” and “released” are optional. After the user clicks on the button “insert” all data are send to the PHP page “insert_movies.php” which inserts the data to the database. Write the PHP code needed to insert the data in the table movies. Remember to check all requirements and security issues before inserting data. If data are inserted correctly, the user will be redirected to “view_movies.php” from the previous assignment.” Styles for this page should be stored in the external CSS file called “main2.css”

HTML (insert.html )

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”main2.css”>

<title>Insert movie</title>

<meta charset=”utf-8″>

 

</head>

<body>

 

 

<div style=”margin-top:0px;”>

<div class=”wrapper_300 cf”>

 

 

<div>

<fieldset>

<legend>Insert Movie</legend>

<form action=”insert_movies.php” method=”post”>

 

<label>Title: <br>

<input type=”text” class=”input_margin” size=”30″ id=”title” name=”title” required> </label>

<label>Duration: <br>

<input type=”text” class=”input_margin” size=”30″ id=”duration” name=”duration”> </label> <label>Rating: <br>

<input type=”text” class=”input_margin” size=”30″ id=”rating” name=”rating”></input> </label>

<label>Released: <br>

<input type=”text” class=”input_margin” size=”30″ id=”released” name=”released”></label>

 

 

 

<input type=”submit” value=”Insert” class=”search_button pointer”>

 

 

</form>

</fieldset>

 

 

<!– <a href=”index.php”><button class=”search_button pointer”>add</button> </a> —>

</div>

 

</div>

</div>

</body>

</html>

CSS (main2.css)

.search_button { text-decoration:none; color: white; text-align:center; line-height:30px; background-color:black; border:10px; border-color:black; width:60px; margin:4px;

margin-left:0px;

}

 

.input_margin { margin-bottom:4px;

line-height:20px;

}

 

.input_comments { margin-bottom:4px; padding-right:5px;

line-height:20px;

 

}

 

.wrapper_300 {

margin: 0px auto; width: 300px;

position:relative;

} label {

color:grey;

}

PHP (insert_movies.php)

<?php

//database connection $connection =

mysqli_connect(‘localhost’, ‘root’, ”, ‘moviedb’);

 

if(!$connection){

die(“cannot connect to database”.mysqli_connect_error());

}

 

 

?>

 

<?php

$title = htmlentities($_POST[‘title’]);

$duration = htmlentities($_POST[‘duration’]); //sæt htmlentities ved alle

$rating = htmlentities($_POST[‘rating’]);

$released = htmlentities($_POST[‘released’]);

 

$query = “INSERT INTO movies VALUES (‘$title’, ‘$duration’, ‘$rating’, ‘$released’)”;

$results = mysqli_query($connection,$query);

 

if(!$results){ die(“could not query the database” .mysqli_error());

}

 

?>

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”style1.css”>

<title>View Contacts</title>

<meta charset=”utf-8″>

</head>

<body>

<h1 align=”center”>MyContactApp</h1>

<hr>

 

 

<div style=”margin-top:0px;”>

<div class=”wrapper_300 cf”>

<h1 style=”text-align:center”>Movie added: <?php echo $title ?></h1>

</div>

</div>

</body>

</html>

 

<?php

//close connection

mysqli_close($connection); ?>