Practical No.

: 1
Aim: Write a program to implement MongoDB data models.

Date: Roll No:17 Sign:

Program:
1.Index.js
const mongoose = require("mongoose");
mongoose.set('strictQuery' , true);
mongoose.connect("mongodb://localhost:27017" , console.log('Connected to Database'));

//Creating Schema
const studentSchema = new mongoose.Schema({Name : String , Roll_No : Number , Class :
String , Age : Number , Email : String})

//Defining Student Model

const Student = mongoose.model('Student' , studentSchema);

//Create Collection of Model

Student.createCollection().then(function(){
console.log('Collection is Created !');
});

Output:

2.model.js
const mongoose = require("mongoose");

//Schema for Collection

const studentSchema = new mongoose.Schema({Name : String , Roll_No : Number , Class :
String , Contact_No : String , Age : Number ,
Email : String},{collection : "students"});

//Exporting Scheme
module.exports = mongoose.model("student" , studentSchema);

Output:
 Practical No.: 2
Aim: Write a program to implement CRUD operations on MongoDB

Date: Roll No:17 Sign:

Program:
1.createCollecton.js
const mongoose=require('mongoose');
mongoose.set('strictQuery',true);
mongoose.connect('mongodb://127.0.0.1:27017',{
dbName:"test",useUnifiedTopology:true,useNewUrlParser:true
},err=>err? console:log(err),console.log("Connected to database"));
const studentSchema= new mongoose.Schema(
{
name:String,
rollNo:Number,
class:String,
age:Number,
email:String
}
)
const Student = mongoose.model("Student",studentSchema);
var db = mongoose.connection;
Student.createCollection().then(function(){
console.log('Collection is created');
});
db.on('error',console.error.bind(console,'connection error'));

Output:
2.insertOne.js
const mongoose=require('mongoose');
mongoose.set('strictQuery',true);
mongoose.connect('mongodb://127.0.0.1:27017',console.log("Connected to database"));
const studentSchema= new mongoose.Schema(
{
name:String,
rollNo:Number,
class:String,
age:Number,
email:String
}
)
const Student = mongoose.model("Student",studentSchema);
var db = mongoose.connection;
var student1 = new Student({name:"Lalit Rawool",
rollNo:10,
class:"SyCs",
age:19,
email:"[email protected]"});

student1.save(function(err,result){
if(err){
console.log(err);
}else{
console.log(result);
}
})

Output:

3.insertMany.js
const mongoose = require('mongoose');
var db = mongoose.connection;
mongoose.set('strictQuery',true);
mongoose.connect('mongodb://127.0.0.1:27017',{
dbName:"test",useUnifiedTopology:true,useNewUrlParser:true
},err=>err? console.log(err):console.log("Connected to database"))

const studentSchema = new mongoose.Schema(

{
name:String,
rollNo:Number,
class:String,
age:Number,
email:String
}
)
const Student = mongoose.model("Student",studentSchema);
db.once('open',function(){
Student.insertMany([{name:"Rohit Rawool",
rollNo:11,
class:"Baf",
age:20,
email:"[email protected]"},
{name:"Shravani Rawool",
rollNo:1,
class:"BSc",
age:23,
email:"[email protected]"},
{name:"Saurabh Rawool",
rollNo:5,
class:"BCS",
age:23,
email:"[email protected]"}]).then(function(){
console.log('data inserted');
}).catch(function(err){
console.log(err);
})
})

Output:
 4.Update a record into the collection.
Update.js
const mongoose = require('mongoose');
mongoose.set('strictQuery',true);
mongoose.connect('mongodb://localhost:27017',{
dbName:"test",useUnifiedTopology:true,useNewUrlParser:true
},err=>err? console.log(err):console.log("Connected to database"))

const studentSchema = new mongoose.Schema(

{
name:String,
rollNo:Number,
class:String,
age:Number,
email:String
}
)
const Student = mongoose.model("Student",studentSchema);
var db = mongoose.connection;
var student1 = new Student({name:"swapnali rane",
rollNo:10,
class:"SyCs",
age:19,
email:"[email protected]"});

Student.updateOne({name:"swapnali rane"},{name:"Rakhi"},function(err,result){
if(err){
console.log(err);
}else{
console.log(result);
}
}
);

Output:

5. Fetch and Get all the records

getData.js
Source code:
const mongoose=require('mongoose');
mongoose.set('strictQuery',true);
mongoose.connect('mongodb://localhost:27017',
console.log("Connected to database"))

const studentSchema=new mongoose.Schema(

{
name:String,
rollNo:Number,
class:String,
age:Number,
email:String,
}
)
const Student=mongoose.model("Student",studentSchema);
var db=mongoose.Connection;
Student.find({}).then(data=>{
console.log('Data:');
console.log(data);
}).catch(error=>{
console.log(error);
})

Output:
 Practical No.:03

Aim: Write a program to perform validation of a form using AngularJS.

Date: Roll No.:17 Sign:
____________________________________________________________________________
1.Create index.html
Source code:
<!DOCTYPE html>
<html>
<head>
<title>AngularJs Form Input Fields Validation Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('formApp', []);
app.controller('formCtrl', function ($scope)
{
$scope.sendForm = function ()
{
$scope.msg='Form Submited Successfully';
};
$scope.getClass = function (color)
{
return color.toString();
}
});
</script>
<style>
.valid.false
{
background: red;
}
.valid.true
{
background:green;
}
.error
{
color: red;
}
</style>
</head>

<body ng-app="formApp" ng-controller="formCtrl">

<h3>Form validation demo app in AngularJs</h3>
<form name="personForm" ng-submit="sendForm()">
<label for="name">Name</label>
<input id="name" name="name" type="text" ng-model="person.name" required />
<span class="error" ng-show="personForm.name.$error.required"> Required! </span>
<br /><br />
<label for="adress">Adress</label>
<input id="address" name="address" type="text" ng-model="person.address"
required />
<span class="error" ng-show="personForm.address.$error.required"> Required!
</span>
<br /><br />
 <label for="contact">Contact No</label>
<input id="mobile" name="mobile" type="number" ng-model="person.mobile"
required />
<span class="error" ng-show="personForm.mobile.$error.required">Required number!
</span>
<span class="error" ng-show="personForm.mobile.$error.mobile">Invalid
mobile!</span>
<br /><br />
<label for="email">Email</label>
<input id="email" name="email" type="email" ng-model="person.email" required />
<span class="error" ng-show="personForm.email.$error.required">Required!</span>
<span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>
<br /><br />
<input type="checkbox" ng-model="terms" name="terms" id="terms" required />
<label for="terms">I Agree to the terms.</label>
<span class="error" ng-show="personForm.terms.$error.required">You must agree to
the terms</span>
<br /><br />
<button type="submit">Submit Form</button>
<br /><br />
<span>{{msg}}</span>
</form>
</body>
</html>

Welcome.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body bgcolor="yellow">
<h1>Record Successfully Submitted........</h1>
</body>
</html>

Output:
Practical No.:04
Aim: Write a program to create and implement modules and controllers in AngularJS?
Date: Roll No.:17 Sign:
____________________________________________________________________________
Module.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Angular First App</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">Name:{{Name}}</h1>
<h1 ng-controller="HelloWorldCtrl">Website:{{Website}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.Name = " Kankavli College Kankavli ";
$scope.Website = "www.kckcollege.com.com";
})
</script>
</body>
</html>

Output:

Practical No.:05
Aim:Create an application for customer/students records using AngularJS.
Date: Roll No.:17 Sign:
____________________________________________________________________________
Viewpage.html
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Js Module</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
<style>
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd){
background-color: #f2f2f2;
}
table tr:nth-child(even){
background-color: #ffffff;
}
</style>
</head>
<body ng-app="mainApp">
<h2>AngularJS Sample Application</h2>
<div ng-controller="studentController">
<table border="0">
<tr>
<td>Enter First Name : </td>
<td><input type="text" ng-model="student.firstName"></td>
</tr>
<tr>
<td>Enter Last Name : </td>
<td><input type="text" ng-model="student.lastName"></td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="subject in student.subjects">
<td>{{subject.name}}</td>
<td>{{subject.marks}}</td>
</tr>
</table>
 </td>
</tr>
</table>
</div>
</body>
</html>

mainApp.js
var mainApp = angular.module("mainApp", []);

studentController.js:
Source code:
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Sanika",
lastName: "Thakare",
fees:500,

subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

Output:

Practical No.:06
Aim: Create a simple HTML “Hello World” Project using AngularJS Framework and apply
ng-controller, ng-model and expressions
Date: Roll No.:17 Sign:
___________________________________________________________________
Main.html

