JavaScript Abschlussprojekt - Datenbank an HTML5 anbinden

[Cool Master]

Moin,

also ich bin gerade am überlegen was ich für mein Abschlussprojekt als Fachinformatiker Anwendungsentwicklung mache. Wir haben aktuell ein Projekt am laufen das in Flash geschrieben wird, da ich damit aber mit Flash in meiner Ausbildung 0 zu tun hatte (ein glück ) , kommt eine Teilnahme in dem Projekt nicht gerade in Frage.

Deswegen habe ich mit meinem Chef geredet und gefragt ob man das ganze nicht auch in HTML5 mit JS und CSS umsetzen könnte und er war nicht abgeneigt von dem ganzen. Es sollte also eine Art Case Study werden in der man sehen kann wie weit HTML5 Flash im Jahr 2012/13 ergänzen oder sogar ersetzen kann. Das ganze wird in ein CMS integriert, auch wenn man nicht wirklich viel an der Webseite änden kann aber somit hat man direkt Zugriffskontolle und kann User anlegen so das kein Unberechtigter das ganze sieht

Nun müsste ich aber ein paar Fragen klären bevor ich in ein paar Wochen den Antrag an die IHK schicke. Diese wären:

MySQL und HTML5 wie kann man das verbinden? Ich nehme mal an mit jQuery oder?

Kann ich Einträge auch in die MySQL DB auf dem Server schreiben lassen mit z.B. jQuery?

Das ganze soll eher auf Mobile Geräte angelehnt werden somit denke ich mal wird auf WebKit optimiert. Welche Browser(Engine) können auf Mobilen Geräten noch vor kommen? An sich sind die Top Player Android und iOS die jeweils Safari oder Chrome nutzen oder wie ist das unter Android?

 

[Yuuri]

Da fehlt PHP, ASP, Python, Perl, ... in deiner Liste. Ohne bekommst du keinen Zugang zur DB.

 

[Cool Master]

Macht PHP und HTML5 Probleme? Das CMS basiert auf Python aber keine Ahnung wie ich dem CMS beibringe eine DB auszulesen.

 

[Yuuri]

Du brauchst halt irgendwas, was dir die Daten aus der DB ans Frontend weiterreicht. Auf welchem Wege und mit welcher Sprache/welchem Toolkit du das machst (CMS, Framework, einzelne Scripte, ...), ist ganz dir überlassen.

PHP und HTML macht keine Probleme - siehst du ja hier an CB. HTML, CSS, JS ist auch nur eine Clientseitige Sprache; PHP, Python, Perl und Konsorten arbeiten am Server, wissen voneinander also nichts.

 

[Daaron]

PHP und HTML5 haben erst einmal nix miteinander zu tun. Sprachen wie ASP.NET, PHP, Python, Perl, Ruby oder Node.JS (jaja, keine separate Sprache...) erzeugen, wenn man sie korrekt verwendet, schlichtweg den HTML-Code, den man haben will... oder CSS-Code. Oder JS. Oder Bilder. Oder verwalten Ordner, Datei, Datenbankeinträge,....

Wenn wir hier von einem CMS reden, dann hat es doch mit Sicherheit einen Datenbank-Zugang. Mir fällt grad kein CMS ein, das KEINE irgendwie geartete Datenbank verwendet, das ist ja der Sinn eines CMS: Lagere Inhalte getrennt vom Layout in einer Datenstruktur.
Verwende also für deine Zugriffe ausschließlich die Möglichkeiten, die dir das CMS bietet bzw. erweitere sie gemäß dem Programmierschema des CMS. Alles andere wären eigenartige Hacks und im Zweifel Sicherheitslücken.

 

[Troublegum]

Javascript kann nicht direkt auf MySQL Datenbanken zugreifen. Das lässt du also ein Serverseitiges Skript (z.B. dein CMS) erledigen. Wenn du die Daten in Javascript brauchst, kannst du sie ja einfach per Ajax laden.

 

[Cool Master]

Ergibt alles Sinn was ihr sagt Also das CMS kann in der Theorie ja die Datenbank laden die für das Projekt benötigt werden somit hätte ich im CMS die DB die ich Auslesen möchte bzw. schreiben möchte in dieser DB müsste ich halt nur noch ein paar Reihen und Spalten anlegen für die eigentlichen Projekt Daten.

Somit wäre also die Anbindung schon mal geklärt schon mal danke dafür

Bleibt nur noch die Android Frage. Hat jedes Android ein WebKit Browser? Ich frage weil ich viel CSS3 nutzen möchte bzw. muss. Es gibt z.B. Werte von 0-100 in Prozent oder einfach nur normale Zahlen. Miit diesen Werten sollen mehrere Pfeile bewegt werden. Hier könnte man z.B. das Durschnittsalter aller Mitarbeiter (natürlich voll anonymisiert) ermiteln und per CSS Transform den Pfeil auf z.B. 43deg stellen was also ein Durschnittsalter von 43 ergeben würde. Für Prozent Werte wären 180deg = 100% und 90deg = 50% usw.

 

[Morpheus3k]

Du solltest auch Firefox Mobile und Opera Mobile mit berücksichtigen.

 

[Cool Master]

@Morpheus3k

Hmm guter Einwand, ich muss aber erst mal schauen wie weit diese Browser vertreten sind. Ich nehme mal an ohne geschaut zu haben das die Browser unter 5% der User ausmachen werden und somit lohnt sich der Mehraufwand einfach nicht, da ich eh nur 70 Stunden habe und diese möchte ich nicht opfern weil Firefox Mobil oder Opera Mobil nicht zu 100% gehen, weil die Entwickler ihr eigenes Ding durchziehen wollen.

Mir geht es halt hauptsächlich um den 0815 User, der 0 Ahnung von Tablets hat und nicht den 20 Jährigen Techi der von 32 GB 31,999999 GB durch Apps belegt hat.

 

[Yuuri]

Der "Mehraufwand" ist im Prinzip nicht vorhanden. Komm bitte gleich von "für Webkit optimiert" weg und arbeite Standardkonform. Für CSS gibts die Präfixe -webkit, -moz, -opera, -ms, teilweise mit, teilweise ohne für Properties (sowas wie border-radius sollte mittlerweile jeder Browser verstehen, da braucht es mittlerweile keine Property mit allen Präfixen mehr). jQuery arbeitet sowieso Cross-Browser kompatibel, dort bringt dir also ein .click() in jedem Fall das richtige Ergebnis. Es gibt heutzutage keinen Grund mehr auf etwas zu "optimieren". Aktuelle Browser (ab inkl. IE 10, der Rest sowieso) arbeiten alle nach dem Standard mit verschiedenen Vendor-Prefixes für CSS. Einzig die JS-Implementierung ist immer ein wenig anders. Aber wie gesagt hast du dafür ja jQuery.

Dass etwas nicht genauso funktioniert, wie in einem anderen Browser, ist kein Problem, solange es die Funktionalität nicht beinträchtigt. Wenn dein Chef nun aber meint, mal eben Safari unter Windows auszuprobieren, sollte es trotzdem laufen können, auch wenn vielleicht einiges an Animationen o.ä. (weiß ja nicht was du genau machen willst) fehlt.

 

[Morpheus3k]

@Morpheus3k
...diese möchte ich nicht opfern weil Firefox Mobil oder Opera Mobil nicht zu 100% gehen, weil die Entwickler ihr eigenes Ding durchziehen wollen.

Ganz versteh ich nicht, was du damit meinst?

Ehrlich gesagt, finde ich sogar notwendig, dass man die Zeit dazu verwendet, kompatiblen Code zu schreiben, sonst haben wir bald wieder Zustände wie damals mit IE6.
Außerdem ist es so, dass wenn man sich an die W3C Standards hält, meinst nur wenig oder gar nichts für eine Engine optimieren muss.

 

[Cool Master]

Komm bitte gleich von "für Webkit optimiert" weg und arbeite Standardkonform.

