Coding

Laravel 5.2 PHP Build a social network – Likes & Dislikes (1/3 – Models & AJAX)

  • 00:00:00 hi everyone welcome back to the next
  • 00:00:02 part of the level
  • 00:00:03 serious so where are we currently
  • 00:00:06 currently we are let me reload here on
  • 00:00:09 the page dad while we get our post you
  • 00:00:12 can create posts edit them delete them
  • 00:00:13 and so on we got these like and dislike
  • 00:00:16 buttons and oh nothing's happening here
  • 00:00:19 that's not the best so maybe we should
  • 00:00:23 do something here that we can actually
  • 00:00:25 like and dislike posts I think it's fine
  • 00:00:28 if we are able to like just like our own
  • 00:00:30 post so leave that in but yeah the
  • 00:00:32 channel functionality should be there so
  • 00:00:35 in order to do this um there will be a
  • 00:00:39 couple of things to do let's go to the
  • 00:00:42 project I'm at in the dashboard view
  • 00:00:46 here and I want you highlight one thing
  • 00:00:49 are already prepared which is important
  • 00:00:52 because yeah I had to do it for for this
  • 00:00:56 section here basically over this video
  • 00:00:58 the next videos right now in your
  • 00:01:01 project you probably have VAR URL here
  • 00:01:05 at the bottom in the script tags of the
  • 00:01:08 stash board for you I change this URL
  • 00:01:11 add it and the app dot JS file I get rid
  • 00:01:18 of this I also changed it here I'm
  • 00:01:22 passing your added no longer URL I'm
  • 00:01:26 doing this because soon we'll have
  • 00:01:28 multiple URLs for the like functionality
  • 00:01:32 as well as the added functionality here
  • 00:01:35 therefore I had to well separate them or
  • 00:01:38 create individual variables unique
  • 00:01:41 variables okay so that's the first thing
  • 00:01:44 you have to do to set this up and with
  • 00:01:47 that we're ready to go now let's think
  • 00:01:50 about what we're what we want to achieve
  • 00:01:52 I want to have two functionality where
  • 00:01:56 users can like or dislike a post and
  • 00:01:59 that is different to Facebook for
  • 00:02:01 example where you can only like aurilla
  • 00:02:06 nowadays also happy number emotions but
  • 00:02:08 there is no minus one or dislike button
  • 00:02:11 can
  • 00:02:12 live things that will be different here
  • 00:02:15 we can like or dislike so we need a
  • 00:02:17 table which will store let's say the
  • 00:02:21 idea of the post which is liked or
  • 00:02:23 disliked the idea of the user who did
  • 00:02:27 this and as a third column well if it is
  • 00:02:32 alike or it is like so let's say boolean
  • 00:02:35 where one is like and zero or false is a
  • 00:02:40 dislike so this will be the table we
  • 00:02:43 need and then we need to be able to well
  • 00:02:47 figure out if the user has actually
  • 00:02:49 already liked this and if you then
  • 00:02:52 clicks I don't like this anymore we have
  • 00:02:55 to remove this like but that it's not
  • 00:02:58 the same as if he clicks I dislike this
  • 00:03:01 then we would have to remove the like or
  • 00:03:03 just change it into a dislike so you see
  • 00:03:06 the difference there I hope so okay that
  • 00:03:09 is a bit complex but we will be able to
  • 00:03:12 do it
  • 00:03:12 oh also I want to achieve all this again
  • 00:03:17 with Ajax calls so that if I click on
  • 00:03:21 like or dislike here
  • 00:03:23 I will not what send a request and
  • 00:03:25 reload the page here but I will all do
  • 00:03:28 this in a background I will send an ajax
  • 00:03:30 request and if this is successful I will
  • 00:03:34 then interact with Dom here and change
  • 00:03:38 it without reloading the page like we
  • 00:03:40 did when editing a post let's start with
  • 00:03:45 well the migration files with the files
  • 00:03:47 or that the database setup I will create
  • 00:03:51 them with the artisan command and as you
  • 00:03:54 can see I set up my project here or I my
  • 00:04:01 my tables a few seconds ago before I
  • 00:04:03 started this video because of course I
  • 00:04:06 tried out everything I am going to teach
  • 00:04:08 you here before and ever had to roll
  • 00:04:11 back everything now so first thing is I
  • 00:04:15 want you create a new model so make
  • 00:04:17 model which is a call like and I add – M
  • 00:04:22 – also create a migration file
  • 00:04:26 okay so it just works and now in my
  • 00:04:29 migrations fuller I get this new file
  • 00:04:31 here and I want to add three columns the
  • 00:04:37 first is an integer which holds let's
  • 00:04:41 say the use ready so the user who liked
  • 00:04:43 or disliked the next comes all the
  • 00:04:46 integer but it will be the post ID oops
  • 00:04:50 lower case I and the last thing will be
  • 00:04:54 as I said a boolean which says let's
  • 00:04:58 call it just like and if this is true it
  • 00:05:01 is alike and if it is false it is a
  • 00:05:04 dislike so this is one way to do it you
  • 00:05:06 could of course also use this as a
  • 00:05:10 string where you actually write like or
  • 00:05:12 dislike or whatever just a way to
  • 00:05:14 determine if it is a like or dislike so
  • 00:05:18 this is my migration file and I will run
  • 00:05:22 this right now or it isn't migrate so
  • 00:05:26 now this table is created or exists the
  • 00:05:28 database and then I have to like model
  • 00:05:32 file now here I want to set up all the
  • 00:05:34 relations I have to relations because I
  • 00:05:39 like has let's say belongs to a post and
  • 00:05:45 belongs to a user each individual like
  • 00:05:48 or dislike is done by one user and by
  • 00:05:52 and under this well mentor is attached
  • 00:05:56 to one post so the first relation I will
  • 00:06:00 name it user is which user gave dislike
  • 00:06:04 or dislike so here I will then return
  • 00:06:08 this and then belongs to because Avocet
  • 00:06:15 this light belongs to one huge user so
  • 00:06:19 app user is the model and the second
  • 00:06:25 relation is pretty much the same but now
  • 00:06:28 it's post and I have returned this
  • 00:06:32 belongs to and then I have well app
  • 00:06:38 this is from the few of the like now
  • 00:06:42 let's go to the post model and define
  • 00:06:45 well the other few so to say so here I
  • 00:06:48 have public function likes and now it's
  • 00:06:52 plural because when post can have
  • 00:06:56 multiple likes not only one one light
  • 00:06:58 can only be attached to one post but one
  • 00:07:01 post kind of mud likes so here I will
  • 00:07:04 return the oops dollar sign this has
  • 00:07:08 many app like and I will just copy this
  • 00:07:15 because it's basically the same for the
  • 00:07:17 user here we will also have has many up
  • 00:07:20 likes it's it's the same function
  • 00:07:23 because one user can like multiple posts
  • 00:07:26 so we can have multiple likes therefore
  • 00:07:30 he has many likes potentially at least
  • 00:07:33 so this is how we set up the relations
  • 00:07:35 so now we have the table and database we
  • 00:07:38 have the relations set up and this is
  • 00:07:43 the first things these are the first
  • 00:07:46 things I want to do in the backend now
  • 00:07:49 let's leave it like this for the moment
  • 00:07:53 and focus on the HX call so to do this I
  • 00:08:00 will give to my dashboard view here and
  • 00:08:04 I want to hook up these two links to
  • 00:08:09 events which are fired when I click on
  • 00:08:11 them basically therefore and we'll give
  • 00:08:15 them CSS classes here which I will just
  • 00:08:18 go like both will have this like class
  • 00:08:21 or no like and dislike because both have
  • 00:08:24 to do with the liking action so now this
  • 00:08:29 is like and now in my app dot J's file I
  • 00:08:34 will add a new well jQuery statements
  • 00:08:39 here to say a new event handler with
  • 00:08:41 jQuery where I will well kind of listen
  • 00:08:47 on all elements with like
  • 00:08:50 CSS class and then on a click on such
  • 00:08:53 element I will execute this function
  • 00:08:56 here and this function will pass and
  • 00:09:00 well the event so here I then want to
  • 00:09:04 say console.log and then just you know
  • 00:09:11 let's output event for example let me
  • 00:09:14 save this and reload this page and now I
  • 00:09:16 went to open up my dev tools and click
  • 00:09:20 on like and dislike and as you can see
  • 00:09:23 we get two events here which will hold
  • 00:09:28 all kind of information about the you
  • 00:09:31 Enzo and what we clicked and so on so
  • 00:09:34 for example here the target which was
  • 00:09:36 this anchor with like in it so that's a
  • 00:09:43 yeah that is how we listen to that event
  • 00:09:47 so with that I'm getting you went now I
  • 00:09:51 want to determine if we clicked on a
  • 00:09:53 like or dislike button now one thing of
  • 00:09:55 course would beat you not use the same
  • 00:09:58 CSS class but named as dislike and then
  • 00:10:00 lesson to do differently whens by just
  • 00:10:03 adding well by just copying this and
  • 00:10:05 listening for let's say dislike here to
  • 00:10:08 would be one way now I think we get all
  • 00:10:11 the information we need and there again
  • 00:10:14 will be a couple of ways you can find
  • 00:10:16 out if you're clicking on like or
  • 00:10:18 dislike but I will make it very easier I
  • 00:10:21 know that the like button is the very
  • 00:10:23 first of the two lengths here and
  • 00:10:26 dislike us a second
  • 00:10:27 therefore we got this previous element
  • 00:10:31 sibling property on our event target and
  • 00:10:35 I will just check if that is null then I
  • 00:10:39 know there is no previous element on a
  • 00:10:42 sibling level and then we have to be
  • 00:10:46 well on the like button because this
  • 00:10:49 element is a this anchor element doesn't
  • 00:10:53 have a previous sibling or a previous
  • 00:10:56 element sibling because it's a first
  • 00:10:58 element in this note in this div
  • 00:11:01 here the dislike anchor tag on the
  • 00:11:06 opposite side has a previous element
  • 00:11:09 sibling namely this anchor tag so I will
  • 00:11:12 use this to find out on which I clicked
  • 00:11:15 so I can just like well find it out like
  • 00:11:21 you're here let's say I have a variable
  • 00:11:23 is like and I will just check if you
  • 00:11:28 went target previous element sibling is
  • 00:11:35 null if that is the case then I know it
  • 00:11:40 is like so then I have true otherwise I
  • 00:11:43 have false and then I can just output is
  • 00:11:46 like here so let me save this reload
  • 00:11:51 scroll to the bottom here let's just
  • 00:11:54 clear a console like true dislike false
  • 00:11:57 so this works now of course I can as I'm
  • 00:12:01 already doing a boolean check your
  • 00:12:03 simplify this and just remove the latter
  • 00:12:05 part so now there's a student the same
  • 00:12:07 let me just prove that to you quick so
  • 00:12:11 same result as before so now I know if I
  • 00:12:15 have a like or a dislike event next
  • 00:12:19 thing is I want to send this a checks
  • 00:12:22 request right okay one more thing before
  • 00:12:25 I do this I will prevent the default for
  • 00:12:29 this event that's important and then I
  • 00:12:32 want you well sent ehx requests so here
  • 00:12:36 I will use the jQuery HX function which
  • 00:12:42 takes a JavaScript object to configure
  • 00:12:44 it and I will have letter data the
  • 00:12:46 method first this will be a post request
  • 00:12:49 I will have a URL we'll have to see what
  • 00:12:55 we use there and it will have some data
  • 00:12:58 now what do I want to pass well I want
  • 00:13:05 to pass if it is a like' or dislike'
  • 00:13:08 action we're taking here because like
  • 00:13:11 here with the event listener
  • 00:13:14 the backend we will use one single route
  • 00:13:17 and we will pass as a parameter if it is
  • 00:13:20 a like' or dislike' action therefore I
  • 00:13:23 will well just pass is like parameter
  • 00:13:27 here and I can't just use is like the
  • 00:13:31 variable I created up here next thing is
  • 00:13:35 I will need the post ID so that I know
  • 00:13:40 which post was liked let's see how we
  • 00:13:43 get that I'll just add three dots and
  • 00:13:46 token and we already got that set up in
  • 00:13:49 my dashboard down here we get this token
  • 00:13:52 now that we're here I can use this URL
  • 00:13:57 here but this will not be the URL added
  • 00:14:00 but you are alike and should lead to the
  • 00:14:03 like route which we haven't set up yet
  • 00:14:07 but we'll do you shortly
  • 00:14:10 so this is my like URL which I will use
  • 00:14:13 here as a URL so URL like last thing is
  • 00:14:24 the post ID well we had the same problem
  • 00:14:28 when when editing the post so all I do
  • 00:14:32 is I just copy that code here and reuse
  • 00:14:37 this to get the post ID because remember
  • 00:14:41 before in the edit well part we were
  • 00:14:46 clicking on added here and this is on
  • 00:14:48 the same level as like links it's just
  • 00:14:52 indented because of that if statement
  • 00:14:53 but it's on the same level in the dome
  • 00:14:55 so therefore I can well use the same
  • 00:14:59 traversal so to say to get the posted II
  • 00:15:04 which is attached to the article element
  • 00:15:06 if you remember that from the specific
  • 00:15:08 video so therefore I get this post ID
  • 00:15:11 here and I can just pass it so now the
  • 00:15:16 HX call is configured and I will of
  • 00:15:20 course also have a done callback which
  • 00:15:25 should be executed
  • 00:15:26 cause as I said I want you to document
  • 00:15:31 without reloading the page and this will
  • 00:15:33 be done here change the page so this is
  • 00:15:40 the basic setup for now in the next
  • 00:15:44 video we'll all setup the route because
  • 00:15:47 currently this will throw an error
  • 00:15:48 because well this route this light road
  • 00:15:52 here is not setup Waldo does the next
  • 00:15:53 video and if you want to test it without
  • 00:15:57 an error by the way just replace it with
  • 00:15:59 added for a moment and we will of course
  • 00:16:01 also take care about editing our
  • 00:16:04 document when we successfully liked or
  • 00:16:07 disliked it see you in the next video
  • 00:16:08 bye