Rewrite documentation with MkDocs

This commit is contained in:
thomas girod 2024-07-16 18:39:54 +02:00
parent a1296dc7af
commit 07b625d4aa
181 changed files with 3322 additions and 3361 deletions

View File

@ -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
View 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

View File

@ -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

View File

@ -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">

View File

@ -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

View File

@ -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="")

View File

@ -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()

View File

@ -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="")

View File

@ -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

View File

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

View File

@ -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;
}

View File

@ -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>

View File

@ -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);
}

View File

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

View File

@ -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 lon 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 lempreinte (à 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>

View File

@ -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);
}
}

View File

@ -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-----

View File

@ -1,6 +0,0 @@
-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCvDYKaLH2xz4goZYXZWoHo6wyM
b24A1iF7s70tB/g3XthEVS+/Wov+ZGqNTMLc0L+HZAJjcEc9h8Br5jPLR4VhaoKi
+rezDxTQweaC24ydJWFKRhyXBhm2Wfnhppgzv9EqZKOrFaTlLQHu0F+KWEd7LngP
4xcW9qjt19MfEmk0swIDAQAB
-----END PUBLIC KEY-----

View File

@ -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");
?>

View File

@ -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");
?>

View File

@ -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>

View File

@ -1,6 +0,0 @@
-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDe+hkicNP7ROHUssGNtHwiT2Ew
HFrSk/qwrcq8v5metRtTTFPE/nmzSkRnTs3GMpi57rBdxBBJW5W9cpNyGUh0jNXc
VrOSClpD5Ri2hER/GcNrxVRP7RlWOqB1C03q4QYmwjHZ+zlM4OUhCCAtSWflB4wC
Ka1g88CjFwRw/PB9kwIDAQAB
-----END PUBLIC KEY-----

View File

@ -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");
?>

View File

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

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 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

View File

@ -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;
}

Binary file not shown.

View File

@ -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)

View File

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

View File

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

View File

@ -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. Lutilisation dun logiciel de versioning est devenue quasi-indispensable pour tout développeur, même sil 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.

View File

@ -1,7 +0,0 @@
Documentation de core
=====================
.. toctree::
:maxdepth: 2
core/models.rst

View File

@ -1,4 +0,0 @@
Classes liées aux utilisateurs
==============================
.. autoclass:: core.models.User

View File

@ -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"]

View File

@ -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

View File

@ -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()

View File

@ -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`.

View File

@ -1,53 +0,0 @@
Modifier le weekmail
====================
Le site est capable de générer des mails automatiques composé de lagré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.

View File

@ -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"
#
#

View File

@ -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>`

View File

@ -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

View File

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

View File

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

View File

@ -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

View File

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

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

View File

@ -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

View File

@ -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

View File

@ -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"
]
}

View File

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

View File

@ -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

View File

@ -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 dappré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.

View File

@ -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