1CSS
This example will show handling sending of different files. It adds a CSS
file and a quit page to exit the program we started with
Hello World.
Files
FileServer.c
We update the file server file to have 3 functions that get called
when a page is requested.
void File_Root(struct WebServer *Web);
void File_SomeStyle(struct WebServer *Web);
void File_Quit(struct WebServer *Web);
struct FileInfo m_Files[]=
{
/* Filename, Dynamic, Cookies, Gets, Posts, Callback */
{"/",false,NULL,NULL,NULL,File_Root},
{"/SomeStyle.css",false,NULL,NULL,NULL,File_SomeStyle},
{"/quit.html",true,NULL,NULL,NULL,File_Quit},
};
The File_Root() function is called when the root page ("/" or when
the URL doesn't include a filename). This will output a <link>
tag that will include the "SomeStyle.css" file. It will also have a
link to the "quit.html" file.
The first entry is the URL path of the file name. This will be the
filename part after the host name (http://example.com/SomeStyle.css
for example). This will always include the forward slash.
Next we have if the file is dynamic or not. If it is dynamic then the
callback will ALWAYS be called. If it is static (not dynamic) then the
callback may or may not be called depending on if the web browser has
a good copy or not.
We mark the "/" and "/SomeStyle.css" pages as being static. The
content does not change so the browser can cache it.
The "/quit.html" is marked as dynamic even though the content is
static. This is because we need to have the callback called every
time so we can exit the program.
Next we have 3 NULL's because we do not have any cookies, GET, or
POST vars on these pages.
Last we have the function pointer to call to sent the contents of the
page.
const char RootHTML[]=
"<!DOCTYPE html>"
"<html>"
"<head>"
"<title>Web Server Example - Root</title>"
"<link rel='stylesheet' href='/SomeStyle.css'>"
"</head>"
"<body>"
"<div id='top'>Web Server Example - Root</div>"
"<div id='quitbttn'><a href='/quit.html'>QUIT</a></div>"
"<div id='content'>"
"Hello World with some style!
"
"</div>"
"<div id='bottom'></div>"
"</body>"
"</html>";
void File_Root(struct WebServer *Web)
{
WS_WriteWhole(Web,RootHTML,sizeof(RootHTML)-1);
}
The File_Root() function has been changed
to have a bit more complex html. The html includes a css link
to "/SomeStyle.css" and a html link to the "/quit.html" file.
NOTE that if you running this after running a different example you
will need to force a cache ignore (SHIFT+F5) or change the
DOCVER define in Options.h.
const char QuitHTML[]=
"<!DOCTYPE html>"
"<html>"
"<head>"
"<title>Web Server Example - Quit</title>"
"<link rel='stylesheet' href='/SomeStyle.css'>"
"</head>"
"<body>"
"<div id='top'>Web Server Example</div>"
"<div id='content'>"
"<br/>"
"Bye bye<br/>"
"<br/>"
"<a href='/'>HOME</a>"
"<br/>"
"</div>"
"<div id='bottom'></div>"
"</body>"
"</html>";
void File_Quit(struct WebServer *Web)
{
WS_WriteWhole(Web,QuitHTML,sizeof(QuitHTML)-1);
g_Quit=true;
}
We add a new function for quiting the program with the
File_Quit() function.
It sends the quit html and then sets a global var to "true" to quit.
const char CSS[]=
"div#top"
"{"
"height:50px;"
"width:100%;"
"background-color:#679509;"
"font-size:1.5em;"
"line-height:50px;"
"padding-left:15px;"
"color:white;"
"text-shadow:#4F4F4F 2px 2px;"
"}
"
"div#quitbttn"
"{"
"position:absolute;"
"top:23px;"
"right:30px;"
"}
"
"div#quitbttn a"
"{"
"color:white;"
"text-decoration:none"
"}
"
"div#quitbttn a:hover"
"{"
"text-decoration:underline"
"}
"
"div#bottom"
"{"
"position:absolute;"
"bottom:0px;"
"left:0px;"
"height:50px;"
"width:100%;"
"background-color:#679509;"
"}
"
"div#content"
"{"
"background-color:#f0f0f0;"
"color:#6A6A6A;"
"}
";
void File_SomeStyle(struct WebServer *Web)
{
WS_WriteWhole(Web,CSS,sizeof(CSS)-1);
}
Finally we the "/SomeStyle.css" file with static CSS in it.