Een webapp maken van kras met behulp van Python Flask en MySQL deel 4

In het vorige deel van deze tutorialserie hebben we de vereiste functionaliteit geïmplementeerd voor een ingelogde gebruiker om een ​​wens toe te voegen. We hebben ook gezien hoe de wensen van een gebruiker op de startpagina van de gebruiker kunnen worden weergegeven.

In dit deel zullen we de functionaliteit implementeren voor het bewerken en verwijderen van de wensen die door een gebruiker zijn ingevoerd.

Ermee beginnen

Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part3.git

Nadat de broncode is gekloond, navigeert u naar de projectdirectory en start u de webserver. 

cd PythonFlaskMySQLApp_Part3 python app.py

Richt uw browser op http: // localhost: 5002 / en u zou de applicatie moeten laten draaien.

De verlanglijst bewerken

Stap 1: geef het bewerkingspictogram weer

We binden de ontvangen gegevens al met behulp van jQuery aan onze HTML. We zullen die code aanpassen en jQuery-sjablonen gebruiken om het eenvoudiger te maken om gegevens te binden. We voegen ook een toe Bewerk pictogram in onze HTML om een ​​manier te bieden om de wens bij te werken. Open userHome.html en een verwijzing naar jQuery-sjablonen bevatten.

Verwijder het bestaande list-groep div en vervang het door de volgende HTML-code:

Binnen in de UL met klasse list-groep we zullen onze gegevens binden. Definieer een listTemplate zoals getoond in de body van de HTML:

Wijzig de jQuery AJAX succes callback om de gegevens te binden aan de listTemplate.

Voeg ook enkele stijlen toe userHome.html:

Sla alle wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 5002 en log in met een geldig e-mailadres en wachtwoord. Nadat u bent ingelogd, moet u de wensen van de gebruiker kunnen zien.

Stap 2: Toon de pop-up Bewerken

We zullen Bootstrap gebruiken om een ​​popup te tonen om een ​​interface te bieden om de wensen aan te passen. Voeg een verwijzing naar Bootstrap toe in userHome.html.

Nadat de referentie is opgenomen, voegt u de volgende HTML toe aan userHome.html.

 
 
 
 ×Dichtbij  
Update Wish
 
 
 
 
 Titel:  
 
 Omschrijving:  
 
 
 
 Dichtbij Bijwerken 
 
 
 

De bovenstaande HTML zal als pop-up dienen. Wanneer de gebruiker op de knop klikt Bewerk pictogram de pop-up zal verschijnen. We hebben de kenmerken al toegevoegd data-target en data-toggle die de modale pop-up zal activeren.

Sla de bovenstaande wijzigingen op en start de app opnieuw. Nadat u bent aangemeld bij de toepassing, klikt u op de Bewerk pictogram en zou u de pop-up moeten kunnen bekijken.

Stap 3: vul Pop-up bewerken in

Wanneer de gebruiker op het pictogram Bewerken klikt, wordt de pop-upupdate weergegeven met de titel en Omschrijving updaten. Om te beginnen, hebben we eerst de wens-ID nodig om de specifieke wensdetails op te halen zodra de gebruiker op het bewerkingspictogram klikt. Dus wijzig de jQuery-sjablooncode om een ​​extra attribuut toe te voegen data-id op het ankerelement bewerken.

We hebben ook een bij klikken gebeurtenis om de methode aan te roepen Bewerk. Binnen de functie Bewerken maken we een AJAX-aanroep naar een python-methode genaamd getWishById die de wensdetails zal teruggeven.

functie Bewerken (iepen) $ .ajax (url: '/ getWishById', data: id: $ (iepen) .attr ('data-id'), type: 'POST', succes: functie (res) console.log (res);, error: function (error) console.log (error);); 

Open vervolgens app.py en maak een methode genaamd getWishById. Met behulp van deze methode krijgen we de specifieke wensdetails uit de database.

@ app.route ('/ getWishById', methods = ['POST']) def getWishById (): try: if session.get ('user'): _id = request.form ['id'] _user = session.get ('gebruiker') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_GetWishById', (_ id, _user)) result = cursor.fetchall () wish = [] wish.append (' Id ': result [0] [0],' Title ': result [0] [1],' Description ': result [0] [2]) return json.dumps (wish) else: return render_template (' error .html ', error =' Unauthorized Access ') behalve uitzondering als e: return render_template (' error.html ', error = str (e)) 

