Laravel & React 5

Bu bölümde applicationumuza react-reouter kütüphanesini ekleyip basit route işlemlerini ön tarafata yapacağız.
npm install react-router-dom

projeme dahil ediyorum.

Bir başka terminal banch i açarak
npm run watch komutunu çalıştıracağım. Bu komut bizim için ön tarafdaki değişiklikleri izleyecek ve bundle aktaracak.Bundle yığın anlamına geliyor için gerek js doslarım vs bulunuyor. WepPack bunları ihtiyaç haline göre derliyor.

resource/js/app.js componentimi modifiye edeceğim.
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import Example from './components/Example';

render(<Example/>,document.getElementById('example'));

Bu şekilde modifiye ettik.

example id sine sahip html elementini Example componenti ile Dom edeceğim diyorum.

Şimdi example componentimizi biraz daha düzenleyelim.
import React, { Component } from 'react';

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>

<div className="card-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}

sss

if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
satırlarını kaldırdık.
Çünkü render işlemini app.js de yapıyorum ve Example componentini çağırıyorum.

php artisan serve

komutu ile projemizi çalıştalım.
Componentim gözüküyor sorun yok.

Components klasorume yeni bir Master componenti oluşturalım.
import React, {Component} from 'react';
import { Link } from 'react-router-dom';

class Master extends Component {
render(){
return (
<div className="container">
<ul>
<li><Link to="/examle" replace>Example</Link></li>
<li><Link to="/create-item" replace>Create Item</Link></li>
</ul>
<div>
{this.props.children}
</div>
</div>
)
}
}
export default Master;
app.js değiştirelim.
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import Example from './components/Example';
import Master from './components/Master';

render(<Master />, document.getElementById('example'));

Yeni bir component
import React, {Component} from 'react'; class CreateItem extends Component { render() { return ( <div> <h1>Create An Item</h1> <form> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Item Name:</label> <input type="text" className="form-control" /> </div> </div> </div> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Item Price:</label> <input type="text" className="form-control col-md-6" /> </div> </div> </div><br /> <div className="form-group"> <button className="btn btn-primary">Add Item</button> </div> </form> </div> ) } } export default CreateItem;
createıtem componenti

app.js yi yine değiştirelim.
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route, HashRouter, Link } from 'react-router-dom';
import ReactDOM from 'react-dom';

import Example from './components/Example';
import Master from './components/Master';
import CreateItem from './components/CreateItem';

ReactDOM.render(
<HashRouter>
<div>
<div>
<Master />
</div>
<div>
<Route path="/examle" component={Example}/>
<Route path="/create-item" component={CreateItem} />
</div>
</div>
</HashRouter>,
document.getElementById('example'));
React router ile Laravel router ın çakışmasını Hashrouter mekanızmassını kullarak çözdüm. HashRouter ı Laravel anlayamaz ama react anlar.

Şimdi CreateItem componentime event ekleyelim ki inputlarda değişiklik olduğunu anlayabilsin ve ardında axios ile post işlemlerine başlayalım.

import React, {Component} from 'react';
import Axios from 'axios';

class CreateItem extends Component {
constructor(props) {
super(props);
this.state = {
productName: '',
productPrice: ''
};
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);


}
handleChange1(e) {
this.setState({
productName: e.target.value
});
}
handleChange(e) {
this.setState({
[e.target.id ] : e.target.value
})
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state)
// const products = {
// name: this.state.productName,
// price: this.state.productPrice
// }
// Axios.post('/items').then(response=> {
// console.log('succes');
// }).catch(err=>{
// console.log(err);
// })
}
render() {
return (
<div>
<h1>Create An Item</h1>
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Item Name:</label>
<input type="text" className="form-control" onChange={this.handleChange1} />
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Item Price:</label>
<input type="text" className="form-control col-md-6" id='productPrice' onChange={this.handleChange}/>
</div>
</div>
</div><br />
<div className="form-group">
<button className="btn btn-primary">Add Item</button>
</div>
</form>
</div>
)
}
}
export default CreateItem;
creaItem componentin düzenlenmiş hali

Laravel ile Back-End yapma işlemlerine başlayalım. Bu projemizde wep router i kullanacağız. Çünkü hashRouter ile herşeyi aslında biz welcome.blade wiew den hallediyoruz. Single page app olduğu için bütün işlemler ana sayfada componentler arasında gerçekleşecek.
 Biz CRUD operasyonlanları yapacağız. Bunun için öncelikle bir model scheması tanımlamamız gerekiyor. Ardından Controller ve routes işlemlerini api tarafından yapmamız lazım.

php artisan make:model Item -m
komutunu çalıştırıyoruz. Bu bize iki tane dosya açıyor.
1.Model dosyası
2.Migration Dosyası (Migration dosyları veri tabanında table oluşturmaya yarardı.)

Şimdi migrations dosyasını aşağıdaki kodlar ile düzenleyiniz. Migraitons dosyaları database klasörünün altında bulunur.Düzenleyeceğiniz migrations dosyasının adıda create_items_table
public function up()
{
Schema::create('items', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->integer('price');
$table->timestamps();
});
}
Satırlarını ekleyiniz.
php artisan migrate
ardından yukarıdaki komut ile veritabanına tabloyu oluşturunuz.
php artisan make:controller ItemController --resource
Komutu ile controller sınıfımızı oluşturuyoruz.Bütün CRUD işlemlerini burada yapacağız.
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Item;

class ItemController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$items = Item::all();
return response()->json($items)
//index methodu Tüm itemları döner
}

/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$item = new Item([
'name' => $request->get('name'),
'price' => $request->get('price')
]);
$item->save();
return response()->json('Başarılı bir şekilde eklendi');
}

/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$item = Item::find($id);
return response()->json($item);
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$item = Item::find($id);
$item->name = $request->get('name');
$item->price = $request->get('price');
$item->save();
return response()->json('Update işlemi başarılı');
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$item = Item::find($id);
$item->delete();

return response()->json('Silme işlemi başarılı');
}
}
itemController komutları.

Item.php modelinde $fillable  alanını oluşturmamız lazım. Bu işlem verileri direk alanlarına eklenmesini sağlıyor.

wep.php route ye gidiyoruz ve routemizi aşağıdaki gibi düzenliyoruz.
Route::resource('items','ItemController');
//1. link
//2. Controller

Şimdi ekeleme işlemini deneyeniz. Eğer hata alıyorsanız. CORS dan kaynaklı hata alıyoruz.

import React, {Component} from 'react';
import Axios from 'axios';

class CreateItem extends Component {
constructor(props) {
super(props);
this.state = {
productName: '',
productPrice: ''
};
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);


}
handleChange1(e) {
this.setState({
productName: e.target.value
});
}
handleChange(e) {
this.setState({
[e.target.id ] : e.target.value
})
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state)
const products = {
name: this.state.productName,
price: this.state.productPrice
}
let link = '/items';
Axios.post(link,products).then(response=> {
console.log('succes');
}).catch(err=>{
console.log(err);
})
}
render() {
return (
<div>
<h1>Create An Item</h1>
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Item Name:</label>
<input type="text" className="form-control" onChange={this.handleChange1} />
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Item Price:</label>
<input type="text" className="form-control col-md-6" id='productPrice' onChange={this.handleChange}/>
</div>
</div>
</div><br />
<div className="form-group">
<button className="btn btn-primary">Add Item</button>
</div>
</form>
</div>
)
}
}
export default CreateItem;

import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import TableRow from './TableRow';

class DisplayItem extends Component {
constructor(props) {
super(props);
this.state = {value:'', items:''};
}
componentDidMount() {
axios.get('/items').then(response=> {
this.setState({ items:response.data});
}).catch(err=> {
console.log(err);
})
}
tabRow(){
if(this.state.items instanceof Array) {
return this.state.items.map((object, i)=> {
return <TableRow obj={object} key={i} />;
})
}
}
render(){
return(
<div>
<h1>Items</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/#/create-item">Add item</Link>
</div>
</div>
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Item Name</td>
<td>Item Price</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}
export default DisplayItem;

// EditItem.js

import React, {Component} from 'react';
import axios from 'axios';
import { Link,Redirect } from 'react-router-dom';

class EditItem extends Component {
constructor(props) {
super(props);
this.state = {name: '', price: ''};
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
console.log('Constructer çalıştı');
}

componentDidMount(){
axios.get(`http://localhost:8000/items/${this.props.match.params.id}/edit`)
.then(response => {
this.setState({ name: response.data.name, price: response.data.price });
})
.catch(function (error) {
console.log(error);
})
console.log('componentDidMount çalıştı');

}
handleChange1(e){
this.setState({
name: e.target.value
})
}
handleChange2(e){
this.setState({
price: e.target.value
})
}

handleSubmit(event) {
event.preventDefault();
const products = {
name: this.state.name,
price: this.state.price
}
let uri = '/items/'+this.props.match.params.id;
axios.patch(uri, products).then((response) => {
return <Redirect to="/display-item" />
});
}
render(){
console.log('render çalıştı');

return (
<div>
<h1>Update Item</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/display-item" className="btn btn-success">Return to Items</Link>
</div>
</div>
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Item Name</label>
<input type="text"
className="form-control"
value={this.state.name}
onChange={this.handleChange1} />
</div>

<div className="form-group">
<label name="product_price">Item Price</label>
<input type="text" className="form-control"
value={this.state.price}
onChange={this.handleChange2} />
</div>

<div className="form-group">
<button className="btn btn-primary">Update</button>
</div>
</form>
</div>
)
}
}
export default EditItem;

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Laravel & React 1

Resim
    Bu seride back-end tarafında php Laravel kullanan Front-End tarafın da ise React kullanan bir uygulama geliştireceğiz.   Öncelikle php kullanabilmemiz için yani php kodlarını local bilgisayarımızın derleyebilmesi için php server kurmamız gerekiyor. Bunun için Xamp kullanabiliriz. Xamp Adresi:  https://www.apachefriends.org/tr/download_success.html  JavaScript tarafında bu işlemi Node Js ile yapıyorduk. Burada Xamp İle yapacağız. Xampı kurarken kurduğunuz diskte anadizini seçmeyi unutmayın.  Daha sonra composer yüklememiz gerekiyor. Bu paket yükleyicisi tıpkı bizim JavaScripte kullandığımızı npm(node packed manager) gibi. Composer yüklemek için : https://getcomposer.org/download/ Composer 'ı kurarken kurulum yaptığınız yerin xampın içindeki php olmasına dikkat edin. Composer'i kurduktan sonra artık Command Line 'ımıza Composer komutları yazabileceğiz. Şimdi cmd imizi açalım ve bilgisayarımıza global Laravel 'i yükleyelim. Komutlarım : ...
Devamı

React ile Kişisel Blog Sayfası Oluşturma 1

Yapılacaklar : React kurulum ve Router işlemleri , Materialize.css kütüphanesi ve Header Componentinin tasarlanması. Blog adında bir klasör oluşturun içine Server  klasörü ve : npm create-react-app Client komutlarını yazın.  Server klasörümüzde back - end tarafımız olacak. Client  te ise front-end bölümleri olacak. Component oluşturup bu komponentleri react-router-dom kullanarak app de çağırma işlemi yapacağız. Src nin içine Component klasörü oluşturun. Ve component klasörün içine şimdilik şu 3 tane componentleri oluşturdum.  src/component/Header.js import React , { Component } from 'react' ; class Header extends Component { render (){ return ( < div > Header </ div > ) } } export default Header ; src/component/Landing.js import React , { Component } from 'react' ; class Landing extends Component { render () { return ( < div > AnaSayfa diyelim mi bea </ div > ) } ...
Devamı

Github' a proje atma (Visual Studio Code ile)

Resim
Öncelikle bir github hesanızın olması ve giriş yapmış olmanız gerekmekte. Giriş yaptıktan sonra Sol taraftan New seçilir.  Repository name Hangi isim ile tutulacağıdır. Description ise açıklama alanı create repository Dediğimizde yeni bir repository alanı oluşur. Açılan Açılan bu sayfada ki böülüm hangi yol haritasını izlememiz gerektiğini bize söyler; …or create a new repository on the command line echo "# PersonelBlogWithReactAndExpress" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/abdullahsuhaisk/PersonelBlogWithReactAndExpress.git git push -u origin master commend line kısmına sırası ile şu adımlar izlenir: Benim kullanı git init => projemize .git adında dosya kurar yapılan değişiklikler düzenlenmeleri vs kaydeder. git add . => Canta gibi düşünüyorum ben bunu yapılan değişikliklerimi çantama ekliyorum. git commit -m "Commite isim ver" => Daha...
Devamı