Program:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Angular First App</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World!!!"
})
</script>
</body>
</html>

Output:

Practical No.:07
Aim: Create an app using Flutter for User Authentication
Date: Roll No.:17 Sign:
_____________________________________________________________________
Main.dart
Program:
import 'package:flutter/material.dart';
import 'HomePage.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginDemo(),
);
}
}

class LoginDemo extends StatefulWidget {

@override
_LoginDemoState createState() => _LoginDemoState();
}

class _LoginDemoState extends State<LoginDemo> {

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Login Page"),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 60.0),
child: Center(
child: Container(
width: 200,
height: 150,
/*decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(50.0)),*/
child: Image.asset('asset/images/java.png')),
),
),
Padding(
//padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0),
padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
decoration: InputDecoration(
 border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter valid email id as [email protected]'),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0),
//padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(

obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password'),
),
),
TextButton(
onPressed: (){
//TODO FORGOT PASSWORD SCREEN GOES HERE
},
child: Text(
'Forgot Password',
style: TextStyle(color: Colors.blue, fontSize: 15),
),
),
Container(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(20)),
child: TextButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (_) => HomePage()));
},
child: Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
SizedBox(
height: 130,
),
Text('New User? Create Account')
],
),
),
);
}
}

Homepage.dart:
Source code:
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: Container(
height: 80,
width: 150,
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(10)),
child: TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text(
'Welcome',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
),
);
}
}

Change in pubspec.yaml:
uses-material-design: true
assets:
-assets/asset/images/java.png

Output:
Before:

After click on login:

Practical No.:08
Aim:
Date: Roll No.:17 Sign:
____________________________________________________________________________
pubspec.yaml
Source code:
name: gallery
description: A new Flutter project.

publish_to: 'none'
version: 1.0.0+1

environment:
sdk: '>=2.19.6 <3.0.0'

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
cached_network_image: ^3.2.3
photo_view: ^0.14.0

dev_dependencies:
flutter_test:
sdk: flutter

flutter_lints: ^2.0.0

flutter:

uses-material-design: true

main.dart
import 'package:flutter/material.dart';
import 'package:gallery/gallery_page.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
appBarTheme: const AppBarTheme(centerTitle: true),
),
home: GalleryPage(),
);
}
}
gallery_page.dart:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:gallery/photo_view_page.dart';

class GalleryPage extends StatelessWidget {

GalleryPage({Key? key}) : super(key: key);

final List<String> photos = [

'https://m.media-amazon.com/images/I/71IeYNcBYdL._SX679_.jpg',

'https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Ca
mp_Tibet_Luca_Galuzzi_2006.jpg',
'https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRMfWrZ_y19LrYRtNno1Oxs4pvB7TxLG3ELcQ&usqp=CAU/images.jpg',
'https://cdn.pixabay.com/photo/2016/09/15/01/57/temple-1670926_960_720.jpg',
'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg',
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Gallery")),
body: GridView.builder(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
padding: const EdgeInsets.all(1),
itemCount: photos.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: ((context, index) {
return Container(
padding: const EdgeInsets.all(0.5),
child: InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => PhotoViewPage(photos: photos, index: index),
),
),
child: Hero(
tag: photos[index],
child: CachedNetworkImage(
imageUrl: photos[index],
fit: BoxFit.cover,
placeholder: (context, url) => Container(color: Colors.grey),
errorWidget: (context, url, error) => Container(
color: Colors.red.shade400,
),
),
),
),
);
 }),
),
);
}
}

photo_view_page.dart:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewPage extends StatelessWidget {

final List<String> photos;
final int index;

const PhotoViewPage({
Key? key,
required this.photos,
required this.index,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
body: PhotoViewGallery.builder(
itemCount: photos.length,
builder: (context, index) => PhotoViewGalleryPageOptions.customChild(
child: CachedNetworkImage(
imageUrl: photos[index],
placeholder: (context, url) => Container(
color: Colors.grey,
),
errorWidget: (context, url, error) => Container(
color: Colors.red.shade400,
),
),
minScale: PhotoViewComputedScale.covered,
heroAttributes: PhotoViewHeroAttributes(tag: photos[index]),
),
pageController: PageController(initialPage: index),
enableRotation: true,
),
);
}
}

Output:
Zoom image: