Spotify Clone

Intro to PHP - Handling form submission Preview 04:10

Now we'll learn how to use PHP to perform an action when the button is pressed! 

Form sanitation - Cleaning the input Preview 10:56

Once we take the user's information that they entered into the form, we want to clean it up a little before we send it to the database. Let's do it!

Separating our code Preview 04:39

So our register page is beginning to get a little long. What we can do, is split the code up into separate files which makes it easier to work with! 

Preparing our validation functions Preview 03:39

So we're going to want to validate the user's input when they submit the form. This is different than sanitation that we did a few lectures back. This is to do with making sure that the input is the right number of characters, that the emails match, that the passwords are valid etc. In this video we are setting these functions up so that we will be ready to start coding them :)

Creating the Account class Preview 07:19

So now we're going to start working more OOP (Object oriented programming). We're creating the class which will be used to validate the user's account credentials and eventually sign the user up/log them in. 

Validating the username Preview 06:51

So we need to do certain checks to the data that the user enters. In this video we will write the function that checks if the username is suitable.

Validating the name and emails Preview 04:44

So we've checked the username, now it's time to check the first name, last name and email addresses to make sure they are valid.

Validating the passwords Preview 03:57

So the last validation function is for the passwords! :) 

Checking if the sign up was successful Preview 03:07

So we've done all our validation checks now (with the exception of the things we're coming back to do later) so now we can check if their sign up was successful or not.

Outputting error messages Preview 08:58

So if any of the data that the user entered is invalid, we need to tell them. For example, if their emails do not match, we need to let them know. In this video we will be outputting an error message for each failed validation check. 

Creating our Constants class Preview 08:58

So at the moment we need to make sure our error message strings that we put into the array match exactly with the ones we check for when outputting the errors. In this video we will create a class which allows us to only store these strings in one location. 

Remembering form values Preview 05:48

It would be nice if the when the user entered invalid data into our form and error messages are shown, all of their details that were just entered would be remembered. This would prevent them from having to re-enter them again. Let's do that now! 

Creating the users table Preview 04:58

So in order to save our users account details, we need to create a table in which to save to. So let's create the users table :)

Connecting to our database from PHP Preview 04:46

So in order to perform queries on our database using php code, we need to connect to it. So in this video, we will be handling this connection.

Inserting user details Preview 09:10

So it's time to write our first MySql query! We're going to write the function that actually inserts the data into the users table. 

Testing out the sign up process! Preview 03:32

So we've handled data sanitation, validation and finally insertion. Now let's give it a try! :)

Query not working? Watch this video Preview 04:35

There's a good chance that if it's your first time working with MySQL, that your query isn't working. If that's the case, watch this video where I'll show you some tips for debugging your queries. 

Last remaining validation checks Preview 04:44

If you remember, there are two things that we haven't done yet in terms of validation. We still need to check if the username the user is trying to sign up with has been taken already and also check if the email has already been used before. 

Login handler Preview 06:07

So a while ago, we created our login_handler,php file. We haven't done anything with that file yet but now it's time to start using it. Compared to the register process, this is really really simple. 

Sessions Preview 05:34

When we log in, we need a way to remember that the user is in fact logged in. We also need the user to be redirected to the register page if they try to access any of our site without logging in. We can do this using sessions. 

Adding a background image Preview 06:54

We're finally ready to add some CSS style to our site! Let's start by adding a background image to our page.

Styling the login container Preview 08:33

So we're going to have a container div around out login container. In this video we will add this container and also apply CSS to it. 

Styling our text boxes Preview 06:54

Now let's move on to styling the input boxes that the user will type into.

Input placeholder color Preview 03:20

In this video I will show you a way in which you can change the color of the textbox placeholders.

Styling the submit buttons Preview 03:56

Now we will apply CSS style to the buttons that the user uses to submit the forms.

Buttons to switch between forms Preview 03:24

Now what we are going to do is add the text that will be used to switch between the sign up and login forms. 

Showing and hiding the forms on press Preview 07:55

Last video we added the text which will show and hide the forms when they are clicked and now we will actually add some functionality to them. This will be our first use of JavaScript!

Showing only the relevant form when data is submitted Preview 06:55

Now we need to make it automatically show and hide the forms depending on which form was submitted.

