HennWeb

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
===== CMS Content Management System =====


Hier erkläre ich die Grundlagen wie man selbst ein einfaches responsive CMS / eigene Homepage programmiert.
Ich habe es extra einfach gehalten, damit es nachvollziehbar ist.
Verbesserungen und Verschönerungen kann man dann selbst machen.

Für die verschieden Dinge ist es einfacher die Scripts in PHP zu erstellen.

{{ programmieren:6qwxijbrl8.png?600 }}

**Grundstruktur**\\
Wir brauchen folgende Scripte damit unsere Seite funktional und individuell erweiterbar ist:\\
Startseite -> index.php\\
Kopfbereich -> header.php\\
Menübereich -> menue.php\\
Fussbereich -> footer.php\\
Scripts -> scripts.php\\
CSS -> style.css\\

Der Vorteil des modularen Aufbaus ist, dass man Änderung welche alle Seiten betreffen nur einmal machen muss.\\

DEMO: https://wiki.hennweb.de/demo/cms1/index.php\\
Download: [[https://wiki.hennweb.de/demo/cms1/Mini-CMS.zip|Mini-CMS.zip]]\\

==== Startseite ====
<code php index.php [enable_line_numbers]>
<!DOCTYPE html>
<html lang="de">
<head>
	<? include "header.php"; ?>
</head>
<body>
	<? $page = 'home'; include "menue.php"; ?>
	<!-- Inhalt Start -->

	hier ist der Inhalt meiner Start-Seite

	<!-- Inhalt Ende -->
	<? include "footer.php"; ?>
	<? include "scripts.php"; ?>
</body>
</html>
</code>

Jede neue Seite mit Inhalt sollte wie die INDEX.PHP aufgebaut sein.\\
In Zeile 4 wird die Datei HEADER.PHP geladen. Alles was in dieser Datei steht wird an dieser Stelle eingefügt.\\
Dadurch muss man nicht für jede Seite das selbe nochmal coden.\\
\\
In Zeile 7 definieren wir die Variable $page = "<Menüpunkt Name>" \\
Damit weiß das Menü welche Seite aktuell geladen ist und es zeigt den entsprechenden Menüpunkt als AKTIV an.\\
Weiter wird dann der Inhalt von MENUE.PHP an dieser Stelle geladen.\\
\\
Wenn man eine neue Seite haben will muss man hier den Menüpunkt Namen entsprechend ändern und in der Datei MENUE.PHP den entprechenden Menüpunkt hinzufügen.\\
\\
Zeile 10 ersetzen wir durch unseren gewünschten Seiteninhalt (in HTML)\\
\\
In Zeile 13 wird die Datei FOOTER.PHP geladen. Somit muss man Änderungen am Footer nur einmal in der Datei FOOTER.PHP machen.
\\
In Zeile 14 wird die Datei SCRIPTS.PHP geladen in welche wir JS Code einfügen bzw. laden.\\




==== Header ====
Den Header muss man in der Regel nur einmal erstellen und wird dann in den Seiten einfach per include eingebuden.\\

<code html4strict header.php [enable_line_numbers="true"]>
<meta charset="utf-8">

<!-- Viewport für responsive Designs -->
<meta content="width=device-width, initial-scale=1" name="viewport">

<!-- Überschrift im Browser und bei Google -->
<title>mein erstes CMS</title>

<!-- allgemeine META Tags -->
<meta name="author" content="Conny Henn">
<meta name="publisher" content="Conny Henn">
<meta name="copyright" content="Conny Henn">
<meta name="description" content="dieses dient zum leichten Verstehen wie ein CMS funktioniert">
<meta name="keywords" content="das, sind, meine, Keywords, anhand, derer, die, Seite, gefunden, werden, soll">

<!-- Seite soll bei Suchmaschinen mit aufgenommen werden -->
<meta name="robots" content="index, follow">

<!-- Cache für Entwicklungszwecke ausschalten -->
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />

<!-- kleines Icon im Browser TAB -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- Standard CSS Dateien -->
<link href="style.css" rel="stylesheet">

</code>

Hier werden die gewünschten META Tags gesetzt und es wird auch in Zeile 25 das FAVICON.ICO geladen welches im Browser Tab das kleine Bildchen anzeigt. Es gibt im Internet spezielle Online FAVICON Generatoren um ein solches Bild zu erstellen.\\
\\
In Zeile 28 laden wir die Datei STYLE.CSS nach um CSS Definitionen zu laden.\\
\\
Der Rest sollte durch die Bemerkungen selbsterklärend sein.\\

==== Menue ====

<code html4strict menue.php [enable_line_numbers]>
<!--- Kopfbereich -->
<div id="header-wrapper">
	<a href="index.php"><img class="responsive" style="max-width:350px;" src="logo.png"></a>
</div>
<!--- Ende Kopf -->

<!--- Navigation - weitere Infos https://www.w3schools.com/css/css_navbar_horizontal.asp -->
<nav id="top-menue-container">
	<ul class="topnav">
		<li><a href="index.php"  class="<?php if($page == 'home')   {echo "active";} ?>">Home</a></li>
		<li><a href="seite1.php" class="<?php if($page == 'seite1') {echo 'active';} ?>">Seite 1</a></li>
		<li><a href="seite2.php" class="<?php if($page == 'seite2') {echo 'active';} ?>">Seite 2</a></li>
		<li class="right" ><a href="ueber.php"  class="<?php if($page == 'ueber')  {echo 'active';} ?>">Über</a></li>
	</li>
</nav>
<!--- Ende Navigation -->

<!-- Start eigener Inhalt -->
<div id="content-wrapper">
</code>

Hier wird der obere Bereich (Header) mit Menü erstellt.\\
Zeile 2 tauschen wir die Datei logo.png gegen deine eigene Grafik aus.\\
\\
Wenn man einen weiteren Menüpunkt hinzufügen will muss man nur noch eine weitere Zeile einfügen\\
<code>
<li><a href="<DATEINAME>"  class="<?php if($page == '<name der selbst definierten Variable $page')   {echo "active";} ?>"><NAME DES MENÜPUNKTS</a></li>
</code>

Ein weiteres gutes Menü mit Dropdown und responsive findet man hier: https://codepen.io/andornagy/pen/RNeydj
==== Footer ====

<code html4strict footer.php [enable_line_numbers]>
<!-- Ende eigener Inhalt -->
</div>

<!--- Start Footer -->
<div id="footer-wrapper">
	Fußbereich
</div>
<!--- End of Footer -->
</code>

Zeile 6 ersetzen wir durch unseren eigenen Inhalt (HTML)\\
==== Seite 1 ====

<code php| seite1.php [enable_line_numbers]>
<!DOCTYPE html>
<html lang="de">
<head>
<? include "header.php"; ?>
</head>
<body >
	<? $page = 'seite1'; include "menue.php"; ?>
	<!-- Inhalt Start -->

	hier ist der Inhalt meiner Seite 1

	<!-- Inhalt Ende -->	
	<? include "footer.php"; ?>
	<? include "scripts.php"; ?>
</body>
</html>
</code>

Beispiel Seite1\\
In Zeile 7 haben wir die Variable $page definiert "seite1". Diese benötigen wir in MENUE.PHP um den entsprechenden Menüpunkt aktiv zu stellen.\\
\\
Ansonsten brauchen wir nur noch Zeile 10 durch unseren eigenen Inhalt auszutauschen.\\
==== Seite 2 ====

<code php| seite2.php [enable_line_numbers]>
<!DOCTYPE html>
<html lang="de">
	<head>
		<? include "header.php"; ?>
	</head>
	<body>
		<? $page = 'seite2'; include "menue.php"; ?>
		<!-- Inhalt Start -->
 
		hier ist der Inhalt meiner Seite 2
		
		<!-- Inhalt Ende -->
		<? include "footer.php"; ?>
		<? include "scripts.php"; ?>
	</body>
</html>
</code>

Selbe Info wie bei Seite1\\


==== Über Seite ====

<code php| seite2.php [enable_line_numbers]>
<!DOCTYPE html>
<html lang="de">
<head>
<? include "header.php"; ?>
</head>
<body >
	<? $page = 'ueber'; include "menue.php"; ?>
	<!-- Inhalt Start -->

	hier ist der Inhalt meiner Seite ÜBER

	<!-- Inhalt Ende -->	
	<? include "footer.php"; ?>
	<? include "scripts.php"; ?>
</body>
</html>
</code>

Selbe Info wie bei Seite1
==== Style.css ====

<code css| style.css [enable_line_numbers]>
/**
 *  CSS für CMS
 *  by Conny Henn - https://wiki.hennweb.de
 *  Date: 01/2022
 */
 
/* Rand um die Seite entfernen */
*{
    margin:0;
    padding:0;
}

#header-wrapper {
	
}

/* Menü Buttons */

#top-menue-container {
	/* Sticky Navbar - Menüleiste bleibt oben stehen */
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
}

ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: lightgray;
	
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
	display: block;
	color: #666;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
	background-color: #ddd;
}

ul.topnav li a.active {
	color: white;
	background-color: gray;
}

ul.topnav li.right {
	float: right;
}

/* Responsive Menü */
@media screen and (max-width: 600px) {
	ul.topnav li.right, 
	ul.topnav li {
		float: none;
	}
}

/* minimale Höhe für Content */
#content-wrapper {
	min-height: 400px;
	padding: 10px;
}

#footer-wrapper {
	height:100px;
	background: lightgray;
	padding: 10px;
}

/* Bilder responsive */
.responsive {
	width: 100%;
	height: auto;
}
</code>

==== Scripts ====

Zu ladende JS Scripts sollte man hier einbinden.\\

<code java| scripts.php [enable_line_numbers]>
<!--- Standard Script Files -->
<!-- z.B. Bootstrap laden -->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>-->
</code>



2. Das Menü

3. neue Seiten hinzufügen

4. Anmelde Funktion
https://werner-zenk.de/archiv/mysql_webseitenschutz.php