Externe weergaven en stijlen in Sinatra

Hoewel het mogelijk is om een ​​website te maken met Sinatra in een enkel bestand is dit echt een slecht idee, aangezien het probleem is dat hoe complexer onze site is, hoe moeilijker het zal zijn om in dat bestand te navigeren en daarom, wanneer er een fout optreedt, hoe moeilijker het zal zijn om het te corrigeren .
Het idee achter het gebruik van een framework zoals Sinatra het is om ons werk te kunnen vereenvoudigen terwijl we profiteren van alle tools die ons in het pakket worden aangeboden, ook door onze manier van werken te integreren, waardoor het zeer waarschijnlijk is dat het gebruik van een enkel bestand voor alles niet iets is dat is in onze filosofie.
Daarom kunnen we beginnen te werken aan externe weergaven en stijlen, zodat elke weergave die we nodig hebben in een apart bestand staat waarmee we enerzijds fouten gemakkelijker kunnen detecteren en anderzijds de structuur van ons project veel praktischer organiseren .
1- We moeten eerst taal hebben Robijn gedownload, geïnstalleerd en geconfigureerd in onze ontwikkelomgeving.
2- Internettoegang om enkele van de bronnen te kunnen downloaden die we in de voorbeelden gaan aangeven.
3- Voldoende rechten om nieuwe bestanden te schrijven en mappen te maken, naast het kunnen uitvoeren van bestanden met Robijn.
4- Een teksteditor om de code te kunnen schrijven die we voor de bestanden zullen gebruiken, het kan zijn: Sublieme tekst of NotePad ++, maar waar we bekend mee zijn, dient ons doel.
De HTML In het hoofdbestand van het project wordt het niet aanbevolen, tenzij onze site statisch of tijdelijk is en we onmiddellijk met iets naar de markt moeten gaan, aangezien, zoals we al zeiden, deze praktijk onze code niet leesbaar maakt en niet kan worden onderhouden netjes op tijd.
Om dit probleem op te lossen dat zich voordoet, Sinatra biedt ons de mogelijkheid om externe views te creëren, die niets meer zijn dan bestanden .erb waar zullen we de . plaatsen HTML overeenkomend met onze mening, waarbij: Sinatra Bij het routeren van de gemaakte weergave zal deze onmiddellijk naar deze bestanden zoeken en hiermee wordt het antwoord voor de gebruiker gegenereerd. Laten we in de volgende code kijken hoe we een externe weergave hebben gemaakt zodat ons project de gebruiker wat informatie laat zien.
Wat we eerst zullen doen, is een bestand maken met de naam opdrachtgever.rb en daar creëren we onze basisstructuur zoals we hieronder zullen zien:

 vereisen 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Tot nu toe is dit niets nieuws als we de tutorial van de eerste stappen met Sinatra al hebben gezien, wat we hier doen is de bibliotheek importeren met vereisen en tot slot definiëren we de routes die de views zullen terugkeren, allemaal met de methode KRIJGEN HTTP.
Nu gaan we een bestand maken met de naam layout.erb en we gaan het in een nieuwe map plaatsen met de naam keer bekeken die zich in dezelfde map moet bevinden als waar we ons bestand hebben gemaakt opdrachtgever.rb, laten we eens kijken welke code ons bestand zal bevatten layout.erb:

Begin
Over mij
Contact

Nu in dezelfde map keer bekeken dat we zojuist hebben gemaakt we gaan een nieuw bestand genereren om ons voorbeeld te kunnen testen, in dit geval zullen we het dit bestand noemen home.erb en het heeft deze naam omdat een van onze routes gedefinieerd in opdrachtgever.rb heeft deze naam, om in dit bestand te eindigen zullen we de volgende code plaatsen:

Welkom op mijn website, hier zien we hoe onze eerste externe kijk Sinatra werkt

Als we goed kijken, realiseren we ons dat het niet meer is dan… HTML. Als dit is voltooid, gaan we nu gewoon naar de opdrachtconsole en voeren we onze nieuwe applicatie uit, hiervoor hoeven we alleen het volgende uit te voeren:

 ruby principal.rb

Wat deze opdracht doet, is de geïntegreerde ontwikkelingswebserver verhogen WEBrick zoals we zien in de volgende afbeelding:

Zodra deze actie is voltooid, kunnen we naar onze pagina navigeren met een externe weergave, hiervoor gaan we naar het adres localhost: 4567, wat ons een resultaat geeft zoals we kunnen zien in de volgende afbeelding:

VERGROTEN

Sinds we onze eerste externe weergave hebben gemaakt, hebben we nog wat dingen uit te leggen, en dit is de structuur van het project, omdat standaard Sinatra verwacht een structuur dat als we het volgen, we niets anders zouden moeten doen, maar als het niet naar onze zin is, kunnen we het veranderen.
BasisstructuurDe basisstructuur is een hoofdbestand waarin het framework is opgenomen en de routes worden gemaakt, dan hebben we twee extra mappen, één genaamd keer bekeken welke we gebruiken om onze bestanden op te slaan .erb die overeenkomen met de weergaven en een map openbaar dat is waar we de verschillende statische bestanden zoals .css of .js zullen opslaan.
Als we de volgende afbeelding zien, kunnen we de basisstructuur waarderen die we hebben gegenereerd voor de toepassing van het vorige voorbeeld:

Hier zien we dat de hoofdmap van ons project heet sinatra, dan hebben we in de root hiervan ons bestand opdrachtgever.rb, en tot slot hebben we de twee mappen die we hebben genoemd, met de map keer bekeken weergegeven om de twee bestanden weer te geven die we in het vorige voorbeeld hebben gemaakt.
Wat nu als we de standaardnamen van niet willen gebruiken? Sinatra omdat onze applicatie om de een of andere reden andere mappen moet hebben, zoals we dit gewoon in het bestand aangeven opdrachtgever.rb als volgt:
set: public_folder, 'statisch'Met deze instructie vertellen we: Sinatra dat nu in plaats van te zoeken naar een map openbaar, moet u zoeken naar een map met de naam Static.
set: weergaven, 'sjablonen'Met deze instructie vertellen we Sinatra dat in plaats van te zoeken keer bekeken zoeken naar sjablonen.
Hiermee hebben we de manier waarop het framework met die bestanden omgaat al overschreven, waardoor we meer vrijheid hebben over ons project.
Nu we begrijpen hoe de structuur van onze applicatie werkt, gaan we de stijlen opnemen, hiervoor kunnen we verschillende benaderingen toepassen, maar het meest aanbevolen is om een ​​algemeen bestand te maken dat van toepassing is op alle weergaven. Hoewel we de aanpak van het maken van onze CSS handmatig gaan we in dit voorbeeld uitleggen hoe je Bootstrap toevoegt en zo een steviger startpunt hebt.
Allereerst moeten we het raamwerk van . downloaden Bootstrap en sla de resulterende map op in onze directory openbaar of statisch in het geval dat we de instructies voor de naamswijziging in de uitleg van de mappenstructuur hebben gevolgd. Dan in ons bestand lay-out We gaan de inhoud van het label een beetje veranderen om de nodige bibliotheken op te nemen voor de werking van Bootstrap, laten we eens kijken naar de toegepaste wijzigingen:

Zodra we de bibliotheken van Bootstrap we gaan onze wijzigen HTML Om het een structuur te geven die meer in lijn is met het raamwerk, kunnen we hiermee de verandering van stijlen op onze site directer opmerken:

Begin
Over mij
Contact

Als we kijken, hebben we een aantal dingen veranderd, allereerst in het label dat we de bibliotheken van hebben opgenomen Bootstrap, dan hebben we een stijl gemaakt die alleen van toepassing is binnen layout.erb voor elementen die de id . hebben stijl, in het geval van dit voorbeeld passen we het toe op het element en gebruiken we tenslotte de componenten van Bootstrap we voegen de klas toe nav nav-tabbladen om ons menu in de vorm van tabbladen weer te geven.
We herstarten onze server vanaf WEBrick en we voeren het opgegeven pad in waarin onze applicatie wordt uitgevoerd, dat er als volgt uit moet zien met de toegepaste wijzigingen:

Zoals we kunnen zien, hebben we effectief een stijl toegepast op onze webapplicatie gemaakt met SinatraNatuurlijk is er nog veel werk aan de winkel om deze applicatie meer in lijn te brengen met een productieomgeving, maar met deze basis is het veel gemakkelijker om te experimenteren en functionaliteiten toe te voegen die ons een veel completere ontwikkeling zullen geven.
Zo eindigen we deze tutorial, waarmee we hebben geleerd ons project te organiseren door externe weergaven te gebruiken die een mappenstructuur definiëren en onze applicatie veel aantrekkelijker maken door stijlen op te nemen, maar niet alleen gewone CSS, maar we hebben het raamwerk opgenomen Bootstrap wat ons helpt om veel aantrekkelijkere gebruikersinterfaces te maken zonder veel hoofdpijn.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven