Prompt

You will be given starter code that implements a preliminary dashboard and prompts the user for their username and password. You will have to modify the code to add the appropriate calls to MongoDB, using theCRUD Python Modulethat you completed as a part of Project One.

Important Note:To avoid any possible confusion, the authentication that you are building in this assignment will be passing the username and password through to the MongoDB database. You willnotbe using the authentication component from the Dash framework itself.

1. Open theModuleFiveAssignment.ipynbfile, which contains the starter code for the dashboard and the authentication interface. Upload this file into Apporto and open it using the Jupyter Notebook application. Be sure to review all of the starter code that you have been given. Pay special attention to the import commands and the comments describing what each section of code does.
2. The code that you have been given provides you with a very basic dashboard. Add anHTML component, such as a header, to develop a unique identifierfor your dashboard. This unique identifier could be your name or a specific handle or image that is unique to you.
3. Customize the starter code that you have been given by developing connections between the dashboard username/password interface and your CRUD Python module. The dashboard should prompt the user for their username and password, and return the output of the test query. Be sure to complete each of the following:

• Import the CRUD Python modulethat you created for Project One.
• Add the functionality in the callback routine for instantiation of your CRUD object. Remember to apply the user authentication when creating your CRUD object.
• Finally,add functionality to test your dashboard connection to MongoDB. Write code that returns the following read query: {"animal_type" : "Dog","name" : "Lucy"}.
• IMPORTANT: Use the "aacuser" account and the password that you set up in the Module Three milestone.

2. Take ascreenshotof your dashboard as proof of this execution. Your screenshot should show the prompt for the username and password, and then the result of your test query. Your unique identifier should also be visible in the screenshot.

ModuleFiveAssignment.ipynbfile:

from jupyter_plotly_dash import JupyterDash

import dash_core_components as dcc

import dash_html_components as html

import dash

from dash.dependencies import Input, Output

from pymongo import MongoClient

import urllib.parse

from bson.json_util import dumps

#TODO: import for their CRUD module

# this is a juypter dash application

app = JupyterDash('ModuleFive')

# the application interfaces are declared here

# this application has two input boxes, a submit button, a horizontal line and div for output

app.layout = html.Div(

[

dcc.Input(

id="input_user".format("text"),

type="text",

placeholder="input type {}".format("text")),

dcc.Input(

id="input_passwd".format("password"),

type="password",

placeholder="input type {}".format("password")),

html.Button('Execute', id='submit-val', n_clicks=0),

html.Hr(),

html.Div(id="query-out"),

#TODO: insert unique identifier code here]

# this is area to define application responses or callback routines

# this one callback will take the entered text and if the submit button is clicked then call the

#mongo database with the find_one query and return the result to the output d..;@app.callback(

Output("query-out", "children"),

[Input("input_user".format("text"), "value"),

Input("input_passwd".format("password"),"value"),

Input('submit-val', 'n_clicks')],

[dash.dependencies.State('input_passwd', 'value')]

)

def cb_render(userValue,passValue,n_clicks,buttonValue):

if n_clicks > 0:

###########################

# Data Manipulation / Model

# use CRUD module to access MongoDB

##########################

username = urllib.parse.quote_plus(userValue)

password = urllib.parse.quote_plus(passValue)

#TODO: Instantiate CRUD object with above authentication username and password values

# Initializing the MongoClient using the specified path to my port

self.client = M..s@127.0.0.1:27017/AAC' % ("accuser", "aacuserpassword"))

#Setting the AAC database to be worked from

self.database = self.client['AAC']

# note that MongoDB returns BSON, the pyMongo JSON utility function dumps is used to convert to text

#TODO: Return example query results

app