30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Python
Code

Kreiranje Web Aplikacije iz Temelja Koristeći Python Flask i MySQL

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 2

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

U ovoj seriji ćemo koristiti Python, Flask i MySQL kako bismo iz temelja kreirali jednostavnu web aplikaciju. To će biti jednostavna aplikacija za listu želja gdje se korisnici mogu registrirati, prijaviti i kreirati svoje liste želja.

Ovaj tutorial zahtijeva neko osnovno znanje Python programskog jezika. Koristiti ćemo Flask, Python framework za web aplikaciju kako bismo izradili našu aplikaciju sa MySQL back endom.

Uvod u Python Flask

Flask je Python framework za izradu web aplikacija. Prema službenoj stranici,

Flask je mikro framework za Python baziran na Werkzeug, Jinja 2 i dobrim namjerama.

Kada se sjetimo Pythona, ono što nam najčešće padne na um je Django framework. Ali iz perspektive Python početnika, u usporedbi s Djangom, Flask je laganiji za početak.

Podešavanje Flaska

Podešavanje Flaska je brzo i jednostavno. Sa pip manager paketom, sve što trebamo učiniti jest:

Kada završite sa instalacijom Flaska, kreirajte mapu pod imenom FlaskApp. Idite na FlaskApp mapu i kreirajte datoteku naziva app.py. Uvezite flask modul i kreirajte aplikaciju koristeći Flask kao što je prikazano:

Sada definirajte osnovnu putanju / i njezin odgovarajući zahtjev:

Zatim, provjerite je li izvršena datoteka glavni program i pokrenite aplikaciju:

Pohranite promjene i izvršite app.py:

Usmjerite pretraživač na http://localhost:5000/ i trebali biste dobiti poruku dobrodošlice.

Izrada Početne Stranice

Prvo, kada se aplikacija pokrene trebali bismo prikazati početnu stranicu sa posljednjim stavkama u popisu želja dodanim od strane korisnika. Pa dodajmo našu početnu stranicu u mapu aplikacije.

Flask traži datoteke predloška unutar templates mape. Stoga idite na PythonApp mapu i kreirajte mapu sa templates nazivom. Unutar templates mape izradite datoteku nazvanu index.html. Otvorite index.html i dodajte sljedeći HTML:

Otvorite app.py i importirajte render_template, koji ćemo upotrijebiti za renderiranje datoteka predloška.

Modificirajte glavnu metodu da vratite renderiranu datoteku predloška.

Spremite promjene i restartajte server. Usmjerite pretraživač na http://localhost:5000/ i trebali biste imati prikazano sljedeće:

Bucket List App home page

Izrada Stranice za Prijavu

1. korak: Podešavanje Baze Podataka

Kao back end ćemo koristiti MySQL. Ulogirajte se u MySQL iz komandne linije, ili ako više preferirate GUI alate poput MySQL work bench, možete upotrijebiti i tu opciju također. Prvo, kreirajte bazu podataka nazvanu BucketList. Iz komandne linije:

Unesite potrebnu lozinku i nakon što se ulogirate, primijenite sljedeću naredbu da kreirate bazu podataka:

Nakon što ste kreirali bazu podataka, kreirajte tablicu imena tbl_user kao što je prikazano:

Za interakciju s MySQL bazom podataka koristiti ćemo Stored procedures za našu Python aplikaciju. Stoga, nakon što je kreirana tbl_user tablica, kreirajte pohranjenu proceduru nazvanu sp_createUser da prijavite korisnika.

Kada kreiramo pohranjeni postupak za izradu korisnika u tbl_user tablici, prvo moramo provjeriti postoji li već korisnik koji ima isti username. Ako postoji, moramo korisniku ubaciti error, jer ćemo u suprotnom kreirati korisnika u tablici korisnika. Evo kako bi izgledala pohranjeni postupak sp_createUser  :

2. korak: Kreirajte 'Signup' sučelje

Idite na PythonApp/templates direktorij i kreirajte HTML datoteku nazvanu signup-html. Dodajte sljedeći HTML kod za signup.html:

Također dodajte sljedeći CSS kao signup.css statičnoj mapi unutar PythonApp.

U app.py dodajte još jednu metodu nazvanu showSignUp da renderira stranicu za prijavu kada zahtjev dođe u /showSignUp:

Spremite promjene i restartajte server. Kliknite na Sign Up gumb na početnoj stranici i trebali biste imati stranicu za prijavu kao što je prikazano:

Sign Up user page

3. korak: Implementirajte Signup metodu

Sada trebamo 'server-side' metodu (metoda na strani servera) za interakciju s MySQL bazom podataka. Stoga idite na PythonApp i otvorite app.py. Kreirajte novu metodu nazvanu signUp i također dodajte putanju /signUp. Evo kako izgleda:

Koristiti ćemo jQuery AJAX da objavimo 'signup' podatke signUp metodi, pa ćemo specificirati metodu u putanji.

Kako bismo pročitali objavljene vrijednosti moramo importirati request iz Flaska.

Koristeći request možemo čitati objavljene vrijednosti kao što je prikazano ispod:

Kada su vrijednosti pročitane, jednostavno ćemo provjeriti jesu li valjane i vratimo jednostavnu poruku:

Također importirajte json iz Flaska, pošto ga koristimo u kodu iznad da vratimo json podatke.

4. korak: Kreirajte Signup zahtjev

Koristiti ćemo jQuery AJAX da Python metodi pošaljemo zahtjev za prijavu. Preuzmite i smjestite jQuery unutar Python/static/js i dodajte poveznicu iz stranice za prijavu. Nakon što je dodan jQuery, dodati ćemo jQuery POST zahtjev kada korisnik klikne Sign Up gumb.

Stoga, pridružimo klik gumba za prijavu event kao što je prikazano: 

Pohranite sve promjene i restartajte server. Iz Sign Up stranice, ispunite detalje i kliknite Sign Up. Provjerite konzolu pretraživača i trebali biste dobiti sljedeću poruku:

5. korak: Pozovite MySQL Pohranjeni Postupak

Kada imamo name, email address i password, možemo jednostavno pozvati MySQL pohranjeni postupak da kreiramo novog korisnika.

Kako bismo spojili MySQL, koristiti ćemo Flask-MySQL Flask ekstenziju. Kako bi započeli sa Flask-MySQL, instalirajte ga koristeći pip upravitelj paketa:

Importirajte MySQL unutar app.py:

Ranije smo definirali našu aplikaciju kao što je prikazano:

Zajedno s time uključite sljedeće MySQL konfiguracije:

Kreirajmo prvo MySQL vezu:

Nakon što je konekcija kreirana, tražiti ćemo cursor da istraži naš pohranjeni postupak. Stoga, koristeći conn vezu, kreirajte kurzor.

Prije pozivanja kreiranja pohranjenog korisničkog postupka, zasolimo lozinku koristeći pomoćnik koji nam omogućuje Werkzeug. Importirajte modul u app.py:

Upotrijebite modul za soljenje da kreirate hash lozinku.

Pozovimo sada postupak sp_createUser:

Ako je postupak uspješno izveden, primijeniti ćemo promjene i vratiti poruku o uspjehu.

Spremite promjene i restartajte server. Idite na stranicu za prijavu i unesite name, email addresspassword te kliknite na Sign Up gumb. Kod uspješnog kreiranja korisnika moći ćete vidjeti poruku u konzoli svojeg pretraživača.

Sažetak

U ovom tutorialu vidjeli smo kako započeti s kreiranjem web aplikacije koristeći Python Flask, MySQL i Flask-MySQL ekstenziju. Kreirali smo i dizajnirali tablice baze podataka i pohranili postupak te implementirali funkcionalnost prijave. U sljedećem tutorialu podići ćemo ove serije na sljedeću razinu implementirajući 'sign in' funkcionalnost i neke druge značajke.

Izvorni kod iz ovog tutoriala dostupan je na GitHub stranici.

Pišite nam svoja mišljenja ispod u komentarima!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.