Développement Django : Comment créer une belle application Web en utilisant Python et Django

Django est un framework d'application Web Python populaire qui fournit un ensemble puissant d'outils et de moteurs qui peuvent nous aider à créer facilement des applications Web belles et évolutives.

Dans cet article, nous présenterons comment créer une belle application Web en utilisant Python et Django. Nous allons commencer par installer Django et créer un tout nouveau projet Django. Ensuite, nous créerons une application Web simple et présenterons comment créer des modèles, des vues et des modèles de base de données. Enfin, nous ajouterons quelques styles et animations à cette application pour la rendre plus jolie.

1. Installer Django

Avant de commencer à créer notre application Web, nous devons installer Django sur notre ordinateur local. Django peut être installé avec la commande suivante :

pip install Django

Si pip n'est pas installé, veuillez d'abord installer pip. pip est un gestionnaire de packages Python qui vous permet de gérer facilement les bibliothèques et dépendances Python.

Une fois l'installation terminée, vous pouvez vérifier si Django a été installé avec succès en exécutant la commande suivante :

django-admin --version

Si Django a été installé avec succès, vous verrez le numéro de version de Django.

2. Créez un nouveau projet Django

Maintenant que Django est installé, nous pouvons commencer à créer notre application Web. Tout d’abord, nous devons créer un nouveau projet Django. Un nouveau projet Django peut être créé avec la commande suivante :

django-admin startproject myproject

Cette commande créera un nouveau répertoire appelé "monprojet" et créera la structure de base d'un projet Django en son sein.

3. Créer une application Web simple

Nous avons créé un nouveau projet Django et nous pouvons maintenant commencer à créer notre application Web. Nous créerons une application Web simple qui permettra aux utilisateurs de publier et de consulter des publications sur le site Web.

Pour créer cette application Web, nous devons effectuer les étapes suivantes :

1. Créer une nouvelle application Django
2 Créer un modèle de base de données
3. Créer des vues et des modèles

Tout d'abord, nous allons créer une nouvelle. Application Django. Une nouvelle application Django peut être créée avec la commande suivante :

python manage.py startapp myapp

Cette commande créera un nouveau répertoire appelé "myapp" et créera la structure de base d'une application Django en son sein.

Ensuite, nous devons créer un modèle de base de données. Notre modèle de base de données définira l'objet Post et décrira les champs et propriétés de l'objet Post.

Créez un fichier nommé "models.py" dans le répertoire myapp et ajoutez le code suivant :

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    pub_date = models.DateTimeField('date published')

Dans le code ci-dessus, nous définissons un objet nommé "Post", qui possède trois attributs : title , content et pub_date.

Les attributs title et content sont des champs de type CharField et TextField. Ils stockeront le titre et le contenu de notre article. L'attribut pub_date est un champ de type DateTimeField qui stockera l'heure de publication de notre article.

Ensuite, nous devons créer des vues et des modèles. Les vues sont l'endroit où les applications Web traitent les requêtes et les modèles déterminent comment nos applications Web doivent être affichées dans le navigateur de l'utilisateur.

Créez un fichier nommé "views.py" dans le répertoire myapp et ajoutez le code suivant :

from django.shortcuts import render
from django.http import HttpResponse
from .models import Post

def index(request):
    latest_posts = Post.objects.order_by('-pub_date')[:5]
    context = {'latest_posts': latest_posts}
    return render(request, 'myapp/index.html', context)

def detail(request, post_id):
    post = Post.objects.get(pk=post_id)
    return render(request, 'myapp/detail.html', {'post': post})

Dans le code ci-dessus, nous avons défini deux vues : index et détail. La vue index interrogera la base de données pour les 5 publications les plus récentes et les transmettra au modèle. La vue détaillée interroge la base de données pour une publication spécifique en fonction de post_id et la transmet au modèle.

Ensuite, nous devons créer le modèle. Créez un nouveau répertoire nommé « templates » sous le répertoire myapp et ajoutez deux fichiers de modèles HTML « myapp/index.html » et « myapp/detail.html ».

Dans le modèle "myapp/index.html", nous afficherons les 5 derniers articles :

{% for post in latest_posts %}
    <div class="post">
        <h2 class="title">{{ post.title }}</h2>
        <p class="date">{{ post.pub_date }}</p>
        <p class="content">{{ post.content }}</p>
    </div>
{% endfor %}

Dans le modèle "myapp/detail.html", nous afficherons l'article spécifique :

<div class="post">
    <h2 class="title">{{ post.title }}</h2>
    <p class="date">{{ post.pub_date }}</p>
    <p class="content">{{ post.content }}</p>
</div>

Maintenant, nous avons créé Maintenant que vous avez une simple application Web Django, vous pouvez l’exécuter et voir les effets. Entrez la commande suivante dans le terminal pour démarrer le serveur :

python manage.py runserver

Ouvrez le navigateur et entrez http://localhost:8000/myapp/, vous verrez une liste de 5 articles récemment publiés.

4. Ajouter des styles et des animations

Maintenant que nous avons créé une application Web simple, ajoutons-y quelques styles et animations. Nous utiliserons le framework Bootstrap et la bibliothèque jQuery pour réaliser cette tâche.

Tout d'abord, nous devons ajouter des fichiers statiques à l'application. Créez un nouveau répertoire appelé "static" sous le répertoire myapp et créez un autre répertoire appelé "myapp" à l'intérieur. Sous le répertoire « myapp », nous ajouterons deux sous-répertoires, css et js. Sous ces deux sous-répertoires, nous ajouterons des fichiers nommés « style.css » et « script.js ».

Dans le fichier "style.css", nous ajouterons quelques styles de base :

.post {
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 10px;
}

.title {
    color: #ff0000;
    font-size: 24px;
    font-weight: bold;
}

.date {
    color: #00ff00;
    font-size: 14px;
    font-style: italic;
}

.content {
    color: #0000ff;
    font-size: 16px;
}

Dans le fichier "script.js", nous ajouterons quelques animations de base :

$(document).ready(function() {
    $('.post').hover(function() {
        $(this).animate({ backgroundColor: "#FEEBD4" }, 200);
    }, function() {
        $(this).animate({ backgroundColor: "#fff" }, 200);
    });
});

Dans le code ci-dessus, nous utilisons la bibliothèque jQuery pour changez la couleur de fond de chaque article du blanc au rose lorsque l'utilisateur le survole :

Maintenant que nous avons ajouté des styles et des animations à notre application Web Django, exécutons-la et voyons l'effet ! Ouvrez le navigateur et entrez http://localhost:8000/myapp/. Vous verrez une liste de 5 articles récemment publiés, qui ont tous été modifiés. Lorsque vous survolez chaque article, leur couleur d'arrière-plan deviendra rose, ce qui les rendra plus jolis.

Conclusion

Dans cet article, nous avons expliqué comment créer une belle application Web en utilisant Python et Django. Nous avons commencé par installer Django, créer un nouveau projet Django et créer une application Web simple. Nous avons utilisé le modèle de base de données de Django pour définir l'objet Post, ainsi que les vues et modèles de Django pour présenter et interroger les données. Enfin, nous avons également ajouté quelques styles et animations à l'application Web pour la rendre plus jolie.

Django est un puissant framework d'application Web Python qui nous aide à créer facilement de belles applications Web évolutives. Si vous envisagez de créer votre propre application Web à l'aide de Python et Django, ces conseils devraient vous aider à démarrer rapidement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!