A Report ON Dak Management System: An Internship Program-II Station

[Type text]
A REPORT
ON
DAK MANAGEMENT SYSTEM
AT
SOUTH CENTRAL RAILWAY, LALLAGUDA,
SECUNDERABAD.
An Internship Program-II Station.
FACULTY OF SCIENCE AND TECNOLOGY

ICFAI FOUNDATION FOR HIGHER EDUCATION
(Deemed to be University under Section 3 of UGC Act.1956)
HYDERABAD
JUNE-NOVEMBER 2018.
1
[Type text]
Index:
1. INTRODUCTION: …………………………………………………………………………...3
1.1 WHAT IS DAK: ……………………………………………………………………………...3

1.2 HOW DAK MANGEMENT WORKS: …………………………………………………...…3
1.3 BENEFITS OF DAK: …………………………………………………………………….….4
1.4 FUNCTIONALITY: …………………………………………………………………............4
2. EXISTING PROCESS: ………………………………………………………………………6
3. TASK BREAK DOWN: ……………………………………………………………………...7
4. TECHNOLOGIES/LANGUAGES USED: …………………………………………………7
4.1 IIS EXPRESS: ………………………………………………………………………………..7

4.2 RAZOR: ………………………………………………………………………………………8
4.3 HTML/CSS/JAVASCRIPT: ………………………………………………………………….9
4.4 SQL SERVER: ……………………………………………………………………………...10
4.5VISUALSTUDIO: …………………………………………………………………………..12
6. DESIGN: ……………………………………………………………………………………..19
7. TECHNIQUES USED: ……………………………………………………………………...26
8. CODE ANALYSIS: …………………………………………………………………………49
9. SUMMARY: …………………………………………………………………………………70
10. BIBLOGRAPHY: ………………………………………………………………………….71
2
[Type text]
1. Introduction:
1.1 WHAT IS DAK?

DAK is a Hindi word which means letters; this is the reason behind it being this
application’s name.
DAK management system has ability to handle all Incoming and Outgoing
correspondences and also has in-built suitable security Measures and configurable
access control. It also track the inward / outward movement of the letters, files,
documents and circulars etc. within the various departments and units and also to
external parties associated with SCR.
This application is able to provide instant tracking of any letter which may be
incoming or outgoing, on the basis of various parameters like subject, date, section,
file number etc. with generating a unique reference number.
1.2 HOW DAK MANAGEMENT WORKS?

There are three parts in DAK management system receipt, action and dispatch
whenever any letter arrives with some query consisting letter no., subject, date of
letter etc. the necessary details are filled in the receipt page by clerk or admin and
the letter is sent to the person/dept. mentioned in addressed to column. For every
letter a unique id is given. Every person is given with a log in ID and password so
the person gets the receipt in his inbox page.
After receiving the receipt the action process starts. The process involves giving
remarks to the receipt received the action needed to be done and by whom. A
target date is given by the user who first receives the receipt. This process
continues till the letter is closed.
After the action part the letter is dispatched to concerned person. The person still
may have some queries so the process may continue.
3
[Type text]
1.3 BENEFITS OF DAK
o Ensuring the integration of content by secured authorized access to the

relevant information.
o Tracking and tracing incoming and outgoing DAK
o Quick and easy access to the information.
o Make quicker and better decisions to improve efficiency.
o Fast and effective collaboration across the departments.
o Easy and faster generation of various reports
1.4 FUCTIONALITY:
Create letter
Whenever a letter arrives with some query all the details are filled in the “New
message” and sent to the person in the ‘addressed to’ a column.
Action on letter
The person in the “addressed to” column receives the letter in his inbox and
decides how to solve the query.
Remarks
The person chooses the type of file and gives the remarks for it with the date of
remarks and decides whether to dispatch or not.
4
[Type text]
Type of letter
There are five types
Information: - No action needed just kept for information (record maintenance).
Forward: - Received letter is just forwarded to someone no further action needed.
Compliance: - Higher level officer asks for a reply from his subordinates.
Reply: - It is between same level officers or between sister departments.
Compliance + Reply: - When someone gives both compliance and reply then we
use this field.
Dispatch
After all the action part is done the letter is dispatched to the concerned person.
Tracking letter
Letter can be tracked using DAK management system.
Close the letter
The person to whom the letter is dispatched decides to close the letter or to re-send
the letter again.
5
[Type text]
2. Existing System:
Whenever any Letter arrives, it is noted in the register and a serial number is
generated manually, which is referred to as Unique ID. Generally the letter is
forwarded to some Officer or Section to carry out any necessary measures to be
taken and this forwarding process may occur many times for a particular letter.
During the above forwarding process many actions might have been taken, these
actions are tracked in the register by every officer involved in this process. After
the actions are carried out the received letter should be dispatched stating that
necessary actions have been taken. This is also recorded manually in a register by
the concerned officer. This system of maintaining the in and out flow of letters is
referred to as Dak Management System
Drawbacks of the Existing System
 Maintenance of voluminous registers.

 It becomes a tedious task to find the answer of any query. It takes long
time.
 Compilation of query on a particular condition becomes difficult.
6
[Type text]
3. TASK BREAK DOWN:
 Understanding the requirement for working on IIS Server and SQL Server.
 Learning ASP .NET (Razor 3) Basics.
 Establishing connection between Sql Server and ASP .NET (Razor 3).
 Design a interface which clearly differentiates Receipt , Action and
Dispatch.
 Understanding the concept of Action categories.
 Design two applications for admin and Clients.
4. TECHNOLOGIES/LANGUAGES USED:
IIS EXPRESS
IIS Express, a lightweight (4.5–6.6 MB) version of IIS, is available as a standalone
freeware server and may be installed on Windows XP with Service Pack 3 and
subsequent versions of Microsoft Windows. IIS 7.5 Express supports only the
HTTP and HTTPS protocols. It is portable, stores its configuration on a per-user
basis, does not require administrative privileges and attempts to avoid conflicting
with existing web servers on the same machine. IIS Express can be downloaded
separately or as a part of Web matrix,or Visual Studio 2012 and later. (In Visual
Studio 2010 and earlier, web developers developing ASP.NET apps used
ASP.NET Development Server, codenamed "Cassini".)By default, IIS Express
only serves local traffic.
7
[Type text]
ASP.NET RAZOR 3
Razor is a markup syntax that lets you embed server-based code (Visual Basic and
C#) into web pages. Server-based code can create dynamic web content on the fly,
while a web page is written to the browser. When a web page is called, the server
executes the server-based code inside the page before it returns the page to the
browser. By running on the server, the code can perform complex tasks, like
accessing databases. Razor is based on ASP.NET, and designed for creating web
applications. It has the power of traditional ASP.NET markup, but it is easier to
use, and easier to learn.
HTML
HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages. HTML was created by Berners-Lee in late
1991 but "HTML 2.0" was the first standard HTML specification which was
published in 1995. HTML 4.01 was a major version of HTML and it was published
in late 1999. Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and this version
was published in 2012.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language like HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content,
including layout, colors, and fonts. This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate. Css file, and reduce complexity and
repetition in the structural content.
8
[Type text]
JAVASCRIPT
JavaScript often abbreviated as JS, is a high-level, interpreted programming
language. It is a language which is also characterized as dynamic, weakly
typed, prototype-based and multi-paradigm.
Alongside HTML and CSS, JavaScript is one of the three core technologies of
the World Wide Web. JavaScript enables interactive web pages and thus is an
essential part of web applications. The vast majority of websites use it, and all
major web browsers have a dedicated JavaScript engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, functional,
and imperative (including object-oriented and prototype-based) programming
styles. It has an API for working with text, arrays, dates, regular expressions, and
basic manipulation of the DOM, but the language itself does not include any I/O,
such as networking, storage, or graphics facilities, relying for these upon the host
environment in which it is embedded.
9
[Type text]
SQL SERVER MANAGEMENT STUDIO

SQL Server Management Studio (SSMS) is a software application first launched
with Microsoft SQL Server 2005 that is used for configuring, managing, and
administering all components within Microsoft SQL Server. The tool includes both
script editors and graphical tools which work with objects and features of the
server.
A central feature of SSMS is the Object Explorer, which allows the user to browse,
select, and act upon any of the objects within the server. It also shipped a separate
Express edition that could be freely downloaded, however recent versions of
SSMS are fully capable of connecting to and manage any SQL Server Express
instance. Microsoft also incorporated backwards compatibility for older versions of
SQL Server thus allowing a newer version of SSMS to connect to older versions of
SQL Server instances.
SQL SERVER
SQL Server is Microsoft's relational database management system (RDBMS). It is
a full-featured database primarily designed to compete against competitors Oracle
Database (DB) and MySQL.
Like all major RBDMS, SQL Server supports ANSI SQL, the standard SQL
language. However, SQL Server also contains T-SQL, its own SQL implemention.
SQL Server Management Studio (SSMS) (previously known as Enterprise
Manager) is SQL Server's main interface tool, and it supports 32-bit and 64-bit
environments.
SQL Server is sometimes referred to as MSSQL and Microsoft SQL Server.
Originally released in 1989 as version 1.0 by Microsoft, in conjunction with
Sybase, SQL Server and its early versions were very similar to Sybase. However,
the Microsoft-Sybase partnership dissolved in the early 1990s, and Microsoft
retained the rights to the SQL Server trade name. Since then, Microsoft has
released 2000, 2005 and 2008 versions, which feature more advanced options and
better security.
Examples of some features include: XML data type support, dynamic management
views (DMVs), full-text search capability and database mirroring.
SQL Server is offered in several editions with different feature set and pricing
options to meet a variety of user needs, including the following:
10
[Type text]
 Enterprise: Designed for large enterprises with complex data requirements,

data warehousing and Web-enabled databases. Has all the features of SQL
Server, and its license pricing is the most expensive.
 Standard: Targeted toward small and medium organizations. Also supports
e-commerce and data warehousing.
 Workgroup: For small organizations. No size or user limits and may be used
as the backend database for small Web servers or branch offices.
 Express: Free for distribution. Has the fewest number of features and limits
database size and users. May be used as a replacement for an Access
database.
T-SQL
In 1970's the product called 'SEQUEL', structured English query language,

developed by IBM and later SEQUEL was renamed to 'SQL' which stands for
Structured Query Language.
In 1986, SQL was approved by ANSI (American national Standards Institute) and
in 1987, it was approved by ISO (International Standards Organization).
SQL is a structure query language which is a common database language for all
RDBMS products. Different RDBMS product vendors have developed their own
database language by extending SQL for their own RDBMS products.
T-SQL stands for Transact Structure Query Language which is a Microsoft
product and is an extension of SQL Language.
T-SQL (Transact-SQL) is the secondary means of programming and managing
SQL Server. It exposes keywords for the operations that can be performed on
SQL Server, including creating and altering database schemas, entering and
editing data in the database as well as monitoring and managing the server itself.
Client applications that consume data or manage the server will leverage SQL
Server functionality by sending T-SQL queries and statements which are then
processed by the server and results (or errors) returned to the client application.
SQL Server allows it to be managed using T-SQL. For this it exposes read-only
tables from which server statistics can be read. Management functionality is
exposed via system-defined stored procedures which can be invoked from T-SQL
queries to perform the management operation. It is also possible to create linked
Servers using T-SQL. Linked servers allow a single query to process operations
performed on multiple servers.
11
[Type text]
VISUAL STUDIO
Visual Studio is an integrated development environment (IDE). The “integrated”

part of IDE means that
Visual Studio contains features that complement every aspect of software

development:
You can use Visual Studio to write code in C++, C#, Visual Basic, JavaScript,
Typescript, Python, and more, but for the purpose of this overview. You can use
C# in Visual Studio by selecting the .NET Core workload during installation. If
you’ve already installed Visual Studio, you can add the .NET Core workload by
opening the Visual Studio Installer program on your computer and modifying your
installation.
When you open Visual Studio, there are a number of tool windows that let you
interact with your code:
The Code editor is where you write your code.
The Solution explorer shows the files you’re working with.
The Properties pane gives additional information and context about selected parts
of your project.
The Output window displays debugging and error messages, compiler warnings,
status messages, and other output.
You can add additional tool windows by using the View menu at the top. For
example, the Bookmarks tool window lets you bookmark lines of code for quick
access. The layout of your tool windows is highly customizable you can add
additional windows, remove the ones you have open, and move them around to
best suit how you work.
12
[Type text]
Menus
At the top of the screen, you’ll see Visual Studio’s menus, which you’ll use to run
various commands.
Here’s a high level overview of the most important ones:
The File menu contains commands to create, open, and save projects.
The Edit menu contains commands to search, modify, and refactor your code.
The View menu is where you go to open additional tool windows in Visual Studio.
The Project menu lets you add files and dependencies in your project.
The Debug menu contains commands to run your code and use debugger features.
The Tools menu contains commands to change your settings, add functionality to
Visual Studio via extensions, and access various Visual Studio tools.
Toolbar
The Visual Studio toolbar, shown below the menus, provides quick access to the
most common commands.
When you start writing code in Visual Studio, you begin with a project. A project
contains all of the information and files required to create and run a program.
Visual Studio organizes projects into solutions. A solution is a collection of

projects that are associated with each other. If you’re just getting started, a solution
will probably only contain one project.
The easiest way to start coding in Visual Studio is by creating a new project from a
template we’ll cover working with existing code in just a moment. Visual Studio
will generate a preconfigured project with recommended tools and settings. You
can create a new project by going to File? New? Project.
13
[Type text]
Use the selectors on the left to choose different types of languages or platforms to
work with.
For example, to create a basic C# project, such as for a “Hello World” application,
select the template Console App (.NET Core) under the Visual C# selector. Name
your project and specify its location, then click OK to create your project.
Besides creating a new project, you can also work with existing code in Visual
Studio using one of the following options:
Opening from an existing source control repository
If you have a code repository using Git, you can use the Team Explorer tool
window to clone your repository and begin working on it. Go to File ? Open ?
Open from Source Control, and make sure you’re in the Manage Connections
screen of the Team Explorer by clicking the green Manage Connections button at
the top of the tool window. Click Clone under Local Git Repositories, then enter
the URL of your git repo to clone your repository.
Opening an existing project
If you have an existing Visual Studio project, you can open it by going to File ?
Open ? Project/Solution.
Creating a Visual Studio project from existing code
For simple C++, C#, or Visual Basic programs that don’t have Visual Studio
project and solution files, you can automatically generate Visual Studio projects
for your code by using the project creation wizard at File ? Open ? Project From
Existing Code.
Opening a folder
If you just want to edit code for an existing project without using Visual Studio’s
project and build systems, you can open a folder through File ? Open ? Folder.
14
[Type text]
Though you won’t have the full support of Visual Studio’s project system, you’ll
be able to use syntax highlighting, navigate through your code, and debug for C++,
C#, Visual Basic, Node.js, and Python projects.
You can learn more about opening a folder on the Visual Studio blog and how to
use it for C++ on the Visual C++ blog.
Visual Studio’s IntelliSense makes coding faster by offering contextual

suggestions while you type and lowers your chances of making typos. For
example, as you type characters, IntelliSense will show a list of members
(variables, methods, etc.) that’s filtered to include only those containing your typed
characters.
You can use the arrow keys to select one of the suggestions. Pressing Tab will
insert the selected member.
For functions, IntelliSense will also list parameter information.
Squiggles are wavy red lines that appear under potential errors in your code.
Hovering over a squiggle
gives you information about the error it indicates. A light bulb may appear next to
errors and offer quick fixes that Visual Studio can automatically apply.
You can view all errors and warnings in your solution by opening the Error List
through View ? Error List.
You can use Visual Studio to automatically format your code so that your code is
written consistently.
The following two commands explicitly format your code:
Format Document (Edit ? Advanced ? Format Document, or Ctrl + K, then Ctrl +

D) – Formats the entire active file
Format Selection (Edit ? Advanced ? Format Selection, or Ctrl + K, then Ctrl + F)

– Formats text you’ve selected
Along with manual code formatting, Visual Studio by default triggers formatting
on user gestures such as entering a new line and pasting code. You can change
15
[Type text]
when Visual Studio automatically formats your code for a given language by using
the options menu and searching for “Formatting”.
Sometimes you don’t get code right the first time – you can use Visual Studio to
rename variable or method names and intelligently update all references with the
new name. To use this feature, right click the variable or method, and select
Rename. Type in the new name and hit Enter to apply your changes.
Visual Studio’s Go To commands perform a focused search of your code to

quickly find specific types, members, or symbols in your code. You can also use it
to navigate to certain files or lines of code.
To start using Go To commands, use the menu option Edit ? Go To ? Go To All or

the keyboard shortcut Ctrl + T.
A search box will appear at the top right of your code editor window – start typing
to search through your code.
By default, Go To will display any item in your solution that matches your search
term.
You can also filter your code search to specific element types by prefacing your
search term with certain characters or selecting one of the icons above the search
box.
Visual Studio’s debugger can help you find problems in your code efficiently.
The debugger lets you run your program and pause it before given lines of code are
run so that you can inspect what your program is doing.
When you’re debugging a program, it’ll pause at lines of code where you add a
breakpoint, which acts as a stop sign for your code. When your program runs into a
breakpoint and pauses, you’ll be able to inspect parts of your program to find
problems in that area of your code.
To set a breakpoint, click to the left of its line number so that a red dot appears.
To start debugging, run your code using the green play button in the toolbar or by
pressing F5.
16
[Type text]
Your program will run until it reaches the first breakpoint that it encounters.
When your program is paused, you can use features of the debugger to check the
values of variables in your code. This way, you can make sure that they’re storing
the values that you expect them to have.
You can use your mouse to hover over a variable in its code to see the current
value that it’s storing.
You can also use the Autos and Locals tool windows to inspect variables.
The Autos tool window shows the type and current value of variables used on the
current line or preceding line.
The Locals window shows variables that are currently in scope. When you’re
debugging, these windows appear in the bottom left of Visual Studio by default,
but you can reopen them using the Debug ? Windows menu.
When your code is paused in the debugger, you can walk through your code step
by step to see what happens when each statement is run. When you’re stepping
through your code, you’ll see a yellow arrow that shows the statement on which
the debugger paused. This statement is the next to be executed.
You can configure Visual Studio’s user interface, code formatting preferences, and
other settings through the options menu. Click Tools ? Options to get started.
When you’re done editing your preferences, press OK to apply them.
When you installed Visual Studio, you probably had the option to install different
workloads.
A workload is a bundle of tools within Visual Studio that helps you be productive
with certain languages or platforms.
For example, the Desktop development with C++ workload includes Visual Studio
features that let you run and debug C++ console applications and see suggestions
for your C++ code.
You can add or remove workloads after your initial installation of Visual Studio to
add support for additional
17
[Type text]
languages and tools. To do so, run the Visual Studio Installer again using the
Windows Start menu, then click Modify.
Besides the features that come with Visual Studio out of the box, Visual Studio
also contains an ecosystem of extensions that let you add extra functionality to
Visual Studio.
You can download and manage extensions by going to Tools ? Extensions and
Updates.
Click the Online tab on the left to view a list of the extensions available on the
Visual Studio Marketplace.
To install an extension, select the extension, then click Download.
Visual Studio needs to restart to install extensions, so close all open Visual Studio
windows and reopen
Visual Studio after installation.
18
[Type text]
DESIGN:
Pages designed for
1) Admin (Clerk):-
a) Add User
19
[Type text]
b) Existing Users
2) USER
a) Login
20
[Type text]
b)Home
21
[Type text]
c) Forward
22
[Type text]
d)Dispatch
23
[Type text]
e) Receipt
24
[Type text]
f) TimeLine
25
[Type text]
Techniques Designed:
Post/Redirect/Get (PRG) :-
Post/Redirect/Get (PRG) is a web development design pattern that prevents

some duplicate form submissions, creating a more intuitive interface for user
agents (users). PRG supports bookmarks and the refresh button in a predictable
way that does not create duplicate form submissions.
When a web form is submitted to a server through an HTTP POST request, a web
user that attempts to refresh the server response in certain user agents can cause the
contents of the original POST request to be resubmitted, possibly causing
undesired results, such as a duplicate web purchase.
To avoid this problem, many web developers use the PRG pattern—instead of
returning a web page directly, the POST operation returns a redirection command.
The HTTP 1.1 specification introduced the HTTP 303 ("See other") response code
to ensure that in this situation, the web user's browser can safely refresh the server
response without causing the initial POST request to be resubmitted. However
most common commercial applications in use today (new and old alike) still
continue to issue HTTP 302 ("Found") responses in these situations.
The PRG pattern cannot address every scenario of duplicate form submission.
Some known duplicate form submissions that PRG cannot solve are:
 If a web user refreshes before the initial submission has completed because of
server lag, resulting in a duplicate POST request in certain user agents.
26
[Type text]
Bookmarks
User agents (such as browsers) store only the URI of an HTTP request as a
bookmark. Because of this, an HTTP POST request that results in a response based
on the body of the HTTP POST request cannot be bookmarked. By using the PRG
pattern, the URI of the request can safely be bookmarked by a web user.
Proxy Servers
Since redirects are using absolute URIs, one has to take care about proxy servers
(HTTP→HTTPS) and reverse proxy servers. If your application is such that a user
uses an SSL tunnel to reach your site, this can cause problems also. (You may be
able to use the Referer header to discover the domain and port the user is actually
entering.)
27
[Type text]
HTML Web Storage :-
With web storage, web applications can store data locally within the user's
browser.
Before HTML5, application data had to be stored in cookies, included in every

server request. Web storage is more secure, and large amounts of data can be
stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is
never transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one origin,
can store and access the same data.
HTML web storage provides two objects for storing data on the client:
 window.localStorage - stores data with no expiration date

 window.sessionStorage - stores data for one session (data is lost when the
browser tab is closed)
The localStorage object stores the data with no expiration date. The data will not
be deleted when the browser is closed, and will be available the next day, week, or
year.
Example:-
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
28
[Type text]
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does

not support Web Storage...";
</script>
</body>
</html>
The sessionStorage object is equal to the localStorage object, except that it stores
the data for only one session. The data is deleted when the user closes the specific
browser tab.
Example:-
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
29
[Type text]
} else {
sessionStorage.clickcount = 1;
document.getElementById("result").innerHTML = "You have clicked the

button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does

not support web storage...";
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
30
[Type text]
W3.CSS
W3.CSS is a modern CSS framework with built-in responsiveness. It supports

responsive mobile first design by default, and it is smaller and faster than similar
CSS frameworks.
W3.CSS can also speed up and simplify web development because it is easier to
learn, and easier to use than other CSS frameworks. W3.CSS is free to use. No
license is necessary.
TimeLine:-
Timeline is used to represent different stages in Action.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
31
[Type text]
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}

.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */

.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
32
[Type text]
/* The circles on the timeline */

.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */

.left {
left: 0;
}
/* Place the container to the right */

.right {
left: 50%;
}
33
[Type text]
/* Add arrows to the left container (pointing right) */

.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */

.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border-width: 10px 10px 10px 0;
34
[Type text]
border-color: transparent white transparent transparent;

}
/* Fix the circle for containers on the right side */

.right::after {
left: -16px;
}
/* The actual content */

.content {
padding: 20px 30px;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
35
[Type text]
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */

.container::before {
left: 60px;
}
/* Make sure all circles are at the same spot */

.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */

.right {
left: 0%;
}
}
</style>
</head>
36
[Type text]
<body>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum
perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis
his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<h2>2016</h2>
</div>
</div>
<h2>2015</h2>
</div>
</div>
37
[Type text]

<h2>2012</h2>
</div>
</div>
<h2>2011</h2>
</div>
</div>
<h2>2007</h2>
</div>
</div>
</div>
</body></html>
38
[Type text]
Template Adapted:-
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=RobotoDraft' rel='stylesheet'

type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css"><style>
html,body,h1,h2,h3,h4,h5 {font-family: "RobotoDraft", "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {padding: 16px}
</style>
<body>

<nav class="w3-sidebar w3-bar-block w3-collapse w3-white w3-animate-left w3-

card" style="z-index:3;width:320px;" id="mySidebar">
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom

w3-large"><img src="https://www.w3schools.com/images/w3schools.png"
style="width:60%;"></a>
<a href="javascript:void(0)" onclick="w3_close()" title="Close Sidemenu"
39
[Type text]
class="w3-bar-item w3-button w3-hide-large w3-large">Close <i class="fa fa-

remove"></i></a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-dark-grey w3-

button w3-hover-black w3-left-align"
onclick="document.getElementById('id01').style.display='block'">New Message
<i class="w3-padding fa fa-pencil"></i></a>
<a id="myBtn" onclick="myFunc('Demo1')" href="javascript:void(0)"

class="w3-bar-item w3-button"><i class="fa fa-inbox w3-margin-
right"></i>Inbox (3)<i class="fa fa-caret-down w3-margin-left"></i></a>
<div id="Demo1" class="w3-hide w3-animate-left">

test w3-hover-light-grey" onclick="openMail('Borge');w3_close();" id="firstTab">
<div class="w3-container">
<img class="w3-round w3-margin-right" src="/w3images/avatar3.png"

style="width:15%;"><span class="w3-opacity w3-large">Borge Refsnes</span>
<h6>Subject: Remember Me</h6>
<p>Hello, i just wanted to let you know that i'll be home at...</p>
</div>
</a>

test w3-hover-light-grey" onclick="openMail('Jane');w3_close();">

style="width:15%;"><span class="w3-opacity w3-large">Jane Doe</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
40
[Type text]
</a>

test w3-hover-light-grey" onclick="openMail('John');w3_close();">

style="width:15%;"><span class="w3-opacity w3-large">John Doe</span>
<p>Welcome!</p>
</div>
</a>
</div>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-paper-plane w3-

margin-right"></i>Sent</a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-hourglass-end w3-

margin-right"></i>Drafts</a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-trash w3-margin-

right"></i>Trash</a>
</nav>

<div id="id01" class="w3-modal" style="z-index:4">
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-container w3-padding w3-red">
<span onclick="document.getElementById('id01').style.display='none'"
41
[Type text]
class="w3-button w3-red w3-right w3-xxlarge"><i class="fa fa-

remove"></i></span>
<h2>Send Mail</h2>
</div>
<div class="w3-panel">
<label>To</label>
<input class="w3-input w3-border w3-margin-bottom" type="text">
<label>From</label>
<label>Subject</label>
<input class="w3-input w3-border w3-margin-bottom" style="height:150px"

placeholder="What's on your mind?">
<div class="w3-section">
<a class="w3-button w3-red"

onclick="document.getElementById('id01').style.display='none'">Cancel <i
class="fa fa-remove"></i></a>
<a class="w3-button w3-light-grey w3-right"

onclick="document.getElementById('id01').style.display='none'">Send <i
class="fa fa-paper-plane"></i></a>
</div>
</div>
</div>
</div>
42
[Type text]

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()"

style="cursor:pointer" title="Close Sidemenu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:320px;">
<i class="fa fa-bars w3-button w3-white w3-hide-large w3-xlarge w3-margin-left

w3-margin-top" onclick="w3_open()"></i>
<a href="javascript:void(0)" class="w3-hide-large w3-red w3-button w3-right w3-

margin-top w3-margin-right"
onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-
pencil"></i></a>
<div id="Borge" class="w3-container person">
<br>
<img class="w3-round w3-animate-top" src="/w3images/avatar3.png"

style="width:20%;">
<h5 class="w3-opacity">Subject: Remember Me</h5>
<h4><i class="fa fa-clock-o"></i> From Borge Refsnes, Sep 27, 2015.</h4>
<a class="w3-button w3-light-grey" href="#">Reply<i class="w3-margin-left fa

fa-mail-reply"></i></a>
<a class="w3-button w3-light-grey" href="#">Forward<i class="w3-margin-left

fa fa-arrow-right"></i></a>
<hr>
43
[Type text]
<p>Hello, i just wanted to let you know that i'll be home at lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Best Regards, <br>Borge Refsnes</p>
</div>
<div id="Jane" class="w3-container person">
<br>

style="width:20%;">
<h5 class="w3-opacity">Subject: None</h5>
<h4><i class="fa fa-clock-o"></i> From Jane Doe, Sep 25, 2015.</h4>
<a class="w3-button w3-light-grey">Reply<i class="w3-margin-left fa fa-mail-

reply"></i></a>
<a class="w3-button w3-light-grey">Forward<i class="w3-margin-left fa fa-

arrow-right"></i></a>
<hr>
44
[Type text]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Forever yours,<br>Jane</p>
</div>
<div id="John" class="w3-container person">
<br>

style="width:20%;">
<h5 class="w3-opacity">Subject: None</h5>
<h4><i class="fa fa-clock-o"></i> From John Doe, Sep 23, 2015.</h4>
<a class="w3-button w3-light-grey">Reply<i class="w3-margin-left fa fa-mail-

reply"></i></a>
<a class="w3-button w3-light-grey">Forward<i class="w3-margin-left fa fa-

arrow-right"></i></a>
<hr>
<p>Welcome.</p>
<p>That's it!</p>
</div>
</div>
45
[Type text]
<script>
var openInbox = document.getElementById("myBtn");
openInbox.click();
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
function myFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-red";
} else {
x.className = x.className.replace(" w3-show", "");
46
[Type text]
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-red", "");
openMail("Borge")
function openMail(personName) {
var i;
var x = document.getElementsByClassName("person");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
x = document.getElementsByClassName("test");
x[i].className = x[i].className.replace(" w3-light-grey", "");
document.getElementById(personName).style.display = "block";
event.currentTarget.className += " w3-light-grey";
</script>
47
[Type text]
<script>
var openTab = document.getElementById("firstTab");
openTab.click();
</script>
</body>
</html>
Link:-
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_mail&
stacked=h
48
[Type text]
Code Analysis:-
1) Admin Panel:-
Problem :-
Admin and User should have different applications. Whenever admin adds a
user, it should be get updated to User login details table.
Solution:-
Use same connection string for databases in two files. Update the web.config
file for this action to be taken place.
Code:-
a) Register.cshtml
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=RobotoDraft' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {
font-family: "RobotoDraft", "Roboto", sans-serif
}
.w3-bar-block .w3-bar-item {
padding: 16px
}
body, h1, h2, h3, h4, h5, h6 {

font-family: "Lato", sans-serif;
}
body, html {
height: 100%;
color: #0f0f0f;
line-height: 2.0;
}
/* Create a Parallax Effect */

.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
49
[Type text]
.button {
background-color: white border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: grey;
color: white;
}
table {
margin-left: 150px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>


<nav class="w3-sidebar w3-bar-block w3-collapse w3-white w3-animate-left w3-card"
style="z-index:3;width:320px;" id="mySidebar">
50
[Type text]
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom w3-

large"><img src="~/Images/IRCTC.png" style="width:60%;"></a>
<a href="javascript:void(0)" onclick="w3_close()" title="Close Sidemenu"
class="w3-bar-item w3-button w3-hide-large w3-large">Close<i class="fa fa-
remove"></i></a>
<a id="myBtn" onclick="myFunc('Demo1')" href="javascript:void(0)" class="w3-bar-

item w3-button"><i class="fa fa-inbox w3-margin-right"></i><i class="fa fa-caret-down w3-
margin-left"></i></a>
test w3-hover-light-grey" onclick="openMail('Borge');w3_close();" id="firstTab">
<img class="w3-round w3-margin-right" style="width:15%;"><span
class="w3-opacity w3-large">ADD USER</span>
</div>
</a>
test w3-hover-light-grey" onclick="openMail('Jane');w3_close();">
<img class="w3-round w3-margin-right" style="width:15%;"><span
class="w3-opacity w3-large" onclick=" show()">EXISTING USER</span>
</div>
</a>
</nav>


<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()"
style="cursor:pointer" title="Close Sidemenu" id="myOverlay"></div>


<div class="w3-main" style="margin-left:320px;">
<i class="fa fa-bars w3-button w3-white w3-hide-large w3-xlarge w3-margin-left
w3-margin-top" onclick="w3_open()"></i>
<a href="javascript:void(0)" class="w3-hide-large w3-red w3-button w3-right w3-
margin-top w3-margin-right"
onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-
pencil"></i></a>
<div id="Borge" class="w3-container person">

<br>
<body>
<div class="w3-content w3-container w3-padding-64" id="contact">
<form method="post" action="~/Account/Login.cshtml">
51
[Type text]
<div class="w3-row-padding" style="margin:0 -10px 8px -10px">
<h3><center> <b>ADD USER</b></center></h3><br>

<center>
<b>
<p id="demo"></p>
</b>
</center>
<div>
<input class="w3-input w3-border" type="text"
placeholder="NAME*" required name="NAME" pattern="[A-Za-z0-9]{4,}">
</div> <br>
<div>
placeholder="DESIGNATION*" required name="DESIGNATION" pattern="[A-Za-z]{4,}">
</div> <br>
<div>
placeholder="DEPARTMENT* " required name="DEPARTMENT" pattern="[A-Za-z0-9/_-]{4,}">
</div> <br>
<div>
<div>
placeholder="USERNAME*" required name="USERNAME" pattern="[A-Za-z0-9.]{4,}">
</div> <br>
<div>
<input class="w3-input w3-border" type="password"
placeholder="PASSWORD*" required name="PASSWORD">
</div> <br>
</textarea></center> <br><br>
<center>
<button class="button button1">S U B M I T </button>
</center>
</form>
</div>
</div>
</div>
</div>
</div>
52
[Type text]
</div>
<script>
var openInbox = document.getElementById("myBtn");
openInbox.click();
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
function myFunc(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-red";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-red", "");
}
}
openMail("Borge")
function openMail(personName) {
var i;
var x = document.getElementsByClassName("person");
x[i].style.display = "none";
}
x = document.getElementsByClassName("test");
x[i].className = x[i].className.replace(" w3-light-grey", "");
}
document.getElementById(personName).style.display = "block";
event.currentTarget.className += " w3-light-grey";
}
</script>
<script>
var openTab = document.getElementById("firstTab");
openTab.click();
</script>
fuction show()
{
@{
try
53
[Type text]
{
var db = Database.Open("DAK_Data");
var selectQueryString = "SELECT * FROM User_details";
foreach (var row in db.Query(selectQueryString))
{

<div class="w3-row-padding" style="margin:0 -10px 8px -10px">
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Username</th>
<th>Password</th>
</tr>
<tr>
<td>@row.name</td>
<td>@row.designation</td>
<td>@row.department</td>
<td>@row.username</td>
<td>@row.password</td>
</tr>
</table>
</div>
</div>
}
}
catch (Exception e)
{
}}
</body>
</html>
b) Login.cshtml
@{
try
{
string name = Request["Name"];
string designation = Request["Designation"];
string department = Request["Department"];
string username = Request["USERNAME"];
string password = Request["Password"];
bool b1 = string.IsNullOrEmpty(name);
if (!b1)
{
54
[Type text]
var insertquery = "insert into User_details values(\'" + name + "\',\'" +

designation + "\',\'" + department + "\',\'" + username + "\',\'" + password + "\')";
db.Query(insertquery);
var insertq = "insert into Login_Table values(\'" + username + "\',\'" +
password + "\')";
db.Query(insertq);
Response.Redirect("Register.cshtml");
}
}
catch (Exception e)
{
2) User Interface:-
Problem:-
Receipt , Action and Dispatch are the three kinds of mail and their interface may
create a trouble due to lot of information to be segregated.
Solution:-
Create a navigation tab for receipt’s inbox and outbox and to find out Action and
Dispatch we used a button to find it out.
Code:-
<nav class="w3-sidebar w3-bar-block w3-collapse w3-white w3-animate-left w3-card"
style="z-index:3;width:320px;" id="mySidebar">
<a href="javascript:void(0)"><img src="~/Images/logo.jpg"
style="width:100%;"></a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-dark-grey w3-button

w3-hover-black w3-left-align"
onclick="document.getElementById('id01').style.display='block'">New Message <i class="w3-
padding fa fa-pencil"></i></a>
<a id="myBtn" onclick="myFunc('Demo1')" href="javascript:void(0)" class="w3-bar-
item w3-button"><i class="fa fa-inbox w3-margin-right"></i>Inbox <i class="fa fa-caret-
down w3-margin-left"></i></a>
@{
string Demo = Session["User"].ToString();
var selectQueryString = "SELECT * FROM Receipt_Table WHERE [To]=\'" +
Demo + "\'";
foreach (var row in db.Query(selectQueryString))
{
55
[Type text]
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-

bottom test w3-hover-light-grey"
onclick="openMail('@row.Sent_time');w3_close('@row.receipt_id');" id="firstTab">
<span class="w3-opacity w3-

large"><center>@row.from_officer</center></span>
<h6><center>@row.letter_no</center></h6>
<p style="white-space: nowrap;overflow: hidden;text-overflow:
ellipsis;"><center>@row.Sent_time</center></p>
</div>
</a>
}
</div>
<a id="myBtn1" onclick="myFunc('Demo2')" href="javascript:void(0)" class="w3-bar-

item w3-button"><i class="fa fa-inbox w3-margin-right"></i>Outbox<i class="fa fa-caret-
down w3-margin-left"></i></a>
@{
// string Demo = Session["User"].ToString();
//var db = Database.Open("DAK_Data");
var selectQueryString1 = "SELECT * FROM Receipt_Table WHERE [From]=\'" +
Demo + "\'";
foreach (var row in db.Query(selectQueryString1))
{
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-
bottom test w3-hover-light-grey"
onclick="openMail('@row.Sent_time');w3_close('@row.receipt_id');" id="firstTab1">
<span class="w3-opacity w3-

large"><center>@row.from_officer</center></span>
<h6><center>@row.letter_no</center></h6>
<p style="white-space: nowrap;overflow: hidden;text-overflow:
ellipsis;"><center>@row.Sent_time</center></p>
</div>
</a>
}
</div>
</nav>
56
[Type text]
Problem :-
Form resubmission and duplicate values in table
Solution:-
PRG technique is used.
Code:-
<form method="post" enctype="multipart/form-data" action="~/Account/inserter.cshtml">
<input class="w3-input w3-border w3-margin-bottom" type="text"
placeholder="Write some tags" name="tags3" onkeypress="return noenter()">

placeholder="receipt ID " name="receipt_ID" pattern="[A-Za-z0-9 ]{4,}" onkeypress="return
noenter()">
placeholder="received from" name="received_from" pattern="[A-Za-z0-9 ]{2,}"
onkeypress="return noenter()">
placeholder="Letter number of receipt " name="letter_Number" pattern="[A-Za-z0-9]{2,}"
<input class="w3-input w3-border w3-margin-bottom" type="date"
placeholder="receipt letter date" name="letter_date" pattern="[0-9]{2}[-]{1}[0-9]{2}[-
]{1}[0-9]{4}" onkeypress="return noenter()">
placeholder="From officer" name="from_officer" pattern="[A-Za-z0-9 ]{2,}"
placeholder="address to" name="addressed_to" pattern="[A-Za-z0-9 ]{2,}"
<input class="w3-input w3-border w3-margin-bottom" type="file"
placeholder="File" name="File" accept="application/pdf" onkeypress="return noenter()" />
<input class="w3-input w3-border w3-margin-bottom"
style="height:150px" placeholder="Subject" name="subject" pattern="[A-Za-z0-9 ]{4,}"
onkeypress="return noenter()" />
<div class="w3-section">
<a class="w3-button w3-red"
onclick="document.getElementById('id01').style.display='none'">Cancel <i class="fa fa-
remove"></i></a>
<a class="w3-button w3-light-grey w3-right"
onclick="document.getElementById('id01').style.display = 'none';"><input type="submit"
value="send" /> <i class="fa fa-paper-plane"></i></a>
</div>
</form>
57
[Type text]
Inserter.cshtml
@using System.Text.RegularExpressions;
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
@{
try
{
string test1 = Request["tags3"];

string test = test1.Replace("\"value\":", "").Replace("{", "").Replace("}",
"");
// string json = JsonConvert.SerializeObject(test);
// string[] array = Array.ConvertAll(json.Split(','),String);
string From = Session["User"].ToString();

// string To = Request["To"];
string receiptID = Request["receipt_ID"];
string receivedfrom = Request["received_from"];
string letternumber = Request["letter_Number"];
string letterdate = Request["letter_date"];
string fromofficer = Request["from_officer"];
string addressedto = Request["addressed_to"];
string subject = Request["subject"];
var time = DateTime.Now;
string formattedTime = time.ToString("yyyy, MM, dd, hh, mm, ss");
HttpPostedFileBase file = Request.Files["File"];
byte[] fileInBytes = new byte[file.ContentLength];

using (BinaryReader theReader = new BinaryReader(file.InputStream))
{
fileInBytes = theReader.ReadBytes(file.ContentLength);
}
string pdf = Convert.ToBase64String(fileInBytes);
<p>@test</p>
bool b1 = string.IsNullOrEmpty(receiptID);
if (!b1)
{
foreach (Match match in Regex.Matches(test, "\"([^\"]*)\""))
{
string to = match.ToString();
to = to.Replace("\"","");
var insertquery = "insert into Receipt_Table values(\'" + time +
"\',\'" + receiptID + "\',\'" + letternumber + "\',\'" + letterdate + "\',\'" +
fromofficer + "\',\'" + addressedto + "\',\'" + pdf + "\',\'" + subject + "\',\'" +
receivedfrom + "\',\'" + to + "\',\'" + From + "\')";
}
58
[Type text]
Response.Redirect("Home.cshtml");
}
}
catch (Exception e)
{
<p>@e</p>
}
</body>
</html>
Problem:-
Send mail to multiple users at a time
Solution:-
Usage of tagify and tags for clear distinction
Code:-
<script data-name="advance-options">
(function () {
var input = document.querySelector('input[name=tags3]'),
tagify = new Tagify(input, {
delimiters: ",| ", // add new tags when a comma or a space character
suggestionsMinChars: 3,
maxTags: 6,
blacklist: ["fuck", "shit", "pussy"],
keepInvalidTags: true, // do not remove invalid tags (but keep them
marked as invalid)
whitelist: ["temple", "stun", "detective", "sign", "passion",
"routine", "deck", "discriminate", "relaxation", "fraud", "attractive", "soft",
"forecast", "point", "thank", "stage", "eliminate", "effective", "flood", "passive",
"skilled", "separation", "contact", "compromise", "reality", "district", "nationalist",
"leg", "porter", "conviction", "worker", "vegetable", "commerce", "conception",
"particle", "honor", "stick", "tail", "pumpkin", "core", "mouse", "egg", "population",
"unique", "behavior", "onion", "disaster", "cute", "pipe", "sock", "dialect", "horse",
"swear", "owner", "cope", "global", "improvement", "artist", "shed", "constant", "bond",
"brink", "shower", "spot", "inject", "bowel", "homosexual", "trust", "exclude", "tough",
"sickness", "prevalence", "sister", "resolution", "cattle", "cultural", "innocent",
"burial", "bundle", "thaw", "respectable", "thirsty", "exposure", "team", "creed",
"facade", "calendar", "filter", "utter", "dominate", "predator", "discover", "theorist",
"hospitality", "damage", "woman", "rub", "crop", "unpleasant", "halt", "inch",
"birthday", "lack", "throne", "maximum", "pause", "digress", "fossil", "policy",
"instrument", "trunk", "frame", "measure", "hall", "support", "convenience", "house",
"partnership", "inspector", "looting", "ranch", "asset", "rally", "explicit", "leak",
59
[Type text]
"monarch", "ethics", "applied", "aviation", "dentist", "great", "ethnic", "sodium",

"truth", "constellation", "lease", "guide", "break", "conclusion", "button", "recording",
"horizon", "council", "paradox", "bride", "weigh", "like", "noble", "transition",
"accumulation", "arrow", "stitch", "academy", "glimpse", "case", "researcher",
"constitutional", "notion", "bathroom", "revolutionary", "soldier", "vehicle", "betray",
"gear", "pan", "quarter", "embarrassment", "golf", "shark", "constitution", "club",
"college", "duty", "eaux", "know", "collection", "burst", "fun", "animal", "expectation",
"persist", "insure", "tick", "account", "initiative", "tourist", "member", "example",
"plant", "river", "ratio", "view", "coast", "latest", "invite", "help", "falsify",
"allocation", "degree", "feel", "resort", "means", "excuse", "injury", "pupil", "shaft",
"allow", "ton", "tube", "dress", "speaker", "double", "theater", "opposed", "holiday",
"screw", "cutting", "picture", "laborer", "conservation", "kneel", "miracle", "brand",
"nomination", "characteristic", "referral", "carbon", "valley", "hot", "climb",
"wrestle", "motorist", "update", "loot", "mosquito", "delivery", "eagle", "guideline",
"hurt", "feedback", "finish", "traffic", "competence", "serve", "archive", "feeling",
"hope", "seal", "ear", "oven", "vote", "ballot", "study", "negative", "declaration",
"particular", "pattern", "suburb", "intervention", "brake", "frequency", "drink",
"affair", "contemporary", "prince", "dry", "mole", "lazy", "undermine", "radio",
"legislation", "circumstance", "bear", "left", "pony", "industry", "mastermind",
"criticism", "sheep", "failure", "chain", "depressed", "launch", "script", "green",
"weave", "please", "surprise", "doctor", "revive", "banquet", "belong", "correction",
"door", "image", "integrity", "intermediate", "sense", "formal", "cane", "gloom",
"toast", "pension", "exception", "prey", "random", "nose", "predict", "needle",
"satisfaction", "establish", "fit", "vigorous", "urgency", "X-ray", "equinox", "variety",
"proclaim", "conceive", "bulb", "vegetarian", "available", "stake", "publicity",
"strikebreaker", "portrait", "sink", "frog", "ruin", "studio", "match", "electron",
"captain", "channel", "navy", "set", "recommend", "appoint", "liberal", "missile",
"sample", "result", "poor", "efflux", "glance", "timetable", "advertise", "personality",
"aunt", "dog"],
transformTag: transformaTag
})
function transformaTag(value) {
if (value == 'shit')
return 's✲✲t';
}
})()
</script>
60
[Type text]
Problem:-
Tracker needs a clear interface , but number of stages in it are not constant.
Solution:-
Usage of even odd rule and set each stage on either side of a line like a chat bubble.
Code:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}

.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}

.timeline::after {
content: '';
position: absolute;
width: 6px;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */

.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */

.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
61
[Type text]
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */

.left {
left: 0;
}
/* Place the container to the right */

.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */

.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */

.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
}
/* Fix the circle for containers on the right side */

.right::after {
left: -16px;
}
/* The actual content */

.content {
padding: 20px 30px;
position: relative;
border-radius: 6px;
}
62
[Type text]
/* Media queries - Responsive timeline on screens less than 600px wide */

media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after
{
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */

.container::before {
left: 60px;
}
/* Make sure all circles are at the same spot */

.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */

.right {
left: 0%;
}
}
</style>
</head>
<body>
@{
string rid = Request["id"];
var selectQueryString1 = "SELECT * FROM Action WHERE [receiptID]=\'" + rid +

"\'";
// int[] uid ;
var list = new List<int>();
var list1 = new List<string>();
int i = 0;
63
[Type text]
foreach (var row in db.Query(selectQueryString1))

{
list1.Add(row.receiptID);
list2.Add(row.stage);
list3.Add(row.remarks);
list4.Add(row.dremarks.ToString("yyyyMMdd"));
list5.Add(row.sectionname);
list6.Add(row.addressedto);
list7.Add(row.action);
list8.Add(row.time.ToString("yyyyMMdd"));
//uid[i] = row.uid;
list.Add(row.uid);
i++;
}
int[] uid = list.ToArray();

string[] receiptID = list1.ToArray();
string[] stage = list2.ToArray();
string[] remarks = list3.ToArray();
string[] dremarks = list4.ToArray();
string[] section = list5.ToArray();
string[] address = list6.ToArray();
string[] action = list7.ToArray();
string[] time = list8.ToArray();
for (int j = 0; j < uid.Length; j++)
{
try
{
if (j % 2 == 0)
{
<h2>@receiptID[j]</h2>
<p>@stage[j]</p>
<p>@remarks[j]</p>
<p>@dremarks[j]</p>
<p>@action[j]</p>
<button onclick="forward_form('@receiptID[j]')">Take
Action</button>
</div>
</div>
</div>
}
else
{
<h2>@receiptID[j]</h2>
<p>@stage[j]</p>
<p>@remarks[j]</p>
<p>@dremarks[j]</p>
<p>@action[j]</p>
64
[Type text]
<button onclick="forward_form('@receiptID[j]')">Take
Action</button>
</div>
</div>
</div>
}
}
catch (Exception e)
{
<h1>@j</h1>
}
<script>
function forward_form(id) {
sessionStorage.setItem("rid", id);
// document.cookie = "rid ="+id+";";

window.location.href = "Forward.cshtml";
}
</script>
</body>
</html>
Problem:-
Receipt ID should be auto populated in action form.
Solution:-
Usage of session variables and read only
Code:-
@{
if (IsPost)
{
string receiptID = Request["Receipt"];

string stage1 = Request["Stage"];
string remarks1 = Request["Stage_Remarks"];
string dremarks1 = Request["Date_Of_Remarks"];
65
[Type text]
string sectionname = Request["Section name"];

string addressedto = Request["Addressed to"];
string action = Request["Action"];
var time = DateTime.Now;
var insertquery = "insert into Action values(\'" + receiptID + "\',\'" +
stage1 + "\',\'" + remarks1 + "\',\'" + dremarks1 + "\',\'" + sectionname + "\',\'" +
addressedto + "\',\'" + action + "\',\'" + time + "\')";
Session["id"] = receiptID;
Response.Redirect("forward_inserter.cshtml");
}
else
{
<form method="post">
<div class="w3-row-padding" style="margin:0 -10px 8px

10px">
<h1><center> <b>A C T I O N</b></center></h1><br>

<center>
<b>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML
= d;
</script>
</b>
</center>
<div>

placeholder="Receipt" name="Receipt" value="a" readonly>
</div> <br>
<div>
placeholder="Stage 1" name="Stage" pattern="[A-Za-z]{4,}">
</div> <br>
<div>
placeholder="Satge 1 Remarks " name="Stage_Remarks" pattern="[A-Za-z]{4,}">
66
[Type text]
</div> <br>
<div>
<div>
<input class="w3-input w3-border" type="date"
placeholder="Date Of Remarks1" name="Date_Of_Remarks" pattern="[0-9]{2}[-]{1}[0-9]{2}[-
]{1}[0-9]{4}">
</div> <br>
<div>
<input class="w3-input w3-border"
type="text" placeholder="Section name " name="Section name" pattern="[A-Za-z]{4,}">
</div> <br>
<div>
<input class="w3-input w3-border"
type="text" placeholder="address to" name="Addressed to" pattern="[A-Za-z]{4,}">
</div> <br>
<div>
<p>Action Type</p><center>
<select name="Action">
<option
value="Information">Information</option>
<option
value="Forward">Forward</option>
<option
value="Reply">Reply</option>
<option
value="Compliance">Compliance</option>
<option value="Reply +
Compliance">Reply + Compliance</option>
</select>
<br><br>
<center>
<button class="button button1">S
U B M I T </button>
</center>
</form>
</div>
}
}
67
[Type text]
<script>
document.getElementsByName("Receipt")[0].value = sessionStorage.getItem("rid");
</script>
Problem:-
No clear difference between read and unread messages.
Solution:-
Create a column read/unread with true and false values in it.
Code:-
@{
string rid = Request["id"];
var updateRead = "Update Receipt_Table set [read]=\'true\' where [receipt_id]=\'"
+ rid + "\'";
db.Query(updateRead);
Response.Redirect("home.cshtml");
}
Problem:-
If we have many mails , it will be difficult to search the required letter in it.
Solution:-
Create a search functionality using letter number.
Code:-
@{
if (IsPost)
{
string search = Request["search"];
Session["search"] = search;
Response.Redirect("Search.cshtml");
}
else
{
<form method="post">
<input type="text" name="search" placeholder="Search..">
<button>submit</button>
<!---<input type="button" name="submit" value="submit" onclick="rs()" />-
->
</form>
}
68
[Type text]
string Demo = Session["User"].ToString();

string no = Session["search"].ToString();
var selectQueryString = "SELECT * FROM Receipt_Table WHERE [From]=\'"
+ Demo + "\'" + " AND [letter_no]=\'" + no + "\'";
Problem :-
Unable to download file using href
Solution:-
Using base64 encoding
Code:-
HttpPostedFileBase file = Request.Files["File"];
byte[] fileInBytes = new byte[file.ContentLength];

using (BinaryReader theReader = new BinaryReader(file.InputStream))
{
fileInBytes = theReader.ReadBytes(file.ContentLength);
}
string pdf = Convert.ToBase64String(fileInBytes);
69
[Type text]
9. Summary:
Functions of clerk/admin
1. Physically receives the letter and fills all the details in the receipt page.
2. Sends the receipt to the person in the addressed to column.
3. Can send the receipt to multiple persons.
4. Can add more names in received from in receipt form.
5. Can track the letter.
6. Can search the sent letter.
Functions of a user
1. Receives the letter from different places via clerk.

2. Decides whether to store it as information or forward to the next person.
3. Gives his remarks with the date.
4. Only the first person who receives the letter can set the target date.
5. After the letter is forwarded the current user can see the previous person’s
remarks and give his remarks to it.
6. The user can forward it to some other user or can dispatch the letter.
7. Can track the letter.
8. Can search both received and sent letters.
70
[Type text]
10. Biblography:
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_mail&stacked=h
https://www.w3schools.com/asp/webpages_razor.asp
https://www.w3schools.com/asp/webpages_forms.asp
https://en.wikipedia.org/wiki/Microsoft_Visual_Studio
71

A Report ON Dak Management System: An Internship Program-II Station

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

A Report ON Dak Management System: An Internship Program-II Station

Încărcat de

Drepturi de autor:

Formate disponibile

[Type text]

FACULTY OF SCIENCE AND TECNOLOGY

1.1 WHAT IS DAK: ……………………………………………………………………………...3

2. EXISTING PROCESS: ………………………………………………………………………6

3. TASK BREAK DOWN: ……………………………………………………………………...7

4. TECHNOLOGIES/LANGUAGES USED: …………………………………………………7

4.1 IIS EXPRESS: ………………………………………………………………………………..7

7. TECHNIQUES USED: ……………………………………………………………………...26

8. CODE ANALYSIS: …………………………………………………………………………49

10. BIBLOGRAPHY: ………………………………………………………………………….71

1.1 WHAT IS DAK?

1.2 HOW DAK MANAGEMENT WORKS?

1.3 BENEFITS OF DAK

o Ensuring the integration of content by secured authorized access to the

o Tracking and tracing incoming and outgoing DAK

o Quick and easy access to the information.

o Make quicker and better decisions to improve efficiency.

o Fast and effective collaboration across the departments.

o Easy and faster generation of various reports

Reply: - It is between same level officers or between sister departments.

Letter can be tracked using DAK management system.

Close the letter

Drawbacks of the Existing System

 Maintenance of voluminous registers.

3. TASK BREAK DOWN:

SQL SERVER MANAGEMENT STUDIO

 Enterprise: Designed for large enterprises with complex data requirements,

In 1970's the product called 'SEQUEL', structured English query language,

Visual Studio is an integrated development environment (IDE). The “integrated”

Visual Studio contains features that complement every aspect of software

The Code editor is where you write your code.

The Solution explorer shows the files you’re working with.

Here’s a high level overview of the most important ones:

Visual Studio organizes projects into solutions. A solution is a collection of

Opening from an existing source control repository

Opening an existing project

Creating a Visual Studio project from existing code

Visual Studio’s IntelliSense makes coding faster by offering contextual

For functions, IntelliSense will also list parameter information.

The following two commands explicitly format your code:

Format Document (Edit ? Advanced ? Format Document, or Ctrl + K, then Ctrl +

Format Selection (Edit ? Advanced ? Format Selection, or Ctrl + K, then Ctrl + F)

Visual Studio’s Go To commands perform a focused search of your code to

To start using Go To commands, use the menu option Edit ? Go To ? Go To All or

To install an extension, select the extension, then click Download.

Visual Studio after installation.

Pages designed for

Post/Redirect/Get (PRG) is a web development design pattern that prevents

HTML Web Storage :-

Before HTML5, application data had to be stored in cookies, included in every

 window.localStorage - stores data with no expiration date

// Check browser support

if (typeof(Storage) !== "undefined") {

document.getElementById("result").innerHTML = "Sorry, your browser does

if(typeof(Storage) !== "undefined") {

document.getElementById("result").innerHTML = "You have clicked the

document.getElementById("result").innerHTML = "Sorry, your browser does

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<p>Click the button to see the counter increase.</p>

W3.CSS is a modern CSS framework with built-in responsiveness. It supports

/* The actual timeline (the vertical ruler) */

/* The actual timeline (the vertical ruler) */

/* Container around content */