HennWeb

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: Startseite » Programmieren » CMS Content Management System
programmieren:cms
Buch erstellen
 Diese Seite zum Buch hinzufügen
Buch erstellen
 Diese Seite aus Buch entfernen  

 Buch anzeigen, ändern(0 Seite/n)
 Hilfe

Inhaltsverzeichnis

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.

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: Mini-CMS.zip

Startseite

index.php 
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. <head>
  4. 	<? include "header.php"; ?>
  5. </head>
  6. <body>
  7. 	<? $page = 'home'; include "menue.php"; ?>
  8. 	<!-- Inhalt Start -->
  9.  
  10. 	hier ist der Inhalt meiner Start-Seite
  11.  
  12. 	<!-- Inhalt Ende -->
  13. 	<? include "footer.php"; ?>
  14. 	<? include "scripts.php"; ?>
  15. </body>
  16. </html>

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.

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

header.php 
  1. <meta charset="utf-8">
  2.  
  3. <!-- Viewport für responsive Designs -->
  4. <meta content="width=device-width, initial-scale=1" name="viewport">
  5.  
  6. <!-- Überschrift im Browser und bei Google -->
  7. <title>mein erstes CMS</title>
  8.  
  9. <!-- allgemeine META Tags -->
  10. <meta name="author" content="Conny Henn">
  11. <meta name="publisher" content="Conny Henn">
  12. <meta name="copyright" content="Conny Henn">
  13. <meta name="description" content="dieses dient zum leichten Verstehen wie ein CMS funktioniert">
  14. <meta name="keywords" content="das, sind, meine, Keywords, anhand, derer, die, Seite, gefunden, werden, soll">
  15.  
  16. <!-- Seite soll bei Suchmaschinen mit aufgenommen werden -->
  17. <meta name="robots" content="index, follow">
  18.  
  19. <!-- Cache für Entwicklungszwecke ausschalten -->
  20. <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
  21. <meta http-equiv="pragma" content="no-cache" />
  22. <meta http-equiv="expires" content="-1" />
  23.  
  24. <!-- kleines Icon im Browser TAB -->
  25. <link rel="icon" type="image/x-icon" href="favicon.ico">
  26.  
  27. <!-- Standard CSS Dateien -->
  28. <link href="style.css" rel="stylesheet">

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.php 
  1. <!--- Kopfbereich -->
  2. <div id="header-wrapper">
  3. 	<a href="index.php"><img class="responsive" style="max-width:350px;" src="logo.png"></a>
  4. </div>
  5. <!--- Ende Kopf -->
  6.  
  7. <!--- Navigation - weitere Infos https://www.w3schools.com/css/css_navbar_horizontal.asp -->
  8. <nav id="top-menue-container">
  9. 	<ul class="topnav">
  10. 		<li><a href="index.php"  class="<?php if($page == 'home')   {echo "active";} ?>">Home</a></li>
  11. 		<li><a href="seite1.php" class="<?php if($page == 'seite1') {echo 'active';} ?>">Seite 1</a></li>
  12. 		<li><a href="seite2.php" class="<?php if($page == 'seite2') {echo 'active';} ?>">Seite 2</a></li>
  13. 		<li class="right" ><a href="ueber.php"  class="<?php if($page == 'ueber')  {echo 'active';} ?>">Über</a></li>
  14. 	</li>
  15. </nav>
  16. <!--- Ende Navigation -->
  17.  
  18. <!-- Start eigener Inhalt -->
  19. <div id="content-wrapper">

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

<li><a href="<DATEINAME>"  class="<?php if($page == '<name der selbst definierten Variable $page')   {echo "active";} ?>"><NAME DES MENÜPUNKTS</a></li>

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

footer.php 
  1. <!-- Ende eigener Inhalt -->
  2. </div>
  3.  
  4. <!--- Start Footer -->
  5. <div id="footer-wrapper">
  6. 	Fußbereich
  7. </div>
  8. <!--- End of Footer -->

Zeile 6 ersetzen wir durch unseren eigenen Inhalt (HTML)

Seite 1

