[go: up one dir, main page]

0% found this document useful (0 votes)
85 views87 pages

Final Obb

The document describes an online blood bank system that allows users to view blood availability, place orders, and process payments online. The system aims to modernize blood distribution and management. It tracks blood stocks and allows authorized users like customers and hospitals to log in, view available blood types and quantities, add blood to a cart, and complete orders. The system also manages administrative functions like order processing and provides modules for user registration, viewing order details, and processing payments. It aims to overcome limitations of single-user systems and improve access and facilities for blood distribution.

Uploaded by

Saurabh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
85 views87 pages

Final Obb

The document describes an online blood bank system that allows users to view blood availability, place orders, and process payments online. The system aims to modernize blood distribution and management. It tracks blood stocks and allows authorized users like customers and hospitals to log in, view available blood types and quantities, add blood to a cart, and complete orders. The system also manages administrative functions like order processing and provides modules for user registration, viewing order details, and processing payments. It aims to overcome limitations of single-user systems and improve access and facilities for blood distribution.

Uploaded by

Saurabh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 87

Online Blood Bank

INTRODUCTION

The Domain "Online Blood Bank" is a modern blood distribution system


among different types of users. It is a domain for complete management
of blood distribution system in case of emergencies. It is designed to keep
track of various types of blood stocks and their availability. The website
is so designed for easy access to the blood bank while providing details
of the different types of blood available in different quantities. A user can
simply create the user login and logon to the user area by providing the
necessary credentials for a valid entry to the system. There by the user can
view the different blood availability and put it all in to a cart before
placing the order.

1 VI SEM, BCA
Online Blood Bank

Purpose

"Online Blood Bank" is a modern blood distribution system among


different types of users. It is a domain for complete management of blood
distribution system in case of emergencies. It is designed to keep track of
various types of blood stocks and their availability. The different types of
blood available are A +ve, A –ve, B +ve etc. The website is so designed
for easy access to the blood bank while providing details of the different
types of blood available in different quantities. Access to ordering the
blood by any user is a simplified functionality. A user can simply create
the user login and logon to the user area by providing the necessary
credentials for a valid entry to the system. There by the user can view the
different blood availability and put it all in to a cart before placing the
order

In the existing system the transactions are done only in single user
environment but in proposed system we have to computerize all the Blood
Distribution System in a multiuser software environment. The proposed
system consists of the following modules:

2 VI SEM, BCA
Online Blood Bank

Scope

The scope of the designed system in any organization that needs to

implement the functionalities, administration and user interface online.

The project incorporates a higher level of implementation to develop a

system of improved facilities. The proposed system can overcome all the

limitations of the existing system. The system provides proper security

and reduces any manual work.

The project provides a strong foundation for managing an

organization’s day to day tasks as it moves forward and helps ensure that

resources aren’t diverted or wasted on out-of-scope elements. The system

articulates what the project entails so that all stakeholders can understand

what’s involved and can effectively participate in successful

implementation and usage of the project.

3 VI SEM, BCA
Online Blood Bank

Description

"Online Blood Bank" is a modern blood distribution system among


different types of users. It is a domain for complete management of blood
distribution system in case of emergencies. It is designed to keep track of
various types of blood stocks and their availability. The different types of
blood available are A +ve, A –ve, B +ve etc. The website is so designed
for easy access to the blood bank while providing details of the different
types of blood available in different quantities. Access to ordering the
blood by any user is a simplified functionality. A user can simply create
the user login and logon to the user area by providing the necessary
credentials for a valid entry to the system. There by the user can view the
different blood availability and put it all in to a cart before placing the
order

In the existing system the transactions are done only in single user
environment but in proposed system we have to computerize all the Blood
Distribution System in a multiuser software environment. The proposed
system consists of the following modules:

4 VI SEM, BCA
Online Blood Bank

Product functions

User login:

This module mainly useful for the users where as they can order the
blood packets and they can even add , delete, and find the exact
requirement. The following are the few modules under user login:

Customer Details:
This module stores the information about the customers who orders the
blood packets. This includes recording customer details, modifying as and
when required with option for deleting a customer record if it is no longer
required. In customers module there is an option for all operations such as
adding, deleting, modifying and finding the exact orders.

Order Details:
This module informs us the order details which are booked by the
customers. The order records detail such as order date, order id, customer
id , delivery status and total cost. This module is mainly used for ordering
the blood packets which are available for the users.

Payment Module:
This module stores the information about the consumers who have placed
orders for the blood packets. This includes recording customer payment
details, modifying any requirement in the customer requirements as a final
option if any for the customers. This module collects the necessary data
for payment process.

5 VI SEM, BCA
Online Blood Bank

User Characteristics

6 VI SEM, BCA
Online Blood Bank

7 VI SEM, BCA
Online Blood Bank

MODULES:

Administrative Module:

This module is the main module which performs all the main operations
in the system. The major operations in this module are processing
customer orders, tracking orders and delivering on time.

Admin registration Module:

This module is designed for creating an interface for the intended


persons to create their admin accounts for logging in to the system and
performing the following operations. An admin has to provide the
necessary details like login email id, date of birth, name etc for
registering as the administrator.

Blood Details Module:

This module displays the information about blood details like type of
blood, quantity and source of location which are available for the
customer through this module. It is easy to find the orders which are
placed by the customer. In this module the operations that can be
performed include as adding, deleting, updating and storing the details of
different blood types, source of location and quantities.

8 VI SEM, BCA
Online Blood Bank

Order Details:

This module displays the information of the orders which are used for

delivering the blood for appropriate customer. Carts are assigned with

unique order codes for individuals as well as other hospitals with unique

order codes to keep track of the orders. This module is also used to display

the orders which are may be pending for delivering the blood for the

intended consumers.

User login:

This module mainly useful for the users where as they can order the
blood packets and they can even add , delete, and find the exact
requirement. The following are the few modules under user login:

Customer Details:

This module stores the information about the customers who orders the
blood packets. This includes recording customer details, modifying as and
when required with option for deleting a customer record if it is no longer
required. In customers module there is an option for all operations such as
adding, deleting, modifying and finding the exact orders.
9 VI SEM, BCA
Online Blood Bank

Order Details:

This module informs us the order details which are booked by the
customers. The order records detail such as order date, order id, customer
id , delivery status and total cost. This module is mainly used for ordering
the blood packets which are available for the users.

Payment Module:

This module stores the information about the consumers who have placed
orders for the blood packets. This includes recording customer payment
details, modifying any requirement in the customer requirements as a final
option if any for the customers. This module collects the necessary data
for payment process.

10 VI SEM, BCA
Online Blood Bank

Limitations

The system designed is as per the proposed system is to develop a system

of improved facilities. The system designed overcomes all the limitations

of the existing single user system. The system provides proper security

and reduces the manual and single user limitation. Although the system

designed is well suited for multiuser environments and with remote access

there are a few limitations that the project can be enhanced for:

 To keep online projects at its best the most important aspect is data

maintenance. As the data grows the system can tend to degenerate

data access speeds and processing.

 As the demand goes, implementation of the project with

sophisticated higher standards like use of third party tools like online

payments portals, OTPs for security are essential

11 VI SEM, BCA
Online Blood Bank

Specific Requirements

Administrative functionalities:

 Blood Storage Details


 Order Processing information
 Order Details

User Functionalities:

 User Registration and Login


 Order Details
 Cart Details
 Payment Details

ADVANTAGES OF THE PROPOSED SYSTEM


The system is very simple in design and to implement. The system
requires very low system resources and the system will work in
almost all configurations. It has got following features
Security of data.
Ensure data accuracy's.
Proper control of the higher officials.
Reduce the damages of the machines.
Minimize manual data entry.
Minimum time needed for the various processing.
Greater efficiency.
Better service.
User friendliness and interactive.
Minimum time required.

12 VI SEM, BCA
Online Blood Bank

Hardware and Software Requirements:


Hardware:

Processor : Pentium I series/Dual core


HDD : 250 GB .
Memory : 4 GB
I/O Interface : Basic keyboard/Mouse.

Software:

Scripting : Angular js.


(Front End)
Web Server : Node js
Server Frame work : Express js
Database : Mongo Database.
(Bach End)
Mark Up Language :XHTML/Bootstrap
Operating System :Windows 8 or 10

13 VI SEM, BCA
Online Blood Bank

Software Review
AngularJS

AngularJS is a very powerful JavaScript library. It is used in Single Page


Application (SPA) projects. It extends HTML DOM with additional
attributes and makes it more responsive to user actions. AngularJS is open
source, completely free, and used by thousands of developers around the
world. It is licensed under the Apache license version 2.0. AngularJS is
an open-source web application framework. It was originally developed
in 2009 by Misko Hevery and Adam Abrons. It is now maintained by
Google. Its latest version is 8.0.

Definition of AngularJS as put by its official documentation is as


follows:
AngularJS is a structural framework for dynamic web applications. It
lets you use HTML as your template language and lets you extend
HTML's syntax to express your application components clearly and
succinctly. Its data binding and dependency injection eliminate much of

14 VI SEM, BCA
Online Blood Bank

the code you currently have to write. And it all happens within the
browser, making it an ideal partner with any server technology.

General Features

 AngularJS is a efficient framework that can create Rich Internet


Applications (RIA).
 AngularJS provides developers an options to write client side
applications using JavaScript in a clean Model View Controller
(MVC) way.
 Applications written in AngularJS are cross-browser compliant.
AngularJS automatically handles JavaScript code suitable for each
browser.
 AngularJS is open source, completely free, and used by thousands
of developers around the world. It is licensed under the Apache
license version 2.0.
Overall, AngularJS is a framework to build large scale, high-
performance, and easy-to-maintain web applications.

15 VI SEM, BCA
Online Blood Bank

Core Features

 Data-binding: It is the automatic synchronization of data between


model and view components.
 Scope: These are objects that refer to the model. They act as a glue
between controller and view.
 Controller: These are JavaScript functions bound to a particular
scope.
 Services: AngularJS comes with several built-in services such as
$http to make a XML http Requests. These are singleton objects
which are instantiated only once in app.
 Filters: These select a subset of items from an array and returns a
new array.
 Directives: Directives are markers on DOM elements such as
elements, attributes, css, and more. These can be used to create
custom HTML tags that serve as new, custom widgets. AngularJS
has built-in directives such as ngBind, ngModel, etc.
 Templates: These are the rendered view with information from the
controller and model. These can be a single file (such as index.html)
or multiple views in one page using partials.
 Routing: It is concept of switching views.
 Model View Whatever: MVW is a design pattern for dividing an
application into different parts called Model, View, and Controller,

16 VI SEM, BCA
Online Blood Bank

each with distinct responsibilities. AngularJS does not implement


MVC in the traditional sense, but rather something closer to MVVM
(Model-View-ViewModel). The Angular JS team refers it
humorously as Model View Whatever.
 Deep Linking: Deep linking allows to encode the state of
application in the URL so that it can be bookmarked. The
application can then be restored from the URL to the same state.
 Dependency Injection: AngularJS has a built-in dependency
injection subsystem that helps the developer to create, understand,
and test the applications easily.

17 VI SEM, BCA
Online Blood Bank

Concepts
The following diagram depicts some important parts of AngularJS which
we will discuss in detail in the subsequent chapters.

18 VI SEM, BCA
Online Blood Bank

The advantages of AngularJS are:

 It provides the capability to create Single Page Application in a


very clean and maintainable way.
 It provides data binding capability to HTML. Thus, it gives user a
rich and responsive experience.
 AngularJS code is unit testable.
 AngularJS uses dependency injection and make use of separation
of concerns.
 AngularJS provides reusable component.
 With AngularJS, the developers can achieve more functionality
with short code.
 In AngularJS, views are pure html pages, and controllers written in
JavaScript do the business processing.
On the top of everything, AngularJS applications can run on all major
browsers and smart phones, including Android and iOS based
phones/tablets.

19 VI SEM, BCA
Online Blood Bank

Disadvantages of AngularJS:

Though AngularJS comes with a lot of merits, here are some points of
concern:
 Not secure : Being JavaScript only framework, application written
in AngularJS are not safe. Server side authentication and
authorization is must to keep an application secure.
 Not degradable: If the user of your application disables
JavaScript, then nothing would be visible, except the basic page.

AngularJS Directives:
The AngularJS framework can be divided into three major parts:
 ng-app : This directive defines and links an AngularJS application
to HTML.
 ng-model : This directive binds the values of AngularJS
application data to HTML input controls.
 ng-bind : This directive binds the AngularJS application data to
HTML tags.

20 VI SEM, BCA
Online Blood Bank

Example
Now let us write a simple example using AngularJS library. Let us
create an HTML file myfirstexample.html shown as below:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-
beta.17/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>

</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
Let us go through the above code in detail:

Include AngularJS
We include the AngularJS JavaScript file in the HTML page so that we
can use it:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.
min.js"></script>
</head>

You can check the latest version of AngularJS on its official website.

21 VI SEM, BCA
Online Blood Bank

Point to AngularJS app:

Next, it is required to tell which part of HTML contains the AngularJS


app. You can do this by adding the ng-app attribute to the root HTML
element of the AngularJS app. You can either add it to the html element
or the body element as shown below:

<body ng-app="myapp">
</body>

View

The view is this part:

<div ng-controller="HelloController" >


<h2>Welcome {{helloTo.title}} to the world of Angular!</h2> </div>

ng-controller tells AngularJS which controller to use with this view. helloTo.title tells AngularJS to write
the model value named helloTo.title in HTML at this location.

<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>

22 VI SEM, BCA
Online Blood Bank

Controller
The controller part is:

<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>

This code registers a controller function named HelloController in the


angular module named myapp. We will study more about modules and
controllers in their respective chapters. The controller function is
registered in angular via the angular.module(...).controller(...) function
call.
The $scope parameter model is passed to the controller function. The
controller function adds a helloTo JavaScript object, and in that object it
adds a title field.

Execution
Save the above code as myfirstexample.html and open it in any browser.
You get to see the web page built over angular js.

23 VI SEM, BCA
Online Blood Bank

3. MVC Architecture
Model View Controller or MVC as it is
popularly called, is a software design
pattern for developing web applications. A
Model View Controller pattern is made up
of the following three parts:
 Model - It is the lowest level of the
pattern responsible for maintaining
data.
 View - It is responsible for
displaying all or a portion of the data
to the user.
 Controller - It is a software Code
that controls the interactions between the Model and View.
MVC is popular because it isolates the application logic from the user
interface layer and supports separation of concerns. The controller
receives all requests for the application and then works with the model to
prepare any data needed by the view. The view then uses the data prepared
by the controller to generate a final presentable response. The MVC
abstraction can be graphically represented as follows.

24 VI SEM, BCA
Online Blood Bank

The Model
The model is responsible for managing application data. It responds to the
request from view and to the instructions from controller to update itself.

The View
A presentation of data in a particular format, triggered by the controller's
decision to present the data. They are script-based template systems such
as JSP, ASP, PHP and very easy to integrate with AJAX technology.

The Controller
The controller responds to user input and performs interactions on the data
model objects. The controller receives input, validates it, and then
performs business operations that modify the state of the data model.

AngularJS is a MVC based framework. In the coming chapters, we will


see how AngularJS uses MVC methodology.

25 VI SEM, BCA
Online Blood Bank

Node.js

Node.js is an open source development platform for executing JavaScript


code server-side. Node is useful for developing applications that require
a persistent connection from the browser to the server and is often used
for real-time applications such as chat, news feeds and web push
notifications.
Node.js uses the event-driven nature of JavaScript to support non-
blocking operations in the platform, a feature that enables its excellent
efficiency. JavaScript is an event-driven language, which means that you
register code to specific events, and that code will be executed once the
event is emitted. This concept allows you to seamlessly execute
asynchronous code without blocking the rest of the program from running.
When developing web server logic, you will probably notice a lot of your
system resources are wasted on blocking code. For instance, let's observe
the following PHP database interactions:
$output = mysql_query('SELECT * FROM Users');
echo($output);
Our server will try querying the database that will then perform the select
statemfent and return the result to the PHP code, which will eventually
output the data as a response. The preceding code blocks any other
operation until it gets the result from the database. This means the process,

26 VI SEM, BCA
Online Blood Bank

or more commonly, the thread, will stay idle, consuming system resources
while it waits for other processes.
To solve this issue, many web platforms have implemented a thread pool
system that usually issues a single thread per connection. This kind of
multithreading may seem intuitive at first, but has some significant
disadvantages.

Node modules

JavaScript has turned out to be a powerful language with some unique


features that enable efficient yet maintainable programming. Its closure
pattern and event driven behavior have proven to be very helpful in real-
life scenarios, but like all programming languages, it isn't perfect, and one
of its major design laws is the sharing of a single global namespace.
To understand the problem, we need to go back to JavaScript's browser
origins. In the browser, when you load a script into your web page, the
engine will inject its code into an address space that is shared by all the
other scripts. This means that when you assign a variable in one script,
you can accidently overwrite another variable already deined in a previous
script. While this could work with a small code base, it can easily cause
conlicts in larger applications, as errors will be difficult to trace. It could
have been a major threat for Node.js evolution as a platform, but luckily
a solution was found in the Common JS modules standard.

27 VI SEM, BCA
Online Blood Bank

Common JS modules

Common JS is a project started in 2009 to standardize the way of working


with JavaScript outside the browser. The project has evolved since then
to support a variety of JavaScript issues, including the global namespace
issue, which was solved through a simple specification of how to write
and include isolated JavaScript modules.
The Common JS standards specify the following three key components
when working with modules:
• require(): This method is used to load the module into your code.
• exports: This object is contained in each module and allows you to
expose pieces of your code when the module is loaded.
• module: This object was originally used to provide metadata information
about the module. It also contains the pointer of an exports object as a
property. However, the popular implementation of the exports object as a
standalone object literally changed the use case of the module object.

28 VI SEM, BCA
Online Blood Bank

Node.js core modules

Core modules are modules that were compiled into the Node binary. They
come prebundled with Node and are documented in great detail in its
documentation. The core modules provide most of the basic
functionalities of Node, including ilesystem access, HTTP and HTTPS
interfaces, and much more. To load a core module, you just need to use
the require method in your JavaScript ile. An example code, using the fs
core module to read the content of the environment hosts ile, would look
like the following code snippet:
fs = require('fs');
fs.readFile('/etc/hosts', 'utf8', function (err, data) {
if (err) {
return console.log(err);
}
console.log(data);
});
When you require the fs module, Node will ind it in the core modules
folder. You'll then be able to use the fs.readFile() method to read the ile's
content and print it in the command-line output.

29 VI SEM, BCA
Online Blood Bank

Developing Node.js web applications

Node.js is a platform that supports various types of applications, but the


most popular kind is the development of web applications. Node's style of
coding depends on the community to extend the platform through third-
party modules; these modules are then built upon to create new modules,
and so on. Companies and single developers around the globe are
participating in this process by creating modules that wrap the basic Node
APIs and deliver a better starting point for
application development.
There are many modules to support web application development but
none as popular as the Connect module. The Connect module delivers a
set of wrappers around the Node.js low-level APIs to enable the
development of rich web application frameworks. To understand what
Connect is all about, let's begin with a basic example of a basic Node web
server. In your working folder, create a file named server.js, which
contains the following code snippet:
var http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello World');
}).listen(3000);
console.log('Server running at http://localhost:3000/');

30 VI SEM, BCA
Online Blood Bank

To start your web server, use your command-line tool, and navigate to
your working folder. Then, run the node CLI tool and run the server.js ile
as follows:
$ node server
Now open http://localhost:3000 in your browser, and you'll see the Hello
World response.

31 VI SEM, BCA
Online Blood Bank

Express.js
"Express is a fast, unopinionated minimalist web framework for Node.js"
- official web site: Expressjs.com

Express.js is a web application


framework for Node.js. It provides
various features that make web
application development fast and
easy which otherwise takes more time
using only Node.js.

Express.js is based on the Node.js


middleware module called connect which in turn uses http module. So,
any middleware which is based on connect will also work with Express.js.

The Express framework is a small set of common web application


features, kept to a minimum in order to maintain the Node.js style. It is
built on top of Connect and makes use of its middleware architecture. Its
features extend Connect to allow a variety of common web applications'
use cases, such as the inclusion of modular HTML template engines,
extending the response object to support various data format outputs, a
routing system, and much more.

32 VI SEM, BCA
Online Blood Bank

Advantages of Express.js

1. Makes Node.js web application development fast and easy.


2. Easy to configure and customize.
3. Allows you to define routes of your application based on HTTP
methods and URLs.
4. Includes various middleware modules which you can use to perform
additional tasks on request and response.
5. Easy to integrate with different template engines like Jade, Vash,
EJS etc.
6. Allows you to define an error handling middleware.
7. Easy to serve static files and resources of your application.
8. Allows you to create REST API server.
9. Easy to connect with databases such as MongoDB, Redis, MySQL

Creating your first Express application

After creating your package.json ile and installing your dependencies,


you can now create your irst Express application by adding your already
familiar server.js file with the following lines of code:
var express = require('express');
var app = express();
app.use('/', function(req, res) {
res.send('Hello World');
});
app.listen(3000);
console.log('Server running at http://localhost:3000/');
module.exports = app;
You should already recognize most of the code. The first two lines
require the Express module and create a new Express application object.
Then, we use the app.use() method to mount a middleware function with
a specific path, and the app.
listen() method to tell the Express application to listen to the port 3000.
Notice how the module. exports object is used to return the application
object. This will later help us load and test our Express application. This
33 VI SEM, BCA
Online Blood Bank

new code should also be familiar to you because it resembles the code you
used in the previous Connect example. This is because Express wraps the
Connect module in several ways. The app.use() method is used to mount
a middleware function, which will respond to any HTTP request made to
the root path. Inside the middleware function, the res.send() method is
then used to send the response back. The res.send() method is basically an
Express wrapper that sets the Content-Type header according to the
response object type and then sends a response back using the Connect
res.end() method.

Building an Express Web Application:


When passing a buffer to the res.send() method, the Content-Type
header will be set to application/octet-stream. When passing a string, it
will be set to text/html and when passing an object or an array, it will be
set to application/json.
To run your application, simply execute the following command in your
commandline
tool:
$ node server
Congratulations! You have just created your irst Express application.
You can test it by visiting http://localhost:3000 in your browser.

The application, request, and response


Objects

Express presents three major objects that you'll frequently use. The
application object is the instance of an Express application you created
in the first example and is usually used to configure your application.
The request object is a wrapper of Node's HTTP request object and is
used to extract information about the currently handled HTTP request.
The response object is a wrapper of Node's HTTP response object and is
used to set the response data and headers.

34 VI SEM, BCA
Online Blood Bank

The application object:

The application object contains the following methods to help you


conigure your application:
• app.set(name, value): This is used to set environment variables that
Express will use in its configuration.
• app.get(name): This is used to get environment variables that Express
is using in its configuration.
• app.engine(ext, callback): This is used to deine a given template engine
to render certain file types, for example, you can tell the EJS template
engine to use HTML files as templates like this:
app.engine('html',require('ejs').renderFile).
• app.locals: This is used to send application-level variables to all
rendered templates.
• app.use([path], callback): This is used to create an Express middleware
to handle HTTP requests sent to the server. Optionally, you'll be able to
mount middleware to respond to certain paths.
• app.VERB(path, [callback...], callback): This is used to deine one or
more middleware functions to respond to HTTP requests made to a
certain path in conjunction with the HTTP verb declared. For instance,
when you want to respond to requests that are using the GET verb, then
you can just assign the middleware using the app.get() method. For
POST requests you'll use app.post(), and so on.
• app.route(path).VERB([callback...], callback): This is used to define
one or more middleware functions to respond to HTTP requests made to
a certain uniied path in conjunction with multiple HTTP verbs. For
instance, when you want to respond to requests that are using the GET
and POST verbs, you can just assign the appropriate middleware
functions using
app.route(path).get(callback).post(callback).•
app.param([name], callback): This is used to attach a certain functionality
to any request made to a path that includes a certain routing parameter.
35 VI SEM, BCA
Online Blood Bank

For instance, you can map logic to any request that includes the userId
parameter using app.param('userId', callback).
There are many more application methods and properties you can use, but
using these common basic methods enables developers to extend Express
in whatever way they find reasonable.

The request object:

The request object also provides a handful of helping methods that


contain the information you need about the current HTTP request. The
key properties and methods of the request object are as follows:
• req.query: This is an object containing the parsed query-string
parameters.
• req.params: This is an object containing the parsed routing parameters.
• req.body: This is an object used to retrieve the parsed request body.
This
property is included in the bodyParser() middleware.
• req.param(name): This is used to retrieve a value of a request
parameter.
Note that the parameter can be a query-string parameter, a routing
parameter, or a property from a JSON request body.
• req.path, req.host, and req.ip: These are used to retrieve the current
request path, host name, and remote IP.• req.cookies: This is used in
conjunction with the cookieParser()middleware to retrieve the cookies
sent by the user-agent. The request object contains many more methods
and properties that we'll discuss later in this book, but these methods are
what you'll usually use in a
common web application.

The response object:

The response object is frequently used when developing an Express


application because any request sent to the server will be handled and

36 VI SEM, BCA
Online Blood Bank

responded using the response object methods. It has several key


methods, which are as follows:

• res.status(code): This is used to set the response HTTP status code.

• res.set(field, [value]): This is used to set the response HTTP header.

• res.cookie(name, value, [options]): This is used to set a response


cookie. The options argument is used to pass an object defining common
cookie coniguration, such as the maxAge property.

• res.redirect([status], url): This is used to redirect the request to a given


URL. Note that you can add an HTTP status code to the response. When
not passing a status code, it will be defaulted to 302 Found.

• res.send([body|status], [body]): This is used for non-streaming


responses. This method does a lot of background work, such as setting
the Content-Type and Content-Length headers, and responding with the
proper cache headers.

• res.json([status|body], [body]): This is identical to the res.send()method


when sending an object or array. Most of the times, it is used as
syntactic sugar, but sometimes you may need to use it to force a
JSON response to non-objects, such as null or undefined.

• res.render(view, [locals], callback): This is used to render a view and


send an HTML response.

The response object also contains many more methods and properties to
handle different response scenarios

37 VI SEM, BCA
Online Blood Bank

MongoDB
Derived from the word humongous, MongoDB was able to support
complex data storage, while maintaining the high-performance approach
of other NoSQL stores. The community cheerfully adopted this new
paradigm, making MongoDB one of the fastest-growing databases in the
world. With more than 150 contributors and over 10,000 commits, it also
became one the most popular open source projects.

Key features of MongoDB


 The BSON format
One of the greatest features of MongoDB is its JSON-like storage format
named BSON. Standing for Binary JSON, the BSON format is a binary-
encoded serialization of JSON-like documents, and it is designed to be
more eficient in size and speed, allowing MongoDB's high read/write
throughput.

Like JSON, BSON documents are a simple data structure representation


of objects and arrays in a key-value format. A document consists of a list
of elements, each with a string typed ield name and a typed ield value.
These documents support all of the JSON speciic data types along with
other data types, such as the Date type.

38 VI SEM, BCA
Online Blood Bank

 MongoDB ad hoc queries

One of the other MongoDB design goals was to expand the abilities of
ordinary key-value stores. The main issue of common key-value stores is
their limited query capabilities, which usually means your data is only
queryable using the key ield, and more complex queries are mostly
predeined. To solve this issue, MongoDB drew its inspiration from the
relational databases dynamic query language.

 MongoDB indexing

Indexes are a unique data structure that enables the database engine to
efficiently resolve queries. When a query is sent to the database, it will
have to scan through the entire collection of dcuments to ind those that
match the query statement. This way, the database engine processes a
large amount of unnecessary data, resulting in poor performance.

To speed up the scan, the database engine can use a predefined


index, which maps documents ields and can tell the engine which
documents are compatible with this query statement. To understand how
indexes work, let's say we want to retrieve all the posts that have more
than 10 comments. For instance, if our document is defined as follows:
{

39 VI SEM, BCA
Online Blood Bank

"_id": ObjectId("52d02240e4b01d67d71ad577"),
"title": "First Blog Post",
"comments": [
],
"commentsCount": 12
}
So, a MongoDB query that requests for documents with more than 10
comments
would be as follows
db.posts.find({ commentsCount: { $gt: 10 } });

40 VI SEM, BCA
Online Blood Bank

 MongoDB replica set

To provide data redundancy and improved availability, MongoDB uses


an architecture called replica set. Replication of databases helps protect
your data to recover from hardware failure and increase read capacity. A
replica set is a set of MongoDB services that host the same dataset. One
service is used as the primary and the other services are called
secondaries. All of the set instances support read operations, but only the
primary instance is in charge of write operations. When a write operation
occurs, the primary will inform the secondaries about the changes and
make sure they've applied it to their datasets' replication.

 MongoDB sharding

Scaling is a common problem with a growing web application. The


various approaches to solve this issue can be divided into two groups:
vertical scaling and horizontal scaling. The differences between the two
are illustrated in the following diagram:

41 VI SEM, BCA
Online Blood Bank

MongoDB supports horizontal scaling, which it refers to as sharding.


Sharding is the process of splitting the data between different machines,
or shards. Each shard holds a portion of the data and functions as a
separate database. The collection of several shards together is what forms
a single logical database. Operations are performed through services
called query routers, which ask the configuration servers how to delegate
each operation to the right shard.

42 VI SEM, BCA
Online Blood Bank

DFD (Data Flow Diagrams)

Level - 0 Blood
Packet
Request
Blood Type Payment
Storage
Customer
Submit
Booked Blood
Category

43 VI SEM, BCA
Online Blood Bank

ER Diagram

44 VI SEM, BCA
Online Blood Bank

Data Dictionary (Tables)

Admin Registration

Sl. No. Field Name Type Size Remarks


1 Fname Text 10 First Name
2 Sname Text 10 Second Name
3 Email Text 30 Email id
4 Password Text 30 Admin Password
5 Dob Date 10 Date of Birth
6 Gender Text 6 Gender
7 Phone number 10 Contact Number

User Registration

Sl. No. Field Name Type Size Remarks


1 Fname Text 10 First Name
2 Sname Text 10 Second Name
3 Email Text 30 Email id
4 Password Text 30 Admin Password
5 Dob Date 10 Date of Birth
6 Gender Text 6 Gender
7 Phone number 10 Contact Number

Blood Table

Sl. No. Field Name Type Size Remarks


1 Code Text 6 Code
2 Cost Number 5 Cost
3 HosName Text 30 Hospital Nam
4 Image binary Image
5 Description Text 100 Description
6 Type Text 7 Blood Type

45 VI SEM, BCA
Online Blood Bank

Blood Sold

Sl. No. Field Name Type Size Remarks


1 Code Text 6 Code
2 Cost Number 5 Cost
3 HosName Text 30 Hospital Nam
4 Image binary Image
5 Description Text 100 Description
6 Type Text 7 Blood Type
7 Qty Number 3 Quantity
8 billNo Number 5 Bill Number

Sales Details

Sl. No. Field Name Type Size Remarks


1 billNo Number 5 Bill Number
2 amt Number 5 Amount
3 recName Text 30 Receiver Name
4 CardNo Text 10 Card Number
5 CardCVV Text 3 Card CVV Number
6 ExpMonth Text 10 Card Expiry Month
7 expYear Number 4 Card Expiry Year

46 VI SEM, BCA
Online Blood Bank

DATABASE DESIGN

A database is an organized mechanism that has the capability of storing


information through which a user can retrieve stored information in an
effective and efficient manner. The data is the purpose of any database
and must be protected.

The database design is a two level process. In the first step, user
requirements are gathered together and a database is designed which will
meet these requirements as clearly as possible. This step is called
Information Level Design and it is taken independent of any individual
DBMS.

In the second step, this Information level design is transferred into a


design for the specific DBMS that will be used to implement the system
in question. This step is called Physical Level Design, concerned with the
characteristics of the specific DBMS that will be used. A database design
runs parallel with the system design. The organization of the data in the
database is aimed to achieve the following two major objectives.
Data Integrity
Data independence

Normalization is the process of decomposing the attributes in an


application, which results in a set of tables with very simple structure. The
purpose of normalization is to make tables as simple as possible.
Normalization is carried out in this system for the following reasons.

47 VI SEM, BCA
Online Blood Bank

To structure the data so that there is no repetition of data , this helps in


saving.
To permit simple retrieval of data in response to query and report
request.
To simplify the maintenance of the data through updates, insertions,
deletions.
To reduce the need to restructure or reorganize data which new
application requirements arise.

48 VI SEM, BCA
Online Blood Bank

TEST PLAN
A test plan implies a series of desired course of action to be followed in
accomplishing various testing methods. The Test Plan acts as a blue print
for the action that is to be followed. The software engineers create a
computer program, its documentation and related data structures. The
software developers is always responsible for testing the individual units
of the programs, ensuring that each performs the function for which it was
designed. There is an independent test group (ITG) which is to remove
the inherent problems associated with letting the builder to test the thing
that has been built. The specific objectives of testing should be stated in
measurable terms. So that the mean time to failure, the cost to find and fix
the defects, remaining defect density or frequency of occurrence and test
work-hours per regression test all should be stated within the test plan.

The levels of testing include:


Unit testing
Integration Testing
Data validation Testing
Output Testing

UNIT TESTING

Unit testing focuses verification effort on the smallest unit of software


design - the software component or module. Using the component level
design description as a guide, important control paths are tested to uncover
errors within the boundary of the module. The relative complexity of tests
and uncovered scope established for unit testing. The unit testing is white-
box oriented, and step can be conducted in parallel for multiple
components. The modular interface is tested to ensure that information
properly flows into and out of the program unit under test. The local data
structure is examined to ensure that data stored temporarily maintains its
integrity during all steps in an algorithm's execution. Boundary conditions

49 VI SEM, BCA
Online Blood Bank

are tested to ensure that all statements in a module have been executed at
least once. Finally, all error handling paths are tested.

Tests of data flow across a module interface are required before any other
test is initiated. If data do not enter and exit properly, all other tests are
moot. Selective testing of execution paths is an essential task during the
unit test. Good design dictates that error conditions be anticipated and
error handling paths set up to reroute or cleanly terminate processing
when an error does occur. Boundary testing is the last task of unit testing
step. Software often fails at its boundaries.

Unit testing was done in Sell-Soft System by treating each module as


separate entity and testing each one of them with a wide spectrum of test
inputs. Some flaws in the internal logic of the modules were found and
were rectified.

INTEGRATION TESTING

Integration testing is systematic technique for constructing the program


structure while at the same time conducting tests to uncover errors
associated with interfacing. The objective is to take unit tested
components and build a program structure that has been dictated by
design. The entire program is tested as whole. Correction is difficult
because isolation of causes is complicated by vast expanse of entire
program. Once these errors are corrected, new ones appear and the process
continues in a seemingly endless loop.

After unit testing in Sell-Soft System all the modules were integrated to
test for any inconsistencies in the interfaces. Moreover differences in
program structures were removed and a unique program structure was
evolved.

50 VI SEM, BCA
Online Blood Bank

VALIDATION TESTING OR SYSTEM TESTING

This is the final step in testing. In this the entire system was tested as a
whole with all forms, code, modules and class modules. This form of
testing is popularly known as Black Box testing or System testing.

Black Box testing method focuses on the functional requirements of the


software. That is, Black Box testing enables the software engineer to
derive sets of input conditions that will fully exercise all functional
requirements for a program.

Black Box testing attempts to find errors in the following categories;


incorrect or missing functions, interface errors, errors in data structures or
external data access, performance errors and initialization errors and
termination errors.

OUTPUT TESTING OR USER ACCEPTANCE TESTING

The system considered is tested for user acceptance; here it should satisfy
the firm's need. The software should keep in touch with perspective
system; user at the time of developing and making changes whenever
required. This done with respect to the following points
Input Screen Designs,
Output Screen Designs,
Online message to guide the user and the like.

The above testing is done taking various kinds of test data. Preparation of
test data plays a vital role in the system testing. After preparing the test
data, the system under study is tested using that test data. While testing
the system by which test data errors are again uncovered and corrected by
using above testing steps and corrections are also noted for future use.

51 VI SEM, BCA
Online Blood Bank

Conclusion

“Online Blood Bank” is a software package that is used to keep

track of a huge number of online customers for online blood booking. The

software records each entry and maintains a records of all the transactions

related to the blood sales and stock. The transactions can be kept track by

the administrator for the orders placed and corresponding sales and

payments. The project is a complete management of the online blood bank

needs. It keeps track of information of different categories of blood,

availability, sales and payment.

The project may be enhanced to the higher standards to match

more advanced utilities and features that of IOT standards including

hardware interfaces. The hardware and software interfaces like

interfaces for mobile system, third party utilities like OTPs, Payment

portals, messaging system can all be embedded in to the existing system

that makes a complete sophisticated system to match national and

international standards.

52 VI SEM, BCA
Online Blood Bank

CODING

53 VI SEM, BCA
Online Blood Bank

Module1. Login form:

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/adminlogin.js"></script>
</head>

<body ng-app="myApp" ng-controller="MainCtrl">

<main>

<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<h1>Administrator Login</h1>
<!-- <h1>Welcome Dear: <%=username%></h1> -->
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post" action="/adminapparels">
<!-- <input type="text" name="userid" placeholder="userid"
required value=""/> -->
<input type="email" name="email" placeholder="Enter email"
required value=""/>
<input type="password" name="userPassword"
placeholder="Enter Password" required value=""/>
<button type="submit" class="btn btn-default" >Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>

54 VI SEM, BCA
Online Blood Bank

</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New Admin Signup!</h2>
<form method ="post" action="/adminregister">
<button type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section><!--/form-->

<!--
<form method="post" action="/billing">
<input type="hidden" id="prods" name="prods" value="Nothing">
<button type="button" ng-click="store()">Call store values</button>

<button type="submit" class="btn btn-default" >Proceed to billing</button>


<div ng-repeat="prodToAdd in prodsToAdd">
{{prodToAdd.pCost}} {{prodToAdd.pName}}
</div>
<button type="button" ng-click="add({pCost: 250, pName: 'Lacoste'})">Add</button>
</form>
-->
</main>

</body>
</html>

Module2. Adminregister:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">

55 VI SEM, BCA
Online Blood Bank

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/adminregister.js"></script>
</head>
<style>
body { padding-top:50px; }
</style>

<body ng-app="myApp" ng-controller="MainCtrl">

<main>
<!--
<input type="hidden" id="fname" name="fname" value="">
<input type="hidden" id="sname" name="sname" value="">
<input type="hidden" id="email" name="email" value="">
<input type="hidden" id="password" name="password" value="">
<input type="hidden" id="phone" name="phone" value="">
<input type="hidden" id="dob" name="dob" value="">
-->

<div class="container">

<div class="col-sm-4" style="background-color:lavender;">Highlight<p>Registration


will help us to keep you updated for any latest offers...</p>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood1.jpg" alt="Jelly" style="width:100%">
<div class="caption">
<p>Indian Blood Bank: Bangalore</p>
</div>

</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood2.jpg" alt="Light House"
style="width:100%">
<div class="caption">
<p>National Blood Bank: Bangalore</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood3.jpg" alt="Penguins"
style="width:100%">
<div class="caption">
<p>Blood Bank Society of India: Chennai</p>
</div>
</div>
</div>
</div>

<div class="col-sm-4">
<div class="signup-form">

56 VI SEM, BCA
Online Blood Bank

<form method="post" action="/adminregistered" onsubmit="return alert('You will be


