Merci pour votre réponse.
Cependant, je ne parviens pas à retrouver l'instance de l'élément affiché pour le passer au serveur par $_GET.
J'ai essayé cela :

echo '<div class="grid2">';
					echo '<a id="' . $id . '" onclick="counter("' . $id . '")" class="d-block mb-4" href="' . $path_img . '" data-fancybox data-caption="' . $description,'<br>',$firstname,' ',$lastname,' - ',$country . '" style="margin: 5px;"><img class="img-fluid" src="' . $path_img400 . '" alt="" /></a>';
					echo '</div>';

avec counter.js :

function counter(itemId) {
				if (window.XMLHttpRequest){
				// code for IE7+, Firefox, Chrome, Opera, Safari
            	xmlhttp=new XMLHttpRequest();
       			}
       			else {
		   		// code for IE6, IE5
            	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       			}
       			xmlhttp.onreadystatechange=function(){
       				if (xmlhttp.readyState==4 && xmlhttp.status==200){
            	}
       		}
       		xmlhttp.open("GET","counter.php?itemId="+itemId,true);
       		xmlhttp.send();
			}

qui se branche sur le serveur avec counter.php :

if (isset($_GET['itemId'])) {

    $query = "SELECT * FROM img WHERE id = '$itemId'";
    $result = mysqli_query($conn, $query);
	
    if (!empty($result)){// Si itemId est trouvé dans la table img on incrémente le compteur viewed
		$sql = "UPDATE img set viewed = (viewed + 1) WHERE id = '$itemId'";
        $result1 = mysqli_query($conn, $sql);

Mais rien ne fonctionne !

Effectivement, beaucoup plus efficace avec le clip-path (malgré la compatibilité à 96%) !

https://jsfiddle.net/MrSoul/m6tx7hc3/5/

Merci à vous deux !

niuxe a écrit :
ça m'étonnerait puisque ton code JS est faux.

Si tu peux me dire où ? Je joins une capture d'écran : tout a l'air normal.
J'ai viré le premier if ($_POST) : sans résultat (mais merci de ta remarque).
Je me demande si ce n'est pas le header qui est en cause, mais j'ai essayé plusieurs modifs sans résultat non plus...
Modifié par Titen (13 May 2021 - 12:01)

Titen a écrit :
les outils de développement du navigateur me disent que la requête s'est bien passée...

Et l'eau,

ça m'étonnerait puisque ton code JS est faux. D'ailleurs et en complément, j'ai un doute sur ton code de la checkbox. Regarde Dans un premier temps :XMLHttpRequest

Dans ton code php, je ne vois pas à quoi sert ton :

if( $_POST){
....

Modifié par niuxe (13 May 2021 - 07:34)

Bonjour,
J'ai un souci avec le duo ajax-php. Je suhaite insérer dans une base de données la valeur d'un lien cassé transmise par l'utiliisateur :

var data = 'lien-kaputt=' + document.querySelector('input[name = lien-kaputt]:checked').value;
alert (data);
var xhr = getHttpRequest();
xhr.open('POST', 'traitement.php', true);
xhr.setRequestHeader('X-Requested-With', 'xmlhttprequest');
xhr.send(data);

L'alerte me donne bien :

lien-kaputt=http:/www.unliencassé.fr/

Côté PHP :

<?php
header('application/x-www-form-urlencoded');
if( $_POST){
  if (isset( $_POST['lien-kaputt'])){
   $lienkaputt = $_POST['lien-kaputt'];
   $link= mysqli_connect("localhost", "root", "motdepasse", "nomdelabase");
   if (!$link) {
     echo "Error: Unable to connect to MySQL." . PHP_EOL;
     echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
     echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
     exit;
     }
   $sql=mysqli_query($link,"INSERT INTO liammou_torr (liamm) VALUES ('$lienkaputt')");
 }
}
?>

Et ça ne passe pas : rien n'est inséré dans la base. Pourtant les outils de développement du navigateur me disent que la requête s'est bien passée...
Merci de votre aide !
Modifié par Titen (13 May 2021 - 07:03)

merci pour les infos et le coup d'pouce

Bonjour,
Je fais appel à vous car j'ai de gros problèmes...
J'ai réécrit un header pour mon siteweb, car j'utilisais des marges négatives et que je veux inverser de places des éléments :

Mais je n'arrive pas à faire une bonne version mobile, elle est vraiment dégueulasse dans tout les sens :


C'est le déroulant qui pose problème... en plus, le background du footer est caché.
Regardez mon code :

<header>
				<div id="flex-nav">
					<div id="label-nav">
						<label for="mobile" id="deroulant-mobile"><img src="/downloads/images/deroulant.png" alt="Menu" id="deroulant"></label>
					</div>
					<div class="titre_principal">
						<h1>Nous sommes la nouvelle génération de GEEKS !</h1>
					</div>
					<div id="titre_principal_mobile">
						<h1>Nous sommes des GEEKS !</h1>
					</div>
					<nav>
						<a href="https://iconic-i-clash.com/se-connecter" class="logo-account_a"><strong><img class="logo-account" src="/downloads/images/logo_account.png" alt="Se connecter"></strong></a>
						<ul id="sous">
							<li><a href="https://iconic-i-clash.com/"><strong><b>Accueil</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/actualites"><strong><b>Actualités</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/forum"><strong><b>Forum</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/boutique"><strong><b>Boutique</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/blog"><strong><b>Blog</b></strong></a></li>
						</ul>
					</nav>
				</div>
				<div>
					<input type="checkbox" id="mobile">
					<ul id="sous2">
						<li><a href="https://iconic-i-clash.com/"><strong><b>Accueil</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/actualites"><strong><b>Actualités</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/forum"><strong><b>Forum</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/boutique"><strong><b>Boutique</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/blog"><strong><b>Blog</b></strong></a></li>
					</ul>
				</div>
			</header>

Mon css :

header{
    background: url(/exemple/separateur.png) repeat-x bottom;
}

#flex-nav
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#sous
{
    list-style-type: none;
    display: flex;
    margin-bottom: 0.5rem;
    margin-right: 0.4rem;
}
#deroulant-mobile,#mobile,.banniere_texte2,#titre_principal_mobile{
    display: none;
}

#label-nav{
    display: none;
}

nav{
    display: flex;
    flex-direction: row-reverse;
    margin-right: 0.4rem;
}
#sous2{
    display: none;
}
@media screen and (max-width: 480px){
#deroulant-mobile{
        display: block;
    }

    #titre_principal_mobile{
        display: block;
    }
#mobile:checked + #sous2{
        display: block;
    }
    .titre_principal,#sous,.banniere_texte1
    {
        display: none;
    }

    #label-nav{
        display: block;
        margin-left: 0.2rem;
    }
    nav{
        margin-right: 0.2rem;
    }
    #deroulant
    {
        max-width: 2rem;
    }
}

Comment est-ce que je peux l'améliorer ?
Le code html est raté... et ul a des problèmes lorsque je lui met met des marges, ou une taille.
Merci de votre aide

