Posts

Hide , Show and Toggle in ReactJs

-
 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ show , setShow ]= useState ( true ) return (   <div>     {       show ? <h1> Hello Bhavesh </h1> : null     }     { /* <button onClick={()=>setShow(false)}>Hide</button>     <button onClick={()=>setShow(true)}>Show</button> */ } <button onClick = { () => setShow (! show ) } > Toggle </button>   </div> ) } export default App ;
Post a Comment
Read more

Get Input Box Value - React Js

-
 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ data , setData ]= useState ( null )   const [ print , setPrint ]= useState ( false ) function getInputValue ( val )   {     console . log ( val . target . value )     setData ( val . target . value )     setPrint ( false )   }   return (     <div className = "App" >       {         print ? <h1> { data } </h1> : null       }     { /* <h1>{data}</h1> */ }     <input type = "text" placeholder = "Enter Value" onChange = { getInputValue } />     <button onClick = { () => setPrint ( true ) } > Print Value </button>     </div>   ) } export default App ;
Post a Comment
Read more

React JS - State with class component

-
App.js -  import './App.css' ; import React , { useState , Component } from 'react' ; class App extends Component {   constructor (){     super ();     this . state ={ data : "Krishan" }   }   fun2 (){     this . setState ({ data : "Dev" })   }   render (){     return (       <div>         <h1> { this . state . data } </h1>         <button onClick = { () =>this . fun2 () } > Click Me </button>       </div>     )   } } export default App ;
Post a Comment
Read more

useState Example - React Js

-
  app.js: import logo from './logo.svg' ; import './App.css' ; import React , { useState } from 'react' ; function App () {   const [ data , setData ] = useState ( 0 )     function updateData (){     setData ( data + 1 )   }   return (     <div className = "App" >       <h1> { data } </h1> <button onClick = { updateData } > Click Me </button>     </div>   ); } export default App ;
Post a Comment
Read more

Create a REST API with Node js & Express

-
 app.js:-  const express = require ( "express" ); const http = require ( "http" ); require ( "./db/connection" ); const router = require ( "./api/emp/index" ) const employee = require ( "./api/emp/model" ); const app = express (); const server = http . createServer ( app ); const port = process . env . PORT || 3000 ; const ip = process . env . IP || "localhost" ; app . use ( express . json ()) app . use ( router ) server . listen ( port , ip , () => {     console . log ( "Express Server Listening on http://%s:%d" , ip , port ); }) --------------------------------- connection.js: const mongoose = require ( 'mongoose' ); mongoose . connect ( 'mongodb://127.0.0.1:27017/EMPDB' ). then (() => {     console . log ( "MongoDb Connection Sucessfull...." ); }). catch (( e ) => {     console . log ( "Mongodb connection Failed!!!" ); }) ------------------------------ Model...
Post a Comment
Read more

PHP Rest Search API through GET Method

-
 api-search.php: <?php header ( 'Content-Type: application/json' ); header ( 'Acess-Control-Allow-Origin: *' ); // $data=json_decode(file_get_contents("php://input"), true); // $search_value=$data['search']; $search_value = isset ( $_GET [ 'search' ]) ? $_GET [ 'search' ] : die (); include "config.php" ; $sql = " SELECT * FROM students WHERE student_name LIKE '%{ $search_value }%' " ; $result = mysqli_query ( $conn , $sql ) or die ( "SQL query failed" ); if ( mysqli_num_rows ( $result )> 0 ){     $output = mysqli_fetch_all ( $result , MYSQLI_ASSOC);     echo json_encode ( $output ); } else {     echo json_encode ( array ( 'message' => 'NO Search FOUND' , 'status' => false )); } ? >
Post a Comment
Read more

PHP Rest Search API through Post Method

-
 api-search.php: <?php header ( 'Content-Type: application/json' ); header ( 'Acess-Control-Allow-Origin: *' ); $data = json_decode ( file_get_contents ( "php://input" ), true ); $search_value = $data [ 'search' ]; include "config.php" ; $sql = " SELECT * FROM students WHERE student_name LIKE '%{ $search_value }%' " ; $result = mysqli_query ( $conn , $sql ) or die ( "SQL query failed" ); if ( mysqli_num_rows ( $result )> 0 ){     $output = mysqli_fetch_all ( $result , MYSQLI_ASSOC);     echo json_encode ( $output ); } else {     echo json_encode ( array ( 'message' => 'NO Search FOUND' , 'status' => false )); } ? >
Post a Comment
Read more

PHP Rest Delete API

-
 api-delete.php: <?php header ( 'Content-Type: application/json' ); header ( 'Acess-Control-Allow-Origin: *' ); header ( 'Access-Control-Allow-Methods: DELETE' ); header ( 'Access-Control-Allow-Headers: Access-Control-Allow-Headers, Content-Type, Access-Control-Allow-Methods, Authorization, X-Requested-With' ); $data = json_decode ( file_get_contents ( "php://input" ), true ); $student_id = $data [ 'sid' ]; include "config.php" ; $sql = " DELETE FROM students WHERE id = { $student_id } " ; if ( mysqli_query ( $conn , $sql )){     echo json_encode ( array ( 'message' => 'Student Record Deleted' , 'status' => true ));   } else {     echo json_encode ( array ( 'message' => 'Student Record Not Deleted' , 'status' => false )); } ? >
Post a Comment
Read more

Rest Update API PHP

-
 api-update: <?php header ( 'Content-Type: application/json' ); header ( 'Access-Control-Allow-Origin: *' ); header ( 'Access-Control-Allow-Methods: POST' ); header ( 'Access-Control-Allow-Headers: Access-Control-Allow-Headers, Content-Type, Access-Control-Allow-Methods, Authorization, X-Requested-With' ); $data = json_decode ( file_get_contents ( "php://input" ), true ); $id = $data [ 'sid' ]; $name = $data [ 'sname' ]; $age = $data [ 'sage' ]; $city = $data [ 'scity' ]; include "config.php" ; $sql = " UPDATE students SET student_name = '{ $name }', age = { $age }, city = '{ $city }' WHERE id = { $id } " ; if ( mysqli_query ( $conn , $sql )){     echo json_encode ( array ( 'message' => 'Student Record Updated' , 'status' => true )); } else {     echo json_encode ( array ( 'message' => 'Student Record Not Updated' , ...
Post a Comment
Read more

Insert Rest API PHP

-
Image
api-insert.php: -  <?php header ( 'Content-Type: application/json' ); header ( 'Access-Control-Allow-Origin: *' ); header ( 'Access-Control-Allow-Methods: POST' ); header ( 'Access-Control-Allow-Headers: Access-Control-Allow-Headers, Content-Type, Access-Control-Allow-Methods, Authorization, X-Requested-With' ); $data = json_decode ( file_get_contents ( "php://input" ), true ); $name = $data [ 'sname' ]; $age = $data [ 'sage' ]; $city = $data [ 'scity' ]; include "config.php" ; $sql = " INSERT INTO students(student_name, age, city) VALUES ('{ $name }', '{ $age }', '{ $city }') " ; if ( mysqli_query ( $conn , $sql )){     echo json_encode ( array ( 'message' => 'Student Record Inserted' , 'status' => true )); } else {     echo json_encode ( array ( 'message' => 'Student Record Not Inserted' , 'status' => false )...
Post a Comment
Read more

PHP REST API - Fetch Data from SQL Database

-
 api-fetch-all.php: <?php header ( 'Content-Type: application/json' ); header ( 'Acess-Control-Allow-Origin: *' ); include "config.php" ; $sql = " SELECT * FROM students " ; $result = mysqli_query ( $conn , $sql ) or die ( "SQL query failed" ); if ( mysqli_num_rows ( $result )> 0 ){     $output = mysqli_fetch_all ( $result , MYSQLI_ASSOC);     echo json_encode ( $output ); } else {     echo json_encode ( array ( 'message' => 'NO RECORD FOUND' , 'status' => false )); } ? > ------------------------- api-fetch-single.php: <?php header ( 'Content-Type: application/json' ); header ( 'Acess-Control-Allow-Origin: *' ); $data = json_decode ( file_get_contents ( "php://input" ), true ); $student_id = $data [ 'sid' ]; include "config.php" ; $sql = " SELECT * FROM students WHERE id = { $student_id } " ; $result = mysqli_query ( $conn , $sql ) or ...
Post a Comment
Read more

React Native Alert

-
Image
 App.js: import React from 'react' ; import { StyleSheet ,   View , Button , Alert } from 'react-native' ; const App = () => {     return (         < View style = { { flex : 1 } } >             < View >                 < Button title = "Single Alert" onPress = { () => alert ( 'Alert Tutorial by Krishan' ) } />             </ View >             < View style = { { marginTop : 10 } } >                 < Button title = 'Two Alert' onPress = { () => Alert . alert ( 'Alert Title' , "Alert Description" , [                     {                         text : 'Yes' ,               ...
Post a Comment
Read more

React Native | ImageBackground Component

-
Image
 App.js: import React from 'react' ; import { StyleSheet , Text , ImageBackground } from 'react-native' ; const bgImg ={ uri : 'https://reactjs.org/logo-og.png' } const bgImg1 = require ( './src/assets/images/sky.webp' ) const App = () => {     return (         < ImageBackground blurRadius = { 50 } source = { bgImg } style = { styles . container } >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > ActivityIndicator </ Text >                     </ ImageBackground >     ) } const styles = StyleSheet . create ({     container : {         flex : 1 ,     } }) export default App ;
Post a Comment
Read more

React Native | Activity Indicator Component

-
Image
 App.js: import React from 'react' ; import { View , StyleSheet , Button , Alert , Text , ActivityIndicator } from 'react-native' ; const App = () => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > ActivityIndicator </ Text >             < ActivityIndicator size = "large" color = "red" />         </ View >     ) } export default App ;
Post a Comment
Read more

React Native | Touchable Component

-
Image
 App.js: import React from 'react' ; import { Text , TouchableHighlight , TouchableOpacity , TouchableWithoutFeedback , View } from 'react-native' ; const App =() => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > React Native Touchable Component </ Text >             < TouchableHighlight onPress = { () => console . log ( 'Highlighted Clicked' ) } >                 < View style = { { width : 500 , height : 100 , backgroundColor : 'green' } } >                     < Text style = { { fontSize : 30 , textAlign : 'center' , verticalAlign : 'center' } } > TouchableHighlight </ Text >                 </ View >     ...
Post a Comment
Read more

React Native Image Component

-
Image
 App.js: import React from 'react' ; import { View , StyleSheet , Text , Image } from 'react-native' ; const App =() => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > Image Component in React Native </ Text >             < Image source = { { uri : 'https://images.unsplash.com/photo-1674582221299-3a930cbda1db?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80' , width : 500 , height : 200 } } />                   < Image source = { require ( './src/assets/images/sky.webp' ) } />         </ View >     ) } export default App ;
Post a Comment
Read more

React Native | State and Props in Class Component

-
Image
 App.js: import React , { Component } from 'react' ; import { Button , Text , TextInput , View } from 'react-native' ; import Student from './components/Student' ; class App extends Component {     constructor (){         super ();         this . state ={             name : "Krishan" ,         }     }     updateName ( val ){         this . setState ({ name : val })     }     fuit = () => {         console . warn ( "Apple" );     }     render () {         return (             < View >                 < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' , marginBottom : 10 } } > Class Component { this . state . name } </ Text > ...
Post a Comment
Read more