Ülesanne 2.
Andmebaasita
Andmebaasiga
Stiili aluse võtsin siit: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp
Muutis seda, võttes osa näidisülesande koodist ja lisasin endalt selle, mida vajasin.
Kujundus:
body {
text-align: center;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
/* menuu */
.nav {
font-size: 20px;
background: grey;
padding: 10px;
}
.nav ul {
padding: 0;
margin: 0;
}
.nav ul li {
display: inline;
}
.nav ul li a {
display: inline-block;
color: #f2f2f2;
padding: 10px;
text-decoration: none;
}
.nav ul li a:hover {
color: #565656;
}
/* anekdoot */
.anekdot-div {
background-color: #f9f9f9;
border: 2px solid #cccccc;
border-radius: 10px;
margin: 20px;
text-align: center;
}
.anekdot-div h2 {
color: #555555;
font-size: 22px;
margin-bottom: 15px;
}
.anekdot-div p {
font-size: 18px;
line-height: 1.3;
color: #333333;
}
/* nuppid */
.lisa, form input[type="submit"]{
font-size: 16px;
display: inline-block;
width: auto;
padding: 10px 20px;
margin: 10px;
background-color: #434443;
color: white;
text-decoration: none;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* lisamine */
form {
width: 50%;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
form table {
width: 100%;
}
form table td {
padding: 10px;
}
form table td label {
text-align: right;
display: block;
font-weight: bold;
}
form input[type="text"], form textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
/* jalus */
.nav2 {
font-size: 14px;
background: grey;
margin: 0 5px;
padding: 5px 0;
}
.nav2 p {
text-align: center;
color: black;
margin: 0;
padding: 0;
}
.nav2 p a {
display: inline-block;
color: white;
padding: 5px;
text-decoration: none;
}
.nav2 p a:hover {
color: blue;
}
Andmebaasita:
Pealeht:
<!doctype html>
<html lang="et">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tunniplaan</title>
<link href="kujundus.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div class="nav">
<ul>
<li><a href="anekdoodid/anekdoot_1.php">Baskini anekdoot</a></li>
<li><a href="anekdoodid/anekdoot_2.php">Meie naljaraamat</a></li>
<li><a href="anekdoodid/anekdoot_3.php">Delfi naljad 1</a></li>
<li><a href="anekdoodid/anekdoot_4.php">Maalehe anekdoot</a></li>
<li><a href="anekdoodid/anekdoot_5.php">Delfi naljad 2</a></li>
</ul>
</div>
</div>
<h2>Vali anekdoot!</h2>
<div class="nav2">
<?php require("anekdoodid/jalus.php"); ?>
</div>
</body>
</html>
Navigatsiooniga naljalehtede komponent
<!doctype html>
<html lang="et">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anekdooti leht</title>
<link href="../kujundus.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div class="nav">
<ul>
<li><a href="anekdoot_1.php">Baskini anekdoot</a></li>
<li><a href="anekdoot_2.php">Meie naljaraamat</a></li>
<li><a href="anekdoot_3.php">Delfi naljad 1</a></li>
<li><a href="anekdoot_4.php">Maalehe anekdoot</a></li>
<li><a href="anekdoot_5.php">Delfi naljad 2</a></li>
</ul>
</div>
</div>
Anekdoodi elementide mall
<?php require("p2is.php"); ?>
<div class="anekdot-div">
<h2>Baskini anekdoot</h2>
<p> "Kas ma olen teid kusagil näinud?" - küsib kohtunik süüaluselt.</p>
<p> "Seda küll, härra kohtunik." </p>
<p> Ma andsin teie tütrele muusikatunde!"</p>
<p> "Eluaegne vanglakaristus!" </p>
</div
<?php require("jalus.php"); ?>
Andmebaasiga
Kohandasin koodi andmebaasiga töötamiseks, et laadida navigeerimise elemente ja lisada uusi anekdoote.
Pealeht:
<?php
require ('configs/conf.php');
//require ('configs/conf2zone.php');
global $yhendus;
//tabeli andmete lisamine
if (isset($_REQUEST["nimetus"], $_REQUEST["sisu"]) && !empty($_REQUEST["nimetus"]) && !empty($_REQUEST["sisu"])) {
global $yhendus;
$aeg = date("Y-m-d H:i:s");
$paring=$yhendus->prepare("INSERT INTO anekdoodid(nimetus, sisu, kuupaev)
VALUES (?, ?, ?)");
$paring->bind_param("sss", $_REQUEST["nimetus"], $_REQUEST["sisu"], $aeg);
$paring->execute();
}
?>
<!doctype html>
<html lang="et">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anekdoodi leht</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Anekdoodid</h1>
<div class="nav">
<ul>
<?php
$paring=$yhendus->prepare("SELECT id, nimetus, sisu, kuupaev FROM anekdoodid");
$paring->bind_result($id, $nimetus, $sisu, $kuupaev);
$paring->execute();
while ($paring->fetch()) {
echo "<li><a href='?anekdoot_valik=$id'>" . htmlspecialchars($nimetus) . "</a></li>";
}
?>
</ul>
</div>
<div class="anekdot-div">
<?php
if(isset($_REQUEST["anekdoot_valik"])){
$paring = $yhendus->prepare("SELECT id, nimetus, sisu, kuupaev FROM anekdoodid WHERE id = ?");
$paring->bind_result($id, $nimetus, $sisu, $kuupaev);
$paring->bind_param("i", $_REQUEST["anekdoot_valik"]);
$paring->execute();
if ($paring->fetch()) {
echo "<h2>" . htmlspecialchars($nimetus) . "</h2>";
echo "<p>" . nl2br(htmlspecialchars($sisu)) . "</p>";
echo "<small>Lisatud: " . htmlspecialchars($kuupaev) . "</small>";
}
}
if (!isset($_REQUEST["lisamine"])&& !isset($_REQUEST["anekdoot_valik"])){
echo "<h2>Vali anekdoot!</h2>";
}
?>
</div>
<?php
if (!isset($_REQUEST["lisamine"])){
echo "<a href='?lisamine=jah' class='lisa'>Lisa uus</a>";
}
?>
<?php
if (isset($_REQUEST["lisamine"])){
?>
<h3>Anekdoodi lisamine</h3>
<form action="?" method="post">
<table>
<tr>
<td><label for="nimetus">Nimetus:</label></td>
<td><input type="text" id="nimetus" name="nimetus" required></td>
</tr>
<tr>
<td><label for="sisu">Sisu:</label></td>
<td><textarea type="text" id="sisu" name="sisu" rows="5" cols="20" required></textarea></td>
</tr>
</table>
<input type="submit" value="Lisa">
</form>
<?php
}
?>
</body>
<footer>
<div class="nav2">
<?php require("jalus.php"); ?>
</div>
</footer>
</html>