DEV Community: Sagar Kattel

Learn PHP

Sagar Kattel — Wed, 17 Jan 2024 04:30:17 +0000

Although php language seems to be dying, it is still used by many companies and is widely popular among the legacy codebases of many large companies. It was the language that give rise to the current web development field. Learning PHP can also help you alot in your carrier. I guess these motivation is enough for you guys to start learning the php. So let's get started.

Let's learn from the fundamentals.

If you have seen my previous articles i follow certain pattern to learning new languages or framework. This pattern is aiding me to successfully learn the languages.

Give Output and take Input
String
Array
Class and Object
Methods
Loops

I always follow this pattern to learn any languages. So without further a do let's get started.

1) Give Output and take Input

The command line used to give output in the php is simple

<?
echo "Hello world";
//or
print_r("Hello World");
?>

And to take the input we enclosed it inside readlines

<?
$name=readline("Enter the name\n");
echo "The name is $name";
?>

2) String and Variable
In PHP to create a string is as simple way as writing variable name starting with $ symbol.

<?
echo strlen("Hello World");
echo str_word_count("Hello world!");
?>

For Iterating in loop inside the string

<?
$name="Sagarkattel";
for($i=0;$i<strlen($name);$i++){
    echo "Index of ".$i."="."$name[$i]\n";
}
?>

For Splitting the string in PHP we use built-in explode function.

<?
$name="Sagar kattel";
$parts=explode(" ",$name);
echo $parts[0];
echo "\n";
echo $parts[1];
?>

3) Arrays
In php the way to iterate the array is as simple as any other language. Just you need to put $ symbol ahead of every variable name or array.

$names=["Sagar","Saurabh"];

4) Class and Object

Creating classes in Php is dead simple, it is as same as other language. The only thing that you need to take care is to write instead of this.name you need to write this->name.

<?php
class Fruit {
  public $name;
  public $color;

  function __construct($name, $color) {
    $this->name = $name;
    $this->color = $color;
  }
  function get_name() {
    return $this->name;
  }
  function get_color() {
    return $this->color;
  }
}

$apple = new Fruit("Apple", "red");
echo $apple->get_name();
echo "<br>";
echo $apple->get_color();
?>

<?php
class Person{
    public $name;
    public $age;

    function __construct($name,$age){
        $this->name=$name;
        $this->age=$age;
    }
    function get_name(){
        return $this->name;
    }

    function get_age(){
        return $this->age;
    }
}
$name=new Person("Sagar Kattel",20);
echo $name->get_name();
?>

5. Method or Function

You can create method or function in php by writing the keyword function ahead of every function name.

<?php
echo "Hello WOrld";

function speak_name($name){
    echo "The name of our hero is ".$name;
}
$number1=20;

function multiply($number){
    return $number*2;
}

$name="Sagar Kattel";
speak_name($name);
$result=multiply(3);
echo "The Multiply result is ".$result
?>

6. Loops
You can create loops in php as any other programming lanaguages.

<?php
$i=0;
while($i<10){
    print_r($i);
    $i++;
}
?>

These are the basics that you must know before diving deep into the PHP programming language. Hope you continue your learning journey. Sayonara <3

Create Hello World application in Ruby On Rails

Sagar Kattel — Mon, 08 Jan 2024 10:52:41 +0000

Hello Folks,

Today we are going to learn how to create simple hello world application in ruby on rails. So hold your horses as i *embark * on you to your journey.

As you create the ruby on rails application with the command like


rails new project1

This will create a simple ruby on rails application and now you need to enter inside it and just type

rails s

to start the server

Now what you need to do to display the "Hello World" application running is to go to the routes.rb file

And there specify what you want your routes folder to redirect it to:

root "controller_name#action"

root "pages#home"

And now you need to create controller and for that you can simply write

rails generate controller pages

This command will generate pages_controller.rb and will also generate pages folder inside views folder

And how inside the pages_controller.rb write these code

def home
end

This command will invoke the controller to check the pages/home.html.erb file and display whatever is present there

And inside the pages folder create home.html.erb file and just type

Hello World!

And now you have successfully generated the Hello World Application. Sayonara <3

Learn Ruby From A to Z

Sagar Kattel — Sun, 07 Jan 2024 09:03:22 +0000

Hello Folks,

Today we are going to learn about one of the popular Programming language Ruby. Here you are going to learn everything about the basic ruby stuffs. You can use this as your documentation for learning Ruby.

Instead of watching videos about Ruby I urge you guys to follow the documentation or article. I have made this article with the sole purpose that you don't have to visit other website or watch the videos to learn the Ruby programming language basics.

So let's get started...

The most fundamental thing that you need to learn to get started with any programming languages are :

1. Give Output and take Input
2. String
3. Array
4. Class and Object
5. Methods
6. Loops

If you are able to grasp these concepts of any programming language then you are good to go. So we are going to follow the same pattern in learning Ruby on rails.

1. Give Output and take Input

To print the output to the screen there are two ways and they are:

i. puts
This is used to print the statement or line and moves onto the next line after its completion

ii. print
This is used to print the statement or line and doesnot move onto the next line after its completion instead it prints on the same line after it end.

And to take input in Ruby what you can do is

puts "What is your name?"
name=gets
puts "Hello #{name}, How are you"

Output:
Hello Sagar
, How are you

This will print like this instead of printing out in same line and for us to obtain it without the the \n we need to get it chomped

puts "What is your name?"
name=gets.chomp
puts "Hello #{name}, How are you"

Output will be:
Hello Sagar, How are you

2. String

String are the combination of characters.
To create a string you need to put the characters inside the enclosed single code ''

str='Hello this is string'

Here str is the string. Also String is an inbuilt method for the creation of string and you can create string with this way too.

str1=String.new("Hello WOrld")
puts str1

To Find the length of string

str='Hellostring'
puts str.length

For iterating through the characters inside the string using for loop

str1="Hello"

for i in (0..str1.length)
  puts str1[i]
end

For splitting the words in strings after every spacing we use

str1="Hello World k ca"
puts str1.split

3. Array

There are many ways to create array in Ruby. One of the method is to directly assign an empty array enclosed inside [ ] bracket . And another way is to do it using Array method using new initialize keyword

names=Array.new()
# names=[]
names.push("Sagar")
names.push("Kattel")
puts names

Also to insert elements inside array you can either use .push or [index].

TO find the length of Array also we use .length

names.length

4. Class and Object

To create class in Ruby we start with the class keyword followed by its name and the first letter of its name is in uppercase. And it ends with the keyword end

class Vehicle

end

This is the way we create class.

Now to create variable in class

class Vehicle
  @@speed=100

  def vehicle_speed()
    @@speed
  end
end

car1=Vehicle.new

puts car1.vehicle_speed()

And during the initialization phase of the creation of class the varible name contains single @ and the variables inside the class gets two @

class Vehicle
  @@speed=100

  def vehicle_speed()
    @@speed
  end

  def initialize(name,country)
    @car_name=name
    @car_country=country
  end

  def define
    puts "The Name of Car is #{@car_name} and it was manufactured in #{@car_country}"
  end

end


mercedes=Vehicle.new("Mercedes","USA")

mercedes.define()

5. Method or Function

Method or function is written inside the the def followed by its name in lowercase and ends with the end keyword

Objects is created to access the variable, or method of inside the class. Object is the instance of class. Objects can be created by following a class name with the dot operator followed by the new keyword.

def greet(name)
  puts "Hello #{name}"
end

greet("Sagar")

6. Loops

There are many types of loop used inside the Ruby some of them are:

i. For Loop

Syntax for the use of for loop inside the ruby are:

for i in (0..10)
  puts i
end

ii. While do Loop
Syntax for the use of while do loop inside the ruby are:


$i=0;
$num=5;

while $i<$num do
  puts $i
  $i+=1
end

iii. Each do loop

Syntax for the use of each do loop inside the ruby are:

(0..5).each do |i|
  puts i
end

These are the basics that you must know before diving deep into the ruby programming language.<3

Responsive Navbar with light/dark toggle button Using React

Sagar Kattel — Mon, 06 Nov 2023 09:42:29 +0000

Hello Folks, today we are going to setup Responsive Navbar with a toggle button to switch between dark mode and light mode using useContext hook.

As I have promised you guys to bring more content on the topic useContext hook so here we are, learning in depth about it. Follow me to get constant updates like this to enrich your knowledge.

As we know setting Navbar with a responsive design can be a hectic task if you are planning to build a large website, half of our time goes to setup the navbar and today I am planning to give you guys responsive navbar code to easily code it and just focus to grab the concept of useContext.

So the prerequisites to setup this navbar is that you need to install TailwindCSS and React.

If you haven't installed TailwindCSS I request you guys to follow this link TailwindCSS

Now you have every prerequisites here is the Responsive Navbar code that you can include it in your React Project

//Navbar.js

import React, { useContext,  useState } from 'react';
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';

import {MdDarkMode} from 'react-icons/md';
import {MdLightMode} from 'react-icons/md';

import { AllContext } from './Context';

const Navbar = () => {
  const [nav, setNav] = useState(false);



  const {darkmode,handleMode}=useContext(AllContext);



  const handleNav = () => {
    setNav(!nav);
  };

  return (
    <div className='flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white '>
      <h1 className='w-full text-3xl font-bold text-[#00df9a] cursor-pointer'>REACT.</h1>
      <ul className='hidden md:flex cursor-pointer'>
        <li className='p-4'>Home</li>
        <li className='p-4'>Company</li>
        <li className='p-4'>Resources</li>
        <li className='p-4'>About</li>
        <li className='p-4' onClick={handleMode}>{darkmode?<MdLightMode size={25}/>:<MdDarkMode size={25}/>}</li>
      </ul>
      <div onClick={handleNav} className='block md:hidden'>
          {nav ? <AiOutlineClose size={20}/> : <AiOutlineMenu size={20} />}
      </div>
      <ul className={nav ? 'fixed left-0 top-0 w-[60%] h-full border-r border-r-gray-900 bg-[#000300] ease-in-out duration-500' : 'ease-in-out duration-500 fixed left-[-100%]'}>
        <h1 className='w-full text-3xl font-bold text-[#00df9a] m-4 '>REACT.</h1>
          <li className='p-4 border-b border-gray-600'>Home</li>
          <li className='p-4 border-b border-gray-600'>Company</li>
          <li className='p-4 border-b border-gray-600'>Resources</li>
          <li className='p-4 border-b border-gray-600'>About</li>
          <li className='p-4'>Contact</li>
      </ul>
    </div>
  );
};

export default Navbar;

This will enable you to access Responsive Navbar with Light/Dark Toggle button.

Now let's come to our Main topic useContext hook. As you might have already notice that in our code we used useContext hook to access darkMode and setDarkMode.

useContext hook is also prop drilling approach of parsing of data across the pages in React. It simply means data are passed around the different pages/component based on the hierarchy (Means Top to button approach also means Parent to Child data transfer).

It simply means if a data is passed through any component then it's child component or nested components inside that components can easily access that data. Clear Enough Right?

For Visualization of this concept

Here We fetched the login credentials in App Component and Since App component is at the Top level of any React Application and Component A (User Page) is the child component so login credentials is passed from App page to Component A page using useContext hook.

So useContext code for our Responsive Navbar for the light/dark toggle functionality is:

//Context.js

import React, { createContext, useEffect, useState } from "react";

export const AllContext = createContext(null);



  const Context = ({ children }) => {

    const [darkmode,setDarkmode]=useState(false);

    const handleMode=()=>{
        setDarkmode(!darkmode)
    }


    return (
      <AllContext.Provider
        value={{darkmode,setDarkmode,handleMode}}
      >
        {children}
      </AllContext.Provider>
    );
  };

  export default Context;

So here we have used useState hook in the context.js page to do the toggle and simply pass that toggle value in the component <AllContext.Provider>. And you can access that toggled value in Navbar using useContext as shown in the Navbar.js page

Now, we Simply wrap the Context Component in the Top of our Application like this:


//Main.js

import App from "./App";
import Context from './Context'

export default function Main() {
  return (
   <Context>
      <App />
   </Context>
  )
}

In this way, you can use useContext hook in your application. If you have any problem please comment it out i am more than happy to help and don't forget to like and follow.

Sayonaraa!😉

Let's Learn Redux (Complete Tutorial)

Sagar Kattel — Thu, 02 Nov 2023 17:49:59 +0000

Basically when you are starting out your career in React development field, you must have stumble upon the concept of Redux. And it might seem tedious and so much boilercode that it can even demotivate you on your journey. But i am here to rescue you to learn those concept in breeze and in simple language as well so hold your horses as i embark you on the journey to completely learn Redux.

So let's start with its definition:

Redux is a very popular JavaScript library that is designed to manage the state of data in JavaScript applications

Also you must have stumble upon the work state of data but what does the state of data refers?
It simply means :

A state in Redux is a JavaScript object, where the internal state of the application is stored as its properties

This definition also seems kind of vague representation for you guys but let me explain it to you using simple words using an working example as it can help you wrap around the concept more easily.

When we login into an website, we get the login detail and we might want to pass that details to different pages within the website. We can't fetch the login details in every page as fetching Api's can be quite expensive. In the practical scenario we fetch the Api once and keep its data somewhere in the client side and send the data in every page.

Generally there are two ways to store data and to pass on that data to every page i.e

Use useContext hook
Use Redux hook

useContext hooks works on the principle of prop drilling. It means it passes the data based on the hierarchy. In computer terminology, data is passed from the parent component to its child component which also refers to top-down approach. Here in this approach we fetch the data from the Api once then we pass the data to the useContext page and we put the useContext hook in the top level of the application then the data can be accessed in every page subsequent to its child page. Simple enough right? If you are stuck here i will do deep dive related to it in another article. Also i will show you how to implement it in our application. Our sole focus today is to make you understand about Redux concept.

Redux on the other hand is another hook that also works on the principle of prop drilling. It consits of 3 parts i.e

Store
Reducers
Dispatch and Selector

The Redux store is the main, central bucket which stores all the states of an application. It should be considered and maintained as a single source of truth for the state of the application.
If the store is provided to the App.js (by wrapping the App component within the <Provider> </Provider> tag) as shown in the code snippet below, then all its children (children components of App.js) can also access the state of the application from the store. This makes it act as a global state.

Let's create an application to even understand it further with its implementation detail. Here for our simplicity, we take an example of Ecommerce Cart System.

At first Create Provider for the store in our application. This will ensure that the data from the store are drilled down at the top level i.e index page and it's subsequent page i.e App page can access the data. App contains further collection of pages.


// src/index.ts

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

import { store } from "./store";

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>

Meanwhile create store that manages the application along with the Reducers and dispatch and selector function. Store consists of configureStore function to initialize the reducers along with setupListeners functions. Also we initialize the dispatch function in the name of AppDispatch and export it.

//store.ts


import { configureStore } from '@reduxjs/toolkit';

import productSlice from './features/productSlice';

export const store = configureStore({
    reducer: {
      product:productSlice,
    }
  })

  setupListeners(store.dispatch);


  // Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

Now let's create productSlice feature for our react application which is also known as Reducers here in redux concept.


//productSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export interface ProductProp {
  id: number;
  title: string;
  img_url: string;
  price: number;
  rating: number;
  quantity: number;
}

interface ProductState {
  products: ProductProp[];
}

const initialState: ProductState = {
  products: [],
};

export const productSlice = createSlice({
  name: "product",
  initialState,
  reducers: {
    addProduct: (state, action) => {
      const product = action.payload;

      // Check if a product with the same ID already exists in the state.products array
      const existingProductIndex = state.products.findIndex(
        (existingProduct) => existingProduct.id === product.id
      );
      if (existingProductIndex !== -1) {
        console.log("Product Already Exists");
        state.products[existingProductIndex].quantity += 1;
      } else {
        // If no product with the same ID exists, add the product to the array
        state.products.push({ ...product, quantity: 1 });
      }
    },
    removeProduct: (state, action) => {
      const productload = action.payload;
      state.products = state.products.filter(
        (product) => product.id !== productload
      );
    },
  },
});

export const { addProduct, removeProduct } = productSlice.actions;

export default productSlice.reducer;

This is it now you have successfully configured the store along with the actions. Now all you have to do is call useDispatch and useSelector to perform the actions. Let's take a peek to how can we achieve it

//Card.tsx

import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import { addProduct } from "@/redux/features/productSlice";


const dispatch=useAppDispatch();

const Card=()=>{

const [productsList, setProducts] = React.useState([]);


  const handleClick=(product:productT)=>{
    dispatch(addProduct(product))
    console.log(product)
  }


return(
<div>
 {products.map((product)=>(

<div key={product.id}>
<button onClick={()=>handleClick(product)}> Add to Cart </button>
</div>
))}

</div>
);
}

export default Card;

Here using useAppDispatch, we call the function addProduct reducers to perform the actions and pass value into it.

//Cart.tsx

import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import { ProductProp, removeProduct } from "@/redux/features/productSlice";


const Cart=()=>{

const dispatch=useAppDispatch();

const products:ProductProp[] = useAppSelector((state:any) => state.product.products);


return(
<div>
 {products.map((product)=>(

<div key={product.id}>

<button onClick={(event) => dispatch(removeProduct(product.id))}>Remove</button>
</div>
))}

</div>
);
}

export default Cart;

Here we first view the products that we obtain from the the the store using useAppSelector as it helps to view the data stored in store in the name products and map it out then we perform the necessary dispatch to modify the data in the store with the help of reducers.

This is the perfect representation of the application of Redux. I hope this gives you in-depth understanding on this subject matter of Redux.

Sayonara😉! (The word sayonara means "goodbye" or "farewell.")