mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-21 21:53:30 +00:00
Rewrite documentation with MkDocs
This commit is contained in:
thomas girod
parent
a1296dc7af
commit
07b625d4aa
2
.github/workflows/deploy.yml
vendored
2
.github/workflows/deploy.yml
vendored
@ -37,7 +37,7 @@ jobs:
|
|||||||
pushd ${{secrets.SITH_PATH}}
|
pushd ${{secrets.SITH_PATH}}
|
||||||
|
|
||||||
git pull
|
git pull
|
||||||
poetry install
|
poetry install --with prod --without dev,docs,tests
|
||||||
poetry run ./manage.py install_xapian
|
poetry run ./manage.py install_xapian
|
||||||
poetry run ./manage.py migrate
|
poetry run ./manage.py migrate
|
||||||
echo "yes" | poetry run ./manage.py collectstatic
|
echo "yes" | poetry run ./manage.py collectstatic
|
||||||
|
|||||||
21
.github/workflows/deploy_docs.yml
vendored
Normal file
21
.github/workflows/deploy_docs.yml
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
name: deploy_docs
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
permissions:
|
||||||
|
contents: write
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
- uses: ./.github/actions/setup_project
|
||||||
|
- run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
|
||||||
|
- uses: actions/cache@v3
|
||||||
|
with:
|
||||||
|
key: mkdocs-material-${{ env.cache_id }}
|
||||||
|
path: .cache
|
||||||
|
restore-keys: |
|
||||||
|
mkdocs-material-
|
||||||
|
- run: poetry run mkdocs gh-deploy --force
|
||||||
2
.github/workflows/taiste.yml
vendored
2
.github/workflows/taiste.yml
vendored
@ -36,7 +36,7 @@ jobs:
|
|||||||
pushd ${{secrets.SITH_PATH}}
|
pushd ${{secrets.SITH_PATH}}
|
||||||
|
|
||||||
git pull
|
git pull
|
||||||
poetry install
|
poetry install --with prod --without dev,docs,tests
|
||||||
poetry run ./manage.py install_xapian
|
poetry run ./manage.py install_xapian
|
||||||
poetry run ./manage.py migrate
|
poetry run ./manage.py migrate
|
||||||
echo "yes" | poetry run ./manage.py collectstatic
|
echo "yes" | poetry run ./manage.py collectstatic
|
||||||
|
|||||||
@ -5,8 +5,8 @@
|
|||||||
<a href="#">
|
<a href="#">
|
||||||
<img src="https://img.shields.io/github/checks-status/ae-utbm/sith3/master?logo=github&style=for-the-badge&label=BUILD">
|
<img src="https://img.shields.io/github/checks-status/ae-utbm/sith3/master?logo=github&style=for-the-badge&label=BUILD">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://sith-ae.readthedocs.io/">
|
<a href="https://ae-utbm.github.io/sith3">
|
||||||
<img src="https://img.shields.io/readthedocs/sith-ae?logo=readthedocs&style=for-the-badge">
|
<img src="https://img.shields.io/badge/Documentation?style=for-the-badge&logo=MaterialForMkDocs">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://discord.gg/XK9WfPsUFm">
|
<a href="https://discord.gg/XK9WfPsUFm">
|
||||||
<img src="https://img.shields.io/discord/971448179075731476?label=Discord&logo=discord&style=for-the-badge">
|
<img src="https://img.shields.io/discord/971448179075731476?label=Discord&logo=discord&style=for-the-badge">
|
||||||
|
|||||||
@ -1,90 +0,0 @@
|
|||||||
#!/usr/bin/env python3
|
|
||||||
#
|
|
||||||
# Copyright 2019
|
|
||||||
# - Sli <antoine@bartuccio.fr>
|
|
||||||
#
|
|
||||||
# Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
|
|
||||||
# http://ae.utbm.fr.
|
|
||||||
#
|
|
||||||
# This program is free software; you can redistribute it and/or modify it under
|
|
||||||
# the terms of the GNU General Public License a published by the Free Software
|
|
||||||
# Foundation; either version 3 of the License, or (at your option) any later
|
|
||||||
# version.
|
|
||||||
#
|
|
||||||
# This program is distributed in the hope that it will be useful, but WITHOUT
|
|
||||||
# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
|
|
||||||
# FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
|
|
||||||
# details.
|
|
||||||
#
|
|
||||||
# You should have received a copy of the GNU General Public License along with
|
|
||||||
# this program; if not, write to the Free Sofware Foundation, Inc., 59 Temple
|
|
||||||
# Place - Suite 330, Boston, MA 02111-1307, USA.
|
|
||||||
#
|
|
||||||
#
|
|
||||||
|
|
||||||
import os
|
|
||||||
import signal
|
|
||||||
import sys
|
|
||||||
from http.server import CGIHTTPRequestHandler, test
|
|
||||||
|
|
||||||
from django.core.management.base import BaseCommand
|
|
||||||
from django.utils import autoreload
|
|
||||||
|
|
||||||
|
|
||||||
class Command(BaseCommand):
|
|
||||||
help = "Generate Sphinx documentation and launch basic server"
|
|
||||||
|
|
||||||
default_addr = "127.0.0.1"
|
|
||||||
default_port = "8080"
|
|
||||||
|
|
||||||
def add_arguments(self, parser):
|
|
||||||
parser.add_argument(
|
|
||||||
"addrport", nargs="?", help="Optional port number, or ipaddr:port"
|
|
||||||
)
|
|
||||||
|
|
||||||
def build_documentation(self):
|
|
||||||
os.chdir(os.path.join(self.project_dir, "doc"))
|
|
||||||
err = os.system("make html")
|
|
||||||
|
|
||||||
if err != 0:
|
|
||||||
self.stdout.write("A build error occured")
|
|
||||||
|
|
||||||
def start_server(self, **kwargs):
|
|
||||||
os.chdir(os.path.join(self.project_dir, "doc", "_build/html"))
|
|
||||||
addr = self.default_addr
|
|
||||||
port = self.default_port
|
|
||||||
if kwargs["addrport"]:
|
|
||||||
addrport = kwargs["addrport"].split(":")
|
|
||||||
|
|
||||||
addr = addrport[0]
|
|
||||||
|
|
||||||
if len(addrport) > 1:
|
|
||||||
port = addrport[1]
|
|
||||||
|
|
||||||
if not port.isnumeric():
|
|
||||||
self.stdout.write("%s is not a valid port" % (port,))
|
|
||||||
sys.exit(0)
|
|
||||||
|
|
||||||
test(HandlerClass=CGIHTTPRequestHandler, port=int(port), bind=addr)
|
|
||||||
|
|
||||||
def build_and_start_server(self, **kwargs):
|
|
||||||
self.build_documentation()
|
|
||||||
self.start_server(**kwargs)
|
|
||||||
|
|
||||||
def handle(self, *args, **kwargs):
|
|
||||||
self.project_dir = os.getcwd()
|
|
||||||
|
|
||||||
signal.signal(signal.SIGTERM, lambda *args: sys.exit(0))
|
|
||||||
try:
|
|
||||||
if os.environ.get(autoreload.DJANGO_AUTORELOAD_ENV) == "true":
|
|
||||||
reloader = autoreload.get_reloader()
|
|
||||||
reloader.watch_dir(os.path.join(self.project_dir, "doc"), "**/*.rst")
|
|
||||||
autoreload.logger.info(
|
|
||||||
"Watching for file changes with %s", reloader.__class__.__name__
|
|
||||||
)
|
|
||||||
autoreload.start_django(reloader, self.build_and_start_server, **kwargs)
|
|
||||||
else:
|
|
||||||
exit_code = autoreload.restart_with_reloader()
|
|
||||||
sys.exit(exit_code)
|
|
||||||
except KeyboardInterrupt:
|
|
||||||
pass
|
|
||||||
@ -21,20 +21,19 @@
|
|||||||
#
|
#
|
||||||
#
|
#
|
||||||
|
|
||||||
import os
|
from pathlib import Path
|
||||||
|
|
||||||
|
from django.conf import settings
|
||||||
from django.core.management.base import BaseCommand
|
from django.core.management.base import BaseCommand
|
||||||
|
|
||||||
from core.markdown import markdown
|
from core.markdown import markdown
|
||||||
|
|
||||||
|
|
||||||
class Command(BaseCommand):
|
class Command(BaseCommand):
|
||||||
help = "Output the fully rendered doc/SYNTAX.md file"
|
help = "Output the fully rendered SYNTAX.md file"
|
||||||
|
|
||||||
def handle(self, *args, **options):
|
def handle(self, *args, **options):
|
||||||
root_path = os.path.dirname(
|
root_path = Path(settings.BASE_DIR)
|
||||||
os.path.dirname(os.path.dirname(os.path.dirname(__file__)))
|
with open(root_path / "core/fixtures/SYNTAX.md", "r") as md:
|
||||||
)
|
|
||||||
with open(os.path.join(root_path) + "/doc/SYNTAX.md", "r") as md:
|
|
||||||
result = markdown(md.read())
|
result = markdown(md.read())
|
||||||
print(result, end="")
|
print(result, end="")
|
||||||
|
|||||||
@ -383,7 +383,7 @@ Welcome to the wiki page!
|
|||||||
# Adding syntax help page
|
# Adding syntax help page
|
||||||
p = Page(name="Aide_sur_la_syntaxe")
|
p = Page(name="Aide_sur_la_syntaxe")
|
||||||
p.save(force_lock=True)
|
p.save(force_lock=True)
|
||||||
with open(root_path / "doc" / "SYNTAX.md", "r") as rm:
|
with open(root_path / "core" / "fixtures" / "SYNTAX.md", "r") as rm:
|
||||||
PageRev(
|
PageRev(
|
||||||
page=p, title="Aide sur la syntaxe", author=skia, content=rm.read()
|
page=p, title="Aide sur la syntaxe", author=skia, content=rm.read()
|
||||||
).save()
|
).save()
|
||||||
|
|||||||
@ -14,7 +14,6 @@
|
|||||||
#
|
#
|
||||||
from __future__ import annotations
|
from __future__ import annotations
|
||||||
|
|
||||||
import os
|
|
||||||
import re
|
import re
|
||||||
from typing import TYPE_CHECKING
|
from typing import TYPE_CHECKING
|
||||||
|
|
||||||
@ -131,9 +130,3 @@ markdown = mistune.create_markdown(
|
|||||||
"url",
|
"url",
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
|
|
||||||
if __name__ == "__main__":
|
|
||||||
root_path = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
|
||||||
with open(os.path.join(root_path) + "/doc/SYNTAX.md", "r") as md:
|
|
||||||
result = markdown(md.read())
|
|
||||||
print(result, end="")
|
|
||||||
|
|||||||
@ -215,9 +215,9 @@ def test_custom_markdown_syntax(md, html):
|
|||||||
|
|
||||||
|
|
||||||
def test_full_markdown_syntax():
|
def test_full_markdown_syntax():
|
||||||
doc_path = Path(settings.BASE_DIR) / "doc"
|
syntax_path = Path(settings.BASE_DIR) / "core" / "fixtures"
|
||||||
md = (doc_path / "SYNTAX.md").read_text()
|
md = (syntax_path / "SYNTAX.md").read_text()
|
||||||
html = (doc_path / "SYNTAX.html").read_text()
|
html = (syntax_path / "SYNTAX.html").read_text()
|
||||||
result = markdown(md)
|
result = markdown(md)
|
||||||
assert result == html
|
assert result == html
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
A Pen created at CodePen.io. You can find this one at https://codepen.io/anon/pen/PKVVXY.
|
|
||||||
|
|
||||||
This page was used to generate the color palette of the sith.
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #424242;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
margin: 5rem 0;
|
|
||||||
width: 30rem;
|
|
||||||
background: #FAFAFA;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
box-shadow: 0 4px 5px hsla(0, 0%, 0%, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group:not(:first-child) {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-group > .color-code {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-hue {
|
|
||||||
height: 2rem;
|
|
||||||
align-self: stretch;
|
|
||||||
background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-preview {
|
|
||||||
height: 5rem;
|
|
||||||
width: 5rem;
|
|
||||||
background-color: lightgrey;
|
|
||||||
border: 1px solid black;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-text {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
@ -1,422 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html >
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Color Theory Palette creator</title>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
|
|
||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #424242;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
margin: 5rem 0;
|
|
||||||
width: 30rem;
|
|
||||||
background: #FAFAFA;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
box-shadow: 0 4px 5px hsla(0, 0%, 0%, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group:not(:first-child) {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-display {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-group > .color-code {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-hue {
|
|
||||||
height: 2rem;
|
|
||||||
align-self: stretch;
|
|
||||||
background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-preview {
|
|
||||||
height: 5rem;
|
|
||||||
width: 5rem;
|
|
||||||
background-color: lightgrey;
|
|
||||||
border: 1px solid black;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-text {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<form name="color-theory" class="form">
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="color-hue"></div>
|
|
||||||
<input type="range" name="first-color" class="form-input" min="0" max="359" value="220">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<fieldset class="first-color">
|
|
||||||
<legend>First color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview"></div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="second-color">
|
|
||||||
<legend>Second color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview"></div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<fieldset class="primary-color">
|
|
||||||
<legend>Primary color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview"></div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="complementary-color">
|
|
||||||
<legend>Secondary color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview"></div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<fieldset class="text-on-primary">
|
|
||||||
<legend>Text on primary color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="text-on-complementary">
|
|
||||||
<legend>Text on complementary color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<fieldset class="complementary-neutral-light">
|
|
||||||
<legend>Complementary neutral light color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="complementary-neutral">
|
|
||||||
<legend>Complementary neutral color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="complementary-neutral-dark">
|
|
||||||
<legend>Complementary neutral dark color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="primary-neutral-light">
|
|
||||||
<legend>Primary neutral light color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="primary-neutral">
|
|
||||||
<legend>Primary neutral color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="primary-neutral-dark">
|
|
||||||
<legend>Primary neutral dark color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<fieldset class="white">
|
|
||||||
<legend>"White" color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="black">
|
|
||||||
<legend>"Black" color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<fieldset class="primary-light">
|
|
||||||
<legend>Primary light color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="primary-color">
|
|
||||||
<legend>Primary color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset class="primary-dark">
|
|
||||||
<legend>Primary dark color</legend>
|
|
||||||
<div class="color-group">
|
|
||||||
<div class="color-preview">
|
|
||||||
<span class="color-text">Ab</span>
|
|
||||||
</div>
|
|
||||||
<input type="text" class="color-code" readonly>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<template id="scss-template">
|
|
||||||
<style type="text/scss">
|
|
||||||
//From https://github.com/tallys/color-theory
|
|
||||||
|
|
||||||
//Pick a color
|
|
||||||
|
|
||||||
// THIS IS SET IN THE THEME FILE AT THE TOP LEVEL
|
|
||||||
// $first-color: hsl(17, 100%, 50%);
|
|
||||||
|
|
||||||
// Find the complement
|
|
||||||
|
|
||||||
$second-color: complement($first-color);
|
|
||||||
|
|
||||||
//Check if you have a cool color on your hands. Cool colors will overpower warm colors when mixing.
|
|
||||||
|
|
||||||
@function is-cool-color($color) {
|
|
||||||
@return hue($color) < 310 and hue($color) > 140;
|
|
||||||
}
|
|
||||||
|
|
||||||
@function is-high-key-value($color) {
|
|
||||||
@return hue($color) > 20 and hue($color) < 190;
|
|
||||||
}
|
|
||||||
|
|
||||||
@function is-highest-key-value($color) {
|
|
||||||
@return hue($color) > 30 and hue($color) <90;
|
|
||||||
}
|
|
||||||
|
|
||||||
//Establish a relationship (similar lighting conditions) between colors.
|
|
||||||
|
|
||||||
@function harmonious-mix($mix, $base) {
|
|
||||||
@if (is-cool-color($mix)){
|
|
||||||
@if is-high-key-value($base) {
|
|
||||||
@return mix($mix, $base, 11%);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return mix($mix, $base, 16%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@if is-high-key-value($base) {
|
|
||||||
@return mix($mix, $base, 13%);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return mix($mix, $base, 23%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@function mix-neutral($color) {
|
|
||||||
@if (is-highest-key-value($color)) {
|
|
||||||
@if is-high-key-value(complement($color)) {
|
|
||||||
@return mix(complement($color), $color, 19%);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return mix(complement($color), $color, 13%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@else if (is-high-key-value($color)) {
|
|
||||||
@if is-high-key-value(complement($color)) {
|
|
||||||
@return mix(complement($color), $color, 31%);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return mix(complement($color), $color, 23%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@if is-highest-key-value(complement($color)) {
|
|
||||||
@return mix(complement($color), $color, 31%);
|
|
||||||
}
|
|
||||||
@if is-high-key-value(complement($color)) {
|
|
||||||
@return mix(complement($color), $color, 26%);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return mix(complement($color), $color, 23%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@function pick-contrast-of($color) {
|
|
||||||
@if is-high-key-value($color){
|
|
||||||
@if lightness($color) < 30% {
|
|
||||||
@return lighten(complement($color), 86);
|
|
||||||
}
|
|
||||||
@else if lightness($color) > 70% {
|
|
||||||
@return darken(complement($color), 68);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return darken(complement($color), 53);
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
@if lightness($color) < 30% {
|
|
||||||
@return lighten(complement($color), 86);
|
|
||||||
}
|
|
||||||
@else if lightness($color) > 70% {
|
|
||||||
@return darken(complement($color), 68);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return lighten(complement($color), 53);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$primary-color: harmonious-mix($second-color, $first-color);
|
|
||||||
$complementary-color: harmonious-mix($first-color, $second-color);
|
|
||||||
|
|
||||||
// Complementary Neutrals, highlight, midtone, shadow
|
|
||||||
|
|
||||||
$complementary-neutral: mix-neutral($complementary-color);
|
|
||||||
$complementary-neutral-light: lighten($complementary-neutral, 33);
|
|
||||||
$complementary-neutral-dark: darken($complementary-neutral, 33);
|
|
||||||
|
|
||||||
// Primary neutrals, highlight, midtone, shadow`
|
|
||||||
|
|
||||||
$primary-neutral: mix-neutral($primary-color);
|
|
||||||
$primary-neutral-light: lighten($primary-neutral, 33);
|
|
||||||
$primary-neutral-dark: darken($primary-neutral, 33);
|
|
||||||
|
|
||||||
// Primary tint and shade
|
|
||||||
|
|
||||||
$primary-light: mix($primary-neutral-light, $primary-color, 45%);
|
|
||||||
$primary-dark: mix($primary-neutral-dark, $primary-color, 45%);
|
|
||||||
|
|
||||||
$complementary-light: mix($complementary-neutral-light, $complementary-color, 45%);
|
|
||||||
|
|
||||||
// Pure neutrals, highlight, midtone, shadow
|
|
||||||
|
|
||||||
$white: lighten($primary-neutral-light, 15);
|
|
||||||
$neutral-gray: grayscale($primary-neutral);
|
|
||||||
$primary-gray: mix($primary-color, $complementary-color, 30);
|
|
||||||
$complementary-gray: mix($complementary-color, $primary-color, 63);
|
|
||||||
$black: grayscale($complementary-neutral-dark);
|
|
||||||
|
|
||||||
// Analogous Colors
|
|
||||||
|
|
||||||
$analogous-color: adjust-hue($complementary-color, -40);
|
|
||||||
$complementary-analogous: mix($analogous-color, $complementary-color, 66);
|
|
||||||
|
|
||||||
.first-color {color: unquote( 'hsl(') hue($first-color), saturation($first-color), lightness($first-color) unquote(')')}
|
|
||||||
.second-color {color: unquote( 'hsl(') hue($second-color), saturation($second-color), lightness($second-color) unquote(')')}
|
|
||||||
|
|
||||||
.primary-color {color: unquote( 'hsl(') hue($primary-color), saturation($primary-color), lightness($primary-color) unquote(')')}
|
|
||||||
.complementary-color {color: unquote( 'hsl(') hue($complementary-color), saturation($complementary-color), lightness($complementary-color) unquote(')')}
|
|
||||||
|
|
||||||
.primary-neutral-light {color: unquote( 'hsl(') hue($primary-neutral-light), saturation($primary-neutral-light), lightness($primary-neutral-light) unquote(')')}
|
|
||||||
.primary-neutral {color: unquote( 'hsl(') hue($primary-neutral), saturation($primary-neutral), lightness($primary-neutral) unquote(')')}
|
|
||||||
.primary-neutral-dark {color: unquote( 'hsl(') hue($primary-neutral-dark), saturation($primary-neutral-dark), lightness($primary-neutral-dark) unquote(')')}
|
|
||||||
.complementary-neutral-light {color: unquote( 'hsl(') hue($complementary-neutral-light), saturation($complementary-neutral-light), lightness($complementary-neutral-light) unquote(')')}
|
|
||||||
.complementary-neutral {color: unquote( 'hsl(') hue($complementary-neutral), saturation($complementary-neutral), lightness($complementary-neutral) unquote(')')}
|
|
||||||
.complementary-neutral-dark {color: unquote( 'hsl(') hue($complementary-neutral-dark), saturation($complementary-neutral-dark), lightness($complementary-neutral-dark) unquote(')')}
|
|
||||||
|
|
||||||
.white {color: unquote( 'hsl(') hue($white), saturation($white), lightness($white) unquote(')')}
|
|
||||||
.black {color: unquote( 'hsl(') hue($black), saturation($black), lightness($black) unquote(')')}
|
|
||||||
|
|
||||||
.primary-light {color: unquote( 'hsl(') hue($primary-light), saturation($primary-light), lightness($primary-light) unquote(')')}
|
|
||||||
.primary-dark {color: unquote( 'hsl(') hue($primary-dark), saturation($primary-dark), lightness($primary-dark) unquote(')')}
|
|
||||||
|
|
||||||
.complementary-light {color: unquote( 'hsl(') hue($complementary-light), saturation($complementary-light), lightness($complementary-light) unquote(')')}
|
|
||||||
.primary-gray {color: unquote( 'hsl(') hue($primary-gray), saturation($primary-gray), lightness($primary-gray) unquote(')')}
|
|
||||||
.neutral-gray {color: unquote( 'hsl(') hue($neutral-gray), saturation($neutral-gray), lightness($neutral-gray) unquote(')')}
|
|
||||||
.complementary-gray {color: unquote( 'hsl(') hue($complementary-gray), saturation($complementary-gray), lightness($complementary-gray) unquote(')')}
|
|
||||||
</style>
|
|
||||||
</template>
|
|
||||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.3/sass.sync.js'></script>
|
|
||||||
|
|
||||||
<script src="js/index.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
/* jshint esversion: 6 */
|
|
||||||
|
|
||||||
// This is using Sass.js to use Sass built-in color mixing functions
|
|
||||||
|
|
||||||
const firstColorChooser = document.forms['color-theory']['first-color'];
|
|
||||||
const firstColor = document.querySelector('.first-color');
|
|
||||||
const secondColor = document.querySelector('.second-color');
|
|
||||||
|
|
||||||
let hue = undefined;
|
|
||||||
let comp = undefined;
|
|
||||||
|
|
||||||
updateColors();
|
|
||||||
Sass.options({
|
|
||||||
precision: 1
|
|
||||||
});
|
|
||||||
computeScss();
|
|
||||||
|
|
||||||
document.forms['color-theory']['first-color'].addEventListener('input', updateColors);
|
|
||||||
|
|
||||||
document.forms['color-theory']['first-color'].addEventListener('change', computeScss);
|
|
||||||
|
|
||||||
function updateColors(ev) {
|
|
||||||
hue = parseInt(firstColorChooser.value);
|
|
||||||
comp = (hue + 180) % 360;
|
|
||||||
setColorPreview([firstColor], `hsl(${hue}, 100%, 50%)`);
|
|
||||||
setColorPreview([secondColor], `hsl(${comp}, 100%, 50%)`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setColorPreview(fieldsets, color) {
|
|
||||||
Array.from(fieldsets).forEach(fieldset => {
|
|
||||||
const preview = fieldset.querySelector('.color-preview');
|
|
||||||
preview.style.backgroundColor = fieldset.querySelector('.color-code').value = color;
|
|
||||||
const text = fieldset.querySelector('.color-text')
|
|
||||||
if(text)
|
|
||||||
text.style.color = computeTextColor(window.getComputedStyle(preview).backgroundColor);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function setColorText(fieldsets, bg, text) {
|
|
||||||
Array.from(fieldsets).forEach(fieldset => {
|
|
||||||
fieldset.querySelector('.color-preview').style.backgroundColor = bg;
|
|
||||||
fieldset.querySelector('.color-text').style.color = fieldset.querySelector('.color-code').value = text;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeScss() {
|
|
||||||
Sass.compile(
|
|
||||||
`$first-color: hsl(${hue}, 100%, 50%);` +
|
|
||||||
document.querySelector('#scss-template').content.firstElementChild.textContent, computedScssHandler);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function computedScssHandler(result) {
|
|
||||||
let colors = {};
|
|
||||||
result.text.split('\n\n').forEach(rule => {
|
|
||||||
const color = /\.([\w\-]+) {\s*color: (hsl\() (\d{1,3}(?:\.\d+)?)deg(.*) (\));\s*}/.exec(rule).splice(1, 5).join('').split('hsl');
|
|
||||||
colors[color[0]] = `hsl${color[1]}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
for (let colorName in colors)
|
|
||||||
if (document.querySelector(`.${colorName}`)) setColorPreview(document.querySelectorAll(`.${colorName}`), colors[colorName]);
|
|
||||||
|
|
||||||
const primaryTextColor = computeTextColor(window.getComputedStyle(document.querySelector('.primary-color .color-preview')).backgroundColor);
|
|
||||||
const complementaryTextColor = computeTextColor(window.getComputedStyle(document.querySelector('.complementary-color .color-preview')).backgroundColor);
|
|
||||||
setColorText([document.querySelector('.text-on-primary')], document.querySelector('.primary-color .color-preview').style.backgroundColor, primaryTextColor);
|
|
||||||
setColorText([document.querySelector('.text-on-complementary')], document.querySelector('.complementary-color .color-preview').style.backgroundColor, complementaryTextColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeTextColor(colorStr) {
|
|
||||||
const black = [0, 0, 0, .87];
|
|
||||||
const white = [255, 255, 255, 1];
|
|
||||||
|
|
||||||
[, , r, g, b, a] = /(rgba?)\((\d{1,3}), (\d{1,3}), (\d{1,3})(?:, (\d(?:\.\d+)))?\)/.exec(colorStr);
|
|
||||||
const color = [parseInt(r), parseInt(g), parseInt(b), parseFloat(a == undefined ? 1 : a)]
|
|
||||||
const blackContrast = computeConstrastRatio(black, color);
|
|
||||||
const whiteContrast = computeConstrastRatio(white, color);
|
|
||||||
return blackContrast < whiteContrast ? `hsl(0, 0%, 100%)` : `hsla(0, 0%, 0%, 0.87)`
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeConstrastRatio([fr, fg, fb, fa], [br, bg, bb, ba]) {
|
|
||||||
if (fa < 1) {
|
|
||||||
fr = fr * fa + br * (1 - fa);
|
|
||||||
fg = fg * fa + bg * (1 - fa);
|
|
||||||
fb = fb * fa + bb * (1 - fa);
|
|
||||||
fa = 1;
|
|
||||||
}
|
|
||||||
const fl = luminance([fr, fg, fb]);
|
|
||||||
const bl = luminance([br, bg, bb]);
|
|
||||||
|
|
||||||
if (fl < bl)
|
|
||||||
return (bl + .05) / (fl + .05);
|
|
||||||
else
|
|
||||||
return (fl + .05) / (bl + .05);
|
|
||||||
}
|
|
||||||
|
|
||||||
function luminance([r, g, b]) {
|
|
||||||
return .2126 * colorComponent(r) + .7152 * colorComponent(g) + .0722 * colorComponent(b);
|
|
||||||
}
|
|
||||||
|
|
||||||
function colorComponent(color) {
|
|
||||||
const c = color / 255;
|
|
||||||
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Copyright (c) 2017 by Captain Anonymous (https://codepen.io/anon/pen/PKVVXY)
|
|
||||||
|
|
||||||
|
|
||||||
Fork of an original work by Jean-Baptiste Lenglet (https://codepen.io/Magador/pen/YZjWxe)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
||||||
-->
|
|
||||||
Binary file not shown.
Binary file not shown.
@ -1,124 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
// --------------- VARIABLES A MODIFIER ---------------
|
|
||||||
|
|
||||||
// Ennonciation de variables
|
|
||||||
$pbx_site = '1520411'; //variable de test 1999888
|
|
||||||
$pbx_rang = '001'; //variable de test 32
|
|
||||||
$pbx_identifiant = '650995411'; //variable de test 3
|
|
||||||
$pbx_cmd = 'CMD_1'; //variable de test cmd_test1
|
|
||||||
$pbx_porteur = 'skia@git.an'; //variable de test test@test.fr
|
|
||||||
$pbx_total = '510'; //variable de test 100
|
|
||||||
// Suppression des points ou virgules dans le montant
|
|
||||||
$pbx_total = str_replace(",", "", $pbx_total);
|
|
||||||
$pbx_total = str_replace(".", "", $pbx_total);
|
|
||||||
|
|
||||||
// Paramétrage des urls de redirection après paiement
|
|
||||||
$pbx_effectue = 'http://www.votre-site.extention/page-de-confirmation';
|
|
||||||
$pbx_annule = 'http://www.votre-site.extention/page-d-annulation';
|
|
||||||
$pbx_refuse = 'http://www.votre-site.extention/page-de-refus';
|
|
||||||
// Paramétrage de l'url de retour back office site
|
|
||||||
$pbx_repondre_a = 'http://www.votre-site.extention/page-de-back-office-site';
|
|
||||||
// Paramétrage du retour back office site
|
|
||||||
$pbx_retour = 'Amount:M;BasketID:R;Auto:A;Error:E;Sig:K';
|
|
||||||
|
|
||||||
// Connection à la base de données
|
|
||||||
// mysql_connect...
|
|
||||||
// On récupère la clé secrète HMAC (stockée dans une base de données par exemple) et que l’on renseigne dans la variable $keyTest;
|
|
||||||
//$keyTest = '0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF';
|
|
||||||
$keyTest = '2d21b1f0d5b64bce056b342b5259db312dfc0176dcafb33eb804b6aaaa3acc07320742954ef3b052f36942b09f86ccb9d24c8814586c1a0d24319fd8985c19e5';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// --------------- TESTS DE DISPONIBILITE DES SERVEURS ---------------
|
|
||||||
|
|
||||||
/*
|
|
||||||
$serveurs = array('tpeweb.paybox.com', //serveur primaire
|
|
||||||
'tpeweb1.paybox.com'); //serveur secondaire
|
|
||||||
$serveurOK = "";
|
|
||||||
//phpinfo(); <== voir paybox
|
|
||||||
foreach($serveurs as $serveur){
|
|
||||||
$doc = new DOMDocument();
|
|
||||||
$doc->loadHTMLFile('https://'.$serveur.'/load.html');
|
|
||||||
$server_status = "";
|
|
||||||
$element = $doc->getElementById('server_status');
|
|
||||||
if($element){
|
|
||||||
$server_status = $element->textContent;}
|
|
||||||
if($server_status == "OK"){
|
|
||||||
// Le serveur est prêt et les services opérationnels
|
|
||||||
$serveurOK = $serveur;
|
|
||||||
break;}
|
|
||||||
// else : La machine est disponible mais les services ne le sont pas.
|
|
||||||
}
|
|
||||||
//curl_close($ch); <== voir paybox
|
|
||||||
if(!$serveurOK){
|
|
||||||
die("Erreur : Aucun serveur n'a été trouvé");}
|
|
||||||
// Activation de l'univers de préproduction
|
|
||||||
//$serveurOK = 'preprod-tpeweb.paybox.com';
|
|
||||||
|
|
||||||
//Création de l'url cgi paybox
|
|
||||||
$serveurOK = 'https://'.$serveurOK.'/cgi/MYchoix_pagepaiement.cgi';
|
|
||||||
// echo $serveurOK;
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// --------------- TRAITEMENT DES VARIABLES ---------------
|
|
||||||
|
|
||||||
// On récupère la date au format ISO-8601
|
|
||||||
$dateTime = date("c");
|
|
||||||
$dateTime = "2016-07-26T15:38:11+02:00";
|
|
||||||
|
|
||||||
// On crée la chaîne à hacher sans URLencodage
|
|
||||||
$msg = "PBX_SITE=".$pbx_site.
|
|
||||||
"&PBX_RANG=".$pbx_rang.
|
|
||||||
"&PBX_IDENTIFIANT=".$pbx_identifiant.
|
|
||||||
"&PBX_TOTAL=".$pbx_total.
|
|
||||||
"&PBX_DEVISE=978".
|
|
||||||
"&PBX_CMD=".$pbx_cmd.
|
|
||||||
"&PBX_PORTEUR=".$pbx_porteur.
|
|
||||||
// "&PBX_REPONDRE_A=".$pbx_repondre_a.
|
|
||||||
"&PBX_RETOUR=".$pbx_retour.
|
|
||||||
// "&PBX_EFFECTUE=".$pbx_effectue.
|
|
||||||
// "&PBX_ANNULE=".$pbx_annule.
|
|
||||||
// "&PBX_REFUSE=".$pbx_refuse.
|
|
||||||
"&PBX_HASH=SHA512".
|
|
||||||
"&PBX_TIME=".$dateTime;
|
|
||||||
// echo $msg;
|
|
||||||
|
|
||||||
// Si la clé est en ASCII, On la transforme en binaire
|
|
||||||
$binKey = pack("H*", $keyTest);
|
|
||||||
|
|
||||||
// On calcule l’empreinte (à renseigner dans le paramètre PBX_HMAC) grâce à la fonction hash_hmac et //
|
|
||||||
// la clé binaire
|
|
||||||
// On envoi via la variable PBX_HASH l'algorithme de hachage qui a été utilisé (SHA512 dans ce cas)
|
|
||||||
// Pour afficher la liste des algorithmes disponibles sur votre environnement, décommentez la ligne //
|
|
||||||
// suivante
|
|
||||||
// print_r(hash_algos());
|
|
||||||
echo $msg, "\n\n";
|
|
||||||
var_dump($binKey);
|
|
||||||
$hmac = strtoupper(hash_hmac('sha512', $msg, $binKey));
|
|
||||||
|
|
||||||
// La chaîne sera envoyée en majuscule, d'où l'utilisation de strtoupper()
|
|
||||||
// On crée le formulaire à envoyer
|
|
||||||
// ATTENTION : l'ordre des champs est extrêmement important, il doit
|
|
||||||
// correspondre exactement à l'ordre des champs dans la chaîne hachée
|
|
||||||
?>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!------------------ ENVOI DES INFORMATIONS A PAYBOX (Formulaire) ------------------>
|
|
||||||
<form method="POST" action="<?php echo $serveurOK; ?>">
|
|
||||||
<input type="hidden" name="PBX_SITE" value="<?php echo $pbx_site; ?>">
|
|
||||||
<input type="hidden" name="PBX_RANG" value="<?php echo $pbx_rang; ?>">
|
|
||||||
<input type="hidden" name="PBX_IDENTIFIANT" value="<?php echo $pbx_identifiant; ?>">
|
|
||||||
<input type="hidden" name="PBX_TOTAL" value="<?php echo $pbx_total; ?>">
|
|
||||||
<input type="hidden" name="PBX_DEVISE" value="978">
|
|
||||||
<input type="hidden" name="PBX_CMD" value="<?php echo $pbx_cmd; ?>">
|
|
||||||
<input type="hidden" name="PBX_PORTEUR" value="<?php echo $pbx_porteur; ?>">
|
|
||||||
<input type="hidden" name="PBX_RETOUR" value="<?php echo $pbx_retour; ?>">
|
|
||||||
<input type="hidden" name="PBX_HASH" value="SHA512">
|
|
||||||
<input type="hidden" name="PBX_TIME" value="<?php echo $dateTime; ?>">
|
|
||||||
<input type="hidden" name="PBX_HMAC" value="<?php echo $hmac; ?>">
|
|
||||||
<input type="submit" value="Envoyer">
|
|
||||||
</form>
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
package signver;
|
|
||||||
|
|
||||||
import java.security.interfaces.RSAPublicKey;
|
|
||||||
import java.security.Signature;
|
|
||||||
import java.security.KeyFactory;
|
|
||||||
import java.security.spec.X509EncodedKeySpec;
|
|
||||||
import java.io.FileInputStream;
|
|
||||||
import java.io.DataInputStream;
|
|
||||||
|
|
||||||
import org.apache.commons.codec.binary.Base64;
|
|
||||||
import org.apache.commons.codec.net.URLCodec;
|
|
||||||
|
|
||||||
public class SignVer {
|
|
||||||
|
|
||||||
// verification signature RSA des donnees avec cle publique
|
|
||||||
|
|
||||||
private static boolean verify( byte[] dataBytes, byte[] sigBytes, String sigAlg, RSAPublicKey pubKey) throws Exception
|
|
||||||
{
|
|
||||||
Signature sig = Signature.getInstance(sigAlg);
|
|
||||||
sig.initVerify(pubKey);
|
|
||||||
sig.update(dataBytes);
|
|
||||||
return sig.verify(sigBytes);
|
|
||||||
}
|
|
||||||
|
|
||||||
// chargement de la cle AU FORMAT der :
|
|
||||||
// openssl rsa -inform PEM -in pbx_pubkey.pem -outform DER -pubin -out /tmp/pubkey.der
|
|
||||||
|
|
||||||
private static RSAPublicKey getPubKey(String pubKeyFile) throws Exception
|
|
||||||
{
|
|
||||||
FileInputStream fis = new FileInputStream(pubKeyFile);
|
|
||||||
DataInputStream dis = new DataInputStream(fis);
|
|
||||||
byte[] pubKeyBytes = new byte[fis.available()];
|
|
||||||
dis.readFully(pubKeyBytes);
|
|
||||||
fis.close();
|
|
||||||
dis.close();
|
|
||||||
KeyFactory keyFactory = KeyFactory.getInstance("RSA");
|
|
||||||
// extraction cle
|
|
||||||
X509EncodedKeySpec pubSpec = new X509EncodedKeySpec(pubKeyBytes);
|
|
||||||
RSAPublicKey pubKey = (RSAPublicKey) keyFactory.generatePublic(pubSpec);
|
|
||||||
return pubKey;
|
|
||||||
}
|
|
||||||
|
|
||||||
// exemple de verification de la signature
|
|
||||||
|
|
||||||
public static void main(String[] unused) throws Exception {
|
|
||||||
|
|
||||||
String sData = ""; // donnees signees URL encodees
|
|
||||||
String sSig = ""; // signature Base64 et URL encodee
|
|
||||||
|
|
||||||
// decodage ...
|
|
||||||
byte[] dataBytes = URLCodec.decodeUrl(sData.getBytes());
|
|
||||||
byte[] sigBytes = Base64.decodeBase64( URLCodec.decodeUrl(sSig.getBytes()));
|
|
||||||
|
|
||||||
// lecture de la cle publique
|
|
||||||
RSAPublicKey pubK = getPubKey("/tmp/pubkey.der");
|
|
||||||
|
|
||||||
// verification signature
|
|
||||||
boolean result = verify(dataBytes, sigBytes, "SHA1withRSA", pubK);
|
|
||||||
|
|
||||||
// affichage resultat
|
|
||||||
System.out.println("Resultat de la verification de signature : " + result);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
-----BEGIN RSA PRIVATE KEY-----
|
|
||||||
MIICXAIBAAKBgQCvDYKaLH2xz4goZYXZWoHo6wyMb24A1iF7s70tB/g3XthEVS+/
|
|
||||||
Wov+ZGqNTMLc0L+HZAJjcEc9h8Br5jPLR4VhaoKi+rezDxTQweaC24ydJWFKRhyX
|
|
||||||
Bhm2Wfnhppgzv9EqZKOrFaTlLQHu0F+KWEd7LngP4xcW9qjt19MfEmk0swIDAQAB
|
|
||||||
AoGABqXztNlFuNAR8r7QU43tayQqKNc+jUeUo/cSkzg/RBMVEZtOoezVbkbwCQfG
|
|
||||||
Ss6ex4yTzqT//6U9OJvYkbrYpOdq2BinuRv9n/NlKhCJ/Ym9s/DS8D6xdEX/R5lg
|
|
||||||
mIURQYl9uHS6VVnLq79j38BsjIhDAvjuSzZGZUa4v0iBTHkCQQDWp4iPqv2jUzBW
|
|
||||||
UgDP6C+QFqLgYKuYxF+yyBCXO0XzaHaEJUBuxuvTU/kuIifk3lhXnV5r0sXJd2Ax
|
|
||||||
aQkoJXc1AkEA0MU+4SSYPYADQm1gcXXuR4Kjb0/QhIGRiotxVu2nLGS7aULe1D8p
|
|
||||||
XoLpSQCv3j5amtXVx1yTWuaEYZqHVeQxRwJAdOprh1UrMXpuKZYgux1MSr8JmA0P
|
|
||||||
afYL6eTupHC0eQ+8/d0Ma0oNyN1EK8yOzioNFCuy8ierc0CCNGdxhVxiwQJAP/cv
|
|
||||||
fOwpeS5v0TqSAjGQAHkWelSKHw9T+I8g+vF19zQl9+p1O7LeigayU5vSRtX0DNzX
|
|
||||||
022Z+JAIn58pODfioQJBALQGN2kFCSk935VnMUJ4X5qFCKiXBgebuARUSw6tDEpY
|
|
||||||
gFdqyJE4WQ4uWVz0D9M27lCa8wj7pYrOhB/UiMKbuqY=
|
|
||||||
-----END RSA PRIVATE KEY-----
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
-----BEGIN PUBLIC KEY-----
|
|
||||||
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCvDYKaLH2xz4goZYXZWoHo6wyM
|
|
||||||
b24A1iF7s70tB/g3XthEVS+/Wov+ZGqNTMLc0L+HZAJjcEc9h8Br5jPLR4VhaoKi
|
|
||||||
+rezDxTQweaC24ydJWFKRhyXBhm2Wfnhppgzv9EqZKOrFaTlLQHu0F+KWEd7LngP
|
|
||||||
4xcW9qjt19MfEmk0swIDAQAB
|
|
||||||
-----END PUBLIC KEY-----
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<?php
|
|
||||||
$montant=$_GET['montant'];
|
|
||||||
$ref_com=$_GET['ref'];
|
|
||||||
$auto=$_GET['auto'];
|
|
||||||
$trans=$_GET['trans'];
|
|
||||||
print ("<center><b><h2>Votre transaction a été acceptée</h2></center></b><br>");
|
|
||||||
print ("<br><b>MONTANT : </b>$montant\n");
|
|
||||||
print ("<br><b>REFERENCE : </b>$ref_com\n");
|
|
||||||
print ("<br><b>AUTO : </b>$auto\n");
|
|
||||||
print ("<br><b>TRANS : </b>$trans\n");
|
|
||||||
?>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<?php
|
|
||||||
$montant=$_GET['montant'];
|
|
||||||
$ref_com=$_GET['ref'];
|
|
||||||
#$auto=$_GET['auto'];
|
|
||||||
$trans=$_GET['trans'];
|
|
||||||
print ("<center><b><h2>Votre transaction a été annulée</h2></center></b><br>");
|
|
||||||
print ("<br><b>MONTANT : </b>$montant\n");
|
|
||||||
print ("<br><b>REFERENCE : </b>$ref_com\n");
|
|
||||||
#print ("<br><b>AUTO : </b>$auto\n");
|
|
||||||
print ("<br><b>TRANS : </b>$trans\n");
|
|
||||||
?>
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<title>Exemple_mail_ticket_client</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
<!--
|
|
||||||
/* Font Definitions */
|
|
||||||
@font-face
|
|
||||||
{font-family:"Bernard MT Condensed";
|
|
||||||
panose-1:0 0 0 0 0 0 0 0 0 0;}
|
|
||||||
/* Style Definitions */
|
|
||||||
p.MsoNormal, li.MsoNormal, div.MsoNormal
|
|
||||||
{margin:0cm;
|
|
||||||
margin-bottom:.0001pt;
|
|
||||||
font-size:12.0pt;
|
|
||||||
font-family:"Times New Roman";}
|
|
||||||
a:link, span.MsoHyperlink
|
|
||||||
{color:blue;
|
|
||||||
text-decoration:underline;}
|
|
||||||
a:visited, span.MsoHyperlinkFollowed
|
|
||||||
{color:purple;
|
|
||||||
text-decoration:underline;}
|
|
||||||
p
|
|
||||||
{font-size:12.0pt;
|
|
||||||
font-family:"Times New Roman";}
|
|
||||||
p.style1, li.style1, div.style1
|
|
||||||
{margin-right:0cm;
|
|
||||||
margin-left:0cm;
|
|
||||||
font-size:9.0pt;
|
|
||||||
font-family:"Bernard MT Condensed";}
|
|
||||||
@page Section1
|
|
||||||
{size:595.3pt 841.9pt;
|
|
||||||
margin:70.85pt 70.85pt 70.85pt 70.85pt;}
|
|
||||||
div.Section1
|
|
||||||
{page:Section1;}
|
|
||||||
-->
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body lang=FR link=blue vlink=purple>
|
|
||||||
|
|
||||||
<div class=Section1>
|
|
||||||
|
|
||||||
<p class=style1 align=center style='text-align:center'><b><i><span
|
|
||||||
style='font-size:10.0pt;font-family:Arial;color:#333399'>Merci de votre
|
|
||||||
commande</span></i></b></p>
|
|
||||||
|
|
||||||
<p class=style1 align=center style='text-align:center'><b><i><span
|
|
||||||
style='font-size:10.0pt;font-family:Arial;color:#333399'>Celle-ci sera traitée
|
|
||||||
dans les meilleurs délais</span></i></b></p>
|
|
||||||
|
|
||||||
<p class=style1 align=center style='text-align:center'><b><i><span
|
|
||||||
style='font-size:10.0pt;font-family:Arial;color:#333399'>Cordialement,</span></i></b></p>
|
|
||||||
|
|
||||||
<p align=center style='text-align:center'><img width=200 height=50
|
|
||||||
src="Boutique.fr/Images/votre_logo.jpg" alt="Votre Enseigne"></p>
|
|
||||||
|
|
||||||
<p align=center style='margin-top:0cm;margin-right:0cm;margin-bottom:6.0pt;
|
|
||||||
margin-left:0cm;text-align:center'><b><span style='font-size:8.0pt;font-family:
|
|
||||||
Arial;color:#FF9900'>Gardez les références de votre commande et n'hésitez pas à
|
|
||||||
nous contacter si vous avez des questions :</span></b></p>
|
|
||||||
|
|
||||||
<p align=center style='margin:0cm;margin-bottom:.0001pt;text-align:center'><b><span
|
|
||||||
style='font-size:8.0pt;font-family:Arial;color:#FF9900'>tel : 00 00 00 00 00</span></b></p>
|
|
||||||
|
|
||||||
<p align=center style='margin:0cm;margin-bottom:.0001pt;text-align:center'><b><span
|
|
||||||
style='font-size:8.0pt;font-family:Arial;color:#FF9900'>courriel : <a
|
|
||||||
href="mailto:contact@maboutique.fr"><span style='color:#FF9900;text-decoration:
|
|
||||||
none'>contact@maboutique.fr</span></a></span></b></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
-----BEGIN PUBLIC KEY-----
|
|
||||||
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDe+hkicNP7ROHUssGNtHwiT2Ew
|
|
||||||
HFrSk/qwrcq8v5metRtTTFPE/nmzSkRnTs3GMpi57rBdxBBJW5W9cpNyGUh0jNXc
|
|
||||||
VrOSClpD5Ri2hER/GcNrxVRP7RlWOqB1C03q4QYmwjHZ+zlM4OUhCCAtSWflB4wC
|
|
||||||
Ka1g88CjFwRw/PB9kwIDAQAB
|
|
||||||
-----END PUBLIC KEY-----
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<?php
|
|
||||||
$montant=$_GET['montant'];
|
|
||||||
$ref_com=$_GET['ref'];
|
|
||||||
#$auto=$_GET['auto'];
|
|
||||||
$trans=$_GET['trans'];
|
|
||||||
print ("<center><b><h2>Votre transaction a été refusée</h2></center></b><br>");
|
|
||||||
print ("<br><b>MONTANT : </b>$montant\n");
|
|
||||||
print ("<br><b>REFERENCE : </b>$ref_com\n");
|
|
||||||
#print ("<br><b>AUTO : </b>$auto\n");
|
|
||||||
print ("<br><b>TRANS : </b>$trans\n");
|
|
||||||
?>
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
|
|
||||||
///// script PHP de vérification de la signature Paybox.
|
|
||||||
///// Ce code peut s'executer dans un contexte Apache/PHP.
|
|
||||||
///// Il affiche alors une page web qui permet de vérifier et signer des données.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>formulaire d'exemple pour test signature</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<?php
|
|
||||||
|
|
||||||
$status = "GUY";
|
|
||||||
|
|
||||||
function LoadKey( $keyfile, $pub=true, $pass='' ) { // chargement de la clé (publique par défaut)
|
|
||||||
|
|
||||||
$fp = $filedata = $key = FALSE; // initialisation variables
|
|
||||||
$fsize = filesize( $keyfile ); // taille du fichier
|
|
||||||
if( !$fsize ) return FALSE; // si erreur on quitte de suite
|
|
||||||
$fp = fopen( $keyfile, 'r' ); // ouverture fichier
|
|
||||||
if( !$fp ) return FALSE; // si erreur ouverture on quitte
|
|
||||||
$filedata = fread( $fp, $fsize ); // lecture contenu fichier
|
|
||||||
fclose( $fp ); // fermeture fichier
|
|
||||||
if( !$filedata ) return FALSE; // si erreur lecture, on quitte
|
|
||||||
if( $pub )
|
|
||||||
$key = openssl_pkey_get_public( $filedata ); // recuperation de la cle publique
|
|
||||||
else // ou recuperation de la cle privee
|
|
||||||
$key = openssl_pkey_get_private( array( $filedata, $pass ));
|
|
||||||
return $key; // renvoi cle ( ou erreur )
|
|
||||||
}
|
|
||||||
|
|
||||||
// comme precise la documentation Paybox, la signature doit être
|
|
||||||
// obligatoirement en dernière position pour que cela fonctionne
|
|
||||||
|
|
||||||
function GetSignedData( $qrystr, &$data, &$sig ) { // renvoi les donnes signees et la signature
|
|
||||||
|
|
||||||
$pos = strrpos( $qrystr, '&' ); // cherche dernier separateur
|
|
||||||
$data = substr( $qrystr, 0, $pos ); // et voila les donnees signees
|
|
||||||
$pos= strpos( $qrystr, '=', $pos ) + 1; // cherche debut valeur signature
|
|
||||||
$sig = substr( $qrystr, $pos ); // et voila la signature
|
|
||||||
$sig = base64_decode( urldecode( $sig )); // decodage signature
|
|
||||||
}
|
|
||||||
|
|
||||||
// $querystring = chaine entière retournée par Paybox lors du retour au site (méthode GET)
|
|
||||||
// $keyfile = chemin d'accès complet au fichier de la clé publique Paybox
|
|
||||||
|
|
||||||
function PbxVerSign( $qrystr, $keyfile ) { // verification signature Paybox
|
|
||||||
|
|
||||||
$key = LoadKey( $keyfile ); // chargement de la cle
|
|
||||||
if( !$key ) return -1; // si erreur chargement cle
|
|
||||||
// penser à openssl_error_string() pour diagnostic openssl si erreur
|
|
||||||
GetSignedData( $qrystr, $data, $sig ); // separation et recuperation signature et donnees
|
|
||||||
return openssl_verify( $data, $sig, $key ); // verification : 1 si valide, 0 si invalide, -1 si erreur
|
|
||||||
}
|
|
||||||
|
|
||||||
if( !isset( $_POST['data'] )) // pour alimentation par defaut quand premier affichage du formulaire
|
|
||||||
$_POST['data'] = 'arg1=aaaa&arg2=bbbb&arg3=cccc&arg4=dddd';
|
|
||||||
|
|
||||||
if( isset( $_POST['signer']) ) { // si on a demande la signature
|
|
||||||
|
|
||||||
$key = LoadKey( 'TestK004.prv.pem', false ); // chargement de la cle prive (de test, sans mot de passe)
|
|
||||||
if( $key ) {
|
|
||||||
openssl_sign( $_POST['data'], $signature, $key ); // generation de la signature
|
|
||||||
openssl_free_key( $key ); // liberation ressource (confidentialite cle prive)
|
|
||||||
$status = "OK";
|
|
||||||
}
|
|
||||||
else $status = openssl_error_string(); // diagnostic erreur
|
|
||||||
|
|
||||||
$_POST['signeddata'] = $_POST['data']; // construction chaine data + signature
|
|
||||||
$_POST['signeddata'] .= '&sig=';
|
|
||||||
$_POST['signeddata'] .= urlencode( base64_encode( $signature ));
|
|
||||||
}
|
|
||||||
if( isset( $_POST['verifier']) ) { // si on a demande la verification
|
|
||||||
|
|
||||||
$CheckSig = PbxVerSign( $_POST['signeddata'], 'TestK004.pub.pem' );
|
|
||||||
|
|
||||||
if( $CheckSig == 1 ) $status = "Signature valide";
|
|
||||||
else if( $CheckSig == 0 ) $status = "Signature invalide : donnees alterees ou signature falsifiee";
|
|
||||||
else $status = "Erreur lors de la vérification de la signature";
|
|
||||||
}
|
|
||||||
|
|
||||||
?>
|
|
||||||
<form action="testsign.php" method="POST">
|
|
||||||
<table border="0" cellpadding="3" cellspacing="0" align="center">
|
|
||||||
<tr>
|
|
||||||
<td>status = <?php echo $status; ?></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><input type="text" name="data" size="80"value="<?= $_POST['data'] ?>"></td>
|
|
||||||
<td><input type="submit" name="signer" value="signer"/></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><input type="text" name="signeddata" size="80"value="<?= $_POST['signeddata'] ?>"></td>
|
|
||||||
<td><input type="submit" name="verifier" value="verifier"/></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -1,206 +0,0 @@
|
|||||||
/* CSS Document */
|
|
||||||
|
|
||||||
/* feuille de style par d?faut pour les pages
|
|
||||||
de choix de paiement et de paiement
|
|
||||||
paybox system*/
|
|
||||||
|
|
||||||
th { /* headers de tables (dans choix paiement les ent?tes de table en bleu )*/
|
|
||||||
color: black;
|
|
||||||
background-color: #2890D6;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {/* cellules */
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {/*le texte 'paiement de' et '?'*/
|
|
||||||
margin:0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx_table_logo td {/*les cellules de la table logo (la table a la classe "pbx_table_logo")*/
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx_h1{/* le premier bloc de texte dans choixpaiement */
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: verdana;
|
|
||||||
font-weight:normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.pbx_h2{/* le second bloc de texte dans choixpaiement (choisisseze un moyen...)*/
|
|
||||||
font-family: verdana;
|
|
||||||
font-size:12px;
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx_h3{/* l'ent?te reprenant le libell? du type de moyen de paiement*/
|
|
||||||
font-family: verdana;
|
|
||||||
font-size:12;
|
|
||||||
font-weight:normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx_h4{/* nom d'enseigne, en page de paiement*/
|
|
||||||
color:#444;
|
|
||||||
display: block;
|
|
||||||
margin: 8px 0 0 0;
|
|
||||||
padding: 0;
|
|
||||||
border-top: 1px solid #ccc;
|
|
||||||
padding: 5px;
|
|
||||||
display: block;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
height: 35px;
|
|
||||||
line-height: 35px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx_copyright h5{/*mention paybox en bas de page (choix et paiement)*/
|
|
||||||
font-size:10px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color : gray;
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabledevises {
|
|
||||||
color: #AAA;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color : #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
body { color: #555555;
|
|
||||||
font-family: arial,verdana,sans-serif;
|
|
||||||
padding : 0px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#idframe_pay {
|
|
||||||
border-color: #CCCCCC;
|
|
||||||
border-radius: 6px 6px 6px 6px;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
margin: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#idframe_pay table {
|
|
||||||
border-spacing:0;
|
|
||||||
border-collapse:collapse;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#idframe_pay h2 {
|
|
||||||
width: 100%;
|
|
||||||
background: url("main_header_background.png") repeat scroll 0 0 transparent;
|
|
||||||
border-color: #CCCCCC;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0 0 1px 0;
|
|
||||||
box-shadow: 1px 1px 0 0 #888888 inset;
|
|
||||||
color: #EEEEEE;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 1px 1px 1px #444444;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px 0 0 0;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
#idframe_pay td {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
.pbx-align-center {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 10px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-right {
|
|
||||||
text-align: right;
|
|
||||||
padding: 2px 10px;
|
|
||||||
width: 50%;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-button-right img {
|
|
||||||
|
|
||||||
vertical-align:middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-left {
|
|
||||||
text-align: left;
|
|
||||||
padding: 2px 10px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-left img {
|
|
||||||
|
|
||||||
vertical-align:middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-very-left {
|
|
||||||
text-align: left;
|
|
||||||
padding: 2px 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-no-padding {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-button-right {
|
|
||||||
text-align: right;
|
|
||||||
padding: 2px 10px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pbx-align-button-left {
|
|
||||||
text-align: left;
|
|
||||||
padding: 2px 10px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#Devises{
|
|
||||||
left:0px;
|
|
||||||
top:0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pbx-numero-carte, #pbx-numero-carte-input {
|
|
||||||
padding-top: 30px
|
|
||||||
}
|
|
||||||
|
|
||||||
#pbx-maxicheque-vide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pbx-maxicheque-frame {
|
|
||||||
padding: 0 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#blocCarte1 {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#zoneResultConsult {
|
|
||||||
border: 1px solid #CCCCCC;
|
|
||||||
border-radius: 10px 10px 10px 10px;
|
|
||||||
display: block;
|
|
||||||
margin: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
BIN
doc/MLD.pdf
BIN
doc/MLD.pdf
Binary file not shown.
20
doc/Makefile
20
doc/Makefile
@ -1,20 +0,0 @@
|
|||||||
# Minimal makefile for Sphinx documentation
|
|
||||||
#
|
|
||||||
|
|
||||||
# You can set these variables from the command line, and also
|
|
||||||
# from the environment for the first two.
|
|
||||||
SPHINXOPTS ?=
|
|
||||||
SPHINXBUILD ?= sphinx-build
|
|
||||||
SOURCEDIR = .
|
|
||||||
BUILDDIR = _build
|
|
||||||
|
|
||||||
# Put it first so that "make" without argument is like "make help".
|
|
||||||
help:
|
|
||||||
@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
|
|
||||||
|
|
||||||
.PHONY: help Makefile
|
|
||||||
|
|
||||||
# Catch-all target: route all unknown targets to Sphinx using the new
|
|
||||||
# "make mode" option. $(O) is meant as a shortcut for $(SPHINXOPTS).
|
|
||||||
%: Makefile
|
|
||||||
@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
Introduction
|
|
||||||
============
|
|
||||||
|
|
||||||
Le but de ce projet est de fournir à l'Association des Étudiants de l'UTBM une plate-forme pratique et centralisée de ses services. Le Sith de l'AE tient à jour le registre des cotisations à l'association, prend en charge la trésorerie, les ventes de produits et services, la diffusion d’événements, la gestion de la laverie et bien plus encore. Il est conçu de manière suffisamment générique pour être facilement adaptable à une autre association.
|
|
||||||
|
|
||||||
C'est un projet bénévole qui tire ses origines des années 2000. Il s'agit de la troisième version du site de l'association initiée en 2015. C'est une réécriture complète en rupture totale des deux versions qui l'ont précédée.
|
|
||||||
|
|
||||||
Pourquoi réécrire le site
|
|
||||||
-------------------------
|
|
||||||
|
|
||||||
L'ancienne version du site, sobrement baptisée `ae2 <https://github.com/ae-utbm/sith2>`_ présentait un nombre impressionnant de fonctionnalités. Il avait été écrit en PHP et se basait sur son propre framework maison.
|
|
||||||
|
|
||||||
Malheureusement, son entretien était plus ou moins hasardeux et son framework reposait sur des principes assez différents de ce qui se fait aujourd'hui, rendant la maintenance difficile. De plus, la version de PHP qu'il utilisait était plus que dépréciée et à l'heure de l'arrivée de PHP 7 et de sa non rétrocompatibilité il était vital de faire quelque chose. Il a donc été décidé de le réécrire.
|
|
||||||
|
|
||||||
La philosophie du projet
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
Pour éviter les erreurs du passé, ce projet met l'accent sur la maintenabilité. Le choix des technologies ne s'est donc pas fait uniquement sur le fait qu'elle soit récentes, mais également sur leur robustesse, leur fiabilité et leur potentiel à être maintenu loin dans le futur.
|
|
||||||
|
|
||||||
La maintenabilité passe également par le choix minutieux des dépendances qui doivent eux aussi passer l'épreuve du temps pour éviter qu'elles ne mettent le projet en danger.
|
|
||||||
|
|
||||||
Cela passe également par la minimisation des frameworks employés de manière à réduire un maximum les connaissances nécessaires pour contribuer au projet et donc simplifier la prise en main. La simplicité est à privilégier si elle est possible.
|
|
||||||
|
|
||||||
Le projet doit être simple à installer et à déployer.
|
|
||||||
|
|
||||||
Le projet étant à destination d'étudiants, il est préférable de minimiser les ressources utilisées par l'utilisateur final. Il faut qu'il soit au maximum économe en bande passante et calcul côté client.
|
|
||||||
|
|
||||||
|
|
||||||
Le projet est un logiciel libre et est sous licence GPL. Aucune dépendance propriétaire ne sera acceptée.
|
|
||||||
@ -1,233 +0,0 @@
|
|||||||
Technologies utilisées
|
|
||||||
======================
|
|
||||||
|
|
||||||
Bien choisir ses technologies est crucial puisqu'une fois que le projet est suffisamment avancé, il est très difficile voir impossible de revenir en arrière.
|
|
||||||
|
|
||||||
En novembre 2015, plusieurs choix s'offraient à nous :
|
|
||||||
|
|
||||||
* Continuer avec du PHP
|
|
||||||
* S'orienter vers un langage web plus moderne et à la mode comme le Python ou le Ruby
|
|
||||||
* Baser le site sur un framework Javascript
|
|
||||||
|
|
||||||
Le PHP 5, bientôt 7, de l'époque étant assez discutable comme `cet article <https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/>`__ et l'ancien site ayant laissé un goût amer à certains développeurs, celui-ci a été mis de côté.
|
|
||||||
|
|
||||||
L'écosystème Javascript étant à peine naissant et les frameworks allant et venant en seulement quelques mois, il était impossible de prédire avec certitude si ceux-ci passeraient l'épreuve du temps, il était inconcevable de tout parier là dessus.
|
|
||||||
|
|
||||||
Ne restait plus que le Python et le Ruby avec les frameworks Django et Ruby On Rails. Ruby ayant une réputation d'être très "cutting edge", c'est Python, un langage bien implanté et ayant fait ses preuves, qui a été retenu.
|
|
||||||
|
|
||||||
Il est à noter que réécrire le site avec un framework PHP comme Laravel ou Symphony
|
|
||||||
eut aussi été possible, ces deux technologies étant assez matures et robustes
|
|
||||||
au moment où le développement a commencé.
|
|
||||||
Cependant, il aurait été potentiellemet fastidieux de maintenir en parallèle deux
|
|
||||||
versions de PHP sur le serveur durant toute la durée du développement.
|
|
||||||
Il faut aussi prendre en compte que nous étions à ce moment dégoûtés du PHP.
|
|
||||||
|
|
||||||
Backend
|
|
||||||
-------
|
|
||||||
|
|
||||||
Python 3
|
|
||||||
~~~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://www.python.org/>`__
|
|
||||||
|
|
||||||
Le python est un langage de programmation interprété multi paradigme sorti en 1991. Il est très populaire pour sa simplicité d'utilisation, sa puissance, sa stabilité, sécurité ainsi que sa grande communauté de développeur. Sa version 3, non rétro compatible avec sa version 2, a été publiée en 2008.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Puisque toutes les dépendances du backend sont des packages Python, elles sont toutes ajoutées directement dans le fichier **pyproject.toml** à la racine du projet.
|
|
||||||
|
|
||||||
Django
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
| `Site officiel <https://www.djangoproject.com/>`__
|
|
||||||
| `Documentation <https://docs.djangoproject.com/en/1.11/>`__
|
|
||||||
|
|
||||||
Django est un framework web pour Python apparu en 2005. Il fourni un grand nombre de fonctionnalités pour développer un site rapidement et simplement. Cela inclu entre autre un serveur Web de développement, un parseur d'URLs pour le routage des différentes URI du site, un ORM (Object-Relational Mapper) pour la gestion de la base de donnée ainsi qu'un moteur de templates pour le rendu HTML. Django propose une version LTS (Long Term Support) qui reste stable et est maintenu sur des cycles plus longs, ce sont ces versions qui sont utilisées.
|
|
||||||
|
|
||||||
Il est possible que la version de Django utilisée ne soit pas la plus récente.
|
|
||||||
En effet, la version de Django utilisée est systématiquement celle munie d'un support au long-terme.
|
|
||||||
|
|
||||||
PostgreSQL / SQLite3
|
|
||||||
~~~~~~~~~~~~~~~~~~~
|
|
||||||
|
|
||||||
| `Site officiel PostgreSQL <https://www.postgresql.org/>`__
|
|
||||||
| `Site officiel SQLite <https://www.sqlite.org/index.html>`__
|
|
||||||
|
|
||||||
Comme la majorité des sites internet, le Sith de l'AE enregistre ses données dans une base de donnée. Nous utilisons une base de donnée relationnelle puisque c'est la manière typique d'utiliser Django et c'est ce qu'utilise son ORM. Dans la pratique il arrive rarement dans le projet de se soucier de ce qui fonctionne derrière puisque le framework abstrait les requêtes au travers de son ORM. Cependant, il arrive parfois que certaines requêtes, lorsqu'on cherche à les optimiser, ne fonctionnent que sur un seul backend.
|
|
||||||
|
|
||||||
Le principal à retenir ici est :
|
|
||||||
|
|
||||||
* Sur la version de production nous utilisons PostgreSQL, c'est cette version qui doit fonctionner en priorité
|
|
||||||
* Sur les versions de développement, pour faciliter l'installation du projet, nous utilisons la technologie SQLite3 qui ne requiert aucune installation spécifique (La librairie `sqlite` est incluse dans les librairies par défaut de Python). Certaines instructions ne sont pas supportées par cette technologie et il est parfois nécessaire d'installer PostgreSQL pour le développement de certaines parties du site.
|
|
||||||
|
|
||||||
Frontend
|
|
||||||
--------
|
|
||||||
|
|
||||||
Jinja2
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://jinja.palletsprojects.com/en/2.10.x/>`__
|
|
||||||
|
|
||||||
Jinja2 est un moteur de template écrit en Python qui s'inspire fortement de la syntaxe des templates de Django. Ce moteur apporte toutefois son lot d'améliorations non négligeables. Il permet par exemple l'ajout de macros, sortes de fonctions écrivant du HTML.
|
|
||||||
|
|
||||||
Un moteur de templates permet de générer du contenu textuel de manière procédural en fonction des données à afficher, cela permet de pouvoir inclure du code proche du Python dans la syntaxe au milieu d'un document contenant principalement du HTML. On peut facilement faire des boucles ou des conditions ainsi même que de l'héritage de templates.
|
|
||||||
|
|
||||||
Attention : le rendu est fait côté serveur, si on souhaite faire des modifications côté client, il faut utiliser du Javascript, rien ne change à ce niveau là.
|
|
||||||
|
|
||||||
Exemple d'utilisation d'un template Jinja2
|
|
||||||
|
|
||||||
.. sourcecode:: html+jinja
|
|
||||||
|
|
||||||
<title>{% block title %}{% endblock %}</title>
|
|
||||||
<ul>
|
|
||||||
{% for user in users %}
|
|
||||||
<li><a href="{{ user.url }}">{{ user.username }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
jQuery
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://jquery.com/>`__
|
|
||||||
|
|
||||||
jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web. La première version est lancée en janvier 2006 par John Resig.
|
|
||||||
|
|
||||||
C'est une vieille technologie et certains feront remarquer à juste titre que le Javascript moderne permet d'utiliser assez simplement la majorité de ce que fournit jQuery sans rien avoir à installer. Cependant, de nombreuses dépendances du projet utilisent encore jQuery qui est toujours très implanté aujourd'hui. Le sucre syntaxique qu'offre cette librairie reste très agréable à utiliser et économise parfois beaucoup de temps. Ça fonctionne et ça fonctionne très bien. C'est maintenu et pratique.
|
|
||||||
|
|
||||||
VueJS
|
|
||||||
~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://vuejs.org/>`__
|
|
||||||
|
|
||||||
jQuery permet de facilement manipuler le DOM et faire des requêtes en AJAX,
|
|
||||||
mais est moins pratique à utiliser pour créer des applications réactives.
|
|
||||||
C'est pour cette raison que Vue a été intégré au projet.
|
|
||||||
|
|
||||||
Vue est une librairie Javascript qui se concentre sur le rendu déclaratif et la composition des composants.
|
|
||||||
C'est une technologie très utilisée pour la création d'applications web monopages (ce que le site n'est pas)
|
|
||||||
mais son architecture progressivement adoptable permet aisément d'adapter son
|
|
||||||
comportement à une application multipage comme le site AE.
|
|
||||||
|
|
||||||
A ce jour, il est utilisé pour l'interface des barmen, dans l'application des comptoirs.
|
|
||||||
|
|
||||||
AlpineJS
|
|
||||||
~~~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://alpinejs.dev/>`__
|
|
||||||
|
|
||||||
Dans une démarche similaire à celle de l'introduction de Vue, Alpine a aussi fait son
|
|
||||||
apparition au sein des dépendances Javascript du site.
|
|
||||||
La librairie est décrite par ses créateurs comme :
|
|
||||||
"un outil robuste et minimal pour composer un comportement directement dans vos balises".
|
|
||||||
|
|
||||||
Alpine permet d'accomplir la plupart du temps le même résultat qu'un usage des fonctionnalités
|
|
||||||
de base de Vue, mais est beaucoup plus léger, un peu plus facile à prendre en main
|
|
||||||
et ne s'embarasse pas d'un DOM virtuel.
|
|
||||||
De par son architecture, il extrêmement bien adapté pour un usage dans un site multipage.
|
|
||||||
C'est une technologie simple et puissante qui se veut comme le jQuery du web moderne.
|
|
||||||
|
|
||||||
Sass
|
|
||||||
~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://sass-lang.com/>`__
|
|
||||||
|
|
||||||
Sass (Syntactically Awesome Stylesheets) est un langage dynamique de génération de feuilles CSS apparu en 2006. C'est un langage de CSS "amélioré" qui permet l'ajout de variables (à une époque où le CSS ne les supportait pas), de fonctions, mixins ainsi qu'une syntaxe pour imbriquer plus facilement et proprement les règles sur certains éléments. Le Sass est traduit en CSS directement côté serveur et le client ne reçoit que du CSS.
|
|
||||||
|
|
||||||
C'est une technologie stable, mature et pratique qui ne nécessite pas énormément d'apprentissage.
|
|
||||||
|
|
||||||
Fontawesome
|
|
||||||
~~~~~~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://fontawesome.com>`__
|
|
||||||
|
|
||||||
Fontawesome regroupe tout un ensemble d'icônes libres de droits utilisables facilement sur n'importe quelle page web. Ils sont simple à modifier puisque modifiables via le CSS et présentent l'avantage de fonctionner sur tous les navigateurs contrairement à un simple icône unicode qui s'affiche lui différemment selon la plate-forme.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
C'est une dépendance capricieuse qui évolue très vite et qu'il faut très souvent mettre à jour.
|
|
||||||
|
|
||||||
.. warning::
|
|
||||||
|
|
||||||
Il a été décidé de **ne pas utiliser** de CDN puisque le site ralentissait régulièrement. Il est préférable de fournir cette dépendance avec le site.
|
|
||||||
|
|
||||||
Documentation
|
|
||||||
-------------
|
|
||||||
|
|
||||||
Sphinx
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://www.sphinx-doc.org/en/master/>`__
|
|
||||||
|
|
||||||
Sphinx est un outil qui permet la création de documentations intelligentes et très jolies. C'est cet outil qui permet d'écrire le documentation que vous êtes en train de lire actuellement. Développé en 2008 pour la communauté Python, c'est l'outil le plus répandu. Il est utilisé pour la documentation officielle de Python, pour celle de Django, Jinja2 et bien d'autres.
|
|
||||||
|
|
||||||
ReadTheDocs
|
|
||||||
~~~~~~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://www.sphinx-doc.org/en/master/>`__
|
|
||||||
|
|
||||||
C'est un site d'hébergement de documentations utilisant Sphinx. Il propose la génération de documentation à partir de sources et leur hébergement gracieusement pour tout projet open source. C'est le site le plus utilisé et sur lequel sont hébergées bon nombre de documentations comme par exemple celle de Django. La documentation sur ce site est automatiquement générée à chaque nouvelle modification du projet.
|
|
||||||
|
|
||||||
reStructuredText
|
|
||||||
~~~~~~~~~~~~~~~~
|
|
||||||
|
|
||||||
`Site officiel <http://docutils.sourceforge.net/rst.html>`__
|
|
||||||
|
|
||||||
C'est un langage de balisage léger utilisé notamment dans la documentation du langage Python. C'est le langage dans lequel est écrit l'entièreté de la documentation ci-présente pour que Sphinx puisse la lire et la mettre en forme.
|
|
||||||
|
|
||||||
Workflow
|
|
||||||
--------
|
|
||||||
|
|
||||||
Git
|
|
||||||
~~~
|
|
||||||
|
|
||||||
`Site officiel <https://git-scm.com/>`__
|
|
||||||
|
|
||||||
Git est un logiciel de gestion de versions écrit par Linus Torvalds pour les besoins du noyau linux en 2005. C'est ce logiciel qui remplace svn anciennement utilisé pour gérer les sources du projet (rappelez vous, l'ancien site date d'avant 2005). Git est plus complexe à utiliser mais est bien plus puissant, permet de gérer plusieurs version en parallèle et génère des codebases vraiment plus légères puisque seules les modifications sont enregistrées (contrairement à svn qui garde une copie de la codebase par version).
|
|
||||||
|
|
||||||
Git s'étant imposé comme le principal outil de gestion de versions,
|
|
||||||
sa communauté est très grande et sa documentation très fournie.
|
|
||||||
Il est également aisé de trouver des outils avec une interface graphique,
|
|
||||||
qui simplifient grandement son usage.
|
|
||||||
|
|
||||||
GitHub
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
| `Site officiel <https://github.com>`__
|
|
||||||
| `Page github du Pôle Informatique de l'AE <https://github.com/ae-utbm/>`__
|
|
||||||
|
|
||||||
Github est un service web d'hébergement et de gestion de développement de logiciel.
|
|
||||||
C'est une plate-forme avec interface web permettant de déposer du code géré avec Git
|
|
||||||
offrant également de l'intégration continue et du déploiement automatique.
|
|
||||||
C'est au travers de cette plate-forme que le Sith de l'AE est géré.
|
|
||||||
|
|
||||||
Depuis le 1er Octobre 2022, GitHub remplace GitLab dans un soucis de facilité d'entretien,
|
|
||||||
les machines sur lesquelles tournent le site étant de plus en plus vielles, il devenait très
|
|
||||||
difficile d'effectuer les mise à jours de sécurité du GitLab sans avoir de soucis matériel
|
|
||||||
pour l'hébergement et la gestion des projets informatiques de l'AE.
|
|
||||||
|
|
||||||
Sentry
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
| `Site officiel <https://sentry.io>`__
|
|
||||||
| `Instance de l'AE <https://ae2.utbm.fr>`__
|
|
||||||
|
|
||||||
Sentry est une plate-forme libre qui permet de se tenir informer des bugs qui ont lieu sur le site. À chaque crash du logiciel (erreur 500), une erreur est envoyée sur la plate-forme et est indiqué précisément à quelle ligne de code celle-ci a eu lieu, à quelle heure, combien de fois, avec quel navigateur la page a été visitée et même éventuellement un commentaire de l'utilisateur qui a rencontré le bug.
|
|
||||||
|
|
||||||
Poetry
|
|
||||||
~~~~~~~~~~
|
|
||||||
|
|
||||||
`Utiliser Poetry <https://python-poetry.org/docs/basic-usage/>`__
|
|
||||||
|
|
||||||
Poetry est un utilitaire qui permet de créer et gérer des environements Python de manière simple et intuitive. Il permet également de gérer et mettre à jour le fichier de dépendances.
|
|
||||||
L'avantage d'utiliser poetry (et les environnements virtuels en général) est de pouvoir gérer plusieurs projets différents en parallèle puisqu'il permet d'avoir sur sa machine plusieurs environnements différents et donc plusieurs versions d'une même dépendance dans plusieurs projets différent sans impacter le système sur lequel le tout est installé.
|
|
||||||
|
|
||||||
Les dépendances utilisées par poetry sont déclarées dans le fichier `pyproject.toml`, situé à la racine du projet.
|
|
||||||
|
|
||||||
Black
|
|
||||||
~~~~~
|
|
||||||
|
|
||||||
`Site officiel <https://black.readthedocs.io/en/stable/>`__
|
|
||||||
|
|
||||||
Pour faciliter la lecture du code, il est toujours appréciable d'avoir une norme d'écriture cohérente. C'est généralement à l'étape de relecture des modifications par les autres contributeurs que sont repérées ces fautes de normes qui se doivent d'être corrigées pour le bien commun.
|
|
||||||
|
|
||||||
Imposer une norme est très fastidieux, que ce soit pour ceux qui relisent ou pour ceux qui écrivent. C'est pour cela que nous utilisons black qui est un formateur automatique de code. Une fois l'outil lancé, il parcours la codebase pour y repérer les fautes de norme et les corrige automatiquement sans que l'utilisateur n'ait à s'en soucier. Bien installé, il peut effectuer ce travail à chaque sauvegarde d'un fichier dans son éditeur, ce qui est très agréable pour travailler.
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
Le versioning
|
|
||||||
=============
|
|
||||||
|
|
||||||
Dans le monde du développement, nous faisons face à un problème relativement étrange pour un domaine aussi avancé : on est brouillon.
|
|
||||||
|
|
||||||
On teste, on envoie, ça marche pas, on reteste, c'est ok. Par contre, on a oublié plein d'exceptions. Et on refactor. Ça marche mieux mais c'est moins rapide, etc.
|
|
||||||
|
|
||||||
Et derrière tout ça, on fait des trucs qui marchent puis on se retrouve dans la mouise parce qu'on a effacé un morceau de code qui nous aurait servi plus tard.
|
|
||||||
|
|
||||||
Pour pallier ce problème, le programmeur a créé un principe révolutionnaire (ouais... à mon avis, on s'est inspiré d'autres trucs, mais on va dire que c'est nous les créateurs) : le Versioning (*Apparition inexpliquée*).
|
|
||||||
|
|
||||||
D'après projet-isika (c'est pas wikipedia ouais, ils étaient pas clairs eux), le versioning (ou versionnage en français mais c'est quand même vachement dégueu comme mot) consiste à travailler directement sur le code source d'un projet, en gardant toutes les versions précédentes. Les outils du versioning aident les développeurs à travailler parallèlement sur différentes parties du projet et à revenir facilement aux étapes précédentes de leur travail en cas de besoin. L’utilisation d’un logiciel de versioning est devenue quasi-indispensable pour tout développeur, même s’il travaille seul.
|
|
||||||
|
|
||||||
Un versioning pour les gouverner tous
|
|
||||||
-------------------------------------
|
|
||||||
|
|
||||||
On va vite fait passer sur les différents logiciels de contrôle de version avant de revenir à l'essentiel, le vrai, le beau, l'unique et l'ultime : Git.
|
|
||||||
|
|
||||||
**Source Code Control System (SCCS)**) : Développé en 1972 dans les labos d'IBM, il a été porté sur Unix pour ensuite donner naissance à RCS.
|
|
||||||
**GNU RCS (Revision Control System)** : RCS est à l'origine un projet universitaire, initié au début des années 1980, et maintenu pendant plus d'une décennie par Walter F. Tichy au sein de l'université Purdue.
|
|
||||||
|
|
||||||
Ce logiciel représente à l'époque une alternative libre au système SCCS, et une évolution technique, notamment par son interface utilisateur, plus conviviale, et une récupération des données, plus rapide, par l'amélioration du stockage des différentes versions. Ce gain de performance provient d'un algorithme appelé en anglais « reverse differences » (ou plus simplement « deltas ») et consiste à stocker la copie complète des versions les plus récentes et conserver uniquement les changements réalisés.
|
|
||||||
|
|
||||||
**CVS (Concurrent Versions System)** : En gros, c'est la première fois qu'on essaie de fusionner des versions *concurrentes* (dis-donc, quel hasard que ce soit des concurrents vu le nom du système !) de fichiers sources. C'était pas forcément compliqué : en gros, il y avait un serveur qui prenait à chaque fois la dernière version de chaque fichier, les développeurs devaient toujours avoir la dernière version du fichier s'ils voulaient éditer celui-ci. Si c'était pas le cas, le serveur les envoyait paitre.
|
|
||||||
|
|
||||||
**SVN (Subversion)** : En gros, c'est comme CVS mais avec quelques améliorations du fait du refactoring complet fait par Apache. Subversion permet notamment le renommage et le déplacement de fichiers ou de répertoires sans en perdre l'historique. On a aussi un versioning sur les metadatas (genre les changements de permissions des fichiers.
|
|
||||||
|
|
||||||
**Git** : Enfin le voilà. Le versioning ultime. Créé par Linus Torvalds en 2005, il permet notamment au bordel qu'est Linux d'être maintenu par des développeurs du monde entier grâce à un système original de version : en gros, chaque ordinateur a une version du code source et il n'y a pas forcément un serveur central qui garde tout (et demande un compte à chaque fois. Bon, maintenant on est de retour au format minitel avec Github mais on va vous montrer comment s'en sortir). Il y a également un système de branche pour pouvoir gérer différentes versions du code en parallèle. Tout est fait sous forme de petits fichiers de versioning qui vont faire des copies des fichiers correspondant à la modification proposée. Bref, c'est trop bien et on a pas fait mieux.
|
|
||||||
|
|
||||||
C'est pas forcément utile de comprendre le fonctionnement interne de Git pour développer (la preuve, je n'ai pas franchement chercher au tréfond du bousin) mais c'est en revanche indispensable de comprendre comment l'utiliser avant de faire n'importe quoi. Du coup, on va voir ci-dessous comment utiliser Git et comment on l'utilise sur le site AE.
|
|
||||||
|
|
||||||
TLDR
|
|
||||||
----
|
|
||||||
|
|
||||||
Un système de versioning permet de faire de la merde dans votre code et de pouvoir revenir en arrière malgré tout. Ça permet aussi de coder à plusieurs.
|
|
||||||
Git est le meilleur système de gestion de version (ou système de versioning) que vous pourrez trouver à l'heure actuelle. Utilisez-le.
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
Documentation de core
|
|
||||||
=====================
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
|
|
||||||
core/models.rst
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
Classes liées aux utilisateurs
|
|
||||||
==============================
|
|
||||||
|
|
||||||
.. autoclass:: core.models.User
|
|
||||||
65
doc/conf.py
65
doc/conf.py
@ -1,65 +0,0 @@
|
|||||||
# Configuration file for the Sphinx documentation builder.
|
|
||||||
#
|
|
||||||
# This file only contains a selection of the most common options. For a full
|
|
||||||
# list see the documentation:
|
|
||||||
# http://www.sphinx-doc.org/en/master/config
|
|
||||||
|
|
||||||
# -- Path setup --------------------------------------------------------------
|
|
||||||
|
|
||||||
# If extensions (or modules to document with autodoc) are in another directory,
|
|
||||||
# add these directories to sys.path here. If the directory is relative to the
|
|
||||||
# documentation root, use os.path.abspath to make it absolute, like shown here.
|
|
||||||
#
|
|
||||||
import os
|
|
||||||
import sys
|
|
||||||
|
|
||||||
import django
|
|
||||||
|
|
||||||
sys.path.insert(0, os.path.abspath(".."))
|
|
||||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "sith.settings")
|
|
||||||
django.setup()
|
|
||||||
|
|
||||||
|
|
||||||
# -- Project information -----------------------------------------------------
|
|
||||||
|
|
||||||
project = "Sith AE UTBM"
|
|
||||||
copyright = ( # noqa A001
|
|
||||||
"2019, Bartuccio Antoine (Sli), Brunet Pierre (Krophil), Jacquet Florent (Skia)"
|
|
||||||
)
|
|
||||||
author = "Bartuccio Antoine (Sli), Brunet Pierre (Krophil), Jacquet Florent (Skia)"
|
|
||||||
|
|
||||||
|
|
||||||
# -- General configuration ---------------------------------------------------
|
|
||||||
|
|
||||||
# Add any Sphinx extension module names here, as strings. They can be
|
|
||||||
# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
|
|
||||||
# ones.
|
|
||||||
extensions = ["sphinx.ext.autodoc", "sphinx_copybutton", "sphinx.ext.autosectionlabel"]
|
|
||||||
|
|
||||||
# Add any paths that contain templates here, relative to this directory.
|
|
||||||
templates_path = ["_templates"]
|
|
||||||
|
|
||||||
# The language for content autogenerated by Sphinx. Refer to documentation
|
|
||||||
# for a list of supported languages.
|
|
||||||
#
|
|
||||||
# This is also used if you do content translation via gettext catalogs.
|
|
||||||
# Usually you set "language" from the command line for these cases.
|
|
||||||
language = "fr"
|
|
||||||
|
|
||||||
# List of patterns, relative to source directory, that match files and
|
|
||||||
# directories to ignore when looking for source files.
|
|
||||||
# This pattern also affects html_static_path and html_extra_path.
|
|
||||||
exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
|
|
||||||
|
|
||||||
|
|
||||||
# -- Options for HTML output -------------------------------------------------
|
|
||||||
|
|
||||||
# The theme to use for HTML and HTML Help pages. See the documentation for
|
|
||||||
# a list of builtin themes.
|
|
||||||
#
|
|
||||||
html_theme = "sphinx_rtd_theme"
|
|
||||||
|
|
||||||
# Add any paths that contain custom static files (such as style sheets) here,
|
|
||||||
# relative to this directory. They are copied after the builtin static files,
|
|
||||||
# so a file named "default.css" will overwrite the builtin "default.css".
|
|
||||||
html_static_path = ["_static"]
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
Contacts de la banque pour pouvoir coder et mettre en place la boutique en ligne:
|
|
||||||
* Marc Delfils : Marc.DELFILS@ca-franchecomte.fr
|
|
||||||
* Estelle Mesny : Estelle.MESNY@ca-franchecomte.fr
|
|
||||||
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
Générer l'environnement avec populate
|
|
||||||
=====================================
|
|
||||||
|
|
||||||
Lors de l'installation du site en local (via la commande `setup`), la commande **populate** est appelée.
|
|
||||||
|
|
||||||
Cette commande génère entièrement la base de données de développement. Elle se situe dans `core/management/commands/populate.py`.
|
|
||||||
|
|
||||||
Utilisations :
|
|
||||||
|
|
||||||
.. code-block:: shell
|
|
||||||
|
|
||||||
./manage.py setup # Génère la base de test
|
|
||||||
./manage.py setup --prod # Ne génère que le schéma de base et les données strictement nécessaires au fonctionnement
|
|
||||||
|
|
||||||
Les données générées du site dev
|
|
||||||
================================
|
|
||||||
|
|
||||||
Par défaut, la base de données du site de prod contient des données nécessaires au fonctionnement du site comme les groupes (voir :ref:`groups-list`), un utilisateur root, les clubs de base et quelques autres instances indispensables. En plus de ces données par défaut, la base de données du site de dev contient des données de test (*fixtures*) pour remplir le site et le rendre exploitable.
|
|
||||||
|
|
||||||
**Voici les clubs générés pour le site de dev :**
|
|
||||||
|
|
||||||
* AE
|
|
||||||
|
|
||||||
- Bibo'UT
|
|
||||||
- Carte AE
|
|
||||||
- Guy'UT
|
|
||||||
|
|
||||||
+ Woenzel'UT
|
|
||||||
|
|
||||||
- Troll Penché
|
|
||||||
|
|
||||||
* BdF
|
|
||||||
* Laverie
|
|
||||||
|
|
||||||
**Voici utilisateurs générés pour le site de dev :**
|
|
||||||
|
|
||||||
Le mot de passe de tous les utilisateurs est **plop**.
|
|
||||||
|
|
||||||
* **root** -> Dans le groupe Root et cotisant
|
|
||||||
* **skia** -> responsable info AE et cotisant, barmen MDE
|
|
||||||
* **public** -> utilisateur non cotisant et sans groupe
|
|
||||||
* **subscriber** -> utilisateur cotisant et sans groupe
|
|
||||||
* **old_subscriber** -> utilisateur anciennement cotisant et sans groupe
|
|
||||||
* **counter** -> administrateur comptoir
|
|
||||||
* **comptable** -> administrateur comptabilité
|
|
||||||
* **guy** -> utilisateur non cotisant et sans groupe
|
|
||||||
* **rbatsbak** -> utilisateur non cotisant et sans groupe
|
|
||||||
* **sli** -> cotisant avec carte étudiante attachée au compte, barmen MDE
|
|
||||||
* **krophil** -> cotisant avec des plein d'écocups, barmen foyer
|
|
||||||
* **comunity** -> administrateur communication
|
|
||||||
* **tutu** -> administrateur pédagogie
|
|
||||||
|
|
||||||
Ajouter des fixtures
|
|
||||||
====================
|
|
||||||
.. role:: python(code)
|
|
||||||
:language: python
|
|
||||||
|
|
||||||
Les fixtures sont contenus dans *core/management/commands/populate.py* après la ligne 205 : :python:`if not options["prod"]:`.
|
|
||||||
|
|
||||||
Pour ajouter une fixtures, il faut :
|
|
||||||
|
|
||||||
* importer la classe à instancier en début de fichier
|
|
||||||
* créer un objet avec les attributs nécessaires en fin de fichier
|
|
||||||
* enregistrer l'objet dans la base de données
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# Exemple pour ajouter un utilisateur
|
|
||||||
|
|
||||||
# Importation de la classe
|
|
||||||
import core.models import User
|
|
||||||
|
|
||||||
# [...]
|
|
||||||
|
|
||||||
# Création de l'objet
|
|
||||||
jesus = User(
|
|
||||||
username="jc",
|
|
||||||
last_name="Jesus",
|
|
||||||
first_name="Christ",
|
|
||||||
email="son@god.cloud",
|
|
||||||
date_of_birth="2020-24-12",
|
|
||||||
is_superuser=False,
|
|
||||||
is_staff=True,
|
|
||||||
)
|
|
||||||
jesus.set_password("plop")
|
|
||||||
# Enregistrement dans la base de donnée
|
|
||||||
jesus.save()
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
.. _add_subscription:
|
|
||||||
|
|
||||||
Ajouter une nouvelle cotisation
|
|
||||||
===============================
|
|
||||||
|
|
||||||
Il arrive régulièrement que le type de cotisation proposé varie en prix et en durée au cours des années. Le projet étant pensé pour être utilisé par d'autres associations dans la mesure du possible, ces cotisations sont configurables directement dans les paramètres du projet.
|
|
||||||
|
|
||||||
Comprendre la configuration
|
|
||||||
---------------------------
|
|
||||||
|
|
||||||
Pour modifier les cotisations disponibles, tout se gère dans la configuration avec la variable *SITH_SUBSCRIPTIONS*. Dans cet exemple, nous allons ajouter une nouvelle cotisation d'un mois.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
from django.utils.translation import gettext_lazy as _
|
|
||||||
|
|
||||||
SITH_SUBSCRIPTIONS = {
|
|
||||||
# Voici un échantillon de la véritable configuration à l'heure de l'écriture.
|
|
||||||
# Celle-ci est donnée à titre d'exemple pour mieux comprendre comment cela fonctionne.
|
|
||||||
"un-semestre": {"name": _("One semester"), "price": 15, "duration": 1},
|
|
||||||
"deux-semestres": {"name": _("Two semesters"), "price": 28, "duration": 2},
|
|
||||||
"cursus-tronc-commun": {
|
|
||||||
"name": _("Common core cursus"),
|
|
||||||
"price": 45,
|
|
||||||
"duration": 4,
|
|
||||||
},
|
|
||||||
"cursus-branche": {"name": _("Branch cursus"), "price": 45, "duration": 6},
|
|
||||||
"cursus-alternant": {"name": _("Alternating cursus"), "price": 30, "duration": 6},
|
|
||||||
"membre-honoraire": {"name": _("Honorary member"), "price": 0, "duration": 666},
|
|
||||||
"un-jour": {"name": _("One day"), "price": 0, "duration": 0.00555333},
|
|
||||||
|
|
||||||
# On rajoute ici notre cotisation
|
|
||||||
# Elle se nomme "Un mois"
|
|
||||||
# Coûte 6€
|
|
||||||
# Dure 1 mois (on résonne en semestre, ici c'est 1/6 de semestre)
|
|
||||||
"un-mois": {"name": _("One month"), "price": 6, "duration": 0.166}
|
|
||||||
}
|
|
||||||
|
|
||||||
Créer une migration
|
|
||||||
-------------------
|
|
||||||
|
|
||||||
La modification de ce paramètre est étroitement lié à la génération de la base de données. Cette variable est utilisé dans l'objet *Subscription* pour générer les *subscription_type*. Le modifier requiers de générer une migration de basse de données.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
./manage.py makemigrations subscription
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
N'oubliez pas d'appliquer black sur le fichier de migration généré.
|
|
||||||
|
|
||||||
Rajouter la traduction pour la cotisation
|
|
||||||
-----------------------------------------
|
|
||||||
|
|
||||||
Comme on peut l'observer, la cotisation a besoin d'un nom qui est internationalisé. Il est donc nécessaire de le traduire en français. Pour rajouter notre traduction de *"One month"* il faut se référer à cette partie de la documentation : :ref:`translations`.
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
Modifier le weekmail
|
|
||||||
====================
|
|
||||||
|
|
||||||
Le site est capable de générer des mails automatiques composé de l’agrégation d'articles composé par les administrateurs de clubs. Le contenu est inséré dans un template standardisé et contrôlé directement dans le code. Il arrive régulièrement que l'équipe communication souhaite modifier ce template. Que ce soit les couleurs, l'agencement ou encore la bannière ou le footer, voici tout ce qu'il y a à savoir sur le fonctionnement du weekmail en commençant par la classe qui le contrôle.
|
|
||||||
|
|
||||||
.. autoclass:: com.models.Weekmail
|
|
||||||
:members:
|
|
||||||
|
|
||||||
Modifier la bannière et le footer
|
|
||||||
---------------------------------
|
|
||||||
|
|
||||||
Comme on peut l'observer plus haut, ces éléments sont contrôlés par les méthodes *get_banner* et *get_footer* de la classe *Weekmail*. Les modifier est donc très simple, il suffit de modifier le contenu de la fonction et de rajouter les nouvelles images dans les statics.
|
|
||||||
|
|
||||||
Les images sont à ajouter dans dans **core/static/com/img** et sont à nommer selon le type (banner ou footer), le semestre (Automne ou Printemps) et l'année.
|
|
||||||
|
|
||||||
Exemple : *weekmail_bannerA18.jpg* pour la bannière de l'automne 2018.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# Sélectionner le fichier de bannière pour le weekmail de l'automne 2018
|
|
||||||
|
|
||||||
def get_banner(self):
|
|
||||||
return "http://" + settings.SITH_URL + static("com/img/weekmail_bannerA18.jpg")
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Penser à prendre les images au format **jpg** et que les images soient le plus léger possible, c'est bien mieux pour l'utilisateur final.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Pensez à laisser les anciennes images dans le dossier pour que les anciens weekmails ne soient pas affectés par les changements.
|
|
||||||
|
|
||||||
Modifier le template
|
|
||||||
--------------------
|
|
||||||
|
|
||||||
Comme on peut le voir dans la documentation de la classe, il existe deux templates différents. Un des templates est en texte pur et sert pour le rendu dégradé des lecteurs de mails ne supportant pas le HTML et un autre fait un rendu en HTML.
|
|
||||||
|
|
||||||
Ces deux templates sont respectivement accessibles aux emplacements suivants :
|
|
||||||
|
|
||||||
* com/templates/com/weekmail_renderer_html.jinja
|
|
||||||
* com/templates/com/weekmail_renderer_text.jinja
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Pour le rendu HTML, pensez à utiliser le CSS et le javascript le plus simple possible pour que le rendu se fasse correctement dans les clients mails qui sont souvent capricieux.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Le CSS est inclus statiquement pour que toute modification ultérieure de celui-ci n'affecte pas les versions précédemment envoyées.
|
|
||||||
|
|
||||||
.. warning::
|
|
||||||
|
|
||||||
Si vous souhaitez ajouter du contenu, n'oubliez pas de bien inclure ce contenu dans les deux templates.
|
|
||||||
15
doc/header
15
doc/header
@ -1,15 +0,0 @@
|
|||||||
# -*- coding:utf-8 -*
|
|
||||||
#
|
|
||||||
# Copyright 2023 © AE UTBM
|
|
||||||
# ae@utbm.fr / ae.info@utbm.fr
|
|
||||||
#
|
|
||||||
# This file is part of the website of the UTBM Student Association (AE UTBM),
|
|
||||||
# https://ae.utbm.fr.
|
|
||||||
#
|
|
||||||
# You can find the source code of the website at https://github.com/ae-utbm/sith3
|
|
||||||
#
|
|
||||||
# LICENSED UNDER THE GNU GENERAL PUBLIC LICENSE VERSION 3 (GPLv3)
|
|
||||||
# SEE : https://raw.githubusercontent.com/ae-utbm/sith3/master/LICENSE
|
|
||||||
# OR WITHIN THE LOCAL FILE "LICENSE"
|
|
||||||
#
|
|
||||||
#
|
|
||||||
101
doc/index.rst
101
doc/index.rst
@ -1,101 +0,0 @@
|
|||||||
.. Sith AE UTBM documentation master file, created by
|
|
||||||
sphinx-quickstart on Thu Aug 8 19:24:14 2019.
|
|
||||||
You can adapt this file completely to your liking, but it should at least
|
|
||||||
contain the root `toctree` directive.
|
|
||||||
|
|
||||||
Bienvenue sur la documentation du Sith de l'AE
|
|
||||||
==============================================
|
|
||||||
|
|
||||||
.. include:: ../README.rst
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
:caption: À propos du projet:
|
|
||||||
|
|
||||||
about/introduction
|
|
||||||
about/tech
|
|
||||||
about/versioning
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
:caption: Bien démarrer
|
|
||||||
|
|
||||||
start/install
|
|
||||||
start/structure
|
|
||||||
start/hello_world
|
|
||||||
|
|
||||||
start/translations
|
|
||||||
|
|
||||||
start/devtools
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
:caption: La surcouche "Site AE"
|
|
||||||
|
|
||||||
overlay/rights
|
|
||||||
overlay/groups
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
:caption: Contenu de l'environnement de développement
|
|
||||||
|
|
||||||
devenv/populate
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 1
|
|
||||||
:caption: Modifications fréquentes
|
|
||||||
|
|
||||||
frequent/subscriptions
|
|
||||||
frequent/weekmail
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 3
|
|
||||||
:caption: Documentation des apps
|
|
||||||
|
|
||||||
apps/core
|
|
||||||
|
|
||||||
.. toctree::
|
|
||||||
:maxdepth: 2
|
|
||||||
:caption: Divers
|
|
||||||
|
|
||||||
misc/md_syntax
|
|
||||||
misc/helpers
|
|
||||||
misc/direnv
|
|
||||||
misc/prod
|
|
||||||
|
|
||||||
Documentations complémentaires
|
|
||||||
------------------------------
|
|
||||||
|
|
||||||
Python et Django
|
|
||||||
~~~~~~~~~~~~~~~~
|
|
||||||
|
|
||||||
* `Apprendre Python <https://openclassrooms.com/fr/courses/235344-apprenez-a-programmer-en-python>`__
|
|
||||||
* `Apprendre Django <https://openclassrooms.com/fr/courses/1871271-developpez-votre-site-web-avec-le-framework-django>`__
|
|
||||||
* `Documentation de Django <https://docs.djangoproject.com/fr/1.11/>`__
|
|
||||||
* `Classy Class-Based Views <http://ccbv.co.uk/projects/Django/1.11/>`__
|
|
||||||
|
|
||||||
HTML/Jinja/JS/(S)CSS
|
|
||||||
~~~~~~~~~~~~~~~~~~~~
|
|
||||||
|
|
||||||
* `Cours sur le javascript <https://openclassrooms.com/fr/courses/2984401-apprenez-a-coder-avec-javascript>`__
|
|
||||||
* `Cours sur jQuery <https://openclassrooms.com/fr/courses/1631636-simplifiez-vos-developpements-javascript-avec-jquery>`__
|
|
||||||
* `Cours sur le HTML et CSS <https://openclassrooms.com/fr/courses/1631636-simplifiez-vos-developpements-javascript-avec-jquery>`__
|
|
||||||
* `Documentation sur les grilles CSS <https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout>`__
|
|
||||||
* `Guide pour le SASS <https://sass-lang.com/guide>`__
|
|
||||||
* `Documentation de fontawesome <https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use>`__
|
|
||||||
* `Documentation pour Jinja2 <https://jinja.palletsprojects.com/en/2.10.x/>`__
|
|
||||||
|
|
||||||
Git
|
|
||||||
~~~
|
|
||||||
|
|
||||||
* `Cours sur Git <https://openclassrooms.com/fr/courses/2342361-gerez-votre-code-avec-git-et-github>`__
|
|
||||||
* `Livre sur Git <http://www.git-scm.com/book/fr/v2>`__
|
|
||||||
|
|
||||||
|
|
||||||
Documents téléchargeables
|
|
||||||
-------------------------
|
|
||||||
|
|
||||||
* :download:`Rapport de la TW de Skia sur la création du site <TW_Skia/Rapport.pdf>`
|
|
||||||
* :download:`Rapport sur la TO de Skia et LoJ <TO_Skia_LoJ/Rapport.pdf>`
|
|
||||||
* :download:`Manuel du service E-transactions <Etransaction/Manuel_Integration_E-transactions_Internet_V6.6_FR.pdf>`
|
|
||||||
* :download:`Guide de trésorerie <Guide de Tresorerie.pdf>`
|
|
||||||
35
doc/make.bat
35
doc/make.bat
@ -1,35 +0,0 @@
|
|||||||
@ECHO OFF
|
|
||||||
|
|
||||||
pushd %~dp0
|
|
||||||
|
|
||||||
REM Command file for Sphinx documentation
|
|
||||||
|
|
||||||
if "%SPHINXBUILD%" == "" (
|
|
||||||
set SPHINXBUILD=sphinx-build
|
|
||||||
)
|
|
||||||
set SOURCEDIR=.
|
|
||||||
set BUILDDIR=_build
|
|
||||||
|
|
||||||
if "%1" == "" goto help
|
|
||||||
|
|
||||||
%SPHINXBUILD% >NUL 2>NUL
|
|
||||||
if errorlevel 9009 (
|
|
||||||
echo.
|
|
||||||
echo.The 'sphinx-build' command was not found. Make sure you have Sphinx
|
|
||||||
echo.installed, then set the SPHINXBUILD environment variable to point
|
|
||||||
echo.to the full path of the 'sphinx-build' executable. Alternatively you
|
|
||||||
echo.may add the Sphinx directory to PATH.
|
|
||||||
echo.
|
|
||||||
echo.If you don't have Sphinx installed, grab it from
|
|
||||||
echo.http://sphinx-doc.org/
|
|
||||||
exit /b 1
|
|
||||||
)
|
|
||||||
|
|
||||||
%SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
|
|
||||||
goto end
|
|
||||||
|
|
||||||
:help
|
|
||||||
%SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
|
|
||||||
|
|
||||||
:end
|
|
||||||
popd
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
.. _direnv:
|
|
||||||
|
|
||||||
Utiliser direnv
|
|
||||||
===============
|
|
||||||
|
|
||||||
Pour éviter d'avoir à sourcer l'environnement à chaque fois qu'on rentre dans le projet, il est possible d'utiliser l'utilitaire `direnv <https://direnv.net/>`__.
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
# Installation de l'utilitaire
|
|
||||||
|
|
||||||
# Debian et Ubuntu
|
|
||||||
sudo apt install direnv
|
|
||||||
# Mac
|
|
||||||
brew install direnv
|
|
||||||
|
|
||||||
|
|
||||||
# Installation dans la config
|
|
||||||
# Si sur bash
|
|
||||||
echo 'eval "$(direnv hook bash)"' >> ~/.bashrc
|
|
||||||
# Si sur ZSH
|
|
||||||
echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc
|
|
||||||
|
|
||||||
exit # On redémarre le terminal
|
|
||||||
|
|
||||||
# Une fois dans le dossier du projet site AE
|
|
||||||
direnv allow .
|
|
||||||
|
|
||||||
Une fois que cette configuration a été appliquée, aller dans le dossier du site applique automatiquement l'environnement virtuel, cela fait beaucoup moins de temps perdu pour tout le monde.
|
|
||||||
|
|
||||||
Direnv est un utilitaire très puissant et qui peut s'avérer pratique dans bien des situations, n'hésitez pas à aller vous renseigner plus en détail sur celui-ci.
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
Commandes utiles
|
|
||||||
================
|
|
||||||
|
|
||||||
Appliquer le header de licence sur tout le projet
|
|
||||||
-------------------------------------------------
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
for f in $(find . -name "*.py" ! -path "*migration*" ! -path "./env/*" ! -path "./doc/*"); do cat ./doc/header "$f" > /tmp/temp && mv /tmp/temp "$f"; done
|
|
||||||
|
|
||||||
Compter le nombre de lignes de code
|
|
||||||
-----------------------------------
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
sudo apt install cloc
|
|
||||||
cloc --exclude-dir=doc,env .
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
Syntaxe markdown utilisée dans le site
|
|
||||||
======================================
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si vous faites une mise à jour sur le parseur markdown, il est bon de documenter cette mise à jour dans la page de référence *doc/SYNTAX.md*. Mettre à jour ce fichier vas casser les tests si vous ne mettez pas à jour le fichier *doc/SYNTAX.html* qui lui correspond juste après. Pour mettre à jour ce fichier il suffit d'utiliser la commande
|
|
||||||
|
|
||||||
::
|
|
||||||
|
|
||||||
./manage.py markdown > doc/SYNTAX.html
|
|
||||||
|
|
||||||
.. warning::
|
|
||||||
|
|
||||||
Le rendu de cette aide est fait via Sphinx, il peut représenter quelques différences avec la réalité. Il est possible de télécharger juste en dessous les versions brutes.
|
|
||||||
|
|
||||||
* :download:`Fichier d'aide en markdown <../SYNTAX.md>`
|
|
||||||
* :download:`Fichier d'aide rendu en HTML <../SYNTAX.html>`
|
|
||||||
|
|
||||||
.. raw:: html
|
|
||||||
:file: ../SYNTAX.html
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
Configurer pour la production
|
|
||||||
=============================
|
|
||||||
|
|
||||||
Configurer Sentry
|
|
||||||
-----------------
|
|
||||||
|
|
||||||
Pour connecter l'application à une instance de sentry (ex: https://sentry.io) il est nécessaire de configurer la variable **SENTRY_DSN** dans le fichier *settings_custom.py*. Cette variable est composée d'un lien complet vers votre projet sentry.
|
|
||||||
|
|
||||||
Récupérer les statiques
|
|
||||||
-----------------------
|
|
||||||
|
|
||||||
Nous utilisons du SCSS dans le projet. En environnement de développement (DEBUG=True), le SCSS est compilé à chaque fois que le fichier est demandé. Pour la production, le projet considère que chacun des fichier est déjà compilé, et, pour ce faire, il est nécessaire d'utiliser les commandes suivantes dans l'ordre :
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
./manage.py collectstatic # Pour récupérer tous les fichiers statiques
|
|
||||||
./manage.py compilestatic # Pour compiler les fichiers SCSS qu'ils contiennent
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Le dossier où seront enregistrés ces fichiers statiques peut être changé en modifiant la variable *STATIC_ROOT* dans les paramètres.
|
|
||||||
BIN
doc/modules.dia
BIN
doc/modules.dia
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
@ -1,64 +0,0 @@
|
|||||||
Le système de groupes
|
|
||||||
=====================
|
|
||||||
|
|
||||||
Il existe deux types de groupes sur le site AE. L'un se base sur des groupes enregistrés en base de données pendant le développement, c'est le système de groupes réels. L'autre est plus dynamique et comprend tous les groupes générés pendant l'exécution et l'utilisation du programme. Cela correspond généralement aux groupes liés aux clubs. Ce sont les méta groupes.
|
|
||||||
|
|
||||||
La définition d'un groupe
|
|
||||||
--------------------------
|
|
||||||
|
|
||||||
Comme on peut l'observer, il existe une entrée de groupes dans la base de données. Cette classe implémente à la fois les groupes réels et les méta groupes.
|
|
||||||
|
|
||||||
Ce qui différencie ces deux types de groupes ce sont leur utilisation et leur manière d'être générés. La distinction est faite au travers de la propriété `is_meta`.
|
|
||||||
|
|
||||||
.. autoclass:: core.models.Group
|
|
||||||
:members:
|
|
||||||
|
|
||||||
Les groupes réels
|
|
||||||
-----------------
|
|
||||||
|
|
||||||
Pour simplifier l'utilisation de ces deux types de groupe, il a été crée une classe proxy (c'est à dire qu'elle ne correspond pas à une vraie table en base de donnée) qui encapsule leur utilisation. RealGroup peut être utilisé pour créer des groupes réels dans le code et pour faire une recherche sur ceux-ci (dans le cadre d'une vérification de permissions par exemple).
|
|
||||||
|
|
||||||
.. autoclass:: core.models.RealGroup
|
|
||||||
:members:
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
N'oubliez pas de créer une variable dans les settings contenant le numéro du groupe pour facilement l'utiliser dans le code plus tard. Ces variables sont du type `SITH_GROUP_GROUPE_NAME_ID`.
|
|
||||||
|
|
||||||
Les méta groupes
|
|
||||||
----------------
|
|
||||||
|
|
||||||
Les méta groupes, comme expliqué précédemment, sont utilisés dans les contextes où il est nécessaire de créer un groupe *on runtime*. Les objets `MetaGroup`, bien que dynamiques, doivent tout de même s'enregistrer en base de donnée comme des vrais groupes afin de pouvoir être affectés dans les permissions d'autres objets, comme un forum ou une page de wiki par exemple. C'est principalement utilisé au travers des clubs qui génèrent automatiquement deux groupes à leur création :
|
|
||||||
|
|
||||||
* club-bureau : contient tous les membres d'un club **au dessus** du grade défini dans settings.SITH_MAXIMUM_FREE_ROLE.
|
|
||||||
* club-membres : contient tous les membres d'un club **en dessous** du grade défini dans settings.SITH_MAXIMUM_FREE_ROLE.
|
|
||||||
|
|
||||||
.. autoclass:: core.models.MetaGroup
|
|
||||||
:members:
|
|
||||||
|
|
||||||
|
|
||||||
.. _groups-list:
|
|
||||||
|
|
||||||
La liste des groupes réels
|
|
||||||
--------------------------
|
|
||||||
|
|
||||||
Les groupes réels existant par défaut dans le site sont les suivants :
|
|
||||||
|
|
||||||
Groupes gérés automatiquement par le site :
|
|
||||||
|
|
||||||
* **Public** -> tous les utilisateurs du site
|
|
||||||
* **Subscribers** -> tous les cotisants du site
|
|
||||||
* **Old subscribers** -> tous les anciens cotisants
|
|
||||||
|
|
||||||
Groupes gérés par les administrateurs (à appliquer à la main sur un utilisateur) :
|
|
||||||
|
|
||||||
* **Root** -> administrateur global du site
|
|
||||||
* **Accounting admin** -> les administrateurs de la comptabilité
|
|
||||||
* **Communication admin** -> les administrateurs de la communication
|
|
||||||
* **Counter admin** -> les administrateurs des comptoirs (foyer et autre)
|
|
||||||
* **SAS admin** -> les administrateurs du SAS
|
|
||||||
* **Forum admin** -> les administrateurs du forum
|
|
||||||
* **Pedagogy admin** -> les administrateurs de la pédagogie (guide des UVs)
|
|
||||||
* **Banned from buying alcohol** -> les utilisateurs interdits de vente d'alcool (non mineurs)
|
|
||||||
* **Banned from counters** -> les utilisateurs interdits d'utilisation des comptoirs
|
|
||||||
* **Banned to subscribe** -> les utilisateurs interdits de cotisation
|
|
||||||
@ -1,159 +0,0 @@
|
|||||||
La gestion des droits
|
|
||||||
=====================
|
|
||||||
|
|
||||||
La gestion des droits dans l'association étant très complexe, le système de permissions intégré dans Django ne suffisait pas, il a donc fallu créer et intégrer le notre.
|
|
||||||
|
|
||||||
La gestion des permissions se fait directement sur un modèle, il existe trois niveaux de permission :
|
|
||||||
|
|
||||||
* Édition des propriétés de l'objet
|
|
||||||
* Édition de certaines valeurs l'objet
|
|
||||||
* Voir l'objet
|
|
||||||
|
|
||||||
Protéger un modèle
|
|
||||||
------------------
|
|
||||||
|
|
||||||
Lors de l'écriture d'un modèle, il est très simple de définir des permissions. Celle-ci peuvent être basées sur des groupes et/ou sur des fonctions personnalisées.
|
|
||||||
|
|
||||||
Nous allons présenter ici les deux techniques. Dans un premier temps nous allons protéger une classe Article par groupes.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
from django.db import models
|
|
||||||
from django.conf import settings
|
|
||||||
from django.utils.translation import gettext_lazy as _
|
|
||||||
|
|
||||||
from core.views import *
|
|
||||||
from core.models import User, Group
|
|
||||||
|
|
||||||
# Utilisation de la protection par groupe
|
|
||||||
class Article(models.Model):
|
|
||||||
|
|
||||||
title = models.CharField(_("title"), max_length=100)
|
|
||||||
content = models.TextField(_("content"))
|
|
||||||
|
|
||||||
# Ne peut pas être une liste
|
|
||||||
# Groupe possédant l'objet
|
|
||||||
# Donne les droits d'édition des propriétés de l'objet
|
|
||||||
owner_group = models.ForeignKey(
|
|
||||||
Group, related_name="owned_articles", default=settings.SITH_GROUP_ROOT_ID
|
|
||||||
)
|
|
||||||
|
|
||||||
# Doit être une liste
|
|
||||||
# Tous les groupes qui seront ajouté dans ce champ auront les droits d'édition de l'objet
|
|
||||||
edit_group = models.ManyToManyField(
|
|
||||||
edit_groups = models.ManyToManyField(
|
|
||||||
Group,
|
|
||||||
related_name="editable_articles",
|
|
||||||
verbose_name=_("edit groups"),
|
|
||||||
blank=True,
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
# Doit être une liste
|
|
||||||
# Tous les groupes qui seront ajouté dans ce champ auront les droits de vue de l'objet
|
|
||||||
view_groups = models.ManyToManyField(
|
|
||||||
Group,
|
|
||||||
related_name="viewable_articles",
|
|
||||||
verbose_name=_("view groups"),
|
|
||||||
blank=True,
|
|
||||||
)
|
|
||||||
|
|
||||||
Voici maintenant comment faire en définissant des fonctions personnalisées. Cette deuxième solution permet, dans le cas où la première n'est pas assez puissante, de créer des permissions complexes et fines. Attention à bien les rendre lisibles et de bien documenter.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
from django.db import models
|
|
||||||
from django.utils.translation import gettext_lazy as _
|
|
||||||
|
|
||||||
from core.views import *
|
|
||||||
from core.models import User, Group
|
|
||||||
|
|
||||||
# Utilisation de la protection par fonctions
|
|
||||||
class Article(models.Model):
|
|
||||||
|
|
||||||
title = models.CharField(_("title"), max_length=100)
|
|
||||||
content = models.TextField(_("content"))
|
|
||||||
|
|
||||||
# Donne ou non les droits d'édition des propriétés de l'objet
|
|
||||||
# Un utilisateur dans le bureau AE aura tous les droits sur cet objet
|
|
||||||
def is_owned_by(self, user):
|
|
||||||
return user.is_board_member
|
|
||||||
|
|
||||||
# Donne ou non les droits d'édition de l'objet
|
|
||||||
# L'objet ne sera modifiable que par un utilisateur cotisant
|
|
||||||
def can_be_edited_by(self, user):
|
|
||||||
return user.is_subscribed
|
|
||||||
|
|
||||||
# Donne ou non les droits de vue de l'objet
|
|
||||||
# Ici, l'objet n'est visible que par un utilisateur connecté
|
|
||||||
def can_be_viewed_by(self, user):
|
|
||||||
return not user.is_anonymous
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si un utilisateur est autorisé à un niveau plus élevé que celui auquel il est testé, le système le détectera automatiquement et les droits lui seront accordé. Par défaut, les seuls utilisateurs ayant des droits quelconques sont les *superuser* de Django et les membres du bureau AE qui sont définis comme *owner*.
|
|
||||||
|
|
||||||
Appliquer les permissions
|
|
||||||
-------------------------
|
|
||||||
|
|
||||||
Dans un template
|
|
||||||
~~~~~~~~~~~~~~~~
|
|
||||||
|
|
||||||
Il existe trois fonctions de base sur lesquelles reposent les vérifications de permission. Elles sont disponibles dans le contexte par défaut du moteur de template et peuvent être utilisées à tout moment.
|
|
||||||
|
|
||||||
Tout d'abord, voici leur documentation et leur prototype.
|
|
||||||
|
|
||||||
.. autofunction:: core.views.can_edit_prop
|
|
||||||
.. autofunction:: core.views.can_edit
|
|
||||||
.. autofunction:: core.views.can_view
|
|
||||||
|
|
||||||
Voici un exemple d'utilisation dans un template :
|
|
||||||
|
|
||||||
.. code-block:: html+jinja
|
|
||||||
|
|
||||||
{# ... #}
|
|
||||||
{% if can_edit(club, user) %}
|
|
||||||
<a href="{{ url('club:tools', club_id=club.id) }}">{{ club }}</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
Dans une vue
|
|
||||||
~~~~~~~~~~~~
|
|
||||||
|
|
||||||
Généralement, les vérifications de droits dans les templates se limitent au liens à afficher puisqu'il ne faut pas mettre de logique autre que d'affichage à l'intérieur. C'est donc généralement au niveau des vues que cela a lieu.
|
|
||||||
|
|
||||||
Notre système s'appuie sur un système de mixin à hériter lors de la création d'une vue basée sur une classe. Ces mixins ne sont compatibles qu'avec les classes récupérant un objet ou une liste d'objet. Dans le cas d'un seul objet, une permission refusée est levée lorsque l'utilisateur n'as pas le droit de visionner la page. Dans le d'une liste d'objet, le mixin filtre les objets non autorisés et si aucun ne l'est l'utilisateur recevra une liste vide d'objet.
|
|
||||||
|
|
||||||
Voici un exemple d'utilisation en reprenant l'objet Article crée précédemment :
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
from django.views.generic import CreateView, ListView
|
|
||||||
|
|
||||||
from core.views import CanViewMixin, CanCreateMixin
|
|
||||||
|
|
||||||
from .models import Article
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
# Il est important de mettre le mixin avant la classe héritée de Django
|
|
||||||
# L'héritage multiple se fait de droite à gauche et les mixins ont besoin
|
|
||||||
# d'une classe de base pour fonctionner correctement.
|
|
||||||
class ArticlesListView(CanViewMixin, ListView):
|
|
||||||
|
|
||||||
model = Article # On base la vue sur le modèle Article
|
|
||||||
...
|
|
||||||
|
|
||||||
# Même chose pour une vue de création de l'objet Article
|
|
||||||
class ArticlesCreateView(CanCreateMixin, CreateView):
|
|
||||||
|
|
||||||
model = Article
|
|
||||||
|
|
||||||
Le système de permissions de propose plusieurs mixins différents, les voici dans leur intégralité.
|
|
||||||
|
|
||||||
.. autoclass:: core.views.CanCreateMixin
|
|
||||||
.. autoclass:: core.views.CanEditPropMixin
|
|
||||||
.. autoclass:: core.views.CanEditMixin
|
|
||||||
.. autoclass:: core.views.CanViewMixin
|
|
||||||
.. autoclass:: core.views.UserIsRootMixin
|
|
||||||
.. autoclass:: core.views.FormerSubscriberMixin
|
|
||||||
.. autoclass:: core.views.UserIsLoggedMixin
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
Configurer son environnement de développement
|
|
||||||
=============================================
|
|
||||||
|
|
||||||
Le projet n'est en aucun cas lié à un quelconque environnement de développement.
|
|
||||||
Il est possible pour chacun de travailler avec les outils dont il a envie et d'utiliser l'éditeur de code avec lequel il est le plus à l'aise.
|
|
||||||
|
|
||||||
Pour donner une idée, Skia a écrit une énorme partie de projet avec l'éditeur *Vim* sur du GNU/Linux
|
|
||||||
alors que Sli a utilisé *Sublime Text* sur MacOS et que Maréchal travaille avec PyCharm
|
|
||||||
sur ~~Windows muni de WSL~~ Arch Linux btw.
|
|
||||||
|
|
||||||
Configurer les pre-commit hooks
|
|
||||||
--------------------------------
|
|
||||||
|
|
||||||
La procédure habituelle pour contribuer au projet consiste à commit des modifications, puis à les push sur le dépôt distant et à ouvrir une pull request. Cette PR va faire tourner les outils de vérification de la qualité de code. Si la vérification échoue, la PR est bloquée, et il faut réparer le problème (ce qui implique de push un micro-commit ou de push force sur la branche).
|
|
||||||
|
|
||||||
Dans l'idéal, on aimerait donc qu'il soit impossible d'oublier de faire tourner ces vérification. Pour ça, il existe un mécanisme : les pre-commits hooks. Ce sont des actions qui tournent automatiquement lorsque vous effectuez un `git commit`. Ces dernières vont analyser et éventuellement modifier le code, avant que Git n'ajoute effectivement le commit sur l'arbre git. Voyez ça comme une micro-CI qui tourne en local.
|
|
||||||
|
|
||||||
Les git hooks sont une fonctionnalité par défaut de Git. Cependant, leur configuration peut-être un peu embêtante si vous le faites manuellement. Pour gérer ça plus simplement, nous utilisons le logiciel python [pre-commit](https://pre-commit.com/) qui permet de contrôler leur installation via un seul fichier de configuration, placé à la racine du projet (plus précisément, il s'agit du fichier `.pre-commit-config.yaml`).
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Les pre-commits sont également utilisés dans la CI. Si ces derniers fonctionnent localement, vous avez la garantie que la pipeline ne sera pas fachée. ;)
|
|
||||||
|
|
||||||
C'est une fonctionnalité de git lui même mais c'est assez embêtant à gérer manuellement. Pour gérer ça plus simplement, nous utilisons le logiciel python [pre-commit](https://pre-commit.com/) qui permet de contrôller leur installation via un fichier yaml.
|
|
||||||
|
|
||||||
Les pre-commits sont également utilisés dans la CI, si les pre-commits fonctionnent localement, vous avez la garantie que la pipeline ne sera pas fachée ;).
|
|
||||||
|
|
||||||
Le logiciel est installé par défaut par poetry. Il suffit ensuite de lancer :
|
|
||||||
|
|
||||||
.. code-block::
|
|
||||||
|
|
||||||
pre-commit install
|
|
||||||
|
|
||||||
Tout se fait ensuite automatiquement lorsqu'on utilise git normalement pour commit. Pour appliquer les pre-commits manuellement, il est possible d'appeler soi même les pre-commits
|
|
||||||
|
|
||||||
.. code-block::
|
|
||||||
|
|
||||||
pre-commit run --all-files
|
|
||||||
|
|
||||||
|
|
||||||
Configurer Ruff pour son éditeur
|
|
||||||
---------------------------------
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Ruff est inclus dans les dépendances du projet.
|
|
||||||
Si vous avez réussi à terminer l'installation, vous n'avez donc pas de configuration
|
|
||||||
supplémentaire à effectuer.
|
|
||||||
|
|
||||||
Pour utiliser Ruff, placez-vous à la racine du projet et lancez la commande suivante :
|
|
||||||
|
|
||||||
.. code-block::
|
|
||||||
|
|
||||||
ruff format # pour formatter le code
|
|
||||||
ruff check # pour linter le code
|
|
||||||
|
|
||||||
Ruff va alors faire son travail sur l'ensemble du projet puis vous dire
|
|
||||||
si des documents ont été reformatés (si vous avez fait `ruff format`)
|
|
||||||
ou bien s'il y a des erreurs à réparer (si vous avez faire `ruff check`).
|
|
||||||
|
|
||||||
Appeler Ruff en ligne de commandes avant de pousser votre code sur Github
|
|
||||||
est une technique qui marche très bien.
|
|
||||||
Cependant, vous risquez de souvent l'oublier.
|
|
||||||
Or, lorsque le code ne respecte pas les standards de qualité,
|
|
||||||
la pipeline bloque les PR sur les branches protégées.
|
|
||||||
|
|
||||||
Pour éviter de vous faire régulièrement avoir, vous pouvez configurer
|
|
||||||
votre éditeur pour que Ruff fasse son travail automatiquement à chaque édition d'un fichier.
|
|
||||||
Nous tenterons de vous faire ici un résumé pour deux éditeurs de textes populaires
|
|
||||||
que sont VsCode et Sublime Text.
|
|
||||||
|
|
||||||
VsCode
|
|
||||||
~~~~~~
|
|
||||||
|
|
||||||
Installez l'extension Ruff pour VsCode.
|
|
||||||
Ensuite, ajoutez ceci dans votre configuration :
|
|
||||||
|
|
||||||
.. sourcecode:: json
|
|
||||||
|
|
||||||
{
|
|
||||||
"[python]": {
|
|
||||||
"editor.formatOnSave": true,
|
|
||||||
"editor.defaultFormatter": "charliermarsh.ruff"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Sublime Text
|
|
||||||
~~~~~~~~~~~~
|
|
||||||
|
|
||||||
Vous devez installer ce plugin : https://packagecontrol.io/packages/LSP-ruff.
|
|
||||||
Suivez ensuite les instructions données dans la description du plugin.
|
|
||||||
|
|
||||||
Dans la configuration de votre projet, ajoutez ceci:
|
|
||||||
|
|
||||||
.. sourcecode:: json
|
|
||||||
|
|
||||||
{
|
|
||||||
"settings": {
|
|
||||||
"lsp_format_on_save": true,
|
|
||||||
"LSP": {
|
|
||||||
"LSP-ruff": {
|
|
||||||
"enabled": true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Si vous utilisez le plugin `anaconda <http://damnwidget.github.io/anaconda/>`__, pensez à modifier les paramètres du linter pep8 pour éviter de recevoir des warnings dans le formatage de ruff comme ceci :
|
|
||||||
|
|
||||||
.. sourcecode:: json
|
|
||||||
|
|
||||||
{
|
|
||||||
"pep8_ignore": [
|
|
||||||
"E203",
|
|
||||||
"E266",
|
|
||||||
"E501",
|
|
||||||
"W503"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,275 +0,0 @@
|
|||||||
Créer une nouvelle application Hello World
|
|
||||||
==========================================
|
|
||||||
|
|
||||||
L'objectif de ce petit tutoriel est de prendre rapidement en main les vues, les urls et les modèles de Django. On créera une application nommée *hello* qui fournira une page affichant "Hello World", une autre page qui affichera en plus un numéro qui sera récupéré depuis l'URL ainsi qu'une page affichant un élément récupéré de la base de données, le tout au milieu d'une page typique du Sith AE.
|
|
||||||
|
|
||||||
Créer l'application
|
|
||||||
-------------------
|
|
||||||
|
|
||||||
La première étape est de crée l'application. Cela se fait très simplement avec les outils fournis par le framework.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
./manage.py startapp hello
|
|
||||||
|
|
||||||
Il faut ensuite activer l'application dans les paramètres du projet en l'ajoutant dans la liste des applications installées.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# sith/settings.py
|
|
||||||
|
|
||||||
# ...
|
|
||||||
|
|
||||||
INSTALLED_APPS = (
|
|
||||||
...
|
|
||||||
"hello",
|
|
||||||
)
|
|
||||||
|
|
||||||
Enfin, on vas inclure les URLs de cette application dans le projet sous le préfixe */hello/*.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# sith/urls.py
|
|
||||||
urlpatterns = [
|
|
||||||
...
|
|
||||||
path("hello/", include("hello.urls", namespace="hello", app_name="hello")),
|
|
||||||
]
|
|
||||||
|
|
||||||
Un Hello World simple
|
|
||||||
---------------------
|
|
||||||
|
|
||||||
Dans un premier temps, nous allons créer une vue qui va charger un template en utilisant le système de vues basé sur les classes de Django.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# hello/views.py
|
|
||||||
|
|
||||||
from django.views.generic import TemplateView
|
|
||||||
|
|
||||||
# Toute la logique pour servir la vue et parser le template
|
|
||||||
# est directement héritée de TemplateView
|
|
||||||
class HelloView(TemplateView):
|
|
||||||
template_name = "hello/hello.jinja" # On indique quel template utiliser
|
|
||||||
|
|
||||||
On vas ensuite créer le template.
|
|
||||||
|
|
||||||
.. code-block:: html+jinja
|
|
||||||
|
|
||||||
{# hello/templates/hello/hello.jinja #}
|
|
||||||
|
|
||||||
{# On étend le template de base du Sith #}
|
|
||||||
{% extends "core/base.jinja" %}
|
|
||||||
|
|
||||||
{# On remplis la partie titre du template étendu #}
|
|
||||||
{# Il s'agit du titre qui sera affiché dans l'onglet du navigateur #}
|
|
||||||
{% block title %}
|
|
||||||
Hello World
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{# On remplis le contenu de la page #}
|
|
||||||
{% block content %}
|
|
||||||
<p>Hello World !</p>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
Enfin, on crée l'URL. On veut pouvoir appeler la page depuis https://localhost:8000/hello, le préfixe indiqué précédemment suffit donc.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# hello/urls.py
|
|
||||||
from django.urls import path
|
|
||||||
from hello.views import HelloView
|
|
||||||
|
|
||||||
urlpatterns = [
|
|
||||||
# Le préfixe étant retiré lors du passage du routeur d'URL
|
|
||||||
# dans le fichier d'URL racine du projet, l'URL à matcher ici est donc vide
|
|
||||||
path("", HelloView.as_view(), name="hello"),
|
|
||||||
]
|
|
||||||
|
|
||||||
Et voilà, c'est fini, il ne reste plus qu'à lancer le serveur et à se rendre sur la page.
|
|
||||||
|
|
||||||
Manipuler les arguments d'URL
|
|
||||||
-----------------------------
|
|
||||||
|
|
||||||
Dans cette partie, on cherche à détecter les numéros passés dans l'URL pour les passer dans le template. On commence par ajouter cet URL modifiée.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# hello/urls.py
|
|
||||||
from django.urls import path
|
|
||||||
from hello.views import HelloView
|
|
||||||
|
|
||||||
urlpatterns = [
|
|
||||||
path("", HelloView.as_view(), name="hello"),
|
|
||||||
path("<int:hello_id>", HelloView.as_view(), name="hello"),
|
|
||||||
]
|
|
||||||
|
|
||||||
Cette deuxième URL vas donc appeler la classe crée tout à l'heure en lui passant une variable *hello_id* dans ses *kwargs*, nous allons la récupérer et la passer dans le contexte du template en allant modifier la vue.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# hello/views.py
|
|
||||||
from django.views.generic import TemplateView
|
|
||||||
|
|
||||||
class HelloView(TemplateView):
|
|
||||||
template_name = "hello/hello.jinja"
|
|
||||||
|
|
||||||
# C'est la méthode appelée juste avant de définir le type de requête effectué
|
|
||||||
def dispatch(self, request, *args, **kwargs):
|
|
||||||
|
|
||||||
# On récupère l'ID et on le met en attribut
|
|
||||||
self.hello_id = kwargs.pop("hello_id", None)
|
|
||||||
|
|
||||||
# On reprend le déroulement normal en appelant la méthode héritée
|
|
||||||
return super(HelloView, self).dispatch(request, *args, **kwargs)
|
|
||||||
|
|
||||||
# Cette méthode renvoie les variables qui seront dans le contexte du template
|
|
||||||
def get_context_data(self, **kwargs):
|
|
||||||
|
|
||||||
# On récupère ce qui était sensé être par défaut dans le contexte
|
|
||||||
kwargs = super(HelloView, self).get_context_data(**kwargs)
|
|
||||||
|
|
||||||
# On ajoute notre ID
|
|
||||||
kwargs["hello_id"] = self.hello_id
|
|
||||||
|
|
||||||
# On renvoie le contexte
|
|
||||||
return kwargs
|
|
||||||
|
|
||||||
Enfin, on modifie le template en rajoutant une petite condition sur la présence ou non de cet ID pour qu'il s'affiche.
|
|
||||||
|
|
||||||
.. code-block:: html+jinja
|
|
||||||
|
|
||||||
{# hello/templates/hello/hello.jinja #}
|
|
||||||
{% extends "core/base.jinja" %}
|
|
||||||
|
|
||||||
{% block title %}
|
|
||||||
Hello World
|
|
||||||
{% endblock title %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<p>
|
|
||||||
Hello World !
|
|
||||||
{% if hello_id -%}
|
|
||||||
{{ hello_id }}
|
|
||||||
{%- endif -%}
|
|
||||||
</p>
|
|
||||||
{% endblock content %}
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Il est tout à fait possible d'utiliser les arguments GET passés dans l'URL. Dans ce cas, il n'est pas obligatoire de modifier l'URL et il est possible de récupérer l'argument dans le dictionnaire `request.GET`.
|
|
||||||
|
|
||||||
À l'assaut des modèles
|
|
||||||
----------------------
|
|
||||||
|
|
||||||
Pour cette dernière partie, nous allons ajouter une entrée dans la base de données et l'afficher dans un template. Nous allons ainsi créer un modèle nommé *Article* qui contiendra une entrée de texte pour le titre et une autre pour le contenu.
|
|
||||||
|
|
||||||
Commençons par le modèle en lui même.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# hello/models.py
|
|
||||||
from django.db import models
|
|
||||||
|
|
||||||
|
|
||||||
class Article(models.Model):
|
|
||||||
|
|
||||||
title = models.CharField("titre", max_length=100)
|
|
||||||
content = models.TextField("contenu")
|
|
||||||
|
|
||||||
Continuons avec une vue qui sera en charge d'afficher l'ensemble des articles présent dans la base.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# hello/views.py
|
|
||||||
|
|
||||||
from django.views.generic import ListView
|
|
||||||
|
|
||||||
from hello.models import Article
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
# On hérite de ListView pour avoir plusieurs objets
|
|
||||||
class ArticlesListView(ListView):
|
|
||||||
|
|
||||||
model = Article # On base la vue sur le modèle Article
|
|
||||||
template_name = "hello/articles.jinja"
|
|
||||||
|
|
||||||
On n'oublie pas l'URL.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
from hello.views import HelloView, ArticlesListView
|
|
||||||
|
|
||||||
urlpatterns = [
|
|
||||||
...
|
|
||||||
path("articles/", ArticlesListView.as_view(), name="articles_list")
|
|
||||||
]
|
|
||||||
|
|
||||||
Et enfin le template.
|
|
||||||
|
|
||||||
.. code-block:: html+jinja
|
|
||||||
|
|
||||||
{# hello/templates/hello/articles.jinja #}
|
|
||||||
{% extends "core/base.jinja" %}
|
|
||||||
|
|
||||||
{% block title %}
|
|
||||||
Hello World Articles
|
|
||||||
{% endblock title %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
{# Par défaut une liste d'objets venant de ListView s'appelle object_list #}
|
|
||||||
{% for article in object_list %}
|
|
||||||
<h2>{{ article.title }}</h2>
|
|
||||||
<p>{{ article.content }}</p>
|
|
||||||
{% endfor %}
|
|
||||||
{% endblock content %}
|
|
||||||
|
|
||||||
Maintenant que toute la logique de récupération et d'affichage est terminée, la page est accessible à l'adresse https://localhost:8000/hello/articles.
|
|
||||||
|
|
||||||
Mais, j'ai une erreur ! Il se passe quoi ?! Et bien c'est simple, nous avons créé le modèle mais il n'existe pas dans la base de données. Il est dans un premier temps important de créer un fichier de migrations qui contient des instructions pour la génération de celles-ci. Ce sont les fichiers qui sont enregistrés dans le dossier migration. Pour les générer à partir des classes de modèles qu'on vient de manipuler il suffit d'une seule commande.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
./manage.py makemigrations
|
|
||||||
|
|
||||||
Un fichier *hello/migrations/0001_initial.py* se crée automatiquement, vous pouvez même aller le voir.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Il est tout à fait possible de modifier à la main les fichiers de migrations. C'est très intéressant si par exemple il faut appliquer des modifications sur les données d'un modèle existant après cette migration mais c'est bien au delà du sujet de ce tutoriel. Référez vous à la documentation pour ce genre de choses.
|
|
||||||
|
|
||||||
J'ai toujours une erreur ! Mais oui, c'est pas fini, faut pas aller trop vite. Maintenant il faut appliquer les modifications à la base de données.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
./manage.py migrate
|
|
||||||
|
|
||||||
Et voilà, là il n'y a plus d'erreur. Tout fonctionne et on a une superbe page vide puisque aucun contenu pour cette table n'est dans la base. Nous allons en rajouter. Pour cela nous allons utiliser le fichier *core/management/commands/populate.py* qui contient la commande qui initialise les données de la base de données de test. C'est un fichier très important qu'on viendra à modifier assez souvent. Nous allons y ajouter quelques articles.
|
|
||||||
|
|
||||||
.. code-block:: python
|
|
||||||
|
|
||||||
# core/management/commands/populate.py
|
|
||||||
from hello.models import Article
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
class Command(BaseCommand):
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
def handle(self, *args, **options):
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
# les deux syntaxes ci-dessous sont correctes et donnent le même résultat
|
|
||||||
Article(title="First hello", content="Bonjour tout le monde").save()
|
|
||||||
Article.objects.create(title="Tutorial", content="C'était un super tutoriel")
|
|
||||||
|
|
||||||
|
|
||||||
On regénère enfin les données de test en lançant la commande que l'on vient de modifier.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
./manage.py setup
|
|
||||||
|
|
||||||
On revient sur https://localhost:8000/hello/articles et cette fois-ci nos deux articles apparaissent correctement.
|
|
||||||
@ -1,242 +0,0 @@
|
|||||||
Installer le projet
|
|
||||||
===================
|
|
||||||
|
|
||||||
Dépendances du système
|
|
||||||
----------------------
|
|
||||||
|
|
||||||
Certaines dépendances sont nécessaires niveau système :
|
|
||||||
|
|
||||||
* poetry
|
|
||||||
* libssl
|
|
||||||
* libjpeg
|
|
||||||
* zlib1g-dev
|
|
||||||
* python
|
|
||||||
* gettext
|
|
||||||
* graphviz
|
|
||||||
|
|
||||||
Sur Windows
|
|
||||||
~~~~~~~~~~~
|
|
||||||
|
|
||||||
Chers utilisateurs de Windows, quel que soit votre amour de Windows,
|
|
||||||
de Bill Gates et des bloatwares, je suis désolé
|
|
||||||
de vous annoncer que, certaines dépendances étant uniquement disponibles sur des sytèmes UNIX,
|
|
||||||
il n'est pas possible développer le site sur Windows.
|
|
||||||
|
|
||||||
Heureusement, il existe une alternative qui ne requiert pas de désinstaller votre
|
|
||||||
OS ni de mettre un dual boot sur votre ordinateur : :code:`WSL`.
|
|
||||||
|
|
||||||
- **Prérequis:** vous devez être sur Windows 10 version 2004 ou ultérieure (build 19041 & versions ultérieures) ou Windows 11.
|
|
||||||
- **Plus d'info:** `docs.microsoft.com <https://docs.microsoft.com/fr-fr/windows/wsl/install>`_
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
# dans un shell Windows
|
|
||||||
wsl --install
|
|
||||||
|
|
||||||
# afficher la liste des distribution disponible avec WSL
|
|
||||||
wsl -l -o
|
|
||||||
|
|
||||||
# installer WSL avec une distro (ubuntu conseillé)
|
|
||||||
wsl --install -d <nom_distro>
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si vous rencontrez le code d'erreur ``0x80370102``, regardez les réponses de ce `post <https://askubuntu.com/questions/1264102/wsl-2-wont-run-ubuntu-error-0x80370102>`_.
|
|
||||||
|
|
||||||
Une fois :code:`WSL` installé, mettez à jour votre distro & installez les dépendances **(voir la partie installation sous Ubuntu)**.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Comme `git` ne fonctionne pas de la même manière entre Windows & Unix, il est nécessaire de cloner le repository depuis Windows.
|
|
||||||
(cf: `stackoverflow.com <https://stackoverflow.com/questions/62245016/how-to-git-clone-in-wsl>`_)
|
|
||||||
|
|
||||||
Pour accéder au contenu d'un répertoire externe à :code:`WSL`, il suffit simplement d'utiliser la commande suivante:
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
# oui c'est beau, simple et efficace
|
|
||||||
cd /mnt/<la_lettre_du_disque>/vos/fichiers/comme/dhab
|
|
||||||
|
|
||||||
Une fois l'installation des dépendances terminée (juste en dessous), il vous suffira, pour commencer à dev, d'ouvrir votre plus bel IDE et d'avoir 2 consoles:
|
|
||||||
1 console :code:`WSL` pour lancer le projet & 1 console pour utiliser :code:`git`
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
A ce stade, si vous avez réussi votre installation de :code:`WSL` ou bien qu'il
|
|
||||||
était déjà installé, vous pouvez effectuer la mise en place du projet en suivant
|
|
||||||
les instructions pour Ubuntu.
|
|
||||||
|
|
||||||
|
|
||||||
Sur Ubuntu
|
|
||||||
~~~~~~~~~~
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
# Sait-on jamais
|
|
||||||
sudo apt update
|
|
||||||
|
|
||||||
sudo apt install python-is-python3 # Permet d'utiliser python au lieu de python3, c'est optionnel
|
|
||||||
|
|
||||||
sudo apt install build-essentials libssl-dev libjpeg-dev zlib1g-dev python-dev \
|
|
||||||
libffi-dev python-dev-is-python3 libgraphviz-dev pkg-config \
|
|
||||||
gettext git pipx
|
|
||||||
|
|
||||||
pipx install poetry
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si vous avez réussi à exécuter les instructions ci-dessus sans trop de problèmes,
|
|
||||||
vous pouvez passer à la partie :ref:`Finalise installation`
|
|
||||||
|
|
||||||
Sur MacOS
|
|
||||||
~~~~~~~~~
|
|
||||||
|
|
||||||
Pour installer les dépendances, il est fortement recommandé d'installer le gestionnaire de paquets `homebrew <https://brew.sh/index_fr>`_.
|
|
||||||
Il est également nécessaire d'avoir installé xcode
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
echo 'export PATH="$(brew --prefix graphviz)/bin:$PATH"' >> ~/.zshrc
|
|
||||||
echo 'export CFLAGS="-isysroot /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk -I $(brew --prefix graphviz)/include"' >> ~/.zshrc
|
|
||||||
echo 'export LDFLAGS="-L /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/lib -L $(brew --prefix graphviz)/lib"' >> ~/.zshrc
|
|
||||||
|
|
||||||
brew install git python graphviz pipx
|
|
||||||
pipx install poetry
|
|
||||||
|
|
||||||
# Pour bien configurer gettext
|
|
||||||
brew link gettext # (suivez bien les instructions supplémentaires affichées)
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si vous rencontrez des erreurs lors de votre configuration, n'hésitez pas à vérifier l'état de votre installation homebrew avec :code:`brew doctor`
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si vous avez réussi à exécuter les instructions ci-dessus sans trop de problèmes,
|
|
||||||
vous pouvez passer à la partie :ref:`Finalise installation`
|
|
||||||
|
|
||||||
.. _Finalise installation:
|
|
||||||
|
|
||||||
Finaliser l'installation
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
# Les commandes git doivent se faire depuis le terminal de Windows si on utilise WSL !
|
|
||||||
git clone https://github.com/ae-utbm/sith3.git
|
|
||||||
cd sith3
|
|
||||||
|
|
||||||
# Création de l'environnement et installation des dépendances
|
|
||||||
poetry install
|
|
||||||
|
|
||||||
# Activation de l'environnement virtuel
|
|
||||||
poetry shell
|
|
||||||
|
|
||||||
# Installe xapian
|
|
||||||
python manage.py install_xapian
|
|
||||||
|
|
||||||
# Prépare la base de données
|
|
||||||
python manage.py setup
|
|
||||||
|
|
||||||
# Installe les traductions
|
|
||||||
python manage.py compilemessages
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Pour éviter d'avoir à utiliser la commande poetry shell systématiquement, il est possible de consulter :ref:`direnv`.
|
|
||||||
|
|
||||||
Configuration pour le développement
|
|
||||||
-----------------------------------
|
|
||||||
|
|
||||||
Lorsqu'on souhaite développer pour le site, il est nécessaire de passer le logiciel en mode debug dans les settings_custom. Il est aussi conseillé de définir l'URL du site sur localhost. Voici un script rapide pour le faire.
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
echo "DEBUG=True" > sith/settings_custom.py
|
|
||||||
echo 'SITH_URL = "localhost:8000"' >> sith/settings_custom.py
|
|
||||||
|
|
||||||
Démarrer le serveur de développement
|
|
||||||
------------------------------------
|
|
||||||
|
|
||||||
Il faut toujours avoir préalablement activé l'environnement virtuel comme fait plus haut et se placer à la racine du projet. Il suffit ensuite d'utiliser cette commande :
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
python manage.py runserver
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Le serveur est alors accessible à l'adresse http://localhost:8000 ou bien http://127.0.0.1:8000/.
|
|
||||||
|
|
||||||
Générer la documentation
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
La documentation est automatiquement mise en ligne sur readthedocs à chaque envoi de code sur GitHub.
|
|
||||||
Pour l'utiliser en local ou globalement pour la modifier, il existe une commande du site qui génère la documentation et lance un serveur la rendant accessible à l'adresse http://localhost:8080.
|
|
||||||
Cette commande génère la documentation à chacune de ses modifications, inutile de relancer le serveur à chaque fois.
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Les dépendances pour la documentation sont optionnelles.
|
|
||||||
Avant de commencer à travailler sur la doc, il faut donc les installer
|
|
||||||
avec la commande :code:`poetry install --with docs`
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
python manage.py documentation
|
|
||||||
|
|
||||||
# Il est possible de spécifier un port et une adresse d'écoute différente
|
|
||||||
python manage.py documentation adresse:port
|
|
||||||
|
|
||||||
Lancer les tests
|
|
||||||
----------------
|
|
||||||
|
|
||||||
Pour lancer les tests il suffit d'utiliser la commande intégrée à django.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
# Lancer tous les tests
|
|
||||||
pytest
|
|
||||||
|
|
||||||
# Lancer les tests de l'application core
|
|
||||||
pytest core
|
|
||||||
|
|
||||||
# Lancer les tests de la classe UserRegistrationTest de core
|
|
||||||
pytest core.tests.UserRegistrationTest
|
|
||||||
|
|
||||||
# Lancer une méthode en particulier de cette même classe
|
|
||||||
pytest core.tests.UserRegistrationTest.test_register_user_form_ok
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Certains tests sont un peu longs à tourner.
|
|
||||||
Pour ne faire tourner que les tests les plus rapides,
|
|
||||||
vous pouvez exécutez pytest ainsi :
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
pytest -m "not slow"
|
|
||||||
|
|
||||||
# vous pouvez toujours faire comme au-dessus
|
|
||||||
pytest core -m "not slow"
|
|
||||||
|
|
||||||
A l'inverse, vous pouvez ne faire tourner que les tests
|
|
||||||
lents en remplaçant `-m "not slow"` par `-m slow`.
|
|
||||||
|
|
||||||
De cette manière, votre processus de développement
|
|
||||||
devrait être un peu plus fluide.
|
|
||||||
Cependant, n'oubliez pas de bien faire tourner
|
|
||||||
tous les tests avant de push un commit.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Vérifier les dépendances Javascript
|
|
||||||
-----------------------------------
|
|
||||||
|
|
||||||
Une commande a été écrite pour vérifier les éventuelles mises à jour à faire sur les librairies Javascript utilisées.
|
|
||||||
N'oubliez pas de mettre à jour à la fois le fichier de la librairie, mais également sa version dans `sith/settings.py`.
|
|
||||||
|
|
||||||
.. code-block:: bash
|
|
||||||
|
|
||||||
# Vérifier les mises à jour
|
|
||||||
python manage.py check_front
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.9 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.8 KiB |
@ -1,157 +0,0 @@
|
|||||||
La structure du projet
|
|
||||||
======================
|
|
||||||
|
|
||||||
Le principe MVT
|
|
||||||
---------------
|
|
||||||
|
|
||||||
Django est un framework suivant le modèle MVT (Model-View-Template) aussi appelé MTV (Model-Template-View).
|
|
||||||
|
|
||||||
.. figure:: mvt_circle.svg
|
|
||||||
:alt: Diagramme MVT
|
|
||||||
:align: center
|
|
||||||
|
|
||||||
Diagramme MVT
|
|
||||||
|
|
||||||
On peut ainsi voir que la Vue gère la logique d'application, le modèle gère la structure de la base de données et communique avec elle et la vue effectue la logique de l'application. Décris comme ça, cela fait penser au modèle MVC (Model-View-Controller) mais évitons de nous complexifier les choses. Disons que c'est assez proche mais qu'il y a quelques différences (déjà au niveau du nommage).
|
|
||||||
|
|
||||||
On peut également représenter le tout sous une autre forme, plus simple à comprendre et visualiser en aplatissant le diagramme. Cela représente mieux ce qui se passe.
|
|
||||||
|
|
||||||
.. figure:: mvt_flat.svg
|
|
||||||
:alt: Diagramme MVT aplati
|
|
||||||
:align: center
|
|
||||||
|
|
||||||
Diagramme MVT aplati
|
|
||||||
|
|
||||||
Cette représentation permet de se représenter les interactions sous formes de couches. Avec ça en tête, ce sera plus simple d’appréhender la manière dont est découpé le projet.
|
|
||||||
|
|
||||||
Le découpage en applications
|
|
||||||
----------------------------
|
|
||||||
|
|
||||||
| /projet
|
|
||||||
| **sith/**
|
|
||||||
| Application principale du projet.
|
|
||||||
| **accounting/**
|
|
||||||
| Ajoute un système de comptabilité.
|
|
||||||
| **api/**
|
|
||||||
| Application où mettre les endpoints publiques d'API.
|
|
||||||
| **club/**
|
|
||||||
| Contient les modèles liés aux clubs et assos et ajoute leur gestion.
|
|
||||||
| **com/**
|
|
||||||
| Fournis des outils de communications aux clubs (weekmail, affiches…).
|
|
||||||
| **core/**
|
|
||||||
| Application la plus importante. Contient les principales surcouches
|
|
||||||
| liées au projet comme la gestion des droits et les templates de base.
|
|
||||||
| **counter/**
|
|
||||||
| Ajoute des comptoirs de vente pour les clubs et gère les ventes sur les lieux de vie.
|
|
||||||
| **data/**
|
|
||||||
| Contient les fichiers statiques ajoutés par les utilisateurs.
|
|
||||||
| N'est pas suivi par Git.
|
|
||||||
| **doc/**
|
|
||||||
| Contient la documentation du projet.
|
|
||||||
| **eboutic/**
|
|
||||||
| Ajoute le comptoir de vente en ligne. Permet d'acheter en carte bancaire.
|
|
||||||
| **election/**
|
|
||||||
| Ajoute un système d'élection permettant d'élire les représentants étudiants.
|
|
||||||
| **forum/**
|
|
||||||
| Ajoute un forum de discussion.
|
|
||||||
| **launderette/**
|
|
||||||
| Permet la gestion des laveries.
|
|
||||||
| **locale/**
|
|
||||||
| Contient les fichiers de traduction.
|
|
||||||
| **matmat/**
|
|
||||||
| Système de recherche de membres.
|
|
||||||
| **pedagogy/**
|
|
||||||
| Contient le guide des UVs.
|
|
||||||
| **rootplace/**
|
|
||||||
| Ajoute des outils destinés aux administrateurs.
|
|
||||||
| **static/**
|
|
||||||
| Contient l'ensemble des fichiers statiques ajoutés par les développeurs.
|
|
||||||
| Ce dossier est généré par le framework, il est surtout utile en production ;
|
|
||||||
| évitez d'y toucher pendant le développement.
|
|
||||||
| Ce dossier n'est pas suivi par Git.
|
|
||||||
| **stock/**
|
|
||||||
| Système de gestion des stocks.
|
|
||||||
| **subscription/**
|
|
||||||
| Ajoute la gestion des cotisations des membres.
|
|
||||||
| **trombi/**
|
|
||||||
| Permet la génération du trombinoscope des élèves en fin de cursus.
|
|
||||||
| **.coveragec**
|
|
||||||
| Configure l'outil permettant de calculer la couverture des tests sur le projet.
|
|
||||||
| **.gitignore**
|
|
||||||
| Permet de définir quels fichiers sont suivis ou non par Git.
|
|
||||||
| **.github/**
|
|
||||||
| Contient les fichiers de configuration des actions github.
|
|
||||||
| **.readthedocs.yml**
|
|
||||||
| Permet de configurer la génération de documentation sur Readthedocs.
|
|
||||||
| **.db.sqlite3**
|
|
||||||
| Base de données de développement par défaut. Est automatiquement généré
|
|
||||||
| lors de la configuration du projet en local. N'est pas suivie par Git.
|
|
||||||
| **LICENSE**
|
|
||||||
| Licence du projet.
|
|
||||||
| **LICENSE.old**
|
|
||||||
| Ancienne licence du projet.
|
|
||||||
| **manage.py**
|
|
||||||
| Permet de lancer les commandes liées au framework Django.
|
|
||||||
| **migrate.py**
|
|
||||||
| Contiens des scripts de migration à exécuter pour importer les données de l'ancien site.
|
|
||||||
| **README.md**
|
|
||||||
| Fichier de README. À lire pour avoir des informations sur le projet.
|
|
||||||
| **pyproject.toml**
|
|
||||||
| Contient les dépendances Python du projet.
|
|
||||||
|
|
||||||
|
|
||||||
L'application principale
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
| /sith
|
|
||||||
| **__init__.py**
|
|
||||||
| Permet de définir le dossier comme un package Python.
|
|
||||||
| Ce fichier est vide.
|
|
||||||
| **settings.py**
|
|
||||||
| Contient les paramètres par défaut du projet.
|
|
||||||
| Ce fichier est versionné et fait partie intégrant de celui-ci.
|
|
||||||
| Notez que les informations sensibles qui se trouvent dans ce fichier
|
|
||||||
| ne sont pas celles utilisées en production.
|
|
||||||
| Ce sont des paramètres factices préremplies pour faciliter la mise en place
|
|
||||||
| du projet qui sont surchargés en production par les vrais paramètres.
|
|
||||||
| **settings_custom.py**
|
|
||||||
| Contient les paramètres spécifiques à l'installation courante.
|
|
||||||
| Ce fichier n'est pas versionné et surcharge les paramètres par défaut.
|
|
||||||
| **urls.py**
|
|
||||||
| Contient les routes d'URLs racines du projet.
|
|
||||||
| On y inclut les autres fichiers d'URLs et leur namespace.
|
|
||||||
| **toolbar_debug.py**
|
|
||||||
| Contient la configuration de la barre de debug à gauche à destination
|
|
||||||
| du site de développement.
|
|
||||||
| **et_keys/**
|
|
||||||
| Contiens la clef publique du système de paiement E-Transactions.
|
|
||||||
|
|
||||||
.. warning::
|
|
||||||
|
|
||||||
Ne pas mettre de configuration personnelle ni aucun mot de passe dans **settings.py**. Si il y a besoin de ce genre de chose, il faut le mettre dans **settings_custom.py** qui lui n'est pas versionné.
|
|
||||||
|
|
||||||
Le contenu d'une application
|
|
||||||
----------------------------
|
|
||||||
|
|
||||||
| /app1
|
|
||||||
| **__init__.py**
|
|
||||||
| Permet de définir le dossier comme un package Python.
|
|
||||||
| **models.py**
|
|
||||||
| C'est là que les modèles sont définis. Ces classes définissent
|
|
||||||
| les tables dans la base de données.
|
|
||||||
| **views.py**
|
|
||||||
| C'est là où les vues sont définies.
|
|
||||||
| **admin.py**
|
|
||||||
| C'est là que l'on déclare quels modèles doivent apparaître
|
|
||||||
| dans l'interface du module d'administration de Django.
|
|
||||||
| **tests.py**
|
|
||||||
| Ce fichier contient les tests fonctionnels, unitaires
|
|
||||||
| et d'intégrations qui sont lancés par la pipeline.
|
|
||||||
| **urls.py**
|
|
||||||
| On y définit les URLs de l'application et on les lie aux vues.
|
|
||||||
| **migrations/**
|
|
||||||
| Ce dossier sert à stocker les fichiers de migration de la base
|
|
||||||
| de données générés par la commande *makemigrations*.
|
|
||||||
| **templates/**
|
|
||||||
| Ce dossier-ci contient généralement des sous-dossiers et sert
|
|
||||||
| à accueillir les templates. Les sous dossiers servent de namespace.
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
.. _translations:
|
|
||||||
|
|
||||||
Ajouter une traduction
|
|
||||||
======================
|
|
||||||
|
|
||||||
Le code du site est entièrement écrit en anglais, le texte affiché aux utilisateurs l'est également. La traduction en français se fait ultérieurement avec un fichier de traduction. Voici un petit guide rapide pour apprendre à s'en servir.
|
|
||||||
|
|
||||||
Dans le code du logiciel
|
|
||||||
------------------------
|
|
||||||
|
|
||||||
Imaginons que nous souhaitons afficher "Hello" et le traduire en français. Voici comment signaler que ce mot doit être traduit.
|
|
||||||
|
|
||||||
Si le mot est dans le code Python :
|
|
||||||
|
|
||||||
.. sourcecode:: python
|
|
||||||
|
|
||||||
from django.utils.translation import gettext_lazy as _
|
|
||||||
|
|
||||||
# ...
|
|
||||||
|
|
||||||
help_text=_("Hello")
|
|
||||||
|
|
||||||
# ...
|
|
||||||
|
|
||||||
Si le mot apparaît dans le template Jinja :
|
|
||||||
|
|
||||||
.. sourcecode:: html+jinja
|
|
||||||
|
|
||||||
{# ... #}
|
|
||||||
|
|
||||||
{% trans %}Hello{% endtrans %}
|
|
||||||
|
|
||||||
{# ... #}
|
|
||||||
|
|
||||||
Générer le fichier django.po
|
|
||||||
----------------------------
|
|
||||||
|
|
||||||
La traduction se fait en trois étapes. Il faut d'abord générer un fichier de traductions, l'éditer et enfin le compiler au format binaire pour qu'il soit lu par le serveur.
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
./manage.py makemessages --locale=fr --ignore "env/*" -e py,jinja
|
|
||||||
|
|
||||||
Éditer le fichier django.po
|
|
||||||
---------------------------
|
|
||||||
|
|
||||||
.. role:: python(code)
|
|
||||||
:language: python
|
|
||||||
|
|
||||||
.. sourcecode:: python
|
|
||||||
|
|
||||||
# locale/fr/LC_MESSAGES/django.po
|
|
||||||
|
|
||||||
# ...
|
|
||||||
msgid "Hello"
|
|
||||||
msgstr "" # Ligne à modifier
|
|
||||||
|
|
||||||
# ...
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Si les commentaires suivants apparaissent, pensez à les supprimer. Ils peuvent gêner votre traduction.
|
|
||||||
|
|
||||||
::
|
|
||||||
|
|
||||||
#, fuzzy
|
|
||||||
#| msgid "Bonjour"
|
|
||||||
|
|
||||||
|
|
||||||
Générer le fichier django.mo
|
|
||||||
----------------------------
|
|
||||||
|
|
||||||
Il s'agit de la dernière étape. Un fichier binaire est généré à partir du fichier django.mo.
|
|
||||||
|
|
||||||
.. sourcecode:: bash
|
|
||||||
|
|
||||||
./manage.py compilemessages
|
|
||||||
|
|
||||||
.. note::
|
|
||||||
|
|
||||||
Pensez à redémarrer le serveur si les traductions ne s'affichent pas
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user