HTML Wie baut man eine typische Homepage auf + konkrete Frage

[pizza4ever]

Hallo zusammen,

ich will eine Homepage bauen und komme aus der Anwendungsentwicklung.

Ich habe verstanden, was PHP und Javascript können, in HTML habe ich mich auch eingearbeitet und Datenbankseitig habe ich mich auf mySQL festgelegt.

nun meine Frage:

Ich will nun Content aus der Datenbank dynamisch nachladen bis eine (Schleifen)Bedingung nicht mehr erfüllt.

Wie mache ich das richtig?

Meine Idee ist, im Javascript die Schleife zu bauen, dann das SQL Statement in eine separate php Datei auszulagern und den Inhalt in die Ursprüngliche HTML zu schreiben.

Ist das konzeptionell richtig!? Oder wie setzt man sowas korrekt um?

Danke und VG,

Alex

 

[HominiLupus]

Nein. normalerweise wird das alles serverseitig also via PHP gemacht. Nur wenn du eine HTML Seite bei Änderung nicht komplett nachladen willst, dann benutzt du AJAX via Javascript.
Z.B. Du hast ein Query welches 5MB an Daten erzeugt. Die willst du bei einem Seitenaufruf nicht alles übertragen und du kannst die 5MB sowieso nicht komplett auf einer Bildschirmseite im Browser darstellen sondern nur ca. 20 Zeilen in einer Tabelle. Also überträgst du nur 20 von den tausenden Resultaten und nutzt AJAX um jedesmall wenn der Benutzer in der Tabelle scrollt die nächsten 20 Einträge nachzuladen.

 

[Z1dane]

