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

Stwórz od zera aplikację internetową w 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

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

W tym cyklu wykorzystamy Pythona, Flask oraz MySQL do napisania prostej aplikacji od podstaw. Powstanie nieskomplikowana aplikacja do list zadań (typu bucket list), w której użytkownik będzie mógł się zarejestrować, zalogować i utworzyć własną listę.

Tutorial zakłada, że znasz już podstawy programowania w języku Python. Będziemy korzystać z Flaska, szkieletu (frameworka) do tworzenia aplikacji w Pythonie, a także MySQL do stworzenia jej zaplecza (back endu).

Wprowadzenie do Python Flask

Flask to Pythonowy framework do tworzenia aplikacji internetowych. Według oficjalnej strony,

Flask to mikroframework dla Pythona, który działa w oparciu o Werkzeug, Jinja 2 oraz dobre chęci.

Gdy mowa o Pythonie, frameworkiem, który pierwszy przychodzi nam do głowy, będzie z całą pewnością Django. Jednak z perspektywy początkującego użytkownika Pythona, łatwiej będzie stawiać pierwsze kroki właśnie we Flasku niż w Django.

Konfiguracja Flaska

Instalowanie Flaska odbywa się dość prosto i szybko. Korzystając z menedżera pakietów pip, wpisujemy:

To wszystko! Gdy skończysz instalować Flaska, utwórz folder o nazwie FlaskApp. Przejdź do katalogu FlaskApp i utwórz plik app.py. Zaimportuj moduł flask i utwórz nową aplikację, korzystając z Flaska, jak w przykładzie poniżej:

Teraz określ katalog główny / i odpowiadającą mu funkcję obsługi żądań (request handler): 

Następnie sprawdź, czy uruchomiony plik jest głównym programem i uruchom aplikację:

Zapisz zmiany i uruchom app.py:

Skieruj przeglądarkę na adres http://localhost:5000/ - zobaczysz wiadomość powitalną.

Tworzenie strony domowej

Gdy uruchamiamy aplikację, powinniśmy zobaczyć stronę domową, a na niej najnowsze punkty listy zadań dodane przez użytkowników. Dodajmy zatem stronę domową do folderu aplikacji.

Flask szuka pliku szablonu wewnątrz folderu templates.  Przejdź zatem do katalogu PythonApp i utwórz folder o nazwie templates. Wewnątrz templates, utwórz plik o nazwie index.html. Otwórz index.html i wpisz następujący kod HTML:

Otwórz app.py i importuj render_template, którego będziemy używać do renderowania plików szablonu.

Zmodyfikuj metodę main, by zwracała wyrenderowany plik szablonu.

Zapisz zmiany i uruchom ponownie serwer. Wpisz ponownie w przeglądarkę adres http://localhost:5000 / - powinien pojawić się taki widok:

Bucket List App home page

Tworzenie strony rejestracji

Krok 1: Konfigurowanie bazy danych

Do tworzenia zaplecza będziemy używać MySQL. Zaloguj się więc do MySQL, korzystając z wiersza poleceń, lub, jeśli wolisz, z edytora z interfejsem graficznym, np. MySQL work bench. Na początek utwórz bazę danych o nazwie BucketList. W wierszu polecenia:

Wprowadź wymagane hasło i, po zalogowaniu, wywołaj następujące polecenie, aby utworzyć bazę danych:

Po utworzeniu bazy danych, utwórz tabelę o nazwie tbl_user, jak w przykładzie:

Do interakcji naszej aplikacji z bazą danych MySQL będziemy używać procedur składowanych (Stored procedures). Dlatego, gdy już stworzyliśmy tabelę o nazwie tbl_user, przejdziemy do tworzenia procedury o nazwie sp_createUser, która posłuży do rejestracji użytkownika.

Tworząc procedurę przechowywaną, która doda nowego użytkownika do tbl_user, najpierw musimy sprawdzić, czy użytkownik o tej samej nazwie (username) nie został już zapisany. Jeśli taka nazwa jest już w bazie, musimy wysłać użytkownikowi informację o błędzie, jeśli nie - dodajemy użytkownika do tabeli. Oto jak procedura składowana sp_createUser powinna wyglądać:

Krok 2: Tworzenie interfejsu rejestracji

Przejdź do katalogu PythonApp/templates i utwórz plik HTML o nazwie signup.html. Dodaj następujący kod HTML do pliku signup.html:

Dodaj również reguły CSS zapisane w pliku signup.css do folderu static wewnątrz PythonApp.

Do pliku app.py dodaj metodę o nazwie showSignUp, która wyświetli stronę rejestracji, gdy wywołana zostanie podstrona /showSignUp.

Zapisz zmiany i uruchom ponownie serwer. Kliknij przycisk Sign Up na stronie domowej, a wyświetli się strona rejestracji:

Sign Up user page

Krok 3: Wprowadzenie metody rejestracji

Teraz będziemy potrzebować metody od strony serwera, która powiąże nasz interfejs użytkownika z bazą danych MySQL. Przejdź zatem do PythonApp i otwórz app.py. Dodaj nową metodę o nazwie signUp, a także podstronę /signUp. Wygląda to tak:

Do przesyłania danych z rejestracji do metody signUp użyjemy biblioteki jQuery AJAX. Musimy jednak najpierw wpisać tę metodę do definicji route. 

Aby odczytać przesłane wartości, musimy zaimportować żądanie (request) z Flaska.

Za pomocą request możemy odczytać przesłane wartości, jak w przykładzie poniżej:

Gdy wartości zostaną odczytane, sprawdzimy tylko, czy są one prawidłowe i roboczo ustawimy prosty komunikat zwrotny:

Zaimportuj też json z Flaska - używamy go w kodzie powyżej, by zwrócić dane w formacie json.

Krok 4: Tworzenie żądania rejestracji

Do przesłania żądania rejestracji do metody Pythona użyjemy jQuery AJAX.  Pobierz i umieść jQuery w folderze PythonApp/static/js i umieść link do niego na stronie rejestracji. Skoro jQuery jest już na swoim miejscu, dołączamy odwołanie do POST z jQuery powiązane z kliknięciem w przycisk Sign Up.

Zrobimy to w ten sposób:

Zapisz wszystkie zmiany i uruchom ponownie serwer. Wejdź na stronę rejestracji, wypełnij wszystkie dane i kliknij Sign Up. Sprawdź konsolę przeglądarki - powinien pojawić się tam komunikat:

Krok 5: Wywołanie procedury składowanej MySQL 

Gdy mamy jużimię, adres e-mail i hasło, wystarczy tylko wywołać procedurę składowaną MySQL, aby utworzyć nowego użytkownika.

Do komunikacji z MySQL wykorzystamy rozszerzenie Flaska: Flask-MySQL. Aby zacząć przygodę z Flask-MySQL, zainstaluj go za pomocą menedżera pakietów pip:

Zaimportuj MySQL wewnątrz app.py:

Wcześniej już zdefiniowaliśmy naszą aplikację w taki sposób:

Teraz dołączymy do tego konfigurację MySQL:

Najpierw utworzymy połączenie MySQL:

Po utworzeniu połączenia, będziemy jeszcze potrzebowali kursora, który pozwoli nam korzystać z naszej procedury składowanej. Tworzymy zatem kursora, korzystając z połączenia conn.

Przed wywołaniem procedury składowanej createUser (utwórz użytkownika), "posólmy" nasze hasło przy użyciu helpera dostarczonego przez Werkzeug. Zaimportuj moduł do app.py.

Użyj modułu soli do zaszyfrowania hasła:

Teraz możemy wywołać procedurę sp_createUser:

Jeśli procedura przebiegnie pomyślnie, zatwierdzimy zmiany i zwrócimy komunikat o powodzeniu.

Zapisz zmiany i uruchom ponownie serwer. Przejdź do strony rejestracji, wprowadź imię, adres e-mail i hasło i kliknij przycisk Sign Up. Po pomyślnym dodaniu użytkownika, zobaczysz wiadomość w konsoli przeglądarki.

Podsumowując

W tym tutorialu zobaczyliśmy, jak rozpocząć pracę nad prostą aplikacją sieciową, korzystając z Python Flask, MySQL i rozszerzenia Flask-MySQL. Utworzyliśmy i zaprojektowaliśmy tabele bazy danych i procedurę składowaną, a także implementowaliśmy funkcję rejestracji użytkownika. W kolejnym tutorialu wkroczymy na nowy poziom: zaimplementujemy funkcję zapisu i kilka funkcji dodatkowych. 

Kod źródłowy z tego tutorialu znajdziesz na GitHub.

Podziel się z nami swoją opinią w komentarzach na dole strony!

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.