- [Instructor] Over the course of the next several videos,
we're going to start creating a little status update app
for a fictitious hotel website, the Landon Hotel.
We're going to interface with a small and simple API
to retrieve messages and post new ones,
and we're going to delve a little deeper into views components.
So let's take a look at this mock-up first.
I've loaded it up in my browser.
If I scroll down,
here's my status updates mock-up.
We have a little form here
that's going to post status updates
from various parts of the hotel over here,
with who it's from and the date and time.
So let's look at this
and think about the components we're going to need.
We'll have our view instance
that'll wrap everything of course,
then we'll have the post form over here,
which will be it's own component.
Because we're trying to keep things
relatively simple architecturally
and the form isn't huge,
we don't have to create any more components in here.
Then over here we'll have a component
for the status message list,
just a list of all the status
messages we have available.
We could have another component
for each status message as well,
depending on how complicated it needs to get.
So that's part of the planning
we need to do, just thinking about the
components and how we're going to deal with them.
Now we need the API, so let's get that installed real quick.
In the exercise files for this course,
which has just a few PHP files and my sequel dump,
you'll need a web server to run these on
preferably running on your own machine.
You can refer to the course Installing
Apache, MySQL and PHP for more information
on this if you've never done it before.
I'm using MAMP which is available for MacOS or Windows.
I have it running right here.
And I've tweaked one setting
from the defaults if you're using MAMP.
Here under the Ports tab I've clicked
the Set Web and MySQL ports to 80 and 3306.
Which are the default ports that are used
in most deployments.
That means that I won't see any port numbers
when I'm looking at URLs in my browser.
So then I just get the web server started as it is here.
I've copied this folder into the htdocs folder
where MAMP expects all it's files to go.
In here we're going to need to update
the configuration file and load the database.
So first let's load that database.
I can do that over here in my web browser.
Almost any of these local web servers
is going to include a copy of phpMyAdmin
or some other way to load MySQL databases.
MAMP includes phpMyAdmin so I can go
to the import tab and choose a file to import.
I can load this database.sql file
from the status API folder.
Before you run this I want you to know
that the database that's going to be created
when this is run is also called status_API.
So if you happen to have a MySQL instance
on your machine already and you have a
database called status_API,
you're either going to want to rename
your existing database or the one
that's in this database.sql file
to make sure that this new one
doesn't overwrite your existing database.
So now I'll scroll down and click go.
It runs all of the queries that are needed.
And now I have a database called status API.
And a table called statuses with some
status messages that are in here for us to use.
So now we have a database, lets make sure
the configuration file is set up correctly.
Here I have the config_setup.php file
from the exercise files.
Make sure that you're editing the one that
your web server is actually going to read.
These are the default settings with
the database name that I've included
and the MAMP user name and password
for the built-in MySQL instance.
You may need to update these.
Everything else should be good to go.
Once all this is done you can try
loading it in your browser.
So I'm going to go to localhost/status_api/get.php.
There we go.
If everything is working you'll see
something like this in your browser.
This is json data so depending
on which browser you're using
it might apply a little bit of
formatting or it could just look
like raw text like this.
Because we're making ajax requests in this project,
I recommend moving or copying your exercise files
into your local web server's root folder.
Just the whole thing so all the support
assets come over as well.
This will prevent you from having to deal
with browser security warnings or blocks when
making those network requests.
In my case I copied everything into a folder called vuejs.
So switching back to my browser,
this file URL is what I'm trying to avoid,
so I'm going to switch to http local host
vuejs and then everything else should work.
So just make sure that you can load your
exercise files through your local web server
to avoid issues in the videos to come.
Okay, so at this point we've seen the project
that we're going to build,
the static mock-up for it anyway,
we've done some set up and now
we can get started with some java script.