redirected to login to confirm registration')" >
<input type="hidden" id="gender" name="gender" value="{{Gen}}" >
<h1>Admin Registration</h1>
<input type="text" name="fname" id="fname" placeholder="First Name" required value=""
onkeydown="return (event.keyCode > 64 &&
event.keyCode < 91) || (event.keyCode > 96 && event.keyCode < 123) || (event.keyCode ==
8) || (event.keyCode == 9) || (event.keyCode == 32)" />

<input type="text" name="sname" id="sname" placeholder="Last Name" required value=""


onkeydown="return (event.keyCode > 64 &&
event.keyCode < 91) || (event.keyCode > 96 && event.keyCode < 123) || (event.keyCode ==
8) || (event.keyCode == 9) || (event.keyCode == 32)" />

<input type="email" name="email" placeholder="email" required value=""/>


<input ng-model="password" type="password" name="userPassword" placeholder="Enter
Password" ng-required="true" value=""/>
<input ng-model="confirmPassword" type="password" name="confirmPassword"
placeholder="Confirm Password" ng-required="true" value=""/>
<span ng-show="password!=confirmPassword">Password mismatch</span>
<input type="date" id="dob" name="dob" required value=""/>

<div class="checkbox-inline">
<label class="btn btn-sm">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Male"
value="Male" ng-checked="true">Male
</label>
</div>
<div class="checkbox-inline">
<label class="btn btn-sm">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Female"
value="Female">Female
</label>
</div>
<div class="checkbox-inline">
<label class="btn btn-sm">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Others"
value="Others">Others
</label>
</div>

<!-- Radio button other methods


<label class="btn btn-default active">
<input type="radio" id="q156" name="quality[25]" value="1" checked="checked" />
Normal
</label>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Male"
value="Male" ng-checked="true">
<label class="custom-control-label" for="Male">Male</label>
<input type="radio" class="custom-control-input" ng-model="Gen" id="Female"
value="Female">
<label class="custom-control-label" for="Female">Female</label>
<input type="radio" class="custom-control-input" ng-model="Gen" id="Other"
value="Others">
<label class="custom-control-label" for="Others">Others</label>
</div>
<div class="custom-control custom-radio">

57 VI SEM, BCA
Online Blood Bank

<input type="radio" class="custom-control-input" id="defaultChecked"


name="defaultExampleRadios" checked>
<label class="custom-control-label" for="defaultChecked">Default checked</label>
</div>
-->
<input type="text" name="phone" id="phone" placeholder="Enter phone" onkeydown="return
(event.keyCode > 47 && event.keyCode < 58) || (event.keyCode == 8)
|| (event.keyCode == 9)" maxlength="10" required value="" />

<!-- <input type="number" name="phone" id="phone" placeholder="Enter phone"


onKeyPress="if(this.value.length==10) return false;" required value=""/>
-->
<button type="submit" class="btn btn-default" >Submit</button> <br>
</div>
</div>

<div class="col-sm-4" style="background-color:lavender;">Latest Blood Banks


Introduced...<p>A Listing of the new blood banks with recent offers follows the
Registration and login process...</p>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood3.jpg" alt="Jelly" style="width:100%">
<div class="caption">
<p>Indian Blood Bank: Bangalore</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood3.jpg" alt="Light House"
style="width:100%">
<div class="caption">
<p>National Blood Bank: Bangalore</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood1.jpg" alt="Penguins"
style="width:100%">
<div class="caption">
<p>Blood Bank Society of India: Chennai</p>
</div>
</div>
</div>
</div>

</div>
</form>
</main>
</body>
</html>

58 VI SEM, BCA
Online Blood Bank

Module3.Appareal:

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/prod.js"></script>
</head>
<style>
body { padding-top:50px; }
</style>
<body class="container" ng-app="myApp" ng-controller="MainCtrl">

<header>
<nav class="navbar navbar-default">
<div class="container-fluid" style="background-color:green;">
<div class="navbar-header" >
<ul class="nav navbar-nav">
<li><img src="images/products/abPos.jpg" alt="Logo" width="50%"
height="25%"></li>
<li><img src="images/products/oPos.jpg" alt="Apparels" width="200%"
height="25%"></li>
</ul>
</div>
</div>
</nav>
</header>

<main>

<div class="container">

<div class="col-sm-4" style="background-color:lavender;">Highlight<p>View hospitals


and Blood Bank Details ...</p>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood1.jpg" alt="Jelly" style="width:100%">
<div class="caption">
<p>Indian Blook Bank: Bangalore</p>
</div>

</div>

59 VI SEM, BCA
Online Blood Bank

</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood2.jpg" alt="Light House"
style="width:100%">
<div class="caption">
<p>National Blood Bank: Andhra</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood3.jpg" alt="Penguins"
style="width:100%">
<div class="caption">
<p>Society of Blood Donors: Chennai</p>
</div>
</div>
</div>
</div>

<div class="col-sm-4">
<div class="signup-form">
<form method="post" action="/adminlogin">
<h1>Add product and accessories details</h1>
<input type="text" name="pCode" id="pCode" placeholder="Product Code" required value=""
/>

<input type="text" name="pCost" id="pCost" placeholder="Product Cost" onkeydown="return


(event.keyCode > 47 && event.keyCode < 58) || (event.keyCode == 8)
|| (event.keyCode == 9)" required value="" />

<input type="text" name="hosName" id="hosName" placeholder="Hospital Name" required


value="" />

<input type="file" id="fileInput" multiple/>


<button type="button" ng-click="showImage()">Show Image</button>
<input type="text" name="pImage" id="pImage" >
<img ng-src="images/products/{{imageName}}" alt="" />

<!--
<input type="file" id="fileInput" multiple onchange="showname()"/>
File onchange event triggers only if we add directive in angularjs

<input type="file" id="fileUpload" name=" fileUpload" ng-file-model="uploadThisImage"


ng-change="showFileName()">

<input type="file" id="fileUpload" multiple onclick="showFile()"


onchange="showFileName()"/>
-->

<input type="text" name="pDisc" id="pDisc" placeholder="Product Description" required


value="" />
<select class="browser-default custom-select" id="pCategory" name="pCategory">
<option selected>Select Category</option>
<option value="BloodTypeaPos">A Positive</option>
<option value="BloodTypeaNeg">A Negative</option>

60 VI SEM, BCA
Online Blood Bank

<option value="BloodTypebPos">B Positive</option>


<option value="BloodTypebNeg">B Negative</option>
<option value="BloodTypeabPos">AB Positive</option>
</select>
<!--
<input type="text" name="pQuantity" id="pQuantity" placeholder="Product Cost"
onkeydown="return (event.keyCode > 47 && event.keyCode < 58) || (event.keyCode == 8)
|| (event.keyCode == 9)" required value="" />
-->
<button type="button" class="btn btn-default" ng-click="submitData()" >Submit
Data</button>

<input type="text" name="getpCode" id="getpCode" placeholder="Enter Product


Code" required value="" />
<button type="button" class="btn btn-default" ng-click="getData()" >Get
Product</button>
<button type="button" class="btn btn-default" ng-click="updateData()" >Update
Product</button>
<button type="button" class="btn btn-default" ng-click="deleteData()" >Delete
Product</button>
</div>
</div>
</form>
<form method="post" action="/vieworders">
<button type="submit" class="btn btn-default" >Orders</button>
</form>
</form>
<form method="get" action="/admin">
<button type="submit" class="btn btn-default" >Logout</button>
</form>

<div class="col-sm-4" style="background-color:lavender;">Latest Products<p>A Listing of


the latest products and offers follows the Registration and login process...</p>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood1.jpg" alt="Jelly" style="width:100%">
<div class="caption">
<p>Indian Blook Bank: Bangalore</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood2.jpg" alt="Light House"
style="width:100%">
<div class="caption">
<p>National Blood Bank: Andhra</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/apparels/hospitalBlood4.jpg" alt="Penguins"
style="width:100%">
<div class="caption">
<p>Blood Bank of Tamil Nadu: Chennai</p>
</div>
</div>

61 VI SEM, BCA
Online Blood Bank

</div>
</div>

</div>
<!--

-->
</main>
</body>
</html>

Module4.Billing:

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/billing.js"></script>

</head>
<style>
body { padding-top:50px; }
</style>

<body class="container" ng-app="myApp" ng-controller="MainCtrl" >


<header>

<nav class="navbar navbar-default">


<div class="container-fluid" style="background-color:green;">
<div class="navbar-header" >
<ul class="nav navbar-nav">
<li><img src="images/products/aPos.jpg" alt="Logo" width="50%"
height="25%"></li>
<li><img src="images/products/bPos.jpg" alt="Apparels" width="200%"
height="25%"></li>
</ul>
</div>
</div>
</nav>

</header>

62 VI SEM, BCA
Online Blood Bank

<main>
<div class="container" ng-init="getData()">
<div class="row">
<div class="col-lg-8" style="background-color:lavender;">
<form method="post" action="/payment" ng-submit="payment()" >

<!--
<h1> Accepting only 82 characters </h1>
<input type="hidden" id="prods" name="prods" value=<%=products%>>
-->
<input type="hidden" id="products" name="products" value="nothing">

<textarea style="display:none" id="text" name="text" > <%=products%> </textarea>

<div class="features_items"><!--features_items-->
<h2 class="title text-center">Sales Details</h2>

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Code</th>
<th>Price</th>
<th>Hospital Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prodToAdd in prodsSold track by $index">
<td>{{prodToAdd.pCode}}</td><td>{{prodToAdd.pCost}}</td> <td>{{prodToAdd.hosName}}</td>
<td>{{prodToAdd.pQuantity=quantity}}</td>
<td><input type="number" ng-model="quantity" value="1" min="1" id="quantity"
name="quantity"</td>
<td><button type="button" ng-click="del($index)">Remove</button> </td>
</tr>
</tbody>
</table>
</div>

<button type="button" class="btn btn-primary btn-block" ng-click="showBill()">Billing


Details</button>
<div class="features_items"><!--features_items-->
<h2 class="title text-center">Total Amount: {{totalAmount}}</h2>
</div>

<button type="submit" class="btn btn-primary btn-block">Make Payment</button>

</div>

</form>
</div>
</div>
</div>

</main>
</body>
</html>

63 VI SEM, BCA
Online Blood Bank

Module5.Home:

<html>
<head>
<title>
Online Mart
</title>
</head>
<body class="container">

<main>

<div class="sidebar">
<h2>Latest News</h2>
<div class="blog_posts">

<marquee direction="up" scrolldelay="300"><table >


<tr><td>
<div class="blog_desc">
<div class="blog_heading">
<span style="font-weight:bold"><b>HDFC
Bank sets Guinness record in blood collection</b>
<p>The blood donation camp organised by HDFC Bank on December 6, 2013 involving 61,902
participants has found a place in Guinness Book of Records as the largest such drive on a
single day</p></span>

</div>
<br />
<span style="font-weight:bold"><b>World Blood Donor Day: Poor health
reduces women blood donors in India</b>
<p>While the overall number of blood donors in India has grown over the years, women
constitute only a tiny 10 percent share owing to health problems like pernicious anaemia
and low haemoglobin levels or being underweight</p></span>
</div>
</td></tr>

</table></marquee>
</div>
</div>
</main>

</body>
</html>

64 VI SEM, BCA
Online Blood Bank

Module6.Order:

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/order.js"></script>

</head>
<style>
body { padding-top:50px; }
</style>

<body class="container" ng-app="myApp" ng-controller="MainCtrl" >

<header>
<nav class="navbar navbar-default">
<div class="container-fluid" style="background-color:green;">
<div class="navbar-header" >
<ul class="nav navbar-nav">
<li><img src="images/apparels/hospitalBlood1.jpg" alt="Logo" width="50%"
height="25%"></li>
<li><img src="images/apparels/hospitalBlood2.jpg" alt="Apparels" width="200%"
height="25%"></li>
</ul>
</div>
</div>
</nav>

</header>

<main>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" action="/homepage">
<div class="features_items"><!--features_items-->
<input type="text" name="billNum" id="billNum" placeholder="Enter bill Number"
required value="" />
<button type="button" class="btn btn-default" ng-click="getData()" >Get Order
Details</button>

65 VI SEM, BCA
Online Blood Bank

<table class="table table-striped">


<thead>
<tr>
<th scope="col">Product Code</th>
<th scope="col">Product Cost</th>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Product Category</th>
<th scope="col">Product Quantity</th>
</tr>
</thead>
<tbody>
<tr mdbTableCol ng-repeat="order in orders">
<th scope="row">{{order.pCode}}</th>
<td>{{order.pCost}}</td>
<td>{{order.hosName}}</td>
<td>{{order.pDisc}}</td>
<td>{{order.pCategory}}</td>
<td>{{order.pQuantity}}</td>
</tr>
</tbody>
</table>
</div>

</form>
</div>
</div>
</div>

</main>
</body>
</html>

Module7.Payments:

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/payment.js"></script>

66 VI SEM, BCA
Online Blood Bank

</head>
<style>
body { padding-top:50px; }
</style>

<body class="container" ng-app="myApp" ng-controller="MainCtrl" >

<header>
<nav class="navbar navbar-default">
<div class="container-fluid" style="background-color:green;">
<div class="navbar-header" >
<ul class="nav navbar-nav">
<li><img src="images/products/abPos.jpg" alt="Logo" width="50%"
height="25%"></li>
<li><img src="images/products/oPos.jpg" alt="Apparels" width="200%"
height="25%"></li>
</ul>
</div>
</div>
</nav>

</header>

<main>
<div class="container" ng-init="getData()">
<div class="row">
<div class="col-lg-8" style="background-color:lavender;">
<form method="post" action="/makePayment" ng-submit=makePayment()>

<textarea style="display:none" id="text" name="text" > <%=products%> </textarea>


<input type="hidden" id="products" name="products" value="nothing">
<input type="hidden" id="totalAmount" name="totalAmount" value="nothing">

<div class="features_items"><!--features_items-->

<h2 class="title text-center">Sales Details</h2>


<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Code</th>
<th>Price</th>
<th>Name</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prodToAdd in prodsSold track by $index">
<td>{{prodToAdd.pCode}}</td><td>{{prodToAdd.pCost}}</td> <td>{{prodToAdd.hosName}}</td>
<td>{{prodToAdd.pQuantity}}</td> <td>{{prodToAdd.pQuantity * prodToAdd.pCost}}</td>
</tr>
<tr rowspan="5">
Total Amount: {{totalAmount}}
</tr>
</tbody>
</table>
</div>

67 VI SEM, BCA
Online Blood Bank

<div class="features_items"><!--features_items-->
<h2 class="title text-center">Total Amount: {{totalAmount}}</h2>
<h3 class="title text-center">Enter Card Details:</h3>
<div class="col-lg-4" style="background-color:lavender;">

<input type="text" name="fname" id="fname" placeholder="Enter card holders name"


required value="" onkeydown="return (event.keyCode > 64 &&
event.keyCode < 91) || (event.keyCode > 96 && event.keyCode < 123) || (event.keyCode ==
8) || (event.keyCode == 9) || (event.keyCode == 32)" />

<input type="text" name="cardno" id="cardno" placeholder="Enter card no"


onkeydown="return (event.keyCode > 47 && event.keyCode < 58) || (event.keyCode == 8)
|| (event.keyCode == 9)" maxlength="10" required value="" />

<input type="text" name="cardcvc" id="cardcvc" placeholder="Enter cvc code"


onkeydown="return (event.keyCode > 47 && event.keyCode < 58) || (event.keyCode == 8)
|| (event.keyCode == 9)" maxlength="3" required value="" />
</div>

<div class="col-lg-4" style="background-color:lavender;">


<label for="month">Select Expiry Month</label>
<select ng-model="month" name="month" id="month">
<option ng-repeat="m in months" value="{{m}}">{{m}}</option>
</select>

<label for="year">Select Expiry Year</label>


<select ng-model="year" name="year" id="year">
<option ng-repeat="y in years" value="{{y}}">{{y}}</option>
</select>
</div>
<div class="col-lg-4" style="background-color:lavender;">
<button type="submit" class="btn btn-primary btn-block">Make Payment</button>

</div>
</div>

</form>
</div>
</div>
</div>

</main>
</body>
</html>

Module8.Register:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

68 VI SEM, BCA
Online Blood Bank

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/register.js"></script>
</head>
<style>
body { padding-top:50px; }
</style>

<body ng-app="myApp" ng-controller="MainCtrl">

<main>
<!--
<input type="hidden" id="fname" name="fname" value="">
<input type="hidden" id="sname" name="sname" value="">
<input type="hidden" id="email" name="email" value="">
<input type="hidden" id="password" name="password" value="">
<input type="hidden" id="phone" name="phone" value="">
<input type="hidden" id="dob" name="dob" value="">
-->

<div class="container">

<div class="col-sm-4" style="background-color:lavender;">Highlight<p>Registration


will help us to keep you updated for any latest offers...</p>
<div class="row">
<div class="thumbnail">
<img src="images/products/johnson.jpg" alt="Jelly" style="width:100%">
<div class="caption">
<p>Johnson and Johnson Products</p>
</div>

</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/products/lakme.jpg" alt="Light House" style="width:100%">
<div class="caption">
<p>Lakme Total Products</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/products/lancome.jpg" alt="Penguins" style="width:100%">
<div class="caption">
<p>Lancome International Products</p>
</div>

69 VI SEM, BCA
Online Blood Bank

</div>
</div>
</div>

<div class="col-sm-4">
<div class="signup-form">
<form method="post" action="/registered" onsubmit="return alert('You will be
redirected to login to confirm registration')" >
<input type="hidden" id="gender" name="gender" value="{{Gen}}" >

<input type="text" name="fname" id="fname" placeholder="First Name" required value=""


onkeydown="return (event.keyCode > 64 &&
event.keyCode < 91) || (event.keyCode > 96 && event.keyCode < 123) || (event.keyCode ==
8) || (event.keyCode == 9) || (event.keyCode == 32)" />

<input type="text" name="sname" id="sname" placeholder="Last Name" required value=""


onkeydown="return (event.keyCode > 64 &&
event.keyCode < 91) || (event.keyCode > 96 && event.keyCode < 123) || (event.keyCode ==
8) || (event.keyCode == 9) || (event.keyCode == 32)" />

<input type="email" name="email" placeholder="email" required value=""/>


<input ng-model="password" type="password" name="userPassword" placeholder="Enter
Password" ng-required="true" value=""/>
<input ng-model="confirmPassword" type="password" name="confirmPassword"
placeholder="Confirm Password" ng-required="true" value=""/>
<span ng-show="password!=confirmPassword">Password mismatch</span>
<input type="date" id="dob" name="dob" required value=""/>

<div class="checkbox-inline">
<label class="btn btn-sm">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Male"
value="Male" ng-checked="true">Male
</label>
</div>
<div class="checkbox-inline">
<label class="btn btn-sm">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Female"
value="Female">Female
</label>
</div>
<div class="checkbox-inline">
<label class="btn btn-sm">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Others"
value="Others">Others
</label>
</div>

<!-- Radio button other methods


<label class="btn btn-default active">
<input type="radio" id="q156" name="quality[25]" value="1" checked="checked" />
Normal
</label>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" ng-model="Gen" id="Male"
value="Male" ng-checked="true">
<label class="custom-control-label" for="Male">Male</label>
<input type="radio" class="custom-control-input" ng-model="Gen" id="Female"
value="Female">

70 VI SEM, BCA
Online Blood Bank

<label class="custom-control-label" for="Female">Female</label>


<input type="radio" class="custom-control-input" ng-model="Gen" id="Other"
value="Others">
<label class="custom-control-label" for="Others">Others</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="defaultChecked"
name="defaultExampleRadios" checked>
<label class="custom-control-label" for="defaultChecked">Default checked</label>
</div>
-->
<input type="text" name="phone" id="phone" placeholder="Enter phone" onkeydown="return
(event.keyCode > 47 && event.keyCode < 58) || (event.keyCode == 8)
|| (event.keyCode == 9)" maxlength="10" required value="" />

<!-- <input type="number" name="phone" id="phone" placeholder="Enter phone"


onKeyPress="if(this.value.length==10) return false;" required value=""/>
-->
<button type="submit" class="btn btn-default" >Submit</button> <br>
</div>
</div>

<div class="col-sm-4" style="background-color:lavender;">Latest Products<p>A Listing of


the latest products and offers follows the Registration and login process...</p>
<div class="row">
<div class="thumbnail">
<img src="images/products/johnson.jpg" alt="Jelly" style="width:100%">
<div class="caption">
<p>Johnson and Johnson Products</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/products/lakme.jpg" alt="Light House" style="width:100%">
<div class="caption">
<p>Lakme Total Products</p>
</div>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img src="images/products/lancome.jpg" alt="Penguins" style="width:100%">
<div class="caption">
<p>Lancome International Products</p>
</div>
</div>
</div>
</div>

</div>
</form>
</main>
</body>
</html>

71 VI SEM, BCA
Online Blood Bank

Module9.Registration:

<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/price-range.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/register.js"></script>
</head>
<style>
body { padding-top:50px; }
</style>

<body class="container" ng-app="myApp" ng-controller="MainCtrl">

<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Online shopping</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="categories">Categories</a></li>
<li><a href="loginpage.html">Login Page</a></li>
<li><a href="contact us.html">Contact us</a></li>

</ul>
</div>
</nav>
</header>

<main>
<form method="post" action="/registered">
<input type="hidden" id="prods" name="prods" value="Nothing">
First Name: <input type="text" ng-model="firstname">

<button type="button" ng-click="store()">Call store values</button>


<button type="submit" class="btn btn-default" >Submit</button> <br>

<input type="checkbox" ng-model="Hostel" value="Hostel"><br>


<input type="checkbox" ng-model="Transport" value="Transport"><br>
<input type="checkbox" ng-model="Sports" value="Sports"><br>

72 VI SEM, BCA
Online Blood Bank

<br>
Select Degree:
<input type="radio" ng-model="myDeg" value="Bachelors">Bachelors
<input type="radio" ng-model="myDeg" value="Masters">Masters
<input type="radio" ng-model="myDeg" value="Others">Others

Select a topic:
<select ng-model="myTopic">
<option value="">
<option value="Science">Science
<option value="Commerce">Commerce
<option value="Arts">Arts
</select>
</form>

<h3>You entered: {{firstname}}</h3>


<h2>Facilities Opted</h2>
<h1 ng-show="Hostel">Hostel</h1>
<h1 ng-show="Transport">Transport</h1>
<h1 ng-show="Sports">Sports</h1>

<h2>Qualification</h2>
<h1 ng-show="myDeg">{{myDeg}}</h1>

<h2>Qualification</h2>
<h1 ng-show="myTopic">{{myTopic}}</h1>

</main>

</body>
</html>

73 VI SEM, BCA
Online Blood Bank

Screenshot

74 VI SEM, BCA
Online Blood Bank

75 VI SEM, BCA
Online Blood Bank

76 VI SEM, BCA
Online Blood Bank

77 VI SEM, BCA
Online Blood Bank

78 VI SEM, BCA
Online Blood Bank

79 VI SEM, BCA
Online Blood Bank

80 VI SEM, BCA
Online Blood Bank

81 VI SEM, BCA
Online Blood Bank

82 VI SEM, BCA
Online Blood Bank

83 VI SEM, BCA
Online Blood Bank

84 VI SEM, BCA
Online Blood Bank

85 VI SEM, BCA
Online Blood Bank

86 VI SEM, BCA
Online Blood Bank

Bibliography
Text Books:

1. Full Stack JavaScript Development with MEAN By Colin J Ihrig,


Adam Bretz,
Sitepoint publication.
2. MEAN-Web-Development by Amos Q. Haviv, Packt Publishing.
3. MongoDb Basics-Peter Membrey, APress Publications
4. Beginning Node Js, Basarat Syed, APress Publications

Websites:

www.modulecouns.com
www.githut.info
www.paypal-engineering.com/2013/11/22/node-js-at-paypal
www.w3schools.com

www.codementor.io

87 VI SEM, BCA

You might also like