There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Create a Spotify Clone from Scratch – JavaScript, PHP, MySQL

Video Introducing this tutorial

Setting up the sign up/ log in forms :
Setting up your local server
Creating the login form
Creating the register form

Handling the user's submitted data :
Intro to PHP - Handling form submission
Form sanitation - Cleaning the input
Separating our code
Preparing our validation functions
Creating the Account class
Validating the username
Validating the name and emails
Validating the passwords
Checking if the sign up was successful
Outputting error messages
Creating our Constants class
Remembering form values

Completing the sign up / log in process :
Creating the users table
Connecting to our database from PHP
Inserting user details
Testing out the sign up process!
Query not working? Watch this video
Last remaining validation checks
Login handler

Styling the registration page :
Adding a background image
Styling the login container
Styling our text boxes
Input placeholder color
Styling the submit buttons
Buttons to switch between forms
Showing and hiding the forms on press
Showing only the relevant form when data is submitted
Show/hide button - mouse pointer
Right section content
Applying style to the right section content
56,800+ icons FOR FREE - Icons8
Styling the error messages
Remembering the username after failed log in attempt

Creating the now playing bar :
Quick overview of the index page
Now playing bar container
Creating the now playing bar element
Left, center and middle sections of the bar
All the icons for our site
Adding our player buttons
Making the play and pause buttons larger
Progress bar parent elements
The progress bar
Album artwork
Track info labels
Volume bar

Navigation menu :
Page containers
Creating our navigation bar container
Navigation bar site logo
Navigation items
Navigation search icon
Navigation links color change on hover

Tables and data :
Overview of our MySQL table structure
Creating our database tables
Inserting data into the artists, genres and albums tables
Inserting data into the songs table + FREE music files
Shortcut to inserting data into the songs table

'Music you might like' page :
Organisational trick
Main view containers
Header and footer files
Getting albums from the database
Outputting the album artwork images
Styling the album artwork images
Styling the album title
Making the albums clickable links

Album page :
Getting album id from url
Getting the artist of the album
Creating the Artist class
Creating the Album class
Album header section
Styling the header section
Displaying the number of songs in the album
Creating the Song class
Getting the songs on an album
Outputting the track count
Outputting the track name and artist name
Outputting the track duration
Styling the track list rows
Styling the track count
Track style finishing touches

The music player :
Introduction to HTML5 Audio
Creating our initial playlist of 10 random songs
Including JQuery
Set track function setup
Set track function
Playing and pausing the song via buttons
Introduction to Ajax calls
Getting a song via ajax
Getting the artist via ajax
Getting the album via Ajax
Updating the plays count when a song is played
Displaying the time remaining label
Formatting the time remaining
Updating the progress bar as the song plays
Dragging the progress bar on click
Controlling the volume
Updating the volume progress bar
Preventing controls from highlighting on mouse drag
Skipping to the next song
Song repeat mode
Repeat button
Playing the next song when current song ends
Previous song button
Mute button
Shuffle button
Shuffle - Part 1
Shuffle - Part 2
Playing songs by clicking on the song's play button
Fixing the song's play button bug

Seamless page transitions :
UserLoggedIn JavaScript variable
Changing pages dynamically
Knowing if a page was loaded from ajax or not
Replacing all links with our dynamic links
Small play button bug
Changing the URL when we load a new page
Browse page

Artist page :
Artist info section
Styling the artist info section
Songs section
Albums section
Artist page play button
Now playing bar links

Search page :
Creating our search input section
Styling the search input
Searching when the user stops typing
Searching for songs
Searching for artists
Styling the artists search results section
Fixing the artist name bug
Searching for albums
Invalidating the search timer

Your music page (playlists) :
Creating our playlist MySql tables
Creating the playlist page
The createPlaylist function
Create playlist file
Creating the User class
Outputting the user's playlists
Creating the Playlist class
Playlist links
Styling the playlists

The playlist page :
Creating the header section of the page
Displaying the playlist's songs
Delete playlist function
Delete playlist ajax

Song options menu :
Creating the options menu
Showing the options menu
Hiding the options menu
Add to playlist dropdown menu
Populating the dropdown with playlists
Styling the dropdown menu
When the dropdown menu is changed
Saving songs to a playlist
Copying options menu to other pages
Remove song from playlist function
Removing song ajax code

Settings page :
Settings page setup
Logout button
Settings link on the navigation menu
User details forms
Styling the user details forms
Update email function
Update email ajax code
Update password function
Update password ajax code
You made it! Congratulations!

You Have Got Gift 25% OFF

Use this Coupon Code “J3JKN396