{"id":164167,"date":"2025-01-30T14:13:00","date_gmt":"2025-01-30T14:13:00","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=164167"},"modified":"2025-04-07T09:36:17","modified_gmt":"2025-04-07T09:36:17","slug":"esp32-rfid-user-management-web-server","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-rfid-user-management-web-server\/","title":{"rendered":"ESP32 RFID User Management System with Web Server"},"content":{"rendered":"\n<p>In this project, you&#8217;ll build an RFID user management system with a web server that runs on an ESP32. The ESP32 board is connected to an MFRC522 RFID reader and a microSD card that will store all the user data. The ESP32 will be programmed using Arduino IDE and with the <span class=\"rnthl rntliteral\">Arduino_MFRC522v2<\/span> library.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System with Web Server Arduino IDE\" class=\"wp-image-164647\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?w=1920&amp;quality=100&amp;strip=all&amp;ssl=1 1920w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?resize=1536%2C864&amp;quality=100&amp;strip=all&amp;ssl=1 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p>In this tutorial, we\u2019ll cover the following topics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#project-overview\" title=\"\">Project Overview<\/a><\/li>\n\n\n\n<li><a href=\"#parts-required\" title=\"\">Parts Required For This Project<\/a><\/li>\n\n\n\n<li><a href=\"#rfid-reader-writer-intro\" title=\"\">MFRC522 RFID Reader\/Writer<\/a><\/li>\n\n\n\n<li><a href=\"#intromicrosdcard\" title=\"\">MicroSD Card Module<\/a><\/li>\n\n\n\n<li><a href=\"#wiring-the-circuit\" title=\"\">ESP32 Project Circuit &#8211; Wiring to All the Components<\/a><\/li>\n\n\n\n<li><a href=\"#arduino-ide\" title=\"\">Preparing the Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"#organizing-web-server-files\" title=\"\">Organizing Your Files<\/a><\/li>\n\n\n\n<li><a href=\"#rfid-web-server-esp32-code\" title=\"\">Code &#8211; ESP32 RFID User Management System Web Server<\/a><\/li>\n\n\n\n<li><a href=\"#demonstration\" title=\"\">Demonstration<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"project-overview\">Project Overview<\/h2>\n\n\n\n<p>The following diagram shows a high-level overview of how the project works.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1200\" height=\"829\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server-Management-System-01.jpg?resize=1200%2C829&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID Web Server Management System Project Overview\" class=\"wp-image-164637\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server-Management-System-01.jpg?w=1200&amp;quality=100&amp;strip=all&amp;ssl=1 1200w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server-Management-System-01.jpg?resize=300%2C207&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server-Management-System-01.jpg?resize=1024%2C707&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server-Management-System-01.jpg?resize=768%2C531&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p><strong>1) <\/strong>When you approximate an RFID tag to the MIFARE reader, it will read its UID and send information about it to the ESP32. When it reads a tag, the buzzer will beep and an LED will turn on.<\/p>\n\n\n\n<p><strong>2)<\/strong> The ESP32 records the time of that interaction and saves the time and UUID on the microSD card on a file called <em>log.txt<\/em>.<\/p>\n\n\n\n<p><strong>3)<\/strong> The ESP32 also hosts a web server to display and manage the information from the microSD card.<\/p>\n\n\n\n<p><strong>4)<\/strong> The root (<span class=\"rnthl rntliteral\">\/<\/span>) URL shows the full log (saved on the microSD card module <em>log.txt<\/em>) with the timestamp and the user UID.<\/p>\n\n\n\n<p><strong>5)<\/strong> There&#8217;s another page on <span class=\"rnthl rntliteral\">\/add-user<\/span> that allows you to add users and their role using a form.<\/p>\n\n\n\n<p><strong>6)<\/strong> The data entered via this form will be saved on the <em>user.txt<\/em> file saved on the microSD card.<\/p>\n\n\n\n<p><strong>7)<\/strong> There is another page on <span class=\"rnthl rntliteral\">\/manage-users<\/span> that allows to consult and delete users.<\/p>\n\n\n\n<p><strong>8)<\/strong> Basically, this page allows you to interact with the <em>users.txt <\/em>file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"parts-required\">Parts Required<\/h2>\n\n\n\n<p>Here&#8217;s a list of the required components for this project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32 DOIT DEVKIT V1 Board<\/a>&nbsp;(read&nbsp;<a href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP32 Dev Boards<\/a>)<\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mfrc522-rfid-reader\/\" target=\"_blank\" rel=\"noreferrer noopener\">MFRC522 RFID Reader\/Writer + tags<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noopener\" title=\"\">MicroSD Card Module<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/microsd-card-raspberry-pi-16gb-class-10\/\" target=\"_blank\" rel=\"noreferrer noopener\">MicroSD Card<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">1x 5mm LED<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noreferrer noopener\">1x 220 Ohm Resistor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3-24v-piezo-buzzer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Piezo Buzzer<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noreferrer noopener\">1x 1k Ohm Resistor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noreferrer noopener\">Breadboard<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jumper wires<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rfid-reader-writer-intro\">MFRC522 RFID Reader\/Writer<\/h2>\n\n\n\n<p>In this tutorial, we&#8217;ll be using the <a href=\"https:\/\/makeradvisor.com\/tools\/mfrc522-rfid-reader\/\" target=\"_blank\" rel=\"noopener\" title=\"\">MFRC522 RFID reader\/writer<\/a> and that&#8217;s the one we recommend you getting to interface with the ESP32.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Reader-Writer-RFID-MFRC522-Module.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Reader Writer RFID MFRC522 Module\" class=\"wp-image-163838\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Reader-Writer-RFID-MFRC522-Module.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Reader-Writer-RFID-MFRC522-Module.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>You also need some RFID tags, we have a keychain and an electromagnetic card that come with the MFRC522 RFID Reader\/Writer module. Each tag has a unique identification (UID) that will be assigned to each user.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/RFID-MFRC522-Card-Tags-Keychain.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"RFID MFRC522 Card Tags Keychain\" class=\"wp-image-163845\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/RFID-MFRC522-Card-Tags-Keychain.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/RFID-MFRC522-Card-Tags-Keychain.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclblue\"><strong>Recommended reading:<\/strong> <a href=\"https:\/\/randomnerdtutorials.com\/esp32-mfrc522-rfid-reader-arduino\/\">ESP32 with MFRC522 RFID Reader\/Writer (Arduino IDE) &#8211; Getting Started Guide<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"MFRC522-RFID-pinout\">Wiring the ESP32 to the MFRC522 RFID Reader<\/h3>\n\n\n\n<p>The MFRC522 RFID reader works at 3.3V and we&#8217;ll be using <a href=\"https:\/\/randomnerdtutorials.com\/esp32-spi-communication-arduino\/\" title=\"\">SPI communication protocol<\/a>. We&#8217;ll connect the MFRC522 RFID Reader to the ESP32 default SPI pins, use the next table as a reference.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Reader-Writer-RFID-MFRC522-Module-ESP32-Board-Circuit.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Reader Writer RFID MFRC522 Module ESP32 Board Circuit\" class=\"wp-image-163839\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Reader-Writer-RFID-MFRC522-Module-ESP32-Board-Circuit.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Reader-Writer-RFID-MFRC522-Module-ESP32-Board-Circuit.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th class=\"has-text-align-left\" data-align=\"left\">MFRC522 RFID Reader<\/th><th class=\"has-text-align-left\" data-align=\"left\">ESP32<\/th><td><strong>Description<\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">SDA<\/td><td class=\"has-text-align-left\" data-align=\"left\">GPIO 5<\/td><td>SPI signal input, I2C data line, or UART data input<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">SCK<\/td><td class=\"has-text-align-left\" data-align=\"left\">GPIO 18<\/td><td>SPI clock<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">MOSI<\/td><td class=\"has-text-align-left\" data-align=\"left\">GPIO 23<\/td><td>SPI data input<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">MISO<\/td><td class=\"has-text-align-left\" data-align=\"left\">GPIO 19<\/td><td>SPI master-in-slave-out, I2C serial clock, or UART serial output<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">IRQ<\/td><td class=\"has-text-align-left\" data-align=\"left\">Don&#8217;t connect<\/td><td>Interrupt pin; signals the microcontroller when an RFID tag is nearby<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">GND<\/td><td class=\"has-text-align-left\" data-align=\"left\">GND<\/td><td><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">RST<\/td><td class=\"has-text-align-left\" data-align=\"left\">GPIO 21<\/td><td>LOW signal to put the module in power-down mode; send a HIGH signal to reset the module<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">3.3V<\/td><td class=\"has-text-align-left\" data-align=\"left\">3.3V<\/td><td>Power supply (2.5-3.3V)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"intromicrosdcard\">MicroSD Card Module<\/h2>\n\n\n\n<p>There are different <a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noopener\" title=\"\">microSD card modules<\/a> compatible with the ESP32. We&#8217;re using the microSD card module sown in the following figure &#8211; it communicates using SPI communication protocol. You can use any other microSD card module with an SPI interface.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"MicroSD card module for ESP32 ESP8266 Arduino SPI\" class=\"wp-image-102279\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/02\/microSD-card-module-ESP32-Arduino-ESP8266.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>To learn how to use the microSD card module with the ESP32, you can read the next tutorial:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-microsd-card-arduino\/\">ESP32: Guide for MicroSD Card Module using Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"interfacemicrosdcard\">Wiring the MicroSD Card Module to the ESP32<\/h3>\n\n\n\n<p>The microSD card module communicates using <a href=\"https:\/\/randomnerdtutorials.com\/esp32-spi-communication-arduino\/\" title=\"\">SPI communication protocol<\/a>. You can connect it to the ESP32 using the default SPI pins.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>MicroSD card module<\/strong><\/td><td><strong>ESP32<\/strong><\/td><\/tr><tr><td>3V3<\/td><td><span class=\"rnthl rntcred\">3.3V<\/span><\/td><\/tr><tr><td>CS<\/td><td><span class=\"rnthl rntclblue\">GPIO 15<\/span><\/td><\/tr><tr><td>MOSI<\/td><td><span class=\"rnthl rntclblue\">GPIO 23<\/span><\/td><\/tr><tr><td>CLK<\/td><td><span class=\"rnthl rntclblue\">GPIO 18<\/span><\/td><\/tr><tr><td>MISO<\/td><td><span class=\"rnthl rntclblue\">GPIO 19<\/span><\/td><\/tr><tr><td>GND<\/td><td><span class=\"rnthl rntcblack\">GND<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Preparing the microSD Card<\/h2>\n\n\n\n<p>Before proceeding with the tutorial, make sure you <strong>format your microSD card as FAT32<\/strong>. Follow the next instructions to format your microSD card or use a software tool like <a href=\"https:\/\/www.sdcard.org\/downloads\/formatter\/\" target=\"_blank\" rel=\"noreferrer noopener\">SD Card Formatter<\/a> (compatible with Windows and Mac OS).<\/p>\n\n\n\n<p><strong>1.<\/strong>&nbsp;Insert the microSD card into your computer. Go to&nbsp;<strong>My Computer<\/strong>&nbsp;and right-click on the SD card. Select&nbsp;<strong>Format&nbsp;<\/strong>as shown in the figure below.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/rntlab.com\/wp-content\/uploads\/2018\/05\/format-SD-card-1.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"MicroSD Card Module format sd card\" class=\"wp-image-11805\"\/><\/figure><\/div>\n\n\n<p><strong>2.&nbsp;<\/strong>A new window pops up. Select&nbsp;<strong>FAT32<\/strong>, press&nbsp;<strong>Start<\/strong>&nbsp;to initialize the formatting process and follow the onscreen instructions.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/rntlab.com\/wp-content\/uploads\/2018\/05\/format-SD-card-2.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"MicroSD Card Module format sd card\" class=\"wp-image-11806\"\/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"wiring-the-circuit\">ESP32 Project Circuit &#8211; Wiring to All the Components<\/h2>\n\n\n\n<p>Besides the RFID reader\/writer and the microSD card, we&#8217;ll also connect a piezo buzzer and an LED to give us some feedback to let us know that the MFRC522 RFID Reader read a new tag.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>LED \u2014 connected to GPIO 22 (via a 220 Ohm resistor)<\/li>\n\n\n\n<li>Buzzer \u2014 connected to GPIO 4 (via a 1k Ohm resistor<\/li>\n<\/ul>\n\n\n\n<p>Here&#8217;s how the final circuit looks like:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"506\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Wiring-Circuit-Diagram.jpg?resize=900%2C506&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Wiring Circuit Diagram\" class=\"wp-image-164260\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Wiring-Circuit-Diagram.jpg?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Wiring-Circuit-Diagram.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Wiring-Circuit-Diagram.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"arduino-ide\">Preparing the Arduino IDE<\/h2>\n\n\n\n<p>We\u2019ll program the ESP32 board using Arduino IDE. So, make sure you have the ESP32 add-on installed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp32-arduino-ide-2-0\/\">Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n<p>To upload the HTML and CSS files needed to build this project to the ESP32 flash memory filesystem (LittleFS), we\u2019ll use a plugin for Arduino IDE:&nbsp;<strong>LittleFS<\/strong>&nbsp;<strong>Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin in your Arduino IDE 2 if you haven\u2019t already:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/arduino-ide-2-install-esp32-littlefs\/\">Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Installing the&nbsp;Arduino_MFRC522v2 Library<\/h3>\n\n\n\n<p>For this tutorial, we&#8217;ll use the <span class=\"rnthl rntliteral\">MFRC522v2.h<\/span> library to control the RFID reader. In the Arduino IDE, go to&nbsp;<strong>Sketch&nbsp;<\/strong>&gt; I<strong>nclude Library<\/strong>&nbsp;&gt;&nbsp;<strong>Manage Libraries<\/strong>&nbsp;or click on the Library Manager icon at the left sidebar.<\/p>\n\n\n\n<p>Search for <strong>MFRC522v2<\/strong> and install the library by GithubCommunity.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"348\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Installing-RFID-MFRC522v2-Library-Arduino-IDE.png?resize=319%2C348&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing RFID MFRC522v2 Library Arduino IDE\" class=\"wp-image-163709\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Installing-RFID-MFRC522v2-Library-Arduino-IDE.png?w=319&amp;quality=100&amp;strip=all&amp;ssl=1 319w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/Installing-RFID-MFRC522v2-Library-Arduino-IDE.png?resize=275%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 275w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Async Web Server Libraries<\/h3>\n\n\n\n<p>We&#8217;ll build the web server using the following libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer&nbsp;<\/a>by ESP32Async<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/ESP32Async\/AsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">AsyncTCP<\/a> by ESP32Async<\/li>\n<\/ul>\n\n\n\n<p>You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon at the left sidebar.<\/p>\n\n\n\n<p>Search for <span class=\"rnthl rntliteral\">ESPAsyncWebServer<\/span> and install the <strong>ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"586\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing ESPAsyncWebServer ESP32 Arduino IDE\" class=\"wp-image-167890\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=300%2C264&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<p>Then, install the AsyncTCP library. Search for <span class=\"rnthl rntliteral\">AsyncTCP<\/span> and install the <strong>AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"586\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing AsyncTCP ESP32 Arduino IDE\" class=\"wp-image-167886\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?w=722&amp;quality=100&amp;strip=all&amp;ssl=1 722w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=300%2C243&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"organizing-web-server-files\">Organizing Your Files<\/h2>\n\n\n\n<p>To keep the project organized and make it easier to understand, we\u2019ll create 6 files to build the web server:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Arduino sketch<\/strong>: to handle the web server, RFID reader and MicroSD card;<\/li>\n\n\n\n<li><strong>full-log.html<\/strong>: loads all the log of every RFID card that has been scanned and its user data;<\/li>\n\n\n\n<li><strong>manage-users.html<\/strong>: web page that allows you to view and delete users;<\/li>\n\n\n\n<li><strong>add-user.html<\/strong>: web page that allows you to add new users with a unique UID;<\/li>\n\n\n\n<li><strong>get.html<\/strong>: handles all the HTTP GET requests;<\/li>\n\n\n\n<li><strong>style.css<\/strong>: to style the web page.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"516\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?resize=1200%2C516&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Organizing your Files arduino sketch index html style css\" class=\"wp-image-164640\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?w=3553&amp;quality=100&amp;strip=all&amp;ssl=1 3553w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?resize=300%2C129&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?resize=1024%2C441&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?resize=768%2C331&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?resize=1536%2C661&amp;quality=100&amp;strip=all&amp;ssl=1 1536w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?resize=2048%2C881&amp;quality=100&amp;strip=all&amp;ssl=1 2048w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/Folder-structure-RFID-Web-Server_Folder-Structure-ESP32.png?w=2400&amp;quality=100&amp;strip=all&amp;ssl=1 2400w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p>You should save the HTML and CSS files inside a folder called&nbsp;<em><strong>data<\/strong>&nbsp;<\/em>inside the Arduino sketch folder, as shown in the previous diagram. We\u2019ll upload these files to the ESP32 filesystem (LittleFS).<\/p>\n\n\n\n<p><strong>You can download all project files:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/refs\/heads\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/ESP32_RFID_User_Management_WS.zip\" target=\"_blank\" rel=\"noopener\" title=\"\">Click here to download all the project files<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"html-file\">HTML Files<\/h2>\n\n\n\n<p>Copy the following to the <span class=\"rnthl rntliteral\">full-log.html<\/span> file.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\r\n    &lt;title&gt;Manage Users&lt;\/title&gt;\r\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;nav&gt;\r\n        &lt;div class=&quot;nav-container&quot;&gt;\r\n            &lt;a href=&quot;\/&quot; class=&quot;brand&quot;&gt;User Management&lt;\/a&gt;\r\n            &lt;ul class=&quot;nav-menu&quot;&gt;\r\n                &lt;li&gt;&lt;a href=&quot;\/&quot;&gt;\ud83d\udcc4 Full Log&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;add-user&quot;&gt;\u2795 Add User&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;manage-users&quot;&gt;\ud83d\udc64 Manage Users&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/nav&gt;\r\n    &lt;div class=&quot;main-container&quot;&gt;\r\n        &lt;section class=&quot;main-section&quot;&gt;\r\n            &lt;h2&gt;\ud83d\udcc4 Full Access Log&lt;\/h2&gt;\r\n            &lt;table id=&quot;tableData&quot;&gt;\r\n                &lt;thead&gt;\r\n                    &lt;tr&gt;\r\n                        &lt;th&gt;Date&lt;\/th&gt;\r\n                        &lt;th&gt;Time&lt;\/th&gt;\r\n                        &lt;th&gt;UID&lt;\/th&gt;\r\n                        &lt;th&gt;Role&lt;\/th&gt;\r\n                    &lt;\/tr&gt;\r\n                &lt;\/thead&gt;\r\n                &lt;tbody&gt;\r\n                    &lt;!-- Data from log.txt will be loaded here --&gt;\r\n                &lt;\/tbody&gt;\r\n            &lt;\/table&gt;\r\n        &lt;\/section&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=&quot;main-container&quot;&gt;\r\n        &lt;a href=&quot;get?delete=log&quot;&gt;&lt;button class=&quot;button button-delete&quot;&gt;\ud83d\uddd1\ufe0f Delete log.txt File&lt;\/button&gt;&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n    &lt;script&gt;\r\n        \/\/ JavaScript to load and parse log.txt\r\n        async function loadTableData() {\r\n            try {\r\n                const response = await fetch('view-log');\r\n                const data = await response.text();\r\n                const rows = data.trim().split('\\n').slice(1); \/\/ Skip the header line\r\n\r\n                const tableBody = document.querySelector('#tableData tbody');\r\n                rows.forEach(row =&gt; {\r\n                    const columns = row.split(',');\r\n                    const tr = document.createElement('tr');\r\n                    columns.forEach(column =&gt; {\r\n                        const td = document.createElement('td');\r\n                        td.textContent = column;\r\n                        tr.appendChild(td);\r\n                    });\r\n                    tableBody.appendChild(tr);\r\n                });\r\n            } catch (error) {\r\n                console.error('Error loading log data:', error);\r\n            }\r\n        }\r\n        \/\/ Call the function to load log data\r\n        loadTableData();\r\n    &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/data\/full-log.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Copy the following to the <span class=\"rnthl rntliteral\">manage-users.html<\/span> file.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\r\n    &lt;title&gt;Manage Users&lt;\/title&gt;\r\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;nav&gt;\r\n        &lt;div class=&quot;nav-container&quot;&gt;\r\n            &lt;a href=&quot;\/&quot; class=&quot;brand&quot;&gt;User Management&lt;\/a&gt;\r\n            &lt;ul class=&quot;nav-menu&quot;&gt;\r\n                &lt;li&gt;&lt;a href=&quot;\/&quot;&gt;\ud83d\udcc4 Full Log&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;add-user&quot;&gt;\u2795 Add User&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;manage-users&quot;&gt;\ud83d\udc64 Manage Users&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/nav&gt;\r\n    &lt;div class=&quot;main-container&quot;&gt;\r\n        &lt;section class=&quot;main-section&quot;&gt;\r\n            &lt;h2&gt;\ud83d\udc64 User Log&lt;\/h2&gt;\r\n            &lt;table id=&quot;tableData&quot;&gt;\r\n                &lt;thead&gt;\r\n                    &lt;tr&gt;\r\n                        &lt;th&gt;UID&lt;\/th&gt;\r\n                        &lt;th&gt;Role&lt;\/th&gt;\r\n                        &lt;th&gt;Delete&lt;\/th&gt;\r\n                    &lt;\/tr&gt;\r\n                &lt;\/thead&gt;\r\n                &lt;tbody&gt;\r\n                    &lt;!-- Data from users.txt will be loaded here --&gt;\r\n                &lt;\/tbody&gt;\r\n            &lt;\/table&gt;\r\n        &lt;\/section&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=&quot;main-container&quot;&gt;\r\n        &lt;a href=&quot;get?delete=users&quot;&gt;&lt;button class=&quot;button button-delete&quot;&gt;\ud83d\uddd1\ufe0f Delete users.txt File&lt;\/button&gt;&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n    &lt;script&gt;\r\n        \/\/ JavaScript to load and parse users.txt\r\n        async function loadTableData() {\r\n            try {\r\n                const response = await fetch('view-users');\r\n                const data = await response.text();\r\n                const rows = data.trim().split('\\n').slice(1); \/\/ Skip the header line\r\n\r\n                const tableBody = document.querySelector('#tableData tbody');\r\n                rows.forEach((row, index) =&gt; {\r\n                    const columns = row.split(',');\r\n                    const tr = document.createElement('tr');\r\n                    \/\/ Add remaining columns\r\n                    columns.forEach(column =&gt; {\r\n                        const td = document.createElement('td');\r\n                        td.textContent = column;\r\n                        tr.appendChild(td);\r\n                    });\r\n                    \/\/ Create and add row number cell with a delete link\r\n                    const noCell = document.createElement('td');\r\n                    const deleteLink = document.createElement('a');\r\n                    deleteLink.href = `get?delete-user=${index + 1}`;\r\n                    deleteLink.textContent = &quot;\u274c Delete User #&quot; + (index + 1);\r\n                    noCell.appendChild(deleteLink);\r\n                    tr.appendChild(noCell);\r\n\r\n                    tableBody.appendChild(tr);\r\n                });\r\n            } catch (error) {\r\n                console.error('Error loading log data:', error);\r\n            }\r\n        }\r\n        \/\/ Call the function to load log data\r\n        loadTableData();\r\n    &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/data\/manage-users.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Copy the following to the <span class=\"rnthl rntliteral\">add-user.html<\/span> file.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\r\n    &lt;title&gt;Add User&lt;\/title&gt;\r\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;nav&gt;\r\n        &lt;div class=&quot;nav-container&quot;&gt;\r\n            &lt;a href=&quot;\/&quot; class=&quot;brand&quot;&gt;User Management&lt;\/a&gt;\r\n            &lt;ul class=&quot;nav-menu&quot;&gt;\r\n                &lt;li&gt;&lt;a href=&quot;\/&quot;&gt;\ud83d\udcc4 Full Log&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;add-user&quot;&gt;\u2795 Add User&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;manage-users&quot;&gt;\ud83d\udc64 Manage Users&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/nav&gt;\r\n    &lt;div class=&quot;main-container&quot;&gt;\r\n        &lt;section class=&quot;main-section&quot;&gt;\r\n            &lt;h2&gt;\u2795 Add User&lt;\/h2&gt;\r\n            &lt;p&gt;Enter the UID in lower case letters and no spaces.&lt;\/p&gt;&lt;br&gt;\r\n            &lt;form action=&quot;get&quot; class=&quot;user-form&quot;&gt;\r\n                &lt;label for=&quot;uid&quot;&gt;UID&lt;\/label&gt;\r\n                &lt;input type=&quot;text&quot; id=&quot;uid&quot; name=&quot;uid&quot; required&gt;\r\n                &lt;label for=&quot;role&quot;&gt;Role&lt;\/label&gt;\r\n                &lt;select id=&quot;role&quot; name=&quot;role&quot;&gt;\r\n                    &lt;option value=&quot;admin&quot;&gt;Admin&lt;\/option&gt;\r\n                    &lt;option value=&quot;user&quot;&gt;User&lt;\/option&gt;\r\n                &lt;\/select&gt;\r\n                &lt;button type=&quot;submit&quot;&gt;\u2705 Save&lt;\/button&gt;\r\n            &lt;\/form&gt;\r\n        &lt;\/section&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/data\/add-user.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Copy the following to the <span class=\"rnthl rntliteral\">get.html<\/span> file.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=&quot;en&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\r\n    &lt;title&gt;Add User&lt;\/title&gt;\r\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;nav&gt;\r\n        &lt;div class=&quot;nav-container&quot;&gt;\r\n            &lt;a href=&quot;\/&quot; class=&quot;brand&quot;&gt;User Management&lt;\/a&gt;\r\n            &lt;ul class=&quot;nav-menu&quot;&gt;\r\n                &lt;li&gt;&lt;a href=&quot;\/&quot;&gt;\ud83d\udcc4 Full Log&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;add-user&quot;&gt;\u2795 Add User&lt;\/a&gt;&lt;\/li&gt;\r\n                &lt;li&gt;&lt;a href=&quot;manage-users&quot;&gt;\ud83d\udc64 Manage Users&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/nav&gt;\r\n    &lt;div class=&quot;main-container&quot;&gt;\r\n        &lt;section class=&quot;main-section&quot;&gt;\r\n            &lt;p&gt;%inputmessage%&lt;\/p&gt;\r\n        &lt;\/section&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/data\/get.html\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-file\">CSS File<\/h2>\n\n\n\n<p>Copy the following to the <span class=\"rnthl rntliteral\">style.css<\/span> file. Feel free to change it to make the web page look as you wish.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-css\">\/* General Styles *\/\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    font-family: Arial, sans-serif;\r\n    background-color: #f4f4f9;\r\n    color: #333;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    height: 100vh;\r\n    margin: 0;\r\n}\r\n\r\n\/* Navigation Bar Styles *\/\r\nnav {\r\n    width: 100%;\r\n    background-color: #333;\r\n    padding: 1rem 0;\r\n}\r\n\r\n.nav-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 0 1rem;\r\n}\r\n\r\n.brand {\r\n    color: #fff;\r\n    text-decoration: none;\r\n    font-size: 1.5rem;\r\n    font-weight: bold;\r\n}\r\n\r\n.nav-menu {\r\n    list-style-type: none;\r\n    display: flex;\r\n}\r\n\r\n.nav-menu li {\r\n    margin-left: 1.5rem;\r\n}\r\n\r\n.nav-menu a {\r\n    color: #fff;\r\n    text-decoration: none;\r\n    font-size: 1rem;\r\n    transition: color 0.3s;\r\n}\r\n\r\n.nav-menu a:hover, .nav-menu a.active {\r\n    color: #f4f4f9;\r\n}\r\n\r\n.main-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-grow: 1;\r\n    width: 100%;\r\n}\r\n\r\n.main-section {\r\n    max-width: 500px;\r\n    padding: 2rem;\r\n    background-color: #fff;\r\n    border-radius: 5px;\r\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n    text-align: center;\r\n}\r\n\r\n.main-section h2 {\r\n    margin-bottom: 1rem;\r\n    color: #333;\r\n}\r\n\r\n.user-form label {\r\n    display: block;\r\n    margin-bottom: 0.5rem;\r\n    font-weight: bold;\r\n    color: #333;\r\n}\r\n\r\n.user-form input, .user-form select {\r\n    width: 100%;\r\n    padding: 0.5rem;\r\n    margin-bottom: 1rem;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n}\r\n\r\n.user-form button {\r\n    width: 100%;\r\n    padding: 0.7rem;\r\n    background-color: #333;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 4px;\r\n    font-size: 1rem;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n.user-form button:hover {\r\n    background-color: #555;\r\n}\r\n\r\n\r\n.button {\r\n    display: inline-block;\r\n    padding: 10px 20px;\r\n    margin: 10px;\r\n    font-size: 16px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    transition-duration: 0.4s;\r\n}\r\n\r\n.button-delete {\r\n    background-color: #780320;\r\n    color: #fff;\r\n}\r\n\r\n.button-home {\r\n    background-color: #333;\r\n    color: #fff;\r\n}\r\n\r\n#tableData {\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    border-collapse: collapse;\r\n    width: 100%;\r\n  }\r\n  \r\n#tableData td, #tableData th {\r\n    border: 1px solid #ddd;\r\n    padding: 8px;\r\n}\r\n\r\n#tableData tr:nth-child(even) {\r\n    background-color: #f2f2f2;\r\n}\r\n\r\n#tableData tr:hover {\r\n    background-color: #ddd;\r\n}\r\n\r\n#tableData th {\r\n    padding-top: 12px;\r\n    padding-bottom: 12px;\r\n    text-align: left;\r\n    background-color: #1f1f1f;\r\n    color: white;\r\n}<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/data\/style.css\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"rfid-web-server-esp32-code\">Code &#8211; ESP32 RFID User Management System Web Server<\/h2>\n\n\n\n<p>The following code handles the web server to handle the RFID user management system as explained in the <a href=\"#project-overview\" title=\"project overview\">project overview<\/a>.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-rfid-user-management-web-server\/\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n#include &lt;Arduino.h&gt;\n#include &lt;MFRC522v2.h&gt;\n#include &lt;MFRC522DriverSPI.h&gt;\n\/\/#include &lt;MFRC522DriverI2C.h&gt;\n#include &lt;MFRC522DriverPinSimple.h&gt;\n#include &lt;MFRC522Debug.h&gt;\n\n#include &lt;AsyncTCP.h&gt;\n#include &lt;ESPAsyncWebServer.h&gt;\n#include &lt;LittleFS.h&gt;\n\n#include &quot;FS.h&quot;\n#include &quot;SD.h&quot;\n#include &quot;SPI.h&quot;\n#include &lt;time.h&gt;\n#include &lt;WiFi.h&gt;\n\n\/\/ Learn more about using SPI\/I2C or check the pin assigment for your board: https:\/\/github.com\/OSSLibraries\/Arduino_MFRC522v2#pin-layout\nMFRC522DriverPinSimple ss_pin(5);\n\nMFRC522DriverSPI driver{ss_pin}; \/\/ Create SPI driver\n\/\/MFRC522DriverI2C driver{};     \/\/ Create I2C driver\nMFRC522 mfrc522{driver};         \/\/ Create MFRC522 instance\n\n\/\/ Replace with your network credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\nlong timezone = 0;\nbyte daysavetime = 1;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nconst char* PARAM_INPUT_1 = &quot;uid&quot;;\nconst char* PARAM_INPUT_2 = &quot;role&quot;;\nconst char* PARAM_INPUT_3 = &quot;delete&quot;;\nconst char* PARAM_INPUT_4 = &quot;delete-user&quot;;\n\nString inputMessage;\nString inputParam;\n\nconst int ledPin = 22;\nconst int buzzerPin = 4;\n\n\/\/ Write to the SD card\nvoid writeFile(fs::FS &amp;fs, const char * path, const char * message) {\n  Serial.printf(&quot;Writing file: %s\\n&quot;, path);\n\n  File file = fs.open(path, FILE_WRITE);\n  if(!file) {\n    Serial.println(&quot;Failed to open file for writing&quot;);\n    return;\n  }\n  if(file.print(message)) {\n    Serial.println(&quot;File written&quot;);\n  } else {\n    Serial.println(&quot;Write failed&quot;);\n  }\n  file.close();\n}\n\n\/\/ Append data to the SD card\nvoid appendFile(fs::FS &amp;fs, const char * path, const char * message) {\n  Serial.printf(&quot;Appending to file: %s\\n&quot;, path);\n\n  File file = fs.open(path, FILE_APPEND);\n  if(!file) {\n    Serial.println(&quot;Failed to open file for appending&quot;);\n    return;\n  }\n\n  time_t t = file.getLastWrite();\n  struct tm *tmstruct = localtime(&amp;t);\n\n  char bufferDate[50]; \/\/ Adjust buffer size as needed\n  snprintf(bufferDate, sizeof(bufferDate), &quot;%d-%02d-%02d&quot;, \n          (tmstruct-&gt;tm_year) + 1900, \n          (tmstruct-&gt;tm_mon) + 1, \n          tmstruct-&gt;tm_mday);\n  char bufferTime[50]; \/\/ Adjust buffer size as needed\n  snprintf(bufferTime, sizeof(bufferTime), &quot;%02d:%02d:%02d&quot;, \n          tmstruct-&gt;tm_hour, \n          tmstruct-&gt;tm_min, \n          tmstruct-&gt;tm_sec);\n          \n  String lastWriteTime = bufferDate;\n  String finalString = String(bufferDate) + &quot;,&quot; + String(bufferTime) + &quot;,&quot; + String(message) + &quot;\\n&quot;;\n  Serial.println(lastWriteTime);\n  if(file.print(finalString.c_str())) {\n    Serial.println(&quot;Message appended&quot;);\n  } else {\n    Serial.println(&quot;Append failed&quot;);\n  }\n  file.close();\n}\n\n\/\/ Append data to the SD card\nvoid appendUserFile(fs::FS &amp;fs, const char * path, const char * message) {\n  Serial.printf(&quot;Appending to file: %s\\n&quot;, path);\n\n  File file = fs.open(path, FILE_APPEND);\n  if(!file) {\n    Serial.println(&quot;Failed to open file for appending&quot;);\n    return;\n  }\n\n  String finalString = String(message) + &quot;\\n&quot;;\n\n  if(file.print(finalString.c_str())) {\n    Serial.println(&quot;Message appended&quot;);\n  } else {\n    Serial.println(&quot;Append failed&quot;);\n  }\n  file.close();\n}\n\nvoid deleteFile(fs::FS &amp;fs, const char *path) {\n  Serial.printf(&quot;Deleting file: %s\\n&quot;, path);\n  if (fs.remove(path)) {\n    Serial.println(&quot;File deleted&quot;);\n  } else {\n    Serial.println(&quot;Delete failed&quot;);\n  }\n}\n\nString processor(const String&amp; var){\n  return String(&quot;HTTP GET request sent to your ESP on input field (&quot; \n                + inputParam + &quot;) with value: &quot; + inputMessage +\n                &quot;&lt;br&gt;&lt;a href=\\&quot;\/\\&quot;&gt;&lt;button class=\\&quot;button button-home\\&quot;&gt;Return to Home Page&lt;\/button&gt;&lt;\/a&gt;&quot;);\n}\n\nvoid deleteLineFromFile(const char* filename, int lineNumber) {\n  File file = SD.open(filename);\n  if (!file) {\n    Serial.println(&quot;Failed to open file for reading.&quot;);\n    return;\n  }\n\n  \/\/ Read all lines except the one to delete\n  String lines = &quot;&quot;;\n  int currentLine = 0;\n  while (file.available()) {\n    String line = file.readStringUntil('\\n');\n    if (currentLine != lineNumber) {\n      lines += line + &quot;\\n&quot;;\n    }\n    currentLine++;\n  }\n  file.close();\n\n  \/\/ Write back all lines except the deleted one\n  file = SD.open(filename, FILE_WRITE);\n  if (!file) {\n    Serial.println(&quot;Failed to open file for writing.&quot;);\n    return;\n  }\n\n  file.print(lines);\n  file.close();\n  Serial.println(&quot;Line deleted successfully.&quot;);\n}\n\nString getRoleFromFile(const char* filename, String uid) {\n  File file = SD.open(filename);\n  if (!file) {\n    Serial.println(&quot;Failed to open file for reading.&quot;);\n    return &quot;&quot;;\n  }\n\n  \/\/ Skip the header line\n  file.readStringUntil('\\n');\n  \n  \/\/ Read each line and check for UID\n  while (file.available()) {\n    String line = file.readStringUntil('\\n');\n    \n    int commaIndex = line.indexOf(',');\n    if (commaIndex &gt; 0) {\n      String fileUID = line.substring(0, commaIndex);\n      String role = line.substring(commaIndex + 1);\n\n      \/\/ Compare UID\n      if (fileUID == uid) {\n        file.close();\n        role.trim();  \/\/ Remove any extra spaces or newline characters\n        return role;\n      }\n    }\n  }\n  file.close();\n  return &quot;&quot;;  \/\/ Return empty string if UID not found\n}\n\nvoid initRFIDReader() {\n  mfrc522.PCD_Init();    \/\/ Init MFRC522 board.\n  MFRC522Debug::PCD_DumpVersionToSerial(mfrc522, Serial);\t\/\/ Show details of PCD - MFRC522 Card Reader details.\n\tSerial.println(F(&quot;Scan PICC to see UID&quot;));\n}\n\nvoid initLittleFS() {\n  if(!LittleFS.begin()){\n    Serial.println(&quot;An Error has occurred while mounting LittleFS&quot;);\n        return;\n  }\n}\nvoid initWifi() {\n  \/\/ Connect to Wi-Fi\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(&quot;Connecting to WiFi...&quot;);\n  }\n  \/\/ Print ESP32 Local IP Address\n  Serial.print(&quot;ESP IP Address: &quot;);\n  Serial.println(WiFi.localIP());\n}\n\nvoid initTime() {\n  Serial.println(&quot;CInitializing Time&quot;);\n  struct tm tmstruct;\n  delay(2000);\n  tmstruct.tm_year = 0;\n  getLocalTime(&amp;tmstruct, 5000);\n  Serial.printf(\n    &quot;Time and Date right now is : %d-%02d-%02d %02d:%02d:%02d\\n&quot;, (tmstruct.tm_year) + 1900, (tmstruct.tm_mon) + 1, tmstruct.tm_mday, tmstruct.tm_hour, tmstruct.tm_min,\n    tmstruct.tm_sec\n  );\n}\n\nvoid initSDCard() {\n  \/\/ CS pin = 15\n  if (!SD.begin(15)) {\n    Serial.println(&quot;Card Mount Failed&quot;);\n    return;\n  }\n  uint8_t cardType = SD.cardType();\n\n  if (cardType == CARD_NONE) {\n    Serial.println(&quot;No SD card attached&quot;);\n    return;\n  }\n\n  Serial.print(&quot;SD Card Type: &quot;);\n  if (cardType == CARD_MMC) {\n    Serial.println(&quot;MMC&quot;);\n  } else if (cardType == CARD_SD) {\n    Serial.println(&quot;SDSC&quot;);\n  } else if (cardType == CARD_SDHC) {\n    Serial.println(&quot;SDHC&quot;);\n  } else {\n    Serial.println(&quot;UNKNOWN&quot;);\n  }\n\n  uint64_t cardSize = SD.cardSize() \/ (1024 * 1024);\n  Serial.printf(&quot;SD Card Size: %lluMB\\n&quot;, cardSize);\n\n  \/\/ If the log.txt file doesn't exist, create a file on the SD card and write the header\n  File file = SD.open(&quot;\/log.txt&quot;);\n  if(!file) {\n    Serial.println(&quot;log.txt file doesn't exist&quot;);\n    Serial.println(&quot;Creating file...&quot;);\n    writeFile(SD, &quot;\/log.txt&quot;, &quot;Date,Time,UID,Role\\r\\n&quot;);\n  }\n  else {\n    Serial.println(&quot;log.txt file already exists&quot;);  \n  }\n  file.close();\n\n  \/\/ If the users.txt file doesn't exist, create a file on the SD card and write the header\n  file = SD.open(&quot;\/users.txt&quot;);\n  if(!file) {\n    Serial.println(&quot;users.txt file doesn't exist&quot;);\n    Serial.println(&quot;Creating file...&quot;);\n    writeFile(SD, &quot;\/users.txt&quot;, &quot;UID,Role\\r\\n&quot;);\n  }\n  else {\n    Serial.println(&quot;users.txt file already exists&quot;);  \n  }\n  file.close();\n}\n\nvoid setup() {\n  Serial.begin(115200);  \/\/ Initialize serial communication\n  while (!Serial);       \/\/ Do nothing if no serial port is opened (added for Arduinos based on ATMEGA32U4).\n  \n  initRFIDReader();\n  initLittleFS();\n  initWifi();\n  configTime(3600 * timezone, daysavetime * 3600, &quot;time.nist.gov&quot;, &quot;0.pool.ntp.org&quot;, &quot;1.pool.ntp.org&quot;);\n  initTime();\n  initSDCard();\n\n  pinMode(ledPin, OUTPUT);\n  digitalWrite(ledPin, LOW);\n  pinMode(buzzerPin, OUTPUT);\n  digitalWrite(buzzerPin, LOW);\n\n  \/\/ Route for root \/ web page\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(LittleFS, &quot;\/full-log.html&quot;);\n  });\n  \/\/ Route for root \/add-user web page\n  server.on(&quot;\/add-user&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(LittleFS, &quot;\/add-user.html&quot;);\n  });\n  \/\/ Route for root \/manage-users web page\n  server.on(&quot;\/manage-users&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(LittleFS, &quot;\/manage-users.html&quot;);\n  });\n\n  \/\/ Serve Static files\n  server.serveStatic(&quot;\/&quot;, LittleFS, &quot;\/&quot;);\n\n  \/\/ Loads the log.txt file\n  server.on(&quot;\/view-log&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(SD, &quot;\/log.txt&quot;, &quot;text\/plain&quot;, false);\n  });\n  \/\/ Loads the users.txt file\n  server.on(&quot;\/view-users&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(SD, &quot;\/users.txt&quot;, &quot;text\/plain&quot;, false);\n  });\n  \n  \/\/ Receive HTTP GET requests on &lt;ESP_IP&gt;\/get?input=&lt;inputMessage&gt;\n  server.on(&quot;\/get&quot;, HTTP_GET, [] (AsyncWebServerRequest *request) {\n    \/\/ GET input1 and input2 value on &lt;ESP_IP&gt;\/get?input1=&lt;inputMessage1&gt;&amp;input2=&lt;inputMessage2&gt;\n    if (request-&gt;hasParam(PARAM_INPUT_1) &amp;&amp; request-&gt;hasParam(PARAM_INPUT_2)) {\n      inputMessage = request-&gt;getParam(PARAM_INPUT_1)-&gt;value();\n      inputParam = String(PARAM_INPUT_1);\n      inputMessage += &quot; &quot; + request-&gt;getParam(PARAM_INPUT_2)-&gt;value();\n      inputParam += &quot; &quot; + String(PARAM_INPUT_2);\n\n      String finalMessageInput = String(request-&gt;getParam(PARAM_INPUT_1)-&gt;value()) + &quot;,&quot; + String(request-&gt;getParam(PARAM_INPUT_2)-&gt;value());\n      appendUserFile(SD, &quot;\/users.txt&quot;, finalMessageInput.c_str());\n    }\n    else if (request-&gt;hasParam(PARAM_INPUT_3)) {\n      inputMessage = request-&gt;getParam(PARAM_INPUT_3)-&gt;value();\n      inputParam = String(PARAM_INPUT_3);\n      if(request-&gt;getParam(PARAM_INPUT_3)-&gt;value()==&quot;users&quot;) {\n        deleteFile(SD, &quot;\/users.txt&quot;);\n      }\n      else if(request-&gt;getParam(PARAM_INPUT_3)-&gt;value()==&quot;log&quot;) {\n        deleteFile(SD, &quot;\/log.txt&quot;);\n      }\n    }\n    else if (request-&gt;hasParam(PARAM_INPUT_4)) {\n      inputMessage = request-&gt;getParam(PARAM_INPUT_4)-&gt;value();\n      inputParam = String(PARAM_INPUT_4);\n      deleteLineFromFile(&quot;\/users.txt&quot;, inputMessage.toInt());\n    }\n    else {\n      inputMessage = &quot;No message sent&quot;;\n      inputParam = &quot;none&quot;;\n    }\n    request-&gt;send(LittleFS, &quot;\/get.html&quot;, &quot;text\/html&quot;, false, processor);\n  });\n\n  \/\/ Start server\n  server.begin();\n}\n\nvoid loop() {\n\t\/\/ Reset the loop if no new card present on the sensor\/reader. This saves the entire process when idle.\n\tif (!mfrc522.PICC_IsNewCardPresent()) {\n\t\treturn;\n\t}\n\n\t\/\/ Select one of the cards.\n\tif (!mfrc522.PICC_ReadCardSerial()) {\n\t\treturn;\n\t}\n\n  \/\/ Save the UID on a String variable\n  String uidString = &quot;&quot;;\n  for (byte i = 0; i &lt; mfrc522.uid.size; i++) {\n    if (mfrc522.uid.uidByte[i] &lt; 0x10) {\n      uidString += &quot;0&quot;; \n    }\n    uidString += String(mfrc522.uid.uidByte[i], HEX);\n  }\n  Serial.print(&quot;Card UID: &quot;);\n  Serial.println(uidString);\n\n  String role = getRoleFromFile(&quot;\/users.txt&quot;, uidString);\n  if (role != &quot;&quot;) {\n    Serial.print(&quot;Role for UID: &quot;);\n    Serial.print(uidString);\n    Serial.print(&quot; is &quot;);\n    Serial.println(role);\n  } else {\n    role = &quot;unknown&quot;;\n    Serial.print(&quot;UID: &quot;);\n    Serial.print(uidString);\n    Serial.println(&quot; not found, set user role to unknown&quot;);\n  }\n  String sdMessage = uidString + &quot;,&quot; + role;\n  appendFile(SD, &quot;\/log.txt&quot;, sdMessage.c_str());\n\n  digitalWrite(buzzerPin, HIGH);\n  digitalWrite(ledPin, HIGH);\n  delay(500);\n  digitalWrite(buzzerPin, LOW);\n  delay(2500);\n  digitalWrite(ledPin, LOW);\n}<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_RFID_User_Management_WS\/ESP32_RFID_User_Management_WS.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Before uploading the code, you need to insert your network credentials in the following lines so that the ESP32 can establish a Wi-Fi connection.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_SSID\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Resources to Help You Understand the Code<\/h3>\n\n\n\n<p>This code is quite long and we won&#8217;t explain in detail how it works because all subjects covered here were already explained in previous projects.<\/p>\n\n\n\n<p>Here&#8217;s a list of the tutorials you should look at to learn about the subjects covered here:<\/p>\n\n\n\n<p><strong>1) <\/strong>Reading the UID of an RFID tag with the ESP32: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-mfrc522-rfid-reader-arduino\/\" title=\"\">ESP32: Getting Started with MFRC522 RFID Reader\/Writer (Arduino IDE)<\/a>.<\/p>\n\n\n\n<p><strong>2)<\/strong> Getting a timestamp using an NTP server: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-date-time-ntp-client-server-arduino\/\">ESP32 NTP Client-Server: Get Date and Time (Arduino IDE)<\/a>.<\/p>\n\n\n\n<p><strong>3)<\/strong> Reading and writing from\/to the microSD card: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-microsd-card-arduino\/\">ESP32: Guide for MicroSD Card Module using Arduino IDE<\/a>.<\/p>\n\n\n\n<p><strong>4)<\/strong> Datalogging with the ESP32: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-how-to-log-data\/\">ESP32: How to Log Data (10 Different Ways)<\/a><\/p>\n\n\n\n<p><strong>5)<\/strong> Creating a web server with the ESP32: <a href=\"https:\/\/randomnerdtutorials.com\/?s=web+server\" title=\"\">a list of all our web server projects<\/a>.<\/p>\n\n\n\n<p><strong>6)<\/strong> Sending data from a web page to the ESP32 via HTML form: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-input-data-html-form\/\">Input Data on HTML Form ESP32\/ESP8266 Web Server using Arduino IDE<\/a>.<\/p>\n\n\n\n<p><strong>7)<\/strong> Everything you need to know about creating a web server with HTML and CSS files with the ESP32: our <a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\" title=\"\">Build Web Server with ESP32 eBook<\/a> covers a lot of subjects in great detail. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Upload Code and Data Folder<\/h2>\n\n\n\n<p>After inserting your network credentials, save the code. Go to&nbsp;<strong>Sketch<\/strong>&nbsp;&gt;&nbsp;<strong>Show Sketch Folder<\/strong>, and create a folder called&nbsp;<strong><em>data<\/em><\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"351\" height=\"271\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/arduino-ide-show-sketch-folder.png?resize=351%2C271&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Arduino IDE Open Sketch Folder to create data folder\" class=\"wp-image-158892\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/arduino-ide-show-sketch-folder.png?w=351&amp;quality=100&amp;strip=all&amp;ssl=1 351w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/arduino-ide-show-sketch-folder.png?resize=300%2C232&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 351px) 100vw, 351px\" \/><\/figure><\/div>\n\n\n<p><strong>Inside that folder, you should place the HTML, and CSS files provided previously.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Uploading the Filesystem Image<\/h3>\n\n\n\n<p>Upload those files to the filesystem: press [<strong>Ctrl<\/strong>] + [<strong>Shift<\/strong>] + [<strong>P<\/strong>] on Windows or [<strong>\u2318<\/strong>] + [<strong>Shift<\/strong>] + [<strong>P<\/strong>] on MacOS to open the command palette. Search for the&nbsp;<strong>Upload LittleFS to Pico\/ESP8266\/ESP32<\/strong>&nbsp;command and click on it.<\/p>\n\n\n\n<p>If you don\u2019t have this option is because you didn\u2019t install the filesystem uploader plugin.<a href=\"https:\/\/randomnerdtutorials.com\/arduino-ide-2-install-esp32-littlefs\/\">&nbsp;Check this tutorial<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"401\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/upload-files-little-fs-esp32-arduino-ide.png?resize=744%2C401&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 Sketch Data Upload LittleFS Arduino IDE\" class=\"wp-image-158893\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/upload-files-little-fs-esp32-arduino-ide.png?w=744&amp;quality=100&amp;strip=all&amp;ssl=1 744w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/upload-files-little-fs-esp32-arduino-ide.png?resize=300%2C162&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntcred\"><strong>Important:<\/strong> make sure the Serial Monitor is closed before uploading to the filesystem. Otherwise, the upload will fail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Uploading the Code<\/h3>\n\n\n\n<p>Then, upload the code to your ESP32 board. Make sure you inserted your network credentials in the code.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"36\" height=\"39\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/arduino-ide-2-upload-button.png?resize=36%2C39&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Arduino IDE 2 Upload Button\" class=\"wp-image-146269\"\/><\/figure><\/div>\n\n\n<p>When everything is successfully uploaded, open the Serial Monitor at a baud rate of 115200. Press the ESP32 EN\/RST button, and it should print the ESP32 IP address.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"426\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Arduino-IDE-Serial-Monitor-Priting-IP-Address.png?resize=661%2C426&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Arduino IDE Serial Monitor Priting IP Address\" class=\"wp-image-164263\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Arduino-IDE-Serial-Monitor-Priting-IP-Address.png?w=661&amp;quality=100&amp;strip=all&amp;ssl=1 661w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Arduino-IDE-Serial-Monitor-Priting-IP-Address.png?resize=300%2C193&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"demonstration\">Demonstration<\/h2>\n\n\n\n<p>Open a browser on your local network and type the ESP32 IP address. You s1hould get access to the web server page that looks like this, it should have a blank table by default.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"667\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Testing-IP-Address.png?resize=703%2C667&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Web Server Testing IP Address\" class=\"wp-image-164264\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Testing-IP-Address.png?w=703&amp;quality=100&amp;strip=all&amp;ssl=1 703w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Testing-IP-Address.png?resize=300%2C285&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/figure><\/div>\n\n\n<p>Grab an RFID tag, and scan it in the RFID reader. Every time you scan an RFID tag, the LED should light up and the piezo buzzer will beep briefly. In your Arduino IDE Serial Monitor, the UID of your RFID card will be printed:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"615\" height=\"436\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Arduino-IDE-Serial-Monitor-Check-RFID-Tags-UID.png?resize=615%2C436&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Arduino IDE Serial Monitor Check RFID Tags UID\" class=\"wp-image-164265\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Arduino-IDE-Serial-Monitor-Check-RFID-Tags-UID.png?w=615&amp;quality=100&amp;strip=all&amp;ssl=1 615w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Arduino-IDE-Serial-Monitor-Check-RFID-Tags-UID.png?resize=300%2C213&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 615px) 100vw, 615px\" \/><\/figure><\/div>\n\n\n<p>For testing purposes, I recommend scanning multiple RFID tags, so that you have more data displayed in your web server. Now open your web server <em>Full Log<\/em> page, your table should look similar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"667\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Check-Full-Log-Table.png?resize=703%2C667&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Web Server Check Full Log Table\" class=\"wp-image-164266\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Check-Full-Log-Table.png?w=703&amp;quality=100&amp;strip=all&amp;ssl=1 703w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Check-Full-Log-Table.png?resize=300%2C285&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/figure><\/div>\n\n\n<p>Copy the UID of one of your RFID cards, please note that it should be in lower-case letters and without any spaces (for example: bd31152b). Then, open the <strong>Add User<\/strong> tab.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"697\" height=\"54\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Open-Add-User-web-page.png?resize=697%2C54&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Open Add User web page\" class=\"wp-image-164267\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Open-Add-User-web-page.png?w=697&amp;quality=100&amp;strip=all&amp;ssl=1 697w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Open-Add-User-web-page.png?resize=300%2C23&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 697px) 100vw, 697px\" \/><\/figure><\/div>\n\n\n<p>Type the UID and select the role (user or admin). Finally, click the &#8220;<strong>Save<\/strong>&#8221; button. I&#8217;ll be repeating this process for other RFID tags for demonstration purposes.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"600\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Add-New-User-with-Role.png?resize=703%2C600&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Web Server Add New User with Role\" class=\"wp-image-164270\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Add-New-User-with-Role.png?w=703&amp;quality=100&amp;strip=all&amp;ssl=1 703w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Add-New-User-with-Role.png?resize=300%2C256&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/figure><\/div>\n\n\n<p>Now, if you browse to the <strong>Manager Users<\/strong> web page:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"697\" height=\"54\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Open-Manage-Users-Tab.png?resize=697%2C54&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Open Manage Users Tab\" class=\"wp-image-164268\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Open-Manage-Users-Tab.png?w=697&amp;quality=100&amp;strip=all&amp;ssl=1 697w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Open-Manage-Users-Tab.png?resize=300%2C23&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 697px) 100vw, 697px\" \/><\/figure><\/div>\n\n\n<p>It loads a table with all the UIDs and their corresponding user roles, you can click the &#8220;X&#8221; to delete a user.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"600\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-User-Log-Web-Page-Delete-Users.png?resize=761%2C600&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Web Server User Log Web Page Delete Users\" class=\"wp-image-164272\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-User-Log-Web-Page-Delete-Users.png?w=761&amp;quality=100&amp;strip=all&amp;ssl=1 761w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-User-Log-Web-Page-Delete-Users.png?resize=300%2C237&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure><\/div>\n\n\n<p>Scan the RFID tags a few more times, then open the web server home page. The log table should have all the entries with a timestamp, UID and their corresponding user roles.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"851\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Check-Full-Log-Table-Users-with-Roles.png?resize=761%2C851&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Web Server Check Full Log Table Users with Roles\" class=\"wp-image-164273\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Check-Full-Log-Table-Users-with-Roles.png?w=761&amp;quality=100&amp;strip=all&amp;ssl=1 761w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Check-Full-Log-Table-Users-with-Roles.png?resize=268%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 268w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure><\/div>\n\n\n<p>At the bottom of the <strong>Full Log<\/strong> and <strong>Manager Users<\/strong> web pages, you have the option to delete the <em>log.txt<\/em> and <em>users.txt<\/em> files from the microSD card at any time.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"218\" height=\"107\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Web-Server-Delete-log-or-users-txt-files.png?resize=218%2C107&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Web Server Delete log or users txt files\" class=\"wp-image-164269\"\/><\/figure><\/div>\n\n\n<p>You can also access the web server page on your smartphone.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"506\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Project-Demonstration.jpg?resize=900%2C506&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 RFID User Management System Project Demonstration\" class=\"wp-image-164262\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Project-Demonstration.jpg?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Project-Demonstration.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/11\/ESP32-RFID-User-Management-System-Project-Demonstration.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial, you combined different subjects to build an RFID Management System and Logger with the ESP32. Here&#8217;s a list of the subjects we covered: different web server features, getting a timestamp, datalogging, interfacing an RFID reader, reading and writing files to a microSD card, and much more.<\/p>\n\n\n\n<p>We hope you found this project useful, if you want to learn more about RFID reader\/writer module with the ESP32 or about the microSD card module you can read the following guides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-mfrc522-rfid-reader-arduino\/\" title=\"\">ESP32: Getting Started with MFRC522 RFID Reader\/Writer (Arduino IDE)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-microsd-card-arduino\/\">ESP32: Guide for MicroSD Card Module using Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-data-logging-temperature-to-microsd-card\/\">ESP32 Data Logging Temperature to MicroSD Card<\/a><\/li>\n<\/ul>\n\n\n\n<p>To learn more about building web servers with the ESP32, check out our ebook:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\" title=\"\">Build Web Servers with ESP32 and ESP8266 eBook<\/a><\/li>\n<\/ul>\n\n\n\n<p>If you would like to learn more about the ESP32, and for inspiration for new projects, make sure to take a look at our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE (eBook)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">Free ESP32 Projects and Tutorials<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-guides-sensors-modules\/\">ESP32: 26 Free Guides for Sensors and Modules<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project, you&#8217;ll build an RFID user management system with a web server that runs on an ESP32. The ESP32 board is connected to an MFRC522 RFID reader and &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32 RFID User Management System with Web Server\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-rfid-user-management-web-server\/#more-164167\" aria-label=\"Read more about ESP32 RFID User Management System with Web Server\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":164647,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[281,276,277,299,264],"tags":[],"class_list":["post-164167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-project","category-esp32","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-RFID-Web-Server.jpg?fit=1920%2C1080&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/164167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=164167"}],"version-history":[{"count":26,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/164167\/revisions"}],"predecessor-version":[{"id":168614,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/164167\/revisions\/168614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/164647"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=164167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=164167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=164167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}