To gain more experience in object-oriented development in PHP, as well as in API development and in the usage of AJAX requests, I redesigned one of my previous projects : a monitoring website that displays information in real-time.
The api.php file serves as a link between HTTP requests and calls to various methods within the Classes I have developed.
The front-end part, on the other hand, is entirely handled by JavaScript with AJAX requests and ChartJS for the graphs, and by Tailwind for the CSS part.
🗺️ Overview
💻 System
The system page displays a variety of information related to the machine hosting the monitoring website.
🔳 CPU
The CPU page displays various informations related to the CPU, including real-time updates of the frequency for each thread. You can stop this updating by clicking on the stop button, as demonstrated in this video.
💾 RAM
The RAM page displays various informations related to the volatile memory (RAM) and to the SWAP, with real-time graph and metrics as shown in this video.
⚙️ TOP
The TOP page displays various real-time informations related to the processes. You can sort theses processes by RAM/CPU consumption with the right select menu as demonstrated in the video.
✨ Responsive
All pages of this project are responsive, meaning they adapt to the screen size accordingly.
🤝 Thanks
- https://github.com/dylanaraps/neofetch for the ascii logos on the specs page.
📂 Source
The source code and installation instructions are accessible here
You’ll also find a Dockerfile there if you want to test the application locally.