Higher Nationals

Internal verification of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BTEC Higher National Diploma in Computing

Assessor Mr. Nusair Internal Verifier Mr. Piragan

Unit(s) Unit 10: Web Design and Development

Assignment title Online Library Management System

Student’s name Mr. Kamalendran Sathurcigan

List which assessment Pass Merit Distinction

criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST

Do the assessment criteria awarded match

those shown in the assignment brief? Y/N

Is the Pass/Merit/Distinction grade awarded

justified by the assessor’s comments on the Y/N
student work?

Has the work been assessed

Y/N
accurately?
Is the feedback to the student:
Give details:

• Constructive?
Y/N
• Linked to relevant assessment
criteria? Y/N

• Identifying opportunities for

improved performance? Y/N

Y/N
• Agreeing actions?
Does the assessment decision need
Y/N
amending?
Assessor signature Date

Internal Verifier signature Date

Programme Leader signature (if
Date
required)
 Confirm action completed
Remedial action taken

Give details:

Assessor signature Date

Internal Verifier
Date
signature
Programme Leader
Date
signature (if required)
Higher Nationals - Summative Assignment Feedback Form
Student Name/ID Mr. Kamalendran Sathurcigan (BAT/A-006688)
Unit Title Unit 10: Website Design & Development
Assignment Number 1 Assessor Mr. Nusair
07/04/2021 Date Received 1st 29/03/2021
Submission Date
submission
Date Received 2nd
Re-submission Date
submission
Assessor Feedback:

LO1. Explain server technologies and management services associated with hosting and managing websites.

Pass, Merit & Distinction P1 P2 M1 M2 D1

Descripts
LO2. Categorise website technologies, tools and software used to develop websites.

Pass, Merit & Distinction P3 P4 M3 D1

Descripts

LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage website.
Pass, Merit & Distinction P5 P6 M4 D2
Descripts

LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & Distinction P7 M5 D3
Descripts

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

* Please note that grade decisions are provisional. They are only confirmed once internal and external moderation has taken place and grades
decisions have been agreed at the assessment board.
Pearson
Higher Nationals in
Computing
Unit 10: Web Design and Development
Assignment 01
General Guidelines
1. A Cover page or title page – You should always attach a title page to your assignment. Use
previous page as your cover sheet and be sure to fill the details correctly.
2. This entire brief should be attached in first before you start answering.
3. All the assignments should prepare using word processing software.
4. All the assignments should print in A4 sized paper, and make sure to only use one side printing.
5. Allow 1” margin on each side of the paper. But on the left side you will need to leave room for
binging.

Word Processing Rules

1. Use a font type that will make easy for your examiner to read. The font size should be 12 point,
and should be in the style of Time New Roman.
2. Use 1.5 line word-processing. Left justify all paragraphs.
3. Ensure that all headings are consistent in terms of size and font style.
4. Use footer function on the word processor to insert Your Name, Subject, Assignment No,
and Page Number on each page. This is useful if individual sheets become detached for any
reason.
5. Use word processing application spell check and grammar check function to help edit your
assignment.

Important Points:
1. Check carefully the hand in date and the instructions given with the assignment. Late
submissions will not be accepted.
2. Ensure that you give yourself enough time to complete the assignment by the due date.
3. Don’t leave things such as printing to the last minute – excuses of this nature will not be
accepted for failure to hand in the work on time.
4. You must take responsibility for managing your own time effectively.
5. If you are unable to hand in your assignment on time and have valid reasons such as illness,
you may apply (in writing) for an extension.
6. Failure to achieve at least a PASS grade will result in a REFERRAL grade being given.
7. Non-submission of work without valid reasons will lead to an automatic REFERRAL. You will
then be asked to complete an alternative assignment.
8. Take great care that if you use other people’s work or ideas in your assignment, you properly
reference them, using the HARVARD referencing system, in you text and any bibliography,
otherwise you may be guilty of plagiarism.
9. If you are caught plagiarising you could have your grade reduced to A REFERRAL or at worst
you could be excluded from the course.
Student Declaration

I hereby, declare that I know what plagiarism entails, namely to use another’s work and to present it
as my own without attributing the sources in the correct way. I further understand what it means to
copy another’s work.

1. I know that plagiarism is a punishable offence because it constitutes theft.

2. I understand the plagiarism and copying policy of the Edexcel UK.
3. I know what the consequences will be if I plagiaries or copy another’s work in any of the
assignments for this program.
4. I declare therefore that all work presented by me for every aspects of my program, will be my
own, and where I have made use of another’s work, I will attribute the source in the correct
way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding
agreement between myself and Edexcel UK.
6. I understand that my assignment will not be considered as submitted if this document is not
attached to the attached.

Student’s Signature: Date:

Sathu25101999@gmail.com 07/04/2021
 Assignment Brief
Student Name /ID Number Mr. Kamalendran Sathurcigan (BAT/A-006688)

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2020/2021

Unit Tutor Mr. Nusair

Assignment Title Online Library Management System

Issue Date 25/08/2020

Submission Date 07/04/2021

IV Name & Date

Submission Format:

Unit Learning Outcomes:

LO1 Explain server technologies and management services associated with hosting and managing
websites.
LO2 Categorise website technologies, tools and software used to develop websites.
LO3 Utilise website technologies, tools and techniques with good design principles to create a
multipage website.
LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance:

Assignment Brief

Borrowing books, returning books or viewing the available books at the Library of the Lowa State
University is currently done manually.
Online Library Management System supports to overcome the above-mentioned problems. This system
would be used by members who may be students or professors of that University to check the availability
of the books and borrow the books., The librarian can update the member details and the book lending
details.
Online Library Management System will include the following information.
• The librarian, students and the professors can register and login to the system
• Any of the above users can update their profile details including the password
• The authorized users can reserve a book for 24hours
• The authorized users can check book availability
• The librarian can check the member status and update the lending details (If the book is for the
lending)
• The system allows the Librarian to create the books catalog, add/delete books and maintain the books
catalog.
• The librarian can update the book return details
• The librarian can calculate the fine for the late returns if necessary
• The users can search the books according to the categories (Novels, Frictions, etc.)

Task 1 - Server technologies and management services associated with hosting and managing
websites (LO1)

1.1 Differentiate the communication protocols, server hardware, operating systems and web server
software with regards to designing, publishing and accessing a website.
1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are structured.
1.3 Analyze the effect of search engines on website performance. Provide evidence-based support for
improving a site’s index value and rank through search engine optimization.
 1.4 Identify and explain the common web development technologies and frameworks. Explain the tools
and techniques chosen to the web application and hence justify, by giving reasons, why a web
application is suitable for the given scenario.

Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

2.1 Define the relationships between front-end and back-end website technologies and explain how the
front-end and the back-end relate to presentation and application layers.
2.2 Critically compare the different between online website creation tools and custom-built sites.
Consider Followings: design flexibility, performance, functionality, User Experience (UX) and
User Interface (UI).
2.3 Compare and contrast the tools and techniques available to design and develop a custom-built web
Applications.

Task 3 - Utilize website technologies, tools and techniques with good design principles to create a
multipage website (LO3)

3.1 Design a suitable web application solution for the given scenario. Provide evidences of the design,
multipage website supported with fidelity wireframes and a full set of client and user requirements.
Use your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design

3.2 Implement the designed system using PHP, JS and MySQL. Screenshots of important code lines with
proper comments and user interfaces filled with sample data must be attached to the documentation.
Apply a database design for the proposed system and provide the well normalized database design of
the proposed system.

3.3 Critically evaluate the web design and development process against your design document and analyse
any technical challenges you faced in development.
 Task 4 - Create and use a Test Plan to review the performance and design of a multipage website
(LO4)

4.1 Evaluate the Quality Assurance (QA) process and review how it was implemented during your design
and development stages.
QA process is expected to discover design issues and development errors while testing a product’s user
interface (UI) and gauging the user experience (UX).
4.2 Critically evaluate the results of your Test Plan and include a review of the overall success of your
multipage website; use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvement.
4.3 Prepare a user documentation to properly guide the users of the implemented system.
Note: User documentation should be simple and understandable by anyone. Use screenshots and
provide stepwise guidance.
 Grading Rubric
Grading Criteria Achieved Feedback

LO1 Explain server technologies and management services associated with

hosting and managing websites

P1 Identify the purpose and types of DNS, including explanations on how domain
names are organized and managed.
P2 Explain the purpose and relationships between communication protocols,
server hardware, operating systems and web server software with regards to
designing, publishing and accessing a website.
M1 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and
management.
M2 Review the influence of search engines on website performance and provide
evidence-based support for improving a
site’s index value and rank through search engine optimization.
D1 Justify the tools and techniques chosen to realize a custom built
website.
LO2 Categories website technologies, tools and
software used to develop websites

P3 Discuss the capabilities and relationships between front-end and back-end

website technologies and explain how these relate to presentation and
application layers.
P4 Discuss the differences between online website creation tools and custom
built sites with regards to design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI).

M3 Evaluate a range of tools and techniques available to design and develop a

custom built website.
LO3 Utilize website technologies, tools and techniques
with good design principles to create a multipage
website

P5 Create a design document for a branded, multipage website supported with

medium fidelity wireframes and a full set of client and user
requirements.
P6 Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with realistic
content.
 M4 Compare and contrast the multipage website created to the design
document.

D2 Critically evaluate the design and development process against your

design document and analyse any technical challenges.
LO4 Create and use a Test Plan to review the
performance and design of a multipage website

P7 Create a suitable Test Plan identifying key performance areas and

use it to review the functionality and performance of your website.
M5 Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
D3 Critically evaluate the results of your Test Plan and include a review of
the overall success of your multipage website; use this evaluation to
explain any areas of success and provide justified recommendations for
areas that require improvement.
 Observation Sheet

Activity Activity Learning Feedback

No Outcome (Pass/ Redo)
1 Explain server technologies and LO1
management services associated
with hosting and managing
websites.
2 categorize website technologies, LO2
tools and software used to develop
websites.
3 Utilize website technologies, tools LO3
and techniques with good design
principles to create a multipage
website.
4 Create and use a Test Plan to LO4
review the performance and
design of a
multipage website.

Comments:

Assessor Name :…………………………………………….

Date :…………………………………………….
Assessor Signature :…………………………………………….
Acknowledgement
First of all, I would like to express my first gratitude to Esoft and all its employees for being
the source of the life of many students by giving a degree as external. I am happy that my
software engineer dream will be fulfilled by Esoft. I express my gratitude to my parents,
colleagues, especially Esoft lecturers for this. And I am happy for Esoft gives a way of
obtaining a British degree in Sri Lanka.

As specially taught the Web design and development course and helped to solve all doubts
concerning the lesson of the students also helped to make the Web design and development
assignment systematic through his help, for these things Nusair sir I extend my sincere
gratitude.

K.Sathurcigan Unit 10 Web Design And Development 1

Table of content
Acknowledgement ..................................................................................................................... 1

Table of content ......................................................................................................................... 2

Table of Figures ......................................................................................................................... 8

Table of Tables ........................................................................................................................ 13

Activity 01 ............................................................................................................................... 15

1.1 Differentiate the communication protocols, server hardware, operating systems and web
server software with regards to designing, publishing and accessing a website. ................ 15

1.1.1 Protocol ................................................................................................................... 15

1.1.2 Server Hardware ..................................................................................................... 19

Types of Server Hardware ........................................................................................... 19

1.1.3 Operating system..................................................................................................... 21

Types of the Operating Systems .................................................................................. 22

The importance of the Operating System .................................................................... 23

1.1.4 Relationship between the communication protocols, server hardware, operating

systems and web server software with regards to designing, publishing and accessing a
website. ............................................................................................................................ 23

1.2 Define the types of DNS and the uses of it, with clarifications on how domain names are
structured.............................................................................................................................. 25

1.2.1 DNS (Domain Name System) ................................................................................. 25

1.2.2 How does the DNS work ........................................................................................ 25

Types of DNS............................................................................................................... 27

1.2.3 Domain Structure .................................................................................................... 28

Top-level Domain ........................................................................................................ 28

Sub-Domain ................................................................................................................. 31

Domain Name .............................................................................................................. 31

1.3 Analyze the effect of search engines on website performance. Provide evidence-based
support for improving a site’s index value and rank through search engine optimization. . 32

K.Sathurcigan Unit 10 Web Design And Development 2

 1.3.1 Search Engine ......................................................................................................... 32

1.3.2 Usage of Search Engine .......................................................................................... 32

1.3.3 Search Engine Optimization (SEO) ........................................................................ 34

1.3.4 Evidence for SEO.................................................................................................... 34

1. Unique pharmacy online shop.................................................................................. 36

2. S.K Medical Shop .................................................................................................... 37

Comparison between the both websites ....................................................................... 39

1.4 Identify and explain the common web development technologies and frameworks.
Explain the tools and techniques chosen to the web application and hence justify, by giving
reasons, why a web application is suitable for the given scenario....................................... 40

1.4.1 Web Application Technologies and Frameworks ................................................... 40

1. Web Application Technologies ................................................................................ 40

Importance of the common Web Development Technologies ................................. 42

2. Web Application Frameworks ................................................................................. 42

Difference between Web Application and Desktop Application ................................. 45

The Reason for choosing a specific Web Application Technology and Framework,
XAMPP and Sublime Text editor for create the LOWA online Library web-based
application. ................................................................................................................... 46

Activity 02 ............................................................................................................................... 47

2.1 Define the relationships between front-end and back-end website technologies and
explain how the front-end and the back-end relate to presentation and application layers. 47

2.1.1 Front-End Development and Back-End development ............................................ 47

Front-End Development ............................................................................................... 47

Back-End Development ............................................................................................... 47

2.1.2 Three Tier Application Architecture ....................................................................... 48

Presentation Layer........................................................................................................ 48

Application Layer ........................................................................................................ 49

Data Layer .................................................................................................................... 49

K.Sathurcigan Unit 10 Web Design And Development 3

 2.2.3 Relationship between Front-end and Back-end ...................................................... 50

2.2 Critically compare the different between online website creation tools and custom-built
sites. Consider Followings: design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI). .............................................................................................. 51

2.2.1 Online Website Creation Tools (Website Builders) ............................................... 51

2.2.2 Custom-built Sites ................................................................................................... 53

Pros and Cons of the Custom-built Websites............................................................... 53

2.2.3 Comparation Between Online website creation tools and Custom-built sites ........ 54

2.3 Compare and contrast the tools and techniques available to design and develop a custom-
built web Applications. ........................................................................................................ 56

2.3.1 Browser Selection ................................................................................................... 56

Reason for choosing the Mozilla Firefox browser ....................................................... 57

2.3.2 Front-End Framework Selection ............................................................................. 58

Reason for choosing the Bootstrap Frame work .......................................................... 59

2.3.3 Selection of Back-end development ....................................................................... 59

1. Php ........................................................................................................................... 59

2. MySQL..................................................................................................................... 60

2.3.4 Selection of Text editor ........................................................................................... 61

Activity 03 ............................................................................................................................... 63

3.1 Design a suitable web application solution for the given scenario. Provide evidences of
the design, multipage website supported with fidelity wireframes and a full set of client and
user requirements. Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with realistic content. ....... 63

3.1.1 Design Document for Online Library Management System .................................. 63

3.1.2 User Requirements of the Library Management System ........................................ 78

User Requirement ........................................................................................................ 78

User Requirement of the LOWA Library System ....................................................... 78

3.1.3 System Requirements of the Library Management System .................................... 79

K.Sathurcigan Unit 10 Web Design And Development 4

 Functional Requirements ............................................................................................. 79

Non-functional Requirements ...................................................................................... 81

3.1.4 Wireframe for LOWA library System .................................................................... 82

1. Login page................................................................................................................ 83

2. Dashboard ................................................................................................................ 83

3. Book Module............................................................................................................ 84

4. Reservation............................................................................................................... 86

5. Lend ......................................................................................................................... 86

6. Return ....................................................................................................................... 87

3.2 Implement the designed system using PHP, JS and MySQL. Screenshots of important
code lines with proper comments and user interfaces filled with sample data must be attached
to the documentation. Apply a database design for the proposed system and provide the well
normalized database design of the proposed system. .......................................................... 88

3.2.1 Used, Programming Languages for the System Implementation ........................... 88

1. In Web-based Application Creation ......................................................................... 88

PHP .......................................................................................................................... 88

JavaScript ................................................................................................................. 88

HTML and CSS ....................................................................................................... 89

2. In Database Creation for the System ........................................................................ 89

MySQL..................................................................................................................... 89

3. Source Code Editor for use in System creation ....................................................... 89

Sublime Text Editor ................................................................................................. 89

4. Framework for use in System implementation ........................................................ 90

Bootstrap .................................................................................................................. 90

3.2.2 Code line Explanation ............................................................................................. 90

Front-End Development ............................................................................................... 90

1. Template for the System ...................................................................................... 90

Back-End Development ............................................................................................... 91

K.Sathurcigan Unit 10 Web Design And Development 5

 1. Make database connection ................................................................................... 91

2. Retrieving data from the Database ....................................................................... 92

3. Denial of Access to Persons not Registered in the System .................................. 93

3.2.3 Normalization for Create the Database of the System ............................................ 95

3.2.4 Database of the System ........................................................................................... 99

3.2.5 Interfaces of the system......................................................................................... 100

3.3 Critically evaluate the web design and development process against your design
document and analyze any technical challenges you faced in development. .................... 111

3.3.1 Overview for the Web design of LOWA Online Library ..................................... 111

3.3.2 Comparison between the UI design and Actual Interface of the LOWA Online
Library Application ........................................................................................................ 111

1. Login Form Comparison ........................................................................................ 111

2. Dashboard Comparison .......................................................................................... 112

3. New Record Creating Form Comparison............................................................... 112

4. View Form for the Stored data Comparison .......................................................... 113

5. Update Form Comparison ...................................................................................... 113

3.3.3 Critically evaluation of the design and development process against the design
document ........................................................................................................................ 114

3.3.4 Reason for the deviations between the UI design and Actual Interface of the
application (Technical issues and others) ...................................................................... 115

Activity 04 ............................................................................................................................. 116

4.1 Evaluate the Quality Assurance (QA) process and review how it was implemented during
your design and development stages.................................................................................. 116

4.1.1 Quality Assurance (QA)........................................................................................ 116

4.1.2 Why the Quality Assurance is important for LOWA Online Library System ...... 116

4.1.3 Method for Quality Assurance Implemented in the LOWA Online Library System
........................................................................................................................................ 117

Feedback Form ........................................................................................................... 117

K.Sathurcigan Unit 10 Web Design And Development 6

 Results for Feedback Form’ Questionnaires .............................................................. 118

A/B Testing ................................................................................................................ 120

Result for the A/B Testing ......................................................................................... 121

4.2 Critically evaluate the results of your Test Plan and include a review of the overall
success of your multipage website; use this evaluation to explain any areas of success and
provide justified recommendations for areas that require improvement. .......................... 122

4.2.1 Test Plan ................................................................................................................ 122

4.2.2 Test case ................................................................................................................ 122

4.2.3 Modules of the LOWA Online Library System .................................................... 122

1. Login Module ......................................................................................................... 122

2. User Type Module ................................................................................................. 124

3. User Module ........................................................................................................... 126

4. Author Module ....................................................................................................... 128

5. Book Type Module ................................................................................................ 130

6. Book Module.......................................................................................................... 132

7. Reservation Module ............................................................................................... 133

8. Lend Module .......................................................................................................... 134

9. Return Module ....................................................................................................... 136

10. Logout .................................................................................................................. 137

4.2.4 Required Improvements for the LOWA Online Library System .......................... 138

4.3 Prepare a user documentation to properly guide the users of the implemented system.
............................................................................................................................................ 140

User Guide for Admin (Librarian) ................................................................................. 140

User Guide for Others (Students / Professors) ............................................................... 163

Conclusion ............................................................................................................................. 173

Self-Criticism ......................................................................................................................... 174

Gantt Chart ............................................................................................................................. 175

References .............................................................................................................................. 176

K.Sathurcigan Unit 10 Web Design And Development 7

Table of Figures
Figure 1 The Importance of the OS ......................................................................................... 23
Figure 2 Website Publishing and Accessing ............................................................................ 24
Figure 3 Function of DNS ........................................................................................................ 25
Figure 4 Domain Structure ....................................................................................................... 28
Figure 5 Examples for Search Engines .................................................................................... 32
Figure 6 Suggestions displayed automatically by the search engine ....................................... 33
Figure 7 Consume time for search ........................................................................................... 33
Figure 8 Search results ............................................................................................................. 34
Figure 9 Results of the Search ................................................................................................. 35
Figure 10 Unique Pharmacy SEO result – 1 ............................................................................ 36
Figure 11 Unique Pharmacy SEO result – 2 ............................................................................ 36
Figure 12 Unique Pharmacy SEO result – 3 ............................................................................ 37
Figure 13 S.K Medical Shop SEO result - 1 ............................................................................ 37
Figure 14 S.K Medical Shop SEO result - 2 ............................................................................ 38
Figure 15 S.K Medical Shop SEO result - 3 ............................................................................ 38
Figure 16 Web Application Technologies ............................................................................... 40
Figure 17 Web Application Frameworks ................................................................................. 42
Figure 18 Front-End Development .......................................................................................... 47
Figure 19 Back-End development............................................................................................ 47
Figure 20 Three-Tier Architecture ........................................................................................... 48
Figure 21 Relationship between Front-end Back-end development ........................................ 50
Figure 22 Online Website creation Tool .................................................................................. 51
Figure 23 WordPress' Dashboard ............................................................................................. 51
Figure 24 Wix Dashboard ........................................................................................................ 52
Figure 25 Weebly Dashboard .................................................................................................. 52
Figure 26 Blogger Dashboard .................................................................................................. 52
Figure 27 Custom-built Websites ............................................................................................ 53
Figure 28 Utility Comparison between the Browsers .............................................................. 56
Figure 29 Portability Comparison between the Browsers ....................................................... 56
Figure 30 Chart view comparison between the browsers ........................................................ 57
Figure 31 Framework Competition .......................................................................................... 59
Figure 32 Competition between the programming languages ................................................. 60

K.Sathurcigan Unit 10 Web Design And Development 8

Figure 33 The Usage of the MySQL ........................................................................................ 61
Figure 34 Interface of the Sublime Text Editor ....................................................................... 61
Figure 35 Use case Diagram .................................................................................................... 71
Figure 36 DFD Diagram .......................................................................................................... 72
Figure 37 ER Diagram ............................................................................................................. 73
Figure 38 Site Map ................................................................................................................... 74
Figure 39 Activity Diagram ..................................................................................................... 75
Figure 40 Sequence Map for LOWA Online Library .............................................................. 76
Figure 41 Time Line ................................................................................................................ 77
Figure 42 User privileges in the LOWA Library System ........................................................ 78
Figure 43 Adobe XD ................................................................................................................ 82
Figure 44 Login (Wireframe) ................................................................................................... 83
Figure 45 Dashboard (Wireframe) ........................................................................................... 83
Figure 46 Book Create a page (Wireframe) ............................................................................. 84
Figure 47 Book view page (Wireframe) .................................................................................. 84
Figure 48 Book edit page (Wireframe) .................................................................................... 85
Figure 49 Book delete Confirmation (Wireframe) .................................................................. 85
Figure 50 Reservation page (Wireframe)................................................................................. 86
Figure 51 Lend page (Wireframe) ........................................................................................... 86
Figure 52 Return page (Wireframe) ......................................................................................... 87
Figure 53 Usage of JavaScript ................................................................................................. 88
Figure 54 Sublime Text Editor................................................................................................. 89
Figure 55 Bootstrap framework ............................................................................................... 90
Figure 56 Template of the system ............................................................................................ 90
Figure 57 Database Connection ............................................................................................... 91
Figure 58 The Data retrieving method from the Database ....................................................... 92
Figure 59 INSERT Query ........................................................................................................ 92
Figure 60 SELECT Query........................................................................................................ 93
Figure 61 UPDATE Query ...................................................................................................... 93
Figure 62 DELETE Query ....................................................................................................... 93
Figure 63 User Validation ........................................................................................................ 93
Figure 64 Logout page ............................................................................................................. 94
Figure 65 Access Restriction ................................................................................................... 94
Figure 66 Un-Normalization Form .......................................................................................... 96

K.Sathurcigan Unit 10 Web Design And Development 9

Figure 67 1st Normalization Form ........................................................................................... 96
Figure 68 2nd Normalization Form ......................................................................................... 97
Figure 69 3rd Normalization Form for User ............................................................................ 97
Figure 70 3rd Normalization Form for Book ........................................................................... 97
Figure 71 3rd Normalization Form for Reserve ....................................................................... 98
Figure 72 3rd Normalization Form for Lend ........................................................................... 98
Figure 73 3rd Normalization Form for Book Return ............................................................... 98
Figure 74 3rd Normalization Form for Fine ............................................................................ 99
Figure 75 Database of the LOWA Online Library System ...................................................... 99
Figure 76 Database Interconnections ..................................................................................... 100
Figure 77 Login page ............................................................................................................. 100
Figure 78 Dashboard .............................................................................................................. 101
Figure 79 Create New User Type .......................................................................................... 101
Figure 80 User Type View ..................................................................................................... 102
Figure 81 Create New User .................................................................................................... 102
Figure 82 Users View ............................................................................................................ 103
Figure 83 Update User Profile ............................................................................................... 103
Figure 84 Create New Author ................................................................................................ 104
Figure 85 Author View .......................................................................................................... 104
Figure 86 Create Book Type .................................................................................................. 105
Figure 87 Book type View ..................................................................................................... 105
Figure 88 Create Book ........................................................................................................... 106
Figure 89 Book View ............................................................................................................. 106
Figure 90 Update Book Fields ............................................................................................... 107
Figure 91 Update Book Image ............................................................................................... 107
Figure 92 Reserve books ........................................................................................................ 108
Figure 93 My Reservation page ............................................................................................. 108
Figure 94 Lend page .............................................................................................................. 109
Figure 95 Lend History page ................................................................................................. 109
Figure 96 Return Page............................................................................................................ 110
Figure 97 Return History ....................................................................................................... 110
Figure 98 Comparison for the Login Form ............................................................................ 111
Figure 99 Comparison for Dashboard .................................................................................... 112
Figure 100 Comparison for Create Form ............................................................................... 112

K.Sathurcigan Unit 10 Web Design And Development 10

Figure 101 Comparison for View Form ................................................................................. 113
Figure 102 Comparison for Update Form .............................................................................. 113
Figure 103 Feedback form for Find the Quality of the LOWA Online Library System ....... 117
Figure 104 1st Result ............................................................................................................. 118
Figure 105 2nd Result ............................................................................................................ 118
Figure 106 3rd Result ............................................................................................................. 118
Figure 107 4th Result ............................................................................................................. 119
Figure 108 5th Result ............................................................................................................. 119
Figure 109 Final Result .......................................................................................................... 119
Figure 110 A/B Testing.......................................................................................................... 120
Figure 111 Result for A/B Testing ......................................................................................... 121
Figure 112 Login page of the system ..................................................................................... 142
Figure 113 Dashboard ............................................................................................................ 143
Figure 114 Sidebar ................................................................................................................. 144
Figure 115 Navigation bar ..................................................................................................... 144
Figure 116 Data Table............................................................................................................ 145
Figure 117 New User Type Creation ..................................................................................... 145
Figure 118 User Type view page ........................................................................................... 146
Figure 119 User Type Update page ....................................................................................... 146
Figure 120 View & Delete User Type ................................................................................... 147
Figure 121 Delete Confirmation Message ............................................................................. 147
Figure 122 Create Users ......................................................................................................... 148
Figure 123 Field for Create User ........................................................................................... 148
Figure 124 Users View .......................................................................................................... 149
Figure 125 Button Operations in Users module..................................................................... 150
Figure 126 Users Edit page .................................................................................................... 150
Figure 127 Profile picture update........................................................................................... 151
Figure 128 Delete User .......................................................................................................... 151
Figure 129 Insert Book Type ................................................................................................. 152
Figure 130 View Book Type .................................................................................................. 152
Figure 131 Create Author ...................................................................................................... 153
Figure 132 Fields for Authors creation .................................................................................. 153
Figure 133 Author View ........................................................................................................ 154
Figure 134 Create Book ......................................................................................................... 154

K.Sathurcigan Unit 10 Web Design And Development 11

Figure 135 Book view ............................................................................................................ 156
Figure 136 Reservable Books ................................................................................................ 157
Figure 137 My Reservation.................................................................................................... 158
Figure 138 Lend list ............................................................................................................... 158
Figure 139 Lend Confirmation .............................................................................................. 159
Figure 140 Lend History ........................................................................................................ 159
Figure 141 Return list ............................................................................................................ 160
Figure 142 Login page of the system ..................................................................................... 165
Figure 143 Dashboard ............................................................................................................ 166
Figure 144 Sidebar ................................................................................................................. 167
Figure 145 Navigation bar ..................................................................................................... 167
Figure 146 Create Users ......................................................................................................... 168
Figure 147 Field for Create User ........................................................................................... 168
Figure 148 Users Edit page .................................................................................................... 169
Figure 149 Profile picture update........................................................................................... 170
Figure 150 Reservable Books ................................................................................................ 170
Figure 151 My Reservation.................................................................................................... 171
Figure 152 Gantt chart ........................................................................................................... 175

K.Sathurcigan Unit 10 Web Design And Development 12

Table of Tables
Table 1 Examples for Protocols ............................................................................................... 15
Table 2 Types of Operating System ......................................................................................... 22
Table 3 Examples for Top-level Domain ................................................................................. 29
Table 4 Comparison between the websites .............................................................................. 39
Table 5 Importance of the web development technologies ...................................................... 42
Table 6 Examples for Frameworks .......................................................................................... 43
Table 7 Comparison between Web Application and Desktop Application ............................. 45
Table 8 The Reason for XAMPP and Bootstrap selection in the development ....................... 46
Table 9 Comparison between Online creation tools And Custom-built websites ................... 54
Table 10 Comparison between the Front-end Frameworks ..................................................... 58
Table 11 Comparison between the PHP, Ruby and Python ..................................................... 59
Table 12 Architecture based comparison ................................................................................. 60
Table 13 Features of the Sublime Text Editor ......................................................................... 62
Table 14 Job roles and Responsibilities ................................................................................... 65
Table 15 Milestone................................................................................................................... 68
Table 16 Login action sequences ............................................................................................. 80
Table 17 Book Reserving Action Sequences ........................................................................... 80
Table 18 Lend Action Sequences ............................................................................................. 81
Table 19 Difference between the UI and Interface ................................................................ 114
Table 20 Test Plan for Login page ......................................................................................... 122
Table 21 Test Case for Login page ........................................................................................ 123
Table 22 Test Plan for User Type Module ............................................................................. 124
Table 23 Test Case for User Type Module ............................................................................ 124
Table 24 Test Plan for User Module ...................................................................................... 126
Table 25 Test Case for User Module ..................................................................................... 126
Table 26 Test Plan for Author Module .................................................................................. 128
Table 27 Test Case for Author Module ................................................................................. 129
Table 28 Test Plan for Book Type Module............................................................................ 130
Table 29 Test Case for Book Type Module ........................................................................... 131
Table 30 Test Plan for Book Module ..................................................................................... 132
Table 31 Test Case for Book Module .................................................................................... 132
Table 32 Test Plan for Reservation Module .......................................................................... 133

K.Sathurcigan Unit 10 Web Design And Development 13

Table 33 Test Case for Reservation Module .......................................................................... 134
Table 34 Test Plan for Lend Module ..................................................................................... 134
Table 35 Test Case for Lend Module..................................................................................... 135
Table 36 Test Plan for Return Module................................................................................... 136
Table 37 Test Case for Return Module .................................................................................. 136
Table 38 Test Plan for Logout ............................................................................................... 137
Table 39 Test Case for Logout ............................................................................................... 138
Table 40 Details about the User ............................................................................................. 149
Table 41 Details about the Author ......................................................................................... 153
Table 42 Details about the User ............................................................................................. 169

K.Sathurcigan Unit 10 Web Design And Development 14

Activity 01

1.1 Differentiate the communication protocols, server hardware, operating

systems and web server software with regards to designing, publishing and
accessing a website.
1.1.1 Protocol
A protocol is the set of rules keeping up between when the two electronic devices communicate
together. These rules are the barrier for transmitting all data likewise which allow only specific
data which fit the rules. These rules include what type of data may be transmitted, what
commands are used to send and receive data, and how data transfers are confirmed.
(TechTerms, 2019)

Nowadays, there over one protocol is used in data communication. Some of the examples are
given below for web-related protocols.

Table 1 Examples for Protocols

Protocols Shrinkage

ARP For finding the link-layer address, the Address

Resolution Protocol (ARP) is used, which is a
(Address Resolution Protocol)
communication protocol. I.e. generally, an IPv4
address is related to MAC address and given
internet layer address. This mapping is the most
important action in the internet protocol suite.

DHCP Stands for "Dynamic Host Configuration

Protocol." DHCP may be a protocol that
(Dynamic Host Configuration
mechanically assigns a singular IP address to every
Protocol)
device that connects to a network. With DHCP,
there's no need to manually assign IP addresses to
new devices.

K.Sathurcigan Unit 10 Web Design And Development 15

 Therefore, no user configuration is important to
attach to a DCHP-based network. attributable to its
simple use and widespread support, DHCP is that
the default protocol utilized by most routers and
networking instrumentality. (TechTerms, 2020)

Right up 'til today, File Transfer stays one of the

most utilized facilities. The Protocol that handles
FTP these solicitations is File Transfer Protocol or FTP.

(File Transfer Protocol)

FTP is helpful for the file transfer as these ways
• This will transmit the data between different
networks easily.
• If the protocols were installed perfectly, if the
data transfer may stop at the mid that can be
continued again.
• Enables cooperation between topographically
isolated groups.

HTTP HTTP is the short form of HyperText Transfer

Protocol. The site pages are made in hypertext
(Hypertext Transfer Protocol)
mark-up language and these pages are transmitted
by the HTTP protocols. This likewise utilizes
DCP-IP protocol for webpage transmission and the
other type of HTTP known as hypertext move
protocol secure, which gives the transmission of
information in encrypted structure to forestall
spillage of touchy information.

K.Sathurcigan Unit 10 Web Design And Development 16

 IMAP The meaning of IMAP is "Internet Message Access
Protocol" and which called 'eye-map'. This
(Internet Message Access Protocol)
provides the ability to access the email messages
without downloading them. The main difference
between the POP3 and IMAP is the users of the
POP3 need to download the emails before read
them but the IMAP user no need for that. But both
are very famous email protocols. The advantage of
the IMAP mail server' user is, they can check their
email by multiple devices because the mail will be
there till the user download them.

ICMP ICMP means "Internet Control Message Protocol".

If there any problems happen when communicating
(Internet Control Message Protocol)
the computers over the internet by using the
TCP/IP protocol, the error and status messages
about the connection are sent using the ICMP, this
is a part of the internet protocol.

TCP (Transmission Control Protocol) TCP/IP is a short form of Transmission Control

/ Protocol/Internet Protocol. TCP / IP is a collection
of layered protocols utilized to contact through the
IP (Internet Protocol)
internet. The data transmission model of this
module is the client-server model. If a computer
will send the request, that's called client, but
received the request that's called server.

The layers are the Application layer, Transport

layer, Network layer and Datalink layer.

K.Sathurcigan Unit 10 Web Design And Development 17

 IRC IRC means "Internet Relay Chat". This is used for
people to chat with each other online. This protocol
(Internet Relay Chat Protocol)
operates on a client/server model where individuals
use a client program to connect to an IRC server.

POP3 The POP means "Post Office Protocol". In

sometimes the POP3 is called POP which is a
(Post Office Protocol version 3)
standardized method for delivering the email. This
will filter the received mails into specific users'
folder, when the user connects with the internet
who can download them from the mail server and
check it.

SMTP SMTP means "Simple Mail Transfer Protocol",

which is used to send an email over the internet.
(Simple Mail Transfer Protocol)
The users of email such as Outlook, Eudora, or
Mac OS X Mail is sending the email to the mail
server by using the SMTP. And the mail server will
send the email to their correct receiver. The overall
function of the SMTP is the set of rules about
agreeing with email communications.

TELNET Telnet, created in 1969, is a protocol that gives a

command-line interface to communicate with a
(TCP/IP Terminal Emulation
remote device or server, now and then utilized for
Protocol)
remote administration yet this utilized for initial
device arrangement like network hardware. Telnet
represents Teletype Network, yet this can likewise
be utilized as a verb; 'to telnet' is to build up a
protocol utilizing the Telnet convention.

K.Sathurcigan Unit 10 Web Design And Development 18

 UDP The UDP means “User Datagram Protocol", which
is a part of the TCP/IP suite of protocols used for
(User Datagram Protocol)
data transferring. The UDP is specially used for
streaming media. The cause for "stateless" UDP
protocol, can see the skips on the video or hear
some fuzz in audio clips, UDP transmission
prevents the playback from stopping completely.

(TechTerms, 2020)

1.1.2 Server Hardware

Which computer move data to other computers, that's called Server. This can transmit the data
on Local Area Network (LAN) or Wild Area Network (WAN). There are many types of Servers
is here, some of them are web servers, mail servers and file servers. Every server has special
software, which depends on its purpose. For instance, a Web server may run Apache HTTP
Server or Microsoft IIS, which both give access to sites over the Internet. A mail server may
run a program like Exim or iMail, which gives SMTP services to sending and getting email. A
document server may utilize Samba or the working operating systems built-in based file sharing
administrations to share files over a network.

Although the server software is specific to the server type, the hardware is not important. Truth
be told, normal PCs can be transformed into a server PC by including installing custom
software.

Types of Server Hardware

1. Application Servers: At times alluded to as a sort of middleware, application servers
catch a huge piece between database servers and the end-user, and they regularly interface
the two.

2. Client Servers: In the client/server programming model, a server is a program that

anticipates and satisfies demands from client programs in the equivalent or different PCs.
A given application in a PC may work as a client with demands for administrations from
different programs and as a server of solicitations from different programs.

K.Sathurcigan Unit 10 Web Design And Development 19

 3. Collaboration Servers: From numerous points of view, collaboration software, once
called 'groupware,' shows the original intensity of the Web. The collaboration software
designed to enable users to associate by never mind of location, through the internet or
corporate intranet to work collaborate in a virtual environment.

4. FTP Servers: File Transfer Protocol is one of the oldest internet services. When one or
more files transferring between computers, this is controlling the file structure, security
and transmission and make this possible.

5. List Servers: The list server gives a way of managing the mailing lists, at the same time
this can be as an open interactive discussion for announcing instructions, newsletters or
advertising.

6. Mail Servers: This also important and ubiquitous like a web server. Mail server on
corporate networks and internet (via LANs and WANs) move the mails and store.

7. Open Source Servers: Open source server is important for doing our job from the
operating system to server software, and this is a critical part of many IT infrastructure.

8. Proxy Servers: A proxy server is in to filter the requests, develop the performance and
share the connections between a client program (typically a web browser) and an external
network (typically another server on the web).

9. Real-Time Communication Servers: Real-time communication server was called

before chat server, IRC server and sometimes instant messaging server (IM), which is
help to transfer information between a huge number of users.

10. Server Platforms: A term often utilized frequently related to the operating system, a
platform is basic hardware or software of a computer, so this is an engine for driving the
server.

11. Telnet Servers: The telnet server helps users to log in to the host machine and perform
tasks like working on a remote machine.

K.Sathurcigan Unit 10 Web Design And Development 20

 12. Virtual Servers: In 2009, the quantity of virtual servers utilized surpassed the number of
physical servers. Today, server virtualization has in everywhere of the data centre. From
hypervisors to hybrid clouds, Server Watch looks at the most recent virtualization
innovation patterns.

13. Web Servers: At its centre, a Web server serves static substance to a Web browser by
stacking a file from a disk and serving this over the network to a user’s Web browser.
This whole exchange is centralized by the browser and server conversing with one
another utilizing HTTP. (Purifoy, 2020 )

14. Database Server: The web server runs the websites and which is a computer. When the
webserver receiving the request from the user to access any specific web page, which
distributes the web page. The main concept of the web server' creation is to store, process
and deliver the web page to the user. This intercommunication is done using Hypertext
Transfer Protocol (HTTP). These web pages are mostly static content that includes
HTML documents, images, style sheets, test etc. In addition to HTTP, a web server
supports SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol)
protocols for email and file transfer and storage. (Times, 2021)

1.1.3 Operating system

The operating system work as an interface between the user and computer hardware
components. The OS is there in every computer system for run the programs such as Browsers,
MS Office, Notepad Games, etc., need some environment to run and perform its tasks. The
user cannot access the computer or other digital devices without OS which helps to interact
with the device. (Guru99, 2021)

K.Sathurcigan Unit 10 Web Design And Development 21

Types of the Operating Systems
Table 2 Types of Operating System

Operating System The Purpose of Them

Batch Operating System Some of the computer processes are very lengthy and time
consuming this kind of process batched together based on their
similarity to increase the running speed. The batch operating
system' user is not interacting with the system directly. In this
type of OS, every user prepares his or her job on an offline device
like a punch card and submit it to the computer operator.
Multitasking / Time- The time-sharing operating system allows individuals located on
Sharing OS a different terminal (shell) to use the same computer system
simultaneously. The processor time (CPU) that is shared between
multiple users is called time-sharing.
Real-Time OS The real-time operating system is used to communicate the
system within a very small-time interval. As Military Software
Systems, Space Software Systems are the Real-time OS example.
Distributed OS Distributed systems use multiple processors located on different
machines to provide the most rapid calculation to their users.
Network OS The network operating system runs on a server. This provides the
ability to serve to manage data, users, groups, security,
application and other networking functions.
Mobile OS Mobile operating systems (OS), which are specifically designed
to power smartphones, tablets and wearable devices. Some
popular mobile operating systems are Android and iOS, but
others include BlackBerry, Web and WatchOS.
(Guru99, 2021)

K.Sathurcigan Unit 10 Web Design And Development 22

 Figure 1 The Importance of the OS

The importance of the Operating System

• Allows you to hide hardware details by creating a summary

• Easy to use with GUI

• Provides an environment in which a user can run programs/applications

• The operating system must ensure that the system is comfortable to use

• The operating system acts as an intermediary in applications and hardware components

• It provides an easy-to-use format for computer resources

• Acts as an intermediary between all the hardware and software of the computer

1.1.4 Relationship between the communication protocols, server hardware, operating

systems and web server software with regards to designing, publishing and accessing a
website.
For publishing and accessing the website, communication protocols, server hardware,
operating systems and web server software are working together. And this also helps to design
the website, because when creating a website, that should be in the limitations of the
development protocols of the website. Each part of art is important for publishing and run
websites and web-based applications. Those things are work together to run the websites.

K.Sathurcigan Unit 10 Web Design And Development 23

The contributions of the Participations of the website development are as follows.

Figure 2 Website Publishing and Accessing

• Communication Protocols: - The communication, i.e. for doing the activities via the
website, the communication protocol has a major role. So, based on the communication
protocols, the data transmissions and communication will be held between the user and
the websites.

• Server Hardware: - The server hardware is used to store the data that collecting from
the web pages. At the same what are the data show on the web page which came from
the server hardware.

• Operating System: - If any applications or programs need to run on the end device
such as PC, mobile, laptops, the operating system is a must for that.

• Web Server: - This is responsible for reacting to the user based on the client requests
because which transfer the data from the client to the server.

K.Sathurcigan Unit 10 Web Design And Development 24

1.2 Define the types of DNS and the uses of it, with clarifications on how
domain names are structured.
1.2.1 DNS (Domain Name System)
DNS Server is one kind of Computer Server, which has the common IP Address and their host
names’ database. And in most cases serves to resolve, or translate, those names to IP addresses
as requested. DNS servers run different software and communicate with each other using
special protocols. This is much simpler to remember a name than a string of random numbers.
(Fisher, 2020)

1.2.2 How does the DNS work

The DNS help the human-like as phonebook, how the numbers can be identified by the person’s
name likewise the webpage’s IP Address can be identified by DNS through the web page URL.

Overall, there are over 1 DNS in the world. When the user tries to reach any specific web site,
the DNS will try to find the web site based on keywords were given by clients. Until the DNS
find the specific web site, that will repeatedly scan the location of the URL were stored (in
DNS). After finding the URL, the client can reach the specific web site.

Figure 3 Function of DNS

K.Sathurcigan Unit 10 Web Design And Development 25

Browser: -
• Showing and printing Web contents on the Internet or intranet

• Showing, printing, and saving a file on the Internet or intranet

• Uploading scanned original data (by a server on the Internet or intranet)

• Uploading a file in a User Box (by a server on the Internet or intranet)

• Using a file in a User Box of an MFP on the network (by Web Connection)

• Through dedicated Web browser settings (must be associated with My Panel

Manager) (Function, 2020)

Through these functions, the browser can get the details about the thing (proper
keywords) that the client needs to search on the internet or intranet.

Name Server: -
• This server is helping to connect the URL with the server IP address in a human-
friendly way.

Through this ability, when searching a website by using its name, this server helps
to find its IP address and reach that specific web site.

DNS records: -
This is responsible for storing the IP addresses with their names. There are some
examples of a common form of syntax shown below, which important for when the
server tries to reply to the requests.

• “A” This record mentions the actual IP address that’s connected with the
domain.

K.Sathurcigan Unit 10 Web Design And Development 26

 • “CNAME” This record is utilized to specify subdomains that might be listed
under or connected with your current domain.

• “MX” This mentions any mail servers that might be utilized by your domain.

• “NS” This displays which nameservers are currently being utilized for your
domain.

• “SOA” This record has crucial information about your domain, like when
your domain was last updated and relevant contact information.

• “TXT” This can be modified to contain any extra information about the
domain that isn’t presently listed. (Wood, 2016)

Types of DNS
1. DNS Resolver: - A DNS resolver (recursive solver) was designed to receive the DNS
queries, which includes human-readable hostname such as "www.cars.com" and this is
responsible for tracking the IP address of the hostname.

2. DNS Root Server: - The root server is the first step in the journey from host name to IP
address. The DNS root server extracts the top-level domain (TLD) from the user's query -
for example, www.cars.com —... .com provides details for the TLD name server. In turn,
the server will provide details for domains, including "cars.com" with the .com DNS Zone.
(NS1., 2021)

In worldwide, there are 13 root servers indicated by the letters A through M. And those
servers are operated by organizations like the Internet Systems Consortium, Verisign,
ICANN, the University of Maryland, and the U.S. Army Research Lab.

3. Authoritative DNS Server: - Top-level servers within the DNS hierarchy Define which
DNS server is the " Authoritative" name server for a particular hostname, that is, that
contains updated information for that hostname.

K.Sathurcigan Unit 10 Web Design And Development 27

 The authentication name server is the last stop of the name server query - it takes the
hostname and returns the correct IP address to the DNS resolver (or if the domain cannot
be found, returns message NXDOMAIN). (NS1., 2021)

1.2.3 Domain Structure

The term 'Domain' is usually used as synonyms for 'Domain name' which has some limitations
between local networks. The Domain has a group of computers that are accessible through
general computer rules. The domain gives extra security for the network by block the outside
traffic from accessing computers inside of the network. The common Domain structure is
shown in the below picture which are the participations of the Domains.

Figure 4 Domain Structure

According to this structure, every domain is created. Each participation's meaning was given
below.

Top-level Domain
Top-level Domain is Domain extension, which follows the Domain name. This is the way to
differentiate the domain from others. The system was strictly categorized based on TLDs in
the earliest days of the internet.

The top-level domain is assigned to the domain according to the owner, its purpose, the feature
of the website or the geographical appearance. Through this method, can create six different
domains in the same domain name.

K.Sathurcigan Unit 10 Web Design And Development 28

for example, google.com and google. lk, both domains have the same domain name 'google'
but the top-level domain is different so these two domains were considered as two different
domains.

Table 3 Examples for Top-level Domain

.com This is the famous top-level domain which is the short

form of commercial. This helped to differentiate the
domain from other domains as commercial web sites.
Ex: - Symbolics.com
BBN.com
Thnk.com
.net This is the short form for network, which is used by
network technology companies like infrastructure
companies or internet service providers (ISPs).
Ex: - dotnetconf.net
.edu This is the short form for education, which is used by
educational institutions, colleges or secondary schools.
Ex: - kalaniya.edu
The original top-level
.org This is the short form for organization, which is used by
domains
organizations.
Ex: - unicef.org
.mil This was created and used by the American military.
Ex: - United States Army
United States Navy
The United States Marine Corps
The United States Air Force
United States Coast Guard
.gov This is a short form for the government. This extension is
used for governmental agencies, programs, cities, states,
counties, and towns.
Ex: - USA.gov
login.gov

K.Sathurcigan Unit 10 Web Design And Development 29

 .au Australia These are just a few examples of top-level
Country code top-level .ca Canada domains geographically.
domains .mx Mexico
.uk Great Britain
.com Generic: These top-level domains are used for general
.info reasons.
.net
.org
.biz Generic restricted: These top-level domains must be
.name used for their intended purpose.
.pro
.arpa Infrastructure: This only helps the internal structure of
the DNS.
.aero Sponsored domains: This can be used only by which
Generic top-level .asia companies or entities attached to specific industries.
domain .cat
.coop
.edu
.gov
.int
.jobs
.mil
.mobi
.tel
.travel
.xxx

K.Sathurcigan Unit 10 Web Design And Development 30

Sub-Domain
A subdomain is a part of the domain that helps organize certain sections within the main
website. The main website may have multiple subdomains to access all the different pages.

If take a shop website which is cargillsceylon.com, definitely this company may have one or
more store. If anyone tries to visit that store page of the company to confirm the products, have
to visit that shop store page, which can be store.cargillsceylon.com. this is a simple example
for sub-domain. Likewise, over one sub-domains are keeping up by the companies to manage
their sub webpages.

Domain Name
A domain name is used to represent the company name in a specific industry. Commonly,
which can be like the company name or the short form of that. This setup helps the users to
find the websites easily.

K.Sathurcigan Unit 10 Web Design And Development 31

1.3 Analyze the effect of search engines on website performance. Provide
evidence-based support for improving a site’s index value and rank through
search engine optimization.
1.3.1 Search Engine
A search engine is a software accessed on the Internet that searches a database of information
according to the user's keyword. The Engine provides a list of results, which related to the user
searches to know. Nowadays, more search engines are here. Everything has some individual
skills and features. The Archie is considered as the first search engine for find FTP files until
now. And then Veronica is considered the first text-based search engine. Google is the most
famous search engine today compared to others. Other popular search engines include AOL,
Ask.com, Baidu, Bing, DuckDuckGo, and Yahoo. (Hope, 2020)

Figure 5 Examples for Search Engines

1.3.2 Usage of Search Engine

• User friendly: - When the user tries to search something through the search
engine, which automatically shows some suggestions, the user can easy to
find his needed data. So, this help to identify the data where was found.

K.Sathurcigan Unit 10 Web Design And Development 32

 Figure 6 Suggestions displayed automatically by the search engine

• Reduce wastage of time: - If the user won’t use the internet, need to go to
the library or specific places directly to collect the data. But nowadays the
users searching their needs through the internet. The search engine makes
this easy which is than before. When the user types their needed thing in
the search bar which show some websites in order. According to this, the
user can find their needed data within the shown websites. Because of this
can reduce the searching time.

Figure 7 Consume time for search

K.Sathurcigan Unit 10 Web Design And Development 33

 • Reduces search wandering: - Using the search engine, you can find more
details in one shot. Therefore, which helps to reduce the search force for
finding data.

Figure 8 Search results

1.3.3 Search Engine Optimization (SEO)

SEO is the method of attracting users when searching somethings through search engines,
which shows some suggestions based on their keywords. If the website was improved by SEO,
that website is shown at the top of the suggestions list. This makes the confidence of the user
who has needed data may be inside of the website. So, this SEO method can increase the
numbers of users using the specific website.

1.3.4 Evidence for SEO

By using SEO, can increase the traffic for the websites. Through this, business-based
companies can attract their customers easily. For this, some examples are given below.

By using one of the SEO online tools to check both websites show below.
https://app.neilpatel.com/en/seo_analyzer/site_audit?domain=zip.lk&view=recommendations
(SEO tool)

K.Sathurcigan Unit 10 Web Design And Development 34

When searching an online medical shop to buy medicines on the internet, which shows like
below.

Figure 9 Results of the Search

The selected websites were highlighted in the above picture. The reason for one of the websites
above another is SEO, evidence for this given below.

K.Sathurcigan Unit 10 Web Design And Development 35

1. Unique pharmacy online shop
The first suggestion for an online medical shop is a unique pharmacy online shop, which URL
is https://www.uniquepharmacy.lk. The following evidence was collected from by used
neilpatel, this is one of the online SEO tools.

Figure 10 Unique Pharmacy SEO result – 1

The above picture mainly shows the monthly average traffic for this website and the score for
this website given by this SEO tool.

Figure 11 Unique Pharmacy SEO result – 2

The above picture shows the details of this website speed comparison on mobile and desktop.

K.Sathurcigan Unit 10 Web Design And Development 36

 Figure 12 Unique Pharmacy SEO result – 3

A detail of the faults of the website is shown in the above picture. Fix these issues can attract
more clients in future, than now.

2. S.K Medical Shop

The sixth suggestion for the online medical shop is S.K Medical Shop, which URL is
https://www.zip.lk/listings/irupalai-bus-stop-ab20-sri-lanka-s-k-medical-shop/. The following
evidence was collected from by used neilpatel, this is one of the online SEO tools.

Figure 13 S.K Medical Shop SEO result - 1

The above picture mainly shows the monthly average traffic for this website and the score for
this website given by this SEO tool.

K.Sathurcigan Unit 10 Web Design And Development 37

 Figure 14 S.K Medical Shop SEO result - 2
The above picture shows the details of this website speed comparison on mobile and desktop.

Figure 15 S.K Medical Shop SEO result - 3

A detail of the faults of the website is the show in the above picture. Fix these issues can attract
more clients in future, than now.

K.Sathurcigan Unit 10 Web Design And Development 38

Comparison between the both websites
Table 4 Comparison between the websites

Score Monthly Traffic

Unique pharmacy online shop 82% 8,761
S.K Medical Shop 64% 459

This comparison is simply showing the evidence for why the S.K medical shop show below of
Unique pharmacy online shop. The SEO is a major role when shows the suggestions. If the
website has done the SEO, then that website show on top of the suggestion. Through this can
increase the monthly traffic for the website. Here, the S.K Medical Shop’s score is 64%. So,
this website shows below in the suggestion. that's why a lower number of peoples only visit
this website. At the same time, the Unique pharmacy online shop’s score is 82% that’s why
which show top in the suggestions. Through this, a large number of peoples visit this website.

K.Sathurcigan Unit 10 Web Design And Development 39

1.4 Identify and explain the common web development technologies and
frameworks. Explain the tools and techniques chosen to the web application
and hence justify, by giving reasons, why a web application is suitable for
the given scenario.
1.4.1 Web Application Technologies and Frameworks
Web applications are types of dynamic web sites connected with server-side programming.
Communicate with the users, connecting to the back-end databases and provide the results to
browsers these are the functionalities of the web application.

Some of the examples for web applications are Online Banking, Social Networking, Online
Reservations, eCommerce / Shopping Cart Applications, Interactive Games, Online Training,
Online Polls, Blogs, Online Forums, Content Management Systems, etc.. (Kohan, 2020)

1. Web Application Technologies

Two main types of coding, scripting and programming are in creating Web Applications.

Figure 16 Web Application Technologies

1. Client-Side Scripting / Coding

Client-Side Scripting is the type of code that is executed or interpreted by browsers.
Generally, any user can see the client-side scripting (by following the following steps
"right-click on the web page -> select the 'view source' tab").

K.Sathurcigan Unit 10 Web Design And Development 40

 Some of the examples for client-side scripting technologies are given below.
• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript
• Ajax (Asynchronous JavaScript and XML)
• jQuery (JavaScript Framework Library - commonly used in Ajax
development)
• MooTools (JavaScript Framework Library - commonly used in Ajax
development)
• Dojo Toolkit (JavaScript Framework Library - commonly used in Ajax
development)

2. Server-Side Scripting / Coding

Client-Side Scripting is the type of code that is executed or interpreted by the
webserver. Any users can't view or access the server-side scripting.

Some of the examples for server-side scripting technologies are given below.
• PHP (very common Server-Side Scripting language - Linux / Unix based
Open Source - free redistribution, usually combines with MySQL database)
• Zend Framework (PHP's Object-Oriented Web Application Framework)
• ASP (Microsoft Web Server (IIS) Scripting language)
• ASP.NET (Microsoft's Web Application Framework - successor of ASP)
• ColdFusion (Adobe's Web Application Framework)
• Ruby on Rails (Ruby programming's Web Application Framework - free
redistribution)
• Perl (general-purpose high-level programming language and Server-Side
Scripting Language - free redistribution - lost its popularity to PHP)
• Python (general-purpose high-level programming language and Server-
Side Scripting language - free redistribution)

K.Sathurcigan Unit 10 Web Design And Development 41

Importance of the common Web Development Technologies
Table 5 Importance of the web development technologies

Web Development
Role
Technologies
HTML The HTML gives the structure for the websites. By using the HTML
tags, the elements styles and attribute will be created at the website.

CSS The CSS used to create the styles of the elements at the websites
which placed within the HTML tags or written on a separate page
and that will include in the main page (website).

JS This also likes the CSS but which is used to get animation and
special effects for the website elements.

PHP The PHP is used for the website’ elements conduct with the
database. This work as an intermediator between them and transmit
the data between database and website.

2. Web Application Frameworks

Sets of program libraries, components and tools are called Web application frameworks. Which
allow the developers to create and maintain complex web application projects using a fast and
efficient approach.

Figure 17 Web Application Frameworks

K.Sathurcigan Unit 10 Web Design And Development 42

To streamline programming and promote code reuse by setting forth folder organization and
structure, documentation, guidelines and libraries (reusable codes for common functions and
classes), the Web Application Frameworks were designed. (Kohan, 2020)

Examples for Web Application Frameworks

Table 6 Examples for Frameworks

Frameworks Brief Explanation about the Framework

The bootstrap has been introduced in 2011, from that day to now,
Bootstrap
which is used by more important companies such as Netflix and
(The industry giant)
CNN to develop their websites. But this was started with a
different name. Striving for consistency among the tools used
internally in Twitter, Mark Otto and Jacob Thornton came up with
what they called Twitter Blueprint.

React is the number one front end JavaScript framework

React currently. Just like Bootstrap, this is a web platform framework

(The top JS choice) that started as an internal project for a social media company. The
developers at Facebook tried to develop some applications by
using this but which was hard to handle, so they create a
framework themselves to be work more efficiently in 2011. This
was the early prototype of React.

Vue.js Another famous front-end development framework is Vue.js,

(The lightweight according to Snyk, which was downloaded over forty million
warrior) times last year. This was released in 2014 and which is younger
than most of them. I.e. this was developed by knowing the issues
other JS framework' facing. And which is lightweight for use.

K.Sathurcigan Unit 10 Web Design And Development 43

 Angular was released in 2009 when realise this was called
Angular JS, but now this name is used for before versions of its
Angular
2.0. All the newer ones are simply called Angular. The newest
(Well-supported and
version unlike Angular JS, which used plain JavaScript, Angular
innovative)
uses its subset called TypeScript which allows static checking. In
addition to that, AngularJS was merely turning HTML into
dynamic content. Angular, on the other hand, is much better suited
for the modern web and works across multiple platforms,
including mobile.

The Bulma consists of CSS classes only, which is a younger front-

Bulma
end developing framework for CSS. This gets more than 600
(The CSS youngster)
thousand downloads monthly and has over 37 thousand stars on
GitHub. The latest version of Bulma is 0.8.0, which introduces
some colour updates, bigger form controls, and colour
customization for the panel element.
(BitDegree, 2021)

Conclusion: - To develop the websites, the web development technologies and frameworks
are must work together. The frameworks are reducing the spending time on web development
because which has some predefined class for providing style to the element of the website.
Web development technologies are very important than frameworks because without them,
cannot create the website. So, if the website needs to publish and as well as work perfect, that
needs the web development technologies and frameworks are work together efficiently. The
web development technologies will define the functionality of the websites. And the framework
makes that more accurate.

K.Sathurcigan Unit 10 Web Design And Development 44

Difference between Web Application and Desktop Application
Table 7 Comparison between Web Application and Desktop Application

Web Application Desktop Application

Positioning and upgrade for web-based Deployment and each upgrade/connection
application should be utilized on single are made individually on individual client
server machines. systems.
There is no limitation as to location wise for Desktop application can be accessed from
web application because which can be only where was that installed, which can be
accessed from anywhere. mobile or PC.
Web applications can be accessed from any Need to create desktop applications
platforms without any system-based individually for different operating systems.
requirements because which works on a
browser.
Web applications have more security issues Desktop applications are more secure than
because which is created for giving easy web application because which has better
access to their users for this reason this is authorization and administrators have better
designed as simply. control.
Web applications depend on the Internet The desktop application doesn't require an
connection. internet connection.
The web application does not require any The desktop application needs to be updated
updates because which is often seen as the when its latest version is released.
latest version.

Conclusion: The web application is suitable for this library system of Lowa State University
because students and professors can access the application from anywhere if they have internet
and smart devices which enough to do that action. Not only that, this is more satisfying than
desktop application, because no installation, no more updates, no more hardware specifications
need for that and anyone can access on their smart devices. All these features can be used only
if the web application. So, nowadays everyone has more commitments, which is suitable for
reducing the spending time for this.

K.Sathurcigan Unit 10 Web Design And Development 45

The Reason for choosing a specific Web Application Technology and Framework,
XAMPP and Sublime Text editor for create the LOWA online Library web-based
application.
Table 8 The Reason for XAMPP and Bootstrap selection in the development

HTML, CSS, JS and The HTML is used to develop the skeleton of the web application
PHP and JS and CSS used to get the styles and animation on the
application. PHP is used for making communication between the
Database and the application (front-end). The reason for choose PHP
is mostly the developer used this to develop dynamic websites.

The Bootstrap framework is used to develop web-related things such

Bootstrap as websites and web-based application worldwide. This is suggested
for develop the front-end parts of the websites. Because which
contains the special custom CSS classes. So, the one class represent
the specific class’ custom CSS, in this situation everyone used to get
the specific style by using the bootstrap with the same class name
which is an advantage in the team basis developments.
The XAMPP contains the Apache server and MySQL and which is
XAMPP
open-source. This is user-friendly so easy to understand that and use.
For the LOWA online library, the database was developed in
MySQL and which can be accessed through the Apache server.
Sublime The Sublime text editor is used to develop the web-based application
of the LOWA online library because the sublime is low weight
compare to other text editors and has as needed plugin feasibilities.
For these reasons, the sublime text editor is selected.

This is a brief explanation for the tool selection of web application development which is
clearly explained in the following task 2.3, which contains comparing within the same stage
tools and the reason of why these tools are selected from them.

K.Sathurcigan Unit 10 Web Design And Development 46

Activity 02

2.1 Define the relationships between front-end and back-end website

technologies and explain how the front-end and the back-end relate to
presentation and application layers.
2.1.1 Front-End Development and Back-End development
Front-End Development

Figure 18 Front-End Development

Front-end development is can be called client-side development because which makes an

impact on the client-side and also has been developed for client usage. The front-end
development work has been done by using HTML, CSS and JavaScript. When the developer
does the front-end development, will consider the actual view of, web page or web application
of the client. Nowadays, front-end development continuously developing, so the developer
needs to in up-to-date. The front-end development makes only an impact in the view of the
web page, so which can be included in the presentation layer of the three-tier architecture.

Back-End Development

Figure 19 Back-End development

The back-end development makes an impact in server-side, such as PHP, Java and Python
programming languages are using to transmit data between the database and web page and

K.Sathurcigan Unit 10 Web Design And Development 47

SQL is work on the database. The back-end development is hidden from the client view. So,
the beck-end development can be included in the Application layer and Data layer of the three-
tier architecture.

2.1.2 Three Tier Application Architecture

The three-tier architecture is a modular client-server architecture that includes a presentation
layer, an application layer and a data layer. The data layer stores the data, the application layer
does the logic works and which make the connection between the other two layers as a bridge.
And the presentation layer is the graphical user interface.

Figure 20 Three-Tier Architecture

Presentation Layer
This Layer is created for clients, which used in client’s computers through web browsers or
web-based applications. Which type of things the client can be accessed in the web sites or
web-based applications, those things are included in this layer.

Through the Application program interface (API) calls, the presentation layer communicates
with other layers. But this layer is not communicating with the server directly. So, the client
cannot modify any data on the server by using this layer. Following programming languages
mostly are used to develop this layer.
• HTML5
• CSS
• JAVA SCRIPT

K.Sathurcigan Unit 10 Web Design And Development 48

Application Layer
This layer can be called the logic layer because which includes the business logics which
supports the main activities of the application. And the programming languages such as Java
is using to write the core functions here. Based on the application required processing power
the underlying application layer can either be hosted on distributed servers in the cloud or on a
dedicated in-house server. (TechTarget, 2020)
• Ruby
• PHP
• Java
• .Net
• Python

Data Layer
This layer is including a database and a program for managing read and write access to a
database. This layer can be called a storage layer and can be hosted on-premises or in the cloud.
• SQL

Some of the examples for database software are given below.

• ADABAS
• IBM DB2
• Microsoft Access
• Microsoft Excel
• Microsoft SQL Server
• MySQL
• Oracle RDBMS
• Quick Base*
• SAP Sybase ASE
• Teradata

K.Sathurcigan Unit 10 Web Design And Development 49

2.2.3 Relationship between Front-end and Back-end

Figure 21 Relationship between Front-end Back-end development

The Web page creation has two major developments those are front-end development and back-
end development, these thing concern three-tier architecture. The presentation layer included
in the front-end development, and the application layer and data layer are included in the back-
end development. The above picture shows the details about what kind of languages are used
in individual layers.

The front-end which means the presentation layer gives the design and skeleton for the web
page only. The data collecting method on front-end development is called the ‘FORM’ method.
I.e. through fill-up the form, the company or developer can get their client details. After
gathering the user’s information, the whole data need to transfer to the application layer
because the presentation layer languages (HTML, CSS, JavaScript) cannot access the database.
So, the data need to transfer from the presentation layer to the application layer, this
transformation method is called ‘POST’. The Application layer languages (PHP, JAVA,
PYTHON) can send the data to the database.

The database in the data layer, when receiving the client’s data from the application layer to
the data layer, the data layer language (SQL) help store the data on their specific area in the
database.

Thus, the presentation layer, the application layer and the data layer are interconnected. This
means that the front-end and back-end developments interact with each other as stated above.

K.Sathurcigan Unit 10 Web Design And Development 50

2.2 Critically compare the different between online website creation tools
and custom-built sites. Consider Followings: design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI).
2.2.1 Online Website Creation Tools (Website Builders)
Website builder (Online website creation tool) is a platform for creating a website easily and
quickly, which help to create a website without any coding knowledge because through this
tool, can any create a website using the drag and drop method. To create a colourful and
consistent website, the necessary features are positioned on one side of the tool's platform.
Through this can access the features of this tool.

Figure 22 Online Website creation Tool

Some of the examples for the Online website creation tools are given below.
• WordPress

Figure 23 WordPress' Dashboard

K.Sathurcigan Unit 10 Web Design And Development 51

• Wix

Figure 24 Wix Dashboard

• Weebly

Figure 25 Weebly Dashboard

• Blogger

Figure 26 Blogger Dashboard

K.Sathurcigan Unit 10 Web Design And Development 52

2.2.2 Custom-built Sites
The Custom-built website will be started with a full plan of how the website looks like, the
purpose of the website and how does the website will work. And this will be designed based
on clients and viewers of the website. The SEO plays a major role when the user searches the
websites by using the browsers, because which make an impact on the website order of the
suggestions. So, the developer when developing a website needs to do SEO for the specified
website.

Custom-built websites take longer than themes because they are designed based on what they
need in terms of business. This will reduce the additional time consuming as it will be based
on the website and the site will be very easy to customize because the site developer does
exactly what it wants to do. Custom designs allow the site to be responsive on all devices
(phones, tablets, laptops, etc.) and browsers.

Figure 27 Custom-built Websites

Pros and Cons of the Custom-built Websites

• The website keeps its unique design, based on the developer or business needs.
• The custom-built website 100% fit for business purposes.
• The site is designed to work across all browsers.
• This site will be built as a friendly search engine.
• A custom-built website is expensive than a template.
• Time consumption is too long for a custom-built website than a template site.
• If the website needs to be upgraded, whichever company has created the site, that will
support it.

K.Sathurcigan Unit 10 Web Design And Development 53

2.2.3 Comparation Between Online website creation tools and Custom-built sites
Table 9 Comparison between Online creation tools And Custom-built websites

Online website creation tool Custom-built website

Knowledge This is the most common way to Programming knowledge is a must for
start a website because which don't start work with this.
need any programming knowledge.
Duration Through this can get the website This takes a long duration to create a
very easily in a short time. website, because which start with the
beginning of the website (from zero
levels).
Flexibility But cannot access all features of The developer can design the website
this tool, some feature will work on based on what does he need because
it' pro version only and which has there are no limitations for creating the
some limitations. website if does he familiar with the
programming. He can do anything in
here.
Cost The upfront cost of the template is Custom-built websites are more
very low. expensive than online creation tools.
Uniqueness Two or more companies can use the The site will change based on the
same template. business' needs (unique)
Security There is no 100% guaranteed for 100% responsive on all devices
which can respond to all devices.
Additional This doesn't have a reliable support The creators of the site are there for
support system. support
Performance This contains more attractive This has relatively few features and is
features. So, its performance is based on developer knowledge level.
higher than custom-build websites.
Functionality This has some limited The developer can create any
functionalities, if the user needs any functions here but he needs to have the
additional function, might need to ability to do that.
spend some money for that.

K.Sathurcigan Unit 10 Web Design And Development 54

 User The developer can download a But here, the functionalities are poor
Interface beautiful and attractable template comparably to the online website
(UI) and modify that depend on what creation tool, because the developer
does he need based on the needs more knowledge for making the
limitations. In this, there are more impressive functionalities in the
pre-defined functionalities, so Custom-built website.
which make a good experience for
the user.
User This is used worldwide, so which This depends on the developer, in this
Experience would have been under more case, maybe the website sometimes
(UX) testing. So, it will have very few has more issues, because the website is
errors or problems. new for the user and which take some
time to identify the issues on that.

Conclusion: Both ways are good for the create a website, but decisions about which method
is needed to choose for that based on the website’ features. If the website has more complicated
functions then the custom-built website method will suit that, or if the website has only some
basic functionalities then the online website creation tool will suit that. So, the creation method
is depending on the website attributes. Mostly online website creation method is useful for
reducing the spending time for the website development.

K.Sathurcigan Unit 10 Web Design And Development 55

2.3 Compare and contrast the tools and techniques available to design and
develop a custom-built web Applications.
2.3.1 Browser Selection

Figure 28 Utility Comparison between the Browsers

The above picture shows the comparisons between the browsers based on the following
utilities: Auto play blocking, tab-browsing, bookmark manager, automatically fills out forms,
search engine options, text to speech, reader mode, spell checking, web extensions/add-ons and
In-browser screenshot tool. Using the tick symbol will display details of what capabilities are
available in specific browsers.

Figure 29 Portability Comparison between the Browsers

K.Sathurcigan Unit 10 Web Design And Development 56

Same as the above said, here the portability comparison between the browser’s details shown
in the above picture. The portability’s are OS availability, Mobile OS availability, Syncs with
mobile, Password management and Primary password.

Reason for choosing the Mozilla Firefox browser

Figure 30 Chart view comparison between the browsers

The above chart shows the details about the browser’ levels in HTML5 score, WebXPRT 3
score, Memory usage with 10 tabs and storage usage.

Mozilla Firefox has been selected to run the LOWA Online library system. The reasons are
following.
• The first thing is relatively Mozilla Firefox has low memory usage when 10 tabs were
opened from other browsers, so which help to work faster than others.

• The second thing is WebXPRT 3 score is higher than other browsers.

• The HTML5 score of the Firefox browser is also acceptable.

• Relatively the Firefox browser take storage very low than other browsers for work.

K.Sathurcigan Unit 10 Web Design And Development 57

 2.3.2 Front-End Framework Selection
Table 10 Comparison between the Front-end Frameworks

Very Light
Full-Featured Material-based
weight
Bootstrap Foundation Semantic UI Bulma Materialize Material Pure
Design Lite
Principles RWD, Mobile- RWD, Mobile-first Semantic tag, RWD, Mobile Responsive, Web Cross-device SMACSS,
first Semantic Ambivalence, First, Modern free design, UX focused use Minimalism
Responsive
Unique Jumbotron, Card Icon Bar, Clearing Divider, Flag, Rail, - ScrollFire, ScrollSpy, Tooltips, -
Features component, Lightbox, Flex video, Reveal, Step, Wave behaviours, Spinners
Responsive Keystrokes, joyride, Advertisement, Card, Slide-out drawer
navbar Pricing tables Feed, Item, Statistic, menu, Toast, Parallax
Dimmer, Rating
Grid up to 12 XY 12 - column grid: default theme: 16 Simple building a standard 12-columns 12-desktop; 8- a 5ths and
columns float grid empowered columns of columns layout fluid responsive grid tablet; 4-phone 24ths unit-
by Flexbox features system based grid
Documentation Excellent Good Excellent Good Good Excellent Good
Learning curve Mild Sleep Moderate Mild Mild Mild Mild

K.Sathurcigan Unit 10 Web Design And Development 58

 Figure 31 Framework Competition

Reason for choosing the Bootstrap Frame work

• Comparably this framework is user friendly to others
• A lot of developers know about this framework, so if any updates need to in future, can
implement it without the same developer of the application or websites.
• This has some predefined class for creating the style in the website and which is very easy
to use.
• Through this framework, using the predefined CSS classes can reduce the development
time.

2.3.3 Selection of Back-end development

1. Php
Table 11 Comparison between the PHP, Ruby and Python

Ruby Python PHP

Ruby was created to Python was designed PHP was designed
make programming to emphasize for web development
PURPOSE
more fun, efficient productivity and to produce dynamic
and flexible. code usability web pages.
YEAR RELEASED 1995 1991 1995
& CREATOR Yukihiro Matsumoto Guido Van Rossum Rasmus Lerdorf
FRAMEWORK Rails Django Zend or Symphony
SITES BUILT Twitter Hulu YouTube Google Wikipedia Tumblr
USING IT Groupon Pinterest Facebook

K.Sathurcigan Unit 10 Web Design And Development 59

 Figure 32 Competition between the programming languages

The reason for choosing the PHP for data communication between the database and web
application
• PHP is used to develop dynamic websites.
• This is easier than other languages such as python and java.
• This creates a better future for them by providing experience about the PHP with the
developer.
• Easy to understand the PHP coding parts.

2. MySQL
Table 12 Architecture based comparison

MySQL Oracle MSSQL

Memory Caches InnoDB data cache Data cache (variants) Buffer cache
InnoDB log cache Log buffer SQL cache
MyISAM key cache Shared Panel Misc caches (lock,
Dictionary cache Java Pool connection
Query Cache Large Pool workspace, etc.)
user caches Query cache (Ilg)
Redo/Undo Logs InnoDB Undo Space Undo Tablespace (9i+) TempDB (20054)
InnoDB Logs Redo Logs Transaction Logs
Binary Log Archive Logs
Data Storage Tablespaces Tablespaces Filegroups
Table/index Files Datafiles Files
Format files
Optimizer Cost-based Cost-based Cost-based

K.Sathurcigan Unit 10 Web Design And Development 60

 Figure 33 The Usage of the MySQL

Reason for choosing the MySQL

• Data Security
• High Performance
• Comprehensive Transactional Support
• The Flexibility of Open Source
• Reduced Total Cost of Ownership

For these advantages of the MySQL, that was selected for creating the database of the LOWA
online library system.

2.3.4 Selection of Text editor

The sublime text editor was selected to develop the web-based application of the LOWA online
library.

Figure 34 Interface of the Sublime Text Editor

K.Sathurcigan Unit 10 Web Design And Development 61

This is also one of the text editors used to create desktop or web-based software. Some of the
sublime text editor features are as follows.
Table 13 Features of the Sublime Text Editor

Features Description
Multiple Selections By using this ability, can do the ten changes at the same time. I.e.,
this allows multiple selections and allow to do the changes on that.
‘Ctrl + D’ is used to select a specific word or variable at the same
time in entire codes and ‘Ctrl + Shift + L’ is used for getting
duplicate the selected line. This kind of short keys helps to reduce
the workloads.
Command Palette The Command Palette is used to organize the code and if any
plugins needed to install them by using this can download them.
for accessing this feature. the 'Ctrl + Shift + P' short key was used.
Split Editing By using this ability can do the coding or change in multiple files,
this also a very important advantage of this text editor.
Performance The Sublime Text is built from custom elements, which provides
an incomparable response. Sets the bar for sublime text
performance, from the powerful, custom cross-platform UI toolkit,
to the machine with an incomparable syntax highlight.
Cross-Platform Sublime text available for Mac, Windows and Linux. A license is
required to use majestic text on every computer you own, no matter
what operating system this uses. Sublime Text uses a custom UI
toolkit that is optimized for speed and aesthetics, while each site
utilizes its functionality.
(Sublime, 2021)

For use of this kind of features, the sublime text editor was selected to develop the LOWA
online Library’ web-based application.

K.Sathurcigan Unit 10 Web Design And Development 62

Activity 03

3.1 Design a suitable web application solution for the given scenario. Provide
evidences of the design, multipage website supported with fidelity
wireframes and a full set of client and user requirements. Use your design
document with appropriate principles, standards and guidelines to produce
a branded, multipage website supported with realistic content.
3.1.1 Design Document for Online Library Management System
The purpose of design document creation is to give a clear idea to the developer about the
application and the plan of how the application will be developed. The design document
generally contains the diagrams and job roles for the development of the application. So the
design document will submit between the data collecting from the client about the application
or software and create the UIUX design duration.

K.Sathurcigan Unit 10 Web Design And Development 63

Table of Contents
Title and People ....................................................................................................................... 65

Overview .................................................................................................................................. 66

Context ..................................................................................................................................... 66

Goals ........................................................................................................................................ 67

Milestone.................................................................................................................................. 68

Scope and Limitation of the study ........................................................................................... 68

Significance of the study.......................................................................................................... 69

Existing Solution...................................................................................................................... 69

Proposed Solution .................................................................................................................... 70

System Architecture ............................................................................................................. 70

Diagrams .................................................................................................................................. 71

1. USE CASE Diagram ........................................................................................................ 71

2. DFD Diagram ................................................................................................................... 72

3. ER Diagram...................................................................................................................... 73

4. Site Map for LOWA Online Library System ................................................................... 74

5. Activity Diagram for LOWA Online Library System ..................................................... 75

6. Sequence Map for LOWA Online Library ...................................................................... 76

Time Line ................................................................................................................................. 77

K.Sathurcigan Unit 10 Web Design And Development 64

Title and People
Here, the details are given in table format which contains who were participate in which part
of the project details.

Title of the Project: - Online Library system for LOWA Library

Table 14 Job roles and Responsibilities

Name Job Role Responsibilities

Mr Sathurcigan Project Lead Manage the overall process of the project and lead
the teammates to do their parts properly.
Mr Ashief Requirement Find out the customer needs for the required
Analyst library system and identify the main
functionalities of that. And these things to
Designer.
Mr Kajenth Developer Develop the codes for building their taken parts of
Mr Nusair Developer the system and full fill the customer needs.
Mr Zakki Tester After the system complete, check every part
Ms Tharshana Tester works correctly in the system. If is not, tell them
about the issue to the developer.
Mr Shufaiq Designer Create the actual user interfaces of the system
based on the user requirements and hand over that
to the developer.

K.Sathurcigan Unit 10 Web Design And Development 65

Overview
LOWA university has a common library for several types of faculties. Some of them are
Agriculture, Arts & Culture, Commerce & Management and Science. These faculties are in
little bit long distances. For this scenario, those who are studied in this university need to read
or refer to the books to do their assignments and improve their knowledge levels.

The long-distance and the book not found, these kinds of issues affect the student’s studies. So,
the LOWA university decided to develop a system for reserve book and check book availability
anywhere. This will help to decrease the student’s unnecessary trips between their hostel and
library. Can check the book availability (book count) through the system, so which is help to
identify the importance of book reserving activity.

Vision: To decrease the student's misunderstanding on borrowing books from the library, by
using the online library system. And improving the library record-keeping ability.

Context
Nowadays, everything happens through the digitalized techniques, for example even everyone
order food via mobile apps neither goes to the shop directly for that. Likewise, every activity
has been done by apps or web applications or software.

By using this method, the LOWA library decided to launch their digitalized application, for
done their library-related activities such as reservation, lend and return. So, the digitalized
system will help to reduce the maintenance time and get the summarized reports about the
transactions and which is useful for monitor the entire library activities through the system. If
any updates or things need to modify then using this application can do it easier than the
traditional method.

K.Sathurcigan Unit 10 Web Design And Development 66

Goals
Keeping the records related to the users and books, and maintaining the reserve, lend and return
protocols to give the user-friendly access to the online library system. To access the online
library system, the user needs to register into the system. Through this, the privileges will be
assigned to the user based on his/her user type. Based on his/her User id (librarian id, professor
id and student id), the librarian will identify the user and track their past book borrows and take
a decision.

Objectives of the Goal:

• Create a maintenance technique for keeping the records in the system and which need
to should be easy to can view the records.

• Develop a technique for manage the reserve book function and lend book function,
but in terms of the user, the reserve book function will be work on his view, the lend
book function will be work on in terms of the librarian/ library admin.

• Minimize human interference in library activities.

• Being able to make a fully organized statement of lend or borrow and reserving
activities.

K.Sathurcigan Unit 10 Web Design And Development 67

Milestone
Table 15 Milestone

Tasks Start date End date

Find out the user requirements [Requirement
01/08/2020 08/08/2020
Analysis]
Create the user interfaces through the Adobe XD
09/08/2020 23/08/2020
(Wireframe) [Designing]
Collect Feedback about the Wireframe 24/08/2020 28/08/2020
Front-end development [Development] 30/08/2020 25/09/2020
Test the front-end [Testing] 26/09/2020 30/09/2020
Develop the back-end codes [Development] 01/10/2020 15/11/2020
Implement the system [Implementation] 16/11/2020 24/11/2020
Receive the feedback about the completed system 25/11/2021 29/11/2021
System maintenance 30/11/2021 To be continued.

Scope and Limitation of the study

The LOWA university is used by above 500 students and continue the university management
enrolling many students every year. The online university was developed based on the
requirement of library management, the system contains the safe searching techniques in
books. I.e. the system will show automatedly the book availability for and give the fully
explained report about the book reservations and lend action related details.

So, by developing an application for doing the library activities which is easier than the
traditional method. So, by using this method can get benefit at both sides i.e. the management
of the library and users of the library will utilize that.

The well-digitalized system will help to monitor the entire library very easier through the
system, so which is much better for the users of the application.

K.Sathurcigan Unit 10 Web Design And Development 68

Significance of the study
The benefits of using the digitalized application for LOWA Online Library activities are as
follows.
• Student or Professor: - Can avoid spending time for travel to the library.

• Librarian or administrator: - Can monitor the library via just watch the display of the PC.

• Librarian or administrator: - Reports can be generating through the application.

• Student or Professor: - Can reserve the book easier and no need to search for that.

Existing Solution
Nowadays the transaction has been done by using the manual process in the LOWA library.
The management of the LOWA library decided to take their activities done through the
digitalized web application. The reason why they move from the traditional method to
digitalized method is as follows.
• The users of the library wasting their time searching for the books, in sometimes they
cannot find their needed book.

• The book can lose from the library when the student or professor returns to the library
because the traditional method doesn’t have the evidence keeping function of return.

• The single librarian cannot maintain the entire library.

• In the traditional method, report creating is very difficult for the librarian.

• If there more librarians in the library, when the book was lost unnecessary confusions
can happen about the librarian.

For these reasons, the LOWA library moves to the digitalized system to do its library activities.

K.Sathurcigan Unit 10 Web Design And Development 69

Proposed Solution
The better solution to minimize these problems is to take their procedure work into
computerized applications such as web application, why prefer the web application for LOWA
library, the user of the library can access the system anytime and anywhere. By using the
digitalized system for LOWA library, can maintain and generate the reports through the system
easily which very useful for the Librarian.
The Structure of the LOWA Online Library System: -
The System contains the following pages for doing the actions on the library
• Enter in the system via the Login page.
• Access the whole system through the Dashboard.
• Create or update or delete the User type via the User type page.
• Create or update or delete the User profile via the User page.
• Create or update or delete the Book type via the Book type page.
• Create or update or delete the Book via the Book page.
• Create or update or delete the Author profile via the Author page.
• Reserve books via the reservation page.
• The librarian allows the user to borrow the book via lend page.
• When the librarian receives the book create a record about the transaction via the return
page and if the librarian needs to put any penalty payment for the user, can do here.

These are the common functionalities of the LOWA Online Library System. To develop the
web application for the library, the database and application should be interconnected to store
the records about the transactions.

System Architecture
• Database of the system: -

The database will be created by using the XAMPP which contain the
MySQL database and Apache Server. By using this, can store the data
collecting through the web application.
• The interface of the system: -

The user only sees the interfaces of the application, by using this every
activity can happen in the library.

K.Sathurcigan Unit 10 Web Design And Development 70

Diagrams
1. USE CASE Diagram

Figure 35 Use case Diagram

K.Sathurcigan Unit 10 Web Design And Development 71

2. DFD Diagram
3.0
D Author D User Type
Create &
Manage User
User Type_id Types
Create/Edit/Delete Author Create/Edit/Delete User Type User
Author Details User Type Details Details
Create/Edit/Delete
2.0 User
4.0

Create & Create &

Send information D
D Account
Manage Author Manage User
D
D Book Type Types
Details

Send information
Send information Login successful
Create/Edit/Delete Book Type
Author_id Book Type Details
Send information 1.0 Student
5.0 Librarian Login Details
Reservation Login Details &
Login Lecturer
Create & Approval
Manage Book Request
Types Confirmation Confirmation
Reserve request
Book Type_id Or cancel the reserve
Confirmation or Cancellation Alert

6.0
7.0 Allow 9.0
Create & Reserve & Put Return &
Manage Book Maintain Maintain
Approve or Denied
Store the Return Details
Create/Edit/Delete Book Store or Update the Return details
Book Details Reserve details Reservation Details

8.0 D Book_Return
D Reserve Lend &
D
D Book
Maintain Late Return

Store or Update the 10.0

Lend Details
Lend details
Imposition of
fines
Store the
Fine details
D
D Lend
D
D Fine

Figure 36 DFD Diagram

K.Sathurcigan Unit 10 Web Design And Development 72

3. ER Diagram
Password
ContactNo
UT_id userType
Username

U_id Users have User_type

L_contactNo lendtatus lendDateandTime

lastName
firstName
can

Lend L_id

have
reserveStatus reserveDate

Return Ret_id
have
R_id Reserve
Fine

actualReturnDate

amount F_id
BT_id bookType

has been
Book_type
count image

ISBN

A_id A_name
Book has
B_id

Author
B_name rating

status Discription
A_rating A_discription

Figure 37 ER Diagram

K.Sathurcigan Unit 10 Web Design And Development 73

4. Site Map for LOWA Online Library System

Login Page

Dashboard

Header Side bar Nave bar Footer

Create
User Type Update Logout
View
Delete

Create Update
User
View Profile pic update
Delete
Create
Author Update
View
Delete

Create
Book Type Update
View
Delete

Create
Book Update
View Profile pic update
Delete
New Reservation
Reservation
My Resevation

Lend List
Lend
Lend History

Return List
Return
Return History

Figure 38 Site Map

K.Sathurcigan Unit 10 Web Design And Development 74

5. Activity Diagram for LOWA Online Library System

Unregistered Registered
user user

Create New User Enter Username Not Found

Account & Password

Login
Found

Enter into the System

View the reservable

Reservation
Reservation List
books & Reserve books
Go to the Book
Confirm Res ervation
Reservation page

My Reservations

User Cancel the request

Lend
Record will be created Waiting for the
in the database Approval
Librarian Approve the
No
request

yes

Waiting for user return User successfully

Return Ontime
the book. return the book

Confirmation Late
Error message
mess age
Return

Librarian put fine for

the user.

User need pay penalty

payment

Logout

Figure 39 Activity Diagram

K.Sathurcigan Unit 10 Web Design And Development 75

6. Sequence Map for LOWA Online Library

Figure 40 Sequence Map for LOWA Online Library

K.Sathurcigan Unit 10 Web Design And Development 76

Time Line

Aug 2020 Sep 2020 Oct 2020 Nov 2020

ID Tasks Start Finish Duration
8/2 8/9 8/16 8/23 8/30 9/6 9/13 9/20 9/27 10/4 11/1 11/8

Find out the user requirements

1 8/3/2020 8/8/2020 6d
[Requirement Analysis]
Create the user interfaces through the
2 8/9/2020 8/23/2020 15d
Adobe XD (Wireframe) [Designing]

3 Collect Feedback about the Wireframe 8/24/2020 8/28/2020 5d

4 Front-end development [Development] 8/30/2020 9/25/2020 27d

5 Test the front-end [Testing] 9/26/2020 9/30/2020 5d

Develop the back-end codes

6 10/1/2020 11/15/2020 46d
[Development]

7 Implement the system [Implementation] 11/16/2020 11/24/2020 9d

Receive the feedback about completed

8 11/25/2020 11/29/2020 5d
system

9 System maintenance 11/30/2020 11/30/2020 1d

Figure 41 Time Line

K.Sathurcigan Unit 10 Web Design And Development 77

3.1.2 User Requirements of the Library Management System
User Requirement
That is, when starting a new project, the user requirement is important for creating the main
Features of the system. I.e. when creating an application or software, the requirements received
from the user is given an idea of how the system should be. Which gives the overall
characteristics of the software. After collecting the user requirement, other activities will be
implemented.

User Requirement of the LOWA Library System

Users

Students Professors Librarians

Their competence in the system Their competence in the system Their competence in the system

Can Register and Login to the System Can Register and Login to the System Can Register and Login to the System
Can Update Their Profile details including the Password Can Update Their Profile details including the Password Can Update Their Profile details including the Password
Reserve a Book for 24hours and Check Book Availability Reserve a Book for 24hours and Check Book Availability Reserve a Book for 24hours and Check Book Availability
Can Search the Books According to the Categories Can Search the Books According to the Categories Can Search the Books According to the Categories
Can Borrow Books Can Borrow Books Can Borrow Books
Can Return Books Can Return Books Can Return Books

Check the Member Status and Update the Lending details

Create the Books Catalog
Add/Delete Books
Can Update the Book Return details
Can Calculate the Fine for the Late Returns

Figure 42 User privileges in the LOWA Library System

The above chart shows the privileges of the users in the LOWA library system. These privileges
were assigned based on the user requirements. In the above chart, what are actions were
mentioned in purple colour, those things are common privileges for all users. The librarian has
some special privileges, that was mentioned in red colour in the above chart.

K.Sathurcigan Unit 10 Web Design And Development 78

The common privileges are

• Can Register and Login to the System

• Can Update Their Profile details be including the Password
• Reserve a Book for 24hours and Check Book Availability
• Can Search the Books According to the Categories
• Can Borrow Books
• Can Return Books

The special privileges of the librarian are

• Check the Member Status and Update the Lending details

• Create the Books Catalog
• Add/Delete Books
• Can Update the Book Return details
• Can Calculate the Fine for the Late Returns

According to this users’ demand, the system has implemented including these restrictions.

3.1.3 System Requirements of the Library Management System

Functional Requirements
Functional requirements define basic system behaviour. How the user has thought about what
that system does or should not do, and how the system responds to inputs. Functional
requirements define routine / later behaviours and include calculations, data input, and business
processes. (QRA, 2020)

The functional requirements of the LOWA library systems are

1. Login: This function is used to identify which user has accessed the application at that time,
and can avoid the un-otherized persons access the application. Through this component,
the librarian can identify which user (Librarian/professor/student) reserved or returned the
book. And this is one of the security structures because the system only allows already
registered person who can be librarian or lecturer or student.

K.Sathurcigan Unit 10 Web Design And Development 79

 Action Sequences

Table 16 Login action sequences

Action The user tries to enter into the system.

Respond The system requires the username & password.

Action The user enters his specific username & his password.

Respond If the username & password are matched into the already stored data of the
database, the system allows the user to access the system. Otherwise, the
user can’t access.

Functional Requirement: When the user registers into the system, his details are stored
in the database. So, if the user trying to enter into the system, who needs to provide his
username and password. At that time, the system compares the username and password, if
those are matched to any username and password in the database. If the username and
password matched then the system allows the user and provide some privileges based on
his status (librarian/professor/student).

2. Reserve Book: By using this function, the user can reserve the book if is it available.

Action Sequences

Table 17 Book Reserving Action Sequences

Action User Press the ‘Reserve this book’ button.

Respond The selected book added to the user’ ‘My reservation’ page.

Functional Requirement: Once the user clicks to reserve any book, the specific book
should store on his ‘My reservation’ page and that book count needs to decrease by one.
This activity shows as an alert message to the librarian. And the librarian until approving
the reservation, the user can’t borrow that. And this action should store as a record in the
database to track the reservation details.

K.Sathurcigan Unit 10 Web Design And Development 80

3. Lend Book: Only the librarian can access this function. through this, a librarian can permit
the user to borrow the book.

Action Sequences

Table 18 Lend Action Sequences

Action Librarian or Library Admin Press the ‘Lend this book’ button.

Respond The librarian reaches the return date fixing page.

Action The librarian enters the return date.

Respond The lend detail store records on the ‘Lend History’ page.

Functional Requirement: The librarian can approve the reservation and provide the book
to the user. At that time, the librarian will mention the return date for the book. These details
should store as a record in the database to track the transaction was happened between
whom.

Non-functional Requirements

While functional requirements define what a system should or should not do, non-functional
requirements refer to how the system should do it. non-functional requirements do not affect
the basic functioning of the system (hence the name, non-functional requirements). Even if the
non-functional requirements are not met, the system will still fulfil its basic purpose. But which
is important for maintaining the system properly. (QRA, 2020)

1. Usability: - This means how was the application provides friendly access with the user like
identifiable icons and colour scheme were used.

According to this, here user understandable icons were used and which is a web-based
application, so everywhere can access this system and make reservation easily. By using
icons, the language barrier has been reduced.

2. Reliability / Availability: - This is about the convenience of the user accessing the
application at any time (24*7).

K.Sathurcigan Unit 10 Web Design And Development 81

 Here, this is a web-based application so anywhere and anytime can access the system except
for server maintenance time. So, the server maintenance will be scheduled when the
network traffic was low. And the librarian or library admin need to respond at any time.

3. Scalability: - In the future, if there any upgrade needs to do in the hardware of the system
such as RAM, Hard disk up-gradation, those things must include in this. And how to handle
the details of the upgrade should be mentioned here.

4. Performance: - To access the system, the PC how fast does it need to operate, about this
detail need mention here.

5. Supportability: - To run the system, if the resources are in-built or if the system needs to
access the external resource for done their functionality. These details should be mentioned
here.

6. Security: - Details regarding what security features need to be installed on the system to
run the application smoothly and how to monitor system progress should be mentioned
here.

3.1.4 Wireframe for LOWA library System

Figure 43 Adobe XD

The wireframe helps to design the actual design of the application based on the user
requirement, i.e. the wireframe will work as the actual system so the user can feel all features
of the system. And if there any features need to modify or add, using this method helps to
finalized the system structure, because once the developer after finish the application
development works, making any changes to the application, is very difficult.

K.Sathurcigan Unit 10 Web Design And Development 82

So before developing the Web application for LOWA online library, the wireframe was
developed based on the already given user requirement of the application by using the Adobe
XD software, the wireframes of the system are as follows.

1. Login page

Figure 44 Login (Wireframe)

2. Dashboard

Figure 45 Dashboard (Wireframe)

K.Sathurcigan Unit 10 Web Design And Development 83

3. Book Module
• Create New Book

Figure 46 Book Create a page (Wireframe)

• View Book

Figure 47 Book view page (Wireframe)

K.Sathurcigan Unit 10 Web Design And Development 84

• Edit Book

Figure 48 Book edit page (Wireframe)

• Delete Book

Figure 49 Book delete Confirmation (Wireframe)

Likewise, other modules’ wireframes such as User Type, User, Author, Book Type are
designed in Adobe XD.

K.Sathurcigan Unit 10 Web Design And Development 85

4. Reservation

Figure 50 Reservation page (Wireframe)

5. Lend

Figure 51 Lend page (Wireframe)

K.Sathurcigan Unit 10 Web Design And Development 86

6. Return

Figure 52 Return page (Wireframe)

After finish, this wireframe creating work, need to get feedback about this design from the
client. If the client finalizes this design, the application developing work will execute.

K.Sathurcigan Unit 10 Web Design And Development 87

3.2 Implement the designed system using PHP, JS and MySQL. Screenshots
of important code lines with proper comments and user interfaces filled with
sample data must be attached to the documentation. Apply a database design
for the proposed system and provide the well normalized database design of
the proposed system.
3.2.1 Used, Programming Languages for the System Implementation
1. In Web-based Application Creation
PHP
PHP is a scripting language that works on the server page. Scripting languages act as a coding
subset to automate the processes, otherwise, the process must be implemented step by step each
time. The scripting languages differ from the markup languages such as HTML and CSS,
markup languages are used only to determine the layout and look of the web page, but the
scripting language gives the command to do the action for the static web page.

JavaScript

Figure 53 Usage of JavaScript

JavaScript is one of the scripting languages that, unlike C or C ++, works directly on the
webpage because compiling is essential for run their codes. This works together with HTML
and CSS to build the website, JavaScript controls the dynamic elements of web pages. This
works in web browsers and, more recently, on web servers too. Application Programming
Interfaces (API) is also supported by JavaScript, giving you further functionality. (MUO, 2021)

K.Sathurcigan Unit 10 Web Design And Development 88

HTML and CSS
• HTML: - HTML is used to create the skeleton of the web page, which is one of the scripting
languages. And each section such as paragraphs, images, headings and texts are
created by using the HTML. After finishing the HTML works which will be work
as a web page.

• CSS: - CSS is used to create the additional features of the web pages such as colours, fonts,
columns, borders and style-related structures. CSS takes the website from plain text
to elements for colourful designs.

2. In Database Creation for the System

MySQL
SQL means Structured Query Language, MySQL is a relational database management system
based on SQL. MySQL is used to maintain the data in the database in this way, which is used
for web-based data collections. MySQL works in association with a scripting language such as
PHP or Perl to contact the database in real-time. (Reg, 2021)

3. Source Code Editor for use in System creation

Sublime Text Editor

Figure 54 Sublime Text Editor

Sublime text editor was used to developing the web application for the LOWA online library
system in writing the code wise. Sublime has some features such as Autocompletion, Syntax
Highlight, Code Folding and Customizable. In this way, the sublime text editor helped to do
the development work of the LOWA online university' web application.

K.Sathurcigan Unit 10 Web Design And Development 89

4. Framework for use in System implementation
Bootstrap

Figure 55 Bootstrap framework

The bootstrap firstly used by the Twitter developers for inside development of the company,
then modified to open access. By using this, can develop difficult front-end works also. The
benefit of Bootstrap framework usage is this is a universal framework, so every developer
knows this framework which is useful for team projects. Because, when developing any
application developed by more than two developers, if they try to write custom CSS for the
application it makes confusion that's why this kind of universal framework using in the
companies.
3.2.2 Code line Explanation
Front-End Development
1. Template for the System

Figure 56 Template of the system

K.Sathurcigan Unit 10 Web Design And Development 90

The above picture shows the details about the template of the system which is common for all
web pages, only the content area will change based on the specific web pages setup.

Here the ‘Include’ function has used the include each part of the web page creation like head,
header, side bar, nave bar, footer and script. All parts are work together and make the actual
web page.

Back-End Development
1. Make database connection
To access the database through the system, firstly, one needs to make the connection between
the database and the system. Without make a connection, one cannot access the real data.

Figure 57 Database Connection

To create the connection between the database and the system, the ‘Mysqli_connect’ function
was used which is one of the PHP function. Four parameters need to pass to run this function,
the parameters are Server name, Username, Password and Database name. The above picture
shows the details about how the connection was built into the system. After creating connection
between the database and system, the user can insert, edit, delete and view the stored data on
the specific database.

K.Sathurcigan Unit 10 Web Design And Development 91

2. Retrieving data from the Database

Figure 58 The Data retrieving method from the Database

The above picture shows the details about how the data retrieving from the database and which
PHP functions were used for that. Likewise, all modules such as user type, user, author, book
type, book, reservation, lend and return are getting the data from the database by using this
method. But the value of the ‘$sql’ PHP variable only will change based on the module.

I.e. the ‘$sql’ variable store the query for access to the database, based on this the action will
be done in the database. For example, below is evidence for activities such as
insert/update/delete/view any data from the database.
• Insert data

Figure 59 INSERT Query

The ‘insert query’ is used to insert the data into the database.

K.Sathurcigan Unit 10 Web Design And Development 92

• View data

Figure 60 SELECT Query

The ‘select query’ is used to get entire data from the specific table in the database.
• Update data

Figure 61 UPDATE Query

The ‘Update query’ is used to update the data in the database.

• Delete data

Figure 62 DELETE Query

The ‘Delete query’ is used to delete the records in the database.

3. Denial of Access to Persons not Registered in the System

• Avoid the Without login Access to Other Pages of the System

Figure 63 User Validation

When the user login to the system, the session variable will be created. If is not, this validation
denied the user access and redirect to the login page, so the unregistered person cannot access
any specific pages through entering the URL.

K.Sathurcigan Unit 10 Web Design And Development 93

 Figure 64 Logout page

After the user logout from the system, the created session variables will be erased, so no
specific pages can be accessed by the registered user also by entering the URL. If the user
wants to access any pages, must login again.

• When the User try to Login to the System

Figure 65 Access Restriction

The above picture shows the details about how the access restrictions were built in the system,
for this, a step-by-step explanation follows.

K.Sathurcigan Unit 10 Web Design And Development 94

Step 01 - Collect the Username and Password from the from which was entered by the user
when trying to log in to the system.

Step 02 - Collect data from the database based on the username the user entered.

Step 03 - If there is no username match for the user-entered username show the error message
about the wrong username.

Step 04 - If something in the username database matches the user record, get the password and
verify the password verification with the data in the database.

Step 05 - If the password does not match with the user-entered password show the error
message about the wrong password.

Step 06 - If the password match with the user record, the ‘Session variable’ will be created. By
use the session variables the user profile and user access will be assigned to the user.

3.2.3 Normalization for Create the Database of the System

Database normalization is a database schema design technique, by which an existing schema
is modified to minimize redundancy and dependency of data. (Normalization, 2020)

The three types of Normalization methods are followed.

• First Normalization
• Second Normalization
• Third Normalization

1. First Normalization Form -

The rule for the first normalization form is, which has atomic values are. No Column includes
multiple data in the LOWA library’ database. The second rule for the first normalization form
is, every data should be unique. In the table, each data defines by giving an id. This is another
rule for another normal form.

K.Sathurcigan Unit 10 Web Design And Development 95

 Figure 66 Un-Normalization Form

For this Un-Normalized form, 1st normalization form and 2nd formalization forms are as
follows.

Figure 67 1st Normalization Form

The 1st normalization form is better than the unnormalized form, because which a little bit
organized than the unnormalized form.

K.Sathurcigan Unit 10 Web Design And Development 96

 Figure 68 2nd Normalization Form
The picture above shows the 2nd default forms for the user, the user type and the book. This is
better organized from the 1st default. But the LOWA online library database is based on the
3rd default method, which is further organized from the 1st and 2nd defaults.

The created tables on the LOWA online university database is as follows.

1. User: -

Figure 69 3rd Normalization Form for User

2. Book: -

Figure 70 3rd Normalization Form for Book

3. Reserve: -

K.Sathurcigan Unit 10 Web Design And Development 97

 Figure 71 3rd Normalization Form for Reserve

4. Lend: -

Figure 72 3rd Normalization Form for Lend

5. Book Return: -

Figure 73 3rd Normalization Form for Book Return

K.Sathurcigan Unit 10 Web Design And Development 98

6. Fine: -

Figure 74 3rd Normalization Form for Fine

The 3rd normalization will be built based on the foreign key concept. Each foreign key
representing their tables. Similarly, each table was created in the LOWA University Database.

3.2.4 Database of the System

The database for the system was developed by using the XAMPP (MySQL & Apache Server).
A Well-normalized database was designed for this, which follows.

Figure 75 Database of the LOWA Online Library System

These tables were created based on the 3rd normalization method so those are interconnected.
These details are shown in the below picture.

K.Sathurcigan Unit 10 Web Design And Development 99

 Figure 76 Database Interconnections

Each colour line shows the connection between the tables and how they work together.

3.2.5 Interfaces of the system

1. Login page

Figure 77 Login page

This is the login page for the LOWA online library system, by entering their username and
password, can access the system.

K.Sathurcigan Unit 10 Web Design And Development 100

2. Dashboard

Figure 78 Dashboard

This is the dashboard for the LOWA online library system, here the user can see the overall
details of what are books in the library and which is best on that.
Because the graph view is used to identify the reader's experiences, which is helpful to choose
the books. And the author details also can watch through this page because only the librarian
can access all page’s others only access the reserve option. This is the only option to see all
functionalities of the library.

3. User type

Figure 79 Create New User Type

K.Sathurcigan Unit 10 Web Design And Development 101

This page is used to create new user types.

Figure 80 User Type View

This page is used to see the user types of the library and can change those things through this.
4. User module

Figure 81 Create New User

This page is used to enter the new user of the LOWA online library. This page can be accessed
by all users.

K.Sathurcigan Unit 10 Web Design And Development 102

 Figure 82 Users View

This page will only access by the librarian, which is used to see all user details of the library.

Figure 83 Update User Profile

By using this page, the changes can be done to the user profile.

K.Sathurcigan Unit 10 Web Design And Development 103

5. Author Module

Figure 84 Create New Author

This page is used to create a new author, and only if the librarian creates the author profile can
the author's name be assigned in the book details.

Figure 85 Author View

This page is used to see all author details and if there any changes that need do, can do that
here.

K.Sathurcigan Unit 10 Web Design And Development 104

6. Book Type Module

Figure 86 Create Book Type

This page is used to create a new book Type, and only if the librarian creates the book Type
can the book Type be assigned in the book details.

Figure 87 Book type View

This page is used to see all book type details and if there any changes that need do, can do that
here.

K.Sathurcigan Unit 10 Web Design And Development 105

7. Book Module

Figure 88 Create Book

This page is used to create the book profile when the book store in the library.

Figure 89 Book View

K.Sathurcigan Unit 10 Web Design And Development 106

This page is used to see all books’ details and if there any changes need to do in any specific
book, can do here.

Figure 90 Update Book Fields

Figure 91 Update Book Image

The book field updates need to do in two steps, i.e. the image of the book need to update in
separately and other fields of the book will be updated separately, because of the safety issues
(record can be lost).

K.Sathurcigan Unit 10 Web Design And Development 107

8. Reserve Module

Figure 92 Reserve books

This page can be accessed by all users of the library such as librarian, student and professor.
This page is used to reserve the book based on their needs.

Figure 93 My Reservation page

This page is used for if there any issues such as mistakenly any books were reserved or the user
no need the book at the time, can cancel his reservation.

K.Sathurcigan Unit 10 Web Design And Development 108

9. Lend Module

Figure 94 Lend page

This page is used to approve the book borrowing process by the librarian to the specific user.
Until the librarian approves the process, the user cannot get the book from the library.

Figure 95 Lend History page

This page is used to track details like who and on which date borrowed the books.

K.Sathurcigan Unit 10 Web Design And Development 109

10. Return Module

Figure 96 Return Page

This page is used to return the borrowed book to the library.

Figure 97 Return History

This page is used to find information about the librarian, book, return date and user who
participated in the return process.

K.Sathurcigan Unit 10 Web Design And Development 110

3.3 Critically evaluate the web design and development process against your
design document and analyze any technical challenges you faced in
development.
3.3.1 Overview for the Web design of LOWA Online Library
The web-based application of the LOWA online library is developed by using the HTML, CSS,
JavaScript languages for the front-end development and PHP, SQL languages for the back-end
development.

The design of the application has been developed as user friendly, i.e. which was developed by
using familiar icons and pictures. So, the user can access the system easier and happier. Before
developing any applications or software by the developer, need to create the user interfaces for
them. In this way, before developing the web application for the LOWA online library system,
the user interface was created. But the actual web application has some small differences from
the UI design (XD interfaces) are there. Reason for this, the time duration limitation and some
features not enough to create on the front-end developments.

The differences between the actual web-based application and UI design of the LOWA online
library is as follows.

3.3.2 Comparison between the UI design and Actual Interface of the LOWA Online
Library Application
1. Login Form Comparison

Figure 98 Comparison for the Login Form

The UI design of the login page has been designed more beautiful and which has some
additional feature from the actual interface of the application, i.e. UI design of the application
designed as can be sync the Google account and Facebook account to the LOWA online library

K.Sathurcigan Unit 10 Web Design And Development 111

system but the actual login page of the application has not. When design the UI design, the
expectation is high about the system that’s why which is designed like this.

2. Dashboard Comparison

Figure 99 Comparison for Dashboard

The UI design was created by using more attractive colours, but the Actual interface different
from the UI design in as colour code differentiations. And the UI design has some different
icons but which are not standard but the actual system was developed by using the standardized
icons. Some of the attributes were changed when creating the actual system from the UI design
based on the mindset of the at time.

3. New Record Creating Form Comparison

Figure 100 Comparison for Create Form

The UI design has the logo to represent the LOWA Online Library but the interface doesn’t
have. Because of the keep, the standard of the Web application and much more time is need
for creating a perfect logo for the library.

K.Sathurcigan Unit 10 Web Design And Development 112

4. View Form for the Stored data Comparison

Figure 101 Comparison for View Form

The UI design of the view form doesn’t have a profile pic editing button but the actual interface
has. The idea was coming when doing the front-end development. This is another difference
from the UI design.

5. Update Form Comparison

Figure 102 Comparison for Update Form

UI design create as every field can be updated on a single page but the actual system developed
as an image update and other fields can be updated separately. Because of some security
purposes, i.e. if the user tries to update every field at the same time, the already stored data
such as the image can be lost at updating time.

K.Sathurcigan Unit 10 Web Design And Development 113

Common differences between the UI design and Actual interface

Table 19 Difference between the UI and Interface

UI Design Actual Interface

Icon & Color Icons are bigger and not in the A small and standard fa-fa icon was
Theme standard, and a Bright colour theme used on the interface, and a standard
was used. colour theme was used.

Features Low High

Design Higher than interface Lower than UI design

3.3.3 Critically evaluation of the design and development process against the design
document
UI designs will be created mainly consider how the user will feel about the application, so the
UI designer will try to fulfil the user expectation about the application through the design but
which will make it the developer of the application into difficult. Because the developer can't
create the application the same as with the UI design of the application. While creating the UI
design, if the designer considers the developer then the developing part also the developer can
create the front-end of the application as well. But most of the UI designers only consider the
user which is not good for the developer.

The design document will be created based on the functional and nonfunctional requirements.
So, this step takes much time to collect the details about the system from the library
management and also, who are related to the system. The design document contains the
blueprint of the system and follows the step was mentioned in the document to develop the
actual system for the LOWA library.

After finalizing the wireframe of the application which created based on the design document,
the front-end and back-end works will be started. This process will take too much time, because
which is a challenge for the developer to create the web application' page the same as the UI
design. And the back-end work also the biggest part of web application development.

K.Sathurcigan Unit 10 Web Design And Development 114

When the developer does the development works for the front-end and back-end development
of the web application will face real-time issues and errors. The developer will spend more
time in resolve the errors and bugs of the application. after finish the development parts of the
application, that should test before launch. By using this kind of techniques, can ensure the
quality of the development and keep a good name for the developer of the application.

The entire development activities will be happening based on the design document, because
which is the guide-line for the software or web application developments. Every activity will
be mentioned on the design document with the time allocation for doing that.

3.3.4 Reason for the deviations between the UI design and Actual Interface of the
application (Technical issues and others)
1. Time duration is not enough for the system development: - Every task has been done
with in the time limitations, in this case, for developing the system, the given time durations
are not enough to create the actually what designed in the UI.

2. Lack of knowledge: - For developing the front-end development of the web application is
not easier like UI design, if need to convert the UI design to a Front-end interface, the developer
should have more knowledge about the design and how to get that in front-end interface. If the
knowledge is not enough for the development which makes a big impact on the front-end
development of the application.

3. Frame selection issues: - The Bootstrap framework was used to develop the LOWA online
library system but which doesn’t have some features. And also, some new frameworks were
launched in previous years so those frameworks can be having some additional features than
Bootstrap because which are the latest than bootstrap.

4. The feedback is not in a proper manner: - When collecting feedback about the front-end
interfaces, the user not take that seriously and gives incorrect feedbacks about the interface like
if the user gives feedback like ‘every interface is good’ then the developer won’t consider about
the interface again a lot. This kind of users’ attitude makes the developer take the wrong way.

5. The lazy attitude: - This approach wastes time on unnecessary things and prevents the
emergence of new ideas by satisfying the basic design and development areas of the application
itself.

K.Sathurcigan Unit 10 Web Design And Development 115

Activity 04

4.1 Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
4.1.1 Quality Assurance (QA)
Quality assurance (QA) is a procedure of testing the software before launch that, through this,
the company can ensure about their standard of product and if there any mistake, can solve that
before their customers knowing that. So, this method helps to keep the company' customers
continuously.

4.1.2 Why the Quality Assurance is important for LOWA Online Library System
• Reduce the loopholes: - When the developer develops any software, may be cannot find
the error by him on his software, because of the indifference. But the user can identify the
bugs on the software because, the user is new to the application, so he will check all features
of the application. So, there are many chances to find the issues in the software that make
that harmless. In this way, quality assurance helps to solve the problems in the LOWA
online library system.

• Find the user needs (suggestions): - When using the application, can get some creative
ideas about the application from the checking. This kind of ideas helps to improve the
application and which is a chance to make it perfect. So, this method was used in LOWA
online library system development process.

• Ensure the security components of the system: - The developer will assume that the
system's security feature is correct, but when using the application, security or other issues
may arise. Therefore, after completing the operation of the system, it should be tested. By
using this method, can be sure of the security features of the application.

• Realize about the system’ quality: - When the system was used by many people, by
collect the experience of the users of the system can find the quality of the system, if the
user not satisfied with the system then the developer can improve the system based on the
users given feedback himself.

K.Sathurcigan Unit 10 Web Design And Development 116

4.1.3 Method for Quality Assurance Implemented in the LOWA Online Library System
Feedback Form

Figure 103 Feedback form for Find the Quality of the LOWA Online Library System

K.Sathurcigan Unit 10 Web Design And Development 117

This is a google form, by using this the feedback about the system was collected from the users.
By this, has been doing some changes to the system based on the user’s suggestions.

Results for Feedback Form’ Questionnaires

Figure 104 1st Result

Question about icons and colour themes used in the application, for this, 100% of users agree
with the colour theme and icons used in the application.

Figure 105 2nd Result

This question about the application supportiveness to the user, more than 65% of users agree
that the application is supporting for doing the activities such as reserve and borrow books on
LOWA library.

Figure 106 3rd Result

K.Sathurcigan Unit 10 Web Design And Development 118

In this question about application' features satisfaction, more than 65% of users agree that the
application is installed with good features basis.

Figure 107 4th Result

This question about application user-friendly, more than 65% of users agree that the application
is installed on a user-friendly basis.

Figure 108 5th Result

This question about the entire application, 100% of users satisfied with the LOWA online
library system.

Figure 109 Final Result

This question was asked to get suggestions from the users about the application.

K.Sathurcigan Unit 10 Web Design And Development 119

The feedback is collecting from the users before creating an application so the users will access
the XD application (prototype).

A/B Testing
The A/B testing is used to find the users’ suggestion to deal with chaotic situations on
implementing the structure of the application, so when making a design for the library system,
need to get the users’ suggestions for the design. That help to makes the structure of the
application better.

Figure 110 A/B Testing

In the LOWA online library system, the A/B testing is used to finalized the login form and
main the data insert form.

K.Sathurcigan Unit 10 Web Design And Development 120

Result for the A/B Testing

Figure 111 Result for A/B Testing

Based on these suggestions, the interface of the LOWA online library system was designed.
I.e. on the login page, the users suggest using the 1st form, likewise, for the insert form of the
system, the 2nd form has been suggested by them. So, based on these suggestions the interfaces
were designed.

K.Sathurcigan Unit 10 Web Design And Development 121

4.2 Critically evaluate the results of your Test Plan and include a review of
the overall success of your multipage website; use this evaluation to explain
any areas of success and provide justified recommendations for areas that
require improvement.
4.2.1 Test Plan
The test case is used for the scheduled testing plan process for developed software or
applications to ensure the working conditions of each part which includes the entire steps of
designing and function related checking.

4.2.2 Test case

The test case contains the outputs for the test plan, by using this can ensure the application'
working condition and if there any part of the application is not working then can build that
perfectly through this.

4.2.3 Modules of the LOWA Online Library System

1. Login Module
• Test Plan

Table 20 Test Plan for Login page

Test Test case Description Process Expected Outcome

no

1 Enter the wrong The system shows the

Username & correct Error message.
Password correctly

2 Enter the correct The system shows the

User Login Validation Username & wrong Error message.
Password

3 Enter correct Username The system allows the

& correct Password user to enter into the
System.

K.Sathurcigan Unit 10 Web Design And Development 122

 • Test Case

Table 21 Test Case for Login page

Test Results
Input data Output Actual result
case (Pass/Fail)

Username: -
Successfully
Sathu
1 enter into the Pass
Password: -
System
123

Username: -
Sathurcigan System shows the
2 Pass
Password: - error message
123456

Username: - Successfully
Sathurcigan reach the
3 Pass
Password: - Dashboard of the
123 System

This test case can ensure the login validation of the LOWA online library system. I.e. When
the user tries to login into the system, should enter the username and password into the
appropriate fields of the login page, if the username and password match the specific user’
username and password, the system allows the user to access the system. How this validation
is happening on the system is shown in the above test case.

K.Sathurcigan Unit 10 Web Design And Development 123

 2. User Type Module
• Test Plan

Table 22 Test Plan for User Type Module

Test Test case Description Process Expected Outcome

no

1 Enter the Name of the The system shows the

Create New User Type User Type Success message about
the record creation.

2 Reach the edit page through Click a specific user Go to the edit page.
the view page. type’ edit button

3 Edit specific User type Change the user type The system shows the
name and click the edit confirmation
submit button. message.

4 Delete specific user type. Click a specific user The system shows the
type’ delete button delete confirmation
message.

• Test Case

Table 23 Test Case for User Type Module

Test Results
Input data Output Actual result
case (Pass/Fail)

Receive the
User Type: - Success
1 Pass
admin message about
data inserted.

K.Sathurcigan Unit 10 Web Design And Development 124

 Click the
Edit button Reach the Edit
2 Pass
on the view page
page.

Receive the
User Type: - Success
3 Pass
Admin message about
data updated.

Click the
Receive the
Delete
Success
4 button on Pass
message about
the view
data deleted.
page.

The above test case happens for ensuring functionalities of the user type module such as create,
view, update and delete. If there any mistakes or bugs in the functions of this module can
identify them and fix that through this test case. Details of how was the checking process have
been done is shown on the above test case.

K.Sathurcigan Unit 10 Web Design And Development 125

 3. User Module
• Test Plan

Table 24 Test Plan for User Module

Test Test case Description Process Expected Outcome

no

Enter the wrong type of email The system mentions the wrong
1 Email validation
in the email required field type of the entered email.

Try to create a user Deliberately omit certain The system shows a message to
2 profile without fill any fields of the user form. fill the missing fields.
field of the form.

Fill all fields of the User form The system shows the Success
Create New User
3 message about the record
Profile
creation.

Update specific user. Click a specific user’ edit The system shows the edit
4
button confirmation message.

Delete specific user. Click a specific user’ delete The system shows the delete
5
button confirmation message.

• Test Case

Table 25 Test Case for User Module

Test Results
Input data Output Actual result
case (Pass/Fail)

System
E-mail Address: - mention the
1 Pass
vinoth.com wrong the
email address

K.Sathurcigan Unit 10 Web Design And Development 126

 System
Missed any filed of
2 mention the Pass
the user form
blank fields

First name: - Vinoth

Last name: - kumar

Address: - kulavady

Contact no: -
0780928301

NIC: - 212312412v Receive the

Success
3 Gender: - MALE Pass
message about
E-mail Address: - data inserted.
vinoth@gmail.com

Username: - Vinoth

Password: -123

User type: -student

Receive the
Username: - Success
4 Pass
vinothkumar message about
data updated.

K.Sathurcigan Unit 10 Web Design And Development 127

 Receive the
Click the Delete
Success
5 button on the view Pass
message about
page.
data deleted.

This test case also likes the user type module, details of how was the user module'
functionalities such as create, view, update and delete has been ensuring through the testing is
shown on the above test case.

4. Author Module
• Test Plan

Table 26 Test Plan for Author Module

Test Test case Description Process Expected Outcome

no

Enter the wrong type of The system mentions the

1 Email validation email in the email required wrong type of the entered
field email.

Try to create an Author Deliberately omit certain The system shows a

2 profile without fill any fields of the user form. message to fill the missing
field of the form. fields.

Fill all fields of the User The system shows the

Create a New Author
3 form Success message about the
profile
record creation.

Update specific Click a specific Author’ edit The system shows the edit
4
Author. button confirmation message.

Delete specific Author. Click a specific Author’ The system shows the
5 delete button delete confirmation
message.

K.Sathurcigan Unit 10 Web Design And Development 128

 • Test Case

Table 27 Test Case for Author Module

Test Results
Input data Output Actual result
case (Pass/Fail)

System
mention
E-mail Address: -
1 the wrong Pass
Arulmozhi.com
the email
address

System
Missed any filed of mention
2 Pass
the user form the blank
fields

Full Name: -
Arulmozhi varman
Display Name: -
Arulmozhi
Rating: -3.0 Receive the

Discription: - good Success

3 story writer message Pass

Gender: - MALE about data

Contact No: - 011- inserted.

123123
Email address: -
Arulmozhi@gmail.
com

K.Sathurcigan Unit 10 Web Design And Development 129

 Receive the
Success
Display Name: -
4 message Pass
Arul
about data
updated.

Receive the
Click the Delete Success
5 button on the view message Pass
page. about data
deleted.

This test case was happened to ensure the functionalities of the author module, and details
about how was that implemented show on the above chart.

5. Book Type Module

• Test Plan

Table 28 Test Plan for Book Type Module

Test Test case Description Process Expected Outcome

no

1 Enter the Name of the The system shows the

Create New Book Type Book Type Success message about
the record creation.

2 Edit specific Book type Change the Book type The system shows the
name and click the edit confirmation
submit button. message.

3 Delete specific Book type. Click a specific Book The system shows the
type’ Delete button delete confirmation
message.

K.Sathurcigan Unit 10 Web Design And Development 130

 • Test Case

Table 29 Test Case for Book Type Module

Test Results
Input data Output Actual result
case (Pass/Fail)

Receive the
Book Type: Success message
1 Pass
- Medical about data
inserted.

Receive the
Book Type:
Success message
2 - Medical Pass
about data
(Health)
updated.

Click the
Receive the
Delete
Success message
3 button on Pass
about data
the view
deleted.
page.

The book type module functionalities such as create, view, update and delete are how was
ensured by using the dummy data is shown on the above chart.

K.Sathurcigan Unit 10 Web Design And Development 131

 6. Book Module
• Test Plan

Table 30 Test Plan for Book Module

Test Test case Description Process Expected Outcome

no

1 Enter the Name of the The system shows the

Create New Book Book Success message about
the record creation.

2 Edit specific Book Change any fields in The system shows the
Book form and click the edit confirmation
submit button. message.

3 Delete specific Book. Click a specific Book’ The system shows the
Delete button delete confirmation
message.

• Test Case

Table 31 Test Case for Book Module

Test Results
Input data Output Actual result
case (Pass/Fail)

Book Name: - Pacific Rim

Receive
ISBM: - NNJN12412
the
Description: - Thriller Sci-
Success
fi story Count: -10
1 message Pass
Status: - Active Rating: -
about
2.0 Book Type: -
data
Science Fiction (Sci-Fi)
inserted.
Author: - Jk rowling

K.Sathurcigan Unit 10 Web Design And Development 132

 Receive
the
Success
2 Count: - 15 message Pass
about
data
updated.

Receive
the
Success
Click the Delete button on
3 message Pass
the view page.
about
data
deleted.

The above chart shows the details of how was the book module’ functionalities were tested
through the test case process.

7. Reservation Module
• Test Plan

Table 32 Test Plan for Reservation Module

Test Test case Description Process Expected Outcome

no

Click the reserve button The system shows the

1 Reserve a Book for any specific book Alert message about the
new reservation.

K.Sathurcigan Unit 10 Web Design And Development 133

 • Test Case

Table 33 Test Case for Reservation Module

Test Results
Input data Output Actual result
case (Pass/Fail)

Receive
the
Click the reserve Success
1 button for any message Pass
Pacific Rim book about data
Reservati
on.

The reservation module is most important for this application because this application is
developed to reduce the manual works of the library and reservation has the most important
part in that. The reservation module’ functionalities such as reserve book and cancel the
reservation these things are how was ensured through the test case process, which is shown on
the above chart.

8. Lend Module
• Test Plan

Table 34 Test Plan for Lend Module

Test Test case Description Process Expected Outcome

no

The system shows the

Click the Lend this confirmation message
1 Lend the Book
button and takes the user to the
return data fixing page.

K.Sathurcigan Unit 10 Web Design And Development 134

 The record will delete
Put the return date for the Enter the return date for from the lend list page
2
Lend the Lend and the system take the
user into lend list page.

• Test Case

Table 35 Test Case for Lend Module

Test Results
Input data Output Actual result
case (Pass/Fail)

Receive the
Confirmati
Click the reserve
on message
1 button for any Pass
about data
Pacific Rim book
Reservation
.

Return the
Return date: - user into
2 Pass
03/30/2021 lend list
page.

This is another important activity of the manual library activities is lending, after digitalizing
this function, the need to ensure the efficiency of the function. So, how was the lend
functionalities such as approve the reservation (lend confirmation) and track the lending details
through the lend history page were tested, these details are shown on the above chart.

K.Sathurcigan Unit 10 Web Design And Development 135

 9. Return Module
• Test Plan

Table 36 Test Plan for Return Module

Test Test case Description Process Expected Outcome

no

The system shows the

confirmation message
1 Return the Book Click the Return button
and takes the user to the
return data fixing page.

Put the rating for the Return to the user to

Put the rating for the book
2 book and press the save return list page
when returning that.
button

Put the rating for the Return to the user to

Put the fine for the Late
3 book and put fine amount return list page
return
then press the save button

• Test Case

Table 37 Test Case for Return Module

Test Results
Input data Output Actual result
case (Pass/Fail)

Receive the
Confirmati
Click the Return
1 on message Pass
button.
about Book
Return.

K.Sathurcigan Unit 10 Web Design And Development 136

 Return the
user into
2 Rating: - 6.0 Pass
return list
page.

Enter the Fine

amount: 600.00

3 Rating: - 6.2

Description: -
Late submission

Once the book was borrowed from the library, that should be returned to the library. For this,
the return module was designed. The above chart shows the details about how was the
functionalities of the return module such as return book and fine were tested.

10. Logout
• Test Plan

Table 38 Test Plan for Logout

Test Test case Description Process Expected Outcome

no

Go to the profile and Return the user to the

1 Logout from the System
press the Sign-out button Login page

K.Sathurcigan Unit 10 Web Design And Development 137

 • Test Case

Table 39 Test Case for Logout

Test Results
Input data Output Actual result
case (Pass/Fail)

Click the Sign-out Reach the

1 Pass
button. Login page

After finish, the user activities on the application who should logout of his account to avoid the
other persons access through his profile to the application. For this, the logout option was
created on the application, how was the function were tested detail is a show on the above chart.

Conclusion: - The test case is important for identifying the bugs of the developed application,
and what are future upgrades are needed for the application. So, the above test cases were
helped to ensure the functionalities’ efficiency of the LOWA online library. While doing the
test case, some faults of the applications were identified and after that that bugs are minimized
by the developer. So, the test case is very important in the development sector.

4.2.4 Required Improvements for the LOWA Online Library System

• Contact with Librarian: - This function is important sometimes because if any problems
accessing the system, the user need to clarify with the librarian about the issue. So, by
building this functionality on this application the user can contact the librarian via messages
or Emails or phone call.

• Security features: - If the user tries to enter a weak password when creating his profile,
the application should mention the issue. This is feature is will be implanted on the
application in future.

K.Sathurcigan Unit 10 Web Design And Development 138

• Maintenance alert: - If there any alerts need to deliver to the users of the LOWA online
library, there are no components for doing that job in this application, so the alert sharing
feature needs to add to this application in future. If is that build then such as maintenance
alerts (server maintenance break) can be sent to the user.

• SMS or E-mail verifications: - When the user try to reserve any book, automatically the
user receives an SMS or Email from the web application and if the user confirms the SMS
or Email, the reservation will be succeeded. The same method will be kept on when the
user returns the who will receive the confirmation message via SMS about the book return.

• Confirmation Alerts: - When the user reserves any book successfully, within one day from
the book reserved the user need to get the book from the library if is not, the reservation
should be automatically cancelled. For this, the application needs to show the alert message
to the user to remember about the reservation.

• Users review: - The application does not have the review sharing feature for share the
users’ review about the book, the review option is helped to find good content books. So,
this part will help the user identify the book content value.

• Digital payment: - If the user has to pay a penalty for late submission, the money must
now be paid directly to the librarian. In the future, if include a payment portal in this
application for money transfer, this will help to confirm and monitor the money transfer
details.

K.Sathurcigan Unit 10 Web Design And Development 139

4.3 Prepare a user documentation to properly guide the users of the
implemented system.
User Guide for Admin (Librarian)
The User Guide is helpful to use the system by using all functions of the system. There are
several types of users, so which help to access the system within user limitations. I.e. the guide
explains the details of privileges assigning. So, the user can understand his access. And the
gives a clear idea also about the system how is work.

The User Guide for All Users of LOWA Online Library System

K.Sathurcigan Unit 10 Web Design And Development 140

Contents
Introduction ............................................................................................................................ 142

Description of the LOWA Online Library Management System ...................................... 142

Login .............................................................................................................................. 142

Dashboard ...................................................................................................................... 143

Sidebar usage ................................................................................................................. 144

Navigation bar usage ...................................................................................................... 144

Data Table usage ............................................................................................................ 145

User Type Module ......................................................................................................... 145

Users Module ................................................................................................................. 148

Book Type Module ........................................................................................................ 152

Author Module ............................................................................................................... 153

Book Module.................................................................................................................. 154

Reservation Module ....................................................................................................... 157

Lend Module .................................................................................................................. 158

Return Module ............................................................................................................... 160

System Requirements............................................................................................................. 162

Hardware ............................................................................................................................ 162

Software ............................................................................................................................. 162

Conclusion ............................................................................................................................. 162

K.Sathurcigan Unit 10 Web Design And Development 141

Introduction
This user guide gives a clear idea about the Online Library Management System. The LOWA
University has only one library for its all faculties. They manage the book borrowing activity
manually but it is not satisfactory for the students and library management because they feel
some issues with manual book borrowing and returning activities. So, they like to move on to
the Online management system which contains reservation, lend, return and fine option also.
According to this requirement, this LOWA Online Library System has been developed.

Description of the LOWA Online Library Management System

The LOWA library has three types of users, those are librarian, lecturer and students and if the
user is first time enter into the system without a user account, who seen as a guest by the system.
So, the user has some limitation on the access in the system to keep the proper management.
In this scenario, the librarian is the admin of this system so only he can access the entire system’
functionalities and only he can create another librarian. Other users, can only reserve the book
through the system. This system was developed as a web-based system so can access this
anywhere and by using any devices (mobile, laptop, tab).

The following things explain one by one how the system is working and how the limitation
will secure the activities of the library.
Login

Figure 112 Login page of the system

K.Sathurcigan Unit 10 Web Design And Development 142

This page will decide the users’ limitations of the system because the user needs to enter his
specific username and password here. Based on these details, the system will find the users’
user type. If the user was a librarian, he will access the entire system, or some certain functions
can be accessed by the user. If the user doesn’t have an account in this system, he needs to
create an account his self, for this reason, the ‘Create New Account’ link was placed on there.
Through this link, the user can reach the new user creating the page and create a user account
which can’t be a librarian account because the librarian only can create another librarian
account.

Based on this login activity, the users can reach the dashboard of the system. The privileges
that will be assigned to the user are based on the user type which is identified on the login page.
So, no one can misuse the system. This is a security setup.

Dashboard

Figure 113 Dashboard

If the user successfully login with the system, reach this dashboard which is common for all
users. By using this user (Librarian) can reach other pages.

K.Sathurcigan Unit 10 Web Design And Development 143

Sidebar usage

Figure 114 Sidebar

By click, the options on this sidebar can visit all pages of this LOWA online library system.
On this sidebar, the username and his profile picture are showing.

Navigation bar usage

Figure 115 Navigation bar

This part is very important to find out the current position of the page, which will change based
on the pages.

K.Sathurcigan Unit 10 Web Design And Development 144

Data Table usage

Figure 116 Data Table

By using the data table can show the stored data properly. There are some special functionalities
does the data table has. By using those functionalities, can do the work easy. For example, the
search bar can filter the data, and also there are options for making a limit of the view of the
data. Such the data table has some functions, which is why the data table is better than the
normal table.

User Type Module

This module contains create, update and delete user type. The librarian only accesses this page
and create new user types by using the following form.
I. Create User Type

Figure 117 New User Type Creation

K.Sathurcigan Unit 10 Web Design And Development 145

By using this page, new user types can be creatable and the librarian will access this page. After
filling the required fields, can create the new user type by pressing the 'save' button. Then, the
created user type will be showable in relatable pages to this page.
II. View User Type

Figure 118 User Type view page

This page was created to maintain the user types. If there any unwanted user types are in, the
librarian can remove or edit the user types through this page. Because these features only are
placed on this page.
III. Edit or Update User Type

Figure 119 User Type Update page

When the librarian presses the edit icon on the view page of the user type, he will reach this
page. And he can able to change the selected user type as is he wish. After the edit will save
the changes by using the ‘Update’ button.

K.Sathurcigan Unit 10 Web Design And Development 146

IV. Delete User type

Figure 120 View & Delete User Type

The above page is the view page of the user types. By using this page, the user (Librarian) can
edit or delete the user type by pressing the buttons. If the user presses the delete button,
receives the alert message about the delete confirmation. Then the user will make the final
decision about if the user type needs to delete or not. For this function, the confirmation
message is shown in the below picture.

Figure 121 Delete Confirmation Message

This is a confirmation message regarding the user type deletion action. After this message, the
user will decide if the user type should be present or not.

Similarly, other modules have these functions, which are as follows.

K.Sathurcigan Unit 10 Web Design And Development 147

Users Module
This also the same as the User type module but which has some more information collecting
factors. But the functionalities are the same. E.g. Create users, View Users, Edit Users and
Delete Users.
I. Create Users

Figure 122 Create Users

The above picture shows the details about the user creating factors. After filling this form, the
user (Librarian or others) can create the user account by using pressing the submit button. But
the librarian only can create another librarian account.
a. Field for creating User

Figure 123 Field for Create User

K.Sathurcigan Unit 10 Web Design And Development 148

 Table 40 Details about the User

1 This field record the User’ first name.

2 This field record the User’ last name.
3 This field record the User’ address.
4 This field chose the User’ profile picture.
5 This field record the User’ contact number.
6 This field record the User’ NIC or Password or License number.
7 This field record the User’ gender.
8 This field record the User’ E-mail address.
9 This field used to record the User’ username. I.e. which name is used
when login into the system, that called username.
10 This field record the User’ password.
11 This field record the User’ user type.

II. View Users

Figure 124 Users View

The created users account related details were shown in the above picture. This also similar to
the user type module, the librarian only can access this page and edit or delete a user account.

K.Sathurcigan Unit 10 Web Design And Development 149

 Figure 125 Button Operations in Users module

The above picture shows what is a function that can be done into here into the user module.
I.e., the Librarian can edit the users account by using the edit button, change the profile picture
by using the profile edit button and delete the users account using the delete button. When users
press the Edit Profile Image button, they reach the Profile Image Change page. Pressing the
Edit button will take you to the Edit page.

III. Edit or Update Users

Figure 126 Users Edit page

When pressing the edit button, the user will reach the edit page. After making changes on the
user's account, by using the submit button, can save the changes on the user's account.

K.Sathurcigan Unit 10 Web Design And Development 150

IV. Edit Profile Picture

Figure 127 Profile picture update

This is the profile picture update page; the older image is showing here and there is a field for
upload the profile image these details show on the above picture. After the new image
uploading can update the profile picture by using press the submit button.
V. Delete Users

Figure 128 Delete User

When the user (librarian) tries to delete another user, who must press the Delete button on the
user's view page. Librarian will then receive a deletion confirmation message, if selects ‘OK’,
the specific user profile will remain there until it is deleted or deleted from the database.

K.Sathurcigan Unit 10 Web Design And Development 151

Book Type Module
I. Create Book Type

Figure 129 Insert Book Type

This is a form for creating a new book type, which can be saved to the database by pressing the
Save button after entering the book type name.
II. View Book Type

Figure 130 View Book Type

The image above shows the book types stored in the database, and the user (librarian) can delete
or edit the book type through this page.

The edit and delete functions are similar to the user type module functionalities.

K.Sathurcigan Unit 10 Web Design And Development 152

Author Module
I. Create Author

Figure 131 Create Author

Once finish the data entering into the author, pressing the ‘submit button’ can save the author’
profile into the database. This detail was shown in the above picture. Every detail about the
field is given below.

Fields for Create Author

Figure 132 Fields for Authors creation

Table 41 Details about the Author

1 This field record the Author’ full name.

2 This field used to record the Author’ Display name. I.e. which name for
used in the book by the author that name should be entered here.
3 This field for recording further details about the author.

K.Sathurcigan Unit 10 Web Design And Development 153

 4 This field record the Author’ rating, which means the rating is ‘0.0’ at
the register the author profile will change after based on the reader's
review.
5 This field record the Author’ gender.
6 This field record the Author’ contact number.
7 This field for the record the Author’ Email address.

II. View Author

Figure 133 Author View

The saved profiles of the author will be shown here, same like the user module can update or
delete the author profile through the press the buttons here.

Book Module
I. Create Book

Figure 134 Create Book

K.Sathurcigan Unit 10 Web Design And Development 154

The above picture shows how to create a new book when adding a new book into the book self.
The main fields of the book creation are given below.

Fields for Create Book

Table 2 Details about the Book

1 This field record the Book name.

2 This field used to record the Book’ ISBM Number.
3 This field for record further details about the Book.
4 This field record the Book count.
5 This field record the Book status. When creating a new book, the status
will be 'active ' then it will be changed based on the availability of the
book.
6 This field for record the Book’ rating, which means the rating is ‘0.0’
at creating a new book it will change after based on the reader's review.
7 This field for recording the book 'type. Here the librarian can choose
the book type based on which book type has already been created.
8 This field for recording the book’ author. Here the librarian can choose
the Author based on which Author profile has already been created.
9 This field for the record the Book image. This will be used to show the
book to the readers (users).

After fill, this all field of the book creation form, by pressing the ‘Submit’ button can save the
book details into the database.

K.Sathurcigan Unit 10 Web Design And Development 155

II. View Book

Figure 135 Book view

The above picture shows the details of the already existing data of the books. Similar to the
user module, this page can do update the Book details and image or delete the book.

K.Sathurcigan Unit 10 Web Design And Development 156

Reservation Module
I. New Reservation

Figure 136 Reservable Books

This picture shows the details about the Reserve list page. Through the reservation, the list page
can reserve the book based on their rating or book type. This page is most important for this
LOWA online Library system. Just press the ‘Reserve’ button, can reserve the specific book.
When the librarian permits the reservation, can get the book from the library. Once reserve any
book, that will be shown on the My reservation page.

K.Sathurcigan Unit 10 Web Design And Development 157

II. My Reservations

Figure 137 My Reservation

This is the ‘My Reservations’ page, through this can cancel the reservations by press the
‘Cancel This’ button. And also, can identify which book reservation request was pending based
on its status show as ‘Active’ and if the request already has been done, those status show as
‘Completed’. These kinds of details can the user absorb from this page.
Lend Module
I. Lend list

Figure 138 Lend list

K.Sathurcigan Unit 10 Web Design And Development 158

This page is used to give the approval by the librarian to the user for borrow the specific book
which already reserved by him. This page only shows which reserve process was pending
(status as ‘Active’). The librarian presses the ‘Approve’ button to approve the specific
reservation request and let the user borrow the book.
II. Lend Process

Figure 139 Lend Confirmation

The above picture shows the details about when the librarian tries to lend a book to any users,
must mention the return date through this page. This data will be considered at the book
returning time for find, is the return need to fined or not.
II. Lend History

Figure 140 Lend History

K.Sathurcigan Unit 10 Web Design And Development 159

This page just only shows the lend’ history details. There are no actions that can be done on
this page, by using this page can track the user’s behaviour which means the librarian can
identify if they return the book on time or not.

Return Module
I. Return List

Figure 141 Return list

This page is used to return the borrowed book. This page will be accessed by the librarian,
when the user coming to the library to return the book, through this page the librarian gets the
book. The fine making decision will be taken by the librarian to the user on this page based on
the return date.
II. Return process

Figure 31 Return Process

K.Sathurcigan Unit 10 Web Design And Development 160

When the user returns the book, the librarian should save the return activity into the database.
If the user returns the book after the return date, that user should be fined. The above picture
shows this function. For fined the user, the librarian should enter the fine amount and a small
description about the return activity. The book rating will be in all type of book returns. The
librarian should enter the rating for the book when the user returns the book at not only ‘On
time’ but also ‘Delay’.

III. Return History

Figure 32 Return History

K.Sathurcigan Unit 10 Web Design And Development 161

This page is used to collect the details about the previous book returns. Through this, if there
any book was missed in the library, can track or find the book and find what happened to the
book. This is an important thing for this system. This page is created to only show the return
history, which is not able to take any actions. By using the status column, can find whether a
fine has been imposed for the specific return.

System Requirements
This is a web-based application, so the minimum system requirement is enough to run the
application.

Hardware
Memory: - 4-GB RAM or more
Processor: - 3.3 gigahertz (GHz) or faster 64-bit dual-core processor with SSE2 instruction set
Display: - Super VGA with a resolution of 1024 x 768

Software
Operating system: - Windows* Server, Linux*, or any operating system that can run as a
webserver, capable of delivering HTML5 content, including JSON and
MP4.

• XAMPP software
• Web browser (suitable)

Conclusion
By using this web-based application, can reserve the books and also the librarian can easily
monitor the book borrowing process. This can be one of the steps for a move from the
traditional method to the digitalized method in library activities. This makes a good experience
for the user for book borrowing activities. And also, this is an everyone understandable
application, so easy to access this. And the user can do the reservation 24 hours per day.

K.Sathurcigan Unit 10 Web Design And Development 162

User Guide for Others (Students / Professors)
Following the user guide gives a clear idea about the access privileges of other users such as
professor and student.

The User Guide for All Users of LOWA Online Library System

K.Sathurcigan Unit 10 Web Design And Development 163

Contents
Introduction ............................................................................................................................ 165

Description of the LOWA Online Library Management System ...................................... 165

Login .............................................................................................................................. 165

Dashboard ...................................................................................................................... 166

Sidebar usage ................................................................................................................. 167

Navigation bar usage ...................................................................................................... 167

Users Module ................................................................................................................. 168

Reservation Module ....................................................................................................... 170

System Requirements............................................................................................................. 171

Hardware ............................................................................................................................ 172

Software ............................................................................................................................. 172

Conclusion ............................................................................................................................. 172

K.Sathurcigan Unit 10 Web Design And Development 164

Introduction
This user guide gives a clear idea about the Online Library Management System. The LOWA
University has only one library for its all faculties. They manage the book borrowing activity
manually but it is not satisfactory for the students and library management because they feel
some issues with manual book borrowing and returning activities. So, they like to move on to
the Online management system which contains reservation, lend, return and fine option also.
According to this requirement, this LOWA Online Library System has been developed.

Description of the LOWA Online Library Management System

The LOWA library has three types of users, those are librarian, lecturer and students and if the
user is first time enter into the system without a user account, who seen as a guest by the system.
So, the user has some limitation on the access in the system to keep the proper management.
In this scenario, the librarian is the admin of this system so only he can access the entire system’
functionalities and only he can create another librarian. Other users, can only reserve the book
through the system. This system was developed as a web-based system so can access this
anywhere and by using any devices (mobile, laptop, tab).

The following things explain one by one how the system is working and how the limitation
will secure the activities of the library.
Login

Figure 142 Login page of the system

K.Sathurcigan Unit 10 Web Design And Development 165

This page will decide the users’ limitations of the system because the user needs to enter his
specific username and password here. Based on these details, the system will find the users’
user type. If the user was a librarian, he will access the entire system, or some certain functions
can be accessed by the user. If the user doesn’t have an account in this system, he needs to
create an account his self, for this reason, the ‘Create New Account’ link was placed on there.
Through this link, the user can reach the new user creating the page and create a user account
which can’t be a librarian account because the librarian only can create another librarian
account.

Based on this login activity, the users can reach the dashboard of the system. The privileges
that will be assigned to the user are based on the user type which is identified on the login page.
So, no one can misuse the system. This is a security setup.

Dashboard

Figure 143 Dashboard

Another user only accesses the system for reserve books, so the dashboard shows the
reservation page only, for the users (Students & Professors).

K.Sathurcigan Unit 10 Web Design And Development 166

Sidebar usage

Figure 144 Sidebar

By click, the options on this sidebar can visit all pages of this LOWA online library system.
On this sidebar, the username and his profile picture are showing.

Navigation bar usage

Figure 145 Navigation bar

This part is very important to find out the current position of the page, which will change based
on the pages.

K.Sathurcigan Unit 10 Web Design And Development 167

Users Module
This also the same as the User type module but which has some more information collecting
factors. But the functionalities are the same. E.g. Create users, View Users, Edit Users and
Delete Users.
I. Create Users

Figure 146 Create Users

The above picture shows the details about the user creating factors. After filling this form, the
user (Librarian or others) can create the user account by using pressing the submit button. But
the librarian only can create another librarian account.

a. Field for creating User

Figure 147 Field for Create User

K.Sathurcigan Unit 10 Web Design And Development 168

 Table 42 Details about the User

1 This field record the User’ first name.

2 This field record the User’ last name.
3 This field record the User’ address.
4 This field chose the User’ profile picture.
5 This field record the User’ contact number.
6 This field record the User’ NIC or Password or License number.
7 This field record the User’ gender.
8 This field record the User’ E-mail address.
9 This field used to record the User’ username. I.e. which name is used
when login into the system, that called username.
10 This field record the User’ password.
11 This field record the User’ user type.

II. Edit or Update Users

Figure 148 Users Edit page

When pressing the edit button on the user profile, the user will reach the edit page. After making
changes on the user's account, by using the submit button, can save the changes on the user's
account.

K.Sathurcigan Unit 10 Web Design And Development 169

III. Edit Profile Picture

Figure 149 Profile picture update

This is the profile picture update page; the older image is showing here and there is a field for
upload the profile image these details show on the above picture. After the new image
uploading can update the profile picture by using press the submit button.

Reservation Module
I. New Reservation

Figure 150 Reservable Books

K.Sathurcigan Unit 10 Web Design And Development 170

This picture shows the details about the Reserve list page. Through the reservation, the list page
can reserve the book based on their rating or book type. This page is most important for this
LOWA online Library system. Just press the ‘Reserve’ button, can reserve the specific book.
When the librarian permits the reservation, can get the book from the library. Once reserve any
book, that will be shown on the My reservation page.

II. My Reservations

Figure 151 My Reservation

This is the ‘My Reservations’ page, through this can cancel the reservations by press the
‘Cancel This’ button. And also, can identify which book reservation request was pending based
on its status show as ‘Active’ and if the request already has been done, those status show as
‘Completed’. These kinds of details can the user absorb from this page.

System Requirements
This is a web-based application, so the minimum system requirement is enough to run the
application
.

K.Sathurcigan Unit 10 Web Design And Development 171

Hardware
Memory: - 4-GB RAM or more
Processor: - 3.3 gigahertz (GHz) or faster 64-bit dual-core processor with SSE2 instruction set
Display: - Super VGA with a resolution of 1024 x 768

Software
Operating system: - Windows* Server, Linux*, or any operating system that can run as a
webserver, capable of delivering HTML5 content, including JSON and
MP4.

• XAMPP software
• Web browser (suitable)

Conclusion
By using this web-based application, can reserve the books and also the librarian can easily
monitor the book borrowing process. This can be one of the steps for a move from the
traditional method to the digitalized method in library activities. This makes a good experience
for the user for book borrowing activities. And also, this is an everyone understandable
application, so easy to access this. And the user can do the reservation 24 hours per day.

K.Sathurcigan Unit 10 Web Design And Development 172

Conclusion
The assignment contains Communication protocols, server hardware, web server and operating
system how to work together for publishing the web site and the importance of doing the SEO
for the websites and the differences between the online website creation tools and custom-built
website tools.

And learn about the relationship between the front-end development and back-end
development of the website by using this knowledge can differentiate the skill for each
development and can improve the skill for that.

And more important of the web design and development subject is which contains how to do
the UI design for the web application and how to convert the UI design to front-end’ interfaces.
And learn about how to connect with a database to transmit the data between the website and
database.

The LOWA Online Library System was how developed by using the techniques were told
above and how that’s work and how was that’s functionalities were checked by the developer
this kind of Activities’ evidence were included in this assignment.

By did this assignment, got a clear idea about web design and development. I.e. the frameworks
and some kind of techniques were how to apply for a web-based application is learn from this
assignment. So, this is a good experience for me in web development.

K.Sathurcigan Unit 10 Web Design And Development 173

Self-Criticism
According to this assignment, learn about how to create UI designs and front-end development
and back-end development. This kind of study will help in future works. So, Web application
development is much better than other subjects.

Learn skill on the duration of doing the assignment

• Learn about how to collect the user requirements

• Learn about how to design the UI for a specific application
• Learn about how to use the Sublime text editor to do the front-end and back-end
developments
• Learn about the XAMPP and which purpose of using that.
• Learn about the differences between the online creation tool and custom-built website
tools.
• Learn about how to apply and choose the framework for web application development.
• Learn about the importance of writing the custom CSS for the web page.

So, on the duration of done the Web design and development subject, learn more useful
knowledge and techniques for using the web application development.

K.Sathurcigan Unit 10 Web Design And Development 174

 Gantt Chart

Aug 2020 Sep 2020 Oct 2020 Nov 2020 Dec 2020
ID Tasks Start Finish Duration
2/8 9/8 16/8 23/8 30/8 6/9 13/9 20/9 27/9 4/10 11/10 18/10 25/10 1/11 8/11 15/11 22/11 29/11 6/12 13/12 20/12

Identify the communication protocols,

1 server hardware, OS and web server are 8/1/2020 8/5/2020 5d
how to help with run the web application.

2 Identify the usages of DNS and SEO 8/6/2020 8/10/2020 5d

Identify the relationship between the front-

3 8/11/2020 8/15/2020 5d
end & back-end development

Find the requirements and develop the UI

4 8/16/2020 9/4/2020 20d
design for the LOWA inline library

Develop the Frot-end for the LOWA online

5 9/5/2020 10/19/2020 45d
library

Develop the Back-end for the LOWA

6 10/20/2020 11/28/2020 40d
online Library

Test the Entire System and get feedback

7 11/29/2020 12/6/2020 8d
about that.

Evaluate the future improvemants of the

8 12/7/2020 12/26/2020 20d
system

Figure 152 Gantt chart

K.Sathurcigan Unit 10 Web Design And Development 175

References

BitDegree, 2021. BitDegree. [Online]

Available at: https://www.bitdegree.org/tutorials/front-end-frameworks/#bootstrap-the-
industry-giant
[Accessed 28 March 2021].

Fisher, T., 2020. What Is a DNS Server?. [Online]

Available at: https://www.lifewire.com/what-is-a-dns-server-
2625854#:~:text=A%20DNS%20server%20is%20a%20computer%20server%20that,and%20
communicate%20with%20each%20other%20using%20special%20protocols.
[Accessed 06 September 2020].

Function, W. B., 2020. Web Browser Function. [Online]

Available at: https://manuals.konicaminolta.eu/bizhub-C3851FS-C3851-C3351-
UD/EN/contents/id09-_102363309.html
[Accessed 30 October 2020].

Guru99, 2021. What is Operating System? Types of OS, Features and Examples. [Online]
Available at: https://www.guru99.com/operating-system-tutorial.html
[Accessed 1 April 2021].

Hope, C., 2020. Search engine. [Online]

Available at: https://www.computerhope.com/jargon/s/searengi.htm
[Accessed 15 September 2020].

Kohan, B., 2020. Guide to Web Application Development. [Online]

Available at: https://www.comentum.com/guide-to-web-application-development.html
[Accessed 15 November 2020].

K.Sathurcigan Unit 10 Web Design And Development 176

MUO, 2021. MUO. [Online]
Available at: https://www.makeuseof.com/tag/what-is-javascript/
[Accessed 15 March 2021].

Normalization, D., 2020. Database Normalization. [Online]

Available at: https://www.w3schools.in/dbms/database-normalization/
[Accessed 17 August 2020].

NS1., 2021. DNS: Types of DNS Records, DNS Servers and DNS Query Types. [Online]
Available at: https://ns1.com/resources/dns-types-records-servers-and-queries
[Accessed 13 February 2021].

Purifoy, J., 2020 . NETWORK SERVER TYPES EXPLAINED. [Online]

Available at: https://www.nhgeorgia.com/blog/network-server-types-explained-6
[Accessed 14 June 2020].

QRA, 2020. Functional vs Non-Functional Requirements: The Definitive Guide. [Online]

Available at: https://qracorp.com/functional-vs-non-functional-requirements/
[Accessed 12 February 2021].

Reg, 2021. Reg Support Centre. [Online]

Available at: https://www.123-reg.co.uk/support/servers/what-is-mysql-and-why-do-i-need-it/
[Accessed 15 March 2021].

Shinder, D. W., 2003. MCSE 70-293: Planning Server Roles and Server Security. [Online]
Available at: https://www.sciencedirect.com/topics/computer-science/database-server
[Accessed 19 November 2020].

Sublime, 2021. A sophisticated text editor for. [Online]

Available at: https://www.sublimetext.com/
[Accessed 07 April 2021].

K.Sathurcigan Unit 10 Web Design And Development 177

TechTarget, 2020. 3-tier application architecture. [Online]
Available at: https://searchsoftwarequality.techtarget.com/definition/3-tier-application
[Accessed 29 October 2020].

TechTerms, 2019. Protocol. [Online]

Available at:
https://techterms.com/definition/protocol#:~:text=A%20protocol%20is%20a%20standard,pro
tocol%20as%20a%20spoken%20language.
[Accessed 03 November 2020].

TechTerms, 2020. Mail Server. [Online]

Available at: https://techterms.com/definition/mail_server
[Accessed 19 November 2020].

TechTerms, 2020. Web Server. [Online]

Available at: https://techterms.com/definition/web_server
[Accessed 19 November 2020].

Times, T. E., 2021. Definition of 'Web Server'. [Online]

Available at: https://economictimes.indiatimes.com/definition/web-server
[Accessed 22 March 2021].

Wood, K., 2016. What Are DNS Records, And How Do They Work?. [Online]
Available at: https://www.hostgator.com/blog/what-are-dns-records/
[Accessed 30 October 2020].

K.Sathurcigan Unit 10 Web Design And Development 178