Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Paglikha ng Web App Form Mula sa Scratch Gamit Lamang ang Python, Flask at 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

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Sa seryeng ito, gagamit tayo ng Python, Flask at MySQL upang lumikha ng simpleng web application mula sa scratch. Ito ay magiging isang simpleng bucket list application kung saan ang mga gagamit ay maaaring magregister, sign in at gumawa ng kanilang bucket list.

Ang pagtuturong ito ay umaasang mayroon na kayong payak na kaalaman sa Python programming language. Gagamit tayo ng Flask, isang framework ng Python web application, upang gawin ang ating application, kasama ang MySQL sa back end.

Pagpapakilala sa Python Flask

Ang Flask ay isang Python framework para sa paggawa ng mga web applications. Mula sa opisyal na site,

Ang Flask ay isang microframework para sa Python batay sa Werkzeug, Jinja 2 at mabubuting layunin.

Kapag naiisip natin ang tungkol sa Python, ang kaagad na framework na pumapasok sa isip natin ay ang Django framework. Ngunit mula sa pananaw ng isang nagsisimula pa lamang sa Python, ang Flask ay mas madaling matutunan, kumpara sa Django.

Paghahanda ng Flask

Ang paghahanda ng Flask ay madali at napakabilis lamang gawin. Gamit ang pip package manager, ang kailangan lang natin gawin ay:

Kapag tapos na kayo mag-install ng Flask, gumawa ng isang folder na ang pangalan ay FlaskApp. Tumungo sa FlaskApp folder at gumawa ng isang file na ang pangalan ay app.py. I-import ang flask module at gumawa ng app gamit ito gaya ng sa sumusunod:

Ngayon, i-takda ang pangunahing ruya bilang / at ang katumbas na request handler:

Sunod, tignan kung ang executed file ay ang main program at paganahin ang app:

I-save ang mga pagbabago at i-execute ang app.py:

Tumungo sa http://localhost:5000/ gamit ang browser at makikita mo dapat ang panbungad na mensahe.

Paglikha ng Home Page

Una, kapag ang application ay gumagana, dapat ay magpapakita ito ng isang home page na nakalagay ang pinakahuling mga bagay sa bucket list na nilagay ng mga users. Kaya idagdag natin ang ating home page sa ating application folder.

Ang Flask ay naghahanap ng mga template files sa loob ng templates folder. Kaya tumungo tayo sa PythonApp folder at gumawa ng isang folder na ang pangalan ay templates. Sa loob ng templates, gumawa ng isang file na ang pangalan ay index.html. Buksan ang index.html at idagdag ang sumusunod na HTML:

Buksan ang app.py at i-import and render_template, kung saan ito ang gagamitin natin upang mag-render ng mga template files.

Baguhin ang main method para mai-return ang na-render na template file.

I-save ang mga pagbabago at i-restart ang server. Tumungo sa http://localhost:5000/ gamit ang browser at makikita mo dapat ang nasa ibaba:

Bucket List App home page

Pag-gawa ng Signup Page

Unang Hakbang: Paghahanda ng Database

Gagamit tayo ng MySQL bilang back end. Kaya mag log in sa mySQL mula sa command line, o kung mas gusto ninyo ang may GUI gaya ng MySQL work bench, maaari mo ring gamitin ito. Una, gumawa ng isang database na ang tawag ay BucketList. Mula sa command line:

I-enter ang kinakailangang password at kapag naka-log in na, isagawa ang sumusunod na command upang magawa ang database:

Sa oras na magawa na ang database, gumawa ang isang talaan na ang pangalan ay tbl_user gaya ng ipinapakita:

Gagamit tayo ng Stored procedures para maiugnay ang ating Python application at ang MySQL database. Kaya, sa oras na ang table na tbl_user ay nagawa na, lumikha ng isang stored procedure na tinatawag na sp_createUSer upang mai-sign up ang user.

Kapag lumilikha ng stored procedure upang makagawa user sa tbl_user na talaan, una nating dapat i-check kung may kapareho ang username ng user. Kung ito ay mayroon na, kailangan nating magbato ng error sa user, kung hindi ay gagawin natin ang user sa talaan ng mga user. Ganito dapat ang magiging itsura ng stored procedure na sp_createUser:

Ikalawang Hakbang: Lumikha ng Signup Interface

Tumungo sa PythonApp/templates na directory at gumawa ng HTML file na signup.html ang tawag. Idagdag ang sumusunod na HTML code sa signup.html:

