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

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

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 15 Hours | 10.8 GB

Learn JavaScript, PHP and MySQL by building your own music streaming website from scratch! A COMPLETE walk through!

The ULTIMATE guide to going from beginner to advanced developer at the hands of a Microsoft Software Engineer.

Ever wondered how Spotify works? Ever wanted to create your own music streaming service? This course will show you, step by step, how to create your own music streaming service just like Spotify. Your users will be able to:

  • Sign up
  • Search for all their favorite artists, albums and songs in real time!
  • Create and customize their own playlists
  • Control the music with all the usual controls such as play, pause, skip, previous, shuffle, repeat etc.
  • And much, much more!

Whether you are a complete beginner* or an experienced programmer, this course will be massively beneficial to you. By the end of this course you will be advanced in skills such as HTML, CSS, PHP, JQuery, JavaScript and MySQL. These skills are 100% essential to anyone who wants to one day work as a developer for a company such as Google, Facebook or Microsoft. To have these skills on your portfolio/resumé will make you highly desirable to potential employers as it proves that you have an understanding of all aspects of web development.

What You Will Learn

  • 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
Table of Contents

Setting up the sign up_ log in forms
1 Setting up your local server
2 Creating the login form
3 Creating the register form

Handling the user’s submitted data
4 Intro to PHP – Handling form submission
5 Form sanitation – Cleaning the input
6 Separating our code
7 Preparing our validation functions
8 Creating the Account class
9 Validating the username
10 Validating the name and emails
11 Validating the passwords
12 Checking if the sign up was successful
13 Outputting error messages
14 Creating our Constants class
15 Remembering form values

Completing the sign up _ log in process
16 Creating the users table
17 Connecting to our database from PHP
18 Inserting user details
19 Testing out the sign up process!
20 Query not working_ Watch this video
21 Last remaining validation checks
22 Login handler
23 Sessions

Styling the registration page
24 Adding a background image
25 Styling the login container
26 Styling our text boxes
27 Input placeholder color
28 Styling the submit buttons
29 Buttons to switch between forms
30 Showing and hiding the forms on press
31 Showing only the relevant form when data is submitted
32 Show_hide button – mouse pointer
33 Right section content
34 Applying style to the right section content
35 56_800+ icons FOR FREE – Icons8
36 Styling the error messages
37 Remembering the username after failed log in attempt

Creating the now playing bar
38 Quick overview of the index page
39 Now playing bar container
40 Creating the now playing bar element
41 Left_ center and middle sections of the bar
42 All the icons for our site
43 Adding our player buttons
44 Making the play and pause buttons larger
45 Progress bar parent elements
46 The progress bar
47 Album artwork
48 Track info labels
49 Volume bar

Navigation menu
50 Page containers
51 Creating our navigation bar container
52 Navigation bar site logo
53 Navigation items
54 Navigation search icon
55 Navigation links color change on hover

Tables and data
56 Overview of our MySQL table structure
57 Creating our database tables
58 Inserting data into the artists_ genres and albums tables
59 Inserting data into the songs table + FREE music files
60 Shortcut to inserting data into the songs table

‘Music you might like’ page
61 Organisational trick
62 Main view containers
63 Header and footer files
64 Getting albums from the database
65 Outputting the album artwork images
66 Styling the album artwork images
67 Styling the album title
68 Making the albums clickable links

Album page
69 Getting album id from url
70 Getting the artist of the album
71 Creating the Artist class
72 Creating the Album class
73 Album header section
74 Styling the header section
75 Displaying the number of songs in the album
76 Creating the Song class
77 Getting the songs on an album
78 Outputting the track count
79 Outputting the track name and artist name
80 Outputting the track duration
81 Styling the track list rows
82 Styling the track count
83 Track style finishing touches

The music player
84 Introduction to HTML5 Audio
85 Creating our initial playlist of 10 random songs
86 Including JQuery
87 Set track function setup
88 Set track function
89 Playing and pausing the song via buttons
90 Introduction to Ajax calls
91 Getting a song via ajax
92 Getting the artist via ajax
93 Getting the album via Ajax
94 Updating the plays count when a song is played
95 Displaying the time remaining label
96 Formatting the time remaining
97 Updating the progress bar as the song plays
98 Dragging the progress bar on click
99 Controlling the volume
100 Updating the volume progress bar
101 Preventing controls from highlighting on mouse drag
102 Skipping to the next song
103 Song repeat mode
104 Repeat button
105 Playing the next song when current song ends
106 Previous song button
107 Mute button
108 Shuffle button
109 Shuffle – Part 1
110 Shuffle – Part 2
111 Playing songs by clicking on the song’s play button
112 Fixing the song’s play button bug

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

Artist page
120 Artist info section
121 Styling the artist info section
122 Songs section
123 Albums section
124 Artist page play button
125 Now playing bar links

Search page
126 Creating our search input section
127 Styling the search input
128 Searching when the user stops typing
129 Searching for songs
130 Searching for artists
131 Styling the artists search results section
132 Fixing the artist name bug
133 Searching for albums
134 Invalidating the search timer

Your music page (playlists)
135 Creating our playlist MySql tables
136 Creating the playlist page
137 The createPlaylist function
138 Create playlist file
139 Creating the User class
140 Outputting the user’s playlists
141 Creating the Playlist class
142 Playlist links
143 Styling the playlists

The playlist page
144 Creating the header section of the page
145 Displaying the playlist’s songs
146 Delete playlist function
147 Delete playlist ajax

Song options menu
148 Creating the options menu
149 Showing the options menu
150 Hiding the options menu
151 Add to playlist dropdown menu
152 Populating the dropdown with playlists
153 Styling the dropdown menu
154 When the dropdown menu is changed
155 Saving songs to a playlist
156 Copying options menu to other pages
157 Remove song from playlist function
158 Removing song ajax code

Settings page
159 Settings page setup
160 Logout button
161 Settings link on the navigation menu
162 User details forms
163 Styling the user details forms
164 Update email function
165 Update email ajax code
166 Update password function
167 Update password ajax code
168 You made it! Congratulations!