PS Web Concepts

Friday, 9 October 2020

Rename app tital & package name in react native

Video :

https://www.youtube.com/watch?v=xqUqi3lqLHw

Doc:

https://www.npmjs.com/package/react-native-rename

Manual :

https://dev.to/karanpratapsingh/quick-guide-for-updating-package-name-in-react-native-3ei3

Friday, 25 September 2020

Use History in react

import { useHistory } from "react-router-dom";


function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Thursday, 24 September 2020

Load More in react

import React from 'react';

import { NavLink } from 'react-router-dom';

import './assets/css/bootstrap.css'; 

import './assets/css/styles.css';

import './assets/css/custom.css';

import Hlogo from  './assets/images/hlogo.png';

import Footer from  './include/Footer';

class News extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      items: [],

      visible: 10,

      error: false

};

    this.loadMore = this.loadMore.bind(this);

}

  loadMore() {

    this.setState((prev) => {

      return {visible: prev.visible + 10};

});

}

  componentDidMount() {

    fetch("https://msaini.in.net/api/newsList").then( 

      res => res.json()

    ).then(res => {

      this.setState({

        items: res

});

    }).catch(error => {

      console.error(error);

      this.setState({

        error: true

});

});

}

  render() {

  return (

<>

<div className="header sticky" id="myHeader"> 

<img src={Hlogo} className="hbg" />

<div class="searchbox" id="latestmessage">

  <input type="text" name="search" id="search" value=" ram aram saa"  />

</div>

</div>   

<div class="hspace">--</div> 

<section class="content newsboxlist">

{this.state.items.slice(0, this.state.visible).map((item, index) => {

              return (

<div className="listItem">

<NavLink exact to={'/newsdetail/'+item.id} > 

<div className="newsList">

<div className="nwsDtl1" style={{ padding:"5px" }}>

<table style={{ width:"100%" }} >

    <tbody>

<tr>

<td  style={{ width:"15%" }}   >

<img src={item.path} alt="news logo" className="newsImg" /> 

</td>

<td  style={{ paddingLeft:"5px", color: "#000", fontSize:"16px", width:"85%", verticalAlign:"top" }} >

{ item.title }

</td> 

</tr>

</tbody>

</table>  

</div>

</div> 

</NavLink>

</div>

);

})}

<div id="load_more">

<center>

{this.state.visible < this.state.items.length &&

             <button onClick={this.loadMore} type="button" className="load-more">Load More </button>

}

</center>

</div>

</section>

    <Footer/>

</>

);

}

}

export default News;

Codeignioter Code : 

Wednesday, 23 September 2020

Routing with peramiter

import React from 'react';

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './assets/css/bootstrap.css';
import './assets/css/custom.css';
import News from  './News';
import Team from  './Team';
import Newspost from  './Newspost';
import Newsdetail from  './Newsdetail';
import FileUploadForm from  './FileUploadForm';

import Error from  './Error';

function App() {
 

  return (
    <> 
    <BrowserRouter>
    <Switch>
      <Route exact path="/" component={News} ></Route>
      <Route path="/newsdetail/:id" component={Newsdetail} ></Route>
      <Route path="/team" component={Team} ></Route>
      <Route path="/newspost" component={Newspost} ></Route>
      <Route path="/fileUploadForm" component={FileUploadForm} ></Route>
      
      <Route component={Error} ></Route>
    
    </Switch>
    </BrowserRouter>
    
    </>
  );
}

export default App;




Use Links : -

<NavLink exact to={'/newsdetail/'+post.id} > </NavLink>

Data get with codeigniter

import React, { useState, useEffect } from 'react';

import { NavLink } from 'react-router-dom';

import './assets/css/bootstrap.css';

import './assets/css/custom.css';

import NewsLogo from './assets/images/news.jpg';

import Header from  './include/Header';

import axios from 'axios'; 

function News() {

  const [posts , setPosts] = useState([])

  useEffect( () => {

    axios

    .get('https://msaini.in.net/api/newsList')

    .then(function (response) {

      // handle success

      console.log(response);

      setPosts(response.data)

})

    .catch(function (error) {

      // handle error

      console.log(error);

})

  },[])

  return (

<>

    <div className="top-container topbar">

     <Header/>

<section className="content listSecBox" id="results">

{ posts.map(post => ( 

<div className="listItem"  >

<NavLink exact to={'/newsdetail/'+post.id} > 

      <div className="newsList" >

        <div className="news-img"> 

            <img src={post.path} width="100" height="50" alt="news logo" /> 

        </div> 

        <div className="nws-dtl">  

        {post.id} { post.title }

        </div>

      </div>

</NavLink>

</div> 

))}

</section>

        <center><div className="loadmore" onclick="autoloaddata();"> और देखने के लिए क्लिक करे <i class="fa fa-search" aria-hidden="true"></i></div></center>

    </div>

</>

);

}

export default News;

Codeigniter Code : -

Data post with image & php

import React from 'react'

import axios from 'axios';

class FileUploadForm extends React.Component {

    UPLOAD_ENDPOINT = 'http://aagajkiaawaj.com/react_api/product/upload.php';
    constructor(props) {
        super(props);
        this.state ={
          file:null
        }  
        this.onSubmit = this.onSubmit.bind(this)
        this.onChange = this.onChange.bind(this)
        this.uploadFile = this.uploadFile.bind(this)
    }
    async onSubmit(e){
        e.preventDefault() 
        let res = await this.uploadFile(this.state.file);
        console.log(res.data);
    }
    onChange(e) {
        this.setState({file:e.target.files[0]})
    }
    async uploadFile(file){
        

        const formData = new FormData();
        
        formData.append('avatar',file)
        formData.append('name',document.getElementById('name').value)
        
        return  await axios.post(this.UPLOAD_ENDPOINT, formData,{
            headers: {
                'content-type': 'multipart/form-data'
            }
        });
      }
    
      render() {
        return (
          <form onSubmit={ this.onSubmit }>
            <h1> React File Upload Example</h1>
            <input type="text" name="name" id="name" />
            <input type="file" onChange={ this.onChange } />
            <button type="submit">Upload File</button>
          </form>
       )
      }
        
}

export default FileUploadForm;



Php Code : 

<?php header('Content-Type: application/json; charset=utf-8'); header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: PUT, GET, POST"); /* @session_start(); echo 'aaaaaaa'; if($_REQUEST['name']!=''){ echo $_SESSION['name'] = $_REQUEST['name']; }else{ echo $_SESSION['name']; } */ $response = array(); $upload_dir = 'uploads/'; $server_url = 'http://aagajkiaawaj.com/react_api/product/'; if($_FILES['avatar']) { $avatar_name = $_FILES["avatar"]["name"]; $avatar_tmp_name = $_FILES["avatar"]["tmp_name"]; $error = $_FILES["avatar"]["error"]; if($error > 0){ $response = array( "status" => "error", "error" => true, "message" => "Error uploading the file!" ); }else { $random_name = rand(1000,1000000)."-".$avatar_name; $upload_name = $upload_dir.strtolower($random_name); $upload_name = preg_replace('/\s+/', '-', $upload_name); if(move_uploaded_file($avatar_tmp_name , $upload_name)) { $response = array( "status" => "success", "error" => false, "name" => $_POST['name'], "message" => "File uploaded successfully", "url" => $server_url."/".$upload_name ); }else { $response = array( "status" => "error", "error" => true, "message" => "Error uploading the file!" ); } } }else{ $response = array( "status" => "error", "error" => true, "message" => "No file was sent!" ); } echo json_encode($response); ?>

Data Post with fetch api & codeigniter

import React, { useState } from 'react';

import './assets/css/bootstrap.css';
import './assets/css/custom.css';
import Header from  './include/Header';

function Newspost() {

const [result, setResult] = useState("hhhhhh");

  const onSubmits = (event) =>{
    event.preventDefault();
   
    const postData = {
      title: document.getElementById("title").value,
      detail: document.getElementById("detail").value
      };
   
      /* 
      axios.post(`https://msaini.in.net/api/newsInsert`,postData)
      .then(res => {
        console.log(res);
        setResult(res);
      }
      
      )
   */

  fetch('https://msaini.in.net/api/newsInsert', {
    method: 'POST',
    body: JSON.stringify({
      title: document.getElementById("title").value,
      detail: document.getElementById("detail").value
    })
  })
  .then(res => res.json())
  .then(data => {
    console.log(data);
    setResult(data.message);
  }) 
  .catch(err => console.log(err));
  
};
     
  return (
    <>
    <div classNameName="top-container topbar">
    
     <Header/>
      
<section classNameName="content listSecBox" id="results">
<form onSubmit={onSubmits} > 
<div className="space60"></div>
<center>
<div className="title_bar"> 
  <a href="#"> News Form 1 </a>
</div> 
  <p className="alert">{ result}</p>
</center> 
       <div className="form-submit1">
                
        <div className="form-group">  
                  
        <div className="input-group date">       
        <div className="input-group-addon"><b>*फोटो 1 के लिए क्लिक करे 👉</b> </div>         
        <input type="file" className="form-control" name="path"     />
        </div>
        
        </div>

       <div className="form-group">
          <textarea name="title" id="title" rows="1" className="form-control" placeholder="* न्यूज़ हेडिंग यहाँ डाले  "></textarea>
               </div>
       
         <div className="form-group">
          <textarea name="detail" id="detail" rows="10" className="form-control" placeholder="* पूरी न्यूज़ यहाँ डाले " required></textarea>
               </div>
       
       </div> 
          <div className="footer">
            
       <div className="error"><span> Required Field Empty!!</span></div>
   
     <input className="form-control button ui primary fluid" type="submit" name="submit" value=" Submit " />
     
        </div>
       
  <div className="space100"></div>
  </form>  
</section>
 
    </div>
    </>
  );
}

export default Newspost;

Codeigniter :-

function newsInsert(){ $data = json_decode(file_get_contents("php://input")); $insertData = array( "title" => $data->title, "detail" => $data->detail ); $lastInsert = $this->Api_model->insertNews($insertData); $response = array( "title" => $data->title, "error" => false, "message" => "News successfully send." ); echo json_encode($response); }

Tuesday, 15 September 2020

Webview in react native

Create Project....................................

Cmd : npx react-native init Projectname

Webview -------------------------------------------

https://blog.logrocket.com/the-complete-guide-to-react-native-webview/

Cmd

yarn add react-native-webview

npx react-native link react-native-webview

//This is an example code to understand WebView//

import React, { Component } from 'react';

//import react in our code.

import { WebView } from "react-native-webview";

//import all the components we are going to use.

export default class App extends Component {

render() {

return (

<WebView

source={{uri: 'https://eleader.in/'}}

style={{marginTop: 0}}

);

}

add this code

android/src/AndroidManifest.xml

android:icon="@mipmap/ic_launcher" After

android:usesCleartextTraffic="true"

-----------------------------------------------------------

Build Bundle & Apk in React Native

https://www.youtube.com/watch?v=SzwTGDDXTAE

Doc :

https://reactnative.dev/docs/signed-apk-android

keytool -genkeypair -v -keystore aagajkiaawaj.keystore -alias aagajkiaawaj -keyalg RSA -keysize 2048 -validity 20000

Build Apk......................

cd android

gradlew assembleRelease

Build Bundle......................

cd android

gradlew bundleRelease

----------------------------