Aufgabe 2: Struktur vorbereitet

This commit is contained in:
Selina 2018-11-10 16:22:45 +01:00
parent 40394d2012
commit bf4ce7d58c
19 changed files with 868 additions and 25 deletions

View file

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

270
aufgabe2/css/main.css Normal file
View file

@ -0,0 +1,270 @@
a:hover {
cursor: pointer;
}
/* Add a black background color to the top navigation */
.topnav {
background: linear-gradient(to bottom, lightgrey, white);
border: 1px solid lightgrey;
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.topnav ul, .topnav li {
list-style: none;
}
.topnav ul {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
}
.topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
display: flex;
}
.topnav .pic-wrapper, .topnav a, .topnav #hamburger-toggle {
height: 75px;
line-height: 75px;
}
/* geht auch ohne .topnav .pic-wrapper {
overflow: hidden;
}*/
.topnav a {
display: block;
transition: 0.5s all ease;
padding: 0 15px;
padding-top: 12px;
/*box-sizing: border-box; kommt bereits über reset.css */
text-decoration: none;
}
.topnav a, .footer {
color: #555;
}
.topnav a:hover {
background: lightgrey;
}
.topnav .pic-wrapper {
margin-right: 15px; /* abstand zu <ul> / links */
}
.topnav .pic-wrapper:hover img {
margin-top: -80px;
}
/* das <li> */
.topnav .icon {
display: block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
border-left: 1px solid lightgrey;
}
.lastBorder {
border-right: 1px solid lightgrey;
}
.topnav #hamburger-toggle {
display: none; /* normal net sichtbar */
}
.page {
width: 1170px;
margin: 0 auto;
}
@media only screen and (max-width: 1050px) {
.page {
width: 95%;
}
}
@media only screen and (max-width: 500px) {
.page {
width: 100%;
}
}
#section {
margin-top: 85px; /* wie die header hoch ist; notwendig da header position fixed hat; 75px + 10px extra */
}
h1 {
margin: 20px 0;
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
}
.text {
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 145%;
font-style: normal;
border: 1px solid lightgrey;
border-top-color: lightgreen;
border-radius: 3px;
column-count: 3;
padding: 10px;
box-shadow: 0 2px 3px lightgrey;
margin-bottom: 12px; /* damit control nicht so daran klebt */
}
@media only screen and (max-width: 1000px) {
.text {
column-count: 2;
}
}
@media only screen and (max-width: 500px) {
.text {
column-count: 1;
}
}
.text a {
color: lightgreen;
}
.text a:hover {
color: darkgreen;
text-decoration: none;
}
.table-wrapper {
font-family: 'Roboto', sans-serif;
margin-bottom: 15px;
vertical-align: middle;
width: 100%;
overflow-x: scroll;
}
table#t01 {
width: 100%;
}
table#t01 tr:nth-child(odd) {
background-color: lightgrey;
}
table#t01 th {
background-color: #fff;
white-space: nowrap; /* kein umbruch bei schmaler ansicht */
}
/* die sort up sort down icons neben den Spaltennamen */
table#t01 th i {
font-size: 0.6em;
color: lightgreen;
}
table#t01 th, table#t01 td {
line-height: 1em;
padding: 11px 0;
font-size: 14px; /* same as section */
}
@media only screen and (max-width: 1200px) {
table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) {
display: none;
}
}
@media only screen and (max-width: 900px) {
table#t01 th:nth-child(n+5), table#t01 td:nth-child(n+5) {
display: none;
}
}
@media only screen and (max-width: 600px) {
table#t01 th:nth-child(n+4), table#t01 td:nth-child(n+4) {
display: none;
}
}
.boxed {
border: 1px solid green;
width: 80%;
text-align: center;
}
th {
text-align: left;
border-bottom: 3px solid lightgrey;
}
.did {
border: 1px solid;
float: left;
padding: 2em;
min-height: 150px;
min-width: 250px;
}
.footer {
border-top: 2px solid lightgreen;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: space-between;
font-size: 12px;
}
.foo-left {
margin-top: 15px;
margin-bottom: 30px;
}
.foo-right {
margin-top: 15px;
margin-bottom: 30px;
text-align: right;
}
.option_list ul li {
display: inline;
list-style-type: none;
}
.option_list ul {
padding: 5px;
}
.option_list li {
padding: 3px;
}
/* hamburger menu stuff */
@media only screen and (max-width: 950px) {
.topnav #hamburger-toggle {
display: block; /* normal net sichtbar */
margin-right: 20px;
}
.topnav .wambo {
justify-content: space-between;
}
.topnav #menu {
display: none;
background-color: #ffffff;
position: fixed; /* absolute geht nicht wenn das parent fixed ist ; muss auch fixed sein */
top: 77px;
right: 0;
left: 0;
}
.topnav a {
padding-top: 0;
height: 3em;
line-height: 3em;
}
.topnav #menu.active {
display: block;
}
}

139
aufgabe2/css/reset.css Normal file
View file

@ -0,0 +1,139 @@
/*
HTML5 Reset :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
background: transparent;
}
main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
/* Handle box-sizing while better addressing child elements:
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {max-width: 100%;}
/*
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
In fact, it *will* cause problems with Google Maps' controls at small size.
If this is the case for you, try uncommenting the following:
#map img {
max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}
/* we use a lot of ULs that aren't bulleted.
you'll have to restore the bullets within content,
which is fine because they're probably customized anyway */
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
/* tables still need cellspacing="0" in the markup */
table {border-collapse: separate; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
small {font-size: 85%;}
strong {font-weight: bold;}
td, td img {vertical-align: top;}
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:after { content: " "; display: block; clear: both; }

95
aufgabe2/index.php Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="description" content="Die Daten der Welt im Überblick" />
<meta name="author" content="Michael Hübener und Selina Marie-Alice Schönherr">
<meta name="keywords" content="Welt, Daten, Überblick, HTML">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="js/table.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous">
</head>
<body>
<header class="topnav" id="header">
<div class="page">
<nav class="wambo">
<div class="pic-wrapper">
<img src="resources/world_data_logo_v1.png" alt="Logo">
</div>
<ul id="menu">
<li class="icon">
<a href="index.php"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
</li>
<li class="icon">
<a href="index.php?page=parse"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a>
</li>
<li class="icon">
<a href="index.php?page=save"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a>
</li>
<li class="icon">
<a href="index.php?page=print"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a>
</li>
<li class="icon">
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a>
</li>
<li class="icon lastBorder">
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
</li>
</ul>
<div id="hamburger-toggle"><i class="fas fa-bars"></i></div>
</nav>
</div>
</header>
<section class="page" id="section">
<h1>World Data Overview ...</h1>
<p class='text'>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
continuar payar custosi traductores.
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li
nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres
del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li
sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
</p>
<div id="options" class="option_list"></div>
<div class="table-wrapper">
<table id="t01"></table>
</div>
</section>
<div class="page">
<footer class="footer">
<div class="foo-left">
<p>Copyright © 2018 world_data</p>
<p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
</div>
<div class="foo-right">
<p>This solution has been created by: <br> Team 26</p>
</div>
</footer>
</div>
</body>
</html>

285
aufgabe2/js/table.js Normal file
View file

@ -0,0 +1,285 @@
// Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/
// Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/
// Source: https://stackoverflow.com/questions/13329853/reading-server-file-with-javascript
// Source: https://www.w3schools.com/howto/howto_js_sort_table.asp
// Source: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
window.onload = function () {
handleFile("resources/world_data_v1.csv");
registerHamburgerToggleClickListener();
};
function handleFile(path) {
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
processData(xmlhttp.responseText, path);
}
};
xmlhttp.open("GET", path, true);
xmlhttp.send();
} else {
alert('FileReader are not supported in this browser.');
}
}
function rerequestFile(path, columns) {
if (window.FileReader) {
// FileReader are supported.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
updateTable(xmlhttp.responseText, columns);
}
};
xmlhttp.open("GET", path, true);
xmlhttp.send();
} else {
alert('FileReader are not supported in this browser.');
}
}
function processData(csv, path) {
var columnAmount = 7;
var table = "";
var checkbox = "";
// split rows
var allTextLines = csv.split(/\r\n|\n/);
// create table header
table += "<thead><tr>";
checkbox += "<ul>";
var data = allTextLines[0].split(",");
for (var j = 0; j < columnAmount; j++) {
// create table column header
table += "<th onclick=\"sortTable(" + j + ")\" >";
table += stringPerToSlash(data[j]);
table += ' <i class="fas fa-chevron-up"></i>&nbsp;<i class="fas fa-chevron-down"></i>';
table += "</th>";
// create dropdown elements
checkbox += "<li>";
checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
checkbox += data[j];
checkbox += "</li>";
}
checkbox += "</ul>";
table += "</tr></thead><tbody>";
// create table content
for (var i = 1; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
table += "<tr>";
for (var j = 0; j < columnAmount; j++) {
table += "<td>";
table += data[j];
table += "</td>";
}
table += "</tr>";
}
table += "</tbody>";
document.getElementById('t01').innerHTML = table;
document.getElementById('options').innerHTML = checkbox;
}
function toggleColumn(file) {
var activated_columns = [];
/*
var inner_div = document.getElementById('options').childNodes;
for (i = 0; i < inner_div.length; i++) {
var list = inner_div[i].children[0].childNodes;
for (j = 0; j < list.length; j++) {
var checkbox = list[j].children[0];
if (checkbox.checked) {
activated_columns.push(checkbox.id);
}
}
}
*/
var list_elements = document.getElementById('options').children[0].childNodes;
for (i = 0; i < list_elements.length; i++) {
var element = list_elements[i];
var checkbox = element.children[0];
if (checkbox.checked) {
activated_columns.push(checkbox.id);
}
}
rerequestFile(file, activated_columns);
}
function updateTable(csv, columns) {
var table = "";
// split rows
var allTextLines = csv.split(/\r\n|\n/);
// create table header
table += "<tr>";
var data = allTextLines[0].split(",");
var discarded_indices = [];
for (var j = 0; j < data.length; j++) {
// create table column header
if (columns.includes(data[j])) {
table += "<th onclick=\"sortTable(" + j + ")\" >";
table += data[j];
table += "</th>";
} else {
discarded_indices.push(j);
}
}
// checkbox += "</ul>";
table += "</tr>";
// create table content
for (var i = 1; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
table += "<tr>";
for (var j = 0; j < data.length; j++) {
if (!discarded_indices.includes(j)) {
table += "<td>";
table += data[j];
table += "</td>";
}
}
table += "</tr>";
}
document.querySelector('#t01').innerHTML = table;
}
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("t01");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("td")[n];
y = rows[i + 1].getElementsByTagName("td")[n];
var first_element = x.innerHTML.toLowerCase();
var second_element = y.innerHTML.toLowerCase();
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
// check if the first element is a number, then assume the
// second element is also a number
if (isNaN(first_element)) {
if (first_element > second_element) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else {
if (parseFloat(first_element) > parseFloat(second_element)) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
} else if (dir == "desc") {
// check if the first element is a number, then assume the
// second element is also a number
if (isNaN(first_element)) {
if (first_element < second_element) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else {
if (parseFloat(first_element) < parseFloat(second_element)) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
function stringPerToSlash(columnname) {
return columnname.includes(" per ") ? columnname.replace(" per ", " / ") : columnname;
}
function registerHamburgerToggleClickListener() {
let menu = document.querySelector("#menu");
let header = document.querySelector("#header");
let section = document.querySelector("#section");
document.querySelector("#hamburger-toggle").addEventListener('click', function () {
if (menu.classList.contains('active')) {
// menu ausblenden
document.querySelector("#menu").classList.remove('active');
section.style.marginTop = 0;
} else {
// menu einblenden
document.querySelector("#menu").classList.add('active');
let height1 = header.clientHeight;
let height2 = menu.clientHeight;
section.style.marginTop = height1 + height2 + 10 + 'px'; // + 10 für zusätzlichen abstand (klebt sonst aneinander)
}
});
}

7
aufgabe2/parse.php Normal file
View file

@ -0,0 +1,7 @@
<?php
/**
* Created by PhpStorm.
* User: Selin
* Date: 10.11.2018
* Time: 16:00
*/

7
aufgabe2/print.php Normal file
View file

@ -0,0 +1,7 @@
<?php
/**
* Created by PhpStorm.
* User: Selin
* Date: 10.11.2018
* Time: 16:00
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View file

@ -0,0 +1,26 @@
ID ,Country ,birth rate per 1000,cell phones per 100,children per woman,electricity consumption per capita,gdp per_capita,gdp_ per_ capita_ growth,inflation annual,internet user per 100,life expectancy,military expenditure percent of gdp,gps_lat ,gps_long
001,Brazil ,16.405 ,90.01936334 ,1.862 ,2201.808724 ,4424.758692 ,-1.520402823 ,8.228535058 ,39.22 ,74 ,1.615173655 ,-14.235004000,-51.925280000
002,Canada ,10.625 ,70.70997244 ,1.668 ,15119.76414 ,25069.86915 ,-3.953353186 ,2.944408564 ,80.17086651 ,80.9 ,1.415710422 ,56.130366000 ,-106.346771000
003,Chile ,15.04 ,97.01862561 ,1.873 ,3276.06449 ,6451.631126 ,-2.610485847 ,7.47050527 ,38.8 ,78.8 ,3.064076139 ,-35.675147000,71.542969000
004,China ,13.536 ,55.97490921 ,1.642 ,2632.724637 ,2208.403948 ,8.648414427 ,6.684109668 ,28.97659939 ,75.6 ,2.24110794 ,35.86166000 ,104.19539700
005,Colombia ,20.605 ,92.34584564 ,2.405 ,1041.994137 ,3137.695335 ,0.2081538559 ,3.666941163 ,30 ,75.3 ,3.833780372 ,4.570868000 ,-74.297333000
006,Ecuador ,20.989 ,92.84925653 ,2.69 ,1078.038961 ,1692.067197 ,-1.079538461 ,7.595866872 ,24.6 ,74.1 ,3.746501879 ,-1.831239000 ,-78.183406000
007,Egypt ,24.83 ,69.43661504 ,2.919 ,1607.918763 ,1911.964501 ,2.856917581 ,10.10750976 ,24.28 ,70.2 ,2.137305699 ,26.820553000 ,30.802498000
008,Finland ,11.127 ,144.1530224 ,1.86 ,15241.61194 ,26205.68832 ,-8.791558776 ,0.4277308694 ,82.53133098 ,79.7 ,1.501872268 ,61.924110000 ,25.748151000
009,France ,12.21 ,95.44434226 ,1.978 ,7339.946832 ,22508.76261 ,-3.264056248 ,1.050366124 ,69.0633593 ,81 ,2.55313249 ,46.22763800 ,2.21374900
010,Germany ,8.136 ,127.4188883 ,1.376 ,6753.05764 ,24368.19561 ,-4.886323581 ,0.5959234322 ,79.48523153 ,80 ,1.438871341 ,51.165691000 ,10.451526000
011,Iceland ,14.738 ,107.6604456 ,2.123 ,51259.18763 ,35310.97441 ,-6.990418561 ,6.900703626 ,92.13686385 ,82.2 ,0.0820538039 ,64.9630510000,-19.0208350000
012,Iraq ,31.585 ,65.47478839 ,4.276 ,1086.323768 ,752.1833548 ,1.141874289 ,25.22442136 ,1.047516616 ,68.1 ,4.621383386 ,33.223191000 ,43.679291000
013,Japan ,8.201 ,91.8955442 ,1.359 ,7838.005685 ,38242.02429 ,-6.180260885 ,-2.08543109 ,77.38468963 ,82.8 ,1.019445017 ,36.204824000 ,138.252924000
014,Kazakhstan ,19.775 ,107.7147692 ,2.537 ,4447.142293 ,2345.86415 ,-1.437812068 ,19.5422854 ,17.91457965 ,66.6 ,1.105385125 ,48.019573000 ,66.923684000
015,Mexico ,19.091 ,74.25785259 ,2.313 ,1869.82352 ,5875.619997 ,-7.417438847 ,4.033645258 ,26.34 ,75.5 ,0.5396656609 ,23.6345010000,-102.5527840000
016,New Zealand ,13.831 ,108.7301521 ,2.125 ,9375.550304 ,14778.16393 ,-1.552308788 ,3.486782259 ,79.82609287 ,80.3 ,1.140562366 ,-40.900557000,174.885971000
017,Nigeria ,40.134 ,48.23561006 ,6.021 ,119.8151486 ,513.5003377 ,4.3526073 ,9.313146383 ,20 ,58.5 ,0.8924302789 ,9.0819990000 ,8.6752770000
018,Peru ,21.342 ,85.86901405 ,2.545 ,1043.052601 ,2955.186222 ,-0.2228977721 ,4.49134447 ,31.4 ,76.7 ,1.348875763 ,-9.189967000 ,-75.015152000
019,Russia ,10.828 ,161.1162887 ,1.537 ,6132.978648 ,2806.41483 ,-7.749103694 ,11.60398093 ,29.23584146 ,68.3 ,4.36259042 ,61.52401000 ,105.31875600
020,Saudi Arabia ,23.569 ,167.3474553 ,2.898 ,7430.743897 ,9294.355996 ,-2.242127204 ,14.36222827 ,38 ,77.6 ,10.95653405 ,23.88594200 ,45.07916200
021,South Africa ,22.113 ,93.33587369 ,2.5 ,4532.021902 ,3697.67368 ,-2.732989408 ,7.861608575 ,10.08745979 ,55.8 ,1.394530379 ,-30.559482000,22.937506000
022,Sweden ,11.72 ,112.1241184 ,1.937 ,14143.01101 ,30885.45914 ,-5.976535294 ,1.022227082 ,91.12326108 ,81.2 ,1.247701873 ,60.128161000 ,18.643501000
023,United Arab Emirates,14.027 ,153.7997194 ,1.903 ,9998.291079 ,22507.00157 ,-11.99171952 ,8.549032358 ,64 ,76.1 ,5.834881976 ,23.424076000 ,53.847818000
024,United Kingdom ,12.195 ,130.1742603 ,1.89 ,5685.635995 ,27933.77767 ,-5.019251823 ,2.861406642 ,77.79971962 ,79.7 ,2.667209048 ,52.355517700 ,-1.174319700
025,United States ,14.191 ,89.14911634 ,2.002 ,12913.71143 ,36539.22823 ,-4.342271218 ,1.152326348 ,71.21181627 ,78.3 ,4.822730027 ,37.090240000 ,-95.712891000
1 ID Country birth rate per 1000 cell phones per 100 children per woman electricity consumption per capita gdp per_capita gdp_ per_ capita_ growth inflation annual internet user per 100 life expectancy military expenditure percent of gdp gps_lat gps_long
2 001 Brazil 16.405 90.01936334 1.862 2201.808724 4424.758692 -1.520402823 8.228535058 39.22 74 1.615173655 -14.235004000 -51.925280000
3 002 Canada 10.625 70.70997244 1.668 15119.76414 25069.86915 -3.953353186 2.944408564 80.17086651 80.9 1.415710422 56.130366000 -106.346771000
4 003 Chile 15.04 97.01862561 1.873 3276.06449 6451.631126 -2.610485847 7.47050527 38.8 78.8 3.064076139 -35.675147000 71.542969000
5 004 China 13.536 55.97490921 1.642 2632.724637 2208.403948 8.648414427 6.684109668 28.97659939 75.6 2.24110794 35.86166000 104.19539700
6 005 Colombia 20.605 92.34584564 2.405 1041.994137 3137.695335 0.2081538559 3.666941163 30 75.3 3.833780372 4.570868000 -74.297333000
7 006 Ecuador 20.989 92.84925653 2.69 1078.038961 1692.067197 -1.079538461 7.595866872 24.6 74.1 3.746501879 -1.831239000 -78.183406000
8 007 Egypt 24.83 69.43661504 2.919 1607.918763 1911.964501 2.856917581 10.10750976 24.28 70.2 2.137305699 26.820553000 30.802498000
9 008 Finland 11.127 144.1530224 1.86 15241.61194 26205.68832 -8.791558776 0.4277308694 82.53133098 79.7 1.501872268 61.924110000 25.748151000
10 009 France 12.21 95.44434226 1.978 7339.946832 22508.76261 -3.264056248 1.050366124 69.0633593 81 2.55313249 46.22763800 2.21374900
11 010 Germany 8.136 127.4188883 1.376 6753.05764 24368.19561 -4.886323581 0.5959234322 79.48523153 80 1.438871341 51.165691000 10.451526000
12 011 Iceland 14.738 107.6604456 2.123 51259.18763 35310.97441 -6.990418561 6.900703626 92.13686385 82.2 0.0820538039 64.9630510000 -19.0208350000
13 012 Iraq 31.585 65.47478839 4.276 1086.323768 752.1833548 1.141874289 25.22442136 1.047516616 68.1 4.621383386 33.223191000 43.679291000
14 013 Japan 8.201 91.8955442 1.359 7838.005685 38242.02429 -6.180260885 -2.08543109 77.38468963 82.8 1.019445017 36.204824000 138.252924000
15 014 Kazakhstan 19.775 107.7147692 2.537 4447.142293 2345.86415 -1.437812068 19.5422854 17.91457965 66.6 1.105385125 48.019573000 66.923684000
16 015 Mexico 19.091 74.25785259 2.313 1869.82352 5875.619997 -7.417438847 4.033645258 26.34 75.5 0.5396656609 23.6345010000 -102.5527840000
17 016 New Zealand 13.831 108.7301521 2.125 9375.550304 14778.16393 -1.552308788 3.486782259 79.82609287 80.3 1.140562366 -40.900557000 174.885971000
18 017 Nigeria 40.134 48.23561006 6.021 119.8151486 513.5003377 4.3526073 9.313146383 20 58.5 0.8924302789 9.0819990000 8.6752770000
19 018 Peru 21.342 85.86901405 2.545 1043.052601 2955.186222 -0.2228977721 4.49134447 31.4 76.7 1.348875763 -9.189967000 -75.015152000
20 019 Russia 10.828 161.1162887 1.537 6132.978648 2806.41483 -7.749103694 11.60398093 29.23584146 68.3 4.36259042 61.52401000 105.31875600
21 020 Saudi Arabia 23.569 167.3474553 2.898 7430.743897 9294.355996 -2.242127204 14.36222827 38 77.6 10.95653405 23.88594200 45.07916200
22 021 South Africa 22.113 93.33587369 2.5 4532.021902 3697.67368 -2.732989408 7.861608575 10.08745979 55.8 1.394530379 -30.559482000 22.937506000
23 022 Sweden 11.72 112.1241184 1.937 14143.01101 30885.45914 -5.976535294 1.022227082 91.12326108 81.2 1.247701873 60.128161000 18.643501000
24 023 United Arab Emirates 14.027 153.7997194 1.903 9998.291079 22507.00157 -11.99171952 8.549032358 64 76.1 5.834881976 23.424076000 53.847818000
25 024 United Kingdom 12.195 130.1742603 1.89 5685.635995 27933.77767 -5.019251823 2.861406642 77.79971962 79.7 2.667209048 52.355517700 -1.174319700
26 025 United States 14.191 89.14911634 2.002 12913.71143 36539.22823 -4.342271218 1.152326348 71.21181627 78.3 4.822730027 37.090240000 -95.712891000

7
aufgabe2/save.php Normal file
View file

@ -0,0 +1,7 @@
<?php
/**
* Created by PhpStorm.
* User: Selin
* Date: 10.11.2018
* Time: 16:00
*/

View file

@ -0,0 +1,7 @@
<?php
/**
* Created by PhpStorm.
* User: Selin
* Date: 10.11.2018
* Time: 15:59
*/

View file

View file

View file