adHoc - Service de téléchargements

→ Installer un service de téléchargements dans adHoc

C'est le type de service qui fonctionne sur ce site : Téléchargements.

Cependant, une version plus récente, mieux intégrée à adHoc, et plus simple d'utilisation est proposée ici : Download (service de téléchargements). Vous pouvez lire ce présent tutoriel, télécharger le service et l'utiliser, bien sûr, mais je vous conseille d'employer la version la plus récente...

Il n'y a pas, actuellement, pour adHoc, de module de téléchargements. J'espère que cela viendra... si un développeur s'y penche... Mais, en attendant, voilà ce que j'ai adapté à partir d'un script, dont je remercie l'auteur, trouvé ici : http://sdz.tdct.org/sdz/compteur-de-telechargements.html

Ce service vous permet d'intégrer une page (download.php) dans adHoc, qui listera vos téléchargements de fichiers zip par catégorie, comptabilisera de manière dynamique, le nombre de chacun de vos téléchargements, et, comme il est présenté dans des textes accordéon, vous permettra de créer des liens directs dans vos différentes pages vers le soufflet de la catégorie souhaitée ouverte.

NB : Un seul type de fichiers est possible dans le script actuel : les archives .zip, il est possible de modifier pour .pdf, mais il faudrait modifier le script pour permettre les deux... cela viendra peut-être...

Il vous faudra mettre "un peu" les doigts dans le cambouis... mais rien d'insurmontable !

→ La structure

Voilà un exemple d'arborescence des dossiers et fichiers du service de téléchargements. Vous pouvez télécharger cette archive zip : service-telechargement.zip

data
download
→ → stat
→ → → index.php
→ → categorie-1.inc
→ → categorie-2.inc
→ → categorie-3.inc
→ → categorie-4.inc
→ → index.php
download.php

NB : Attention, ce zip ne contient pas le fichier de style décrit ci-dessous en bas de cette page. Il est cependant aisé de le récupérer et de le placer à votre convenance. Me contacter en cas de nécessité.

A la racine de votre site : le fichier download.php et le dossier data d'adHoc qui va accueillir le dossier download contenant les fichiers .inc de vos catégories et le dossier stat qui contiendra ensuite les fichiers .txt des compteurs de vos téléchargements.

Ces fichiers .txt seront créés par le script : il vous suffira de rafraîchir l'affichage de la page pour les créer et afficher téléchargé 0 fois. Ensuite ce sont les clics sur les liens des fichiers qui incrémenteront les compteurs.

Pour sécuriser l'accès à ces dossiers, les dossiers download et stat contiennent chacun un fichier index.php (ne pas les ôter). Pour les besoins de ce tutoriel, les variables pour les catégories ci-dessus seront respectivement categ-1 categ-2 categ-3 categ-4.

Ainsi, lorsque vous prévoirez un lien vers votre page de téléchargements ou votre archive, vous pourrez le présenter de trois manières :

→ vers la page par défaut (qui peut être présentée avec tous les soufflets des catégories fermés)


<p>Service de <a href="download.php">Téléchargements</a></p>

→ avec une variable de catégorie passée dans l'URL pour permettre l'ouverture du soufflet correspondant.


<p>Vous pouvez télécharger ce fichier <a href="download.php?cat=categ-1">mon-fichier.zip</a>.</p>

→ avec une variable de fichier passée dans l'URL pour permettre le téléchargement direct de l'archive (son compteur s'incrémentera).


<p>Vous pouvez télécharger ce fichier <a href="download.php?file=mon-fichier">mon-fichier.zip</a>.</p>

→ Le fichier de style accordéon

Le style, avec quelques règles supplémentaires, est directement issu de ce tutoriel : Autres astuces en CSS - Des textes en accordéon. Il est sans doute important de vous y référer, ne serait-ce que pour en connaître l'origine, même s'il est évidemment possible d'adapter ce service sans textes accordéon...

Voir en bas de cette page, le code de style du fichier CSS_textes_accordeon-download.css, que vous pouvez copier et adapter comme vous l'entendez, placé ici dans le dossier skin/css. Il est évidemment possible de le placer ailleurs en adaptant son appel dans la page download.php.

→ Le fichier download.php

Ce fichier sera à adapter à votre configuration et à placer à la racine de votre site.

Ci-dessous le code de ce fichier avec le plus de commentaires possibles

Voilà les seules informations de ce fichier que vous aurez à modifier :

→ Quatre variables, dont, a priori, vous n'aurez qu'à adapter les troisième et quatrième : le type d'accordéon souhaité (radio ou checkbox) et le nom de la page qui s'affiche dans adHoc.

$folder_stat = 'data/download/stat/' ; // répertoire dans lequel seront stockées les statistiques

$folder_archive = 'files/' ; // répertoire des téléchargements

$typeaccordeon = 'radio' ; // 'radio' ou 'checkbox' suivant le type d'accordéon souhaité

$topmess = 'Téléchargements' ; // nom de la page

→ Une variable, qu'il faut renseigner : ce sera le soufflet de la catégorie ouvert, par défaut. On peut laisser vide et tous les soufflets seront fermés. Vous déciderez des termes à employer pour les catégories (voir plus haut).

$categorie = 'categ-1';

→ Ensuite, la déclaration du fichier de style utilisé, ici : CSS_textes_accordeon-download.css.


 <link charset="utf-8" href="skin/css/CSS_textes_accordeon-download.css" rel="stylesheet" />

→ Et enfin les inclusions des fichiers .inc des catégories, il est possible d'en supprimer, d'en ajouter, de les inclure dans un ordre différent, ils sont tous structurés sur le même principe.

include ("data/download/categorie-1.inc"); //inclusion fichier catégorie

include ("data/download/categorie-2.inc"); //inclusion fichier catégorie

include ("data/download/categorie-3.inc"); //inclusion fichier catégorie

include ("data/download/categorie-4.inc"); //inclusion fichier catégorie

→ Un fichier catégorie : categorie-1.inc

Ce fichier (ainsi que tous les fichiers de catégorie) sera à adapter à votre configuration et à placer dans le dossier data/download votre site.

Ci-dessous le code de ce fichier-exemple avec le plus de commentaires possibles

Voilà les informations de ce type de fichier que vous aurez à modifier :

→ En commentaire, pour aider à s'y retrouver : le nom de la catégorie.

// categorie-1

→ Une variable, qu'il faut renseigner pour le test de la catégorie : ce sera le soufflet de la catégorie qui sera ouvert si cette variable est passée dans l'URL.

if ( $categorie == 'categ-1' ) // test catégorie pour checked

→ Un identifiant différent pour chaque bloc (catégorie) ici : ac-1 que vous pouvez reporter dans tout le fichier pour aider, mais surtout là :

id="ac-1" et label for="ac-1"

→ Pour chacun des fichiers à télécharger de cette catégorie, les deux variables correspondant, d'une part au nom du fichier (sans extension et sans espace ou caractère "exotique") et d'autre part au commentaire associé à ce fichier qui peut contenir ou non un lien (j'en ai mis deux ci-dessus pour montrer la façon dont ces liens peuvent être placés).

$name = "cat1fichier3" ; // nom du fichier (et de l’archive)

$comment = "Un commentaire pour aider à choisir ce fichier cat1fichier3" ; // commentaire pour ce téléchargement

→ Vous pouvez ajouter ou supprimer autant de "pavé de code" correspondant aux fichiers à télécharger qui sont tous écrits de la même manière :

$name =......

.....................................

[p class="comment"] ' . $comment . ' [/p];

→ Le code du fichier CSS_textes_accordeon-download.css.
Retour en haut de la page


/*STYLE "TEXTES ACCORDEON" POUR PAGE "DOWNLOAD"*/
/* Issu de https://tympanus.net/codrops/2012/02/21/accordion-with-css3/ par Mary-Lou */
/* et de https://adhoc.71site.fr/pages/060-adhoc-service-de-telechargements-fr.php par JeanDenis */
.ac-container { /*attributs du conteneur*/
	width: 99%; /*largeur du conteneur*/
	margin: 10px auto 30px; /*marges extérieures H DG B*/
	text-align: left; /*alignement texte gauche*/
}
.ac-container label,
.ac-container input[type="checkbox"] + label { /*attributs des titres*/
	font-family: Open sans, sans-serif; /*police*/
	font-size: 19px; /*taille police*/
	margin:0 auto 5px; /*marges extérieures H DG B à adapter*/
	line-height: 28px; /*hauteur ligne*/
	padding: 5px 20px; /*marges intérieures*/
	position: relative;
	display: block;
	height: auto; /*hauteur*/
	min-height: 45px;
	cursor: pointer;
	color: #ffffff; /*couleur texte*/
	background: linear-gradient(to right, rgba( 0, 0, 0, .8), rgba( 75, 75, 75, .8)); /*couleur fond*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}
.ac-container label:hover,
.ac-container input[type="checkbox"] + label:hover
{
	background: rgba( 75, 75, 75, 1); /*couleur fond au survol*/
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover { /*attributs des titres sélectionnés et au survol*/
	background: rgba( 0, 0, 0, 1); /*couleur fond*/
	color: #d6af84; /*couleur texte*/
	font-weight:bold; /*gras du texte*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.3); /*ombre portée boite titre*/
}
.ac-container label:before { /*pseudo-élément pour titre*/
	font-family:"fontawesome"; /*police*/
	content: "\f103"; /*caractère*/
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container input[type="checkbox"]:checked + label:before { /*pseudo-élément pour titre checkbox sélectionné*/
	font-family:"fontawesome"; /*police de caractère*/
	content: "\f102"; /*caractère*/
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container input[type="radio"]:checked + label:before { /*pseudo-élément pour titre radio sélectionné*/
	font-family:"fontawesome"; /*police de caractère*/
	content: "\f105"; /*caractère*/
	padding-right:15px; /*marge intérieure droite*/
}
.ac-container input {
	display: none;
}
.ac-container article { /*attributs des articles masqués*/
	background: rgba(240,240,240,0.9); /*couleur fond*/
	margin-top: -5px; /*marge extérieure haute*/
	height: 0px; /*hauteur = 0 -> invisible*/
	transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
	transform-origin:0 0; /*origine transformation : ici haut*/
	overflow: hidden;
	position: relative;
}
.ac-container article p { /*attributs des paragraphes*/
	font-style: normal; /*à ajuster ou supprimer*/
	color: #111; /*couleur texte*/
	font-size: 14px; /*taille police*/
	line-height: 23px; /*hauteur ligne*/
	margin:0; /*marges extérieures*/
	padding: 5px 20px; /*marges intérieures*/
}
.ac-container input:checked ~ article { /*attributs des articles à la sélection*/
	transition:all 0.5s ease; /*transition à la sélection -temps, nature-*/
}
.ac-container input:checked ~ article.ac { /*attributs des articles à la sélection*/
	height: auto; /*hauteur*/
	transform:scale3d(1,1,1); /*échelle = 1 -> visible*/
}
.ac-container article h4 { /*titre h4*/
	margin-left:15px; /*marge extérieure gauche*/
	font-size: 17px; /*taille police*/
	padding-bottom: 2px; /*marge intérieure basse*/
	color: #669EB9; /*couleur texte*/
}
.ac-container article h4 a:hover { /*lien au survol*/
	color:#D54500; /*couleur texte*/
}
.ac-container article h4 a::after { /*pseudo-élément icone "caractère" du téléchargement*/ 
	font-family:"fontawesome"; /*police de caractère*/
	content:"\f1c6"; /*caractère*/
	font-size:32px; /*taille police*/
	padding-right:5px; /*marge intérieure droite*/
}
.sep { /*ligne de séparation*/
	border-top: 1px dashed rgba(0,0,0, 0.5); /*bordure haute*/
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3); /*bordure basse*/
	margin: 4px 1% !important; /*marges extérieures*/
	clear:both;
}
.comment { /*commentaire*/
	float:left; /*à gauche*/
	width:94%; /*largeur*/
	background:rgba(255,255,255,0.3); /*couleur fond*/
	margin:5px 3% !important; /*marges extérieures*/
	border-radius:5px; /*arrondis*/
	border:1px dotted rgba(24,34,84, 0.6); /*bordure*/
}
p.comment {color:#182254 !important;padding-bottom:10px !important;}

.comment a:hover {color:#D54500; /*couleur lien au survol*/}
.comment::before { /*pseudo-élément icones "caractères" du commentaire*/
	font-family:"fontawesome"; /*police de caractère*/
	content:"\f054""\f054"; /*caractères*/
	color:#669EB9; /*couleur texte*/
	margin-left:-15px; /*marge extérieure droite*/
}
@media screen and (max-width: 520px), screen and (max-device-width: 520px) { /* inférieur à 520px de largeur (MOBILE) */
.ac-container article h4 { /*titre h4*/
	font-size: 18px; /*taille police*/
}
.ac-container article h4 a::after { /*pseudo-élément icone "caractère" du téléchargement*/ 
	font-size:36px; /*taille police*/
}
}

Notez que dans ce style, une police de caractère (Font Awesome : https://fontawesome.com/ ) est présente pour les "chevrons" des titres, pour l'icône des téléchargements et pour les chevrons des commentaires. Si vous souhaitez la déclarer pour votre site, veuillez poster sur le forum, afin que je vous en indique la procédure. Mais il est possible d'utiliser plus simplement des caractères "standards". Pour cela utilisez ces parties de style en remplacement (en utilisant des caractères qui vous conviennent) :


.ac-container label:before{ /*pseudo-élément pour titre*/
	content: '▼'; /*caractère*/
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container input[type="checkbox"]:checked + label:before{ /*pseudo-élément pour titre checkbox sélectionné*/
	content: '▲';
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container input[type="radio"]:checked + label:before{ /*pseudo-élément pour titre radio sélectionné*/
	content: '▬';
	padding-right:10px; /*marge intérieure droite*/
}
.ac-container article h4 a::after { /*pseudo-élément icone "caractère" du téléchargement*/
	content: '⌂'; /*caractère*/
	font-size:32px; /*taille police*/
	padding-right:5px; /*marge intérieure droite*/
}
.comment::before { /*pseudo-élément icones "caractères" du commentaire*/
	content: '▬''►'; /*caractères*/
	color:#669EB9; /*couleur texte*/
	margin-left:-15px; /*marge extérieure droite*/
}

Retour en haut de la page

Me contacter sur le forum de ce site pour toute question ou aide pour mettre en place et utiliser ce service.


Index |Info | Imprimer | Permalien
Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels