Faire un simple site web a l'aide d'une simple base de données [Résolu/Fermé]

Signaler
Messages postés
2
Date d'inscription
samedi 1 août 2015
Statut
Membre
Dernière intervention
3 août 2015
-
Messages postés
2
Date d'inscription
samedi 1 août 2015
Statut
Membre
Dernière intervention
3 août 2015
-
bonjour les internautes de ccm, j'ai pensé a une idée pour réaliser mon premier site web mais je ne suis pas sur que j'ai les compétences nécessaire pour le faire . Donc je suis la pour demander un peu d'aide.

Voila je commence a vous expliquer le prince du site,
---- l'utilisateur de mon site va chercher (dans la base de données bien sur) les objet qui va les additionner a l'aide de l'onglet recherche [1].

----l'onglet résultat de recherche va montrer --instantanément-- toutes les objets correspondant a ça recherche [2].

---- [3]l'utilisateur va choisir de l'onglet [2] ( hold and drag si possible) et mettre les objets qui l'a choisit dans l'onglet [4].

---- Enfin il clique sur le bouton [done] pour avoir le résultat

---- a la fin le résultat sera enregistrer dans le compte de l'utilisateur s'il est connecté.



donc je veux que vous me guider a des programmes et a quel compétence je dois apprendre pour je sois capable a faire un site pareil. je peu remplir une base de données + je peu gérer les programmes.
je veux juste vos conseils pour réussir a réaliser ce site. MERCI D'AVANCE.

1 réponse

Salut,

tout d'abord vous devez savoir utiliser HTML qui est un langage simple qui permet(et lui seul) de faire la structure dune page internet. On y ajoute le CSS qui permet de donner l'apparence à ces éléments de la page ainsi qu'un certains nombre de propriétés. HTML définit la structure(et sémantique) sous la forme de container(balise) permettant d'inclure le contenu. CSS permet de faire la mise en page de celui ci.
Par exemple en html:

<p>Ceci est un paragraphe de texte</p>
<---Entre les deux balises <p>(ouvrante) et </p> (fermante) se trouve un texte de type paragraphe, et donc sera reconnu comme tel par les moteurs d'indexation et de référencement-->

<h1>Titre d'un article</h1>
<!-- même chose que précédemment mais h1(balise)indique un titre d'article ou de page.-->

<img src="image.jpg" alt="photo paysage" />
<!-- un autre type de balise cette fois ci pour une image, remarquez que cette balise est dite auto fermante: elle n'a pas besoin d'ouverture et de fermeture comme pour une balise de texte.
src= et alt= sont des attributs de balise.
src(pour source) indique quelle image doit être chargée (ici image.jpg situé dans le répertoire racine du site, voir aussi la définition d'URL)
alt est un attribut sémantique, il indique une valeur descriptive qui permet d'indexer celle ci auprès du moteur de recherche Google, donc correspond à une recherche d'images pour les termes de recherche'photo paysage'.
-->

Plutôt simple non?
Le fichier HTML est à écrire (avec les balises de construction et configuration nécessaire) est un fichier de texte à enregistrer au format .html.
Une présentation d'HTML ici:
https://www.commentcamarche.net/contents/498-html-langage

HTML et CSS permettent de faire des sites (dits) statiques. Le contenu des fichiers doit être réecrit si l'on veut faire un changement.

(pour plus de clarté je fais différents messages)
En ce qui concerne les sites dynamiques il vont charger dans la page le contenu d'une base de données.
Vous devez assimiler ceci:
https://www.commentcamarche.net/contents/221-reseaux-architecture-client-serveur-a-3-niveaux

Concrètement la page va charger(mais pas seulement je vais y venir plus tard) des informations à afficher(entre autres) par le biais du programme. Les 3 parties sont l'affichage(HTML), la base de donnés et le programme.

Une base de données stocke(pour la plupart et pour Internet) uniquement du texte.
Si dans un site nous voulons que le texte d'accueil soit modifiable pour indiquer les dernières actualités ceci ressemblera à ça(ce n'est pas du code mais une représentation symbolique)

<p id="zone_actu">[ ici est chargé le dernier texte actualisé de la base de données]</p>

Ce qui se trouve entre crochets(les crochets n'existe pas, ce n'est qu'une image de la programmation nécessaire) est la partie programme qui interroge(requête) la base pour obtenir le texte à écrire dans la page.
Le programme qui fait la liaison entre la base et la page va aussi fonctionner dans l'autre sens: il va permettre d'envoyer à partir de la page HTML(balise de formulaire <form>et </form>) les informations que l'on veut modifier.
Donc l'utilisateur/administrateur(dûment identifié dans une zone qui n'est pas accessible au public(intranet)) va pouvoir facilement changer le contenu d'une table. Il n'a pas besoin de modifier le HTML à chaque fois.

La majorité des sites sont dynamiques, un site statique étant non actualisable facilement(et pas sur le long terme).

En étant toujours sommaire dans mes explications je vais m'attacher à décrire les nécessités de la conception(plutôt que celles du développement que j'ai décrites pour l'instant).

On parle d'analyse et de conception dans le cas du fonctionnement tri-partie(HTML,programme(PHP entre autres), base de données(comme mySQL)).

En effet la conception(et l'analyse) vont s'attacher à définir les zones qui sont à modifier, donc ce qui doit être modifiable. Comme résultat concret ce seront les tables de donnés de la base.

On parle de Modèles Logique de Données(MLD) pour les tables et leur structures(regroupement des champs) et liaisons(les références entre les tables pour les mettre en rapport).

Bon je suis sûr de ne plus être clair sur ce point. Ceci est une partie primordiale et essentielle, une discipline à part entière permettant de créer un Modèle Conceptuel de Donnés (MCD)à partir de l'analyse des renseignements et valeurs nécessaires pour un Système d'Information.

En voici une présentation:
https://www.commentcamarche.net/contents/655-merise-initiation-a-la-conception-de-systemes-d-information
Pour ce 3ème message/partie je vais vous orienter vers les questions spécifique à votre demande.

Tout d'abord par une mise au point:
Q:"---- l'utilisateur de mon site va chercher (dans la base de données"
R:Certainement pas! C'est le rôle du programme, le fonctionnement tripartie est indispensable car la base de données ne doit jamais être accessible directement. Cela voudrais dire que n'importe qui peut tout y supprimer ou pire la modifier pour la rendre fausse(le résultat étant le même=plus de site qui fonctionne, pertes des données souvent sensibles et privées).

_Q:"les objet qui va les additionner a l'aide de l'onglet recherche [1]"
_R:Ce qui m'a poussé à faire une explication détaillé partant des bases c'est cette partie.
additionner ? je n'ai toujours pas compris, vous voulez dire ajouter? Bon passons.
Dans la première partie de ma réponse j'ai décrit le fonctionnement de HTML. En HTML(contrairement au secrétariat et graphisme print où le rendu/visuel final est la seule règle) il faut différencier le contenu(textes, images, vidéos etc...) du contenant. Le fond ou sujet de la forme. Ceci permet de proposer un langage simple et standardisé pour tout les créateurs d'HTML. Je n'ai qu'évoqué CSS mais son grand avantage est aussi dans cette séparation du contenu et contenant. CSS décrit des propriétés de mise en page dont la grande force est de pouvoir les reproduire simplement. Sans rentrer l'écriture de ses règles on peut avec CSS utiliser une même règle pour plusieurs paragraphes de textes pour une ou plusieurs pages Ainsi pas la peine de faire plusieurs fois la même mise en page ce qui serait plus que fastidieux. On peut aussi changer toute l'apparence du site en modifiant quelques lignes du CSS et beaucoup d'autres avantages que je ne préciserais pas.
Quand on arrive au sites dynamiques cette séparation contenu/contenant et d'autant plus indispensable.
objet? Vous parlez d'éléments visuels donc. Le terme est mal choisit car corresponds à bien autre chose, c'est un terme de programmation fréquent(On parle de Programmation Orienté Objet(POO) mais là n'est pas encore le sujet).
Hors comme vous devez l'avoir compris:

Un élément visuel est composé: de sa structure HTML(et son CSS) ainsi que de son contenu(le texte, l'image éventuelle etc...).
Mais où veux je en venir vous dites vous peut être?
Si j'ai montré qu'on peut changer le contenu d'une balise dynamiquement en stockant le texte ou l'adresse de l'image à afficher dans la page et changer celui ci facilement par le biais du programme on peut faire bien d'autre chose.
En PHP(pour ne citer que lui) on écris ce programme faisant la passerelle avec la base.
Les 2 fonctionnalités principale de PHP sont:
1_ de pouvoir récupérer des résultats ou en envoyer vers/de la base. Si vous êtes familier avec les bases de donnés vous savez que ça corresponds aux requêtes de SQL(Structured Query Language pour langage de requête structuré).
2_ de pouvoir écrire dans la page HTML.

Attardons nous sur le 2ème point:
Le programme écris dans la page HTML. HTML étant du texte PHP écris du texte.
Dans ce cas rien ne nous empêche plutôt que d'écrire dans la balise le texte à afficher d'écrire la balise elle même.

Si vous avez suivis et compris les parties précédentes cela veut dire:
Au lieu décrire:
Marque moi ce texte dans la alise du paragraphe d'actualités on peut tout à fait (faire)écrire par le programme non seulement ce texte actualisable(provenant de la base) mais aussi les balise elles mêmes.
Et bien sûr les règles de présentation/affichage de cette même balise(le CSS).

Nous en revenons au principe de l'analyse.
Si dans notre programme l'apparence du texte est soumise à des changements ce sont des données qui doivent être stockées dans la base.

Je vais tenter de représenter ce que le résultat donne:

En statique: balise + contenu de la balise écris de manière fixe dans le fichier.

En dynamique pour changer le contenu d'une balise:balise + résultat de la requête correspondant au contenu(texte, images...) à afficher
En dynamique toujours:résultat de la requête correspondant à la balise à afficher + résultat de la requête du contenu à afficher.

Q:"----l'onglet résultat de recherche va montrer --instantanément-- toutes les objets correspondant a ça recherche [2]. "
R:Donc toutes les éléments de mise en page qui seront prévus et enregistrés dans la base, les critères et catégories étant bien sûr des données des tables. Elles vont être assemblées selon leurs valeurs, exemple on propose un cadre rectangulaire et sa couleur, ces deux valeurs sont des données distinctes(puisqu'on peut avoir un cadre rouge ou bleu les tables doivent pouvoir adapter, voir partie dictionnaire de données de l'analyse: faire la liste exhaustive de tout ce qui peut être pris en compte).


Q:"---- [3]l'utilisateur va choisir de l'onglet [2] ( hold and drag si possible) et mettre les objets qui l'a choisit dans l'onglet [4]. "
R:Ces fonctionnalités correpondent au langage de programmation Javascript. Je ne l'ai pas évoqué et le détaillerais plus tard dans la partie outil.

Q:"---- Enfin il clique sur le bouton [done] pour avoir le résultat "
R:Comme décrit précédemment la liaison avec la base marche dans 2 sens.
De la base vers la page pour obtenir/afficher un contenu.
Du client(navigateur) vers la base(serveur) pour enregistrer des données dans les tables.
Cela correspond à enregistrer dans la table correspondante les données choisies pour l'utilisateur donné(lui aussi représentée par un jeu ou ligne de données d'une ou plusieurs tables). L'analyse et modélisation(des tables) et encore une fois la réponse à tout ça. c.a.d faire vos tables pour qu'elles correspondent aux besoins exprimées par tout votre système d'information(en suivant la logique informatique bien différente de la logique humaine, Merise est là pour ça).

q:"---- a la fin le résultat sera enregistrer dans le compte de l'utilisateur s'il est connecté."
r:voir réponse précédente. La gestion du clic n'est pas un question puisque correspond à une balise HTML. Les informations de la table sont présentes dans la page même si invible pour l'utilisateur. C'est le principe normal des formulaires.
LES OUTILS:

Votre question montre vos manques de connaissances des technologies web.
En effet que ce soit pour votre projet ou n'importe quel site les outils restent les mêmes,

Les langages de balisages(html, css) ou de programmation script sont écrits avec un éditeur de texte, il en existe des prévus spécialement pour le développement et incorporant des facilité comme la coloration syntaxique et l'auto-complétion qui permettent une facilité d'écriture pour l'auto-complétion et une lisibilité(pour l'humain qui regarde le fichier texte) accrue pour la coloration syntaxique. bloc notes, text edit suffisent. Vous avez des éditeurs comme notepad+ et geany(pour ne citer qu'eux) ainsi que des outils de textes ayant des spécificités à un ou plusieurs langage/format de textes comme eclipse, netbeans...

Je n'ai pas encore évoqué Javascript:
Javascript permet d'agir sur les éléments HTML et CSS par l'intermédiaire du DOM. Avec le DOM(et JQuery qui est un 'perfectionnement' de javascript) et de faire tout ce que HTML ne permet pas sur la page côté navigateur. C'est de ce côté là que vous devez chercher comment changer facilement les propriétés CSS et HTML de vos élément, faire un drag and drop etc...
Je ne l'ai pas évoqué avant car il ne s'utilise presque exclusivement côté client(le navigateur) et donc ne peut remplacer le PHP et SQL qui sont sur le serveur et invisble l'utilisateur. javascript est indispensable à toute fonction d'interactivité plus complexe qu'un lien et utilise les valeurs et paramètres des balises HTML et CSS pour les manipuler. Les informations de ces valeurs étant quand même envoyées par ou vers la base et le programme PHP. Javascript devra les utiliser de façon asynchrone( voir aussi AJAX).


Le programme est écrit en langage de script serveur. Le plus communément utilisé est PHP(gratuit), son jumeau Microsoft asp(payant) ou même Java(Java n'est pas javascript et n'est pas non plus un langage de script, c'est de la programmation compilée à forte orientation objet, comprendre plus complexe, jaa est gratuit et à une forte valeur d'adaptabilité ) en créant des applications web, et bien d'autres.
Je vais détailler le cas de PHP: il nécessite le serveur Apache qui permet d'interpréter son script. WAMP est un logiciel communément employé.
WAMP : pour Windows Apache MySql et PHP, propose les serveurs de PHPet de MySQL ainsi que des outils de développements associés. Il existe des versions utilisant d'autres bases de données et se décline en MAMP(pour Mac), Lamp(Linux), XAMP(compatibles multi OS).


Comme vous commencez peut être à vous en douter le meilleur outil et le plus indispensable reste votre cerveau et les connaissances que vous avez en analyse/modélisation informatique et les autres domaines liées à la programmation et au web.

Il existe aussi des programmes de types CMS.
Un CMS utilise des modèles préconçus pour concevoir des bases de données mais risque de ne pas être suffisant pour la complexité de votre projet: En fait ce que vous voulez faire est un CMS: Un outil de création de gestion de contenu de pages web.

Voilà Comment ça Marche.
Je vous rassure il faut apprendre tout progressivement en commençant par le début(ordre indiqué) et de nombreux sites fournissent des tutos/cours gratuits et vous permettent de pratiquer(la seule façon d'apprendre) pas à pas comme
open class room et codecademy.
Si vous avez des notions de PAO, de programmation et en conception de bases de données vous progresserez vite.
Messages postés
2
Date d'inscription
samedi 1 août 2015
Statut
Membre
Dernière intervention
3 août 2015

merci bien.