Na ja das ist doch eben das Problem an HTML5 und CSS3 es ist eben noch kein Standard, also kann man damit auch noch nicht Standardkonform arbeiten.

Fakt ist Android und iOS haben mit WebKit ca. 97% der Mobilen Browser Markt Anteile. Die restlichen 3% teilen sich in Windows und andere kleinere Lager auf.

Sobald HTML5 und CSS3 Final sind (was aktuell ca. 2014 der Fall ist), werde ich das ganze Projekt eh noch mal umschreiben bzw. editieren und die ganzen Präfixe weg machen.

@Morpheus3k

Der Code ist Kompatibel sobald alles Standardisiert ist. Aktuell sind wir leider in der doofen lage das HTML5 und CSS3 wie gesagt noch nicht Final sind. In die Lage, wie damals, mit dem IE 6 werden wir nie wieder kommen, da WebKit für immer Open Source bleiben wird und WebKit auch nicht versucht mit allergewalt einen "Netscape" zu zerdrücken.

 

[Morpheus3k]

@Morpheus3k

Der Code ist Kompatibel sobald alles Standardisiert ist. Aktuell sind wir leider in der doofen lage das HTML5 und CSS3 wie gesagt noch nicht Final sind. In die Lage, wie damals, mit dem IE 6 werden wir nie wieder kommen, da WebKit für immer Open Source bleiben wird und WebKit auch nicht versucht mit allergewalt einen "Netscape" zu zerdrücken.

Das Problem ist allerdings, wenn du z.B. -webkit-css Eigenschaften nimmst, dass das kein anderer Browser in der Lage ist, die Seite richtig darzustellen. Das sind nunmal die gleichen Probleme wie beim IE6.

Grundsätzlich sollte man sowieso keine HTML Syntax oder CSS Eigenschaften verwenden, die noch nicht standardisiert sind. Abgesehen davon, stimmt es nicht, dass HTML5/CSS3 erst 2014 fertig werden. Das sind Märchen von der Medienindustrie.
Die Wahrheit ist, dass HTML5 und CSS3 aus Modulen besteht. Dabei sind einige Module bereits offizieller Standard und einige noch in der finalen Phase.
In deinem Fall willst du die CSS3 Eigenschaften transform verwenden, die z.B. schon als finale Spezifikation vorliegt. Firefox, Internet Explorer 10 und sogar Opera können diese ohne Präfixe richtig und standardkonform darstellen.

Was von welchem Browser unterstützt wird (mit und ohne Präfixe) lässt sich auf dieser Webseite schön prüfen:

Can I use...
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

 

[Cool Master]

Das Problem ist allerdings, wenn du z.B. -webkit-css Eigenschaften nimmst, dass das kein anderer Browser in der Lage ist, die Seite richtig darzustellen.

Das stimmt, aber wie gesagt ist mein Ziel Publikum zu rund 95% mit WebKit unterwegs. Ich werde natürlich versuchen so viel Präfixe wie möglich zu meiden, aber einige Sachen kann halt nur eben über -webkit relaisiert werden, welche das genau sind fallen mir zwar aktuell nicht ein aber es gibt dazu Fälle.

Wo ich mir noch nicht ganz sicher bin wie die Mobilen Browser auf z.B. transform reagieren es wird mir unter:

http://www.css3maker.com/css3-transform.html

zwar angezeigt das iOS 2.0+ es kann aber ob ich da nun -webkit vorstellen muss kann ich nicht sagen.

Ja HTML5 besteht aus Modulen, aber Fakt ist das HTML5 und CSS3 komplett erst in 2014 fertig sind und damit gültiger Standard werden und nicht ein Tag vorher

 

[Morpheus3k]

Das stimmt, aber wie gesagt ist mein Ziel Publikum zu rund 95% mit WebKit unterwegs. Ich werde natürlich versuchen so viel Präfixe wie möglich zu meiden, aber einige Sachen kann halt nur eben über -webkit relaisiert werden, welche das genau sind fallen mir zwar aktuell nicht ein aber es gibt dazu Fälle.

