(4) Client-Side and Server-Side Development

Client-Side Development Server-Side Development

Sometimes referred to as front-end development Sometimes called back-end development
type of development that involves programs that run on a type of development that involves programs run on a server
client's or user's device important because web browsers, or clients, interact with
focus on creating the part of website which the user interacts web servers to retrieve information
focuses on the front part of an application that users can see. focuses on the front part of an application that users can see.

Client-Side Development Tasks Server-Side Development Tasks

Creating website layouts Coding dynamic websites
Designing user interfaces Developing web applications
Adding form validation Connecting websites to databases and other operations
Reviewing the performance of websites Implementing content management systems
Adding visual design elements like colors and fonts Making sure programs retrieve information properly
Making website features more functional Ensuring systems are safe from hackers
Resolving any issues that users encounter on a site Restoring and backing up files
Sending request for data to server Processing user input

Client-Side Programming Languages Server-Side Programming Languages

Software developers, database administrators and web developers
HTML typically use server-side development. Server-side developers can use
stands for hypertext markup language, is the standard many programming languages, including:
language for web development, builds a website's
structure and renders a website in a browser Java
CSS an object-oriented programming language that
stands for Cascading Style Sheets, is a design language developers can use for a variety of purposes, including
that developers use to add visual design elements to a software and application development
website coded in HTML, make websites look more visually PHP
appealing on users' devices. stands for PHP: Hypertext Preprocessor, is a scripting
JavaScript language developers use to create websites and web
a scripting language that developers can use for web applications
development, web applications and other purposes, connect to databases to display content on websites
make websites dynamic and interactive Python
VBScript an object-oriented, general-purpose programming
a client-side scripting language that certain browsers language that developers can use for web development,
support, add interactive elements to websites application development, operating systems and other
purposes
has applications in data science, finance, computing and
other fields
SQL
stands for Structured Query Language, is the industry-
standard language for interacting with databases.
manipulate data in databases, including updating,
retrieving and deleting data.

Client-Side vs. Server-Side Development

 (5) Web-Development Road Map
2. Learn about types of Web Applications
Web Development Learn what types of applications are suitable for your use
a broad set of activities related to programming, testing, case, or if you are a student, understand the most commonly
deploying, and maintaining websites and web apps deployed types of applications on the web like:
term is used most frequently as a job role in a context where Static HTML pages
a company, institution, or individual is developing a website Web pages that have fixed content and display the
A web developer is a professional responsible for designing, same information to every visitor without any real-time
coding, and modifying websites or web applications, tailoring interaction or updates
them to a client’s requirements, and ensuring functionality, Dynamic HTML Pages
usability, and accessibility Web pages that can change content dynamically,
often using JavaScript and other libraries, providing
interactive and real-time user experiences.
Web Developer Skill Areas Server-Side Apps
UX/UI Design Applications that run on the server and dynamically
focus on user experience and interface design. generate content, typically using languages like PHP,
SEO Python, or Java, which is sent to the client’s browser.
understand search engine optimization Single Page Apps
Web Accessibility Web applications that provide a native-app-like
study the Web Content Accessibility Guidelines (WCAG) experience on the web, with features like offline
Internationalization and Localization access, push notifications, and fast loading times
managing content on the website and helping make it Progressive Web Apps
more relevant for a language or area Web applications that provide a native-app-like
experience on the web, with features like offline
access, push notifications, and fast loading times
Hybrid Apps
Types of Web Development Mobile applications built using web technologies that
can run both on web browsers and as native apps on
Back-End Development various mobile platforms, offering a blend of web and
Developing the core system that can receive requests, native functionalities
access databases, perform computation, and handle
multiple clients simultaneously 3. Building Tool Stacks for Web
could be a static, dynamic, or hybrid system A web developer requires enough knowledge to be able to
Front-End Development plan tool stacks that can be used to tackle the challenge at
involves coding the responses received by clients, hand appropriately. For example, some popular tools are
usually in the form of HTML pages with multiple used for various web dev tasks:
dependencies, UI elements, hyperlinks, etc.
focuses on building an instance of the Front-end Development:
website/application that can be consumed in the client Programming Languages
environment HTML, CSS, and JavaScript are foundational
Full-Stack Development Frameworks and Libraries
refers to the comprehensive handling of both front-end React, Angular, Vue.js, etc., help build dynamic, responsive
and back-end development designs
has the skills to work on both the client-side and server CSS Pre-processors
side of the application, managing the complete data Tools like Sass and Less make styling more maintainable
flow between the user and the server Package Managers
NPM, PIP or Yarn for managing libraries and dependencies
Build Tools
Each web development area has unique characteristics, advantages, Webpack, Gulp, or Grunt for automating tasks and
and challenges. Choosing between Front-End, Back-End, or Full-Stack optimizing code
development depends on your project needs, career goals, or team Testing Tools
structure. Jest, Mocha, and Jasmine for unit and integration testing.
If you are more inclined toward visual design and user interaction, Developer Tools
front-end development might be for you. Browsers’ built-in developer tools for debugging and
If you enjoy working on logical problems, handling data, web performance tuning.
servers and server-side operations, back-end development may
be a suitable path. Back-end Development:
Full-stack development offers that opportunity if you want to
handle both aspects and comprehensively view the entire web Programming Languages
development process. Java, Python, PHP, Ruby, and more
Frameworks
Spring, Django, Express.js for rapid development
Database Solutions
SQL databases like MySQL or PostgreSQL; NoSQL
Web-Development Road Map databases like MongoDB
1. Learning Core Web Technologies Web Servers
Nginx, Apache for handling HTTP requests and
The first step is to learn the underlying core technologies that managing static content
make up the world wide web and its contents. It includes: Authentication Tools
Core Web Languages i.e. HTML, CSS and JS OAuth, JWT for security and user authentication
Protocols like TCP/IP, HTTP/HTTPS, FTP, SMTP etc. API Tools
Basics of Web Semantics, Accessibility, and Usability Tools for creating and testing RESTful or GraphQL APIs.
 4. Testing
Thorough testing ensures that the code runs smoothly and
meets quality standards.
Unit Testing
Using frameworks like Jest, Mocha, or Jasmine to test
individual components
Integration Testing
Running locally or on BrowserStack Live to test
interactions between different application parts
End-to-End Testing
TSelenium, Cypress, BrowserStack Automate and Percy
for simulating user behavior and testing the whole flow
Responsiveness Testing
Testing adaptability across various devices, browsers,
and user conditions using tools like BrowserStack Live,
and Responsive
Accessibility Testing
Testing for compatibility with screen readers, web
crawlers, and other assistive modes
Performance Testing
Tools like BrowserStack App Performance to test the
application’s performance under load

5. Deployment
Includes everything required to get the application live online
Version Control
Learn Git to manage code versions and contributions
across branches
Containerization
Docker to package the application with all its
dependencies
Orchestration Tools
Kubernetes for managing containerized applications
CI/CD
Jenkins, GitLab CI, Travis CI for automating the build, test,
and deploy process
Cloud Providers
AWS, Azure, and Google Cloud to host the application
Monitoring and Analytics
Tools like Prometheus and Google Analytics for tracking
performance and user engagement

Building your Portfolio

A great portfolio is the best way to ensure your skills and
aspirations are properly communicated to the hiring
professionals. Here is how to get started:
Create personal or freelance projects to showcase your
skills.
Collaborate and contribute to exciting projects on GitHub.
Create a decent Resume/CV, or even better, an online
webpage as a dynamic profile.
If you live in an area with companies, you can try
networking and attending meetups, conferences, and
workshops.
For online applications, tailor your resume and apply for
positions based on your preferred style, like job portals,
freelance projects, research-based projects etc.

Aspiring web developers can build a successful career

in this dynamic and ever-growing field by focusing on
the fundamentals, choosing the right path, mastering
the necessary languages and frameworks, and
adhering to industry best practices.
It’s not just about the tools you learn but how you apply
them, adapt to changes, and continually strive to
improve that defines success in web development.
 (6) HTTP Response And Request
Four HTTP Messages 3xx – Redirection
the requested URL is redirected elsewhere
Connection Response PATCH
establishes a connection delivers the similar to PUT request, but the only difference is, it
between the client and the resource modifies a part of the data.
server Close it will only replace the content that you want to update
Request terminates the DELETE
asks for a resource connection used to delete the data on the server at a specified
location
HTTP Requests Common HTTP Request Methods
HTTP specifies a collection of request methods to specify
what action is to be performed on a particular resource. 200 (Success/OK)
Although they can also be nouns, these request represents success which means the page you have
methods are sometimes referred to as HTTP verbs. requested has been fetched.
The most commonly used HTTP request methods are action made has been accepted and has been delivered
GET, POST, PUT, PATCH, and DELETE. to the client by delivering the requested page
These are equivalent to the CRUD operations (create, 301 (Permanent Redirect)
read, update, delete) means that the page you have requested has moved to a
new URL and which is permanent
Common HTTP Request Methods whenever the user requests the same website, it will be
redirected to the new URL
GET modified permanent URL is given by the location filed in
used to read/retrieve data from a web server. response
returns an HTTP status code of 200 (OK) if the data is 302 (Temporary Redirect)
successfully retrieved from the server the requested URL has been redirected to another website
POST temporarily
used to send data (file, form data, etc.) to the server. if the 302 is received in response to a request, the
on successful creation, it returns HTTP status code of 201 redirection is temporarily redirected to another website
PUT 304 (Not Modified)
used to modify the data on the server. used for caching purposes
it replaces the entire content at a particular location with it tells the client that the response has not been modified, so
data that is passed in the body payload. the client can continue to use the same cached version of
if no resources that match the request, it'll generate one the response
PATCH 400 (Bad Request)
similar to PUT request, but the only difference is, it When the client requests a page and the server is not able
modifies a part of the data. to understand anything, it displays a 400 HTTP status code
it will only replace the content that you want to update The client SHOULD NOT repeat the request without any
DELETE changes. The request can be a malformed, deceptive
used to delete the data on the server at a specified request routing, or invalid request
location 401 (Unauthorized Error)
Although the HTTP standard specifies "unauthorized",
HTTP Responses semantically this response means "unauthenticated".
You search for anything on Google, and by this, a request the client must authenticate to get the requested response
is being sent to the server, then the server responds. (server don’t know you)
This response is done using HTTP (HyperText Transfer 403 (Forbidden)
Protocol) by the server. The client does not have access rights to the content; that
two cases– the server may respond with the information is, it is unauthorized, so the server is refusing to give the
it has, or else it may show an error with a code. requested resource.
Whenever there’s an error in the back end, the server the client's identity is known to the server.
responds with an error code that explains what error 404 (Not Found)
could have happened. the server cannot find the requested resource.
The HTTP status code is a response made by the server in the browser, this means the URL is not recognized.
to the client’s request. in API, endpoint is valid but the resource itself does not exist.
These are three-digit codes and there are more than 60 send this response instead of 403 Forbidden to hide the
error status codes. existence of a resource from an unauthorized client.
most well known due to its frequent occurrence on the web.
500 (Internal Server Error)
HTTP Status Codes means requesting a URL is not fulfilled because the server
1xx – Informational Response encounters an unexpected condition.
these status codes are all about the information encountered a situation it does not know how to handle.
received by the server when a request is made it gives information about the request made if it is
2xx – Success successful, and throws an error.
this status code depicts that the request made has when there’s an error during a connection to the server,
been fulfilled by the server and the expected response and the requested page cannot be accessed then this
has been achieved message is displayed.
3xx – Redirection 501 (Not Implemented)
the requested URL is redirected elsewhere when a request is made by the client, the server is not able
4xx – Client Errors to recognize the request method and is not able to support
this indicates that the page is not found any resource.
5xx – Server Errors not supported by the server and cannot be handled.
a request made by the client but the server fails to the only methods that servers are required to support (and
complete the request therefore that must not return this code) are GET and HEAD.
 (7) Online and Local Hosting
Cloud Server Hosting
offers scalability and flexibility, but it can be costly and may
require specialized knowledge decision comes down to what is most important for your business, and
depends on your specific data storage requirements and IT
come with an increasingly growing range of benefits: infrastructure management services that work best for your business
industry-specific services, cost savings when you use less, and come down to a matter of preference in return on investment and
and improved user experience, and the ability to build out growth potential.
your business capabilities as your needs grow or change
preferred choice for businesses across the digital spectrum and
of all sizes
IP Addresses
Advantages of Cloud Server Hosting a combination of numbers that identifies a device on a
scalability, you can easily scale up or down as your needs network
change, allowing you to quickly respond to changing market To visit a website, you enter that website’s domain name into
demands. your browser bar — for example, google.com. However, a domain
Often more secure than traditional servers, as they are protected name alone doesn't identify a website. Rather, a domain name is
by multiple layers of security. simply an alias for a website’s IP address
greater reliability, as they are not affected by local power outages made up of four numbers, each between 0 and 255
or hardware failures. For example, the IP address associated with the server that hosts
cheaper, as you only pay for the resources that you use and don’t Google’s website is 142.251.220.238.
have to incur additional costs for maintenance or upgrades. Every device has a unique IP address, even your PC.
When you punch “google.com” into your browser bar and hit
enter, the Domain Name System (DNS) takes what you entered,
Disadvantages of Cloud Server Hosting sees that it's paired with the IP address 142.251.220.238, and routes
less secure than local servers, as they are often stored in data your request to the right place, Google’s web server.
centers with security protocols that you have no control over.
slower, as the data has to travel further to reach the user.
more expensive than local servers, as you may have to pay for Accessing a Site via IP Address
additional features and services that you may not need. Lack of encryption
data being transmitted between client and server is not encrypted
Local Server Hosting Vulnerability to DNS spoofing
attackers can redirect traffic intended for a legitimate website to a
a popular choice for many businesses, particularly those that malicious site by spoofing the IP address of the legitimate site
require high uptime and tight security for their data. Certificates may not match
can be more expensive as you need to factor in the cost of the SSL/TLS certificate presented by server may not match the IP
hardware, maintenance, and upgrades that may require address used to access the site
training or new parts that could be incompatible. Lack of domain reputation
they offer greater control over your data and allow you to keep it there is no domain reputation to rely on, which can make it more
stored on-site, result in faster loading times and fewer errors difficult to determine if the site is legitimate or not.
often the best choice for businesses that require mission-critical websites can’t be addressed through an IP address is because
data storage and need secure access to their data.
give businesses greater control over their IT infrastructure and they are websites served from a shared server account where
allow them to customize their setup to meet their specific needs. domain is one of many under a single IP address.
safer, you have complete control over how secure your data is, Shared server accounts include Business, Reseller or WordPress
who has access to your data, and all the security protocols you specific hosting plans.
have put into place to help keep it safe.
provides faster speeds since the data doesn’t have to travel far
more cost-effective since you only have to pay for the hardware Loopback Address
that you know you need all addresses beginning with the number “127” are special IP
addresses called “local loopback addresses.”
Advantages of Local Server Hosting Some IP addresses are reserved for certain reasons.
Local servers can provide more control over security and privacy. instead of identifying another device on the internet, a
Data is protected from external threats and disasters. loopback address references a device on your private, local
Lower costs associated with physical hosting. network.
Easier to customize and optimize for specific applications or needs. no website may have an IP address starting with “127.”
When you punch “google.com” into your browser bar and hit enter,
Disadvantages of Local Server Hosting the Domain Name System (DNS) takes what you entered, sees that
Smaller coverage area compared to cloud hosting. it's paired with the IP address 142.251.220.238, and routes your
Physical location creates potential access issues. request to the right place, Google’s web server.
Prone to hardware malfunctions due to age or wear and tear. hostname refers to the local machine currently making the request
Higher upfront costs for hardware, installation, and maintenance. On many computers, localhost is an alias for the IP address 127.0.0.1.
When computer pings this IP address, it communicate with itself.
Localhost is useful for software testing and security purposes
independent of a larger network
Cloud vs Local Server Hosting
Local Server Hosting
increased performance, data is stored and accessed on the same Localhost Uses
machine. Website and Web Application Testing
cheaper, don't have to pay for the extra storage and bandwidth you're in the process of building a website, it's important to test how
more reliable, no risk of a service outage due to a third-party it looks and functions in a web browser
provider. localhost comes in handy, when you not want to make your
reliable, no risk of a service outage due to a third-party provider. unfinished website live and accessible to the public just yet
Cloud Server Hosting use localhost as a private testing server for your websites and
If you need scalable storage and computing power applications
The cost of setting up and maintaining a cloud server requires the test programs without the need to send files through the internet,
search for a provider and relying on the levels of access and website is not exposed to the public before it's ready
security protocols set in place by the provider you choose.
Network and Speed Testing
IT staff and system admins can also use localhost to test the local
network without requiring an internet connection — they just need to
send a request to localhost and monitor this request to ensure that
the system’s software and hardware are working
Admins can also evaluate the speed of these requests to determine
if optimizations should be made

Blocking Bad Websites

network administrators have the ability to redirect requests for
known malicious websites to localhost in order to protect their
networks from potential attacks
achieved by modifying the computer's hosts file, which contains a
list of domain names and their corresponding IP addresses
prevent accidentally accessing harmful websites, administrators
can add the domain of the website to the hosts file and assign it to
the IP address 127.0.0.1
when the user enters the domain in their browser, they will be safely
redirected to localhost instead of the actual website
numerous pre-made hosts files available online, eliminating the
need for administrators to start from scratch

There’s no place like 127.0.0.1

A popular saying in the tech world goes, "There's no place like
127.0.0.1."
It's a clever play on the phrase "There's no place like home,"
highlighting the significance of localhost as the "home" device.
This joke helps us understand the importance of localhost as a safe
haven for running tests without relying on the internet.
it serves as a home base, allowing you to experiment and perfect
your creations before unveiling them to the world
while pinging localhost may not be a daily activity for non-IT
professionals, understanding its role can simplify the testing process
and remove some of the mystery surrounding it.
 (3) PHP: Strings
String
refers to a piece of text. $str = “ABCDEF”; CDEF
must be enclosed in single or double quotation marks. echo substr($str7, 2).'<BR>'; DEF
echo substr($str7, -3).'<BR>'; C
$msg = ‘Hello’; echo substr($str7, 2, 1);
$greeting = “Good Morning”;
$emptyStr = “”;
$emptyStr, on the other hand, stores a special string known
as an empty string. This is because there is no text enclosed
within the pair of double quotation marks we assign to it. Strings To Represent Dates
strtotime()
Converts a string to time.
Concatenate It accepts a string describing a
You can combine multiple strings using the concatenate specific date (and time) and tries to convert that to a
operator (.) timestamp.
$areacode = “(208)”; If you pass a string to the function that it is unable to convert,
$contact = “+1” .
$areacode . “1234567”; it returns false.
echo $contact; On the other hand, if you pass a string that it is able to
convert, it parses the string and returns the UNIX timestamp.
A UNIX timestamp is an integer that gives us the number of
seconds that have elapsed since January 1 1970 00:00:00 UTC
Commonly Used String Functions In PHP
echo strtotime(“next Monday”); 1708902000
strlen() echo strtotime(“now”); 1708826130
Returns the length $greeting = “Good Day!”; echo strtotime(“15 Nov 2019”); 1573772400
echo strlen($greeting); 9
of the string echo strtotime(“+1 week”); 1709430930

strtolower(), strtoupper()
Convert a string to lowercase and uppercase respectively date()
and return the new string. Accepts an optional timestamp and formats the
The original string is not changed. timestamp into a more readable string.
If timestamp is not provided, it formats the current
$greeting = “Hello World!”; Hello World! timestamp.
$str1 = strtolower($greeting); hello world!
$str2 = strtoupper($greeting); Suppose we want to format a timestamp that is 10 hours
HELLO WORLD! from the current time, we can use the statement below:
echo “<BR>”.$greeting;
echo “<BR>”.$str1; echo date(“d-M-Y”, strtotime(“+10 hours”));
echo “<BR>”.$str2;
The first argument specifies how we want the timestamp
to be formatted. To do that, we use a string consisting of
punctuation marks and predefined characters
trim()
Removes whitespaces from the front and end of a string
by default and returns the new string. “d-M-Y”
You can specify other characters for it to remove by “d” indicates that we want the day to be represented as a
passing a second optional argument to the function. two-digit number, using a leading zero if necessary (e.g., 3 is
output as 03).
$stmt = “ is ”; “M” and “Y” indicate that we want the month and year to be
echo “PHP”.$stmt.“Fun<BR>”; PHP is Fun represented as a three-letter text (e.g., Jan) and a four-digit
echo “PHP”.trim($stmt).“Fun<BR>”; PHPisFun number respectively.
$stmt2 = “**Hello**World**”; Hello**World punctuation mark “-” indicates that we want the day,
echo trim($stmt2,“*”); month and year to be separated by hyphens.
Setting The Timezone
substr() The results returned by the date() function are affected by the
Returns a substring. time zone set in the PHP server.
To use this function, we need to pass two arguments to it - For instance, while echo date('d-M-Y', strtotime("+ 10 hours"));
the string to extract the substring from and the position to gives us 03-Apr-2020 in one time zone, it may give us 04-Apr-
start extracting it. 2020 in another.
We can also pass a third argument to specify the length To avoid any discrepancy in results, it’s strongly recommended
of the substring to extract. that you manually set the timezone in your PHP server if you want
to use any date/time function in PHP.
If we do not provide this argument, the function extracts
the substring starting from the specified starting position
to the end of the string.
Positions in strings start from 0, not 1. For instance, if we
have a string 'ABCDEF', 'A' is at position 0, 'B' is at position 1
and so on.
Positions can also be negative. If it is negative, it is counted
from the back of the string. In 'ABCDEF', 'F' is at position -1, 'E'
is at position -2 etc.