IntroductionWelcome| 00:04 |
Hi! I am Tom Geller and this is
Drupal 7 Advanced Training.
| | 00:08 |
This course is designed for anybody
who's already gotten started with the web
| | 00:11 |
development software Drupal, and now
wants to go a little bit further.
| | 00:15 |
We'll continue along the line
started in Drupal 7 Essential Training.
| | 00:18 |
Pointing and clicking through
Drupal's web-based interface to improve your
| | 00:21 |
site's interactivity and appearance, but
we'll also go beyond Drupal's point and
| | 00:26 |
click interface to see UNIX commands
that are useful for advanced system
| | 00:30 |
administration, and you'll see a Drupal
specific tool called Drush that lets you
| | 00:34 |
maintain your site faster
and easier than ever before.
| | 00:38 |
You'll get experienced with such
advanced modules as Rules and Context, which
| | 00:43 |
give you programmer-like control
without having to write a single line of code.
| | 00:47 |
You'll see how to create flexible
layouts and designs as well, using the Panel's
| | 00:51 |
module and starter themes that help
give your site a completely unique look.
| | 00:56 |
Finally, we'll answer the bigger
questions, such as how do I plan my site and
| | 01:00 |
what's the best way to
make Drupal part of my career?
| | 01:03 |
Let's get started with
Drupal 7 Advanced Training.
| | 01:07 |
| | Collapse this transcript |
| Planning your Drupal career| 00:00 |
It might seem strange to talk about career
matters in a course that's really all technical.
| | 00:05 |
However, the demand for Drupal talent
is really high right now, so it's a good
| | 00:09 |
time to look at it, and how to take advantage
of all the opportunities that are out there.
| | 00:13 |
The job site Indeed.com shows a few
thousand Drupal jobs out there right now, and
| | 00:18 |
you can see that just by entering
Drupal up here, and searching. Wow!
| | 00:22 |
That's nearly 3,000 jobs as I'm
recording this and there's probably more
| | 00:25 |
when you're watching it.
| | 00:26 |
If you go down to the bottom of the
screen and click Trends, you can see that
| | 00:30 |
Drupal is doing pretty well
compared to other web platforms.
| | 00:33 |
For example let's enter in here Drupal,
vignette, which is a closed source
| | 00:38 |
program, and Joomla, and let's take a look.
| | 00:41 |
And there you go, Vignette is actually
going down in its popularity. Joomla is
| | 00:45 |
still doing pretty well, but
Drupal is really taking off.
| | 00:48 |
Now let's add Dreamweaver, which of
course has been in the market for many years.
| | 00:53 |
And then finally let's
just take a look at WordPress.
| | 00:55 |
That gives you a pretty good idea of
how they all compare in the market.
| | 01:00 |
But the one big difference is
the salary level for each of these.
| | 01:04 |
Let's just take Drupal and WordPress.
| | 01:07 |
So we click Salaries, enter Drupal, and
then add comparison and enter WordPress.
| | 01:13 |
And there you go, and that really makes sense.
| | 01:16 |
While Wordpress powers far more sites
than Drupal, most of those are hobbyist
| | 01:20 |
blogs or for very small companies.
| | 01:23 |
So Drupal is big and it's getting bigger.
| | 01:26 |
The question is how can you take
advantage of the opportunities that are
| | 01:30 |
coming down the pike?
| | 01:32 |
Here are some tips that I've learned
from watching people for five years succeed
| | 01:35 |
in the Drupal community.
| | 01:38 |
First, narrow your focus by figuring
out what skills you want to develop.
| | 01:42 |
For example, I'd like to build sites
that pull together data in interesting
| | 01:46 |
ways, other Drupalists specialized
in theming, mapping, search engine
| | 01:50 |
optimization, and dozens of other things.
| | 01:53 |
If you enjoy it, get good at it.
| | 01:55 |
Second, consider going after a
market that can use those skills.
| | 02:00 |
One problem many people have when they
first start a business is that there are
| | 02:03 |
just too many prospective customers.
| | 02:05 |
But once you choose a small focus slice,
you can market yourself in ways that
| | 02:09 |
appeal to that specific slice.
| | 02:11 |
I know successful Drupal companies that
build sites for nonprofit organizations,
| | 02:15 |
others that build for churches, and
some that build for local governments.
| | 02:19 |
Look for areas where you already
know people, and where they already know
| | 02:23 |
you, and start there.
| | 02:25 |
Third, people want to see what you've
actually done, so start building your web sites now.
| | 02:31 |
Find a reason to create
sites that show off your talents.
| | 02:34 |
It's one thing to say, trust me, I'm
good at what I do, and quite another to
| | 02:38 |
just give out some URLs, so
people can see for themselves.
| | 02:41 |
Fourth, get involved with the Drupal community.
| | 02:45 |
Especially when you're first starting
out, you'll need it to figure out what
| | 02:48 |
you're good at, and who you can call
for the things that you're not so good at.
| | 02:52 |
A lot of work comes through the community
and people tend to hire those people they know.
| | 02:56 |
So get to know them and give
them an opportunity to know you.
| | 03:00 |
For some tips on how to get yourself
out there in the community, see the video
| | 03:04 |
"Joining the Drupal community" in my
Drupal 7 Essential Training course.
| | 03:08 |
Connected to that is stay in touch with
trends both within the Drupal community
| | 03:12 |
and in the business world at large.
| | 03:14 |
Remember that Indeed.com screen you saw earlier?
| | 03:17 |
One of the big hiring trends is for
people who understand HTML5, which is a
| | 03:22 |
major topic in the Drupal world as well.
| | 03:25 |
Keeping an eye out for how the two of
them combine and what trends are coming
| | 03:29 |
up, will help ensure your
skills and contacts stay current.
| | 03:33 |
Really a Drupal career is just like
any other, except that there is a lot of
| | 03:37 |
opportunity right now.
| | 03:39 |
Just keep plugging away at it, keep
yourself out there, and keep being known
| | 03:42 |
for doing good work.
| | 03:44 |
| | Collapse this transcript |
|
|
1. Moving from Development to ProductionComparing development and production environments| 00:00 |
So, you've built a Drupal site on your home
computer, and are ready to show it to the world.
| | 00:05 |
Then you upload everything, and
you get a big fat error message.
| | 00:09 |
That's because in reality there are
quite a few differences between running
| | 00:13 |
Drupal on your development computer
at home and running it in production as
| | 00:16 |
they say on a server.
| | 00:18 |
And believe me, I've gone through
this experience many, many times and this
| | 00:22 |
video is the result of some
of that painful experience.
| | 00:25 |
I very quickly went over some of these
points in the video, launching a Drupal
| | 00:28 |
site in the Drupal 7 Essential Training course.
| | 00:31 |
Now I'll explain a bit more in detail.
| | 00:33 |
I think of the differences in the following way:
| | 00:36 |
As you know a Drupal site is basically
made up of the files and the database,
| | 00:41 |
and each of those have a structure to
them and permissions, and these vary
| | 00:45 |
slightly between your
development machine and production machine.
| | 00:48 |
Let's go through each of these one at a time.
| | 00:50 |
We'll start with the file structure.
| | 00:52 |
First, I'll go back to my development
machine and take a look at a site that I
| | 00:55 |
already installed, this lynda site here.
| | 00:58 |
We go down here into the Sites folder,
which is as you know the place for all of
| | 01:01 |
the files specific your site go, and we
see that there's the all folder, and as
| | 01:07 |
you know that's where you
usually put your modules and themes.
| | 01:09 |
The default folder, which if you don't
have a multisite setup, is where all of
| | 01:14 |
your files go and then
there's this lynda folder.
| | 01:17 |
Now it's called lynda, because I named
the site lynda, but of course, it would
| | 01:19 |
have whatever name you actually gave your site.
| | 01:22 |
When you use Acquia Dev Desktop, which
is what I use to install this site, you
| | 01:26 |
end up with a multisite setup by default.
| | 01:29 |
So you'll have this lynda folder.
| | 01:31 |
Now when you installed using a different
system, including on those web hosts, it
| | 01:35 |
will simply all going into the default folder.
| | 01:37 |
So be sure to keep an eye on that, and
one thing you'll notice is that every
| | 01:41 |
one of these folders, except for the all folder,
has this defaults.settings.php to start with.
| | 01:48 |
Then when you've actually installed,
the active folder will have settings.php.
| | 01:53 |
That's where you can tell where
the active site actually lives.
| | 01:56 |
The second thing to watch
out for is hidden files.
| | 01:59 |
I'm just going to go up a level here,
and open up this window a little bit and
| | 02:03 |
we see all of the files
that are in our Drupal site.
| | 02:07 |
However, we don't see any of the
files that start with the (.) dot.
| | 02:10 |
If we switch over and look at the same
folder through the terminal window that
| | 02:13 |
is using UNIX command line, we
actually see something different.
| | 02:18 |
I'm going to go to my desktop where it lives,
and now list it with all of the files shown.
| | 02:23 |
So we scroll up to the top.
| | 02:25 |
We have this .gitignore and .htaccess.
| | 02:28 |
I'll show you later on in the
course how to use the UNIX command line.
| | 02:32 |
The important thing is when you're on
your development machine, whether it's
| | 02:35 |
Mac or Windows, by default
they don't show these dot files.
| | 02:39 |
But when you're using the UNIX command
line, whether it's again on your Mac or
| | 02:44 |
on a web host, you do see them.
| | 02:46 |
So you have to be careful and make
sure that you actually copy those over.
| | 02:50 |
If you want to see those files in
Windows or Mac, I recommend that you go
| | 02:53 |
online to Google or something like that,
and say show dotfiles, and let's say
| | 02:58 |
in Finder, that's for the Mac, and then you
can get some instructions on how to do that.
| | 03:03 |
It's actually fairly complicated.
| | 03:04 |
So your best bet is to simply copy
over the entire folder, which contains the
| | 03:08 |
dotfiles, and then they'll be copied as well.
| | 03:11 |
The third difference that I want to point
out has to do with where Drupal puts the files.
| | 03:16 |
Let's go to a site that I've
installed on the web server.
| | 03:19 |
That's lynda.tomgeller.com.
| | 03:22 |
Then we go upto Configuration,
scroll down to File system.
| | 03:28 |
These paths here, Public file system
path and Private file system path, as well
| | 03:32 |
as the Temporary directory, might
be different when you move from the
| | 03:35 |
development environment to
the production environment.
| | 03:38 |
This shows up most often, because when
you load the site, graphics don't show up.
| | 03:42 |
Simply put, Drupal doesn't
know where to look for them.
| | 03:45 |
So if you have that problem, take a
look at this setting after you've moved
| | 03:48 |
your Drupal site over.
| | 03:50 |
So that takes care of
the structure of the files.
| | 03:53 |
Let's move on and talk a
little bit about file permissions.
| | 03:56 |
I talk more about UNIX file permissions in
the video about using the UNIX command line.
| | 04:01 |
If you need to make tweaks on the
server, watch that video along with the
| | 04:04 |
Permissions section of the UNIX for
Mac OS X Users course, also on lynda.com.
| | 04:10 |
Usually everything will be fine when
you move files from development into
| | 04:13 |
production and then back again,
and Drupal actually fixes some file
| | 04:16 |
permission problems itself.
| | 04:18 |
The real issue arises if your web host
doesn't give you all the permissions you
| | 04:22 |
need to administer your Drupal files,
and when it does happen, there's really
| | 04:26 |
nothing you can do, but to send a
support request to the web host.
| | 04:29 |
They all set up their permissions a bit
differently, and I'm afraid I can't help
| | 04:32 |
you get pass that problem.
| | 04:34 |
Moving on, we have the
structure of the database.
| | 04:36 |
There's not much to say about the
database structure itself, because it
| | 04:39 |
generally remains the same between
development and production environments.
| | 04:43 |
I have run into two issues having
to do with database names however.
| | 04:48 |
First, if you use a database name with
an underscore character in it, you may
| | 04:51 |
have problems because it has a
special meaning in your MySQL program.
| | 04:56 |
Second, some web hosts force you to fit
your database names into a specific format.
| | 05:00 |
I'll show you what I mean.
| | 05:01 |
I'm going to go to my own setup on my web
host, which happens to be webfaction.com.
| | 05:07 |
If I go down to Databases and then
Create new database, you'll notice up here
| | 05:12 |
that it forces me to start every
database name with tgeller and underscore (_).
| | 05:18 |
That's why I've had to use the name
tgeller_lynda, and as you'll see later on,
| | 05:22 |
tgeller_commerce, and other words
like that, in this course when I'm doing
| | 05:26 |
things on the web host.
| | 05:27 |
You'll learn how to tell Drupal about a
changed database name in the video about
| | 05:31 |
configuring the settings.php file.
| | 05:34 |
The last thing to look at
is database permissions.
| | 05:37 |
This is an area where lots of problems crop up.
| | 05:40 |
You might not be able to create
or delete databases for example.
| | 05:43 |
Or maybe you're limited in
how big a file you can import.
| | 05:47 |
The two videos in this course about
moving databases, along with the one on
| | 05:50 |
server configuration files,
should get you pass those issues.
| | 05:54 |
If not, once again, talk with an
administrator at your web host.
| | 05:58 |
If you don't run into any problems
moving between your development and live
| | 06:01 |
environments, then
congratulations, you are in the slim minority.
| | 06:06 |
But whatever problems you do encounter,
it's important that you get used to
| | 06:09 |
solving them so that you
can move among the too easily.
| | 06:13 |
Those skills will remove barriers to
running your site using proper procedures,
| | 06:17 |
which in turn will free you to be
bolder with how you build your sites.
| | 06:22 |
| | Collapse this transcript |
| Configuring your settings.php file| 00:00 |
The Drupal software comprises over a
thousand files and directories, but for the
| | 00:05 |
most part you only have to concern
yourself with a handful inside of the sites
| | 00:08 |
folder and the most important file
inside there is the settings.php file.
| | 00:14 |
It primarily tells Drupal where to find
the site's database, but it also has the
| | 00:18 |
potential to do much more.
| | 00:20 |
The file itself is over 500 lines long,
but only about 60 of them are functional
| | 00:24 |
code and of those 60 lines only about 35
are actually active, while the rest are
| | 00:29 |
commented out, so don't fret
even though it looks intimidating.
| | 00:33 |
We'll look through the whole file with
special emphasis on the most important
| | 00:36 |
parts, and we'll start by looking at
the settings.php file as appears in a
| | 00:41 |
traditional installation;
| | 00:43 |
that is where it's on the web host, as
opposed to using Acquia Dev Desktop on
| | 00:46 |
your development computer.
| | 00:48 |
I'm already logged in here. Take a look
at where we are. Here's our lynda site in
| | 00:53 |
the site's folder and in default.
| | 00:55 |
If I list it, and there is my settings.php file.
| | 00:59 |
I'll edit it by going nano settings.php,
and again, you to learn more about this
| | 01:04 |
in the videos about using the UNIX command line.
| | 01:07 |
So let's start up here at the top.
| | 01:09 |
All of the lines that you see that start
with stars like these are just comments;
| | 01:13 |
they don't actually affect your site,
so let's start scrolling through lots
| | 01:17 |
and lots of comments.
| | 01:19 |
The first part has to do with a multi-
site installation, and we talk more about
| | 01:23 |
that later on in this course.
| | 01:24 |
But again, this is just documentation;
| | 01:26 |
it talks about how to set them up
with the different options that are
| | 01:29 |
possible and so forth.
| | 01:30 |
The second group of
comments is the database settings;
| | 01:33 |
this is the most important part.
| | 01:35 |
We'll scroll down, and again, you can
read these at your leisure, but when we
| | 01:40 |
get way down at the end, we see the
actual settings for our site; here, where it
| | 01:45 |
stops being commented.
| | 01:47 |
The most important parts are the
database name here, which in my case it's
| | 01:50 |
tgeller_lynda, the username, the
password, and then some of the other ones,
| | 01:55 |
which you usually don't need
to change. Let's continue on.
| | 01:59 |
Then we have quite a few more comments.
| | 02:01 |
This part is actually also important
if you don't have user ID Number 1.
| | 02:06 |
User ID Number 1 you might remember,
is the one that gets installed when you
| | 02:09 |
first create your Drupal site, so if
somebody else installs the site and you
| | 02:13 |
don't get that password, you're
going to have to change this line here,
| | 02:16 |
update_free_access, so that it says TRUE.
| | 02:20 |
Otherwise, you won't be able to run
update PHP on your site, and you won't be
| | 02:23 |
able to bring it up to the
latest version of Drupal, for example.
| | 02:26 |
This can be very touchy though,
because if you change this value to TRUE, like
| | 02:31 |
so, and then forget to change it back,
it means that other people may be able to
| | 02:35 |
make changes to your site, and
that's actually a big security hole.
| | 02:38 |
So if you do change this, go right
back in and change it back to FALSE.
| | 02:43 |
Now we come to a section of settings
that very few people ever find a reason to
| | 02:46 |
change, so I'm going to go
through them really, really quickly.
| | 02:49 |
As you'll see though, there is a fair
amount of explanation in the settings.php
| | 02:53 |
file itself, in the form of documentation.
| | 02:56 |
The first thing here has to do with
how Drupal comes up with random numbers
| | 03:00 |
this drupal_hash_salt.
| | 03:02 |
You generally again will
never have to change this.
| | 03:05 |
However, do note up here that you can
store this in an external file, if your
| | 03:09 |
security setup demands that.
| | 03:11 |
The next two settings are for troubleshooting.
| | 03:13 |
They'll generally only change them if
your site isn't working properly when
| | 03:16 |
you first install it.
| | 03:18 |
We first come to the base URL, and you
notice that this is also commented out;
| | 03:22 |
by the way, both the hash mark here
and the star are used for commenting
| | 03:26 |
in files of this type.
| | 03:28 |
Continuing down we have a section
of PHP settings, and a lot of these
| | 03:32 |
are ini_set values.
| | 03:35 |
Basically if you don't know what these
are, don't change them, and if you do
| | 03:39 |
need to change them, take a good look at
the documentation that comes with them.
| | 03:42 |
The cookie_domain variable, you only
change if you're doing cross-site tracking
| | 03:47 |
and that will happen if you have a
complicated setup for your domains.
| | 03:50 |
If for example, you're hosting your site
on one domain, but it's being called up
| | 03:53 |
on another domain, and so forth, and
you wanted all to be tracked in the same
| | 03:57 |
cookie, that would allow somebody who
logs on to one site, to also get into the
| | 04:01 |
other site without having to re-login.
| | 04:04 |
Then we come to a section
called Variable overrides.
| | 04:07 |
Quite honestly I've never heard of
anybody using this, because pretty much
| | 04:11 |
anything that you do here can
also be done in the Drupal interface.
| | 04:15 |
The only reason I could imagine changing
these is if you're setting up a Drupal
| | 04:18 |
distribution where you're handing off a
specially configured copy of Drupal and
| | 04:23 |
you want to make sure that these values get in.
| | 04:25 |
As we continue down we have quite a
few settings that are really geeky.
| | 04:29 |
There is this reverse proxy
configuration, a whole bunch about page caching,
| | 04:34 |
file compression, and so forth.
| | 04:36 |
Basically, if you don't know what
they are, then don't touch them.
| | 04:39 |
Next, we come up to String overrides.
| | 04:41 |
This is something you
actually might find yourself using
| | 04:43 |
if you just want to change one or two little
things in the site, the way that it states things.
| | 04:48 |
For example, if instead of saying forum,
you wanted to say Discussion board, you
| | 04:52 |
would uncomment this line here;
| | 04:54 |
these two are just given as examples.
| | 04:57 |
Now I wouldn't use this if you're
doing some large amount of changes. If for
| | 05:01 |
example you're translating a
site from English into French.
| | 05:04 |
To do that, see the video
"Internationalizing sites" in my Drupal Gardens
| | 05:08 |
Essential Training course.
| | 05:10 |
Continuing down, we have a way to block
certain IP addresses for security reasons.
| | 05:14 |
It's possible to change how 404 pages
are displayed; that is, when people can't
| | 05:19 |
reach a certain page in your site, you
can make them go a lot faster by changing
| | 05:22 |
these configurations, but generally
speaking, you only have to do that for
| | 05:26 |
extremely busy sites, where you want
to make sure that calling up those pages
| | 05:29 |
isn't taking up a lot of resources.
| | 05:32 |
The last section is this Authorized
file system operations. You can change this
| | 05:37 |
if you want to prohibit Drupal from
using the update function for example.
| | 05:41 |
This is what allows Drupal to update
modules and do other things on the file system.
| | 05:46 |
Again, generally speaking, you won't
ever touch it, and that's the end of
| | 05:49 |
the settings.php file.
| | 05:51 |
The last thing I want to point out is
how Acquia Dev Desktop puts the most
| | 05:55 |
crucial part of this file,
| | 05:57 |
that is, the database address, at the very end.
| | 06:00 |
So to show that I'm going to switch
over to my Desktop. Close out this
| | 06:04 |
window. Open up my desktop installation.
Go to sites, and lynda, and there's
| | 06:08 |
my settings.php file.
| | 06:10 |
I'm going to open that in a text editor,
which in this case is Text Wrangler.
| | 06:14 |
Scroll down to where the
database settings normally would be;
| | 06:17 |
and you'll notice it's actually
just an empty line in this case.
| | 06:21 |
That gets overridden by what Acquia
Dev Desktop puts at the end of the file
| | 06:24 |
here, and you'll notice it
puts up this big warning:
| | 06:27 |
don't edit anything below this line.
| | 06:30 |
Well, the fact is, you may have to edit
what's below that line in order to make
| | 06:34 |
it work on your web host when you move your
development environment. So there you go.
| | 06:39 |
Once we broke it all down,
it wasn't so bad, was it?
| | 06:42 |
As you saw, there are very few parts
that you really have to change, and in
| | 06:44 |
fact, the only part I've ever
personally touched was the database settings and
| | 06:48 |
the update free access setting.
| | 06:50 |
Earlier I stated the rule I
follow for the rest of the settings.
| | 06:53 |
Simply, if you don't completely
understand it and you have a specific reason
| | 06:57 |
to change them, just leave them be, or find
someone experienced in making such changes.
| | 07:02 |
In any case, be sure to back up your
settings.php file before making any changes,
| | 07:07 |
so that you can roll it
back if anything goes wrong.
| | 07:10 |
| | Collapse this transcript |
| Running multiple sites from one Drupal installation| 00:00 |
Now we come to a subject that's long
intimidated me personally, running multiple
| | 00:04 |
web sites from one Drupal installation.
| | 00:07 |
But I have to tell you, once I started doing it;
| | 00:10 |
I found that it wasn't really all that hard.
| | 00:12 |
But the devil really is in the details,
and unfortunately those details vary
| | 00:16 |
from web host to web host.
| | 00:18 |
What I'll show you here though gives
you the ammunition you need to do the
| | 00:21 |
Drupal part of it, both on
local and remote computers.
| | 00:25 |
Let's start with the local version.
| | 00:27 |
We're using Acquia Dev Desktop
available at http://www.aquia.com/downloads.
| | 00:32 |
It has multisite capabilities built in.
| | 00:35 |
So what I'm going to do now
| | 00:36 |
is I'm going to download a copy of
Drupal and show you how that works in
| | 00:39 |
Acquia Dev Desktop.
| | 00:40 |
To do so, I first go to http://drupal.
org/project/drupal and then download it.
| | 00:49 |
Close out the window and expand that file.
| | 00:52 |
And I'm going to rename this multisite.
Now inside this folder I'll go into our
| | 00:57 |
sites folder and then duplicate this
default folder and rename that site1.
| | 01:03 |
That will become one Drupal site,
although you could repeat this process over and
| | 01:08 |
over again with site2, site3, and so forth.
| | 01:11 |
The next step is to import it. Go down
here and to More and then click Import.
| | 01:16 |
I'll choose the site path, which in this case
is that multisite folder that I just named.
| | 01:20 |
Now here's where things were a
little different from what you're used to.
| | 01:24 |
Under Subsite, it'll look inside
that folder and see what's there, and it
| | 01:28 |
sees that there is in fact a site1
folder, so we select that. Then we create
| | 01:32 |
a new database and do everything else the
way we usually do, site1 and site1 and Import.
| | 01:39 |
It'll ask you if you want to overwrite
what's already there and we say Yes, and
| | 01:45 |
there we are, and then we'd just
continue the installation as normal.
| | 01:48 |
Again, you could do this site2, site3,
and so forth, and it will all be working
| | 01:52 |
off of the same code base of Drupal.
| | 01:54 |
The advantage to that is you
only have to update Drupal once.
| | 01:58 |
Now I'll show you how it works on a
web host. The tricky part and one that I
| | 02:02 |
won't be to show you is that you have
to arrange to have your domain setup for
| | 02:05 |
both sites to point at the same
web root, that is, your Drupal folder.
| | 02:10 |
You can do that using whatever system
your web host has for Domain Name Services,
| | 02:14 |
or sometimes it's called DNS.
| | 02:16 |
And what you should do is contact your
Helpdesk at that web host if you have any problems.
| | 02:20 |
But I have already taken care of that.
| | 02:22 |
I have a blank folder right now at lynda3
.tomgeller.com, and also one at lynda4.
| | 02:29 |
I've also created two separate empty
databases, one of them is tgellar_lynda3
| | 02:37 |
and the other is tgellar_lynda4.
| | 02:40 |
This is the key, although you're only
using one set of files you have to have
| | 02:45 |
separate databases for each site that you set up.
| | 02:48 |
And that makes perfect sense because
you'll remember the database is what
| | 02:51 |
stores the content and the content
will be different between the two sites.
| | 02:56 |
Once again, I'm going to go in an
install Drupal into both of those folders.
| | 03:00 |
Go to drupal.org/project/druple, Copy Link
Location, and then go to my Terminal program.
| | 03:09 |
I am already in the folder lynda3 and if
we list what's there, it's already empty.
| | 03:15 |
Go through my usual procedure to get
the file. I just say wget and paste, and
| | 03:22 |
extract it, and so on.
| | 03:25 |
You'll see in more detail how to do this
in the videos about using the command line.
| | 03:30 |
And there is our installation.
| | 03:31 |
Once again, we go into the sites folder.
| | 03:36 |
As you saw a minute ago, we have an
all and the default folder. I am going to
| | 03:39 |
copy that default folder twice; once
to be lynda3 and once to be lynda4.
| | 03:46 |
You'll notice I gave them the names
lynda3.tomgeller.coml and, of course, the
| | 03:50 |
other one, I'll name lynda4.tomgeller.com.
| | 03:53 |
This is very important, because it tells
Drupal exactly which folder goes with which domain;
| | 03:59 |
you have to give the name, so that it
matches the domain that you're going to use.
| | 04:02 |
I'll then go into each of those and
rename the settings.php file correctly. Move
| | 04:08 |
default, so its simply settings.
php, and do the same for lynda4.
| | 04:15 |
If we go up one level, we now see that
we have all, default, and then the two
| | 04:20 |
folders we just created, which
are actually copies of default.
| | 04:23 |
One important thing that you should
be very careful of is not to remove
| | 04:26 |
the default folder.
| | 04:28 |
Even though you're not going to use it
directly, that is, no site is going to live in it;
| | 04:31 |
Drupal expects to see it there,
so simply leave it as it is.
| | 04:35 |
So now we have two databases and two
separate folders inside that site's folder,
| | 04:39 |
one for lynda3 and one for lynda4.
| | 04:41 |
Let's go to lynda3, and complete the
installation. This happens in the way
| | 04:48 |
that you're used to.
| | 04:49 |
Now that we have lynda3 setup,
I'll do the same thing for lynda4.
| | 04:53 |
Go To lynda4.tomgeller.com and go
through the installation process.
| | 04:59 |
Remember, we're using a different
database; in this case its tgellar_lynda4, and
| | 05:05 |
we hve success. lynda4.geller.com is
running this site, and, of course, lynda3 is
| | 05:10 |
running the different site.
| | 05:11 |
There is one thing that I want to warn
you about though. It's when you install
| | 05:15 |
modules using that system that's built
into Drupal. If we click and go up to
| | 05:19 |
Modules and use Install new module, I
am just going to grab the Token module,
| | 05:23 |
which is a common one from drupal.org,
the drupal.org/project/token. Install
| | 05:33 |
new module and Install.
| | 05:38 |
So the question is where
exactly was that module installed?
| | 05:41 |
I am going to go back to my Terminal
screen, clear the window, see where we are.
| | 05:48 |
Now I did that while looking at the lynda3 site.
| | 05:50 |
But it didn't actually
go into the lynda3 folder;
| | 05:53 |
instead it went into the all folder.
| | 05:56 |
You can see that by going to cd
all/ and modules, and there it is.
| | 06:03 |
That means that it's
available to both lynda3 and lynda4.
| | 06:07 |
That's very important because if you
want to make a module only available to
| | 06:10 |
one of the sites, what you would do is
instead manually install it in that site itself.
| | 06:16 |
So I'd go in to lynda3 and
create a folder here called modules.
| | 06:23 |
You might have to go up one level in
order to give yourself permission to create
| | 06:27 |
that folder called modules.
| | 06:28 |
I won't go into that right here;
| | 06:30 |
instead I'll talk about it in
the video about UNIX permissions.
| | 06:34 |
The last thing that I want to mention
is that you might have had to change some
| | 06:37 |
permissiosn along the way.
| | 06:39 |
So once you're done making all of
these installations, go back and make sure
| | 06:42 |
that they are secure.
| | 06:43 |
The enclosing folders;
| | 06:45 |
that is, sites and defaults, and
lynda3 and so on, should be 755; that is, only
| | 06:51 |
the owner can write, but
everyone can read and execute.
| | 06:54 |
The settings.php file,
however, should have 644 or less.
| | 06:59 |
I am covering the very top of this,
but you can learn more about multisite
| | 07:03 |
installations on the drupal.org site.
| | 07:05 |
To go to it, it's http://drupal.org
/documentation/install/multi-site.
| | 07:14 |
I know that was a lot to learn, especially
if you're not used to the UNIX command line.
| | 07:18 |
The basic things remember are that
each site gets its own database and folder
| | 07:22 |
inside the sites directory.
| | 07:24 |
That the folders have to have the same
name as the site's domain, and that the
| | 07:28 |
site's all folder is shared among all of them.
| | 07:32 |
| | Collapse this transcript |
| Troubleshooting common issues| 00:00 |
In the four years that I've been
making Drupal videos for lynda.com, I keep
| | 00:04 |
getting the same questions.
| | 00:06 |
It's not that there is anything
specific to lynda.com students, but rather
| | 00:09 |
they are just repeating the questions that a
lot of Drupal users face at one time or another.
| | 00:14 |
Here are the top five.
| | 00:16 |
Number one, I can't get Acquia Dev
Desktop to work, so I can start building a
| | 00:20 |
site on my local computer.
| | 00:21 |
This one often shows up when you
first install Acquia Dev Desktop.
| | 00:25 |
It has a lot of causes, and quite honestly
I've given up trying to figure them all out.
| | 00:30 |
Instead, I have a simple solution,
just remove Acquia Dev Desktop from your
| | 00:34 |
computer, and then reinstall it. If
we go back to our desktop and find the
| | 00:38 |
program, you'll see that it
sometimes called acquia-drupal.
| | 00:42 |
That's the way it's installed
by default on the Mac here in the
| | 00:45 |
Applications folder.
| | 00:46 |
If you open up that folder, you'll see it
actually comes with an uninstall program.
| | 00:51 |
So that's a lot better than
just dragging it to trash.
| | 00:54 |
The one problem with that is that you
may lose the work that you've already
| | 00:57 |
created with Acquia Dev Desktop.
| | 01:00 |
That's because Acquia Dev Desktop
stores the databases in a peculiar place.
| | 01:04 |
But if you haven't started building
your site yet, you won't lose anything,
| | 01:07 |
and the trick works pretty often. If
you have started building it though that
| | 01:11 |
leads us to the second problem. Help.
| | 01:14 |
I just lost all my work.
| | 01:16 |
The solution here is a little forethought.
| | 01:18 |
Just make regular backups
especially of your site's database.
| | 01:22 |
I've recently started using the Backup
and Migrate module for that because it
| | 01:26 |
has an automated backup schedule.
| | 01:28 |
You can get that module by going to
drupal.org/project/backup_migrate.
| | 01:35 |
I have a video about using this
module later on in the course.
| | 01:39 |
I also have another one about using
Drush, which is a command-line program that
| | 01:43 |
also has a backup function.
| | 01:45 |
Going on toward our third common problem.
| | 01:47 |
My site is down, and I don't
understand the error message!
| | 01:50 |
For this, copy a section of the error
message's text and then do a search on
| | 01:55 |
it, both on the drupal.org site and then
also in a general search engine such as Google.
| | 02:00 |
You'll want to pick a section of the
error that's descriptive but generic.
| | 02:03 |
Let's look at an example. Here is an
error that somebody came across and they
| | 02:08 |
posted the issue to the drupal.org site,
and down here you see exactly what they
| | 02:12 |
saw on their screen, a really big ugly error.
| | 02:16 |
Well, if I wanted to solve this, I
simply copy a little bit of the text here, go
| | 02:21 |
into Google and do a search, and
actually as you can see from the highlighted
| | 02:25 |
one this first hit is what
actually gives the answer.
| | 02:29 |
You might want to add some quotes on it
though, if you get too many things that
| | 02:33 |
lead to the wrong place because there
could be other programs such as WordPress
| | 02:36 |
or Joomla that have the same error.
| | 02:38 |
So you'll have to play around a bit.
| | 02:40 |
But I've found that this works
very well at figuring out such errors.
| | 02:43 |
Sometimes, however, you get errors that
don't stop your site from working but they
| | 02:48 |
do keep throwing warnings up on your screen.
| | 02:51 |
To solve this, there are
several things you can try.
| | 02:53 |
The first one is to clear your browser's cache.
| | 02:56 |
Here in Safari you'll find
that under Safari > Empty Cache.
| | 03:02 |
In Firefox it's a little bit more
complicated, you have to go up to Tools,
| | 03:06 |
and then Clear Recent History, click a few
buttons, look at the details and so forth.
| | 03:10 |
If you have a problem in doing this,
just look at the documentation for the
| | 03:12 |
browser that you're using.
| | 03:14 |
The second thing to try is
to clear the site's cache.
| | 03:17 |
We do that by going into a site.
| | 03:19 |
Here I have my own site up, tomgeller.
com. Go up to Configuration, then down
| | 03:24 |
to Performance, and then click the button
Clear all caches -- that often solves the problem.
| | 03:30 |
The third thing to check is to make
sure that your site's code is up to date.
| | 03:34 |
You do that by going up to
Reports and then to Available updates.
| | 03:38 |
My site is already up to date, but
if you see anything over here that's a
| | 03:41 |
yellow warning sign or especially a red
X that means it is actually a security
| | 03:46 |
problem. But in any case you want the
latest copy of all of the things you're using.
| | 03:50 |
From there if you do find anything, you
would click Update and then follow the
| | 03:53 |
procedure that you saw in
Drupal 7 Essential Training.
| | 03:56 |
The fourth thing to try is to run update
.php; easy enough to do, you just go up
| | 04:01 |
to your domain name/update.php and
continue the procedure again as you saw in
| | 04:08 |
Drupal 7 Essential Training.
| | 04:10 |
That brings us to the last kind of
issue that people come across, and I have no
| | 04:14 |
better way to describe it
than GAAAAAAAAAAAHHHHHHH!
| | 04:17 |
When this happens to you,
relax; talk to the community.
| | 04:21 |
They are very helpful really, for tips
on how to do that, See the video "Getting
| | 04:26 |
help with Drupal issues" in my
course Drupal 7 Essential Training.
| | 04:30 |
Finally, I'd like to point you to a
part of the drupal.org site that's set up
| | 04:33 |
specifically to help you through such problems.
| | 04:36 |
A little reading, a little
communication, and a little sleuthing will almost
| | 04:39 |
certainly lead you to the light.
| | 04:42 |
| | Collapse this transcript |
|
|
2. Hosting Drupal on the WebUnderstanding your Drupal site's place on the web| 00:00 |
Because this is an advanced course, I
assume that you already know how to set up
| | 00:04 |
your Drupal site just fine.
| | 00:06 |
But to make sure that there are no gaps
in your knowledge I want to go back and
| | 00:10 |
talk a little bit about how
your site works on the web.
| | 00:13 |
A lot of what I'm going to tell you
is sort of a repeat of what's in James
| | 00:17 |
Williamson's excellent course Web
Design Fundamentals, so if you have any
| | 00:20 |
questions at all, go back and watch that course.
| | 00:23 |
Basically you start with your Drupal
web site and then you upload it to a web
| | 00:28 |
host; then site visitors access your
site by calling it up from that web host.
| | 00:33 |
Now let's go a little deeper, if
you're like me you create the site on a
| | 00:37 |
laptop or desktop computer and then
upload it to the web host, which is
| | 00:41 |
basically just a specialized computer
that's always connected to the Internet;
| | 00:45 |
that's the best way to do things.
| | 00:46 |
Although you can edit your site directly
on the web host, all your mistakes will
| | 00:50 |
be visible to the world as you work;
| | 00:53 |
also you won't have a
backup if anything bad happens.
| | 00:57 |
Let's go even deeper. Your web
host actually has several functions;
| | 01:02 |
first, it stores your files.
| | 01:04 |
For Drupal, there are two kinds, the
Drupal program itself and individual files
| | 01:09 |
that are part of your site, mostly
that's graphics and files you offer for
| | 01:13 |
download, but it could also
include custom programming and such.
| | 01:17 |
The web host also stores your database
that's all of your site's content, except
| | 01:22 |
for those files that I just mentioned.
| | 01:24 |
The web host has several programs that
make this all work and a web server to
| | 01:29 |
send it all out into the world.
| | 01:31 |
Now let's go even deeper.
| | 01:34 |
Assuming your site has its own domain
name, there is still one more layer of
| | 01:37 |
stuff between you and your site.
| | 01:40 |
You have to register the domain name
and you have to configure something called
| | 01:44 |
domain name server, so that whenever
somebody calls up, example.com, they know
| | 01:49 |
where they are going to go.
| | 01:50 |
Pretty complicated, huh?
| | 01:52 |
But here's the good news.
| | 01:53 |
You don't have to worry about most of it.
| | 01:57 |
First, you only have to take care of the
domain stuff once and probably your web
| | 02:01 |
host will do it for a fee.
| | 02:03 |
Second, the web host also takes
care of running the web server and all
| | 02:07 |
the necessary programs.
| | 02:09 |
That's the AMP stack, made up of Apache,
MySQL, and PHP, that's the A, M, and P of AMP.
| | 02:17 |
That leaves you with just the files in
the database to worry about, plus a way
| | 02:21 |
to synchronize them between your
development environment and the web host.
| | 02:25 |
And that's what the next few videos are about.
| | 02:27 |
These are issues that aren't widely
discussed within the Drupal community,
| | 02:31 |
largely because people in it tend to
be system administrators and they assume
| | 02:35 |
that you already know them.
| | 02:36 |
But I didn't when I got started with
Drupal, so I hope that this section helps
| | 02:40 |
you avoid some of the
hurdles that I experienced.
| | 02:44 |
| | Collapse this transcript |
| Selecting a web host| 00:00 |
Going out to find a place to put your
web site can be a truly daunting task.
| | 00:04 |
That's because pretty much any
competent system administrator can set up a
| | 00:07 |
web hosting company.
| | 00:09 |
So the selection is extremely broad.
| | 00:11 |
This video talks about what makes a
good web host for Drupal sites and how
| | 00:15 |
to avoid common traps.
| | 00:17 |
First, here are the quick details for
those of you who are already web geeks.
| | 00:21 |
You can find the complete
list of requirements by going to
| | 00:24 |
drupal.org/requirements.
| | 00:27 |
But in brief, here they are.
| | 00:29 |
You'll need at least 15 megabytes of disk space.
| | 00:32 |
Now that's for the program only.
| | 00:34 |
Any files that you have such as
downloadable files or graphics are going to add
| | 00:38 |
to that requirement.
| | 00:40 |
You'll need atleast 32
megabytes of memory dedicated to PHP.
| | 00:44 |
You'll need Apache 1.3 or better,
or Microsoft IIS as your web server.
| | 00:48 |
You'll need PHP 5.2.5 and MySQL 5.0.15, and
again, you can use later versions if you like.
| | 00:57 |
If you're running Drupal 6 or an
earlier version of Drupal, then you may have
| | 01:01 |
different requirements, and again,
take a look at that on drupal.org.
| | 01:05 |
So that's what web geeks need to know.
| | 01:07 |
But let's say this is the first time
you've gone shopping for a web host.
| | 01:11 |
I break down the criteria into five categories:
| | 01:14 |
Capabilities, Access, Speed, Price,
and what I call the Human factor.
| | 01:20 |
Let's look at each of these.
| | 01:22 |
Although drupal.org gives certain
requirements, realistically, you're going to
| | 01:25 |
need quite a bit more.
| | 01:27 |
I like to have at least 1 gigabyte of
disk space, 10 gigabytes of bandwidth per
| | 01:31 |
month, and 64 megabytes of PHP memory.
| | 01:35 |
To give you some comparison, I
typically run about 5 to 10 sites at a time,
| | 01:38 |
including tomgeller.com, which is fairly active.
| | 01:42 |
It also includes a lot of graphics
and downloadable files, and yet my total
| | 01:45 |
disk usage is only about 3 gigabytes, and I
use about 10 gigabytes of bandwidth per month.
| | 01:51 |
When you shop, also make sure that you
can create databases and that you can
| | 01:55 |
create more than one database,
because, of course, you'll need a different
| | 01:58 |
database for each site you have.
| | 02:00 |
I prefer to get a host that will allow
me unlimited databases so I know that I
| | 02:03 |
can build as many sites as I want.
| | 02:06 |
Take a look also to see how large a
database you can transfer, and I'll show you
| | 02:09 |
how that works in just a minute.
| | 02:11 |
Also, make sure that the
server versions are up to date.
| | 02:14 |
Generally speaking, any large
web host will keep them up to date.
| | 02:18 |
But just to be sure, compare them
against the numbers that you see at
| | 02:19 |
drupal.org/requirements.
| | 02:20 |
Of course, you'll need a way to transfer
files between your development machine,
| | 02:26 |
that is, your desktop machine, and the web host.
| | 02:29 |
I like to use SSH or FTP, although
some places use something called cPanel or
| | 02:34 |
some other web-based system.
| | 02:36 |
I'll show you how those work a
little bit later on in this course.
| | 02:39 |
But again, my personal preference is for
these basic tools that have been around
| | 02:43 |
and used in the UNIX world for many years.
| | 02:46 |
On that note, I prefer to have access to the
command line myself, that is, for UNIX or LINUX.
| | 02:51 |
It may be up to your preference, but I
found that that's the best way to have
| | 02:54 |
the largest amount of control.
| | 02:56 |
Finally, you need to have access to a
database either through the command line
| | 03:00 |
or phpMyAdmin, which is a web-based program.
| | 03:03 |
I prefer to have both forms of access, of course.
| | 03:06 |
One thing you'll notice about
phpMyAdmin is that its appearance differs quite a
| | 03:11 |
bit from one web host to the next.
| | 03:12 |
For example, here's what it
looks like using Acquia Dev Desktop.
| | 03:17 |
It's version 3.3.9. Where as here's
what it looks like on my own web host,
| | 03:21 |
3.4.9, and as you can see, the
interface looks quite different.
| | 03:25 |
The features should be pretty much the same.
| | 03:27 |
However, you won't have all of the same
access depending on which web host you use.
| | 03:32 |
Again, going back to Acquia Dev
Desktop, I have this option to create a new
| | 03:36 |
database which I don't have on my web host.
| | 03:39 |
I have to do that through their web interface.
| | 03:41 |
One important part is how large a
database you can import as I mentioned.
| | 03:46 |
If you click Import here, you see
that right up here, in this case, it's 20
| | 03:50 |
megabytes, whereas here on my local
machine, it's actually quite a bit smaller,
| | 03:55 |
but I can change that since I have
access to the MySQL settings files.
| | 04:00 |
As for web site speed, this is
something that's really hard to judge until
| | 04:03 |
you're actually on the web host and get
a sense of how easy it is and how fast
| | 04:08 |
it is to access your site.
| | 04:10 |
What I recommend you do
is ask around a little bit.
| | 04:12 |
See what your friends are using and
whether they're happy with it, and how
| | 04:15 |
much they're paying.
| | 04:16 |
There are three types of hosts generally.
| | 04:19 |
The most common and the
cheapest is shared hosting.
| | 04:22 |
Shared hosting is kind
of like having a roommate.
| | 04:24 |
You theoretically each have full use
of the apartment, but that doesn't mean
| | 04:28 |
anything if he's always hogging the TV.
| | 04:30 |
I personally use shared hosting though.
| | 04:33 |
It's slow and it's not as reliable,
but my sites are fairly small and
| | 04:37 |
personal and they don't really
need the high reliability that company
| | 04:40 |
web sites might need.
| | 04:41 |
The second version is dedicated hosting.
| | 04:44 |
That's more like having your own house.
| | 04:46 |
You have full control but you
also have full responsibility.
| | 04:50 |
Technically speaking, there may be
others on the server, but you have a specific
| | 04:54 |
server slice and a certain
guaranteed level of reliability and speed.
| | 05:00 |
The third kind is cloud.
| | 05:02 |
This is a sophisticated form of sharing
pooled resources and it's sort of like
| | 05:06 |
shared hosting, but generally at a
higher level and with certain safeguards in
| | 05:10 |
place to make sure that you
have all of the speed you need.
| | 05:14 |
It's sort of like owning a condo.
| | 05:16 |
You're guaranteed use of a certain
space, but a neighbor's pool party can
| | 05:19 |
still inconvenience you.
| | 05:21 |
Just to give you a sense of how much
all these things cost -- and these are in
| | 05:24 |
2012 dollars by the way in the
United States -- shared hosting starts at
| | 05:28 |
around $10 a month.
| | 05:30 |
You can find it for a little bit less,
you can pay a little bit more, but that's
| | 05:33 |
about what you'll end up paying.
| | 05:34 |
Dedicated hosting starts at $50 a
month and can go way, way, way up.
| | 05:39 |
Cloud hosting is similar.
| | 05:40 |
Again, it starts at about $50 a
month and can go up to the sky really.
| | 05:44 |
But whatever one you choose, make
sure that you can take your data with
| | 05:47 |
you whenever you go.
| | 05:48 |
You don't want to be locked in to any one host.
| | 05:51 |
The last factor to consider is the human factor.
| | 05:55 |
This is how well the people who are
running the web host understand Drupal.
| | 05:58 |
Is it really a Drupal web host?
| | 06:00 |
Do they advertise that they host Drupal sites?
| | 06:03 |
Do they offer Drupal support?
| | 06:05 |
That's very uncommon, by the way, where
they'll actually help you debug your Drupal site.
| | 06:09 |
Do they have any special tools or features?
| | 06:12 |
Quite a few web hosts, for example, have
a one-button install for Drupal so you
| | 06:16 |
don't actually have to download it and so forth.
| | 06:18 |
You just say point it here, click
the button, and suddenly you have a
| | 06:20 |
Drupal site set up.
| | 06:22 |
The last thing to look at is -- are they
actively involved in the Drupal community?
| | 06:26 |
There are two reasons why they should be.
| | 06:28 |
One is because they're more likely to
be informed about Drupal and updated in
| | 06:32 |
such a way that they know that they
can keep your Drupal site running well.
| | 06:36 |
The other is that they may be giving
back to the Drupal community, which means
| | 06:40 |
Drupal itself continues to get stronger.
| | 06:42 |
Some places to take a look
for that are drupal.org/hosting,
| | 06:46 |
drupal.org/drupal-services, and the
drupal.org profiles of any people who are
| | 06:52 |
involved with the web host.
| | 06:54 |
The last thing I'll say is that you
should apply the same criteria you'd use for
| | 06:58 |
any other purchase of ongoing services.
| | 07:01 |
I recommend going with a month-to-month
plan at first until you feel comfortable
| | 07:04 |
with the web host, even though
long-term plans are usually cheaper.
| | 07:08 |
Ask your friends who they
use and if they're satisfied.
| | 07:11 |
Better yet, ask people in the Drupal community.
| | 07:14 |
For example, through the message
boards on drupal.org, you'll find those
| | 07:18 |
under Community.
| | 07:20 |
| | Collapse this transcript |
| Using Unix's command-line interface| 00:00 |
Drupal can run on a variety of
operating systems, but an overwhelming majority
| | 00:04 |
of the time your web host will be running on
a UNIX-like operating system such as Linux.
| | 00:09 |
For the sake of convenience, I'll call
all such operating systems UNIX, although
| | 00:13 |
technically that's not quite true.
| | 00:15 |
The primary way that you interact with
UNIX is by typing command into what's
| | 00:19 |
commonly called the command-line interface.
| | 00:21 |
There's no dragging and dropping, no
double clicking, and the command themselves
| | 00:25 |
can be kind of obscure.
| | 00:27 |
The good news is that you only need to
know a few of them to maintain, update,
| | 00:31 |
and tweak your Drupal site.
| | 00:33 |
A quick warning though:
UNIX is extremely powerful.
| | 00:36 |
It's actually possible to wipe out
everything you have with only a few quick commands.
| | 00:41 |
So I do recommend further
study before you dive in.
| | 00:44 |
Here we go with the basics.
| | 00:46 |
The first thing that you'll need to do
is to connect to your web host using a
| | 00:48 |
terminal program such as I have here on Mac OS.
| | 00:52 |
On the Mac, you'll find that inside
the Applications folder, then inside
| | 00:55 |
Utilities, and then it's simply called Terminal.
| | 00:58 |
On Windows, you can use a third-party
client such as PuTTY or OpenSSH, or type
| | 01:04 |
"telnet" at the command line.
| | 01:06 |
Click the Start menu and then search for SSH.
| | 01:09 |
Now let's talk about how you
tell the computer to do things.
| | 01:13 |
Commands in UNIX generally follow the
pattern, command; followed by options;
| | 01:18 |
followed by arguments.
| | 01:19 |
Let's take a look at some examples.
| | 01:21 |
ls means list everything that's in the
directory that you're currently looking at.
| | 01:25 |
It's basically like double-clicking a
folder and seeing all the files inside it.
| | 01:29 |
It doesn't require any options.
| | 01:31 |
However, you can add them.
| | 01:33 |
For example, ls -al means list,
but show all files in a long form.
| | 01:40 |
Some commands, including ls,
can also include arguments.
| | 01:43 |
For example, ls -al sites/ means list
everything that's in the sites folder in a
| | 01:50 |
long format and show all files,
including the invisible ones.
| | 01:54 |
Some commands take more than one argument.
| | 01:56 |
For example, the copy command, cp.
| | 01:59 |
The one that I have here is copy
recursively, cp -R, that is, copy this
| | 02:02 |
directory and everything below it from
temps/sites to something new called website.
| | 02:08 |
And this continues to go on, so some
commands can actually be quite complicated.
| | 02:13 |
You see this tar command here, which is
a stuffing and unstuffing program, which
| | 02:17 |
has several different parts to it.
| | 02:19 |
It's actually just the command, followed by
the options, followed by several arguments.
| | 02:24 |
One thing that's confusing about UNIX is that
it often uses single characters as shorthands.
| | 02:29 |
Here's a list.
| | 02:30 |
It's not a complete list, but it shows
you the most important ones. A period (.)
| | 02:33 |
means the Current directory.
| | 02:35 |
Also you'll sometimes see it at the
beginning of hidden files, such as
| | 02:38 |
.htaccess; that particular file shows up a lot
when you're working with Drupal. Two periods (..)
| | 02:44 |
means go one level up.
| | 02:45 |
It's like clicking that button in
Windows that shows a little folder with an
| | 02:48 |
arrow coming out of it.
| | 02:50 |
A tilde (~) is your home directory.
| | 02:52 |
A slash (/) shows the directory structure.
| | 02:55 |
So for example, sites/all, means the
all folder inside the sites folder.
| | 03:00 |
Finally, we have this
asterisk (*), which is the wild card.
| | 03:03 |
It means do whatever you
want to do, to everything.
| | 03:06 |
Here's a short list of the
commands you'll use most often.
| | 03:09 |
Rather than talk through them all, I
recommend you stop the video at this point
| | 03:13 |
and keep its window open
while you're getting used to them.
| | 03:16 |
You'll notice as you look at the
list that they are kind of obscure.
| | 03:19 |
I mean, what is cd, what does that have to
do with moving from one place to another?
| | 03:23 |
It's because it's shorthand for the
original meaning of it, which is change directory.
| | 03:27 |
So sometimes it's easier to
remember these commands if you know sort of
| | 03:31 |
where they came from.
| | 03:32 |
But enough talk, the best way to
explain is to do, so I'm going to perform a
| | 03:36 |
quick session on my web host
right now to start installing Drupal.
| | 03:40 |
The first thing that I do
is I connect to my web host.
| | 03:43 |
Right now, I'm just looking at the
Terminal on my desktop machine, so ssh, my
| | 03:48 |
username@ the domain.
| | 03:51 |
The first time you do this, it may
ask you whether you want to take a key;
| | 03:55 |
that is, so it knows that it's your computer.
| | 03:57 |
Just say yes if that happens.
| | 03:59 |
I enter my password, and I'm in.
| | 04:02 |
One thing that you'll notice is this
prompt; that is, the thing that is before
| | 04:05 |
everything that you type has changed.
| | 04:07 |
It tells you a little bit about where you are.
| | 04:10 |
In this case, I'm user tgeller on
web41 on my web host, whereas before I was
| | 04:14 |
simply booth-06-mac.
| | 04:16 |
First thing I'm going to do is to
take a look at that list command, ls.
| | 04:20 |
That shows me everything that's in this folder.
| | 04:23 |
I can see where I am with pwd, which
believe it or not, originally stood for
| | 04:26 |
Place Where I Dwell.
| | 04:29 |
I can make a directory, mkdir lynda,
and then if I ls again, there it is.
| | 04:34 |
If I do ls -al, it shows all files,
including the hidden ones in a long format.
| | 04:40 |
This is what it looks like.
| | 04:41 |
You'll notice that it has some of these dot (.)
| | 04:43 |
files we didn't see before.
| | 04:45 |
That's what the "a" does.
| | 04:46 |
I'm going to descend into that
lynda directory by doing cd lynda.
| | 04:50 |
If I ls again, I see there's nothing in it.
| | 04:54 |
Okay, now we're going to go to drupal.
org and get a copy of Drupal itself.
| | 04:58 |
That's at drupal.org/project/drupal.
Scroll down. I'm going to Copy the Link
| | 05:04 |
right here, go back, and use the wget command,
and then paste the link that I just copied.
| | 05:10 |
It shows a progress bar, and if I
type ls, we see that there it is.
| | 05:15 |
Now I'll use the tar command.
| | 05:17 |
You'll notice I'm using those options.
| | 05:19 |
These ones are the ones that I always use
to uncompress something from drupal.org.
| | 05:23 |
The x is for extract, the z is for a
ZIP file, v means verbose, and the f means
| | 05:27 |
I'm about to give the file name.
| | 05:29 |
Again, as you learn more about UNIX, you'll
get to know these options a little bit better.
| | 05:34 |
You'll notice I only typed a few letters
of the file name and then hit the Tab key.
| | 05:39 |
In many versions of UNIX that
completes whatever is there.
| | 05:41 |
If there's any ambiguity; if for
example, there was more than one file
| | 05:45 |
that began with dru;
| | 05:47 |
it would give you the
different choices that are available.
| | 05:49 |
But that's all I have, so we extract. I
list again, and now I see both the files
| | 05:55 |
I downloaded, the gz, and
the uncompressed folder.
| | 05:58 |
I'll get rid of the gz by rm *.gz.
| | 06:03 |
And because there's only one .gz file
in that folder, that's the only one it
| | 06:06 |
gets rid of, even though the star
(*) means get rid of all of them.
| | 06:09 |
List again, yep, it worked.
| | 06:11 |
To send into that drupal
folder, see what's in there.
| | 06:15 |
You'll find yourself doing this a lot.
| | 06:17 |
You go to a place, see what's there,
move it, go to another place, and so on.
| | 06:20 |
I'm going to move it all up one level.
| | 06:24 |
Now if I list again, I see that it
moved everything, except the dot (.) files.
| | 06:28 |
I have to move those manually.
| | 06:30 |
So, .get, up one. Move .htaccess up one.
| | 06:36 |
Now it's empty. I can go up one
level and remove the directory, drupal.
| | 06:41 |
Now when I list again, Drupal has
been downloaded and is ready to install.
| | 06:46 |
I know that was a lot of things to see
all at once, but I just want to give you
| | 06:49 |
a sense of what a typical UNIX session is like.
| | 06:52 |
You'll find yourself moving around a lot.
| | 06:54 |
The cp command for copy, mv for move, ls for
list, these are things that you use all the time.
| | 07:01 |
The last thing I want to show you is
how to get help with the man command,
| | 07:05 |
which stands for manual.
| | 07:06 |
Let's say I want to see how to copy;
man cp gives me all of the details I need,
| | 07:12 |
and there are quite a few.
| | 07:13 |
You can go from one page to another by
pressing the spacebar, and as you can
| | 07:18 |
see it has a lot of options.
| | 07:19 |
A few other useful commands are b,
which brings you back up a page; h, which
| | 07:25 |
gives you help for using this reader;
and then q, which gets you out of the
| | 07:29 |
Help command entirely.
| | 07:31 |
For complicated commands, for example,
for the tar command, I recommend that you
| | 07:35 |
take a look for examples, because as
you can see, there are far too many
| | 07:38 |
switches here to know just
from learning the first time.
| | 07:41 |
So down here at the bottom, you have
all of these examples which explain things
| | 07:45 |
much more quickly than if you were
to look through all of those options.
| | 07:49 |
Now I'll be honest, I'm personally not
all that adapted to UNIX and I often find
| | 07:53 |
myself turning to experts for help.
| | 07:55 |
I'm very grateful for the lynda.com
course, UNIX for Mac OS X Users and I
| | 08:00 |
recommend it to anyone
who wants to dive in deeper.
| | 08:02 |
You might also be able to run your site
just fine without ever having to use the
| | 08:06 |
command-line interface; for example,
by using a graphical FTP program.
| | 08:10 |
But if you do need to, what you've seen
here will help you get off to a good start.
| | 08:15 |
Finally, if you find that these commands
aren't working for you, contact your web host.
| | 08:19 |
They might have things set up
differently from what you saw here.
| | 08:23 |
| | Collapse this transcript |
| Working with your web host's access restrictions| 00:00 |
If you run your own web host, you can
set up a server and give yourself godlike
| | 00:04 |
powers by taking control of what's
called the root user or superuser.
| | 00:08 |
But chances are that you're like me,
serving up your Drupal web site on a shared
| | 00:12 |
web host where you have
only very limited powers.
| | 00:15 |
Web hosts vary in how much access they permit.
| | 00:18 |
So this video shows you tricks
to determine how much you have.
| | 00:21 |
First, let's log in and get some
basic information about ourselves.
| | 00:25 |
We do that with the ssh command,
followed by username, domain, and password.
| | 00:33 |
One thing you'll notice is that we
now have a different prompt than we had
| | 00:36 |
before, that's this section here
before you start typing commands.
| | 00:40 |
This tells us that I am user tgeller@
web41, that's on my web host; whereas
| | 00:44 |
before, it was simply booth-06-mac.
| | 00:47 |
Another way to see who you are is with
the command amusingly titled whoami, and
| | 00:52 |
you can see where you are with pwd,
that says where you are on your web host
| | 00:57 |
that is to say in which directory.
| | 00:59 |
You can see what's in that directory
with the ls command as you saw in a
| | 01:02 |
previous video and you can get the long form
of that with ls -a for all and l for long form.
| | 01:10 |
And here you see some files that you
couldn't see before; that is, these ones
| | 01:14 |
that start with a dot (.). They are
normally invisible unless you use that "a"
| | 01:18 |
option when you do ls.
| | 01:20 |
Here's the directory we
created in a previous video.
| | 01:23 |
We see the name of it right here, but
what do all these other things mean?
| | 01:26 |
I'll show you the most important
ones and how they affect your access.
| | 01:31 |
The first section tells you that it's a
directory, followed by three groups of
| | 01:34 |
letters which show the access
restrictions for the owner, for the group, and
| | 01:39 |
for everybody else.
| | 01:40 |
In this case the owner and the group
both have read, write, and execute access.
| | 01:46 |
For directories, execute access means
that you can actually go into the directory.
| | 01:50 |
However, everybody else has only read
and execute access; that is, they can't
| | 01:54 |
write things to the inside of that directory.
| | 01:57 |
Then to the right we see the owner;
that is, the person who has the access
| | 02:02 |
rights that are labeled Owner and the Group.
| | 02:05 |
Most often on UNIX these are going to
be the same, it is possible to set up
| | 02:08 |
complex access structures using owners and
groups, but we don't have to get into that here.
| | 02:13 |
As I mentioned before, it
finishes off with a filename.
| | 02:17 |
If you need to change any of these
things you'll use the two commands chown and
| | 02:22 |
chmod that stands for
Change Owner and Change Mode.
| | 02:25 |
So how does all of this affect us?
| | 02:27 |
Well let's go back to our
directory listing and you'll see.
| | 02:29 |
You'll notice that most of these
are tgeller tgeller, that's me.
| | 02:33 |
So both the owner and the group
describe the sorts of rights that I have, but
| | 02:38 |
some of them are root and root; for
example, this one here, certificates, and
| | 02:42 |
this one here, logs.
| | 02:44 |
Now this logs directory has read and
execute rights, but not write rights
| | 02:48 |
for everybody else;
| | 02:49 |
that includes me since I'm not root.
| | 02:51 |
Let's find out what that means?
| | 02:53 |
If I go in cd logs, yep, but let me
do that; let me see what's in there.
| | 02:58 |
Yep, it lets me do that.
| | 02:59 |
Now I am going to try to make a
directory in there called lynda. Ah!
| | 03:02 |
You see, it denied me permission
because I didn't have write access.
| | 03:06 |
If you run into this and you can't
change the permissions yourself, you'll have
| | 03:09 |
to contact your web host.
| | 03:12 |
So that has to do with file
permissions, but I also want to mention that
| | 03:16 |
there is a separate set of permissions
regarding the database that's part of your Drupal site.
| | 03:20 |
We see how that comes into play by
looking at the instructions for creating the
| | 03:23 |
database on drupal.org.
| | 03:25 |
To see those go to drupal.org, then
click Documentation, Installation Guide, and
| | 03:33 |
Create the database.
| | 03:34 |
As we scroll down, we see some
commands that are given for the command line;
| | 03:38 |
that is, in UNIX, starting here with mysqladmin.
| | 03:43 |
Once you've created the database you
can then grant certain rights within
| | 03:47 |
the mysqladmin program.
| | 03:49 |
However, I've found that it's usually
pretty uncommon for web hosts to allow you
| | 03:53 |
to create databases using the UNIX command.
| | 03:55 |
You will probably have to do that
through some web-based interface. For example,
| | 04:00 |
on my own web host, webfaction.com,
there is this Databases link down here, which
| | 04:05 |
you use to create a new database. You
can't actually do it in any other way.
| | 04:09 |
You'll see more about common web-
based interfaces in a later video.
| | 04:14 |
Once again you have resources beyond
what you saw here. One of them which I very
| | 04:18 |
highly recommend is lynda.com's Unix
for Mac OS X Users course, particularly
| | 04:24 |
watch the section about
Ownership and Permissions.
| | 04:27 |
That will bring your knowledge up to
snuff, but it's also possible that your
| | 04:30 |
web host simply enforces
restrictions on how much you can do with the
| | 04:33 |
command-line interface.
| | 04:35 |
If that's the case, first try using
whatever web-based access program they
| | 04:38 |
provide; you'll see how to do that in the
video about using graphical web host interfaces.
| | 04:43 |
If that fails, contact your web host to
find out whether you're actually allowed
| | 04:47 |
to do what you want and
how they want you to do it.
| | 04:51 |
| | Collapse this transcript |
| Using cPanel and other graphical web host interfaces| 00:00 | Some web hosts won't allow you to use
UNIX's command-line interface or only give
| | 00:05 | you very limited access.
| | 00:07 | In those cases there is almost always a
web-based graphical interface to do what
| | 00:11 | you want to maintain your Drupal site.
| | 00:13 | You can try out a demo of cPanel yourself;
| | 00:15 | just google for cPanel,
once there, click Try Demo.
| | 00:19 | Then scroll down to Domain Owner Panel;
| | 00:22 | it'll give you a username and password,
although I've never had to use them.
| | 00:26 | Click on the Demo, and we're in.
| | 00:28 | Now you'll see that there are a lot of
icons here, but it's easier to understand
| | 00:32 | if you separate them as
they have them here in groups.
| | 00:35 | You can collapse these groups if you
want so that you can see a little bit
| | 00:38 | better or even move them around if you want.
| | 00:41 | The two most important ones from our
point of view are Files and Databases.
| | 00:48 | Let's take a look at Files first.
| | 00:51 | I find most often I use the File Manager, so
click that, and let's see where we want to go.
| | 00:57 | Yes, let's just go to the Document Root.
| | 00:59 | Again, these options will be different
depending on how your web host has things set up;
| | 01:04 | then I'll say go.
| | 01:07 | In this screen, each line is sort of
like that ls -al line that we saw in
| | 01:11 | the previous video;
| | 01:12 | that is, it gives us the filename
and some more information about it
| | 01:16 | including the permissions.
| | 01:18 | You can learn more about what these
permissions mean, that is, that 755, by
| | 01:22 | watching videos in Unix for Mac OS
X Users, which is also on lynda.com.
| | 01:27 | In particular, you want the
ownership and permissions section.
| | 01:31 | Up here at the top, we have a series of
small icons which lets you do certain
| | 01:35 | things that are similar to what you did in UNIX.
| | 01:37 | You can go up one level, reload the page
after you've made a change, and so forth.
| | 01:41 | There are several things that
you can do by double-clicking here.
| | 01:44 | For example, to go into the folder, go
up one level, you can change the name of
| | 01:48 | a directory, by double-clicking on it there.
| | 01:50 | You can right-click or Command+Click on
the Mac and do all sorts of other things.
| | 01:54 | So again you've a lot of control
through graphical user interface.
| | 01:58 | Over here there is an
alternate way of senior directory tree.
| | 02:00 | It's very much like the Windows
directory tree where you can open up these
| | 02:04 | folders and see what's inside them while
still seeing everything else at the same level.
| | 02:10 | But let's close this window
and go back to where we were.
| | 02:12 | You'll notice when we open the File
Manager it actually created a new window, so
| | 02:16 | now we're back at the main Control Panel.
| | 02:19 | The other section that I mentioned would
be important to us is the Databases section.
| | 02:24 | As you're used to an Acquia Dev
Desktop and other places you've seen in this
| | 02:28 | course, it does have phpMyAdmin
right here, and as is common, you are not
| | 02:34 | actually able to create a database here.
| | 02:36 | You click on Databases, there would normally
be something here saying Create a new database.
| | 02:41 | Instead, you have to go back to cPanel
and create one using the Database Wizard.
| | 02:47 | So that's cPanel, but not everybody uses it.
| | 02:51 | In fact the web host that I use
has grown their own sort of solution.
| | 02:54 | I'll show you that again just to give you
an idea of the variety that's out there.
| | 02:59 | Mine is at webfaction.com, and it has a
lot of the same sorts of functions, but
| | 03:05 | they are over here in a
very different interface.
| | 03:07 | You can create new domain names,
create databases, and so forth.
| | 03:11 | Again, this is the only place that
you'll see this particular interface, but you
| | 03:14 | might see something unusual like
this on the web host that you choose.
| | 03:18 | Now my own preference is for those web
hosts that allow direct use of the UNIX
| | 03:22 | command-line interface.
| | 03:24 | It's simply a lot faster for a lot of
things, and I prefer doing that over
| | 03:27 | pointing and clicking.
| | 03:28 | But I have to admit that
these other interfaces are pretty
| | 03:31 | sophisticated nowadays.
| | 03:32 | They do a pretty good job of giving
you the control that you need while
| | 03:36 | protecting everyone on a shared
host from each other's actions.
| | Collapse this transcript |
| Transferring files to and from your web host| 00:00 |
I briefly discussed how to move Drupal
files between your development computer
| | 00:04 |
and web host in other courses,
such as Drupal 7 Essential Training.
| | 00:08 |
Here I'll go into a bit more detail
using three different file transfer options.
| | 00:13 |
In that course I used a file transfer
program called FileZilla. You can find it
| | 00:18 |
by searching for FileZilla on
the web or by going directly to
| | 00:21 |
filezilla-project.org,
I've already installed it.
| | 00:27 |
Once open, it shows your local
computer's files here in the left side and then
| | 00:31 |
you connect your remote computer
by entering the information up here.
| | 00:38 |
So here's my web host, you'll notice
that there are quite a lot of directories
| | 00:42 |
in here and it's not always
clear exactly what they are.
| | 00:46 |
Many of them have a folder called public_
HTML and that's where you put your web files.
| | 00:52 |
On my particular host, it's webapps,
but it's the same basic thing.
| | 00:56 |
If you have any problems figuring
out where to put your web files, talk
| | 01:00 |
with your web host.
| | 01:01 |
From here it's quite easy
to move things in and out.
| | 01:03 |
For example, I'll open up this lynda
folder and drag in this test folder. Simply
| | 01:10 |
drag it in, and there it goes.
| | 01:12 |
Inside that test folder it copied all of
the files inside just as you'd expect.
| | 01:17 |
You'll notice there is a two-dot
folder right here that works very much like
| | 01:20 |
UNIX, where you type in two dots to go up one
level, and we're back up, and back up again.
| | 01:27 |
You can also drag and drop between
these two windows to go from your local
| | 01:30 |
machine to your remote machine, and back again.
| | 01:34 |
So that's one method.
| | 01:35 |
If you have any problems with it,
check FileZilla's documentation, or again,
| | 01:39 |
contact your web host.
| | 01:41 |
By the way, there are several file
transfer programs available for free, on
| | 01:45 |
both Mac and Windows.
| | 01:46 |
Wikipedia has a huge list of
them. You can see them by going to
| | 01:50 |
en.wikipedia.org, and then search for ftp
client, and as you can see it's an enormous list.
| | 02:01 |
I personally use Cyberduck on the
Mac, which is free and open source.
| | 02:06 |
A second method to get files between
your two environments is to use whatever
| | 02:10 |
graphical interface your web host provides.
| | 02:13 |
As in a previous video, I'll show you
what that looks like using cPanel, which
| | 02:16 |
is one of the most popular of such interfaces.
| | 02:19 |
You can try it out by doing
a Google search for cPanel,
| | 02:23 |
and then clicking Try Demo. Scroll down
to Domain Owner Panel and click the Demo,
| | 02:29 |
and you see down here this file group.
| | 02:33 |
You click File Manager and then go to
whatever area you want to take a look at,
| | 02:37 |
I'll just say go, and as you can see
double-clicking folders let's you get into
| | 02:41 |
them, you can move things in and out
using the buttons up here, and so forth.
| | 02:45 |
We don't have to go into details,
because it's quite easy to explore.
| | 02:49 |
Finally, you can use UNIX's
command-line interface to move files.
| | 02:52 |
The command you'll use is called
SCP, which stands for Secure Copy.
| | 02:57 |
As is usual with UNIX, it's
a little daunting at first.
| | 03:01 |
I give a brief introduction to UNIX
commands in the video using UNIX's Command
| | 03:05 |
Line Interface, and if you want more details,
watch the series UNIX for Mac OS X users.
| | 03:11 |
The first thing that I need to do is
figure out where the file is that I want
| | 03:15 |
to transfer it to my web host. To do
that, I'm going to go back to my Finder
| | 03:20 |
where I've already created a folder here
called test, which has a file in it, test.txt.
| | 03:26 |
Now there are few ways you
can find out where this is.
| | 03:29 |
One would be to use the Terminal
program and I could then just navigate to it.
| | 03:33 |
Let's say ls, cd Desktop, ls -al. Once I'm
there, there's test, cd test, pwd, and
| | 03:43 |
we have the full path right there.
| | 03:44 |
A simpler way on the Mac is to simply
highlight it and hit Command+I and that
| | 03:48 |
gives us the path right there;
there's similar things on the Windows side.
| | 03:55 |
In any case, once you have the path of
the source file, you then go back into
| | 03:59 |
your Terminal and you type in the
command scp -r, paste in that path, put the
| | 04:05 |
name of the file you want to move, in
this case it's a folder, test, and then put
| | 04:09 |
where you want it to go,
tgeller@tomgeller.com:test.
| | 04:15 |
Now if we look back at this whole
command: scp is the sommand, -r means
| | 04:20 |
recursive, that means copy
everything inside the folder. Here are our two
| | 04:24 |
arguments to it, this first one is
the source, and the second one is the
| | 04:28 |
destination, user @ destination domain
at finally where it's going to go, and
| | 04:34 |
then I hit Return and, of course, it
asks me for my password, so that I can
| | 04:38 |
log in to that destination.
| | 04:43 |
If you mistype your password, of
course, just try again. You get up to three
| | 04:46 |
tries before it kicks you out.
| | 04:52 |
It took only a second, because it's
a very small file, but there it is.
| | 04:55 |
We can prove that it's there, but
using ssh to go to our remote computer and
| | 04:59 |
then take a look. So ssh to an ls -al
and right there is our test folder and
| | 05:12 |
inside that is test.txt.
| | 05:15 |
To be honest, the easiest way to do one
off uploads and downloads like you saw
| | 05:18 |
here is probably just use your web
host graphical interface, such as for
| | 05:24 |
example, cPanel, but I personally like
using the other two methods sometimes.
| | 05:28 |
One reason is because both of them,
that is, UNIX commands and file transfer
| | 05:31 |
programs are scriptable, so you can
automate such things as backups by
| | 05:36 |
just writing a script.
| | 05:38 |
Whatever transfer method you choose,
get to know it really well. The more
| | 05:42 |
comfortable you are moving files
between your development environment and the
| | 05:45 |
server, the more likely you are to
follow good development practices.
| | 05:49 |
| | Collapse this transcript |
| Moving databases using phpMyAdmin| 00:00 |
As you know a Drupal site
comprises two parts, files and a database.
| | 00:05 |
Anybody who uses a computer is used to
transferring files, but databases are a different breed.
| | 00:11 |
They are basically text files that the
database program MySQL reads and writes.
| | 00:16 |
There are two basic ways of examining,
affecting, and moving these files through
| | 00:20 |
a graphical program such as phpMyAdmin,
which we'll look at in this video, and
| | 00:24 |
using the UNIX command-line interface,
which we'll look at in the next video.
| | 00:28 |
There is actually one other method
using the Drupal Module backup in Migrate.
| | 00:32 |
You'll get more information about it in
the videos in the section, Keeping Your
| | 00:36 |
Site Safe and Secure.
| | 00:38 |
But anyway, let's get back to phpMyAdmin.
| | 00:41 |
You're already familiar with it if
you used the Acquia Dev Desktop program
| | 00:44 |
to develop your site. I'll switch to it,
| | 00:46 |
so you can see how it works there.
| | 00:47 |
You simply click Manage my
database, and there you go.
| | 00:52 |
Over in the left we have a list of all of
the databases that are running on MySQL.
| | 00:56 |
In fact, only two of these are
Drupal sites, lynda and acquia_drupal
| | 01:00 |
But let's go and take a look
at what we've on the web host.
| | 01:03 |
I've already set up a Drupal site with
a database of tgeller_lynda. The site
| | 01:08 |
itself is at lynda.tomgellar.com. To
get to it, I'm going to go to my own web
| | 01:14 |
host's interface for that.
| | 01:16 |
I go to http://my.webfaction.com,
click on Databases, and MySQL phpMyAdmin
| | 01:23 |
interface, type in the name of
the database and the password.
| | 01:32 |
One thing that you'll notice it's
different between this and the Acquia Dev
| | 01:35 |
Desktop screen is over here in the
left side you only have two databases:
| | 01:40 |
information_schema, which is part of
essential to MySQL, and tgellar_lynda.
| | 01:46 |
I found this to be true on many web hosts.
| | 01:48 |
They only allow you to have one
database per phpMyAdmin interface.
| | 01:52 |
Another difference is we don't have
to create database thing down here.
| | 01:56 |
On my particular web host, I've to
do that through a different interface.
| | 02:00 |
Another difference that you'll see
between the Acquia Dev Desktop and your web
| | 02:04 |
host, will be and how big
a database you can import.
| | 02:07 |
You can see that by going up here and
clicking Import. Again this is on my web
| | 02:10 |
host, and this is here using Acquia Dev
Desktop. Click Import, and we see this
| | 02:16 |
maximum of 8 megs versus 20 megs.
| | 02:20 |
If you find yourself running into this
limit, there is a program I'd like to
| | 02:23 |
recommend to you called BigDump.
| | 02:25 |
Just open up a Window go to Google and
search for bigdump. What this does is it
| | 02:31 |
chunks up your MySQL
database into little pieces,
| | 02:34 |
so that it is possible to upload
and get pass that size restriction.
| | 02:38 |
Anyway, let's take a look at exporting
and importing a database using phpMyAdmin.
| | 02:43 |
As I said, I already have a
database in this tgeller_lynda site.
| | 02:47 |
So first I'll export it. Click on
Export, then I'll click on Custom.
| | 02:52 |
Now you could just do a Quick Export,
but I want to show you all the options.
| | 02:55 |
We have a list of our databases, and
we only need the one database, not
| | 02:59 |
information_schema, and scroll down.
| | 03:01 |
You can change the name of the file that
you're outputting here and the format.
| | 03:06 |
Most often you're going to use SQL.
Below that there are quite a few options, and
| | 03:13 |
to be honest, there are too
many to go through now.
| | 03:15 |
The most important ones I found are
under the Object creation options.
| | 03:20 |
I'll show you what happens when I
simply use the defaults that it gives me.
| | 03:23 |
I'll scroll down the bottom and
say go, and it downloads the file.
| | 03:29 |
I'll go back to the desktop and take a
look at that and then I can simply open
| | 03:32 |
it up in a text editor if I like.
| | 03:36 |
And there are all the SQL statements.
| | 03:41 |
Most important are the ones up here at the top.
| | 03:44 |
You'll see that the way that we exported
it, it's saying that when we import it,
| | 03:47 |
it's going to Create
Database and then use that database.
| | 03:51 |
That's going to be a problem for our
web host, and I found that it's true for a
| | 03:54 |
lot of web hosts, and I'll show you why.
| | 03:56 |
We'll go back in and we'll reimport it,
by going up to the top and clicking
| | 04:00 |
Import. Choose File, and
then scroll down and say go.
| | 04:08 |
Ah, it was that Create
Database command right there.
| | 04:14 |
The problem is that my
web host, like many web hosts,
| | 04:17 |
doesn't allow you to
actually create databases directly.
| | 04:20 |
So what can we do about that?
| | 04:22 |
Well, we can go back and actually
edit that text file again, and remove the
| | 04:26 |
Create Database command.
| | 04:29 |
So let's try that and give it another
shot. Go back in, click Import, Choose File
| | 04:35 |
again, and give it another go.
| | 04:41 |
Nope, we still have an error.
| | 04:44 |
This is why you have to watch
out when you export your database.
| | 04:48 |
I'll do another export and
show you what the problem was.
| | 04:52 |
Click Custom, select the database I
want, and scroll down. The problem was that
| | 04:59 |
it's trying to create all these tables
inside of that database without getting
| | 05:03 |
rid of the old ones.
| | 05:04 |
So they clash when you try to do the import.
| | 05:07 |
If I add this, Add Drop Table command
here, scroll to the bottom and click Go,
| | 05:14 |
and now I have another file on
the desktop. This one is -1.
| | 05:18 |
Now let's try to import
that one and see how we do.
| | 05:21 |
Go back up to the top, click Import,
select that file and go. Oops!
| | 05:32 |
We forgot to remove Create Database.
These are all typical problems that you'll
| | 05:35 |
have when you try to move
or databases in and out.
| | 05:38 |
And the reason I'm going through
all of this is because you'll probably
| | 05:40 |
have similar problems.
| | 05:41 |
We go back in, get rid of Create Database,
and one more time, fourth time is the
| | 05:48 |
charm. Choose the file, scroll down, and go.
| | 05:57 |
Now it appears to have worked, and we
can be sure of that, by going back to our
| | 06:01 |
site, lynda.tomgellar.com, and there it is.
| | 06:05 |
If it hadn't worked, it would have come
up with a blank screen or an error.
| | 06:09 |
So as you can see, restrictions on your
web host might make using phpMyAdmin a little tricky.
| | 06:15 |
The easiest way to get around them is
to plan ahead and set the right options
| | 06:19 |
when you first export the database.
| | 06:21 |
I recommend you play around with them,
especially with those object creation options,
| | 06:25 |
especially the ones within there
that say Create and Drop. Then examine the
| | 06:30 |
resulting text files, and test, test, test.
| | 06:34 |
| | Collapse this transcript |
| Moving databases using Unix commands| 00:00 |
In the last video you saw how to use
the graphical program phpMyAdmin to move
| | 00:05 |
databases onto and off of your web host.
| | 00:08 |
That's how I usually do it, but there
are times when you need to use UNIX's
| | 00:11 |
command-line interface.
| | 00:13 |
For example, if your web host doesn't
offer phpMyAdmin or if the database is too
| | 00:17 |
big for its upload feature, I'll
show you the basics of the command-line
| | 00:21 |
interface, but that should
be enough to get you started.
| | 00:24 |
We'll start by exporting a
database we already have installed.
| | 00:27 |
This one is on my own site tomgeller.com.
| | 00:30 |
The database itself is named tgeller_lynda.
| | 00:34 |
First, let's take a look at it
with the interactive MySQL command.
| | 00:38 |
Before I can do that, I have to
switch over to the Terminal and log in.
| | 00:45 |
As before I do that with the ssh
command. and then enter my password.
| | 00:51 |
Once there, let's take a
look and see what we have.
| | 00:55 |
This is my home directory. I'm going to
switch into that lynda directory, where
| | 00:59 |
we'll play around a little bit.
| | 01:03 |
As you can see, we have nothing there already.
| | 01:06 |
To use the interactive MySQL command
you type mysql-u, for user, then your
| | 01:12 |
username, and then -p, which means
it will ask you for the password.
| | 01:18 |
I enter the database password, not the
password for my user itself, and you can
| | 01:25 |
tell that you're in it because you get
a prompt similar to this one, and then
| | 01:28 |
you see mysql down here.
| | 01:31 |
Every command that you entered in the
interactive MySQL program requires a
| | 01:35 |
semicolon at the end. I'll show you that.
| | 01:37 |
If I were to simply say show databases,
I don't get anything, instead I get
| | 01:42 |
this prompt saying okay, I'm waiting for more
information, but when I then type the semicolon (;)
| | 01:47 |
it does what I want.
| | 01:48 |
Usually of course you just do
that all in one line, like this.
| | 01:54 |
We have two databases and the one
that I actually want to use is the
| | 01:57 |
tgeller_lynda. The command is quite
simple; it's use, use tgeller_lynda,
| | 02:04 |
followed by the semicolon (;),
| | 02:06 |
and it confirms our choice.
| | 02:08 |
We can see what's in that with show
tables, and there we have a list of
| | 02:12 |
everything that's in our Drupal installation.
| | 02:15 |
This is a very fresh installation by
the way. The only thing that I changed
| | 02:18 |
was this page up here that says Database test,
and then I put that on the front page of the site.
| | 02:24 |
By the way, the MySQL command
also works in noninteractive mode;
| | 02:28 |
you'll see that in a few minutes.
| | 02:30 |
But to export the database, you actually
use a different program called mysqldump.
| | 02:35 |
So I'm going to exit out from the
MySQL program right now with exit.
| | 02:40 |
And here's the command
that you use for mysqldump.
| | 02:43 |
So far it's similar to MySQL, mysqldump -u,
and then you put in your username, -p,
| | 02:49 |
for the password, and then
the name of the database.
| | 02:53 |
In my case, both the username and the
database itself are tgeller_lynda; that's
| | 02:58 |
something that my web host requires.
| | 03:00 |
Then to put it into another file, you use this
greater than (>) sign and the name of the file.
| | 03:05 |
I'm just going to call it export.sql.
| | 03:09 |
It asked for the password, again
this is for the database, and we're done.
| | 03:15 |
We can prove that by
doing ls -al, and there it is.
| | 03:19 |
Let's take a look inside of that file.
| | 03:21 |
I'll use the more command, which just
prints out what's inside a text file.
| | 03:29 |
This should look familiar to you if
you've looked at any of these MySQL files on
| | 03:32 |
your desktop computer.
| | 03:34 |
One thing that's important to notice
is that before every table it has this
| | 03:37 |
Drop Table If Exists that's actually
quite useful, because there's no easy
| | 03:42 |
way to drop all tables through the command line,
as we did by clicking around in phpMyAdmin.
| | 03:47 |
So if you do an export from phpMyAdmin
and you plan to later import using the
| | 03:52 |
command line, make sure the option to
Add the Drop Table's directive is checked.
| | 03:57 |
From here of course you could download
the SQL file as a backup or something.
| | 04:01 |
Alternately, you could have uploaded
one to your server from somewhere else.
| | 04:05 |
So I'm going to get out of here by
pressing Q, that been back to the command
| | 04:09 |
prompt, then go back into my site and
just mess around a little bit. I'll add
| | 04:12 |
some content to the front page.
| | 04:16 |
Say Basic page, go down, put it on the front
page, save, and go back up, and there it is.
| | 04:26 |
Now let's say that we didn't like what
we did there to add that second note; we
| | 04:30 |
want to import the file that we just exported.
| | 04:33 |
The fastest way is to use MySQL
command in noninteractive mode with a very
| | 04:37 |
similar syntax to the
mysqldump command we just did.
| | 04:41 |
So I'll switch back to my
Terminal here, and here's the command.
| | 04:44 |
Now you'll notice the only difference
between this and the previous command
| | 04:57 |
is this little greater than and less
than symbol, instead of saying greater
| | 05:00 |
than, we said less there.
| | 05:01 |
It's sort of like a funnel;
| | 05:03 |
the stuff from the big end
goes into the little end.
| | 05:06 |
Now if we hit Return, we enter the
password again, and hopefully we were successful.
| | 05:14 |
We can find out by going back to
our site and reloading, and if we were
| | 05:17 |
successful, the second page will
disappear because of course we're taking an
| | 05:21 |
export from before we
created that, and it worked.
| | 05:27 |
There is no way around it.
| | 05:29 |
Databases are a kind of tricky until you
get used to them, and using MySQL from the
| | 05:33 |
command line is a world unto itself.
| | 05:36 |
Just take a look at all the options it has.
| | 05:38 |
I'm going to go back into
the Terminal, clear the screen;
| | 05:40 |
we usually do that with a Command+L or
Ctrl+L by the way, and take a look at the
| | 05:45 |
man page, that is the manual page for MySQL.
| | 05:49 |
Scroll down a little bit, and
just look at all of these options.
| | 05:55 |
The good news is you probably won't
need to know more than a few options to
| | 05:58 |
run your Drupal site.
| | 05:59 |
As always, drupal.org is a good place
to look for solutions to any problems you
| | 06:03 |
run into, and your web host can
provide guidance on the restrictions that
| | 06:07 |
they've put in place.
| | 06:08 |
| | Collapse this transcript |
| Modifying server configuration files| 00:00 |
This video is fairly short, but that's
deceptive, because server configuration
| | 00:04 |
is not only a course into itself, it's
an entire career on to itself. But it's
| | 00:09 |
important that you know a little about
two configuration files in particular,
| | 00:13 |
because small changes in them are
likely to save your bacon from time to time.
| | 00:18 |
The first is php.ini, which controls
how the server runs Drupal's PHP programs.
| | 00:24 |
The second is .htaccess, which can
control just about every setting for how the
| | 00:29 |
web server delivers Drupal's
output. Let's start with php.ini.
| | 00:34 |
On a shared host, such as I use, I
can't edit the servers overall php.ini
| | 00:40 |
file directly because doing so would affect
everybody else with sites on the same server.
| | 00:45 |
So I'll show it using my development
environment in Acquia Dev Desktop. I
| | 00:50 |
already have that up and running here,
and I get to that setting by clicking
| | 00:53 |
Settings and then Config.
| | 00:56 |
In the current version of Acquia Dev
Desktop that I'm using, there's actually
| | 00:59 |
two PHP files because PHP
was in something of a transition.
| | 01:03 |
I happen to know that the version that
I'm using is 5.2, so I'll highlight that
| | 01:08 |
and then click Edit.
| | 01:09 |
The most important setting in this big
file is one that starts with mem, so I'll
| | 01:14 |
do a search for mem, Command+F and
mem, and there it is, memory limit.
| | 01:20 |
Probably you won't make any other
changes, but this one is crucial, and I'll
| | 01:24 |
show you what it does.
| | 01:25 |
I'm going to change it from 256 megabytes
to 20 kilobytes, something that's completely
| | 01:30 |
inadequate for running a
Drupal site. I save it.
| | 01:33 |
Go back to Acquia Dev Desktop and
then stop the server and restart it.
| | 01:40 |
Now when I reload this page that's
running on that server, I get this error
| | 01:44 |
saying that it doesn't have
enough memory to run the program.
| | 01:48 |
This is a fairly common error,
and here's how you correct it.
| | 01:51 |
You just go back to your php.ini file
and change that to something larger; 256 K
| | 02:01 |
is way more than you need, but of
course, bigger in this case is better.
| | 02:05 |
You can't have it too big;
| | 02:06 |
the only danger is running
out of memory on your computer.
| | 02:09 |
I'm going to turn it back to 256
meg; 64 meg is usually enough.
| | 02:14 |
I'll save it, close that out, go back
and restart my server, and reload my page
| | 02:21 |
and cross my fingers. Yup that fixed it.
| | 02:24 |
Now I should mention it might actually
be possible to make php.ini changes on
| | 02:29 |
your web host by putting a php.ini file
inside your Drupal sites' directory. I'll
| | 02:35 |
give you a resource to help with that
later in this video, but now let's move on
| | 02:39 |
to the other file called .htaccess.
| | 02:41 |
I didn't need htaccess trick on my
tgeller.com site. You see, I had a lot of
| | 02:46 |
legacy data and subdirectories on tgeller.com.
| | 02:49 |
For example, at tgeller.com/graphics,
and that was on an old HTML site before I
| | 02:54 |
started using Drupal. Then I created a
Drupal site and put it at tgeller.com,
| | 02:59 |
but I wanted the web server to go
directly to those files in those
| | 03:02 |
subdirectories, avoiding Drupal altogether.
| | 03:05 |
If I didn't do that, Drupal would look
for a page that was named graphics, and
| | 03:08 |
it would fail, and any link that I had
done to any file stored in that folder
| | 03:13 |
called graphics would also die.
| | 03:15 |
I'll show you what I did.
| | 03:16 |
So here's a sample file
that's from way back in 1996 or so.
| | 03:21 |
That's of my old two-legged dog,
Chicken Bone, but you'll notice when I went to
| | 03:26 |
tgeller.com, it automatically
redirected to old.tgeller.com.
| | 03:30 |
So any links to that tgeller.com
graphics still work, and if I go to just
| | 03:35 |
tgeller.com, it doesn't make a
redirect. You see this is actually a Drupal
| | 03:39 |
site, which I could prove by saying /user, and
then of course, you'll get your Drupal login.
| | 03:43 |
So, how did I do that?
| | 03:45 |
Well, let's go into our Terminal and
take a look. I'm in the directory where
| | 03:49 |
I have that tgeller site. Take a look at
the files there, and there's the .htaccess.
| | 03:54 |
I'm going to just take a look
at that by typing more .htaccess.
| | 03:59 |
Lots and lots of stuff in. If I
scroll down a little bit, I find the rule
| | 04:04 |
that I needed to write.
| | 04:06 |
See it says Rewrite, if somebody
looks at any of these directories;
| | 04:10 |
instead go to old.tgeller.com.
Otherwise, my site runs as normal.
| | 04:16 |
I'll just stop looking at
this file by pressing Q.
| | 04:19 |
Now as you saw, there is a lot of stuff
up here in this Rewrite rule and when we
| | 04:24 |
looked at the php.ini file, there
was a lot of complicated stuff there.
| | 04:28 |
Here are some resources that will help
you learn how to use both the php.ini
| | 04:33 |
file and the .htaccess file.
| | 04:36 |
For PHP, I like the instructions and
links for my own web host's Help pages.
| | 04:40 |
As you scroll down here, you'll see
there's a lot of stuff and some of it is
| | 04:44 |
specific to my particular host, but a
lot of it is actually quite useful for all
| | 04:49 |
kinds of host, no matter
where you're storing your web site.
| | 04:52 |
For htaccess files, an article written
way back in 2006 is still the best.
| | 04:57 |
It has the amusing name, Stupid htaccess Tricks.
| | 05:03 |
There is a lot of great information in here.
| | 05:10 |
In fact, I was able to write that
Redirect rule you saw earlier, just from the
| | 05:13 |
information that I found here.
| | 05:15 |
For easy reference, here are those URLs,
and of course, searching for .htaccess
| | 05:21 |
and php.ini on drupal.org will
also lead you to helpful tips.
| | 05:26 |
Once there, I recommend you
click on the Documentation link;
| | 05:30 |
that usually narrows it down to useful stuff.
| | 05:32 |
There is one other configuration
file you might have to tinker with, it's
| | 05:37 |
called settings.php.
| | 05:39 |
I didn't mention it here, because it's
specific to Drupal, whereas .htaccess and
| | 05:43 |
php.ini files are for the server itself.
| | 05:47 |
We'll cover the settings.php file
in another video in this course.
| | 05:51 |
| | Collapse this transcript |
|
|
3. Building Out Your SiteLearning from case studies| 00:00 |
There is an old saying, "If you don't know
where you're going, you'll never get there."
| | 00:05 |
But when you are designing your first
few web sites, it's hard to know how far
| | 00:08 |
the road can go or the best routes.
| | 00:11 |
Nobody can give you an exact roadmap
for building your site because every
| | 00:14 |
destination is different.
| | 00:16 |
But seeing how others got where
they were going can be a big help.
| | 00:20 |
Fortunately, there are lots of these travel
stories called case studies in the Drupal world.
| | 00:25 |
A Drupal case study
typically includes a few parts.
| | 00:29 |
First, there will be the site URL
so you can see the site yourself.
| | 00:32 |
Sometimes these case studies are for
private sites however, so that's not always
| | 00:36 |
part of the case study.
| | 00:37 |
Secondly, the requirements, usually
client requirements, why did they build this?
| | 00:41 |
What did it need to do?
| | 00:43 |
Third, some of the challenges they faced and
how the creators overcame those challenges.
| | 00:48 |
And finally you'll find
technical details, the modules used, the
| | 00:52 |
architecture, and so forth.
| | 00:54 |
This is often the first part that
people go to when they want to learn Drupal,
| | 00:57 |
but I recommend you read all of the
case studies because knowing why they used
| | 01:01 |
those things is as important
as knowing that they use them.
| | 01:05 |
So where can you find case studies?
| | 01:07 |
On drupal.org of course.
| | 01:09 |
They're somewhat scattered among a few
locations that aren't terribly obvious.
| | 01:13 |
One of them is a drupal.org/success-stories.
| | 01:17 |
As you can see there is quite a lot here.
| | 01:19 |
Let's just take the first one in the
list here, Economist.com. And as I say,
| | 01:23 |
it has the URL, says why they did it,
Before Drupal, what was the reason for
| | 01:28 |
building this site, how they did it,
| | 01:30 |
and then some of the code
and modules and so forth.
| | 01:34 |
Another place you can find case
studies is in the Drupal forums.
| | 01:37 |
The direct link there is drupal.org/forum/25.
| | 01:43 |
A more common way to get there is by
going up to Community and scrolling down to
| | 01:47 |
Our forums, and then scrolling down
until you get to the Drupal showcase that's
| | 01:52 |
under the General group here.
| | 01:55 |
Outside of drupal.org, individual
Drupal developers will sometimes post case
| | 01:59 |
studies of their own sites.
| | 02:01 |
To keep up with those, checkout Planet
Drupal, once again you can get there by
| | 02:05 |
clicking Community and then
scrolling down to Planet Drupal.
| | 02:08 |
The direct URL is drupal.org/planet.
| | 02:11 |
As it is common on drupal.org, this
page is not only a listing of all of the
| | 02:15 |
things coming through it, it
also gets delivered as an RSS feed.
| | 02:19 |
So you can take a look at that in your
Mail Reader or Google Reader or any other
| | 02:23 |
way that you read RSS feeds.
| | 02:26 |
Finally, it's worth mentioning a site
that the Drupal company Acquia runs
| | 02:30 |
called Drupal Showcase.
| | 02:31 |
It doesn't have use cases per se, but
it's a great collection of pro-quality
| | 02:35 |
sites built in Drupal.
| | 02:37 |
Just seeing the diversity there is
bound to give you ideas, and the URL is very
| | 02:41 |
easy to remember; it's drupalshowcase.com.
| | 02:46 |
One thing that's nice about it is it
separates the sites into these groups.
| | 02:50 |
So let's say that you need
to build a government site.
| | 02:52 |
Well, let's take a look at what other
people did, a wonderful way to learn Drupal.
| | 02:56 |
I think it's great that the Drupal
community is so into posting these case studies.
| | 03:00 |
So it's not just a great place to get
ideas but also to learn from others.
| | 03:04 |
When you have a site that you think is worth
showing, consider posting it to these forums.
| | 03:08 |
The critiques you'll get are a great
way to improve your own Drupal skills.
| | 03:13 |
| | Collapse this transcript |
| Planning your site| 00:00 |
Chances are, the first time you built a
Drupal site you just kind of did it off the cuff.
| | 00:05 |
You tried out some modules here, maybe some
themes there, and you threw it all together.
| | 00:09 |
But as you get to building a more-and-
more complicated sites, especially for
| | 00:13 |
clients, you're going to need to start planning.
| | 00:16 |
Now some of the tips I'll give you are
true for any web development software,
| | 00:20 |
while others are specific to Drupal.
| | 00:22 |
We'll start with the general ones.
| | 00:24 |
Start with the site's purpose.
| | 00:26 |
Why are you making it anyway?
| | 00:28 |
Is it to sell something?
| | 00:30 |
To get people doing some
sort of online activity?
| | 00:32 |
Whatever it is, I recommend you write it down.
| | 00:35 |
The act of doing so forces you to firm
up the details in your mind, and you'll be
| | 00:40 |
able to refer back to your notes later.
| | 00:43 |
Second, what features do you want
your site to offer to its visitors?
| | 00:47 |
Will there be a discussion forum?
| | 00:48 |
Will people even be able to log in?
| | 00:51 |
Don't worry too much about the
implementation yet. This is a time to let your
| | 00:55 |
imagination run wild.
| | 00:57 |
This is also when you should be
looking at lots and lots of sites for ideas
| | 01:00 |
that you can steal.
| | 01:02 |
See the video Learning from Case
Studies for some places to look.
| | 01:06 |
Next is a sitemap; that will give you
a general idea of what pages you'll need
| | 01:10 |
and how that will all
lead from one to the other.
| | 01:12 |
In a sense, you're dividing your site
up into categories, such as about us,
| | 01:17 |
products, and so forth.
| | 01:19 |
Here's an example of a very simple sitemap.
| | 01:21 |
It's actually for the project that
we'll be putting together at the end of this
| | 01:24 |
course; we'll come back and
take a closer look at it then.
| | 01:28 |
Let's take a look at the lynda.com
front page for an example of a sitemap.
| | 01:32 |
Scroll all the way to the
bottom, and there it is.
| | 01:36 |
One unique feature on it is that
because it's a membership service there is a
| | 01:40 |
whole section that describes the
benefits of membership; that decision was
| | 01:44 |
almost certainly formed in the planning
phase when they were building the site.
| | 01:49 |
Once you have your sitemap,
start creating wireframes.
| | 01:52 |
These are graphical outlines of
where elements will appear on the page.
| | 01:56 |
Here you see one from that project at
the end of the course, and once again
| | 02:00 |
we'll come back to it
when we start building that.
| | 02:03 |
Next, plan out the things that you'll
need in order to keep the site going, that
| | 02:08 |
is, its infrastructure.
| | 02:09 |
Who will actually be in
charge of approving comments?
| | 02:12 |
How will you manage backups?
| | 02:14 |
These matters are just as important as
what's on the site, because failing to
| | 02:18 |
plan for them could lead to
the site eventually collapsing.
| | 02:22 |
Now let's talk about some
Drupal-specific matters.
| | 02:25 |
Now that you have your plans,
you'll have to implement them in Drupal.
| | 02:29 |
You probably had some ideas that
really can't be done very well with core
| | 02:32 |
Drupal, so you'll have to identify which
modules are good candidates to use, and
| | 02:36 |
in doing so you'll find that there
might be several, so you'll have to go
| | 02:40 |
through each of them and test
them all before making a decision.
| | 02:44 |
Just give as much information as you
can during the planning phase so that
| | 02:47 |
you'll be able to make some informed
decisions and then be prepared to adapt as you go.
| | 02:52 |
Then consider how users
will interact with your site.
| | 02:56 |
You might not actually need people to
sign in or maybe you do, but you have to
| | 03:00 |
modify the signing in some way.
| | 03:03 |
It's very rare that membership sites
need only the two basic roles that Drupal
| | 03:07 |
provides; that is, authenticated and anonymous.
| | 03:10 |
So you'll want to spell out what
roles will be on your site; for example,
| | 03:13 |
content manager or
community manager or so forth.
| | 03:16 |
And then you should figure out what each
of those roles should be allowed to do.
| | 03:20 |
Finally, we come to Design.
| | 03:23 |
The funny thing about design is, it's
usually the first thing that people want
| | 03:25 |
to do when they create the site.
| | 03:27 |
But when you get experience and you
start building more-and-more sites, you
| | 03:30 |
realize that it actually follows after
them. As they say, function defines form
| | 03:35 |
or form follows function.
| | 03:37 |
When you know what the site is going
to do and how it'll do it, the design
| | 03:40 |
is much, much easier.
| | 03:42 |
For example, if I know that my site is
going to be accessed by a lot of people
| | 03:46 |
on mobile devices, I'll want to make
sure that the design works both on desktop
| | 03:50 |
computers and on mobile
devices and tested out on both.
| | 03:55 |
How much time should you put
into planning out your site?
| | 03:58 |
Really depends on the site itself.
| | 04:00 |
For my own site, tomgeller.com, I
really didn't do very much planning at all,
| | 04:05 |
but that's because it's a single
function site just to show off my portfolio.
| | 04:09 |
There's no signing in or
other complicated stuff.
| | 04:12 |
On the other hand, if you're doing
anything interactive or with special
| | 04:15 |
features, planning is a must.
| | 04:18 |
| | Collapse this transcript |
| Populating your site with Devel Generate| 00:01 |
Before going any further I'd like to
introduce you to a module that every
| | 00:04 |
professional Drupal programmer
knows well, called simply Devel.
| | 00:08 |
This course doesn't deal with programming;
that'd be an entire course in itself.
| | 00:13 |
But we will use one section of the
Devel module that site builders like us
| | 00:17 |
often find helpful.
| | 00:18 |
It's called Devel generate.
| | 00:20 |
It fills your site with fake
content, users, comments, and so forth.
| | 00:25 |
That content gives you a better idea how
your site will work once people start using it.
| | 00:30 |
You can find it at drupal.org/project/devel.
| | 00:36 |
We'll scroll down and install it
in the usual way. Copy the link.
| | 00:40 |
Go back to my site.
| | 00:43 |
Click Modules and Install.
| | 00:47 |
Then of course, we go back
and we enable that module.
| | 00:50 |
I am going to enable all of the
development parts, Devel, Devel generate,
| | 00:56 |
and Devel node access.
| | 00:57 |
Although quite honestly we don't need
Devel node access, so I'll turn that
| | 01:00 |
off instead, and save.
| | 01:03 |
Now it's a fairly simple
matter to create content.
| | 01:06 |
You go up to Configuration and
then scroll down to Development.
| | 01:11 |
And here you have a lot more options,
settings, content, menus, terms, and so forth.
| | 01:16 |
I am going to open up all
of these by Command+Clicking.
| | 01:21 |
First, let's look at the settings.
| | 01:23 |
When you're developing content you
really won't have to change any of these.
| | 01:26 |
These are as you can see all
very geeky things for programmers.
| | 01:30 |
The one you will probably
use is Generate content.
| | 01:33 |
I am going to create 10 nodes, and these
will be both of Article and Basic page types.
| | 01:38 |
I'll have them go back a week and
up to three comments for each one.
| | 01:43 |
As you can see you can change quite a
few other options, and I just say Generate.
| | 01:49 |
As we go through those tabs we open,
you can see that there are similar options
| | 01:52 |
for creating menus, taxonomy
terms, users, or vocabularies.
| | 01:58 |
The only thing I'm going to do is create three
users, which we'll use later on in the course.
| | 02:03 |
So I'll say three users, no other changes
need to be made, Generate, and we are done.
| | 02:09 |
Once you've auto-generated the bits
and pieces you want, you can actually turn
| | 02:13 |
off both Devel and Devel generate,
that's because the content, users, and so on
| | 02:18 |
are just ordinary Drupal entities,
and they don't rely on those modules.
| | 02:22 |
So I'll go back up into Modules,
go back down and turn it off.
| | 02:26 |
You'll have to go through this
twice because of the dependencies.
| | 02:30 |
There is no danger in leaving them on.
| | 02:32 |
I like to turn them off just so I don't have
my site cluttered up with a lot of extra code.
| | 02:36 |
Now we can see what we created by simply
going up to Content and there are our 10 nodes.
| | 02:42 |
By default they are filled in with
this sort of fake Latin and if there is a
| | 02:45 |
graphic in your content type you'll fill
in this auto-generated graphic as well.
| | 02:50 |
In this case, it's an
article which includes graphic.
| | 02:52 |
The same is true for People.
| | 02:53 |
They are just more or less random
strings of letters, and there is the avatar
| | 02:59 |
for that person, which was
more or less randomly generated.
| | 03:02 |
You'd be surprised how useful it is
to have this so-called garbage content in
| | 03:06 |
your site while you're in development.
| | 03:08 |
I got halfway through writing this
course and kept running into cases where I
| | 03:12 |
wished I had a user or
some content to play with.
| | 03:14 |
I just created them by hand as I went,
but then I realized how useful it would
| | 03:18 |
be to have had them from the beginning.
| | 03:20 |
So of course I installed Devel
and Devel generate and off I went.
| | 03:24 |
There is just one caveat: When you
decide to delete all these junk users and
| | 03:29 |
content, be sure not to
delete the real ones by accident.
| | 03:32 |
That's especially easy to do if you
create hundreds of users or nodes.
| | 03:36 |
For that reason, I recommend creating
only as many as you think you'll need, then
| | 03:40 |
adding more later as your needs change.
| | 03:42 |
| | Collapse this transcript |
| Managing URL paths| 00:01 |
Dries Buytaert, who created Drupal and
is still its chief overlord, is a fairly
| | 00:04 |
conservative guy about what
he allows in to the software.
| | 00:08 |
One example is Pathauto, a
contributed module that's essential but it's not
| | 00:13 |
part of core Drupal.
| | 00:14 |
Pathauto changes the way Drupal makes
URLs so they are more readable both for
| | 00:17 |
users and for search engines.
| | 00:20 |
Pretty much every Drupal site I know uses it.
| | 00:22 |
I've talked about Pathauto a little in
the Drupal 7 Essential Training course.
| | 00:26 |
Now let's dive a little deeper.
| | 00:28 |
First, of course, we need to install it;
| | 00:30 |
to get it go to drupal.org/project/pathauto.
| | 00:35 |
As you scroll down you'll notice
that it has a requirements of the Token
| | 00:38 |
module. I'll Command+Click to open that
in a separate window, and then I'll load
| | 00:42 |
both of those into my site.
| | 00:45 |
Once you've downloaded them, go down
to OTHER, then ENABLED, Pathauto and Token,
| | 00:51 |
and Save configuration.
| | 00:53 |
Now let's see how it works. To do so,
I'll add some content, and let's just
| | 00:57 |
say it's a basic page.
| | 01:00 |
And we'll say, How does
pathauto work? Let's find out.
| | 01:04 |
When we scroll down to the bottom, we
see some extra settings under URL path
| | 01:08 |
settings; there is this
Generate automatic URL alias.
| | 01:12 |
We could uncheck that and type in
whatever we want, but let's see how pathauto
| | 01:15 |
works by leaving it checked, and then click Save.
| | 01:18 |
Once I do this you'll notice up here
instead of saying node 1 or node 2 or
| | 01:23 |
whatever, it'll give it
automatically a pathauto alias.
| | 01:27 |
And there it is, /content
/how-does-pathauto-work.
| | 01:31 |
As you can guess it bases the path on
the title, but you can change that, and
| | 01:35 |
the way you do that is by going to
Configuration, scroll down to URL aliases,
| | 01:42 |
and then click the new PATTERNS tab.
| | 01:45 |
And this is how you can see what the
default path is. As I said its content and
| | 01:48 |
then this token node:title.
| | 01:51 |
You can see all of the tokens that are
available by clicking this REPLACEMENT
| | 01:55 |
PATTERNS link here, and as you can see
as you click even further there are lots
| | 01:59 |
and lots and lots of them.
| | 02:00 |
So you could have your path be the
date or the user or all sorts of other
| | 02:05 |
things; there's even a Random selection here.
| | 02:08 |
Now the settings I changed up here are
for CONTENT PATHS, as you go down though
| | 02:11 |
you see that you can change the paths
for the TAXONOMY TERM pages, USERS, and so
| | 02:16 |
on. If you add additional things here,
you'll see more options, and I'll just say
| | 02:20 |
Save configuration. We didn't
make any changes but just to be safe.
| | 02:24 |
The really interesting part is in this
SETTINGS tab, this defines how Pathauto
| | 02:28 |
thinks so to speak. That is, if you have
something that's in the title that says
| | 02:32 |
the word "and," you could decide whether
it cuts that out or not, and you see a
| | 02:36 |
list of those words down here.
| | 02:38 |
There are quite a few other options
here. I'll leave it to you to explore.
| | 02:41 |
Now although I said at the beginning
of this video that Pathauto isn't in
| | 02:45 |
core; that's in Drupal 7.
| | 02:47 |
Just a week before I started recording
this course, they announced that Pathauto
| | 02:51 |
will make it into Drupal 8, and that's
great because it's one of those things
| | 02:55 |
that has the
characteristics of a perfect product.
| | 02:57 |
It does one thing, it does it
well, and everybody needs it.
| | 03:01 |
I'm told that the results make a
big difference to search engines.
| | 03:04 |
While dishonest web designers might
stuff the page full of high-impact words,
| | 03:08 |
they only have a small
amount of space to affect the URL.
| | 03:12 |
So sites like Google give credence to
pages where the URL matches the content
| | 03:16 |
well, and Pathauto helps you to do that.
| | 03:20 |
| | Collapse this transcript |
| Restricting access to downloadable files| 00:01 |
As you build increasingly complex sites,
there's a strong chance you'll want to
| | 00:04 |
make downloadable files available,
but only to registered users.
| | 00:08 |
That's what I do on tomgeller.com, and I
can show that by going to the site both
| | 00:12 |
as logged in user who has access to
those files, and you can see that from the
| | 00:15 |
admin bar up here, and in another
browser, for someone who doesn't have access.
| | 00:20 |
If I click on an item in my portfolio
here, you see that there's all sorts of
| | 00:23 |
links and then there's the file
itself right here, but if I switch over to
| | 00:27 |
the person who is not logged in and
look at the same record in my portfolio,
| | 00:31 |
that link isn't there.
| | 00:32 |
This video will show you
how to make those changes.
| | 00:35 |
The first thing you do, is you
specify a private file directory.
| | 00:39 |
To do that, click Configuration
and then scroll down to File system.
| | 00:44 |
You'll notice that you already
have a Public file system path.
| | 00:47 |
This is where such things as graphics
for your site are stored, and you only
| | 00:51 |
have one option down here, Default
download method is Public files, because
| | 00:54 |
there is no other place
where files are being put.
| | 00:57 |
To change that I'll add a
Private file system path. I'll call it
| | 00:59 |
sites/default/files/private.
| | 01:00 |
So in other word, it's a
directory inside this other directory.
| | 01:08 |
Click Save configuration, and now
you'll notice we have a second option under
| | 01:11 |
Default download method.
| | 01:13 |
Generally speaking, you want to keep it
on Public, because if you change it to
| | 01:16 |
Private that means that no files on
your site will show up to users who don't
| | 01:20 |
have access to them.
| | 01:21 |
That's okay if you're running an
intranet or something else that's especially
| | 01:24 |
secretive, but if you do it on a general-
purpose site, it's going to hide all of
| | 01:28 |
your graphics and so forth.
| | 01:29 |
Now when we did that, Drupal actually
created a directory, and we can take a look
| | 01:34 |
at that by going into the Terminal
program where I'm already logged in to where
| | 01:38 |
my web site is stored on the server.
| | 01:40 |
See what's there, yep,
there's my Drupal installation.
| | 01:43 |
I am going to descend into this sites
directory here, and then into default,
| | 01:50 |
and there's the files where public
files are, inside there is our private
| | 01:55 |
files, and there it is.
| | 01:59 |
Now you might wonder how is this any
different from these other directories
| | 02:02 |
inside the files directory.
| | 02:04 |
Well, the secret is seen by going
into it, and then taking a look at
| | 02:09 |
that htaccess file.
| | 02:11 |
I'll do more .htaccess, and that's
where the magic is, Deny from all.
| | 02:18 |
Basically Drupal is telling the web
server don't show anything in this
| | 02:21 |
directory; I'll take care of it.
| | 02:22 |
So now let's go back to Drupal
and see how that's implemented.
| | 02:26 |
To show how this works, I'll create
a Content type with a file field.
| | 02:29 |
Go up to Structure and
Content types and Add content type.
| | 02:35 |
This will be called Private files let's say,
and scroll down and Save and add fields.
| | 02:41 |
I only need to add one kind of field,
I'll call it private_file and of course
| | 02:46 |
it's a file, and save.
| | 02:49 |
Now as usual we go through
two Configuration screens.
| | 02:52 |
The first one is anyplace that this
field appears, and the second one is when
| | 02:55 |
it's specific to the Private file content type.
| | 02:58 |
But in any case we want to switch it,
so that those files are stored in the
| | 03:01 |
Private files location.
| | 03:03 |
So I click there, save field
settings, scroll down. I don't need to
| | 03:07 |
change anything else.
| | 03:08 |
Yep, still Private files and Save settings.
| | 03:12 |
There is one option you might want to
change, you can go back and do that by
| | 03:16 |
going up to that field and clicking edit.
| | 03:19 |
That is where within that Private
directory are you going to store the files
| | 03:23 |
that are specific to this field.
| | 03:25 |
I think I will actually say
myprivatefiles, and scroll down and save.
| | 03:31 |
Now let's create a node to see how this works.
| | 03:34 |
I have to warn you, files aren't
actually restricted yet. Anyone who can see the
| | 03:38 |
node can also see the file.
| | 03:39 |
I'll show this by Adding some content of
that Private file type, and scroll
| | 03:44 |
down and choose a file.
| | 03:46 |
I've already created one called test
.txt. I'll choose it and then save.
| | 03:51 |
I am going to go up and copy that URL
and then go over to my other browser where
| | 03:55 |
I am not logged into this
site, just so we can check it.
| | 03:58 |
Create a new window and paste.
| | 04:00 |
Yeah, and there it is, and as you
can see, I can still see that file.
| | 04:04 |
But watch what happens when I
go back and unpublish that node.
| | 04:08 |
I go back to my administrative browser,
click Edit, scroll down, and unpublish.
| | 04:15 |
Once again, I'll copy the URL and
switch over to my nonlogged-in browser,
| | 04:19 |
paste, it's actually the same page,
reload, and as you'd expect you can't see the
| | 04:24 |
page, but what about the file itself?
| | 04:26 |
Let's copy the link to that.
| | 04:28 |
If we can go directly to this file,
and that would be a problem, because that
| | 04:32 |
means that people would be able to just
poke around and try to figure out where
| | 04:35 |
files are being hidden, even if they
can't see the URL for a particular node.
| | 04:39 |
No, once again the access is denied.
| | 04:42 |
If this were in the Public files area,
we would be able to see that file even
| | 04:46 |
though the node was unpublished.
| | 04:47 |
So you can see, control for displaying
that file has been turned over to Drupal.
| | 04:52 |
So you might ask, what can you do with that?
| | 04:55 |
Well, the next step is to make nodes
visible to some people but not to others,
| | 04:59 |
and strangely that's not possible using
only Drupal core, but there are several
| | 05:03 |
modules that will give you that control.
| | 05:05 |
You can find them by going
to drupal.org/project/modules.
| | 05:11 |
As usual, you'll filter by compatibility,
so you only see Drupal 7 modules, and
| | 05:16 |
then take a look in the category,
Content Access Control and search.
| | 05:22 |
There are quite a few here and the
one that I find that I most often use is
| | 05:25 |
called Content Access. These are
arranged, by the way, by the most to least
| | 05:29 |
popular, so you can see that quite a lot
of people are using it. It's the second
| | 05:32 |
most popular module in this category.
| | 05:35 |
You'll find other tips and technical
details about keeping your files private at
| | 05:39 |
drupal.org/documentation/modules/file.
| | 05:45 |
Another way to get to it, is by going
back to the Configuration page, clicking
| | 05:49 |
File system, and then clicking the
link that you see here under Private
| | 05:53 |
file system path.
| | 05:55 |
| | Collapse this transcript |
| Reusing site components with the Features module| 00:01 |
One of Drupal's big strengths is in
how well its community has adapted it for
| | 00:04 |
use by large organizations, what
some people call the enterprise market.
| | 00:08 |
That market often needs to reuse
work done on one site on another site.
| | 00:13 |
Unfortunately, it's easy for
developers to step on each other's toes when
| | 00:16 |
working with core Drupal and their
work isn't always easy to transfer.
| | 00:20 |
There's a great module that
satisfies those needs called Features.
| | 00:24 |
Simply put, it takes most any settings
in Drupal's database and exports them as
| | 00:28 |
sort of quasi modules, so they can be
managed using standard file management
| | 00:33 |
tools for development, backing up, and so on.
| | 00:36 |
Here's how it works.
| | 00:37 |
You first need to add the
Module Features, you can get it at
| | 00:40 |
drupal.org/project/features.
| | 00:43 |
Now Features has a lot of documentation,
both on the project page, and also in
| | 00:49 |
this documentation link.
| | 00:51 |
Lots and lots of stuff. This whole
subsection is all about using features.
| | 00:56 |
Back to the Project page, one
interesting thing that you see here is Other
| | 01:00 |
contributed modules. I'll just open
that in another tab, and you see that
| | 01:04 |
Features actually integrates with
lots and lots and lots of things.
| | 01:08 |
So that you can export, for example,
atrium_username and Sample Content and
| | 01:13 |
other stuff like that.
| | 01:14 |
This is what the web site
looks like as I record this movie.
| | 01:17 |
It will certainly be different by the
time you watch it, but the same stuff
| | 01:21 |
should be available if you search for it.
| | 01:23 |
But we're going to go back
and just install Features.
| | 01:26 |
I Copy Link and install it as usual,
and as always I go back and enable it.
| | 01:38 |
You'll notice that there's also this
Features Tests module that appears after
| | 01:41 |
you install Features. We're going to
ignore it since we're not doing any
| | 01:44 |
testing on the site.
| | 01:47 |
So now let's create a feature.
| | 01:48 |
You might remember that we created a
Content type called Private files in the
| | 01:52 |
last video. yYu can see that by going
up to Structure, and Content types, and
| | 01:58 |
there it is Private files.
| | 01:59 |
I've also created a brand-new Drupal
site at lynda2.tomgellar.com, and if we
| | 02:04 |
go up to the Structure and Content types,
we see that that Content type isn't there.
| | 02:11 |
So we're going to move it from lynda.
tomgeller.com to lynda2.tomgellar.com.
| | 02:17 |
To do that, we go up to
Structure and then Features.
| | 02:22 |
Once again, we'll ignore this
whole thing about automated testing.
| | 02:26 |
Instead we go up to Create Feature,
and I'll call it Private files.
| | 02:31 |
There are several options here you can
add, for example, a Version number and so
| | 02:35 |
forth, but the thing that we're going
to change is this Edit component. This
| | 02:38 |
says what actually goes into the feature,
and in our case, it's a Content type.
| | 02:42 |
So we will select that, and say Private files.
| | 02:46 |
That gives us quite a bit of information
about what exactly we're exporting, and
| | 02:49 |
it tells us how it's detected.
| | 02:51 |
For the most part, it's all auto-
detected by the Features module.
| | 02:55 |
If you want more information about that,
of course, you'd read the documentation,
| | 02:59 |
which is quite lengthy.
| | 03:00 |
But we'll just go down and say Download
feature, and that does actually download
| | 03:04 |
to our download location,
which is on the desktop.
| | 03:06 |
So I'm going to go back there,
and there it is, private_files.tar.
| | 03:11 |
Before we do anything else, let's take
a quick look at what's in that feature,
| | 03:14 |
so I'll double-click this,
and then open up the folder.
| | 03:18 |
As usual, there's a .info
file, and also a .module file.
| | 03:22 |
This is what you'd see within any kind
of module that you got off of drupal.org.
| | 03:26 |
The big difference though is that this
is a sort of quasi module, it requires
| | 03:30 |
the Features module in order to work.
| | 03:32 |
But let's open it up and just take a quick look.
| | 03:35 |
I'm going to open that up using
TextWrangler, and it looks fairly familiar.
| | 03:40 |
Now I'll add that feature to
that lynda2.tomgellar.com site.
| | 03:45 |
To do so, I'm going to go into
FileZilla, my file transfer program, where I'm
| | 03:49 |
already logged in and see lynda2.
| | 03:51 |
Go into sites > all and modules,
and drag and drop it as usual.
| | 03:59 |
Now I will go back to the lynda2 site and
take a look at what's in the Modules list.
| | 04:03 |
Go up to core and go down to the
bottom and there it is, but you see we can't
| | 04:07 |
turn it on yet, because it requires Features.
| | 04:09 |
So I'll go ahead and grab that
and install it on the lynda2 site.
| | 04:13 |
I'm back on the Features project page,
copy the link, go back and install.
| | 04:23 |
Now if I go back to the
Module page, I take a look.
| | 04:27 |
So first we turn on the Features
module, and Save configuration.
| | 04:33 |
Then go up to Structure, and Features,
and there's the feature we just created.
| | 04:39 |
I'll turn it on and save settings.
| | 04:42 |
Sometimes you'll find that features you
create have conflicts you are not expecting.
| | 04:45 |
In this case, I'll say, that's
fine, I'll leave it as enabled.
| | 04:49 |
Now if we go up to Structure and
Content types, so now we have the Content type
| | 04:54 |
successfully moved from lynda.
tomgellar.com to lynda2.tomgellar.com.
| | 04:59 |
However, it doesn't actually bring
over any content. It's really just for the
| | 05:03 |
structure of your site, which is
why the module is called Features.
| | 05:07 |
You could then bring over the content
using the feeds module, as I showed you in
| | 05:10 |
the course Drupal 7:
| | 05:11 |
Reporting and Visualizing Data.
| | 05:13 |
It's incredibly easy once you've done
this with features, because the two of
| | 05:16 |
them will have exactly the same field
names. You don't have to rematch them up
| | 05:20 |
as you often do with feeds.
| | 05:21 |
I do have to mention that sometimes
when you move things from one site to
| | 05:24 |
another using Features,
you'll forget about dependencies.
| | 05:27 |
For example, in lynda.tomgeller.com,
we had earlier installed the Pathauto
| | 05:32 |
module, and we can see that by adding
some content of that Private file type.
| | 05:37 |
As we scroll to the bottom we see URL
path settings, and there's that Generate
| | 05:41 |
automatic URL alias.
| | 05:43 |
That doesn't actually exist in the lynda2
site, because we never installed that module.
| | 05:47 |
So you'll still have to go back
and check your site a little bit.
| | 05:50 |
There's a lot more to the Features
module. It does a good job of tracking
| | 05:54 |
changes you make for example, especially
if you install another module called Diff.
| | 05:58 |
You can find that at drupal.org/project/diff.
| | 06:02 |
Now what you saw here is really
the simplest used case of all.
| | 06:05 |
Once you start using Features, the ones
you create will probably include lots of
| | 06:10 |
other parts, and as you saw earlier
dozens of modules tie into Features.
| | 06:14 |
There's also something called
Features Servers, run by some
| | 06:17 |
Drupal Consultancies.
| | 06:18 |
You can see that at
groups.drupal.org/node/50278.
| | 06:25 |
Even if you don't take advantage of
Features that other people created, the
| | 06:28 |
Features module is a great way to
modularize the way you build sites.
| | 06:33 |
If you find yourself doing the same
thing in every site you create, start saving
| | 06:36 |
your own features to eliminate
repetitive work and speed up development.
| | 06:42 |
| | Collapse this transcript |
|
|
4. Speeding Up Site Administration with DrushUnderstanding and installing Drush| 00:00 |
I have a secret to tell you.
| | 00:02 |
Full-time Drupal site builders
don't use Drupal the way I've shown you
| | 00:06 |
throughout all my lynda.com courses,
pointing and clicking their ways through
| | 00:10 |
configuration screens.
| | 00:11 |
In fact, they often don't use a web
browser at all until the very end.
| | 00:16 |
Instead, they use a
command-line tool called Drush.
| | 00:21 |
This isn't a module.
| | 00:22 |
Instead, it's something that interacts with
UNIX or the command line through windows.
| | 00:27 |
I'll show you how to use Drush
throughout this section of the course by using it
| | 00:31 |
to install a new Drupal web site.
| | 00:33 |
But first we have to install Drush itself.
| | 00:35 |
We go to drupal.org/project/drush.
| | 00:40 |
Before downloading it, I just
want to show that there is a lot of
| | 00:43 |
documentation for Drush.
| | 00:44 |
It's a very well-supported module.
| | 00:46 |
The main site is drush.org.
| | 00:50 |
We chose a bunch of commands and a
FAQ and all sorts of other information.
| | 00:54 |
There's also a list of modules that
integrate with Drush and this becomes important
| | 00:58 |
as you work further and further into your site.
| | 01:00 |
There is over a hundred of
them as I record this video.
| | 01:04 |
But let's get back to the project.
| | 01:06 |
I'll go down, copy this link, and
remember because it's not actually a module,
| | 01:14 |
I'll go back onto my
terminal and into my home directory.
| | 01:18 |
I am going to install it somewhere inside
there, but outside of Drupal's home directory.
| | 01:23 |
So here I am in my home directory and
the question is where should I put it?
| | 01:28 |
Well, the traditional
place is in this bin directory.
| | 01:31 |
So I'll go down into there, see what's there,
and then I'll get that link and uncompress it.
| | 01:45 |
Now when I list again I see it's there.
| | 01:47 |
I can get rid of that .gz file if I want.
| | 01:54 |
I can see what Drush actually is by going
into that directory and poking around a bit.
| | 02:00 |
There is a quite a lot of stuff here.
| | 02:02 |
The file that we are actually going
to call on is this one here, Drush.
| | 02:06 |
The other files really just support that one.
| | 02:08 |
That's the main program.
| | 02:09 |
I am going to go up again one level.
| | 02:12 |
So now we are in bin and we
have the drush folder right there.
| | 02:17 |
In order to call up Drush, you say run
the program where I am into that drush
| | 02:22 |
folder and then call up the program
Drush, and then you issue a command.
| | 02:27 |
In this case, I will try help. And it works.
| | 02:31 |
We basically just get a list of
common commands from doing that.
| | 02:35 |
Now that whole thing about typing ./
drush/drush and so on and so forth, those
| | 02:40 |
paths becomes really, really long and
when we were in your web site's directory
| | 02:43 |
and that's where you're going to
be running Drush commands usually.
| | 02:46 |
So going to invoke a little trick
to tell UNIX to always look for this
| | 02:49 |
directory for commands.
| | 02:51 |
It's something called an Environment Variable.
| | 02:54 |
There are several ways to set them, and
I'll only use the techniques specific to
| | 02:58 |
my web host's version of UNIX.
| | 03:01 |
To see more, watch the section
Configuring Your Working Environment in the
| | 03:05 |
lynda.com course UNIX for Mac OS X users.
| | 03:09 |
First, I'll get out of this command by
hitting Ctrl+C, and I'll go back to my
| | 03:13 |
home directory by something typing cd.
| | 03:17 |
In my home directory is something
called bashrc, bash resource, and it's a
| | 03:22 |
hidden file, so it starts with a dot.
| | 03:25 |
I am going to edit that and add a line
of text that will tell my UNIX system to
| | 03:30 |
always look in that directory.
| | 03:31 |
So nano. bashrc, go down under User
specific aliases and functions and add this
| | 03:38 |
line, and then I save it.
| | 03:50 |
Basically, what I'm saying is take the
current places that you look for such
| | 03:54 |
commands and add this to the end of it.
| | 03:56 |
And yes, I want to save that.
| | 03:57 |
Then to make that effective I'll
clear the screen and type source .bashrc.
| | 04:04 |
Now we can see if that works by
simply typing drush help, where we are, and
| | 04:08 |
remember we're not in that directory
anymore. But if what we did is correct, then
| | 04:12 |
this should just work, and indeed it
does, but will it work from within our
| | 04:16 |
Drupal site directory? Let's find out.
| | 04:19 |
So here we are again in my home
directory and I want to go into webapps and
| | 04:24 |
my site is lyndalynda. Yup!
| | 04:29 |
There's my Drupal installation.
| | 04:30 |
Let's try drush help again. It worked!
| | 04:33 |
I should mention there are actually
several ways to install Drush, and in
| | 04:37 |
fact you need to follow a very different
procedure when installing it on a Windows computer.
| | 04:42 |
The details are available on the Drush
Project page at drupal.org/project/drush.
| | 04:48 |
As we scroll up, you see it fairly near the
top here, this Drush installer for Windows.
| | 04:53 |
For UNIX, I like the installation
procedure you saw here, because it shows the
| | 04:59 |
nitty-gritty of how it all works.
| | 05:01 |
When you're comfortable working in a
specific environment, however, you will
| | 05:04 |
probably want to seek out a procedure
that's optimized for your preference
| | 05:08 |
and flavor of UNIX.
| | 05:10 |
So we have Drush installed,
but what can you do with it?
| | 05:13 |
I'll show you that in the next video by
doing a complete Drupal installation in
| | 05:17 |
this folder using only Drush.
| | 05:19 |
We won't use the web interface at
all except to check out our progress.
| | 05:23 |
| | Collapse this transcript |
| Installing Drupal using Drush| 00:00 |
In the last video we
installed Drush on the UNIX web host.
| | 00:04 |
Now it's time to actually make it do
something and what better way to start than
| | 00:08 |
with a fresh Drupal installation.
| | 00:10 |
I've already created a place for it
at drush.tomgeller.com and created a
| | 00:15 |
database called tgeller_drush.
| | 00:18 |
In the last video we modified our
environment so we can call up Drush simply by
| | 00:22 |
typing drush, no matter
where we are on the web host.
| | 00:25 |
And you can see that by typing right now
to drush help and we get the help command.
| | 00:32 |
We can see where we are by typing
pwd and we're in my home directory.
| | 00:37 |
So we're ready to begin.
| | 00:39 |
Although we won't use the web interface,
I'll bring it up in a browser so we can
| | 00:43 |
see how every thing's going.
| | 00:44 |
I'll go to drush.tomgeller.com and
we have simply an empty directory.
| | 00:50 |
In fact, I'm going to go back to my
terminal and go to where that Drush site
| | 00:54 |
lives; that's cd webapps in my case,
lyndadrush, and as you see it's empty.
| | 01:04 |
First, we need to download Drupal.
| | 01:06 |
One thing to watch out for, unless you
tell it otherwise, Drush assumes you want
| | 01:11 |
to deal with the site where you currently are.
| | 01:13 |
I've sometimes moved from one directory
to another in the UNIX command line only
| | 01:17 |
then to apply Drush changes to the wrong site.
| | 01:20 |
So before we get started one more
time I'm going to just be sure, pwd, yup,
| | 01:24 |
lyndadrush that's the directory I want.
| | 01:27 |
The command we use is Drush
Download, which is simply drush dl.
| | 01:33 |
That takes a few minutes and it
doesn't give you any visual sign that it's
| | 01:37 |
happening, but once it's done it
tells you, yup, you've got it and here is
| | 01:40 |
all the things I did.
| | 01:42 |
If we do it an ls, there's the folder.
| | 01:45 |
As usual I'll go into that folder
and move everything up one level.
| | 01:48 |
You might not have to do this depending
on how you have your web host configured.
| | 01:52 |
In my case, I'm only able to do that inside
a folder so I have to take this extra step.
| | 02:01 |
Move everything up one. See what
else is left, and then move those things.
| | 02:10 |
Make sure the directory is empty, go
back up, and get rid of that directory.
| | 02:18 |
Now if we go back to our browser,
we see the usual installation screen.
| | 02:21 |
I'll just go back and reload the browser,
but I'm not going to use this screen,
| | 02:27 |
instead I'll run the installer within Drush.
| | 02:29 |
I go back to the terminal and use the
command site-install, which has a lot of options.
| | 02:36 |
Now we could look those up
on drush.org in the browser.
| | 02:39 |
In fact, if we go to drush.org you see
all of these things that go with version
| | 02:44 |
5, which is the version we're using, and
then we could go down and look for that
| | 02:47 |
site-install, and you'll see all of these options.
| | 02:51 |
But another way to do it and one that I
actually think is better is to look up
| | 02:54 |
the documentation within Drush itself.
| | 02:57 |
That way you're always sure that you're
looking at the correct version of Drush
,
| | 03:00 |
since it's getting it directly from
the Drush program you have installed.
| | 03:04 |
To do that I'll do drush help site-
install, and there are all the options.
| | 03:11 |
We can scroll up and see
there are quite a lot of them.
| | 03:14 |
But only one option is really mandatory.
| | 03:17 |
That's the one that provides the
database details. So here we go.
| | 03:21 |
The command is drush site-install and
then the option is --db-url= and then you
| | 03:29 |
add all of the details.
| | 03:31 |
First it's mysql://, followed by your
username, which is tgeller_drush in this
| | 03:38 |
case, and the password, which in this case I
use dbpass, followed by the name of the database.
| | 03:44 |
I cross my fingers and here we go. Oh,
| | 03:47 |
and you see that I got an error.
| | 03:51 |
This is actually quite common.
| | 03:53 |
It's because when you start typing in
these long commands, which have lots of
| | 03:57 |
options and even though there's only
one option here, it's a very long option.
| | 04:00 |
It's easy to mistype something.
| | 04:02 |
When I hit the up arrow in UNIX for
most systems it retypes what I just typed
| | 04:08 |
in, and I'll take a quick look through
it and here I would normally go back and
| | 04:11 |
forth between what's typed there and the
site itself and see, okay, site-install.
| | 04:15 |
Oh!
| | 04:17 |
I forgot this @localhost after the password.
| | 04:21 |
So let's give that a shot.
| | 04:22 |
I'll go back, dbpass@localhost, and now try it.
| | 04:31 |
It warns me that I'm going to create a
new site and create all of these files
| | 04:35 |
and drop tables in the database.
| | 04:36 |
Yes, we do want to continue.
| | 04:38 |
And I should mention I already
set up that database. So yes.
| | 04:43 |
This takes a little while
and everything works great.
| | 04:47 |
Now you'll notice that it came up
with this default username of admin and a
| | 04:52 |
randomized password, let's
see if that actually works.
| | 04:54 |
I'm going to copy this password from
my Terminal window, go back to the site,
| | 04:59 |
and then simply reload drush.tomgeller.
com and indeed there we are, it's a fully
| | 05:07 |
functional site installation
from just that one command.
| | 05:10 |
Now it gave me a default title here
site-install and it had that admin as
| | 05:14 |
username and that password.
| | 05:16 |
Let's just make sure we can log in.
| | 05:19 |
It included a few other things by
default, which we can see as we go to
| | 05:23 |
Configuration and then Site information.
| | 05:25 |
For example, admin@example.
com is the e-mail address.
| | 05:30 |
It just picks it out of the air really.
| | 05:32 |
Now I'm going to go back and do exactly
the same thing, but this time I'm going
| | 05:36 |
to include my own username and e-mail
address and all of that other stuff.
| | 05:40 |
One great thing about the site-install
command is that you don't even have to
| | 05:43 |
delete the old database tables or
settings.php file to make it work, Drush
| | 05:48 |
takes care of it for you.
| | 05:50 |
So normally I would come in and I
would fiddle around a little bit, but
| | 05:52 |
let's just go ahead.
| | 05:54 |
Now this is going to be an
extremely long command, and I'm not going to
| | 05:57 |
explain all the options.
| | 05:58 |
As you know you can take a look at the
information on drush.org to get all the details.
| | 06:03 |
We're going to be starting with a
clean slate, so I might as well clear the
| | 06:06 |
screen with Ctrl+L. Okay,
here we go. Wish me luck.
| | 06:14 |
Once again we get the warning, and the
installation continues as before, only
| | 06:20 |
this time with the options that
we specified. And there we go!
| | 06:24 |
Once again it tells us who the super
user is, user1 and the user password.
| | 06:28 |
Let's give that a try. Go back up here;
| | 06:33 |
try user1 and user1 and user1pass.
| | 06:39 |
The first thing you notice even before
we get in is we've changed the title as
| | 06:43 |
we wanted, but let's see if it's all
worked as expected. Yup, there it is!
| | 06:47 |
If we go to user1, we see that it has the
e-mail address that we asked for and so forth.
| | 06:52 |
So you can see just how much power Drush
gives you and we've only just gotten started.
| | 06:57 |
You will have to get used to the
command-line interface, but the good news is
| | 07:01 |
that you won't have to memorize
all those switches and options.
| | 07:04 |
Just keep the documentation open in a
web browser in the background and switch
| | 07:08 |
back and forth as needed.
| | 07:09 |
That's basically what I do and in fact
I have it right here as you saw earlier.
| | 07:14 |
Again, that documentation is found at drush.org.
| | 07:18 |
In the next video I'll do a few more
Drush commands just to give a sense of how
| | 07:22 |
to build a site using Drush.
| | 07:24 |
| | Collapse this transcript |
| Building a site using Drush| 00:00 |
In the previous video you saw how a
single Drush command can take the place of a
| | 00:04 |
dozen clicks when installing a new site.
| | 00:07 |
That economy of effort continues as
you build and maintain the site as
| | 00:10 |
Drush includes commands to install modules,
clear caches, manipulate the site database.
| | 00:16 |
That is, to pretty near any
kind of big site modifications.
| | 00:20 |
This video shows you a few common steps
in building a site using Drush as well
| | 00:24 |
showing off some of its limitations.
| | 00:26 |
First, let's take a look around our site.
| | 00:28 |
As I mentioned before we were able to
name it when you first installed it using
| | 00:31 |
Drush as Drush example site, but other
than that there's no content, no special
| | 00:37 |
content types, or anything like that.
It's basically just a stock installation.
| | 00:41 |
One thing I am going to do is I am going
to open another window here with drush.org.
| | 00:46 |
This is so I can keep the reference
behind the other screen and make sure that
| | 00:50 |
you click on the correct tab here.
| | 00:51 |
I'm using version 5.
| | 00:54 |
All right, now we are ready to get going.
| | 00:55 |
The first thing we are going
to do is grab some modules.
| | 00:58 |
Two I use in most sites are Token and Pathauto.
| | 01:02 |
I'm already logged into my site
and in that directory as you can see.
| | 01:06 |
The command that we want is drush pm-
download and then the name of the module
| | 01:11 |
we want to download.
| | 01:13 |
That takes a minute and
then gives us a report back.
| | 01:16 |
One interesting thing is I use this pm-
download, that's actually the same as dl.
| | 01:21 |
Some of these commands have aliases so you
can use either the short form or the long form.
| | 01:26 |
In this case, pm stand for package manager,
which is a common thing in the UNIX world.
| | 01:30 |
We will do the same thing
with the Pathauto module.
| | 01:38 |
Just to prove that they are there in a
familiar interface I am going to go back
| | 01:41 |
to the web site and click Modules.
| | 01:45 |
Close up the core group and
there they are, Pathauto and Token.
| | 01:48 |
We could continue here by clicking, but let's
go back to our Terminal and enable them there.
| | 01:52 |
I do drush pm-enable and
then the name of the module.
| | 01:58 |
Now Pathauto requires Token, but I'm
going to do the same thing that I usually
| | 02:03 |
do in the graphical interface.
| | 02:05 |
I am going to just say Pathauto
and see if it will actually force the
| | 02:09 |
dependencies to be enabled as well.
| | 02:14 |
And indeed it does. Yup, I want
to continue. And we are done.
| | 02:20 |
If we go back to the web interface, we see
exactly what we expected, they've been enabled.
| | 02:29 |
This screen that lists all of the
modules actually exists in Drush as well.
| | 02:33 |
It's drush pm-info, but be
warned it's a lot of information.
| | 02:41 |
As you see it gives information
about all the modules and themes that are
| | 02:44 |
installed along with their
versions and all sorts of other stuff.
| | 02:47 |
If you want to cut that down, you can do
it with drush pm-info and then the name
| | 02:52 |
of the package you want,
like let's say Pathauto.
| | 02:57 |
There, much easier.
| | 02:58 |
Another thing you can do is
drush pm-info and then pipe it;
| | 03:03 |
that's the vertical line on
your keyboard, through more.
| | 03:07 |
That means it'll take that information
and put it through the more program in UNIX.
| | 03:12 |
Now we can page through it just by
pressing the spacebar or escape from it by
| | 03:16 |
pressing Q. I will clear
the screen to keep this clean.
| | 03:22 |
That's an example of a Drush command
that doesn't actually change anything, but
| | 03:26 |
rather just displays information.
| | 03:28 |
Two more you should know about are drush
core-requirements and drush core-status.
| | 03:38 |
Interestingly, the second one, core-status, nothing
exists exactly like this in the web interface.
| | 03:44 |
Now we can combine that ability
to look at information and change
| | 03:48 |
information using drush.
| | 03:49 |
I will give you an example.
| | 03:50 |
First, I will clear the screen and then
say drush field-info and then say would
| | 03:57 |
like to take a look at the fields.
| | 04:00 |
And it tells me all of the
fields that are in my site.
| | 04:03 |
We can then create a field
with drush field-create article.
| | 04:09 |
It asks us for a variety of
things in an interactive manner.
| | 04:12 |
I will just call it twitter_promo.
| | 04:15 |
We want it to be a text field so that's
number 13, and we have only one option
| | 04:21 |
really, Cancel or add a Text field, so yes.
| | 04:25 |
Now it doesn't go through all of the
options, because there are so many.
| | 04:28 |
Instead it gives you this URL,
which you would then copy, but there is
| | 04:32 |
something to watch out for.
| | 04:34 |
Be careful that the domain is what it should be.
| | 04:38 |
In this case, Drush doesn't
exactly know what domain it's on.
| | 04:42 |
So I'm going to have to go there myself.
| | 04:43 |
It's drush.tomgeller.com, but
everything else should be correct. Let's see.
| | 04:47 |
Yup, and in fact I can now put in all
the other options that I couldn't do
| | 04:53 |
very easily with Drush.
| | 04:55 |
As you might imagine, Drush cannot
only download modules but also themes.
| | 04:58 |
I will do that very quickly.
| | 05:01 |
First, let's decide on
what theme we want to get.
| | 05:03 |
I am going to go to drupal.org/project/
themes, and let's see marinelli I think is
| | 05:10 |
the one that I want. Yup, there it is!
| | 05:17 |
So we know that we want to download
marinelli, but there's something to watch out for.
| | 05:21 |
What we see here at the top in the
title is what's called the human readable
| | 05:25 |
name of the theme or module we want.
| | 05:27 |
As you might remember Drupal has both a
human readable name and a machine name,
| | 05:31 |
and what we need is the machine name.
| | 05:33 |
Pretty much always it's going to be
the end of this URL, project/marinelli.
| | 05:38 |
Another way you can find out the name
is by downloading the file itself as I'll
| | 05:42 |
do here. Then go back to finder and see
what the name is, and yup, there it is,
| | 05:47 |
marinelli all lowercase.
| | 05:50 |
But I'm not actually going to use those.
| | 05:52 |
Instead, I will go back into my
Terminal and download them from that using
| | 05:56 |
Drush, once again, and there we go.
| | 06:05 |
One interesting thing I want to point
out is that when it downloaded the module,
| | 06:09 |
it put it into sites > all > modules.
| | 06:12 |
In this case, it knew that it was a
theme and put it into sites > all > themes.
| | 06:16 |
We could find that out by going
through the directory, but of course you can
| | 06:19 |
also do that on your own time.
| | 06:20 |
Let's move on and enable it
with drush pm-enable marinelli.
| | 06:26 |
It says, do we really
want to do that. Yes, we do.
| | 06:31 |
All right, now let's go back to
our site and see what happened.
| | 06:34 |
Go home and see if we are in
the marinelli theme. We are not.
| | 06:38 |
Why is that?
| | 06:39 |
Well, the thing is you might remember
that themes have both enablement and then
| | 06:43 |
setting as default, and it
didn't actually set as default.
| | 06:46 |
All that it did was it took it
out of this Disabled Themes area.
| | 06:50 |
There is no direct Drush command to
set a theme as the default, but Drush can
| | 06:54 |
change the value of any variable on your site.
| | 06:57 |
Which means it can effectively check
any box or change any setting as you would
| | 07:00 |
do the web interface.
| | 07:02 |
The trick is in knowing the variable name.
| | 07:05 |
Sussing those out is
beyond the scope of this video.
| | 07:08 |
So I will just show you how to turn
this on using the Theme Default variable,
| | 07:11 |
which happens to be theme_default.
| | 07:14 |
I will go back to my Terminal.
| | 07:15 |
First, I will clear the screen and
then drush variable-set theme_default,
| | 07:24 |
that's the variable name, and marinelli.
| | 07:28 |
Supposedly, it worked, let's go
back to our site and make sure.
| | 07:34 |
And as you can see, it did.
| | 07:36 |
Finally, I want to show you an
incredibly useful Drush command that takes the
| | 07:39 |
place of pretty much everything that
you'll see in the video of about backing up
| | 07:43 |
with the Backup and Migrate module.
| | 07:45 |
It's called Archive Dump.
| | 07:47 |
I go into Terminal and it's
simply drush archive-dump.
| | 07:53 |
That takes a minute and then it
tells us where it put that file.
| | 07:56 |
Now you will notice it put it
outside of our web apps directory.
| | 08:01 |
It's actually in my home directory/
drush-backups, which it just created.
| | 08:05 |
That's good, because you don't want to put
it inside with your Drupal site installation.
| | 08:10 |
If it did that and then you deleted
that by accident you'd have no backup.
| | 08:13 |
There is also, by the way, drush
archive-restore, which works pretty much
| | 08:20 |
exactly as you'd expect.
| | 08:21 |
The good thing about the way that Drush
does this is it saves both the files and
| | 08:26 |
the database, which the Backup and
Migrate module doesn't do for example.
| | 08:30 |
Well, that sure was a lot, wasn't it?
| | 08:32 |
And it should be clear that
it's only the tip of the iceberg.
| | 08:35 |
Drush is unbelievably deep and it gets
deeper as you install other modules, as
| | 08:40 |
many of them include hooks to Drush.
| | 08:43 |
You can see some of that by going
to Drush.org and clicking Resources.
| | 08:48 |
Once there scroll down and you see
this Contributed modules with drush
| | 08:51 |
integration and once again
there are many, many more than that.
| | 08:56 |
Drush opens the door to a whole new
world of Drupal site management and
| | 09:00 |
learning it is a big step to becoming
a Drupal professional or just someone
| | 09:05 |
with pro-level skills.
| | 09:06 |
| | Collapse this transcript |
|
|
5. Keeping Your Site Safe and SecureBacking up with the Backup and Migrate module| 00:00 |
It's not a question of whether your
site will some day run into problems.
| | 00:04 |
It's a question of when.
| | 00:06 |
It's not usually a matter of so-
called computer error either.
| | 00:09 |
I found that catastrophic failures
happen on my site most often when I'm doing
| | 00:13 |
routine maintenance.
| | 00:14 |
The best defense is a good offense,
so this video will talk about how to be
| | 00:18 |
ready at all times to recover from
problems you're sure to encounter.
| | 00:23 |
As you know, a Drupal site
comprises a database and a set of files.
| | 00:27 |
You have to back up both of them.
| | 00:29 |
I talked about using the archive-dump
command in Drush to back up both, but
| | 00:33 |
now I'd like to show you a little trick
that uses a module called Backup and Migrate.
| | 00:38 |
To get it, go to drupal.
org/project/backup_migrate.
| | 00:43 |
We'll install this in the usual way.
| | 00:46 |
Copy the URL, go back to our site, and
install it from the Modules page and paste it in.
| | 01:02 |
Then we enable it. Scroll down.
| | 01:12 |
That's really all that you need.
| | 01:13 |
From here, it's quite a
simple and elegant module to use.
| | 01:16 |
Just go up to Configuration and then
down under System click Backup and Migrate.
| | 01:22 |
By default, it'll download your
entire database to your computer.
| | 01:26 |
So I click Backup now.
| | 01:27 |
It takes a minute to
package it up and then downloads.
| | 01:31 |
If I go to my desktop, I then see it
right there, and of course, I could open
| | 01:35 |
that and take a look at it in any text
editing program that I like. And there we go!
| | 01:45 |
But no backup program would be worth
anything if it doesn't also restore.
| | 01:49 |
And in fact, Backup and
Migrate does exactly that.
| | 01:52 |
We go back to our site and click the
Restore tab and then we can choose a file
| | 01:56 |
and just do exactly as you'd expect.
| | 01:58 |
I choose it, click Restore now;
| | 02:02 |
this may take a little while.
| | 02:04 |
But when it's done, we get a success
message, and in fact our site is back as it
| | 02:08 |
was according to the time
when we made that backup file.
| | 02:12 |
So that's the module's basic operation
and you could download your Drupal files;
| | 02:16 |
that is, not the database separately
using the techniques you saw in the video,
| | 02:20 |
transferring files to and from your web host.
| | 02:23 |
But we can do better.
| | 02:25 |
We're going to change the way that
Backup and Migrate operates so it'll save
| | 02:28 |
that file into a directory so that when we
download our files we'll also have our database.
| | 02:34 |
The way we do that is instead of doing a
backup to our desktop, we do it to the server.
| | 02:39 |
We change Download to Manual
Backups Directory, and Backup now.
| | 02:44 |
But where did it save that backup?
| | 02:46 |
To find out, we click the Destinations
tab and we see Manual Backups Directory.
| | 02:51 |
It's in private://backup_migrate/manual.
| | 02:55 |
So the question is what is that private?
| | 02:57 |
Well, you can find that out by
looking in your file system settings.
| | 03:01 |
In a previous video we set a private
files location that's under Configuration
| | 03:08 |
and File system, and there it is.
| | 03:10 |
So it's sites/default/files/private,
followed by the other things that were in
| | 03:15 |
that screen, backup_migrate/manual.
| | 03:18 |
We can determine that's
| | 03:19 |
true by going into
our Terminal and looking there.
| | 03:24 |
I'm already logged in and
looking at where my Drupal site lives.
| | 03:27 |
We go into sites/default
and see what's in there;
| | 03:32 |
make sure that I'm in right place, files/,
private/, and you see we now have this
| | 03:42 |
backup_migrate directory that it created.
| | 03:45 |
And inside there, as you might
imagine, is the manual folder.
| | 03:51 |
When we go in there, of course, we
find the backup that we just made. Yup!
| | 03:55 |
And there it is.
| | 03:58 |
One other thing that Backup and Migrate
does is it creates this test.txt file.
| | 04:03 |
The reason for that is to make sure
that you're not leaving that directory open
| | 04:07 |
so that anybody can grab your backups.
| | 04:09 |
We will do a pwd and just
copy the end of this URL.
| | 04:14 |
I'll then back to my directory
and add that on to the domain.
| | 04:18 |
In other words, I'm trying to go
directly into that folder without using any
| | 04:22 |
links on the site or anything like that.
| | 04:24 |
If I can see that test.txt file in that
folder, we'll know that it's not protected.
| | 04:29 |
So go to that URL /test.txt. Good!
| | 04:34 |
We can't actually see what's in there.
| | 04:36 |
That means that we also can't see all of
those manual backups we're saving to the server.
| | 04:41 |
So we can both download the
database or we can store it in our Drupal
| | 04:45 |
installation site folder on the server.
| | 04:48 |
But what's great about that is we
can set up schedules so that there are
| | 04:52 |
automatic backups to be stored on the server.
| | 04:55 |
To do that, you would go to the screen,
which you can get to directly by going
| | 04:58 |
to Configuration and Backup and
Migrate again, and then go to Schedules and
| | 05:03 |
I'll add a schedule.
| | 05:05 |
I'll call it Daily.
| | 05:06 |
It'll be Default Settings;
| | 05:09 |
I'll get back to that in just a minute.
| | 05:11 |
Backup every day and I'm only
going to keep a week's worth of files.
| | 05:16 |
The Destination will be the Scheduled
Backups Directory, and then Save schedule.
| | 05:22 |
Now we won't wait around all day for
that backup to occur, but as you might
| | 05:25 |
guess, it shows up in pretty much the same
area as the manual backup that we just did.
| | 05:30 |
And if we go up to Destinations, we see the
Scheduled Backups Directory and it's very similar.
| | 05:36 |
It's just in a subdirectory called scheduled.
| | 05:39 |
So how does this help you?
| | 05:41 |
Well, because the files are being
stored in that sites folder, you can simply
| | 05:45 |
download your entire Drupal
installation, and you'll get your backups along with
| | 05:49 |
it whenever you do your
backup of the entire site.
| | 05:51 |
So you now have a way to back up both
the files and the databases, all in one go.
| | 05:59 |
I do have a few caveats though.
| | 06:01 |
First of all, although the files that
Backup and Migrate creates are in the SQL
| | 06:05 |
language, you probably won't be able
to import them directly into phpMyAdmin.
| | 06:10 |
They're too specialized;
| | 06:11 |
they have a little bit of extra sauce
to them that makes them incompatible with
| | 06:15 |
a lot of things that you do on phpMyAdmin.
| | 06:18 |
Second, it's worth exploring the
options on that Advanced Backup page.
| | 06:22 |
Let's go back and take a quick look.
| | 06:25 |
Go back to Backup and Migrate and then
see this tab up here, Advanced Backup.
| | 06:31 |
There are a lot of options having to
do with the site name, whether it gets a
| | 06:35 |
timestamp, which tables it includes, and so on.
| | 06:41 |
You might remember that I said I'd
come back to that thing about this being
| | 06:44 |
the default setting.
| | 06:45 |
Well, you can actually create a new
setting simply by going into Advanced Backup
| | 06:51 |
and then saving it down
here under Save these settings.
| | 06:55 |
My third caveat is to be aware
that these backups will take space.
| | 07:00 |
The backup strategy I outlined
earlier means you only have to save seven
| | 07:03 |
database files, but a more likely
scenario is that you'll save each year for the
| | 07:07 |
last 10 years or something like that,
so you end up with 30, 40, or 50 files.
| | 07:11 |
That doesn't hurt you very much when
you're first building your site, but after
| | 07:15 |
it's been running for a while, your
site might be as big as a gig, which means
| | 07:18 |
you're burning up 30, 40, or 50 gigs of space.
| | 07:21 |
Basically, you have to decide for
yourself what balance of safety and
| | 07:25 |
convenience you need and set your
backup strategy according to that.
| | 07:29 |
My fourth caveat is that you back up
your entire Drupal directory, not just the
| | 07:33 |
sites folder, although your sites
folder is what contains the database backups.
| | 07:37 |
You could just do that.
| | 07:39 |
But I've sometimes found it inconvenient
to have to match up the sites directory
| | 07:43 |
to the right version of Drupal,
especially if you haven't been completely on the
| | 07:46 |
ball about updating the
version of Drupal that you have.
| | 07:50 |
Whatever system you set along make it a
part of your habit and be sure to test
| | 07:55 |
your backups once in a while.
| | 07:57 |
A backup that doesn't work is
the same as no backup at all.
| | 08:00 |
Finally, check out the section in this
course about Drush to learn a much faster
| | 08:04 |
way to back up and restore your site.
| | 08:06 |
It takes some preparation and learning,
but ultimately you might find it a
| | 08:10 |
lot more convenient.
| | 08:11 |
The important thing is you now have two
different ways to back up and no excuse
| | 08:15 |
not to follow one of them.
| | 08:17 |
| | Collapse this transcript |
| Moderating comment spam| 00:00 |
Anything that can be used can also be abused.
| | 00:03 |
That's especially true online
where anonymity forms a shield
| | 00:07 |
against responsibility.
| | 00:09 |
Sadly, that means you have to plan your
site knowing that it'll be attacked by
| | 00:13 |
anonymous vandals and profiteers,
but you do have tools to stop them.
| | 00:17 |
This video discusses some of them.
| | 00:20 |
The best way to solve a problem is to
ensure it doesn't pop up in the first place.
| | 00:24 |
So let's start by checking our permissions.
| | 00:26 |
To do that go up to People and
Permissions, and by the way this site I just
| | 00:31 |
installed a few hours ago and I
haven't changed anything about the People
| | 00:35 |
or Permissions yet.
| | 00:37 |
As you know there are three default
roles Anonymous User, is someone who's
| | 00:40 |
not logged in, Authenticated User is
someone who is in, and there's a special
| | 00:44 |
Administrator role.
| | 00:45 |
The thing that you mostly want to
watch out for is Anonymous User.
| | 00:48 |
So let's just quickly scroll down here.
| | 00:50 |
They can view comments,
can't cause a problem with that.
| | 00:54 |
They can use this text format; that's okay.
| | 00:57 |
They can view content.
| | 00:59 |
So this is pretty well locked down actually.
| | 01:02 |
Now let's take a look at the
Authenticated User, by scrolling all the way back
| | 01:06 |
up and then start scrolling down
again looking at that middle column.
| | 01:11 |
They can view comments. Oh,
| | 01:12 |
Post comments -- this is
where a problem could come in.
| | 01:16 |
The biggest problem is
the Skip comment approval.
| | 01:19 |
If you leave this checked. it means that
people will be able to create an account
| | 01:23 |
and then post all the comments that they want.
| | 01:26 |
So that leads us to the second part: how
do people create accounts on your system?
| | 01:31 |
To see that go up to Configuration and
Account Settings, scroll down a little
| | 01:37 |
bit under Registration and Cancellation.
| | 01:40 |
By default, anyone can register an
account, but they won't be able to post
| | 01:44 |
comments until you approve that account.
| | 01:47 |
So effectively that does stop spam
as long as you watch who's actually
| | 01:51 |
registering those accounts.
| | 01:53 |
And that can be kind of difficult
because when all you have is a name and e-mail
| | 01:56 |
address, you can't really
tell one person from another.
| | 02:00 |
So another possibility is to only
allow the administrators to make accounts.
| | 02:04 |
The thing that you want to be
especially aware of is if you have visitors,
| | 02:09 |
that means that anyone can create an account
without getting an administrator to approve it.
| | 02:14 |
If that's so and you have Skip comment
approval on authenticated roles, then you
| | 02:18 |
have just opened yourself up to a world of spam.
| | 02:21 |
So those settings take care
of a big part of the problem.
| | 02:24 |
But what if you need to keep your
commenting system open to anonymous
| | 02:27 |
visitors for some reason?
| | 02:29 |
First, I would consider again
requiring some kind of login from them, even if
| | 02:34 |
it's not for your own site specifically.
| | 02:37 |
Core Drupal comes with a module called
OpenID that lets people log in with their
| | 02:41 |
credentials from Facebook,
Google, and other membership sites.
| | 02:44 |
You can see that by going up to Modules,
then scrolling down within this core
| | 02:50 |
module group, and there it is, OpenID.
| | 02:54 |
It's there but it is turned off by default.
| | 02:57 |
I talk more about it in the video on logging in
using Facebook, Twitter, and other sites.
| | 03:02 |
You can also learn about it by going to
drupal.org/documentation/modules/OpenId.
| | 03:11 |
But let's say they've logged in.
| | 03:12 |
You still have ways to throw up
barriers to spam, and in fact there's a whole
| | 03:17 |
category of Drupal modules
dedicated to this very matter.
| | 03:21 |
To see it, go to drupal.org/project/
modules. As usual filter by 7.x, and then look
| | 03:34 |
under the category Spam Prevention.
| | 03:39 |
As usual these are ordered by
popularity, and these top two I found have been of
| | 03:44 |
great help in all the sites that I have run.
| | 03:47 |
The first one throws up
what's called the CAPTCHA.
| | 03:49 |
That is a test that is easy for human
to figure out, but hard for a machine.
| | 03:54 |
It's usually something visual like this,
but there's a lot of plug-ins as well
| | 03:57 |
so that you could have it, for example,
pick the cat out of this group of
| | 04:00 |
pictures; again a machine won't be able to do.
| | 04:04 |
The second one is Mollom, which was
created by the person who created Drupal in
| | 04:08 |
the first place, Dries Buytaert.
| | 04:10 |
It adds a little bit of intelligence to
the whole process about whether to show
| | 04:14 |
a CAPTCHA or not, and it has some other features.
| | 04:17 |
I talk about it in the video Slowing
Spam in my course Drupal Gardens Essential
| | 04:21 |
Training, which is also on lynda.com.
| | 04:24 |
That leads us to our to our next line
of defense, checking unapproved comments.
| | 04:29 |
If you remember back when you looked to
the Permissions, there are two having to
| | 04:32 |
do with comments, one is Post comments
and the other is Skip comment approval.
| | 04:37 |
People who can post comments, but not
skip approval, get their comments put
| | 04:41 |
into an approval queue.
| | 04:42 |
I will go back to my site
so you can see where that is.
| | 04:45 |
Go up to Content, then to Comments, and you
find it in this Unapproved comments group.
| | 04:52 |
We don't have any since of
course this is not live site.
| | 04:55 |
But if you do have anything here you
would look at the comment and then you
| | 04:58 |
could choose whether to publish or delete it.
| | 05:00 |
The problem with this system is that
there may be comments there that you just
| | 05:04 |
don't know about because
you haven't been notified.
| | 05:06 |
On my own site, tomgeller.com, I have it
set up so that I get a notification using
| | 05:11 |
only core Drupal's modules Trigger and Action.
| | 05:15 |
I'll show how that works.
| | 05:16 |
I'll go to my site where I am
already logged in as the administrator.
| | 05:21 |
I click Structure and scroll to
the bottom and look at Triggers.
| | 05:26 |
Now the Triggers module is not turned
on by default when you install Drupal,
| | 05:29 |
although it is part of core.
| | 05:30 |
So of course we will have to go to Modules;
turn it on before you can do this.
| | 05:34 |
But let's take a look, and then I'll
look at what the triggers are for Comments,
| | 05:39 |
and as you can see I have set one up to
e-mail me whenever a comment is posted.
| | 05:44 |
Now this is the way to do it using
core Drupal's modules, but you can also do
| | 05:47 |
it using the much more flexible Rules
module, which I discussed elsewhere in the course.
| | 05:52 |
So there are the basics
in spam comment moderation.
| | 05:56 |
Remember that you will have to make
similar efforts if you allow people to
| | 05:58 |
create full nodes as well as comments,
and you can see whether they have that
| | 06:02 |
permission once again by going up to
People and Permissions, and then scroll down
| | 06:08 |
until you see the Node group.
| | 06:15 |
Once there for each content type there
is a group of permissions such as for
| | 06:20 |
here for Blog entry.
| | 06:22 |
You might also have to watch content
that you have coming in automatically from
| | 06:25 |
outside sources such as through RSS feeds.
| | 06:29 |
One strategy I try to keep in mind is
to continually ask myself: Just how much
| | 06:33 |
access to my site do visitors need? Is the
value of their comments outweighing the
| | 06:38 |
bother of moderating them?
| | 06:39 |
A conflict arises because Drupal
encourages openness and sharing, which society
| | 06:44 |
itself too often mishandles.
| | 06:47 |
| | Collapse this transcript |
| Migrating from Drupal 6 | 00:00 |
A central tenet of Drupal is that
major versions Drupal 5, 6, and 7 and so on,
| | 00:06 |
aren't compatible with each other.
| | 00:08 |
That causes some frustration because
historically it's meant that you need to
| | 00:11 |
upgrade your site to the next
version every four years or so.
| | 00:14 |
And even then you have to figure out
what to do about modules that don't exist
| | 00:18 |
for the new version.
| | 00:19 |
The central process for
migrating is actually quite easy.
| | 00:22 |
It's the little site bits
that are sometimes tricky.
| | 00:25 |
I'll show you some of the common problems and
point you to resources in case you get stymied.
| | 00:29 |
I am going to go very quickly
since there are a lot of steps.
| | 00:34 |
I have already installed an
extremely simple site on Drupal 6.
| | 00:37 |
The truth is your site will probably
have aspects that go well beyond this one.
| | 00:41 |
But the techniques you see here will let
you migrate a site of any size and complexity.
| | 00:46 |
And actually this site
isn't as simple as it looks.
| | 00:49 |
If we go up to the Module list,
you'll see that we actually have quite a
| | 00:52 |
few things installed.
| | 00:57 |
Besides the core we have CCK,
image, and a bunch of other things.
| | 01:04 |
The most valuable tool for this is
the Upgrade Status module, which you can
| | 01:07 |
get at drupal.org/project/upgrade_status,
scroll down, and I'll install it in the usual way.
| | 01:16 |
Because we are using Drupal 6, we actually
have to go onto the server to install it.
| | 01:21 |
Here we are in that site's directory
and I go into sites/all/modules/ and
| | 01:30 |
install it as usual.
| | 01:40 |
Then I reload my Modules page and turn it on.
| | 01:43 |
You'll need both Upgrade status and
Upgrade assist and Save configuration.
| | 01:50 |
When you do that you see this list over
here in the left column and we're just
| | 01:54 |
going to walk through the steps it tells us.
| | 01:56 |
Now mind you, some of the steps are
pretty complicated, so we are going to
| | 01:59 |
do this in two videos.
| | 02:01 |
First, we will complete
the Drupal 6 part of things;
| | 02:04 |
then we'll start again with
the Drupal 7 part of things.
| | 02:06 |
There is a wall between the two parts
because you're going to be using the same
| | 02:10 |
database, and once you upgrade it you
won't be able to go back to Drupal 6.
| | 02:14 |
So be sure that you do backups as you go.
| | 02:17 |
And in fact, before we go further I
am going to use a Drush command to
| | 02:20 |
backup the entire site.
| | 02:22 |
You can learn how to do this in the
section of this course about Drush.
| | 02:25 |
All right, now we are ready to get started.
| | 02:35 |
We click the first link, and here we
check to make sure that all the modules we
| | 02:39 |
have are up to date. Oh!
| | 02:42 |
And in fact one of them
isn't up to date, Pathauto.
| | 02:45 |
So I'll copy that link and install it.
| | 02:53 |
Now if I reload this page, we can see
that everything is up to date, and that
| | 03:01 |
item has been checked off.
| | 03:03 |
Enable the Maintenance mode,
go offline that is, and save.
| | 03:08 |
You'll notice that it skips over this
Verify Maintenance theme, but if you want
| | 03:11 |
to go back and make sure of it, I
click there and I go back and I say oh okay
| | 03:15 |
Maintenance theme is Bluemarine.
| | 03:18 |
If there was any problem, it
would've told us about this.
| | 03:20 |
Of course I could switch it to Garland,
which I also know is available in Drupal
| | 03:24 |
7, that's not a bad idea.
| | 03:26 |
And then I'll say Save configuration.
| | 03:28 |
Then I disable all modules that are
not part of core Drupal. We could do that
| | 03:33 |
by going to the Modules page and manually
turning them off, but I like this interface.
| | 03:38 |
There is one thing that's strange though.
On the Modules page when something is
| | 03:41 |
checked, it means it's enabled.
| | 03:43 |
On this page when it's checked, it
means that they're going to turn it off.
| | 03:48 |
I'll accept all of this and click Disable.
| | 03:51 |
One thing to notice, remember how
there were two modules that were part of
| | 03:55 |
Upgrade Status, there was Upgrade status
and Upgrade assist, this only turns off
| | 03:59 |
one of them, because the other one is
what gives us this checklist over here,
| | 04:02 |
and in fact it will survive as
we go into Drupal 7. Very good!
| | 04:10 |
You'll notice that it has check here
for Backup current site, that's just a
| | 04:13 |
reminder and of course we already did this.
| | 04:16 |
The next step is to replace Drupal core.
| | 04:19 |
At this point we've come to the end of
what we do on Drupal 6, because the next
| | 04:22 |
thing we are going to do is
download and install Drupal 7.
| | 04:26 |
I'll pick that up in the next video.
| | 04:28 |
| | Collapse this transcript |
| Migrating to Drupal 7| 00:00 |
When we last left our migration project,
we'd finished all that we were going to
| | 00:04 |
do with Drupal 6 site.
| | 00:06 |
Now we are going to replace the Drupal
core with Drupal 7, and as I mentioned
| | 00:09 |
before, at this point, you'll no
longer be able to use your Drupal 6 site,
| | 00:13 |
because we're going to delete the entire
set of software and then we're going to
| | 00:17 |
run a database update.
| | 00:19 |
We made a backup when we first started.
| | 00:21 |
If you didn't, do so now, here we go.
| | 00:24 |
We then click Replace Drupal
core in the Upgrade status module.
| | 00:29 |
This gives some fairly complicated
instructions, so I'll go through them step by step.
| | 00:33 |
First, Create a new virtual
host, and it suggests one to create.
| | 00:37 |
I've already done so at d7.tomgeller.com,
and as you can see there's nothing there.
| | 00:44 |
We just have to remember to use that URL;
| | 00:46 |
instead of the one it
suggests whenever it mentions it.
| | 00:50 |
Then I download the new Drupal core
into that directory and it conveniently
| | 00:54 |
gives me a link to that page.
| | 00:58 |
Go down, copy the link, and then go over
to my site, where I'll go back up to my
| | 01:06 |
Drupal 7 site and download there.
| | 01:08 |
Right now I am in the middle of my Drupal
6 site, so I have to go up a few levels.
| | 01:12 |
Yup, I am in the right place.
| | 01:22 |
Because I have Drush installed,
I can use it to download Drupal.
| | 01:28 |
By default, it will grab the latest
version of the most current integer versions,
| | 01:32 |
so in this case 7 point whatever, yup 7.12.
| | 01:34 |
Then as I've done elsewhere in this
course, I bring it up one level to put it at
| | 01:41 |
the root level of where my
web host is looking for this site.
| | 01:47 |
You might not have to do this.
| | 01:53 |
We go back to our instructions, and it
says to Copy all of the existing modules
| | 01:58 |
from the old version of Drupal core,
into the same location of the new version.
| | 02:03 |
Here it really helps for you to
know exactly how your web host is
| | 02:06 |
set up; fortunately, I do.
| | 02:08 |
Remember, when you're doing this in
UNIX, it's cp -R for recursive; otherwise,
| | 02:14 |
the command will fail.
| | 02:15 |
And just to be sure, let's take
a look in that directory. Aha!
| | 02:33 |
We made a mistake, you see, we
copied modules into modules. That's okay;
| | 02:38 |
this sort of thing happens all the time.
| | 02:39 |
Just go into it and move everything up.
| | 02:49 |
Now I can remove that modules directory
that's inside the other one. Very good!
| | 02:58 |
Now remember, we have a Drupal 7 site
with Drupal 6 modules, but don't worry the
| | 03:02 |
upgrade process will take care of that.
| | 03:05 |
Next, it says to copy settings.php
and the files directory to their
| | 03:10 |
identical locations.
| | 03:12 |
Now I am going to go back into my
Drupal 6 site and do it from there, just to
| | 03:15 |
make sure that I'm copying
the right files directory.
| | 03:18 |
If you're running a multisite
installation, or if you move things over
| | 03:22 |
from Acquia Dev Desktop, you might
find the files directory isn't quite
| | 03:25 |
where you expected it to be.
| | 03:32 |
So now I am in my lyndad6;
| | 03:35 |
that is the Drupal 6 directory, and
good, since I'm not running a multisite
| | 03:42 |
installation, files is probably in default.
| | 03:48 |
And that's also where my settings file is.
| | 03:50 |
From here I'll copy over the settings file.
| | 03:53 |
First, I'll clear my screen and then do
copy settings (cp settings) and then from
| | 03:58 |
here I have to figure out
where I'm copying it to.
| | 04:00 |
One nice thing in UNIX is that you can
find out where you are while traversing
| | 04:03 |
directories, by simply
hitting the Tab key twice.
| | 04:09 |
That's the top level of this Drupal
directory, so I'll go up one more and then
| | 04:13 |
into lyndad7/sites/default. Good!
| | 04:19 |
That made that copy.
| | 04:22 |
Now we also need to copy the files.
| | 04:24 |
So same thing, but this time
remember the -R. All right!
| | 04:36 |
That takes care of our next step.
| | 04:38 |
Now we go back and run the update
program and remember, we changed the domain,
| | 04:42 |
so we'll do it from the domain that we named.
| | 04:44 |
At this point we're completely
converting the database over. So here we go.
| | 04:49 |
Go to my site and update.php.
| | 04:55 |
But we do get an error.
| | 04:57 |
At another point in this course, I
talk about all of the things that are in
| | 05:00 |
the settings.php file.
| | 05:02 |
One of them allows you to update the
site if you're not their super user.
| | 05:06 |
Now remember, we didn't actually install the
Drupal 7 site yet, so there is no super user.
| | 05:11 |
We have to go into that settings file
and then change it, so that we can update
| | 05:15 |
it, then change it back.
| | 05:16 |
So we go back to our Terminal, go to our
lynda7/site, and edit that settings.php.
| | 05:40 |
The thing we're looking for is this
update_free_access. I'll change that to True
| | 05:46 |
and write it out, then go
back and reload and Continue.
| | 05:55 |
Notice, there's lots and lots of updates.
| | 05:58 |
This process will take a few minutes.
| | 06:03 |
Now notice, we get a few
informational messages here.
| | 06:06 |
I am going to Command+Click those
links just so I have them in the background
| | 06:10 |
and can take care of them later.
| | 06:12 |
This one is just informational, so we
can ignore it, but then we have a warning
| | 06:16 |
here to reset that value.
| | 06:18 |
So I'll go back to my
Terminal and do exactly that.
| | 06:22 |
Change it to False and exit, saving as we go.
| | 06:27 |
Now we can go back to our front page.
| | 06:31 |
Now remember in our previous video
we put the site in maintenance mode.
| | 06:35 |
But we were logged out during the
process so we're no longer the administrator.
| | 06:38 |
If we were, we would see the full
administration screen here, so we have to log in again.
| | 06:43 |
We do that by going to /user.
| | 06:53 |
And in fact, we want to stay in
maintenance mode because we haven't
| | 06:55 |
completed the process yet.
| | 06:57 |
Now we are on to Download new project versions.
| | 07:02 |
There are a few ways of doing this.
| | 07:03 |
We could do it manually and here it
helpfully lists all of the modules we'd have
| | 07:06 |
to update, along with links to their projects.
| | 07:10 |
But it also provides this drush command here.
| | 07:13 |
Now notice, it says the delete
option may not be supported yet.
| | 07:16 |
Let's just give it a try.
| | 07:18 |
I'll copy it, clear my screen;
| | 07:20 |
make sure I am in the right place.
| | 07:22 |
Yup, I want to be in the Drupal 7 site
where we just downloaded that software
| | 07:25 |
and I'll try that command.
| | 07:28 |
Nope, it's not implemented as I make this video.
| | 07:31 |
It may be by the time you watch it however.
| | 07:33 |
So instead, I'll go back
and manually delete them.
| | 07:37 |
But notice, only those
that are going to be replaced.
| | 07:39 |
That is, everything except for upgrade assist.
| | 07:49 |
And of course, those are in our modules folder.
| | 07:51 |
Now I'll reissue that drush command,
clear the screen and remove that dash, dash, delete.
| | 08:12 |
Now you'll notice that the
process gave us a few warnings.
| | 08:24 |
You want to take note of which
things it's giving warnings about. There's
| | 08:27 |
upgrade assist, image
assist, and upgrade status.
| | 08:31 |
So we saw an upgrade status,
but it's probably the old one.
| | 08:36 |
Once we've finished that, I'll reload the page.
| | 08:42 |
Scroll down, it tells us once again to
run update.php, and we have more updates
| | 08:52 |
to do, these are of course on the modules.
| | 08:58 |
And we get some warnings, which we
should take note of and take care of later.
| | 09:02 |
But for now, I am just going to go back to
my front page and see what the next step is.
| | 09:06 |
We are almost done.
| | 09:08 |
The next step is to re-enable modules.
| | 09:12 |
We get a warning, but we can re-enable some
modules, so we'll do so here and Re-enable.
| | 09:22 |
Then I'll reload the page.
| | 09:27 |
Now this is the tricky point.
| | 09:30 |
We can check on which modules
were re-enabled, by going to be
| | 09:33 |
d7.tomgeller.com/admin
and then following the path.
| | 09:38 |
Normally of course, we'd use the toolbar,
but remember we disabled all of those
| | 09:42 |
modules in Drupal 6, and
toolbar wasn't even in it.
| | 09:44 |
So we have a very bare kind of site
right now, administratively speaking.
| | 09:48 |
But let's see what the modules are.
| | 09:58 |
There is CCK, we might want to start re-
enabling things here, the Image module,
| | 10:03 |
Pathauto, Token, but there is
a problem with Upgrade status.
| | 10:07 |
That is of course because this is the
module that we carried over from Drupal 6.
| | 10:11 |
Then we find additional errors such as
Ctools, which is necessary for Views and so forth.
| | 10:16 |
This is where things get tricky.
| | 10:18 |
You're going to run into some modules
that simply don't exist for the new version.
| | 10:22 |
There are a few things you can do for that.
| | 10:25 |
First, the functionality might not be necessary.
| | 10:28 |
That is, it might be done in
a different way in Drupal 7.
| | 10:31 |
One example here was the Image module.
| | 10:33 |
That's actually part of Drupal 7 now,
and so we didn't really need it.
| | 10:38 |
Take a good look at all of the modules
that you were trying to bring over, and
| | 10:41 |
talk to an experienced Drupal 7
consultant if necessary to figure out if that's
| | 10:45 |
the case for the ones that you have.
| | 10:47 |
The second option is you might be able
to replicate the functionality using a
| | 10:51 |
non-Drupal solution, such as the
free apps from Google and the like.
| | 10:55 |
Third, perhaps you could help
produce the Drupal 7 version.
| | 10:58 |
This helps not only you, but
the whole Drupal community.
| | 11:02 |
Finally, if none of these are possible,
you might just have to adjust your site
| | 11:05 |
to do without the features that
you had in your previous version.
| | 11:09 |
In any case, you can often figure out
the best path by looking through the
| | 11:12 |
modules image queue.
| | 11:13 |
For example, let's take a look at that
Image Assist module. Go into the issue
| | 11:19 |
queue and do a search for
Drupal 7 let's say. Ah!
| | 11:27 |
And it says right here, the issue
having to do with the Drupal 7 port.
| | 11:33 |
One thing that we didn't do is to take
care of those pages that we opened after
| | 11:37 |
we had installed Drupal 7.
| | 11:38 |
Now that we are logged in as user1, we
can reload those pages and make whatever
| | 11:42 |
changes are necessary.
| | 11:43 |
And then finally, after we've got all
our modules together, we check our status
| | 11:58 |
report, and finally go online.
| | 12:01 |
So that was a long process, wasn't it?
| | 12:02 |
And you can see that it's tricky.
| | 12:05 |
But the update status module makes
it much easier than it used to be.
| | 12:09 |
The problem is also somewhat
ameliorated, because the Drupal community hugely
| | 12:12 |
maintains both the current version
and previous one of any given module.
| | 12:17 |
That is Drupal 7 and Drupal 6 in our case.
| | 12:20 |
So you have plenty of time to make the change.
| | 12:23 |
And as long as the modules you need
are available, the procedure really isn't
| | 12:26 |
so hard.
| | 12:27 |
| | Collapse this transcript |
|
|
6. Integrating with Other SitesLetting users log in through OpenID| 00:00 |
This video shows you one way to let
people log in using the credentials they
| | 00:04 |
already have on other sites such as
Google, LiveJournal, and WordPress.com.
| | 00:10 |
They still have full true accounts on
your site and they have to fulfill all its
| | 00:14 |
registration requirements.
| | 00:16 |
But once that's done their login
process is much easier because they're able to
| | 00:20 |
login using the credentials that
they're used to on those other sites.
| | 00:24 |
I'm afraid that the system I will show
you doesn't work with some popular sites,
| | 00:28 |
including Twitter and Facebook.
| | 00:30 |
I will show you how to
handle those in the next video.
| | 00:33 |
The magic is in the OpenID module,
which is part of core Drupal but which is
| | 00:37 |
turned off by default.
| | 00:38 |
So we turn it on in usual way, by going
up to Modules and then scrolling down to
| | 00:43 |
OpenID, and that's all you need to do.
| | 00:47 |
The best way to see how this works is to
switch to another browser where I'm not
| | 00:51 |
logged in to my site and try to
log in using my LiveJournal account.
| | 00:54 |
First, I'm going to simplify matters
by not requiring e-mail confirmation or
| | 00:58 |
administrator approval to create the
account as Drupal has those on by default.
| | 01:02 |
To do so, click Configuration and
Account Settings, but of course you won't
| | 01:06 |
naturally be doing this because
you'll generally want to keep those
| | 01:09 |
protections in place.
| | 01:10 |
I'll say, Visitors can register and
we don't Require e-mail verification.
| | 01:15 |
Briefly OpenID is what's called a
three-party authentication system;
| | 01:20 |
there's the user, your site, and the other
site which is known as an OpenID Provider.
| | 01:25 |
Here's what's going to happen.
| | 01:27 |
First, the user provides a username for
an OpenID provider. In our example, it's
| | 01:31 |
going to be livejournal.com.
| | 01:34 |
Then our site contacts that OpenID
provider and says, does this person really
| | 01:38 |
have a membership there.
| | 01:39 |
The OpenID provider says to the user,
do you really want to login, if they're
| | 01:44 |
not already logged in.
| | 01:46 |
If everything goes through as planned,
then our site accepts that the OpenID
| | 01:49 |
provider has allowed this person
through, and then our site asks the user to
| | 01:53 |
complete the registration process.
| | 01:55 |
So the user ends up with a
real account on our site.
| | 01:58 |
However, in the future be able to
login through that OpenID provider.
| | 02:02 |
Now let's see if it actually works.
| | 02:04 |
Now as I go through this I am going to
let it fail, but I will show you how to
| | 02:07 |
get pass that failure.
| | 02:09 |
So here I am on my site
but I'm not logged in yet.
| | 02:12 |
I'll just reload the page and you see
something change in this User login area
| | 02:15 |
since turned On that OpenID module.
| | 02:18 |
See, we now have this new
option, Log in using OpenID.
| | 02:22 |
I click it and then I add my OpenID.
| | 02:26 |
In this case, it's tgeller.
livejournal.com and log in.
| | 02:31 |
Now you see when our site went
to LiveJournal, it said, aha,
| | 02:36 |
this person isn't actually logged in.
| | 02:38 |
So I'll go ahead and do that on LiveJournal.
| | 02:42 |
Now when I try to do this, LiveJournal
just wants to make absolutely sure that I
| | 02:45 |
really want to give this
information over to the other site,
| | 02:48 |
lynda.tomgeller.com.
| | 02:50 |
I've a choice of doing it either
just this time or for all time.
| | 02:53 |
I am going to select always, because I
as the user always want to be able to go
| | 02:58 |
to the tomgeller.com site
using my LiveJournal ID.
| | 03:02 |
So the handoff has happened.
| | 03:04 |
Now I am back on tomgeller.com and I add a
username, I'll say tgeller and an e-mail address.
| | 03:09 |
Now you'll notice it already keeps
track of the OpenID on the other site.
| | 03:14 |
So we click Create new
account, and we are logged in.
| | 03:17 |
Now if we go up here and click My
account, you'll see something interesting.
| | 03:21 |
We have this extra tab, OpenID identities.
As we go down we see that this account
| | 03:26 |
on my site is tied to the
account on the LiveJournal site.
| | 03:30 |
I'm going to log out and then
log in again using that ID.
| | 03:35 |
Now remember we are still logged in to
LiveJournal, so this time when I say,
| | 03:38 |
Log in using OpenID, I enter my
credential there, just my username not my
| | 03:43 |
password and say log in.
| | 03:46 |
It hands off the information and I'm
logged in again to lynda.tomgeller.com.
| | 03:51 |
What if at some point you decide I
don't want lynda.tomgeller.com to have that
| | 03:55 |
information anymore, I don't
want the two accounts to be linked.
| | 03:58 |
We can revoke that permission
on the OpenID provider site.
| | 04:01 |
It will be in the different place for
each one, so I recommend searching for
| | 04:05 |
OpenID on the provider site
to figure out where it is.
| | 04:08 |
I'll do that on LiveJournal, and there we go.
| | 04:12 |
How do I use my LiveJournal
account to log in to another web site?
| | 04:15 |
One of the links there is, review and
edit the list of sites, and as we go there
| | 04:19 |
we see the credential
that's handed off to that site.
| | 04:22 |
If we want we can delete it.
| | 04:24 |
Now if we go back to lynda.tomgeller.
com and log out, we would have to do the
| | 04:29 |
whole thing again, if we try to log
in again as tgeller.livejournal.com.
| | 04:33 |
So you might be wondering which
sites can I use as OpenID providers
| | 04:39 |
besides LiveJournal.
| | 04:40 |
You can find that and a lot
more information at openid.net.
| | 04:45 |
The place to go is this Get an
OpenID button and there's your list.
| | 04:50 |
OpenID was a great idea, but as you
can see it's a little cumbersome to
| | 04:53 |
implement, even when Drupal takes
care of the heavy lifting for you.
| | 04:57 |
And as I mentioned, some important
sites use a different standard or a
| | 05:01 |
proprietary system to do
basically the same thing.
| | 05:04 |
In the next video, I'll show you
one setup that gives your site a much
| | 05:07 |
more universal login.
| | 05:10 |
| | Collapse this transcript |
| Letting users log in through Facebook, Twitter, and other services| 00:00 |
In the last video I showed you how to
use Drupal's built-in OpenID system, to
| | 00:04 |
allow folks to log in automatically, if
they're already logged into an OpenID
| | 00:08 |
provider site, such as LiveJournal or Google.
| | 00:11 |
In this one, I'll show you a system
that's much more complete allowing them to
| | 00:15 |
log in with their Facebook and Twitter
accounts as well, but along with that
| | 00:18 |
completeness comes quite a bit of
complexity, and it requires that you join a
| | 00:22 |
commercial site named Janrain.
| | 00:24 |
But let's get going.
| | 00:26 |
The module we will be using is called
Janrain Engage, there used to be two
| | 00:30 |
competing modules and
unfortunately the one that failed is at
| | 00:33 |
drupal.org/project/janrain.
| | 00:36 |
The good news is that there is a link
to the new one, just click on Janrain
| | 00:40 |
Engage (formerly RPX) or you can go
there directly at drupal.org/project/rpx.
| | 00:44 |
If we scroll down, we see a
list of supported networks.
| | 00:51 |
It's quite a long list and one of
them is OpenID. so you could use this as a
| | 00:54 |
replacement for Drupal's core OpenID mModule if you wanted to go that way.
| | 00:58 |
But also included are Facebook and
Twitter, which as I record this are the
| | 01:02 |
big ones in the game.
| | 01:03 |
As we scroll down further, you'll see
that there is a Quick Installation Guide,
| | 01:07 |
I'm actually going to walk you through
these steps, but of course, this is a
| | 01:09 |
good place to check if you have any problems.
| | 01:12 |
Finally, we come to this Dependencies section;
| | 01:15 |
it mentions that you have to have
a certain extension enabled on PHP.
| | 01:20 |
Now this is well beyond the scope of
this course, and chances are it'll be
| | 01:23 |
turned on your web host.
| | 01:25 |
But if you have any problems, this may
be the issue, and you'll have to talk
| | 01:28 |
with your web host about it.
| | 01:30 |
But let's get started. We will go and
we will download and install the module.
| | 01:36 |
Click Modules, and Install new module.
| | 01:40 |
Then Install and enable as usual.
| | 01:46 |
The modules that you want will be
in this group Janrain Engage. One of
| | 01:49 |
them Janrain Engage Rules
Integration isn't available because we haven't
| | 01:53 |
yet installed rules.
| | 01:54 |
You will find out more about Rules
in another section of this course.
| | 01:58 |
The point of that module is fairly
interesting though, it allows you to have
| | 02:01 |
certain actions take place when
someone logs in using Janrain.
| | 02:05 |
So if someone comes over from Facebook,
you could give them a certain page to
| | 02:08 |
look at, instead of someone who
logs in naturally through your site.
| | 02:12 |
Anyway, I am just going to
turn this all on and then save.
| | 02:17 |
Now let's configure it, one way to get
to the Configuration page is to scroll
| | 02:21 |
down to the Modules, then click
Configure next to Jarain Engage UI.
| | 02:25 |
You can also get there by clicking
Configuration and Janrain Engage.
| | 02:30 |
This is where you're going to have to
sign up with a commercial service, to
| | 02:34 |
get this API key I am going to open
up a new window here and get Janrain
| | 02:38 |
Engage by Command+Clicking.
| | 02:42 |
Then on that site I see all of this
detail, but what I really want is to sign
| | 02:46 |
in. I click Sign In, and interestingly
Janrain uses its own system to set up an
| | 02:51 |
account, so I will sign in
using my Twitter account.
| | 02:55 |
Now what you see here is very
similar to what you'll see on our own site.
| | 02:59 |
I'll log in and sign in.
| | 03:05 |
You may have noticed as we went along,
we were given little bit of information
| | 03:09 |
about the kind of information that
Twitter will hand off to the Janrain site,
| | 03:13 |
that's very important and I
recommend that you read it as you go.
| | 03:16 |
You should be aware of such policy
issues as your users will be as well.
| | 03:20 |
Now, I've already signed up for this
site, so I will be able to just go ahead
| | 03:23 |
and get my API Key right away.
| | 03:25 |
Go up to Deployment and Application Settings.
| | 03:30 |
And there is our API Key. Before
leaving this page I want to add our site to
| | 03:34 |
the Domain Whitelist; otherwise,
this simply won't work. We have to
| | 03:38 |
specifically say we're going to let people log in
from Janrain; its a little bit of extra security.
| | 03:43 |
So once again that was
lynda.tomgeller.com and save.
| | 03:49 |
Now we can copy that API Key, go back to our
site and paste it in, and then go down and save.
| | 03:58 |
I have set up my site in another browser
where I'm not logged in and you see over
| | 04:03 |
here, if we reload the page, we don't
see any kind of special login yet -- that's
| | 04:09 |
because we haven't quite completed the process.
| | 04:11 |
I will back to my administration
browser, and then I will configure Janrain
| | 04:14 |
to accept that by clicking the
Authentication tab right here, and this is what we want:
| | 04:19 |
Enable Janrain Engage sign-in or login forms.
| | 04:23 |
We have several options,
but I will just say save.
| | 04:27 |
We went through a lot of this to make this work.
| | 04:30 |
We are going to switch our hats now;
stop thinking like an administrator and
| | 04:34 |
changeover and pretend that you are user.
| | 04:35 |
I will reload this page, and we
now have this new option down here;
| | 04:41 |
however, it doesn't actually show
Twitter yet, because we have to add Twitter to
| | 04:45 |
the list of things we can log in with.
| | 04:47 |
So we go back to the administrator and
click on Identity Providers. We can add
| | 04:52 |
it by clicking up here, which says
Configure and add identity providers.
| | 04:56 |
Now this gets a little bit complicated,
so I will go through it quickly, and
| | 04:59 |
of course, if you need any help, look
at the Janrain Engage site. Scroll down
| | 05:04 |
and click Providers.
| | 05:05 |
And we want to add Twitter, so we click
the gear and Janrain will step us through it.
| | 05:10 |
Okay, we need a Twitter account;
| | 05:12 |
we already have that, so we click Next.
| | 05:14 |
Then within Twitter, we click on Create
a new application, and use those values.
| | 05:18 |
So let me go back and take a look what that
URL is, I will Command+Click it and sign in.
| | 05:28 |
As you can see, I have already created
one test application. Now I will create
| | 05:32 |
one specifically for this site.
| | 05:34 |
Create a new application, and copy
over that information. Here's the web site,
| | 05:44 |
and here's a Callback URL.
| | 05:50 |
The other information is for our own
interest, so I will say this is the
| | 05:54 |
lynda.tomgeller.com site and
To Log In, I will say simply.
| | 06:00 |
And of course, we have to agree to
their Terms of Service, fill out the
| | 06:04 |
CAPCHTA, and click Create.
| | 06:09 |
Of course, if you get any sort
of errors, just correct them.
| | 06:17 |
And let's try again.
| | 06:20 |
Now that we've completed the Twitter
site of it, we go back to the Janrain side
| | 06:24 |
and see what it tells us to do next.
| | 06:28 |
Click on the Settings tab and use
the value shown here to update the
| | 06:31 |
Application Type section.
| | 06:33 |
So we need Access Read and
Write on the Settings tab.
| | 06:36 |
I made that change and update.
| | 06:45 |
Go back to Janrain and continue.
| | 06:48 |
Finally, we have to give it some of the
secrets information so that it can pass
| | 06:51 |
the stuff back and forth
between Janrain, Twitter, and our site.
| | 06:55 |
We go up here and click on Details,
scroll down, and we need Consumer key
| | 07:02 |
and Consumer secret.
| | 07:03 |
I will simply copy and paste
those and save. And we are done.
| | 07:10 |
So you finished with the Twitter side of things.
| | 07:13 |
Now go back to Janrain Engage and take
another look at that list of providers.
| | 07:17 |
You will notice that instead of having
a gray gear, Twitter now has a green
| | 07:21 |
gear. If you were to click it, you
could go back and change all of those
| | 07:24 |
settings you just did, but instead we will
just take it and drag it into this group here.
| | 07:29 |
And now are ready, go down and save.
| | 07:34 |
The last thing that we have to do is
go back to our lynda.tomgeller.com site,
| | 07:38 |
and save that screen.
| | 07:41 |
Go down here and Save configuration.
| | 07:44 |
Now when the screen reloads, we click
Identity Providers, and along with the
| | 07:48 |
ones we saw earlier, we see Twitter.
| | 07:50 |
Now when we go back to the user who
is not logged in, when we reload this
| | 07:54 |
page, the additional icon will show up here.
Let's take a look. We reload and there it is.
| | 07:59 |
In order to log in with Twitter, we
simply click here. Janrain delivers this
| | 08:04 |
Twitter login screen and we click Sign In.
| | 08:06 |
We are then asked, of course, to
authenticate, and as I mentioned before it
| | 08:11 |
shows exactly what lynda.tomgeller.com
is able to get from the Twitter site.
| | 08:15 |
I will log in, and there we go!
| | 08:22 |
As with OpenID, we have logged in using
our Twitter account, but for the first
| | 08:25 |
time we still have to
register on lynda.tomgeller.com.
| | 08:29 |
After that's done, the link is
complete and it's a lot easier from then on.
| | 08:33 |
Now I have to mention, we've only
touched the tip of the iceberg here.
| | 08:37 |
If we go back to our Janrain Engage
screen on the administrative browser and
| | 08:42 |
then take a look at Field Mapping, you
will see that you're actually able to
| | 08:45 |
take information from people's Twitter
accounts and put it into fields in your own site;
| | 08:50 |
that is, the fields that
Twitter delivers over to you.
| | 08:52 |
The same is true for
Facebook and all the other ones.
| | 08:56 |
And this isn't the only solution for
unified logins, although it is the most
| | 08:59 |
complete one that I've found so far.
| | 09:01 |
To see some of the others, go to drupal.org/
projects/modules, filter by Drupal 7, of course.
| | 09:10 |
And then select the category, User
Access &Authentication and click Search.
| | 09:15 |
Now I have to say that this is an area
that still feels like it's in its infancy.
| | 09:19 |
I think it's hampered not by
technology, but by cultural and
| | 09:23 |
corporate interests.
| | 09:24 |
Basically, everybody wants the power
that comes with being the gatekeeper.
| | 09:29 |
If this is an area that interests you,
watch the technology trade press; their
| | 09:33 |
frequent changes and maneuverings. And
that's one reason that I like Janrain
| | 09:36 |
Engage. It's their job to stay on top
of such matters; leaving you free to
| | 09:41 |
deal with your own site.
| | 09:43 |
| | Collapse this transcript |
| Republishing posts on Facebook and Twitter| 00:00 |
It seems as though the web has split
into two completely separate entities.
| | 00:04 |
First, there are the self-standing web sites,
such as the ones you build with Drupal.
| | 00:08 |
Then there are the web platforms where
your audience spends most of their time,
| | 00:11 |
such as Facebook and Twitter.
| | 00:13 |
It's a sad truth that if you want to
reach people, you're going to have to
| | 00:16 |
publish both on your
site and to those platforms.
| | 00:20 |
Now the Janrain Engage module that I
showed you in the last video will do that.
| | 00:24 |
But I found it to be a
rather heavyweight solution.
| | 00:26 |
It takes too much
configuration for my preferences.
| | 00:29 |
So instead, I'm going to show you
something that works a little bit easier.
| | 00:32 |
It's called addthis.
| | 00:34 |
To get it, go to drupal.org/project/addthis.
| | 00:39 |
It's actually an extension of an online
service, which you can find at addthis.com.
| | 00:43 |
Now you don't need an account on addthis.
com in order to use the AddThis module.
| | 00:48 |
However, you will need it if you
want to do any of the tracking or
| | 00:51 |
analytics that it offers.
| | 00:52 |
But let's go back and install the module.
| | 00:57 |
We do so in the usual way and
paste it in. Then we enable it.
| | 01:07 |
You'll find it under the Fields group here.
| | 01:10 |
Now you might be tempted just to turn
on AddThis, but actually you need both of
| | 01:13 |
this, and the AddThis Displays
module, or it simply won't work.
| | 01:17 |
Then scroll to the bottom and save.
| | 01:19 |
AddThis has its own configuration
page, which you reach by clicking
| | 01:24 |
Configuration and AddThis.
| | 01:26 |
And as you see there is a
place to put your ProfileID;
| | 01:31 |
that's if you are a
member of the addthis.com site.
| | 01:34 |
I'll add mine because
we'll be turning on tracking.
| | 01:36 |
Then we'll go through some
of the options you have here.
| | 01:39 |
There are quite a lot of them,
and we won't go into any detail.
| | 01:44 |
As you see, you can change the way
that AddThis appears on your site.
| | 01:47 |
And then there are some additional options.
| | 01:51 |
One that I generally like
to use is 508 compliant.
| | 01:54 |
That makes your AddThis button more
accessible to people usually with visual
| | 01:57 |
handicaps, and there's
really no reason not to use it.
| | 02:01 |
As I said, you can turn on Analytics,
but once again, it warns you that you have
| | 02:05 |
to have a ProfileID in order to use this.
| | 02:09 |
And then there's a list of
services that you can connect to.
| | 02:11 |
Now generally speaking you're only
going to add the most popular services.
| | 02:15 |
At the time I'm recording this -- this is
Google, Twitter, Facebook, and so forth.
| | 02:20 |
If you don't check any of
these, it'll add all of them.
| | 02:23 |
I'm going to leave it as it is and
I'll come back to this a little later for
| | 02:26 |
reasons you'll see in a minute.
| | 02:26 |
Then there are some other
settings, some of them somewhat geeky.
| | 02:34 |
And finally, click Save configuration.
| | 02:37 |
Now the way you implement an AddThis
button is in the Content types, so we'll go
| | 02:42 |
up to Structure > Content types, and
then let's say that we're going to add an
| | 02:47 |
AddThis button to the basic pages.
| | 02:49 |
You do so by going to manage
fields, and then Adding a new field.
| | 02:53 |
I'll call this Add this,
with the field type AddThis.
| | 02:58 |
This is basically what the
module provides. And save.
| | 03:03 |
There aren't very many
options in the Field Settings here.
| | 03:06 |
You do that instead when you
change the display settings.
| | 03:09 |
So there's our field, we then go up
to Manage Display, make sure that it's
| | 03:13 |
showing both on the Body, yep,
and on the teaser, no, it's not.
| | 03:18 |
You can choose to have it show or not
of course. I'll put it on the teaser, why
| | 03:21 |
not, and then choose the format that you want.
| | 03:25 |
I'll make it a Basic Button on the
teaser and take a look at some of its options.
| | 03:30 |
Yep, looks fine to me.
| | 03:31 |
And then make it the Basic Toolbox on the
full node, so you can see the difference.
| | 03:40 |
And once again, you have
options here that you can change.
| | 03:46 |
Now let's take a look.
| | 03:47 |
I go back home and suddenly I have this
Share button next to all of my basic pages.
| | 03:53 |
When I hover over it, it
gives me options to Share.
| | 03:55 |
Now this is the part where I would add
specific services, because if you don't
| | 03:59 |
do that, you click More and there's
this list of over a hundred services.
| | 04:03 |
So I'm just going to be seeking in
here for Twitter and Facebook and
| | 04:06 |
probably get frustrated.
| | 04:08 |
If you want people to promote your
stuff, then you have to make it as easy as
| | 04:11 |
possible, so we'll go back and change that.
| | 04:13 |
But before we do, let's take a look at
what that toolbox looks like on the full node.
| | 04:17 |
It's just basically a different interface.
| | 04:20 |
And when we set that display, we said
we wanted Facebook and Twitter, although
| | 04:23 |
we could have done all the other ones as well.
| | 04:26 |
So let's go back and get rid of all of
those services, except for Facebook and Twitter.
| | 04:30 |
Go up to Configuration and AddThis,
back down to Enable Services, and now
| | 04:36 |
we start searching.
| | 04:39 |
There's Facebook, Google, LiveJournal, and
finally we'll just add Twitter, and save.
| | 04:55 |
Now when we go back to the front page,
we see the Share button again, but
| | 05:01 |
instead of just saying More, when it
pops up, it gives us those four choices,
| | 05:05 |
plus the More button.
| | 05:07 |
But I should you what happens
when you select any one of these.
| | 05:09 |
Go to Share and Twitter, and if I'm not
logged in, it'll ask me to log in, and
| | 05:15 |
then from there, it would go on and
publish your content onto another site.
| | 05:19 |
It'll do so in accordance with
the rules of that particular site.
| | 05:22 |
For example, in Twitter you
can only have 140 characters.
| | 05:25 |
So it'll just have a link to it and
you can change what that link says and so
| | 05:29 |
forth by going through
the configuration options.
| | 05:32 |
I won't be using this again through
this course, so before I go I'm going to
| | 05:35 |
just go to Modules and turn it off.
| | 05:39 |
Once again, it's in the Fields group.
| | 05:45 |
Then scroll to the bottom and save.
| | 05:50 |
You'll notice that I'm not able to turn
off the module unless I get rid of those
| | 05:53 |
fields that I created earlier. So I'll do that.
| | 05:56 |
Go up to Structure > Content types,
and manage fields within the basic page
| | 06:01 |
content type, and delete it.
| | 06:06 |
Now I should be able to turn off that module.
| | 06:11 |
Then scroll to the bottom and save.
| | 06:15 |
So now you've seen two different
programs that handle social media, but
| | 06:18 |
there are a lot more.
| | 06:20 |
I recommend that you go back to
drupal.org and compare some of them.
| | 06:23 |
You'll find them at drupal.org/project/modules.
| | 06:24 |
Once you're there, you filter by
compatibility as usual, and then look for
| | 06:32 |
Third-party integration and search.
| | 06:38 |
As usual, they're ordered by popularity
and a lot of these don't really have to
| | 06:41 |
do with social networking, but some of them do.
| | 06:43 |
For example, there's the YouTube
module; AdSense which has to do with
| | 06:50 |
advertising; and then the Share
Buttons, which is very much like AddThis.
| | 06:54 |
Others that might be of interest are the
Facebook Like button, Twitter Pull, and
| | 06:58 |
Drupal for Facebook.
| | 07:00 |
It's easy enough to find by
simply searching in this area.
| | 07:02 |
Now this is a field where you'll
probably have to play around with several
| | 07:05 |
solutions to test them for yourself.
| | 07:07 |
As usual, there's a trade-off between
complexity and utility, and you'll have to
| | 07:11 |
decide for yourself which platforms are
really important and necessary and what
| | 07:15 |
exactly you need to do on them.
| | 07:17 |
You might also choose to publish first
to a platform, then subscribe to it on
| | 07:21 |
your own site, for example, through RSS.
| | 07:23 |
But whatever your need, you'll find
that Drupal community has built quite a lot
| | 07:27 |
of tools of this sort, so there
are lots of options to choose from.
| | 07:31 |
| | Collapse this transcript |
|
|
7. Changing Your Site's Design without CodingUnderstanding Drupal's base themes| 00:00 |
Graphical presentation in Drupal takes
place mostly through its themes, which
| | 00:04 |
are collections of CSS, PHP, image, and
other files together with configuration
| | 00:09 |
settings stored in your Drupal sites database.
| | 00:12 |
They're all held together with a Drupal
specific file, the so-called info file.
| | 00:16 |
I took apart a standard theme in the
Understanding Drupal Themes video that's
| | 00:20 |
part of Drupal Gardens Essential Training.
| | 00:22 |
That course goes on to show how to
use Drupal Gardens ThemeBuilder to
| | 00:26 |
create custom designs.
| | 00:28 |
In this video, we are going to look at
themes with an eye toward modifying base themes.
| | 00:32 |
These are themes designed to be
flexible starting points but that don't have
| | 00:36 |
substantial styling themselves.
| | 00:39 |
But first, let's recap the basics.
| | 00:41 |
You enable a theme in Drupal 7 by
clicking the Appearance button and then
| | 00:45 |
clicking Set default next to the theme you want.
| | 00:48 |
So if I were to choose Seven, I click
Set default, close out this overlay, and
| | 00:53 |
there my theme is changed.
| | 00:54 |
I'll change it back to Bartik.
| | 00:56 |
There is an enormous selection of
downloadable themes available online. You get
| | 01:03 |
it at drupal.org/project/themes and of
course whenever you search for a theme
| | 01:08 |
you first must Filter by compatibility.
| | 01:13 |
There, almost 300 themes for Drupal 7.
| | 01:16 |
Now let's talk about what's actually in a theme.
| | 01:18 |
First, let's look at what's in Bartik,
which is Drupal 7's default theme.
| | 01:22 |
I have Drupal downloaded to my
desktop and here its folder is opened up.
| | 01:26 |
You'll find the themes in the themes
folder right here, and there is bartik.
| | 01:32 |
Now I should mention, although we're
going to look at the themes that are in
| | 01:34 |
this folder, you should never ever
change them here, or in fact change anything
| | 01:39 |
that's outside of your sites folder.
| | 01:41 |
If I go back up two levels that's
this folder here. Inside the sites folder
| | 01:45 |
you'll see there's all, default, and so
on and inside there is the themes folder,
| | 01:50 |
where you'll actually change your themes.
| | 01:51 |
But let's get back to the
ones that come with core Drupal.
| | 01:56 |
There are two ways to build your own
themes based on another theme that already
| | 01:59 |
exists: one way is to duplicate it, and
I showed you how to do that in the video
| | 02:03 |
building themes the traditional way in
Drupal 7 Essential Training, or you could
| | 02:07 |
extend the existing theme
with something called a subtheme.
| | 02:11 |
A subtheme inherits all of the
instructions of the original theme but then
| | 02:14 |
adds more on top of it. This is how you will
work with base themes throughout this course.
| | 02:20 |
Anyway, let's take a quick walk through
the files that comprise this Bartik theme.
| | 02:24 |
The most important one as I mentioned
before is this .info file and I will open
| | 02:28 |
that in a text editor.
| | 02:30 |
At the top, of course, you have the
name, description, some other basic
| | 02:33 |
information about the theme, and then
you have a list of style sheets -- these are
| | 02:37 |
references to CSS files which
describe how your theme looks.
| | 02:41 |
Below that you usually have a listing
of all the block regions that show up in
| | 02:45 |
the theme, and again, if we go back to
our site and click Structure and Blocks
| | 02:50 |
and then we click Demonstrate block
regions, we see all of those regions that
| | 02:54 |
are described in the .info file.
| | 02:57 |
There may be other parts of the
.info file but those are the basics.
| | 03:01 |
But let's go back to our desktop, so
we can see the other parts of the theme.
| | 03:04 |
There is also this color folder.
| | 03:07 |
This is not in every theme. It
only shows up in those themes that are
| | 03:10 |
re-colorable, and we can see that by
going back again to our site and going up
| | 03:14 |
to Appearance, then click Settings
under Bartik, which is a re-colorable theme.
| | 03:19 |
And it's all this stuff at the top, the
way that you can change the color of the
| | 03:22 |
header and the text and so forth.
| | 03:25 |
For such themes you'll
usually find this color folder.
| | 03:28 |
Then there are CSS files, which in this
case are gathered in a folder, although
| | 03:32 |
they don't have to be.
| | 03:34 |
As you could imagine this contains
instructions on how your site should look,
| | 03:38 |
the colors, the layout,
the typography, and so forth.
| | 03:42 |
Now if we go back to our info file,
you see that references several of
| | 03:46 |
these style sheets.
| | 03:48 |
These match up with the ones
that are in that css folder.
| | 03:52 |
Continuing on, we have an images
folder which is exactly what you think; it
| | 03:55 |
contains images that are common to that theme,
and some loose images outside of that folder.
| | 04:00 |
Again, they don't have to appear inside
a folder and traditionally the logo and
| | 04:04 |
screenshot are at the base level of the
theme, but again this is all defined in
| | 04:08 |
the themes programming.
| | 04:10 |
Finally, we come down to the
templates folder at the bottom.
| | 04:12 |
These define functionality
and to some extent layout.
| | 04:16 |
They override and amend the basic
template.php, which you see right here.
| | 04:21 |
And in fact, if you're a programmer you
can add your own templates, so that for
| | 04:24 |
example, there's a completely
different layout on a specific node or for
| | 04:28 |
specific content types and so forth.
| | 04:30 |
Well that takes us to the end of our
tour of Bartik, which is really only the
| | 04:34 |
beginning of understanding.
| | 04:35 |
To deepen it try taking similar tours
of the other themes included in Drupal 7.
| | 04:39 |
I will do that by going up a
level here and taking a look at seven.
| | 04:44 |
Here's an example of a theme that
throws everything except for the images in
| | 04:48 |
the top level, but because you spend some
time with Bartik you can sort out what's what.
| | 04:52 |
For example, here's a template file which
ends in tpl.php, a CSS file, and so forth.
| | 04:59 |
You can do the same thing with
contributed themes, which as I mentioned you find
| | 05:02 |
on drupal.org/project/themes.
| | 05:06 |
There you'll find an enormous
variety of how things are handled within
| | 05:09 |
the theme, whether they're put in folders,
how many CSS files there are, and so forth.
| | 05:15 |
There may be additional features as well.
| | 05:17 |
We're going to focus on the base
themes and most of the top-rated ones on
| | 05:21 |
drupal.org are in fact base themes.
| | 05:23 |
Zen is a base theme, Fusion, Adaptive
Theme, and then as we continue down, Omega;
| | 05:29 |
these are the four that we
will look at in this course.
| | 05:32 |
If you want to find out more about
starter themes, go to drupal.org, then click
| | 05:37 |
Documentation and down to Theming
Guide, scroll down, then to Contributed
| | 05:43 |
themes in the sidebar, down to Types of
Contributed Themes, and then down to Starter Themes.
| | 05:50 |
We will look at some of the most
popular ones in the next few videos.
| | 05:55 |
| | Collapse this transcript |
| Introducing base themes: Zen and subtheming| 00:00 | We will begin our tour of Base
Themes by looking at the oldest and most
| | 00:03 | popular, it's called Zen.
| | 00:05 | It's available at drupal.org/project/zen.
| | 00:09 | I will install and modify it directly
on my web host, just so that you get used
| | 00:12 | to seeing how things are done
through the UNIX command-line interface.
| | 00:16 | I showed you the basics in a
few videos earlier in this course.
| | 00:19 | Naturally, the best practice is usually
to do it in a development environment,
| | 00:23 | such as your local computer,
rather than on the live site.
| | 00:26 | The first thing that we do is we
grab Zen from drupal.org/project/zen.
| | 00:33 | Before we install it, let's
take a look at its documentation.
| | 00:36 | This theme has been around for over
five years going all the way back to Drupal
| | 00:40 | 5, and it's installed on
over 75,000 active sites.
| | 00:44 | With all that exposure to the market,
the documentation has gotten really good.
| | 00:48 | So let's scroll down and
click Read documentation.
| | 00:52 | As we scroll down further down here, we see all
of these different parts of the documentation.
| | 00:57 | The most important one from our point of
view is going to be Creating a theme with Zen.
| | 01:01 | This is a skill that will be useful for all of
the base themes with a little bit of variation.
| | 01:05 | The information is also available
inside the theme itself in some documentation
| | 01:10 | that comes in files there.
| | 01:11 | But I'll show you how it all works.
| | 01:14 | First we will go back, copy the URL,
and then go over to where I have my
| | 01:20 | Drupal site installed.
| | 01:22 | Go into sites/all/themes and get it using wget.
| | 01:28 | I will uncompress it and delete
that archive file, the .gz file.
| | 01:37 | Now let's take look at what's in there.
| | 01:42 | As I mentioned in an earlier
video, we're going to do this using
| | 01:45 | something called subtheming.
| | 01:46 | So Zen is the base theme and then we
create another theme that just adds on
| | 01:50 | to what Zen provides.
| | 01:52 | We do this by copying
this STARTERKIT folder here.
| | 01:56 | But before we do that let's go back
to our site and take a look at what Zen
| | 01:59 | offers just by itself.
| | 02:00 | Go up to Appearance and as usual we enable it
and set default and then close out the overlay.
| | 02:09 | As you can see it's very basic; it
really just provides some layout.
| | 02:13 | If we go up to Structure >Blocks, you get
a sense of where its block regions are.
| | 02:21 | In the Settings, there
really isn't very much there.
| | 02:24 | It doesn't have the color.
| | 02:25 | It's the basic stuff.
| | 02:26 | It does have some extra bits at the bottom.
| | 02:28 | For example, you can change
whether the breadcrumbs show;
| | 02:31 | that is the bit up at the top that says
where you are in the site, and also it
| | 02:35 | has some things for developing themes.
| | 02:37 | Again, Zen is intended as a sort of
developer's tool. It's a base theme.
| | 02:41 | So because of that, they know you're
going to be building on top of it and give
| | 02:45 | you some extra tools for that.
| | 02:46 | But let's get back to creating our subtheme.
| | 02:48 | I am going to clear the screen, take
another look at what we have and go ahead
| | 02:53 | and copy that STARTERKIT.
| | 02:55 | Now I should mention that
we are inside the Zen folder.
| | 02:58 | I need to make a copy that's one level up.
| | 02:59 | So it's equal to the Zen folder.
| | 03:01 | So what we do is copy cp -R, for recursive,
STARTERKIT/, and then go up one level, and I am
| | 03:08 | going to call it lyndazen.
| | 03:08 | Now if I go up one level and take a look,
we have both the zen and the lyndazen.
| | 03:15 | We will be working on the lyndazen folder.
| | 03:17 | I should mention that there are some
restrictions on the name you give themes.
| | 03:21 | It has to start with an alphabetic character.
| | 03:24 | It can only contain lowercase
letters, numbers, and underscores.
| | 03:28 | This is the common pattern for
machine names throughout Drupal, by the way.
| | 03:31 | So let's see what we have.
| | 03:35 | It looks like any other theme folder,
but there is one strange difference.
| | 03:39 | There is no .info file.
| | 03:41 | Instead, there is this STARTERKIT.info.txt.
| | 03:45 | The reason I put the txt at the end is
so that Drupal doesn't recognize this as
| | 03:49 | a theme, until you're
ready for it to be recognized.
| | 03:52 | Otherwise, when we looked at our
appearance screen, we would see a STARTERKIT
| | 03:55 | theme there, which we really don't
want, because the STARTERKIT is only to
| | 03:59 | create other subthemes. But that's okay.
| | 04:01 | This is the info file that we want.
| | 04:03 | We will just rename it to mv
STARTERKIT to lyndazen.info.
| | 04:09 | The name of the info file must be the
same as the enclosing folder, the name of
| | 04:14 | your theme essentially.
| | 04:15 | Now we can edit that.
| | 04:16 | I will clear my screen and nano lyndazen.info.
| | 04:22 | As is typical with base themes,
there's a lot of documentation in here
| | 04:25 | and that's wonderful.
| | 04:26 | I recommend that you read it all
the first time you do these changes.
| | 04:29 | But we're going to skip over the
documentation now, since I'm going to show
| | 04:32 | you how this works.
| | 04:33 | The first thing I'll do is I will
change the name to lyndazen, and you can
| | 04:38 | change the description as well.
| | 04:39 | I will go down, delete that,
and say a theme based on Zen.
| | 04:45 | As we scroll down we see that
its base theme is indeed Zen.
| | 04:49 | It has the CSS references we expect in
a .info file, and then it has a lot of
| | 04:54 | lines that are commented out.
| | 04:56 | The documentation here within the file
explains what those lines are for, and
| | 05:00 | you may decide to uncomment
some of them based on your needs.
| | 05:03 | But we're just going to leave out by
going Ctrl+X, and yes, we want to save it.
| | 05:07 | I will clear the screen and
take another look at what we have.
| | 05:11 | The next thing we have to do with Zen
is decide whether we want to make the
| | 05:15 | theme fixed width or fluid width.
| | 05:17 | We do that by going into the CSS
and taking a look at what we have.
| | 05:22 | You see here we have
layout fixed and layout-liquid.
| | 05:26 | We also have layout fixed-
rtl and layout-liquid-rtl.
| | 05:29 | Those are for languages that go from
right to left, for example, Hebrew or Arabic.
| | 05:34 | Very briefly, I can show you the
difference between a liquid theme and a fixed theme.
| | 05:37 | Let's go back into our browser and go
to themegarden.org. This theme here which
| | 05:42 | you recognize as Garland in Drupal
6 is a fluid theme or liquid theme.
| | 05:47 | As we make the window smaller, you'll notice
that there's rewrapping in the central area.
| | 05:51 | It's adjusting for the width of the screen.
| | 05:54 | By comparison, if we go down and take a
look at Aeon5, this is a fixed width theme.
| | 05:59 | As we make the window smaller,
it stays exactly the same.
| | 06:02 | But let's get back to our theme.
| | 06:04 | The way we decide whether to have it
as fixed or liquid is in the .info file.
| | 06:08 | I will go back up, there is our .info.
| | 06:12 | So I'll edit it and scroll down a little bit.
| | 06:19 | What we're looking for is the
stylesheet here that says layout-fixed.
| | 06:22 | I am going to change that to layout-
liquid, which was the name of that other
| | 06:26 | file, because I want a liquid layout.
| | 06:29 | I'll save it and we are
mostly done editing our theme.
| | 06:33 | But there are two very important
files that we also have to change.
| | 06:37 | One is template.php and the
other is theme-settings.php.
| | 06:43 | You see them down here
at the bottom of the list.
| | 06:46 | They make reference to the sub-
themes' original name, STARTERKIT.
| | 06:49 | We will change all of those to lyndazen.
| | 06:52 | Remember that these are function
names and capitalization matters.
| | 06:55 | So let's go ahead and nano
templates.php and now I will just do a
| | 07:01 | group Find/Replace.
| | 07:03 | In nano, that's done with Ctrl+\ (backslash).
| | 07:06 | I'll search for STARTERKIT and I will
replace it with lyndazen, and yes, it
| | 07:14 | starts to go through and find them, as
you can see it found one right down here,
| | 07:17 | and I will say, yes, I just want to
change all of them. And we are done.
| | 07:20 | It replaced 10 occurrences.
| | 07:22 | Then we do the same thing with the
other file, the theme-settings.php.
| | 07:32 | Again Ctrl+\ (backslash), STARTERKIT,
change to lyndazen, change all of them, and save.
| | 07:43 | Technically speaking, we
are now completely done.
| | 07:46 | We can see that if we go back
in our site, click Appearance.
| | 07:50 | We scroll down to the bottom
and there's our theme, lyndazen.
| | 07:53 | I will enable it and set default,
but as you can guess, since we haven't
| | 07:57 | actually made any styling changes, it's
going to look exactly like the Zen base theme.
| | 08:03 | And as we close our window, it looks
as I say, exactly the same, except this
| | 08:07 | time we are on the lyndazen theme.
| | 08:09 | Now notice it gives us a warning;
that's because again Zen is built for
| | 08:14 | developers, and if you want to, you
can turn off this feature that rebuilds
| | 08:17 | the theme registry.
| | 08:18 | That's something that's
usually only on during development.
| | 08:21 | I am going to leave it on, since
we are actually building our theme.
| | 08:24 | But let's get back to the design.
| | 08:26 | We could start adding CSS or even
editing the php files directly without
| | 08:30 | worrying that we are going to cause
any damage, because we copied over that
| | 08:33 | STARTERKIT, and if things go wrong, we
can just delete the subtheme and start
| | 08:37 | again from the STARTERKIT.
| | 08:38 | You will probably make most of
your changes in the CSS files.
| | 08:42 | So I will very quickly show
you how to get started with that.
| | 08:45 | I go into it quite a bit more in
Drupal 7 Essential Training video Building
| | 08:48 | Themes the Traditional Way. But here we go!
| | 08:51 | I will clear the screen, take a look
at what we have, and I am going to first
| | 08:56 | edit the info file to add a
reference to a new CSS file that I'm going to
| | 08:59 | create, nano lyndazen and scroll
down until I get to the CSS files.
| | 09:07 | Now the order here does matter.
| | 09:10 | The one that's most
important should come at the end.
| | 09:13 | I am going to put it just before
the stylesheet specified for print.
| | 09:16 | So in other words, it takes precedence
over all of the ones that go to the screen.
| | 09:20 | I will copy that over stylesheets[all[] and I
will put it in css/local.css and save that out.
| | 09:33 | And there we go!
| | 09:35 | Now I go into that css folder and start creating
the cssfile that I just named. So nano local.css.
| | 09:43 | And here I will just create a very simple line.
| | 09:46 | It's going to be body, background-color.
| | 09:47 | This is just a little bit of CSS I tried
out before I started recording this video.
| | 09:55 | End it and save.
| | 09:58 | Now when we go back to our browser and reload,
we should see the change that we just applied.
| | 10:03 | If not, you may have
some browser caching issues.
| | 10:07 | Another thing to try if you don't see
the changes is to go up to Configuration,
| | 10:12 | then down to Performance, and Clear all caches.
| | 10:18 | This may take a few moments.
| | 10:21 | Then go back and take another
look at your theme, and there it is.
| | 10:26 | Now I have to admit to
keeping something from you.
| | 10:29 | Zen is such a popular theme that someone
created a module specifically to create
| | 10:33 | subthemes and control some CSS.
| | 10:35 | It's called zenophile and it's
available at drupal.org/project/zenophile.
| | 10:41 | Note that spelling, it starts with a
Z not an X. I will leave it to you to
| | 10:46 | play with if you like. However,
| | 10:48 | and this is important, you might have
problems with it if you install it on a
| | 10:52 | shared web host, which is probably
true for any plan that costs less than
| | 10:55 | about $100 a month.
| | 10:57 | So read through the documentation
carefully before committing to using it.
| | 11:01 | By comparison, the subtheming procedure
I showed you will always work just fine.
| | 11:06 | So that gets us started on subtheming.
| | 11:07 | You will find that all the other base
themes work in a similar way with some
| | 11:11 | important differences, so I won't
repeat this process for the other themes and
| | 11:15 | we will instead focus on what
makes each of them unique and useful.
| | 11:20 | If you decide to continue with the Zen
subtheme, be prepared to spend lots of
| | 11:24 | time with the excellent documentation.
| | 11:26 | Really, it's unlikely you'll have a
question that isn't answered there, but
| | 11:29 | if you do, there is a big community
of Zen themers to help you in the usual
| | 11:33 | places on drupal.org.
| | 11:35 |
| | Collapse this transcript |
| Introducing base themes: Fusion and extensibility| 00:00 |
The previous video was ostensibly about
using the Zen starter theme, but really
| | 00:04 |
it focused on how to create a subtheme.
| | 00:07 |
You will do that again for the second
most popular base theme, Fusion, but from
| | 00:11 |
there you'll find a lot of
differences between the two.
| | 00:14 |
Fusion is especially notable in that
it's intended for use together with a
| | 00:17 |
module called Fusion Accelerator, which
adds quite a lot of options that you can
| | 00:21 |
change without having to write custom code.
| | 00:23 |
In earlier versions it used
something similar called Skinner.
| | 00:26 |
So be sure to read the documentation if
you're using an older version, but even
| | 00:31 |
without that module, Fusion is pretty amazing.
| | 00:33 |
We will start, as usual, by
visiting the Fusion project page at
| | 00:37 |
drupal.org/project/fusion.
| | 00:41 |
Another thing that's unusual about
Fusion is that it's sponsored by a commercial
| | 00:45 |
company, whereas a lot of the other
themes are built by either hobbyists or
| | 00:49 |
people making a consulting living on their own.
| | 00:52 |
In this case, however, the folks who
make Fusion, also do these Advanced Fusion
| | 00:56 |
themes, which are based on Fusions.
| | 00:58 |
So you need to know how to use Fusion
in order to use their themes, or I should
| | 01:01 |
say in order to really adapt
their themes to their fullest extent.
| | 01:05 |
Something to note about the Fusion
theme is that there are actually two
| | 01:08 |
different ways to create subthemes
and there is a link down here in the
| | 01:12 |
Installation section: which one should I use?
| | 01:16 |
Basically, it falls into fusion_
starter and fusion_starter_lite.
| | 01:21 |
Fusion-starter is the more
sophisticated of the two and that's the one
| | 01:24 |
that we're going to use.
| | 01:26 |
They both are basing
themselves on fusion_core by the way.
| | 01:29 |
That's the base theme in this case.
| | 01:32 |
For more information, you can
continue to follow those links and see more
| | 01:35 |
documentation on the Fusion site
you just saw, but let's get going.
| | 01:39 |
As usual, we go down and copy our
URL and then install it on our site.
| | 01:46 |
I'm already in the proper directory
that's on my lynda site, sites/all/themes.
| | 01:53 |
Then as usual, I'll use wget to grab the
theme, uncompress it, and delete the archive.
| | 02:06 |
Before we make any changes, we can see
what the core looks like by going back to
| | 02:09 |
our site, clicking Appearance,
and then setting it as the default.
| | 02:14 |
Actually, the one we're going to copy is
Fusion Starter, so I will make that the default.
| | 02:19 |
If we go back to our front page,
you can see what that looks like.
| | 02:23 |
Let's take a very quick look at the
settings that come with the Fusion core theme.
| | 02:27 |
We click Appearance again
and then click Settings.
| | 02:32 |
As you can see, there are a lot more
settings in this theme than in most themes,
| | 02:35 |
and these are divided into these vertical tabs.
| | 02:37 |
There are ways to change the grid.
| | 02:39 |
So at 16 or 12 column, you
change whether they're fluid or fixed.
| | 02:43 |
Again, you don't have to change the
.info file as you did in the Zen theme.
| | 02:48 |
You can change where the sidebars are,
all kinds of things about the typography,
| | 02:54 |
whether there's a breadcrumb, and
exactly what shows up when you search, that is,
| | 02:57 |
in the results page.
| | 02:59 |
We won't go into details
about these here though.
| | 03:01 |
Now remember how I mentioned the Fusion
Accelerator module, you will also notice
| | 03:05 |
that it's here in a link
from the Grid Settings tab.
| | 03:08 |
We are going to hold off on installing
it, because I want you to see Fusion in
| | 03:12 |
its simplest form first.
| | 03:14 |
As I did with Zen, I'll first create a subtheme.
| | 03:17 |
I will do this quickly.
| | 03:18 |
If you need any help, see the Zen video.
| | 03:20 |
There are some small changes which
I'll point out and as always your best
| | 03:24 |
source for information is the Themes
documentation starting with the README.txt
| | 03:29 |
file that comes with it.
| | 03:31 |
So I will go back to my terminal, go down
into the Fusion folder, and see what we have.
| | 03:37 |
Let's take a look at that README file.
| | 03:44 |
Here you have instructions on how to create a
subtheme, including some of the peculiarities.
| | 03:48 |
Again, I'll walk you through all of
this, but this is a good place to go if
| | 03:52 |
you have any problems.
| | 03:56 |
As with Zen, I will copy this fusion_
starter folder, this is the subtheme up
| | 04:01 |
one level so that it's at the equal level with
fusion_core, and I will call that lyndafusion.
| | 04:09 |
Remember when you do a Copy command,
you have to do it recursively if you're
| | 04:13 |
starting with a folder; otherwise, it
will try to copy just the folder without
| | 04:16 |
the contents and it will fail.
| | 04:19 |
Then I am going to go into that folder.
| | 04:21 |
I go up one level and then
back down again into lyndafusion.
| | 04:24 |
Let's see what we have.
| | 04:28 |
Unlike the Zen theme, there
is actually very little here.
| | 04:31 |
There is not even any template files.
| | 04:33 |
That's because as with Zen, it's
inheriting all that stuff from its base theme.
| | 04:38 |
Only things that override
get put into the subtheme.
| | 04:41 |
As before, we have to rename this
fusion_starter.info to be the name of our
| | 04:46 |
theme, and let's take a look at that file.
| | 04:54 |
As before, we changed the name and
description, and note that the base theme is
| | 05:03 |
that Fusion core that we already have.
| | 05:05 |
Then there is one other thing we have to
do that's unusual to fusion, we have to
| | 05:09 |
change the name of this stylesheet,
instead of being fusion-starters-style.css,
| | 05:14 |
it should be lyndafusion-style.css, or
of course, you will use whatever name you
| | 05:21 |
would have for your theme.
| | 05:22 |
There is nothing else we have to change
here, but I just want to point out how
| | 05:25 |
much documentation there is, as well
as how much stuff there is in here.
| | 05:29 |
Quite a bit of this has to do with it
being a responsive theme, which I'll talk
| | 05:32 |
about a little bit more later, but for
now, I'll just save that and then I will
| | 05:37 |
go into that CSS folder to change the
name of that file that I referenced.
| | 05:45 |
That's actually all that we have to do.
| | 05:47 |
This subtheme inherits most of its
features from the base theme. which is Fusion core.
| | 05:51 |
Now we can add a local CSS file as you
saw with the Zen theme and get the styling.
| | 05:56 |
But with Fusion, you're better off
starting with that single unified CSS file.
| | 06:00 |
I will show you why, by
looking inside that file.
| | 06:06 |
Unlike most themes which split the
styles into multiple files, this one keeps it
| | 06:10 |
all in one, but it leaves
a lot of the styles blank.
| | 06:13 |
The good thing though is that if you
look at this, you get to know exactly what
| | 06:17 |
the names of the CSS are.
| | 06:19 |
So you don't have to go poking around quite
as much with Firebug or some other CSS tool.
| | 06:23 |
It's just all right there in front of you.
| | 06:25 |
It's a lot easier to edit in my
opinion than a lot of themes that keep
| | 06:28 |
things sort of obscure.
| | 06:30 |
It helps also that we have all of this
wonderful documentation in the CSS file itself.
| | 06:36 |
Anyway, a lot of these themes
control happens outside of these files.
| | 06:40 |
It's in those Settings and
the Fusion Accelerator module.
| | 06:43 |
I already showed you a few of those
here and I leave it to you to explore.
| | 06:47 |
But now let's add the Fusion Accelerator module.
| | 06:50 |
It does so much that I won't actually
create any changes, but just very quickly
| | 06:53 |
run through the concepts.
| | 06:55 |
To get it, go to drupal.org/
project/fusion_accelerator.
| | 07:02 |
Then I will go down and install it as usual.
| | 07:04 |
I will simply copy and paste those.
And paste it in.
| | 07:12 |
I made that change and Enable it. Scroll down.
| | 07:19 |
I will just Enable all of the
modules that are available to me.
| | 07:26 |
The one that's not a specific to
Internet Explorer for Version 6 to 8, which
| | 07:30 |
requires little extra handling.
| | 07:32 |
We are not going to worry about that.
| | 07:34 |
Just go down and Save configuration.
| | 07:37 |
Then I will configure it.
| | 07:41 |
Scroll down. As usual you can find the
Configure link next one of the modules.
| | 07:47 |
Now we reach one of the features
that's unusual to Fusion. It is Skins.
| | 07:52 |
Skins are predefined
collections of styling directives.
| | 07:55 |
They are created mostly through programming.
| | 07:57 |
The point of Fusion Accelerator is to
make access to those skins easy via the
| | 08:01 |
web interface after they've been created.
| | 08:04 |
So here we have a list of Applied
skins, and of course we don't have any.
| | 08:07 |
There is also Grid Tools, which it
uses to extend the list of layouts.
| | 08:12 |
It requires editing the .info file as well.
| | 08:15 |
I recommend that you take a
look at the documentation for that.
| | 08:18 |
You might remember earlier we saw that you
could choose a 16-column or 12-column grid.
| | 08:22 |
Well, if you wanted a 9-column grid
that's fluid or something like that, you
| | 08:25 |
could create that here.
| | 08:27 |
There's a Skin library that includes
some typical skinning options that you
| | 08:31 |
might use, and then ways to
set Page and Region rules.
| | 08:36 |
This isn't the same as the Rules module,
which you will see elsewhere in the series.
| | 08:40 |
What should be clear from this video is
just how deep these base themes can get,
| | 08:44 |
especially when extended
through the use of a module.
| | 08:47 |
I didn't even get into the Fusion subthemes
that are available for free on drupal.org.
| | 08:51 |
If I go to Drupal.org/project/fusion,
and then scroll down to Fusion themes
| | 08:59 |
that are available, you can see there
are a huge number of them in addition to
| | 09:05 |
the Premium themes that the
folks who make Fusion offer.
| | 09:09 |
If for example, you started using Acquia
Marina, which is quite a popular theme,
| | 09:13 |
by the way, you will have
access to all of these extensions.
| | 09:16 |
You will be able to skinning and
different grid formats and so forth.
| | 09:20 |
Now before finishing this video, I
am just going to turn off that Fusion
| | 09:23 |
Accelerator module, because I found
that it tends to get in the way if you're
| | 09:26 |
not actually using one of the Fusion themes.
| | 09:33 |
Go down, turn off the modules, and of
course, we'll have to come back and do the
| | 09:38 |
same for Apply Skins.
| | 09:40 |
I made that change, then
scroll to the bottom and save.
| | 09:48 |
One thing that I didn't discuss is
that Fusion is a responsive theme.
| | 09:53 |
That's a theme that adapts to make
your web site readable on a variety of
| | 09:56 |
devices, such as mobile phones, and as
you know that's becoming more and more
| | 09:59 |
important as an increasing
percentage of the population accesses the web
| | 10:03 |
through such devices.
| | 10:05 |
We will talk about that little bit more in
the videos about Adaptive Themes and Omega.
| | 10:10 |
Fusion is an interesting case of a
commercial company; in this case one called
| | 10:13 |
TopNotchThemes that's building a
business through interacting with the Drupal
| | 10:17 |
community with these free tools.
| | 10:20 |
Everything you saw here is free and
open-source software, yet the documentation
| | 10:23 |
is on their own site, rather than
drupal.org, and the company sells their own
| | 10:27 |
themes based on Fusion.
| | 10:29 |
Now there's always discussion
about such commercial and open-source
| | 10:32 |
interactions, but this one I have to say
has worked out quite nicely for everyone.
| | 10:37 |
The community gets good tools and support,
while TopNotchThemes gets an audience
| | 10:41 |
that understands its complex products.
| | 10:44 |
| | Collapse this transcript |
| Introducing base themes: AdaptiveTheme and responsive design| 00:00 |
So far you've seen how the Zen-based
theme is a flexible but simple starting
| | 00:04 |
point while the Fusion-based theme
marries extreme grid and styling flexibility
| | 00:08 |
with custom development.
| | 00:10 |
The third base theme in our
tour is optimized for something
| | 00:13 |
completely different.
| | 00:14 |
It's an example of what's called
responsive design, which is easiest to
| | 00:17 |
understand by seeing an example.
| | 00:20 |
And the example I'll use is at bostonglobe.com.
| | 00:24 |
When we look at it on a widescreen
like this, we see it in multiple columns.
| | 00:28 |
However, if we were to be looking at
it on a smaller screen, for example, a
| | 00:32 |
portable device, you see that first
it adapts how wide the columns are.
| | 00:37 |
Then as we bring it in even further, it cuts
down on the number of columns from three to two.
| | 00:43 |
As we go, you'll also notice that this
graphic is dynamically resizing, you can
| | 00:47 |
see we make it larger and smaller.
| | 00:49 |
And finally, if we go all the way
down to the way we'd see it on a portable
| | 00:52 |
device, it's one column and all
of the menus have changed as well.
| | 00:56 |
Let's take another look at that.
| | 00:58 |
See it's actually quite
sophisticated and you can do that in Drupal using
| | 01:03 |
AdaptiveTheme, Fusion, or
Omega, which I'll show you.
| | 01:07 |
So let's go ahead and
add some of those features.
| | 01:09 |
Bring my window back out and close this,
and then I'll go and grab AdaptiveTheme
| | 01:14 |
at drupal.org/project/adaptivetheme.
| | 01:18 |
As with the other starter themes you've seen,
this one has quite a lot of documentation.
| | 01:22 |
It's really quite good that way.
| | 01:24 |
And like Fusion it's
supported by a commercial company.
| | 01:27 |
I'll talk more about that company in a minute.
| | 01:29 |
But for now, we'll just
download it and install it.
| | 01:33 |
We do so in the usual way and paste
it in. I made that change. Scroll down.
| | 01:44 |
As with Fusion, this one has a substheme,
it's a core and a subtheme, and then
| | 01:48 |
there's also another one which
is often used for administration.
| | 01:51 |
It takes the place of the 7
theme that comes in Drupal's core.
| | 01:55 |
If I enable and set the core as the
default, and then go back to our home page,
| | 02:00 |
you see that it's very much like the
other starter themes we've looked that.
| | 02:03 |
Just very, very basic layout styling.
| | 02:07 |
Now we'll create a subtheme
the same way we did with Zen.
| | 02:09 |
I'll go through it quickly.
| | 02:11 |
If you have any problems with
this step, watch that video.
| | 02:19 |
So I'll just write it out.
| | 02:25 |
As usual, I'll add a local.css stylesheet.
| | 02:28 |
In this case, I'm simply going to copy
with Ctrl+K and then paste it twice with
| | 02:33 |
Ctrl+U, and I can just change
blocks.css to the local.css.
| | 02:41 |
As with other starter themes, this
includes several options which are commented out.
| | 02:47 |
Down toward the bottom, you see the
settings that allow this theme to change
| | 02:51 |
from a Standard bigscreen to a Tablet,
when held in one direction, the Tablet
| | 02:56 |
held in the other direction,
and smartphone layouts as well.
| | 03:00 |
That's how it jumps from that three-
column to two-column to one-column and
| | 03:02 |
does other such changes.
| | 03:04 |
But that's all we need to change,
so I'll just write it out and save.
| | 03:07 |
Now when we go back to our browser, we
can take a look at our themes, scroll
| | 03:13 |
down to the bottom and enable that one, which
you might remember we called lynda Adaptive.
| | 03:18 |
And as we show our site, of course,
nothing changes because we didn't change
| | 03:23 |
any of the styling yet.
| | 03:25 |
Now that we're done, we can go in
and edit that local.css file as usual.
| | 03:34 |
Just as a demonstration, I'll
add a background color to the body.
| | 03:43 |
Then I go back to my site and reload.
| | 03:47 |
So far we've done what you've seen with
every other starter theme, but here with
| | 03:50 |
AdaptiveTheme, the magic is in the settings.
| | 03:54 |
So let's go up there by clicking
Appearance, and Settings next to our theme.
| | 03:59 |
In the vertical tabs over here, you see
that you can change the layout depending
| | 04:03 |
on whether it's a Standard Layout that
is a big screen, on a Tablet, and here
| | 04:07 |
you see it has an interesting
arrangement for things that takes into account the
| | 04:10 |
size of that screen, or a Smartphone.
| | 04:13 |
Basically, these are just
increasingly small versions of the same site.
| | 04:17 |
As with Fusion, there are additional
settings for Breadcrumbs and Search Results
| | 04:21 |
and so on, and you can
explore these on your own.
| | 04:24 |
So so far, there's nothing really
that different between this theme and the
| | 04:27 |
other starter themes we looked at.
| | 04:29 |
But there's something
extra cool about AdaptiveTheme.
| | 04:32 |
Like Fusion, there are several attractive
and ready-made subthemes available to it.
| | 04:36 |
What's really unusual about it is that
it has subthemes for those subthemes.
| | 04:41 |
I'll show you how that works.
| | 04:42 |
Let's go back to our AdaptiveTheme page here.
| | 04:45 |
This is the project page at drupal.org/
project/adaptivetheme. and go down and it
| | 04:52 |
named some of the other free themes available.
| | 04:54 |
Let's take a look at Corolla.
| | 04:56 |
I'm going to install this and it'll show
you how the subtheme to a subtheme works.
| | 05:01 |
Scroll down, copy the link, and
install it as usual, and paste it in.
| | 05:15 |
Scroll down. You'll notice in the
notes here that it's now a subtheme of
| | 05:19 |
AdaptiveTheme and you must use
AdaptiveTheme in order to use Corolla.
| | 05:24 |
And just so that we can see what that
looks like, let's go home and there it is.
| | 05:28 |
So far, nothing is different
between this and any other theme.
| | 05:31 |
However, if we go back into our
Terminal and take a look at what that actually
| | 05:35 |
means, let's see where we are.
| | 05:37 |
Go up a bit and go down
into that corolla folder.
| | 05:45 |
When we nano corolla.info, we see as
you'd expect, the base theme is adaptivetheme.
| | 05:53 |
However, it's a first-class citizen
in the sense that you can then make a
| | 05:56 |
subtheme of it and just adapt a
little bit of what Corolla gives you.
| | 06:01 |
Now it's pretty complicated the way
that it does this because the interaction
| | 06:04 |
between AdaptiveTheme and
Corolla is quite complex.
| | 06:07 |
So if you want to do such a sub-
theming job, there's a special tool for
| | 06:10 |
that called Footheme.
| | 06:12 |
You can find it at drupal.org/project/footheme.
| | 06:17 |
So to recap, AdaptiveTheme is a base
theme and you can use it just like any
| | 06:21 |
other base theme and build
from scratch on top of it.
| | 06:24 |
Then there are additional themes
such as Corolla and Sky, which act as
| | 06:28 |
subthemes to AdaptiveTheme.
| | 06:30 |
Then you could further subtheme
Corolla or Sky or Picture Reloaded by adding
| | 06:35 |
the Footheme and that'll copy over all
the special features that you get from
| | 06:38 |
both AdaptiveTheme and Corolla.
| | 06:41 |
That's a good way to go if you find
that there are some things that you like
| | 06:44 |
about Corolla or the other versions of
AdaptiveTheme subthemes but you want to
| | 06:48 |
make some small changes.
| | 06:50 |
I really like AdaptiveTheme.
| | 06:52 |
For my purposes, it occupies a great
middle ground between Zen's simplicity and
| | 06:56 |
Fusion's hard-core geekiness, even
though at first the whole idea of doing two
| | 07:00 |
levels of subtheming can
be a little bit confusing.
| | 07:04 |
As with Fusion, the creators of
AdaptiveTheme offer commercial support, and if
| | 07:08 |
you want to find out more about
that go to adaptivethemes.com.
| | 07:12 |
Incidentally, the creator of AdaptiveTheme
also leads the design initiative for Drupal 8.
| | 07:18 |
So although that'll be a group effort, I
imagine that his influence will lead to
| | 07:21 |
some of AdaptiveTheme's
concepts becoming part of Drupal 8.
| | 07:25 |
| | Collapse this transcript |
| Introducing base themes: Omega and mobile devices| 00:00 | As is appropriate, we'll end our tour of
base themes with Omega, the last letter
| | 00:04 | of the Greek alphabet.
| | 00:06 | Like AdaptiveTheme, the Omega
theme features responsive design.
| | 00:09 | Take a look at the beginning of the
AdaptiveTheme video to see what that is.
| | 00:13 | Like Fusion, it benefits from
modules created specifically for it.
| | 00:17 | Like both of those themes and like
Zen, Omega has terrific documentation.
| | 00:22 | One of the things that makes Omega
special is that it's designed; in the words
| | 00:26 | of its creator, to be mobile first.
| | 00:29 | The result is a collection of
tools and settings that go way beyond
| | 00:32 | responsive design in some really
interesting ways in how it handles small
| | 00:36 | devices such as cell phones.
| | 00:38 | As always, we'll start with
the project page, which is at
| | 00:41 | drupal.org/project/omega.
| | 00:45 | You'll notice a couple of large links up here.
| | 00:47 | One is for the Informational Micro-Site;
| | 00:49 | I'll just open that in another tab,
and the other is for the Handbook.
| | 00:53 | Starting with the Micro-Site, this is
a sort of marketing for Omega and it's
| | 00:57 | very good and it's been very
successful as well as you can see.
| | 01:01 | Omega has gotten tremendous support
from people within the Drupal community and
| | 01:05 | you can read about that actually here on
this page, which sites are using Omega.
| | 01:10 | The Omega Handbook, like the other
documentation on drupal.org, has its table of
| | 01:14 | contents here in the right
column as you scroll down.
| | 01:17 | And as you can see, it's quite a lot of
stuff and each one of these ones with an
| | 01:20 | arrow means that there's actually
more to it than just that one page.
| | 01:24 | But let's go ahead and install it.
| | 01:27 | Go back to the project page, copy the
URL, and install as usual, and paste it
| | 01:38 | in, and there we go!
| | 01:43 | By the way, if you're watching these
videos in order, I removed some of those
| | 01:46 | old themes before starting this one just
to unclutter the Appearance page a bit.
| | 01:50 | As we scroll down, you'll notice we have
both the Omega theme and one called Alpha.
| | 01:56 | Generally speaking, you
don't mess with the Alpha theme.
| | 01:59 | We're going to instead enable and set the
Omega theme as the default, and then go back home.
| | 02:04 | You'll notice some strange things immediately.
| | 02:08 | First of all, it shows where the
block regions are right there on the page.
| | 02:12 | Second of all, it shows the grid here;
| | 02:14 | that's those pink things in the back.
| | 02:16 | You can turn those on and off with
these two checkboxes off to the right.
| | 02:19 | Here I'll show you.
| | 02:20 | Turn off the Grid and turn off the Blocks.
| | 02:23 | And then as you see, it's just like any
other starter theme, very basic layout.
| | 02:28 | I'll actually leave the Grid on as
that's helpful for what we'll be doing.
| | 02:32 | There's also this thing
down here that says Resize Me.
| | 02:35 | That's just to demonstrate
how it's a responsive theme.
| | 02:38 | As you bring it in, it gets rid of first
one column, then the next, the menus at
| | 02:42 | the top change, and so forth.
| | 02:44 | If there were graphics on the
page, those would also resize.
| | 02:48 | From here, you could create
subthemes pretty much the same way you
| | 02:50 | did with the other base themes we
looked at, but here's the fun bit.
| | 02:54 | There's a module that actually
does that automatically for Omega.
| | 02:57 | We'll find it at drupal.org/project/omega_tools.
| | 03:04 | I'll go ahead and install it.
| | 03:06 | We do so in the usual way, and paste it in.
| | 03:16 | As you discover on the Modules page
and you would've discovered also on the
| | 03:19 | Project page, this also
requires another module called Ctools.
| | 03:25 | So I'll go and get that module as well.
| | 03:28 | It's at drupal.org/project/ctools,
and I scroll down and install it as
| | 03:33 | usual, and paste it in.
| | 03:44 | Now when I scroll to the bottom of the
page where that Omega Tools module is, I
| | 03:48 | can enable it and it'll
automatically turn on Ctools.
| | 03:54 | Now comes the fun part.
| | 03:55 | Let's create a subtheme, but this
time we won't actually have to go back to
| | 03:59 | the Terminal to do it.
| | 04:00 | Just go up to Appearance
and down to our Omega core.
| | 04:04 | You'll notice an unusual link here, Download.
| | 04:07 | Here's how that works.
| | 04:08 | You'll notice that it actually grabbed the
theme itself and downloaded it to the Ddsktop.
| | 04:14 | When we open it, we get
exactly what we'd expect.
| | 04:19 | That's part of the Omega Tools module
although it's not the part that's specific to Omega.
| | 04:23 | It also added that link to all of
the other themes. Very handy though.
| | 04:26 | But let's go back up to the top and you see
another link here, Create new Omega subtheme.
| | 04:31 | I click that and I'll call it lynda Omega.
| | 04:37 | I'll accept all of the defaults and as you
see they're intelligent for using Omega.
| | 04:42 | They put the created theme in the
usual place, that is the all folder.
| | 04:45 | It goes off with the base theme of
Omega and it starts with the Starterkit.
| | 04:48 | So I'll just say Save and continue.
| | 04:52 | Once it's created, you can change some
of the things inside the theme such as
| | 04:55 | its Version, its Description.
| | 04:57 | I'll just say This is
based on the Omega, and Finish.
| | 05:02 | I should mention that your web host might
not be set up to allow this to auto-install.
| | 05:05 | In that case, it'll be downloaded to
your local computer, and you'd install
| | 05:09 | it in the normal way.
| | 05:11 | We scroll down and there's our theme.
| | 05:13 | I'll enable it and set default.
| | 05:16 | And as you'd expect, since we haven't
made any changes, it looks exactly like
| | 05:19 | the Omega theme that it's based on.
| | 05:22 | We could turn on and off
the Blocks and so forth.
| | 05:24 | It's exactly the same.
| | 05:25 | Now that that's done, we can go on to
edit the theme's CSS and play with its
| | 05:29 | settings just as you've
usually done with a starter theme.
| | 05:32 | Those settings are amazingly detailed
and really show off how much Omega is
| | 05:36 | built around mobile devices.
| | 05:38 | I'll show you some of the settings that
are in the theme itself rather than the
| | 05:41 | CSS that you'd edit on the
Terminal program on your web host.
| | 05:45 | I click Appearance.
| | 05:47 | By the way, if you want to change
any of the information about the theme,
| | 05:50 | its version, its description, and so on, you
can do so by clicking this Edit link here.
| | 05:54 | But let's go on.
| | 05:56 | As with the other themes you've seen in
this course, there are a lot of options
| | 06:00 | here and it would take too
much time to go into all of them.
| | 06:02 | But it does show that
quite a lot is around mobile.
| | 06:05 | As the author of this
theme said, it's mobile first.
| | 06:09 | So it has specific information about
HTC Android, which is a mobile device.
| | 06:12 | It talks about the viewport which is
language that's used when you're talking
| | 06:16 | about portable devices and so on.
| | 06:19 | You defined Zones, which then change
depending on what kind of device you're
| | 06:23 | using to look at the site.
| | 06:25 | And then there's other advanced tools down here.
| | 06:28 | I'll leave it to you to explore those.
| | 06:30 | Well, that covers the essentials
of Omega and we haven't touched its
| | 06:33 | documentation or even tried playing
with its settings or CSS in any depth.
| | 06:38 | The creator of Omega also created a
remarkable module called Delta, which lets
| | 06:42 | you vary layouts depending
on a variety of criteria.
| | 06:45 | I've dedicated a video to
Delta elsewhere in this course.
| | 06:48 | If you've been watching these videos in
order, you've now seen four base themes;
| | 06:52 | each with its own mixture
of simplicity and features.
| | 06:55 | I'll be very interested to see which
ideas win out both in the market of Drupal
| | 06:59 | developers and ultimately, as
are integrated into core Drupal.
| | 07:03 | But in any case, getting used to all
of these ideas benefits you right now as
| | 07:07 | a site builder.
| | 07:09 |
| | Collapse this transcript |
| Using Firebug and other theming tools| 00:00 |
Before you start theming,
you're going to need some tools.
| | 00:04 |
While you can use any browser,
Firefox has come out ahead as the
| | 00:07 |
developers' choice.
| | 00:08 |
There are several tools available for
it, most notably one called Firebug.
| | 00:12 |
This video quickly shows you how
to get it working and gives hints on
| | 00:15 |
dissecting Drupal CSS.
| | 00:17 |
Now it's only an introduction.
| | 00:19 |
To go further, lynda.com has a course
specifically about Drupal theming and it
| | 00:23 |
has several about CSS.
| | 00:24 |
I recommend those if you want to go further.
| | 00:27 |
We already have Firefox
installed as you can see.
| | 00:30 |
To get it, go to getfirefox.com.
| | 00:34 |
Since we already have it, we'll now
install Firebug, which is an extension to Firefox.
| | 00:39 |
Its installation process is
different from that of other software;
| | 00:42 |
it all takes place within
Firefox's environment as you'll see.
| | 00:45 |
One good thing about it is that you don't
need the computer's root password to install it.
| | 00:49 |
So you remember how the URL for
Firefox was getfirefox.com; it's easy to
| | 00:53 |
remember Firebug's URL, because it's
getfirebug.com, and then just click Install.
| | 01:00 |
It then gives you a list of versions.
| | 01:02 |
Usually, you're going to want to pick
the one that's recommended, but if you
| | 01:05 |
are using a later version or a much
earlier version like here we have an alpha
| | 01:09 |
for Firefox 12 which isn't out yet, then
you'll probably use the one that's recommended.
| | 01:14 |
I'll click Download and then Add to Firefox.
| | 01:19 |
Once it's ready, click Install Now.
| | 01:22 |
You then have to restart
Firefox by clicking Restart Now.
| | 01:26 |
When it restarts, it should come up
with the tabs that you had open before;
| | 01:29 |
here you had lynda.tomgeller.com and
firebug, but then it added one more here.
| | 01:35 |
That's okay, I can just close these out.
| | 01:38 |
What that did is it added this icon right here.
| | 01:41 |
That's to turn Firebug on and off.
| | 01:44 |
You can also change some of its
options here, but I'll just turn it on
| | 01:46 |
by clicking the icon.
| | 01:49 |
Doing so opens up a panel at the bottom
of your screen and you'll notice that as
| | 01:52 |
you move around in the source of the
site, it highlights what's being affected.
| | 01:57 |
So if I dive down a little bit deeper,
it highlights smaller and smaller areas.
| | 02:05 |
There is the toolbar and so on.
| | 02:09 |
The part that I found to be most important
is the inspect element bit right up here.
| | 02:14 |
Click it and then go over your page.
| | 02:16 |
Then if you want to find out what
something is like let's say, this title up
| | 02:19 |
here; it shows it down in that panel below.
| | 02:22 |
If you click it, it actually stays on
it, so that you can go down and then
| | 02:26 |
change it however you want.
| | 02:28 |
You can also temporarily change
the way that the CSS is writing.
| | 02:31 |
For example, I'll go back up to that
inspect element and go to this RESIZE ME
| | 02:36 |
box over here and click it.
| | 02:39 |
If I then go down to the style here, I
can turn it off by simply clicking this
| | 02:42 |
little no symbol, like so.
| | 02:46 |
That's only temporary;
| | 02:47 |
it's not actually writing anything to
your server and then, in fact, if I were
| | 02:50 |
to have to close out Firebug and
reload the page, it would appear again.
| | 02:54 |
Besides clicking this icon up here,
there are few other ways to turn it on.
| | 02:57 |
One of them is under Tools and Web
Developer and there is a Firebug menu here
| | 03:02 |
which gives you a lot more choices.
| | 03:04 |
Within that menu is Inspect Element
which is Shift+Command+C on the Mac.
| | 03:08 |
I found that that's the way
that I usually use this program.
| | 03:10 |
Let me close it out again, and then let's
say that I'm going around my site and I
| | 03:14 |
want to -- oh, I want to see what this is.
| | 03:16 |
So I'll Shift+Command+C and then I can
immediately go straight to it. Very handy!
| | 03:21 |
But there is a complication.
| | 03:22 |
When we last left off editing our site,
we were using the Omega theme with some
| | 03:26 |
design hints turned on.
| | 03:28 |
Remember, those are also described by
CSS even though visitors to your site
| | 03:31 |
will never see them.
| | 03:32 |
For example, that little RESIZE ME
thing down in the bottom corner; they're
| | 03:36 |
never going to see that.
| | 03:37 |
So I recommend you turn off all the
developer stuff before modifying themes just
| | 03:41 |
to simplify matters, and in fact what
I'm going to do is I am going to go up to
| | 03:46 |
Appearance and change it back to Bartik
and then close it out and then close out
| | 03:52 |
the overlay to bring us back
to the screen that we expect.
| | 03:56 |
Now comes the really hard part;
| | 03:58 |
figuring out which CSS to affect.
| | 04:00 |
It's a big subject and I leave
it to the experts to explain it.
| | 04:03 |
Check out some of lynda.
com CSS courses for details.
| | 04:07 |
Problem is that when you bring up the
inspector and you point to anything like
| | 04:11 |
let's say this; it's an h2, but it's
inside this div, which is inside this div,
| | 04:16 |
which is inside this div.
| | 04:18 |
Over here in the right column, you
can see what all the styles are that are
| | 04:21 |
affecting it, but they're coming
from all kinds of different places.
| | 04:25 |
You can also click on Computed to see
what the values are without knowing where
| | 04:29 |
they're coming from or anything like that.
| | 04:31 |
So Firebug gives you inside into your
site CSS, but there are other parts of
| | 04:36 |
Drupal theming besides CSS.
| | 04:38 |
It's also about template files,
JavaScript, blocks, database, queries, and
| | 04:43 |
so forth, so I'm going to show you two
more tools that will give you special insight.
| | 04:47 |
The first is called theme developer.
| | 04:49 |
It was originally part of the Devel
module, which is absolutely essential for
| | 04:53 |
Drupal module developers.
| | 04:55 |
The theme developer has been split off
as its own project, so you'll have to
| | 04:58 |
download both modules.
| | 05:00 |
The first one I mentioned is
at drupal.org/project/devel.
| | 05:05 |
We actually installed that earlier on
in this course, so now we only need to
| | 05:08 |
install the theme developer.
| | 05:10 |
That's at drupal.org/project/devel_
themer and then I install it as usual.
| | 05:17 |
You'll find it in the Development group
and as I say, you also have to have Devel on.
| | 05:26 |
Once that's installed, you'll notice
this little pop-up down here, Themer info.
| | 05:30 |
When I click it, I'm able to select
elements on the page, and when I do, it'll
| | 05:36 |
tell me some of the details about
what theme function is creating at what
| | 05:39 |
template and so forth.
| | 05:41 |
I want to turn that off and go back to
the home page, so we get a slightly more
| | 05:44 |
realistic view of how that works.
| | 05:46 |
Go down to Themer info. Let's say I want
to find out what's going on in the sidebar.
| | 05:50 |
I highlight it and there.
| | 05:52 |
Now I know exactly which files to
affect if I want to change the programming
| | 05:56 |
that defines how that is
displayed on your screen.
| | 05:59 |
You can also go in and take
a look at all the variables.
| | 06:03 |
Since we're not going to delve into
the programming at all, I'm going to turn
| | 06:06 |
off the Themer info and
then disable those modules.
| | 06:09 |
So first I click here, and then
disable them as usual, and scroll down, turn
| | 06:19 |
off Theme developer.
| | 06:20 |
Then scroll to the bottom and save,
and scroll down, turn off Devel, save.
| | 06:34 |
The final tool I want to show you is
called Drupal for Firebug, which as the
| | 06:37 |
name implies, extends
Firebug in Drupal-specific ways.
| | 06:41 |
You can get it at drupal.org
/project/drupalforfirebug.
| | 06:45 |
It's a combination of
Firefox plug-in and Drupal module.
| | 06:49 |
So be sure to download them both.
| | 06:50 |
Unfortunately, the module is
somewhat in limbo as I'm recording this.
| | 06:54 |
It no longer works with the latest
version of Firebug, rather than downgrade to
| | 06:58 |
show it, I recommend that you
determine its status when you watch this video.
| | 07:01 |
Then check it out if it's up to date.
| | 07:03 |
As I said earlier, this video gives
you only a glimpse into the structure of
| | 07:07 |
themes and the traditional
tools for controlling them.
| | 07:10 |
In other videos in the section of
the course, I'll show you a couple of
| | 07:13 |
interesting tools that gives you a high
degree of control through comparatively
| | 07:17 |
simple point-and-click interfaces.
| | 07:20 |
| | Collapse this transcript |
| Modifying themes with Sweaver| 00:00 |
lynda.com has a terrific
course about traditional theming.
| | 00:03 |
It's a deep technical course,
and that's because it had to be.
| | 00:07 |
Until recently, the only way to
modify themes was by changing PHP and CSS
| | 00:11 |
code, line by line.
| | 00:14 |
But now there are a few
graphical tools for editing the CSS.
| | 00:17 |
I covered one of them in depth for the
Drupal Gardens Essential Training Course.
| | 00:21 |
Definitely check that out to learn how
to make exportable theme using the Drupal
| | 00:24 |
Gardens Theme Builder.
| | 00:26 |
But there are also two other
Graphical Theme Editors that are available as
| | 00:29 |
Standard Drupal Modules to install on
your own site, the first one is Sweaver,
| | 00:33 |
which I'll cover in this
video and the other is Livethemer.
| | 00:37 |
Here we go with Sweaver.
| | 00:38 |
First to we get the module
from drupal.org/project/sweaver.
| | 00:45 |
You'll notice that it requires Chaos
Tools, which we already installed and jQuery
| | 00:48 |
UI, but that's already built into Drupal 7.
| | 00:55 |
So we copy it and install as
usual, and paste it in. Scroll down.
| | 01:11 |
Now let's go back to our home page
where you'll see something quite different,
| | 01:16 |
this is a Sweaver palette down here.
| | 01:19 |
You see how it works quite simply.
| | 01:21 |
Go around the page, point
and click at any part of it.
| | 01:24 |
Like let's say this text right here.
| | 01:26 |
Immediately you'll get ways to
change the appearance of that text.
| | 01:29 |
You can change its background, its
borders and spacing, and so forth.
| | 01:33 |
I am going to show something
a little bit more complicated.
| | 01:36 |
This is an h2 right here, but you'll
noticed that there are other h2s on the page.
| | 01:40 |
So it selects all of them. You could
change the font, and as you expect, it
| | 01:46 |
changes all of them.
| | 01:47 |
But what if you only
wanted to change one of them?
| | 01:50 |
Well, then go up to the full path here
and you could select or deselect these.
| | 01:54 |
Like let say we only want the one
that goes with node-8, we check that then
| | 01:58 |
we'll make more changes.
| | 01:59 |
Let's make it a little bit
bigger than all the others.
| | 02:03 |
As we scroll down, we see,
yeah, it only affected that one.
| | 02:07 |
As with anything in CSS this can be the
tricky part figuring out exactly what it
| | 02:11 |
is you're going to affect, but Sweaver
makes it much, much easier than if you're
| | 02:15 |
playing around with CSS text files.
| | 02:18 |
You can do other things besides change the font.
| | 02:20 |
You can get a Background or change the
Spaces around it, so I'll just write it out.
| | 02:31 |
Or pretty much anything
else you would do with CSS.
| | 02:34 |
When you're done making your changes,
you click Save, then you name the style.
| | 02:39 |
When I do this, I usually save it with a
name that includes the theme I am using.
| | 02:42 |
In this case Bartik.
| | 02:43 |
I can Save and continue or Save and publish,
which actually makes this a live site.
| | 02:51 |
We can check that of course by going
to another browser and loading it up.
| | 02:54 |
Yup, and there is our change.
| | 02:57 |
Now you might be asking yourself,
where do these changes actually gets saved?
| | 03:02 |
I'll show you that by going into my
Terminal program. I am already at the doc
| | 03:06 |
root for this site.
| | 03:07 |
Now normally if you change the theme, it's
is going to go into sites/all/themes.
| | 03:14 |
When I take a look at what's in that
directory, you'll notice that there isn't
| | 03:18 |
anything actually that is related to Sweaver.
| | 03:20 |
Instead, the changes that Sweaver
makes get saved in your files directory.
| | 03:27 |
So we go into default/files and you'll
notice that there is now a directory called
| | 03:34 |
sweaver, and there it is.
| | 03:39 |
There is the draft version that we had
and a live version. So far, so good.
| | 03:44 |
Now we're going to go down into the
rabbit hole, because you see, the options
| | 03:48 |
that I showed you so far are only a
small percentage of what's available.
| | 03:52 |
I'll go back and show you what I mean.
| | 03:54 |
Obviously there are all the other
things you can do with the Font, and the
| | 03:57 |
Background and Borders and Spacing.
| | 04:00 |
This other tab is still empty, but
that's going to change in a minute.
| | 04:05 |
To expose all of its power, we go up
to Configuration, then down to Sweaver,
| | 04:10 |
which is under User Interface.
| | 04:12 |
This page has five tabs and I'll go
through them very quickly, because as you'll
| | 04:15 |
see, there are lots of options.
| | 04:17 |
This first one allows you to Exclude
paths. By default excludes some of the more
| | 04:22 |
commonsense ones. For example, when
we're on an administration page, like the
| | 04:25 |
one we're on right now,
| | 04:26 |
we don't want that Sweaver
palette popping up in front of us.
| | 04:30 |
It's also set up by default, so that
when you point at the Sweaver palette itself,
| | 04:34 |
it doesn't bring up the Sweaver
controls; that would be sort of redundant and
| | 04:37 |
you'd end up in this infinite loop sort of.
| | 04:39 |
And then there are some
other geeky things down here.
| | 04:42 |
If you don't know what they
mean, don't worry about them.
| | 04:45 |
Now let's continue on.
| | 04:46 |
You can change the order in which all
of the options appear in the Sweawer
| | 04:50 |
palette -- that's not just for the Form; it's
also Selectors and Properties and so forth.
| | 04:56 |
And you can add additional capabilities
to Sweaver. For example, let's add this
| | 05:02 |
Palettes and Switch Theme
options and Save configuration.
| | 05:07 |
Then let's go back and take a look and
watch what happens to the palette when we do.
| | 05:12 |
See, we now have a Switch theme tab,
and as we go through, we see that other
| | 05:17 |
things have changed as well.
| | 05:20 |
Moving on, let's go back and
configure our Sweaver screen again.
| | 05:27 |
After you've built up a library of styles,
you can save them here and then there
| | 05:30 |
are some additional options.
| | 05:32 |
For example, if you want to be able to
delete them from the Sweaver interface,
| | 05:35 |
you just click the Show delete Tab, and
finally, some controls having to do with images.
| | 05:41 |
Now let's get back to how
Sweaver actually does all of this.
| | 05:44 |
There is one potential problem,
which is that the changes you make don't
| | 05:48 |
actually become part of the theme.
| | 05:50 |
They're in that Sweaver folder I
showed you earlier with your site files.
| | 05:53 |
Sweaver then knows to look where it
is and render your theme to the screen.
| | 05:57 |
That means you can't actually hand
this theme off to someone else, unless
| | 06:01 |
they're also running the Sweaver module.
| | 06:03 |
One good thing though is, you can
take a look at the CSS and use that in
| | 06:07 |
your local.css file.
| | 06:11 |
Let's take a look, for
example, at what we changed so far.
| | 06:14 |
Yup, it's just ordinary CSS, copy it and
paste it, then you can turn off Sweaver.
| | 06:20 |
In this way, I think that Sweaver's
method of saving files is actually a benefit;
| | 06:24 |
because the way Sweaver delivers both
ease of use for beginners and a finesse
| | 06:28 |
solution for experts is really handy.
| | 06:31 |
Now the last thing I'm going to do
before we go is to turn off Sweaver,
| | 06:34 |
because obviously to continue with
the course and when you're launching a
| | 06:37 |
site, you don't want this popping up
in front of people after you finished
| | 06:41 |
designing your site.
| | 06:43 |
So I'll close this out, go up to
Modules, all the way down to Sweaver, Save
| | 06:53 |
configuration, and when we close out
this overlay, we see that the site is back
| | 06:58 |
the way we wanted it.
| | 06:59 |
| | Collapse this transcript |
| Modifying themes with Livethemer| 00:00 |
The newcomer to the Drupal theming world
is the Livethemer, which took Sweaver's
| | 00:04 |
ability to edit CSS and just ran with it.
| | 00:07 |
It takes a somewhat different approach
from both Sweaver and the other visual
| | 00:10 |
editor Drupal Gardens ThemeBuilder.
| | 00:12 |
Livethemer lets you do the same sorts
of changes as those other two, but starts
| | 00:17 |
by having you define the scope of
those changes; for example, whether they
| | 00:20 |
should be on all pages or just one.
| | 00:23 |
The result can be kind of confusing at
first but ultimately it's quite powerful.
| | 00:28 |
As usual we will first get the
module at drupal.org/project/livethemer.
| | 00:35 |
I want to point out that while
Sweaver works with all themes, Livethemer is
| | 00:38 |
optimized to work with this livethemer_
base theme which again is like Zen or any
| | 00:43 |
of the other base themes.
| | 00:44 |
You can use it with
certain other themes however.
| | 00:46 |
I just want to mention that there is
the link to go to it. If you want to
| | 00:49 |
download it, you can do so here.
| | 00:51 |
And in fact, I will do exactly that.
| | 00:53 |
So first I will install that theme
and then I will go back and install the
| | 00:57 |
module and paste it in. Scroll down.
| | 01:07 |
I will simply copy and paste those.
| | 01:11 |
I will go back and enable
the module and then the theme.
| | 01:18 |
Livethemer is the module
that actually makes it work.
| | 01:25 |
Livethemer Inspector is the user interface.
| | 01:28 |
So you can run a site using just the
Livethemer module, but in order to develop
| | 01:32 |
for it you have to have the Inspector turned on.
| | 01:35 |
It's common practice to turn on the UI while
you're developing and then turn it off later.
| | 01:39 |
You will notice that it requires some
basic configuration before use as it says here.
| | 01:44 |
I'll just open another tab
and go to that in a minute.
| | 01:47 |
But first I'm going to put in that theme.
| | 01:52 |
Enable it and set it as the default.
| | 01:53 |
Now we are ready to get going.
| | 01:57 |
As with other base themes, this one
includes just some very basic layout.
| | 02:01 |
Before going on, there are a
couple of things I want to do.
| | 02:04 |
First off all if we go back to the
Project page, you will see some comparisons
| | 02:08 |
with both Sweaver and Skinr.
| | 02:10 |
Now Skinr is the module that was
originally used for Fusion and has been
| | 02:13 |
replaced with Fusion Accelerator.
| | 02:16 |
Some of these critiques may also
be true for Fusion Accelerator.
| | 02:19 |
If you're doing a comparison, I would
recommend reading this whole section in
| | 02:22 |
here, so you can understand how they all
work together or more so compare to each other.
| | 02:28 |
The other thing is I want to check the
configuration since it did warn me about that.
| | 02:32 |
So will open up Livethemer Configuration
and it tells me which things are ready to go.
| | 02:37 |
The only thing that it needs is a Settings file.
| | 02:39 |
I am going to start with an empty-settings-file.
| | 02:41 |
Basically, these are templates that
you build off of and Save configuration.
| | 02:48 |
Now we can go back home and start styling.
| | 02:51 |
As with Sweaver, we have this palette
at the bottom which we can use to make
| | 02:55 |
changes to our theme.
| | 02:57 |
The last thing that we have to do is we
have to go up to the theme Settings and
| | 03:01 |
select a base theme.
| | 03:02 |
I will go up to Appearance and
then click Settings next to my theme.
| | 03:06 |
We have the Settings file that we
already set and Save configuration.
| | 03:10 |
It just needs some confirmation.
| | 03:12 |
Close that out, wait for the
screen to reload and then take a look.
| | 03:19 |
As I move the pointer around the screen,
you'll notice that it's somewhat like
| | 03:23 |
both Sweaver and Firebug and the
different areas become highlighted.
| | 03:26 |
However, we are not actually going to
affect individual CSS classes but rather
| | 03:30 |
sections of the Drupal page. See here
we have node-2, here we have block-10, and
| | 03:36 |
this is the search block, which
is known internally as block-9.
| | 03:39 |
When I click one of them, for example,
the node, I then get quite a few options,
| | 03:44 |
and as I said before, you first
define the scope that you want to change.
| | 03:48 |
Do I want to change only this node,
everything by this author, nodes of this
| | 03:52 |
type, which in this case is I believe
an article or actually a basic page,
| | 03:56 |
this page, or so on.
| | 03:57 |
Let's change only this node and
I'll start with Starter Node Design.
| | 04:03 |
Then click on the little gear here.
| | 04:05 |
From there, you can change the way this node
appears either in Full Display or Teaser Display.
| | 04:10 |
Since we are looking at the
front page, we only see the Teaser;
| | 04:13 |
we are not looking at the full node
as it shows up in the Full Display.
| | 04:17 |
So let's try changing the font.
| | 04:19 |
Go down to Fonts and change the Title so that
its Font Family is Helvetica and there we go.
| | 04:26 |
And you will notice as we scroll through,
it only change that one node because
| | 04:29 |
we first define the scope; we could
have done that for all nodes and so on.
| | 04:34 |
The same is true if you wanted to go
over and make some changes to the block.
| | 04:37 |
First, I will save this by clicking
the check mark, then I will go over
| | 04:42 |
and select that block.
| | 04:43 |
We have a different selection
of how the scope can be affected.
| | 04:47 |
This block, all blocks in this region,
and so on, and once again we can keep
| | 04:51 |
doing the same thing.
| | 04:52 |
Go up, click on the gear, change the fonts,
however we want to do it and then we save.
| | 05:02 |
So there is the basic operation.
| | 05:03 |
Now let's take look at what
files were actually being changed.
| | 05:07 |
To do so, we go to the Terminal,
where I am already logged into my site.
| | 05:12 |
The things being changed
are very much like in Sweaver.
| | 05:14 |
They're not inside anything like
sites all themes. We are not affecting the
| | 05:18 |
theme per se, instead they
are in sites/default/files.
| | 05:19 |
When we list it, we see that
it's actually fairly sloppy.
| | 05:27 |
It puts all of that stuff right here
at the top level of the files directory.
| | 05:31 |
Let's take a look at that CSS file right there,
and there's the CSS that we just affected.
| | 05:40 |
Now you might remember that was node-8
and there is the 8 right there, and so it
| | 05:44 |
sort of figures out its own CSS
classes and applies them selectively.
| | 05:49 |
One other thing that makes
Livethemer special is that its creators, an
| | 05:52 |
Australian company called Marmaladesoul, host
variations on their site at livethemer.com.
| | 05:58 |
You have to create an account on
that site before you can grab any of the
| | 06:00 |
variations, but I have already done that.
| | 06:02 |
So let's go back here, We have our
block selected. I am going to go to
| | 06:06 |
livethemer.com, where I am already logged in.
| | 06:11 |
And then we click Variations.
| | 06:15 |
Here you can filter in a variety of ways.
| | 06:16 |
I am going to get a block design, so I
will search and come up with Sticky Note.
| | 06:23 |
Click to download it and it goes to my desktop.
| | 06:26 |
Unfortunately, the way that the
designers of livethemer.com decided to do
| | 06:30 |
things, you can't easily copy the URL
from that site and download it directly to
| | 06:34 |
your UNIX machine using the wget command.
| | 06:37 |
So now that I have it on my local machine,
I will upload it using an FTP program,
| | 06:41 |
which I already have available.
| | 06:42 |
Here is my local machine
and here's my remote machine.
| | 06:45 |
I will just refresh here so I
can see what's on the desktop.
| | 06:50 |
And there is sticky-note.
| | 06:51 |
But you may ask where should it go?
| | 06:54 |
It could be in various places but
Livethemer's creators recommend that it go
| | 06:57 |
into sites/all/variations.
| | 07:01 |
So let's see, sites > all, and then we
have to create a file called variations.
| | 07:07 |
I will do that in the Terminal.
| | 07:08 |
Now when I go back here and reload, there are
our variations and I will stick it in there.
| | 07:18 |
Now when we go back to our browser
here, you can go back to our site, click
| | 07:24 |
around a little bit, and then go back to
our block and we now have Sticky Note.
| | 07:30 |
Let's see what that does, and
you can see it immediately changes.
| | 07:34 |
It shows that block as if it were a
Sticky Note as you would imagine, but it has
| | 07:37 |
additional variations.
| | 07:38 |
For example, we could change
the angle of that sticky note.
| | 07:41 |
So as you can see, this gives you a
lot more control and a lot of neat
| | 07:47 |
little tricks that weren't
available in either the Drupal Gardens
| | 07:50 |
ThemeBuilder or Sweaver.
| | 07:53 |
So there's your introduction to Livethemer.
| | 07:55 |
Now before going on with the course,
I'm going to clean it up by simply turning
| | 07:58 |
its two modules off and I'll
go back to our Bartik theme.
| | 08:05 |
Then scroll to the
bottom and save. Scroll down.
| | 08:12 |
There is one other thing I should
mention about both Sweaver and Livethemer,
| | 08:19 |
both of them intercept internal
commands going between various parts of Drupal
| | 08:23 |
and its theme layer.
| | 08:24 |
So they do add a bit of processing time.
| | 08:26 |
While you won't notice it for small low-
traffic sites, I would take a very close
| | 08:30 |
look at performance for any
large busy sites you are working on.
| | 08:33 |
Now having said that; large and
busy are very comparative words.
| | 08:38 |
If you like what Livethemer does, it
should work well for all but the very
| | 08:42 |
biggest and most widely known sites.
| | 08:45 |
| | Collapse this transcript |
|
|
8. Making Your Site More ReactiveUnderstanding the Rules module| 00:00 | There are a few bits of software in the
Drupal world that I call super modules.
| | 00:05 | These are the ones that open up a whole
new world of possibilities for your site.
| | 00:10 | The obvious example is views, the study
of which makes up most of my lynda.com
| | 00:14 | course, Drupal 7
Reporting and Visualizing Data.
| | 00:18 | Views took functionality that required
custom programming, and put it out there in
| | 00:21 | the hands of nonprogrammers, like me.
| | 00:24 | Rules is another of those super modules;
it basically lets you configure your
| | 00:29 | site to respond in custom
ways when users perform actions.
| | 00:33 | It's some what like the actions and
trigger modules that are in core Drupal,
| | 00:36 | but it's much better.
| | 00:38 | We start out as usual, by going to its
project page at drupal.org/project/rules.
| | 00:44 | Before we install it, we are going
to have to take care of one of its
| | 00:47 | requirements, which is
Entity API for Drupal 7.
| | 00:50 | So I'll open that up in a new tab, and
grab that as well. Now we install, and now
| | 00:59 | we enable them, and now the rules module.
| | 01:08 | The Entity API module is in the other
group, and then rules are down here in
| | 01:13 | their own group at the bottom of the page.
| | 01:15 | I'll enable Rules, and Rules UI, which
is necessary to actually create rules.
| | 01:20 | I'll leave Rules Scheduler off, since we're
not going to talk about this, but if
| | 01:23 | you're interested, of course, there is
very good documentation for it. And then
| | 01:26 | we save configuration.
| | 01:28 | If you've forgotten to enable any
modules that are necessary, as usual,
| | 01:32 | Drupal will tell you.
| | 01:34 | Once that's installed and enabled,
you control rules by going up to the
| | 01:38 | Configuration menu, and then down to Rules.
| | 01:45 | Rules comprise three parts:
events, conditions, and actions.
| | 01:50 | Their names make them
fairly self-explanatory.
| | 01:53 | When an event occurs, rules causes
an action to be performed, if certain
| | 01:57 | conditions are met.
| | 01:59 | The best way to demonstrate is to
create a simple, but very useful rule.
| | 02:03 | Let's say that you wanted to display a
thank you message whenever users post a comment.
| | 02:07 | We do that by going up to Add New
Rule, I'll name it Thank you for your
| | 02:11 | comment, and the event it's going to
react to is, after saving a new comment,
| | 02:18 | and then I continue.
| | 02:19 | You'll notice it's
already put that event up here.
| | 02:22 | You could change it by deleting it, and
adding a different event, or add a series
| | 02:26 | of events, or whatever it is you like,
but let's just go down and add the action.
| | 02:31 | There are quite a lot to choose from,
and this list gets even longer as you add
| | 02:35 | more modules that
interact with the Rules module.
| | 02:38 | The one that we want,
however, is down toward the bottom;
| | 02:41 | Show a message on the site,
in the System group.
| | 02:44 | We then have options of what exactly
we want to show, I'll just say Thank
| | 02:48 | you for your comment.
| | 02:52 | You can actually customize this by
using the replacement patterns, if you
| | 02:55 | have Token installed.
| | 02:56 | Let's scroll through here, and take a
look at some of the things we could add.
| | 03:01 | One of them is comment:author. This way,
we could go back up, I'll copy that, and
| | 03:06 | come up here, and say Thank you for your
comment, comma, name, and scroll down, and save.
| | 03:16 | Now let's see how that works.
| | 03:18 | Go back to our front page, find an article
here, since we can comment on articles,
| | 03:25 | and I'll add a comment.
| | 03:30 | Scroll down, and Save.
| | 03:32 | Now, we didn't see it very well, because
of the way that the commenting works, but
| | 03:36 | up here at the top, there is our
message: Thank you for your comment, Admin.
| | 03:39 | So perhaps this isn't the best
example, but you can see the power.
| | 03:42 | You could also have it send an e-mail,
or change any of a number of environment
| | 03:47 | variables, and so on.
| | 03:48 | Because there was that condition
section in the middle as well, you could also
| | 03:52 | set it up so it only shows that message
to users with certain roles, for example.
| | 03:55 | And the way you do that is, again, go back
to Configuration, and Rules, there's our
| | 04:02 | Rule; we'll edit it, and add a condition,
and as I say, there are quite a few
| | 04:07 | conditions to choose from.
| | 04:11 | We'll go deeper into rule
creation in the later video.
| | 04:14 | Let's go back and take a look at some
of the other parts of the rules system.
| | 04:18 | I clicked on Rules to get back here,
where I see the active rules, and next to
| | 04:22 | each one, you will see, not only is
there edit, but translate, disable,
| | 04:26 | clone, delete, and export.
| | 04:28 | These should be fairly self-explanatory.
| | 04:30 | Clone makes an exact copy
of the one that's there,
| | 04:33 | disable turns it off temporarily,
and so forth.
| | 04:36 | I do want to show you
export and import though.
| | 04:38 | So we'll click export for the one
rule that we created, and it gives us this
| | 04:43 | text. We'll copy that, and
then go back to our Rules page.
| | 04:50 | Now we can import that rule by clicking
up here, pasting in the code, and we have
| | 04:56 | a choice of overwriting the one that's
already there, or we could go up here and
| | 05:00 | edit it, change its name;
do all sorts of things.
| | 05:03 | I am not actually going to go through it,
but you can see how powerful this is
| | 05:06 | if you want to move Rules
from one site to another.
| | 05:09 | The last part of this system that
needs mentioning is something called
| | 05:12 | components. You see that up here
under this tab.
| | 05:15 | The best way to describe components is
as bits of rules, or collections of rules
| | 05:19 | that are packaged for easy reuse.
| | 05:22 | You can assign values to variables in
components, making them vary depending on context.
| | 05:28 | Now, this is a fairly advanced subject, and
so I won't be going into it in this course.
| | 05:33 | Like the Views module, the Rules module has
a big user base, and lots of documentation.
| | 05:39 | As usual, you can get there from the
documentation link on the Rules module page.
| | 05:43 | I've gone back to that page, and as
usual, it's in the right column, and just
| | 05:48 | click Read documentation.
| | 05:50 | Just as amazing is how many
modules integrate with the Rules module.
| | 05:54 | If we go back to that project page, and
scroll down to the bottom, we have this
| | 05:58 | link: Modules supporting rules.
| | 06:01 | Now, since making this video, it's
actually been split into two links: list of
| | 06:05 | modules related to rules, and manual
list of modules supporting rules. The first
| | 06:10 | list is automated, while the
second was put together by hand.
| | 06:14 | Let's look at the second one.
| | 06:15 | As you can see, it's an enormous list.
| | 06:18 | These other modules typically provide
hooks in the form of events or actions.
| | 06:23 | For example, the User Points module
makes an action available to rules, so you
| | 06:28 | can grant merit-based points to a user
who creates a comment, or creates a node.
| | 06:33 | Before going into rule creation any
deeper, I'd like to show you how the
| | 06:36 | shopping cart system Drupal Commerce
uses rules, because it's quite instructive.
| | 06:41 | It's an example of a complex system
that's essentially based on rules, views
| | 06:46 | and custom code.
| | Collapse this transcript |
| Demonstrating how Rules works in Drupal Commerce| 00:00 | Now that you know the basics of how rules
works, it's time to see it in its full glory.
| | 00:05 | The storefront distribution of
Drupal, called Drupal Commerce, uses rules
| | 00:09 | and views extensively.
| | 00:11 | I did a full course on it for lynda.com
called Create Your First Online Store
| | 00:15 | with Drupal Commerce, so I
won't delve deeply into it here.
| | 00:18 | Just watch that course if you want
to know more about Drupal Commerce.
| | 00:21 | I've already installed it from
the Commerce Kickstart version.
| | 00:24 | You can get it at drupal.org/
project/commerce_kickstart.
| | 00:31 | More about Drupal Commerce
itself is at drupalcommerce.org, and
| | 00:36 | drupal.org/project/commerce.
| | 00:42 | Anyway, let's get back to
rules. First, a simple example.
| | 00:46 | I am going to switch over to a browser
where I am not logged into the site, and
| | 00:49 | I'll add a product to my Shopping cart.
| | 00:51 | Hmm, Product Three looks pretty good;
| | 00:54 | I'll add that to my cart,
| | 00:56 | and I get this message up here:
Product Three added to your cart.
| | 01:00 | Now, how exactly did that happen?
| | 01:02 | It happened through a rule that
was built into Drupal Commerce.
| | 01:05 | We can see that by going back to our
site, clicking Configuration, and then
| | 01:10 | going down to Rules.
| | 01:12 | Now you see a long list of rules;
these are all Drupal Commerce rules
| | 01:15 | that weren't included in the Rules module,
but were instead included in Drupal Commerce.
| | 01:19 | The one we are looking for is
Display an Add to Cart message.
| | 01:23 | Let's look at it by clicking edit.
| | 01:26 | The event is, as you'd guess, After
adding a product to the cart, and it displays
| | 01:31 | an Add to Cart message.
| | 01:33 | If we wanted to, we could go in and
edit the event, and the action, and we could
| | 01:37 | add more actions, and so forth.
| | 01:39 | In fact, let's take a look at
what other actions are available.
| | 01:43 | These are separated into groups, and
you see that the first few groups are all
| | 01:47 | related to commerce: Commerce
Cart, Commerce Checkout, and so on.
| | 01:50 | There's quite a few, so as you can see,
commerce really works a lot with the Rules module.
| | 01:55 | Now let's take a look at an example
that's a little bit more complicated.
| | 01:58 | I am going to go back to the non-logged
in browser here, and I'm going to check out.
| | 02:02 | First I'll take a look at what's in
my cart: 1 Quantity of Product Three. I
| | 02:07 | think I'll change that to 2, and update
the cart; good, $60.00, and I'll Checkout.
| | 02:14 | It asks me for some information;
| | 02:16 | I am going to use a different
address. How about tom@example.com?
| | 02:20 | I am logged into the site as
admin@example.com.
| | 02:24 | Full name, and Continue.
| | 02:30 | It asks me to confirm, and for a payment.
This is a test payment module, so I can
| | 02:34 | just say test payment, and continue.
| | 02:39 | We've completed our order. If we go
back to our administrative interface, we
| | 02:43 | can see that it does more than just put up a
message that says your order has been completed.
| | 02:47 | First of all, it creates the order,
and we see that when we say View orders.
| | 02:51 | It also creates a user on the system,
which we can see by clicking People.
| | 02:57 | See? There is our tom@example.com.
| | 03:00 | We can show how that
happened by going back to our rules.
| | 03:02 | Click Configuration, and Rules, and the
rule we are looking for is Create a new
| | 03:10 | account for an anonymous order.
| | 03:12 | Remember, we weren't logged
in using the other browser.
| | 03:15 | But rules was able to see, okay, what
e-mail address did that person add? And then
| | 03:20 | create an account
based on that e-mail address.
| | 03:23 | And if we click edit, we
can see all of the details.
| | 03:26 | In this case, there are several conditions.
And then at the bottom, we have the
| | 03:30 | action. It creates a new entity,
which in this case is a person.
| | 03:34 | Now, one thing that Drupal Commerce
doesn't demonstrate is the use of components.
| | 03:38 | Somethings that could be components
are instead hard coded into its modules.
| | 03:44 | But as with views, you can stand to
learn a lot, just by poking around what is
| | 03:48 | there, cloning the existing rules, and
testing them out with your own changes.
| | Collapse this transcript |
| Creating practical rules| 00:00 | You've seen the theory
behind how the Rules module works,
| | 00:03 | we created a simple rule, and you've
seen some pretty fancy applications,
| | 00:07 | using Drupal Commerce.
| | 00:09 | Now, in the next two videos, let's go a
little deeper into the complexity of rules,
| | 00:13 | using a practical example.
| | 00:15 | Here's the scenario: let's say that you
allow the public to create accounts on
| | 00:20 | your site, and they are allowed to
change their usernames, but only people who
| | 00:24 | are on your staff are allowed to
have the word foo in their usernames.
| | 00:27 | So you need to prevent anybody who's
not on staff from having a username that
| | 00:32 | includes the word foo.
| | 00:34 | To make this simulation work, I'll
create a rule called staff, so we can
| | 00:37 | differentiate between company
staff, and the general public.
| | 00:40 | I won't actually make that
differentiation in this video;
| | 00:43 | it'll be in the next one,
| | 00:45 | but here we go. We simply go up to People >
Permissions, and then Roles. We create the staff
| | 00:52 | role, and we move to its proper
place above the administrator, and Save.
| | 01:00 | Now we go into the Permissions, and
we just have to make one small change.
| | 01:04 | Go all the way down to the User
group. We want to allow people to Change
| | 01:08 | their own username.
| | 01:10 | When we click Authenticated User, of
course, that also checks the staff box, since
| | 01:14 | it includes all authenticated users,
including those with any kind of role. And
| | 01:19 | then I Save permissions.
| | 01:21 | Now let's make the rule. We go to Configuration,
then down to Rules, and then we Add a new rule.
| | 01:30 | I'll call this Block non-staff from the
name foo, and the event is going to be,
| | 01:38 | let's take a look; it's
something on the User group.
| | 01:40 | Ah, After updating an existing user
account. Now, that doesn't take care of all
| | 01:46 | of the different possibilities; someone
can still create an account with that
| | 01:49 | name, but we'll get to that
in the next video.
| | 01:52 | Then I click Save. The next thing we
need to do is figure out a condition. When
| | 01:57 | should we trip this rule?
| | 01:59 | We go down to conditions,
and click Add condition.
| | 02:01 | There are many options here, and it usually
takes a while to figure out which is which.
| | 02:06 | For example, what's the difference
between Data comparison, and Text comparison?
| | 02:10 | As with the Views module, the more
time you spend on these and just playing
| | 02:14 | around, the better you'll
understand which ones you need.
| | 02:17 | I happen to know that in this case, I
need Text comparison, so I select it, and
| | 02:22 | then I get some additional options here.
| | 02:25 | The first question is, what
I'm going to compare it to?
| | 02:28 | Well, if I look at the Data Selectors, I
see that I have lots and lots of options.
| | 02:32 | I know it has to do with an account name,
| | 02:35 | but there are some subtle differences
between site:current-user:name, and
| | 02:38 | account:name, and so forth.
| | 02:39 | Well, after playing around with it for
a while, I happen to know that the one
| | 02:43 | that I want is account:name.
| | 02:45 | So I'll go up here, add account,
and then colon,
| | 02:49 | that's shows me all the options in that
group, and then account:name. Scroll down,
| | 02:55 | and then I could add the various
things I want to actually compare.
| | 02:59 | I want to compare that Value to the
string foo. And down under the Comparison
| | 03:04 | Operation, starts with, ends with; no.
As long as it contains foo, we shouldn't
| | 03:08 | allow them to change their name.
| | 03:10 | I also want to point out
this little checkbox.
| | 03:12 | You can create negative rules. In
other words, you can say either let
| | 03:15 | everything pass if it matches this
comparison, or make everything fail if it
| | 03:20 | matches this comparison. I'll click Save.
| | 03:23 | In this case, I'm making the action be tripped
if somebody tries to enter foo in their username.
| | 03:30 | The next step is to add our actions,
and I'm going to add two. The first one is
| | 03:34 | going to be a warning.
| | 03:36 | The action I want is under the System group:
Show a message on the site. Then I have my options:
| | 03:46 | You can't have a user name
that contains "foo". Try again.
| | 03:52 | I scroll down, and decide that
I'll make that a Warning message.
| | 03:57 | That sounds like an appropriate kind.
Status is a green thing at the top of
| | 04:01 | your screen; it doesn't look so scary.
Warning is yellow, and Error is red,
| | 04:05 | each with its own icon.
| | 04:07 | And I will let it Repeat, in case a
person tries more than once, and click Save.
| | 04:13 | Now, that tells them that they can't do it,
but I also want to add an action that
| | 04:17 | stops them from doing it.
| | 04:18 | So I'll click Add action, and once
again, a little bit of playing around has
| | 04:22 | told me that the Value that I want here is
Set a data value, so I'll select that,
| | 04:27 | and the thing that's going to
change is, once again, the account:name.
| | 04:32 | This one right here. So I go back up
say, account:name, Continue, and then I say
| | 04:45 | what I want it to be set to. And the
Value is actually going to be an unusual
| | 04:49 | little token down here.
| | 04:53 | We have account-unchanged; in other
words, it looks back to what it was before
| | 04:57 | the person attempted to change it, and
it's going to be account-unchanged:name.
| | 05:03 | So I copy it, and paste it, go down
to the bottom of the screen, and Save.
| | 05:09 | Now let's give this rule a try.
| | 05:11 | To do so, I am going to up
to People, and I'll add a user.
| | 05:16 | This user is going to be called,
lets say, nonstaff.
| | 05:19 | E-mail address will be nonstaff@
example.com, and has a password.
| | 05:25 | Now, this person is not a staff member,
remember. We will create the new account,
| | 05:31 | and then go over to a
browser where we're not logged in.
| | 05:34 | I'll login as that person.
| | 05:39 | In order to change a username when
you're logged in, you go up to My account,
| | 05:43 | and then click Edit.
| | 05:45 | Let's see what happens if this person
says, my name is foo, which of course,
| | 05:51 | contains the string
that we want to forbid.
| | 05:54 | Go down to the bottom, and click Save,
and indeed, we got exactly what we wanted.
| | 05:59 | We get the Warning message right
here, and the username stays as nonstaff.
| | 06:04 | The thing is, if you are not careful,
you might be tempted to stop here,
| | 06:08 | but it's not really finished
| | 06:11 | First of all, we haven't differentiated
between staff members and nonstaff
| | 06:14 | members. We trigger the same rule even
when staff members want to change their name.
| | 06:19 | Second, this rule only gets triggered
when user's change an existing account.
| | 06:24 | They could still create that
account with foo in it just fine.
| | 06:27 | Third, we still have this confusing line
here that says, The changes have been
| | 06:31 | saved, even though they weren't.
| | 06:34 | We'll look at each of
these issues in the next video.
| | Collapse this transcript |
| Improving rules| 00:01 | In the last video, we created a rule
that prevented people from changing their
| | 00:04 | usernames to include the word
foo in them,
| | 00:07 | but although it basically
worked, it had several problems.
| | 00:10 | In this video, I am going to go
improve and debug that rule.
| | 00:14 | We won't be able to solve every
problem, but we will get pretty far.
| | 00:18 | This is a process that you'll find
yourself doing quite a lot, so it's worth
| | 00:21 | showing with a practical example.
| | 00:24 | Once again, just to outline exactly
what we did, we created a user named
| | 00:29 | nonstaff. We also created a
Staff role here.
| | 00:34 | The idea is that only people with the
Staff role should be able to change their
| | 00:38 | name to include foo somewhere in the name.
| | 00:41 | I will sign in as nonstaff, and show
what happens if somebody tries to change
| | 00:45 | their name who is not a staff person.
| | 00:50 | Go up to My account > Edit,
change it to foo, and Save.
| | 00:59 | It stays as nonstaff, and
we get this warning message.
| | 01:02 | But the first problem is
that that affects all users.
| | 01:05 | It also happens to people
who do have the Staff role.
| | 01:08 | Well, that's easy to change.
| | 01:09 | We will just add a condition.
| | 01:10 | I will go back to my Administrative
browser, go up to Configuration, and then
| | 01:16 | down to Rules, and edit that rule, which
is, Block non staff from the name foo.
| | 01:21 | We will add a condition, and
let's see what our options are. Ah!
| | 01:27 | User has role(s); perfect.
| | 01:30 | We want it to happen whenever a user
who doesn't have the Staff role tries to
| | 01:34 | change their name, so staff, and Negate.
| | 01:39 | In other words, this is going to be tripped
unless they are a member of staff, and Save.
| | 01:45 | And just to be sure, I am
going to add an and in here.
| | 01:48 | In other words, both of
these conditions have to be true.
| | 01:50 | So click Add and, and then we can
rearrange this. Go down and Save.
| | 02:00 | Now let's test that again.
| | 02:01 | I will go back to my browser
where I have nonstaff logged in.
| | 02:04 | I will change that name, once again, to
this is foo, and it should be turned back.
| | 02:10 | Yeah, it was turned back.
| | 02:13 | Now I will go in and I'll create
a new user who is a staff person.
| | 02:17 | Go to People > Add user, the name will
naturally be staff, and we will give
| | 02:23 | them the Staff role.
| | 02:24 | Then I switch over to my browser here,
Log out, and re-log in as the staff person.
| | 02:34 | Now I will try the same thing.
| | 02:37 | Edit the name, and change it to staff foo.
| | 02:41 | If all goes well, that should
pass through just fine, and it did.
| | 02:47 | Now we come to the second problem.
| | 02:49 | While we have stop nonstaff from changing
their names to include foo, they can
| | 02:53 | still create accounts that include foo.
| | 02:56 | Now, there is an obvious solution, but
like many obvious solutions, it's wrong.
| | 03:00 | We could go back here, go up to our
rule, edit it, and simply add an event up
| | 03:10 | here, so that it's after
updating or creating an account.
| | 03:15 | The problem with that is
what the actions actually are.
| | 03:18 | They will try to set a
data value that doesn't exist.
| | 03:21 | That is, it will look for the unchanged account
name, which didn't exist before; see, right here.
| | 03:26 | So what we actually have to do is
create an entirely different rule.
| | 03:30 | This is where things gets a little
confusing, because you might have conflicting
| | 03:33 | rules with the same event.
| | 03:36 | If that's the case, I recommend you
simply take out a piece of paper, and start
| | 03:39 | writing down what your rules actually do.
| | 03:42 | So let's create that rule.
| | 03:44 | Now, we could create it from scratch, but
a lot of what we want is actually here
| | 03:47 | in this existing rule,
| | 03:48 | so we will go back to our
Rules, and we will clone this one.
| | 03:52 | Before I do that, I am just
going to rename this, so that it has a
| | 03:54 | more distinctive name.
| | 03:57 | Go down to Settings, and this will be
Block non staff from editing to the name
| | 04:03 | foo, and we could change the machine
name if we want, but that's not really
| | 04:06 | necessary, and Save changes.
| | 04:09 | Now I will go back up to my
Rules, and I'll clone that.
| | 04:14 | Block non staff from
creating with the name foo.
| | 04:20 | The good news is, the Machine name also
changes here, so we know that there are
| | 04:24 | going to be two separate
rules, and we Save the changes.
| | 04:27 | Now we will change the
event that triggers it.
| | 04:29 | Instead of updating, it's going
to be after creating a new account.
| | 04:34 | So we look down at user,
and see what our options are.
| | 04:37 | Yup; After saving a new user account.
Now, since we are allowing it to be saved, we
| | 04:41 | then have to delete it once
it's been created, and we Add.
| | 04:45 | Then of course, we delete
the old event after updating.
| | 04:51 | To take into account that change that I
just made, we have to look at our actions.
| | 04:55 | We'll show a message on the site;
that's still good.
| | 04:58 | Set a data value; once again,
we're creating a new account, so this
| | 05:02 | account-unchanged doesn't
actually exist.
| | 05:04 | I will delete that action,
and then I will add a new one.
| | 05:11 | This one is going to be Delete entity,
and the selector is simply account; that
| | 05:15 | is to say, the account that the
user attempted to create, and Save.
| | 05:25 | I think we're okay.
Now let's test it.
| | 05:28 | I am going to switch to the other
browser, and Log out from staff foo.
| | 05:33 | Now I will try to create a new account,
but before I do that, I am just going to
| | 05:36 | go back and make sure that that
person can create an account by going to
| | 05:39 | Configuration, and Account settings.
| | 05:42 | Yup, Visitors can create accounts.
| | 05:45 | So let's give it a try.
| | 05:46 | Create a new account.
| | 05:49 | I'll call this person I really am foo.
| | 05:54 | Now, if this works correctly,
then of course, it will be rejected.
| | 05:58 | Create new account, and you see it did
not log us in the way that we expected.
| | 06:04 | If we go back to our administrative
browser, and look at the People, that role
| | 06:09 | would've shown up here at the top
of the list, but it's not there, so it
| | 06:12 | simply rejected it.
| | 06:14 | Now, that's not really the
best user interface, though,
| | 06:16 | so I am going to improve
it just a little bit more.
| | 06:18 | I want to tell the user who tries to
set up such an account that they really
| | 06:22 | aren't allowed to do that.
| | 06:23 | Now, we could flash a message but
we can do something even better.
| | 06:27 | I will go back up to Configuration,
and down to Rules, and then I'm going to
| | 06:33 | open a new tab, where I create a page.
It's going to just be a Basic page,
| | 06:38 | we'll say Forbidden username, and in the Body,
You can't create a username containing "foo".
| | 06:47 | Go down to the bottom, and Save it.
| | 06:51 | Let's just note this URL.
| | 06:54 | It's /content/forbidden-username.
| | 06:58 | Now when I go back to the Rules, one
of the actions I can take when someone
| | 07:02 | attempts is to redirect them to that page.
| | 07:05 | So Block non staff from creating with the
name foo, edit, and add one more action.
| | 07:16 | This one is down under System; Page
redirect, and the place it's going to go to is
| | 07:20 | /content/forbidden-username.
| | 07:21 | By the way, watch out for the leading and
trailing slashes. That can mess you up quite a bit.
| | 07:30 | One way that I can tell that I don't
need the leading slash is I look down here
| | 07:33 | at the example, which doesn't have one.
| | 07:34 | It will force to redirect, and you
can do some other things, like put on a
| | 07:39 | destination parameter if
you're using those on your site.
| | 07:42 | I wouldn't worry about that unless
you're doing some pretty fancy stuff, though.
| | 07:46 | If you don't know what it is,
you can ignore it.
| | 07:47 | I will Save, and give it another try.
| | 07:50 | So back to my non-logged in user. I'll
go back and try to create a new account.
| | 07:55 | Click Create a new account, call this
one foofoo, and let's see what happens.
| | 08:01 | We got that page, just as we expected.
| | 08:04 | So our rule is just getting better and
better, but believe it or not, it could
| | 08:08 | still be improved even further.
| | 08:10 | For example, the rule doesn't work
right now when an administrator creates a
| | 08:14 | staff account that contains foo.
| | 08:17 | Also, we never addressed that annoying
message that says your changes have been
| | 08:20 | saved when you edit a name
that gets rejected.
| | 08:23 | As far as I know, that
can't be solved using rules.
| | 08:26 | You would have to hide it with
custom programming, or some fancy site
| | 08:29 | configuration, or possibly
with a contributed module.
| | 08:33 | Actually, as I was going through this,
I found that the Omega Tools module, and
| | 08:36 | the Omega theme would give you this
feature, and if you want to find out more
| | 08:39 | about that, I would play with Omega
Tools as you learned about in the video
| | 08:43 | about the Omega theme.
| | 08:45 | I also want to mention that what I
showed you here could have been put together
| | 08:48 | in several different ways, including
using variables, components, and other
| | 08:52 | aspects of rules that we didn't cover,
and won't have time to in this course.
| | 08:56 | But at this point, you have the ammunition
you need to go forth and learn more.
| | 09:01 | The place to start, once again, is on
Drupal.org in the documentation linked from
| | 09:06 | drupal.org/project/rules.
| | Collapse this transcript |
| Defining conditions with the Context module| 00:00 | Sometimes kinds of conditional
display are possible with only core Drupal.
| | 00:05 | When you configure blocks, for example,
you get to choose which roles get to see
| | 00:08 | them, and on which pages.
| | 00:10 | Other such functions are possible using
rules, which I covered elsewhere in this course.
| | 00:15 | But some kinds of reactions, particularly
those having to do with display, work
| | 00:19 | best using a module called Context.
| | 00:22 | You get it from drupal.org/project/context.
| | 00:26 | One thing to note is that
it requires Chaos Tools.
| | 00:30 | We installed that earlier in the course,
but if you don't already have it installed,
| | 00:33 | you will find it at
drupal.org/project/ctools.
| | 00:40 | But for us, we will just scroll down to the
bottom, Copy the URL, and install it as usual.
| | 00:47 | The Context module is actually three modules.
| | 00:50 | First is Context, which is the main engine.
Context UI, which, following the typical
| | 00:55 | module pattern in Drupal, is the way
that you interact with context. In other
| | 00:59 | words, to build the site, you will
need the UI. And then Context layouts;
| | 01:03 | this is really for developers, and
specific themes, and it's not widely adopted,
| | 01:06 | so I am going to leave it turned off.
| | 01:08 | Scroll to the bottom,
and Save configuration.
| | 01:12 | For our example, I want to hide all
nodes that have been tagged as premium from
| | 01:16 | anonymous users, forcing them to
become members in order to see them.
| | 01:20 | While we were at it, I will display a block
in the article's place telling them what's up.
| | 01:24 | I will use context to make that
happen, with a little help from the Pathauto
| | 01:28 | module that we installed earlier in the course.
| | 01:30 | If you haven't installed it,
it's at drupal.org/project/pathauto.
| | 01:37 | Now we need to do a little bit of setup.
| | 01:39 | First, I am going to create a block that tells
anonymous users why they can't see the content.
| | 01:43 | Go to Structure, and Blocks, and
add a block, as usual, and then Save.
| | 01:52 | You will notice that I'm not
actually putting it in any region;
| | 01:56 | I'll do that using the Context module.
And if we look at our disabled blocks, of
| | 02:01 | course, we see it right there.
| | 02:03 | The next part of setup is the
Pathauto part.
| | 02:05 | The context will be triggered
based on the URL of the article.
| | 02:09 | It is possible to configure Pathauto to
include tags in the URL, so first I will
| | 02:14 | change that configuration, then I will
give those premium articles a tag that
| | 02:17 | says that they are premium.
| | 02:19 | Once all that setup is done, I will change
context to recognize and hide those articles.
| | 02:25 | First, I go up to Configuration,
and URL aliases.
| | 02:31 | Then I click Patterns.
| | 02:32 | I am going to change all content paths,
and as you know, you can do that with
| | 02:37 | Replacement Patterns.
| | 02:38 | I will take a look down here, and the
one that we are looking for is Nodes,
| | 02:43 | field-tags, right there. So I will
copy it, and put it up there in the path.
| | 02:50 | So it's content/node:field_tags/node:title
| | 02:56 | Then I will go down and Save, but
to make sure that everything updates
| | 03:01 | correctly, I am going to go back and
delete all my aliases for content, and then
| | 03:08 | do a Bulk Update, again, for content.
| | 03:12 | Now I will tag an article as
premium, so we can test this.
| | 03:16 | Let's see what we have got.
| | 03:17 | I will go back to my front page.
| | 03:19 | You might remember articles
have graphics and tags in them,
| | 03:22 | so this must be one. I will go in and
Edit it, and add that Premium tag, and Save it.
| | 03:34 | And as you see, there is the tag.
| | 03:36 | If we go to that page, we now have the
correct URL: content/premium, and then the title.
| | 03:43 | Finally, we can start to build
a context reaction against this.
| | 03:46 | To do so, I go up to
Structure, and then Context.
| | 03:51 | I am going to Add one, and it will
be called premium_content_hiding.
| | 03:57 | Now, this Name has to be the machine
name, by the way; not the human name, so all
| | 04:01 | lowercase, with underscores.
| | 04:03 | The Description is very simple;
| | 04:06 | Hides premium content from anonymous
users, and Require all conditions.
| | 04:11 | As with the Views module, and the
Rules module, the Context module is
| | 04:15 | something of a super module; that is,
it has a lot of ins and outs to it, and
| | 04:19 | I recommend that you play with it
quite a bit, because the more you play with
| | 04:22 | it, the better you'll know it.
| | 04:23 | In this case, I've found that this is
usually what I want, and then I can come
| | 04:26 | back and change it.
| | 04:27 | It will come into play if you have
multiple conditions, of course, which will be
| | 04:32 | the case as we set this up right now.
| | 04:34 | The first condition has to do with
the path including that premium in it.
| | 04:39 | So we do path, the path we want is
content/premium, there is the tag, and then
| | 04:46 | any string at all, and we can
say that with the Asterisk.
| | 04:49 | We are going to add another condition,
which has to do with the User role.
| | 04:53 | If the user is anonymous, that's the second
condition, so both of these have to be true.
| | 04:58 | If you want to change any of these,
just bring your pointer down like this; as
| | 05:01 | you hover over any one of them,
you will see a Remove link.
| | 05:04 | But we are going to keep both of those.
| | 05:06 | The next thing is
what our reaction should be.
| | 05:09 | Before I set up the actual reaction, I
am just going to try a Debug message.
| | 05:14 | This is a good way to test things before
you actually complete the entire process.
| | 05:18 | I will save it, and now we will test it.
| | 05:21 | To do so, I switch into a
browser where I'm not logged in.
| | 05:24 | I am just going to reload the page here.
| | 05:27 | So here is the basic page, and here is
that article that has the Premium tag.
| | 05:31 | Now, we can see the teaser, because we
haven't forbidden that, but if I try to see
| | 05:35 | the node, I should be blocked,
and indeed I am.
| | 05:39 | This is that Debug.
| | 05:40 | It tells me that the context is now active.
| | 05:43 | If I switch back to my logged in
browser, where I am not the anonymous
| | 05:47 | user, let's try that.
| | 05:49 | Go Home, go down to that node, and you can see
that the context was not flagged. So far so good.
| | 05:57 | So we've defined the context condition
correctly; now we will complete the job
| | 06:01 | by fixing its reaction.
| | 06:03 | We go once again up to
Structure, and Context.
| | 06:08 | Go into it, and Edit, and I
will remove that Debug reaction.
| | 06:13 | And instead, I will add
the reaction that we want.
| | 06:16 | The first thing we are going
to do is disable some content.
| | 06:20 | So I will go into Regions, and Disable
certain Regions in the Bartik Theme, which
| | 06:24 | is, remember, what we're looking at right now.
| | 06:26 | As you can see, you can change the context
depending on theme, and so forth, which
| | 06:30 | is why it's really good for
certain display functions.
| | 06:34 | I am going to completely disable Content if
somebody tries to go to that as an anonymous user.
| | 06:39 | I'm also going to show that
block that we created earlier.
| | 06:43 | It will be that Subscription
noodge, and we are going to put it in the
| | 06:48 | Highlighted region. Great;
then we go down, and Save.
| | 06:53 | Finally, we can test this.
| | 06:54 | I will go back to my front page as a
logged-in user, take a look at that node;
| | 06:59 | I can still see it.
| | 07:00 | Now I will go over to my non-logged
in user, go to my front page, back down
| | 07:04 | to that node, and indeed it's blocked, and
we get this message in the highlighted area.
| | 07:10 | I tend to think of the Context module is
being sort of an adjunct to some of the
| | 07:14 | other ways that Drupal
creates reactive layouts.
| | 07:17 | It doesn't do everything, but there
are times that it's the only thing that
| | 07:20 | will do what it does.
| | 07:22 | By the way, you might notice that some
other modules, for example, the panels,
| | 07:26 | and organic groups modules, also use the
term context, but those contexts aren't
| | 07:32 | related to the Context module.
| | 07:34 | They simply have their own similar
system, and unfortunately, the two
| | 07:38 | can sometimes conflict.
| | 07:40 | So if you're having trouble making
contexts work the way you expect, check the
| | 07:43 | rest of your site, and all of its
modules to ensure that you don't have two
| | 07:47 | systems trying to react
to the same conditions.
| | Collapse this transcript |
| Varying layout with the Context and Delta modules| 00:00 | You saw how to set up the Context
module to make visible changes based on such
| | 00:04 | things as whether the user was logged in.
| | 00:07 | To be honest, I find that it doesn't have
as many conditions and reactions as I'd like.
| | 00:11 | I mean, you can make a block region
appear or disappear, but you can't change the
| | 00:15 | theme in fundamental ways.
| | 00:18 | But there is a module that extends
the Context module's power to make it
| | 00:21 | control theme elements,
| | 00:23 | and that module is called Delta.
| | 00:25 | Its project page is at
drupal.org/project/delta.
| | 00:28 | Delta was created by the same guy
who made the Omega Theme, Jake Strawn.
| | 00:35 | Originally, it would only work with
Omega, but now he says it works with any
| | 00:38 | theme, and in fact, we are
going to use it on Bartik.
| | 00:42 | We go down,
and install it in the usual way.
| | 00:45 | Incidentally, you'll notice that the
Delta module requires Chaos tools.
| | 00:49 | We've already installed that in our
course, but if you need to install it, it's
| | 00:53 | at drupal.org/project/ctools.
| | 00:53 | I am going to turn on all of the
modules that are part of Delta, and
| | 01:01 | save configuration.
| | 01:02 | Now, there is one other module that's
needed, although it's not really obvious.
| | 01:07 | It's the one called Context layouts
that I mentioned isn't widely used.
| | 01:11 | Delta is one of the few modules that
does really take advantage of it, so let's
| | 01:14 | go down, and turn that one
on as well, and Save.
| | 01:21 | Now, before we start using it, I am
going to clear out Drupal's site cache.
| | 01:25 | This might not be necessary when you
see this video, but at the time that I'm
| | 01:28 | making it, doing so appears to
clear up a bug.
| | 01:31 | Besides which, this is a good
second or third step whenever a module
| | 01:34 | isn't behaving properly.
| | 01:36 | To do so, go up to Configuration, down to
Performance, and click Clear all caches.
| | 01:43 | This may take a minute.
| | 01:46 | Now we can go to Appearance,
where we see a new tab: DELTA.
| | 01:51 | What Delta does, is it creates
different versions of your theme.
| | 01:55 | In this case, I am going to create a
different version of Bartik that hides a lot
| | 01:58 | of stuff, and then I'm going to use
Context to show that to anonymous users.
| | 02:03 | To start out, we click Add,
and then give it a name.
| | 02:08 | As usual, you can add a Description if
you want, and in fact, I'll say Hide things
| | 02:12 | from anon. Say which Theme you are
going to be basing this on, and then there
| | 02:16 | are some other settings, which you can
read about in the documentation, but for
| | 02:20 | us, I'll click Save.
| | 02:23 | Now I'll Configure that.
| | 02:26 | What it does is it brings us to a
screen that looks a lot like the settings
| | 02:29 | screen for Bartik, but it does warn us
that we are not actually editing Bartik;
| | 02:33 | what we are actually changing is the
Delta version of Bartik sooper seekrit
| | 02:37 | that we just created.
| | 02:38 | I am going to changes Color set to Ice,
and I'll remove a few things, like the
| | 02:43 | Logo, the Site name, and the Site slogan.
| | 02:48 | Then I'll go all the way
down to the bottom, and Save.
| | 02:52 | So now we've set up a
different version of Bartik.
| | 02:55 | It's what Delta calls a template, but
mind you, that's not related to the
| | 02:58 | template files that are
in your Theme folder.
| | 03:01 | The next step is to create a
context that will trigger it.
| | 03:04 | As before, we go to
Structure, and then down to Context.
| | 03:09 | I'll Add another context that I
am going to call mystery_site.
| | 03:13 | Remember, this has to be the machine
readable name, not a human readable one,
| | 03:17 | so it all has to be
lowercase and underscores.
| | 03:22 | And the only condition that I'm going to
add here is that the user be an anonymous user.
| | 03:27 | So I'll go down, User role, and anonymous user.
| | 03:30 | I don't need to Require all
conditions, because there's only one condition.
| | 03:35 | Then the reaction is to use the
Delta of Bartik sooper seekrit.
| | 03:41 | As you might guess, if you were to create
several Deltas, they'd all show up here. Then I Save.
| | 03:46 | Let's see if that works.
| | 03:47 | First we'll go to our front
page, using our logged in browser.
| | 03:52 | It acts exactly as we expect.
| | 03:54 | Now I'll switch over to a browser that's
not logged in, and I'll reload the page,
| | 03:59 | and indeed, it worked.
| | 04:01 | I realize that this is something of a
blunt example, and it wouldn't be all
| | 04:04 | that secure. Although you've hidden
the site name, you really haven't hidden
| | 04:07 | other things in the site.
| | 04:09 | More often, though, you'll be doing
very subtle changes. You'll be adjusting
| | 04:13 | layout to show certain sidebars to
certain users, or on specific content types.
| | 04:18 | To clean this up, I am just going to
go back to my administrative browser, and
| | 04:21 | delete that context. We can leave
the Deltas in place, since they are not
| | 04:24 | being triggered anywhere.
| | 04:26 | Go up to Structure, and Context, and
then I can Delete, or just Disable
| | 04:33 | mystery_site. I think I'll delete it.
| | 04:39 | Now to test that, let's go back to our
non-logged in browser, and reload the page,
| | 04:45 | and we're back to normal.
| | 04:47 | Delta has turned out to be the bridge
that the Context module needed to allow
| | 04:51 | truly reactive layouts.
| | 04:53 | However, there's another method
worth demonstrating called Panels.
| | 04:57 | I'll show that in another video in this course.
| | Collapse this transcript |
| Varying layout with the Panels module| 00:00 | One of Drupal's stumbling blocks in
the design community has been its rigid
| | 00:04 | block and region based layout system.
| | 00:07 | If you want three columns of text in
the main content area, you have to make
| | 00:11 | that change using some fancy hand-coding,
probably with HTML tables, or CSS.
| | 00:16 | If you want one of those columns to
contain dynamic content, then you're off
| | 00:20 | into PHP programming land.
| | 00:22 | To the rescue comes the Panels module,
written by the same prolific programmer
| | 00:26 | who created Views, and Chaos
tools; his name is Earl Miles.
| | 00:30 | By the way, Panels requires Chaos tools,
which we installed earlier in this course.
| | 00:35 | If you haven't done so, then of course,
you should do so before using Panels.
| | 00:39 | You will find it at drupal.org/project/ctools.
| | 00:44 | You get Panels from drupal.org/project/panels.
| | 00:49 | Scroll all the way down, and
install it in the usual way.
| | 00:55 | Incidentally, we will be turning on
another module in this Chaos Tools suite
| | 00:58 | group a little bit later.
| | 01:01 | The two that we'll enable are
simply Panels, which is the main part of the
| | 01:04 | Panels engine, and Panel nodes.
| | 01:07 | Mini panels is similar to Panel nodes,
but whereas Panel nodes works very much
| | 01:12 | like Nodes, as you'd imagine, Mini panels
works a little bit more like Blocks, and
| | 01:16 | we are not going to go into that in this video.
| | 01:19 | The Panels In-Place Editor allows you
to make certain changes by clicking on
| | 01:22 | content, and once again, we're going to
keep it fairly simple this time around.
| | 01:26 | Scroll to the bottom, and
click Save configuration.
| | 01:31 | Now I'll create a panel by
going up to Add content, and Panel.
| | 01:36 | It acts just like any other kind of node.
| | 01:39 | The big difference is that that node
can be split up into columns and rows.
| | 01:43 | I will accept a Flexible layout,
and the title will be Panelized node.
| | 01:50 | I don't need to make any
other changes, so I'll save that.
| | 01:54 | Now, that panel doesn't look like
anything special, but that's because we
| | 01:57 | haven't set up that layout; we
haven't added any content to it.
| | 02:00 | All that we have is that title,
Panelized node, and the idea that it's a
| | 02:04 | container for other content.
| | 02:06 | To actually add stuff, we
go to the Panel content tab.
| | 02:11 | Once there, we could start making a layout.
| | 02:13 | I am going to make this three columns.
| | 02:16 | First, I show the layout designer,
and then I start adding columns.
| | 02:20 | I will add a region to the right, call
this Center, and save, and then add one
| | 02:29 | more column off to the right,
and I will call this Right.
| | 02:35 | As you can see, I'm skipping over a lot of
options, because the Panels module is so deep.
| | 02:39 | I could then adjust these by
simply dragging this right here.
| | 02:44 | For example, I will make this 50% or
thereabouts, and then these I will
| | 02:49 | make about 25%. Yup;
| | 02:51 | it did that automatically.
| | 02:53 | Once I have set up those regions, I
can now actually put content in them.
| | 02:57 | So I hide the layout designer.
| | 02:59 | You will notice that I actually
created two different areas called Center.
| | 03:04 | Now, I could go back and change those,
but quite honestly, it doesn't matter much.
| | 03:08 | I think I will though.
| | 03:08 | I'll just go in and change this by
changing the Region settings, and I will
| | 03:11 | call it Left, and save.
| | 03:15 | Now we will hide the layout
designer, and start adding our content.
| | 03:19 | I will put some custom content over
here to the left, scroll down, and Finish.
| | 03:26 | As you can see, it's just
like adding an ordinary node.
| | 03:30 | The fun thing about Panels is that
you can also add dynamic content.
| | 03:33 | I will show you that by adding something to
the center, and to the right, which is dynamic.
| | 03:40 | I'll use the Activity group, and
say Recent comments, and Finish.
| | 03:46 | Over here, I will make it recent
users; who's logged in, that is to say.
| | 03:55 | Finally, we save that, and let's
take a look at what that looks like.
| | 03:59 | Click View, and there it is!
| | 04:01 | We now have our three column layout.
| | 04:04 | That's the basic operation for
Panels, as it applies to nodes.
| | 04:08 | As I mentioned before, you can also
create panelized blocks by turning on the
| | 04:12 | Mini Panels module that we kept disabled.
| | 04:15 | There is one other trick
that I want to show you.
| | 04:17 | We can actually use Panels to change
the entire page, and in fact, to override
| | 04:22 | certain pages that are in the system.
| | 04:24 | To start out with that, we go up to
Modules, then down to Ctools, or Chaos Tools.
| | 04:32 | What we want is the Page
manager; turn that on, and save.
| | 04:38 | Those pages appear under
Structure, and Pages.
| | 04:42 | Now, I know the names can be a little
confusing, because Pages is so similar to Basic pages.
| | 04:47 | A page is something that's
created by Chaos tools, and Panels.
| | 04:53 | As you can see, you can add custom
pages, and again, have those react to whatever
| | 04:57 | criteria you like, or, just as in Views,
you can use the ones that come with the
| | 05:02 | program in order to override existing ones.
| | 05:06 | The one that I like to use is the
node_view one, so I am going to enable that,
| | 05:09 | and then simply close out this overlay.
| | 05:13 | I just want to show that that doesn't
actually change anything until we start to edit it.
| | 05:17 | So let's go back to
Structure, and Pages, and Edit it.
| | 05:23 | The first thing we do is
add a new variant.
| | 05:26 | You can have as many variants as
you like, and each variant reacts to
| | 05:29 | different criteria.
| | 05:30 | We are only going to add one though.
| | 05:32 | The title will be Graphic on the right.
| | 05:36 | It will be a Panel.
| | 05:37 | The other kind, HTTP
response code, is very rarely used.
| | 05:40 | We will have certain selection rules.
| | 05:44 | In other words, it's going to react only
when the article nodes are showing, not
| | 05:48 | when all nodes are showing.
And then Create variant.
| | 05:53 | Here, we have come to that use of the
word context that, as I said before, is
| | 05:57 | a little confusing.
| | 05:58 | This isn't related to the Context module.
In other words, it's asking, what are
| | 06:01 | the criterial in which this
variant should show?
| | 06:06 | In our case, we want it to be when
the Node type is an Article, and Save.
| | 06:13 | Then we click Continue.
| | 06:15 | Once again, we can choose how
we want that page to be set up.
| | 06:18 | We could, for example, have very simple
one, two, or three column layouts, or as
| | 06:22 | I like to usually do, I simply do Flexible,
and then I can change it however I want.
| | 06:26 | Then click Continue.
| | 06:29 | Then you have quite a lot of options
having to do with CSS; applying it to
| | 06:32 | different parts of the panel, and so on.
| | 06:34 | We are going to ignore that,
and say Continue.
| | 06:38 | Finally, we arrive at a
similar sort of layout designer.
| | 06:41 | I will click Show layout designer,
and in fact, I'll add a column off to
| | 06:46 | the right, and Save.
| | 06:55 | Now I will hide the layout designer, and
actually add the content to those parts.
| | 06:58 | I am going to keep it very simple for now.
| | 07:01 | I'll make this side the body, and
the stuff on the right the graphic.
| | 07:05 | We want Node, and Node Body over
here, and then we have some options.
| | 07:12 | Then over here, Add content,
and it will be Node > Field: Image,
| | 07:18 | and Continue.
| | 07:21 | Once again, you can add all sorts of
things to these regions, including views,
| | 07:25 | activity blocks, and so on.
| | 07:28 | For images, we have a few different options.
| | 07:30 | I am going to just put in
the thumbnail size there.
| | 07:32 | Although, of course, you
could put in whatever you want.
| | 07:34 | I will link the image to nothing
in particular, and then say Finish.
| | 07:38 | Now that we have done that,
we create the variant.
| | 07:43 | Once you've finished all of that, it's
very easy to make a mistake here, and
| | 07:47 | simply close out the overlay, because
you said, okay, continue on, and save, so
| | 07:52 | that you either have to click
Save, or Update and save here.
| | 07:56 | Now let's close out this overlay,
and see if it did what we expected.
| | 08:02 | And indeed, it did.
| | 08:03 | It redrew the page with the body on
the left, and the image on the right in
| | 08:07 | the thumbnail view.
| | 08:09 | Now you'll notice that this doesn't
contain all of the information that we used
| | 08:12 | to have here, and we still have
this body and image title here,
| | 08:16 | and of course, we could continue
adding taxonomy terms, a comment form,
| | 08:20 | comments, and all of that sort of thing.
| | 08:23 | But as with the Views, Context, and
Rules modules, this super module really has
| | 08:28 | a lot of ins and outs.
| | 08:30 | You can spend a lot of time doing this,
and I simply recommend that you go ahead
| | 08:34 | and play around as much as you can.
| | 08:35 | You'll learn that you can
remove these headlines, and so forth.
| | 08:39 | Now, before we finish, I want to
remind you of something we did in a previous
| | 08:43 | video about defining
conditions with the Context module.
| | 08:47 | We defined some articles as premium, and
set up a context to prevent anonymous
| | 08:51 | users from seeing them.
| | 08:52 | So here's the question:
does that context still work?
| | 08:56 | We are looking here at a node which, you
might remember, does have that tag, and we
| | 09:01 | can see that by editing it.
| | 09:03 | There is the Premium tag.
| | 09:05 | Let's switch over to a browser that's
not logged in, and see how that looks.
| | 09:08 | We will go down, and click
on that node right there.
| | 09:13 | And indeed, the context
overrides that panel display.
| | 09:16 | In this case, you might remember, the
context we set up was set to be triggered
| | 09:20 | based on the path, and that
hasn't changed in this case.
| | 09:23 | But you do have to be careful about
this sort of thing if you've hidden
| | 09:27 | any kind of content.
| | 09:28 | If you are a little careless, you could
permit panels to expose all of that stuff.
| | 09:33 | The last thing I want to do to clean up is to
take this Panelized node off of our front page.
| | 09:38 | That's easy enough to do.
| | 09:40 | Simply edit it, and treat it just like any
other node; take off Promoted to front page.
| | 09:47 | Of all the videos I've done for lynda.com,
this one is probably the shallowest
| | 09:51 | when compared to how
deep the Panels module is.
| | 09:55 | I think you can see just from the
enormous range of options on the screens we
| | 09:58 | clicked through, just how deep it is,
and as with the Views module, you need to
| | 10:03 | spend some time with it.
| | 10:04 | We will see a little more of its
functionality later on in the course when we
| | 10:08 | use Panels to expose
things in organic groups.
| | 10:11 | You will see that in the video,
Seeing Group Activity Better with Views
| | 10:14 | and Panels.
| | Collapse this transcript |
|
|
9. Making Your Site More SocialEnabling social features| 00:01 | There are lots of modules that let you
integrate your Drupal site with outside
| | 00:04 | social networks,
such as Twitter, and Facebook,
| | 00:07 | but you can also add
social features within your site.
| | 00:10 | It's actually quite possible to create
Drupal-based clones of them, and others like them.
| | 00:14 | The real value that they offer isn't
in their functionality, which you can
| | 00:17 | replicate, but in their existing
audiences, which is a little hard.
| | 00:21 | But let's just talk about
the social functionality.
| | 00:24 | You can feel confident that
Drupal can do what you want.
| | 00:27 | First, let's define
what a social feature is.
| | 00:30 | I break it down into four points.
| | 00:32 | The first is seeing others, and when I
say others, I mean other people who are
| | 00:35 | members on the site. The second is
contacting others, usually through private
| | 00:39 | messages, either with chat, or through
some sort of messaging system. The third is
| | 00:44 | discussing with others in forums, and so
forth. And the fourth is connecting with
| | 00:49 | others; what's usually called
friending on the social networks.
| | 00:53 | The first three aspects;
| | 00:54 | seeing, contacting, and discussing
with others, are all easily done in core
| | 00:58 | Drupal, although the settings and
permissions are kind of far-flung,
| | 01:02 | so here are the important ones.
| | 01:05 | First, there's a core module that's
turned off by default, and that affects a
| | 01:08 | few different areas.
| | 01:09 | It's the Contact module.
| | 01:11 | We will go up to Modules,
and turn it on.
| | 01:19 | Once that's done, you can see one of
the effects of that module by going to
| | 01:22 | the Account settings;
| | 01:23 | under Configuration,
and Account settings.
| | 01:26 | It's this little block here:
Contact Settings.
| | 01:30 | By default, it allows people on the
site who are registered to contact one
| | 01:33 | another, although, of course, that is
also governed over by the permissions.
| | 01:38 | As long as we are talking about the
socialness of your site, let's go down a
| | 01:41 | little bit further to
Registration and Cancellation.
| | 01:44 | In an earlier video in this course,
I switched it from the default option,
| | 01:48 | which is this, Visitors, but administrator
approval is required, to one that's
| | 01:52 | very open, which is that visitors
can register themselves, and they are
| | 01:56 | immediately on the site.
| | 01:57 | This is the most open, of course, and that will
encourage sociability, but it has its problems.
| | 02:02 | It means that spammers can come along
and automatically create accounts, and then
| | 02:07 | start posting with whatever permissions
you give to authenticated users.
| | 02:11 | Another thing that affect sociability is
this setting here: when cancelling an account.
| | 02:16 | By default, when you cancel an account,
all the content stays there, and the
| | 02:20 | account is simply disabled.
| | 02:22 | So people see the content, and then
they also see who originally wrote it.
| | 02:26 | So there's kind of a trail, even though the
person is no longer allowed to access your site.
| | 02:31 | Obviously, if you were to change that
to something like Delete the account and
| | 02:34 | make its content belong to the Anonymous
user, it would remove those trails. And
| | 02:38 | of course, deleting the account and its
content completely removes the trail of
| | 02:42 | any person who was once on the site.
| | 02:44 | Continuing down, when you enable user
pictures, and signatures, it allows people
| | 02:49 | to give their accounts certain
amount of their own personality.
| | 02:53 | Particularly, Enable
signatures, and Enable user pictures;
| | 02:56 | the more encouraged they feel to
interact with each other, because they can
| | 03:00 | express themselves better.
| | 03:01 | By the way, these signatures don't show
up when people post nodes, but they do
| | 03:06 | show up when they post comments.
| | 03:08 | Earlier on, I mentioned that a lot of
sociability comes from permissions; that
| | 03:12 | is, what are authenticated
users allowed to do?
| | 03:15 | Well, let's take a quick look.
| | 03:16 | Go up to People, and then to Permissions.
| | 03:20 | As you know, this is a very, very big
page. Some of the ones that especially
| | 03:24 | affect social interaction are commenting,
and certain other permissions that are
| | 03:29 | later on in the screen.
| | 03:30 | The biggest one is Post comments.
| | 03:32 | We have talked about this
in relation to spam.
| | 03:35 | Of course, you do want people to be
able to post comments, but whether or not
| | 03:38 | they skip comment approval will either
hinder or help the amount of sociability
| | 03:43 | they have on your site.
| | 03:44 | Once again, if you allow them to
skip comment approval, then you're going
| | 03:48 | to have the spam problem, especially if
you also allow them to sign up for the site.
| | 03:51 | Now, there are modules
that will help you on that;
| | 03:53 | for example, the CAPTCHA module, or
Mollom, which will allow you to give people
| | 03:58 | this permission, but then block them
in one way or another just to prove
| | 04:02 | that they're human.
| | 04:03 | Continuing down to the Node group, for
each content type -- for example, Article
| | 04:09 | here -- there's a set of permissions.
| | 04:12 | If you allow people to create new
content, you usually also give them the
| | 04:16 | permission to edit their own content.
| | 04:19 | One way to make your site more interactive
for people is let them edit anybody's content.
| | 04:23 | That changes your site into
something more like a wiki.
| | 04:27 | The result is that people are interacting
through their edits, in a way. That is,
| | 04:30 | one person says something, another
one corrects it, a third one changes
| | 04:33 | punctuation, and so forth;
| | 04:35 | they get more engaged in the site.
| | 04:37 | Continuing down, one group of permissions
that's often overlooked is for search.
| | 04:43 | If you allow people to use search,
suddenly they can search not only for
| | 04:46 | content, but also for users.
| | 04:48 | So if somebody else says, hey,
| | 04:49 | my username on the site is such and
such, they can then go find that user.
| | 04:53 | In fact, you can change the way that
search behaves, so that it searches for
| | 04:57 | users before it searches for nodes, and
I'll show you how to do that in just a minute.
| | 05:01 | Continuing down, there is the Taxonomy group.
| | 05:05 | For each taxonomy vocabulary that
you create, you'll see a group of
| | 05:09 | permissions here, and of course,
tagging is another way to get people
| | 05:12 | interacting with your site.
| | 05:14 | So if you wanted them to be able to
edit your tags, you would go over here, and
| | 05:17 | give that permission to authenticated users.
| | 05:21 | Then finally, we come to the permissions
that directly affect the user group.
| | 05:25 | The biggest one, of course, is View user
profiles, which strangely is off by default.
| | 05:30 | If you can't let people see each other --
remember, that was the first point --
| | 05:34 | then they won't be able to contact
each other; they won't really know who
| | 05:37 | they're being in touch with.
| | 05:39 | The next one, Change own username, I
think, in a way, discourages sociability, but
| | 05:45 | that's an arguable point.
| | 05:47 | When people have to have a consistent
name, they build up a history on the site.
| | 05:51 | Now, having said that, you might want
to give people the freedom, which in turn
| | 05:55 | will engage them more, but you do have
to beware of people who constantly change
| | 05:59 | their names in order to hide who they are.
| | 06:01 | Now, that's not going to
change anything else on Drupal.
| | 06:03 | When they change their name, any
comments that they made will reflect the new
| | 06:07 | names, so it will still be
linked back to them.
| | 06:09 | But let's go back and talk about that
search setting. To change it so that it
| | 06:13 | shows users before nodes,
| | 06:15 | you go up to Configuration,
and then down to Search Setting.
| | 06:20 | Scroll down, and you change
this Default search module to User.
| | 06:26 | As you can see, there are also ways to
change other factors, like what exactly
| | 06:30 | matters most when you search.
| | 06:32 | However, most of these, by the
way, affect nodes, and not users,
| | 06:35 | so you don't have quite as
much flexibility with users.
| | 06:38 | So that covers the seeing others, and
contacting other social features pretty well.
| | 06:42 | To enable discussions, there are
two places in core Drupal to consider;
| | 06:46 | the first one is in Content types.
| | 06:48 | Go up to Structure, and Content
types, and let's just edit one of the
| | 06:52 | Content types we have;
| | 06:53 | let's say Article,
which allows commenting.
| | 06:55 | Go down to the Comment settings,
and in this case, as I say, people are
| | 07:00 | allowed to comment.
| | 07:02 | If you create a content type in which
they're not allowed to comment, then of
| | 07:05 | course, you're not going to have the
back and forth that comes with that.
| | 07:08 | I talk about commenting quite a
bit in Drupal 7 Essential Training.
| | 07:11 | The other way to get people talking to
each other is the forums, but you have
| | 07:15 | to enable that module.
| | 07:16 | Go up to Modules, scroll down, and
there it is; enable, and Save.
| | 07:23 | I won't go into the details of how to
configure modules in this video, since
| | 07:28 | that's in Drupal 7 Essential
Training in quite a bit of depth.
| | 07:32 | So that's what core Drupal can do.
| | 07:34 | Now let's look at some contributed modules.
| | 07:37 | To go there, we go to
drupal.org/project/modules.
| | 07:41 | As usual, we filter by compatibility,
and then we will take a look at the
| | 07:44 | category Community, and Search.
| | 07:48 | Almost 150 modules, and as usual,
they are sorted by popularity.
| | 07:54 | The most popular one is Privatemsg.
| | 07:57 | You might be wondering, how is
this different from the contact form?
| | 08:00 | Well, when you enter something into a
contact form, and send it to the user, it
| | 08:04 | doesn't actually stay on
the Drupal site anywhere;
| | 08:07 | it just goes through by e-mail.
| | 08:08 | Privatemsg keeps that sort of threaded
conversation going on your site. It gives
| | 08:12 | them a reason to go back to your
site, and look up what people had said
| | 08:15 | previously, and so forth.
| | 08:16 | There's quite a lot here, and
I won't go through all of them.
| | 08:19 | I do recommend that you go through and take
a look, especially at the most popular ones.
| | 08:24 | You will be surprised at how many
functions are available for Drupal through
| | 08:27 | these contributed modules.
| | 08:29 | I would like to mention two specific
modules that have large communities around
| | 08:32 | them, and that have integration
with several other supporting modules.
| | 08:36 | The first one is called User Relationships.
| | 08:38 | It's at drupal.org/project/user_relationships.
| | 08:44 | This is what opens up your site to
all of that friending functionality we
| | 08:47 | talked about earlier,
| | 08:48 | and as you scroll down, you see all of
these modules that somehow interact with
| | 08:53 | the User Relationships module.
| | 08:56 | One interesting one is the Rules module,
which we discuss elsewhere in this course.
| | 09:00 | Keep in mind that Rules is what I call
a super module, so you can have something
| | 09:04 | where, when people friend each other, a
lot of other things happen, or that they
| | 09:08 | automatically become friended
when they do certain things.
| | 09:12 | Another one I want to
talk about is Organic groups.
| | 09:15 | You get that at drupal.org/project/og.
| | 09:16 | You will see a lot more about this
module in a section elsewhere in this course.
| | 09:23 | Before we go, I should point out that
we've only covered the technical side
| | 09:26 | of social features.
| | 09:28 | I think the psychological side is
actually far more important.
| | 09:31 | On that note, everything related to
spam affects the viability of your social
| | 09:35 | features, because poor spam
control will drive away good members.
| | 09:39 | To find out more about spam control, be
sure to check out the moderating comment
| | 09:43 | spam section elsewhere in this course.
| | Collapse this transcript |
| Implementing a voting system| 00:00 | One of the best ways to encourage user
participation is to set up a voting system.
| | 00:05 | I will give you an example.
| | 00:06 | The local baristas at the cafe in my
hometown of Oberlin recently discovered
| | 00:11 | that instead of just having one tip
jar next the register, they now have two,
| | 00:15 | labeled Ella Fitzgerald, and Billie Holiday.
| | 00:18 | You vote by putting your money in the
one you like better, and I hear that tips
| | 00:22 | have gone way up, because
people insist on voting for both.
| | 00:25 | Anyway, yes, voting; Drupal does it.
| | 00:28 | Let's look at some of the ways.
| | 00:30 | First up is the Poll module.
| | 00:32 | I showed it off in the Adding Polls video
in the Drupal 7 Essential Training course.
| | 00:36 | But very quickly, here it is again.
| | 00:38 | You first have to enable it, and you do
that by going up to Modules, and finding
| | 00:43 | it in the Core group.
| | 00:46 | Turn it on, and save as usual.
| | 00:51 | That creates a new content
type called Poll.
| | 00:54 | So we just Add content, select Poll,
and then add our question, and then save.
| | 01:05 | You vote on it simply by viewing the node.
| | 01:09 | Here I will select Option A, and Vote,
and Drupal keeps track of who has voted,
| | 01:15 | so now that I have voted,
I can't vote again.
| | 01:17 | Instead, I see the results of the poll.
| | 01:20 | However, the Poll module is
extremely limited; it only gives you these
| | 01:24 | radio button choices.
| | 01:26 | So let's move on to Contributed modules.
| | 01:28 | There is a huge selection; so many that
they have their own category on drupal.org.
| | 01:32 | As usual, we go to drupal.org/
project/modules; Filter by compatibility,
| | 01:41 | and then choose the
Evaluation/Rating group, and Search.
| | 01:45 | These are sorted by popularity, so I
will just go through the first few.
| | 01:49 | First up is Webform, which I don't
consider a voting system, per se. It's
| | 01:53 | really for surveys.
| | 01:55 | If you're curious about it, see the
video Getting Feedback with Webforms in my
| | 01:59 | Drupal Gardens Essential Training course.
| | 02:03 | Next up is Voting API.
| | 02:05 | It doesn't have an interface of its own;
instead, it's an internal framework for
| | 02:09 | all the other voting modules.
| | 02:12 | We have to install it anyway,
so we might as well do that now.
| | 02:14 | I will open a new tab.
| | 02:17 | That URL is
drupal.org/project/votingapi.
| | 02:22 | Go down, and install it as usual.
| | 02:25 | Although it doesn't have an
interface directly, it does have some
| | 02:28 | configuration options.
| | 02:30 | We see them by going to Configuration,
and then down to Voting API.
| | 02:34 | Let's go back, and
take a look at those modules.
| | 02:39 | Now we move on to Fivestar, which I
would consider the first real voting module
| | 02:43 | we've seen in this list.
| | 02:44 | I showed how to use it in the video
Allowing Users to Rate Content in Drupal
| | 02:48 | Gardens Essential Training.
| | 02:50 | But once again, I will
give a very quick demo here.
| | 02:54 | We go to the Modules homepage, which is
at drupal.org/project/fivestar. Scroll
| | 03:00 | down, and install it as usual.
| | 03:04 | The group it's in is
way down at the bottom.
| | 03:10 | Then we Save configuration.
| | 03:12 | To make use of Fivestar, you create a
content type, and then add a field type
| | 03:16 | that represents Fivestar.
| | 03:18 | I will do that now.
| | 03:19 | Go up to Structure, Content
Types, and Add content type.
| | 03:24 | I'll call this Fivestar vote.
| | 03:26 | Then I will go back,
and add some fields.
| | 03:34 | Really, the only one I need
is a voting field;
| | 03:36 | Vote for this node. The Field type
is Fivestar Rating, and you have a few
| | 03:45 | different options here.
| | 03:46 | I will leave it on the default,
and Save.
| | 03:49 | And in fact, I will just take
all of its default settings.
| | 03:53 | Now we can create some content of
that Fivestar vote type, and Save.
| | 04:03 | Now, when you take a look at that node,
you can rate it from one to five stars.
| | 04:09 | As you see, it has a lot of neat JavaScript
tricks in here, and you can change
| | 04:13 | the behavior of some of them
in those settings that you saw.
| | 04:16 | Some of the other settings for it are in
the display section of that content type.
| | 04:20 | We go there by Structure, Content types,
then next to Fivestar vote, click on
| | 04:25 | manage display.
| | 04:28 | When you click this gear,
there are your options.
| | 04:32 | But let's go back to our modules.
| | 04:36 | The last one up in our
quick survey is the Flag module.
| | 04:39 | It's an incredibly elemental module.
| | 04:42 | It just lets people flag content, but
that too can be used as a simplified yea
| | 04:47 | or nay voting system.
| | 04:48 | So let's take a look.
| | 04:49 | I will open that up in a new tab,
| | 04:52 | and as you see, the URL
is drupal.org/project/flag.
| | 04:55 | Flag is one of the best
documented modules I've seen.
| | 05:02 | First of all, it integrates with several
other modules, and you can see the full
| | 05:05 | list by clicking this many
modules link here. Look that;
| | 05:08 | 162 modules integrate with it.
| | 05:12 | It also has terrific documentation.
| | 05:14 | If we scroll down, you see all of
these articles that are about flagging.
| | 05:24 | But let's just go ahead and install it.
| | 05:27 | Flag actions is worth exploring,
but we'll just leave it off for now.
| | 05:32 | Go to the bottom, and save.
| | 05:35 | Once that's done, you can see a record of
the type of flags available under Structure,
| | 05:41 | and then click Flags.
| | 05:43 | When you install Flags, it comes with one type;
| | 05:45 | this bookmarks kind of flag.
| | 05:47 | We could go back and edit this flag, but
I think I will create a new one instead.
| | 05:51 | I am going to create a flag that lets
people to vote on whether we should keep
| | 05:54 | content, or delete it.
| | 05:55 | I will name it keep_this_content, and
notice that you need a machine name, not
| | 06:01 | the human readable name, so it's
all lowercase letters, and underscores.
| | 06:05 | We'll have it affect nodes.
| | 06:07 | As you can see, you can also have
people flag users, which is extremely useful
| | 06:11 | if you start to have
problematic users or comments.
| | 06:16 | We submit, and then we can
fill out a lot more options.
| | 06:19 | The Title I will just have as
Keep this content?
| | 06:22 | This is an administrative title.
| | 06:23 | I just want to talk a little
about this next option: Global Flag.
| | 06:27 | For any voting system,
you're going to leave this off.
| | 06:31 | When it's turned on, the vote
is shared among all the users,
| | 06:34 | so one person might click it to say yes,
keep this content, and then if the next
| | 06:38 | person clicks it again, that switches
everybody's vote back to no, we want to
| | 06:41 | delete this content.
| | 06:43 | So we'll leave that unchecked.
| | 06:44 | For the Flag link text, I'm going to
say, I like this content and think it
| | 06:49 | should stay on the site.
| | 06:52 | By the way, I noticed a bug in the
version of flag that I'm using, where if
| | 06:56 | you enter too short a flag link text, it
actually doesn't appear correctly on Bartik.
| | 07:01 | I hope and expect that that will be
fixed by the time you see this video, but
| | 07:05 | if not, play around with
the length of this text.
| | 07:09 | For the Flagged message, I
will say Thank you for your vote!
| | 07:13 | Unflagged, I will make very similar;
| | 07:17 | I dislike this content and think it
should be removed. And the Unflagged message
| | 07:26 | will also be, Thank you for your vote!
| | 07:28 | There are lots and lots of options here,
but the most important one is which
| | 07:33 | content you want to be able to flag.
| | 07:35 | I will do it for basic pages,
then go down, and submit.
| | 07:41 | Now let's test it by going to our
front page, and finding a basic page.
| | 07:46 | There's one, and as you see,
there's our flag.
| | 07:49 | If we go to the node itself, we see
that, by default, the flag is also on the
| | 07:55 | full view of the node.
| | 07:56 | Well, let's say that I do
like this content.
| | 07:58 | I click that, and I get that
message: Thank you for your vote!
| | 08:02 | It also changes the flag to this, I
dislike this content and think it should be
| | 08:06 | removed, so obviously, you
can change your vote as you go.
| | 08:09 | One last thing you should be aware of
when you set up voting on your site, no
| | 08:12 | matter what system you use:
| | 08:14 | by default, most voting systems don't
allow anyone except administrators to vote.
| | 08:20 | The Flag module is unusual in that
it stores permissions on a flag by flag
| | 08:23 | basis, but the others store them
with the site-wide permissions.
| | 08:28 | So whenever you install one of these,
be sure you go to People, and then
| | 08:31 | Permissions, and then scroll through
to see how the permissions are set.
| | 08:35 | For example, there's Fivestar,
there's Flag;
| | 08:38 | now, for Flag, it's only administer flags,
so people can still vote on a flag by
| | 08:42 | flag basis, as I say.
| | 08:44 | There is Poll, and again, people aren't
allowed to vote on polls by default; we
| | 08:48 | only could because we were
the administrator, and so on.
| | 08:52 | Now, there is one kind of voting system
we didn't talk about; that's the one
| | 08:55 | that you build yourself.
| | 08:57 | If you watched lynda.com's Drupal 7
Reporting and Visualizing Data course, you
| | 09:02 | know everything you need to add a
voting field to each user's profile, and then
| | 09:06 | collect the results into a view.
| | 09:08 | But I've found the systems you saw here
to be easier to use, with features that
| | 09:12 | would be hard to implement from scratch.
| | Collapse this transcript |
| Rewarding good behavior with the Userpoints module| 00:00 | There's a saying in management: if
something needs doing, and someone else can
| | 00:04 | do it, don't you do it.
| | 00:06 | That is, being able to delegate
tasks is more important for managers than
| | 00:10 | being able to do them.
| | 00:12 | The best situation is when you can
delegate those tasks to an automated system.
| | 00:16 | Userpoints is one such system.
| | 00:19 | It watches what people do on your site
while they're logged in, and either grants
| | 00:22 | or subtract points from
their accounts automatically.
| | 00:26 | You can then set up reactions to
those points; for example, to give them
| | 00:29 | higher level roles,
with more permissions.
| | 00:32 | We'll start, as usual, at the
drupal.org project page. It's at
| | 00:37 | drupal.org/project/userpoints.
| | 00:42 | As with several other modules you've
seen in this course, Userpoints integrates
| | 00:46 | with other modules on drupal.org.
| | 00:49 | It does so in two ways. First, it has a
group of modules that it distributes as
| | 00:54 | one big package called User Points
Contributed Modules, and you'll find that
| | 00:58 | at drupal.org/project/userpoints_contrib.
| | 01:03 | Then there are others that you can
see listed at the bottom of that contrib
| | 01:06 | page, and here they are.
| | 01:10 | You can also search on the drupal.org/
project/modules page for the word userpoints.
| | 01:19 | We'll just go back and
install the module, once again, at
| | 01:24 | drupal.org/project/userpoints. On your
Modules page, you'll find it all the way
| | 01:32 | down near the bottom.
| | 01:36 | Although all you need is Userpoints,
I strongly recommend that you use
| | 01:40 | Userpoints rules integration as well.
That's what lets you have reaction rules
| | 01:44 | whenever somebody gets points, such as
in the example that I gave a minute ago.
| | 01:49 | To use it, you need to have rules installed,
which I covered elsewhere in this course.
| | 01:53 | You can get that module at drupal.org/project
/rules, but let's go back, and turn those on.
| | 02:02 | Userpoints by itself is only a framework;
it doesn't include any way to give or
| | 02:07 | subtract points itself.
| | 02:09 | To show an example, I'll need
another module called User points Nodes and
| | 02:12 | Comments. You can find that at
drupal.org/project/userpoints_nc.
| | 02:20 | Then I'll scroll down,
and install that.
| | 02:24 | Now let's take a look at the configuration
options that Userpoints provides.
| | 02:28 | There are quite a lot of them.
| | 02:29 | We're going to leave most of them in their
default states, but they're worth skimming.
| | 02:33 | To find them go up to
Configuration, and Points.
| | 02:39 | The first three tabs here show you the
transactions that have happened already;
| | 02:43 | who has how many points, and so forth.
| | 02:46 | You can also see if there are
any points awaiting moderation.
| | 02:49 | It's possible to grant points, but
then require an administrator to actually
| | 02:53 | give them to the user.
| | 02:55 | The settings are in the
Points Settings tab.
| | 02:58 | Here's where you set moderation. You
can change the word used for points.
| | 03:03 | For example, you might say,
you've won three cookies on our site.
| | 03:08 | You can make points expire, which adds
some interesting twists to the whole game.
| | 03:11 | That forces people to come back to
keep their point level high, and so on.
| | 03:18 | Note also the Additional
point settings down here.
| | 03:22 | This is where some of the modules that you
add to Userpoints will show their options.
| | 03:26 | For example, we added that
Nodes and Comments module.
| | 03:30 | Let's say we only want to grant points
when people add comments, but not when
| | 03:33 | they create actual nodes.
| | 03:35 | We could just turn this off here, and
then go down to comments, and change how
| | 03:39 | many points they get when
they post a new comment.
| | 03:42 | Let's say 10, and save.
| | 03:46 | You can make sure these settings
have taken, and see how to affect them on
| | 03:49 | a content type by content type basis by
looking at the settings page for a content type.
| | 03:54 | Go up to Structure, and Content types,
and let's just take a look at Poll.
| | 04:00 | Click edit, and scroll down to
where we have the vertical tabs.
| | 04:04 | You'll notice we have two new tabs.
| | 04:06 | Points for content, which is disabled by
default, but we could enable it if we want.
| | 04:12 | And then Points for comments, which, as we
directed, will provide 10 points for each comment.
| | 04:20 | Now let's see how this actually works, by
switching to another browser where I'm not logged in.
| | 04:24 | I'll login as a user I created earlier
in the course, and then take a look at
| | 04:30 | a poll, like this one right here, and go
down, and add a comment. Scroll down, and Save.
| | 04:36 | We can see how those
points showed up by going back our
| | 04:42 | administrative browser.
| | 04:44 | Go back up to Configuration, and Points,
and now we see that tgeller, who posted
| | 04:49 | that comment, has 10 points.
| | 04:53 | We can also see it by transaction. If
we'd put it into moderation, we could go to
| | 04:58 | Moderation, and see a list of points
that were waiting us to say, yes, we want
| | 05:02 | to actually approve them, but we didn't
have that; they're just approved right away.
| | 05:05 | Now, as I mentioned earlier, you saw a lot of
contributed modules that extend Userpoints.
| | 05:12 | That's really where a lot of the magic
of Userpoints comes in, but I expect that
| | 05:16 | number to go down in the future, as
Userpoints developers add more and more
| | 05:20 | hooks into the Rules module.
| | 05:23 | With the Rules module connecting to
Userpoints, you can set up conditions, events,
| | 05:27 | and actions that will react to each
other, so that when someone gets a point on
| | 05:31 | a certain event, they can then
enable another action, and so forth.
| | 05:35 | There are all sorts of possibilities.
| | 05:37 | I showed you the Rules module earlier
in the course, and I recommend that you
| | 05:41 | study up on that, especially if
Userpoints moves in the direction I expect.
| | 05:46 | But regardless, Userpoints is a great
module already for encouraging user engagement.
| | 05:51 | If you plan to implement it, be sure to
look through the issue queue to find out
| | 05:55 | how much things have changed.
| | Collapse this transcript |
| Setting up Organic Groups| 00:00 | Because we're talking about social
features, it's tempting to go through the
| | 00:04 | hundred plus Drupal 7 modules in the
Community category to find the features we want.
| | 00:09 | But instead, I'd like to introduce you
to one super module that takes care of a
| | 00:13 | lot of those features,
| | 00:15 | and for the ones it doesn't do, there
are other modules that integrate with it.
| | 00:19 | The module is called Organic groups, and
you can get it at drupal.org/project/og.
| | 00:26 | One nice thing about Organic groups is
that it has a huge user base, and lots
| | 00:30 | of good documentation.
| | 00:33 | In particular, take a look at
this Useful posts for configuring OG.
| | 00:37 | But we'll just go back,
and download it.
| | 00:43 | As you see, there are
quite a lot of modules here.
| | 00:45 | I'm only going to enable three of them:
| | 00:48 | Organic groups, Organic groups
context, and Organic groups UI.
| | 00:52 | We'll be using Organic groups access
control later on, when we set up private
| | 00:57 | groups, and we'll also find use
for Organic groups field access.
| | 01:01 | But for now, I'll scroll down to
the bottom of the page, and save.
| | 01:06 | Before going on, I think it's important
to understand what Organic groups does.
| | 01:11 | It's quite a bit more
complicated than the typical module.
| | 01:14 | The best way to see it is to look
at groups on other social Web sites;
| | 01:18 | for example, Facebook.
| | 01:22 | The part of Facebook that lets you do
what we're going to do in Drupal is this
| | 01:25 | Create Group link down here.
| | 01:28 | I'll just create a Test group, add a
Friend to it, as Facebook requires, and Create.
| | 01:38 | Once you've done that, you've created a
forum, where people can write posts, add
| | 01:41 | pictures, or videos, and so forth.
| | 01:43 | It becomes a sort of meeting place, with
lots of features which I won't go into here,
| | 01:47 | but this is the same
basic idea as Organic groups.
| | 01:52 | In our case, our scenario is that we're
going to set up our site as though it's
| | 01:55 | for a political campaign.
| | 01:57 | We'll set up one group as the campaign's
headquarters, but also let local
| | 02:01 | activists set up their own local groups,
each with its own basic pages, and articles.
| | 02:07 | To do that, we go up
and create a content type.
| | 02:10 | Click Structure, and Content
types, and then Add content type.
| | 02:16 | I'll call this Campaign office, and then
scroll down to the vertical tabs, where
| | 02:20 | we see a new tab called Group.
| | 02:24 | This is going to be a Group type.
| | 02:27 | You can also define content
types as being Group content types;
| | 02:30 | in other words,
content that can go into groups.
| | 02:32 | You'll see this a little bit later as we start
adding content to this group in a later video.
| | 02:38 | I'll make a few other small changes.
| | 02:39 | First of all, I'm going to turn off
commenting, and also turn off the author and
| | 02:45 | date information, and then save.
| | 02:48 | Now that I've made that content type, I
can add a group simply by adding content.
| | 02:53 | Click Add content, and Campaign office.
| | 02:57 | You'll notice that although we said we
want this content type to be a Group, you
| | 03:01 | can turn that off on a node by node basis.
| | 03:04 | I've actually found it more useful
to hide this, and I use CSS to do that,
| | 03:08 | because when I create a content type to
be a Group, I want it to always be a Group,
| | 03:12 | and by hiding this control, I
can always force it to do so.
| | 03:17 | If you want to learn more about that,
see Drupal 7 Essential Training, and also
| | 03:21 | lynda.com CSS and Drupal theming courses.
| | 03:24 | I'm going to call this
Campaign office, Headquarters.
| | 03:29 | The Body below will be,
Where it all happens!
| | 03:34 | And then scroll down to the vertical tabs.
| | 03:37 | I will provide a menu link, just
for convenience sake, and then Save.
| | 03:42 | Now let's see how this works by going to a
browser where I'm not logged in to my site.
| | 03:47 | There's our node; I'll click on
it, and Request group membership.
| | 03:51 | However, you see group membership is predicated
on you already being a member of the site.
| | 03:57 | So let's go back and try this again.
| | 04:00 | Let's say that I'm logged in this time.
| | 04:02 | Now I go back to Headquarters,
and Request group membership.
| | 04:07 | Now it starts to go through.
| | 04:09 | We can send a request message, but I
want to mention, this doesn't actually go
| | 04:12 | into e-mail, or show up
anywhere obvious on the site.
| | 04:16 | However, you can expose it as
the administrator using a view.
| | 04:19 | It's a little bit strange
that way. Then click Join.
| | 04:24 | Now let's see what that
means on the administrative site.
| | 04:27 | Here we are at the Headquarters node
again, and if we click Group, we can see
| | 04:31 | what people are part of it.
| | 04:33 | And there's the person
who just joined: tgellar.
| | 04:35 | By default, the person is pending;
| | 04:37 | Iit requires administrative approval,
but you can change that yourself.
| | 04:41 | I'll actually approve him.
| | 04:44 | There are quite a few other
settings in that Group tab.
| | 04:46 | Let's go back and take a look.
| | 04:49 | First of all, you can manually add
people if you want, and you can see what Roles,
| | 04:56 | and Permissions are part of this group.
| | 04:58 | By default, Organic groups sets it up so that
all groups have the same Roles, and Permissions.
| | 05:03 | You can override that later, and
I'll show you that in a minute.
| | 05:06 | So we have our group, and so
far, it's rather unimpressive.
| | 05:09 | Organic groups are just nodes with members,
but those memberships don't mean much.
| | 05:14 | In the next few videos, we're going to
take a look at how you can actually make
| | 05:17 | Organic groups useful,
| | 05:18 | but I'll give you a quick peek
now by taking a look at some of its
| | 05:21 | configuration options.
| | 05:23 | To do so, go up to Configuration, and
then down to the Organic Groups group.
| | 05:29 | I won't talk about all of these right now,
but just to give you a sense of them,
| | 05:33 | you can set up membership types,
and by default, there's only one.
| | 05:41 | You can change the permissions
that are on in all of the groups,
| | 05:45 | or you can go back and give each group
its own permissions by changing the settings.
| | 05:51 | Now, at the beginning of this video, I
mentioned that there were a lot of modules
| | 05:54 | that integrate with Organic
groups. I wasn't kidding.
| | 05:57 | There's even a category for it in
the Module library on drupal.org.
| | 06:02 | We see that by going to drupal.org/
project/modules, filtering by compatibility,
| | 06:09 | and then choosing the Organic Groups group.
| | 06:15 | So we're just starting down a long road.
| | 06:17 | A lot of the value of Organic groups is
hidden by default, and shows up only
| | 06:22 | when you make it visible
using the Views, and Panels module,
| | 06:25 | so that's what I'll do
next in this course.
| | Collapse this transcript |
| Adding content to groups| 00:00 | In the last video, we set up a group
as a place where members of a political
| | 00:04 | campaign's headquarters can gather
and trade information, but so far, it's
| | 00:08 | like an empty room.
| | 00:10 | There's not any way for members to actually
pass notes back and forth, as you see
| | 00:13 | when we click on Headquarters.
| | 00:16 | The way Organic groups allows
you to add content is quite clever.
| | 00:20 | It could force us to set up new forms
of information that are specific to this
| | 00:23 | group type, such as campaign literature,
| | 00:26 | but instead, it lets us leverage existing
content types, or create new ones that
| | 00:31 | are applicable to all groups.
I'll show you.
| | 00:34 | All that we have to do is go up to our
content types by clicking Structure, and
| | 00:38 | Content types, and then select one
that we want to make a group content type;
| | 00:42 | that is, a content type that can
be included in a specific group.
| | 00:46 | I am going to use Article. I click edit,
then scroll down to my vertical tabs, and
| | 00:51 | click the Group tab.
| | 00:52 | Then I simply make it a
Group content type, and save.
| | 00:57 | Let's see how that works.
| | 00:59 | We go up to Add content to create an
article node, and then create our Article.
| | 01:05 | Now we would fill this out as usual.
| | 01:08 | Once we have our information, we scroll down,
and we see a new field here: Groups audience.
| | 01:13 | Now, if we don't select anything here,
it'll be for the entire site, so it'll be
| | 01:17 | an ordinary article.
| | 01:18 | Or if we say we want it to be part of
the Headquarters group, we select that, and
| | 01:22 | say Save, and that's it.
| | 01:26 | Now, it requires the Views module to see
such content group together, and Panels
| | 01:30 | to really make it useful.
| | 01:32 | You'll see how to do that
in the next video.
| | 01:34 | But right now, if we go to Headquarters,
we actually don't see that article yet.
| | 01:38 | There's one interesting thing I'd
like to point out about how Organic
| | 01:41 | groups manages content.
| | 01:43 | Let's go back to that content type by
clicking Structure, Content types, then
| | 01:48 | edit next to Article.
| | 01:51 | When we look at that Group vertical
tab, you can see that it's possible for
| | 01:54 | content to be both a Group
and a Group content type.
| | 01:58 | That means that the campaign office
type, which we set up earlier as a
| | 02:02 | group, could also appear as
content of, say, a regional office type; a
| | 02:06 | subgroup of a group, so to speak.
| | 02:09 | You could theoretically have an
unlimited number of levels to this cake,
| | 02:12 | but you do so at the
expense of simplicity.
| | 02:15 | As always, structural planning is
at least as important as the details
| | 02:19 | of implementation.
| | Collapse this transcript |
| Seeing group activity better with views and panels| 00:00 | In a previous video, we installed the
Organic groups module to run a political
| | 00:04 | campaign with a content type called
Campaign Office, set up as a group.
| | 00:08 | We also created the first such group,
named Headquarters, and we created an
| | 00:12 | article to go into that
Headquarters group.
| | 00:16 | But there is not really much to
see here; it's just an ordinary node.
| | 00:20 | In order to show everything that Organic groups
can do, we need to expose it through Panels.
| | 00:25 | I will also install the Views module, as
that also complements Organic groups well.
| | 00:29 | Now, we installed Panels
earlier in this course.
| | 00:32 | If you haven't done so already, get
it from drupal.org/project/panels.
| | 00:40 | Also, Views requires Chaos tools,
which I installed earlier in the course.
| | 00:45 | If you don't have that, install
it from drupal.org/project/ctools.
| | 00:52 | Now let's go and get Views.
| | 00:53 | It's at drupal.org/project/views.
| | 01:02 | We install it as usual.
| | 01:10 | Now we enable them.
| | 01:11 | We will need to enable one more
part of Chaos Tools for this to work.
| | 01:16 | Scroll down, and enable Views content
panes, and then we will continue on, and
| | 01:22 | just enable our Views modules.
| | 01:27 | Then we Save configuration.
| | 01:29 | Incidentally, if you haven't done so
already, you will also need the Page
| | 01:33 | Manager module, which is
in the Chaos Tools group.
| | 01:35 | We already have that enabled.
| | 01:38 | Now for the fun part. First, we're
going to create a panels layout that appears
| | 01:42 | whenever we're looking at a
campaign office.
| | 01:45 | Then we will expose
relevant content to it. Ready?
| | 01:48 | We start by going up to
Structure, and Pages.
| | 01:55 | You might remember that we enabled and
edited the Node View panel earlier in the
| | 01:59 | course to change the way
that article nodes look.
| | 02:02 | One variant affects Articles, and the
other affects only Campaign office nodes.
| | 02:07 | When you're doing something like this,
be careful not to create panels that have
| | 02:10 | conflicting selection criteria.
| | 02:12 | But for us, we'll just go over
and edit, and then add a variant.
| | 02:17 | I will call it Campaign office, and it
will have Selection rules, and Contexts.
| | 02:26 | Once again, this is not the same as the
Context module; it's specific to Panels,
| | 02:31 | and it gets a little complicated,
but I'll walk you through it.
| | 02:34 | Then Create variant.
| | 02:37 | The Selection rule is going to be that the
Node type is Campaign office, and then Save.
| | 02:49 | Continuing on; this is where
things get a little bit confusing.
| | 02:56 | We need to add a relationship between
the group, and the node that we're posting.
| | 03:01 | To do so, it's OG group from
node, and add the relationship.
| | 03:06 | There is no need to change these settings, and
so I will click Finish, and then continue on.
| | 03:14 | We'll build our layout, no need to add
any CSS classes to it, and then we start
| | 03:22 | creating the actual design and content.
| | 03:24 | I am going to make this a two column
layout, with a larger column to the left, and
| | 03:30 | a smaller one to the right.
| | 03:32 | You saw how to do this in the
section in this course about panels.
| | 03:42 | That looks about right.
| | 03:46 | Now we add our content.
| | 03:50 | There are a lot of options here.
| | 03:52 | If you click on any of these tabs,
you see all of the different things that
| | 03:55 | you can add to a panel.
| | 03:58 | Of particular interest are
Group (tokens), and Organic groups.
| | 04:04 | You will also find yourself
often using Node, and Node (tokens).
| | 04:08 | The easiest way I've found to learn
what all these things are is to simply add
| | 04:12 | them to your layout, and see
what kind of things show up.
| | 04:14 | I will only show a few relevant ones,
and actually, I will start by simply
| | 04:18 | exposing parts of the node
itself in the left column.
| | 04:21 | Then I will put some of the
fancy group stuff in the right.
| | 04:24 | I will start with just the
Node title, and the Node body;
| | 04:34 | Node > Node Body,
and then Create variant.
| | 04:42 | I want to see what this
looks like so far,
| | 04:44 | so I have to be very
careful. Note this warning here;
| | 04:47 | changes are not actually permanent
until you go all the way down to the bottom,
| | 04:51 | and click Save, or click Update
and save here, so I will do that.
| | 04:56 | Now let's go back to our
Headquarters, and see how that looks.
| | 05:04 | We have the Title, and the Body, however, it
has labels, so I am going to change that.
| | 05:08 | You will notice, if you go up to this
contextual menu here, you can go back
| | 05:11 | and edit the panel.
| | 05:13 | Go back in, change my settings, and
override the title, so that it's blank.
| | 05:20 | Then do the same here.
| | 05:25 | Then Update and save.
| | 05:28 | Now it looks a little better.
| | 05:30 | Now let's go back and add
some things to that right column.
| | 05:33 | I click on the contextual
menu, and click Add content.
| | 05:38 | I want to add some information about the
group, and I find that under Node (tokens).
| | 05:43 | This is where it gets a little confusing,
because there are three things that say Group;
| | 05:46 | there is the group associated, a
field group_group, and a Boolean field.
| | 05:52 | I had to play around quite a bit to
figure out which one I wanted, but the one
| | 05:55 | that I actually want is the Boolean
field, and you will see how that works.
| | 06:01 | Finish, and then let's take a look at it.
| | 06:05 | Now we can see a little bit more
information about the group, and I will show
| | 06:09 | you that that changes, depending on
whether you're a member of the group or
| | 06:12 | not, or in this case, the
group manager. We're almost done.
| | 06:15 | We're going to make one more addition here.
| | 06:17 | We are going to throw in a view.
| | 06:20 | Now, when you have a group, it's only
natural that you'd want to see who is in it.
| | 06:23 | We don't have a token for that, because
it's not actually part of the node itself.
| | 06:27 | Instead, it would list
users who have joined the node.
| | 06:30 | So we will create a view of those
users, and then stick it into the panel.
| | 06:35 | To do that, I'm going to open up a new
tab by Command+Clicking on Structure, and
| | 06:40 | then going to my Views.
| | 06:41 | You will notice that there are already
some views set up here by Organic groups;
| | 06:47 | the one that we want is
Organic Group members.
| | 06:51 | Then we can go in and edit it, or clone
it, or do any of the other things that you
| | 06:55 | can do with Views, and you saw how to
do such things in the course Drupal 7:
| | 06:59 | Reporting and Visualizing Data.
| | 07:01 | I discovered an oddity about the views
that are connected with groups, and I am
| | 07:05 | going to fix it right now.
| | 07:07 | The problem is that it doesn't expose
this information correctly to groups.
| | 07:11 | The fix is to go into Contextual Filters,
and then change this Contextual Filter
| | 07:16 | that's already there, so that its
default view shows the current OG group.
| | 07:21 | We'll say, Provide default value, and
Current OG group from context, and then
| | 07:28 | apply, and as always, Save.
| | 07:33 | Now we can go back to our panel, and
add that information to our right column;
| | 07:40 | Add content, Views, and
OG members, and then continue.
| | 07:47 | Of course, you have lots of options, but
we'll just say Finish, and see what we've done.
| | 07:53 | Update and save, and now we
can actually see the members.
| | 07:58 | I am going to do the same thing to
show the articles that we've put into this
| | 08:02 | group, and then we are all done.
| | 08:04 | Once again, we go to Views; I will
click Structure, and then go down to Views,
| | 08:12 | and there's an OG content group.
| | 08:15 | Once again, you have to make that change
that I made in the other view, so that
| | 08:18 | the Contextual Filters are correct.
| | 08:21 | Click here, make the default value
Current OG group from context, and then
| | 08:26 | apply, and finally, Save.
| | 08:30 | But before we save, I just want to make
sure that we have the correct filter criteria.
| | 08:34 | Yes; it will show all content.
| | 08:36 | We could filter it further to show only
the articles, or whatever we want, but I
| | 08:39 | will keep it as it is.
| | 08:41 | Finally, back to our panel, edit it,
and I'll add that information to the left
| | 08:47 | column, and then I Continue;
Update and save.
| | 09:01 | Now we finally have what we want;
| | 09:03 | the title, the body, any articles that
we wanted here, information about the
| | 09:08 | group, and who is in it, and so forth.
| | 09:11 | If I switch over to another browser, and
take a look at that page from the view
| | 09:14 | of somebody who is already a member of
the group, but is not the administrator,
| | 09:20 | this is what we see.
| | 09:21 | Instead of saying, you are the
administrator, we have an option to
| | 09:23 | unsubscribe from the group.
| | 09:26 | The last thing I'm going to do is, I see
that this Headquarters here is redundant
| | 09:29 | to the one up here,
so I will just remove it.
| | 09:32 | Edit Panel, go down to Title,
and click Remove.
| | 09:39 | Be careful here; it can be a little
tricky to get that pop-up menu to work if
| | 09:43 | you have a short screen, as I do.
| | 09:46 | Remove it, save, and it looks great.
| | 09:50 | That was a lot of
playing around, wasn't it?
| | 09:52 | And I hid the dozens of hours I spent trying
to figure out different bits, and seeing
| | 09:56 | what actually worked in the end.
| | 09:58 | I've found that that's what's needed to
really understand both Panels and Views.
| | 10:02 | They're both kind of quirky.
| | 10:04 | So play freely, and for more instruction
in views itself, again, take a look
| | 10:09 | at my course, Drupal 7:
Reporting and Visualizing Data.
| | Collapse this transcript |
| Making groups private| 00:00 | Once you start setting up groups, you
quickly realize that there are some that
| | 00:04 | you want kept private.
| | 00:05 | In the example of the political campaign,
you would probably want a public group to
| | 00:10 | attract new supporters, but would also
want private groups, where we could plan
| | 00:13 | the behind the scene's details.
| | 00:16 | This video shows you how
to make that distinction.
| | 00:19 | First, you have to turn on a
module in the Organic Groups section.
| | 00:23 | To do so, we go up to Modules,
and then go down to Organic Groups.
| | 00:31 | The one that we need is Organic groups
access control; enable it, and then save.
| | 00:38 | When you do so, you get a warning that
you need to rebuild the permissions, so
| | 00:43 | just go ahead and click on that
link to do so. This may take a while.
| | 00:49 | The next step is to configure your
Organic group field settings. You do that
| | 00:52 | under Configuration, and then down to the
Organic groups collection down here, and
| | 00:58 | Organic groups field settings.
| | 01:00 | Here, I have to stop for a
minute, and explain this term: Bundles.
| | 01:04 | As you might know, Drupal 7
has something called entities.
| | 01:07 | They are different kinds of data
containers to which you can add fields.
| | 01:11 | Core Drupal comes with four: comments,
content types, taxonomies, and users.
| | 01:17 | Installing Drupal Commerce, for example, gives
you another kind of entity, known as product.
| | 01:23 | A bundle is simply a specific
kind of entity, with its fields.
| | 01:27 | So a basic page is a bundle.
| | 01:29 | The commenting set up on basic page is
a kind of comment setup, obviously, but
| | 01:33 | it's also a bundle, and so forth.
| | 01:35 | It's more obvious when you just look at
this list of Bundles in the pop-up menu.
| | 01:44 | Down here, we have three bundles
already, and the different fields that are
| | 01:49 | part of those bundles.
| | 01:51 | We're going to add one. It's sort of
a strange interface, but here we go.
| | 01:55 | The bundle will be Campaign office, and
the Field will be Group visibility, and add.
| | 02:02 | Now, when we click on Campaign office,
we see both Group, which was there before,
| | 02:08 | and Group visibility.
| | 02:10 | I know this is sort of like adding
fields to a content type, but it's not
| | 02:13 | actually a field that you're
adding; it's a bit of logic.
| | 02:17 | You do, however, control some further
details of this Group visibility through the
| | 02:20 | field's interface, but don't worry; I'll
show you about all of that in a minute.
| | 02:24 | For now, though, let's see how to
apply this visibility to a specific group.
| | 02:27 | To do that, we'll take a look at all of
our content by clicking the Content link
| | 02:31 | here, and then we'll edit the
Campaign office called Headquarters.
| | 02:36 | As you scroll down, we now see a Group
visibility thing that looks like a field,
| | 02:41 | and it's a required field, by the way.
| | 02:43 | If I were to try to save now,
Drupal would throw an error back at me.
| | 02:46 | But I'll make this one Public, and Save.
| | 02:49 | That was the default before, by the
way, so we haven't actually changed
| | 02:53 | anything to the group.
| | 02:54 | Now I am going to switch to another browser. I
am going to log in as a member of that group.
| | 02:58 | And indeed, if I go to
Headquarters, I see the group, as I expect.
| | 03:03 | If I unsubscribe from the group, I
still see everything, because, again, we've
| | 03:08 | made this a Public group.
| | 03:10 | Now let's go back and make it Private.
| | 03:11 | I'll switch back to my administrative
interface, edit that node again, and change
| | 03:17 | it to Private, and then Save.
| | 03:19 | Then I'll go back to my browser, and
remember, I'm looking at this while logged in
| | 03:23 | as someone who's not a member of this group.
| | 03:25 | I'll reload the page, and I can't
get in; that's exactly what we wanted.
| | 03:31 | To prove that this works, I can go
back to my administrative browser, go into
| | 03:34 | my group, click the Group tab, and
re-subscribe that user, whose name, you
| | 03:39 | remember, was tgeller.
| | 03:41 | When I go back as tgeller, and
reload the page, yup, I am back in.
| | 03:49 | Now that we've added that visibility,
let's change some of its settings.
| | 03:53 | You can only add it through that
strange configuration interface I showed you
| | 03:56 | earlier, but you can change its
visibility settings through the field setting.
| | 04:01 | I'll show you how to do that.
| | 04:02 | Go back to our administrative browser,
click Structure, Content types, Campaign
| | 04:08 | office, and manage fields.
| | 04:10 | When we edit this new Group
visibility field here, we see that we
| | 04:15 | have additional options.
| | 04:18 | We could change the on and off value,s
for example, decide to make all of our
| | 04:22 | groups Private by default, and so forth.
| | 04:25 | What you saw here is only
a partial privacy solution.
| | 04:29 | It's kind of a big hammer;
| | 04:30 | the group is either Public,
or its Private,
| | 04:33 | but you can do a lot with
what you saw here.
| | 04:35 | For example, you could add that Group
visibility field to a Group content instead.
| | 04:40 | That would allow everybody to see and
join the group, but forbid them from
| | 04:44 | seeing the contents until their
memberships were approved in that group.
| | 04:48 | You can also set finer permissions
than Organic groups has by default.
| | 04:51 | You'll see how to do that in the next video.
| | Collapse this transcript |
| Letting each group have its own permissions| 00:01 | At the beginning of this section about
Organic groups, I compared them to those
| | 00:04 | you'd find on Facebook. As with Facebook
groups, you can change how much group
| | 00:08 | members are allowed to do.
| | 00:10 | Unlike Facebook, though, you're in control
of those permissions on a granular level.
| | 00:15 | By default, there is only one set of
permissions ruling over all organic groups.
| | 00:19 | You can see that by going to the Headquarters
node here, and then clicking the Group tab.
| | 00:25 | Down here under Roles, and Permission, it
says read only. That's because they are
| | 00:29 | actually set elsewhere,
| | 00:30 | and if we click them, you can see that
you can't actually affect them at all.
| | 00:34 | But you can change these Permissions if
you change them form all groups that
| | 00:38 | inherit what are called
global permissions.
| | 00:41 | To do that, we go up to Configuration,
and down to Organic groups
| | 00:45 | global permissions.
| | 00:47 | Any changes we make here
would show up in those groups.
| | 00:51 | The same is true for Roles.
| | 00:52 | Again, if we go up to Configuration, and
down to the Organic Groups collection
| | 00:56 | here, there's Organic groups global roles.
| | 01:00 | But you can also give group owners the
right to change these permissions for
| | 01:03 | their specific groups.
| | 01:05 | To do so, you use the same mechanism
you saw in the video, Making Groups Private,
| | 01:10 | and I'll show you how that works.
| | 01:11 | Go up to Configuration again, down to
Organic groups field settings. Then you're
| | 01:19 | going to add a field to the
Campaign office bundle again.
| | 01:23 | This time the field is Group
roles and permissions, and then add.
| | 01:27 | We can see all of the fields we've added
to this bundle by clicking on Campaign
| | 01:31 | office - Node entity. This was the
group that it started with, Group visibility,
| | 01:35 | which we added in the previous video --
that's what makes it Public or Private -- and
| | 01:39 | Group roles and permissions.
| | 01:41 | We can see how that works by going
back and editing that Headquarters node.
| | 01:45 | Go up to Content, Headquarters, and edit.
| | 01:49 | As we scroll down, there is our
visibility we added, and now we have Group
| | 01:53 | roles and permissions.
| | 01:55 | Instead of using the default ones, I am
going to let this group manager override
| | 01:59 | them, so I select that
radio button, and Save.
| | 02:03 | Now let's go back and edit
that Headquarters group again.
| | 02:06 | Click on edit, and then
click on the Group tab up here.
| | 02:10 | Now you'll notice Roles and Permissions
no longer say read-only, and in fact, if
| | 02:14 | we click them, we can
change them however we want.
| | 02:18 | I recommend you spend quite a bit of
time on this screen, because some of the
| | 02:21 | options are phrased sort of strangely.
| | 02:25 | Also, you'll notice that the Administrator
Member doesn't automatically gain
| | 02:28 | permission to edit and delete content.
| | 02:31 | But doing what I just showed you gives each
group manager control over these permissions.
| | 02:37 | As long as we're talking about permissions,
I want to show you one more setting.
| | 02:41 | To do so, we go up to Configuration
and down to Organic groups settings.
| | 02:46 | When this is checked, as it is by default,
the person who is the manager of the
| | 02:49 | group can do pretty much anything there;
| | 02:51 | it's sort of like the
super user within the group.
| | 02:54 | If you're building a big social site,
where people can create their own groups,
| | 02:58 | but you want to have ultimate authority
over them, you would simply uncheck this,
| | 03:02 | and that would affect all
of the groups on your site.
| | 03:04 | You can then give the administrator
whatever rights you want, of course.
| | 03:08 | What impresses me about the way Organic
groups manages roles and permissions is
| | 03:12 | just how flexible and multilayered it is.
| | 03:14 | You have Drupal's global permissions,
which control who can create Organic group
| | 03:18 | nodes in the first place, and as you
know, you can get to those by People, and
| | 03:22 | Permissions, and then go down
to the Organic Group collection.
| | 03:25 | Then you have Organic group's own
global permissions under that Configuration
| | 03:28 | menu, and then you have each
individual group's permissions.
| | 03:32 | Put them all together, and you can set up
just about any group access system you like.
| | 03:36 | But this three layer bean dip can
become confusing if you let it be.
| | 03:41 | As always, keep things as simple as you
can, and test, test, test, with anonymous
| | 03:47 | users, group members, and group
non-members before going live.
| | Collapse this transcript |
|
|
10. Touring Drupal 7 Web ApplicationsUnderstanding packaged Drupal distributions| 00:00 | Some people say that Drupal
is too hard to use.
| | 00:03 | You download the core, but then you
have to download all of these modules, and
| | 00:06 | configure them as well.
| | 00:08 | But at the same time, there are quite a
few people who are doing similar things
| | 00:12 | with Drupal, for example, building
government Web sites, or online stores.
| | 00:17 | For them, there is something
called Drupal distributions.
| | 00:20 | This is Drupal core, packaged
with preconfigured modules.
| | 00:24 | I am going to go through a few
of those in the next videos.
| | 00:27 | They are: Acquia Drupal, a general
purpose distribution, that includes
| | 00:31 | essential additions that help Drupal's
infrastructure, such as the Pathauto,
| | 00:35 | Chaos tools, and Token modules.
| | 00:38 | Drupal Commerce, a full-featured online
store, and catalog site. And OpenPublic,
| | 00:43 | designed to make government
sites a breeze.
| | 00:46 | There are a few things you should
know about distributions, though.
| | 00:49 | You might see them called installation
profiles, or install profiles.
| | 00:53 | There is actually a technical difference
between the two, but even in the
| | 00:57 | official documentation on drupal.org,
that distinction is often lost.
| | 01:01 | They are also sometimes
called the distros for short.
| | 01:04 | Whether it's install profiles, or
distros, it's all the same thing. They are
| | 01:07 | basically applications for a
specific purpose, built on Drupal.
| | 01:12 | Secondly, a distribution's administration
interface might be quite different from
| | 01:16 | what you are used to in Drupal.
| | 01:18 | However, you'll recognize a lot of Drupal
under the hood, so your existing Drupal
| | 01:22 | knowledge won't go to waste.
| | 01:24 | Thirdly, there are a lot more distributions
out there than what you see in this course.
| | 01:28 | I chose the ones that I'll show you,
because they're popular, important, and
| | 01:32 | stable, and also because they are already
based on Drupal 7 when I made this video.
| | 01:37 | That leads me to the next point;
| | 01:39 | distributions tend not to be
as up to date as core Drupal.
| | 01:42 | There is a good reason for that.
| | 01:44 | Their creators can't build an up to
date distribution until all of the modules
| | 01:48 | it contains are ready.
| | 01:50 | So even now, over a year after Drupal
7 was released, most distributions are
| | 01:55 | still based on Drupal 6.
| | 01:56 | Of course, more and more will be on
Drupal 7 as time goes by. But enough talk;
| | 02:02 | let's get started installing,
configuring, and building on some of these
| | 02:06 | Drupal distributions.
| | Collapse this transcript |
| Getting a head start with Acquia Drupal| 00:00 | If you've built more than a couple of
Drupal sites, you probably start new sites
| | 00:04 | by installing a few essential modules
that aren't part of core Drupal itself:
| | 00:08 | Token, Pathauto, and so on.
| | 00:10 | You might also establish some
monitoring and backup procedures.
| | 00:14 | These aren't big steps, but they do
take time, and that's time better spent
| | 00:18 | making your site unique.
| | 00:20 | Acquia Drupal aims to shorten that
setup time, and it adds some connectors to
| | 00:24 | monitoring services provided by
the company that makes it, Acquia.
| | 00:28 | I'll show you some of Acquia Drupal's
distinctive features in this video, so you
| | 00:32 | can decide whether to start using it,
instead of core Drupal, as your base.
| | 00:36 | I've already downloaded it to my
server, and created the database.
| | 00:40 | You can download it from acquia.com/downloads,
and remember, that's A, C, Q, U, I, A.
| | 00:48 | My site is at acquia.tomgeller.com.
| | 00:55 | The installation is slightly different from
core Drupal's, so let's go through it together.
| | 01:06 | As it loads the modules, you'll
notice a few that aren't in core Drupal.
| | 01:10 | For example, there's an Acquia Connector
module, along with Chaos tools, and so forth.
| | 01:15 | As it loads the modules, you'll see a
few names that aren't so familiar, such as
| | 01:19 | Acquia Drupal, and Acquia Agent.
| | 01:26 | The big difference is in this
Acquia subscription identifier, and
| | 01:30 | Acquia subscription key.
| | 01:31 | To get these, you need to login to
the Acquia site at network.acquia.com.
| | 01:37 | I've already done that, and I'll
fill these out a little bit later.
| | 01:40 | You can come back, and do so
under the configuration settings.
| | 01:46 | Otherwise, it's just like
an ordinary install.
| | 01:54 | When you go to the front page,
however, you'll notice a few differences.
| | 01:57 | First of all, we have this thing
up here: Subscription not active.
| | 02:01 | We also have these warnings here saying
how you can get a subscription, and
| | 02:05 | exactly what it gives you.
| | 02:06 | One of the offers from
Acquia is the free 30-day trial.
| | 02:09 | I've Command+clicked it, just so that
you can see what it looks like, and then
| | 02:13 | you would click Get connected.
| | 02:19 | I've heard complaints from people who
really don't like being nudged like this,
| | 02:22 | because you see these warnings at the
top of every administrative screen, but
| | 02:26 | they're easy enough to turn off.
| | 02:27 | What you do is you go to
Modules, and then go down to the Acquia
| | 02:32 | Network Connector group.
| | 02:34 | First you turn off the Acquia Site Profile
Information, and then you'd go through
| | 02:38 | again, and turn off Acquia agent.
| | 02:41 | I'm going to leave them on, though.
| | 02:42 | As long as we're on the Modules page,
I'll show you some of the other things that
| | 02:46 | are part of Acquia Drupal.
| | 02:48 | There's the Chaos Tools Suite,
which is used by quite a few modules,
| | 02:51 | including Panels, and Views.
| | 02:55 | Database Engines, which allow you to
connect Drupal to more databases than
| | 02:58 | core Drupal permits, and a few other things.
There's the Pathauto, and Token we discussed earlier.
| | 03:06 | Finally, there's a group of modules
related to search. This connects your site
| | 03:10 | to Acquia search, which is a hosted
solution that's generally faster and more
| | 03:14 | flexible than what you'll
have on your server.
| | 03:16 | If you want to find out more about
that, of course, go to the acquia.com site.
| | 03:21 | But let's take a look at what
the Acquia network gives you.
| | 03:24 | To enter those settings we go up to
Configuration, and then we could click
| | 03:28 | Connect now, or at any time, we could go
to Acquia Network settings. That brings
| | 03:32 | us back to this screen, and
I'll click Get connected.
| | 03:36 | You have two ways to configure this.
| | 03:38 | You could either enter your name and
password, or you could go to the site
| | 03:42 | yourself at network.acquia.com, log in
there, and then fill in that information.
| | 03:49 | But I think I'll go back and do it the easy
way, with my e-mail address, and password.
| | 03:59 | In here, as you can see, you can opt
out of what Acquia network gets. You can
| | 04:03 | also move your site to
their hosting service.
| | 04:06 | I'll just leave it as it
is, and click Save settings.
| | 04:08 | Now let's go back to that network.acquia.com,
and see what we get for that.
| | 04:16 | I'll log in. After you've connected to
network.acquia.com, you might have to run
| | 04:26 | cron in order to
make the connection complete.
| | 04:28 | To do that, go up to Configuration,
and down to Cron, and then just click
| | 04:33 | this button: Run cron.
| | 04:35 | If you don't do this, you'll be waiting
for the next time the cron runs, which
| | 04:39 | could be as much as three hours later.
| | 04:41 | But once that's done, when you reload
the page at network.acquia.com, you get
| | 04:46 | something that looks like this.
| | 04:48 | I won't go into all the different
things that Acquia network does, but if you
| | 04:51 | poke around here,
you'll get a pretty good sense.
| | 04:56 | First, it'll catch things that might be
slowing down your site, or that might
| | 05:00 | keep it from performing as well as it
could, and it will give this inside score,
| | 05:04 | and it gives details of all
of the tests that it runs.
| | 05:10 | Other services tell you how well the
site will perform for search engine
| | 05:13 | optimization; in other words, how easy
it is for your site to be found on the
| | 05:17 | Internet, and so forth.
| | 05:19 | I'll leave the rest of
this for you to click around.
| | 05:21 | Finally, I'd like to show you how Acquia
Drupal itself is set up on your server.
| | 05:26 | It's a little bit different
from what you might expect.
| | 05:28 | So I'm going to switch back to my
Terminal program here, and then show you where
| | 05:33 | it puts the modules.
| | 05:34 | Now, you might expect them to be in
sites/all/modules, and let's take a look.
| | 05:43 | In fact, there isn't even a modules
folder there. I am going to go back up to my
| | 05:47 | root directory, and go instead
into the profiles directory.
| | 05:56 | This, in fact, is where Acquia puts
them: inside profiles/acquia/modules.
| | 06:04 | The odd location of those modules can
cause big problems if you forget that your
| | 06:07 | site was built on Acquia Drupal, and you
try to replace it with core Drupal; for
| | 06:11 | example, when you do a security update.
| | 06:13 | I've done that many times.
| | 06:15 | I throw away everything except the
sites folder, and then the update fails,
| | 06:19 | because I've tossed the important bits
that were in the profiles folder. That's
| | 06:23 | an example of yet another reason why
it's crucial that you make backups before
| | 06:28 | updating, or doing anything
else radical on your site.
| | 06:31 | I also recommend that you wait for the
distribution's publisher to come out with
| | 06:34 | an update to the whole distribution,
rather than try to piece one together with
| | 06:38 | updates of core,
and the individual modules.
| | 06:41 | You can do it, but there's a good
chance that you're going to introduce some
| | 06:44 | conflicts, and again, you may erase some
important things that you really need to keep.
| | 06:49 | But let's get back to
Acquia Drupal in particular.
| | 06:52 | It's an unusual creature in the world
of Drupal distributions, because unlike
| | 06:55 | some of the others you'll see in this
course, it's not there for a specific
| | 06:59 | purpose, and the extra modules that it
includes aren't really its selling point.
| | 07:03 | Rather, its connection to
Acquia services is.
| | 07:08 | And again, to learn about
those services, go to acquia.com.
| | 07:12 | If this interests you, spend some
time looking at those offerings before
| | 07:15 | committing to Acquia Drupal.
| | 07:17 | If you run a smaller site, or if you
don't have very big needs, you might find
| | 07:21 | that it's more complication than you need,
but if you run a busy or high-profile
| | 07:25 | site, you might find its services worthwhile.
| | Collapse this transcript |
| Creating online storefronts with Drupal Commerce| 00:00 | One of the most popular distributions
in Drupal's history is a shopping cart
| | 00:04 | system called Ubercart, which
you can get at ubercart.org.
| | 00:08 | But a series of circumstances caused
its original developers to leave that
| | 00:12 | project, and start another shopping
cart system from Scratch, rethinking
| | 00:16 | everything that learned
from making Ubercart.
| | 00:18 | While the Ubercart is still around, and
still quite active, its successor, Drupal
| | 00:22 | Commerce, has become quite a contender.
| | 00:25 | It's the one I personally prefer, but it can
be a little tricky to figure out at first.
| | 00:30 | Here are the basics.
| | 00:31 | The project homepage is
at drupalcommerce.org.
| | 00:35 | The way to download it is to click the
Download from drupal.org link, and that
| | 00:39 | takes you to the project page.
| | 00:41 | I do want to mention, however, that
I almost always use what they call
| | 00:45 | Commerce Kickstart instead.
| | 00:47 | If you click that, it leads you to
another project page, where you can download,
| | 00:52 | and then install it.
| | 00:53 | I've already done so on my server;
it's installed at commerce.tomgeller.com.
| | 00:59 | I'll quickly run through the installer.
It's mostly the same as a standard
| | 01:03 | Drupal installation, except for some
small things at the beginning, and at the end.
| | 01:07 | First of all, as is usual with an
installation profile, make sure that you choose
| | 01:11 | the radio button for the
profile you want: Commerce Kickstart.
| | 01:24 | As it loads modules, you'll see quite a
few that are unfamiliar; for example, that
| | 01:28 | Checkout module, and then you'll see it
also includes Rules, and Views, which are
| | 01:33 | essential to Drupal Commerce.
| | 01:36 | Before completing the installation, you're
asked if you want to create example content.
| | 01:40 | I strongly recommend that you do this.
| | 01:43 | By the way, the company that mostly
maintains Drupal Commerce, known as Commerce
| | 01:47 | Guys, is very busy remaking Commerce
Kickstart, so you might find these options
| | 01:51 | to be quite different when
you come to take a look at it.
| | 01:54 | But I'll just say Create and
Continue, and there we are.
| | 02:00 | Because we used Commerce Kickstart,
we have these three sample products.
| | 02:04 | You will also notice that there's a
new menu up here, Store, along with a few
| | 02:08 | extra things here: Add product,
Add product display, and so forth.
| | 02:11 | I will show you what it looks like
from a customer's point of view by adding
| | 02:15 | something to the cart, and
completing the checkout process.
| | 02:19 | The product that's added shows up in
the cart, we can see what's in the cart by
| | 02:23 | clicking View cart, and then Checkout.
| | 02:25 | You've seen the sort of
thing online many times, I'm sure.
| | 02:34 | We see the total,
and we can enter payment.
| | 02:36 | In this case, it's a test payment
system, so whatever we enter here will be
| | 02:40 | accepted, as long as it's not a
single character value. And we're done.
| | 02:48 | Now let's get back to the
Store menu up here.
| | 02:50 | The items you see in this gray shortcut bar
are actually just taken out of that Store menu;
| | 02:56 | they are the most often used
things. You can get to them as well, by
| | 02:58 | simply clicking Store.
| | 03:01 | Now, as I'm making this video, I saw
this warning as soon as I went into the
| | 03:04 | administrative interface.
| | 03:06 | This illustrates a point that I made
earlier on in the course when I was showing
| | 03:10 | you Acquia Drupal. That is, when it's
time to do updates, I recommend that you do the
| | 03:14 | updates for the entire distribution,
not just for a single module.
| | 03:19 | We could go and look at the available
updates, and just update the Chaos tool suite.
| | 03:26 | And if your service is live, and
you're concerned about that, what I
| | 03:29 | would suggest doing is reading the
release notes, and find out if it's a
| | 03:31 | serious security issue.
| | 03:33 | If it is, I would replace the module. If
it's not, I would wait for Commerce Guys,
| | 03:37 | or whoever the maintainer is of the
distribution, to come out with a new version
| | 03:41 | for the whole thing. Otherwise you
might find that new versions break the site.
| | 03:45 | But let's go back. I'm going to just
ignore that warning for now, and look
| | 03:48 | through everything else
that's in the store.
| | 03:50 | First of all, we have Customer profiles.
In this case, because I made that purchase
| | 03:57 | as the administrator, there
is no extra customer profile.
| | 04:00 | However, it does record that I'm now not
only a user of the site, but also a customer.
| | 04:09 | And it links the user to the customer.
| | 04:13 | Going on down the Store menu, we can see
the orders that have been placed in the
| | 04:16 | store, and we can create Products,
and something called Product displays.
| | 04:26 | The interaction between Products, and
Product displays is somewhat complicated.
| | 04:31 | I go into that in a separate course
on lynda.com. I'll tell you about it at
| | 04:34 | the end of this video.
| | 04:37 | And finally, you can configure
quite a bit inside your store,
| | 04:41 | such as Currency settings,
Taxes, and so forth.
| | 04:44 | Now I want to take a look at the Drupal
Commerce from a slightly different view.
| | 04:48 | If you go up to the Modules,
we'll see how exactly it's built.
| | 04:52 | Of course, we have our Core modules, and
Chaos Tool Suite, which is used by views,
| | 04:58 | and Rules, and several other modules.
| | 05:00 | We have specialized modules for the
Commerce itself, and there are quite a few of
| | 05:06 | them, and some other handy things.
| | 05:12 | But the most important parts of Drupal Commerce
are the Rules modules, and the Views modules.
| | 05:19 | You might remember, for example,
when we took a look at those orders,
| | 05:23 | this is actually created in a view, and
you see this little contextual menu up
| | 05:27 | here; we can go up and change the view.
That's really handy, because it means we
| | 05:30 | can add some fields, remove
some fields, and so forth.
| | 05:35 | The Rules module comes in, for example,
when you do that checkout process.
| | 05:39 | When we were completed with our checkout,
it created that customer, and then linked
| | 05:43 | it back to the person who'd
created the order in the first place.
| | 05:47 | You can change the rules, as usual, by going
to Configuration, and then down to the Rules.
| | 05:54 | If you have any questions about how to work
with rules, see that section in this course.
| | 05:58 | For Views, I recommend my course,
Drupal 7:
| | 06:01 | Reporting and Visualizing Data.
| | 06:03 | The last thing I want to mention will
show up when we take a look in our
| | 06:06 | Terminal program at how
this is installed on our site.
| | 06:09 | I'm already in the directory, and it
looks like any other Drupal installation.
| | 06:15 | However, as with Acquia Drupal, a lot
of important stuff shows up in this
| | 06:19 | profiles directory, so it's not enough
simply to copy over the sites directory
| | 06:24 | as it is for Core Drupal.
| | 06:32 | See? There is the modules that you
need. They're not in sites/all/modules.
| | 06:38 | I'm personally a big fan of Drupal
Commerce. It's a really deep system, and
| | 06:42 | incredibly flexible.
| | 06:43 | I won't go any further into the details
now, especially since lynda.com has a
| | 06:48 | complete course on it.
| | 06:49 | That course is Create Your First
Online Store with Drupal Commerce.
| | Collapse this transcript |
| Creating government web sites with OpenPublic| 00:00 | Now we come to one of the most complex
and remarkable Drupal distributions out
| | 00:04 | there: OpenPublic, which is
designed for government Web sites.
| | 00:08 | I say it's remarkable, because it makes
so many changes to Drupal that it hardly
| | 00:12 | even looks like Drupal anymore.
| | 00:14 | But don't be intimidated; when you dig a
little, you will find a lot that's familiar.
| | 00:19 | You can get it at openpublicapp.com.
| | 00:21 | I have already downloaded
it, and put it on my server at
| | 00:25 | openpublic.tomgeller.com.
| | 00:27 | So, let's run through its installer.
| | 00:30 | Like many distributions, it's pretty
much like any other Drupal installer, but
| | 00:34 | with special quirks.
| | 00:35 | Of course, you choose OpenPublic at
first, and add your database information.
| | 00:55 | If you're keeping an eye on the number
of modules that get installed, you will
| | 00:59 | notice that 106 is the
highest we have seen yet.
| | 01:03 | OpenPublic installs quite a lot of
extra pieces, as you'll see in a minute.
| | 01:06 | At the end of the installation process,
you will see a number of warnings, and
| | 01:11 | notices. These can be somewhat worrisome.
| | 01:13 | I am going to open them all up by
Command+clicking. That will create new
| | 01:18 | tabs with these links.
| | 01:20 | However, if you're watching the top
of the page, you will notice that I am
| | 01:23 | getting Access denied
for every one of them.
| | 01:28 | The problem is that I need to make
those settings, however, I haven't actually
| | 01:32 | created the first user yet, so
nobody has access to the site.
| | 01:35 | Don't worry about it; we will just
finish the Installation process, then go
| | 01:39 | back to those pages.
| | 01:44 | One interesting thing about OpenPublic
is that since it's for government
| | 01:48 | Web sites, it enforces
some password complexity.
| | 01:52 | In this case, I tried entering a fairly simple
password, but it rejected it, and good for it.
| | 01:57 | I will enter a more
complex one now, and save.
| | 02:06 | This may take a while, because as I say,
OpenPublic has a lot to configure, and we are done.
| | 02:12 | Now, you will notice it does have an
error. I hope that this won't be there when
| | 02:16 | you actually go to load OpenPublic.
| | 02:18 | This is just an issue that's
come up while I'm recording this.
| | 02:21 | I am going to open up this block
configuration page as well, and then go back and
| | 02:25 | reload all of those Access denied pages.
| | 02:36 | And I'll also go on to my new site.
| | 02:39 | So here's what the front
page looks like by default.
| | 02:41 | Let's go back, and make sure that
those configurations are as we want them.
| | 02:46 | The CAPTCHA module is an antispam
module, and you can go and say, we want to
| | 02:50 | block things that are coming as comments, for
example, or at least challenge them with a CAPTCHA.
| | 02:56 | IMCE relates to how images are
handled in the rich text editor.
| | 03:01 | Secure Pages only comes up if you're
using HTTPS; that is, a secure HTTP server.
| | 03:08 | You can enforce certain Password policies,
for example, having them expire after a
| | 03:12 | certain amount of time.
| | 03:14 | And then we come to the
Regional settings, and Date and time.
| | 03:17 | These are the two that threw up
warnings during the installation process.
| | 03:20 | The one thing I recommend you do is
simply click Save configuration on these two.
| | 03:27 | And finally, we can see
the blocks that it created.
| | 03:31 | We don't actually have to make any
changes right now ourselves, but you can see
| | 03:35 | it adds quite a few to core Drupal.
| | 03:38 | Anyway, I'm going to close out all of these
tabs, except for the front page, and continue.
| | 03:43 | The first thing that I am going to do is
take a look at my status report, because
| | 03:46 | OpenPublic needs a little
bit more configuration by hand.
| | 03:52 | Click Reports, then Status report.
| | 03:54 | There are three errors on this page.
| | 03:57 | The Colorbox plugin is a visual
enhancer that requires you to install
| | 04:01 | a JavaScript library.
| | 04:02 | I'll come back to that in just a minute.
| | 04:06 | Google Analytics tells you more
about who's visiting your site.
| | 04:10 | It requires a Google Analytics key,
which you put into its Settings page.
| | 04:14 | I won't do that here. I show you how
to do it in Drupal Gardens Essential
| | 04:17 | Training, in the video Tracking
Site Usage with Google Analytics.
| | 04:22 | And then we can see that
some updates are needed.
| | 04:24 | Once again, unless you're running a
production server, and you really need to fix
| | 04:29 | some security issues, I recommend you
wait until the next version of OpenPublic
| | 04:32 | comes out before making those updates.
| | 04:35 | But you can find out by
clicking that Not secure,
| | 04:38 | looking at the updates themselves, and
then taking a look at the Release notes.
| | 04:42 | Obviously, if you're running a real
government Web site, and it's in production,
| | 04:45 | this is exactly what you
want to do. But let's go back.
| | 04:49 | The one that I will fix
is this Colorbox plugin.
| | 04:53 | The makers of OpenPublic couldn't
include this JavaScript library, because its
| | 04:57 | license is incompatible with Drupal's.
| | 04:59 | So here's what you do.
| | 05:00 | I am going to Command+click, so that I
open up this window in a separate tab,
| | 05:05 | then I go to the Download link.
| | 05:08 | I copy that link,
and switch over to my Terminal.
| | 05:12 | I am already aware this
site is installed on my server.
| | 05:15 | I can then go back and take a look at
that Status report, and it will tell me
| | 05:21 | where exactly it needs to go:
it's sites/all/libraries/colorbox.
| | 05:26 | Okay, switch back to my Terminal, go to
sites/all, and take a look at what's there.
| | 05:33 | Ah!
| | 05:33 | There is no libraries directory, so I will
create one with mkdir, for make directory.
| | 05:38 | Then I will descend into
it, and grab that package.
| | 05:45 | I had previously copied this URL.
| | 05:55 | Once there, I can unzip
it with unzip colorbox.zip.
| | 06:02 | And indeed, it created the
directory that was required.
| | 06:05 | I can now get rid of that zip file.
| | 06:13 | Now let's try reloading the Status report,
and see if that fixed the problem. Yup!
| | 06:17 | We are all good.
| | 06:22 | So let's go to the front page, and see
what we actually get with OpenPublic.
| | 06:27 | First of all, it comes with quite a bit
of sample content, and it's arranged the
| | 06:31 | way that you would normally
expect in a government Web site.
| | 06:34 | Services, and it has submenus, for
example, Going Green Tax Credit. The types of
| | 06:41 | Resources that you would have in
a government media room, and so on.
| | 06:45 | But really, the important part of
OpenPublic is not in its design, although that
| | 06:49 | too is impressive, but rather in all of
the government required things that are
| | 06:53 | built into the distribution;
for example, that password checker.
| | 06:57 | Let's click Modules, and take a look
at some of the things that are there.
| | 07:00 | You will first notice that the design
of this entire administrative screen is
| | 07:04 | different. That's using some modules
that make this a little bit easier for
| | 07:07 | people who aren't familiar with Drupal.
| | 07:10 | But again, if you poke around a little
bit, you will see that underneath it all,
| | 07:13 | it is Drupal. Install new module just
shows up in a button, instead of a link;
| | 07:17 | Save configuration is to the right,
instead of at the bottom, and so forth.
| | 07:21 | So we have our Core, Chaos tool
suite, which you have seen throughout this
| | 07:25 | course, Context, which I describe
elsewhere. Date/Time; this allows for
| | 07:29 | calendars, for example. Development,
Distribution Management, which refers to
| | 07:36 | apps -- I will talk about that in a minute --
Features, and so on. Lots, and lots, and
| | 07:42 | lots of stuff here.
| | 07:43 | And under the Other group,
it just goes on and on.
| | 07:48 | If this seems overwhelming to you, and
it did to me at first, then check out the
| | 07:53 | documentation on openpublicapp.com.
| | 07:56 | Once there, click Community,
and Documentation.
| | 08:00 | As you can see, there is
quite a lot of stuff here.
| | 08:05 | Getting back to our site, there is one
area of OpenPublic that I think is very
| | 08:09 | promising, but which I couldn't go into
here, because at the time that I recorded
| | 08:12 | this video, it required some fairly
complicated installation procedures.
| | 08:17 | That's Apps, right up here.
| | 08:19 | The idea behind Apps is that you'll be
able to choose one of these things, for
| | 08:23 | example, Content Translation, or Events
calendars, and be able to take a look at
| | 08:29 | what they are, and then
install them with just one click.
| | 08:33 | And there is the Install App.
| | 08:35 | It's an area that's still in flux, and I
really hope that it's easier to use by
| | 08:39 | the time you see this.
| | 08:40 | Definitely give it a try when you
start playing around with OpenPublic.
| | 08:44 | The whole concept of Apps is sort of
as a way to package features, so they are
| | 08:48 | easy for non-technical
people to install and manage.
| | 08:51 | Like much of OpenPublic, it represents
an ambitious plan by developers.
| | 08:56 | Similarly, working with OpenPublic takes
a little bit of ambition on your part,
| | 09:00 | but the results can be well worth it.
| | Collapse this transcript |
|
|
11. Final Project: A Political Campaign SiteTaking the assignment| 00:00 | Now let's put all of our knowledge
together for a hypothetical client.
| | 00:04 | Now you'll notice I said
hypothetical and not typical.
| | 00:07 | That's because there is no typical client.
| | 00:09 | They vary tremendously in their needs,
their structure, and their personalities.
| | 00:14 | Let's listen to a voicemail from the campaign manager
for Andrew Paulman. He is running for commissioner.
| | 00:19 | (Greg Thomas: Hi Tom, this is Greg Thomas.
I'm Andrew Paulman's campaign manager.)
| | 00:25 | (Thanks for submitting your bid.)
| | 00:28 | (In fact, we'd like to bring
you on board to help us out.)
| | 00:31 | (Now, we don't have a lot of technological
expertise, although I do have a Facebook account.)
| | 00:38 | (But anyway, we've got a
lot of campaign literature)
| | 00:41 | (pictures, position statements, stuff like that.
| | 00:44 | (We're just now pulling together our
staff, and we do have a graphic designer who)
| | 00:49 | (tells me that she knows Photoshop and CSS.
We're running a pretty traditional campaign.)
| | 00:57 | (I mean we don't expect a website to
drive big numbers of folks to vote for)
| | 01:01 | (us, but we realize we need to be present on
the web, especially for the younger voters.)
| | 01:06 | (Our site doesn't have to be anything
super fantastic, but one of our guys did)
| | 01:11 | (suggest that our five campaign offices might be
able to use the site to coordinate behind the scenes.)
| | 01:18 | (And of course we need it
real soon. Talk to you later.)
| | 01:24 | All right, so you might be wondering,
why does everything that he said matter?
| | 01:28 | Well, the fact is we learned quite
a lot from just those few minutes.
| | 01:32 | For example, we now know that first the
candidate's input will be limited to content.
| | 01:37 | You probably won't have opinions about
how to do things as long as they get done.
| | 01:43 | He also probably won't have a
complete vision of what's possible, so some
| | 01:46 | internal marketing might be necessary.
| | 01:49 | Second, the campaign manager's
experience with Facebook can be leveraged by
| | 01:53 | including Facebook-friendly features.
| | 01:56 | That ties in with their need to reach
younger voters and suggests that some other
| | 01:59 | social media integration would be welcome.
| | 02:02 | Third, the public site can be
comparatively minimal as it's not really what's
| | 02:06 | leading their campaign.
| | 02:08 | Fourth, we don't need to put the
final polish on the CSS or graphics;
| | 02:12 | they have a graphics person who will do that.
| | 02:14 | Fifth, we'll need to have some kind of
structure for regional offices. And sixth,
| | 02:19 | speed and cost are of the essence.
| | 02:22 | It's a time-sensitive election
campaign, so speed probably takes precedence.
| | 02:26 | But, of course, you'll want to check
that assumption whenever there's a conflict.
| | 02:31 | We can also make further assumptions
and those would be borne out during
| | 02:34 | the interview stage.
| | 02:35 | For example, political candidates tend to
like to republish good news about themselves.
| | 02:40 | They also regularly communicate with
their constituents and they always need
| | 02:44 | ways to get volunteers and
money and things like that.
| | 02:48 | When we're done, we'll end up with a
site that looks something like this.
| | 02:52 | It includes dummy content and
doesn't have the final graphic polish--
| | 02:55 | they'll add the real stuff in the CSS
later--but it is the complete job that
| | 03:00 | we were hired to do.
| | 03:02 | So, we're ready to get started planning,
building, and running our website.
| | 03:07 | Because we're going to be
compressing many hours of work into just a few
| | 03:10 | minutes, you're only going to get a
top-level view. And as I said before,
| | 03:14 | every job is different.
| | 03:16 | Your client might have special needs
which require additional planning, but what
| | 03:20 | you'll see now will give you a
general idea of what it takes to build a
| | 03:23 | professional-quality Drupal website.
| | Collapse this transcript |
| Planning the project| 00:01 | So now we know, in a general sense, what
the client wants, and a general sense is
| | 00:05 | often all you'll get from clients,
especially those that don't already have
| | 00:09 | technical knowledge,
or Web builders on staff.
| | 00:12 | You could just wing it, and that's
what a lot of people do, but that'll take
| | 00:15 | longer, and you'll probably end up with
something the client wasn't expecting, and
| | 00:19 | doesn't really want.
| | 00:20 | No, the best way to proceed is with a plan.
| | 00:23 | So we'll put one together, based on the
principles outlined in the Planning Your
| | 00:27 | Site video from earlier in this course.
| | 00:30 | Revisiting that outline, you need
to figure out the site's purpose.
| | 00:34 | In this case, it's to support a traditional
campaign. That is, it's not going to
| | 00:38 | be the thing that drives the campaign.
| | 00:40 | It is also supposed reach out to
certain demographics; in this case,
| | 00:43 | they specified young.
| | 00:45 | It should do certain other campaign
related things, such as have position papers
| | 00:49 | on the site, and it should be there
simply because it should be there;
| | 00:53 | it's obliged for a campaign these
days to have an online presence.
| | 00:57 | Based on that, you can figure out
what sort of features are needed.
| | 00:59 | We know there'll be position
papers, so there has to be something like
| | 01:03 | a document library.
| | 01:04 | The campaign manager mentioned that
there's going to be regional campaign
| | 01:08 | subsections. In other words, people
who are working on the campaign should be
| | 01:12 | able to set up their own office, and
communicate just within their group.
| | 01:16 | There should be some calls to action;
in other words, how you can help out with
| | 01:19 | the campaign, Facebook
integration, and social media hooks.
| | 01:23 | When we're figuring out our features,
it's also important to figure out what
| | 01:26 | features are not necessary.
| | 01:28 | In this case, we don't need user logins
for the general public, or any kind of
| | 01:32 | commenting, or forums.
| | 01:33 | That simplifies things quite a bit,
because we don't have to plan any
| | 01:36 | spam prevention as well.
| | 01:38 | Next comes the site map, and
here's what we came up with.
| | 01:41 | There's going to be a homepage, and we have some
description of exactly what it's going to be.
| | 01:46 | There'll be a section for positions,
a section for a blog, a separate
| | 01:50 | members-only section, where those
regional campaign offices can talk to each
| | 01:54 | other, and finally, the calls to action,
which we'll set on a separate part of the site.
| | 01:59 | At the bottom of every page, of course,
we're going to need certain information;
| | 02:02 | About us, Privacy policy, and so on.
| | 02:05 | Now we can start to
actually touch upon the design.
| | 02:08 | We've decided on something
like this for our front page.
| | 02:12 | As usual, there'll be a banner, but we
also want to have something that tells
| | 02:15 | people they can get involved
right there at the top of the screen.
| | 02:18 | The candidate's picture is obligatory,
since it is a campaign, a statement, and
| | 02:22 | then we'll have a few
positions right there on the front.
| | 02:25 | Internal pages will be a
little bit different.
| | 02:27 | We'll get rid of all of those positions,
and instead, we'll use that whole content
| | 02:31 | area just for whatever it is
that's going to be on that page.
| | 02:35 | Now, when you're building your own
wireframes, you might have several of these;
| | 02:38 | you might even have dozens of them,
depending on how complex the site is, but
| | 02:42 | for us, we're just doing a very simple site.
| | 02:44 | Next, we have infrastructure notes.
| | 02:46 | We want to make sure that this gets backed up,
| | 02:48 | so we'll set up the Backup & Migrate
module, and create a schedule, so it backs up
| | 02:52 | every day, or every week,
or something like that.
| | 02:55 | We know that the campaign manager is
the technical contact, so we might want to
| | 02:58 | put that person's name in as the
administrator of the entire site.
| | 03:02 | That'll ensure continuity after we're gone.
| | 03:05 | We'll add user roles if we have to as we
go along. And for the theme, I've played
| | 03:09 | around a little bit, and I've decided
on the Corolla theme, which you might
| | 03:12 | remember is a subtheme of Adaptive themes.
| | 03:15 | It has special mobile features, which we like.
| | 03:17 | Now, this was a very quick
walk-through, of course.
| | 03:20 | The exercise could be quite a bit more
detailed, and in the real world, it usually is.
| | 03:24 | For example, on that front page, where
we see those individual positions, I'd
| | 03:29 | expect the pages that you get when
you click on one of them would have a
| | 03:32 | slightly different design from the rest
of the site, and therefore, we would have
| | 03:35 | to plan a wireframe for those pages.
| | 03:38 | But even this small amount
of planning goes a long way.
| | 03:41 | The next step is to implement it.
| | Collapse this transcript |
| Preparing the infrastructure| 00:00 | Now that the planning is done for our
campaign site, it's time to actually
| | 00:04 | start making it happen.
| | 00:05 | I've already set up a development
space for it at campaign.tomgeller.com.
| | 00:10 | I'm going to do a lot of the work
using Drush and the Terminal for speed.
| | 00:14 | Now, I know most people's first instinct is
to try to build out the graphic design first,
| | 00:18 | but believe me, it's easier this way.
| | 00:21 | You have to build the walls
before you can paint them, so to speak.
| | 00:24 | And remember, if you want to learn more about
Drush, there's a section on it in this course.
| | 00:28 | So here we are in our Terminal, and I'm
already in the directory where our site will go.
| | 00:34 | But as you can see, there's nothing there yet.
| | 00:36 | So first I'll download Drupal, and then,
as usual, I have to move that up a level.
| | 00:43 | You might not have this step.
| | 00:48 | Next, I'll use Drush to
do the site installation.
| | 00:51 | We could go back to our
browser and do it, of course.
| | 00:53 | Just go to campaign.tomgeller.com.
| | 00:55 | But let's give it a shot.
| | 00:57 | In this case, I'm going to include a
whole lot of the options that come with the
| | 01:01 | Drush site install command.
| | 01:04 | And for the account mail, as I said before,
I'll put in the campaign manager's e-mail.
| | 01:12 | We get a warning that we're about to
drop all the tables that's in that database.
| | 01:16 | We'll accept it, and there we go!
| | 01:19 | This may take a while.
And we're all done.
| | 01:23 | Here we have the username, and the
password for user one; that is the super user.
| | 01:27 | Next, I'm going to add the
modules that I know I'm going to use.
| | 01:30 | In the previous video, I
outlined the features we want.
| | 01:34 | Now I've created a table
to show what'll be needed.
| | 01:36 | First, I'm going to install the
things that I install on every site: Token,
| | 01:40 | Pathauto, Ctools, and Rules.
| | 01:42 | I'm going to be putting together lists
of various things, such as the candidates'
| | 01:46 | positions, and for that, I'll need Views.
| | 01:49 | For layout, as I said, I'm going to
use Adaptive themes, and Corolla; Corolla
| | 01:53 | being a subtheme of Adaptive themes. And
I know that I'm going to want to have a
| | 01:56 | sort of modular approach to that
front page, so I'll Panels to do that.
| | 02:01 | Finally, for the social part of the site, I'm
going to use AddThis, so that people can
| | 02:05 | post things from the site on to
Facebook, and Twitter. And Organic groups;
| | 02:10 | that allows the campaign
offices to pass messages privately.
| | 02:13 | Going on, I'm going to need a
Content type called position.
| | 02:17 | Now, I could do the candidates'
positions as basic pages, or articles, but I'd
| | 02:20 | rather set it aside.
| | 02:22 | That way, if I want to add any kind
of fields, it'll be easier to do.
| | 02:25 | It'll be sort of off in its
own little area in the site.
| | 02:28 | I'll want to have a separate
role for the content manager.
| | 02:32 | And finally, we know the
basic pages that we'll need.
| | 02:35 | Fortunately, I can install and enable most
of these modules all at once, using Drush.
| | 02:40 | So I go back to my Terminal, clear the
screen, and I'll do drush dl -- and here, I'm
| | 02:47 | going off of the list of modules that
I had before -- token, pathauto, ctools,
| | 02:54 | views, panels, adaptivetheme,
corolla, addthis, devel, og, and rules.
| | 03:08 | Let's see how that does.
| | 03:10 | This may take a while, because
it's downloading quite a lot.
| | 03:13 | Now, when it gets to module, and it
doesn't know exactly which version you want,
| | 03:16 | it gives you the option to choose.
| | 03:18 | I look down here, and I see two are
supported; I definitely want those.
| | 03:23 | But one of them has a
larger integer number here: 4.
| | 03:26 | I'm going to be a little bit dangerous,
and go with the one that's only an alpha;
| | 03:30 | that is, 7.x-4.0. Now, as it was going
along, you might have noticed that the
| | 03:35 | so-called modules actually contain several
modules, and you've seen this when you
| | 03:39 | were turning on modules
through the Web interface.
| | 03:41 | For example, the develop module
contains three: devel_generate,
| | 03:45 | devel, devel_node_access.
| | 03:48 | Ideally, I would go back through this
list, and decide which ones I wanted to
| | 03:52 | enable, if I was going to
enable them through Drush.
| | 03:54 | I'm going to do a little
trick that I like.
| | 03:57 | Very often, the name of the module that
you use to download -- that is devel, for
| | 04:00 | example -- is the main module's name.
| | 04:03 | And if you look up here, for example,
you see, yep, that's also called devel.
| | 04:07 | I'm just going to clear my screen,
hit the Up Arrow to my download, and
| | 04:12 | simply change dl to en.
| | 04:14 | Now, this won't work completely, but
it'll turn on a lot of the modules that I
| | 04:18 | want, and then I can go through the
Web interface, and go through it again.
| | 04:22 | The first thing it does is it says
that one of those modules requires another
| | 04:26 | module that we didn't download, but
it very helpfully offers to do so.
| | 04:30 | Yep, that's what we want.
| | 04:32 | It warns me what exactly is
going to enabled.
| | 04:34 | Yep, that's what I want.
| | 04:36 | And then it does it.
| | 04:38 | This may take a while.
| | 04:39 | Now let's see what it looks
like in the browser.
| | 04:41 | Instead of installing, I just go back
and take a look at the site, and log in.
| | 04:47 | But we have good news even from here.
| | 04:48 | We can see that it did in fact
give us the name that we wanted.
| | 04:51 | And as we specified, the Username
is admin, and the Password is drupal.
| | 04:57 | Now let's look at the Modules page.
| | 04:58 | Well, I know that I want
to enable the Blog module.
| | 05:02 | Under Chaos Tools, I'm
going to want the Page manager.
| | 05:05 | There's a very good chance I'll
also want Views content panes.
| | 05:09 | I just happen to know this from
having worked with Panels a bit.
| | 05:13 | I'm going to generate some fake
content, so I'll use Devel generate.
| | 05:17 | I'll need the Rules UI if I'm going to
make any rules, and I'll need the Views
| | 05:21 | UI as well, and Save configuration.
| | 05:24 | Next I'll create the
structural elements I'm going to use.
| | 05:27 | You saw that table a little bit earlier that
translates our requirements into Drupalese.
| | 05:32 | In this case, they're very simple.
| | 05:33 | I'm going to add that
position content type first of all:
| | 05:36 | Structure, Content types, Add content
type, Position, and then just take a
| | 05:42 | look at the vertical tabs.
| | 05:44 | We don't really need the author and date information,
and we don't need comments. That's good enough.
| | 05:52 | And we wanted to add a role.
| | 05:53 | We do that under People, Permissions, and Roles.
| | 05:58 | That person is content manager, move that up
above the administrator, just to be clean about it.
| | 06:04 | Usually I leave the
administrator as the last one in the list.
| | 06:08 | After all, they're the ones
with the most permissions.
| | 06:11 | But anyway, say Save order, and that
takes care of the basic things I wanted.
| | 06:15 | Now, there a lot of adjustments you'll
need to make during this whole process, and
| | 06:19 | obviously, I'm just going
glossing over some of them.
| | 06:21 | As you go through this, I recommend
that you make the changes as they occur to
| | 06:25 | you, rather than waiting until the very
end, or at the very least, you should
| | 06:28 | start a list, because
otherwise you're sure to forget.
| | 06:31 | Now we're ready to add some content.
| | 06:34 | I'm going to fill the site with
dummy text using the Devel module, because
| | 06:37 | remember, the campaign manager said
that they have all of the content;
| | 06:40 | they just need to see
what the site looks like.
| | 06:42 | I can do that with Drush, or the Web
browser interface, using the Devel module.
| | 06:46 | But because there are so many options, I
think it'll be easier to just use the browser.
| | 06:50 | So I go up to Configuration,
and Generate content.
| | 06:57 | We're not going to be using the Article,
so I'll get rid of that, but we do have
| | 07:01 | Blogs, Basic pages, and
Positions; very good!
| | 07:04 | And everything else
looks good, so I'll generate.
| | 07:06 | Now let's go back to the
front page and see how that looks.
| | 07:12 | The one strange thing is, now we have an
awful lot on our front page, but quite
| | 07:16 | honestly, that doesn't worry me, because
we're going to be replacing the entire
| | 07:19 | front page with a Panel layout.
| | 07:22 | The one view that I know that
we'll need will be of Drew's positions.
| | 07:25 | I'll just very quickly create that.
| | 07:27 | As you know, it's under
Structure, and Views, and Add new view.
| | 07:32 | It'll be Drew's positions.
| | 07:34 | Content is of type Position,
sorted by Title, let's say.
| | 07:40 | The Page title will be Andrew Paulman's positions
on the issues, and fix the URL a little bit.
| | 07:50 | Leave it as an Unformatted list for now.
| | 07:53 | Again, we can change this later.
And I'll just Create a block.
| | 07:56 | I'll do that as an HTML list, and save.
| | 08:01 | Now, I know that seemed like we
did a lot, and in fact, we did,
| | 08:04 | but right now,
the site is pretty unimpressive.
| | 08:06 | If the client were to interrupt, and
demand to see your work, it would be hard to
| | 08:10 | explain exactly what you just did,
| | 08:11 | and why it's so important.
What can I say?
| | 08:14 | I'm sorry!
| | 08:15 | That's just the way it goes.
| | 08:16 | And in fact, we'll have to go through
a few more steps before it all becomes
| | 08:20 | visible, and impressive.
| | 08:22 | First, we'll make some changes to the
site's basic design. Then we'll start
| | 08:25 | regularizing the content, and layout.
| | 08:27 | At that point,
the picture will start to emerge.
| | 08:30 | It's an iterative process.
| | 08:32 | You do a little of one thing, go
back, try again, and keep refining.
| | 08:37 | But we've built our foundation.
| | 08:39 | Now it's time to frame the house.
| | Collapse this transcript |
| Starting the design| 00:00 | Next for our campaign site comes
at the layout and design phase.
| | 00:04 | This is something that often requires
teamwork, because site building, and graphic
| | 00:07 | design take different kinds of expertise.
| | 00:11 | And we are going to rough in the design.
To actually finish it out takes a lot
| | 00:14 | of nitpicky work, but let's begin.
| | 00:17 | First thing, we need to show our theme,
which, you might remember, is Corolla.
| | 00:21 | We enabled it in the last video, but that
doesn't actually make it to the default.
| | 00:26 | Fortunately, I can do that quite
easily in the Web Browser. Just go to
| | 00:30 | Appearance, down to Corolla,
and Set default.
| | 00:37 | I'll take a look at that in a new tab.
| | 00:42 | Now, we're looking at this as an administrator
will see it. It's always wise to
| | 00:45 | look at your site as the
audience will see it as well.
| | 00:48 | In this case, that's the public,
which will never be logged in.
| | 00:51 | So I'll switch over to another browser,
and go to the site; still looks good.
| | 01:00 | Now, before going forward, I'm going to
make a subtheme of Corolla, so I can start
| | 01:04 | editing the CSS, and so forth.
| | 01:06 | Corolla is already a subtheme of
Adaptive theme, as you might remember from
| | 01:10 | earlier in the course,
| | 01:11 | so we'll follow the special instructions
particular to that starter theme.
| | 01:15 | To do so, I'll use a project called
Footheme. Switch back to my administrative
| | 01:20 | browser, and go to
drupal.org/projects/footheme.
| | 01:25 | Although we won't go into it now, there is
a lot's of documentation about Footheme.
| | 01:30 | But I'll just install it, and take
care of the important bits; paste it in.
| | 01:46 | Once installed, I have to go to my
Terminal window to make some changes.
| | 01:52 | Again, all of the details that you're
seeing now, explained in that earlier video
| | 01:56 | about Adaptive theme.
| | 01:57 | We'll also need to edit that template.php
file. Now we can enable our new theme.
| | 02:15 | I'll go back to the browser, go to
our Appearance page, and there it is.
| | 02:29 | And of course, it won't look any different,
as it's based on the Corolla theme.
| | 02:33 | As always, I want to take a look at the
site as people from the outside will see it.
| | 02:38 | So I'll go back to my browser,
and reload.
| | 02:41 | Now, as I look at this, I noticed
something else: we have this User Login block,
| | 02:46 | but we're not going to have any users.
| | 02:48 | Well, we will have users, but they will all
be campaign workers, and they'll know how
| | 02:52 | to get the login page by just typing /user.
| | 02:55 | So I'm going to remove that Login
blog by going back to my administrative
| | 03:01 | interface, and up to Structure,
and Blocks. Then go down, and save.
| | 03:15 | Now let's make some basic theme changes.
For one thing, a majority of election
| | 03:20 | campaign sites in the United
States use a dark blue color scheme.
| | 03:24 | So I'll go up to Appearance and click
my Settings, and as this is based on the
| | 03:31 | Adaptive theme, there are a
lot of settings we can change.
| | 03:33 | For example, the Fonts. I think I will
make this something a little bit more
| | 03:37 | unusual; the Segoe UI font, I think.
| | 03:41 | Look around; I could make the fonts
larger if I wanted, and so forth,
| | 03:46 | but instead, I am just going to
change that background color.
| | 03:48 | So I scroll down, I highlight the
Background, and change it to 004477; you can
| | 03:57 | see its a nice dark blue.
| | 04:00 | Scrolling down further, I am going to
remove the logo, and the shortcut icon.
| | 04:04 | We'll be doing our own things in the
header there, and I want to get rid of that
| | 04:09 | shortcut icon that right now
says A, T; and Save configuration.
| | 04:14 | Let's take another look at that. Go
to my non-logged in browser, and reload.
| | 04:19 | There; that looks a little
more distinctive,
| | 04:21 | but that header is really uninteresting.
| | 04:24 | There are several ways we can fix that.
| | 04:26 | We already removed the logo, but we
can replace it with something cooler,
| | 04:30 | and we also hide the site name,
which would be redundant to the logo.
| | 04:32 | I've already designed one, so I'm
going to go back into my administrative
| | 04:37 | browser, scroll down, and
just put it up there, and save.
| | 04:52 | Now let's see how that looks.
| | 04:54 | Pretty good, but again, we
need to get rid of this.
| | 04:57 | So I'll go back, and turn it off. There;
we're starting to get there. I think there
| | 05:11 | is a little too much room around this
up here. It's important that you guard
| | 05:14 | jealously all of the vertical space
that shows up, as they say, above the fold.
| | 05:19 | That is, when you're looking at it on a
small screen, and remember, more and more
| | 05:22 | people are looking at the
Web through portable devices,
| | 05:25 | such as tablets, and phones, so I am going
to using some CSS to get rid of some of this.
| | 05:30 | Now, earlier on, we already installed
Firebug, which you can get at getfirebug.com.
| | 05:40 | So I'll use that to figure out exactly
what CSS I want to change, then I'll go
| | 05:44 | back to the Terminal, and change it. I
invoke Firebug with Shift+Command+C on the Mac.
| | 05:49 | Let's see; that's just the logo. It looks like
there is a lot of space here, and the ID is
| | 05:58 | branding. Let's change the
padding there, and see how that looks.
| | 06:01 | I like it better already.
| | 06:11 | Good; I like that much better.
| | 06:13 | So I'll just note that it's branding,
and I am going to change the padding. I'll
| | 06:17 | copy that. So I'll go back to my Terminal,
and edit that local.css file that we
| | 06:24 | referred to in the .info file
of the theme.
| | 06:27 | Yup, looks pretty good.
| | 06:39 | I'll quit out, go back to my site,
get rid of Firebug, and reload the page.
| | 06:47 | That appears to look correct, but just be
sure, I am going to check it in Safari as well.
| | 06:53 | Looks great.
I do I mention something, though;
| | 06:56 | sometimes when you make theme
changes, they don't show up right away.
| | 07:00 | As always, it's a good idea to go to
Configuration, Performance, and clear your cache.
| | 07:10 | Well, our site still might not look like
much, but we've actually done quite a bit.
| | 07:14 | The most important part was
in creating that subtheme.
| | 07:17 | Some people get afraid to do that step,
and they do everything they can to avoid
| | 07:21 | the monkeying around that it requires,
| | 07:24 | but now we're completely free to
change CSS by editing that local.css file.
| | 07:29 | And after we make some more content visible,
the CSS changes that are necessary will
| | 07:34 | become more apparent.
| | Collapse this transcript |
| Filling in the content| 00:00 | So we now have sample content on our
site, and we have the beginnings of a design.
| | 00:06 | At this point, I'm going to go back
to our original plans, and make the site
| | 00:09 | conform to what we
want it to eventually become.
| | 00:12 | We'll start by turning some of those
randomly generated nodes into placeholders
| | 00:16 | for our actual content, and we'll add
some menu links while we're at it, but
| | 00:20 | first, let's go back and see
exactly what those pages are.
| | 00:23 | We'll come back to the homepage later.
| | 00:26 | Let's start with that Positions page.
| | 00:29 | You might remember that we have a bunch
of nodes in the position content type,
| | 00:33 | which we collected with a view in
the Implementing the Structure video.
| | 00:37 | We just need to add a menu item.
| | 00:40 | So let's go back to our site,
and take a look at that page.
| | 00:43 | The URL, as I remember,
was drews-positions.
| | 00:49 | Hover up here, and edit the view.
| | 00:51 | Go to the Menu setting, add a Normal
menu entry in the Main menu, and the title
| | 01:02 | will be Positions, and Apply,
and as usual, we Save it.
| | 01:10 | But here's something strange;
| | 01:14 | when we go back our site, it
doesn't show up in the usual place.
| | 01:18 | This is the sort of thing that
you run into when you start actually
| | 01:20 | implementing sites.
| | 01:22 | As it turns out, the Corolla theme
displays menus only through blocks;
| | 01:26 | it doesn't use Drupal's native menu
display system, and the way that you would
| | 01:29 | find this out is basically by running into
this problem, and looking through the issue queue.
| | 01:34 | But that's okay; we'll fix it.
| | 01:35 | Click Structure, and Blocks.
| | 01:43 | Then scroll down to the Main menu, and I'm
going to put that into the Menu Bar, and save.
| | 01:48 | When I close this out, the screen redraws.
| | 01:53 | I see something interesting;
it shows up above the header.
| | 01:56 | Usually the Main menu shows up below,
and if we go back and take a look at the
| | 02:01 | wireframe, the way that the campaign
manager wanted it, they wanted the Main
| | 02:04 | menu actually below the banner.
| | 02:07 | In this case, we have a choice;
| | 02:08 | we can either leave it the way it is,
and check with the client, or we could work
| | 02:12 | pretty hard to make it exactly
the way that they ordered it.
| | 02:15 | In this case,
I'm going with the first option;
| | 02:17 | I'll leave it as it is, and we'll go
back, and have a conference with the client,
| | 02:20 | and make sure that it's okay the way it
is, or change it if necessary. But let's
| | 02:24 | go back to our site map.
| | 02:26 | The next step is to put up
the blog. Well, that's easy;
| | 02:29 | all we need to do is add a menu
link to the existing blog system.
| | 02:33 | Go back to our site, and go to Structure,
Menus, and Main menu, where I'll add a link.
| | 02:45 | I'll call it Drew's views,
and the path will be blog.
| | 02:49 | I Save it, and take another look.
| | 02:59 | Well, it's not in the order I want,
but I can change that very easily;
| | 03:04 | just go up here, list the
links, and drag them into position.
| | 03:14 | As always, I want to take a quick
look at it the way that people from the
| | 03:17 | public will see it.
| | 03:18 | Yep, looks pretty good.
| | 03:21 | Continuing on, we'll handle
regional campaigns in the next video.
| | 03:25 | That brings us to Elect Drew Paulman.
| | 03:28 | It could be done in a few different
ways, but let's assume that it's just one
| | 03:31 | basic page, containing information
for both volunteering, and donating.
| | 03:36 | We could also do this as a dropdown
menu, or as separate pages, or so forth, but
| | 03:39 | we'll keep it simple for now.
| | 03:42 | There are a few ways we could do this.
| | 03:43 | We could add the content, but I think I'll
just use some of the content that we already have;
| | 03:47 | I'll repurpose it.
| | 03:48 | So I go up to Content, look for the first basic
page we have -- this Quis Te -- and I'll edit it.
| | 03:59 | And we'll make a menu link for this as well.
| | 04:05 | We look at it in our non-logged in
browser, and it looks pretty good.
| | 04:09 | Again, it doesn't have to
be perfect at this point.
| | 04:12 | Moving right along, we have these
three links at the bottom to take care of:
| | 04:16 | About us, Privacy policy, and Legal info.
| | 04:20 | There are a few different
ways that we could do this.
| | 04:22 | One of them, for example, would be to
create those three pages, and then put them
| | 04:26 | into a menu, which we put in a block in
the footer region. But instead of doing
| | 04:30 | that, I'm going to create a custom
block, and put it into the footer region.
| | 04:34 | Now, it won't look exactly right, but
again, we can change some of that later on
| | 04:38 | when we do our finishing of the site.
| | 04:41 | However, I do know that I'm
going to need those three pages,
| | 04:44 | so the first thing I'll do
is I'll create them.
| | 04:47 | Once again, I'm on the Content page, so
I'll just look for some basic pages to use.
| | 04:52 | Edit this one, and Save.
| | 05:09 | There is another, Save, and
finally, this one, and Save.
| | 05:40 | So that I can get the links to put in the
block, I'll just open those up in new tabs.
| | 05:48 | This is the section we want:
content/legal-info.
| | 05:50 | I'll then make the block, and we
remember to put it in the footer, and save.
| | 06:21 | Let's see how that looks.
| | 06:22 | Yup, it's down there. Test
the links, and they seem to work.
| | 06:28 | However, it doesn't look quite right.
| | 06:30 | As I say, we'll be coming back
later to fix up some of the CSS.
| | 06:34 | The last thing I'm going to do, and this
is really for our own benefit as we're
| | 06:37 | developing the site, is I'm going to make
what we see here match a little
| | 06:42 | bit more closely what we see as the
public. I'm going to get rid of these
| | 06:45 | administrative blocks.
| | 06:47 | Just configure the block, move it out of the
sidebar, and then do the same for navigation.
| | 06:58 | Now, you could continue in this way, and
get rid of the toolbar, and shortcut bar,
| | 07:09 | but I'm okay with this the way it is.
| | 07:13 | It's starting to look
like a real site, isn't it?
| | 07:15 | Now comes the quantum leap stage, where
we arrange the pieces we've developed so
| | 07:19 | far into something resembling
the final layout.
| | 07:23 | We'll still have a way to go, but
the next part is the one I always find
| | 07:26 | the most encouraging,
| | 07:28 | so stick around.
| | Collapse this transcript |
| Developing the layout| 00:00 | For the next step of our campaign site,
we are going to go back and look at the
| | 00:04 | wireframes that we
originally developed with the client.
| | 00:07 | Here's the one for every inside page;
that is, every page except the front page.
| | 00:12 | And then here's what we have
on the front page.
| | 00:14 | You will notice that there are
quite a few elements in common.
| | 00:17 | We already have the banner up there, and the
main menu, and we also have the footer menu.
| | 00:22 | However, there are three pieces that are the same
between the two of them that we don't have yet.
| | 00:27 | There is to get involved block in the upper
right, the candidate picture, and the blog feed.
| | 00:33 | Let's start with that get involved block first.
| | 00:35 | I have already prepared a graphic and
I know it has to be in a block, but you
| | 00:39 | can't upload graphics directly to a block.
| | 00:42 | However, I have a trick.
| | 00:44 | I am going to go back to our site, and
create an article. Click Add content, and Article.
| | 00:53 | The reason I'm using an article is
because, by default, it lets you add a graphic.
| | 00:58 | So I am just going to call this JUNK;
it's the Call to action block. And before I
| | 01:04 | forget, I'm going to unpublish this node;
I don't want this to be available, just
| | 01:08 | the graphics that it contains.
| | 01:10 | I don't have to put anything into
the body, I don't need any tags, but it
| | 01:14 | will upload my graphic.
| | 01:23 | And then I'll Save, and there it is.
| | 01:30 | The next step is to figure out what the URL
is for that graphic, and stick it into a block.
| | 01:35 | So I just right-click here,
open it up in a new tab,
| | 01:39 | and there's my path.
| | 01:40 | I will copy it, then go back to
my site, and create the block. Click
| | 01:48 | Structure, Blocks, and Add block.
| | 01:53 | It will be the Are you for Drew?
promo block.
| | 02:01 | In the body, we'll put that graphic
linked to the page that it's going to go to.
| | 02:05 | Now, we didn't get that link yet, so I
will go back into my Content and find it.
| | 02:09 | I will Command+click on Content on the
Mac, so that I can see exactly where it is.
| | 02:16 | And there is the page that we want:
| | 02:18 | Let's get Drew elected!
| | 02:20 | Open that up,
and there's the URL that I need.
| | 02:23 | Okay, now it gets a little bit tricky,
because Drupal is a little strange about
| | 02:26 | whether to include this
leading slash or not.
| | 02:29 | One thing we could do is to include
the entire http, but that's kind of
| | 02:33 | wasteful; it means that you're going to
be looking up the domain name every time
| | 02:36 | somebody clicks on that graphic.
| | 02:38 | So I will play around with it a bit,
maybe I'll get it right; we'll find out.
| | 02:41 | But let's go back and edit that block.
First, I will copy this path here.
| | 02:46 | And you know what? I think I
will try it with the leading slash.
| | 02:56 | Write a little HTML, and then be sure
that you have the text format that allows
| | 03:14 | whatever HTML you use.
| | 03:15 | We need the a, and image source;
| | 03:17 | it's not in Filtered,
so I will make it Full.
| | 03:21 | And then finally, I'll put it in the
Header region, scroll down, and save.
| | 03:25 | Now we will go back to the
non-logged in browser, and reload.
| | 03:31 | Well, the block showed up; that's good. Let's
click it, and make sure it goes to where we want.
| | 03:36 | Yup! It does.
| | 03:39 | Click on a few other pages just
to make sure that it's consistent.
| | 03:42 | One issue that I had when I tried this
before is, I left out the leading slash,
| | 03:46 | so it worked on every page, except
when I went into a content page.
| | 03:49 | So basically, when I clicked on this, it added
the content part of the URL, and it disappeared.
| | 03:55 | Those things are kind of hard to debug, but
that's all part of the site building process.
| | 04:00 | So it's where we want it, but it's got
way too much space around it, just as the
| | 04:04 | header that we added earlier did.
| | 04:06 | Well, we can fix that with some CSS.
| | 04:08 | As usual, I would go into Firebug,
and I am firing that up by using
| | 04:11 | Shift+Command+C on the Mac. Then I hover
over it, and I play around a little bit;
| | 04:17 | figure out which one of
these is responsible.
| | 04:19 | I'll save you the time.
| | 04:20 | I actually have figured that out
already, and I will go in and paste that
| | 04:23 | into the local.css file.
| | 04:26 | I go into my CSS folder, which you
might remember is in sites/all/themes, the
| | 04:32 | name of the theme, which is
paulman/css. Then I just nano local.css.
| | 04:39 | I have already copied the text that I
need, so I will just put it in there.
| | 04:44 | Again, the way you will figure this
out is with Firebug, and then you will
| | 04:47 | implement it using
whatever CSS tricks you have.
| | 04:51 | As always, I recommend the CSS courses
on lynda.com. Save it out, go back, and
| | 04:57 | take another look. Close out
Firebug, and reload; much better.
| | 05:03 | So that's one down, only two to
go, but don't worry; the other two
| | 05:07 | are comparatively easy.
| | 05:09 | The next thing up is the
candidate's picture.
| | 05:13 | I will use the same technique for this.
| | 05:15 | I am going to create a JUNK node,
and attach the picture to that.
| | 05:18 | That's just to get it on the server.
| | 05:19 | Of course, I could upload it directly as well.
| | 05:29 | Scroll down, once again, I choose an
image I have prepared. You, of course, will
| | 05:34 | use whatever images you're
going to put on your site.
| | 05:41 | Now we are ready to save it, but
before we do, remember to unpublish it;
| | 05:44 | otherwise, people might start coming
across your JUNK nodes. Click on Published,
| | 05:49 | doesn't matter if it's promoted, or not since it
doesn't appear, and click Save. And there we are.
| | 05:57 | Then, again, I am going to open that
up in a new tab, and copy the URL.
| | 06:02 | There is one thing I want to mention,
and you notice this when you look at the
| | 06:05 | URL; that it computes the large size.
This is what the image styles that are
| | 06:10 | built into Drupal, and that are
implemented in the Article Content type.
| | 06:15 | The original graphic, however,
was much larger.
| | 06:18 | If you wanted to use the original
graphic, you would have to go into your file
| | 06:21 | system, and figure out where it put it;
somewhere inside sites/default/files,
| | 06:26 | and then just write the URL for that.
| | 06:28 | This is just a shortcut that I like
to use, but of course, you'll find your
| | 06:31 | own style as you go.
| | 06:33 | In any case, I copy that, go back to
my site, and create the block, under
| | 06:37 | Structure, and Blocks.
| | 06:41 | Add the block, and a description.
| | 06:54 | In this case, it doesn't link to
anything, but I still need Full HTML,
| | 06:59 | and I will put that in the second
sidebar. Go back to my
| | 07:06 | non-logged in browser and
take a look. Pretty good!
| | 07:11 | Finally, we'll go back to our wireframes,
and see the last part; that's this blog feed.
| | 07:16 | It's an easy one to implement,
because it comes built-in with Drupal.
| | 07:19 | If we look in our Blocks, we see Recent
blog posts. I will just stick that in
| | 07:27 | Sidebar second, and save,
and see how that looks.
| | 07:36 | Well there it is, but as you can tell, it
doesn't look quite right; the CSS is all wrong.
| | 07:41 | But again, we can fix that later in one go.
| | 07:43 | As for the content, we can
do even better using a view,
| | 07:47 | so I will just set that up very quickly.
| | 07:49 | Go to Structure, and Views,
and add a new view.
| | 08:02 | This is the important part:
| | 08:04 | we want the path of the page to
override the existing blog module,
| | 08:09 | so we just type in blog, which is what
the blog module uses. That looks good,
| | 08:15 | but the important part is to
create a block to replace that one.
| | 08:18 | It'll be an HTML list of linked titles,
and I think I will make this even more
| | 08:27 | fancy by adding a date field. I made
that change, and then go down, and finally,
| | 08:56 | I will add a More link
to that block, and Save it.
| | 09:11 | To make the change on the page so we
can see it, of course, we have to replace
| | 09:16 | this block with that one.
| | 09:17 | So we will go to Structure,
and Blocks, and make the switch.
| | 09:24 | Scroll down, I made that change;
| | 09:42 | now let's see how it looks.
| | 09:45 | Well, we still have the CSS problem,
but it's a much more functional block.
| | 09:49 | We can have our own title, and we have this
post date right here. I like that a lot better.
| | 09:55 | And that actually takes us to
the end of our basic Wireframe.
| | 09:59 | To be sure of it, let's look at it
as we see the site from an anonymous
| | 10:02 | user's point of view. Yup!
| | 10:08 | There's our header, there is our call to
action, the picture, the blog posts, and
| | 10:12 | the content, exactly as we
have here on the Wireframe.
| | 10:16 | Now, you might remember, we had two
wireframes: one for the inside pages, and
| | 10:20 | one for the front page.
| | 10:21 | This procedure covers all of the
sections, except the front page,
| | 10:25 | so that's the thing we will attack next.
| | Collapse this transcript |
| Finishing the layout| 00:00 | Now that we have the basic layout down,
let's move from the main wireframe to
| | 00:04 | that all-important front page.
| | 00:07 | There are really only two differences
between the designs of the front page and
| | 00:11 | the rest of the site:
| | 00:12 | there is the statement up here, and then
these positions down here. All the rest
| | 00:17 | remains the same, as you can see
when we move from one to the other.
| | 00:20 | I'll start with this collection of four
of our candidates' positions down here.
| | 00:25 | You might remember, we stored those as nodes,
and we already collected them into a view.
| | 00:30 | We can see that current view by
clicking Positions on our site.
| | 00:34 | So all we need to do now is to add a display
to that view, so it shows up in a grid format.
| | 00:40 | We go down here, and edit the view.
| | 00:44 | I'll add a page display.
| | 00:47 | Incidentally, we could make this a block
display, or a content pane; I like doing
| | 00:50 | it as a page, for reasons
you'll see in a moment.
| | 00:53 | I'll change that name to Front page, so
that it's distinguished from the other
| | 00:57 | page, and I'll change
the format into a grid.
| | 01:03 | When you do this, remember this pop-up;
you want to override, otherwise you'll
| | 01:07 | change all of the displays into
grids. And it'll be a two column grid.
| | 01:18 | For the page's path, we're going
to just say front-page-positions.
| | 01:26 | Finally, scroll down a
little bit, and change the pager;
| | 01:29 | we only want to show specified number,
that is, four of these on the front page.
| | 01:34 | So display a specified number of items,
remember to override, and the number is 4.
| | 01:43 | Finally, we do want a more link, so that
when people see those four, they can then
| | 01:47 | click more, and see all of the positions;
override, and create more link.
| | 01:53 | Let's Save, and take a look at that.
| | 01:58 | Go to the URL we created,
front-page-positions, and there it is.
| | 02:07 | It looks pretty good, but I do notice
one strange thing when you compare one of
| | 02:11 | the shorter positions to the longer one:
| | 02:13 | as you can see, its center-aligning
vertically, and I'd rather have them align to
| | 02:17 | the top, so that
all of the titles line up.
| | 02:20 | To do that,
we'll have to change the CSS.
| | 02:22 | So I go into my Terminal
program, and I go down to the CSS.
| | 02:27 | I happen to remember that it's in sites
/all/themes/paulman/css, and there
| | 02:34 | is a local.css file.
| | 02:36 | I edit it, and add the CSS.
| | 02:41 | I've already figured out what it
should be, so I'll just type it in here, and
| | 02:45 | I'll write that out, and reload my page
to make sure it took. Yup, looks good.
| | 02:52 | So that's the first part, the view, but
remember, we still have the statement up here.
| | 02:58 | There are several ways we could mix
this together. We could create this as a
| | 03:01 | node, we could go back into our view, and
put the statement above it as a header,
| | 03:05 | we could create a block, and put it in
the main content area, but I'm going to do
| | 03:09 | it by creating a panel page.
| | 03:12 | First, I need to create that statement.
| | 03:13 | So I'll go back to the site, take a
look at what content I have, and change one
| | 03:18 | of those nonsense basic
pages to be my statement.
| | 03:25 | There's one; click edit.
| | 03:27 | Now I'm just going to change
the title to How DREW helps YOU.
| | 03:34 | Scroll down, and that doesn't have to be that
long; I'll get rid of some of it, and Save.
| | 03:41 | Now we're ready to put it
all together inside a panel page.
| | 03:47 | To do so, go up to Structure, and Pages,
and then I'm going to add a new page.
| | 03:55 | It will be the Front page with
positions. I'll just make up a path;
| | 04:06 | it really doesn't matter, because we're
going to make it the home page, and you do
| | 04:12 | that here with
Make this your site home page.
| | 04:16 | We don't need any of the
optional features, so click Continue.
| | 04:20 | Now you're back to the manner of
building pages that you're familiar with.
| | 04:23 | I'm going to build it, we don't need any
special CSS, and we're on to our layout.
| | 04:33 | Earlier in the course, you saw how to
use the layout designer to add columns, and
| | 04:37 | all that sort of thing, but we're
actually just going to put two things in, and
| | 04:40 | it's going to be one on top of the
other, so a one column format is just fine.
| | 04:45 | We Add content, and we'll start with
that node; click Existing node, and do a
| | 04:50 | search for it up here: How
DREW helps YOU, and there it is.
| | 04:55 | Select it. Let's only show the teaser
on the front page. We could make it the
| | 05:00 | full content, or other things, but
let's start with the Teaser. and Finish.
| | 05:05 | Then we'll add the view.
Add content, and Views.
| | 05:12 | We wanted Drew's positions, and remember,
we created a new display, so there it
| | 05:17 | is: Front page display, and Continue.
I'll leave the defaults to see how this
| | 05:21 | looks, and click Finish, and
once again, I click Finish.
| | 05:27 | Now, be careful at this point when
you're building panels; many is the time that
| | 05:30 | I've gotten to here, and I've said,
oh great, I'll take a look at it,
| | 05:32 | and I've gone away from this page, and
lost everything I did. You also have to
| | 05:36 | save, either with Update and save, or Save;
| | 05:39 | I'll say Update and save.
| | 05:42 | Now I can take a look at it.
| | 05:43 | Close out my overlay, click on the heading
here, and see how it looks. It's not bad.
| | 05:53 | We have our statement right up here, we have
the positions, and they're correctly aligned.
| | 05:59 | There are still a couple
of things to fix, though.
| | 06:01 | First of all, I'm not so
sure I like this Read more;
| | 06:03 | I really do want to see the
whole thing here.
| | 06:05 | Also, we don't need to
see Home up here, certainly,
| | 06:09 | so I'll go back in and edit the panel.
| | 06:14 | We change the title by simply saying No
title here, and once again, I'll Update
| | 06:19 | and save to be sure.
| | 06:20 | Ah, that solved the one problem.
| | 06:24 | Second, we'll make it so
this shows the full node.
| | 06:26 | Go into panel again, and
edit the settings on this node.
| | 06:32 | I change the Build to Full
content, and Finish; once again, save.
| | 06:46 | Now it looks the way that we want.
| | 06:48 | To be sure, I'll switch over to my
non-logged in browser, and take a look.
| | 06:52 | It looks pretty good, but as you can see,
we still have some CSS problems over
| | 07:02 | here, and also in the bottom of the page.
| | 07:06 | I'll fix those in the next video.
| | Collapse this transcript |
| Refining the CSS| 00:00 | When last we left off, we had just
finished our home page, but we still have a
| | 00:04 | few CSS errors that
show up throughout the site.
| | 00:07 | If we scroll down, you see them immediately.
| | 00:10 | This blog posts here is
this low contrast blue on blue.
| | 00:14 | Down at the bottom, we have
the same problem in the footer.
| | 00:17 | There are literally dozens of
ways we could fix those using CSS.
| | 00:21 | In this case, I'm going to go for one
that's really kind of quick and dirty,
| | 00:24 | but completely valid.
| | 00:26 | First, I'm going to go over to
Firefox, and bring up Firebug.
| | 00:31 | As I look around the site, I know that
I want this block to have the same sort
| | 00:35 | of background as this one here;
the main area.
| | 00:38 | So I click it, and I see that
it's the div content-style.
| | 00:42 | So I want to apply that div to both the
view that's over here, because this is a
| | 00:47 | view, and the two blocks at the bottom.
| | 00:50 | By the way, if you need to figure out
whether something's a view, or blocks,
| | 00:53 | or anything like that, just go back
to administrative interface, and click
| | 00:57 | the contextual menu. I see, ah!
| | 00:59 | It's a view, it's contained within a block,
whereas these are just simply blocks. So let's go.
| | 01:09 | I'm going to start with this one here;
the block. Configure the block, and then
| | 01:16 | I simply add the div.
| | 01:17 | Now, when you do that, make sure
that you're showing Full HTML;
| | 01:30 | otherwise, it won't show up.
| | 01:33 | Go down, and save, and take
a look at it. Scroll down.
| | 01:39 | Well, it did work,
but it's really, really tall.
| | 01:42 | So let's go back into Firefox
and take a look at that CSS.
| | 01:46 | Reload the page, bring up Firebug,
and let's take a look at that div. Ah!
| | 01:56 | We have the content-style here,
and you notice it has a min-height.
| | 01:59 | I'm going to change that to 0, and
see if that fixes it. And indeed it did.
| | 02:05 | So we just have to fix the
CSS in our local.css file.
| | 02:09 | I go to my Terminal, I'm already in
that directory, and I edit that file.
| | 02:15 | Go all the way to the
bottom, and add the line I need.
| | 02:30 | Write it out, and see if that
worked. And indeed it did.
| | 02:42 | Now, we could simply apply that same
style to this Powered by Drupal at the
| | 02:45 | bottom, but I'm going to do
something a little bit different.
| | 02:49 | Instead, I'm going to move that Powered
by Drupal up here into the rest of the
| | 02:52 | information in this other block.
| | 02:55 | So I go back to my administrative
interface, I go down to that Powered by Drupal
| | 02:59 | block, and I'm just going to hide it.
| | 03:03 | Change it from Footer, to None.
| | 03:11 | Then edit this block.
| | 03:12 | If we reload the page,
we'll see the CSS, by the way;
| | 03:15 | we hadn't done that before.
| | 03:37 | Scroll down, and save.
| | 03:45 | When you make HTML changes, by the way,
it's not a bad idea to test the links, so
| | 03:48 | let's just test all
four of those and make sure.
| | 03:50 | Yep; About us, Privacy policy,
Legal info, and Drupal. All good.
| | 03:58 | The last part is to edit this view,
so that it has the CSS that we need.
| | 04:05 | I edit it, and then open
up the Advanced area here.
| | 04:10 | Underneath Other, we have CSS class,
and I'll change it, again, only for this
| | 04:16 | display, so that it's content-style.
Apply, Save, and check it out.
| | 04:31 | Well, it looks good there, but we
have this outside of the block here.
| | 04:35 | These are the little niggling things
that you find when you start to edit the
| | 04:38 | CSS, and views, and so forth,
but we can fix this.
| | 04:41 | First, we go back to Firebug to see
exactly what it is that we're looking at.
| | 04:52 | And apparently,
it's this block-title class.
| | 04:56 | I'm going to just copy
that entire section here.
| | 04:59 | Then I'll go back and edit the view again.
| | 05:06 | I'll bring it inside the
block by adding it to the header.
| | 05:11 | As always, we want to make sure it's only on
this block, and it's going to be a text area.
| | 05:20 | Paste it in, make sure
that it's Full HTML, and save.
| | 05:25 | Then, of course, we want to remove
the title that's outside of the block.
| | 05:37 | Now let's Save, and see how
that looks. Much better.
| | 05:42 | And if we go to our non-logged in
browser, just to be sure, we reload; now the
| | 05:49 | page looks pretty good.
| | 05:52 | We have our view over here, and down at
the bottom, the footer looks as we wanted.
| | 05:57 | At this point, your site is truly functional.
| | 06:00 | Now, we could keep improving the CSS,
but remember, our campaign manager told us
| | 06:05 | that there's someone on the
campaign staff who can do that.
| | 06:07 | You have to be careful not to go down
rabbit holes, so to speak, chasing after
| | 06:12 | that last bit of perfection.
| | 06:13 | But we're not quite done with the site,
because we also promised them two more features.
| | 06:18 | One is a way for regional offices to
stay in touch, and we said we'd give them
| | 06:22 | some social media functions.
| | 06:24 | More importantly, we haven't taken
care of some important backup and
| | 06:27 | security procedures.
| | 06:29 | So we'll do all that in the next few videos.
| | Collapse this transcript |
| Setting up sections for regional offices| 00:00 | You might remember that our original
spec for the site included a private area
| | 00:04 | for campaign workers to
organize regional offices.
| | 00:07 | We could have worked in this functionality
earlier, but I wanted our design to
| | 00:11 | be solid before we attacked it.
| | 00:13 | Now that it is,
let's give those groups a shot.
| | 00:16 | Everything you see in this video can be
found in the section, Making Your Site
| | 00:19 | More Social, earlier in the course.
| | 00:22 | We'll implement that functionality using
organic groups, which we already installed.
| | 00:26 | We just need to turn on
a few more modules in it.
| | 00:29 | Go to Modules, and down to
the Organic Groups collection.
| | 00:33 | Here we turn on Organic groups access
control, Organic groups context, Organic
| | 00:39 | groups field access, and
Organic groups UI, and then save.
| | 00:47 | As is usual when you turn on
certain organic groups modules, you have to
| | 00:51 | rebuild the permissions.
| | 00:56 | The next thing I'll do is to create a
content type called Campaign office.
| | 01:00 | We''ll go in to Structure, and
Content types, and Add content type.
| | 01:15 | We'll make it a Group, and just
change a few other small settings.
| | 01:19 | We don't need any commenting, and we
don't need to show the author and date
| | 01:23 | information, and save.
| | 01:27 | Now we add our first office;
| | 01:28 | Add content, Campaign office, scroll down,
and so it's easy to access, I'll put
| | 01:41 | that in the main menu,
and Save. There it is,
| | 01:48 | and as usual with organic groups,
it doesn't look like much at first.
| | 01:51 | So we have to decide what
goes into a Campaign office.
| | 01:54 | Now, we didn't talk about
this with the campaign manager,
| | 01:58 | so just to get them started, I'll
set them up so that they can see basic
| | 02:01 | pages and forums there.
| | 02:02 | I edit the Content type, basic page, go
down to the Group tab, and turn it into
| | 02:14 | Group content type, and save.
| | 02:17 | So that we have something to play with in
that group, I'll add a basic page to it.
| | 02:25 | Now, as you know, when we go to look at
that group, we won't see that information
| | 02:29 | until we build a panel that
includes it within the group itself.
| | 02:33 | Once you've turned on forums, you have
to go back and edit the content type, so
| | 02:37 | that it too is a Group content type.
| | 02:45 | Go down to the Group tab,
and Group content type.
| | 02:50 | And as with the basic page, I'll add
a test forum post, and add it to our
| | 02:57 | Headquarters, and Save.
| | 03:01 | Now we use the views and
panels to bring it all together.
| | 03:05 | First, let's go back to our Headquarters,
so we can see what we're doing,
| | 03:11 | and we create the panel.
| | 03:12 | Go to Structure, and Pages,
and Enable the Node template.
| | 03:20 | Then we go down and Edit
it, and Create a variant.
| | 03:27 | It'll show up whenever the Node type
is a Campaign office, and we need that
| | 03:35 | relationship that
connects the node with the group.
| | 03:41 | We don't need any special CSS, and we'll get
the title of the page from the pane itself.
| | 03:49 | In other words, the Headquarters
page will say Headquarters at the top.
| | 03:53 | Now, when we looked at the node before,
we saw the subscription link, and the title,
| | 03:56 | and so forth, but when we create a
panel that takes the place of that node, we
| | 04:00 | have to re-add that important group stuff,
| | 04:02 | so let's add it now.
| | 04:08 | First, we want the Node content;
click the Node group, and there it is.
| | 04:13 | I'll leave everything as it is,
but change the Build mode to Full.
| | 04:21 | Let's see what it looks like so far.
| | 04:23 | We create the variant,
and remember to save.
| | 04:29 | Now, when we close out of this window, let's
see what our Headquarters page looks like now.
| | 04:33 | It looks pretty much the same, but
remember, this is a panel, and now we can
| | 04:37 | start building on it.
| | 04:39 | Even though it doesn't look as though
we've done much, we've set the foundation
| | 04:43 | in organic groups for all of the
regional offices that we'll have in the site.
| | 04:47 | In the next step, we'll finish the
job by adding the content to that panel,
| | 04:51 | including a view that we'll create.
| | Collapse this transcript |
| Configuring regional offices| 00:00 | In our last video, we did the basic
configuration for these regional offices.
| | 00:05 | We also put in the basic
information into the panel that we created.
| | 00:09 | Now let's add a view to show active
forum topics for that office, as well as any
| | 00:13 | other information we want the office to see.
| | 00:16 | To do that, we go up to Structure, and Views.
| | 00:21 | You might remember that organic groups comes
with this OG content; I'm going to clone that.
| | 00:29 | I'll call it Active forum
topics within this office.
| | 00:39 | You might remember, we have to make
one small change so that it matches up
| | 00:42 | with organic groups.
| | 00:43 | Change this Contextual Filter so that
it has the default value of the Current
| | 00:51 | OG group, then apply.
| | 00:53 | I want the view to be flexible so
instead of showing all Content, I'll show
| | 00:59 | Fields, and then start adding my fields.
| | 01:04 | Let's see; we want the title of the
forum post, and then the last comment author,
| | 01:22 | and last comment time.
| | 01:34 | Turn it into a Table, and
make everything Sortable,
| | 01:43 | the default sort being the last
comment time, so people see the most recent
| | 01:47 | comments at the top.
| | 01:51 | Finally, I'll make the title
Active discussions.
| | 02:00 | Since we have that clicked sorting, I
can remove the Sort Criteria in here,
| | 02:10 | and then Save it all.
| | 02:12 | Now, we might have to make other
adjustments, but this will get us started.
| | 02:16 | Now I'll create one more view by cloning this
one, to show what all of the basic pages are.
| | 02:23 | Go up to clone view, and say
About this campaign office.
| | 02:29 | This will contain all of the basic
pages related to this campaign office.
| | 02:36 | And then I'll add a filter criterion,
and actually, as I do this, I realize I
| | 02:39 | forgot to do that for my forum, so
I'll go back and do that in a minute, but
| | 02:43 | here, I want to show only
basic pages. So that's Content:
| | 02:47 | Type, and it should only be basic pages.
| | 02:55 | I'll remove all the fields but the
title, and again, this is something I came to
| | 03:01 | by playing around a little bit, and
you'll probably have different choices when
| | 03:04 | you build your site.
| | 03:07 | And I'll add the body,
but just the short form.
| | 03:10 | And the title will become Important things
you should know about this office, and Save it.
| | 03:27 | Then I'll go back to that forum view,
and add the filter that I forgot to
| | 03:30 | add before; Active forum topics within this
office, but as you can see, it's an ordinary view.
| | 03:35 | You saw how to edit these
in my course Drupal 7:
| | 03:38 | Reporting and Visualizing Data.
| | 03:41 | Filter it so it only shows forum
topics, apply, and Save once again.
| | 03:45 | So we now have two views,
which I'll add to my group panel.
| | 03:49 | Close out this window, and do so.
| | 03:52 | We click in the contextual menu to
edit the view, and add the content.
| | 04:01 | And as usual, Update and save.
| | 04:04 | We cross our fingers, and there it is.
| | 04:07 | It actually looks exactly as we wanted.
| | 04:10 | So we actually have a really good
setup now for all of these regional
| | 04:13 | offices, but there's one more thing that we
haven't done yet, which is to make them private.
| | 04:18 | The good news is that we're not opening
up site membership to the entire public,
| | 04:21 | so we can assume that all authenticated
users should be able to join these
| | 04:25 | campaign office groups.
| | 04:27 | There are two ways of doing this.
One is to make the whole group private,
| | 04:31 | which means that visitors can't
even see the group. Then only a group
| | 04:35 | administrator can subscribe people;
that is, someone can't join an office, and
| | 04:38 | subscribe themselves.
| | 04:40 | The other way is to keep the group
visible, but hide the content from nonmembers.
| | 04:45 | I'm going to take the second route,
because it means that campaign workers can
| | 04:49 | go and find those offices, but they
can't see all the details of what's
| | 04:52 | happening in them
until they join the group.
| | 04:54 | To do that, we go up to Configuration,
and Organic group field settings.
| | 05:02 | We'll add a bundle to the Campaign
office, which is Group visibility, and then
| | 05:14 | we'll add another bundle to Basic page.
| | 05:19 | This one, however, is Group content
visibility, and we'll do the same thing
| | 05:23 | with the Forum topic.
| | 05:31 | Then we'll go into the content
types, and change the default values for
| | 05:35 | those visibility fields.
| | 05:36 | This is how we're able to show some
parts of the group, but not others.
| | 05:39 | Go to Structure, and Content types, and
then manage fields, within Campaign office,
| | 05:48 | and edit that field; Group visibility.
| | 05:50 | Now remember, we want the Campaign
office itself to be visible, so we leave it on
| | 05:56 | Public, and save. Then we do the same
for the content within that group; the
| | 06:00 | basic page, and the forum.
| | 06:10 | But in this case, it is Group content
visibility, and we want the default
| | 06:15 | value to be Private.
| | 06:21 | Now, just to bring ourselves up to
date, I'm going to fix the nodes that
| | 06:24 | we already created.
| | 06:28 | I'll open those up in tabs by
Command+clicking, and then edit them.
| | 06:34 | This content should be
Private, as should the forum post.
| | 06:43 | We can see how this works by going back
to our other browser, and reloading that
| | 06:46 | Headquarters page, and as you can see,
we can still see the page, but because
| | 06:50 | we're not a member of the group, we don't
see the content; it's all working as we
| | 06:54 | wanted, and there we go.
| | 06:57 | We just implemented a feature that's
really, really hard to do in most other Web
| | 07:01 | platforms, and we had a lot of control.
| | 07:03 | For example, the way we did it allows
office staff to make certain group related
| | 07:08 | pages and forum topics public,
while keeping others private.
| | 07:11 | With so many options, you'll need to
stay in constant contact with the clients
| | 07:15 | to be sure that you're giving
them exactly what they want.
| | Collapse this transcript |
| Connecting to social media| 00:00 | Let's take a look back at the
features that we promised our client.
| | 00:04 | We have the document library; those
are those positions that we have on the
| | 00:07 | front page, and separated out
into a separate page as a view.
| | 00:11 | We have regional campaign subsections;
| | 00:13 | it was a bit of a bear to set up, but
they're there. And we have that Help out
| | 00:16 | info on a separate page.
| | 00:18 | We could make that more fancy with
Drupal commerce integration, and PayPal links,
| | 00:22 | and so forth, but the basic stuff is there.
| | 00:25 | However, we don't have Facebook
integration, or social media hooks yet.
| | 00:29 | Now, I talked about Facebook logins
earlier in the course, and in this case, we
| | 00:33 | simply don't need them, because the
public doesn't have any kind of login
| | 00:35 | capability on this site.
| | 00:37 | But I still want to have social media
hooks, so that people can spread the Drew
| | 00:41 | Paulman love on their
social networking sites.
| | 00:44 | For that, we'll use the
lightweight AddThis module and service.
| | 00:48 | We installed it when we first created
this site, however, I want to point out a
| | 00:52 | trap that's very easy to fall into.
| | 00:54 | You'll find it in the Fields group.
| | 01:00 | We only turned on the AddThis
module, but you actually need both this,
| | 01:04 | and AddThis Displays.
| | 01:05 | So I'll turn that on, and
click Save configuration.
| | 01:09 | Otherwise, you can connect to AddThis,
but you can't actually do anything with it.
| | 01:14 | We then configure AddThis as it
appears throughout the site by going up to
| | 01:18 | Configuration, and AddThis.
| | 01:20 | Now, you don't need a ProfileID for the
button, but I'm going to use it, since
| | 01:26 | we're going to be doing
some tracking and statistics.
| | 01:29 | So I'll enter it in here. I've
already signed up at AddThis.com.
| | 01:32 | I'm going to make a
couple of other small changes.
| | 01:36 | First of all, under Additional Configuration,
I'm going to make this 508 compliant.
| | 01:40 | That has to do with making the site
more accessible to people with visual
| | 01:44 | difficulties, and so forth, and since
it's common in government sites, I figure
| | 01:47 | it's good for a campaign site as well.
| | 01:49 | I'll also turn on Analytics.
| | 01:52 | So Track clickback,
and go down and save.
| | 01:58 | Now we decide what kind of contents
we want people to be able to share.
| | 02:01 | Certainly, they should be able to
share Drew's positions, and blog posts, and
| | 02:05 | maybe basic pages as well.
| | 02:07 | Those settings are in the content types.
| | 02:10 | Let's start with the
positions, and blog posts.
| | 02:12 | Go up to Structure, and then Content
types, and then we'll edit the Position
| | 02:21 | content type, by clicking manage fields.
| | 02:29 | You create a field in the normal way,
but now we'd just select AddThis here, and
| | 02:33 | Save, and click through
the remaining screens;
| | 02:36 | there aren't really any
other settings for it.
| | 02:41 |
| | 02:43 | Once you've done that, though, you have
to change the way that it's displayed.
| | 02:47 | So go up to Manage Display, to AddThis,
and change the format to either Basic
| | 02:52 | Toolbox, or Basic Button,
and that's fine for us.
| | 02:56 | I am going to put it both on the
full node, and also on the Teaser.
| | 03:00 | So I have to do the same thing on the Teaser.
Make it visible, and Basic Button, and save.
| | 03:13 | Now let's take a look at what that gets us.
| | 03:20 | As we scroll down to our positions, we
now see that AddThis button, but we could
| | 03:25 | do some more configuration here.
| | 03:27 | Right now, when someone wants to share
something, they click More, and they get
| | 03:30 | this overwhelming list of over 300
different places that they can share it.
| | 03:34 | So I'm going to click here, and narrow it
down to the ones that we know are popular.
| | 03:38 | Go to AddThis, down to Enabled Services,
then I'll just choose Google, Twitter,
| | 03:46 | and Facebook, and save.
| | 03:51 | Close that out, and test it.
| | 03:54 | Yup; so far, so good.
| | 03:58 | Now remember, we don't know what that's
going to look like from somebody who's
| | 04:01 | not logged into the site, and
that's going to be the entire public.
| | 04:05 | I switch to another browser,
where I'm not logged in, and reload.
| | 04:07 | Yup, seems to work just fine.
| | 04:14 | Then, if I wanted, I could do the
same, for example, for blog posts.
| | 04:18 | Go back to my administrative interface,
go to the Content type for blog posts,
| | 04:27 | add that field; since we already added it,
we could just use Add existing field,
| | 04:34 | change the display, and we're golden.
| | 04:41 | It's funny what clients appreciate, and
how the size of their love often doesn't
| | 04:44 | match the size of the effort required.
| | 04:47 | This two minute process
will pay off big for them.
| | 04:50 | Now, while we're at this, we could
have done a lot more; adding links to the
| | 04:53 | campaign's Facebook, and
Twitter pages, and so forth.
| | 04:57 | Social media is a big subject, and
at this point in developing the site,
| | 05:01 | I'd want to talk further with the campaign
manager before implementing anything else.
| | 05:05 | It's easy to go overboard, and sometimes
a light touch is just what's needed.
| | Collapse this transcript |
| Cleaning up| 00:00 | At this point, we've technically given
our client exactly what it asked for.
| | 00:04 | There is an online place to put their
campaign stuff, a way for campaign offices
| | 00:08 | to communicate, and
some social media widgets.
| | 00:11 | This is where some developers leave off,
and that's too bad, because we left
| | 00:15 | some ragged edges on the
site. We can do better.
| | 00:18 | Let's look at the site for the bits
that we can trim, tighten, and sand down.
| | 00:23 | Now, while I was building this
site, I kept a list, and here it is.
| | 00:26 | I've found it's a good idea to
have something offline like this.
| | 00:30 | I try to keep a pad of paper nearby
when I'm putting together a site. So often
| | 00:34 | I'll start doing something, which will
lead to a different task, and branching on
| | 00:38 | and on, until I forget to
finish the original activity.
| | 00:41 | Anyway, there's no need to study this
particular list. I'll just take each step in turn.
| | 00:46 | First, fixing Pathauto URLs for groups,
and here's the issue I want to address:
| | 00:52 | when we go up to the Headquarters,
you will notice that the URL is
| | 00:57 | /content/headquarters. I don't really
need that content, because people won't
| | 01:01 | think of a group as being content, per se;
technically, it's a content type, but
| | 01:05 | you understand what I mean.
| | 01:07 | We can change that easily by going
to Configuration, URL aliases, and Patterns.
| | 01:18 | Then I'll just go down to Campaign
office paths, and change it so it's a little
| | 01:22 | bit different from the default one;
I'll just take out the content, and save.
| | 01:36 | Then I'll delete the content
aliases, and Bulk Update them.
| | 01:41 | That will rebuild them correctly.
| | 01:42 | Now, when we go back to that page, it'll
tell us at that the page isn't there, of
| | 01:51 | course, because the URL changed.
| | 01:53 | But if we go back to our Home page, and
click Headquarters, it works as expected
| | 02:01 | with the URL we want.
That's the first thing.
| | 02:04 | Since we are talking about campaign
offices, that leads us to the next improvement.
| | 02:09 | Right now we have a menu item up here
in the top for Headquarters, and it just
| | 02:15 | leads to that one campaign office.
| | 02:18 | But, of course, we are going to have a
whole lot of campaign offices, so I'd
| | 02:20 | rather have this say something like
campaign offices, and then a list of all of them.
| | 02:25 | We'll do that by creating a view.
| | 02:28 | Go to Structure, down to Views,
and Add new view.
| | 02:43 | This is a fairly simple one; it'll just
be content of all campaign offices, and
| | 02:47 | it'll lead to a page when
someone goes up to that menu item.
| | 03:05 | We'll add the menu, and continue.
| | 03:08 | If we go down and take a look,
we are really already done.
| | 03:17 | So I'll Save it, and see how that looks.
| | 03:25 | And there it is. When we click
it, we get a list of offices.
| | 03:30 | Now we can get rid of the
Headquarters link up here.
| | 03:32 | Of course, we could do a lot more. We
could include maps, and numbers of members
| | 03:46 | in each one, but we'll
leave it as it is for now.
| | 03:49 | The next item I want to change becomes
apparent when you try to create a basic page.
| | 03:54 | Go to Add content, and Basic page.
Scroll down.
| | 04:01 | We have these Groups settings, both
for visibility, and audience, and they
| | 04:04 | are kind of confusing.
| | 04:05 | We can hide this with a
module called field_group.
| | 04:08 | I'll go to drupal.org to get it.
| | 04:11 | It's drupal.org/project/field_group.
| | 04:15 | Note, that's not the same as /fieldgroup,
which is different module.
| | 04:20 | Scroll down, download, and install
it as usual, and then enable it.
| | 04:33 | Now if we go back and edit that content
type, we can change things that people
| | 04:37 | see when they create a basic page.
| | 04:39 | That will cut down on a lot
of our support requirements.
| | 04:48 | We create the new group, I'll call it
administrative, and Fieldset is fine.
| | 05:01 | We can then hide those fields, like so.
| | 05:14 | And to put the icing on the cake,
we'll make them collapsed by default.
| | 05:22 | We Update that, and then Save.
| | 05:28 | Now, when someone creates a basic page, you
see that all that stuff is hidden down here.
| | 05:37 | People can still access it if they need
to, but it's going to cut down on people
| | 05:41 | calling us saying, I put
something in a group, and I didn't mean to.
| | 05:45 | As long as we're talking about groups,
it occurs to me, we didn't actually test
| | 05:48 | the group experience from a
user's point of view, so let's do that.
| | 05:52 | Now, you'll remember, to join a group, you
have to already be a member of the site.
| | 05:56 | So I am going to just create a user
right here by clicking People, Add user,
| | 06:02 | and let's say tgeller.
| | 06:14 | Now I'll switch over to a browser
where I'm not logged into the site, and I'll
| | 06:17 | log in as that user.
| | 06:30 | Then I'll go to the Headquarters.
| | 06:31 | Ah, and here we've run into our first problem.
| | 06:38 | If we go back to our administrative
interface, we see that there's an area where
| | 06:42 | we can take a look and see if we're
signed into the group, and what our role is
| | 06:45 | in the group, but there is
no subscription link here.
| | 06:49 | To change this, we'll first go back to
our administrative interface, and take a
| | 06:53 | look at that node to make sure
that everything is okay there.
| | 06:56 | I am going to click Edit,
and scroll down.
| | 07:00 | Okay, the Group visibility is
okay, but watch out for this:
| | 07:03 | often, if you create a group, and then
add a visibility, this will be empty, and
| | 07:07 | that can cause some problems.
| | 07:09 | Issues like this can be very hard to
debug, and in fact I had a lot of time when
| | 07:12 | this happened to me for the first time.
| | 07:14 | I went in, and I tried editing the panel,
I added things, I took them away, but
| | 07:18 | the answer is actually to go up to
Configuration, down to your global
| | 07:25 | permissions, and allow non-members
to see the group field.
| | 07:32 | While you're at it, allow regular
members, and administrative members to see
| | 07:35 | them as well, and save.
| | 07:41 | That won't change the appearance on
our administrative page; however, if we go
| | 07:45 | over to the non-members page,
and reload, now we can sign up.
| | 07:49 | Now I am subscribed, and I
can unsubscribe if I want.
| | 07:59 | And if I go over to my administrative
interface, and take a look at the group
| | 08:02 | here, and then to click on People, I see
that yes, he is a Pending member for the
| | 08:09 | group. I'll approve it.
| | 08:11 | Now, in a real test, we'd also check out
both the user and administrator e-mail
| | 08:15 | accounts to look at the messages that
they got upon subscribing, but let's move on.
| | 08:20 | Next on our list is Google Analytics.
That's something I've found that
| | 08:23 | clients really appreciate, even if they
don't know anything about it when they start out.
| | 08:27 | It's best to get this implemented from
the beginning. As they say, you can't fix
| | 08:32 | what you can't measure.
| | 08:33 | To get it, go to drupal.org/
project/google_analytics.
| | 08:48 | Then install as usual, and paste it in.
| | 08:52 | After you've installed Google
Analytics, you have to configure it.
| | 09:01 | But when you start to configure, you'll
notice it'll immediately take you to a problem.
| | 09:05 | Let's click on that status report,
and it warns us that we haven't set up
| | 09:08 | our Google Analytics.
| | 09:10 | We need to make that setting, so I
click ahead, and here is where you'd enter
| | 09:14 | your Web Property ID.
| | 09:15 | In this case, I would hand it off to the
client, knowing that they probably have
| | 09:19 | their own Google ID.
| | 09:21 | Now I'll do some very little tiny thing,
which may or may not make a difference.
| | 09:25 | As I look through this site, I want to
make it so that it shows off its best
| | 09:29 | side all the way around,
| | 09:30 | and I notice, when I am looking at the
screen of this size, I don't even see the
| | 09:35 | positions down here below.
| | 09:36 | So I am just going to make
this a little bit shorter.
| | 09:40 | I'll edit that node, cut out some text,
| | 09:45 | knowing, of course, that it's going to be
replaced anyway, but as I'm demoing this,
| | 09:48 | I imagine myself in the boardroom, and
saying, well, down here are the positions, and
| | 09:52 | somebody saying, well why do we have
to scroll down for that? Ah!
| | 09:55 | And as I change this, you notice that
since I added a group content visibility
| | 09:59 | field to basic pages, it's going to
require that whenever we edit a basic page.
| | 10:10 | That also tells me that it would be
a good idea to go back and change the
| | 10:12 | visibility on all those basic pages
that we created. Otherwise, when they go to
| | 10:16 | edit it, they're going to
have the same sort of error.
| | 10:19 | So that would mean going down here, and
changing About us, and Privacy policy, and so forth.
| | 10:26 | Once again, just spending some time on
the site after you've built it will show
| | 10:30 | you a lot of the issues that could crop up.
| | 10:35 | Once we've done that,
we notice another problem.
| | 10:38 | When we save the node, we're now
showing this Group content visibility, which
| | 10:42 | doesn't make any sense, on our home page.
| | 10:47 | And in fact, if we switch browsers, and
look at it from the point of view of an
| | 10:51 | ordinary person visiting the site, we see
it down there as well; it makes no sense at all.
| | 10:55 | We can hide that pretty easily by going
up to Structure, Content types, and then
| | 11:01 | changing the display for Basic page.
| | 11:04 | We'll just hide Group content
visibility, and Group audience.
| | 11:10 | We'll do the same thing with the Teaser
as well. First I am just going to Save
| | 11:13 | to make sure it takes, and then go back.
| | 11:17 | Yup, they are hidden on the
Teaser as well, so we are all good.
| | 11:21 | When I reload this page, it should hide
that field, and indeed, it does in both browsers.
| | 11:30 | The last thing on our list was to provide,
and I quote, documentation and client UI.
| | 11:35 | This is actually the most
important part of the process from a
| | 11:38 | professional point of view.
| | 11:40 | It's also the one that I won't be showing.
| | 11:42 | Ideally, you would have been documenting as
you went, and then you just edit it at the end.
| | 11:47 | Because even though the site functioning
is obvious to you, it won't be, even to
| | 11:51 | another experienced Drupal
developer, let alone this campaign staff.
| | 11:56 | For example, take a look at this front
page. They are going to want to change
| | 11:59 | this content here, but they
won't know how to do that.
| | 12:03 | We know that it's a node that's
inside a panel, but that's kind of hard to
| | 12:06 | explain unless you write it down.
| | 12:09 | So there's your example of my
list on this one particular site.
| | 12:13 | Yours will, of course, be quite different.
| | 12:15 | For example, I didn't need to do a lot
of the usual graphics cleanup, because I
| | 12:19 | know that the client has
someone on staff who will do that.
| | 12:22 | At this point, we've taken care of all
the tasks that are specific to this site.
| | 12:27 | Next we'll complete the job, by making
sure it's secure, backed up, and usable.
| | Collapse this transcript |
| Securing the site| 00:00 | The last steps we'll take
are incredibly important.
| | 00:03 | First, we need to make sure that the site
is getting backed up, in case of a crash.
| | 00:08 | Second, we'll spot check some of the
common intrusion points we need to tighten
| | 00:11 | up at security, and expand
certain permissions we are needed.
| | 00:16 | First, the backup. Here, you will
absolutely need to consult with the client to
| | 00:21 | find out how they want to handle it.
| | 00:23 | Ask them who will have access to the
server? How much space will be available?
| | 00:27 | Who will restore the Web site
from backup if it gets broken?
| | 00:31 | In any case, a good place to start is
the Backup and Migrate module, which also
| | 00:35 | takes care of deleting old backups.
| | 00:37 | It only backs up the database, but
that's the really important part.
| | 00:40 | The code doesn't change as often,
and it can be re-created if necessary.
| | 00:44 | So I'll, at the very least,
get that implemented.
| | 00:48 | We get it from drupal.org/project
/backup_migrate, and paste it in.
| | 01:04 | Then you configure it. Go up to
Configuration, and down to Backup and Migrate.
| | 01:09 | I am ignoring this status report issue,
because you remember, it was related to
| | 01:12 | Google Analytics, which we
installed in the last video.
| | 01:19 | I'll make an advanced backup, because I
am going to specify a few extra things; we
| | 01:23 | are not just going to
download it to our Desktop.
| | 01:26 | Scroll down. We have to decide
where this backup is going to go.
| | 01:33 | Ultimately, after I talk with the
campaign manager, I'll have it saved on the
| | 01:37 | server in a private directory, but
for right now, I'm just going to have it
| | 01:40 | e-mailed to the campaign manager.
| | 01:42 | That way, that person is
absolutely held responsible.
| | 01:45 | Create a new destination,
and add an e-mail address.
| | 01:51 | Now, when we go back to the Backup screen,
and look at advanced backup, we'll send
| | 02:09 | the e-mail to Campaign manager, and
I'm going to Save these settings.
| | 02:20 | Then we can backup,
or save without backing up.
| | 02:22 | I will just Save Without Backing Up for now.
| | 02:25 | Once we have that profile set up,
we can create a schedule for it.
| | 02:30 | It'll backup every day, and since it's not
going to a server, it doesn't matter how
| | 02:46 | many backup files we keep;
they go out immediately.
| | 02:52 | Again, this is a minimal solution, but even
a minimal solution is better than nothing.
| | 02:57 | So that's takes care of our backups.
| | 02:59 | The rest of our security will deal
with how the site itself functions; in
| | 03:02 | particular, how it interacts with
visitors of varying permission levels.
| | 03:06 | We already tested that part of the
site that has do with private groups in
| | 03:10 | previous videos; you can see
those under Campaign offices.
| | 03:14 | Now we'll look at the site as a whole.
| | 03:16 | To do that, we'll first go to
Configuration, and Account settings.
| | 03:21 | The biggest one is who gets to register,
and do they need administrator approval?
| | 03:25 | Good, we don't have this
open just to all visitors.
| | 03:29 | That could be a big problem, because
we have these private groups, and people
| | 03:33 | could just come in, and register, and then
register for those campaign offices, and
| | 03:38 | other candidates could look
and see what we're doing.
| | 03:40 | The rest of it really isn't as
important when it comes to security,
| | 03:44 | so we're fine there.
| | 03:46 | Next we look at what people
are actually allowed to do.
| | 03:49 | This is the part that
requires the closest reading.
| | 03:52 | Knowing what all of the permissions
do speeds up this process a lot.
| | 03:57 | To go there, go up to People,
and Permissions.
| | 04:01 | One thing that we did earlier was we
created this role, Content Manager, but we
| | 04:05 | didn't really configure it.
| | 04:07 | So we'd want to go through here,
and see, well, what exactly will the
| | 04:10 | Content Manager be doing?
| | 04:11 | For example, that person should
probably be able to administer comments, and
| | 04:15 | comment settings, and then if we go
down to the Node group, there are a lot of
| | 04:19 | things there that that
person should be able to do.
| | 04:22 | Once again, I would talk with the client
to figure out who's going to be doing what.
| | 04:26 | At least as important is what
Anonymous Users are able to do.
| | 04:31 | Let's take a look at that by
starting all the way up at the top.
| | 04:36 | They can view comments;
| | 04:37 | well I have to think to myself, do I
actually have any place where comments
| | 04:40 | appear on the site?
| | 04:42 | And the answer is actually
no, so I can take that away.
| | 04:47 | They don't need to use any kind of
text format, because they're not allowed to
| | 04:50 | type anything into the site.
| | 04:55 | Really, the only permission they need
completely is View published content.
| | 04:59 | Without that, they can't
reach the site at all.
| | 05:02 | And you would go on and do the same thing for
the Authenticated User, and the Administrator.
| | 05:12 | The final step is to
test, test, and test again.
| | 05:16 | Test the site as an anonymous user,
test it as a content administrator, test it
| | 05:22 | as an administrator
who's not user number one.
| | 05:24 | Try adding and editing some content. As
we saw in the last video, there was a case
| | 05:29 | where I edited some content,
and that threw up an error.
| | 05:31 | I wouldn't have discovered that if I hadn't
spent a little bit of time wandering around.
| | 05:36 | Along these lines, it's wise to write
into the contract that you'll be providing
| | 05:40 | continuing support for a period of
time after you hand it off to the client.
| | 05:44 | There are always surprises, and you want
them to know that you stand behind your work.
| | 05:49 | So, you're happy, and your client is
happy, and you did it all with Drupal.
| | 05:54 | Congratulations.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Thank you for watching
Drupal 7 Advanced Training.
| | 00:03 | I hope that this course has propelled
you further along your way with Drupal.
| | 00:07 | I'd like to recommend a few other subjects
that you'll find on lynda.com, that will
| | 00:10 | help you as you work with Drupal.
| | 00:12 | First of all, watch courses on CSS to
improve your design skills with Drupal, as
| | 00:17 | that's the basis for Drupal themes.
| | 00:19 | I also recommend that you get better
with Web hosting, and there are several
| | 00:22 | courses for that as well on lynda.com.
| | 00:25 | Drupal has been very good for me for
these last few years, and I expect it will
| | 00:29 | continue to be strong
in the years to come.
| | 00:31 | I wish you great success with Drupal,
and thank you again for watching
| | 00:35 | Drupal 7 Advanced Training.
| | Collapse this transcript |
|
|
