DEV Community: sadiul hakim

How to use custom font in java swing....

sadiul hakim — Fri, 03 Jun 2022 14:23:16 +0000

Hello there, I am back again.

Today i am going to show you how you can use custom font or how you can customize your fonts in java swing.So, Let's get started...

First we need to create a Frame..

import javax.swing.JFrame;

public class CustomFont extends JFrame{

    public CustomFont()  {
        this.setBounds(300,100,400,300);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        CustomFont frame=new CustomFont();
        frame.setVisible(true);
    }
}

java
This will create a nice frame.

I do not want to use any Layout for that i need to add this line in the Constructor

this.setLayout(null);

Now i want to use custom font in a textField.For that i need to create a field.

First import JTextField

import javax.swing.JTextField;

Declare textField as a private class field

private JTextField text;

Now create and add textField to the frame

text=new JTextField();
text.setBounds(20,20,150,30);
add(text);

Now i want to customize this fields font
For that i need to create an instance of Font class.You can create an instance of font class like this.

First import Font class

import java.awt.Font;

Then

Font font=new Font("Fira Code",Font.PLAIN,12);

First you need to give Font Name then Font Style and Font size.Now you need to add the font to the field.

 text.setFont(font);

Now your field should have a customized font.

Hello World in java swing...

sadiul hakim — Fri, 13 May 2022 18:42:02 +0000

Hello guys today i am going to show you how you can print "Hello World" in java swing.

Now, what is java swing?

ANS : Swing is a GUI widget toolkit for Java. It is part of Oracle's Java Foundation Classes (JFC) – an API for providing a graphical user interface (GUI) for Java programs. Swing was developed to provide a more sophisticated set of GUI components than the earlier Abstract Window Toolkit (AWT)

Let's get started...

First of all you need to create a general class inside you package.

package com.hakim;

public class HelloWorld {
    public static void main(String[] args) {

    }
}

Then you need to import JOptionPane from 'javax.swing' package.

import javax.swing.JOptionPane;

Then you need to write this line in your main method.

 JOptionPane.showMessageDialog(null,"Hello World.");

That is it.Easy,Right?

Introduction to Solidity...

sadiul hakim — Fri, 14 Jan 2022 21:50:11 +0000

Hey there,Today i am going to talk a little bit about Solidity.What is solidity?Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs which govern the behaviour of accounts within the Ethereum state.Interesting,right?Let's write some solidity code.

To write solidity code you would like to use a online IDE called remix.visit IDE

remix ide

First we need to say license and which solidity version you are going to use.In my case it looks like below..

//SPDX-License-Identifier:GPL-3.0

pragma solidity ^0.8.4;

As solidity is a contract oriented language.We need to create contract

contract FirstPrograme{

}

If you know OOP.you can imagine contract as a Class.Now let's create two variables and deploy our contract.

contract FirstPrograme{
   string public name="Hakim";
   uint public age=18;
}

Here the public keyword is variables visibility.Now if we compile and deploy our contract we will see two buttons.To compile contract click this button.

and to deploy click

now use should see variables value.

Thanks ❤.

solidity

sadiul hakim — Thu, 06 Jan 2022 07:17:09 +0000

I have recently stared learning solidity programming language.

Most of you are not following right syntax while writing posts 🤨

sadiul hakim — Wed, 29 Dec 2021 05:50:44 +0000

Dev.to uses github markdown syntax to write their posts.May be you are not familiar with this syntax. I could give some tips in this post.But i would like to share a link from where you can learn in better way.

Click Here

Thanks ❤

Complete User Authentication with express and graphql....

sadiul hakim — Sun, 26 Dec 2021 21:56:34 +0000

Hey guys,Today i am going to build a complete user authentication with express-graphql.So, Let's get started....

This is going to be our folder structure...

After initializing your project install these dependencies...

$ npm i bcrypt dotenv express express-graphql jsonwebtoken graphql mongoose

Now use need to create some private and public key to make our token secure.To generate those key visit

generate keys

Now we need to encode our key.To encode keys visits

encode keys

now add these key and port in out .env file

PORT=5000
MONGODB_URL='mongodb://localhost:27017/graphql'
PRIVATE_KEY='LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVktLS0tLQpNSUlFb1FJQkFBS0NBUUIySk01dDUxMmdKQytwcTM5TEN0RjZQRkVWZVIvd09LcHV4cUVxUHcvZ0lGNGtmWlFNCisyaGNiSDhQZ2Qvd3BnUHh2QUFxYXNRRmJyekNkK09EcGx5ajRYNUx5c0R0RWIyeERxTDVXK3Nua1pMMWFmV3EKTGlHMG15TFRHMjV1VmlyWTdYYzgvay9MOEE5VGlrUHdGRERsVVZucjVFem50ZkJ4aVl2aDdkK05GazFodGtkawp6VmY0K3NhdnlMUWcxdjNSMExEYXpvbW0yeHN0K0pwNFNnWUdDRXErdEdWZGovMDNmOTJUSTY1dmNYQWtDY2hECmpMUS96YzhKZUd4N29ndUFkektNM2cwc3dhUThJUGxxeVFGU0RWNnBEZGFoRFpoRGpzNUFYUzI5WWhMYTViOEoKNlRUTm0zektqekdPZEFDK1pKNmh5Z2JMbHRvZkhNZms3VkN4QWdNQkFBRUNnZ0VBQmxuV0t2eE1BU2JRMVJzZAovYWU0T1F6ekF1ZCsrd2ZneVpHdDZqcDNuUUhBYmMrK1hMQkxIT1RNTThZMGhwZzJFQkdlSkttV25nQWs3NE5JClhMUmR1SVdQcDMxZnY1Njdoc0FWckxmdlBUSkxKeHdxRTVybFB2TXovUXMxZFlMMlRMRC9QdTBnMXdLeG9Ea0gKaStsWjg0bmEvcDVJTUJDTXUxMjhna21xUWNoRk1ZUHovZ3lyOGlUaU9mNWJDcUpMOTZ2a1B1R1JXRDUybVFkego5dEI2YkhWR3ltcGgxTnBObnJla0llWDBLb2tPMkhUUTRPVTNiZzNvcG1hZzYzbW9QK1lwbndOMWpJd0xyRFRkCkFYd1B4Zkxha0FheUFXRGw0N3c2WXhlT0xDTWdHTkJ2VkdsK0ZVYUZQak9vdkdYWnBPWHhSdDlDS0pycW9yd0oKM003b3dRS0JnUURNWVFOVnYxUVY2V2czRWVyV0ZPYlByYWNZWVVPdXhMTk9jNUdBdzdMdmh5NHdtWGxKWTQ4TApRcXErM2Y0U1dYRjN6d0hNVkMxREJ2RERSRFBsbElPVlZOWGZzTkFLN1pCUU1GTnJRSVUzN1RDakJnbFRDbkV4CmRoUGdjU3M3Z00yN3puRW93bFN6akFFMUV3elhWY3Q4REVZNFhQdlNJdlZZd0xPc1YyakYyUUtCZ1FDVCsrUjIKL0xKTStWbHJTdnhpWHZoWkJDQ1hWQ0lndW42QVA1ZzVBVGhRb2VZQVRJZkExbEN5aEo1RXZydURmVkJQYTZlYgpCVHo1cXY4QWpyK1pSNU9lUGNRODV1QkM2eVg1L3RSZTFhMXNZYkVyVlFkckdFREFSOFIxRnNaUFJVY1VhejY3ClJ3TCtMMUhlSjM1Y1FIYXF0OUVTSXNKYjZHenpaL1FTc3VKaW1RS0JnRElydm4zV01mWVBEaDQycjhkTjZqc2gKRGR2V1JKOHFlam5QOU8vL0duWGlZVnhjMElGTGgxbmtTN1gvR05lNFRUcHovcVVDSlBwSFFlTXRZdkFBdlN4egpYdTFDb2srTWNkaTloRHpYNGR3UXhkZS9LNXJPL1dwKzZmSTIxYjROcUhOcUFpMVhSeU9zUXIrY3BaSlc1VlRXClRvYVhqTm5RNnhtV2RJVGlFRDVCQW9HQU50bC9aY2JsdzNnTWQ2TTBocldTc1ZQQlRMWEhiSUFUVVMvQkdTZmwKbXFWWFhiYi8vaTZ4ZkdtQlRCT3g1dHUwdjZzMFZWWU1zckY1a05oWUZkVWMxdU1uOERiVzJwYlQzYVJoVE1GQQpaVktVVzI1SnNKMHRxdGN1N3dOQS83SzYxTXVuVmJ6TlZDOXYxYnFuc0VQSWVDQm5vcVExaStGTE9MRElHNElvClBNa0NnWUFNcWx5TnMyNXlrTjBPZ0k1eDhMQ0YxN0NRcC85QlpGVk9PdzZETUUwZGtIN2RXQXRGK1ZkYW5Sc0QKc1Q4K2dJYUYweC9oM0lqNDFOWlBaaUEvTE16bEg4MGJ2ZlAvcVJmb2VLWm9kYWc0UTZSYmdlRzkrOUlJNDFqbApaYXllL01xQ09oRXQxTURiTkp0WkZTcnY3RTBwNTNwMUxpbjg5NWR6V2ltZ2gvcGdFQT09Ci0tLS0tRU5EIFJTQSBQUklWQVRFIEtFWS0tLS0t'
PUBLIC_KEY='LS0tLS1CRUdJTiBQVUJMSUMgS0VZLS0tLS0KTUlJQklUQU5CZ2txaGtpRzl3MEJBUUVGQUFPQ0FRNEFNSUlCQ1FLQ0FRQjJKTTV0NTEyZ0pDK3BxMzlMQ3RGNgpQRkVWZVIvd09LcHV4cUVxUHcvZ0lGNGtmWlFNKzJoY2JIOFBnZC93cGdQeHZBQXFhc1FGYnJ6Q2QrT0RwbHlqCjRYNUx5c0R0RWIyeERxTDVXK3Nua1pMMWFmV3FMaUcwbXlMVEcyNXVWaXJZN1hjOC9rL0w4QTlUaWtQd0ZERGwKVVZucjVFem50ZkJ4aVl2aDdkK05GazFodGtka3pWZjQrc2F2eUxRZzF2M1IwTERhem9tbTJ4c3QrSnA0U2dZRwpDRXErdEdWZGovMDNmOTJUSTY1dmNYQWtDY2hEakxRL3pjOEplR3g3b2d1QWR6S00zZzBzd2FROElQbHF5UUZTCkRWNnBEZGFoRFpoRGpzNUFYUzI5WWhMYTViOEo2VFRObTN6S2p6R09kQUMrWko2aHlnYkxsdG9mSE1mazdWQ3gKQWdNQkFBRT0KLS0tLS1FTkQgUFVCTElDIEtFWS0tLS0t'

To again decode and use then write these code in 'helper/key.js'

import dotenv from 'dotenv';

dotenv.config();

export const private_key = Buffer.from(process.env.PRIVATE_KEY, "base64").toString('ascii');
export const public_key = Buffer.from(process.env.PUBLIC_KEY, "base64").toString('ascii');

write these code in ./index.js file...

import express from 'express';
import dotenv from 'dotenv';
import morgan from 'morgan';
import cookieParser from 'cookie-parser';
import cors from 'cors';
import { graphqlHTTP } from 'express-graphql';

import Schema from './graphql/schema/index.js';
import Resolver from './graphql/resolvers/index.js';
import './db/index.js';
import { verifyToken } from './helpers/jwt.js';

dotenv.config();

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(morgan('dev'));
app.use(cors());

app.use(verifyToken);


app.use('/graphql', graphqlHTTP({
    schema: Schema,
    rootValue: Resolver,
    graphiql: true
}))

app.listen(process.env.PORT, () => {
    console.log('server is running on ' + process.env.PORT);
})

You may notice that i am using import instead of 'require'.To use this in your package.json file add this line anywhere

"type":"module"

Now in db/index.js file write these code..

import mongoose from 'mongoose';
import dotenv from 'dotenv';

dotenv.config();

mongoose.connect(process.env.MONGODB_URL).then(() => {
    console.log('mongoose connected')
}).catch(err => {
    console.log(err);
})

And import this file in './index.js'

import './db/index.js';

To create a User Model write these code in models/user.model.js

import mongoose from 'mongoose';
import bcrypt from 'bcrypt';

const userSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    },
})

userSchema.pre('save', async function () {
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(this.password, salt);
    this.password = hashedPassword;
})

const User = mongoose.model('User', userSchema);

export default User

Now to create schema write these code in 'graphql/schema/index.js'

import { buildSchema } from "graphql";

export default buildSchema(`
    type User{
        _id:ID!
        username:String!
        email:String!
        password:String!
    }
    type Post{
        title:String
        description:String
    }
    input UserInput{
        username:String!
        email:String!
        password:String!
    }
    type LoginReturnType{
        token:String
        userId:ID
    }
    type RootMutation{
        createUser(userInput:UserInput!):User!
    }
    type RootQuery{
        users:[User!]!
        login(email:String!,password:String!):LoginReturnType!
        posts:[Post!]!
    }
    schema{
        query:RootQuery
        mutation:RootMutation
    }
`)

Notice that this schema is exported from here and used in './index.js'

and to create some resolvers write these code in 'graphql/resolvers/userResolver.js'

import User from "../../models/user.model.js";
import jwt from 'jsonwebtoken';
import bcrypt from 'bcrypt';

import { private_key } from '../../helpers/key.js';

export default {
    createUser: async (args) => {
        const newUser = new User(args.userInput);
        const user = await newUser.save();
        return user
    },
    login: async ({ email, password }) => {
        try {
            const user = await User.findOne({ email });
            if (!user) {
                throw new Error('Invalid Credentials!user')
            }
            const isCorrectPassword = await bcrypt.compare(password, user.password);
            if (!isCorrectPassword) {
                throw new Error("Invalid Credentials!password")
            }
            const token = jwt.sign({ _id: user._id, email: user.email }, private_key, {
                algorithm: "RS256"
            });
            return {
                token,
                userId: user._id
            }
        } catch (error) {
            return error
        }
    },
    posts: (_, req) => {
        if (!req.isAuth) {
            throw new Error("Unauthorized");
        }
        return [{ title: "accident", description: "accident ocurred" }, { title: "Laptop", description: "Buy A new Laptop" }]
    }
}

Make sure you are using RS256 algorithm otherwise we will not be able to use private and public two different key while generating and verifying token.

now import userResolver in 'graphql/resolvers/index.js' and export as an root object.Because there may remain more resolvers like postResolver.

import userResolvers from "./userResolvers.js";

export default { ...userResolvers }

May be you have notices i am checking if req.isAuth exists where do i get that.To get that write these code is helper/jwt.js

import jwt from 'jsonwebtoken';
import dotenv from 'dotenv';
import User from '../models/user.model.js';

import { private_key, public_key } from './key.js';

dotenv.config();

export const verifyToken = async (req, res, next) => {

    const authToken = req.get('Authorization');
    if (!authToken) {
        req.isAuth = false;
        return next()
    }
    const token = authToken.split(' ')[1];
    let verify;
    try {
        verify = jwt.verify(token, public_key);
    } catch (error) {
        req.isAuth = false;
        return next()
    }
    if (!verify._id) {
        req.isAuth = false;
        return next()
    }
    const user = await User.findById(verify._id);
    if (!user) {
        req.isAuth = false;
        return next()
    }
    req.userId = user._id;
    req.isAuth = true;
    next()
}

We are almost done. Make sure you setgraphiql to true in graphqlHTTP.

Now if you visit to 'http://localhost:5000/graphql' you will see something like this..

now try to create a user,login and get some post

Now to send Authorization header i am using another rest client that is vs code extension thunder client.

Make sure you added Bearer or any keyword before token and separate then with an empty space

So this is ours authentication api with graphql

Thanks ❤.

BEM CSS Architecture

sadiul hakim — Sat, 25 Dec 2021 19:09:07 +0000

Hey Guys,Today i am going to talk about css BEM architecture.BEM stands for Block,Element,Modifiers.Three separated words.BEM is nothing but class naming convention.

<div class="card">
      Modifiers
      <div class="card__header"></div>
      <div class="card__body"></div>
      <button class="card__button--red"></button>
</div>

In above code you can see we have a card div.Here card is B => block and card__body,card__header all of those are 'E => element'.Yes,you just write block name add __ and write element name.Here card__button--red is our M => modifier.you add -- with element and write modifiers name.

BEM has good use cases.It helps a lot while writing css code specially while writing css pre-processor sass/scss code.Take a look.

.card {
    &__header {}

    &__body {}

    &__button--red {}
}

Wow nice combination .Right?

If you are not using this try it today.This will make you life easier.

Thanks ❤

Create a Real-Time digital clock with node and socket.io..

sadiul hakim — Tue, 21 Dec 2021 22:09:39 +0000

At first setup your nodejs project.Then install socket.io and express.
This is going to be our folder structure...

In index.js our nodejs+socket.io+express code is going to be ...

import express from 'express';
import http from 'http';
import { Server } from 'socket.io';

const app = express();
const expressServer = http.createServer(app);

app.use(express.json());
app.use(express.static('public'));

const io = new Server(expressServer);

io.on('connect', function (socket) {
    console.log('a user is connected');

    setInterval(function () {
        let date = new Date().toLocaleTimeString()
        socket.send(date)
    }, 1000)

    socket.on('disconnect', () => {
        console.log('user disconnected.')
    })

})

app.get('/', (req, res, next) => {
    res.render('index.html');
})

expressServer.listen(4000, () => {
    console.log('server is listening.')
})

and in index.html html code is going to be..

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Socket</title>
  </head>
  <body>
    <h1 id="time"></h1>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    let socket = io();
    socket.on("message", function (msg) {
      document.getElementById("time").innerHTML = "";
      document.getElementById("time").innerHTML = msg;
    });
  </script>
</html>

Now use should see your rea-time running clock in browser..

Thanks!❤

JavaScript

sadiul hakim — Tue, 16 Nov 2021 19:26:46 +0000

Is JavaScript a strong object oriented language?

I have installed Denoland

sadiul hakim — Mon, 15 Nov 2021 08:56:16 +0000

Wow,Denoland is awesome.We have global object in nodejs but you will see a large window object in Denoland and a lot of functionality.Try to play with Deno if you are already a nodejs developer and if you have any interest to Deno.land

React File upload

sadiul hakim — Sun, 14 Nov 2021 05:48:01 +0000

Hey there,Today we are going to discuss about react file uploading.We MERN developers use multer from our file uploading.But in some case when we are doing a demo project or practicing some thing then if i have to setup whole multer code base then it is horrible.For that today i am going to show you how can you upload a file using a react package called react-file-base64.

Today we are going to build the following app

Now,at first setup out project

create a folder on Desktop and get init it

$ cd Desktop
$ mkdir react-file-upload
$ cd react-file-upload

and then create brand new react project with typescript

$ npx create-react-app ./ --template typescript

Now clean up all unnecessary files and get started

At the top of App.tsx file import

import FileBase from 'react-file-base64'

Now add some jsx to out components

<form onSubmit={handleSubmit}>
      <FileBase/>
      <button type="submit">Send</button>
      <div>
        <img src='' alt="react project" />
      </div>
    </form>

And add some state and change handler for controlling the form

type State = {
  image: string;
};
const [data, setData] = useState<State>({
    image: "",
  });
  const [image, setImage] = useState("");
  const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();
  };

We have to give three props to our FileBase Component they are type,multiple,onDone.So,give them to FileBase

<FileBase
        type="file"
        multiple={false}
        onDone={({ base64 }: { base64: string }) =>
          setData({ ...data, image: base64 })
        }
      />

Here onDone works same as onChange.onDone receives a parameter which contains base64.You should console log that parameter to see what the parameter contains.Now set base64 to the state.

Now add console log the data form onSubmit handler

const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();
    console.log(data);
  };

Now if you select a photo and submit the form you should see something in the console.You should see and object containing something like this

you see the image property contains something like string.This string goes into src attribute of an img element.

Now you can save this string to your database.So, you no longer need to store a lot of image in in folder just save this string.

In this application we are going to use this string to our img element

Change image elements src like this

<img src={image ? image : ""} alt="react project" />

and set image string to image state from submit handler

const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();
    setImage(data.image);
  };

now go to your browser and try to upload images.

Thank you for being with me so long.See you.Bye!

Counter application with react and typescript

sadiul hakim — Sat, 13 Nov 2021 05:37:48 +0000

Let's build this counter application using react-typescript.We are going to use useReducer hook for this application.

Let's set up our application

$ cd Desktop
$ mkdir react-counter
$ cd react-counter

Now create a react app

$ npx create-react-app ./ --template typescript

You should see a brand new react application.Clean up all unnecessary files.You can use a different component but in my case i am going to use App.tsx component.

At first create a component App and export it defaultly

const App:React.FunctionComponent=()=>{
  return <div className='container'></div>
}

Now we are going to setup our useReducer hooks.Add this statement to your code

const [state, dispatch] = React.useReducer(counterReducer, initialState);

Now let's create our cunterReducer and initialState

First initialState..

const initialState = {
  count: 0,
};

And then counterReducer

type ActionsType = {
  type: string;
  payload?: number;
};

const counterReducer = (
  state: typeof initialState,
  action: ActionsType
): State => {

};

Now let's add some actionTypes and actionCreators

ActionTypes..

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
const RESET = "RESET";

and actionCreators..


const increment = (value: number) => {
  return {
    type: INCREMENT,
    payload: value,
  };
};

const decrement = (value: number) => {
  return {
    type: DECREMENT,
    payload: value,
  };
};

const reset = () => {
  return {
    type: RESET,
  };
};

Yeah i am using redux pattern.Now let's add some logic to our reducer.

 switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + Number(action.payload) };
    case DECREMENT:
      return { ...state, count: state.count -Number(action.payload) };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }

Now let's add some jsx to our application

<div className="container">
      <p>{state.count}</p>
      <div className="wrapper">
        <button onClick={() => dispatch(increment(2))}>increment</button>
        <button onClick={() => dispatch(decrement(2))}>decrement</button>
        <button onClick={() => dispatch(reset())}>reset</button>
      </div>
<div>

If you want those styles you can add these css code in index.css file

p {
  font-size: 2rem;
  font-weight: 600;
}
button {
  background: #004567;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 20px;
  margin: 10px;
  font-size: 1.2rem;
  text-transform: capitalize;
}
.container {
  width: 500px;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

If you start your application you should see something on the screen a simple counter application working.

Now add a input element to add numbers randomly..

<input type="number" name="count" value={value} onChange={handleChange}/><button onClick={() = dispatch(increment(value as number))}>
       add
</button>

Now where do i get those value={value} and onChnage={handleChange} for that add following code at top of your component

const [value, setValue] = React.useState<number>();

and change handler handleChange

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(Number(e.target.value));
  };

you should keep all hooks at the top then functions

Now add these css code for your input element

input {
  padding: 10px;
  width: 300px;
}

Now if you got to your browser and refresh if it is needed,you should see same counter application as i have shown you at the top.Try to click buttons and check if it is working.

Thank you for being with me so long.See you.Bye!