to do uygulaması flutter

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ToDo Uygulaması",
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alışveriş Listesi'),
      ),
      body: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatefulWidget {
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  TextEditingController t1 = TextEditingController();
  List alisverisListesi = [];
 
  elemanEkle() {
    setState(() {
      alisverisListesi.add(t1.text);
      t1.clear();
    });
  }
 
  elemanCikar() {
    setState(() {
      alisverisListesi.remove(t1.text);
      t1.clear();
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Flexible(
            child: ListView.builder(
              itemCount: alisverisListesi.length,
              itemBuilder: (context, indeksNumarasi) => ListTile(
                subtitle: Text("Alışveriş Listesi"),
                title: Text(alisverisListesi[indeksNumarasi]),
              ),
            ),
          ),
          TextField(
            controller: t1,
          ),
          ElevatedButton(onPressed: elemanEkle, child: Text("Ekle")),
          ElevatedButton(onPressed: elemanCikar, child: Text("Çıkar"))
        ],
      ),
    );
  }
}

flutter taslak

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hesap Makinesi',
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  const Iskele({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Basit Hesap Makinesi"),
      ),
      body: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatefulWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  num sayi1, sayi2, sonuc;
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: [
            
          ],
        ),
      ),
    );
  }
}

flutter ders 3

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "İlkel Blog Uygulaması",
      home: Iskele(),
    );
  }
}
 
class Iskele extends StatelessWidget {
  const Iskele({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Blog Uygulaması"),
        ),
        body: AnaEkran());
  }
}
 
class AnaEkran extends StatefulWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  _AnaEkranState createState() => _AnaEkranState();
}
 
class _AnaEkranState extends State<AnaEkran> {
  String blogYazisi = "Caferito";
 
  martGoster() {
    setState(() {
      blogYazisi = "Mart Sayısı";
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(blogYazisi),
            RaisedButton(
              onPressed: martGoster,
              child: Text("Mart Yazısı"),
            )
          ],
        ),
      ),
    );
  }
}

flutter örnek kod 2

kodu al, aşağıdaki siteye yapıştır örneği göreceksin. çok çok basit bir uygulama örneği. sadece ekrana ampül gibi lorem ipsum yapıştırıyor o kadar.
https://dartpad.dev/

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "İlkel Blog Uygulaması",
      home: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatelessWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Blog Uygulaması"),
      ),
      body: Container(
        margin: EdgeInsets.all(50),
        child: Center(
          child: Text(
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'),
        ),
      ),
    );
  }
}

flutter örnek kod giriş

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
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "İlkel Blog Uygulaması",
      home: AnaEkran(),
    );
  }
}
 
class AnaEkran extends StatelessWidget {
  const AnaEkran({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Blog Uygulaması"),
      ),
      body: Container(
        child: Center(
          child: Text('Merhaba'),
        ),
      ),
    );
  }
}

laravel voyager ders #1 – kurulum

wordpress mantığı şeklinde bişi yapmıyorsanız ki çoğu zaman yapmıyoruz bu yüzden o kadar kullanışlı değil ya da ben yapamadım.

1
composer require tcg/voyager

veritabanı ayarları yaptıktan sonra voyager ile gelen migrate dosyalarını kuruyoruz

1
php artisan voyager:install

giriş için kullanıcı oluşturma

1
php artisan voyager:admin your@email.com --create

şifreyi o isteyecek o ekranda girebilirsin.

servis dosyaları config klasöründe gözüksün isterseniz;

1
2
php artisan vendor:publish --provider="TCG\Voyager\VoyagerServiceProvider"
php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

Route yapısını kendi route.phpye ekliyor.

1
2
3
Route::group(['prefix' => 'admin'], function () {
    Voyager::routes();
});

şunu da bir yapın

1
php artisan storage:link

react mobx jwt encode jwt decode

1
npm i mobx mobx-react --save

1
npm i crypto-js jwt-encode jwt-decode --save

1
npm i crypto-browserify --save

package json dosyası içinde en alta

1
2
3
"browser":{
"crypto":false
}

webpack.min.js içine açıklama satırından sonra

1
2
3
4
5
6
7
module.exports = {
resolve: {
       fallback:{
          "crypto":false
}
}
}

laravel react #3 – auth giriş çıkış sayfaları hazırlama

bir sonraki derste lazım olacağı için yup ve formik kurmamız gerekiyor.

1
2
npm i yup
npm install formik --save

geçen login klasörün içine index js oluşturmuştuk. onun içine şöyle yazabiliriz

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
import React from "react";
import { Link } from 'react-router-dom'
 
const Login = () => {
    return <div style={{ minWidth:340,textAlign:'center'}}>
                <form className="form-signin">
                    <img className="mb-4" src="https://getbootstrap.com/docs/4.4/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"/>
                    <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
                    <label htmlFor="inputEmail" className="sr-only">Email address</label>
                    <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required=""
                           autoFocus=""/>
                    <label htmlFor="inputPassword" className="sr-only">Password</label>
                    <input type="password" id="inputPassword" className="form-control" placeholder="Password"
                           required=""/>
                    <div className="checkbox mb-3">
                        <label>
                            <input type="checkbox" value="remember-me"/> Remember me
                        </label>
                    </div>
                    <button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                    <hr/>
                    <Link to="/register">Kayıt Ol</Link>
                    <p className="mt-5 mb-3 text-muted">© 2017-2019</p>
                </form>
            </div>
};
 
export default Login;

register içindeki indexjs e ise

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
import React from "react";
import {Link} from "react-router-dom";
const Register = () => {
    return <div style={{ minWidth:340,textAlign:'center'}}>
        <form className="form-signin">
            <img className="mb-4" src="https://getbootstrap.com/docs/4.4/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"/>
            <h1 className="h3 mb-3 font-weight-normal">Hemen Kayıt Ol</h1>
            <label htmlFor="inputEmail" className="sr-only">Ad Soyad</label>
            <input type="text" id="inputEmail" className="form-control" placeholder="Ad Soyad" required=""
                   autoFocus=""/>
            <label htmlFor="inputEmail" className="sr-only">Email Adres</label>
            <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required=""
                   autoFocus=""/>
            <label htmlFor="inputPassword" className="sr-only">Şifre</label>
            <input type="password" id="inputPassword" className="form-control" placeholder="Password"
                   required=""/>
            <label htmlFor="inputPassword" className="sr-only">Şifre Tekrarı</label>
            <input type="password" id="inputPassword" className="form-control" placeholder="Password"
                   required=""/>
            <div className="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me"/> Remember me
                </label>
            </div>
            <button className="btn btn-lg btn-primary btn-block" type="submit">Kayıt Ol</button>
            <hr/>
            <Link to="/login">Giriş</Link>
            <p className="mt-5 mb-3 text-muted">© 2017-2019</p>
        </form>
    </div>
};
 
export default Register;

biliyorsunuz ilk derslerde normal resources içindeki view içinde index.blade sayfamıza da

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title>Deneme</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <div id="index"></div>
    <script src="{{ asset("js/app.js") }}"></script>
</body>
</html>

bu şekilde dışarda css de çağırabiliyoruz.

laravel react #3 – auth işlemleri react uyarlama

önce js içine views diye bir klasör açıp içine login,register ve index klasörü oluşturup içlerinde index.js oluşturuyoruz. içlerine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
const Index = () => {
    return <div>Burası Index</div>
};
 
export default Index;
 
----------------------
import React from "react";
const Login = () => {
    return <div>Burası Login</div>
};
 
export default Login;
 
--------------------------
 
import React from "react";
const Register = () => {
    return <div>Burası Register</div>
};
 
export default Register;

ayrı ayrı ekliyoruz. sonra js klasöründe yer alan index.js dosyasının içine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, {Component} from "react";
import ReactDOM from 'react-dom';
import Main from './Router';
import { BrowserRouter,Route } from "react-router-dom";
 
class Index extends Component{
    render(){
        return (
            <BrowserRouter>
                <Route component={Main} />
            </BrowserRouter>
        )
    }
}
 
ReactDOM.render(<Index/>,document.getElementById("index"));

js klasörü içine bir de Router.js oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import { Route,Switch} from 'react-router-dom';
 
 
import FrontIndex from './Views/Index'
import FrontLogin from './Views/Login'
import FrontRegister from './Views/Register'
 
const Main = () => (
    <Switch>
        <Route exact path="/" component={FrontIndex} />
        <Route path="/login" component={FrontLogin} />
        <Route path="/register" component={FrontRegister} />
    </Switch>
);
 
export default Main;

bu kadar. sıradaki dersten devam

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()
        ]);
    }
}