seite1.php 
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. <head>
  4. <? include "header.php"; ?>
  5. </head>
  6. <body >
  7. 	<? $page = 'seite1'; include "menue.php"; ?>
  8. 	<!-- Inhalt Start -->
  9.  
  10. 	hier ist der Inhalt meiner Seite 1
  11.  
  12. 	<!-- Inhalt Ende -->	
  13. 	<? include "footer.php"; ?>
  14. 	<? include "scripts.php"; ?>
  15. </body>
  16. </html>

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

seite2.php 
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. 	<head>
  4. 		<? include "header.php"; ?>
  5. 	</head>
  6. 	<body>
  7. 		<? $page = 'seite2'; include "menue.php"; ?>
  8. 		<!-- Inhalt Start -->
  9.  
  10. 		hier ist der Inhalt meiner Seite 2
  11.  
  12. 		<!-- Inhalt Ende -->
  13. 		<? include "footer.php"; ?>
  14. 		<? include "scripts.php"; ?>
  15. 	</body>
  16. </html>

Selbe Info wie bei Seite1

Über Seite

seite2.php 
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. <head>
  4. <? include "header.php"; ?>
  5. </head>
  6. <body >
  7. 	<? $page = 'ueber'; include "menue.php"; ?>
  8. 	<!-- Inhalt Start -->
  9.  
  10. 	hier ist der Inhalt meiner Seite ÜBER
  11.  
  12. 	<!-- Inhalt Ende -->	
  13. 	<? include "footer.php"; ?>
  14. 	<? include "scripts.php"; ?>
  15. </body>
  16. </html>

Selbe Info wie bei Seite1

Style.css

style.css 
  1. /**
  2.  *  CSS für CMS
  3.  *  by Conny Henn - https://wiki.hennweb.de
  4.  *  Date: 01/2022
  5.  */
  6.  
  7. /* Rand um die Seite entfernen */
  8. *{
  9.     margin:0;
  10.     padding:0;
  11. }
  12.  
  13. #header-wrapper {
  14.  
  15. }
  16.  
  17. /* Menü Buttons */
  18.  
  19. #top-menue-container {
  20. 	/* Sticky Navbar - Menüleiste bleibt oben stehen */
  21. 	position: -webkit-sticky; /* Safari */
  22. 	position: sticky;
  23. 	top: 0;
  24. }
  25.  
  26. ul.topnav {
  27. 	list-style-type: none;
  28. 	margin: 0;
  29. 	padding: 0;
  30. 	overflow: hidden;
  31. 	background-color: lightgray;
  32.  
  33. }
  34.  
  35. ul.topnav li {
  36. 	float: left;
  37. }
  38.  
  39. ul.topnav li a {
  40. 	display: block;
  41. 	color: #666;
  42. 	text-align: center;
  43. 	padding: 14px 16px;
  44. 	text-decoration: none;
  45. }
  46.  
  47. ul.topnav li a:hover:not(.active) {
  48. 	background-color: #ddd;
  49. }
  50.  
  51. ul.topnav li a.active {
  52. 	color: white;
  53. 	background-color: gray;
  54. }
  55.  
  56. ul.topnav li.right {
  57. 	float: right;
  58. }
  59.  
  60. /* Responsive Menü */
  61. @media screen and (max-width: 600px) {
  62. 	ul.topnav li.right, 
  63. 	ul.topnav li {
  64. 		float: none;
  65. 	}
  66. }
  67.  
  68. /* minimale Höhe für Content */
  69. #content-wrapper {
  70. 	min-height: 400px;
  71. 	padding: 10px;
  72. }
  73.  
  74. #footer-wrapper {
  75. 	height:100px;
  76. 	background: lightgray;
  77. 	padding: 10px;
  78. }
  79.  
  80. /* Bilder responsive */
  81. .responsive {
  82. 	width: 100%;
  83. 	height: auto;
  84. }

Scripts

Zu ladende JS Scripts sollte man hier einbinden.

scripts.php 
  1. <!--- Standard Script Files -->
  2. <!-- z.B. Bootstrap laden -->
  3. <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>-->

2. Das Menü

3. neue Seiten hinzufügen

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

Diese Website verwendet nur für den Betrieb notwendige Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer sowie den Datenschutzbestimmungen zu. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren (499 views) · Zuletzt geändert: 14/01/2022 18:17 von conny
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki