Branching basiscommando's

Voor de voorbeelden die horen bij dit hoofdstuk, maken we gebruik van een bestaande repo. We gaan ook gebruik maken van Visual Studio Code om de bestanden te wijzigen, testen en om de Git repo op orde te houden... Zorg er dus voor dat dit programma geïnstalleerd is.

1. Installeer Visual Studio Code (indien nog niet gebeurd).

2. Open Visual Studio Code.

3. Kloon volgende repo: https://github.com/V1li/portfolio.git vanuit Visual Studio Code. (Als je niet weet hoe, bekijk dan eerst de oplossing.)

4. Open vanuit Visual Studio Code een terminal venster en kies "Git Bash" als terminal.

5. Bekijk de status en de commit log.

Oplossing

1. Open het bestand "index.html" en zet je eigen naam waar nu nog "John Doe" staat. Je zien nu dat, links bovenaan in het explorer-venster, het gewijzigde bestand een rode kleur gekregen heeft en dat de letter "M" er achter staat. Als je met de muis op dit bestand gaat staan, toont het ook dat dit bestand Modified is. Visual Studio Code, kan dus perfect met Git werken.

2. Gebruik nu het terminal venster om het gewijzigde bestand op te nemen in een nieuwe commit. Geef als omschrijving "Eigen naam ingevuld.". Kijk ook wat er gebeurd in het explorer-venster.

Namen bij branching

Vanaf het ogenblik dat een Git directory geïnitialiseerd wordt, wordt ook meteen een eerste branch aangemaakt die standaard "master" zal heten. Indien je liever een andere branch naam hebt bij het initialiseren gebruik je het -b argument.

git init -b [branchnaam]

Indien je nadien de naam van een branch nog wilt veranderen kan dit ok nog met he commando git branch -m [branchnaam_old] [branchnaam_new]

De huidige branch waarin je werkt krijg je steeds te zien wanneer je de status van de repo opvraagt. In verschillende terminals is de branchnaam ook (in blauw en tussen haakjes) te zien na de directorynaam van de repo. In de gewone

In de Windows Opdrachtpromp terminal is dit niet het geval. Wil je dan de naam zien van de branch waarin je aan het werken bent gebruik je volgend commandogit branch. Dit commando kan je uiteraard in elke termin al gebruiken. Je krijgt als resultaat dan alle branches van je repo en de branch waarin je nu aan het werken bent woordt normaak voorafgegaan door een asterik en staat in een andere kleur.

1. Verander de naam van de "master" branch naar "main"

2. Controleer de status. Moet er iets gecommit worden?

3. Verander de status opnieuw naar "master" en controleer of dit gelukt is.

Nieuwe branch maken

Om een nieuwe branch te maken gebruik je het commandogit branch [branchnaam].

Stel, we hebben zoals in het voorbeeld dat we daarnet gekloond hebben een project opgestart, en al enkele commits doorgevoerd. De situatie ziet er dan uit zoals onderstaande figuur.

1 master branch

Het voorbeeldproject bestaat uit een aantal types bestanden. Afhankelijk van het type bestand dat we gaan aanpassen, kunnen we nu volgende zaken doen:

• Inhoud toevoegen/aanpassen aan "index.html"

• Layout aanpassen in "style.css"

• Functionaliteit toevoegen/aanpassen in "index.js" en "index.html"

We kiezen ervoor om de inhoud van index.html aan te passen in de branch "master". Hiervoor hoeven we dus niets te doen.

1. Maak een nieuwe branch met als naam layout. git branch layout

2. Controleer of deze branch is aangemaakt. git branch

3. Controleer op welke branch we aan het werken zijn.

We hebben nu een situatie gecreëerd waarbij er in onze repo 2 branches zijn: "master" en "layout". We werken in de branch "master" verder op de laatste commit. De branch layout ziet er nu (nog) exact hetzelfde uit als de branch "main".

2de branch toegevoegd

1. Pas de naam "John Doe" in de webpagina aan naar je eigen naam.

2. Commit de wijzigingen met als boodschap "Eigen naam ingevuld".

3. Open de website (RMK op index.html-> open with Live Server)

We hebben nu een nieuwe commit bij de branch "master" , maar niet bij de branch "layout". De nieuw situatie is dus de volgende.

Nieuwe commit in "master"

Tussen branches schakelen (switching)

