DEV Community: vidvatek

How to Add Days in Date in React Native Calendar

vidvatek — Thu, 25 Apr 2024 14:13:32 +0000

Hey developers! Ever wondered how to manipulate dates in a React Native calendar? In this guide, we'll explore the step-by-step process of adding days to a date. Get ready to elevate your app's date-handling capabilities!

In this article, we'll learn about adding days to date in react native using moment js. In the moment js calendar, you can add a custom day to date in react native.

So, let's see how to create a custom calendar in react native, react native adds days to the calendar.

Here's a step-by-step guide on how to add days to a date in a React Native calendar:

Step 1: Set Up Your React Native Project

Ensure that you have a React Native project set up. You can use Expo or React Native CLI for this.

expo init MomentJSCalendar
cd MomentJSCalendar

Step 2: Install Moment.js

Install Moment.js using:

npm install moment

Step 3: Add a Date Manipulation Function in App.js

Add a function to manipulate the date by adding days.

import React,{useState} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import moment from 'moment'

export default function App() {
    return (
      <View style={styles.container}>
        <Text style={styles.date}>{moment().add(1, 'days').calendar() }</Text>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  text: {
    fontSize: 24,
  },

  date: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 15
  }

});

Step 4: Run Your Expo App

Run your Expo app using:

expo start

Conclusion:

And there you have it! Adding days to a date in your React Native calendar is a breeze. Now, you learn about how to add days to date in the moment js calendar in React JS.

Keep coding, and may your calendars always stay up-to-date and user-friendly!

How to Create Moment JS Calendar in React Native

vidvatek — Mon, 01 Apr 2024 14:11:50 +0000

Hey there, fellow developers! Today, we're diving into the world of React Native and Moment.js to create a dynamic and user-friendly calendar for your Expo projects.

Whether you're building a scheduling app or just want to display dates with finesse, this step-by-step guide has got you covered.

In this tutorial, We'll see how to create a Moment JS calendar react native with a step-by-step guide. And how to import Moment JS in the React Native Application.

Let's get started on crafting a sleek and functional calendar that'll elevate your React Native skills!

Creating a calendar using Moment.js in React Native with Expo involves a few steps. Here's a step-by-step guide for you:

Step 1: Set Up Your Expo Project

Ensure you have Expo CLI installed. If not, install it using:

npm install -g expo-cli

Create a new Expo project:

expo init MomentJSCalendar
cd MomentJSCalendar

Step 2: Install Moment.js

Install Moment.js using:

npm install moment

Step 3: Create Calendar Component

Create a new component for your calendar (e.g., CalendarComponent.js):

import React from 'react';
import { View, Text } from 'react-native';
import moment from 'moment';

const CalendarComponent = () => {
  return (
    <View style={styles.container}>
        <Text style={styles.date}>{moment().calendar() }</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 2,
    elevation: 4,
  },
});

export default CalendarComponent;

Step 4: Use Calendar Component

Use the CalendarComponent in your main file (e.g., App.js):

import React from 'react';
import { StyleSheet, View } from 'react-native';
import CalendarComponent from './CalendarComponent';

export default function App() {
  return (
    <View style={styles.container}>
      <CalendarComponent />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Step 5: Run Your Expo App

Run your Expo app using:

expo start

Conclusion:

And that's a wrap, folks! We've journeyed through integrating Moment.js into React Native with Expo to fashion a calendar that suits your app's needs.

From the basics of setup to displaying the current month.

Now, you learn how to import moment in react native, and how to create a calendar in react native using moment js.

Happy coding!

10 Digit Mobile Number Validation in Angular 17

vidvatek — Sat, 09 Dec 2023 05:16:44 +0000

Hey there! Ever wondered how to effortlessly validate 10-digit mobile numbers in Angular 17? In this guide, I'll walk you through the simple steps to ensure data accuracy and enhance your user interactions.

Let's dive into the world of Angular 17 and make mobile number validation a breeze.

Also, I'll give you information about angular 17 mobile number validation using regular expression and how to validate 10 digit phone numbers in angular 16/17.

Here's a step-by-step guide with code snippets on how to implement 10-digit mobile number validation in Angular 17:

Step 1: Set Up Your Angular 17 Project

Begin by creating a new Angular 17 project using the Angular CLI.

# Create a new Angular project
ng new angular-mobile-validation

# Navigate to the project folder
cd angular-mobile-validation

Step 2: Create a Mobile Number Validation Component

Build a new Angular component specifically for mobile number validation.

# Generate a new component for mobile number validation
ng generate component mobile-validation

Step 3: Implement the Validation Logic

Update the mobile-validation.component.html file with the input field and validation logic:

<div class="container">
    <h1>Angular phone number validation using regex - Vidvatek</h1>

    <form [formGroup]="form" (ngSubmit)="submit()">

        <div class="form-group">
            <label for="mobileNumber">Mobile Number</label>
            <input 
                formControlName="mobileNumber"
                id="mobileNumber" 
                type="text" 
                class="form-control">
            <div *ngIf="f.mobileNumber.touched && f.mobileNumber.invalid" class="alert alert-danger">
                <div *ngIf="f.mobileNumber.errors.required">Mobile Number is required.</div>
                <div *ngIf="f.mobileNumber.errors.pattern">Please enter a valid 10-digit mobile number.</div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Update the mobile-validation.component.ts file with the logic to handle user input:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-mobile-validation',
  templateUrl: './mobile-validation.component.html',
  styleUrls: ['./mobile-validation.component.css']
})
export class MobileValidationComponent {
  form: FormGroup = new FormGroup({});

  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      mobileNumber: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
    })
  }

  get f(){
    return this.form.controls;
  }

  submit(){
    console.log(this.form.value);
  }

}

Step 4: Display Validation Messages

Update the styles in the mobile-validation.component.css file for better presentation:

/* mobile-validation.component.css */

div {
  margin-bottom: 15px;
}

input {
  padding: 8px;
  width: 200px;
}

div > div {
  color: red;
}

Step 5: Test and Refine

Test your Angular app by serving it:

ng serve

Congratulations! You've successfully implemented 10-digit mobile number validation in Angular 17.

Conclusion

In conclusion, implementing 10-digit mobile number validation in Angular 17 is a straightforward process that enhances user data accuracy.

With clear validation messages and a user-friendly interface, this guide empowers you to create a seamless experience for your application users.

Happy coding!

How to Create Autocomplete Select Options Angular 17

vidvatek — Sat, 09 Dec 2023 05:13:50 +0000

Hey everyone! Ever wanted to spruce up your Angular app with an Autocomplete Select feature? I've got you covered! In this guide, I'll walk you through the simple steps to create dynamic and responsive select options in Angular 17.

In this example, you'll explore the Angular Material Autocomplete change event. This post provides a straightforward illustration of Angular Material Autocomplete select events, offering a step-by-step explanation. We will delve into using Angular Material Autocomplete click events.

You can effortlessly apply Material Autocomplete on the change event across various Angular versions, including Angular 14, Angular 15, Angular 16, and Angular 17.

Step 1: Set Up Your Angular 17 Project

Begin by creating a new Angular 17 project using the Angular CLI.

ng new angular-autocomplete-select
cd angular-autocomplete-select

Step 2: Install Angular Material

Now, in this step, we simply need to install the Material Design theme in our Angular application. Let's proceed by adding it as shown below.

ng add @angular/material

Installing packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes

Step 3: Create Autocomplete Component

Build a new Angular component specifically for the autocomplete select option.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

import {MatAutocompleteModule} from '@angular/material/autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h1>How to Create Autocomplete Select Options Angular 17 - Vidvatek</h1>

<form class="example-form">
  <mat-form-field>
     <input 
        type="text" 
        placeholder="Enter Location" 
        [formControl]="myControl"
        matInput
          [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
          <mat-option 
            *ngFor="let option of filteredOptions | async" 
            [value]="option"
            (onSelectionChange)="onSelFunc(option)">
            {{option}}
         </mat-option>
     </mat-autocomplete>
  </mat-form-field>
</form>

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
    title = 'my-app';
    myControl = new FormControl();
    options: string[] = [
        "Audi",
        "BMW",
        "Chevrolet",
        "Ford",
        "Honda",
        "Mercedes",
        "Nissan",
        "Toyota",
    ];
    filteredOptions: Observable;


    ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith(''),
          map(value => this._filter(value))
        );
    }

    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();

      return this.options.filter(option => option.toLowerCase().includes(filterValue));
    }

    onSelFunc(option){
      console.log(option);
    }
}

Step 4: Test and Refine

Test your Angular app by serving it.

ng serve

Conclusion:

In wrapping up, creating Autocomplete Select options in Angular 17 was a breeze! Now, users can effortlessly navigate and select options, improving the overall user experience of my application.

Angular Material makes it simple, and the dynamic responsiveness adds a touch of elegance to the interface.

Cheers to an enhanced UI!

How to Create Icon Button with Text in React Native

vidvatek — Sat, 09 Dec 2023 05:10:06 +0000

Hey there! In this tutorial, I'll walk you through the process of crafting stylish and interactive icon buttons with accompanying text in React Native.

We'll delve into the intricacies of combining icons and text to create a more engaging user experience for your mobile apps.

This tutorial focuses on demonstrating how to create stylish and functional custom buttons with both icons and text in React Native.

By the end of this article, you'll have a clear understanding of implementing how to create icon buttons with text in react native and react native button styles.

Let's dive into the step-by-step process of creating and styling the React native button with icons and text.

Step 1: Set Up Your React Native Project

Ensure that you have a React Native project set up using either Expo or React Native CLI. You can use the following command for React Native CLI:

expo init IconButtonExample

Step 2: Install Dependencies

For this example, we'll use React Native Vector Icons for the icon. Install these packages using npm or yarn:

# For React Native Vector Icons
npm install react-native-vector-icons

Step 3: Import Necessary Components

In your component file (e.g., App.js), import the required components:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default function App() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ 
            backgroundColor:'red',
            borderWidth:1,
            padding:10,
            borderColor:'red'
          }}
        >
        <Text style={{ color:'white', fontSize:17,fontWeight: '400' }}><FontAwesome name='trash-o' size={20} color='white'/> Delete</Text>
        </TouchableOpacity>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems:'center'
  },
});

Step 4: Run Your React Native App

Run your app using the following command:

expo start

Now, you should have a basic icon button with text in your React Native app.

How To Export CSV File In Laravel 10 Example

vidvatek — Mon, 30 Oct 2023 16:00:47 +0000

In the modern world of web development, data is the lifeblood of many applications. As a Laravel developer, I often need to provide users with a way to export data from my Laravel applications for further analysis, reporting, or sharing with other systems. That's where the Comma-Separated Values (CSV) format comes in handy.

In this article, I will delve into the process of exporting CSV files in Laravel 10, a powerful PHP framework known for its simplicity and elegance.

Together, we will explore the necessary steps to export data from our Laravel application to a CSV file, giving us the ability to effortlessly generate and deliver structured data in a universally accepted format.

Throughout this tutorial, I will cover essential concepts and practical examples to help us grasp the underlying mechanisms of CSV exportation in Laravel.

Whether you are a seasoned Laravel developer like me or just starting your journey with the framework, this guide will equip you with the knowledge and skills to implement CSV exporting functionality efficiently.

let's dive in together and learn how to export CSV files from our Laravel application step by step.

Step 1: Setup Laravel 10

Ensure you have a Laravel 10 project set up and ready for export CSV files. If you haven't created a Laravel project yet, you can use the following command to create one.

composer create-project --prefer-dist laravel/laravel export_csv_file_example

Step 2: Create a route for CSV export

Next, let's define a route in Laravel to handle the CSV export functionality. Open the routes/web.php file and add the following code

use App\Http\Controllers\CSVExportController;

Route::get('/export-csv', [CSVExportController::class, 'export'])->name('export.csv');

Step 3: Create a CSVExportController

Now, let's create a new controller to handle the CSV export logic. Run the following command in your terminal to generate the controller.

php artisan make:controller CSVExportController
Open the newly created CSVExportController.php file.

app/Http/Controllers directory and replace its content with the following code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Response;
use App\Models\Task;

class CSVExportController extends Controller
{
    public function export()
    {
        $fileName = 'tasks.csv';
        $tasks = Task::all();

        $headers = array(
            "Content-type"        => "text/csv",
            "Content-Disposition" => "attachment; filename=$fileName",
            "Pragma"              => "no-cache",
            "Cache-Control"       => "must-revalidate, post-check=0, pre-check=0",
            "Expires"             => "0"
        );

        $columns = array('Title', 'Description', 'Start Date', 'Due Date');

        $callback = function() use($tasks, $columns) {
            $file = fopen('php://output', 'w');
            fputcsv($file, $columns);

            foreach ($tasks as $task) {
                $row['Title']  = $task->title;
                $row['Description']    = $task->description;
                $row['Start Date']  = $task->start_at;
                $row['Due Date']  = $task->end_at;

                fputcsv($file, array($row['Title'], $row['Description'], $row['Start Date'], $row['Due Date']));
            }

            fclose($file);
        };

        return response()->stream($callback, 200, $headers);

    }
}

Step 3: Create a Blade File

Add an export button link in your blade file from where you want to export your data.

<span data-href="/export-csv" id="export" class="btn btn-success btn-sm" onclick ="exportTasks(event.target);">Export</span>
Now, add the below script after the body tag.

<script>
   function exportTasks(_this) {
      let _url = $(_this).data('href');
      window.location.href = _url;
   }
</script>

Step 4: Run Laravel 10 Application
Now, start your Laravel development server by running the command.

php artisan serve

Step 5: Conclusion

In this comprehensive guide, we explored the process of exporting CSV files in Laravel 10.

By following the step-by-step example, we learned how to generate CSV files from our Laravel application and provide users with the ability to download structured data in a universally accepted format.

How To Add Export Button In Datatable

vidvatek — Tue, 10 Oct 2023 16:29:59 +0000

In this article, we will explore a practical example of how to add export buttons to a DataTable in Laravel. If you need to export data from your DataTable to formats such as Excel, PDF, or CSV, incorporating export buttons is essential.

To achieve this functionality, DataTables offers the DataTable Buttons plugin, which enables you to seamlessly add export buttons to your DataTable. Once implemented, these buttons allow users to export the DataTable's data to various file formats, copy the data in HTML format, and perform other export-related actions.

Throughout this guide, we will demonstrate how to integrate the export buttons into your Laravel DataTable.

By following the step-by-step instructions, you'll be able to enhance your application's data export capabilities and empower users to efficiently export data for analysis, reporting, or collaboration.

We'll specifically focus on utilizing the DataTable Buttons plugin, which provides four HTML5 export buttons: copyHtml5, csvHtml5, excelHtml5, and pdfHtml5.

These buttons enable users to copy the DataTable data in HTML format or export it to CSV, Excel, or PDF files with just a single click.

Whether you're an experienced Laravel developer or just starting with DataTables, this guide will help you effortlessly add export buttons to your DataTable, providing an enhanced user experience and streamlining the data export process.

So, if you're ready to expand the data export capabilities of your Laravel DataTable and empower your users, let's delve into the step-by-step process of integrating export buttons and unlock the potential of data exportation together.

You need to simply add the below javascript cdn to add the export button in datatable.

https://code.jquery.com/jquery-3.5.1.js

https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js

https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js

https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js

https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js
And also add the following CSS library files are loaded for use in this example to provide the styling of the table.

https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css

https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css

Add the below HTML code.

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>            
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009-09-15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008-12-13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008-12-19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013-03-03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008-10-16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012-12-18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010-03-17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012-11-27</td>
                <td>$198,500</td>
            </tr>            
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011-12-12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sydney</td>
                <td>23</td>
                <td>2010-09-20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009-10-09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010-12-22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010-11-14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011-06-07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010-03-11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011-08-14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sydney</td>
                <td>37</td>
                <td>2011-06-02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009-10-22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011-05-07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008-10-26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011-03-09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009-12-09</td>
                <td>$85,675</td>
            </tr>           
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008-12-11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008-09-26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011-02-03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011-05-03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009-08-19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013-08-11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009-07-07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012-04-09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010-01-04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012-06-01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013-02-01</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011-12-06</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011-03-21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009-02-27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010-07-14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008-11-13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011-06-27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011-01-25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Add the below javascript code in your script tag.

$(document).ready(function() {
    $('#export_example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

How To Integrate Paypal Payment Gateway In Laravel 10

vidvatek — Mon, 25 Sep 2023 04:19:19 +0000

As a Laravel 10 developer, I understand the importance of providing a secure and user-friendly payment experience for online businesses.

That's why integrating a reliable payment gateway like PayPal into your Laravel 10 application can be a game-changer.

If you're looking to integrate PayPal into your Laravel 10 project, you're in the right place.

In this comprehensive guide, I will walk you through the step-by-step process of integrating the PayPal payment gateway into your Laravel 10 application.

Together, we'll cover all the necessary steps, from setting up a PayPal Business account to implementing the payment functionality within your Laravel codebase.

By the end of this tutorial, you'll have a solid understanding of how to harness the power of Laravel's features and seamlessly integrate PayPal's API for secure and efficient payment processing in your application.

PayPal is an American company operating a worldwide online payments system that supports online money transfers and serves as an electronic alternative to traditional paper methods like checks and money orders.

So, let's dive right in and discover the incredible potential of PayPal integration in Laravel 10.

Laravel 10 Send Mail Using Queue

vidvatek — Fri, 22 Sep 2023 05:26:13 +0000

As a Laravel developer, one of the common requirements is sending emails from your application. However, processing email sending synchronously can impact the performance and responsiveness of your application, especially when dealing with large volumes of emails.

That's where Laravel's powerful feature called queues comes to the rescue. In this article, I will guide you through the process of leveraging queues in Laravel 10 to send emails asynchronously, resulting in improved performance and an enhanced user experience.

In laravel 10 send mail using a queue example we will set up the mailtrap for sending an email. Laravel queues provide a unified queueing API across a variety of different queue backends, such as Amazon SQS, Redis, or even a relational database.

Table of content:

Install Laravel 10
Creating a Mailable Class
Configuration of Queue
Create Queue Job
Dispatching Mail Jobs to the Queue
Processing the Queue Jobs
Run Laravel 10 Application
Conclusion

How To Validate Form in React JS

vidvatek — Thu, 14 Sep 2023 04:27:22 +0000

Are you ready to enhance your React.js skills by mastering the art of form validation in your web applications? Look no further! In this step-by-step guide, I will walk you through the process of implementing form validation in a React.js app.

We will cover essential form fields like Name, Email, Password, and Confirm Password, ensuring that the user-submitted data meets the required criteria.

Form validation plays a crucial role in creating user-friendly and error-free web forms. By validating user input, we can provide real-time feedback, improve data accuracy, and enhance the overall user experience.

Throughout this tutorial, we will explore how to create a React.js app, set up form fields, implement validation logic, and handle user interactions effectively.

To get started, make sure you have a basic understanding of React.js and JavaScript. Additionally, ensure that you have a React.js project set up on your machine.

With these prerequisites in place, we can dive into the exciting world of form validation in React.js!

So, let's embark on this journey together, empowering our web applications with robust form validation techniques. Get ready to take your React.js skills to the next level as we create dynamic and error-free forms.

Let's begin our exploration of form validation in React.js!

Step 1: Set Up a React.js Project

Create a new React.js project using create-react-app by executing the following command in your terminal.

npx create-react-app form-validation-app

Navigate to the project directory.

cd form-validation-app

Step 2: Create a Form Component

Create a new file called Form.js inside the src folder.

Inside the Form.js file, create a functional component named Form.

import React from 'react';

const Form = () => {
  return (
    <form>
      {/* Form fields will be added here */}
    </form>
  );
};

export default Form;

Step 3: Setting Up Form State and Handling Form Input Changes
Inside the Form component, set up the initial state for the form fields and error messages.

const [formData, setFormData] = React.useState({
  name: '',
  email: '',
  password: '',
  confirmPassword: '',
});

const [formErrors, setFormErrors] = React.useState({
  name: '',
  email: '',
  password: '',
  confirmPassword: '',
});

Create a function called handleInputChange to handle input changes.

const handleInputChange = (event) => {
  const { name, value } = event.target;

  setFormData((prevFormData) => ({
    ...prevFormData,
    [name]: value,
  }));
};

Step 4: Implementing Form Validation

Add a function called validateForm to perform the form validation.

const validateForm = () => {
  let isValid = true;
  const errors = {};

  // Name validation
  if (formData.name.trim() === '') {
    errors.name = 'Name is required';
    isValid = false;
  }

  // Email validation
  // Use regular expressions or a validation library for a more thorough email validation
  if (formData.email.trim() === '') {
    errors.email = 'Email is required';
    isValid = false;
  }

  // Password validation
  if (formData.password.trim() === '') {
    errors.password = 'Password is required';
    isValid = false;
  }

  // Confirm password validation
  if (formData.confirmPassword.trim() === '') {
    errors.confirmPassword = 'Confirm Password is required';
    isValid = false;
  } else if (formData.password !== formData.confirmPassword) {
    errors.confirmPassword = 'Passwords do not match';
    isValid = false;
  }

  setFormErrors(errors);
  return isValid;
};

Step 5: Handling Form Submission
Create a function called handleSubmit to handle form submission.

const handleSubmit = (event) => {
  event.preventDefault();

  if (validateForm()) {
    // Form is valid, perform further actions (e.g., submit to a server)
    console.log('Form is valid');
  } else {
    // Form is invalid, display error messages
    console.log('Form is invalid');
  }
};

Step 6: Rendering the Form and Displaying Error Messages
Inside the return statement of the Form component, add the form HTML markup and error messages.

return (
  <div>
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
        {formErrors.name && <span className="error">{formErrors.name}</span>}
      </div>
      {/* Repeat the above pattern for other form fields */}
      <button type="submit">Submit</button>
    </form>
  </div>
);

Step 7: Run the Application
Start the development server by running the following command.

npm start

This command will start the React development server and launch your application in your default web browser.

Conclusion

In this guide, we walked through the process of validating a form in a React.js application. By following the step-by-step instructions and incorporating the code examples provided, you can now implement form validation with fields like Name, Email, Password, and Confirm Password.

Step-by-Step Guide: Installing React.js on Ubuntu

vidvatek — Wed, 30 Aug 2023 04:17:58 +0000

Are you ready to embark on a journey to install React.js on your Ubuntu machine? Look no further! In this article, we will walk through the step-by-step process of setting up React.js on Ubuntu, ensuring you have all the tools you need to start building powerful and interactive user interfaces.

React.js is a popular JavaScript library used for building user interfaces. Installing React.js on your Ubuntu machine is a straightforward process that involves setting up Node.js, the npm package manager, and creating a React.js project.

This article will guide you through each step to help you install React.js on your Ubuntu system.

React.js has gained immense popularity in the web development community due to its component-based architecture, reusability, and performance optimizations. By installing React.js on your Ubuntu system, you'll gain access to a robust and efficient framework for creating modern web applications.

Before we dive into the installation process, it's important to have Ubuntu already installed on your machine. Ubuntu is a widely-used Linux distribution known for its user-friendly interface and stability.

Additionally, a basic familiarity with the command line will come in handy as we navigate through the installation steps.

Now, let's embark on this React.js installation journey together, as we unleash the power of JavaScript and create engaging and dynamic web experiences. Buckle up, and let's get started!

Prerequisites: Before proceeding with the installation, make sure you have the following prerequisites:

Ubuntu is installed on your machine.
Basic knowledge of the command line.

Step 1: Install Node.js and npm

Open the Terminal by pressing Ctrl+Alt+T simultaneously. Update the package list by running the following command.

sudo apt update

Install Node.js and npm by executing the following command.

sudo apt install nodejs npm

Step 2: Check Node.js and npm Installation
To verify if Node.js and npm are installed successfully, run the following commands.

node --version
npm --version

If you see the versions of Node.js and npm, it means the installation was successful.

Step 3: Create a React.js Project

Install the create-react-app package globally using npm by running the command.

sudo npm install -g create-react-app

Create a new directory for your React.js project. For example.

mkdir react-app

Navigate to the project directory using the following command.

cd react-app

Generate a new React.js project using create-react-app.

npx create-react-app my-app

Replace "my-app" with the desired name for your project.

Step 4: Run the React.js Development Server

Move into the project directory.

cd my-app

Start the development server by running the following command.

npm start

Open your web browser. You should see the React.js application running.

Conclusion

Installing React.js on Ubuntu involves setting up Node.js, the npm package manager, and creating a new React.js project using create-react-app.

By following the step-by-step guide outlined in this article, you can quickly get started with React.js development on your Ubuntu system.

Laravel 10 Import and Export CSV and Excel Files

vidvatek — Tue, 22 Aug 2023 05:05:06 +0000

In today's data-driven world, as a Laravel developer, the need to import and export data in different file formats is a common requirement for web applications. With the release of Laravel 10, I now have even more capabilities at my disposal when it comes to handling CSV and Excel files.

These file formats are widely used for data exchange, making it crucial for me to understand how to handle them effectively within my Laravel applications.

In this article, I will explore the process of importing and exporting CSV and Excel files using Laravel 10. I will walk through the necessary steps and demonstrate how Laravel's features and supporting packages can streamline these tasks.

By the end of this article, I will have a solid understanding of how to handle CSV and Excel files within my Laravel applications, empowering me to seamlessly import and export data with confidence.

In particular, I will be leveraging the popular maatwebsite/excel plugin to facilitate the seamless importing and exporting of CSV and Excel files.

In this article, I will guide you through the process of utilizing Laravel 10 in conjunction with the maatwebsite/excel plugin to handle CSV and Excel files effectively.

We will explore the necessary steps and demonstrate how this combination of Laravel and the maatwebsite/excel plugin can simplify the import and export processes.

So, whether I need to import large datasets from external sources or export data for reporting or analysis, the capabilities of Laravel 10 will enable me to accomplish these tasks efficiently and effortlessly.

Join me as I dive into the power of Laravel 10 for importing and exporting CSV and Excel files.

DEV Community: vidvatek

How to Add Days in Date in React Native Calendar

How to Create Moment JS Calendar in React Native

Read Also: How To Validate Form in React JS

Read Also: How to Create Autocomplete Search in React

10 Digit Mobile Number Validation in Angular 17

How to Create Autocomplete Select Options Angular 17

How to Create Icon Button with Text in React Native

How To Export CSV File In Laravel 10 Example

How To Add Export Button In Datatable

How To Integrate Paypal Payment Gateway In Laravel 10

Laravel 10 Send Mail Using Queue

How To Validate Form in React JS

Step-by-Step Guide: Installing React.js on Ubuntu

Laravel 10 Import and Export CSV and Excel Files