Spis treści:
Bezpłatny kurs Pythona ➞ Mini kurs dla początkujących i doświadczonych programistów. Cztery fajne projekty w portfolio, czat na żywo z prelegentem. Kliknij i zobacz, czego możesz się nauczyć na kursie.
Dowiedz się więcejW pierwszej części lekcji Django zainstalowaliśmy framework, opracowaliśmy silnik blogowy, zdefiniowaliśmy komponenty wpisów i nauczyliśmy się, jak je publikować. Teraz skupimy się na front-endzie: nadamy wpisom schludniejszy i bardziej atrakcyjny wygląd, dodamy przyciski do interakcji z treścią i poprawimy komfort użytkowania. Zacznijmy od czwartego kroku, ponieważ pierwsze trzy zostały omówione w poprzednim artykule.
Czytanie jest ważnym aspektem naszego życia, przyczyniającym się do rozwoju myślenia, poszerzania horyzontów i doskonalenia umiejętności komunikacyjnych. Regularne czytanie książek, artykułów i innych materiałów pomaga poszerzyć słownictwo i poprawić wykształcenie. Czytanie poprawia również koncentrację i uwagę, co jest korzystne zarówno w życiu osobistym, jak i zawodowym.
Czytanie pozwala również zanurzyć się w różnych kulturach i światach, otwierając nowe horyzonty i idee. To świetny sposób na relaks i odprężenie po codziennej harówce. Utrzymuj nawyk czytania, wybierając literaturę, która Cię inspiruje i interesuje. Czytaj regularnie, a zauważysz pozytywny wpływ na swoje życie i rozwój.
Tworzenie aplikacji z Django. Część 1. Instalacja frameworka, konfiguracja silnika i podstawowe rekordy.
W tym artykule przyjrzymy się tworzeniu aplikacji opartej na frameworku Django. W pierwszej części skupimy się na instalacji samego frameworka, a także na wstępnej konfiguracji silnika i utworzeniu podstawowych rekordów. Django to potężne narzędzie do tworzenia stron internetowych, które pozwala szybko tworzyć niezawodne i skalowalne aplikacje.
Zacznijmy od instalacji Django. Będzie to wymagało Pythona i menedżera pakietów pip. Upewnij się, że masz zainstalowane najnowsze wersje tych narzędzi. Następnie uruchom polecenie, aby zainstalować Django.
Następnym krokiem jest konfiguracja projektu. Utwórz nowy projekt za pomocą wbudowanego polecenia Django i skonfiguruj go. Podczas instalacji zwróć uwagę na ustawienia bazy danych i inne kluczowe ustawienia, które mogą mieć wpływ na działanie aplikacji.
W ostatnim kroku pierwszej części utworzymy podstawowe rekordy w modelu. Pozwoli Ci to zobaczyć, jak działa system zarządzania bazą danych w Django i jak wygodnie korzystać z danych.
Bądźcie czujni, czekając na kolejne części, w których przyjrzymy się bliżej funkcjonalności Django i nauczymy się tworzyć złożone aplikacje internetowe.
Praca nad frontendem: dostosowywanie wyświetlania wpisów na blogu
Wpisy tworzone za pośrednictwem panelu administracyjnego nie są wyświetlane na stronie głównej witryny. Po uruchomieniu serwera zobaczysz standardową stronę powitalną Django. Wprowadźmy niezbędne zmiany, aby to naprawić i wyświetlać wpisy na stronie głównej.
W Django istnieją dwa główne podejścia do tworzenia widoków: oparte na funkcjach i oparte na klasach. Oba podejścia wykonują to samo zadanie: akceptują żądanie HTTP i zwracają odpowiedź. Główną różnicą jest to, że widoki oparte na funkcjach zapewniają bardziej szczegółową kontrolę nad procesem, ale wymagają więcej kodu. Wybór między tymi metodami zależy od konkretnych wymagań projektu i preferencji programisty. Widoki oparte na klasach mogą uprościć organizację kodu i ponowne wykorzystanie logiki, podczas gdy funkcje zapewniają większą elastyczność i prostotę w przypadku mniejszych zadań.
Stworzenie bloga o prostej funkcjonalności wymaga użycia widoków opartych na klasach, co jest standardowym podejściem w tworzeniu aplikacji internetowych. Ta metoda jest szczególnie wygodna podczas interakcji z elementami bazy danych, ponieważ pozwala na bardziej ustrukturyzowaną organizację kodu i jest łatwiejsza do skalowania. Korzystanie z widoków opartych na klasach upraszcza utrzymanie i rozszerzanie funkcjonalności bloga, czyniąc go bardziej wydajnym i elastycznym.
Korzystając z Django, można efektywnie korzystać z wbudowanych standardowych widoków. W tym przypadku będziemy pracować z podklasami DetailView i ListView. Klasy te pozwolą nam wyświetlać dane z modelu Entry. Aby to zrobić, będziemy musieli edytować plik entries/views.py, w którym dodamy te widoki do przetwarzania żądań i wyświetlania informacji o wpisach.
W Django kod HTML jest generowany automatycznie za pomocą szablonów. Jest to wygodne w przypadku generowania dużych ilości podobnej treści, takiej jak wpisy na blogu. Korzystanie z szablonów pozwala programistom przyspieszyć proces tworzenia i zapewnić spójność prezentacji danych. Dzięki wstawianiu dynamicznych danych do szablonów tworzenie i edycja treści stają się prostsze i bardziej wydajne. Szablony Django zapewniają elastyczność i ułatwiają dostosowanie wyglądu strony do potrzeb projektu.
Django wymaga, aby szablony dla widoków opartych na klasach znajdowały się w określonych katalogach i miały odpowiednie nazwy. Jest to niezbędne do prawidłowego działania aplikacji. Aby spełnić te wymagania, utwórz zagnieżdżone foldery do przechowywania szablonów zgodnie z ustalonymi standardami. Upewnij się, że struktura katalogów i nazwy plików są zgodne z oczekiwaniami Django, aby uniknąć problemów z ładowaniem i renderowaniem szablonów w projekcie.
Na pierwszy rzut oka ścieżka do szablonów może wydawać się myląca. Dla ułatwienia nazwaliśmy folder docelowy tak samo jak naszą aplikację. W przyszłości, jeśli zdecydujesz się użyć tej aplikacji w innym projekcie, będziesz mógł łatwo znaleźć i zrozumieć lokalizację szablonów powiązanych z tą aplikacją. To rozwiązanie zapewnia wygodę i upraszcza proces tworzenia, umożliwiając szybką nawigację po strukturze projektu.
Utwórzmy plik o nazwie entry_list.html i dodajmy do niego następującą zawartość:
Szablony Django obsługują dynamiczne linkowanie do klas CSS. Na przykład kod dodaje klasę «{{ entry.date_created|date: ‘l’ }}», która służy do wyświetlania znacznika czasu z określonym formatowaniem. Oznacza to, że element otrzymuje nazwę dnia tygodnia jako klasę. To podejście pozwala nam stosować unikalne style do wpisów w zależności od dnia, co omówimy później, rozpoczynając stylizowanie bloga.
W pętli entry_list mamy dostęp do wszystkich pól modelu Entry. Aby uniknąć zaśmiecania listy niepotrzebnymi informacjami, szczegóły wpisu będziemy wyświetlać tylko na stronie konkretnego wpisu. W tym celu utworzymy plik entry_detail.html w katalogu entries/templates/entries/ i dodamy do niego odpowiedni kod. Dzięki temu użytkownicy będą mieli dostęp do pełnych informacji o wpisach, bez rozpraszania się niepotrzebnymi danymi na liście.
Ten szablon został zaprojektowany do pracy z pojedynczymi wpisami na blogu, dlatego pętla iteracyjna po wszystkich istniejących wpisach nie jest używana. Pozwala to skupić się na konkretnym wpisie, co poprawia wydajność i upraszcza zarządzanie treścią.
Aby szablony działały poprawnie, należy powiązać wygenerowane widoki z adresami URL. W Django zadanie to jest realizowane za pomocą pliku urls.py, który obsługuje żądania przychodzące od użytkowników w przeglądarkach. Prawidłowa konfiguracja tras w tym pliku zapewnia dostęp do pożądanych widoków i optymalizuje interakcję z aplikacją.
Plik urls.py został automatycznie wygenerowany w katalogu bloga. Jednak aby nasza aplikacja Entries działała, musimy utworzyć nowy plik urls.py w folderze „Wpisy”. Musimy dodać trasy dla widoków EntryListView i EntryDetailView do tego pliku, aby zapewnić poprawną nawigację i dostęp do wpisów.
Funkcja path() musi akceptować co najmniej dwa argumenty, aby działać poprawnie z obydwoma widokami. Te argumenty są niezbędne do określenia trasy i przesyłania danych między różnymi komponentami aplikacji. Prawidłowe użycie funkcji path() umożliwia efektywne zarządzanie adresami URL i poprawia komfort użytkowania.
- nazwa ciągu dla trasy zawierająca wzorzec adresu URL;
- odwołanie do widoku w postaci funkcji as_view(). Jest ono używane w przypadku widoków opartych na klasach.
W Django można przekazywać dodatkowe argumenty, takie jak kwargs, i jawnie określać nazwę trasy. Ułatwia to odwoływanie się do widoków w projekcie. Jeśli trzeba zmienić wzorzec adresu URL, nie trzeba aktualizować samych wzorców, co znacznie upraszcza proces tworzenia i utrzymywania kodu. Korzystanie z nazwanych tras pozwala na bardziej elastyczne zarządzanie adresami URL i poprawia czytelność kodu, co jest ważne w przypadku projektów skalowalnych.
Po utworzeniu adresów URL dla aplikacji wpisów konieczne jest ich zintegrowanie z listą wzorców urlpatterns bloga. Otwórz plik diary/urls.py i znajdź aktualne wzorce adresów URL używane w projekcie. Obecnie ta lista zawiera tylko jedną ścieżkę do katalogu admin/, dodaną domyślnie, która zapewnia dostęp do panelu administracyjnego Django. Aby wyświetlać wpisy blogowe podczas odwiedzania witryny pod adresem http://localhost:8000, należy przekierować główny adres URL do utworzonej aplikacji Entries. W tym celu należy wprowadzić odpowiednie zmiany w pliku diary/urls.py.
Praca nad wyglądem bloga
Aby stworzyć atrakcyjny i przyjazny dla użytkownika blog, zarówno dla czytelników, jak i autorów, należy opracować szablon bazowy o jednolitym wyglądzie. Szablon ten będzie znajdował się w katalogu entries/templates/entries/base.html i będzie stanowił podstawę dla wszystkich stron bloga. Prawidłowy projekt i struktura treści pomogą usprawnić nawigację i zwiększyć komfort użytkowania.
Django oferuje unikalną funkcję dziedziczenia szablonów, która pozwala uniknąć powielania znaczników. Zamiast przepisywać kod, szablony potomne można łatwo rozszerzać. Framework automatycznie łączy szablony nadrzędne i potomne przed ich renderowaniem, co usprawnia proces tworzenia i upraszcza proces tworzenia złożonych aplikacji internetowych. Ta funkcja przyczynia się do lepszej struktury kodu i ułatwia jego utrzymanie.
Wstawiając {% load static %} na początku pliku szablonu, uzyskujemy możliwość odwoływania się do plików statycznych za pomocą znacznika szablonu {% static %}. Pozwala to na wygodne określenie ścieżki względnej do plików CSS i innych zasobów, zapewniając ich poprawne wyświetlanie na stronie internetowej. Korzystanie z tej konstrukcji jest standardową praktyką w programowaniu Django, pomaga zoptymalizować ładowanie i zarządzanie zasobami.
Utwórz plik diary.css w katalogu entries/static/css/ i wklej do niego następujący kod:
Teraz połączymy szablony potomne z nadrzędnym szablonem base.html. Aby to zrobić, zaktualizuj plik entries/templates/entries/entry_list.html, aby pasował do następującego kodu:
Edytujmy plik entries/templates/entries/entries_detail.html. Ten plik odpowiada za wyświetlanie szczegółowych informacji o wpisach. Optymalizacja tego szablonu pomoże poprawić komfort użytkowania i zwiększyć widoczność strony w wyszukiwarkach. Pamiętaj o dodaniu meta tagów, tytułów i opisów, które odpowiadają treści wpisu. Warto również rozważyć wykorzystanie danych strukturalnych, aby pomóc wyszukiwarkom lepiej zrozumieć treść. Skuteczne zaprojektowanie elementów, takich jak obrazy i linki, sprawi, że strona będzie bardziej atrakcyjna i łatwiejsza w nawigacji. Skupimy się na tym, aby treść była unikalna i informacyjna, co pozytywnie wpłynie na SEO.
Teraz oba szablony korzystają ze struktury HTML i stylów szablonu nadrzędnego, w tym stylów zdefiniowanych w pliku diary.css. Zapewnia to spójny wygląd wizualny i ułatwia późniejszą edycję i aktualizację. Użycie wspólnego, bazowego stylu CSS pozwala nam zachować spójny styl w całej witrynie, co poprawia komfort użytkowania i ułatwia nawigację.
Uruchommy serwer Django i przejrzyjmy zmiany w naszym blogu. Dzięki Django możemy stworzyć dynamiczną aplikację internetową, która zarządza treścią bloga. Po uruchomieniu serwera zobaczymy zaktualizowany interfejs i nowe funkcje, które usprawnią interakcję użytkownika z naszą witryną. Nasz blog stał się wygodniejszy i bardziej funkcjonalny, co pozytywnie wpłynie na ruch na nim i jego optymalizację pod kątem wyszukiwarek.
Blog stał się teraz bardziej atrakcyjny. Jednak zarządzanie wpisami, w tym dodawanie, edytowanie i usuwanie ich za pośrednictwem panelu administracyjnego Django, nadal jest niewygodne. Wdrażamy tę funkcjonalność bezpośrednio na stronie internetowej, co uprości proces zarządzania treścią i poprawi komfort użytkowania.
Dodawanie przycisków do pracy z treścią
Pracując z wpisami na blogu, należy wykonać cztery kluczowe operacje. Operacje te są fundamentalne dla zarządzania treścią i zapewniają skuteczną interakcję z odbiorcami. Prawidłowe wykonanie tych czynności może poprawić widoczność witryny w wyszukiwarkach i przyciągnąć więcej czytelników.
- utwórz nowy wpis;
- przeczytaj wpis;
- aktualizuj wpis;
- usuń wpis.
Wszystkie te czynności są dostępne za pośrednictwem panelu sterowania, ale korzystanie z tej metody może być niewygodne ze względu na konieczność otwarcia dodatkowego okna w przeglądarce. Zintegrujemy te funkcje z interfejsem internetowym bloga, wykorzystując znane podejścia do pracy z widokami, szablonami i adresami URL. Poprawi to komfort użytkownika i przyspieszy interakcję z treścią bloga.
W pliku entries/views.py zaimportowaliśmy wcześniej ListView i DetailView. Teraz zaktualizujmy ten plik, dodając nowe widoki, które rozszerzą funkcjonalność naszej aplikacji. Umożliwi to lepsze zarządzanie danymi i lepszy interfejs użytkownika.
W tym przypadku samo skojarzenie klas z modelem Entry nie wystarczy. W przypadku klas EntryCreateView i EntryUpdateView jawnie określamy, które pola modelu powinny być prezentowane w formularzu. Jednak w przypadku EntryDeleteView nie jest to konieczne, ponieważ celem tej klasy jest całkowite usunięcie wpisu, niezależnie od jego pól.
Ważne jest, aby zdefiniować, gdzie użytkownik zostanie przekierowany po przesłaniu formularza. Domyślnie metoda .get_success_url() zwraca wartość success_url. W klasie EntryUpdateView nadpisujemy tę metodę, przekazując entry.id jako argument. Pozwala to użytkownikowi pozostać na stronie wpisu po edycji. Zamiast określać adresy URL, używamy metody reverse_lazy, aby uzyskać do nich dostęp po nazwie, określonej w szablonach. Takie podejście zapewnia elastyczność i łatwość zarządzania routingiem w aplikacji.
Django nadal używa zdefiniowanych nazw do wyszukiwania szablonów. Ważne jest, aby zrozumieć, że struktura nazewnictwa szablonów odgrywa kluczową rolę w ich pomyślnym wyszukiwaniu. Podczas tworzenia aplikacji Django zalecamy przestrzeganie standardowych praktyk nazewnictwa, aby uprościć proces wyszukiwania i używania szablonów. To nie tylko przyspiesza rozwój, ale także ułatwia efektywniejsze zarządzanie projektem. Prawidłowe nazewnictwo szablonów pozwala uniknąć potencjalnych konfliktów i ułatwia ich lokalizację oraz ponowne wykorzystanie w różnych częściach aplikacji.
- W przypadku EntryCreateView jest to entry_form.html;
- W przypadku EntryUpdateView jest to entry_update_form.html;
- W przypadku EntryDeleteView jest to entry_confirm_delete.html.
Jeśli Django nie znajdzie pliku entry_update_form.html, automatycznie użyje entry_form.html jako szablonu zapasowego, prezentując wpis w jego oryginalnym stanie sprzed edycji. Korzystając z tej funkcjonalności, możemy utworzyć uniwersalny szablon, który obsłuży oba przypadki w katalogu entries/templates/entries/. Ważne jest również dodanie podstawowego formularza do przesyłania danych, co zapewni prawidłowe działanie aplikacji i usprawni interfejs użytkownika. Takie podejście zapewnia większą elastyczność i użyteczność formularzy w Django, zapewniając jednocześnie niezawodność i stabilność wyświetlanej zawartości.
Po załadowaniu tego szablonu w trybie CreateView w celu utworzenia nowego rekordu, formularz będzie pusty. Kliknięcie przycisku Anuluj przekieruje użytkownika do listy wszystkich rekordów. Jeśli szablon zostanie użyty w trybie CreateUpdateView do edycji istniejącego rekordu, formularz zostanie wypełniony najnowszym tytułem i treścią. Kliknięcie przycisku Anuluj spowoduje powrót użytkownika do strony rekordu, a zmiany nie zostaną zapisane.
Istnieje kilka metod renderowania formularza w szablonie Django. Podczas korzystania z konstrukcji {{ form.as_p }}, Django automatycznie generuje pola określone w widoku i opakowuje je w znaczniki akapitu HTML. Pamiętaj o dodaniu do formularza znacznika {% csrf_token %}, który zapewnia ochronę przed fałszowaniem żądań między witrynami i dowodzi, że wysłanie formularza zostało zainicjowane przez użytkownika. To ważny krok w zapewnieniu bezpieczeństwa aplikacji internetowej.
Utwórzmy plik entry_confirm_delete.html w katalogu entries/templates/entries/. Ten plik będzie używany do potwierdzania usunięcia wpisu. Ważne jest, aby poprawnie skonfigurować jego zawartość, aby zapewnić użytkownikom przejrzysty interfejs. Dodamy tekst informacyjny i przyciski do potwierdzania lub anulowania akcji, co poprawi komfort użytkowania i użyteczność witryny. Powinniśmy również rozważyć użycie zoptymalizowanych pod kątem SEO tytułów i meta tagów, aby poprawić widoczność strony w wyszukiwarkach. Przyciągnie to więcej użytkowników i poprawi ogólną wydajność aplikacji internetowej.
Po utworzeniu widoków i ich szablonów należy skonfigurować ścieżki dostępu do nich za pośrednictwem interfejsu internetowego. W tym celu należy dodać trzy dodatkowe ścieżki do pliku urlpatterns w pliku entries/urls.py. Prawidłowo skonfigurowane ścieżki zapewnią wygodny dostęp do widoków i usprawnią nawigację w witrynie, co może pozytywnie wpłynąć na SEO.
Funkcja entry-create wymaga jedynie ścieżki głównej do utworzenia nowej notatki. Podobnie, operacje aktualizacji i usuwania wpisów wymagają klucza podstawowego, który identyfikuje konkretny wpis, który ma zostać zaktualizowany lub usunięty. Zapewnia to dokładność i bezpieczeństwo przetwarzania danych w systemie, umożliwiając efektywne zarządzanie informacjami.
Wszystkie podstawowe funkcje bloga zostały zaimplementowane: użytkownicy mogą przeglądać wpisy, a także je tworzyć, aktualizować i usuwać za pośrednictwem interfejsu internetowego. Uruchommy serwer WWW i przejdźmy do strony dodawania nowego wpisu, aby upewnić się, że nasz kod działa poprawnie.
Wszystko działa. Jest w porządku, ale w interfejsie brakuje przycisków do tworzenia, aktualizowania lub usuwania wpisów. To zostanie naprawione w kolejnym etapie rozwoju.
Ułatwianie korzystania z bloga
Aby utworzyć, edytować lub usunąć wpis, ważne jest, aby zapamiętać odpowiednie adresy URL i wpisać je w pasek adresu. Może to być uciążliwe dla użytkowników. Aby uprościć ten proces, dodamy linki do naszych widoków bezpośrednio na stronach bloga. Usprawni to nawigację i sprawi, że interakcja z treścią będzie wygodniejsza i efektywniejsza.
Zacznijmy od dodania linku do utworzenia nowego wpisu w szablonie entries/templates/entries/entry_list.html. Aby to zrobić, otwórz plik i zaimplementuj poniższy kod w bloku {% block content %}:
Aby zapewnić możliwość szybkiej edycji i usuwania wpisów, należy wprowadzić zmiany w szablonie entries/templates/entries/entry_detail.html. Kod powinien być umieszczony bezpośrednio za określonym elementem szablonu. Umożliwi to użytkownikom efektywne zarządzanie treścią na stronie. Upewnij się, że zmiany są spójne z ogólną strukturą i stylem szablonu, aby zachować spójny projekt.
Otwórzmy naszego bloga i przetestujmy jego funkcjonalność. To zapewni, że wszystkie elementy działają poprawnie, a treść jest zoptymalizowana pod kątem użytkowników i wyszukiwarek. Regularne sprawdzanie jest niezbędne do utrzymania wysokiej jakości bloga i poprawy doświadczeń użytkowników.
Przyciski w interfejsie internetowym działają prawidłowo. Wszystkie akcje są wykonywane poprawnie, co wskazuje na poprawną integrację i konfigurację elementów interfejsu. Użytkownicy mogą łatwo korzystać z przycisków, co poprawia ogólne wrażenia z pracy z aplikacją internetową.
Co dalej?
Nasz blog działa, ale wymaga pewnych ulepszeń. Musimy zaimplementować powiadomienia o tworzeniu, edytowaniu i usuwaniu wpisów, a także zapewnić administratorowi możliwość oznaczania poszczególnych wpisów jako ulubionych i sortowania ich w dowolnej kolejności. Aby uzyskać bardziej szczegółowe informacje na temat tych funkcji i ich implementacji, zalecamy zapoznanie się z oficjalną dokumentacją frameworka Django. Pomoże to poprawić funkcjonalność bloga i zwiększyć jego użyteczność.
Istnieje wiele książek poświęconych różnym przykładom wykorzystania frameworka. Wśród nich wyróżniają się trzy polecane publikacje, które pomogą Ci lepiej zrozumieć jego możliwości i metody zastosowania. Książki te zawierają praktyczne przykłady i pomocne wskazówki, dzięki czemu stanowią doskonałe źródło informacji dla programistów, którzy chcą udoskonalić swoje umiejętności korzystania z tego frameworka.
- Django dla początkujących, autor: William Vincent;
- Django dla profesjonalistów: Tworzenie stron internetowych w języku Python i Django autorstwa Williama Vincenta;
- Wzorce projektowe i najlepsze praktyki Django autorstwa Aruna Ravindrana.
Przeczytaj także:
- Tworzenie pierwszej aplikacji mobilnej w Xamarin
- „Data Scientist to najseksowniejszy zawód XXI wieku”
- Czym zajmuje się programista stron internetowych i jakie umiejętności są potrzebne w pierwszej pracy?