In deze tutorial gaan we er van uit dat we, vooraleer we wisselen van branch, eerst een commit uitvoeren in de actieve branch. Op die manier is zowel de working directory als de staging area ongewijzigd wanneer we de branch verlaten. Het kan ook anders, maar dit bespreken we nu niet.

Om te wisselen tussen branches gebruiken we het commando git branch branchnaam.

1. Ga naar de branch "layout". git checkout layout

2. Controleer de status.

3. Controleer welke branches er allemaal bestaan en welke actief is.

4. Bekijk het bestand index.html. Wat valt je op?

5. Open de website.

6. Ga naar het bestand "style.css" naar de block .title en zet daar de regel die ervoor zorgt dat de titel in hoofdletters staat in commentaar.

7. Commit de wijzigingen met de boodschap "Titel in klein letters".

Hieronder zie je de nieuwe situatie. Door te switchen tussen de brances "master" en "layout", keren we steeds terug naar de laatste commit van die branch. Vanaf dat punt kunnen we ook eventueel terugkeren naar vorige snapschots.

Nieuwe commit in "layout"

Branchen samenvoegen (merging)

Wanneer in de branch "master" alle inhoud is ingevuld en wanneer in de branch "layout" alle instellingen i.v.m. de layout gebeurd zijn, worden deze samengevoegd. (Uiteraard kan dit tussendoor ook al eens gebeuren.) Hiervoor ga je eerst terug naar de branche "master". Daarna gebruik je het commando git merge branchnaam.

Na het samenvoegen, hoeft er geen commit uitgevoerd te worden. Dit gebeurd automatisch met 'Merge branch [branchnaam]' als boodschap.

1. Ga naar de branch "master.

2. Voeg de branch "layout" toe. git merge layout

3. Controleer de status.

4. Controleer de log.

5. Open de website.

Alle wijzigingen van de verschillende branches zijn nu samengevoegd. We kunnen nog steeds terugkeren naar vorige snapschots. De situatie ziet er nu als volgt uit:

Merge

Conflicten bij merging

Het is mogelijk om vanuit verschillende branches aanpassingen te maken in hetzelfde bestand. Uiteraard kan je niet zomaar alles veranderen en dan verwachten dat Git alles perfect samenvoegd. Wanneer wanner je niet oplet, kunnen er op die manier al eens conflicten optreden.

1. Ga naar de branch "master".

2. Ga naar het bestand "index.html" en verander daar de tekst "Company 1" door "Don Bosco Halle".

3. Voer een commit uit.

4. Ga naar de branch "inhoud".

5. Ga naar het bestand "index.html" en voeg "Company 4" toe.

6. Voer de commit uit.

7. Merge de 2 branches.

8. Controleer of alles gelukt is.

1. Ga naar de branch "master".

2. Ga naar het bestand "index.html" en verander daar de tekst "Company 2" door "Google".

3. Voer een commit uit.

4. Ga naar de branch "inhoud".

5. Ga naar het bestand "index.html" en verander daar de tekst "Company 2" door "Microsoft".

6. Voer de commit uit.

7. Merge de 2 branches.

8. Vanuit Visual Studio Code kan je nu de "Merge editor" gebruiken om het conflict op te lossen. Zoek zelf uit hoe.

Branch verwijdenren

Een eerder gemaakte kan je terug verwijderen met het commando git branch -d [naam van de te wissen branch]. Die kan

Oefening

1. Voeg een branch "features" toe aan het project. In deze branch gaan we ervoor zorgen dat, wanneer we op de afbeelding klikken, er volgende tekst in een popup verschijnt: "Verander deze foto door een foto van jezelf". Hiervoor moeten er een aantal zaken gebeuren:

index.js

Voeg volgende code toe:

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
  }

style.css

Voeg volgende code toe:

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    top: -40%;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -80px;
   }
     
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

index.html

Verander volgende code:

        <img src="img/profile.png" alt="Profile picture" style="width: 150px; height: 150px; border-radius: 100px;">

Door:

 <div class="popup" onclick="myFunction()">
      <span class="popuptext" id="myPopup">Verander deze foto door een foto van jezelf</span>         
      <img src="img/profile.png" alt="Profile picture" style="width: 150px; height: 150px; border-radius: 100px;">
 </div>

1. Experimenteer wat in de branch "layout" met het bestand "style.css" om de layout aan te passen.

2. Pas in de branc "master" de inhoud aan, zodat dit overeenkomt met jouw profiel. Pas steeds de eerder geziene princies over Git en branching toe.