Απορία για μικρό PHP πρότζεκτ

Jordan95 · 9 Ιουλίου 2019

Καλησπερα παιδια,

Εκανα προσφατα ενα μικρο προτζεκτ γεματο ατελειες και λαθακια, στο οποιο ηθελα να προσομοιασω καπως αυτην τη διαδικασια που γινεται στα εκλογικα τμηματα, οταν πας να ψηφισεις και ο δικαστικος αντιπροσωπος με το στυλο και με το χαρακα σβηνει καποια στοιχεια σου απο εναν καταλογο και γραφει καποια αλλα στοιχεια σου σε εναν αλλο καταλογο.

Δλδ, ηθελα να το φτιαξω ετσι ωστε αυτη η διαδικασια να γινεται αυτοματα και να χρησιμοποιησω το AJAX (χρησιμοποιησα το XHR Object) για αυτον το σκοπο.

Ουσιαστικα το εκανα για να δω 1) πώς δουλευουν καποιες τεχνολογιες (AJAX, PHP) στις οποιες δεν εχω μεγαλη εμπειρια και 2) πώς θα μπορουσα να χρησιμοποιησω αλλες τεχνολογιες οι οποιες πιθανως να ειναι πιο αποδοτικες.

Το προτζεκτ μπορειτε να το βρειτε εδω: https://github.com/Giordanidis/Voting-System.

Και οι λειτουργιες του ειναι:

1) Προσθηκη νεου χρηστη (ψηφοφορου) στη βαση

2) Προβολη ολων των ψηφοφορων απο τη βαση

3) Προβολη ολων των ψηφοφορων που εχουν ψηφισει

4) Αναζητηση αναμεσα στους ψηφοφορους (αυτο δεν εχει καποια σχεση με τη βαση γιατι γινεται μονο με JS)

Καθως το προχωρουσα μου γεννηθηκαν καποιες αποριες, οποτε σκεφτηκα να ποσταρω εδω, ωστε να διαβασω και πιθανες παρατηρησεις κλπ.

1) Οταν παω να διαβασω τους ψηφοφορους απο τη βαση ωστε να τους εμφανισω, κανω ενα XHR (για να διαβασω τους ψηφοφορους), αλλα στη συνεχεια, μεσα σε αυτο το XHR κανω ακομα ενα XHR. Αυτο το κανω γιατι θελω διπλα σε καθε ψηφοφορο να υπαρχει ενα κουμπι που να λεει "Vote" και οταν το πατας να γινεται αιτημα στη βαση και η βαση να ενημερωνεται και να επιστρεφεται το αποτελεσμα, ωστε να ενημερωνεται και η σελιδα. Κατι τετοιο ειναι επιτρεπτο/σωστο; Το να γινεται ενα XHR μεσα σε ενα αλλο;

2) Θα ηθελα να κανω το ιδιο προτζεκτ χρησιμοποιωντας μονο τεχνολογιες της JS. Αυτο, πώς ακριβως μπορω να το κανω; Τωρα χρησιμοποιω για το Server την PHP και για τη βαση τη MySQL. Θα μπορουσα να χρησιμοποιησω Node.js και MongoDB, ή κανω λαθος; Αν δεν κανω λαθος, τί αλλο θα χρειαζομουν;

Επεξ/σία 9 Ιουλίου 2019 από Jordan95

sarakinos · 20 Ιουλίου 2019

Για το 1) θα χρειαστεί να βάλεις έναν event listener πάνω σε κάθε κουμπί vote για να τρέχεις το vote action. Οπότε τρέχει ένα ajax για να σου φέρει όλες τις γραμμές με τους voters, κάθε γραμμή έχει το vote button τις μορφής

<td>
  <span>Voters Name</span>
  ...
  ...
  ...
  <button data-voters-id="12345">Vote</button>
</td>

Στο data attribute θα μπορούσες να βάλεις το id του voter. Ο event listener θα είναι της μορφής ( με jquery )

$('body').on('click', '.voting-button', function() {
	
	let votersId = $(this).data('voters-id');

	$.ajax({...})

});

Δεν κατάλαβα ακριβώς την ερώτησή σου βέβαια οπότε αν δεν σε κάλυψα δώσε μου ένα παράδειγμα

Θα μπορούσες να κάνεις το ίδιο πράγμα σε Nodejs με expressjs. Για την βάση θα μπορούσες να χρησιμοποιήσεις mongodb ή mysql.

Jordan95 · 24 Ιουλίου 2019

Ευχαριστω πολυ για την απαντηση!

Ουσιαστικα το κανω οπως το ειπες, υπαρχει ενα XHR το οποιο χρησιμοποιω για να φερω ολες τις γραμμες με τους ψηφοφορους, και μετα υπαρχει μια λουπα, οπου για καθε ψηφοφορο βαζω εναν Event Listener στο κουμπι Vote.

Χρησιμοποιω το XHR και οχι jQuery, η απορια μου ηταν αν γενικοτερα το παρακατω κομματι κωδικα ειναι σωστο (ολοκληρο εδω), ή καλυτερα, αν ειναι περισσοτερο πολυπλοκο αποτι θα επρεπε.

            let xhr1 = new XMLHttpRequest();

            xhr1.open("GET", "registered_voters.php", true);

            xhr1.onload = function(){
                if(this.status == 200){
                    // console.log(this.responseText);
                    // If DB is empty
                    if(this.responseText == "0"){
                        // console.log("Empty DB!");
                        let output = "<tr><td colspan='11' class='alert alert-danger text-center'>No Registered Users Found.</td></tr>";
                        document.getElementById("registered_voters").innerHTML = output;
                    
                    }
                    else{
                        // Fetch Voters
                        let registered_voters = JSON.parse(this.responseText);
                        // console.log(registered_voters);

                        // Voters Number
                        let votersNum = registered_voters.length;
                        // console.log(votersNum);

                        // Output = Table Body
                        let output = "";
                        
                        // Product Output
                        for(let i=0; i<votersNum; i++){
                            output += "<tr>" +
                                "<td id='id-" + (i+1) + "'>" + (i+1) + "</td>" +
                                "<td id='sid-" + registered_voters[i].sid + "'>" + registered_voters[i].sid + "</td>" +
                                "<td>" + registered_voters[i].surname + "</td>" +
                                "<td>" + registered_voters[i].name + "</td>" +
                                "<td>" + registered_voters[i].fname + "</td>" +
                                "<td>" + registered_voters[i].mname + "</td>" +
                                "<td>" + registered_voters[i].city + "</td>" +
                                "<td>" + registered_voters[i].address + "</td>" +
                                "<td>" + registered_voters[i].mrn + "</td>";

                                // If they have voted, produce a disabled checkbox
                                if(registered_voters[i].voted == "true"){
                                    output += "<td>" +
                                    "<input type='checkbox' id='checkbox-" + (i+1) + "' checked disabled>" + 
                                    "</td>" + 
                                    "<td>" + 
                                    "<form action='add_vote.php' id='addVote-" + (i+1) + "' method='POST'>" +
                                    "<input type='submit' value='VOTED' disabled>" +
                                    "</form>" +
                                    "</td>";
                                }
                                // Else, product a clickable checkbox
                                else{
                                    output += "<td>" +
                                    "<input type='checkbox' id='checkbox-" + (i+1) + "'>" + 
                                    "</td>" +
                                    "<td>" + 
                                    "<form action='add_vote.php' id='addVote-" + (i+1) + "' method='POST'>" +
                                    "<input type='submit' value='VOTE'>" +
                                    "</form>" +
                                    "</td>";
                                }
                        }
                        
                        // Assign the output to the registered voters table body
                        document.getElementById("registered_voters").innerHTML = output;
                        // Add submit event listeners for each voter
                        for(let i=0; i<votersNum; i++){
                            document.getElementById("addVote-"+(i+1)).addEventListener("submit", (e) => {
                                e.preventDefault();
                                
                                let theyAreSure = confirm("Are You Sure?");
                                
                                if(theyAreSure){
                                    let sid = document.getElementById("sid-" + registered_voters[i].sid).innerText;
                                    let voted = document.getElementById("checkbox-" + (i+1)).checked;

                                    let params =
                                        "sid=" + sid +
                                        "&voted=" + voted;
                                
                                    let xhr2 = new XMLHttpRequest();

                                    xhr2.open("POST", "add_vote.php", false);

                                    xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                                    xhr2.onload = function(){
                                        console.log(this.responseText);
                                    }
                                    xhr2.send(params);

                                    window.location.reload();
                                }
                            })    
                        }
                    }
                }
            }
            xhr1.send();

Ευχαριστω πολυ και παλι.

EDIT: Link σε περιπτωση που καποιος ενδιαφερθει να το τσεκαρει: http://elections-voting-system.000webhostapp.com/index.html

Επεξ/σία 24 Ιουλίου 2019 από Jordan95

sarakinos · 28 Ιουλίου 2019

Μπορείς να βγάλεις τους event listeneres έξω από το callback και να γράψεις μόνο έναν όπως σου έδειξα παραπάνω.

Επίσης μπορείς να χρεισημοποιήσεις fetch για το request σου, template literals για να τυπώσεις το markup σου, και να σπάσει λίγο ακόμη τον κώδικά σου

Δες ένα μικρό παράδειγμα ( το πιθανότερο είναι να μην τρέχει το έγραψα εδώ στο πόδι αλλά ελπίζω να σου δώσει ένα hint για τον τρόπο που θέλω να σου δείξω )

    fetch('http://localhost/registered_voters.php')
    .then(function(response) {
        return response.json()
    })
    .then(function(registeredVoters) {
        if(data) {
            printRegisteredVotersMarkup(registeredVoters)
        }
    })
    
    function printRegisteredVotersMarkup(registeredVoters) {
        //Print markup...

        //Add the event listener
        document.addEventListener('click', function(event) {
            if (event.target.id == 'addVote') {
                //Get sid
                let sid = event.target // get sid from data-sid
                vote(sid)
            }
        });
    }

    fucntion vote(sid) {
        fetch('http://localhost/add_vote.php', 
            method: 'POST',
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({sid: sid})
        ).then(function(response) {
            //Handle response here...
        });
    }