Спољашњи погледи и стилови у Синатри

Иако је могуће направити веб страницу са Синатра у једној датотеци ово је заиста лоша идеја, будући да је проблем у томе што је сложенија наша веб локација, што ће бити теже кретати се по тој датотеци, па ће, када дође до грешке, бити теже исправити је .
Идеја иза коришћења оквира попут Синатра то је да можемо поједноставити наш рад док користимо све алате који су нам понуђени у пакету, укључујући и наш начин рада, због чега је врло вероватно да коришћење једне датотеке за све није нешто што је у нашој филозофији.
Зато можемо почети радити на вањским погледима и стиловима, тако да сваки поглед који нам је потребан буде у засебној датотеци с којом ћемо прво моћи лакше открити грешке, а затим организирати у много практичнију структуру нашег пројекта .
1- Морамо прво имати језик Руби преузете, инсталиране и конфигурисане у нашем развојном окружењу.
2- Приступ Интернету да бисте могли да преузмете неке од ресурса које ћемо навести у примерима.
3- Довољне дозволе за писање нових датотека и креирање фасцикли, уз могућност извршавања датотека помоћу Руби.
4- Уређивач текста који може да напише код који ћемо користити за датотеке, то може бити Узвишени текст или НотеПад ++, али оно што нам је познато служи нашој сврси.
Тхе ХТМЛ У главном документу пројекта не препоручује се осим ако је наша страница статична или привремена и морамо одмах с нечим отићи на тржиште, јер као што смо споменули, ова пракса чини наш код нечитким и не може се одржавати на време како треба.
Да би се превазишао овај проблем који се јавља, Синатра нуди нам могућност стварања спољних приказа који нису ништа друго до датотеке .ерб где ћемо поставити ХТМЛ одговара нашем виђењу, где Синатра Приликом усмеравања креираног приказа, он ће одмах тражити ове датотеке и са овим ће се генерисати одговор за корисника.Да видимо у следећем коду како смо креирали спољни приказ тако да наш пројекат приказује кориснику неке информације.
Прво ћемо направити датотеку под називом главница.рб и тамо стварамо нашу основну структуру као што ћемо видети у наставку:

 захтевају 'синатра' гет '/' до ерб: старт енд гет '/ он' до ерб: он енд гет '/ цонтацт' до ерб: цонтацт енд

До сада ово не представља ништа ново ако смо већ видели водич о првим корацима са Синатром, ево шта радимо да увозимо библиотеку са захтевају и на крају дефинишемо руте које ће се прикази вратити, све са методом ДОБИТИ ХТТП.
Сада ћемо креирати датотеку под називом изглед.ерб и сместићемо га у нову фасциклу под називом погледа који мора бити у истом директоријуму у којем смо креирали нашу датотеку главница.рб, да видимо код који ће наш фајл садржавати изглед.ерб:

Почетак
О мени
Контакт

Сада у истој фасцикли погледа коју смо управо створили, генерисаћемо нову датотеку да бисмо могли да тестирамо наш пример, у овом случају ћемо је назвати овом датотеком хоме.ерб и има овај назив јер је једна од наших рута дефинисана у главница.рб има ово име, да бисмо завршили у овој датотеци, поставићемо следећи код:

Добродошли на моју веб страницу, овдје видимо како функционише наш први спољни приказ Синатре

Ако пажљиво погледамо, схватамо да то није ништа друго до ХТМЛ. Када је ово завршено, сада једноставно идемо на командну конзолу и покрећемо нашу нову апликацију, за то морамо само да извршимо следеће:

 рубин принципал.рб

Ова наредба подиже интегрисани развојни веб сервер ВЕБрицк као што видимо на следећој слици:

Када се ова радња обави, можемо отићи на нашу страницу са спољним приказом, за то ћемо отићи на адресу лоцалхост: 4567, што нам даје резултат попут оног који можемо видети на следећој слици:

ЕНЛАРГЕ

Будући да смо створили свој први вањски приказ, још увијек имамо неке ствари за објаснити, а ово је структура пројекта, будући да је према заданим поставкама Синатра очекујте структуру да, ако је следимо, не бисмо требали радити ништа друго, међутим, ако нам се не свиђа, можемо је променити.
Основна структураОсновна структура је главна датотека у коју је укључен оквир и креиране руте, затим имамо две додатне фасцикле, једну под називом погледа који користимо за складиштење датотека .ерб који одговарају приказима и фасцикли јавности где ћемо складиштити различите статичке датотеке попут .цсс или .јс.
Ако видимо следећу слику, можемо ценити основну структуру коју смо генерисали за примену претходног примера:

Овде видимо да се зове главна фасцикла нашег пројекта синатра, онда у корену овога имамо нашу датотеку главница.рб, и на крају имамо две фасцикле које смо поменули, са фасциклом погледа приказане за приказ две датотеке које смо креирали у претходном примеру.
Шта ако не желимо да користимо подразумевана имена за Синатра будући да из неког разлога наша апликација мора имати друге мапе, јер то једноставно означавамо у датотеци главница.рб као што следи:
сет: публиц_фолдер, 'статицОвим упутством кажемо Синатра да сада уместо да тражи фасциклу јавности, требало би да потражите фасциклу под именом Статиц.
сет: виевс, 'темплатесОвим упутством кажемо Синатри да уместо претраживања погледа потражите шаблоне.
Овим смо већ преписали начин на који оквир рукује тим датотекама, дајући нам више слободе у односу на наш пројекат.
Сада када разумемо како функционише структура наше апликације, укључићемо стилове, за то можемо применити неколико приступа, међутим најпрепоручљивије је стварање опште датотеке која се односи на све приказе. Иако можемо применити приступ стварања нашег ЦСС ручно, у овом примеру ћемо објаснити како додати Боотстрап и тако имати солиднију полазну тачку.
Пре свега морамо преузети оквир Боотстрап и сачувајте резултирајућу фасциклу у нашем директоријуму јавности или статичан у случају да смо следили упутства за промену назива у објашњењу структуре фасцикли. Затим у нашој датотеци лаиоут Мало ћемо променити садржај ознаке да бисмо могли да укључимо потребне библиотеке за рад Боотстрап, да видимо примењене промене:

Након што смо укључили библиотеке Боотстрап променићемо наше ХТМЛ Да бисмо му дали структуру у складу са оквиром, овим можемо директније приметити промену стилова на нашој веб локацији:

Почетак
О мени
Контакт

Ако погледамо, променили смо неке ствари, пре свега у ознаку коју смо укључили библиотеке Боотстрап, онда смо створили стил који се примењује само унутар изглед.ерб за елементе који имају ид стил, у случају овог примера, примењујемо га на елемент и коначно користимо компоненте Боотстрап додајемо разред нав нав-табс да бисмо приказали наш мени у облику картица.
Рестартујемо наш сервер са ВЕБрицк и уносимо обезбеђену путању на којој се наша апликација покреће, што би требало да изгледа овако са примењеним променама:

Као што видимо, ефикасно смо применили стил на нашој веб апликацији направљен са СинатраНаравно, има још много посла да би ова апликација била више у складу са производним окружењем, међутим са овом базом је много лакше експериментисати и додати функционалности које ће нам омогућити много потпунији развој.
Тако завршавамо овај водич, са којим смо научили да организујемо наш пројекат користећи спољне погледе који дефинишу структуру фасцикли и чине нашу апликацију много атрактивнијом уградњом стилова, али не само обичног ЦСС -а, већ смо уградили и оквир Боотстрап што нам помаже да створимо много атрактивније корисничке интерфејсе без много главобоља.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен