Dobra večer. Ovdje Ivica Kartelo. Počnimo.
Potrebno predznanje Radionica1 - PHP prvi put
Potrebno predznanje Radionica 8 - Baza podataka prvi put
Upiti koje radimo se zasnivaju na ovoj bazi podataka.
Naučite relacijske baze podataka po mojoj knjizi Access 2000, koju možete skinuti besplatno ovdje.
Ovdje radimo bazu Mariva iz knjige Access 2000, ali u PHP-MySQL verziji.
Upit "Telefonski imenik polaznika tečaja" - Responsive web design (Mobile first)
upit.php
===========
<!DOCTYPE html>
<html>
<head>
<title>Responsive web design</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<?php
$link = mysqli_connect("localhost", "root", "", "mariva");
$result = mysqli_query($link, "SELECT prezime, ime, telefon
FROM polaznici_tecaja ORDER BY prezime, ime");
print "<div class='container'>";
print "<div class='grid_2'>Prezime</div>";
print "<div class='grid_2'>Ime</div>";
print "<div class='grid_2 zadnji'>Telefon</div>";
While ($row = mysqli_fetch_assoc($result))
{
print "<div class='grid_2'>" . $row["prezime"] . "</div>";
print "<div class='grid_2'>" . $row["ime"] . "</div>";
print "<div class='grid_2 zadnji'>" . $row["telefon"] . "</div>";
}
?>
</div>
</body>
</html>
styles.css
==========
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1em; /* 16px/16px = 1em */
color: #ffffff;
background-color: #0916E8;
}
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 66.25%; } /* 530px/800px = 66.25% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
margin-right: 1.25%; /* 10px/800px = 1.25% */
float: left;
display: block;
}
.zadnji {margin-right:0; }
.container{
width: 90%;
max-width: 800px;
padding: 4% 0; /* 32px/800px = 4% */
margin: auto;
}
img {
max-width: 100%;
}
h1 {
font-size: 2.750em; /* 44px/16px = 2.75em */
line-height: 1.25em; /* 55px/44px = 1.25em */
font-weight: 100;
letter-spacing: -2.75px;
color: #ffffff;
}
#tijelo h1 {
color: #b4c34f;
}
h2 {
font-weight: 100;
font-size: 1.75em; /* 28px/16px = 1.75em*/
color: #b4c34f;
}
.najcitaniji {
box-sizing: border-box;
background-color: #faf3bc;
padding: 3.0769230769230769230769230769231%; /* 8px/260px = 3.0769230769230769230769230769231 */
margin: 0 0 5% 0; /* gornja desna donja 40px/800px=5% lijeva */
}
.izbornik {
background-color: #2e0400;
border-radius: 15px;
}
a:link {color:#b4c34f; text-decoration:none;} /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;} /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;} /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;} /* selected link */
ul {
list-style-type:none;
}
@media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}
.omega img {
display: none;
}
h1 {
font-size: 2.5em;}
}
Potrebno predznanje Radionica1 - PHP prvi put
Potrebno predznanje Radionica 8 - Baza podataka prvi put
Upiti koje radimo se zasnivaju na ovoj bazi podataka.
Naučite relacijske baze podataka po mojoj knjizi Access 2000, koju možete skinuti besplatno ovdje.
Ovdje radimo bazu Mariva iz knjige Access 2000, ali u PHP-MySQL verziji.
Upit "Telefonski imenik polaznika tečaja" - Responsive web design (Mobile first)
upit.php
===========
<!DOCTYPE html>
<html>
<head>
<title>Responsive web design</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<?php
$link = mysqli_connect("localhost", "root", "", "mariva");
$result = mysqli_query($link, "SELECT prezime, ime, telefon
FROM polaznici_tecaja ORDER BY prezime, ime");
print "<div class='container'>";
print "<div class='grid_2'>Prezime</div>";
print "<div class='grid_2'>Ime</div>";
print "<div class='grid_2 zadnji'>Telefon</div>";
While ($row = mysqli_fetch_assoc($result))
{
print "<div class='grid_2'>" . $row["prezime"] . "</div>";
print "<div class='grid_2'>" . $row["ime"] . "</div>";
print "<div class='grid_2 zadnji'>" . $row["telefon"] . "</div>";
}
?>
</div>
</body>
</html>
styles.css
==========
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1em; /* 16px/16px = 1em */
color: #ffffff;
background-color: #0916E8;
}
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 66.25%; } /* 530px/800px = 66.25% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
margin-right: 1.25%; /* 10px/800px = 1.25% */
float: left;
display: block;
}
.zadnji {margin-right:0; }
.container{
width: 90%;
max-width: 800px;
padding: 4% 0; /* 32px/800px = 4% */
margin: auto;
}
img {
max-width: 100%;
}
h1 {
font-size: 2.750em; /* 44px/16px = 2.75em */
line-height: 1.25em; /* 55px/44px = 1.25em */
font-weight: 100;
letter-spacing: -2.75px;
color: #ffffff;
}
#tijelo h1 {
color: #b4c34f;
}
h2 {
font-weight: 100;
font-size: 1.75em; /* 28px/16px = 1.75em*/
color: #b4c34f;
}
.najcitaniji {
box-sizing: border-box;
background-color: #faf3bc;
padding: 3.0769230769230769230769230769231%; /* 8px/260px = 3.0769230769230769230769230769231 */
margin: 0 0 5% 0; /* gornja desna donja 40px/800px=5% lijeva */
}
.izbornik {
background-color: #2e0400;
border-radius: 15px;
}
a:link {color:#b4c34f; text-decoration:none;} /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;} /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;} /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;} /* selected link */
ul {
list-style-type:none;
}
@media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}
.omega img {
display: none;
}
h1 {
font-size: 2.5em;}
}
Primjedbe
Objavi komentar