Finalement, j'ai accepté l’idée d'utiliser un formulaire; je ne vois pas comment faire autrement; JS, c'est bien pour l'asynchrone, mais pour le synchrone, ce n'est pas ça.

Node.prototype.themer=function()
{ 
(form=this.parentNode).add(input=d.createElement('input')); 
input.name='theme'; input.value=this.html(); 
form.submit();
}

<form method="post" action="?contact" class="puces">
<li>Premiers pas dans le web : introduction au langage Html (Html, Css)</li>
<li>introduction aux Cascading Style Sheets, le langage de style du web (Css, Html)</li>
<li>comprendre et écrire des fonctions JavaScript (JS, Html)</li>
</form><!-- fin method="post" -->

let lis=$('form').tax('li'); 
for(let n=0,size=lis.length; n<size; n++) lis[n].on('click',function(){ this.themer(); });
</

Bonne nuit...

Tu peut effectivement découpé un conteneur de façon simple avec clip-path:
exemple pour une forme triangulaire qui coupe en deux ton élément rectangulaire, seulement la moitié à partir du haut gauche restera visible.

clip-path: polygon(0 0, 0% 100%, 100% 0); 

Voici un outil en ligne pour t'aider a créer des formes.

https://bennettfeely.com/clippy/
Modifié par gcyrillus (12 May 2021 - 21:07)

Bonjour,

J'ai fait mon site web et je voulais le mettre en francais comme en anglais.
Mais je bloc j'ai pourtant bien avancé, tout fonctionnait bien niveau traduction jusqu'à ce que je comprenne que le problème vienne de mes liens drapeaux :
Mes pages sont :
index.php
page2.php
page3.php
page4.php
contact.php

Lorsque je click actuellement sur les liens drapeaux ils me ramènent forcément à la page accueil
Y a t-il une possibilité de régler le problème
Merci d'avance
Yo

<?php
$langue=0;
if(isset($_GET["lang"]))
    $langue=1;
?>

<div class="inter">
<a href="." target="_self"><img class="drapeau" src="img/fr.png" alt=""></a>
<a href="index.php?lang=1" target="_self"><img class="drapeau" src="img/en.png" alt=""></a>
</div>

Ha, j'avais envoyé l'image sur le forum, mais ça n'a pas l'air de passer :

https://share.remy-photographie.com/storage/originals/3e/7f/Capture-decran-2021-05-12-a-173058.png

En gros, le parent change de taille selon le viewport.

J'ai réussi à faire un truc en svg, mais ça glitch sur firefox :

<div class="bloc-parent">
	<svg viewBox="0 0 500 500" preserveAspectRatio="none">
		<polyline style="fill:#E0E0E0;" points="500,0 500,500 0,500 "/>
	</svg>
</div>

.bloc-parent {
	background-color: red;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.bloc-parent svg {
	width: 100%;
	height: 100%;
}

* deux bugs, un premier qui rajoute du margin-bottom, corrigé avec l'overflow sur le parent, et un autre que je n'arrive pas à régler : selon la taille du parent, ça se cale à 100%-1px de celui-ci (ce qui produit une petite ligne d'1px disgracieuse).

Je précise que je suis toujours intéressé par d'autres méthodes (genre basic-shape, préfixé, ça semble assez compatible)
Modifié par MrSoul (12 May 2021 - 20:01)

Salut !

Est-ce que tu as un bout de code ? Un screenshot ou un exemple ?
J'ai du mal a voir. Il prend combien de % du parent ? Et des % de quoi (largeur, hauteur) ?

MrSoul a écrit :
Une idée en full css ?
Est-ce possible avec du SVG inline ?
Faut-il ajouter du JavaScript ?

En full CSS ca peut se faire.
En Svg aussi oui (inline ou pas d'ailleur)
En JS ca serait overkill

Bonsoir,
je voudrais afficher toto.php dans la fenêtre courante, de manière synchrone (ie sans innerHTML), non sans lui avoir préalablement transmis une donnée en méthode post. Sans formulaire, bien sûr !
Une idée ?

Bonjour,

Je cherche à faire un truc un peu chiant, voir carrément impossible (mais à cœur vaillant... bla bla bla, expression de vieux).

Je cherche à faire un triangle top-right (facile), MAIS en pourcentage (impossible sur les borders).

Le concept étant de voir ce triangle suivre la taille de son parent (comme sur l'image lié).

Une idée en full css ?
Est-ce possible avec du SVG inline ?
Faut-il ajouter du JavaScript ?

Merci pour vos lumières.

Bonsoir,
je voudrais charger une police d'une autre origine que la page courante. Il semble que cela ne fonctionne pas. Que me conseilleriez-vous ?

Bonjour,

J'ai besoin d'aide pour remplir les cases au fur et à mesure que ça se déplace.

<?php

class Elementor_CustomerSlider_Widget extends \Elementor\Widget_Base {

public function __construct( $data = array(), $args = null ) {
parent::__construct( $data, $args );

wp_enqueue_style('customer_slider', get_stylesheet_directory_uri() . '/elementor/customer-slider/customer-slider.css');
wp_enqueue_script('customer_slider', get_stylesheet_directory_uri() . '/elementor/customer-slider/customer-slider.js', array('jquery'), PENEGA_VERSION, true);
}

public function get_name() {
return 'customer_slider';
}

public function get_title() {
return __( 'Customer Slider', 'penega' );
}

public function get_icon() {
return 'fa fa-cube';
}

public function get_categories() {
return [ 'general' ];
}

protected function _register_controls() {

$this->start_controls_section( 'content_section', [
'label' => __( 'Content', 'penega' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]);

$this->add_control( 'speed', [
'label' => __( 'Speed', 'penega' ),
'type' => \Elementor\Controls_Manager::NUMBER,
]);

$this->add_responsive_control( 'size', [
'label' => __( 'Size', 'penega' ),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => '15rem',
]);

$this->end_controls_section();
}

protected function render() {

$guid = uniqid();
$settings = $this->get_settings_for_display();

$clients = [];
$loop = new WP_Query([
'post_type' => 'client',
]);
if ($loop->have_posts()) {
while($loop->have_posts()) {
$loop->the_post();
array_push($clients, (object) [
'thumbnail' => get_the_post_thumbnail(get_the_ID(), null),
]);
}
}

?>
<div id="customer_slider_<?= $guid ?>" class="customer-slider overflow-hidden">
<div class="customer-sliders-scroller no-select" data-auto-horizontal-scroller='{ "duration": <?= $settings['speed'] ?>, "direction": 1 }'>
<?php foreach($clients as $client) : ?>
<div class="customer-slider-item d-flex align-items-center">
<?= $client->thumbnail; ?>
</div>
<?php endforeach ?>

<?php for($i = 0; $i < 8; $i++) : ?>
<div class="customer-slider-item d-flex align-items-center">
<?= get_the_post_thumbnail(111); ?>
</div>
<?php endfor ?>
</div>

<div class="customer-sliders-scroller no-select" data-auto-horizontal-scroller='{ "duration": <?= $settings['speed'] ?>, "direction": -1 }'>
<?php foreach($clients as $client) : ?>
<div class="customer-slider-item d-flex align-items-center">
<?= $client->thumbnail; ?>
</div>
<?php endforeach ?>

<?php for($i = 0; $i < 8; $i++) : ?>
<div class="customer-slider-item d-flex align-items-center">
<?= get_the_post_thumbnail(111); ?>
</div>
<?php endfor ?>
</div>
</div>
<style>
#customer_slider_<?= $guid ?> .customer-slider-item {
min-width: <?= $settings['size'] ?>;
min-height: <?= $settings['size'] ?>;
}
@media all and (max-width: 991px) {
#customer_slider_<?= $guid ?> .customer-slider-item {
min-width: <?= $settings['size_tablet'] ?>;
min-height: <?= $settings['size_tablet'] ?>;
}
}
@media all and (max-width: 767px) {
#customer_slider_<?= $guid ?> .customer-slider-item {
min-width: <?= $settings['size_mobile'] ?>;
min-height: <?= $settings['size_mobile'] ?>;
}
}
</style>
<?php
}

}


Merci beaucoup

Bonjour,

J'ai besoin d'aide pour animer le coeur: le but est de commencer l'animation seulement quand on scroll vers la section où le coeur se trouve.

Code js:

(function($) {
$(document).ready(function() {
const $heart = $('.inject-heart');
$heart.parent().addClass('position-relative');
// $heart.append('<img data--300-bottom="opacity: 0; transform: scale(0.5)" data-center="opacity: 1; transform: scale(1)" class="heart" src="' + stylesheet_directory_uri + '/dist/images/icons/heart.svg" />');
$heart.append('<svg data--300-bottom="opacity: 0; transform: scale(0.5)" data-center="opacity: 1; transform: scale(1)" class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 556.3 300"><path d="M527.9 202.6c-63.8 44-132.5 44.6-194.2 27.8-27.3-7.4-54.1-18.7-77.8-34-22-14.2-44.3-31.9-57.9-54.8-5.9-9.9-10.1-21.2-9.8-32.8.3-8.3 3-16.6 8.3-23.1 7.5-9.1 19.8-13.6 31.5-12.5 11.7 1.1 22.7 7.4 30.3 16.4 4.6 5.5 12.4 18 10.4 25.9-1 4.2-5.2 6.6-7.5 4.4-8.3-8.3 17-39.4 40.4-43.3 18.6-3.2 37.8 4.9 43.3 24.3 3.8 13.2.4 27.7-6.3 39.7-9.4 17-24.3 31.3-39.2 43.6-23.5 19.4-52.3 31-82.3 36.3-27.8 4.9-56.5 4.7-84.5 1.8-23.5-2.4-46.7-6.8-69.5-12.9-11.9-3.2-24.8-6.8-34.8-13.7" fill="none" stroke="#fa644b" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"/></svg>');


const $greenHeart = $('.green-heart');
$greenHeart.addClass('position-relative');
$greenHeart.append('<svg data--300-bottom="opacity: 0; transform: scale(0.5)" data-center="opacity: 1; transform: scale(1)" class="green heart" xmlns="http://www.w3.org/2000/svg" width="1912.382" height="641.597" viewBox="0 0 1912.382 641.597">\n' +
' <g id="icon-coeur" transform="translate(1.391 1.032)">\n' +
' <path id="PNG_picto_coeur" d="M1937.9,567.585c-243.86,167.95-506.449,170.24-742.282,106.114C1091.27,645.452,988.833,602.32,898.246,543.919c-84.09-54.2-169.326-121.764-221.309-209.174-22.551-37.789-38.6-80.921-37.458-125.2,1.147-31.681,11.467-63.363,31.725-88.174,28.667-34.735,75.681-51.912,120.4-47.713s86.765,28.246,115.814,62.6c17.582,20.994,47.4,68.707,39.751,98.861-3.822,16.032-19.876,25.192-28.667,16.795-31.725-31.681,64.978-150.392,154.419-165.278,71.094-12.215,144.481,18.7,165.5,92.754,14.525,50.385,1.529,105.732-24.08,151.537-35.929,64.89-92.881,119.474-149.833,166.423C974.691,571.4,864.61,615.679,749.942,635.91c-106.259,18.7-215.958,17.94-322.981,6.871-89.823-9.161-178.5-25.956-265.647-49.24C115.83,581.326,66.523,567.585,28.3,541.247" transform="translate(-28.3 -73.037)" fill="none" stroke="#12d7ab" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>\n' +
' </g>\n' +
'</svg>\n')
});
})(jQuery)


et code css (class= «homepage-ping»):

.homepage-ping .heart path{
stroke-dasharray: 1041;
stroke-dashoffset: 1041;
animation: draw 3s linear forwards;
}

@keyframes draw {
to{
stroke-dashoffset: 0;
}
}

.green-heart .green{
position: absolute;
top:20%;
left:0;
z-index:1;
}

.green.heart path{
stroke-dasharray: 3980;
stroke-dashoffset: 3980;
animation: draw 5s linear forwards;
}

@keyframes draw {
to{
stroke-dashoffset: 0;
}
}


Merci d'avance

Il est intéressant de noter que toutes les discussions sur les stations de radio Internet à faible coût sont vraiment à peu près à la faire et à réduire le coût de la production. L'un de mes exemples préférés est la radio https://radiofrench.fr/ satellite. Je pense que c'est parce que la plupart des gens ne comprennent pas complètement ce que la radio par satellite implique.

L'une des plus belles choses sur la radio live low cost est combien est peu coûteuse. De nombreuses petites stations de radio obtiennent leurs premiers airwaves de moins de 15 000 $ et peuvent toujours rester dans l'air moins d'un mois avant l'annulation. Les coûts de démarrage d'une station de radio comprennent généralement des frais d'ingénierie, des studios pour la production de programmes radio et des équipements de transmission pour transmettre vos signaux au monde. En d'autres termes, les coûts de démarrage pour une petite station de radio peuvent être extrêmement bas.

Il existe également plusieurs façons de réduire le coût d'une station de radio. Premièrement, si vous voulez réellement réduire vos frais généraux, alors vous devez faire plus de publicité. Plus vous avez de stations de radio, plus vous aurez besoin de la publicité radio. Un excellent moyen de faire cela consiste à contacter des journaux locaux, des lave-voitures et des restaurants à leur espace publicitaire. Vous pouvez également trouver un autre moyen d'obtenir de l'espace publicitaire comme à l'aide d'Internet.

Un autre excellent moyen de réduire le coût de la publicité radio est de co-marquer vous-même avec une entreprise spécialisée dans quelque chose que vous avez un excellent produit. Par exemple, si vous avez une entreprise qui fait des vêtements de bébé, vous pouvez créer un partenariat avec un fabricant de vêtements pour bébé et faire de la publicité exclusivement sur leur station de radio. D'autres exemples populaires de stations de radio co-marquées sont des concessionnaires automatiques et des sociétés de prêt auto. En formant un partenariat avec une entreprise qui a quelque chose à offrir au consommateur, vous pouvez économiser des milliers de dollars.

Vous devrez également prendre des décisions lorsqu'il s'agit des coûts de démarrage réels pour une nouvelle station de radio. L'aspect le plus important de vos coûts de démarrage sera peut-être un équipement de studio. L'équipement de studio est ce qui accueillera votre signal afin qu'il doit être à la pointe de la technologie. Cela signifie que la qualité sonore devrait être très claire et relativement peu coûteuse, mais cela signifie également que l'équipement doit être à la pointe de la technologie. Bon équipement de studio va non seulement bien, mais cela vous fera économiser de l'argent depuis que vous n'aurez pas besoin de payer pour des publicités coûteuses. Vous devriez essayer de trouver le meilleur équipement que vous puissiez vous permettre, mais rappelez-vous que vous n'avez pas à dépenser tout votre argent dur-gagné sur des équipements de studio;

La publicité radio peut être très rentable pour une petite start-up, mais vous devez être sûr que vous atteignez votre public cible. Même si la publicité radio est moins chère que la publicité à la télévision, les gens sont souvent moins susceptibles de regarder des publicités s'ils participent à autre chose, vous devriez donc toujours vous concentrer sur votre marché cible. La clé de la publicité radio est mémorable, intéressante et créative afin de rejoindre votre public cible et de les garder à l'écoute. Afin de réussir, vous devez savoir où vous pouvez atteindre votre public cible le plus efficacement et choisir la méthode de la publicité radio qui fonctionne le mieux pour vous.
Modifié par Sigmundi (13 May 2021 - 04:52)

BRAVO
et
MERCI de vos explications
Modifié par nikon33 (12 May 2021 - 15:04)

Bonjour Niuxe,

J'ai finalement trouvé en me renseignant auprès de mon hébergeur :
Ajouter un enregistrement SPF(TXT) au DNS à mon domaine.

Cela permet d'éviter la distribution des mails dans la boîte spam voire pas de distribution du tout !

Merci pour votre aide
Cordialement
Patrick Mara

Bjr merci de m'avoir répondu
suite à votre réponse comment faire pour instancier $db???
forgot.php modifié

<?php require 'includes/includes.php' ?>

<?php 
$titrepage="Mot de passe oublié || Ndameyong - L'Ecole des Langues Camerounaises" ;

if(!empty($_POST))
{
    $post = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
    extract($post);

    $errors = [];


    if(empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)){
      array_push($errors, 'Cette email est invalide.');
    }
    else{
       $req = $db->prepare('SELECT * FROM users WHERE email=:email');
      
      if(!$req->rowCount()){
        array_push($errors, 'Cet email ne correspond à aucun membre du site.');
      }
      else{
        $user = $req->fetch();
      }

      if(empty($errors))
      {
        $token = uniqid();

        $req = $db->prepare('INSERT INTO password_resets (email, token, created_at) VALUES (:email, :token, NOW())');
        $req->bindValue(':email', $email, PDO::PARAM_STR);
        $req->bindValue(':token', $token, PDO::PARAM_STR);
        $req->execute();

        $link = 'Bonjour, veuillez cliquer sur <a href="https://ndameyong.test/reset.php?token='.$token.'">ce lien</a> pour réinitialiser votre mote de passe.';

        // Create the Transport
        $transport = (new Swift_SmtpTransport('smtp.mailtrap.io', 465))
          ->setUsername('fae489573327ac')
          ->setPassword('eed3d4ab64b373')
        ;

        // Create the Mailer using your created Transport
        $mailer = new Swift_Mailer($transport);

        // Create a message
        $message = (new Swift_Message('Mot de passe oublié'))
          ->setFrom(['lcorrefabien@gmail.com' => 'John Doe'])
          ->setTo([$email => $user->name])
          ->addPart($link, 'text/html');
          ;

        // Send the message
        $result = $mailer->send($message);

        if($result){
          $success = 'Un email vous a été envoyé avec des instructions.';
          unset($email);
        }
      }
    }
}

?>

<?php require 'includes/header.php'; ?>


<!-- message de session -->
<?php if (isset($_SESSION['message'])): ?>
  <div class="message"> <?php echo $_SESSION['message']; ?></div>
  <?php unset($_SESSION['message']) ?>
<?php endif ?>
<?php if (isset($_SESSION['erreur'])): ?>
  <div class="errorMessage"> <?php echo $_SESSION['erreur']; ?></div>
  <?php unset($_SESSION['erreur']) ?>
<?php endif ?>


	<h4 class="title-element">Récupération de mot de passe</h4>
	
 <?php include('messages.php');?>

    <form action="forgot.php" method="post">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email" value="<?= $email ?? '';?>">
      </div>
      <button type="submit" class="btn btn-primary">Envoyer</button>
    </form>
    <br>

    <p><a href="login.php">Je m'en souviens en fait.</a></p>
 
<?php require 'includes/footer2.php'; ?>

Db.php

<?php
 
/**
* Gestion de la base de données
*/
class Db{
     
    private $host=HOST;
    private $name=DBNAME;
    private $user=USER;
    private $pass=PWD;
 
    private $connexion;
 
    function __construct($host=null,$name=null,$user=null,$pass=null){
         
        if($host != null){
            $this->host = $host;
            $this->name = $name;
            $this->user = $user;
            $this->pass = $pass;
        }
 
        try{
 
            $this->connexion = new PDO('mysql:host='.$this->host.';dbname='.$this->name,
                $this->user,$this->pass,array(
                    1002 =>'SET NAMES UTF8',
                    PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING


              
                    ));
            $this->connexion->exec('SET NAMES utf8');
//PDO::MYSQL_ATTR_INIT_COMMAND
        }catch (PDOException $e){
            //echo 'Erreur : Impossible de se connecter  à la BD !';die();
            echo $e->getMessage();
        }
    }
 
    /* requete */
 
    public function query($sql , $data=array()){
        $req = $this->connexion->prepare($sql);
        $req->execute($data);
        return $req->fetchAll(PDO::FETCH_OBJ);
    }
 
    public function tquery($sql , $data=array()){
        $req = $this->connexion->prepare($sql);
        $req->execute($data);
        return $req->fetchAll(PDO::FETCH_ASSOC);
    }
 
 
    public function insert($sql , $data=array()){
        $req = $this->connexion->prepare($sql);
        $nb=$req->execute($data);
        return $nb;
    }
    
	
	public function exec($sql , $data=array()){
      try{
        $req = $this->connexion->prepare($sql);
        $req->execute($data);
        return $req->rowCount(); // Retourne le nombre de lignes impactées par la reuqête
      }catch(Exception $e){
        echo 'Erreur : ' . $e->getMessage(); // en cas d'erreur dans la requête !
      }
    }

    public function deleteuser($id){
       $sql = 'DELETE FROM users WHERE id=:id';
       $data = [':id'=>$id]; 
       return  $DB->exec($sql , $data) ;
    }
 
    public function select($sql, $data=array()){
       $req = $this->connexion->prepare($sql);
       $data = prepared_query($DB, $sql, [$email]);
       $user = $data->get_result()->fetch_assoc();
    }
}

auth.php

<?php 

/**
* Auth
*/
class Auth{
	
	public static function islog($db){
		if(isset($_SESSION['user']) && isset($_SESSION['user']['email'])  && isset($_SESSION['user']['password'])){

			$data =array(
				'email'=>$_SESSION['user']['email'],
				'password'=>$_SESSION['user']['password']
				
				);
			
			$sql = 'SELECT * FROM users WHERE email=:email AND password=:password limit 1';
			$req = $db->tquery($sql,$data);

			if(!empty($req)){
				return true;
			}
		}
		return false;
	}


	public static function hashPassword($pass){

		return sha1(SALT.md5($pass.SALT).sha1(SALT));
	}


	public static function isadmin($db){
		if(isset($_SESSION['user']['role']) && (Auth::hashPassword('admin')  == $_SESSION['user']['role'])){
			return true;
		}
		return false;
	}

  public function uniqueEmail($email){
        $req = $this->connexion->prepare('SELECT count(*) as nbre from users WHERE email=:email limit 1');
        $req->execute(array('email'=>$email));
 
        $reponse = $req->fetchAll(PDO::FETCH_ASSOC);
        return $reponse[0]['nbre'];
 
    }
	public function deleteuser($id){
	   $sql = 'DELETE FROM users WHERE id=:id';
	   $data = [':id'=>$id]; 
	   return  $DB->exec($sql , $data) ;
	}
	
}

Bonjour,

Il est possible d’insérer du texte, mais pour ce qui est de structure HTML , non.

Il est possible de dessiné des lignes qui ressembleront à un tableau puis de placer du texte ...

JavaScript permet d'interagir avec l'utilisateur et le contenu, par exemple redessiner le canvas en fonction de donnée trouvé dans le HTML d'un tableau.

Pour un simple affichage, il est plus possible de superposer le tableau au canvas, pour une interaction avec le tableau, il faudra se servir de JavaScript pour mettre le canvas à jour.

Ce sera simple ou compliqué selon la raison pour laquelle tu veut fondre un tableau dans un canvas.

Bonne continuation.

Bonjour,

text-indent a un effet sur tout le texte et élément en ligne contenu dans son conteneur. En utilisant une valeur importante , son utilisation première est détournée. C'est comme cela que votre texte est masqué.

Pour que text-indent n'ai pas d'effet sur le span et le pseudo, tout deux des boite en ligne, float modifie leur interaction dans le flux. Enfin un réinitialisation à 0 du text-indent sur ces élément permet d'afficher leur contenu texte.

Quant à la question pourquoi l'un fonctionne et pas l'autre, cela vient du poids des sélecteur et de l'endroit ou vos tentatives ont été ajoutées. Notion à connaitre à propos de la priorité des sélecteurs : https://www.zonecss.fr/cours-css/poids-des-selecteurs-css.html / https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Bonjour,

Je suis débutante et ma question est peut-être bête car illogique et impossible.
J'ai actuellement un accordéon Bootstrap (code à la fin du message) et j'aimerais que les 2 premières sections contiennent également un accordéon. En gros, j'essaye de bricoler une espace de menu oui... Je ne sais pas si c'est possible ou pas.
Actuellement, en copiant le code du premier accordéon dans une des section de celui-ci, évidemment, ça ne marche pas (logique) et en plus, si on ouvre la section 3 du premier accordéon, ça ouvre aussi la section 3 de l'accordéon imbriqué dans la section du premier.
Auriez-vous une solution à me proposer (même si ce n'est pas l'accordéon imbriqué dans un accordéon, tant que quand j'ouvre une section de l'accordéon et que je peux avoir de nouveau des "zones" cliquables, peut-être en décallé).

Merci par avance pour votre aide,
Belle journée !

----- extrait du code :
<div class="container mt-3">
<h4 class="mb-1">Accordion Example</h4>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Javascript
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample" style="">
<div class="card-body">
JavaScript is a scripting or programming language that allows you to implement complex things on web pages ..
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Css
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample" style="">
<div class="card-body">
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media ..
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Bootstrap
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample" style="">
<div class="card-body">
Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography ...
</div>
</div>
</div>
</div>
</div>

Bonjour,

Oui, sur la ligne en question, tu fais :

$req = $db->prepare('SELECT * FROM users WHERE email=:email');

mais l'objet $db n'est pas instancié avant.

Je vois que tu as aussi fait une classe Db que tu n'utilise pas ?

Pour gcyrillus

Pour votre deuxième prescription

.tax-ecwd_event_category.term-conference header .page-title {
text-indent:-100vw;
width:100%;
}
.tax-ecwd_event_category.term-conference header .page-title:before,
.tax-ecwd_event_category.term-conference header .page-title span {
float:left;
text-indent:0;
}
.tax-ecwd_event_category.term-conference header .page-title:before {
content:'Mots Clés : ';
}


j'obtiens... seulement "Conférence"



https://ccefr.fr/sitestravail/WP02/category/conference/


MERCI

Pouvez vous prendre un peu de temps pour m'expliquer votre première prescription de code.. celle qui a résolu MON problème... Que je ne reste pas l'idiot de service

j'ai compris ... seulement... le report à gauche, hors champ de vision, du contenu de "page-title"

ET

Pourquoi votre deuxième prescription.. ne fonctionne PAS


MERCI pour votre implication et de votre compétence

Michel BOUDRY

Avec toutes mes excuses

je viens de mettre le code suivant

.page-title {
text-indent:-100vw;
}
.page-title span, .event:before {
float:left;
text-indent:0;
}
.page-title :before {
content:'Mots Clés : ';
font-weight:bold;
}


ET

TOUT fonctionne comme voulu

https://www.ccefr.fr/event_category/conference/



MERCI BEAUCOUP

NB

je vais essayer votre deuxième prescription et vous rappelle pour vous donner le résultat

Bonjour,
Je souhaiterai inclure un tableau html dans un canvas.
C'est possible ? Je ne vois pas comment faire !
Pouvez-vous m'aider svp ?
Merci.

bonsoir la communauté,
quelqu'un pourrait-il m'eclairer ? j'essaye de construire un système de mot de passe oublié
j'ai deux erreurs

Notice: Undefined variable: db in C:\wamp\www\ndameyong\forgot.php on line 18

Fatal error: Uncaught Error: Call to a member function prepare() on null in C:\wamp\www\ndameyong\forgot.php:18 Stack trace: #0 {main} thrown in C:\wamp\www\ndameyong\forgot.php on line 18
voilà les codes
forgot.php

<?php require 'includes/includes.php' ?>

<?php 
$titrepage="Mot de passe oublié || Ndameyong - L'Ecole des Langues Camerounaises" ;

if(!empty($_POST))
{
    $post = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
    extract($post);

    $errors = [];


    if(empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)){
      array_push($errors, 'Cette email est invalide.');
    }
    else{
     $req = $db->prepare('SELECT * FROM users WHERE email=:email');
     $req->bindValue(':email', $email, PDO::PARAM_STR);
     $req->execute();

      if(!$req->rowCount()){
        array_push($errors, 'Cet email ne correspond à aucun membre du site.');
      }
      else{
        $user = $req->fetch();
      }

      if(empty($errors))
      {
        $token = uniqid();

        $req = $db->prepare('INSERT INTO password_resets (email, token, created_at) VALUES (:email, :token, NOW())');
        $req->bindValue(':email', $email, PDO::PARAM_STR);
        $req->bindValue(':token', $token, PDO::PARAM_STR);
        $req->execute();

        $link = 'Bonjour, veuillez cliquer sur <a href="https://ndameyong.test/reset.php?token='.$token.'">ce lien</a> pour réinitialiser votre mote de passe.';

        // Create the Transport
        $transport = (new Swift_SmtpTransport('smtp.mailtrap.io', 465))
          ->setUsername('fae489573327ac')
          ->setPassword('eed3d4ab64b373')
        ;

        // Create the Mailer using your created Transport
        $mailer = new Swift_Mailer($transport);

        // Create a message
        $message = (new Swift_Message('Mot de passe oublié'))
          ->setFrom(['lcorrefabien@gmail.com' => 'John Doe'])
          ->setTo([$email => $user->name])
          ->addPart($link, 'text/html');
          ;

        // Send the message
        $result = $mailer->send($message);

        if($result){
          $success = 'Un email vous a été envoyé avec des instructions.';
          unset($email);
        }
      }
    }
}

