Cours 420-2D7-LL Développement web

Télécharger : Travail Pratique 4 (Partie 9 - Ajout et Publication).docx

Ajout et Publication

Travail Pratique 4 (suite…)

10 points sur 30

Partie 9

Ajouter un bouton détruire. (0,5 pts)

a) À l'aide de toute les notes de cours, des vidéos et votre projet Angular jusqu'as maintenant…Ajouter un bouton détruire pour chaque objet. Faites une copie de votre projet Angular de la Partie 7 et 8 pour faire la partie 9. (Copier-coller de votre dossier) Attendre que la copie soit complète !!!

b) Tester votre nouveau dossier.

c) Dans mes exemples, j'ai utilisé comme sujet "Les voitures sports de luxe". Poursuivez votre sujet choisi dans la partie 1,2,3,4,5,6,7 et 8.

d) Ajouter un bouton détruire qui va détruire l'élément dans votre base de données.

e) Pour cette partie, je ne vous donne pas la procédure pas-à-pas comme pour les autres parties.

f) Vous devez démontrer vos connaissances et votre débrouillardise pour le faire fonctionner.

g) Voici quelques indice: mon code……

Partie 10

Ajouter un élément de votre choix (5,5 pts)

a) Ajouter au moins 3 éléments supplémentaires à votre projet. À la semaine 11 et 12, je vais vous présenter les sujets suivants:

Transfert de fichier

Fonction, librairie graphique et utile (GD)

Éditeur de texte en ligne

Gestion de panier virtuel

Paiement en ligne

Exemple:

Choix #1 – Envoyer la page PHP dans un nouvel onglet: (-0,5 point, plus facile)

Code à

<a class="nav-link" routerLinkActive="active" href="http://localhost/angular/VoituresFinal/panier/liste.php" target="_blank">Panier</a>

</li>

Choix #2 – Envoyer la page PHP dans un component de Angular: (Maximum de points)

Code à

// Exemple avec 3 options possible...

// Dans le fichier tamplate/html de votre component Angular...

<!DOCTYPE html>

<html>

<head>

<title>Test objet</title>

</head>

<body>

</object>

// ou

</iframe>

// ou

</iframe>

</body>

</html>

Partie 11

Publication (2 pts)

a) Avant de publier votre projet:

· Assuré vous du bon fonctionnement.

· Vérifier les url des appels à vos fichier php

· Donner les permissions aux dossier et fichier si nécessaire ! (777)

· Le nom de la base de données et de la table dans vos fichiers php

b) Déployée avec :

sudo ng build

c) Vérifier si le fichier index.html résultant possède la ligne suivante:

<base href="./">

d) Tester en local (sur votre machine)

Avec Angular vers. 18 et plus…vérifier à

Le "build" est un moment où plusieurs erreurs peuvent arriver !

Il faut les corriger.

Exemple avec la version 18,19 et plus de Angular.

Solution :

app.routes.server.ts:

import { RenderMode, ServerRoute } from '@angular/ssr';

//import { inject, REQUEST } from '@angular/core';

//import { RenderMode } from '@angular/platform-server';

export const serverRoutes: ServerRoute[]= [

{

path: '**',

renderMode: RenderMode.Client

{

path: 'voitures/:id',

renderMode: RenderMode.Prerender,

getPrerenderParams(): Promise<Record<string, string>[]> {

return Promise.resolve(['carcass'].map(i => ({ id: i })));

}, // prerenders in browser/posts/carcass

];

server.ts: (à la fin du fichier…)

// My new middleware

app.use(

'/posts/:id',

express.static(join(browserDistFolder, 'posts', 'carcass', 'index.html'), {

maxAge: '1y',

redirect: false,

}),

);

// Default generated by Angular

app.use(

express.static(browserDistFolder, {

maxAge: '1y',

index: false,

redirect: false,

}),

);

// Default generated by Angular

app.get('/**', (req, res, next) => {

angularApp

.handle(req)

.then(response =>

response ? writeResponseToNodeResponse(response, res) : next(),

)

.catch(next);

});

Ref.: https://github.com/angular/angular-cli/issues/29425

Pour régler le problème suivant:

Modifier dans angular.json à

…

"budgets": [

{

"type": "initial",

"maximumWarning": "800kB",

"maximumError": "1MB"

{

"type": "anyComponentStyle",

"maximumWarning": "4kB",

"maximumError": "8kB"

}

…

Pour régler le problème suivant:

Dans un terminal à

rm -rf .angular dist node_modules

npm cache clean --force

npm install

Publication:

e) Je vais vous envoyer les mots de passe et les noms d'usager pour vous connecter au serveur pour la BD (phpMyAdmin) et transfert de fichier (sftp)

f) Remise maximum, 11 mai 2026

g) Sur le serveur PHP du cégep

Remise TP4, 11 mai 2026

Consigne pour vous connecter au serveur PHP:

Pour Développement Web:
Adresse Externe: 205.236.12.212 ou http://php.dinf.ca/
ou
au département ou derrière le VPN du département...
10.2.0.107

Pour envoyer les fichiers sur le serveur (exemple: Filezilla):
Protocole: sftp:

Hôte: 10.2.0.107 sur le port 22
utilisateur: votre#étudiant
Mot de passe: ***voir MIO******

h) Suggestion pour le transfert, j'utilise FileZilla, connecter vous via le VPN du département d'informatique.

i) Pour la BD, phpMyAdmin, connecter vous via le VPN du département d'informatique.

j) Vérifier le fonctionnement en local et ensuite sur le serveur::

TP4 - Grille de correction

Nom: __________________________ ______

1 – 2 : Components et données dynamiques	/5
3 – 4 : Directives et Pipes	/5
5 – 6 : Les services et le routing	/5
7 – 8 : Les forms et le httpclient	/5
9 - Bouton détruire	/0,5
10 - Ajouter trois éléments de votre choix	/5,5
11 – Publication	/2
Apparence	/2

Cours 420-2D7-LL Développement web

*** lundi, 20 avril 2026 --> semaine 12 !!! ***

* lundi, 20 avril 2026 --> semaine 12 !!! *