mein erstes CMS

===== 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 ====





	


	
	

	hier ist der Inhalt meiner Start-Seite

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 = "" \\ 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.\\








mein erstes CMS

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 ====




	





	
		">Home
		Seite 1
		Seite 2
		Über

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\\

">

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





	Fußbereich

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








	
	

	hier ist der Inhalt meiner Seite 1

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 ====




	
		
	
	
		
		
 
		hier ist der Inhalt meiner Seite 2

Selbe Info wie bei Seite1\\ ==== Über Seite ====








	
	

	hier ist der Inhalt meiner Seite ÜBER

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


/**
 *  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;
}

==== Scripts ==== Zu ladende JS Scripts sollte man hier einbinden.\\

2. Das Menü 3. neue Seiten hinzufügen 4. Anmelde Funktion https://werner-zenk.de/archiv/mysql_webseitenschutz.php