Quick Index
Overview


A video that accompanies the page is here....

Simply do your best on this one. We're aiming to get a little familiarity with building an interactive web app and database.

Purpose


The problem statement is:


The key term here is "interactive". This means that we want to capture input from the web browser client/user, and process that input.

The actual content and functionality is coder's choice.

Guide Examples


Wexler Book


Lessons in the book are listed below for requirement items

Getting Started Example


For a "Getting Started Example" go here...

Consolidated Guide Example


This is a runnable example that consolidates many lessons from the book.

The example (guide) is available on github here:


As always with github, see the "README" on the git repository home page.

Path of least resistance -- use the consolidated guide example as a basis/template for your own web app idea -- see GitHub README for more info. Or, if you do have the time, you'll learn a little more coding everything from scratch. Either approach is perfectly fine.

Problem Statement



Do URL routing to ejs views (like we've done previously)
Provide view(s) that capture interactive (input) and process the input (Wexler, 15.2)
Add an index/home page to your app -- see "Index (Home) Page EJS Code" at end of this doc

Optional Work


I'm sure if you have the time, you'll want to do these items. They are optional, so low pressure fun (the guide example includes them):


Note: Installing Mongo DB

Wexler Lesson 21 gives pretty good instructions for Mongo installation and getting started. Note that your "data" directory does not need to go to your computer root dir (e.g., it could go in "\Work\MongoDB\data").

There are many other sources available including:


Discussion Board 💡


If someting in the book is not clear, without hesitation toss any question onto the board.

And we'll add more examples or etc.

A Couple Optional Approaches


Calculator


If you are short of time and want to do a "calculator-style" web app as opposed to a "database-based" web app let me know and I'll provide a guide eExample for such.

Under the Hood


If you are the type of coder who likes to to get under the hood you could code up a web app with vanilla Node.js (without express).

You would really then learn the engine and it's not hard to do -- the previous assignments have provided about everything you need -- the keys being routing and serving files. You would not have the bells and whistles that express offers.

If so, let me know and I can help.

Submitting



Index (Home) Page EJS Code


Example
This is "index.ejs" from the "Example Project".

The focal points of this snippet are the HTML anchor "a" elements which you are likely familiar with from your HTML courses.

You'll notice that those anchors contain the URL endpoints (highlighted) that our router will receive and route to the appropraite functinality.

Note: the "link" is importing in CSS styles. Coder's choice if you want to style your views.
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<div class="background"</div>
<div id="nav" class="home">
	<h1 class="header1">Quick Definitions</h1>
	<h1 class="header2">Welcome Scholars!</h1>
	<a href="/def/new"> <span class="button">Add Definition</span> </a>
	<a href="/defs"> <span class="button">All</span> </a>
	<a href="/defs/searchPage"> <span class="button">Search</span> </a>
</div>




































Introduction To Node.js (Chapter 806 - Web App Challenge)










CHAP805 < Web App Challenge > CHAP807

Chapter Top Search Site Contents