Here, we gonna create a very interesting project of Captive Portal based home automation using nodeMCU from scratch..So, lets begin..

Step 1: Initial Declarations

Declare the IO pins of nodeMCU to perform Action, Header Files and code for creating DNS server..shown in image..

Step 2: Html Code for Front End I.e. Login Page

As shown in picture, declare html code within a string variable which we send to end-user for validation of Access Code.

*To catch the data entered by the user here we are using anchor pane <a></a> and href tag

*Basically Anchor tag is used to add another web page within web page and href tag defines the destination of link.

*But, here we are recieving the data entered by the user within the Access Code field through Anchor Pane and href tag...

how, I will mention about two methods of catching the input from web interface to our means programmers end..

Step 3: Use of WebServer.arg() and WebServer.on() Methods

As, I mention in previous step i gonna tell you two different methods..

1) By Using webServer.arg() method:

Here, we specify autofocus attribute along with element as <input autofocus> as shown in picture,

what autofocus does is that it is a boolean attribute when it is true means present it assure that the input element get focused when page loads.

and then,we call the args() method on the server object. This method will return the number of query parameters that were passed on the HTTP and apply conditional statements to perform actions accordingly.

2) By Using <a/> and href attribute:

Here, we specify our control elements(like buttons) within <a></a> and assign a string, char, link which you want to validate using conditional statements and then we call webServer.on() to recieve the input for validation.

As shown..

Step 4: If User Types Wrong Credentials

What i had done, simply change the existed login page code and add a new header informing that user had entered a wrong credential..

First validate the credential if it is wrong direct the user to new edited login page showing error message.

As shown..

Step 5: How to Add Image to Your Web Page..

It is very simple, because here we are not storing our images to a physical storage so that we provide a path to fetch that image that we usually do in case of html page.

so what we do is simply convert our images to base64 and paste it in our page code As shown..