Was ist MVC?
MVC ist eine Architektur, die Geschäftslogik, Präsentation und Daten trennt. In MVC
- M steht für Model
- V steht für View
- C steht für Controller.
MVC ist eine systematische Methode zur Verwendung der Anwendung, bei der der Fluss von der Ansichtsebene ausgeht, wo die Anforderung in der Controller-Ebene ausgelöst und verarbeitet und an die Modellebene gesendet wird, um Daten einzufügen und die Erfolgs- oder Fehlermeldung zurückzugewinnen.
Modellebene:
- Dies ist die Datenschicht, die aus der Geschäftslogik des Systems besteht.
- Es besteht aus allen Daten der Anwendung
- Es repräsentiert auch den Status der Anwendung.
- Es besteht aus Klassen, die die Verbindung zur Datenbank haben.
- Der Controller stellt eine Verbindung zum Modell her, ruft die Daten ab und sendet sie an die Ansichtsebene.
- Das Modell stellt auch eine Verbindung mit der Datenbank her und speichert die Daten in einer Datenbank, die mit dieser verbunden ist.
Ebene anzeigen:
- Dies ist eine Präsentationsschicht.
- Es besteht aus HTML, JSP usw. darin.
- Normalerweise wird die Benutzeroberfläche der Anwendung angezeigt.
- Es wird verwendet, um die Daten anzuzeigen, die von der Steuerung abgerufen werden, die wiederum Daten aus Modellschichtklassen abruft.
- Diese Ansichtsebene zeigt die Daten auf der Benutzeroberfläche der Anwendung.
Controller-Schicht:
- Es fungiert als Schnittstelle zwischen Ansicht und Modell.
- Es fängt alle Anforderungen ab, die von der Ansichtsebene kommen.
- Es empfängt die Anforderungen von der Ansichtsebene und verarbeitet die Anforderungen und führt die erforderliche Validierung für die Anforderung durch.
- Diese Anforderungen werden zur Datenverarbeitung weiter an die Modellschicht gesendet. Sobald die Anforderung verarbeitet ist, werden sie mit den erforderlichen Informationen an die Steuerung zurückgesendet und in der Ansicht entsprechend angezeigt.
Das Diagramm ist unten dargestellt:
Die Vorteile von MVC sind:
- Pflegeleicht
- Einfach zu erweitern
- Einfach zu testen
- Die Navigationssteuerung ist zentralisiert
Beispiel für eine MVC-Architektur
In diesem Beispiel zeigen wir, wie die MVC-Architektur in JSP verwendet wird.
- Wir nehmen das Beispiel eines Formulars mit zwei Variablen "E-Mail" und "Passwort", das unsere Ansichtsebene ist.
- Sobald der Benutzer eine E-Mail und ein Kennwort eingibt und auf Senden klickt, wird die Aktion in mvc_servlet übergeben, wo E-Mail und Kennwort übergeben werden.
- Dieses mvc_servlet ist eine Controller-Schicht. Hier in mvc_servlet wird die Anforderung an das Bean-Objekt gesendet, das als Modellebene fungiert.
- Die E-Mail- und Passwortwerte werden in die Bean gesetzt und für weitere Zwecke gespeichert.
- Von der Bean wird der Wert abgerufen und in der Ansichtsebene angezeigt.
Mvc_example.jsp
<% @ page language = "java" contentType = "text / html; Zeichensatz = ISO-8859-1"pageEncoding = "ISO-8859-1"%>MVC Guru-Beispiel </ title></ head><body><form action = "Mvc_servlet" method = "POST">E-Mail: <input type = "text" name = "email"><br />Passwort: <input type = "text" name = "password" /><input type = "submit" value = "Submit" /></ form></ body></ html></pre> <p><strong>Erläuterung des Codes:</strong></p> <p><strong>Ebene anzeigen:</strong></p> <p><strong>Codezeile 10-15:</strong> Hier nehmen wir ein Formular an, das zwei Felder als Parameter "E-Mail" und "Passwort" enthält. Diese Anforderung muss an einen Controller Mvc_servlet.java weitergeleitet werden, der in Aktion übergeben wird. Die Methode, über die er ausgeführt wird übergeben wird ist POST-Methode.</p> <p>Mvc_servlet.java</p> <pre translate="no">Paket Demotest;import java.io.IOException;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/ *** Servlet-Implementierungsklasse Mvc_servlet* /öffentliche Klasse Mvc_servlet erweitert HttpServlet {private static final long serialVersionUID = 1L;/ *** @see HttpServlet # HttpServlet ()* /public Mvc_servlet () {Super();// TODO Automatisch generierter Konstruktor-Stub}}protected void doPost (HttpServletRequest-Anforderung, HttpServletResponse-Antwort) löst ServletException, IOException {aus// TODO Automatisch generierter MethodenstubString email = request.getParameter ("email");String password = request.getParameter ("Passwort");TestBean testobj = new TestBean ();testobj.setEmail (E-Mail);testobj.setPassword (Passwort);request.setAttribute ("gurubean", testobj);RequestDispatcher rd = request.getRequestDispatcher ("mvc_success.jsp");rd.forward (Anfrage, Antwort);}}}}</pre> <p><strong>Erläuterung des Codes:</strong></p> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <p><strong>Controller-Schicht</strong></p> <p>Codezeile <strong>14:</strong> mvc_servlet erweitert HttpServlet.<strong> </strong></p> <p>Codezeile <strong>26:</strong> Da die verwendete Methode POST ist, kommt die Anforderung in eine doPost-Methode des Servlets, die die Anforderungen verarbeitet und als testobj im Bean-Objekt speichert.</p> <p>Codezeile <strong>34:</strong> Mit dem Anforderungsobjekt setzen wir das Attribut als gurubean, dem der Wert von testobj zugewiesen wird.</p> <p>Codezeile <strong>35:</strong> Hier verwenden wir das Request Dispatcher-Objekt, um die Erfolgsmeldung an mvc_success.jsp zu übergeben</p> <p>TestBean.java</p> <pre translate="no">Paket Demotest;import java.io.Serializable;öffentliche Klasse TestBean implementiert Serializable {public String getEmail () {E-Mail zurücksenden;}}public void setEmail (String email) {this.email = email;}}public String getPassword () {Passwort zurückgeben;}}public void setPassword (String password) {this.password = password;}}private String email = "null";private String password = "null";}}</pre> <p><strong>Erläuterung des Codes:</strong></p> <p><strong>Modellebene:</strong></p> <p><strong>Codezeile 7-17:</strong> Enthält die Getter und Setter von E-Mail und Passwort, die Mitglieder der Test Bean-Klasse sind</p> <p><strong>Codezeile 19-20:</strong> Definiert die Mitglieder-E-Mail-Adresse und das Kennwort des Zeichenfolgentyps in der Bean-Klasse.</p> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <p>Mvc_success.jsp</p> <pre translate="no"><% @ page language = "java" contentType = "text / html; Zeichensatz = ISO-8859-1"pageEncoding = "ISO-8859-1"%><% @ page import = "demotest.TestBean"%><! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // DE" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv = "Inhaltstyp" content = "text / html; Zeichensatz = ISO-8859-1"><title> Guru-Erfolg </ title></ head><body><%TestBean testguru = (TestBean) request.getAttribute ("gurubean");out.print ("Willkommen" + testguru.getEmail ());%></ body></ html></pre> <p><strong>Erläuterung des Codes:</strong></p> <p>Codezeile <strong>12:</strong> Wir erhalten das Attribut mithilfe des Anforderungsobjekts, das in der doPost-Methode des Servlets festgelegt wurde.</p> <p><strong>Codezeile 13:</strong> Wir drucken die Begrüßungsnachricht und die E-Mail-ID, die im Bean-Objekt gespeichert wurden</p> <p><strong>Ausgabe:</strong></p> <p>Wenn Sie den obigen Code ausführen, erhalten Sie die folgende Ausgabe:</p> <p>Wenn Sie auf mvc_example.jsp klicken, erhalten Sie das Formular mit E-Mail und Passwort über die Schaltfläche "Senden".<strong> </strong></p> <p>Sobald Sie E-Mail und Passwort in das Formular eingegeben haben, klicken Sie auf Senden</p> <p>Nach dem Klicken auf Senden wird die Ausgabe wie folgt angezeigt</p> <p><strong>Ausgabe:</strong></p> <p>Wenn Sie E-Mail und Passwort in den Bildschirm eingeben und dann auf Senden klicken, werden die Details in TestBean gespeichert und von der TestBean auf dem nächsten Bildschirm abgerufen, um die Erfolgsmeldung zu erhalten.</p> <p><strong>Zusammenfassung:</strong></p> <p>In diesem Artikel haben wir etwas über die MVC, dh die Model View Controller-Architektur, gelernt.</p> <p>JSP spielt die Rolle der Präsentation der Daten und des Controllers. Es ist eine Schnittstelle zwischen Modell und Ansicht, während das Modell sowohl mit dem Controller als auch mit der Datenbank verbunden ist. Die Hauptgeschäftslogik ist in der Modellebene vorhanden. </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Beliebte Beiträge</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003962-get-geo-ip-information" title="Geo-IP-Informationen abrufen - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/6984301/get_geo-ip_information_css-tricks.png.webp" loading="lazy" alt="Geo-IP-Informationen abrufen - CSS-Tricks" title="Geo-IP-Informationen abrufen - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003962-get-geo-ip-information" title="Geo-IP-Informationen abrufen - CSS-Tricks" rel="bookmark">Geo-IP-Informationen abrufen - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003964-http-or-https" title="HTTP oder HTTPS - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/6354949/http_or_https_css-tricks.png.webp" loading="lazy" alt="HTTP oder HTTPS - CSS-Tricks" title="HTTP oder HTTPS - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003964-http-or-https" title="HTTP oder HTTPS - CSS-Tricks" rel="bookmark">HTTP oder HTTPS - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003965-import-csv-into-mysql" title="Importieren Sie CSV in MySQL - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/5596826/import_csv_into_mysql_css-tricks.png.webp" loading="lazy" alt="Importieren Sie CSV in MySQL - CSS-Tricks" title="Importieren Sie CSV in MySQL - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003965-import-csv-into-mysql" title="Importieren Sie CSV in MySQL - CSS-Tricks" rel="bookmark">Importieren Sie CSV in MySQL - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Die besten Bewertungen für den Monat</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003434-154-styling-the-lodge-archives-and-single-lodge-video-page" title="# 154: Styling des Lodge-Archivs und der Single Lodge-Videoseite - CSS-Tricks" rel="bookmark"># 154: Styling des Lodge-Archivs und der Single Lodge-Videoseite - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003437-82-building-the-wordpress-homepage-part-1" title="# 82: Erstellen der WordPress-Homepage, Teil 1 - CSS-Tricks" rel="bookmark"># 82: Erstellen der WordPress-Homepage, Teil 1 - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003438-83-building-the-wordpress-homepage-part-2" title="# 83: Erstellen der WordPress-Homepage, Teil 2 - CSS-Tricks" rel="bookmark"># 83: Erstellen der WordPress-Homepage, Teil 2 - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003439-157-immediate-post-launch-followup" title="# 157: Sofortiges Follow-up nach dem Start - CSS-Tricks" rel="bookmark"># 157: Sofortiges Follow-up nach dem Start - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003440-81-moving-the-header-to-wordpress" title="# 81: Verschieben des Headers nach WordPress - CSS-Tricks" rel="bookmark"># 81: Verschieben des Headers nach WordPress - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003441-155-going-through-the-pre-launch-checklist" title="# 155: Durchgehen der Checkliste vor dem Start - CSS-Tricks" rel="bookmark"># 155: Durchgehen der Checkliste vor dem Start - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003442-156-launching-the-site-part-1" title="# 156: Starten der Site, Teil 1 - CSS-Tricks" rel="bookmark"># 156: Starten der Site, Teil 1 - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003443-80-updating-local-content-by-running-the-sql" title="# 80: Aktualisieren lokaler Inhalte durch Ausführen von SQL - CSS-Tricks" rel="bookmark"># 80: Aktualisieren lokaler Inhalte durch Ausführen von SQL - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003444-158-a-month-later-final-wrapup" title="# 158: Einen Monat später: Final Wrapup - CSS-Tricks" rel="bookmark"># 158: Einen Monat später: Final Wrapup - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003445-85-blog-post-view-single-php-in-wordpress" title="# 85: Blog Post View (single.php) in WordPress - CSS-Tricks" rel="bookmark"># 85: Blog Post View (single.php) in WordPress - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003447-84-moving-footer-into-wordpress" title="# 84: Fußzeile in WordPress - verschieben CSS-Tricks" rel="bookmark"># 84: Fußzeile in WordPress - verschieben CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003448-88-building-the-gallery-bar" title="# 88: Erstellen der Galerie-Leiste - CSS-Tricks" rel="bookmark"># 88: Erstellen der Galerie-Leiste - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003449-86-photoshopping-the-gallery" title="# 86: Photoshopping in der Galerie - CSS-Tricks" rel="bookmark"># 86: Photoshopping in der Galerie - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003450-89-tweaking-the-gallery-bar" title="# 89: Optimieren der Galerie-Leiste - CSS-Tricks" rel="bookmark"># 89: Optimieren der Galerie-Leiste - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003451-90-setting-up-individual-pages-in-the-gallery" title="# 90: Einrichten einzelner Seiten in der Galerie - CSS-Tricks" rel="bookmark"># 90: Einrichten einzelner Seiten in der Galerie - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Artikel</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225948-excel-vba-function-tutorial-return-call-examples" title="Excel VBA-Funktions-Tutorial: Zurück, Aufrufen, Beispiele" rel="bookmark"><img src="https://cdn.css-code.org/9044437/excel_vba_function_tutorial_return-_call-_examples.png.webp" loading="lazy" alt="Excel VBA-Funktions-Tutorial: Zurück, Aufrufen, Beispiele" title="Excel VBA-Funktions-Tutorial: Zurück, Aufrufen, Beispiele" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225948-excel-vba-function-tutorial-return-call-examples" title="Excel VBA-Funktions-Tutorial: Zurück, Aufrufen, Beispiele" rel="bookmark">Excel VBA-Funktions-Tutorial: Zurück, Aufrufen, Beispiele 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225949-how-to-write-macros-in-excel-macro-tutorial-what-is-and-use" title="So schreiben Sie Makros in Excel: Makro-Tutorial - Was ist & Benutzen" rel="bookmark"><img src="https://cdn.css-code.org/8198749/how_to_write_macros_in_excel_macro_tutorial_-_what_is_ampamp_use.png.webp" loading="lazy" alt="So schreiben Sie Makros in Excel: Makro-Tutorial - Was ist & Benutzen" title="So schreiben Sie Makros in Excel: Makro-Tutorial - Was ist & Benutzen" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225949-how-to-write-macros-in-excel-macro-tutorial-what-is-and-use" title="So schreiben Sie Makros in Excel: Makro-Tutorial - Was ist & Benutzen" rel="bookmark">So schreiben Sie Makros in Excel: Makro-Tutorial - Was ist & Benutzen 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225950-excel-vba-range-object" title="Excel VBA-Bereichsobjekt" rel="bookmark"><img src="https://cdn.css-code.org/1355294/excel_vba_range_object.jpg.webp" loading="lazy" alt="Excel VBA-Bereichsobjekt" title="Excel VBA-Bereichsobjekt" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225950-excel-vba-range-object" title="Excel VBA-Bereichsobjekt" rel="bookmark">Excel VBA-Bereichsobjekt 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Beliebte Beiträge</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226195-10-best-notepad-alternatives-for-windows-mac-linux-2021" title="10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021)" rel="bookmark">10 besten Notepad ++ - Alternativen für Windows, Mac, Linux (2021)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226196-11-best-fiverr-alternatives-in-2021" title="11 BEST Fiverr Alternatives im Jahr 2021" rel="bookmark">11 BEST Fiverr Alternatives im Jahr 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226197-10-best-sublime-text-alternatives-in-2021-mac-windows" title="10 besten erhabenen Textalternativen im Jahr 2021 (Mac, Windows)" rel="bookmark">10 besten erhabenen Textalternativen im Jahr 2021 (Mac, Windows)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226198-15-best-github-alternatives-in-2021" title="15 besten Github-Alternativen im Jahr 2021" rel="bookmark">15 besten Github-Alternativen im Jahr 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226200-20-best-front-end-web-development-tools-and-software-in-2021" title="20 besten Front-End-Webentwicklungstools & Software im Jahr 2021" rel="bookmark">20 besten Front-End-Webentwicklungstools & Software im Jahr 2021</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Tipp Der Redaktion</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8001126-trigger-click-on-input-when-label-is-clicked" title="Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird CSS-Tricks" rel="bookmark">Auslöser Klicken Sie auf Eingabe, wenn auf Beschriftung geklickt wird CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002860-align-self" title="Selbst ausrichten - CSS-Tricks" rel="bookmark">Selbst ausrichten - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002861-all" title="Alle - CSS-Tricks" rel="bookmark">Alle - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002862-animation" title="Animation - CSS-Tricks" rel="bookmark">Animation - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002863-background" title="Hintergrund - CSS-Tricks" rel="bookmark">Hintergrund - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Artikel</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003635-set-expires" title="Set läuft ab - CSS-Tricks" rel="bookmark">Set läuft ab - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003637-shock-teenage-gangsters-with-wp-config-redirect" title="Schock Teenage Gangster mit wp-config Redirect - CSS-Tricks" rel="bookmark">Schock Teenage Gangster mit wp-config Redirect - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003638-subdirectories-url-internally-redirect-to-query-string" title="URL für Unterverzeichnisse Intern zur Abfragezeichenfolge umleiten - CSS-Tricks" rel="bookmark">URL für Unterverzeichnisse Intern zur Abfragezeichenfolge umleiten - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003639-use-php-inside-javascript" title="Verwenden Sie PHP in JavaScript - CSS-Tricks" rel="bookmark">Verwenden Sie PHP in JavaScript - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003640-www-no-www" title="WWW / No-WWW - CSS-Tricks" rel="bookmark">WWW / No-WWW - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 Juni | <a href="https://de.css-code.org/about-site" title="Über Site">Über Site</a> | <a href="https://de.css-code.org/contacts" title="Kontakte">Kontakte</a> | <a href="https://de.css-code.org/privacy-policy" title="Datenschutz-Bestimmungen">Datenschutz-Bestimmungen</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>