please remember that the complete
information for the class that you are
about to view is at Eli the computer guy
comm not only do we have our videos
there but we have parts lists diagrams
pictures and even complete code examples
so if you are watching this video and
you want more information please go to
Eli the computer guy comm welcome back
as you know I am Eli the computer guy
and in today's class I'm going to be
showing you how to create a dynamic
photo gallery so basically this is going
to be a follow on class to the dynamic
photo stream gallery that we created in
the previous project and basically what
we're going to be doing today is we're
going to be showing all of the pictures
within a certain folder in in like a
gallery so you know columns and rows
basically a whole bunch of thumbnails
and then what you're going to be able to
do is you're going to be able to click
on one of those thumbnails and then that
image will open up into its own page and
it will be a much larger than beyond
that there will be a link at the bottom
where you can click to go back to the
gallery and so this will show you how to
create basically a very simple PHP
gallery app now in order to do what
we're going to be doing today we're
going to continue using the glob
function and PHP so the coding languages
that we're using for this particular
class is we're going to be using HTML
CSS and PHP so with PHP we're going to
be using something called the glob
function and the glob function allows
you to basically scan through a folder
and anything that matches what you give
it it will then turn into an array we
then use the for each state for each
function to step through the array and
then be able to dynamically write out a
key ml code so in the previous class
that we did basically we use the glob
function to look in the pics folder
basically grab all of the file names out
of the pics folder and then use the IMG
SRC tag in HTML to be able to then
present those images in a photo stream
what we're going to be doing today is a
little bit different a lot the same but
slightly different basically what's
going to happen is when we step through
the array and we're printing out the
images this time we're going to be
printing out to the images being small
so U is using
CSS the images are going to be small and
then one of the things that we're going
to do is we're going to use the get
function in PHP so when you click on an
image what we're going to do is we're
going to make each image an actual
hyperlink when you click on the image it
will then send the name of the image to
a script and that other script will then
print out a dynamic web page with the
large image file for you so basically
today what we're going to be dealing
with is glob the glob function the for
each function and then basically being
able to use the get function to actually
acquire information and be able to
dynamically create a web page based off
of that beyond that there's going to be
a little bit of curious CSS and what
we're going to be doing today so when
you hover over an image in the gallery
view basically we'll make the border of
that image gray yes so you can see that
when you're hovering over an image you
know what image you're hovering over
before you click on it and then the
other interesting thing that we're going
to do is when you click and you actually
go to see the larger image if you hover
over the larger image will actually
expand it up and make it even bigger so
this is the simulate let's say if you
wanted to have that you wanted your
users to have the ability to zoom in on
an image and see a smaller area and make
it bigger so that it's easier for them
to view so these are the things that
we're going to be doing today with this
particular project and it's one of those
things this that may sound a little
complicated but I'm going to I'm going
to give you all of the code so you can
take a look at it and you'll see how
simple it is
it's a code a project like this now the
only real warning for today's class is
just like the previous class with
creating the photo stream do remember
that when you create the pics folder
basically when you create the folder for
where you're going to be storing the
images that everybody or other has to
have read permission on that folder so
one of the problems you can run into in
the PHP world is the scrip the glob
function has the authority has the
ability to read all of the files in a
particular folder but then when you try
to use HTML and then print out those
images in an HTML document if the viewer
if the user does not have permission to
actually see those
images then those images will not show
up in the HTML document so I think
that's really the only warning today you
do need it need to know a little bit
about linux administration in order to
make this project work beyond the code
and everything that i'm going to be
giving you now I've done nothing special
with PHP I&I or any other configurations
on my server so basically I have an
Ubuntu 18.04 server that I'll be
demonstrating everything on today I used
something called task cell justice to
throw in a vanilla version of the lamp
stack Apache my sequel and PHP so that's
all I did there are no configurations on
the PHP ini file or anything like that
why that's important is if you want to
try these projects using a shared
hosting plan so if something off of
GoDaddy or Hostgator or something like
that all of the code that I'm showing
you today should work just fine
basically within it within any lamp web
server that you're gonna be throwing it
into so with that let's go over the
computer the first thing that I'll do is
I'll show you the demonstration of what
we're going to be creating and then
we'll kind of step through and talk
about the code about how we actually
create it so here we are at my normal
demonstration computer again and this is
a MacBook Pro but all I am using this
demonstration computer for today is
simply to use the web browser to
actually access the website on my server
so again I have created a lamp server
that would want to server the IP address
for that avanti server is 10.0 1.17 and
so what I'm doing is I'm using at this
demonstration computer in order to
access that web server and then this is
what is being presented to me and so
this is the project that we're going to
be creating today so again I created a
folder and all I did was dump picture
files into the folder so there's no
additional configurations I've done for
the picture files literally they're just
simply JPEG picture files I dumped into
the folder and then PHP has then
dynamically created these pages for me
so we can take a look here and we can
see these are all they different
different pictures that are in a
particular folder and as I was saying
before basically when I hover over an
image I'm having the CSS basically sit
CSS is : hover so when I hover over an
image I am making the border gray so I
know what image I'm hovering over now
with this basically I've tried to Center
this gallery in the middle now one of
the things that I did around the whole
div is actually to put this black line
just to give you an example so this is a
border just to kind of show you how like
centering things can be a little bit
wonky in a responsive world because what
this is what this is gonna try to do is
it's always going to try to Center this
image gallery in the middle of the web
browser but these images have a width on
their own so one of the issues you get
into is when when you're in the area
when it can't present another image
because the area is too small that's
when the border starts getting bigger
and bigger and bigger alright so here
see how it's getting bigger and bigger
and bigger and big and then BOOM right
so right here right here right now all
of the images are perfectly centered in
the middle of the screen so this gallery
is perfectly centered but when I do that
now the images no longer are so this is
just kind of one of those things you're
gonna have to be thinking about when you
deal with responsive websites the
problems is is when you put elements
into an HTML form of a certain size when
you go to resize the the web browser
where people are viewing viewing of the
gallery whatever you've created you can
get into these weird things about the
image is not being centered the way that
you think they are so that's just one of
those random things to kind of keep in
mind so again basically this is the
gallery half and then let's say I want
to look at this particular image here so
what happens here is basically with PHP
I've dynamically created this page and
it's dynamically used the IMG tag in
order to put all these images on the
page then what I've also done is I've
turned the images into a hyperlink not
only have I turn them into a hyperlink
but I've been I turned the images into a
hyperlink with the get so basically with
get what you're able to do is you're
actually able to send variables to
another script within of the URL itself
so I have the the hyperlink here the
hyperlink points
to the script that I've created with the
variable of the the name of this
particular picture so that when I
clicked on this picture it then will
dynamically create this webpage with
this picture on it and it will be larger
so basically with the get function
that's how the PHP script knows what
image to make larger now one of the
things that I've done with CSS is as you
can see here when my mouse is over on
the side we get the image of whatever
size I've decided but if I want to then
zoom in what I can do is simply by
hovering over the image we now see that
the image gets a lot larger so again
think about this it's like a zoom in
function a very very you know primitive
is zoom in function but that's the idea
so basically I can be sitting here going
oh that's a nice image what's that
what's that thing around Jesus's head
and I can simply scroll over and I can
take a look and go oh that's a halo or
whatnot right and again this is this is
the type of thing that you need to be
thinking about for your users maybe your
users will find this obnoxious maybe
your users would find this useful that's
kind of one of those things you can code
it and then ask them what they think
then the final thing that I did here is
again whenever you're creating a web
application you don't want to have dead
ends in your web application that can be
one of the big problems when new people
are creating web applications they just
assume everybody will hit the back about
it right okay I saw this image now I
want to go back and he hit the back
button one of the things when you're
creating these kind of web applications
is you oh you always want to have links
to get people to the next place and the
process so with this since it's just an
image gallery all I want is to simply go
back to the gallery there at so I can
click on that and that brings me back to
the gallery then I can come here I can
take a look at that I can look at the
guy's big nose and then I can go back to
the gallery I can go here and take a
look at the cat you know oh look at that
cute little cat and then I can go back
to the gallery so this is what we're
going to be creating today with the code
that's on the other server so let's go
over and take a look at the server and
take a look at the code so that you
understand how this works so here we are
on my Ubuntu server so I'm using Ubuntu
desktop 18.04 LTS the
basically any Ubuntu version should work
for you really any Linux distribution it
should work for you now the important
thing to understand with this is you can
build the server you can and you
probably should run all this code off of
a command line server without a GUI
without a graphical user interface
please understand because I'm trying to
teach you how this stuff actually works
I am using a graphical user interface
just because it's easier to visualize
some of the things that I'm trying to
explain to you what I'm trying to show
you the file structure when I'm trying
to show you some other things it's
easier when I have a GUI versus simply
trying to type through the command line
so that's just something to keep in mind
there so basically with with this little
web application that we've created we
have a few things so basically we have
three files here so we have the
index.php file so when you go to the
Apache web server it will by default a
look for a a file either called
index.php index dot HTM index dot HTML
or default dot HTM or default HTML so
basically this is just simply this this
is just coded into Apache if you have a
file called index dot PHP and that's
that index dot HTML it will
automatically drop your visitors into
that file so this is the main file here
pass that again in the index dot PHP
file when I when I create the hyperlink
that a ref when I create that again
they're going to be variables within
that a graph and those are then going to
get passed to the gallery script dot PHP
so this here is when you get dumped into
the website and you're seeing the
gallery the gallery is created by the
index dot PHP file then in order to get
that large image with the hyperlink
below that's created by the gallery
script dot PHP file beyond that we have
a pic style dot CSS so this is our style
sheet that that you know all the divs
you know what size the images should be
so on and so forth and then finally we
have the picture folder and again it is
important to understand all I literally
did is copy and pasted these images into
the folder and then PHP does
rest there's no there's no manual
configurations or anything that I have
to do now the important thing with this
particular folder as it does have to be
accessible to the public so for in the
GUI world we can simply right-click and
then we go to permissions what you want
to see here if you're dealing with a
graphical user interface is that others
have access files essentially access
files is the read permission so you need
to make sure that users have the read
permission sometimes if you create this
particular folder it will not
automatically give the the read
permission to to everybody essentially
and so everybody needs that not only
that but everybody also needs to have
read permission on the actual files
themselves so we go into properties
again you take a look at permission here
basically we have that read-only
permission so that's something that
you're gonna have to be looking at so
past that we can then actually get to
the code itself so here's the index.php
file then we have the gallery script dot
PHP and then finally we'll go to the pic
style about CSS so the index dot PHP now
with this basically we start with the
HTML we end with the HTML and right in
the middle we basically dump our PHP
script in here this this makes life
easier for us so we can see HTML head
the first thing up here is that we do
want to link to a style sheet and we're
going to be linking to that pic style
dot CSS so again all of the formatting
comes from pic style dot CSS it's very
important that you do that the other
thing that we're going to do here is
we're actually going to open up the div
outside of the PHP so basically when you
saw that big square box that that box
with the black border and that is the
div and I'm actually opening that up
outside the PHP because there's no
reason to actually put that inside the
PHP so basically everything that the PHP
script is going to be printed out will
be within that div anyway so I'll just
leave that outside the PHP and for this
I just simply put it as a class of
gallery div and that does that that
makes it Center that gives it the border
again that gives us all the formatting
then pass that what we're gonna do is
we're going to
down and we're going to open up our PHP
script so we open up the PHP here and we
close the PHP here the first thing that
we need to do is we're going to need to
create the array that we're going to be
stepping through and we need to fill
that array with all of the files in it
the pics folder so this is where we use
that glob function so again the what the
glob function does is it steps through a
folder it takes all the file names that
match whatever pattern you give it and
then it puts it into an array so
basically all we do here is we do glob
parenthesis you know double quotations
and then basically what we're saying
here is go into the pics folder go into
the pics folder and for me for this
we're simply doing star so star is a
wild-card star means absolutely
everything so basically everything in
the pics folder grab that grab those
file names and put it into an array
called file list so again with glob you
could do like star dot jpg or you could
do star dot jpg right so you could do
this if you wanted to and you could even
do start out txt if your particular
project required that the problem like
again when you're dealing with things
like images is do you remember what what
the extension is are they JPEG files or
JPEG files or PNG files see if I know
all of the files in the folder are
images then if I do star here it doesn't
matter if they're PNG or JPEG jpg or gay
PEDV it'll grab all the files it'll
it'll simply print it out so that's one
of the things again you have to be
thinking about with your particular
situation if you know all the files in
that folder are supposed to be jpg as in
jpg then you could put that in there
again since especially since the
demonstration machine I'm not exactly
sure what files I'm putting in there so
by doing star that means basically grab
the file names for it literally
everything within the folder now we're
going to come down to the for each
function and so what the for each
function does it has allows you to
basically step through an array and for
every value in that array do something
so basically all of the files in the
pics folder the
names have been put into the array
called file lists and now we're going to
use for each to step through then all of
those file names and do something so for
this basically what you do is you take
file list write this array and then as
file name so we need we need a unique
variable name so that we can actually
interact with it so basically for every
value in the array for this particular
iteration that value will now be the
value for file name for the variable and
then we're going to step through and
we're going to do something so what
we're gonna do here is we're simply
going to echo so basically we're gonna
print out on the screen we're gonna open
up the double quotation marks and to be
clear when you're looking at this this
is this is a mess this is a mass of
quotation marks so many quotation marks
in here the reason there's so many
quotation marks in here is because if
you take a look at these image files
you'll notice there's a space so all
these pictures are from my trip to
Turkey I simply exported them out of I
photos in order to do this project well
when I exported them out of I photos it
does turkey space zero for three turkeys
space 0 for 4
turkey space 0 for 8 right so remember
when you're doing things like hyperlinks
and all that kind of stuff if there's
just a space in the file name you're
going to have a whole bunch of problems
if you don't use quotation marks right
when you use single or double quotation
marks what it says is read this entire
string as if it's one file name if you
don't put those either a single or
double quotation mark around a file name
that that has a space in the middle and
then you're gonna run into problems and
so since I'm actually happy to print
everything out that's why we get into so
many of these these double quotation
marks so basically what we have here is
we have a double quotation mark here and
I have a double quotation mark here and
then we have a single quotation mark
here so what what we're doing here is
we're creating a hyperlink so a her F
were creating the hyperlink and then
because in the file name in the file
name we know that there's going to be a
space in the middle basically what we
have to do is we have to put a single
quotation mark
so whatever the single quotation
we'll go from here to here and basically
it will read everything as one as one
unit it won't worry about the spaces so
the double quotation mark is here so
basically double quotation mark all the
way here and then we're going to
concatenate in the value of the variable
so we do a period and then here we do
file name it's a basically file name
then we do period we then reopen a
double quotation mark all the way to
here and then what we're doing is we're
closing a single quotation mark for here
so that the single quotation marks so
we're taking a look at it this is what
the single quotation marks are
encompassing whereas this is what the
double quotation marks are encompassing
and this is one of those things like I
said it can get a bit confusing then
beyond that well so basically this is
the hyperlink right there so this is a
ref and then what we're saying is go to
the gallery script dot PHP so basically
go to the gallery script that PHP give a
variable and a value so the variable
name is picture so the variable name
picture equals and then whatever the
file name is right so then in that
gallery script you're then able to grab
the value of that picture name and do
something with it so that's how this
this hyperlink works right here and
again if you need to learn a little bit
more about git it's pretty useful thing
you can do some more research on it pass
that we are then going to then actually
embed the image itself so IMG class
equals and so I created a class called
gallery pick so this is in single
quotation marks so this is one of those
things you have to remember too is so
whenever you're you're printing out
quotation marks in any of these kind of
scripts so whenever you have a double
quotation mark the next time you have a
double quotation mark that's gonna close
everything right so what you do is you
can either put all of this in a single
quotation mark or all this in a double
quotation mark so you use the different
ones right so double quotation mark is
here
so if I need to use quotation marks
again within whatever I'm printing out
on the script I would use the single
quotation mark so here for class so
since this is within double quotation
marks when I do the class for gallery
pic I will put that in it within a
single quotation marks so that I don't
escape out of the double quotation marks
oh that's a whole bunch of words right
there so image then we get a path to
pass that so it's SRC equal so basically
what is the image file again we have to
use that single quotation mark here
because there is going to be a space in
the name right so all of this gets
encapsulated within the single quotation
mark and then we have to put in the file
name so period you know dollar file name
period so that concatenate sin that adds
the file name and then finally we're
then going to close out the image and
then we are going to close out the a
we're gonna close out the hyperlink and
then we're going to end the echo that's
the the PHP delimiter there then we're
going to close out the function and then
we're going to close out the PHP this
mess right here it's one of those things
like once you figure it out once you
understand this mess it'll make a lot of
sense and it's not too bad it's one of
those things play with this is one of
those things in order for you to
understand you will have to play with a
bit I can sit here and talk for 30
minutes and again if you don't
understand it you don't understand it go
play with it
so anyways past that so again so when
you click on that hyperlink we're going
to go to the gallery script and we're
going to create a value for a variable
called picture and that value will be
the file name if we go over take a look
at the gallery script we can take a look
at this now again with this we open with
the HTML we close with the HTML and in
the middle we have the PHP like we did
in the previous the previous thing here
again we're linking to a style sheet and
we're still linking to that pic style
dot CSS that's right there for you and
then we're going to go down to PHP so
for PHP and this is gonna be the
HP script and so we're gonna create a
variable called image and we are going
to set the value of that new variable to
whatever comes through in the get so
we're using a get function for the value
of picture all right so so we take a
look here oh and we see this value of
picture here basically that value is
coming here and then we're setting at
the value of image to whatever that is
right so so this you can name this
whatever you want you can name it pick
but it has to be named pick here oops
you could name an image whatever else
and basically when it comes through it
grabs whatever whatever that variable
name is set equal to and then you can
now use that as a variable value within
your PHP script then pass that all I've
done here is I've simply echoed out and
with this again whole bunch of quotation
marks here but basically all I'm doing
is image IMG we're gonna do a class of
big pic so I have a different class here
for the image if we go back and we take
a look at the image here we have gallery
pic so gallery pic creates a small
thumbnails and CSS big pic creates the
big pictures in CSS then we're going to
do the SRC equals and again whatever the
value of image is then we're gonna
simply close all that out close out the
echo closed out the PHP and then finally
at the bottom basically in standard old
HTML I have simply created a link to the
gallery
I've put some CSS styling directly on
this page basically it's called inline
CSS styling just to Center it on the
page
and so basically h1 Center this text in
the middle of the page
create a hyperlink that goes back to
index not PHP that hyperlink will be
called gallery close hyperlink close h1
close body close HTML right so that's
what we're dealing with there then we
can go and we can actually look at the
pic style.css we open this up and here's
where we have the styling going on so
for the
gallery pic right so the gallery pic
that's what we're talking about here
alright so the gallery pic the class
this is what creates those thumbnails I
was talking about so basically for the
gallery pic width is going to be a
hundred pixels so it's gonna be a
hundred pixels wide height is going to
be Auto so just kind of automatically
it's gonna keep the aspect ratio so the
height will be whatever the height is
and then border or going to do is we're
going to do ten two pixels solid white
so if we go over and we take a look at
my demonstration machine actually took
it take a look at the website itself
what we can see here is okay so the
image the image is a hundred pixels wide
basically they're 100 pixels wide the
height is auto so that's where you'll
notice like this image here see it's a
hundred pixels wide and because it's on
its side it's a horizontal picture then
the height is much smaller than the
other things cuz again it's just
dynamically created and then in order to
create the border what I've done here is
in order to create the border in order
to create the padding basically the gap
between the images what I've done is put
it as a ten pixel solid white border if
we go back and we take a look at the
code then we can do the gallery pick so
we're still using the gallery pick class
but here we're saying hover and when we
hover we're then going to modify the
border the border is going to stay ten
pixel it's gonna stay solid but then
it's going to be gray so if I go over to
the actual website again when I hover
over an image you can see that is a ten
pixel solid gray border now and again
you could you could change the opacity
here you can do a whole bunch of
different things I just figure this is
an easy way to show you how CSS works
dynamically then pass that go back and
take a look at the code then we're gonna
take a look at the gallery div so we're
talking about the gallery div that is
the div basically that is the box all of
this is inside so all of this is within
that gallery div so we take a look at it
basically what we're seeing here is I've
done the possession is relative so
whenever you're going to try to Center
like a box and div on the screen you
have to
make the position:relative the display
is going to be a block then what I'm
doing is margin from the left is going
to be 10% of the web browser size the
size and the margin from the right is
going to be 10% so basically when we
take a look at this you know it's that
whole horseshoes and hand-grenades
so this should be about 10% of the
entire width of the web browser
currently and this should be 10% of the
web browser currently again when I go to
shrink it
you will notice then it's slowly those
then margins on the side then slowly
shrinks as 10% becomes smaller and
smaller now again why I put this border
around the div is just just so you
visually can see why sometimes it
doesn't it doesn't make sense that the
images don't seem to be in the center of
the screen but that's basically how that
goes enough we go back and we take a
look at the code again we then finally
have that border to pics solid black
honestly if I was gonna be putting this
on a production website I would most
likely get rid of that border because
again it's good it's good to visualize
to understand why things look how they
do but it's also kind of ugly when
you're actually looking at then we're
gonna go down and basically we're then
just dealing with the big pic class for
when we're looking at the large image so
for this we're gonna begin do the
position:relative this is so we can
Center the image in the middle of the
screen display is going to be blocked
it's just gonna be a block for the data
for the display width is going to be 30%
of the screen size so if we go over
again we take a look at the
demonstration when I click on an image
basically what that means is again
before hover so this should be
approximately 30% approximately 30% of
the size of the screen so as I shrink
the screen you can see that the image
shrinks and as I grow the shrink screen
you can see the image grows so you could
put a defined pixel you could just like
we did for the gallery you could say 400
pixels or 300 pixels or a thousand
pixels I just like the percentage thing
because then it makes it a nice little
dynamic dynamic page for you if we go
and we take a look at the code some more
we look at the height is auto so just it
automatically keeps the aspect ratio
when you do that margin - margin - left
auto margin - right Auto what that is
going to do is that is then going to
simply Center the image in the middle of
the screen the final thing that we're
going to do here is then for the big pic
class for hover so when we hover over
the image basically what's going to
happen is the width is simply going to
go to 80% the height is going to remain
auto again keep that aspect ratio and
that's where we go back when we take a
look at the demonstration that's where
you can see here where when I hover over
now the width is 80% of the screen again
and the height you know keeps that
aspect ratio so it feels like you're
zooming in you go off the hover and then
it gets smaller and so that's basically
what we're looking at with the code here
so again we have the index.php file in
here we're going to create the div so
that entire gallery is going to be
within this div we're then going to open
up PHP we are going to use the glob
function in order to put the values of
all of the file names within the pics
folder into an array called file list
we're then going to use the function for
e to essentially step through file list
and when it steps through file list what
it's going to do is it's going to print
the image out on the screen using the
CSS to make it like a gallery type view
and then each one of those images is
then going to be a hyperlink once you
get finished with that you close it for
ich you close the PHP and then you close
everything else out with the HTML again
with this this is the get so basically
with the hyperlink you're going to be
linking to the script and when you link
to the script you use question mark and
then the first thing that you do is give
a variable name so we're creating a
variable called picture and then we're
setting equals we're setting the value
of that variable name to dollar sign
filename basically what then happens and
when you go to gallery script that all
gets sent over to gallery script here
what we do is we then are able to get
the value of the variable picture that's
been sent and
what we do is we assign that value to
the dollar sign image variable then once
we have that then we can simply print
out the image on the big basically the
bigger image write that bigger image
view then we close out the PHP then we
simply put a link back to the gallery
again don't don't create dead ends
within your web application and then we
close out the HTML and all of that
finally again you have the CSS and with
a CSS here basically you have the the
formatting for the gallery pic so the
gallery pic class so when we're looking
at that gallery
what should the gallery pictures look
like normally then what should the
gallery pictures look like when they're
hovered over then for the entire div so
that entire box the gallery is in we
create a class for that again I put a
border here two pixels solid black that
is just that's just a tool for you to
understand what's going on I would
probably get rid of that normally and
then finally again we create the class
and we create the hover event for big
pic so when we're creating those large
pictures and we put all the CSS there so
this is all that's required to create
this gallery application and if you take
a look at it again I mean this is a very
simple gallery application here but
imagine this with a little bit more CSS
imagine this you know put an actual
webpage around in the whole nine yards
and really I mean this is a very very
functional little gallery web
application that you can have very very
easy for you to use very easy to work
and a robust little script so that's how
this particular particular gallery app
works so there you go easy peasy you got
a three files you got one folder you
have a whole bunch of pictures you got a
lamp server and away you go
creating a little gallery application
like I showed you for me honestly coming
up with this demonstration I don't know
you know that took me like 30 or 40
minutes and again again don't don't get
me wrong what I what I am showing you is
incredibly basic but you know think
about it create create some background
colors and
prove the CSS a bit the whole nine yards
actually put a whole day into creating
this app versus like 30 or 40 minutes
and you can have something that is
actually very useful and might be very
useful for your organization or your
company now if you're a lost at all
again one of the problems you get into
when I'm showing you these projects is
I've got to show you a lot of code and
one of the issues too is like when you
get in those quotation marks like all
those quotation marks have got to be
there if you screw up a single one of
those quotation marks everything goes to
hell so if you are confused go down go
down take a look at the code that I have
on the site and actually read through it
feel free to copy and paste remember
real coders copy and paste the important
thing when you're a coder is not that
you write every single line of code is
that you know what every single line of
code does right that's what real coders
do so copy and paste the code read
through the code verify you understand
what that code is doing make
modifications as need be and go from
there so I know with something like this
again with all those little all those
little quotation marks you can probably
you would probably rip your hair out if
you don't do a copy and paste so again
go down grab the code paste it play
around with a little with it a little
bit until you get comfortable it's one
of those it's like martial arts like
with coding with a lot of things in
technology it's like Marshall I like you
know I remember I'm a remember one night
my old sensei my old instructor you know
they teach you how to hit you know this
is how you hit and it was like a
weirdest thing like for look for like
six months six months you'd be like
learning how to hit and and it would
always feel weird and it always feel
wrong it was always like and that's not
right that's not right and then there
would just be one day you get in a
sparring ring and somebody comes at you
and you just like oh oh oh that's that
that's why we do all right and then
after that point you can just freaking
slam people and it's no big deal
the same thing is true with coding right
you sit there and
you look at the delimiter is and look at
the double quotation marks you look at
all that stuff and again you will you
will lose your mind when you're starting
out but after a certain point you're
just like okay this quotation marks the
double quotation marks is for this and a
single quotation marks is for this and
then you just start seeing the lines and
it's not nearly as bad as you originally
think it is so again practice practice
practice play play play I'm giving you
these projects I'm giving you the code
do not simply copy and paste the code
and do nothing else copy and paste the
code play around with it modify it
change things tweak it write do all that
kind of stuff so that you feel
comfortable with it so anyways again I
think it's a cool little web app and
we're gonna be doing a lot more projects
like this going into the future so that
as always I enjoy doing this class I
look forward to seeing the next one if
you like the content that I create
please think about going to Eli the
computer guy comm and becoming a member
or donating please understand that all
the educational videos are in front of
the paywall that includes the videos
that includes the notes the diagrams and
the code example all of that is freely
available and in front of the paywall
but if you want to watch opinion videos
or if you want to be able to comment you
do need to become a member
membership is $5 a month or $60 a year
and gives you access to those opinion
videos and the ability to comment if you
don't want to become a member you just
want to give a one-time donation there's
also a donate button where you can do
that please understand in order to
provide the education that I am it does
cost money the servers cost money
equipment cost money travel cost money
all of these things cost a reasonable
amount of money and the fact of the
matter is is YouTube's advertising
program no longer supports creators the
way that it used to so if you want to
these classes to continue to stick
around and you find them to be valuable
please think about either becoming a
monthly member or donating a few dollars
for this project