Zoals je kunt zien in de bovenstaande methode, hebben we de wens-ID doorgegeven aan deze methode en het haalt de gegevens uit de database met behulp van de gebruikersnaam en wens ID. Nadat de gegevens zijn opgehaald, converteert het die gegevens naar een lijst en retourneert deze vervolgens als JSON gegevens.

Laten we vervolgens de vereiste opgeslagen MySQL-procedure maken om gegevens uit de database op te halen.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_GetWishById' (IN p_wish_id bigint, In p_user_id bigint) BEGIN selecteer * from tbl_wish where wish_id = p_wish_id en wish_user_id = p_user_id; EINDE

De hierboven getoonde code is de opgeslagen procedure om bepaalde wensdetails te krijgen met behulp van de wens ID en gebruikersnaam.

Sla de wijzigingen op en start de server opnieuw op. Nadat u bent aangemeld bij de toepassing, klikt u op de Bewerk pictogram en je zou de details moeten laten loggen in je browser console.

Als u de ontvangen gegevens aan de HTML-pop-up wilt binden, verwijdert u eerst de data-target en data-toggle attributen van de anchor-tag van het bewerkingspictogram. Voeg vervolgens de volgende code toe aan de Bewerk JavaScript-functie callback voor het vullen van de pop-up en activeren.

// Parse de ontvangen JSON-tekenreeks var data = JSON.parse (res); // Vul de pop-up $ ('# editTitle'). Val (data [0] ['Title']); . $ ( '# EditDescription') val (data [0] [ 'Beschrijving']); // Start de pop-up $ ('# editModal'). Modal ();

Sla de wijzigingen op en start de server opnieuw op. Nadat u bent ingelogd op de toepassing, klikt u op het pictogram Bewerken en moet u de pop-up met de titel en beschrijving hebben.

Stap 4: wensgegevens bijwerken

Om de updatefunctionaliteit te implementeren, maken we eerst een opgeslagen MySQL-procedure.

DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_updateWish' (IN p_title varchar (45), IN p_description varchar (1000), IN p_wish_id bigint, In p_user_id bigint) BEGIN update tbl_wish set wish_title = p_title, wish_description = p_description waar wish_id = p_wish_id en wish_user_id = p_user_id; END $$ DELIMITER;

Zoals te zien is in de opgeslagen procedure hierboven, geven we de gewijzigde versie door titel en Omschrijving samen met de ID kaart van de wens en de gebruiker om de details in de database bij te werken.

Laten we vervolgens een nieuwe methode maken met de naam updateWish om de details bij te werken. Hier is de updateWish methode:

@ app.route ('/ updateWish', methods = ['POST']) def updateWish (): try: if session.get ('user'): _user = session.get ('user') _title = request.form ['title'] _description = request.form ['description'] _wish_id = request.form ['id'] conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_updateWish', (_ title, _description, _wish_id, _user)) data = cursor.fetchall () als len (data) 0 is: conn.commit () return json.dumps ('status': 'OK') else: return json.dumps ( 'status': 'ERROR') behalve uitzondering als e: return json.dumps ('status': 'Unauthorized access') finally: cursor.close () conn.close () 

Zoals te zien in de bovenstaande code, hebben we na validatie van een geldige sessie de geposte gegevens verzameld en de opgeslagen procedure genoemd sp_updateWish om de details bij te werken.

Om de. Te bellen updateWish methode, moeten we een gebeurtenis toevoegen aan de Bijwerken klik op de knop. Dus noem de update-knop btnUpdate en bevestig een bij klikken gebeurtenis zoals getoond:

$ ('# btnUpdate'). click (function () $ .ajax (url: '/ updateWish', data: title: $ ('# editTitle'). val (), description: $ ('# editDescription ') .val (), id: localStorage.getItem (' editId '), type:' POST ', success: function (res) $ (' # editModal '). modal (' hide '); // Re vul het rooster in, error: function (error) console.log (error);));

Zoals te zien is in de bovenstaande code, hebben we de editId van lokale opslag, dus binnen de Bewerk functie bewaar de ID kaart in lokale opslag.

localStorage.setItem ( 'editId', $ (iep) .attr ( 'data-id'));

Sluit de getWish AJAX roept een functie op, zodat we hem opnieuw kunnen bellen zodra de gegevens zijn bijgewerkt.

functie GetWishes () $ .ajax (url: '/ getWish', type: 'GET', success: function (res) var wishObj = JSON.parse (res); $ ('# ulist'). empty ( ); $ ('# listTemplate'). tmpl (wishObj) .appendTo ('# ulist');, error: function (error) console.log (error);); 

Bel de GetWishes functie in de succes callback van de bijwerken AJAX-oproep.

$ ('# btnUpdate'). click (function () $ .ajax (url: '/ updateWish', data: title: $ ('# editTitle'). val (), description: $ ('# editDescription ') .val (), id: localStorage.getItem (' editId '), type:' POST ', success: function (res) $ (' # editModal '). modal (' hide '); // Re vul het rooster uit GetWishes ();, error: function (error) console.log (error);));

Sla alle wijzigingen op en start de server opnieuw op. Nadat u bent ingelogd bij de applicatie, probeert u de beschikbare wensen van de gebruiker te bewerken.

Een wens verwijderen

Stap 1: toon een pop-upbevestiging

Voeg de volgende HTML-code toe aan userHome.html.

 
 
 
 
Je gaat dit voor altijd verwijderen !!
 
 
 annuleren Verwijder 
 
 
 

Voeg een verwijderpictogram toe in de listTemplate door de volgende HTML toe te voegen:

Door op het bovenstaande verwijderpictogram te klikken, bellen we een JavaScript-functie genaamd Bevestig verwijderen waar we de pop-upbevestiging activeren.

functie ConfirmDelete (elem) localStorage.setItem ('deleteId', $ (elem) .attr ('data-id')); $ ( '# DeleteModal') modal (.); 

Sla de wijzigingen op en start de server opnieuw op. Nadat u bent ingelogd, klikt u op het pictogram Verwijderen in het verlanglijstje en zou u de bevestigingspop-up kunnen zien.

Stap 2: Wis een wens

Om de Delete wish-functionaliteit te implementeren, laten we eerst de opgeslagen MySQL-procedure maken om te verwijderen.

DELIMITER $$ GEBRUIK 'BucketList' $$ CREËER PROCEDURE 'sp_deleteWish' (IN p_wish_id bigint, IN p_user_id bigint) BEGIN delete from tbl_wish where wish_id = p_wish_id en wish_user_id = p_user_id; END $$ DELIMITER;

De bovenstaande procedure neemt de wens-ID en gebruikers-ID op en verwijdert de overeenkomstige wens uit de database.

Laten we vervolgens een methode binnenin maken app.py om de procedure te bellen sp_deleteWish. 

We zullen een methode aanmaken genaamd deleteWish voor verwijdering van de wens.

@ app.route ('/ deleteWish', methods = ['POST']) def deleteWish (): try: if session.get ('user'): _id = request.form ['id'] _user = session.get ('gebruiker') conn = mysql.connect () cursor = conn.cursor () cursor.callproc ('sp_deleteWish', (_ id, _user)) result = cursor.fetchall () als len (resultaat) 0 is: conn. commit () retourneer json.dumps ('status': 'OK') else: return json.dumps ('status': 'An Error occured') else: return render_template ('error.html', error = 'Unauthorized Access') behalve uitzondering als e: return json.dumps ('status': str (e)) finally: cursor.close () conn.close () 

In de bovenstaande methode hebben we de sessie eerst gevalideerd. Zodra we de gebruikerssessie hebben gevalideerd, gebruiken we de wens-ID en de gebruikers-ID die we de opgeslagen procedure hebben genoemd sp_deleteWish.

Om de bovenstaande methode te bellen deleteWish, voeg een toe bij klikken gebeurtenis naar de knop Verwijderen in de pop-up voor het verwijderen van een fout.

Verwijder

Maak een JavaScript-functie genaamd Verwijder, en binnen Verwijder maak een AJAX-aanroep naar de python-methode deleteWish.

functie Verwijderen () $ .ajax (url: '/ deleteWish', data: id: localStorage.getItem ('deleteId'), type: 'POST', success: function (res) var result = JSON. parseren (res); if (result.status == 'OK') $ ('# deleteModal'). modal ('hide'); GetWishes (); else alert (result.status);, fout : function (error) console.log (error);); 

Over het succes callback van het bovenstaande Verwijder We controleren de geretourneerde status en als het goed is, verbergen we de modale pop-up en laden we de wensen opnieuw in.

Sla de wijzigingen op en start de server opnieuw op. Nadat u bent aangemeld bij de toepassing, probeert u een wens te verwijderen van de startpagina van de gebruiker.

Conclusie

In dit deel van de serie hebben we gezien hoe het Bewerk en Verwijder wens-functionaliteit voor onze Bucket List-toepassing. In het volgende deel van deze serie zullen we paginering implementeren voor onze home-lijst met gebruikers en ook enkele extra functies implementeren.

Broncode van deze tutorial is beschikbaar op GitHub.

Laat het ons weten in de reacties hieronder!