DEV Community: Mohammad Sohrab Hossain

SQL for Beginners

Mohammad Sohrab Hossain — Tue, 13 Feb 2024 08:44:36 +0000

আজকে আমরা জানবো SQL নিয়ে। SQL কি, SQL কিভাবে কাজ করে, SQL Table কি, SQL Table কিভাবে তৈরি করতে হয়, How to insert data in SQL Table with a command, and much more.

So, Let's start with our SQL Journey.

What is SQL?

SQL (Structured Query Language) হল একটি শক্তিশালী ডেটা ম্যানিপুলেশন ল্যাংগুয়েজ যা আপনাকে ডেটাবেসের সাথে যোগাযোগ করতে দেয়।

Why Should I learn SQL?

আপনি বিভিন্ন কারণে SQL শিখতে পারেন। এখানে কয়েকটি কারণ উল্লেখ করা হল:

ক্যারিয়ারের সুযোগ: SQL ডেটা বিশ্লেষণ, ডেটাবেস অ্যাডমিনিস্ট্রেশন এবং ডেটা সায়েন্সের মতো ক্ষেত্রগুলিতে একটি গুরুত্বপূর্ণ দক্ষতা। এসকিউয়েল জানা আপনাকে এই ক্ষেত্রগুলিতে চাকরির সুযোগ পেতে সাহায্য করতে পারে।
ডেটা বিশ্লেষণ: SQL আপনাকে ডেটা থেকে মূল্যবান অন্তর্দৃষ্টি বের করতে সাহায্য করতে পারে। আপনি এসকিউয়েল ব্যবহার করে ডেটা ট্রেন্ড, প্যাটার্ন এবং সম্পর্ক খুঁজে পেতে পারেন।
ডেটাবেস ম্যানেজমেন্ট: SQL আপনাকে ডেটাবেস তৈরি, পরিচালনা এবং রক্ষণাবেক্ষণ করতে সাহায্য করতে পারে। আপনি এসকিউয়েল ব্যবহার করে ডেটা টেবিল তৈরি করতে, ডেটা যোগ করতে, ডেটা আপডেট করতে এবং ডেটা মুছে ফেলতে পারেন।
ব্যক্তিগত ব্যবহার: SQL আপনাকে আপনার ব্যক্তিগত ডেটা ট্র্যাক করতে সাহায্য করতে পারে। আপনি SQL ব্যবহার করে আপনার ব্যক্তিগত ফাইন্যান্স, আপনার স্বাস্থ্যের রেকর্ড বা আপনার কাজের তালিকা ট্র্যাক করতে পারেন।

এছাড়াও আরো অনেক কারনে আপনি SQL শিখতে পারেন।

তাহলে চলুন, SQL নিয়ে আরো বিশদ ভাবে একটা যাত্রা শুরু করি।

বিঃদ্রঃ SQL নিয়ে আপনার কোনো প্রশ্ন থাকলে কমেন্ট বক্সে জানাতে পারেন।

What are the main topics of SQL?

1. ডেটাবেস ম্যানেজমেন্ট:

ডেটাবেস তৈরি, পরিচালনা এবং রক্ষণাবেক্ষণ
ডেটা টেবিল তৈরি, পরিবর্তন এবং মুছে ফেলা
ডেটা টাইপ এবং ডেটা কনস্ট্রেন্ট
ইউজার এবং পারমিশন

2. ডেটা ম্যানিপুলেশন:

ডেটা যোগ, আপডেট এবং মুছে ফেলা
ডেটা ট্রান্সফরমেশন এবং ফাংশন
JOINs ব্যবহার করে ডেটা টেবিল একত্রিত করা
Subqueries

3. ডেটা কুয়েরি:

SELECT কমান্ড ব্যবহার করে ডেটা বের করা
WHERE clause ব্যবহার করে ডেটা ফিল্টার করা
ORDER BY clause ব্যবহার করে ডেটা সাজানো
GROUP BY clause ব্যবহার করে ডেটা গ্রুপ করা

4. ডেটা অ্যানালাইসিস:

Aggregation ফাংশন ব্যবহার করে ডেটা সারাংশ করা
Window ফাংশন ব্যবহার করে ডেটা ট্রেন্ড বিশ্লেষণ করা
Common Table Expressions (CTE) ব্যবহার করে জটিল ক্যোয়ারি তৈরি করা

5. SQL এর বিভিন্ন ভার্সন:

MySQL
PostgreSQL
Oracle
SQL Server

6. ডেটাবেস ডিজাইন:

ডেটাবেস নরমালাইজেশন
Entity-relationship (ER) ডায়াগ্রাম
ডেটা মডেলিং

7. ডেটাবেস সিকিউরিটি:

ডেটা এনক্রিপশন
Access control
Auditing

8. SQL এর উন্নত টপিক:

Triggers
Stored procedures
Views

এই টপিক গুলো ছাড়াও আরও অনেক গুলো বিষয় আছে SQL-এর মধ্যে। ধীরে ধীরে আমরা সে টপিক গুলো সম্পর্কে জানবো। যেহেতু এটা Beginners দের জন্য, তাই আমরা আপাতত Basic Level শিখবো।

যেহেতু এটা একটা Query Language, তাই আজকে শিখবো কিভাবে Database এ কমান্ডের মাধ্যমে Table তৈরি করতে হয় 😎.

মনে করুন আপনি একটা টেবিল তৈরি করবেন, যার নাম হলো AllEmployeeList, এবং তার মধ্যে বেশ কিছু কলাম থাকবে, সেগুলো হলো -

ID
EmployeeId
Name
Department
Designation
Phone
Email
Grade
Salary
JoiningDate

এবার শিখবো কিভাবে কমান্ড এর মাধ্যমে Table এবং Column তৈরি করতে হয় ✌️😎

Create Table

CREATE TABLE AllEmployeeList ( ID INT PRIMARY KEY AUTO_INCREMENT, EmployeeId INT, Name VARCHAR(255), Department VARCHAR(255), Designation VARCHAR(255), Phone VARCHAR(20), Email VARCHAR(255), Grade VARCHAR(10), Salary DECIMAL(10, 2), JoiningDate DATE );

এবার শিখবো কমান্ড এর মাধ্যমে উক্ত AllEmployeeList Table এ কিভাবে Data Insert করতে হয়।

Insert Data into Table

INSERT INTO AllEmployeeList (ID, EmployeeId, Name, Department, Designation, Phone, Email, Grade, Salary, JoiningDate) VALUES (1, 100001, 'MR. Nahid', 'Information Technology', 'Software Engineer', '01700000000', 'nahid@gmail.com', '1st', 100000, '2023-01-01')

অনুরূপ ভাবে আমরা শেখার সুবিধার্থে আরো একটি Table এবং Column তৈরি করা শিখবো।

যার নাম হলো AllEmployeeDetails, এবং তার মধ্যে বেশ কিছু কলাম থাকবে, সেগুলো হলো -

ID
EmployeeId
Name
Department
Designation
Phone
Email
Grade
Salary
PresentAddress
PermanentAddress
MaritalStatus

অনুরূপ ভাবে শিখবো কিভাবে কমান্ড এর মাধ্যমে উক্ত Table এবং Column তৈরি করতে হয় ✌️😎

CREATE TABLE AllEmployeeDetails ( ID INT, EmployeeId INT, Name VARCHAR(255), Department VARCHAR(255), Designation VARCHAR(255), Phone VARCHAR(20), Email VARCHAR(255), Grade VARCHAR(10), Salary DECIMAL(10, 2), PresentAddress VARCHAR(255), PermanentAddress VARCHAR(255), MaritalStatus VARCHAR(20), PRIMARY KEY (ID, EmployeeId) );

একই ভাবে এবার শিখবো কমান্ড এর মাধ্যমে উক্ত AllEmployeeDetails Table এ কিভাবে Data Insert করতে হয়।

INSERT INTO AllEmployeeDetails (ID, EmployeeId, Name, Department, Designation, Phone, Email, Grade, Salary, PresentAddress, PermanentAddress, MaritalStatus) VALUES (1, 100001, 'MR. Nahid', 'Information Technology', 'Software Engineer', '01700000000', 'nahid@gmail.com', '1st', 100000, 'Bangladesh', 'Dhaka', 'Unmarried')

What is JOIN in Table

জয়েন হলো SQL-এর একটি শক্তিশালী ক্লজ যা আপনাকে দুটি বা ততোধিক টেবিল থেকে ডেটা একত্রিত করতে দেয়। টেবিলগুলোর মধ্যে ডেটা সম্পর্কিত হতে হবে।

ধরুন, আপনার কাছে দুটি আলাদা টেবিল আছে: **AllEmployeeList এবং AllEmployeeDetails **

আপনি যদি "AllEmployeeList" এবং "AllEmployeeDetails" টেবিলের মধ্যে JOIN করতে চান, তাহলে আপনি এই দুটি টেবিলের "EmployeeId" কলাম ব্যবহার করে JOIN করতে পারেন। এই উদাহরণে, আমরা "AllEmployeeList" এর তথ্য সহ যৌক্তিক করতে চাইব। নিচে একটি উদাহরণ দেওয়া হলো।

SELECT AllEmployeeList.ID, AllEmployeeList.EmployeeId, AllEmployeeList.Name, AllEmployeeList.Department, AllEmployeeList.Designation, AllEmployeeList.Phone, AllEmployeeList.Email, AllEmployeeList.Grade, AllEmployeeList.Salary, AllEmployeeList.JoiningDate, AllEmployeeDetails.PresentAddress, AllEmployeeDetails.PermanentAddress, AllEmployeeDetails.MaritalStatus FROM AllEmployeeList JOIN AllEmployeeDetails ON AllEmployeeList.EmployeeId = AllEmployeeDetails.EmployeeId;

আজকের জন্য এটুকুই, ইনশাআল্লাহ্‌ আবারো ফিরে আসবো SQL নিয়ে আরো কিছু ব্লগে।

বিঃদ্রঃ ভুলত্রুটি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।

ধন্যবাদ

JavaScript Interview Questions, You Need to know.

Mohammad Sohrab Hossain — Sun, 18 Jun 2023 11:15:55 +0000

What is Null vs Undefined?

Null: The intentional absence of any value in a variable is called null.
Example:
var myVar = null;
alert(myVar);

Undefined: If a parameter is not passed in a variable, it is called undefined.
Example:
let x;
console.log(x);

What is Double (==) and Triple (===)?

Double (==): Double Equals (==) checks for value equality only.
Example:
var x = "test"
var y = "test"
console.log (x == y)

Triple (===): Triple === is used for comparing two variables, but this operator also checks datatype and compares two values.
Example:
const number = 1234
const stringNumber = '1234'
console.log(number === stringNumber);

What are Hoisting, Block Scope, and Global Scope?

Hoisting: Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Block Scope: A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block.

Global Scope: the global scope is the complete JavaScript environment. In HTML, the global scope is the window object. All global variables belong to the window object.

What is Closure, Encapsulation, and Private Variable?

Closure: A closure is a combination of a function bundled together with references to its surrounding state.

Encapsulation: JavaScript Encapsulation is a process of binding the data with the functions acting on that data. It allows us to control the data and validate it.

Private Variable: A private variable is only visible to the current class. It is not accessible in the global scope or to any of its subclasses.

What is Bind, Call, Apply?

Bind: The bind () method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Call: The call () allows for a function/method belonging to one object to be assigned and called for a different object. call() provides a new value of this to the function/method.

Apply: Apply method is similar to the call method. In last this starts with an array.
Syntax: oldObject.object. apply (newObjectName, [value]);

How to find the largest element from an array?

There are the three approaches:

with a FOR loop
using the reduce () method
using Math.max ()

Looking for Reporting tools in React Application.

Mohammad Sohrab Hossain — Tue, 02 Aug 2022 03:30:05 +0000

My company is looking for a Reporting tool to integrate into our React Application.
Our backend is ASP.net core with SQL server and Front end React with redux.

We are looking for a reporting tool. And then the reports are exported into pdf, excel, and so on.

We are looking for something similar to Reporting tools like Crystal Report which use the asp.net reporting system. can anyone please suggest to me something about it, please ❤️

Chatting Application

Mohammad Sohrab Hossain — Thu, 28 Jul 2022 07:13:35 +0000

I want to create a chatting application, what should I learn first and which step took for building this project?

10 Things you need to know in React.

Mohammad Sohrab Hossain — Sat, 08 May 2021 09:33:33 +0000

What is react?

React is an open source, front end, declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Here are just few of the reasons why people choose to program with React.

React if fast. Apps made in React can handle complex updates and still feet quick and responsive.
React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. Reacts modularity can be a beautiful solution to JavaScript’s maintainability problems.
React is scalable. Large programs that display a lot of changing data are where React performs best.
React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out Reacts potential.
React is popular. While this reason has admittedly little to do with Reacts quality, the truth is that understanding React will make you more employable.
What React Components?

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render () function.

Components come in two types

Class Components
Function Components

Class Components: A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.

When creating a React component, the component’s name must start with an upper-case letter.

The component has to include the extends React. Component statement, this statement creates an inheritance to React. Component, and gives your component access to React. Component’s functions.

The component also requires a render () method, this method returns HTML.

Example: Create a Class components called Car

class Car extends React. Components {

render () {

return

Hi, I’m a Rolls Royce Car!

;

}

Now React application has a component called Car, which returns a

element.

To use this component in your application, use similar syntax as normal HTML:

Example: Display the Car component in the “root” element:

ReactDOM.render(, document.getElementById(‘root’));

Function Components: A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. … Component and create a render function which returns a React element. This requires more code but will also give you some benefits which you will see later on.

Here is the same example as above, but created using a Function component instead.

A Function component also returns HTML, and behaves pretty much the same way as a Class component, but Class components have some additions, and will be preferred in this tutorial.

Example: Create a Function component called Car

function Car () {return

Hi, I am also Rolls Royce Car!

;}

Once again, your React application has a Car component.

Refer to the Car component as normal HTML (except in React, components must start with an upper-case letter):

Example: Display the Car component in the "root" element:

ReactDOM.render(, document.getElementById('root'));

What are Props?

React is a component-based library which divides the UI into little reusable pieces. In some cases, those components need to communicate (send data to each other) and the way to pass data between components is by using props.

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. (one way from parent to child)

Here are two important things about Props:

Props are read-only.
Props cannot be modified.

Using Props in React: I will be explaining how to use Props step by step
Firstly, define an attribute and its value(data).
Then pass it to child components by using props.
Finally, render the Props Data.

Example, we have a ParentComponent including another component (child):

class ParentComponent extends Component {

render () {

I’m the parent components.

);

}

And this is our ChildComponents:

const ChildComponents = () => {

return

I’m the 1st child!

};
What is state?

Answer: React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

Here are two important things about State:

State changes can be asynchronous.
State can be modified using this.setState

ü Using State in React: I will be explaining how to use State step by step.

We import useState Hook from React. It lets us keep local state in a function component.
Inside the example components, we declare a new state variable by calling the useState Hook. It returns a pair of values, to which we give names.
When the user clicks, we call setCount with a new value.

The State object can contain as many properties as you like:

Example: Specify all the properties your component need:

class Car extends React.Component {constructor(props) {super(props);this.state = {brand: "Ford",model: "Mustang",color: "red",year: 1964};}render() {return (

My Car

);}}

What is JSX?

JSX stands for JavaScript XML. JSX makes it easier to write and add HTML in React.

JSX allows us to write HTML in React.

JSX is an inline markup that looks like HTML and gets transformed to JavaScript. A JSX expression starts with an HTML-like open tag, and ends with the corresponding closing tag. JSX tags support the XML self-close syntax so you can optionally leave the closing tag off.

Coding JSX

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.

JSX converts HTML tags into react elements.

Example:

With JSX:

const myelement =

I Love JSX!

;

ReactDOM.render(myelement, document.getElementById(‘root’));

Without JSX:

const myelement = React.createElement(‘h1’, {}, ‘I do not use JSX!’);

ReactDOM.render(myelement, document.getElementById(‘root’));
What is virtual DOM?

Virtual DOM is a virtual representation of the real DOM.

The virtual DOM then sends a batch update to the real DOM to update the UI. React uses virtual DOM to enhance its performance.

How does virtual DOM works?

the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

htmlhead lang="en"bodyul class="list"li class="list__item""List item"

What is Optimizing performance in React?

Performance Optimization of a programs and software is the process modifying a software system to make it work more efficiently and execute more rapidly.

21 Performance Optimization Techniques for React Apps

Using Immutable Data Structures
Function/Stateless Components and React.PureComponent
Multiple Chunk Files
Using Production Mode Flag in Webpack
Dependency optimization
Use React.Fragments to Avoid Additional HTML Element Wrappers
Avoid Inline Function Definition in the Render Function.
Throttling and Debouncing Event Action in JavaScript
Avoid using Index as Key for map
Avoiding Props in Initial States
Spreading props on DOM elements
Use Reselect in Redux to Avoid Frequent Re-render
Avoid Async Initialization in componentWillMount()
Memoize React Components
CSS Animations Instead of JS Animations
Using Web Workers for CPU Extensive Tasks
Using a CDN
Virtualize Long Lists
Analyzing and Optimizing Your Webpack Bundle Bloat
Consider Server-side Rendering
Enable Gzip Compression on Web Server
What is React Hook?

It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.

When to use Hook: If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But now you can do it by using a Hook inside the existing function component.

Rules of Hook: Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hook’s rule ensures that all the stateful logic in a component is visible in its source code. These rules are:

Only call Hooks at the top level

Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component render.

Only call Hooks from React functions

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks.

Pre requisites for React Hook

Node version 6 or above
NPM version 5.2 or above
Create-react-app tool for running the React App
What is Conditional Rendaring?

Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false.
In React, it allows us to render different elements or components based on a condition.

7 Ways to Implement Conditional Rendering in React Applications

Using an if…else Statement
Using a switch Statement
Using Element Variables
Using Ternary Operators
Using Logical && (Short Circuit Evaluation)
Using Immediately Invoked Function Expressions (IIFEs)
Using Enhanced JSX Libraries Composition is the key

Parent components that own the state are often referred to as container components. They are responsible for state management and rendering children (this sounds so odd). Child components are used to trigger event handlers passed down from parents (like the InputBox component in previous examples) and to display the data.

Child components that are responsible for displaying the data are called presentational components.

Container component is often responsible for fetching data, API calls (see componentDidMount() lifecycle method) and so on. You should keep this in one place to avoid side-effects in presentational components. Those should be as dumb as possible about everything other than displaying the data.

This separation of concerns and terminology were popularized by Dan Abramov, the author of Redux. You can read more about it in his article.

You can see that it all fits together. When every component follows single responsibility principle it can be composed with others and reused.

The biggest challenge is to figure out how to divide those responsibilities and where to put the state. If you want to know more about the topic search for “thinking in react” articles.