Skip to content
Snippets Groups Projects
Commit c1441080 authored by Bastien's avatar Bastien
Browse files

Merge branch 'test-vue'

parents d893eec7 63837e74
No related branches found
No related tags found
No related merge requests found
Showing
with 680 additions and 72 deletions
const db = require('../models/db');
exports.getMovieInformations = (req, res, next) => {
let filmId = req.params.id;
db.query('SELECT * FROM Film WHERE tconst = ?',
[filmId], function (error, results, fields) {
if (error) {
res.status(500).json({ error });
} else {
let infos = results[0];
res.status(200).json(infos);
}
})
};
exports.searchMovie = (req, res, next) => {
let search = req.query.title;
db.query('SELECT * FROM Film WHERE primaryTitle LIKE CONCAT("%",?,"%") OR titleFR LIKE CONCAT("%",?,"%")',
[search, search], function (error, results, fields) {
if(error) {
res.status(500).json({error});
}
else {
let searchResults = results;
res.status(200).json(searchResults);
}
})
};
exports.getRecentlyReleasedMovies = (req, res, next) => {
const numberOfMovies = req.query.numberOfMovies || 20;
db.query('SELECT * FROM Film WHERE releaseDate <= CURDATE() ORDER BY releaseDate DESC LIMIT ?',
[parseInt(numberOfMovies)], (error, results, fields) => {
if (error) {
res.status(500).json({ error });
} else {
res.status(200).json(results);
}
});
};
\ No newline at end of file
const db = require('../models/db');
exports.getPersonInformations = (req, res, next) => {
let personId = req.params.id;
db.query('SELECT * FROM Personne WHERE nconst = ?',
[personId], function (error, results, fields) {
if (error) {
res.status(500).json({ error });
} else {
let infos = results[0];
res.status(200).json(infos);
}
})
};
\ No newline at end of file
...@@ -91,3 +91,91 @@ exports.getUserInformations = (req,res,next) => { ...@@ -91,3 +91,91 @@ exports.getUserInformations = (req,res,next) => {
} }
}) })
}; };
exports.changeUserInfos = async (req, res, next) => {
try {
const { newUsername, newPassword } = req.params;
const currentUsername = req.session.username; // Supposant que le nom d'utilisateur actuel est stocké dans la session
console.log(req.params);
console.log(req.body);
console.log(newUsername );
if (!newUsername && !newPassword) {
return res.status(400).json({ message: 'Aucune information à mettre à jour' });
}
// Vérification si le nouvel utilisateur existe déjà
if (newUsername) {
const userExists = await checkUserExists(newUsername);
if (userExists) {
return res.status(409).json({ message: 'Le nouvel utilisateur existe déjà' });
}
}
// Mise à jour du nom d'utilisateur et/ou du mot de passe dans la base de données
const updateResult = await updateUserInfo(currentUsername, newUsername, newPassword);
// Vérification si la mise à jour a réussi
if (updateResult) {
req.session.username = newUsername || currentUsername; // Mettre à jour le nom d'utilisateur dans la session si applicable
res.status(200).json({ message: 'Informations utilisateur mises à jour avec succès' });
} else {
res.status(500).json({ message: 'Échec de la mise à jour des informations utilisateur' });
}
} catch (error) {
console.error('Erreur lors de la mise à jour des informations utilisateur :', error);
res.status(500).json({ error });
}
};
// Fonction pour vérifier si un utilisateur existe déjà dans la base de données
async function checkUserExists(username) {
const queryResult = await new Promise((resolve, reject) => {
db.query('SELECT COUNT(*) c FROM Utilisateur WHERE login=?', [username], (error, results, fields) => {
if (error) {
reject(error);
} else {
resolve(results[0].c > 0);
}
});
});
return queryResult;
}
// Fonction pour mettre à jour le nom d'utilisateur et/ou le mot de passe dans la base de données
async function updateUserInfo(currentUsername, newUsername, newPassword) {
const updateResult = await new Promise((resolve, reject) => {
let updateQuery = 'UPDATE Utilisateur SET';
const updateParams = [];
if (newUsername) {
updateQuery += ' login=?,';
updateParams.push(newUsername);
}
if (newPassword) {
updateQuery += ' mdp=?,';
const hash = bcrypt.hashSync(newPassword, 10);
updateParams.push(hash);
}
// Supprimer la virgule finale de la requête
updateQuery = updateQuery.replace(/,$/, '');
// Ajouter la clause WHERE pour le nom d'utilisateur actuel
updateQuery += ' WHERE login=?';
updateParams.push(currentUsername);
// Exécution de la mise à jour
db.query(updateQuery, updateParams, (error, results, fields) => {
if (error) {
reject(error);
} else {
resolve(true);
}
});
});
return updateResult;
}
const express = require('express');
const router = express.Router();
const controller = require('../controllers/movieController');
router.get('/:id(tt\\d+)',controller.getMovieInformations);
router.get('/search',controller.searchMovie);
router.get('/recent',controller.getRecentlyReleasedMovies);
module.exports = router;
\ No newline at end of file
const express = require('express');
const router = express.Router();
const controller = require('../controllers/personController');
router.get('/:id(nm\\d+)',controller.getPersonInformations);
module.exports = router;
\ No newline at end of file
...@@ -11,5 +11,7 @@ router.post('/signup', controller.signup); ...@@ -11,5 +11,7 @@ router.post('/signup', controller.signup);
router.get('/logout',auth.auth,controller.logout); router.get('/logout',auth.auth,controller.logout);
router.put('/',auth.auth,controller.changeUserInfos);
module.exports = router; module.exports = router;
\ No newline at end of file
...@@ -16,6 +16,10 @@ app.use(express.urlencoded({ extended: true })); ...@@ -16,6 +16,10 @@ app.use(express.urlencoded({ extended: true }));
app.use(cors({origin: 'http://localhost:5173', credentials : true})); app.use(cors({origin: 'http://localhost:5173', credentials : true}));
const userRoutes = require('./routes/user'); const userRoutes = require('./routes/user');
app.use('/user', userRoutes); app.use('/user', userRoutes);
const moviesRoutes = require('./routes/movies');
app.use('/movies',moviesRoutes);
const personRoutes = require('./routes/person');
app.use('/person',personRoutes);
app.listen(port, () => { app.listen(port, () => {
console.log(`Serveur en cours d'exécution sur le port ${port}`); console.log(`Serveur en cours d'exécution sur le port ${port}`);
......
# frontend n# frontend
This template should help get you started developing with Vue 3 in Vite. This template should help get you started developing with Vue 3 in Vite.
......
@import './base.css'; @import './base.css';
#app { #app {
max-width: 1280px; /* max-width: 1280px; */
margin: 0 auto; /* margin: 0 auto; */
padding: 2rem; /* padding: 2rem; */
font-weight: normal; font-weight: normal;
} }
...@@ -23,13 +23,14 @@ a, ...@@ -23,13 +23,14 @@ a,
@media (min-width: 1024px) { @media (min-width: 1024px) {
body { body {
display: flex; /* display: flex; */
place-items: center; place-items: center;
} }
#app { #app {
display: grid; /* display: grid; */
grid-template-columns: 1fr 1fr; /* grid-template-columns: 1fr 1fr; */
padding: 0 2rem; /* padding: 0 2rem; */
} }
} }
...@@ -47,17 +47,64 @@ onMounted(() => { ...@@ -47,17 +47,64 @@ onMounted(() => {
<template> <template>
<header> <header>
<router-link to="/">
<div>Projet S5</div>
</router-link>
<nav> <nav>
<router-link v-if="!isConnected" to="/inscription">Inscription</router-link> <ul>
<router-link v-if="!isConnected" to="/connexion">Connexion</router-link> <li class = "gauche"> <router-link to="/">
<router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link> Projet S5
<button v-if="isConnected" @click="logout">Déconnexion</button> </router-link></li>
<li class = "droite"><router-link v-if="!isConnected" to="/inscription">Inscription</router-link></li>
<li class = "droite"><router-link v-if="!isConnected" to="/connexion">Connexion</router-link></li>
<li class = "droite"><router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link></li>
<li class = "droite"><a v-if="isConnected" @click="logout">Déconnexion</a></li>
</ul>
</nav> </nav>
</header> </header>
</template> </template>
<style scoped></style> <style scoped>
\ No newline at end of file header {
padding: 0;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.gauche {
float: left;
}
li.droite {
float: right;
}
li.gauche a {
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
button {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
\ No newline at end of file
<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router/index.js'
const searchQuery = ref('');
async function searchMovies() {
router.push({ path: '/search', query: { q: searchQuery.value } });
}
</script>
<template>
<form @submit.prevent="searchMovies">
<input v-model="searchQuery" type="text" placeholder="Exemple : Cars">
<button>Rechercher</button>
</form>
</template>
<style scoped>
input {
display: block;
padding: 10px;
font-size: 20px;
border: none;
outline: none;
background-color: var(--color-background);
color: var(--color-text);
flex-grow: 2;
border-radius: 5px;
}
form {
margin: 10px auto;
width: 45%;
display: flex;
flex-direction: row;
border: 1px solid #e6007e;
border-radius: 5px;
}
input:focus {
outline: none;
}
form:focus-within {
outline: none;
}
button {
border: 1px solid #e6007e;
background: #e6007e;
/* color: var(--color-text); */
border-radius: 0 4px 4px 0;
}
</style>
\ No newline at end of file
...@@ -3,6 +3,9 @@ import Accueil from '../views/Accueil.vue' ...@@ -3,6 +3,9 @@ import Accueil from '../views/Accueil.vue'
import Connexion from '../views/Connexion.vue' import Connexion from '../views/Connexion.vue'
import Inscription from '../views/Inscription.vue' import Inscription from '../views/Inscription.vue'
import MonCompte from '../views/MonCompte.vue' import MonCompte from '../views/MonCompte.vue'
import PageFilm from '../views/PageFilm.vue'
import SearchResults from '../views/SearchResults.vue'
import PagePersonne from '../views/PagePersonne.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
...@@ -26,7 +29,22 @@ const router = createRouter({ ...@@ -26,7 +29,22 @@ const router = createRouter({
path: '/account', path: '/account',
name: 'account', name: 'account',
component: MonCompte component: MonCompte
} },
{
path: '/movie/:id',
name: 'movie',
component: PageFilm
},
{
path: '/search',
name: 'search',
component: SearchResults
},
{
path: '/person/:id',
name: 'person',
component: PagePersonne
},
] ]
}) })
......
...@@ -33,3 +33,13 @@ onMounted(() => { ...@@ -33,3 +33,13 @@ onMounted(() => {
<h2>Le plus beau site du monde</h2> <h2>Le plus beau site du monde</h2>
<FilmRow :films="films"></FilmRow> <FilmRow :films="films"></FilmRow>
</template> </template>
<style scoped>
.film-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
/* Espacement entre les films */
}
</style>
...@@ -29,21 +29,71 @@ function submit() { ...@@ -29,21 +29,71 @@ function submit() {
<template> <template>
<Header> <Header>
</Header> </Header>
<div class="container">
<div class="formulaire">
<h1>Se connecter</h1>
<form @submit.prevent="submit">
<label for="login">Nom d'utilisateur : </label>
<input type="text" placeholder="Nom d'utilisateur" id="login" v-model="login">
<br>
<h1>Se connecter</h1> <label for="password">Mot de passe : </label>
<div> <input type="password" placeholder="Mot de passe" id="password" v-model="password">
<form @submit.prevent="submit"> <br>
<label for="login">Nom d'utilisateur :</label>
<input type="text" placeholder="Nom d'utilisateur" id="login" v-model="login">
<br>
<label for="password">Mot de passe</label> <button type="submit" name="submit">Se connecter</button>
<input type="password" placeholder="Mot de passe" id="password" v-model="password"> </form>
<br> </div>
<button type="submit" name="submit">Se connecter</button>
</form>
</div> </div>
</template> </template>
<style scoped></style> <style scoped>
\ No newline at end of file .container {
display: flex;
justify-content: center;
}
.formulaire {
margin: 50px;
padding: 20px;
border: 1px solid #e6007e;
border-radius: 25px;
}
form label {
display: block;
margin: 10px 0;
font-size: 20px;
}
form input {
display: block;
margin: 10px auto;
padding: 10px;
font-size: 20px;
border: 1px solid #e6007e;
border-radius: 5px;
outline: none;
background-color: var(--color-background);
color: var(--color-text);
}
form button {
display: block;
margin: 10px auto;
padding: 10px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #e6007e;
background-color: var(--color-background);
color: var(--color-text);
}
form button:hover {
background-color: var(--color-background-soft);
}
</style>
\ No newline at end of file
...@@ -16,11 +16,12 @@ function submit() { ...@@ -16,11 +16,12 @@ function submit() {
}, },
credentials: 'include', credentials: 'include',
body: JSON.stringify({ body: JSON.stringify({
username: username, username: username,
firstname: firstname, firstname: firstname,
lastname: lastname, lastname: lastname,
birthdate: birthdate, birthdate: birthdate,
password: password }) password: password
})
}).then(response => { }).then(response => {
if (response.status == 201) { if (response.status == 201) {
router.push('/connexion'); router.push('/connexion');
...@@ -34,30 +35,83 @@ function submit() { ...@@ -34,30 +35,83 @@ function submit() {
<template> <template>
<Header> <Header>
</Header> </Header>
<h1>S'inscrire</h1> <div class="container">
<form @submit.prevent="submit"> <div class="formulaire">
<label for="username">Nom d'utilisateur :</label> <h1>S'inscrire</h1>
<input type="text" placeholder="Nom d'utilisateur" id="username" v-model="username"> <form @submit.prevent="submit">
<br> <label for="username">Nom d'utilisateur : </label>
<input type="text" placeholder="Nom d'utilisateur" id="username" v-model="username">
<label for="firstname">Prénom : </label> <br>
<input type="text" placeholder="Prénom" id="firstname" v-model="firstname">
<br> <label for="firstname">Prénom : </label>
<input type="text" placeholder="Prénom" id="firstname" v-model="firstname">
<label for="lastname">Nom : </label> <br>
<input type="text" placeholder="Nom" id="lastname" v-model="lastname">
<br> <label for="lastname">Nom : </label>
<input type="text" placeholder="Nom" id="lastname" v-model="lastname">
<label for="birthdate">Date de naissance</label> <br>
<input type="date" placeholder="a" id="birthdate" v-model="birthdate">
<br> <label for="birthdate">Date de naissance : </label>
<input type="date" placeholder="a" id="birthdate" v-model="birthdate">
<label for="password">Mot de passe</label> <br>
<input type="password" placeholder="Mot de passe" id="password" v-model="password">
<br> <label for="password">Mot de passe : </label>
<input type="password" placeholder="Mot de passe" id="password" v-model="password">
<button type="submit" name="submit">S'inscrire</button> <br>
</form>
<button type="submit" name="submit">S'inscrire</button>
</form>
</div>
</div>
</template> </template>
<style scoped></style> <style scoped>
\ No newline at end of file .container {
display: flex;
justify-content: center;
}
.formulaire {
margin: 50px;
padding: 20px;
border: 1px solid #e6007e;
border-radius: 25px;
}
form label {
display: block;
margin: 10px 0;
font-size: 20px;
}
form input {
display: block;
margin: 10px auto;
padding: 10px;
font-size: 20px;
border: 1px solid #e6007e;
border-radius: 5px;
outline: none;
background-color: var(--color-background);
color: var(--color-text);
}
form button {
display: block;
margin: 10px auto;
padding: 10px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #e6007e;
background-color: var(--color-background);
color: var(--color-text);
}
form button:hover {
background-color: var(--color-background-soft);
}
</style>
\ No newline at end of file
...@@ -39,17 +39,46 @@ onMounted(() => { ...@@ -39,17 +39,46 @@ onMounted(() => {
</Header> </Header>
<h1>Mes informations</h1> <div>
<h3>Personnelles :</h3> <h1>Mes informations</h1>
<h5>Nom :{{ lastname }}</h5> <p>Nom : {{ lastname }}</p>
<h5>Prénom :{{ firstname }}</h5> <p>Prénom : {{ firstname }}</p>
<h5>Date de naissance : {{ birthdate }}</h5> <p>Date de naissance : {{ birthdate }}</p>
<h3>Films préférés :</h3> <br>
<h3>Sécurité :</h3> <button>Changer de nom d'utilisateur</button>
<button>Changer de mot de login</button> <button>Changer de mot de passe</button>
<br> </div>
<br> <h1>Films préférés :</h1>
<button>Changer de mot de passe</button>
</template> </template>
<style scoped></style> <style scoped>
\ No newline at end of file div {
margin: 50px;
padding: 20px;
border: 1px solid #e6007e;
border-radius: 25px;
text-align: center;
}
button {
display: block;
margin: 10px auto;
padding: 10px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #e6007e;
background-color: var(--color-background);
color: var(--color-text);
}
button:hover {
background-color: var(--color-background-soft);
}
p {
font-size: 20px;
}
</style>
\ No newline at end of file
<script setup>
import Header from '@/components/Header.vue'
import { ref, onMounted } from 'vue';
import {useRoute} from 'vue-router';
const route = useRoute();
let originalTitle = ref('');
let frTitle = ref('');
let annee = ref('');
let duree = ref('');
let note = ref('');
let nbNotes = ref('');
async function getFilmInfo() {
try {
const response = await fetch('http://localhost:3000/movies/' + route.params.id, { credentials: 'include' });
if (response.ok) {
const data = await response.json();
if (data) {
originalTitle.value = data.primaryTitle;
frTitle.value = data.titleFR;
annee.value = data.startYear;
duree.value = data.runtimeMinutes;
note.value = data.averageRating;
nbNotes.value = data.numVotes;
}
} else {
const errorData = await response.json();
console.error('Error:', response.status, errorData);
}
} catch (error) {
console.error('Error during API call:', error);
}
}
onMounted(() => {
getFilmInfo();
});
</script>
<template>
<Header>
</Header>
<h1> {{ frTitle || originalTitle }}</h1>
<h2>Date de sortie : {{ annee }}</h2>
<h2>Durée : {{ duree }} minutes</h2>
<h2>Note : {{ note }}</h2>
</template>
<style scoped></style>
\ No newline at end of file
<script setup>
import Header from '@/components/Header.vue'
import { ref, onMounted } from 'vue';
import {useRoute} from 'vue-router';
const route = useRoute();
let nom = ref('');
let prenom = ref('');
let birthYear = ref('');
let deathYear = ref('');
let profession = ref('');
async function getPersonInfo() {
try {
const response = await fetch('http://localhost:3000/person/' + route.params.id, { credentials: 'include' });
if (response.ok) {
const data = await response.json();
if (data) {
nom.value = data.nom;
prenom.value = data.prenom;
birthYear.value = data.birthYear;
deathYear.value = data.deathYear;
profession.value = data.primaryProfession;
}
} else {
const errorData = await response.json();
console.error('Error:', response.status, errorData);
}
} catch (error) {
console.error('Error during API call:', error);
}
}
onMounted(() => {
getPersonInfo();
});
</script>
<template>
<Header>
</Header>
<h1> {{ nom }} {{ prenom }}</h1>
<h2>Date de naissance : {{ birthYear }}</h2>
<h2 v-if="deathYear">Date de décès : {{ deathYear }} </h2>
<h2>Profession : {{ profession }}</h2>
</template>
<style scoped></style>
\ No newline at end of file
<script setup>
import { ref, onMounted } from 'vue';
import Header from '../components/Header.vue';
import SearchBar from '../components/SearchBar.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
onMounted(() => {
fetchSearchResults();
});
async function fetchSearchResults() {
const searchTitle = route.query.q
const params = new URLSearchParams({ title: searchTitle });
try {
const response = await fetch(`http://localhost:3000/movies/search?${params.toString()}`, { credentials: 'include' });
if (response.ok) {
const data = await response.json();
if (data) {
console.log(data);
}
} else {
const errorData = await response.json();
console.error('Error:', response.status, errorData);
}
} catch (error) {
console.error('Error during API call:', error);
}
}
</script>
<template>
<Header>
</Header>
<SearchBar>
</SearchBar>
</template>
<style scoped>
</style>
\ No newline at end of file
ouvrir un terminal puis taper:
node backend/src/server.js
ouvrir un deuxieme terminal puis taper:
cd.frontend
npm run dev
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment