Important Code Samples: 2020

CREATE TABLE foo (fooid INT, foosubid INT, fooname TEXT); INSERT INTO foo VALUES (1, 2, 'three'); INSERT INTO foo VALUES (4, 5, 'six'); CREATE OR REPLACE FUNCTION get_all_file_info() RETURNS SETOF bia_t_project_file_info AS $BODY$ DECLARE r bia_t_project_file_info%rowtype; BEGIN FOR r IN SELECT * FROM bia_t_project_file_info WHERE pfi_id > 0 loop -- public.bia_t_project_file_info -- can do some processing here RETURN NEXT r; -- return current row of SELECT END LOOP; RETURN; END $BODY$ LANGUAGE plpgsql; SELECT * FROM get_all_file_info(); -- drop function get_available_flightid create or replace FUNCTION get_available_flightid() RETURNS SETOF varchar(250) AS $BODY$ BEGIN RETURN QUERY SELECT pfi_filename FROM project WHERE pfi_id > 0; -- Since execution is not finished, we can check whether rows were returned -- and raise exception if not. IF NOT FOUND THEN RAISE EXCEPTION 'No flight at %.', $1; END IF; RETURN; END $BODY$ LANGUAGE plpgsql; -- Returns available flights or raises exception if there are no -- available flights. SELECT * FROM get_available_flightid(CURRENT_DATE);

Copy below HTML code into a HTML file which you like and run the HTML.

ex: Copy the code

create a test.html blank file in your PC

Paste the code and Run it.

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">

class MyForm extends React.Component {
constructor(props) {
    super(props);
    this.state = { username: '',
        age: 10,
        sex: "Male",
        errormessage: '',
        description: 'The content of a textarea goes in the value attribute'};
};

myChangeHandler = (xx) => {
   // this.setState({username: xx.target.value});
        let name = xx.target.name;
        let val = xx.target.value;

        this.setState({[name]: val});
}

    myChangeAge = (xx) => {
   // this.setState({username: xx.target.value});
        let name = xx.target.name;
        let val = xx.target.value;
        let err = '';
        if (name="age"){
            if (!Number(val)){
                // alert("Not a number")
                err = <strong>Your age must be a number</strong>;    // Error handling

            }
        }
        this.setState({errormessage: err});
        this.setState({[name]: val});
}

render() {
    let header = '';
    {/*Conditional rendering */}
    if (this.state.username) {
      header = <h1>Hello {this.state.username}</h1>;
    } else {
      header = '';
    }

    return (
      <form>
      {header}
      <p>Enter your name:</p>
      <input
        type='text'
        name='username'
        onChange={this.myChangeHandler}
      />
    <div>
            <input
        type='text'
        name='age'
        onChange={this.myChangeAge}
      />
    </div>
    <div>
            <input
        type='submit'
      />
    </div>
       {this.state.errormessage} {/*<-- Error message displaying */}
       <textarea value={this.state.description} />
       <div>
           <select>
            <option value="Ford">Ford</option>
            <option value="Volvo" selected>Volvo</option>
            <option value="Fiat">Fiat</option>
           </select>
       </div>

      </form>
    );
}
}

class Hello extends React.Component {

render() {
    return <h1>Hello {this.props.test2} !</h1>
}

// when this component is unmounted from a process, then this function getting execute
componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
}


}

class Men extends React.Component {
    constructor(props){
        super(props);
        this.state={
        val1: 1,
        val2: 2,
        val3: 3,
        show: false

        };
    }

    //The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.
    changeval=(props)=>{
        this.setState({val1: this.props.var1});
    }

    //The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.
    changeva2=()=>{
        this.setState({val1: 11});
    }

    //this keyword should represent the component that owns the method.
    showval=(props)=>{

        this.setState({show: this.props.show2});
    };

    regularfunction = function(){
        document.getElementById("div3").innerHTML += this;
    }

    arrowfunction = () =>{
        document.getElementById("div4").innerHTML += this;
    }

    showval2=()=>{

        if (this.state.show == false)
        {
            this.setState({show: true});
        }
        else
        {
            this.setState({show: false});
        }

    }

    paramfunc=(x, y)=>{
        alert(x + y);
    }

   paramfuncevent=(x, y, ev)=>{
        alert(x + y + " " + ev.type);
    }


//The componentDidMount() method is called after the component is rendered.
componentDidMount() {
    setTimeout(() => {
      this.setState({val1: 10})
    }, 8000)
}

//method is called right before rendering the element(s) in the DOM.
//first method that is called when a component gets updated.
//shouldComponentUpdate is not a matter at this level;
//***** if this method is executed, that mean, you cannot change this val1 value agaian.
//Line is commeneted due to other values not working because of this function
/*static getDerivedStateFromProps(props, state) {
        return {val1: props.var1};
        //changeval;
}*/

//if you need to lock the component as unmuted, then this is a way
shouldComponentUpdate() {
    return true;//if false, components are never updates, default is anyway true;
}

//This will identify each state of a component and can compare with the current and the
//previouse values
    getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.val1;
}

//Once the componen changes, this function is executing. Specially if you impliment getSnapshotBeforeUpdate()
// you must have this function too.
componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.val1;
}


    render(){

        let hel1;

        if (this.state.show){
            hel1 = <Hello test2={this.props.test2}/> ;
        }

        return (<div>
                    <h1> Men class {this.props.test} {this.state.val1} </h1>
                    {hel1}
                    <p> value is {this.state.val1}    </p>

                    {/* Events are in Camel cases, ex: onClick(). event handlers are in {this.changeva2}, ex: onClick={this.changeva2}
                    A good practice is to put the event handler as a method in the component class:*/}
                    <div><button id="b1" type="button" onClick={this.changeva2}>Change value</button></div>
                    <div><button id="b2" type="button" onClick={this.showval}>Show</button></div>
                    <div><button id="b2" type="button" onClick={this.showval2}>Togle</button></div>
                    <div>
                        {/* with arrow functions there are no binding of "this".
                        In regular functions the this keyword represented the object that called the function
                        With arrow functions, the this keyword always represents the object that defined the arrow function
                        <div><button id="b3" type="button" onClick={this.regularfunction}>Show</button></div>*/}
                        <div><button id="b4" type="button" onClick={this.arrowfunction}>Togle</button></div>
                    </div>
                    {/* calling a function with params}*/}
                    <div><button id="b5" type="button" onClick={()=>this.paramfunc("Test one", " Two")}>Param func</button></div>
                    <div><button id="b6" type="button" onClick={(ev)=>this.paramfuncevent("Test one", " Two", ev)}>Param func event</button></div>
                    <div id="div1"></div>
                </div>) ;

    }

}


       ReactDOM.render(<Men test="woow" test2="xx" var1="8" show2={true}/>, document.getElementById('mydiv2'))

       ReactDOM.render(<MyForm />, document.getElementById('div6'));

</script>

<body>

        <div id="mydiv2"></div>
        <div id="div2"></div>

        <div id="div3"></div>
        <div id="div4"></div>

        <div id="div6"></div>

</body>
</html>

Important Code Samples

Wednesday, October 7, 2020

Postgress - Read a XML file from a postgress table XML column

Postgres Table/ Filed returns from a Function/ Procedure

Wednesday, June 10, 2020

React in a Single Page (All samples in W3Scool in one page)

Copy below HTML code into a HTML file which you like and run the HTML.

ex: Copy the code

create a test.html blank file in your PC

Paste the code and Run it.

Wednesday, March 25, 2020

Create a New User in SQL server and Grant only a Given DB Access only

Postgress - Read a XML file from a postgress table XML column