Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Infinite Scroll Project AJAX MySQL API PHP jQuery
Rating: 4.1 out of 5(428 ratings)
44,892 students

Infinite Scroll Project AJAX MySQL API PHP jQuery

Explore how to create a web application that sends requests to the server for additional data as users scroll the page
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • connecting to an API
  • setting up a PHP database API
  • using AJAX to pull JSON data from the backend
  • getting MySQL data into a web application

Course content

2 sections • 21 lectures • 1h 33m total length

  • Infinite Scroll Introduction7:15

    Build an infinite scroll web app from scratch with PHP and MySQL, delivering a JSON API, using jQuery and AJAX to load content on scroll.

  • Scroll project Resources5:25

    Learn to set up brackets editor and a local zap with apache, mysql, and phpmyadmin, then use jquery and ajax for infinite scroll content.

  • Setup basic application page3:33

    Create a basic one-page html app and load content via a jQuery AJAX call into a content container; use the Google CDN and PHP to query a database.

  • Setup Database connection PHP6:17

    Define db host, user, password, and database name in a php file, establish a mysqli connection with error handling, then create API and blog posts tables (id, content, date).

  • Source Code conn.php0:04
  • How to populate database with lorem ipsum text PHP10:38

    Populate a MySQL database with lorem ipsum text using PHP by building build.php, including the database connection, and inserting 50 placeholder posts into the posts table with Unix timestamps.

  • Source Code Build.php0:05
  • Output API contents PHP6:48

    Build a PHP API endpoint that connects to a MySQL database, selects posts ordered by ID with dynamic limit and offset, and returns results as JSON for AJAX consumption.

  • App development overview PHP3:33

    Outline the ajax-powered workflow from the index page to the php api, including establishing database connections, populating the posts table, and returning json data.

  • Create AJAX call to api jQuery and PHP7:52

    Create a jQuery ajax call to a PHP API, posting data and receiving a JSON response. Test with varying limits to load multiple items and inspect content and id arrays.

  • load api data output it to HTML jQuery5:43

    Learn to fetch items via ajax api calls with offset, loop through results, and build html blocks appended to content area. Style each block with a box, padding, and borders.

  • debugging and adding offset values PHP7:43

    debug and implement offset handling in the php ajax api, fix syntax errors, ensure the offset is passed and used, and validate with isset for zero-based starts.

  • jQuery scroll detection2:46

    Practice jQuery scroll detection to trigger a loader and load more items when the window nears the bottom, using document height, window height, and an offset.

  • Load more entries tweak source code jQuery6:01

    Debug the infinite scroll by fixing ajax calls and offset handling in the query. Use a hold load flag to prevent concurrent requests and stop when no data remains.

  • PHP code Overview8:13

    Explore how the PHP code powers an infinite scroll by loading data in chunks via AJAX from a MySQL database, using offset and limit, with content.php and API returning JSON.

  • PHP code examples0:22
  • jQuery Code review10:00

    review of jquery code for an infinite scroll using ajax calls to a php api with a mysql database; manage offset, hold load, and dynamically append content on window scroll.

  • index.html jQuery source code0:24

Requirements

  • PHP working knowledge
  • MySQL working knowledge
  • jQuery AJAX working knowledge

Description

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination.  This technique popular is used on many websites and this course will show you how to build one yourself from scratch.

Best of all this course provides a great learning experience on how to develop an API that can return database content into the front end.  Learn how to combine technologies and the steps needed to plan out the building of applications. Explore how you can use AJAX to send requests to a server API returning content in a JSON format to be added to your web page content.

Prerequisites to this course include working knowledge of jQuery, JavaScript and PHP.  We cover the aspects of the languages needed to create the API endpoint and to query the endpoint for data.

One of the best ways to learn programming is by projects and this project is perfect since it combines the use of multiple technologies within one application so that students get a real world experience. 

  • Learn how to setup the structure of your web application
  • Find out about creating a PHP database connection
  • Create a simple PHP application to populate the database with lorem ipsum text
  • Explore how an API works outputting content from the MySQL database into JSON format
  • Use PHP code to build a customized JSON output
  • Explore how easy it is to make AJAX requests with jQuery
  • Use JavaScript to detect scroll and more
  • Assemble your HTML page dynamically
  • Examine how web applications are built

Source Code is included to get you started quickly.

Taught by an instructor with over 18 years of web development experience, ready to help answer any questions you may have.

Join now and start building your own applications today.


Who this course is for:

  • application developers
  • web developers

Report abuse