Als „Code“ bezeichnet man Anweisungen an den Computer, Arbeits-Schritte auszuführen. Die Anweisungen werden in „Sprachen“, zum Beispiel Programmiersprachen oder Datenbankabfrage-Sprachen geschrieben.
Jede Software verfolgt ein bestimmtes Ziel: Magento 2 zum Beispiel ermöglicht es HändlerInnen, einen Webshop zu betreiben. Der Programm-Code von Magento 2 enthält also Anweisungen, um die Funktionen eines Onlineshops bereitzustellen.
„Code“ klingt nach etwas Kryptischem, Verschlüsselten, aber Programm-Code sollte nicht kryptisch sein. Laut Statistiken verbringen ProgrammiererInnen ca. 90% der Zeit damit, Code zu lesen und zu verstehen!
Deswegen ist die eigentliche Leistung von guten ProgrammiererInnen nicht, viel Code zu schreiben, sondern möglichst wenig davon. Dafür soll der Code verständlich, wartbar und erweiterbar sein.
Ein berühmtes Zitat dazu ist:
Code, den ein Computer verstehen kann, kann jeder Schwachkopf schreiben. Code, den Menschen verstehen können, können nur gute ProgrammiererInnen schreiben.
Welche Arten von Code gibt es in Magento 2?
Magento 2 Code wird in verschiedenen Sprachen geschrieben.
Zum Einsatz kommen:
- Programmiersprachen wie PHP und JavaScript
- Datenbank-Abfragesprachen wie SQL
- Auszeichnungssprachen wie HTML
- Formatierungssprachen wie CSS.
Sie erfahren gleich, was die Unterschiede zwischen diesen Sprachen sind und welche Sprache wofür zuständig ist.
Wichtig zu wissen
Jede Sprache hat eine eigene Aufgabe, Syntax und Grammatik. Alle Sprachen zusammen ergeben eine Web-Software wie Magento 2. Jemand, der guten HTML- und CSS-Code schreibt, kann deswegen nicht automatisch effiziente und sichere Datenbank-Abfragen schreiben.
PHP
Die Anwendungslogik, die auf dem Webserver läuft, wird in der Programmiersprache PHP geschrieben. Dazu zählt zum Beispiel das Verarbeiten von Formularen, das Lesen aus und das Schreiben in Datenbanken und die Zusammenstellung der Webseite, die später in Ihrem Browser zusammengestellt wird.
PHP-Code darf nicht öffentlich sichtbar sein
PHP-Code ist nicht für Außenstehende sichtbar und veränderbar, weil er direkt am Webserver verarbeitet wird. Geht es um die Umsetzung von Anwendungslogik (z.B. das Anlegen einer Bestellung) oder sicherheitskritische Aktionen (z.B. Zahlungen), dann muss das in PHP am Server erledigt werden, damit der Ablauf nicht manipuliert werden kann.
Sollte im Browser PHP-Code sichtbar werden, dann ist das ein Zeichen dafür dass etwas im Argen liegt. Sorgen Sie dafür, dass das schnellstmöglich behoben wird. Kontaktieren Sie Ihren Provider bzw. Ihren Dienstleister!
Beispiel für PHP-Code
PHP-Code sieht zum Beispiel so aus:
<?php
// … many more lines
class Product extends \Magento\Catalog\Model\AbstractModel implements
IdentityInterface,
SaleableInterface,
ProductInterface
{
/**
* Check if data was changed
*
* @return bool
*/
public function isDataChanged()
{
foreach (array_keys($this->getData()) as $field) {
if ($this->dataHasChangedFor($field)) {
return true;
}
}
return false;
}
}
SQL
Magento 2 verwendet den Datenbank-Server MySQL als Speicherort für alle Daten. (Für bestimmte Zwecke kommt andere Datenspeicher-Software wie Redis, memcached und RabbitMQ zum Einsatz, aber das können wir an dieser Stelle außer Acht lassen.)
Die Datenabfrage-Sprache von MySQL baut auf dem Standard SQL („Structured Query Language“) auf. Über SQL holt sich Magento 2 also Daten aus der Datenbank und schreibt diese hinein.
Bei einem typischen Seitenaufruf erfolgen dutzende solcher Lese-Operationen. Besonders bei größeren und öfters besuchten Shops ist deswegen eine optimierte Server-Konfiguration sehr wichtig.
Eine Datenbank ist wie ein Excel-Dokument
Stellen Sie sich eine Datenbank als ein Excel-Dokument vor. Ein Excel-File für Magento 2 hätte hunderte Tabellen mit teilweise hunderten Spalten und hunderttausenden bis Millionen Zeilen. Auf das Dokument greifen dutzende UserInnen gleichzeitig zu die erwarten, dass komplizierte Formeln dutzendweise im Bruchteil einer Sekunde erledigt werden.
Klingt nach viel Stress für einen Datenbankserver? Korrekt, ist es auch. Deswegen muss man in der Programmierung auf eine effiziente Speicherung und Abfrage der Daten achten. Trotzdem ist in Magento 2 nicht der Datenbank-Zugriff, sondern die Verarbeitung der Geschäftslogik in PHP der Teil, der Server am meisten beansprucht.
SQL-Code darf nicht öffentlich sichtbar sein
Wie schon für PHP gilt: welche Daten wie vom Datenbankserver abgefragt werden, geht die Außenwelt nichts an. Die Kommunikation erfolgt direkt zwischen Ihrem Webserver und dem Datenbankserver, die auch auf der gleichen Hardware laufen können. Außenstehende wie die Web-Browser der KundInnen und Bots dürfen nicht mitbekommen, was hier gesprochen wird.
Sind Datenbank-Abfragen nach außen hin sichtbar oder können womöglich über Web-Aufrufe manipuliert werden (das nennt man, vereinfacht gesagt, SQL Injection), dann muss das dringend behoben werden, um Datenmanipulationen oder Daten-Leaks zu vermeiden. Kontaktieren Sie Ihren Dienstleister!
Beispiel für SQL-Code
Eine SQL-Abfrage sieht zum Beispiel so aus:
SELECT e.entity_id AS 'id',
e.sku,
cpev.value AS 'name',
cped.value AS 'price',
cpet.value AS 'description',
media_gallery.value AS 'media_gallery',
FROM catalog_product_entity e
LEFT JOIN catalog_product_entity_varchar cpev ON e.entity_id = cpev.entity_id
AND cpev.store_id = 0
AND cpev.attribute_id =
(SELECT attribute_id
FROM eav_attribute
WHERE attribute_code = 'name'
AND entity_type_id =
(SELECT entity_type_id
FROM eav_entity_type
WHERE entity_type_code = 'catalog_product'))
LEFT JOIN catalog_product_entity_text cpet ON e.entity_id = cpet.entity_id
AND cpet.store_id = 0
AND cpet.attribute_id =
(SELECT attribute_id
FROM eav_attribute
WHERE attribute_code = 'description'
AND entity_type_id =
(SELECT entity_type_id
FROM eav_entity_type
WHERE entity_type_code = 'catalog_product'))
LEFT JOIN catalog_product_entity_decimal cped ON e.entity_id = cped.entity_id
AND cped.store_id = 0
AND cped.attribute_id =
(SELECT attribute_id
FROM eav_attribute
WHERE attribute_code = 'price'
AND entity_type_id =
(SELECT entity_type_id
FROM eav_entity_type
WHERE entity_type_code = 'catalog_product'))
LEFT JOIN
(SELECT cpemgvte.entity_id,
GROUP_CONCAT(cpemg.value) AS value
FROM catalog_product_entity_media_gallery_value_to_entity cpemgvte
INNER JOIN catalog_product_entity_media_gallery cpemg ON cpemg.value_id = cpemgvte.value_id
AND cpemg.attribute_id =
(SELECT attribute_id
FROM eav_attribute
WHERE attribute_code = 'media_gallery'
AND entity_type_id =
(SELECT entity_type_id
FROM eav_entity_type
WHERE entity_type_code = 'catalog_product'))
GROUP BY cpemgvte.entity_id) media_gallery ON e.entity_id = media_gallery.entity_id;
HTML
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache („Markup language“ – HTML steht für Hypertext Markup Language). Was heißt das?
Wenn Ihr Browser einen Magento-2-Webshop aufruft, dann werden der Webserver und der Datenbankserver aktiv (siehe oben). Der PHP-Code holt sich aus der MySQL-Datenbank die nötigen Informationen und stellt eine Antwort für Ihren Browser zusammen: die Webseite.
Die Webseite ist erst einmal nur ein Text-Dokument. Damit Ihr Browser die Seite darstellt wie Sie es kennen, benötigt er mehr Informationen als den bloßen Text. Dazu gehört, welche Bild-Dateien geladen werden sollen, welche CSS- und JavaScript-Dateien benötigt werden (dazu gleich mehr) und, ganz wichtig: die Struktur der Seite.
Dafür ist HTML zuständig. Diese Sprache beschreibt, was die Hauptüberschrift und was die Unterüberschriften der aktuellen Seite sind, bei welchen Teilen es sich um Text-Absätze, Aufzählungen, das Navigationsmenü und vieles mehr handelt.
HTML gibt einem Dokument, also einer Webseite also Struktur – ähnlich wie Sie in Word und vergleichbaren Dokumenten Überschriften, Listen, Tabellen usw. definieren.
HTML-Code ist immer öffentlich
Damit Ihr Browser die Webseite darstellen können, muss er den HTML-Code vom Webserver herunterladen. Daher ist der HTML-Code immer für die Person sichtbar, welche vor dem Browser sitzt.
Gibt es Dinge, die bestimmte UserInnen nicht sehen dürfen, dann muss man dafür sorgen, dass die UserInnen identifizierbar sind – zum Beispiel über einen Login. Hat sich ein Benutzer oder eine Benutzerin mit der Mail-Adresse und dem Passwort authentifiziert, dann kann ich entscheiden, welche Inhalte und Funktionen ich ihm oder ihr zeige.
Beispiel für HTML-Code
Hier ein kleiner Ausschnitt aus der Produktseite von Magento 2:
<div class="product-info-main">
<div class="page-title-wrapper product">
<h1 class="page-title"><span class="base" data-ui-id="page-title-wrapper" itemprop="name">Breathe-Easy Tank</span></h1>
</div>
<div class="product-reviews-summary" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div class="rating-summary">
<span class="label"><span>Bewertung:</span></span>
<div class="rating-result" title="70%">
<span style="width:70%">
<span>
<span itemprop="ratingValue">70</span>% of <span itemprop="bestRating">100</span>
</span>
</span>
</div>
</div>
<div class="reviews-actions">
<a class="action view" href="https://magentoshop.tld/breathe-easy-tank.html#reviews">
<span itemprop="reviewCount">2</span> <span>Bewertungen</span>
</a>
<a class="action add" href="https://magentoshop.tld/breathe-easy-tank.html#review-form">Ihre Bewertung hinzufügen</a>
</div>
</div>
<div class="product-info-price">
<div class="price-box price-final_price" data-price-box="product-id-1818" data-product-id="1818" data-role="priceBox">
<span class="normal-price">
<span class="price-container price-final_price tax weee" itemprop="offers" itemscope=""
itemtype="http://schema.org/Offer">
<span class="price-label">Ab</span>
<span class="price-wrapper" data-price-amount="34" data-price-type="finalPrice" id="product-price-1818">
<span class="price">34,00 €</span>
</span>
<meta content="34" itemprop="price">
<meta content="EUR" itemprop="priceCurrency">
</span>
</span>
</div>
<div class="product-info-stock-sku">
<div class="stock available" title="Verfügbarkeit">
<span>Auf Lager</span>
</div>
</div>
</div>
</div>
CSS
Hat Ihr Browser das HTML vom Webserver erhalten, dann kennt er die Struktur und die Elemente der Seite. Er weiß aber noch nicht, wie er die Seite darstellen soll.
Um eine Seite hübsch darzustellen, benötigen wir „Cascading Style Sheets“, kurz CSS. CSS ist eine so genannte Style-Sheet-Sprache, also eine Sprache, die (HTML-)Dokumente mit (Design-)Stilen versieht und somit die Präsentation der Webseite definiert.
Wenn keine Styling-Informationen vorhanden sind, verwendet jeder Browser simple Basis-Vorgaben, wie er Seitenelemente darstellt. Er setzt eine Standard-Schrift ein (meist mit Serifen), druckt Überschriften größer als normale Absätze und fett, setzt nicht nummerierten Listen einen dicken schwarzen Punkt voran, unterstreicht Linktexte bei einer blauen Textfarbe und so weiter.
Webshop sieht komisch aus?
Sie haben Ihren Magento-2-Shop schon einmal mit einer solchen simplen Darstellung gesehen? Dann konnten die CSS-Dateien nicht korrekt geladen werden.
CSS erlaubt es, Webseiten-Elemente unterschiedlich darzustellen, je nachdem von welchem Gerät (Smartphone, Tablet, PC, …) eine Seite aufgerufen wird, und wo die Seite ausgegeben wird (Großflächiger HD-Bildschirm, Smartphone hochkant oder quer, Ausdruck auf Papier, …). Es spielt damit eine wichtige Rolle im Responsive Design.
CSS-Code ist immer öffentlich
Wie schon füt HTML gilt: CSS-Code kann von der Person, welche die Webseite aufruft eingesehen werden.
Auch wenn CSS „nur“ die Optik der Seite formatiert: selbst hier muss man sich Gedanken machen, was man alle UserInnen ausspielt und was nicht. Erhalten alle UserInnen den kompletten CSS-Code und nicht nur für die Teile der Webseite, die sie sehen können, dann verrät man vielleicht versteckte Funktionen und Inhalte der Website.
Beispiel für CSS-Code
Das ist ein kurzer Ausschnitt des CSS-Code für die Produktseite in Magento 2:
.product-info-main .page-title-wrapper h1 {
margin-bottom: 15px;
}
.product-info-main .product-add-form {
padding-top: 20px;
}
.box-tocart .action.tocart {
margin-bottom: 0;
margin-right: 1%;
width: 49%;
}
.product-social-links {
text-align: left;
}
.product-options-bottom .price-box .price-container,
.product-info-price .price-box .price-container {
font-size: 21px;
}
.product-options-bottom .price-box .price-container .price,
.product-info-price .price-box .price-container .price {
font-size: 36px;
line-height: 36px;
}
.product-options-bottom .price-box .price-including-tax + .price-excluding-tax .price,
.product-info-price .price-box .price-including-tax + .price-excluding-tax .price {
font-size: 1.4rem;
line-height: 16px;
}
.product-info-main {
float: right;
}
.product.media {
float: left;
margin-bottom: 25px;
}
.page-layout-1column .product-info-main {
width: 40%;
}
.page-layout-1column .product.media {
width: 57%;
}
.page-layout-2columns-left .product-info-main,
.page-layout-2columns-right .product-info-main,
.page-layout-3columns .product-info-main {
width: 48%;
}
.page-layout-2columns-left .product.media,
.page-layout-2columns-right .product.media,
.page-layout-3columns .product.media {
width: 50%;
}
JavaScript
JavaScript ist eine Programmiersprache, die direkt in Ihrem Web-Browser ausgeführt wird. Diesen Stehsatz haben Sie vielleicht schon einmal gelesen, aber es sei hier noch einmal erwähnt: JavaScript und Java haben ähnliche Namen, haben miteinander aber nichts zu tun!
Wozu braucht man JavaScript, wenn man mit PHP schon eine Programmiersprache im Einsatz hat?
PHP hilft, die Webseite für den User zusammenzubauen. Sobald die Seite beim User ist, ist für PHP die Arbeit aber abgeschlossen und sie kann nichts mehr für den User tun.
JavaScript dagegen ist für alles zuständig, was eine Seite dynamisch macht und damit dem User das Leben erleichtert. Zum Beispiel:
- Ausklappen und Einklappen von Seitenbereichen
- Überprüfung von Eingabewerten in einem Formular
- Plus-Buttons und Minus-Buttons, um die gewünschte Stückzahl eines Produkts für den Warenkorb auszuwählen
- Drag-and-Drop-Elemente auf einer Website
- Ein Formular auf einer Webseite ausfüllen oder eine andere Aktion ausführen, die eine Aktion auf dem Webserver bewirkt, ohne dass die Seite neu geladen werden muss
JavaScript ist immer öffentlich
Wie schon bei HTML und CSS wird der JavaScript-Code beim Aufruf einer Webseite auf den PC der NutzerInnen heruntergeladen. Er ist daher für jedermann/jederfrau einsehbar und auch veränderbar – nur im eigenen Browser, aber nicht im Browser von anderen Usern.
Das bedeutet für Sie:
- Geschäftskritische, geheime Abläufe wie Preisaufschläge und ähnliche Kalkulationen sollten nicht hier vorgenommen werden.
- Das JavaScript für geschützte Funktionen, die nur bestimmten UserInnen zugänglich sind, dürfen nicht an alle Website-AufruferInnnen ausgeliefert werden. Das betrifft häufig den B2B-Bereich, in dem Ihre KundInnen auf Features Zugriff haben, mit denen Sie sich vom Mitbewerb distanzieren.
- Alle Eingaben, die BesucherInnen über die Webseite machen – seien es Formulareingaben, Klicks auf Warenkorb- und Bestell-Buttons, Drag&Drop-Aktionen oder andere – müssen serverseitig noch einmal überprüft werden („Validierung“). Man darf ihnen nicht blind vertrauen. Das bringt Schutz vor SQL-Injections, XSS, CSRF und co.
Beispiel für JavaScript-Code
Das ist ein kleiner Ausschnitt des JavaScript-Codes für die Produktseite in Magento 2:
define([
'jquery'
], function ($) {
'use strict';
/**
* @param {String} url
* @param {*} fromPages
*/
function processReviews(url, fromPages) {
$.ajax({
url: url,
cache: true,
dataType: 'html',
showLoader: false,
loaderContext: $('.product.data.items')
}).done(function (data) {
$('#product-review-container').html(data).trigger('contentUpdated');
$('[data-role="product-review"] .pages a').each(function (index, element) {
$(element).click(function (event) { //eslint-disable-line max-nested-callbacks
processReviews($(element).attr('href'), true);
event.preventDefault();
});
});
}).complete(function () {
if (fromPages == true) { //eslint-disable-line eqeqeq
$('html, body').animate({
scrollTop: $('#reviews').offset().top - 50
}, 300);
}
});
}
return function (config) {
var reviewTab = $(config.reviewsTabSelector),
requiredReviewTabRole = 'tab';
if (reviewTab.attr('role') === requiredReviewTabRole && reviewTab.hasClass('active')) {
processReviews(config.productReviewUrl);
} else {
reviewTab.one('beforeOpen', function () {
processReviews(config.productReviewUrl);
});
}
$(function () {
$('.product-info-main .reviews-actions a').click(function (event) {
var anchor;
event.preventDefault();
anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
$('.product.data.items [data-role="content"]').each(function (index) { //eslint-disable-line
if (this.id == 'reviews') { //eslint-disable-line eqeqeq
$('.product.data.items').tabs('activate', index);
$('html, body').animate({
scrollTop: $('#' + anchor).offset().top - 50
}, 300);
}
});
});
});
};
});
Wo findet man den Code von Magento 2?
Magento stellt den Source-Code für die kostenlose Version „Open Source“ auf GitHub im Repository magento/magento2 bereit.
Außerdem hat Magento drei Organisationen bei GitHub (magento, magento-research und magento-engcom). In denen finden Sie Repositories für verschiedene Teilprojekte, Tools und Forschungsprojekte.
Weiterführende Themen
- Refactoring – warum man dem Code laufend eine Frischzellenkur verpassen muss und welchen Vorteil das für HändlerInnen hat. Sie sind an diesem Thema interessiert? Bitte hinterlassen Sie einen Kommentar!
Fragen zum Thema?
Haben Sie allgemeine Fragen zum Code von und Programmiersprachen in Magento 2? Posten Sie sie bitte in den Kommentaren und ich versuche, sie hier zu beantworten.
