Page |1
Unit-8
Responsive Websites and Advanced Server-side Issues
Responsive Web design is the approach that suggests that design and development should respond to
the user's behavior and environment based on screen size, platform and orientation.
Simply put, responsive web design (RWD) is an approach that allows design and code to respond to the
size of a device’s screen. Meaning it gives you the optimal viewing experience whether you’re looking at
a 4 inch android mobile, your iPad mini or a 40-inch cinema display.
A major key to responsive web design is knowing your audience and what device they’re using to view
your website. How much of your current traffic is desktop vs. tablet vs. mobile?
Some useful tips and techniques while creating responsive design
1. Try designing at least 3 layouts
Small: under 600px. This is how content will look on most phones.
Medium: 600px – 900px. This is how content will look on most tablets, some large phones, and small
netbook-type computers.
Large: over 900px. This is how content will look on most personal computers.Flexible images are really
important to designing a responsive website. You need to think about how an image will scale.
2. Flexible images
Flexible images are really important to designing a responsive website. You need to think about how an
image will scale.
3. Navigation
Navigation is important on mobile. There are several common methods for collating large menus and
content. It could be in the familiar hamburger style menu, a simple dropdown selection,
expand/collapse fields or you could use tabs that scroll horizontally like YouTube.
4. Think about User experience
Responsive design needs to be more than converting a desktop site into a mobile screen. We need to
consider the user’s experience, their interaction and the essential content they’re actually looking for
while using a mobile device.
Jhalnath Chapagain | GM COLLEGE
Page |2
Smart device functionality
Smart devices are all of the everyday objects made intelligent with advanced compute, including AI and
machine learning, and networked to form the internet of things (IoT). Smart devices can operate at the
edge of the network or on very small endpoints, and while they may be small, they are powerful enough
to process data without having to report back into the cloud. They range from sensors to refrigerators
and wearables to container transportation, capable of running autonomous workloads.
Smart devices can be combined to bring intelligence to both objects and spaces, such as smart homes
and buildings, and can help automate processes and controls. They can be used in almost any industry,
from smart manufacturing to healthcare, helping to improve efficiency and optimize operations.
What is Testing?
It is basically a process using which we verify and validate that an application or software is free of bugs,
meets all the technical requirements, abides by all the requirements of development and designing, and
meets all the user requirements. Testing ensures that the intended software/ application meets these
requirements efficiently and effectively and handles all of the boundary cases and exceptional cases.
What is Debugging?
It is basically a process using which we fix any bug present in a software or application. In this, we first
identify, then analyze, and then remove the errors. Debugging begins after the intended software fails in
proper execution. Here, we conclude the problem by solving it and testing the software successfully.
This process is considered to be extremely tedious and complex because we need to identify and resolve
errors present in every stage of debugging.
Jhalnath Chapagain | GM COLLEGE
Page |3
Testing vs Debugging
Parameters Testing Debugging
Basics It is the process using which we find It is the process using which we correct the bugs
errors and bugs. that we found during the testing process.
Code Failure We can identify the failure of any We use this process to provide the code failure with
implemented code using this process. an absolution.
Errors Errors get displayed in this process. Errors get deducted and dissolved in this process.
Performer A tester performs testing on any given Either a developer or a programmer performs this
software or application. step of debugging in an application or software.
Design One does not need any design Design knowledge is a prerequisite to debugging.
Knowledge knowledge to perform testing.
Insiders and Both- insiders and outsiders can Only an insider can perform debugging. No outsider
Outsiders perform testing. can perform it on the intended software.
Mode of The process of testing can be both- The process of debugging must always be manual
Operation automated as well as manual. since we are fixing the available errors and bugs.
We cannot debug a system/ software/ application
on auto-pilot.
Basis of The process of testing is based on The process of debugging is based on various types
Operation various levels of testing- system of bugs present in a system.
testing, integration testing, unit
testing, etc.
SDLC It is a stage of SDLC (Software It’s not at all an aspect of the SDLC. It rather occurs
Development Life Cycle). as a consequence of the process of testing.
Moment of This process can begin after we have This process can begin after the execution of the
Initiation completed writing the code. test case and the identification of errors.
Steps This process consists of both- This process seeks to match the available symptoms
validation as well as verification of the with the cause. Only then it leads to the correction
errors. of the errors.
Jhalnath Chapagain | GM COLLEGE
Page |4
Overview to advanced server-side issues
Any attempt by a malicious actor to undermine the security of a Web-based application is referred to as
a Web Application Attack or Web Server Attack. Web application attacks can either target the
application itself in order to get access to sensitive data, or they can use the application as a staging area
for attacks against the program’s users.
There are following types of major Web Attacks:
• Denial-of-Service (DoS) / Distributed Denial-of-service (DDoS)
• Web Defacement Attack
• SSH Brute Force Attack
• Cross-site scripting (XSS)
• Directory Traversal
1. DENIAL-OF-SERVICE (DOS) / DISTRIBUTED DENIAL-OF-SERVICE (DDOS): Denial of Service is when an
internet hacker causes the web to provide a response to a large number of requests. This causes the
server to slow down or crash and users authorized to use the server will be denied service or access.
Government services, credit card companies under large corporations are common victims of this
type of attack
2. WEB DEFACEMENT ATTACK: In a Web Defacement Attack, the hacker gains access to the site and
defaces it for a variety of reasons, including humiliation and discrediting the victim. The attackers hack
into a web server and replace a website hosted with one of their own.
3. SSH BRUTE FORCE ATTACK: By brute-forcing SSH login credentials, an SSH Brute Force Attack is
performed to attain access. This exploit can be used to send malicious files without being noticed. Unlike
a lot of other tactics used by hackers, brute force attacks aren’t reliant on existing vulnerabilities
4. CROSS SITE SCRIPTING (XSS): This type of attack is more likely to target websites with scripting flaws.
The injection of malicious code into web applications is known as Cross-Site Scripting. The script will give
the hacker access to web app data such as sessions, cookies, and so on.
5. DIRECTORY TRAVERSAL: Directory Traversal Attack is usually effective on older servers with
vulnerabilities and misconfiguration. The root directory is where web pages are stored, however, in this
attack, the hacker is after directories outside of the root directory.
Jhalnath Chapagain | GM COLLEGE
Page |5
How to Prevent Different Attacks in Web Security?
• Keep your system up to date.
• Prevent connecting to the public WiFi network
• Install Anti-virus, and update it regularly
• Backup your data
• Install a Firewall
Model-View-Controller (MVC)
The Model-View-Controller (MVC) framework is an architectural pattern that separates an application
into three main logical components Model, View, and Controller. Hence the abbreviation MVC. Each
architecture component is built to handle specific development aspect of an application. MVC separates
the business logic and presentation layer from each other. It was traditionally used for desktop graphical
user interfaces (GUIs). Nowadays, MVC architecture in web technology has become popular for
designing web applications as well as mobile apps.
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a
simple and elegant toolkit to create full-featured web applications.
CodeIgniter is based on the Model-View-Controller development pattern. MVC is a software approach
that separates application logic from presentation. In practice, it permits your web pages to contain
minimal scripting since the presentation is separate from the PHP scripting.
The Model represents your data structures. Typically your model classes will contain functions that help
you retrieve, insert, and update information in your database.
The View is the information that is being presented to a user. A View will normally be a web page, but in
CodeIgniter, a view can also be a page fragment like a header or footer. It can also be an RSS page, or
any other type of “page”.
The Controller serves as an intermediary between the Model, the View, and any other resources needed
to process the HTTP request and generate a web page.
CodeIgniter has a fairly loose approach to MVC since Models are not required. If you don’t need the
added separation, or find that maintaining models requires more complexity than you want, you can
ignore them and build your application minimally using Controllers and Views. CodeIgniter also enables
you to incorporate your own existing scripts, or even develop core libraries for the system, enabling you
to work in a way that makes the most sense to you.
Jhalnath Chapagain | GM COLLEGE