Idagdag din ang sumusunod na CSS bilang signup.css sa static folder sa loob ng PythonApp.

Sa app.py, magdagdag ng isa pang method na ang tawag ay showSignUp upang i-render ang signup page sa oras na ang isang request ay pumasok sa /showSignUp:

I-save ang mga pagbabago at i-restart ang server. Magclick sa Sign Up button sa homepage at magkakaroon ka dapat ng signup page na gaya nito:

Sign Up user page

Ikatlong Hakbang: Ipatupad ang Signup Method

Sunod, kailangan natin ng isang method sa panig ng server para makapagugnayan ang UI sa MySQL database. Kaya tutungo tayo sa PythonApp at buksan ang app.py. Lumikha ng bagong method na tinatawag na signUp at saka magdagdag ng ruta /signUp. Ganito ang magiging itsura niyan:

Gagamit tayo ng jQuery AJAX upang ipaskil ang datos ng signup sa ating signUp method, kaya tutukuyin natin ang method na ito sa route definition.

Para mabasa ang posted values, kailangan natin i-import ang request mula sa Flask.

Gamit ang request maaari nating mabasa ang mga nakapaskil na values gaya ng nasa ibaba:

Kapag nabasa na ang mga values, titignan lang natin kung ang mga ito ay katanggap-tanggap at pansamantala, i-return lang natin ang isang simpleng mensahe:

I-import din natin ang json mula sa Flask, sapagkat ginagamit natin ito sa code sa itaas upang magbalik ng datos na json.

Ika-apat na Hakbang: Gumawa ng request para sa Signup

Gagamit tayo ng jQuery AJAX upang ipadala ang signup request sa signup method. I-download at ilagay ang jQuery sa loob ng PythonApp/static/js at magdagdag ng link dito mula sa signup page. Kapag naisama na ang jQuery, magdadagdag tayo ng jQuery POST request kapag ang user ay pumindot sa SignUp button.

Kaya naman, ikabit natin ang signup button click event gaya nito:

I-save ang mga pagbabago at i-restart ang server. Mula sa Sign Up page, punuan ang mga detalye at i-click ang Sign Up. Tumingin sa browser console at dapat ay makikita mo ang ganitong mensahe:

Ikalimang Hakbang: Tawagin ang MySQL Stored Procedure

Kapag mayroon na tayong name, email address at password, pwede na nating tawagin ang MySQL stored procedure upang gumawa ng bagong user.

Para kumonekta sa MySQL, gagamit tayo ng Flask-MySQL, na isang Flask extension. Upang makapagsimula sa Flask-MySQL, i-install ito gamit ang pip package manager:

I-import ang MySQL sa loob ng app.py:

Kanina, itinakda natin ang ating app gaya nito:

Isama din sa mga ito ang sumusunod na MySQL configurations:

Una, gumawa tayo ng MySQL connection:

Sa oras na magawa na ang connection, kakailanganin natin ng isang cursor upang i-query ang ating stored procedure. Kaya naman, gamit ang conn na connection, gumawa tayo ng cursor.

Bago tawagin ang create user stored procedure, gawin nating salted ang ating password gamit ang helper na binigay ng Werkzeug. I-import ang module na ito sa app.py:

Gamitin ang salting module upang makalikha ng hashed password.

Ngayon, tawagin natin ang procedure sp_createUser:

Kung ang procedure ay naisagawa ng maayos, ilalagak natin ang mga pahbabaho at ibabalik ang mensahe sa pagtatagumpay.

I-save ang mga pagbabago at i-restart ang server. Tumungo sa signup page at i-enter ang name, email address at password at pindutin ang Sign Up button. Kung matagumpay ang paggawa ng user, makakakita ka ng mensahe sa inyong browser console.

Pagtatapos

Sa pagtuturong ito, nakita natin kung papaano simulan ang paglikha ng isang web application gamit ang Python Flask, MySQL at ang Flask-MySQL extension. Ginawa natin at hinubog ang mga talaan ng database at stored procedure, at ipinatupad ang sign-up functionality. Sa susunod na pagtuturo, dadalhin natin ang seryeng ito sa susunod na antas sa pamamagitan ng pagpapatupad ng sign-in functionality at iba pang mga tampok.

Ang source code mula sa pagtuturong ito ay matatagpuan sa GitHub.

Ipaalam ninyo sa amin ang inyong mga saloobin sa comments sa ibaba!

Advertisement
Advertisement
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.