Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

So let's get started! Unfortunately the first lecture is the least exciting, but it needs to be done. We're setting up the local server which will allow you to test your sites locally! Don't worry, it's super easy, we just need to download one thing :)

So in this lecture we will be creating the html for our login form! As the name suggests, this is what the user will use to log into the website. 

This lecture will be fairly similar to the previous one, but we are creating our registration form instead. This is what the user will use to sign up to our website.

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

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!

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! 

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 :)

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. 

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.

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.

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

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.

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. 

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. 

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! 

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 :)

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.

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. 

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

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. 

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. 

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. 

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. 

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

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. 

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

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

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

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

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!

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

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. 

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.

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

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

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.

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!

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

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

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. 

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

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.

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

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!

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

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

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

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

Now we're going to create the volume bar!

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

Now lets set up the container for the navigation bar.

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

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

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

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. 

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.

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

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

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

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.

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.

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. 

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. 

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

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

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

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. 

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

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. 

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

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.

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

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

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

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.

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. 

Now let's output the song and artist name.

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

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. 

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

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

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.

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. 

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.

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

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.