Das mag vielleicht jetzt noch stimmen, wobei immer mehr Leute auf Opera Mobile und Firefox für Android umsteigen. Normalerweise reicht es, die Kompatibilität herzustellen, indem man nicht nur die -webkit Präfixe sondern auch die anderen -moz, -ms, -o und dann das ganze auch ohne Präfixe schreibt.

Wo ich mir noch nicht ganz sicher bin wie die Mobilen Browser auf z.B. transform reagieren es wird mir unter:

http://www.css3maker.com/css3-transform.html

zwar angezeigt das iOS 2.0+ es kann aber ob ich da nun -webkit vorstellen muss kann ich nicht sagen.

Nachdem Transform erst im Juni oder Juli als "final" erklärt wurde, kann iOS 2.0 garkeine präfixe-freie Variante implementiert haben.

Ja HTML5 besteht aus Modulen, aber Fakt ist das HTML5 und CSS3 komplett erst in 2014 fertig sind und damit gültiger Standard werden und nicht ein Tag vorher

Jein, das stimmt so eben nicht. Es stimmt, dass geplant ist bis 2014 jedes HTML5 und CSS3 Modul fertig gestellt zu haben. Es stimmt aber nicht, dass erst dann der "Standard" fertig ist.
Sobald eine Spezifikation den Status "Recommendation" ( = 'Standard') erreicht hat, darf man diese Spezifikation verwenden. Das gilt für Browser-Entwickler wie Webdesigner / -entwickler gleichermaßen.


Das schöne an den verschiedenen Browser-Engines ist, dass man sehr schnell erkennt, ob der HTML/CSS Code richtig ist: Wird er von jedem Browser gleich dargestellt, kann man fast sicher sein, dass es standardkonform ist. Wenn allerdings der Code in nur einem Browser funktioniert, stimmt was gewaltig nicht.
Ich würde dir ans Herz legen, dass du versucht, so Browser-unabhängig wie nur möglich zu sein. Wie bereits geschrieben:
Es reicht oft, einfach nur:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

zu schreiben. Damit erreichst du alle (gängigen) Browser.

Ich persönlich halte dies für äußerst wichtig, weil wir leider wieder in einer IE6-ähnlichen Welt leben. Diesmal von Webkit dominiert. Ich halte es für fahrlässig, wenn man nicht standardkonformen Code schreibt und dann auf einen Browser "optimiert". Wenn man schon nicht konformen Code schreibt, dann doch bitte so, dass jeder Browser ihn darstellen kann.

 

[Daaron]

Es hindert dich nichts daran, in derselben CSS-Deklaration die "pure" Version als auch alle Versionen mit Vendor-Präfix einer Definition zu nutzen. Mach ich auch nicht anders. Da stehen dann eben für n Border-Radius 3-4 Zeilen statt einer, dafür gehts auch in allen leidlich aktuellen Browsern.

 

[Sculletto]

MySQL und HTML5 wie kann man das verbinden? Ich nehme mal an mit jQuery oder?

Kann ich Einträge auch in die MySQL DB auf dem Server schreiben lassen mit z.B. jQuery?

da muss ich spontan an ein Vorstellungsgespräch denken. Fragt mich der Personaler: "Kennen Sie jQuery?". Darauf ich: "Na logisch, das ist eine JavaScript-Lib". Fragt er weiter: "Haben Sie ne Idee, wofür das ist?". Ich, verunsichert: "Öh... da 'Query' in Namen vorkommt, denke ich, das ist was mit Datenbanken?". Sagt er lachend: "Nein".

Aber gut zu wissen, dass ich nicht der einzige bin, der bei "Query" als erstes an Datenkank-Querys (zu deutsch: Abfragen) denkt

Also: jQuery ist eine JavaScript-Bibliothek und damit wie JavaScript im allgemeinen für clientseitige Funktionalitäten zuständig. Datenbankzugriffe aber finden auf Serverseite statt. Du brauchst also eine (Skript-)Sprache, die serverseitig ausgeführt wird. Da bietet sich z.B. PHP an. Oder ASP.NET. Oder Java Servlets/JSPs.