8768 sujets

Développement web côté serveur, CMS

Bonjour à tous,
j'ai un projet à faire avec Codeigniter
je commence par le commencement ... donc le login
j'ai trouver un code qui marche parfaitement sur internet https://www.javatpoint.com/codeigniter-database-login-form
mon soucis c'est que j'ai un css que j'avais fait a l'avance mais je ne trouve aucun moyen de faire fonctionner ma page avec mon css avec ici le login_view (j'ai repris exactement le code et le nom des fichiers du lien que je vous ai mit au-dessus)
je sais pas si j'ai était clair .. mais si vous avez besoin des chemins suiver le lien au-dessus j'ai repris exactement
mon login avec mon css :

<html>
<?php require_once 'style/head_index.php'; ?>
<html>
	<head>
		<meta charset="utf-8">  
		<title>Suivi de l'activité</title>
		<link href="./style/index.css" rel="stylesheet">
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"> </script>
		
		<!-- BOOTSRAP 4 -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
	</head>
<body>
<div id="container">
	<div class="page">
		<div class="containerr">
			<div class="left">
				<center>
				<br><br>
				<img src="./style/GSB3.png" height="250" alt="mdb logo"></center>									
			</div>
		
			<div class="right">
				<svg viewBox="0 0 320 300">
					<defs>
						<linearGradient
                          inkscape:collect="always"
                          id="linearGradient"
                          x1="13"
                          y1="193.49992"
                          x2="307"
                          y2="193.49992"
                          gradientUnits="userSpaceOnUse">
						<stop style="stop-color:#FB9514;" offset="0" id="stop876" />
						<stop style="stop-color:#ff0000;" offset="1" id="stop878" />
						</linearGradient>
					</defs>
					<path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
				</svg>

				<form role="form" method="post" action="">
				
					<div class="form">
						<i class="fas fa-user prefix grey-text fa-lg"></i>
						<label for="username">  Login </label>
						<input type="text" id="username">
						
						<i class="fas fa-lock prefix grey-text fa-lg"></i>
						<label for="password">  Mots De Passe </label>
						<input type="password" id="password" name="password">
					</div>	
					<br>
					<div class="login-box forma">
						<center>
						
				        <a ><span></span><span></span><span></span><span></span> Envoyer </a></center>
					</div>
				</form>
			</div>	
		</div>				
	</div>
</div>
</body>
<script>
	var current = null;
	document.querySelector('#username').addEventListener('focus', function(e) {
	  if (current) current.pause();
	  current = anime({
		targets: 'path',
		strokeDashoffset: {
		  value: 0,
		  duration: 700,
		  easing: 'easeOutQuart'
		},
		strokeDasharray: {
		  value: '240 1386',
		  duration: 700,
		  easing: 'easeOutQuart'
		}
	  });
	});
	document.querySelector('#password').addEventListener('focus', function(e) {
	  if (current) current.pause();
	  current = anime({
		targets: 'path',
		strokeDashoffset: {
		  value: -336,
		  duration: 700,
		  easing: 'easeOutQuart'
		},
		strokeDasharray: {
		  value: '240 1386',
		  duration: 700,
		  easing: 'easeOutQuart'
		}
	  });
	});
</script>
</html>

ici mon login_view.php le code mvc qui marche :

<center>
    <h1>Login</h1>  
      
<?php    
	echo form_open('Main/login_action');    
    echo validation_errors();  
?> 
    
    <p> Username:  
    
    </p> <input type="text" id="email" name="username">
      <p> Password: 
    
    </p> <input type="text" id="password" name="password">
  
  <button id="">login</button>
<?php 
	// echo form_submit('login_submit', 'Login'); 
    echo form_close();   
?>  
  <br>
   <!-- <a href='<?php //echo base_url()."index.php/Main/signin"; ?>'>Sign In</a> -->    
	
	</center>


Merci d'avance,
Modérateur
Et l'eau,

Je pense que tu dois parler de ce chemin : ./style/index.css

À mon avis, le point est de trop. Après, je ne connais pas l'arbo de ton dossier public.

Il faudrait en savoir d'avantage tout de même.


ps : je t'ai répondu à ton ancien sujet
Modifié par niuxe (08 Mar 2021 - 19:25)
Bonjour,

Pour éviter les problèmes de chemins relatifs, codeigniter (version 2 et 3, je ne connais pas la 4) a une fonction qui permet d'avoir une url absolue:
Il faut activer l'url helper: https://codeigniter.com/user_guide/helpers/url_helper.html

ça donnerait ça:
<link href="<?php echo base_url('style/index.css'); ?>" rel="stylesheet"> 



Après, il faut voir où tu a placé ton dossier style. Habituellement, avec codeigniter, les fichiers statiques (js, css, images) se placent dans un dossier situé au même niveau système et application. En tout cas, c'est ce que je fais
Ca donne un arbre comme ça:
/application
____/controllers
...
/system
____/core
...
/statics
____/css
____/js
____/img

Dans ce cas là, avec base_url, il faudrait donc écrire:
<link href="<?php echo base_url('statics/style/index.css');?>" rel="stylesheet">

Modifié par loicbcn (09 Mar 2021 - 11:23)
Meilleure solution