Kategori: Uncategorized

base64 to pdf view gösterme – json jquery

merhabalar

elimizde bir çok faturanın listelendiği bir sayfa olsun. görüntüle diyince modal ile o pdf gösterilsin istiyoruz. base64 kodlarını da sayfaya doldurmak istemiyoruz. yapacağımız iş basit.

görüntüle butonuna onclick yazıp 1 değere faturanın modal idsi olacak. bu id, modal’ın bodysine yazdığın id. Unutma bunu. Onun yanında apiden base64 kodu almak için ya da neyse boşverin bunları.

ben size base64 kodunu pdfye dönüştüreyim sorunuz olursa iletirsiniz.

1
2
3
4
5
6
base = answer.base64x;
                       var base = "base64kodu";
                        $("<iframe width='100%' height='100%' />") // create an iframe
                            // add the source
                            .attr('src', 'data:application/pdf;base64,' + base)
                            .appendTo(viewid);

viewid, id değeri verdiğiniz herhangi bir div olabilir.

tablolar arası ilişkide sorguyu yazmadan otomatik gelmesini istiyorsak

1
2
3
4
5
6
7
8
9
10
11
protected $with = ['class','section'];
 
    public function class ()
    {
        return $this->belongsTo(Classes::class, 'class_id');
    }
 
    public function section()
    {
        return $this->belongsTo(Section::class, 'section_id');
    }

 

laravel sürüme göre kurma (5-6-7-8 sürümünü kurma)

1
composer  create-project laravel/laravel yourNameProject  "8.*"

sondaki yıldız o sürümün en son versiyonunu belirtir. örneğin 8.* yıldızın karşılığı yanlış hatırlamıyorsam 8.6. Laravel 9 sonrası ihtiyaç olabilir diye yazıvereyim dedim. yoksa heryerde yazıyor zaten

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 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}}
 
             />

react native maps marker basit işlemler

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
                onPress={()=>alert("Marker Tıklandı")}
                onDrag={()=>alert("kaydırma")}
                onDragEnd={()=>alert("kaydırma bitti")}
                draggable={true}
                title={"212"}
                description={"AVM"}
                pinColor={"blue"}
                opacity={0.5}
                coordinate={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }} />
        </MapView>

react native sign up tasarımı

 

yukarıdaki ekranı oluşturmak için kullanılan kodlar

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
import React from 'react';
import {View, StyleSheet,Text,Image,TextInput} from "react-native";
import { SafeAreaView } from "react-navigation";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/FontAwesome5";
export default class Login extends React.Component{
    render() {
        return (
           <SafeAreaView style={style.body}>
             <ScrollView>
                <View style={style.header}>
                    <Text style={style.title}>Sign In</Text>
                </View>
                <View style={style.logo_area}>
                    <Image source={require('../../../assets/images/home.png')} />
                </View>
                <View style={style.board}>
                      <View style={style.item}>
                          <TextInput
                            placeholder={"Username"}
                            style={style.input} />
                      </View>
                      <View style={style.item}>
                        <TextInput
                          placeholder={"Password"}
                          style={style.input} />
 
                          <TouchableOpacity style={{position:'absolute',right:15,top:-33}}>
                              <Icon name={"eye-slash"} size={20} />
                          </TouchableOpacity>
                      </View>
                      <View style={[style.item,{flexDirection:'row',justifyContent: 'flex-end'}]}>
                          <Text style={{ color: "#525464",fontSize: 15 }}>Forgot your password?</Text>
                      </View>
                      <View style={style.item}>
                          <TouchableOpacity style={style.button}>
                              <Text style={style.button_text}>Login</Text>
                          </TouchableOpacity>
                      </View>
                      <View style={[style.item,{justifyContent: 'center',alignItems:'center'}]}>
                        <Text style={{ color: "#525464",fontSize: 15 }}>Or</Text>
                      </View>
                      <View style={style.social}>
                          <TouchableOpacity style={style.social_item}>
                            <Icon name={"facebook-f"} color={"#3b5999"} size={20}/>
                          </TouchableOpacity>
                        <TouchableOpacity  style={style.social_item}>
                            <Icon name={"twitter"} color={"#55acee"} size={20}/>
                        </TouchableOpacity>
                        <TouchableOpacity  style={style.social_item}>
                            <Icon name={"linkedin-in"} color={"#0077B5"} size={20}/>
                        </TouchableOpacity>
                      </View>
 
                      <View style={[style.item,{justifyContent: 'center',alignItems:'center'}]}>
                        <TouchableOpacity>
                          <Text style={{fontSize:17,fontWeight:'400'}}>Dont have an account? <Text style={{color:'#FFB19D'}}>Sign Up</Text></Text>
                        </TouchableOpacity>
                      </View>
                </View>
 
 
             </ScrollView>
           </SafeAreaView>
        )
    }
}
const style = StyleSheet.create({
    body:{backgroundColor:'white',flex:1},
    header:{padding:25,justifyContent:'center',alignItems:'center'},
    title:{fontWeight:'500',fontSize:20,color:'#525464'},
    logo_area:{alignItems: 'center',marginTop:40},
    board:{marginTop:10,paddingHorizontal:30,paddingTop:20},
    item:{marginBottom:20},
    social_item:{padding:10,borderWidth: 1,borderColor:'#E2E2E0',width:100,height: 60,justifyContent:'center',alignItems:'center'},
    social:{flexDirection:'row',justifyContent:'space-around',marginBottom: 20},
    button_text:{color:'white',textAlign:'center',fontSize:17,fontWeight: '700'},
    button:{backgroundColor:'#20C3AF',padding:15,borderRadius:5,justifyContent: 'center',alignItems:'center'},
    input:{borderWidth:1,borderColor:'#B0B0C3',backgroundColor: '#F7F7F7',paddingVertical: 10,paddingHorizontal:30,height:50}
})

react bir buton ile değer gönderme

çok basitçe anlatıcam,

1
2
3
4
5
6
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Detail',{
                            id:5,
                            name:'Cafer'
                        })}>
                            <Text>Detaya Git</Text>
                        </TouchableOpacity>

ilgili Detail içine gelip;

1
2
3
componentDidMount() {
        alert(this.props.navigation.getParam("name"));
    }