CRUD APPLICATION ب LARAVEL & REACT الجزء الثاني


فهاد الجزء الثاني من crud application ب laravel و react غادي نشوفوا كيفاش نزيدو ل contact فقاعدة البيانات وأيضا عرض جميع les contacts فالصفحة الرئيسية ثم إضافة روابط التعديل و الحذف.

نظرة سريعة بالفيديو

1- إضاقة react routes

 باش نزيدو react routes غادي تدير ل commande :

npm install react-router-dom

حيت غادي نخدموا ب axios باش نديرو des requêtes http غادي تدير هاد ل commande :

npm install axios

منبعد غادي نزيدو les routes ديالنا فسبق وزدنا قبل فل web.php الكود بلي غادي نخدموا ب react routes.

منبعد غادي تمشي ل ressources/js تما غادي تزيد fichier سميه index.js فيه les routes ديالنا لي كيديو ل des components لي غادي نزيدوهم من بعد.

الكود لي غادي تزيد ف index.js هو :



                                //
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
import Home from './components/Home';
import Add from './components/Add';
import Edit from './components/Edit';

 export default class Index extends Component {

    render(){
        return(
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/add" exact component={Add}/>
                    <Route path="/:id/edit" exact component={Edit}/>
                </Switch>
            </BrowserRouter>
        )
    }

 }



if (document.getElementById('app')) {
    ReactDOM.render(
        <Index/>
    , document.getElementById('app'));
}
                            

2- تعديل الملف app.js

من بعد غادي نديروا تعديل على الملف app.js لي كاين فنفس dossier كنسترجع الملف index.js لي زدنا باش ل app تخدم به.

الكود لي غادي تزيد ف app.js هو :

                                //app.js

require('./bootstrap');

require('./index');
                            

3- عرض les contacts فالصفحة الرئيسية

دائما ف dossier js زيد fichier جديد سميه Home.js فيه غادي تكون عندي array contacts لي غادي تاخد les contacts من بعد مكنسترجعهم بواسطة ل fonction componentDidMount لي كتنفذ فاش كتشارجا الصفحة الرئيسية.

منبعد عندي ل fonction deleteContact لي كتمسح contact من array contacts ومن قاعدة البيانات.

وفالأخير كنعرض les contacts من ل array contacts وكنزيد معاهم روابط  الإضافة التعديل والحذف.

الكود ديال Home.js هو :


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

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            contacts : []
        }
        this.deleteContact = this.deleteContact.bind(this);
    }
    componentDidMount(){
        Axios.get('/api/contacts').then(response => {
            this.setState({
                contacts: response.data
            })
        }).catch(err => {
            console.log(err);
        })
    }
    deleteContact(id){
        const contactsUpdated = this.state.contacts.filter(contact => {
            return contact.id !== id
        });
        this.setState({
            contacts : contactsUpdated
        })
        Axios.delete(`/api/contact/${id}/delete`)
            .then(response => console.log(response));
    }
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Tous mes contacts</div>
                            <Link to="/add" className="btn btn-primary col-md-3 m-2 btn-sm mr-2">Ajouter</Link>
                            <div className="card-body">
                                <table className="table table-striped
                                    table-inverse">
                                    <thead className="thead-inverse">
                                        <tr>
                                            <th>Nom & Prénom</th>
                                            <th>Téléphone</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            {
                                                this.state.contacts !== null
                                                      ? this.state.contacts.map(contact => (
                                                            <tr key={contact.id}>
                                                                <td scope="row">{contact.name}</td>
                                                                <td>{contact.tel}</td>
                                                                <td>
                                                                    <Link to={`/${contact.id}/edit`} className="btn btn-warning btn-sm mr-2">Modifier</Link>
                                                                    <a href="#" onClick={() => this.deleteContact(contact.id)} className="btn btn-danger btn-sm">Supprimer</a>
                                                                </td>
                                                            </tr>
                                                        ))
                                                    : null
                                            }
                                        </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;
                            

4- إضافة contact

دائما ف dossier js زيد fichier جديد سميه Add.js فيه الفورم لي غادي تمكن من الإضافة.

عندي les champs لي مربوطين ب des fonctions لي بهم كنسترجع القيم لي دخل المستخدم.

من بعد عندي ل fonction handleFormSubmit لي كتاخذ القيم وكتصيفطهم ل route لي سبق وزدنا منبعد كنوجه المستخدم للصفحة الرئيسية.

الكود ديال Add.js هو :

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


export default class Add extends Component {

