Mern stack from scratch الجزء الثاني


فهاد الجزء الثاني من Mern stack from scratch غادي نزيدو les routes ديالنا من بعد غادي ندوزوا ل frontend ونزيدو react ونبداو نزيدوا les components ديالنا.

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


1- إضافة les routes ديالنا


غادي نزيدوا dossier جديد سميه routes فيه زيد fichier جديد سميه note.routes.js فيه غادي يكونوا les routes ديالنا.

أول حاجة كنسترجع les fonctions لي زدنا فل controlleur من بعد كنزيد les routes ديالي وكل واحد كنعطيه ل url ول fonction لي غادي تنفذ فاش نمشي لداك ل url.

منبعد كنديرلو ل export باش كنخدم به فل fichier index.js.

دبا يلا درتي ف cmd ل commande :

nodemon 

غادي يعطيك رسالة فيها connécté مع قاعدة البيانات ويلا مشيتي للرابط :


غادي يعطيك array خاوية حيت معندا حتى note فقاعدة البيانات.

الكود ديال الملف هو :

                                    
                                        //
const express = require('express');

const { getAllNotes, addNote, updateNote, deleteNote, noteById } = require('../controllers/note.controller');


const noteRoutes = express.Router();

noteRoutes.get('/notes', getAllNotes);
noteRoutes.post('/notes/add', addNote);
noteRoutes.put('/notes/:id', updateNote);
noteRoutes.delete('/notes/:id', deleteNote);
noteRoutes.get('/notes/:id', noteById);


module.exports = {
    noteRoutes
}
                                    
                                

2- إضافة react ل projet ديالنا


منبعد غادي نزيدو react ل projet ديالنا غادي نزيدو dossier سميه frontend فيه غادي تدير ل commande :

create-react-app 

من بعد ميتزاد كلشي غادي ن installer axios و react-router-dom باش نزيد les routes ديالي :


دير la commande :

npm i axios react-router-dom


منبعد ميتزادو زيد dossier جديد ف frontend سميه components غادي تزيد فيه fichier سميه AddNotes.jsx.


فيه الفورم لي غادي يمكنا من إضافة note جديدة  كنسترجع القيم من الحقول ومنبعد كنرسلهم ل route


 http://localhost:3200/notes/add 


لي سبق وزدنا.


الكود ديال الملف هو :


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

export default class AddNotes extends Component {

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            body: ''
        }
    }

    handleInputChange = event => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    handleFormSubmit = event => {
        event.preventDefault();
        const note = {
            title: this.state.title,
            body: this.state.body
        }
        axios.post('http://localhost:3200/notes/add', note)
            .then(res => {
                this.setState({
                    title: '',
                    body: ''
                });
                this.props.history.push('/');
            }).catch(err => console.log(err));
    }

    render() {
        return (
            <div className="container">
                <div className="row my-4">
                    <div className="col-md-6 mx-auto">
                        <div className="card bg-light">
                            <div className="card-header">Ajouter une note</div>
                            <div className="card-body">
                                <form method="post" onSubmit={this.handleFormSubmit}>
                                    <div class="form-group">
                                        <label for="">Titre*</label>
                                        <input
                                            onChange={this.handleInputChange}
                                            value={this.state.title}
                                            type="text"
                                            name="title" id=""
                                            required class="form-control" placeholder="Titre" />
                                    </div>
                                    <div class="form-group">
                                        <label for="">Description*</label>
                                        <textarea
                                            onChange={this.handleInputChange}
                                            value={this.state.body}
                                            class="form-control" required name="body" id="" rows="3" placeholder="Description"></textarea>
                                    </div>
                                    <div className="form-group">
                                        <button className="btn btn-primary" type="submit">Valider</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
                                    
                                

3- إضافة component ل EditNote


دائما ف components غادي تزيد فيه fichier جديد سميه EditNote.jsx.


فيه الفورم لي غادي يمكنا من تعديل note أول حاجة كنسترجع note بل id ديالها من بعد كنعرض القيم فالفورم .

منبعد كنسترجع القيم من الحقول وكنرسلهم ل route


 http://localhost:3200/notes 


لي سبق وزدنا مع ل id ديال ال note لي غادي تعدل.


الكود ديال الملف هو :

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

export default class EditNote extends Component {

    constructor(props) {
        super(props);
        this.state = {
            note: {
                title: '',
                body: ''
            }
        }
    }

    componentDidMount() {
        axios.get(`http://localhost:3200/notes/${this.props.match.params.id}`)
            .then(res => {
                console.log(res.data);
                this.setState({
                    note: res.data.note
                })
            }).catch(err => console.log(err));
    }

    handleTitleInputChange = event => {
        let oldNote = this.state.note;
        oldNote.title = event.target.value;
        this.setState({
            note: oldNote
        })
    }

    handleBodyInputChange = event => {
        let oldNote = this.state.note;
        oldNote.body = event.target.value;
        this.setState({
            note: oldNote
        })
    }

    handleFormSubmit = event => {
        event.preventDefault();
        const note = {
            title: this.state.note.title,
            body: this.state.note.body
        }
        axios.put(`http://localhost:3200/notes/${this.props.match.params.id}`, note)
            .then(res => {
                this.setState({
                    title: '',
                    body: ''
                });
                this.props.history.push('/');
            }).catch(err => console.log(err));
    }

    render() {
        return (
            <div className="container">
                <div className="row my-4">
                    <div className="col-md-6 mx-auto">
                        <div className="card bg-light">
                            <div className="card-header">Modifier une note</div>
                            <div className="card-body">
                                <form method="post" onSubmit={this.handleFormSubmit}>
                                    <div className="form-group">
                                        <label htmlFor="">Titre*</label>
                                        <input
                                            onChange={this.handleTitleInputChange}
                                            value={this.state.note.title}
                                            type="text"
                                            name="title" id=""
                                            required className="form-control" placeholder="Titre" />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="">Description*</label>
                                        <textarea
                                            onChange={this.handleBodyInputChange}
                                            value={this.state.note.body}
                                            className="form-control" required name="body" id="" rows="3" placeholder="Description"></textarea>
                                    </div>
                                    <div className="form-group">
                                        <button className="btn btn-primary" type="submit">Valider</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
                                      
                                    

4- إضافة component ل Menu


دائما ف components غادي تزيد فيه fichier جديد سميه Menu.jsx.


فيه غادي تكون ل Menu ديالنا لي غادي يكونوا فيها الروابط لي غادي نحتاجوا.


الكود ديال الملف هو :



                                        
                                            //
import React from 'react';
import { Link } from 'react-router-dom';

export default function Menu() {
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <Link className="navbar-brand" to="/">Notes App</Link>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div className="navbar-nav">
                    <Link className="nav-item nav-link active" to="/">Notes <span className="sr-only">(current)</span></Link>
                    <Link className="nav-item nav-link" to="/add/note">Ajouter Une Note <span className="sr-only"></span></Link>
                </div>
            </div>
        </nav>
    )
}
                                        
                                    

كلمات مفاتيح :