Meetup #7, Laravel intro, og design/GUI

Laravel og design/GUI

Meetup #7

En intro til Laravel, ved Morten

Laravel is a simple framework for web application development. It attempts to make writing web applications in PHP as simple as possible.

Taylor Otwell, creator of Laravel:

Motforestillinger mot rammeverk

• Har ikke tid/ork til å lære noe nytt • Det vi har funker... • Oppdateringer? • Sikkerhet? • Vil ha kontrollen • Kanskje vi ikke

kommer helt i mål? • Er det fleksibelt nok? • Produktivitet?

Offisiell dokumentasjon er god!

Men jeg har kanskje lest ett par bøker…

Og Jeffrey Way er fantastisk!

Hva fikk meg til å ta i bruk rammeverk?

Jeg tenker at når “alle” andre bruker det, så burde kanskje

jeg også?• PHP, jQuery, Bootstrap er alle teknologier

jeg har tatt i bruk fordi “alle” bruker det.Men man trenger ikke alltid gjøre som vennene…

Andre programmerer

• Lettere for andre å akseptere de valg som er tatt når man følger et rammeverk

• Lettere å få andre til å overta/hjelpe å vedlikeholde systemet

Ikke så jalla…

• Hjemmesnekra høres så jalla ut • Et rammeverk høres så proft ut • Det handler om trygghet og følelser…

Man får mye gratis

• Alle rammeverk har kjekke features, hjelpe funksjoner som gjør utviklingen raskere.

• Cross-site request forgery blir håndter av Laravel automatisk med CSRF token (noen som husker min OWASP top 10 presentasjon?)

• Cross-site scripting (XSS) håndteres default i Laravel

Hvordan er det å ta i bruk Laravel?

• Som å ta i bruk Twitter Bootstrap eller jQuery • Nå virker det for dumt å bruke det…

• Det er som å bytte til Mac • Du må gi litt slipp på kontrollen. Men det

virker, og da trenger du ikke kontrollen… • Det er som en ny bil som har deksel over

motoren men en liten luke til å fylle spylerveske. • Det er endel “magic” shait under panseret…

HVORFOR bruke Laravel". Hvilke fordeler gir det deg som har brukt det.

• Fordelen er mange, jo mer jeg bruker Laravel, jo bedre liker jeg det…

• Eloquent lar meg slippe å skrive SQL i PHP • Blade lar meg bruke PHP kode uten å blande

med html sine hake paranteser, og så har den noen smarte løsninger…

• Struktur i koden, routing, view, controller osv. Det er ryddig og vedlikeholdsvennlig

• Mye dokumentasjon og tips er lett tilgjengelig

Hva jeg liker med Laravel

• Enkel CRUD • Views kan vises, inkluderes, sende som

epost eller bli til en pdf • Terminal kommandoene er enkle og

kraftige • Scheduler gjør det enkelt å sette jobber

til å kjører regelmessig

“Jeg er veldig interessert i å vite om dette kunne vært noe for meg.”

• Det var jeg også… • Jeg så noen videoer på Youtube og klikket

gjennom noen slides fra tidligere presentasjoner. Det så enkelt ut…

• Nå har jeg lagd et relativt stort prosjekt på Laravel, og har nå tenkt å bruke samme rammeverk på en enkel hjemmeside. Hvorfor gå tilbake til en punktert Lada…

Fordel med rammverk

• Struktur på kode • Alltid kjekke libs og

helper-functions • Hjelp med

sikkerheten: XSS, SQL injection, CSRF osv

• Mindre egen kode å vedlikeholde

• Lettere å få hjelp online

• MVC • Pretty URLs • Ikke finn opp hjulet

pånytt...

Mortens tips

• Sett deg i naming conventions før du setter opp databasen og begynner på PHP koden. Mye av magien baserer seg på streng naming convention (det er flott når du begynner nytt prosjekt)

• “The Laravel way”… det meste er tenkt på, og det er lurt å finne ut hvordan gjør man dette i Laravel. Aldri lurt å krangle med et rammeverk (selv om Laravel kan konfigureres mye)

Mange gode rammeverk…

Laravel er mest populært

En Laravel oversikt

Ruby on Rails' ActiveRecord? Well, in the PHP end of the world, Eloquent is its premier implementation.

Relasjoner er enkelt i Laravel

“Routing og restify er alltid artig”

Dynamisk id i url, som enkelt blir sendt videre til controlleren ($id)

Istedet for get, post osv kan man benytte “resource” som har alle CRUD url`er

Nesting/gruppering, her har vi authentisering, alle router inni her vil automatisk kreve loginn

Retur av array blir json :-)

Retur av view kan få med data som flettes inn

Magic shait og code-completion

• Med PhpStorm vil man gjerne ha codecompletion, og det krasjer litt med magic methods etc..

• Laravel 5 IDE Helper Generator, til unnsetning! • https://github.com/barryvdh/laravel-ide-

helper • php artisan ide-helper:generate - facades • php artisan ide-helper:models - models • php artisan ide-helper:meta - meta file

“Det som er spennende er å vite ideelogien bak det, hva får deg til å like/mislike det? Hvorfor Laravel?”

• Laravel er et rammverk på toppen av Symfony komponenter (akkurat slik vi gjør i Profundo).

• Skjule kompleksiteten • Laravel gir deg flere alternative måter å

gjøre ting på, det kommer ann på størrelse etc

• Laravel er brukervennlighet for utviklere “Det er ferdig når du ikke kan ta bort mer”

Whatever gets the job done the quickest and is the most

readable is just fine.

Top Ten Reasons To Use Laravel:

1. Documentation. 2. Laracasts 3. Intuitive Syntax 4. Practical Application

Structure 5. Artisan Code

Generation

6. Out-of-the-box User Model

7. Blade Templating Engine

8. Dependency Injection Made Simple

9. Supporting Products and Packages

10.Innovative Founder

I think Laravel is well positioned

right now because we use over two dozen

popular community

packages to build the framework.

Noen av pakkene som Laravel bruker

• Monolog, logging • Carbon, enkel dato

håndtering • Swiftmailer • Mockery • Phpunit • Doctrine • League/flysystem,

filhåndtering

• Symfony • console • debug • finder • http-foundation • http-kernel • process • routing • translation • var-dumper

Demo, først i slides,

så i PhpStorm…

Sett opp site i Mamp

Eller bruk PHPs innebygde

Nytt i v5.2, lag en kjap auth :-)

Flere db alternativer, bruker sqlite

make:auth gir oss dette

make:auth gav oss enkel registrering

rout:list gir oss alle url`er i løsningen

make:model lager en model-classe i PHP, og -m parametere lager også en migrate fil for å

sette opp en tilhørende databasetabell

Laravel har en enkel

feature for db migrering og rollback

make:controller gir oss en ny kontroller klasse, og —resource gir oss definisjoner av alle CRUD metodene som en god start :-)

FRONTEND/VISUELL DESIGN

av Morten Bergset

HVA UTVIKLERE BØR VITE OM DESIGN OG GUI

• Ja, det må virke, men det er ikke nok…

• Ingen kunder/brukere bryr seg om MVC pattern, regex, API og rammeverk. De bryr seg om det de kan se!

MIN ETTERUTDANNING: JOBBE MED DESIGNERE

Da jeg begynte å jobbe i Netlab så fikk jeg design-sjokk!

Etter å ha jobbet i dagevis med å implementere et Photoshop design, så synes jeg det var ferdig.

Men nei, det var helt forferdelig! Alt var galt, og det var totalt ubrukelig!

Bilde var 2 pixler for høyt og manglet skyggen. Overskriften var 18 og ikke 20 pixler. Og den footeren hadde feil grønnfarge!

OI, SÅ MYE JEG IKKE FORSTOD…

Man kan ha forskjellig oppfatning av hva som er pent, men der er noen prinsipper og sannheter som vi utviklere kan forholde oss til.

Jeg er fremdeles ikke kunstnerisk anlagt, men med litt forståelse blir det mye bedre.

DESIGNER BUZZWORDS• Symmetri

• Grid

• Luft

• Farger og fargesammensetning

• Fonter

• Tyngde i siden

• Dont`t make me think

• Hover effekt

• Call to action

• Konsekvent design (alle lenker, alle overskrifter osv)

• Avvik er kraftig og skal benyttes gjennomtenkt

• Design styrer adferd

GRID GIR STRUKTUR

HOVER EFFEKT ER VIKTIG BÅDE FOR DESIGN OG UX

UTEN SKYGGE

MED SKYGGE

DET ER IKKE LETT FOR ET UTRENT ØYE Å SE DISSE

FORSKJELL…

GOD DESIGN ER INTUITIV

• Logo oppe til høyre

• Menyen er lett å finne

• Piler i menyen indikerer undermeny

• Ikoner for søk og handlevogn er velkjente

AVVIK (HÅNDSKRIFT) ER BLIKKFANG OG STYRER BRUKEREN

CALL TO ACTION

ANBEFALT BOK• Denne bør alle lese!

• Ikke misbruk tiden til brukerene dine

• Man skal få det man forventer når man klikker på noe

• Ting skal være intuitivt

INGEN TVIL OM HVILKE FELT SOM ER PÅKREVD, ELLER HVA SOM SKJER NÅR MAN TRYKKER PÅ

KNAPPEN

HVOR ER MAN?FREMHEVE AKTIVT MENYPUNKT

EVT. BREADCRUMBS

SYMMETRI, LUFT, FONTSTØRRELSER, LIK AVSTAND, KONSEKVENTE FARGER

http://www.goodui.org/evidence/