In: Computer Science
Using node.js, create the following tasks.
1. Set up a server and HTML file server as shown in the videos.
Once you have it successfully running, make the following adjustments
A. When a 404 error (file not found) occurs, display a funny message about the file missing and/or did you forget how to type?
B. If the user enters a request for the home page (index.html) then:
Display an index.html page you have created which includes your name, course number, course name, assignment name, assignment due date. Place these items on a table. Make the page looks professional and clean by adding some CSS to control formatting, color, font, and other issues.
If the user enters a request for the page (login.html) then:
Display a login.html page which includes a form to request the user enter a userid and password. Also, include a "forgot my password" link. Use the same css as you used previously for format the page. This page will not do anything. But it should include HTML code to make sure the user entered items in each textbox. It should also hide the password when entered.
If the user enters any of the page request, then the 404 error information should display.
What to turn in:
1. Screenshots showing the code, the displaying of the 404 message when a wrong page is entered, the display of the index.html page by the server, and the display of the login.html page by the server.
Step 1 — Creating a Basic HTTP Server
Let’s start by creating a server that returns plain text to the user. This will cover the key concepts required to set up a server, which will provide the foundation necessary to return more complex data formats like JSON.
First, we need to set up an accessible coding environment to do
our exercises, as well as the others in the article. In the
terminal, create a folder called first-servers
:
mkdir first-servers
Step 2 — Returning Different Types of Content
The response we return from a web server can take a variety of formats. JSON and HTML were mentioned before, and we can also return other text formats like XML and CSV. Finally, web servers can return non-text data like PDFs, zipped files, audio, and video.
In this article, in addition to the plain text we just returned, you’ll learn how to return the following types of data:
Serving HTML
HTML, HyperText Markup Language, is the most common format to use when we want users to interact with our server via a web browser. It was created to structure web content. Web browsers are built to display HTML content, as well as any styles we add with CSS, another front-end web technology that allows us to change the aesthetics of our websites.
Let’s reopen html.js
with our text editor:
nano html.js
Step 3 — Serving an HTML Page From a File
We can serve HTML as strings in Node.js to the user, but it’s preferable that we load HTML files and serve their content. This way, as the HTML file grows we don’t have to maintain long strings in our Node.js code, keeping it more concise and allowing us to work on each aspect of our website independently. This “separation of concerns” is common in many web development setups, so it’s good to know how to load HTML files to support it in Node.js
To serve HTML files, we load the HTML file with the
fs
module and use its data when writing our HTTP
response.
Step 4 — Managing Routes Using an HTTP Request Object
Most websites we visit or APIs we use usually have more than one endpoint so we can access various resources. A good example would be a book management system, one that might be used in a library. It would not only need to manage book data, but it would also manage author data for cataloguing and searching convenience.
Even though the data for books and authors are related, they are two different objects. In these cases, software developers usually code each object on different endpoints as a way to indicate to the API user what kind of data they are interacting with.
Let’s create a new server for a small library, which will return
two different types of data. If the user goes to our server’s
address at /books
, they will receive a list of books
in JSON. If they go to /authors
, they will receive a
list of author information in JSON.