Show/hide button - mouse pointer Preview 01:15

One little usability improvement is to change the mouse to a pointer when they hover over the text so that they know it is a clickable element. 

Right section content Preview 04:30

It's finally time to add some content to the right of the forms. So we'll add some welcome text that just gives a little information about what our site is used for.

Applying style to the right section content Preview 05:09

Last video we added the content itself, now we are going to style it. 

56,800+ icons FOR FREE - Icons8 Preview 08:16

I'm going to show you a really cool app which gives your access to thousands of icons for free! 

Styling the error messages Preview 02:46

We're just going to add a very small amount of css to our error messages now so that they match the rest of the style on the page.

Remembering the username after failed log in attempt Preview 01:09

So I just realised that I forgot to add the code which makes the form remember the username when a user has an unsuccessful login attempt. We've already done all the work for this, we just need to add the function call to our textbox. Simple!

Quick overview of the index page Preview 01:17

I'll just give you a very brief overview of the index page and the three main sections that make up the page.

Now playing bar container Preview 05:18

In this video we create as style the container for our now playing bar.

Creating the now playing bar element Preview 03:52

So now we're going to create the actual now playing bar element itself. You won't notice a whole lot of difference visually after this video, but the now playing bar container will be taking the height of the actual now playing bar element. 

Left, center and middle sections of the bar Preview 04:58

In this video I'll show you how we're going to split our now playing bar into three sections.

All the icons for our site Preview 02:30

In this video, you'll get access to all of the icons that I use throughout my site. You can use your own icons or if you want to use the same ones as me, you can get them from the zip file attached to this course.

Adding our player buttons Preview 10:31

So now that we have our icons, let's create the buttons for our music player!

Making the play and pause buttons larger Preview 02:32

So our play/pause buttons are going to be slightly larger than the other buttons on our now playing bar. Let's do that now!

Progress bar parent elements Preview 04:54

Let's add the elements that will make up the container for the progress bar of the currently playing song. 

The progress bar Preview 05:57

Now, it's finally time to create the progress bar itself!

Album artwork Preview 05:23

Let's create the image that will display the album artwork for the song that is currently playing.

Track info labels Preview 06:57

Now we're going to add the text elements that will display the track info such as artist name and track name.

Volume bar Preview 05:35

Now we're going to create the volume bar!

Page containers Preview 03:35

What we're going to do now is add some containers to our page which will section off certain elements in our page.

Creating our navigation bar container Preview 02:55

Now lets set up the container for the navigation bar.

Navigation bar site logo Preview 05:33

So now that we have the navigation bar container set up, we can start adding items to it. Lets add the site logo first.

Navigation items Preview 05:36

Now we are going to put the actual navigation items (links) into the navigation bar.

Navigation search icon Preview 06:11

We're going to now give the search link a magnifying glass icon.

Navigation links color change on hover Preview 01:51

One small detail we didn't do yet is to make the navigation items links change color when you hover over them. This is real simple and only requires one line of css. 

Overview of our MySQL table structure Preview 05:56

To store data, we will of course require some database tables. In this video I'm just going to give you a quick overview of our tables including how they link together and what the columns mean.

Creating our database tables Preview 05:12

Now we are going to create the tables that we discussed in the previous video.

Inserting data into the artists, genres and albums tables Preview 06:12

So in this video I'll show you how we insert data into the artists, genres and albums tables.

Inserting data into the songs table + FREE music files Preview 04:41

Let's add some songs into the songs table now. Music files can be found in the attached source files. 

Shortcut to inserting data into the songs table Preview 00:58

Organisational trick Preview 03:54

Our index page is a bit of a mess at the moment so I'm going to show you a really simple way for us to clean this up.

Main view containers Preview 06:22

So the last thing to do before we can begin adding contain to the main 'center section' of our website, is to create the containers.

Header and footer files Preview 02:45

So everything is now set up for us to be able to add content to our 'main section' of the site. Before we do that, let's just take a few minutes to improve the structure of our site and make things a whole lot easier for us to work with going forward. 

Getting albums from the database Preview 05:20

So we're going to finally add some content to the main section of our page. Let's start by executing a simple query which goes to the database and selects all the albums. 

Outputting the album artwork images Preview 05:44

So last time we output the album titles from the database. Now we will output the album artwork images.

Styling the album artwork images Preview 05:24

Lets work on getting the albums to look a little nicer now. 

Styling the album title Preview 02:58

Making the albums clickable links Preview 04:38

Now we will turn the albums listed on the page into clickable links which will take you to that album's page.

Getting album id from url Preview 05:22

On our album page, we need to know which album we should display. We do this by passing the album into the page through the url. In this video we will retrieve the id from the url. 

Getting the artist of the album Preview 03:15

Now lets use the album id to get the artist of the album.

Creating the Artist class Preview 05:57

We don't really want to have to manually perform a bunch of MySQL queries each time we want artist information. What we will do now is create an Artist class which will allow us to create an artist object just by passing the artist id into the constructor. 

Creating the Album class Preview 07:45

So we have our Artist class, now we will create our Album class.

Album header section Preview 04:58

We're now going to create the section at the top of the page which displays album information such as the the album and artist name.

Styling the header section Preview 06:18

Last time we created the header section for our album page. Now we will apply some css style to it.

Displaying the number of songs in the album Preview 04:36

Now we will make the number of songs show at the top of the page. 

Creating the Song class Preview 07:27

We have classes for Album and Artist at the moment, but now we will create a class for Songs.

Getting the songs on an album Preview 06:56

Before we output the data for each song on the album, we need to first retrieve the data from the songs table in our database. Let's do that now.

Outputting the track count Preview 05:58

We're going to output the number which will appear next to each song. This number corresponds to the number of the song on the album. 

Outputting the track name and artist name Preview 02:43

Now let's output the song and artist name.

Outputting the track duration Preview 02:17

The final thing to do before we can start styling this page is to output the track duration.

Styling the track list rows Preview 03:43

Finally it's time to start styling what we've been working on over the last few videos. We will start with the row containers for each track. 

Styling the track count Preview 04:03

Now we will apply css style to our track count section. 

Track style finishing touches Preview 05:44

Now we're going to finish up our album page by completing the styling on the track list items.

Introduction to HTML5 Audio Preview 07:38

Creating our initial playlist of 10 random songs Preview 06:23

When the page load, before the user has selected any music, we will select 10 songs at random form the database and create a virtual playlist. This means when the user presses play (before they have selected a song from the page), there will actually be music to play.

Including JQuery Preview 01:58

We're going make use of a very good (and extremely popular) JavaScript library called JQuery. In this video we'll add this to our project. 

Set track function setup Preview 05:46

So we have a function in our Audio class which sets the track. We also want a setTrack function outside the track that will do some additional processing to our track before playing it. We're going to do all the preparation in this video so that we can begin working on this function.

Set track function Preview 04:57

Now we will start on our setTrack function which will be the main function for loading and playing songs. 

Playing and pausing the song via buttons Preview 06:39

Now let's hook the play and pause buttons up to some code which will allow the user to play and pause the song that is currently playing.

Introduction to Ajax calls Preview 05:55

Getting a song via ajax Preview 07:20

So let's continue with our ajax call now so that we can get a song from the database without needing to reload the page. 

Getting the artist via ajax Preview 06:26

Just as we got the song from the database using an ajax call, we are going to do the same thing to get the artist of the song. 

Getting the album via Ajax Preview 04:36

So following the same style as the last two videos, we are now going to use ajax to get the album of the currently playing song from the database.

Updating the plays count when a song is played Preview 09:21

We want to keep track of how many times each song has been played so let's implement this now. 

Displaying the time remaining label Preview 03:37

What we are going to do now is update the now playing bar to show the time remaining of the currently playing song.

Formatting the time remaining Preview 05:41

The time remaining label now updates to show the time remaining of the currently playing song. The problem is that it doesn't look great at the moment. What we will do now is write a function to format this value into a nice, readable string. 

Updating the progress bar as the song plays Preview 07:11

Now we're going to make the progress bar along the bottom move forward as the song plays.

Dragging the progress bar on click Preview 11:45

In this video we'll make our progress bar draggable so that you can skip forward or backwards in the song by dragging the bar with your mouse.

Controlling the volume Preview 04:05

Now that we can drag on the progress bar to control the song, we will do something very similar on the volume bar which will allow us to control the volume of the song. 

