Maak een website met Sinatra

Het gebruik van Sinatra omdat een raamwerk erg breed is, kan het worden gebruikt om tools en services te bouwen die HTTP Als gegevenstransportlaag is dit echter niet het enige dat we kunnen bereiken, er zijn momenten waarop we webpagina's moeten kunnen bouwen waar we informatie kunnen weergeven of eenvoudig gegevens kunnen vastleggen.
Deze creatie van webpagina's is tegelijkertijd heel eenvoudig en complex, omdat: Sinatra Het legt ons geen enkel patroon op bij het bouwen ervan, dus de mate van complexiteit zal afhangen van de manier waarop we werken, wat zeer positief kan zijn als we onze eigen manier van werken al hebben vastgesteld.
1- Om de voorbeelden in deze tutorial uit te voeren, hebben we een installatie van de taal nodig Robijn tenminste in zijn versie 1.9 verder.
2- We moeten ook de edelsteen hebben geïnstalleerd Sinatra en dat deze correct is geconfigureerd. Als er enige twijfel bestaat over dit proces, kunnen we de volgende tutorial raadplegen.
3- We moeten machtigingen hebben voor een map om uit te voeren Robijn, bestanden maken en manipuleren.
4- We moeten een teksteditor hebben om de inhoud van de voorbeelden te kunnen schrijven, dit kan elk type platte teksteditor zijn waarmee we een bestand kunnen opslaan .rb zoals Sublime Text of zelfs NotePad ++.
5- Eindelijk hebben we een webbrowser nodig zoals Google Chrome of Firefox waar we ons voorbeeld kunnen uitvoeren en er doorheen kunnen navigeren.
Om in de eerste plaats een website te maken, moeten we een visie hebben, een doelstelling, iets dat ons leidt en dat we als referentie kunnen gebruiken wanneer we ons ontwikkelen, dit bereiken we over het algemeen als we weten wat ons project zal kosten.
In het geval van de website die we zullen bouwen, is het doel om drie pagina's te maken, we zullen ze vermelden:

• Begin
• Over mij
• Contact

Dit leidt ons tot het feit dat het een referentiewebsite of persoonlijke blog zal zijn, op deze manier zullen we enkele technieken moeten beheersen die we in de toekomst kunnen toepassen op andere projecten. Zodat we onze voortgang sneller kunnen zien, zullen we herhalen en corrigeren terwijl we onze website bouwen.
Om te beginnen moeten we een bestand maken met de naam start.rb, dit zal degene zijn die alle logica van weergaven en routes van onze website zal bevatten, de initiële inhoud die deze heeft is de volgende:

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

In principe lijkt wat we net hebben geschreven een beetje tekort te schieten, maar laten we eens kijken wat de functionaliteit is; in de eerste plaats omvatten we Sinatra met instructie vereisenDit betekent dat we nu over alle tools kunnen beschikken die dit framework ons ​​ter beschikking stelt.
Dan hebben we het blok krijgen waarin we definiëren dat de inhoud moet worden uitgevoerd in het rootpad, de inhoud is een aanroeper erb tot :begin, waar in het laatste we moeten pauzeren om te zien wat is ERB en waarom we het gebruiken, laten we eens kijken:
Taal ERB-sjabloonZoals de titel al doet vermoeden ERB is niets meer dan het acroniem voor Ingebedde robijn o Embedded Ruby, hierdoor kunnen we sjablonen maken HTML waar we code kunnen opnemen die in taal is geschreven Robijn en hiermee zijn rekenkracht in de views te kunnen verwerken. We noemen deze bij hun naam met behulp van symbolen, wat niets meer is dan de naam voorafgegaan door een dubbele punt zoals we in de code zagen :begin.
Omdat we duidelijk zijn over het nieuwe concept dat we introduceren, gaan we nu onze eerste sjabloon maken, binnen hetzelfde bestand start.rb die we maken, gaan we de volgende code aan het einde ervan opnemen:

 __END__ @@ home Mijn eigen website

Begin
Over mij
Contact

Welkom op mijn website, hier zal ik mijn kennis van Ruby en Sinatra demonstreren

Hier hebben we verschillende dingen die we kunnen analyseren, eerst beginnen we met te vertellen Sinatra dat dit het einde van de verwerking is Robijn, hiervoor gebruiken we __EINDE__ dan met een dubbele @@ We geven de naam van de sectie aan, in dit geval start, als we ernaar kijken is het dezelfde naam als ons symbool.
We hebben eindelijk al onze HTML zonder enig probleem. Dan gaan we naar de console, we positioneren ons in de map waar we ons bestand maken start.rb en we doen het volgende:

 ruby start.rb

We kunnen de ontwikkelserver bouwen vanaf: Sinatra en we zullen het volgende zien als we naar localhost: 4567 of het poortnummer dat we voor onze server hebben opgehaald:

Zoals we merkten hebben we de HTML dat we bouwen in het rootpad dat we aangeven naar onze applicatie van Sinatra.
Een van de dingen die we altijd moeten vermijden, is dat we moeten herhalen wat we maar één keer kunnen doen en dat werkt voor verschillende dingen, in het geval van onze pagina de HTML base is iets dat we maar één keer kunnen maken, als we het vorige voorbeeld volgen om de secties van te bouwen Over mij Y Contact, we zouden alle HTML moeten herhalen, alleen het inhoudsgedeelte veranderen, iets dat ons een lang, heel lang bestand zou achterlaten start.rb.
Om dit soort ineffectief gedrag tegen te gaan, Sinatra stelt ons in staat om de lay-out te gebruiken, hiermee kunnen we een basis creëren waar we eenvoudig de wijzigingen of de dynamische code die we zullen genereren, afdrukken.
Om onze lay-out vorm te geven, gaan we in eerste instantie ons bestand aanpassen start.rb en we zullen nog een paar routes toevoegen:

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

Nu hebben we de routes die we in het menu vermelden HTML dat we eerder hadden gebouwd, dit is nog maar het begin, al Sinatra u weet waar u op moet letten als we die routes noemen, de volgende stap is het definiëren van onze lay-out en de inhoud die wordt weergegeven wanneer elke route wordt aangeroepen.
Om dit te doen, moeten we eerst een sjabloon maken en deze identificeren met de naam @@ lay-out, dan gebruik makend van Ruby Embedded met de labels gaan we een enkele titel definiëren en met de labels zullen we de inhoud afdrukken waar het nodig is. Op de plaats waar onze inhoud verandert, zullen we dit een hulpprogramma plaatsen waarmee we kunnen aangeven dat: Sinatra die zich in die ruimte bevindt waar de inhoud van de route moet worden afgedrukt.
Ten slotte definiëren we elk van onze routes en de inhoud die ze zullen dragen, dit in de logische volgorde @@route en dan de inhoud, daarmee al Sinatra weet wat hij bij elk gesprek moet laten zien. Laten we eens kijken hoe de volledige code van ons bestand eruit ziet start.rb inclusief indeling:

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

Begin
Over mij
Contact

@@begin
Welkom op mijn website, hier zal ik mijn kennis van Ruby en Sinatra demonstreren

@@over
Hallo, ik ben de maker hiervan Web, Ik gebruikte mijn vaardigheden om Ruby en Sinatra te laten werken
@@Contact
Als u meer over mij wilt weten, kunt u een bezoek brengen aan Solvetic

Zoals we kunnen zien, hebben we er maar één geschreven HTML en de rest van de inhoud is meer samengevat, daarom veel beter beheersbaar en gemakkelijker te onderhouden, laten we eens kijken hoe het eruit ziet in onze browser wanneer we vanaf het begin naar een andere route navigeren:

VERGROTEN

We hebben al een kleine maar functionele website gemaakt waar we verschillende links hebben en we hebben dynamische inhoud, waarbij we alleen een lay-out gebruiken om de structuur op te bouwen, natuurlijk missen we nog steeds de stijlen CSS en de afbeeldingen, maar dat is het onderwerp van een andere tutorial. Natuurlijk is deze stijl niet erg handig als we verbindingen gaan hebben met databases, of functionaliteiten met veel views, aangezien ons enige bestand dan erg complex zou worden om te hanteren en te onderhouden.
Hiermee hebben we deze tutorial voltooid, we hebben onze eerste website gemaakt met behulp van Robijn Y Sinatra, profiteren we van het feit dat we elke methodologie kunnen gebruiken die geschikt lijkt en we hebben een applicatie met één bestand gedaan, dit type applicatie is handig wanneer we heel eenvoudige projecten hebben en we niet willen dat ze onnodig worden verspreid , zoals het web dat uit het voorbeeld voortvloeit.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