See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/373256495

ECE - Project12 - Implementation of network infrastructure for an interior

design company

Thesis · August 2023

DOI: 10.13140/RG.2.2.28550.55367

CITATIONS READS

0 722

9 authors, including:

Mohamed Mahmoud Ashour Haitham M. Abdelghany

Mansoura University Mansoura University
36 PUBLICATIONS 34 CITATIONS 10 PUBLICATIONS 14 CITATIONS

SEE PROFILE SEE PROFILE

All content following this page was uploaded by Mohamed Mahmoud Ashour on 21 August 2023.

The user has requested enhancement of the downloaded file.

 Mansoura University
Faculty of Engineering
Department of Electronics and Communications
Engineering

Project
Implementation of network infrastructure
for an interior design company

BY
Omar Ahmed Elsnossy Omar Ezzat Elgraihy
Omar Ahmed Omar Omar Hamdy Elnaghy
Olees Hazem Sayed Aia Waleed Elgendy

Supervisor
DR/Mohammed Ashour
Assistant
Eng/Haitham Abd Elghany
2
Table of Contents
1. Executive Summary .................................................... 8
1.1 Overview ...........................................................................................9

1.2 Project Objectives……………………………………………………………………… 10

1.3 Project Proposal…………………………………………………………………………10

1.4 Summary of Recommendation…….......……..…………………….………....11

2. Logical Design………………………..…………………………….11

3. A.O.M Network Scenario Implementation……….15

3.1 Summary of our A.O.M Company Project Implementation………..15

3.2 Topology of first Branch……………………..……..………………………………16

3.3 Topology of second Branch…….…………….………..………………………….16

3.4 Hardware used in the topology…………………..……………………………..17

3.5 EVE-NG………………………………………………………………………………………17

4. Sophos XG Firewall……………….…..….…………………….18
4.1 IP Addressing………………..……………………..…………………………………….19

4.1.1 Set IPs on Sophos XG Firewall ports………..………………………………19

4.2 Zones………………..…………………………………………………………………..…..20

5. Rules………………………………….……………………………..…21
5.1 Firewall Rules…………………..…………………………………………………………21

5.2 NAT Rules…………………………………….…………………………………………….21

3
5.3 Add Firewall and NAT Rules…………………..…………………………………..22

6. OSPF Routing Protocol……………………..…………..……22

6.1 Applying OSPF Routing Protocol on Sophos XG…………..………..…...24

6.2Check the neighbors of the (Sophos XG) …..……………………….………25

7. VLANs (Virtual Local Area Network)………..……….…26

7.1 Trunking Protocols……………………….…………………………………………….27

7.2 Switchport Mode………..……………………………………..………………………29

8. VLAN Trunking Protocol (VTP)………………………...….31

8.1 Creating VLANs………………………………..…………………………………………32

9. Inter VLAN Routing…………….…………………………….…33

9.1 Add VLAN interfaces on Sophos XG Firewall…..……………………….33

10. DHCP Server………………………….…………….…….….….34

10.1 DHCP Server Basic Configuration…………………………………………..…35

10.2 Add DHCP Relay on Sophos XG Firewall…….…………………………..…37

DHCP Lease………………………………………………………………………………………38

11. Spanning Tree Protocol (STP)………………....……..…40

11.1 Spanning Tree Portfast……………………………………….……………………41

12. Domain Controller (DC)………………….……………...…42

12.1 Setup domain controllers in Active Directory……….……….………..43

12.2 Create Organization Units…………………….……………..………………….45

4
12.3 Join Domain…………………………….……………………………………….……..46

13. VPN……………………….…………………...…….……………...47
13.1 Site to Site VPN………………………………………………………………………..48

13.2 Configure VPN Site to Site on Sophos XG on two branches..……49

14. Security……………………..……………..………………………50
14.1 Rules and Policies on Firewall……………………………….…….…………..50

14.1.1 Web Policies…………………...………………………..…………………….…….50

14.1.2 Application Filter………………..….…………..………….………...…………..53

14.2 Intrusion Prevention…………..….……….……………….…………..…………52

14.2.1 IPS Policies………………………………….…...……………………..…………….55

14.2.2 DoS & Spoof Protection………………………………..……..………..56

15. Network Traffic Monitoring….…………………..…….57

15.1 Monitoring using SysLog Server………………………………….……….….58

15.2 Monitoring using Sophos XG Firewall………………………….………….59

15.2.1 Control Center…………….….……………………………………….……………60

15.2.2 Log Viewer………….……….……………………………………………………….60

15.2.3 Packet Capture………………………….…………………………..……….……61

15.2.4 Connection List………………..……………………………………..………….…61

15.2.5 System Graphs……………………..….……………………………………..……62

5
 16. The Website……….…..……..………………….….......……63
16.1 Executive Summary…………….……………………………………………..…….63

16.2 Overview………………………………………………………………………………….63

16.3 Designing the website front page………………………………..…………..66

16.4 Coding the front-end code of home page………………………….…….74

16.5 The Coding Languages and the programs used……………….……....81

16.6 Uploading our site on GitHub online platform………………………….82

16.7 Web Server………………………………………………………………………………83

16.7.1Internet Information Services (IIS)………………………………………...84

17. Application………….….………………………………..………85
VS Code………………………………………………………………………………..………….85

Android Studio……………………………………………………………………………..….88

Flutter…………………….………………………………………………………..……………..92

Debugging VS Code………………………………………………………………..………..95

Google Sign in with Flutter………………………………………………..…..………..96

Screens of The Application……………………………………………………..……....99

Company’s Application………………………………………………………….……….101

Screens from Adobe XD……………………………..………………………………….102

18. References………………………………………..…………….107

6
7
1. EXECUTIVE SUMMARY

It is an Implementation of new network system that supports e-mail,

basic Internet access, and a few specialized graphics software tools.
And good productivity and security of data. The project also has
Website and Android application. The proposed design that follows
involves everything of the network. The result is going to be a high
speed, reliable and easy maintenance network components. Our
network has several features like Sophos XG firewall, DHCP server,
Web server, E-mail exchange, VPN, Syslog server and AAA
authentication. The hardware will use up-to-date, compatible
technologies that will greatly facilitate troubleshooting and
maintenance.

8
1.1 OVERVIEW

AOM is an interior design company located in Mansoura city, with

approximately 25 staff members supporting up customers. The
company is interested in designing its network system in its facility.
The company network carries customers’ data in real time from both
a mainframe host and several servers to workstations in operating
rooms, Managers’ office, Sales office, Marketing office, Designers’
office. Of course, all the data transferred is highly confidential and
must not be lost or accessed by unauthorized personnel. The company
employs data encryption and email protection as a means of
protecting confidential customer information.
The company is medium sized and has 3 floors. 1st floor has 3
departments: HR, Sales, and Marketing. 2nd floor has 2 departments:
Managers, and Designers. 3rd floor has 2 departments: IT and
Operations rooms that contains servers, Routers and L3 switches.
Management wants a rapid network for customer’s comfort and do
not want slowness at peak hours. The design must be efficient and
well organized. The applications that the organization wants include
standard office applications, plus some specialized graphical software.

9
1.2 PROJECT OBJECTIVES

• network security
• network performance
• network availability
• Streamline network management
• network scalability
• Ease of use and manageability of the network
• Adaptability to new and changing user, application, and device
needs
• A user-friendly and responsive interface Application.
• Well planned information architecture Website.

1.3 PROJECT PROPOSAL

The following are the major design areas to be addressed:

• Hardware
• Network analysis
• Logical network design
• Physical network design
• Group policy: authentication and violation of info security
• Security
• Firewall
• Application
• Website
• Documentation

10
1.4 SUMMARY OF RECOMMENDATION
In summary, the primary goal of this project is to design the network
of AOM company. Accomplishment of the goal will be the design of
the company LAN and the WAN links, the creation of an isolated VLAN
for every department, and superior firewall protection. As part of our
design recommendation, the inclusion of the logical design and
specifications for the network is shown on a diagram. A security
evaluation attained to determine the security of the network,
incorporate toward the establishment of AOM network security policy
that takes into account the network design.

2. LOGICAL DESIGN

To meet AOM’s business and technical goals, the team applied the
Cisco SAFE Architecture in designing AOM network

logical design. The principal goal is to provide best practices

information on designing and implementing secure networks. This
architecture uses a modular approach. The modularity built into the
architecture allows flexibility in network design and facilitates
implementation and troubleshooting. Cisco SAFE Architecture takes a
defense -in-depth approach, in which multiple layers of protection are
strategically located throughout the network. These layers are under
unified strategy for protecting the entire network and the various
components of the network, including individual network segments,
infrastructure devices, network services, endpoints, and applications.

The logical network topology for AOM is divided into three functional
areas (also called modules), as illustrated in the logical design below.

11
 • Enterprise Campus - This area contains all the functions required
for independent operation within one campus location; it does
not provide remote connections.
• Enterprise Edge - This area contains all the functions required for
communication between the Enterprise Campus and remote
locations, including the Internet, remote employees, partners,
and so forth.

Each of these functional areas contains network modules, which in

turn can include the core, distribution, and access layer functionality.

The following are considerations provided to the functional areas and

modules.

AOM Campus Infrastructure Module

The Campus Infrastructure module connects devices within a

campus to the Data Center and Enterprise Edge modules. The
Campus Infrastructure module includes three layers:

• Access Layer

The Access layer, located within a campus building, aggregates end

users from different workgroups and provides uplinks to the Building
Distribution layer. This contains all the devices to allow authorized
users in the building to access the network. This includes end-user
devices, such as workstations, etc., as well as devices to interconnect
the end users to the services they require. This layer is responsible for
ensuring that only users who are authorized to access the network are
admitted. This layer provides important services, such as broadcast
suppression, protocol filtering, network access, IP multicast, and QoS.

• Distribution Layer

12
The Distribution layer provides access between workgroups and to the
Core. Routing is implemented in this layer. This layer controls access
to services by implementing filters or access lists. Redundant switches
and redundant links to both the access and backbone is also
implemented. So, in case the one of the routers or links will be down,
the network can still continue to function.

• Core Layer

The Core layer provides a high-speed connection between the access

layer, distribution and the data Server and Edge Distribution.
Redundancy is implemented to ensure a highly available and reliable
backbone.

Data Center Module

The data center contains internal AOM servers. These servers include
e-mail, file, and print servers, or any other servers that are necessary
for the network solutions. Redundancy is also implemented within this
layer and to the Core so that authorized users always have access to
the servers they need.

Edge Distribution Module

The Edge Distribution could be optional. This module aggregates the

connectivity from the various elements at the enterprise edge and
routes the traffic into the Campus Core layer. In addition, the Edge
Distribution module acts as a boundary between the Enterprise
Campus and the Enterprise Edge and is the last line of defense against
external attacks.
The Edge Distribution provides additional security between the
Enterprise Campus and the Enterprise Edge. The edge distribution
protects from the following threats:
13
 • IP spoofing—the edge distribution router protects the core from
spoofing of IP addresses.
• Unauthorized access—Controls access to the network core.
• Network reconnaissance—filtering of network discovery packets
to prevent discovery from External networks.
• Packet sniffers—the edge distribution separates the edge’s
broadcast domains from the campus, preventing possible
network packet captures.

Enterprise Edge Internet Connectivity Module

The Internet Connectivity module provides internal users with
connectivity to Internet services, such as HTTP, FTP, Simple Mail
Transfer Protocol (SMTP), and DNS. This module also provides Internet
users with access to information published on an enterprise’s public
servers, such as HTTP and FTP servers. Devices in this module include
DNS servers, public servers (FTP and HTTP), DMZ, firewalls, and edge
routers. Major components used in the Internet Connectivity module
include the following:
• DNS servers: Serve as the authoritative external DNS server for
the enterprise and relay internal DNS requests to the Internet.
• DMZ: It prevents outside users from getting direct access to a
server that has company data.
• Public servers (for example, FTP and HTTP): Provide public
information about the organization. Each server on the public
services segment contains host-based intrusion detection
systems (HIDS) to monitor against any rogue activity at the
operating system level and in common server applications
including HTTP, FTP, and SMTP.
• Firewalls: Provide network-level protection of resources,
provide stateful filtering of traffic, and forward VPN traffic from
remote sites and users for termination.
• Edge routers: Provide basic filtering and multilayer connectivity
to the Internet.

14
3. A.O.M Network Scenario Implementation
\
3.1 Summary of our A.O.M Company Project Implementation

We are implementing a project that is based on Execution of two

branches. We split the work of each branch into one Laptop. Our Two
laptops are connected to a physical Switch. Every laptop that is
implementing a branch has an adapter that has IP in the same network
and same subnet mask.
Physical Switch that we use:
• D-Link 8-port 10/100 Switch DES-1008A

Advantages:
• Eight Fast Ethernet LAN ports for high-speed wired connections
• D-Link Green Technology features power-saving by link status
and by cable length
• Auto-sensing ports automatically detect network connections
and adjust accordingly

15
3.2 Topology of first branch

3.3 Topology of second branch

16
3.4 Hardware used in every topology

Hardware Number of devices

Sophos XG Firewall 1
Layer 3 Switch 2
Switches 4
VPCS 6
Servers 3
Windows 10 VM 1

3.5 EVE-NG Software

We implemented the Network system through EVE-NG sotware.

EVE-NG stands for The Emulated Virtual Environment-Next Generation).
EVE-NG is a tool that provides network admins with ways to simulate
routers, switches, firewalls, and numerous other virtual appliances and
it has a GUI (Graphical User Interface) to manage the network.

17
4. Sophos XG Firewall

What is Firewall?
• Commonly describes systems or devices that are placed
between a trusted and an untrusted network.
• A firewall could control which user’s traffic is allowed through
the firewall.
• A firewall can detect and block malicious data.
What is Sophos XG?
Sophos XG Firewall is a comprehensive network security device, with
a zone-based firewall, and identity-based policies at its core.
XG Firewall does not only protect wired networks, but as a wireless
controller for Sophos access points, can provide secure wireless
networking functionality.

Why Sophos XG?

• It provides simplified configuration and supports

• It provides simplified security management system
• It can monitor and analyze of users current activities
• It has web-based GUI management interface
• You can set your rules on firewall
• It protects from cyber threats such as viruses, botnet and
intruders.

18
4.1 IP Addressing

Devices interface Address IPv4

Sophos XG Port A 172.16.3.100

Sophos XG Port B 192.168.75.130

Sophos XG Port C 172.16.2.100
Sophos XG Port D 192.168.11.99

4.1.1 set IPs on Sophos XG Firewall ports

19
4.2 Zones

20
5. Rules

Rules enable traffic to flow between zones and networks while

enforcing security controls, IP address translation, and decryption and
scanning.
There are Firewall rules, web server protection, NAT rule, SSL/TLS
inspection rules.

5.1 Firewall Rules

You can allow or disallow traffic flow between zones and networks
based on the matching criteria. You can implement policies, specify
access for endpoint devices and servers, and prioritize traffic

5.2 NAT rules

With Network Address Translation (NAT), you can change the IP

address and ports of traffic flowing between networks, generally
between a trusted and an untrusted network.
Source NAT and Destination NAT rules enable traffic to flow between
private and public networks by translation non-routable, private IP
addresses to routable, Public IP addresses. Loopback policies enable
traffic to flow between internal networks with unique subnets.

21
5.3 Add Firewall and NAT Rules

6. OSPF Routing Protocol

The OSPF (Open Shortest Path First) protocol is one of a family of IP

Routing protocols and is an Interior Gateway Protocol (IGP) for the
Internet, used to distribute IP routing information throughout a single
Autonomous System (AS) in an IP network.

The OSPF protocol is a link-state routing protocol, which means that

the routers exchange topology information with their nearest
neighbors. The topology information is flooded throughout the AS, so
that every within Firewall the AS has a complete picture of the
topology of the AS. This picture is then used to calculate end-to-end
paths through the AS, normally using a variant of the Dijkstra
algorithm. Therefore, in a link-state routing protocol, the next hop
address to which data is forwarded is determined by choosing the best
end-to-end path to the eventual destination.
22
The main advantage of a link state routing protocol like OSPF is that
the complete knowledge of topology allows routers to calculate
routes that satisfy particular criteria. This can be useful for traffic
engineering purposes, where routes can be constrained to meet
particular quality of service requirements. The main disadvantage of
a link state routing protocol is that it does not scale well as more
routers are added to the routing domain. Increasing the number of
routers increases the size and frequency of the topology updates, and
also the length of time it takes to calculate end-to-end routes. This
lack of scalability means that a link state routing protocol is unsuitable
for routing across the Internet at large, which is the reason why IGPs
only route traffic within a single AS.

Each OSPF router distributes information about its local state (usable
interfaces and reachable neighbors, and the cost of using each
interface) to other routers using a Link State Advertisement (LSA)
message. Each router uses the received messages to build up an
identical database that describes the topology of the AS.

From this database, each router calculates its own routing table using
a Shortest Path First (SPF) or Dijkstra algorithm. This routing table
contains all the destinations the routing protocol knows about,
associated with a next hop IP address and outgoing interface.

• The protocol recalculates routes when network topology

changes, using the Dijkstra algorithm, and minimises the
routing protocol traffic that it generates.
• It provides support for multiple paths of equal cost.
• It provides a multi-level hierarchy (two-level for OSPF) called
"area routing," so that information about the topology within
a defined area of the AS is hidden from routers outside this
area. This enables an additional level of routing protection
and a reduction in routing protocol traffic.

23
6.1 Applying OSPF Routing Protocol on Sophos XG

Router-id

Networks

24
Areas

6.2 Check the neighbors of the (Sophos XG).

25
7. VLANs (Virtual Local Area Network)

VLANs (Virtual LANs) are logical grouping of devices in the same

broadcast domain. VLANs are usually configured on switches by
placing some interfaces into one broadcast domain and some
interfaces into another. Each VLAN acts as a subgroup of the switch
ports in an Ethernet LAN.
VLANs can spread across multiple switches, with each VLAN being
treated as its own subnet or broadcast domain. This means that frames
broadcasted onto the network will be switched only between the ports
within the same VLAN.
A VLAN acts like a physical LAN, but it allows hosts to be grouped
together in the same broadcast domain even if they are not connected
to the same switch. Here are the main reasons why VLANs are used:

• VLANs increase the number of broadcast domains while

decreasing their size.
• VLANs reduce security risks by reducing the number of hosts
that receive copies of frames that the switches flood.
• you can keep hosts that hold sensitive data on a separate
VLAN to improve security.
• you can create more flexible network designs that group users
by department instead of by physical location.
• network changes are achieved with ease by just configuring a
port into the appropriate VLAN

26
7.1 Trunking Protocols

There are two protocols:

• ISL (Inter switch Link) for Ethernet.
• IEEE 802.1Q for Ethernet.

1- ISL:
• Cisco proprietary
• It encapsulates the original ethernet frame with 30 bytes.
• 26 bytes header and 4 bytes trailer.
• The VLAN ID in the header is 10 bits.
• Support any layer 2 protocol
• No Native VLAN

27
 2- IEEE 802.1q (dot1q):

• 802.1Q trunks support tagged and untagged Ethernet frames.

An untagged Ethernet frame is a standard unaltered Ethernet
frame. Untagged Ethernet frames are usually used for native
VLAN communication.
• Add 4 bytes tagging to the ethernet frame and recalculate new
crc.
• Support Ethernet only.

28
7.2 Switchport Mode

The term “Switchport” refers to an OSI model layer 2 switch interface,

on which routing is disabled. So, you will be not able to assign an IP
address to a switchport interface. Generally, a switchport is used while
configuring the VLANs on the Cisco Switch.
Types of Switchport:
• Access
• Trunk
Access Ports: Access Ports belong to a single VLAN and carry the traffic
of a single VLAN only.
Trunk Ports: Trunk Ports, usually carry the traffic of multiple VLANs and
by default will be the member of all VLANs configured on the switch.

configuration of first L3 Switch

29
 Devices Interface Switchport mode VLANs
E0/0 Trunk all
E0/1 Trunk all
L3 Switch 1 E0/2 Trunk all
E0/3 Trunk all
E1/0 Trunk all
E0/0 Trunk all
L3 Switch 2 E0/1 Trunk all
E0/2 Trunk all
E0/0 Trunk all
E0/2 Access 40
Switch 1 E0/3 Access 40
E1/0 Access 40
E1/1 Access 40
E0/0 Trunk all
Switch 2 E0/1 Access 30
E0/2 Access 30
E0/0 Trunk all
Switch 3 E0/1 Access 20
E0/2 Access 20
E0/0 Trunk all
Switch 4 E0/1 Access 10
E0/2 Access 10

30
8. VLAN Trunking Protocol (VTP)

VTP (VLAN Trunking Protocol) is a Cisco proprietary protocol used by

Cisco switches to exchange VLAN information. With VTP, you can
synchronize VLAN information (such as VLAN ID or VLAN name) with
switches inside the same VTP domain. A VTP domain is a set of trunked
switches with the matching VTP settings (the domain name, password
and VTP version). All switches inside the same VTP domain share their
VLAN information. Without VTP, if you want to create a VLAN on each
switch, you would have to manually enter VLAN configuration
commands on every switch. VTP enables you to create the VLAN only
on a single switch. That switch can then propagate information about
the VLAN to every other switch on the network and cause other
switches to create it. Likewise, if you want to delete a VLAN, you only
need to delete it on one switch, and the change is automatically
propagated to every other switch inside the same VTP domain with
each other.

8.1 Creating VLANs

VLANs Name
10 Servers
20 Sales
30 HR
40 Designers

31
VLANs created automatically on the other Switches.

32
9. Inter VLAN Routing
VLANs are used to segment switched Layer 2 networks for a variety of
reasons. Regardless of the reason, hosts in one VLAN cannot
communicate with hosts in another VLAN unless there is a router or a
Layer 3 switch to provide routing services.

Inter-VLAN routing is the process of forwarding network traffic from

one VLAN to another VLAN.

9.1 Add VLAN interfaces on Sophos XG Firewall

33
10. DHCP Server

Dynamic Host Configuration Protocol (DHCP) is a standardized network

protocol used on Internet Protocol (IP) networks for dynamically
distributing network configuration parameters, such as IP addresses for
interfaces and services. With DHCP, network devices request IP
addresses and networking parameters automatically from a DHCP
server, reducing the need for a network administrator or a user to
configure these settings manually.

DHCP servers can be configured to provide optional data that fully

configures TCP/IP on a client. Some of the most common DHCP option
types configured and distributed by the DHCP server during leases
include default gateway, router, DNS, and WINS parameters.

34
DHCP servers can be configured to provide optional data that fully
configures TCP/IP on a client. Some of the most common DHCP option
types configured and distributed by the DHCP server during leases
include default gateway, router, DNS, and WINS parameters.

To use DHCP Server, we have to import and install Windows Server on

EVE-NG .

10.1 Setup DHCP on Server

DHCP Server Basic Configuration

The first step in the installed DHCP server configuration is to create
scopes (Ranges of IP addresses) the administrator wants to lease out
to clients and add the default gateway ( the IP of the VLAN Interface
created on Sophos XG for VLAN 10 for DMZ).

35
Add the IP address range

Add the Default Gateway

36
Scopes created in DHCP Server to distribute IPs to each VLAN.

10.2 Add DHCP Relay on Sophos XG Firewall

37
10.3 DHCP Lease

A DHCP lease is a temporary assignment of an IP address to a device on

the network. When using DHCP to manage a pool of IP addresses, each
client served on the network is only “renting” its IP address. Thus, IP
addresses managed by a DHCP server are only assigned for a limited
period.
The period of validity of the assignment is called a lease duration and
when it expires, the client shall immediately stop using this IP address and
stop all communication on the IP network. The main risk of not complying
to this rule is to have more than one device on the network using the same
IP address with conflicts on delivering IP frames to the right device
(duplicate IP address).

DHCP lease duration is expressed in seconds. It can be specified as

“infinite” for permanent leases, usually used for devices that should not
change their IP address without a need to change their configuration
(some IOT, printers or application servers).

During the DHCP lease period, the client can ask the server for a lease
termination, in order to free the IP address so that it can be used for
another client on the network. This process is generally automatically
performed when a host shuts down.

Obtain an IP address from DHCP Server for VPCs

Using “IP DHCP” command on VPCs to obtain an IP address from
DHCP Server.
And make Network adapter on Windows 10 VM Obtains an IP address
automatically from DHCP Server.

38
Obtain IP address for VPC in VLAN 20

Obtain IP address for windows 10 VM in VLAN 40

39
When a network device requests an IP address and a DHCP server
responds with one, it’s called an address lease that assign the
information of IP addresses leased to clients and the name of clients
and their lease expiration time.
IP addresses Leased out to clients in VLAN 40

11. Spanning Tree Protocol (STP)

Spanning Tree Protocol is a Layer 2 protocol used to prevent layer 2

loop in Redundant topology by block interface.
How it works?
• (BPDU) Acronym for bridge protocol data unit.
• BPDU are data messages that are exchanged across the switches
within the LAN
• BPDU packets contain information on ports, addresses, priorities
and costs and ensure that the data ends up where it was
intended to go.
• BPDU messages are exchanged across bridges to detect loops in
a network topology.

40
 • Every switch will take a copy of the BPDU and resend it to other
switches.
• BPDU is sent every two seconds.
• The loops are then removed by shutting down selected bridge
interfaces and placing redundant switch ports in a backup, or
blocked, state.
Spanning TreeProtocol Types

11.1 Spanning Tree Portfast

Spanning Tree Protocol (STP) PortFast feature can be used to speed

up convergence on ports which are connected to a workstation, a
network printer or a server (which are end devices and cannot cause
layer 2 loops). PortFast feature should be used only to connect a single
workstation to a switch port to avoid layer 2 switching loop. Spanning
Tree PortFast feature causes a port to enter the forwarding state
immediately, bypassing the listening and learning states.
41
12. Domain Controller (DC)

A domain controller is a type of server that processes requests for

authentication from users within a computer domain. Domain
controllers are most commonly used in Windows Active Directory (AD)
domains but are also used with other types of identity management
systems.

Domain controllers duplicate directory service information for

their domains, including users, authentication credentials and
enterprise security policies.

The main functions of a domain controller:

• Domain controllers restrict access to domain resources by

authenticating user identity through login credentials, and by
preventing unauthorized access to those resources.

• Domain controllers apply security policies to requests for access

to domain resources. For example, in a Windows AD domain,
the domain controller draws authentication information for
user accounts from AD.

• Domain controller can operate as a single system, but they are

usually implemented in clusters for improved reliability and
availability. For domain controllers running under Windows AD,
each cluster comprises a primary domain controller (PDC) and
one or more backup domain controllers (BDC).

42
The benefits of domain controller:

• Centralized management of domain controllers enables

organizations to authenticate all directory services requests
using a centralized domain controller.
• Distributed and replicated domain controllers enforce security
policies and prevent unauthorized access across enterprise
networks and WAN.
• Access to file servers and other network resources through
domain controllers provides seamless integration with directory
services such as Microsoft AD.
• Support for secured authentication and transport protocols in
domain controllers improves authentication process security.

12.1 Setup domain controllers in Active Directory

Domain control is a function of Microsoft's Active Directory, and

domain controllers are servers that can use Active Directory to
respond to authentication requests.

Steps for setting up an AD domain controller include:

• Domain assessment. The first step in setting up a domain

controller is to assess the domain in which the controller will be
set up. This assessment includes determining what types of
domain controllers are needed, where they will be located and
how they interoperate with existing systems in the domain.

43
 • New deployment or addition. Whether planning for a new
deployment of AD domain controllers or adding a new controller
for an existing domain, determine the domain controller location
and the resources needed to run the centralized domain
controller and any virtual domain controllers.

• Security by design. It's imperative to secure a domain controller

from internal or external attacks. Also, design the domain
controller architecture to be secure from service disruptions
from loss of connectivity, loss of power or system failures.

Domain controller implementation options:

The following options are available when setting up a domain

controller with AD:

• Domain Name System (DNS) server: The domain controller can

be configured to function as a DNS server.
Dell recommends configuring at least one domain controller as
a DNS server.
• Global Catalog capabilities: The domain controller can be
configured to use Global Catalog, which enables the controller
to return AD information about any object in the organization,
regardless of whether the object is in the same domain as the
domain controller. This is useful for large enterprises with
multiple AD domains.
• Read only domain controller (RODC): Domain controllers used
in branch offices or in other circumstances where network
connectivity is limited can be configured as read-only.
• Directory Services Restore Mode (DSRM): DSRM provides the
option to do emergency maintenance, including restoring
backups, on the domain controller. A DSRM password must be
configured in advance.

44
12.2 Create Organization Units

Create an Organization Unit for each department and create users

(employees) on with their information to access their user from
specific PCs in their department.

45
12.3 Join Domain

Joining Domain on Windows 10 VM which is available in VLAN 40 and

it has IP address 172.16.40.13 but its Preferred DNS is the IP address
of additional Domain Controller "172.16.10.1".

46
13. VPN

VPN stands for "Virtual Private Network" and describes the

opportunity to establish a protected network connection when using
public networks. VPNs encrypt your internet traffic and disguise your
online identity. This makes it more difficult for third parties to track
your activities online and steal data. The encryption takes place in real
time.

How does it work?

A VPN hides your IP address by letting the network redirect it through

a specially configured remote server run by a VPN host. This means
that if you surf online with a VPN, the VPN server becomes the source
of your data. This means your Internet Service Provider (ISP) and other
third parties cannot see which websites you visit or what data you
send and receive online. A VPN works like a filter that turns all your
data into "gibberish". Even if someone were to get their hands on your
data, it would be useless.

Uses of VPN:

• Encryption of your IP address: The primary job of a VPN is to

hide your IP address from your ISP and other third parties. This
allows you to send and receive information online without the
risk of anyone but you and the VPN provider seeing it.

• Encryption of protocols: A VPN should also prevent you from

leaving traces, for example, in the form of your internet history,
search history and cookies. The encryption of cookies is
especially important because it prevents third parties from
gaining access to confidential information such as personal
data, financial information, and other content on websites.

47
 • Kill switch: If your VPN connection is suddenly interrupted,
your secure connection will also be interrupted. A good VPN
can detect this sudden downtime and terminate preselected
programs, reducing the likelihood that data is compromised.

• Two-factor authentication: By using a variety of authentication

methods, a strong VPN checks everyone who tries to log in. For
example, you might be prompted to enter a password, after
which a code is sent to your mobile device. This makes it
difficult for uninvited third parties to access your secure
connection.

13.1 Site to Site VPN

Site-to-Site VPN provides a site-to-site IPSec connection between your

on-premises network and your virtual cloud network (VCN). The IPSec
protocol suite encrypts IP traffic before the packets are transferred
from the source to the destination and decrypts the traffic when it
arrives. Site-to-Site VPN was previously referred to as VPN Connect
and IPSec VPN.
Site-to-site VPNs are frequently used by companies with multiple
offices in different geographic locations that need to access and use
the corporate network on an ongoing basis. With a site-to-site VPN, a
company can securely connect its corporate network with its remote
offices to communicate and share resources with them as a single
network.

48
13.2 Configure VPN Site to Site on Sophos XG on two branches

49
VPN connection is created between the two branches

14. Security

14.1 Rules and Policies on Firewall

14.1.1 Web Policies

With web policies, you can create rules to control end users’ web
browsing activities.

Policies take effect when you add them to firewall rules. The default
set of policies specifies some common restrictions. You can change
one of the default policies to fit your requirements or create new
policies.

Rules specify the following criteria:

• Users to whom the rule applies.

• Activities that describe the type of usage to restrict. These
include user activities, categories, URL groups, file types, and
dynamic categories.
• Content filters to restrict web content that contains any terms in
the lists specified.

50
 • An action to take when the firewall encounters HTTP traffic that
matches the rule criteria.
• You can also specify a separate action for HTTPS traffic and set a
schedule for the rule.

Policy quota:

• Using time quota, you can allow access to restricted websites for
a limited period. This applies to all the restricted web categories
in the policy with a quota action. Time quota applies to all the
rules in the web policy. Users can have individual quotas for each
web policy.
• When you change the quota, the changes aren't applied if the
web policy is invalid, the user has no time quota left, or has an
active quota session in the web policy.

Add web Policies:

51
52
14.1.2 Application Filter

With application filter policies, you can control access to applications

for users behind the firewall.

Policies specify access to application categories or individual

applications using rules. The default set of policies includes some
commonly used restrictions. You can also create custom policies
according to the requirements of your organization.

Block high risk applications:

53
Allow traffic from Microsoft 365 (cloud application):

54
14.2 Intrusion Prevention

With intrusion prevention, you can examine network traffic for

anomalies to prevent DoS and other spoofing attacks. Using policies,
you can define rules that specify an action to take when traffic
matches signature criteria. You can specify protection on a zone-
specific basis and limit traffic to trusted MAC addresses or IP–MAC
pairs. You can also create rules to bypass DoS inspection.
14.2.1 IPS Policies

With IPS policies, you can prevent network attacks using rules.
The firewall enforces the actions specified in the rules and logs the
corresponding events. The set of default policies prevents network
attacks for several common types of traffic. You can create custom
policies with rules that meet your traffic requirements.

55
14.2.2 DoS & Spoof Protection

To prevent spoofing attacks, you can restrict traffic to only recognized

IP addresses, trusted MAC addresses, and IP-MAC pairs. You can also
set traffic limits and flags to prevent DoS attacks and create rules to
bypass DoS inspection. The firewall logs dropped traffic.
To protect against spoofing attacks, select Enable spoof prevention,
specify settings and zones, and click Apply. To drop traffic from an
unknown IP address on a trusted MAC address, select Restrict
unknown IP on trusted MAC.

56
 15. Network Traffic Monitoring

Network traffic monitoring is the process of analyzing, diagnosing, and

resolving network usage issues that impact the security and
performance of applications running on the network.
Monitoring network traffic is important for keeping your network
running smoothly and error-free for users. Monitoring traffic in real
time will also reduce the risk of hackers invading your system and
data. When bugs get picked up in real time, issues can be resolved in
real-time so network services can continue running efficiently without
interruption.
Benefits:
• Troubleshoot bandwidth overload:
Bandwidth is the volume of information that can be sent over a
connection. By monitoring network traffic, you can analyze and
resolve bandwidth issues that may slow down your speed.

• Track audit trail of user activity across the network:

The audit trail displays any changes that have been made to a
database or file. By tracking audit trails, you can see how users are
using your network and be alert of suspicious malware.

• Enhance user experience.

By having the proper insight into network use, your services will be
provided error-free and running at high speeds to assure users will be
pleased with the quality of your network.

Monitoring network traffic is essential for optimizing network

performance for users and preventing security incidents.

57
15.1 Monitoring using SysLog Server

What is Syslog?
System Logging Protocol (Syslog) is a way network device can use a
standard message format to communicate with a logging server. It
was designed specifically to make it easy to monitor network devices.
Devices can use a Syslog agent to send out notification messages
under a wide range of specific conditions.
These log messages include a timestamp, a severity rating, a device ID
(including IP address), and information specific to the event. Though
it does have shortcomings, the Syslog protocol is widely applied
because it is simple to implement, and is open-ended, allowing for a
lot of different proprietary implementations, and thus the ability to
monitor almost any connected device.
The advantages of Syslog Server:
• A big advantage of syslog is that the log server can monitor a vast
number of syslog events via log files. Routers, switches, firewalls,
and servers can generate log messages, as well as many printers
and other devices.

• The syslog server receives, categorizes, and stores log messages

for analysis, maintaining a comprehensive view of what is going
on everywhere on the network. Without this view, devices can
malfunction unexpectedly, and outages can be hard to trace.

The Syslog data can be used in a variety of other ways, for example for
detailed reporting, as well as the generation of diagrams to clarify the
structure of the network.

58
15.2 Monitoring using Sophos XG Firewall

There are many tools on Sophos XG Firewall Software to monitor the

network traffic under Diagnostics Tab:
• Control Center
• Log Viewer
• Packet Capture
• System Graphs
• Connection List

59
15.2.1 Control Center

The Control center shows the features in use and the health and
security of the network.

15.2.2 Log Viewer

log viewer utility enables you to view, merge, sort, search, and filter
information contained in message and trace logs.

60
15.2.3 Packet Capture

Packet capture shows the details of the packets that pass through
an interface. You can see the connection details and details of the
packets processed by each module, such as firewall and IPS. Packet
capture also shows the firewall rule number, user, web, and
application filter policy number. This information can help you
troubleshoot instances where firewall rules fail.

15.2.4 Connection List

Connection list provides a current or live connection snapshot of

your device. It shows the connection information.

61
15.2.5 System Graphs

You can see graphs showing user-related and system-related

activities for different time periods.

62
16. The Website

16.1 EXECUTIVE SUMMARY

As we know every company these days seeks to supremacy in the field.

So, its business’s online presence, regardless of industry, can have a
massive impact on its success. In this day and age, some businesses
still don’t realize that a majority of their customers will visit their
website before making a purchase.

Having a strong online presence, particularly a website, can be make

or break for generating more revenue. the quality of your website
impacts results.

16.2 OVERVIEW
Here are the top reasons it’s important for the business to have a
website:

Credibility

One of the main reasons you should have a website for your business
is to increase your organization's credibility. Chances are there are
several providers offering a similar service to yours. One way you can
stand out is by having a website that looks good and clearly
communicates quality information to your customers.

Without a website, people may question your legitimacy as a business.

Having a website is an opportunity to make a great first impression
and give people comfort that you’re a real business.

63
Brand

Showcasing your brand to your prospective customers is one of the

most important things that you can do. By clearly establishing who you
are, what you represent and what you stand for, you increase the
chances of your customers dealing with the company

This is also something that can set you apart from your competitors.
Without a website, it can be incredibly challenging to do this because
people can't easily find quality and reliable information on your
business.

Leads

Perhaps one of the most intriguing reasons to have a website for your
business is because it can increase your chances of getting leads.

Once people find you online, become interested in your product or

service and want to know more, they'll know how to contact you
thanks to the information on your website, which gives you the
opportunity to increase your sales. Even though websites have a cost,
when used correctly, they have a positive return on investment.

Organic Traffic

Once you're online and have a Search engine optimized website, you
have a chance of showing up in Google search results. This means that
when people are searching for a product or service, there is a chance
your website will show up in the results. This gives you the opportunity
to drastically increase your customer base.

64
Saving You Time + Customer Service

Many businesses get calls from prospects or existing customers asking

simple questions about location and hours of operation. If you miss a
call, the customer is left unhappy. Calls can also distract your staff
from focusing on the most important parts of your business. A website
can reduce these calls and increase internal productivity. At the same
time, it helps customers find useful information without needing to
call, which ultimately provides an all-around better user experience.

Updates And Announcements

Since your website is on 24/7, it's easy to post updates and

announcements to your customers. It's a way to keep them up to date
on everything that you're doing. When something is particularly
relevant to them, it increases the chance of you being able to upsell
them.

Digital Marketing

If you plan on leveraging digital marketing to increase your leads and

grow your business, you'll likely want to drive traffic to a website or
landing page. To do this effectively, leverage historic traffic that has
been going to your website so you can target the most qualified
customers and get the best return on investment on your ad spend.
This is something that can’t be set up retroactively, so it is best to get
your website running early even if you’re not planning on running ads
at the moment.

Websites have become essential to business today. I strongly

recommend creating one if you haven’t done so already. You can
improve it over time, but the key is to start.

65
In the end we all must know that the website is very important to any
company regarding the field to improve its business.
So, we decided to complete our mission in building the network
system of OA company for interior designing by creating a website
with a stylish unique eye-catching design for the customers and an
easy effective system with data base for the employees so they can
sign up and login to the system easily and have access to the data base
of the company such as clients phone numbers and addresses.
ALSO, they have the ability of changing any item exhibited by the
website developer and update their work on the website.
So, we built the website with registration form separate the
customers login and the employee's login.

16.3 Designing the website front page

we start our journey with designing the website front page and this is
our first trial.

66
This is our first sight in designing the website front page, but we found
that color is dark, so we chose to change the background colour with
a picture of olive coloured bedroom as shown:

Then we wanted to add some more to the home page, so we decided

to add a slide show in the middle as shown:

67
We didn’t stop here we decided to add some more in the home page
of the website. As we show below there is some information about
every style in interior designing and short quote about it. Every style
is unique and beautiful in itself.

68
69
The server used to achieve this task:

adobe XD UI/UX design and collaboration tool

This is the design of admin registration form for the employees to have
the ability of changing any item exhibited by the website developer
and update their work on the website.

70
Not only the employees can have account on the website client also
can create an account can place an order correctly by providing their
phone numbers and address so the employees of the company can
contact them easily, but they cannot add anything or edit anything,
but the employees can.
And this is the final trial of the form page we created:

Also, we designed and programed the login form so unique and

simple design as shown:

71
Last but not least, we decided to add make an appointment form for
the client who admired the company work and want the company
designers to design for them their interior places, so we designed
make an appointment form as shown:

72
Now we added user profile page we designed it as shown:

73
16.4 Coding the front-end code of home page

we start coding the front-end code of home page with HTML and CSS.
we initialized the code with html as a base of the website and we
restyled with CSS file and linked them together. we started the code
with the head section then the header section then the body section
then we uploaded the files on github platform.

if anyone interested in the codes

https://github.com/aiawaleed97/OA.git

then we start coding user registration form with html and linked it
with CSS file to bring the design to real then we again uploaded the
files on github platform.

if anyone interested in the codes

https://github.com/aiawaleed97/signup.git

74
now we do the same with login form after we wrote the code with
html and linked it with CSS file, we uploaded the files on github
platform

if anyone interested in the codes

https://github.com/aiawaleed97/login.git

then user profile page after we designed the page, we wrote the code
with html and linked it with its CSS file then we uploaded the files on
github platform

if anyone interested in the codes

https://github.com/aiawaleed97/user.git

At last, make an appointment form page after we designed the page,

we wrote the code with html and linked it with its CSS file then we
uploaded the files on github platform

if anyone interested in the codes

https://github.com/aiawaleed97/order.git

Now we finished designing the website and the writing the html and
CSS codes.

75
So, this is the final result of the website

76
77
78
79
80
16.5 The Coding Languages and the programs used

After we finished front end coding there is some of friends helped us.
The coding languages used in coding and programing the front end of
the website:

1. HTML5 2. CSS3

81
The programs used in this operation:
1. Google chrome 2. ui/ux adobe xd 3. visual studio code

16.6 Uploading our site on GitHub online platform

After font end coding we decided to upload our site on GitHub online
platform so anyone can open the website easily

First, we went to GitHub.com to create a new account on the platform.

Then we created new repository on the platform with the company
name Then we downloaded and installed github desktop program to
clone easily.
After we cloned the repository successfully, we copied the project
folder contained all files html and CSS and images folder to the folder
github created on the pc. Then we commit to the main and fetch origin
Now the site we created has its own link to be available to others.

82
We didn’t stop here.
At last, we decided to link the website to the network of the company
so the users can go to the website by one click using Internet
Information Services (IIS) Web server installed on our Windows
Server.

16.7 Web Server

A web server is software and hardware that uses HTTP (Hypertext

Transfer Protocol) and other protocols to respond to client requests
made over the World Wide Web. The main job of a web server is to
display website content through storing, processing, and delivering
webpages to users. Besides HTTP, web servers also
support SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer
Protocol), used for email, file transfer and storage.

Web server hardware is connected to the internet and allows data to

be exchanged with other connected devices, while web server
software controls how a user accesses hosted files. The web server
process is an example of the client/server model. All computers that
host websites must have web server software.

Web servers are used in web hosting, or the hosting of data for
websites and web-based applications or web applications.

How does it work?

Web server software is accessed through the domain names of

websites and ensures the delivery of the site's content to the
requesting user. The software side is also comprised of several
components, with at least an HTTP server. The HTTP server can
understand HTTP and URLs. As hardware, a web server is a computer
that stores web server software and other files related to a website,
such as HTML documents, images, and JavaScript files.

83
16.7.1 Internet Information Services (IIS)

An IIS web server runs on the Microsoft .NET platform on the Windows
OS. It’s versatile and stable, and it’s been widely used in production
for many years.
Install IIS services on windows Server:
Add HTTP files for AOM company website then Start IIS

Browse Website (http://www.aom.com:80) to display AOM website

84
17. Application

17.1 System Environment

7.1.1 VS Code

Visual Studio Code is a source-code editor made by Microsoft for

Windows, macOS and Linux. The features included in VS Code
support debugging, code refactoring, syntax highlighting,
intelligent code completion snippets and embedded Git.
• Download VS Code
1. Go to https://code.visualstudio.com/Download
2. Choose operating system which fits your device.

3. Save file in Downloads

85
• Setup VS Code
1. Open VS Code setup icon, the license applies to VS Code
product. You must read the license agreement and accept the
terms of the agreement before continuing with the
installation. Check I accept the agreement and press next.

2. Select the tasks you would like to perform while installing VS

Code then press next.

86
3. Click Install then click Finish

87
17.1.2 Android Studio

Android Studio is the official integrated development

environment for Google’s Android operating system, built on
JetBrains’ IntelliJ IDEA software and designed for Android
development.

• Download Android Studio

1. Go to https://developer.android.com
2. Go to Download Android Studio.

3. Download Android Studio for Windows 10 64-bit version.

88
 4. Before start downloading, you must read and agree to the
terms and conditions and accepting the Android Software
Development Kit License Agreement. Check I have read and
agree with the above terms and conditions, then start
downloading.

• Setup Android Studio

1. Launch Android Studio setup icon to start the installation.
Click Next to continue the installation.

89
2. Check Android Virtual Device to install AVD. Android studio is
located by default in Program Files. Click Next.

90
3. Click Install in the appeared panel. Wait until the installation
finishes, then click next, click Finish.

91
17.1.3 Flutter

Flutter is an open-source UI software development kit created

by Google used to develop cross platform applications for
Android, iOS, Mac, Linux, Windows, Google Fuchsia, web
platform and the web from single codebase.
Flutter consists of two important parts:
1- SDK (Software Development Kit) which is a collection of tools
that are helping you develop your projects, including the tools
to compile the code into native machine code for Android and
iOS.
2- Framework (UI Library based on widgets) which is a collection
of reusable UI elements like buttons, text, inputs, sliders that
can personalize for your needs.

Flutter is based on Dart Programming Language. Dart focuses on

front-end development; Dart is typed object programming
language. The syntax is similar to JavaScript.

• Download Flutter
1. Go to https://docs.flutter.dev/get-started/install . Select the
operating system on which you are installing Flutter (1), after
installing Flutter follow the documentation in the same page
(2) to setup Flutter on your device.

92
• Installing Flutter on VS Code
1. Open Extensions on VS Code (1). Write on the Search ‘dart’
(2). Install the following extension (3).

2. Write on the search ‘flutter’ (1). Install the following extension

(2).

93
• Developer Options on Android Device
There are hidden sets of developer options on Android devices
you can access such as USB debugging, unlock your bootloader
so you can root your Android phone. Change the animation draw
speed to give the phone slicker feel.

• Accessing Developer Options in Android

Developer options can be unlocked on any Android device by
locating the build number in Settings menu and tapping it
multiple times.
1- Go to Settings, then About Phone.
2- Tap Software Info, then Build Number.
3- Tap the Build Number seven times. After few taps, the steps
counting down will show until you unlock developer options.
You have to enter your PIN or password if you have any for
verification.
4- Once developer options are activated, you will see a
message “You are now on developer mode”.
5- Go back to Settings menu where you find Developer options
as an entry.
6- Tap on developer options and toggle the switch on, and from
there, you can toggle on USB debugging switch on.

94
17.2 Debugging on VS Code

VS Code has its debugging support. Its built-in debugger helps in

accelerating the edit, compile, and debug loop.

1. Connect the device through USB

cable.
2. Tap on “Run and Debug” button,
Then choose the device name and
Tap on run.

95
17.3 Applications

1) Configurations Application
Configurations application is used to display the configurations
of routers in the topology. It is supposed to help the network
administrators in showing running configurations.

• System Environment
1- Android Studio (Version 4).
2- Visual Studio Code.
3- Programming Language: Dart.
4- Platform: Flutter.
5- Database: SQflite.
6- Sign-up: Firebase.

• Google sign in with Flutter

1. Go to https://pub.dev/packages/google_sign_in to use the
plugin follow the steps shown in the documentation (1). Go
to Installing (2) and copy the dependencies in you
pubspec.yaml file (3). Import the package in your dart file (4).

96
2. Go to https://pub.dev/packages/provider/install . Repeat the
same steps to install provider package.

3. Go to https://console.firebase.google.com/u/0/?pli=1 . Click
add project to create your project.

97
4. Select the project name (at least four letters) then click
continue. Enable Google Analytics for this project, click
continue. Choose the default account for Firebase, click
create project.

5. Tap on continue.
Now the project is ready
To start coding.

98
17.4 Screens of The Application

LOG-IN SCREEN ROUTERS

ROUTER DETAILS CONFIGURATIONS

99
• User Journeys
For a regular user, fist the user will have to log in with email and
password or log in directly with Gmail. Second, there will be the
screen that shows routers and switches. The user will choose
which device he wants to show its running configurations. Third,
there will be all the devices in the network to choose from them.

• Feature List
1. Sign-up & login
2. Login with Google

• Dependencies
1. Google sign-in
2. Provider
3. Read more
4. Firebase

• Adobe XD
Adobe XD is user experience design tool for web apps and mobile
apps. It is available for macOS and Windows and there are
versions for iOS and Android to help preview the result of the
work directly on mobile devices.

100
17.5 Company's Application

Visually appealing and engaging application is a result of having

an effective user experience (UX) and user interface (UI). A good
user interface will create attraction to the app while a good user
experience will create a lasting impact on the user’s mind. The
main goal of having a good user interface & user experience is
increasing the sales and the growth of the business.

The company is interested in interior designs. This application

shows the work of the company to the users. They can browse
the application and look for the previous designs.

101
 System Environment
1- Android Studio (Version 4).
2- Visual Studio Code.
3- Programming Language: Dart.
4- Platform: Flutter.
5- Database: SQflite.
6- Sign-up: Firebase.
7- Adobe XD.

17.6 Screens from Adobe XD

102
• Feature List
1- Responsive.
2- Login & Sign up with Firebase.
3- Login with Google & Facebook with Firebase.

• Splash Screen
When creating a flutter project. A splash
screen is generated among the other files.
It is shown before the first frame when
flutter is rendering widgets to screen.

How to remove splash screen?

The white screen is native to the platform
(Android & iOS) so it can’t be removed
but fortunately, both platforms provide
the ability to set the background color
of this screen. This means that at minimum,
the white screen can be incorporated
into the loading process of your application.
For Android: modify styles.xml file found in
android/app/src/res/values/styles.xml.
There are two values to be set:
1) The white screen.
2) The time between hiding your custom
splash screen and showing the first screen
of your app.

103
o styles.xml looks like this before editing:

o styles.xml will look like this after editing:

104
o AndroidManifest.xml will look like this:

o This method will cover the Android initialization timing. Running

the application on Android will no longer show the annoying
white screen.
• Responsive Layout
As we already know, Flutter is a cross-platform app development
framework which supports devices with widely varying screen
sizes. It is not easy to adapt the application to such a variety of
screen sizes and pixel densities using the same code. There are
different ways to create responsive layouts in flutter.

105
 Adaptive and responsive can be viewed as separate dimensions
of an app which means you can have an adaptive app that is not
responsive or vice versa. And an app can be both, or neither.
- Responsive
A responsive app has its layout tuned for the available screen
size which means re-laying out the UI if the user resizes the
window or changes the device’s orientation. This is specially
necessary when the same app can be run on a variety of
devices like phone, laptop, watch or desktop computer.
- Adaptive
Adapting applications to run on different device types such as
phones and desktop requires dealing with mouse and
keyboard input as well as touch input. It also means there are
different expectations about the app’s visual density, how
component selection works, using platform-specific features
and more.

• Creating Responsive Flutter apps

Flutter allows you to create apps that self-adapt to the device’s
screen size and orientation.
There are two basic approaches to creating flutter apps with
responsive design:
- Using the LayoutBuilder class
From its builder property, you get BoxConstraints object.
Examine the constraint’s properties to decide what to display
- Using the MediaQuery.of() method in your build functions
This gives you the size, orientation, etc, of your current app.
This is more useful if you want to make decisions based on the
complete context rather than on just the size of your
particular widget. When using this, the build function
automatically runs if the user somehow changes the app’s
size.

106
18. References

Physical Switch that we used

• https://www.dlink.com/en/products/des-1008a-8-port-10100-
switch
Sophos XG Firewall
• https://www.sophos.com/en-us/products/next-gen-
firewall/features

OSPF routing protocol

• https://www.metaswitch.com/knowledge-center/reference/what-
is-open-shortest-path-first-ospf

Virtual Local Area Network (VLAN)

• https://study-ccna.com/what-is-a-vlan/

Trunking Protocol
• https://www.geeksforgeeks.org/inter-switch-link-isl-ieee-802-1q/
• https://en.wikipedia.org/wiki/IEEE_802.1Q

Switchport modes
• https://www.gns3network.com/switchport-mode-trunk-and-
access/

107
VLAN Trunking Protocol (VTP)
• https://en.wikipedia.org/wiki/VLAN_Trunking_Protocol
• https://www.geeksforgeeks.org/vlan-trunking-protocol-vtp/

Inter VLAN Routing

• https://www.ciscopress.com/articles/article.asp?p=3089357&seqN
um=4#:~:text=Inter%2DVLAN%20routing%20is%20the,This%20is%
20a%20legacy%20solution.
• https://www.section.io/engineering-education/inter-vlan-routing/

Dynamic Host Configuration Protocol (DHCP)

• https://en.wikipedia.org/wiki/Dynamic_Host_Configuration_Proto
col#:~:text=The%20Dynamic%20Host%20Configuration%20Protoco
l,using%20a%20client%E2%80%93server%20architecture.

Setup DHCP on Server

• https://docs.microsoft.com/en-us/troubleshoot/windows-
server/networking/install-configure-dhcp-server-
workgroup#:~:text=Click%20Start%2C%20point%20to%20Progra
ms,and%20description%20for%20the%20scope.
• https://activedirectorypro.com/configure-dhcp-server/

DHCP Lease
• https://www.efficientip.com/glossary/dhcp-
lease/#:~:text=A%20DHCP%20lease%20is%20a,a%20limited%20pe
riod%20of%20time.

108
Spanning Tree Protocol (STP)
• https://www.techtarget.com/searchnetworking/definition/spannin
g-tree-protocol

Domain Controller
• https://en.wikipedia.org/wiki/Domain_controller#:~:text=A%20do
main%20controller%20(DC)%20is,security%20policy%20for%20a%
20domain.
• https://www.techtarget.com/searchwindowsserver/definition/do
main-controller

VPN

• https://www.kaspersky.com/resource-center/definitions/what-
is-a-vpn

• https://www.paloaltonetworks.com/cyberpedia/what-is-a-site-
to-site-vpn

Security
• https://docs.sophos.com/nsg/sophos-firewall/18.5/Help/en-
us/webhelp/onlinehelp/AdministratorHelp/GettingStarted/index.h
tml

109
 Application
• https://docs.flutter.dev/development/ui/layout/adaptive-
responsive#:~:text=Flutter%20allows%20you%20to%20create,you
%20get%20a%20BoxConstraints%20object
• https://api.flutter.dev/flutter/widgets/MediaQuery/of.html
• https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
• https://pub.dev/packages/flutter_native_splash
Website

110

View publication stats