?>

<?php require 'includes/header.php'; ?>


<!-- message de session -->
<?php if (isset($_SESSION['message'])): ?>
  <div class="message"> <?php echo $_SESSION['message']; ?></div>
  <?php unset($_SESSION['message']) ?>
<?php endif ?>
<?php if (isset($_SESSION['erreur'])): ?>
  <div class="errorMessage"> <?php echo $_SESSION['erreur']; ?></div>
  <?php unset($_SESSION['erreur']) ?>
<?php endif ?>


	<h4 class="title-element">Récupération de mot de passe</h4>
	
 <?php include('messages.php');?>

    <form action="forgot.php" method="post">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email" value="<?= $email ?? '';?>">
      </div>
      <button type="submit" class="btn btn-primary">Envoyer</button>
    </form>
    <br>

    <p><a href="login.php">Je m'en souviens en fait.</a></p>
    

	
<?php require 'includes/footer2.php'; ?>

Db.php

<?php
 
/**
* Gestion de la base de données
*/
class Db{
     
    private $host=HOST;
    private $name=DBNAME;
    private $user=USER;
    private $pass=PWD;
 
    private $connexion;
 
    function __construct($host=null,$name=null,$user=null,$pass=null){
         
        if($host != null){
            $this->host = $host;
            $this->name = $name;
            $this->user = $user;
            $this->pass = $pass;
        }
 
        try{
 
            $this->connexion = new PDO('mysql:host='.$this->host.';dbname='.$this->name,
                $this->user,$this->pass,array(
                    1002 =>'SET NAMES UTF8',
                    PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING


              
                    ));
            $this->connexion->exec('SET NAMES utf8');
//PDO::MYSQL_ATTR_INIT_COMMAND
        }catch (PDOException $e){
            //echo 'Erreur : Impossible de se connecter  à la BD !';die();
            echo $e->getMessage();
        }
    }
 
    /* requete */
 
    public function query($sql , $data=array()){
        $req = $this->connexion->prepare($sql);
        $req->execute($data);
        return $req->fetchAll(PDO::FETCH_OBJ);
    }
 
    public function tquery($sql , $data=array()){
        $req = $this->connexion->prepare($sql);
        $req->execute($data);
        return $req->fetchAll(PDO::FETCH_ASSOC);
    }
 
 
    public function insert($sql , $data=array()){
        $req = $this->connexion->prepare($sql);
        $nb=$req->execute($data);
        return $nb;
    }
    
	
	public function exec($sql , $data=array()){
      try{
        $req = $this->connexion->prepare($sql);
        $req->execute($data);
        return $req->rowCount(); // Retourne le nombre de lignes impactées par la reuqête
      }catch(Exception $e){
        echo 'Erreur : ' . $e->getMessage(); // en cas d'erreur dans la requête !
      }
    }


    {
       $sql = 'DELETE FROM users WHERE id=:id';
       $data = [':id'=>$id]; 
       return  $DB->exec($sql , $data) ;
    }
	
}

Il y a apparement des conflits avec vos régles.

retirez les styles que vous avez ajouté et essayez ceux-ci pour les appliquer uniquement dans cette page https://www.ccefr.fr/event_category/conference/ :

.tax-ecwd_event_category.term-conference header .page-title {
  text-indent:-100vw;
  width:100%;
}
.tax-ecwd_event_category.term-conference header .page-title:before,
.tax-ecwd_event_category.term-conference header .page-title span {
  float:left;
  text-indent:0;
}
.tax-ecwd_event_category.term-conference header .page-title:before {
  content:'Mots Clés : ';
}

Wordpress génere different class sur body en fonction de la page affichée (voir le code source dans le navigatuer pour les trouver).

Cdt

Avec le code
.page-header .author-info > :last-child, .page-header > :last-child, .page-title {
text-indent: -2000px;
}

j'ai bien réussi à faire partir TRES loin sur la gauche de l'écran

MAIS


avec l'ajout du code

.page-header .author-info > :last-child, .page-header > :last-child, .page-title span,
.page-header .author-info > :last-child, .page-header > :last-child, .page-title :before {
float: left;
text-indent: 0;
}

et

.page-header .author-info > :last-child, .page-header > :last-child, .page-title:before {
content: 'Mots Clés :';
font-weight: bold;
}


J'obtiens cela



le résultat n'est pas conforme à ce que je recherche
soit
"Mot clé : Conférence"

NB pas de pb pour les "s"

https://www.ccefr.fr/event_category/conference/


Rappel de la feuille de style voir les images du message précédent

++++++++++++++++++++++++++++++
QUESTION 1
Est ce que remplacer dans votre code
.envent
par
.page-header .author-info > :last-child, .page-header > :last-child, .page-title
est conforme à votre idée ? instruction ?
+++++++++++++++++++++++++++++
QUESTION 2
Comment avoir "Mot clé :" AVANT "Conférence" ?
Comment effacer ou faire sortir de l'écran "Event Category :" ... qui s'est ajouté
++++++++++++++++++++++++++++
je pense que la valeur "Conférence" existe et est mis à jour au lancement de la page
+++++++++++++++++++++++++++++


MERCI de votre aide

je sais JUSTE recopier ce que vous m'envoyez
... je suis DEBUTANT
MAIS
je sais passer des heures à faire des essais
.. et rendre compte

MERCI de votre aide

Bonjour,

J'ai un petit problème...

$contenu = str_replace(array('[img]','[/img]'), array('<img style="max-width: 100%;" src="/exemple/','" alt="">'), nl2br(htmlspecialchars($donnees['contenu'])));

Comment ne remplacer que des "couples" de balises pour ne pas créer des erreurs si quelqu'un en supprime une ?

Merci
Modifié par Louis_9876 (11 May 2021 - 23:05)

MERCI de cette si rapide réponse

je teste et rappelle

Bonjour ,

sans javascript , comme tu as le texte à garder dans une balise , une vielle méthode avec text-indent et float + un pseudo devrait convenir:

exemple:

<p class="event">Event Categories : <span>Cat Event</span>.</p>

.event {
  text-indent:-100vw; /* mettre une valeur suffisante pour éjecter les textes et contenu 'inline' hors de l'écran sans créer de barre de défilement)
}
.event span, .event:before {
  float:left;
  text-indent:0;/*reset !*/
}
.event:before {
  content:'Mots Clés :';/* texte visible au lieu du texte caché  mais toujours présent*/
  font-weight:bold;
}

edit demo avec l'astuce de centrage des textes du titre https://codepen.io/gc-nomade/pen/PopPLjL
Modifié par gcyrillus (11 May 2021 - 20:56)

Oui, si tu est plus à l'aise avec le procédural, il n'y a pas de problème, continue à l'utiliser.
L’intérêt de l'objet se voit surtout quand on a des modifs à faire régulièrement ou quand on commence à avoir beaucoup de code à gérer, dans ce cas, ça devient plus simple de découper en classes et la maintenance et la réutilisation sont facilitées.

Il y a moyen de limiter le nombre de tableaux, en faisant un tableau associatif pour les types, par exemple :

$types = [
        'a' => 1,
        'b' => 2,
        'f' => 30,
        'g' => 76,
        'k' => 127,
        'm' => 764
    ];

On peut aussi supprimer totalement les boucles en utilisant des array_map, array_fill, etc. mais après avoir testé, je ne crois pas que ce soit plus lisible et ça fait à peine gagner 2 lignes.

J'avais essayé avec une image supplémentaire transparente de même dimension, et cela fonctionnait. Quid sur d'autres écrans....
Ta solution fonctionne, un grand merci. Il faut dire que je m'était lancé dans l'écriture d'un javascript en jouant sur la propriété 'pos' de l'élément, un peu ardu
Encore merci.
Jean-François

Bonjour,

Si l'image est le dernier élément du conteneur , c'est normal qu'elle reste au bas de celui-ci. Il te faudrait prévoir un élément vide ou un padding au conteneur ou la dernière image pour augmenter la hauteur du conteneur et donner la possibilité a la dernière image de s'afficher plus haut.

Peut-être un height + object-fit pour la dernière image. (je regarde si cette piste fonctionne)

edit code css (a voir si le selecteur reflete ta réalité) qui devrait résoudre ton soucis:

.main > div:last-of-type .bloc-image img {
  min-height:100vh;
  object-fit:none;
  object-position:0 0;
}

démo depuis ton code (sans hauteur a main pour garder les liens visible pour le test) https://codepen.io/gc-nomade/pen/zYZvjQX
Modifié par gcyrillus (11 May 2021 - 15:14)

re
Merci, je vois que t'as gardé la partie avec le while c'est ce qui me plaisais pas trop mais apparemment doit pas y avoir d'autre moyen de faire plus propre... en fait ça marche pour la BDD c'était juste moi qu'avais fait une faute de frappe sur un nom de variable du coup ça bouclais à l'infini

je suis repassé sur le code pour le simplifier

function etoile() {
	$taille = 256*256;
	$type = explode(',','a,b,f,g,k,m');
	$pour1000 = explode(',','1,2,30,76,127,764');

	$etoile = '';
	for ($e=0;$e<$taille;$e++) {$etoile .= "0";}

	for ($e=0;$e<count($type);$e++) {
		$ok = 0;
		while ($ok < $pour1000[$e]) {
			$rand = rand(0, $taille-1);
			if ($etoile[$rand] == '0') {
				$etoile[$rand] = $type[$e];
				$ok ++;
			}
		}
	}
	return $etoile;
}

Ya tellement de partie que je comprends pas dans ton code (ma faute hein )
mais de ce que je vois mis à part les variables qui sont typées et le fait que se soit programmer orienté objet (enfin je crois ) ça fait sensiblement la même chose ?

maintenant qu'est-ce qui sera le plus rapide niveau traitement des 2 codes ?

PS : désolé si j'ai l'air de pinaillé mais mon cerveau il marche en procédural la POO j'ai trop de mal
Modifié par Exter (11 May 2021 - 13:14)

MERCI DE M'AIDER

Je chercher à effacer "Event Category : "
voir image jointe
soit en l'effacent tout simplement, soit en le colorant en bleu du fond, soit mieux (pour moi) mettre à la place "Mots Clés :"


le code de la feuille est le suivant
voir image jointe


le code fait bien changer la couleur de (tout) "Event Category : Conférences" en vert
avec ce code
code
.page-header .author-info > :last-child, .page-header > :last-child, .page-title {
margin-bottom: 0;
color: #ff0;
}
code


Avez vous une solution

MERCI d'avoir lu jusque là

Michel

Bonjour,

Pour la partie BDD, il faudrait voir plus de code pour te donner des pistes, mais pour le code php, j'ai fait ça vite fait :

class Cadran
{
    private $etoiles;

    public function __construct(Int $nbEtoiles)
    {
        $this->etoiles = array_fill(0, $nbEtoiles, 0);
    }

    public function getNbEtoiles(): int
    {
        return sizeof($this->etoiles);
    }

    public function addEtoiles(string $type, int $nb): void
    {
        $ok = 0;
        while ($ok < $nb) {
            $rand = rand(0, $this->getNbEtoiles() - 1);
            if ($this->etoiles[$rand] === 0) {
                $this->etoiles[$rand] = $type;
                $ok++;
            }
        }
    }

    public function getNbEtoilesByType(): array
    {
        return array_count_values($this->etoiles);
    }

    public function __toString()
    {
        return implode('', $this->etoiles);
    }
}

Pour l'utiliser, il suffit de créer un cadran comme ça :

$cadran = new Cadran(256 * 256);

Et de définir tes types d'étoiles et leur nombre :

$cadran->addEtoiles('a', 1);
$cadran->addEtoiles('b', 2);
$cadran->addEtoiles('f', 30);
$cadran->addEtoiles('g', 76);
$cadran->addEtoiles('k', 127);
$cadran->addEtoiles('m', 764);

Tu peux ensuite afficher ton cadran avec un echo :

echo $cadran;

ou l'enregistrer en BDD.

Hello,
J'ai adapté le code que tu m'as conseillé, mais comme les images ne sont pas à 100%, l'ancrage s'affiche qu'en partie.
Voilà le code :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
    
html {
  scroll-behavior: smooth;
}
    
.main {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ff0000;
    height:1950px;
}
.bloc-image {
    width: 400px;
    height: 650px;
    display: block;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
</head>

<body>   
    
    <div style="width:100%; text-align:center;height:20px;">
        <a href="#img-1">1</a> - <a href="#img-2">2</a> - <a href="#img-3">3</a> - <a href="#img-4">4</a> - <a href="#img-5">5</a>
    </div>
    
    
<div class="main">
    <div>
        <div class="bloc-image" id="img-1">
        <img src="image-pour-essai-1.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-2">
        <img src="image-pour-essai-2.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-3">
        <img src="image-pour-essai-3.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-4">
        <img src="image-pour-essai-4.jpg" width="400" height="650" alt=""/>
        </div>
    </div>
    
        <div>
        <div class="bloc-image" id="img-5">
        <img src="image-pour-essai-5.jpg" width="400" height="650" alt=""/>
        </div>
    </div>

</div><!--main-->   

</body>
</html>

Je joins une image pour éclaircir (je l'espère) le problème.

Modifié par luxojr (11 May 2021 - 09:16)

Bien le bonjour amis codeur

Je bute sur un soucis et j'arrive pas à trouver de solution sur le net pour obtenir ce que je cherche à faire
je m'explique je cherche à obtenir une chaine de 65 535 caractère avec
- tout plein de "0"
- 1 "a"
- 2 "b"
- 30 "f"
- 76 "g"
- 127 "k"
- 764 "m"
et tout ça placer aléatoirement dans ma chaine et en étant sur de pas écraser les lettres précédemment incluse.

pourquoi me direz-vous ?
mes 65 535 caractère représente un grille de 256x256 dans la quelle je cherche a placer 1000 étoiles selon leur catégorie et leur représentation dans l'univers, cette grille ne représente qu'un "cadran" d'une galaxie qui comprend 242 cadrans (le nombre de cadrans peut changer selon la galaxie)

Alors niveau code voila ce que j'ai pondu c'est sans doute brutal (trop pour le serveur en tout cas )

function etoile() {
	$taille = 256*256;
	$etoile = '';
	for ($e=0;$e<$taille;$e++) {$etoile .= "0";}
	$etoile[rand(0, $taille-1)] = 'a';
	$ok = 0;
	while ($ok < 2) {
		$rand = rand(0, $taille-1);
		if ($etoile[$rand] == '0') {
			$etoile[$rand] = 'b';
			$ok ++;
		}
	}
	$ok = 0;
	while ($ok < 30) {
		$rand = rand(0, $taille-1);
		if ($etoile[$rand] == '0') {
			$etoile[$rand] = 'f';
			$ok ++;
		}
	}
	$ok = 0;
	while ($ok < 76) {
		$rand = rand(0, $taille-1);
		if ($etoile[$rand] == '0') {
			$etoile[$rand] = 'g';
			$ok ++;
		}
	}
	$ok = 0;
	while ($ok < 127) {
		$rand = rand(0, $taille-1);
		if ($etoile[$rand] == '0') {
			$etoile[$rand] = 'k';
			$ok ++;
		}
	}
	$ok = 0;
	while ($ok < 764) {
		$rand = rand(0, $taille-1);
		if ($etoile[$rand] == '0') {
			$etoile[$rand] = 'm';
			$ok ++;
		}
	}
	return $etoile;
}

Il doit y avoir une manière plus simple de le faire mais je vois pas de fonction qui me permettrais ce genre de chose et j'ai franchement pas la motive de placer 242 000 étoiles à la main

PS : quand j'affiche le résultat dans une page ça passe, ça fait bien ce que je veut mais quand je cherche a rentrer le résultat en BDD ça crashes
Modifié par Exter (11 May 2021 - 08:44)

Bonjour,
Dans une page xhtml j'affiche un tableau de 19 colonnes que je souhaite imprimer en définissant la taille des caractères en fonction du contenu du tableau, l'idée étant d'imprimer en utilisant le plus possible toute la largeur d'une feuille A4.
Existe-t-il une règle ?
Est-il possible d'obtenir la largeur en pixels d'une feuille A4 ?
Merci.
Modifié par denisduval75 (11 May 2021 - 08:27)

Hello,
Merci pour tes réponses. Le test avec des ancrages n'est pas probant car l'ancre ne s'affiche pas en tête colonne quand je clique sur le lien de l'image souhaitée. Par exemple quand je suis avec un écran assez grand, l'ancrage souhaité s'affiche dans la zone d'affichage du navigateur et non au sommet de ma colonne d'image.
Je suis en train de travailler sur script pour tenter de résoudre le problème. Mais je vais tester quand même le lien que tu proposes. Merci
Jean-François

Voici l'idée de base , en reprenant l'exemple de base et en modifiant légèrement le lien de la doc pour mettre ton lien de téléchargement sous l'image.
https://codepen.io/gc-nomade/pen/WNpQxoN

L’exemple repris que je te met reprend ici l'adresse de l'image, il te resterait à comparer dans download.php la valeur de $_GET['img'] aux liens des image que tu stockes en BDD et une fois sur l'enregistrement, tu incrémente le champ qui sert de compteur a cette image et avant d'afficher quelque chose tu redirige avec header( location : url ) vers l'image en question.

Cdt,

Est-ce quelque chose comme ça que veux dans le principe : https://codepen.io/korell/pen/XWMmmoZ?editors=1100 ?

Pourrais-tu mettre un bout de code pour pouvoir tester la situation dans laquelle tu te trouves ?
Normalement, comme tu l'as testé, avec un système d'ancre tu peux arriver à tes fins.

Merci pour votre réponse !
Je supposais cela, créer un lien au moment de "création" de la présentation image.
Cependant, je ne vois absolument pas comment faire, par l'intermediaire d'un json ou d'un objet jQuery...
A quel endroit ?
Bien à vous, gefriche

Bonjour !
Alors voilà mon problème, je code en angular j'ai du ajouter une sidenav pour mon projet sauf qu'en voulant la placer sur le coté droit, elle ne veut plus se placer correctement par dessus mon composant.
Sur la photo on peut voir que ma side nav ne se positionne pas bien et qu'elle prend sa place individuellement.

mat-sidenav-content{
    min-height:680px;
    z-index:2;
    overflow: hidden;
    
    }
    mat-sidenav-container{
        z-index:2;
        overflow: hidden;
    height: 100%;
    /*position: absolute;*/
    overflow: hidden;
    
    }
    mat-sidenav{
       padding-top:90px;
       padding-left:15px;
       background-color:rgb(213, 214, 214);
        width: 350px;
        z-index:2;
        float: right;
    }

J'ai mis en commentaire position:absolute puisque lorsque je laisse ce parametre ma sidenav ne se met pas correctement vers la droite, voici le code html :

<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" position="end">
        sidenav
    </mat-sidenav>

    <mat-sidenav-content>
    </mat-sidenav-content>
</mat-sidenav-container>

Donc voilà au final, j'aimerai que ma siden se place correctement par dessus mon composant.
Merci pour votre aide