DEV Community: S. M. Ahad Ali Chowdhury

What is OG (open graph )? And what will we use it for!

S. M. Ahad Ali Chowdhury — Mon, 11 Sep 2023 22:02:48 +0000

OG (Open Graph) tags are used as meta tags. The purpose of using OG is when we share a website's link on social platforms, it helps display a beautiful preview of our website. For example, when sharing a link on Facebook, it can show a nice title and the Facebook logo, as shown in the screenshot below.

OG tags are primarily used for this purpose.To use these meta tags on your website, you can include them in the HTML head section like this:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="Description of your page." />
  <meta property="og:image" content="URL of your featured image or logo." />
  <meta property="og:url" content="URL of your webpage." />
</head>

This helps improve the appearance and information presented when your website links are shared on social media.

React js Input Field test using Jest and Enzyme

S. M. Ahad Ali Chowdhury — Thu, 07 Sep 2023 13:50:21 +0000

testing the input field with jest and enzyme
first take a input field in your react js file like this
<input

        type="text"
        value={inputValue}
        onChange={handleChange}
        className='inputfield'
      />

for this input field, take handleChange function , and a useState for the input Value , like this

const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

this take the input from the user,

Now here, i want write test file for this input field,

it('updates input value on change', () => {
    const wrapper = shallow(<App />);
    const input = wrapper.find('.inputfield');
    input.simulate('change', { target: { value: 'ahad' } });
    const refoundInput = wrapper.find(".inputfield")
    expect(refoundInput.props().value).toEqual("ahad");
  });

here the explain

const wrapper = shallow(<App />);
It starts by shallow rendering the App component, which means it renders the component without rendering its children or diving deep into the component tree. This allows you to isolate your testing to the behavior of the App component itself.
const input = wrapper.find('.inputfield');
It finds an input element with a CSS class of "inputfield" within the rendered App component. This is assuming that your input field has a class attribute set to "inputfield."
input.simulate('change', { target: { value: 'ahad' } });
It simulates a change event on the found input field and sets its value to 'ahad'. This simulates a user typing 'ahad' into the input field.
const refoundInput = wrapper.find(".inputfield");
It finds the input element again after the simulated change event. This step is necessary because the input variable from step 2 may not reflect the updated state of the input field after the simulated change event.
expect(refoundInput.props().value).toEqual("ahad");
It uses an assertion to check whether the value prop of the input field, which was found again in step 4, is equal to 'ahad'. This ensures that the input field's value has been updated correctly in response to the simulated change event.

Create a contact page api with Laravel

S. M. Ahad Ali Chowdhury — Sun, 12 Jun 2022 17:41:43 +0000

step No-1
Create a migration . For this go to the code editor terminal and write
php artisan make:Migration contactMigration
this command create a new file. go to this file and write this code in up() function like that

public function up()
{
Schema::create ('contact', function (Blueprint $table){
$table->bigIncrements('id');
$table->string('name');
$table->string('mobile');
$table->string('message', 1000);
$table->string('contact_date');
$table->string('contact_time');
});
}

after that, again go to the code editor terminal and run this command: php artisan migrate

step 1 completed.

Step No-2

create model
php artisan make:Model contactModel(your model name) run this command in your code editor terminal.this command create a file. write code like below in this file

class contactModel extends Model
{
public $table='contact';
public $primaryKey='id';
protected $fillable = ['name', 'mobile', 'message',
'contact_date', 'contact_time'];
public $incrementing=true;
public $keyType='int';
public $timestamps=false;
};

step No 2 completed.

step No-3:
create controller
php artisan make:Controller contactController(your Controller name)
after make controller,
in this controller import contactmodel for inserting data in database . Like
use App\Models\contactModel;

and then

class contactController extends Controller
{
function getContactDetails(Request $request){
$name = $request->input('name');
$mobile= $request->input('mobile');
$message= $request->input('message');
date_default_timezone_set("Asia/Dhaka");
$contact_time = date("h:i:sa");
$contact_date= date("d-m-Y");
$result = contactMode::insert([
"name"=> $name,
"mobile"=> $mobile,
"message"=> $message,
"contact_date"=> $contact_date,
"contact_time"=> $contact_time,
]);
return $result;
}
}

step No 3 done.

Step No-4:
this data use only for client site. that's why we go to the route>api.php and than
create new route

Route::post("/getContactDetails", {contactController::class, 'getContactDetails'});

and also you should import the contactcontroller class path in top of the api.php.

for this use App\Http\Controllers\contactController;

step No 4 done.

step No 5:

Go to client code and go to the contact page.
Create a state for name, mobile and message option. like:

this.state={
name: "",
mobile:"",
message:""
}
Then we should have to create a onChange for the input value. onChange function like that:

nameOnChange=(event)=>{
let name = event.target.value;
this.setState(name:name);
}
mobileOnChange=(event)=>{
let mobile = event.target.value;
this.setState(mobile: mobile);
}
messageOnChange=(event)=>{
let message= event.target.value;
this.setState(message: message);
}

For submitting this form. We create a onSubmit function. Like:

onsubmit=(event)=>{
let name = this.state.name;
let mobile= this.state.mobile;
let message= this.state.message;
//if we want to create some regex for this three input field.

we implement this in new file like regex.js file.
then create condition here

if(expression)
{   //code here}
else{
    let myFormData = new FormData();
    myFormData.append("name", name);
    myFormData.append("mobile", mobile);
    myFormData.append("message", message);

    axios.get(url.getContactDetails, myFormData)
    .then(function(response)=>{
           if(response.status==200 && response.data==1){
                alert("ok");
           }else{
                 alert("error");//we can use react toast
                                  dependency for  nice view

           }          
    })
    .catch(function(err){
        alert(err);//we can use react toast dependency for 
                   nice view
    });
}
event.preventDefault();

}

step No 5 done.

done this work.....
Happy coding

laravel visitor details catch

S. M. Ahad Ali Chowdhury — Mon, 06 Jun 2022 18:31:29 +0000

Suppose you want to save visitor details who visit your website...
You have to do something for this
Step No-1:
go to code editor terminal and type
php artisan make:Migration (your table name)
Then go to migration file which you make just now
then code something in up function
Here is some example

Schema::create("your table name", function (Blueprint $table){
//$table->your data type here("column name");
$table->bigIncrements("id");
$table->string("ip_address");
$table->string("visit_time");
$table->string("visit_date");
}
go to code editor terminal again and type
php artisan migrate

step 1 done

step No-2
create model
php artisan make:Model (your model name)

class VisitorModel extends Model
{
public $table='Visitor';
public $primaryKey='id';
protected $fillable = ['ip_address', 'visit_time'];
public $incrementing=true;
public $keyType='int';
public $timestamps=false;
};
**

step 2 done

step No-3

create controller
php artisan make:Controller (your Controller name)
after make controller,
in this controller import visitormodel for inserting data in database . Like
use App\Models\VisitorModel;

and then
**

class VisitorController extends Controller
{
function getVisitorDetails(){
$ip_address = $_SERVER['REMOTE_ADDR'];
date_default_timezone_set("Asia/Dhaka");
$visit_time = date("h:i:sa");
$visit_date= date("d-m-Y");
  $result = VisitorMode::insert([
        "ip_address"=> $ip_address,
        "visit_time"=> $visit_time,
         "visit_date"=> $visit_date,
 ]);

        return $result;
}
}
**

step 3 done

step No-4
this data use only for client site. that's why we go to the route>api.php and than
create new route
Route::get("/getvisitordetails", {VisitorController::class, 'getVisitorDetails'});
and also you should import the visitorcontroller class path in top of the api.php.

for this use App\Http\Controllers\VisitorController;

step 4 done

step No-5
test the route
go to postman and test this route.

step 5 is done......

Step No_6:
If you want to use this api in your website. Just go to the your interface code and create src>api>apiURL.js
and then, create a class like this...

class url{
static baseURL = "your base url",
static visitorData = this.baseURL + "your visitor route"
}
export default url;

Now, go to your Homepage and write a function like

GetVisitorDetails=()=>{
axios.get(url.visitorData).then().catch();
}

and now call this function anywhere from the homepage.

that's it.

thank you

if you find any error please comment below in this post, I will try my best to fix it

How to run typescript with vs code

S. M. Ahad Ali Chowdhury — Wed, 01 Jun 2022 15:04:42 +0000

Task 01:
If you have not install node js . go to node js official website and download the latest version.
when download and install is completed , go to the terminal and write node - version and press Enter for sure you really download and install node js.
if node js perfectly installed , it shows a node js version which is already install in your computer.

task -02:
go to your terminal and write
npm install -g typescript and press enter.
for check the version of typescript, go to terminal and write tsc --version , you can find the version name which you install typescript just few second ago.

task -03:
create a filename.ts in your familiar location, and open vscode in this file location.
write something in your filename.ts
when it is finished, go to vs code terminal and type tsc filename.ts
when you press enter , this show nothing and also see a new file that's name is filename.js

(In this moment if you face an error like "tsc.ps1 cannot be loaded because running scripts is disabled on this system"
don't worry…..
go to the powershall and run this is as an administrator **and type "Set-ExecutionPolicy -ExecutionPolicy RemoteSigned**" and press enter , the terminal want to permission so type "Y" and press enter )

and now you go to the vscode terminal again and type node filename.js and press enter

boom…………….
it's working hahaha

nodemon install and work with backend(express and mongo)

S. M. Ahad Ali Chowdhury — Mon, 25 Apr 2022 19:23:28 +0000

First download the nodemon package
for globally
npm i -g nodemon
OR
npm install --global nodemon

  for locally

      npm i nodemon 
               OR
      npm install --save-dev nodemon

go to your "package.json" file and go also "scripts" object and write

"scripts": {
"start": "nodemon (your main js file, where you do main work like server connect => for example , app.js)"
},

that's it

Now you can try your terminal npm start for starting this app

good day

testing node js api using mocha and chai

S. M. Ahad Ali Chowdhury — Sun, 24 Apr 2022 08:13:34 +0000

testing node js api using chai and mocha

first following the step for installing mocha and chai

npm install mocha --save-dev
npm install chai --save-dev
npm install chai-http --save-dev
go to the package.json file and write in scripts "test": "mocha"
then create a folder and create a file (like api.js) and code your testing
Write npm test in terminal for testing the test

for better understanding you can try below link for understanding how mocha and chai work and how we write testing code for test our application------

https://www.digitalocean.com/community/tutorials/test-a-node-restful-api-with-mocha-and-chai