Dynamic Table of Contents in PHP Free Source Code


This simple project is called Dynamic Table of Contents. The application is a simple web application developed in PHP and MySQL databases. The main purpose of this simple source code is to provide the IT/CS students and new programmers an idea on how to generate a Table of Contents in CMS using PHP language. The application has a simple and pleasant user interface using Bootstrap v5 Framework. It consists of user-friendly features and functionalities.

How does the Dynamic Table of Contents work?

The Dynamic Table of Contents is an application that serves as a simple Content Management System (CMS). The project is mainly developed to demonstrate the implementation of a dynamic table of contents for the site contents. It contains a Create, Read, Update, and Delete (CRUD) operation for posts/articles on the site. On the content view page, the system application automatically generates a Table of Content which extracts the headings (h1, h2, h3, h4, h5, h6) HTML tag element from the article content and lists it. The table of contents also allows the user to navigate to a specific part of the content by clicking the heading item listed.

What are Technologies used?

Here is the list of technologies used to develop this Dynamic Table of Contents:

  • VS Code Editor
  • PHP
  • MySQL Database
  • HTML
  • CSS
  • JavaScript (JS)
  • Ajax Requests
  • jQuery
  • Bootstrap Framework

What are Features and Functionalities?

Here are the Features and Functionalities of the Dynamic Table of Contents App:

  • Content/Article List Page
  • Add New Content
  • Update Content
  • View Content
  • Automatically Generate Table of Contents
  • Delete Content


Here are the snapshots of some interfaces of the Dynamic Table of Contents App:

Home/Content List Page

Dynamic Table of Contents App - PHP

Content Form Modal

Dynamic Table of Contents App - PHP

Content View Page

Dynamic Table of Contents App - PHP

Table of Contents Panel

Dynamic Table of Contents App - PHP

The Dynamic Table of Contents mini-project source code zip file is provided on this site and is free to download. Feel free to download and modify it the way you wanted. The download button is located below this article.

Note: This application is mainly developed for educational purposes only.

How to Run?


  • Download and Install any local web server such as XAMPP.
  • Download the provided source code zip file. (download button is located below)

System Installation/Setup

  1. Open your XAMPP Control Panel and start Apache and MySQL.
  2. Extract the downloaded source code zip file.
  3. Copy the extracted source code folder and paste it into the XAMPP's "htdocs" directory.
  4. Browse the PHPMyAdmin in a browser. i.e. http://localhost/phpmyadmin
  5. Create a new database named simple_site_db.
  6. Import the provided SQL file. The file is known as simple_site_db.sql located inside the database folder.
  7. Browse the Dynamic Table of Contents Application in a browser. i.e. http://localhost/php-dynamic-table-of-contents/.


That's it! You can test and explore the features and functionalities of this simple web application. I hope this Dynamic Table of Contents Source Code in PHP will help you with what you are looking for and that you'll find this useful for your current and future PHP Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Enjoy =)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment