Problème de chemin relatif avec TOMCAT pour mes CSS et images
Bonjour à tous,
Voila j'ai un souci que je n'arrive pas à résoudre malgré ce que j'ai pu trouver sur le net et dans ce forum.
Je vous pose le context, j'ai un projet Tomcat via eclispe, j'utilise des servlet et Hibernate (lui pour le cas on s'en fiche). Je débute en JEE donc pour l'instant tout est au plus basic, j'ai une jsp, un web.xml, une servlet, un fichier css et une image de fond.
Mon souci que j'avais déjà avec l'ajout de mon fichier CSS dans ma page JSP qui est appelé via une servlet et que mon image de fond ne s'affiche pas. vu tout ce que j'ai put lire, je pense qu'il s'agit tout simplement d'une histoire de chemin.
Pouvez-vous m'aider svp ?
Le web.xml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<servlet-class>com.servlet.Init</servlet-class>
<servlet-name>index</servlet-name>
</servlet>
<servlet>
<servlet-class>com.servlet.Login</servlet-class>
<servlet-name>identifier</servlet-name>
</servlet>
<servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>identifier</servlet-name>
<url-pattern>/identifier.do</url-pattern>
</servlet-mapping>
</web-app> |
La servlet (Init)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| package com.servlet;
import java.io.IOException;
import org.hibernate.HibernateException;
import org.hibernate.Transaction;
import org.hibernate.classic.Session;
import com.hibernate.HibernateUtil;
import com.hibernate.Buildorder;
import java.io.PrintWriter;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Init the web application
* @author Arnaud
*
*/
public class Init extends HttpServlet {
public void doGet (HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException{
try {
Session session = (Session) HibernateUtil.currentSession();
// Required to commit modifications
Transaction tx = session.beginTransaction();
// Send the list of Build Order
List list = session.find(" from Buildorder");
request.setAttribute("BuildOrders", list);
HibernateUtil.closeSession();
} catch (HibernateException e) {
e.printStackTrace();
}
request.getRequestDispatcher("home.jsp").forward(request, response);
}
} |
La JSP (Path: /projectName/home.jsp)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="com.hibernate.Buildorder,java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css"> <%@ include file="design.css" %> </style>
<title>BO Starcraft 2</title>
</head>
<body>
<div id="header">
</div>
<div id="menu">
<div class="element_menu">
<h3>Member</h3>
<ul>
<li ><a href="inscription.jsp">Inscription</a></li>
<li><a href="vip.jsp">VIP</a></li>
<li><a href="donate.jsp">Donate</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Build Order</h3>
<ul>
<li><a href="boTerran.jsp">Terran</a></li>
<li><a href="boZerg.jsp">Zerg</a></li>
<li><a href="boProtoss.jsp">Protoss</a></li>
</ul>
</div>
</div>
<div id="corps">
<%
Iterator it = ((List)request.getAttribute("BuildOrders")).iterator();
while(it.hasNext()) {
Buildorder build = (Buildorder)it.next();
%>
<ul>
<li><%= build.getName()%></li>
</ul>
<% } %>
</div>
<div id="footer">
@2010 - Web Application JEE & Hibernate
</div>
</body>
</html> |
Le css (Path: /projectName/design.css) où seul le body nous intéresse
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
body
{
width: 1024px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("img/fond.png");
}
#header
{
width: 760px;
height: 100px;
margin-bottom: 10px;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 150px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu h3 /* Tous les titres de menus */
{
margin-left: 5px;
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: left;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
#corps
{
margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#footer
{
padding: 5px;
clear: both;
text-align: center;
color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
} |
et l'image (/projectName/img/fond.png)
Le truc absurde c'est que si je veux accéder à
http://localhost:8080/ProjectName/img/fond.png
J'ai une erreur : Etat HTTP 404 - /ProjectName/img/home.jsp
Suite à ça je décide de modifier temporairement le web.xml
Code:
1
2
3
4
| <servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping> |
Par
Code:
1
2
3
4
| <servlet-mapping>
<servlet-name>index</servlet-name>
<url-pattern>/nimportequoi</url-pattern>
</servlet-mapping> |
Et là en accédant à http://localhost:8080/ProjectName/img/fond.png, je vois bien mon image. Le plus drôle c'est que en remettant le web.xml d'origine en rechargeant Tomcat via le plugin Eclispe, en accédant à nouveau à http://localhost:8080/ProjectName/ j'ai ma jsp avec l'image de fond. Mais en rechargeant la page l'image disparait.
Donc vous l'aurez compris, je suis vraiment dans l'incompréhension. D'ailleurs cette histoire de chemin m'a "obligé" de changer mon link de CSS dans ma jsp
Code:
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
par
Code:
<style type="text/css"> <%@ include file="design.css" %> </style>
Car le premier ne fonctionnait pas surement pour les même raisons.
Mapping incorrecte, mais pourquoi?
Merci le problème venait en effet de là.
Cependant le :
Code:
<url-pattern>/*</url-pattern>
Me génére des erreurs à l'infini, j'ai donc utilisé dans le fichier web.xml
Code:
1
2
3
4
|
<welcome-file-list>
<welcome-file>home.jsp</welcome-file>
</welcome-file-list> |
Ce qui fonctionne parfaitement à mes besoins. Je te remercie pour ton aide :ccool:
