Wednesday, December 18, 2019

ReactJS - Preventing Form Submission

I've been experimenting with React. In my experiement, I'm using the React framework. When I click a button, I've noticed that the HTML form submits. Is there a way to prevent form submission when a button is clicked? Just need to add the following attribute to the form.

<form onSubmit={(e) => e.preventDefault()}>


</form>

Laravel Custom Data Validation | Validate Request Data And Return Appropriate Error Message

Now we are ready to fill in our store method with the logic to validate the new blog post. To do this, we will use the validate method provided by the Illuminate\Http\Request object. If the validation rules pass, your code will keep executing normally; however, if validation fails, an exception will be thrown and the proper error response will automatically be sent back to the user. In the case of a traditional HTTP request, a redirect response will be generated, while a JSON response will be sent for AJAX requests.
<?php
namespace App\Http\Controllers;

use Validator;
use App\Models\Users;
use Illuminate\Support\Facades\Log;

class RegistrationController extends ControllerBase {
    /**
     * @return \Illuminate\Http\JsonResponse
     * @throws \Exception
     */
    public function register() {
        if ($this->isLoggedIn()) {
            $this->setErrorMessage("Already logged in");
            throw new \Exception("Already logged in");
        }

        // if data is json formatted
        if (true) {
            $data = json_decode(request()->getContent(), true);

            request()->merge($data);
        }

        // custom messaged will show when validation fail
        // for example if name is missing will return 'The Name field is required'
        // we can define full message without using :attribute like 'email.unique'
        $customMessages = [
            'required' => 'The :attribute field is required.',
            'in' => 'The :attribute field has invalid data',
            'password.required' => 'Password required',
            'email.unique' => 'Email address must be unique'
        ];

        // used to set display name against key
        // for example if email is required then 'The Email Address field is required'
        $attributes = [
            'name' => 'Name',
            'email' => 'Email Address',
            'password' => 'Password',
            'status' => 'Status'
        ];

        $validator = Validator::make(request()->all(), [
            'name' => 'required|max:70',
            'email' => 'required|email|max:70|unique:users',
            'password' => 'required|min:6|max:70',
            'status' => 'required|in:pending',
        ],  $customMessages, $attributes);

        $validator->after(function($validator) {
            // If some validation failed
            if (true) {
                $validator->errors()->add('field', 'The field has invalid data');
            }
        });

        if ($validator->fails()) {
            Log::error($validator->errors());
            return response()->json(["success" => 0, "error" => $validator->errors()->first()], 200);
        }

        $user = Users::create(request([
            'name',  'email', 'password', 'status'
        ]));

        return response()->json(["success" => 1, "user_id" => $user->id]);
    }
}

Monday, December 2, 2019

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React | ReactJS access HTML Element Node Reference

React supports a good way to set refs called “callback refs”, which gives more fine-grain control over when refs are set and unset.
Instead of passing a ref attribute created by createRef(), you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.
The example below implements a common pattern: using the ref callback to store a reference to a DOM node in an instance property.
class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // Focus the text input using the raw DOM API
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // autofocus the input on mount
    this.focusTextInput();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

Wednesday, November 27, 2019

Git Bash | Changing a remote's URL | How to Change a Git Remote's URL | How Save Username/Password/Credentials For Git Repository in Git Bash

Got to the directory where the repository is located using Git Bash:

cd /path/to/repository
Run git remote to list the existing remotes and see their names and URLs:

git remote -v

The output will look something like this:

origin https://pritomkucse@bitbucket.org/pritomkucse/demo_project.git (fetch)
origin https://pritomkucse@bitbucket.org/pritomkucse/demo_project.git (push)
For example, to change the URL of the origin to some other repo you would type:

git remote set-url origin https://pritomkucse:your_password@bitbucket.org/pritomkucse/demo_project_2.git
Verify that the remote URL has changed using the same command git remote -v

Sunday, November 24, 2019

ReactJS Render HTML string as real HTML in a React component

First need to install react-html-parser to render html as html element in react js.
Run below command to add the dependency:

npm add react-html-parser
Then use as below:

import ReactHtmlParser from 'react-html-parser';

import axios from 'axios'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import MainActivity from "./MainActivity";
import ReactHtmlParser from 'react-html-parser';

class ProjectsList extends MainActivity {
    constructor () {
        super();
        this.state = {
            projects: [],
            loading: true,
            html: ""
        };
    }

    componentDidMount () {
        axios.get(`${this.APP_URL}/api/projects`).then( response => {
            console.log(response);
            this.setState({
                projects: response.data,
                loading: false,
                html: response.data.html
            })
        })
    }

    render () {
        if (this.state.loading) {
            return this.loader()
        }
        if (this.state.html) {
            return <div>{ ReactHtmlParser(this.state.html) }</div>;
        }
        const { projects } = this.state;
        return (
            <div className='container py-4'>
                <div className='row justify-content-center'>
                    <div className='col-md-8'>
                        <div className='card'>
                            <div className='card-header'>All Projects</div>
                            <div className='card-body'>
                                <Link className='btn btn-primary btn-sm mb-3' to='/project/create'>
                                    + Create New Project
                                </Link>
                                <ul className='list-group list-group-flush'>
                                    {projects.map(project => (
                                        <Link
                                            className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
                                            to={`/project/${project.id}`}
                                            key={project.id}>
                                            {project.name}
                                            <span className='badge badge-primary badge-pill'>{project.tasks_count}</span>
                                        </Link>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default ProjectsList

Wednesday, November 20, 2019

Install Express.js web application framework for Node.js with SockeIO

Express.js is a web application framework for Node.js. FIrst install nodejs and npm.
You can install express.js using npm. The following command will install latest version of express.js globally on your machine so that every Node.js application on your machine can use it. Just run the following command

npm install -g express
Now create a directory named Node1 and navigate to the directory from command prompt (for windows) and run the following command will install nodejs express web framework to the following directory.

First run npm init to initialize a probject.

Then run following command to install express and socketio respectively.

npm install --save express

npm install --save socket.io
We then run npm install to get all the dependencies that are needed to run the app. To test the empty application, run node main.js then navigate your browser to http://127.0.0.1:8081. Main.js is as below:
let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http);

// Send socket initialization scripts to the client
app.get('/', function(req, res){
    res.send(`
<script src="/socket.io/socket.io.js"></script>
<script>
    let socket = io();
    socket.on('text', (txt) => {
  console.log(txt);
        let textp = document.createElement("h1");
        let t = document.createTextNode(txt);
        textp.appendChild(t);                                            
        document.body.appendChild(textp);
    });
</script>`);
});

// Respond to socket connections with a Hello World text
io.on('connection', (socket) => {
    console.log('User connected');
    io.emit('text', 'Hello, World!');
});

// Run our socket-enabled server
http.listen(8081, function() {
    console.log('listening on *:8081');
});
io.on('connect', onConnect);

function onConnect(socket){

  // sending to the client
  socket.emit('hello', 'can you hear me?', 1, 2, 'abc');

  // sending to all clients except sender
  socket.broadcast.emit('broadcast', 'hello friends!');

  // sending to all clients in 'game' room except sender
  socket.to('game').emit('nice game', "let's play a game");

  // sending to all clients in 'game1' and/or in 'game2' room, except sender
  socket.to('game1').to('game2').emit('nice game', "let's play a game (too)");

  // sending to all clients in 'game' room, including sender
  io.in('game').emit('big-announcement', 'the game will start soon');

  // sending to all clients in namespace 'myNamespace', including sender
  io.of('myNamespace').emit('bigger-announcement', 'the tournament will start soon');

  // sending to a specific room in a specific namespace, including sender
  io.of('myNamespace').to('room').emit('event', 'message');

  // sending to individual socketid (private message)
  io.to(`${socketId}`).emit('hey', 'I just met you');

  // WARNING: `socket.to(socket.id).emit()` will NOT work, as it will send to everyone in the room
  // named `socket.id` but the sender. Please use the classic `socket.emit()` instead.

  // sending with acknowledgement
  socket.emit('question', 'do you think so?', function (answer) {});

  // sending without compression
  socket.compress(false).emit('uncompressed', "that's rough");

  // sending a message that might be dropped if the client is not ready to receive messages
  socket.volatile.emit('maybe', 'do you really need it?');

  // specifying whether the data to send has binary data
  socket.binary(false).emit('what', 'I have no binaries!');

  // sending to all clients on this node (when using multiple nodes)
  io.local.emit('hi', 'my lovely babies');

  // sending to all connected clients
  io.emit('an event sent to all connected clients');

};

Tuesday, November 12, 2019

How to configure virtual host for Laravel on Linux

In this article we will discuss How to configure virtual host for Laravel with Apache server as web server (I installed lampp on my linux machine, which contains apache server installed). It would be very helpful to be able to manage many site on the same host specially when we work with api and specially when want feel like project is running on a real server like my_laravel.com.
At first we need to enable virtual host, below is the command to edit httpd.conf:

sudo gedit /opt/lampp/etc/httpd.conf
Now locate

# Virtual hosts
#Include etc/extra/httpd-vhosts.conf

and comment out the following line:

Include etc/extra/httpd-vhosts.conf
Next step is to put and entry to system host file (execute below command):

sudo gedit /etc/hosts

And add entry 127.0.0.1 my_laravel.com to the end of the file
Next step is to modify file httpd-vhosts.conf, execute below command to modify:

sudo gedit /opt/lampp/etc/extra/httpd-vhosts.conf
<VirtualHost *:80>
    DocumentRoot "/opt/lampp/htdocs"
    ServerName localhost
</VirtualHost>


<VirtualHost my_laravel.com:80>
    DocumentRoot "/home/pritom/codes/laravel_test_success/public"
    ServerName my_laravel.com
    ErrorLog "logs/my_laravel.com-error.log"
    CustomLog "logs/my_laravel.com-access.log" combined
    <Directory "/home/pritom/codes/laravel_test_success/">
        Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
            Require all granted
    </Directory>
</VirtualHost>
Finally restart apache server using command
sudo /opt/lampp/lampp restart
and browse my_laravel.com from browser