Arduino Slovakia - ESP8266 - HTTP server with multiple pages

Hierarchy: ESP8266

In this article, we'll build on the articles we learned to create a simple page and give it a nice responsive design. We will now try to create an HTTP server that contains multiple pages. You will be able to switch between pages using hypertext. We will still store the pages in the program's source code, and split them into multiple files for clarity.

The picture shows the result. Responsive design that uses button-shaped hypertexts. Nowadays, when designing a site, it is also necessary to consider users who watch the page on their mobile phone. To make it clear at which page the user is located, the cascade style disabled is used. This ensures that the button is grayed out and does not respond to mouse movement.

Used parts

This is a simple project, so we will need some board with the ESP8266 microcontroller, which can be directly connected to USB. To avoid a possible short circuit, you can plug the board into a breadboard.

ESP8266 {linkESP8266}
Breadboard {linkBreadBoard}

Example

This is the source code for ESP8266. It is very similar to the previous examples. I divided the source code into four files, so we don't mix the program logic with graphics. Each page has its own source code file. Each page is handled by a separate function. All functions are exactly the same, with different variable that contains the source code of a particular page.

Pages are located at URLs:

/
page2
page3

If you download this program to ESP8266 and view the first page, you can access other pages using hypertext.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "arduino_secret.h"

#include "page1.h"
#include "page2.h"
#include "page3.h"

ESP8266WebServer server(80);

void handleRoot() {
  Serial.println("GET /");
  server.send(200, "text/html", htmlPage1);
}

void handlePage2() {
  Serial.println("GET /page2");
  server.send(200, "text/html", htmlPage2);
}

void handlePage3() {
  Serial.println("GET /page3");
  server.send(200, "text/html", htmlPage3);
}

void setup(void){
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/page2", handlePage2);
  server.on("/page3", handlePage3);

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void){
  server.handleClient();
}

page1.h

const char htmlPage1[] PROGMEM = R"=====(
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Hello from HTTP Server ESP8266 - Page1</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. This is Page1.</p>
        <p>
            <a class="btn btn-primary disabled" href="/" role="button">Page1</a>
            <a class="btn btn-primary" href="/page2" role="button">Page2</a>
            <a class="btn btn-primary" href="/page3" role="button">Page3</a>
        </p>

        <p>Copyright (C) 2019 <a href="https://www.arduinoslovakia.eu">Arduino Slovakia</a>.</p>
    </div>
</body>

</html>
)=====";

page2.h

const char htmlPage2[] PROGMEM = R"=====(
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Hello from HTTP Server ESP8266 - Page2</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. This is Page2.</p>
        <p>
            <a class="btn btn-primary" href="/" role="button">Page1</a>
            <a class="btn btn-primary disabled" href="/page2" role="button">Page2</a>
            <a class="btn btn-primary" href="/page3" role="button">Page3</a>
        </p>

        <p>Copyright (C) 2019 <a href="https://www.arduinoslovakia.eu">Arduino Slovakia</a>.</p>
    </div>
</body>

</html>
)=====";

page3.h

const char htmlPage3[] PROGMEM = R"=====(
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Hello from HTTP Server ESP8266 - Page3</title>
</head>

<body>
    <div class="container">
        <h1>ESP8266 HTTP Server</h1>
        <p>Hello from ESP8266 HTTP Server. This is Page3.</p>
        <p>
            <a class="btn btn-primary" href="/" role="button">Page1</a>
            <a class="btn btn-primary" href="/page2" role="button">Page2</a>
            <a class="btn btn-primary disabled" href="/page3" role="button">Page3</a>
        </p>

        <p>Copyright (C) 2019 <a href="https://www.arduinoslovakia.eu">Arduino Slovakia</a>.</p>
    </div>
</body>

</html>
)=====";

Source code

The source code is located on GitHub.

simple_http_server_multiplepages_responsive

21.05.2019

ESP8266 - HTTP server with multiple pages