IIRF Online > Development > Web Development > JavaScript > Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
Make a Spotify Clone from Scratch: JavaScript PHP and MySQL by Udemy
Learn JavaScript, PHP and MySQL by building the ultimate music streaming website from scratch! The complete guide!
Course Highlights
- Build your own music streaming service like Spotify
- Master important areas of development in JavaScript, PHP, HTML and MySQL
- Discover important techniques that are essential for any aspiring software engineers
Skills you will learn!
Overview
What You'll Learn in This Course
- Create a personalized music streaming platform similar to Spotify.
- Gain proficiency in key development domains such as JavaScript, PHP, HTML, and MySQL.
- Explore fundamental techniques crucial for burgeoning software engineers.
- Spotify replica entirely from the ground up, taking you through each step.
What can Learners Expect From this Course?
This extensive course walks students through the complexities of JavaScript to create dynamic and responsive user interfaces while offering a hands-on understanding of both frontend and backend development.
Learners will explore server-side scripting, grasping the logic behind web applications, with a particular focus on PHP. MySQL is included to guarantee that students have a comprehensive understanding of database management and can easily incorporate data into their projects.
By the end of the course, students will have both the knowledge and the hands-on experience needed to confidently create an application that is modelled after Spotify, demonstrating their mastery of full-stack web development.
Curriculum
3 Topics
Setting up your local server
Creating the login form
Creating the register form
12 Topics
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
8 Topics
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
Sessions
14 Topics
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
56800+ icons FOR FREE - Icons8
Styling the error messages
Remembering the username after failed log in attempt
12 Topics
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
6 Topics
Page containers
Creating our navigation bar container
Navigation bar site logo
Navigation items
Navigation search icon
Navigation links color change on hover
5 Topics
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
8 Topics
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
15 Topics
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
29 Topics
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
7 Topics
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
6 Topics
Artist info section
Styling the artist info section
Songs section
Albums section
Artist page play button
Now playing bar links
9 Topics
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
9 Topics
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
4 Topics
Creating the header section of the page
Displaying the playlist's songs
Delete playlist function
Delete playlist ajax
12 Topics
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
Bug fix: Adding to an empty playlist
Copying options menu to other pages
Remove song from playlist function
Removing song ajax code
10 Topics
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!
Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
Related JavaScript Courses
Frequently Asked Questions
This course is for aspiring software engineers and web developers who want to work at companies like Google, Facebook, or Microsoft.
Anyone who wants to master HTML, Javascript, PHP, and MySQL
The course spans 14 hours and 58 minutes.
A Spotify clone is a music streaming platform that replicates the features and functionality of the popular music service Spotify.
Tailor the platform to your preferences, introduce new features, and monetize it according to your needs.
The key technologies utilized in Spotify's backend are as follows: Spotify's primary programming language is Java.
Thank You!
Your review has been submitted successfully.