Forem: Jahid.Dev

🌐 Foundations of Web Development

Jahid.Dev — Sun, 24 Aug 2025 07:33:28 +0000

The journey of learning web development always starts with the fundamentals. In this article, we'll cover two essential areas: Internet & Web Basics and Browser APIs & Storage. Once you understand these topics clearly, your foundation in web development will become strong.

🌍 Internet & Web Basics

How the Internet Works The internet is a global network of computers and servers. When a user visits a website, the browser sends a request to the server, and the server sends back a response. Client vs Server Client → Usually the browser, which sends the request. Server → Processes data and sends the response back to the client.

ISP, Router, Switch
ISP (Internet Service Provider) → Provides internet connectivity.
Router → Directs network traffic between devices.
Switch → Connects devices within the same network.

IP Address & DNS IP Address is the unique identifier of every device on the internet. IPv4 vs IPv6 → IPv4 is a 32-bit address (e.g., 192.168.0.1), whereas IPv6 is 128-bit and supports many more addresses. DNS (Domain Name System) → Converts human-readable domain names (e.g., google.com) into IP addresses.

DNS Resolution Flow
Domain Name → DNS Lookup → IP Address → Server Response

HTTP & HTTPS HTTP is the communication protocol of the web. HTTP Request Structure: Method, Headers, Body Common Methods: GET, POST, PUT, DELETE, PATCH Status Codes: 1xx → Informational 2xx → Success (e.g., 200 OK) 3xx → Redirection 4xx → Client Error (e.g., 404 Not Found) 5xx → Server Error

HTTPS & SSL/TLS
HTTPS encrypts the data to protect it from man-in-the-middle attacks. SSL/TLS certificates ensure secure communication.

Client-Server Architecture Frontend → The part that runs in the browser (UI). Backend → Handles server-side logic and data processing. Database → Stores data.

Request Flow:
Browser → Server → Database → Back to Browser

Statelessness of HTTP HTTP is a stateless protocol, meaning each request is independent, and the server doesn't remember previous ones. State Management Solutions Cookies Sessions Tokens (JWT)

Session Cookies Basics
Session Cookie → Deleted when the browser closes.
Persistent Cookie → Stored until a specified expiry time.
Use Cases: User Login, Shopping Cart, User Preferences

🖥️ Browser APIs & Storage

DOM (Document Object Model)
DOM is the tree structure representation of an HTML document.
Selecting Elements → getElementById, querySelector
Changing Content → innerHTML, textContent
Changing Styles → element.style, classList
Events API
Event Listeners → addEventListener
Common Events → click, keyup, change, submit
Event Bubbling & Capturing → How events propagate through parent-child elements.
Timers API
setTimeout → Runs code after a set time.
setInterval → Runs code repeatedly at specified intervals.
clearTimeout, clearInterval → Stop timers.
Storage Options in Browser
Cookies
Session Cookies, Persistent Cookies
Attributes: HttpOnly, Secure, SameSite, Expires, Max-Age
localStorage
Stores data permanently in the browser.
Methods: setItem, getItem, removeItem, clear
sessionStorage
Stores data only for the duration of the tab/session.
Same methods as localStorage.
Fetch API
Use fetch() to retrieve data from a server.
Handle promises using then / catch.
Parse JSON data using response.json().
Event Loop & Asynchronous JS Basics
Call Stack → Executes synchronous code.
Web APIs → Handle async tasks (e.g., setTimeout, fetch).
Callback Queue & Event Loop → Bring async tasks back to the main thread.
Microtasks (Promises) vs Macrotasks (setTimeout) → Understanding execution order.

API (Application Programming Interface) is a set of rules and tools that allows different software applications to communicate with each other.
👉 Think of it like a waiter in a restaurant:
You (the client) order food.
The waiter (API) takes your request to the kitchen (server).
The kitchen prepares the food and gives it to the waiter.
The waiter delivers it back to you.

In the same way:
You send a request to the server through an API.
The server processes it and sends back the data (like JSON or XML).
The API makes sure you get the right data in the right format.

🔑 In short: API is a bridge between client and server that allows them to exchange data.
Let's go through all the important HTTP status codes you need to know as a software engineer.
🔹 1xx - Informational
These codes indicate that the request was received and is still being processed.
100 Continue → The server received the request headers, the client should continue sending the request body.
101 Switching Protocols → Server is switching protocols (e.g., HTTP to WebSocket).
102 Processing → Server is still processing (used with WebDAV).

🔹 2xx - Success
The request was successfully received, understood, and accepted.
200 OK → Standard response for successful requests.
201 Created → Resource was created successfully.
202 Accepted → Request accepted but not yet processed.
204 No Content → Success, but no data is returned.
206 Partial Content → Returns part of the resource (used in file downloads, video streaming).

🔹 3xx - Redirection
The client must take additional action to complete the request.
301 Moved Permanently → Resource permanently moved to a new URL.
302 Found → Resource temporarily moved.
303 See Other → Redirect to another URL (commonly used after POST).
304 Not Modified → Cached version is still valid, no need to download again.
307 Temporary Redirect → Temporary redirect, method not changed.
308 Permanent Redirect → Permanent redirect, method not changed.

🔹 4xx - Client Errors
The request has an error caused by the client.
400 Bad Request → Invalid request (syntax error, bad parameters).
401 Unauthorized → Authentication required (e.g., missing/invalid token).
403 Forbidden → Client is authenticated but not allowed.
404 Not Found → Resource not found.
405 Method Not Allowed → HTTP method not supported (e.g., using POST instead of GET).
408 Request Timeout → Server timed out waiting for the request.
409 Conflict → Conflict with current state (e.g., duplicate data).
410 Gone → Resource is permanently deleted.
413 Payload Too Large → Request body too big.
415 Unsupported Media Type → Unsupported file/content type.
429 Too Many Requests → Rate limiting (too many requests in a short time).

🔹 5xx - Server Errors
The server failed to process a valid request.
500 Internal Server Error → Generic server error.
501 Not Implemented → Server doesn't support the requested feature.
502 Bad Gateway → Invalid response from an upstream server.
503 Service Unavailable → Server is overloaded or under maintenance.
504 Gateway Timeout → Upstream server didn't respond in time.
505 HTTP Version Not Supported → Server doesn't support the HTTP version.

✅ Quick Tip for Remembering:
2xx → Success
3xx → Redirects
4xx → Client's fault
5xx → Server's fault

Conclusion
By mastering these topics, you'll build a solid foundation in web development. Learning Internet & Web Basics helps you understand how the web works, while Browser APIs & Storage teaches you how to manage data and interactions within the browser.
👉 Once you've nailed these fundamentals, diving into frameworks like React, backend with Node.js/Express, and advanced security concepts will be much easier.

A Guide to the Internet, Software, and Web App Development

Jahid.Dev — Mon, 18 Aug 2025 10:12:40 +0000

This post provides a comprehensive explanation of the internet, software, and web app development, including the processes involved and the relationship between a web app developer and a software engineer.

The Internet: The Network That Connects the World
The internet is a vast network that links all the computers, mobile phones, and other devices on Earth. Think of it as a global communication system where data is transferred from one device to another. When you search for something on Google, your phone sends a message through the internet to Google's servers, which then sends the results back to your phone. This communication happens via wires or Wi-Fi.

Website vs. Web App vs. Software
The main difference between these three terms lies in their functionality and how they're used.

Website: It's like a static "page" or "book" on the internet, used primarily for displaying information. For example: Wikipedia. It's built with HTML, CSS, and JavaScript.
Web App: This is a special, highly interactive type of website. It changes based on user actions and works like a mobile app, but it runs through a browser. Examples include Google Maps or Gmail. A web app has two main parts:

Frontend: What the user sees and interacts with.
Backend: The hidden part on the server that handles data processing and storage.

Software: This refers to applications that are installed directly on your device's operating system (like Windows or macOS). It can often work without an internet connection. Examples include Adobe Photoshop or Microsoft Word.

Can a Web App Developer Be a Software Engineer?
Yes, a skilled web app developer can certainly be called a Software Engineer.
Many people mistakenly believe that software engineers only build desktop or mobile apps, but that's not true. Software engineering is a broad field that involves the design, development, testing, and maintenance of any kind of software system. A web app is also a complex software system that runs on both the client and server sides.
However, to be considered a software engineer, a web app developer needs more than just coding skills. They must also have a solid understanding of fundamental principles and key practices.

Core Principles of Software Engineering
A software engineer's job isn't just to write code; it's to build and manage the entire system using a disciplined process.

Software Development Life Cycle (SDLC): An engineer must know how to handle a project from start to finish. This includes:
Requirements Gathering: Understanding user needs.
Design: Creating the system's architecture and design.
Development: Writing the code.
Testing: Finding and fixing bugs.
Deployment: Making the application live.
Maintenance: Regularly updating and fixing the app.
Data Structures and Algorithms (DSA): This is essential for building efficient and fast software. An engineer must know how to store and manipulate data effectively.
Design Patterns and Architecture: To build large and complex systems, it's crucial to understand design patterns (like Singleton, Observer) and architectural styles (like Microservices, Monolithic).
Quality Assurance (QA) and Testing: An engineer must ensure their code is reliable and bug-free through testing (like Unit Testing and Integration Testing).
Version Control Systems (VCS): Tools like Git are vital for tracking different versions of the code and collaborating with a team.
Code Review and Documentation: Good engineers document their code well and review others' code to maintain high quality.

The Web App Development Process and Architecture
A web app typically follows a Client-Server Model architecture.

Planning and Design: The first step is to define the app's purpose and user needs. Then, the architecture and user interface (UI/UX) are designed.
Development: Frontend and backend developers write code based on the design.

Frontend: Uses frameworks like React, Angular, or Vue.js to build the user interface.
Backend: Uses languages like Node.js, Python/Django, or PHP/Laravel to create the server-side logic.
Database: Databases like MySQL, PostgreSQL, or MongoDB are used to store data.

3. Deployment: The completed app is hosted on a live server using services like AWS, Heroku, or Netlify.

What to Learn to Become a Skilled Developer?
If you want to pursue a career in this field, you need to acquire the right skills based on your interests.

To become a Web App Developer:

Web fundamentals: HTML, CSS, JavaScript.
Frontend Frameworks: React, Angular, or Vue.js.
Backend Languages & Frameworks: Node.js, Python/Django, or PHP/Laravel.
Databases: MySQL, PostgreSQL, or MongoDB.
Software Engineering Principles: DSA, Git, and Testing.

To become a Software Developer:

A core programming language: C++, Java, C#, or Python.
Data Structures and Algorithms (DSA).
Object-Oriented Programming (OOP).
Operating system concepts.
Version Control: Git.

This is a great starting point for anyone interested in the world of technology and development!

AI Business Idea

Jahid.Dev — Thu, 14 Aug 2025 08:22:17 +0000

A great business idea came to my mind, and I wanted to share it with you all. I believe there's a significant gap in the e-commerce sector of Bangladesh, particularly in customer service and data analytics.
What if we could build a platform that integrates with e-commerce websites to make their business operations easier and more efficient?
My idea is a SaaS (Software as a Service) platform that would offer several amazing features to e-commerce businesses for a monthly subscription fee:

🤖 Smart AI Chatbot:

It would answer customer queries in both English and Bangla, like product price, stock availability, or order status. This would reduce the burden on customer support teams.

🤠 Personalized Recommendations:

Based on a customer's Browse and purchase history, it would show them products they are likely to buy, thereby increasing sales.

😎 Advanced Search Engine:

As a customer types, they would get real-time feedback on product availability. If the product exists, the search would take them directly to the product page.

🎲 User Analytics Dashboard:

This would provide e-commerce owners with valuable data on what customers are searching for and asking the chatbot. This insight could help them understand product demand and make better business decisions.

I think a platform like this could be a game-changer for all e-commerce businesses, big or small, in Bangladesh. I believe this project has huge potential.
What are your thoughts? Is this an idea worth pursuing? I would love to hear your feedback!

JS Function, Object, String

Jahid.Dev — Thu, 11 Jul 2024 06:43:37 +0000

A JavaScript function is a block of code designed to perform a particular task. function is executed when "something" invokes it (calls it).
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function parameters are listed inside the parentheses () in the function definition. Function arguments are the values received by the function when it is invoked. Inside the function, the arguments (the parameters) behave as local variables.
When JavaScript reaches a return statement, the function will stop executing. If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement. Functions often compute a return value. The return value is "returned" back to the "caller".
The () operator invokes (calls) the function. Accessing a function without () returns the function and not the function result.
An object literal is a list of name:value pairs inside curly braces {}.
You can access object properties in two ways -
objectName.propertyName, objectName["propertyName"]
Objects are containers for Properties and Methods. Properties are named Values. Methods are Functions stored as Properties. Properties can be primitive values, functions, or even other objects. Objects are objects, Maths are objects, Functions are objects, Dates are objects, Arrays are objects, Maps are objects, Sets are objects. All JavaScript values, except primitives, are objects.
A primitive value is a value that has no properties or methods. 3.14 is a primitive value. A primitive data type is data that has a primitive value. JavaScript defines 7 types of primitive data types -
A) string
B) number
C) boolean
D) null
E) undefined
F) symbol
G) bigint
Primitive values are immutable (they are hardcoded and cannot be changed).
Objects are mutable. They are addressed by reference, not by value.
An Object is an Unordered Collection of Properties. Properties are the most important part of JavaScript objects. Properties can be changed, added, deleted, and some are read only.
The delete keyword deletes a property from an object. The delete keyword deletes both the value of the property and the property itself.
Accessing Object Method- objectName.methodName()
Adding a new method to an object -
person.name = function () { return this.firstName + " " + this.lastName; };
toUpperCase() method to convert a text to uppercase.
Some solutions to display JavaScript objects are -
Displaying the Object Properties by name, Displaying the Object
Properties in a Loop, Displaying the Object using Object.values(),
Displaying the Object using JSON.stringify()
Object For In Loop -
const person = { name: "John", age: 30, city: "New York" }; let text = ""; for (let x in person) { text += person[x] + " "; }; document.getElementById("demo").innerHTML = text;
You must use person[x] in the loop. person.x will not work (Because
x is the loop variable).
Object.values() creates an array from the property values.
Example - Object.values(person)
Object.entries() makes it simple to use objects in loops.
JavaScript objects can be converted to a string with JSON method
JSON.stringify().
To create an object type we use an object constructor function.
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
myMother.changeName = function (name) {
this.lastName = name;
}
myMother.changeName("Doe");
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
This is Example!
HTML events are "things" that happen to HTML elements. When
JavaScript is used in HTML pages, JavaScript can "react" on these
events. Here are some examples of HTML events -
An HTML web page has finished loading, An HTML input field was
changed, An HTML button was clicked. Common HTML Events -

onchange - An HTML element has been changed
onclick - The user clicks an HTML element
onmouseover - The user moves the mouse over an HTML element
onmouseout - The user moves the mouse away from an HTML element
onkeydown - The user pushes a keyboard key
onload - The browser has finished loading the page

Strings

Strings are for storing text. Strings are written with
quotes.
Template Strings were introduced with ES6 (JavaScript
2016). Templates are strings enclosed in backticks (This is a template string). Templates allow single and double quotes inside a
string. Templates are not supported in Internet Explorer.
To find the length of a string, use the built-in length
property.
The backslash escape character () turns special characters
into string characters. let text = "We are the so-called \"Vikings\" from the north."; let text= 'It\'s alright.';
JavaScript Strings as Objects - let y = new String("John");
Do not create Strings objects. The new keyword complicates the code and slows down execution speed. String objects can produce unexpected results
Comparing two JavaScript objects always returns false.
Basic String Methods -

String length - The length property returns the length of a string.
String charAt() - The charAt() method returns the character at a specified index (position) in a string.
String charCodeAt() - The charCodeAt() method returns the code of the character at a specified index in a string. The method returns a UTF-16 code (an integer between 0 and 65535).
String at()
String [ ]
String slice()
String substring()
String substr()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String repeat()
String replace()
String replaceAll()
String split()

String Search Methods -

String indexOf()
String lastIndexOf()
String search()
String match()
String matchAll()
String includes()
String startsWith()
String endsWith()

Template Strings use back-ticks (``) rather than the quotes ("") to define a string.

JS Variables, Operators, Data Types

Jahid.Dev — Wed, 10 Jul 2024 11:39:47 +0000

JavaScript Variables can be declared in 4 ways -
Automatically, Using var, Using let, Using const
The var keyword was used in all JavaScript code from 1995 to 2015. The let and const keywords were added to JavaScript in 2015. The var keyword should only be used in code written for older browsers. Variables are containers for storing values.
All JavaScript variables must be identified with unique names.
These unique names are called identifiers. JavaScript identifiers are case-sensitive.
The "equal to" operator is written like == in JavaScript. Creating a variable in JavaScript is called "declaring" a variable. After the declaration, the variable has no value (technically it is undefined).
You can declare many variables in one statement. Start the statement with let and separate the variables by comma:
let person = "John Doe", age = 25, color = "Gray";
JavaScript scoping determines the visibility and lifetime of variables within a program. Understanding scoping is essential for writing efficient and bug-free code. Here’s an overview of the different types of scoping in JavaScript -
Global Scope -
Variables declared outside any function or block are in the global scope and are accessible from anywhere in the code. In a browser, global variables become properties of the window object.
Function Scope -
Variables declared inside a function are in the function scope and are not accessible outside the function. JavaScript functions create their own scope.
Block Scope -
Introduced in ES6, let and const allow block-level scoping. This means variables declared within a block (e.g., inside an if statement or a loop) are only accessible within that block.
Lexical Scope -
JavaScript uses lexical scoping (or static scoping), meaning the scope of a variable is determined by its position within the source code. Nested functions have access to variables declared in their outer scopes.
The this Keyword -
The value of this depends on the context in which a function is called. In the global scope, this refers to the global object (window in browsers). Inside a function, its value depends on how the function is called.
Global Scope: Variables accessible from anywhere.
Function Scope: Variables accessible only within the function.
Block Scope: Variables accessible only within the block (using let and const).
Lexical Scope: Inner functions have access to variables of their outer functions.
this Keyword: Depends on the context of the function call.
Variables declared with let have Block Scope. Variables declared with let must be Declared before use. Variables declared with let cannot be Redeclared in the same scope.
let and const have block scope. let and const can not be redeclared. let and const must be declared before use. let and const does not bind to this.
Variables defined with const cannot be Redeclared, cannot be Reassigned and have Block Scope.
Variables declared with let and const are hoisted to the top of their block scope (not function or global scope), but they are not initialized. Using let variable before it is declared will result in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until it is declared. The 'var' is hoisted. The Temporal Dead Zone (TDZ) in JavaScript refers to the period of time during which a variable is declared using let or const but has not yet been initialized.
Use const when you declare - A new Array, Object, Function, RegExp.
Assignment Operator =
Addition Operator +
Multiplication Operator *
Comparison Operator >
There are different types of JavaScript operators -
Arithmetic Operators
Assignment Operators
Comparison Operators
String Operators
Logical Operators
Bitwise Operators
Ternary Operators
Type Operators
Addition +
Subtraction -
Multiplication *
Exponentiation **
Division /
Modulus(Division Remainder) %
Increment ++
Decrement --
Addition Assignment Operator +=
Comparison Operators -
equal to ==
equal value and equal type ===
not equal !=
not equal value or not equal type !==
greater than >
less than <
greater than or equal to >=
less than or equal to <=
ternary operator ?
JavaScript Type Operators -
typeof - Returns the type of a variable.
instanceof - Returns true if an object is an instance of an object type.
Arithmetic Operators -
Addition +
Subtraction -
Multiplication *
Exponentiation (ES2016) **
Division /
Modulus (Remainder) %
Increment ++
Decrement --
Assignment Operators -
A) =
B) +=
C) -=
D) =
E) /=
F) %=
G) *=
JavaScript has 8 Datatypes -
String, Number, Bigint, Boolean, Undefined, Null, Symbol, Object
JavaScript has dynamic types. This means that the same variable can be used to hold different data types. All JavaScript numbers are stored in a 64-bit floating-point format. You can use the JavaScript typeof operator to find the type of a JavaScript variable. The typeof operator returns the type of a variable or an expression.
In JavaScript, there are 6 falsy values -
false, 0, "", null, undefined, NaN

JS Introduction

Jahid.Dev — Wed, 10 Jul 2024 07:24:15 +0000

JavaScript was created by Brendan Eich in 1995. He developed it while working at Netscape Communications Corporation. The language was initially called Mocha, then renamed to LiveScript, and finally to JavaScript. The first version of JavaScript was included in Netscape Navigator 2.0, which was released in December 1995.
A computer program is a list of instructions to be executed by a computer. In a programming language, these programming instructions are called statements. A JavaScript program is a list of programming statements.
JavaScript statements are composed of Values, Operators, Expressions, Keywords, and Comments.
An expression is a combination of values, variables, and operators, which computes to a value The computation is called an evaluation.
The JavaScript syntax defines two types of values-
Fixed values (Literals) and Variable values (Variables)
JavaScript can display data in different ways -
innerHTML, document.write(), window.alert(), console.log(), window.print()
var = Declares a variable.
let = Declares a block variable.
const = Declares a block constant.
if = Marks a block of statements to be executed on a condition.
switch = Marks a block of statements to be executed in different cases.
for = Marks a block of statements to be executed in a loop.
function = Declares a function.
return = Exits a function.
try = Implements error handling to a block of statements.
JavaScript uses the keywords var, let and const to declare variables. Arithmetic operators ( + - * / ) to compute values.
Assignment operator ( = ) to assign values to variables.
// Single Line Commnet
/*
Multi Line
Comments
*/

PHP তে Hello, World!

Jahid.Dev — Fri, 14 Apr 2023 18:04:12 +0000

আজ আমরা দেখবো কিভাবে PHP তে কোড লিখে ওয়েব ব্রাউজারে Hello, World! দেখা যায়।

শুরুতেই আমরা xampp ফোল্ডারে থাকা htdocs এর ভেতর একটি helloworld নামে ফোল্ডার ক্রিয়েট করে তার ভেতর index.php নামে একটি ফাইল নিই। এবার এই ফাইলটা আমাদের কোড এডিটরে ওপেন করে নিচের কোডটুকু লিখে ফেলি।
কোড -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP</title>
</head>
<body>
<h1><?php echo 'Hello, World!'; ?></h1>
</body>
</html>

আমরা এবার আমাদের xampp সফটওয়্যারটি ওপেন করে Apache এবং MySQL Start করে নিই। এরপর আমাদের ওয়েব ব্রাউজারে গিয়ে এই লিংকটি প্রেস করে দিলাম localhost/helloworld এবং দেখতে পেলাম Hello, World! লেখাটি প্রিন্ট হয়েছে।

এখন আমরা বুঝবো কিভাবে কি হল! উপরে HTML কোডে PHP লেখা হয়েছে যা h1 ট্যাগের মাঝে। <?php হচ্ছে PHP এর ওপেনিং ট্যাগ এবং ?> হচ্ছে ক্লোজিং ট্যাগ। আর echo হচ্ছে প্রিন্ট করার জন্য একটি স্টেটমেন্ট। এরপর 'Hello, World!' হচ্ছে একটা স্ট্রিং। স্ট্রিং নিয়ে সামনে আলোচনা হবে তাই আপাতত আমরা এই বিষয়টা স্কিপ করে যাচ্ছি। আর ‘’ এর ভেতরে থাকা কথাগুলাই আমরা ওয়েব পেইজে দেখতে পাচ্ছি এবং ; দিয়ে বুঝানো হয়েছে যে, স্ট্রিং টা এখানেই শেষ হয়েছে। মূলত PHP এই Hello, World! কথাটাই কোডের মাধ্যমে ওয়েব পেইজে প্রিন্ট করেছে। আমরা আরো একভাবে প্রিন্ট করতে পারি, যদি আমরা index.php ফাইলের ভেতরই কোড লিখি তাহলে ক্লোজিং ট্যাগ না লিখলেও হবে। আমরা শুধুই PHP তে লিখবো এবং ব্রাউজারে দেখবো। অতএব কোডটা হল -
<?php
echo 'Hello World!';
তবে, যেহেতু আমরা এবার আর HTML এর h1 ট্যাগে কোড লিখি নাই তাই ব্রাউজারে আমরা h1 এর ডিফল্ট টেক্সট স্টাইল পাবো না এমনকি পেইজের টাইটেলও নাই যা আমরা পরবর্তী কোডে লিখিই নাই। আর অবশ্যই, প্রথমবারের কোডটুকু কমেন্ট করে নিবেন এবং দ্বিতীয়বারের কোড লিখার পর ব্রাউজারে গিয়ে একটা রিলোড দিয়ে নেবেন।

তো এভাবেই আমরা PHP তে কোড লিখে ওয়েব ব্রাউজারে Hello, World! দেখতে পারি। আশা করছি আজকের টপিকটা ভালো লেগেছে, ধন্যবাদ।

PHP 💻 03

PHP ইনস্টল

Jahid.Dev — Fri, 14 Apr 2023 18:02:08 +0000

আজ আমরা জানবো, কিভাবে কম্পিউটারে PHP ইনস্টল করতে হয়, যাতে আমরা PHP শিখতে শুরু করতে পারি।

লোকাল মেশিনে PHP দিয়ে কাজ করতে হলে নিম্নলিখিত সফটওয়্যার গুলো কম্পিউটারে ইনস্টল করতে হবেঃ
০১) PHP
০২) PHP সাপোর্ট করে এমন একটি ওয়েব সার্ভার।
০৩) একটি ডাটাবেস সার্ভার।
সাধারণত এই সফটওয়্যারগুলো আলাদা আলাদা ইনস্টল করে সংযোগ করা আমাদের মত বিগিনারদের জন্য একটু অসুবিধাজনক। এজন্য সহজে ইনস্টল হওয়া XAMPP নামক সফটওয়্যার প্যাকেজটি খুব জনপ্রিয় এবং প্রচলিত PHP ডেভেলপমেন্ট এনভায়রনমেন্ট হিসাবে ব্যবহৃত হয়। XAMPP হল একটি সহজ ইনস্টল Apache ডিস্ট্রিবিউশন যা PHP, MariaDB এবং Apache webserver এনবল করে। XAMPP Windows, Linux, and macOS সাপোর্ট করে।
**নোট [ MariaDB হল সবচেয়ে জনপ্রিয় রিলেশনাল ডাটাবেজ ম্যানেজমেন্ট সিস্টেম মাইএসকিউএল (MySQL) এর একটি Fork ]
Download XAMPP
(https://www.apachefriends.org/index.html) এই ওয়েব অ্যাড্রেস থেকে আপনার অপারেটিং সিস্টেম অনুযায়ী XAMPP’র লেটেস্ট ভার্সন ডাউনলোড করুন।
Install XAMPP on Windows
এই আর্টিকেলের সাথে ইন্সটল করার জন্য যা যা করতে হবে সেই স্টেপগুলো ইমেজ আকারে অ্যাটাচ করে দেয়া হবে।

১) ইনস্টলেশন শুরু করুন -
Double Click করে ডাউনলোড করা ফাইলটি খুলতে হবে এবং XAMPP ইনস্টল করার জন্য সেটআপ শুরু করতে হবে।
২) ইনস্টল করার জন্য কম্পোনেন্ট সিলেক্ট করুন -
যেসব কম্পোনেন্ট ইনস্টল করতে চান সেগুলো নির্বাচন করুন। এই পর্যায়ে, Apache, MySQL, PHP, এবং phpMyAdmin নির্বাচন করুন। এছাড়াও অন্যান্য কম্পোনেন্ট ডিসলেক্ট করুন এবং পরবর্তী ধাপে যেতে নেক্সট বাটন চাপুন।
৩) ইনস্টলেশন ফোল্ডার নির্দিষ্ট করুন -
একটি ফোল্ডার নির্বাচন করুন যেখানে XAMPP ইনস্টল করা হবে। এটি সুপরিচিত c:\xampp ফোল্ডারে XAMPP ইনস্টল করার পরামর্শ দেয়া হয়। পরবর্তী ধাপে যাওয়ার জন্য নেক্সট বাটনে ক্লিক করুন।
৪) একটি Language Select করুন -
XAMPP কন্ট্রোল প্যানেলের জন্য একটি Language নির্বাচন করুন। ডিফল্ট Language ইংরেজি এবং আপনি আপনার পছন্দমত ভাষা নির্বাচন করতে পারেন ও পরবর্তী ধাপে যেতে নেকস্ট বাটনটি ক্লিক করুন।
৫) Bitnami -
PHP শেখার জন্য Bitnami দরকার নেই, এই ধাপটি স্কিপ করতে পারেন। কেবলমাত্র পরবর্তী ধাপে যেতে নেক্সট বাটনটি ক্লিক করুন।
৬) XAMPP ইনস্টলেশন শুরু -
আপনি এখন XAMPP ইনস্টল করার জন্য প্রস্তুত। ইনস্টলেশন শুরু করতে নেক্সট বাটনটি ক্লিক করুন। এটি সম্পূর্ণ হওয়ার জন্য কিছু মিনিট সময় নেবে।
৭) XAMPP সেটআপ সম্পন্ন হচ্ছে -
ইনস্টলেশন শেষ হলে, XAMPP সেটআপ উইজার্ড নিচের স্ক্রিনটি (৭ম ইমেজ) দেখায়। আপনি ফিনিশ বাটনে ক্লিক করে XAMPP কন্ট্রোল প্যানেল লঞ্চ করতে পারেন।
৮) সেটআপ সম্পন্ন হচ্ছে -
XAMPP কন্ট্রোল প্যানেলে ইনস্টল করা সার্ভিসগুলি তালিকাভুক্ত আছে। একটি সার্ভিস চালু করতে, সার্ভিসের সাথে থাকা Start বাটনটি ক্লিক করুন। এরপর ৯ম ইমেজে দেখা যাচ্ছে -
Apache web server এবং MySQL রানিং আছে। Apache’র পোর্ট হচ্ছে ৮০,৪৪৩ এবং MySQL’র ৩৩০৬।
৯) XAMPP Launch করুন -
ওয়েব ব্রাউজার খুলে http://localhost/ এই URL-এ নেভিগেট করুন। সফলভাবে ইনস্টলেশন সম্পন্ন হলে, আপনি XAMPP এর welcome screen দেখতে পাবেন।
১০) সমস্যা দূর করার পদক্ষেপ -
ডিফল্টভাবে, Apache পোর্ট ৮০ ব্যবহার করে। তবে, যদি পোর্ট ৮০ অন্য কোন সার্ভিস ব্যবহার করে থাকে, তবে আপনি একটি ত্রুটি পেতে পারেন (১০ম ইমেজ)।

“Problem detected!
Port 80 in use by "Unable to open process" with PID 4!
Apache WILL NOT start without the configured ports free!
You need to uninstall/disable/reconfigure the blocking application
or reconfigure Apache and the Control Panel to listen on a different port ”
এরকম নোটিফিকেশন আসতে পারে। সমস্যা সমাধানের জন্য আপনি পোর্ট 80 এর পরিবর্তে একটি ফ্রি পোর্ট, উদাহরণস্বরূপ 8080 ব্যবহার করতে পারেন, এটি করতে নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করতে হবে:
প্রথমে, Apache মডিউলের সাথে থাকা কনফিগ বাটনটি ক্লিক করুন (১০ম ইমেজ) । এরপর যে লাইনে Listen 80 আছে তার সাথে পোর্টটি 80 থেকে 8080 এ পরিবর্তন করুন(১১ তম ইমেজ)। এবার Apache চালু করতে স্টার্ট বাটনটি চাপুন। যদি পোর্টটি ফ্রি থাকে, অ্যাপাচি সঠিকভাবে চালু হয় তবে ইমেজের (১২তম ইমেজ) মতো দেখাবে।

PHP 🖥️ 02

PHP কি

Jahid.Dev — Fri, 14 Apr 2023 17:55:10 +0000

আমরা এই টিউটোরিয়াল থেকে যা জানতে চলেছি -
১) PHP কি,
২) এটি কিভাবে কাজ করে,
৩) এটি কি কি করতে পারে এবং
৪) এর সুবিধাগুলো

PHP হল একটি সার্ভার সাইড ল্যাঙ্গুয়েজ যা সাধারণত ওয়েব অ্যাপ্লিকেশন তৈরি করতে, ওয়েব ডেভেলপমেন্টের কাজে ব্যবহৃত হয়, যার ফুল ফরম হচ্ছে - Hypertext Preprocessor.
১৯৯৪ সালে Rasmus Lerdorf পিএইচপি তৈরি করেছেন। তবে, বর্তমানে PHP Development Team দ্বারা এটি পরিচালিত হয়। যখন আমরা আমাদের ওয়েব ব্রাউজারে একটি ওয়েবসাইট ওপেন করি তখন ওয়েব ব্রাউজার ওয়েব সার্ভারকে একটি HTTP Request প্রেরণ করে, যেখানে ওয়েব সাইট’টি রয়েছে। এরপর ওয়েব সার্ভারটি Request গ্রহণ করে একটি HTML Document দিয়ে রেসপন্স করে। চট করে একটি উদাহরণ দেয়া যায়, মনে করি ওয়েব ব্রাউজার হল একটি ক্লায়েন্ট এবং ওয়েব সার্ভার হল একটি সার্ভার। এখন এই ক্লায়েন্ট একটি পেইজ’এর জন্য Request পাঠায় এবং তা ওয়েব সার্ভার পূর্ণ করে দেয়। PHP ওয়েব সার্ভারের ভেতর Run করে, Request’কে Processes করে এবং একটি HTML Document রিটার্ন করে। PHP একটি General-purpose Language. PHP একটি Cross Platform Language কারণ এটি প্রায় সব Major Operating System’এ চলতে পারে, যেমন - Linux, Windows, macOS এসব। PHP প্রায় সকল Leading ওয়েব সার্ভার যেমন - Nginx, OpenBSD, Apache’তে ব্যবহার করা যায় এবং এছাড়াও কিছু Cloud Environment’ও PHP support করে যেমন - Microsoft Azure, Amazon AWS ইত্যাদি। PHP কেবলমাত্র HTML প্রসেস করেই সীমিত নয়। PDF, GIF, JPEG এবং PNG তৈরির জন্য PHP’এর নিজস্ব Built-in Support আছে। একটি লক্ষণীয় বৈশিষ্ট্য হল, PHP একাধিক ডাটাবেস সমর্থন করে, যেমন - MySQL, PostgreSQL, MS SQL, db2, Oracle Database এবং MongoDB’এর মতো ডাটাবেস। PHP’র দুটি প্রধান ব্যবহার রয়েছে - একটি Server-side Scripting ও অন্যটি Command-line Scripting.

PHP যেভাবে কাজ করে -
১) ওয়েব ব্রাউজার ওয়েব সার্ভারে একটি HTTP Request পাঠায়।
২) ওয়েব সার্ভারে থাকা PHP প্রিপ্রসেসরটি PHP কোড প্রসেস করে HTML Document তৈরি করে।
৩) ওয়েব সার্ভার এই HTML Document’টি ওয়েব ব্রাউজারে ফিরিয়ে দেয়।

PHP’র সুবিধা -
১) PHP ওয়েবসাইট সাধারণত খুব দ্রুত Load হয়।
২) PHP খুবই Stable একটি Language
৩) পিএইচপি ওপেন সোর্স এবং বিনামূল্যে ব্যবহার করা যায়।
৪) PHP’র Active Online Community রয়েছে।

PHP 💻 01

5 Websites That Will Hook You Towards CSS 🚀

Jahid.Dev — Fri, 26 Aug 2022 03:15:00 +0000

Complete Guide to CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid
CSS Selectors Cheat Sheet
https://www.sitepoint.com/css-selectors
Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox
The Lengths of CSS
https://css-tricks.com/the-lengths-of-css
CSS Transitions and Transforms
https://thoughtbot.com/blog/transitions-and-transforms