Wenn du aus der Anwendungsentwicklung kommst, könnte GWT dein Werkzeug werden.
Dynamische Websites, Realisierung mittels (vorgefertigter) Widgets (http://smartgwt.com/product/download.jsp) und die Programmierung von Front- UND Backend erfolgt in Java.
Vaadin ist nur eine Möglichkeit. https://vaadin.com/home
Ich hab meine Technikerarbeit mit smartgwt programmiert und das ganze Projekt von Maven bauen und verwalten lassen.
Du hast halt die Vorteile, dass du mit GWT deine IDE (Eclipse, Netbeans) inklusive aller Features wie 'nen Debug Mode, refactoring usw benutzen kannst.
Lies dich mal ein.
https://code.google.com/p/smartgwt/
Hier gibt's ein Showcase, da kannst du sehen, wie die Widgets aussehen
http://www.smartclient.com/smartgwt/showcase/#main
http://www.smartclient.com/smartgwtee/showcase/#main

 

[Suxxess]

https://www.apachefriends.org/de/index.html
Damit hast du einen kompletten Webserver der PHP kann.

Und dann baust du dir halt deine Webseiten zusammen:

index.php

<?php
$con=mysqli_connect("example.com","peter","abc123","my_db");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM Persons");
echo ("<table>");
while($row = mysqli_fetch_array($result)) {

echo ("<tr><td>");
  echo $row['FirstName'] . " " . $row['LastName'];
  echo ("</td></tr>)
}
echo ("</table>");
mysqli_close($con);
?>

Damit baust du dir quasi dein HTML dynamisch zusammen mit den Inhalten aus der Datenbank.
Wenn du Anwendungsentwickler bist, dann sollte das alles kein sonderliches Problem für dich sein.

 

[frost911]

Du könntest auch auf ein CMS zurück greifen (bspw. Wordpress oder Joomla), und dann für dieses CMS ein Custom Theme in HTML/PHP schreiben, dazu gibt es jede menge Anleitungen im Netz. Es kommt ganz drauf an wie erfahren du bist. Jedenfalls würde ich dir dazu raten ein fertiges CSS Framework zu benutzen, insbesondere Bootstrap. Egal ob du ein Theme schreibst oder die ganze Homepage selbst, das hat viele vorteile wenn du auf Bootstrap setzt, dort sind bereits Klassen integriert die dir eine dynamische Menuleiste darstellen können (Javascript). Dann musst du dich zum großteil nurnoch im HTML und PHP kümmern, sowie am ende ggf. in den CSS anpassungen vornehmen. Aber es ist so weniger arbeit als das komplette CSS und Javascript selbst zu schreiben.

Wie gesagt, es kommt drauf an was du willst, und was dein Ziel und deine Motivation hinter dem Projekt ist!
Wünsche dir jedenfalls viel Spass und Erfolg dabei ;-)

 

[pizza4ever]

soo, vielen Dank für die schnellen Antworten. Habe mich derweil mal in ein AJAX Beispiel eingelesen.

Weil die Tool Diskussion hochkam:

Was spricht denn gegen MS Visual Studio!? Ist doch kostenlos in der Web Version und damit kenne ich mich eben von meinem Job einigermaßen gut aus.

Hatte gerade bei den AJAX Beispielen mit Notepad++ gearbeitet und naja zur Fehlersuche halt ewig gebraucht...

 

[Funart]

Bevor du auf die Idee kommst dir wirklich GWT anschauen, muss ich stark davon abraten. Google selbst hat GWT aufgegeben und durch eine andere Technologie ersetzt. Mit was betreibst du die Anwendungsentwicklung?

 

[pizza4ever]

80% c/c++, der Rest c# und Powershell :-)

Und eigentlich alles mit Visual Studio...

 

[Z1dane]

Du kannst das Ganze natürlich auch mit asp.net aufziehen. Da kenn ich mich aber nicht aus...

 

[pizza4ever]

Ok gerade mal fix gegoogelt, dass ASP.net ja von MS kommt und daher eng mit VS verdrahtet ist und daher wohl einer ein Nischendasein führt ...

Ich hatte an Visual Studio eher als gewohnte Entwicklungsumgebung gedacht und dass ich damit in PHP / html enwickeln kann aber gut das ist wohl nicht so einfach möglich.

Also bleibt für mich die Frage:

HTML und dann im Hintergrund auf die Datenbank zugreifen - so wie es richtig verstanden habe macht man ja nicht einzelne Statements sondern ein großes und lädt dann den Content dynamisch mit Ajax nach.

Also nochmal zur Klarstellung:

Ich mache mein Statement, bekomme 100 Ergebniszeilen und die arbeitet der User ab

Was ist denn das Standardtool für sowas!? Doch Eclipse!? Ich hab da echt keine Ahnung

 

[xSeppelx]

Ich setzte Twitter Bootstrap ein "für die Optik". Content wird mit JS geholt.
PHP kannst du für DB-Anfragen auch gerne verwenden.
Kommt immer darauf an, wie komplex das ganze sein soll.
Frameworks gibts genug

 

[Daaron]

Back erst einmal kleine Brötchen. Lass den ganzen AJAX-Kram. Sieh erst einmal zu, dass du eine stinknormale HTML-Ausgabe der von dir gewünschten Inhalte hin bekommst gemäß der einfachen Regel: Eine URL -> ein Content.
Wenn du z.B. eine sehr Tabelle (oder sehr viele Newsbeiträge, sehr viele Forenposts,...) aufteilen willst, dann heißt das Zauberwort hier Pagination.

 

[pizza4ever]

Also habe mir mal Bootstrap angeschaut, es gefällt mir richtig gut, vorallem mit den vielen Codebeispielen.

Da würde man über JQuery auf die SQL Datenbank dann zugreifen oder?

Ist halt eine komplett andere Technik als PHP. Ich denke der Austausch von sowas grundsätzlichem dürfte später ja schwieriger sein.

Ich habe im Prinzip (sehr vereinfacht) ein großes SQL Statement was ich dann im Browser abarbeiten will und dann Inhalte in die DB schreiben.

Die Statements habe ich in SQL eigentlich schon fertig, ich muss irgendwo noch den User Content verarbeiten (das hätte ich gerne in PHP, gemacht, weil ich den Code nicht auf dem Client Rechner liegen haben will).

Also vom Browser soll nur kommen 1,2,3 (je nachdem auf welchen Button er klickt), was davon abgeleitet in die Datenbank geschrieben wird soll NICHT auf Clientseite auslesbar sein...

Rein vom Gedankengang könnte ich m.E. nach auch einen DummyWert in die DB schreiben vom Jquery aus und dann den Dummywert in PHP verarbeiten!?

 

[Rossie]

Da würde man über JQuery auf die SQL Datenbank dann zugreifen oder?

Nein, nicht zwingend. JavaScript würde ich persönlich ohnehin nur dazu verwenden, eine Seite aufzupeppen. Bedienbar sollte Sie auch komplett ohne JavaScript sein, was z.B. beim Bootstrap-Menü nicht komplett gegeben ist. Ist für Deine Zwecke vermutlich nicht relevant, aber JavaScript bedeutet auch immer, dass es im Browser aktiviert sein muss und es gibt durchaus Menschen, die das aus welchen Gründen auch immer gar nicht, oder nur selektiv tun.

Ist halt eine komplett andere Technik als PHP. Ich denke der Austausch von sowas grundsätzlichem dürfte später ja schwieriger sein.

Nee, da wird nichts ausgetauscht. Die HTML-Ausgabe bleibt als Fallback immer bestehen. Die JavaScript-Lösung wird einfach zusätzlich hinzugefügt und das Backend schaut dann einfach, um was für eine Art der Anfrage es sich handelt und liefert entweder HTML aus oder bei JavaScript (AJAX) typischerweise JSON, welches dann vom Client entsprechend für die Ausgabe formatiert wird.

 

[Daaron]

Also habe mir mal Bootstrap angeschaut, es gefällt mir richtig gut, vorallem mit den vielen Codebeispielen.

Bootstrap ist, wie eigentlich alle Frameworks, ziemlicher Mist. Die damit erzeugten Seiten sehen alle mehr oder weniger gleich aus, außerdem lädst du teilweise ein monströses Framework um dann nur 10% davon wirklich zu verwenden... und dann sind da noch die total sinnbefreiten Default-Styles in Bootstrap... die gehen teilweise sowas von gar nicht.

Da würde man über JQuery auf die SQL Datenbank dann zugreifen oder?

JavaScript kann GAR NICHT auf die Datenbank zugreifen (ausgenommen Node.JS-Server). Warum? Weil JS beim User ausgeführt wird. Würdest du deinem User die Datenbank-Zugangsdaten anvertrauen?


Nochmal: Fang mit kleinen Brötchen an. Schreib dir deine PHP/SQL - Logik im Hintergrund und deine HTML-Ausgabe im Vordergrund. Schreib deine Anwendung so, dass sei vollkommen ohne JavaScript bedienbar ist. Das sollte immer dein erstes Ziel sein, AUSSER du schreibst explizit eine komplexe Anwendung, die nur mit JS realisierbar ist (z.B. weil du auf <canvas> oder Drag&Drop-Mechanismen angewiesen bist).
Wenn deine JS-freie Version steht, DANN fängst du an mit asynchronen JS-Events deine Anwendung lebendiger & flüssiger zu gestalten.

 

[imRa]

daaron bringt es auf den punkt und daran sollte man sich m.m.n. halten.

habe nur eine kleinigkeit dich ich noch ergänzen möchte.
es gibt zwei ansätze welche es dir erlauben schnell und effektiv zu arbeiten - diese hängen auch von deinem können ab.

ansatz 1]
du erstellt zuerst die logik deiner anwendung, sprich wie verarbeitest du daten, wie bekommst du sie etc. die kannst du fast komplett ohne html realisieren [die paar elemente die du brauchst, kannst du ggf. schnell einbetten].
wenn das alles funktioniert machst du dich an die einfache präsentation deiner daten [html/css]. erst wenn dies fertig ist solltest du js einbinden - die gründe hierzu hat daaron geliefert.

ansatz 2]
du erstellt deine seite [html/css] mit blind-daten, bis sie so ist wie du sie dir vorstellst. im anschluss kümmerst du dich um die programmierlogik [php/sql].
wie auch im ersten ansatz, solltest du erst an js gehen wenn alles so läuft wie du dir es vorstellst.

 

[pizza4ever]

... da AEB entwickeler -> erst content, dann layout

Ergänzung (17. August 2014)

Soo eine Frage habe ich dann noch...

Ich will nun sowas haben wo ich etwas Spoiler (ist logisch erforderlich)

d.h. der Klick auf einen Button gibt etwas anderes frei.

Dafür braucht man dann doch zwingend Javascript oder?

Ich habe mal in den Quelltext von einer Seite die ich kenne und die sowas hat geschaut und dort ist zwingend Javascript Voraussetzung...

 

[Daaron]

Sowas geht tatsächlich auch ohne JS.

Beispiel mit räumlich verstreuten Containern für "Button" und Spoiler.

<div id="left"><label for="spoiler1">Spoiler 1 anzeigen</label></div>
<div id="main"><input type="checkbox" id="spoiler1" /><div class="spoiler">Hier kommt dein Spoiler-Inhalt</div></div>

Was man jetzt dazu wissen muss...
1.) Ein Click auf ein <label> wirkt wie ein Click auf das zugeordnete <input>-Feld. Bei Textfeldern gibts Fokus, bei Checkbox & Radio schaltet es den Button um. Lediglich das iPad hat in der Vergangenheit dieses Standard-Verhalten verweigert. Hier brauchts unter Umständen JS-Fallbacks.
2.) In CSS gibt es die :checked - Pseudoklasse.
3.) Den CSS-Selektor + (z.B. wie in h1 + h2) sollte man kennen
4.) CSS3 Transitions sollten auch bekannt sein.

 

[ice-breaker]

Bootstrap ist, wie eigentlich alle Frameworks, ziemlicher Mist.

stimmt, weil das populärste Repository auf Github gemessen an Stars absolute Grütze ist, über 70.000 Entwickler sind einfach Idioten, aber Daaron hat es eben drauf...

(wer Überspitzungen findet, darf sie gerne behalten)

 

[Rossie]

stimmt, weil das populärste Repository auf Github gemessen an Stars absolute Grütze ist, über 70.000 Entwickler sind einfach Idioten, aber Daaron hat es eben drauf...

(wer Überspitzungen findet, darf sie gerne behalten)

Naja, Daaron hat nicht völlig Unrecht, allerdings sind die Aussagen wie so oft überspitzt und mögen für Daarons Anwendungsfall stimmen, sich von der Wirklichkeit vieler Webprojekte allerdings durchaus unterscheiden. Wäre ja auch doof, wenn jeder ohne viel Aufwand eine annähernd professionelle Lösung zaubern könnte.

Wie man der Bootstrap-Expo entnehmen kann, sind damit sehr wohl individuelle Lösungen möglich und es kommt nicht immer auf das letzte Quentchen Performance an, auch wenn es natürlich zu begrüßen ist, wenn die Betreiber einer Webseite die Ressourcen in die Hand nehmen, um dem Anwender eine wirklich optimale Lösung anzubieten.