    constructor(props){
        super(props);
        this.state = {
            name : '',
            tel : ''
        }
        this.handleNameInputChange = this.handleNameInputChange.bind(this);
        this.handleTelInputChange = this.handleTelInputChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleNameInputChange(event){
        // console.log(event.target.value);
        this.setState({
            name : event.target.value
        })
    }

    handleTelInputChange(event) {
        // console.log(event.target.value);
        this.setState({
            tel: event.target.value
        })
    }

    handleFormSubmit(event){
        event.preventDefault();
        axios.post('/api/contact/create',{
            name : this.state.name,
            tel : this.state.tel
        }).then(response => {
            console.log(response);
            this.setState({
                name : '',
                tel : ''
            });
            this.props.history.push('/');
        }).catch(err => {
            console.log(err);
        })
    }

    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Ajouter un contact</div>

                            <div className="card-body">
                                <form onSubmit={this.handleFormSubmit} className="col-md-8 mx-auto">
                                    <fieldset className="form-group row">
                                        <label htmlFor="inputName" className="col-sm-1-12 col-form-label">Nom & Prénom</label>
                                        <div className="col-sm-1-12">
                                            <input type="text"
                                                required
                                                className="form-control"
                                                name="name" id="name"
                                                placeholder="Nom & Prénom"
                                                onChange={this.handleNameInputChange}
                                                value={this.state.name}
                                            />
                                        </div>
                                    </fieldset>
                                    <fieldset className="form-group row">
                                        <label htmlFor="inputName" className="col-sm-1-12 col-form-label">Téléphone</label>
                                        <div className="col-sm-1-12">
                                            <input type="tel"
                                                required
                                                className="form-control"
                                                name="tel" id="tel"
                                                placeholder="Téléphone"
                                                onChange={this.handleTelInputChange}
                                                value={this.state.tel}
                                            />
                                        </div>
                                    </fieldset>
                                    <div className="form-group">
                                        <div className="col-sm-1-12">
                                            <button type="submit" className="btn btn-primary">Valider</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

// export default Add;
if (document.getElementById('app')) {
    ReactDOM.render(<Add />, document.getElementById('app'));
}
                                

5- تعديل contact

دائما ف dossier js زيد fichier جديد سميه Edit.js فيه الفورم لي غادي تمكن من التعديل

أول حاجة كنسترجع ل contact لي غادي نعدل وكنزيدو فالفورم.

من بعد عندي les champs لي مربوطين ب des fonctions لي بهم كنسترجع القيم الجداد لي دخل المستخدم.

من بعد عندي ل fonction handleFormSubmit لي كتاخذ القيم وكتصيفطهم ل route لي سبق وزدنا منبعد كنوجه المستخدم للصفحة الرئيسية.

اما بالنسبة لعرض les contacts فكيكفي باش تزيد رابط css فل header ديال الملف welcome.blade.php :

<"{{('link rel="stylesheet" href="{{asset('css/app.css>

ورابط الملف js قبل</body>

<script src="{{asset('js/app.js')}}"></script>

الكود ديال Edit.js هو :

                                    //
import React, { Component } from 'react';

class Edit extends Component {

    constructor(props){
        super(props);
        this.state = {
            name : '',
            tel : ''
        }
        this.handleNameInputChange = this.handleNameInputChange.bind(this);
        this.handleTelInputChange = this.handleTelInputChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }
    componentDidMount() {
        const id = this.props.match.params.id;
        axios.get(`/api/contact/${id}/edit`).then(response => {
            this.setState({
                name : response.data.name,
                tel : response.data.tel
            })
        })
    }
    handleNameInputChange(event){
        // console.log(event.target.value);
        this.setState({
            name : event.target.value
        })
    }

    handleTelInputChange(event) {
        // console.log(event.target.value);
        this.setState({
            tel: event.target.value
        })
    }

    handleFormSubmit(event){
        event.preventDefault();
        axios.put(`/api/contact/${this.props.match.params.id}/update`,{
            name : this.state.name,
            tel : this.state.tel
        }).then(response => {
            console.log(response);
            this.setState({
                name : '',
                tel : ''
            });
            this.props.history.push('/');
        }).catch(err => {
            console.log(err);
        })
    }

    render() {
        console.log(this.props.match.params.id);
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Modifier un contact</div>

                            <div className="card-body">
                                <form onSubmit={this.handleFormSubmit} className="col-md-8 mx-auto">
                                    <fieldset className="form-group row">
                                        <label htmlFor="inputName" className="col-sm-1-12 col-form-label">Nom & Prénom</label>
                                        <div className="col-sm-1-12">
                                            <input type="text"
                                                required
                                                className="form-control"
                                                name="name" id="name"
                                                placeholder="Nom & Prénom"
                                                onChange={this.handleNameInputChange}
                                                value={this.state.name}
                                            />
                                        </div>
                                    </fieldset>
                                    <fieldset className="form-group row">
                                        <label htmlFor="inputName" className="col-sm-1-12 col-form-label">Téléphone</label>
                                        <div className="col-sm-1-12">
                                            <input type="tel"
                                                required
                                                className="form-control"
                                                name="tel" id="tel"
                                                placeholder="Téléphone"
                                                onChange={this.handleTelInputChange}
                                                value={this.state.tel}
                                            />
                                        </div>
                                    </fieldset>
                                    <div className="form-group">
                                        <div className="col-sm-1-12">
                                            <button type="submit" className="btn btn-primary">Modifier</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Edit;
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد