Tip:
Highlight text to annotate it
X
hello
welcome to the first video tutorial using the sproute web framework
in this video we're going to create a basic blog from scratch
all code used in this tutorial is available when you purchase the framework
at http://sproute.io
so first things first; unzip your package.
Sproute comes with
offline documentation
and example code
like the blog
CMS, facebook-clone
The three main concepts
in sproute
are models
which is your data
views
which are basically HTML files
that you want to render
and a controller
let's get started
the first thing you wanna do is edit config.js
you always given it a name
let's call it: myblog
the next thing you wanna do
is adam admin account
suspend applications come with user accounts built-in
but every effort must have at least one admin account
this is usually treated the first time
stratification has run
so this is only a temporary
key in the conflict
we wanna name which
locally
nepal sweat
from a secure possibly can pick a color
so once we run this product location
it'll automatically create an admin account
so after that happens we'll want to remove the ski
because that poses a security threat
now instead of the control
control maps
the request urals two views
so the first what what i had to cancel home page
uh... this is to notify one slash
and
will call the view
sprout will automatically look for if you called home under the views
directory
the defoe extension
file extension for views uh... espy artie
let's create that now
dot espy all teacher
which spread
so that we can just add any old html in here
if you don't like using the s_p_ out t extension
you can change it and you come fic
typically the home page of blokes list all the articles
to get data from the inbuilt database
need to use a template tak
the one particular is called gets
not templates in sprout denoted by a two curly braces
darkening patent the closing
all data is accessed through or your l
which is prefixed with
for this insane is
retrieve
all-race onto the articles collection
and put it in this articles variable
what we have that data we will live forever
and display it an h_m_o_
to do that means that you check
this tag
says
three each article that we were tree from the database
put it in this variable article
so inside the strike
we can access properties from article
we haven't defined the day yet
and will do that as a model
so let's just make some assumptions
each article have a title
page article will have a body
now let's go ahead and define the data
data as defined in j some files on the models
we already did
name to the collection articles
in the home page
thirty specify two of the fields which what title
the datatype
of title and body
all strings
which is just text
now we have our articles model
we can create update and lists
all data from articles
but first we have to give it some content
so we need another page
little allowance too fat content
and the coldest one
dot espy lofty
because all data is accessed and created
request u r else
you can use basic html
to insert date
now we have a simple page that will post an article
week on access this yet
because we haven't had it in the control
so we need to add a route
will save right
will go to you
a skeptic
finality actually csh try this out
failure platform sprout comes with
script files i can stop the sub for you
if you all know s sex old-line x
you can use the scripts onto the posix
if you're in windows
their sebab files of the windows directory
*** to run installed or fat or installer s_h_
which i think up to do
so it's not a subtle
because i don't know if sex bogota posix
and run
starts up
essar is now running on port eight thousand which is the default port
you can change this in the conflict as well
and then we go
the home page
took us to harm dot espy opti
but we have two articles yet so none of the modestly
now what about outright
there it is
now let's use a newly created view
to at nautical
lou
distance one article
narratives
to create an article
and articles collection
a nice feature is to add
specter to
query problem
so upon the creates it
though automatically redirect you
so we wanna go back to the home page after we create a new article
risk of the home page and see if i have a page
now lists the article
there it is
and you article
lets out a couple more
coast when the two
but haven't we had some html
uh... old
it or medically redirected aspect of the home page
you'll notice
that they check mailed in or end up
this is a security feature by default
when you print variables to escape the html
to prevent
excess s
or cross site
if you can't trust the data
which we can't because i'm writing it
you can use a little hash before printing the variable
and it was escaped dhtml
fairness in bold
now let's add some more complex routes
we want to make its so when you click on an article title it'll actually take you
to a page dedicated to that post
will be did you view
which will call
now that we call it article
espy t
so this is a more complicated ralph
well we have a placeholder
so basically saying
and u r l
that has something to after
article if i can type in
that value
inside i_d_
where we can access it interview
this will help us when we clicked on individual article
will use ideas that article
and put it in the u r l
we want disrupt point to the newly-created view which was particle
so if a we continue
let's just have a look at it in the browser
so this is all well article data
and you can see some love field sifting automatically generated
the created field which is a unix timestamp when the road
was actually created
and underscore i_d_ which is a unique identified
freo individual
article page
we want to just select one of these articles
based on the i_d_ because it's a unique identifier
to do this
we use a similar method too
grabbing all the articles except out of filter
muscle to is tidy
and the value
and his as you can see
belatedly select
but it's still in a race
whereas we just want to ask
so there's a muscle feature called
he said that to true
it'll take it out that array
let's take this entire euro
except instead of hot cutting this lady
we want to use tidy
from the control
tax s that
the i_d_ property from the ralph
we use parent
this colin
as a way of saying
that this
is a variable
and will evaluate that
another way to do it is using
dole sign
and parentheses
that's just so boring actually
try and put in parents dot i d
like this
we wouldn't want that to happen
and we when he's a single because triple trick
and put it in article variable
for use
little depot
we can see what they were turned
phots grab at sidi
when what i find the control
you'll need to restart the server
narratives
thorough to look a bit better than that
this is just a deep of you
let's go back to a view
print to pdf protrude
so we want
and heather
when the title to be in a header
the field was titles article booktitle
and we want to the body
which was article took buddy
and remember we won the channel to evaluate to put a little passion for
them
ups and remove debug
buried here
now we have and index page after page that lists all the articles
a single article page
and upright page
politic at halton evident to me we should add some leaks
going back to our home page
we want and
so that the use of actually clicked on the title
and remember allright
how route was particle
slash and the i_d_
so article
on school tidy
refresh that
so what's up some navigation
to avoid having to put the navigation every single view
we can create their view
cold heather
or whatever you like
and included in every other view
that way we'll have to specify at the navigation wants
let's take out the heading from
index page
commitment to the head
just so we can get home
elite
in his place we want to include that do you you can actually include sub use
conclude header
dot sprout
now we go
we can do this on other pages as well
right
and topical
district
now we go
all the content and have a is now
in all those files
so this is an very secure right now because anybody could just write an
article
so we have to do disease inbuilt commissions and user accounts and sprout
to do this unit edit missions dot jason
is another jason file
a route specifies
and access level
what this is saying
is only allow an admin
to visit the right page
so free to restart the subtle
and try to desserts
right article
we don't have to mission
it won't let us do it
you can write commissions for every piece of data
in the system
so we may not be able to reach this page but we still have access to the dot the
base we can still
so to prevent
we need to add another wrapping up a commission stodgy some file
disallowing orly allowing admin to post article
in fact we can be general and say
arlene admin composed anything understated
that prevents anybody
adding all the terry data
sophia member from the beginning of the dirtier
we created
and admin account coldly with postulate alot
which actually believe these things going to keep these in
so here we go again
let's create and you
political organ
cabana basic form
mentioned elliott that sprout comes with
user accounts
also comes with some a_p_ eyes
flighty to login register and look out
and again we must at its control
so these connection access this page
cities of puts in logan
than to the logan
votes we saw the subtle to make sure that works
narratives
let's answer
and maybe
or add elite to look at it
their dates so let's look at
the e_p_a_ will automatically give us back
the name how role and al unique i_d_
is the country feature
concur to ukraine
so we're already logged in
but still has a slogan
we can add a bit of logic to the header file
to tell it only display this few if you're not looked at
so we've added a bit of logic that states
if the user is logged in
display a load up on
if they're not
display login button
let's try that out now
so now we ship should be able to access the bright
we can access the right b
if we look out
again we could do a redirect that let's get that for now
to go back
we have have permission
your blog is secure
so that's chito real ones
if you'd like to build your own
you can buy the framework from sprout dot org
or click the links in the description
be sure to catch the next review where we would be building content management
system all cm s