Updating the volume progress bar Preview 04:37

Preventing controls from highlighting on mouse drag Preview 03:42

Now to fix something that I said I would do a few videos ago. At the moment, dragging on the progress bar sometimes causes controls to have that blue highlight. This is pretty easy to prevent so let's do that now.

Skipping to the next song Preview 05:52

Now we're going to write the function which will handle playing the next song.

Song repeat mode Preview 02:58

Now we are going to add the code which will allow songs to be repeated.

Repeat button Preview 03:57

Let's hook the repeat button up to the repeat function we wrote!

Playing the next song when current song ends Preview 01:42

One thing I forgot to do earlier was to make it so that when a song ends, it will either play the next song or reset the current song (depending on whether repeat is on or not).

Previous song button Preview 04:07

So at the moment we can skip forward to the next song but we can't go to the previous song. Let's fix that now!

Mute button Preview 03:29

Now we will add the ability to mute or un-mute the song.

Shuffle button Preview 03:26

Now it's finally time go start implementing shuffle functionality.

Shuffle - Part 1 Preview 06:19

So we have our shuffle button set up correctly, but it doesn't do anything yet. Let's begin adding the functionality to it. 

Shuffle - Part 2 Preview 10:21

Now we're going to complete the shuffle function that we started last video.

Playing songs by clicking on the song's play button Preview 08:42

Our album page lists songs that belong to that album. Each one of these songs has a play button which appear next to the song when you hover over it. Let's add the functionality to this play button now.

Fixing the song's play button bug Preview 04:28

So there's a very small issue which happens when we click on the song's play button. Not to worry, it's an easy fix!

UserLoggedIn JavaScript variable Preview 02:18

What we're going to do now is convert our PHP userLoggedIn variable (which contains the user's username) to JavaScript. 

Changing pages dynamically Preview 07:50

As of now, if we click on any of the links, our music will stop. The way around this is to use ajax to change the contents of the centre div and give the impression that we are changing pages. 

Knowing if a page was loaded from ajax or not Preview 09:05

In order for us to not load resources more than once, we need to be able to tell if a request came from ajax or whether the user manually entered the url into the address bar. 

Replacing all links with our dynamic links Preview 07:58

What we want to do now is go through our site and replace all anchor <a> tags with our <span> elements that we're using to dynamically load pages.

Small play button bug Preview 01:02

I found a small play button bug. It's really easy to fix so let's do that now. 

Changing the URL when we load a new page Preview 02:31

In this video I will show you how to manually change the url when the user loads the new page dynamically. 

Browse page Preview 02:30

As of now, the index page displays random albums to the user. We are going to create our browse page in this video and in the interest of keeping things short, it's just going to be a copy of our index page.

Artist info section Preview 05:30

So to begin our artist page, we will create the header section which displays the artist name along with a play button which starts playing the artist's music. 

Styling the artist info section Preview 04:33

Now we're just going to add some css to the code we wrote last time. 

Songs section Preview 05:31

Let's put the section in place which shows the artist's songs. We already have this code in album.php so we're going to take it from there and make some small modifications.

Albums section Preview 03:29

Now to finish off our artist page, let's add the albums section. 

Artist page play button Preview 01:47

We're now going to make the play button on the artist page start playing that artist's music.

Now playing bar links Preview 07:10

Now that we have our artist page set up, we can make the artist name on the navigation bar link to the artist page when clicked.

Creating our search input section Preview 06:32

Getting started on our search page, we will create the tex tbox that the user will use to search. 

Styling the search input Preview 04:26

Now we will apply css to the input we created in the last video.

Searching when the user stops typing Preview 07:41

In this video we will write the code which will perform a search for the user two seconds after they stop typing. 

Searching for songs Preview 06:55

Now let's get our search functionality set up so that the user can search for songs. 

Searching for artists Preview 08:04

Following on from the last lecture, let's implement the ability to search for artists.

Styling the artists search results section Preview 02:38

We have a very small amount of css that we will apply to our artists search results section.

Fixing the artist name bug Preview 02:52

In the last video I spotted a little bug with the artist names. It's a really easy fix so let's do that now.

Searching for albums Preview 04:57

Now we will implement the ability to search for albums.

Invalidating the search timer Preview 01:52

At the moment if we type something in the search box and then move to another page before the search was been performed, the timer will fire the search event and it will bring us back to the search page. We can fix this very easily by invalidating the timer when we move to another page.

Creating our playlist MySql tables Preview 02:37

We're going to need two tables for our playlists feature. We will create a playlists table and a playlistSongs table. 

Creating the playlist page Preview 05:56

We're going to create our playlist page now and also add the title and the button that will be used for creating new playlists.

The createPlaylist function Preview 07:03

Now we will create the JavaScrip function which makes the ajax call that creates our playlist. 

Create playlist file Preview 07:58

Now we just need to create the file that our ajax will call to create a playlist.

Creating the User class Preview 06:42

In order to start associating playlists to a certain user, we need to create a User class. 

Outputting the user's playlists Preview 05:30

As of now, we can create playlists but we can't see the playlists that we have created. Let's output the playlists now. 

Creating the Playlist class Preview 04:29

We're going to want a class for Playlist objects so that's what we're going to make in this video.

Playlist links Preview 02:31

We are now going to convert the playlists that are returned from the database into links so that when we click on them, we will be taken to that playlist's page.

Styling the playlists Preview 01:24

We just want to apply two lines of style to the playlists now. 

Creating the header section of the page Preview 08:21

So to kick off our playlist page, we're going to create the header section which will display information about the playlist. 

Displaying the playlist's songs Preview 05:12

In this video we're going to display the songs for that playlist. 

Delete playlist function Preview 02:54

Let's now write that JavaScript function which will make our delete playlist ajax call.

Delete playlist ajax Preview 04:42

The last thing to do is write the code for our file that our delete playlist JavaScript function will make the ajax call to.

Creating the options menu Preview 07:24

Showing the options menu Preview 07:07

Now we're going to make the options menu appear when the user clicks the options button.

Hiding the options menu Preview 04:50

We can now show the options menu but at the moment we have no way of closing it. Let's implement that now. 

Add to playlist dropdown menu Preview 04:37

Now we're going to begin implementing the dropdown which will be used to add a song to a playlist. 

Populating the dropdown with playlists Preview 04:12

In the last video we created our dropdown inside the options menu. In this video we will be populating the dropdown list with the names of the playlists that user owns.

Styling the dropdown menu Preview 03:07

In this video we will add a little css to make the appearance of the dropdown match the rest of the options menu.

When the dropdown menu is changed Preview 09:18

Now we are going to handle what happens when the value of the dropdown menu changes.

Saving songs to a playlist Preview 13:17

In this video we will create the ability for users to add songs to their playlists.

Bug fix: Adding to an empty playlist Preview 02:02

Copying options menu to other pages Preview 03:45

In this video we will make the options menu work across all pages.

Remove song from playlist function Preview 02:33

Now we're going to write the JavaScript function which will make the ajax call to remove  a song from the playlist.

Removing song ajax code Preview 05:53

Now all that's left to do for removing a song is to write the ajax code that our JavaScript function calls.

Settings page setup Preview 07:12

Now we will create and set up our settings page.

Logout button Preview 05:21

Now we're going to add the behaviour to our logout button so that it actually does log the user out. 

Settings link on the navigation menu Preview 05:09

In this video we will update the link on the navigation menu to point to the settings page as well as actually setting the text of the link to be the user's name. 

User details forms Preview 06:33

Now we will create the html forms that will allow the user to update their email and password.

Styling the user details forms Preview 05:51

Now let's add some style to the user details forms

Update email function Preview 04:10

In this video we will write the JavaScript function that will make the ajax call to update the user's email address.

Update email ajax code Preview 09:37

Now we will just write the code which will actually handler the ajax call and update our email.

Update password function Preview 03:33

So the user can now update their email address. What we will do is start implementing the ability to update passwords.

Update password ajax code Preview 12:09

Now let's just add the code that our update password JavaScript will call to update the password.

You made it! Congratulations! Preview 02:09

Congratulations! You completed the course! This isn't the end though, send me your requests for new features and new courses and I'll work on getting those to you!

Also, for additional tips, tricks and tutorials as well as updates on future courses, check out my facebook page:

http://facebook.com/reecekenney50

Thanks for watching! :) 

Reece