MongoDB and jQuery: Creating, Importing, and Manipulating JSON Data, High school final essays of Mathematics

Download MongoDB and jQuery: Creating, Importing, and Manipulating JSON Data and more High school final essays Mathematics in PDF only on Docsity! ST.GONSALO GARCIA COLLEGE OF ARTS AND COMMERCE PAPDI, VASAL CERTIFICATE This is to certify that Master ARNOLD AWLYN VAZ , Roll No.: 55 of T.Y.B.SC. (IT) Sem-V has successfully completed practical’s of the subject ‘Next Generation Technology’ the year 2020-2021 under the guidance of Prof. Brensa Cerejo. Internal Examiner’s Sign Head of Department Date: Principal Index Sr.no Practicals Date Sign MongoDB Basis a. Write a MongoDB query to create and drop database. b. Write a MongoDB query to create, display and drop collection. c. Write a MongoDB query to insert, query, update and delete a document. 2 Simple Queries with MongoDB 3 Implementing Aggregation a. Write a MongoDB query to use sum, avg, min and max expression. b. Write a MongoDB query to use push and addToSet expression. c. Write a MongoDB query to use first and last expression. 4 Replication, Backup and Restore a. Write a MongoDB query to create replica of existing database. b. Write a MongoDB query to create a backup of existing database. c. Write a MongoDB query to restore from the backup. 5 PHP and MongoDB a. Connecting PHP with MongoDB and inserting, retrieving, updating and deleting. 6 Python and MongoDB a. Connecting Python with MongoDB and inserting, retrieving, updating and deleting. 7 Program on Basic jQuery a. jQuery Basic, jQuery Events b. jQuery Selectors, jQuery Hide and Show effects c. jQuery fading effects, jQuery Sliding effects 8 | jQuery Advanced a. jQuery Animation effects, jQuery Chaining Use “show dbs “ to display databases available . Note: You have to insert document to make your database visible " db.movie.insert({"name":"tutorials point"})” Il Select Command Prompt - mongo - oa (ii)/DROP database db .dropDatabase() It drop the current database BH Command Prompt - mango Show dbs to see the changes Bi Select Command Prompt - mongo (ii) Inserting into Collections Inserting into collection:- db.mycol.insertOne( {item: "canvas", qty: 100, tags: ["cotton"], size: { h: 28, w: 35.5, uom: "cm" } } BH Command Prompt - mongo (iii) Displaying the Collections db.mycol.find().pretty() Ei Command Prompt - mongo (iv) Dropping Collections db.mycol.drop() Ei Command Prompt - mongo (iii), Updating Documents To update the Documents db.mycol.update({'title':'MongoDB Overview'},{Sset:{'title':'New MongoDB Tutorial'}}) To display the Documents db.mycol.find().pretty() BH Select Command Prompt - mongo o x (iv) Removing Documents db.mycol.remove({'title':'New MongoDB Tutorial’}) db.mycol.find().pretty() BH Command Prompt - mongo - a x Practical 2 Prac 3(Implementing aggregation) a)Write a MongoDB query to use sum,avg,min,max expression Firstly create a New collection db. createCollection("mycollection") Then Insert 2 documents into it db.mycollection.insert([ { title: 'MongoDB Overview', description: 'MongoDB is no sql database’, by: ‘tutorials point’, url: 'http://www.tutorialspoint.com', tags: ['mongodb'’, 'database', 'NoSQL'], likes: 100 L title: 'NoSQL Database’, description: "NoSQL database doesn't have tables", by: ‘tutorials point’, url: 'http://www.tutorialspoint.com', tags: ['mongodb'’, 'database', 'NoSQL'], likes: 20, comments: [ { user:'user1', message: 'My first comment’, dateCreated: new Date(2013,11,10,2,35), like: 0 Select Command Prompt - mongo . (SUM db.mycollection.aggregate([{Sgroup : {_id : "Sby_user", num_tutorial : {$sum : "Slikes"}}]) IB Select Command Prompt - mongo (iv) MAX db.mycollection.aggregate([{Sgroup : {_id : "Sby_user", num_tutorial : {Smax : "Slikes"}}}]) BY Command Prompt - mongo - a x eset. er", num_tutorial : {$min : “$lik b)write a MangoDB query to push and addToSet expression (i)Push db.mycollection.aggregate([{Sgroup : {_id : "Sby_user", url : {Spush: "Surl"}}}]) BI Command Prompt - mongo o x Peco Peco Peco (ii) addToSet db.mycollection.aggregate([{Sgroup : {_id : "Sby_user", url : {Spush: "Surl"}}}]) IBY Select Command Prompt - mongo ao x ime ae ime ae Tne ssa Practical 4 Prac 4: a)Write a MongoDB query to create a Replica of an existing database MongoDB achieves replication by the use of replica set. A replica set is a group of mongod instances that host the same data set. In a replica, one node is primary node that receives all write operations. All other instances, such as secondaries, apply operations from the primary so that they have the same data set. Replica set can have only one primary node. A replica set in MongoDB is a group of mongod processes that maintain the same data set. mongod --port "PORT" --dbpath "YOUR_DB_DATA_PATH” --replSet "REPLICA_SET_INSTANCE_NAME” mongod --port 27017 --dbpath "C:\data" --repISet RSS_1 BB Select Command Prompt ao x BI Command Prompt - a x Open new cmd and type mongo to connect this mongod instance In Mongo client, issue the command rs.initiate() to initiate a new replica set. rs.initiate() BI Command 2rompt - mange ao x C7Ey EEE EVES CMe S est veEs Las PELs ed v To check the status of replica set issue the command rs.status() Rs.status() BI Command ?rompt - mango - oOo x Practical 5 is Connecting PHP and MongoDB and inserting, retrieving, updating and deleting MongoDB-PHP Connect.php <?php // connect to mongodb $m = new MongoClient(); echo "Connection to database successfully"; // select a database Sdb = $m->mydb; echo "Database mydb selected"; Scollection = $db->createCollection("myusers"); echo "Collection created succsessfully"; ?> Insert.php <?php // connect to mongodb $m = new MongoClient(); echo "Connection to database successfully"; echo "<br>"; // select a database Sdb = $m->mydb; echo "Database mydb selected"; echo "<br>"; Scollection = $db->myusers; echo "Collection selected succsessfully"; echo "<br>"; Suser1 = array( "name" => "ABC", "age" => 30 ); Suser2 = array( "name" => "XYZ", "age" => 35 ); Suser3 = array( "name" => "PQR", "age" => 32 ); Scollection->insert(S$user1); Scollection->insert(S$user2); Scollection->insert(Suser3); echo "Document inserted successfully"; ?> Update.php <?php // connect to mongodb $m = new MongoClient(); echo "Connection to database successfully"; echo "<br>"; // select a database Sdb = $m->mydb; echo "Database mydb selected"; echo "<br>"; Scollection = $db->myusers; echo "Collection selected succsessfully"; echo "<br>"; // now update the document Scollection->update(array("name"=>"PQR"), array('Sset'=>array("name"=>"LMN"))); echo "Document updated successfully"; ?> Delete.php <?php // connect to mongodb $m = new MongoClient(); echo "Connection to database successfully"; echo "<br>"; // select a database Sdb = $m->mydb; echo "Database mydb selected"; echo "<br>"; Scollection = $db->myusers; echo "Collection selected succsessfully"; echo "<br>"; // now remove the document Then delete the document Bima [my @ ami |@ pnw Qo © SD O tecahostcatetenre ‘Connection te database svccessally Dambese mya scleetoe Cellecion eleiew succsetully ecvancnts deicted aessssfully After Delete, retrieve data eo | M Wang: | Homes @ jor | @ Mong: ese: [SHE 0H" | me hp € 9 FO © becahert-erievenho Cenacenon te drabesescacemtillsLetmkase mayeb sslocredColioasonscletadsacessafilly aDe:3D waziss ane 30 maz ane 0 maz Por? Connecting Python with MongoDB and inserting, retrieving, updating and deleting >>> import pymongo Making a Connection with MongoClient >>> from pymongo import MongoClient >>> client = MongoClient() Getting a Database >>> db =client.studentdb Insert a document >>> student1 = {"name": "Arun","rollno": 1} >>> students = db.students >>> students_id = students.insert(student1) >>> students_id Objectld('548c02cd838d1f11b0d17d52') Add two more records : >>> student2 = {"name": "David","rollno": 2} >>> student3 = {"name": "Shekhar","rollno": 3} >>> students = db.students >>> students_id = students.insert(student2) >>> students_id = students.insert(student3) Find a document >>> students = db.students >>> students.find_one() {'_id': Objectld('548c02cd838d1f11b0d17d52'), 'name': ‘Arun’, 'rollno': 1} Find a specific document : >>> students = db.students >>> students.find_one({"name": "Shekhar"}) {'_id': Objectld('548c058a838d1f11b0d17d54'), 'name': 'Shekhar', 'rollno': 3} >>> students.update({"name": "Shekhar"}, {'Sset' ‘rollno': 12}}) Warning (from warnings module): File "_main_", line 1 DeprecationWarning: update is deprecated. Use replace one, update one or update_ many instead. {'n': 1, 'nModified': 1, 'ok': 1.0, 'updatedExisting': True} >>> students. find _one({"name "Shekhar"}) {'_id': ObjectId("Sd2dcfzadalcecs22803484dc"), 'name': 'Shekhar', 'rollno': 12} >>> students.remove({"rollno": 12}) Warning (from warnings module): File "_ main", line 1 DeprecationWarning: remove is deprecated. Use delete_one ox delete_many instead. {'nt: 1, 'ok': 1.0} >>> for student in students. find():student {!_id': ObjectId('Sd2dcef2dalecs22803484da'), ‘name’: ‘Arun’, ‘rollno': 1} {'_id': ObjectId('Sd2def24dalecs22803484db"), 'name': 'David', 'rollno': 2} poe | ¥ Ln: 51 Cok 4 Practical 7 Practical 7A 1 JQuery Basic <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ S$("p").click(function(){ $(this).hide(); Ds; Ds; </script> </head> <body> <p>lf you click on me, | will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> OUTPUT: If you click on me, I will disappear. Click me away! Click me too! 2. Query events: 2.1 Mousecenter: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); Ds; Ds; </script> </head> <body> <p id="p1">Enter this paragraph.</p> </body> </html> Practical 7B 1 JQuery Selector: 1.1 Control: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ S("p").hide(); Ds; Ds; </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me to hide paragraphs</button> </body> </html> OUTPUT: This is a heading This is a paragraph. This is another paragraph. Click me to hide paragraphs. 1.2 Class selector: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ S$("button").click(function(){ $(".test").hide(); Ds; Ds; </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html> OUTPUT: This is a heading This is a paragraph. This is another paragraph. Click me 1.3 ID Selector: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); Ds; Ds; </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body> </html> OUTPUT: This is a heading This is a paragraph. This is another paragraph. Click me OUTPUT: Demonstrate fadeln() with different parameters. Click to fade in boxes 1.2 FadeOut: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); §("#div3").fadeOut(3000); Ds; Ds; </script> </head> <body> <p>Demonstrate fadeOut() with different parameters.</p> <button>Click to fade out boxes</button><br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width: 80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width: 80px;height:80px;background-color:blue;"></div> </body> </html> OUTPUT: Demonstrate fadeOut() with different parameters. Click to fade out boxes 1.3 FadeToggle: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ S("#div1").fadeToggle(); S("#div2").fadeToggle("slow"); S("#div3").fadeToggle(3000); Ds; Ds; </script> </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button><br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width: 80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="width: 80px;height:80px;background-color:blue;"></div> </body> </html> </html> OUTPUT: 2.2 SlideDown: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ S("#flip").click(function(){ S("#panel").slideDown("slow"); Ds; Ds; </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> OUTPUT: Practical 8 Practical 8A Animation: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ S("div").animate({left: '250px'}); Ds; Ds; </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px; position:absolute;"></div> </body> </html> OUTPUT: ‘Stan Animation ‘Ry defenlt, ll HTMT. elements have a static position, and cannot he maced. To manipulate tae position, remembar to frst se the CSS pesitinn property ofthe element to relative, Fxerl or abso! Chaining: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ S("#p1").css("color", "red").slideUp(2000).slideDown(2000); Ds; Ds; </script> </head> <body> <p id="p1">jQuery is fun! !</p> <button>Click me</button> </body> </html> OUTPUT: jQuery is fun!! Click me Practical 8B CallBack: 1. With: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ S("p").hide("slow", function(){ alert("The paragraph is now hidden"); Ds; Ds; Ds; </script> </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> </body> </html> OUTPUT: Hide This is a paragraph with little content. SET: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ S$("#btn1").click(function(){ S("#test1").text("Hello world!"); Ds; S$("#btn2").click(function(){ S("#test2").html("<b>Hello world!</b>"); Ds; $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); Ds; Ds; </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html><!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ S$("#btn1").click(function(){ S("p").append(" <b>Appended text</b>."); Ds; S$("#btn2").click(function(){ S("ol").append("<li>Appended item</li>"); Ds; Ds; </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">Append text</button> <button id="btn2">Append list items</button> </body> </html> OUTPUT: This is a paragraph. This is another paragraph. Input field: Mickey Mouse Set Text || Set HTML || Set Value This is a paragraph. This is another paragraph. 1. List item 1 2. List item 2 3. List item 3 Append text || Append list items </div> <br> <button>Remove div element</button> </body> </html> OUTPUT: Remove div element Practical 9 9.1 JSON Create JSON file(artists.txt) on Localhost { "artists" : [ { “artistname" : "Leonard Cohen", "born" : "1934" h { “artistname" : "Joe Satriani", "born" : "1956" h { "artistname" : "Snoop Dogg", "born" : "1971" } ] } Parsing JSON(above json file) <!doctype html> <title>Example</title> <script> // Store XMLHttpRequest and the JSON file location in variables var xhr = new XMLHttpRequest(); var url = "http://localhost/artists.txt"; // Called whenever the readyState attribute changes xhr.onreadystatechange = function() { // Check if fetch request is done if (xhr.readyState == 4 && xhr.status == 200) { // Parse the JSON string var jsonData = JSON. parse(this.responseText); document.getElementByld("demo").innerHTML=jsonData.name; // Call the showArtists(), passing in the parsed JSON string //showArtists(jsonData); } i // Do the HTTP call using the url variable we specified above xhr.open("GET", url, true); xhr.send(); </script> <p>Take a look:<a href="http://localhost/artists.txt">JSON file</a></p> Run the above file on localhost [) welcome x | M Mongo- x | Q Howtow x | @ jsonwith > € > GS 1 O locathost/json demo.html Apps Take a look-JSON file [Welcome x | M Mongo- x | Q Howtov x | Q jsonwith x € S OD © locathost/artists.txt Apps: "artists" : [ “artistname" : “Leonard Cohen", “born” : "1934" ts “artistname" : "Joe Satriani", “born” : "1956" oa t “artistname" "born" : "1972"