Yazar: admin

laravel react #3 – auth işlemi (kayıt, giriş, çıkış)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\User;
use Illuminate\Support\Carbon;
class AuthController extends Controller
{
    public function register(Request $request){
        $request->validate([
            'name'=>'required|string',
            'email'=>'required|string|email|unique:users',
            'password'=>'required|string|confirmed'
        ]);
 
        $user = new User([
            'name'=>$request->name,
            'email'=>$request->email,
            'password'=>md5($request->password)
        ]);
        $user = $user->save();
 
        $credentials = ['email'=>$request->email,'password'=>$request->password];
 
        if(!Auth::attempt($credentials)){
            return response()->json([
                'message'=>'Giriş Yapılamadı Bilgileri Kontrol Ediniz'
            ],401);
        }
        $user = $request->user();
 
        $tokenResult = $user->createToken('Personal Access');
        $token = $tokenResult->token;
        if($request->remember_me){
            $token->expires_at = Carbon::now()->addWeeks(1);
        }
        $token->save();
 
        return response()->json([
            'success'=>true,
            'id'=>$user->id,
            'name'=>$user->name,
            'email'=>$user->email,
            'access_token'=>$tokenResult->accessToken,
            'token_type'=>'Bearer',
            'expires_at'=>Carbon::parse($tokenResult->token->expires_at)->toDateTimeString()
        ],201);
    }
 
    public function login(Request $request){
        $request->validate([
            'email'=>'required|string|email',
            'password'=>'required|string',
            'remember_me'=>'boolean'
        ]);
        $credentials = request(['email','password']);
 
        if(!Auth::attempt($credentials)){
            return response()->json([
                'message'=>'Bilgiler Hatalı Kontrol Ediniz'
            ],401);
        }
 
        $user = $request->user();
        $tokenResult = $user->createToken('Personal Access Token');
        $token = $tokenResult->token;
        if($request->remember_me){
            $token->expires_at = Carbon::now()->addWeeks(1);
        }
        $token->save();
        return response()->json([
            'success'=>true,
            'id'=>$user->id,
            'name'=>$user->name,
            'email'=>$user->email,
            'access_token'=>$tokenResult->accessToken,
            'token_type'=>'Bearer',
            'expires_at'=>Carbon::parse($tokenResult->token->expires_at)->toDateTimeString()
        ],201);
    }
 
    public function logout(Request $request){
        $request->user()->token()->revoke();
        return response()->json([
            'message'=>'Çıkış Yapıldı'
        ]);
    }
 
    public function user(Request $request){
        return response()->json($request->user());
    }
 
    public function authenticate(Request $request){
        $user = [];
        if(Auth::check()){
            $user = $request->user();
        }
        return response()->json([
            'user'=>$user,
            'isLoggedIn'=>Auth::check()
        ]);
    }
}

react laravel ders #2 pasaport kurulumu

https://laravel.com/docs/8.x/passport

1
composer require laravel/passport

1
2
php artisan migrate
php artisan passport:install

models içindeki User.php dosyasına

1
use Laravel\Passport\HasApiTokens;

hemen altında use hasfactory ile başlayan yeri

1
use HasApiTokens,HasFactory, Notifiable;

yapıyoruz. bunların hepsi yukarıdaki laravel linkinde de mevcut.

config içinde auth.php dosyasına gelip api driver kısmına passport yazıyoruz.

1
2
3
4
5
'api' => [
            'driver' => 'passport',
            'provider' => 'users',
            'hash' => false,
        ],

react laravel ders #1 – kurulum

laraveli kurduk. sonra sırayla;

1
2
3
npm i
npm run watch // burada success dönecek mesajlar
npm i react react-dom --save-dev

1
npm install @babel/preset-react --save-dev --legacy-peer-deps

daha sonra webpack.mix.js içine

1
2
3
4
5
mix.js('resources/js/app.js', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

1
npm i react-router-dom --save

buraya kadar kurduk. şimdi merhaba yazdıralım. resources/js içine index.js oluştur. içine aşağıdaki kodları yaz.

1
2
3
4
5
6
7
8
9
import React, {Component} from "react";
import ReactDOM from 'react-dom';
class Index extends Component{
    render(){
        return (<div>Merhaba</div>)
    }
}
 
ReactDOM.render(<Index/>,document.getElementById("index"));

yine aynı klasördeki app.js içine

1
2
require('./bootstrap');
require('./Index');

index.blade.php oluştur view içine ona da

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <title>Deneme</title>
 
</head>
<body>
    <div id="index"></div>
    <script src="{{ asset("js/app.js") }}"></script>
</body>
</html>

web.php içine bütün routeları silerek

1
Route::view('/{path?}','index')->where('path','.+');

hepsi bu kadar

laravel 8 auth kurulumu

laravel 6ydı sanırım ondan sonra auth kurulumu biraz değiştirdiler. bootstrap, vue, react gibi işlerle kullanılır diye bir dizi yenilik getirdiler. amk götümüze zor geldiği için en başta isyan etsek de 12131 yıla bizde vue ve react ile kullanırız diye düşünüyorum.

bootstrap için

1
2
3
4
5
composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev

eğer kendi temanızı kullanacaksınız npm install npm run dev yapmayınız. boş halleri gelsin yeter.

react axios kurulumu

1
npm i axios --save

örnek json çıktı linki;

https://jsonplaceholder.typicode.com/photos

get örneği;

1
2
3
4
5
6
7
8
componentDidMount() {
      axios.get("https://jsonplaceholder.typicode.com/photos")
        .then((res)=>{
          console.log(res);
          console.log("asd");
        })
        .catch((e)=>console.log(e));
  }

post örneği

1
2
3
4
5
6
7
8
9
axios.post("https://jsonplaceholder.typicode.com/photos",{
        username:'c',
        'password':'123'
      })
        .then((res)=>{
          console.log(res);
 
        })
        .catch((e)=>console.log(e));

php baş harfi büyük yapma

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function ucwords_tr($gelen){
 
            $sonuc='';
            $kelimeler=explode(" ", $gelen);
 
            foreach ($kelimeler as $kelime_duz){
 
                $kelime_uzunluk=strlen($kelime_duz);
                $ilk_karakter=mb_substr($kelime_duz,0,1,'UTF-8');
 
                if($ilk_karakter=='Ç' or $ilk_karakter=='ç'){
                    $ilk_karakter='Ç';
                }elseif ($ilk_karakter=='Ğ' or $ilk_karakter=='ğ') {
                    $ilk_karakter='Ğ';
                }elseif($ilk_karakter=='I' or $ilk_karakter=='ı'){
                    $ilk_karakter='I';
                }elseif ($ilk_karakter=='İ' or $ilk_karakter=='i'){
                    $ilk_karakter='İ';
                }elseif ($ilk_karakter=='Ö' or $ilk_karakter=='ö'){
                    $ilk_karakter='Ö';
                }elseif ($ilk_karakter=='Ş' or $ilk_karakter=='ş'){
                    $ilk_karakter='Ş';
                }elseif ($ilk_karakter=='Ü' or $ilk_karakter=='ü'){
                    $ilk_karakter='Ü';
                }else{
                    $ilk_karakter=strtoupper($ilk_karakter);
                }
 
                $digerleri=mb_substr($kelime_duz,1,$kelime_uzunluk,'UTF-8');
                $sonuc.=$ilk_karakter.kucuk_yap($digerleri).' ';
 
            }
 
            $son=trim(str_replace('  ', ' ', $sonuc));
            return $son;
 
        }
        function kucuk_yap($gelen){
 
            $gelen=str_replace('Ç', 'ç', $gelen);
            $gelen=str_replace('Ğ', 'ğ', $gelen);
            $gelen=str_replace('I', 'ı', $gelen);
            $gelen=str_replace('İ', 'i', $gelen);
            $gelen=str_replace('Ö', 'ö', $gelen);
            $gelen=str_replace('Ş', 'ş', $gelen);
            $gelen=str_replace('Ü', 'ü', $gelen);
            $gelen=strtolower($gelen);
 
            return $gelen;
        }

react native konum izleme ve marker olarak ekleme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity,
    PermissionsAndroid,
    Platform
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
import MapView from "react-native-map-clustering";
 
import  {PROVIDER_GOOGLE,Marker,Polygon,Circle} from 'react-native-maps';
import NativePermissionsAndroid from "react-native/Libraries/PermissionsAndroid/NativePermissionsAndroid";
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount = async () =>{
 
    if(Platform.OS == 'android'){
      const response = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
         'title':'MapsAndGeo',
         'message':"Konumunuzu istiyoruzzz"
      })
 
    }else{
      Geolocation.requestAuthorization();
    }
 
    Geolocation.getCurrentPosition(
        position => {
          const { coords:{latitude,longitude}} = position;
          this.setState( {latitude,longitude})
          console.log(latitude)
        },
        error => {
          console.log(error)
        }
    );
 
       // bu da farklı bir izlemeyi durdurma seçeneği
 
  }
 
  componentWillMount() {
    Geolocation.clearWatch(this.watchID) // farklı bir sayfaya geçtiğimizde izleme durdurulacak
  }
 
  
 
  render(){
    const { latitude,longitude } = this.state;
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: latitude,
              longitude: longitude,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
            showsUserLocation={true}
          //  followUserLocation={true}
        >
          <Marker coordinate={{latitude,longitude}} />
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 800,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

react native map clustering

1
npm install react-native-map-clustering --save

import ederken önceki MapView’i silmeyi unutma

1
import MapView from "react-native-map-clustering";

örnek mapview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            initialRegion={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.515,
              longitudeDelta: 0.0121,
            }}
        >
          <Marker coordinate={{latitude: 41.0538531, longitude: 28.805605}} />
          <Marker coordinate={{latitude: 41.0577531, longitude: 28.808605}} />
          <Marker coordinate={{latitude: 41.0518531, longitude: 28.801605}} />
          <Marker coordinate={{latitude: 41.0588531, longitude: 28.801105}} />
 
        </MapView>

react native maps drag ile koordinat alma

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
          <Marker
              draggable={true}
              onDrag={(e) =>console.log(e.nativeEvent.coordinate)}
              onDragStart={(e) =>console.log(e.nativeEvent.coordinate)}
              onDragEnd={(e) =>alert(e.nativeEvent.coordinate.latitude)}
              title={"212"}
              description={"AVM"}
              coordinate={{
                latitude: 41.0538531,
                longitude: 28.805605,
                latitudeDelta: 0.015,
                longitudeDelta: 0.0120,
              }} >
 
          </Marker>
        </MapView>

react native map circle kullanımı

1
2
3
4
5
6
7
8
9
<Circle
                 onPress={()=>alert('tıklandı')}
                 strokeWidth={3}
                 strokeColor={"red"}
                 radius={100}
                 fillColor={"yellow"}
                 center={{latitude: 41.051873, longitude: 28.809529}}
 
             />