Hongkun Jin / ClassID: 20 / TeamID: 13-1
John C Goza / ClassID:14 / TeamID: 13-1

• Code Link: Lab3_Code
  

• YouTube Link: LAB3_Video

• Heroku Link: LAB3_Heroku

• We were using Firebase for our project, however, in order to try the MongoDB and for the lab3 requirement, we add our product info storage samples from our project into MongoDB and demonstrate CRUD

• These are the sample already been insert to the MongoDB database

• Here, we already deployed our REST service in Heroku, and show CRUD operations

• This is the HOME page and when you click the Add Discover, it will show text areas for you to add product info.

<h1 onclick="showAdd()">Add Discover</h1>
            <div id="addPart" style="display:none;">
            <ul>
                <li style="width:100%;">
                    <input type="text" class="textbox1" name="name" placeholder="Prodcut Name" ng-model="formData.name" required />
                    <span class="form_hint">Enter Product Name</span>
                </li>
                <li style="width:100%;">
                    <input type="text" class="textbox1" name="store" ng-model="formData.store" placeholder="Shopping Store" required />
                    <span class="form_hint">Enter a Shopping Store</span>
                </li>
                <li style="width:100%;">
                    <input type="text" class="textbox1" name="S" ng-model="formData.S" placeholder="Description" required />
                    <span class="form_hint">Enter a Description</span>
                </li>
                <li style="width:100%;">
                    <input type="text" class="textbox1" name="price" ng-model="formData.price" placeholder="Price" required />
                    <span class="form_hint">Enter the price</span>
                </li>
            </ul>
            <input type="submit" name="Add" style="width:100%;" value="Add"/>
            </div>

• The code is for showing the text and button this part need

• We can add our discover for a product after clicking the button

• Add success alert shows on top of the website

app.post('/insert', function (req, res) {
    MongoClient.connect(url, function(err, db) {
        if(err)
        {
            res.write("Failed, Error while connecting to Database");
            res.end();
        }
        insertDocument(db, req.body, function() {
            res.write("Successfully inserted");
            res.end();
        });
    });
});

• Insert code for MongoDB

• Read the data by click Search button after type the name of the product

• Click the Show result button, then the product information will show there for you

app.post('/search', function (req, res, next) {
    var resultArray = [];
    MongoClient.connect(url, function(err, db) {
        assert.equal(null, err);
        var cursor = db.collection('appadmin').find(req.body);
        cursor.forEach(function(doc, err) {
            assert.equal(null, err);
            resultArray.push(doc)
        }, function () {
            db.close();
            console.log(chalk.red("Search Success"))
            res.send({items: resultArray});
        });
    });
});

• The data callback as JSON and show the JSON objects to the users

                <TABLE BORDER=2 CELLPADDING=4> <TR> <TH style="color: aliceblue; background:#FF9933" COLSPAN=2>Product Information by Searching </TH> </TR>
                    <TR> <TD>Name</TD> <TD>{{message.items[0].name}}</TD> </TR>
                    <TR> <TD>Price</TD> <TD>${{message.items[0].price}}</TD> </TR>
                    <TR> <TD>Store</TD> <TD>{{message.items[0].store}}</TD> </TR>
                    <TR> <TH style="color: aliceblue; background:#FF9933" COLSPAN=2 BGCOLOR="#5e5e5e">{{message.items[0].S}}</TH> </TR>
                </TABLE>

• Using TABLE

• Click the Delete button, then the product information will be deleted

• And when you search the product again, the website will tell you that the product not found in the database.

app.post('/delete', function (req, res, next) {
    var id = req.body.id;

    MongoClient.connect(url, function(err, db){
        assert.equal(null, err);
        db.collection('appadmin').deleteOne({"_id": objectId(id)}, function(err, result){
            assert.equal(null, err);
            console.log('Product deleted')
            db.close();
        });
    })
});

• The code is for deleting in MongoDB

• Update the product after search

• In this part, I change the price of this product and click update.

• Success

• And the price of this product has been updated.

app.post('/updata', function (req, res, next) {
    var item = {
        name: req.body.name,
        store: req.body.store,
        S: req.body.S,
        price: req.body.price
    };
    var id = req.body.id;
    MongoClient.connect(url, function(err, db){
        assert.equal(null, err);
        db.collection('appadmin').updateOne({"_id": objectId(id)},{$set:item}, function(err, result){
            assert.equal(null, err);
            console.log('Product updated')
            db.close();
        });
    })
});

• The code of update in MongoDB

In the project, we use a lot of node modules, like googleplus, angularfirebase based on IONIC 3. However, we just create some of our modules in this lab3.

  "dependencies": {
    "assert": "^1.4.1",
    "body-parser": "^1.17.2",
    "chalk": "^2.4.1",
    "cors": "^2.8.4",
    "express": "^4.16.4",
    "mongodb": "^2.2.33"
  },

• This is the Terminal, and we use Chalk as a useful node module for us to test our lab.
  It is incredibly easy to use and it makes life easier on us to discover the bugs and problems
  We are no longer need to search through text all colored the same for a specific console.log.

• As a matter of fact, we were thinking to use npm install to solve our problem, however, we just use the Google Map service as a client-server. It works very well though.
  The screenshot is that show Walmart Store Location in Google map around UMKC.

• We have been using MongoDB all the time for this LAB

• All the screenshots showed above.

• 1. https://www.npmjs.com/
• 2. https://devcenter.heroku.com/categories/reference

Edited by John C Goza (Jack) & Hongkun Jin (Max)