آموزش یک Spotify Clone از ابتدا بسازید: JavaScript PHP و MySQL

سرفصل ها و درس ها

راه اندازی فرم های ثبت نام/ورود به سیستم 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

• مقدمه PHP - مدیریت ارسال فرم 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

• اتصال به پایگاه داده ما از طریق PHP 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

طراحی صفحه ثبت نام 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

• بیش از 56800 نماد به صورت رایگان - Icons8 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

• نمای کلی ساختار جدول MySQL ما 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

• ایجاد کلاس Artist 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

• مقدمه ای بر HTML5 Audio Introduction to HTML5 Audio

• ایجاد لیست پخش اولیه ما از 10 آهنگ تصادفی Creating our initial playlist of 10 random songs

• از جمله JQuery Including JQuery

• تنظیم عملکرد آهنگ Set track function setup

• تنظیم عملکرد آهنگ Set track function

• پخش و مکث آهنگ از طریق دکمه ها Playing and pausing the song via buttons

• مقدمه ای بر تماس های آژاکس Introduction to Ajax calls

• دریافت آهنگ از طریق ajax Getting a song via ajax

• دریافت هنرمند از طریق ajax Getting the artist via ajax

• دریافت آلبوم از طریق 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 - قسمت 1 Shuffle - Part 1

• Shuffle - قسمت 2 Shuffle - Part 2

• پخش آهنگ با کلیک بر روی دکمه پخش آهنگ Playing songs by clicking on the song's play button

• رفع اشکال دکمه پخش آهنگ Fixing the song's play button bug

انتقال بدون درز صفحه Seamless page transitions

• متغیر جاوا اسکریپت UserLoggedIn UserLoggedIn JavaScript variable

• تغییر صفحات به صورت پویا Changing pages dynamically

• دانستن اینکه آیا صفحه ای از ajax بارگذاری شده است یا خیر Knowing if a page was loaded from ajax or not

• جایگزینی همه پیوندها با پیوندهای پویا Replacing all links with our dynamic links

• اشکال دکمه بازی کوچک Small play button bug

• وقتی صفحه جدیدی را بارگذاری می کنیم URL را تغییر می دهیم 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)

• ایجاد جداول MySql لیست پخش ما Creating our playlist MySql tables

• ایجاد صفحه لیست پخش Creating the playlist page

• تابع createPlaylist The createPlaylist function

• فایل لیست پخش ایجاد کنید Create playlist file

• ایجاد کلاس User Creating the User class

• خروجی لیست پخش کاربر Outputting the user's playlists

• ایجاد کلاس Playlist 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

• حذف لیست پخش ajax 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

• رفع اشکال: افزودن به یک لیست پخش خالی Bug fix: Adding to an empty 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!