Schönen guten Abend zusammen,
endlich ist es soweit und meine erste Website ist online. Allerdings muss ich gleich dazu sagen, dass es nur eine Seite ist, die mir zur Übung dienen soll.
Deswegen ist die natürlich noch ausbaufähig, wahrscheinlich besonders was die Sicherheit usw. angeht und der Code wird auch noch nicht top aussehen. Das mache ich dann alles nach und nach...
Feedback würde ich gerne für alles haben, was euch auffällt. Ob das jetzt etwas mit dem Design zu tun hat, der Sicherheit oder mit der Formatierung des Codes. Alles nehme ich gerne.
Die Website könnt ihr euch unter folgendem Link anschauen: http://jr-cologne.16mb.com/webdesign-jr/
Der Code:
index.php
<?php
require_once('php/config.php');
require_once('php/functions.php');
?>
<!DOCTYPE html>
<html lang="de">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>
<title>Startseite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="navMenu_open">
<div id="wrapper">
<header>
<a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
</header>
<nav id="nav_main">
<div id="navbar">
<a href="#navMenu_open" class="menu-button show-navMenu">Menü</a>
<a href="#navMenu_close" class="menu-button hide-navMenu">Menü</a>
</div>
<ul>
<li><a href="index.php">Startseite</a>
<ul>
<li><a href="#art1">Artikel 1</a></li>
<li><a href="#art2">Artikel 2</a></li>
<li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
</ul>
</li>
<li><a href="ueber-uns.php">Über uns</a></li>
<li><a href="leistungen.php">Leistungen</a>
<ul id="dropdown-menu_leistungen">
<li><a href="leistungen.php#konzeption">Konzeption</a></li>
<li><a href="leistungen.php#webdesign">Webdesign</a></li>
<li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
<li><a href="leistungen.php#cms">CMS</a></li>
<li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
</ul>
</li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="heading_container">
<h2 id="heading">News</h2>
</div>
<article id="art1" class="first-article">
<h3>Artikel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>
</article>
<article id="art2">
<h3>Artikel 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>
</article>
<article id="art3">
<h3>Artikel 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>
</article>
</main>
</div>
<footer>
<p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. Übungsseite.<wbr> Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>
<p><small>© <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>
</footer>
</body>
</html>
Alles anzeigen
ueber-uns.php
<?php
require_once('php/config.php');
require_once('php/functions.php');
?>
<!DOCTYPE html>
<html lang="de">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>
<title>Über uns</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="navMenu_open">
<div id="wrapper">
<header>
<a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
</header>
<nav id="nav_main">
<div id="navbar">
<a href="#navMenu_open" class="menu-button show-navMenu">Menü</a>
<a href="#navMenu_close" class="menu-button hide-navMenu">Menü</a>
</div>
<ul>
<li><a href="index.php">Startseite</a>
<ul>
<li><a href="#art1">Artikel 1</a></li>
<li><a href="#art2">Artikel 2</a></li>
<li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
</ul>
</li>
<li><a href="ueber-uns.php">Über uns</a></li>
<li><a href="leistungen.php">Leistungen</a>
<ul id="dropdown-menu_leistungen">
<li><a href="leistungen.php#konzeption">Konzeption</a></li>
<li><a href="leistungen.php#webdesign">Webdesign</a></li>
<li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
<li><a href="leistungen.php#cms">CMS</a></li>
<li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
</ul>
</li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="heading_container">
<h2 id="heading">Über uns</h2>
</div>
<article class="first-article">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</article>
</main>
</div>
<footer>
<p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. Übungsseite. Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>
<p><small>© <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>
</footer>
</body>
</html>
Alles anzeigen
leistungen.php
<?php
require_once('php/config.php');
require_once('php/functions.php');
?>
<!DOCTYPE html>
<html lang="de">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>
<title>Leistungen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="navMenu_open">
<div id="wrapper">
<header>
<a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
</header>
<nav id="nav_main">
<div id="navbar">
<a href="#navMenu_open" class="menu-button show-navMenu">Menü</a>
<a href="#navMenu_close" class="menu-button hide-navMenu">Menü</a>
</div>
<ul>
<li><a href="index.php">Startseite</a>
<ul>
<li><a href="#art1">Artikel 1</a></li>
<li><a href="#art2">Artikel 2</a></li>
<li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
</ul>
</li>
<li><a href="ueber-uns.php">Über uns</a></li>
<li><a href="leistungen.php">Leistungen</a>
<ul id="dropdown-menu_leistungen">
<li><a href="leistungen.php#konzeption">Konzeption</a></li>
<li><a href="leistungen.php#webdesign">Webdesign</a></li>
<li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
<li><a href="leistungen.php#cms">CMS</a></li>
<li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
</ul>
</li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="heading_container">
<h2 id="heading">Leistungen</h2>
</div>
<nav id="nav_leistungen">
<ul>
<li><a href="#konzeption">Konzeption</a></li>
<li><a href="#webdesign">Webdesign</a></li>
<li><a href="#webentwicklung">Webentwicklung</a></li>
<li><a href="#cms">Content Management Systeme (CMS)</a></li>
<li><a href="#pflege&redesign">Pflege und Redesign bestehender Webauftritte</a></li>
</ul>
</nav>
<article id="konzeption" class="first-article">
<h3>Konzeption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</article>
<article id="webdesign">
<h3>Webdesign</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</article>
<article id="webentwicklung">
<h3>Webentwicklung</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</article>
<article id="cms">
<h3>Content Management Systeme (CMS)</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</article>
<article id="pflege&redesign">
<h3>Pflege und Redesign bestehender Webauftritte</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</article>
</main>
</div>
<footer>
<p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. Übungsseite. Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>
<p><small>© <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>
</footer>
</body>
</html>
Alles anzeigen
kontakt.php
<?php
require_once('php/config.php');
require_once('php/functions.php');
// Deklarationen von Variablen bzgl. Form
$name = $_POST['name'];
$email = $_POST['email']; // Absender für Mail
$betreff = $_POST['betreff']; // Betreff für Mail
$nachricht = $_POST['nachricht']; // Nachricht für Mail
// Deklarationen von Variablen bzgl. Mail
$betreff = '=?UTF-8?B?'.base64_encode($betreff).'?='; // sorgt für richtige Darstellung von Umlauten bei Betreff
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-type: text/plain; charset=utf-8";
$headers[] = "From: {$email}";
$headers[] = "Reply-To: {$email}";
$headers[] = "Subject: {$betreff}";
$headers[] = "X-Mailer: PHP/".phpversion();
?>
<!DOCTYPE html>
<html lang="de">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,400' rel='stylesheet' type='text/css'>
<title>Kontakt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/style.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="navMenu_open">
<div id="wrapper">
<header>
<a href="index.php"><h1 id="logo">Webdesign JR</h1></a>
</header>
<nav id="nav_main">
<div id="navbar">
<a href="#navMenu_open" class="menu-button show-navMenu">Menü</a>
<a href="#navMenu_close" class="menu-button hide-navMenu">Menü</a>
</div>
<ul>
<li><a href="index.php">Startseite</a>
<ul>
<li><a href="#art1">Artikel 1</a></li>
<li><a href="#art2">Artikel 2</a></li>
<li><a href="#art3" class="last-menu-item">Artikel 3</a></li>
</ul>
</li>
<li><a href="ueber-uns.php">Über uns</a></li>
<li><a href="leistungen.php">Leistungen</a>
<ul id="dropdown-menu_leistungen">
<li><a href="leistungen.php#konzeption">Konzeption</a></li>
<li><a href="leistungen.php#webdesign">Webdesign</a></li>
<li><a href="leistungen.php#webentwicklung">Webentwicklung</a></li>
<li><a href="leistungen.php#cms">CMS</a></li>
<li><a href="leistungen.php#pflege&redesign" class="last-menu-item">Pflege und Redesign</a></li>
</ul>
</li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="heading_container">
<h2 id="heading">Kontakt</h2>
</div>
<p id="kontakt">Sie möchten mit mir, dem Betreiber der Website, Kontakt aufnehmen? Dann nutzen Sie doch bitte das folgende Kontaktformular oder <a href="mailto:habichvergessen40@gmail.com" title="habichvergessen40@gmail.com">schreiben Sie mir manuell eine E-Mail</a>.</p>
<form action="" method="post">
<div>
<label for="name">Ihr Name (optional):</label><input type="text" id="name" name="name" maxlength="30">
</div>
<div>
<label for="email">Ihre E-Mail-Adresse:</label><input type="email" id="email" name="email" maxlength="30" required="required">
</div>
<div>
<label for="betreff">Betreff:</label><input type="text" id="betreff" name="betreff" maxlength="50" required="required">
</div>
<div>
<label id="label-nachricht" for="nachricht">Ihre Nachricht:</label>
<textarea cols="80" rows="10" name="nachricht" id="nachricht" maxlength="2500" required="required"></textarea>
</div>
<input type="submit" value="Senden" id="submit-button" name="submit">
<?php
echo ueberpruefeForm($email, $empfaenger, $betreff, $nachricht, $headers, $name); // sende E-Mail (siehe function oben), gebe Rückmeldung für User aus
?>
</form>
</main>
</div>
<footer>
<p><strong>Achtung! Diese Webseite ist lediglich eine Test- bzw. Übungsseite. Die Firma <i>Webdesign JR</i> ist dementsprechend fiktiv und steht in keiner Verbindung mit anderen echten Unternehmen.</strong></p>
<p><small>© <?php echo setCopyright($startYear, $currentYear); ?> Webdesign JR</small></p>
</footer>
</body>
</html>
Alles anzeigen
functions.php
<?php
require_once('config.php');
// Copyright im Footer setzen
function setCopyright($startYear, $currentYear) {
if ($currentYear > $startYear) {
$copyright = $startYear . ' - ' . $currentYear;
} else {
$copyright = $currentYear;
}
return $copyright;
}
// Kontaktform überprüfen (inkl. function für Mailversand über Kontaktform)
function ueberpruefeForm($email, $empfaenger, $betreff, $nachricht, $headers, $name=null) {
if ( $_POST['submit'] == 'Senden' ) {
if ( empty($email) && empty($betreff) && empty($nachricht) ) {
$rueckmeldung = '<p><strong>Fehler! Sie haben alle erforderlichen Felder nicht ausgefüllt. Bitte korrigieren Sie dies.</strong></p>';
} else if ( empty($email) ) {
$rueckmeldung = '<p><strong>Fehler! Sie haben Ihre E-Mail-Adresse nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
} else if ( empty($betreff) ) {
$rueckmeldung = '<p><strong>Fehler! Sie haben den Betreff nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
} else if ( empty($nachricht) ) {
$rueckmeldung = '<p><strong>Fehler! Sie haben Ihre Nachricht nicht eingetragen. Bitte korrigieren Sie dies.</strong></p>';
} else {
if ($name != null) {
$nachricht .= "\r\n\r\n\r\n" . 'Gesendet von: ' . $name;
}
if (sendeMail($empfaenger, $betreff, $nachricht, $headers)) {
$rueckmeldung = '<p><strong>Vielen Dank! Ihre Nachricht wurde erfolgreich versendet.</strong></p>';
} else {
$rueckmeldung = '<p><strong>Offenbar ist ein Fehler beim Versand der E-Mail aufgetreten. Bitte versuchen Sie es später nochmal oder <a href="mailto:habichvergessen40@gmail.com" title="habichvergessen40@gmail.com">schreiben Sie mir manuell eine E-Mail</a>. Vielen Dank für Ihr Verständnis!</strong></p>';
}
}
}
return $rueckmeldung;
}
// Mail über Kontaktform senden
function sendeMail($empfaenger, $betreff, $nachricht, $headers) {
if ( !empty($empfaenger) && mail($empfaenger, $betreff, $nachricht, implode("\r\n",$headers)) == true ) {
return true;
} else {
return false;
}
}
?>
Alles anzeigen
config.php
<?php
// Configs für Copyrightsetzung
$startYear = 2016;
$currentYear = date('Y');
// Deaktivierung von Notices
error_reporting(E_ALL & ~E_NOTICE);
// Aktivierung von Notices
//error_reporting(E_ALL);
// Config des Empfängers von Mails über Kontaktform
$empfaenger = 'habichvergessen40@gmail.com';
?>
Alles anzeigen
style.css
css/* Desktop Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 100%;
height: 100%;
font-family: Roboto, sans-serif;
}
header, nav, main, article, footer {
display: block;
}
h1, h2, h3, nav a {
font-family: "Roboto Slab", serif;
}
#wrapper {
min-height: 100%;
}
header {
background-color: #008000;
}
header a {
text-decoration: none;
}
header #logo {
padding: 2% 0;
color: white;
margin-left: 5%;
font-size: 2.5em;
}
nav#nav_main {
background-color: #800000;
width: 100%;
display: inline-block;
position: relative;
}
nav#nav_main #navbar .menu-button {
display: none;
}
nav#nav_main ul li {
display: inline;
}
nav#nav_main ul li a {
color: white;
font-size: 1.4em;
text-decoration: none;
display: inline-block;
width: 20%;
float: left;
text-align: center;
-webkit-transition: background-color .3s linear;
transition: background-color .3s linear;
padding: 0.87% 0;
}
nav#nav_main ul li a:hover {
background-color: #FF0000;
}
nav#nav_main ul ul {
height: 0;
overflow: hidden;
position: absolute;
top: 100%;
background-color: #008000;
width: 20%;
z-index: 1;
-webkit-transition: all .5s linear;
transition: all .5s linear;
opacity: 0;
}
nav#nav_main ul li:hover ul {
clear: both;
opacity: 1;
height: auto;
}
nav#nav_main ul ul li a {
width: 100%;
margin: 0 0 2% 0;
}
nav#nav_main ul ul li a.last-menu-item {
margin-bottom: 0;
}
nav#nav_main ul ul#dropdown-menu_leistungen {
left: 40%;
}
main {
background-color: #DCDCDC;
margin: 1.5% 2.5% 1.5% 2.5%;
padding: 1% 0;
}
main #heading_container {
width: 60%;
background-color: #808080;
margin: 0 auto;
margin-top: 1%;
}
main #heading_container h2#heading {
text-align: center;
font-size: 1.45em;
color: #eee;
padding: 0.2% 0;
letter-spacing: 0.08em;
}
main p#kontakt {
margin: 1.5% 1%;
}
main article {
margin: 1% 0.5%;
padding: 1% 0.5%;
}
main article p {
line-height: 1.3em;
}
main nav#nav_leistungen ul {
margin: 2% 0 2% 2.2%;
background-color: #808080;
width: 35%;
padding: 1% 0 1% 0.8%;
}
main nav#nav_leistungen ul li {
list-style-type: disc;
list-style-position: inside;
color: #F2F2F2;
}
main nav#nav_leistungen ul li a {
text-decoration: none;
color: #F2F2F2;
-webkit-transition: color .5s linear;
transition: color .5s linear;
font-size: 1.05em;
line-height: 1.3em;
}
main nav#nav_leistungen ul li a:hover {
color: #45B439;
}
main article h3 {
margin: 0 0 0.23% 0.3%;
font-size: 1.21em;
}
main article#art1 {
margin-top: 3.8%;
}
main form {
background-color: #C0C0C0;
padding: 2% 1%;
margin: 1%;
}
main form label {
display: inline-block;
width: 13%;
}
main form input {
margin-left: 2%;
margin-bottom: 1%;
padding: 0.3%;
width: 20%;
}
main form input#submit-button {
display: block;
margin-top: 2%;
}
main form input:hover, textarea:hover {
border: .085em solid green;
}
main form #label-nachricht {
margin-top: 1%;
display: block;
}
main form textarea {
margin-top: 1%;
padding: 1%;
overflow: auto;
max-width: 100%;
}
footer {
background-color: #0000FF;
position: relative;
bottom: 0;
width: 100%;
text-align: right;
padding: 0.3% 0 0.4% 0;
}
footer p small {
color: white;
padding-right: 3%;
}
footer p strong {
color: white;
float: left;
font-size: 0.8em;
font-weight: normal;
padding-top: 0.15%;
padding-left: 1.2%;
}
@media only screen and (max-width: 1270px) {
main nav#nav_leistungen ul {
width: 40%;
}
main form label {
width: 15%;
}
footer {
text-align: center;
padding-left: 0;
padding-right: 0;
}
footer p small {
width: 100%;
float: none;
}
footer p strong {
width: 100%;
float: none;
}
}
@media screen and (max-width: 1100px) {
main nav#nav_leistungen ul {
width: 45%;
}
main form label {
width: 20%;
}
}
/* Tablet Styles */
@media only screen and (max-width: 1024px) {
main {
margin: 1% 1.5% 1% 1.5%;
}
main nav#nav_leistungen ul {
width: 50%;
}
main form {
padding: 2.2% 1.5%;
margin: 1.2%;
}
main form input {
padding: 0.4em;
width: 23%;
margin-bottom: 1.5%;
}
nav#nav_main ul li a {
width: 25%;
}
nav#nav_main ul ul {
width: 25%;
}
nav#nav_main ul ul#dropdown-menu_leistungen {
left: 50%;
}
nav#nav_main ul ul {
display: none;
}
}
/* Mobile Styles */
@media only screen and (max-width: 860px) {
main {
margin: 1.75% 0 1.75% 0;
padding: 1.25%;
}
main article {
border-top: .085em solid silver;
margin: 1.5% 0.5%;
padding: 1.5% 0.5%;
}
main .first-article {
border-top: none;
}
main article h3 {
margin: 0 0 0.3% 0.35%;
}
main nav#nav_leistungen ul {
width: 55%;
padding: 1.2% 0 1.2% 1.2%;
}
main nav#nav_leistungen ul li a {
line-height: 1.4em;
}
main form {
padding: 2.5% 2.2%;
}
main form label {
width: 23%;
}
main form input {
width: 45%;
padding: 0.42em;
margin-bottom: 1.7%;
}
main form #submit-button {
width: 27%;
}
nav#nav_main #navbar .menu-button {
display: block;
color: white;
text-decoration: none;
cursor: pointer;
font-size: 1.4em;
padding: 1% 0 1% 2.75%;
}
nav#nav_main #navbar .menu-button.hide-navMenu {
display: none;
}
#navMenu_open:target ul {
display: block;
}
#navMenu_open:target #navbar .menu-button.hide-navMenu {
display: block;
}
#navMenu_open:target #navbar .menu-button.show-navMenu {
display: none;
}
nav#nav_main ul {
display: none;
height: auto;
width: 100%;
float: left;
}
nav#nav_main ul li a {
width: 100%;
text-align: left;
padding-left: 2.5%;
border-bottom: .085em solid #DCDCDC;
background-color: #008000;
}
nav ul ul {
display: none !important;
}
}
@media only screen and (max-width: 780px) {
main nav#nav_leistungen ul {
width: 65%;
}
main form label {
width: 27%;
}
main form input {
width: 50%;
padding: 0.45em;
margin-bottom: 1.8%;
}
main form #submit-button {
width: 30%;
}
}
@media only screen and (max-width: 660px) {
main nav#nav_leistungen ul {
width: 70%;
}
main form #label-nachricht {
margin-bottom: 0.5%;
}
}
@media only screen and (max-width: 615px) {
main {
margin: 2% 0 2% 0;
}
main article {
margin: 2% 0.75%;
padding: 2% 0.75%;
}
main article h3 {
margin: 0 0 0.45% 0.5%;
}
main nav#nav_leistungen ul {
width: 80%;
margin: 4% auto;
padding: 1.2% 0 1.2% 1.75%;
}
main form {
padding: 2.8% 2.8%;
}
main form label {
width: 33%;
}
main form input {
width: 55%;
padding: 0.47em;
margin-bottom: 2%;
}
main form #submit-button {
margin-left: 3.5%;
width: 35%;
}
nav#main_nav ul li a, nav#main_nav #navbar .menu-button {
padding: 1.75% 0 1.75% 3.25%;
}
}
@media only screen and (max-width: 540px) {
main nav#nav_leistungen ul {
width: 85%;
}
main form label {
width: 38%;
}
main form input {
width: 60%;
padding: 0.48em;
margin-bottom: 2.2%;
}
main form #submit-button {
width: 42%;
}
}
@media only screen and (max-width: 515px) {
main {
margin: 2.25% 0 2.25% 0;
padding: 1.75%;
}
main article {
margin: 2.5% 1%;
padding: 2.5% 1%;
}
main article h3 {
margin: 0 0 0.65% 0.7%;
}
main nav#nav_leistungen ul {
width: 90%;
}
nav#main_nav ul li a, nav#main_nav #navbar .menu-button {
padding: 2.5% 0 2.5% 3.75%;
}
}
@media only screen and (max-width: 485px) {
main nav#nav_leistungen ul {
width: 95%;
}
}
@media only screen and (max-width: 460px) {
main nav#nav_leistungen ul {
display: none !important;
}
main form {
padding: 3.2% 3.2%;
}
main form label {
width: 43%;
}
main form #label-nachricht {
margin-bottom: 1%;
}
main form input {
width: 55%;
padding: 0.5em;
margin-bottom: 2.5%;
}
main form #submit-button {
margin: 0 auto;
width: 47%;
}
main form textarea {
margin-bottom: 2%;
}
}
@media only screen and (max-width: 415px) {
main {
margin: 2.75% 0 2.75% 0;
padding: 2%;
}
main article {
margin: 3% 1.25%;
padding: 3% 1.25%;
}
main article h3 {
margin: 0 0 0.85% 0.9%;
}
main form label {
width: 47%;
}
main form input {
width: 48.5%;
}
main form #submit-button {
width: 48.5%;
}
nav#main_nav ul li a, nav#main_nav #navbar .menu-button {
padding: 3.25% 0 3.25% 4.25%;
}
}
@media only screen and (max-width: 380px) {
main form {
padding: 4.5% 3.5%;
}
main form label {
display: block;
margin: 2.5% 0;
width: 100%;
}
main form #label-nachricht {
margin-top: 5%;
margin-bottom: 1.5%;
}
main form input {
width: 80%;
}
main form #submit-button {
width: 80%;
}
}
@media only screen and (max-width: 320px) {
main form {
padding: 5% 4%;
}
main form label {
margin: 2.8% 0;
}
main form input {
width: 95%;
}
main form #submit-button {
width: 95%;
}
}
Alles anzeigen
Im Anhang findet ihr alles auch nochmal in einer zip-Datei.
So, kommen wir zu meinen Fragen:
Und zwar ist es aktuell so, dass ich den Server, wo die Website drauf ist, nur mit einem .htaccess-Passwortschutz schütze. Da ist also erstmal die Frage, ob das halbwegs ausreicht?
Die Website selber habe ich natürlich freigegeben, weil sie ja online sein muss, damit ihr euch diese ansehen könnt. Dort stellt sich die Sicherheitsfrage hauptsächlich beim Kontaktformular, vermute ich. Hier wäre ich euch dankbar, wenn ihr mir die wichtigsten Sachen nennen könntet, die man beachten muss. Alternativ nehme ich natürlich auch gerne Links.
Zuletzt noch eine Frage zu Google Analytics. Ich würde das nämlich gerne einbinden, um mir das einfach mal anzuschauen, wie das so funktioniert.
Die Frage wäre, ob ich rechtlich irgendwas beachten muss, wie z.B. dass durch den Einsatz davon automatisch ein Impressum notwendig ist oder man darauf hinweisen muss, dass man Google Analytics nutzt?
So, schon mal vielen Dank für das Feedback und eure Hilfe.
Ach, ja. Bitte nimmt meine Seite nicht auseinander, also im Sinne von Hacken usw.
MfG
JR Cologne
Anhang: