Wikizone - Benutzerbeiträge [de]

Processwire - Template from Scratch

2019-10-23T08:29:44Z

84.157.23.32: /* Seitentemplates - delayed output */

Wir erstellt man in Processwire ein Template ? So gehts.

== Links ==
* Processwire - Themes / Templates
* Module: http://modules.processwire.com/
* Cheatsheet für Variablen: http://www.processwire.com/api/cheatsheet
* Variablen erklärt: http://processwire.com/api/variables/

[[ProcessWire - Snippets]]

Tipp: Module lassen sich unter '''Module > Neu''' direkt importieren wenn man den Modulklassennamen angibt.
== Processwire installieren ==
* Install
** Installer laufen lassen, als Option Blank Template wählen.
** Backend Template
*** Reno Modul installieren (ist schon drin, muss nur aktiviert werden)
** Language Support
*** Language Support Module installieren
*** Language in Setup anlegen (German)
*** Language Pack für Core hochladen
== Wichtige Module installieren ==
* Markup Simple Navigation Modul installieren (Klassenname: MarkupSimpleNavigation)
== Template / Theme erstellen ==
=== Basisstruktur im Templateordner ===
Diese ist schon angelegt, wenn man das blank Template am Anfang auswählt.
<pre>
/scripts
/styles
/errors
home.php
basic-page.php
admin.php
</pre>
=== Seitentemplates anlegen - einfache Variante ===
Ein Template kann z.b. so aussehen:

'''basic-page.php'''
<syntaxhighlight lang="html5">
<?php include('./head.inc'); // include header markup ?>
<h1><?php echo $page->title; ?></h1>
<?php include('./foot.inc'); // include footer markup ?>
</syntaxhighlight>

'''head.inc'''
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $page->title; ?></title>
</head>
<body>
</syntaxhighlight>

'''foot.inc'''
<syntaxhighlight lang="html5">
</body>
</html>
</syntaxhighlight>
Im Backend kann man unter Setup > Templates neue Templates anlegen, die man dann wiederum Seiten zuweisen kann. Processwire sucht dann im Templatesverzeichnis nach dem passenden Dateinamen.

Hinweis: Processwire kann alle möglichen Seiten ausgeben, also auch JSON oder XML
=== Seitentemplates - delayed output ===
Dies ist die Default vorgehensweise in Processwire für komplexere Seiten. Hierbei werden die Templateinhalte in Einzelschritten geladen:
_init.php -> myTemplate.php -> _main.php
myTemplate.php enthält den spezifischen Seiteninhalt, speichert diesen in Variablen und übergibt das Ganze an _main.php

Damit Processwire die genannten Dateien so wie oben verarbeitet, müssen sie in der config.php registriert sein:
<syntaxhighlight lang="php">
/**
* Prepend template file
*
* PHP file in /site/templates/ that will be loaded before each page's template file.
* Example: _init.php
*
* @var string
*
*/
$config->prependTemplateFile = '_init.php';

/**
* Append template file
*
* PHP file in /site/templates/ that will be loaded after each page's template file.
* Example: _main.php
*
* @var string
*
*/
$config->appendTemplateFile = '_main.php';
</syntaxhighlight>

Beispiel:

basic-page.php:
<syntaxhighlight lang="php">
<?php
$content = $page->body . $page->video;
?>
</syntaxhighlight>
_main.php:
<syntaxhighlight lang="php">
<?php
include("./head.inc");
?>

<div id="page">
<header class="">
<a id="logo" href="<?php echo $pages->get('/')->url; ?>">
<h1>
<?php echo $pages->get('/')->title; ?>
</h1>
</a>
</header>
<aside>
<nav>
<?php
// echo nav links
$children = $pages->get('/')->children;
foreach($children as $child){
echo '<a name="'.$child->title.'" class="ajax-link'.$class.'" href="'. $child->url .'">'. $child->title .'</a>';
}
?>
</nav>
</aside>
<div class="content-container cf">
<div class="content current-content">
<?php
// add content to page from template file
echo $content;
?>
</div>
</div>
<?php
include("./foot.inc");
?>
</syntaxhighlight>
_main.php enthält also die generelle Struktur und die Seitentemplates die spezifischen Inhalte. Man kann das allerdings auch besser aufbauen als oben.

=== Markup Regions ===
https://processwire.com/docs/front-end/output/markup-regions/
Setzt man in der config.php
$config->useMarkupRegions;
Sucht ProcessWire nach id Attributen (oder den Attributen pw-id oder data-pw-id) im Markup. Diese merkt sich PW dann als MarkupRegions. Wenn ein nachfolgendes Template die gleiche id nutzt wird diese Region ersetzt. In der Regel wird man in der _main.php die Basis Definition machen und in den Inhaltstemplates, kann man dann die Regions ersetzten. So kann man auch schön Teile einer Seite mit einem Inhaltstemplate ersetzen und den Rest gleich lassen.

'''_main.php'''
<pre>
<div id="page">
<?php include($headerMarkup); ?>
<main id="main">
<p>Hauptinhalt</p>
</main>
<?php include($footerMarkup); ?>
</div>
'''basic-page.php'''
<pre>
<main id="main">
<?=page()->body?>
</main>
</pre>

Fazit: Kann sehr praktisch sein und erleichtert die Ausgabe je nach Arbeitsweise. Zeigt aber eine geringfügig schlechtere Performance und ist evtl. für manche Aufgaben die sehr dynamisch mit Daten umgehen nicht so gut geeignet.

=== AJAX Loading ===
Mit der delayed Technik kann man jetzt auch nur Teile der Seite laden. So hat man niemals eine weiße Seite. So wollen wir vorgehen:
* Wir laden die neuen Inhalte in einen HTML Container
* Neue Inhalte werden gelanden und an vorhandenen Inhalte angehängt
* Dann machen wir einen animierten Seitenübergang und löschen die alten Inhalte

Processwire stellt eine $ajax Variable zur Verfügung die wir nutzen können um zu prüfen, ob ein AJAX Request vorliegt. Wenn nicht können wir die komplette Seite austauschen.

So könnte das aussehen (_main.php):
<syntaxhighlight lang="php">
<?php
// include page structure if not an ajax request
if(!$ajax):
include("./head.inc");
?>

<div id="page">
<header class="">
<a id="logo" href="<?php echo $pages->get('/')->url; ?>">
<h1>
<?php echo $pages->get('/')->title; ?>
</h1>
</a>
</header>
<aside>
<nav>
<?php
// nav content here
?>
</nav>
</aside>
<div class="content-container cf">
<div class="content current-content">
<?php endif; // end if ajax ?>

<?php
// if ajax then only return $content
echo $content;
?>

<?php if(!$ajax): ?>
</div>
</div>
<?php
include("./foot.inc");
endif; // end if ajax
?>
</syntaxhighlight>

=== AJAX über jQuery ===
Um das AJAX Loading der Inhalte zu realisieren nutzen wir '''jQuery'''. Dies notwendigen Funktionen binden wir über die ''main.js'' ein und laden das ganze in der ''foot.inc'' .

foot.inc
<syntaxhighlight lang="php">
<div id="footer" class="footer">
<div class="container">
<p>© <?php echo $homepage->site_title .' '. Date('Y'); ?></p>
<?php echo $footer; ?>
</div>
</div>
</div>
<?php
// If the page is editable, then output a link that takes us straight to the page edit screen:
if($page->editable()) {
echo "<a class='nav' id='editpage' href='{$config->urls->admin}page/edit/?id={$page->id}'>Edit</a>";
}
?>
<script src="<?php echo AIOM::JS(array('scripts/jquery-2.2.4.min.js','scripts/jquery.chocolat.js','scripts/jquery.fitvids.js','scripts/jquery.flexslider-min.js', 'scripts/main.js')); ?>"></script>
</body>
</html>
</syntaxhighlight>

main.js
<syntaxhighlight lang="javascript">
$(function() {

var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked

href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// prevent click and reload
e.preventDefault();
});

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

==== Extras ====
Außerdem möchten wir ein paar nützliche Sachen einbinden:
* Animierter Seitenübergang
* Reinitialisieren der Skripte nach dem Seitenübergang (Lightboxen, Slideshows etc..)
* Already Loaded Check - wenn ein User geklickt hat soll ein erneuter Klick nicht den Ladevorgang neu starten.
* Browser History - wir nutzen html5 history um die richtigen Inhalte zu laden wenn der User den Backbutton nutzt. Sonst würde die letzte komplette Seite geladen, statt nur der letzen ausgetauschten Inhalte.

So sieht main.js am Ende aus:

<syntaxhighlight lang="javascript">
$(function() {

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

// flexslider
$('.flexslider').flexslider({
pauseOnHover: true,
controlNav: false,
prevText: "",
nextText: "",
});

/*
* HTML5 pushstate and ajax content
*/

var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked

// check to see it contents already accessed
if($(this).hasClass('current')){

console.log('current page');

// prevent click through
e.preventDefault();
// exist click function (dont load new content)
return true;
}

$('.current').removeClass('current'); // remove .current from active link
$('.parent').removeClass('parent'); // remove .current from active link
$(this).addClass('current'); // add .current

var parent = $(this).attr('parent');
if(parent){ // if link page has parent nav
$('nav a[name="'+parent+'"]').addClass('parent'); // add .current
}

// add progress spinner on cursor
$('body').css('cursor','progress');

// remove cusor spinner
var pointerTimeout = setTimeout(function () {
$('body').css('cursor','auto'); // progress spinner on cursor
}, 1000);

href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// add new url to html5 history
history.pushState('', +href, href); // push url to history

// change title to new page
$('title').html(title);

// send GA pageview
ga('send', 'pageview', href);

// prevent click and reload
e.preventDefault();
});

// for back / forwards browser navigation
var toggleHistoryVisitNum = 0;
function toggleHistory(){
window.onpopstate = function(event) {
if(window.location.hash == ""){
loadContent(location.pathname);
}
};
}

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// animate the requested content
$('.content.current-content').animate({
// animate out old content
opacity: 0
}, 400, function(){

$('.content.current-content').slideUp(400);

// content animation finished
$('.content.ajax').animate({
// animate in new content
opacity: 1
}, 400, function(){

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

/*
* run js functions for new content
*/

// fitvids for responsivce videos
$(".content .video").fitVids();

// light box
$('.gallery').Chocolat();

});
});

// toggle use of back and forward buttons on browser
if(!toggleHistoryVisitNum){
toggleHistory();
}

// keep track of number of Ajax requests
toggleHistoryVisitNum++;

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

Hinweis: Im Beispiel laden wir direkt HTML Inhalte, man könnte aber auch JSON laden (z.b. mit Mustache JS: https://mustache.github.io/#demo ) um die Ladezeiten weiter zu verkürzen.

Git

2019-10-22T12:34:33Z

84.157.23.32: /* Links */

Git [ɡɪt] ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde.
== Links ==
https://git-scm.com/
https://www.youtube.com/watch?v=elh1y6laO8I Schönes Beginner Tutorial
https://git-scm.com/book/de/v2 //Ausführliches freies eBook
https://de.wikipedia.org/wiki/Git
[[GitHub]] - GitHub ist ein Onlinedienst, der Software-Entwicklungsprojekte auf seinen Servern bereitstellt (Filehosting). Namensgebend war das Versionsverwaltungssystem Git.
https://www.youtube.com/watch?v=IfGVC_nPWzU NodeJS mit Github (noch nicht gecheckt)

== Was ist Git ? ==
Git ist ein verteiltes Versionsverwaltungssystem. Wenn man etwas alleine oder im Team programmiert, kann man alle Änderungen nachträglich verfolgen, Rückgängig machen, Varianten erstellen (Branches) Varianten zu einer neuen Version verschmelzen (merge) etc.

Git kann aber auch für andere Textdateien verwendet werden (z.B. Songtexte verwalten)

Git hat u.a. folgende Eigenschaften
* Nicht lineare Entwicklung
** Branching und Merging - Werkzeuge zum Erstellen von Codevarianten und verschmelzen von mehreren zu einem neuen.
* Kein zentraler Server
** Nutzer haben lokale Kopien des Repository inkl Versionsgeschichte (history)
* Datentransfer zwischen Repositories
** Git kann verschiedene Protokolle nutzen (file, http(s), ssh, ftp, git)
** file:// kann für den lokalen Transfer auf dem Rechner genutzt werden
** git:// wird oft für Lesezugriffe (für fetch und clone) genutzt
** ssh:// wird oft für Schreibzugriffe im Netz genutzt.
* Sicherheit der History
** Über einen Hashbaum wird sichergestellt, dass die Versionsgeschichte nachträglich nicht geändert werden kann.
* Versionierung über alle Dateien.
** Bei Gib bekommen bei der Änderung einer Datei alle Dateien im Projekt eine neue Versionsnummer.

== Git Quickstart ==
Als Beispiel legen wir ein Verzeichnis legen wir einen Ordner mit dem Namen Songtexte an und erstellen zwei Dateien mit Songtexten. Z.B.
azzurro.txt
we-are-the-champions.txt

=== Installation von git ===
Über https://git-scm.com laden und installieren

=== Projekt mit Git verwalten ===
Wichtig für Git ist die Kommandozeile. Es gibt auch GUIs aber man sollte die Commandline Befehle einigermaßen beherrschen.
* Terminal öffnen und in das Projektverzeichnis wechseln
git init .
Erzeugt im aktuellen Verzeichnis (aktuell = .) einen .git Ordner. Dieser ist das Repository in dem alle Änderungen gespeichert werden. Das aktuelle Verzeichnis ist dein Workspace. Dort kannst du ganz normal arbeiten.
==== Git Status ====
Mit
git status
Schauen wir welche Änderungen es im Verzeichnis gibt, die noch nicht von git erfasst bzw. versioniert sind. Das sind im Moment noch alle.
==== Dateien im Repository Tracken und Versionieren - ADD & COMMIT ====
Mit add kann man git dazu bringen Dateiverläufe zu verfolgen (tracken) und mit commit kann man Versionsstände dieser Dateien festhalten.
git add azzurro.txt we-are-the-champions.txt
oder auch mit Jokern
git add *.*
Wenn man jetzt den Status abruft zeigt git an, das die Dateien getrackt werden aber noch neu und nicht commited sind.

==== Änderungen verwalten ====
Hat man etwas im Projekt verändert sieht man mit einem erneuten git status welche Dateien sich verändert haben und mit git diff zeigt git einem die genauen Änderungen an.
git status
git diff
Passt alles können wir die Datei wieder fürs committen adden und dann den Commit durchführen
git add azzurro.txt
git commit

==== Datei auf den letzen Stand zurücksetzen ====
Sehen wir mit unserem git diff, dass wir Änderungen gemacht haben die wir nicht wollen, können wir die Datei auf den letzen Versionsstand zurücksetzen:
git checkout we-are-the-champions.txt

==== Git User Profildaten Konfigurieren ====
Nicht schön im Beispiel: Git hat als User einen automatisch aus dem Mac Nutzerprofil generierten Namen erzeugt. Man kann aber auch selbst einen globalen Usernamen mit dazugehöriger E-Mail erzeugen:
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de

==== Editor konfigurieren ====
Der Editor der von Git aufgerufen wird ist nicht jedermanns sache. Möchte man Ihn ändern gibt es zwei Wege entweder über das User Config File direkt oder üer das Terminal. Hier der zweite Weg:

Terminal:
git config --global core.editor "nano"
Konfiguriert nano als Standard Editor

Wenn der Editor ein externes Fenster öffnet und nicht im Terminal ausgeführt wird, muss man git sagen es soll warten bis der Editor gespeichert und das File geschlossen hat. Sonst gibt es beim Commit eine Fehlermeldung, das keine Message vom Editor kam. Dazu nutzen wir die -w Option.
git config --global core.editor "atom -w"

== Wichtige Befehle ==
=== Repository anlegen ===
git init .
=== Status ===
git status
git status -s #shortversion
=== Dateien Tracken / Stagen ===
git add myfile.ext
git
=== Dateien Unstagen ===
git checkout myfile.ext
=== Unterschiede anschauen ===
# diff der unstaged Änderungen (noch nicht für commit vorgemerkt)
git diff
# diff der staged Änderungen
git diff --staged
git diff --cached

=== Commit (Versionieren)===
git commit
# mit inline Message
git commit -m "Kommentar zum Kommit"
# Ohne Staging alle Änderungen kommitten (add überspringen)
git commit -a -m "Kommentar"
# Kommentar neu setzen (es dürfen keine Änderungen seit dem letzten Commit passiert sein)
git commit --amend
# Datei zum Commit nachreihen wenn vergessen
$ git commit -m 'initial commit'
$ git add meineVergesseneDatei.txt
$ git commit --amend

=== Dateien aus dem Repository löschen ===
* Datei löschen reicht nicht. Datei muss aus dem Staging Bereich gelöscht werden und dann committed werden. Das geschieht mit git rm
git rm meineDatei.txt
git status
* Datei behalten aber aus dem Tracking entfernen
git rm --cached meineDatei.txt
* Dateien mit Ending .xyz entfernen
#alle Logdateien aus dem Verzeichnis /log entfernen (beachte \)
git rm log/\.log
# Alle Dateien endend mit Tilde löschen
git rm \*~

=== Dateien verschieben ===
Git verfolgt keine Verschiebungen, es gibt aber einen move Befehl. Im Prinzip macht git dann aber eine Kopie und löscht die alte Datei - mv ist also ein Shortcut.
mv README.md README

=== History ===
git log
# Unterschiede (hier max 2)anzeigen
git log -p -2
# Mit Statistik (gekürzt)
git log --stat
# Formatiert ausgeben (div Formate möglich)
log --pretty=oneline
# Eigenes Format
git log --pretty=format:"%h - %an, %ar : %s"
# Formatoptionen anzeigen:
git log --pretty=format

=== Konfiguration ===
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de
git config --global core.editor "nano"
git config --global core.editor "atom -w"

== .gitignore ==
In einer .gitignore Datei kann man mit Suchmustern regeln, welche Dateien vom Repository ignoriert werden sollen.

Beispiele für Regeln:
<pre>

# ignore Files ending wich the tilde (often used for temporary Files
*~

# ignore all .a files
*.a

# ignore files ending with .o or .a (objects archives)
*.[oa]

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf
</pre>

== Online Dienstleister ==
Github
Bitbucket
Gitlab

Git

2019-10-22T11:36:23Z

84.157.23.32: /* Dateien aus dem Repository löschen */

Git [ɡɪt] ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde.
== Links ==
https://git-scm.com/
https://www.youtube.com/watch?v=elh1y6laO8I Schönes Beginner Tutorial
https://git-scm.com/book/de/v2 //Ausführliches freies eBook
https://de.wikipedia.org/wiki/Git
[[GitHub]] - GitHub ist ein Onlinedienst, der Software-Entwicklungsprojekte auf seinen Servern bereitstellt (Filehosting). Namensgebend war das Versionsverwaltungssystem Git.

== Was ist Git ? ==
Git ist ein verteiltes Versionsverwaltungssystem. Wenn man etwas alleine oder im Team programmiert, kann man alle Änderungen nachträglich verfolgen, Rückgängig machen, Varianten erstellen (Branches) Varianten zu einer neuen Version verschmelzen (merge) etc.

Git kann aber auch für andere Textdateien verwendet werden (z.B. Songtexte verwalten)

Git hat u.a. folgende Eigenschaften
* Nicht lineare Entwicklung
** Branching und Merging - Werkzeuge zum Erstellen von Codevarianten und verschmelzen von mehreren zu einem neuen.
* Kein zentraler Server
** Nutzer haben lokale Kopien des Repository inkl Versionsgeschichte (history)
* Datentransfer zwischen Repositories
** Git kann verschiedene Protokolle nutzen (file, http(s), ssh, ftp, git)
** file:// kann für den lokalen Transfer auf dem Rechner genutzt werden
** git:// wird oft für Lesezugriffe (für fetch und clone) genutzt
** ssh:// wird oft für Schreibzugriffe im Netz genutzt.
* Sicherheit der History
** Über einen Hashbaum wird sichergestellt, dass die Versionsgeschichte nachträglich nicht geändert werden kann.
* Versionierung über alle Dateien.
** Bei Gib bekommen bei der Änderung einer Datei alle Dateien im Projekt eine neue Versionsnummer.

== Git Quickstart ==
Als Beispiel legen wir ein Verzeichnis legen wir einen Ordner mit dem Namen Songtexte an und erstellen zwei Dateien mit Songtexten. Z.B.
azzurro.txt
we-are-the-champions.txt

=== Installation von git ===
Über https://git-scm.com laden und installieren

=== Projekt mit Git verwalten ===
Wichtig für Git ist die Kommandozeile. Es gibt auch GUIs aber man sollte die Commandline Befehle einigermaßen beherrschen.
* Terminal öffnen und in das Projektverzeichnis wechseln
git init .
Erzeugt im aktuellen Verzeichnis (aktuell = .) einen .git Ordner. Dieser ist das Repository in dem alle Änderungen gespeichert werden. Das aktuelle Verzeichnis ist dein Workspace. Dort kannst du ganz normal arbeiten.
==== Git Status ====
Mit
git status
Schauen wir welche Änderungen es im Verzeichnis gibt, die noch nicht von git erfasst bzw. versioniert sind. Das sind im Moment noch alle.
==== Dateien im Repository Tracken und Versionieren - ADD & COMMIT ====
Mit add kann man git dazu bringen Dateiverläufe zu verfolgen (tracken) und mit commit kann man Versionsstände dieser Dateien festhalten.
git add azzurro.txt we-are-the-champions.txt
oder auch mit Jokern
git add *.*
Wenn man jetzt den Status abruft zeigt git an, das die Dateien getrackt werden aber noch neu und nicht commited sind.

==== Änderungen verwalten ====
Hat man etwas im Projekt verändert sieht man mit einem erneuten git status welche Dateien sich verändert haben und mit git diff zeigt git einem die genauen Änderungen an.
git status
git diff
Passt alles können wir die Datei wieder fürs committen adden und dann den Commit durchführen
git add azzurro.txt
git commit

==== Datei auf den letzen Stand zurücksetzen ====
Sehen wir mit unserem git diff, dass wir Änderungen gemacht haben die wir nicht wollen, können wir die Datei auf den letzen Versionsstand zurücksetzen:
git checkout we-are-the-champions.txt

==== Git User Profildaten Konfigurieren ====
Nicht schön im Beispiel: Git hat als User einen automatisch aus dem Mac Nutzerprofil generierten Namen erzeugt. Man kann aber auch selbst einen globalen Usernamen mit dazugehöriger E-Mail erzeugen:
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de

==== Editor konfigurieren ====
Der Editor der von Git aufgerufen wird ist nicht jedermanns sache. Möchte man Ihn ändern gibt es zwei Wege entweder über das User Config File direkt oder üer das Terminal. Hier der zweite Weg:

Terminal:
git config --global core.editor "nano"
Konfiguriert nano als Standard Editor

Wenn der Editor ein externes Fenster öffnet und nicht im Terminal ausgeführt wird, muss man git sagen es soll warten bis der Editor gespeichert und das File geschlossen hat. Sonst gibt es beim Commit eine Fehlermeldung, das keine Message vom Editor kam. Dazu nutzen wir die -w Option.
git config --global core.editor "atom -w"

== Wichtige Befehle ==
=== Repository anlegen ===
git init .
=== Status ===
git status
git status -s #shortversion
=== Dateien Tracken / Stagen ===
git add myfile.ext
git
=== Dateien Unstagen ===
git checkout myfile.ext
=== Unterschiede anschauen ===
# diff der unstaged Änderungen (noch nicht für commit vorgemerkt)
git diff
# diff der staged Änderungen
git diff --staged
git diff --cached

=== Commit (Versionieren)===
git commit
# mit inline Message
git commit -m "Kommentar zum Kommit"
# Ohne Staging alle Änderungen kommitten (add überspringen)
git commit -a -m "Kommentar"
# Kommentar neu setzen (es dürfen keine Änderungen seit dem letzten Commit passiert sein)
git commit --amend
# Datei zum Commit nachreihen wenn vergessen
$ git commit -m 'initial commit'
$ git add meineVergesseneDatei.txt
$ git commit --amend

=== Dateien aus dem Repository löschen ===
* Datei löschen reicht nicht. Datei muss aus dem Staging Bereich gelöscht werden und dann committed werden. Das geschieht mit git rm
git rm meineDatei.txt
git status
* Datei behalten aber aus dem Tracking entfernen
git rm --cached meineDatei.txt
* Dateien mit Ending .xyz entfernen
#alle Logdateien aus dem Verzeichnis /log entfernen (beachte \)
git rm log/\.log
# Alle Dateien endend mit Tilde löschen
git rm \*~

=== Dateien verschieben ===
Git verfolgt keine Verschiebungen, es gibt aber einen move Befehl. Im Prinzip macht git dann aber eine Kopie und löscht die alte Datei - mv ist also ein Shortcut.
mv README.md README

=== History ===
git log
# Unterschiede (hier max 2)anzeigen
git log -p -2
# Mit Statistik (gekürzt)
git log --stat
# Formatiert ausgeben (div Formate möglich)
log --pretty=oneline
# Eigenes Format
git log --pretty=format:"%h - %an, %ar : %s"
# Formatoptionen anzeigen:
git log --pretty=format

=== Konfiguration ===
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de
git config --global core.editor "nano"
git config --global core.editor "atom -w"

== .gitignore ==
In einer .gitignore Datei kann man mit Suchmustern regeln, welche Dateien vom Repository ignoriert werden sollen.

Beispiele für Regeln:
<pre>

# ignore Files ending wich the tilde (often used for temporary Files
*~

# ignore all .a files
*.a

# ignore files ending with .o or .a (objects archives)
*.[oa]

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf
</pre>

== Online Dienstleister ==
Github
Bitbucket
Gitlab

Git

2019-10-22T11:30:21Z

84.157.23.32: /* Commit (Versionieren) */

Git [ɡɪt] ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde.
== Links ==
https://git-scm.com/
https://www.youtube.com/watch?v=elh1y6laO8I Schönes Beginner Tutorial
https://git-scm.com/book/de/v2 //Ausführliches freies eBook
https://de.wikipedia.org/wiki/Git
[[GitHub]] - GitHub ist ein Onlinedienst, der Software-Entwicklungsprojekte auf seinen Servern bereitstellt (Filehosting). Namensgebend war das Versionsverwaltungssystem Git.

== Was ist Git ? ==
Git ist ein verteiltes Versionsverwaltungssystem. Wenn man etwas alleine oder im Team programmiert, kann man alle Änderungen nachträglich verfolgen, Rückgängig machen, Varianten erstellen (Branches) Varianten zu einer neuen Version verschmelzen (merge) etc.

Git kann aber auch für andere Textdateien verwendet werden (z.B. Songtexte verwalten)

Git hat u.a. folgende Eigenschaften
* Nicht lineare Entwicklung
** Branching und Merging - Werkzeuge zum Erstellen von Codevarianten und verschmelzen von mehreren zu einem neuen.
* Kein zentraler Server
** Nutzer haben lokale Kopien des Repository inkl Versionsgeschichte (history)
* Datentransfer zwischen Repositories
** Git kann verschiedene Protokolle nutzen (file, http(s), ssh, ftp, git)
** file:// kann für den lokalen Transfer auf dem Rechner genutzt werden
** git:// wird oft für Lesezugriffe (für fetch und clone) genutzt
** ssh:// wird oft für Schreibzugriffe im Netz genutzt.
* Sicherheit der History
** Über einen Hashbaum wird sichergestellt, dass die Versionsgeschichte nachträglich nicht geändert werden kann.
* Versionierung über alle Dateien.
** Bei Gib bekommen bei der Änderung einer Datei alle Dateien im Projekt eine neue Versionsnummer.

== Git Quickstart ==
Als Beispiel legen wir ein Verzeichnis legen wir einen Ordner mit dem Namen Songtexte an und erstellen zwei Dateien mit Songtexten. Z.B.
azzurro.txt
we-are-the-champions.txt

=== Installation von git ===
Über https://git-scm.com laden und installieren

=== Projekt mit Git verwalten ===
Wichtig für Git ist die Kommandozeile. Es gibt auch GUIs aber man sollte die Commandline Befehle einigermaßen beherrschen.
* Terminal öffnen und in das Projektverzeichnis wechseln
git init .
Erzeugt im aktuellen Verzeichnis (aktuell = .) einen .git Ordner. Dieser ist das Repository in dem alle Änderungen gespeichert werden. Das aktuelle Verzeichnis ist dein Workspace. Dort kannst du ganz normal arbeiten.
==== Git Status ====
Mit
git status
Schauen wir welche Änderungen es im Verzeichnis gibt, die noch nicht von git erfasst bzw. versioniert sind. Das sind im Moment noch alle.
==== Dateien im Repository Tracken und Versionieren - ADD & COMMIT ====
Mit add kann man git dazu bringen Dateiverläufe zu verfolgen (tracken) und mit commit kann man Versionsstände dieser Dateien festhalten.
git add azzurro.txt we-are-the-champions.txt
oder auch mit Jokern
git add *.*
Wenn man jetzt den Status abruft zeigt git an, das die Dateien getrackt werden aber noch neu und nicht commited sind.

==== Änderungen verwalten ====
Hat man etwas im Projekt verändert sieht man mit einem erneuten git status welche Dateien sich verändert haben und mit git diff zeigt git einem die genauen Änderungen an.
git status
git diff
Passt alles können wir die Datei wieder fürs committen adden und dann den Commit durchführen
git add azzurro.txt
git commit

==== Datei auf den letzen Stand zurücksetzen ====
Sehen wir mit unserem git diff, dass wir Änderungen gemacht haben die wir nicht wollen, können wir die Datei auf den letzen Versionsstand zurücksetzen:
git checkout we-are-the-champions.txt

==== Git User Profildaten Konfigurieren ====
Nicht schön im Beispiel: Git hat als User einen automatisch aus dem Mac Nutzerprofil generierten Namen erzeugt. Man kann aber auch selbst einen globalen Usernamen mit dazugehöriger E-Mail erzeugen:
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de

==== Editor konfigurieren ====
Der Editor der von Git aufgerufen wird ist nicht jedermanns sache. Möchte man Ihn ändern gibt es zwei Wege entweder über das User Config File direkt oder üer das Terminal. Hier der zweite Weg:

Terminal:
git config --global core.editor "nano"
Konfiguriert nano als Standard Editor

Wenn der Editor ein externes Fenster öffnet und nicht im Terminal ausgeführt wird, muss man git sagen es soll warten bis der Editor gespeichert und das File geschlossen hat. Sonst gibt es beim Commit eine Fehlermeldung, das keine Message vom Editor kam. Dazu nutzen wir die -w Option.
git config --global core.editor "atom -w"

== Wichtige Befehle ==
=== Repository anlegen ===
git init .
=== Status ===
git status
git status -s #shortversion
=== Dateien Tracken / Stagen ===
git add myfile.ext
git
=== Dateien Unstagen ===
git checkout myfile.ext
=== Unterschiede anschauen ===
# diff der unstaged Änderungen (noch nicht für commit vorgemerkt)
git diff
# diff der staged Änderungen
git diff --staged
git diff --cached

=== Commit (Versionieren)===
git commit
# mit inline Message
git commit -m "Kommentar zum Kommit"
# Ohne Staging alle Änderungen kommitten (add überspringen)
git commit -a -m "Kommentar"
# Kommentar neu setzen (es dürfen keine Änderungen seit dem letzten Commit passiert sein)
git commit --amend
# Datei zum Commit nachreihen wenn vergessen
$ git commit -m 'initial commit'
$ git add meineVergesseneDatei.txt
$ git commit --amend

=== Dateien aus dem Repository löschen ===
* Datei löschen reicht nicht. Datei muss aus dem Staging Bereich gelöscht werden und dann committed werden. Das geschieht mit git rm
git rm meineDatei.txt
git status
* Datei behalten aber aus dem Tracking entfernen
git rm -cached meineDatei.txt
* Dateien mit Ending .xyz entfernen
#alle Logdateien aus dem Verzeichnis /log entfernen (beachte \)
git rm log/\.log
# Alle Dateien endend mit Tilde löschen
git rm \*~

=== Dateien verschieben ===
Git verfolgt keine Verschiebungen, es gibt aber einen move Befehl. Im Prinzip macht git dann aber eine Kopie und löscht die alte Datei - mv ist also ein Shortcut.
mv README.md README

=== History ===
git log
# Unterschiede (hier max 2)anzeigen
git log -p -2
# Mit Statistik (gekürzt)
git log --stat
# Formatiert ausgeben (div Formate möglich)
log --pretty=oneline
# Eigenes Format
git log --pretty=format:"%h - %an, %ar : %s"
# Formatoptionen anzeigen:
git log --pretty=format

=== Konfiguration ===
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de
git config --global core.editor "nano"
git config --global core.editor "atom -w"

== .gitignore ==
In einer .gitignore Datei kann man mit Suchmustern regeln, welche Dateien vom Repository ignoriert werden sollen.

Beispiele für Regeln:
<pre>

# ignore Files ending wich the tilde (often used for temporary Files
*~

# ignore all .a files
*.a

# ignore files ending with .o or .a (objects archives)
*.[oa]

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf
</pre>

== Online Dienstleister ==
Github
Bitbucket
Gitlab

Git

2019-10-22T11:03:09Z

84.157.23.32: /* Unterschiede anschauen */

Git [ɡɪt] ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde.
== Links ==
https://git-scm.com/
https://www.youtube.com/watch?v=elh1y6laO8I Schönes Beginner Tutorial
https://git-scm.com/book/de/v2 //Ausführliches freies eBook
https://de.wikipedia.org/wiki/Git
[[GitHub]] - GitHub ist ein Onlinedienst, der Software-Entwicklungsprojekte auf seinen Servern bereitstellt (Filehosting). Namensgebend war das Versionsverwaltungssystem Git.

== Was ist Git ? ==
Git ist ein verteiltes Versionsverwaltungssystem. Wenn man etwas alleine oder im Team programmiert, kann man alle Änderungen nachträglich verfolgen, Rückgängig machen, Varianten erstellen (Branches) Varianten zu einer neuen Version verschmelzen (merge) etc.

Git kann aber auch für andere Textdateien verwendet werden (z.B. Songtexte verwalten)

Git hat u.a. folgende Eigenschaften
* Nicht lineare Entwicklung
** Branching und Merging - Werkzeuge zum Erstellen von Codevarianten und verschmelzen von mehreren zu einem neuen.
* Kein zentraler Server
** Nutzer haben lokale Kopien des Repository inkl Versionsgeschichte (history)
* Datentransfer zwischen Repositories
** Git kann verschiedene Protokolle nutzen (file, http(s), ssh, ftp, git)
** file:// kann für den lokalen Transfer auf dem Rechner genutzt werden
** git:// wird oft für Lesezugriffe (für fetch und clone) genutzt
** ssh:// wird oft für Schreibzugriffe im Netz genutzt.
* Sicherheit der History
** Über einen Hashbaum wird sichergestellt, dass die Versionsgeschichte nachträglich nicht geändert werden kann.
* Versionierung über alle Dateien.
** Bei Gib bekommen bei der Änderung einer Datei alle Dateien im Projekt eine neue Versionsnummer.

== Git Quickstart ==
Als Beispiel legen wir ein Verzeichnis legen wir einen Ordner mit dem Namen Songtexte an und erstellen zwei Dateien mit Songtexten. Z.B.
azzurro.txt
we-are-the-champions.txt

=== Installation von git ===
Über https://git-scm.com laden und installieren

=== Projekt mit Git verwalten ===
Wichtig für Git ist die Kommandozeile. Es gibt auch GUIs aber man sollte die Commandline Befehle einigermaßen beherrschen.
* Terminal öffnen und in das Projektverzeichnis wechseln
git init .
Erzeugt im aktuellen Verzeichnis (aktuell = .) einen .git Ordner. Dieser ist das Repository in dem alle Änderungen gespeichert werden. Das aktuelle Verzeichnis ist dein Workspace. Dort kannst du ganz normal arbeiten.
==== Git Status ====
Mit
git status
Schauen wir welche Änderungen es im Verzeichnis gibt, die noch nicht von git erfasst bzw. versioniert sind. Das sind im Moment noch alle.
==== Dateien im Repository Tracken und Versionieren - ADD & COMMIT ====
Mit add kann man git dazu bringen Dateiverläufe zu verfolgen (tracken) und mit commit kann man Versionsstände dieser Dateien festhalten.
git add azzurro.txt we-are-the-champions.txt
oder auch mit Jokern
git add *.*
Wenn man jetzt den Status abruft zeigt git an, das die Dateien getrackt werden aber noch neu und nicht commited sind.

==== Änderungen verwalten ====
Hat man etwas im Projekt verändert sieht man mit einem erneuten git status welche Dateien sich verändert haben und mit git diff zeigt git einem die genauen Änderungen an.
git status
git diff
Passt alles können wir die Datei wieder fürs committen adden und dann den Commit durchführen
git add azzurro.txt
git commit

==== Datei auf den letzen Stand zurücksetzen ====
Sehen wir mit unserem git diff, dass wir Änderungen gemacht haben die wir nicht wollen, können wir die Datei auf den letzen Versionsstand zurücksetzen:
git checkout we-are-the-champions.txt

==== Git User Profildaten Konfigurieren ====
Nicht schön im Beispiel: Git hat als User einen automatisch aus dem Mac Nutzerprofil generierten Namen erzeugt. Man kann aber auch selbst einen globalen Usernamen mit dazugehöriger E-Mail erzeugen:
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de

==== Editor konfigurieren ====
Der Editor der von Git aufgerufen wird ist nicht jedermanns sache. Möchte man Ihn ändern gibt es zwei Wege entweder über das User Config File direkt oder üer das Terminal. Hier der zweite Weg:

Terminal:
git config --global core.editor "nano"
Konfiguriert nano als Standard Editor

Wenn der Editor ein externes Fenster öffnet und nicht im Terminal ausgeführt wird, muss man git sagen es soll warten bis der Editor gespeichert und das File geschlossen hat. Sonst gibt es beim Commit eine Fehlermeldung, das keine Message vom Editor kam. Dazu nutzen wir die -w Option.
git config --global core.editor "atom -w"

== Wichtige Befehle ==
=== Repository anlegen ===
git init .
=== Status ===
git status
git status -s #shortversion
=== Dateien Tracken / Stagen ===
git add myfile.ext
git
=== Dateien Unstagen ===
git checkout myfile.ext
=== Unterschiede anschauen ===
# diff der unstaged Änderungen (noch nicht für commit vorgemerkt)
git diff
# diff der staged Änderungen
git diff --staged
git diff --cached

=== Commit (Versionieren)===
git commit
=== Konfiguration ===
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de
git config --global core.editor "nano"
git config --global core.editor "atom -w"

== .gitignore ==
In einer .gitignore Datei kann man mit Suchmustern regeln, welche Dateien vom Repository ignoriert werden sollen.

Beispiele für Regeln:
<pre>

# ignore Files ending wich the tilde (often used for temporary Files
*~

# ignore all .a files
*.a

# ignore files ending with .o or .a (objects archives)
*.[oa]

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf
</pre>

== Online Dienstleister ==
Github
Bitbucket
Gitlab

Git

2019-10-22T10:35:47Z

84.157.23.32: /* Wichtige Befehle */

Git [ɡɪt] ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde.
== Links ==
https://git-scm.com/
https://www.youtube.com/watch?v=elh1y6laO8I Schönes Beginner Tutorial
https://git-scm.com/book/de/v2 //Ausführliches freies eBook
https://de.wikipedia.org/wiki/Git
[[GitHub]] - GitHub ist ein Onlinedienst, der Software-Entwicklungsprojekte auf seinen Servern bereitstellt (Filehosting). Namensgebend war das Versionsverwaltungssystem Git.

== Was ist Git ? ==
Git ist ein verteiltes Versionsverwaltungssystem. Wenn man etwas alleine oder im Team programmiert, kann man alle Änderungen nachträglich verfolgen, Rückgängig machen, Varianten erstellen (Branches) Varianten zu einer neuen Version verschmelzen (merge) etc.

Git kann aber auch für andere Textdateien verwendet werden (z.B. Songtexte verwalten)

Git hat u.a. folgende Eigenschaften
* Nicht lineare Entwicklung
** Branching und Merging - Werkzeuge zum Erstellen von Codevarianten und verschmelzen von mehreren zu einem neuen.
* Kein zentraler Server
** Nutzer haben lokale Kopien des Repository inkl Versionsgeschichte (history)
* Datentransfer zwischen Repositories
** Git kann verschiedene Protokolle nutzen (file, http(s), ssh, ftp, git)
** file:// kann für den lokalen Transfer auf dem Rechner genutzt werden
** git:// wird oft für Lesezugriffe (für fetch und clone) genutzt
** ssh:// wird oft für Schreibzugriffe im Netz genutzt.
* Sicherheit der History
** Über einen Hashbaum wird sichergestellt, dass die Versionsgeschichte nachträglich nicht geändert werden kann.
* Versionierung über alle Dateien.
** Bei Gib bekommen bei der Änderung einer Datei alle Dateien im Projekt eine neue Versionsnummer.

== Git Quickstart ==
Als Beispiel legen wir ein Verzeichnis legen wir einen Ordner mit dem Namen Songtexte an und erstellen zwei Dateien mit Songtexten. Z.B.
azzurro.txt
we-are-the-champions.txt

=== Installation von git ===
Über https://git-scm.com laden und installieren

=== Projekt mit Git verwalten ===
Wichtig für Git ist die Kommandozeile. Es gibt auch GUIs aber man sollte die Commandline Befehle einigermaßen beherrschen.
* Terminal öffnen und in das Projektverzeichnis wechseln
git init .
Erzeugt im aktuellen Verzeichnis (aktuell = .) einen .git Ordner. Dieser ist das Repository in dem alle Änderungen gespeichert werden. Das aktuelle Verzeichnis ist dein Workspace. Dort kannst du ganz normal arbeiten.
==== Git Status ====
Mit
git status
Schauen wir welche Änderungen es im Verzeichnis gibt, die noch nicht von git erfasst bzw. versioniert sind. Das sind im Moment noch alle.
==== Dateien im Repository Tracken und Versionieren - ADD & COMMIT ====
Mit add kann man git dazu bringen Dateiverläufe zu verfolgen (tracken) und mit commit kann man Versionsstände dieser Dateien festhalten.
git add azzurro.txt we-are-the-champions.txt
oder auch mit Jokern
git add *.*
Wenn man jetzt den Status abruft zeigt git an, das die Dateien getrackt werden aber noch neu und nicht commited sind.

==== Änderungen verwalten ====
Hat man etwas im Projekt verändert sieht man mit einem erneuten git status welche Dateien sich verändert haben und mit git diff zeigt git einem die genauen Änderungen an.
git status
git diff
Passt alles können wir die Datei wieder fürs committen adden und dann den Commit durchführen
git add azzurro.txt
git commit

==== Datei auf den letzen Stand zurücksetzen ====
Sehen wir mit unserem git diff, dass wir Änderungen gemacht haben die wir nicht wollen, können wir die Datei auf den letzen Versionsstand zurücksetzen:
git checkout we-are-the-champions.txt

==== Git User Profildaten Konfigurieren ====
Nicht schön im Beispiel: Git hat als User einen automatisch aus dem Mac Nutzerprofil generierten Namen erzeugt. Man kann aber auch selbst einen globalen Usernamen mit dazugehöriger E-Mail erzeugen:
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de

==== Editor konfigurieren ====
Der Editor der von Git aufgerufen wird ist nicht jedermanns sache. Möchte man Ihn ändern gibt es zwei Wege entweder über das User Config File direkt oder üer das Terminal. Hier der zweite Weg:

Terminal:
git config --global core.editor "nano"
Konfiguriert nano als Standard Editor

Wenn der Editor ein externes Fenster öffnet und nicht im Terminal ausgeführt wird, muss man git sagen es soll warten bis der Editor gespeichert und das File geschlossen hat. Sonst gibt es beim Commit eine Fehlermeldung, das keine Message vom Editor kam. Dazu nutzen wir die -w Option.
git config --global core.editor "atom -w"

== Wichtige Befehle ==
=== Repository anlegen ===
git init .
=== Status ===
git status
git status -s #shortversion
=== Dateien Tracken / Stagen ===
git add myfile.ext
git
=== Dateien Unstagen ===
git checkout myfile.ext
=== Unterschiede anschauen ===
# diff der unstaged Änderungen
git diff
# diff der staged Änderungen
git diff --staged
=== Commit (Versionieren)===
git commit
=== Konfiguration ===
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de
git config --global core.editor "nano"
git config --global core.editor "atom -w"

== .gitignore ==
In einer .gitignore Datei kann man mit Suchmustern regeln, welche Dateien vom Repository ignoriert werden sollen.

Beispiele für Regeln:
<pre>

# ignore Files ending wich the tilde (often used for temporary Files
*~

# ignore all .a files
*.a

# ignore files ending with .o or .a (objects archives)
*.[oa]

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf
</pre>

== Online Dienstleister ==
Github
Bitbucket
Gitlab

Git

2019-10-22T10:32:26Z

84.157.23.32:

Git [ɡɪt] ist eine freie Software zur verteilten Versionsverwaltung von Dateien, die durch Linus Torvalds initiiert wurde.
== Links ==
https://git-scm.com/
https://www.youtube.com/watch?v=elh1y6laO8I Schönes Beginner Tutorial
https://git-scm.com/book/de/v2 //Ausführliches freies eBook
https://de.wikipedia.org/wiki/Git
[[GitHub]] - GitHub ist ein Onlinedienst, der Software-Entwicklungsprojekte auf seinen Servern bereitstellt (Filehosting). Namensgebend war das Versionsverwaltungssystem Git.

== Was ist Git ? ==
Git ist ein verteiltes Versionsverwaltungssystem. Wenn man etwas alleine oder im Team programmiert, kann man alle Änderungen nachträglich verfolgen, Rückgängig machen, Varianten erstellen (Branches) Varianten zu einer neuen Version verschmelzen (merge) etc.

Git kann aber auch für andere Textdateien verwendet werden (z.B. Songtexte verwalten)

Git hat u.a. folgende Eigenschaften
* Nicht lineare Entwicklung
** Branching und Merging - Werkzeuge zum Erstellen von Codevarianten und verschmelzen von mehreren zu einem neuen.
* Kein zentraler Server
** Nutzer haben lokale Kopien des Repository inkl Versionsgeschichte (history)
* Datentransfer zwischen Repositories
** Git kann verschiedene Protokolle nutzen (file, http(s), ssh, ftp, git)
** file:// kann für den lokalen Transfer auf dem Rechner genutzt werden
** git:// wird oft für Lesezugriffe (für fetch und clone) genutzt
** ssh:// wird oft für Schreibzugriffe im Netz genutzt.
* Sicherheit der History
** Über einen Hashbaum wird sichergestellt, dass die Versionsgeschichte nachträglich nicht geändert werden kann.
* Versionierung über alle Dateien.
** Bei Gib bekommen bei der Änderung einer Datei alle Dateien im Projekt eine neue Versionsnummer.

== Git Quickstart ==
Als Beispiel legen wir ein Verzeichnis legen wir einen Ordner mit dem Namen Songtexte an und erstellen zwei Dateien mit Songtexten. Z.B.
azzurro.txt
we-are-the-champions.txt

=== Installation von git ===
Über https://git-scm.com laden und installieren

=== Projekt mit Git verwalten ===
Wichtig für Git ist die Kommandozeile. Es gibt auch GUIs aber man sollte die Commandline Befehle einigermaßen beherrschen.
* Terminal öffnen und in das Projektverzeichnis wechseln
git init .
Erzeugt im aktuellen Verzeichnis (aktuell = .) einen .git Ordner. Dieser ist das Repository in dem alle Änderungen gespeichert werden. Das aktuelle Verzeichnis ist dein Workspace. Dort kannst du ganz normal arbeiten.
==== Git Status ====
Mit
git status
Schauen wir welche Änderungen es im Verzeichnis gibt, die noch nicht von git erfasst bzw. versioniert sind. Das sind im Moment noch alle.
==== Dateien im Repository Tracken und Versionieren - ADD & COMMIT ====
Mit add kann man git dazu bringen Dateiverläufe zu verfolgen (tracken) und mit commit kann man Versionsstände dieser Dateien festhalten.
git add azzurro.txt we-are-the-champions.txt
oder auch mit Jokern
git add *.*
Wenn man jetzt den Status abruft zeigt git an, das die Dateien getrackt werden aber noch neu und nicht commited sind.

==== Änderungen verwalten ====
Hat man etwas im Projekt verändert sieht man mit einem erneuten git status welche Dateien sich verändert haben und mit git diff zeigt git einem die genauen Änderungen an.
git status
git diff
Passt alles können wir die Datei wieder fürs committen adden und dann den Commit durchführen
git add azzurro.txt
git commit

==== Datei auf den letzen Stand zurücksetzen ====
Sehen wir mit unserem git diff, dass wir Änderungen gemacht haben die wir nicht wollen, können wir die Datei auf den letzen Versionsstand zurücksetzen:
git checkout we-are-the-champions.txt

==== Git User Profildaten Konfigurieren ====
Nicht schön im Beispiel: Git hat als User einen automatisch aus dem Mac Nutzerprofil generierten Namen erzeugt. Man kann aber auch selbst einen globalen Usernamen mit dazugehöriger E-Mail erzeugen:
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de

==== Editor konfigurieren ====
Der Editor der von Git aufgerufen wird ist nicht jedermanns sache. Möchte man Ihn ändern gibt es zwei Wege entweder über das User Config File direkt oder üer das Terminal. Hier der zweite Weg:

Terminal:
git config --global core.editor "nano"
Konfiguriert nano als Standard Editor

Wenn der Editor ein externes Fenster öffnet und nicht im Terminal ausgeführt wird, muss man git sagen es soll warten bis der Editor gespeichert und das File geschlossen hat. Sonst gibt es beim Commit eine Fehlermeldung, das keine Message vom Editor kam. Dazu nutzen wir die -w Option.
git config --global core.editor "atom -w"

== Wichtige Befehle ==
=== Repository anlegen ===
git init .
=== Status ===
git status
git status -s #shortversion
=== Dateien Tracken / Stagen ===
git add myfile.ext
git
=== Dateien Unstagen ===
git checkout myfile.ext
=== Commit (Versionieren)===
git commit
=== Konfiguration ===
git config --global user.name "Stephan Schlegel"
git config --global user.email dev@stephanschlegel.de
git config --global core.editor "nano"
git config --global core.editor "atom -w"
== .gitignore ==
In einer .gitignore Datei kann man mit Suchmustern regeln, welche Dateien vom Repository ignoriert werden sollen.

Beispiele für Regeln:
<pre>

# ignore Files ending wich the tilde (often used for temporary Files
*~

# ignore all .a files
*.a

# ignore files ending with .o or .a (objects archives)
*.[oa]

# but do track lib.a, even though you're ignoring .a files above
!lib.a

# only ignore the TODO file in the current directory, not subdir/TODO
/TODO

# ignore all files in any directory named build
build/

# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt

# ignore all .pdf files in the doc/ directory and any of its subdirectories
doc/**/*.pdf
</pre>

== Online Dienstleister ==
Github
Bitbucket
Gitlab

GitHub

2019-10-22T09:56:57Z

84.157.23.32: Die Seite wurde neu angelegt: „Todo“

Todo

PostCSS

2019-10-01T07:03:34Z

84.157.23.32: Die Seite wurde neu angelegt: „ https://postcss.org/ https://www.sitepoint.com/an-introduction-to-postcss/ https://github.com/pirxpilot/postcss-cli https://cssdb.org/ PostCSS möchte die…“

https://postcss.org/
https://www.sitepoint.com/an-introduction-to-postcss/
https://github.com/pirxpilot/postcss-cli
https://cssdb.org/

PostCSS möchte die Lesbarkeit und einfacheres Schreiben von CSS Code ermöglichen. Es kann Polyfills für ältere Browser erzeugen und ermöglicht wie Sass oder Less vereinfachtes Schreiben, Variablen etc. Die Funktionalität lässt sich mit Plugins erweitern. Es gibt z.B. Autoprefixer für -moz etc. Erweiterungen.

Es unterscheidet sich von Präprozessoren wie Sass oder Less durch eben diese Erweiterbarkeit, ist also eher eine CSS-Toolbox.

ProcessWire - Cookies

2019-09-30T06:59:20Z

84.157.23.32:

Siehe auch
https://processwire.com/blog/posts/pw-3.0.141/#expanded-cookie-support-in-core
[[ProcessWire - $input Variable]]

Processwire - Themes / Templates

2019-09-30T06:57:15Z

84.157.23.32: /* Links */

== Links ==
Siehe auch
* [[Processwire - Templates Grundausstattung]] (Best Practice)
* [[ProcessWire - Field Rendering]]
* [[ProcessWire - Skeleton Template]]
* [[Processwire - Template from Scratch]]
* https://processwire.com/blog/posts/pw-3.0.141/#processwire-system-urls-paths-now-more-customizable (Interessant für vo Backend wählbare Themes)

== Template Strategien ==
https://processwire.com/docs/tutorials/how-to-structure-your-template-files/

Es gibt in ProcessWire im Wesentlichen drei grundlegende Stragegien um HTML Inhalte auszugeben:
* Direct Output
* Delayed Output
* Markup Regions ([[ProcessWire - Markup Regions]])

=== Direct Output ===
Die Inhalte im Template werden direkt als Markup ausgegeben.
<pre>
<html>
<head>
<title><?php echo $page->title; ?></title>
</head>
<body>
<h1><?php echo $page->title; ?></h1>
<?php echo $page->body; ?>
</body>
</html>
</pre>
==== Direct Output mit Includes ====
Teile die man oft benötigt kann man in andere Dateien verlagern.
<pre>
<?php
include("./head.inc");
echo $page->body;
include("./foot.inc");
</pre>

==== Direct Output mit automatic inclusion ====
==== Automatic Inclusion ====
Über die ProcessWire Konfiguration prependTemplateFile und appendTemplateFile kann man automatisch bestimmte Templates einbinden .
In der config.php definiert man:
$config->prependTemplateFile = 'head.inc';
$config->appendTemplateFile = 'foot.inc';
Dann kann man im Template einfach schreiben:
echo $page->body;
head.inc und foot.inc werden automatisch hinzugefügt.

=== Delayed Output ===
Mit Delayed Output meint man, dass beim Rendering Teile des Inhalts zunächst in Variablen gespeichert werden. Am Ende wenn alle Teilbereiche gerendert sind werden die Inhalte zusammengefügt (delayed)

basic-page.php
<pre>
<?php
$headline = $page->get("headline|title");
$bodycopy = $page->body;
$sidebar = $page->sidebar;
include("./main.inc");
</pre>
In main.inc werden die Variablen dann verwendet
<pre>
<html>
<head>
<title><?php echo $headline; ?></title>
</head>
<body>
<div id='bodycopy'>
<h1><?php echo $headline; ?></h1>
<?php echo $bodycopy; ?>
</div>
<div id='sidebar'>
<?php echo $sidebar; ?>
</div>
</body>
</html>
</pre>

==== Delayed Output mit automatic inclusions ====
Oft (aber nicht immer) bietet sich auch an Teile automatisch zu inkludieren.

TODO

=== Markup Regions ===
Kombiniert die Vorteile der vorigen Strategien. Werden per Include (oder über die Funktionen für das Delayed Output) Template Dateien verknüpft, werden die Inhalte gleichnamiger id Container ersetzt oder mit Hilfe von pw- Klassen kombiniert bzw. bearbeitet.

== Allgemeine Tipps ==
Es gibt verschiedene Orte wo man Teilrenderings vornehmen kann. Wenn man sich keine Strategie zurechtlegt kann man schnell die Übersicht verlieren. Hier ein paar Vorschläge:
* Partials im partials Ordner sind für einfache Dinge geeignet und gerade beim Entwurf sehr schnell. Hier lege ich Codeblöcke an die direkt (per echo oder direkt als HTMl) ausgegeben werden. Es gibt keine Rückgaben über return. Partials sind Views. Also auf Funktionen weitgehend verzichten. Ausnahmen sind z.B. foreach Schleifen auf Felder (zumindest solange ohne Template Engine gearbeitet wird).
* Partials Dateien enden auf .inc
* In Komplexeren Projekten sollte auf sauberer Model View Controller Trennung geachtet werden.
* Layoutblöcke für Redakteure kommen z.B. in den Field Bereich. Hier kann man die Renderreihenfolge von PW ausnutzen.

== Datei Strategien ==
Wo legt man am Besten Dateien und Ordner an.
=== Basic Theme ===
<syntaxhighlight lang="php">
</syntaxhighlight>

<pre>
templates/
_func.inc (wenn benötigt)
home.php
basic_page.php
templates/partials
foot.inc
head.inc
</pre>

=== Layout Blocks (BEST PRACTICE)===
Dies ist meine (Steffs) selbstentwickelte Strategie um vielfältige Inhalte auch einem nicht Programmierer im Backend zu ermöglichen und sie dann im Frontend auszugeben.)
Anstatt den Templates fest definierte Seitenbereiche zuzuordnen und für jedes Layout ein Template zu erzeugen, kann es sinnvoll sein in '''Layout-Blöcken''' zu denken. also einzelne Gestaltungsbausteine, die der User auswählen kann und aus denen sich die Seite aufbaut.

Um dies umzusetzen bietet sich der '''Feldtyp RepeaterMatrix''' an, der beim den ProField Modul mit dabei ist. Als Alternative würde vielleicht
[[ProcessWire - Layout Blöcke mit RepeaterMatrix]]
[[Processwire - Flexible Content Type]]

== Rendering Strategien ==
=== Beispiele ===
http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/
=== Render Funktionen ===
https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#theres-also-page-gt-rendervalue

<syntaxhighlight lang="php">
// New Functions in 3.x
render()
renderValue()

// Functions for 2.x or for easy snippet inclusion (also possible with render
wireRenderFile() // mostly used for delayed output
wireIncludeFile() // for direct output
// i.e.
// returns the output of snippets/contactform.php
// the second argument is optional and will be passed to
// the called file as multiple variables with the name of the key
// also all api varables are available by default

wireRenderFile("snippets/contactform", array("stuff" => $something ));
</syntaxhighlight>
=== Delayed Output and Advanced Templates ===

'''Ordnerstruktur'''
<pre>
templates/
_func.inc
_init.inc
_main.inc
templates/partials
foot.inc
head.inc
</pre>

'''config.php'''
<syntaxhighlight lang="php">
<?php
...
$config->debug = false;
$config->sessionFingerprint = true;
$config->prependTemplateFile = '_init.php';
$config->appendTemplateFile = '_main.php';
$config->imageSizerOptions = array(
'upscaling' => true, // upscale if necessary to reach target size?
'cropping' => true, // crop if necessary to reach target size?
'autoRotation' => true, // automatically correct orientation?
'sharpening' => 'soft', // sharpening: none | soft | medium | strong
'quality' => 90, // quality: 1-100 where higher is better but bigger
);
</syntaxhighlight>

=== AJAX Driven Theme ===
config.php
// if ajax request set
$ajax = $input->post->ajax;

=== Markup Regions ===
Seit Version 3.0 die neueste Rendering Strategie. Hier werden Divs mit ids automatisch zu editierbaren Bereichen, die mit passenden Feldern im Backend befüllt werden.

[[Processwire - Markup Regions]]

== Syntax und Konventionen ==

== Module ==
[[Processwire - Writing Modules]]
=== Recommended Modules ===
<pre>
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify
</pre>

== Grundausstattung ==
Siehe [[Processwire - Templates Grundausstattung]]

== Tipps und Tricks ==
=== Templates in Backend-Auswahl verstecken ===
Manche Templates tauchen in der Auswahl der Redakteure auf obwohl es eigentlich nur Teiltemplates sind. Z.B. für eine Matrix.
Benennt man sie mit einem '''Underscore am Anfang _NameDesTemplates''' tauchen sie nicht mehr in der Auswahlliste auf.